From e7f80710e6984919af1ba5cf47552652b5a4bd0d Mon Sep 17 00:00:00 2001
From: Prithvi Prabhu <prithvi@h2o.ai>
Date: Wed, 28 Oct 2020 21:39:27 -0700
Subject: [PATCH] Release 0.9.0 website

---
 ...85c17.5007ae08.js => 01a85c17.0bb633f0.js} |   2 +-
 docs/08f25880.4ddb9f20.js                     |   1 +
 ...3c366.d31cd624.js => 0923c366.97f55dcc.js} |   2 +-
 ...5cdf6.1b601d55.js => 0965cdf6.047d8432.js} |   2 +-
 ...c0f5b.192be162.js => 0a6c0f5b.da8efe17.js} |   2 +-
 docs/0eb58673.1082abbb.js                     |   1 -
 docs/0eb58673.d66df410.js                     |   1 +
 docs/0f2a58c8.a9787338.js                     |   1 +
 docs/0f2a58c8.d86c4919.js                     |   1 -
 docs/0fd1debb.b46ad397.js                     |   1 +
 docs/0fd1debb.be1ccbf3.js                     |   1 -
 docs/{1.d3a71930.js => 1.4dafcaaf.js}         |   2 +-
 ...72759.aa8c1123.js => 10172759.8473a602.js} |   2 +-
 ...e456e.7c99ebff.js => 109e456e.d3998c59.js} |   2 +-
 ...3ce2c.138ecca1.js => 11e3ce2c.37112f66.js} |   2 +-
 docs/121dd878.095d5908.js                     |   1 -
 docs/121dd878.8a593ca4.js                     |   1 +
 ...e0b0e.12591c6d.js => 126e0b0e.d1ed6129.js} |   2 +-
 ...676cf.f3752766.js => 12e676cf.1dfd58b3.js} |   2 +-
 ...cee2a.8e85b4f9.js => 135cee2a.4fa48724.js} |   2 +-
 docs/1375ade1.05444f9b.js                     |   1 +
 docs/1375ade1.83f02eb6.js                     |   1 -
 ...6e3bc.86163c5d.js => 1486e3bc.a05fa83f.js} |   2 +-
 ...37ef3.febd3ccc.js => 15837ef3.07844001.js} |   2 +-
 docs/15a78352.1e0bd04f.js                     |   1 -
 docs/15a78352.e2b911ca.js                     |   1 +
 ...d8305.dfb7e5b4.js => 174d8305.6a9b0564.js} |   2 +-
 ...96441.78666ca0.js => 17896441.7487f7bf.js} |   2 +-
 ...5adee.dc914a2c.js => 17b5adee.db532509.js} |   2 +-
 ...db351.682c7b8a.js => 18fdb351.95cf7208.js} |   2 +-
 ...e4f21.3960ce2c.js => 190e4f21.969e5a0e.js} |   2 +-
 docs/1a20bc57.a5744ee9.js                     |   1 +
 ...f1376.f1042d0a.js => 1a4f1376.30660dfb.js} |   2 +-
 ...8922b.ecb893d7.js => 1ac8922b.6db144ec.js} |   2 +-
 ...86ebe.c9a5d67f.js => 1ae86ebe.c0744f6c.js} |   2 +-
 docs/1b0f8c91.0f45df95.js                     |   1 -
 docs/1b0f8c91.42e9bcf0.js                     |   1 +
 ...9264e.ad6835f8.js => 1c59264e.021a8962.js} |   2 +-
 ...3ff79.a774c9c2.js => 1cc3ff79.d36455e4.js} |   2 +-
 ...c204c.0cf3b132.js => 1f7c204c.d6a6621a.js} |   2 +-
 docs/{2.95b8a467.js => 2.e94e8fdd.js}         |   4 +-
 ....LICENSE.txt => 2.e94e8fdd.js.LICENSE.txt} |   0
 ...f87c1.7057d601.js => 207f87c1.b4d9440d.js} |   2 +-
 ...88a36.51cf6e5e.js => 22188a36.59773ffa.js} |   2 +-
 docs/{235.30963dc0.js => 237.a770d6f5.js}     |   2 +-
 docs/{236.908f536c.js => 238.cf1fd2bd.js}     |   2 +-
 ...3e11f.b568803c.js => 2673e11f.e32a7b66.js} |   2 +-
 ...07763.3c7ec9cd.js => 26907763.78a84cc6.js} |   2 +-
 docs/26a8c297.6b0d8d74.js                     |   1 +
 ...cfbdf.7d2b8c73.js => 273cfbdf.bacb6f0e.js} |   2 +-
 ...83d16.6409b930.js => 28283d16.58230099.js} |   2 +-
 docs/2868cdab.e22eb885.js                     |   1 -
 docs/296a8b4f.a8ff9479.js                     |   1 +
 docs/296a8b4f.aaf763e4.js                     |   1 -
 ...08973.2bfcd3dd.js => 2bf08973.fc6ef6b5.js} |   2 +-
 ...704cb.4a75d8de.js => 2db704cb.20816776.js} |   2 +-
 docs/2dd92585.1591767e.js                     |   1 +
 docs/2e8e6962.0ed74d46.js                     |   1 +
 docs/2fa9e1ff.04d2dc0e.js                     |   1 +
 docs/2fa9e1ff.5cb4a6a3.js                     |   1 -
 docs/{3.2819f6b8.js => 3.c0e07a77.js}         |   2 +-
 docs/31c3c419.2f652d9f.js                     |   1 +
 docs/31c3c419.ec262224.js                     |   1 -
 docs/31f8b56c.056223e9.js                     |   1 -
 docs/31f8b56c.08e34e2c.js                     |   1 +
 ...d3da4.2c59e278.js => 34cd3da4.553abcee.js} |   2 +-
 docs/3570154c.6fb4d9ba.js                     |   1 -
 ...4c003.a606d50d.js => 3584c003.2b36572c.js} |   2 +-
 docs/35dabcf3.31accd70.js                     |   1 -
 docs/35dabcf3.e798e443.js                     |   1 +
 ...edac9.fd4b7554.js => 360edac9.7fb4d54a.js} |   2 +-
 ...7284d.20d40ff4.js => 3697284d.4cf13213.js} |   2 +-
 docs/36db7894.0f123971.js                     |   1 +
 docs/36db7894.b418751e.js                     |   1 -
 docs/36fe3260.e056d46d.js                     |   1 +
 docs/36fe3260.fa6cd51c.js                     |   1 -
 docs/3713dbfc.2210688a.js                     |   1 -
 docs/3713dbfc.7d7ab8fd.js                     |   1 +
 ...82beb.8b634fbd.js => 37382beb.297f4f29.js} |   2 +-
 ...67279.9c6d1d12.js => 38067279.fc1a43b6.js} |   2 +-
 docs/3aa768f5.5a32e9a7.js                     |   1 -
 docs/3aa768f5.97cc5998.js                     |   1 +
 docs/3abe8fb9.3bd27d47.js                     |   1 +
 docs/3abe8fb9.87518934.js                     |   1 -
 docs/3ae7008e.f2eb3c38.js                     |   1 +
 docs/3b464fa6.41841ff9.js                     |   1 -
 docs/3b464fa6.92e89dc0.js                     |   1 +
 docs/3b64911a.77a6696c.js                     |   1 -
 docs/3b64911a.84bb370d.js                     |   1 +
 docs/3b8c55ea.20d79e43.js                     |   1 +
 docs/3b8c55ea.a292a990.js                     |   1 -
 docs/3da9dc01.f77c7e94.js                     |   1 +
 ...dd320.1b2a555f.js => 3f5dd320.9f9d5e6d.js} |   2 +-
 docs/404.html                                 |  14 +--
 ...4f38c.e138268c.js => 4104f38c.fb19bd1a.js} |   2 +-
 docs/41849bc6.a90ccdc8.js                     |   1 -
 docs/41849bc6.f2d0991e.js                     |   1 +
 ...c54c2.ec1a883e.js => 424c54c2.8d2425bb.js} |   2 +-
 ...c4fb3.3c61f745.js => 430c4fb3.19a43eed.js} |   2 +-
 docs/452608cb.42528341.js                     |   1 +
 docs/452608cb.c798c22b.js                     |   1 -
 docs/4612f97b.80cd17b1.js                     |   1 -
 docs/4612f97b.b25589f7.js                     |   1 +
 docs/4657d646.d9cdfd44.js                     |   1 -
 ...f8a66.80c4c03f.js => 472f8a66.59021c64.js} |   2 +-
 ...4cd26.46ed9b20.js => 4784cd26.a4fc6f8a.js} |   2 +-
 docs/47a365f9.7354e3ea.js                     |   1 +
 docs/47a365f9.d7ec0ae7.js                     |   1 -
 docs/47b3e1f7.8e29a4af.js                     |   1 -
 docs/47b3e1f7.ea95f335.js                     |   1 +
 ...86391.09e5ebbe.js => 48786391.4818219b.js} |   2 +-
 docs/4ab7b8a0.4ff6fba6.js                     |   1 +
 docs/4ab7b8a0.a56f1356.js                     |   1 -
 ...53dd8.f8f0cb02.js => 4b953dd8.6b813e7d.js} |   2 +-
 ...4d076.f075db77.js => 4d54d076.6d426b8b.js} |   2 +-
 ...b2ad1.6cfdca0e.js => 4e3b2ad1.e683ccc6.js} |   2 +-
 ...9ed83.489f3602.js => 4f49ed83.1adef9c5.js} |   2 +-
 ...dabb0.f1e40f46.js => 4f6dabb0.3f205608.js} |   2 +-
 docs/4fc0cd6f.5db0a09b.js                     |   1 -
 ...74c5f.acabea73.js => 50b74c5f.d998e0a5.js} |   2 +-
 ...8cb29.cfa6afe5.js => 5168cb29.4350d716.js} |   2 +-
 ...1b7a2.604456ad.js => 5281b7a2.12637c8c.js} |   2 +-
 ...a2547.2c55cbf7.js => 53da2547.4046d6ef.js} |   2 +-
 docs/549ea605.33db492b.js                     |   1 +
 docs/549ea605.398da942.js                     |   1 -
 ...ab825.d15bb588.js => 54aab825.596afbb9.js} |   2 +-
 docs/58b13b12.2dd6b897.js                     |   1 +
 docs/58b13b12.5e0eeb21.js                     |   1 -
 ...4328a.edcdf6f4.js => 5a34328a.36cd7ed4.js} |   2 +-
 ...2c414.ca72b001.js => 5e52c414.cd86e889.js} |   2 +-
 docs/5e8c322a.17131ef8.js                     |   1 -
 docs/5e8c322a.cd3a7a36.js                     |   1 +
 docs/600ae505.52d994e5.js                     |   1 +
 docs/600ae505.d2fbb0a2.js                     |   1 -
 docs/60759c05.8120de71.js                     |   1 -
 ...4312d.19d2c9b4.js => 6264312d.3911a400.js} |   2 +-
 docs/6405c95c.3af35c12.js                     |   1 -
 docs/6405c95c.cefe993a.js                     |   1 +
 ...e08dd.1ade093f.js => 649e08dd.a9f770b1.js} |   2 +-
 docs/65b8ef03.61b6602a.js                     |   1 -
 docs/65b8ef03.db9d04d0.js                     |   1 +
 docs/661410ac.547505c1.js                     |   1 -
 docs/661410ac.d9824032.js                     |   1 +
 ...5c492.eeb898c4.js => 6875c492.0137459c.js} |   2 +-
 ...ea9bc.adf07d09.js => 692ea9bc.12fddb0c.js} |   2 +-
 ...eb428.f53f077a.js => 6c3eb428.d37e8fa8.js} |   2 +-
 ...0e474.25ff7e23.js => 6ce0e474.ce87120c.js} |   2 +-
 ...6af6b.02a6634d.js => 6d36af6b.55a53883.js} |   2 +-
 docs/6eb0e506.5f6ca2bf.js                     |   1 -
 docs/6eb0e506.abebf02f.js                     |   1 +
 ...3bac7.4e8e6b97.js => 6ee3bac7.80ea67bd.js} |   2 +-
 ...f151f.7b4a84aa.js => 718f151f.ce6db67f.js} |   2 +-
 ...a1919.1c4437c0.js => 746a1919.859c4175.js} |   2 +-
 ...70fc3.c74574c6.js => 77770fc3.15e246fd.js} |   2 +-
 ...0d182.6ac4f142.js => 79d0d182.ff62555f.js} |   2 +-
 docs/7c1cba9e.0a28bb7c.js                     |   1 -
 docs/7c1cba9e.b72820b2.js                     |   1 +
 docs/7ca2f128.5fa74d4e.js                     |   1 -
 docs/7ca2f128.7cfe34ab.js                     |   1 +
 docs/7d1cd1c9.1f4be8b0.js                     |   1 +
 docs/7d1cd1c9.e38b756a.js                     |   1 -
 ...44a8f.e1c95e5b.js => 7d744a8f.a414f615.js} |   2 +-
 ...d2c5c.7cf98df3.js => 7ecd2c5c.9a5da8e4.js} |   2 +-
 ...f4b62.3bcf3283.js => 7f8f4b62.5c0f0fc4.js} |   2 +-
 docs/82f75f63.4e923452.js                     |   1 +
 docs/82f75f63.f94f1ad0.js                     |   1 -
 docs/8542acf3.53333c25.js                     |   1 -
 docs/8542acf3.6c384a58.js                     |   1 +
 docs/854481fc.873ddd4f.js                     |   1 +
 docs/854481fc.ce513a9b.js                     |   1 -
 docs/879fc8a6.e5d1f893.js                     |   1 +
 docs/879fc8a6.fbf02d84.js                     |   1 -
 docs/883d6399.a175ce7a.js                     |   1 +
 docs/883d6399.c42cc20c.js                     |   1 -
 docs/887b127f.5b9fbd78.js                     |   1 +
 docs/887b127f.abe5016d.js                     |   1 -
 docs/88c2f924.37061093.js                     |   1 +
 docs/88c2f924.d842741f.js                     |   1 -
 docs/8954e356.31b01aa7.js                     |   1 +
 docs/8954e356.7546d395.js                     |   1 -
 docs/8c12d624.0b6c818a.js                     |   1 +
 docs/8c12d624.8cb421f3.js                     |   1 -
 docs/8c8ea2c1.31f4a055.js                     |   1 -
 docs/8c8ea2c1.6ffd1b1a.js                     |   1 +
 docs/8caadd29.8215dca6.js                     |   1 +
 docs/8e9f0a8a.ea616d71.js                     |   1 -
 ...f94d7.6b1f4315.js => 8eaf94d7.f12b9f2f.js} |   2 +-
 docs/8f030830.3fafca9c.js                     |   1 -
 docs/8f030830.b746ca66.js                     |   1 +
 docs/9152460a.42fa5a7f.js                     |   1 +
 docs/9152460a.b856da25.js                     |   1 -
 docs/917fcb62.35b584b9.js                     |   1 -
 docs/917fcb62.5fdef126.js                     |   1 +
 docs/935f2afb.aeb7338a.js                     |   1 -
 docs/935f2afb.d4745991.js                     |   1 +
 ...3aca1.0a0bc3a7.js => 9363aca1.ce054208.js} |   2 +-
 docs/93896215.5af00467.js                     |   1 -
 ...b9d10.547b026b.js => 941b9d10.391830c3.js} |   2 +-
 docs/948118d6.1ba3a36f.js                     |   1 +
 docs/948118d6.5b3a0dc9.js                     |   1 -
 docs/950656ac.0aadf206.js                     |   1 -
 docs/950656ac.0ccaa8ab.js                     |   1 +
 ...7bb1a.8454f12b.js => 9747bb1a.5bab2aa6.js} |   2 +-
 ...9aba4.2453d1b1.js => 97d9aba4.04f448bb.js} |   2 +-
 ...78655.63616476.js => 97e78655.60b6caf9.js} |   2 +-
 docs/996e93c8.836b1f20.js                     |   1 +
 docs/996e93c8.ded0a529.js                     |   1 -
 ...fea1d.fe5a6ff2.js => 997fea1d.d3b55233.js} |   2 +-
 ...2a2f7.1912ba90.js => 9a52a2f7.25d15099.js} |   2 +-
 docs/9ed00105.277f7035.js                     |   1 -
 docs/9ed00105.ca11321b.js                     |   1 +
 docs/a3713279.d69af334.js                     |   1 +
 ...fe136.400473bd.js => a50fe136.b26e4f55.js} |   2 +-
 ...511d2.a23ffe9e.js => a54511d2.0cfeb42e.js} |   2 +-
 docs/a64331b1.77fcee94.js                     |   1 -
 docs/a64331b1.a104ef64.js                     |   1 +
 ...a9e1f.0e25f4a4.js => a6aa9e1f.29345e50.js} |   2 +-
 ...4b970.194c0040.js => a814b970.9c5f6aec.js} |   2 +-
 ...2a833.17d49b14.js => a8b2a833.806669fa.js} |   2 +-
 ...b5334.c4ff7379.js => a8bb5334.b90d4b57.js} |   2 +-
 ...c7269.26196dce.js => a8dc7269.14bf2db2.js} |   2 +-
 ...31674.e034ee0a.js => a9331674.965a7491.js} |   2 +-
 ...f648d.9fcf7f62.js => aa7f648d.e4f6c194.js} |   2 +-
 docs/aa9ca283.5215397c.js                     |   1 -
 docs/aa9ca283.79c8caef.js                     |   1 +
 ...7f894.267ecdf7.js => ac27f894.25e9c805.js} |   2 +-
 docs/af172acd.e4c7f550.js                     |   1 -
 .../tour-968f92ad1236ec66ad30ed613ba324db.png | Bin 0 -> 165401 bytes
 ...eload-c8ab0ea721f98fca13da5bc0b1ab26e1.mp4 | Bin 0 -> 1293296 bytes
 docs/b140a32d.d088877e.js                     |   1 -
 docs/b140a32d.fc920547.js                     |   1 +
 ...fb770.4af7a823.js => b18fb770.7856e763.js} |   2 +-
 ...50d5a.08a7c151.js => b1e50d5a.81243680.js} |   2 +-
 ...f7242.2a60e38a.js => b22f7242.be8d2b44.js} |   2 +-
 docs/b4d5475e.dd3985c3.js                     |   1 +
 ...c5e46.c8f1b9ee.js => b81c5e46.e3f1d216.js} |   2 +-
 ...35c12.1840dde3.js => b8435c12.a4ac6d35.js} |   2 +-
 ...9a6e4.aa78f2b5.js => b999a6e4.b163bfee.js} |   2 +-
 ...4d6e6.d5c12a3f.js => b9e4d6e6.94216ee5.js} |   2 +-
 docs/b9f028e1.76e1b947.js                     |   1 +
 docs/b9f028e1.d50f1261.js                     |   1 -
 ...aeef8.33b2d023.js => ba1aeef8.421c8e2f.js} |   2 +-
 ...446ac.f742416a.js => bb5446ac.b79cbe54.js} |   2 +-
 docs/bbdd3825.5e58d881.js                     |   1 +
 docs/bbdd3825.8257b386.js                     |   1 -
 ...b0bbe.8f6f01cf.js => bd0b0bbe.d16ca985.js} |   2 +-
 docs/bd7ed1d7.0af32e81.js                     |   1 -
 docs/bd7ed1d7.9faa1af2.js                     |   1 +
 ...330a7.d1eb828e.js => bdc330a7.2904007d.js} |   2 +-
 docs/bdd709f1.bdb6a562.js                     |   1 -
 docs/bf614533.8a69ecda.js                     |   1 -
 docs/bf614533.e9f653e2.js                     |   1 +
 docs/blog/hello-world/index.html              |  29 -----
 docs/blog/hola/index.html                     |  29 -----
 docs/blog/index.html                          |  42 +++----
 docs/blog/release-0.9.0/index.html            |  34 ++++++
 docs/blog/tags/docusaurus/index.html          |  35 ------
 docs/blog/tags/facebook/index.html            |  31 -----
 docs/blog/tags/hello/index.html               |  33 ------
 docs/blog/tags/hola/index.html                |  31 -----
 docs/blog/tags/index.html                     |  30 ++---
 docs/blog/tags/release/index.html             |  31 +++++
 docs/blog/welcome/index.html                  |  29 -----
 ...c3c71.c8e15b94.js => c07c3c71.61abccad.js} |   2 +-
 ...c41fc.8be5a1e6.js => c0ac41fc.43ca1f95.js} |   2 +-
 docs/c0b6bb44.07febaba.js                     |   1 -
 docs/c0b6bb44.58e31668.js                     |   1 +
 docs/c10c720e.0173a8d3.js                     |   1 +
 docs/c10c720e.4da34ab2.js                     |   1 -
 ...70962.19157d64.js => c1570962.e4a00ed0.js} |   2 +-
 ...f1fe4.44f01cc0.js => c1cf1fe4.af8593f1.js} |   2 +-
 ...5d8e4.8905731d.js => c4f5d8e4.4fc6a1ee.js} |   2 +-
 ...1a4e8.56e47608.js => c641a4e8.437ff80d.js} |   2 +-
 ...62599.724ac45e.js => c7b62599.b49ba390.js} |   2 +-
 ...c151a.061d9ab0.js => c87c151a.4b34076d.js} |   2 +-
 ...5c590.14dfa3de.js => c9e5c590.a5a4891c.js} |   2 +-
 ...ac85d.ee5b488b.js => ca1ac85d.45e0ea7b.js} |   2 +-
 docs/ca622d62.58f63235.js                     |   1 -
 docs/ca622d62.8941bf61.js                     |   1 +
 docs/ca84abdc.cb7c606e.js                     |   1 +
 ...ea0cf.dbdc3880.js => cc0ea0cf.39c2181e.js} |   2 +-
 ...49370.5545763d.js => ccc49370.847efd16.js} |   2 +-
 ...29814.7a492562.js => cd329814.ee103b68.js} |   2 +-
 docs/ce88eaaa.795d7cfb.js                     |   1 +
 docs/ce88eaaa.defa501e.js                     |   1 -
 ...981be.9ed423a2.js => d05981be.375a90cf.js} |   2 +-
 docs/d145135f.219899e0.js                     |   1 -
 docs/d145135f.9c24e637.js                     |   1 +
 docs/d3f54ca5.47bd0228.js                     |   1 +
 docs/d3f54ca5.e6a485f6.js                     |   1 -
 ...e2b4f.25e52c39.js => d4ee2b4f.e3cdbd48.js} |   2 +-
 docs/d589d3a7.36aebee9.js                     |   1 -
 docs/d589d3a7.7779cab6.js                     |   1 +
 docs/d610846f.db356212.js                     |   1 -
 docs/d8689276.205def1e.js                     |   1 -
 docs/d8689276.c08cd42b.js                     |   1 +
 docs/d8aa093c.262becc1.js                     |   1 -
 docs/d8aa093c.abea6469.js                     |   1 +
 ...2d859.e1958d34.js => db32d859.4bcf621d.js} |   2 +-
 ...05eb8.7f4a21ae.js => dc705eb8.0944bfc8.js} |   2 +-
 docs/dceb90d2.36c09c0f.js                     |   1 -
 docs/dceb90d2.f2ed4112.js                     |   1 +
 ...2e8e6.4e7b68e0.js => de02e8e6.9c87a59f.js} |   2 +-
 docs/docs/_start_q/index.html                 |  48 ++++----
 docs/docs/api/autoreload/index.html           |  42 +++----
 docs/docs/api/cli/index.html                  |  33 ++++++
 docs/docs/api/core/index.html                 |  42 +++----
 docs/docs/api/db/index.html                   |  42 +++----
 docs/docs/api/graphics/index.html             |  42 +++----
 docs/docs/api/index/index.html                |  42 +++----
 docs/docs/api/server/index.html               |  42 +++----
 docs/docs/api/test/index.html                 |  42 +++----
 docs/docs/api/types/index.html                |  42 +++----
 docs/docs/api/ui/index.html                   |  42 +++----
 docs/docs/apps/index.html                     |  45 ++++----
 docs/docs/architecture/index.html             |  42 +++----
 docs/docs/arguments/index.html                |  45 ++++----
 docs/docs/background/index.html               |  35 ++++++
 docs/docs/backup/index.html                   |  42 +++----
 docs/docs/browser-testing/index.html          |  44 +++----
 docs/docs/buffers/index.html                  |  42 +++----
 docs/docs/cards/index.html                    |  42 +++----
 docs/docs/change-log/index.html               |  42 +++----
 docs/docs/cli/index.html                      |  35 ++++++
 docs/docs/components/index.html               |  42 +++----
 docs/docs/configuration/index.html            |  42 +++----
 docs/docs/contributing/index.html             |  42 +++----
 docs/docs/deployment/index.html               |  33 ++++++
 docs/docs/development/index.html              |  47 ++++----
 .../docs/enterprise/basic-concepts/index.html |  42 +++----
 .../enterprise/developer-guide/index.html     |  59 +++++-----
 docs/docs/enterprise/index.html               |  42 +++----
 .../examples/background-executor/index.html   |  42 +++++++
 docs/docs/examples/background/index.html      |  41 +++++++
 docs/docs/examples/breadcrumbs/index.html     |  42 +++----
 docs/docs/examples/button/index.html          |  46 ++++----
 docs/docs/examples/buttons/index.html         |  46 ++++----
 docs/docs/examples/card-menu/index.html       |  48 ++++----
 docs/docs/examples/checkbox/index.html        |  46 ++++----
 docs/docs/examples/checklist/index.html       |  46 ++++----
 docs/docs/examples/choice-group/index.html    |  46 ++++----
 docs/docs/examples/color-picker/index.html    |  46 ++++----
 docs/docs/examples/combobox/index.html        |  46 ++++----
 .../examples/counter-broadcast/index.html     |  50 ++++----
 docs/docs/examples/counter-global/index.html  |  50 ++++----
 .../examples/counter-multicast/index.html     |  50 ++++----
 docs/docs/examples/counter-unicast/index.html |  52 ++++-----
 docs/docs/examples/dashboard/index.html       |  42 +++----
 .../examples/date-picker-trigger/index.html   |  46 ++++----
 docs/docs/examples/date-picker/index.html     |  46 ++++----
 docs/docs/examples/dropdown/index.html        |  46 ++++----
 docs/docs/examples/file-upload/index.html     |  44 +++----
 docs/docs/examples/form-frame-path/index.html |  42 +++----
 docs/docs/examples/form-frame/index.html      |  42 +++----
 docs/docs/examples/form-markup/index.html     |  44 +++----
 docs/docs/examples/form-menu/index.html       |  48 ++++----
 docs/docs/examples/form-template/index.html   |  42 +++----
 docs/docs/examples/form/index.html            |  46 ++++----
 docs/docs/examples/frame-path/index.html      |  42 +++----
 docs/docs/examples/frame/index.html           |  42 +++----
 docs/docs/examples/glider-gun/index.html      |  42 +++----
 docs/docs/examples/graphics-clock/index.html  |  42 +++----
 .../docs/examples/graphics-hilbert/index.html |  48 ++++----
 docs/docs/examples/graphics-path/index.html   |  42 +++----
 .../examples/graphics-primitives/index.html   |  44 +++----
 docs/docs/examples/graphics-spline/index.html |  42 +++----
 docs/docs/examples/graphics-turtle/index.html |  42 +++----
 docs/docs/examples/hash-routing/index.html    |  46 ++++----
 docs/docs/examples/header/index.html          |  42 +++----
 docs/docs/examples/hello-world/index.html     |  42 +++----
 docs/docs/examples/image/index.html           |  42 +++----
 docs/docs/examples/index.html                 |  42 +++----
 docs/docs/examples/issue-tracker/index.html   |  46 ++++----
 docs/docs/examples/label/index.html           |  42 +++----
 docs/docs/examples/layout-size/index.html     |  42 +++----
 docs/docs/examples/layout/index.html          |  42 +++----
 docs/docs/examples/link/index.html            |  42 +++----
 docs/docs/examples/markdown-data/index.html   |  42 +++----
 docs/docs/examples/markdown/index.html        |  42 +++----
 docs/docs/examples/markup/index.html          |  42 +++----
 docs/docs/examples/message-bar/index.html     |  42 +++----
 docs/docs/examples/meta-icon/index.html       |  38 ++++++
 .../examples/meta-notification/index.html     |  44 +++----
 docs/docs/examples/meta-redirect/index.html   |  42 +++----
 docs/docs/examples/meta-refresh/index.html    |  42 +++----
 docs/docs/examples/meta-title/index.html      |  44 +++----
 docs/docs/examples/nav/index.html             |  42 +++----
 .../docs/examples/picker-selection/index.html |  46 ++++----
 docs/docs/examples/picker/index.html          |  46 ++++----
 docs/docs/examples/pixel-art/index.html       |  42 +++----
 docs/docs/examples/plot-altair/index.html     |  42 +++----
 .../docs/examples/plot-area-groups/index.html |  42 +++----
 .../examples/plot-area-line-groups/index.html |  42 +++----
 .../examples/plot-area-line-smooth/index.html |  42 +++----
 docs/docs/examples/plot-area-line/index.html  |  42 +++----
 .../examples/plot-area-negative/index.html    |  42 +++----
 docs/docs/examples/plot-area-range/index.html |  42 +++----
 .../docs/examples/plot-area-smooth/index.html |  42 +++----
 .../examples/plot-area-stacked/index.html     |  42 +++----
 docs/docs/examples/plot-area/index.html       |  42 +++----
 docs/docs/examples/plot-axis-title/index.html |  42 +++----
 docs/docs/examples/plot-bokeh/index.html      |  42 +++----
 docs/docs/examples/plot-d3/index.html         |  42 +++----
 docs/docs/examples/plot-form/index.html       |  42 +++----
 docs/docs/examples/plot-histogram/index.html  |  42 +++----
 .../index.html                                |  42 +++----
 .../plot-interval-annotation/index.html       |  42 +++----
 .../plot-interval-groups-transpose/index.html |  42 +++----
 .../examples/plot-interval-groups/index.html  |  42 +++----
 .../examples/plot-interval-helix/index.html   |  42 +++----
 .../examples/plot-interval-labels/index.html  |  42 +++----
 .../plot-interval-polar-stacked/index.html    |  42 +++----
 .../examples/plot-interval-polar/index.html   |  42 +++----
 .../plot-interval-range-transpose/index.html  |  42 +++----
 .../examples/plot-interval-range/index.html   |  42 +++----
 .../index.html                                |  42 +++----
 .../plot-interval-stacked-grouped/index.html  |  42 +++----
 .../index.html                                |  42 +++----
 .../examples/plot-interval-stacked/index.html |  42 +++----
 .../examples/plot-interval-theta/index.html   |  42 +++----
 .../plot-interval-transpose/index.html        |  42 +++----
 docs/docs/examples/plot-interval/index.html   |  42 +++----
 .../examples/plot-line-annotation/index.html  |  42 +++----
 .../docs/examples/plot-line-groups/index.html |  42 +++----
 .../plot-line-labels-no-overlap/index.html    |  42 +++----
 .../plot-line-labels-stroked/index.html       |  42 +++----
 .../docs/examples/plot-line-labels/index.html |  42 +++----
 .../docs/examples/plot-line-smooth/index.html |  42 +++----
 docs/docs/examples/plot-line/index.html       |  42 +++----
 docs/docs/examples/plot-matplotlib/index.html |  50 ++++----
 docs/docs/examples/plot-path-point/index.html |  42 +++----
 .../docs/examples/plot-path-smooth/index.html |  42 +++----
 docs/docs/examples/plot-path/index.html       |  42 +++----
 docs/docs/examples/plot-plotly/index.html     |  50 ++++----
 .../examples/plot-point-annotation/index.html |  42 +++----
 .../examples/plot-point-custom/index.html     |  42 +++----
 .../examples/plot-point-groups/index.html     |  42 +++----
 docs/docs/examples/plot-point-map/index.html  |  42 +++----
 .../examples/plot-point-shapes/index.html     |  42 +++----
 .../docs/examples/plot-point-sizes/index.html |  42 +++----
 docs/docs/examples/plot-point/index.html      |  42 +++----
 docs/docs/examples/plot-polygon/index.html    |  42 +++----
 docs/docs/examples/plot-step-after/index.html |  42 +++----
 .../docs/examples/plot-step-before/index.html |  42 +++----
 docs/docs/examples/plot-step/index.html       |  42 +++----
 .../examples/plot-vegalite-form/index.html    |  42 +++----
 .../examples/plot-vegalite-update/index.html  |  42 +++----
 docs/docs/examples/plot-vegalite/index.html   |  42 +++----
 docs/docs/examples/progress-update/index.html |  42 +++----
 docs/docs/examples/progress/index.html        |  42 +++----
 docs/docs/examples/range-slider/index.html    |  46 ++++----
 docs/docs/examples/separator/index.html       |  42 +++----
 docs/docs/examples/site-async/index.html      |  43 +++++++
 docs/docs/examples/slider/index.html          |  46 ++++----
 docs/docs/examples/spinbox/index.html         |  46 ++++----
 docs/docs/examples/stat-large-bar/index.html  |  42 +++----
 docs/docs/examples/stat-large/index.html      |  42 +++----
 .../stat-small-series-area/index.html         |  42 +++----
 .../stat-small-series-interval/index.html     |  42 +++----
 docs/docs/examples/stat-small/index.html      |  42 +++----
 docs/docs/examples/stat-tall-gauge/index.html |  42 +++----
 .../examples/stat-tall-series-area/index.html |  42 +++----
 .../stat-tall-series-interval/index.html      |  42 +++----
 docs/docs/examples/stat-wide-bar/index.html   |  42 +++----
 docs/docs/examples/stat-wide-gauge/index.html |  42 +++----
 .../examples/stat-wide-series-area/index.html |  42 +++----
 .../stat-wide-series-interval/index.html      |  42 +++----
 docs/docs/examples/stepper/index.html         |  48 ++++----
 docs/docs/examples/swatch-picker/index.html   |  46 ++++----
 docs/docs/examples/tab-delete/index.html      |  50 ++++----
 docs/docs/examples/tab-link/index.html        |  42 +++----
 docs/docs/examples/tab-routing/index.html     |  48 ++++----
 docs/docs/examples/tab/index.html             |  42 +++----
 docs/docs/examples/table-download/index.html  |  46 ++++----
 .../examples/table-filter-backend/index.html  |  48 ++++----
 docs/docs/examples/table-filter/index.html    |  46 ++++----
 docs/docs/examples/table-groupby/index.html   |  46 ++++----
 docs/docs/examples/table-markdown/index.html  |  44 +++----
 docs/docs/examples/table-search/index.html    |  46 ++++----
 docs/docs/examples/table-select/index.html    |  46 ++++----
 docs/docs/examples/table-sort/index.html      |  46 ++++----
 docs/docs/examples/table/index.html           |  46 ++++----
 docs/docs/examples/tabs/index.html            |  48 ++++----
 docs/docs/examples/template-data/index.html   |  42 +++----
 docs/docs/examples/template/index.html        |  42 +++----
 docs/docs/examples/text-sizes/index.html      |  42 +++----
 docs/docs/examples/text/index.html            |  42 +++----
 docs/docs/examples/textbox-trigger/index.html |  46 ++++----
 docs/docs/examples/textbox/index.html         |  46 ++++----
 docs/docs/examples/todo/index.html            |  48 ++++----
 docs/docs/examples/toggle/index.html          |  46 ++++----
 docs/docs/examples/toolbar-routing/index.html |  48 ++++----
 docs/docs/examples/toolbar/index.html         |  46 ++++----
 docs/docs/examples/upload-async/index.html    |  48 ++++----
 docs/docs/examples/upload-download/index.html |  49 ++++----
 docs/docs/examples/upload-ui/index.html       |  46 ++++----
 docs/docs/examples/upload/index.html          |  44 +++----
 docs/docs/examples/wizard/index.html          |  50 ++++----
 docs/docs/expressions/index.html              |  42 +++----
 docs/docs/files/index.html                    |  48 ++++----
 docs/docs/getting-started/index.html          |  47 ++++----
 docs/docs/graphics/index.html                 |  42 +++----
 docs/docs/guide/index.html                    |  42 +++----
 docs/docs/installation/index.html             |  42 +++----
 docs/docs/layout/index.html                   |  42 +++----
 docs/docs/logging/index.html                  |  45 ++++----
 docs/docs/migrating-0-8/index.html            |  36 ++++++
 docs/docs/migrating-0/index.html              |  44 +++----
 docs/docs/pages/index.html                    |  44 +++----
 docs/docs/plotting/index.html                 |  42 +++----
 docs/docs/realtime/index.html                 |  45 ++++----
 docs/docs/routing/index.html                  |  58 +++++-----
 docs/docs/scripts/index.html                  |  42 +++----
 docs/docs/security/index.html                 |  45 ++++----
 docs/docs/state/index.html                    |  45 ++++----
 docs/docs/testing/index.html                  |  42 +++----
 docs/docs/tour/index.html                     |  46 ++++----
 docs/docs/tutorial-beer/index.html            |  42 +++----
 docs/docs/tutorial-counter/index.html         |  87 ++++++--------
 docs/docs/tutorial-hello/index.html           |  48 ++++----
 docs/docs/tutorial-monitor/index.html         |  44 +++----
 docs/docs/tutorial-todo/index.html            | 108 +++++++-----------
 ...3439f.143ae2bf.js => e013439f.9b377459.js} |   2 +-
 ...c5859.399095c5.js => e32c5859.afb5fae3.js} |   2 +-
 ...8fb51.9c820d69.js => e4e8fb51.f6621ec9.js} |   2 +-
 docs/e7ad456d.8574afa5.js                     |   1 +
 docs/e7ba74f4.0bd15322.js                     |   1 +
 docs/e7ba74f4.7c2bb260.js                     |   1 -
 docs/e7c32899.69aa09e3.js                     |   1 -
 docs/e7c32899.ee888209.js                     |   1 +
 ...3177e.5dba918c.js => e833177e.6f3c86db.js} |   2 +-
 ...1c6e8.de38f0bd.js => e8c1c6e8.5a21f0e6.js} |   2 +-
 ...704c5.29ba907a.js => e96704c5.57ed2674.js} |   2 +-
 ...bb38c.c8e1e264.js => eb2bb38c.3448601c.js} |   2 +-
 ...ac497.8252c18f.js => ecdac497.e79d40df.js} |   2 +-
 ...db3ec.f478a091.js => ed3db3ec.c5ffd957.js} |   2 +-
 docs/eec6e613.03039ef9.js                     |   1 -
 docs/eec6e613.2511e3b9.js                     |   1 +
 docs/f09ebdf1.d4463329.js                     |   1 -
 docs/f09ebdf1.fafc5207.js                     |   1 +
 docs/f132454a.72aa0b8b.js                     |   1 -
 docs/f132454a.996a8617.js                     |   1 +
 ...1ab1a.f861a152.js => f151ab1a.efb732bc.js} |   2 +-
 ...c6cfa.8ae38ae3.js => f1ec6cfa.90acea76.js} |   2 +-
 ...433ff.717b57f0.js => f21433ff.738455b0.js} |   2 +-
 ...d2ab0.fe741d4d.js => f21d2ab0.549d1c33.js} |   2 +-
 ...73c5b.a1665bdc.js => f3473c5b.ff1378dc.js} |   2 +-
 docs/f349fb86.2a5c5652.js                     |   1 -
 docs/f349fb86.689afca8.js                     |   1 +
 docs/f60be60c.9007beb7.js                     |   1 -
 docs/f60be60c.c40d6c3e.js                     |   1 +
 ...a47c5.d992c5ba.js => f7ea47c5.f9a0edd9.js} |   2 +-
 docs/f811e444.64e4a563.js                     |   1 -
 docs/f811e444.acf97bbf.js                     |   1 +
 ...6e950.01b9cc09.js => f846e950.e91bfc98.js} |   2 +-
 docs/faf81df8.bd73165b.js                     |   1 -
 docs/faf81df8.e782e9d4.js                     |   1 +
 ...93038.c011a924.js => fbe93038.988a69e9.js} |   2 +-
 docs/fcfc3752.1ceac70b.js                     |   1 +
 docs/fcfc3752.e536a904.js                     |   1 -
 docs/fd056868.42217e60.js                     |   1 -
 docs/fd056868.c9138dea.js                     |   1 +
 docs/fe4d4432.25e593e1.js                     |   1 +
 docs/fe4d4432.bb7ccc47.js                     |   1 -
 docs/index.html                               |  26 ++---
 docs/main.0720c80c.js                         |   2 +
 ...CENSE.txt => main.0720c80c.js.LICENSE.txt} |   0
 docs/main.64610da1.js                         |   2 -
 docs/runtime~main.7ebe698c.js                 |   1 -
 docs/runtime~main.b200dec9.js                 |   1 +
 docs/sitemap.xml                              |   2 +-
 ...{styles.f5ed2e52.js => styles.f2d89f88.js} |   2 +-
 572 files changed, 5268 insertions(+), 5237 deletions(-)
 rename docs/{01a85c17.5007ae08.js => 01a85c17.0bb633f0.js} (86%)
 create mode 100644 docs/08f25880.4ddb9f20.js
 rename docs/{0923c366.d31cd624.js => 0923c366.97f55dcc.js} (84%)
 rename docs/{0965cdf6.1b601d55.js => 0965cdf6.047d8432.js} (97%)
 rename docs/{0a6c0f5b.192be162.js => 0a6c0f5b.da8efe17.js} (81%)
 delete mode 100644 docs/0eb58673.1082abbb.js
 create mode 100644 docs/0eb58673.d66df410.js
 create mode 100644 docs/0f2a58c8.a9787338.js
 delete mode 100644 docs/0f2a58c8.d86c4919.js
 create mode 100644 docs/0fd1debb.b46ad397.js
 delete mode 100644 docs/0fd1debb.be1ccbf3.js
 rename docs/{1.d3a71930.js => 1.4dafcaaf.js} (92%)
 rename docs/{10172759.aa8c1123.js => 10172759.8473a602.js} (97%)
 rename docs/{109e456e.7c99ebff.js => 109e456e.d3998c59.js} (92%)
 rename docs/{11e3ce2c.138ecca1.js => 11e3ce2c.37112f66.js} (98%)
 delete mode 100644 docs/121dd878.095d5908.js
 create mode 100644 docs/121dd878.8a593ca4.js
 rename docs/{126e0b0e.12591c6d.js => 126e0b0e.d1ed6129.js} (92%)
 rename docs/{12e676cf.f3752766.js => 12e676cf.1dfd58b3.js} (90%)
 rename docs/{135cee2a.8e85b4f9.js => 135cee2a.4fa48724.js} (50%)
 create mode 100644 docs/1375ade1.05444f9b.js
 delete mode 100644 docs/1375ade1.83f02eb6.js
 rename docs/{1486e3bc.86163c5d.js => 1486e3bc.a05fa83f.js} (93%)
 rename docs/{15837ef3.febd3ccc.js => 15837ef3.07844001.js} (61%)
 delete mode 100644 docs/15a78352.1e0bd04f.js
 create mode 100644 docs/15a78352.e2b911ca.js
 rename docs/{174d8305.dfb7e5b4.js => 174d8305.6a9b0564.js} (85%)
 rename docs/{17896441.78666ca0.js => 17896441.7487f7bf.js} (93%)
 rename docs/{17b5adee.dc914a2c.js => 17b5adee.db532509.js} (92%)
 rename docs/{18fdb351.682c7b8a.js => 18fdb351.95cf7208.js} (96%)
 rename docs/{190e4f21.3960ce2c.js => 190e4f21.969e5a0e.js} (92%)
 create mode 100644 docs/1a20bc57.a5744ee9.js
 rename docs/{1a4f1376.f1042d0a.js => 1a4f1376.30660dfb.js} (90%)
 rename docs/{1ac8922b.ecb893d7.js => 1ac8922b.6db144ec.js} (92%)
 rename docs/{1ae86ebe.c9a5d67f.js => 1ae86ebe.c0744f6c.js} (92%)
 delete mode 100644 docs/1b0f8c91.0f45df95.js
 create mode 100644 docs/1b0f8c91.42e9bcf0.js
 rename docs/{1c59264e.ad6835f8.js => 1c59264e.021a8962.js} (89%)
 rename docs/{1cc3ff79.a774c9c2.js => 1cc3ff79.d36455e4.js} (92%)
 rename docs/{1f7c204c.0cf3b132.js => 1f7c204c.d6a6621a.js} (98%)
 rename docs/{2.95b8a467.js => 2.e94e8fdd.js} (90%)
 rename docs/{2.95b8a467.js.LICENSE.txt => 2.e94e8fdd.js.LICENSE.txt} (100%)
 rename docs/{207f87c1.7057d601.js => 207f87c1.b4d9440d.js} (92%)
 rename docs/{22188a36.51cf6e5e.js => 22188a36.59773ffa.js} (92%)
 rename docs/{235.30963dc0.js => 237.a770d6f5.js} (94%)
 rename docs/{236.908f536c.js => 238.cf1fd2bd.js} (80%)
 rename docs/{2673e11f.b568803c.js => 2673e11f.e32a7b66.js} (92%)
 rename docs/{26907763.3c7ec9cd.js => 26907763.78a84cc6.js} (92%)
 create mode 100644 docs/26a8c297.6b0d8d74.js
 rename docs/{273cfbdf.7d2b8c73.js => 273cfbdf.bacb6f0e.js} (92%)
 rename docs/{28283d16.6409b930.js => 28283d16.58230099.js} (97%)
 delete mode 100644 docs/2868cdab.e22eb885.js
 create mode 100644 docs/296a8b4f.a8ff9479.js
 delete mode 100644 docs/296a8b4f.aaf763e4.js
 rename docs/{2bf08973.2bfcd3dd.js => 2bf08973.fc6ef6b5.js} (92%)
 rename docs/{2db704cb.4a75d8de.js => 2db704cb.20816776.js} (92%)
 create mode 100644 docs/2dd92585.1591767e.js
 create mode 100644 docs/2e8e6962.0ed74d46.js
 create mode 100644 docs/2fa9e1ff.04d2dc0e.js
 delete mode 100644 docs/2fa9e1ff.5cb4a6a3.js
 rename docs/{3.2819f6b8.js => 3.c0e07a77.js} (95%)
 create mode 100644 docs/31c3c419.2f652d9f.js
 delete mode 100644 docs/31c3c419.ec262224.js
 delete mode 100644 docs/31f8b56c.056223e9.js
 create mode 100644 docs/31f8b56c.08e34e2c.js
 rename docs/{34cd3da4.2c59e278.js => 34cd3da4.553abcee.js} (92%)
 delete mode 100644 docs/3570154c.6fb4d9ba.js
 rename docs/{3584c003.a606d50d.js => 3584c003.2b36572c.js} (92%)
 delete mode 100644 docs/35dabcf3.31accd70.js
 create mode 100644 docs/35dabcf3.e798e443.js
 rename docs/{360edac9.fd4b7554.js => 360edac9.7fb4d54a.js} (97%)
 rename docs/{3697284d.20d40ff4.js => 3697284d.4cf13213.js} (97%)
 create mode 100644 docs/36db7894.0f123971.js
 delete mode 100644 docs/36db7894.b418751e.js
 create mode 100644 docs/36fe3260.e056d46d.js
 delete mode 100644 docs/36fe3260.fa6cd51c.js
 delete mode 100644 docs/3713dbfc.2210688a.js
 create mode 100644 docs/3713dbfc.7d7ab8fd.js
 rename docs/{37382beb.8b634fbd.js => 37382beb.297f4f29.js} (96%)
 rename docs/{38067279.9c6d1d12.js => 38067279.fc1a43b6.js} (92%)
 delete mode 100644 docs/3aa768f5.5a32e9a7.js
 create mode 100644 docs/3aa768f5.97cc5998.js
 create mode 100644 docs/3abe8fb9.3bd27d47.js
 delete mode 100644 docs/3abe8fb9.87518934.js
 create mode 100644 docs/3ae7008e.f2eb3c38.js
 delete mode 100644 docs/3b464fa6.41841ff9.js
 create mode 100644 docs/3b464fa6.92e89dc0.js
 delete mode 100644 docs/3b64911a.77a6696c.js
 create mode 100644 docs/3b64911a.84bb370d.js
 create mode 100644 docs/3b8c55ea.20d79e43.js
 delete mode 100644 docs/3b8c55ea.a292a990.js
 create mode 100644 docs/3da9dc01.f77c7e94.js
 rename docs/{3f5dd320.1b2a555f.js => 3f5dd320.9f9d5e6d.js} (92%)
 rename docs/{4104f38c.e138268c.js => 4104f38c.fb19bd1a.js} (93%)
 delete mode 100644 docs/41849bc6.a90ccdc8.js
 create mode 100644 docs/41849bc6.f2d0991e.js
 rename docs/{424c54c2.ec1a883e.js => 424c54c2.8d2425bb.js} (97%)
 rename docs/{430c4fb3.3c61f745.js => 430c4fb3.19a43eed.js} (96%)
 create mode 100644 docs/452608cb.42528341.js
 delete mode 100644 docs/452608cb.c798c22b.js
 delete mode 100644 docs/4612f97b.80cd17b1.js
 create mode 100644 docs/4612f97b.b25589f7.js
 delete mode 100644 docs/4657d646.d9cdfd44.js
 rename docs/{472f8a66.80c4c03f.js => 472f8a66.59021c64.js} (97%)
 rename docs/{4784cd26.46ed9b20.js => 4784cd26.a4fc6f8a.js} (97%)
 create mode 100644 docs/47a365f9.7354e3ea.js
 delete mode 100644 docs/47a365f9.d7ec0ae7.js
 delete mode 100644 docs/47b3e1f7.8e29a4af.js
 create mode 100644 docs/47b3e1f7.ea95f335.js
 rename docs/{48786391.09e5ebbe.js => 48786391.4818219b.js} (92%)
 create mode 100644 docs/4ab7b8a0.4ff6fba6.js
 delete mode 100644 docs/4ab7b8a0.a56f1356.js
 rename docs/{4b953dd8.f8f0cb02.js => 4b953dd8.6b813e7d.js} (92%)
 rename docs/{4d54d076.f075db77.js => 4d54d076.6d426b8b.js} (98%)
 rename docs/{4e3b2ad1.6cfdca0e.js => 4e3b2ad1.e683ccc6.js} (93%)
 rename docs/{4f49ed83.489f3602.js => 4f49ed83.1adef9c5.js} (96%)
 rename docs/{4f6dabb0.f1e40f46.js => 4f6dabb0.3f205608.js} (98%)
 delete mode 100644 docs/4fc0cd6f.5db0a09b.js
 rename docs/{50b74c5f.acabea73.js => 50b74c5f.d998e0a5.js} (93%)
 rename docs/{5168cb29.cfa6afe5.js => 5168cb29.4350d716.js} (97%)
 rename docs/{5281b7a2.604456ad.js => 5281b7a2.12637c8c.js} (64%)
 rename docs/{53da2547.2c55cbf7.js => 53da2547.4046d6ef.js} (92%)
 create mode 100644 docs/549ea605.33db492b.js
 delete mode 100644 docs/549ea605.398da942.js
 rename docs/{54aab825.d15bb588.js => 54aab825.596afbb9.js} (92%)
 create mode 100644 docs/58b13b12.2dd6b897.js
 delete mode 100644 docs/58b13b12.5e0eeb21.js
 rename docs/{5a34328a.edcdf6f4.js => 5a34328a.36cd7ed4.js} (64%)
 rename docs/{5e52c414.ca72b001.js => 5e52c414.cd86e889.js} (96%)
 delete mode 100644 docs/5e8c322a.17131ef8.js
 create mode 100644 docs/5e8c322a.cd3a7a36.js
 create mode 100644 docs/600ae505.52d994e5.js
 delete mode 100644 docs/600ae505.d2fbb0a2.js
 delete mode 100644 docs/60759c05.8120de71.js
 rename docs/{6264312d.19d2c9b4.js => 6264312d.3911a400.js} (99%)
 delete mode 100644 docs/6405c95c.3af35c12.js
 create mode 100644 docs/6405c95c.cefe993a.js
 rename docs/{649e08dd.1ade093f.js => 649e08dd.a9f770b1.js} (97%)
 delete mode 100644 docs/65b8ef03.61b6602a.js
 create mode 100644 docs/65b8ef03.db9d04d0.js
 delete mode 100644 docs/661410ac.547505c1.js
 create mode 100644 docs/661410ac.d9824032.js
 rename docs/{6875c492.eeb898c4.js => 6875c492.0137459c.js} (77%)
 rename docs/{692ea9bc.adf07d09.js => 692ea9bc.12fddb0c.js} (93%)
 rename docs/{6c3eb428.f53f077a.js => 6c3eb428.d37e8fa8.js} (92%)
 rename docs/{6ce0e474.25ff7e23.js => 6ce0e474.ce87120c.js} (93%)
 rename docs/{6d36af6b.02a6634d.js => 6d36af6b.55a53883.js} (97%)
 delete mode 100644 docs/6eb0e506.5f6ca2bf.js
 create mode 100644 docs/6eb0e506.abebf02f.js
 rename docs/{6ee3bac7.4e8e6b97.js => 6ee3bac7.80ea67bd.js} (98%)
 rename docs/{718f151f.7b4a84aa.js => 718f151f.ce6db67f.js} (92%)
 rename docs/{746a1919.1c4437c0.js => 746a1919.859c4175.js} (91%)
 rename docs/{77770fc3.c74574c6.js => 77770fc3.15e246fd.js} (91%)
 rename docs/{79d0d182.6ac4f142.js => 79d0d182.ff62555f.js} (97%)
 delete mode 100644 docs/7c1cba9e.0a28bb7c.js
 create mode 100644 docs/7c1cba9e.b72820b2.js
 delete mode 100644 docs/7ca2f128.5fa74d4e.js
 create mode 100644 docs/7ca2f128.7cfe34ab.js
 create mode 100644 docs/7d1cd1c9.1f4be8b0.js
 delete mode 100644 docs/7d1cd1c9.e38b756a.js
 rename docs/{7d744a8f.e1c95e5b.js => 7d744a8f.a414f615.js} (92%)
 rename docs/{7ecd2c5c.7cf98df3.js => 7ecd2c5c.9a5da8e4.js} (94%)
 rename docs/{7f8f4b62.3bcf3283.js => 7f8f4b62.5c0f0fc4.js} (99%)
 create mode 100644 docs/82f75f63.4e923452.js
 delete mode 100644 docs/82f75f63.f94f1ad0.js
 delete mode 100644 docs/8542acf3.53333c25.js
 create mode 100644 docs/8542acf3.6c384a58.js
 create mode 100644 docs/854481fc.873ddd4f.js
 delete mode 100644 docs/854481fc.ce513a9b.js
 create mode 100644 docs/879fc8a6.e5d1f893.js
 delete mode 100644 docs/879fc8a6.fbf02d84.js
 create mode 100644 docs/883d6399.a175ce7a.js
 delete mode 100644 docs/883d6399.c42cc20c.js
 create mode 100644 docs/887b127f.5b9fbd78.js
 delete mode 100644 docs/887b127f.abe5016d.js
 create mode 100644 docs/88c2f924.37061093.js
 delete mode 100644 docs/88c2f924.d842741f.js
 create mode 100644 docs/8954e356.31b01aa7.js
 delete mode 100644 docs/8954e356.7546d395.js
 create mode 100644 docs/8c12d624.0b6c818a.js
 delete mode 100644 docs/8c12d624.8cb421f3.js
 delete mode 100644 docs/8c8ea2c1.31f4a055.js
 create mode 100644 docs/8c8ea2c1.6ffd1b1a.js
 create mode 100644 docs/8caadd29.8215dca6.js
 delete mode 100644 docs/8e9f0a8a.ea616d71.js
 rename docs/{8eaf94d7.6b1f4315.js => 8eaf94d7.f12b9f2f.js} (93%)
 delete mode 100644 docs/8f030830.3fafca9c.js
 create mode 100644 docs/8f030830.b746ca66.js
 create mode 100644 docs/9152460a.42fa5a7f.js
 delete mode 100644 docs/9152460a.b856da25.js
 delete mode 100644 docs/917fcb62.35b584b9.js
 create mode 100644 docs/917fcb62.5fdef126.js
 delete mode 100644 docs/935f2afb.aeb7338a.js
 create mode 100644 docs/935f2afb.d4745991.js
 rename docs/{9363aca1.0a0bc3a7.js => 9363aca1.ce054208.js} (92%)
 delete mode 100644 docs/93896215.5af00467.js
 rename docs/{941b9d10.547b026b.js => 941b9d10.391830c3.js} (92%)
 create mode 100644 docs/948118d6.1ba3a36f.js
 delete mode 100644 docs/948118d6.5b3a0dc9.js
 delete mode 100644 docs/950656ac.0aadf206.js
 create mode 100644 docs/950656ac.0ccaa8ab.js
 rename docs/{9747bb1a.8454f12b.js => 9747bb1a.5bab2aa6.js} (97%)
 rename docs/{97d9aba4.2453d1b1.js => 97d9aba4.04f448bb.js} (92%)
 rename docs/{97e78655.63616476.js => 97e78655.60b6caf9.js} (92%)
 create mode 100644 docs/996e93c8.836b1f20.js
 delete mode 100644 docs/996e93c8.ded0a529.js
 rename docs/{997fea1d.fe5a6ff2.js => 997fea1d.d3b55233.js} (91%)
 rename docs/{9a52a2f7.1912ba90.js => 9a52a2f7.25d15099.js} (92%)
 delete mode 100644 docs/9ed00105.277f7035.js
 create mode 100644 docs/9ed00105.ca11321b.js
 create mode 100644 docs/a3713279.d69af334.js
 rename docs/{a50fe136.400473bd.js => a50fe136.b26e4f55.js} (95%)
 rename docs/{a54511d2.a23ffe9e.js => a54511d2.0cfeb42e.js} (96%)
 delete mode 100644 docs/a64331b1.77fcee94.js
 create mode 100644 docs/a64331b1.a104ef64.js
 rename docs/{a6aa9e1f.0e25f4a4.js => a6aa9e1f.29345e50.js} (85%)
 rename docs/{a814b970.194c0040.js => a814b970.9c5f6aec.js} (92%)
 rename docs/{a8b2a833.17d49b14.js => a8b2a833.806669fa.js} (97%)
 rename docs/{a8bb5334.c4ff7379.js => a8bb5334.b90d4b57.js} (96%)
 rename docs/{a8dc7269.26196dce.js => a8dc7269.14bf2db2.js} (92%)
 rename docs/{a9331674.e034ee0a.js => a9331674.965a7491.js} (97%)
 rename docs/{aa7f648d.9fcf7f62.js => aa7f648d.e4f6c194.js} (92%)
 delete mode 100644 docs/aa9ca283.5215397c.js
 create mode 100644 docs/aa9ca283.79c8caef.js
 rename docs/{ac27f894.267ecdf7.js => ac27f894.25e9c805.js} (90%)
 delete mode 100644 docs/af172acd.e4c7f550.js
 create mode 100644 docs/assets/images/tour-968f92ad1236ec66ad30ed613ba324db.png
 create mode 100644 docs/assets/medias/livereload-c8ab0ea721f98fca13da5bc0b1ab26e1.mp4
 delete mode 100644 docs/b140a32d.d088877e.js
 create mode 100644 docs/b140a32d.fc920547.js
 rename docs/{b18fb770.4af7a823.js => b18fb770.7856e763.js} (95%)
 rename docs/{b1e50d5a.08a7c151.js => b1e50d5a.81243680.js} (97%)
 rename docs/{b22f7242.2a60e38a.js => b22f7242.be8d2b44.js} (98%)
 create mode 100644 docs/b4d5475e.dd3985c3.js
 rename docs/{b81c5e46.c8f1b9ee.js => b81c5e46.e3f1d216.js} (92%)
 rename docs/{b8435c12.1840dde3.js => b8435c12.a4ac6d35.js} (92%)
 rename docs/{b999a6e4.aa78f2b5.js => b999a6e4.b163bfee.js} (59%)
 rename docs/{b9e4d6e6.d5c12a3f.js => b9e4d6e6.94216ee5.js} (98%)
 create mode 100644 docs/b9f028e1.76e1b947.js
 delete mode 100644 docs/b9f028e1.d50f1261.js
 rename docs/{ba1aeef8.33b2d023.js => ba1aeef8.421c8e2f.js} (92%)
 rename docs/{bb5446ac.f742416a.js => bb5446ac.b79cbe54.js} (92%)
 create mode 100644 docs/bbdd3825.5e58d881.js
 delete mode 100644 docs/bbdd3825.8257b386.js
 rename docs/{bd0b0bbe.8f6f01cf.js => bd0b0bbe.d16ca985.js} (92%)
 delete mode 100644 docs/bd7ed1d7.0af32e81.js
 create mode 100644 docs/bd7ed1d7.9faa1af2.js
 rename docs/{bdc330a7.d1eb828e.js => bdc330a7.2904007d.js} (96%)
 delete mode 100644 docs/bdd709f1.bdb6a562.js
 delete mode 100644 docs/bf614533.8a69ecda.js
 create mode 100644 docs/bf614533.e9f653e2.js
 delete mode 100644 docs/blog/hello-world/index.html
 delete mode 100644 docs/blog/hola/index.html
 create mode 100644 docs/blog/release-0.9.0/index.html
 delete mode 100644 docs/blog/tags/docusaurus/index.html
 delete mode 100644 docs/blog/tags/facebook/index.html
 delete mode 100644 docs/blog/tags/hello/index.html
 delete mode 100644 docs/blog/tags/hola/index.html
 create mode 100644 docs/blog/tags/release/index.html
 delete mode 100644 docs/blog/welcome/index.html
 rename docs/{c07c3c71.c8e15b94.js => c07c3c71.61abccad.js} (96%)
 rename docs/{c0ac41fc.8be5a1e6.js => c0ac41fc.43ca1f95.js} (92%)
 delete mode 100644 docs/c0b6bb44.07febaba.js
 create mode 100644 docs/c0b6bb44.58e31668.js
 create mode 100644 docs/c10c720e.0173a8d3.js
 delete mode 100644 docs/c10c720e.4da34ab2.js
 rename docs/{c1570962.19157d64.js => c1570962.e4a00ed0.js} (97%)
 rename docs/{c1cf1fe4.44f01cc0.js => c1cf1fe4.af8593f1.js} (92%)
 rename docs/{c4f5d8e4.8905731d.js => c4f5d8e4.4fc6a1ee.js} (95%)
 rename docs/{c641a4e8.56e47608.js => c641a4e8.437ff80d.js} (96%)
 rename docs/{c7b62599.724ac45e.js => c7b62599.b49ba390.js} (93%)
 rename docs/{c87c151a.061d9ab0.js => c87c151a.4b34076d.js} (92%)
 rename docs/{c9e5c590.14dfa3de.js => c9e5c590.a5a4891c.js} (92%)
 rename docs/{ca1ac85d.ee5b488b.js => ca1ac85d.45e0ea7b.js} (97%)
 delete mode 100644 docs/ca622d62.58f63235.js
 create mode 100644 docs/ca622d62.8941bf61.js
 create mode 100644 docs/ca84abdc.cb7c606e.js
 rename docs/{cc0ea0cf.dbdc3880.js => cc0ea0cf.39c2181e.js} (92%)
 rename docs/{ccc49370.5545763d.js => ccc49370.847efd16.js} (90%)
 rename docs/{cd329814.7a492562.js => cd329814.ee103b68.js} (92%)
 create mode 100644 docs/ce88eaaa.795d7cfb.js
 delete mode 100644 docs/ce88eaaa.defa501e.js
 rename docs/{d05981be.9ed423a2.js => d05981be.375a90cf.js} (92%)
 delete mode 100644 docs/d145135f.219899e0.js
 create mode 100644 docs/d145135f.9c24e637.js
 create mode 100644 docs/d3f54ca5.47bd0228.js
 delete mode 100644 docs/d3f54ca5.e6a485f6.js
 rename docs/{d4ee2b4f.25e52c39.js => d4ee2b4f.e3cdbd48.js} (92%)
 delete mode 100644 docs/d589d3a7.36aebee9.js
 create mode 100644 docs/d589d3a7.7779cab6.js
 delete mode 100644 docs/d610846f.db356212.js
 delete mode 100644 docs/d8689276.205def1e.js
 create mode 100644 docs/d8689276.c08cd42b.js
 delete mode 100644 docs/d8aa093c.262becc1.js
 create mode 100644 docs/d8aa093c.abea6469.js
 rename docs/{db32d859.e1958d34.js => db32d859.4bcf621d.js} (58%)
 rename docs/{dc705eb8.7f4a21ae.js => dc705eb8.0944bfc8.js} (97%)
 delete mode 100644 docs/dceb90d2.36c09c0f.js
 create mode 100644 docs/dceb90d2.f2ed4112.js
 rename docs/{de02e8e6.4e7b68e0.js => de02e8e6.9c87a59f.js} (92%)
 create mode 100644 docs/docs/api/cli/index.html
 create mode 100644 docs/docs/background/index.html
 create mode 100644 docs/docs/cli/index.html
 create mode 100644 docs/docs/deployment/index.html
 create mode 100644 docs/docs/examples/background-executor/index.html
 create mode 100644 docs/docs/examples/background/index.html
 create mode 100644 docs/docs/examples/meta-icon/index.html
 create mode 100644 docs/docs/examples/site-async/index.html
 create mode 100644 docs/docs/migrating-0-8/index.html
 rename docs/{e013439f.143ae2bf.js => e013439f.9b377459.js} (93%)
 rename docs/{e32c5859.399095c5.js => e32c5859.afb5fae3.js} (92%)
 rename docs/{e4e8fb51.9c820d69.js => e4e8fb51.f6621ec9.js} (96%)
 create mode 100644 docs/e7ad456d.8574afa5.js
 create mode 100644 docs/e7ba74f4.0bd15322.js
 delete mode 100644 docs/e7ba74f4.7c2bb260.js
 delete mode 100644 docs/e7c32899.69aa09e3.js
 create mode 100644 docs/e7c32899.ee888209.js
 rename docs/{e833177e.5dba918c.js => e833177e.6f3c86db.js} (96%)
 rename docs/{e8c1c6e8.de38f0bd.js => e8c1c6e8.5a21f0e6.js} (98%)
 rename docs/{e96704c5.29ba907a.js => e96704c5.57ed2674.js} (92%)
 rename docs/{eb2bb38c.c8e1e264.js => eb2bb38c.3448601c.js} (97%)
 rename docs/{ecdac497.8252c18f.js => ecdac497.e79d40df.js} (97%)
 rename docs/{ed3db3ec.f478a091.js => ed3db3ec.c5ffd957.js} (93%)
 delete mode 100644 docs/eec6e613.03039ef9.js
 create mode 100644 docs/eec6e613.2511e3b9.js
 delete mode 100644 docs/f09ebdf1.d4463329.js
 create mode 100644 docs/f09ebdf1.fafc5207.js
 delete mode 100644 docs/f132454a.72aa0b8b.js
 create mode 100644 docs/f132454a.996a8617.js
 rename docs/{f151ab1a.f861a152.js => f151ab1a.efb732bc.js} (57%)
 rename docs/{f1ec6cfa.8ae38ae3.js => f1ec6cfa.90acea76.js} (93%)
 rename docs/{f21433ff.717b57f0.js => f21433ff.738455b0.js} (92%)
 rename docs/{f21d2ab0.fe741d4d.js => f21d2ab0.549d1c33.js} (96%)
 rename docs/{f3473c5b.a1665bdc.js => f3473c5b.ff1378dc.js} (97%)
 delete mode 100644 docs/f349fb86.2a5c5652.js
 create mode 100644 docs/f349fb86.689afca8.js
 delete mode 100644 docs/f60be60c.9007beb7.js
 create mode 100644 docs/f60be60c.c40d6c3e.js
 rename docs/{f7ea47c5.d992c5ba.js => f7ea47c5.f9a0edd9.js} (97%)
 delete mode 100644 docs/f811e444.64e4a563.js
 create mode 100644 docs/f811e444.acf97bbf.js
 rename docs/{f846e950.01b9cc09.js => f846e950.e91bfc98.js} (92%)
 delete mode 100644 docs/faf81df8.bd73165b.js
 create mode 100644 docs/faf81df8.e782e9d4.js
 rename docs/{fbe93038.c011a924.js => fbe93038.988a69e9.js} (93%)
 create mode 100644 docs/fcfc3752.1ceac70b.js
 delete mode 100644 docs/fcfc3752.e536a904.js
 delete mode 100644 docs/fd056868.42217e60.js
 create mode 100644 docs/fd056868.c9138dea.js
 create mode 100644 docs/fe4d4432.25e593e1.js
 delete mode 100644 docs/fe4d4432.bb7ccc47.js
 create mode 100644 docs/main.0720c80c.js
 rename docs/{main.64610da1.js.LICENSE.txt => main.0720c80c.js.LICENSE.txt} (100%)
 delete mode 100644 docs/main.64610da1.js
 delete mode 100644 docs/runtime~main.7ebe698c.js
 create mode 100644 docs/runtime~main.b200dec9.js
 rename docs/{styles.f5ed2e52.js => styles.f2d89f88.js} (85%)

diff --git a/docs/01a85c17.5007ae08.js b/docs/01a85c17.0bb633f0.js
similarity index 86%
rename from docs/01a85c17.5007ae08.js
rename to docs/01a85c17.0bb633f0.js
index 5b926d8f4b..67d0de7f1c 100644
--- a/docs/01a85c17.5007ae08.js
+++ b/docs/01a85c17.0bb633f0.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(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
+(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(297),r=t(295);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/08f25880.4ddb9f20.js b/docs/08f25880.4ddb9f20.js
new file mode 100644
index 0000000000..bf4e733ee9
--- /dev/null
+++ b/docs/08f25880.4ddb9f20.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{292:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return m}));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 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 i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=r.a.createContext({}),b=function(e){var t=r.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},s=function(e){var t=b(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)}},d=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),s=b(n),d=a,m=s["".concat(c,".").concat(d)]||s[d]||u[d]||o;return n?r.a.createElement(m,i(i({ref:t},p),{},{components:n})):r.a.createElement(m,i({ref:t},p))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){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:a,c[1]=i;for(var p=2;p<o;p++)c[p]=n[p];return r.a.createElement.apply(null,c)}return r.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},499:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/medias/livereload-c8ab0ea721f98fca13da5bc0b1ab26e1.mp4"},500:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/tour-968f92ad1236ec66ad30ed613ba324db.png"},57:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return b}));var a=n(2),r=n(6),o=(n(0),n(292)),c={slug:"release-0.9.0",title:"Introducing Live Reload",author:"Prithvi Prabhu",author_title:"Chief of Technology @ H2O.ai",author_url:"https://github.com/lo5",author_image_url:"https://avatars3.githubusercontent.com/u/6334572",tags:["release"]},i={permalink:"/wave/blog/release-0.9.0",editUrl:"https://github.com/facebook/docusaurus/edit/master/website/blog/blog/2020-10-28-release.md",source:"@site/blog/2020-10-28-release.md",description:"Today, we're excited to announce H2O Wave v0.9.0, with a new wave CLI, live-reload, improved performance, background tasks and ASGI compatibility.",date:"2020-10-28T00:00:00.000Z",tags:[{label:"release",permalink:"/wave/blog/tags/release"}],title:"Introducing Live Reload",readingTime:3.14,truncated:!0},l=[{value:"No more listening",id:"no-more-listening",children:[{value:"Old way",id:"old-way",children:[]},{value:"New way",id:"new-way",children:[]}]},{value:"Live reload",id:"live-reload",children:[]},{value:"Improved performance",id:"improved-performance",children:[]},{value:"Background tasks",id:"background-tasks",children:[]},{value:"ASGI compatibility",id:"asgi-compatibility",children:[]},{value:"Download",id:"download",children:[]}],p={rightToc:l};function b(e){var t=e.components,c=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},p,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Today, we're excited to announce H2O Wave v0.9.0, with a new ",Object(o.b)("inlineCode",{parentName:"p"},"wave")," CLI, live-reload, improved performance, background tasks and ASGI compatibility. "),Object(o.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(o.b)("source",{src:n(499).default,type:"video/mp4"})),Object(o.b)("br",null),Object(o.b)("br",null),Object(o.b)("p",null,"Among other changes, the Wave server executable ",Object(o.b)("inlineCode",{parentName:"p"},"wave")," is now called ",Object(o.b)("inlineCode",{parentName:"p"},"waved")," (as in ",Object(o.b)("inlineCode",{parentName:"p"},"wave")," daemon), and the ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://pypi.org/project/h2o-wave/"}),"h2o-wave")," Python package ships with a new CLI named ",Object(o.b)("inlineCode",{parentName:"p"},"wave"),"."),Object(o.b)("h2",{id:"no-more-listening"},"No more listening"),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"listen()")," has been deprecated in favor of ",Object(o.b)("inlineCode",{parentName:"p"},"@app"),". Wave apps are now one line shorter."),Object(o.b)("h3",{id:"old-way"},"Old way"),Object(o.b)("p",null,"In versions <= v0.8.0, a skeleton app looked like this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-python",metastring:'title="foo.py"',title:'"foo.py"'}),"from h2o_wave import listen, Q\n\nasync def serve(q: Q):\n    pass\n\nlisten('/demo', serve)\n")),Object(o.b)("p",null,"The above app could be run like this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"(venv) $ python foo.py\n")),Object(o.b)("h3",{id:"new-way"},"New way"),Object(o.b)("p",null,"In versions v0.9.0+, a skeleton app looks like this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-python",metastring:'{1,3} title="foo.py"',"{1,3}":!0,title:'"foo.py"'}),"from h2o_wave import main, app, Q\n\n@app('/demo')\nasync def serve(q: Q):\n    pass\n")),Object(o.b)("p",null,"Notably:"),Object(o.b)("ol",null,Object(o.b)("li",{parentName:"ol"},Object(o.b)("inlineCode",{parentName:"li"},"listen(route)")," has been replaced by an ",Object(o.b)("inlineCode",{parentName:"li"},"@app(route)")," decorator on the ",Object(o.b)("inlineCode",{parentName:"li"},"serve()")," function."),Object(o.b)("li",{parentName:"ol"},Object(o.b)("inlineCode",{parentName:"li"},"main")," needs to be imported into the file (but you don't have to do anything with the symbol ",Object(o.b)("inlineCode",{parentName:"li"},"main")," other than simply ",Object(o.b)("inlineCode",{parentName:"li"},"import")," it).")),Object(o.b)("p",null,"The above app can be run using ",Object(o.b)("inlineCode",{parentName:"p"},"wave run"),", built into the new ",Object(o.b)("inlineCode",{parentName:"p"},"wave")," command line interface. "),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"(venv) $ wave run foo\n")),Object(o.b)("h2",{id:"live-reload"},"Live reload"),Object(o.b)("p",null,"The ",Object(o.b)("inlineCode",{parentName:"p"},"wave run")," command runs your app using live-reload, which means you can view your changes live as you code, without having to refresh your browser manually."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"(venv) $ wave run foo\n")),Object(o.b)("p",null,"To run your app without live-reload, simply pass ",Object(o.b)("inlineCode",{parentName:"p"},"--no-reload"),":"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"(venv) $ wave run --no-reload foo\n")),Object(o.b)("h2",{id:"improved-performance"},"Improved performance"),Object(o.b)("p",null,"Both the Wave server and application communication architecture has undergone significant performance and concurrency improvements across the board. Apps should now feel lighter, quicker, and more responsive under concurrent or increased load."),Object(o.b)("p",null,"The changes in v0.9 brings us closer to a v1.0 release. v1.0 will include the ability to increase the number of worker processes to scale apps, while preserving the simplicity of the Wave API."),Object(o.b)("p",null,"The Wave Tour (",Object(o.b)("inlineCode",{parentName:"p"},"tour.py"),") is now quicker and more reliable:"),Object(o.b)("p",null,Object(o.b)("img",{alt:"tour",src:n(500).default})),Object(o.b)("h2",{id:"background-tasks"},"Background tasks"),Object(o.b)("p",null,"The API now provides the ability to run blocking calls in the background to improve app responsiveness. The query context ",Object(o.b)("inlineCode",{parentName:"p"},"q")," now has  two lightweight wrappers over ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://docs.python.org/3/library/asyncio-eventloop.html#asyncio.loop.run_in_executor"}),"asyncio.run_in_executor()"),": ",Object(o.b)("inlineCode",{parentName:"p"},"q.run()")," and ",Object(o.b)("inlineCode",{parentName:"p"},"q.exec()")),Object(o.b)("p",null,"Here is an example of a function that blocks:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-python",metastring:"{1,4}","{1,4}":!0}),"import time\n\ndef blocking_function(seconds) -> str:\n    time.sleep(seconds)  # Blocks!\n    return f'Done!'\n")),Object(o.b)("p",null,"To call the above function from an app, don't do this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-python",metastring:"{4}","{4}":!0}),"@app('/demo')\nasync def serve(q: Q):\n    # ...\n    message = blocking_function(42)\n    # ...\n")),Object(o.b)("p",null,"Instead, do this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-python",metastring:"{4}","{4}":!0}),"@app('/demo')\nasync def serve(q: Q):\n    # ...\n    message = await q.run(blocking_function, 42)\n    # ...\n")),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"q.run()")," runs the blocking function in the background, in-process."),Object(o.b)("p",null,"Depending on your use case, you might want to use a separate process pool or thread pool from Python's ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://docs.python.org/3/library/multiprocessing.html"}),"multiprocessing")," library, like this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-python",metastring:"{1,6-7}","{1,6-7}":!0}),"import concurrent.futures\n\n@app('/demo')\nasync def serve(q: Q):\n    # ...\n    with concurrent.futures.ThreadPoolExecutor() as pool:\n        message = await q.exec(pool, blocking_function, 42)\n    # ...\n")),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"q.exec()")," accepts a custom process pool or thread pool to run the blocking function."),Object(o.b)("h2",{id:"asgi-compatibility"},"ASGI compatibility"),Object(o.b)("p",null,"Wave apps are now ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://asgi.readthedocs.io/en/latest/"}),"ASGI"),"-compatible, based on ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.uvicorn.org"}),"Uvicorn")," / ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.starlette.io/"}),"Starlette"),", a ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.techempower.com/benchmarks/#section=data-r17&hw=ph&test=fortune&l=zijzen-1"}),"high-performance")," Python server."),Object(o.b)("p",null,"You can run Wave apps behind any ASGI server, like ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.uvicorn.org"}),"uvicorn"),", ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://gunicorn.org/"}),"gunicorn"),", ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://github.com/django/daphne/"}),"daphne"),", ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://pgjones.gitlab.io/hypercorn/"}),"hypercorn"),", etc."),Object(o.b)("p",null,"To run your app using an ASGI server like uvicorn, append ",Object(o.b)("inlineCode",{parentName:"p"},":main")," to the ",Object(o.b)("inlineCode",{parentName:"p"},"app")," argument:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"(venv) $ uvicorn foo:main\n")),Object(o.b)("h2",{id:"download"},"Download"),Object(o.b)("p",null,"Get the release ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/latest"}),"here"),". Check out the release notes for more details."),Object(o.b)("p",null,"We look forward to continuing our collaboration with the community and hearing your feedback as we further improve and expand the H2O Wave platform."),Object(o.b)("p",null,"We\u2019d like to thank the entire Wave team and the community for all of the contributions to this work!"))}b.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/0923c366.d31cd624.js b/docs/0923c366.97f55dcc.js
similarity index 84%
rename from docs/0923c366.d31cd624.js
rename to docs/0923c366.97f55dcc.js
index aca68dd588..15833968da 100644
--- a/docs/0923c366.d31cd624.js
+++ b/docs/0923c366.97f55dcc.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{290: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<arguments.length;o++){var t=null!=arguments[o]?arguments[o]:{};o%2?i(Object(t),!0).forEach((function(o){r(e,o,t[o])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(t,o))}))}return e}function c(e,o){if(null==e)return{};var t,n,a=function(e,o){if(null==e)return{};var t,n,a={},r=Object.keys(e);for(n=0;n<r.length;n++)t=r[n],o.indexOf(t)>=0||(a[t]=e[t]);return a}(e,o);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n<r.length;n++)t=r[n],o.indexOf(t)>=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<r;p++)i[p]=t[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},301:function(e,o,t){"use strict";t.r(o),o.default="data:image/png;base64,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"},57:function(e,o,t){"use strict";t.r(o),t.d(o,"frontMatter",(function(){return i})),t.d(o,"metadata",(function(){return s})),t.d(o,"rightToc",(function(){return c})),t.d(o,"default",(function(){return u}));var n=t(2),a=t(6),r=(t(0),t(290)),i={title:"Uploads"},s={unversionedId:"examples/upload",id:"examples/upload",isDocsHomePage:!1,title:"Uploads",description:"Upload files to the Q server.",source:"@site/docs/examples/upload.md",slug:"/examples/upload",permalink:"/wave/docs/examples/upload",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/upload.md",version:"current",sidebar:"someSidebar",previous:{title:"Pixel Art",permalink:"/wave/docs/examples/pixel-art"},next:{title:"Uploads / Async",permalink:"/wave/docs/examples/upload-async"}},c=[],p={rightToc:c};function u(e){var o=e.components,i=Object(a.a)(e,["components"]);return Object(r.b)("wrapper",Object(n.a)({},p,i,{components:o,mdxType:"MDXLayout"}),Object(r.b)("p",null,"Upload files to the Q server."),Object(r.b)("div",{className:"cover",style:{backgroundImage:"url("+t(301).default+")"}}),Object(r.b)("pre",null,Object(r.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"import os\nfrom h2o_wave import site, ui\n\n\ndef write_csv(filename, rows):\n    with open(filename, 'w') as f:\n        f.write('\\n'.join([','.join([str(x) for x in row]) for row in rows]))\n\n\n# Create a couple of fake CSV files\nwrite_csv('squares.csv', [[x, x * x] for x in range(1, 11)])\nwrite_csv('cubes.csv', [[x, x * x * x] for x in range(1, 11)])\n\n# Upload CSVs\nsquares_path, cubes_path = site.upload(['squares.csv', 'cubes.csv'])\n\n# Delete local CSVs\nos.remove('squares.csv')\nos.remove('cubes.csv')\n\n# Display links to these CSVs\npage = site['/demo']\npage['example'] = ui.markdown_card(\n    box='1 1 2 2',\n    title='Download CSVs',\n    content=f'[Squares]({squares_path}) [Cubes]({cubes_path})',\n)\npage.save()\n")))}u.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{292: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<arguments.length;o++){var t=null!=arguments[o]?arguments[o]:{};o%2?i(Object(t),!0).forEach((function(o){r(e,o,t[o])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(t,o))}))}return e}function c(e,o){if(null==e)return{};var t,n,a=function(e,o){if(null==e)return{};var t,n,a={},r=Object.keys(e);for(n=0;n<r.length;n++)t=r[n],o.indexOf(t)>=0||(a[t]=e[t]);return a}(e,o);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n<r.length;n++)t=r[n],o.indexOf(t)>=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<r;p++)i[p]=t[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},303:function(e,o,t){"use strict";t.r(o),o.default="data:image/png;base64,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"},58:function(e,o,t){"use strict";t.r(o),t.d(o,"frontMatter",(function(){return i})),t.d(o,"metadata",(function(){return s})),t.d(o,"rightToc",(function(){return c})),t.d(o,"default",(function(){return u}));var n=t(2),a=t(6),r=(t(0),t(292)),i={title:"Uploads"},s={unversionedId:"examples/upload",id:"examples/upload",isDocsHomePage:!1,title:"Uploads",description:"Upload files to the Wave server.",source:"@site/docs/examples/upload.md",slug:"/examples/upload",permalink:"/wave/docs/examples/upload",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/upload.md",version:"current",sidebar:"someSidebar",previous:{title:"Pixel Art",permalink:"/wave/docs/examples/pixel-art"},next:{title:"Uploads / Async",permalink:"/wave/docs/examples/upload-async"}},c=[],p={rightToc:c};function u(e){var o=e.components,i=Object(a.a)(e,["components"]);return Object(r.b)("wrapper",Object(n.a)({},p,i,{components:o,mdxType:"MDXLayout"}),Object(r.b)("p",null,"Upload files to the Wave server."),Object(r.b)("div",{className:"cover",style:{backgroundImage:"url("+t(303).default+")"}}),Object(r.b)("pre",null,Object(r.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"import os\nfrom h2o_wave import site, ui\n\n\ndef write_csv(filename, rows):\n    with open(filename, 'w') as f:\n        f.write('\\n'.join([','.join([str(x) for x in row]) for row in rows]))\n\n\n# Create a couple of fake CSV files\nwrite_csv('squares.csv', [[x, x * x] for x in range(1, 11)])\nwrite_csv('cubes.csv', [[x, x * x * x] for x in range(1, 11)])\n\n# Upload CSVs\nsquares_path, cubes_path = site.upload(['squares.csv', 'cubes.csv'])\n\n# Delete local CSVs\nos.remove('squares.csv')\nos.remove('cubes.csv')\n\n# Display links to these CSVs\npage = site['/demo']\npage['example'] = ui.markdown_card(\n    box='1 1 2 2',\n    title='Download CSVs',\n    content=f'[Squares]({squares_path}) [Cubes]({cubes_path})',\n)\npage.save()\n")))}u.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/0965cdf6.1b601d55.js b/docs/0965cdf6.047d8432.js
similarity index 97%
rename from docs/0965cdf6.1b601d55.js
rename to docs/0965cdf6.047d8432.js
index 858c59f551..254795453a 100644
--- a/docs/0965cdf6.1b601d55.js
+++ b/docs/0965cdf6.047d8432.js
@@ -1 +1 @@
-(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<arguments.length;e++){var a=null!=arguments[e]?arguments[e]:{};e%2?c(Object(a),!0).forEach((function(e){i(n,e,a[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(a)):c(Object(a)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(a,e))}))}return n}function l(n,e){if(null==n)return{};var a,t,r=function(n,e){if(null==n)return{};var a,t,r={},i=Object.keys(n);for(t=0;t<i.length;t++)a=i[t],e.indexOf(a)>=0||(r[a]=n[a]);return r}(n,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(t=0;t<i.length;t++)a=i[t],e.indexOf(a)>=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<i;p++)c[p]=a[p];return r.a.createElement.apply(null,c)}return r.a.createElement.apply(null,a)}f.displayName="MDXCreateElement"},302:function(n,e,a){"use strict";a.r(e),e.default=a.p+"assets/images/dashboard-24aea705724fd29993c5508a401b3b3c.png"},58:function(n,e,a){"use strict";a.r(e),a.d(e,"frontMatter",(function(){return c})),a.d(e,"metadata",(function(){return o})),a.d(e,"rightToc",(function(){return l})),a.d(e,"default",(function(){return u}));var t=a(2),r=a(6),i=(a(0),a(290)),c={title:"Dashboard"},o={unversionedId:"examples/dashboard",id:"examples/dashboard",isDocsHomePage:!1,title:"Dashboard",description:"Make a dashboard using a multitude of cards and update them live.",source:"@site/docs/examples/dashboard.md",slug:"/examples/dashboard",permalink:"/wave/docs/examples/dashboard",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/dashboard.md",version:"current",sidebar:"someSidebar",previous:{title:"Issue Tracker",permalink:"/wave/docs/examples/issue-tracker"},next:{title:"Stat / Small",permalink:"/wave/docs/examples/stat-small"}},l=[],p={rightToc:l};function u(n){var e=n.components,c=Object(r.a)(n,["components"]);return Object(i.b)("wrapper",Object(t.a)({},p,c,{components:e,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Make a dashboard using a multitude of cards and update them live."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+a(302).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from faker import Faker\nimport time\nfrom h2o_wave import site, data, ui\nfrom synth import FakePercent, FakeCategoricalSeries\n\nfake = Faker()\n\nlight_theme_colors = '$red $pink $purple $violet $indigo $blue $azure $cyan $teal $mint $green $amber $orange $tangerine'.split()\ndark_theme_colors = '$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine'.split()\n\n_color_index = -1\ncolors = dark_theme_colors\n\n\ndef next_color():\n    global _color_index\n    _color_index += 1\n    return colors[_color_index % len(colors)]\n\n\n_curve_index = -1\ncurves = 'linear smooth step stepAfter stepBefore'.split()\n\n\ndef next_curve():\n    global _curve_index\n    _curve_index += 1\n    return curves[_curve_index % len(curves)]\n\n\ndef create_dashboard(update_freq=0.0):\n    page = site['/demo']\n\n    simples = []\n    for i in range(1, 7):\n        f = FakePercent()\n        val, pc = f.next()\n        c = page.add(f'a{i}', ui.small_stat_card(\n            box=f'{i} 1 1 1',\n            title=fake.cryptocurrency_name(),\n            value=f'${val:.2f}',\n        ))\n        simples.append((f, c))\n\n    simples_colored = []\n    for i in range(1, 7):\n        f = FakeCategoricalSeries()\n        cat, val, pc = f.next()\n        c = page.add(f'aa{i}', ui.small_series_stat_card(\n            box=f'{6 + i} 1 1 1',\n            title=fake.cryptocurrency_code(),\n            value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            data=dict(qux=val, quux=pc / 100),\n            plot_category='foo',\n            plot_value='qux',\n            plot_color=next_color(),\n            plot_data=data('foo qux', -15),\n            plot_zero_value=0,\n            plot_curve=next_curve(),\n        ))\n        simples_colored.append((f, c))\n\n    lines = []\n    for i in range(1, 13, 2):\n        f = FakeCategoricalSeries()\n        cat, val, pc = f.next()\n        c = page.add(f'b{i}', ui.wide_series_stat_card(\n            box=f'{i} 2 2 1',\n            title=fake.cryptocurrency_name(),\n            value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            aux_value='={{intl quux style=\"percent\" minimum_fraction_digits=1 maximum_fraction_digits=1}}',\n            data=dict(qux=val, quux=pc / 100),\n            plot_category='foo',\n            plot_value='qux',\n            plot_color=next_color(),\n            plot_data=data('foo qux', -15),\n            plot_zero_value=0,\n            plot_curve=next_curve(),\n        ))\n        lines.append((f, c))\n\n    bars = []\n    for i in range(1, 13, 2):\n        f = FakeCategoricalSeries()\n        cat, val, pc = f.next()\n        c = page.add(f'c{i}', ui.wide_series_stat_card(\n            box=f'{i} 3 2 1',\n            title=fake.cryptocurrency_name(),\n            value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            aux_value='={{intl quux style=\"percent\" minimum_fraction_digits=1 maximum_fraction_digits=1}}',\n            data=dict(qux=val, quux=pc),\n            plot_type='interval',\n            plot_category='foo',\n            plot_value='qux',\n            plot_color=next_color(),\n            plot_data=data('foo qux', -25),\n            plot_zero_value=0\n        ))\n        bars.append((f, c))\n\n    large_pcs = []\n    for i in range(1, 13):\n        f = FakePercent()\n        val, pc = f.next()\n        c = page.add(f'd{i}', ui.tall_gauge_stat_card(\n            box=f'{i} 4 1 2',\n            title=fake.cryptocurrency_name(),\n            value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            aux_value='={{intl bar style=\"percent\" minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            plot_color=next_color(),\n            progress=pc,\n            data=dict(foo=val, bar=pc / 100),\n        ))\n        large_pcs.append((f, c))\n\n    large_lines = []\n    for i in range(1, 13):\n        f = FakeCategoricalSeries()\n        cat, val, pc = f.next()\n        c = page.add(f'e{i}', ui.tall_series_stat_card(\n            box=f'{i} 6 1 2',\n            title=fake.cryptocurrency_name(),\n            value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            aux_value='={{intl quux style=\"percent\" minimum_fraction_digits=1 maximum_fraction_digits=1}}',\n            data=dict(qux=val, quux=pc),\n            plot_type='area',\n            plot_category='foo',\n            plot_value='qux',\n            plot_color=next_color(),\n            plot_data=data('foo qux', -15),\n            plot_zero_value=0,\n            plot_curve=next_curve(),\n        ))\n        large_lines.append((f, c))\n\n    small_pcs = []\n    for i in range(1, 7, 2):\n        f = FakePercent()\n        val, pc = f.next()\n        c = page.add(f'f{i}', ui.wide_gauge_stat_card(\n            box=f'{i} 8 2 1',\n            title=fake.cryptocurrency_name(),\n            value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            aux_value='={{intl bar style=\"percent\" minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            plot_color=next_color(),\n            progress=pc,\n            data=dict(foo=val, bar=pc / 100),\n        ))\n        small_pcs.append((f, c))\n\n    small_pbs = []\n    for i in range(7, 13, 2):\n        f = FakePercent()\n        val, pc = f.next()\n        c = page.add(f'f{i}', ui.wide_bar_stat_card(\n            box=f'{i} 8 2 1',\n            title=fake.cryptocurrency_name(),\n            value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            aux_value='={{intl bar style=\"percent\" minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            plot_color=next_color(),\n            progress=pc,\n            data=dict(foo=val, bar=pc / 100),\n        ))\n        small_pbs.append((f, c))\n\n    large_cards = []\n    for i in range(1, 7, 2):\n        f = FakePercent()\n        val, pc = f.next()\n        c = page.add(f'g{i}', ui.large_stat_card(\n            box=f'{i} 9 2 2',\n            title=fake.cryptocurrency_name(),\n            value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            aux_value='={{intl quux style=\"percent\" minimum_fraction_digits=1 maximum_fraction_digits=1}}',\n            data=dict(qux=val, quux=pc / 100),\n            caption=' '.join(fake.sentences()),\n        ))\n        large_cards.append((f, c))\n\n    large_pbs = []\n    for i in range(7, 13, 2):\n        f = FakePercent()\n        val, pc = f.next()\n        c = page.add(f'g{i}', ui.large_bar_stat_card(\n            box=f'{i} 9 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=next_color(),\n            progress=pc,\n            data=dict(foo=val, bar=pc / 100),\n            caption=' '.join(fake.sentences(2)),\n        ))\n        large_pbs.append((f, c))\n\n    page.save()\n\n    while update_freq > 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([[7],{292: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<arguments.length;e++){var a=null!=arguments[e]?arguments[e]:{};e%2?c(Object(a),!0).forEach((function(e){i(n,e,a[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(a)):c(Object(a)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(a,e))}))}return n}function l(n,e){if(null==n)return{};var a,t,r=function(n,e){if(null==n)return{};var a,t,r={},i=Object.keys(n);for(t=0;t<i.length;t++)a=i[t],e.indexOf(a)>=0||(r[a]=n[a]);return r}(n,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(t=0;t<i.length;t++)a=i[t],e.indexOf(a)>=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<i;p++)c[p]=a[p];return r.a.createElement.apply(null,c)}return r.a.createElement.apply(null,a)}f.displayName="MDXCreateElement"},304:function(n,e,a){"use strict";a.r(e),e.default=a.p+"assets/images/dashboard-24aea705724fd29993c5508a401b3b3c.png"},59:function(n,e,a){"use strict";a.r(e),a.d(e,"frontMatter",(function(){return c})),a.d(e,"metadata",(function(){return o})),a.d(e,"rightToc",(function(){return l})),a.d(e,"default",(function(){return u}));var t=a(2),r=a(6),i=(a(0),a(292)),c={title:"Dashboard"},o={unversionedId:"examples/dashboard",id:"examples/dashboard",isDocsHomePage:!1,title:"Dashboard",description:"Make a dashboard using a multitude of cards and update them live.",source:"@site/docs/examples/dashboard.md",slug:"/examples/dashboard",permalink:"/wave/docs/examples/dashboard",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/dashboard.md",version:"current",sidebar:"someSidebar",previous:{title:"Issue Tracker",permalink:"/wave/docs/examples/issue-tracker"},next:{title:"Stat / Small",permalink:"/wave/docs/examples/stat-small"}},l=[],p={rightToc:l};function u(n){var e=n.components,c=Object(r.a)(n,["components"]);return Object(i.b)("wrapper",Object(t.a)({},p,c,{components:e,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Make a dashboard using a multitude of cards and update them live."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+a(304).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from faker import Faker\nimport time\nfrom h2o_wave import site, data, ui\nfrom synth import FakePercent, FakeCategoricalSeries\n\nfake = Faker()\n\nlight_theme_colors = '$red $pink $purple $violet $indigo $blue $azure $cyan $teal $mint $green $amber $orange $tangerine'.split()\ndark_theme_colors = '$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine'.split()\n\n_color_index = -1\ncolors = dark_theme_colors\n\n\ndef next_color():\n    global _color_index\n    _color_index += 1\n    return colors[_color_index % len(colors)]\n\n\n_curve_index = -1\ncurves = 'linear smooth step stepAfter stepBefore'.split()\n\n\ndef next_curve():\n    global _curve_index\n    _curve_index += 1\n    return curves[_curve_index % len(curves)]\n\n\ndef create_dashboard(update_freq=0.0):\n    page = site['/demo']\n\n    simples = []\n    for i in range(1, 7):\n        f = FakePercent()\n        val, pc = f.next()\n        c = page.add(f'a{i}', ui.small_stat_card(\n            box=f'{i} 1 1 1',\n            title=fake.cryptocurrency_name(),\n            value=f'${val:.2f}',\n        ))\n        simples.append((f, c))\n\n    simples_colored = []\n    for i in range(1, 7):\n        f = FakeCategoricalSeries()\n        cat, val, pc = f.next()\n        c = page.add(f'aa{i}', ui.small_series_stat_card(\n            box=f'{6 + i} 1 1 1',\n            title=fake.cryptocurrency_code(),\n            value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            data=dict(qux=val, quux=pc / 100),\n            plot_category='foo',\n            plot_value='qux',\n            plot_color=next_color(),\n            plot_data=data('foo qux', -15),\n            plot_zero_value=0,\n            plot_curve=next_curve(),\n        ))\n        simples_colored.append((f, c))\n\n    lines = []\n    for i in range(1, 13, 2):\n        f = FakeCategoricalSeries()\n        cat, val, pc = f.next()\n        c = page.add(f'b{i}', ui.wide_series_stat_card(\n            box=f'{i} 2 2 1',\n            title=fake.cryptocurrency_name(),\n            value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            aux_value='={{intl quux style=\"percent\" minimum_fraction_digits=1 maximum_fraction_digits=1}}',\n            data=dict(qux=val, quux=pc / 100),\n            plot_category='foo',\n            plot_value='qux',\n            plot_color=next_color(),\n            plot_data=data('foo qux', -15),\n            plot_zero_value=0,\n            plot_curve=next_curve(),\n        ))\n        lines.append((f, c))\n\n    bars = []\n    for i in range(1, 13, 2):\n        f = FakeCategoricalSeries()\n        cat, val, pc = f.next()\n        c = page.add(f'c{i}', ui.wide_series_stat_card(\n            box=f'{i} 3 2 1',\n            title=fake.cryptocurrency_name(),\n            value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            aux_value='={{intl quux style=\"percent\" minimum_fraction_digits=1 maximum_fraction_digits=1}}',\n            data=dict(qux=val, quux=pc),\n            plot_type='interval',\n            plot_category='foo',\n            plot_value='qux',\n            plot_color=next_color(),\n            plot_data=data('foo qux', -25),\n            plot_zero_value=0\n        ))\n        bars.append((f, c))\n\n    large_pcs = []\n    for i in range(1, 13):\n        f = FakePercent()\n        val, pc = f.next()\n        c = page.add(f'd{i}', ui.tall_gauge_stat_card(\n            box=f'{i} 4 1 2',\n            title=fake.cryptocurrency_name(),\n            value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            aux_value='={{intl bar style=\"percent\" minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            plot_color=next_color(),\n            progress=pc,\n            data=dict(foo=val, bar=pc / 100),\n        ))\n        large_pcs.append((f, c))\n\n    large_lines = []\n    for i in range(1, 13):\n        f = FakeCategoricalSeries()\n        cat, val, pc = f.next()\n        c = page.add(f'e{i}', ui.tall_series_stat_card(\n            box=f'{i} 6 1 2',\n            title=fake.cryptocurrency_name(),\n            value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            aux_value='={{intl quux style=\"percent\" minimum_fraction_digits=1 maximum_fraction_digits=1}}',\n            data=dict(qux=val, quux=pc),\n            plot_type='area',\n            plot_category='foo',\n            plot_value='qux',\n            plot_color=next_color(),\n            plot_data=data('foo qux', -15),\n            plot_zero_value=0,\n            plot_curve=next_curve(),\n        ))\n        large_lines.append((f, c))\n\n    small_pcs = []\n    for i in range(1, 7, 2):\n        f = FakePercent()\n        val, pc = f.next()\n        c = page.add(f'f{i}', ui.wide_gauge_stat_card(\n            box=f'{i} 8 2 1',\n            title=fake.cryptocurrency_name(),\n            value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            aux_value='={{intl bar style=\"percent\" minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            plot_color=next_color(),\n            progress=pc,\n            data=dict(foo=val, bar=pc / 100),\n        ))\n        small_pcs.append((f, c))\n\n    small_pbs = []\n    for i in range(7, 13, 2):\n        f = FakePercent()\n        val, pc = f.next()\n        c = page.add(f'f{i}', ui.wide_bar_stat_card(\n            box=f'{i} 8 2 1',\n            title=fake.cryptocurrency_name(),\n            value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            aux_value='={{intl bar style=\"percent\" minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            plot_color=next_color(),\n            progress=pc,\n            data=dict(foo=val, bar=pc / 100),\n        ))\n        small_pbs.append((f, c))\n\n    large_cards = []\n    for i in range(1, 7, 2):\n        f = FakePercent()\n        val, pc = f.next()\n        c = page.add(f'g{i}', ui.large_stat_card(\n            box=f'{i} 9 2 2',\n            title=fake.cryptocurrency_name(),\n            value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            aux_value='={{intl quux style=\"percent\" minimum_fraction_digits=1 maximum_fraction_digits=1}}',\n            data=dict(qux=val, quux=pc / 100),\n            caption=' '.join(fake.sentences()),\n        ))\n        large_cards.append((f, c))\n\n    large_pbs = []\n    for i in range(7, 13, 2):\n        f = FakePercent()\n        val, pc = f.next()\n        c = page.add(f'g{i}', ui.large_bar_stat_card(\n            box=f'{i} 9 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=next_color(),\n            progress=pc,\n            data=dict(foo=val, bar=pc / 100),\n            caption=' '.join(fake.sentences(2)),\n        ))\n        large_pbs.append((f, c))\n\n    page.save()\n\n    while update_freq > 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.192be162.js b/docs/0a6c0f5b.da8efe17.js
similarity index 81%
rename from docs/0a6c0f5b.192be162.js
rename to docs/0a6c0f5b.da8efe17.js
index 58ba07e7b3..3249d9e687 100644
--- a/docs/0a6c0f5b.192be162.js
+++ b/docs/0a6c0f5b.da8efe17.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{290: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<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(Object(a),!0).forEach((function(t){l(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function c(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},l=Object.keys(e);for(n=0;n<l.length;n++)a=l[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)a=l[n],t.indexOf(a)>=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<l;s++)i[s]=a[s];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,a)}d.displayName="MDXCreateElement"},476:function(e,t,a){"use strict";a.r(t),t.default="data:image/png;base64,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"},493:function(e,t,a){"use strict";a.r(t),t.default="data:image/png;base64,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"},59:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return i})),a.d(t,"metadata",(function(){return o})),a.d(t,"rightToc",(function(){return c})),a.d(t,"default",(function(){return p}));var n=a(2),r=a(6),l=(a(0),a(290)),i={title:"Tutorial: System Monitor"},o={unversionedId:"tutorial-monitor",id:"tutorial-monitor",isDocsHomePage:!1,title:"Tutorial: System Monitor",description:"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.",source:"@site/docs/tutorial-monitor.md",slug:"/tutorial-monitor",permalink:"/wave/docs/tutorial-monitor",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/tutorial-monitor.md",version:"current",sidebar:"someSidebar",previous:{title:"Tutorial: Beer Wall",permalink:"/wave/docs/tutorial-beer"},next:{title:"Tutorial: Bean Counter",permalink:"/wave/docs/tutorial-counter"}},c=[{value:"Prerequisites",id:"prerequisites",children:[]},{value:"Step 1: Install dependencies",id:"step-1-install-dependencies",children:[]},{value:"Step 2: Monitor CPU usage",id:"step-2-monitor-cpu-usage",children:[]},{value:"Step 3: Run your program",id:"step-3-run-your-program",children:[]},{value:"Step 4: Understand your program",id:"step-4-understand-your-program",children:[{value:"Using a stats card",id:"using-a-stats-card",children:[]},{value:"Declaring a data buffer",id:"declaring-a-data-buffer",children:[]},{value:"Inserting into the data buffer",id:"inserting-into-the-data-buffer",children:[]}]},{value:"Step 5: Monitor memory usage",id:"step-5-monitor-memory-usage",children:[]},{value:"Step 6: Run your program again",id:"step-6-run-your-program-again",children:[]},{value:"Exercise",id:"exercise",children:[]},{value:"Summary",id:"summary",children:[]}],s={rightToc:c};function p(e){var t=e.components,i=Object(r.a)(e,["components"]);return Object(l.b)("wrapper",Object(n.a)({},s,i,{components:t,mdxType:"MDXLayout"}),Object(l.b)("p",null,"In this tutorial, we'll put our learnings from the ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/tutorial-hello"}),"first")," and ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/tutorial-beer"}),"second")," tutorials to some real-world use: a simple system monitoring tool that displays CPU, memory and network stats on a web page. "),Object(l.b)("p",null,Object(l.b)("img",{alt:"CPU",src:a(476).default})),Object(l.b)("p",null,"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?"),Object(l.b)("p",null,"We'll also introduce a new concept, called ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/buffers"}),"data buffers"),", which allows you to use the Wave server to store ",Object(l.b)("em",{parentName:"p"},"rows")," (also called ",Object(l.b)("em",{parentName:"p"},"tuples")," or ",Object(l.b)("em",{parentName:"p"},"records"),") of information - much like how you would use tables in a database, or dataframes in Python or R - to deal with structured data."),Object(l.b)("h2",{id:"prerequisites"},"Prerequisites"),Object(l.b)("p",null,"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 ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/tutorial-hello"}),"Hello World tutorial")," and complete steps 1 and 2."),Object(l.b)("h2",{id:"step-1-install-dependencies"},"Step 1: Install dependencies"),Object(l.b)("p",null,"We'll be using the excellent ",Object(l.b)("inlineCode",{parentName:"p"},"psutil")," package to read system stats. Let's go ahead and install that in our virtual environment:"),Object(l.b)("pre",null,Object(l.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave-apps\n./venv/bin/pip install psutil\n")),Object(l.b)("h2",{id:"step-2-monitor-cpu-usage"},"Step 2: Monitor CPU usage"),Object(l.b)("p",null,"Here's what our program looks like:"),Object(l.b)("pre",null,Object(l.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'{7,12,25} title="$HOME/wave-apps/system_monitor.py"',"{7,12,25}":!0,title:'"$HOME/wave-apps/system_monitor.py"'}),"import time\nimport psutil\nfrom h2o_wave import site, ui, data\n\npage = site['/monitor']\n\ncpu_card = page.add('cpu_stats', ui.small_series_stat_card(\n    box='1 1 1 1',\n    title='CPU',\n    value='={{usage}}%',\n    data=dict(usage=0.0),\n    plot_data=data('tick usage', -15),\n    plot_category='tick',\n    plot_value='usage',\n    plot_zero_value=0,\n    plot_color='$red',\n))\n\ntick = 0\nwhile True:\n    tick += 1\n\n    cpu_usage = psutil.cpu_percent(interval=1)\n    cpu_card.data.usage = cpu_usage\n    cpu_card.plot_data[-1] = [tick, cpu_usage]\n\n    page.save()\n    time.sleep(1)\n")),Object(l.b)("h2",{id:"step-3-run-your-program"},"Step 3: Run your program"),Object(l.b)("pre",null,Object(l.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave-apps\n./venv/bin/python system_stats.py\n")),Object(l.b)("p",null,"Point your browser to ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"http://localhost:55555/monitor"}),"http://localhost:55555/monitor"),"."),Object(l.b)("p",null,Object(l.b)("img",{alt:"CPU",src:a(493).default})),Object(l.b)("h2",{id:"step-4-understand-your-program"},"Step 4: Understand your program"),Object(l.b)("p",null,"You'll notice that the above program is quite similar to the program we wrote during the ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/tutorial-beer"}),"Beer Wall")," tutorial, with three important differences (see highlighted lines above):"),Object(l.b)("ol",null,Object(l.b)("li",{parentName:"ol"},"We use a ",Object(l.b)("inlineCode",{parentName:"li"},"ui.small_series_stat_card()")," instead of a ",Object(l.b)("inlineCode",{parentName:"li"},"ui.markdown_card()"),"."),Object(l.b)("li",{parentName:"ol"},"The card is capable of dealing with multiple rows of data."),Object(l.b)("li",{parentName:"ol"},"To display information on the card, you only need to send it new values (and not all the data rows all over again). ")),Object(l.b)("p",null,"Let's explore these topics one by one."),Object(l.b)("h3",{id:"using-a-stats-card"},"Using a stats card"),Object(l.b)("p",null,"The Wave SDK ships with a variety of ",Object(l.b)("em",{parentName:"p"},"stats cards"),", which are cards that display values or graphics, or a combination of both (see ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"examples"}),"Gallery")," for more). "),Object(l.b)("p",null,"In this case, we use ",Object(l.b)("inlineCode",{parentName:"p"},"small_series_stats_card()"),", which displays a value and a time series visualization."),Object(l.b)("pre",null,Object(l.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"cpu_card = page.add('cpu_stats', ui.small_series_stat_card(...)\n")),Object(l.b)("h3",{id:"declaring-a-data-buffer"},"Declaring a data buffer"),Object(l.b)("p",null,"The stats card is capable of rendering its visualization using a ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/buffers"}),"data buffer"),". A data buffer is similar to a database table in that it has a predefined structure (columns and rows), but is write-only (you cannot query information; only insert, update or delete them)."),Object(l.b)("div",{className:"admonition admonition-info alert alert--info"},Object(l.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(l.b)("h5",{parentName:"div"},Object(l.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(l.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(l.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(l.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(l.b)("p",{parentName:"div"},"The ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/buffers"}),"data buffer")," topic covers different types of buffers in more detail."))),Object(l.b)("p",null,"In this case, we declare a ",Object(l.b)("em",{parentName:"p"},"cyclic buffer"),", a ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/FIFO_(computing_and_electronics)"}),"FIFO")," data structure that holds a fixed number of rows, and can only be appended to. Our buffer holds at most 15 rows, and has exactly two columns: ",Object(l.b)("inlineCode",{parentName:"p"},"tick")," (a one-up integer) and ",Object(l.b)("inlineCode",{parentName:"p"},"usage")," (the CPU usage)."),Object(l.b)("pre",null,Object(l.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"    plot_data=data('tick usage', -15),\n")),Object(l.b)("p",null,"Internally, the card's data buffer might look like this in memory when first created:"),Object(l.b)("table",null,Object(l.b)("thead",{parentName:"table"},Object(l.b)("tr",{parentName:"thead"},Object(l.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"#"),Object(l.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"tick"),Object(l.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"usage"))),Object(l.b)("tbody",{parentName:"table"},Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"0"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null})),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}))),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"1"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null})),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}))),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"..."),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"..."),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"...")),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"13"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null})),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}))),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"14"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null})),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}))))),Object(l.b)("h3",{id:"inserting-into-the-data-buffer"},"Inserting into the data buffer"),Object(l.b)("p",null,"Lastly, we measure CPU usage every second and append a new row to the end of card's data buffer, like this:"),Object(l.b)("pre",null,Object(l.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"    cpu_card.plot_data[-1] = [tick, cpu_usage]\n")),Object(l.b)("p",null,"Internally, the card's data buffer might look like in memory while in use:"),Object(l.b)("table",null,Object(l.b)("thead",{parentName:"table"},Object(l.b)("tr",{parentName:"thead"},Object(l.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"#"),Object(l.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"tick"),Object(l.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"usage"))),Object(l.b)("tbody",{parentName:"table"},Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"0"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"1015"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"4.2")),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"1"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"1016"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"4.9")),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"..."),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"..."),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"...")),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"13"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"1028"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"5.8")),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"14"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"1039"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"7.5")))),Object(l.b)("h2",{id:"step-5-monitor-memory-usage"},"Step 5: Monitor memory usage"),Object(l.b)("p",null,"As a final step, we can duplicate parts of our program to create another card that displays memory stats. The two cards behave identically, except that one displays CPU usage and the other, memory."),Object(l.b)("pre",null,Object(l.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'{18-28,38-40} title="$HOME/wave-apps/system_monitor.py"',"{18-28,38-40}":!0,title:'"$HOME/wave-apps/system_monitor.py"'}),"import time\nimport psutil\nfrom h2o_wave import site, ui, data\n\npage = site['/monitor']\n\ncpu_card = page.add('cpu_stats', ui.small_series_stat_card(\n    box='1 1 1 1',\n    title='CPU',\n    value='={{usage}}%',\n    data=dict(usage=0.0),\n    plot_data=data('tick usage', -15),\n    plot_category='tick',\n    plot_value='usage',\n    plot_zero_value=0,\n    plot_color='$red',\n))\nmem_card = page.add('mem_stats', ui.small_series_stat_card(\n    box='1 2 1 1',\n    title='Memory',\n    value='={{usage}}%',\n    data=dict(usage=0.0),\n    plot_data=data('tick usage', -15),\n    plot_category='tick',\n    plot_value='usage',\n    plot_zero_value=0,\n    plot_color='$blue',\n))\n\ntick = 0\nwhile True:\n    tick += 1\n\n    cpu_usage = psutil.cpu_percent(interval=1)\n    cpu_card.data.usage = cpu_usage\n    cpu_card.plot_data[-1] = [tick, cpu_usage]\n\n    mem_usage = psutil.virtual_memory().percent\n    mem_card.data.usage = mem_usage\n    mem_card.plot_data[-1] = [tick, mem_usage]\n\n    page.save()\n    time.sleep(1)\n")),Object(l.b)("h2",{id:"step-6-run-your-program-again"},"Step 6: Run your program again"),Object(l.b)("p",null,"Terminate your program (",Object(l.b)("inlineCode",{parentName:"p"},"^C"),") and restart it:"),Object(l.b)("pre",null,Object(l.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave-apps\n./venv/bin/python system_stats.py\n")),Object(l.b)("p",null,"Point your browser to ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"http://localhost:55555/monitor"}),"http://localhost:55555/monitor"),". You should now see both CPU and memory stats live:"),Object(l.b)("p",null,Object(l.b)("img",{alt:"CPU",src:a(476).default})),Object(l.b)("h2",{id:"exercise"},"Exercise"),Object(l.b)("p",null,"Explore other kinds of cards in the ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"examples"}),"Gallery")," and display additional stats gleaned from ",Object(l.b)("inlineCode",{parentName:"p"},"psutil")," (network, disk, processes, etc.)."),Object(l.b)("h2",{id:"summary"},"Summary"),Object(l.b)("p",null,"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."),Object(l.b)("p",null,"The programs you've been authoring till now are one kind of programs, called ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/scripts"}),"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 ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/apps"}),"Wave Apps"),", which are long-running programs (",Object(l.b)("em",{parentName:"p"},"servers")," or ",Object(l.b)("em",{parentName:"p"},"services"),") that are capable of modifying pages in response to user actions. Let's see how to do that in the next tutorial. "))}p.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{292: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<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(Object(a),!0).forEach((function(t){l(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function c(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},l=Object.keys(e);for(n=0;n<l.length;n++)a=l[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)a=l[n],t.indexOf(a)>=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<l;s++)i[s]=a[s];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,a)}d.displayName="MDXCreateElement"},482:function(e,t,a){"use strict";a.r(t),t.default="data:image/png;base64,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"},501:function(e,t,a){"use strict";a.r(t),t.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4AAABgCAYAAADsHcsSAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUARnJpIDAyIE9jdCAyMDIwIDAzOjQ1OjA0IFBNIFBEVNBSdaAAAA3fSURBVHic7Z15dBRVvoC/quqqTkgcBojMzPOxDAmLRFRA9m1Yk7CETVmiLI6egQAKCuMoiz59uM24EDAOOPDUOWowKkQBHYHHJoGYMIsMe8KiwhCBJL5A0unuqq73R5MmCQnpztLFJPc7J4dTXbd+997k495b99atloqKikwEgiAjW10AQeNEiCewBCGewBKEeAJLEOIJLEGIJ7AEIZ7AEmy1DWCaYhqwMSNJUo2uq5F4VckmJGwclJWt7N88EAkDEq9sJpqmYbPZamy8oGFgmia6ruNyuXx++OOE32O80qCmaaJpGqqqCukESJKEqqpomlbOkeoI6ObCNE1M08Rmq/XQUNDAsNlsPj/8wS/xfMGuBhYtnaAikiR5PfGz1QuoqzX9CChovATiSI26WoGgMuq0qy07YBTiCW5ERUdu5ErAKxdCPEFVBOKGWDITWEJgd7UCgZ/U2V3t1XC1KIqgcVCH83gCQV0jxBNYghBPYAlCPIElCPEEliDEE1iCEE9gCUI8gSVYIl5eXh5PL1vK0CGDGTRwALNnzeKbb77xnV+6dAndu3Wle7eu3NO9G6NHjSQ19UPf+bjYGBY+/li5mGkbN9K9W1eOHz8etHoEi3PnzjJ71iz69e3DffdOZOfOHVWmTUtLY2RcHP369mHJksU4HA4APB4PTy9bysMPPcQffv+yL31WViaPPvpIvdehIkEX78qVKzw4cwbbtm2j/4ABjB07ju+++5bE2bPKSWO321m27GkWLfotERERvPzSS6Snpwe7uJZjmiaPLVjAXXffxc5du1m8ZAn//dxznDlz5rq0B7Ky+POf32XVqlVs/98dhNjtvPjC8wBkZ2dTWHiZtevWcfDgQfLz8ykuLub1115j6dJlQa6VBeKtT0nh3LlzvPLKqzz77HM8vnAh7733PorNxgfvv+dLp6oq48aPZ8rUqaxc9QayLLN165fBLq7lnDp1ioKCAhIT56BpGl27dmNMfDyfb9lyXdrU1A+ZP38BkVFRhIaGsnDRb5k8eQoANkXB6SzBNE3cbjc2m42kFa8zdWoCLVu2DHa1ar+vNlC+/jqDVq1a0a9/f99nzVu04NNPP6vymrCwMGw2FWeJMxhFvKkwTQ9U2GogyzKnT5++Lu2hQ4cZOmw4kydNIjf3PEOGDOV3Tz4JQGRUFJ2jo0mcPZvRY8Zw/Pgxzufm8tTiJUGpR0WC3uIVFBRw6623Xvd58+bNad68ue+4uLiYvLw8zp07y5vJybhcTu7u2jWYRb0paNcukp/ccgtvrVmDw+Hg64wMNm/eXOnTHwUFBXy4PoVXXn2VTZs2c/HiRVYmJfnOP/LIo6xes4YJEyZa1sWWEnTxmjVrxoULF677vLi4mOKiIt+xx+NhxPBhxI8ZwzvvvE3/AQOYOHEi4N1YohtGuetLjxvaRiRZlnl9RRKZmZkMHTKYdevWcn/C/ZV2jzbVRuKcObRq1YqfNG3KgscWsG37tuvSlXaxp0+dYs6cRBY/9WS5330wCLp4vXr15uzZs6Tv3ev7LD8/n9iYEbzw4gvl0q56I5nk5DfZsGEjSUkrUVUVgIiICI4cOVLul5WVlek715BwuVwU5Oezdt069u3P4K0/reXipYtEtY+6Lm3rVq1xu3XfsWF4kCv8R8zKyuR8bi5j4uNJWpnE8uXP0y4yki2VjBnrk6CP8aZMnUpa2kYWLVpITGwsTZs2ZdvWbei6zowZM33pwsPD6du3b6UxJt57L889+ywzZkynX//+nDp5kvT0dIYMGVquu24IqKrKsmVL+c1vZjEiJob9+/eze9cuEhPnALBly2Z+8Yv/oFs3703HG6tWEhUVhaZpvPbaq8TGxvlild7FrkhaCYCu69jtdkLsIbh1d1DrFXTxwsPDefudd0lKWsGe3bsxDIPo6GjmznuF9u3b+xVj7NhxmB6TDz54n/UpKTRt2pSEhPuZM3duPZc++EiSxIqklTzz9DKef345bdu25eXf/4Hw8HAAdu/aRbvISLp168akSZO4eOECD9yfgNPpJCYmlrnz5vliJa14nSlTp/q66ZkzZzJ3TiKa3c5LL74U3HpV99b3sjuHPB4Dw/A0uFZFUDfk5+ejKDKyrCBJku+nMsSSmcAShHgCSxDiCSxBiCewBCGewBKEeAJLEOIJLEGIJ7AEIZ7AEoR4AksQ4gksQYgnsIQaiVf8zGKMw4fquiyCRkSNxHPvS+fKY/MoWbcG88rlui6ToBFQI/FC5z+OHBGBc/0HFC2Yh3tb49v9JagdNXoer5npAcC54SOcqesBUAcMwj45AaVjp/ovteCmJJDn8WolHoDnX+dwbvwE91e7kVQb9skJaJMSkEJD67ZWgpueoIpXin4gC+enGzCyT6BERmGfnIA6eGjd1Ejwb4El4pXi+iwN56Y0zMuXUXv2Qo0ZiTrwVzWujJ6ZgTM1BblVa5QOHVE6dEKJvH6HlcB6LBUPvN2v6/NNuHZsB4+J7c670GJGoo6I9bsS7q1/wflRCsaZM9g6R2OczMF0et8kINkUr4AdOqF09Moot27jd+yGjuf77/Dk52O76+6g5mu5eKUY357BvWM77p3bMV1ulA4d0caORxsRV+U1zo/W40pNwfPjj9i698A+bjxK+46A9xdqnMzBOJmNkZODcfrUtYqEhKB07IRyx53Y7rgTpUsXJHuIX+VsSJhOJ0WL5mMcO4rasxf2hOko0XcEJe+bRrxSPHmXcH2+GfeO7ZgOB0rr1miTE3wCmoWFOFNTcKamgGmiDhiIfewE5P9sVU1gD0ZO9jUZs0/g+eEH32mlfQevhHd0wdblTqRmDX93XPHyZ9D/eoCQaTNxbvwEz4VcQhKmYZ86DTStXvO+6cTzxXI5cX2WhuvLLzAvX0b+2c+wde2O6y+fA6CNiEUbOwG5RYsaxQcwC/IxThxHP34M48QxjJwc3zn5ttu8It4ejRY7EhSlxvncjJS89SbOjz4kNHEe6qDBePLycG38GNf2rSgdO2FPmIbat3/1gWrITSteWVxffoHrszQ8eZewjx2PNm4CUmiTWsetiHm5ECM7GyPnhLd1zD6B6XCAJKGNjkeLiUPpeHud5xtsXGmf4EheSUjCA2jx48udc2fsw7XxE4xvz6CNGYt96jTkSl6cVFv+LcSzCrOwEHdmBnpmBvpB71tIbZ2jUUfEovYfiNT0pxaXMHDc+/ZS/MwStJGjCZn+YKVpzKIrODd8jGvLJuSf/xx7wnS0uFF1Wg4hnp8YJ3PQMzNwZ2bgOX8eSdNQh8eiDhiIrXsPq4vnF0ZONlcSH0bt05fQ+QurTa///W84N36MceI46sBB2Kc9iNL2l3VSFiFeoBjGtVYwMwPT8KB07ITatx+23v1Q2kVaXcJKMS8XcuWh6UgRt9Jk4e+Qfupna63r3uXODR8j33YbTZ5YjNK59ne+Qrxa4Mk9j/51Bu6sDN+Nie2eHqh9+qEOj62XpUA9MwP3/nQ833+HFjsKddgIv6678shszB9+IPTJJSht2gae74FMHKuTkVSV0CcWY7unZ8AxyiLEqyP0fx5Ez8pAz8rEU1CAZLdj69MPbXgMtp69axzXLCpC378X97509P17MXUDZBm5ZUs8ublIqooaNwp7/HjkKoQqXv5fuHfvpMlTy2o1UWwcO4pjdTJmQR6hTyyp1SqTEK+uMU3ce/fgztiH/tcDAMgtWqAOi0Ht3QeahCGFhSE1CUNq0qTSaRrP+X/h3rcXfX86+jf/AEAKC0Pt2Rtb/wHYorsA3jGYe99e9H17MQ0DJao9Wvz4cjcCJX/6I87U9YTOSkQdPKzW1fOc/R7H6mSMnGxCFz2JFlP1BP+NEOLVI2ZhIe69u3F/tafcyklZpBD7VQnDICwMnE6MM96XZcsREdh69ELt0xelQ9WPkJlOJ+49u9DTv0I/dhQALW4USlR7HKtWYJ94H/b7ptRdvX4swLE6Gf0ffyd03gK0seOrv6gCQrwg4Tl3Fk/eJe+8oMOBefUHRzFmSdljB0qn27H16IXyy3aB55N7HveeXbj37MJz6RLqoF8RmlgPX4qiu3H8MRl3+leEPDwL++SEgC4X4jVgjCOHUTpH12seJW+vxfXlF4Q8MAP7jF/7VSb96GGKBg/zW7ygv4pWUDvqWzqAkAcfRgq/hZL33sUscRAy69orfj0XL2IcPYxx5BD64UMYV4cBAAQw3hTiCSrFft9kpPBwSt79H8ySEsxLl9AP/xPzsndzlxQa6n3gd3Q8cpu2KK3b8H8BxBfiCapEixuFFB6OI3klSmQUat/+KJFRKG3aVjnN4y9ijCeoMwokWbx8W3BzI8QTWIIQT2AJQjyBJQjxBJYgxBNYQoDiNazvghXUB/454pd4FedibjjxJ2iUVHSiui+srlFX6xTmCSoQqBMBiydJEkWAw2OKlk+AideFIqpv5cpS7VqtJEmYplluCUSSJIo8Hgrdhm85DUxMYWKjwOvXNRcUWUaW5euWyW4kYkAPCZQGlSUJU5ZRAI9PvFKEfQ2bazKVuiDJsvffG6zNVsRv8SRJgtKWr1Q6SUKqKJ4puuCGirehKy9eWfkkSULCvy7XL/FKu1uuBpZlGbOMdKboYxslFYdfkiT5xKxOvoC7WvCab16VsWrphIwNiyr2TpRK5z2on6629CaDMt2uaO0aN5XdSNRZV1sxoE/ACpkICRsHVe4cq8vplOoyKCtbIBkLGgY1/ZvXes+FkE1QE8TTKQJL+H+wzfcQJS2VtgAAAABJRU5ErkJggg=="},60:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return i})),a.d(t,"metadata",(function(){return o})),a.d(t,"rightToc",(function(){return c})),a.d(t,"default",(function(){return p}));var n=a(2),r=a(6),l=(a(0),a(292)),i={title:"Tutorial: System Monitor"},o={unversionedId:"tutorial-monitor",id:"tutorial-monitor",isDocsHomePage:!1,title:"Tutorial: System Monitor",description:"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.",source:"@site/docs/tutorial-monitor.md",slug:"/tutorial-monitor",permalink:"/wave/docs/tutorial-monitor",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/tutorial-monitor.md",version:"current",sidebar:"someSidebar",previous:{title:"Tutorial: Beer Wall",permalink:"/wave/docs/tutorial-beer"},next:{title:"Tutorial: Bean Counter",permalink:"/wave/docs/tutorial-counter"}},c=[{value:"Prerequisites",id:"prerequisites",children:[]},{value:"Step 1: Install dependencies",id:"step-1-install-dependencies",children:[]},{value:"Step 2: Monitor CPU usage",id:"step-2-monitor-cpu-usage",children:[]},{value:"Step 3: Run your program",id:"step-3-run-your-program",children:[]},{value:"Step 4: Understand your program",id:"step-4-understand-your-program",children:[{value:"Using a stats card",id:"using-a-stats-card",children:[]},{value:"Declaring a data buffer",id:"declaring-a-data-buffer",children:[]},{value:"Inserting into the data buffer",id:"inserting-into-the-data-buffer",children:[]}]},{value:"Step 5: Monitor memory usage",id:"step-5-monitor-memory-usage",children:[]},{value:"Step 6: Run your program again",id:"step-6-run-your-program-again",children:[]},{value:"Exercise",id:"exercise",children:[]},{value:"Summary",id:"summary",children:[]}],s={rightToc:c};function p(e){var t=e.components,i=Object(r.a)(e,["components"]);return Object(l.b)("wrapper",Object(n.a)({},s,i,{components:t,mdxType:"MDXLayout"}),Object(l.b)("p",null,"In this tutorial, we'll put our learnings from the ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/tutorial-hello"}),"first")," and ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/tutorial-beer"}),"second")," tutorials to some real-world use: a simple system monitoring tool that displays CPU, memory and network stats on a web page. "),Object(l.b)("p",null,Object(l.b)("img",{alt:"CPU",src:a(482).default})),Object(l.b)("p",null,"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?"),Object(l.b)("p",null,"We'll also introduce a new concept, called ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/buffers"}),"data buffers"),", which allows you to use the Wave server to store ",Object(l.b)("em",{parentName:"p"},"rows")," (also called ",Object(l.b)("em",{parentName:"p"},"tuples")," or ",Object(l.b)("em",{parentName:"p"},"records"),") of information - much like how you would use tables in a database, or dataframes in Python or R - to deal with structured data."),Object(l.b)("h2",{id:"prerequisites"},"Prerequisites"),Object(l.b)("p",null,"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 ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/tutorial-hello"}),"Hello World tutorial")," and complete steps 1 and 2."),Object(l.b)("h2",{id:"step-1-install-dependencies"},"Step 1: Install dependencies"),Object(l.b)("p",null,"We'll be using the excellent ",Object(l.b)("inlineCode",{parentName:"p"},"psutil")," package to read system stats. Let's go ahead and install that in our virtual environment:"),Object(l.b)("pre",null,Object(l.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave-apps\n./venv/bin/pip install psutil\n")),Object(l.b)("h2",{id:"step-2-monitor-cpu-usage"},"Step 2: Monitor CPU usage"),Object(l.b)("p",null,"Here's what our program looks like:"),Object(l.b)("pre",null,Object(l.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'{7,12,25} title="$HOME/wave-apps/system_monitor.py"',"{7,12,25}":!0,title:'"$HOME/wave-apps/system_monitor.py"'}),"import time\nimport psutil\nfrom h2o_wave import site, ui, data\n\npage = site['/monitor']\n\ncpu_card = page.add('cpu_stats', ui.small_series_stat_card(\n    box='1 1 1 1',\n    title='CPU',\n    value='={{usage}}%',\n    data=dict(usage=0.0),\n    plot_data=data('tick usage', -15),\n    plot_category='tick',\n    plot_value='usage',\n    plot_zero_value=0,\n    plot_color='$red',\n))\n\ntick = 0\nwhile True:\n    tick += 1\n\n    cpu_usage = psutil.cpu_percent(interval=1)\n    cpu_card.data.usage = cpu_usage\n    cpu_card.plot_data[-1] = [tick, cpu_usage]\n\n    page.save()\n    time.sleep(1)\n")),Object(l.b)("h2",{id:"step-3-run-your-program"},"Step 3: Run your program"),Object(l.b)("pre",null,Object(l.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave-apps\n./venv/bin/python system_stats.py\n")),Object(l.b)("p",null,"Point your browser to ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"http://localhost:55555/monitor"}),"http://localhost:55555/monitor"),"."),Object(l.b)("p",null,Object(l.b)("img",{alt:"CPU",src:a(501).default})),Object(l.b)("h2",{id:"step-4-understand-your-program"},"Step 4: Understand your program"),Object(l.b)("p",null,"You'll notice that the above program is quite similar to the program we wrote during the ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/tutorial-beer"}),"Beer Wall")," tutorial, with three important differences (see highlighted lines above):"),Object(l.b)("ol",null,Object(l.b)("li",{parentName:"ol"},"We use a ",Object(l.b)("inlineCode",{parentName:"li"},"ui.small_series_stat_card()")," instead of a ",Object(l.b)("inlineCode",{parentName:"li"},"ui.markdown_card()"),"."),Object(l.b)("li",{parentName:"ol"},"The card is capable of dealing with multiple rows of data."),Object(l.b)("li",{parentName:"ol"},"To display information on the card, you only need to send it new values (and not all the data rows all over again). ")),Object(l.b)("p",null,"Let's explore these topics one by one."),Object(l.b)("h3",{id:"using-a-stats-card"},"Using a stats card"),Object(l.b)("p",null,"The Wave SDK ships with a variety of ",Object(l.b)("em",{parentName:"p"},"stats cards"),", which are cards that display values or graphics, or a combination of both (see ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"examples"}),"Gallery")," for more). "),Object(l.b)("p",null,"In this case, we use ",Object(l.b)("inlineCode",{parentName:"p"},"small_series_stats_card()"),", which displays a value and a time series visualization."),Object(l.b)("pre",null,Object(l.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"cpu_card = page.add('cpu_stats', ui.small_series_stat_card(...)\n")),Object(l.b)("h3",{id:"declaring-a-data-buffer"},"Declaring a data buffer"),Object(l.b)("p",null,"The stats card is capable of rendering its visualization using a ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/buffers"}),"data buffer"),". A data buffer is similar to a database table in that it has a predefined structure (columns and rows), but is write-only (you cannot query information; only insert, update or delete them)."),Object(l.b)("div",{className:"admonition admonition-info alert alert--info"},Object(l.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(l.b)("h5",{parentName:"div"},Object(l.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(l.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(l.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(l.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(l.b)("p",{parentName:"div"},"The ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/buffers"}),"data buffer")," topic covers different types of buffers in more detail."))),Object(l.b)("p",null,"In this case, we declare a ",Object(l.b)("em",{parentName:"p"},"cyclic buffer"),", a ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/FIFO_(computing_and_electronics)"}),"FIFO")," data structure that holds a fixed number of rows, and can only be appended to. Our buffer holds at most 15 rows, and has exactly two columns: ",Object(l.b)("inlineCode",{parentName:"p"},"tick")," (a one-up integer) and ",Object(l.b)("inlineCode",{parentName:"p"},"usage")," (the CPU usage)."),Object(l.b)("pre",null,Object(l.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"    plot_data=data('tick usage', -15),\n")),Object(l.b)("p",null,"Internally, the card's data buffer might look like this in memory when first created:"),Object(l.b)("table",null,Object(l.b)("thead",{parentName:"table"},Object(l.b)("tr",{parentName:"thead"},Object(l.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"#"),Object(l.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"tick"),Object(l.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"usage"))),Object(l.b)("tbody",{parentName:"table"},Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"0"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null})),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}))),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"1"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null})),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}))),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"..."),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"..."),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"...")),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"13"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null})),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}))),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"14"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null})),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}))))),Object(l.b)("h3",{id:"inserting-into-the-data-buffer"},"Inserting into the data buffer"),Object(l.b)("p",null,"Lastly, we measure CPU usage every second and append a new row to the end of card's data buffer, like this:"),Object(l.b)("pre",null,Object(l.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"    cpu_card.plot_data[-1] = [tick, cpu_usage]\n")),Object(l.b)("p",null,"Internally, the card's data buffer might look like this in memory while in use:"),Object(l.b)("table",null,Object(l.b)("thead",{parentName:"table"},Object(l.b)("tr",{parentName:"thead"},Object(l.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"#"),Object(l.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"tick"),Object(l.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"usage"))),Object(l.b)("tbody",{parentName:"table"},Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"0"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"1015"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"4.2")),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"1"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"1016"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"4.9")),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"..."),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"..."),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"...")),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"13"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"1028"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"5.8")),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"14"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"1039"),Object(l.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"7.5")))),Object(l.b)("h2",{id:"step-5-monitor-memory-usage"},"Step 5: Monitor memory usage"),Object(l.b)("p",null,"As a final step, we can duplicate parts of our program to create another card that displays memory stats. The two cards behave identically, except that one displays CPU usage and the other, memory."),Object(l.b)("pre",null,Object(l.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'{18-28,38-40} title="$HOME/wave-apps/system_monitor.py"',"{18-28,38-40}":!0,title:'"$HOME/wave-apps/system_monitor.py"'}),"import time\nimport psutil\nfrom h2o_wave import site, ui, data\n\npage = site['/monitor']\n\ncpu_card = page.add('cpu_stats', ui.small_series_stat_card(\n    box='1 1 1 1',\n    title='CPU',\n    value='={{usage}}%',\n    data=dict(usage=0.0),\n    plot_data=data('tick usage', -15),\n    plot_category='tick',\n    plot_value='usage',\n    plot_zero_value=0,\n    plot_color='$red',\n))\nmem_card = page.add('mem_stats', ui.small_series_stat_card(\n    box='1 2 1 1',\n    title='Memory',\n    value='={{usage}}%',\n    data=dict(usage=0.0),\n    plot_data=data('tick usage', -15),\n    plot_category='tick',\n    plot_value='usage',\n    plot_zero_value=0,\n    plot_color='$blue',\n))\n\ntick = 0\nwhile True:\n    tick += 1\n\n    cpu_usage = psutil.cpu_percent(interval=1)\n    cpu_card.data.usage = cpu_usage\n    cpu_card.plot_data[-1] = [tick, cpu_usage]\n\n    mem_usage = psutil.virtual_memory().percent\n    mem_card.data.usage = mem_usage\n    mem_card.plot_data[-1] = [tick, mem_usage]\n\n    page.save()\n    time.sleep(1)\n")),Object(l.b)("h2",{id:"step-6-run-your-program-again"},"Step 6: Run your program again"),Object(l.b)("p",null,"Terminate your program (",Object(l.b)("inlineCode",{parentName:"p"},"^C"),") and restart it:"),Object(l.b)("pre",null,Object(l.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave-apps\n./venv/bin/python system_stats.py\n")),Object(l.b)("p",null,"Point your browser to ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"http://localhost:55555/monitor"}),"http://localhost:55555/monitor"),". You should now see both CPU and memory stats live:"),Object(l.b)("p",null,Object(l.b)("img",{alt:"CPU",src:a(482).default})),Object(l.b)("h2",{id:"exercise"},"Exercise"),Object(l.b)("p",null,"Explore other kinds of cards in the ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"examples"}),"Gallery")," and display additional stats gleaned from ",Object(l.b)("inlineCode",{parentName:"p"},"psutil")," (network, disk, processes, etc.)."),Object(l.b)("h2",{id:"summary"},"Summary"),Object(l.b)("p",null,"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."),Object(l.b)("p",null,"The programs you've been authoring till now are one kind of programs, called ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/scripts"}),"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 ",Object(l.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/apps"}),"Wave Apps"),", which are long-running programs (",Object(l.b)("em",{parentName:"p"},"servers")," or ",Object(l.b)("em",{parentName:"p"},"services"),") that are capable of modifying pages in response to user actions. Let's see how to do that in the next tutorial. "))}p.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/0eb58673.1082abbb.js b/docs/0eb58673.1082abbb.js
deleted file mode 100644
index 80aa89971b..0000000000
--- a/docs/0eb58673.1082abbb.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{60:function(e){e.exports=JSON.parse('{"permalink":"/wave/blog","page":1,"postsPerPage":10,"totalPages":1,"totalCount":3,"previousPage":null,"nextPage":null,"blogDescription":"Blog"}')}}]);
\ No newline at end of file
diff --git a/docs/0eb58673.d66df410.js b/docs/0eb58673.d66df410.js
new file mode 100644
index 0000000000..ccd7c5724e
--- /dev/null
+++ b/docs/0eb58673.d66df410.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{61:function(e){e.exports=JSON.parse('{"permalink":"/wave/blog","page":1,"postsPerPage":10,"totalPages":1,"totalCount":1,"previousPage":null,"nextPage":null,"blogDescription":"Blog"}')}}]);
\ No newline at end of file
diff --git a/docs/0f2a58c8.a9787338.js b/docs/0f2a58c8.a9787338.js
new file mode 100644
index 0000000000..79131c4d04
--- /dev/null
+++ b/docs/0f2a58c8.a9787338.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{292:function(e,n,r){"use strict";r.d(n,"a",(function(){return u})),r.d(n,"b",(function(){return f}));var t=r(0),a=r.n(t);function o(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function i(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 s(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?i(Object(r),!0).forEach((function(n){o(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function l(e,n){if(null==e)return{};var r,t,a=function(e,n){if(null==e)return{};var r,t,a={},o=Object.keys(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=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<o;c++)i[c]=r[c];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},305:function(e,n,r){"use strict";r.r(n),n.default=r.p+"assets/images/table-markdown-fff816fa17022f80817f83239970db97.png"},62:function(e,n,r){"use strict";r.r(n),r.d(n,"frontMatter",(function(){return i})),r.d(n,"metadata",(function(){return s})),r.d(n,"rightToc",(function(){return l})),r.d(n,"default",(function(){return p}));var t=r(2),a=r(6),o=(r(0),r(292)),i={title:"Table / Markdown"},s={unversionedId:"examples/table-markdown",id:"examples/table-markdown",isDocsHomePage:!1,title:"Table / Markdown",description:"Display a table using markdown.",source:"@site/docs/examples/table-markdown.md",slug:"/examples/table-markdown",permalink:"/wave/docs/examples/table-markdown",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/table-markdown.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Stepper",permalink:"/wave/docs/examples/stepper"},next:{title:"Table",permalink:"/wave/docs/examples/table"}},l=[],c={rightToc:l};function p(e){var n=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(t.a)({},c,i,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Display a table using markdown."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(305).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\nair_passengers_fields = ['Year', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']\nair_passengers_rows = [\n    ['1949', '112', '118', '132', '129', '121', '135'],\n    ['1950', '115', '126', '141', '135', '125', '149'],\n    ['1951', '145', '150', '178', '163', '172', '178'],\n    ['1952', '171', '180', '193', '181', '183', '218'],\n    ['1953', '196', '196', '236', '235', '229', '243'],\n    ['1954', '204', '188', '235', '227', '234', '264'],\n    ['1955', '242', '233', '267', '269', '270', '315'],\n    ['1956', '284', '277', '317', '313', '318', '374'],\n    ['1957', '315', '301', '356', '348', '355', '422'],\n    ['1958', '340', '318', '362', '348', '363', '435'],\n    ['1959', '360', '342', '406', '396', '420', '472'],\n    ['1960', '417', '391', '419', '461', '472', '535'],\n]\n\n\ndef make_markdown_row(values):\n    return f\"| {' | '.join([str(x) for x in values])} |\"\n\n\ndef make_markdown_table(fields, rows):\n    return '\\n'.join([\n        make_markdown_row(fields),\n        make_markdown_row('---' * len(fields)),\n        '\\n'.join([make_markdown_row(row) for row in rows]),\n    ])\n\n\npage = site['/demo']\n\nv = page.add('example', ui.form_card(\n    box='1 1 4 5',\n    items=[\n        ui.text(make_markdown_table(\n            fields=air_passengers_fields,\n            rows=air_passengers_rows,\n        )),\n    ],\n))\n\npage.save()\n")))}p.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/0f2a58c8.d86c4919.js b/docs/0f2a58c8.d86c4919.js
deleted file mode 100644
index a0b1a5caed..0000000000
--- a/docs/0f2a58c8.d86c4919.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{290:function(e,n,r){"use strict";r.d(n,"a",(function(){return u})),r.d(n,"b",(function(){return f}));var t=r(0),a=r.n(t);function o(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function i(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 s(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?i(Object(r),!0).forEach((function(n){o(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function l(e,n){if(null==e)return{};var r,t,a=function(e,n){if(null==e)return{};var r,t,a={},o=Object.keys(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=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<o;c++)i[c]=r[c];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},303:function(e,n,r){"use strict";r.r(n),n.default=r.p+"assets/images/table-markdown-fff816fa17022f80817f83239970db97.png"},61:function(e,n,r){"use strict";r.r(n),r.d(n,"frontMatter",(function(){return i})),r.d(n,"metadata",(function(){return s})),r.d(n,"rightToc",(function(){return l})),r.d(n,"default",(function(){return p}));var t=r(2),a=r(6),o=(r(0),r(290)),i={title:"Table / Markdown"},s={unversionedId:"examples/table-markdown",id:"examples/table-markdown",isDocsHomePage:!1,title:"Table / Markdown",description:"Display a table using markdown.",source:"@site/docs/examples/table-markdown.md",slug:"/examples/table-markdown",permalink:"/wave/docs/examples/table-markdown",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/table-markdown.md",version:"current",sidebar:"someSidebar",previous:{title:"Stepper",permalink:"/wave/docs/examples/stepper"},next:{title:"Table",permalink:"/wave/docs/examples/table"}},l=[],c={rightToc:l};function p(e){var n=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(t.a)({},c,i,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Display a table using markdown."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(303).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\nair_passengers_fields = ['Year', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']\nair_passengers_rows = [\n    ['1949', '112', '118', '132', '129', '121', '135'],\n    ['1950', '115', '126', '141', '135', '125', '149'],\n    ['1951', '145', '150', '178', '163', '172', '178'],\n    ['1952', '171', '180', '193', '181', '183', '218'],\n    ['1953', '196', '196', '236', '235', '229', '243'],\n    ['1954', '204', '188', '235', '227', '234', '264'],\n    ['1955', '242', '233', '267', '269', '270', '315'],\n    ['1956', '284', '277', '317', '313', '318', '374'],\n    ['1957', '315', '301', '356', '348', '355', '422'],\n    ['1958', '340', '318', '362', '348', '363', '435'],\n    ['1959', '360', '342', '406', '396', '420', '472'],\n    ['1960', '417', '391', '419', '461', '472', '535'],\n]\n\n\ndef make_markdown_row(values):\n    return f\"| {' | '.join([str(x) for x in values])} |\"\n\n\ndef make_markdown_table(fields, rows):\n    return '\\n'.join([\n        make_markdown_row(fields),\n        make_markdown_row('---' * len(fields)),\n        '\\n'.join([make_markdown_row(row) for row in rows]),\n    ])\n\n\npage = site['/demo']\n\nv = page.add('example', ui.form_card(\n    box='1 1 4 5',\n    items=[\n        ui.text(make_markdown_table(\n            fields=air_passengers_fields,\n            rows=air_passengers_rows,\n        )),\n    ],\n))\n\npage.save()\n")))}p.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/0fd1debb.b46ad397.js b/docs/0fd1debb.b46ad397.js
new file mode 100644
index 0000000000..0c621b95f6
--- /dev/null
+++ b/docs/0fd1debb.b46ad397.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{292:function(e,t,a){"use strict";a.d(t,"a",(function(){return s})),a.d(t,"b",(function(){return m}));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 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 c(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function l(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=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<o;b++)i[b]=a[b];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,a)}d.displayName="MDXCreateElement"},63:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return i})),a.d(t,"metadata",(function(){return c})),a.d(t,"rightToc",(function(){return l})),a.d(t,"default",(function(){return p}));var n=a(2),r=a(6),o=(a(0),a(292)),i={id:"migrating-0",title:"Migrating from pre-alpha"},c={unversionedId:"migrating-0",id:"migrating-0",isDocsHomePage:!1,title:"Migrating from pre-alpha",description:"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.",source:"@site/docs/migrating-0.md",slug:"/migrating-0",permalink:"/wave/docs/migrating-0",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/migrating-0.md",version:"current",sidebar:"someSidebar",previous:{title:"Migrating from 0.8",permalink:"/wave/docs/migrating-0-8"},next:{title:"Contributing",permalink:"/wave/docs/contributing"}},l=[{value:"What has changed?",id:"what-has-changed",children:[]},{value:"Breaking changes",id:"breaking-changes",children:[]}],b={rightToc:l};function p(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},b,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Before you begin, it is highly recommended that you ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases"}),"download")," a release and run the interactive ",Object(o.b)("inlineCode",{parentName:"p"},"tour.py")," that ships with the release to get a feel for what Wave programs look like in practice."),Object(o.b)("h2",{id:"what-has-changed"},"What has changed?"),Object(o.b)("p",null,"From an app-development perspective, the most important change is that Wave is more of a library rather than a framework."),Object(o.b)("p",null,"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 ",Object(o.b)("inlineCode",{parentName:"p"},"import h2o_wave")," and execute via:"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},"The command line: ",Object(o.b)("inlineCode",{parentName:"li"},"python3 my_script.py"),"."),Object(o.b)("li",{parentName:"ul"},"In the Python REPL."),Object(o.b)("li",{parentName:"ul"},"In a Jupyter notebook."),Object(o.b)("li",{parentName:"ul"},"In your favorite IDE (PyCharm, VSCode, etc.).")),Object(o.b)("p",null,"This also means that you can apply breakpoints and debug or step-through your program in your debugger of choice."),Object(o.b)("p",null,"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."),Object(o.b)("h2",{id:"breaking-changes"},"Breaking changes"),Object(o.b)("h4",{id:"removed-qapp-qui-annotations"},"Removed: ",Object(o.b)("inlineCode",{parentName:"h4"},"@Q.app"),", ",Object(o.b)("inlineCode",{parentName:"h4"},"@Q.ui")," annotations."),Object(o.b)("p",null,"Instead, define a ",Object(o.b)("inlineCode",{parentName:"p"},"async")," request-handling function, say ",Object(o.b)("inlineCode",{parentName:"p"},"main()"),", and pass that function to ",Object(o.b)("inlineCode",{parentName:"p"},"listen()"),", like this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen\n\nasync def main(q: Q):\n  pass\n\nlisten('/my/app/route', main)\n")),Object(o.b)("h4",{id:"removed-qwait-qshow-qfail-qexit"},"Removed: ",Object(o.b)("inlineCode",{parentName:"h4"},"q.wait()"),", ",Object(o.b)("inlineCode",{parentName:"h4"},"q.show()"),", ",Object(o.b)("inlineCode",{parentName:"h4"},"q.fail()"),", ",Object(o.b)("inlineCode",{parentName:"h4"},"q.exit()"),"."),Object(o.b)("p",null,"The above four methods were the primary mechanism to make changes to your app's UI. They have all been replaced with a single ",Object(o.b)("inlineCode",{parentName:"p"},"h2o_wave.core.Page.save()")," method."),Object(o.b)("p",null,"The new technique is:"),Object(o.b)("ol",null,Object(o.b)("li",{parentName:"ol"},"Access the page or card you want to modify."),Object(o.b)("li",{parentName:"ol"},"Modify the page or card."),Object(o.b)("li",{parentName:"ol"},"Call ",Object(o.b)("inlineCode",{parentName:"li"},"h2o_wave.core.Page.save()")," to save your changes and update the browser page.")),Object(o.b)("p",null,"Before:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"q.wait(\n  callback_function,\n  ui.text('Step 1'),\n  ui.button(name='next', label='Next'),\n)\n")),Object(o.b)("p",null,"After:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"q.page['my_card'] = ui.form_card(\n  # A card with its top-left corner at column 1, row 5; 2 columns wide and 4 rows high.\n  box='1 5 2 4',\n  items=[\n    ui.text('Step 1'),\n    ui.button(name='next', label='Next'),\n  ],\n)\nawait q.page.save()\n")),Object(o.b)("p",null,"Note that the ",Object(o.b)("em",{parentName:"p"},"After")," example requires a ",Object(o.b)("inlineCode",{parentName:"p"},"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."),Object(o.b)("p",null,"The same technique can be used to update the UI again (or display intermediate results):"),Object(o.b)("p",null,"Before:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"q.wait(\n  callback_function,\n  ui.text('Step 2'),\n  ui.button(name='next', label='Next'),\n)\n")),Object(o.b)("p",null,"After:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"# Don't have to recreate the entire form again; simply replace its items and save the page.\nq.page['my_card'].items = [\n  ui.text('Step 2'),\n  ui.button(name='next', label='Next'),\n]\nawait q.page.save()\n")),Object(o.b)("h4",{id:"removed-callback-functions-for-request-handling"},"Removed: callback functions for request-handling."),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"Instead, all requests are routed to a single function, and you can decide how to organize your application logic by branching on ",Object(o.b)("inlineCode",{parentName:"p"},"q.args.*"),"."),Object(o.b)("p",null,"Before:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"def step1(q: Q):\n  q.wait(\n    step2,\n    ui.text('Step 1'),\n    ui.button(name='next', label='Next'),\n  )\n\ndef step2(q: Q):\n  q.wait(\n    step3,\n    ui.text('Step 2'),\n    ui.button(name='next', label='Next'),\n  )\n\ndef step3(q: Q):\n  q.wait(\n    step4,\n    ui.text('Step 3'),\n    ui.button(name='next', label='Next'),\n  )\n")),Object(o.b)("p",null,"After:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"async def main(q: Q):\n  if q.args.step2:\n    items = [\n      ui.text('Step 2'),\n      ui.button(name='step3', label='Next'),\n    ]\n  elif q.args.step3:\n    items = [\n      ui.text('Step 3'),\n      ui.button(name='step4', label='Next'),\n    ]\n  else:\n    items = [\n      ui.text('Step 1'),\n      ui.button(name='step2', label='Next'),\n    ]\n\n  q.page['my_card'].items = items\n  await q.page.save()\n\nlisten('/my/app/route', main)\n")),Object(o.b)("h4",{id:"removed-qdashboard-and-qnotebook"},"Removed: ",Object(o.b)("inlineCode",{parentName:"h4"},"q.dashboard()")," and ",Object(o.b)("inlineCode",{parentName:"h4"},"q.notebook()"),"."),Object(o.b)("p",null,"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 ",Object(o.b)("inlineCode",{parentName:"p"},"ui.*_card()")," APIs. Also see the ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"#dashboard"}),"dashboard"),", ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"#layout-position"}),"layout")," and ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"#layout-size"}),"sizing")," examples to learn how to lay out several cards on a page."),Object(o.b)("p",null,"If you want to display a notebook-style vertical stack of markdown, html or other content, use ",Object(o.b)("inlineCode",{parentName:"p"},"h2o_wave.ui.text()")," and ",Object(o.b)("inlineCode",{parentName:"p"},"h2o_wave.ui.frame()")," contained inside a ",Object(o.b)("inlineCode",{parentName:"p"},"h2o_wave.ui.form_card()"),", like this:"),Object(o.b)("p",null,"Before:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"ui.notebook([ui.notebook_section([\n  ui.markdown_cell(content='Foo'),\n  ui.frame_cell(source=html_foo, height='200px'),\n  ui.markdown_cell(content='Bar'),\n  ui.frame_cell(source=html_bar, height='200px'),\n])])\n\n")),Object(o.b)("p",null,"After: Note the parameter name change ",Object(o.b)("inlineCode",{parentName:"p"},"frame_cell(source=...)")," to ",Object(o.b)("inlineCode",{parentName:"p"},"frame(content=...)"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"ui.form_card(\n  box='1 5 2 4',\n  items=[\n    ui.text(content='Foo'),\n    ui.frame(content=html_foo, height='200px'),\n    ui.text(content='Bar'),\n    ui.frame(content=html_bar, height='200px'),\n  ],\n)\n")),Object(o.b)("h4",{id:"changed-uibuttons-uiexpander-and-uitabs-accept-a-list-of-items-instead-of-var-args-args"},"Changed: ",Object(o.b)("inlineCode",{parentName:"h4"},"ui.buttons()"),", ",Object(o.b)("inlineCode",{parentName:"h4"},"ui.expander()")," and ",Object(o.b)("inlineCode",{parentName:"h4"},"ui.tabs()")," accept a ",Object(o.b)("inlineCode",{parentName:"h4"},"list")," of items instead of var args ",Object(o.b)("inlineCode",{parentName:"h4"},"*args"),"."),Object(o.b)("p",null,"Before:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"ui.buttons(ui.button(...), ui.button(...), ui.button(...))\n")),Object(o.b)("p",null,"After:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"ui.buttons([ui.button(...), ui.button(...), ui.button(...)]) # Note enclosing [ ]\n")),Object(o.b)("h4",{id:"changed-qupload-changed-to-qsiteupload"},"Changed: ",Object(o.b)("inlineCode",{parentName:"h4"},"q.upload()")," changed to ",Object(o.b)("inlineCode",{parentName:"h4"},"q.site.upload()"),"."),Object(o.b)("p",null,"The ",Object(o.b)("inlineCode",{parentName:"p"},"upload()")," method has been moved to the ",Object(o.b)("inlineCode",{parentName:"p"},"h2o_wave.core.Site")," instance, since each ",Object(o.b)("inlineCode",{parentName:"p"},"h2o_wave.core.Site")," represents a distinct server, and makes it possible to control multiple sites from a single Python script."),Object(o.b)("h4",{id:"changed-qargsfoo-changed-to-qclientfoo"},"Changed: ",Object(o.b)("inlineCode",{parentName:"h4"},"q.args.foo=")," changed to ",Object(o.b)("inlineCode",{parentName:"h4"},"q.client.foo="),"."),Object(o.b)("p",null,"Setting attributes on ",Object(o.b)("inlineCode",{parentName:"p"},"q.args")," (e.g. ",Object(o.b)("inlineCode",{parentName:"p"},"q.args.foo = 'bar'"),") is no longer preserved between requests. This was the primary mechanism employed previously to preserve data between requests."),Object(o.b)("p",null,"Instead, Wave provides 4 mechanisms for preserving data between requests:"),Object(o.b)("ol",null,Object(o.b)("li",{parentName:"ol"},Object(o.b)("strong",{parentName:"li"},"Process-level"),": Use global variables."),Object(o.b)("li",{parentName:"ol"},Object(o.b)("strong",{parentName:"li"},"App-level"),": Use ",Object(o.b)("inlineCode",{parentName:"li"},"q.app.foo = 'bar'")," to save; access ",Object(o.b)("inlineCode",{parentName:"li"},"q.app.foo")," to read it back again."),Object(o.b)("li",{parentName:"ol"},Object(o.b)("strong",{parentName:"li"},"User-level"),": Use ",Object(o.b)("inlineCode",{parentName:"li"},"q.user.foo = 'bar'")," to save; access ",Object(o.b)("inlineCode",{parentName:"li"},"q.user.foo")," to read it back again."),Object(o.b)("li",{parentName:"ol"},Object(o.b)("strong",{parentName:"li"},"Client-level"),": Use ",Object(o.b)("inlineCode",{parentName:"li"},"q.client.foo = 'bar'")," to save; access ",Object(o.b)("inlineCode",{parentName:"li"},"q.client.foo")," to read it back again.")),Object(o.b)("p",null,"Here, ",Object(o.b)("em",{parentName:"p"},"Client")," refers to a distinct tab in a browser."),Object(o.b)("p",null,"If you want to rely on the old behavior of preserving ",Object(o.b)("inlineCode",{parentName:"p"},"q.args")," for the lifetime of the application, copy ",Object(o.b)("inlineCode",{parentName:"p"},"q.args")," to ",Object(o.b)("inlineCode",{parentName:"p"},"q.client")," like this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import copy_expando\n\ncopy_expando(q.args, q.client, exclude_keys=['back2', 'select_target', 'restart'])\n")),Object(o.b)("h4",{id:"changed-no-need-to-json-serialize-values-to-preserve-them-between-requests"},"Changed: No need to JSON-serialize values to preserve them between requests."),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"q.args.foo=")," only supported JSON-serialized values. No such restrictions exist for the ",Object(o.b)("inlineCode",{parentName:"p"},"q.app"),", ",Object(o.b)("inlineCode",{parentName:"p"},"q.user")," and ",Object(o.b)("inlineCode",{parentName:"p"},"q.client")," containers. You could, for example, load a Pandas dataframe and set ",Object(o.b)("inlineCode",{parentName:"p"},"q.user.df = my_df"),", and the dataframe will be accessible across requests for the lifetime of the app."))}p.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/0fd1debb.be1ccbf3.js b/docs/0fd1debb.be1ccbf3.js
deleted file mode 100644
index ab978c7e9a..0000000000
--- a/docs/0fd1debb.be1ccbf3.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{290:function(e,t,a){"use strict";a.d(t,"a",(function(){return s})),a.d(t,"b",(function(){return m}));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 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 c(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function l(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=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<o;b++)i[b]=a[b];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,a)}d.displayName="MDXCreateElement"},62:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return i})),a.d(t,"metadata",(function(){return c})),a.d(t,"rightToc",(function(){return l})),a.d(t,"default",(function(){return p}));var n=a(2),r=a(6),o=(a(0),a(290)),i={id:"migrating-0",title:"Migrating from pre-alpha"},c={unversionedId:"migrating-0",id:"migrating-0",isDocsHomePage:!1,title:"Migrating from pre-alpha",description:"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.",source:"@site/docs/migrating-0.md",slug:"/migrating-0",permalink:"/wave/docs/migrating-0",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/migrating-0.md",version:"current",sidebar:"someSidebar",previous:{title:"Change Log",permalink:"/wave/docs/change-log"},next:{title:"Contributing",permalink:"/wave/docs/contributing"}},l=[{value:"What has changed?",id:"what-has-changed",children:[]},{value:"Breaking changes",id:"breaking-changes",children:[]}],b={rightToc:l};function p(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},b,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Before you begin, it is highly recommended that you ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases"}),"download")," a release and run the interactive ",Object(o.b)("inlineCode",{parentName:"p"},"tour.py")," that ships with the release to get a feel for what Wave programs look like in practice."),Object(o.b)("h2",{id:"what-has-changed"},"What has changed?"),Object(o.b)("p",null,"From an app-development perspective, the most important change is that Wave is more of a library rather than a framework."),Object(o.b)("p",null,"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 ",Object(o.b)("inlineCode",{parentName:"p"},"import h2o_wave")," and execute via:"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},"The command line: ",Object(o.b)("inlineCode",{parentName:"li"},"python3 my_script.py"),"."),Object(o.b)("li",{parentName:"ul"},"In the Python REPL."),Object(o.b)("li",{parentName:"ul"},"In a Jupyter notebook."),Object(o.b)("li",{parentName:"ul"},"In your favorite IDE (PyCharm, VSCode, etc.).")),Object(o.b)("p",null,"This also means that you can apply breakpoints and debug or step-through your program in your debugger of choice."),Object(o.b)("p",null,"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."),Object(o.b)("h2",{id:"breaking-changes"},"Breaking changes"),Object(o.b)("h4",{id:"removed-qapp-qui-annotations"},"Removed: ",Object(o.b)("inlineCode",{parentName:"h4"},"@Q.app"),", ",Object(o.b)("inlineCode",{parentName:"h4"},"@Q.ui")," annotations."),Object(o.b)("p",null,"Instead, define a ",Object(o.b)("inlineCode",{parentName:"p"},"async")," request-handling function, say ",Object(o.b)("inlineCode",{parentName:"p"},"main()"),", and pass that function to ",Object(o.b)("inlineCode",{parentName:"p"},"listen()"),", like this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen\n\nasync def main(q: Q):\n  pass\n\nlisten('/my/app/route', main)\n")),Object(o.b)("h4",{id:"removed-qwait-qshow-qfail-qexit"},"Removed: ",Object(o.b)("inlineCode",{parentName:"h4"},"q.wait()"),", ",Object(o.b)("inlineCode",{parentName:"h4"},"q.show()"),", ",Object(o.b)("inlineCode",{parentName:"h4"},"q.fail()"),", ",Object(o.b)("inlineCode",{parentName:"h4"},"q.exit()"),"."),Object(o.b)("p",null,"The above four methods were the primary mechanism to make changes to your app's UI. They have all been replaced with a single ",Object(o.b)("inlineCode",{parentName:"p"},"h2o_wave.core.Page.save()")," method."),Object(o.b)("p",null,"The new technique is:"),Object(o.b)("ol",null,Object(o.b)("li",{parentName:"ol"},"Access the page or card you want to modify."),Object(o.b)("li",{parentName:"ol"},"Modify the page or card."),Object(o.b)("li",{parentName:"ol"},"Call ",Object(o.b)("inlineCode",{parentName:"li"},"h2o_wave.core.Page.save()")," to save your changes and update the browser page.")),Object(o.b)("p",null,"Before:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"q.wait(\n  callback_function,\n  ui.text('Step 1'),\n  ui.button(name='next', label='Next'),\n)\n")),Object(o.b)("p",null,"After:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"q.page['my_card'] = ui.form_card(\n  # A card with its top-left corner at column 1, row 5; 2 columns wide and 4 rows high.\n  box='1 5 2 4',\n  items=[\n    ui.text('Step 1'),\n    ui.button(name='next', label='Next'),\n  ],\n)\nawait q.page.save()\n")),Object(o.b)("p",null,"Note that the ",Object(o.b)("em",{parentName:"p"},"After")," example requires a ",Object(o.b)("inlineCode",{parentName:"p"},"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."),Object(o.b)("p",null,"The same technique can be used to update the UI again (or display intermediate results):"),Object(o.b)("p",null,"Before:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"q.wait(\n  callback_function,\n  ui.text('Step 2'),\n  ui.button(name='next', label='Next'),\n)\n")),Object(o.b)("p",null,"After:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"# Don't have to recreate the entire form again; simply replace its items and save the page.\nq.page['my_card'].items = [\n  ui.text('Step 2'),\n  ui.button(name='next', label='Next'),\n]\nawait q.page.save()\n")),Object(o.b)("h4",{id:"removed-callback-functions-for-request-handling"},"Removed: callback functions for request-handling."),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"Instead, all requests are routed to a single function, and you can decide how to organize your application logic by branching on ",Object(o.b)("inlineCode",{parentName:"p"},"q.args.*"),"."),Object(o.b)("p",null,"Before:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"def step1(q: Q):\n  q.wait(\n    step2,\n    ui.text('Step 1'),\n    ui.button(name='next', label='Next'),\n  )\n\ndef step2(q: Q):\n  q.wait(\n    step3,\n    ui.text('Step 2'),\n    ui.button(name='next', label='Next'),\n  )\n\ndef step3(q: Q):\n  q.wait(\n    step4,\n    ui.text('Step 3'),\n    ui.button(name='next', label='Next'),\n  )\n")),Object(o.b)("p",null,"After:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"async def main(q: Q):\n  if q.args.step2:\n    items = [\n      ui.text('Step 2'),\n      ui.button(name='step3', label='Next'),\n    ]\n  elif q.args.step3:\n    items = [\n      ui.text('Step 3'),\n      ui.button(name='step4', label='Next'),\n    ]\n  else:\n    items = [\n      ui.text('Step 1'),\n      ui.button(name='step2', label='Next'),\n    ]\n\n  q.page['my_card'].items = items\n  await q.page.save()\n\nlisten('/my/app/route', main)\n")),Object(o.b)("h4",{id:"removed-qdashboard-and-qnotebook"},"Removed: ",Object(o.b)("inlineCode",{parentName:"h4"},"q.dashboard()")," and ",Object(o.b)("inlineCode",{parentName:"h4"},"q.notebook()"),"."),Object(o.b)("p",null,"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 ",Object(o.b)("inlineCode",{parentName:"p"},"ui.*_card()")," APIs. Also see the ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"#dashboard"}),"dashboard"),", ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"#layout-position"}),"layout")," and ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"#layout-size"}),"sizing")," examples to learn how to lay out several cards on a page."),Object(o.b)("p",null,"If you want to display a notebook-style vertical stack of markdown, html or other content, use ",Object(o.b)("inlineCode",{parentName:"p"},"h2o_wave.ui.text()")," and ",Object(o.b)("inlineCode",{parentName:"p"},"h2o_wave.ui.frame()")," contained inside a ",Object(o.b)("inlineCode",{parentName:"p"},"h2o_wave.ui.form_card()"),", like this:"),Object(o.b)("p",null,"Before:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"ui.notebook([ui.notebook_section([\n  ui.markdown_cell(content='Foo'),\n  ui.frame_cell(source=html_foo, height='200px'),\n  ui.markdown_cell(content='Bar'),\n  ui.frame_cell(source=html_bar, height='200px'),\n])])\n\n")),Object(o.b)("p",null,"After: Note the parameter name change ",Object(o.b)("inlineCode",{parentName:"p"},"frame_cell(source=...)")," to ",Object(o.b)("inlineCode",{parentName:"p"},"frame(content=...)"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"ui.form_card(\n  box='1 5 2 4',\n  items=[\n    ui.text(content='Foo'),\n    ui.frame(content=html_foo, height='200px'),\n    ui.text(content='Bar'),\n    ui.frame(content=html_bar, height='200px'),\n  ],\n)\n")),Object(o.b)("h4",{id:"changed-uibuttons-uiexpander-and-uitabs-accept-a-list-of-items-instead-of-var-args-args"},"Changed: ",Object(o.b)("inlineCode",{parentName:"h4"},"ui.buttons()"),", ",Object(o.b)("inlineCode",{parentName:"h4"},"ui.expander()")," and ",Object(o.b)("inlineCode",{parentName:"h4"},"ui.tabs()")," accept a ",Object(o.b)("inlineCode",{parentName:"h4"},"list")," of items instead of var args ",Object(o.b)("inlineCode",{parentName:"h4"},"*args"),"."),Object(o.b)("p",null,"Before:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"ui.buttons(ui.button(...), ui.button(...), ui.button(...))\n")),Object(o.b)("p",null,"After:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"ui.buttons([ui.button(...), ui.button(...), ui.button(...)]) # Note enclosing [ ]\n")),Object(o.b)("h4",{id:"changed-qupload-changed-to-qsiteupload"},"Changed: ",Object(o.b)("inlineCode",{parentName:"h4"},"q.upload()")," changed to ",Object(o.b)("inlineCode",{parentName:"h4"},"q.site.upload()"),"."),Object(o.b)("p",null,"The ",Object(o.b)("inlineCode",{parentName:"p"},"upload()")," method has been moved to the ",Object(o.b)("inlineCode",{parentName:"p"},"h2o_wave.core.Site")," instance, since each ",Object(o.b)("inlineCode",{parentName:"p"},"h2o_wave.core.Site")," represents a distinct server, and makes it possible to control multiple sites from a single Python script."),Object(o.b)("h4",{id:"changed-qargsfoo-changed-to-qclientfoo"},"Changed: ",Object(o.b)("inlineCode",{parentName:"h4"},"q.args.foo=")," changed to ",Object(o.b)("inlineCode",{parentName:"h4"},"q.client.foo="),"."),Object(o.b)("p",null,"Setting attributes on ",Object(o.b)("inlineCode",{parentName:"p"},"q.args")," (e.g. ",Object(o.b)("inlineCode",{parentName:"p"},"q.args.foo = 'bar'"),") is no longer preserved between requests. This was the primary mechanism employed previously to preserve data between requests."),Object(o.b)("p",null,"Instead, Wave provides 4 mechanisms for preserving data between requests:"),Object(o.b)("ol",null,Object(o.b)("li",{parentName:"ol"},Object(o.b)("strong",{parentName:"li"},"Process-level"),": Use global variables."),Object(o.b)("li",{parentName:"ol"},Object(o.b)("strong",{parentName:"li"},"App-level"),": Use ",Object(o.b)("inlineCode",{parentName:"li"},"q.app.foo = 'bar'")," to save; access ",Object(o.b)("inlineCode",{parentName:"li"},"q.app.foo")," to read it back again."),Object(o.b)("li",{parentName:"ol"},Object(o.b)("strong",{parentName:"li"},"User-level"),": Use ",Object(o.b)("inlineCode",{parentName:"li"},"q.user.foo = 'bar'")," to save; access ",Object(o.b)("inlineCode",{parentName:"li"},"q.user.foo")," to read it back again."),Object(o.b)("li",{parentName:"ol"},Object(o.b)("strong",{parentName:"li"},"Client-level"),": Use ",Object(o.b)("inlineCode",{parentName:"li"},"q.client.foo = 'bar'")," to save; access ",Object(o.b)("inlineCode",{parentName:"li"},"q.client.foo")," to read it back again.")),Object(o.b)("p",null,"Here, ",Object(o.b)("em",{parentName:"p"},"Client")," refers to a distinct tab in a browser."),Object(o.b)("p",null,"If you want to rely on the old behavior of preserving ",Object(o.b)("inlineCode",{parentName:"p"},"q.args")," for the lifetime of the application, copy ",Object(o.b)("inlineCode",{parentName:"p"},"q.args")," to ",Object(o.b)("inlineCode",{parentName:"p"},"q.client")," like this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import copy_expando\n\ncopy_expando(q.args, q.client, exclude_keys=['back2', 'select_target', 'restart'])\n")),Object(o.b)("h4",{id:"changed-no-need-to-json-serialize-values-to-preserve-them-between-requests"},"Changed: No need to JSON-serialize values to preserve them between requests."),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"q.args.foo=")," only supported JSON-serialized values. No such restrictions exist for the ",Object(o.b)("inlineCode",{parentName:"p"},"q.app"),", ",Object(o.b)("inlineCode",{parentName:"p"},"q.user")," and ",Object(o.b)("inlineCode",{parentName:"p"},"q.client")," containers. You could, for example, load a Pandas dataframe and set ",Object(o.b)("inlineCode",{parentName:"p"},"q.user.df = my_df"),", and the dataframe will be accessible across requests for the lifetime of the app."))}p.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/1.d3a71930.js b/docs/1.4dafcaaf.js
similarity index 92%
rename from docs/1.d3a71930.js
rename to docs/1.4dafcaaf.js
index ee9ddb12fb..42193139d8 100644
--- a/docs/1.d3a71930.js
+++ b/docs/1.4dafcaaf.js
@@ -1 +1 @@
-(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<t.length;e++)t[e]&&(n=r(t[e]))&&(o&&(o+=" "),o+=n);else for(e in t)t[e]&&(o&&(o+=" "),o+=e);return o}e.a=function(){for(var t,e,n=0,o="";n<arguments.length;)(t=arguments[n++])&&(e=r(t))&&(o&&(o+=" "),o+=e);return o}},293:function(t,e,n){"use strict";var r=n(0),o=n.n(r),i=n(13),a=n(297),u=n(10);const c=Object(r.createContext)({collectLink:()=>{}});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);o<r.length;o++)e.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(t,r[o])&&(n[r[o]]=t[r[o]])}return n};e.a=function(t){var e,{isNavLink:n,to:l,href:p,activeClassName:d,"data-noBrokenLinkCheck":h}=t,y=f(t,["isNavLink","to","href","activeClassName","data-noBrokenLinkCheck"]);const{withBaseUrl:b}=Object(s.b)(),g=Object(r.useContext)(c),v=l||p,m=Object(a.a)(v),w=null==v?void 0:v.replace("pathname://",""),T=void 0!==w?(t=>t.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<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),F=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},W=function(t,e){var n={};for(var r in t)e.indexOf(r)>=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,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;")},$=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<r.length;o++){var i=r[o].toLowerCase();if(-1!==t.indexOf(i)&&n[i])return e.concat(n)}return e}),[])},X=function(t,e,n){var r={};return n.filter((function(e){return!!Array.isArray(e[t])||(void 0!==e[t]&&ot("Helmet: "+t+' should be of type "Array". Instead found type "'+U(e[t])+'"'),!1)})).map((function(e){return e[t]})).reverse().reduce((function(t,n){var o={};n.filter((function(t){for(var n=void 0,i=Object.keys(t),a=0;a<i.length;a++){var u=i[a],c=u.toLowerCase();-1===e.indexOf(c)||n===L&&"canonical"===t[n].toLowerCase()||c===L&&"stylesheet"===t[c].toLowerCase()||(n=c),-1===e.indexOf(u)||u!==E&&u!==O&&u!==S||(n=u)}if(!n||!t[n])return!1;var s=t[n].toLowerCase();return r[n]||(r[n]={}),o[n]||(o[n]={}),!r[n][s]&&(o[n][s]=!0,!0)})).reverse().forEach((function(e){return t.push(e)}));for(var i=Object.keys(o),a=0;a<i.length;a++){var u=i[a],c=b()({},r[u],o[u]);r[u]=c}return t}),[]).reverse()},Z=function(t,e){for(var n=t.length-1;n>=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<a.length;u++){var c=a[u],s=e[c]||"";n.getAttribute(c)!==s&&n.setAttribute(c,s),-1===o.indexOf(c)&&o.push(c);var f=i.indexOf(c);-1!==f&&i.splice(f,1)}for(var l=i.length-1;l>=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+">":"<"+t+' data-react-helmet="true">'+K(i,r)+"</"+t+">"}(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+">")}),"")}(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
+(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{293: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}},294: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<t.length;e++)t[e]&&(n=r(t[e]))&&(o&&(o+=" "),o+=n);else for(e in t)t[e]&&(o&&(o+=" "),o+=e);return o}e.a=function(){for(var t,e,n=0,o="";n<arguments.length;)(t=arguments[n++])&&(e=r(t))&&(o&&(o+=" "),o+=e);return o}},295:function(t,e,n){"use strict";var r=n(0),o=n.n(r),i=n(13),a=n(299),u=n(10);const c=Object(r.createContext)({collectLink:()=>{}});var s=n(296),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);o<r.length;o++)e.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(t,r[o])&&(n[r[o]]=t[r[o]])}return n};e.a=function(t){var e,{isNavLink:n,to:l,href:p,activeClassName:d,"data-noBrokenLinkCheck":h}=t,y=f(t,["isNavLink","to","href","activeClassName","data-noBrokenLinkCheck"]);const{withBaseUrl:b}=Object(s.b)(),g=Object(r.useContext)(c),v=l||p,m=Object(a.a)(v),w=null==v?void 0:v.replace("pathname://",""),T=void 0!==w?(t=>t.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}))}},296:function(t,e,n){"use strict";n.d(e,"b",(function(){return i})),n.d(e,"a",(function(){return a}));var r=n(293),o=n(299);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)}},298:function(t,e,n){"use strict";var r=n(0),o=n.n(r),i=n(486);e.a=function(t){return o.a.createElement(i.a,Object.assign({},t))}},299: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}))},301: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}))},302:function(t,e,n){try{t.exports=n(495)}catch(r){t.exports={}}},486: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(487),f=n.n(s),l=n(488),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<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),F=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},W=function(t,e){var n={};for(var r in t)e.indexOf(r)>=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,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;")},$=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<r.length;o++){var i=r[o].toLowerCase();if(-1!==t.indexOf(i)&&n[i])return e.concat(n)}return e}),[])},X=function(t,e,n){var r={};return n.filter((function(e){return!!Array.isArray(e[t])||(void 0!==e[t]&&ot("Helmet: "+t+' should be of type "Array". Instead found type "'+U(e[t])+'"'),!1)})).map((function(e){return e[t]})).reverse().reduce((function(t,n){var o={};n.filter((function(t){for(var n=void 0,i=Object.keys(t),a=0;a<i.length;a++){var u=i[a],c=u.toLowerCase();-1===e.indexOf(c)||n===L&&"canonical"===t[n].toLowerCase()||c===L&&"stylesheet"===t[c].toLowerCase()||(n=c),-1===e.indexOf(u)||u!==E&&u!==O&&u!==S||(n=u)}if(!n||!t[n])return!1;var s=t[n].toLowerCase();return r[n]||(r[n]={}),o[n]||(o[n]={}),!r[n][s]&&(o[n][s]=!0,!0)})).reverse().forEach((function(e){return t.push(e)}));for(var i=Object.keys(o),a=0;a<i.length;a++){var u=i[a],c=b()({},r[u],o[u]);r[u]=c}return t}),[]).reverse()},Z=function(t,e){for(var n=t.length-1;n>=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<a.length;u++){var c=a[u],s=e[c]||"";n.getAttribute(c)!==s&&n.setAttribute(c,s),-1===o.indexOf(c)&&o.push(c);var f=i.indexOf(c);-1!==f&&i.splice(f,1)}for(var l=i.length-1;l>=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+">":"<"+t+' data-react-helmet="true">'+K(i,r)+"</"+t+">"}(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+">")}),"")}(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))},487: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}}},488: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}}},495: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(301),o=n(496),i=n(497),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)}},496: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(293);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}},497: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(301);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.aa8c1123.js b/docs/10172759.8473a602.js
similarity index 97%
rename from docs/10172759.aa8c1123.js
rename to docs/10172759.8473a602.js
index ac40c46b1b..8aaf2b8263 100644
--- a/docs/10172759.aa8c1123.js
+++ b/docs/10172759.8473a602.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{290: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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;l++)i[l]=n[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},304:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"},63:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return u}));var r=n(2),a=n(6),o=(n(0),n(290)),i={title:"Form / Label"},p={unversionedId:"examples/label",id:"examples/label",isDocsHomePage:!1,title:"Form / Label",description:"Use labels to give a name to a component or a group of components in a form.",source:"@site/docs/examples/label.md",slug:"/examples/label",permalink:"/wave/docs/examples/label",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/label.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Text / Sizes",permalink:"/wave/docs/examples/text-sizes"},next:{title:"Form / Link",permalink:"/wave/docs/examples/link"}},c=[],l={rightToc:c};function u(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use labels to give a name to a component or a group of components in a form."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(304).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from 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.label(label='Standard Label'),\n        ui.label(label='Required Label', required=True),\n        ui.label(label='Disabled Label', disabled=True),\n    ]\n)\npage.save()\n")))}u.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{292: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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;l++)i[l]=n[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},306:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"},64:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return u}));var r=n(2),a=n(6),o=(n(0),n(292)),i={title:"Form / Label"},p={unversionedId:"examples/label",id:"examples/label",isDocsHomePage:!1,title:"Form / Label",description:"Use labels to give a name to a component or a group of components in a form.",source:"@site/docs/examples/label.md",slug:"/examples/label",permalink:"/wave/docs/examples/label",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/label.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Text / Sizes",permalink:"/wave/docs/examples/text-sizes"},next:{title:"Form / Link",permalink:"/wave/docs/examples/link"}},c=[],l={rightToc:c};function u(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use labels to give a name to a component or a group of components in a form."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(306).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from 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.label(label='Standard Label'),\n        ui.label(label='Required Label', required=True),\n        ui.label(label='Disabled Label', disabled=True),\n    ]\n)\npage.save()\n")))}u.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/109e456e.7c99ebff.js b/docs/109e456e.d3998c59.js
similarity index 92%
rename from docs/109e456e.7c99ebff.js
rename to docs/109e456e.d3998c59.js
index 9133dadef7..110577cc6a 100644
--- a/docs/109e456e.7c99ebff.js
+++ b/docs/109e456e.d3998c59.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return b}));var n=r(0),o=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 l(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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=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<a;c++)l[c]=r[c];return o.a.createElement.apply(null,l)}return o.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},305:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-bokeh-0e17ac43f3cdff49e9cb5ff21d8c8214.png"},64:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return l})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return p})),r.d(t,"default",(function(){return s}));var n=r(2),o=r(6),a=(r(0),r(290)),l={title:"Plot / Bokeh"},i={unversionedId:"examples/plot-bokeh",id:"examples/plot-bokeh",isDocsHomePage:!1,title:"Plot / Bokeh",description:"Use Bokeh to create plots.",source:"@site/docs/examples/plot-bokeh.md",slug:"/examples/plot-bokeh",permalink:"/wave/docs/examples/plot-bokeh",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-bokeh.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Altair",permalink:"/wave/docs/examples/plot-altair"},next:{title:"Plot / Matplotlib",permalink:"/wave/docs/examples/plot-matplotlib"}},p=[],c={rightToc:p};function s(e){var t=e.components,l=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},c,l,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use Bokeh to create plots."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(305).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),'import numpy as np\nfrom bokeh.models import HoverTool\nfrom bokeh.plotting import figure\nfrom bokeh.resources import CDN\nfrom bokeh.embed import file_html\n\nfrom h2o_wave import site, ui\n\nn = 500\nx = 2 + 2 * np.random.standard_normal(n)\ny = 2 + 2 * np.random.standard_normal(n)\np = figure(\n    match_aspect=True,\n    tools="wheel_zoom,reset",\n    background_fill_color=\'#440154\'\n)\np.grid.visible = False\nr, bins = p.hexbin(x, y, size=0.5, hover_color="pink", hover_alpha=0.8)\np.circle(x, y, color="white", size=1)\np.add_tools(HoverTool(\n    tooltips=[("count", "@c"), ("(q,r)", "(@q, @r)")],\n    mode="mouse",\n    point_policy="follow_mouse",\n    renderers=[r]\n))\n\n# Export html for our frame card\nhtml = file_html(p, CDN, "plot")\n\npage = site[\'/demo\']\npage[\'example\'] = ui.frame_card(\n    box=\'1 1 5 8\',\n    title=\'Hexbin for 500 points\',\n    content=html,\n)\npage.save()\n')))}s.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{292:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return b}));var n=r(0),o=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 l(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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=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<a;c++)l[c]=r[c];return o.a.createElement.apply(null,l)}return o.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},307:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-bokeh-0e17ac43f3cdff49e9cb5ff21d8c8214.png"},65:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return l})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return p})),r.d(t,"default",(function(){return s}));var n=r(2),o=r(6),a=(r(0),r(292)),l={title:"Plot / Bokeh"},i={unversionedId:"examples/plot-bokeh",id:"examples/plot-bokeh",isDocsHomePage:!1,title:"Plot / Bokeh",description:"Use Bokeh to create plots.",source:"@site/docs/examples/plot-bokeh.md",slug:"/examples/plot-bokeh",permalink:"/wave/docs/examples/plot-bokeh",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-bokeh.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Altair",permalink:"/wave/docs/examples/plot-altair"},next:{title:"Plot / Matplotlib",permalink:"/wave/docs/examples/plot-matplotlib"}},p=[],c={rightToc:p};function s(e){var t=e.components,l=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},c,l,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use Bokeh to create plots."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(307).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),'import numpy as np\nfrom bokeh.models import HoverTool\nfrom bokeh.plotting import figure\nfrom bokeh.resources import CDN\nfrom bokeh.embed import file_html\n\nfrom h2o_wave import site, ui\n\nn = 500\nx = 2 + 2 * np.random.standard_normal(n)\ny = 2 + 2 * np.random.standard_normal(n)\np = figure(\n    match_aspect=True,\n    tools="wheel_zoom,reset",\n    background_fill_color=\'#440154\'\n)\np.grid.visible = False\nr, bins = p.hexbin(x, y, size=0.5, hover_color="pink", hover_alpha=0.8)\np.circle(x, y, color="white", size=1)\np.add_tools(HoverTool(\n    tooltips=[("count", "@c"), ("(q,r)", "(@q, @r)")],\n    mode="mouse",\n    point_policy="follow_mouse",\n    renderers=[r]\n))\n\n# Export html for our frame card\nhtml = file_html(p, CDN, "plot")\n\npage = site[\'/demo\']\npage[\'example\'] = ui.frame_card(\n    box=\'1 1 5 8\',\n    title=\'Hexbin for 500 points\',\n    content=html,\n)\npage.save()\n')))}s.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/11e3ce2c.138ecca1.js b/docs/11e3ce2c.37112f66.js
similarity index 98%
rename from docs/11e3ce2c.138ecca1.js
rename to docs/11e3ce2c.37112f66.js
index 60eac226b0..8d1e58a980 100644
--- a/docs/11e3ce2c.138ecca1.js
+++ b/docs/11e3ce2c.37112f66.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{290:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return v}));var a=n(0),r=n.n(a);function i(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 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=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<i;s++)o[s]=n[s];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},306:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"},65:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return l})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return p}));var a=n(2),r=n(6),i=(n(0),n(290)),o={title:"Stat / Gauge / Tall"},l={unversionedId:"examples/stat-tall-gauge",id:"examples/stat-tall-gauge",isDocsHomePage:!1,title:"Stat / Gauge / Tall",description:"Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.",source:"@site/docs/examples/stat-tall-gauge.md",slug:"/examples/stat-tall-gauge",permalink:"/wave/docs/examples/stat-tall-gauge",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-tall-gauge.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Gauge / Wide",permalink:"/wave/docs/examples/stat-wide-gauge"},next:{title:"Stat / Bar / Wide",permalink:"/wave/docs/examples/stat-wide-bar"}},c=[],s={rightToc:c};function p(e){var t=e.components,o=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(a.a)({},s,o,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+n(306).default+")"}}),Object(i.b)("pre",null,Object(i.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.tall_gauge_stat_card(\n    box='1 1 1 2',\n    title=fake.cryptocurrency_name(),\n    value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    aux_value='={{intl bar style=\"percent\" minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    plot_color='$red',\n    progress=pc,\n    data=dict(foo=val, bar=pc),\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}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{292:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return v}));var a=n(0),r=n.n(a);function i(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 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=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<i;s++)o[s]=n[s];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},308:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"},66:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return l})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return p}));var a=n(2),r=n(6),i=(n(0),n(292)),o={title:"Stat / Gauge / Tall"},l={unversionedId:"examples/stat-tall-gauge",id:"examples/stat-tall-gauge",isDocsHomePage:!1,title:"Stat / Gauge / Tall",description:"Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.",source:"@site/docs/examples/stat-tall-gauge.md",slug:"/examples/stat-tall-gauge",permalink:"/wave/docs/examples/stat-tall-gauge",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-tall-gauge.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Gauge / Wide",permalink:"/wave/docs/examples/stat-wide-gauge"},next:{title:"Stat / Bar / Wide",permalink:"/wave/docs/examples/stat-wide-bar"}},c=[],s={rightToc:c};function p(e){var t=e.components,o=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(a.a)({},s,o,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+n(308).default+")"}}),Object(i.b)("pre",null,Object(i.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.tall_gauge_stat_card(\n    box='1 1 1 2',\n    title=fake.cryptocurrency_name(),\n    value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    aux_value='={{intl bar style=\"percent\" minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    plot_color='$red',\n    progress=pc,\n    data=dict(foo=val, bar=pc),\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}}]);
\ No newline at end of file
diff --git a/docs/121dd878.095d5908.js b/docs/121dd878.095d5908.js
deleted file mode 100644
index 4fe9a6e559..0000000000
--- a/docs/121dd878.095d5908.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{66:function(a){a.exports=JSON.parse('{"facebook":{"allTagsPath":"/wave/blog/tags","slug":"facebook","name":"facebook","count":1,"permalink":"/wave/blog/tags/facebook"},"hello":{"allTagsPath":"/wave/blog/tags","slug":"hello","name":"hello","count":2,"permalink":"/wave/blog/tags/hello"},"docusaurus":{"allTagsPath":"/wave/blog/tags","slug":"docusaurus","name":"docusaurus","count":3,"permalink":"/wave/blog/tags/docusaurus"},"hola":{"allTagsPath":"/wave/blog/tags","slug":"hola","name":"hola","count":1,"permalink":"/wave/blog/tags/hola"}}')}}]);
\ No newline at end of file
diff --git a/docs/121dd878.8a593ca4.js b/docs/121dd878.8a593ca4.js
new file mode 100644
index 0000000000..471c13d11b
--- /dev/null
+++ b/docs/121dd878.8a593ca4.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{67:function(e){e.exports=JSON.parse('{"release":{"allTagsPath":"/wave/blog/tags","slug":"release","name":"release","count":1,"permalink":"/wave/blog/tags/release"}}')}}]);
\ No newline at end of file
diff --git a/docs/126e0b0e.12591c6d.js b/docs/126e0b0e.d1ed6129.js
similarity index 92%
rename from docs/126e0b0e.12591c6d.js
rename to docs/126e0b0e.d1ed6129.js
index c199484e9a..7216af21d2 100644
--- a/docs/126e0b0e.12591c6d.js
+++ b/docs/126e0b0e.d1ed6129.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return f}));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 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 c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;l++)i[l]=r[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},307:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-area-range-0663c734a05c77b333b1cfdca966324f.png"},67: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 p})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(290)),i={title:"Plot / Area / Range"},c={unversionedId:"examples/plot-area-range",id:"examples/plot-area-range",isDocsHomePage:!1,title:"Plot / Area / Range",description:"Make an area plot representing a range (band) of values.",source:"@site/docs/examples/plot-area-range.md",slug:"/examples/plot-area-range",permalink:"/wave/docs/examples/plot-area-range",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-range.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Area / Negative",permalink:"/wave/docs/examples/plot-area-negative"},next:{title:"Plot / Area / Smooth",permalink:"/wave/docs/examples/plot-area-smooth"}},p=[],l={rightToc:p};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make an area plot representing a range (band) of values."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(307).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"import random\n\nfrom 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='Area, range',\n    data=data('date low high', n),\n    plot=ui.plot([ui.mark(type='area', x_scale='time', x='=date', y0='=low', y='=high')])\n))\nv.data = [(t, x - random.randint(3, 8), x + random.randint(3, 8)) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{292:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return f}));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 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 c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;l++)i[l]=r[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},309:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-area-range-0663c734a05c77b333b1cfdca966324f.png"},68: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 p})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(292)),i={title:"Plot / Area / Range"},c={unversionedId:"examples/plot-area-range",id:"examples/plot-area-range",isDocsHomePage:!1,title:"Plot / Area / Range",description:"Make an area plot representing a range (band) of values.",source:"@site/docs/examples/plot-area-range.md",slug:"/examples/plot-area-range",permalink:"/wave/docs/examples/plot-area-range",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-range.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Area / Negative",permalink:"/wave/docs/examples/plot-area-negative"},next:{title:"Plot / Area / Smooth",permalink:"/wave/docs/examples/plot-area-smooth"}},p=[],l={rightToc:p};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make an area plot representing a range (band) of values."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(309).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"import random\n\nfrom 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='Area, range',\n    data=data('date low high', n),\n    plot=ui.plot([ui.mark(type='area', x_scale='time', x='=date', y0='=low', y='=high')])\n))\nv.data = [(t, x - random.randint(3, 8), x + random.randint(3, 8)) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/12e676cf.f3752766.js b/docs/12e676cf.1dfd58b3.js
similarity index 90%
rename from docs/12e676cf.f3752766.js
rename to docs/12e676cf.1dfd58b3.js
index 190706e66f..d640ebe56d 100644
--- a/docs/12e676cf.f3752766.js
+++ b/docs/12e676cf.1dfd58b3.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{290:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},308:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-interval-95ba708d52bd4b0bda18da55cfd578e0.png"},68:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return u}));var r=n(2),a=n(6),o=(n(0),n(290)),i={title:"Plot / Interval"},c={unversionedId:"examples/plot-interval",id:"examples/plot-interval",isDocsHomePage:!1,title:"Plot / Interval",description:"Make a column plot.",source:"@site/docs/examples/plot-interval.md",slug:"/examples/plot-interval",permalink:"/wave/docs/examples/plot-interval",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Point / Custom",permalink:"/wave/docs/examples/plot-point-custom"},next:{title:"Plot / Interval / Transpose",permalink:"/wave/docs/examples/plot-interval-transpose"}},l=[],p={rightToc:l};function u(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a column plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(308).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 20\nf = FakeCategoricalSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Interval',\n    data=data('product price', n),\n    plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)])\n))\nv.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}u.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{292:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},310:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-interval-95ba708d52bd4b0bda18da55cfd578e0.png"},69:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return u}));var r=n(2),a=n(6),o=(n(0),n(292)),i={title:"Plot / Interval"},c={unversionedId:"examples/plot-interval",id:"examples/plot-interval",isDocsHomePage:!1,title:"Plot / Interval",description:"Make a column plot.",source:"@site/docs/examples/plot-interval.md",slug:"/examples/plot-interval",permalink:"/wave/docs/examples/plot-interval",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Point / Custom",permalink:"/wave/docs/examples/plot-point-custom"},next:{title:"Plot / Interval / Transpose",permalink:"/wave/docs/examples/plot-interval-transpose"}},l=[],p={rightToc:l};function u(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a column plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(310).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 20\nf = FakeCategoricalSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Interval',\n    data=data('product price', n),\n    plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)])\n))\nv.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}u.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/135cee2a.8e85b4f9.js b/docs/135cee2a.4fa48724.js
similarity index 50%
rename from docs/135cee2a.8e85b4f9.js
rename to docs/135cee2a.4fa48724.js
index 2410144c77..50150575c7 100644
--- a/docs/135cee2a.8e85b4f9.js
+++ b/docs/135cee2a.4fa48724.js
@@ -1 +1 @@
-(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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?s(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):s(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=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<o;c++)s[c]=t[c];return a.a.createElement.apply(null,s)}return a.a.createElement.apply(null,t)}f.displayName="MDXCreateElement"},309:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/table-f4d13c60963beb31475a54192f62b47d.png"},69:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return s})),t.d(n,"metadata",(function(){return i})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return u}));var r=t(2),a=t(6),o=(t(0),t(290)),s={title:"Table"},i={unversionedId:"examples/table",id:"examples/table",isDocsHomePage:!1,title:"Table",description:"Use a table to display tabular data.",source:"@site/docs/examples/table.md",slug:"/examples/table",permalink:"/wave/docs/examples/table",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/table.md",version:"current",sidebar:"someSidebar",previous:{title:"Table / Markdown",permalink:"/wave/docs/examples/table-markdown"},next:{title:"Table / Sort",permalink:"/wave/docs/examples/table-sort"}},l=[],c={rightToc:l};function u(e){var n=e.components,s=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},c,s,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use a table to display tabular data."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(309).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import random\nfrom faker import Faker\nfrom h2o_wave import Q, listen, ui\n\nfake = Faker()\n\n_id = 0\n\n\nclass Issue:\n    def __init__(self, text: str, status: str, progress: float, icon: str, notifications: str):\n        global _id\n        _id += 1\n        self.id = f'I{_id}'\n        self.text = text\n        self.status = status\n        self.views = 0\n        self.progress = progress\n        self.icon = icon\n        self.notifications = notifications\n\n\n# Create some issues\nissues = [\n    Issue(\n        text=fake.sentence(),\n        status=('Closed' if i % 2 == 0 else 'Open'),\n        progress=random.random(),\n        icon=('BoxCheckmarkSolid' if random.random() > 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([[18],{292: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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?s(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):s(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=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)}},m=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),m=r,f=p["".concat(s,".").concat(m)]||p[m]||b[m]||o;return t?a.a.createElement(f,i(i({ref:n},c),{},{components:t})):a.a.createElement(f,i({ref:n},c))}));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 c=2;c<o;c++)s[c]=t[c];return a.a.createElement.apply(null,s)}return a.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},311:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/table-f4d13c60963beb31475a54192f62b47d.png"},70:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return s})),t.d(n,"metadata",(function(){return i})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return u}));var r=t(2),a=t(6),o=(t(0),t(292)),s={title:"Table"},i={unversionedId:"examples/table",id:"examples/table",isDocsHomePage:!1,title:"Table",description:"Use a table to display tabular data.",source:"@site/docs/examples/table.md",slug:"/examples/table",permalink:"/wave/docs/examples/table",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/table.md",version:"current",sidebar:"someSidebar",previous:{title:"Table / Markdown",permalink:"/wave/docs/examples/table-markdown"},next:{title:"Table / Sort",permalink:"/wave/docs/examples/table-sort"}},l=[],c={rightToc:l};function u(e){var n=e.components,s=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},c,s,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use a table to display tabular data."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(311).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import random\nfrom faker import Faker\nfrom h2o_wave import main, app, Q, ui\n\nfake = Faker()\n\n_id = 0\n\n\nclass Issue:\n    def __init__(self, text: str, status: str, progress: float, icon: str, notifications: str):\n        global _id\n        _id += 1\n        self.id = f'I{_id}'\n        self.text = text\n        self.status = status\n        self.views = 0\n        self.progress = progress\n        self.icon = icon\n        self.notifications = notifications\n\n\n# Create some issues\nissues = [\n    Issue(\n        text=fake.sentence(),\n        status=('Closed' if i % 2 == 0 else 'Open'),\n        progress=random.random(),\n        icon=('BoxCheckmarkSolid' if random.random() > 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\n@app('/demo')\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")))}u.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/1375ade1.05444f9b.js b/docs/1375ade1.05444f9b.js
new file mode 100644
index 0000000000..c043e2f8c0
--- /dev/null
+++ b/docs/1375ade1.05444f9b.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{292: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 o(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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n,a,i={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var c=i.a.createContext({}),s=function(e){var t=i.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},b=function(e){var t=s(e.components);return i.a.createElement(c.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,o=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),b=s(n),d=a,m=b["".concat(o,".").concat(d)]||b[d]||u[d]||r;return n?i.a.createElement(m,l(l({ref:t},c),{},{components:n})):i.a.createElement(m,l({ref:t},c))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,o=new Array(r);o[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:a,o[1]=l;for(var c=2;c<r;c++)o[c]=n[c];return i.a.createElement.apply(null,o)}return i.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},71:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return l})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return s}));var a=n(2),i=n(6),r=(n(0),n(292)),o={title:"Developer Guide",slug:"/enterprise/developer-guide"},l={unversionedId:"enterprise/developer-guide",id:"enterprise/developer-guide",isDocsHomePage:!1,title:"Developer Guide",description:"App Bundle Structure",source:"@site/docs/enterprise/developer-guide.md",slug:"/enterprise/developer-guide",permalink:"/wave/docs/enterprise/developer-guide",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/enterprise/developer-guide.md",version:"current",sidebar:"someSidebar",previous:{title:"Basic Concepts",permalink:"/wave/docs/enterprise/basic-concepts"},next:{title:"Gallery",permalink:"/wave/docs/examples"}},p=[{value:"App Bundle Structure",id:"app-bundle-structure",children:[{value:"app.toml",id:"apptoml",children:[]}]},{value:"Runtime Environment",id:"runtime-environment",children:[]},{value:"CLI",id:"cli",children:[{value:"Configuring the CLI",id:"configuring-the-cli",children:[]},{value:"Listing existing apps",id:"listing-existing-apps",children:[]},{value:"Launching existing apps",id:"launching-existing-apps",children:[]},{value:"Publishing an app for others to see and launch",id:"publishing-an-app-for-others-to-see-and-launch",children:[]},{value:"Running an app under development",id:"running-an-app-under-development",children:[]},{value:"Getting the logs of a running app instance",id:"getting-the-logs-of-a-running-app-instance",children:[]},{value:"Running the app in cloud-like environment locally",id:"running-the-app-in-cloud-like-environment-locally",children:[]},{value:"Updating App Visibility",id:"updating-app-visibility",children:[]},{value:"Updating Instance Visibility",id:"updating-instance-visibility",children:[]},{value:"Managing App Tags",id:"managing-app-tags",children:[]}]},{value:"How-To",id:"how-to",children:[{value:"Updating App To a Newer Version",id:"updating-app-to-a-newer-version",children:[]},{value:"Utilizing Secrets",id:"utilizing-secrets",children:[]},{value:"App Route",id:"app-route",children:[]}]}],c={rightToc:p};function s(e){var t=e.components,n=Object(i.a)(e,["components"]);return Object(r.b)("wrapper",Object(a.a)({},c,n,{components:t,mdxType:"MDXLayout"}),Object(r.b)("h2",{id:"app-bundle-structure"},"App Bundle Structure"),Object(r.b)("p",null,"Each app has to be bundled as a zip archive (commonly used with suffix ",Object(r.b)("inlineCode",{parentName:"p"},".wave"),")\nconsisting of:"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"app.toml")," - the platform configuration file"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"static/")," - static asset directory, including the app icon (a png file starting with ",Object(r.b)("inlineCode",{parentName:"li"},"icon"),")\nand screenshots (files starting with ",Object(r.b)("inlineCode",{parentName:"li"},"screenshot"),")"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"requirements.txt")," - pip-managed dependencies of the app (can contain references to ",Object(r.b)("inlineCode",{parentName:"li"},".whl")," files\nincluded in the ",Object(r.b)("inlineCode",{parentName:"li"},".wave")," using paths relative to the archive root)"),Object(r.b)("li",{parentName:"ul"},"app source code")),Object(r.b)("p",null,"You can quickly create a ",Object(r.b)("inlineCode",{parentName:"p"},".wave")," archive by running ",Object(r.b)("inlineCode",{parentName:"p"},"h2o bundle")," in your app git repository\n(see the ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"#cli"}),"CLI")," section)"),Object(r.b)("h3",{id:"apptoml"},"app.toml"),Object(r.b)("p",null,"Each app archive has to contain a ",Object(r.b)("inlineCode",{parentName:"p"},"app.toml")," configuration file in the ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"https://toml.io/en/"}),"TOML")," format,\nplaced in the root of the ",Object(r.b)("inlineCode",{parentName:"p"},".wave")," archive, example:"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-toml"}),'[App]\nName = "ai.h2o.wave.my-app"\nVersion = "0.0.1"\nTitle = "My awesome app"\nDescription = "This is my awesome app"\nCategory = "Other"\nKeywords = ["awesome"]\n\n[Runtime]\nModule = "app.run"\nVolumeMount = "/data"\nVolumeSize = "1Gi"\nResourceVolumeSize = "2Gi"\nMemoryLimit = "500Mi"\nMemoryReservation = "400Mi"\n\n[[Env]]\nName = "ENVIRONMENT_VARIABLE_NAME"\nSecret = "SecretName"\nSecretKey = "SecretKeyName"\n\n[[Env]]\nName = "ANOTHER_ENVIRONMENT_VARIABLE_NAME"\nValue = "some value"\n\n[[File]]\nPath = "some/path.file"\nSecret = "FileSecretName"\nSecretKey = "FileSecretKeyName"\n\n[[File]]\nPath = "/another/path.file"\nValue = \'\'\'\nsome\nstring\n\'\'\'\n')),Object(r.b)("p",null,Object(r.b)("strong",{parentName:"p"},"Required attributes"),":"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"App"),Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Name")," - a machine-oriented unique identifier of the app (links different app versions together)"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Version")," - a ",Object(r.b)("a",Object(a.a)({parentName:"li"},{href:"https://semver.org"}),"https://semver.org")," version of the app"))),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Runtime"),Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Module")," - the name of the main Python module of the app, i.e., the app should be started\nvia ",Object(r.b)("inlineCode",{parentName:"li"},"python3 -m $module_name"))))),Object(r.b)("p",null,Object(r.b)("strong",{parentName:"p"},"Optional attributes"),":"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"App"),Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Title")," - a human-oriented name of the app for presentation in UI/CLI; string"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Description")," - a multiline description of the app for presentation in UI/CLI; string"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Category")," - category for organizing apps into groups, string\n(UI recognizes ",Object(r.b)("inlineCode",{parentName:"li"},"All"),", ",Object(r.b)("inlineCode",{parentName:"li"},"Data Science"),", ",Object(r.b)("inlineCode",{parentName:"li"},"Financial Services"),", ",Object(r.b)("inlineCode",{parentName:"li"},"Healthcare"),", ",Object(r.b)("inlineCode",{parentName:"li"},"Insurance"),",\n",Object(r.b)("inlineCode",{parentName:"li"},"Manufacturing"),", ",Object(r.b)("inlineCode",{parentName:"li"},"Marketing"),", ",Object(r.b)("inlineCode",{parentName:"li"},"Retail"),", ",Object(r.b)("inlineCode",{parentName:"li"},"Sales"),", ",Object(r.b)("inlineCode",{parentName:"li"},"Telecommunications"),", and ",Object(r.b)("inlineCode",{parentName:"li"},"Other"),")"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Keywords")," - keywords for search in the UI/CLI, list of strings"))),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Runtime"),Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"VolumeMount")," and ",Object(r.b)("inlineCode",{parentName:"li"},"VolumeSize")," - request for a volume to persist app instance data across\nrestarts, ",Object(r.b)("inlineCode",{parentName:"li"},"VolumeMount")," has to be an absolute path, ",Object(r.b)("inlineCode",{parentName:"li"},"VolumeSize")," needs to conform to the\n",Object(r.b)("a",Object(a.a)({parentName:"li"},{href:"https://github.com/fabric8io/kansible/blob/master/vendor/k8s.io/kubernetes/docs/design/resources.md#resource-quantities"}),"k8s resource model"),"."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"ResourceVolumeSize")," - request for a volume to persist internal app resources (such as Python venv)\nacross restarts, only recommended for production-quality apps with sizeable resources due\nto cluster node limits, needs to conform to the\n",Object(r.b)("a",Object(a.a)({parentName:"li"},{href:"https://github.com/fabric8io/kansible/blob/master/vendor/k8s.io/kubernetes/docs/design/resources.md#resource-quantities"}),"k8s resource model"),"."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"MemoryLimit")," and ",Object(r.b)("inlineCode",{parentName:"li"},"MemoryReservation")," - memory requirements for an instance of the app\n(default to service-wide settings managed by Admins); be conservative with these limits;\n",Object(r.b)("inlineCode",{parentName:"li"},"MemoryLimit")," is a hard limit on the maximum amount of memory an instance can use before it is OOM-killed;\n",Object(r.b)("inlineCode",{parentName:"li"},"MemoryReservation")," is how much memory is required to schedule an instance of the app."))),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Env")," - request for a literal value/secret to be injected into an instance at startup-time as an Env variable;\nrepeated; see ",Object(r.b)("a",Object(a.a)({parentName:"li"},{href:"#utilizing-secrets"}),"Utilizing Secrets"),".",Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Name")," - name of the Env variable to the injected into the Python process;\nnames prefixed with ",Object(r.b)("inlineCode",{parentName:"li"},"H2O_CLOUD")," are disallowed."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Secret")," - name of the shared secret to use; each secret can contain multiple key-value pairs;\ncannot be used together with ",Object(r.b)("inlineCode",{parentName:"li"},"Value"),"."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"SecretKey")," - name of the key within the secret to use; cannot be used together with ",Object(r.b)("inlineCode",{parentName:"li"},"Value"),"."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Value")," - the literal value of the Env variable; cannot be used together with ",Object(r.b)("inlineCode",{parentName:"li"},"Secret"),"/",Object(r.b)("inlineCode",{parentName:"li"},"SecretKey"),"."))),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"File")," - request for a literal value/secret to be injected into an instance at startup-time as a file;\nrepeated; see ",Object(r.b)("a",Object(a.a)({parentName:"li"},{href:"#utilizing-secrets"}),"Utilizing Secrets"),".",Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Path")," - path to inject the file to; relative path means relative to the directory with the app code\nas determined by the platform; path dir cannot be ",Object(r.b)("inlineCode",{parentName:"li"},"/")," or ",Object(r.b)("inlineCode",{parentName:"li"},".")," (only subdirs are allowed);\npath dir has to be unique across all other ",Object(r.b)("inlineCode",{parentName:"li"},"File")," configurations; path dir ",Object(r.b)("inlineCode",{parentName:"li"},"/resources")," is\ndisallowed."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Secret")," - name of the shared secret to use; each secret can contain multiple key-value pairs;\ncannot be used together with ",Object(r.b)("inlineCode",{parentName:"li"},"Value"),"."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"SecretKey")," - name of the key within the secret to use; cannot be used together with ",Object(r.b)("inlineCode",{parentName:"li"},"Value"),"."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Value")," - the literal value of the file; cannot be used together with ",Object(r.b)("inlineCode",{parentName:"li"},"Secret"),"/",Object(r.b)("inlineCode",{parentName:"li"},"SecretKey"),".")))),Object(r.b)("h2",{id:"runtime-environment"},"Runtime Environment"),Object(r.b)("p",null,"The platform configures the app instance runtime environment, i.e., OS, OS dependencies, location of the app code/venv, etc."),Object(r.b)("p",null,"Developers can specify the pip-managed dependencies of the app via ",Object(r.b)("inlineCode",{parentName:"p"},"requirements.txt")," (can contain\nreferences to ",Object(r.b)("inlineCode",{parentName:"p"},".whl")," files included in the ",Object(r.b)("inlineCode",{parentName:"p"},".wave")," using paths relative to the archive root)"),Object(r.b)("p",null,"Developers can further customize the runtime environment by ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"#utilizing-secrets"}),"Utilizing Secrets"),"."),Object(r.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(r.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(r.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(r.b)("path",Object(a.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(a.a)({parentName:"div"},{className:"admonition-content"}),Object(r.b)("p",{parentName:"div"},"At this moment, the platform does not provide any provisions for developers to customize the OS,\nnative OS dependencies, Qd version, etc."),Object(r.b)("p",{parentName:"div"},"We are actively working on improving this."))),Object(r.b)("h2",{id:"cli"},"CLI"),Object(r.b)("p",null,"As a developer, you will need the ",Object(r.b)("inlineCode",{parentName:"p"},"h2o")," binary to interact with the platform."),Object(r.b)("h3",{id:"configuring-the-cli"},"Configuring the CLI"),Object(r.b)("p",null,"First you need to configure the CLI by running ",Object(r.b)("inlineCode",{parentName:"p"},"h2o config setup")," so that it knows how to talk\nto a particular platform deployment."),Object(r.b)("p",null,"Be aware, currently the CLI launches a browser to complete the user authentication, and due to this\nwe currently unable to support remote use of the CLI over SSH without provisions for X forwarding."),Object(r.b)("h3",{id:"listing-existing-apps"},"Listing existing apps"),Object(r.b)("p",null,"The ",Object(r.b)("inlineCode",{parentName:"p"},"h2o app list -a")," command will list all apps available for launch."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-sh"}),"$ h2o app list -a\nID                                    TITLE                        OWNER            CREATED CATEGORY      VISIBILITY    TAGS\nabc543210-0000-0000-0000-1234567890ab Peak 0.1.1                   user1@h2o.ai     18d     Healthcare    ALL_USERS     Beta\nbcd543210-1111-1111-1111-0123456789ab Tour 0.0.15-20200922162859   user2@h2o.ai     20d     Other         ALL_USERS\n...\n")),Object(r.b)("h3",{id:"launching-existing-apps"},"Launching existing apps"),Object(r.b)("p",null,"To launch an app, the ",Object(r.b)("inlineCode",{parentName:"p"},"h2o app run <appId>")," 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(a.a)({parentName:"pre"},{className:"language-sh"}),"$ h2o app run bcd543210-1111-1111-1111-0123456789ab\nID  22222222-3333-4444-5555-666666666666\nURL https://22222222-3333-4444-5555-666666666666.wave.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"},"h2o bundle import")," in your app git repository. This will automatically package your\ncurrent directory into a ",Object(r.b)("inlineCode",{parentName:"p"},".wave")," package and import it into the platform."),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"},"h2o app run"),"\nor the UI to launch the app."),Object(r.b)("p",null,"Note: the name-version combination from your ",Object(r.b)("inlineCode",{parentName:"p"},"app.toml")," has to be unique and the platform will reject\nthe request if such combination already exists. Therefore, you need to update the version in ",Object(r.b)("inlineCode",{parentName:"p"},"app.toml"),"\nbefore each run."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-sh"}),"$ h2o bundle import -v ALL_USERS\nID              bcd543210-1111-1111-1111-0123456789ab\nTitle           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\nDescription     Forecast of COVID-19 spread\nTags\n")),Object(r.b)("h3",{id:"running-an-app-under-development"},"Running an app under development"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"h2o bundle deploy")," in your app git repository. This will automatically package your\ncurrent directory into a ",Object(r.b)("inlineCode",{parentName:"p"},".wave")," package, import it into the platform, 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: the CLI 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(a.a)({parentName:"pre"},{className:"language-sh"}),"$ h2o bundle deploy\nID              bcd543210-1111-1111-1111-0123456789ab\nTitle           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\nDescription     Forecast of COVID-19 spread\nTags\nID  22222222-3333-4444-5555-666666666666\nURL https://22222222-3333-4444-5555-666666666666.wave.h2o.ai\n")),Object(r.b)("h3",{id:"getting-the-logs-of-a-running-app-instance"},"Getting the logs of a running app instance"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"h2o 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(a.a)({parentName:"pre"},{className:"language-sh"}),'$ h2o instance logs c22222222-3333-4444-5555-666666666666\n...\n2020/10/27 16:16:34 #\n2020/10/27 16:16:34 # \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n2020/10/27 16:16:34 # \u2502  \u250c    \u250c \u250c\u2500\u2500\u2510 \u250c  \u250c \u250c\u2500\u2500\u2510  \u2502 H2O Wave\n2020/10/27 16:16:34 # \u2502  \u2502 \u250c\u2500\u2500\u2518 \u2502\u2500\u2500\u2502 \u2502  \u2502 \u2514\u2510    \u2502 (version) (build)\n2020/10/27 16:16:34 # \u2502  \u2514\u2500\u2518    \u2518  \u2518 \u2514\u2500\u2500\u2518  \u2514\u2500\u2518  \u2502 \xa9 2020 H2O.ai, Inc.\n2020/10/27 16:16:34 # \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n2020/10/27 16:16:34 #\n2020/10/27 16:16:34 # {"address":":55555","t":"listen","webroot":"/wave/www"}\n2020/10/27 16:16:34 # {"host":"ws://127.0.0.1:55556","route":"/","t":"relay"}\n...\n')),Object(r.b)("h3",{id:"running-the-app-in-cloud-like-environment-locally"},"Running the app in cloud-like environment locally"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"h2o exec"),". This will bundle the app in a temporary ",Object(r.b)("inlineCode",{parentName:"p"},".wave")," and launch it locally\nusing our platform 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/<your main route>"),"."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-sh"}),'$ h2o exec\n{"level":"info","log_level":"debug","url":"file:///wave_bundle/q-peak.0.1.2.wave","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":"wave 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"},"h2o app update <appId> -v <visbility>")," 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"},"h2o instance update <instanceId> -v <visbility>")," 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)("h3",{id:"managing-app-tags"},"Managing App Tags"),Object(r.b)("p",null,"Tags are means of visually annotating apps in the platform (similar to\n",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"https://docs.github.com/en/free-pro-team@latest/github/managing-your-work-on-github/about-labels"}),"GitHub issue labels"),")."),Object(r.b)("p",null,"The ",Object(r.b)("inlineCode",{parentName:"p"},"h2o tag [assign, get, list, remove, update]")," commands let users see and, when authorized,\nmanage available app tags.\nApp tag configuration includes of name/title, RGB color, description, and ACLs.\nTags can only be assigned/removed/updated by user having a role (as determined by the auth provider)\npresent in the tag's ",Object(r.b)("inlineCode",{parentName:"p"},"Admin Roles")," list (empty means any user)."),Object(r.b)("p",null,"Currently, tags can only be created and deleted by platform admins."),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(a.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(a.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(a.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(a.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 the platform to apps, exposed as environment variables\nusing the ",Object(r.b)("inlineCode",{parentName:"p"},"[[Env]]")," section within the ",Object(r.b)("inlineCode",{parentName:"p"},"app.toml")," or as files using the ",Object(r.b)("inlineCode",{parentName:"p"},"[[File]]")," section."),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 or deployments outside the platform."),Object(r.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(r.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(r.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(r.b)("path",Object(a.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(a.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 the platform deploys each app with its own Wave server,\nwe advise that apps use ",Object(r.b)("inlineCode",{parentName:"p"},"/")," as their main route:"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-python"}),"@app('/')\nasync def serve(q: Q):\n    pass\n")))}s.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/1375ade1.83f02eb6.js b/docs/1375ade1.83f02eb6.js
deleted file mode 100644
index b6803b05d4..0000000000
--- a/docs/1375ade1.83f02eb6.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{290:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),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 o(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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n,a,i={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var c=i.a.createContext({}),b=function(e){var t=i.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=b(e.components);return i.a.createElement(c.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,o=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),s=b(n),d=a,m=s["".concat(o,".").concat(d)]||s[d]||u[d]||r;return n?i.a.createElement(m,l(l({ref:t},c),{},{components:n})):i.a.createElement(m,l({ref:t},c))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,o=new Array(r);o[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:a,o[1]=l;for(var c=2;c<r;c++)o[c]=n[c];return i.a.createElement.apply(null,o)}return i.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},70:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return l})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return b}));var a=n(2),i=n(6),r=(n(0),n(290)),o={title:"Developer Guide",slug:"/enterprise/developer-guide"},l={unversionedId:"enterprise/developer-guide",id:"enterprise/developer-guide",isDocsHomePage:!1,title:"Developer Guide",description:"App Bundle Structure",source:"@site/docs/enterprise/developer-guide.md",slug:"/enterprise/developer-guide",permalink:"/wave/docs/enterprise/developer-guide",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/enterprise/developer-guide.md",version:"current",sidebar:"someSidebar",previous:{title:"Basic Concepts",permalink:"/wave/docs/enterprise/basic-concepts"},next:{title:"Gallery",permalink:"/wave/docs/examples"}},p=[{value:"App Bundle Structure",id:"app-bundle-structure",children:[{value:"app.toml",id:"apptoml",children:[]}]},{value:"Runtime Environment",id:"runtime-environment",children:[]},{value:"CLI",id:"cli",children:[{value:"Configuring the CLI",id:"configuring-the-cli",children:[]},{value:"Listing existing apps",id:"listing-existing-apps",children:[]},{value:"Launching existing apps",id:"launching-existing-apps",children:[]},{value:"Publishing an app for others to see and launch",id:"publishing-an-app-for-others-to-see-and-launch",children:[]},{value:"Running an app under development",id:"running-an-app-under-development",children:[]},{value:"Getting the logs of a running app instance",id:"getting-the-logs-of-a-running-app-instance",children:[]},{value:"Running the app in cloud-like environment locally",id:"running-the-app-in-cloud-like-environment-locally",children:[]},{value:"Updating App Visibility",id:"updating-app-visibility",children:[]},{value:"Updating Instance Visibility",id:"updating-instance-visibility",children:[]}]},{value:"How-To",id:"how-to",children:[{value:"Updating App To a Newer Version",id:"updating-app-to-a-newer-version",children:[]},{value:"Utilizing Secrets",id:"utilizing-secrets",children:[]},{value:"App Route",id:"app-route",children:[]}]}],c={rightToc:p};function b(e){var t=e.components,n=Object(i.a)(e,["components"]);return Object(r.b)("wrapper",Object(a.a)({},c,n,{components:t,mdxType:"MDXLayout"}),Object(r.b)("h2",{id:"app-bundle-structure"},"App Bundle Structure"),Object(r.b)("p",null,"Each app has to be bundled as a zip archive (commonly used with suffix ",Object(r.b)("inlineCode",{parentName:"p"},".wave"),")\nconsisting of:"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"app.toml")," - the platform configuration file"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"static/")," - static asset directory, including the app icon (a png file starting with ",Object(r.b)("inlineCode",{parentName:"li"},"icon"),")\nand screenshots (files starting with ",Object(r.b)("inlineCode",{parentName:"li"},"screenshot"),")"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"requirements.txt")," - pip-managed dependencies of the app (can contain references to ",Object(r.b)("inlineCode",{parentName:"li"},".whl")," files\nincluded in the ",Object(r.b)("inlineCode",{parentName:"li"},".wave")," using paths relative to the archive root)"),Object(r.b)("li",{parentName:"ul"},"app source code")),Object(r.b)("p",null,"You can quickly create a ",Object(r.b)("inlineCode",{parentName:"p"},".wave")," archive by running ",Object(r.b)("inlineCode",{parentName:"p"},"h2o bundle")," in your app git repository\n(see the ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"#cli"}),"CLI")," section)"),Object(r.b)("h3",{id:"apptoml"},"app.toml"),Object(r.b)("p",null,"Each app archive has to contain a ",Object(r.b)("inlineCode",{parentName:"p"},"app.toml")," configuration file in the ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"https://toml.io/en/"}),"TOML")," format,\nplaced in the root of the ",Object(r.b)("inlineCode",{parentName:"p"},".wave")," archive, example:"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-toml"}),'[App]\nName = "ai.h2o.wave.my-app"\nVersion = "0.0.1"\nTitle = "My awesome app"\nDescription = "This is my awesome app"\nCategory = "Other"\nKeywords = ["awesome"]\n\n[Runtime]\nModule = "app.run"\nVolumeMount = "/data"\nVolumeSize = "1Gi"\nResourceVolumeSize = "2Gi"\nMemoryLimit = "500Mi"\nMemoryReservation = "400Mi"\n\n[[Env]]\nName = "ENVIRONMENT_VARIABLE_NAME"\nSecret = "SecretName"\nSecretKey = "SecretKeyName"\n\n[[Env]]\nName = "ANOTHER_ENVIRONMENT_VARIABLE_NAME"\nValue = "some value"\n\n[[File]]\nPath = "some/path.file"\nSecret = "FileSecretName"\nSecretKey = "FileSecretKeyName"\n\n[[File]]\nPath = "/another/path.file"\nValue = \'\'\'\nsome\nstring\n\'\'\'\n')),Object(r.b)("p",null,Object(r.b)("strong",{parentName:"p"},"Required attributes"),":"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"App"),Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Name")," - a machine-oriented unique identifier of the app (links different app versions together)"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Version")," - a ",Object(r.b)("a",Object(a.a)({parentName:"li"},{href:"https://semver.org"}),"https://semver.org")," version of the app"))),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Runtime"),Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Module")," - the name of the main Python module of the app, i.e., the app should be started\nvia ",Object(r.b)("inlineCode",{parentName:"li"},"python3 -m $module_name"))))),Object(r.b)("p",null,Object(r.b)("strong",{parentName:"p"},"Optional attributes"),":"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"App"),Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Title")," - a human-oriented name of the app for presentation in UI/CLI; string"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Description")," - a multiline description of the app for presentation in UI/CLI; string"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Category")," - category for organizing apps into groups, string\n(UI recognizes ",Object(r.b)("inlineCode",{parentName:"li"},"All"),", ",Object(r.b)("inlineCode",{parentName:"li"},"Data Science"),", ",Object(r.b)("inlineCode",{parentName:"li"},"Financial Services"),", ",Object(r.b)("inlineCode",{parentName:"li"},"Healthcare"),", ",Object(r.b)("inlineCode",{parentName:"li"},"Insurance"),",\n",Object(r.b)("inlineCode",{parentName:"li"},"Manufacturing"),", ",Object(r.b)("inlineCode",{parentName:"li"},"Marketing"),", ",Object(r.b)("inlineCode",{parentName:"li"},"Retail"),", ",Object(r.b)("inlineCode",{parentName:"li"},"Sales"),", ",Object(r.b)("inlineCode",{parentName:"li"},"Telecommunications"),", and ",Object(r.b)("inlineCode",{parentName:"li"},"Other"),")"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Keywords")," - keywords for search in the UI/CLI, list of strings"))),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Runtime"),Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"VolumeMount")," and ",Object(r.b)("inlineCode",{parentName:"li"},"VolumeSize")," - request for a volume to persist app instance data across\nrestarts, ",Object(r.b)("inlineCode",{parentName:"li"},"VolumeMount")," has to be an absolute path, ",Object(r.b)("inlineCode",{parentName:"li"},"VolumeSize")," needs to conform to the\n",Object(r.b)("a",Object(a.a)({parentName:"li"},{href:"https://github.com/fabric8io/kansible/blob/master/vendor/k8s.io/kubernetes/docs/design/resources.md#resource-quantities"}),"k8s resource model"),"."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"ResourceVolumeSize")," - request for a volume to persist internal app resources (such as Python venv)\nacross restarts, only recommended for production-quality apps with sizeable resources due\nto cluster node limits, needs to conform to the\n",Object(r.b)("a",Object(a.a)({parentName:"li"},{href:"https://github.com/fabric8io/kansible/blob/master/vendor/k8s.io/kubernetes/docs/design/resources.md#resource-quantities"}),"k8s resource model"),"."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"MemoryLimit")," and ",Object(r.b)("inlineCode",{parentName:"li"},"MemoryReservation")," - memory requirements for an instance of the app\n(default to service-wide settings managed by Admins); be conservative with these limits;\n",Object(r.b)("inlineCode",{parentName:"li"},"MemoryLimit")," is a hard limit on the maximum amount of memory an instance can use before it is OOM-killed;\n",Object(r.b)("inlineCode",{parentName:"li"},"MemoryReservation")," is how much memory is required to schedule an instance of the app."))),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Env")," - request for a literal value/secret to be injected into an instance at startup-time as an Env variable;\nrepeated; see ",Object(r.b)("a",Object(a.a)({parentName:"li"},{href:"#utilizing-secrets"}),"Utilizing Secrets"),".",Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Name")," - name of the Env variable to the injected into the Python process;\nnames prefixed with ",Object(r.b)("inlineCode",{parentName:"li"},"Q8S")," are disallowed."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Secret")," - name of the shared secret to use; each secret can contain multiple key-value pairs;\ncannot be used together with ",Object(r.b)("inlineCode",{parentName:"li"},"Value"),"."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"SecretKey")," - name of the key within the secret to use; cannot be used together with ",Object(r.b)("inlineCode",{parentName:"li"},"Value"),"."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Value")," - the literal value of the Env variable; cannot be used together with ",Object(r.b)("inlineCode",{parentName:"li"},"Secret"),"/",Object(r.b)("inlineCode",{parentName:"li"},"SecretKey"),"."))),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"File")," - request for a literal value/secret to be injected into an instance at startup-time as a file;\nrepeated; see ",Object(r.b)("a",Object(a.a)({parentName:"li"},{href:"#utilizing-secrets"}),"Utilizing Secrets"),".",Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Path")," - path to inject the file to; relative path means relative to the directory with the app code\nas determined by the platform; path dir cannot be ",Object(r.b)("inlineCode",{parentName:"li"},"/")," or ",Object(r.b)("inlineCode",{parentName:"li"},".")," (only subdirs are allowed);\npath dir has to be unique across all other ",Object(r.b)("inlineCode",{parentName:"li"},"File")," configurations; path dir ",Object(r.b)("inlineCode",{parentName:"li"},"/resources")," is\ndisallowed."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Secret")," - name of the shared secret to use; each secret can contain multiple key-value pairs;\ncannot be used together with ",Object(r.b)("inlineCode",{parentName:"li"},"Value"),"."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"SecretKey")," - name of the key within the secret to use; cannot be used together with ",Object(r.b)("inlineCode",{parentName:"li"},"Value"),"."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"Value")," - the literal value of the file; cannot be used together with ",Object(r.b)("inlineCode",{parentName:"li"},"Secret"),"/",Object(r.b)("inlineCode",{parentName:"li"},"SecretKey"),".")))),Object(r.b)("h2",{id:"runtime-environment"},"Runtime Environment"),Object(r.b)("p",null,"The platform configures the app instance runtime environment, i.e., OS, OS dependencies, location of the app code/venv, etc."),Object(r.b)("p",null,"Developers can specify the pip-managed dependencies of the app via ",Object(r.b)("inlineCode",{parentName:"p"},"requirements.txt")," (can contain\nreferences to ",Object(r.b)("inlineCode",{parentName:"p"},".whl")," files included in the ",Object(r.b)("inlineCode",{parentName:"p"},".wave")," using paths relative to the archive root)"),Object(r.b)("p",null,"Developers can further customize the runtime environment by ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"#utilizing-secrets"}),"Utilizing Secrets"),"."),Object(r.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(r.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(r.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(r.b)("path",Object(a.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(a.a)({parentName:"div"},{className:"admonition-content"}),Object(r.b)("p",{parentName:"div"},"At this moment, the platform does not provide any provisions for developers to customize the OS,\nnative OS dependencies, Qd version, etc."),Object(r.b)("p",{parentName:"div"},"We are actively working on improving this."))),Object(r.b)("h2",{id:"cli"},"CLI"),Object(r.b)("p",null,"As a developer, you will need the ",Object(r.b)("inlineCode",{parentName:"p"},"h2o")," binary to interact with the platform."),Object(r.b)("h3",{id:"configuring-the-cli"},"Configuring the CLI"),Object(r.b)("p",null,"First you need to configure the CLI by running ",Object(r.b)("inlineCode",{parentName:"p"},"h2o config setup")," so that it knows how to talk\nto a particular platform deployment."),Object(r.b)("p",null,"Be aware, currently the CLI launches a browser to complete the user authentication, and due to this\nwe currently unable to support remote use of the CLI over SSH without provisions for X forwarding."),Object(r.b)("h3",{id:"listing-existing-apps"},"Listing existing apps"),Object(r.b)("p",null,"The ",Object(r.b)("inlineCode",{parentName:"p"},"h2o app list -a")," command will list all apps available for launch."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-sh"}),"$ h2o app list -a\nID                                    TITLE                        OWNER            CREATED UPDATED CATEGORY      VISIBILITY\nabc543210-0000-0000-0000-1234567890ab Peak 0.1.1                   user1@h2o.ai     18d     18d     Healthcare    ALL_USERS\nbcd543210-1111-1111-1111-0123456789ab Tour 0.0.15-20200922162859   user2@h2o.ai     20d     20d     Other         ALL_USERS\n...\n")),Object(r.b)("h3",{id:"launching-existing-apps"},"Launching existing apps"),Object(r.b)("p",null,"To launch an app, the ",Object(r.b)("inlineCode",{parentName:"p"},"h2o app run <appId>")," 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(a.a)({parentName:"pre"},{className:"language-sh"}),"$ h2o app run bcd543210-1111-1111-1111-0123456789ab\nID  22222222-3333-4444-5555-666666666666\nURL https://22222222-3333-4444-5555-666666666666.wave.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"},"h2o bundle import")," in your app git repository. This will automatically package your\ncurrent directory into a ",Object(r.b)("inlineCode",{parentName:"p"},".wave")," package and import it into the platform."),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"},"h2o app run"),"\nor the UI to launch the app."),Object(r.b)("p",null,"Note: the name-version combination from your ",Object(r.b)("inlineCode",{parentName:"p"},"app.toml")," has to be unique and the platform will reject\nthe request if such combination already exists. Therefore, you need to update the version in ",Object(r.b)("inlineCode",{parentName:"p"},"app.toml"),"\nbefore each run."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-sh"}),"$ h2o bundle import -v ALL_USERS\nID              bcd543210-1111-1111-1111-0123456789ab\nTitle           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.wave.peak.0.1.2.wave\nIcon Location   ai.h2o.wave.peak.0.1.2/icon.jpg\nDescription     Forecast of COVID-19 spread\n")),Object(r.b)("h3",{id:"running-an-app-under-development"},"Running an app under development"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"h2o bundle deploy")," in your app git repository. This will automatically package your\ncurrent directory into a ",Object(r.b)("inlineCode",{parentName:"p"},".wave")," package, import it into the platform, 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: the CLI 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(a.a)({parentName:"pre"},{className:"language-sh"}),"$ h2o bundle deploy\nID              bcd543210-1111-1111-1111-0123456789ab\nTitle           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.wave.peak.0.1.2-20201013062803.wave\nIcon Location   ai.h2o.wave.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.wave.h2o.ai\n")),Object(r.b)("h3",{id:"getting-the-logs-of-a-running-app-instance"},"Getting the logs of a running app instance"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"h2o 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(a.a)({parentName:"pre"},{className:"language-sh"}),'$ h2o 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-cloud-like-environment-locally"},"Running the app in cloud-like environment locally"),Object(r.b)("p",null,"Just run ",Object(r.b)("inlineCode",{parentName:"p"},"h2o exec"),". This will bundle the app in a temporary ",Object(r.b)("inlineCode",{parentName:"p"},".wave")," and launch it locally\nusing our platform 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/<your main route>"),"."),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-sh"}),'$ h2o exec\n{"level":"info","log_level":"debug","url":"file:///wave_bundle/q-peak.0.1.2.wave","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":"wave 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"},"h2o app update <appId> -v <visbility>")," 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"},"h2o instance update <instanceId> -v <visbility>")," 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(a.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(a.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(a.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(a.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 the platform to apps, exposed as environment variables\nusing the ",Object(r.b)("inlineCode",{parentName:"p"},"[[Env]]")," section within the ",Object(r.b)("inlineCode",{parentName:"p"},"app.toml")," or as files using the ",Object(r.b)("inlineCode",{parentName:"p"},"[[File]]")," section."),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 or deployments outside the platform."),Object(r.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(r.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(r.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(r.b)("path",Object(a.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(a.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 the platform deploys each app with its own Wave server,\nwe advise that apps use ",Object(r.b)("inlineCode",{parentName:"p"},"/")," as their main route:"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-python"}),"if __name__ == '__main__':\n    listen('/', main_page)\n")))}b.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/1486e3bc.86163c5d.js b/docs/1486e3bc.a05fa83f.js
similarity index 93%
rename from docs/1486e3bc.86163c5d.js
rename to docs/1486e3bc.a05fa83f.js
index 1f26f1c661..5784f57ba6 100644
--- a/docs/1486e3bc.86163c5d.js
+++ b/docs/1486e3bc.a05fa83f.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{290: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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;c++)i[c]=n[c];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},310:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-d3-27f0867826e9547bb4bb23e79517892b.png"},71:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return l}));var r=n(2),a=n(6),o=(n(0),n(290)),i={title:"Plot / D3.js"},p={unversionedId:"examples/plot-d3",id:"examples/plot-d3",isDocsHomePage:!1,title:"Plot / D3.js",description:"Create custom plots using D3.js.",source:"@site/docs/examples/plot-d3.md",slug:"/examples/plot-d3",permalink:"/wave/docs/examples/plot-d3",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-d3.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Plotly",permalink:"/wave/docs/examples/plot-plotly"},next:{title:"Pixel Art",permalink:"/wave/docs/examples/pixel-art"}},s=[],c={rightToc:s};function l(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,"Create custom plots using D3.js."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(310).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import json\nimport os.path\nfrom h2o_wave import site, ui\n\n# The example D3 Javascript file is located in the same directory as this example; get its path\nd3_js_script_filename = os.path.join(os.path.dirname(__file__), 'plot_d3.js')\n\n# Upload the script to the server. Typically, you'd do this only once, when your app is installed.\nd3_js_script_path, = site.upload([d3_js_script_filename])\n\nhtml_template = '''\n<!DOCTYPE html>\n<html>\n<head>\n  <script src=\"https://d3js.org/d3.v5.min.js\"><\/script>\n</head>\n<body style=\"margin:0; padding:0\">\n  <script src=\"{script_path}\"><\/script>\n  <script>render({data})<\/script>\n</body>\n</html>\n'''\n\n# This data is hard-coded here for simplicity.\n# During production use, this data would be the output of some compute routine.\ndata = [\n    [11975, 5871, 8916, 2868],\n    [1951, 10048, 2060, 6171],\n    [8010, 16145, 8090, 8045],\n    [1013, 990, 940, 6907],\n]\n\n# Plug JSON-serialized data into our html template\nhtml = html_template.format(script_path=d3_js_script_path, data=json.dumps(data))\n\npage = site['/demo']\npage['example'] = ui.frame_card(\n    box='1 1 5 8',\n    title='D3 Chord Diagram',\n    content=html,\n)\npage.save()\n")))}l.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{292: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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;c++)i[c]=n[c];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},312:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-d3-27f0867826e9547bb4bb23e79517892b.png"},72:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return l}));var r=n(2),a=n(6),o=(n(0),n(292)),i={title:"Plot / D3.js"},p={unversionedId:"examples/plot-d3",id:"examples/plot-d3",isDocsHomePage:!1,title:"Plot / D3.js",description:"Create custom plots using D3.js.",source:"@site/docs/examples/plot-d3.md",slug:"/examples/plot-d3",permalink:"/wave/docs/examples/plot-d3",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-d3.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Plotly",permalink:"/wave/docs/examples/plot-plotly"},next:{title:"Pixel Art",permalink:"/wave/docs/examples/pixel-art"}},s=[],c={rightToc:s};function l(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,"Create custom plots using D3.js."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(312).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import json\nimport os.path\nfrom h2o_wave import site, ui\n\n# The example D3 Javascript file is located in the same directory as this example; get its path\nd3_js_script_filename = os.path.join(os.path.dirname(__file__), 'plot_d3.js')\n\n# Upload the script to the server. Typically, you'd do this only once, when your app is installed.\nd3_js_script_path, = site.upload([d3_js_script_filename])\n\nhtml_template = '''\n<!DOCTYPE html>\n<html>\n<head>\n  <script src=\"https://d3js.org/d3.v5.min.js\"><\/script>\n</head>\n<body style=\"margin:0; padding:0\">\n  <script src=\"{script_path}\"><\/script>\n  <script>render({data})<\/script>\n</body>\n</html>\n'''\n\n# This data is hard-coded here for simplicity.\n# During production use, this data would be the output of some compute routine.\ndata = [\n    [11975, 5871, 8916, 2868],\n    [1951, 10048, 2060, 6171],\n    [8010, 16145, 8090, 8045],\n    [1013, 990, 940, 6907],\n]\n\n# Plug JSON-serialized data into our html template\nhtml = html_template.format(script_path=d3_js_script_path, data=json.dumps(data))\n\npage = site['/demo']\npage['example'] = ui.frame_card(\n    box='1 1 5 8',\n    title='D3 Chord Diagram',\n    content=html,\n)\npage.save()\n")))}l.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/15837ef3.febd3ccc.js b/docs/15837ef3.07844001.js
similarity index 61%
rename from docs/15837ef3.febd3ccc.js
rename to docs/15837ef3.07844001.js
index 93f3b71409..73af1dd134 100644
--- a/docs/15837ef3.febd3ccc.js
+++ b/docs/15837ef3.07844001.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{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 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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?s(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):s(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=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)},m={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,b=p["".concat(s,".").concat(f)]||p[f]||m[f]||o;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 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<o;c++)s[c]=t[c];return a.a.createElement.apply(null,s)}return a.a.createElement.apply(null,t)}f.displayName="MDXCreateElement"},311:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/table-sort-160ae663649156d89ea2cea500cc21b1.png"},72:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return s})),t.d(n,"metadata",(function(){return i})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return u}));var r=t(2),a=t(6),o=(t(0),t(290)),s={title:"Table / Sort"},i={unversionedId:"examples/table-sort",id:"examples/table-sort",isDocsHomePage:!1,title:"Table / Sort",description:"Allow sorting a table by specific columns.",source:"@site/docs/examples/table-sort.md",slug:"/examples/table-sort",permalink:"/wave/docs/examples/table-sort",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/table-sort.md",version:"current",sidebar:"someSidebar",previous:{title:"Table",permalink:"/wave/docs/examples/table"},next:{title:"Table / Search",permalink:"/wave/docs/examples/table-search"}},l=[],c={rightToc:l};function u(e){var n=e.components,s=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},c,s,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Allow sorting a table by specific columns."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(311).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import random\nfrom faker import Faker\nfrom h2o_wave import Q, listen, ui\n\nfake = Faker()\n\n_id = 0\n\n\nclass Issue:\n    def __init__(self, text: str, status: str, progress: float, icon: str, notifications: str):\n        global _id\n        _id += 1\n        self.id = f'I{_id}'\n        self.text = text\n        self.status = status\n        self.views = 0\n        self.progress = progress\n        self.icon = icon\n        self.notifications = notifications\n\n\n# Create some issues\nissues = [\n    Issue(\n        text=fake.sentence(),\n        status=('Closed' if i % 2 == 0 else 'Open'),\n        progress=random.random(),\n        icon=('BoxCheckmarkSolid' if random.random() > 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, ),\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', 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        )\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([[21],{292: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 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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?s(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):s(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=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)},m={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,b=p["".concat(s,".").concat(f)]||p[f]||m[f]||o;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 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<o;c++)s[c]=t[c];return a.a.createElement.apply(null,s)}return a.a.createElement.apply(null,t)}f.displayName="MDXCreateElement"},313:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/table-sort-160ae663649156d89ea2cea500cc21b1.png"},73:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return s})),t.d(n,"metadata",(function(){return i})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return u}));var r=t(2),a=t(6),o=(t(0),t(292)),s={title:"Table / Sort"},i={unversionedId:"examples/table-sort",id:"examples/table-sort",isDocsHomePage:!1,title:"Table / Sort",description:"Allow sorting a table by specific columns.",source:"@site/docs/examples/table-sort.md",slug:"/examples/table-sort",permalink:"/wave/docs/examples/table-sort",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/table-sort.md",version:"current",sidebar:"someSidebar",previous:{title:"Table",permalink:"/wave/docs/examples/table"},next:{title:"Table / Search",permalink:"/wave/docs/examples/table-search"}},l=[],c={rightToc:l};function u(e){var n=e.components,s=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},c,s,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Allow sorting a table by specific columns."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(313).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import random\nfrom faker import Faker\nfrom h2o_wave import main, app, Q, ui\n\nfake = Faker()\n\n_id = 0\n\n\nclass Issue:\n    def __init__(self, text: str, status: str, progress: float, icon: str, notifications: str):\n        global _id\n        _id += 1\n        self.id = f'I{_id}'\n        self.text = text\n        self.status = status\n        self.views = 0\n        self.progress = progress\n        self.icon = icon\n        self.notifications = notifications\n\n\n# Create some issues\nissues = [\n    Issue(\n        text=fake.sentence(),\n        status=('Closed' if i % 2 == 0 else 'Open'),\n        progress=random.random(),\n        icon=('BoxCheckmarkSolid' if random.random() > 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, ),\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', sortable=True),\n    ui.table_column(name='progress', label='Progress', cell_type=ui.progress_table_cell_type()),\n]\n\n\n@app('/demo')\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")))}u.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/15a78352.1e0bd04f.js b/docs/15a78352.1e0bd04f.js
deleted file mode 100644
index c866a098e4..0000000000
--- a/docs/15a78352.1e0bd04f.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return d}));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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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)},b={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,c=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),u=l(n),m=r,d=u["".concat(c,".").concat(m)]||u[m]||b[m]||o;return n?a.a.createElement(d,i(i({ref:t},s),{},{components:n})):a.a.createElement(d,i({ref:t},s))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.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:r,c[1]=i;for(var s=2;s<o;s++)c[s]=n[s];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},45:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return l}));var r=n(2),a=n(6),o=(n(0),n(290)),c={},i={unversionedId:"_start_q",id:"_start_q",isDocsHomePage:!1,title:"_start_q",description:"To start the Wave server, simply open a new terminal window and execute wave (or wave.exe on Windows).",source:"@site/docs/_start_q.md",slug:"/_start_q",permalink:"/wave/docs/_start_q",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/_start_q.md",version:"current"},p=[],s={rightToc:p};function l(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},s,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"To start the Wave server, simply open a new terminal window and execute ",Object(o.b)("inlineCode",{parentName:"p"},"wave")," (or ",Object(o.b)("inlineCode",{parentName:"p"},"wave.exe")," on Windows)."),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave\n./wave\n")),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{}),'2020/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":"/home/elp/wave/www"}\n')),Object(o.b)("p",null,"The Wave server should now be running at ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"http://localhost:55555"}),"http://localhost:55555"),"."),Object(o.b)("div",{className:"admonition admonition-caution alert alert--warning"},Object(o.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(r.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(r.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}),Object(o.b)("path",Object(r.a)({parentName:"svg"},{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})))),"Don't close this terminal window!")),Object(o.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"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."))))}l.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/15a78352.e2b911ca.js b/docs/15a78352.e2b911ca.js
new file mode 100644
index 0000000000..5ad9f10665
--- /dev/null
+++ b/docs/15a78352.e2b911ca.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{292:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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)},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=p(e,["components","mdxType","originalType","parentName"]),u=l(n),d=r,m=u["".concat(c,".").concat(d)]||u[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 p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var s=2;s<o;s++)c[s]=n[s];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},45:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return l}));var r=n(2),a=n(6),o=(n(0),n(292)),c={},i={unversionedId:"_start_q",id:"_start_q",isDocsHomePage:!1,title:"_start_q",description:"To start the Wave server, simply open a new terminal window and execute waved (or waved.exe on Windows).",source:"@site/docs/_start_q.md",slug:"/_start_q",permalink:"/wave/docs/_start_q",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/_start_q.md",version:"current"},p=[],s={rightToc:p};function l(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},s,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"To start the Wave server, simply open a new terminal window and execute ",Object(o.b)("inlineCode",{parentName:"p"},"waved")," (or ",Object(o.b)("inlineCode",{parentName:"p"},"waved.exe")," on Windows)."),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave\n./waved\n")),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{}),'2020/10/27 16:16:34 # \n2020/10/27 16:16:34 # \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n2020/10/27 16:16:34 # \u2502  \u250c    \u250c \u250c\u2500\u2500\u2510 \u250c  \u250c \u250c\u2500\u2500\u2510  \u2502 H2O Wave\n2020/10/27 16:16:34 # \u2502  \u2502 \u250c\u2500\u2500\u2518 \u2502\u2500\u2500\u2502 \u2502  \u2502 \u2514\u2510    \u2502 (version) (build)\n2020/10/27 16:16:34 # \u2502  \u2514\u2500\u2518    \u2518  \u2518 \u2514\u2500\u2500\u2518  \u2514\u2500\u2518  \u2502 \xa9 2020 H2O.ai, Inc.\n2020/10/27 16:16:34 # \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n2020/10/27 16:16:34 # \n2020/10/27 16:16:34 # {"address":":55555","t":"listen","webroot":"/home/elp/wave/www"}\n')),Object(o.b)("p",null,"The Wave server should now be running at ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"http://localhost:55555"}),"http://localhost:55555"),"."),Object(o.b)("div",{className:"admonition admonition-caution alert alert--warning"},Object(o.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(r.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(r.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}),Object(o.b)("path",Object(r.a)({parentName:"svg"},{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})))),"Don't close this terminal window!")),Object(o.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"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."))))}l.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/174d8305.dfb7e5b4.js b/docs/174d8305.6a9b0564.js
similarity index 85%
rename from docs/174d8305.dfb7e5b4.js
rename to docs/174d8305.6a9b0564.js
index ec79435067..83e96bcc86 100644
--- a/docs/174d8305.dfb7e5b4.js
+++ b/docs/174d8305.6a9b0564.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{290:function(e,n,t){"use strict";t.d(n,"a",(function(){return d})),t.d(n,"b",(function(){return p}));var r=t(0),a=t.n(r);function c(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 o(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){c(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},c=Object.keys(e);for(r=0;r<c.length;r++)t=c[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r<c.length;r++)t=c[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var s=a.a.createContext({}),u=function(e){var n=a.a.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):o(o({},n),e)),t},d=function(e){var n=u(e.components);return a.a.createElement(s.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,c=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),d=u(t),m=r,p=d["".concat(i,".").concat(m)]||d[m]||f[m]||c;return t?a.a.createElement(p,o(o({ref:n},s),{},{components:t})):a.a.createElement(p,o({ref:n},s))}));function p(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var c=t.length,i=new Array(c);i[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,i[1]=o;for(var s=2;s<c;s++)i[s]=t[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},312:function(e,n,t){"use strict";t.r(n),n.default="data:image/png;base64,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"},73:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return i})),t.d(n,"metadata",(function(){return o})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return u}));var r=t(2),a=t(6),c=(t(0),t(290)),i={title:"Wizard"},o={unversionedId:"examples/wizard",id:"examples/wizard",isDocsHomePage:!1,title:"Wizard",description:"Create a multi-step wizard using form cards.",source:"@site/docs/examples/wizard.md",slug:"/examples/wizard",permalink:"/wave/docs/examples/wizard",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/wizard.md",version:"current",sidebar:"someSidebar",previous:{title:"To-do List App",permalink:"/wave/docs/examples/todo"},next:{title:"Issue Tracker",permalink:"/wave/docs/examples/issue-tracker"}},l=[],s={rightToc:l};function u(e){var n=e.components,i=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(r.a)({},s,i,{components:n,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Create a multi-step wizard using form cards."),Object(c.b)("div",{className:"cover",style:{backgroundImage:"url("+t(312).default+")"}}),Object(c.b)("pre",null,Object(c.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, ui, listen, cypress, Cypress\n\n\nasync def serve(q: Q):\n    if not q.client.initialized:  # First visit, create an empty form card for our wizard\n        q.page['wizard'] = ui.form_card(box='1 1 2 4', items=[])\n        q.client.initialized = True\n\n    wizard = q.page['wizard']  # Get a reference to the wizard form\n    if q.args.step1:\n        wizard.items = [\n            ui.text_xl('Wizard - Step 1'),\n            ui.text(\"What is your name?\"),\n            ui.textbox(name='nickname', label='My name is...', value='Gandalf'),\n            ui.buttons([ui.button(name='step2', label='Next', primary=True)]),\n        ]\n    elif q.args.step2:\n        q.client.nickname = q.args.nickname\n        wizard.items = [\n            ui.text_xl('Wizard - Step 2'),\n            ui.text(f\"Hi {q.args.nickname}! How do you feel right now?\"),\n            ui.textbox(name='feeling', label='I feel...', value='magical'),\n            ui.buttons([ui.button(name='step3', label='Next', primary=True)]),\n        ]\n    elif q.args.step3:\n        wizard.items = [\n            ui.text_xl('Wizard - Done'),\n            ui.text(f\"What a coincidence, {q.client.nickname}! I feel {q.args.feeling} too!\"),\n            ui.buttons([ui.button(name='step1', label='Try Again', primary=True)]),\n        ]\n    else:\n        wizard.items = [\n            ui.text_xl('Wizard Example'),\n            ui.text(\"Let's have a conversation, shall we?\"),\n            ui.buttons([ui.button(name='step1', label='Of course!', primary=True)]),\n        ]\n\n    await q.page.save()\n\n\n@cypress('Walk through the wizard')\ndef try_walk_through(cy: Cypress):\n    cy.visit('/demo')\n    cy.locate('step1').click()\n    cy.locate('text').should('contain.text', 'What is your name?')\n    cy.locate('nickname').clear().type('Fred')\n    cy.locate('step2').click()\n    cy.locate('text').should('contain.text', 'Hi Fred! How do you feel right now?')\n    cy.locate('feeling').clear().type('quirky')\n    cy.locate('step3').click()\n    cy.locate('text').should('contain.text', 'What a coincidence, Fred! I feel quirky too!')\n\n\nlisten('/demo', serve)\n")))}u.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{292:function(e,n,t){"use strict";t.d(n,"a",(function(){return d})),t.d(n,"b",(function(){return p}));var r=t(0),a=t.n(r);function c(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 o(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){c(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},c=Object.keys(e);for(r=0;r<c.length;r++)t=c[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r<c.length;r++)t=c[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var s=a.a.createContext({}),u=function(e){var n=a.a.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):o(o({},n),e)),t},d=function(e){var n=u(e.components);return a.a.createElement(s.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,c=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),d=u(t),m=r,p=d["".concat(i,".").concat(m)]||d[m]||f[m]||c;return t?a.a.createElement(p,o(o({ref:n},s),{},{components:t})):a.a.createElement(p,o({ref:n},s))}));function p(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var c=t.length,i=new Array(c);i[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,i[1]=o;for(var s=2;s<c;s++)i[s]=t[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},314:function(e,n,t){"use strict";t.r(n),n.default="data:image/png;base64,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"},74:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return i})),t.d(n,"metadata",(function(){return o})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return u}));var r=t(2),a=t(6),c=(t(0),t(292)),i={title:"Wizard"},o={unversionedId:"examples/wizard",id:"examples/wizard",isDocsHomePage:!1,title:"Wizard",description:"Create a multi-step wizard using form cards.",source:"@site/docs/examples/wizard.md",slug:"/examples/wizard",permalink:"/wave/docs/examples/wizard",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/wizard.md",version:"current",sidebar:"someSidebar",previous:{title:"To-do List App",permalink:"/wave/docs/examples/todo"},next:{title:"Issue Tracker",permalink:"/wave/docs/examples/issue-tracker"}},l=[],s={rightToc:l};function u(e){var n=e.components,i=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(r.a)({},s,i,{components:n,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Create a multi-step wizard using form cards."),Object(c.b)("div",{className:"cover",style:{backgroundImage:"url("+t(314).default+")"}}),Object(c.b)("pre",null,Object(c.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, ui, main, app, cypress, Cypress\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if (\n            not q.client.initialized\n    ):  # First visit, create an empty form card for our wizard\n        q.page['wizard'] = ui.form_card(box='1 1 2 4', items=[])\n        q.client.initialized = True\n\n    wizard = q.page['wizard']  # Get a reference to the wizard form\n    if q.args.step1:\n        wizard.items = [\n            ui.text_xl('Wizard - Step 1'),\n            ui.text('What is your name?', name='text'),\n            ui.textbox(name='nickname', label='My name is...', value='Gandalf'),\n            ui.buttons([ui.button(name='step2', label='Next', primary=True)]),\n        ]\n    elif q.args.step2:\n        q.client.nickname = q.args.nickname\n        wizard.items = [\n            ui.text_xl('Wizard - Step 2'),\n            ui.text(f'Hi {q.args.nickname}! How do you feel right now?', name='text'),\n            ui.textbox(name='feeling', label='I feel...', value='magical'),\n            ui.buttons([ui.button(name='step3', label='Next', primary=True)]),\n        ]\n    elif q.args.step3:\n        wizard.items = [\n            ui.text_xl('Wizard - Done'),\n            ui.text(\n                f'What a coincidence, {q.client.nickname}! I feel {q.args.feeling} too!',\n                name='text',\n            ),\n            ui.buttons([ui.button(name='step1', label='Try Again', primary=True)]),\n        ]\n    else:\n        wizard.items = [\n            ui.text_xl('Wizard Example'),\n            ui.text(\"Let's have a conversation, shall we?\"),\n            ui.buttons([ui.button(name='step1', label='Of course!', primary=True)]),\n        ]\n\n    await q.page.save()\n\n\n@cypress('Walk through the wizard')\ndef try_walk_through(cy: Cypress):\n    cy.visit('/demo')\n    cy.locate('step1').click()\n    cy.locate('text').should('contain.text', 'What is your name?')\n    cy.locate('nickname').clear().type('Fred')\n    cy.locate('step2').click()\n    cy.locate('text').should('contain.text', 'Hi Fred! How do you feel right now?')\n    cy.locate('feeling').clear().type('quirky')\n    cy.locate('step3').click()\n    cy.locate('text').should(\n        'contain.text', 'What a coincidence, Fred! I feel quirky too!'\n    )\n")))}u.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/17896441.78666ca0.js b/docs/17896441.7487f7bf.js
similarity index 93%
rename from docs/17896441.78666ca0.js
rename to docs/17896441.7487f7bf.js
index 401028c583..c84057ba9e 100644
--- a/docs/17896441.78666ca0.js
+++ b/docs/17896441.7487f7bf.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{286:function(e,t,a){"use strict";a.r(t);var n=a(0),l=a.n(n),r=a(296),i=a(291),c=a(294),s=a(293);var o=function(e){const{metadata:t}=e;return l.a.createElement("nav",{className:"pagination-nav","aria-label":"Blog list page navigation"},l.a.createElement("div",{className:"pagination-nav__item"},t.previous&&l.a.createElement(s.a,{className:"pagination-nav__link",to:t.previous.permalink},l.a.createElement("div",{className:"pagination-nav__sublabel"},"Previous"),l.a.createElement("div",{className:"pagination-nav__label"},"\xab ",t.previous.title))),l.a.createElement("div",{className:"pagination-nav__item pagination-nav__item--next"},t.next&&l.a.createElement(s.a,{className:"pagination-nav__link",to:t.next.permalink},l.a.createElement("div",{className:"pagination-nav__sublabel"},"Next"),l.a.createElement("div",{className:"pagination-nav__label"},t.next.title," \xbb"))))},m=a(300);var d=function(){const{siteConfig:{title:e}}=Object(i.a)(),{pluginId:t}=Object(m.useActivePlugin)({failfast:!0}),a=Object(m.useActiveVersion)(t),{latestDocSuggestion:n,latestVersionSuggestion:r}=Object(m.useDocVersionSuggestions)(t);if(!r)return l.a.createElement(l.a.Fragment,null);const c=null!=n?n:(o=r).docs.find((e=>e.id===o.mainDocId));var o;return l.a.createElement("div",{className:"alert alert--warning margin-bottom--md",role:"alert"},"current"===a.name?l.a.createElement("div",null,"This is unreleased documentation for ",e," ",l.a.createElement("strong",null,a.label)," version."):l.a.createElement("div",null,"This is documentation for ",e," ",l.a.createElement("strong",null,a.label),", which is no longer actively maintained."),l.a.createElement("div",{className:"margin-top--md"},"For up-to-date documentation, see the"," ",l.a.createElement("strong",null,l.a.createElement(s.a,{to:c.path},"latest version"))," ","(",r.label,")."))},u=a(467),g=a(292),E=a(74),v=a.n(E);t.default=function(e){const{siteConfig:t={}}=Object(i.a)(),{url:a,title:n,titleDelimiter:s}=t,{content:E}=e,{metadata:p}=E,{description:f,title:b,permalink:h,editUrl:N,lastUpdatedAt:_,lastUpdatedBy:w}=p,{frontMatter:{image:y,keywords:O,hide_title:k,hide_table_of_contents:j}}=E,{pluginId:C}=Object(m.useActivePlugin)({failfast:!0}),x=Object(m.useVersions)(C),I=Object(m.useActiveVersion)(C),L=x.length>1,A=b?`${b} ${s} ${n}`:n,S=Object(c.a)(y,{absolute:!0});return l.a.createElement(l.a.Fragment,null,l.a.createElement(r.a,null,l.a.createElement("title",null,A),l.a.createElement("meta",{property:"og:title",content:A}),f&&l.a.createElement("meta",{name:"description",content:f}),f&&l.a.createElement("meta",{property:"og:description",content:f}),O&&O.length&&l.a.createElement("meta",{name:"keywords",content:O.join(",")}),y&&l.a.createElement("meta",{property:"og:image",content:S}),y&&l.a.createElement("meta",{property:"twitter:image",content:S}),y&&l.a.createElement("meta",{name:"twitter:image:alt",content:"Image for "+b}),h&&l.a.createElement("meta",{property:"og:url",content:a+h}),h&&l.a.createElement("link",{rel:"canonical",href:a+h})),l.a.createElement("div",{className:Object(g.a)("container padding-vert--lg",v.a.docItemWrapper)},l.a.createElement("div",{className:"row"},l.a.createElement("div",{className:Object(g.a)("col",{[v.a.docItemCol]:!j})},l.a.createElement(d,null),l.a.createElement("div",{className:v.a.docItemContainer},l.a.createElement("article",null,L&&l.a.createElement("div",null,l.a.createElement("span",{className:"badge badge--secondary"},"Version: ",I.label)),!k&&l.a.createElement("header",null,l.a.createElement("h1",{className:v.a.docTitle},b)),l.a.createElement("div",{className:"markdown"},l.a.createElement(E,null))),(N||_||w)&&l.a.createElement("div",{className:"margin-vert--xl"},l.a.createElement("div",{className:"row"},l.a.createElement("div",{className:"col"},N&&l.a.createElement("a",{href:N,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")),(_||w)&&l.a.createElement("div",{className:"col text--right"},l.a.createElement("em",null,l.a.createElement("small",null,"Last updated"," ",_&&l.a.createElement(l.a.Fragment,null,"on"," ",l.a.createElement("time",{dateTime:new Date(1e3*_).toISOString(),className:v.a.docLastUpdatedAt},new Date(1e3*_).toLocaleDateString()),w&&" "),w&&l.a.createElement(l.a.Fragment,null,"by ",l.a.createElement("strong",null,w)),!1))))),l.a.createElement("div",{className:"margin-vert--lg"},l.a.createElement(o,{metadata:p})))),!j&&E.rightToc&&l.a.createElement("div",{className:"col col--3"},l.a.createElement(u.a,{headings:E.rightToc})))))}},467:function(e,t,a){"use strict";var n=a(0),l=a.n(n);var r=function(e,t,a){const[l,r]=Object(n.useState)(void 0);Object(n.useEffect)((()=>{let n,i;function c(){const c=function(){let e=0,t=null;for(n=document.getElementsByClassName("anchor");e<n.length&&!t;){const l=n[e],{top:r}=l.getBoundingClientRect();r>=0&&r<=a&&(t=l),e+=1}return t}();if(c){let a=0,n=!1;for(i=document.getElementsByClassName(e);a<i.length&&!n;){const e=i[a],{href:s}=e,o=decodeURIComponent(s.substring(s.indexOf("#")+1));c.id===o&&(l&&l.classList.remove(t),e.classList.add(t),r(e),n=!0),a+=1}}}return document.addEventListener("scroll",c),document.addEventListener("resize",c),c(),()=>{document.removeEventListener("scroll",c),document.removeEventListener("resize",c)}}))},i=a(46),c=a.n(i);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 r(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([[24],{288:function(e,t,a){"use strict";a.r(t);var n=a(0),l=a.n(n),r=a(298),i=a(293),c=a(296),s=a(295);var o=function(e){const{metadata:t}=e;return l.a.createElement("nav",{className:"pagination-nav","aria-label":"Blog list page navigation"},l.a.createElement("div",{className:"pagination-nav__item"},t.previous&&l.a.createElement(s.a,{className:"pagination-nav__link",to:t.previous.permalink},l.a.createElement("div",{className:"pagination-nav__sublabel"},"Previous"),l.a.createElement("div",{className:"pagination-nav__label"},"\xab ",t.previous.title))),l.a.createElement("div",{className:"pagination-nav__item pagination-nav__item--next"},t.next&&l.a.createElement(s.a,{className:"pagination-nav__link",to:t.next.permalink},l.a.createElement("div",{className:"pagination-nav__sublabel"},"Next"),l.a.createElement("div",{className:"pagination-nav__label"},t.next.title," \xbb"))))},m=a(302);var d=function(){const{siteConfig:{title:e}}=Object(i.a)(),{pluginId:t}=Object(m.useActivePlugin)({failfast:!0}),a=Object(m.useActiveVersion)(t),{latestDocSuggestion:n,latestVersionSuggestion:r}=Object(m.useDocVersionSuggestions)(t);if(!r)return l.a.createElement(l.a.Fragment,null);const c=null!=n?n:(o=r).docs.find((e=>e.id===o.mainDocId));var o;return l.a.createElement("div",{className:"alert alert--warning margin-bottom--md",role:"alert"},"current"===a.name?l.a.createElement("div",null,"This is unreleased documentation for ",e," ",l.a.createElement("strong",null,a.label)," version."):l.a.createElement("div",null,"This is documentation for ",e," ",l.a.createElement("strong",null,a.label),", which is no longer actively maintained."),l.a.createElement("div",{className:"margin-top--md"},"For up-to-date documentation, see the"," ",l.a.createElement("strong",null,l.a.createElement(s.a,{to:c.path},"latest version"))," ","(",r.label,")."))},u=a(473),g=a(294),E=a(75),v=a.n(E);t.default=function(e){const{siteConfig:t={}}=Object(i.a)(),{url:a,title:n,titleDelimiter:s}=t,{content:E}=e,{metadata:p}=E,{description:f,title:b,permalink:h,editUrl:N,lastUpdatedAt:_,lastUpdatedBy:w}=p,{frontMatter:{image:y,keywords:O,hide_title:k,hide_table_of_contents:j}}=E,{pluginId:C}=Object(m.useActivePlugin)({failfast:!0}),x=Object(m.useVersions)(C),I=Object(m.useActiveVersion)(C),L=x.length>1,A=b?`${b} ${s} ${n}`:n,S=Object(c.a)(y,{absolute:!0});return l.a.createElement(l.a.Fragment,null,l.a.createElement(r.a,null,l.a.createElement("title",null,A),l.a.createElement("meta",{property:"og:title",content:A}),f&&l.a.createElement("meta",{name:"description",content:f}),f&&l.a.createElement("meta",{property:"og:description",content:f}),O&&O.length&&l.a.createElement("meta",{name:"keywords",content:O.join(",")}),y&&l.a.createElement("meta",{property:"og:image",content:S}),y&&l.a.createElement("meta",{property:"twitter:image",content:S}),y&&l.a.createElement("meta",{name:"twitter:image:alt",content:"Image for "+b}),h&&l.a.createElement("meta",{property:"og:url",content:a+h}),h&&l.a.createElement("link",{rel:"canonical",href:a+h})),l.a.createElement("div",{className:Object(g.a)("container padding-vert--lg",v.a.docItemWrapper)},l.a.createElement("div",{className:"row"},l.a.createElement("div",{className:Object(g.a)("col",{[v.a.docItemCol]:!j})},l.a.createElement(d,null),l.a.createElement("div",{className:v.a.docItemContainer},l.a.createElement("article",null,L&&l.a.createElement("div",null,l.a.createElement("span",{className:"badge badge--secondary"},"Version: ",I.label)),!k&&l.a.createElement("header",null,l.a.createElement("h1",{className:v.a.docTitle},b)),l.a.createElement("div",{className:"markdown"},l.a.createElement(E,null))),(N||_||w)&&l.a.createElement("div",{className:"margin-vert--xl"},l.a.createElement("div",{className:"row"},l.a.createElement("div",{className:"col"},N&&l.a.createElement("a",{href:N,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")),(_||w)&&l.a.createElement("div",{className:"col text--right"},l.a.createElement("em",null,l.a.createElement("small",null,"Last updated"," ",_&&l.a.createElement(l.a.Fragment,null,"on"," ",l.a.createElement("time",{dateTime:new Date(1e3*_).toISOString(),className:v.a.docLastUpdatedAt},new Date(1e3*_).toLocaleDateString()),w&&" "),w&&l.a.createElement(l.a.Fragment,null,"by ",l.a.createElement("strong",null,w)),!1))))),l.a.createElement("div",{className:"margin-vert--lg"},l.a.createElement(o,{metadata:p})))),!j&&E.rightToc&&l.a.createElement("div",{className:"col col--3"},l.a.createElement(u.a,{headings:E.rightToc})))))}},473:function(e,t,a){"use strict";var n=a(0),l=a.n(n);var r=function(e,t,a){const[l,r]=Object(n.useState)(void 0);Object(n.useEffect)((()=>{let n,i;function c(){const c=function(){let e=0,t=null;for(n=document.getElementsByClassName("anchor");e<n.length&&!t;){const l=n[e],{top:r}=l.getBoundingClientRect();r>=0&&r<=a&&(t=l),e+=1}return t}();if(c){let a=0,n=!1;for(i=document.getElementsByClassName(e);a<i.length&&!n;){const e=i[a],{href:s}=e,o=decodeURIComponent(s.substring(s.indexOf("#")+1));c.id===o&&(l&&l.classList.remove(t),e.classList.add(t),r(e),n=!0),a+=1}}}return document.addEventListener("scroll",c),document.addEventListener("resize",c),c(),()=>{document.removeEventListener("scroll",c),document.removeEventListener("resize",c)}}))},i=a(46),c=a.n(i);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 r(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/17b5adee.dc914a2c.js b/docs/17b5adee.db532509.js
similarity index 92%
rename from docs/17b5adee.dc914a2c.js
rename to docs/17b5adee.db532509.js
index 91e835b537..30db3babb8 100644
--- a/docs/17b5adee.dc914a2c.js
+++ b/docs/17b5adee.db532509.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return d}));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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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):p(p({},t),e)),n},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 n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,l=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,p(p({ref:t},l),{},{components:n})):a.a.createElement(d,p({ref:t},l))}));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 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<o;l++)i[l]=n[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},313:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-step-8c593fd75d3829ee2e6928c3e3c32372.png"},75:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(290)),i={title:"Plot / Line / Step"},p={unversionedId:"examples/plot-step",id:"examples/plot-step",isDocsHomePage:!1,title:"Plot / Line / Step",description:"Make a line plot with a step curve.",source:"@site/docs/examples/plot-step.md",slug:"/examples/plot-step",permalink:"/wave/docs/examples/plot-step",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-step.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Line / Smooth",permalink:"/wave/docs/examples/plot-line-smooth"},next:{title:"Plot / Line / Step / After",permalink:"/wave/docs/examples/plot-step-after"}},c=[],l={rightToc:c};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a line plot with a step curve."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(313).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='Line, step',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', curve='step', y_min=0)])\n))\n\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{292:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return d}));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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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):p(p({},t),e)),n},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 n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,l=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,p(p({ref:t},l),{},{components:n})):a.a.createElement(d,p({ref:t},l))}));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 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<o;l++)i[l]=n[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},315:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-step-8c593fd75d3829ee2e6928c3e3c32372.png"},76:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(292)),i={title:"Plot / Line / Step"},p={unversionedId:"examples/plot-step",id:"examples/plot-step",isDocsHomePage:!1,title:"Plot / Line / Step",description:"Make a line plot with a step curve.",source:"@site/docs/examples/plot-step.md",slug:"/examples/plot-step",permalink:"/wave/docs/examples/plot-step",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-step.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Line / Smooth",permalink:"/wave/docs/examples/plot-line-smooth"},next:{title:"Plot / Line / Step / After",permalink:"/wave/docs/examples/plot-step-after"}},c=[],l={rightToc:c};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a line plot with a step curve."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(315).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='Line, step',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', curve='step', y_min=0)])\n))\n\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/18fdb351.682c7b8a.js b/docs/18fdb351.95cf7208.js
similarity index 96%
rename from docs/18fdb351.682c7b8a.js
rename to docs/18fdb351.95cf7208.js
index f8e3dc46f2..0db6931945 100644
--- a/docs/18fdb351.682c7b8a.js
+++ b/docs/18fdb351.95cf7208.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{290:function(e,n,r){"use strict";r.d(n,"a",(function(){return l})),r.d(n,"b",(function(){return u}));var t=r(0),i=r.n(t);function a(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function o(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 c(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?o(Object(r),!0).forEach((function(n){a(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function s(e,n){if(null==e)return{};var r,t,i=function(e,n){if(null==e)return{};var r,t,i={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||(i[r]=e[r]);return i}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}var g=i.a.createContext({}),d=function(e){var n=i.a.useContext(g),r=n;return e&&(r="function"==typeof e?e(n):c(c({},n),e)),r},l=function(e){var n=d(e.components);return i.a.createElement(g.Provider,{value:n},e.children)},p={inlineCode:"code",wrapper:function(e){var n=e.children;return i.a.createElement(i.a.Fragment,{},n)}},_=i.a.forwardRef((function(e,n){var r=e.components,t=e.mdxType,a=e.originalType,o=e.parentName,g=s(e,["components","mdxType","originalType","parentName"]),l=d(r),_=t,u=l["".concat(o,".").concat(_)]||l[_]||p[_]||a;return r?i.a.createElement(u,c(c({ref:n},g),{},{components:r})):i.a.createElement(u,c({ref:n},g))}));function u(e,n){var r=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var a=r.length,o=new Array(a);o[0]=_;var c={};for(var s in n)hasOwnProperty.call(n,s)&&(c[s]=n[s]);c.originalType=e,c.mdxType="string"==typeof e?e:t,o[1]=c;for(var g=2;g<a;g++)o[g]=r[g];return i.a.createElement.apply(null,o)}return i.a.createElement.apply(null,r)}_.displayName="MDXCreateElement"},314:function(e,n,r){"use strict";r.r(n),n.default=r.p+"assets/images/glider-gun-8acc444425a295f814222e258d6ca3e3.png"},76:function(e,n,r){"use strict";r.r(n),r.d(n,"frontMatter",(function(){return o})),r.d(n,"metadata",(function(){return c})),r.d(n,"rightToc",(function(){return s})),r.d(n,"default",(function(){return d}));var t=r(2),i=r(6),a=(r(0),r(290)),o={title:"Graphics / Glider Gun"},c={unversionedId:"examples/glider-gun",id:"examples/glider-gun",isDocsHomePage:!1,title:"Graphics / Glider Gun",description:"Use the graphics API to play Conway's Game of Life - Gosper's Glider Gun",source:"@site/docs/examples/glider-gun.md",slug:"/examples/glider-gun",permalink:"/wave/docs/examples/glider-gun",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/glider-gun.md",version:"current",sidebar:"someSidebar",previous:{title:"Graphics / Hilbert",permalink:"/wave/docs/examples/graphics-hilbert"},next:{title:"Package h2o_wave",permalink:"/wave/docs/api/index"}},s=[],g={rightToc:s};function d(e){var n=e.components,o=Object(i.a)(e,["components"]);return Object(a.b)("wrapper",Object(t.a)({},g,o,{components:n,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use the graphics API to play Conway's Game of Life - Gosper's Glider Gun\n",Object(a.b)("a",Object(t.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life"}),"https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life")),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(314).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"import time\nfrom copy import deepcopy\nfrom h2o_wave import site, ui, graphics as g\n\n\ndef get_neighbors(row, col):\n    neighbors = [\n        (r, c) for r in range(row - 1, row + 2) for c in range(col - 1, col + 2)\n    ]\n    neighbors.remove((row, col))\n    return neighbors\n\n\ndef get_num_living(grid_state, neighbors):\n    return sum([grid_state.get(x, 0) for x in neighbors])\n\n\ndef evaluate_grid(grid_state):\n    new_grid_state = deepcopy(grid_state)\n    for cell, state in grid_state.items():\n        neighbors = get_neighbors(*cell)\n        n_living = get_num_living(grid_state, neighbors)\n        if state == 0 and n_living == 3:\n            new_grid_state[cell] = 1\n        elif state == 1:\n            if not 1 < n_living < 4:\n                new_grid_state[cell] = 0\n    return new_grid_state\n\n\ndef get_empty_state(n_rows, n_cols):\n    return {(r, c): 0 for r in range(n_rows) for c in range(n_cols)}\n\n\ndef apply_start_state(grid_state, pattern):\n    for x in pattern:\n        grid_state[x] = 1\n    return grid_state\n\n\ndef update_grid(page, grid_state, n_rows, n_cols, background):\n    scene = page['game'].scene\n    for row in range(n_rows):\n        for col in range(n_cols):\n            if grid_state[(row, col)] == 1:\n                g.draw(scene[f'cell_{row}_{col}'], fill='black')\n            else:\n                g.draw(scene[f'cell_{row}_{col}'], fill=background)\n    page.save()\n\n\ndef create_grid(n_rows, n_cols, fill, width, height, stroke, stroke_width):\n    grid = {}\n    for row in range(n_rows):\n        for col in range(n_cols):\n            grid[f'cell_{row}_{col}'] = g.rect(\n                x=col * width,\n                y=row * height,\n                width=width,\n                height=height,\n                fill=fill,\n                stroke=stroke,\n                stroke_width=stroke_width,\n            )\n    return grid\n\n\ndef render(pattern):\n    page = site['/demo']\n\n    page_cols = 4\n    page_rows = 5\n\n    box_width = 134\n    box_height = 76\n    gap = 15\n\n    max_width = box_width * page_cols + (page_cols - 1) * gap\n    max_height = box_height * page_rows + (page_rows - 1) * gap\n\n    width = 10\n    height = 10\n\n    grid_cols = max_width // width\n    grid_rows = max_height // height\n\n    background = 'whitesmoke'\n    stroke = 'gainsboro'\n    stroke_width = 1\n\n    grid = create_grid(\n        grid_rows, grid_cols, background, width, height, stroke, stroke_width\n    )\n    page['game'] = ui.graphics_card(\n        box=f'1 1 {page_cols} {page_rows}',\n        view_box=f'0 0 {max_width} {max_height}',\n        width='100%',\n        height='100%',\n        scene=g.scene(**grid),\n    )\n\n    grid_state = get_empty_state(grid_rows, grid_cols)\n    update_grid(page, grid_state, grid_rows, grid_cols, background)\n\n    grid_state = apply_start_state(grid_state, pattern)\n\n    update_grid(page, grid_state, grid_rows, grid_cols, background)\n\n    while True:\n        time.sleep(0.1)\n        new_grid_state = evaluate_grid(grid_state)\n        update_grid(page, new_grid_state, grid_rows, grid_cols, background)\n        grid_state = new_grid_state\n\n\ndef make_glider_gun(r, c):\n    return [\n        (r, c + 24),\n        (r + 1, c + 22),\n        (r + 1, c + 24),\n        (r + 2, c + 12),\n        (r + 2, c + 13),\n        (r + 2, c + 20),\n        (r + 2, c + 21),\n        (r + 2, c + 34),\n        (r + 2, c + 35),\n        (r + 3, c + 11),\n        (r + 3, c + 15),\n        (r + 3, c + 20),\n        (r + 3, c + 21),\n        (r + 3, c + 34),\n        (r + 3, c + 35),\n        (r + 4, c + 0),\n        (r + 4, c + 1),\n        (r + 4, c + 10),\n        (r + 4, c + 16),\n        (r + 4, c + 20),\n        (r + 4, c + 21),\n        (r + 5, c + 0),\n        (r + 5, c + 1),\n        (r + 5, c + 10),\n        (r + 5, c + 14),\n        (r + 5, c + 16),\n        (r + 5, c + 17),\n        (r + 5, c + 22),\n        (r + 5, c + 24),\n        (r + 6, c + 10),\n        (r + 6, c + 16),\n        (r + 6, c + 24),\n        (r + 7, c + 11),\n        (r + 7, c + 15),\n        (r + 8, c + 12),\n        (r + 8, c + 13),\n    ]\n\n\nrender(make_glider_gun(2, 2))\n")))}d.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{292:function(e,n,r){"use strict";r.d(n,"a",(function(){return l})),r.d(n,"b",(function(){return u}));var t=r(0),i=r.n(t);function a(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function o(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 c(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?o(Object(r),!0).forEach((function(n){a(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function s(e,n){if(null==e)return{};var r,t,i=function(e,n){if(null==e)return{};var r,t,i={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||(i[r]=e[r]);return i}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}var g=i.a.createContext({}),d=function(e){var n=i.a.useContext(g),r=n;return e&&(r="function"==typeof e?e(n):c(c({},n),e)),r},l=function(e){var n=d(e.components);return i.a.createElement(g.Provider,{value:n},e.children)},p={inlineCode:"code",wrapper:function(e){var n=e.children;return i.a.createElement(i.a.Fragment,{},n)}},_=i.a.forwardRef((function(e,n){var r=e.components,t=e.mdxType,a=e.originalType,o=e.parentName,g=s(e,["components","mdxType","originalType","parentName"]),l=d(r),_=t,u=l["".concat(o,".").concat(_)]||l[_]||p[_]||a;return r?i.a.createElement(u,c(c({ref:n},g),{},{components:r})):i.a.createElement(u,c({ref:n},g))}));function u(e,n){var r=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var a=r.length,o=new Array(a);o[0]=_;var c={};for(var s in n)hasOwnProperty.call(n,s)&&(c[s]=n[s]);c.originalType=e,c.mdxType="string"==typeof e?e:t,o[1]=c;for(var g=2;g<a;g++)o[g]=r[g];return i.a.createElement.apply(null,o)}return i.a.createElement.apply(null,r)}_.displayName="MDXCreateElement"},316:function(e,n,r){"use strict";r.r(n),n.default=r.p+"assets/images/glider-gun-8acc444425a295f814222e258d6ca3e3.png"},77:function(e,n,r){"use strict";r.r(n),r.d(n,"frontMatter",(function(){return o})),r.d(n,"metadata",(function(){return c})),r.d(n,"rightToc",(function(){return s})),r.d(n,"default",(function(){return d}));var t=r(2),i=r(6),a=(r(0),r(292)),o={title:"Graphics / Glider Gun"},c={unversionedId:"examples/glider-gun",id:"examples/glider-gun",isDocsHomePage:!1,title:"Graphics / Glider Gun",description:"Use the graphics API to play Conway's Game of Life - Gosper's Glider Gun",source:"@site/docs/examples/glider-gun.md",slug:"/examples/glider-gun",permalink:"/wave/docs/examples/glider-gun",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/glider-gun.md",version:"current",sidebar:"someSidebar",previous:{title:"Graphics / Hilbert",permalink:"/wave/docs/examples/graphics-hilbert"},next:{title:"Package h2o_wave",permalink:"/wave/docs/api/index"}},s=[],g={rightToc:s};function d(e){var n=e.components,o=Object(i.a)(e,["components"]);return Object(a.b)("wrapper",Object(t.a)({},g,o,{components:n,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use the graphics API to play Conway's Game of Life - Gosper's Glider Gun\n",Object(a.b)("a",Object(t.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life"}),"https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life")),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(316).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"import time\nfrom copy import deepcopy\nfrom h2o_wave import site, ui, graphics as g\n\n\ndef get_neighbors(row, col):\n    neighbors = [\n        (r, c) for r in range(row - 1, row + 2) for c in range(col - 1, col + 2)\n    ]\n    neighbors.remove((row, col))\n    return neighbors\n\n\ndef get_num_living(grid_state, neighbors):\n    return sum([grid_state.get(x, 0) for x in neighbors])\n\n\ndef evaluate_grid(grid_state):\n    new_grid_state = deepcopy(grid_state)\n    for cell, state in grid_state.items():\n        neighbors = get_neighbors(*cell)\n        n_living = get_num_living(grid_state, neighbors)\n        if state == 0 and n_living == 3:\n            new_grid_state[cell] = 1\n        elif state == 1:\n            if not 1 < n_living < 4:\n                new_grid_state[cell] = 0\n    return new_grid_state\n\n\ndef get_empty_state(n_rows, n_cols):\n    return {(r, c): 0 for r in range(n_rows) for c in range(n_cols)}\n\n\ndef apply_start_state(grid_state, pattern):\n    for x in pattern:\n        grid_state[x] = 1\n    return grid_state\n\n\ndef update_grid(page, grid_state, n_rows, n_cols, background):\n    scene = page['game'].scene\n    for row in range(n_rows):\n        for col in range(n_cols):\n            if grid_state[(row, col)] == 1:\n                g.draw(scene[f'cell_{row}_{col}'], fill='black')\n            else:\n                g.draw(scene[f'cell_{row}_{col}'], fill=background)\n    page.save()\n\n\ndef create_grid(n_rows, n_cols, fill, width, height, stroke, stroke_width):\n    grid = {}\n    for row in range(n_rows):\n        for col in range(n_cols):\n            grid[f'cell_{row}_{col}'] = g.rect(\n                x=col * width,\n                y=row * height,\n                width=width,\n                height=height,\n                fill=fill,\n                stroke=stroke,\n                stroke_width=stroke_width,\n            )\n    return grid\n\n\ndef render(pattern):\n    page = site['/demo']\n\n    page_cols = 4\n    page_rows = 5\n\n    box_width = 134\n    box_height = 76\n    gap = 15\n\n    max_width = box_width * page_cols + (page_cols - 1) * gap\n    max_height = box_height * page_rows + (page_rows - 1) * gap\n\n    width = 10\n    height = 10\n\n    grid_cols = max_width // width\n    grid_rows = max_height // height\n\n    background = 'whitesmoke'\n    stroke = 'gainsboro'\n    stroke_width = 1\n\n    grid = create_grid(\n        grid_rows, grid_cols, background, width, height, stroke, stroke_width\n    )\n    page['game'] = ui.graphics_card(\n        box=f'1 1 {page_cols} {page_rows}',\n        view_box=f'0 0 {max_width} {max_height}',\n        width='100%',\n        height='100%',\n        scene=g.scene(**grid),\n    )\n\n    grid_state = get_empty_state(grid_rows, grid_cols)\n    update_grid(page, grid_state, grid_rows, grid_cols, background)\n\n    grid_state = apply_start_state(grid_state, pattern)\n\n    update_grid(page, grid_state, grid_rows, grid_cols, background)\n\n    while True:\n        time.sleep(0.1)\n        new_grid_state = evaluate_grid(grid_state)\n        update_grid(page, new_grid_state, grid_rows, grid_cols, background)\n        grid_state = new_grid_state\n\n\ndef make_glider_gun(r, c):\n    return [\n        (r, c + 24),\n        (r + 1, c + 22),\n        (r + 1, c + 24),\n        (r + 2, c + 12),\n        (r + 2, c + 13),\n        (r + 2, c + 20),\n        (r + 2, c + 21),\n        (r + 2, c + 34),\n        (r + 2, c + 35),\n        (r + 3, c + 11),\n        (r + 3, c + 15),\n        (r + 3, c + 20),\n        (r + 3, c + 21),\n        (r + 3, c + 34),\n        (r + 3, c + 35),\n        (r + 4, c + 0),\n        (r + 4, c + 1),\n        (r + 4, c + 10),\n        (r + 4, c + 16),\n        (r + 4, c + 20),\n        (r + 4, c + 21),\n        (r + 5, c + 0),\n        (r + 5, c + 1),\n        (r + 5, c + 10),\n        (r + 5, c + 14),\n        (r + 5, c + 16),\n        (r + 5, c + 17),\n        (r + 5, c + 22),\n        (r + 5, c + 24),\n        (r + 6, c + 10),\n        (r + 6, c + 16),\n        (r + 6, c + 24),\n        (r + 7, c + 11),\n        (r + 7, c + 15),\n        (r + 8, c + 12),\n        (r + 8, c + 13),\n    ]\n\n\nrender(make_glider_gun(2, 2))\n")))}d.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/190e4f21.3960ce2c.js b/docs/190e4f21.969e5a0e.js
similarity index 92%
rename from docs/190e4f21.3960ce2c.js
rename to docs/190e4f21.969e5a0e.js
index f2f3534074..44aa5cf7d2 100644
--- a/docs/190e4f21.3960ce2c.js
+++ b/docs/190e4f21.969e5a0e.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),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 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=o.a.createContext({}),s=function(e){var t=o.a.useContext(l),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(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 n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,l=p(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},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,i=new Array(a);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:r,i[1]=c;for(var l=2;l<a;l++)i[l]=n[l];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},315:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-point-custom-2a5eefc8951352109b57a03aa44baeb8.png"},77:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return s}));var r=n(2),o=n(6),a=(n(0),n(290)),i={title:"Plot / Point / Custom"},c={unversionedId:"examples/plot-point-custom",id:"examples/plot-point-custom",isDocsHomePage:!1,title:"Plot / Point / Custom",description:"Customize a plot's fill/stroke color, size and opacity.",source:"@site/docs/examples/plot-point-custom.md",slug:"/examples/plot-point-custom",permalink:"/wave/docs/examples/plot-point-custom",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point-custom.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Point / Annotation",permalink:"/wave/docs/examples/plot-point-annotation"},next:{title:"Plot / Interval",permalink:"/wave/docs/examples/plot-interval"}},p=[],l={rightToc:p};function s(e){var t=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Customize a plot's fill/stroke color, size and opacity."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(315).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import random\n\nfrom synth import FakeScatter\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 40\nf = FakeScatter()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Point, custom',\n    data=data('price performance discount', n),\n    plot=ui.plot([ui.mark(type='point', x='=price', y='=performance', size='=discount', size_range='4 30',\n                          fill_color='#eb4559', stroke_color='#eb4559', stroke_size=1, fill_opacity=0.3,\n                          stroke_opacity=1)])\n))\nv.data = [(x, y, random.randint(1, 10)) for x, y in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{292:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),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 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=o.a.createContext({}),s=function(e){var t=o.a.useContext(l),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(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 n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,l=p(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},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,i=new Array(a);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:r,i[1]=c;for(var l=2;l<a;l++)i[l]=n[l];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},317:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-point-custom-2a5eefc8951352109b57a03aa44baeb8.png"},78:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return s}));var r=n(2),o=n(6),a=(n(0),n(292)),i={title:"Plot / Point / Custom"},c={unversionedId:"examples/plot-point-custom",id:"examples/plot-point-custom",isDocsHomePage:!1,title:"Plot / Point / Custom",description:"Customize a plot's fill/stroke color, size and opacity.",source:"@site/docs/examples/plot-point-custom.md",slug:"/examples/plot-point-custom",permalink:"/wave/docs/examples/plot-point-custom",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point-custom.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Point / Annotation",permalink:"/wave/docs/examples/plot-point-annotation"},next:{title:"Plot / Interval",permalink:"/wave/docs/examples/plot-interval"}},p=[],l={rightToc:p};function s(e){var t=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Customize a plot's fill/stroke color, size and opacity."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(317).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import random\n\nfrom synth import FakeScatter\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 40\nf = FakeScatter()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Point, custom',\n    data=data('price performance discount', n),\n    plot=ui.plot([ui.mark(type='point', x='=price', y='=performance', size='=discount', size_range='4 30',\n                          fill_color='#eb4559', stroke_color='#eb4559', stroke_size=1, fill_opacity=0.3,\n                          stroke_opacity=1)])\n))\nv.data = [(x, y, random.randint(1, 10)) for x, y in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/1a20bc57.a5744ee9.js b/docs/1a20bc57.a5744ee9.js
new file mode 100644
index 0000000000..722df9ab5d
--- /dev/null
+++ b/docs/1a20bc57.a5744ee9.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{292:function(e,n,t){"use strict";t.d(n,"a",(function(){return b})),t.d(n,"b",(function(){return d}));var a=t(0),r=t.n(a);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 c(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function l(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?c(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function p(e,n){if(null==e)return{};var t,a,r=function(e,n){if(null==e)return{};var t,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)t=o[a],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)t=o[a],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var i=r.a.createContext({}),u=function(e){var n=r.a.useContext(i),t=n;return e&&(t="function"==typeof e?e(n):l(l({},n),e)),t},b=function(e){var n=u(e.components);return r.a.createElement(i.Provider,{value:n},e.children)},s={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,c=e.parentName,i=p(e,["components","mdxType","originalType","parentName"]),b=u(t),m=a,d=b["".concat(c,".").concat(m)]||b[m]||s[m]||o;return t?r.a.createElement(d,l(l({ref:n},i),{},{components:t})):r.a.createElement(d,l({ref:n},i))}));function d(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var o=t.length,c=new Array(o);c[0]=m;var l={};for(var p in n)hasOwnProperty.call(n,p)&&(l[p]=n[p]);l.originalType=e,l.mdxType="string"==typeof e?e:a,c[1]=l;for(var i=2;i<o;i++)c[i]=t[i];return r.a.createElement.apply(null,c)}return r.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},79:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return c})),t.d(n,"metadata",(function(){return l})),t.d(n,"rightToc",(function(){return p})),t.d(n,"default",(function(){return u}));var a=t(2),r=t(6),o=(t(0),t(292)),c={title:"Command Line Interface"},l={unversionedId:"cli",id:"cli",isDocsHomePage:!1,title:"Command Line Interface",description:"The CLI is accessible using the wave command, available once you pip install h2o-wave.",source:"@site/docs/cli.md",slug:"/cli",permalink:"/wave/docs/cli",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/cli.md",version:"current",sidebar:"someSidebar",previous:{title:"Logging",permalink:"/wave/docs/logging"},next:{title:"Development",permalink:"/wave/docs/development"}},p=[{value:"wave run",id:"wave-run",children:[]}],i={rightToc:p};function u(e){var n=e.components,t=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},i,t,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"The CLI is accessible using the ",Object(o.b)("inlineCode",{parentName:"p"},"wave")," command, available once you ",Object(o.b)("inlineCode",{parentName:"p"},"pip install h2o-wave"),"."),Object(o.b)("p",null,"To view a list of sub-commands, simply run ",Object(o.b)("inlineCode",{parentName:"p"},"wave"),":"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"$ wave\n")),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{}),"Usage: wave [OPTIONS] COMMAND [ARGS]...\n\nOptions:\n  --help  Show this message and exit.\n\nCommands:\n  run  Run an app.\n")),Object(o.b)("p",null,"Get help on a sub-command:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"$ wave <command> --help\n")),Object(o.b)("h2",{id:"wave-run"},"wave run"),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"wave run")," runs an app."),Object(o.b)("p",null,"Run app.py with auto reload:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"$ wave run app\n")),Object(o.b)("p",null,"Run path/to/app.py with auto reload:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"$ wave run path.to.app\n")),Object(o.b)("p",null,"Run path/to/app.py without auto reload:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"$ wave run --no-reload path.to.app\n")))}u.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/1a4f1376.f1042d0a.js b/docs/1a4f1376.30660dfb.js
similarity index 90%
rename from docs/1a4f1376.f1042d0a.js
rename to docs/1a4f1376.30660dfb.js
index ff8346db37..bff2b528dc 100644
--- a/docs/1a4f1376.f1042d0a.js
+++ b/docs/1a4f1376.30660dfb.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{290:function(e,r,t){"use strict";t.d(r,"a",(function(){return d})),t.d(r,"b",(function(){return h}));var n=t(0),o=t.n(n);function i(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function c(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 a(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?c(Object(t),!0).forEach((function(r){i(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function l(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var s=o.a.createContext({}),u=function(e){var r=o.a.useContext(s),t=r;return e&&(t="function"==typeof e?e(r):a(a({},r),e)),t},d=function(e){var r=u(e.components);return o.a.createElement(s.Provider,{value:r},e.children)},f={inlineCode:"code",wrapper:function(e){var r=e.children;return o.a.createElement(o.a.Fragment,{},r)}},m=o.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,i=e.originalType,c=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),d=u(t),m=n,h=d["".concat(c,".").concat(m)]||d[m]||f[m]||i;return t?o.a.createElement(h,a(a({ref:r},s),{},{components:t})):o.a.createElement(h,a({ref:r},s))}));function h(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var i=t.length,c=new Array(i);c[0]=m;var a={};for(var l in r)hasOwnProperty.call(r,l)&&(a[l]=r[l]);a.originalType=e,a.mdxType="string"==typeof e?e:n,c[1]=a;for(var s=2;s<i;s++)c[s]=t[s];return o.a.createElement.apply(null,c)}return o.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},316:function(e,r,t){"use strict";t.r(r),r.default="data:image/png;base64,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"},78:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return c})),t.d(r,"metadata",(function(){return a})),t.d(r,"rightToc",(function(){return l})),t.d(r,"default",(function(){return u}));var n=t(2),o=t(6),i=(t(0),t(290)),c={title:"Form / Picker / Selection"},a={unversionedId:"examples/picker-selection",id:"examples/picker-selection",isDocsHomePage:!1,title:"Form / Picker / Selection",description:"Pre-select choices while displaying a picker.",source:"@site/docs/examples/picker-selection.md",slug:"/examples/picker-selection",permalink:"/wave/docs/examples/picker-selection",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/picker-selection.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Picker",permalink:"/wave/docs/examples/picker"},next:{title:"Form / Dropdown",permalink:"/wave/docs/examples/dropdown"}},l=[],s={rightToc:l};function u(e){var r=e.components,c=Object(o.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},s,c,{components:r,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Pre-select choices while displaying a picker."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+t(316).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'selected={q.args.picker}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n          ui.picker(name='picker', label='Picker with initial values', choices=[\n            ui.choice(name='spam', label='Spam'),\n            ui.choice(name='eggs', label= 'Eggs'),\n            ui.choice(name='ham', label= 'Ham'),\n            ui.choice(name='cheese', label='Cheese'),\n            ui.choice(name='beans', label='Beans'),\n            ui.choice(name='toast', label='Toast'),\n          ], values=['spam','eggs']),\n          ui.button(name='show_inputs', label='Submit', primary=True),\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([[29],{292:function(e,r,t){"use strict";t.d(r,"a",(function(){return d})),t.d(r,"b",(function(){return h}));var n=t(0),o=t.n(n);function i(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function c(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 a(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?c(Object(t),!0).forEach((function(r){i(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function l(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var s=o.a.createContext({}),u=function(e){var r=o.a.useContext(s),t=r;return e&&(t="function"==typeof e?e(r):a(a({},r),e)),t},d=function(e){var r=u(e.components);return o.a.createElement(s.Provider,{value:r},e.children)},f={inlineCode:"code",wrapper:function(e){var r=e.children;return o.a.createElement(o.a.Fragment,{},r)}},m=o.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,i=e.originalType,c=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),d=u(t),m=n,h=d["".concat(c,".").concat(m)]||d[m]||f[m]||i;return t?o.a.createElement(h,a(a({ref:r},s),{},{components:t})):o.a.createElement(h,a({ref:r},s))}));function h(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var i=t.length,c=new Array(i);c[0]=m;var a={};for(var l in r)hasOwnProperty.call(r,l)&&(a[l]=r[l]);a.originalType=e,a.mdxType="string"==typeof e?e:n,c[1]=a;for(var s=2;s<i;s++)c[s]=t[s];return o.a.createElement.apply(null,c)}return o.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},318:function(e,r,t){"use strict";t.r(r),r.default="data:image/png;base64,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"},80:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return c})),t.d(r,"metadata",(function(){return a})),t.d(r,"rightToc",(function(){return l})),t.d(r,"default",(function(){return u}));var n=t(2),o=t(6),i=(t(0),t(292)),c={title:"Form / Picker / Selection"},a={unversionedId:"examples/picker-selection",id:"examples/picker-selection",isDocsHomePage:!1,title:"Form / Picker / Selection",description:"Pre-select choices while displaying a picker.",source:"@site/docs/examples/picker-selection.md",slug:"/examples/picker-selection",permalink:"/wave/docs/examples/picker-selection",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/picker-selection.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Picker",permalink:"/wave/docs/examples/picker"},next:{title:"Form / Dropdown",permalink:"/wave/docs/examples/dropdown"}},l=[],s={rightToc:l};function u(e){var r=e.components,c=Object(o.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},s,c,{components:r,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Pre-select choices while displaying a picker."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+t(318).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'selected={q.args.picker}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.picker(name='picker', label='Picker with initial values', choices=[\n                ui.choice(name='spam', label='Spam'),\n                ui.choice(name='eggs', label='Eggs'),\n                ui.choice(name='ham', label='Ham'),\n                ui.choice(name='cheese', label='Cheese'),\n                ui.choice(name='beans', label='Beans'),\n                ui.choice(name='toast', label='Toast'),\n            ], values=['spam', 'eggs']),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n")))}u.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/1ac8922b.ecb893d7.js b/docs/1ac8922b.6db144ec.js
similarity index 92%
rename from docs/1ac8922b.ecb893d7.js
rename to docs/1ac8922b.6db144ec.js
index 73ff15b9c0..fa5fd55e7d 100644
--- a/docs/1ac8922b.ecb893d7.js
+++ b/docs/1ac8922b.6db144ec.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return m}));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 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 p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=o.a.createContext({}),s=function(e){var t=o.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},u=function(e){var t=s(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)}},d=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,c=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),u=s(n),d=r,m=u["".concat(c,".").concat(d)]||u[d]||f[d]||a;return n?o.a.createElement(m,p(p({ref:t},l),{},{components:n})):o.a.createElement(m,p({ref:t},l))}));function m(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 p={};for(var i in t)hasOwnProperty.call(t,i)&&(p[i]=t[i]);p.originalType=e,p.mdxType="string"==typeof e?e:r,c[1]=p;for(var l=2;l<a;l++)c[l]=n[l];return o.a.createElement.apply(null,c)}return o.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},317:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-point-groups-d949b54bdc3583a858a7cc8c46532c90.png"},79:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return i})),n.d(t,"default",(function(){return s}));var r=n(2),o=n(6),a=(n(0),n(290)),c={title:"Plot / Point / Groups"},p={unversionedId:"examples/plot-point-groups",id:"examples/plot-point-groups",isDocsHomePage:!1,title:"Plot / Point / Groups",description:"Make a scatterplot with categories encoded as colors.",source:"@site/docs/examples/plot-point-groups.md",slug:"/examples/plot-point-groups",permalink:"/wave/docs/examples/plot-point-groups",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point-groups.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Point / Map",permalink:"/wave/docs/examples/plot-point-map"},next:{title:"Plot / Point / Annotation",permalink:"/wave/docs/examples/plot-point-annotation"}},i=[],l={rightToc:i};function s(e){var t=e.components,c=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},l,c,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Make a scatterplot with categories encoded as colors."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(317).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeScatter\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\n\ndef create_fake_row(g, f, n):\n    return [(g, x, y) for x, y in [f.next() for _ in range(n)]]\n\n\nn = 30\nf1, f2, f3 = FakeScatter(), FakeScatter(), FakeScatter()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Point, groups',\n    data=data('product price performance', n * 3),\n    plot=ui.plot([ui.mark(type='point', x='=price', y='=performance', color='=product', shape='circle')])\n))\nv.data = create_fake_row('G1', f1, n) + create_fake_row('G2', f1, n) + create_fake_row('G3', f1, n)\n\npage.save()\n")))}s.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{292:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return m}));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 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 p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=o.a.createContext({}),s=function(e){var t=o.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},u=function(e){var t=s(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)}},d=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,c=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),u=s(n),d=r,m=u["".concat(c,".").concat(d)]||u[d]||f[d]||a;return n?o.a.createElement(m,p(p({ref:t},l),{},{components:n})):o.a.createElement(m,p({ref:t},l))}));function m(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 p={};for(var i in t)hasOwnProperty.call(t,i)&&(p[i]=t[i]);p.originalType=e,p.mdxType="string"==typeof e?e:r,c[1]=p;for(var l=2;l<a;l++)c[l]=n[l];return o.a.createElement.apply(null,c)}return o.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},319:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-point-groups-d949b54bdc3583a858a7cc8c46532c90.png"},81:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return i})),n.d(t,"default",(function(){return s}));var r=n(2),o=n(6),a=(n(0),n(292)),c={title:"Plot / Point / Groups"},p={unversionedId:"examples/plot-point-groups",id:"examples/plot-point-groups",isDocsHomePage:!1,title:"Plot / Point / Groups",description:"Make a scatterplot with categories encoded as colors.",source:"@site/docs/examples/plot-point-groups.md",slug:"/examples/plot-point-groups",permalink:"/wave/docs/examples/plot-point-groups",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point-groups.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Point / Map",permalink:"/wave/docs/examples/plot-point-map"},next:{title:"Plot / Point / Annotation",permalink:"/wave/docs/examples/plot-point-annotation"}},i=[],l={rightToc:i};function s(e){var t=e.components,c=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},l,c,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Make a scatterplot with categories encoded as colors."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(319).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeScatter\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\n\ndef create_fake_row(g, f, n):\n    return [(g, x, y) for x, y in [f.next() for _ in range(n)]]\n\n\nn = 30\nf1, f2, f3 = FakeScatter(), FakeScatter(), FakeScatter()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Point, groups',\n    data=data('product price performance', n * 3),\n    plot=ui.plot([ui.mark(type='point', x='=price', y='=performance', color='=product', shape='circle')])\n))\nv.data = create_fake_row('G1', f1, n) + create_fake_row('G2', f1, n) + create_fake_row('G3', f1, n)\n\npage.save()\n")))}s.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/1ae86ebe.c9a5d67f.js b/docs/1ae86ebe.c0744f6c.js
similarity index 92%
rename from docs/1ae86ebe.c9a5d67f.js
rename to docs/1ae86ebe.c0744f6c.js
index 16148c3c3b..6d54d97831 100644
--- a/docs/1ae86ebe.c9a5d67f.js
+++ b/docs/1ae86ebe.c0744f6c.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{290:function(e,t,r){"use strict";r.d(t,"a",(function(){return m})),r.d(t,"b",(function(){return f}));var n=r(0),a=r.n(n);function s(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 i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){s(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},s=Object.keys(e);for(n=0;n<s.length;n++)r=s[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(n=0;n<s.length;n++)r=s[n],t.indexOf(r)>=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):i(i({},t),e)),r},m=function(e){var t=u(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},l={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,s=e.originalType,o=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),m=u(r),b=n,f=m["".concat(o,".").concat(b)]||m[b]||l[b]||s;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 s=r.length,o=new Array(s);o[0]=b;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:n,o[1]=i;for(var p=2;p<s;p++)o[p]=r[p];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,r)}b.displayName="MDXCreateElement"},318:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/message-bar-d893610affc5c6857a7cbf1546ad8326.png"},80:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return o})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return c})),r.d(t,"default",(function(){return u}));var n=r(2),a=r(6),s=(r(0),r(290)),o={title:"Form / Message Bar"},i={unversionedId:"examples/message-bar",id:"examples/message-bar",isDocsHomePage:!1,title:"Form / Message Bar",description:"Use message bars to indicate relevant status information.",source:"@site/docs/examples/message-bar.md",slug:"/examples/message-bar",permalink:"/wave/docs/examples/message-bar",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/message-bar.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Progress / Updating",permalink:"/wave/docs/examples/progress-update"},next:{title:"Form / Textbox",permalink:"/wave/docs/examples/textbox"}},c=[],p={rightToc:c};function u(e){var t=e.components,o=Object(a.a)(e,["components"]);return Object(s.b)("wrapper",Object(n.a)({},p,o,{components:t,mdxType:"MDXLayout"}),Object(s.b)("p",null,"Use message bars to indicate relevant status information."),Object(s.b)("div",{className:"cover",style:{backgroundImage:"url("+r(318).default+")"}}),Object(s.b)("pre",null,Object(s.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from 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.message_bar(type='blocked', text='This action is blocked.'),\n        ui.message_bar(type='error', text='This is an error message'),\n        ui.message_bar(type='warning', text='This is a warning message.'),\n        ui.message_bar(type='info', text='This is an information message.'),\n        ui.message_bar(type='success', text='This is an success message.'),\n        ui.message_bar(type='danger', text='This is a danger message.'),\n    ]\n)\npage.save()\n")))}u.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{292:function(e,t,r){"use strict";r.d(t,"a",(function(){return m})),r.d(t,"b",(function(){return f}));var n=r(0),a=r.n(n);function s(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 i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){s(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},s=Object.keys(e);for(n=0;n<s.length;n++)r=s[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(n=0;n<s.length;n++)r=s[n],t.indexOf(r)>=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):i(i({},t),e)),r},m=function(e){var t=u(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},l={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,s=e.originalType,o=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),m=u(r),b=n,f=m["".concat(o,".").concat(b)]||m[b]||l[b]||s;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 s=r.length,o=new Array(s);o[0]=b;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:n,o[1]=i;for(var p=2;p<s;p++)o[p]=r[p];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,r)}b.displayName="MDXCreateElement"},320:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/message-bar-d893610affc5c6857a7cbf1546ad8326.png"},82:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return o})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return c})),r.d(t,"default",(function(){return u}));var n=r(2),a=r(6),s=(r(0),r(292)),o={title:"Form / Message Bar"},i={unversionedId:"examples/message-bar",id:"examples/message-bar",isDocsHomePage:!1,title:"Form / Message Bar",description:"Use message bars to indicate relevant status information.",source:"@site/docs/examples/message-bar.md",slug:"/examples/message-bar",permalink:"/wave/docs/examples/message-bar",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/message-bar.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Progress / Updating",permalink:"/wave/docs/examples/progress-update"},next:{title:"Form / Textbox",permalink:"/wave/docs/examples/textbox"}},c=[],p={rightToc:c};function u(e){var t=e.components,o=Object(a.a)(e,["components"]);return Object(s.b)("wrapper",Object(n.a)({},p,o,{components:t,mdxType:"MDXLayout"}),Object(s.b)("p",null,"Use message bars to indicate relevant status information."),Object(s.b)("div",{className:"cover",style:{backgroundImage:"url("+r(320).default+")"}}),Object(s.b)("pre",null,Object(s.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from 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.message_bar(type='blocked', text='This action is blocked.'),\n        ui.message_bar(type='error', text='This is an error message'),\n        ui.message_bar(type='warning', text='This is a warning message.'),\n        ui.message_bar(type='info', text='This is an information message.'),\n        ui.message_bar(type='success', text='This is an success message.'),\n        ui.message_bar(type='danger', text='This is a danger message.'),\n    ]\n)\npage.save()\n")))}u.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/1b0f8c91.0f45df95.js b/docs/1b0f8c91.0f45df95.js
deleted file mode 100644
index 9b4d9f678a..0000000000
--- a/docs/1b0f8c91.0f45df95.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{290:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return d}));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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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):i(i({},t),e)),n},s=function(e){var t=u(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},b={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,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),s=u(n),m=r,d=s["".concat(c,".").concat(m)]||s[m]||b[m]||o;return n?a.a.createElement(d,i(i({ref:t},p),{},{components:n})):a.a.createElement(d,i({ref:t},p))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,c=new Array(o);c[0]=m;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 p=2;p<o;p++)c[p]=n[p];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},81:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return u}));var r=n(2),a=n(6),o=(n(0),n(290)),c={title:"Backup and Recovery"},i={unversionedId:"backup",id:"backup",isDocsHomePage:!1,title:"Backup and Recovery",description:"This feature is experimental. Do not rely on this in production!",source:"@site/docs/backup.md",slug:"/backup",permalink:"/wave/docs/backup",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/backup.md",version:"current",sidebar:"someSidebar",previous:{title:"Configuration",permalink:"/wave/docs/configuration"},next:{title:"Introduction",permalink:"/wave/docs/enterprise/"}},l=[],p={rightToc:l};function u(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("div",{className:"admonition admonition-caution alert alert--warning"},Object(o.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(r.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(r.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}),Object(o.b)("path",Object(r.a)({parentName:"svg"},{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})))),"caution")),Object(o.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"This feature is experimental. Do not rely on this in production!"))),Object(o.b)("p",null,"The Wave server logs all content changes to ",Object(o.b)("inlineCode",{parentName:"p"},"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."),Object(o.b)("p",null,"To capture the log, redirect ",Object(o.b)("inlineCode",{parentName:"p"},"stderr")," to a file when you launch the server:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-shell"}),"./wave 2> backup.log\n")),Object(o.b)("p",null,"To recover state, feed the log file back in the next time you launch the server:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-shell"}),"./wave -init backup.log\n")),Object(o.b)("p",null,"To recover state and continue capturing the log, use:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-shell"}),"./wave -init backup.log 2> other.log\n")),Object(o.b)("p",null,"If you end up with a big log file, you can compact it like this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-shell"}),"./wave -compact big.log 2> small.log\n")))}u.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/1b0f8c91.42e9bcf0.js b/docs/1b0f8c91.42e9bcf0.js
new file mode 100644
index 0000000000..44ffc0b58d
--- /dev/null
+++ b/docs/1b0f8c91.42e9bcf0.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{292:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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):i(i({},t),e)),n},s=function(e){var t=u(e.components);return a.a.createElement(p.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,p=l(e,["components","mdxType","originalType","parentName"]),s=u(n),d=r,m=s["".concat(c,".").concat(d)]||s[d]||b[d]||o;return n?a.a.createElement(m,i(i({ref:t},p),{},{components:n})):a.a.createElement(m,i({ref:t},p))}));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 p=2;p<o;p++)c[p]=n[p];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},83:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return u}));var r=n(2),a=n(6),o=(n(0),n(292)),c={title:"Backup and Recovery"},i={unversionedId:"backup",id:"backup",isDocsHomePage:!1,title:"Backup and Recovery",description:"This feature is experimental. Do not rely on this in production!",source:"@site/docs/backup.md",slug:"/backup",permalink:"/wave/docs/backup",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/backup.md",version:"current",sidebar:"someSidebar",previous:{title:"Deployment",permalink:"/wave/docs/deployment"},next:{title:"Introduction",permalink:"/wave/docs/enterprise/"}},l=[],p={rightToc:l};function u(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("div",{className:"admonition admonition-caution alert alert--warning"},Object(o.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(r.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(r.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}),Object(o.b)("path",Object(r.a)({parentName:"svg"},{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})))),"caution")),Object(o.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"This feature is experimental. Do not rely on this in production!"))),Object(o.b)("p",null,"The Wave server logs all content changes to ",Object(o.b)("inlineCode",{parentName:"p"},"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."),Object(o.b)("p",null,"To capture the log, redirect ",Object(o.b)("inlineCode",{parentName:"p"},"stderr")," to a file when you launch the server:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-shell"}),"./waved 2> backup.log\n")),Object(o.b)("p",null,"To recover state, feed the log file back in the next time you launch the server:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-shell"}),"./waved -init backup.log\n")),Object(o.b)("p",null,"To recover state and continue capturing the log, use:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-shell"}),"./waved -init backup.log 2> other.log\n")),Object(o.b)("p",null,"If you end up with a big log file, you can compact it like this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-shell"}),"./waved -compact big.log 2> small.log\n")))}u.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/1c59264e.ad6835f8.js b/docs/1c59264e.021a8962.js
similarity index 89%
rename from docs/1c59264e.ad6835f8.js
rename to docs/1c59264e.021a8962.js
index 1de1125cb8..e9aabf0c53 100644
--- a/docs/1c59264e.ad6835f8.js
+++ b/docs/1c59264e.021a8962.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{290:function(e,r,t){"use strict";t.d(r,"a",(function(){return u})),t.d(r,"b",(function(){return d}));var n=t(0),a=t.n(n);function c(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 o(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?i(Object(t),!0).forEach((function(r){c(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function s(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},c=Object.keys(e);for(n=0;n<c.length;n++)t=c[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)t=c[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var l=a.a.createContext({}),p=function(e){var r=a.a.useContext(l),t=r;return e&&(t="function"==typeof e?e(r):o(o({},r),e)),t},u=function(e){var r=p(e.components);return a.a.createElement(l.Provider,{value:r},e.children)},m={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},w=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,c=e.originalType,i=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),u=p(t),w=n,d=u["".concat(i,".").concat(w)]||u[w]||m[w]||c;return t?a.a.createElement(d,o(o({ref:r},l),{},{components:t})):a.a.createElement(d,o({ref:r},l))}));function d(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var c=t.length,i=new Array(c);i[0]=w;var o={};for(var s in r)hasOwnProperty.call(r,s)&&(o[s]=r[s]);o.originalType=e,o.mdxType="string"==typeof e?e:n,i[1]=o;for(var l=2;l<c;l++)i[l]=t[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}w.displayName="MDXCreateElement"},321:function(e,r,t){"use strict";t.r(r),r.default="data:image/png;base64,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"},84:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return i})),t.d(r,"metadata",(function(){return o})),t.d(r,"rightToc",(function(){return s})),t.d(r,"default",(function(){return p}));var n=t(2),a=t(6),c=(t(0),t(290)),i={title:"Form / Swatch Picker"},o={unversionedId:"examples/swatch-picker",id:"examples/swatch-picker",isDocsHomePage:!1,title:"Form / Swatch Picker",description:"Use a swatch picker to allow users to choose a from a specific set of colors.",source:"@site/docs/examples/swatch-picker.md",slug:"/examples/swatch-picker",permalink:"/wave/docs/examples/swatch-picker",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/swatch-picker.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Color Picker",permalink:"/wave/docs/examples/color-picker"},next:{title:"Form / Tabs",permalink:"/wave/docs/examples/tabs"}},s=[],l={rightToc:s};function p(e){var r=e.components,i=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(n.a)({},l,i,{components:r,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Use a swatch picker to allow users to choose a from a specific set of colors."),Object(c.b)("div",{className:"cover",style:{backgroundImage:"url("+t(321).default+")"}}),Object(c.b)("pre",null,Object(c.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'swatch={q.args.swatch}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.color_picker(\n                name='swatch',\n                label='Pick a swatch',\n                choices=[\n                    '#011627', '#2EC4B6', '#E71D36', '#FF9F1C', '#50514F',\n                    '#F25F5C', '#FFE066', '#247BA0', '#70C1B3', '#FDFFFC',\n                ]),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}p.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{292:function(e,r,t){"use strict";t.d(r,"a",(function(){return u})),t.d(r,"b",(function(){return d}));var n=t(0),a=t.n(n);function c(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 o(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?i(Object(t),!0).forEach((function(r){c(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function s(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},c=Object.keys(e);for(n=0;n<c.length;n++)t=c[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)t=c[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var l=a.a.createContext({}),p=function(e){var r=a.a.useContext(l),t=r;return e&&(t="function"==typeof e?e(r):o(o({},r),e)),t},u=function(e){var r=p(e.components);return a.a.createElement(l.Provider,{value:r},e.children)},m={inlineCode:"code",wrapper:function(e){var r=e.children;return a.a.createElement(a.a.Fragment,{},r)}},w=a.a.forwardRef((function(e,r){var t=e.components,n=e.mdxType,c=e.originalType,i=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),u=p(t),w=n,d=u["".concat(i,".").concat(w)]||u[w]||m[w]||c;return t?a.a.createElement(d,o(o({ref:r},l),{},{components:t})):a.a.createElement(d,o({ref:r},l))}));function d(e,r){var t=arguments,n=r&&r.mdxType;if("string"==typeof e||n){var c=t.length,i=new Array(c);i[0]=w;var o={};for(var s in r)hasOwnProperty.call(r,s)&&(o[s]=r[s]);o.originalType=e,o.mdxType="string"==typeof e?e:n,i[1]=o;for(var l=2;l<c;l++)i[l]=t[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}w.displayName="MDXCreateElement"},323:function(e,r,t){"use strict";t.r(r),r.default="data:image/png;base64,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"},86:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return i})),t.d(r,"metadata",(function(){return o})),t.d(r,"rightToc",(function(){return s})),t.d(r,"default",(function(){return p}));var n=t(2),a=t(6),c=(t(0),t(292)),i={title:"Form / Swatch Picker"},o={unversionedId:"examples/swatch-picker",id:"examples/swatch-picker",isDocsHomePage:!1,title:"Form / Swatch Picker",description:"Use a swatch picker to allow users to choose a from a specific set of colors.",source:"@site/docs/examples/swatch-picker.md",slug:"/examples/swatch-picker",permalink:"/wave/docs/examples/swatch-picker",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/swatch-picker.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Color Picker",permalink:"/wave/docs/examples/color-picker"},next:{title:"Form / Tabs",permalink:"/wave/docs/examples/tabs"}},s=[],l={rightToc:s};function p(e){var r=e.components,i=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(n.a)({},l,i,{components:r,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Use a swatch picker to allow users to choose a from a specific set of colors."),Object(c.b)("div",{className:"cover",style:{backgroundImage:"url("+t(323).default+")"}}),Object(c.b)("pre",null,Object(c.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'swatch={q.args.swatch}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.color_picker(\n                name='swatch',\n                label='Pick a swatch',\n                choices=[\n                    '#011627', '#2EC4B6', '#E71D36', '#FF9F1C', '#50514F',\n                    '#F25F5C', '#FFE066', '#247BA0', '#70C1B3', '#FDFFFC',\n                ]),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n")))}p.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/1cc3ff79.a774c9c2.js b/docs/1cc3ff79.d36455e4.js
similarity index 92%
rename from docs/1cc3ff79.a774c9c2.js
rename to docs/1cc3ff79.d36455e4.js
index b4a2e6f52c..74e77abd84 100644
--- a/docs/1cc3ff79.a774c9c2.js
+++ b/docs/1cc3ff79.d36455e4.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),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 p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=o.a.createContext({}),l=function(e){var t=o.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 o.a.createElement(s.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 n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),u=l(n),d=r,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||a;return n?o.a.createElement(f,p(p({ref:t},s),{},{components:n})):o.a.createElement(f,p({ref:t},s))}));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 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 s=2;s<a;s++)i[s]=n[s];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},322:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-point-sizes-8591d0b3d70acfe4b28d08c74515ed4d.png"},85:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return l}));var r=n(2),o=n(6),a=(n(0),n(290)),i={title:"Plot / Point / Sizes"},p={unversionedId:"examples/plot-point-sizes",id:"examples/plot-point-sizes",isDocsHomePage:!1,title:"Plot / Point / Sizes",description:'Make a scatterplot with mark sizes mapped to a continuous variable (a "bubble plot").',source:"@site/docs/examples/plot-point-sizes.md",slug:"/examples/plot-point-sizes",permalink:"/wave/docs/examples/plot-point-sizes",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point-sizes.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Point / Shapes",permalink:"/wave/docs/examples/plot-point-shapes"},next:{title:"Plot / Point / Map",permalink:"/wave/docs/examples/plot-point-map"}},c=[],s={rightToc:c};function l(e){var t=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},s,i,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,'Make a scatterplot with mark sizes mapped to a continuous variable (a "bubble plot").'),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(322).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import random\n\nfrom synth import FakeScatter\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 40\nf = FakeScatter()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Point, sized',\n    data=data('price performance discount', n),\n    plot=ui.plot([ui.mark(type='point', x='=price', y='=performance', size='=discount')])\n))\nv.data = [(x, y, random.randint(1, 10)) for x, y in [f.next() for _ in range(n)]]\n\npage.save()\n")))}l.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{292:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),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 p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=o.a.createContext({}),l=function(e){var t=o.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 o.a.createElement(s.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 n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),u=l(n),d=r,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||a;return n?o.a.createElement(f,p(p({ref:t},s),{},{components:n})):o.a.createElement(f,p({ref:t},s))}));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 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 s=2;s<a;s++)i[s]=n[s];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},324:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-point-sizes-8591d0b3d70acfe4b28d08c74515ed4d.png"},87:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return l}));var r=n(2),o=n(6),a=(n(0),n(292)),i={title:"Plot / Point / Sizes"},p={unversionedId:"examples/plot-point-sizes",id:"examples/plot-point-sizes",isDocsHomePage:!1,title:"Plot / Point / Sizes",description:'Make a scatterplot with mark sizes mapped to a continuous variable (a "bubble plot").',source:"@site/docs/examples/plot-point-sizes.md",slug:"/examples/plot-point-sizes",permalink:"/wave/docs/examples/plot-point-sizes",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point-sizes.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Point / Shapes",permalink:"/wave/docs/examples/plot-point-shapes"},next:{title:"Plot / Point / Map",permalink:"/wave/docs/examples/plot-point-map"}},c=[],s={rightToc:c};function l(e){var t=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},s,i,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,'Make a scatterplot with mark sizes mapped to a continuous variable (a "bubble plot").'),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(324).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import random\n\nfrom synth import FakeScatter\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 40\nf = FakeScatter()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Point, sized',\n    data=data('price performance discount', n),\n    plot=ui.plot([ui.mark(type='point', x='=price', y='=performance', size='=discount')])\n))\nv.data = [(x, y, random.randint(1, 10)) for x, y in [f.next() for _ in range(n)]]\n\npage.save()\n")))}l.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/1f7c204c.0cf3b132.js b/docs/1f7c204c.d6a6621a.js
similarity index 98%
rename from docs/1f7c204c.0cf3b132.js
rename to docs/1f7c204c.d6a6621a.js
index 316c66b87e..d6ae1dea76 100644
--- a/docs/1f7c204c.0cf3b132.js
+++ b/docs/1f7c204c.d6a6621a.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{290:function(e,t,a){"use strict";a.d(t,"a",(function(){return s})),a.d(t,"b",(function(){return O}));var i=a(0),n=a.n(i);function c(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,i)}return a}function r(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?o(Object(a),!0).forEach((function(t){c(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function b(e,t){if(null==e)return{};var a,i,n=function(e,t){if(null==e)return{};var a,i,n={},c=Object.keys(e);for(i=0;i<c.length;i++)a=c[i],t.indexOf(a)>=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(i=0;i<c.length;i++)a=c[i],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var l=n.a.createContext({}),p=function(e){var t=n.a.useContext(l),a=t;return e&&(a="function"==typeof e?e(t):r(r({},t),e)),a},s=function(e){var t=p(e.components);return n.a.createElement(l.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,i=e.mdxType,c=e.originalType,o=e.parentName,l=b(e,["components","mdxType","originalType","parentName"]),s=p(a),d=i,O=s["".concat(o,".").concat(d)]||s[d]||u[d]||c;return a?n.a.createElement(O,r(r({ref:t},l),{},{components:a})):n.a.createElement(O,r({ref:t},l))}));function O(e,t){var a=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var c=a.length,o=new Array(c);o[0]=d;var r={};for(var b in t)hasOwnProperty.call(t,b)&&(r[b]=t[b]);r.originalType=e,r.mdxType="string"==typeof e?e:i,o[1]=r;for(var l=2;l<c;l++)o[l]=a[l];return n.a.createElement.apply(null,o)}return n.a.createElement.apply(null,a)}d.displayName="MDXCreateElement"},86:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return o})),a.d(t,"metadata",(function(){return r})),a.d(t,"rightToc",(function(){return b})),a.d(t,"default",(function(){return p}));var i=a(2),n=a(6),c=(a(0),a(290)),o={title:"Components"},r={unversionedId:"components",id:"components",isDocsHomePage:!1,title:"Components",description:"Components are blocks of interactive content (inputs, commands, notifications, graphics) contained in a form card.",source:"@site/docs/components.md",slug:"/components",permalink:"/wave/docs/components",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/components.md",version:"current",sidebar:"someSidebar",previous:{title:"Data Buffers",permalink:"/wave/docs/buffers"},next:{title:"Event Arguments",permalink:"/wave/docs/arguments"}},b=[{value:"Content",id:"content",children:[{value:"Text",id:"text",children:[]},{value:"Label",id:"label",children:[]},{value:"Link",id:"link",children:[]},{value:"Template",id:"template",children:[]},{value:"HTML",id:"html",children:[]},{value:"Inline frame",id:"inline-frame",children:[]},{value:"Table",id:"table",children:[]}]},{value:"Inputs",id:"inputs",children:[{value:"Checkbox",id:"checkbox",children:[]},{value:"Checklist",id:"checklist",children:[]},{value:"Choice Group",id:"choice-group",children:[]},{value:"Color Picker",id:"color-picker",children:[]},{value:"Combo Box",id:"combo-box",children:[]},{value:"Date Picker",id:"date-picker",children:[]},{value:"Dropdown",id:"dropdown",children:[]},{value:"File Upload",id:"file-upload",children:[]},{value:"Picker",id:"picker",children:[]},{value:"Range Slider",id:"range-slider",children:[]},{value:"Slider",id:"slider",children:[]},{value:"Spin Box",id:"spin-box",children:[]},{value:"Table",id:"table-1",children:[]},{value:"Textbox",id:"textbox",children:[]},{value:"Toggle",id:"toggle",children:[]}]},{value:"Commands",id:"commands",children:[{value:"Command",id:"command",children:[]},{value:"Button",id:"button",children:[]},{value:"Button Set",id:"button-set",children:[]},{value:"Tabs",id:"tabs",children:[]}]},{value:"Engagement",id:"engagement",children:[{value:"Message Bar",id:"message-bar",children:[]},{value:"Progress Bar",id:"progress-bar",children:[]},{value:"Stepper",id:"stepper",children:[]}]},{value:"Graphics",id:"graphics",children:[{value:"Visualization",id:"visualization",children:[]},{value:"Vega-lite Visualization",id:"vega-lite-visualization",children:[]}]},{value:"Utilities",id:"utilities",children:[{value:"Expander",id:"expander",children:[]},{value:"Separator",id:"separator",children:[]}]}],l={rightToc:b};function p(e){var t=e.components,a=Object(n.a)(e,["components"]);return Object(c.b)("wrapper",Object(i.a)({},l,a,{components:t,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Components are blocks of interactive content (inputs, commands, notifications, graphics) contained in a ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#form_card"}),"form card"),"."),Object(c.b)("div",{className:"admonition admonition-info alert alert--info"},Object(c.b)("div",Object(i.a)({parentName:"div"},{className:"admonition-heading"}),Object(c.b)("h5",{parentName:"div"},Object(c.b)("span",Object(i.a)({parentName:"h5"},{className:"admonition-icon"}),Object(c.b)("svg",Object(i.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(c.b)("path",Object(i.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(c.b)("div",Object(i.a)({parentName:"div"},{className:"admonition-content"}),Object(c.b)("p",{parentName:"div"},"Several of the components below allow users to input information or interact with them in some way. To know what the user did, see ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/arguments"}),"event arguments"),"."))),Object(c.b)("h2",{id:"content"},"Content"),Object(c.b)("h3",{id:"text"},"Text"),Object(c.b)("p",null,"Use ",Object(c.b)("inlineCode",{parentName:"p"},"text()")," or one of its variants to display text content. Markdown works, too. ",Object(c.b)("inlineCode",{parentName:"p"},"text_xl()")," and ",Object(c.b)("inlineCode",{parentName:"p"},"text_l()")," support context menus."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#text"}),"ui.text()")," ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#text_l"}),"ui.text_l()")," ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#text_m"}),"ui.text_m()")," ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#text_s"}),"ui.text_s()")," ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#text_xl"}),"ui.text_xl()")," ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#text_xs"}),"ui.text_xs()")),Object(c.b)("h3",{id:"label"},"Label"),Object(c.b)("p",null,"Use a label to give a name or title to other components."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#label"}),"ui.label()")),Object(c.b)("h3",{id:"link"},"Link"),Object(c.b)("p",null,"Use ",Object(c.b)("inlineCode",{parentName:"p"},"link()")," to display a hyperlink."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#link"}),"ui.link()")),Object(c.b)("h3",{id:"template"},"Template"),Object(c.b)("p",null,"Use ",Object(c.b)("inlineCode",{parentName:"p"},"template()")," to render dynamic content using HTML."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#template"}),"ui.template()")),Object(c.b)("h3",{id:"html"},"HTML"),Object(c.b)("p",null,"Use ",Object(c.b)("inlineCode",{parentName:"p"},"markup()")," to display raw HTML."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#markup"}),"ui.markup()")),Object(c.b)("h3",{id:"inline-frame"},"Inline frame"),Object(c.b)("p",null,"Use ",Object(c.b)("inlineCode",{parentName:"p"},"frame()")," to embed external HTML content using an inline frame."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#frame"}),"ui.frame()")),Object(c.b)("h3",{id:"table"},"Table"),Object(c.b)("p",null,"Use a table to display tabular data. A table also functions as an input element, and can report row(s) selection, useful for building ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Master%E2%80%93detail_interface"}),"master-detail")," views."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#table"}),"ui.table()")),Object(c.b)("h2",{id:"inputs"},"Inputs"),Object(c.b)("h3",{id:"checkbox"},"Checkbox"),Object(c.b)("p",null,"Use a checkbox to allow switching between two mutually exclusive options (checked/unchecked or on/off)."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#checkbox"}),"ui.checkbox()")),Object(c.b)("h3",{id:"checklist"},"Checklist"),Object(c.b)("p",null,"Use a checklist to display a list of checkboxes."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#checklist"}),"ui.checklist()")),Object(c.b)("h3",{id:"choice-group"},"Choice Group"),Object(c.b)("p",null,"Use a choice group (also called ",Object(c.b)("em",{parentName:"p"},"radio buttons"),") to allow switching between more than two mutually exclusive options."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#choice_group"}),"ui.choice_group()")),Object(c.b)("h3",{id:"color-picker"},"Color Picker"),Object(c.b)("p",null,"Use a color picker to allow pick colors or swatches."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#color_picker"}),"ui.color_picker()")),Object(c.b)("h3",{id:"combo-box"},"Combo Box"),Object(c.b)("p",null,"Use a combo box to allow picking from a list of choices, or typing in custom values."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#combobox"}),"ui.combobox()")),Object(c.b)("h3",{id:"date-picker"},"Date Picker"),Object(c.b)("p",null,"Use a date picker to allow picking a date."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#date_picker"}),"ui.date_picker()")),Object(c.b)("h3",{id:"dropdown"},"Dropdown"),Object(c.b)("p",null,"Use a dropdown to allow picking from a list of choices."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#dropdown"}),"ui.dropdown()")),Object(c.b)("h3",{id:"file-upload"},"File Upload"),Object(c.b)("p",null,"Use a file upload component to allow uploading files."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#file_upload"}),"ui.file_upload()")),Object(c.b)("h3",{id:"picker"},"Picker"),Object(c.b)("p",null,"Use a picker component to allow picking multiple tags or labels from a list."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#picker"}),"ui.picker()")),Object(c.b)("h3",{id:"range-slider"},"Range Slider"),Object(c.b)("p",null,"Use a range slider to allow selecting a range of values within another range."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#range_slider"}),"ui.range_slider()")),Object(c.b)("h3",{id:"slider"},"Slider"),Object(c.b)("p",null,"Use a slider to allow selecting a value from a range of values."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#slider"}),"ui.slider()")),Object(c.b)("h3",{id:"spin-box"},"Spin Box"),Object(c.b)("p",null,"Use a spin box to allow incrementally adjusting a value in small steps."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#spinbox"}),"ui.spinbox()")),Object(c.b)("h3",{id:"table-1"},"Table"),Object(c.b)("p",null,"Use a table to display tabular data, or allow selecting one or more rows."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#table"}),"ui.table()")),Object(c.b)("h3",{id:"textbox"},"Textbox"),Object(c.b)("p",null,"Use a textbox to allow typing in text."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#textbox"}),"ui.textbox()")),Object(c.b)("h3",{id:"toggle"},"Toggle"),Object(c.b)("p",null,"Use a toggle to allow switching between two mutually exclusive options (checked/unchecked or on/off), while producing an immediate result.\nSee ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#toggle"}),"ui.toggle()")),Object(c.b)("h2",{id:"commands"},"Commands"),Object(c.b)("h3",{id:"command"},"Command"),Object(c.b)("p",null,"Use a command to define menu items for cards and components that support menus and context-menus."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#command"}),"ui.command()")),Object(c.b)("h3",{id:"button"},"Button"),Object(c.b)("p",null,"Use ",Object(c.b)("inlineCode",{parentName:"p"},"button()")," to display a clickable button."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#button"}),"ui.button()")),Object(c.b)("h3",{id:"button-set"},"Button Set"),Object(c.b)("p",null,"Use ",Object(c.b)("inlineCode",{parentName:"p"},"buttons()")," to display two or more buttons side by side."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#buttons"}),"ui.buttons()")),Object(c.b)("h3",{id:"tabs"},"Tabs"),Object(c.b)("p",null,"Use ",Object(c.b)("inlineCode",{parentName:"p"},"tabs()")," to display a set of tabs."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#tabs"}),"ui.tabs()")),Object(c.b)("h2",{id:"engagement"},"Engagement"),Object(c.b)("h3",{id:"message-bar"},"Message Bar"),Object(c.b)("p",null,"Use a message bar to display information, warning and error notifications."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#message_bar"}),"ui.message_bar()")),Object(c.b)("h3",{id:"progress-bar"},"Progress Bar"),Object(c.b)("p",null,"Use a progress bar to display progress information for tasks or operations."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#progress"}),"ui.progress()")),Object(c.b)("h3",{id:"stepper"},"Stepper"),Object(c.b)("p",null,"Use a stepper to display a sequence of steps in a process, and how many have been completed."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#stepper"}),"ui.stepper()")),Object(c.b)("h2",{id:"graphics"},"Graphics"),Object(c.b)("h3",{id:"visualization"},"Visualization"),Object(c.b)("p",null,"Use ",Object(c.b)("inlineCode",{parentName:"p"},"visualization()")," to display visualizations defined using Q's native ",Object(c.b)("inlineCode",{parentName:"p"},"plot()")," API, based on the ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"https://www.springer.com/gp/book/9780387245447"}),"Grammar of Graphics"),"."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#visualization"}),"ui.visualization()")),Object(c.b)("h3",{id:"vega-lite-visualization"},"Vega-lite Visualization"),Object(c.b)("p",null,"Use ",Object(c.b)("inlineCode",{parentName:"p"},"vega_visualization()")," to display visualization defined using ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"https://vega.github.io/vega-lite/"}),"Vega-Lite"),"."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#vega_visualization"}),"ui.vega_visualization()")),Object(c.b)("h2",{id:"utilities"},"Utilities"),Object(c.b)("h3",{id:"expander"},"Expander"),Object(c.b)("p",null,"Use an expander to show or hider a group of related components."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#expander"}),"ui.expander()")),Object(c.b)("h3",{id:"separator"},"Separator"),Object(c.b)("p",null,"Use a separator to visually separate components in to groups."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#separator"}),"ui.separator()")))}p.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{292:function(e,t,a){"use strict";a.d(t,"a",(function(){return s})),a.d(t,"b",(function(){return O}));var i=a(0),n=a.n(i);function c(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,i)}return a}function r(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?o(Object(a),!0).forEach((function(t){c(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function b(e,t){if(null==e)return{};var a,i,n=function(e,t){if(null==e)return{};var a,i,n={},c=Object.keys(e);for(i=0;i<c.length;i++)a=c[i],t.indexOf(a)>=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(i=0;i<c.length;i++)a=c[i],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var l=n.a.createContext({}),p=function(e){var t=n.a.useContext(l),a=t;return e&&(a="function"==typeof e?e(t):r(r({},t),e)),a},s=function(e){var t=p(e.components);return n.a.createElement(l.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,i=e.mdxType,c=e.originalType,o=e.parentName,l=b(e,["components","mdxType","originalType","parentName"]),s=p(a),d=i,O=s["".concat(o,".").concat(d)]||s[d]||u[d]||c;return a?n.a.createElement(O,r(r({ref:t},l),{},{components:a})):n.a.createElement(O,r({ref:t},l))}));function O(e,t){var a=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var c=a.length,o=new Array(c);o[0]=d;var r={};for(var b in t)hasOwnProperty.call(t,b)&&(r[b]=t[b]);r.originalType=e,r.mdxType="string"==typeof e?e:i,o[1]=r;for(var l=2;l<c;l++)o[l]=a[l];return n.a.createElement.apply(null,o)}return n.a.createElement.apply(null,a)}d.displayName="MDXCreateElement"},88:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return o})),a.d(t,"metadata",(function(){return r})),a.d(t,"rightToc",(function(){return b})),a.d(t,"default",(function(){return p}));var i=a(2),n=a(6),c=(a(0),a(292)),o={title:"Components"},r={unversionedId:"components",id:"components",isDocsHomePage:!1,title:"Components",description:"Components are blocks of interactive content (inputs, commands, notifications, graphics) contained in a form card.",source:"@site/docs/components.md",slug:"/components",permalink:"/wave/docs/components",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/components.md",version:"current",sidebar:"someSidebar",previous:{title:"Data Buffers",permalink:"/wave/docs/buffers"},next:{title:"Event Arguments",permalink:"/wave/docs/arguments"}},b=[{value:"Content",id:"content",children:[{value:"Text",id:"text",children:[]},{value:"Label",id:"label",children:[]},{value:"Link",id:"link",children:[]},{value:"Template",id:"template",children:[]},{value:"HTML",id:"html",children:[]},{value:"Inline frame",id:"inline-frame",children:[]},{value:"Table",id:"table",children:[]}]},{value:"Inputs",id:"inputs",children:[{value:"Checkbox",id:"checkbox",children:[]},{value:"Checklist",id:"checklist",children:[]},{value:"Choice Group",id:"choice-group",children:[]},{value:"Color Picker",id:"color-picker",children:[]},{value:"Combo Box",id:"combo-box",children:[]},{value:"Date Picker",id:"date-picker",children:[]},{value:"Dropdown",id:"dropdown",children:[]},{value:"File Upload",id:"file-upload",children:[]},{value:"Picker",id:"picker",children:[]},{value:"Range Slider",id:"range-slider",children:[]},{value:"Slider",id:"slider",children:[]},{value:"Spin Box",id:"spin-box",children:[]},{value:"Table",id:"table-1",children:[]},{value:"Textbox",id:"textbox",children:[]},{value:"Toggle",id:"toggle",children:[]}]},{value:"Commands",id:"commands",children:[{value:"Command",id:"command",children:[]},{value:"Button",id:"button",children:[]},{value:"Button Set",id:"button-set",children:[]},{value:"Tabs",id:"tabs",children:[]}]},{value:"Engagement",id:"engagement",children:[{value:"Message Bar",id:"message-bar",children:[]},{value:"Progress Bar",id:"progress-bar",children:[]},{value:"Stepper",id:"stepper",children:[]}]},{value:"Graphics",id:"graphics",children:[{value:"Visualization",id:"visualization",children:[]},{value:"Vega-lite Visualization",id:"vega-lite-visualization",children:[]}]},{value:"Utilities",id:"utilities",children:[{value:"Expander",id:"expander",children:[]},{value:"Separator",id:"separator",children:[]}]}],l={rightToc:b};function p(e){var t=e.components,a=Object(n.a)(e,["components"]);return Object(c.b)("wrapper",Object(i.a)({},l,a,{components:t,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Components are blocks of interactive content (inputs, commands, notifications, graphics) contained in a ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#form_card"}),"form card"),"."),Object(c.b)("div",{className:"admonition admonition-info alert alert--info"},Object(c.b)("div",Object(i.a)({parentName:"div"},{className:"admonition-heading"}),Object(c.b)("h5",{parentName:"div"},Object(c.b)("span",Object(i.a)({parentName:"h5"},{className:"admonition-icon"}),Object(c.b)("svg",Object(i.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(c.b)("path",Object(i.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(c.b)("div",Object(i.a)({parentName:"div"},{className:"admonition-content"}),Object(c.b)("p",{parentName:"div"},"Several of the components below allow users to input information or interact with them in some way. To know what the user did, see ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/arguments"}),"event arguments"),"."))),Object(c.b)("h2",{id:"content"},"Content"),Object(c.b)("h3",{id:"text"},"Text"),Object(c.b)("p",null,"Use ",Object(c.b)("inlineCode",{parentName:"p"},"text()")," or one of its variants to display text content. Markdown works, too. ",Object(c.b)("inlineCode",{parentName:"p"},"text_xl()")," and ",Object(c.b)("inlineCode",{parentName:"p"},"text_l()")," support context menus."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#text"}),"ui.text()")," ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#text_l"}),"ui.text_l()")," ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#text_m"}),"ui.text_m()")," ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#text_s"}),"ui.text_s()")," ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#text_xl"}),"ui.text_xl()")," ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#text_xs"}),"ui.text_xs()")),Object(c.b)("h3",{id:"label"},"Label"),Object(c.b)("p",null,"Use a label to give a name or title to other components."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#label"}),"ui.label()")),Object(c.b)("h3",{id:"link"},"Link"),Object(c.b)("p",null,"Use ",Object(c.b)("inlineCode",{parentName:"p"},"link()")," to display a hyperlink."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#link"}),"ui.link()")),Object(c.b)("h3",{id:"template"},"Template"),Object(c.b)("p",null,"Use ",Object(c.b)("inlineCode",{parentName:"p"},"template()")," to render dynamic content using HTML."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#template"}),"ui.template()")),Object(c.b)("h3",{id:"html"},"HTML"),Object(c.b)("p",null,"Use ",Object(c.b)("inlineCode",{parentName:"p"},"markup()")," to display raw HTML."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#markup"}),"ui.markup()")),Object(c.b)("h3",{id:"inline-frame"},"Inline frame"),Object(c.b)("p",null,"Use ",Object(c.b)("inlineCode",{parentName:"p"},"frame()")," to embed external HTML content using an inline frame."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#frame"}),"ui.frame()")),Object(c.b)("h3",{id:"table"},"Table"),Object(c.b)("p",null,"Use a table to display tabular data. A table also functions as an input element, and can report row(s) selection, useful for building ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Master%E2%80%93detail_interface"}),"master-detail")," views."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#table"}),"ui.table()")),Object(c.b)("h2",{id:"inputs"},"Inputs"),Object(c.b)("h3",{id:"checkbox"},"Checkbox"),Object(c.b)("p",null,"Use a checkbox to allow switching between two mutually exclusive options (checked/unchecked or on/off)."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#checkbox"}),"ui.checkbox()")),Object(c.b)("h3",{id:"checklist"},"Checklist"),Object(c.b)("p",null,"Use a checklist to display a list of checkboxes."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#checklist"}),"ui.checklist()")),Object(c.b)("h3",{id:"choice-group"},"Choice Group"),Object(c.b)("p",null,"Use a choice group (also called ",Object(c.b)("em",{parentName:"p"},"radio buttons"),") to allow switching between more than two mutually exclusive options."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#choice_group"}),"ui.choice_group()")),Object(c.b)("h3",{id:"color-picker"},"Color Picker"),Object(c.b)("p",null,"Use a color picker to allow pick colors or swatches."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#color_picker"}),"ui.color_picker()")),Object(c.b)("h3",{id:"combo-box"},"Combo Box"),Object(c.b)("p",null,"Use a combo box to allow picking from a list of choices, or typing in custom values."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#combobox"}),"ui.combobox()")),Object(c.b)("h3",{id:"date-picker"},"Date Picker"),Object(c.b)("p",null,"Use a date picker to allow picking a date."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#date_picker"}),"ui.date_picker()")),Object(c.b)("h3",{id:"dropdown"},"Dropdown"),Object(c.b)("p",null,"Use a dropdown to allow picking from a list of choices."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#dropdown"}),"ui.dropdown()")),Object(c.b)("h3",{id:"file-upload"},"File Upload"),Object(c.b)("p",null,"Use a file upload component to allow uploading files."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#file_upload"}),"ui.file_upload()")),Object(c.b)("h3",{id:"picker"},"Picker"),Object(c.b)("p",null,"Use a picker component to allow picking multiple tags or labels from a list."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#picker"}),"ui.picker()")),Object(c.b)("h3",{id:"range-slider"},"Range Slider"),Object(c.b)("p",null,"Use a range slider to allow selecting a range of values within another range."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#range_slider"}),"ui.range_slider()")),Object(c.b)("h3",{id:"slider"},"Slider"),Object(c.b)("p",null,"Use a slider to allow selecting a value from a range of values."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#slider"}),"ui.slider()")),Object(c.b)("h3",{id:"spin-box"},"Spin Box"),Object(c.b)("p",null,"Use a spin box to allow incrementally adjusting a value in small steps."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#spinbox"}),"ui.spinbox()")),Object(c.b)("h3",{id:"table-1"},"Table"),Object(c.b)("p",null,"Use a table to display tabular data, or allow selecting one or more rows."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#table"}),"ui.table()")),Object(c.b)("h3",{id:"textbox"},"Textbox"),Object(c.b)("p",null,"Use a textbox to allow typing in text."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#textbox"}),"ui.textbox()")),Object(c.b)("h3",{id:"toggle"},"Toggle"),Object(c.b)("p",null,"Use a toggle to allow switching between two mutually exclusive options (checked/unchecked or on/off), while producing an immediate result.\nSee ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#toggle"}),"ui.toggle()")),Object(c.b)("h2",{id:"commands"},"Commands"),Object(c.b)("h3",{id:"command"},"Command"),Object(c.b)("p",null,"Use a command to define menu items for cards and components that support menus and context-menus."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#command"}),"ui.command()")),Object(c.b)("h3",{id:"button"},"Button"),Object(c.b)("p",null,"Use ",Object(c.b)("inlineCode",{parentName:"p"},"button()")," to display a clickable button."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#button"}),"ui.button()")),Object(c.b)("h3",{id:"button-set"},"Button Set"),Object(c.b)("p",null,"Use ",Object(c.b)("inlineCode",{parentName:"p"},"buttons()")," to display two or more buttons side by side."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#buttons"}),"ui.buttons()")),Object(c.b)("h3",{id:"tabs"},"Tabs"),Object(c.b)("p",null,"Use ",Object(c.b)("inlineCode",{parentName:"p"},"tabs()")," to display a set of tabs."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#tabs"}),"ui.tabs()")),Object(c.b)("h2",{id:"engagement"},"Engagement"),Object(c.b)("h3",{id:"message-bar"},"Message Bar"),Object(c.b)("p",null,"Use a message bar to display information, warning and error notifications."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#message_bar"}),"ui.message_bar()")),Object(c.b)("h3",{id:"progress-bar"},"Progress Bar"),Object(c.b)("p",null,"Use a progress bar to display progress information for tasks or operations."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#progress"}),"ui.progress()")),Object(c.b)("h3",{id:"stepper"},"Stepper"),Object(c.b)("p",null,"Use a stepper to display a sequence of steps in a process, and how many have been completed."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#stepper"}),"ui.stepper()")),Object(c.b)("h2",{id:"graphics"},"Graphics"),Object(c.b)("h3",{id:"visualization"},"Visualization"),Object(c.b)("p",null,"Use ",Object(c.b)("inlineCode",{parentName:"p"},"visualization()")," to display visualizations defined using Q's native ",Object(c.b)("inlineCode",{parentName:"p"},"plot()")," API, based on the ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"https://www.springer.com/gp/book/9780387245447"}),"Grammar of Graphics"),"."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#visualization"}),"ui.visualization()")),Object(c.b)("h3",{id:"vega-lite-visualization"},"Vega-lite Visualization"),Object(c.b)("p",null,"Use ",Object(c.b)("inlineCode",{parentName:"p"},"vega_visualization()")," to display visualization defined using ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"https://vega.github.io/vega-lite/"}),"Vega-Lite"),"."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#vega_visualization"}),"ui.vega_visualization()")),Object(c.b)("h2",{id:"utilities"},"Utilities"),Object(c.b)("h3",{id:"expander"},"Expander"),Object(c.b)("p",null,"Use an expander to show or hider a group of related components."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#expander"}),"ui.expander()")),Object(c.b)("h3",{id:"separator"},"Separator"),Object(c.b)("p",null,"Use a separator to visually separate components in to groups."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(i.a)({parentName:"p"},{href:"/wave/docs/api/ui#separator"}),"ui.separator()")))}p.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/2.95b8a467.js b/docs/2.e94e8fdd.js
similarity index 90%
rename from docs/2.95b8a467.js
rename to docs/2.e94e8fdd.js
index 182062147b..cd020a6ed5 100644
--- a/docs/2.95b8a467.js
+++ b/docs/2.e94e8fdd.js
@@ -1,2 +1,2 @@
-/*! For license information please see 2.95b8a467.js.LICENSE.txt */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{295:function(e,t,a){"use strict";var n=a(2),r=a(0),c=a.n(r),o=a(292),l=a(296),s=a(291),i=a(294),u=a(10);const d="light",m="dark",f=e=>e===m?m:d,h=()=>u.a.canUseDOM?f(document.documentElement.getAttribute("data-theme")):d,b=e=>{try{localStorage.setItem("theme",f(e))}catch(t){console.error(t)}};var v=()=>{const{siteConfig:{themeConfig:{colorMode:{disableSwitch:e=!1}={}}={}}={}}=Object(s.a)(),[t,a]=Object(r.useState)(h),n=Object(r.useCallback)((()=>{a(d),b(d)}),[]),c=Object(r.useCallback)((()=>{a(m),b(m)}),[]);return Object(r.useEffect)((()=>{document.documentElement.setAttribute("data-theme",f(t))}),[t]),Object(r.useEffect)((()=>{if(!e)try{const e=localStorage.getItem("theme");null!==e&&a(f(e))}catch(t){console.error(t)}}),[a]),Object(r.useEffect)((()=>{e||window.matchMedia("(prefers-color-scheme: dark)").addListener((({matches:e})=>{a(e?m:d)}))}),[]),{isDarkTheme:t===m,setLightTheme:n,setDarkTheme:c}},p=a(469);var g=function(e){const{isDarkTheme:t,setLightTheme:a,setDarkTheme:n}=v();return c.a.createElement(p.a.Provider,{value:{isDarkTheme:t,setLightTheme:a,setDarkTheme:n}},e.children)};const k="docusaurus.tab.";var E=()=>{const[e,t]=Object(r.useState)({}),a=Object(r.useCallback)(((e,t)=>{try{localStorage.setItem("docusaurus.tab."+e,t)}catch(a){console.error(a)}}),[]);return Object(r.useEffect)((()=>{try{const e={};for(let t=0;t<localStorage.length;t+=1){const a=localStorage.key(t);if(a.startsWith(k)){e[a.substring(k.length)]=localStorage.getItem(a)}}t(e)}catch(e){console.error(e)}}),[]),{tabGroupChoices:e,setTabGroupChoices:(e,n)=>{t((t=>({...t,[e]:n}))),a(e,n)}}};const O="docusaurus.announcement.dismiss",y="docusaurus.announcement.id";var j=()=>{const{announcementBar:e}=Object(s.a)().siteConfig.themeConfig,[t,a]=Object(r.useState)(!0),n=Object(r.useCallback)((()=>{localStorage.setItem(O,"true"),a(!0)}),[]);return Object(r.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=localStorage.getItem(y);"annoucement-bar"===n&&(n="announcement-bar");const r=t!==n;localStorage.setItem(y,t),r&&localStorage.setItem(O,"false"),(r||"false"===localStorage.getItem(O))&&a(!1)}),[]),{isAnnouncementBarClosed:t,closeAnnouncementBar:n}},_=a(470);var w=function(e){const{tabGroupChoices:t,setTabGroupChoices:a}=E(),{isAnnouncementBarClosed:n,closeAnnouncementBar:r}=j();return c.a.createElement(_.a.Provider,{value:{tabGroupChoices:t,setTabGroupChoices:a,isAnnouncementBarClosed:n,closeAnnouncementBar:r}},e.children)},C=a(471),N=a(51),S=a.n(N);var T=function(){const{siteConfig:{themeConfig:{announcementBar:e={}}={}}={}}=Object(s.a)(),{content:t,backgroundColor:a,textColor:n,isCloseable:r}=e,{isAnnouncementBarClosed:l,closeAnnouncementBar:i}=Object(C.a)();return!t||r&&l?null:c.a.createElement("div",{className:S.a.announcementBar,style:{backgroundColor:a,color:n},role:"banner"},c.a.createElement("div",{className:Object(o.a)(S.a.announcementBarContent,{[S.a.announcementBarCloseable]:r}),dangerouslySetInnerHTML:{__html:t}}),r?c.a.createElement("button",{type:"button",className:S.a.announcementBarClose,onClick:i,"aria-label":"Close"},c.a.createElement("span",{"aria-hidden":"true"},"\xd7")):null)},L=a(293),x=()=>null,B=a(483),I=a.n(B),D=a(52),M=a.n(D);const P=({icon:e,style:t})=>c.a.createElement("span",{className:Object(o.a)(M.a.toggle,M.a.dark),style:t},e),A=({icon:e,style:t})=>c.a.createElement("span",{className:Object(o.a)(M.a.toggle,M.a.light),style:t},e);var X=function(e){const{siteConfig:{themeConfig:{colorMode:{switchConfig:{darkIcon:t,darkIconStyle:a,lightIcon:r,lightIconStyle:o}}}},isClient:l}=Object(s.a)();return c.a.createElement(I.a,Object(n.a)({disabled:!l,icons:{checked:c.a.createElement(P,{icon:t,style:a}),unchecked:c.a.createElement(A,{icon:r,style:o})}},e))},V=a(298),F=a(299);var R=function(e){const[t,a]=Object(r.useState)(e);return Object(r.useEffect)((()=>{const e=()=>a(window.location.hash);return window.addEventListener("hashchange",e),()=>window.removeEventListener("hashchange",e)}),[]),[t,a]},U=a(472);var H=e=>{const[t,a]=Object(r.useState)(!0),[n,c]=Object(r.useState)(!1),[o,l]=Object(r.useState)(0),[s,i]=Object(r.useState)(0),u=Object(r.useCallback)((e=>{null!==e&&i(e.getBoundingClientRect().height)}),[]),d=Object(F.useLocation)(),[m,f]=R(d.hash);return Object(U.a)((({scrollY:t})=>{if(!e)return;if(0===t&&a(!0),t<s)return;if(n)return c(!1),a(!1),void l(t);const r=document.documentElement.scrollHeight-s,i=window.innerHeight;o&&t>=o?a(!1):t+i<r&&a(!0),l(t)}),[o,s]),Object(r.useEffect)((()=>{e&&(a(!0),f(d.hash))}),[d]),Object(r.useEffect)((()=>{e&&m&&c(!0)}),[m]),{navbarRef:u,isNavbarVisible:t}},G=a(473),Y=a(474),W=a(475),$=a(53),K=a.n($),z=a(466);const J={default:()=>z.a,docsVersion:()=>a(488).default,docsVersionDropdown:()=>a(492).default};function q({type:e,...t}){const a=((e="default")=>{const t=J[e];if(!t)throw new Error(`No NavbarItem component found for type=${e}.`);return t()})(e);return c.a.createElement(a,t)}const Q="right";var Z=function(){const{siteConfig:{themeConfig:{navbar:{title:e="",items:t=[],hideOnScroll:a=!1,style:l}={},colorMode:{disableSwitch:i=!1}={}}},isClient:u}=Object(s.a)(),[d,m]=Object(r.useState)(!1),[f,h]=Object(r.useState)(!1),{isDarkTheme:b,setLightTheme:v,setDarkTheme:p}=Object(V.a)(),{navbarRef:g,isNavbarVisible:k}=H(a),{logoLink:E,logoLinkProps:O,logoImageUrl:y,logoAlt:j}=Object(W.a)();Object(G.a)(d);const _=Object(r.useCallback)((()=>{m(!0)}),[m]),w=Object(r.useCallback)((()=>{m(!1)}),[m]),C=Object(r.useCallback)((e=>e.target.checked?p():v()),[v,p]),N=Object(Y.a)();Object(r.useEffect)((()=>{N===Y.b.desktop&&m(!1)}),[N]);const{leftItems:S,rightItems:T}=function(e){return{leftItems:e.filter((e=>{var t;return"left"===(null!==(t=e.position)&&void 0!==t?t:Q)})),rightItems:e.filter((e=>{var t;return"right"===(null!==(t=e.position)&&void 0!==t?t:Q)}))}}(t);return c.a.createElement("nav",{ref:g,className:Object(o.a)("navbar","navbar--fixed-top",{"navbar--dark":"dark"===l,"navbar--primary":"primary"===l,"navbar-sidebar--show":d,[K.a.navbarHideable]:a,[K.a.navbarHidden]:!k})},c.a.createElement("div",{className:"navbar__inner"},c.a.createElement("div",{className:"navbar__items"},null!=t&&0!==t.length&&c.a.createElement("div",{"aria-label":"Navigation bar toggle",className:"navbar__toggle",role:"button",tabIndex:0,onClick:_,onKeyDown:_},c.a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"30",height:"30",viewBox:"0 0 30 30",role:"img",focusable:"false"},c.a.createElement("title",null,"Menu"),c.a.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"}))),c.a.createElement(L.a,Object(n.a)({className:"navbar__brand",to:E},O),null!=y&&c.a.createElement("img",{key:u,className:"navbar__logo",src:y,alt:j}),null!=e&&c.a.createElement("strong",{className:Object(o.a)("navbar__title",{[K.a.hideLogoText]:f})},e)),S.map(((e,t)=>c.a.createElement(q,Object(n.a)({},e,{key:t}))))),c.a.createElement("div",{className:"navbar__items navbar__items--right"},T.map(((e,t)=>c.a.createElement(q,Object(n.a)({},e,{key:t})))),!i&&c.a.createElement(X,{className:K.a.displayOnlyInLargeViewport,"aria-label":"Dark mode toggle",checked:b,onChange:C}),c.a.createElement(x,{handleSearchBarToggle:h,isSearchBarExpanded:f}))),c.a.createElement("div",{role:"presentation",className:"navbar-sidebar__backdrop",onClick:w}),c.a.createElement("div",{className:"navbar-sidebar"},c.a.createElement("div",{className:"navbar-sidebar__brand"},c.a.createElement(L.a,Object(n.a)({className:"navbar__brand",onClick:w,to:E},O),null!=y&&c.a.createElement("img",{key:u,className:"navbar__logo",src:y,alt:j}),null!=e&&c.a.createElement("strong",{className:"navbar__title"},e)),!i&&d&&c.a.createElement(X,{"aria-label":"Dark mode toggle in sidebar",checked:b,onChange:C})),c.a.createElement("div",{className:"navbar-sidebar__items"},c.a.createElement("div",{className:"menu"},c.a.createElement("ul",{className:"menu__list"},t.map(((e,t)=>c.a.createElement(q,Object(n.a)({mobile:!0},e,{onClick:w,key:t})))))))))},ee=a(54),te=a.n(ee);function ae({to:e,href:t,label:a,prependBaseUrlToHref:r,...o}){const l=Object(i.a)(e),s=Object(i.a)(t,{forcePrependBaseUrl:!0});return c.a.createElement(L.a,Object(n.a)({className:"footer__link-item"},t?{target:"_blank",rel:"noopener noreferrer",href:r?s:t}:{to:l},o),a)}const ne=({url:e,alt:t})=>c.a.createElement("img",{className:"footer__logo",alt:t,src:e});var re=function(){const e=Object(s.a)(),{siteConfig:t={}}=e,{themeConfig:a={}}=t,{footer:n}=a,{copyright:r,links:l=[],logo:u={}}=n||{},d=Object(i.a)(u.src);return n?c.a.createElement("footer",{className:Object(o.a)("footer",{"footer--dark":"dark"===n.style})},c.a.createElement("div",{className:"container"},l&&l.length>0&&c.a.createElement("div",{className:"row footer__links"},l.map(((e,t)=>c.a.createElement("div",{key:t,className:"col footer__col"},null!=e.title?c.a.createElement("h4",{className:"footer__title"},e.title):null,null!=e.items&&Array.isArray(e.items)&&e.items.length>0?c.a.createElement("ul",{className:"footer__items"},e.items.map(((e,t)=>e.html?c.a.createElement("li",{key:t,className:"footer__item",dangerouslySetInnerHTML:{__html:e.html}}):c.a.createElement("li",{key:e.href||e.to,className:"footer__item"},c.a.createElement(ae,e))))):null)))),(u||r)&&c.a.createElement("div",{className:"text--center"},u&&u.src&&c.a.createElement("div",{className:"margin-bottom--sm"},u.href?c.a.createElement("a",{href:u.href,target:"_blank",rel:"noopener noreferrer",className:te.a.footerLogoLink},c.a.createElement(ne,{alt:u.alt,url:d})):c.a.createElement(ne,{alt:u.alt,url:d})),c.a.createElement("div",{dangerouslySetInnerHTML:{__html:r}})))):null};a(55);function ce({children:e}){return c.a.createElement(g,null,c.a.createElement(w,null,e))}t.a=function(e){const{siteConfig:t}=Object(s.a)(),{favicon:a,title:r,themeConfig:{image:u,metadatas:d},url:m,titleDelimiter:f}=t,{children:h,title:b,noFooter:v,description:p,image:g,keywords:k,permalink:E,wrapperClassName:O}=e,y=b?`${b} ${f} ${r}`:r,j=g||u,_=Object(i.a)(j,{absolute:!0}),w=Object(i.a)(a);return c.a.createElement(ce,null,c.a.createElement(l.a,null,c.a.createElement("html",{lang:"en"}),y&&c.a.createElement("title",null,y),y&&c.a.createElement("meta",{property:"og:title",content:y}),a&&c.a.createElement("link",{rel:"shortcut icon",href:w}),p&&c.a.createElement("meta",{name:"description",content:p}),p&&c.a.createElement("meta",{property:"og:description",content:p}),k&&k.length&&c.a.createElement("meta",{name:"keywords",content:k.join(",")}),j&&c.a.createElement("meta",{property:"og:image",content:_}),j&&c.a.createElement("meta",{property:"twitter:image",content:_}),j&&c.a.createElement("meta",{name:"twitter:image:alt",content:"Image for "+y}),E&&c.a.createElement("meta",{property:"og:url",content:m+E}),E&&c.a.createElement("link",{rel:"canonical",href:m+E}),c.a.createElement("meta",{name:"twitter:card",content:"summary_large_image"})),c.a.createElement(l.a,null,d.map(((e,t)=>c.a.createElement("meta",Object(n.a)({key:"metadata_"+t},e))))),c.a.createElement(T,null),c.a.createElement(Z,null),c.a.createElement("div",{className:Object(o.a)("main-wrapper",O)},h),!v&&c.a.createElement(re,null))}},298:function(e,t,a){"use strict";var n=a(0),r=a(469);t.a=function(){const e=Object(n.useContext)(r.a);if(null==e)throw new Error("`useThemeContext` is used outside of `Layout` Component. See https://v2.docusaurus.io/docs/theme-classic#usethemecontext.");return e}},466:function(e,t,a){"use strict";var n,r=a(2),c=a(0),o=a.n(c),l=a(292),s=a(293),i=a(294);var u=function(){if(void 0!==n)return n;var e=!1,t={get passive(){e=!0}},a=function(){};return window.addEventListener("t",a,t),window.removeEventListener("t",a,t),n=e,e},d=c.useLayoutEffect,m=function(e){var t=Object(c.useRef)(e);return d((function(){t.current=e})),t},f="touchstart",h=["mousedown",f],b=function(e){if(e===f)return u()?{passive:!0}:void 0};var v=function(e,t){var a=m(t);Object(c.useEffect)((function(){if(t){var n=function(t){e.current&&a.current&&!e.current.contains(t.target)&&a.current(t)};return h.forEach((function(e){document.addEventListener(e,n,b(e))})),function(){h.forEach((function(e){document.removeEventListener(e,n,b(e))}))}}}),[!t])};function p({activeBasePath:e,activeBaseRegex:t,to:a,href:n,label:c,activeClassName:l="navbar__link--active",prependBaseUrlToHref:u,...d}){const m=Object(i.a)(a),f=Object(i.a)(e),h=Object(i.a)(n,{forcePrependBaseUrl:!0});return o.a.createElement(s.a,Object(r.a)({},n?{target:"_blank",rel:"noopener noreferrer",href:u?h:n}:{isNavLink:!0,activeClassName:l,to:m,...e||t?{isActive:(e,a)=>t?new RegExp(t).test(a.pathname):a.pathname.startsWith(f)}:null},d),c)}function g({items:e,position:t,className:a,...n}){const s=o.a.useRef(null),i=o.a.useRef(null),[u,d]=Object(c.useState)(!1);function m(e){if(e){var t,a;const e=null==i||null===(t=i.current)||void 0===t||null===(a=t.firstChild)||void 0===a?void 0:a.firstChild;e&&e.focus()}d(e)}v(s,(()=>m(!1)));const f=(e,t=!1)=>Object(l.a)({"navbar__item navbar__link":!t,dropdown__link:t},e);return e?o.a.createElement("div",{ref:s,className:Object(l.a)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--left":"left"===t,"dropdown--right":"right"===t,"dropdown--show":u})},o.a.createElement(p,Object(r.a)({className:f(a)},n,{onClick:n.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{("Enter"===e.key&&!n.to||"Tab"===e.key)&&(e.preventDefault(),m(!0))}}),n.label),o.a.createElement("ul",{ref:i,className:"dropdown__menu"},e.map((({className:t,...a},n)=>o.a.createElement("li",{key:n},o.a.createElement(p,Object(r.a)({onKeyDown:t=>{n===e.length-1&&"Tab"===t.key&&(t.preventDefault(),m(!1))},activeClassName:"dropdown__link--active",className:f(t,!0)},a))))))):o.a.createElement(p,Object(r.a)({className:f(a)},n))}function k({items:e,position:t,className:a,...n}){const c=(e,t=!1)=>Object(l.a)("menu__link",{"menu__link--sublist":t},e);return e?o.a.createElement("li",{className:"menu__list-item"},o.a.createElement(p,Object(r.a)({className:c(a,!0)},n),n.label),o.a.createElement("ul",{className:"menu__list"},e.map((({className:e,...t},a)=>o.a.createElement("li",{className:"menu__list-item",key:a},o.a.createElement(p,Object(r.a)({activeClassName:"menu__link--active",className:c(e)},t,{onClick:n.onClick}))))))):o.a.createElement("li",{className:"menu__list-item"},o.a.createElement(p,Object(r.a)({className:c(a)},n)))}t.a=function({mobile:e=!1,...t}){const a=e?k:g;return o.a.createElement(a,t)}},469:function(e,t,a){"use strict";var n=a(0);const r=a.n(n).a.createContext(void 0);t.a=r},470:function(e,t,a){"use strict";var n=a(0);const r=Object(n.createContext)(void 0);t.a=r},471:function(e,t,a){"use strict";var n=a(0),r=a(470);t.a=function(){const e=Object(n.useContext)(r.a);if(null==e)throw new Error("`useUserPreferencesContext` is used outside of `Layout` Component.");return e}},472:function(e,t,a){"use strict";var n=a(0),r=a(10);const c=()=>({scrollX:r.a.canUseDOM?window.pageXOffset:0,scrollY:r.a.canUseDOM?window.pageYOffset:0});t.a=(e,t=[])=>{const[a,r]=Object(n.useState)(c()),o=()=>{const t=c();r(t),e&&e(t)};return Object(n.useEffect)((()=>(window.addEventListener("scroll",o),()=>window.removeEventListener("scroll",o,{passive:!0}))),t),a}},473:function(e,t,a){"use strict";var n=a(0);t.a=function(e=!0){Object(n.useEffect)((()=>(document.body.style.overflow=e?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[e])}},474:function(e,t,a){"use strict";a.d(t,"b",(function(){return r}));var n=a(0);const r={desktop:"desktop",mobile:"mobile"};t.a=function(){const e="undefined"!=typeof window;function t(){if(e)return window.innerWidth>996?r.desktop:r.mobile}const[a,c]=Object(n.useState)(t);return Object(n.useEffect)((()=>{if(e)return window.addEventListener("resize",a),()=>window.removeEventListener("resize",a);function a(){c(t())}}),[]),a}},475:function(e,t,a){"use strict";var n=a(291),r=a(298),c=a(294),o=a(297);t.a=()=>{const{siteConfig:{themeConfig:{navbar:{logo:e={}}={}}={}}={}}=Object(n.a)(),{isDarkTheme:t}=Object(r.a)(),a=Object(c.a)(e.href||"/");let l={};e.target?l={target:e.target}:Object(o.a)(a)||(l={rel:"noopener noreferrer",target:"_blank"});const s=e.srcDark&&t?e.srcDark:e.src;return{logoLink:a,logoLinkProps:l,logoImageUrl:Object(c.a)(s),logoAlt:e.alt}}},483:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},r=function(){function e(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,a,n){return a&&e(t.prototype,a),n&&e(t,n),t}}(),c=a(0),o=m(c),l=m(a(484)),s=m(a(7)),i=m(a(485)),u=m(a(486)),d=a(487);function m(e){return e&&e.__esModule?e:{default:e}}var f=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var a=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return a.handleClick=a.handleClick.bind(a),a.handleTouchStart=a.handleTouchStart.bind(a),a.handleTouchMove=a.handleTouchMove.bind(a),a.handleTouchEnd=a.handleTouchEnd.bind(a),a.handleFocus=a.handleFocus.bind(a),a.handleBlur=a.handleBlur.bind(a),a.previouslyChecked=!(!e.checked&&!e.defaultChecked),a.state={checked:!(!e.checked&&!e.defaultChecked),hasFocus:!1},a}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),r(t,[{key:"componentDidUpdate",value:function(e){e.checked!==this.props.checked&&this.setState({checked:!!this.props.checked})}},{key:"handleClick",value:function(e){var t=this.input;if(e.target!==t&&!this.moved)return this.previouslyChecked=t.checked,e.preventDefault(),t.focus(),void t.click();var a=this.props.hasOwnProperty("checked")?this.props.checked:t.checked;this.setState({checked:a})}},{key:"handleTouchStart",value:function(e){this.startX=(0,d.pointerCoord)(e).x,this.activated=!0}},{key:"handleTouchMove",value:function(e){if(this.activated&&(this.moved=!0,this.startX)){var t=(0,d.pointerCoord)(e).x;this.state.checked&&t+15<this.startX?(this.setState({checked:!1}),this.startX=t,this.activated=!0):t-15>this.startX&&(this.setState({checked:!0}),this.startX=t,this.activated=t<this.startX+5)}}},{key:"handleTouchEnd",value:function(e){if(this.moved){var t=this.input;if(e.preventDefault(),this.startX){var a=(0,d.pointerCoord)(e).x;!0===this.previouslyChecked&&this.startX+4>a?this.previouslyChecked!==this.state.checked&&(this.setState({checked:!1}),this.previouslyChecked=this.state.checked,t.click()):this.startX-4<a&&this.previouslyChecked!==this.state.checked&&(this.setState({checked:!0}),this.previouslyChecked=this.state.checked,t.click()),this.activated=!1,this.startX=null,this.moved=!1}}}},{key:"handleFocus",value:function(e){var t=this.props.onFocus;t&&t(e),this.setState({hasFocus:!0})}},{key:"handleBlur",value:function(e){var t=this.props.onBlur;t&&t(e),this.setState({hasFocus:!1})}},{key:"getIcon",value:function(e){var a=this.props.icons;return a?void 0===a[e]?t.defaultProps.icons[e]:a[e]:null}},{key:"render",value:function(){var e=this,t=this.props,a=t.className,r=(t.icons,function(e,t){var a={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(a[n]=e[n]);return a}(t,["className","icons"])),c=(0,l.default)("react-toggle",{"react-toggle--checked":this.state.checked,"react-toggle--focus":this.state.hasFocus,"react-toggle--disabled":this.props.disabled},a);return o.default.createElement("div",{className:c,onClick:this.handleClick,onTouchStart:this.handleTouchStart,onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEnd},o.default.createElement("div",{className:"react-toggle-track"},o.default.createElement("div",{className:"react-toggle-track-check"},this.getIcon("checked")),o.default.createElement("div",{className:"react-toggle-track-x"},this.getIcon("unchecked"))),o.default.createElement("div",{className:"react-toggle-thumb"}),o.default.createElement("input",n({},r,{ref:function(t){e.input=t},onFocus:this.handleFocus,onBlur:this.handleBlur,className:"react-toggle-screenreader-only",type:"checkbox"})))}}]),t}(c.PureComponent);t.default=f,f.displayName="Toggle",f.defaultProps={icons:{checked:o.default.createElement(i.default,null),unchecked:o.default.createElement(u.default,null)}},f.propTypes={checked:s.default.bool,disabled:s.default.bool,defaultChecked:s.default.bool,onChange:s.default.func,onFocus:s.default.func,onBlur:s.default.func,className:s.default.string,name:s.default.string,value:s.default.string,id:s.default.string,"aria-labelledby":s.default.string,"aria-label":s.default.string,icons:s.default.oneOfType([s.default.bool,s.default.shape({checked:s.default.node,unchecked:s.default.node})])}},484:function(e,t,a){var n;!function(){"use strict";var a={}.hasOwnProperty;function r(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var c=typeof n;if("string"===c||"number"===c)e.push(n);else if(Array.isArray(n)&&n.length){var o=r.apply(null,n);o&&e.push(o)}else if("object"===c)for(var l in n)a.call(n,l)&&n[l]&&e.push(l)}}return e.join(" ")}e.exports?(r.default=r,e.exports=r):void 0===(n=function(){return r}.apply(t,[]))||(e.exports=n)}()},485:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,r=a(0),c=(n=r)&&n.__esModule?n:{default:n};t.default=function(){return c.default.createElement("svg",{width:"14",height:"11",viewBox:"0 0 14 11"},c.default.createElement("title",null,"switch-check"),c.default.createElement("path",{d:"M11.264 0L5.26 6.004 2.103 2.847 0 4.95l5.26 5.26 8.108-8.107L11.264 0",fill:"#fff",fillRule:"evenodd"}))}},486:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,r=a(0),c=(n=r)&&n.__esModule?n:{default:n};t.default=function(){return c.default.createElement("svg",{width:"10",height:"10",viewBox:"0 0 10 10"},c.default.createElement("title",null,"switch-x"),c.default.createElement("path",{d:"M9.9 2.12L7.78 0 4.95 2.828 2.12 0 0 2.12l2.83 2.83L0 7.776 2.123 9.9 4.95 7.07 7.78 9.9 9.9 7.776 7.072 4.95 9.9 2.12",fill:"#fff",fillRule:"evenodd"}))}},487:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.pointerCoord=function(e){if(e){var t=e.changedTouches;if(t&&t.length>0){var a=t[0];return{x:a.clientX,y:a.clientY}}var n=e.pageX;if(void 0!==n)return{x:n,y:e.pageY}}return{x:0,y:0}}},488:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return s}));var n=a(2),r=a(0),c=a.n(r),o=a(466),l=a(300);function s({label:e,to:t,docsPluginId:a,...r}){const s=Object(l.useActiveVersion)(a),i=Object(l.useLatestVersion)(a),u=null!=s?s:i,d=null!=e?e:u.label,m=null!=t?t:(e=>e.docs.find((t=>t.id===e.mainDocId)))(u).path;return c.a.createElement(o.a,Object(n.a)({},r,{label:d,to:m}))}},492:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return i}));var n=a(2),r=a(0),c=a.n(r),o=a(466),l=a(300);const s=e=>e.docs.find((t=>t.id===e.mainDocId));function i({mobile:e,docsPluginId:t,...a}){var r;const i=Object(l.useActiveDocContext)(t),u=Object(l.useVersions)(t),d=Object(l.useLatestVersion)(t);const m=null!==(r=i.activeVersion)&&void 0!==r?r:d,f=e?"Versions":m.label,h=e?void 0:s(m).path;return c.a.createElement(o.a,Object(n.a)({},a,{mobile:e,label:f,to:h,items:function(){if(!(u.length<=1))return u.map((e=>{const t=(null==i?void 0:i.alternateDocVersions[e.name])||s(e);return{isNavLink:!0,label:e.label,to:t.path,isActive:()=>e===(null==i?void 0:i.activeVersion)}}))}()}))}}}]);
\ No newline at end of file
+/*! For license information please see 2.e94e8fdd.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{297:function(e,t,a){"use strict";var n=a(2),r=a(0),c=a.n(r),o=a(294),l=a(298),s=a(293),i=a(296),u=a(10);const d="light",m="dark",f=e=>e===m?m:d,h=()=>u.a.canUseDOM?f(document.documentElement.getAttribute("data-theme")):d,b=e=>{try{localStorage.setItem("theme",f(e))}catch(t){console.error(t)}};var v=()=>{const{siteConfig:{themeConfig:{colorMode:{disableSwitch:e=!1}={}}={}}={}}=Object(s.a)(),[t,a]=Object(r.useState)(h),n=Object(r.useCallback)((()=>{a(d),b(d)}),[]),c=Object(r.useCallback)((()=>{a(m),b(m)}),[]);return Object(r.useEffect)((()=>{document.documentElement.setAttribute("data-theme",f(t))}),[t]),Object(r.useEffect)((()=>{if(!e)try{const e=localStorage.getItem("theme");null!==e&&a(f(e))}catch(t){console.error(t)}}),[a]),Object(r.useEffect)((()=>{e||window.matchMedia("(prefers-color-scheme: dark)").addListener((({matches:e})=>{a(e?m:d)}))}),[]),{isDarkTheme:t===m,setLightTheme:n,setDarkTheme:c}},p=a(475);var g=function(e){const{isDarkTheme:t,setLightTheme:a,setDarkTheme:n}=v();return c.a.createElement(p.a.Provider,{value:{isDarkTheme:t,setLightTheme:a,setDarkTheme:n}},e.children)};const k="docusaurus.tab.";var E=()=>{const[e,t]=Object(r.useState)({}),a=Object(r.useCallback)(((e,t)=>{try{localStorage.setItem("docusaurus.tab."+e,t)}catch(a){console.error(a)}}),[]);return Object(r.useEffect)((()=>{try{const e={};for(let t=0;t<localStorage.length;t+=1){const a=localStorage.key(t);if(a.startsWith(k)){e[a.substring(k.length)]=localStorage.getItem(a)}}t(e)}catch(e){console.error(e)}}),[]),{tabGroupChoices:e,setTabGroupChoices:(e,n)=>{t((t=>({...t,[e]:n}))),a(e,n)}}};const O="docusaurus.announcement.dismiss",y="docusaurus.announcement.id";var j=()=>{const{announcementBar:e}=Object(s.a)().siteConfig.themeConfig,[t,a]=Object(r.useState)(!0),n=Object(r.useCallback)((()=>{localStorage.setItem(O,"true"),a(!0)}),[]);return Object(r.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=localStorage.getItem(y);"annoucement-bar"===n&&(n="announcement-bar");const r=t!==n;localStorage.setItem(y,t),r&&localStorage.setItem(O,"false"),(r||"false"===localStorage.getItem(O))&&a(!1)}),[]),{isAnnouncementBarClosed:t,closeAnnouncementBar:n}},_=a(476);var w=function(e){const{tabGroupChoices:t,setTabGroupChoices:a}=E(),{isAnnouncementBarClosed:n,closeAnnouncementBar:r}=j();return c.a.createElement(_.a.Provider,{value:{tabGroupChoices:t,setTabGroupChoices:a,isAnnouncementBarClosed:n,closeAnnouncementBar:r}},e.children)},C=a(477),N=a(51),S=a.n(N);var T=function(){const{siteConfig:{themeConfig:{announcementBar:e={}}={}}={}}=Object(s.a)(),{content:t,backgroundColor:a,textColor:n,isCloseable:r}=e,{isAnnouncementBarClosed:l,closeAnnouncementBar:i}=Object(C.a)();return!t||r&&l?null:c.a.createElement("div",{className:S.a.announcementBar,style:{backgroundColor:a,color:n},role:"banner"},c.a.createElement("div",{className:Object(o.a)(S.a.announcementBarContent,{[S.a.announcementBarCloseable]:r}),dangerouslySetInnerHTML:{__html:t}}),r?c.a.createElement("button",{type:"button",className:S.a.announcementBarClose,onClick:i,"aria-label":"Close"},c.a.createElement("span",{"aria-hidden":"true"},"\xd7")):null)},L=a(295),x=()=>null,B=a(489),I=a.n(B),D=a(52),M=a.n(D);const P=({icon:e,style:t})=>c.a.createElement("span",{className:Object(o.a)(M.a.toggle,M.a.dark),style:t},e),A=({icon:e,style:t})=>c.a.createElement("span",{className:Object(o.a)(M.a.toggle,M.a.light),style:t},e);var X=function(e){const{siteConfig:{themeConfig:{colorMode:{switchConfig:{darkIcon:t,darkIconStyle:a,lightIcon:r,lightIconStyle:o}}}},isClient:l}=Object(s.a)();return c.a.createElement(I.a,Object(n.a)({disabled:!l,icons:{checked:c.a.createElement(P,{icon:t,style:a}),unchecked:c.a.createElement(A,{icon:r,style:o})}},e))},V=a(300),F=a(301);var R=function(e){const[t,a]=Object(r.useState)(e);return Object(r.useEffect)((()=>{const e=()=>a(window.location.hash);return window.addEventListener("hashchange",e),()=>window.removeEventListener("hashchange",e)}),[]),[t,a]},U=a(478);var H=e=>{const[t,a]=Object(r.useState)(!0),[n,c]=Object(r.useState)(!1),[o,l]=Object(r.useState)(0),[s,i]=Object(r.useState)(0),u=Object(r.useCallback)((e=>{null!==e&&i(e.getBoundingClientRect().height)}),[]),d=Object(F.useLocation)(),[m,f]=R(d.hash);return Object(U.a)((({scrollY:t})=>{if(!e)return;if(0===t&&a(!0),t<s)return;if(n)return c(!1),a(!1),void l(t);const r=document.documentElement.scrollHeight-s,i=window.innerHeight;o&&t>=o?a(!1):t+i<r&&a(!0),l(t)}),[o,s]),Object(r.useEffect)((()=>{e&&(a(!0),f(d.hash))}),[d]),Object(r.useEffect)((()=>{e&&m&&c(!0)}),[m]),{navbarRef:u,isNavbarVisible:t}},G=a(479),Y=a(480),W=a(481),$=a(53),K=a.n($),z=a(472);const J={default:()=>z.a,docsVersion:()=>a(494).default,docsVersionDropdown:()=>a(498).default};function q({type:e,...t}){const a=((e="default")=>{const t=J[e];if(!t)throw new Error(`No NavbarItem component found for type=${e}.`);return t()})(e);return c.a.createElement(a,t)}const Q="right";var Z=function(){const{siteConfig:{themeConfig:{navbar:{title:e="",items:t=[],hideOnScroll:a=!1,style:l}={},colorMode:{disableSwitch:i=!1}={}}},isClient:u}=Object(s.a)(),[d,m]=Object(r.useState)(!1),[f,h]=Object(r.useState)(!1),{isDarkTheme:b,setLightTheme:v,setDarkTheme:p}=Object(V.a)(),{navbarRef:g,isNavbarVisible:k}=H(a),{logoLink:E,logoLinkProps:O,logoImageUrl:y,logoAlt:j}=Object(W.a)();Object(G.a)(d);const _=Object(r.useCallback)((()=>{m(!0)}),[m]),w=Object(r.useCallback)((()=>{m(!1)}),[m]),C=Object(r.useCallback)((e=>e.target.checked?p():v()),[v,p]),N=Object(Y.a)();Object(r.useEffect)((()=>{N===Y.b.desktop&&m(!1)}),[N]);const{leftItems:S,rightItems:T}=function(e){return{leftItems:e.filter((e=>{var t;return"left"===(null!==(t=e.position)&&void 0!==t?t:Q)})),rightItems:e.filter((e=>{var t;return"right"===(null!==(t=e.position)&&void 0!==t?t:Q)}))}}(t);return c.a.createElement("nav",{ref:g,className:Object(o.a)("navbar","navbar--fixed-top",{"navbar--dark":"dark"===l,"navbar--primary":"primary"===l,"navbar-sidebar--show":d,[K.a.navbarHideable]:a,[K.a.navbarHidden]:!k})},c.a.createElement("div",{className:"navbar__inner"},c.a.createElement("div",{className:"navbar__items"},null!=t&&0!==t.length&&c.a.createElement("div",{"aria-label":"Navigation bar toggle",className:"navbar__toggle",role:"button",tabIndex:0,onClick:_,onKeyDown:_},c.a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"30",height:"30",viewBox:"0 0 30 30",role:"img",focusable:"false"},c.a.createElement("title",null,"Menu"),c.a.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"}))),c.a.createElement(L.a,Object(n.a)({className:"navbar__brand",to:E},O),null!=y&&c.a.createElement("img",{key:u,className:"navbar__logo",src:y,alt:j}),null!=e&&c.a.createElement("strong",{className:Object(o.a)("navbar__title",{[K.a.hideLogoText]:f})},e)),S.map(((e,t)=>c.a.createElement(q,Object(n.a)({},e,{key:t}))))),c.a.createElement("div",{className:"navbar__items navbar__items--right"},T.map(((e,t)=>c.a.createElement(q,Object(n.a)({},e,{key:t})))),!i&&c.a.createElement(X,{className:K.a.displayOnlyInLargeViewport,"aria-label":"Dark mode toggle",checked:b,onChange:C}),c.a.createElement(x,{handleSearchBarToggle:h,isSearchBarExpanded:f}))),c.a.createElement("div",{role:"presentation",className:"navbar-sidebar__backdrop",onClick:w}),c.a.createElement("div",{className:"navbar-sidebar"},c.a.createElement("div",{className:"navbar-sidebar__brand"},c.a.createElement(L.a,Object(n.a)({className:"navbar__brand",onClick:w,to:E},O),null!=y&&c.a.createElement("img",{key:u,className:"navbar__logo",src:y,alt:j}),null!=e&&c.a.createElement("strong",{className:"navbar__title"},e)),!i&&d&&c.a.createElement(X,{"aria-label":"Dark mode toggle in sidebar",checked:b,onChange:C})),c.a.createElement("div",{className:"navbar-sidebar__items"},c.a.createElement("div",{className:"menu"},c.a.createElement("ul",{className:"menu__list"},t.map(((e,t)=>c.a.createElement(q,Object(n.a)({mobile:!0},e,{onClick:w,key:t})))))))))},ee=a(54),te=a.n(ee);function ae({to:e,href:t,label:a,prependBaseUrlToHref:r,...o}){const l=Object(i.a)(e),s=Object(i.a)(t,{forcePrependBaseUrl:!0});return c.a.createElement(L.a,Object(n.a)({className:"footer__link-item"},t?{target:"_blank",rel:"noopener noreferrer",href:r?s:t}:{to:l},o),a)}const ne=({url:e,alt:t})=>c.a.createElement("img",{className:"footer__logo",alt:t,src:e});var re=function(){const e=Object(s.a)(),{siteConfig:t={}}=e,{themeConfig:a={}}=t,{footer:n}=a,{copyright:r,links:l=[],logo:u={}}=n||{},d=Object(i.a)(u.src);return n?c.a.createElement("footer",{className:Object(o.a)("footer",{"footer--dark":"dark"===n.style})},c.a.createElement("div",{className:"container"},l&&l.length>0&&c.a.createElement("div",{className:"row footer__links"},l.map(((e,t)=>c.a.createElement("div",{key:t,className:"col footer__col"},null!=e.title?c.a.createElement("h4",{className:"footer__title"},e.title):null,null!=e.items&&Array.isArray(e.items)&&e.items.length>0?c.a.createElement("ul",{className:"footer__items"},e.items.map(((e,t)=>e.html?c.a.createElement("li",{key:t,className:"footer__item",dangerouslySetInnerHTML:{__html:e.html}}):c.a.createElement("li",{key:e.href||e.to,className:"footer__item"},c.a.createElement(ae,e))))):null)))),(u||r)&&c.a.createElement("div",{className:"text--center"},u&&u.src&&c.a.createElement("div",{className:"margin-bottom--sm"},u.href?c.a.createElement("a",{href:u.href,target:"_blank",rel:"noopener noreferrer",className:te.a.footerLogoLink},c.a.createElement(ne,{alt:u.alt,url:d})):c.a.createElement(ne,{alt:u.alt,url:d})),c.a.createElement("div",{dangerouslySetInnerHTML:{__html:r}})))):null};a(55);function ce({children:e}){return c.a.createElement(g,null,c.a.createElement(w,null,e))}t.a=function(e){const{siteConfig:t}=Object(s.a)(),{favicon:a,title:r,themeConfig:{image:u,metadatas:d},url:m,titleDelimiter:f}=t,{children:h,title:b,noFooter:v,description:p,image:g,keywords:k,permalink:E,wrapperClassName:O}=e,y=b?`${b} ${f} ${r}`:r,j=g||u,_=Object(i.a)(j,{absolute:!0}),w=Object(i.a)(a);return c.a.createElement(ce,null,c.a.createElement(l.a,null,c.a.createElement("html",{lang:"en"}),y&&c.a.createElement("title",null,y),y&&c.a.createElement("meta",{property:"og:title",content:y}),a&&c.a.createElement("link",{rel:"shortcut icon",href:w}),p&&c.a.createElement("meta",{name:"description",content:p}),p&&c.a.createElement("meta",{property:"og:description",content:p}),k&&k.length&&c.a.createElement("meta",{name:"keywords",content:k.join(",")}),j&&c.a.createElement("meta",{property:"og:image",content:_}),j&&c.a.createElement("meta",{property:"twitter:image",content:_}),j&&c.a.createElement("meta",{name:"twitter:image:alt",content:"Image for "+y}),E&&c.a.createElement("meta",{property:"og:url",content:m+E}),E&&c.a.createElement("link",{rel:"canonical",href:m+E}),c.a.createElement("meta",{name:"twitter:card",content:"summary_large_image"})),c.a.createElement(l.a,null,d.map(((e,t)=>c.a.createElement("meta",Object(n.a)({key:"metadata_"+t},e))))),c.a.createElement(T,null),c.a.createElement(Z,null),c.a.createElement("div",{className:Object(o.a)("main-wrapper",O)},h),!v&&c.a.createElement(re,null))}},300:function(e,t,a){"use strict";var n=a(0),r=a(475);t.a=function(){const e=Object(n.useContext)(r.a);if(null==e)throw new Error("`useThemeContext` is used outside of `Layout` Component. See https://v2.docusaurus.io/docs/theme-classic#usethemecontext.");return e}},472:function(e,t,a){"use strict";var n,r=a(2),c=a(0),o=a.n(c),l=a(294),s=a(295),i=a(296);var u=function(){if(void 0!==n)return n;var e=!1,t={get passive(){e=!0}},a=function(){};return window.addEventListener("t",a,t),window.removeEventListener("t",a,t),n=e,e},d=c.useLayoutEffect,m=function(e){var t=Object(c.useRef)(e);return d((function(){t.current=e})),t},f="touchstart",h=["mousedown",f],b=function(e){if(e===f)return u()?{passive:!0}:void 0};var v=function(e,t){var a=m(t);Object(c.useEffect)((function(){if(t){var n=function(t){e.current&&a.current&&!e.current.contains(t.target)&&a.current(t)};return h.forEach((function(e){document.addEventListener(e,n,b(e))})),function(){h.forEach((function(e){document.removeEventListener(e,n,b(e))}))}}}),[!t])};function p({activeBasePath:e,activeBaseRegex:t,to:a,href:n,label:c,activeClassName:l="navbar__link--active",prependBaseUrlToHref:u,...d}){const m=Object(i.a)(a),f=Object(i.a)(e),h=Object(i.a)(n,{forcePrependBaseUrl:!0});return o.a.createElement(s.a,Object(r.a)({},n?{target:"_blank",rel:"noopener noreferrer",href:u?h:n}:{isNavLink:!0,activeClassName:l,to:m,...e||t?{isActive:(e,a)=>t?new RegExp(t).test(a.pathname):a.pathname.startsWith(f)}:null},d),c)}function g({items:e,position:t,className:a,...n}){const s=o.a.useRef(null),i=o.a.useRef(null),[u,d]=Object(c.useState)(!1);function m(e){if(e){var t,a;const e=null==i||null===(t=i.current)||void 0===t||null===(a=t.firstChild)||void 0===a?void 0:a.firstChild;e&&e.focus()}d(e)}v(s,(()=>m(!1)));const f=(e,t=!1)=>Object(l.a)({"navbar__item navbar__link":!t,dropdown__link:t},e);return e?o.a.createElement("div",{ref:s,className:Object(l.a)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--left":"left"===t,"dropdown--right":"right"===t,"dropdown--show":u})},o.a.createElement(p,Object(r.a)({className:f(a)},n,{onClick:n.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{("Enter"===e.key&&!n.to||"Tab"===e.key)&&(e.preventDefault(),m(!0))}}),n.label),o.a.createElement("ul",{ref:i,className:"dropdown__menu"},e.map((({className:t,...a},n)=>o.a.createElement("li",{key:n},o.a.createElement(p,Object(r.a)({onKeyDown:t=>{n===e.length-1&&"Tab"===t.key&&(t.preventDefault(),m(!1))},activeClassName:"dropdown__link--active",className:f(t,!0)},a))))))):o.a.createElement(p,Object(r.a)({className:f(a)},n))}function k({items:e,position:t,className:a,...n}){const c=(e,t=!1)=>Object(l.a)("menu__link",{"menu__link--sublist":t},e);return e?o.a.createElement("li",{className:"menu__list-item"},o.a.createElement(p,Object(r.a)({className:c(a,!0)},n),n.label),o.a.createElement("ul",{className:"menu__list"},e.map((({className:e,...t},a)=>o.a.createElement("li",{className:"menu__list-item",key:a},o.a.createElement(p,Object(r.a)({activeClassName:"menu__link--active",className:c(e)},t,{onClick:n.onClick}))))))):o.a.createElement("li",{className:"menu__list-item"},o.a.createElement(p,Object(r.a)({className:c(a)},n)))}t.a=function({mobile:e=!1,...t}){const a=e?k:g;return o.a.createElement(a,t)}},475:function(e,t,a){"use strict";var n=a(0);const r=a.n(n).a.createContext(void 0);t.a=r},476:function(e,t,a){"use strict";var n=a(0);const r=Object(n.createContext)(void 0);t.a=r},477:function(e,t,a){"use strict";var n=a(0),r=a(476);t.a=function(){const e=Object(n.useContext)(r.a);if(null==e)throw new Error("`useUserPreferencesContext` is used outside of `Layout` Component.");return e}},478:function(e,t,a){"use strict";var n=a(0),r=a(10);const c=()=>({scrollX:r.a.canUseDOM?window.pageXOffset:0,scrollY:r.a.canUseDOM?window.pageYOffset:0});t.a=(e,t=[])=>{const[a,r]=Object(n.useState)(c()),o=()=>{const t=c();r(t),e&&e(t)};return Object(n.useEffect)((()=>(window.addEventListener("scroll",o),()=>window.removeEventListener("scroll",o,{passive:!0}))),t),a}},479:function(e,t,a){"use strict";var n=a(0);t.a=function(e=!0){Object(n.useEffect)((()=>(document.body.style.overflow=e?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[e])}},480:function(e,t,a){"use strict";a.d(t,"b",(function(){return r}));var n=a(0);const r={desktop:"desktop",mobile:"mobile"};t.a=function(){const e="undefined"!=typeof window;function t(){if(e)return window.innerWidth>996?r.desktop:r.mobile}const[a,c]=Object(n.useState)(t);return Object(n.useEffect)((()=>{if(e)return window.addEventListener("resize",a),()=>window.removeEventListener("resize",a);function a(){c(t())}}),[]),a}},481:function(e,t,a){"use strict";var n=a(293),r=a(300),c=a(296),o=a(299);t.a=()=>{const{siteConfig:{themeConfig:{navbar:{logo:e={}}={}}={}}={}}=Object(n.a)(),{isDarkTheme:t}=Object(r.a)(),a=Object(c.a)(e.href||"/");let l={};e.target?l={target:e.target}:Object(o.a)(a)||(l={rel:"noopener noreferrer",target:"_blank"});const s=e.srcDark&&t?e.srcDark:e.src;return{logoLink:a,logoLinkProps:l,logoImageUrl:Object(c.a)(s),logoAlt:e.alt}}},489:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},r=function(){function e(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,a,n){return a&&e(t.prototype,a),n&&e(t,n),t}}(),c=a(0),o=m(c),l=m(a(490)),s=m(a(7)),i=m(a(491)),u=m(a(492)),d=a(493);function m(e){return e&&e.__esModule?e:{default:e}}var f=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var a=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return a.handleClick=a.handleClick.bind(a),a.handleTouchStart=a.handleTouchStart.bind(a),a.handleTouchMove=a.handleTouchMove.bind(a),a.handleTouchEnd=a.handleTouchEnd.bind(a),a.handleFocus=a.handleFocus.bind(a),a.handleBlur=a.handleBlur.bind(a),a.previouslyChecked=!(!e.checked&&!e.defaultChecked),a.state={checked:!(!e.checked&&!e.defaultChecked),hasFocus:!1},a}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),r(t,[{key:"componentDidUpdate",value:function(e){e.checked!==this.props.checked&&this.setState({checked:!!this.props.checked})}},{key:"handleClick",value:function(e){var t=this.input;if(e.target!==t&&!this.moved)return this.previouslyChecked=t.checked,e.preventDefault(),t.focus(),void t.click();var a=this.props.hasOwnProperty("checked")?this.props.checked:t.checked;this.setState({checked:a})}},{key:"handleTouchStart",value:function(e){this.startX=(0,d.pointerCoord)(e).x,this.activated=!0}},{key:"handleTouchMove",value:function(e){if(this.activated&&(this.moved=!0,this.startX)){var t=(0,d.pointerCoord)(e).x;this.state.checked&&t+15<this.startX?(this.setState({checked:!1}),this.startX=t,this.activated=!0):t-15>this.startX&&(this.setState({checked:!0}),this.startX=t,this.activated=t<this.startX+5)}}},{key:"handleTouchEnd",value:function(e){if(this.moved){var t=this.input;if(e.preventDefault(),this.startX){var a=(0,d.pointerCoord)(e).x;!0===this.previouslyChecked&&this.startX+4>a?this.previouslyChecked!==this.state.checked&&(this.setState({checked:!1}),this.previouslyChecked=this.state.checked,t.click()):this.startX-4<a&&this.previouslyChecked!==this.state.checked&&(this.setState({checked:!0}),this.previouslyChecked=this.state.checked,t.click()),this.activated=!1,this.startX=null,this.moved=!1}}}},{key:"handleFocus",value:function(e){var t=this.props.onFocus;t&&t(e),this.setState({hasFocus:!0})}},{key:"handleBlur",value:function(e){var t=this.props.onBlur;t&&t(e),this.setState({hasFocus:!1})}},{key:"getIcon",value:function(e){var a=this.props.icons;return a?void 0===a[e]?t.defaultProps.icons[e]:a[e]:null}},{key:"render",value:function(){var e=this,t=this.props,a=t.className,r=(t.icons,function(e,t){var a={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(a[n]=e[n]);return a}(t,["className","icons"])),c=(0,l.default)("react-toggle",{"react-toggle--checked":this.state.checked,"react-toggle--focus":this.state.hasFocus,"react-toggle--disabled":this.props.disabled},a);return o.default.createElement("div",{className:c,onClick:this.handleClick,onTouchStart:this.handleTouchStart,onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEnd},o.default.createElement("div",{className:"react-toggle-track"},o.default.createElement("div",{className:"react-toggle-track-check"},this.getIcon("checked")),o.default.createElement("div",{className:"react-toggle-track-x"},this.getIcon("unchecked"))),o.default.createElement("div",{className:"react-toggle-thumb"}),o.default.createElement("input",n({},r,{ref:function(t){e.input=t},onFocus:this.handleFocus,onBlur:this.handleBlur,className:"react-toggle-screenreader-only",type:"checkbox"})))}}]),t}(c.PureComponent);t.default=f,f.displayName="Toggle",f.defaultProps={icons:{checked:o.default.createElement(i.default,null),unchecked:o.default.createElement(u.default,null)}},f.propTypes={checked:s.default.bool,disabled:s.default.bool,defaultChecked:s.default.bool,onChange:s.default.func,onFocus:s.default.func,onBlur:s.default.func,className:s.default.string,name:s.default.string,value:s.default.string,id:s.default.string,"aria-labelledby":s.default.string,"aria-label":s.default.string,icons:s.default.oneOfType([s.default.bool,s.default.shape({checked:s.default.node,unchecked:s.default.node})])}},490:function(e,t,a){var n;!function(){"use strict";var a={}.hasOwnProperty;function r(){for(var e=[],t=0;t<arguments.length;t++){var n=arguments[t];if(n){var c=typeof n;if("string"===c||"number"===c)e.push(n);else if(Array.isArray(n)&&n.length){var o=r.apply(null,n);o&&e.push(o)}else if("object"===c)for(var l in n)a.call(n,l)&&n[l]&&e.push(l)}}return e.join(" ")}e.exports?(r.default=r,e.exports=r):void 0===(n=function(){return r}.apply(t,[]))||(e.exports=n)}()},491:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,r=a(0),c=(n=r)&&n.__esModule?n:{default:n};t.default=function(){return c.default.createElement("svg",{width:"14",height:"11",viewBox:"0 0 14 11"},c.default.createElement("title",null,"switch-check"),c.default.createElement("path",{d:"M11.264 0L5.26 6.004 2.103 2.847 0 4.95l5.26 5.26 8.108-8.107L11.264 0",fill:"#fff",fillRule:"evenodd"}))}},492:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,r=a(0),c=(n=r)&&n.__esModule?n:{default:n};t.default=function(){return c.default.createElement("svg",{width:"10",height:"10",viewBox:"0 0 10 10"},c.default.createElement("title",null,"switch-x"),c.default.createElement("path",{d:"M9.9 2.12L7.78 0 4.95 2.828 2.12 0 0 2.12l2.83 2.83L0 7.776 2.123 9.9 4.95 7.07 7.78 9.9 9.9 7.776 7.072 4.95 9.9 2.12",fill:"#fff",fillRule:"evenodd"}))}},493:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.pointerCoord=function(e){if(e){var t=e.changedTouches;if(t&&t.length>0){var a=t[0];return{x:a.clientX,y:a.clientY}}var n=e.pageX;if(void 0!==n)return{x:n,y:e.pageY}}return{x:0,y:0}}},494:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return s}));var n=a(2),r=a(0),c=a.n(r),o=a(472),l=a(302);function s({label:e,to:t,docsPluginId:a,...r}){const s=Object(l.useActiveVersion)(a),i=Object(l.useLatestVersion)(a),u=null!=s?s:i,d=null!=e?e:u.label,m=null!=t?t:(e=>e.docs.find((t=>t.id===e.mainDocId)))(u).path;return c.a.createElement(o.a,Object(n.a)({},r,{label:d,to:m}))}},498:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return i}));var n=a(2),r=a(0),c=a.n(r),o=a(472),l=a(302);const s=e=>e.docs.find((t=>t.id===e.mainDocId));function i({mobile:e,docsPluginId:t,...a}){var r;const i=Object(l.useActiveDocContext)(t),u=Object(l.useVersions)(t),d=Object(l.useLatestVersion)(t);const m=null!==(r=i.activeVersion)&&void 0!==r?r:d,f=e?"Versions":m.label,h=e?void 0:s(m).path;return c.a.createElement(o.a,Object(n.a)({},a,{mobile:e,label:f,to:h,items:function(){if(!(u.length<=1))return u.map((e=>{const t=(null==i?void 0:i.alternateDocVersions[e.name])||s(e);return{isNavLink:!0,label:e.label,to:t.path,isActive:()=>e===(null==i?void 0:i.activeVersion)}}))}()}))}}}]);
\ No newline at end of file
diff --git a/docs/2.95b8a467.js.LICENSE.txt b/docs/2.e94e8fdd.js.LICENSE.txt
similarity index 100%
rename from docs/2.95b8a467.js.LICENSE.txt
rename to docs/2.e94e8fdd.js.LICENSE.txt
diff --git a/docs/207f87c1.7057d601.js b/docs/207f87c1.b4d9440d.js
similarity index 92%
rename from docs/207f87c1.7057d601.js
rename to docs/207f87c1.b4d9440d.js
index c60f30f244..b68e3e5bbe 100644
--- a/docs/207f87c1.7057d601.js
+++ b/docs/207f87c1.b4d9440d.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{290:function(e,n,r){"use strict";r.d(n,"a",(function(){return s})),r.d(n,"b",(function(){return f}));var t=r(0),a=r.n(t);function o(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function i(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 c(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?i(Object(r),!0).forEach((function(n){o(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function l(e,n){if(null==e)return{};var r,t,a=function(e,n){if(null==e)return{};var r,t,a={},o=Object.keys(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=a.a.createContext({}),u=function(e){var n=a.a.useContext(p),r=n;return e&&(r="function"==typeof e?e(n):c(c({},n),e)),r},s=function(e){var n=u(e.components);return a.a.createElement(p.Provider,{value:n},e.children)},d={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 r=e.components,t=e.mdxType,o=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),s=u(r),m=t,f=s["".concat(i,".").concat(m)]||s[m]||d[m]||o;return r?a.a.createElement(f,c(c({ref:n},p),{},{components:r})):a.a.createElement(f,c({ref:n},p))}));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]=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:t,i[1]=c;for(var p=2;p<o;p++)i[p]=r[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},323:function(e,n,r){"use strict";r.r(n),n.default=r.p+"assets/images/header-0cdf3777b66e47f9e5320eee81ac5e10.png"},87:function(e,n,r){"use strict";r.r(n),r.d(n,"frontMatter",(function(){return i})),r.d(n,"metadata",(function(){return c})),r.d(n,"rightToc",(function(){return l})),r.d(n,"default",(function(){return u}));var t=r(2),a=r(6),o=(r(0),r(290)),i={title:"Header"},c={unversionedId:"examples/header",id:"examples/header",isDocsHomePage:!1,title:"Header",description:"Use a header card to display a page header.",source:"@site/docs/examples/header.md",slug:"/examples/header",permalink:"/wave/docs/examples/header",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/header.md",version:"current",sidebar:"someSidebar",previous:{title:"Breadcrumbs",permalink:"/wave/docs/examples/breadcrumbs"},next:{title:"Routing",permalink:"/wave/docs/examples/hash-routing"}},l=[],p={rightToc:l};function u(e){var n=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(t.a)({},p,i,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use a header card to display a page header."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(323).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\npage['header1'] = ui.header_card(\n    box='1 1 3 1',\n    title='The Amazing Gonkulator',\n    subtitle='And now for something completely different!',\n)\npage['header2'] = ui.header_card(\n    box='1 2 3 1',\n    title='The Amazing Gonkulator',\n    subtitle='And now for something completely different!',\n    icon='Design',\n)\npage['header3'] = ui.header_card(\n    box='1 3 3 1',\n    title='The Amazing Gonkulator',\n    subtitle='And now for something completely different!',\n    icon='Cycling',\n    icon_color='$violet',\n)\npage['header4'] = ui.header_card(\n    box='1 4 3 1',\n    title='The Amazing Gonkulator',\n    subtitle='And now for something completely different!',\n    icon='ExploreData',\n    icon_color='$red',\n)\npage.save()\n")))}u.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{292:function(e,n,r){"use strict";r.d(n,"a",(function(){return s})),r.d(n,"b",(function(){return f}));var t=r(0),a=r.n(t);function o(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function i(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 c(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?i(Object(r),!0).forEach((function(n){o(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function l(e,n){if(null==e)return{};var r,t,a=function(e,n){if(null==e)return{};var r,t,a={},o=Object.keys(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=a.a.createContext({}),u=function(e){var n=a.a.useContext(p),r=n;return e&&(r="function"==typeof e?e(n):c(c({},n),e)),r},s=function(e){var n=u(e.components);return a.a.createElement(p.Provider,{value:n},e.children)},d={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 r=e.components,t=e.mdxType,o=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),s=u(r),m=t,f=s["".concat(i,".").concat(m)]||s[m]||d[m]||o;return r?a.a.createElement(f,c(c({ref:n},p),{},{components:r})):a.a.createElement(f,c({ref:n},p))}));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]=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:t,i[1]=c;for(var p=2;p<o;p++)i[p]=r[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},325:function(e,n,r){"use strict";r.r(n),n.default=r.p+"assets/images/header-0cdf3777b66e47f9e5320eee81ac5e10.png"},89:function(e,n,r){"use strict";r.r(n),r.d(n,"frontMatter",(function(){return i})),r.d(n,"metadata",(function(){return c})),r.d(n,"rightToc",(function(){return l})),r.d(n,"default",(function(){return u}));var t=r(2),a=r(6),o=(r(0),r(292)),i={title:"Header"},c={unversionedId:"examples/header",id:"examples/header",isDocsHomePage:!1,title:"Header",description:"Use a header card to display a page header.",source:"@site/docs/examples/header.md",slug:"/examples/header",permalink:"/wave/docs/examples/header",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/header.md",version:"current",sidebar:"someSidebar",previous:{title:"Breadcrumbs",permalink:"/wave/docs/examples/breadcrumbs"},next:{title:"Routing",permalink:"/wave/docs/examples/hash-routing"}},l=[],p={rightToc:l};function u(e){var n=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(t.a)({},p,i,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use a header card to display a page header."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(325).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\npage['header1'] = ui.header_card(\n    box='1 1 3 1',\n    title='The Amazing Gonkulator',\n    subtitle='And now for something completely different!',\n)\npage['header2'] = ui.header_card(\n    box='1 2 3 1',\n    title='The Amazing Gonkulator',\n    subtitle='And now for something completely different!',\n    icon='Design',\n)\npage['header3'] = ui.header_card(\n    box='1 3 3 1',\n    title='The Amazing Gonkulator',\n    subtitle='And now for something completely different!',\n    icon='Cycling',\n    icon_color='$violet',\n)\npage['header4'] = ui.header_card(\n    box='1 4 3 1',\n    title='The Amazing Gonkulator',\n    subtitle='And now for something completely different!',\n    icon='ExploreData',\n    icon_color='$red',\n)\npage.save()\n")))}u.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/22188a36.51cf6e5e.js b/docs/22188a36.59773ffa.js
similarity index 92%
rename from docs/22188a36.51cf6e5e.js
rename to docs/22188a36.59773ffa.js
index b6bfb0d8d3..d0ce10d583 100644
--- a/docs/22188a36.51cf6e5e.js
+++ b/docs/22188a36.59773ffa.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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)},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,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,m=u["".concat(c,".").concat(f)]||u[f]||d[f]||o;return n?a.a.createElement(m,i(i({ref:t},p),{},{components:n})):a.a.createElement(m,i({ref:t},p))}));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]=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,c[1]=i;for(var p=2;p<o;p++)c[p]=n[p];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},324:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-interval-stacked-6a492804251cf9ef3fcd33cf721b725f.png"},88:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(290)),c={title:"Plot / Interval / Stacked"},i={unversionedId:"examples/plot-interval-stacked",id:"examples/plot-interval-stacked",isDocsHomePage:!1,title:"Plot / Interval / Stacked",description:"Make a stacked column plot.",source:"@site/docs/examples/plot-interval-stacked.md",slug:"/examples/plot-interval-stacked",permalink:"/wave/docs/examples/plot-interval-stacked",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-stacked.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Range / Transpose",permalink:"/wave/docs/examples/plot-interval-range-transpose"},next:{title:"Plot / Interval / Stacked / Transpose",permalink:"/wave/docs/examples/plot-interval-stacked-transpose"}},l=[],p={rightToc:l};function s(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a stacked column plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(324).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.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='=product', y='=price', 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}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{292:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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)},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,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(n),f=r,m=u["".concat(c,".").concat(f)]||u[f]||d[f]||o;return n?a.a.createElement(m,i(i({ref:t},p),{},{components:n})):a.a.createElement(m,i({ref:t},p))}));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]=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,c[1]=i;for(var p=2;p<o;p++)c[p]=n[p];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},326:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-interval-stacked-6a492804251cf9ef3fcd33cf721b725f.png"},90:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(292)),c={title:"Plot / Interval / Stacked"},i={unversionedId:"examples/plot-interval-stacked",id:"examples/plot-interval-stacked",isDocsHomePage:!1,title:"Plot / Interval / Stacked",description:"Make a stacked column plot.",source:"@site/docs/examples/plot-interval-stacked.md",slug:"/examples/plot-interval-stacked",permalink:"/wave/docs/examples/plot-interval-stacked",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-stacked.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Range / Transpose",permalink:"/wave/docs/examples/plot-interval-range-transpose"},next:{title:"Plot / Interval / Stacked / Transpose",permalink:"/wave/docs/examples/plot-interval-stacked-transpose"}},l=[],p={rightToc:l};function s(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a stacked column plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(326).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.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='=product', y='=price', 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}}]);
\ No newline at end of file
diff --git a/docs/235.30963dc0.js b/docs/237.a770d6f5.js
similarity index 94%
rename from docs/235.30963dc0.js
rename to docs/237.a770d6f5.js
index 23c48b90e6..cdd07f8a82 100644
--- a/docs/235.30963dc0.js
+++ b/docs/237.a770d6f5.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[235,236],{287:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(290),l=n(291),c=n(21),s=n(295),i=n(2),u=n(292),p=n(471),m=n(473),d=n(474),y=n(475),h=n(472),f=n(293),b=n(297),g=n(82),v=n.n(g);const k=(e,t)=>"link"===e.type?((e,t)=>{const n=e=>e.endsWith("/")?e:e+"/";return n(e)===n(t)})(e.href,t):"category"===e.type&&e.items.some((e=>k(e,t)));function j({item:e,onItemClick:t,collapsible:n,activePath:o,...l}){const{items:c,label:s}=e,p=k(e,o),m=function(e){const t=Object(a.useRef)(e);return Object(a.useEffect)((()=>{t.current=e}),[e]),t.current}(p),[d,y]=Object(a.useState)((()=>!!n&&(!p&&e.collapsed)));Object(a.useEffect)((()=>{p&&!m&&d&&y(!1)}),[p,m,d]);const h=Object(a.useCallback)((e=>{e.preventDefault(),y((e=>!e))}),[y]);return 0===c.length?null:r.a.createElement("li",{className:Object(u.a)("menu__list-item",{"menu__list-item--collapsed":d}),key:s},r.a.createElement("a",Object(i.a)({className:Object(u.a)("menu__link",{"menu__link--sublist":n,"menu__link--active":n&&p,[v.a.menuLinkText]:!n}),onClick:n?h:void 0,href:n?"#!":void 0},l),s),r.a.createElement("ul",{className:"menu__list"},c.map((e=>r.a.createElement(E,{tabIndex:d?"-1":"0",key:e.label,item:e,onItemClick:t,collapsible:n,activePath:o})))))}function O({item:e,onItemClick:t,activePath:n,collapsible:a,...o}){const{href:l,label:c}=e,s=k(e,n);return r.a.createElement("li",{className:"menu__list-item",key:c},r.a.createElement(f.a,Object(i.a)({className:Object(u.a)("menu__link",{"menu__link--active":s}),to:l},Object(b.a)(l)?{isNavLink:!0,exact:!0,onClick:t}:{target:"_blank",rel:"noreferrer noopener"},o),c))}function E(e){switch(e.item.type){case"category":return r.a.createElement(j,e);case"link":default:return r.a.createElement(O,e)}}var N=function({path:e,sidebar:t,sidebarCollapsible:n=!0}){const[o,c]=Object(a.useState)(!1),{siteConfig:{themeConfig:{navbar:{title:s="",hideOnScroll:b=!1}={}}={}}={},isClient:g}=Object(l.a)(),{logoLink:k,logoLinkProps:j,logoImageUrl:O,logoAlt:N}=Object(y.a)(),{isAnnouncementBarClosed:C}=Object(p.a)(),{scrollY:w}=Object(h.a)();Object(m.a)(o);const x=Object(d.a)();return Object(a.useEffect)((()=>{x===d.b.desktop&&c(!1)}),[x]),r.a.createElement("div",{className:Object(u.a)(v.a.sidebar,{[v.a.sidebarWithHideableNavbar]:b})},b&&r.a.createElement(f.a,Object(i.a)({tabIndex:-1,className:v.a.sidebarLogo,to:k},j),null!=O&&r.a.createElement("img",{key:g,src:O,alt:N}),null!=s&&r.a.createElement("strong",null,s)),r.a.createElement("div",{className:Object(u.a)("menu","menu--responsive",v.a.menu,{"menu--show":o,[v.a.menuWithAnnouncementBar]:!C&&0===w})},r.a.createElement("button",{"aria-label":o?"Close Menu":"Open Menu","aria-haspopup":"true",className:"button button--secondary button--sm menu__button",type:"button",onClick:()=>{c(!o)}},o?r.a.createElement("span",{className:Object(u.a)(v.a.sidebarMenuIcon,v.a.sidebarMenuCloseIcon)},"\xd7"):r.a.createElement("svg",{"aria-label":"Menu",className:v.a.sidebarMenuIcon,xmlns:"http://www.w3.org/2000/svg",height:24,width:24,viewBox:"0 0 32 32",role:"img",focusable:"false"},r.a.createElement("title",null,"Menu"),r.a.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"}))),r.a.createElement("ul",{className:"menu__list"},t.map((t=>r.a.createElement(E,{key:t.label,item:t,onItemClick:e=>{e.target.blur(),c(!1)},collapsible:n,activePath:e}))))))},C=n(465),w=n(468),x=n(299),P=n(296),_=n(83),T=n.n(_);function S({version:e,isLast:t}){const n=t?[e,"latest"]:[e];return r.a.createElement(P.a,null,r.a.createElement("meta",{name:"docsearch:version",content:n.join(",")}))}function L({currentDocRoute:e,versionMetadata:t,children:n}){var a,c;const{siteConfig:i,isClient:u}=Object(l.a)(),{permalinkToSidebar:p,docsSidebars:m,version:d,isLast:y}=t,h=p[e.path],f=m[h];return r.a.createElement(r.a.Fragment,null,r.a.createElement(S,{version:d,isLast:y}),r.a.createElement(s.a,{key:u},r.a.createElement("div",{className:T.a.docPage},f&&r.a.createElement("div",{className:T.a.docSidebarContainer,role:"complementary"},r.a.createElement(N,{key:h,sidebar:f,path:e.path,sidebarCollapsible:null===(a=null===(c=i.themeConfig)||void 0===c?void 0:c.sidebarCollapsible)||void 0===a||a})),r.a.createElement("main",{className:T.a.docMainContainer},r.a.createElement(o.a,{components:C.a},n)))))}t.default=function(e){const{route:{routes:t},versionMetadata:n,location:a}=e,o=t.find((e=>Object(x.matchPath)(a.pathname,e)));return o?r.a.createElement(L,{currentDocRoute:o,versionMetadata:n},Object(c.a)(t)):r.a.createElement(w.default,e)}},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return y}));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 l(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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var i=r.a.createContext({}),u=function(e){var t=r.a.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=u(e.components);return r.a.createElement(i.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,a=e.mdxType,o=e.originalType,l=e.parentName,i=s(e,["components","mdxType","originalType","parentName"]),p=u(n),d=a,y=p["".concat(l,".").concat(d)]||p[d]||m[d]||o;return n?r.a.createElement(y,c(c({ref:t},i),{},{components:n})):r.a.createElement(y,c({ref:t},i))}));function y(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,l=new Array(o);l[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:a,l[1]=c;for(var i=2;i<o;i++)l[i]=n[i];return r.a.createElement.apply(null,l)}return r.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},319:function(e,t,n){"use strict";const a=(e,{target:t=document.body}={})=>{const n=document.createElement("textarea"),a=document.activeElement;n.value=e,n.setAttribute("readonly",""),n.style.contain="strict",n.style.position="absolute",n.style.left="-9999px",n.style.fontSize="12pt";const r=document.getSelection();let o=!1;r.rangeCount>0&&(o=r.getRangeAt(0)),t.append(n),n.select(),n.selectionStart=0,n.selectionEnd=e.length;let l=!1;try{l=document.execCommand("copy")}catch(c){}return n.remove(),o&&(r.removeAllRanges(),r.addRange(o)),a&&a.focus(),l};e.exports=a,e.exports.default=a},320:function(e,t){e.exports.parse=function(e){var t=e.split(",").map((function(e){return function(e){if(/^-?\d+$/.test(e))return parseInt(e,10);var t;if(t=e.match(/^(-?\d+)(-|\.\.\.?|\u2025|\u2026|\u22EF)(-?\d+)$/)){var n=t[1],a=t[2],r=t[3];if(n&&r){var o=[],l=(n=parseInt(n))<(r=parseInt(r))?1:-1;"-"!=a&&".."!=a&&"\u2025"!=a||(r+=l);for(var c=n;c!=r;c+=l)o.push(c);return o}}return[]}(e)}));return 0===t.length?[]:1===t.length?Array.isArray(t[0])?t[0]:t:t.reduce((function(e,t){return Array.isArray(e)||(e=[e]),Array.isArray(t)||(t=[t]),e.concat(t)}))}},465:function(e,t,n){"use strict";var a=n(2),r=n(0),o=n.n(r),l=n(293),c=n(292),s={plain:{backgroundColor:"#2a2734",color:"#9a86fd"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#6c6783"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#e09142"}},{types:["property","function"],style:{color:"#9a86fd"}},{types:["tag-id","selector","atrule-id"],style:{color:"#eeebff"}},{types:["attr-name"],style:{color:"#c4b9fe"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","at-rule","placeholder","variable"],style:{color:"#ffcc99"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#c4b9fe"}}]},i={Prism:n(19).a,theme:s};function u(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(){return(p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}var m=/\r\n|\r|\n/,d=function(e){0===e.length?e.push({types:["plain"],content:"",empty:!0}):1===e.length&&""===e[0].content&&(e[0].empty=!0)},y=function(e,t){var n=e.length;return n>0&&e[n-1]===t?e:e.concat(t)},h=function(e,t){var n=e.plain,a=Object.create(null),r=e.styles.reduce((function(e,n){var a=n.languages,r=n.style;return a&&!a.includes(t)||n.types.forEach((function(t){var n=p({},e[t],r);e[t]=n})),e}),a);return r.root=n,r.plain=p({},n,{backgroundColor:null}),r};function f(e,t){var n={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&-1===t.indexOf(a)&&(n[a]=e[a]);return n}var b=function(e){function t(){for(var t=this,n=[],a=arguments.length;a--;)n[a]=arguments[a];e.apply(this,n),u(this,"getThemeDict",(function(e){if(void 0!==t.themeDict&&e.theme===t.prevTheme&&e.language===t.prevLanguage)return t.themeDict;t.prevTheme=e.theme,t.prevLanguage=e.language;var n=e.theme?h(e.theme,e.language):void 0;return t.themeDict=n})),u(this,"getLineProps",(function(e){var n=e.key,a=e.className,r=e.style,o=p({},f(e,["key","className","style","line"]),{className:"token-line",style:void 0,key:void 0}),l=t.getThemeDict(t.props);return void 0!==l&&(o.style=l.plain),void 0!==r&&(o.style=void 0!==o.style?p({},o.style,r):r),void 0!==n&&(o.key=n),a&&(o.className+=" "+a),o})),u(this,"getStyleForToken",(function(e){var n=e.types,a=e.empty,r=n.length,o=t.getThemeDict(t.props);if(void 0!==o){if(1===r&&"plain"===n[0])return a?{display:"inline-block"}:void 0;if(1===r&&!a)return o[n[0]];var l=a?{display:"inline-block"}:{},c=n.map((function(e){return o[e]}));return Object.assign.apply(Object,[l].concat(c))}})),u(this,"getTokenProps",(function(e){var n=e.key,a=e.className,r=e.style,o=e.token,l=p({},f(e,["key","className","style","token"]),{className:"token "+o.types.join(" "),children:o.content,style:t.getStyleForToken(o),key:void 0});return void 0!==r&&(l.style=void 0!==l.style?p({},l.style,r):r),void 0!==n&&(l.key=n),a&&(l.className+=" "+a),l}))}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.render=function(){var e=this.props,t=e.Prism,n=e.language,a=e.code,r=e.children,o=this.getThemeDict(this.props),l=t.languages[n];return r({tokens:function(e){for(var t=[[]],n=[e],a=[0],r=[e.length],o=0,l=0,c=[],s=[c];l>-1;){for(;(o=a[l]++)<r[l];){var i=void 0,u=t[l],p=n[l][o];if("string"==typeof p?(u=l>0?u:["plain"],i=p):(u=y(u,p.type),p.alias&&(u=y(u,p.alias)),i=p.content),"string"==typeof i){var h=i.split(m),f=h.length;c.push({types:u,content:h[0]});for(var b=1;b<f;b++)d(c),s.push(c=[]),c.push({types:u,content:h[b]})}else l++,t.push(u),n.push(i),a.push(0),r.push(i.length)}l--,t.pop(),n.pop(),a.pop(),r.pop()}return d(c),s}(void 0!==l?t.tokenize(a,l,n):[a]),className:"prism-code language-"+n,style:void 0!==o?o.root:{},getLineProps:this.getLineProps,getTokenProps:this.getTokenProps})},t}(r.Component),g=n(319),v=n.n(g),k=n(320),j=n.n(k),O=n(291),E={plain:{color:"#bfc7d5",backgroundColor:"#292d3e"},styles:[{types:["comment"],style:{color:"rgb(105, 112, 152)",fontStyle:"italic"}},{types:["string","inserted"],style:{color:"rgb(195, 232, 141)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation","selector"],style:{color:"rgb(199, 146, 234)"}},{types:["variable"],style:{color:"rgb(191, 199, 213)"}},{types:["class-name","attr-name"],style:{color:"rgb(255, 203, 107)"}},{types:["tag","deleted"],style:{color:"rgb(255, 85, 114)"}},{types:["operator"],style:{color:"rgb(137, 221, 255)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["keyword"],style:{fontStyle:"italic"}},{types:["doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}},{types:["url"],style:{color:"rgb(221, 221, 221)"}}]},N=n(298);var C=()=>{const{siteConfig:{themeConfig:{prism:e={}}}}=Object(O.a)(),{isDarkTheme:t}=Object(N.a)(),n=e.theme||E,a=e.darkTheme||n;return t?a:n},w=n(47),x=n.n(w);const P=/{([\d,-]+)}/,_=(e=["js","jsBlock","jsx","python","html"])=>{const t={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},python:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}},n=["highlight-next-line","highlight-start","highlight-end"].join("|"),a=e.map((e=>`(?:${t[e].start}\\s*(${n})\\s*${t[e].end})`)).join("|");return new RegExp(`^\\s*(?:${a})\\s*$`)},T=/title=".*"/;var S=({children:e,className:t,metastring:n})=>{const{siteConfig:{themeConfig:{prism:l={}}}}=Object(O.a)(),[s,u]=Object(r.useState)(!1),[p,m]=Object(r.useState)(!1);Object(r.useEffect)((()=>{m(!0)}),[]);const d=Object(r.useRef)(null);let y=[],h="";const f=C();if(n&&P.test(n)){const e=n.match(P)[1];y=j.a.parse(e).filter((e=>e>0))}n&&T.test(n)&&(h=n.match(T)[0].split("title=")[1].replace(/"+/g,""));let g=t&&t.replace(/language-/,"");!g&&l.defaultLanguage&&(g=l.defaultLanguage);let k=e.replace(/\n$/,"");if(0===y.length&&void 0!==g){let t="";const n=(e=>{switch(e){case"js":case"javascript":case"ts":case"typescript":return _(["js","jsBlock"]);case"jsx":case"tsx":return _(["js","jsBlock","jsx"]);case"html":return _(["js","jsBlock","html"]);case"python":case"py":return _(["python"]);default:return _()}})(g),a=e.replace(/\n$/,"").split("\n");let r;for(let e=0;e<a.length;){const o=e+1,l=a[e].match(n);if(null!==l){switch(l.slice(1).reduce(((e,t)=>e||t),void 0)){case"highlight-next-line":t+=o+",";break;case"highlight-start":r=o;break;case"highlight-end":t+=`${r}-${o-1},`}a.splice(e,1)}else e+=1}y=j.a.parse(t),k=a.join("\n")}const E=()=>{v()(k),u(!0),setTimeout((()=>u(!1)),2e3)};return o.a.createElement(b,Object(a.a)({},i,{key:String(p),theme:f,code:k,language:g}),(({className:e,style:t,tokens:n,getLineProps:r,getTokenProps:l})=>o.a.createElement(o.a.Fragment,null,h&&o.a.createElement("div",{style:t,className:x.a.codeBlockTitle},h),o.a.createElement("div",{className:x.a.codeBlockContent},o.a.createElement("button",{ref:d,type:"button","aria-label":"Copy code to clipboard",className:Object(c.a)(x.a.copyButton,{[x.a.copyButtonWithTitle]:h}),onClick:E},s?"Copied":"Copy"),o.a.createElement("div",{tabIndex:0,className:Object(c.a)(e,x.a.codeBlock,{[x.a.codeBlockWithTitle]:h})},o.a.createElement("div",{className:x.a.codeBlockLines,style:t},n.map(((e,t)=>{1===e.length&&""===e[0].content&&(e[0].content="\n");const n=r({line:e,key:t});return y.includes(t+1)&&(n.className=n.className+" docusaurus-highlight-code-line"),o.a.createElement("div",Object(a.a)({key:t},n),e.map(((e,t)=>o.a.createElement("span",Object(a.a)({key:t},l({token:e,key:t}))))))}))))))))},L=(n(48),n(49)),D=n.n(L);var I=e=>function({id:t,...n}){const{siteConfig:{themeConfig:{navbar:{hideOnScroll:a=!1}={}}={}}={}}=Object(O.a)();return t?o.a.createElement(e,n,o.a.createElement("a",{"aria-hidden":"true",tabIndex:-1,className:Object(c.a)("anchor",{[D.a.enhancedAnchor]:!a}),id:t}),n.children,o.a.createElement("a",{"aria-hidden":"true",tabIndex:-1,className:"hash-link",href:"#"+t,title:"Direct link to heading"},"#")):o.a.createElement(e,n)},B=n(50),M=n.n(B);const A={code:e=>{const{children:t}=e;return"string"==typeof t?t.includes("\n")?o.a.createElement(S,e):o.a.createElement("code",e):t},a:e=>o.a.createElement(l.a,e),pre:e=>o.a.createElement("div",Object(a.a)({className:M.a.mdxCodeBlock},e)),h1:I("h1"),h2:I("h2"),h3:I("h3"),h4:I("h4"),h5:I("h5"),h6:I("h6")};t.a=A},468:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(295);t.default=function(){return r.a.createElement(o.a,{title:"Page Not Found"},r.a.createElement("div",{className:"container margin-vert--xl"},r.a.createElement("div",{className:"row"},r.a.createElement("div",{className:"col col--6 col--offset-3"},r.a.createElement("h1",{className:"hero__title"},"Page Not Found"),r.a.createElement("p",null,"We could not find what you were looking for."),r.a.createElement("p",null,"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
+(window.webpackJsonp=window.webpackJsonp||[]).push([[237,238],{289:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(292),l=n(293),c=n(21),s=n(297),i=n(2),u=n(294),p=n(477),m=n(479),d=n(480),y=n(481),h=n(478),f=n(295),b=n(299),g=n(84),v=n.n(g);const k=(e,t)=>"link"===e.type?((e,t)=>{const n=e=>e.endsWith("/")?e:e+"/";return n(e)===n(t)})(e.href,t):"category"===e.type&&e.items.some((e=>k(e,t)));function j({item:e,onItemClick:t,collapsible:n,activePath:o,...l}){const{items:c,label:s}=e,p=k(e,o),m=function(e){const t=Object(a.useRef)(e);return Object(a.useEffect)((()=>{t.current=e}),[e]),t.current}(p),[d,y]=Object(a.useState)((()=>!!n&&(!p&&e.collapsed)));Object(a.useEffect)((()=>{p&&!m&&d&&y(!1)}),[p,m,d]);const h=Object(a.useCallback)((e=>{e.preventDefault(),y((e=>!e))}),[y]);return 0===c.length?null:r.a.createElement("li",{className:Object(u.a)("menu__list-item",{"menu__list-item--collapsed":d}),key:s},r.a.createElement("a",Object(i.a)({className:Object(u.a)("menu__link",{"menu__link--sublist":n,"menu__link--active":n&&p,[v.a.menuLinkText]:!n}),onClick:n?h:void 0,href:n?"#!":void 0},l),s),r.a.createElement("ul",{className:"menu__list"},c.map((e=>r.a.createElement(E,{tabIndex:d?"-1":"0",key:e.label,item:e,onItemClick:t,collapsible:n,activePath:o})))))}function O({item:e,onItemClick:t,activePath:n,collapsible:a,...o}){const{href:l,label:c}=e,s=k(e,n);return r.a.createElement("li",{className:"menu__list-item",key:c},r.a.createElement(f.a,Object(i.a)({className:Object(u.a)("menu__link",{"menu__link--active":s}),to:l},Object(b.a)(l)?{isNavLink:!0,exact:!0,onClick:t}:{target:"_blank",rel:"noreferrer noopener"},o),c))}function E(e){switch(e.item.type){case"category":return r.a.createElement(j,e);case"link":default:return r.a.createElement(O,e)}}var N=function({path:e,sidebar:t,sidebarCollapsible:n=!0}){const[o,c]=Object(a.useState)(!1),{siteConfig:{themeConfig:{navbar:{title:s="",hideOnScroll:b=!1}={}}={}}={},isClient:g}=Object(l.a)(),{logoLink:k,logoLinkProps:j,logoImageUrl:O,logoAlt:N}=Object(y.a)(),{isAnnouncementBarClosed:C}=Object(p.a)(),{scrollY:w}=Object(h.a)();Object(m.a)(o);const x=Object(d.a)();return Object(a.useEffect)((()=>{x===d.b.desktop&&c(!1)}),[x]),r.a.createElement("div",{className:Object(u.a)(v.a.sidebar,{[v.a.sidebarWithHideableNavbar]:b})},b&&r.a.createElement(f.a,Object(i.a)({tabIndex:-1,className:v.a.sidebarLogo,to:k},j),null!=O&&r.a.createElement("img",{key:g,src:O,alt:N}),null!=s&&r.a.createElement("strong",null,s)),r.a.createElement("div",{className:Object(u.a)("menu","menu--responsive",v.a.menu,{"menu--show":o,[v.a.menuWithAnnouncementBar]:!C&&0===w})},r.a.createElement("button",{"aria-label":o?"Close Menu":"Open Menu","aria-haspopup":"true",className:"button button--secondary button--sm menu__button",type:"button",onClick:()=>{c(!o)}},o?r.a.createElement("span",{className:Object(u.a)(v.a.sidebarMenuIcon,v.a.sidebarMenuCloseIcon)},"\xd7"):r.a.createElement("svg",{"aria-label":"Menu",className:v.a.sidebarMenuIcon,xmlns:"http://www.w3.org/2000/svg",height:24,width:24,viewBox:"0 0 32 32",role:"img",focusable:"false"},r.a.createElement("title",null,"Menu"),r.a.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"}))),r.a.createElement("ul",{className:"menu__list"},t.map((t=>r.a.createElement(E,{key:t.label,item:t,onItemClick:e=>{e.target.blur(),c(!1)},collapsible:n,activePath:e}))))))},C=n(471),w=n(474),x=n(301),P=n(298),_=n(85),T=n.n(_);function S({version:e,isLast:t}){const n=t?[e,"latest"]:[e];return r.a.createElement(P.a,null,r.a.createElement("meta",{name:"docsearch:version",content:n.join(",")}))}function L({currentDocRoute:e,versionMetadata:t,children:n}){var a,c;const{siteConfig:i,isClient:u}=Object(l.a)(),{permalinkToSidebar:p,docsSidebars:m,version:d,isLast:y}=t,h=p[e.path],f=m[h];return r.a.createElement(r.a.Fragment,null,r.a.createElement(S,{version:d,isLast:y}),r.a.createElement(s.a,{key:u},r.a.createElement("div",{className:T.a.docPage},f&&r.a.createElement("div",{className:T.a.docSidebarContainer,role:"complementary"},r.a.createElement(N,{key:h,sidebar:f,path:e.path,sidebarCollapsible:null===(a=null===(c=i.themeConfig)||void 0===c?void 0:c.sidebarCollapsible)||void 0===a||a})),r.a.createElement("main",{className:T.a.docMainContainer},r.a.createElement(o.a,{components:C.a},n)))))}t.default=function(e){const{route:{routes:t},versionMetadata:n,location:a}=e,o=t.find((e=>Object(x.matchPath)(a.pathname,e)));return o?r.a.createElement(L,{currentDocRoute:o,versionMetadata:n},Object(c.a)(t)):r.a.createElement(w.default,e)}},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return y}));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 l(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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var i=r.a.createContext({}),u=function(e){var t=r.a.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=u(e.components);return r.a.createElement(i.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,a=e.mdxType,o=e.originalType,l=e.parentName,i=s(e,["components","mdxType","originalType","parentName"]),p=u(n),d=a,y=p["".concat(l,".").concat(d)]||p[d]||m[d]||o;return n?r.a.createElement(y,c(c({ref:t},i),{},{components:n})):r.a.createElement(y,c({ref:t},i))}));function y(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,l=new Array(o);l[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:a,l[1]=c;for(var i=2;i<o;i++)l[i]=n[i];return r.a.createElement.apply(null,l)}return r.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},321:function(e,t,n){"use strict";const a=(e,{target:t=document.body}={})=>{const n=document.createElement("textarea"),a=document.activeElement;n.value=e,n.setAttribute("readonly",""),n.style.contain="strict",n.style.position="absolute",n.style.left="-9999px",n.style.fontSize="12pt";const r=document.getSelection();let o=!1;r.rangeCount>0&&(o=r.getRangeAt(0)),t.append(n),n.select(),n.selectionStart=0,n.selectionEnd=e.length;let l=!1;try{l=document.execCommand("copy")}catch(c){}return n.remove(),o&&(r.removeAllRanges(),r.addRange(o)),a&&a.focus(),l};e.exports=a,e.exports.default=a},322:function(e,t){e.exports.parse=function(e){var t=e.split(",").map((function(e){return function(e){if(/^-?\d+$/.test(e))return parseInt(e,10);var t;if(t=e.match(/^(-?\d+)(-|\.\.\.?|\u2025|\u2026|\u22EF)(-?\d+)$/)){var n=t[1],a=t[2],r=t[3];if(n&&r){var o=[],l=(n=parseInt(n))<(r=parseInt(r))?1:-1;"-"!=a&&".."!=a&&"\u2025"!=a||(r+=l);for(var c=n;c!=r;c+=l)o.push(c);return o}}return[]}(e)}));return 0===t.length?[]:1===t.length?Array.isArray(t[0])?t[0]:t:t.reduce((function(e,t){return Array.isArray(e)||(e=[e]),Array.isArray(t)||(t=[t]),e.concat(t)}))}},471:function(e,t,n){"use strict";var a=n(2),r=n(0),o=n.n(r),l=n(295),c=n(294),s={plain:{backgroundColor:"#2a2734",color:"#9a86fd"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#6c6783"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#e09142"}},{types:["property","function"],style:{color:"#9a86fd"}},{types:["tag-id","selector","atrule-id"],style:{color:"#eeebff"}},{types:["attr-name"],style:{color:"#c4b9fe"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","at-rule","placeholder","variable"],style:{color:"#ffcc99"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#c4b9fe"}}]},i={Prism:n(19).a,theme:s};function u(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(){return(p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}var m=/\r\n|\r|\n/,d=function(e){0===e.length?e.push({types:["plain"],content:"",empty:!0}):1===e.length&&""===e[0].content&&(e[0].empty=!0)},y=function(e,t){var n=e.length;return n>0&&e[n-1]===t?e:e.concat(t)},h=function(e,t){var n=e.plain,a=Object.create(null),r=e.styles.reduce((function(e,n){var a=n.languages,r=n.style;return a&&!a.includes(t)||n.types.forEach((function(t){var n=p({},e[t],r);e[t]=n})),e}),a);return r.root=n,r.plain=p({},n,{backgroundColor:null}),r};function f(e,t){var n={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&-1===t.indexOf(a)&&(n[a]=e[a]);return n}var b=function(e){function t(){for(var t=this,n=[],a=arguments.length;a--;)n[a]=arguments[a];e.apply(this,n),u(this,"getThemeDict",(function(e){if(void 0!==t.themeDict&&e.theme===t.prevTheme&&e.language===t.prevLanguage)return t.themeDict;t.prevTheme=e.theme,t.prevLanguage=e.language;var n=e.theme?h(e.theme,e.language):void 0;return t.themeDict=n})),u(this,"getLineProps",(function(e){var n=e.key,a=e.className,r=e.style,o=p({},f(e,["key","className","style","line"]),{className:"token-line",style:void 0,key:void 0}),l=t.getThemeDict(t.props);return void 0!==l&&(o.style=l.plain),void 0!==r&&(o.style=void 0!==o.style?p({},o.style,r):r),void 0!==n&&(o.key=n),a&&(o.className+=" "+a),o})),u(this,"getStyleForToken",(function(e){var n=e.types,a=e.empty,r=n.length,o=t.getThemeDict(t.props);if(void 0!==o){if(1===r&&"plain"===n[0])return a?{display:"inline-block"}:void 0;if(1===r&&!a)return o[n[0]];var l=a?{display:"inline-block"}:{},c=n.map((function(e){return o[e]}));return Object.assign.apply(Object,[l].concat(c))}})),u(this,"getTokenProps",(function(e){var n=e.key,a=e.className,r=e.style,o=e.token,l=p({},f(e,["key","className","style","token"]),{className:"token "+o.types.join(" "),children:o.content,style:t.getStyleForToken(o),key:void 0});return void 0!==r&&(l.style=void 0!==l.style?p({},l.style,r):r),void 0!==n&&(l.key=n),a&&(l.className+=" "+a),l}))}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.render=function(){var e=this.props,t=e.Prism,n=e.language,a=e.code,r=e.children,o=this.getThemeDict(this.props),l=t.languages[n];return r({tokens:function(e){for(var t=[[]],n=[e],a=[0],r=[e.length],o=0,l=0,c=[],s=[c];l>-1;){for(;(o=a[l]++)<r[l];){var i=void 0,u=t[l],p=n[l][o];if("string"==typeof p?(u=l>0?u:["plain"],i=p):(u=y(u,p.type),p.alias&&(u=y(u,p.alias)),i=p.content),"string"==typeof i){var h=i.split(m),f=h.length;c.push({types:u,content:h[0]});for(var b=1;b<f;b++)d(c),s.push(c=[]),c.push({types:u,content:h[b]})}else l++,t.push(u),n.push(i),a.push(0),r.push(i.length)}l--,t.pop(),n.pop(),a.pop(),r.pop()}return d(c),s}(void 0!==l?t.tokenize(a,l,n):[a]),className:"prism-code language-"+n,style:void 0!==o?o.root:{},getLineProps:this.getLineProps,getTokenProps:this.getTokenProps})},t}(r.Component),g=n(321),v=n.n(g),k=n(322),j=n.n(k),O=n(293),E={plain:{color:"#bfc7d5",backgroundColor:"#292d3e"},styles:[{types:["comment"],style:{color:"rgb(105, 112, 152)",fontStyle:"italic"}},{types:["string","inserted"],style:{color:"rgb(195, 232, 141)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation","selector"],style:{color:"rgb(199, 146, 234)"}},{types:["variable"],style:{color:"rgb(191, 199, 213)"}},{types:["class-name","attr-name"],style:{color:"rgb(255, 203, 107)"}},{types:["tag","deleted"],style:{color:"rgb(255, 85, 114)"}},{types:["operator"],style:{color:"rgb(137, 221, 255)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["keyword"],style:{fontStyle:"italic"}},{types:["doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}},{types:["url"],style:{color:"rgb(221, 221, 221)"}}]},N=n(300);var C=()=>{const{siteConfig:{themeConfig:{prism:e={}}}}=Object(O.a)(),{isDarkTheme:t}=Object(N.a)(),n=e.theme||E,a=e.darkTheme||n;return t?a:n},w=n(47),x=n.n(w);const P=/{([\d,-]+)}/,_=(e=["js","jsBlock","jsx","python","html"])=>{const t={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},python:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}},n=["highlight-next-line","highlight-start","highlight-end"].join("|"),a=e.map((e=>`(?:${t[e].start}\\s*(${n})\\s*${t[e].end})`)).join("|");return new RegExp(`^\\s*(?:${a})\\s*$`)},T=/title=".*"/;var S=({children:e,className:t,metastring:n})=>{const{siteConfig:{themeConfig:{prism:l={}}}}=Object(O.a)(),[s,u]=Object(r.useState)(!1),[p,m]=Object(r.useState)(!1);Object(r.useEffect)((()=>{m(!0)}),[]);const d=Object(r.useRef)(null);let y=[],h="";const f=C();if(n&&P.test(n)){const e=n.match(P)[1];y=j.a.parse(e).filter((e=>e>0))}n&&T.test(n)&&(h=n.match(T)[0].split("title=")[1].replace(/"+/g,""));let g=t&&t.replace(/language-/,"");!g&&l.defaultLanguage&&(g=l.defaultLanguage);let k=e.replace(/\n$/,"");if(0===y.length&&void 0!==g){let t="";const n=(e=>{switch(e){case"js":case"javascript":case"ts":case"typescript":return _(["js","jsBlock"]);case"jsx":case"tsx":return _(["js","jsBlock","jsx"]);case"html":return _(["js","jsBlock","html"]);case"python":case"py":return _(["python"]);default:return _()}})(g),a=e.replace(/\n$/,"").split("\n");let r;for(let e=0;e<a.length;){const o=e+1,l=a[e].match(n);if(null!==l){switch(l.slice(1).reduce(((e,t)=>e||t),void 0)){case"highlight-next-line":t+=o+",";break;case"highlight-start":r=o;break;case"highlight-end":t+=`${r}-${o-1},`}a.splice(e,1)}else e+=1}y=j.a.parse(t),k=a.join("\n")}const E=()=>{v()(k),u(!0),setTimeout((()=>u(!1)),2e3)};return o.a.createElement(b,Object(a.a)({},i,{key:String(p),theme:f,code:k,language:g}),(({className:e,style:t,tokens:n,getLineProps:r,getTokenProps:l})=>o.a.createElement(o.a.Fragment,null,h&&o.a.createElement("div",{style:t,className:x.a.codeBlockTitle},h),o.a.createElement("div",{className:x.a.codeBlockContent},o.a.createElement("button",{ref:d,type:"button","aria-label":"Copy code to clipboard",className:Object(c.a)(x.a.copyButton,{[x.a.copyButtonWithTitle]:h}),onClick:E},s?"Copied":"Copy"),o.a.createElement("div",{tabIndex:0,className:Object(c.a)(e,x.a.codeBlock,{[x.a.codeBlockWithTitle]:h})},o.a.createElement("div",{className:x.a.codeBlockLines,style:t},n.map(((e,t)=>{1===e.length&&""===e[0].content&&(e[0].content="\n");const n=r({line:e,key:t});return y.includes(t+1)&&(n.className=n.className+" docusaurus-highlight-code-line"),o.a.createElement("div",Object(a.a)({key:t},n),e.map(((e,t)=>o.a.createElement("span",Object(a.a)({key:t},l({token:e,key:t}))))))}))))))))},L=(n(48),n(49)),D=n.n(L);var I=e=>function({id:t,...n}){const{siteConfig:{themeConfig:{navbar:{hideOnScroll:a=!1}={}}={}}={}}=Object(O.a)();return t?o.a.createElement(e,n,o.a.createElement("a",{"aria-hidden":"true",tabIndex:-1,className:Object(c.a)("anchor",{[D.a.enhancedAnchor]:!a}),id:t}),n.children,o.a.createElement("a",{"aria-hidden":"true",tabIndex:-1,className:"hash-link",href:"#"+t,title:"Direct link to heading"},"#")):o.a.createElement(e,n)},B=n(50),M=n.n(B);const A={code:e=>{const{children:t}=e;return"string"==typeof t?t.includes("\n")?o.a.createElement(S,e):o.a.createElement("code",e):t},a:e=>o.a.createElement(l.a,e),pre:e=>o.a.createElement("div",Object(a.a)({className:M.a.mdxCodeBlock},e)),h1:I("h1"),h2:I("h2"),h3:I("h3"),h4:I("h4"),h5:I("h5"),h6:I("h6")};t.a=A},474:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n.n(a),o=n(297);t.default=function(){return r.a.createElement(o.a,{title:"Page Not Found"},r.a.createElement("div",{className:"container margin-vert--xl"},r.a.createElement("div",{className:"row"},r.a.createElement("div",{className:"col col--6 col--offset-3"},r.a.createElement("h1",{className:"hero__title"},"Page Not Found"),r.a.createElement("p",null,"We could not find what you were looking for."),r.a.createElement("p",null,"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/236.908f536c.js b/docs/238.cf1fd2bd.js
similarity index 80%
rename from docs/236.908f536c.js
rename to docs/238.cf1fd2bd.js
index 3e18962ae3..0ebc91dcbf 100644
--- a/docs/236.908f536c.js
+++ b/docs/238.cf1fd2bd.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[236],{468:function(e,t,a){"use strict";a.r(t);var n=a(0),o=a.n(n),l=a(295);t.default=function(){return o.a.createElement(l.a,{title:"Page Not Found"},o.a.createElement("div",{className:"container margin-vert--xl"},o.a.createElement("div",{className:"row"},o.a.createElement("div",{className:"col col--6 col--offset-3"},o.a.createElement("h1",{className:"hero__title"},"Page Not Found"),o.a.createElement("p",null,"We could not find what you were looking for."),o.a.createElement("p",null,"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
+(window.webpackJsonp=window.webpackJsonp||[]).push([[238],{474:function(e,t,a){"use strict";a.r(t);var n=a(0),o=a.n(n),l=a(297);t.default=function(){return o.a.createElement(l.a,{title:"Page Not Found"},o.a.createElement("div",{className:"container margin-vert--xl"},o.a.createElement("div",{className:"row"},o.a.createElement("div",{className:"col col--6 col--offset-3"},o.a.createElement("h1",{className:"hero__title"},"Page Not Found"),o.a.createElement("p",null,"We could not find what you were looking for."),o.a.createElement("p",null,"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/2673e11f.b568803c.js b/docs/2673e11f.e32a7b66.js
similarity index 92%
rename from docs/2673e11f.b568803c.js
rename to docs/2673e11f.e32a7b66.js
index b3497cb8f5..fc95d82439 100644
--- a/docs/2673e11f.b568803c.js
+++ b/docs/2673e11f.e32a7b66.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return d}));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 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 c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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)},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,p=l(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},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 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:n,i[1]=c;for(var p=2;p<o;p++)i[p]=r[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},325:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-altair-6b648257bc043077af771b8bbdf91735.png"},89: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 s}));var n=r(2),a=r(6),o=(r(0),r(290)),i={title:"Plot / Altair"},c={unversionedId:"examples/plot-altair",id:"examples/plot-altair",isDocsHomePage:!1,title:"Plot / Altair",description:"Use Altair to create plot specifications for the Vega card.",source:"@site/docs/examples/plot-altair.md",slug:"/examples/plot-altair",permalink:"/wave/docs/examples/plot-altair",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-altair.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Vega-lite / Form",permalink:"/wave/docs/examples/plot-vegalite-form"},next:{title:"Plot / Bokeh",permalink:"/wave/docs/examples/plot-bokeh"}},l=[],p={rightToc:l};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use Altair to create plot specifications for the Vega card."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(325).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"import altair\nfrom vega_datasets import data\nfrom h2o_wave import site, ui\n\nspec = altair.Chart(data.cars()).mark_circle(size=60).encode(\n    x='Horsepower',\n    y='Miles_per_Gallon',\n    color='Origin',\n    tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon']\n).interactive().to_json()\n\npage = site['/demo']\n\npage['example'] = ui.vega_card(\n    box='1 1 4 5',\n    title='Altair Example',\n    specification=spec,\n)\n\npage.save()\n")))}s.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{292:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return d}));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 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 c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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)},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,p=l(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},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 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:n,i[1]=c;for(var p=2;p<o;p++)i[p]=r[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},327:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-altair-6b648257bc043077af771b8bbdf91735.png"},91: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 s}));var n=r(2),a=r(6),o=(r(0),r(292)),i={title:"Plot / Altair"},c={unversionedId:"examples/plot-altair",id:"examples/plot-altair",isDocsHomePage:!1,title:"Plot / Altair",description:"Use Altair to create plot specifications for the Vega card.",source:"@site/docs/examples/plot-altair.md",slug:"/examples/plot-altair",permalink:"/wave/docs/examples/plot-altair",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-altair.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Vega-lite / Form",permalink:"/wave/docs/examples/plot-vegalite-form"},next:{title:"Plot / Bokeh",permalink:"/wave/docs/examples/plot-bokeh"}},l=[],p={rightToc:l};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use Altair to create plot specifications for the Vega card."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(327).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"import altair\nfrom vega_datasets import data\nfrom h2o_wave import site, ui\n\nspec = altair.Chart(data.cars()).mark_circle(size=60).encode(\n    x='Horsepower',\n    y='Miles_per_Gallon',\n    color='Origin',\n    tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon']\n).interactive().to_json()\n\npage = site['/demo']\n\npage['example'] = ui.vega_card(\n    box='1 1 4 5',\n    title='Altair Example',\n    specification=spec,\n)\n\npage.save()\n")))}s.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/26907763.3c7ec9cd.js b/docs/26907763.78a84cc6.js
similarity index 92%
rename from docs/26907763.3c7ec9cd.js
rename to docs/26907763.78a84cc6.js
index e1de2b14ca..699d9248cc 100644
--- a/docs/26907763.3c7ec9cd.js
+++ b/docs/26907763.78a84cc6.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return b}));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 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 p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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,b=u["".concat(i,".").concat(m)]||u[m]||f[m]||o;return r?a.a.createElement(b,p(p({ref:t},l),{},{components:r})):a.a.createElement(b,p({ref:t},l))}));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 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<o;l++)i[l]=r[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},326:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-step-before-45d2a85b93deb34a9e029e0d1ac5e578.png"},90:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return p})),r.d(t,"rightToc",(function(){return c})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(290)),i={title:"Plot / Line / Step / Before"},p={unversionedId:"examples/plot-step-before",id:"examples/plot-step-before",isDocsHomePage:!1,title:"Plot / Line / Step / Before",description:"Make a line plot with a step-before curve.",source:"@site/docs/examples/plot-step-before.md",slug:"/examples/plot-step-before",permalink:"/wave/docs/examples/plot-step-before",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-step-before.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Line / Step / After",permalink:"/wave/docs/examples/plot-step-after"},next:{title:"Plot / Line / Labels",permalink:"/wave/docs/examples/plot-line-labels"}},c=[],l={rightToc:c};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a line plot with a step-before curve."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(326).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.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='Line, step-left',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', curve='step-before', y_min=0)])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{292:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return b}));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 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 p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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,b=u["".concat(i,".").concat(m)]||u[m]||f[m]||o;return r?a.a.createElement(b,p(p({ref:t},l),{},{components:r})):a.a.createElement(b,p({ref:t},l))}));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 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<o;l++)i[l]=r[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},328:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-step-before-45d2a85b93deb34a9e029e0d1ac5e578.png"},92:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return p})),r.d(t,"rightToc",(function(){return c})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(292)),i={title:"Plot / Line / Step / Before"},p={unversionedId:"examples/plot-step-before",id:"examples/plot-step-before",isDocsHomePage:!1,title:"Plot / Line / Step / Before",description:"Make a line plot with a step-before curve.",source:"@site/docs/examples/plot-step-before.md",slug:"/examples/plot-step-before",permalink:"/wave/docs/examples/plot-step-before",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-step-before.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Line / Step / After",permalink:"/wave/docs/examples/plot-step-after"},next:{title:"Plot / Line / Labels",permalink:"/wave/docs/examples/plot-line-labels"}},c=[],l={rightToc:c};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a line plot with a step-before curve."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(328).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.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='Line, step-left',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', curve='step-before', y_min=0)])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/26a8c297.6b0d8d74.js b/docs/26a8c297.6b0d8d74.js
new file mode 100644
index 0000000000..9fb211548a
--- /dev/null
+++ b/docs/26a8c297.6b0d8d74.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{292:function(e,t,r){"use strict";r.d(t,"a",(function(){return f})),r.d(t,"b",(function(){return m}));var n=r(0),o=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 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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function u(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var p=o.a.createContext({}),l=function(e){var t=o.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},f=function(e){var t=l(e.components);return o.a.createElement(p.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 r=e.components,n=e.mdxType,a=e.originalType,c=e.parentName,p=u(e,["components","mdxType","originalType","parentName"]),f=l(r),d=n,m=f["".concat(c,".").concat(d)]||f[d]||s[d]||a;return r?o.a.createElement(m,i(i({ref:t},p),{},{components:r})):o.a.createElement(m,i({ref:t},p))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,c=new Array(a);c[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:n,c[1]=i;for(var p=2;p<a;p++)c[p]=r[p];return o.a.createElement.apply(null,c)}return o.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},93: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 u})),r.d(t,"default",(function(){return l}));var n=r(2),o=r(6),a=(r(0),r(292)),c={title:"Module h2o_wave.cli"},i={unversionedId:"api/cli",id:"api/cli",isDocsHomePage:!1,title:"Module h2o_wave.cli",source:"@site/docs/api/cli.md",slug:"/api/cli",permalink:"/wave/docs/api/cli",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/api/cli.md",version:"current"},u=[],p={rightToc:u};function l(e){var t=e.components,r=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},p,r,{components:t,mdxType:"MDXLayout"}))}l.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/273cfbdf.7d2b8c73.js b/docs/273cfbdf.bacb6f0e.js
similarity index 92%
rename from docs/273cfbdf.7d2b8c73.js
rename to docs/273cfbdf.bacb6f0e.js
index 12dbd1877a..43a7d057b3 100644
--- a/docs/273cfbdf.7d2b8c73.js
+++ b/docs/273cfbdf.bacb6f0e.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return d}));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 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 p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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,i=e.parentName,l=c(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,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]=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:n,i[1]=p;for(var l=2;l<o;l++)i[l]=r[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},327:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-area-negative-72b6ee9e1692572a50b4f9e5f88db0ce.png"},91:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return p})),r.d(t,"rightToc",(function(){return c})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(290)),i={title:"Plot / Area / Negative"},p={unversionedId:"examples/plot-area-negative",id:"examples/plot-area-negative",isDocsHomePage:!1,title:"Plot / Area / Negative",description:"Make an area plot showing positive and negative values.",source:"@site/docs/examples/plot-area-negative.md",slug:"/examples/plot-area-negative",permalink:"/wave/docs/examples/plot-area-negative",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-negative.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Area / Groups",permalink:"/wave/docs/examples/plot-area-groups"},next:{title:"Plot / Area / Range",permalink:"/wave/docs/examples/plot-area-range"}},c=[],l={rightToc:c};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make an area plot showing positive and negative values."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(327).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.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(min=-50, max=50, start=0)\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Area, negative values',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='area', x_scale='time', x='=date', y='=price')])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{292:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return d}));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 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 p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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,i=e.parentName,l=c(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,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]=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:n,i[1]=p;for(var l=2;l<o;l++)i[l]=r[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},329:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-area-negative-72b6ee9e1692572a50b4f9e5f88db0ce.png"},94:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return p})),r.d(t,"rightToc",(function(){return c})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(292)),i={title:"Plot / Area / Negative"},p={unversionedId:"examples/plot-area-negative",id:"examples/plot-area-negative",isDocsHomePage:!1,title:"Plot / Area / Negative",description:"Make an area plot showing positive and negative values.",source:"@site/docs/examples/plot-area-negative.md",slug:"/examples/plot-area-negative",permalink:"/wave/docs/examples/plot-area-negative",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-negative.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Area / Groups",permalink:"/wave/docs/examples/plot-area-groups"},next:{title:"Plot / Area / Range",permalink:"/wave/docs/examples/plot-area-range"}},c=[],l={rightToc:c};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make an area plot showing positive and negative values."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(329).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.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(min=-50, max=50, start=0)\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Area, negative values',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='area', x_scale='time', x='=date', y='=price')])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/28283d16.6409b930.js b/docs/28283d16.58230099.js
similarity index 97%
rename from docs/28283d16.6409b930.js
rename to docs/28283d16.58230099.js
index 1fa5f8714d..c84349789a 100644
--- a/docs/28283d16.6409b930.js
+++ b/docs/28283d16.58230099.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{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 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 c(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function l(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var s=r.a.createContext({}),d=function(e){var t=r.a.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},b=function(e){var t=d(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)}},p=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),b=d(a),p=n,h=b["".concat(i,".").concat(p)]||b[p]||u[p]||o;return a?r.a.createElement(h,c(c({ref:t},s),{},{components:a})):r.a.createElement(h,c({ref:t},s))}));function h(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,i=new Array(o);i[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,i[1]=c;for(var s=2;s<o;s++)i[s]=a[s];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,a)}p.displayName="MDXCreateElement"},92:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return i})),a.d(t,"metadata",(function(){return c})),a.d(t,"rightToc",(function(){return l})),a.d(t,"default",(function(){return d}));var n=a(2),r=a(6),o=(a(0),a(290)),i={title:"Module h2o_wave.autoreload"},c={unversionedId:"api/autoreload",id:"api/autoreload",isDocsHomePage:!1,title:"Module h2o_wave.autoreload",description:"Functions",source:"@site/docs/api/autoreload.md",slug:"/api/autoreload",permalink:"/wave/docs/api/autoreload",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/api/autoreload.md",version:"current"},l=[{value:"Functions",id:"functions",children:[{value:'add_reload_hook <a name="h2o_wave.autoreload.add_reload_hook"/>',id:"add_reload_hook",children:[]},{value:'main <a name="h2o_wave.autoreload.main"/>',id:"main",children:[]},{value:'rerun <a name="h2o_wave.autoreload.rerun"/>',id:"rerun",children:[]},{value:'start <a name="h2o_wave.autoreload.start"/>',id:"start",children:[]},{value:'wait <a name="h2o_wave.autoreload.wait"/>',id:"wait",children:[]},{value:'watch <a name="h2o_wave.autoreload.watch"/>',id:"watch",children:[]}]}],s={rightToc:l};function d(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},s,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)("h2",{id:"functions"},"Functions"),Object(o.b)("div",{className:"api"},Object(o.b)("h3",{id:"add_reload_hook"},"add_reload_hook ",Object(o.b)("a",{name:"h2o_wave.autoreload.add_reload_hook"})),Object(o.b)("div",{className:"api__body"},Object(o.b)("div",{className:"api__signature"},"def ",Object(o.b)("span",{class:"ident"},"add_reload_hook"),"(fn:\xa0Callable[[],\xa0NoneType]) \u2011>\xa0NoneType"),Object(o.b)("div",{className:"api__description"},Object(o.b)("p",null,"Add a function to be called before reloading the process."),Object(o.b)("p",null,"Note that for open file and socket handles it is generally preferable to set the ",Object(o.b)("code",null,"FD_CLOEXEC")," flag (using ",Object(o.b)("code",null,"fcntl")," or",Object(o.b)("code",null,"os.set_inheritable"),") instead of using a reload hook to close them.")))),Object(o.b)("div",{className:"api"},Object(o.b)("h3",{id:"main"},"main ",Object(o.b)("a",{name:"h2o_wave.autoreload.main"})),Object(o.b)("div",{className:"api__body"},Object(o.b)("div",{className:"api__signature"},"def ",Object(o.b)("span",{class:"ident"},"main"),"() \u2011>\xa0NoneType"),Object(o.b)("div",{className:"api__description"},Object(o.b)("p",null,"Command-line wrapper to re-run a script whenever its source changes."),Object(o.b)("p",null,"Scripts may be specified by filename or module name::"),Object(o.b)("pre",null,Object(o.b)("code",null,"python -m h2o_wave -m h2o_wave.test.runtests python -m h2o_wave h2o_wave/test/runtests.py")),Object(o.b)("p",null,"Running a script with this wrapper is similar to calling",Object(o.b)("code",null,Object(o.b)("a",{title:"h2o_wave.autoreload.wait",href:"#h2o_wave.autoreload.wait"},"wait()"))," 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 ",Object(o.b)("code",null,Object(o.b)("a",{title:"h2o_wave.autoreload.wait",href:"#h2o_wave.autoreload.wait"},"wait()")),".")))),Object(o.b)("div",{className:"api"},Object(o.b)("h3",{id:"rerun"},"rerun ",Object(o.b)("a",{name:"h2o_wave.autoreload.rerun"})),Object(o.b)("div",{className:"api__body"},Object(o.b)("div",{className:"api__signature"},"def ",Object(o.b)("span",{class:"ident"},"rerun"),"(code:\xa0Any, glob:\xa0Dict[str,\xa0Any], loc:\xa0Union[Mapping[str,\xa0Any],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0NoneType"),Object(o.b)("div",{className:"api__description"}))),Object(o.b)("div",{className:"api"},Object(o.b)("h3",{id:"start"},"start ",Object(o.b)("a",{name:"h2o_wave.autoreload.start"})),Object(o.b)("div",{className:"api__body"},Object(o.b)("div",{className:"api__signature"},"def ",Object(o.b)("span",{class:"ident"},"start"),"(check_time:\xa0int\xa0=\xa0500) \u2011>\xa0NoneType"),Object(o.b)("div",{className:"api__description"},Object(o.b)("p",null,"Begins watching source files for changes.")))),Object(o.b)("div",{className:"api"},Object(o.b)("h3",{id:"wait"},"wait ",Object(o.b)("a",{name:"h2o_wave.autoreload.wait"})),Object(o.b)("div",{className:"api__body"},Object(o.b)("div",{className:"api__signature"},"def ",Object(o.b)("span",{class:"ident"},"wait"),"() \u2011>\xa0NoneType"),Object(o.b)("div",{className:"api__description"},Object(o.b)("p",null,"Wait for a watched file to change, then restart the process."),Object(o.b)("p",null,"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 ",Object(o.b)("code",null,Object(o.b)("a",{title:"h2o_wave.autoreload.main",href:"#h2o_wave.autoreload.main"},"main()")),")")))),Object(o.b)("div",{className:"api"},Object(o.b)("h3",{id:"watch"},"watch ",Object(o.b)("a",{name:"h2o_wave.autoreload.watch"})),Object(o.b)("div",{className:"api__body"},Object(o.b)("div",{className:"api__signature"},"def ",Object(o.b)("span",{class:"ident"},"watch"),"(filename:\xa0str) \u2011>\xa0NoneType"),Object(o.b)("div",{className:"api__description"},Object(o.b)("p",null,"Add a file to the watch list."),Object(o.b)("p",null,"All imported modules are watched by default.")))))}d.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{292: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 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 c(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function l(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var s=r.a.createContext({}),d=function(e){var t=r.a.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},b=function(e){var t=d(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)}},p=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),b=d(a),p=n,h=b["".concat(i,".").concat(p)]||b[p]||u[p]||o;return a?r.a.createElement(h,c(c({ref:t},s),{},{components:a})):r.a.createElement(h,c({ref:t},s))}));function h(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,i=new Array(o);i[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,i[1]=c;for(var s=2;s<o;s++)i[s]=a[s];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,a)}p.displayName="MDXCreateElement"},95:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return i})),a.d(t,"metadata",(function(){return c})),a.d(t,"rightToc",(function(){return l})),a.d(t,"default",(function(){return d}));var n=a(2),r=a(6),o=(a(0),a(292)),i={title:"Module h2o_wave.autoreload"},c={unversionedId:"api/autoreload",id:"api/autoreload",isDocsHomePage:!1,title:"Module h2o_wave.autoreload",description:"Functions",source:"@site/docs/api/autoreload.md",slug:"/api/autoreload",permalink:"/wave/docs/api/autoreload",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/api/autoreload.md",version:"current"},l=[{value:"Functions",id:"functions",children:[{value:'add_reload_hook <a name="h2o_wave.autoreload.add_reload_hook"/>',id:"add_reload_hook",children:[]},{value:'main <a name="h2o_wave.autoreload.main"/>',id:"main",children:[]},{value:'rerun <a name="h2o_wave.autoreload.rerun"/>',id:"rerun",children:[]},{value:'start <a name="h2o_wave.autoreload.start"/>',id:"start",children:[]},{value:'wait <a name="h2o_wave.autoreload.wait"/>',id:"wait",children:[]},{value:'watch <a name="h2o_wave.autoreload.watch"/>',id:"watch",children:[]}]}],s={rightToc:l};function d(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},s,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)("h2",{id:"functions"},"Functions"),Object(o.b)("div",{className:"api"},Object(o.b)("h3",{id:"add_reload_hook"},"add_reload_hook ",Object(o.b)("a",{name:"h2o_wave.autoreload.add_reload_hook"})),Object(o.b)("div",{className:"api__body"},Object(o.b)("div",{className:"api__signature"},"def ",Object(o.b)("span",{class:"ident"},"add_reload_hook"),"(fn:\xa0Callable[[],\xa0NoneType]) \u2011>\xa0NoneType"),Object(o.b)("div",{className:"api__description"},Object(o.b)("p",null,"Add a function to be called before reloading the process."),Object(o.b)("p",null,"Note that for open file and socket handles it is generally preferable to set the ",Object(o.b)("code",null,"FD_CLOEXEC")," flag (using ",Object(o.b)("code",null,"fcntl")," or",Object(o.b)("code",null,"os.set_inheritable"),") instead of using a reload hook to close them.")))),Object(o.b)("div",{className:"api"},Object(o.b)("h3",{id:"main"},"main ",Object(o.b)("a",{name:"h2o_wave.autoreload.main"})),Object(o.b)("div",{className:"api__body"},Object(o.b)("div",{className:"api__signature"},"def ",Object(o.b)("span",{class:"ident"},"main"),"() \u2011>\xa0NoneType"),Object(o.b)("div",{className:"api__description"},Object(o.b)("p",null,"Command-line wrapper to re-run a script whenever its source changes."),Object(o.b)("p",null,"Scripts may be specified by filename or module name::"),Object(o.b)("pre",null,Object(o.b)("code",null,"python -m h2o_wave -m h2o_wave.test.runtests python -m h2o_wave h2o_wave/test/runtests.py")),Object(o.b)("p",null,"Running a script with this wrapper is similar to calling",Object(o.b)("code",null,Object(o.b)("a",{title:"h2o_wave.autoreload.wait",href:"#h2o_wave.autoreload.wait"},"wait()"))," 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 ",Object(o.b)("code",null,Object(o.b)("a",{title:"h2o_wave.autoreload.wait",href:"#h2o_wave.autoreload.wait"},"wait()")),".")))),Object(o.b)("div",{className:"api"},Object(o.b)("h3",{id:"rerun"},"rerun ",Object(o.b)("a",{name:"h2o_wave.autoreload.rerun"})),Object(o.b)("div",{className:"api__body"},Object(o.b)("div",{className:"api__signature"},"def ",Object(o.b)("span",{class:"ident"},"rerun"),"(code:\xa0Any, glob:\xa0Dict[str,\xa0Any], loc:\xa0Union[Mapping[str,\xa0Any],\xa0NoneType]\xa0=\xa0None) \u2011>\xa0NoneType"),Object(o.b)("div",{className:"api__description"}))),Object(o.b)("div",{className:"api"},Object(o.b)("h3",{id:"start"},"start ",Object(o.b)("a",{name:"h2o_wave.autoreload.start"})),Object(o.b)("div",{className:"api__body"},Object(o.b)("div",{className:"api__signature"},"def ",Object(o.b)("span",{class:"ident"},"start"),"(check_time:\xa0int\xa0=\xa0500) \u2011>\xa0NoneType"),Object(o.b)("div",{className:"api__description"},Object(o.b)("p",null,"Begins watching source files for changes.")))),Object(o.b)("div",{className:"api"},Object(o.b)("h3",{id:"wait"},"wait ",Object(o.b)("a",{name:"h2o_wave.autoreload.wait"})),Object(o.b)("div",{className:"api__body"},Object(o.b)("div",{className:"api__signature"},"def ",Object(o.b)("span",{class:"ident"},"wait"),"() \u2011>\xa0NoneType"),Object(o.b)("div",{className:"api__description"},Object(o.b)("p",null,"Wait for a watched file to change, then restart the process."),Object(o.b)("p",null,"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 ",Object(o.b)("code",null,Object(o.b)("a",{title:"h2o_wave.autoreload.main",href:"#h2o_wave.autoreload.main"},"main()")),")")))),Object(o.b)("div",{className:"api"},Object(o.b)("h3",{id:"watch"},"watch ",Object(o.b)("a",{name:"h2o_wave.autoreload.watch"})),Object(o.b)("div",{className:"api__body"},Object(o.b)("div",{className:"api__signature"},"def ",Object(o.b)("span",{class:"ident"},"watch"),"(filename:\xa0str) \u2011>\xa0NoneType"),Object(o.b)("div",{className:"api__description"},Object(o.b)("p",null,"Add a file to the watch list."),Object(o.b)("p",null,"All imported modules are watched by default.")))))}d.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/2868cdab.e22eb885.js b/docs/2868cdab.e22eb885.js
deleted file mode 100644
index fcdaa0c3ed..0000000000
--- a/docs/2868cdab.e22eb885.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{290:function(e,t,r){"use strict";r.d(t,"a",(function(){return s})),r.d(t,"b",(function(){return m}));var n=r(0),o=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 l(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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function u(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=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<a;i++)l[i]=r[i];return o.a.createElement.apply(null,l)}return o.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},93:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return l})),r.d(t,"metadata",(function(){return c})),r.d(t,"rightToc",(function(){return u})),r.d(t,"default",(function(){return p}));var n=r(2),o=r(6),a=(r(0),r(290)),l={slug:"welcome",title:"Welcome",author:"Yangshun Tay",author_title:"Front End Engineer @ Facebook",author_url:"https://github.com/yangshun",author_image_url:"https://avatars0.githubusercontent.com/u/1315101?s=400&v=4",tags:["facebook","hello","docusaurus"]},c={permalink:"/wave/blog/welcome",editUrl:"https://github.com/facebook/docusaurus/edit/master/website/blog/blog/2019-05-30-welcome.md",source:"@site/blog/2019-05-30-welcome.md",description:"Blog features are powered by the blog plugin. Simply add files to the blog directory. It supports tags as well!",date:"2019-05-30T00:00:00.000Z",tags:[{label:"facebook",permalink:"/wave/blog/tags/facebook"},{label:"hello",permalink:"/wave/blog/tags/hello"},{label:"docusaurus",permalink:"/wave/blog/tags/docusaurus"}],title:"Welcome",readingTime:.175,truncated:!1,nextItem:{title:"Hello",permalink:"/wave/blog/hello-world"}},u=[],i={rightToc:u};function p(e){var t=e.components,r=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},i,r,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Blog features are powered by the blog plugin. Simply add files to the ",Object(a.b)("inlineCode",{parentName:"p"},"blog")," directory. It supports tags as well!"),Object(a.b)("p",null,"Delete the whole directory if you don't want the blog features. As simple as that!"))}p.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/296a8b4f.a8ff9479.js b/docs/296a8b4f.a8ff9479.js
new file mode 100644
index 0000000000..749a87ab35
--- /dev/null
+++ b/docs/296a8b4f.a8ff9479.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[43],{292:function(e,t,a){"use strict";a.d(t,"a",(function(){return d})),a.d(t,"b",(function(){return O}));var c=a(0),n=a.n(c);function s(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function b(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 r(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?b(Object(a),!0).forEach((function(t){s(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):b(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function i(e,t){if(null==e)return{};var a,c,n=function(e,t){if(null==e)return{};var a,c,n={},s=Object.keys(e);for(c=0;c<s.length;c++)a=s[c],t.indexOf(a)>=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(c=0;c<s.length;c++)a=s[c],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var l=n.a.createContext({}),o=function(e){var t=n.a.useContext(l),a=t;return e&&(a="function"==typeof e?e(t):r(r({},t),e)),a},d=function(e){var t=o(e.components);return n.a.createElement(l.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 a=e.components,c=e.mdxType,s=e.originalType,b=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),d=o(a),p=c,O=d["".concat(b,".").concat(p)]||d[p]||u[p]||s;return a?n.a.createElement(O,r(r({ref:t},l),{},{components:a})):n.a.createElement(O,r({ref:t},l))}));function O(e,t){var a=arguments,c=t&&t.mdxType;if("string"==typeof e||c){var s=a.length,b=new Array(s);b[0]=p;var r={};for(var i in t)hasOwnProperty.call(t,i)&&(r[i]=t[i]);r.originalType=e,r.mdxType="string"==typeof e?e:c,b[1]=r;for(var l=2;l<s;l++)b[l]=a[l];return n.a.createElement.apply(null,b)}return n.a.createElement.apply(null,a)}p.displayName="MDXCreateElement"},96:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return b})),a.d(t,"metadata",(function(){return r})),a.d(t,"rightToc",(function(){return i})),a.d(t,"default",(function(){return o}));var c=a(2),n=a(6),s=(a(0),a(292)),b={title:"Module h2o_wave.server"},r={unversionedId:"api/server",id:"api/server",isDocsHomePage:!1,title:"Module h2o_wave.server",description:"Functions",source:"@site/docs/api/server.md",slug:"/api/server",permalink:"/wave/docs/api/server",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/api/server.md",version:"current",sidebar:"someSidebar",previous:{title:"Module h2o_wave.ui",permalink:"/wave/docs/api/ui"},next:{title:"Module h2o_wave.graphics",permalink:"/wave/docs/api/graphics"}},i=[{value:"Functions",id:"functions",children:[{value:'app <a name="h2o_wave.server.app"/>',id:"app",children:[]},{value:'listen <a name="h2o_wave.server.listen"/>',id:"listen",children:[]}]},{value:"Classes",id:"classes",children:[{value:'Auth <a name="h2o_wave.server.Auth"/>',id:"auth",children:[]},{value:'Query <a name="h2o_wave.server.Query"/>',id:"query",children:[]},{value:'Q <a name="h2o_wave.server.Query"/>',id:"q",children:[]}]}],l={rightToc:i};function o(e){var t=e.components,a=Object(n.a)(e,["components"]);return Object(s.b)("wrapper",Object(c.a)({},l,a,{components:t,mdxType:"MDXLayout"}),Object(s.b)("h2",{id:"functions"},"Functions"),Object(s.b)("div",{className:"api"},Object(s.b)("h3",{id:"app"},"app ",Object(s.b)("a",{name:"h2o_wave.server.app"})),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api__signature"},"def ",Object(s.b)("span",{class:"ident"},"app"),"(route:\xa0str, mode='unicast')"),Object(s.b)("div",{className:"api__description"}))),Object(s.b)("div",{className:"api"},Object(s.b)("h3",{id:"listen"},"listen ",Object(s.b)("a",{name:"h2o_wave.server.listen"})),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api__signature"},"def ",Object(s.b)("span",{class:"ident"},"listen"),"(route:\xa0str, handle:\xa0Callable[[",Object(s.b)("a",{title:"h2o_wave.server.Query",href:"#h2o_wave.server.Query"},"Query"),"],\xa0Awaitable[Any]], mode='unicast')"),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"Launch an application server."),Object(s.b)("h5",{id:"args"},"Args"),Object(s.b)("dl",null,Object(s.b)("dt",null,Object(s.b)("code",null,"route")),Object(s.b)("dd",null,"The route to listen to. e.g. ",Object(s.b)("code",null,"'/foo'")," or ",Object(s.b)("code",null,"'/foo/bar/baz'"),"."),Object(s.b)("dt",null,Object(s.b)("code",null,"handle")),Object(s.b)("dd",null,"The handler function."),Object(s.b)("dt",null,Object(s.b)("code",null,"mode")),Object(s.b)("dd",null,"The server mode. One of ",Object(s.b)("code",null,"'unicast'")," (default),",Object(s.b)("code",null,"'multicast'")," or ",Object(s.b)("code",null,"'broadcast'"),"."))))),Object(s.b)("h2",{id:"classes"},"Classes"),Object(s.b)("div",{className:"api"},Object(s.b)("h3",{id:"auth"},"Auth ",Object(s.b)("a",{name:"h2o_wave.server.Auth"})),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api__signature"},"class ",Object(s.b)("span",{class:"ident"},"Auth"),"(username:\xa0str, subject:\xa0str)"),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"Represents authentication information for a given query context. Carries valid information only if single sign on is enabled.")),Object(s.b)("h4",{id:"instance-variables"},"Instance variables"),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{id:"h2o_wave.server.Auth.subject",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"subject")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A unique identifier for the user.")),Object(s.b)("div",{id:"h2o_wave.server.Auth.username",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"username")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"The username of the user."))))),Object(s.b)("div",{className:"api"},Object(s.b)("h3",{id:"query"},"Query ",Object(s.b)("a",{name:"h2o_wave.server.Query"})),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api__signature"},"class ",Object(s.b)("span",{class:"ident"},"Query"),"(site:\xa0",Object(s.b)("a",{title:"h2o_wave.core.AsyncSite",href:"core#h2o_wave.core.AsyncSite"},"AsyncSite"),", mode:\xa0str, username:\xa0str, client_id:\xa0str, route:\xa0str, app_state:\xa0",Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"),", user_state:\xa0",Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"),", client_state:\xa0",Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"),", auth:\xa0",Object(s.b)("a",{title:"h2o_wave.server.Auth",href:"#h2o_wave.server.Auth"},"Auth"),", args:\xa0",Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"),")"),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"Represents the query context. The query context is passed to the ",Object(s.b)("code",null,"@app")," 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 arguments",Object(s.b)("code",null,"args")," (equivalent to URL query strings) and app-level, user-level and client-level state.")),Object(s.b)("h4",{id:"instance-variables-1"},"Instance variables"),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{id:"h2o_wave.server.Query.app",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"app")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A ",Object(s.b)("code",null,Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"))," instance to hold application-specific state.")),Object(s.b)("div",{id:"h2o_wave.server.Query.args",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"args")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A ",Object(s.b)("code",null,Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"))," instance containing the active request.")),Object(s.b)("div",{id:"h2o_wave.server.Query.auth",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"auth")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"The username and subject ID of the authenticated user.")),Object(s.b)("div",{id:"h2o_wave.server.Query.client",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"client")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"An ",Object(s.b)("code",null,Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"))," instance to hold client-specific state.")),Object(s.b)("div",{id:"h2o_wave.server.Query.mode",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"mode")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"The server mode. One of ",Object(s.b)("code",null,"'unicast'")," (default),",Object(s.b)("code",null,"'multicast'")," or ",Object(s.b)("code",null,"'broadcast'"),".")),Object(s.b)("div",{id:"h2o_wave.server.Query.page",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"page")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A reference to the current page.")),Object(s.b)("div",{id:"h2o_wave.server.Query.route",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"route")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"The route served by the server.")),Object(s.b)("div",{id:"h2o_wave.server.Query.site",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"site")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A reference to the current site.")),Object(s.b)("div",{id:"h2o_wave.server.Query.user",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"user")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A ",Object(s.b)("code",null,Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"))," instance to hold user-specific state.")),Object(s.b)("div",{id:"h2o_wave.server.Query.username",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"username")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"The username of the user who initiated the active request."))),Object(s.b)("h4",{id:"methods"},"Methods"),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api"},Object(s.b)("h4",{id:"exec"},"exec ",Object(s.b)("a",{name:"h2o_wave.server.Query.exec"})),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api__signature"},"async def ",Object(s.b)("span",{class:"ident"},"exec"),"(self, executor:\xa0Union[concurrent.futures._base.Executor,\xa0NoneType], func:\xa0Callable, *args:\xa0Any, **kwargs:\xa0Any) \u2011>\xa0Any"),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"Execute a function in the background using the specified executor."),Object(s.b)("p",null,"To execute a function in-process, use ",Object(s.b)("code",null,"q.run()"),"."),Object(s.b)("h5",{id:"args"},"Args"),Object(s.b)("dl",null,Object(s.b)("dt",null,Object(s.b)("code",null,"executor")),Object(s.b)("dd",null,"The executor to be used. If None, executes the function in-process."),Object(s.b)("dt",null,Object(s.b)("code",null,"func")),Object(s.b)("dd",null,"The function to to be called."),Object(s.b)("dt",null,Object(s.b)("code",null,"args")),Object(s.b)("dd",null,"Arguments to be passed to the function."),Object(s.b)("dt",null,Object(s.b)("code",null,"kwargs")),Object(s.b)("dd",null,"Keywords arguments to be passed to the function.")),Object(s.b)("h5",{id:"returns"},"Returns"),Object(s.b)("p",null,"The result of the function call.")))),Object(s.b)("div",{className:"api"},Object(s.b)("h4",{id:"run"},"run ",Object(s.b)("a",{name:"h2o_wave.server.Query.run"})),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api__signature"},"async def ",Object(s.b)("span",{class:"ident"},"run"),"(self, func:\xa0Callable, *args:\xa0Any, **kwargs:\xa0Any) \u2011>\xa0Any"),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"Execute a function in the background, in-process."),Object(s.b)("p",null,"Equivalent to calling ",Object(s.b)("code",null,"q.exec()")," without an executor."),Object(s.b)("h5",{id:"args"},"Args"),Object(s.b)("dl",null,Object(s.b)("dt",null,Object(s.b)("code",null,"func")),Object(s.b)("dd",null,"The function to to be called."),Object(s.b)("dt",null,Object(s.b)("code",null,"args")),Object(s.b)("dd",null,"Arguments to be passed to the function."),Object(s.b)("dt",null,Object(s.b)("code",null,"kwargs")),Object(s.b)("dd",null,"Keywords arguments to be passed to the function.")),Object(s.b)("h5",{id:"returns"},"Returns"),Object(s.b)("p",null,"The result of the function call.")))),Object(s.b)("div",{className:"api"},Object(s.b)("h4",{id:"sleep"},"sleep ",Object(s.b)("a",{name:"h2o_wave.server.Query.sleep"})),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api__signature"},"async def ",Object(s.b)("span",{class:"ident"},"sleep"),"(self, delay:\xa0float, result=None) \u2011>\xa0Any"),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"Suspend execution for the specified number of seconds. Always use ",Object(s.b)("code",null,"q.sleep()")," instead of ",Object(s.b)("code",null,"time.sleep()")," in Wave apps."),Object(s.b)("h5",{id:"args"},"Args"),Object(s.b)("dl",null,Object(s.b)("dt",null,Object(s.b)("code",null,"delay")),Object(s.b)("dd",null,"Number of seconds to sleep."),Object(s.b)("dt",null,Object(s.b)("code",null,"result")),Object(s.b)("dd",null,"Result to return after delay, if any.")),Object(s.b)("h5",{id:"returns"},"Returns"),Object(s.b)("p",null,"The ",Object(s.b)("code",null,"result")," argument, if any, as is."))))))),Object(s.b)("div",{className:"api"},Object(s.b)("h3",{id:"q"},"Q ",Object(s.b)("a",{name:"h2o_wave.server.Query"})),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api__signature"},"class ",Object(s.b)("span",{class:"ident"},"Q"),"(site:\xa0",Object(s.b)("a",{title:"h2o_wave.core.AsyncSite",href:"core#h2o_wave.core.AsyncSite"},"AsyncSite"),", mode:\xa0str, username:\xa0str, client_id:\xa0str, route:\xa0str, app_state:\xa0",Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"),", user_state:\xa0",Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"),", client_state:\xa0",Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"),", auth:\xa0",Object(s.b)("a",{title:"h2o_wave.server.Auth",href:"#h2o_wave.server.Auth"},"Auth"),", args:\xa0",Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"),")"),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"Represents the query context. The query context is passed to the ",Object(s.b)("code",null,"@app")," 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 arguments",Object(s.b)("code",null,"args")," (equivalent to URL query strings) and app-level, user-level and client-level state.")),Object(s.b)("h4",{id:"instance-variables-2"},"Instance variables"),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{id:"h2o_wave.server.Query.app",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"app")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A ",Object(s.b)("code",null,Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"))," instance to hold application-specific state.")),Object(s.b)("div",{id:"h2o_wave.server.Query.args",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"args")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A ",Object(s.b)("code",null,Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"))," instance containing the active request.")),Object(s.b)("div",{id:"h2o_wave.server.Query.auth",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"auth")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"The username and subject ID of the authenticated user.")),Object(s.b)("div",{id:"h2o_wave.server.Query.client",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"client")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"An ",Object(s.b)("code",null,Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"))," instance to hold client-specific state.")),Object(s.b)("div",{id:"h2o_wave.server.Query.mode",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"mode")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"The server mode. One of ",Object(s.b)("code",null,"'unicast'")," (default),",Object(s.b)("code",null,"'multicast'")," or ",Object(s.b)("code",null,"'broadcast'"),".")),Object(s.b)("div",{id:"h2o_wave.server.Query.page",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"page")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A reference to the current page.")),Object(s.b)("div",{id:"h2o_wave.server.Query.route",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"route")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"The route served by the server.")),Object(s.b)("div",{id:"h2o_wave.server.Query.site",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"site")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A reference to the current site.")),Object(s.b)("div",{id:"h2o_wave.server.Query.user",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"user")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A ",Object(s.b)("code",null,Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"))," instance to hold user-specific state.")),Object(s.b)("div",{id:"h2o_wave.server.Query.username",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"username")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"The username of the user who initiated the active request."))),Object(s.b)("h4",{id:"methods-1"},"Methods"),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api"},Object(s.b)("h4",{id:"exec-1"},"exec ",Object(s.b)("a",{name:"h2o_wave.server.Query.exec"})),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api__signature"},"async def ",Object(s.b)("span",{class:"ident"},"exec"),"(self, executor:\xa0Union[concurrent.futures._base.Executor,\xa0NoneType], func:\xa0Callable, *args:\xa0Any, **kwargs:\xa0Any) \u2011>\xa0Any"),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"Execute a function in the background using the specified executor."),Object(s.b)("p",null,"To execute a function in-process, use ",Object(s.b)("code",null,"q.run()"),"."),Object(s.b)("h5",{id:"args"},"Args"),Object(s.b)("dl",null,Object(s.b)("dt",null,Object(s.b)("code",null,"executor")),Object(s.b)("dd",null,"The executor to be used. If None, executes the function in-process."),Object(s.b)("dt",null,Object(s.b)("code",null,"func")),Object(s.b)("dd",null,"The function to to be called."),Object(s.b)("dt",null,Object(s.b)("code",null,"args")),Object(s.b)("dd",null,"Arguments to be passed to the function."),Object(s.b)("dt",null,Object(s.b)("code",null,"kwargs")),Object(s.b)("dd",null,"Keywords arguments to be passed to the function.")),Object(s.b)("h5",{id:"returns"},"Returns"),Object(s.b)("p",null,"The result of the function call.")))),Object(s.b)("div",{className:"api"},Object(s.b)("h4",{id:"run-1"},"run ",Object(s.b)("a",{name:"h2o_wave.server.Query.run"})),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api__signature"},"async def ",Object(s.b)("span",{class:"ident"},"run"),"(self, func:\xa0Callable, *args:\xa0Any, **kwargs:\xa0Any) \u2011>\xa0Any"),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"Execute a function in the background, in-process."),Object(s.b)("p",null,"Equivalent to calling ",Object(s.b)("code",null,"q.exec()")," without an executor."),Object(s.b)("h5",{id:"args"},"Args"),Object(s.b)("dl",null,Object(s.b)("dt",null,Object(s.b)("code",null,"func")),Object(s.b)("dd",null,"The function to to be called."),Object(s.b)("dt",null,Object(s.b)("code",null,"args")),Object(s.b)("dd",null,"Arguments to be passed to the function."),Object(s.b)("dt",null,Object(s.b)("code",null,"kwargs")),Object(s.b)("dd",null,"Keywords arguments to be passed to the function.")),Object(s.b)("h5",{id:"returns"},"Returns"),Object(s.b)("p",null,"The result of the function call.")))),Object(s.b)("div",{className:"api"},Object(s.b)("h4",{id:"sleep-1"},"sleep ",Object(s.b)("a",{name:"h2o_wave.server.Query.sleep"})),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api__signature"},"async def ",Object(s.b)("span",{class:"ident"},"sleep"),"(self, delay:\xa0float, result=None) \u2011>\xa0Any"),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"Suspend execution for the specified number of seconds. Always use ",Object(s.b)("code",null,"q.sleep()")," instead of ",Object(s.b)("code",null,"time.sleep()")," in Wave apps."),Object(s.b)("h5",{id:"args"},"Args"),Object(s.b)("dl",null,Object(s.b)("dt",null,Object(s.b)("code",null,"delay")),Object(s.b)("dd",null,"Number of seconds to sleep."),Object(s.b)("dt",null,Object(s.b)("code",null,"result")),Object(s.b)("dd",null,"Result to return after delay, if any.")),Object(s.b)("h5",{id:"returns"},"Returns"),Object(s.b)("p",null,"The ",Object(s.b)("code",null,"result")," argument, if any, as is."))))))))}o.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/296a8b4f.aaf763e4.js b/docs/296a8b4f.aaf763e4.js
deleted file mode 100644
index cbfbe15f57..0000000000
--- a/docs/296a8b4f.aaf763e4.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{290:function(e,a,t){"use strict";t.d(a,"a",(function(){return d})),t.d(a,"b",(function(){return v}));var c=t(0),r=t.n(c);function s(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function i(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);a&&(c=c.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),t.push.apply(t,c)}return t}function n(e){for(var a=1;a<arguments.length;a++){var t=null!=arguments[a]?arguments[a]:{};a%2?i(Object(t),!0).forEach((function(a){s(e,a,t[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(t,a))}))}return e}function b(e,a){if(null==e)return{};var t,c,r=function(e,a){if(null==e)return{};var t,c,r={},s=Object.keys(e);for(c=0;c<s.length;c++)t=s[c],a.indexOf(t)>=0||(r[t]=e[t]);return r}(e,a);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(c=0;c<s.length;c++)t=s[c],a.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var o=r.a.createContext({}),l=function(e){var a=r.a.useContext(o),t=a;return e&&(t="function"==typeof e?e(a):n(n({},a),e)),t},d=function(e){var a=l(e.components);return r.a.createElement(o.Provider,{value:a},e.children)},u={inlineCode:"code",wrapper:function(e){var a=e.children;return r.a.createElement(r.a.Fragment,{},a)}},p=r.a.forwardRef((function(e,a){var t=e.components,c=e.mdxType,s=e.originalType,i=e.parentName,o=b(e,["components","mdxType","originalType","parentName"]),d=l(t),p=c,v=d["".concat(i,".").concat(p)]||d[p]||u[p]||s;return t?r.a.createElement(v,n(n({ref:a},o),{},{components:t})):r.a.createElement(v,n({ref:a},o))}));function v(e,a){var t=arguments,c=a&&a.mdxType;if("string"==typeof e||c){var s=t.length,i=new Array(s);i[0]=p;var n={};for(var b in a)hasOwnProperty.call(a,b)&&(n[b]=a[b]);n.originalType=e,n.mdxType="string"==typeof e?e:c,i[1]=n;for(var o=2;o<s;o++)i[o]=t[o];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,t)}p.displayName="MDXCreateElement"},94:function(e,a,t){"use strict";t.r(a),t.d(a,"frontMatter",(function(){return i})),t.d(a,"metadata",(function(){return n})),t.d(a,"rightToc",(function(){return b})),t.d(a,"default",(function(){return l}));var c=t(2),r=t(6),s=(t(0),t(290)),i={title:"Module h2o_wave.server"},n={unversionedId:"api/server",id:"api/server",isDocsHomePage:!1,title:"Module h2o_wave.server",description:"Functions",source:"@site/docs/api/server.md",slug:"/api/server",permalink:"/wave/docs/api/server",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/api/server.md",version:"current",sidebar:"someSidebar",previous:{title:"Module h2o_wave.ui",permalink:"/wave/docs/api/ui"},next:{title:"Module h2o_wave.graphics",permalink:"/wave/docs/api/graphics"}},b=[{value:"Functions",id:"functions",children:[{value:'listen <a name="h2o_wave.server.listen"/>',id:"listen",children:[]}]},{value:"Classes",id:"classes",children:[{value:'Auth <a name="h2o_wave.server.Auth"/>',id:"auth",children:[]},{value:'Query <a name="h2o_wave.server.Query"/>',id:"query",children:[]},{value:'Q <a name="h2o_wave.server.Query"/>',id:"q",children:[]}]}],o={rightToc:b};function l(e){var a=e.components,t=Object(r.a)(e,["components"]);return Object(s.b)("wrapper",Object(c.a)({},o,t,{components:a,mdxType:"MDXLayout"}),Object(s.b)("h2",{id:"functions"},"Functions"),Object(s.b)("div",{className:"api"},Object(s.b)("h3",{id:"listen"},"listen ",Object(s.b)("a",{name:"h2o_wave.server.listen"})),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api__signature"},"def ",Object(s.b)("span",{class:"ident"},"listen"),"(route:\xa0str, handle:\xa0Callable[[",Object(s.b)("a",{title:"h2o_wave.server.Query",href:"#h2o_wave.server.Query"},"Query"),"],\xa0Awaitable[Any]], mode='unicast')"),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"Launch an application server."),Object(s.b)("h5",{id:"args"},"Args"),Object(s.b)("dl",null,Object(s.b)("dt",null,Object(s.b)("code",null,"route")),Object(s.b)("dd",null,"The route to listen to. e.g. ",Object(s.b)("code",null,"'/foo'")," or ",Object(s.b)("code",null,"'/foo/bar/baz'"),"."),Object(s.b)("dt",null,Object(s.b)("code",null,"handle")),Object(s.b)("dd",null,"The handler function."),Object(s.b)("dt",null,Object(s.b)("code",null,"mode")),Object(s.b)("dd",null,"The server mode. One of ",Object(s.b)("code",null,"'unicast'")," (default),",Object(s.b)("code",null,"'multicast'")," or ",Object(s.b)("code",null,"'broadcast'"),"."))))),Object(s.b)("h2",{id:"classes"},"Classes"),Object(s.b)("div",{className:"api"},Object(s.b)("h3",{id:"auth"},"Auth ",Object(s.b)("a",{name:"h2o_wave.server.Auth"})),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api__signature"},"class ",Object(s.b)("span",{class:"ident"},"Auth"),"(username:\xa0str, subject:\xa0str)"),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"Represents authentication information for a given query context. Carries valid information only if single sign on is enabled.")),Object(s.b)("h4",{id:"instance-variables"},"Instance variables"),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{id:"h2o_wave.server.Auth.subject",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"subject")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A unique identifier for the user.")),Object(s.b)("div",{id:"h2o_wave.server.Auth.username",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"username")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"The username of the user."))))),Object(s.b)("div",{className:"api"},Object(s.b)("h3",{id:"query"},"Query ",Object(s.b)("a",{name:"h2o_wave.server.Query"})),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api__signature"},"class ",Object(s.b)("span",{class:"ident"},"Query"),"(site:\xa0",Object(s.b)("a",{title:"h2o_wave.core.AsyncSite",href:"core#h2o_wave.core.AsyncSite"},"AsyncSite"),", mode:\xa0str, username:\xa0str, client_id:\xa0str, route:\xa0str, app_state:\xa0",Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"),", user_state:\xa0",Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"),", client_state:\xa0",Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"),", auth:\xa0",Object(s.b)("a",{title:"h2o_wave.server.Auth",href:"#h2o_wave.server.Auth"},"Auth"),", args:\xa0",Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"),")"),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"Represents the query context. The query context is passed to the ",Object(s.b)("code",null,Object(s.b)("a",{title:"h2o_wave.server.listen",href:"#h2o_wave.server.listen"},"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 arguments",Object(s.b)("code",null,"args")," (equivalent to URL query strings) and app-level, user-level and client-level state.")),Object(s.b)("h4",{id:"instance-variables-1"},"Instance variables"),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{id:"h2o_wave.server.Query.app",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"app")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A ",Object(s.b)("code",null,Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"))," instance to hold application-specific state.")),Object(s.b)("div",{id:"h2o_wave.server.Query.args",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"args")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A ",Object(s.b)("code",null,Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"))," instance containing the active request.")),Object(s.b)("div",{id:"h2o_wave.server.Query.auth",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"auth")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"The username and subject ID of the authenticated user.")),Object(s.b)("div",{id:"h2o_wave.server.Query.client",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"client")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"An ",Object(s.b)("code",null,Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"))," instance to hold client-specific state.")),Object(s.b)("div",{id:"h2o_wave.server.Query.mode",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"mode")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"The server mode. One of ",Object(s.b)("code",null,"'unicast'")," (default),",Object(s.b)("code",null,"'multicast'")," or ",Object(s.b)("code",null,"'broadcast'"),".")),Object(s.b)("div",{id:"h2o_wave.server.Query.page",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"page")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A reference to the current page.")),Object(s.b)("div",{id:"h2o_wave.server.Query.route",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"route")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"The route served by the server.")),Object(s.b)("div",{id:"h2o_wave.server.Query.site",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"site")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A reference to the current site.")),Object(s.b)("div",{id:"h2o_wave.server.Query.user",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"user")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A ",Object(s.b)("code",null,Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"))," instance to hold user-specific state.")),Object(s.b)("div",{id:"h2o_wave.server.Query.username",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"username")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"The username of the user who initiated the active request."))),Object(s.b)("h4",{id:"methods"},"Methods"),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api"},Object(s.b)("h4",{id:"sleep"},"sleep ",Object(s.b)("a",{name:"h2o_wave.server.Query.sleep"})),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api__signature"},"async def ",Object(s.b)("span",{class:"ident"},"sleep"),"(self, delay)"),Object(s.b)("div",{className:"api__description"})))))),Object(s.b)("div",{className:"api"},Object(s.b)("h3",{id:"q"},"Q ",Object(s.b)("a",{name:"h2o_wave.server.Query"})),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api__signature"},"class ",Object(s.b)("span",{class:"ident"},"Q"),"(site:\xa0",Object(s.b)("a",{title:"h2o_wave.core.AsyncSite",href:"core#h2o_wave.core.AsyncSite"},"AsyncSite"),", mode:\xa0str, username:\xa0str, client_id:\xa0str, route:\xa0str, app_state:\xa0",Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"),", user_state:\xa0",Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"),", client_state:\xa0",Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"),", auth:\xa0",Object(s.b)("a",{title:"h2o_wave.server.Auth",href:"#h2o_wave.server.Auth"},"Auth"),", args:\xa0",Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"),")"),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"Represents the query context. The query context is passed to the ",Object(s.b)("code",null,Object(s.b)("a",{title:"h2o_wave.server.listen",href:"#h2o_wave.server.listen"},"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 arguments",Object(s.b)("code",null,"args")," (equivalent to URL query strings) and app-level, user-level and client-level state.")),Object(s.b)("h4",{id:"instance-variables-2"},"Instance variables"),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{id:"h2o_wave.server.Query.app",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"app")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A ",Object(s.b)("code",null,Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"))," instance to hold application-specific state.")),Object(s.b)("div",{id:"h2o_wave.server.Query.args",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"args")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A ",Object(s.b)("code",null,Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"))," instance containing the active request.")),Object(s.b)("div",{id:"h2o_wave.server.Query.auth",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"auth")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"The username and subject ID of the authenticated user.")),Object(s.b)("div",{id:"h2o_wave.server.Query.client",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"client")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"An ",Object(s.b)("code",null,Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"))," instance to hold client-specific state.")),Object(s.b)("div",{id:"h2o_wave.server.Query.mode",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"mode")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"The server mode. One of ",Object(s.b)("code",null,"'unicast'")," (default),",Object(s.b)("code",null,"'multicast'")," or ",Object(s.b)("code",null,"'broadcast'"),".")),Object(s.b)("div",{id:"h2o_wave.server.Query.page",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"page")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A reference to the current page.")),Object(s.b)("div",{id:"h2o_wave.server.Query.route",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"route")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"The route served by the server.")),Object(s.b)("div",{id:"h2o_wave.server.Query.site",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"site")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A reference to the current site.")),Object(s.b)("div",{id:"h2o_wave.server.Query.user",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"user")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"A ",Object(s.b)("code",null,Object(s.b)("a",{title:"h2o_wave.core.Expando",href:"core#h2o_wave.core.Expando"},"Expando"))," instance to hold user-specific state.")),Object(s.b)("div",{id:"h2o_wave.server.Query.username",className:"api__signature"},"var ",Object(s.b)("span",{class:"ident"},"username")),Object(s.b)("div",{className:"api__description"},Object(s.b)("p",null,"The username of the user who initiated the active request."))),Object(s.b)("h4",{id:"methods-1"},"Methods"),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api"},Object(s.b)("h4",{id:"sleep-1"},"sleep ",Object(s.b)("a",{name:"h2o_wave.server.Query.sleep"})),Object(s.b)("div",{className:"api__body"},Object(s.b)("div",{className:"api__signature"},"async def ",Object(s.b)("span",{class:"ident"},"sleep"),"(self, delay)"),Object(s.b)("div",{className:"api__description"})))))))}l.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/2bf08973.2bfcd3dd.js b/docs/2bf08973.fc6ef6b5.js
similarity index 92%
rename from docs/2bf08973.2bfcd3dd.js
rename to docs/2bf08973.fc6ef6b5.js
index 74e4b0d8c4..8929925276 100644
--- a/docs/2bf08973.2bfcd3dd.js
+++ b/docs/2bf08973.fc6ef6b5.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{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),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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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},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,o=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),m=s(n),d=r,f=m["".concat(c,".").concat(d)]||m[d]||u[d]||o;return n?a.a.createElement(f,i(i({ref:t},l),{},{components:n})):a.a.createElement(f,i({ref:t},l))}));function f(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 p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var l=2;l<o;l++)c[l]=n[l];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},328:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/template-1b5f5707f248dfd5a606e722345ad2a2.png"},95:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),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(290)),c={title:"Template"},i={unversionedId:"examples/template",id:"examples/template",isDocsHomePage:!1,title:"Template",description:"Use a template card to render dynamic content using a HTML template.",source:"@site/docs/examples/template.md",slug:"/examples/template",permalink:"/wave/docs/examples/template",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/template.md",version:"current",sidebar:"someSidebar",previous:{title:"Frame / Path",permalink:"/wave/docs/examples/frame-path"},next:{title:"Template / Data",permalink:"/wave/docs/examples/template-data"}},p=[],l={rightToc:p};function s(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},l,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use a template card to render dynamic content using a HTML template."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(328).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, pack, ui\n\npage = site['/demo']\npage.drop()\n\nmenu = '''\n<ol>\n{{#each dishes}}\n<li><strong>{{name}}</strong> costs {{price}}</li>\n{{/each}}\n</ol\n'''\n\nc = page.add('template_example', ui.template_card(\n    box=f'1 1 2 2',\n    title='Menu',\n    content=menu,\n    data=pack(dict(dishes=[\n        dict(name='Spam', price='$2.00'),\n        dict(name='Ham', price='$3.45'),\n        dict(name='Eggs', price='$1.75'),\n    ])),\n))\npage.save()\n")))}s.isMDXComponent=!0}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[44],{292:function(e,t,n){"use strict";n.d(t,"a",(function(){return m})),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 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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},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,o=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),m=s(n),d=r,f=m["".concat(c,".").concat(d)]||m[d]||u[d]||o;return n?a.a.createElement(f,i(i({ref:t},l),{},{components:n})):a.a.createElement(f,i({ref:t},l))}));function f(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 p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var l=2;l<o;l++)c[l]=n[l];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},330:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/template-1b5f5707f248dfd5a606e722345ad2a2.png"},97:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),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(292)),c={title:"Template"},i={unversionedId:"examples/template",id:"examples/template",isDocsHomePage:!1,title:"Template",description:"Use a template card to render dynamic content using a HTML template.",source:"@site/docs/examples/template.md",slug:"/examples/template",permalink:"/wave/docs/examples/template",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/template.md",version:"current",sidebar:"someSidebar",previous:{title:"Frame / Path",permalink:"/wave/docs/examples/frame-path"},next:{title:"Template / Data",permalink:"/wave/docs/examples/template-data"}},p=[],l={rightToc:p};function s(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},l,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use a template card to render dynamic content using a HTML template."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(330).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, pack, ui\n\npage = site['/demo']\npage.drop()\n\nmenu = '''\n<ol>\n{{#each dishes}}\n<li><strong>{{name}}</strong> costs {{price}}</li>\n{{/each}}\n</ol\n'''\n\nc = page.add('template_example', ui.template_card(\n    box=f'1 1 2 2',\n    title='Menu',\n    content=menu,\n    data=pack(dict(dishes=[\n        dict(name='Spam', price='$2.00'),\n        dict(name='Ham', price='$3.45'),\n        dict(name='Eggs', price='$1.75'),\n    ])),\n))\npage.save()\n")))}s.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/2db704cb.4a75d8de.js b/docs/2db704cb.20816776.js
similarity index 92%
rename from docs/2db704cb.4a75d8de.js
rename to docs/2db704cb.20816776.js
index f178d06d58..be1a85d787 100644
--- a/docs/2db704cb.4a75d8de.js
+++ b/docs/2db704cb.20816776.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[43],{290: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 l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function i(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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):l(l({},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=i(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,l(l({ref:t},p),{},{components:r})):a.a.createElement(m,l({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 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<o;p++)c[p]=r[p];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},329:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-interval-polar-stacked-dbb95e41cc47e31cb7614c6c9f3bf387.png"},96:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return c})),r.d(t,"metadata",(function(){return l})),r.d(t,"rightToc",(function(){return i})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(290)),c={title:"Plot / Interval / Polar / Stacked"},l={unversionedId:"examples/plot-interval-polar-stacked",id:"examples/plot-interval-polar-stacked",isDocsHomePage:!1,title:"Plot / Interval / Polar / Stacked",description:"Make a stacked rose plot (a stacked bar plot in polar coordinates).",source:"@site/docs/examples/plot-interval-polar-stacked.md",slug:"/examples/plot-interval-polar-stacked",permalink:"/wave/docs/examples/plot-interval-polar-stacked",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-polar-stacked.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Polar",permalink:"/wave/docs/examples/plot-interval-polar"},next:{title:"Plot / Interval / Theta",permalink:"/wave/docs/examples/plot-interval-theta"}},i=[],p={rightToc:i};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 rose plot (a stacked bar plot in polar coordinates)."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(329).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, polar, stacked',\n    data=data('country product price', n * k),\n    plot=ui.plot([\n        ui.mark(coord='polar', type='interval', x='=product', y='=price', 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}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{292: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 l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function i(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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):l(l({},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=i(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,l(l({ref:t},p),{},{components:r})):a.a.createElement(m,l({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 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<o;p++)c[p]=r[p];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},331:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-interval-polar-stacked-dbb95e41cc47e31cb7614c6c9f3bf387.png"},98:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return c})),r.d(t,"metadata",(function(){return l})),r.d(t,"rightToc",(function(){return i})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(292)),c={title:"Plot / Interval / Polar / Stacked"},l={unversionedId:"examples/plot-interval-polar-stacked",id:"examples/plot-interval-polar-stacked",isDocsHomePage:!1,title:"Plot / Interval / Polar / Stacked",description:"Make a stacked rose plot (a stacked bar plot in polar coordinates).",source:"@site/docs/examples/plot-interval-polar-stacked.md",slug:"/examples/plot-interval-polar-stacked",permalink:"/wave/docs/examples/plot-interval-polar-stacked",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-polar-stacked.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Polar",permalink:"/wave/docs/examples/plot-interval-polar"},next:{title:"Plot / Interval / Theta",permalink:"/wave/docs/examples/plot-interval-theta"}},i=[],p={rightToc:i};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 rose plot (a stacked bar plot in polar coordinates)."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(331).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, polar, stacked',\n    data=data('country product price', n * k),\n    plot=ui.plot([\n        ui.mark(coord='polar', type='interval', x='=product', y='=price', 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}}]);
\ No newline at end of file
diff --git a/docs/2dd92585.1591767e.js b/docs/2dd92585.1591767e.js
new file mode 100644
index 0000000000..2250bcf5c1
--- /dev/null
+++ b/docs/2dd92585.1591767e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[46],{99:function(e){e.exports=JSON.parse('{"allTagsPath":"/wave/blog/tags","slug":"release","name":"release","count":1,"permalink":"/wave/blog/tags/release"}')}}]);
\ No newline at end of file
diff --git a/docs/2e8e6962.0ed74d46.js b/docs/2e8e6962.0ed74d46.js
new file mode 100644
index 0000000000..3785bb1cd8
--- /dev/null
+++ b/docs/2e8e6962.0ed74d46.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{100:function(e,n,r){"use strict";r.r(n),r.d(n,"frontMatter",(function(){return c})),r.d(n,"metadata",(function(){return i})),r.d(n,"rightToc",(function(){return s})),r.d(n,"default",(function(){return p}));var t=r(2),o=r(6),a=(r(0),r(292)),c={title:"Background Tasks / Executor"},i={unversionedId:"examples/background-executor",id:"examples/background-executor",isDocsHomePage:!1,title:"Background Tasks / Executor",description:"Use q.exec() to execute background functions using a thread-pool or process-pool.",source:"@site/docs/examples/background-executor.md",slug:"/examples/background-executor",permalink:"/wave/docs/examples/background-executor",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/background-executor.md",version:"current",sidebar:"someSidebar",previous:{title:"Background Tasks",permalink:"/wave/docs/examples/background"},next:{title:"Site / Async",permalink:"/wave/docs/examples/site-async"}},s=[],u={rightToc:s};function p(e){var n=e.components,c=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(t.a)({},u,c,{components:n,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use q.exec() to execute background functions using a thread-pool or process-pool."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(332).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"import time\nimport random\nimport concurrent.futures\nfrom h2o_wave import main, app, Q, ui\n\n\ndef blocking_function(secs) -> str:\n    time.sleep(secs)  # Blocks!\n    return f'Done waiting for {secs} seconds!'\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.start:\n        q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[ui.progress('Running...')])\n        await q.page.save()\n\n        seconds = random.randint(1, 6)\n\n        # DON'T DO THIS!\n        # This will make your app unresponsive for some time:\n        # message = blocking_function(seconds)\n\n        # Do this instead:\n        with concurrent.futures.ThreadPoolExecutor() as pool:\n            message = await q.exec(pool, blocking_function, seconds)\n\n        # You can also pass a ProcessPoolExecutor, like this:\n        # with concurrent.futures.ProcessPoolExecutor() as pool:\n        #    message = await q.exec(pool, blocking_function, seconds)\n\n        q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[ui.message_bar('info', message)])\n        await q.page.save()\n    else:\n        q.args.start = True\n        q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[ui.button(name='start', label='Start')])\n        await q.page.save()\n")))}p.isMDXComponent=!0},292:function(e,n,r){"use strict";r.d(n,"a",(function(){return l})),r.d(n,"b",(function(){return m}));var t=r(0),o=r.n(t);function a(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function c(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 i(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?c(Object(r),!0).forEach((function(n){a(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function s(e,n){if(null==e)return{};var r,t,o=function(e,n){if(null==e)return{};var r,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||(o[r]=e[r]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var u=o.a.createContext({}),p=function(e){var n=o.a.useContext(u),r=n;return e&&(r="function"==typeof e?e(n):i(i({},n),e)),r},l=function(e){var n=p(e.components);return o.a.createElement(u.Provider,{value:n},e.children)},d={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},f=o.a.forwardRef((function(e,n){var r=e.components,t=e.mdxType,a=e.originalType,c=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),l=p(r),f=t,m=l["".concat(c,".").concat(f)]||l[f]||d[f]||a;return r?o.a.createElement(m,i(i({ref:n},u),{},{components:r})):o.a.createElement(m,i({ref:n},u))}));function m(e,n){var r=arguments,t=n&&n.mdxType;if("string"==typeof e||t){var a=r.length,c=new Array(a);c[0]=f;var i={};for(var s in n)hasOwnProperty.call(n,s)&&(i[s]=n[s]);i.originalType=e,i.mdxType="string"==typeof e?e:t,c[1]=i;for(var u=2;u<a;u++)c[u]=r[u];return o.a.createElement.apply(null,c)}return o.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},332:function(e,n,r){"use strict";r.r(n),n.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/2fa9e1ff.04d2dc0e.js b/docs/2fa9e1ff.04d2dc0e.js
new file mode 100644
index 0000000000..d91f080e69
--- /dev/null
+++ b/docs/2fa9e1ff.04d2dc0e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[48],{101:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return p})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(292)),p={title:"Plot / Path"},i={unversionedId:"examples/plot-path",id:"examples/plot-path",isDocsHomePage:!1,title:"Plot / Path",description:"Make a path plot.",source:"@site/docs/examples/plot-path.md",slug:"/examples/plot-path",permalink:"/wave/docs/examples/plot-path",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-path.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Line / Annotation",permalink:"/wave/docs/examples/plot-line-annotation"},next:{title:"Plot / Path / Point",permalink:"/wave/docs/examples/plot-path-point"}},c=[],l={rightToc:c};function s(e){var t=e.components,p=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},l,p,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a path plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(333).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeScatter\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 50\nf = FakeScatter()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Path',\n    data=data('profit sales', n),\n    plot=ui.plot([ui.mark(type='path', x='=profit', y='=sales')])\n))\nv.data = [(x, y) for x, y in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return d}));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 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 i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;l++)p[l]=n[l];return a.a.createElement.apply(null,p)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},333:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-path-2737001d0f8727c8d62799faf298a88e.png"}}]);
\ No newline at end of file
diff --git a/docs/2fa9e1ff.5cb4a6a3.js b/docs/2fa9e1ff.5cb4a6a3.js
deleted file mode 100644
index fb016b2f7a..0000000000
--- a/docs/2fa9e1ff.5cb4a6a3.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[44],{290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return d}));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 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 i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;l++)p[l]=n[l];return a.a.createElement.apply(null,p)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},330:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-path-2737001d0f8727c8d62799faf298a88e.png"},97:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return p})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(290)),p={title:"Plot / Path"},i={unversionedId:"examples/plot-path",id:"examples/plot-path",isDocsHomePage:!1,title:"Plot / Path",description:"Make a path plot.",source:"@site/docs/examples/plot-path.md",slug:"/examples/plot-path",permalink:"/wave/docs/examples/plot-path",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-path.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Line / Annotation",permalink:"/wave/docs/examples/plot-line-annotation"},next:{title:"Plot / Path / Point",permalink:"/wave/docs/examples/plot-path-point"}},c=[],l={rightToc:c};function s(e){var t=e.components,p=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},l,p,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a path plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(330).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeScatter\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 50\nf = FakeScatter()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Path',\n    data=data('profit sales', n),\n    plot=ui.plot([ui.mark(type='path', x='=profit', y='=sales')])\n))\nv.data = [(x, y) for x, y in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/3.2819f6b8.js b/docs/3.c0e07a77.js
similarity index 95%
rename from docs/3.2819f6b8.js
rename to docs/3.c0e07a77.js
index 2e4b2c0239..87d5a270ec 100644
--- a/docs/3.2819f6b8.js
+++ b/docs/3.c0e07a77.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{290:function(e,t,a){"use strict";a.d(t,"a",(function(){return u})),a.d(t,"b",(function(){return g}));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 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<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?l(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):l(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function s(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var i=r.a.createContext({}),p=function(e){var t=r.a.useContext(i),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},u=function(e){var t=p(e.components);return r.a.createElement(i.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},y=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,l=e.parentName,i=s(e,["components","mdxType","originalType","parentName"]),u=p(a),y=n,g=u["".concat(l,".").concat(y)]||u[y]||m[y]||o;return a?r.a.createElement(g,c(c({ref:t},i),{},{components:a})):r.a.createElement(g,c({ref:t},i))}));function g(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,l=new Array(o);l[0]=y;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,l[1]=c;for(var i=2;i<o;i++)l[i]=a[i];return r.a.createElement.apply(null,l)}return r.a.createElement.apply(null,a)}y.displayName="MDXCreateElement"},319:function(e,t,a){"use strict";const n=(e,{target:t=document.body}={})=>{const a=document.createElement("textarea"),n=document.activeElement;a.value=e,a.setAttribute("readonly",""),a.style.contain="strict",a.style.position="absolute",a.style.left="-9999px",a.style.fontSize="12pt";const r=document.getSelection();let o=!1;r.rangeCount>0&&(o=r.getRangeAt(0)),t.append(a),a.select(),a.selectionStart=0,a.selectionEnd=e.length;let l=!1;try{l=document.execCommand("copy")}catch(c){}return a.remove(),o&&(r.removeAllRanges(),r.addRange(o)),n&&n.focus(),l};e.exports=n,e.exports.default=n},320:function(e,t){e.exports.parse=function(e){var t=e.split(",").map((function(e){return function(e){if(/^-?\d+$/.test(e))return parseInt(e,10);var t;if(t=e.match(/^(-?\d+)(-|\.\.\.?|\u2025|\u2026|\u22EF)(-?\d+)$/)){var a=t[1],n=t[2],r=t[3];if(a&&r){var o=[],l=(a=parseInt(a))<(r=parseInt(r))?1:-1;"-"!=n&&".."!=n&&"\u2025"!=n||(r+=l);for(var c=a;c!=r;c+=l)o.push(c);return o}}return[]}(e)}));return 0===t.length?[]:1===t.length?Array.isArray(t[0])?t[0]:t:t.reduce((function(e,t){return Array.isArray(e)||(e=[e]),Array.isArray(t)||(t=[t]),e.concat(t)}))}},364:function(e,t,a){"use strict";var n=a(0),r=a.n(n),o=a(292),l=a(290),c=a(296),s=a(293),i=a(465),p=a(294),u=a(154),m=a.n(u);const y=["January","February","March","April","May","June","July","August","September","October","November","December"];t.a=function(e){const{children:t,frontMatter:a,metadata:n,truncated:u,isBlogPostPage:g=!1}=e,{date:d,permalink:h,tags:f,readingTime:b}=n,{author:v,title:k,image:E,keywords:j}=a,O=a.author_url||a.authorURL,N=a.author_title||a.authorTitle,x=a.author_image_url||a.authorImageURL,w=Object(p.a)(E,{absolute:!0});return r.a.createElement(r.a.Fragment,null,r.a.createElement(c.a,null,j&&j.length&&r.a.createElement("meta",{name:"keywords",content:j.join(",")}),E&&r.a.createElement("meta",{property:"og:image",content:w}),E&&r.a.createElement("meta",{property:"twitter:image",content:w}),E&&r.a.createElement("meta",{name:"twitter:image:alt",content:"Image for "+k})),r.a.createElement("article",{className:g?void 0:"margin-bottom--xl"},(()=>{const e=g?"h1":"h2",t=d.substring(0,10).split("-"),a=t[0],n=y[parseInt(t[1],10)-1],l=parseInt(t[2],10);return r.a.createElement("header",null,r.a.createElement(e,{className:Object(o.a)("margin-bottom--sm",m.a.blogPostTitle)},g?k:r.a.createElement(s.a,{to:h},k)),r.a.createElement("div",{className:"margin-vert--md"},r.a.createElement("time",{dateTime:d,className:m.a.blogPostDate},n," ",l,", ",a," ",b&&r.a.createElement(r.a.Fragment,null," \xb7 ",Math.ceil(b)," min read"))),r.a.createElement("div",{className:"avatar margin-vert--md"},x&&r.a.createElement("a",{className:"avatar__photo-link avatar__photo",href:O,target:"_blank",rel:"noreferrer noopener"},r.a.createElement("img",{src:x,alt:v})),r.a.createElement("div",{className:"avatar__intro"},v&&r.a.createElement(r.a.Fragment,null,r.a.createElement("h4",{className:"avatar__name"},r.a.createElement("a",{href:O,target:"_blank",rel:"noreferrer noopener"},v)),r.a.createElement("small",{className:"avatar__subtitle"},N)))))})(),r.a.createElement("section",{className:"markdown"},r.a.createElement(l.a,{components:i.a},t)),(f.length>0||u)&&r.a.createElement("footer",{className:"row margin-vert--lg"},f.length>0&&r.a.createElement("div",{className:"col"},r.a.createElement("strong",null,"Tags:"),f.map((({label:e,permalink:t})=>r.a.createElement(s.a,{key:t,className:"margin-horiz--sm",to:t},e)))),u&&r.a.createElement("div",{className:"col text--right"},r.a.createElement(s.a,{to:n.permalink,"aria-label":"Read more about "+k},r.a.createElement("strong",null,"Read More"))))))}},465:function(e,t,a){"use strict";var n=a(2),r=a(0),o=a.n(r),l=a(293),c=a(292),s={plain:{backgroundColor:"#2a2734",color:"#9a86fd"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#6c6783"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#e09142"}},{types:["property","function"],style:{color:"#9a86fd"}},{types:["tag-id","selector","atrule-id"],style:{color:"#eeebff"}},{types:["attr-name"],style:{color:"#c4b9fe"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","at-rule","placeholder","variable"],style:{color:"#ffcc99"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#c4b9fe"}}]},i={Prism:a(19).a,theme:s};function p(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function u(){return(u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}var m=/\r\n|\r|\n/,y=function(e){0===e.length?e.push({types:["plain"],content:"",empty:!0}):1===e.length&&""===e[0].content&&(e[0].empty=!0)},g=function(e,t){var a=e.length;return a>0&&e[a-1]===t?e:e.concat(t)},d=function(e,t){var a=e.plain,n=Object.create(null),r=e.styles.reduce((function(e,a){var n=a.languages,r=a.style;return n&&!n.includes(t)||a.types.forEach((function(t){var a=u({},e[t],r);e[t]=a})),e}),n);return r.root=a,r.plain=u({},a,{backgroundColor:null}),r};function h(e,t){var a={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&-1===t.indexOf(n)&&(a[n]=e[n]);return a}var f=function(e){function t(){for(var t=this,a=[],n=arguments.length;n--;)a[n]=arguments[n];e.apply(this,a),p(this,"getThemeDict",(function(e){if(void 0!==t.themeDict&&e.theme===t.prevTheme&&e.language===t.prevLanguage)return t.themeDict;t.prevTheme=e.theme,t.prevLanguage=e.language;var a=e.theme?d(e.theme,e.language):void 0;return t.themeDict=a})),p(this,"getLineProps",(function(e){var a=e.key,n=e.className,r=e.style,o=u({},h(e,["key","className","style","line"]),{className:"token-line",style:void 0,key:void 0}),l=t.getThemeDict(t.props);return void 0!==l&&(o.style=l.plain),void 0!==r&&(o.style=void 0!==o.style?u({},o.style,r):r),void 0!==a&&(o.key=a),n&&(o.className+=" "+n),o})),p(this,"getStyleForToken",(function(e){var a=e.types,n=e.empty,r=a.length,o=t.getThemeDict(t.props);if(void 0!==o){if(1===r&&"plain"===a[0])return n?{display:"inline-block"}:void 0;if(1===r&&!n)return o[a[0]];var l=n?{display:"inline-block"}:{},c=a.map((function(e){return o[e]}));return Object.assign.apply(Object,[l].concat(c))}})),p(this,"getTokenProps",(function(e){var a=e.key,n=e.className,r=e.style,o=e.token,l=u({},h(e,["key","className","style","token"]),{className:"token "+o.types.join(" "),children:o.content,style:t.getStyleForToken(o),key:void 0});return void 0!==r&&(l.style=void 0!==l.style?u({},l.style,r):r),void 0!==a&&(l.key=a),n&&(l.className+=" "+n),l}))}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.render=function(){var e=this.props,t=e.Prism,a=e.language,n=e.code,r=e.children,o=this.getThemeDict(this.props),l=t.languages[a];return r({tokens:function(e){for(var t=[[]],a=[e],n=[0],r=[e.length],o=0,l=0,c=[],s=[c];l>-1;){for(;(o=n[l]++)<r[l];){var i=void 0,p=t[l],u=a[l][o];if("string"==typeof u?(p=l>0?p:["plain"],i=u):(p=g(p,u.type),u.alias&&(p=g(p,u.alias)),i=u.content),"string"==typeof i){var d=i.split(m),h=d.length;c.push({types:p,content:d[0]});for(var f=1;f<h;f++)y(c),s.push(c=[]),c.push({types:p,content:d[f]})}else l++,t.push(p),a.push(i),n.push(0),r.push(i.length)}l--,t.pop(),a.pop(),n.pop(),r.pop()}return y(c),s}(void 0!==l?t.tokenize(n,l,a):[n]),className:"prism-code language-"+a,style:void 0!==o?o.root:{},getLineProps:this.getLineProps,getTokenProps:this.getTokenProps})},t}(r.Component),b=a(319),v=a.n(b),k=a(320),E=a.n(k),j=a(291),O={plain:{color:"#bfc7d5",backgroundColor:"#292d3e"},styles:[{types:["comment"],style:{color:"rgb(105, 112, 152)",fontStyle:"italic"}},{types:["string","inserted"],style:{color:"rgb(195, 232, 141)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation","selector"],style:{color:"rgb(199, 146, 234)"}},{types:["variable"],style:{color:"rgb(191, 199, 213)"}},{types:["class-name","attr-name"],style:{color:"rgb(255, 203, 107)"}},{types:["tag","deleted"],style:{color:"rgb(255, 85, 114)"}},{types:["operator"],style:{color:"rgb(137, 221, 255)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["keyword"],style:{fontStyle:"italic"}},{types:["doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}},{types:["url"],style:{color:"rgb(221, 221, 221)"}}]},N=a(298);var x=()=>{const{siteConfig:{themeConfig:{prism:e={}}}}=Object(j.a)(),{isDarkTheme:t}=Object(N.a)(),a=e.theme||O,n=e.darkTheme||a;return t?n:a},w=a(47),P=a.n(w);const T=/{([\d,-]+)}/,C=(e=["js","jsBlock","jsx","python","html"])=>{const t={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},python:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}},a=["highlight-next-line","highlight-start","highlight-end"].join("|"),n=e.map((e=>`(?:${t[e].start}\\s*(${a})\\s*${t[e].end})`)).join("|");return new RegExp(`^\\s*(?:${n})\\s*$`)},_=/title=".*"/;var D=({children:e,className:t,metastring:a})=>{const{siteConfig:{themeConfig:{prism:l={}}}}=Object(j.a)(),[s,p]=Object(r.useState)(!1),[u,m]=Object(r.useState)(!1);Object(r.useEffect)((()=>{m(!0)}),[]);const y=Object(r.useRef)(null);let g=[],d="";const h=x();if(a&&T.test(a)){const e=a.match(T)[1];g=E.a.parse(e).filter((e=>e>0))}a&&_.test(a)&&(d=a.match(_)[0].split("title=")[1].replace(/"+/g,""));let b=t&&t.replace(/language-/,"");!b&&l.defaultLanguage&&(b=l.defaultLanguage);let k=e.replace(/\n$/,"");if(0===g.length&&void 0!==b){let t="";const a=(e=>{switch(e){case"js":case"javascript":case"ts":case"typescript":return C(["js","jsBlock"]);case"jsx":case"tsx":return C(["js","jsBlock","jsx"]);case"html":return C(["js","jsBlock","html"]);case"python":case"py":return C(["python"]);default:return C()}})(b),n=e.replace(/\n$/,"").split("\n");let r;for(let e=0;e<n.length;){const o=e+1,l=n[e].match(a);if(null!==l){switch(l.slice(1).reduce(((e,t)=>e||t),void 0)){case"highlight-next-line":t+=o+",";break;case"highlight-start":r=o;break;case"highlight-end":t+=`${r}-${o-1},`}n.splice(e,1)}else e+=1}g=E.a.parse(t),k=n.join("\n")}const O=()=>{v()(k),p(!0),setTimeout((()=>p(!1)),2e3)};return o.a.createElement(f,Object(n.a)({},i,{key:String(u),theme:h,code:k,language:b}),(({className:e,style:t,tokens:a,getLineProps:r,getTokenProps:l})=>o.a.createElement(o.a.Fragment,null,d&&o.a.createElement("div",{style:t,className:P.a.codeBlockTitle},d),o.a.createElement("div",{className:P.a.codeBlockContent},o.a.createElement("button",{ref:y,type:"button","aria-label":"Copy code to clipboard",className:Object(c.a)(P.a.copyButton,{[P.a.copyButtonWithTitle]:d}),onClick:O},s?"Copied":"Copy"),o.a.createElement("div",{tabIndex:0,className:Object(c.a)(e,P.a.codeBlock,{[P.a.codeBlockWithTitle]:d})},o.a.createElement("div",{className:P.a.codeBlockLines,style:t},a.map(((e,t)=>{1===e.length&&""===e[0].content&&(e[0].content="\n");const a=r({line:e,key:t});return g.includes(t+1)&&(a.className=a.className+" docusaurus-highlight-code-line"),o.a.createElement("div",Object(n.a)({key:t},a),e.map(((e,t)=>o.a.createElement("span",Object(n.a)({key:t},l({token:e,key:t}))))))}))))))))},S=(a(48),a(49)),B=a.n(S);var A=e=>function({id:t,...a}){const{siteConfig:{themeConfig:{navbar:{hideOnScroll:n=!1}={}}={}}={}}=Object(j.a)();return t?o.a.createElement(e,a,o.a.createElement("a",{"aria-hidden":"true",tabIndex:-1,className:Object(c.a)("anchor",{[B.a.enhancedAnchor]:!n}),id:t}),a.children,o.a.createElement("a",{"aria-hidden":"true",tabIndex:-1,className:"hash-link",href:"#"+t,title:"Direct link to heading"},"#")):o.a.createElement(e,a)},L=a(50),I=a.n(L);const $={code:e=>{const{children:t}=e;return"string"==typeof t?t.includes("\n")?o.a.createElement(D,e):o.a.createElement("code",e):t},a:e=>o.a.createElement(l.a,e),pre:e=>o.a.createElement("div",Object(n.a)({className:I.a.mdxCodeBlock},e)),h1:A("h1"),h2:A("h2"),h3:A("h3"),h4:A("h4"),h5:A("h5"),h6:A("h6")};t.a=$}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{292:function(e,t,a){"use strict";a.d(t,"a",(function(){return u})),a.d(t,"b",(function(){return g}));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 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<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?l(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):l(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function s(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var i=r.a.createContext({}),p=function(e){var t=r.a.useContext(i),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},u=function(e){var t=p(e.components);return r.a.createElement(i.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},y=r.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,o=e.originalType,l=e.parentName,i=s(e,["components","mdxType","originalType","parentName"]),u=p(a),y=n,g=u["".concat(l,".").concat(y)]||u[y]||m[y]||o;return a?r.a.createElement(g,c(c({ref:t},i),{},{components:a})):r.a.createElement(g,c({ref:t},i))}));function g(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=a.length,l=new Array(o);l[0]=y;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,l[1]=c;for(var i=2;i<o;i++)l[i]=a[i];return r.a.createElement.apply(null,l)}return r.a.createElement.apply(null,a)}y.displayName="MDXCreateElement"},321:function(e,t,a){"use strict";const n=(e,{target:t=document.body}={})=>{const a=document.createElement("textarea"),n=document.activeElement;a.value=e,a.setAttribute("readonly",""),a.style.contain="strict",a.style.position="absolute",a.style.left="-9999px",a.style.fontSize="12pt";const r=document.getSelection();let o=!1;r.rangeCount>0&&(o=r.getRangeAt(0)),t.append(a),a.select(),a.selectionStart=0,a.selectionEnd=e.length;let l=!1;try{l=document.execCommand("copy")}catch(c){}return a.remove(),o&&(r.removeAllRanges(),r.addRange(o)),n&&n.focus(),l};e.exports=n,e.exports.default=n},322:function(e,t){e.exports.parse=function(e){var t=e.split(",").map((function(e){return function(e){if(/^-?\d+$/.test(e))return parseInt(e,10);var t;if(t=e.match(/^(-?\d+)(-|\.\.\.?|\u2025|\u2026|\u22EF)(-?\d+)$/)){var a=t[1],n=t[2],r=t[3];if(a&&r){var o=[],l=(a=parseInt(a))<(r=parseInt(r))?1:-1;"-"!=n&&".."!=n&&"\u2025"!=n||(r+=l);for(var c=a;c!=r;c+=l)o.push(c);return o}}return[]}(e)}));return 0===t.length?[]:1===t.length?Array.isArray(t[0])?t[0]:t:t.reduce((function(e,t){return Array.isArray(e)||(e=[e]),Array.isArray(t)||(t=[t]),e.concat(t)}))}},369:function(e,t,a){"use strict";var n=a(0),r=a.n(n),o=a(294),l=a(292),c=a(298),s=a(295),i=a(471),p=a(296),u=a(156),m=a.n(u);const y=["January","February","March","April","May","June","July","August","September","October","November","December"];t.a=function(e){const{children:t,frontMatter:a,metadata:n,truncated:u,isBlogPostPage:g=!1}=e,{date:d,permalink:h,tags:f,readingTime:b}=n,{author:v,title:k,image:E,keywords:j}=a,O=a.author_url||a.authorURL,N=a.author_title||a.authorTitle,x=a.author_image_url||a.authorImageURL,w=Object(p.a)(E,{absolute:!0});return r.a.createElement(r.a.Fragment,null,r.a.createElement(c.a,null,j&&j.length&&r.a.createElement("meta",{name:"keywords",content:j.join(",")}),E&&r.a.createElement("meta",{property:"og:image",content:w}),E&&r.a.createElement("meta",{property:"twitter:image",content:w}),E&&r.a.createElement("meta",{name:"twitter:image:alt",content:"Image for "+k})),r.a.createElement("article",{className:g?void 0:"margin-bottom--xl"},(()=>{const e=g?"h1":"h2",t=d.substring(0,10).split("-"),a=t[0],n=y[parseInt(t[1],10)-1],l=parseInt(t[2],10);return r.a.createElement("header",null,r.a.createElement(e,{className:Object(o.a)("margin-bottom--sm",m.a.blogPostTitle)},g?k:r.a.createElement(s.a,{to:h},k)),r.a.createElement("div",{className:"margin-vert--md"},r.a.createElement("time",{dateTime:d,className:m.a.blogPostDate},n," ",l,", ",a," ",b&&r.a.createElement(r.a.Fragment,null," \xb7 ",Math.ceil(b)," min read"))),r.a.createElement("div",{className:"avatar margin-vert--md"},x&&r.a.createElement("a",{className:"avatar__photo-link avatar__photo",href:O,target:"_blank",rel:"noreferrer noopener"},r.a.createElement("img",{src:x,alt:v})),r.a.createElement("div",{className:"avatar__intro"},v&&r.a.createElement(r.a.Fragment,null,r.a.createElement("h4",{className:"avatar__name"},r.a.createElement("a",{href:O,target:"_blank",rel:"noreferrer noopener"},v)),r.a.createElement("small",{className:"avatar__subtitle"},N)))))})(),r.a.createElement("section",{className:"markdown"},r.a.createElement(l.a,{components:i.a},t)),(f.length>0||u)&&r.a.createElement("footer",{className:"row margin-vert--lg"},f.length>0&&r.a.createElement("div",{className:"col"},r.a.createElement("strong",null,"Tags:"),f.map((({label:e,permalink:t})=>r.a.createElement(s.a,{key:t,className:"margin-horiz--sm",to:t},e)))),u&&r.a.createElement("div",{className:"col text--right"},r.a.createElement(s.a,{to:n.permalink,"aria-label":"Read more about "+k},r.a.createElement("strong",null,"Read More"))))))}},471:function(e,t,a){"use strict";var n=a(2),r=a(0),o=a.n(r),l=a(295),c=a(294),s={plain:{backgroundColor:"#2a2734",color:"#9a86fd"},styles:[{types:["comment","prolog","doctype","cdata","punctuation"],style:{color:"#6c6783"}},{types:["namespace"],style:{opacity:.7}},{types:["tag","operator","number"],style:{color:"#e09142"}},{types:["property","function"],style:{color:"#9a86fd"}},{types:["tag-id","selector","atrule-id"],style:{color:"#eeebff"}},{types:["attr-name"],style:{color:"#c4b9fe"}},{types:["boolean","string","entity","url","attr-value","keyword","control","directive","unit","statement","regex","at-rule","placeholder","variable"],style:{color:"#ffcc99"}},{types:["deleted"],style:{textDecorationLine:"line-through"}},{types:["inserted"],style:{textDecorationLine:"underline"}},{types:["italic"],style:{fontStyle:"italic"}},{types:["important","bold"],style:{fontWeight:"bold"}},{types:["important"],style:{color:"#c4b9fe"}}]},i={Prism:a(19).a,theme:s};function p(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function u(){return(u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}var m=/\r\n|\r|\n/,y=function(e){0===e.length?e.push({types:["plain"],content:"",empty:!0}):1===e.length&&""===e[0].content&&(e[0].empty=!0)},g=function(e,t){var a=e.length;return a>0&&e[a-1]===t?e:e.concat(t)},d=function(e,t){var a=e.plain,n=Object.create(null),r=e.styles.reduce((function(e,a){var n=a.languages,r=a.style;return n&&!n.includes(t)||a.types.forEach((function(t){var a=u({},e[t],r);e[t]=a})),e}),n);return r.root=a,r.plain=u({},a,{backgroundColor:null}),r};function h(e,t){var a={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&-1===t.indexOf(n)&&(a[n]=e[n]);return a}var f=function(e){function t(){for(var t=this,a=[],n=arguments.length;n--;)a[n]=arguments[n];e.apply(this,a),p(this,"getThemeDict",(function(e){if(void 0!==t.themeDict&&e.theme===t.prevTheme&&e.language===t.prevLanguage)return t.themeDict;t.prevTheme=e.theme,t.prevLanguage=e.language;var a=e.theme?d(e.theme,e.language):void 0;return t.themeDict=a})),p(this,"getLineProps",(function(e){var a=e.key,n=e.className,r=e.style,o=u({},h(e,["key","className","style","line"]),{className:"token-line",style:void 0,key:void 0}),l=t.getThemeDict(t.props);return void 0!==l&&(o.style=l.plain),void 0!==r&&(o.style=void 0!==o.style?u({},o.style,r):r),void 0!==a&&(o.key=a),n&&(o.className+=" "+n),o})),p(this,"getStyleForToken",(function(e){var a=e.types,n=e.empty,r=a.length,o=t.getThemeDict(t.props);if(void 0!==o){if(1===r&&"plain"===a[0])return n?{display:"inline-block"}:void 0;if(1===r&&!n)return o[a[0]];var l=n?{display:"inline-block"}:{},c=a.map((function(e){return o[e]}));return Object.assign.apply(Object,[l].concat(c))}})),p(this,"getTokenProps",(function(e){var a=e.key,n=e.className,r=e.style,o=e.token,l=u({},h(e,["key","className","style","token"]),{className:"token "+o.types.join(" "),children:o.content,style:t.getStyleForToken(o),key:void 0});return void 0!==r&&(l.style=void 0!==l.style?u({},l.style,r):r),void 0!==a&&(l.key=a),n&&(l.className+=" "+n),l}))}return e&&(t.__proto__=e),t.prototype=Object.create(e&&e.prototype),t.prototype.constructor=t,t.prototype.render=function(){var e=this.props,t=e.Prism,a=e.language,n=e.code,r=e.children,o=this.getThemeDict(this.props),l=t.languages[a];return r({tokens:function(e){for(var t=[[]],a=[e],n=[0],r=[e.length],o=0,l=0,c=[],s=[c];l>-1;){for(;(o=n[l]++)<r[l];){var i=void 0,p=t[l],u=a[l][o];if("string"==typeof u?(p=l>0?p:["plain"],i=u):(p=g(p,u.type),u.alias&&(p=g(p,u.alias)),i=u.content),"string"==typeof i){var d=i.split(m),h=d.length;c.push({types:p,content:d[0]});for(var f=1;f<h;f++)y(c),s.push(c=[]),c.push({types:p,content:d[f]})}else l++,t.push(p),a.push(i),n.push(0),r.push(i.length)}l--,t.pop(),a.pop(),n.pop(),r.pop()}return y(c),s}(void 0!==l?t.tokenize(n,l,a):[n]),className:"prism-code language-"+a,style:void 0!==o?o.root:{},getLineProps:this.getLineProps,getTokenProps:this.getTokenProps})},t}(r.Component),b=a(321),v=a.n(b),k=a(322),E=a.n(k),j=a(293),O={plain:{color:"#bfc7d5",backgroundColor:"#292d3e"},styles:[{types:["comment"],style:{color:"rgb(105, 112, 152)",fontStyle:"italic"}},{types:["string","inserted"],style:{color:"rgb(195, 232, 141)"}},{types:["number"],style:{color:"rgb(247, 140, 108)"}},{types:["builtin","char","constant","function"],style:{color:"rgb(130, 170, 255)"}},{types:["punctuation","selector"],style:{color:"rgb(199, 146, 234)"}},{types:["variable"],style:{color:"rgb(191, 199, 213)"}},{types:["class-name","attr-name"],style:{color:"rgb(255, 203, 107)"}},{types:["tag","deleted"],style:{color:"rgb(255, 85, 114)"}},{types:["operator"],style:{color:"rgb(137, 221, 255)"}},{types:["boolean"],style:{color:"rgb(255, 88, 116)"}},{types:["keyword"],style:{fontStyle:"italic"}},{types:["doctype"],style:{color:"rgb(199, 146, 234)",fontStyle:"italic"}},{types:["namespace"],style:{color:"rgb(178, 204, 214)"}},{types:["url"],style:{color:"rgb(221, 221, 221)"}}]},N=a(300);var x=()=>{const{siteConfig:{themeConfig:{prism:e={}}}}=Object(j.a)(),{isDarkTheme:t}=Object(N.a)(),a=e.theme||O,n=e.darkTheme||a;return t?n:a},w=a(47),P=a.n(w);const T=/{([\d,-]+)}/,C=(e=["js","jsBlock","jsx","python","html"])=>{const t={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},python:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}},a=["highlight-next-line","highlight-start","highlight-end"].join("|"),n=e.map((e=>`(?:${t[e].start}\\s*(${a})\\s*${t[e].end})`)).join("|");return new RegExp(`^\\s*(?:${n})\\s*$`)},_=/title=".*"/;var D=({children:e,className:t,metastring:a})=>{const{siteConfig:{themeConfig:{prism:l={}}}}=Object(j.a)(),[s,p]=Object(r.useState)(!1),[u,m]=Object(r.useState)(!1);Object(r.useEffect)((()=>{m(!0)}),[]);const y=Object(r.useRef)(null);let g=[],d="";const h=x();if(a&&T.test(a)){const e=a.match(T)[1];g=E.a.parse(e).filter((e=>e>0))}a&&_.test(a)&&(d=a.match(_)[0].split("title=")[1].replace(/"+/g,""));let b=t&&t.replace(/language-/,"");!b&&l.defaultLanguage&&(b=l.defaultLanguage);let k=e.replace(/\n$/,"");if(0===g.length&&void 0!==b){let t="";const a=(e=>{switch(e){case"js":case"javascript":case"ts":case"typescript":return C(["js","jsBlock"]);case"jsx":case"tsx":return C(["js","jsBlock","jsx"]);case"html":return C(["js","jsBlock","html"]);case"python":case"py":return C(["python"]);default:return C()}})(b),n=e.replace(/\n$/,"").split("\n");let r;for(let e=0;e<n.length;){const o=e+1,l=n[e].match(a);if(null!==l){switch(l.slice(1).reduce(((e,t)=>e||t),void 0)){case"highlight-next-line":t+=o+",";break;case"highlight-start":r=o;break;case"highlight-end":t+=`${r}-${o-1},`}n.splice(e,1)}else e+=1}g=E.a.parse(t),k=n.join("\n")}const O=()=>{v()(k),p(!0),setTimeout((()=>p(!1)),2e3)};return o.a.createElement(f,Object(n.a)({},i,{key:String(u),theme:h,code:k,language:b}),(({className:e,style:t,tokens:a,getLineProps:r,getTokenProps:l})=>o.a.createElement(o.a.Fragment,null,d&&o.a.createElement("div",{style:t,className:P.a.codeBlockTitle},d),o.a.createElement("div",{className:P.a.codeBlockContent},o.a.createElement("button",{ref:y,type:"button","aria-label":"Copy code to clipboard",className:Object(c.a)(P.a.copyButton,{[P.a.copyButtonWithTitle]:d}),onClick:O},s?"Copied":"Copy"),o.a.createElement("div",{tabIndex:0,className:Object(c.a)(e,P.a.codeBlock,{[P.a.codeBlockWithTitle]:d})},o.a.createElement("div",{className:P.a.codeBlockLines,style:t},a.map(((e,t)=>{1===e.length&&""===e[0].content&&(e[0].content="\n");const a=r({line:e,key:t});return g.includes(t+1)&&(a.className=a.className+" docusaurus-highlight-code-line"),o.a.createElement("div",Object(n.a)({key:t},a),e.map(((e,t)=>o.a.createElement("span",Object(n.a)({key:t},l({token:e,key:t}))))))}))))))))},S=(a(48),a(49)),B=a.n(S);var A=e=>function({id:t,...a}){const{siteConfig:{themeConfig:{navbar:{hideOnScroll:n=!1}={}}={}}={}}=Object(j.a)();return t?o.a.createElement(e,a,o.a.createElement("a",{"aria-hidden":"true",tabIndex:-1,className:Object(c.a)("anchor",{[B.a.enhancedAnchor]:!n}),id:t}),a.children,o.a.createElement("a",{"aria-hidden":"true",tabIndex:-1,className:"hash-link",href:"#"+t,title:"Direct link to heading"},"#")):o.a.createElement(e,a)},L=a(50),I=a.n(L);const $={code:e=>{const{children:t}=e;return"string"==typeof t?t.includes("\n")?o.a.createElement(D,e):o.a.createElement("code",e):t},a:e=>o.a.createElement(l.a,e),pre:e=>o.a.createElement("div",Object(n.a)({className:I.a.mdxCodeBlock},e)),h1:A("h1"),h2:A("h2"),h3:A("h3"),h4:A("h4"),h5:A("h5"),h6:A("h6")};t.a=$}}]);
\ No newline at end of file
diff --git a/docs/31c3c419.2f652d9f.js b/docs/31c3c419.2f652d9f.js
new file mode 100644
index 0000000000..ed89ed728a
--- /dev/null
+++ b/docs/31c3c419.2f652d9f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{102: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 s}));var n=r(2),a=r(6),o=(r(0),r(292)),i={title:"Plot / Interval / Theta"},c={unversionedId:"examples/plot-interval-theta",id:"examples/plot-interval-theta",isDocsHomePage:!1,title:"Plot / Interval / Theta",description:'Make a "racetrack" plot (a bar plot in polar coordinates, transposed).',source:"@site/docs/examples/plot-interval-theta.md",slug:"/examples/plot-interval-theta",permalink:"/wave/docs/examples/plot-interval-theta",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-theta.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Polar / Stacked",permalink:"/wave/docs/examples/plot-interval-polar-stacked"},next:{title:"Plot / Interval / Helix",permalink:"/wave/docs/examples/plot-interval-helix"}},l=[],p={rightToc:l};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,'Make a "racetrack" plot (a bar plot in polar coordinates, transposed).'),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(334).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, theta, stacked',\n    data=data('country product price', n * k),\n    plot=ui.plot([\n        ui.mark(coord='theta', type='interval', x='=product', y='=price', color='=country', stack='auto', y_min=0)])\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},292: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 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 c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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)},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,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,m=u["".concat(i,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,c(c({ref:t},p),{},{components:r})):a.a.createElement(m,c({ref:t},p))}));function m(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 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 p=2;p<o;p++)i[p]=r[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},334:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-interval-theta-ecd6315a48713f45d162e64c4414325c.png"}}]);
\ No newline at end of file
diff --git a/docs/31c3c419.ec262224.js b/docs/31c3c419.ec262224.js
deleted file mode 100644
index f315943a58..0000000000
--- a/docs/31c3c419.ec262224.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{290: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 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 c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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)},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,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(r),f=n,m=u["".concat(i,".").concat(f)]||u[f]||d[f]||o;return r?a.a.createElement(m,c(c({ref:t},p),{},{components:r})):a.a.createElement(m,c({ref:t},p))}));function m(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 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 p=2;p<o;p++)i[p]=r[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},331:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-interval-theta-ecd6315a48713f45d162e64c4414325c.png"},98: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 s}));var n=r(2),a=r(6),o=(r(0),r(290)),i={title:"Plot / Interval / Theta"},c={unversionedId:"examples/plot-interval-theta",id:"examples/plot-interval-theta",isDocsHomePage:!1,title:"Plot / Interval / Theta",description:'Make a "racetrack" plot (a bar plot in polar coordinates, transposed).',source:"@site/docs/examples/plot-interval-theta.md",slug:"/examples/plot-interval-theta",permalink:"/wave/docs/examples/plot-interval-theta",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-theta.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Polar / Stacked",permalink:"/wave/docs/examples/plot-interval-polar-stacked"},next:{title:"Plot / Interval / Helix",permalink:"/wave/docs/examples/plot-interval-helix"}},l=[],p={rightToc:l};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,'Make a "racetrack" plot (a bar plot in polar coordinates, transposed).'),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(331).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, theta, stacked',\n    data=data('country product price', n * k),\n    plot=ui.plot([\n        ui.mark(coord='theta', type='interval', x='=product', y='=price', color='=country', stack='auto', y_min=0)])\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}}]);
\ No newline at end of file
diff --git a/docs/31f8b56c.056223e9.js b/docs/31f8b56c.056223e9.js
deleted file mode 100644
index d58af12247..0000000000
--- a/docs/31f8b56c.056223e9.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[46],{290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return d}));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 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 p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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,i=e.parentName,l=c(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,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]=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:n,i[1]=p;for(var l=2;l<o;l++)i[l]=r[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},332:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-area-0a621df3247663494f8a594d65f0516d.png"},99:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return p})),r.d(t,"rightToc",(function(){return c})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(290)),i={title:"Plot / Area"},p={unversionedId:"examples/plot-area",id:"examples/plot-area",isDocsHomePage:!1,title:"Plot / Area",description:"Make an area plot.",source:"@site/docs/examples/plot-area.md",slug:"/examples/plot-area",permalink:"/wave/docs/examples/plot-area",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Path / Smooth",permalink:"/wave/docs/examples/plot-path-smooth"},next:{title:"Plot / Area / Groups",permalink:"/wave/docs/examples/plot-area-groups"}},c=[],l={rightToc:c};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make an area plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(332).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.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='Area',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='area', x_scale='time', x='=date', y='=price', y_min=0)])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0}}]);
\ No newline at end of file
diff --git a/docs/31f8b56c.08e34e2c.js b/docs/31f8b56c.08e34e2c.js
new file mode 100644
index 0000000000..00fed67b6e
--- /dev/null
+++ b/docs/31f8b56c.08e34e2c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[50],{103:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return p})),r.d(t,"rightToc",(function(){return c})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(292)),i={title:"Plot / Area"},p={unversionedId:"examples/plot-area",id:"examples/plot-area",isDocsHomePage:!1,title:"Plot / Area",description:"Make an area plot.",source:"@site/docs/examples/plot-area.md",slug:"/examples/plot-area",permalink:"/wave/docs/examples/plot-area",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Path / Smooth",permalink:"/wave/docs/examples/plot-path-smooth"},next:{title:"Plot / Area / Groups",permalink:"/wave/docs/examples/plot-area-groups"}},c=[],l={rightToc:c};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make an area plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(335).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.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='Area',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='area', x_scale='time', x='=date', y='=price', y_min=0)])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return d}));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 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 p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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,i=e.parentName,l=c(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,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]=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:n,i[1]=p;for(var l=2;l<o;l++)i[l]=r[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},335:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-area-0a621df3247663494f8a594d65f0516d.png"}}]);
\ No newline at end of file
diff --git a/docs/34cd3da4.2c59e278.js b/docs/34cd3da4.553abcee.js
similarity index 92%
rename from docs/34cd3da4.2c59e278.js
rename to docs/34cd3da4.553abcee.js
index 6c9da72b19..9a8c337e03 100644
--- a/docs/34cd3da4.2c59e278.js
+++ b/docs/34cd3da4.553abcee.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{100:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return u}));var r=n(2),o=n(6),a=(n(0),n(290)),i={title:"Plot / Point"},p={unversionedId:"examples/plot-point",id:"examples/plot-point",isDocsHomePage:!1,title:"Plot / Point",description:"Make a scatterplot.",source:"@site/docs/examples/plot-point.md",slug:"/examples/plot-point",permalink:"/wave/docs/examples/plot-point",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point.md",version:"current",sidebar:"someSidebar",previous:{title:"Context Menu",permalink:"/wave/docs/examples/card-menu"},next:{title:"Plot / Point / Shapes",permalink:"/wave/docs/examples/plot-point-shapes"}},c=[],l={rightToc:c};function u(e){var t=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Make a scatterplot."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(333).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeScatter\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 50\nf = FakeScatter()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Point',\n    data=data('price performance', n),\n    plot=ui.plot([\n        ui.mark(type='point', x='=price', y='=performance')\n    ])\n))\nv.data = [f.next() for i in range(n)]\n\npage.save()\n")))}u.isMDXComponent=!0},290: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 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=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):p(p({},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,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),s=u(n),m=r,d=s["".concat(i,".").concat(m)]||s[m]||f[m]||a;return n?o.a.createElement(d,p(p({ref:t},l),{},{components:n})):o.a.createElement(d,p({ref:t},l))}));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]=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,i[1]=p;for(var l=2;l<a;l++)i[l]=n[l];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},333:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-point-ca45d9c0f59368e2e351f8bc69f5566f.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[51],{104:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return u}));var r=n(2),o=n(6),a=(n(0),n(292)),i={title:"Plot / Point"},p={unversionedId:"examples/plot-point",id:"examples/plot-point",isDocsHomePage:!1,title:"Plot / Point",description:"Make a scatterplot.",source:"@site/docs/examples/plot-point.md",slug:"/examples/plot-point",permalink:"/wave/docs/examples/plot-point",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point.md",version:"current",sidebar:"someSidebar",previous:{title:"Context Menu",permalink:"/wave/docs/examples/card-menu"},next:{title:"Plot / Point / Shapes",permalink:"/wave/docs/examples/plot-point-shapes"}},c=[],l={rightToc:c};function u(e){var t=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Make a scatterplot."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(336).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeScatter\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 50\nf = FakeScatter()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Point',\n    data=data('price performance', n),\n    plot=ui.plot([\n        ui.mark(type='point', x='=price', y='=performance')\n    ])\n))\nv.data = [f.next() for i in range(n)]\n\npage.save()\n")))}u.isMDXComponent=!0},292: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 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=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):p(p({},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,i=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),s=u(n),m=r,d=s["".concat(i,".").concat(m)]||s[m]||f[m]||a;return n?o.a.createElement(d,p(p({ref:t},l),{},{components:n})):o.a.createElement(d,p({ref:t},l))}));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]=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,i[1]=p;for(var l=2;l<a;l++)i[l]=n[l];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},336:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-point-ca45d9c0f59368e2e351f8bc69f5566f.png"}}]);
\ No newline at end of file
diff --git a/docs/3570154c.6fb4d9ba.js b/docs/3570154c.6fb4d9ba.js
deleted file mode 100644
index d557e461d3..0000000000
--- a/docs/3570154c.6fb4d9ba.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[48],{101:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return l})),r.d(t,"metadata",(function(){return c})),r.d(t,"rightToc",(function(){return i})),r.d(t,"default",(function(){return p}));var n=r(2),o=r(6),a=(r(0),r(290)),l={slug:"hello-world",title:"Hello",author:"Endilie Yacop Sucipto",author_title:"Maintainer of Docusaurus",author_url:"https://github.com/endiliey",author_image_url:"https://avatars1.githubusercontent.com/u/17883920?s=460&v=4",tags:["hello","docusaurus"]},c={permalink:"/wave/blog/hello-world",editUrl:"https://github.com/facebook/docusaurus/edit/master/website/blog/blog/2019-05-29-hello-world.md",source:"@site/blog/2019-05-29-hello-world.md",description:"Welcome to this blog. This blog is created with Docusaurus 2 alpha.",date:"2019-05-29T00:00:00.000Z",tags:[{label:"hello",permalink:"/wave/blog/tags/hello"},{label:"docusaurus",permalink:"/wave/blog/tags/docusaurus"}],title:"Hello",readingTime:.12,truncated:!0,prevItem:{title:"Welcome",permalink:"/wave/blog/welcome"},nextItem:{title:"Hola",permalink:"/wave/blog/hola"}},i=[],u={rightToc:i};function p(e){var t=e.components,r=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},u,r,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Welcome to this blog. This blog is created with ",Object(a.b)("a",Object(n.a)({parentName:"p"},{href:"https://v2.docusaurus.io/"}),Object(a.b)("strong",{parentName:"a"},"Docusaurus 2 alpha")),"."))}p.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return s})),r.d(t,"b",(function(){return m}));var n=r(0),o=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 l(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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function i(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=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<a;u++)l[u]=r[u];return o.a.createElement.apply(null,l)}return o.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/3584c003.a606d50d.js b/docs/3584c003.2b36572c.js
similarity index 92%
rename from docs/3584c003.a606d50d.js
rename to docs/3584c003.2b36572c.js
index 6541de0756..78c2a81dfe 100644
--- a/docs/3584c003.a606d50d.js
+++ b/docs/3584c003.2b36572c.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{102: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 p})),r.d(t,"default",(function(){return l}));var n=r(2),a=r(6),o=(r(0),r(290)),i={title:"Meta / Redirect"},c={unversionedId:"examples/meta-redirect",id:"examples/meta-redirect",isDocsHomePage:!1,title:"Meta / Redirect",description:"Redirect the page to a new URL or hash.",source:"@site/docs/examples/meta-redirect.md",slug:"/examples/meta-redirect",permalink:"/wave/docs/examples/meta-redirect",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/meta-redirect.md",version:"current",sidebar:"someSidebar",previous:{title:"Meta / Refresh",permalink:"/wave/docs/examples/meta-refresh"},next:{title:"Mode / Broadcast / Global",permalink:"/wave/docs/examples/counter-global"}},p=[],s={rightToc:p};function l(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},s,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Redirect the page to a new URL or hash."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(334).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['meta'] = ui.meta_card(box='')\n\npage['example'] = ui.markdown_card(\n    box='1 1 2 2',\n    title='Redirect a page',\n    content='This page should redirect to Wikipedia in a few seconds. Wait for it...',\n)\npage.save()\n\ntime.sleep(3)\n# Redirect to a hash.\npage['meta'].redirect = '#widgets'\npage.save()\n\ntime.sleep(3)\n# Redirect to a URL.\npage['meta'].redirect = 'https://www.wikipedia.org'\npage.save()\n")))}l.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return f}));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 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 c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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},u=function(e){var t=l(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)}},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"]),u=l(r),m=n,f=u["".concat(i,".").concat(m)]||u[m]||d[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<o;s++)i[s]=r[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},334:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/meta-redirect-ce65a2bb8925d26db3db00327634b324.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[52],{105: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 p})),r.d(t,"default",(function(){return l}));var n=r(2),a=r(6),o=(r(0),r(292)),i={title:"Meta / Redirect"},c={unversionedId:"examples/meta-redirect",id:"examples/meta-redirect",isDocsHomePage:!1,title:"Meta / Redirect",description:"Redirect the page to a new URL or hash.",source:"@site/docs/examples/meta-redirect.md",slug:"/examples/meta-redirect",permalink:"/wave/docs/examples/meta-redirect",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/meta-redirect.md",version:"current",sidebar:"someSidebar",previous:{title:"Meta / Refresh",permalink:"/wave/docs/examples/meta-refresh"},next:{title:"Mode / Broadcast / Global",permalink:"/wave/docs/examples/counter-global"}},p=[],s={rightToc:p};function l(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},s,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Redirect the page to a new URL or hash."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(337).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['meta'] = ui.meta_card(box='')\n\npage['example'] = ui.markdown_card(\n    box='1 1 2 2',\n    title='Redirect a page',\n    content='This page should redirect to Wikipedia in a few seconds. Wait for it...',\n)\npage.save()\n\ntime.sleep(3)\n# Redirect to a hash.\npage['meta'].redirect = '#widgets'\npage.save()\n\ntime.sleep(3)\n# Redirect to a URL.\npage['meta'].redirect = 'https://www.wikipedia.org'\npage.save()\n")))}l.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return f}));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 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 c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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},u=function(e){var t=l(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)}},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"]),u=l(r),m=n,f=u["".concat(i,".").concat(m)]||u[m]||d[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<o;s++)i[s]=r[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},337:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/meta-redirect-ce65a2bb8925d26db3db00327634b324.png"}}]);
\ No newline at end of file
diff --git a/docs/35dabcf3.31accd70.js b/docs/35dabcf3.31accd70.js
deleted file mode 100644
index 3834cde1bb..0000000000
--- a/docs/35dabcf3.31accd70.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[50],{103: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 s}));var n=r(2),o=r(6),a=(r(0),r(290)),i={title:"Form / Textbox / Trigger"},c={unversionedId:"examples/textbox-trigger",id:"examples/textbox-trigger",isDocsHomePage:!1,title:"Form / Textbox / Trigger",description:"To handle live changes to a textbox, enable the trigger attribute.",source:"@site/docs/examples/textbox-trigger.md",slug:"/examples/textbox-trigger",permalink:"/wave/docs/examples/textbox-trigger",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/textbox-trigger.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Textbox",permalink:"/wave/docs/examples/textbox"},next:{title:"Form / Button",permalink:"/wave/docs/examples/button"}},l=[],p={rightToc:l};function s(e){var t=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"To handle live changes to a textbox, enable the ",Object(a.b)("inlineCode",{parentName:"p"},"trigger")," attribute."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(335).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\ndef to_pig_latin(text: str):\n    if text is None:\n        return ''\n    words = text.lower().strip().split(\" \")\n    text = []\n    for word in words:\n        if word[0] in 'aeiou':\n            text.append(f'{word}yay')\n        else:\n            for letter in word:\n                if letter in 'aeiou':\n                    text.append(f'{word[word.index(letter):]}{word[:word.index(letter)]}ay')\n                    break\n    return \" \".join(text)\n\n\nasync def serve(q: Q):\n    q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n        ui.textbox(name='text', label='English', value=q.args.text or '', multiline=True, trigger=True),\n        ui.label('Pig Latin'),\n        ui.text(to_pig_latin(q.args.text) or '*Type in some text above to translate to Pig Latin!*'),\n    ])\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}s.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return m}));var n=r(0),o=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 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 c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var p=o.a.createContext({}),s=function(e){var t=o.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 o.a.createElement(p.Provider,{value:t},e.children)},b={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,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(r),d=n,m=u["".concat(i,".").concat(d)]||u[d]||b[d]||a;return r?o.a.createElement(m,c(c({ref:t},p),{},{components:r})):o.a.createElement(m,c({ref:t},p))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,i=new Array(a);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 p=2;p<a;p++)i[p]=r[p];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},335:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/textbox-trigger-3063508395dc193e6087e98ec3caf604.png"}}]);
\ No newline at end of file
diff --git a/docs/35dabcf3.e798e443.js b/docs/35dabcf3.e798e443.js
new file mode 100644
index 0000000000..4818e933bc
--- /dev/null
+++ b/docs/35dabcf3.e798e443.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[53],{106: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 u}));var n=r(2),o=r(6),a=(r(0),r(292)),i={title:"Form / Textbox / Trigger"},c={unversionedId:"examples/textbox-trigger",id:"examples/textbox-trigger",isDocsHomePage:!1,title:"Form / Textbox / Trigger",description:"To handle live changes to a textbox, enable the trigger attribute.",source:"@site/docs/examples/textbox-trigger.md",slug:"/examples/textbox-trigger",permalink:"/wave/docs/examples/textbox-trigger",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/textbox-trigger.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Textbox",permalink:"/wave/docs/examples/textbox"},next:{title:"Form / Button",permalink:"/wave/docs/examples/button"}},l=[],p={rightToc:l};function u(e){var t=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"To handle live changes to a textbox, enable the ",Object(a.b)("inlineCode",{parentName:"p"},"trigger")," attribute."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(338).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\ndef to_pig_latin(text: str):\n    if text is None:\n        return ''\n    words = text.lower().strip().split(\" \")\n    text = []\n    for word in words:\n        if word[0] in 'aeiou':\n            text.append(f'{word}yay')\n        else:\n            for letter in word:\n                if letter in 'aeiou':\n                    text.append(f'{word[word.index(letter):]}{word[:word.index(letter)]}ay')\n                    break\n    return \" \".join(text)\n\n\n@app('/demo')\nasync def serve(q: Q):\n    q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n        ui.textbox(name='text', label='English', value=q.args.text or '', multiline=True, trigger=True),\n        ui.label('Pig Latin'),\n        ui.text(to_pig_latin(q.args.text) or '*Type in some text above to translate to Pig Latin!*'),\n    ])\n    await q.page.save()\n")))}u.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return s})),r.d(t,"b",(function(){return m}));var n=r(0),o=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 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 c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var p=o.a.createContext({}),u=function(e){var t=o.a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},s=function(e){var t=u(e.components);return o.a.createElement(p.Provider,{value:t},e.children)},b={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,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),s=u(r),d=n,m=s["".concat(i,".").concat(d)]||s[d]||b[d]||a;return r?o.a.createElement(m,c(c({ref:t},p),{},{components:r})):o.a.createElement(m,c({ref:t},p))}));function m(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,i=new Array(a);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 p=2;p<a;p++)i[p]=r[p];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},338:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/textbox-trigger-3063508395dc193e6087e98ec3caf604.png"}}]);
\ No newline at end of file
diff --git a/docs/360edac9.fd4b7554.js b/docs/360edac9.7fb4d54a.js
similarity index 97%
rename from docs/360edac9.fd4b7554.js
rename to docs/360edac9.7fb4d54a.js
index 23ce511a67..961126a0ce 100644
--- a/docs/360edac9.fd4b7554.js
+++ b/docs/360edac9.7fb4d54a.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[51],{104:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return c})),r.d(t,"metadata",(function(){return o})),r.d(t,"rightToc",(function(){return s})),r.d(t,"default",(function(){return u}));var n=r(2),a=r(6),i=(r(0),r(290)),c={title:"Stat / Series / Wide / Interval"},o={unversionedId:"examples/stat-wide-series-interval",id:"examples/stat-wide-series-interval",isDocsHomePage:!1,title:"Stat / Series / Wide / Interval",description:"Create a wide stat card displaying a primary value, an auxiliary value and a series plot.",source:"@site/docs/examples/stat-wide-series-interval.md",slug:"/examples/stat-wide-series-interval",permalink:"/wave/docs/examples/stat-wide-series-interval",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-wide-series-interval.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Series / Wide / Area",permalink:"/wave/docs/examples/stat-wide-series-area"},next:{title:"Stat / Series / Tall / Area",permalink:"/wave/docs/examples/stat-tall-series-area"}},s=[],l={rightToc:s};function u(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},l,c,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a series plot."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+r(336).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"import time\n\nfrom faker import Faker\n\nfrom synth import FakeCategoricalSeries\nfrom h2o_wave import site, ui, data\n\npage = site['/demo']\n\nfake = Faker()\nf = FakeCategoricalSeries()\ncat, val, pc = f.next()\nc = page.add(f'example', ui.wide_series_stat_card(\n    box='1 1 2 1',\n    title=fake.cryptocurrency_name(),\n    value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    aux_value='={{intl quux style=\"percent\" minimum_fraction_digits=1 maximum_fraction_digits=1}}',\n    data=dict(qux=val, quux=pc / 100),\n    plot_category='foo',\n    plot_type='interval',\n    plot_value='qux',\n    plot_color='$red',\n    plot_data=data('foo qux', -15),\n    plot_zero_value=0,\n))\npage.save()\n\nwhile True:\n    time.sleep(1)\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    page.save()\n")))}u.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return p})),r.d(t,"b",(function(){return d}));var n=r(0),a=r.n(n);function i(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 o(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function s(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=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):o(o({},t),e)),r},p=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,i=e.originalType,c=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),p=u(r),m=n,d=p["".concat(c,".").concat(m)]||p[m]||f[m]||i;return r?a.a.createElement(d,o(o({ref:t},l),{},{components:r})):a.a.createElement(d,o({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=r.length,c=new Array(i);c[0]=m;var o={};for(var s in t)hasOwnProperty.call(t,s)&&(o[s]=t[s]);o.originalType=e,o.mdxType="string"==typeof e?e:n,c[1]=o;for(var l=2;l<i;l++)c[l]=r[l];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},336:function(e,t,r){"use strict";r.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[54],{107:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return c})),r.d(t,"metadata",(function(){return o})),r.d(t,"rightToc",(function(){return s})),r.d(t,"default",(function(){return u}));var n=r(2),a=r(6),i=(r(0),r(292)),c={title:"Stat / Series / Wide / Interval"},o={unversionedId:"examples/stat-wide-series-interval",id:"examples/stat-wide-series-interval",isDocsHomePage:!1,title:"Stat / Series / Wide / Interval",description:"Create a wide stat card displaying a primary value, an auxiliary value and a series plot.",source:"@site/docs/examples/stat-wide-series-interval.md",slug:"/examples/stat-wide-series-interval",permalink:"/wave/docs/examples/stat-wide-series-interval",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-wide-series-interval.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Series / Wide / Area",permalink:"/wave/docs/examples/stat-wide-series-area"},next:{title:"Stat / Series / Tall / Area",permalink:"/wave/docs/examples/stat-tall-series-area"}},s=[],l={rightToc:s};function u(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},l,c,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a series plot."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+r(339).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"import time\n\nfrom faker import Faker\n\nfrom synth import FakeCategoricalSeries\nfrom h2o_wave import site, ui, data\n\npage = site['/demo']\n\nfake = Faker()\nf = FakeCategoricalSeries()\ncat, val, pc = f.next()\nc = page.add(f'example', ui.wide_series_stat_card(\n    box='1 1 2 1',\n    title=fake.cryptocurrency_name(),\n    value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    aux_value='={{intl quux style=\"percent\" minimum_fraction_digits=1 maximum_fraction_digits=1}}',\n    data=dict(qux=val, quux=pc / 100),\n    plot_category='foo',\n    plot_type='interval',\n    plot_value='qux',\n    plot_color='$red',\n    plot_data=data('foo qux', -15),\n    plot_zero_value=0,\n))\npage.save()\n\nwhile True:\n    time.sleep(1)\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    page.save()\n")))}u.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return p})),r.d(t,"b",(function(){return d}));var n=r(0),a=r.n(n);function i(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 o(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function s(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=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):o(o({},t),e)),r},p=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,i=e.originalType,c=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),p=u(r),m=n,d=p["".concat(c,".").concat(m)]||p[m]||f[m]||i;return r?a.a.createElement(d,o(o({ref:t},l),{},{components:r})):a.a.createElement(d,o({ref:t},l))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=r.length,c=new Array(i);c[0]=m;var o={};for(var s in t)hasOwnProperty.call(t,s)&&(o[s]=t[s]);o.originalType=e,o.mdxType="string"==typeof e?e:n,c[1]=o;for(var l=2;l<i;l++)c[l]=r[l];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},339:function(e,t,r){"use strict";r.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/3697284d.20d40ff4.js b/docs/3697284d.4cf13213.js
similarity index 97%
rename from docs/3697284d.20d40ff4.js
rename to docs/3697284d.4cf13213.js
index 334c09d885..b8ea48f8db 100644
--- a/docs/3697284d.20d40ff4.js
+++ b/docs/3697284d.4cf13213.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[52],{105:function(e,A,t){"use strict";t.r(A),t.d(A,"frontMatter",(function(){return d})),t.d(A,"metadata",(function(){return i})),t.d(A,"rightToc",(function(){return o})),t.d(A,"default",(function(){return f}));var n=t(2),r=t(6),a=(t(0),t(290)),d={title:"Plot / Vega-lite / Update"},i={unversionedId:"examples/plot-vegalite-update",id:"examples/plot-vegalite-update",isDocsHomePage:!1,title:"Plot / Vega-lite / Update",description:"Periodically update a Vega-lite plot.",source:"@site/docs/examples/plot-vegalite-update.md",slug:"/examples/plot-vegalite-update",permalink:"/wave/docs/examples/plot-vegalite-update",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-vegalite-update.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Vega-lite",permalink:"/wave/docs/examples/plot-vegalite"},next:{title:"Plot / Vega-lite / Form",permalink:"/wave/docs/examples/plot-vegalite-form"}},o=[],l={rightToc:o};function f(e){var A=e.components,d=Object(r.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},l,d,{components:A,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Periodically update a Vega-lite plot."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+t(337).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(n.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# Generate random datum between 1 and 100\ndef rnd(): return random.randint(1, 100)\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\nvis = page.add(\'external\', ui.vega_card(\n    box=\'1 1 2 4\',\n    title=\'Plot with external data\',\n    specification=spec,\n    data=data(fields=["a", "b"], rows=poll()),\n))\n\npage.save()\n\nwhile True:\n    time.sleep(1)\n    # Update the plot\'s data rows\n    vis.data = poll()\n    page.save()\n')))}f.isMDXComponent=!0},290:function(e,A,t){"use strict";t.d(A,"a",(function(){return s})),t.d(A,"b",(function(){return c}));var n=t(0),r=t.n(n);function a(e,A,t){return A in e?Object.defineProperty(e,A,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[A]=t,e}function d(e,A){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);A&&(n=n.filter((function(A){return Object.getOwnPropertyDescriptor(e,A).enumerable}))),t.push.apply(t,n)}return t}function i(e){for(var A=1;A<arguments.length;A++){var t=null!=arguments[A]?arguments[A]:{};A%2?d(Object(t),!0).forEach((function(A){a(e,A,t[A])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):d(Object(t)).forEach((function(A){Object.defineProperty(e,A,Object.getOwnPropertyDescriptor(t,A))}))}return e}function o(e,A){if(null==e)return{};var t,n,r=function(e,A){if(null==e)return{};var t,n,r={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],A.indexOf(t)>=0||(r[t]=e[t]);return r}(e,A);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],A.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var l=r.a.createContext({}),f=function(e){var A=r.a.useContext(l),t=A;return e&&(t="function"==typeof e?e(A):i(i({},A),e)),t},s=function(e){var A=f(e.components);return r.a.createElement(l.Provider,{value:A},e.children)},u={inlineCode:"code",wrapper:function(e){var A=e.children;return r.a.createElement(r.a.Fragment,{},A)}},p=r.a.forwardRef((function(e,A){var t=e.components,n=e.mdxType,a=e.originalType,d=e.parentName,l=o(e,["components","mdxType","originalType","parentName"]),s=f(t),p=n,c=s["".concat(d,".").concat(p)]||s[p]||u[p]||a;return t?r.a.createElement(c,i(i({ref:A},l),{},{components:t})):r.a.createElement(c,i({ref:A},l))}));function c(e,A){var t=arguments,n=A&&A.mdxType;if("string"==typeof e||n){var a=t.length,d=new Array(a);d[0]=p;var i={};for(var o in A)hasOwnProperty.call(A,o)&&(i[o]=A[o]);i.originalType=e,i.mdxType="string"==typeof e?e:n,d[1]=i;for(var l=2;l<a;l++)d[l]=t[l];return r.a.createElement.apply(null,d)}return r.a.createElement.apply(null,t)}p.displayName="MDXCreateElement"},337:function(e,A,t){"use strict";t.r(A),A.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[55],{108:function(e,A,t){"use strict";t.r(A),t.d(A,"frontMatter",(function(){return d})),t.d(A,"metadata",(function(){return i})),t.d(A,"rightToc",(function(){return o})),t.d(A,"default",(function(){return f}));var n=t(2),r=t(6),a=(t(0),t(292)),d={title:"Plot / Vega-lite / Update"},i={unversionedId:"examples/plot-vegalite-update",id:"examples/plot-vegalite-update",isDocsHomePage:!1,title:"Plot / Vega-lite / Update",description:"Periodically update a Vega-lite plot.",source:"@site/docs/examples/plot-vegalite-update.md",slug:"/examples/plot-vegalite-update",permalink:"/wave/docs/examples/plot-vegalite-update",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-vegalite-update.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Vega-lite",permalink:"/wave/docs/examples/plot-vegalite"},next:{title:"Plot / Vega-lite / Form",permalink:"/wave/docs/examples/plot-vegalite-form"}},o=[],l={rightToc:o};function f(e){var A=e.components,d=Object(r.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},l,d,{components:A,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Periodically update a Vega-lite plot."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+t(340).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(n.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# Generate random datum between 1 and 100\ndef rnd(): return random.randint(1, 100)\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\nvis = page.add(\'external\', ui.vega_card(\n    box=\'1 1 2 4\',\n    title=\'Plot with external data\',\n    specification=spec,\n    data=data(fields=["a", "b"], rows=poll()),\n))\n\npage.save()\n\nwhile True:\n    time.sleep(1)\n    # Update the plot\'s data rows\n    vis.data = poll()\n    page.save()\n')))}f.isMDXComponent=!0},292:function(e,A,t){"use strict";t.d(A,"a",(function(){return s})),t.d(A,"b",(function(){return c}));var n=t(0),r=t.n(n);function a(e,A,t){return A in e?Object.defineProperty(e,A,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[A]=t,e}function d(e,A){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);A&&(n=n.filter((function(A){return Object.getOwnPropertyDescriptor(e,A).enumerable}))),t.push.apply(t,n)}return t}function i(e){for(var A=1;A<arguments.length;A++){var t=null!=arguments[A]?arguments[A]:{};A%2?d(Object(t),!0).forEach((function(A){a(e,A,t[A])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):d(Object(t)).forEach((function(A){Object.defineProperty(e,A,Object.getOwnPropertyDescriptor(t,A))}))}return e}function o(e,A){if(null==e)return{};var t,n,r=function(e,A){if(null==e)return{};var t,n,r={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],A.indexOf(t)>=0||(r[t]=e[t]);return r}(e,A);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],A.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var l=r.a.createContext({}),f=function(e){var A=r.a.useContext(l),t=A;return e&&(t="function"==typeof e?e(A):i(i({},A),e)),t},s=function(e){var A=f(e.components);return r.a.createElement(l.Provider,{value:A},e.children)},u={inlineCode:"code",wrapper:function(e){var A=e.children;return r.a.createElement(r.a.Fragment,{},A)}},p=r.a.forwardRef((function(e,A){var t=e.components,n=e.mdxType,a=e.originalType,d=e.parentName,l=o(e,["components","mdxType","originalType","parentName"]),s=f(t),p=n,c=s["".concat(d,".").concat(p)]||s[p]||u[p]||a;return t?r.a.createElement(c,i(i({ref:A},l),{},{components:t})):r.a.createElement(c,i({ref:A},l))}));function c(e,A){var t=arguments,n=A&&A.mdxType;if("string"==typeof e||n){var a=t.length,d=new Array(a);d[0]=p;var i={};for(var o in A)hasOwnProperty.call(A,o)&&(i[o]=A[o]);i.originalType=e,i.mdxType="string"==typeof e?e:n,d[1]=i;for(var l=2;l<a;l++)d[l]=t[l];return r.a.createElement.apply(null,d)}return r.a.createElement.apply(null,t)}p.displayName="MDXCreateElement"},340:function(e,A,t){"use strict";t.r(A),A.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/36db7894.0f123971.js b/docs/36db7894.0f123971.js
new file mode 100644
index 0000000000..c9855774c7
--- /dev/null
+++ b/docs/36db7894.0f123971.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[56],{109:function(A,e,t){"use strict";t.r(e),t.d(e,"frontMatter",(function(){return a})),t.d(e,"metadata",(function(){return l})),t.d(e,"rightToc",(function(){return u})),t.d(e,"default",(function(){return c}));var r=t(2),D=t(6),n=(t(0),t(292)),a={title:"Routing / Tabs"},l={unversionedId:"examples/tab-routing",id:"examples/tab-routing",isDocsHomePage:!1,title:"Routing / Tabs",description:"This example demonstrates how you can observe and handle changes to the browser's",source:"@site/docs/examples/tab-routing.md",slug:"/examples/tab-routing",permalink:"/wave/docs/examples/tab-routing",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/tab-routing.md",version:"current",sidebar:"someSidebar",previous:{title:"Routing / Toolbar",permalink:"/wave/docs/examples/toolbar-routing"},next:{title:"Context Menu",permalink:"/wave/docs/examples/card-menu"}},u=[],o={rightToc:u};function c(A){var e=A.components,a=Object(D.a)(A,["components"]);return Object(n.b)("wrapper",Object(r.a)({},o,a,{components:e,mdxType:"MDXLayout"}),Object(n.b)("p",null,"This example demonstrates how you can observe and handle changes to the browser's\n",Object(n.b)("a",Object(r.a)({parentName:"p"},{href:"https://developer.mozilla.org/en-US/docs/Web/API/Location/hash"}),"location hash")),Object(n.b)("p",null,"The location hash can be accessed using ",Object(n.b)("inlineCode",{parentName:"p"},"q.args['#']"),"."),Object(n.b)("div",{className:"cover",style:{backgroundImage:"url("+t(341).default+")"}}),Object(n.b)("pre",null,Object(n.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    hash = q.args['#']\n    if hash:\n        blurb = q.page['blurb']\n        if hash == 'menu/spam':\n            blurb.content = \"Sorry, we're out of spam!\"\n        elif hash == 'menu/ham':\n            blurb.content = \"Sorry, we're out of ham!\"\n        elif hash == 'menu/eggs':\n            blurb.content = \"Sorry, we're out of eggs!\"\n        elif hash == 'about':\n            blurb.content = 'Everything here is gluten-free!'\n    else:\n        q.page['nav'] = ui.tab_card(\n            box='1 1 4 1',\n            items=[\n                ui.tab(name='#menu/spam', label='Spam'),\n                ui.tab(name='#menu/ham', label='Ham'),\n                ui.tab(name='#menu/eggs', label='Eggs'),\n                ui.tab(name='#about', label='About'),\n            ],\n        )\n        q.page['blurb'] = ui.markdown_card(\n            box='1 2 4 2',\n            title='Store',\n            content='Welcome to our store!',\n        )\n    await q.page.save()\n")))}c.isMDXComponent=!0},292:function(A,e,t){"use strict";t.d(e,"a",(function(){return p})),t.d(e,"b",(function(){return d}));var r=t(0),D=t.n(r);function n(A,e,t){return e in A?Object.defineProperty(A,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):A[e]=t,A}function a(A,e){var t=Object.keys(A);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(A);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(A,e).enumerable}))),t.push.apply(t,r)}return t}function l(A){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?a(Object(t),!0).forEach((function(e){n(A,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(A,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(e){Object.defineProperty(A,e,Object.getOwnPropertyDescriptor(t,e))}))}return A}function u(A,e){if(null==A)return{};var t,r,D=function(A,e){if(null==A)return{};var t,r,D={},n=Object.keys(A);for(r=0;r<n.length;r++)t=n[r],e.indexOf(t)>=0||(D[t]=A[t]);return D}(A,e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(A);for(r=0;r<n.length;r++)t=n[r],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(A,t)&&(D[t]=A[t])}return D}var o=D.a.createContext({}),c=function(A){var e=D.a.useContext(o),t=e;return A&&(t="function"==typeof A?A(e):l(l({},e),A)),t},p=function(A){var e=c(A.components);return D.a.createElement(o.Provider,{value:e},A.children)},b={inlineCode:"code",wrapper:function(A){var e=A.children;return D.a.createElement(D.a.Fragment,{},e)}},g=D.a.forwardRef((function(A,e){var t=A.components,r=A.mdxType,n=A.originalType,a=A.parentName,o=u(A,["components","mdxType","originalType","parentName"]),p=c(t),g=r,d=p["".concat(a,".").concat(g)]||p[g]||b[g]||n;return t?D.a.createElement(d,l(l({ref:e},o),{},{components:t})):D.a.createElement(d,l({ref:e},o))}));function d(A,e){var t=arguments,r=e&&e.mdxType;if("string"==typeof A||r){var n=t.length,a=new Array(n);a[0]=g;var l={};for(var u in e)hasOwnProperty.call(e,u)&&(l[u]=e[u]);l.originalType=A,l.mdxType="string"==typeof A?A:r,a[1]=l;for(var o=2;o<n;o++)a[o]=t[o];return D.a.createElement.apply(null,a)}return D.a.createElement.apply(null,t)}g.displayName="MDXCreateElement"},341:function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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M1GbN21SYGB5J76uqPlUTf34n/9cd7ybNkXo8cefcELoigYNG+r333/X8ePHU3fjaZBZ17wStFeULFVSZ86ckZT4kHxoaDU99NBDOnHihLZu3arFixcpKioq2bsnS5a6+m+b67775HK5VOjBQs42l8ul3Pffr6ioKGdb4hIkz4ABANLP+AzYFTlz5lSdOnVVp05dxcbGaszoUerTp7e++nq58uTJo7Nnz6pAwYLJXlfwbwV19uxZr22WrBSvkdL2EgEBevTRR7V61So98cQTWr1qpUJCqii/n1+qx14iIECFChXS5k2b5PF4FB0drfIVKig4OERbtmzR802bauvWrerdu48kOeNt26Z1smffPB6PoqLOJruGlBirSZ09e1abNkWoYoXyqR7rldcVTOnfsuDfnP1XZowySmZd0+32/pH1cblkezzO9/Pnz9OsmTN1+vRpFS5cWH//+9+VO3fuZB9xcr2fmWvZuvo6liABABnFaIB5PB7t3btXhQsXVp48eZztuXLlUtdub+irr77Svn37VKlSJeXLl0+RkaeSnSMyMlJ58+ZN1zieadBAn82Zo46dOmn9+vUaMnTYzV90jaqhodq0KUK2bD355JPKkSOHgkOCtWDBfP380086d+6cQqokfqTClXt98823FBgYmOxc+fLnT9U18+TNo8KFC+u9995P01jz5cunvXuSPyN2OjJSkpx/T5flHTOSdCnJc3qZcc2MtGXLFo0dM0ZvvvmWGjZq5LybtmXLFhly/rp16ypbkhlZAABuldH1FMuy1KVLZ02elDwgfvwx8Z18V5bXKgcFac3q1V4P6sfHx2vlihUKCg5O1zjqPV1PkZGRmjx5ktxut6pVq5bmc4SGVtOOHTv0/fffO+9c/Mc/ysrj8WjGjBl6/PEnlP9yWOXPn18lAgK0b/8+lQgIcL4eKlxYBw4e9FpmvZFKlSrr1KlTypkrl9d5oqKjdeEGoRRUOUi7du1ylkyv+PKrL1WkSBEVLlxYUmIU/fbbb17HbNu+Ldn5LMtSfHz8Dcea2mtmpKNH/59y5sypZi+84MRXdHS0fj9yJEPOX6duXdWsWTNDzgUAuLcZnQGzLEsdXuug8ePH6cyZs6peo4bcbrd2/fKLli5donr166to0aKSpPbt2mvVypXq0vl1vfRSK1kul+bPm6vTp0/rtdc6pGsc+f38FBwc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"}}]);
\ No newline at end of file
diff --git a/docs/36db7894.b418751e.js b/docs/36db7894.b418751e.js
deleted file mode 100644
index 981e803129..0000000000
--- a/docs/36db7894.b418751e.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[53],{106:function(A,e,t){"use strict";t.r(e),t.d(e,"frontMatter",(function(){return a})),t.d(e,"metadata",(function(){return l})),t.d(e,"rightToc",(function(){return u})),t.d(e,"default",(function(){return c}));var r=t(2),n=t(6),D=(t(0),t(290)),a={title:"Routing / Tabs"},l={unversionedId:"examples/tab-routing",id:"examples/tab-routing",isDocsHomePage:!1,title:"Routing / Tabs",description:"This example demonstrates how you can observe and handle changes to the browser's",source:"@site/docs/examples/tab-routing.md",slug:"/examples/tab-routing",permalink:"/wave/docs/examples/tab-routing",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/tab-routing.md",version:"current",sidebar:"someSidebar",previous:{title:"Routing / Toolbar",permalink:"/wave/docs/examples/toolbar-routing"},next:{title:"Context Menu",permalink:"/wave/docs/examples/card-menu"}},u=[],o={rightToc:u};function c(A){var e=A.components,a=Object(n.a)(A,["components"]);return Object(D.b)("wrapper",Object(r.a)({},o,a,{components:e,mdxType:"MDXLayout"}),Object(D.b)("p",null,"This example demonstrates how you can observe and handle changes to the browser's\n",Object(D.b)("a",Object(r.a)({parentName:"p"},{href:"https://developer.mozilla.org/en-US/docs/Web/API/Location/hash"}),"location hash")),Object(D.b)("p",null,"The location hash can be accessed using ",Object(D.b)("inlineCode",{parentName:"p"},"q.args['#']"),"."),Object(D.b)("div",{className:"cover",style:{backgroundImage:"url("+t(338).default+")"}}),Object(D.b)("pre",null,Object(D.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    hash = q.args['#']\n    if hash:\n        blurb = q.page['blurb']\n        if hash == 'menu/spam':\n            blurb.content = \"Sorry, we're out of spam!\"\n        elif hash == 'menu/ham':\n            blurb.content = \"Sorry, we're out of ham!\"\n        elif hash == 'menu/eggs':\n            blurb.content = \"Sorry, we're out of eggs!\"\n        elif hash == 'about':\n            blurb.content = 'Everything here is gluten-free!'\n    else:\n        q.page['nav'] = ui.tab_card(\n            box='1 1 4 1',\n            items=[\n                ui.tab(name='#menu/spam', label='Spam'),\n                ui.tab(name='#menu/ham', label='Ham'),\n                ui.tab(name='#menu/eggs', label='Eggs'),\n                ui.tab(name='#about', label='About'),\n            ],\n        )\n        q.page['blurb'] = ui.markdown_card(\n            box='1 2 4 2',\n            title='Store',\n            content='Welcome to our store!',\n        )\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}c.isMDXComponent=!0},290:function(A,e,t){"use strict";t.d(e,"a",(function(){return b})),t.d(e,"b",(function(){return i}));var r=t(0),n=t.n(r);function D(A,e,t){return e in A?Object.defineProperty(A,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):A[e]=t,A}function a(A,e){var t=Object.keys(A);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(A);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(A,e).enumerable}))),t.push.apply(t,r)}return t}function l(A){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?a(Object(t),!0).forEach((function(e){D(A,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(A,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(e){Object.defineProperty(A,e,Object.getOwnPropertyDescriptor(t,e))}))}return A}function u(A,e){if(null==A)return{};var t,r,n=function(A,e){if(null==A)return{};var t,r,n={},D=Object.keys(A);for(r=0;r<D.length;r++)t=D[r],e.indexOf(t)>=0||(n[t]=A[t]);return n}(A,e);if(Object.getOwnPropertySymbols){var D=Object.getOwnPropertySymbols(A);for(r=0;r<D.length;r++)t=D[r],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(A,t)&&(n[t]=A[t])}return n}var o=n.a.createContext({}),c=function(A){var e=n.a.useContext(o),t=e;return A&&(t="function"==typeof A?A(e):l(l({},e),A)),t},b=function(A){var e=c(A.components);return n.a.createElement(o.Provider,{value:e},A.children)},p={inlineCode:"code",wrapper:function(A){var e=A.children;return n.a.createElement(n.a.Fragment,{},e)}},g=n.a.forwardRef((function(A,e){var t=A.components,r=A.mdxType,D=A.originalType,a=A.parentName,o=u(A,["components","mdxType","originalType","parentName"]),b=c(t),g=r,i=b["".concat(a,".").concat(g)]||b[g]||p[g]||D;return t?n.a.createElement(i,l(l({ref:e},o),{},{components:t})):n.a.createElement(i,l({ref:e},o))}));function i(A,e){var t=arguments,r=e&&e.mdxType;if("string"==typeof A||r){var D=t.length,a=new Array(D);a[0]=g;var l={};for(var u in e)hasOwnProperty.call(e,u)&&(l[u]=e[u]);l.originalType=A,l.mdxType="string"==typeof A?A:r,a[1]=l;for(var o=2;o<D;o++)a[o]=t[o];return n.a.createElement.apply(null,a)}return n.a.createElement.apply(null,t)}g.displayName="MDXCreateElement"},338:function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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M1GbN21SYGB5J76uqPlUTf34n/9cd7ybNkXo8cefcELoigYNG+r333/X8ePHU3fjaZBZ17wStFeULFVSZ86ckZT4kHxoaDU99NBDOnHihLZu3arFixcpKioq2bsnS5a6+m+b67775HK5VOjBQs42l8ul3Pffr6ioKGdb4hIkz4ABANLP+AzYFTlz5lSdOnVVp05dxcbGaszoUerTp7e++nq58uTJo7Nnz6pAwYLJXlfwbwV19uxZr22WrBSvkdL2EgEBevTRR7V61So98cQTWr1qpUJCqii/n1+qx14iIECFChXS5k2b5PF4FB0drfIVKig4OERbtmzR802bauvWrerdu48kOeNt26Z1smffPB6PoqLOJruGlBirSZ09e1abNkWoYoXyqR7rldcVTOnfsuDfnP1XZowySmZd0+32/pH1cblkezzO9/Pnz9OsmTN1+vRpFS5cWH//+9+VO3fuZB9xcr2fmWvZuvo6liABABnFaIB5PB7t3btXhQsXVp48eZztuXLlUtdub+irr77Svn37VKlSJeXLl0+RkaeSnSMyMlJ58+ZN1zieadBAn82Zo46dOmn9+vUaMnTYzV90jaqhodq0KUK2bD355JPKkSOHgkOCtWDBfP380086d+6cQqokfqTClXt98823FBgYmOxc+fLnT9U18+TNo8KFC+u9995P01jz5cunvXuSPyN2OjJSkpx/T5flHTOSdCnJc3qZcc2MtGXLFo0dM0ZvvvmWGjZq5LybtmXLFhly/rp16ypbkhlZAABuldH1FMuy1KVLZ02elDwgfvwx8Z18V5bXKgcFac3q1V4P6sfHx2vlihUKCg5O1zjqPV1PkZGRmjx5ktxut6pVq5bmc4SGVtOOHTv0/fffO+9c/Mc/ysrj8WjGjBl6/PEnlP9yWOXPn18lAgK0b/8+lQgIcL4eKlxYBw4e9FpmvZFKlSrr1KlTypkrl9d5oqKjdeEGoRRUOUi7du1ylkyv+PKrL1WkSBEVLlxYUmIU/fbbb17HbNu+Ldn5LMtSfHz8Dcea2mtmpKNH/59y5sypZi+84MRXdHS0fj9yJEPOX6duXdWsWTNDzgUAuLcZnQGzLEsdXuug8ePH6cyZs6peo4bcbrd2/fKLli5donr166to0aKSpPbt2mvVypXq0vl1vfRSK1kul+bPm6vTp0/rtdc6pGsc+f38FBwcrH8vWKCmzZp5BZBt2/roww8VUqXKdd/hJ0kVK1aUJG3ftk19+vSVlPgMUsVKlfTdt9/q9dc7ex3fs2dPvdGtmySpZs2ndOFCnOZ+/rl+PXBAixYuknLnvum4w8LCVKZMGXXq2EHtX3lVhQoV0p7duzVjxnS99FIrPf744ym+rlr16ioXGKhuXbuoQ8eOKligoNavX69lS5dq/ISJSY6rpmFDhyo8fMrl5dTN2rB+fbLzFS1WTEuXLFb+/PkUVDlIDySZzUzrNTPSk2Wf1IULFzRq5AjVrl1HUVFRmjVrZrJly1th27aaPt9EOXPl0uefz82AsQus7wAABZlJREFU0QIA7mXGnyhu0bKlRowYqbNnz2jC+HEaOeJd7fhxh15/vbPXO/7y+/lp5qxZyps3n4YOHaLBgwYqe/YcmjlzVrKH0G9FvXqJ74Br2LCh1/YzZ87o449neD18nRJfX19VqlRZ/v7+Xg/LX5kNCw0N9To+ODhE4VM/1OFDh9W/X18NGTxYefLk1Zw5n6X6+TOXy6XJH0xRWFhNTZ/2kd7o1lXLli1Vz1699Xrnzjd+3eQPFBZWU+FTpqhXr576Zdcvev/9Sape/eo7IBs2bKS27dpp4cKF6tH9DZ06eUpvdO+R7HzvvPOucubMqSGDhzgzl7d6zYxUIiBAY8aO1Y8//qhu3bpq+vRpatuuvR5++OEMOf99992nvCnEJgAAaWXFxMRc9w8w2rbtfHk8CUpI8DjLane6D6dO1Zq1a7T48udaXfHfnTvVvn07rV6zVn5peDAfAADcW86cOSOfyx9RZFmW85UaWfYuyKzy66+/6uDBg5o793P17tMn2f4DBw+oVKlSxBcAAMg091yATZwwXvv371ezF15Qw4aNku3fv2+fqmXSEhkAAIB0Dy9BAgAApEd6liD5WG8AAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADDCDAAAADD0hBgVuaNAgAA4I50a3100wCzLO8T27Z9SxcCAAC4W1zbQ9f20s2keQkyLi4urS8BAAC4q6S3h9IUYJZlKSYmRrGxscyEAQCAe45t24qNjVVMTEyaZ72SsmJiYm5YUrZty7ZteTweeTweJSQkyJOQoASPx9kn2aLHAADA3SixsyxZVuKXj8sll4+PfHx85HK55HK5nH2p5U79xRNP7LIs2S6XfCR5nAC7ggoDAAB3k6tRdaWDLJcr8b9pjK6kUhVglmVJtp14oSvxZVmyrg0w2ybBAADAXSFx4ss7wJJGmGVZspT2B/ClVASYZVmJkXX5Ii6XS3aS+OJZMAAAcC+wksx6ObNfl+MrrRGWpiVIKbEG7ctRdv34IsoAAMCdLOWgcuIr8ZvMX4K0Ly9BKslyJLNfAADgXmKlMOOVKUuQ157cCbFrLkiMAQCAu9H1Ais9H0OR6gBL6WJJoys9gwAAALgTZFTvpDnAMmMQAAAA95I0/ykiAAAApA8BBgAAYBgBBgAAYBgBBgAAYBgBBgAAYBgBBgAAYBgBBgAAYBgBBgAAYNj/B8i+WdE7Fp+BAAAAAElFTkSuQmCC"}}]);
\ No newline at end of file
diff --git a/docs/36fe3260.e056d46d.js b/docs/36fe3260.e056d46d.js
new file mode 100644
index 0000000000..b258cd7aa5
--- /dev/null
+++ b/docs/36fe3260.e056d46d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[57],{110:function(e,a,t){"use strict";t.r(a),t.d(a,"frontMatter",(function(){return s})),t.d(a,"metadata",(function(){return i})),t.d(a,"rightToc",(function(){return n})),t.d(a,"default",(function(){return o}));var c=t(2),b=t(6),l=(t(0),t(292)),s={title:"Module h2o_wave.core"},i={unversionedId:"api/core",id:"api/core",isDocsHomePage:!1,title:"Module h2o_wave.core",description:"Functions",source:"@site/docs/api/core.md",slug:"/api/core",permalink:"/wave/docs/api/core",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/api/core.md",version:"current",sidebar:"someSidebar",previous:{title:"Package h2o_wave",permalink:"/wave/docs/api/index"},next:{title:"Module h2o_wave.ui",permalink:"/wave/docs/api/ui"}},n=[{value:"Functions",id:"functions",children:[{value:'clone_expando <a name="h2o_wave.core.clone_expando"/>',id:"clone_expando",children:[]},{value:'copy_expando <a name="h2o_wave.core.copy_expando"/>',id:"copy_expando",children:[]},{value:'data <a name="h2o_wave.core.data"/>',id:"data",children:[]},{value:'expando_to_dict <a name="h2o_wave.core.expando_to_dict"/>',id:"expando_to_dict",children:[]},{value:'marshal <a name="h2o_wave.core.marshal"/>',id:"marshal",children:[]},{value:'pack <a name="h2o_wave.core.pack"/>',id:"pack",children:[]},{value:'unmarshal <a name="h2o_wave.core.unmarshal"/>',id:"unmarshal",children:[]}]},{value:"Classes",id:"classes",children:[{value:'AsyncPage <a name="h2o_wave.core.AsyncPage"/>',id:"asyncpage",children:[]},{value:'AsyncSite <a name="h2o_wave.core.AsyncSite"/>',id:"asyncsite",children:[]},{value:'Data <a name="h2o_wave.core.Data"/>',id:"data-1",children:[]},{value:'Expando <a name="h2o_wave.core.Expando"/>',id:"expando",children:[]},{value:'Page <a name="h2o_wave.core.Page"/>',id:"page",children:[]},{value:'PageBase <a name="h2o_wave.core.PageBase"/>',id:"pagebase",children:[]},{value:'Ref <a name="h2o_wave.core.Ref"/>',id:"ref",children:[]},{value:'ServiceError <a name="h2o_wave.core.ServiceError"/>',id:"serviceerror",children:[]},{value:'Site <a name="h2o_wave.core.Site"/>',id:"site",children:[]}]}],d={rightToc:n};function o(e){var a=e.components,t=Object(b.a)(e,["components"]);return Object(l.b)("wrapper",Object(c.a)({},d,t,{components:a,mdxType:"MDXLayout"}),Object(l.b)("h2",{id:"functions"},"Functions"),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"clone_expando"},"clone_expando ",Object(l.b)("a",{name:"h2o_wave.core.clone_expando"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"clone_expando"),"(source:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"#h2o_wave.core.Expando"},"Expando"),", exclude_keys:\xa0Union[list,\xa0tuple,\xa0NoneType]\xa0=\xa0None, include_keys:\xa0Union[list,\xa0tuple,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Clone an expando instance. Creates a shallow clone."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"source")),Object(l.b)("dd",null,"The expando to clone."),Object(l.b)("dt",null,Object(l.b)("code",null,"exclude_keys")),Object(l.b)("dd",null,"Keys to exclude while cloning."),Object(l.b)("dt",null,Object(l.b)("code",null,"include_keys")),Object(l.b)("dd",null,"Keys to include while cloning.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The expando clone.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"copy_expando"},"copy_expando ",Object(l.b)("a",{name:"h2o_wave.core.copy_expando"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"copy_expando"),"(source:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"#h2o_wave.core.Expando"},"Expando"),", target:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"#h2o_wave.core.Expando"},"Expando"),", exclude_keys:\xa0Union[list,\xa0tuple,\xa0NoneType]\xa0=\xa0None, include_keys:\xa0Union[list,\xa0tuple,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Copy all entries from the source expando instance to the target expando instance."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"source")),Object(l.b)("dd",null,"The expando to copy from."),Object(l.b)("dt",null,Object(l.b)("code",null,"target")),Object(l.b)("dd",null,"The expando to copy to."),Object(l.b)("dt",null,Object(l.b)("code",null,"exclude_keys")),Object(l.b)("dd",null,"Keys to exclude while copying."),Object(l.b)("dt",null,Object(l.b)("code",null,"include_keys")),Object(l.b)("dd",null,"Keys to include while copying.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The target expando.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"data"},"data ",Object(l.b)("a",{name:"h2o_wave.core.data"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"data"),"(fields:\xa0Union[str,\xa0tuple,\xa0list], size:\xa0int\xa0=\xa00, rows:\xa0Union[dict,\xa0list,\xa0NoneType]\xa0=\xa0None, columns:\xa0Union[dict,\xa0list,\xa0NoneType]\xa0=\xa0None, pack=False) \u2011>\xa0Union[",Object(l.b)("a",{title:"h2o_wave.core.Data",href:"#h2o_wave.core.Data"},"Data"),",\xa0str]"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.Data",href:"#h2o_wave.core.Data"},"Data"))," instance for associating data with cards."),Object(l.b)("p",null,Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.data",href:"#h2o_wave.core.data"},"data()"),"(fields, size)")," creates a placeholder for data and allocates memory on the Wave server."),Object(l.b)("p",null,Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.data",href:"#h2o_wave.core.data"},"data()"),"(fields, size, rows)")," creates a placeholder and initializes it with the provided rows."),Object(l.b)("p",null,"If ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.pack",href:"#h2o_wave.core.pack"},"pack()"))," is ",Object(l.b)("code",null,"True"),", the ",Object(l.b)("code",null,"size")," parameter is ignored, and the function returns a packed string representing the data."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"fields")),Object(l.b)("dd",null,"The names of the fields (columns names) in the data, either a list or tuple or string containing space-separated names."),Object(l.b)("dt",null,Object(l.b)("code",null,"size")),Object(l.b)("dd",null,"The number of rows to allocate memory for. Positive for fixed buffers, negative for circular buffers and zero for variable length buffers."),Object(l.b)("dt",null,Object(l.b)("code",null,"rows")),Object(l.b)("dd",null,"The rows in this data."),Object(l.b)("dt",null,Object(l.b)("code",null,"columns")),Object(l.b)("dd",null,"The columns in this data."),Object(l.b)("dt",null,Object(l.b)("code",null,"pack")),Object(l.b)("dd",null,"True to return a packed string representing the data instead of a ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.Data",href:"#h2o_wave.core.Data"},"Data"))," placeholder.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Either a ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.Data",href:"#h2o_wave.core.Data"},"Data"))," placeholder or a packed string representing the data.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"expando_to_dict"},"expando_to_dict ",Object(l.b)("a",{name:"h2o_wave.core.expando_to_dict"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"expando_to_dict"),"(e:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"#h2o_wave.core.Expando"},"Expando"),") \u2011>\xa0dict"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Extract an expando's underlying dictionary. Any modifications to the dictionary also affect the original expando."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"e")),Object(l.b)("dd",null,"The expando instance.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The expando's dictionary.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"marshal"},"marshal ",Object(l.b)("a",{name:"h2o_wave.core.marshal"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"marshal"),"(d:\xa0Any) \u2011>\xa0str"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Marshal to JSON."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"d")),Object(l.b)("dd",null,"Any object or value.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A string containing the JSON-serialized form.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"pack"},"pack ",Object(l.b)("a",{name:"h2o_wave.core.pack"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"pack"),"(data:\xa0Any) \u2011>\xa0str"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Pack (compress) the provided value."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"data")),Object(l.b)("dd",null,"Any object or value.")),Object(l.b)("p",null,"The object or value compressed into a string.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"unmarshal"},"unmarshal ",Object(l.b)("a",{name:"h2o_wave.core.unmarshal"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"unmarshal"),"(s:\xa0str) \u2011>\xa0Any"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Unmarshal a JSON string."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"s")),Object(l.b)("dd",null,"A string containing JSON-serialized data.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The deserialized object or value.")))),Object(l.b)("h2",{id:"classes"},"Classes"),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"asyncpage"},"AsyncPage ",Object(l.b)("a",{name:"h2o_wave.core.AsyncPage"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"AsyncPage"),"(site:\xa0",Object(l.b)("a",{title:"h2o_wave.core.AsyncSite",href:"#h2o_wave.core.AsyncSite"},"AsyncSite"),", url:\xa0str)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Represents a reference to a remote Wave page. Similar to ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.Page",href:"#h2o_wave.core.Page"},"Page"))," except that this class exposes ",Object(l.b)("code",null,"async")," methods."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"site")),Object(l.b)("dd",null,"The parent site."),Object(l.b)("dt",null,Object(l.b)("code",null,"url")),Object(l.b)("dd",null,"The URL of this page."))),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:"load"},"load ",Object(l.b)("a",{name:"h2o_wave.core.AsyncPage.load"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"async def ",Object(l.b)("span",{class:"ident"},"load"),"(self) \u2011>\xa0dict"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Retrieve the serialized form of this page from the remote site."),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The serialized form of this page")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"push"},"push ",Object(l.b)("a",{name:"h2o_wave.core.AsyncPage.push"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"async def ",Object(l.b)("span",{class:"ident"},"push"),"(self)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"DEPRECATED: Use ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.AsyncPage.save",href:"#h2o_wave.core.AsyncPage.save"},"AsyncPage.save()"))," instead.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"save"},"save ",Object(l.b)("a",{name:"h2o_wave.core.AsyncPage.save"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"async def ",Object(l.b)("span",{class:"ident"},"save"),"(self)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Save the page. Sends all local changes made to this page to the remote site."))))),Object(l.b)("h4",{id:"ancestors"},"Ancestors"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("a",{title:"h2o_wave.core.PageBase",href:"#h2o_wave.core.PageBase"},"PageBase"))),Object(l.b)("h4",{id:"inherited-members"},"Inherited members"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("a",{title:"h2o_wave.core.PageBase",href:"#h2o_wave.core.PageBase"},"PageBase"),": - ",Object(l.b)("a",{title:"h2o_wave.core.PageBase.add",href:"#h2o_wave.core.PageBase.add"},"add"),"- ",Object(l.b)("a",{title:"h2o_wave.core.PageBase.drop",href:"#h2o_wave.core.PageBase.drop"},"drop"))))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"asyncsite"},"AsyncSite ",Object(l.b)("a",{name:"h2o_wave.core.AsyncSite"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"AsyncSite")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Represents a reference to the remote Wave site. Similar to ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.Site",href:"#h2o_wave.core.Site"},"Site"))," except that this class exposes ",Object(l.b)("code",null,"async")," methods.")),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:"download"},"download ",Object(l.b)("a",{name:"h2o_wave.core.AsyncSite.download"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"async def ",Object(l.b)("span",{class:"ident"},"download"),"(self, url:\xa0str, path:\xa0str) \u2011>\xa0str"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Download a file from the site."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"url")),Object(l.b)("dd",null,"The URL of the file."),Object(l.b)("dt",null,Object(l.b)("code",null,"path")),Object(l.b)("dd",null,"The local directory or file path to download to. If a directory is provided, the original name of the file is retained.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The path to the downloaded file.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"load-1"},"load ",Object(l.b)("a",{name:"h2o_wave.core.AsyncSite.load"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"async def ",Object(l.b)("span",{class:"ident"},"load"),"(self, url) \u2011>\xa0dict"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Retrieve data at the given URL, typically the serialized form of a page."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"url")),Object(l.b)("dd",null,"The URL to read.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The serialized page.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"unload"},"unload ",Object(l.b)("a",{name:"h2o_wave.core.AsyncSite.unload"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"async def ",Object(l.b)("span",{class:"ident"},"unload"),"(self, url:\xa0str)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Delete an uploaded file from the site."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"url")),Object(l.b)("dd",null,"The URL of the file to delete."))))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"upload"},"upload ",Object(l.b)("a",{name:"h2o_wave.core.AsyncSite.upload"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"async def ",Object(l.b)("span",{class:"ident"},"upload"),"(self, files:\xa0List[str]) \u2011>\xa0List[str]"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Upload local files to the site."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"files")),Object(l.b)("dd",null,"A list of file paths of the files to be uploaded..")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A list of remote URLs for the uploaded files, in order."))))))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"data-1"},"Data ",Object(l.b)("a",{name:"h2o_wave.core.Data"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"Data"),"(fields:\xa0Union[str,\xa0tuple,\xa0list], size:\xa0int\xa0=\xa00, data:\xa0Union[dict,\xa0list,\xa0NoneType]\xa0=\xa0None)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Represents a data placeholder. A data placeholder is used to allocate memory on the Wave server to store data."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"fields")),Object(l.b)("dd",null,"The names of the fields (columns names) in the data, either a list or tuple or string containing space-separated names."),Object(l.b)("dt",null,Object(l.b)("code",null,"size")),Object(l.b)("dd",null,"The number of rows to allocate memory for. Positive for fixed buffers, negative for circular buffers and zero for variable length buffers."),Object(l.b)("dt",null,Object(l.b)("code",null,"data")),Object(l.b)("dd",null,"Initial data. Must be either a key-row ",Object(l.b)("code",null,"dict")," for variable-length buffers OR a row ",Object(l.b)("code",null,"list")," for fixed-size and circular buffers."))),Object(l.b)("h4",{id:"methods-2"},"Methods"),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"dump"},"dump ",Object(l.b)("a",{name:"h2o_wave.core.Data.dump"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"dump"),"(self)"),Object(l.b)("div",{className:"api__description"})))))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"expando"},"Expando ",Object(l.b)("a",{name:"h2o_wave.core.Expando"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"Expando"),"(args:\xa0Union[Dict,\xa0NoneType]\xa0=\xa0None)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Represents an object whose members (attributes) can be dynamically added and removed at run time."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"args")),Object(l.b)("dd",null,"An optional ",Object(l.b)("code",null,"dict")," of attribute-value pairs to initialize the expando instance with."))))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"page"},"Page ",Object(l.b)("a",{name:"h2o_wave.core.Page"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"Page"),"(site:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Site",href:"#h2o_wave.core.Site"},"Site"),", url:\xa0str)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Represents a reference to a remote Wave page."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"site")),Object(l.b)("dd",null,"The parent site."),Object(l.b)("dt",null,Object(l.b)("code",null,"url")),Object(l.b)("dd",null,"The URL of this page."))),Object(l.b)("h4",{id:"methods-3"},"Methods"),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"load-2"},"load ",Object(l.b)("a",{name:"h2o_wave.core.Page.load"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"load"),"(self) \u2011>\xa0dict"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Retrieve the serialized form of this page from the remote site."),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The serialized form of this page")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"save-1"},"save ",Object(l.b)("a",{name:"h2o_wave.core.Page.save"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"save"),"(self)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Save the page. Sends all local changes made to this page to the remote site.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"sync"},"sync ",Object(l.b)("a",{name:"h2o_wave.core.Page.sync"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"sync"),"(self)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"DEPRECATED: Use ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.Page.save",href:"#h2o_wave.core.Page.save"},"Page.save()"))," instead."))))),Object(l.b)("h4",{id:"ancestors-1"},"Ancestors"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("a",{title:"h2o_wave.core.PageBase",href:"#h2o_wave.core.PageBase"},"PageBase"))),Object(l.b)("h4",{id:"inherited-members-1"},"Inherited members"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("a",{title:"h2o_wave.core.PageBase",href:"#h2o_wave.core.PageBase"},"PageBase"),": - ",Object(l.b)("a",{title:"h2o_wave.core.PageBase.add",href:"#h2o_wave.core.PageBase.add"},"add"),"- ",Object(l.b)("a",{title:"h2o_wave.core.PageBase.drop",href:"#h2o_wave.core.PageBase.drop"},"drop"))))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"pagebase"},"PageBase ",Object(l.b)("a",{name:"h2o_wave.core.PageBase"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"PageBase"),"(url:\xa0str)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Represents a remote page."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"url")),Object(l.b)("dd",null,"The URL of the remote page."))),Object(l.b)("h4",{id:"methods-4"},"Methods"),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"add"},"add ",Object(l.b)("a",{name:"h2o_wave.core.PageBase.add"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"add"),"(self, key:\xa0str, card:\xa0Any) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Ref",href:"#h2o_wave.core.Ref"},"Ref")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Add a card to this page."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"key")),Object(l.b)("dd",null,"The card's key. Must uniquely identify the card on the page. Overwrites any other card with the same key."),Object(l.b)("dt",null,Object(l.b)("code",null,"card")),Object(l.b)("dd",null,"A card. Use one of the ",Object(l.b)("code",null,"ui.*_card()")," to create cards.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A reference to the added card.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"drop"},"drop ",Object(l.b)("a",{name:"h2o_wave.core.PageBase.drop"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"drop"),"(self)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Delete this page from the remote site. Same as ",Object(l.b)("code",null,"del site[url]"),"."))))),Object(l.b)("h4",{id:"subclasses"},"Subclasses"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("a",{title:"h2o_wave.core.AsyncPage",href:"#h2o_wave.core.AsyncPage"},"AsyncPage")),Object(l.b)("li",{parentName:"ul"},Object(l.b)("a",{title:"h2o_wave.core.Page",href:"#h2o_wave.core.Page"},"Page"))))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"ref"},"Ref ",Object(l.b)("a",{name:"h2o_wave.core.Ref"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"Ref"),"(page:\xa0",Object(l.b)("a",{title:"h2o_wave.core.PageBase",href:"#h2o_wave.core.PageBase"},"PageBase"),", key:\xa0str)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Represents a local reference to an element on a ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.Page",href:"#h2o_wave.core.Page"},"Page")),". Any changes made to this local reference are tracked and sent to the remote Wave server when the page is saved.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"serviceerror"},"ServiceError ",Object(l.b)("a",{name:"h2o_wave.core.ServiceError"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"ServiceError"),"(*args, **kwargs)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Common base class for all non-exit exceptions.")),Object(l.b)("h4",{id:"ancestors-2"},"Ancestors"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},"builtins.Exception"),Object(l.b)("li",{parentName:"ul"},"builtins.BaseException")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"site"},"Site ",Object(l.b)("a",{name:"h2o_wave.core.Site"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"Site")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Represents a reference to the remote Wave site. A Site instance is used to obtain references to the site's pages.")),Object(l.b)("h4",{id:"methods-5"},"Methods"),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"download-1"},"download ",Object(l.b)("a",{name:"h2o_wave.core.Site.download"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"download"),"(self, url:\xa0str, path:\xa0str) \u2011>\xa0str"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Download a file from the site."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"url")),Object(l.b)("dd",null,"The URL of the file."),Object(l.b)("dt",null,Object(l.b)("code",null,"path")),Object(l.b)("dd",null,"The local directory or file path to download to. If a directory is provided, the original name of the file is retained.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The path to the downloaded file.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"load-3"},"load ",Object(l.b)("a",{name:"h2o_wave.core.Site.load"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"load"),"(self, url) \u2011>\xa0dict"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Retrieve data at the given URL, typically the serialized form of a page."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"url")),Object(l.b)("dd",null,"The URL to read.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The serialized page.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"unload-1"},"unload ",Object(l.b)("a",{name:"h2o_wave.core.Site.unload"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"unload"),"(self, url:\xa0str)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Delete an uploaded file from the site."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"url")),Object(l.b)("dd",null,"The URL of the file to delete."))))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"upload-1"},"upload ",Object(l.b)("a",{name:"h2o_wave.core.Site.upload"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"upload"),"(self, files:\xa0List[str]) \u2011>\xa0List[str]"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Upload local files to the site."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"files")),Object(l.b)("dd",null,"A list of file paths of the files to be uploaded..")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A list of remote URLs for the uploaded files, in order."))))))))}o.isMDXComponent=!0},292:function(e,a,t){"use strict";t.d(a,"a",(function(){return r})),t.d(a,"b",(function(){return p}));var c=t(0),b=t.n(c);function l(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function s(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);a&&(c=c.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),t.push.apply(t,c)}return t}function i(e){for(var a=1;a<arguments.length;a++){var t=null!=arguments[a]?arguments[a]:{};a%2?s(Object(t),!0).forEach((function(a){l(e,a,t[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):s(Object(t)).forEach((function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(t,a))}))}return e}function n(e,a){if(null==e)return{};var t,c,b=function(e,a){if(null==e)return{};var t,c,b={},l=Object.keys(e);for(c=0;c<l.length;c++)t=l[c],a.indexOf(t)>=0||(b[t]=e[t]);return b}(e,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(c=0;c<l.length;c++)t=l[c],a.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(b[t]=e[t])}return b}var d=b.a.createContext({}),o=function(e){var a=b.a.useContext(d),t=a;return e&&(t="function"==typeof e?e(a):i(i({},a),e)),t},r=function(e){var a=o(e.components);return b.a.createElement(d.Provider,{value:a},e.children)},O={inlineCode:"code",wrapper:function(e){var a=e.children;return b.a.createElement(b.a.Fragment,{},a)}},j=b.a.forwardRef((function(e,a){var t=e.components,c=e.mdxType,l=e.originalType,s=e.parentName,d=n(e,["components","mdxType","originalType","parentName"]),r=o(t),j=c,p=r["".concat(s,".").concat(j)]||r[j]||O[j]||l;return t?b.a.createElement(p,i(i({ref:a},d),{},{components:t})):b.a.createElement(p,i({ref:a},d))}));function p(e,a){var t=arguments,c=a&&a.mdxType;if("string"==typeof e||c){var l=t.length,s=new Array(l);s[0]=j;var i={};for(var n in a)hasOwnProperty.call(a,n)&&(i[n]=a[n]);i.originalType=e,i.mdxType="string"==typeof e?e:c,s[1]=i;for(var d=2;d<l;d++)s[d]=t[d];return b.a.createElement.apply(null,s)}return b.a.createElement.apply(null,t)}j.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/36fe3260.fa6cd51c.js b/docs/36fe3260.fa6cd51c.js
deleted file mode 100644
index 40dd8dc71d..0000000000
--- a/docs/36fe3260.fa6cd51c.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[54],{107:function(e,a,t){"use strict";t.r(a),t.d(a,"frontMatter",(function(){return s})),t.d(a,"metadata",(function(){return i})),t.d(a,"rightToc",(function(){return n})),t.d(a,"default",(function(){return o}));var c=t(2),b=t(6),l=(t(0),t(290)),s={title:"Module h2o_wave.core"},i={unversionedId:"api/core",id:"api/core",isDocsHomePage:!1,title:"Module h2o_wave.core",description:"Functions",source:"@site/docs/api/core.md",slug:"/api/core",permalink:"/wave/docs/api/core",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/api/core.md",version:"current",sidebar:"someSidebar",previous:{title:"Package h2o_wave",permalink:"/wave/docs/api/index"},next:{title:"Module h2o_wave.ui",permalink:"/wave/docs/api/ui"}},n=[{value:"Functions",id:"functions",children:[{value:'clone_expando <a name="h2o_wave.core.clone_expando"/>',id:"clone_expando",children:[]},{value:'configure <a name="h2o_wave.core.configure"/>',id:"configure",children:[]},{value:'copy_expando <a name="h2o_wave.core.copy_expando"/>',id:"copy_expando",children:[]},{value:'data <a name="h2o_wave.core.data"/>',id:"data",children:[]},{value:'expando_to_dict <a name="h2o_wave.core.expando_to_dict"/>',id:"expando_to_dict",children:[]},{value:'marshal <a name="h2o_wave.core.marshal"/>',id:"marshal",children:[]},{value:'pack <a name="h2o_wave.core.pack"/>',id:"pack",children:[]},{value:'unmarshal <a name="h2o_wave.core.unmarshal"/>',id:"unmarshal",children:[]}]},{value:"Classes",id:"classes",children:[{value:'AsyncPage <a name="h2o_wave.core.AsyncPage"/>',id:"asyncpage",children:[]},{value:'AsyncSite <a name="h2o_wave.core.AsyncSite"/>',id:"asyncsite",children:[]},{value:'Data <a name="h2o_wave.core.Data"/>',id:"data-1",children:[]},{value:'Expando <a name="h2o_wave.core.Expando"/>',id:"expando",children:[]},{value:'Page <a name="h2o_wave.core.Page"/>',id:"page",children:[]},{value:'PageBase <a name="h2o_wave.core.PageBase"/>',id:"pagebase",children:[]},{value:'Ref <a name="h2o_wave.core.Ref"/>',id:"ref",children:[]},{value:'ServiceError <a name="h2o_wave.core.ServiceError"/>',id:"serviceerror",children:[]},{value:'Site <a name="h2o_wave.core.Site"/>',id:"site",children:[]}]}],d={rightToc:n};function o(e){var a=e.components,t=Object(b.a)(e,["components"]);return Object(l.b)("wrapper",Object(c.a)({},d,t,{components:a,mdxType:"MDXLayout"}),Object(l.b)("h2",{id:"functions"},"Functions"),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"clone_expando"},"clone_expando ",Object(l.b)("a",{name:"h2o_wave.core.clone_expando"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"clone_expando"),"(source:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"#h2o_wave.core.Expando"},"Expando"),", exclude_keys:\xa0Union[list,\xa0tuple,\xa0NoneType]\xa0=\xa0None, include_keys:\xa0Union[list,\xa0tuple,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Clone an expando instance. Creates a shallow clone."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"source")),Object(l.b)("dd",null,"The expando to clone."),Object(l.b)("dt",null,Object(l.b)("code",null,"exclude_keys")),Object(l.b)("dd",null,"Keys to exclude while cloning."),Object(l.b)("dt",null,Object(l.b)("code",null,"include_keys")),Object(l.b)("dd",null,"Keys to include while cloning.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The expando clone.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"configure"},"configure ",Object(l.b)("a",{name:"h2o_wave.core.configure"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"configure"),"(internal_address:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, external_address:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, hub_address:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, hub_access_key_id:\xa0Union[str,\xa0NoneType]\xa0=\xa0None, hub_access_key_secret:\xa0Union[str,\xa0NoneType]\xa0=\xa0None)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Configure networking addresses/credentials before use."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"internal_address")),Object(l.b)("dd",null,"The local host:port to listen on."),Object(l.b)("dt",null,Object(l.b)("code",null,"external_address")),Object(l.b)("dd",null,"The remote host:port of this server."),Object(l.b)("dt",null,Object(l.b)("code",null,"hub_address")),Object(l.b)("dd",null,"The host:port of the Q server."),Object(l.b)("dt",null,Object(l.b)("code",null,"hub_access_key_id")),Object(l.b)("dd",null,"The access key ID to use while connecting to the Q server."),Object(l.b)("dt",null,Object(l.b)("code",null,"hub_access_key_secret")),Object(l.b)("dd",null,"The access key secret to use while connecting to the Q server."))))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"copy_expando"},"copy_expando ",Object(l.b)("a",{name:"h2o_wave.core.copy_expando"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"copy_expando"),"(source:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"#h2o_wave.core.Expando"},"Expando"),", target:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"#h2o_wave.core.Expando"},"Expando"),", exclude_keys:\xa0Union[list,\xa0tuple,\xa0NoneType]\xa0=\xa0None, include_keys:\xa0Union[list,\xa0tuple,\xa0NoneType]\xa0=\xa0None) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"#h2o_wave.core.Expando"},"Expando")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Copy all entries from the source expando instance to the target expando instance."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"source")),Object(l.b)("dd",null,"The expando to copy from."),Object(l.b)("dt",null,Object(l.b)("code",null,"target")),Object(l.b)("dd",null,"The expando to copy to."),Object(l.b)("dt",null,Object(l.b)("code",null,"exclude_keys")),Object(l.b)("dd",null,"Keys to exclude while copying."),Object(l.b)("dt",null,Object(l.b)("code",null,"include_keys")),Object(l.b)("dd",null,"Keys to include while copying.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The target expando.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"data"},"data ",Object(l.b)("a",{name:"h2o_wave.core.data"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"data"),"(fields:\xa0Union[str,\xa0tuple,\xa0list], size:\xa0int\xa0=\xa00, rows:\xa0Union[dict,\xa0list,\xa0NoneType]\xa0=\xa0None, columns:\xa0Union[dict,\xa0list,\xa0NoneType]\xa0=\xa0None, pack=False) \u2011>\xa0Union[",Object(l.b)("a",{title:"h2o_wave.core.Data",href:"#h2o_wave.core.Data"},"Data"),",\xa0str]"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Create a ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.Data",href:"#h2o_wave.core.Data"},"Data"))," instance for associating data with cards."),Object(l.b)("p",null,Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.data",href:"#h2o_wave.core.data"},"data()"),"(fields, size)")," creates a placeholder for data and allocates memory on the Q server."),Object(l.b)("p",null,Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.data",href:"#h2o_wave.core.data"},"data()"),"(fields, size, rows)")," creates a placeholder and initializes it with the provided rows."),Object(l.b)("p",null,"If ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.pack",href:"#h2o_wave.core.pack"},"pack()"))," is ",Object(l.b)("code",null,"True"),", the ",Object(l.b)("code",null,"size")," parameter is ignored, and the function returns a packed string representing the data."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"fields")),Object(l.b)("dd",null,"The names of the fields (columns names) in the data, either a list or tuple or string containing space-separated names."),Object(l.b)("dt",null,Object(l.b)("code",null,"size")),Object(l.b)("dd",null,"The number of rows to allocate memory for. Positive for fixed buffers, negative for circular buffers and zero for variable length buffers."),Object(l.b)("dt",null,Object(l.b)("code",null,"rows")),Object(l.b)("dd",null,"The rows in this data."),Object(l.b)("dt",null,Object(l.b)("code",null,"columns")),Object(l.b)("dd",null,"The columns in this data."),Object(l.b)("dt",null,Object(l.b)("code",null,"pack")),Object(l.b)("dd",null,"True to return a packed string representing the data instead of a ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.Data",href:"#h2o_wave.core.Data"},"Data"))," placeholder.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"Either a ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.Data",href:"#h2o_wave.core.Data"},"Data"))," placeholder or a packed string representing the data.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"expando_to_dict"},"expando_to_dict ",Object(l.b)("a",{name:"h2o_wave.core.expando_to_dict"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"expando_to_dict"),"(e:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Expando",href:"#h2o_wave.core.Expando"},"Expando"),") \u2011>\xa0dict"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Extract an expando's underlying dictionary. Any modifications to the dictionary also affect the original expando."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"e")),Object(l.b)("dd",null,"The expando instance.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The expando's dictionary.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"marshal"},"marshal ",Object(l.b)("a",{name:"h2o_wave.core.marshal"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"marshal"),"(d:\xa0Any) \u2011>\xa0str"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Marshal to JSON."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"d")),Object(l.b)("dd",null,"Any object or value.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A string containing the JSON-serialized form.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"pack"},"pack ",Object(l.b)("a",{name:"h2o_wave.core.pack"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"pack"),"(data:\xa0Any) \u2011>\xa0str"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Pack (compress) the provided value."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"data")),Object(l.b)("dd",null,"Any object or value.")),Object(l.b)("p",null,"The object or value compressed into a string.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"unmarshal"},"unmarshal ",Object(l.b)("a",{name:"h2o_wave.core.unmarshal"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"unmarshal"),"(s:\xa0str) \u2011>\xa0Any"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Unmarshal a JSON string."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"s")),Object(l.b)("dd",null,"A string containing JSON-serialized data.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The deserialized object or value.")))),Object(l.b)("h2",{id:"classes"},"Classes"),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"asyncpage"},"AsyncPage ",Object(l.b)("a",{name:"h2o_wave.core.AsyncPage"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"AsyncPage"),"(site:\xa0",Object(l.b)("a",{title:"h2o_wave.core.AsyncSite",href:"#h2o_wave.core.AsyncSite"},"AsyncSite"),", url:\xa0str)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Represents a reference to a remote Q page. Similar to ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.Page",href:"#h2o_wave.core.Page"},"Page"))," except that this class exposes ",Object(l.b)("code",null,"async")," methods."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"site")),Object(l.b)("dd",null,"The parent site."),Object(l.b)("dt",null,Object(l.b)("code",null,"url")),Object(l.b)("dd",null,"The URL of this page."))),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:"load"},"load ",Object(l.b)("a",{name:"h2o_wave.core.AsyncPage.load"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"async def ",Object(l.b)("span",{class:"ident"},"load"),"(self) \u2011>\xa0dict"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Retrieve the serialized form of this page from the remote site."),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The serialized form of this page")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"poll"},"poll ",Object(l.b)("a",{name:"h2o_wave.core.AsyncPage.poll"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"async def ",Object(l.b)("span",{class:"ident"},"poll"),"(self) \u2011>\xa0Q"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"EXPERIMENTAL. DO NOT USE.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"pull"},"pull ",Object(l.b)("a",{name:"h2o_wave.core.AsyncPage.pull"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"async def ",Object(l.b)("span",{class:"ident"},"pull"),"(self) \u2011>\xa0Q"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"EXPERIMENTAL. DO NOT USE.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"push"},"push ",Object(l.b)("a",{name:"h2o_wave.core.AsyncPage.push"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"async def ",Object(l.b)("span",{class:"ident"},"push"),"(self)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"DEPRECATED: Use ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.AsyncPage.save",href:"#h2o_wave.core.AsyncPage.save"},"AsyncPage.save()"))," instead.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"save"},"save ",Object(l.b)("a",{name:"h2o_wave.core.AsyncPage.save"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"async def ",Object(l.b)("span",{class:"ident"},"save"),"(self)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Save the page. Sends all local changes made to this page to the remote site."))))),Object(l.b)("h4",{id:"ancestors"},"Ancestors"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("a",{title:"h2o_wave.core.PageBase",href:"#h2o_wave.core.PageBase"},"PageBase"))),Object(l.b)("h4",{id:"inherited-members"},"Inherited members"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("a",{title:"h2o_wave.core.PageBase",href:"#h2o_wave.core.PageBase"},"PageBase"),": - ",Object(l.b)("a",{title:"h2o_wave.core.PageBase.add",href:"#h2o_wave.core.PageBase.add"},"add"),"- ",Object(l.b)("a",{title:"h2o_wave.core.PageBase.drop",href:"#h2o_wave.core.PageBase.drop"},"drop"))))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"asyncsite"},"AsyncSite ",Object(l.b)("a",{name:"h2o_wave.core.AsyncSite"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"AsyncSite"),"(ws:\xa0websockets.server.WebSocketServerProtocol)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Represents a reference to the remote Q site. Similar to ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.Site",href:"#h2o_wave.core.Site"},"Site"))," except that this class exposes ",Object(l.b)("code",null,"async")," methods.")),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:"download"},"download ",Object(l.b)("a",{name:"h2o_wave.core.AsyncSite.download"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"async def ",Object(l.b)("span",{class:"ident"},"download"),"(self, url:\xa0str, path:\xa0str) \u2011>\xa0str"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Download a file from the site."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"url")),Object(l.b)("dd",null,"The URL of the file."),Object(l.b)("dt",null,Object(l.b)("code",null,"path")),Object(l.b)("dd",null,"The local directory or file path to download to. If a directory is provided, the original name of the file is retained.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The path to the downloaded file.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"load-1"},"load ",Object(l.b)("a",{name:"h2o_wave.core.AsyncSite.load"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"async def ",Object(l.b)("span",{class:"ident"},"load"),"(self, url) \u2011>\xa0dict"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Retrieve data at the given URL, typically the serialized form of a page."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"url")),Object(l.b)("dd",null,"The URL to read.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The serialized page.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"unload"},"unload ",Object(l.b)("a",{name:"h2o_wave.core.AsyncSite.unload"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"async def ",Object(l.b)("span",{class:"ident"},"unload"),"(self, url:\xa0str)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Delete an uploaded file from the site."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"url")),Object(l.b)("dd",null,"The URL of the file to delete."))))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"upload"},"upload ",Object(l.b)("a",{name:"h2o_wave.core.AsyncSite.upload"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"async def ",Object(l.b)("span",{class:"ident"},"upload"),"(self, files:\xa0List[str]) \u2011>\xa0List[str]"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Upload local files to the site."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"files")),Object(l.b)("dd",null,"A list of file paths of the files to be uploaded..")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A list of remote URLs for the uploaded files, in order."))))))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"data-1"},"Data ",Object(l.b)("a",{name:"h2o_wave.core.Data"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"Data"),"(fields:\xa0Union[str,\xa0tuple,\xa0list], size:\xa0int\xa0=\xa00, data:\xa0Union[dict,\xa0list,\xa0NoneType]\xa0=\xa0None)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Represents a data placeholder. A data placeholder is used to allocate memory on the Q server to store data."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"fields")),Object(l.b)("dd",null,"The names of the fields (columns names) in the data, either a list or tuple or string containing space-separated names."),Object(l.b)("dt",null,Object(l.b)("code",null,"size")),Object(l.b)("dd",null,"The number of rows to allocate memory for. Positive for fixed buffers, negative for circular buffers and zero for variable length buffers."),Object(l.b)("dt",null,Object(l.b)("code",null,"data")),Object(l.b)("dd",null,"Initial data. Must be either a key-row ",Object(l.b)("code",null,"dict")," for variable-length buffers OR a row ",Object(l.b)("code",null,"list")," for fixed-size and circular buffers."))),Object(l.b)("h4",{id:"methods-2"},"Methods"),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"dump"},"dump ",Object(l.b)("a",{name:"h2o_wave.core.Data.dump"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"dump"),"(self)"),Object(l.b)("div",{className:"api__description"})))))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"expando"},"Expando ",Object(l.b)("a",{name:"h2o_wave.core.Expando"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"Expando"),"(args:\xa0Union[Dict,\xa0NoneType]\xa0=\xa0None)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Represents an object whose members (attributes) can be dynamically added and removed at run time."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"args")),Object(l.b)("dd",null,"An optional ",Object(l.b)("code",null,"dict")," of attribute-value pairs to initialize the expando instance with."))))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"page"},"Page ",Object(l.b)("a",{name:"h2o_wave.core.Page"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"Page"),"(site:\xa0",Object(l.b)("a",{title:"h2o_wave.core.Site",href:"#h2o_wave.core.Site"},"Site"),", url:\xa0str)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Represents a reference to a remote Q page."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"site")),Object(l.b)("dd",null,"The parent site."),Object(l.b)("dt",null,Object(l.b)("code",null,"url")),Object(l.b)("dd",null,"The URL of this page."))),Object(l.b)("h4",{id:"methods-3"},"Methods"),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"load-2"},"load ",Object(l.b)("a",{name:"h2o_wave.core.Page.load"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"load"),"(self) \u2011>\xa0dict"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Retrieve the serialized form of this page from the remote site."),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The serialized form of this page")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"save-1"},"save ",Object(l.b)("a",{name:"h2o_wave.core.Page.save"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"save"),"(self)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Save the page. Sends all local changes made to this page to the remote site.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"sync"},"sync ",Object(l.b)("a",{name:"h2o_wave.core.Page.sync"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"sync"),"(self)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"DEPRECATED: Use ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.Page.save",href:"#h2o_wave.core.Page.save"},"Page.save()"))," instead."))))),Object(l.b)("h4",{id:"ancestors-1"},"Ancestors"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("a",{title:"h2o_wave.core.PageBase",href:"#h2o_wave.core.PageBase"},"PageBase"))),Object(l.b)("h4",{id:"inherited-members-1"},"Inherited members"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("a",{title:"h2o_wave.core.PageBase",href:"#h2o_wave.core.PageBase"},"PageBase"),": - ",Object(l.b)("a",{title:"h2o_wave.core.PageBase.add",href:"#h2o_wave.core.PageBase.add"},"add"),"- ",Object(l.b)("a",{title:"h2o_wave.core.PageBase.drop",href:"#h2o_wave.core.PageBase.drop"},"drop"))))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"pagebase"},"PageBase ",Object(l.b)("a",{name:"h2o_wave.core.PageBase"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"PageBase"),"(url:\xa0str)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Represents a remote page."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"url")),Object(l.b)("dd",null,"The URL of the remote page."))),Object(l.b)("h4",{id:"methods-4"},"Methods"),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"add"},"add ",Object(l.b)("a",{name:"h2o_wave.core.PageBase.add"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"add"),"(self, key:\xa0str, card:\xa0Any) \u2011>\xa0",Object(l.b)("a",{title:"h2o_wave.core.Ref",href:"#h2o_wave.core.Ref"},"Ref")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Add a card to this page."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"key")),Object(l.b)("dd",null,"The card's key. Must uniquely identify the card on the page. Overwrites any other card with the same key."),Object(l.b)("dt",null,Object(l.b)("code",null,"card")),Object(l.b)("dd",null,"A card. Use one of the ",Object(l.b)("code",null,"ui.*_card()")," to create cards.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A reference to the added card.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"drop"},"drop ",Object(l.b)("a",{name:"h2o_wave.core.PageBase.drop"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"drop"),"(self)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Delete this page from the remote site. Same as ",Object(l.b)("code",null,"del site[url]"),"."))))),Object(l.b)("h4",{id:"subclasses"},"Subclasses"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},Object(l.b)("a",{title:"h2o_wave.core.AsyncPage",href:"#h2o_wave.core.AsyncPage"},"AsyncPage")),Object(l.b)("li",{parentName:"ul"},Object(l.b)("a",{title:"h2o_wave.core.Page",href:"#h2o_wave.core.Page"},"Page"))))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"ref"},"Ref ",Object(l.b)("a",{name:"h2o_wave.core.Ref"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"Ref"),"(page:\xa0",Object(l.b)("a",{title:"h2o_wave.core.PageBase",href:"#h2o_wave.core.PageBase"},"PageBase"),", key:\xa0str)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Represents a local reference to an element on a ",Object(l.b)("code",null,Object(l.b)("a",{title:"h2o_wave.core.Page",href:"#h2o_wave.core.Page"},"Page")),". Any changes made to this local reference are tracked and sent to the remote Q server when the page is saved.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"serviceerror"},"ServiceError ",Object(l.b)("a",{name:"h2o_wave.core.ServiceError"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"ServiceError"),"(*args, **kwargs)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Common base class for all non-exit exceptions.")),Object(l.b)("h4",{id:"ancestors-2"},"Ancestors"),Object(l.b)("ul",null,Object(l.b)("li",{parentName:"ul"},"builtins.Exception"),Object(l.b)("li",{parentName:"ul"},"builtins.BaseException")))),Object(l.b)("div",{className:"api"},Object(l.b)("h3",{id:"site"},"Site ",Object(l.b)("a",{name:"h2o_wave.core.Site"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"class ",Object(l.b)("span",{class:"ident"},"Site")),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Represents a reference to the remote Q site. A Site instance is used to obtain references to the site's pages.")),Object(l.b)("h4",{id:"methods-5"},"Methods"),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"download-1"},"download ",Object(l.b)("a",{name:"h2o_wave.core.Site.download"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"download"),"(self, url:\xa0str, path:\xa0str) \u2011>\xa0str"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Download a file from the site."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"url")),Object(l.b)("dd",null,"The URL of the file."),Object(l.b)("dt",null,Object(l.b)("code",null,"path")),Object(l.b)("dd",null,"The local directory or file path to download to. If a directory is provided, the original name of the file is retained.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The path to the downloaded file.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"load-3"},"load ",Object(l.b)("a",{name:"h2o_wave.core.Site.load"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"load"),"(self, url) \u2011>\xa0dict"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Retrieve data at the given URL, typically the serialized form of a page."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"url")),Object(l.b)("dd",null,"The URL to read.")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"The serialized page.")))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"unload-1"},"unload ",Object(l.b)("a",{name:"h2o_wave.core.Site.unload"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"unload"),"(self, url:\xa0str)"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Delete an uploaded file from the site."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"url")),Object(l.b)("dd",null,"The URL of the file to delete."))))),Object(l.b)("div",{className:"api"},Object(l.b)("h4",{id:"upload-1"},"upload ",Object(l.b)("a",{name:"h2o_wave.core.Site.upload"})),Object(l.b)("div",{className:"api__body"},Object(l.b)("div",{className:"api__signature"},"def ",Object(l.b)("span",{class:"ident"},"upload"),"(self, files:\xa0List[str]) \u2011>\xa0List[str]"),Object(l.b)("div",{className:"api__description"},Object(l.b)("p",null,"Upload local files to the site."),Object(l.b)("h5",{id:"args"},"Args"),Object(l.b)("dl",null,Object(l.b)("dt",null,Object(l.b)("code",null,"files")),Object(l.b)("dd",null,"A list of file paths of the files to be uploaded..")),Object(l.b)("h5",{id:"returns"},"Returns"),Object(l.b)("p",null,"A list of remote URLs for the uploaded files, in order."))))))))}o.isMDXComponent=!0},290:function(e,a,t){"use strict";t.d(a,"a",(function(){return r})),t.d(a,"b",(function(){return p}));var c=t(0),b=t.n(c);function l(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function s(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);a&&(c=c.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),t.push.apply(t,c)}return t}function i(e){for(var a=1;a<arguments.length;a++){var t=null!=arguments[a]?arguments[a]:{};a%2?s(Object(t),!0).forEach((function(a){l(e,a,t[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):s(Object(t)).forEach((function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(t,a))}))}return e}function n(e,a){if(null==e)return{};var t,c,b=function(e,a){if(null==e)return{};var t,c,b={},l=Object.keys(e);for(c=0;c<l.length;c++)t=l[c],a.indexOf(t)>=0||(b[t]=e[t]);return b}(e,a);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(c=0;c<l.length;c++)t=l[c],a.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(b[t]=e[t])}return b}var d=b.a.createContext({}),o=function(e){var a=b.a.useContext(d),t=a;return e&&(t="function"==typeof e?e(a):i(i({},a),e)),t},r=function(e){var a=o(e.components);return b.a.createElement(d.Provider,{value:a},e.children)},O={inlineCode:"code",wrapper:function(e){var a=e.children;return b.a.createElement(b.a.Fragment,{},a)}},j=b.a.forwardRef((function(e,a){var t=e.components,c=e.mdxType,l=e.originalType,s=e.parentName,d=n(e,["components","mdxType","originalType","parentName"]),r=o(t),j=c,p=r["".concat(s,".").concat(j)]||r[j]||O[j]||l;return t?b.a.createElement(p,i(i({ref:a},d),{},{components:t})):b.a.createElement(p,i({ref:a},d))}));function p(e,a){var t=arguments,c=a&&a.mdxType;if("string"==typeof e||c){var l=t.length,s=new Array(l);s[0]=j;var i={};for(var n in a)hasOwnProperty.call(a,n)&&(i[n]=a[n]);i.originalType=e,i.mdxType="string"==typeof e?e:c,s[1]=i;for(var d=2;d<l;d++)s[d]=t[d];return b.a.createElement.apply(null,s)}return b.a.createElement.apply(null,t)}j.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/3713dbfc.2210688a.js b/docs/3713dbfc.2210688a.js
deleted file mode 100644
index beefbcbb2f..0000000000
--- a/docs/3713dbfc.2210688a.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[55],{108:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return s})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return l}));var r=n(2),a=n(6),o=(n(0),n(290)),i={title:"Browser Testing"},s={unversionedId:"browser-testing",id:"browser-testing",isDocsHomePage:!1,title:"Browser Testing",description:"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.",source:"@site/docs/browser-testing.md",slug:"/browser-testing",permalink:"/wave/docs/browser-testing",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/browser-testing.md",version:"current",sidebar:"someSidebar",previous:{title:"Development",permalink:"/wave/docs/development"},next:{title:"Configuration",permalink:"/wave/docs/configuration"}},c=[{value:"Installation",id:"installation",children:[]},{value:"Writing a test",id:"writing-a-test",children:[]},{value:"Running your test",id:"running-your-test",children:[]}],p={rightToc:c};function l(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Wave supports authoring functional tests in Python for the ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://www.cypress.io/"}),"Cypress")," test framework. This feature lets you automate browser-based point-and-click tests for your app."),Object(o.b)("h2",{id:"installation"},"Installation"),Object(o.b)("h4",{id:"step-1-install-nodejs"},"Step 1: Install Node.js"),Object(o.b)("p",null,"Install a recent version of ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://nodejs.org/en/"}),"Node.js"),"."),Object(o.b)("h4",{id:"step-2-set-up-cypress"},"Step 2: Set up Cypress"),Object(o.b)("p",null,"Using your terminal, go to your Wave installation's ",Object(o.b)("inlineCode",{parentName:"p"},"test")," directory and install Cypress"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{}),"$ cd path/to/wave\n$ cd test\n$ npm install\n")),Object(o.b)("h2",{id:"writing-a-test"},"Writing a test"),Object(o.b)("p",null,"See the ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"#wizard"}),"Wizard")," example to understand how to author tests for your interactive app. Specifically, note how the ",Object(o.b)("inlineCode",{parentName:"p"},"@cypress")," attribute is used. Refer to the ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://docs.cypress.io/api/api/table-of-contents.html"}),"Cypress API")," to learn how to author assertions."),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import cypress\n\n@cypress('Walk through the wizard')\ndef test_wizard(cy):\n    cy.visit('/demo')\n    cy.locate('step1').click()\n    cy.locate('text').should('contain.text', 'What is your name?')\n    cy.locate('nickname').clear().type('Fred')\n    cy.locate('step2').click()\n    cy.locate('text').should('contain.text', 'Hi Fred! How do you feel right now?')\n    cy.locate('feeling').clear().type('quirky')\n    cy.locate('step3').click()\n    cy.locate('text').should('contain.text', 'What a coincidence, Fred! I feel quirky too!')\n\n")),Object(o.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(o.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(r.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(r.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(o.b)("path",Object(r.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(o.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"To escape Cypress function names that overlap with Python's reserved keywords, prefix the name with an underscore ",Object(o.b)("inlineCode",{parentName:"p"},"_"),". For example, use ",Object(o.b)("inlineCode",{parentName:"p"},"cy._as()")," instead of ",Object(o.b)("inlineCode",{parentName:"p"},"cy.as()"),"."))),Object(o.b)("h2",{id:"running-your-test"},"Running your test"),Object(o.b)("h4",{id:"step-1-start-the-cypress-test-runner"},"Step 1: Start the Cypress test runner"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{}),"$ cd path/to/wave\n$ cd test\n$ ./node_modules/.bin/cypress open\n")),Object(o.b)("h4",{id:"step-2-start-the-wave-server-as-usual"},"Step 2: Start the Wave server as usual"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{}),"$ ./wave\n")),Object(o.b)("h4",{id:"step-3-translate-your-python-tests-to-javascript"},"Step 3: Translate your Python tests to Javascript"),Object(o.b)("p",null,"To translate your Python tests to Javascript, execute the Python module or file containing your tests like this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{}),"$ CYPRESS_INTEGRATION_TEST_DIR=path/to/wave/test/cypress/integration ./venv/bin/python examples/wizard.py\n")),Object(o.b)("p",null,"The ",Object(o.b)("inlineCode",{parentName:"p"},"CYPRESS_INTEGRATION_TEST_DIR")," environment variable indicates where the Wave SDK should write translated files to. This must be set to the ",Object(o.b)("inlineCode",{parentName:"p"},"cypress/integration")," directory."),Object(o.b)("p",null,"Alternatively, you can set the ",Object(o.b)("inlineCode",{parentName:"p"},"CYPRESS_INTEGRATION_TEST_DIR")," environment variable in your shell (or IDE) to simplify running your test file:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{}),"$ export CYPRESS_INTEGRATION_TEST_DIR=path/to/wave/test/cypress/integration\n$ ./venv/bin/python examples/wizard.py\n")),Object(o.b)("h4",{id:"step-4-run-your-tests"},"Step 4: Run your tests"),Object(o.b)("p",null,"At this point, you should find all your tests displayed in the Cypress UI. Simply click on a test to run it. Happy testing!"))}l.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return b})),n.d(t,"b",(function(){return y}));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 s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),l=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},b=function(e){var t=l(e.components);return a.a.createElement(p.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,p=c(e,["components","mdxType","originalType","parentName"]),b=l(n),d=r,y=b["".concat(i,".").concat(d)]||b[d]||u[d]||o;return n?a.a.createElement(y,s(s({ref:t},p),{},{components:n})):a.a.createElement(y,s({ref:t},p))}));function y(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 s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:r,i[1]=s;for(var p=2;p<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/3713dbfc.7d7ab8fd.js b/docs/3713dbfc.7d7ab8fd.js
new file mode 100644
index 0000000000..9aa2c7c51f
--- /dev/null
+++ b/docs/3713dbfc.7d7ab8fd.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[58],{111:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return s})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return l}));var r=n(2),a=n(6),o=(n(0),n(292)),i={title:"Browser Testing"},s={unversionedId:"browser-testing",id:"browser-testing",isDocsHomePage:!1,title:"Browser Testing",description:"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.",source:"@site/docs/browser-testing.md",slug:"/browser-testing",permalink:"/wave/docs/browser-testing",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/browser-testing.md",version:"current",sidebar:"someSidebar",previous:{title:"Development",permalink:"/wave/docs/development"},next:{title:"Configuration",permalink:"/wave/docs/configuration"}},c=[{value:"Installation",id:"installation",children:[]},{value:"Writing a test",id:"writing-a-test",children:[]},{value:"Running your test",id:"running-your-test",children:[]}],p={rightToc:c};function l(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Wave supports authoring functional tests in Python for the ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://www.cypress.io/"}),"Cypress")," test framework. This feature lets you automate browser-based point-and-click tests for your app."),Object(o.b)("h2",{id:"installation"},"Installation"),Object(o.b)("h4",{id:"step-1-install-nodejs"},"Step 1: Install Node.js"),Object(o.b)("p",null,"Install a recent version of ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://nodejs.org/en/"}),"Node.js"),"."),Object(o.b)("h4",{id:"step-2-set-up-cypress"},"Step 2: Set up Cypress"),Object(o.b)("p",null,"Using your terminal, go to your Wave installation's ",Object(o.b)("inlineCode",{parentName:"p"},"test")," directory and install Cypress"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{}),"$ cd $HOME/wave/test\n$ npm install\n")),Object(o.b)("h2",{id:"writing-a-test"},"Writing a test"),Object(o.b)("p",null,"See the ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"#wizard"}),"Wizard")," example to understand how to author tests for your interactive app. Specifically, note how the ",Object(o.b)("inlineCode",{parentName:"p"},"@cypress")," attribute is used. Refer to the ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://docs.cypress.io/api/api/table-of-contents.html"}),"Cypress API")," to learn how to author assertions."),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import cypress\n\n@cypress('Walk through the wizard')\ndef test_wizard(cy):\n    cy.visit('/demo')\n    cy.locate('step1').click()\n    cy.locate('text').should('contain.text', 'What is your name?')\n    cy.locate('nickname').clear().type('Fred')\n    cy.locate('step2').click()\n    cy.locate('text').should('contain.text', 'Hi Fred! How do you feel right now?')\n    cy.locate('feeling').clear().type('quirky')\n    cy.locate('step3').click()\n    cy.locate('text').should('contain.text', 'What a coincidence, Fred! I feel quirky too!')\n\n")),Object(o.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(o.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(r.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(r.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(o.b)("path",Object(r.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(o.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"To escape Cypress function names that overlap with Python's reserved keywords, prefix the name with an underscore ",Object(o.b)("inlineCode",{parentName:"p"},"_"),". For example, use ",Object(o.b)("inlineCode",{parentName:"p"},"cy._as()")," instead of ",Object(o.b)("inlineCode",{parentName:"p"},"cy.as()"),"."))),Object(o.b)("h2",{id:"running-your-test"},"Running your test"),Object(o.b)("h4",{id:"step-1-start-the-cypress-test-runner"},"Step 1: Start the Cypress test runner"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{}),"$ cd $HOME/wave/test\n$ ./node_modules/.bin/cypress open\n")),Object(o.b)("h4",{id:"step-2-start-the-wave-server-as-usual"},"Step 2: Start the Wave server as usual"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{}),"$ ./waved\n")),Object(o.b)("h4",{id:"step-3-translate-your-python-tests-to-javascript"},"Step 3: Translate your Python tests to Javascript"),Object(o.b)("p",null,"To translate your Python tests to Javascript, execute the Python module or file containing your tests like this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{}),"$ CYPRESS_INTEGRATION_TEST_DIR=$HOME/wave/test/cypress/integration ./venv/bin/python examples/wizard.py\n")),Object(o.b)("p",null,"The ",Object(o.b)("inlineCode",{parentName:"p"},"CYPRESS_INTEGRATION_TEST_DIR")," environment variable indicates where the Wave SDK should write translated files to. This must be set to the ",Object(o.b)("inlineCode",{parentName:"p"},"cypress/integration")," directory."),Object(o.b)("p",null,"Alternatively, you can set the ",Object(o.b)("inlineCode",{parentName:"p"},"CYPRESS_INTEGRATION_TEST_DIR")," environment variable in your shell (or IDE) to simplify running your test file:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{}),"$ export CYPRESS_INTEGRATION_TEST_DIR=$HOME/wave/test/cypress/integration\n$ ./venv/bin/python examples/wizard.py\n")),Object(o.b)("h4",{id:"step-4-run-your-tests"},"Step 4: Run your tests"),Object(o.b)("p",null,"At this point, you should find all your tests displayed in the Cypress UI. Simply click on a test to run it. Happy testing!"))}l.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return b})),n.d(t,"b",(function(){return y}));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 s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),l=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},b=function(e){var t=l(e.components);return a.a.createElement(p.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,p=c(e,["components","mdxType","originalType","parentName"]),b=l(n),d=r,y=b["".concat(i,".").concat(d)]||b[d]||u[d]||o;return n?a.a.createElement(y,s(s({ref:t},p),{},{components:n})):a.a.createElement(y,s({ref:t},p))}));function y(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 s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:r,i[1]=s;for(var p=2;p<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/37382beb.8b634fbd.js b/docs/37382beb.297f4f29.js
similarity index 96%
rename from docs/37382beb.8b634fbd.js
rename to docs/37382beb.297f4f29.js
index 77e3eac940..824a42bff5 100644
--- a/docs/37382beb.8b634fbd.js
+++ b/docs/37382beb.297f4f29.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[56],{109:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return a})),r.d(t,"metadata",(function(){return g})),r.d(t,"rightToc",(function(){return i})),r.d(t,"default",(function(){return d}));var n=r(2),A=r(6),o=(r(0),r(290)),a={title:"Pixel Art"},g={unversionedId:"examples/pixel-art",id:"examples/pixel-art",isDocsHomePage:!1,title:"Pixel Art",description:"A card that demonstrates collaborative editing in Q.",source:"@site/docs/examples/pixel-art.md",slug:"/examples/pixel-art",permalink:"/wave/docs/examples/pixel-art",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/pixel-art.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / D3.js",permalink:"/wave/docs/examples/plot-d3"},next:{title:"Uploads",permalink:"/wave/docs/examples/upload"}},i=[],u={rightToc:i};function d(e){var t=e.components,a=Object(A.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},u,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"A card that demonstrates collaborative editing in Q.\nOpen ",Object(o.b)("inlineCode",{parentName:"p"},"/demo")," in multiple browsers and watch them synchronize in realtime."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(339).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, data, ui\n\npage = site['/demo']\npage.drop()\n\npage.add('example', ui.pixel_art_card(\n    box='1 1 4 6',\n    title='Art',\n    data=data('color', 16 * 16),\n))\npage.save()\n")))}d.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return c})),r.d(t,"b",(function(){return E}));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 a(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 g(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function i(e,t){if(null==e)return{};var r,n,A=function(e,t){if(null==e)return{};var r,n,A={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(A[r]=e[r]);return A}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(A[r]=e[r])}return A}var u=A.a.createContext({}),d=function(e){var t=A.a.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):g(g({},t),e)),r},c=function(e){var t=d(e.components);return A.a.createElement(u.Provider,{value:t},e.children)},B={inlineCode:"code",wrapper:function(e){var t=e.children;return A.a.createElement(A.a.Fragment,{},t)}},Q=A.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,a=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),c=d(r),Q=n,E=c["".concat(a,".").concat(Q)]||c[Q]||B[Q]||o;return r?A.a.createElement(E,g(g({ref:t},u),{},{components:r})):A.a.createElement(E,g({ref:t},u))}));function E(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,a=new Array(o);a[0]=Q;var g={};for(var i in t)hasOwnProperty.call(t,i)&&(g[i]=t[i]);g.originalType=e,g.mdxType="string"==typeof e?e:n,a[1]=g;for(var u=2;u<o;u++)a[u]=r[u];return A.a.createElement.apply(null,a)}return A.a.createElement.apply(null,r)}Q.displayName="MDXCreateElement"},339:function(e,t,r){"use strict";r.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[59],{112:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return a})),r.d(t,"metadata",(function(){return g})),r.d(t,"rightToc",(function(){return i})),r.d(t,"default",(function(){return d}));var n=r(2),A=r(6),o=(r(0),r(292)),a={title:"Pixel Art"},g={unversionedId:"examples/pixel-art",id:"examples/pixel-art",isDocsHomePage:!1,title:"Pixel Art",description:"A card that demonstrates collaborative editing in Q.",source:"@site/docs/examples/pixel-art.md",slug:"/examples/pixel-art",permalink:"/wave/docs/examples/pixel-art",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/pixel-art.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / D3.js",permalink:"/wave/docs/examples/plot-d3"},next:{title:"Uploads",permalink:"/wave/docs/examples/upload"}},i=[],u={rightToc:i};function d(e){var t=e.components,a=Object(A.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},u,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"A card that demonstrates collaborative editing in Q.\nOpen ",Object(o.b)("inlineCode",{parentName:"p"},"/demo")," in multiple browsers and watch them synchronize in realtime."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(342).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, data, ui\n\npage = site['/demo']\npage.drop()\n\npage.add('example', ui.pixel_art_card(\n    box='1 1 4 6',\n    title='Art',\n    data=data('color', 16 * 16),\n))\npage.save()\n")))}d.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return c})),r.d(t,"b",(function(){return E}));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 a(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 g(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function i(e,t){if(null==e)return{};var r,n,A=function(e,t){if(null==e)return{};var r,n,A={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(A[r]=e[r]);return A}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(A[r]=e[r])}return A}var u=A.a.createContext({}),d=function(e){var t=A.a.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):g(g({},t),e)),r},c=function(e){var t=d(e.components);return A.a.createElement(u.Provider,{value:t},e.children)},B={inlineCode:"code",wrapper:function(e){var t=e.children;return A.a.createElement(A.a.Fragment,{},t)}},Q=A.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,a=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),c=d(r),Q=n,E=c["".concat(a,".").concat(Q)]||c[Q]||B[Q]||o;return r?A.a.createElement(E,g(g({ref:t},u),{},{components:r})):A.a.createElement(E,g({ref:t},u))}));function E(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var o=r.length,a=new Array(o);a[0]=Q;var g={};for(var i in t)hasOwnProperty.call(t,i)&&(g[i]=t[i]);g.originalType=e,g.mdxType="string"==typeof e?e:n,a[1]=g;for(var u=2;u<o;u++)a[u]=r[u];return A.a.createElement.apply(null,a)}return A.a.createElement.apply(null,r)}Q.displayName="MDXCreateElement"},342:function(e,t,r){"use strict";r.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/38067279.9c6d1d12.js b/docs/38067279.fc1a43b6.js
similarity index 92%
rename from docs/38067279.9c6d1d12.js
rename to docs/38067279.fc1a43b6.js
index 974a9b3cb7..d9709c1c9d 100644
--- a/docs/38067279.9c6d1d12.js
+++ b/docs/38067279.fc1a43b6.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[57],{110:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return l}));var r=n(2),o=n(6),a=(n(0),n(290)),i={title:"Plot / Point / Map"},p={unversionedId:"examples/plot-point-map",id:"examples/plot-point-map",isDocsHomePage:!1,title:"Plot / Point / Map",description:"Make a plot to compare quantities across categories. Similar to a heatmap, but using size-encoding instead of color-encoding.",source:"@site/docs/examples/plot-point-map.md",slug:"/examples/plot-point-map",permalink:"/wave/docs/examples/plot-point-map",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point-map.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Point / Sizes",permalink:"/wave/docs/examples/plot-point-sizes"},next:{title:"Plot / Point / Groups",permalink:"/wave/docs/examples/plot-point-groups"}},c=[],s={rightToc:c};function l(e){var t=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},s,i,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Make a plot to compare quantities across categories. Similar to a heatmap, but using size-encoding instead of color-encoding."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(340).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='Points, size-encoded',\n    data=data('country product profit', k1 * k2),\n    plot=ui.plot([ui.mark(type='point', x='=country', y='=product', size='=profit', shape='circle')])\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")))}l.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),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 p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=o.a.createContext({}),l=function(e){var t=o.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 o.a.createElement(s.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 n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),u=l(n),d=r,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||a;return n?o.a.createElement(f,p(p({ref:t},s),{},{components:n})):o.a.createElement(f,p({ref:t},s))}));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 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 s=2;s<a;s++)i[s]=n[s];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},340:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-point-map-13e6e7b5d7bfc7c6337172bb86dc84e2.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[60],{113:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return l}));var r=n(2),o=n(6),a=(n(0),n(292)),i={title:"Plot / Point / Map"},p={unversionedId:"examples/plot-point-map",id:"examples/plot-point-map",isDocsHomePage:!1,title:"Plot / Point / Map",description:"Make a plot to compare quantities across categories. Similar to a heatmap, but using size-encoding instead of color-encoding.",source:"@site/docs/examples/plot-point-map.md",slug:"/examples/plot-point-map",permalink:"/wave/docs/examples/plot-point-map",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point-map.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Point / Sizes",permalink:"/wave/docs/examples/plot-point-sizes"},next:{title:"Plot / Point / Groups",permalink:"/wave/docs/examples/plot-point-groups"}},c=[],s={rightToc:c};function l(e){var t=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},s,i,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Make a plot to compare quantities across categories. Similar to a heatmap, but using size-encoding instead of color-encoding."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(343).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='Points, size-encoded',\n    data=data('country product profit', k1 * k2),\n    plot=ui.plot([ui.mark(type='point', x='=country', y='=product', size='=profit', shape='circle')])\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")))}l.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),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 p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=o.a.createContext({}),l=function(e){var t=o.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 o.a.createElement(s.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 n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),u=l(n),d=r,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||a;return n?o.a.createElement(f,p(p({ref:t},s),{},{components:n})):o.a.createElement(f,p({ref:t},s))}));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 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 s=2;s<a;s++)i[s]=n[s];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},343:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-point-map-13e6e7b5d7bfc7c6337172bb86dc84e2.png"}}]);
\ No newline at end of file
diff --git a/docs/3aa768f5.5a32e9a7.js b/docs/3aa768f5.5a32e9a7.js
deleted file mode 100644
index ee99ab9062..0000000000
--- a/docs/3aa768f5.5a32e9a7.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[58],{111:function(A,e,r){"use strict";r.r(e),r.d(e,"frontMatter",(function(){return l})),r.d(e,"metadata",(function(){return u})),r.d(e,"rightToc",(function(){return c})),r.d(e,"default",(function(){return p}));var t=r(2),n=r(6),a=(r(0),r(290)),l={title:"Form / File Upload"},u={unversionedId:"examples/file-upload",id:"examples/file-upload",isDocsHomePage:!1,title:"Form / File Upload",description:"Use a file upload component to allow users to upload files.",source:"@site/docs/examples/file-upload.md",slug:"/examples/file-upload",permalink:"/wave/docs/examples/file-upload",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/file-upload.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Separator",permalink:"/wave/docs/examples/separator"},next:{title:"Form / Frame",permalink:"/wave/docs/examples/form-frame"}},c=[],o={rightToc:c};function p(A){var e=A.components,l=Object(n.a)(A,["components"]);return Object(a.b)("wrapper",Object(t.a)({},o,l,{components:e,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use a file upload component to allow users to upload files."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(341).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\npage['example'] = ui.form_card(\n    box='1 1 4 10',\n    items=[\n        ui.file_upload(name='file_upload', label='Upload!', multiple=True,\n        file_extensions=['csv', 'gz'], max_file_size=10, max_size=15)\n    ]\n)\n\npage.save()\n")))}p.isMDXComponent=!0},290:function(A,e,r){"use strict";r.d(e,"a",(function(){return v})),r.d(e,"b",(function(){return f}));var t=r(0),n=r.n(t);function a(A,e,r){return e in A?Object.defineProperty(A,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):A[e]=r,A}function l(A,e){var r=Object.keys(A);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(A);e&&(t=t.filter((function(e){return Object.getOwnPropertyDescriptor(A,e).enumerable}))),r.push.apply(r,t)}return r}function u(A){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?l(Object(r),!0).forEach((function(e){a(A,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(A,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(e){Object.defineProperty(A,e,Object.getOwnPropertyDescriptor(r,e))}))}return A}function c(A,e){if(null==A)return{};var r,t,n=function(A,e){if(null==A)return{};var r,t,n={},a=Object.keys(A);for(t=0;t<a.length;t++)r=a[t],e.indexOf(r)>=0||(n[r]=A[r]);return n}(A,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(A);for(t=0;t<a.length;t++)r=a[t],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(A,r)&&(n[r]=A[r])}return n}var o=n.a.createContext({}),p=function(A){var e=n.a.useContext(o),r=e;return A&&(r="function"==typeof A?A(e):u(u({},e),A)),r},v=function(A){var e=p(A.components);return n.a.createElement(o.Provider,{value:e},A.children)},i={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,l=A.parentName,o=c(A,["components","mdxType","originalType","parentName"]),v=p(r),s=t,f=v["".concat(l,".").concat(s)]||v[s]||i[s]||a;return r?n.a.createElement(f,u(u({ref:e},o),{},{components:r})):n.a.createElement(f,u({ref:e},o))}));function f(A,e){var r=arguments,t=e&&e.mdxType;if("string"==typeof A||t){var a=r.length,l=new Array(a);l[0]=s;var u={};for(var c in e)hasOwnProperty.call(e,c)&&(u[c]=e[c]);u.originalType=A,u.mdxType="string"==typeof A?A:t,l[1]=u;for(var o=2;o<a;o++)l[o]=r[o];return n.a.createElement.apply(null,l)}return n.a.createElement.apply(null,r)}s.displayName="MDXCreateElement"},341:function(A,e,r){"use strict";r.r(e),e.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/3aa768f5.97cc5998.js b/docs/3aa768f5.97cc5998.js
new file mode 100644
index 0000000000..1c86dd8102
--- /dev/null
+++ b/docs/3aa768f5.97cc5998.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[61],{114:function(A,e,r){"use strict";r.r(e),r.d(e,"frontMatter",(function(){return l})),r.d(e,"metadata",(function(){return u})),r.d(e,"rightToc",(function(){return c})),r.d(e,"default",(function(){return p}));var t=r(2),n=r(6),a=(r(0),r(292)),l={title:"Form / File Upload"},u={unversionedId:"examples/file-upload",id:"examples/file-upload",isDocsHomePage:!1,title:"Form / File Upload",description:"Use a file upload component to allow users to upload files.",source:"@site/docs/examples/file-upload.md",slug:"/examples/file-upload",permalink:"/wave/docs/examples/file-upload",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/file-upload.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Separator",permalink:"/wave/docs/examples/separator"},next:{title:"Form / Frame",permalink:"/wave/docs/examples/form-frame"}},c=[],o={rightToc:c};function p(A){var e=A.components,l=Object(n.a)(A,["components"]);return Object(a.b)("wrapper",Object(t.a)({},o,l,{components:e,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use a file upload component to allow users to upload files."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(344).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\npage['example'] = ui.form_card(\n    box='1 1 4 10',\n    items=[\n        ui.file_upload(name='file_upload', label='Upload!', multiple=True,\n                       file_extensions=['csv', 'gz'], max_file_size=10, max_size=15)\n    ]\n)\n\npage.save()\n")))}p.isMDXComponent=!0},292:function(A,e,r){"use strict";r.d(e,"a",(function(){return v})),r.d(e,"b",(function(){return f}));var t=r(0),n=r.n(t);function a(A,e,r){return e in A?Object.defineProperty(A,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):A[e]=r,A}function l(A,e){var r=Object.keys(A);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(A);e&&(t=t.filter((function(e){return Object.getOwnPropertyDescriptor(A,e).enumerable}))),r.push.apply(r,t)}return r}function u(A){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?l(Object(r),!0).forEach((function(e){a(A,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(A,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(e){Object.defineProperty(A,e,Object.getOwnPropertyDescriptor(r,e))}))}return A}function c(A,e){if(null==A)return{};var r,t,n=function(A,e){if(null==A)return{};var r,t,n={},a=Object.keys(A);for(t=0;t<a.length;t++)r=a[t],e.indexOf(r)>=0||(n[r]=A[r]);return n}(A,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(A);for(t=0;t<a.length;t++)r=a[t],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(A,r)&&(n[r]=A[r])}return n}var o=n.a.createContext({}),p=function(A){var e=n.a.useContext(o),r=e;return A&&(r="function"==typeof A?A(e):u(u({},e),A)),r},v=function(A){var e=p(A.components);return n.a.createElement(o.Provider,{value:e},A.children)},i={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,l=A.parentName,o=c(A,["components","mdxType","originalType","parentName"]),v=p(r),s=t,f=v["".concat(l,".").concat(s)]||v[s]||i[s]||a;return r?n.a.createElement(f,u(u({ref:e},o),{},{components:r})):n.a.createElement(f,u({ref:e},o))}));function f(A,e){var r=arguments,t=e&&e.mdxType;if("string"==typeof A||t){var a=r.length,l=new Array(a);l[0]=s;var u={};for(var c in e)hasOwnProperty.call(e,c)&&(u[c]=e[c]);u.originalType=A,u.mdxType="string"==typeof A?A:t,l[1]=u;for(var o=2;o<a;o++)l[o]=r[o];return n.a.createElement.apply(null,l)}return n.a.createElement.apply(null,r)}s.displayName="MDXCreateElement"},344:function(A,e,r){"use strict";r.r(e),e.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/3abe8fb9.3bd27d47.js b/docs/3abe8fb9.3bd27d47.js
new file mode 100644
index 0000000000..fcc20f4d44
--- /dev/null
+++ b/docs/3abe8fb9.3bd27d47.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[62],{115:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return p}));var r=n(2),a=n(6),o=(n(0),n(292)),i={title:"Logging"},c={unversionedId:"logging",id:"logging",isDocsHomePage:!1,title:"Logging",description:"Wave apps are plain Python programs. Use Python's built-in logging module to configure logging.",source:"@site/docs/logging.md",slug:"/logging",permalink:"/wave/docs/logging",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/logging.md",version:"current",sidebar:"someSidebar",previous:{title:"Security",permalink:"/wave/docs/security"},next:{title:"Command Line Interface",permalink:"/wave/docs/cli"}},l=[],s={rightToc:l};function p(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},s,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Wave apps are plain Python programs. Use Python's built-in ",Object(o.b)("inlineCode",{parentName:"p"},"logging")," module to configure logging."),Object(o.b)("p",null,"Here's a basic configuration that logs a ISO8601 timestamp, log level, and message:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py",metastring:"{3,4}","{3,4}":!0}),"from h2o_wave import Q, main, app\n\nimport logging\nlogging.basicConfig(format='%(asctime)s %(levelname)s %(message)s')\n\n@app('/demo')\nasync def serve(q: Q):\n    logging.warning('All your base are belong to us')    \n")),Object(o.b)("p",null,"The above snippet makes the app log a warning every time it is accessed. This is what the logged message look like:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{}),"2010-12-12 11:41:42,612 WARNING All your base are belong to us\n")),Object(o.b)("div",{className:"admonition admonition-info alert alert--info"},Object(o.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(r.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(r.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(o.b)("path",Object(r.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(o.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"See ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://docs.python.org/3/howto/logging.html"}),"Python's logging module")," for more information."))))}p.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return g})),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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=a.a.createContext({}),p=function(e){var t=a.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},g=function(e){var t=p(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)}},u=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),g=p(n),u=r,b=g["".concat(i,".").concat(u)]||g[u]||m[u]||o;return n?a.a.createElement(b,c(c({ref:t},s),{},{components:n})):a.a.createElement(b,c({ref:t},s))}));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]=u;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 s=2;s<o;s++)i[s]=n[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}u.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/3abe8fb9.87518934.js b/docs/3abe8fb9.87518934.js
deleted file mode 100644
index c89ba66a19..0000000000
--- a/docs/3abe8fb9.87518934.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[59],{112:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return p}));var r=n(2),o=n(6),a=(n(0),n(290)),i={title:"Logging"},c={unversionedId:"logging",id:"logging",isDocsHomePage:!1,title:"Logging",description:"Wave apps are plain Python programs. Use Python's built-in logging module to configure logging.",source:"@site/docs/logging.md",slug:"/logging",permalink:"/wave/docs/logging",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/logging.md",version:"current",sidebar:"someSidebar",previous:{title:"Security",permalink:"/wave/docs/security"},next:{title:"Development",permalink:"/wave/docs/development"}},l=[],s={rightToc:l};function p(e){var t=e.components,n=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},s,n,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Wave apps are plain Python programs. Use Python's built-in ",Object(a.b)("inlineCode",{parentName:"p"},"logging")," module to configure logging."),Object(a.b)("p",null,"Here's a basic configuration that logs a ISO8601 timestamp, log level, and message:"),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py",metastring:"{3,4}","{3,4}":!0}),"from h2o_wave import Q, listen\n\nimport logging\nlogging.basicConfig(format='%(asctime)s %(levelname)s %(message)s')\n\nasync def serve(q: Q):\n    logging.warning('All your base are belong to us')    \n\nlisten('/demo', serve)\n")),Object(a.b)("p",null,"The above snippet makes the app log a warning every time it is accessed. This is what the logged message look like:"),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{}),"2010-12-12 11:41:42,612 WARNING All your base are belong to us\n")),Object(a.b)("div",{className:"admonition admonition-info alert alert--info"},Object(a.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-heading"}),Object(a.b)("h5",{parentName:"div"},Object(a.b)("span",Object(r.a)({parentName:"h5"},{className:"admonition-icon"}),Object(a.b)("svg",Object(r.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(a.b)("path",Object(r.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(a.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-content"}),Object(a.b)("p",{parentName:"div"},"See ",Object(a.b)("a",Object(r.a)({parentName:"p"},{href:"https://docs.python.org/3/howto/logging.html"}),"Python's logging module")," for more information."))))}p.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return g})),n.d(t,"b",(function(){return b}));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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=o.a.createContext({}),p=function(e){var t=o.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},g=function(e){var t=p(e.components);return o.a.createElement(s.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},u=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),g=p(n),u=r,b=g["".concat(i,".").concat(u)]||g[u]||m[u]||a;return n?o.a.createElement(b,c(c({ref:t},s),{},{components:n})):o.a.createElement(b,c({ref:t},s))}));function b(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,i=new Array(a);i[0]=u;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 s=2;s<a;s++)i[s]=n[s];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}u.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/3ae7008e.f2eb3c38.js b/docs/3ae7008e.f2eb3c38.js
new file mode 100644
index 0000000000..ce3a956952
--- /dev/null
+++ b/docs/3ae7008e.f2eb3c38.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[63],{116:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return p})),a.d(t,"metadata",(function(){return o})),a.d(t,"rightToc",(function(){return A})),a.d(t,"default",(function(){return c}));var n=a(2),r=a(6),i=(a(0),a(292)),p={title:"Site / Async"},o={unversionedId:"examples/site-async",id:"examples/site-async",isDocsHomePage:!1,title:"Site / Async",description:"Update any page on a site from within an app using an AsyncSite instance.",source:"@site/docs/examples/site-async.md",slug:"/examples/site-async",permalink:"/wave/docs/examples/site-async",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/site-async.md",version:"current",sidebar:"someSidebar",previous:{title:"Background Tasks / Executor",permalink:"/wave/docs/examples/background-executor"},next:{title:"Graphics / Primitives",permalink:"/wave/docs/examples/graphics-primitives"}},A=[],s={rightToc:A};function c(e){var t=e.components,p=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},s,p,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Update any page on a site from within an app using an ",Object(i.b)("inlineCode",{parentName:"p"},"AsyncSite")," instance."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+a(345).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from .synth import FakePercent\nfrom h2o_wave import Q, app, main, ui, AsyncSite\n\nsite = AsyncSite()\n\n# Grab a reference to the /stats page\nstats_page = site['/stats']\n\n# A flag to indicate whether to pause or resume updating the page at '/stats'\nupdate_stats = False\n\n\nasync def update_stats_page(q, page):\n    f = FakePercent()\n    card = page['example']\n    while update_stats:\n        await q.sleep(1)\n        price, percent = f.next()\n        card.data.price = price\n        card.data.percent = percent\n        card.progress = percent\n        await page.save()\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if not q.client.initialized:\n        # Set up up the page at /stats\n        stats_page.drop()  # Clear any existing page\n        stats_page['example'] = ui.wide_gauge_stat_card(\n            box='1 1 2 1',\n            title='Stats',\n            value='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            aux_value='={{intl percent style=\"percent\" minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n            plot_color='$red',\n            progress=0,\n            data=dict(price=0, percent=0),\n        )\n        await stats_page.save()\n\n        # Set up this app's UI\n        q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[\n            ui.frame(path='/stats', height='110px'),\n            ui.button(name='toggle', label='Toggle Updates', primary=True),\n        ])\n        await q.page.save()\n\n        q.client.initialized = True\n\n    if q.args.toggle:\n        global update_stats\n        update_stats = not update_stats\n        await update_stats_page(q, stats_page)\n")))}c.isMDXComponent=!0},292:function(e,t,a){"use strict";a.d(t,"a",(function(){return u})),a.d(t,"b",(function(){return m}));var n=a(0),r=a.n(n);function i(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function p(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<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?p(Object(a),!0).forEach((function(t){i(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):p(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function A(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var s=r.a.createContext({}),c=function(e){var t=r.a.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):o(o({},t),e)),a},u=function(e){var t=c(e.components);return r.a.createElement(s.Provider,{value:t},e.children)},g={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,p=e.parentName,s=A(e,["components","mdxType","originalType","parentName"]),u=c(a),d=n,m=u["".concat(p,".").concat(d)]||u[d]||g[d]||i;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 i=a.length,p=new Array(i);p[0]=d;var o={};for(var A in t)hasOwnProperty.call(t,A)&&(o[A]=t[A]);o.originalType=e,o.mdxType="string"==typeof e?e:n,p[1]=o;for(var s=2;s<i;s++)p[s]=a[s];return r.a.createElement.apply(null,p)}return r.a.createElement.apply(null,a)}d.displayName="MDXCreateElement"},345:function(e,t,a){"use strict";a.r(t),t.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUYAAACsCAYAAAAHfwWgAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUAU3VuIDI1IE9jdCAyMDIwIDA4OjA4OjMzIFBNIFBEVP0pJk0AACAASURBVHic7d13WBRX+zfw78wWUBGRYnnxMYgxthgFC5qIUbFQ1MRuYo8tltijPmkay0+jxiR27PVJYsESWyKCigpqrLGiIiqCKGUFdmFhd+73j2VXWEFhXSnm/lzXXIaddgbIlzNzzpwjEBGBMcaYiVjcBWCMsZKGg5ExxsxwMDLGmBkORsYYM8PByBhjZjgYGWPMDAcjY4yZkVu6o0ajsWY5GGOsxOAaI2OMmeFgZIwxMxyMjDFmhoORMcbMcDAyxpgZDkbGGDPDwcgYY2Y4GBljzAwHI2OMmeFgZIwxMxyMjDFmhoORMcbMWDyIhLXwXFyMMWsSBOGVj1EswZhfGHJIMsYskTMMc+aIpSFZpMGYs8BKpRJyudwq6c4YY0ZEBJ1Oh8zMTFPmFDZniuwZo7GARASlUgmFQsGhyBizOkEQoFAooFQqc+VOYRRp4wsRgYgglxf7o03G2BtOLpebMqewiiQYTQXLLiTXFBljr5sgCIbssaDWWKS30gRuYGGMFR1Lc6dYbqUZY6wolNhb6ZwPPzkYGWNFyTx3Cpo/Rf7mCwcjY6yoWJo3/EogY4yZKdpWacYYKyYlslXagAOSMVbUSmDjC2OMlTYcjIwxZoaDkTHGzHAwMsaYmX/naA5aLUirBbIyQZIESBKQlYXUEZ9BtK8AwaEiRBdniG/VgOztWpA39YJQtmxxl5oxVkT+NcFIGrUhENPTDUGYl8xMSAlPgIQn0N+OBMJPmVbJm3pB2a4DFG3bFVGJGWPFRSALOxlqNJoCbZfzlRxJ0kOvl+Do6GjJKS1CGjUoJQXQ6Z59qFBAsLEFbGwAUYQgioBCYQjGuFhISYnQR0dDuh0J/a1I6O9GmXYVXSpB2bM3bLr2KLJrYIxZJikpCTKZCFGUQRAE0/Iyb2wwklYLUiUDWVmGD2RyCOXtINiWAQo5HiQlJSLr+FFk7t8HfbQhJEVnZ5SZ9g3kDT2sXXTGmJVwMOY8p0oFSks1fCGTQ7C3h1CunFWOnXX8KDI2rIX04D4AwKZHb9iOGGWVY7/InTt38NOiRbh48QIEUUSzZs0wefKXqFq1KiRJwurVq+Dp6YmmTZu99Fhnz57B+fPnMWzYcIgit7+xN5elwfhm/V8hSaDEBFMoCg4OEKtWtVooAoCiVWuUX70BNp/2B+RyaHf8jrTRw0HJSVY7h7nMzEyMGvk5bty4joEDB6Ffv344f+4cJowfB8Dwx2dVYCDOnjlboOOdPXMWqwID+VVNxvLx5gRjVhakJ48NjSuiCLFyFQh25V/PuWQy2A4eCrvFKyA4OkEfeROpIz6D/vat13K6+/fvISEhAYMGD8aw4cMxYsTnmDt3Hpo0bYr09HS0/OB9AMDatWvwSZ/eAIDo6GiMGvk5vL1bIsDfD9u2/Q4A2LxpE9auXQMAaNa0CY6GhkKr1WLm99/Dt2MHtPJuialTvoRarX4t18JYaSCbMWPGDEt2zDI+uysE4y11mTJlLDll/iQJUmKC4XmiQgHRpZKhMeU1E52coPRpB925s5Di4pB14hgUrX2sWkMFgLJly2HP7t24ceMG7Ozs4OjohNq1a+P99z+AQqFAgwbvYf/+fXj33QaY9t//olKlyhg3dizU6jR89fU3EAQBqwID4ePjg7p16+Hypct4/PgxlixdhncbNMDu3buwYcN6jJ8wAQH+Adi6dQu0Wi28vLyseh2MFbX09HSIogBBEP99t9KUnJQ7FItwsi3B0Qnlfl4GmZsb6OlTqL8cb+gaZEW2trZYs3Yd3n23Aeb/8AN8O3bAZ4MH4fr16wCAJk2aAAC8vLzw7rsNAAAbNm7Exk2bUbNmTdRwrwEAiIyMRJUqVUyB5+XlhYoVK0KXZWixl/QS3m3QAIeDj+CLL8Za9RoYK01KfTCSSvXs9tnJGSiGxgShbFmU++EniJUqQ4p9iPQf/s/q56hevTrmzpuH0KPHsGzZcmg0GowaNTLfRrDVq1ahY4f26NmzB3YFBQEA9Dp9ntv26NkTvr6+WLRoETp2aI/+/friypV/rH4NjJUWpToYSas1NbQUdU3RnODoiHKz5gJyObJOnUBW+EmrHftEWBiGDxuK27dvQaFQoHmLFvjoo4+R8vQpoqOjn9s+KioKgYEr8dlnQ3D8eBi+mz7jhcdXKpWYOGkyjoeFYdWq1UhKSsL8+fOtVn7GSpvSHYyqZACG1ueieKb4MqJ7Tdh+0g8AkLF4kdWOW8PdHf/88w8mTpiANatXY8mSxQgMXAkHBwfUqFEDMpkMNjY2CA8/hZMnT0KSDDXDh7EPceb0aSxbujTX8cqWM7zeuH7dOiQlJuKXn3+Cn29H7NmzB0+ePIFer4djxaLrhM9YSVNqG19IrQbUakAmh+jk9MrHsxZ5Qw/ojh+FFBcLoVw5yOvVf+Vj2tvbo1HDRrhy5QoOHz6Ma9euol69+pg9Zw6qVKkCAKjoWBFHQ0Nx9eoVDBs+AkSEP/buxbFjx9ClSxecOnUKrVu3Qe3atVG9+lu4fv06Dh08hPrv1ke3rt0QF/cIO7ZvQ2hoKDw8PPHfr76CnZ3dK5edseJkaeNLqe3gLT2KA3Q6CBUdrd4K/KqyQo9A838zITg4wP7XHYC8+GuzjP0b/as6eJNabXj3WSYvcaEIAIo2PpC95QZSqZB5JLi4i8MYK6RSGYzQagEAQvmSe6un7NQFAJB1NKSYS8IYK6xSGYyUkQ4AhgEhSihF67YAAN3fZwzdiRhjpUapC0bTeIoKRbF2z3kZwaEiZHXrAQB0F84Vc2kYY4VR6oIRWZkAYBhPsYST164LANBfvVLMJWGMFUbJrXLlg7KfL8LGpkDb379/H6dOnYQ6TQ2XSpXQunVr2NvbAzB0OQoLC8O96GjI5XI0eO89NGrUyHAeIhw9GorU1DQ4Oznh/Q8+AADExj7EpUuX4efn99Jzy+rWB3bvhP7mDQuulDFWXEpfjdGoAK/+JSYm4tjRo2jb1geDBg9GNVdXhIY+awwJDQ2FUqFAv/798dHHH+Pa1at4GBMDwNDMr9VmokuXLoiPj0d6ejqysrIQHh6OVq1aFayI1aoByO5axBgrNUpfMGbP1yIUIBjlcjnatW+PSpUqQSaT4Z3atZGU9GzcxLfffhvNvLygUChgb28PV1dXJGavFwUB+uzpEPSSHqIo4nREBBq82wDlCthFSKzgAAAgdVqhLpExVrxKXzAa37gpwCuAFSpUQNWqVbN3y8I/ly/jP9X+Y1rv7u4OpVIJAEhISEDMw4dwdXUFAFR0dIRLJRfs27cP77xTG4mJCUhNS8M7tWsXuKhC5coAAEp7fcEYGLiSx05kzMpK3TNGS5w/fx5//30WduXs4B8Q8Nz6NatXQ5IkNGzUCE45Xi9s1swwPFdWVhb27t0DX9+XP1fMibQZAADB2uNP5rAqMBAff9y1wLVYxtjLlb4ao7GmWIh3tT09PTF48Gdo2qwZ9v3xBzIzM3OtHzpsGPp88gkeP36MCxcuPLe/8RZalZyM/fv348iR4IK9K/70qeHfEtzfkjH2vNIXjNnPFim/uaFzSE5KwlOVCgCgUChQq1YtlClTBgkJCZAkCffv3zdta29vjwYNGiDmwYNcx4iNfWi6hY44fRpt27ZFxYqOuBUZ+dLz6x8/NhTZypN/RYSHY9rUqfD38wUA+Pv5YuiQIdi+bRt0OaeJNUNE2LlzB1p5t0RjTw+osr83BZGUlITGnh5o7OmBmzdvFqq8wYcPY/ToUfBp2wYtmnuhU4A/Zn7/fZ5DpuV04cJ5TPlyMvx8O6K5VzN0CvDH3Ln/h/j4R4U6P2OFVeqCsSCNLkbxjx/jzz//RHJyMvR6PaKiopCaloqKFStCEAScCAvDxYsXodPpkJaWhmvXrsGlUiXT/uat0JIkQS6XQy6XQ1+AYJbuRQMARNdqhbvI/I4nSZg1ayZGjx6F6Oi78PP3BwB06twZoihg3ry56Nf301wNTEYPHjzAiOHDMG/uXDg4OBT63AssGJ9RkiR8/fVXmDp1CrQZWvTt2w8TJ05Cu/btERERjt69euLPP//Mc981a1Zj2NChuHbtGvz8/DFu3Hh82Lo1gg8fRp/evXkgXfZ6kYXUanWBlrS0NEpNTaWUlBRSqZIpMTHR0lMSEZH0VEX6B/dJSk4u0PZ///03bdm8mVavXkU7d+yg2NhY07rExETau3cvrVm9mjZsWE8nTpwgnU5nWh92/DjduHHD9HVkZCTt2hVEe/fuJY1G89Jza5b8TKp2rSh9/ZpCXGH+Nm/eRJ4ejWjLls0kSRIREXl6NKJHjx4REVFERAS1/OB9+nzE8Fz77dq1i1o096KePXvQlX/+oWVLl5KnRyNKLuD38Nixo+Tp0YjGjR1Lnh6Ncn1PXmT79u3k6dGI/rd163Pr0tPTacTw4dTcy8tUfqPjx4+Rp0cj+u+0qaTVanOtU6lUNGjgAPLz7UipqakFKgf790pMTCSVKplSUlIoNTWV0tLSCpRbpa/xxcYWQApIm4GXDx4ENG7cGI0bN85znaOjIzp37pzvvi29vXN9XatWLdSqVavARdVfM7zxIqtZ8H1eZPu2bfDy8kLfvv3yXO/l5YXhw0fg559/QlRUFNzd3QEAJ0+cwICBAzFkyFAoFAocO3aswOdUq9WYN3cu2rb1QUdfX4SFHS/wvkdDQ1GtWjV88umnz62ztbXFhAkT8Omnn+DkyRPo1q27ad36detQtWpVzPh+pqnXgFGFChUw74f5+PijLtgVFIT+AwYUuDyMFVSpC0bBxgYkiobGF52uxL4vTU8eG6ZTlcshb2ad2fbi4uLQuk2bF24TEBAABwcHlMsepRsAps+YYfGgs4t/+RkajQZTp03DxYsXC7WvIADlXnBeu/KG6W1F4dnjEUmScOXKFfTu3ee5UDSqXLkyvLya49ChQxyM7LUodc8YgWej6hhH2SmJMo+GAESQezSGUMDXF1/G1dUVF86fh16f96RWAODo5ITOXbqgcuUqps8sDcULF85j586dGDduPJydnQu9f+s2bRB58yYuX76c5/rff/sNNjY2aPH++6bPdDod9Ho9ypYtm+c+Ri4uLrh1KxIZGRmFLhdjL1Mqg9H4nvTr7Dj9qjL37QEAKDsWru/jiwwdNgxXr17F5EmT8OjR622ZzczMxKyZM+Hp6YmPu3a16Bhdu3aDn58/xowehQ3r1+POnTt48uQJLl68gG+/+Qa///4bvps+A5WzO8IDhom5qlSpggsXn+82ZUREuHTpIvR6PRISEiwqG2MvUjLvQ19CKFcOlJIC6HQgtbrEjeKd+dchSLGxEKv+PyhatbbacQMCOsFGaYN58+bioy6dTfNDx8TE5AoXawgMXIm4uEf4+ZfFBRoKPi+iKGLmrFkIDFyJpUuXYMmSxaZ1jo6OWL58BRpnz4mdU9eu3bBixXIcOngQvnkM1rF50ybcvXsXAJCWPUskY9ZUKoMRAAR7e1ByEig1pcQFo8ytBhQtW0He0MPwoM2K2rVvj5be3ggJOYJDBw8CAIYPG4qaNWvC3z8Avfv0eeXJxm7evInNmzZh5MhRqF69usXHycjIwJQvJyM8PBzt23dAS++WqGBfATExMdi7dw9GjRqJ8eMnPNc4M3DQIJw+HYFvv/0GFy5egL+fP5xdnPEo7hG2bt2Cc+fOYdSo0Vi6dAlEUfbCMkRHR2P9+nW4f+8e7O3t4efvn+sNpujou9i4cSPuRUfD3t4eAZ06oX37DnkeKzU1FZs3bcKFC+ehVCrh4eGBfv0HwNbWFoErV+bZMNWvf3/4+vohJiYGa9euAUkS3n//A3To2NF0/sCVK/H9zJlQKq3zyIVZgaXN4MXVXScn/aM4Q9ed1BSrHfNVGbsT6R/HF8n5PD0aUdDOnTRz5vf0fovm1L6dD505c/qF+7you45er6dPP/mE+vTulavrEhHR4cOHC9Vd5+uvv6LmXs0oIjw8z/PMn/8DeXo0ouPHjz23XqvV0s8//0QtW35Anh6NTMvw4cMoMjKSDuzfT54ejSgmJibf8ycmJtKQzwZTePgpyszMpLt379LIz0fQpYsXTecY+fkIOvzXX5SZmUlRUVE0ZvQounz5Up7HmzNnNi36cSGpVCpKTk6mH+bNpWVLlxIRkSRJpNPpTMvTp09p2NAhdPfuXSIiWrt2DZ0ICzOdU5IkysjIoKlTppi2YdZnaXed0vmMMZvgUBEAQCpVoV4RfG2ysgy3+AAE+wpFdtr3P/gA3377HXbv2QtXV1dMnDgR8fHxFh1r8+ZNiIy8iW+/mw6Z7MW1sRd5+PAhDh44gIGDBsGrefPn1ouiiEmTJqNGjRpYvWrVc+uVSiXGjRuPw4eDsWnzFixfvgJ7//gDgYGrUKtWLcTGxUImk73wEQIRYeTIUWjevAUUCgXc3NxQp05dRGd3vE9JSUGzZs3Qrn17KBQK1KhRAw0bNsSdO3eeO1ZycjJuXL+OkaNGo0KFCnBwcMCo0WMQHn4KaWlpEAQBMpnMtBzYvx/vvdcQbm5uAAwjPWm1WmRlZUEUDVN5bty4AR+2/tC0DSs5Sncw2thAsDN0+ZCePDZ03ykuOp2hDAAEu/JWa4kuDBcXF8yaPQcatRp/HjpU6P0fPHiAwJUr0dHXFw4ODoiNjc21xMXGAgDisr9OTc3/+d6lS4auPd7e+Y9dKYoivFu1wtWrV597f93I1tYW9evXh1fz5nDN8QbRzRs34ObmBvkLums5OTmZnmHq9XpcvXoFN2/ewHvvNQQAODs7Y9Dgz0zbZ2Zm4tq1a3i75tt5HM04BfCzN54kSQIR4eHDh7m2VKlUOHIkGD169jR91qlTZ5y/cB6LfvwR/QcMREREOFQqVaEHJmFFo9Q+YzQSHBwAvQ6Ung4pMQGiS6UCDWJrVZIEKTEBkCQIZcoYymRlkZGR+Pvvs/Dt6AvHHCMAmatSpQoEQUCyKrnQ5zhyJBharRYHDxzAwQMH8t1u0qSJAIAhQ4Zi1OjReW5D2dOViy/5WYjZE6HnDJx58+ZCJor4csrUPPfRarU4ffp0gVvLr1+/hjmzZwMAunbrlmcNTZIkrFixHO+8UxvvNmjw3PqKFR1Rp05dbFi/HoMGD4ZWq8XatWugUChM43Ya7QoKQosWLVClyrMuU46Ojpg8+UsAhiHu5s2bi2+//c7ihi32epX6YAQAoaIjSPcYyMqC9OQxRCfnouv4rdMZQjErC1AoIFS07oARRsnJyfhx4UIAwKef9s13u4jwcBARatSoUehztG3rA7e33PJdH3wkGAcPHMDwESNQ+53aeOsFt4B1atcBAJwIC0PdunXz3IaIEHYiDG5ubrC1fTaHj6SXELRzJwZ/NiTP/pPbt2+DWq1Gp075v7WUU9269bBx02bExMRg/bq10Ov06NW7d65yrAoMhDYjA6NHj8n3OF+MHYsN69dj3NgvUL58eXTt1g0P7t9HhRx/COPj43Hq1EnMX7Agz2NIkoQVy5dhQP8BuH//Hvbv3w+5XI7+/QdYvWcBs9wbEYwQRYiOTpCSEg3h+DjeUHMswGC2ryQ7iI2zFr7O2mrTpk1Rq1YtrFyxAjXda+b53O7y5cv4fub3qFSpEjp06Fjoc1SvXv2FrdA6vR4HDxxA69ZtUNtswN6zZ89AqbRBw4aG29Sab7+Nlt7eWLduLerUrfPcLbVOp8OCBfNx5/ZtzJw1K9e6Pp98gt27d2HmzO+xcOGPud6AOff331i2dBl8/fxe+nrmo0ePkJGRATc3N8hkMrz11lvo8tFH2Pb776ZgJCKsWb0aqqcqTJw4Kd9bc0mS8PBhDEaPGWN69vr48WPo9HrTYMgAsGPHdrT18UHFfP5ABgXthHvNmnivYUNMmjgB33z7LSJvRmJXUBA+HznyhdfDis6bEYyAKZgoOclwWx3/CIJ9BQjZE19ZG6WkgFIM4y0KZcoYaoqv8RZeFEX89PMvGD1qJEaNGomGDRvCw9MTALB82VLEPXqE8+fOwcXFBYuXLM1VA3vd7ty+jc9HjIAoijhw8BBcXFwAALNnz8HYL8Zg/LhxaNK0KZo2aQo7OzvEPYpDaEgoYmMfYujQYQgI6JTreO7u7pg6bRrmzZ2LPr17oa2PDxwcHHD1ylUcORKMunXr4auvvn5puWJjY7FyxXKMHTcetWvXRmJCAg4eOIhatd4xbbNh/XrExz/ChImTIAiCqXFEJpMh9uFDnDl7Bh9/3BWiKGLzps1o0KABuvfoDpXqKQJXroSvr5/pccH9+/dw+dIl/LjopzzLc+PGDVy6dAnTp88AYBi9SaFQQmljA72+GJ+Ps+e8OcEIAKIIwckZUKlAaamglKcgjRqCvT2Estbp60gatalzOZDd0PIaninmpWrVqvjt920I2rkTISFHsGf3bgDAvn370LBhQ4z54gv06tkLZYu4X6eziwuqV6+OcuXKoUKFZ63x5cuXx9p167F3714cPHgAv/76P6jVajg5OcHD0xOzZs821TDNde/eA25uNbBx4wYE7dwJrVYL12rVMGr0aPTt2w+KAtwNeHp64tNP+2LTxg14/PgxytnZoUXzFujdpw8A4Pr16zhyJBgAMGL4MNN+jRs3xoSJk3A3OhqhISHw9/eHUmmDqVOnYs2a1fh8xAjY2tqirY8POnV6Furbtm2Dv39Anq9gqtVqrFu7BhNy1Eq79+iBBQvmQwAwcNDgl3+jWZERyPiUvJA0Gk2BtiMi0yJJeuj1EhytPHBrnufVakGq5GfdeORyCHZ2hvesC/v8UacDZaQbXkE0Pmi3sTHUSIuh9Tmnxp4eOHDwED+fYiwPSUlJkMlEiKIMgiCYlpd5s2qMOQg2NhAqVwGpn9XwSKUCQWVoJLGxNYSbKBpugXNOmSBJhhHCtVrDvC05+0jK5IYaaAl724YxZj1vbI3xuXKo1Yagy0g3TcFaYKJoqGna2HAgMlaKcI3xJYRy5YBy5SDAcJuN7JogSZIhKHNOyyqKhpqkQgHY2Bb77TJjrGj9a4IxJ8HGxjR0GXevZYyZK9WvBDLG2OvAwcgYY2Y4GBljzAwHI2OMmeFgZIwxMxyMjDFmhoORMcbMcDAyxpgZDkbGGDPDwcgYY2aKOBj5BTzGWFErfO4USTCaj2Zh4YA+jDFWYOY5U5iJx4rlVjojI6M4TssY+xd5lZwp8mAUBAFqtRoajYZrjowxqyMiaDQaqNVqi6enfe0D1QLIMVCtBEmSoNfrIen10GdPWG4oAoFzkjFmCUP+PRuIViaKEGUyyGQyiKIIURQLPEgtUMTjMRoLJgoCSBQhAyCZgtGI05ExVhjPws6YL4IoGv4tRBjmVGTBKAgCQGQoqDEUBQGCeTAScTQyxgrEUFHMHYw5w1EQBAgoXMMLUETBKAiCIfyyCymKIihHKPKzRsaYNeSc18VUW8wOxcKEY5HfSgOGlKfssMw/FDksGWMvknfQmULR8EXJv5Wm7Ftp5Lit5toiY8yahDxqiCXyVtrIWDhTQCJ3gTkkGWOWyC/4LO2uUyyzBOYXhpZeBGOMGVkjR4p9+lQOQ8ZYScOj6zDGmBkORsYYM8PByBhjZjgYGWPMDAcjY4yZ4WBkjDEzHIyMMWaGg5ExxsxwMDLGmBkORsYYM2Px1AaMMfam4hojY4yZ4WBkjDEzHIyMMWaGg5ExxsxwMDLGmBkORsYYM8PByBhjZjgYGWPMDAcjY4yZsTgY169fj/Llyz+b3JoXXixcypcvj/Xr11vz95qxV2LxK4Hly5dHWlqatcvD/qXs7OyQmppa3MVgDMArBKMg8LSnzLr4tX1WUvAzRsYYM8PByBhjZjgYGWPMDAcjY4yZ4WBkjDEzHIyMMWaGg5ExxsyUqGAcP348iCjfZffu3UVWlitXriAjI8OifWfMmAEiQp8+fXJ97uzsDCLCiRMnXqls33zzDYgIPXr0eKXjMMbyJi/uAuR0+fJlBAYGAgCqV68OPz8/XLx4EadPnwYAXLx4sTiLV2o5ODggOTkZR44cQbt27Yq7OIyVeCUqGENCQhASEgIA6NSpE/z8/PDnn39i2rRpxVwyxti/SYm6lS4IW1tbLFq0CHFxcdBoNDh16hRat26da5vGjRsjIiICaWlpCAkJQefOnUFEWLp0qWmbvn374vbt20hOTsbatWsxZcqUF96e/uc//0FQUBCePn2K+Ph4bN68GVWrVn2la+nRoweICF999RW2bNkClUqFO3fuYODAgbm2GzhwIO7cuYPk5GSsWbMGSqXyuWMNGjQIly5dgkajwe3btzFx4kQAQJ06dZCcnAwA8PHxARGhZcuWBbqmFi1aICwsDOnp6UhISMDWrVvh5OT0StfMWKlAFgLwWpdOnToREdG8efNyfb5jxw4iIvrjjz9ozpw5FB8fT1lZWdSkSRMCQE5OTpSQkECSJNHWrVtpy5YtFBMTQ0RES5cuJQDUunVrIiJ6+vQpLV++nEJDQykuLo6IiHr06EEA6MqVK5SRkUEAyM7OjqKioig9PZ0WLlxIixcvpvT0dLpx4wYpFIrnyj5jxgwiIurTp0+uz52dnYmI6MSJEwSAevToQURESUlJ9Pvvv9N3331H8fHxRETUrl07AkDt2rUjIqLk5GRatmwZhYaG0pMnT3KVtXv37kREFBYWRpMnT6awsDAiIurfvz85OjrS7NmzTT+3yZMnk6ur60uvqXz58qRSqSghIYFmzJhBixYtIr1eT0FBQa/tZ85YSVGqgrFOnTpERBQREUGiKBIA6tixIxER7dixgwDQmDFjiIhoxYoVpv0WLFhARM+C0RiuvXv3JgAkCAKdPn2aiPIOxhEjRhAR0dixY8nW1pZsbW1p0qRJREQUEBDwysF4/PhxEgSBAJC/vz8RkSmAdu3aRURE3bp1IwAkl8vp3Llzucrq7u5O3bt3p7JlyxIAatq0KRERbdy4kQCQg4MDEREFBwebyvKy92HAHwAABW1JREFUazJ+r4ODg01la9euHbVo0YKDkb3xStWtdOPGjQEAhw4dgiRJAIDg4GBotVrTuvr16wMA/vjjD9N+R44cyXWc+vXrg4iwb98+AAARITQ0NN/zNmnSBADwyy+/ID09Henp6Vi4cCEA4O23337l6woNDTWNLBMSEgJJklCvXj0AQL169UBEOHjwIABAp9Ph0KFDufa/e/cuMjMzsWDBAvz11184cOAAAMDGxsbia7p16xbOnDkDHx8fPHjwAL/++iuqVauGc+fOvfL1MlbSlajGl5fJb6gzQRBMwSKTyQAAmZmZpvU5/9u4DRFBp9Plu01e5x08eDBu3LiRa929e/ee2944rqCzs3Ouz41fm487KJc/+zHIZLI8rzPnZ+br58+fj8mTJ+PEiRP466+/sHv3bixbtizf6ynINen1enz44Yfo1asX2rdvD29vb/Tp0wdDhgyBt7f3C4/NWGlXqmqMxtqKv78/RNFQ9A4dOkCpVOLChQsAgMjISADI1S2lffv2uY4TGRkJURTRpk0bAIaQ8PHxyfe8ly5dAmAYTDUiIgIRERFQKBRo3rx5rlAzOnPmDABg3LhxqFy5MgBD4M2aNQsATN2PjHx9fU2B3rlzZwiCgKtXrwIArl27BkEQEBAQAMAQon5+frn279WrF+7duwdvb2/MmjULt2/fzrXe+EdDoVAU+JpcXV3Rq1cvXL58Gf3794e7uzuuX7+Oli1bPhf4jL1xLL0HRzE8YwRAQUFBRER06NAhWrhwIT158oSysrKoWbNmBIBcXV0pJSWFsrKyaMmSJbRkyRJTY4XxGWPnzp2JiCg+Pp7mzJlDu3fvpuTkZCLK+xmjg4MDxcTEkFarpZUrV9L8+fNJpVJRUlISOTs751n+PXv2EJGhYeXw4cMUFRVFRET37t0z7WN8xvjkyRMKCQmh5cuXU0pKChER+fj4EADq0KEDERGpVCpatmwZHT16lB49epSrrBEREZSVlUVz586lL7/8km7fvk1ERL/99hsBIFEUSaVSkVarpdWrV1PlypVfek3u7u6k1WrpwYMHNGXKFJo3bx5lZmbSzZs3Tc93rb0wVlKUumAsU6YM/fTTTxQXF0cajYbCw8OpTZs2ubbx9vamc+fOkUajoZMnT1KfPn2I6FkwIrvxITo6mlJSUuh///sffffdd0SUdzAiu4Fj165dpFKpSKPRUHBwMDVq1Cjf8iuVSpo+fTrdunWLtFotxcXF0bp166hKlSqmbYzBOH36dNq4cSM9ffqUoqKiaMCAAbmONWjQIIqKiiKVSkUbNmygqVOn5iprzZo16dixY5SamkpXrlyhnj17EtGzYARA3bp1o+vXr1N6ejq1bdu2QNfUsWNHioiIILVaTSqVinbs2EFubm6v7WfOWElRYoPxVRYXF5dcNbmAgAAiIpo9e7bps5o1a5JSqTR9bWy5NnaTKYrFGIzTpk0r9u9ZSVgYKylKVeNLQdStWxeXL19GTEwM1qxZAyLCyJEjodPpsHPnTgDAsGHDsGrVKoSFhWHPnj2oUqUKxowZg5iYGJw8ebKYr4AxVuwsTVSUgBpGfkurVq3o5MmTpNFoSK1WU1hYWK6aoCAINHz4cLp58yZlZmZSUlISbd++nWrWrFmk5eQaY+6FsZKCZwlkJYaFv4qMWV2p6q7DGGNFgYORMcbMcDAyxpgZDkbGGDPDwcgYY2YsDkY7OztrloP9y/HvEytJLA7GxYsX8y8zswo7OzssXry4uIvBmInF/RgZY+xNxc8YGWPMDAcjY4yZ4WBkjDEzHIyMMWaGg5ExxsxwMDLGmBkORsYYM8PByBhjZjgYGWPMDAcjY4yZ4WBkjDEz/x+DRM46VzCc5gAAAABJRU5ErkJggg=="}}]);
\ No newline at end of file
diff --git a/docs/3b464fa6.41841ff9.js b/docs/3b464fa6.41841ff9.js
deleted file mode 100644
index b994066347..0000000000
--- a/docs/3b464fa6.41841ff9.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[60],{113:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return o})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return b}));var a=n(2),i=n(6),r=(n(0),n(290)),c={title:"Data-binding"},o={unversionedId:"expressions",id:"expressions",isDocsHomePage:!1,title:"Data-binding",description:"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.",source:"@site/docs/expressions.md",slug:"/expressions",permalink:"/wave/docs/expressions",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/expressions.md",version:"current",sidebar:"someSidebar",previous:{title:"Realtime Sync",permalink:"/wave/docs/realtime"},next:{title:"Files",permalink:"/wave/docs/files"}},p=[{value:"Rationale",id:"rationale",children:[]},{value:"Syntax",id:"syntax",children:[]},{value:"Functions",id:"functions",children:[]}],l={rightToc:p};function b(e){var t=e.components,n=Object(i.a)(e,["components"]);return Object(r.b)("wrapper",Object(a.a)({},l,n,{components:t,mdxType:"MDXLayout"}),Object(r.b)("p",null,"Some cards in the Wave SDK support ",Object(r.b)("em",{parentName:"p"},"data-binding expressions"),", a mini language that allows computing a card's attribute from the card's data."),Object(r.b)("h2",{id:"rationale"},"Rationale"),Object(r.b)("p",null,"A card's attribute can be set directly when created:"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{4}","{4}":!0}),"card = page.add(f'donut', ui.small_stat_card(\n    box='1 1 2 2',\n    title='Donut',\n    value='2.99',\n))\n")),Object(r.b)("p",null,"The attribute can be updated later using:"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{1}","{1}":!0}),"card.value = '3.49'\n")),Object(r.b)("p",null,"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 ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Internationalization_and_localization"}),"internationalization")," and displaying language-sensitive number, date, and time formatting."),Object(r.b)("p",null,"The above example can be rewritten by pulling the donut price out into ",Object(r.b)("inlineCode",{parentName:"p"},"data"),", and pointing the ",Object(r.b)("inlineCode",{parentName:"p"},"value")," to the ",Object(r.b)("inlineCode",{parentName:"p"},"data")," using an expression:"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{4-5}","{4-5}":!0}),"card = page.add(f'donut', ui.small_stat_card(\n    box='1 1 2 2',\n    title='Donut',\n    value='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    data=dict(price=2.99),\n))\n")),Object(r.b)("p",null,"The attribute can be update later using:"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"card.data.price = 3.49\n")),Object(r.b)("h2",{id:"syntax"},"Syntax"),Object(r.b)("p",null,"Data-binding expressions are indicated with a leading ",Object(r.b)("inlineCode",{parentName:"p"},"=")," (similar to spreadsheet formulae). For example, ",Object(r.b)("inlineCode",{parentName:"p"},"'={{price}}'")," is an expression, but ",Object(r.b)("inlineCode",{parentName:"p"},"'{{price}}'")," is not."),Object(r.b)("p",null,"Placeholders are enclosed between ",Object(r.b)("inlineCode",{parentName:"p"},"{{")," and ",Object(r.b)("inlineCode",{parentName:"p"},"}}"),". The placeholder ",Object(r.b)("inlineCode",{parentName:"p"},"price")," in ",Object(r.b)("inlineCode",{parentName:"p"},"={{price}}")," points to ",Object(r.b)("inlineCode",{parentName:"p"},"data.price"),". If ",Object(r.b)("inlineCode",{parentName:"p"},"data.price")," is ",Object(r.b)("inlineCode",{parentName:"p"},"2.99"),":"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"={{price}}")," translates to ",Object(r.b)("inlineCode",{parentName:"li"},"2.99"),". "),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"=${{price}}")," translates to ",Object(r.b)("inlineCode",{parentName:"li"},"$2.99"),". "),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"=Donuts cost ${{price}}")," translates to ",Object(r.b)("inlineCode",{parentName:"li"},"Donuts cost $2.99"),". ")),Object(r.b)("p",null,"An expression can have multiple placeholders. For example, ",Object(r.b)("inlineCode",{parentName:"p"},"={{product}} costs {{price}}")),Object(r.b)("p",null,"If an expression has a placeholder and nothing else, the ",Object(r.b)("inlineCode",{parentName:"p"},"{{")," and ",Object(r.b)("inlineCode",{parentName:"p"},"}}")," can be elided. For example, ",Object(r.b)("inlineCode",{parentName:"p"},"=price")," is shorthand for ",Object(r.b)("inlineCode",{parentName:"p"},"={{price}}"),"."),Object(r.b)("p",null,"Functions can be applied to placeholders using the general form ",Object(r.b)("inlineCode",{parentName:"p"},"{{function_name placeholder param1=arg1 param2=arg2 ...}}"),". For example ",Object(r.b)("inlineCode",{parentName:"p"},"{{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}")," applies the formatting function ",Object(r.b)("inlineCode",{parentName:"p"},"intl")," to ",Object(r.b)("inlineCode",{parentName:"p"},"price")," with arguments ",Object(r.b)("inlineCode",{parentName:"p"},"minimum_fraction_digits=2")," and ",Object(r.b)("inlineCode",{parentName:"p"},"maximum_fraction_digits=2"),"."),Object(r.b)("h2",{id:"functions"},"Functions"),Object(r.b)("p",null,"Expressions currently support only one function, ",Object(r.b)("inlineCode",{parentName:"p"},"intl"),", which provides language-sensitive number, date, and time formatting using the ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"https://tc39.es/ecma402/"}),"ECMAScript Internationalization API"),"."),Object(r.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(r.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(r.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(r.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(r.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(r.b)("p",{parentName:"div"},"Options in the ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"https://tc39.es/ecma402/"}),"Internationalization API")," are ",Object(r.b)("inlineCode",{parentName:"p"},"camelCased"),", but you can use both ",Object(r.b)("inlineCode",{parentName:"p"},"camelCased")," and ",Object(r.b)("inlineCode",{parentName:"p"},"snake_cased")," options in data-binding expressions. For example, both ",Object(r.b)("inlineCode",{parentName:"p"},"maximum_fraction_digits")," and ",Object(r.b)("inlineCode",{parentName:"p"},"maximumFractionDigits")," are valid."))))}b.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return u}));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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n,a,i={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=i.a.createContext({}),b=function(e){var t=i.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},s=function(e){var t=b(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)}},m=i.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),s=b(n),m=a,u=s["".concat(c,".").concat(m)]||s[m]||d[m]||r;return n?i.a.createElement(u,o(o({ref:t},l),{},{components:n})):i.a.createElement(u,o({ref:t},l))}));function u(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,c=new Array(r);c[0]=m;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o.mdxType="string"==typeof e?e:a,c[1]=o;for(var l=2;l<r;l++)c[l]=n[l];return i.a.createElement.apply(null,c)}return i.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/3b464fa6.92e89dc0.js b/docs/3b464fa6.92e89dc0.js
new file mode 100644
index 0000000000..316966e582
--- /dev/null
+++ b/docs/3b464fa6.92e89dc0.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[64],{117:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return o})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return b}));var a=n(2),i=n(6),r=(n(0),n(292)),c={title:"Data-binding"},o={unversionedId:"expressions",id:"expressions",isDocsHomePage:!1,title:"Data-binding",description:"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.",source:"@site/docs/expressions.md",slug:"/expressions",permalink:"/wave/docs/expressions",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/expressions.md",version:"current",sidebar:"someSidebar",previous:{title:"Background Tasks",permalink:"/wave/docs/background"},next:{title:"Files",permalink:"/wave/docs/files"}},p=[{value:"Rationale",id:"rationale",children:[]},{value:"Syntax",id:"syntax",children:[]},{value:"Functions",id:"functions",children:[]}],l={rightToc:p};function b(e){var t=e.components,n=Object(i.a)(e,["components"]);return Object(r.b)("wrapper",Object(a.a)({},l,n,{components:t,mdxType:"MDXLayout"}),Object(r.b)("p",null,"Some cards in the Wave SDK support ",Object(r.b)("em",{parentName:"p"},"data-binding expressions"),", a mini language that allows computing a card's attribute from the card's data."),Object(r.b)("h2",{id:"rationale"},"Rationale"),Object(r.b)("p",null,"A card's attribute can be set directly when created:"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{4}","{4}":!0}),"card = page.add(f'donut', ui.small_stat_card(\n    box='1 1 2 2',\n    title='Donut',\n    value='2.99',\n))\n")),Object(r.b)("p",null,"The attribute can be updated later using:"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{1}","{1}":!0}),"card.value = '3.49'\n")),Object(r.b)("p",null,"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 ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Internationalization_and_localization"}),"internationalization")," and displaying language-sensitive number, date, and time formatting."),Object(r.b)("p",null,"The above example can be rewritten by pulling the donut price out into ",Object(r.b)("inlineCode",{parentName:"p"},"data"),", and pointing the ",Object(r.b)("inlineCode",{parentName:"p"},"value")," to the ",Object(r.b)("inlineCode",{parentName:"p"},"data")," using an expression:"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{4-5}","{4-5}":!0}),"card = page.add(f'donut', ui.small_stat_card(\n    box='1 1 2 2',\n    title='Donut',\n    value='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    data=dict(price=2.99),\n))\n")),Object(r.b)("p",null,"The attribute can be update later using:"),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"card.data.price = 3.49\n")),Object(r.b)("h2",{id:"syntax"},"Syntax"),Object(r.b)("p",null,"Data-binding expressions are indicated with a leading ",Object(r.b)("inlineCode",{parentName:"p"},"=")," (similar to spreadsheet formulae). For example, ",Object(r.b)("inlineCode",{parentName:"p"},"'={{price}}'")," is an expression, but ",Object(r.b)("inlineCode",{parentName:"p"},"'{{price}}'")," is not."),Object(r.b)("p",null,"Placeholders are enclosed between ",Object(r.b)("inlineCode",{parentName:"p"},"{{")," and ",Object(r.b)("inlineCode",{parentName:"p"},"}}"),". The placeholder ",Object(r.b)("inlineCode",{parentName:"p"},"price")," in ",Object(r.b)("inlineCode",{parentName:"p"},"={{price}}")," points to ",Object(r.b)("inlineCode",{parentName:"p"},"data.price"),". If ",Object(r.b)("inlineCode",{parentName:"p"},"data.price")," is ",Object(r.b)("inlineCode",{parentName:"p"},"2.99"),":"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"={{price}}")," translates to ",Object(r.b)("inlineCode",{parentName:"li"},"2.99"),". "),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"=${{price}}")," translates to ",Object(r.b)("inlineCode",{parentName:"li"},"$2.99"),". "),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"=Donuts cost ${{price}}")," translates to ",Object(r.b)("inlineCode",{parentName:"li"},"Donuts cost $2.99"),". ")),Object(r.b)("p",null,"An expression can have multiple placeholders. For example, ",Object(r.b)("inlineCode",{parentName:"p"},"={{product}} costs {{price}}")),Object(r.b)("p",null,"If an expression has a placeholder and nothing else, the ",Object(r.b)("inlineCode",{parentName:"p"},"{{")," and ",Object(r.b)("inlineCode",{parentName:"p"},"}}")," can be elided. For example, ",Object(r.b)("inlineCode",{parentName:"p"},"=price")," is shorthand for ",Object(r.b)("inlineCode",{parentName:"p"},"={{price}}"),"."),Object(r.b)("p",null,"Functions can be applied to placeholders using the general form ",Object(r.b)("inlineCode",{parentName:"p"},"{{function_name placeholder param1=arg1 param2=arg2 ...}}"),". For example ",Object(r.b)("inlineCode",{parentName:"p"},"{{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}")," applies the formatting function ",Object(r.b)("inlineCode",{parentName:"p"},"intl")," to ",Object(r.b)("inlineCode",{parentName:"p"},"price")," with arguments ",Object(r.b)("inlineCode",{parentName:"p"},"minimum_fraction_digits=2")," and ",Object(r.b)("inlineCode",{parentName:"p"},"maximum_fraction_digits=2"),"."),Object(r.b)("h2",{id:"functions"},"Functions"),Object(r.b)("p",null,"Expressions currently support only one function, ",Object(r.b)("inlineCode",{parentName:"p"},"intl"),", which provides language-sensitive number, date, and time formatting using the ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"https://tc39.es/ecma402/"}),"ECMAScript Internationalization API"),"."),Object(r.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(r.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(r.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(r.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(r.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(r.b)("p",{parentName:"div"},"Options in the ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"https://tc39.es/ecma402/"}),"Internationalization API")," are ",Object(r.b)("inlineCode",{parentName:"p"},"camelCased"),", but you can use both ",Object(r.b)("inlineCode",{parentName:"p"},"camelCased")," and ",Object(r.b)("inlineCode",{parentName:"p"},"snake_cased")," options in data-binding expressions. For example, both ",Object(r.b)("inlineCode",{parentName:"p"},"maximum_fraction_digits")," and ",Object(r.b)("inlineCode",{parentName:"p"},"maximumFractionDigits")," are valid."))))}b.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return u}));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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n,a,i={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=i.a.createContext({}),b=function(e){var t=i.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},s=function(e){var t=b(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)}},m=i.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),s=b(n),m=a,u=s["".concat(c,".").concat(m)]||s[m]||d[m]||r;return n?i.a.createElement(u,o(o({ref:t},l),{},{components:n})):i.a.createElement(u,o({ref:t},l))}));function u(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,c=new Array(r);c[0]=m;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o.mdxType="string"==typeof e?e:a,c[1]=o;for(var l=2;l<r;l++)c[l]=n[l];return i.a.createElement.apply(null,c)}return i.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/3b64911a.77a6696c.js b/docs/3b64911a.77a6696c.js
deleted file mode 100644
index 4256be3729..0000000000
--- a/docs/3b64911a.77a6696c.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[61],{114:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return r})),a.d(t,"metadata",(function(){return b})),a.d(t,"rightToc",(function(){return o})),a.d(t,"default",(function(){return p}));var n=a(2),l=a(6),i=(a(0),a(290)),r={title:"Change Log"},b={unversionedId:"change-log",id:"change-log",isDocsHomePage:!1,title:"Change Log",description:"Versioning",source:"@site/docs/change-log.md",slug:"/change-log",permalink:"/wave/docs/change-log",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/change-log.md",version:"current",sidebar:"someSidebar",next:{title:"Migrating from pre-alpha",permalink:"/wave/docs/migrating-0"}},o=[{value:"Versioning",id:"versioning",children:[]},{value:"Support Policy",id:"support-policy",children:[]},{value:"v0.8.0",id:"v080",children:[]},{value:"v0.7.0",id:"v070",children:[]},{value:"v0.6.0",id:"v060",children:[]},{value:"v0.5.0",id:"v050",children:[]},{value:"v0.4.0",id:"v040",children:[]},{value:"v0.3.1",id:"v031",children:[]},{value:"v0.3.0",id:"v030",children:[]},{value:"v0.2.0",id:"v020",children:[]},{value:"v0.1.4",id:"v014",children:[]},{value:"v0.1.3",id:"v013",children:[]},{value:"v0.1.2",id:"v012",children:[]},{value:"v0.1.1",id:"v011",children:[]},{value:"v0.1.0",id:"v010",children:[]},{value:"v0.0.7",id:"v007",children:[]},{value:"v0.0.6",id:"v006",children:[]},{value:"v0.0.5",id:"v005",children:[]},{value:"v0.0.4",id:"v004",children:[]},{value:"v0.0.3",id:"v003",children:[]},{value:"v0.0.2",id:"v002",children:[]}],c={rightToc:o};function p(e){var t=e.components,a=Object(l.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},c,a,{components:t,mdxType:"MDXLayout"}),Object(i.b)("h2",{id:"versioning"},"Versioning"),Object(i.b)("p",null,"H2O Wave and its Python driver follow ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://semver.org/"}),"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."),Object(i.b)("p",null,"When referencing the ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://pypi.org/project/h2o-wave/"}),Object(i.b)("inlineCode",{parentName:"a"},"h2o-wave")," package")," from your ",Object(i.b)("inlineCode",{parentName:"p"},"requirements.txt")," or ",Object(i.b)("inlineCode",{parentName:"p"},"setup.py"),", you should always use a version constraint such as ",Object(i.b)("inlineCode",{parentName:"p"},">=4.2, <5")," (any version 4.2 or greater, but less than 5), since major releases of H2O Wave do include breaking changes."),Object(i.b)("h2",{id:"support-policy"},"Support Policy"),Object(i.b)("p",null,"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."),Object(i.b)("h2",{id:"v080"},"v0.8.0"),Object(i.b)("p",null,"Oct 20, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.8.0"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Escape Cypress test functions using leading underscore ",Object(i.b)("inlineCode",{parentName:"li"},"_")," if they overlap with Python reserved keywords."),Object(i.b)("li",{parentName:"ul"},"Add data-test attribute to all form components for browser testing."),Object(i.b)("li",{parentName:"ul"},"Add ",Object(i.b)("inlineCode",{parentName:"li"},"trigger")," property to the date picker component."),Object(i.b)("li",{parentName:"ul"},"Allow pre-selecting rows in the table component."),Object(i.b)("li",{parentName:"ul"},"Add ",Object(i.b)("inlineCode",{parentName:"li"},"visible")," property to all components to show/hide them on demand."),Object(i.b)("li",{parentName:"ul"},"Add support for OpenID Connect (OIDC)."),Object(i.b)("li",{parentName:"ul"},"Add documentation on security."))),Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Default HTML page title set to ",Object(i.b)("em",{parentName:"li"},"Wave"),"."),Object(i.b)("li",{parentName:"ul"},"Make % heights work properly for frames inside forms.")))),Object(i.b)("h2",{id:"v070"},"v0.7.0"),Object(i.b)("p",null,"Oct 15, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.7.0"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Hash navigation using context menus."),Object(i.b)("li",{parentName:"ul"},"Allow handling location hash when an open app page is reloaded."),Object(i.b)("li",{parentName:"ul"},"Allow pre-selecting a tab in a tab_card."),Object(i.b)("li",{parentName:"ul"},"Allow setting a height on the file upload component."),Object(i.b)("li",{parentName:"ul"},"Allow justifying buttons left/center/right/spread."),Object(i.b)("li",{parentName:"ul"},"Add data-test attribute to all cards for browser testing."),Object(i.b)("li",{parentName:"ul"},"New documentation website, gallery, guides and tutorials."))),Object(i.b)("li",{parentName:"ul"},"Changed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Fit table height to content height whenever possible."),Object(i.b)("li",{parentName:"ul"},"Improve spacing between form components."),Object(i.b)("li",{parentName:"ul"},"data-test attribute is set based on the names of cards."))),Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Quote CSV data properly while downloading a table component's data."),Object(i.b)("li",{parentName:"ul"},"Don't auto-hide axis labels in plots when data is missing."),Object(i.b)("li",{parentName:"ul"},"Display labels instead of names when a pickers initial values are set."),Object(i.b)("li",{parentName:"ul"},"Handle numeric column sorting in the table component."),Object(i.b)("li",{parentName:"ul"},"Handle icon column sorting in the table component.")))),Object(i.b)("h2",{id:"v060"},"v0.6.0"),Object(i.b)("p",null,"Sep 23, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.6.0"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Apps when launched now automatically use an available free port instead of ",Object(i.b)("inlineCode",{parentName:"li"},"55556"),"."),Object(i.b)("li",{parentName:"ul"},"Client-side redirects to URLs and hashes using ",Object(i.b)("inlineCode",{parentName:"li"},"meta_card.redirect"),"."),Object(i.b)("li",{parentName:"ul"},"Context menus inside forms: ",Object(i.b)("inlineCode",{parentName:"li"},"ui.text_xl()")," and ",Object(i.b)("inlineCode",{parentName:"li"},"ui.text_l()")," now support optional context menus."),Object(i.b)("li",{parentName:"ul"},"Plots now support specifying data values for predictable color encoding and legends."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"ui.markup")," component for rendering HTML inline in forms."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"ui.template")," component for rendering templated HTML inline in forms."),Object(i.b)("li",{parentName:"ul"},"The height of tables can now be controlled using the ",Object(i.b)("inlineCode",{parentName:"li"},"height")," attribute."),Object(i.b)("li",{parentName:"ul"},"Both sorting and group-by now work on the same table column if specified."),Object(i.b)("li",{parentName:"ul"},"Lots of examples on how to use ",Object(i.b)("inlineCode",{parentName:"li"},"ui.table")," sorting, grouping, search, download, etc."),Object(i.b)("li",{parentName:"ul"},"Ability to specify which column in a ",Object(i.b)("inlineCode",{parentName:"li"},"ui.table")," is the primary column, or disable altogether."))),Object(i.b)("li",{parentName:"ul"},"Changed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"ui.text()")," now unconditionally allows embedded HTML tags."),Object(i.b)("li",{parentName:"ul"},"App host now defaults to ",Object(i.b)("inlineCode",{parentName:"li"},"127.0.0.1")," instead of ",Object(i.b)("inlineCode",{parentName:"li"},"localhost"),"."),Object(i.b)("li",{parentName:"ul"},"Footer display in ",Object(i.b)("inlineCode",{parentName:"li"},"ui.table")," is now inferred from usage and displayed automatically."),Object(i.b)("li",{parentName:"ul"},"The ",Object(i.b)("inlineCode",{parentName:"li"},"min_width")," and ",Object(i.b)("inlineCode",{parentName:"li"},"max_width")," attributes for table columns are now strings (consistency)."))),Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Background color rendering bug when page overflows after loading."),Object(i.b)("li",{parentName:"ul"},"Render tooltip properly on toolbar command buttons."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"ui.table()")," rendering bug: remove stray ",Object(i.b)("inlineCode",{parentName:"li"},"0"),"."),Object(i.b)("li",{parentName:"ul"},"Python error stack trace, if any, is displayed on top of all other cards on page.")))),Object(i.b)("h2",{id:"v050"},"v0.5.0"),Object(i.b)("p",null,"Sep 18, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.5.0"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Example for controlling cards with tabs."),Object(i.b)("li",{parentName:"ul"},"Cypress test runner for CI."),Object(i.b)("li",{parentName:"ul"},"Search, sort, filter, group-by, export and custom cell types for table component."))),Object(i.b)("li",{parentName:"ul"},"Changed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Remove semantic validation for stepper component."))),Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Value synchronization bug in textbox component.")))),Object(i.b)("h2",{id:"v040"},"v0.4.0"),Object(i.b)("p",null,"Sep 16, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.4.0"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Trigger attribute to checklist component."))),Object(i.b)("li",{parentName:"ul"},"Changed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Allow same min and max values for the range slider component."),Object(i.b)("li",{parentName:"ul"},"App tests are now automatically and directly translated to Cypress tests when loaded."))),Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Allow removing selected options from the picker component."),Object(i.b)("li",{parentName:"ul"},"Render axis title properly when specified."),Object(i.b)("li",{parentName:"ul"},"Raise informative error message if attempting to use Numpy objects in components."))),Object(i.b)("li",{parentName:"ul"},"Removed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Cypress test bridge removed from server."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"run_tests")," API.")))),Object(i.b)("h2",{id:"v031"},"v0.3.1"),Object(i.b)("p",null,"Sep 8, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.3.1"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Multiselect dropdown checkboxes do not respond when clicked.")))),Object(i.b)("h2",{id:"v030"},"v0.3.0"),Object(i.b)("p",null,"Sep 8, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.3.0"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Native plots inside form cards - ",Object(i.b)("inlineCode",{parentName:"li"},"ui.visualization()"),"."),Object(i.b)("li",{parentName:"ul"},"Vega plots inside form cards - ",Object(i.b)("inlineCode",{parentName:"li"},"ui.vega_visualization()"),".")))),Object(i.b)("h2",{id:"v020"},"v0.2.0"),Object(i.b)("p",null,"Sep 4, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.2.0"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Picker component."),Object(i.b)("li",{parentName:"ul"},"Breadcrumbs component."),Object(i.b)("li",{parentName:"ul"},"Range slider component."),Object(i.b)("li",{parentName:"ul"},"Stepper component."),Object(i.b)("li",{parentName:"ul"},"Allow backend to handle changes to textboxes as you type."),Object(i.b)("li",{parentName:"ul"},"Select / deselect all controls for multivalued dropdown component."),Object(i.b)("li",{parentName:"ul"},"Examples for using plotly plots."),Object(i.b)("li",{parentName:"ul"},"Example for updating vega plots."),Object(i.b)("li",{parentName:"ul"},"OS-specific installations instructions."),Object(i.b)("li",{parentName:"ul"},"Cypress test framework support."))),Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Add .exe extension o Windows executable."),Object(i.b)("li",{parentName:"ul"},"Percentage formatting in Safari.")))),Object(i.b)("h2",{id:"v014"},"v0.1.4"),Object(i.b)("p",null,"Aug 10, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.1.4"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Frame heights are not respected with total height of frames exceeds containing card size")))),Object(i.b)("h2",{id:"v013"},"v0.1.3"),Object(i.b)("p",null,"Aug 10, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.1.3"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"h2o_wave.ui.link()")," now has a ",Object(i.b)("inlineCode",{parentName:"li"},"download")," attribute to work around a ",Object(i.b)("a",Object(n.a)({parentName:"li"},{href:"https://bugzilla.mozilla.org/show_bug.cgi?id=858538"}),"Firefox bug"),"."),Object(i.b)("li",{parentName:"ul"},"Race condition in the interactive tour that caused some examples to not preview properly.")))),Object(i.b)("h2",{id:"v012"},"v0.1.2"),Object(i.b)("p",null,"Aug 7, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.1.2"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"API for ",Object(i.b)("inlineCode",{parentName:"li"},"h2o_wave.core.Expando")," copy, clone and item/attribute deletion."),Object(i.b)("li",{parentName:"ul"},"Migration guide."),Object(i.b)("li",{parentName:"ul"},"Example for setting browser window title."),Object(i.b)("li",{parentName:"ul"},"API and example for Header card: ",Object(i.b)("inlineCode",{parentName:"li"},"h2o_wave.ui.header_card()"),"."),Object(i.b)("li",{parentName:"ul"},"Export ",Object(i.b)("inlineCode",{parentName:"li"},"h2o_wave.core.Ref")," from ",Object(i.b)("inlineCode",{parentName:"li"},"h2o_wave"),"."),Object(i.b)("li",{parentName:"ul"},"API and examples for inline frames inside form cards: ",Object(i.b)("inlineCode",{parentName:"li"},"h2o_wave.ui.frame()"),"."))),Object(i.b)("li",{parentName:"ul"},"Changed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Renamed env var prefix for settings to ",Object(i.b)("inlineCode",{parentName:"li"},"H2O_Q_"),"."))),Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Plot X/Y axis transpose bug.")))),Object(i.b)("h2",{id:"v011"},"v0.1.1"),Object(i.b)("p",null,"Jul 27, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.1.1"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Options for file type and size to file upload component."),Object(i.b)("li",{parentName:"ul"},"API for displaying desktop notifications."),Object(i.b)("li",{parentName:"ul"},"Buttons can now submit specific values instead of only True/False."),Object(i.b)("li",{parentName:"ul"},"Examples for layout and card sizing."),Object(i.b)("li",{parentName:"ul"},"Image card for displaying base64-encoded images."),Object(i.b)("li",{parentName:"ul"},"Example for image card."),Object(i.b)("li",{parentName:"ul"},"Vector graphics API."),Object(i.b)("li",{parentName:"ul"},"Turtle graphics based path generator."),Object(i.b)("li",{parentName:"ul"},"Examples for graphics card."))),Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Re-rendering performance improvements.")))),Object(i.b)("h2",{id:"v010"},"v0.1.0"),Object(i.b)("p",null,"Jul 13, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.1.0"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Example for displaying iframe content > 2MB."),Object(i.b)("li",{parentName:"ul"},"Example for plotting using matplotlib."),Object(i.b)("li",{parentName:"ul"},"Example for plotting using Altair."),Object(i.b)("li",{parentName:"ul"},"Example for plotting using Vega."),Object(i.b)("li",{parentName:"ul"},"Example for plotting using Bokeh."),Object(i.b)("li",{parentName:"ul"},"Example for plotting using custom D3.js Javascript."),Object(i.b)("li",{parentName:"ul"},"Example for live dashboard with stats cards."),Object(i.b)("li",{parentName:"ul"},"Example for master-detail user interfaces using ",Object(i.b)("inlineCode",{parentName:"li"},"ui.table()"),"."),Object(i.b)("li",{parentName:"ul"},"Example for authoring multi-step wizard user interfaces."),Object(i.b)("li",{parentName:"ul"},"Unload API: ",Object(i.b)("inlineCode",{parentName:"li"},"q.unload()")," to delete uploaded files.")))),Object(i.b)("h2",{id:"v007"},"v0.0.7"),Object(i.b)("p",null,"Jul 12, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.0.7"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Download API: ",Object(i.b)("inlineCode",{parentName:"li"},"q.download()"),"."),Object(i.b)("li",{parentName:"ul"},"Vega-lite support: ",Object(i.b)("inlineCode",{parentName:"li"},"ui.vega_card()"),"."),Object(i.b)("li",{parentName:"ul"},"Context menu support to all cards."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"refresh")," attribute on ",Object(i.b)("inlineCode",{parentName:"li"},"meta_card")," allows static pages to stop receiving live updates."),Object(i.b)("li",{parentName:"ul"},"Passing ",Object(i.b)("inlineCode",{parentName:"li"},"-debug")," when starting server displays site stats at ",Object(i.b)("inlineCode",{parentName:"li"},"/_d/site"),"."),Object(i.b)("li",{parentName:"ul"},"Drag and drop support for file upload component."),Object(i.b)("li",{parentName:"ul"},"Template expression support for markdown cards."),Object(i.b)("li",{parentName:"ul"},"All APIs and examples documented."),Object(i.b)("li",{parentName:"ul"},"All 110 examples now ship with the Sphinx documentation."),Object(i.b)("li",{parentName:"ul"},"Documentation now ships with release download."))),Object(i.b)("li",{parentName:"ul"},"Changed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"API consistency: ",Object(i.b)("inlineCode",{parentName:"li"},"ui.vis()")," renamed to ",Object(i.b)("inlineCode",{parentName:"li"},"ui.plot()"),"."),Object(i.b)("li",{parentName:"ul"},"All stats cards now have descriptive names."),Object(i.b)("li",{parentName:"ul"},"API consistency: ",Object(i.b)("inlineCode",{parentName:"li"},"ui.mark.mark")," renamed to ",Object(i.b)("inlineCode",{parentName:"li"},"ui.mark.type"),"."),Object(i.b)("li",{parentName:"ul"},"API consistency: ",Object(i.b)("inlineCode",{parentName:"li"},"page.sync()")," and ",Object(i.b)("inlineCode",{parentName:"li"},"page.push()")," renamed to ",Object(i.b)("inlineCode",{parentName:"li"},"page.save()"),"."))),Object(i.b)("li",{parentName:"ul"},"Removed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"ui.dashboard_card()")," and ",Object(i.b)("inlineCode",{parentName:"li"},"ui.notebook_card()"),".")))),Object(i.b)("h2",{id:"v006"},"v0.0.6"),Object(i.b)("p",null,"Jul 6, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.0.6"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Log network traffic when logging is set to debug mode."),Object(i.b)("li",{parentName:"ul"},"Capture and display unhandled exceptions on the UI."),Object(i.b)("li",{parentName:"ul"},"Routing using location hash."),Object(i.b)("li",{parentName:"ul"},"Toolbar component."),Object(i.b)("li",{parentName:"ul"},"Tabs component."),Object(i.b)("li",{parentName:"ul"},"Nav component."),Object(i.b)("li",{parentName:"ul"},"Upload API: ",Object(i.b)("inlineCode",{parentName:"li"},"q.upload()"),"."))),Object(i.b)("li",{parentName:"ul"},"Changed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"q.session")," renamed to ",Object(i.b)("inlineCode",{parentName:"li"},"q.user"))))),Object(i.b)("h2",{id:"v005"},"v0.0.5"),Object(i.b)("p",null,"Jun 29, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.0.5"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Add configure() API to configure environment before launching.")))),Object(i.b)("h2",{id:"v004"},"v0.0.4"),Object(i.b)("p",null,"Jun 26, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.0.4"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Multi-user and multi-client support: launch apps in ",Object(i.b)("inlineCode",{parentName:"li"},"multicast")," or ",Object(i.b)("inlineCode",{parentName:"li"},"unicast")," modes in addition to ",Object(i.b)("inlineCode",{parentName:"li"},"broadcast")," mode."),Object(i.b)("li",{parentName:"ul"},"Client-specific data can now be stored and accessed via ",Object(i.b)("inlineCode",{parentName:"li"},"q.client"),", similar to ",Object(i.b)("inlineCode",{parentName:"li"},"q.session")," and ",Object(i.b)("inlineCode",{parentName:"li"},"q.app"),"."),Object(i.b)("li",{parentName:"ul"},"Simpler page referencing: ",Object(i.b)("inlineCode",{parentName:"li"},"import site")," can be used instead of ",Object(i.b)("inlineCode",{parentName:"li"},"site = Site()"),"."))),Object(i.b)("li",{parentName:"ul"},"Changed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Apps now lauch in ",Object(i.b)("inlineCode",{parentName:"li"},"unicast")," mode by default instead of ",Object(i.b)("inlineCode",{parentName:"li"},"broadcast")," mode.")))),Object(i.b)("h2",{id:"v003"},"v0.0.3"),Object(i.b)("p",null,"Jun 19, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.0.3"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Make ",Object(i.b)("inlineCode",{parentName:"li"},"Expando")," data structure available for apps.")))),Object(i.b)("h2",{id:"v002"},"v0.0.2"),Object(i.b)("p",null,"Jun 17, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.0.2"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Initial version"),Object(i.b)("li",{parentName:"ul"},"v0.0.1"),Object(i.b)("li",{parentName:"ul"},"Package stub")))}p.isMDXComponent=!0},290:function(e,t,a){"use strict";a.d(t,"a",(function(){return u})),a.d(t,"b",(function(){return s}));var n=a(0),l=a.n(n);function i(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function r(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 b(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?r(Object(a),!0).forEach((function(t){i(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):r(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function o(e,t){if(null==e)return{};var a,n,l=function(e,t){if(null==e)return{};var a,n,l={},i=Object.keys(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||(l[a]=e[a]);return l}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(l[a]=e[a])}return l}var c=l.a.createContext({}),p=function(e){var t=l.a.useContext(c),a=t;return e&&(a="function"==typeof e?e(t):b(b({},t),e)),a},u=function(e){var t=p(e.components);return l.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return l.a.createElement(l.a.Fragment,{},t)}},d=l.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,r=e.parentName,c=o(e,["components","mdxType","originalType","parentName"]),u=p(a),d=n,s=u["".concat(r,".").concat(d)]||u[d]||m[d]||i;return a?l.a.createElement(s,b(b({ref:t},c),{},{components:a})):l.a.createElement(s,b({ref:t},c))}));function s(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,r=new Array(i);r[0]=d;var b={};for(var o in t)hasOwnProperty.call(t,o)&&(b[o]=t[o]);b.originalType=e,b.mdxType="string"==typeof e?e:n,r[1]=b;for(var c=2;c<i;c++)r[c]=a[c];return l.a.createElement.apply(null,r)}return l.a.createElement.apply(null,a)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/3b64911a.84bb370d.js b/docs/3b64911a.84bb370d.js
new file mode 100644
index 0000000000..a33f6618bb
--- /dev/null
+++ b/docs/3b64911a.84bb370d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[65],{118:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return r})),a.d(t,"metadata",(function(){return b})),a.d(t,"rightToc",(function(){return o})),a.d(t,"default",(function(){return p}));var n=a(2),l=a(6),i=(a(0),a(292)),r={title:"Change Log"},b={unversionedId:"change-log",id:"change-log",isDocsHomePage:!1,title:"Change Log",description:"Versioning",source:"@site/docs/change-log.md",slug:"/change-log",permalink:"/wave/docs/change-log",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/change-log.md",version:"current",sidebar:"someSidebar",next:{title:"Migrating from 0.8",permalink:"/wave/docs/migrating-0-8"}},o=[{value:"Versioning",id:"versioning",children:[]},{value:"Support Policy",id:"support-policy",children:[]},{value:"v0.9.0",id:"v090",children:[]},{value:"v0.8.1",id:"v081",children:[]},{value:"v0.8.0",id:"v080",children:[]},{value:"v0.7.0",id:"v070",children:[]},{value:"v0.6.0",id:"v060",children:[]},{value:"v0.5.0",id:"v050",children:[]},{value:"v0.4.0",id:"v040",children:[]},{value:"v0.3.1",id:"v031",children:[]},{value:"v0.3.0",id:"v030",children:[]},{value:"v0.2.0",id:"v020",children:[]},{value:"v0.1.4",id:"v014",children:[]},{value:"v0.1.3",id:"v013",children:[]},{value:"v0.1.2",id:"v012",children:[]},{value:"v0.1.1",id:"v011",children:[]},{value:"v0.1.0",id:"v010",children:[]},{value:"v0.0.7",id:"v007",children:[]},{value:"v0.0.6",id:"v006",children:[]},{value:"v0.0.5",id:"v005",children:[]},{value:"v0.0.4",id:"v004",children:[]},{value:"v0.0.3",id:"v003",children:[]},{value:"v0.0.2",id:"v002",children:[]}],c={rightToc:o};function p(e){var t=e.components,a=Object(l.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},c,a,{components:t,mdxType:"MDXLayout"}),Object(i.b)("h2",{id:"versioning"},"Versioning"),Object(i.b)("p",null,"H2O Wave and its Python driver follow ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://semver.org/"}),"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."),Object(i.b)("p",null,"When referencing the ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://pypi.org/project/h2o-wave/"}),Object(i.b)("inlineCode",{parentName:"a"},"h2o-wave")," package")," from your ",Object(i.b)("inlineCode",{parentName:"p"},"requirements.txt")," or ",Object(i.b)("inlineCode",{parentName:"p"},"setup.py"),", you should always use a version constraint such as ",Object(i.b)("inlineCode",{parentName:"p"},">=4.2, <5")," (any version 4.2 or greater, but less than 5), since major releases of H2O Wave do include breaking changes."),Object(i.b)("h2",{id:"support-policy"},"Support Policy"),Object(i.b)("p",null,"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."),Object(i.b)("h2",{id:"v090"},"v0.9.0"),Object(i.b)("p",null,"Oct 28, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.9.0"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"ASGI compatibility: Wave apps can now be run using an ASGI server."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"@app")," decorator to identify primary query handler in an app."),Object(i.b)("li",{parentName:"ul"},"Live-reload for apps."),Object(i.b)("li",{parentName:"ul"},"New ",Object(i.b)("inlineCode",{parentName:"li"},"wave")," CLI and ",Object(i.b)("inlineCode",{parentName:"li"},"wave run")," command."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"q.run()")," and ",Object(i.b)("inlineCode",{parentName:"li"},"q.exec()")," APIs for running background tasks."),Object(i.b)("li",{parentName:"ul"},"Display server version/build at startup."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"AsyncSite")," for updating other pages from an app without blocking the main thread."),Object(i.b)("li",{parentName:"ul"},"Drop or clear pages from a site using ",Object(i.b)("inlineCode",{parentName:"li"},"del site[route]"),"."))),Object(i.b)("li",{parentName:"ul"},"Changed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"All HTTP calls now use non-blocking asyncio using the ",Object(i.b)("inlineCode",{parentName:"li"},"httpx")," library."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"listen()")," is deprecated."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"H2O_WAVE_INTERNAL_ADDRESS")," and ",Object(i.b)("inlineCode",{parentName:"li"},"H2O_WAVE_EXTERNAL_ADDRESS")," are deprecated."),Object(i.b)("li",{parentName:"ul"},"An app's UI is now cleared when an app crashes or is terminated."),Object(i.b)("li",{parentName:"ul"},"All examples migrated to use ",Object(i.b)("inlineCode",{parentName:"li"},"@app")," instead of ",Object(i.b)("inlineCode",{parentName:"li"},"listen()"),"."),Object(i.b)("li",{parentName:"ul"},"Server binary renamed to ",Object(i.b)("inlineCode",{parentName:"li"},"waved")," (as in ",Object(i.b)("inlineCode",{parentName:"li"},"wave")," daemon)."),Object(i.b)("li",{parentName:"ul"},"Apps using ",Object(i.b)("inlineCode",{parentName:"li"},"@app")," must be run using ",Object(i.b)("inlineCode",{parentName:"li"},"wave run"),"."))),Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Performance and concurrency improvements across the board."),Object(i.b)("li",{parentName:"ul"},"Stability improvements to the Wave Tour.")))),Object(i.b)("h2",{id:"v081"},"v0.8.1"),Object(i.b)("p",null,"Oct 26, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.8.1"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Enable ",Object(i.b)("inlineCode",{parentName:"li"},"visible")," properly on ",Object(i.b)("inlineCode",{parentName:"li"},"text_*")," components."),Object(i.b)("li",{parentName:"ul"},"Fix checkbox value unchecking."),Object(i.b)("li",{parentName:"ul"},"Improve stepper component layout.")))),Object(i.b)("h2",{id:"v080"},"v0.8.0"),Object(i.b)("p",null,"Oct 20, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.8.0"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Escape Cypress test functions using leading underscore ",Object(i.b)("inlineCode",{parentName:"li"},"_")," if they overlap with Python reserved keywords."),Object(i.b)("li",{parentName:"ul"},"Add data-test attribute to all form components for browser testing."),Object(i.b)("li",{parentName:"ul"},"Add ",Object(i.b)("inlineCode",{parentName:"li"},"trigger")," property to the date picker component."),Object(i.b)("li",{parentName:"ul"},"Allow pre-selecting rows in the table component."),Object(i.b)("li",{parentName:"ul"},"Add ",Object(i.b)("inlineCode",{parentName:"li"},"visible")," property to all components to show/hide them on demand."),Object(i.b)("li",{parentName:"ul"},"Add support for OpenID Connect (OIDC)."),Object(i.b)("li",{parentName:"ul"},"Add documentation on security."))),Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Default HTML page title set to ",Object(i.b)("em",{parentName:"li"},"Wave"),"."),Object(i.b)("li",{parentName:"ul"},"Make % heights work properly for frames inside forms.")))),Object(i.b)("h2",{id:"v070"},"v0.7.0"),Object(i.b)("p",null,"Oct 15, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.7.0"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Hash navigation using context menus."),Object(i.b)("li",{parentName:"ul"},"Allow handling location hash when an open app page is reloaded."),Object(i.b)("li",{parentName:"ul"},"Allow pre-selecting a tab in a tab_card."),Object(i.b)("li",{parentName:"ul"},"Allow setting a height on the file upload component."),Object(i.b)("li",{parentName:"ul"},"Allow justifying buttons left/center/right/spread."),Object(i.b)("li",{parentName:"ul"},"Add data-test attribute to all cards for browser testing."),Object(i.b)("li",{parentName:"ul"},"New documentation website, gallery, guides and tutorials."))),Object(i.b)("li",{parentName:"ul"},"Changed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Fit table height to content height whenever possible."),Object(i.b)("li",{parentName:"ul"},"Improve spacing between form components."),Object(i.b)("li",{parentName:"ul"},"data-test attribute is set based on the names of cards."))),Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Quote CSV data properly while downloading a table component's data."),Object(i.b)("li",{parentName:"ul"},"Don't auto-hide axis labels in plots when data is missing."),Object(i.b)("li",{parentName:"ul"},"Display labels instead of names when a pickers initial values are set."),Object(i.b)("li",{parentName:"ul"},"Handle numeric column sorting in the table component."),Object(i.b)("li",{parentName:"ul"},"Handle icon column sorting in the table component.")))),Object(i.b)("h2",{id:"v060"},"v0.6.0"),Object(i.b)("p",null,"Sep 23, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.6.0"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Apps when launched now automatically use an available free port instead of ",Object(i.b)("inlineCode",{parentName:"li"},"55556"),"."),Object(i.b)("li",{parentName:"ul"},"Client-side redirects to URLs and hashes using ",Object(i.b)("inlineCode",{parentName:"li"},"meta_card.redirect"),"."),Object(i.b)("li",{parentName:"ul"},"Context menus inside forms: ",Object(i.b)("inlineCode",{parentName:"li"},"ui.text_xl()")," and ",Object(i.b)("inlineCode",{parentName:"li"},"ui.text_l()")," now support optional context menus."),Object(i.b)("li",{parentName:"ul"},"Plots now support specifying data values for predictable color encoding and legends."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"ui.markup")," component for rendering HTML inline in forms."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"ui.template")," component for rendering templated HTML inline in forms."),Object(i.b)("li",{parentName:"ul"},"The height of tables can now be controlled using the ",Object(i.b)("inlineCode",{parentName:"li"},"height")," attribute."),Object(i.b)("li",{parentName:"ul"},"Both sorting and group-by now work on the same table column if specified."),Object(i.b)("li",{parentName:"ul"},"Lots of examples on how to use ",Object(i.b)("inlineCode",{parentName:"li"},"ui.table")," sorting, grouping, search, download, etc."),Object(i.b)("li",{parentName:"ul"},"Ability to specify which column in a ",Object(i.b)("inlineCode",{parentName:"li"},"ui.table")," is the primary column, or disable altogether."))),Object(i.b)("li",{parentName:"ul"},"Changed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"ui.text()")," now unconditionally allows embedded HTML tags."),Object(i.b)("li",{parentName:"ul"},"App host now defaults to ",Object(i.b)("inlineCode",{parentName:"li"},"127.0.0.1")," instead of ",Object(i.b)("inlineCode",{parentName:"li"},"localhost"),"."),Object(i.b)("li",{parentName:"ul"},"Footer display in ",Object(i.b)("inlineCode",{parentName:"li"},"ui.table")," is now inferred from usage and displayed automatically."),Object(i.b)("li",{parentName:"ul"},"The ",Object(i.b)("inlineCode",{parentName:"li"},"min_width")," and ",Object(i.b)("inlineCode",{parentName:"li"},"max_width")," attributes for table columns are now strings (consistency)."))),Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Background color rendering bug when page overflows after loading."),Object(i.b)("li",{parentName:"ul"},"Render tooltip properly on toolbar command buttons."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"ui.table()")," rendering bug: remove stray ",Object(i.b)("inlineCode",{parentName:"li"},"0"),"."),Object(i.b)("li",{parentName:"ul"},"Python error stack trace, if any, is displayed on top of all other cards on page.")))),Object(i.b)("h2",{id:"v050"},"v0.5.0"),Object(i.b)("p",null,"Sep 18, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.5.0"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Example for controlling cards with tabs."),Object(i.b)("li",{parentName:"ul"},"Cypress test runner for CI."),Object(i.b)("li",{parentName:"ul"},"Search, sort, filter, group-by, export and custom cell types for table component."))),Object(i.b)("li",{parentName:"ul"},"Changed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Remove semantic validation for stepper component."))),Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Value synchronization bug in textbox component.")))),Object(i.b)("h2",{id:"v040"},"v0.4.0"),Object(i.b)("p",null,"Sep 16, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.4.0"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Trigger attribute to checklist component."))),Object(i.b)("li",{parentName:"ul"},"Changed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Allow same min and max values for the range slider component."),Object(i.b)("li",{parentName:"ul"},"App tests are now automatically and directly translated to Cypress tests when loaded."))),Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Allow removing selected options from the picker component."),Object(i.b)("li",{parentName:"ul"},"Render axis title properly when specified."),Object(i.b)("li",{parentName:"ul"},"Raise informative error message if attempting to use Numpy objects in components."))),Object(i.b)("li",{parentName:"ul"},"Removed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Cypress test bridge removed from server."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"run_tests")," API.")))),Object(i.b)("h2",{id:"v031"},"v0.3.1"),Object(i.b)("p",null,"Sep 8, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.3.1"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Multiselect dropdown checkboxes do not respond when clicked.")))),Object(i.b)("h2",{id:"v030"},"v0.3.0"),Object(i.b)("p",null,"Sep 8, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.3.0"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Native plots inside form cards - ",Object(i.b)("inlineCode",{parentName:"li"},"ui.visualization()"),"."),Object(i.b)("li",{parentName:"ul"},"Vega plots inside form cards - ",Object(i.b)("inlineCode",{parentName:"li"},"ui.vega_visualization()"),".")))),Object(i.b)("h2",{id:"v020"},"v0.2.0"),Object(i.b)("p",null,"Sep 4, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.2.0"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Picker component."),Object(i.b)("li",{parentName:"ul"},"Breadcrumbs component."),Object(i.b)("li",{parentName:"ul"},"Range slider component."),Object(i.b)("li",{parentName:"ul"},"Stepper component."),Object(i.b)("li",{parentName:"ul"},"Allow backend to handle changes to textboxes as you type."),Object(i.b)("li",{parentName:"ul"},"Select / deselect all controls for multivalued dropdown component."),Object(i.b)("li",{parentName:"ul"},"Examples for using plotly plots."),Object(i.b)("li",{parentName:"ul"},"Example for updating vega plots."),Object(i.b)("li",{parentName:"ul"},"OS-specific installations instructions."),Object(i.b)("li",{parentName:"ul"},"Cypress test framework support."))),Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Add .exe extension o Windows executable."),Object(i.b)("li",{parentName:"ul"},"Percentage formatting in Safari.")))),Object(i.b)("h2",{id:"v014"},"v0.1.4"),Object(i.b)("p",null,"Aug 10, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.1.4"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Frame heights are not respected with total height of frames exceeds containing card size")))),Object(i.b)("h2",{id:"v013"},"v0.1.3"),Object(i.b)("p",null,"Aug 10, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.1.3"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"h2o_wave.ui.link()")," now has a ",Object(i.b)("inlineCode",{parentName:"li"},"download")," attribute to work around a ",Object(i.b)("a",Object(n.a)({parentName:"li"},{href:"https://bugzilla.mozilla.org/show_bug.cgi?id=858538"}),"Firefox bug"),"."),Object(i.b)("li",{parentName:"ul"},"Race condition in the interactive tour that caused some examples to not preview properly.")))),Object(i.b)("h2",{id:"v012"},"v0.1.2"),Object(i.b)("p",null,"Aug 7, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.1.2"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"API for ",Object(i.b)("inlineCode",{parentName:"li"},"h2o_wave.core.Expando")," copy, clone and item/attribute deletion."),Object(i.b)("li",{parentName:"ul"},"Migration guide."),Object(i.b)("li",{parentName:"ul"},"Example for setting browser window title."),Object(i.b)("li",{parentName:"ul"},"API and example for Header card: ",Object(i.b)("inlineCode",{parentName:"li"},"h2o_wave.ui.header_card()"),"."),Object(i.b)("li",{parentName:"ul"},"Export ",Object(i.b)("inlineCode",{parentName:"li"},"h2o_wave.core.Ref")," from ",Object(i.b)("inlineCode",{parentName:"li"},"h2o_wave"),"."),Object(i.b)("li",{parentName:"ul"},"API and examples for inline frames inside form cards: ",Object(i.b)("inlineCode",{parentName:"li"},"h2o_wave.ui.frame()"),"."))),Object(i.b)("li",{parentName:"ul"},"Changed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Renamed env var prefix for settings to ",Object(i.b)("inlineCode",{parentName:"li"},"H2O_Q_"),"."))),Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Plot X/Y axis transpose bug.")))),Object(i.b)("h2",{id:"v011"},"v0.1.1"),Object(i.b)("p",null,"Jul 27, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.1.1"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Options for file type and size to file upload component."),Object(i.b)("li",{parentName:"ul"},"API for displaying desktop notifications."),Object(i.b)("li",{parentName:"ul"},"Buttons can now submit specific values instead of only True/False."),Object(i.b)("li",{parentName:"ul"},"Examples for layout and card sizing."),Object(i.b)("li",{parentName:"ul"},"Image card for displaying base64-encoded images."),Object(i.b)("li",{parentName:"ul"},"Example for image card."),Object(i.b)("li",{parentName:"ul"},"Vector graphics API."),Object(i.b)("li",{parentName:"ul"},"Turtle graphics based path generator."),Object(i.b)("li",{parentName:"ul"},"Examples for graphics card."))),Object(i.b)("li",{parentName:"ul"},"Fixed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Re-rendering performance improvements.")))),Object(i.b)("h2",{id:"v010"},"v0.1.0"),Object(i.b)("p",null,"Jul 13, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.1.0"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Example for displaying iframe content > 2MB."),Object(i.b)("li",{parentName:"ul"},"Example for plotting using matplotlib."),Object(i.b)("li",{parentName:"ul"},"Example for plotting using Altair."),Object(i.b)("li",{parentName:"ul"},"Example for plotting using Vega."),Object(i.b)("li",{parentName:"ul"},"Example for plotting using Bokeh."),Object(i.b)("li",{parentName:"ul"},"Example for plotting using custom D3.js Javascript."),Object(i.b)("li",{parentName:"ul"},"Example for live dashboard with stats cards."),Object(i.b)("li",{parentName:"ul"},"Example for master-detail user interfaces using ",Object(i.b)("inlineCode",{parentName:"li"},"ui.table()"),"."),Object(i.b)("li",{parentName:"ul"},"Example for authoring multi-step wizard user interfaces."),Object(i.b)("li",{parentName:"ul"},"Unload API: ",Object(i.b)("inlineCode",{parentName:"li"},"q.unload()")," to delete uploaded files.")))),Object(i.b)("h2",{id:"v007"},"v0.0.7"),Object(i.b)("p",null,"Jul 12, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.0.7"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Download API: ",Object(i.b)("inlineCode",{parentName:"li"},"q.download()"),"."),Object(i.b)("li",{parentName:"ul"},"Vega-lite support: ",Object(i.b)("inlineCode",{parentName:"li"},"ui.vega_card()"),"."),Object(i.b)("li",{parentName:"ul"},"Context menu support to all cards."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"refresh")," attribute on ",Object(i.b)("inlineCode",{parentName:"li"},"meta_card")," allows static pages to stop receiving live updates."),Object(i.b)("li",{parentName:"ul"},"Passing ",Object(i.b)("inlineCode",{parentName:"li"},"-debug")," when starting server displays site stats at ",Object(i.b)("inlineCode",{parentName:"li"},"/_d/site"),"."),Object(i.b)("li",{parentName:"ul"},"Drag and drop support for file upload component."),Object(i.b)("li",{parentName:"ul"},"Template expression support for markdown cards."),Object(i.b)("li",{parentName:"ul"},"All APIs and examples documented."),Object(i.b)("li",{parentName:"ul"},"All 110 examples now ship with the Sphinx documentation."),Object(i.b)("li",{parentName:"ul"},"Documentation now ships with release download."))),Object(i.b)("li",{parentName:"ul"},"Changed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"API consistency: ",Object(i.b)("inlineCode",{parentName:"li"},"ui.vis()")," renamed to ",Object(i.b)("inlineCode",{parentName:"li"},"ui.plot()"),"."),Object(i.b)("li",{parentName:"ul"},"All stats cards now have descriptive names."),Object(i.b)("li",{parentName:"ul"},"API consistency: ",Object(i.b)("inlineCode",{parentName:"li"},"ui.mark.mark")," renamed to ",Object(i.b)("inlineCode",{parentName:"li"},"ui.mark.type"),"."),Object(i.b)("li",{parentName:"ul"},"API consistency: ",Object(i.b)("inlineCode",{parentName:"li"},"page.sync()")," and ",Object(i.b)("inlineCode",{parentName:"li"},"page.push()")," renamed to ",Object(i.b)("inlineCode",{parentName:"li"},"page.save()"),"."))),Object(i.b)("li",{parentName:"ul"},"Removed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"ui.dashboard_card()")," and ",Object(i.b)("inlineCode",{parentName:"li"},"ui.notebook_card()"),".")))),Object(i.b)("h2",{id:"v006"},"v0.0.6"),Object(i.b)("p",null,"Jul 6, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.0.6"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Log network traffic when logging is set to debug mode."),Object(i.b)("li",{parentName:"ul"},"Capture and display unhandled exceptions on the UI."),Object(i.b)("li",{parentName:"ul"},"Routing using location hash."),Object(i.b)("li",{parentName:"ul"},"Toolbar component."),Object(i.b)("li",{parentName:"ul"},"Tabs component."),Object(i.b)("li",{parentName:"ul"},"Nav component."),Object(i.b)("li",{parentName:"ul"},"Upload API: ",Object(i.b)("inlineCode",{parentName:"li"},"q.upload()"),"."))),Object(i.b)("li",{parentName:"ul"},"Changed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"q.session")," renamed to ",Object(i.b)("inlineCode",{parentName:"li"},"q.user"))))),Object(i.b)("h2",{id:"v005"},"v0.0.5"),Object(i.b)("p",null,"Jun 29, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.0.5"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Add configure() API to configure environment before launching.")))),Object(i.b)("h2",{id:"v004"},"v0.0.4"),Object(i.b)("p",null,"Jun 26, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.0.4"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Multi-user and multi-client support: launch apps in ",Object(i.b)("inlineCode",{parentName:"li"},"multicast")," or ",Object(i.b)("inlineCode",{parentName:"li"},"unicast")," modes in addition to ",Object(i.b)("inlineCode",{parentName:"li"},"broadcast")," mode."),Object(i.b)("li",{parentName:"ul"},"Client-specific data can now be stored and accessed via ",Object(i.b)("inlineCode",{parentName:"li"},"q.client"),", similar to ",Object(i.b)("inlineCode",{parentName:"li"},"q.session")," and ",Object(i.b)("inlineCode",{parentName:"li"},"q.app"),"."),Object(i.b)("li",{parentName:"ul"},"Simpler page referencing: ",Object(i.b)("inlineCode",{parentName:"li"},"import site")," can be used instead of ",Object(i.b)("inlineCode",{parentName:"li"},"site = Site()"),"."))),Object(i.b)("li",{parentName:"ul"},"Changed",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Apps now lauch in ",Object(i.b)("inlineCode",{parentName:"li"},"unicast")," mode by default instead of ",Object(i.b)("inlineCode",{parentName:"li"},"broadcast")," mode.")))),Object(i.b)("h2",{id:"v003"},"v0.0.3"),Object(i.b)("p",null,"Jun 19, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.0.3"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Added",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"Make ",Object(i.b)("inlineCode",{parentName:"li"},"Expando")," data structure available for apps.")))),Object(i.b)("h2",{id:"v002"},"v0.0.2"),Object(i.b)("p",null,"Jun 17, 2020 - ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/tag/v0.0.2"}),"Download")),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Initial version"),Object(i.b)("li",{parentName:"ul"},"v0.0.1"),Object(i.b)("li",{parentName:"ul"},"Package stub")))}p.isMDXComponent=!0},292:function(e,t,a){"use strict";a.d(t,"a",(function(){return u})),a.d(t,"b",(function(){return s}));var n=a(0),l=a.n(n);function i(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function r(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 b(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?r(Object(a),!0).forEach((function(t){i(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):r(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function o(e,t){if(null==e)return{};var a,n,l=function(e,t){if(null==e)return{};var a,n,l={},i=Object.keys(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||(l[a]=e[a]);return l}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(l[a]=e[a])}return l}var c=l.a.createContext({}),p=function(e){var t=l.a.useContext(c),a=t;return e&&(a="function"==typeof e?e(t):b(b({},t),e)),a},u=function(e){var t=p(e.components);return l.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return l.a.createElement(l.a.Fragment,{},t)}},d=l.a.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,r=e.parentName,c=o(e,["components","mdxType","originalType","parentName"]),u=p(a),d=n,s=u["".concat(r,".").concat(d)]||u[d]||m[d]||i;return a?l.a.createElement(s,b(b({ref:t},c),{},{components:a})):l.a.createElement(s,b({ref:t},c))}));function s(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,r=new Array(i);r[0]=d;var b={};for(var o in t)hasOwnProperty.call(t,o)&&(b[o]=t[o]);b.originalType=e,b.mdxType="string"==typeof e?e:n,r[1]=b;for(var c=2;c<i;c++)r[c]=a[c];return l.a.createElement.apply(null,r)}return l.a.createElement.apply(null,a)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/3b8c55ea.20d79e43.js b/docs/3b8c55ea.20d79e43.js
new file mode 100644
index 0000000000..e427007049
--- /dev/null
+++ b/docs/3b8c55ea.20d79e43.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[66],{119:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return o})),a.d(t,"metadata",(function(){return i})),a.d(t,"rightToc",(function(){return c})),a.d(t,"default",(function(){return s}));var n=a(2),r=a(6),A=(a(0),a(292)),o={title:"Installation"},i={unversionedId:"installation",id:"installation",isDocsHomePage:!1,title:"Installation",description:"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.",source:"@site/docs/installation.md",slug:"/installation",permalink:"/wave/docs/installation",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/installation.md",version:"current",sidebar:"someSidebar",previous:{title:"Introduction",permalink:"/wave/docs/getting-started"},next:{title:"A Tour of Wave",permalink:"/wave/docs/tour"}},c=[{value:"Prerequisites",id:"prerequisites",children:[]},{value:"Setup",id:"setup",children:[{value:"Step 1: Download",id:"step-1-download",children:[]},{value:"Step 2: Extract",id:"step-2-extract",children:[]},{value:"Step 3: Move",id:"step-3-move",children:[]},{value:"Step 4: Run",id:"step-4-run",children:[]},{value:"Step 5: Verify",id:"step-5-verify",children:[]}]}],l={rightToc:c};function s(e){var t=e.components,o=Object(r.a)(e,["components"]);return Object(A.b)("wrapper",Object(n.a)({},l,o,{components:t,mdxType:"MDXLayout"}),Object(A.b)("p",null,"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."),Object(A.b)("h2",{id:"prerequisites"},"Prerequisites"),Object(A.b)("p",null,"H2O Wave runs on Linux, macOS, and Windows, having Python 3.6.1 or later."),Object(A.b)("h2",{id:"setup"},"Setup"),Object(A.b)("h3",{id:"step-1-download"},"Step 1: Download"),Object(A.b)("p",null,Object(A.b)("a",Object(n.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/latest"}),"Download the H2O Wave SDK")," for your platform."),Object(A.b)("h3",{id:"step-2-extract"},"Step 2: Extract"),Object(A.b)("p",null,"Extract your download."),Object(A.b)("pre",null,Object(A.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"tar -xzf wave-x.y.z-linux-amd64.tar.gz\n")),Object(A.b)("h3",{id:"step-3-move"},"Step 3: Move"),Object(A.b)("p",null,"Move it to a convenient location, say ",Object(A.b)("inlineCode",{parentName:"p"},"$HOME/wave/"),"."),Object(A.b)("pre",null,Object(A.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"})," mv wave-x.y.z-linux-amd64 $HOME/wave\n")),Object(A.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(A.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(A.b)("h5",{parentName:"div"},Object(A.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(A.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(A.b)("path",Object(n.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(A.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(A.b)("p",{parentName:"div"},"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."))),Object(A.b)("p",null,"Inspect your ",Object(A.b)("inlineCode",{parentName:"p"},"$HOME/wave")," directory. You should see the following content:"),Object(A.b)("pre",null,Object(A.b)("code",Object(n.a)({parentName:"pre"},{}),".\n\u251c\u2500\u2500 examples/       ... Examples\n\u251c\u2500\u2500 test/           ... Browser testing framework\n\u251c\u2500\u2500 www/            ... Wave server web root (do not modify!)\n\u2514\u2500\u2500 waved           ... Wave server executable\n")),Object(A.b)("h3",{id:"step-4-run"},"Step 4: Run"),Object(A.b)("p",null,"Go to your Wave directory."),Object(A.b)("pre",null,Object(A.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave\n")),Object(A.b)("p",null,"Start the Wave server."),Object(A.b)("pre",null,Object(A.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"./waved\n")),Object(A.b)("pre",null,Object(A.b)("code",Object(n.a)({parentName:"pre"},{}),'2020/10/27 16:16:34 # \n2020/10/27 16:16:34 # \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n2020/10/27 16:16:34 # \u2502  \u250c    \u250c \u250c\u2500\u2500\u2510 \u250c  \u250c \u250c\u2500\u2500\u2510  \u2502 H2O Wave\n2020/10/27 16:16:34 # \u2502  \u2502 \u250c\u2500\u2500\u2518 \u2502\u2500\u2500\u2502 \u2502  \u2502 \u2514\u2510    \u2502 (version) (build)\n2020/10/27 16:16:34 # \u2502  \u2514\u2500\u2518    \u2518  \u2518 \u2514\u2500\u2500\u2518  \u2514\u2500\u2518  \u2502 \xa9 2020 H2O.ai, Inc.\n2020/10/27 16:16:34 # \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n2020/10/27 16:16:34 # \n2020/10/27 16:16:34 # {"address":":55555","t":"listen","webroot":"/home/elp/wave/www"}\n')),Object(A.b)("div",{className:"admonition admonition-info alert alert--info"},Object(A.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(A.b)("h5",{parentName:"div"},Object(A.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(A.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(A.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(A.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(A.b)("p",{parentName:"div"},"On Windows, run ",Object(A.b)("inlineCode",{parentName:"p"},"waved.exe")," to start the server."))),Object(A.b)("h3",{id:"step-5-verify"},"Step 5: Verify"),Object(A.b)("p",null,"Finally, point your web browser to ",Object(A.b)("a",Object(n.a)({parentName:"p"},{href:"http://localhost:55555/"}),"http://localhost:55555/"),". You should see an empty page with a spinner that looks like this:"),Object(A.b)("p",null,Object(A.b)("img",{alt:"spinner",src:a(502).default})),Object(A.b)("p",null,"Congratulations! Wave is now running, but doesn't have any content yet (hence the spinner)."),Object(A.b)("p",null,"In the next few sections, we'll add some content and see what the fuss is all about."))}s.isMDXComponent=!0},292:function(e,t,a){"use strict";a.d(t,"a",(function(){return p})),a.d(t,"b",(function(){return d}));var n=a(0),r=a.n(n);function A(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(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 i(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?o(Object(a),!0).forEach((function(t){A(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function c(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},A=Object.keys(e);for(n=0;n<A.length;n++)a=A[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var A=Object.getOwnPropertySymbols(e);for(n=0;n<A.length;n++)a=A[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var l=r.a.createContext({}),s=function(e){var t=r.a.useContext(l),a=t;return e&&(a="function"==typeof e?e(t):i(i({},t),e)),a},p=function(e){var t=s(e.components);return r.a.createElement(l.Provider,{value:t},e.children)},b={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,A=e.originalType,o=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),p=s(a),u=n,d=p["".concat(o,".").concat(u)]||p[u]||b[u]||A;return a?r.a.createElement(d,i(i({ref:t},l),{},{components:a})):r.a.createElement(d,i({ref:t},l))}));function d(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var A=a.length,o=new Array(A);o[0]=u;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:n,o[1]=i;for(var l=2;l<A;l++)o[l]=a[l];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,a)}u.displayName="MDXCreateElement"},502:function(e,t,a){"use strict";a.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/3b8c55ea.a292a990.js b/docs/3b8c55ea.a292a990.js
deleted file mode 100644
index 0f50f0b885..0000000000
--- a/docs/3b8c55ea.a292a990.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[62],{115:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return s}));var a=n(2),r=n(6),A=(n(0),n(290)),o={title:"Installation"},i={unversionedId:"installation",id:"installation",isDocsHomePage:!1,title:"Installation",description:"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.",source:"@site/docs/installation.md",slug:"/installation",permalink:"/wave/docs/installation",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/installation.md",version:"current",sidebar:"someSidebar",previous:{title:"Introduction",permalink:"/wave/docs/getting-started"},next:{title:"A Tour of Wave",permalink:"/wave/docs/tour"}},c=[{value:"Prerequisites",id:"prerequisites",children:[]},{value:"Setup",id:"setup",children:[{value:"Step 1: Download",id:"step-1-download",children:[]},{value:"Step 2: Extract",id:"step-2-extract",children:[]},{value:"Step 3: Move",id:"step-3-move",children:[]},{value:"Step 4: Run",id:"step-4-run",children:[]},{value:"Step 5: Verify",id:"step-5-verify",children:[]}]}],l={rightToc:c};function s(e){var t=e.components,o=Object(r.a)(e,["components"]);return Object(A.b)("wrapper",Object(a.a)({},l,o,{components:t,mdxType:"MDXLayout"}),Object(A.b)("p",null,"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."),Object(A.b)("h2",{id:"prerequisites"},"Prerequisites"),Object(A.b)("p",null,"H2O Wave runs on Linux, macOS, and Windows, having Python 3.6.1 or later."),Object(A.b)("h2",{id:"setup"},"Setup"),Object(A.b)("h3",{id:"step-1-download"},"Step 1: Download"),Object(A.b)("p",null,Object(A.b)("a",Object(a.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/releases/latest"}),"Download the H2O Wave SDK")," for your platform."),Object(A.b)("h3",{id:"step-2-extract"},"Step 2: Extract"),Object(A.b)("p",null,"Extract your download."),Object(A.b)("pre",null,Object(A.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"tar -xzf wave-x.y.z-linux-amd64.tar.gz\n")),Object(A.b)("h3",{id:"step-3-move"},"Step 3: Move"),Object(A.b)("p",null,"Move it to a convenient location, say ",Object(A.b)("inlineCode",{parentName:"p"},"$HOME/wave/"),"."),Object(A.b)("pre",null,Object(A.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"})," mv wave-x.y.z-linux-amd64 $HOME/wave\n")),Object(A.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(A.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(A.b)("h5",{parentName:"div"},Object(A.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(A.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(A.b)("path",Object(a.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(A.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(A.b)("p",{parentName:"div"},"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."))),Object(A.b)("p",null,"Inspect your ",Object(A.b)("inlineCode",{parentName:"p"},"$HOME/wave")," directory. You should see the following content:"),Object(A.b)("pre",null,Object(A.b)("code",Object(a.a)({parentName:"pre"},{}),".\n\u251c\u2500\u2500 docs/           ... Documentation\n\u251c\u2500\u2500 examples/       ... Examples\n\u251c\u2500\u2500 test/           ... Browser testing framework\n\u251c\u2500\u2500 www/            ... Wave server web root (do not modify!)\n\u2514\u2500\u2500 wave              ... Wave server executable\n")),Object(A.b)("h3",{id:"step-4-run"},"Step 4: Run"),Object(A.b)("p",null,"Go to your Wave directory."),Object(A.b)("pre",null,Object(A.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave\n")),Object(A.b)("p",null,"Start the Wave server."),Object(A.b)("pre",null,Object(A.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"./wave\n")),Object(A.b)("pre",null,Object(A.b)("code",Object(a.a)({parentName:"pre"},{}),'2020/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":"/home/elp/wave/www"}\n')),Object(A.b)("div",{className:"admonition admonition-info alert alert--info"},Object(A.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(A.b)("h5",{parentName:"div"},Object(A.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(A.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(A.b)("path",Object(a.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(A.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(A.b)("p",{parentName:"div"},"On Windows, run ",Object(A.b)("inlineCode",{parentName:"p"},"wave.exe")," to start the server."))),Object(A.b)("h3",{id:"step-5-verify"},"Step 5: Verify"),Object(A.b)("p",null,"Finally, point your web browser to ",Object(A.b)("a",Object(a.a)({parentName:"p"},{href:"http://localhost:55555/"}),"http://localhost:55555/"),". You should see an empty page with a spinner that looks like this:"),Object(A.b)("p",null,Object(A.b)("img",{alt:"spinner",src:n(494).default})),Object(A.b)("p",null,"Congratulations! Wave is now running, but doesn't have any content yet (hence the spinner)."),Object(A.b)("p",null,"In the next few sections, we'll add some content and see what the fuss is all about."))}s.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return d}));var a=n(0),r=n.n(a);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 o(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 i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){A(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},A=Object.keys(e);for(a=0;a<A.length;a++)n=A[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var A=Object.getOwnPropertySymbols(e);for(a=0;a<A.length;a++)n=A[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=r.a.createContext({}),s=function(e){var t=r.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=s(e.components);return r.a.createElement(l.Provider,{value:t},e.children)},b={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 n=e.components,a=e.mdxType,A=e.originalType,o=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),p=s(n),u=a,d=p["".concat(o,".").concat(u)]||p[u]||b[u]||A;return n?r.a.createElement(d,i(i({ref:t},l),{},{components:n})):r.a.createElement(d,i({ref:t},l))}));function d(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var A=n.length,o=new Array(A);o[0]=u;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:a,o[1]=i;for(var l=2;l<A;l++)o[l]=n[l];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},494:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/3da9dc01.f77c7e94.js b/docs/3da9dc01.f77c7e94.js
new file mode 100644
index 0000000000..124571167c
--- /dev/null
+++ b/docs/3da9dc01.f77c7e94.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[67],{120:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return i})),t.d(n,"metadata",(function(){return c})),t.d(n,"rightToc",(function(){return s})),t.d(n,"default",(function(){return p}));var r=t(2),a=t(6),o=(t(0),t(292)),i={title:"Background Tasks"},c={unversionedId:"examples/background",id:"examples/background",isDocsHomePage:!1,title:"Background Tasks",description:"Use q.run() to execute functions in the background, in-process.",source:"@site/docs/examples/background.md",slug:"/examples/background",permalink:"/wave/docs/examples/background",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/background.md",version:"current",sidebar:"someSidebar",previous:{title:"Mode / Unicast",permalink:"/wave/docs/examples/counter-unicast"},next:{title:"Background Tasks / Executor",permalink:"/wave/docs/examples/background-executor"}},s=[],u={rightToc:s};function p(e){var n=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},u,i,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use q.run() to execute functions in the background, in-process."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(346).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import time\nimport random\nfrom h2o_wave import main, app, Q, ui\n\n\ndef blocking_function(secs) -> str:\n    time.sleep(secs)  # Blocks!\n    return f'Done waiting for {secs} seconds!'\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.start:\n        q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[ui.progress('Running...')])\n        await q.page.save()\n\n        seconds = random.randint(1, 6)\n\n        # DON'T DO THIS!\n        # This will make your app unresponsive for some time:\n        # message = blocking_function(seconds)\n\n        # Do this instead:\n        message = await q.run(blocking_function, seconds)\n\n        q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[ui.message_bar('info', message)])\n        await q.page.save()\n    else:\n        q.args.start = True\n        q.page['form'] = ui.form_card(box='1 1 -1 -1', items=[ui.button(name='start', label='Start')])\n        await q.page.save()\n")))}p.isMDXComponent=!0},292:function(e,n,t){"use strict";t.d(n,"a",(function(){return l})),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 c(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function s(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var u=a.a.createContext({}),p=function(e){var n=a.a.useContext(u),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},l=function(e){var n=p(e.components);return a.a.createElement(u.Provider,{value:n},e.children)},d={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,i=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),l=p(t),m=r,f=l["".concat(i,".").concat(m)]||l[m]||d[m]||o;return t?a.a.createElement(f,c(c({ref:n},u),{},{components:t})):a.a.createElement(f,c({ref:n},u))}));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]=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<o;u++)i[u]=t[u];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},346:function(e,n,t){"use strict";t.r(n),n.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/3f5dd320.1b2a555f.js b/docs/3f5dd320.9f9d5e6d.js
similarity index 92%
rename from docs/3f5dd320.1b2a555f.js
rename to docs/3f5dd320.9f9d5e6d.js
index ca81f64a33..72c754e4f3 100644
--- a/docs/3f5dd320.1b2a555f.js
+++ b/docs/3f5dd320.9f9d5e6d.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[63],{116:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return l})),t.d(n,"metadata",(function(){return i})),t.d(n,"rightToc",(function(){return p})),t.d(n,"default",(function(){return s}));var r=t(2),a=t(6),o=(t(0),t(290)),l={title:"Plot / Line / Labels / Occlusion"},i={unversionedId:"examples/plot-line-labels-no-overlap",id:"examples/plot-line-labels-no-overlap",isDocsHomePage:!1,title:"Plot / Line / Labels / Occlusion",description:"Make a line plot with non-overlapping labels.",source:"@site/docs/examples/plot-line-labels-no-overlap.md",slug:"/examples/plot-line-labels-no-overlap",permalink:"/wave/docs/examples/plot-line-labels-no-overlap",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line-labels-no-overlap.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Line / Labels/ Stroked",permalink:"/wave/docs/examples/plot-line-labels-stroked"},next:{title:"Plot / Line / Annotation",permalink:"/wave/docs/examples/plot-line-annotation"}},p=[],c={rightToc:p};function s(e){var n=e.components,l=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},c,l,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a line plot with non-overlapping labels."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(342).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='Remove overlapping labels',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0,\n                          label='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n                          label_overlap='hide')])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return u})),t.d(n,"b",(function(){return d}));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 l(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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?l(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):l(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function p(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=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):i(i({},n),e)),t},u=function(e){var n=s(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)}},b=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,l=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(t),b=r,d=u["".concat(l,".").concat(b)]||u[b]||m[b]||o;return t?a.a.createElement(d,i(i({ref:n},c),{},{components:t})):a.a.createElement(d,i({ref:n},c))}));function d(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,l=new Array(o);l[0]=b;var i={};for(var p in n)hasOwnProperty.call(n,p)&&(i[p]=n[p]);i.originalType=e,i.mdxType="string"==typeof e?e:r,l[1]=i;for(var c=2;c<o;c++)l[c]=t[c];return a.a.createElement.apply(null,l)}return a.a.createElement.apply(null,t)}b.displayName="MDXCreateElement"},342:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/plot-line-labels-no-overlap-6597ed5a76ab4f19c1f7e189cbc21624.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[68],{121:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return l})),t.d(n,"metadata",(function(){return i})),t.d(n,"rightToc",(function(){return p})),t.d(n,"default",(function(){return s}));var r=t(2),a=t(6),o=(t(0),t(292)),l={title:"Plot / Line / Labels / Occlusion"},i={unversionedId:"examples/plot-line-labels-no-overlap",id:"examples/plot-line-labels-no-overlap",isDocsHomePage:!1,title:"Plot / Line / Labels / Occlusion",description:"Make a line plot with non-overlapping labels.",source:"@site/docs/examples/plot-line-labels-no-overlap.md",slug:"/examples/plot-line-labels-no-overlap",permalink:"/wave/docs/examples/plot-line-labels-no-overlap",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line-labels-no-overlap.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Line / Labels/ Stroked",permalink:"/wave/docs/examples/plot-line-labels-stroked"},next:{title:"Plot / Line / Annotation",permalink:"/wave/docs/examples/plot-line-annotation"}},p=[],c={rightToc:p};function s(e){var n=e.components,l=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},c,l,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a line plot with non-overlapping labels."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(347).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='Remove overlapping labels',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0,\n                          label='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n                          label_overlap='hide')])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},292:function(e,n,t){"use strict";t.d(n,"a",(function(){return u})),t.d(n,"b",(function(){return d}));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 l(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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?l(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):l(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function p(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=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):i(i({},n),e)),t},u=function(e){var n=s(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)}},b=a.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,l=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(t),b=r,d=u["".concat(l,".").concat(b)]||u[b]||m[b]||o;return t?a.a.createElement(d,i(i({ref:n},c),{},{components:t})):a.a.createElement(d,i({ref:n},c))}));function d(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,l=new Array(o);l[0]=b;var i={};for(var p in n)hasOwnProperty.call(n,p)&&(i[p]=n[p]);i.originalType=e,i.mdxType="string"==typeof e?e:r,l[1]=i;for(var c=2;c<o;c++)l[c]=t[c];return a.a.createElement.apply(null,l)}return a.a.createElement.apply(null,t)}b.displayName="MDXCreateElement"},347:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/plot-line-labels-no-overlap-6597ed5a76ab4f19c1f7e189cbc21624.png"}}]);
\ No newline at end of file
diff --git a/docs/404.html b/docs/404.html
index 8fb414149f..ce273f72f1 100644
--- a/docs/404.html
+++ b/docs/404.html
@@ -5,15 +5,15 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Page Not Found | H2O Wave</title><meta data-react-helmet="true" property="og:title" content="Page Not Found | H2O Wave"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--xl"><div class="row"><div class="col col--6 col--offset-3"><h1 class="hero__title">Page Not Found</h1><p>We could not find what you were looking for.</p><p>Please contact the owner of the site that linked you to the original URL and let them know their link is broken.</p></div></div></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--xl"><div class="row"><div class="col col--6 col--offset-3"><h1 class="hero__title">Page Not Found</h1><p>We could not find what you were looking for.</p><p>Please contact the owner of the site that linked you to the original URL and let them know their link is broken.</p></div></div></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/4104f38c.e138268c.js b/docs/4104f38c.fb19bd1a.js
similarity index 93%
rename from docs/4104f38c.e138268c.js
rename to docs/4104f38c.fb19bd1a.js
index 67f344830b..e4286869eb 100644
--- a/docs/4104f38c.e138268c.js
+++ b/docs/4104f38c.fb19bd1a.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(290)),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(343).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},290: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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;c++)i[c]=n[c];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},343:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-vegalite-form-0d561c88fa3bbc9f612e304db9a412b4.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[69],{122: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(292)),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(348).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},292: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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;c++)i[c]=n[c];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},348:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-vegalite-form-0d561c88fa3bbc9f612e304db9a412b4.png"}}]);
\ No newline at end of file
diff --git a/docs/41849bc6.a90ccdc8.js b/docs/41849bc6.a90ccdc8.js
deleted file mode 100644
index 083ec47580..0000000000
--- a/docs/41849bc6.a90ccdc8.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[65],{118:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return u})),t.d(r,"metadata",(function(){return i})),t.d(r,"rightToc",(function(){return l})),t.d(r,"default",(function(){return s}));var n=t(2),a=t(6),o=(t(0),t(290)),u={title:"Form / Markup"},i={unversionedId:"examples/form-markup",id:"examples/form-markup",isDocsHomePage:!1,title:"Form / Markup",description:"Use a markup component to display formatted content using HTML.",source:"@site/docs/examples/form-markup.md",slug:"/examples/form-markup",permalink:"/wave/docs/examples/form-markup",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/form-markup.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Template",permalink:"/wave/docs/examples/form-template"},next:{title:"Stepper",permalink:"/wave/docs/examples/stepper"}},l=[],p={rightToc:l};function s(e){var r=e.components,u=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},p,u,{components:r,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use a markup component to display formatted content using HTML."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(344).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\nmenu = '''\n<ol>\n    <li>Spam</li>\n    <li>Ham</li>\n    <li>Eggs</li>\n</ol>\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<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?u(Object(t),!0).forEach((function(r){o(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):u(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function l(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=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<o;p++)u[p]=t[p];return a.a.createElement.apply(null,u)}return a.a.createElement.apply(null,t)}v.displayName="MDXCreateElement"},344:function(e,r,t){"use strict";t.r(r),r.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/41849bc6.f2d0991e.js b/docs/41849bc6.f2d0991e.js
new file mode 100644
index 0000000000..d96577bd9b
--- /dev/null
+++ b/docs/41849bc6.f2d0991e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[70],{123:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return u})),t.d(r,"metadata",(function(){return i})),t.d(r,"rightToc",(function(){return l})),t.d(r,"default",(function(){return s}));var n=t(2),a=t(6),o=(t(0),t(292)),u={title:"Form / Markup"},i={unversionedId:"examples/form-markup",id:"examples/form-markup",isDocsHomePage:!1,title:"Form / Markup",description:"Use a markup component to display formatted content using HTML.",source:"@site/docs/examples/form-markup.md",slug:"/examples/form-markup",permalink:"/wave/docs/examples/form-markup",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/form-markup.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Template",permalink:"/wave/docs/examples/form-template"},next:{title:"Form / Stepper",permalink:"/wave/docs/examples/stepper"}},l=[],p={rightToc:l};function s(e){var r=e.components,u=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},p,u,{components:r,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use a markup component to display formatted content using HTML."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(349).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\nmenu = '''\n<ol>\n    <li>Spam</li>\n    <li>Ham</li>\n    <li>Eggs</li>\n</ol>\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},292: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<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?u(Object(t),!0).forEach((function(r){o(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):u(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function l(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=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<o;p++)u[p]=t[p];return a.a.createElement.apply(null,u)}return a.a.createElement.apply(null,t)}v.displayName="MDXCreateElement"},349:function(e,r,t){"use strict";t.r(r),r.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALsAAABVCAYAAAAR3pWYAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjE2OjI0IFBNIFBEVOXz3wAAACAASURBVHic7Z15XE3pH8ffFZWKUDJTkq3G2FuQpRJhGDszyDKya1dm7GshlWW0h2RnxhJZhsZShsaS8RuyZCxpkyKl4rbd3x/lTLdNKrN136/XfdFzvs9zzrn3c899znO+n+eREYvFYqRIqQXI/t0HIEXKX4VU7FJqDVKxS6k1SMUupdYgFbuUWoNU7FJqDVKxS6k1SMUupdYgFbuUWoNU7FIkyMrK4uDBg3/3YXwUpGKXIkFmZiaHDv74dx/GR6HGxS4SiVjv6YmRoQEbN2744Pq///47zk5z6dfXHOPu3Rg2dAjrPT1JT0+v6UOVUoy0tDTc3NYyeNAXxMTEMHTIl2z+/nuys7Ik4nJzc/H18WHwoEH0MDZm4gRLLl6MeG/7+fn5+Pv7MXjQIEx692LWrJncvXu3ynFVoUbFHh0djeX4cUREhFO/fv0Prn/+/DmmTbXiwoULvHr1itzcXBISEti7dw/fTJ5EhlTwEuzdu4f+/S2q3c6bN2+YNtWKS7/8wqTJkwEY89VXHDt2FBsbawoKCoRYV1cX9u/fx7Tp01jr5kbrNm1wmjuXK7/+WuE+1qx25cD+/VhZWeG6eg2KiorMmjmDx48fVymuSohrkKlWVuLVrq7i7Oxs8bChQ8QbNqz/oPpDvhwsNtDvIh465EvxlStXxPHx8eKQkCPibl2NxAb6XcRbt26pycP917Nnz26xhUW/ardz5MgRcc8exuKXL1+Knz17Jh439muxWCwW3751S2yg30X8a2SkWCwWi1NSUsSGBvris2d/lqg/z9lZbGdrU277Dx7EiA0N9MW/XLwolOXl5Yktx48XfzvP+YPjqkqd6n9d/mTpsmW0aNGiSnVzc3NJTEwEwMKiP926dQNAS0uL/Px8EuIT0NbWBsBr82aCg7fTrFkzVqxciYeHB7FPntC6dWvs7R0w6tpVaPfu3bv4+fnyv5s3yc/PR0enBePHj2fI0KEA5OTk0MO4OwAenp6EnQnj4sUIGjRowMyZs+hjbo7b2rVcuvQL9evXx9JyAhMnTarwXK5evYq/ny/3799HSVmZAf37Y2Nrh5KSkmSMvx/3791DWVmZfv0ssLOzQ0lZWYiJiorCx9uLu3fvoaKiTD8LC5ycnJGXl2fmjOlERUUBYGigT+cuXQgK2v7eemWRkZ6OvIICDRs25Pnz50J5+w4dCAv7GWUVFQAKCgqYPWcO3bsbS9TXaqbFjaJjKYvz586jqalJr969hTI5OTnGjBmDh4c7ubm51K1bt9JxVaVGuzFVFTpA3bp1BTEfOnSQ/fv2CeIfNWo0dvb2DBgwUKJORkYGjg4OvEpLIz8/n+joaGxsrLl/7x4Ajx49En6e69atS+PGaty7d5fly5dx5PDhUsfg7eXFhQvnEYlEJCcns3q1K/b2doSHh/P27VuSk5PZuHEDly5dKvc8rly5go31HJrr6OC5fj12dnacPXuWRQsXCjFXr17FxnoOLVu2xHP9euwdHLl8+RLW1nOELkNCQjy2Nta0bNUKf39/5s9fwKVffsHdfR0Aq1xcGT16TOH7dfgIa9asrVS9sujRsydZmZm4uqziVVqaxLbGamooKCgAoKGhwfTpM1Au9oUsKCjg18hI2rb9vNz27927y+ft2pUq79CxIyKRSOiiVDauqtTolb26LF6yhHnOzmRmZuLh4Y6HhzvNmzenn4UF33wzpdR9QEZGBgsXLWbMmDHExcUxwXI8WVlZBAcHs9bNjQcPHmDUtSsK8gqsXrMGeXl55jk7c/78OX788QdGjhol0Z6amhr7D/zAkydPmDjBkvz8fORkZbkQHs6LFy8YO/ZrsrOy+DUykl69epV5Dt9/vwkLi/6sWLFSKNNproO/vx/p6emoqqqyadNGLCz6s3TpMiFGX78Lo0aO5Mzp03wxaBC3fr9FXl4eCxcuok6dwo+pdZs25OTkAPDJJ5/QomULGqupSVxk3levLHR1dfHwXM86NzdCQkIACN6+nS8GDeKTTz6p8DPbuXMHsbFPcffwLDfm1at0dPV0S5U3bty4aPurD4qrKv+ooceuXbtx6PAR5syxpl27dsjJyfH06VO2BwXx1ZjREj+xAPLyCowqEqy2tja9i37+bt78DYCBAweyebMXzvPmERV1nYMHDxITEwPA69evS+3fon9/5OXl0dPTEz5k4x49UFBQQFNTk9atWgHlv+lpaWncv3eP4cOHS5R37tIFP/8AVFVVhZihw4ZJxGhpNUNf34DIXyOBwi6EnJwcCxcs4Nq1q+Tk5NCyZUs+++yzCt/DqtYzMzPj+IkTrFy5CoADB/YzYvgwgoO3l1vnl4sX8fH2Zv6CBTRv3rzcODFixGUY4mRkZIr+/bC4qvKPEjuAuro602fMYNfuPZw9d55vv5uPvLwCKSkpBPj7ScQ2aaKOrOyfp9C0SKDvhikTEhKYPGkiXw4ehK2NDW5r15CeXijUst5UBXkF4f/v3mA5OTmhTLbo/2LKdjKmFXUB1Juol3t+72I0NJqU2ta0qYawXVtbG18/f7LfZGNna4uZqSnffTuPhISEctuuTj0AWVlZunbrhp6eHidOnmKukxPeXl5ERl4uFXv79i0WLJjPpEmTGTFiRIXtNlRVJe3ly1Ll7861QQPVD4qrKv8YsV+/do3hw4YyfNhQ4uLiAKhfvz7jxo2ja7fCG853V+V3JCcnk5ubK/z99OlTAFRVC9+UZUuXEh0dTfv27dkWFERExMVSXZeapGHDhgCkpqSWG9OoUSMAUlJSSm1LSUmhUVEbAAYGBvj4+BJx8Re+37yZ+IQE5s51fO9xfGi9R48eCfdH75CVlWXs2HFoa2tz87ebEttiY2NxsLenb9++2Nnbv/d4dPX0iI6OLnWBuRMdjby8Ai1btvyguKryl4q9uDBLotOiBUlJScTHx7Ns6RKioqKIffKEQ4cOcv3aNQCaNdOWqJOXl0dgYAAFBQVEXb9ORHg4AJ07dwHgaVyh+PtZWNCliz6ycnLvHQ+uDo0bN6ZNG11CQ49JlN+4cYM5s2eRnp5Oo0aN0NPT43hoqERMQkICN27cwNi4BwC3bt0i5MgRAOTl5enWrRuW4y15+Mcfwvsogwx5eXkS7VSmXkl8fLyxt7Mt1VZiYiLPnj3j008/FcpSU1OxtbGmQ8eOLF+xUvgFLEnxewRzc3OePXtG+IULQllBQQE//HCAXr16CaNElY2rKn/ZDeryZUu5cOECBw8dpkmT0j/hTZo0wcpqKlu3buH3339n5ozpEtuVlJSwmjpVokxFRYXDhw4RvH27MIpRp04drKysAGjfrj0XL0bg6+ND+IULJCQklNl9qUkc5zpib2dHXXl5Bg4cyPPnz/Hz9UVXV1f4xXF0nIutrQ31lJTo168fL1++ZEtgIJ991pYBAwtHnFJTU1i92pXUF6l0NerKs+RkAgMD6G5sLAy/NdfRISM9nYAAf4y7G9O5S5dK1SvJVKupTJ8+DUvL8fTu1ZuYmBj8/f04fOgQn2pqCseUlZWFna0NmZmZDPpiEBcjJJ+cmpqZISsry7FjR3FZtYr1GzZgampG27afM3jwl6xYsZwZiQloaTXjaEgIjx8/ZvmKFUL9ysZVlb9M7MrKKqioqFQ4TjrH2po2um348ccfeRATQ3Z2No0bN8bQyIjp02eUGtpUUlJinbsH69zcePz4UeE4u4MDn7VtC8CSpUtZs9qVq1evEhsbS/8BA2jWrBkbN3x4GkNl6dGjJ15e3vj7++Hs5ISSkhL9LCywt3cQYrobG+Pj64e/ny+nTp5EWVmZvv36YWdnL9wjmJv3ZcnSpezetYttW7eiUr8+fc3NsbX7s9vQq1cv5syx5sCB/USER7Bn795K1StJ+w4d2LotiC2BgezYEQxA6LFj9OtnwazZs4XnAzduRAldycWLF5Vq5+Ivl1BSUkJRURElJSWU6v35XGHZ8uX4+/uxZ/duMjIy+Pzzz/HzD6BNG8nRl8rGVQUZ8ce+1H0E3j1U0tDQ4NRPp//uw/lPkZycjKODPfv2H/i7D6XG+cfcoEr5Z6CiosLoMV/93YfxUZCKXYoEysrKjBkz5u8+jI/Cv7IbI0VKVZBe2aXUGqRil1JrkIq9lhEeHs6TJ0/+7sP4W5CKvZYREX6BJzXh+vkXUiNir6ovsSRdjQwxNNAneHvpTDuvzZsxNNCnr3mfGjji2se5c2eZajWFkJAQnJ2dmD1rFteuXS0VFxcXx4L58zE370PPHsZMtZoipGtUliu//oqhgX6pp+AAu3buxNBAv9Rr4YIFVT63ylIjT1BdXV04f+4cDo6OqKmpc/78OZzmzsXb24fuxsbvb0BKmZiZmmBn71DtocAjhw/j6urCsGHDiYmJwdTUFJFIhPWcOWzYuBETE1OgMBFtyjeT0dTUxNl5HoqKioSGHsPW1oadu3ajp6f33n2JRCJWr15d7vbExETatNHFwVEyMU1dvfxM0Zqi2mJPTU3lxPHjuHt40LdvPwD69OlDdlY2e/bslor9H8CWLYFMmjwZR8e5yMrKYGJiSh9zc+ztbNkeFCSI/adTp1BQUGRb0HYh6apv376MGjmCY8eOMm/et+/dV4C/P3JysgwZOpSkEpmUAElJSbTRbUPPnj1r9iQrQbW7MRX5EqvrLHkfeXl5bN2yhZEjhmPcvRtfDBzA8uXLePbsmRDzzeTJGBro4+vjQ2BAABb9+mJmaoKH+zpycnLw8fGmv0U/zPuYsWrlSt6+fVvhPuPj4/l23jzM+5hhYtIbZ6e5xMfHS8QkJPwZY2ZqgtNcR2JL3BQmJSXx3bfzMDXpjalJbxwc7IU026jr1zE00CczM5O1a1ZjaKDPlStX3luvPNLT02mq0bRUuds6d9Zv2Cj8PWnyZE6eOiWRXSgrK4uioiIyvN85ERMTw549u1m0eLGEN6A4iUmJQhZl8VkL/gqqLfaq+hJrApdVK/Hz8yU+Ph5tbW0yMzM5HhqK9ZzZvHnzRiL255/D2LIlkKysLDIzM9m/fz+zZs4gePt2MjOzyMjI4OjRELYEBpa7v5cvXmA15RtevEhl2fLluLi48vLlS2ZMn0ZmZqYQM2XKFNLS0li+fAWrXFx58+YNU6Z8Q3Jy4ZewoKAAGxtrXrx4ibu7B+7uHuSIRNjb2VJQUED7Dh04dLgwTXe8pSWHDh+hc+fO761XHr1NTAjaHsTly5cp/ghRSUlJyK8vSU5ODvHx8WxYv564uDiGlXBflaSgoABXVxcGDR5M167dyo1LSkrizp07DB82lG5djRg2dIhgBfzYfJSsx8r4EivCy2szXl6bK4zJyckhJycXQyMjxo8fj7l5X2JiYhg/biyxsbFcuXKFPn36CPHp6emEHj+BsrIykyZOIC4ujocPH3Is9DiNGzdm5owZ3L59i8jIy+UaEoKDg1FUVMTPP0AwIRsZGbFg/nzu3r1D167dCA4ORkFeHl8/P+EK2atXL8Z+/RVbtmxhyZKlvHjxgtgnT1jgv1CYRaFd+/bCZECKioq0aNECFRUVWrRoKWR7pqSkVFivPJYsWYr7unU42NtRUFDA+fPnkJWTpXdvEwmnV3HezbigpKyMh+d6dHUrzjo8sH8/iQkJeHl5lxsjEonQ1dWljpwcs2fPoVGjRoT9HIbLqpXk5+cJBvKPRY2L/Z0vcfGSpRX6EquLvLw8a93cEIlEPHz4kLCwM1y/fl3YnlnCY2poaCj4SvX1DYiLi6Nt27bCT6pRVyNu375VYdcrMvIyA7/4QhA6FCZOefv4SMYM/EKiK1CnTh0GDRpMSEjh1VpNTQ1tbW02bdyA1dSpdO/WnQaqqnTv3r3Cc65qvfr16+Pi6oqDoyMDB/QnIyMDZycnWrZqhZeXF02bljZVB+/YSWbma86fO4+z01zc1rljZmZWZvvJyc/w9fVh4aJFQs5+WSgoKAjTfbzDuEcPxAViAvz9GTlyVLlfvpqgRsX+Ib7Eipg5axaWlhMkygIDAti7d49E2fagIIK2BwlTtDVo0EDYVjLlR76YQGVlS/tL5WTlyqxXnLS0NNTVSxtPSsY00dAoVa5RzF8qKyuLf0Agvj7euLq4kJ2dTcdOnZgzZ06FXYCq1nuHuro6I0aMwMTEFF09PeZ/9y3zv/uO4B07S8V27NgRKMzPl5GVYb2nZ7lid1vrhp7eZ5iYmApG9tevXwuvevXqCTMdlMXgwYM5ejSEpKQktLS03nseVaXGvkYf6kusCAV5BerXry/xKmnJunbtKt7eXmRnZeHk7Myx0OOcOHGyWvt9Hw0bNiQ1tbR3tDiNGjUiJeV5qfKUlBTBowqFU2GscnHl/IVwdu/ewydNm2JvZ09ycnKF7X9ovdevX3Pnzp1SljwtLS0mTpzErVu3yM/PBwo/w+I39+8wMDAkISG+zOk4MjMziYgI5+bN3+hjZiq8zpw5TUxMDH3MTDl79iwAb9++5cmTJ8L+3iHzEa/mxamRvVTWl1iRB/VDiY0t9JeqqKgwduw4tLS0CC/yoH4sunfvzpnTZyQ+9Iz0dGxsrIUHNN2NjQk7IxmTl5fHT6dOYdyj0F/67NkzgrZtIz8/H1lZWT5r2xY7ewdyckQSTzdlZCQ9ppWtV5ykpCQmTZxAWNiZUttu3LiBhoaG8Avn4+2Fg719KTFeu3aVpk0/ES44+fn5wg1xvXr1CAzcUuqlU3SfERi4ha5FM7SlpKQwetRIzp8/L9H+saMhaGhoSHhdPwbV7sZU1pf4Pg/qh9KuaOaozMxMhg8birp6E+LiniIvr0BOjqja7ZeF1dRpnD59mtmzZjJp8mTEYjG7du4kISGBzz8vPJ6pVlM5/dNP2FjPYcKEicjIynJg/z5SU1OZMWMmUNgd2bZtKw8f/sGoUaN5KxKxe9dOGjVqRPsOHYT9NdfRIeTIYRo3boRxd+NK1yuOnp4efczNWbF8Obdv3ebUqVMkJz/n+PHjnD9/jiVLlgqxEydNZuaM6UyfNpWRo0ahqtqQn8PCOHnyBCtXuQCFoy4jR4ygYUNVdu7ajZycHIZGRqX2a2RohLqamsQ2bW1tzM374uqyiqTERHRa6BB+4QLHjx/HxdX1o/bXoQbEXllfYmU8qB9Cu3btWLpsOUHbtpKSkopqw4as37ABZyenjyZ2dXV1tgfvYNOmjaxcsYL8/HwMDA1ZsXIVKkXzITZWUyN4xw42bdzEihXLEYvFGBgYEhy8Q7hB1tDQwNfXD29vLxwdHZCRkcHAwJDALVuFdgBcXFxZsXwZy5ctZ+3atfQxN69UvZKsXevGzh07OHXqJCKRiMjIy+jrG+C5fj3m5n2FuE6dOhG4ZSsBAf6s9/QkLy8PXV1d1m/YKDGypaKiXOGNaEWsXrOGAH9/9u7dw6tX6bRq1QoPT0/hgeTHRGreqGW4rFopPEGtbfyj5nqU8vExNeuDjo7O330YfwvSK7uUWoM0n11KrUEqdim1BqnYpdQapGKvxTx48IDLl0tPR/1fRSr2WsyDBzFcvlz+kjn/NWpkNCY7K4uAgADCwsJ4+fIFWlpajB9vyZivPmwata5GhuXmZTdr1oyjx0LL3Cblw4iJiSHA348LRVND6+npMXr0GEaPGSOR6iESifD28mLfvr1MmDiRuXOdSrV18+ZvTCsxu3JxtgUF0aWLPgC9e/Us5TOAwjWhqrMeV2Wp9ji7WCzGzs6Op3FPmWo1Fa1mWly7eg03t8IFrT5U8FLKxtlpLvLyCqx1c6tWO/fv32eq1RTat2+PoaEhiYmJdO3aDXf3dSQmJmLvUDjbcHR0NMuWLiEvL6/CNW1btWzF+vWlZ0WO/DWSQwcPClmir1694s2bN9g7OKCrK+llbdq0tIvqY1Btsd+JjubOnWiCd+wU1u0xNTUjKyuLQ4cOVknsZaX4yv1FmXH/dXbv2kWbNrr4BwTy00+nuHPnDk7Ozqipq+Hr48PMWbNQVFRkw/r1GBoaMdfJiXFjvy63vQaqqmU+jQ0MDKBfv340a9YMKExIg8KpuD+mz6Eiqi329h06EPnrlVLl9ZTqlZv9+D7epfiWR0ZGBp4e7oSHhwtZjzm5Ofj5+qKqqsq58xeAwqSloG3bOHToIG9FIvqY9WHgwIHY2FgD8MMPP9K6TRtevHiBr483v/zyC+np6airq9PH3JxZs2ZXeBxv377Fx9ubsLAzpKdnoKuni42NrYSZ4u3bt/j6+HDmzGlev35Nmza6zJw1S2K1PZFIhI+3N6dP/8Tr169p1aoVDo6OQo66oYG+EHvmzGmmTZuOtY3Ne+uVRXpGOuol1qICsLScwJAhQ4XMxuqsaRsREc79+/dZXmzFwMTERGRkZPjkk08Ez0BV9VFVajRdIDc3l4yMDCLCwzly+DDfza/5uUDEYjFzHR2FFfGysrL4/vtNZdrG/Px8Cdq2DSh8Y48dO8rdu3ckYgoKCpgzZzYP//iDunXr0qp1a57GxrJv717+ePAH/gEB5R6Hg4M9cU+fMnuONU2banD69GnsbG3YFrSdjh07IhaLcXRwIC7uKdY2Nmg00SAiIgJHB3thVQoAd/d1XL50CSfneWhoNOHnsDDs7ew4eOgwWlpaHDp8BCenuSjIy7PWbZ2QF/++emVh0tsEDw939u/bh2K9ekJ53bp1UVNTE/6uTh9629ZtmJqaSazQl5SYiKKiIksWL+LSpUsUFBTQq1dv5i9YUCNZsJWhRsVuYz1HWHXZ2samym6lsjyojo5zmTR5MteuXROEPnHSJOzs7AsX+7WeIxGfnZ3N7l27ATA0MsLTw5O3IhG2RVf1dyQkJPDwjz8AcF29BgsLC2JjY/H0cEcsLnQelWVKjoiI4EZUFPsP/EDr1q2BQlePfF15fv/9f3Ts2JGIiAiioq5LxBj36IFI9JaNxcR+IyqKYcOGM7BoORd9fQN69OgpLCbWokULWrZogby8goQI31evLMZ89RUZrzPw8fEmOzsbgDZtdBnQv7/E6tpV5dfISG7fvsXOnbskyusp1aO5jg6tWrdmxMhRpKamEBgQwIzp09i3/wD1in3xPhY1KvYFCxeRlpbG/27eZHvwdrKzs7GrYHmTqhAVVegzlZWVxdrahjp16tC5c2fM+vThp1OnhLjo6NtCqq+VlRUNVFVpAIwfb4mrq4sQp6amRr169Xjz5g2+vj48eviQ9h06sM7dQ2L59ZJERl6mQ4cOgojfsWjxYomYdu3al4oZMnQoISEhJCYmoqmpSZcu+hw6dJDGao0xMTFFU1OT3iYm730vqlJPRkaGadOmY2k5gYULFnDxYgTrPT3w2vw9a9asrfY8P1u3bsW4R49S+fWjR48pZag2MDBk9KiRHA8N5auvy78vqClqVOytihbFNTQ0RLu5NosWLmT06DFoamp+UDtl3aC+Mzm/M0SrFVtmHBBuhN5R3DitpfXntmbaknFKSkqsXrOW1a4uxD55QkCAP1Bo6La0nFCuxbCyflSNsvyoRXO4pKWloampyYKFC1FTV2Pnjh24r1uHjo4O48aP5+uvx1bYflXrQaHDaMDAATTTboa1tQ3r3NYyb54zx0+crHKuelRUFL/9doNtQUGVim/WrBmdOnXi9u1bf4nYqz3EkZKSwqNHj0qVGxgUjpk/jY394DYr8qCqKBeaFF6+fClhWUt5LukNVVb+08zwvJg/s+Qq2VC4uvNPp8+wc+cu5i9YgKGRETk5OQQHby9zwVuonh81tWgN1Hd9bwUFBWxt7Thx8hShx08w+MsvcV+3TvBulseH1isoKODOnTvCosjvUFJSwtbOnuzsbO7fv1/hPiti65ZADI2MhHH14jx79owXL16UKv+r/KdQA2I/d+4s48eNLWX4vXa10JPZTPvPtUsr60EV5Ygk3OmvX78mq2gGgXbt2wOFPsgff/gBKJyM8+zZnyXaaNu2rTDi8OOPP5Cfn49IJGL/vn0ScTdv/sb4cWOZOMES1YYN+frrsSxc+Kfj6t2MACXp3r07t2/fLvVFd1m1kj17Cu8VjLsbEx0dzeMS/tDQ46Foa2ujpaVFTk4Oe/bsFmYV09TUZPr0GXz66afcu1dsPpgSftRK16N4EzLY2Fiz+ftNpbbduHEDQHBTvY+Sn+WtW7e4evUq06fPKDPe29sLWxtriYeGjx8/5vf//Y9OnTtXap/VpdrdmMGDv2RH8A6mfDOZyZO/QVtbmzt37rBt21aGDx8hdC8+xIMaGBBAYIlRkE8//ZTjJ05iampK69atefjwIZ6eHmzfHkRGRgaNGzcWZuWCwgV4hw0fTsiRI/z8889cvdqXvPx86pewr7Vr1568vDwePXrEqJEjaNGypTAmrK6uLsyDWJI+fczp3LkLtjbWzJw1myZNmhAWdoYTx4+zdVvhz7ipmRn6BgbY2dowc9YsYTTmaEgInkUPYuTl5TkeGsqpkyeLlmFU5uewMJ49eyYxH6JOcx0OHTpISEgI+l26oNOiRaXqFUdGRoaZM2bi6enBy5dpZGVn8SAmhvy8fEJCjjBo8OBKjYGX9Vlu2RJIp06dhMmbSmJpOYGpVlNwdHRg+PARZGa+JsA/gOY6OgwZMvS9+6wJ5FasqN5qqgoKClj0709iUiLHQo9xPDSU5OfPmTxpMja2tsLV9drVayQlJfLV11+jqKhYZltbAgPLnbelfv36WE6YgJycHH3MzUlKSiT5+XPq1KnD6NGj6dSxE9evX0dJSYnJ33wDQM+ePRHliIiPjyc3Nxfj7sZYWVlx5kzhcpJfjx2Huro6/fpZ8ObtG16+eEFSUhIqysr0s7DAdfUaieG44sjIyGDRvz8pKc/54cABQkOPIQMsWbpMcNPLyMjQv/8AUlJS2L9vH6Ghx8jLz2fJ4iWYmP75JTI1NSM6Opo9u3dz7Ogx8vPzWLhokbDaNUDHTp148vgx+w/sRywW06Nnz0rVK0nHjh3Raa7D9evXuHnzJiKRiLciEROK7k/K5WwLCwAAAYdJREFUMj3v37ePFi1b0qNodoSSn+W9e3fZtHEjixcvKffL0qRJEwyNDLl86TI//nCAqKgoTEx6s2b1GompEz8m/zqnUkZGBtevXyMxIZFhw4fToEEDxGIxTnPnEhERzueff87uPXspKCggMjKS+Pg49PUNhOmWd+3cyaZNG5GVleX8hfAKjcr/dU6ePMGdO3cqNTvvf4F/nQdVLBazdu1aXr54QUBgAC10dEhNTeX58+fIyMjwzZQpQOHQ5O5dO7l69SpycnK0bt2a3Nxcof88esyYWi10AF1dPRo2LHti0/8i/7orOxQ+eg7w9+PKlSu8fPkSZRUV2rdrz6RJkyTGid++fcvWrVs4d/YsiYmJ1KlTh1atWjF06DBGjxnz0ecpkfLP4l8pdilSqoL00ial1iAVu5Rag1TsUmoNUrFLqTVIxS6l1iAVu5Rag1TsUmoNUrFLqTVIxS6l1iAVu5Rag1TsUmoNUrFLqTVIxS6l1iAVu5Rag1TsUmoNUrFLqTVIxS6l1vB/qwcRG+Pps0UAAAAASUVORK5CYII="}}]);
\ No newline at end of file
diff --git a/docs/424c54c2.ec1a883e.js b/docs/424c54c2.8d2425bb.js
similarity index 97%
rename from docs/424c54c2.ec1a883e.js
rename to docs/424c54c2.8d2425bb.js
index 2da7f4fb8c..e56f3e8edb 100644
--- a/docs/424c54c2.ec1a883e.js
+++ b/docs/424c54c2.8d2425bb.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[66],{119:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return u}));var a=n(2),r=n(6),o=(n(0),n(290)),i={title:"Stat / Series / Tall / Interval"},c={unversionedId:"examples/stat-tall-series-interval",id:"examples/stat-tall-series-interval",isDocsHomePage:!1,title:"Stat / Series / Tall / Interval",description:"Create a tall stat card displaying a primary value, an auxiliary value and a series plot.",source:"@site/docs/examples/stat-tall-series-interval.md",slug:"/examples/stat-tall-series-interval",permalink:"/wave/docs/examples/stat-tall-series-interval",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-tall-series-interval.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Series / Tall / Area",permalink:"/wave/docs/examples/stat-tall-series-area"},next:{title:"Layout / Position",permalink:"/wave/docs/examples/layout"}},l=[],s={rightToc:l};function u(e){var t=e.components,i=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},s,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a series plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(345).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 FakeCategoricalSeries\nfrom h2o_wave import site, ui, data\n\npage = site['/demo']\n\nfake = Faker()\nf = FakeCategoricalSeries()\ncat, val, pc = f.next()\nc = page.add(f'example', ui.tall_series_stat_card(\n    box='1 1 1 2',\n    title=fake.cryptocurrency_name(),\n    value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    aux_value='={{intl quux style=\"percent\" minimum_fraction_digits=1 maximum_fraction_digits=1}}',\n    data=dict(qux=val, quux=pc / 100),\n    plot_category='foo',\n    plot_type='interval',\n    plot_value='qux',\n    plot_color='$red',\n    plot_data=data('foo qux', -20),\n    plot_zero_value=0,\n))\npage.save()\n\nwhile True:\n    time.sleep(1)\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    page.save()\n")))}u.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return f}));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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=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<o;s++)i[s]=n[s];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},345:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[71],{124:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return u}));var a=n(2),r=n(6),o=(n(0),n(292)),i={title:"Stat / Series / Tall / Interval"},c={unversionedId:"examples/stat-tall-series-interval",id:"examples/stat-tall-series-interval",isDocsHomePage:!1,title:"Stat / Series / Tall / Interval",description:"Create a tall stat card displaying a primary value, an auxiliary value and a series plot.",source:"@site/docs/examples/stat-tall-series-interval.md",slug:"/examples/stat-tall-series-interval",permalink:"/wave/docs/examples/stat-tall-series-interval",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-tall-series-interval.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Series / Tall / Area",permalink:"/wave/docs/examples/stat-tall-series-area"},next:{title:"Layout / Position",permalink:"/wave/docs/examples/layout"}},l=[],s={rightToc:l};function u(e){var t=e.components,i=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},s,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a series plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(350).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 FakeCategoricalSeries\nfrom h2o_wave import site, ui, data\n\npage = site['/demo']\n\nfake = Faker()\nf = FakeCategoricalSeries()\ncat, val, pc = f.next()\nc = page.add(f'example', ui.tall_series_stat_card(\n    box='1 1 1 2',\n    title=fake.cryptocurrency_name(),\n    value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    aux_value='={{intl quux style=\"percent\" minimum_fraction_digits=1 maximum_fraction_digits=1}}',\n    data=dict(qux=val, quux=pc / 100),\n    plot_category='foo',\n    plot_type='interval',\n    plot_value='qux',\n    plot_color='$red',\n    plot_data=data('foo qux', -20),\n    plot_zero_value=0,\n))\npage.save()\n\nwhile True:\n    time.sleep(1)\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    page.save()\n")))}u.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return f}));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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=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<o;s++)i[s]=n[s];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},350:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/430c4fb3.3c61f745.js b/docs/430c4fb3.19a43eed.js
similarity index 96%
rename from docs/430c4fb3.3c61f745.js
rename to docs/430c4fb3.19a43eed.js
index 827e778b50..ba46ab5ca0 100644
--- a/docs/430c4fb3.3c61f745.js
+++ b/docs/430c4fb3.19a43eed.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[67],{120:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return o})),n.d(t,"default",(function(){return l}));var r=n(2),s=n(6),a=(n(0),n(290)),c={title:"Module h2o_wave.test"},i={unversionedId:"api/test",id:"api/test",isDocsHomePage:!1,title:"Module h2o_wave.test",description:"Functions",source:"@site/docs/api/test.md",slug:"/api/test",permalink:"/wave/docs/api/test",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/api/test.md",version:"current",sidebar:"someSidebar",previous:{title:"Module h2o_wave.types",permalink:"/wave/docs/api/types"}},o=[{value:"Functions",id:"functions",children:[{value:'cypress <a name="h2o_wave.test.cypress"/>',id:"cypress",children:[]}]},{value:"Classes",id:"classes",children:[{value:'Cypress <a name="h2o_wave.test.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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,r,s=function(e,t){if(null==e)return{};var n,r,s={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(s[n]=e[n]);return s}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=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<a;p++)c[p]=n[p];return s.a.createElement.apply(null,c)}return s.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[72],{125:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return o})),n.d(t,"default",(function(){return l}));var r=n(2),s=n(6),a=(n(0),n(292)),c={title:"Module h2o_wave.test"},i={unversionedId:"api/test",id:"api/test",isDocsHomePage:!1,title:"Module h2o_wave.test",description:"Functions",source:"@site/docs/api/test.md",slug:"/api/test",permalink:"/wave/docs/api/test",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/api/test.md",version:"current",sidebar:"someSidebar",previous:{title:"Module h2o_wave.types",permalink:"/wave/docs/api/types"}},o=[{value:"Functions",id:"functions",children:[{value:'cypress <a name="h2o_wave.test.cypress"/>',id:"cypress",children:[]}]},{value:"Classes",id:"classes",children:[{value:'Cypress <a name="h2o_wave.test.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},292: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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,r,s=function(e,t){if(null==e)return{};var n,r,s={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(s[n]=e[n]);return s}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=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<a;p++)c[p]=n[p];return s.a.createElement.apply(null,c)}return s.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/452608cb.42528341.js b/docs/452608cb.42528341.js
new file mode 100644
index 0000000000..ddb164e2ae
--- /dev/null
+++ b/docs/452608cb.42528341.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[73],{126:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return u})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return p}));var r=n(2),a=n(6),o=(n(0),n(292)),u={title:"Form / Buttons"},i={unversionedId:"examples/buttons",id:"examples/buttons",isDocsHomePage:!1,title:"Form / Buttons",description:"Use the ui.buttons() function to group related buttons.",source:"@site/docs/examples/buttons.md",slug:"/examples/buttons",permalink:"/wave/docs/examples/buttons",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/buttons.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Button",permalink:"/wave/docs/examples/button"},next:{title:"Form / Checkbox",permalink:"/wave/docs/examples/checkbox"}},s=[],c={rightToc:s};function p(e){var t=e.components,u=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},c,u,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use the ",Object(o.b)("inlineCode",{parentName:"p"},"ui.buttons()")," function to group related buttons."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(351).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if 'standard_button' in q.args:\n        q.page['example'].items = [\n            ui.text(f'primary_button={q.args.primary_button}'),\n            ui.text(f'standard_button={q.args.standard_button}'),\n            ui.text(f'standard_disabled_button={q.args.standard_disabled_button}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.buttons([\n                ui.button(name='primary_button', label='Primary', primary=True),\n                ui.button(name='standard_button', label='Standard'),\n                ui.button(name='standard_disabled_button', label='Standard', disabled=True),\n            ]),\n        ])\n    await q.page.save()\n")))}p.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),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 u(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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?u(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):u(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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},d=function(e){var t=p(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},l={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=p(n),m=r,b=d["".concat(u,".").concat(m)]||d[m]||l[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<o;c++)u[c]=n[c];return a.a.createElement.apply(null,u)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},351:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/452608cb.c798c22b.js b/docs/452608cb.c798c22b.js
deleted file mode 100644
index e32123c2a8..0000000000
--- a/docs/452608cb.c798c22b.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[68],{121:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return u})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return l}));var r=n(2),a=n(6),o=(n(0),n(290)),u={title:"Form / Buttons"},i={unversionedId:"examples/buttons",id:"examples/buttons",isDocsHomePage:!1,title:"Form / Buttons",description:"Use the ui.buttons() function to group related buttons.",source:"@site/docs/examples/buttons.md",slug:"/examples/buttons",permalink:"/wave/docs/examples/buttons",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/buttons.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Button",permalink:"/wave/docs/examples/button"},next:{title:"Form / Checkbox",permalink:"/wave/docs/examples/checkbox"}},s=[],c={rightToc:s};function l(e){var t=e.components,u=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},c,u,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use the ",Object(o.b)("inlineCode",{parentName:"p"},"ui.buttons()")," function to group related buttons."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(346).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    if 'standard_button' in q.args:\n        q.page['example'].items = [\n            ui.text(f'primary_button={q.args.primary_button}'),\n            ui.text(f'standard_button={q.args.standard_button}'),\n            ui.text(f'standard_disabled_button={q.args.standard_disabled_button}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.buttons([\n                ui.button(name='primary_button', label='Primary', primary=True),\n                ui.button(name='standard_button', label='Standard'),\n                ui.button(name='standard_disabled_button', label='Standard', disabled=True),\n            ]),\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 d})),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 u(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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?u(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):u(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;c++)u[c]=n[c];return a.a.createElement.apply(null,u)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},346:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/4612f97b.80cd17b1.js b/docs/4612f97b.80cd17b1.js
deleted file mode 100644
index 17049b70a0..0000000000
--- a/docs/4612f97b.80cd17b1.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[69],{122:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return c})),t.d(r,"metadata",(function(){return i})),t.d(r,"rightToc",(function(){return l})),t.d(r,"default",(function(){return s}));var n=t(2),o=t(6),a=(t(0),t(290)),c={title:"Form / Color Picker"},i={unversionedId:"examples/color-picker",id:"examples/color-picker",isDocsHomePage:!1,title:"Form / Color Picker",description:"Use a color picker to allow a user to select a color.",source:"@site/docs/examples/color-picker.md",slug:"/examples/color-picker",permalink:"/wave/docs/examples/color-picker",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/color-picker.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Date Picker / Trigger",permalink:"/wave/docs/examples/date-picker-trigger"},next:{title:"Form / Swatch Picker",permalink:"/wave/docs/examples/swatch-picker"}},l=[],p={rightToc:l};function s(e){var r=e.components,c=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},p,c,{components:r,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use a color picker to allow a user to select a color."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+t(347).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'color={q.args.color}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.color_picker(name='color', label='Pick a color', value='#F25F5C'),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}s.isMDXComponent=!0},290:function(e,r,t){"use strict";t.d(r,"a",(function(){return u})),t.d(r,"b",(function(){return d}));var n=t(0),o=t.n(n);function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function c(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<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?c(Object(t),!0).forEach((function(r){a(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function l(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=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<a;p++)c[p]=t[p];return o.a.createElement.apply(null,c)}return o.a.createElement.apply(null,t)}f.displayName="MDXCreateElement"},347:function(e,r,t){"use strict";t.r(r),r.default=t.p+"assets/images/color-picker-d5462fd8a2dcc2b3d980e2402a61d930.png"}}]);
\ No newline at end of file
diff --git a/docs/4612f97b.b25589f7.js b/docs/4612f97b.b25589f7.js
new file mode 100644
index 0000000000..bd4971cc1e
--- /dev/null
+++ b/docs/4612f97b.b25589f7.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[74],{127:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return c})),t.d(r,"metadata",(function(){return i})),t.d(r,"rightToc",(function(){return l})),t.d(r,"default",(function(){return s}));var n=t(2),o=t(6),a=(t(0),t(292)),c={title:"Form / Color Picker"},i={unversionedId:"examples/color-picker",id:"examples/color-picker",isDocsHomePage:!1,title:"Form / Color Picker",description:"Use a color picker to allow a user to select a color.",source:"@site/docs/examples/color-picker.md",slug:"/examples/color-picker",permalink:"/wave/docs/examples/color-picker",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/color-picker.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Date Picker / Trigger",permalink:"/wave/docs/examples/date-picker-trigger"},next:{title:"Form / Swatch Picker",permalink:"/wave/docs/examples/swatch-picker"}},l=[],p={rightToc:l};function s(e){var r=e.components,c=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},p,c,{components:r,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use a color picker to allow a user to select a color."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+t(352).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'color={q.args.color}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.color_picker(name='color', label='Pick a color', value='#F25F5C'),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n")))}s.isMDXComponent=!0},292:function(e,r,t){"use strict";t.d(r,"a",(function(){return u})),t.d(r,"b",(function(){return d}));var n=t(0),o=t.n(n);function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function c(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<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?c(Object(t),!0).forEach((function(r){a(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function l(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=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<a;p++)c[p]=t[p];return o.a.createElement.apply(null,c)}return o.a.createElement.apply(null,t)}f.displayName="MDXCreateElement"},352:function(e,r,t){"use strict";t.r(r),r.default=t.p+"assets/images/color-picker-d5462fd8a2dcc2b3d980e2402a61d930.png"}}]);
\ No newline at end of file
diff --git a/docs/4657d646.d9cdfd44.js b/docs/4657d646.d9cdfd44.js
deleted file mode 100644
index 2cd8cba135..0000000000
--- a/docs/4657d646.d9cdfd44.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[70],{123:function(a){a.exports=JSON.parse('{"allTagsPath":"/wave/blog/tags","slug":"facebook","name":"facebook","count":1,"permalink":"/wave/blog/tags/facebook"}')}}]);
\ No newline at end of file
diff --git a/docs/472f8a66.80c4c03f.js b/docs/472f8a66.59021c64.js
similarity index 97%
rename from docs/472f8a66.80c4c03f.js
rename to docs/472f8a66.59021c64.js
index 9e6270de4a..951db24457 100644
--- a/docs/472f8a66.80c4c03f.js
+++ b/docs/472f8a66.59021c64.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[71],{124:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return l})),a.d(t,"metadata",(function(){return o})),a.d(t,"rightToc",(function(){return b})),a.d(t,"default",(function(){return p}));var n=a(2),r=a(6),i=(a(0),a(290)),l={title:"Layout"},o={unversionedId:"layout",id:"layout",isDocsHomePage:!1,title:"Layout",description:"This section illustrates how to lay out cards on a page.",source:"@site/docs/layout.md",slug:"/layout",permalink:"/wave/docs/layout",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/layout.md",version:"current",sidebar:"someSidebar",previous:{title:"Pages",permalink:"/wave/docs/pages"},next:{title:"Cards",permalink:"/wave/docs/cards"}},b=[{value:"Grid system",id:"grid-system",children:[]},{value:"The box attribute",id:"the-box-attribute",children:[]},{value:"Why a fixed grid?",id:"why-a-fixed-grid",children:[]},{value:"Other layout options",id:"other-layout-options",children:[]},{value:"See also",id:"see-also",children:[]}],c={rightToc:b};function p(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},c,a,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"This section illustrates how to lay out cards on a page."),Object(i.b)("h2",{id:"grid-system"},"Grid system"),Object(i.b)("p",null,"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. "),Object(i.b)("h2",{id:"the-box-attribute"},"The box attribute"),Object(i.b)("p",null,"Every card has a ",Object(i.b)("inlineCode",{parentName:"p"},"box")," attribute that specifies how to position the card on the page, a string of the form ",Object(i.b)("inlineCode",{parentName:"p"},"'column row width height'"),", for example ",Object(i.b)("inlineCode",{parentName:"p"},"'1 1 2 4'")," or ",Object(i.b)("inlineCode",{parentName:"p"},"'8 7 3 6'"),"."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:"{2}","{2}":!0}),"page['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")),Object(i.b)("p",null,"The ",Object(i.b)("inlineCode",{parentName:"p"},"column")," and ",Object(i.b)("inlineCode",{parentName:"p"},"row")," indicate which column and row to position the top-left corner of the card. The ",Object(i.b)("inlineCode",{parentName:"p"},"width")," and ",Object(i.b)("inlineCode",{parentName:"p"},"height")," indicate the width and height of the cards, respectively. The ",Object(i.b)("inlineCode",{parentName:"p"},"column")," and ",Object(i.b)("inlineCode",{parentName:"p"},"row")," are 1-based. The ",Object(i.b)("inlineCode",{parentName:"p"},"width")," and ",Object(i.b)("inlineCode",{parentName:"p"},"height")," are in spans (units) of columns or rows."),Object(i.b)("table",null,Object(i.b)("thead",{parentName:"table"},Object(i.b)("tr",{parentName:"thead"},Object(i.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Attribute"),Object(i.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Value"),Object(i.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Interpreted as"))),Object(i.b)("tbody",{parentName:"table"},Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"column"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"N"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Nth column")),Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"row"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"N"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Nth row")),Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"width"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"N"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"N columns wide")),Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"height"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"N"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"N rows high")))),Object(i.b)("p",null,"For example, a ",Object(i.b)("inlineCode",{parentName:"p"},"box")," of ",Object(i.b)("inlineCode",{parentName:"p"},"1 2 3 4")," is interpreted as:"),Object(i.b)("table",null,Object(i.b)("thead",{parentName:"table"},Object(i.b)("tr",{parentName:"thead"},Object(i.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Attribute"),Object(i.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Value"),Object(i.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Interpreted as"))),Object(i.b)("tbody",{parentName:"table"},Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"column"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"1"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"1st column")),Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"row"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"2"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"2nd row")),Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"width"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"3"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"3 columns wide")),Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"height"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"4"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"4 rows high")))),Object(i.b)("h2",{id:"why-a-fixed-grid"},"Why a fixed grid?"),Object(i.b)("p",null,"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."),Object(i.b)("h2",{id:"other-layout-options"},"Other layout options"),Object(i.b)("p",null,"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. "),Object(i.b)("p",null,"We are working on additional layout mechanisms, slated for release by the end of 2020."),Object(i.b)("h2",{id:"see-also"},"See also"),Object(i.b)("p",null,Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/examples/layout"}),"Positioning")," and ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/examples/layout-size"}),"Sizing")," examples."))}p.isMDXComponent=!0},290:function(e,t,a){"use strict";a.d(t,"a",(function(){return d})),a.d(t,"b",(function(){return O}));var n=a(0),r=a.n(n);function i(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 o(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?l(Object(a),!0).forEach((function(t){i(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):l(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function b(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=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<i;c++)l[c]=a[c];return r.a.createElement.apply(null,l)}return r.a.createElement.apply(null,a)}u.displayName="MDXCreateElement"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[75],{128:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return l})),a.d(t,"metadata",(function(){return o})),a.d(t,"rightToc",(function(){return b})),a.d(t,"default",(function(){return p}));var n=a(2),r=a(6),i=(a(0),a(292)),l={title:"Layout"},o={unversionedId:"layout",id:"layout",isDocsHomePage:!1,title:"Layout",description:"This section illustrates how to lay out cards on a page.",source:"@site/docs/layout.md",slug:"/layout",permalink:"/wave/docs/layout",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/layout.md",version:"current",sidebar:"someSidebar",previous:{title:"Pages",permalink:"/wave/docs/pages"},next:{title:"Cards",permalink:"/wave/docs/cards"}},b=[{value:"Grid system",id:"grid-system",children:[]},{value:"The box attribute",id:"the-box-attribute",children:[]},{value:"Why a fixed grid?",id:"why-a-fixed-grid",children:[]},{value:"Other layout options",id:"other-layout-options",children:[]},{value:"See also",id:"see-also",children:[]}],c={rightToc:b};function p(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},c,a,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"This section illustrates how to lay out cards on a page."),Object(i.b)("h2",{id:"grid-system"},"Grid system"),Object(i.b)("p",null,"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. "),Object(i.b)("h2",{id:"the-box-attribute"},"The box attribute"),Object(i.b)("p",null,"Every card has a ",Object(i.b)("inlineCode",{parentName:"p"},"box")," attribute that specifies how to position the card on the page, a string of the form ",Object(i.b)("inlineCode",{parentName:"p"},"'column row width height'"),", for example ",Object(i.b)("inlineCode",{parentName:"p"},"'1 1 2 4'")," or ",Object(i.b)("inlineCode",{parentName:"p"},"'8 7 3 6'"),"."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:"{2}","{2}":!0}),"page['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")),Object(i.b)("p",null,"The ",Object(i.b)("inlineCode",{parentName:"p"},"column")," and ",Object(i.b)("inlineCode",{parentName:"p"},"row")," indicate which column and row to position the top-left corner of the card. The ",Object(i.b)("inlineCode",{parentName:"p"},"width")," and ",Object(i.b)("inlineCode",{parentName:"p"},"height")," indicate the width and height of the cards, respectively. The ",Object(i.b)("inlineCode",{parentName:"p"},"column")," and ",Object(i.b)("inlineCode",{parentName:"p"},"row")," are 1-based. The ",Object(i.b)("inlineCode",{parentName:"p"},"width")," and ",Object(i.b)("inlineCode",{parentName:"p"},"height")," are in spans (units) of columns or rows."),Object(i.b)("table",null,Object(i.b)("thead",{parentName:"table"},Object(i.b)("tr",{parentName:"thead"},Object(i.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Attribute"),Object(i.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Value"),Object(i.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Interpreted as"))),Object(i.b)("tbody",{parentName:"table"},Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"column"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"N"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Nth column")),Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"row"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"N"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Nth row")),Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"width"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"N"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"N columns wide")),Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"height"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"N"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"N rows high")))),Object(i.b)("p",null,"For example, a ",Object(i.b)("inlineCode",{parentName:"p"},"box")," of ",Object(i.b)("inlineCode",{parentName:"p"},"1 2 3 4")," is interpreted as:"),Object(i.b)("table",null,Object(i.b)("thead",{parentName:"table"},Object(i.b)("tr",{parentName:"thead"},Object(i.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Attribute"),Object(i.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Value"),Object(i.b)("th",Object(n.a)({parentName:"tr"},{align:null}),"Interpreted as"))),Object(i.b)("tbody",{parentName:"table"},Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"column"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"1"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"1st column")),Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"row"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"2"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"2nd row")),Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"width"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"3"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"3 columns wide")),Object(i.b)("tr",{parentName:"tbody"},Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"height"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"4"),Object(i.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"4 rows high")))),Object(i.b)("h2",{id:"why-a-fixed-grid"},"Why a fixed grid?"),Object(i.b)("p",null,"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."),Object(i.b)("h2",{id:"other-layout-options"},"Other layout options"),Object(i.b)("p",null,"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. "),Object(i.b)("p",null,"We are working on additional layout mechanisms, slated for release by the end of 2020."),Object(i.b)("h2",{id:"see-also"},"See also"),Object(i.b)("p",null,Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/examples/layout"}),"Positioning")," and ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/examples/layout-size"}),"Sizing")," examples."))}p.isMDXComponent=!0},292:function(e,t,a){"use strict";a.d(t,"a",(function(){return d})),a.d(t,"b",(function(){return O}));var n=a(0),r=a.n(n);function i(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 o(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?l(Object(a),!0).forEach((function(t){i(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):l(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function b(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=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<i;c++)l[c]=a[c];return r.a.createElement.apply(null,l)}return r.a.createElement.apply(null,a)}u.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/4784cd26.46ed9b20.js b/docs/4784cd26.a4fc6f8a.js
similarity index 97%
rename from docs/4784cd26.46ed9b20.js
rename to docs/4784cd26.a4fc6f8a.js
index 49d2f051ce..54d48ce84a 100644
--- a/docs/4784cd26.46ed9b20.js
+++ b/docs/4784cd26.a4fc6f8a.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[72],{125:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return c})),r.d(t,"metadata",(function(){return s})),r.d(t,"rightToc",(function(){return i})),r.d(t,"default",(function(){return u}));var n=r(2),a=r(6),o=(r(0),r(290)),c={title:"Form / Progress"},s={unversionedId:"examples/progress",id:"examples/progress",isDocsHomePage:!1,title:"Form / Progress",description:"Use a progress bar to indicate completion status of an operation.",source:"@site/docs/examples/progress.md",slug:"/examples/progress",permalink:"/wave/docs/examples/progress",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/progress.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Link",permalink:"/wave/docs/examples/link"},next:{title:"Form / Progress / Updating",permalink:"/wave/docs/examples/progress-update"}},i=[],p={rightToc:i};function u(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,"Use a progress bar to indicate completion status of an operation."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(348).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from 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='Indeterminate Progress', caption='Goes on forever'),\n        ui.progress(label='Standard Progress', caption='Downloading the interwebs...', value=0.25),\n    ]\n)\npage.save()\n")))}u.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return m})),r.d(t,"b",(function(){return b}));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 s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function i(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;p++)c[p]=r[p];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,r)}l.displayName="MDXCreateElement"},348:function(e,t,r){"use strict";r.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[76],{129:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return c})),r.d(t,"metadata",(function(){return s})),r.d(t,"rightToc",(function(){return i})),r.d(t,"default",(function(){return u}));var n=r(2),a=r(6),o=(r(0),r(292)),c={title:"Form / Progress"},s={unversionedId:"examples/progress",id:"examples/progress",isDocsHomePage:!1,title:"Form / Progress",description:"Use a progress bar to indicate completion status of an operation.",source:"@site/docs/examples/progress.md",slug:"/examples/progress",permalink:"/wave/docs/examples/progress",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/progress.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Link",permalink:"/wave/docs/examples/link"},next:{title:"Form / Progress / Updating",permalink:"/wave/docs/examples/progress-update"}},i=[],p={rightToc:i};function u(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,"Use a progress bar to indicate completion status of an operation."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(353).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from 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='Indeterminate Progress', caption='Goes on forever'),\n        ui.progress(label='Standard Progress', caption='Downloading the interwebs...', value=0.25),\n    ]\n)\npage.save()\n")))}u.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return m})),r.d(t,"b",(function(){return b}));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 s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function i(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;p++)c[p]=r[p];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,r)}l.displayName="MDXCreateElement"},353:function(e,t,r){"use strict";r.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/47a365f9.7354e3ea.js b/docs/47a365f9.7354e3ea.js
new file mode 100644
index 0000000000..5e9fc6b203
--- /dev/null
+++ b/docs/47a365f9.7354e3ea.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[77,22],{130:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return c})),a.d(t,"metadata",(function(){return p})),a.d(t,"rightToc",(function(){return l})),a.d(t,"default",(function(){return b}));var n=a(2),r=a(6),o=(a(0),a(292)),i=a(45),c={title:"A Tour of Wave"},p={unversionedId:"tour",id:"tour",isDocsHomePage:!1,title:"A Tour of Wave",description:"Your Wave release download ships with over 150 examples.",source:"@site/docs/tour.md",slug:"/tour",permalink:"/wave/docs/tour",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/tour.md",version:"current",sidebar:"someSidebar",previous:{title:"Installation",permalink:"/wave/docs/installation"},next:{title:"Tutorial: Hello World",permalink:"/wave/docs/tutorial-hello"}},l=[{value:"Step 1: Start the Wave server",id:"step-1-start-the-wave-server",children:[]},{value:"Step 2: Run the tour",id:"step-2-run-the-tour",children:[]},{value:"Step 3: Enjoy the tour",id:"step-3-enjoy-the-tour",children:[]},{value:"Wrapping up",id:"wrapping-up",children:[]}],s={rightToc:l};function b(e){var t=e.components,c=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},s,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Your Wave release download ships with ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"examples"}),"over 150 examples"),"."),Object(o.b)("p",null,"You can play around with these examples in your browser using ",Object(o.b)("inlineCode",{parentName:"p"},"tour.py"),", a Python script (itself a Wave app) located in ",Object(o.b)("inlineCode",{parentName:"p"},"examples/"),":"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-none",metastring:'title="Contents of $HOME/wave"',title:'"Contents',of:!0,'$HOME/wave"':!0}),"wave/\n\u251c\u2500\u2500 examples/       <-- Examples live here.\n|   \u2514\u2500\u2500 tour.py     <-- The Wave Tour.\n\u251c\u2500\u2500 test/           \n\u251c\u2500\u2500 www/            \n\u2514\u2500\u2500 waved\n")),Object(o.b)("p",null,"To run the tour, as with any Wave app, we need to start both the Wave server (",Object(o.b)("inlineCode",{parentName:"p"},"waved"),") and the tour (",Object(o.b)("inlineCode",{parentName:"p"},"tour.py"),"). Let's go ahead and do that."),Object(o.b)("h2",{id:"step-1-start-the-wave-server"},"Step 1: Start the Wave server"),Object(o.b)(i.default,{mdxType:"StartQ"}),Object(o.b)("h2",{id:"step-2-run-the-tour"},"Step 2: Run the tour"),Object(o.b)("p",null,"First, create a ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://docs.python.org/3/tutorial/venv.html"}),"virtual environment"),", install the tour's dependencies."),Object(o.b)("div",{className:"admonition admonition-important alert alert--info"},Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(o.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"})))),"important")),Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"Do this from a new terminal window!"))),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave\npython3 -m venv venv\nsource venv/bin/activate\npip install -r examples/requirements.txt\n")),Object(o.b)("p",null,"On Windows:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME\\wave\npython3 -m venv venv\nvenv\\Scripts\\activate.bat\npip install -r examples\\requirements.txt\n")),Object(o.b)("p",null,"Finally, run the tour:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"wave run --no-reload examples.tour\n")),Object(o.b)("h2",{id:"step-3-enjoy-the-tour"},"Step 3: Enjoy the tour"),Object(o.b)("p",null,"Go to ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"http://localhost:55555/tour"}),"http://localhost:55555/tour")," to access the tour. "),Object(o.b)("p",null,Object(o.b)("img",{alt:"tour",src:a(503).default})),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"tour.py")," is an ordinary Wave app that runs other apps. The tour itself runs at the route ",Object(o.b)("inlineCode",{parentName:"p"},"/tour"),", and each of the examples runs at ",Object(o.b)("inlineCode",{parentName:"p"},"/demo"),". "),Object(o.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(o.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"To play with the tour's active example in isolation, simply open a new browser tab and head to ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"http://localhost:55555/demo"}),"http://localhost:55555/demo"),"."))),Object(o.b)("h2",{id:"wrapping-up"},"Wrapping up"),Object(o.b)("p",null,"In this section, we started the Wave server and then launched ",Object(o.b)("inlineCode",{parentName:"p"},"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 ",Object(o.b)("inlineCode",{parentName:"p"},"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 ",Object(o.b)("inlineCode",{parentName:"p"},"todo.py"),", simply run:"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"wave run examples.todo\n")),Object(o.b)("p",null,"You can now access the example at ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"http://localhost:55555/demo"}),"http://localhost:55555/demo"),". Simple!"))}b.isMDXComponent=!0},292: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 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 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 c(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function p(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var l=r.a.createContext({}),s=function(e){var t=r.a.useContext(l),a=t;return e&&(a="function"==typeof e?e(t):c(c({},t),e)),a},b=function(e){var t=s(e.components);return r.a.createElement(l.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,l=p(e,["components","mdxType","originalType","parentName"]),b=s(a),d=n,m=b["".concat(i,".").concat(d)]||b[d]||u[d]||o;return a?r.a.createElement(m,c(c({ref:t},l),{},{components:a})):r.a.createElement(m,c({ref:t},l))}));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 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<o;l++)i[l]=a[l];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,a)}d.displayName="MDXCreateElement"},45:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return i})),a.d(t,"metadata",(function(){return c})),a.d(t,"rightToc",(function(){return p})),a.d(t,"default",(function(){return s}));var n=a(2),r=a(6),o=(a(0),a(292)),i={},c={unversionedId:"_start_q",id:"_start_q",isDocsHomePage:!1,title:"_start_q",description:"To start the Wave server, simply open a new terminal window and execute waved (or waved.exe on Windows).",source:"@site/docs/_start_q.md",slug:"/_start_q",permalink:"/wave/docs/_start_q",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/_start_q.md",version:"current"},p=[],l={rightToc:p};function s(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"To start the Wave server, simply open a new terminal window and execute ",Object(o.b)("inlineCode",{parentName:"p"},"waved")," (or ",Object(o.b)("inlineCode",{parentName:"p"},"waved.exe")," on Windows)."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave\n./waved\n")),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{}),'2020/10/27 16:16:34 # \n2020/10/27 16:16:34 # \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n2020/10/27 16:16:34 # \u2502  \u250c    \u250c \u250c\u2500\u2500\u2510 \u250c  \u250c \u250c\u2500\u2500\u2510  \u2502 H2O Wave\n2020/10/27 16:16:34 # \u2502  \u2502 \u250c\u2500\u2500\u2518 \u2502\u2500\u2500\u2502 \u2502  \u2502 \u2514\u2510    \u2502 (version) (build)\n2020/10/27 16:16:34 # \u2502  \u2514\u2500\u2518    \u2518  \u2518 \u2514\u2500\u2500\u2518  \u2514\u2500\u2518  \u2502 \xa9 2020 H2O.ai, Inc.\n2020/10/27 16:16:34 # \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n2020/10/27 16:16:34 # \n2020/10/27 16:16:34 # {"address":":55555","t":"listen","webroot":"/home/elp/wave/www"}\n')),Object(o.b)("p",null,"The Wave server should now be running at ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"http://localhost:55555"}),"http://localhost:55555"),"."),Object(o.b)("div",{className:"admonition admonition-caution alert alert--warning"},Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}),Object(o.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})))),"Don't close this terminal window!")),Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"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."))))}s.isMDXComponent=!0},503:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/images/tour__tour-968f92ad1236ec66ad30ed613ba324db.png"}}]);
\ No newline at end of file
diff --git a/docs/47a365f9.d7ec0ae7.js b/docs/47a365f9.d7ec0ae7.js
deleted file mode 100644
index d2a31d4aff..0000000000
--- a/docs/47a365f9.d7ec0ae7.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[73,21],{126:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return b}));var a=n(2),r=n(6),o=(n(0),n(290)),i=n(45),c={title:"A Tour of Wave"},p={unversionedId:"tour",id:"tour",isDocsHomePage:!1,title:"A Tour of Wave",description:"Your Wave release download ships with over 150 examples.",source:"@site/docs/tour.md",slug:"/tour",permalink:"/wave/docs/tour",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/tour.md",version:"current",sidebar:"someSidebar",previous:{title:"Installation",permalink:"/wave/docs/installation"},next:{title:"Tutorial: Hello World",permalink:"/wave/docs/tutorial-hello"}},s=[{value:"Step 1: Start the Wave server",id:"step-1-start-the-wave-server",children:[]},{value:"Step 2: Run the tour",id:"step-2-run-the-tour",children:[]},{value:"Step 3: Enjoy the tour",id:"step-3-enjoy-the-tour",children:[]},{value:"Wrapping up",id:"wrapping-up",children:[]}],l={rightToc:s};function b(e){var t=e.components,c=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},l,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Your Wave release download ships with ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"examples"}),"over 150 examples"),"."),Object(o.b)("p",null,"You can play around with these examples in your browser using ",Object(o.b)("inlineCode",{parentName:"p"},"tour.py"),", a Python script (itself a Wave app) located in ",Object(o.b)("inlineCode",{parentName:"p"},"examples/"),":"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-none",metastring:'title="Contents of $HOME/wave"',title:'"Contents',of:!0,'$HOME/wave"':!0}),"wave/\n\u251c\u2500\u2500 docs/           \n\u251c\u2500\u2500 examples/       <-- Examples live here.\n|   \u2514\u2500\u2500 tour.py     <-- The Wave Tour.\n\u251c\u2500\u2500 test/           \n\u251c\u2500\u2500 www/            \n\u2514\u2500\u2500 wave              \n")),Object(o.b)("p",null,"To run the tour, as with any Wave app, we need to start both the Wave server (",Object(o.b)("inlineCode",{parentName:"p"},"wave"),") and the tour (",Object(o.b)("inlineCode",{parentName:"p"},"tour.py"),"). Let's go ahead and do that."),Object(o.b)("h2",{id:"step-1-start-the-wave-server"},"Step 1: Start the Wave server"),Object(o.b)(i.default,{mdxType:"StartQ"}),Object(o.b)("h2",{id:"step-2-run-the-tour"},"Step 2: Run the tour"),Object(o.b)("p",null,"To run the tour, create a ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://docs.python.org/3/tutorial/venv.html"}),"virtual environment"),", install the tour's dependencies, and finally execute ",Object(o.b)("inlineCode",{parentName:"p"},"tour.py"),".  "),Object(o.b)("div",{className:"admonition admonition-important alert alert--info"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(o.b)("path",Object(a.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"})))),"important")),Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"Do this from a new terminal window!"))),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave\npython3 -m venv venv\n./venv/bin/pip install -r examples/requirements.txt\n./venv/bin/python examples/tour.py\n")),Object(o.b)("p",null,"On Windows:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME\\wave\npython3 -m venv venv\nvenv\\Scripts\\pip install -r examples\\requirements.txt\nvenv\\Scripts\\python examples\\tour.py\n")),Object(o.b)("h2",{id:"step-3-enjoy-the-tour"},"Step 3: Enjoy the tour"),Object(o.b)("p",null,"Go to ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"http://localhost:55555/tour"}),"http://localhost:55555/tour")," to access the tour. "),Object(o.b)("p",null,Object(o.b)("img",{alt:"tour",src:n(495).default})),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"tour.py")," is an ordinary Wave app that runs other apps. The tour itself runs at the route ",Object(o.b)("inlineCode",{parentName:"p"},"/tour"),", and each of the examples runs at ",Object(o.b)("inlineCode",{parentName:"p"},"/demo"),". "),Object(o.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(o.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"To play with the tour's active example in isolation, simply open a new browser tab and head to ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"http://localhost:55555/demo"}),"http://localhost:55555/demo"),"."))),Object(o.b)("h2",{id:"wrapping-up"},"Wrapping up"),Object(o.b)("p",null,"In this section, we started the Wave server and then launched ",Object(o.b)("inlineCode",{parentName:"p"},"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 ",Object(o.b)("inlineCode",{parentName:"p"},"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 ",Object(o.b)("inlineCode",{parentName:"p"},"todo.py"),", simply run:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave\n./venv/bin/python examples/todo.py\n")),Object(o.b)("p",null,"You can now access the example at ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"http://localhost:55555/demo"}),"http://localhost:55555/demo"),". Simple!"))}b.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),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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=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<o;s++)i[s]=n[s];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},45:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return l}));var a=n(2),r=n(6),o=(n(0),n(290)),i={},c={unversionedId:"_start_q",id:"_start_q",isDocsHomePage:!1,title:"_start_q",description:"To start the Wave server, simply open a new terminal window and execute wave (or wave.exe on Windows).",source:"@site/docs/_start_q.md",slug:"/_start_q",permalink:"/wave/docs/_start_q",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/_start_q.md",version:"current"},p=[],s={rightToc:p};function l(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},s,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"To start the Wave server, simply open a new terminal window and execute ",Object(o.b)("inlineCode",{parentName:"p"},"wave")," (or ",Object(o.b)("inlineCode",{parentName:"p"},"wave.exe")," on Windows)."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave\n./wave\n")),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{}),'2020/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":"/home/elp/wave/www"}\n')),Object(o.b)("p",null,"The Wave server should now be running at ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"http://localhost:55555"}),"http://localhost:55555"),"."),Object(o.b)("div",{className:"admonition admonition-caution alert alert--warning"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}),Object(o.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})))),"Don't close this terminal window!")),Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"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."))))}l.isMDXComponent=!0},495:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/tour__tour-968f92ad1236ec66ad30ed613ba324db.png"}}]);
\ No newline at end of file
diff --git a/docs/47b3e1f7.8e29a4af.js b/docs/47b3e1f7.8e29a4af.js
deleted file mode 100644
index e342622d02..0000000000
--- a/docs/47b3e1f7.8e29a4af.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[74],{127:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return u})),n.d(t,"default",(function(){return l}));var r=n(2),a=n(6),c=(n(0),n(290)),o={title:"Mode / Unicast"},i={unversionedId:"examples/counter-unicast",id:"examples/counter-unicast",isDocsHomePage:!1,title:"Mode / Unicast",description:"Launch the server in unicast mode and use q.client to manage client-local state.",source:"@site/docs/examples/counter-unicast.md",slug:"/examples/counter-unicast",permalink:"/wave/docs/examples/counter-unicast",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/counter-unicast.md",version:"current",sidebar:"someSidebar",previous:{title:"Mode / Multicast",permalink:"/wave/docs/examples/counter-multicast"},next:{title:"Graphics / Primitives",permalink:"/wave/docs/examples/graphics-primitives"}},u=[],s={rightToc:u};function l(e){var t=e.components,o=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(r.a)({},s,o,{components:t,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Launch the server in unicast mode and use ",Object(c.b)("inlineCode",{parentName:"p"},"q.client")," to manage client-local state."),Object(c.b)("div",{className:"cover",style:{backgroundImage:"url("+n(349).default+")"}}),Object(c.b)("pre",null,Object(c.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui, pack\n\n\nasync def serve(q: Q):\n    count = q.client.count or 0\n    if 'increment' in q.args:\n        count += 1\n        q.client.count = count\n\n    items = pack([ui.button(name='increment', label=f'Count={count}')])\n\n    if count > 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},c=Object.keys(e);for(r=0;r<c.length;r++)n=c[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r<c.length;r++)n=c[r],t.indexOf(n)>=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<c;s++)o[s]=n[s];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},349:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/47b3e1f7.ea95f335.js b/docs/47b3e1f7.ea95f335.js
new file mode 100644
index 0000000000..5fa3f2b89d
--- /dev/null
+++ b/docs/47b3e1f7.ea95f335.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[78],{131:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return u})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),c=(n(0),n(292)),o={title:"Mode / Unicast"},i={unversionedId:"examples/counter-unicast",id:"examples/counter-unicast",isDocsHomePage:!1,title:"Mode / Unicast",description:"Launch the server in unicast mode and use q.client to manage client-local state.",source:"@site/docs/examples/counter-unicast.md",slug:"/examples/counter-unicast",permalink:"/wave/docs/examples/counter-unicast",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/counter-unicast.md",version:"current",sidebar:"someSidebar",previous:{title:"Mode / Multicast",permalink:"/wave/docs/examples/counter-multicast"},next:{title:"Background Tasks",permalink:"/wave/docs/examples/background"}},u=[],l={rightToc:u};function s(e){var t=e.components,o=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(r.a)({},l,o,{components:t,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Launch the server in unicast mode and use ",Object(c.b)("inlineCode",{parentName:"p"},"q.client")," to manage client-local state."),Object(c.b)("div",{className:"cover",style:{backgroundImage:"url("+n(354).default+")"}}),Object(c.b)("pre",null,Object(c.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    count = q.client.count or 0\n\n    if not q.client.initialized:\n        q.page['example'] = ui.form_card(box='1 1 -1 -1', items=[\n            ui.button(name='increment', label=f'Count={count}')\n        ])\n        q.client.initialized = True\n\n    if q.args.increment:\n        q.client.count = count = count + 1\n        q.page['example'].items[0].button.label = f'Count={count}'\n\n    await q.page.save()\n")))}s.isMDXComponent=!0},292: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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},c=Object.keys(e);for(r=0;r<c.length;r++)n=c[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r<c.length;r++)n=c[r],t.indexOf(n)>=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},p=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 n=e.components,r=e.mdxType,c=e.originalType,o=e.parentName,l=u(e,["components","mdxType","originalType","parentName"]),p=s(n),m=r,b=p["".concat(o,".").concat(m)]||p[m]||d[m]||c;return n?a.a.createElement(b,i(i({ref:t},l),{},{components:n})):a.a.createElement(b,i({ref:t},l))}));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]=m;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 l=2;l<c;l++)o[l]=n[l];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},354:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/48786391.09e5ebbe.js b/docs/48786391.4818219b.js
similarity index 92%
rename from docs/48786391.09e5ebbe.js
rename to docs/48786391.4818219b.js
index 6ca1de27c2..04a4262d76 100644
--- a/docs/48786391.09e5ebbe.js
+++ b/docs/48786391.4818219b.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[75],{128: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 p})),r.d(t,"default",(function(){return u}));var n=r(2),a=r(6),o=(r(0),r(290)),i={title:"Plot / Form"},c={unversionedId:"examples/plot-form",id:"examples/plot-form",isDocsHomePage:!1,title:"Plot / Form",description:"Display a plot inside a form.",source:"@site/docs/examples/plot-form.md",slug:"/examples/plot-form",permalink:"/wave/docs/examples/plot-form",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-form.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Axis Titles",permalink:"/wave/docs/examples/plot-axis-title"},next:{title:"Plot / Vega-lite",permalink:"/wave/docs/examples/plot-vegalite"}},p=[],l={rightToc:p};function u(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Display a plot inside a form."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(350).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 20\nf = FakeCategoricalSeries()\nv = page.add('example', ui.form_card(\n    box='1 1 4 5',\n    items=[\n        ui.text_xl('Example 1'),\n        ui.visualization(\n            plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),\n            data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True),\n        ),\n        ui.text_xl('Example 2'),\n        ui.visualization(\n            plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),\n            data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True),\n        ),\n    ],\n))\n\npage.save()\n")))}u.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return s})),r.d(t,"b",(function(){return d}));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 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 c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;l++)i[l]=r[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},350:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-form-7b7c198bf0e0f55d1d9389b4f4dcff1a.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[79],{132: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 p})),r.d(t,"default",(function(){return u}));var n=r(2),a=r(6),o=(r(0),r(292)),i={title:"Plot / Form"},c={unversionedId:"examples/plot-form",id:"examples/plot-form",isDocsHomePage:!1,title:"Plot / Form",description:"Display a plot inside a form.",source:"@site/docs/examples/plot-form.md",slug:"/examples/plot-form",permalink:"/wave/docs/examples/plot-form",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-form.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Axis Titles",permalink:"/wave/docs/examples/plot-axis-title"},next:{title:"Plot / Vega-lite",permalink:"/wave/docs/examples/plot-vegalite"}},p=[],l={rightToc:p};function u(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Display a plot inside a form."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(355).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 20\nf = FakeCategoricalSeries()\nv = page.add('example', ui.form_card(\n    box='1 1 4 5',\n    items=[\n        ui.text_xl('Example 1'),\n        ui.visualization(\n            plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),\n            data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True),\n        ),\n        ui.text_xl('Example 2'),\n        ui.visualization(\n            plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),\n            data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True),\n        ),\n    ],\n))\n\npage.save()\n")))}u.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return s})),r.d(t,"b",(function(){return d}));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 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 c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;l++)i[l]=r[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},355:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-form-7b7c198bf0e0f55d1d9389b4f4dcff1a.png"}}]);
\ No newline at end of file
diff --git a/docs/4ab7b8a0.4ff6fba6.js b/docs/4ab7b8a0.4ff6fba6.js
new file mode 100644
index 0000000000..12d9fb64aa
--- /dev/null
+++ b/docs/4ab7b8a0.4ff6fba6.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[80],{133:function(e,r,n){"use strict";n.r(r),n.d(r,"frontMatter",(function(){return i})),n.d(r,"metadata",(function(){return c})),n.d(r,"rightToc",(function(){return s})),n.d(r,"default",(function(){return l}));var t=n(2),o=n(6),a=(n(0),n(292)),i={title:"Form / Picker"},c={unversionedId:"examples/picker",id:"examples/picker",isDocsHomePage:!1,title:"Form / Picker",description:"Use pickers to allow users to select one or more choices, such as tags or files,\u202ffrom a list.",source:"@site/docs/examples/picker.md",slug:"/examples/picker",permalink:"/wave/docs/examples/picker",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/picker.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Checklist",permalink:"/wave/docs/examples/checklist"},next:{title:"Form / Picker / Selection",permalink:"/wave/docs/examples/picker-selection"}},s=[],u={rightToc:s};function l(e){var r=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(t.a)({},u,i,{components:r,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use pickers to allow users to select one or more choices, such as tags or files,\u202ffrom a list."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(356).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'selected={q.args.picker}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.picker(name='picker', label='Place an order (try Spam, Eggs or Ham):', choices=[\n                ui.choice(name='spam', label='Spam'),\n                ui.choice(name='eggs', label='Eggs'),\n                ui.choice(name='ham', label='Ham'),\n                ui.choice(name='cheese', label='Cheese'),\n                ui.choice(name='beans', label='Beans'),\n                ui.choice(name='toast', label='Toast'),\n            ]),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n")))}l.isMDXComponent=!0},292:function(e,r,n){"use strict";n.d(r,"a",(function(){return p})),n.d(r,"b",(function(){return m}));var t=n(0),o=n.n(t);function a(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function i(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 c(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?i(Object(n),!0).forEach((function(r){a(e,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))}))}return e}function s(e,r){if(null==e)return{};var n,t,o=function(e,r){if(null==e)return{};var n,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)n=a[t],r.indexOf(n)>=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)n=a[t],r.indexOf(n)>=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<a;u++)i[u]=n[u];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}A.displayName="MDXCreateElement"},356:function(e,r,n){"use strict";n.r(r),r.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjoAAABCCAYAAABepnxFAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDEyOjU0OjUyIFBNIFBEVNkNx8MAAB2gSURBVHic7d15XM3Z/wfw173dyhIZU2EaYiiMiVFpU9pIKFkiZatRiayZoiYqyxjET9mVZaxlKaXQEIMxX4OUrV2ptFDGkrZb3c/vj759dFtU3Cv6vp+Px308+nzO+XzOcg+9O+fcz+UwDMOAEEIIIaQN4rZ2BQghhBBCxIUCHUIIIYS0WRToEEIIIaTNokCHEEIIIW0WBTqEEEIIabMo0CGEEEJIm0WBDiGEEELaLAp0CCGEENJmUaBDCCGEkDaLAh1CCCGEtFktCnR++ske6mpDoa42FBrqajAbbYoAf39UVFSweYyNDBF7547IK/olO3jgABYvXiSWe69YvhyhoafFcu/aSoqLsWnjBpiOGgkdbS3Y2trg0qVLYi/3Y9Qer7VfZyMiWrtqH2Xnjh1Y4OLSYJrleAuxte/q1atYuKDhcgkh5HPFa+kFs2fbwWrKFDAMg6ysTGzcsAElpSVYscJDHPUj75GUlIi4uLtY9+uv7LlRo0Zi7dp10NLSEmlZy5e74/Xr1/BdvRoKCt1w585trPTyAo/Hg6GhoUjLEqWa8Vpbly5dWqk2XzYDAwME+G9F7J07UNfQaO3qEEJIs7Q40OncuTO++eYbAICioiKWurpixfLlcHVdBikpKZFXkDTu9KnTMDEZCQkJCbGWU1BQgL///hvnL0RDQUEBANC3b1+UlZXh3r34zzrQqT1eyccbYWCA0NDTFOgQQr4YH71Hp18/ZZSXl+Ply3/rpZWVlSHA3x9jx5hBV0cbc+c64XFaGpteVVWFbdsCYDpqJHR1tLHMdSlevnzZYLrBCH0sc12K7OzsRuuSk5MDjxUrYGxkCIMR+ljp5YW3b9+y6cZGhoiMjMSM6bbVyy8205CclNTo/SorK7EtoLp8fb3hWLRwAXJynrLpISHBWLRoIdav/xXDdXVw5swZ9vy4sWOgo60Nb+9VQkt7zWmXu9vP8PffinnOc6E5TANPnz5FQ65fv4ZhmsMAAEVFRVBXG4p/X7zA/HnOGGM2utE6RkdHw3TUSAgEAvZeeXl50FBXQ2ZmZr1yeLzqeLjg+XOh87Nn22Hx4iUAgMdpadAbrovbt2/BwnwcdHW0MX/+PKG6NzUejI0McSYsDFOnWEFHWxvLlrkiPz8fy1yXQldHG5MmTkBsbGxjb9cHuXP7NmxtbaCjrQV7u9m48ddf0Buuy6bz+Xz89tt6GBkawMjQAEeOHIa72884fOgQm+fI4cMYbToKujracHJyFBojdb148QLL3d0wQl8PxkaGWL/+V5SVlbHpzX3vmys2NhaODnOgN1wXY8xGY++ePWxaSEgwFi9ehC2bN0NfbzjGjjHDlSuXcf7cOZiPGwt9fT34+HijqqqKvUZLUws3btwAwzAAgMLCQow0MUZYaOhH1ZMQQsTlowOd3JwcSEhIQFa2/nJAgL8//v77BjZu2oQz4RHoraQET09PNn3LZj9cv34dGzdtwvHgELTv0AFz5zqx/4nWpG/e8n84cvQYunz1FZznOqG8vLxeWQzDwHXpUgDAwd8P4dDhI8jOzsKunTuE8h05fAgrV3njj4uXoKyiAk/PxpfcNm3cgBs3/sKmTX44euw4evToASdHR5QUF7N5bt+6BdnOsjgdGobRo0cjPPwMdu/eDTf35Th1+jT69O6D4ODjQvdtTrvOhIXB0nICzl+IRo8ePerVraCgAAUFBRg48HsAQKdOnfCfm/9ARkYGW/39ER5xttE6GhgYoKSkBPHx8WyemEuXMHDgQCgpKdUr66uvvoKl5QQsXLgAgXv3IiUlpcH+Ki8vx4EDB7Br9x5cvBSDAf0HYP48Z7ZdTY0HAAgLC4Pf5i04dfoUHqelYcZ0W0y2moKYy1dgaGgEH+9Vjb5fLZWVlYVFixbCdJQpTp0+jekzZmLTpo1CeTb8th734uPhH7AN+w8cxP179xAXF8emnz93DkeOHIbf5i04Ex4BFRUVeK/ybrC8yspKuMyfBw6Hi98PHcaOnbuQlpqGX34R7oOm3vvmev78ORa4uGD4cD2EnQnH+t9+Q3DwcVy+HMPmib1zB926d8P5C9GYam2NlV5eiImJwdFjx3Hw4O/4z99/4/y5c2z+/gMGoKioiA2IpaSk0KdPH8jLy39wPQkhRKyYFrC3t2MO7N/PHufn5zE/2dsz7u5u7DkjQwPmzu3bDMMwTGVlJfPmzRs27fHjx4za0B+Z4uJi5s2bN4zmMA0mOTmZTS8tLWWOHj3CpmtraTLZ2dlCdRhvYc5cvfpng/UrKipi+Hw+e3wiJISZbmsjVLew0FD2ODc3l1Eb+iPz8uXLevd6/fo1M0xDnUlMTGDPCQQCZuLECczp06cYhmGY4ODjzHgLc6HrrKdOYYKDjwudc57rxCxatJBhGKZZ7XL7eRmz2tenwTbWSEhIYNSG/shUVFQInR850oS5efMme9xQHRmGYTw9PZiNG35jj2fPmskcOXK40fIEAgETGXmWsbebzairDWUszM2ZM2fC2PS01FRGbeiPTHx8vNA148aOYf74I5phmPePB4apfn+ioiLZdP+tWxnnuU7scX5+PqM29EemqKio8Y6pxd7ejhmmoc5oa2kKvWqu37J5M+O6dInQNbt372KG6+owDPNuDCQlJbHpJSUlzHBdHebQ778zDMMw+4KCmDk//cQIBAK2jbXHYG1Xr/7JmBgbMeXl5ey5Z8+eMepqQ5knGRkMwzTvvd+xfTujoa5Wr13aWpqMutpQJiI8nM3777//Cl3r7u7GbNmymWGY+mOjrKyMURv6IxMXd5c9t9rXh/HbtIk9FggEzDANdebWrX/eW0dCCPlctHiPzrZtAdizZzcYhkFlZSWG6+nB0/OXBvNyOBzEx8fhzp07yMrMQkpKMoDq5YAnTzLQoUMHqKiosPnbtWsHW9vpAID4+Djw+XxMt7URumdJSQny8/MbLI/L4eD8+XN49PAhsp8+RcKjR+yekho9e/Zkf5aVlWXvWXeDanr6Y/B4PKio9Bdqz+DBg4WWu7p168b+zDAM0tPT8cOgH4Tu9f33g5D2uHqJ5vHjtGa1S6HWfRtSUlwMKSkpdlnpfbo1cC8zMzOsW7sWP7u54/nz53j06BH8Nm9p9B4cDgfjxplj3DhzFBQUICoqEhs3bEBpaRmmTZvG5lPu10/omgEDBiI1JRWjRpm+dzx06NChuq4K7+rK4/HY8wAgLS0NoHrmSEZGpsl2A4CNjS0mTpokdK7mnqmpKRg2TFMobdD3g9ifM9LTISHBg7KyMnuuffv26NOnD3s8ZuxYnDp1ElaTJ0FPTx/6+vrQGDaswbqkpKSg/4ABQnvZFBQU0KNHDySnJEOpd+/qc0289wAwePAQrFxVf3bLZf48oWM+vxxHjhxGakoKsrOzkZCQgIkT3/VH7bFRM5bat3/X51JS0kIzjRwOB7KysiguLmmyjoQQ8jlocaBjNWUKbGxsweFw0LVrV3Tq1KnRvCu9fmH/Y9UcpgnZLrKYPWsWgOqgoPYekQYrx+PheHBIvfM1AUptJcXFmDFzBropKMBk5CiMGmWKjIwMnDx5ooUtBFu/D1VZa08DAFQJhI9b0q7GdOjYEXw+H2VlZWjXrl2L66ijo4tyPh/3793Do4RH0NDQgJycXLOulZeXh52dPWQ6yiA4+LhQoFNRWSmUl1/BB4fDAfD+8SAuX331FXr/N4Coq0ogAIfLETonwZMQSudyOWz92Ty1Nn/36NEDYWfC8fffN3D71m14enpg2LBhWPfr+voFMgAHnPrnP0D79u0bbFftwDcpKRFznZxgbGwCTS0tTJ1qjRMn6o+7liouLkbHjh2azkgIIZ+BFu/R6dG9B3r37g0lJaX3BjkCgQDR0dHwXb0Gs2bPxnA9PfD57zbl9u3bD6WlpUhMTGTPlZaWIiQkGCUlJfiuz3dgGAYVFRX45ptv2FdWZiYkJSXrlZeYmIjnz55h+46dsLKygsawYXj16lVLm/euft/1RWVlJR49esSeq6ysxL34ePQfMKDBazgcDvr27Yu7dTbMJtS6R0vb1ZiaoOTFixfCdQCAZgRpPB4PI01G4uKli7h08SLGjB3baN6LF//AeAsLVNYJYkpLS+sFWXX7KykxEf2U+zU5HlpDnz59kJiQIHQuOSmZ/bm3khL4fD7S09PZc3WPX7x4gVevXsHIyBjuy5dj+46duHDhAl6/fl2vPJX+KkhKShTa45WTk4O8vDz0rzVzKCpXr17FD6qq8Pbxwbhx5hj0ww/If/bso+5ZXFyM8vJyyMsrNJ2ZEEI+A2J7MjKXy0XPnj1x/tw55OQ8xf3797HZz49N79y5MyZOnAjvVSsRHx+HJ0+eYO2a1Th96hTat2+PzrKymDBhIjw8ViA+Pg7Z2dnYFhAAD48VKCstrVfetz2/BZ/Px7moKOTl5eHSpUsf9ddrZ1lZTJw0Cd7eq3Dv3j1kZWVh3dq14PP5MBtt1uh1trbTERQUiD+vXEFOTg6CggKRlZUldN+WtKsx8vLykJeXZ5d/asjJy+Pylct48uRJk/cwMzPDuagoJCUlwdjYpNF8Ojq6KC8vw5LFi/HPzZt4+PABDuzfj507d8BqylShvEFBgYiPj0NmZiZW+/qgffv2MDAwbHI8fKiqOrNndb158wa5ublCr+L/BhqTJ1vh2rVrCD5+HLm5ubh27SrCw8+w13b9+muYmIzEal9fJCQkIDMzE+vWroFErVmTQ4d+xzLXpUhNTUVubi7Cz4RBTk6uwaU1Xd3hkJOTw8pVK5GRkYGkpER4rFgOQ0MjdtlKlJR6KSElJQWxsbHIzc1FUFAgHty//1H3TEpKgoyMDLtpvaioCI4Oc3D9+jVRVJkQQkROrF8BsdU/AI8SHsFqshV+W/8r7O3thdLd3JdjuJ4e3NzcYGszDUVv32L37j3sUoH78uXQ1dXFiuXLYWszDQ8e3Mfu3XvQuYElnm7dumOT32YEBu7FFKvJiIgIx8yZH7cs4ubmDkMDQ/z88zLY2kzDixeF2BsYiA4dOzZ6jcX48Vi4cBE2btwAq8mTkZebi5l1lmda0q730dcfgZs3bwqd+8XzF9y5fRtOjg5NXj9UTQ3S0tLQ09N7754XGRkZ7Nt/AB07dsCKFcvh6OCA6OgL8PT8BRMmTBDKu3jxEnivWgWbadYoLCzEzl272D0pTY2Hlrp16xaG6+rUm2mq7fffD8LCfJzQK/R09ZOklZWVsWmTH0LDQjFp4gTs37cPLgsWCl2/ytsbffv2xTznuZg9ayZU+vcX2sczf74LBgwciLlOjpg8aRJSU1OxbfuOBp9txOPxsGPnLvAkJDBr1kzMnzcPAwcOxNp16z6qHxoz2swM1lOt4fbzMsyYbosXhS8wytT0o+55NzYWenp67L/R8vJyPHnyBP/+W//xEoQQ8jngMB+zGYW0qqSkRLgudUVkVBS43JbHrAzDYILleCxZuhRGRsYfVZfHaWmYOnUKYu/GNZ1ZRMLDz+DUyZM4fOToB9+jqqpKKCi58ddf8PX1wR8Xq7/eQiAQ1OvbWTNnwHLCBEyebPXB5X6pplhNxooVHvTAQELIF4O+1PMLNmDAQAwZMgRRkZEtvjYzMxMHDxxAZWUl9PT0xVA78cvIyICm5od/1UVSUiLGW5jj8uUYFBQU4OHDB9ixcwf09d/1x4rl7vDx8cbjx4/x7NkzHD50CKmpqdDW1hZFE74oly/HoFu37hTkEEK+KDSj8z9q7JgxkJaWgo+PL4b8+ONH3681ZnRcXObDydHpo+p/JiwMx48fR3Z2FjrKyMDExARLlixlN1nn5eUhwN8fsbF3UFRUBGUVFbjMd4HW/2CgQwghXyIKdAghhBDSZjX7OTpz5szBwYMHm3z2DSGEEEKIOHG5XNjZ2WHfvn1N5m32jI6EhAQFOYQQQgj5LHC53CYfMQK0INCp+TgprXQRQgghpDW1JCZp8VdAAEBFRQX45WUU9HwkDocDKel29Z6ITP0rWtTP4tNY3xJCyOfigz5eTr8cRINhGPDLy+qdp/4VLepn8Wmsbwkh5HPxQYEO/XIQnYb6kvpX9KifxYf6kRDyOaMHBhJCCCGkzaJAhxBCCCFtFgU6hBBCCGmzKNAhhBBCSJv1QR8vb65Tp04hPDwceXl5kJOTw9ixYzFjxowP+qZt8k5sbCxcXV3ZY0lJSXz33XdwcXHBkCFDWrFmbcvr168xfvz4RtOtrKywcOHCT1gjQgghLSW2QOfYsWM4ceIE5s+fDxUVFWRnZ2P79u148+YNFixYIK5ixY5hGNy/d++9XyR5Lz4eg4cMYR9oJA6SkpI4cuQIAKCsrAzR0dHw8PDAsWPH0KVLF7GV+ymVlJQgOzsb/fv3bzCdz+cjNTUVgwYNEkv5nTp1QkhICHvs4uKCadOmsd9u3qFDB7GUW5uvry8UFRXh4OAg0vs+evQIKioqjT7/Jjk5GT179vwkbSSEEHES29RKVFQUXFxcYGpqit69e0NfXx/u7u54/PixuIr8JDgcDjIzM3E2IqLB9IiIcGRmZYo1yKnRvXt3dO/eHb1798bcuXMhKyuL27dvi73cT4XH4yHm0kU8fPCgXhqfz8e+oEAIBE0//vtDcblcto+7d+8OCQkJyMrKssedO3cWW9niJhBUIShwLyoqKuqlPXhwH5djLoHHE+uELyGEfBJi+5+Mx+OhsLBQ6Jy6ujrU1dXZYwsLC7i5uSEkJATJycno1asXnJ2doampyeaJjIzEyZMnkZubC0VFRdjb28PAwAAAsGrVKvTq1QspKSmIi4tDr169sGrVKpw/fx6RkZHg8XiYNXMWJk2eJNK2jbe0RER4OM5GRMCi1tJGRER4dfp4S5GW11wSEhJCf6G/fPkSW7duxe3btyEtLQ0jIyM4ODiwf6XHx8dj//79SE5OhoyMDCwsLGBnZwcAyMjIgLOzMzw9PbFjxw68fPkSGhoa8PDwYH/B5+XlYcOGDXj48CFkZWUxZcoUTJs2TWTtkZKSgoOjE4IC9wIAflBVBfAuyNHT14eq6mCRlfchKisrsW/fPly4cAGlpaUYPHgwlixZgm+++YbN874xXFZWhoCAAPz5558AgBEjRmDp0qWQlpbGnDlzkJaWBgA4fPgwjh07BkVFRZHUu6bfggL3wsHRiR03Dx7cx1/Xr2OOgyOkpKREUhYhhLQmsc3o2NjYYN++fdi8eTPi4uIa/MsRAPbs2QNnZ2dERUVhxowZWLlyJTIyMgAAV69exa5du+Dg4IDg4GBMnToVa9aswYsXL9jro6KiMHXqVISGhqJHjx6YN28e2rdvj5MnT2LZsmXYsXMHcnNzRd6+8ZaWYBiGndlpzSCnvLwcR48eRVlZGdTU1AAAVVVVcHNzAwDs3r0bGzduRGJiIjZs2AAAKCwshJubG7S0tHD06FH4+Pjg9OnTuHbtGntfPp+PP//8E9u3b8fhw4fx/PlzBAUFsenLli2DsrIyTpw4AR8fH5w4cQJ3794Vadtqgp1r167i4YMHn1WQAwABAQH4559/sHr1agQFBaF79+5YsmQJSkpKADQ9hrdt24bc3FwEBgZi7969yM3NxdGjRwFUv296enqwtrbGxYsXhYInUVBVHQw9fX12ZoeCHEJIWyS2GR0zMzMoKioiJCQE7u7ukJaWhqWlJWbOnIl27dqx+caMGQPV//6lbmxsjJs3byIsLAyurq4wMDDAkCFD2D0nY8eOxZ49e5CcnAxdXV0AgI6ODjQ0NABUzxDdvHkTM2fOBJfLhb6+PhQUFJCeni7yXxLAu5mdzZv9oNxPGeMtP12QU1FRgdGjR7M/S0pKwsvLi51tuXXrFkpKSuDl5cX+te7r6wtra2u8ffsWcnJyOHnyJNu3cnJyUFNTw8OHDzFixAgAgEAggIODAxQUFAAAU6ZMQXBwMIDqvUrPnz+HtrY2unbtiq5du+LYsWNC762o1AQ7+4ICEf1HNExNTT+LIKeoqAiRkZHYvXs3VFRUAABLly7FrFmzEBMTAwsLiybHcH5+PlRVVdmZmk2bNrFBhqSkJKSkpNiXONT0Y0CAP9q3awcHRycKcgghbYpYF+FVVVWhqqqKsrIyXL9+HUFBQcjKysKaNWvYPN99953QNf3798eVK1fY42fPniE0NBSZmZnIysrCq1evwOfz2XR5eXn2Zx6PBykpKaFPdUlLS6O8vFwczav23604n2JPTm2SkpLYv38/gOrZm7t378LX1xerV6+Grq4uUlNTkZOTA8s6wZdAIEBBQQFkZGTA5/Nx4sQJpKWlIScnB8nJyTA3NxfKX3uppHPnzuxMBYfDga2tLTw8PKCpqQl1dXUYGhqKJdCpi4NP29eNefLkCXg8Hvr168ee43A4GDRoEFJTU9lz7xvDVlZW8Pb2xr1799g+VFJS+uRtqan7px7HhBAibp/kc97t2rXDqFGjsHHjRly7dg0vX75k0+ouadUOYs6ePQtXV1dUVVXB2NgY3t7eYpmZ+VA1y1XLlv0stIz1qSgqKkJRURG9evXChAkTMG3aNISFhbHpgwcPxv79+4VeISEh+Pbbb5GSkgI7Ozukp6dDQ0MDCxYsgLGxcYvK/+mnnxAYGAhVVVXcuHED06dPR1JSkqibKbRctXDhInYZq7U15zuemhrDOjo6CAkJwejRo5GdnQ0nJyeEh4eLs9pCaparFi5cJLSMRQghbYVYAp3CwkKMGzeO3UhZo6ysDFwuV2hqvO4vxoSEBHaW59KlS7CxsYGjoyMMDAygqKgotD+nNdXdk1N3z05r6NKlCzvj0rdvXzx79gzy8vLsp4Q6dOiAgoICSEpK4saNG/j++++xYsUKmJqaYuDAgXj+/Hmzy6qqqkJqaiqUlJRgbW0NPz8/qKmpITo6WqRtqrsnp+6endbUu3dvVFZWCo3hyspKPHjwAMrKygCaHsOZmZlo164dxo0bBy8vLzg6OgoFqxwOR2xfmll3T07dPTuEENIWiCXQkZOTww8//ABvb29cuXIFycnJuHDhAjw9PTFy5Eh07NiRzRsTE4OYmBjk5eXhxIkT+M9//oOJEycCAL799lv8888/yMjIQGZmJtauXQuBQCCOKrdIYxuPP3Wwk5+fj/z8fDx9+hTXrl3DsWPHoKOjAwDQ0tJCx44d8euvvyIjIwPp6elYu3Ytu5m4Z8+eSEtLQ3x8PPLz83Ho0CEkJCQ0u+y3b99i/vz5CA0NRWFhIeLj45GQkIBevXqJrH2NbTz+XIKdzp07w9zcHOvXr8fDhw/x9OlT+Pn5oaKiAiYmJgCaHsPr1q2Dv78/8vLykJ6ejuvXrwstXX399de4e/cukpOTUVUluo/SN7bxmIIdQkhbI7Y9Oj4+Pti3bx+2b9+OV69e4euvv4aZmRlmz54tlG/u3LmIiIjA+vXr0bNnT6xfvx59+vQBUP2ANj8/Pzg7O0NWVhazZs1CSkqKuKrcLAzDoFcvJfzYyAMDx1taIj4+HgzDiHW/Q0VFBaytrQFUP+9FXl4e5ubmsLW1BVC9X2nLli0ICAiAi4sLJCUloa6uDk9PTwCAiYkJcnJysHLlSvbYyMio2eXLyspi3bp12LNnD3bu3AlZWVmYm5vX2xP0MSorK2FsMrLBBwbWBDuprTweFi1ahKCgIHh5eaG0tBRDhgzB1q1b2Y/wNzWGfXx8sGXLFtjb24PL5UJXVxeLFi1i021tbbFmzRosWLAAe/fuZf9tfCwuh9vop6uqZ86k2U3uhBDyJeMwzZwXr/mlzTAM3ha9EUnhFhYWWLNmTaNBw/8KmU7CD54TVf8SYdTP4lO3bwkhRJxqxyRNoS+dIoQQQkibRYEOIYQQQtqsVv0ym7Nnz7Zm8YQQQghp42hGhxBCCCFtFgU6hBBCCGmzPijQocfEi05DfUn9K3rUz+JD/UgI+Zx9UKAjJd2O/nMTAQ6HAynp+t8NRf0rWtTP4tNY3xJCyOfig56jQwghhBDSWloSkzT7U1dcLhcCgYD+AiaEEEJIq+Nym7co1eylKzs7u2bflBBCCCFEXLhcLuzs7JqVt9lLV4QQQgghXxqaoiGEEEJIm0WBDiGEEELaLAp0CCGEENJmUaBDCCGEkDaLAh1CCCGEtFkU6BBCCCGkzaJAhxBCCCFt1v8DociJIB2oWWQAAAAASUVORK5CYII="}}]);
\ No newline at end of file
diff --git a/docs/4ab7b8a0.a56f1356.js b/docs/4ab7b8a0.a56f1356.js
deleted file mode 100644
index 0a505361f3..0000000000
--- a/docs/4ab7b8a0.a56f1356.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[76],{129:function(e,r,n){"use strict";n.r(r),n.d(r,"frontMatter",(function(){return i})),n.d(r,"metadata",(function(){return c})),n.d(r,"rightToc",(function(){return s})),n.d(r,"default",(function(){return l}));var t=n(2),o=n(6),a=(n(0),n(290)),i={title:"Form / Picker"},c={unversionedId:"examples/picker",id:"examples/picker",isDocsHomePage:!1,title:"Form / Picker",description:"Use pickers to allow users to select one or more choices, such as tags or files,\u202ffrom a list.",source:"@site/docs/examples/picker.md",slug:"/examples/picker",permalink:"/wave/docs/examples/picker",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/picker.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Checklist",permalink:"/wave/docs/examples/checklist"},next:{title:"Form / Picker / Selection",permalink:"/wave/docs/examples/picker-selection"}},s=[],u={rightToc:s};function l(e){var r=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(t.a)({},u,i,{components:r,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use pickers to allow users to select one or more choices, such as tags or files,\u202ffrom a list."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(351).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'selected={q.args.picker}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.picker(name='picker', label='Place an order (try Spam, Eggs or Ham):', choices=[\n                ui.choice(name='spam', label='Spam'),\n                ui.choice(name='eggs', label='Eggs'),\n                ui.choice(name='ham', label='Ham'),\n                ui.choice(name='cheese', label='Cheese'),\n                ui.choice(name='beans', label='Beans'),\n                ui.choice(name='toast', label='Toast'),\n            ]),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}l.isMDXComponent=!0},290:function(e,r,n){"use strict";n.d(r,"a",(function(){return p})),n.d(r,"b",(function(){return m}));var t=n(0),o=n.n(t);function a(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function i(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 c(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?i(Object(n),!0).forEach((function(r){a(e,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))}))}return e}function s(e,r){if(null==e)return{};var n,t,o=function(e,r){if(null==e)return{};var n,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)n=a[t],r.indexOf(n)>=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)n=a[t],r.indexOf(n)>=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<a;u++)i[u]=n[u];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}A.displayName="MDXCreateElement"},351:function(e,r,n){"use strict";n.r(r),r.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/4b953dd8.f8f0cb02.js b/docs/4b953dd8.6b813e7d.js
similarity index 92%
rename from docs/4b953dd8.f8f0cb02.js
rename to docs/4b953dd8.6b813e7d.js
index 4f62cb44a9..7c3ec15aa8 100644
--- a/docs/4b953dd8.f8f0cb02.js
+++ b/docs/4b953dd8.6b813e7d.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[77],{130:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return p})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return l}));var r=n(2),a=n(6),o=(n(0),n(290)),p={title:"Plot / Point / Shapes"},i={unversionedId:"examples/plot-point-shapes",id:"examples/plot-point-shapes",isDocsHomePage:!1,title:"Plot / Point / Shapes",description:"Make a scatterplot with categories encoded as mark shapes.",source:"@site/docs/examples/plot-point-shapes.md",slug:"/examples/plot-point-shapes",permalink:"/wave/docs/examples/plot-point-shapes",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point-shapes.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Point",permalink:"/wave/docs/examples/plot-point"},next:{title:"Plot / Point / Sizes",permalink:"/wave/docs/examples/plot-point-sizes"}},c=[],s={rightToc:c};function l(e){var t=e.components,p=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},s,p,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a scatterplot with categories encoded as mark shapes."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(352).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeScatter\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\n\ndef create_fake_row(g, f, n):\n    return [(g, x, y) for x, y in [f.next() for _ in range(n)]]\n\n\nn = 30\nf1, f2 = FakeScatter(), FakeScatter()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Point, shapes',\n    data=data('product price performance', n * 2),\n    plot=ui.plot([ui.mark(type='point', x='=price', y='=performance', shape='=product', shape_range='circle square')])\n))\nv.data = create_fake_row('G1', f1, n) + create_fake_row('G2', f1, n)\n\npage.save()\n")))}l.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),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 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 i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;s++)p[s]=n[s];return a.a.createElement.apply(null,p)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},352:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-point-shapes-98b5ada97343dfb174c19df0f0ea7ea8.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[81],{134:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return p})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return l}));var r=n(2),a=n(6),o=(n(0),n(292)),p={title:"Plot / Point / Shapes"},i={unversionedId:"examples/plot-point-shapes",id:"examples/plot-point-shapes",isDocsHomePage:!1,title:"Plot / Point / Shapes",description:"Make a scatterplot with categories encoded as mark shapes.",source:"@site/docs/examples/plot-point-shapes.md",slug:"/examples/plot-point-shapes",permalink:"/wave/docs/examples/plot-point-shapes",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point-shapes.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Point",permalink:"/wave/docs/examples/plot-point"},next:{title:"Plot / Point / Sizes",permalink:"/wave/docs/examples/plot-point-sizes"}},c=[],s={rightToc:c};function l(e){var t=e.components,p=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},s,p,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a scatterplot with categories encoded as mark shapes."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(357).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeScatter\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\n\ndef create_fake_row(g, f, n):\n    return [(g, x, y) for x, y in [f.next() for _ in range(n)]]\n\n\nn = 30\nf1, f2 = FakeScatter(), FakeScatter()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Point, shapes',\n    data=data('product price performance', n * 2),\n    plot=ui.plot([ui.mark(type='point', x='=price', y='=performance', shape='=product', shape_range='circle square')])\n))\nv.data = create_fake_row('G1', f1, n) + create_fake_row('G2', f1, n)\n\npage.save()\n")))}l.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),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 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 i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;s++)p[s]=n[s];return a.a.createElement.apply(null,p)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},357:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-point-shapes-98b5ada97343dfb174c19df0f0ea7ea8.png"}}]);
\ No newline at end of file
diff --git a/docs/4d54d076.f075db77.js b/docs/4d54d076.6d426b8b.js
similarity index 98%
rename from docs/4d54d076.f075db77.js
rename to docs/4d54d076.6d426b8b.js
index 7058e84e58..4fa1cdcd8d 100644
--- a/docs/4d54d076.f075db77.js
+++ b/docs/4d54d076.6d426b8b.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[78],{131:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return r})),n.d(t,"metadata",(function(){return s})),n.d(t,"rightToc",(function(){return u})),n.d(t,"default",(function(){return l}));var i=n(2),o=n(6),a=(n(0),n(290)),r={title:"Contributing"},s={unversionedId:"contributing",id:"contributing",isDocsHomePage:!1,title:"Contributing",description:"We appreciate all contributions. If you are planning to contribute back bug-fixes, please do so without any further discussion.",source:"@site/docs/contributing.md",slug:"/contributing",permalink:"/wave/docs/contributing",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/contributing.md",version:"current",sidebar:"someSidebar",previous:{title:"Migrating from pre-alpha",permalink:"/wave/docs/migrating-0"},next:{title:"Introduction",permalink:"/wave/docs/getting-started"}},u=[{value:"About open source development",id:"about-open-source-development",children:[]},{value:"Proposing new features",id:"proposing-new-features",children:[]},{value:"Reporting issues",id:"reporting-issues",children:[]},{value:"Implementing features",id:"implementing-features",children:[]},{value:"Improving documentation and tutorials",id:"improving-documentation-and-tutorials",children:[]},{value:"Submitting pull requests",id:"submitting-pull-requests",children:[]},{value:"Improving code readability",id:"improving-code-readability",children:[]},{value:"Adding test cases",id:"adding-test-cases",children:[]},{value:"Security vulnerabilities",id:"security-vulnerabilities",children:[]},{value:"Code of Conduct",id:"code-of-conduct",children:[]}],c={rightToc:u};function l(e){var t=e.components,n=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(i.a)({},c,n,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"We appreciate all contributions. If you are planning to contribute back bug-fixes, please do so without any further discussion."),Object(a.b)("p",null,"If you plan to contribute new features, please first ",Object(a.b)("a",Object(i.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/issues/new/choose"}),"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."),Object(a.b)("p",null,"(Based on the ",Object(a.b)("a",Object(i.a)({parentName:"p"},{href:"https://pytorch.org/docs/stable/community/contribution_guide.html"}),"PyTorch Contribution Guide"),".)"),Object(a.b)("h2",{id:"about-open-source-development"},"About open source development"),Object(a.b)("p",null,"If this is your first time contributing to an open source project, some aspects of the development process may seem unusual to you."),Object(a.b)("ul",null,Object(a.b)("li",{parentName:"ul"},Object(a.b)("p",{parentName:"li"},Object(a.b)("strong",{parentName:"p"},'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\u2019t wasted work when someone else ends up working on it. This doesn\u2019t 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.')),Object(a.b)("li",{parentName:"ul"},Object(a.b)("p",{parentName:"li"},Object(a.b)("strong",{parentName:"p"},"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.'))),Object(a.b)("h2",{id:"proposing-new-features"},"Proposing new features"),Object(a.b)("p",null,"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."),Object(a.b)("h2",{id:"reporting-issues"},"Reporting issues"),Object(a.b)("p",null,"If you\u2019ve 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."),Object(a.b)("h2",{id:"implementing-features"},"Implementing features"),Object(a.b)("p",null,"If you want to fix a specific issue, it\u2019s 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\u2019s 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."),Object(a.b)("p",null,"Issues that are labeled first-new-issue, low, or medium priority provide the best entrance point are great places to start."),Object(a.b)("h2",{id:"improving-documentation-and-tutorials"},"Improving documentation and tutorials"),Object(a.b)("p",null,"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."),Object(a.b)("h2",{id:"submitting-pull-requests"},"Submitting pull requests"),Object(a.b)("p",null,"You can view a list of all open issues ",Object(a.b)("a",Object(i.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/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."),Object(a.b)("p",null,"For more challenging issues, the team will provide feedback and direction for how to best solve the issue."),Object(a.b)("p",null,"If you\u2019re 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."),Object(a.b)("h2",{id:"improving-code-readability"},"Improving code readability"),Object(a.b)("p",null,"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."),Object(a.b)("h2",{id:"adding-test-cases"},"Adding test cases"),Object(a.b)("p",null,"Additional test coverage is appreciated.  Help us make the codebase more robust."),Object(a.b)("h2",{id:"security-vulnerabilities"},"Security vulnerabilities"),Object(a.b)("p",null,"If you discover a security vulnerability within H2O Wave, please send an email to Prithvi Prabhu at ",Object(a.b)("a",Object(i.a)({parentName:"p"},{href:"mailto:prithvi@h2o.ai."}),"prithvi@h2o.ai.")," All security vulnerabilities will be promptly addressed."),Object(a.b)("h2",{id:"code-of-conduct"},"Code of Conduct"),Object(a.b)("p",null,'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.).'),Object(a.b)("ul",null,Object(a.b)("li",{parentName:"ul"},"Participants will be tolerant of opposing views."),Object(a.b)("li",{parentName:"ul"},"Participants must ensure that their language and actions are free of personal attacks and disparaging personal remarks."),Object(a.b)("li",{parentName:"ul"},"When interpreting the words and actions of others, participants should always assume good intentions."),Object(a.b)("li",{parentName:"ul"},"Behaviour which can be reasonably considered harassment will not be tolerated.")),Object(a.b)("p",null,"(Based on the ",Object(a.b)("a",Object(i.a)({parentName:"p"},{href:"https://www.ruby-lang.org/en/conduct/"}),"Ruby Code of Conduct"),".)"))}l.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return h}));var i=n(0),o=n.n(i);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 r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t){if(null==e)return{};var n,i,o=function(e,t){if(null==e)return{};var n,i,o={},a=Object.keys(e);for(i=0;i<a.length;i++)n=a[i],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i<a.length;i++)n=a[i],t.indexOf(n)>=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<a;c++)r[c]=n[c];return o.a.createElement.apply(null,r)}return o.a.createElement.apply(null,n)}b.displayName="MDXCreateElement"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[82],{135:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return r})),n.d(t,"metadata",(function(){return s})),n.d(t,"rightToc",(function(){return u})),n.d(t,"default",(function(){return l}));var i=n(2),o=n(6),a=(n(0),n(292)),r={title:"Contributing"},s={unversionedId:"contributing",id:"contributing",isDocsHomePage:!1,title:"Contributing",description:"We appreciate all contributions. If you are planning to contribute back bug-fixes, please do so without any further discussion.",source:"@site/docs/contributing.md",slug:"/contributing",permalink:"/wave/docs/contributing",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/contributing.md",version:"current",sidebar:"someSidebar",previous:{title:"Migrating from pre-alpha",permalink:"/wave/docs/migrating-0"},next:{title:"Introduction",permalink:"/wave/docs/getting-started"}},u=[{value:"About open source development",id:"about-open-source-development",children:[]},{value:"Proposing new features",id:"proposing-new-features",children:[]},{value:"Reporting issues",id:"reporting-issues",children:[]},{value:"Implementing features",id:"implementing-features",children:[]},{value:"Improving documentation and tutorials",id:"improving-documentation-and-tutorials",children:[]},{value:"Submitting pull requests",id:"submitting-pull-requests",children:[]},{value:"Improving code readability",id:"improving-code-readability",children:[]},{value:"Adding test cases",id:"adding-test-cases",children:[]},{value:"Security vulnerabilities",id:"security-vulnerabilities",children:[]},{value:"Code of Conduct",id:"code-of-conduct",children:[]}],c={rightToc:u};function l(e){var t=e.components,n=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(i.a)({},c,n,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"We appreciate all contributions. If you are planning to contribute back bug-fixes, please do so without any further discussion."),Object(a.b)("p",null,"If you plan to contribute new features, please first ",Object(a.b)("a",Object(i.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/issues/new/choose"}),"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."),Object(a.b)("p",null,"(Based on the ",Object(a.b)("a",Object(i.a)({parentName:"p"},{href:"https://pytorch.org/docs/stable/community/contribution_guide.html"}),"PyTorch Contribution Guide"),".)"),Object(a.b)("h2",{id:"about-open-source-development"},"About open source development"),Object(a.b)("p",null,"If this is your first time contributing to an open source project, some aspects of the development process may seem unusual to you."),Object(a.b)("ul",null,Object(a.b)("li",{parentName:"ul"},Object(a.b)("p",{parentName:"li"},Object(a.b)("strong",{parentName:"p"},'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\u2019t wasted work when someone else ends up working on it. This doesn\u2019t 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.')),Object(a.b)("li",{parentName:"ul"},Object(a.b)("p",{parentName:"li"},Object(a.b)("strong",{parentName:"p"},"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.'))),Object(a.b)("h2",{id:"proposing-new-features"},"Proposing new features"),Object(a.b)("p",null,"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."),Object(a.b)("h2",{id:"reporting-issues"},"Reporting issues"),Object(a.b)("p",null,"If you\u2019ve 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."),Object(a.b)("h2",{id:"implementing-features"},"Implementing features"),Object(a.b)("p",null,"If you want to fix a specific issue, it\u2019s 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\u2019s 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."),Object(a.b)("p",null,"Issues that are labeled first-new-issue, low, or medium priority provide the best entrance point are great places to start."),Object(a.b)("h2",{id:"improving-documentation-and-tutorials"},"Improving documentation and tutorials"),Object(a.b)("p",null,"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."),Object(a.b)("h2",{id:"submitting-pull-requests"},"Submitting pull requests"),Object(a.b)("p",null,"You can view a list of all open issues ",Object(a.b)("a",Object(i.a)({parentName:"p"},{href:"https://github.com/h2oai/wave/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."),Object(a.b)("p",null,"For more challenging issues, the team will provide feedback and direction for how to best solve the issue."),Object(a.b)("p",null,"If you\u2019re 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."),Object(a.b)("h2",{id:"improving-code-readability"},"Improving code readability"),Object(a.b)("p",null,"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."),Object(a.b)("h2",{id:"adding-test-cases"},"Adding test cases"),Object(a.b)("p",null,"Additional test coverage is appreciated.  Help us make the codebase more robust."),Object(a.b)("h2",{id:"security-vulnerabilities"},"Security vulnerabilities"),Object(a.b)("p",null,"If you discover a security vulnerability within H2O Wave, please send an email to Prithvi Prabhu at ",Object(a.b)("a",Object(i.a)({parentName:"p"},{href:"mailto:prithvi@h2o.ai."}),"prithvi@h2o.ai.")," All security vulnerabilities will be promptly addressed."),Object(a.b)("h2",{id:"code-of-conduct"},"Code of Conduct"),Object(a.b)("p",null,'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.).'),Object(a.b)("ul",null,Object(a.b)("li",{parentName:"ul"},"Participants will be tolerant of opposing views."),Object(a.b)("li",{parentName:"ul"},"Participants must ensure that their language and actions are free of personal attacks and disparaging personal remarks."),Object(a.b)("li",{parentName:"ul"},"When interpreting the words and actions of others, participants should always assume good intentions."),Object(a.b)("li",{parentName:"ul"},"Behaviour which can be reasonably considered harassment will not be tolerated.")),Object(a.b)("p",null,"(Based on the ",Object(a.b)("a",Object(i.a)({parentName:"p"},{href:"https://www.ruby-lang.org/en/conduct/"}),"Ruby Code of Conduct"),".)"))}l.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return h}));var i=n(0),o=n.n(i);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 r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t){if(null==e)return{};var n,i,o=function(e,t){if(null==e)return{};var n,i,o={},a=Object.keys(e);for(i=0;i<a.length;i++)n=a[i],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i<a.length;i++)n=a[i],t.indexOf(n)>=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<a;c++)r[c]=n[c];return o.a.createElement.apply(null,r)}return o.a.createElement.apply(null,n)}b.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/4e3b2ad1.6cfdca0e.js b/docs/4e3b2ad1.e683ccc6.js
similarity index 93%
rename from docs/4e3b2ad1.6cfdca0e.js
rename to docs/4e3b2ad1.e683ccc6.js
index 612a499d50..404e98207d 100644
--- a/docs/4e3b2ad1.6cfdca0e.js
+++ b/docs/4e3b2ad1.e683ccc6.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[79],{132: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(290)),i={title:"Plot / Interval / Annotation / Transpose"},l={unversionedId:"examples/plot-interval-annotation-transpose",id:"examples/plot-interval-annotation-transpose",isDocsHomePage:!1,title:"Plot / Interval / Annotation / Transpose",description:"Add annotations to a bar plot.",source:"@site/docs/examples/plot-interval-annotation-transpose.md",slug:"/examples/plot-interval-annotation-transpose",permalink:"/wave/docs/examples/plot-interval-annotation-transpose",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-annotation-transpose.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Annotation",permalink:"/wave/docs/examples/plot-interval-annotation"},next:{title:"Plot / Line",permalink:"/wave/docs/examples/plot-line"}},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,"Add annotations to a bar plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(353).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 20\nf = FakeCategoricalSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Categorical-Numeric',\n    data=data('product price', n),\n    plot=ui.plot([\n        ui.mark(type='interval', y='=product', x='=price', x_min=0, x_max=100),\n        ui.mark(y='C10', x=80, label='point'),\n        ui.mark(y='C13', label='vertical line'),\n        ui.mark(x=40, label='horizontal line'),\n        ui.mark(y='C6', y0='C3', label='vertical region'),\n        ui.mark(x=70, x0=60, label='horizontal region')\n    ])\n))\nv.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},290: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 l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;c++)i[c]=n[c];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},353:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-interval-annotation-transpose-a0e697aba7f9fa2b783814edfb13d0be.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[83],{136: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(292)),i={title:"Plot / Interval / Annotation / Transpose"},l={unversionedId:"examples/plot-interval-annotation-transpose",id:"examples/plot-interval-annotation-transpose",isDocsHomePage:!1,title:"Plot / Interval / Annotation / Transpose",description:"Add annotations to a bar plot.",source:"@site/docs/examples/plot-interval-annotation-transpose.md",slug:"/examples/plot-interval-annotation-transpose",permalink:"/wave/docs/examples/plot-interval-annotation-transpose",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-annotation-transpose.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Annotation",permalink:"/wave/docs/examples/plot-interval-annotation"},next:{title:"Plot / Line",permalink:"/wave/docs/examples/plot-line"}},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,"Add annotations to a bar plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(358).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 20\nf = FakeCategoricalSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Categorical-Numeric',\n    data=data('product price', n),\n    plot=ui.plot([\n        ui.mark(type='interval', y='=product', x='=price', x_min=0, x_max=100),\n        ui.mark(y='C10', x=80, label='point'),\n        ui.mark(y='C13', label='vertical line'),\n        ui.mark(x=40, label='horizontal line'),\n        ui.mark(y='C6', y0='C3', label='vertical region'),\n        ui.mark(x=70, x0=60, label='horizontal region')\n    ])\n))\nv.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},292: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 l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;c++)i[c]=n[c];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},358:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-interval-annotation-transpose-a0e697aba7f9fa2b783814edfb13d0be.png"}}]);
\ No newline at end of file
diff --git a/docs/4f49ed83.489f3602.js b/docs/4f49ed83.1adef9c5.js
similarity index 96%
rename from docs/4f49ed83.489f3602.js
rename to docs/4f49ed83.1adef9c5.js
index 33de0f5ef1..e01f0f5887 100644
--- a/docs/4f49ed83.489f3602.js
+++ b/docs/4f49ed83.1adef9c5.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[80],{133:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return i})),t.d(r,"metadata",(function(){return c})),t.d(r,"rightToc",(function(){return p})),t.d(r,"default",(function(){return l}));var a=t(2),n=t(6),o=(t(0),t(290)),i={title:"Stat / Bar / Wide"},c={unversionedId:"examples/stat-wide-bar",id:"examples/stat-wide-bar",isDocsHomePage:!1,title:"Stat / Bar / Wide",description:"Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.",source:"@site/docs/examples/stat-wide-bar.md",slug:"/examples/stat-wide-bar",permalink:"/wave/docs/examples/stat-wide-bar",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-wide-bar.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Gauge / Tall",permalink:"/wave/docs/examples/stat-tall-gauge"},next:{title:"Stat / Bar / Large",permalink:"/wave/docs/examples/stat-large-bar"}},p=[],u={rightToc:p};function l(e){var r=e.components,i=Object(n.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},u,i,{components:r,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a progress bar."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(354).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.wide_bar_stat_card(\n    box='1 1 2 1',\n    title=fake.cryptocurrency_name(),\n    value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    aux_value='={{intl bar style=\"percent\" minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    plot_color='$red',\n    progress=pc,\n    data=dict(foo=val, bar=pc),\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")))}l.isMDXComponent=!0},290:function(e,r,t){"use strict";t.d(r,"a",(function(){return d})),t.d(r,"b",(function(){return f}));var a=t(0),n=t.n(a);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 a=Object.getOwnPropertySymbols(e);r&&(a=a.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,a)}return t}function c(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?i(Object(t),!0).forEach((function(r){o(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function p(e,r){if(null==e)return{};var t,a,n=function(e,r){if(null==e)return{};var t,a,n={},o=Object.keys(e);for(a=0;a<o.length;a++)t=o[a],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)t=o[a],r.indexOf(t)>=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<o;u++)i[u]=t[u];return n.a.createElement.apply(null,i)}return n.a.createElement.apply(null,t)}s.displayName="MDXCreateElement"},354:function(e,r,t){"use strict";t.r(r),r.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[84],{137:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return i})),t.d(r,"metadata",(function(){return c})),t.d(r,"rightToc",(function(){return p})),t.d(r,"default",(function(){return l}));var a=t(2),n=t(6),o=(t(0),t(292)),i={title:"Stat / Bar / Wide"},c={unversionedId:"examples/stat-wide-bar",id:"examples/stat-wide-bar",isDocsHomePage:!1,title:"Stat / Bar / Wide",description:"Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.",source:"@site/docs/examples/stat-wide-bar.md",slug:"/examples/stat-wide-bar",permalink:"/wave/docs/examples/stat-wide-bar",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-wide-bar.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Gauge / Tall",permalink:"/wave/docs/examples/stat-tall-gauge"},next:{title:"Stat / Bar / Large",permalink:"/wave/docs/examples/stat-large-bar"}},p=[],u={rightToc:p};function l(e){var r=e.components,i=Object(n.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},u,i,{components:r,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a progress bar."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(359).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.wide_bar_stat_card(\n    box='1 1 2 1',\n    title=fake.cryptocurrency_name(),\n    value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    aux_value='={{intl bar style=\"percent\" minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    plot_color='$red',\n    progress=pc,\n    data=dict(foo=val, bar=pc),\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")))}l.isMDXComponent=!0},292:function(e,r,t){"use strict";t.d(r,"a",(function(){return d})),t.d(r,"b",(function(){return f}));var a=t(0),n=t.n(a);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 a=Object.getOwnPropertySymbols(e);r&&(a=a.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,a)}return t}function c(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?i(Object(t),!0).forEach((function(r){o(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function p(e,r){if(null==e)return{};var t,a,n=function(e,r){if(null==e)return{};var t,a,n={},o=Object.keys(e);for(a=0;a<o.length;a++)t=o[a],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)t=o[a],r.indexOf(t)>=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<o;u++)i[u]=t[u];return n.a.createElement.apply(null,i)}return n.a.createElement.apply(null,t)}s.displayName="MDXCreateElement"},359:function(e,r,t){"use strict";t.r(r),r.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/4f6dabb0.f1e40f46.js b/docs/4f6dabb0.3f205608.js
similarity index 98%
rename from docs/4f6dabb0.f1e40f46.js
rename to docs/4f6dabb0.3f205608.js
index 6de68c9d51..735d8dcfc8 100644
--- a/docs/4f6dabb0.f1e40f46.js
+++ b/docs/4f6dabb0.3f205608.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[81],{134:function(e,a,t){"use strict";t.r(a),t.d(a,"frontMatter",(function(){return i})),t.d(a,"metadata",(function(){return b})),t.d(a,"rightToc",(function(){return d})),t.d(a,"default",(function(){return o}));var r=t(2),n=t(6),c=(t(0),t(290)),i={title:"Cards"},b={unversionedId:"cards",id:"cards",isDocsHomePage:!1,title:"Cards",description:"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.",source:"@site/docs/cards.md",slug:"/cards",permalink:"/wave/docs/cards",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/cards.md",version:"current",sidebar:"someSidebar",previous:{title:"Layout",permalink:"/wave/docs/layout"},next:{title:"Data Buffers",permalink:"/wave/docs/buffers"}},d=[{value:"Inputs",id:"inputs",children:[{value:"Forms",id:"forms",children:[]}]},{value:"Content",id:"content",children:[{value:"Markdown",id:"markdown",children:[]},{value:"Template",id:"template",children:[]},{value:"Markup (HTML)",id:"markup-html",children:[]},{value:"Inline Frame",id:"inline-frame",children:[]},{value:"Image",id:"image",children:[]}]},{value:"Control",id:"control",children:[{value:"Header",id:"header",children:[]},{value:"Breadcrumbs",id:"breadcrumbs",children:[]},{value:"Navigation Pane",id:"navigation-pane",children:[]},{value:"Tabs",id:"tabs",children:[]},{value:"Toolbar",id:"toolbar",children:[]}]},{value:"Graphics",id:"graphics",children:[{value:"Plot",id:"plot",children:[]},{value:"Vega-lite",id:"vega-lite",children:[]},{value:"Graphics",id:"graphics-1",children:[]}]},{value:"Stats",id:"stats",children:[]},{value:"Meta",id:"meta",children:[]}],l={rightToc:d};function o(e){var a=e.components,t=Object(n.a)(e,["components"]);return Object(c.b)("wrapper",Object(r.a)({},l,t,{components:a,mdxType:"MDXLayout"}),Object(c.b)("p",null,"A ",Object(c.b)("em",{parentName:"p"},"card")," represents a block of content on a ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/pages"}),"Page"),". This section lists the different kinds of cards available to you. Each of the cards below serve a different purpose."),Object(c.b)("div",{className:"admonition admonition-info alert alert--info"},Object(c.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-heading"}),Object(c.b)("h5",{parentName:"div"},Object(c.b)("span",Object(r.a)({parentName:"h5"},{className:"admonition-icon"}),Object(c.b)("svg",Object(r.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(c.b)("path",Object(r.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(c.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-content"}),Object(c.b)("p",{parentName:"div"},"To learn how to add, update or remove cards from a page, see ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/pages"}),"Pages"),"."))),Object(c.b)("h2",{id:"inputs"},"Inputs"),Object(c.b)("h3",{id:"forms"},"Forms"),Object(c.b)("p",null,"The form card is the most versatile and commonly used card in Wave apps. "),Object(c.b)("p",null,"Use a form card to display input ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/components"}),"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."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#form_card"}),"ui.form_card()"),"."),Object(c.b)("h2",{id:"content"},"Content"),Object(c.b)("p",null,"Use content cards to display formatted text, images or HTML."),Object(c.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(c.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-heading"}),Object(c.b)("h5",{parentName:"div"},Object(c.b)("span",Object(r.a)({parentName:"h5"},{className:"admonition-icon"}),Object(c.b)("svg",Object(r.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(c.b)("path",Object(r.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(c.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-content"}),Object(c.b)("p",{parentName:"div"},"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."))),Object(c.b)("h3",{id:"markdown"},"Markdown"),Object(c.b)("p",null,"Use a markdown card to display content authored in ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"https://guides.github.com/features/mastering-markdown/"}),"markdown"),"."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#markdown_card"}),"ui.markdown_card()"),"."),Object(c.b)("h3",{id:"template"},"Template"),Object(c.b)("p",null,"Use a template card to display content authored using ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"https://handlebarsjs.com/guide/"}),"Handlebars")," templates."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#template_card"}),"ui.template_card()"),"."),Object(c.b)("h3",{id:"markup-html"},"Markup (HTML)"),Object(c.b)("p",null,"Use a markup card to display raw HTML content."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#markup_card"}),"ui.markup_card()"),"."),Object(c.b)("h3",{id:"inline-frame"},"Inline Frame"),Object(c.b)("p",null,"Use a frame card to display embed external HTML content your page."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#frame_card"}),"ui.frame_card()"),"."),Object(c.b)("h3",{id:"image"},"Image"),Object(c.b)("p",null,"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. "),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#image_card"}),"ui.image_card()"),"."),Object(c.b)("h2",{id:"control"},"Control"),Object(c.b)("p",null,"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.  "),Object(c.b)("h3",{id:"header"},"Header"),Object(c.b)("p",null,"Use a header card to display your app's title and icon."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#header_card"}),"ui.header_card()"),"."),Object(c.b)("h3",{id:"breadcrumbs"},"Breadcrumbs"),Object(c.b)("p",null,"Use a breadcrumbs card to display ",Object(c.b)("em",{parentName:"p"},"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."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#breadcrumbs_card"}),"ui.breadcrumbs_card()"),"."),Object(c.b)("h3",{id:"navigation-pane"},"Navigation Pane"),Object(c.b)("p",null,"Use a navigation pane to provide links to the main content areas of your app."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#nav_card"}),"ui.nav_card()"),"."),Object(c.b)("h3",{id:"tabs"},"Tabs"),Object(c.b)("p",null,"Use tabs to allow navigation between two or more views of content."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#tab_card"}),"ui.tab_card()"),"."),Object(c.b)("h3",{id:"toolbar"},"Toolbar"),Object(c.b)("p",null,"Use a toolbar to display top-level commands that operate on the content of your app. "),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#toolbar_card"}),"ui.toolbar_card()"),"."),Object(c.b)("h2",{id:"graphics"},"Graphics"),Object(c.b)("p",null,"Use these cards to display plots (or charts or graphs), or draw custom graphics."),Object(c.b)("h3",{id:"plot"},"Plot"),Object(c.b)("p",null,"Use a plot card to display visualizations defined using Wave's native ",Object(c.b)("inlineCode",{parentName:"p"},"plot()")," API, based on the ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"https://www.springer.com/gp/book/9780387245447"}),"Grammar of Graphics"),"."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#plot_card"}),"ui.plot_card()"),"."),Object(c.b)("h3",{id:"vega-lite"},"Vega-lite"),Object(c.b)("p",null,"Use this card to display visualizations defined using ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"https://vega.github.io/vega-lite/"}),"Vega-Lite"),"."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#vega_card"}),"ui.vega_card()"),"."),Object(c.b)("h3",{id:"graphics-1"},"Graphics"),Object(c.b)("p",null,"Use a graphics card to render vector graphics and turtle graphics backed by ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/buffers"}),"data buffers"),"."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#graphics_card"}),"ui.graphics_card()"),"."),Object(c.b)("h2",{id:"stats"},"Stats"),Object(c.b)("p",null,"Use stats cards for a quick and easy way to display live values and graphics (or ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Sparkline"}),"sparklines"),"). These cards are backed by ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/buffers"}),"data buffers"),", and provide an efficient mechanism to display values that change rapidly over time."),Object(c.b)("table",null,Object(c.b)("thead",{parentName:"table"},Object(c.b)("tr",{parentName:"thead"},Object(c.b)("th",Object(r.a)({parentName:"tr"},{align:null}),"Card"),Object(c.b)("th",Object(r.a)({parentName:"tr"},{align:null}),"Use"))),Object(c.b)("tbody",{parentName:"table"},Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(r.a)({parentName:"td"},{href:"/wave/docs/api/ui/#small_series_stat_card"}),"ui.small_series_stat_card()")),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Small stat card; displays a primary value and a series plot.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(r.a)({parentName:"td"},{href:"/wave/docs/api/ui/#small_stat_card"}),"ui.small_stat_card()")),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Stat card; displays a single value.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(r.a)({parentName:"td"},{href:"/wave/docs/api/ui/#large_bar_stat_card"}),"ui.large_bar_stat_card()")),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Large captioned card; displays a primary value, an auxiliary value and a progress bar, with captions for each value.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(r.a)({parentName:"td"},{href:"/wave/docs/api/ui/#large_stat_card"}),"ui.large_stat_card()")),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Stat card; displays a primary value, an auxiliary value and a caption.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(r.a)({parentName:"td"},{href:"/wave/docs/api/ui/#tall_gauge_stat_card"}),"ui.tall_gauge_stat_card()")),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Tall stat card; displays a primary value, an auxiliary value and a progress gauge.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(r.a)({parentName:"td"},{href:"/wave/docs/api/ui/#tall_series_stat_card"}),"ui.tall_series_stat_card()")),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Tall stat card; displays a primary value, an auxiliary value and a series plot.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(r.a)({parentName:"td"},{href:"/wave/docs/api/ui/#wide_bar_stat_card"}),"ui.wide_bar_stat_card()")),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Wide stat card; displays a primary value, an auxiliary value and a progress bar.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(r.a)({parentName:"td"},{href:"/wave/docs/api/ui/#wide_gauge_stat_card"}),"ui.wide_gauge_stat_card()")),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Wide stat card; displays a primary value, an auxiliary value and a progress gauge.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(r.a)({parentName:"td"},{href:"/wave/docs/api/ui/#wide_series_stat_card"}),"ui.wide_series_stat_card()")),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Wide stat card; displays a primary value, an auxiliary value and a series plot.")))),Object(c.b)("h2",{id:"meta"},"Meta"),Object(c.b)("p",null,"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."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#meta_card"}),"ui.meta_card()"),"."))}o.isMDXComponent=!0},290:function(e,a,t){"use strict";t.d(a,"a",(function(){return s})),t.d(a,"b",(function(){return m}));var r=t(0),n=t.n(r);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 i(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);a&&(r=r.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),t.push.apply(t,r)}return t}function b(e){for(var a=1;a<arguments.length;a++){var t=null!=arguments[a]?arguments[a]:{};a%2?i(Object(t),!0).forEach((function(a){c(e,a,t[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(t,a))}))}return e}function d(e,a){if(null==e)return{};var t,r,n=function(e,a){if(null==e)return{};var t,r,n={},c=Object.keys(e);for(r=0;r<c.length;r++)t=c[r],a.indexOf(t)>=0||(n[t]=e[t]);return n}(e,a);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r<c.length;r++)t=c[r],a.indexOf(t)>=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<c;l++)i[l]=t[l];return n.a.createElement.apply(null,i)}return n.a.createElement.apply(null,t)}u.displayName="MDXCreateElement"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[85],{138:function(e,a,t){"use strict";t.r(a),t.d(a,"frontMatter",(function(){return i})),t.d(a,"metadata",(function(){return b})),t.d(a,"rightToc",(function(){return d})),t.d(a,"default",(function(){return o}));var r=t(2),n=t(6),c=(t(0),t(292)),i={title:"Cards"},b={unversionedId:"cards",id:"cards",isDocsHomePage:!1,title:"Cards",description:"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.",source:"@site/docs/cards.md",slug:"/cards",permalink:"/wave/docs/cards",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/cards.md",version:"current",sidebar:"someSidebar",previous:{title:"Layout",permalink:"/wave/docs/layout"},next:{title:"Data Buffers",permalink:"/wave/docs/buffers"}},d=[{value:"Inputs",id:"inputs",children:[{value:"Forms",id:"forms",children:[]}]},{value:"Content",id:"content",children:[{value:"Markdown",id:"markdown",children:[]},{value:"Template",id:"template",children:[]},{value:"Markup (HTML)",id:"markup-html",children:[]},{value:"Inline Frame",id:"inline-frame",children:[]},{value:"Image",id:"image",children:[]}]},{value:"Control",id:"control",children:[{value:"Header",id:"header",children:[]},{value:"Breadcrumbs",id:"breadcrumbs",children:[]},{value:"Navigation Pane",id:"navigation-pane",children:[]},{value:"Tabs",id:"tabs",children:[]},{value:"Toolbar",id:"toolbar",children:[]}]},{value:"Graphics",id:"graphics",children:[{value:"Plot",id:"plot",children:[]},{value:"Vega-lite",id:"vega-lite",children:[]},{value:"Graphics",id:"graphics-1",children:[]}]},{value:"Stats",id:"stats",children:[]},{value:"Meta",id:"meta",children:[]}],l={rightToc:d};function o(e){var a=e.components,t=Object(n.a)(e,["components"]);return Object(c.b)("wrapper",Object(r.a)({},l,t,{components:a,mdxType:"MDXLayout"}),Object(c.b)("p",null,"A ",Object(c.b)("em",{parentName:"p"},"card")," represents a block of content on a ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/pages"}),"Page"),". This section lists the different kinds of cards available to you. Each of the cards below serve a different purpose."),Object(c.b)("div",{className:"admonition admonition-info alert alert--info"},Object(c.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-heading"}),Object(c.b)("h5",{parentName:"div"},Object(c.b)("span",Object(r.a)({parentName:"h5"},{className:"admonition-icon"}),Object(c.b)("svg",Object(r.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(c.b)("path",Object(r.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(c.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-content"}),Object(c.b)("p",{parentName:"div"},"To learn how to add, update or remove cards from a page, see ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/pages"}),"Pages"),"."))),Object(c.b)("h2",{id:"inputs"},"Inputs"),Object(c.b)("h3",{id:"forms"},"Forms"),Object(c.b)("p",null,"The form card is the most versatile and commonly used card in Wave apps. "),Object(c.b)("p",null,"Use a form card to display input ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/components"}),"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."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#form_card"}),"ui.form_card()"),"."),Object(c.b)("h2",{id:"content"},"Content"),Object(c.b)("p",null,"Use content cards to display formatted text, images or HTML."),Object(c.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(c.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-heading"}),Object(c.b)("h5",{parentName:"div"},Object(c.b)("span",Object(r.a)({parentName:"h5"},{className:"admonition-icon"}),Object(c.b)("svg",Object(r.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(c.b)("path",Object(r.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(c.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-content"}),Object(c.b)("p",{parentName:"div"},"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."))),Object(c.b)("h3",{id:"markdown"},"Markdown"),Object(c.b)("p",null,"Use a markdown card to display content authored in ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"https://guides.github.com/features/mastering-markdown/"}),"markdown"),"."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#markdown_card"}),"ui.markdown_card()"),"."),Object(c.b)("h3",{id:"template"},"Template"),Object(c.b)("p",null,"Use a template card to display content authored using ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"https://handlebarsjs.com/guide/"}),"Handlebars")," templates."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#template_card"}),"ui.template_card()"),"."),Object(c.b)("h3",{id:"markup-html"},"Markup (HTML)"),Object(c.b)("p",null,"Use a markup card to display raw HTML content."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#markup_card"}),"ui.markup_card()"),"."),Object(c.b)("h3",{id:"inline-frame"},"Inline Frame"),Object(c.b)("p",null,"Use a frame card to display embed external HTML content your page."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#frame_card"}),"ui.frame_card()"),"."),Object(c.b)("h3",{id:"image"},"Image"),Object(c.b)("p",null,"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. "),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#image_card"}),"ui.image_card()"),"."),Object(c.b)("h2",{id:"control"},"Control"),Object(c.b)("p",null,"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.  "),Object(c.b)("h3",{id:"header"},"Header"),Object(c.b)("p",null,"Use a header card to display your app's title and icon."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#header_card"}),"ui.header_card()"),"."),Object(c.b)("h3",{id:"breadcrumbs"},"Breadcrumbs"),Object(c.b)("p",null,"Use a breadcrumbs card to display ",Object(c.b)("em",{parentName:"p"},"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."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#breadcrumbs_card"}),"ui.breadcrumbs_card()"),"."),Object(c.b)("h3",{id:"navigation-pane"},"Navigation Pane"),Object(c.b)("p",null,"Use a navigation pane to provide links to the main content areas of your app."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#nav_card"}),"ui.nav_card()"),"."),Object(c.b)("h3",{id:"tabs"},"Tabs"),Object(c.b)("p",null,"Use tabs to allow navigation between two or more views of content."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#tab_card"}),"ui.tab_card()"),"."),Object(c.b)("h3",{id:"toolbar"},"Toolbar"),Object(c.b)("p",null,"Use a toolbar to display top-level commands that operate on the content of your app. "),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#toolbar_card"}),"ui.toolbar_card()"),"."),Object(c.b)("h2",{id:"graphics"},"Graphics"),Object(c.b)("p",null,"Use these cards to display plots (or charts or graphs), or draw custom graphics."),Object(c.b)("h3",{id:"plot"},"Plot"),Object(c.b)("p",null,"Use a plot card to display visualizations defined using Wave's native ",Object(c.b)("inlineCode",{parentName:"p"},"plot()")," API, based on the ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"https://www.springer.com/gp/book/9780387245447"}),"Grammar of Graphics"),"."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#plot_card"}),"ui.plot_card()"),"."),Object(c.b)("h3",{id:"vega-lite"},"Vega-lite"),Object(c.b)("p",null,"Use this card to display visualizations defined using ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"https://vega.github.io/vega-lite/"}),"Vega-Lite"),"."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#vega_card"}),"ui.vega_card()"),"."),Object(c.b)("h3",{id:"graphics-1"},"Graphics"),Object(c.b)("p",null,"Use a graphics card to render vector graphics and turtle graphics backed by ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/buffers"}),"data buffers"),"."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#graphics_card"}),"ui.graphics_card()"),"."),Object(c.b)("h2",{id:"stats"},"Stats"),Object(c.b)("p",null,"Use stats cards for a quick and easy way to display live values and graphics (or ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Sparkline"}),"sparklines"),"). These cards are backed by ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/buffers"}),"data buffers"),", and provide an efficient mechanism to display values that change rapidly over time."),Object(c.b)("table",null,Object(c.b)("thead",{parentName:"table"},Object(c.b)("tr",{parentName:"thead"},Object(c.b)("th",Object(r.a)({parentName:"tr"},{align:null}),"Card"),Object(c.b)("th",Object(r.a)({parentName:"tr"},{align:null}),"Use"))),Object(c.b)("tbody",{parentName:"table"},Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(r.a)({parentName:"td"},{href:"/wave/docs/api/ui/#small_series_stat_card"}),"ui.small_series_stat_card()")),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Small stat card; displays a primary value and a series plot.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(r.a)({parentName:"td"},{href:"/wave/docs/api/ui/#small_stat_card"}),"ui.small_stat_card()")),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Stat card; displays a single value.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(r.a)({parentName:"td"},{href:"/wave/docs/api/ui/#large_bar_stat_card"}),"ui.large_bar_stat_card()")),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Large captioned card; displays a primary value, an auxiliary value and a progress bar, with captions for each value.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(r.a)({parentName:"td"},{href:"/wave/docs/api/ui/#large_stat_card"}),"ui.large_stat_card()")),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Stat card; displays a primary value, an auxiliary value and a caption.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(r.a)({parentName:"td"},{href:"/wave/docs/api/ui/#tall_gauge_stat_card"}),"ui.tall_gauge_stat_card()")),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Tall stat card; displays a primary value, an auxiliary value and a progress gauge.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(r.a)({parentName:"td"},{href:"/wave/docs/api/ui/#tall_series_stat_card"}),"ui.tall_series_stat_card()")),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Tall stat card; displays a primary value, an auxiliary value and a series plot.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(r.a)({parentName:"td"},{href:"/wave/docs/api/ui/#wide_bar_stat_card"}),"ui.wide_bar_stat_card()")),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Wide stat card; displays a primary value, an auxiliary value and a progress bar.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(r.a)({parentName:"td"},{href:"/wave/docs/api/ui/#wide_gauge_stat_card"}),"ui.wide_gauge_stat_card()")),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Wide stat card; displays a primary value, an auxiliary value and a progress gauge.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(r.a)({parentName:"td"},{href:"/wave/docs/api/ui/#wide_series_stat_card"}),"ui.wide_series_stat_card()")),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Wide stat card; displays a primary value, an auxiliary value and a series plot.")))),Object(c.b)("h2",{id:"meta"},"Meta"),Object(c.b)("p",null,"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."),Object(c.b)("p",null,"See ",Object(c.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/api/ui/#meta_card"}),"ui.meta_card()"),"."))}o.isMDXComponent=!0},292:function(e,a,t){"use strict";t.d(a,"a",(function(){return s})),t.d(a,"b",(function(){return m}));var r=t(0),n=t.n(r);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 i(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);a&&(r=r.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),t.push.apply(t,r)}return t}function b(e){for(var a=1;a<arguments.length;a++){var t=null!=arguments[a]?arguments[a]:{};a%2?i(Object(t),!0).forEach((function(a){c(e,a,t[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(t,a))}))}return e}function d(e,a){if(null==e)return{};var t,r,n=function(e,a){if(null==e)return{};var t,r,n={},c=Object.keys(e);for(r=0;r<c.length;r++)t=c[r],a.indexOf(t)>=0||(n[t]=e[t]);return n}(e,a);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r<c.length;r++)t=c[r],a.indexOf(t)>=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<c;l++)i[l]=t[l];return n.a.createElement.apply(null,i)}return n.a.createElement.apply(null,t)}u.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/4fc0cd6f.5db0a09b.js b/docs/4fc0cd6f.5db0a09b.js
deleted file mode 100644
index 2d2edaa95a..0000000000
--- a/docs/4fc0cd6f.5db0a09b.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[82],{135:function(a){a.exports=JSON.parse('{"allTagsPath":"/wave/blog/tags","slug":"hello","name":"hello","count":2,"permalink":"/wave/blog/tags/hello"}')}}]);
\ No newline at end of file
diff --git a/docs/50b74c5f.acabea73.js b/docs/50b74c5f.d998e0a5.js
similarity index 93%
rename from docs/50b74c5f.acabea73.js
rename to docs/50b74c5f.d998e0a5.js
index 3f90002437..f44a7d61a9 100644
--- a/docs/50b74c5f.acabea73.js
+++ b/docs/50b74c5f.d998e0a5.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[83],{136:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return l}));var r=n(2),o=n(6),a=(n(0),n(290)),i={title:"Form / Text"},c={unversionedId:"examples/text",id:"examples/text",isDocsHomePage:!1,title:"Form / Text",description:"Use markdown in a text component to display formatted content within a form.",source:"@site/docs/examples/text.md",slug:"/examples/text",permalink:"/wave/docs/examples/text",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/text.md",version:"current",sidebar:"someSidebar",previous:{title:"Form",permalink:"/wave/docs/examples/form"},next:{title:"Form / Text / Sizes",permalink:"/wave/docs/examples/text-sizes"}},p=[],u={rightToc:p};function l(e){var t=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},u,i,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use markdown in a text component to display formatted content within a form."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(355).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\nsample_markdown = '''\nThe **quick** _brown_ fox jumped over the lazy dog.\n\nBlock quote:\n\n> 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=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<a;u++)i[u]=n[u];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},355:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/text-3c5275bb7d17545e6fd8952074ab9d13.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[86],{139:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return l}));var r=n(2),o=n(6),a=(n(0),n(292)),i={title:"Form / Text"},c={unversionedId:"examples/text",id:"examples/text",isDocsHomePage:!1,title:"Form / Text",description:"Use markdown in a text component to display formatted content within a form.",source:"@site/docs/examples/text.md",slug:"/examples/text",permalink:"/wave/docs/examples/text",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/text.md",version:"current",sidebar:"someSidebar",previous:{title:"Form",permalink:"/wave/docs/examples/form"},next:{title:"Form / Text / Sizes",permalink:"/wave/docs/examples/text-sizes"}},p=[],u={rightToc:p};function l(e){var t=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},u,i,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use markdown in a text component to display formatted content within a form."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(360).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\nsample_markdown = '''\nThe **quick** _brown_ fox jumped over the lazy dog.\n\nBlock quote:\n\n> 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},292: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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=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<a;u++)i[u]=n[u];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},360:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/text-3c5275bb7d17545e6fd8952074ab9d13.png"}}]);
\ No newline at end of file
diff --git a/docs/5168cb29.cfa6afe5.js b/docs/5168cb29.4350d716.js
similarity index 97%
rename from docs/5168cb29.cfa6afe5.js
rename to docs/5168cb29.4350d716.js
index 51cd1b658f..764da335c9 100644
--- a/docs/5168cb29.cfa6afe5.js
+++ b/docs/5168cb29.4350d716.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[84],{137:function(e,a,n){"use strict";n.r(a),n.d(a,"frontMatter",(function(){return i})),n.d(a,"metadata",(function(){return u})),n.d(a,"rightToc",(function(){return c})),n.d(a,"default",(function(){return d}));var t=n(2),r=n(6),o=(n(0),n(290)),i={title:"Stat / Gauge / Wide"},u={unversionedId:"examples/stat-wide-gauge",id:"examples/stat-wide-gauge",isDocsHomePage:!1,title:"Stat / Gauge / Wide",description:"Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.",source:"@site/docs/examples/stat-wide-gauge.md",slug:"/examples/stat-wide-gauge",permalink:"/wave/docs/examples/stat-wide-gauge",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-wide-gauge.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Large",permalink:"/wave/docs/examples/stat-large"},next:{title:"Stat / Gauge / Tall",permalink:"/wave/docs/examples/stat-tall-gauge"}},c=[],l={rightToc:c};function d(e){var a=e.components,i=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(t.a)({},l,i,{components:a,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(356).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(t.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.wide_gauge_stat_card(\n    box='1 1 2 1',\n    title=fake.cryptocurrency_name(),\n    value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    aux_value='={{intl bar style=\"percent\" minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    plot_color='$red',\n    progress=pc,\n    data=dict(foo=val, bar=pc),\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")))}d.isMDXComponent=!0},290:function(e,a,n){"use strict";n.d(a,"a",(function(){return p})),n.d(a,"b",(function(){return m}));var t=n(0),r=n.n(t);function o(e,a,n){return a in e?Object.defineProperty(e,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[a]=n,e}function i(e,a){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);a&&(t=t.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),n.push.apply(n,t)}return n}function u(e){for(var a=1;a<arguments.length;a++){var n=null!=arguments[a]?arguments[a]:{};a%2?i(Object(n),!0).forEach((function(a){o(e,a,n[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(n,a))}))}return e}function c(e,a){if(null==e)return{};var n,t,r=function(e,a){if(null==e)return{};var n,t,r={},o=Object.keys(e);for(t=0;t<o.length;t++)n=o[t],a.indexOf(n)>=0||(r[n]=e[n]);return r}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)n=o[t],a.indexOf(n)>=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<o;l++)i[l]=n[l];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},356:function(e,a,n){"use strict";n.r(a),a.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[87],{140:function(e,a,n){"use strict";n.r(a),n.d(a,"frontMatter",(function(){return i})),n.d(a,"metadata",(function(){return u})),n.d(a,"rightToc",(function(){return c})),n.d(a,"default",(function(){return d}));var t=n(2),r=n(6),o=(n(0),n(292)),i={title:"Stat / Gauge / Wide"},u={unversionedId:"examples/stat-wide-gauge",id:"examples/stat-wide-gauge",isDocsHomePage:!1,title:"Stat / Gauge / Wide",description:"Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.",source:"@site/docs/examples/stat-wide-gauge.md",slug:"/examples/stat-wide-gauge",permalink:"/wave/docs/examples/stat-wide-gauge",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-wide-gauge.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Large",permalink:"/wave/docs/examples/stat-large"},next:{title:"Stat / Gauge / Tall",permalink:"/wave/docs/examples/stat-tall-gauge"}},c=[],l={rightToc:c};function d(e){var a=e.components,i=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(t.a)({},l,i,{components:a,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(361).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(t.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.wide_gauge_stat_card(\n    box='1 1 2 1',\n    title=fake.cryptocurrency_name(),\n    value='=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    aux_value='={{intl bar style=\"percent\" minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    plot_color='$red',\n    progress=pc,\n    data=dict(foo=val, bar=pc),\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")))}d.isMDXComponent=!0},292:function(e,a,n){"use strict";n.d(a,"a",(function(){return p})),n.d(a,"b",(function(){return m}));var t=n(0),r=n.n(t);function o(e,a,n){return a in e?Object.defineProperty(e,a,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[a]=n,e}function i(e,a){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);a&&(t=t.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),n.push.apply(n,t)}return n}function u(e){for(var a=1;a<arguments.length;a++){var n=null!=arguments[a]?arguments[a]:{};a%2?i(Object(n),!0).forEach((function(a){o(e,a,n[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(n,a))}))}return e}function c(e,a){if(null==e)return{};var n,t,r=function(e,a){if(null==e)return{};var n,t,r={},o=Object.keys(e);for(t=0;t<o.length;t++)n=o[t],a.indexOf(n)>=0||(r[n]=e[n]);return r}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)n=o[t],a.indexOf(n)>=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<o;l++)i[l]=n[l];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},361:function(e,a,n){"use strict";n.r(a),a.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/5281b7a2.604456ad.js b/docs/5281b7a2.12637c8c.js
similarity index 64%
rename from docs/5281b7a2.604456ad.js
rename to docs/5281b7a2.12637c8c.js
index 0e78fc27f0..47d7dcaefb 100644
--- a/docs/5281b7a2.604456ad.js
+++ b/docs/5281b7a2.12637c8c.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[85],{138:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return i})),a.d(t,"metadata",(function(){return c})),a.d(t,"rightToc",(function(){return s})),a.d(t,"default",(function(){return l}));var r=a(2),n=a(6),o=(a(0),a(290)),i={title:"Architecture"},c={unversionedId:"architecture",id:"architecture",isDocsHomePage:!1,title:"Architecture",description:"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.",source:"@site/docs/architecture.md",slug:"/architecture",permalink:"/wave/docs/architecture",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/architecture.md",version:"current",sidebar:"someSidebar",previous:{title:"Introduction",permalink:"/wave/docs/guide"},next:{title:"Wave Scripts",permalink:"/wave/docs/scripts"}},s=[{value:"Overview",id:"overview",children:[]},{value:"How does it work?",id:"how-does-it-work",children:[]},{value:"How is it different?",id:"how-is-it-different",children:[]}],p={rightToc:s};function l(e){var t=e.components,a=Object(n.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"It excels at capturing data, visualizations, and graphics from multiple sources, and broadcasting them live over the web."),Object(o.b)("p",null,"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)."),Object(o.b)("h2",{id:"overview"},"Overview"),Object(o.b)("p",null,"The Wave runtime operates over three tiers:"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},Object(o.b)("strong",{parentName:"li"},"A content server.")," The Wave server, a ~10MB static binary executable that runs anywhere",Object(o.b)("sup",Object(r.a)({parentName:"li"},{id:"fnref-1"}),Object(o.b)("a",Object(r.a)({parentName:"sup"},{href:"#fn-1",className:"footnote-ref"}),"1")),"."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("strong",{parentName:"li"},"A language driver.")," The ",Object(o.b)("a",Object(r.a)({parentName:"li"},{href:"https://pypi.org/project/h2o-wave/"}),"h2o-wave PyPI package")," used by Wave scripts and apps."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("strong",{parentName:"li"},"A browser-based client.")," The user interface and components.")),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{}),"+---------+                        +---------+\n| Browser +---------+      +------\x3e+ app1.py |\n+---------+         |      |       +---------+\n                    v      |\n+---------+       +-+------+-+     +---------+\n| Browser +------\x3e+  Server  +----\x3e+ app2.py |\n+---------+       +-+------+-+     +---------+\n                    ^      |\n+---------+         |      |       +---------+\n| Browser +---------+      +------\x3e+ app3.py |\n+---------+                        +---------+\n")),Object(o.b)("p",null,"The Wave server has three main functions:"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},"Store site content"),Object(o.b)("li",{parentName:"ul"},"Transmit content changes to browsers."),Object(o.b)("li",{parentName:"ul"},"Transmit browser events to apps.")),Object(o.b)("p",null,"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 (",Object(o.b)("em",{parentName:"p"},"clients"),") downstream, and Wave apps (or scripts) upstream."),Object(o.b)("p",null,"The language driver (the ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://pypi.org/project/h2o-wave/"}),"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."),Object(o.b)("p",null,"The browser-based client's job is to render content on the user interface, and transmit user actions in the form of ",Object(o.b)("em",{parentName:"p"},"events")," back to the Wave server."),Object(o.b)("h2",{id:"how-does-it-work"},"How does it work?"),Object(o.b)("p",null,"The Wave server stores all content in a page cache called a ",Object(o.b)("em",{parentName:"p"},"site"),". A site is a collection of ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/pages"}),"pages"),". Each page has an address, called its ",Object(o.b)("em",{parentName:"p"},"route"),". A page is composed of ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/cards"}),"cards"),". A card holds content, and any tabular data associated with the content, called ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/buffers"}),"data buffers"),". "),Object(o.b)("p",null,"When a browser is pointed to a route, it pulls a copy of the page, creates a ",Object(o.b)("em",{parentName:"p"},"replica")," locally, and renders the content on the user interface."),Object(o.b)("p",null,"The language driver (the ",Object(o.b)("inlineCode",{parentName:"p"},"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 ",Object(o.b)("em",{parentName:"p"},"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."),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{}),"   Python\n+------------+\n|  app.py    |\n|     +      |\n|     |      |\n|     v      |\n| +---+----+ |\n+-+ Driver +-+\n  +---+----+\n      |\n      |Operations\n      |\n      v\n+-----+------+\n|   Server   |\n|            |\n|  +------+  |\n|  | Page |  |\n|  +------+  |\n|            |\n+-----+------+\n      |\n      |Replication\n      |\n+-------------+\n| +---------+ |\n| | Replica | |\n| +---------+ |\n|             |\n|     UI      |\n+-------------+\n    Browser\n")),Object(o.b)("p",null,"The language driver can be used by two kinds of Python programs: ",Object(o.b)("em",{parentName:"p"},"Wave apps")," and ",Object(o.b)("em",{parentName:"p"},"Wave scripts"),". "),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},Object(o.b)("a",Object(r.a)({parentName:"li"},{href:"/wave/docs/apps"}),"Wave apps")," are interactive programs that can update content and respond to user actions."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("a",Object(r.a)({parentName:"li"},{href:"/wave/docs/scripts"}),"Wave scripts")," are simpler, non-interactive (batch) programs: they can update content, but not respond to user actions. ")),Object(o.b)("p",null,"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 ",Object(o.b)("em",{parentName:"p"},"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. "),Object(o.b)("h2",{id:"how-is-it-different"},"How is it different?"),Object(o.b)("p",null,"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. "),Object(o.b)("p",null,"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."),Object(o.b)("hr",null),Object(o.b)("p",null,Object(o.b)("sup",Object(r.a)({parentName:"p"},{id:"fnref-1"}),Object(o.b)("a",Object(r.a)({parentName:"sup"},{href:"#fn-1",className:"footnote-ref"}),"1"))," Linux, Windows, Darwin, BSD, Solaris, Android on amd64, arm, 386, ppc, mips; ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://gist.github.com/asukakenji/f15ba7e588ac42795f421b48b8aede63"}),"almost everywhere"),"."))}l.isMDXComponent=!0},290:function(e,t,a){"use strict";a.d(t,"a",(function(){return b})),a.d(t,"b",(function(){return h}));var r=a(0),n=a.n(r);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 i(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function c(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function s(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a,r,n={},o=Object.keys(e);for(r=0;r<o.length;r++)a=o[r],t.indexOf(a)>=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)a=o[r],t.indexOf(a)>=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<o;p++)i[p]=a[p];return n.a.createElement.apply(null,i)}return n.a.createElement.apply(null,a)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[88],{141:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return i})),a.d(t,"metadata",(function(){return c})),a.d(t,"rightToc",(function(){return s})),a.d(t,"default",(function(){return l}));var r=a(2),n=a(6),o=(a(0),a(292)),i={title:"Architecture"},c={unversionedId:"architecture",id:"architecture",isDocsHomePage:!1,title:"Architecture",description:"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.",source:"@site/docs/architecture.md",slug:"/architecture",permalink:"/wave/docs/architecture",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/architecture.md",version:"current",sidebar:"someSidebar",previous:{title:"Introduction",permalink:"/wave/docs/guide"},next:{title:"Wave Scripts",permalink:"/wave/docs/scripts"}},s=[{value:"Overview",id:"overview",children:[]},{value:"How does it work?",id:"how-does-it-work",children:[]},{value:"How is it different?",id:"how-is-it-different",children:[]}],p={rightToc:s};function l(e){var t=e.components,a=Object(n.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"It excels at capturing data, visualizations, and graphics from multiple sources, and broadcasting them live over the web."),Object(o.b)("p",null,"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)."),Object(o.b)("h2",{id:"overview"},"Overview"),Object(o.b)("p",null,"The Wave runtime operates over three tiers:"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},Object(o.b)("strong",{parentName:"li"},"A content server.")," The Wave server, a ~10MB static binary executable that runs anywhere",Object(o.b)("sup",Object(r.a)({parentName:"li"},{id:"fnref-1"}),Object(o.b)("a",Object(r.a)({parentName:"sup"},{href:"#fn-1",className:"footnote-ref"}),"1")),"."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("strong",{parentName:"li"},"A language driver.")," The ",Object(o.b)("a",Object(r.a)({parentName:"li"},{href:"https://pypi.org/project/h2o-wave/"}),"h2o-wave PyPI package")," used by Wave scripts and apps."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("strong",{parentName:"li"},"A browser-based client.")," The user interface and components.")),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{}),"+---------+                        +---------+\n| Browser +---------+      +------\x3e+ app1.py |\n+---------+         |      |       +---------+\n                    v      |\n+---------+       +-+------+-+     +---------+\n| Browser +------\x3e+  Server  +----\x3e+ app2.py |\n+---------+       +-+------+-+     +---------+\n                    ^      |\n+---------+         |      |       +---------+\n| Browser +---------+      +------\x3e+ app3.py |\n+---------+                        +---------+\n")),Object(o.b)("p",null,"The Wave server has three main functions:"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},"Store site content"),Object(o.b)("li",{parentName:"ul"},"Transmit content changes to browsers."),Object(o.b)("li",{parentName:"ul"},"Transmit browser events to apps.")),Object(o.b)("p",null,"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 (",Object(o.b)("em",{parentName:"p"},"clients"),") downstream, and Wave apps (or scripts) upstream."),Object(o.b)("p",null,"The language driver (the ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://pypi.org/project/h2o-wave/"}),"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."),Object(o.b)("p",null,"The browser-based client's job is to render content on the user interface, and transmit user actions in the form of ",Object(o.b)("em",{parentName:"p"},"events")," back to the Wave server."),Object(o.b)("h2",{id:"how-does-it-work"},"How does it work?"),Object(o.b)("p",null,"The Wave server stores all content in a page cache called a ",Object(o.b)("em",{parentName:"p"},"site"),". A site is a collection of ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/pages"}),"pages"),". Each page has an address, called its ",Object(o.b)("em",{parentName:"p"},"route"),". A page is composed of ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/cards"}),"cards"),". A card holds content, and any tabular data associated with the content, called ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"/wave/docs/buffers"}),"data buffers"),". "),Object(o.b)("p",null,"When a browser is pointed to a route, it pulls a copy of the page, creates a ",Object(o.b)("em",{parentName:"p"},"replica")," locally, and renders the content on the user interface."),Object(o.b)("p",null,"The language driver (the ",Object(o.b)("inlineCode",{parentName:"p"},"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 ",Object(o.b)("em",{parentName:"p"},"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."),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{}),"   Python\n+------------+\n|  app.py    |\n|     +      |\n|     |      |\n|     v      |\n| +---+----+ |\n+-+ Driver +-+\n  +---+----+\n      |\n      |Operations\n      |\n      v\n+-----+------+\n|   Server   |\n|            |\n|  +------+  |\n|  | Page |  |\n|  +------+  |\n|            |\n+-----+------+\n      |\n      |Replication\n      |\n+-------------+\n| +---------+ |\n| | Replica | |\n| +---------+ |\n|             |\n|     UI      |\n+-------------+\n    Browser\n")),Object(o.b)("p",null,"The language driver can be used by two kinds of Python programs: ",Object(o.b)("em",{parentName:"p"},"Wave apps")," and ",Object(o.b)("em",{parentName:"p"},"Wave scripts"),". "),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},Object(o.b)("a",Object(r.a)({parentName:"li"},{href:"/wave/docs/apps"}),"Wave apps")," are interactive programs that can update content and respond to user actions."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("a",Object(r.a)({parentName:"li"},{href:"/wave/docs/scripts"}),"Wave scripts")," are simpler, non-interactive (batch) programs: they can update content, but not respond to user actions. ")),Object(o.b)("p",null,"Wave apps are ASGI servers under the hood. When a Wave app is launched, it announces its existence to the Wave server, and the Wave server establishes a ",Object(o.b)("em",{parentName:"p"},"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. "),Object(o.b)("h2",{id:"how-is-it-different"},"How is it different?"),Object(o.b)("p",null,"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. "),Object(o.b)("p",null,"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."),Object(o.b)("hr",null),Object(o.b)("p",null,Object(o.b)("sup",Object(r.a)({parentName:"p"},{id:"fnref-1"}),Object(o.b)("a",Object(r.a)({parentName:"sup"},{href:"#fn-1",className:"footnote-ref"}),"1"))," Linux, Windows, Darwin, BSD, Solaris, Android on amd64, arm, 386, ppc, mips; ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://gist.github.com/asukakenji/f15ba7e588ac42795f421b48b8aede63"}),"almost everywhere"),"."))}l.isMDXComponent=!0},292:function(e,t,a){"use strict";a.d(t,"a",(function(){return b})),a.d(t,"b",(function(){return h}));var r=a(0),n=a.n(r);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 i(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function c(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function s(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a,r,n={},o=Object.keys(e);for(r=0;r<o.length;r++)a=o[r],t.indexOf(a)>=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)a=o[r],t.indexOf(a)>=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<o;p++)i[p]=a[p];return n.a.createElement.apply(null,i)}return n.a.createElement.apply(null,a)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/53da2547.2c55cbf7.js b/docs/53da2547.4046d6ef.js
similarity index 92%
rename from docs/53da2547.2c55cbf7.js
rename to docs/53da2547.4046d6ef.js
index 691af7b5c5..3babe2c984 100644
--- a/docs/53da2547.2c55cbf7.js
+++ b/docs/53da2547.4046d6ef.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[86],{139:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return p})),r.d(t,"rightToc",(function(){return c})),r.d(t,"default",(function(){return u}));var n=r(2),a=r(6),o=(r(0),r(290)),i={title:"Plot / Area / Groups"},p={unversionedId:"examples/plot-area-groups",id:"examples/plot-area-groups",isDocsHomePage:!1,title:"Plot / Area / Groups",description:"Make an area plot showing multiple categories.",source:"@site/docs/examples/plot-area-groups.md",slug:"/examples/plot-area-groups",permalink:"/wave/docs/examples/plot-area-groups",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-groups.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Area",permalink:"/wave/docs/examples/plot-area"},next:{title:"Plot / Area / Negative",permalink:"/wave/docs/examples/plot-area-negative"}},c=[],l={rightToc:c};function u(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make an area plot showing multiple categories."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(357).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeMultiTimeSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 50\nf = FakeMultiTimeSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Area, groups',\n    data=data('product date price', n * 5),\n    plot=ui.plot([ui.mark(type='area', x_scale='time', x='=date', y='=price', color='=product', 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")))}u.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return s})),r.d(t,"b",(function(){return f}));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 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 p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;l++)i[l]=r[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},357:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-area-groups-26a91066657837eeb3ddd3d83dafdc0a.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[89],{142:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return p})),r.d(t,"rightToc",(function(){return c})),r.d(t,"default",(function(){return u}));var n=r(2),a=r(6),o=(r(0),r(292)),i={title:"Plot / Area / Groups"},p={unversionedId:"examples/plot-area-groups",id:"examples/plot-area-groups",isDocsHomePage:!1,title:"Plot / Area / Groups",description:"Make an area plot showing multiple categories.",source:"@site/docs/examples/plot-area-groups.md",slug:"/examples/plot-area-groups",permalink:"/wave/docs/examples/plot-area-groups",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-groups.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Area",permalink:"/wave/docs/examples/plot-area"},next:{title:"Plot / Area / Negative",permalink:"/wave/docs/examples/plot-area-negative"}},c=[],l={rightToc:c};function u(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make an area plot showing multiple categories."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(362).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeMultiTimeSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 50\nf = FakeMultiTimeSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Area, groups',\n    data=data('product date price', n * 5),\n    plot=ui.plot([ui.mark(type='area', x_scale='time', x='=date', y='=price', color='=product', 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")))}u.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return s})),r.d(t,"b",(function(){return f}));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 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 p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;l++)i[l]=r[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},362:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-area-groups-26a91066657837eeb3ddd3d83dafdc0a.png"}}]);
\ No newline at end of file
diff --git a/docs/549ea605.33db492b.js b/docs/549ea605.33db492b.js
new file mode 100644
index 0000000000..9576ea3c18
--- /dev/null
+++ b/docs/549ea605.33db492b.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[90],{143:function(e,s,n){"use strict";n.r(s),n.d(s,"frontMatter",(function(){return r})),n.d(s,"metadata",(function(){return u})),n.d(s,"rightToc",(function(){return o})),n.d(s,"default",(function(){return c}));var t=n(2),i=n(6),a=(n(0),n(292)),r={title:"Issue Tracker"},u={unversionedId:"examples/issue-tracker",id:"examples/issue-tracker",isDocsHomePage:!1,title:"Issue Tracker",description:"Implement a simple issue tracker using a table to create master-detail views.",source:"@site/docs/examples/issue-tracker.md",slug:"/examples/issue-tracker",permalink:"/wave/docs/examples/issue-tracker",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/issue-tracker.md",version:"current",sidebar:"someSidebar",previous:{title:"Wizard",permalink:"/wave/docs/examples/wizard"},next:{title:"Dashboard",permalink:"/wave/docs/examples/dashboard"}},o=[],l={rightToc:o};function c(e){var s=e.components,r=Object(i.a)(e,["components"]);return Object(a.b)("wrapper",Object(t.a)({},l,r,{components:s,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Implement a simple issue tracker using a table to create master-detail views."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(363).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\nfrom faker import Faker\n\nfake = Faker()\n\n_id = 0\n\n\nclass Issue:\n    def __init__(self, text: str, status: str):\n        global _id\n        _id += 1\n        self.id = f'I{_id}'\n        self.text = text\n        self.status = status\n        self.views = 0\n\n\n# Create some issues\nissues = [Issue(text=fake.sentence(), status='Open') for i in range(12)]\n\n# Build a lookup of issues for convenience\nissue_lookup = {issue.id: issue for issue in issues}\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='views', label='Views'),\n]\n\n\ndef make_issue_table(allow_multiple_selection=False):\n    return ui.table(\n        name='issues',\n        columns=columns,\n        rows=[ui.table_row(name=issue.id, cells=[issue.text, issue.status, str(issue.views)]) for issue in issues],\n        multiple=allow_multiple_selection\n    )\n\n\nasync def edit_multiple(q: Q):\n    q.page['form'] = ui.form_card(\n        box='1 1 4 -1',\n        items=[\n            make_issue_table(allow_multiple_selection=True),  # This time, allow multiple selections\n            ui.buttons([\n                ui.button(name='reopen_issues', label='Reopen Selected', primary=True),\n                ui.button(name='close_issues', label='Close Selected', primary=True),\n                ui.button(name='back', label='Back to safety')\n            ]),\n        ]\n    )\n    await q.page.save()\n\n\nasync def show_issues(q: Q):\n    q.page['form'] = ui.form_card(\n        box='1 1 4 -1',\n        items=[\n            make_issue_table(),\n            ui.buttons([ui.button(name='edit_multiple', label='Edit Multiple...', primary=True)]),\n        ]\n    )\n    await q.page.save()\n\n\nasync def show_issue(q: Q, issue_id: str):\n    issue = issue_lookup[issue_id]\n    issue.views += 1\n\n    q.client.active_issue_id = issue_id\n\n    q.page['form'] = ui.form_card(\n        box='1 1 4 -1',\n        items=[\n            ui.text_xl(f'Issue {issue.id}'),\n            ui.text(issue.text),\n            ui.text_xs(f'({issue.views} views)'),\n            ui.buttons([\n                ui.button(\n                    name='close_issue' if issue.status == 'Open' else 'reopen_issue',\n                    label=\"Close Issue\" if issue.status == 'Open' else \"Reopen Issue\",\n                    primary=True,\n                ),\n                ui.button(name='back', label='Back'),\n            ]),\n        ]\n    )\n\n    await q.page.save()\n\n\nasync def close_issue(q: Q):\n    issue = issue_lookup[q.client.active_issue_id]\n    issue.status = 'Closed'\n    await show_issues(q)\n\n\nasync def close_issues(q: Q):\n    for issue_id in q.args.issues:\n        issue = issue_lookup[issue_id]\n        issue.status = 'Closed'\n    await show_issues(q)\n\n\nasync def reopen_issue(q: Q):\n    issue = issue_lookup[q.client.active_issue_id]\n    issue.status = 'Open'\n    await show_issues(q)\n\n\nasync def reopen_issues(q: Q):\n    for issue_id in q.args.issues:\n        issue = issue_lookup[issue_id]\n        issue.status = 'Open'\n    await show_issues(q)\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.edit_multiple:\n        await edit_multiple(q)\n    elif q.args.reopen_issues:\n        await reopen_issues(q)\n    elif q.args.close_issues:\n        await close_issues(q)\n    elif q.args.reopen_issue:\n        await reopen_issue(q)\n    elif q.args.close_issue:\n        await close_issue(q)\n    elif q.args.issues:  # An issue was clicked on\n        await show_issue(q, q.args.issues[0])\n    else:\n        await show_issues(q)\n")))}c.isMDXComponent=!0},292:function(e,s,n){"use strict";n.d(s,"a",(function(){return p})),n.d(s,"b",(function(){return d}));var t=n(0),i=n.n(t);function a(e,s,n){return s in e?Object.defineProperty(e,s,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[s]=n,e}function r(e,s){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);s&&(t=t.filter((function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable}))),n.push.apply(n,t)}return n}function u(e){for(var s=1;s<arguments.length;s++){var n=null!=arguments[s]?arguments[s]:{};s%2?r(Object(n),!0).forEach((function(s){a(e,s,n[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(s){Object.defineProperty(e,s,Object.getOwnPropertyDescriptor(n,s))}))}return e}function o(e,s){if(null==e)return{};var n,t,i=function(e,s){if(null==e)return{};var n,t,i={},a=Object.keys(e);for(t=0;t<a.length;t++)n=a[t],s.indexOf(n)>=0||(i[n]=e[n]);return i}(e,s);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)n=a[t],s.indexOf(n)>=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<a;l++)r[l]=n[l];return i.a.createElement.apply(null,r)}return i.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},363:function(e,s,n){"use strict";n.r(s),s.default=n.p+"assets/images/issue-tracker-f8f5460fa5058fa880076f1b4d032c9f.png"}}]);
\ No newline at end of file
diff --git a/docs/549ea605.398da942.js b/docs/549ea605.398da942.js
deleted file mode 100644
index 571802c815..0000000000
--- a/docs/549ea605.398da942.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[87],{140:function(e,s,n){"use strict";n.r(s),n.d(s,"frontMatter",(function(){return r})),n.d(s,"metadata",(function(){return u})),n.d(s,"rightToc",(function(){return o})),n.d(s,"default",(function(){return c}));var t=n(2),i=n(6),a=(n(0),n(290)),r={title:"Issue Tracker"},u={unversionedId:"examples/issue-tracker",id:"examples/issue-tracker",isDocsHomePage:!1,title:"Issue Tracker",description:"Implement a simple issue tracker using a table to create master-detail views.",source:"@site/docs/examples/issue-tracker.md",slug:"/examples/issue-tracker",permalink:"/wave/docs/examples/issue-tracker",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/issue-tracker.md",version:"current",sidebar:"someSidebar",previous:{title:"Wizard",permalink:"/wave/docs/examples/wizard"},next:{title:"Dashboard",permalink:"/wave/docs/examples/dashboard"}},o=[],l={rightToc:o};function c(e){var s=e.components,r=Object(i.a)(e,["components"]);return Object(a.b)("wrapper",Object(t.a)({},l,r,{components:s,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Implement a simple issue tracker using a table to create master-detail views."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(358).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\nfrom faker import Faker\n\nfake = Faker()\n\n_id = 0\n\n\nclass Issue:\n    def __init__(self, text: str, status: str):\n        global _id\n        _id += 1\n        self.id = f'I{_id}'\n        self.text = text\n        self.status = status\n        self.views = 0\n\n\n# Create some issues\nissues = [Issue(text=fake.sentence(), status='Open') for i in range(12)]\n\n# Build a lookup of issues for convenience\nissue_lookup = {issue.id: issue for issue in issues}\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='views', label='Views'),\n]\n\n\ndef make_issue_table(allow_multiple_selection=False):\n    return ui.table(\n        name='issues',\n        columns=columns,\n        rows=[ui.table_row(name=issue.id, cells=[issue.text, issue.status, str(issue.views)]) for issue in issues],\n        multiple=allow_multiple_selection\n    )\n\n\nasync def edit_multiple(q: Q):\n    q.page['form'] = ui.form_card(\n        box='1 1 4 -1',\n        items=[\n            make_issue_table(allow_multiple_selection=True),  # This time, allow multiple selections\n            ui.buttons([\n                ui.button(name='reopen_issues', label='Reopen Selected', primary=True),\n                ui.button(name='close_issues', label='Close Selected', primary=True),\n                ui.button(name='back', label='Back to safety')\n            ]),\n        ]\n    )\n    await q.page.save()\n\n\nasync def show_issues(q: Q):\n    q.page['form'] = ui.form_card(\n        box='1 1 4 -1',\n        items=[\n            make_issue_table(),\n            ui.buttons([ui.button(name='edit_multiple', label='Edit Multiple...', primary=True)]),\n        ]\n    )\n    await q.page.save()\n\n\nasync def show_issue(q: Q, issue_id: str):\n    issue = issue_lookup[issue_id]\n    issue.views += 1\n\n    q.client.active_issue_id = issue_id\n\n    q.page['form'] = ui.form_card(\n        box='1 1 4 -1',\n        items=[\n            ui.text_xl(f'Issue {issue.id}'),\n            ui.text(issue.text),\n            ui.text_xs(f'({issue.views} views)'),\n            ui.buttons([\n                ui.button(\n                    name='close_issue' if issue.status == 'Open' else 'reopen_issue',\n                    label=\"Close Issue\" if issue.status == 'Open' else \"Reopen Issue\",\n                    primary=True,\n                ),\n                ui.button(name='back', label='Back'),\n            ]),\n        ]\n    )\n\n    await q.page.save()\n\n\nasync def close_issue(q: Q):\n    issue = issue_lookup[q.client.active_issue_id]\n    issue.status = 'Closed'\n    await show_issues(q)\n\n\nasync def close_issues(q: Q):\n    for issue_id in q.args.issues:\n        issue = issue_lookup[issue_id]\n        issue.status = 'Closed'\n    await show_issues(q)\n\n\nasync def reopen_issue(q: Q):\n    issue = issue_lookup[q.client.active_issue_id]\n    issue.status = 'Open'\n    await show_issues(q)\n\n\nasync def reopen_issues(q: Q):\n    for issue_id in q.args.issues:\n        issue = issue_lookup[issue_id]\n        issue.status = 'Open'\n    await show_issues(q)\n\n\nasync def serve(q: Q):\n    if q.args.edit_multiple:\n        await edit_multiple(q)\n    elif q.args.reopen_issues:\n        await reopen_issues(q)\n    elif q.args.close_issues:\n        await close_issues(q)\n    elif q.args.reopen_issue:\n        await reopen_issue(q)\n    elif q.args.close_issue:\n        await close_issue(q)\n    elif q.args.issues:  # An issue was clicked on\n        await show_issue(q, q.args.issues[0])\n    else:\n        await show_issues(q)\n\n\nlisten('/demo', serve)\n")))}c.isMDXComponent=!0},290:function(e,s,n){"use strict";n.d(s,"a",(function(){return p})),n.d(s,"b",(function(){return d}));var t=n(0),i=n.n(t);function a(e,s,n){return s in e?Object.defineProperty(e,s,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[s]=n,e}function r(e,s){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);s&&(t=t.filter((function(s){return Object.getOwnPropertyDescriptor(e,s).enumerable}))),n.push.apply(n,t)}return n}function u(e){for(var s=1;s<arguments.length;s++){var n=null!=arguments[s]?arguments[s]:{};s%2?r(Object(n),!0).forEach((function(s){a(e,s,n[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(s){Object.defineProperty(e,s,Object.getOwnPropertyDescriptor(n,s))}))}return e}function o(e,s){if(null==e)return{};var n,t,i=function(e,s){if(null==e)return{};var n,t,i={},a=Object.keys(e);for(t=0;t<a.length;t++)n=a[t],s.indexOf(n)>=0||(i[n]=e[n]);return i}(e,s);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)n=a[t],s.indexOf(n)>=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<a;l++)r[l]=n[l];return i.a.createElement.apply(null,r)}return i.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},358:function(e,s,n){"use strict";n.r(s),s.default=n.p+"assets/images/issue-tracker-f8f5460fa5058fa880076f1b4d032c9f.png"}}]);
\ No newline at end of file
diff --git a/docs/54aab825.d15bb588.js b/docs/54aab825.596afbb9.js
similarity index 92%
rename from docs/54aab825.d15bb588.js
rename to docs/54aab825.596afbb9.js
index 7e868d673a..edb8b1ee2a 100644
--- a/docs/54aab825.d15bb588.js
+++ b/docs/54aab825.596afbb9.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[88],{141:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return l})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return p}));var r=n(2),a=n(6),o=(n(0),n(290)),l={title:"Plot / Line / Labels/ Stroked"},i={unversionedId:"examples/plot-line-labels-stroked",id:"examples/plot-line-labels-stroked",isDocsHomePage:!1,title:"Plot / Line / Labels/ Stroked",description:"Customize label rendering: add a subtle outline to labels to improve readability.",source:"@site/docs/examples/plot-line-labels-stroked.md",slug:"/examples/plot-line-labels-stroked",permalink:"/wave/docs/examples/plot-line-labels-stroked",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line-labels-stroked.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Line / Labels",permalink:"/wave/docs/examples/plot-line-labels"},next:{title:"Plot / Line / Labels / Occlusion",permalink:"/wave/docs/examples/plot-line-labels-no-overlap"}},s=[],c={rightToc:s};function p(e){var t=e.components,l=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},c,l,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Customize label rendering: add a subtle outline to labels to improve readability."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(359).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='Labels, less messy',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0,\n                          label='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n                          label_fill_color='rgba(0,0,0,0.65)', label_stroke_color='#fff', label_stroke_size=2)])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}p.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),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 l(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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;c++)l[c]=n[c];return a.a.createElement.apply(null,l)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},359:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-line-labels-stroked-8f085e306871e3c87d798b4c4206fc11.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[91],{144:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return l})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return p}));var r=n(2),a=n(6),o=(n(0),n(292)),l={title:"Plot / Line / Labels/ Stroked"},i={unversionedId:"examples/plot-line-labels-stroked",id:"examples/plot-line-labels-stroked",isDocsHomePage:!1,title:"Plot / Line / Labels/ Stroked",description:"Customize label rendering: add a subtle outline to labels to improve readability.",source:"@site/docs/examples/plot-line-labels-stroked.md",slug:"/examples/plot-line-labels-stroked",permalink:"/wave/docs/examples/plot-line-labels-stroked",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line-labels-stroked.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Line / Labels",permalink:"/wave/docs/examples/plot-line-labels"},next:{title:"Plot / Line / Labels / Occlusion",permalink:"/wave/docs/examples/plot-line-labels-no-overlap"}},s=[],c={rightToc:s};function p(e){var t=e.components,l=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},c,l,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Customize label rendering: add a subtle outline to labels to improve readability."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(364).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='Labels, less messy',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0,\n                          label='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n                          label_fill_color='rgba(0,0,0,0.65)', label_stroke_color='#fff', label_stroke_size=2)])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}p.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),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 l(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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;c++)l[c]=n[c];return a.a.createElement.apply(null,l)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},364:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-line-labels-stroked-8f085e306871e3c87d798b4c4206fc11.png"}}]);
\ No newline at end of file
diff --git a/docs/58b13b12.2dd6b897.js b/docs/58b13b12.2dd6b897.js
new file mode 100644
index 0000000000..7eb0fc1406
--- /dev/null
+++ b/docs/58b13b12.2dd6b897.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[92],{145:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return u})),n.d(t,"default",(function(){return l}));var a=n(2),r=n(6),i=(n(0),n(292)),o={title:"Tabs / Navigation"},c={unversionedId:"examples/tab-delete",id:"examples/tab-delete",isDocsHomePage:!1,title:"Tabs / Navigation",description:"Navigate between two or more tabs.",source:"@site/docs/examples/tab-delete.md",slug:"/examples/tab-delete",permalink:"/wave/docs/examples/tab-delete",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/tab-delete.md",version:"current",sidebar:"someSidebar",previous:{title:"Tab / Links",permalink:"/wave/docs/examples/tab-link"},next:{title:"Breadcrumbs",permalink:"/wave/docs/examples/breadcrumbs"}},u=[],b={rightToc:u};function l(e){var t=e.components,o=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(a.a)({},b,o,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Navigate between two or more tabs.\nDelete the cards when switching between tabs."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+n(365).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\nTABS = 'abcde'\n\n\nasync def display_tab(q):\n    q.page[f'example_{q.client.tab}'] = ui.markup_card(\n        box='1 2 4 3',\n        title=q.client.tab.upper(),\n        content='\\n'.join([''.join([q.client.tab] * 10) for _ in range(50)])\n    )\n    await q.page.save()\n\n\nasync def remove_cards(q: Q):\n    for tab in TABS:\n        del q.page[f'example_{tab}']\n    await q.page.save()\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if not q.client.initialized:\n        q.client.tab = 'a'\n        q.page['tabs'] = ui.tab_card(  # Initialize once\n            box='1 1 4 1',\n            items=[ui.tab(name=f'#{t}', label=t.upper()) for t in TABS]\n        )\n        q.client.initialized = True\n\n    if q.args['#']:\n        q.client.tab = str(q.args['#'])\n\n    await remove_cards(q)\n    await display_tab(q)\n    await q.page.save()\n")))}l.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return f}));var a=n(0),r=n.n(a);function i(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 a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var b=r.a.createContext({}),l=function(e){var t=r.a.useContext(b),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=l(e.components);return r.a.createElement(b.Provider,{value:t},e.children)},s={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,b=u(e,["components","mdxType","originalType","parentName"]),p=l(n),d=a,f=p["".concat(o,".").concat(d)]||p[d]||s[d]||i;return n?r.a.createElement(f,c(c({ref:t},b),{},{components:n})):r.a.createElement(f,c({ref:t},b))}));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 b=2;b<i;b++)o[b]=n[b];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},365:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/58b13b12.5e0eeb21.js b/docs/58b13b12.5e0eeb21.js
deleted file mode 100644
index bfab7dd7ed..0000000000
--- a/docs/58b13b12.5e0eeb21.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[89],{142:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return u})),n.d(t,"default",(function(){return b}));var a=n(2),r=n(6),i=(n(0),n(290)),o={title:"Tabs / Navigation"},c={unversionedId:"examples/tab-delete",id:"examples/tab-delete",isDocsHomePage:!1,title:"Tabs / Navigation",description:"Navigate between two or more tabs.",source:"@site/docs/examples/tab-delete.md",slug:"/examples/tab-delete",permalink:"/wave/docs/examples/tab-delete",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/tab-delete.md",version:"current",sidebar:"someSidebar",previous:{title:"Tab / Links",permalink:"/wave/docs/examples/tab-link"},next:{title:"Breadcrumbs",permalink:"/wave/docs/examples/breadcrumbs"}},u=[],l={rightToc:u};function b(e){var t=e.components,o=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(a.a)({},l,o,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Navigate between two or more tabs.\nDelete the cards when switching between tabs."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+n(360).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\nTABS = 'abcde'\n\n\nasync def display_tab(q):\n    q.page[f'example_{q.client.tab}'] = ui.markup_card(\n        box='1 2 4 3',\n        title=q.client.tab.upper(),\n        content='\\n'.join([''.join([q.client.tab] * 10) for _ in range(50)])\n    )\n    await q.page.save()\n\n\nasync def remove_cards(q: Q):\n    for tab in TABS:\n        del q.page[f'example_{tab}']\n    await q.page.save()\n\n\nasync def serve(q: Q):\n    if not q.client.initialized:\n        q.client.tab = 'a'\n        q.page['tabs'] = ui.tab_card(  # Initialize once\n            box='1 1 4 1',\n            items=[ui.tab(name=f'#{t}', label=t.upper()) for t in TABS]\n        )\n        q.client.initialized = True\n\n    if q.args['#']:\n        q.client.tab = str(q.args['#'])\n\n    await remove_cards(q)\n    await display_tab(q)\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}b.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return f}));var a=n(0),r=n.n(a);function i(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 a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=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<i;l++)o[l]=n[l];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},360:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/5a34328a.edcdf6f4.js b/docs/5a34328a.36cd7ed4.js
similarity index 64%
rename from docs/5a34328a.edcdf6f4.js
rename to docs/5a34328a.36cd7ed4.js
index 7e0cf41aa1..f5f4b92120 100644
--- a/docs/5a34328a.edcdf6f4.js
+++ b/docs/5a34328a.36cd7ed4.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[90],{143:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return s})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return l}));var a=n(2),r=n(6),o=(n(0),n(290)),i={title:"State"},s={unversionedId:"state",id:"state",isDocsHomePage:!1,title:"State",description:"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.",source:"@site/docs/state.md",slug:"/state",permalink:"/wave/docs/state",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/state.md",version:"current",sidebar:"someSidebar",previous:{title:"Event Arguments",permalink:"/wave/docs/arguments"},next:{title:"Routing",permalink:"/wave/docs/routing"}},p=[],c={rightToc:p};function l(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},c,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"In a Wave app, you can store run-time information at three levels:"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},Object(o.b)("strong",{parentName:"li"},"App-level:")," Information shared across all users."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("strong",{parentName:"li"},"User-level:")," Information private to a user, but shared across all browser tabs."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("strong",{parentName:"li"},"Client-level:")," Information private to a browser tab.")),Object(o.b)("p",null,"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)."),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"The Wave query context ",Object(o.b)("inlineCode",{parentName:"p"},"q")," (of type ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"api/server#q"}),"Q"),") carries ",Object(o.b)("inlineCode",{parentName:"p"},"q.app"),", ",Object(o.b)("inlineCode",{parentName:"p"},"q.user"),", and ",Object(o.b)("inlineCode",{parentName:"p"},"q.client"),", three dictionary-like objects for storing information at the app-level, user-level, and client-level, respectively. "),Object(o.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(o.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},Object(o.b)("inlineCode",{parentName:"p"},"q.app"),", ",Object(o.b)("inlineCode",{parentName:"p"},"q.user"),", and ",Object(o.b)("inlineCode",{parentName:"p"},"q.client")," are all ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"api/core#Expando"}),"Expando")," instances, which means they behave both like dictionaries and objects: ",Object(o.b)("inlineCode",{parentName:"p"},"q.client['foo']")," is the same as ",Object(o.b)("inlineCode",{parentName:"p"},"q.client.foo"),". ",Object(o.b)("inlineCode",{parentName:"p"},"q.client.foo")," is easier to read."))),Object(o.b)("p",null,"In most non-trivial apps, you'll find yourself frequently copying values from ",Object(o.b)("inlineCode",{parentName:"p"},"q.args")," into ",Object(o.b)("inlineCode",{parentName:"p"},"q.client")," (or ",Object(o.b)("inlineCode",{parentName:"p"},"q.user"),", depending on the problem you're solving). If this gets too repetitive for your taste, use ",Object(o.b)("inlineCode",{parentName:"p"},"copy_expando()")," to copy everything in ",Object(o.b)("inlineCode",{parentName:"p"},"q.args")," to ",Object(o.b)("inlineCode",{parentName:"p"},"q.client")," at the beginning of your ",Object(o.b)("inlineCode",{parentName:"p"},"listen()")," handler:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{4}","{4}":!0}),"from h2o_wave import Q, listen, copy_expando\n\nasync def serve(q: Q):\n    copy_expando(q.args, q.client)\n    # Do something else...\n\nlisten('/foo', serve)\n")))}l.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),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 s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=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<o;c++)i[c]=n[c];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[93],{146:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return l}));var a=n(2),r=n(6),o=(n(0),n(292)),i={title:"State"},p={unversionedId:"state",id:"state",isDocsHomePage:!1,title:"State",description:"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.",source:"@site/docs/state.md",slug:"/state",permalink:"/wave/docs/state",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/state.md",version:"current",sidebar:"someSidebar",previous:{title:"Event Arguments",permalink:"/wave/docs/arguments"},next:{title:"Routing",permalink:"/wave/docs/routing"}},s=[],c={rightToc:s};function l(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},c,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"In a Wave app, you can store run-time information at three levels:"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},Object(o.b)("strong",{parentName:"li"},"App-level:")," Information shared across all users."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("strong",{parentName:"li"},"User-level:")," Information private to a user, but shared across all browser tabs."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("strong",{parentName:"li"},"Client-level:")," Information private to a browser tab.")),Object(o.b)("p",null,"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)."),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"The Wave query context ",Object(o.b)("inlineCode",{parentName:"p"},"q")," (of type ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"api/server#q"}),"Q"),") carries ",Object(o.b)("inlineCode",{parentName:"p"},"q.app"),", ",Object(o.b)("inlineCode",{parentName:"p"},"q.user"),", and ",Object(o.b)("inlineCode",{parentName:"p"},"q.client"),", three dictionary-like objects for storing information at the app-level, user-level, and client-level, respectively. "),Object(o.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(o.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},Object(o.b)("inlineCode",{parentName:"p"},"q.app"),", ",Object(o.b)("inlineCode",{parentName:"p"},"q.user"),", and ",Object(o.b)("inlineCode",{parentName:"p"},"q.client")," are all ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"api/core#Expando"}),"Expando")," instances, which means they behave both like dictionaries and objects: ",Object(o.b)("inlineCode",{parentName:"p"},"q.client['foo']")," is the same as ",Object(o.b)("inlineCode",{parentName:"p"},"q.client.foo"),". ",Object(o.b)("inlineCode",{parentName:"p"},"q.client.foo")," is easier to read."))),Object(o.b)("p",null,"In most non-trivial apps, you'll find yourself frequently copying values from ",Object(o.b)("inlineCode",{parentName:"p"},"q.args")," into ",Object(o.b)("inlineCode",{parentName:"p"},"q.client")," (or ",Object(o.b)("inlineCode",{parentName:"p"},"q.user"),", depending on the problem you're solving). If this gets too repetitive for your taste, use ",Object(o.b)("inlineCode",{parentName:"p"},"copy_expando()")," to copy everything in ",Object(o.b)("inlineCode",{parentName:"p"},"q.args")," to ",Object(o.b)("inlineCode",{parentName:"p"},"q.client")," at the beginning of your ",Object(o.b)("inlineCode",{parentName:"p"},"@app()")," handler:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{5}","{5}":!0}),"from h2o_wave import Q, main, app, copy_expando\n\n@app('/foo')\nasync def serve(q: Q):\n    copy_expando(q.args, q.client)\n    # Do something else...\n")))}l.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return b})),n.d(t,"b",(function(){return m}));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 p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=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):p(p({},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=s(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,p(p({ref:t},c),{},{components:n})):r.a.createElement(m,p({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 p={};for(var s in t)hasOwnProperty.call(t,s)&&(p[s]=t[s]);p.originalType=e,p.mdxType="string"==typeof e?e:a,i[1]=p;for(var c=2;c<o;c++)i[c]=n[c];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/5e52c414.ca72b001.js b/docs/5e52c414.cd86e889.js
similarity index 96%
rename from docs/5e52c414.ca72b001.js
rename to docs/5e52c414.cd86e889.js
index 8764077493..4be566da1a 100644
--- a/docs/5e52c414.ca72b001.js
+++ b/docs/5e52c414.cd86e889.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[91],{144:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return i})),a.d(t,"metadata",(function(){return l})),a.d(t,"rightToc",(function(){return s})),a.d(t,"default",(function(){return c}));var r=a(2),n=a(6),o=(a(0),a(290)),i={title:"Stat / Series / Small / Interval"},l={unversionedId:"examples/stat-small-series-interval",id:"examples/stat-small-series-interval",isDocsHomePage:!1,title:"Stat / Series / Small / Interval",description:"Create a small stat card displaying a primary value and a series plot.",source:"@site/docs/examples/stat-small-series-interval.md",slug:"/examples/stat-small-series-interval",permalink:"/wave/docs/examples/stat-small-series-interval",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-small-series-interval.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Series / Small / Area",permalink:"/wave/docs/examples/stat-small-series-area"},next:{title:"Stat / Series / Wide / Area",permalink:"/wave/docs/examples/stat-wide-series-area"}},s=[],p={rightToc:s};function c(e){var t=e.components,i=Object(n.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Create a small stat card displaying a primary value and a series plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+a(361).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import time\n\nfrom faker import Faker\n\nfrom synth import FakeCategoricalSeries\nfrom h2o_wave import site, ui, data\n\npage = site['/demo']\n\nfake = Faker()\nf = FakeCategoricalSeries()\ncat, val, pc = f.next()\nc = page.add(f'example', ui.small_series_stat_card(\n    box='1 1 1 1',\n    title=fake.cryptocurrency_name(),\n    value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    data=dict(qux=val, quux=pc),\n    plot_category='foo',\n    plot_type='interval',\n    plot_value='qux',\n    plot_color='$red',\n    plot_data=data('foo qux', -20),\n    plot_zero_value=0,\n))\npage.save()\n\nwhile True:\n    time.sleep(1)\n    cat, val, pc = f.next()\n    c.data.qux = val\n    c.data.quux = pc\n    c.plot_data[-1] = [cat, val]\n    page.save()\n")))}c.isMDXComponent=!0},290:function(e,t,a){"use strict";a.d(t,"a",(function(){return m})),a.d(t,"b",(function(){return f}));var r=a(0),n=a.n(r);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 i(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function l(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function s(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a,r,n={},o=Object.keys(e);for(r=0;r<o.length;r++)a=o[r],t.indexOf(a)>=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)a=o[r],t.indexOf(a)>=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<o;p++)i[p]=a[p];return n.a.createElement.apply(null,i)}return n.a.createElement.apply(null,a)}d.displayName="MDXCreateElement"},361:function(e,t,a){"use strict";a.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[94],{147:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return i})),a.d(t,"metadata",(function(){return l})),a.d(t,"rightToc",(function(){return s})),a.d(t,"default",(function(){return c}));var r=a(2),n=a(6),o=(a(0),a(292)),i={title:"Stat / Series / Small / Interval"},l={unversionedId:"examples/stat-small-series-interval",id:"examples/stat-small-series-interval",isDocsHomePage:!1,title:"Stat / Series / Small / Interval",description:"Create a small stat card displaying a primary value and a series plot.",source:"@site/docs/examples/stat-small-series-interval.md",slug:"/examples/stat-small-series-interval",permalink:"/wave/docs/examples/stat-small-series-interval",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-small-series-interval.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Series / Small / Area",permalink:"/wave/docs/examples/stat-small-series-area"},next:{title:"Stat / Series / Wide / Area",permalink:"/wave/docs/examples/stat-wide-series-area"}},s=[],p={rightToc:s};function c(e){var t=e.components,i=Object(n.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Create a small stat card displaying a primary value and a series plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+a(366).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import time\n\nfrom faker import Faker\n\nfrom synth import FakeCategoricalSeries\nfrom h2o_wave import site, ui, data\n\npage = site['/demo']\n\nfake = Faker()\nf = FakeCategoricalSeries()\ncat, val, pc = f.next()\nc = page.add(f'example', ui.small_series_stat_card(\n    box='1 1 1 1',\n    title=fake.cryptocurrency_name(),\n    value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    data=dict(qux=val, quux=pc),\n    plot_category='foo',\n    plot_type='interval',\n    plot_value='qux',\n    plot_color='$red',\n    plot_data=data('foo qux', -20),\n    plot_zero_value=0,\n))\npage.save()\n\nwhile True:\n    time.sleep(1)\n    cat, val, pc = f.next()\n    c.data.qux = val\n    c.data.quux = pc\n    c.plot_data[-1] = [cat, val]\n    page.save()\n")))}c.isMDXComponent=!0},292:function(e,t,a){"use strict";a.d(t,"a",(function(){return m})),a.d(t,"b",(function(){return f}));var r=a(0),n=a.n(r);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 i(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,r)}return a}function l(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function s(e,t){if(null==e)return{};var a,r,n=function(e,t){if(null==e)return{};var a,r,n={},o=Object.keys(e);for(r=0;r<o.length;r++)a=o[r],t.indexOf(a)>=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)a=o[r],t.indexOf(a)>=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<o;p++)i[p]=a[p];return n.a.createElement.apply(null,i)}return n.a.createElement.apply(null,a)}d.displayName="MDXCreateElement"},366:function(e,t,a){"use strict";a.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/5e8c322a.17131ef8.js b/docs/5e8c322a.17131ef8.js
deleted file mode 100644
index fc34f5d2c2..0000000000
--- a/docs/5e8c322a.17131ef8.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[92],{145:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(290)),c={title:"Package h2o_wave"},i={unversionedId:"api/index",id:"api/index",isDocsHomePage:!1,title:"Package h2o_wave",description:"Python package h2o_wave provides the Python driver for H2O Wave.",source:"@site/docs/api/index.md",slug:"/api/index",permalink:"/wave/docs/api/index",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/api/index.md",version:"current",sidebar:"someSidebar",previous:{title:"Graphics / Glider Gun",permalink:"/wave/docs/examples/glider-gun"},next:{title:"Module h2o_wave.core",permalink:"/wave/docs/api/core"}},l=[],b={rightToc:l};function s(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},b,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Python package ",Object(o.b)("code",null,Object(o.b)("a",{title:"h2o_wave",href:"#h2o_wave"},"h2o_wave"))," provides the Python driver for H2O Wave."),Object(o.b)("p",null,"H2O Wave is a lightweight software stack for programming interactive web applications entirely in Python (no HTML/Javascript/CSS) required."),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"Wave's components work in conjunction with the Q relay server that facilitates realtime state synchronization between Python and web browsers."),Object(o.b)("h2",{class:"section-title",id:"header-submodules"},"Sub-modules"),Object(o.b)("dl",null,Object(o.b)("dt",null,Object(o.b)("code",{class:"name"},Object(o.b)("a",{title:"h2o_wave.autoreload",href:"autoreload"},"h2o_wave.autoreload"))),Object(o.b)("dd",null),Object(o.b)("dt",null,Object(o.b)("code",{class:"name"},Object(o.b)("a",{title:"h2o_wave.core",href:"core"},"h2o_wave.core"))),Object(o.b)("dd",null),Object(o.b)("dt",null,Object(o.b)("code",{class:"name"},Object(o.b)("a",{title:"h2o_wave.db",href:"db"},"h2o_wave.db"))),Object(o.b)("dd",null),Object(o.b)("dt",null,Object(o.b)("code",{class:"name"},Object(o.b)("a",{title:"h2o_wave.graphics",href:"graphics"},"h2o_wave.graphics"))),Object(o.b)("dd",null),Object(o.b)("dt",null,Object(o.b)("code",{class:"name"},Object(o.b)("a",{title:"h2o_wave.server",href:"server"},"h2o_wave.server"))),Object(o.b)("dd",null),Object(o.b)("dt",null,Object(o.b)("code",{class:"name"},Object(o.b)("a",{title:"h2o_wave.test",href:"test"},"h2o_wave.test"))),Object(o.b)("dd",null),Object(o.b)("dt",null,Object(o.b)("code",{class:"name"},Object(o.b)("a",{title:"h2o_wave.types",href:"types"},"h2o_wave.types"))),Object(o.b)("dd",null),Object(o.b)("dt",null,Object(o.b)("code",{class:"name"},Object(o.b)("a",{title:"h2o_wave.ui",href:"ui"},"h2o_wave.ui"))),Object(o.b)("dd",null)))}s.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return O}));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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;b++)c[b]=n[b];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,n)}p.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/5e8c322a.cd3a7a36.js b/docs/5e8c322a.cd3a7a36.js
new file mode 100644
index 0000000000..3f7147cb92
--- /dev/null
+++ b/docs/5e8c322a.cd3a7a36.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[95],{148:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(292)),c={title:"Package h2o_wave"},i={unversionedId:"api/index",id:"api/index",isDocsHomePage:!1,title:"Package h2o_wave",description:"Python package h2o_wave provides the Python driver for H2O Wave.",source:"@site/docs/api/index.md",slug:"/api/index",permalink:"/wave/docs/api/index",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/api/index.md",version:"current",sidebar:"someSidebar",previous:{title:"Graphics / Glider Gun",permalink:"/wave/docs/examples/glider-gun"},next:{title:"Module h2o_wave.core",permalink:"/wave/docs/api/core"}},l=[],b={rightToc:l};function s(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},b,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Python package ",Object(o.b)("code",null,Object(o.b)("a",{title:"h2o_wave",href:"#h2o_wave"},"h2o_wave"))," provides the Python driver for H2O Wave."),Object(o.b)("p",null,"H2O Wave is a lightweight software stack for programming interactive web applications entirely in Python (no HTML/Javascript/CSS) required."),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"Wave's components work in conjunction with the Q relay server that facilitates realtime state synchronization between Python and web browsers."),Object(o.b)("h2",{class:"section-title",id:"header-submodules"},"Sub-modules"),Object(o.b)("dl",null,Object(o.b)("dt",null,Object(o.b)("code",{class:"name"},Object(o.b)("a",{title:"h2o_wave.cli",href:"cli"},"h2o_wave.cli"))),Object(o.b)("dd",null),Object(o.b)("dt",null,Object(o.b)("code",{class:"name"},Object(o.b)("a",{title:"h2o_wave.core",href:"core"},"h2o_wave.core"))),Object(o.b)("dd",null),Object(o.b)("dt",null,Object(o.b)("code",{class:"name"},Object(o.b)("a",{title:"h2o_wave.db",href:"db"},"h2o_wave.db"))),Object(o.b)("dd",null),Object(o.b)("dt",null,Object(o.b)("code",{class:"name"},Object(o.b)("a",{title:"h2o_wave.graphics",href:"graphics"},"h2o_wave.graphics"))),Object(o.b)("dd",null),Object(o.b)("dt",null,Object(o.b)("code",{class:"name"},Object(o.b)("a",{title:"h2o_wave.server",href:"server"},"h2o_wave.server"))),Object(o.b)("dd",null),Object(o.b)("dt",null,Object(o.b)("code",{class:"name"},Object(o.b)("a",{title:"h2o_wave.test",href:"test"},"h2o_wave.test"))),Object(o.b)("dd",null),Object(o.b)("dt",null,Object(o.b)("code",{class:"name"},Object(o.b)("a",{title:"h2o_wave.types",href:"types"},"h2o_wave.types"))),Object(o.b)("dd",null),Object(o.b)("dt",null,Object(o.b)("code",{class:"name"},Object(o.b)("a",{title:"h2o_wave.ui",href:"ui"},"h2o_wave.ui"))),Object(o.b)("dd",null)))}s.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return O}));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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;b++)c[b]=n[b];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,n)}p.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/600ae505.52d994e5.js b/docs/600ae505.52d994e5.js
new file mode 100644
index 0000000000..b6bf4d662a
--- /dev/null
+++ b/docs/600ae505.52d994e5.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[96],{149:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return s})),t.d(n,"metadata",(function(){return o})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return u}));var r=t(2),a=t(6),i=(t(0),t(292)),s={title:"Table / Filter"},o={unversionedId:"examples/table-filter",id:"examples/table-filter",isDocsHomePage:!1,title:"Table / Filter",description:"Enable filtering values for specific columns.",source:"@site/docs/examples/table-filter.md",slug:"/examples/table-filter",permalink:"/wave/docs/examples/table-filter",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/table-filter.md",version:"current",sidebar:"someSidebar",previous:{title:"Table / Search",permalink:"/wave/docs/examples/table-search"},next:{title:"Table / Filter / Backend",permalink:"/wave/docs/examples/table-filter-backend"}},l=[],c={rightToc:l};function u(e){var n=e.components,s=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(r.a)({},c,s,{components:n,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Enable filtering values for specific columns."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+t(367).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import random\nfrom faker import Faker\nfrom h2o_wave import main, app, Q, ui\n\nfake = Faker()\n\n_id = 0\n\n\nclass Issue:\n    def __init__(self, text: str, status: str, progress: float, icon: str, notifications: str):\n        global _id\n        _id += 1\n        self.id = f'I{_id}'\n        self.text = text\n        self.status = status\n        self.views = 0\n        self.progress = progress\n        self.icon = icon\n        self.notifications = notifications\n\n\n# Create some issues\nissues = [\n    Issue(\n        text=fake.sentence(),\n        status=('Closed' if i % 2 == 0 else 'Open'),\n        progress=random.random(),\n        icon=('BoxCheckmarkSolid' if random.random() > 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\n@app('/demo')\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")))}u.isMDXComponent=!0},292: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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?s(Object(t),!0).forEach((function(n){i(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):s(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=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<i;c++)s[c]=t[c];return a.a.createElement.apply(null,s)}return a.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},367:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/table-filter-ce33da2e8b6fa9d9965683c9017e8662.png"}}]);
\ No newline at end of file
diff --git a/docs/600ae505.d2fbb0a2.js b/docs/600ae505.d2fbb0a2.js
deleted file mode 100644
index 7cfc44d895..0000000000
--- a/docs/600ae505.d2fbb0a2.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[93],{146:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return s})),t.d(n,"metadata",(function(){return o})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return u}));var r=t(2),a=t(6),i=(t(0),t(290)),s={title:"Table / Filter"},o={unversionedId:"examples/table-filter",id:"examples/table-filter",isDocsHomePage:!1,title:"Table / Filter",description:"Enable filtering values for specific columns.",source:"@site/docs/examples/table-filter.md",slug:"/examples/table-filter",permalink:"/wave/docs/examples/table-filter",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/table-filter.md",version:"current",sidebar:"someSidebar",previous:{title:"Table / Search",permalink:"/wave/docs/examples/table-search"},next:{title:"Table / Filter / Backend",permalink:"/wave/docs/examples/table-filter-backend"}},l=[],c={rightToc:l};function u(e){var n=e.components,s=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(r.a)({},c,s,{components:n,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Enable filtering values for specific columns."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+t(362).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import random\nfrom faker import Faker\nfrom h2o_wave import Q, listen, ui\n\nfake = Faker()\n\n_id = 0\n\n\nclass Issue:\n    def __init__(self, text: str, status: str, progress: float, icon: str, notifications: str):\n        global _id\n        _id += 1\n        self.id = f'I{_id}'\n        self.text = text\n        self.status = status\n        self.views = 0\n        self.progress = progress\n        self.icon = icon\n        self.notifications = notifications\n\n\n# Create some issues\nissues = [\n    Issue(\n        text=fake.sentence(),\n        status=('Closed' if i % 2 == 0 else 'Open'),\n        progress=random.random(),\n        icon=('BoxCheckmarkSolid' if random.random() > 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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?s(Object(t),!0).forEach((function(n){i(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):s(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=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<i;c++)s[c]=t[c];return a.a.createElement.apply(null,s)}return a.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},362:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/table-filter-ce33da2e8b6fa9d9965683c9017e8662.png"}}]);
\ No newline at end of file
diff --git a/docs/60759c05.8120de71.js b/docs/60759c05.8120de71.js
deleted file mode 100644
index f7eb944a96..0000000000
--- a/docs/60759c05.8120de71.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[94],{147:function(a){a.exports=JSON.parse('{"allTagsPath":"/wave/blog/tags","slug":"docusaurus","name":"docusaurus","count":3,"permalink":"/wave/blog/tags/docusaurus"}')}}]);
\ No newline at end of file
diff --git a/docs/6264312d.19d2c9b4.js b/docs/6264312d.3911a400.js
similarity index 99%
rename from docs/6264312d.19d2c9b4.js
rename to docs/6264312d.3911a400.js
index 46f2eb5b0a..a9fc57be75 100644
--- a/docs/6264312d.19d2c9b4.js
+++ b/docs/6264312d.3911a400.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[95],{148:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return l})),a.d(t,"metadata",(function(){return c})),a.d(t,"rightToc",(function(){return i})),a.d(t,"default",(function(){return d}));var n=a(2),r=a(6),b=(a(0),a(290)),l={title:"Graphics"},c={unversionedId:"graphics",id:"graphics",isDocsHomePage:!1,title:"Graphics",description:"Wave provides a versatile API for rendering vector graphics (SVG) backed by data buffers.",source:"@site/docs/graphics.md",slug:"/graphics",permalink:"/wave/docs/graphics",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/graphics.md",version:"current",sidebar:"someSidebar",previous:{title:"Plots",permalink:"/wave/docs/plotting"},next:{title:"Security",permalink:"/wave/docs/security"}},i=[{value:"Stages and scenes",id:"stages-and-scenes",children:[]},{value:"Shapes",id:"shapes",children:[]},{value:"Paths",id:"paths",children:[]},{value:"Drawing with paths",id:"drawing-with-paths",children:[{value:"Commands",id:"commands",children:[]}]},{value:"Drawing with a turtle",id:"drawing-with-a-turtle",children:[{value:"Commands",id:"commands-1",children:[]},{value:"Example",id:"example",children:[]}]}],p={rightToc:i};function d(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(b.b)("wrapper",Object(n.a)({},p,a,{components:t,mdxType:"MDXLayout"}),Object(b.b)("p",null,"Wave provides a versatile API for rendering vector graphics (SVG) backed by ",Object(b.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/buffers"}),"data buffers"),"."),Object(b.b)("p",null,"Use the graphics card ",Object(b.b)("a",Object(n.a)({parentName:"p"},{href:"http://localhost:3000/docs/api/ui#graphics_card"}),"ui.graphics_card()")," to render graphics."),Object(b.b)("h2",{id:"stages-and-scenes"},"Stages and scenes"),Object(b.b)("p",null,"The graphics card has two attributes that control how graphics are rendered: ",Object(b.b)("inlineCode",{parentName:"p"},"stage")," and ",Object(b.b)("inlineCode",{parentName:"p"},"scene"),":"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"A stage holds static shapes that are rendered as part of the background (literally, behind the scene)."),Object(b.b)("li",{parentName:"ul"},"A scene holds shapes whose attributes need to be animated (causing a re-render, or, literally, cause a scene).")),Object(b.b)("p",null,"Use ",Object(b.b)("inlineCode",{parentName:"p"},"ui.stage()")," and ",Object(b.b)("inlineCode",{parentName:"p"},"ui.scene()")," to create the stage and the scene:"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"ui.stage()")," creates a packed, static representation of its shapes (recall that the stage is not supposed to change)."),Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"ui.scene()")," declares a data buffer to efficiently update its shapes if changed (recall that the scene is animated).")),Object(b.b)("p",null,"Here's an example that draws a clock with a circular ",Object(b.b)("inlineCode",{parentName:"p"},"face")," placed on the ",Object(b.b)("inlineCode",{parentName:"p"},"stage"),", and ",Object(b.b)("inlineCode",{parentName:"p"},"hour"),", ",Object(b.b)("inlineCode",{parentName:"p"},"min")," and ",Object(b.b)("inlineCode",{parentName:"p"},"sec")," hands placed in the ",Object(b.b)("inlineCode",{parentName:"p"},"scene"),":"),Object(b.b)("pre",null,Object(b.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui, graphics as g\n\npage = site['/demo']\npage['example'] = ui.graphics_card(\n    box='1 1 2 3', view_box='0 0 100 100', width='100%', height='100%',\n    stage=g.stage(\n        face=g.circle(cx='50', cy='50', r='45', fill='#111', stroke_width='2px', stroke='#f55'),\n    ),\n    scene=g.scene(\n        hour=g.rect(x='47.5', y='12.5', width='5', height='40', rx='2.5', fill='#333', stroke='#555'),\n        min=g.rect(x='48.5', y='12.5', width='3', height='40', rx='2', fill='#333', stroke='#555'),\n        sec=g.line(x1='50', y1='50', x2='50', y2='16', stroke='#f55', stroke_width='1px'),\n    ),\n)\n")),Object(b.b)("h2",{id:"shapes"},"Shapes"),Object(b.b)("p",null,"Use drawing functions to add shapes to the stage or scene:"),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}),"Primitive"),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)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#arc"}),"arc()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Circular or annular sector, as in a pie or donut chart")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#circle"}),"circle()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle"}),"Circle"))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#ellipse"}),"ellipse()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse"}),"Ellipse"))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#image"}),"image()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image"}),"Image"))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#line"}),"line()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line"}),"Line"))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#path"}),"path()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path"}),"Path"))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#polygon"}),"polygon()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon"}),"Polygon"))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#polyline"}),"polyline()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline"}),"Polyline"))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#spline"}),"spline()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Curves (including radial curves) using various algorithms: basis, cardinal, smooth, linear, monotone, natural, step.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#rect"}),"rect()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect"}),"Rect"))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#text"}),"text()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text"}),"Text"))))),Object(b.b)("h2",{id:"paths"},"Paths"),Object(b.b)("p",null,"The ",Object(b.b)("inlineCode",{parentName:"p"},"path()")," function is special: it can draw arbitrary shapes. This is because SVG path elements support an attribute called ",Object(b.b)("inlineCode",{parentName:"p"},"d")," which holds drawing commands."),Object(b.b)("p",null,"Here's a path that represents a red square:"),Object(b.b)("pre",null,Object(b.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"g.path(d='m 25 25 h 50 v 50 h -50 z', fill='red')\n")),Object(b.b)("p",null,"The above snippet produces:"),Object(b.b)("pre",null,Object(b.b)("code",Object(n.a)({parentName:"pre"},{className:"language-html"}),"<path d='m 25 25 h 50 v 50 h -50 z' fill='red'/>\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<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?l(Object(a),!0).forEach((function(t){b(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):l(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function i(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},b=Object.keys(e);for(n=0;n<b.length;n++)a=b[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var b=Object.getOwnPropertySymbols(e);for(n=0;n<b.length;n++)a=b[n],t.indexOf(a)>=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<b;p++)l[p]=a[p];return r.a.createElement.apply(null,l)}return r.a.createElement.apply(null,a)}j.displayName="MDXCreateElement"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[97],{150:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return l})),a.d(t,"metadata",(function(){return c})),a.d(t,"rightToc",(function(){return i})),a.d(t,"default",(function(){return d}));var n=a(2),r=a(6),b=(a(0),a(292)),l={title:"Graphics"},c={unversionedId:"graphics",id:"graphics",isDocsHomePage:!1,title:"Graphics",description:"Wave provides a versatile API for rendering vector graphics (SVG) backed by data buffers.",source:"@site/docs/graphics.md",slug:"/graphics",permalink:"/wave/docs/graphics",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/graphics.md",version:"current",sidebar:"someSidebar",previous:{title:"Plots",permalink:"/wave/docs/plotting"},next:{title:"Security",permalink:"/wave/docs/security"}},i=[{value:"Stages and scenes",id:"stages-and-scenes",children:[]},{value:"Shapes",id:"shapes",children:[]},{value:"Paths",id:"paths",children:[]},{value:"Drawing with paths",id:"drawing-with-paths",children:[{value:"Commands",id:"commands",children:[]}]},{value:"Drawing with a turtle",id:"drawing-with-a-turtle",children:[{value:"Commands",id:"commands-1",children:[]},{value:"Example",id:"example",children:[]}]}],p={rightToc:i};function d(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(b.b)("wrapper",Object(n.a)({},p,a,{components:t,mdxType:"MDXLayout"}),Object(b.b)("p",null,"Wave provides a versatile API for rendering vector graphics (SVG) backed by ",Object(b.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/buffers"}),"data buffers"),"."),Object(b.b)("p",null,"Use the graphics card ",Object(b.b)("a",Object(n.a)({parentName:"p"},{href:"http://localhost:3000/docs/api/ui#graphics_card"}),"ui.graphics_card()")," to render graphics."),Object(b.b)("h2",{id:"stages-and-scenes"},"Stages and scenes"),Object(b.b)("p",null,"The graphics card has two attributes that control how graphics are rendered: ",Object(b.b)("inlineCode",{parentName:"p"},"stage")," and ",Object(b.b)("inlineCode",{parentName:"p"},"scene"),":"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"A stage holds static shapes that are rendered as part of the background (literally, behind the scene)."),Object(b.b)("li",{parentName:"ul"},"A scene holds shapes whose attributes need to be animated (causing a re-render, or, literally, cause a scene).")),Object(b.b)("p",null,"Use ",Object(b.b)("inlineCode",{parentName:"p"},"ui.stage()")," and ",Object(b.b)("inlineCode",{parentName:"p"},"ui.scene()")," to create the stage and the scene:"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"ui.stage()")," creates a packed, static representation of its shapes (recall that the stage is not supposed to change)."),Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"ui.scene()")," declares a data buffer to efficiently update its shapes if changed (recall that the scene is animated).")),Object(b.b)("p",null,"Here's an example that draws a clock with a circular ",Object(b.b)("inlineCode",{parentName:"p"},"face")," placed on the ",Object(b.b)("inlineCode",{parentName:"p"},"stage"),", and ",Object(b.b)("inlineCode",{parentName:"p"},"hour"),", ",Object(b.b)("inlineCode",{parentName:"p"},"min")," and ",Object(b.b)("inlineCode",{parentName:"p"},"sec")," hands placed in the ",Object(b.b)("inlineCode",{parentName:"p"},"scene"),":"),Object(b.b)("pre",null,Object(b.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui, graphics as g\n\npage = site['/demo']\npage['example'] = ui.graphics_card(\n    box='1 1 2 3', view_box='0 0 100 100', width='100%', height='100%',\n    stage=g.stage(\n        face=g.circle(cx='50', cy='50', r='45', fill='#111', stroke_width='2px', stroke='#f55'),\n    ),\n    scene=g.scene(\n        hour=g.rect(x='47.5', y='12.5', width='5', height='40', rx='2.5', fill='#333', stroke='#555'),\n        min=g.rect(x='48.5', y='12.5', width='3', height='40', rx='2', fill='#333', stroke='#555'),\n        sec=g.line(x1='50', y1='50', x2='50', y2='16', stroke='#f55', stroke_width='1px'),\n    ),\n)\n")),Object(b.b)("h2",{id:"shapes"},"Shapes"),Object(b.b)("p",null,"Use drawing functions to add shapes to the stage or scene:"),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}),"Primitive"),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)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#arc"}),"arc()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Circular or annular sector, as in a pie or donut chart")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#circle"}),"circle()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle"}),"Circle"))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#ellipse"}),"ellipse()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse"}),"Ellipse"))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#image"}),"image()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image"}),"Image"))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#line"}),"line()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line"}),"Line"))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#path"}),"path()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path"}),"Path"))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#polygon"}),"polygon()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon"}),"Polygon"))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#polyline"}),"polyline()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline"}),"Polyline"))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#spline"}),"spline()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),"Curves (including radial curves) using various algorithms: basis, cardinal, smooth, linear, monotone, natural, step.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#rect"}),"rect()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect"}),"Rect"))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"api/graphics#text"}),"text()")),Object(b.b)("td",Object(n.a)({parentName:"tr"},{align:null}),Object(b.b)("a",Object(n.a)({parentName:"td"},{href:"https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text"}),"Text"))))),Object(b.b)("h2",{id:"paths"},"Paths"),Object(b.b)("p",null,"The ",Object(b.b)("inlineCode",{parentName:"p"},"path()")," function is special: it can draw arbitrary shapes. This is because SVG path elements support an attribute called ",Object(b.b)("inlineCode",{parentName:"p"},"d")," which holds drawing commands."),Object(b.b)("p",null,"Here's a path that represents a red square:"),Object(b.b)("pre",null,Object(b.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"g.path(d='m 25 25 h 50 v 50 h -50 z', fill='red')\n")),Object(b.b)("p",null,"The above snippet produces:"),Object(b.b)("pre",null,Object(b.b)("code",Object(n.a)({parentName:"pre"},{className:"language-html"}),"<path d='m 25 25 h 50 v 50 h -50 z' fill='red'/>\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},292: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<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?l(Object(a),!0).forEach((function(t){b(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):l(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function i(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},b=Object.keys(e);for(n=0;n<b.length;n++)a=b[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var b=Object.getOwnPropertySymbols(e);for(n=0;n<b.length;n++)a=b[n],t.indexOf(a)>=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<b;p++)l[p]=a[p];return r.a.createElement.apply(null,l)}return r.a.createElement.apply(null,a)}j.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/6405c95c.3af35c12.js b/docs/6405c95c.3af35c12.js
deleted file mode 100644
index b2cbbc95f1..0000000000
--- a/docs/6405c95c.3af35c12.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[96],{149:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return l})),n.d(t,"rightToc",(function(){return i})),n.d(t,"default",(function(){return b}));var r=n(2),a=n(6),o=(n(0),n(290)),c={title:"Realtime Sync"},l={unversionedId:"realtime",id:"realtime",isDocsHomePage:!1,title:"Realtime Sync",description:"Wave's realtime sync feature enables all connected users to see up to date content.",source:"@site/docs/realtime.md",slug:"/realtime",permalink:"/wave/docs/realtime",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/realtime.md",version:"current",sidebar:"someSidebar",previous:{title:"Routing",permalink:"/wave/docs/routing"},next:{title:"Data-binding",permalink:"/wave/docs/expressions"}},i=[],s={rightToc:i};function b(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},s,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Wave's realtime sync feature enables all connected users to see up to date content. "),Object(o.b)("p",null,"Pages created by Wave scripts are automatically synced across all users. "),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"To enable realtime sync in a Wave app, pass the ",Object(o.b)("inlineCode",{parentName:"p"},"mode")," argument to ",Object(o.b)("inlineCode",{parentName:"p"},"listen()"),":"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"mode='broadcast'")," syncs across all users."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"mode='multicast'")," syncs across one user (in other words, all the clients for that user)."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"mode='unicast'")," disables sync. This is the default.")),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py",metastring:"{6}","{6}":!0}),"from h2o_wave import Q, listen, ui\n\nasync def serve(q: Q):\n    pass\n\nlisten('/foo', serve, mode='broadcast')\n")),Object(o.b)("p",null,"If you change the mode, make sure you store run-time state appropriate to the mode. Generally:"),Object(o.b)("table",null,Object(o.b)("thead",{parentName:"table"},Object(o.b)("tr",{parentName:"thead"},Object(o.b)("th",Object(r.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"th"},"mode")),Object(o.b)("th",Object(r.a)({parentName:"tr"},{align:null}),"Store state in"))),Object(o.b)("tbody",{parentName:"table"},Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"broadcast")),Object(o.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"q.app"))),Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"multicast")),Object(o.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"q.user"))),Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"unicast")),Object(o.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"q.client"))))))}b.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 l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;s++)c[s]=n[s];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/6405c95c.cefe993a.js b/docs/6405c95c.cefe993a.js
new file mode 100644
index 0000000000..f919268b02
--- /dev/null
+++ b/docs/6405c95c.cefe993a.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[98],{151:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return l})),n.d(t,"rightToc",(function(){return i})),n.d(t,"default",(function(){return s}));var a=n(2),r=n(6),o=(n(0),n(292)),c={title:"Realtime Sync"},l={unversionedId:"realtime",id:"realtime",isDocsHomePage:!1,title:"Realtime Sync",description:"Wave's realtime sync feature enables all connected users to see up to date content.",source:"@site/docs/realtime.md",slug:"/realtime",permalink:"/wave/docs/realtime",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/realtime.md",version:"current",sidebar:"someSidebar",previous:{title:"Routing",permalink:"/wave/docs/routing"},next:{title:"Background Tasks",permalink:"/wave/docs/background"}},i=[],b={rightToc:i};function s(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},b,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Wave's realtime sync feature enables all connected users to see up to date content. "),Object(o.b)("p",null,"Pages created by Wave scripts are automatically synced across all users. "),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"To enable realtime sync in a Wave app, pass the ",Object(o.b)("inlineCode",{parentName:"p"},"mode")," argument to ",Object(o.b)("inlineCode",{parentName:"p"},"@app()"),":"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"mode='broadcast'")," syncs across all users."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"mode='multicast'")," syncs across one user (in other words, all the clients for that user)."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"mode='unicast'")," disables sync. This is the default.")),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{3}","{3}":!0}),"from h2o_wave import Q, main, app, ui\n\n@app('/foo', mode='broadcast')\nasync def serve(q: Q):\n    pass\n")),Object(o.b)("p",null,"If you change the mode, make sure you store run-time state appropriate to the mode. Generally:"),Object(o.b)("table",null,Object(o.b)("thead",{parentName:"table"},Object(o.b)("tr",{parentName:"thead"},Object(o.b)("th",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"th"},"mode")),Object(o.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Store state in"))),Object(o.b)("tbody",{parentName:"table"},Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"broadcast")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"q.app"))),Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"multicast")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"q.user"))),Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"unicast")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"q.client"))))))}s.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return m}));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 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 l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var b=r.a.createContext({}),s=function(e){var t=r.a.useContext(b),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(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 n=e.components,a=e.mdxType,o=e.originalType,c=e.parentName,b=i(e,["components","mdxType","originalType","parentName"]),p=s(n),d=a,m=p["".concat(c,".").concat(d)]||p[d]||u[d]||o;return n?r.a.createElement(m,l(l({ref:t},b),{},{components:n})):r.a.createElement(m,l({ref:t},b))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){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:a,c[1]=l;for(var b=2;b<o;b++)c[b]=n[b];return r.a.createElement.apply(null,c)}return r.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/649e08dd.1ade093f.js b/docs/649e08dd.a9f770b1.js
similarity index 97%
rename from docs/649e08dd.1ade093f.js
rename to docs/649e08dd.a9f770b1.js
index 71e2461e75..9934b49ac4 100644
--- a/docs/649e08dd.1ade093f.js
+++ b/docs/649e08dd.a9f770b1.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[97],{150:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return o})),a.d(t,"metadata",(function(){return c})),a.d(t,"rightToc",(function(){return l})),a.d(t,"default",(function(){return s}));var n=a(2),r=a(6),i=(a(0),a(290)),o={title:"Data Buffers"},c={unversionedId:"buffers",id:"buffers",isDocsHomePage:!1,title:"Data Buffers",description:"Data buffers are in-memory data structures designed to hold a card's tabular data.",source:"@site/docs/buffers.md",slug:"/buffers",permalink:"/wave/docs/buffers",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/buffers.md",version:"current",sidebar:"someSidebar",previous:{title:"Cards",permalink:"/wave/docs/cards"},next:{title:"Components",permalink:"/wave/docs/components"}},l=[{value:"Cards and buffers",id:"cards-and-buffers",children:[]},{value:"Types of buffers",id:"types-of-buffers",children:[]},{value:"The data function",id:"the-data-function",children:[]},{value:"Buffers in practice",id:"buffers-in-practice",children:[]}],b={rightToc:l};function s(e){var t=e.components,o=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},b,o,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,Object(i.b)("em",{parentName:"p"},"Data buffers")," are in-memory data structures designed to hold a card's tabular data. "),Object(i.b)("p",null,"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. "),Object(i.b)("h2",{id:"cards-and-buffers"},"Cards and buffers"),Object(i.b)("p",null,"Data buffers are tabular data structures containing columns and rows. Different cards utilize data buffers in different ways. For example, the plot in the ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"api/ui#small_series_stat_card"}),"ui.small_series_stat_card()")," uses a data buffer called ",Object(i.b)("inlineCode",{parentName:"p"},"plot_data")," to hold time series data."),Object(i.b)("p",null,Object(i.b)("img",{alt:"CPU Usage",src:a(496).default})),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:"{5-7}","{5-7}":!0}),"card = ui.small_series_stat_card(\n    box=f'1 1 1 1',\n    title='CPU',\n    value='10%',\n    plot_data=data('time usage', -15),\n    plot_category='time',\n    plot_value='usage',\n))\n")),Object(i.b)("p",null,"In the above snippet, ",Object(i.b)("inlineCode",{parentName:"p"},"data('time usage', -15)")," defines a placeholder for a table with two columns (",Object(i.b)("inlineCode",{parentName:"p"},"time")," and ",Object(i.b)("inlineCode",{parentName:"p"},"usage"),") and 15 rows (we'll get to why the ",Object(i.b)("inlineCode",{parentName:"p"},"15")," is negative shortly), and the card's ",Object(i.b)("inlineCode",{parentName:"p"},"plot_category")," and ",Object(i.b)("inlineCode",{parentName:"p"},"plot_value")," point to the two columns ",Object(i.b)("inlineCode",{parentName:"p"},"time")," and ",Object(i.b)("inlineCode",{parentName:"p"},"usage"),", respectively."),Object(i.b)("p",null,"Appending ",Object(i.b)("em",{parentName:"p"},"rows")," (",Object(i.b)("em",{parentName:"p"},"tuples")," or ",Object(i.b)("em",{parentName:"p"},"records"),") to the data buffer make the card plot those rows."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:"{2}","{2}":!0}),"while True:\n    card.plot_data[-1] = [get_time(), get_usage()]\n    time.sleep(1)\n")),Object(i.b)("p",null,"The ",Object(i.b)("inlineCode",{parentName:"p"},"while")," loop above does something like this:"),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"card.plot_data[-1] = ['2020-10-05T02:10:20Z', 42.5]\ncard.plot_data[-1] = ['2020-10-05T02:10:21Z', 43.1]\ncard.plot_data[-1] = ['2020-10-05T02:10:22Z', 39.2]\ncard.plot_data[-1] = ['2020-10-05T02:10:23Z', 38.7]\n")),Object(i.b)("h2",{id:"types-of-buffers"},"Types of buffers"),Object(i.b)("p",null,"There are three types of data buffers:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"Array buffers")," hold tabular data with a fixed number of rows, and allow random access to rows using 0-based integers as keys."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"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."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"Map buffers")," (or dictionary buffers) hold tabular data with a variable number of rows, and allow random access to rows using string keys.")),Object(i.b)("div",{className:"admonition admonition-caution alert alert--warning"},Object(i.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(i.b)("h5",{parentName:"div"},Object(i.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(i.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}),Object(i.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})))),"caution")),Object(i.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(i.b)("p",{parentName:"div"},"Map buffers are convenient to use, but use more memory on the server compared to array buffers and cyclic buffers, so use them sparingly."))),Object(i.b)("h2",{id:"the-data-function"},"The data function"),Object(i.b)("p",null,"Use the ",Object(i.b)("inlineCode",{parentName:"p"},"data()")," function to declare a data buffer. The Wave server uses this declaration to allocate memory for the data buffer."),Object(i.b)("p",null,Object(i.b)("inlineCode",{parentName:"p"},"data()")," takes multiple arguments:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"fields"),": The names of columns, in order; a space-separated string or a list or a tuple (",Object(i.b)("inlineCode",{parentName:"li"},"'foo bar'")," or ",Object(i.b)("inlineCode",{parentName:"li"},"['foo', 'bar']")," or ",Object(i.b)("inlineCode",{parentName:"li"},"('foo', 'bar')"),"."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"size"),": The number of rows to allocate.",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"A positive row count creates an array buffer."),Object(i.b)("li",{parentName:"ul"},"A negative row count creates a cyclic buffer."),Object(i.b)("li",{parentName:"ul"},"A zero row count (or ",Object(i.b)("inlineCode",{parentName:"li"},"None"),") creates a map buffer."))),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"rows"),": A ",Object(i.b)("inlineCode",{parentName:"li"},"dict")," or ",Object(i.b)("inlineCode",{parentName:"li"},"list")," of rows to initialize the data buffer with. Each row can be a list or tuple. ",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"For array or cyclic buffers, pass a list of rows."),Object(i.b)("li",{parentName:"ul"},"For map buffers, pass a dict with strings as keys and rows as values.")))),Object(i.b)("h2",{id:"buffers-in-practice"},"Buffers in practice"),Object(i.b)("p",null,"Declare a 5-row buffer with columns ",Object(i.b)("inlineCode",{parentName:"p"},"donut")," and ",Object(i.b)("inlineCode",{parentName:"p"},"price"),"."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"# Array buffer\nb = data(fields='donut price', size=5)\n\n# Cyclic buffer\nb = data(fields='donut price', size=-5)\n\n# Map buffer\nb = data(fields='donut price')\n")),Object(i.b)("p",null,"Declare and initialize a 5-row buffer with columns ",Object(i.b)("inlineCode",{parentName:"p"},"donut")," and ",Object(i.b)("inlineCode",{parentName:"p"},"price"),"."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"# Array buffer\nb = data(fields='donut price', size=5, rows=[\n    ['cream', 3.99],\n    ['custard', 2.99],\n    ['cinnamon', 2.49],\n    ['sprinkles', 2.49],\n    ['sugar', 1.99],\n])\n\n# Cyclic buffer\nb = data(fields='donut price', size=-5, rows=[\n    ['cream', 3.99],\n    ['custard', 2.99],\n    ['cinnamon', 2.49],\n    ['sprinkles', 2.49],\n    ['sugar', 1.99],\n])\n\n# Map buffer\nb = data(fields='donut price', rows=dict(\n    crm=['cream', 3.99],\n    cst=['custard', 2.99],\n    cin=['cinnamon', 2.49],\n    spr=['sprinkles', 2.49],\n    sug=['sugar', 1.99],\n))\n")),Object(i.b)("p",null,"Modify a buffer row:"),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"# Array buffer\nb[2] = ['cinnamon', 2.99]\n\n# Cyclic buffer\nb[-1] = ['fruit', 2.99] # replaces ['sugar', 1.99]\n\n# Map buffer (the following two forms are equivalent)\nb['cin'] = ['cinnamon', 2.99]\nb.cin = ['cinnamon', 2.99]\n")),Object(i.b)("p",null,"Modify a buffer value:"),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"# Array buffer (the following two forms are equivalent)\nb[2]['price'] = 2.99\nb[2].price = 2.99\n\n# Cyclic buffer (the following two forms are equivalent)\nb[-1]['price'] = 2.99 # last donut on menu now costs 2.99\nb[-1].price = 2.99\n\n# Map buffer (the following three forms are equivalent)\nb['cin']['price'] = 2.99\nb['cin'].price = 2.99\nb.cin.price = 2.99\n")))}s.isMDXComponent=!0},290:function(e,t,a){"use strict";a.d(t,"a",(function(){return u})),a.d(t,"b",(function(){return f}));var n=a(0),r=a.n(n);function i(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(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<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?o(Object(a),!0).forEach((function(t){i(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function l(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=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<i;b++)o[b]=a[b];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,a)}p.displayName="MDXCreateElement"},496:function(e,t,a){"use strict";a.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[99],{152:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return o})),a.d(t,"metadata",(function(){return c})),a.d(t,"rightToc",(function(){return l})),a.d(t,"default",(function(){return s}));var n=a(2),r=a(6),i=(a(0),a(292)),o={title:"Data Buffers"},c={unversionedId:"buffers",id:"buffers",isDocsHomePage:!1,title:"Data Buffers",description:"Data buffers are in-memory data structures designed to hold a card's tabular data.",source:"@site/docs/buffers.md",slug:"/buffers",permalink:"/wave/docs/buffers",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/buffers.md",version:"current",sidebar:"someSidebar",previous:{title:"Cards",permalink:"/wave/docs/cards"},next:{title:"Components",permalink:"/wave/docs/components"}},l=[{value:"Cards and buffers",id:"cards-and-buffers",children:[]},{value:"Types of buffers",id:"types-of-buffers",children:[]},{value:"The data function",id:"the-data-function",children:[]},{value:"Buffers in practice",id:"buffers-in-practice",children:[]}],b={rightToc:l};function s(e){var t=e.components,o=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},b,o,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,Object(i.b)("em",{parentName:"p"},"Data buffers")," are in-memory data structures designed to hold a card's tabular data. "),Object(i.b)("p",null,"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. "),Object(i.b)("h2",{id:"cards-and-buffers"},"Cards and buffers"),Object(i.b)("p",null,"Data buffers are tabular data structures containing columns and rows. Different cards utilize data buffers in different ways. For example, the plot in the ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"api/ui#small_series_stat_card"}),"ui.small_series_stat_card()")," uses a data buffer called ",Object(i.b)("inlineCode",{parentName:"p"},"plot_data")," to hold time series data."),Object(i.b)("p",null,Object(i.b)("img",{alt:"CPU Usage",src:a(504).default})),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:"{5-7}","{5-7}":!0}),"card = ui.small_series_stat_card(\n    box=f'1 1 1 1',\n    title='CPU',\n    value='10%',\n    plot_data=data('time usage', -15),\n    plot_category='time',\n    plot_value='usage',\n))\n")),Object(i.b)("p",null,"In the above snippet, ",Object(i.b)("inlineCode",{parentName:"p"},"data('time usage', -15)")," defines a placeholder for a table with two columns (",Object(i.b)("inlineCode",{parentName:"p"},"time")," and ",Object(i.b)("inlineCode",{parentName:"p"},"usage"),") and 15 rows (we'll get to why the ",Object(i.b)("inlineCode",{parentName:"p"},"15")," is negative shortly), and the card's ",Object(i.b)("inlineCode",{parentName:"p"},"plot_category")," and ",Object(i.b)("inlineCode",{parentName:"p"},"plot_value")," point to the two columns ",Object(i.b)("inlineCode",{parentName:"p"},"time")," and ",Object(i.b)("inlineCode",{parentName:"p"},"usage"),", respectively."),Object(i.b)("p",null,"Appending ",Object(i.b)("em",{parentName:"p"},"rows")," (",Object(i.b)("em",{parentName:"p"},"tuples")," or ",Object(i.b)("em",{parentName:"p"},"records"),") to the data buffer make the card plot those rows."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:"{2}","{2}":!0}),"while True:\n    card.plot_data[-1] = [get_time(), get_usage()]\n    time.sleep(1)\n")),Object(i.b)("p",null,"The ",Object(i.b)("inlineCode",{parentName:"p"},"while")," loop above does something like this:"),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"card.plot_data[-1] = ['2020-10-05T02:10:20Z', 42.5]\ncard.plot_data[-1] = ['2020-10-05T02:10:21Z', 43.1]\ncard.plot_data[-1] = ['2020-10-05T02:10:22Z', 39.2]\ncard.plot_data[-1] = ['2020-10-05T02:10:23Z', 38.7]\n")),Object(i.b)("h2",{id:"types-of-buffers"},"Types of buffers"),Object(i.b)("p",null,"There are three types of data buffers:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"Array buffers")," hold tabular data with a fixed number of rows, and allow random access to rows using 0-based integers as keys."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"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."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"Map buffers")," (or dictionary buffers) hold tabular data with a variable number of rows, and allow random access to rows using string keys.")),Object(i.b)("div",{className:"admonition admonition-caution alert alert--warning"},Object(i.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(i.b)("h5",{parentName:"div"},Object(i.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(i.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}),Object(i.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})))),"caution")),Object(i.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(i.b)("p",{parentName:"div"},"Map buffers are convenient to use, but use more memory on the server compared to array buffers and cyclic buffers, so use them sparingly."))),Object(i.b)("h2",{id:"the-data-function"},"The data function"),Object(i.b)("p",null,"Use the ",Object(i.b)("inlineCode",{parentName:"p"},"data()")," function to declare a data buffer. The Wave server uses this declaration to allocate memory for the data buffer."),Object(i.b)("p",null,Object(i.b)("inlineCode",{parentName:"p"},"data()")," takes multiple arguments:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"fields"),": The names of columns, in order; a space-separated string or a list or a tuple (",Object(i.b)("inlineCode",{parentName:"li"},"'foo bar'")," or ",Object(i.b)("inlineCode",{parentName:"li"},"['foo', 'bar']")," or ",Object(i.b)("inlineCode",{parentName:"li"},"('foo', 'bar')"),"."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"size"),": The number of rows to allocate.",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"A positive row count creates an array buffer."),Object(i.b)("li",{parentName:"ul"},"A negative row count creates a cyclic buffer."),Object(i.b)("li",{parentName:"ul"},"A zero row count (or ",Object(i.b)("inlineCode",{parentName:"li"},"None"),") creates a map buffer."))),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"rows"),": A ",Object(i.b)("inlineCode",{parentName:"li"},"dict")," or ",Object(i.b)("inlineCode",{parentName:"li"},"list")," of rows to initialize the data buffer with. Each row can be a list or tuple. ",Object(i.b)("ul",{parentName:"li"},Object(i.b)("li",{parentName:"ul"},"For array or cyclic buffers, pass a list of rows."),Object(i.b)("li",{parentName:"ul"},"For map buffers, pass a dict with strings as keys and rows as values.")))),Object(i.b)("h2",{id:"buffers-in-practice"},"Buffers in practice"),Object(i.b)("p",null,"Declare a 5-row buffer with columns ",Object(i.b)("inlineCode",{parentName:"p"},"donut")," and ",Object(i.b)("inlineCode",{parentName:"p"},"price"),"."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"# Array buffer\nb = data(fields='donut price', size=5)\n\n# Cyclic buffer\nb = data(fields='donut price', size=-5)\n\n# Map buffer\nb = data(fields='donut price')\n")),Object(i.b)("p",null,"Declare and initialize a 5-row buffer with columns ",Object(i.b)("inlineCode",{parentName:"p"},"donut")," and ",Object(i.b)("inlineCode",{parentName:"p"},"price"),"."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"# Array buffer\nb = data(fields='donut price', size=5, rows=[\n    ['cream', 3.99],\n    ['custard', 2.99],\n    ['cinnamon', 2.49],\n    ['sprinkles', 2.49],\n    ['sugar', 1.99],\n])\n\n# Cyclic buffer\nb = data(fields='donut price', size=-5, rows=[\n    ['cream', 3.99],\n    ['custard', 2.99],\n    ['cinnamon', 2.49],\n    ['sprinkles', 2.49],\n    ['sugar', 1.99],\n])\n\n# Map buffer\nb = data(fields='donut price', rows=dict(\n    crm=['cream', 3.99],\n    cst=['custard', 2.99],\n    cin=['cinnamon', 2.49],\n    spr=['sprinkles', 2.49],\n    sug=['sugar', 1.99],\n))\n")),Object(i.b)("p",null,"Modify a buffer row:"),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"# Array buffer\nb[2] = ['cinnamon', 2.99]\n\n# Cyclic buffer\nb[-1] = ['fruit', 2.99] # replaces ['sugar', 1.99]\n\n# Map buffer (the following two forms are equivalent)\nb['cin'] = ['cinnamon', 2.99]\nb.cin = ['cinnamon', 2.99]\n")),Object(i.b)("p",null,"Modify a buffer value:"),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"# Array buffer (the following two forms are equivalent)\nb[2]['price'] = 2.99\nb[2].price = 2.99\n\n# Cyclic buffer (the following two forms are equivalent)\nb[-1]['price'] = 2.99 # last donut on menu now costs 2.99\nb[-1].price = 2.99\n\n# Map buffer (the following three forms are equivalent)\nb['cin']['price'] = 2.99\nb['cin'].price = 2.99\nb.cin.price = 2.99\n")))}s.isMDXComponent=!0},292:function(e,t,a){"use strict";a.d(t,"a",(function(){return u})),a.d(t,"b",(function(){return f}));var n=a(0),r=a.n(n);function i(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(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<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?o(Object(a),!0).forEach((function(t){i(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function l(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=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<i;b++)o[b]=a[b];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,a)}p.displayName="MDXCreateElement"},504:function(e,t,a){"use strict";a.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/65b8ef03.61b6602a.js b/docs/65b8ef03.61b6602a.js
deleted file mode 100644
index 0f936215e5..0000000000
--- a/docs/65b8ef03.61b6602a.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[98],{151:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return d}));var a=n(2),r=n(6),b=(n(0),n(290)),i={title:"Event Arguments"},c={unversionedId:"arguments",id:"arguments",isDocsHomePage:!1,title:"Event Arguments",description:"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.",source:"@site/docs/arguments.md",slug:"/arguments",permalink:"/wave/docs/arguments",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/arguments.md",version:"current",sidebar:"someSidebar",previous:{title:"Components",permalink:"/wave/docs/components"},next:{title:"State",permalink:"/wave/docs/state"}},l=[{value:"Interpreting arguments",id:"interpreting-arguments",children:[]}],o={rightToc:l};function d(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(b.b)("wrapper",Object(a.a)({},o,n,{components:t,mdxType:"MDXLayout"}),Object(b.b)("p",null,"When a user interacts with ",Object(b.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/components"}),"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 ",Object(b.b)("em",{parentName:"p"},"event arguments"),"."),Object(b.b)("p",null,"The event arguments can be read from ",Object(b.b)("inlineCode",{parentName:"p"},"q.args"),", a read-only dictionary-like object passed to your ",Object(b.b)("inlineCode",{parentName:"p"},"listen()")," handler:"),Object(b.b)("pre",null,Object(b.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{4-6}","{4-6}":!0}),"from h2o_wave import Q, listen\n\nasync def serve(q: Q):\n    print(q.args.foo)\n    print(q.args.bar)\n    print(q.args.qux)\n\nlisten('/foo', serve)\n")),Object(b.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(b.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(b.b)("h5",{parentName:"div"},Object(b.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(b.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(b.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(b.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(b.b)("p",{parentName:"div"},Object(b.b)("inlineCode",{parentName:"p"},"q.args")," is an ",Object(b.b)("a",Object(a.a)({parentName:"p"},{href:"api/core#Expando"}),"Expando")," instance, which means it behaves both like a dictionary and an object: ",Object(b.b)("inlineCode",{parentName:"p"},"q.args['foo']")," is the same as ",Object(b.b)("inlineCode",{parentName:"p"},"q.args.foo"),". ",Object(b.b)("inlineCode",{parentName:"p"},"q.args.foo")," is easier to read."))),Object(b.b)("h2",{id:"interpreting-arguments"},"Interpreting arguments"),Object(b.b)("p",null,"The table below summarizes how to interpret inputs from various components."),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Component"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"If the component is named ",Object(b.b)("inlineCode",{parentName:"th"},"foo"),", the value of ",Object(b.b)("inlineCode",{parentName:"th"},"q.args.foo")," is..."))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.button()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"value")," if provided, else ",Object(b.b)("inlineCode",{parentName:"td"},"True"),".")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.checkbox()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"True")," if checked, ",Object(b.b)("inlineCode",{parentName:"td"},"False")," if unchecked, ",Object(b.b)("inlineCode",{parentName:"td"},"None")," if indeterminate.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.checklist()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"A list of names of all the selected choices (a list of strings).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.choice_group()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"The name of the selected choice (a string).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.color_picker()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"The selected color (a string).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.combobox()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Either the name of the selected choice or the value typed in (a string).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.command()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"data")," if provided, else ",Object(b.b)("inlineCode",{parentName:"td"},"True"),".")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.date_picker()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"The selected date in ",Object(b.b)("inlineCode",{parentName:"td"},"YYYY-MM-DD")," format (a string).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.dropdown()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"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).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.expander()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"True")," if expanded, else ",Object(b.b)("inlineCode",{parentName:"td"},"False"),".")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.file_upload()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"A list of paths to the uploaded files (a list of strings).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.nav_item()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"True")," if clicked.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.picker()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"A list of names of all the selected choices (a list of strings).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.range_slider()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"[min, max]")," (a list of two numbers).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.slider()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"The selected value (a number).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.spinbox()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"The selected value (a number).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.table()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"A list of names of all the selected rows (a list of strings).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.tabs()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"The name of the active tab (a string).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.textbox()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"The value typed in (a string).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.toggle()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"True")," if checked, ",Object(b.b)("inlineCode",{parentName:"td"},"False")," if unchecked.")))))}d.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return s}));var a=n(0),r=n.n(a);function b(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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){b(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},b=Object.keys(e);for(a=0;a<b.length;a++)n=b[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var b=Object.getOwnPropertySymbols(e);for(a=0;a<b.length;a++)n=b[a],t.indexOf(n)>=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<b;o++)i[o]=n[o];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,n)}O.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/65b8ef03.db9d04d0.js b/docs/65b8ef03.db9d04d0.js
new file mode 100644
index 0000000000..bfb243b2f9
--- /dev/null
+++ b/docs/65b8ef03.db9d04d0.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[100],{153:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return d}));var a=n(2),r=n(6),b=(n(0),n(292)),i={title:"Event Arguments"},c={unversionedId:"arguments",id:"arguments",isDocsHomePage:!1,title:"Event Arguments",description:"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.",source:"@site/docs/arguments.md",slug:"/arguments",permalink:"/wave/docs/arguments",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/arguments.md",version:"current",sidebar:"someSidebar",previous:{title:"Components",permalink:"/wave/docs/components"},next:{title:"State",permalink:"/wave/docs/state"}},l=[{value:"Interpreting arguments",id:"interpreting-arguments",children:[]}],o={rightToc:l};function d(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(b.b)("wrapper",Object(a.a)({},o,n,{components:t,mdxType:"MDXLayout"}),Object(b.b)("p",null,"When a user interacts with ",Object(b.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/components"}),"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 ",Object(b.b)("em",{parentName:"p"},"event arguments"),"."),Object(b.b)("p",null,"The event arguments can be read from ",Object(b.b)("inlineCode",{parentName:"p"},"q.args"),", a read-only dictionary-like object passed to your ",Object(b.b)("inlineCode",{parentName:"p"},"@app()")," handler:"),Object(b.b)("pre",null,Object(b.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{5-7}","{5-7}":!0}),"from h2o_wave import Q, main, app\n\n@app('/foo')\nasync def serve(q: Q):\n    print(q.args.foo)\n    print(q.args.bar)\n    print(q.args.qux)\n")),Object(b.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(b.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(b.b)("h5",{parentName:"div"},Object(b.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(b.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(b.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(b.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(b.b)("p",{parentName:"div"},Object(b.b)("inlineCode",{parentName:"p"},"q.args")," is an ",Object(b.b)("a",Object(a.a)({parentName:"p"},{href:"api/core#Expando"}),"Expando")," instance, which means it behaves both like a dictionary and an object: ",Object(b.b)("inlineCode",{parentName:"p"},"q.args['foo']")," is the same as ",Object(b.b)("inlineCode",{parentName:"p"},"q.args.foo"),". ",Object(b.b)("inlineCode",{parentName:"p"},"q.args.foo")," is easier to read."))),Object(b.b)("h2",{id:"interpreting-arguments"},"Interpreting arguments"),Object(b.b)("p",null,"The table below summarizes how to interpret inputs from various components."),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Component"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"If the component is named ",Object(b.b)("inlineCode",{parentName:"th"},"foo"),", the value of ",Object(b.b)("inlineCode",{parentName:"th"},"q.args.foo")," is..."))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.button()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"value")," if provided, else ",Object(b.b)("inlineCode",{parentName:"td"},"True"),".")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.checkbox()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"True")," if checked, ",Object(b.b)("inlineCode",{parentName:"td"},"False")," if unchecked, ",Object(b.b)("inlineCode",{parentName:"td"},"None")," if indeterminate.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.checklist()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"A list of names of all the selected choices (a list of strings).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.choice_group()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"The name of the selected choice (a string).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.color_picker()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"The selected color (a string).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.combobox()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Either the name of the selected choice or the value typed in (a string).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.command()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"data")," if provided, else ",Object(b.b)("inlineCode",{parentName:"td"},"True"),".")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.date_picker()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"The selected date in ",Object(b.b)("inlineCode",{parentName:"td"},"YYYY-MM-DD")," format (a string).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.dropdown()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"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).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.expander()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"True")," if expanded, else ",Object(b.b)("inlineCode",{parentName:"td"},"False"),".")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.file_upload()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"A list of paths to the uploaded files (a list of strings).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.nav_item()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"True")," if clicked.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.picker()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"A list of names of all the selected choices (a list of strings).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.range_slider()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"[min, max]")," (a list of two numbers).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.slider()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"The selected value (a number).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.spinbox()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"The selected value (a number).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.table()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"A list of names of all the selected rows (a list of strings).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.tabs()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"The name of the active tab (a string).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.textbox()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"The value typed in (a string).")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"ui.toggle()")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"True")," if checked, ",Object(b.b)("inlineCode",{parentName:"td"},"False")," if unchecked.")))))}d.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return s}));var a=n(0),r=n.n(a);function b(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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){b(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},b=Object.keys(e);for(a=0;a<b.length;a++)n=b[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var b=Object.getOwnPropertySymbols(e);for(a=0;a<b.length;a++)n=b[a],t.indexOf(n)>=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<b;o++)i[o]=n[o];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,n)}O.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/661410ac.547505c1.js b/docs/661410ac.547505c1.js
deleted file mode 100644
index fb2fedae04..0000000000
--- a/docs/661410ac.547505c1.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[99],{152:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return p}));var a=n(2),r=n(6),o=(n(0),n(290)),i={title:"Tab"},c={unversionedId:"examples/tab",id:"examples/tab",isDocsHomePage:!1,title:"Tab",description:"Use tab cards to display tabs on a page.",source:"@site/docs/examples/tab.md",slug:"/examples/tab",permalink:"/wave/docs/examples/tab",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/tab.md",version:"current",sidebar:"someSidebar",previous:{title:"Toolbar",permalink:"/wave/docs/examples/toolbar"},next:{title:"Tab / Links",permalink:"/wave/docs/examples/tab-link"}},l=[],s={rightToc:l};function p(e){var t=e.components,i=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},s,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use tab cards to display tabs on a page."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(363).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\npage['tabs'] = ui.tab_card(\n    box='1 1 4 1',\n    items=[\n        ui.tab(name='#menu/spam', label='Spam'),\n        ui.tab(name='#menu/ham', label='Ham'),\n        ui.tab(name='#menu/eggs', label='Eggs'),\n        ui.tab(name='#about', label='About'),\n    ],\n)\n\npage.save()\n")))}p.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return A})),n.d(t,"b",(function(){return f}));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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=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<o;s++)i[s]=n[s];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,n)}b.displayName="MDXCreateElement"},363:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/661410ac.d9824032.js b/docs/661410ac.d9824032.js
new file mode 100644
index 0000000000..8ba6218834
--- /dev/null
+++ b/docs/661410ac.d9824032.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[101],{154:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return p}));var a=n(2),r=n(6),o=(n(0),n(292)),i={title:"Tab"},c={unversionedId:"examples/tab",id:"examples/tab",isDocsHomePage:!1,title:"Tab",description:"Use tab cards to display tabs on a page.",source:"@site/docs/examples/tab.md",slug:"/examples/tab",permalink:"/wave/docs/examples/tab",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/tab.md",version:"current",sidebar:"someSidebar",previous:{title:"Toolbar",permalink:"/wave/docs/examples/toolbar"},next:{title:"Tab / Links",permalink:"/wave/docs/examples/tab-link"}},l=[],s={rightToc:l};function p(e){var t=e.components,i=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},s,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use tab cards to display tabs on a page."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(368).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\npage['tabs'] = ui.tab_card(\n    box='1 1 4 1',\n    items=[\n        ui.tab(name='#menu/spam', label='Spam'),\n        ui.tab(name='#menu/ham', label='Ham'),\n        ui.tab(name='#menu/eggs', label='Eggs'),\n        ui.tab(name='#about', label='About'),\n    ],\n)\n\npage.save()\n")))}p.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return A})),n.d(t,"b",(function(){return f}));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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=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<o;s++)i[s]=n[s];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,n)}b.displayName="MDXCreateElement"},368:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/6875c492.eeb898c4.js b/docs/6875c492.0137459c.js
similarity index 77%
rename from docs/6875c492.eeb898c4.js
rename to docs/6875c492.0137459c.js
index 40460d15ab..2a642a9196 100644
--- a/docs/6875c492.eeb898c4.js
+++ b/docs/6875c492.0137459c.js
@@ -1 +1 @@
-(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
+(window.webpackJsonp=window.webpackJsonp||[]).push([[102],{155:function(e,a,t){"use strict";t.r(a);var n=t(0),l=t.n(n),r=t(297),c=t(369),m=t(295);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.adf07d09.js b/docs/692ea9bc.12fddb0c.js
similarity index 93%
rename from docs/692ea9bc.adf07d09.js
rename to docs/692ea9bc.12fddb0c.js
index 18d45ac36c..40540aa4cc 100644
--- a/docs/692ea9bc.adf07d09.js
+++ b/docs/692ea9bc.12fddb0c.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(290)),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(365).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},290: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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,a,n=function(e,t){if(null==e)return{};var r,a,n={},o=Object.keys(e);for(a=0;a<o.length;a++)r=o[a],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)r=o[a],t.indexOf(r)>=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<o;s++)i[s]=r[s];return n.a.createElement.apply(null,i)}return n.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},365:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/stat-large-bar-e578fa2ed742b2a1b9eb9ff52d50c476.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[103],{157: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(292)),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(370).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},292: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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,a,n=function(e,t){if(null==e)return{};var r,a,n={},o=Object.keys(e);for(a=0;a<o.length;a++)r=o[a],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)r=o[a],t.indexOf(r)>=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<o;s++)i[s]=r[s];return n.a.createElement.apply(null,i)}return n.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},370:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/stat-large-bar-e578fa2ed742b2a1b9eb9ff52d50c476.png"}}]);
\ No newline at end of file
diff --git a/docs/6c3eb428.f53f077a.js b/docs/6c3eb428.d37e8fa8.js
similarity index 92%
rename from docs/6c3eb428.f53f077a.js
rename to docs/6c3eb428.d37e8fa8.js
index b1b582e732..8b96c2af2e 100644
--- a/docs/6c3eb428.f53f077a.js
+++ b/docs/6c3eb428.d37e8fa8.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[102],{156: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 c})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(290)),i={title:"Plot / Line / Labels"},l={unversionedId:"examples/plot-line-labels",id:"examples/plot-line-labels",isDocsHomePage:!1,title:"Plot / Line / Labels",description:"Add labels to a line plot.",source:"@site/docs/examples/plot-line-labels.md",slug:"/examples/plot-line-labels",permalink:"/wave/docs/examples/plot-line-labels",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line-labels.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Line / Step / Before",permalink:"/wave/docs/examples/plot-step-before"},next:{title:"Plot / Line / Labels/ Stroked",permalink:"/wave/docs/examples/plot-line-labels-stroked"}},c=[],p={rightToc:c};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Add labels to a line plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(366).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='Labels',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0,\n                          label='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}')])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return d}));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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},366:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-line-labels-f98b2fc53482efef18cf834fcd851704.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[104],{158: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 c})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(292)),i={title:"Plot / Line / Labels"},l={unversionedId:"examples/plot-line-labels",id:"examples/plot-line-labels",isDocsHomePage:!1,title:"Plot / Line / Labels",description:"Add labels to a line plot.",source:"@site/docs/examples/plot-line-labels.md",slug:"/examples/plot-line-labels",permalink:"/wave/docs/examples/plot-line-labels",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line-labels.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Line / Step / Before",permalink:"/wave/docs/examples/plot-step-before"},next:{title:"Plot / Line / Labels/ Stroked",permalink:"/wave/docs/examples/plot-line-labels-stroked"}},c=[],p={rightToc:c};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Add labels to a line plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(371).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='Labels',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0,\n                          label='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}')])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return d}));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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},371:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-line-labels-f98b2fc53482efef18cf834fcd851704.png"}}]);
\ No newline at end of file
diff --git a/docs/6ce0e474.25ff7e23.js b/docs/6ce0e474.ce87120c.js
similarity index 93%
rename from docs/6ce0e474.25ff7e23.js
rename to docs/6ce0e474.ce87120c.js
index 17d66f8a14..adcd230dbd 100644
--- a/docs/6ce0e474.25ff7e23.js
+++ b/docs/6ce0e474.ce87120c.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[103],{157:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return o})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return s})),r.d(t,"default",(function(){return l}));var n=r(2),a=r(6),c=(r(0),r(290)),o={title:"Graphics / Clock"},i={unversionedId:"examples/graphics-clock",id:"examples/graphics-clock",isDocsHomePage:!1,title:"Graphics / Clock",description:"Use the graphics API to make a clock.",source:"@site/docs/examples/graphics-clock.md",slug:"/examples/graphics-clock",permalink:"/wave/docs/examples/graphics-clock",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-clock.md",version:"current",sidebar:"someSidebar",previous:{title:"Graphics / Spline",permalink:"/wave/docs/examples/graphics-spline"},next:{title:"Graphics / Path",permalink:"/wave/docs/examples/graphics-path"}},s=[],p={rightToc:s};function l(e){var t=e.components,o=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(n.a)({},p,o,{components:t,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Use the graphics API to make a clock.\nSource: ",Object(c.b)("a",Object(n.a)({parentName:"p"},{href:"https://codepen.io/dudleystorey/pen/HLBki"}),"https://codepen.io/dudleystorey/pen/HLBki")),Object(c.b)("div",{className:"cover",style:{backgroundImage:"url("+r(367).default+")"}}),Object(c.b)("pre",null,Object(c.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"import time\nimport datetime\nfrom h2o_wave import site, ui, graphics as g\n\npage = site['/demo']\npage['example'] = ui.graphics_card(\n    box='1 1 2 3', view_box='0 0 100 100', width='100%', height='100%',\n    stage=g.stage(\n        face=g.circle(cx='50', cy='50', r='45', fill='#111', stroke_width='2px', stroke='#f55'),\n    ),\n    scene=g.scene(\n        hour=g.rect(x='47.5', y='12.5', width='5', height='40', rx='2.5', fill='#333', stroke='#555'),\n        min=g.rect(x='48.5', y='12.5', width='3', height='40', rx='2', fill='#333', stroke='#555'),\n        sec=g.line(x1='50', y1='50', x2='50', y2='16', stroke='#f55', stroke_width='1px'),\n    ),\n)\n\npage.save()\n\n\ndef rotate(deg): return f'rotate({deg} 50 50)'\n\n\nscene = page['example'].scene\nwhile True:\n    time.sleep(1)\n    now = datetime.datetime.now()\n    g.draw(scene.hour, transform=rotate(30 * (now.hour % 12) + now.minute / 2))\n    g.draw(scene.min, transform=rotate(6 * now.minute))\n    g.draw(scene.sec, transform=rotate(6 * now.second))\n    page.save()\n")))}l.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return f}));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 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 i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function s(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},c=Object.keys(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=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<c;p++)o[p]=r[p];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},367:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/graphics-clock-fb82cce5ac3fca365e9cd43ba116c948.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[105],{159:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return o})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return s})),r.d(t,"default",(function(){return l}));var n=r(2),a=r(6),c=(r(0),r(292)),o={title:"Graphics / Clock"},i={unversionedId:"examples/graphics-clock",id:"examples/graphics-clock",isDocsHomePage:!1,title:"Graphics / Clock",description:"Use the graphics API to make a clock.",source:"@site/docs/examples/graphics-clock.md",slug:"/examples/graphics-clock",permalink:"/wave/docs/examples/graphics-clock",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-clock.md",version:"current",sidebar:"someSidebar",previous:{title:"Graphics / Spline",permalink:"/wave/docs/examples/graphics-spline"},next:{title:"Graphics / Path",permalink:"/wave/docs/examples/graphics-path"}},s=[],p={rightToc:s};function l(e){var t=e.components,o=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(n.a)({},p,o,{components:t,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Use the graphics API to make a clock.\nSource: ",Object(c.b)("a",Object(n.a)({parentName:"p"},{href:"https://codepen.io/dudleystorey/pen/HLBki"}),"https://codepen.io/dudleystorey/pen/HLBki")),Object(c.b)("div",{className:"cover",style:{backgroundImage:"url("+r(372).default+")"}}),Object(c.b)("pre",null,Object(c.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"import time\nimport datetime\nfrom h2o_wave import site, ui, graphics as g\n\npage = site['/demo']\npage['example'] = ui.graphics_card(\n    box='1 1 2 3', view_box='0 0 100 100', width='100%', height='100%',\n    stage=g.stage(\n        face=g.circle(cx='50', cy='50', r='45', fill='#111', stroke_width='2px', stroke='#f55'),\n    ),\n    scene=g.scene(\n        hour=g.rect(x='47.5', y='12.5', width='5', height='40', rx='2.5', fill='#333', stroke='#555'),\n        min=g.rect(x='48.5', y='12.5', width='3', height='40', rx='2', fill='#333', stroke='#555'),\n        sec=g.line(x1='50', y1='50', x2='50', y2='16', stroke='#f55', stroke_width='1px'),\n    ),\n)\n\npage.save()\n\n\ndef rotate(deg): return f'rotate({deg} 50 50)'\n\n\nscene = page['example'].scene\nwhile True:\n    time.sleep(1)\n    now = datetime.datetime.now()\n    g.draw(scene.hour, transform=rotate(30 * (now.hour % 12) + now.minute / 2))\n    g.draw(scene.min, transform=rotate(6 * now.minute))\n    g.draw(scene.sec, transform=rotate(6 * now.second))\n    page.save()\n")))}l.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return f}));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 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 i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function s(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},c=Object.keys(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=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<c;p++)o[p]=r[p];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},372:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/graphics-clock-fb82cce5ac3fca365e9cd43ba116c948.png"}}]);
\ No newline at end of file
diff --git a/docs/6d36af6b.02a6634d.js b/docs/6d36af6b.55a53883.js
similarity index 97%
rename from docs/6d36af6b.02a6634d.js
rename to docs/6d36af6b.55a53883.js
index f9cd1c6d3e..65cf25c606 100644
--- a/docs/6d36af6b.02a6634d.js
+++ b/docs/6d36af6b.55a53883.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[104],{158:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return s})),t.d(n,"metadata",(function(){return o})),t.d(n,"rightToc",(function(){return c})),t.d(n,"default",(function(){return p}));var r=t(2),i=t(6),a=(t(0),t(290)),s={title:"Markup"},o={unversionedId:"examples/markup",id:"examples/markup",isDocsHomePage:!1,title:"Markup",description:"Use a markup card to display formatted content using HTML.",source:"@site/docs/examples/markup.md",slug:"/examples/markup",permalink:"/wave/docs/examples/markup",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/markup.md",version:"current",sidebar:"someSidebar",previous:{title:"Markdown / Data",permalink:"/wave/docs/examples/markdown-data"},next:{title:"Nav",permalink:"/wave/docs/examples/nav"}},c=[],l={rightToc:c};function p(e){var n=e.components,s=Object(i.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},l,s,{components:n,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use a markup card to display formatted content using HTML."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+t(368).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\nmenu = '''\n<ol>\n    <li>Spam</li>\n    <li>Ham</li>\n    <li>Eggs</li>\n</ol>\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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?s(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):s(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function c(e,n){if(null==e)return{};var t,r,i=function(e,n){if(null==e)return{};var t,r,i={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(i[t]=e[t]);return i}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=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<a;l++)s[l]=t[l];return i.a.createElement.apply(null,s)}return i.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},368:function(e,n,t){"use strict";t.r(n),n.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[106],{160:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return s})),t.d(n,"metadata",(function(){return o})),t.d(n,"rightToc",(function(){return c})),t.d(n,"default",(function(){return p}));var r=t(2),i=t(6),a=(t(0),t(292)),s={title:"Markup"},o={unversionedId:"examples/markup",id:"examples/markup",isDocsHomePage:!1,title:"Markup",description:"Use a markup card to display formatted content using HTML.",source:"@site/docs/examples/markup.md",slug:"/examples/markup",permalink:"/wave/docs/examples/markup",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/markup.md",version:"current",sidebar:"someSidebar",previous:{title:"Markdown / Data",permalink:"/wave/docs/examples/markdown-data"},next:{title:"Nav",permalink:"/wave/docs/examples/nav"}},c=[],l={rightToc:c};function p(e){var n=e.components,s=Object(i.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},l,s,{components:n,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use a markup card to display formatted content using HTML."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+t(373).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\nmenu = '''\n<ol>\n    <li>Spam</li>\n    <li>Ham</li>\n    <li>Eggs</li>\n</ol>\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},292: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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?s(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):s(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function c(e,n){if(null==e)return{};var t,r,i=function(e,n){if(null==e)return{};var t,r,i={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(i[t]=e[t]);return i}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=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<a;l++)s[l]=t[l];return i.a.createElement.apply(null,s)}return i.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},373:function(e,n,t){"use strict";t.r(n),n.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/6eb0e506.5f6ca2bf.js b/docs/6eb0e506.5f6ca2bf.js
deleted file mode 100644
index cf296e7470..0000000000
--- a/docs/6eb0e506.5f6ca2bf.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[105],{159:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return s})),t.d(n,"metadata",(function(){return i})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return c}));var r=t(2),a=t(6),o=(t(0),t(290)),s={title:"Table / Group by"},i={unversionedId:"examples/table-groupby",id:"examples/table-groupby",isDocsHomePage:!1,title:"Table / Group by",description:"Allow grouping a table by column values.",source:"@site/docs/examples/table-groupby.md",slug:"/examples/table-groupby",permalink:"/wave/docs/examples/table-groupby",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/table-groupby.md",version:"current",sidebar:"someSidebar",previous:{title:"Table / Download",permalink:"/wave/docs/examples/table-download"},next:{title:"Table / Preselection",permalink:"/wave/docs/examples/table-select"}},l=[],u={rightToc:l};function c(e){var n=e.components,s=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},u,s,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Allow grouping a table by column values."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(369).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import random\nfrom faker import Faker\nfrom h2o_wave import Q, listen, ui\n\nfake = Faker()\n\n_id = 0\n\n\nclass Issue:\n    def __init__(self, text: str, status: str, progress: float, icon: str, notifications: str):\n        global _id\n        _id += 1\n        self.id = f'I{_id}'\n        self.text = text\n        self.status = status\n        self.views = 0\n        self.progress = progress\n        self.icon = icon\n        self.notifications = notifications\n\n\n# Create some issues\nissues = [\n    Issue(\n        text=fake.sentence(),\n        status=('Closed' if i % 2 == 0 else 'Open'),\n        progress=random.random(),\n        icon=('BoxCheckmarkSolid' if random.random() > 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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?s(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):s(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=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<o;u++)s[u]=t[u];return a.a.createElement.apply(null,s)}return a.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},369:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/table-groupby-8a15ae0b2ea905a6961c5783aebe43c5.png"}}]);
\ No newline at end of file
diff --git a/docs/6eb0e506.abebf02f.js b/docs/6eb0e506.abebf02f.js
new file mode 100644
index 0000000000..18d76d2be8
--- /dev/null
+++ b/docs/6eb0e506.abebf02f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[107],{161:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return s})),t.d(n,"metadata",(function(){return i})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return c}));var r=t(2),a=t(6),o=(t(0),t(292)),s={title:"Table / Group by"},i={unversionedId:"examples/table-groupby",id:"examples/table-groupby",isDocsHomePage:!1,title:"Table / Group by",description:"Allow grouping a table by column values.",source:"@site/docs/examples/table-groupby.md",slug:"/examples/table-groupby",permalink:"/wave/docs/examples/table-groupby",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/table-groupby.md",version:"current",sidebar:"someSidebar",previous:{title:"Table / Download",permalink:"/wave/docs/examples/table-download"},next:{title:"Table / Preselection",permalink:"/wave/docs/examples/table-select"}},l=[],u={rightToc:l};function c(e){var n=e.components,s=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},u,s,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Allow grouping a table by column values."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(374).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import random\nfrom faker import Faker\nfrom h2o_wave import main, app, Q, ui\n\nfake = Faker()\n\n_id = 0\n\n\nclass Issue:\n    def __init__(self, text: str, status: str, progress: float, icon: str, notifications: str):\n        global _id\n        _id += 1\n        self.id = f'I{_id}'\n        self.text = text\n        self.status = status\n        self.views = 0\n        self.progress = progress\n        self.icon = icon\n        self.notifications = notifications\n\n\n# Create some issues\nissues = [\n    Issue(\n        text=fake.sentence(),\n        status=('Closed' if i % 2 == 0 else 'Open'),\n        progress=random.random(),\n        icon=('BoxCheckmarkSolid' if random.random() > 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\n@app('/demo')\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")))}c.isMDXComponent=!0},292: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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?s(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):s(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=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<o;u++)s[u]=t[u];return a.a.createElement.apply(null,s)}return a.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},374:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/table-groupby-8a15ae0b2ea905a6961c5783aebe43c5.png"}}]);
\ No newline at end of file
diff --git a/docs/6ee3bac7.4e8e6b97.js b/docs/6ee3bac7.80ea67bd.js
similarity index 98%
rename from docs/6ee3bac7.4e8e6b97.js
rename to docs/6ee3bac7.80ea67bd.js
index ba12db100a..849ee21a7a 100644
--- a/docs/6ee3bac7.4e8e6b97.js
+++ b/docs/6ee3bac7.80ea67bd.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[106],{160:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return o})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return s}));var a=n(2),i=n(6),r=(n(0),n(290)),c={title:"Basic Concepts",slug:"/enterprise/basic-concepts"},o={unversionedId:"enterprise/basic-concepts",id:"enterprise/basic-concepts",isDocsHomePage:!1,title:"Basic Concepts",description:"H2O AI Cloud platform recognizes three actors:",source:"@site/docs/enterprise/basic-concepts.md",slug:"/enterprise/basic-concepts",permalink:"/wave/docs/enterprise/basic-concepts",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/enterprise/basic-concepts.md",version:"current",sidebar:"someSidebar",previous:{title:"Introduction",permalink:"/wave/docs/enterprise/"},next:{title:"Developer Guide",permalink:"/wave/docs/enterprise/developer-guide"}},l=[{value:"App",id:"app",children:[]},{value:"App Instance",id:"app-instance",children:[]},{value:"Authorization",id:"authorization",children:[{value:"App Access Authorization",id:"app-access-authorization",children:[]},{value:"Instance Access Authorization",id:"instance-access-authorization",children:[]}]}],p={rightToc:l};function s(e){var t=e.components,n=Object(i.a)(e,["components"]);return Object(r.b)("wrapper",Object(a.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(r.b)("p",null,"H2O AI Cloud platform recognizes three actors:"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"App Developer"),": creates and publishes apps"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"App User"),": browses and runs apps"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"Admin"),": manages the platform")),Object(r.b)("p",null,"over two resource types:"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"App"),": runnable Wave app package"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"App instance"),": running instane of an app")),Object(r.b)("h2",{id:"app"},"App"),Object(r.b)("p",null,"App is a runnable Wave app package with metadata, such as (grouped into categories):"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"Identity",Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},"a unique name and version identifier"))),Object(r.b)("li",{parentName:"ul"},"Display/search",Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},"a title and description"),Object(r.b)("li",{parentName:"ul"},"icon and screenshots"),Object(r.b)("li",{parentName:"ul"},"search category and keywords"))),Object(r.b)("li",{parentName:"ul"},"Authorization",Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},"owner (e.g., the person who imported it into H2O AI Cloud)"),Object(r.b)("li",{parentName:"ul"},"visibility (",Object(r.b)("inlineCode",{parentName:"li"},"PRIVATE"),", ",Object(r.b)("inlineCode",{parentName:"li"},"ALL_USERS"),")"))),Object(r.b)("li",{parentName:"ul"},"Runtime",Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},"RAM/disk requirements"),Object(r.b)("li",{parentName:"ul"},"other runtime settings (e.g., pointers to dependencies and secrets to be injected at startup time)")))),Object(r.b)("p",null,"Users can start/run multiple instances of each app (subject to authorization, see below)."),Object(r.b)("p",null,"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)("div",{className:"admonition admonition-note alert alert--secondary"},Object(r.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(r.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(r.b)("path",Object(a.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(a.a)({parentName:"div"},{className:"admonition-content"}),Object(r.b)("p",{parentName:"div"},"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)("h2",{id:"app-instance"},"App Instance"),Object(r.b)("p",null,"App instance is a running instance of an app wit the following metadata:"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"pointer to the corresponding app"),Object(r.b)("li",{parentName:"ul"},"owner (the person who started it)"),Object(r.b)("li",{parentName:"ul"},"visibility (",Object(r.b)("inlineCode",{parentName:"li"},"PRIVATE"),", ",Object(r.b)("inlineCode",{parentName:"li"},"ALL_USERS"),", ",Object(r.b)("inlineCode",{parentName:"li"},"PUBLIC"),")")),Object(r.b)("p",null,"H2O AI Cloud fully manages the app instance lifecycle on behalf of its users."),Object(r.b)("p",null,"Instances can be stateless or stateful (depending on the app configuration)\nand can use external dependencies (e.g., AWS S3, Driverless AI)."),Object(r.b)("p",null,"Under the hood, each instance consists of several k8s resources, specifically, each instance is running in its\nown k8s ",Object(r.b)("inlineCode",{parentName:"p"},"pod"),", under its own k8s ",Object(r.b)("inlineCode",{parentName:"p"},"service"),", accessible via a H2O AI Cloud subdomain (e.g., ",Object(r.b)("inlineCode",{parentName:"p"},"https://1234.wave.h2o.ai"),").\nIt can optionally include other resources, such as PVCs, Configmaps, etc."),Object(r.b)("h2",{id:"authorization"},"Authorization"),Object(r.b)("h3",{id:"app-access-authorization"},"App Access Authorization"),Object(r.b)("p",null,"Access to apps is governed by the following rules:"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"PRIVATE")," apps are only visible to/runnable by the owner;\nthese are typically created via ",Object(r.b)("inlineCode",{parentName:"li"},"h2o bundle deploy")),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"ALL_USERS"),' apps are visible to/runnable by all signed-in users; they are also visible on the "Catalog" page;\nthese are typically created via ',Object(r.b)("inlineCode",{parentName:"li"},"h2o bundle import")),Object(r.b)("li",{parentName:"ul"},"App owner can manage (view, update, delete) her apps via ",Object(r.b)("inlineCode",{parentName:"li"},"h2o app ..."),' or via the "My Apps" page.')),Object(r.b)("p",null,"See ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"developer-guide#cli"}),"Developer Guide")," for details on managing apps."),Object(r.b)("h3",{id:"instance-access-authorization"},"Instance Access Authorization"),Object(r.b)("p",null,"Access to app instances is governed by the following rules:"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"PRIVATE")," instances are only visible to the owner and the owner of the corresponding app (the app owner has only read access)"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"ALL_USERS")," instances are visible to all signed-in users"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"PUBLIC")," instances are visible to anyone on the Internet"),Object(r.b)("li",{parentName:"ul"},"Instance owner can manage (view, update, terminate) her instances via ",Object(r.b)("inlineCode",{parentName:"li"},"h2o instance"),' or via the "My instances" page.')),Object(r.b)("p",null,"Note that app/instance visibility can be modified by the owner, e.g., using ",Object(r.b)("inlineCode",{parentName:"p"},"h2o (app|instance) update <id> -v <visibility>"),'\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)."),Object(r.b)("p",null,"See ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"developer-guide#cli"}),"Developer Guide")," for details on manaigng app instance."))}s.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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n,a,i={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=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):o(o({},t),e)),n},b=function(e){var t=s(e.components);return i.a.createElement(p.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,p=l(e,["components","mdxType","originalType","parentName"]),b=s(n),d=a,m=b["".concat(c,".").concat(d)]||b[d]||u[d]||r;return n?i.a.createElement(m,o(o({ref:t},p),{},{components:n})):i.a.createElement(m,o({ref:t},p))}));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 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 p=2;p<r;p++)c[p]=n[p];return i.a.createElement.apply(null,c)}return i.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[108],{162:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return o})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return s}));var a=n(2),i=n(6),r=(n(0),n(292)),c={title:"Basic Concepts",slug:"/enterprise/basic-concepts"},o={unversionedId:"enterprise/basic-concepts",id:"enterprise/basic-concepts",isDocsHomePage:!1,title:"Basic Concepts",description:"H2O AI Cloud platform recognizes three actors:",source:"@site/docs/enterprise/basic-concepts.md",slug:"/enterprise/basic-concepts",permalink:"/wave/docs/enterprise/basic-concepts",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/enterprise/basic-concepts.md",version:"current",sidebar:"someSidebar",previous:{title:"Introduction",permalink:"/wave/docs/enterprise/"},next:{title:"Developer Guide",permalink:"/wave/docs/enterprise/developer-guide"}},l=[{value:"App",id:"app",children:[]},{value:"App Instance",id:"app-instance",children:[]},{value:"Authorization",id:"authorization",children:[{value:"App Access Authorization",id:"app-access-authorization",children:[]},{value:"Instance Access Authorization",id:"instance-access-authorization",children:[]}]}],p={rightToc:l};function s(e){var t=e.components,n=Object(i.a)(e,["components"]);return Object(r.b)("wrapper",Object(a.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(r.b)("p",null,"H2O AI Cloud platform recognizes three actors:"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"App Developer"),": creates and publishes apps"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"App User"),": browses and runs apps"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"Admin"),": manages the platform")),Object(r.b)("p",null,"over two resource types:"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"App"),": runnable Wave app package"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("strong",{parentName:"li"},"App instance"),": running instane of an app")),Object(r.b)("h2",{id:"app"},"App"),Object(r.b)("p",null,"App is a runnable Wave app package with metadata, such as (grouped into categories):"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"Identity",Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},"a unique name and version identifier"))),Object(r.b)("li",{parentName:"ul"},"Display/search",Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},"a title and description"),Object(r.b)("li",{parentName:"ul"},"icon and screenshots"),Object(r.b)("li",{parentName:"ul"},"search category and keywords"))),Object(r.b)("li",{parentName:"ul"},"Authorization",Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},"owner (e.g., the person who imported it into H2O AI Cloud)"),Object(r.b)("li",{parentName:"ul"},"visibility (",Object(r.b)("inlineCode",{parentName:"li"},"PRIVATE"),", ",Object(r.b)("inlineCode",{parentName:"li"},"ALL_USERS"),")"))),Object(r.b)("li",{parentName:"ul"},"Runtime",Object(r.b)("ul",{parentName:"li"},Object(r.b)("li",{parentName:"ul"},"RAM/disk requirements"),Object(r.b)("li",{parentName:"ul"},"other runtime settings (e.g., pointers to dependencies and secrets to be injected at startup time)")))),Object(r.b)("p",null,"Users can start/run multiple instances of each app (subject to authorization, see below)."),Object(r.b)("p",null,"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)("div",{className:"admonition admonition-note alert alert--secondary"},Object(r.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(r.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(r.b)("path",Object(a.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(a.a)({parentName:"div"},{className:"admonition-content"}),Object(r.b)("p",{parentName:"div"},"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)("h2",{id:"app-instance"},"App Instance"),Object(r.b)("p",null,"App instance is a running instance of an app wit the following metadata:"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"pointer to the corresponding app"),Object(r.b)("li",{parentName:"ul"},"owner (the person who started it)"),Object(r.b)("li",{parentName:"ul"},"visibility (",Object(r.b)("inlineCode",{parentName:"li"},"PRIVATE"),", ",Object(r.b)("inlineCode",{parentName:"li"},"ALL_USERS"),", ",Object(r.b)("inlineCode",{parentName:"li"},"PUBLIC"),")")),Object(r.b)("p",null,"H2O AI Cloud fully manages the app instance lifecycle on behalf of its users."),Object(r.b)("p",null,"Instances can be stateless or stateful (depending on the app configuration)\nand can use external dependencies (e.g., AWS S3, Driverless AI)."),Object(r.b)("p",null,"Under the hood, each instance consists of several k8s resources, specifically, each instance is running in its\nown k8s ",Object(r.b)("inlineCode",{parentName:"p"},"pod"),", under its own k8s ",Object(r.b)("inlineCode",{parentName:"p"},"service"),", accessible via a H2O AI Cloud subdomain (e.g., ",Object(r.b)("inlineCode",{parentName:"p"},"https://1234.wave.h2o.ai"),").\nIt can optionally include other resources, such as PVCs, Configmaps, etc."),Object(r.b)("h2",{id:"authorization"},"Authorization"),Object(r.b)("h3",{id:"app-access-authorization"},"App Access Authorization"),Object(r.b)("p",null,"Access to apps is governed by the following rules:"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"PRIVATE")," apps are only visible to/runnable by the owner;\nthese are typically created via ",Object(r.b)("inlineCode",{parentName:"li"},"h2o bundle deploy")),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"ALL_USERS"),' apps are visible to/runnable by all signed-in users; they are also visible on the "Catalog" page;\nthese are typically created via ',Object(r.b)("inlineCode",{parentName:"li"},"h2o bundle import")),Object(r.b)("li",{parentName:"ul"},"App owner can manage (view, update, delete) her apps via ",Object(r.b)("inlineCode",{parentName:"li"},"h2o app ..."),' or via the "My Apps" page.')),Object(r.b)("p",null,"See ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"developer-guide#cli"}),"Developer Guide")," for details on managing apps."),Object(r.b)("h3",{id:"instance-access-authorization"},"Instance Access Authorization"),Object(r.b)("p",null,"Access to app instances is governed by the following rules:"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"PRIVATE")," instances are only visible to the owner and the owner of the corresponding app (the app owner has only read access)"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"ALL_USERS")," instances are visible to all signed-in users"),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"PUBLIC")," instances are visible to anyone on the Internet"),Object(r.b)("li",{parentName:"ul"},"Instance owner can manage (view, update, terminate) her instances via ",Object(r.b)("inlineCode",{parentName:"li"},"h2o instance"),' or via the "My instances" page.')),Object(r.b)("p",null,"Note that app/instance visibility can be modified by the owner, e.g., using ",Object(r.b)("inlineCode",{parentName:"p"},"h2o (app|instance) update <id> -v <visibility>"),'\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)."),Object(r.b)("p",null,"See ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"developer-guide#cli"}),"Developer Guide")," for details on manaigng app instance."))}s.isMDXComponent=!0},292: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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n,a,i={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=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):o(o({},t),e)),n},b=function(e){var t=s(e.components);return i.a.createElement(p.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,p=l(e,["components","mdxType","originalType","parentName"]),b=s(n),d=a,m=b["".concat(c,".").concat(d)]||b[d]||u[d]||r;return n?i.a.createElement(m,o(o({ref:t},p),{},{components:n})):i.a.createElement(m,o({ref:t},p))}));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 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 p=2;p<r;p++)c[p]=n[p];return i.a.createElement.apply(null,c)}return i.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/718f151f.7b4a84aa.js b/docs/718f151f.ce6db67f.js
similarity index 92%
rename from docs/718f151f.7b4a84aa.js
rename to docs/718f151f.ce6db67f.js
index b9b08af97d..49b244a48d 100644
--- a/docs/718f151f.7b4a84aa.js
+++ b/docs/718f151f.ce6db67f.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[107],{161: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 p})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(290)),i={title:"Plot / Area / Smooth"},c={unversionedId:"examples/plot-area-smooth",id:"examples/plot-area-smooth",isDocsHomePage:!1,title:"Plot / Area / Smooth",description:"Make an area plot with a smooth curve.",source:"@site/docs/examples/plot-area-smooth.md",slug:"/examples/plot-area-smooth",permalink:"/wave/docs/examples/plot-area-smooth",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-smooth.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Area / Range",permalink:"/wave/docs/examples/plot-area-range"},next:{title:"Plot / Area / Stacked",permalink:"/wave/docs/examples/plot-area-stacked"}},p=[],l={rightToc:p};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make an area plot with a smooth curve."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(370).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.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='Area, smooth',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='area', x_scale='time', x='=date', y='=price', curve='smooth', y_min=0)])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return d}));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 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 c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;l++)i[l]=r[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},370:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-area-smooth-4826228f8423a45fda33727184111c06.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[109],{163: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 p})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(292)),i={title:"Plot / Area / Smooth"},c={unversionedId:"examples/plot-area-smooth",id:"examples/plot-area-smooth",isDocsHomePage:!1,title:"Plot / Area / Smooth",description:"Make an area plot with a smooth curve.",source:"@site/docs/examples/plot-area-smooth.md",slug:"/examples/plot-area-smooth",permalink:"/wave/docs/examples/plot-area-smooth",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-smooth.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Area / Range",permalink:"/wave/docs/examples/plot-area-range"},next:{title:"Plot / Area / Stacked",permalink:"/wave/docs/examples/plot-area-stacked"}},p=[],l={rightToc:p};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make an area plot with a smooth curve."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(375).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.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='Area, smooth',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='area', x_scale='time', x='=date', y='=price', curve='smooth', y_min=0)])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return d}));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 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 c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;l++)i[l]=r[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},375:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-area-smooth-4826228f8423a45fda33727184111c06.png"}}]);
\ No newline at end of file
diff --git a/docs/746a1919.1c4437c0.js b/docs/746a1919.859c4175.js
similarity index 91%
rename from docs/746a1919.1c4437c0.js
rename to docs/746a1919.859c4175.js
index ef0935e09a..58af62560f 100644
--- a/docs/746a1919.1c4437c0.js
+++ b/docs/746a1919.859c4175.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[108],{162:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return c})),r.d(t,"metadata",(function(){return p})),r.d(t,"rightToc",(function(){return i})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(290)),c={title:"Frame / Path"},p={unversionedId:"examples/frame-path",id:"examples/frame-path",isDocsHomePage:!1,title:"Frame / Path",description:"Use a frame card to display external web pages.",source:"@site/docs/examples/frame-path.md",slug:"/examples/frame-path",permalink:"/wave/docs/examples/frame-path",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/frame-path.md",version:"current",sidebar:"someSidebar",previous:{title:"Frame",permalink:"/wave/docs/examples/frame"},next:{title:"Template",permalink:"/wave/docs/examples/template"}},i=[],l={rightToc:i};function s(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use a frame card to display external web pages."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(371).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\npage['example'] = ui.frame_card(\n    box='1 1 6 5',\n    title='Example',\n    path='https://example.com',\n)\n\npage.save()\n")))}s.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return d}));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 p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function i(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;l++)c[l]=r[l];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},371:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/frame-path-0db07ced544338ad72aef8fed53c931d.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[110],{164:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return c})),r.d(t,"metadata",(function(){return p})),r.d(t,"rightToc",(function(){return i})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(292)),c={title:"Frame / Path"},p={unversionedId:"examples/frame-path",id:"examples/frame-path",isDocsHomePage:!1,title:"Frame / Path",description:"Use a frame card to display external web pages.",source:"@site/docs/examples/frame-path.md",slug:"/examples/frame-path",permalink:"/wave/docs/examples/frame-path",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/frame-path.md",version:"current",sidebar:"someSidebar",previous:{title:"Frame",permalink:"/wave/docs/examples/frame"},next:{title:"Template",permalink:"/wave/docs/examples/template"}},i=[],l={rightToc:i};function s(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use a frame card to display external web pages."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(376).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\npage['example'] = ui.frame_card(\n    box='1 1 6 5',\n    title='Example',\n    path='https://example.com',\n)\n\npage.save()\n")))}s.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return d}));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 p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function i(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;l++)c[l]=r[l];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},376:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/frame-path-0db07ced544338ad72aef8fed53c931d.png"}}]);
\ No newline at end of file
diff --git a/docs/77770fc3.c74574c6.js b/docs/77770fc3.15e246fd.js
similarity index 91%
rename from docs/77770fc3.c74574c6.js
rename to docs/77770fc3.15e246fd.js
index c9e0828e5e..e7011720d4 100644
--- a/docs/77770fc3.c74574c6.js
+++ b/docs/77770fc3.15e246fd.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[109],{163:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return c})),t.d(r,"metadata",(function(){return i})),t.d(r,"rightToc",(function(){return p})),t.d(r,"default",(function(){return s}));var n=t(2),a=t(6),o=(t(0),t(290)),c={title:"Form / Frame / Path"},i={unversionedId:"examples/form-frame-path",id:"examples/form-frame-path",isDocsHomePage:!1,title:"Form / Frame / Path",description:"Use a frame component in a form card to display external web pages.",source:"@site/docs/examples/form-frame-path.md",slug:"/examples/form-frame-path",permalink:"/wave/docs/examples/form-frame-path",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/form-frame-path.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Frame",permalink:"/wave/docs/examples/form-frame"},next:{title:"Form / Menu",permalink:"/wave/docs/examples/form-menu"}},p=[],m={rightToc:p};function s(e){var r=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},m,c,{components:r,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use a frame component in a form card to display external web pages."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(372).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\npage['example'] = ui.form_card(\n    box='1 1 6 5',\n    items=[\n        ui.frame(path='https://example.com', height='400px')\n    ]\n)\n\npage.save()\n")))}s.isMDXComponent=!0},290:function(e,r,t){"use strict";t.d(r,"a",(function(){return l})),t.d(r,"b",(function(){return d}));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 c(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<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?c(Object(t),!0).forEach((function(r){o(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function p(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=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<o;m++)c[m]=t[m];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,t)}f.displayName="MDXCreateElement"},372:function(e,r,t){"use strict";t.r(r),r.default=t.p+"assets/images/form-frame-path-e829e3ff6a85bcc0e461e8c2cb505c32.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[111],{165:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return c})),t.d(r,"metadata",(function(){return i})),t.d(r,"rightToc",(function(){return p})),t.d(r,"default",(function(){return s}));var n=t(2),a=t(6),o=(t(0),t(292)),c={title:"Form / Frame / Path"},i={unversionedId:"examples/form-frame-path",id:"examples/form-frame-path",isDocsHomePage:!1,title:"Form / Frame / Path",description:"Use a frame component in a form card to display external web pages.",source:"@site/docs/examples/form-frame-path.md",slug:"/examples/form-frame-path",permalink:"/wave/docs/examples/form-frame-path",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/form-frame-path.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Frame",permalink:"/wave/docs/examples/form-frame"},next:{title:"Form / Menu",permalink:"/wave/docs/examples/form-menu"}},p=[],m={rightToc:p};function s(e){var r=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},m,c,{components:r,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use a frame component in a form card to display external web pages."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(377).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\npage['example'] = ui.form_card(\n    box='1 1 6 5',\n    items=[\n        ui.frame(path='https://example.com', height='400px')\n    ]\n)\n\npage.save()\n")))}s.isMDXComponent=!0},292:function(e,r,t){"use strict";t.d(r,"a",(function(){return l})),t.d(r,"b",(function(){return d}));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 c(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<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?c(Object(t),!0).forEach((function(r){o(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function p(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=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<o;m++)c[m]=t[m];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,t)}f.displayName="MDXCreateElement"},377:function(e,r,t){"use strict";t.r(r),r.default=t.p+"assets/images/form-frame-path-e829e3ff6a85bcc0e461e8c2cb505c32.png"}}]);
\ No newline at end of file
diff --git a/docs/79d0d182.6ac4f142.js b/docs/79d0d182.ff62555f.js
similarity index 97%
rename from docs/79d0d182.6ac4f142.js
rename to docs/79d0d182.ff62555f.js
index 0d91c96645..63fc057197 100644
--- a/docs/79d0d182.6ac4f142.js
+++ b/docs/79d0d182.ff62555f.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[110],{164:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return o})),r.d(t,"metadata",(function(){return c})),r.d(t,"rightToc",(function(){return l})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),i=(r(0),r(290)),o={title:"Stat / Series / Wide / Area"},c={unversionedId:"examples/stat-wide-series-area",id:"examples/stat-wide-series-area",isDocsHomePage:!1,title:"Stat / Series / Wide / Area",description:"Create a wide stat card displaying a primary value, an auxiliary value and a series plot.",source:"@site/docs/examples/stat-wide-series-area.md",slug:"/examples/stat-wide-series-area",permalink:"/wave/docs/examples/stat-wide-series-area",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-wide-series-area.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Series / Small / Interval",permalink:"/wave/docs/examples/stat-small-series-interval"},next:{title:"Stat / Series / Wide / Interval",permalink:"/wave/docs/examples/stat-wide-series-interval"}},l=[],p={rightToc:l};function s(e){var t=e.components,o=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},p,o,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a series plot."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+r(373).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"import time\n\nfrom faker import Faker\n\nfrom synth import FakeCategoricalSeries\nfrom h2o_wave import site, ui, data\n\npage = site['/demo']\n\ncolors = '$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine'.split()\ncurves = 'linear smooth step step-after step-before'.split()\nfake = Faker()\ncards = []\nfor i in range(len(curves)):\n    f = FakeCategoricalSeries()\n    cat, val, pc = f.next()\n    c = page.add(f'example{i}', ui.wide_series_stat_card(\n        box=f'1 {i + 1} 2 1',\n        title=fake.cryptocurrency_name(),\n        value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n        aux_value='={{intl quux style=\"percent\" minimum_fraction_digits=1 maximum_fraction_digits=1}}',\n        data=dict(qux=val, quux=pc / 100),\n        plot_category='foo',\n        plot_type='area',\n        plot_value='qux',\n        plot_color=colors[i],\n        plot_data=data('foo qux', -15),\n        plot_zero_value=0,\n        plot_curve=curves[i],\n    ))\n    cards.append((f, c))\npage.save()\n\nwhile True:\n    time.sleep(1)\n    for f, c in cards:\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    page.save()\n")))}s.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return d}));var n=r(0),a=r.n(n);function i(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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=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<i;p++)o[p]=r[p];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},373:function(e,t,r){"use strict";r.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[112],{166:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return o})),r.d(t,"metadata",(function(){return c})),r.d(t,"rightToc",(function(){return l})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),i=(r(0),r(292)),o={title:"Stat / Series / Wide / Area"},c={unversionedId:"examples/stat-wide-series-area",id:"examples/stat-wide-series-area",isDocsHomePage:!1,title:"Stat / Series / Wide / Area",description:"Create a wide stat card displaying a primary value, an auxiliary value and a series plot.",source:"@site/docs/examples/stat-wide-series-area.md",slug:"/examples/stat-wide-series-area",permalink:"/wave/docs/examples/stat-wide-series-area",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-wide-series-area.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Series / Small / Interval",permalink:"/wave/docs/examples/stat-small-series-interval"},next:{title:"Stat / Series / Wide / Interval",permalink:"/wave/docs/examples/stat-wide-series-interval"}},l=[],p={rightToc:l};function s(e){var t=e.components,o=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},p,o,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Create a wide stat card displaying a primary value, an auxiliary value and a series plot."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+r(378).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"import time\n\nfrom faker import Faker\n\nfrom synth import FakeCategoricalSeries\nfrom h2o_wave import site, ui, data\n\npage = site['/demo']\n\ncolors = '$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine'.split()\ncurves = 'linear smooth step step-after step-before'.split()\nfake = Faker()\ncards = []\nfor i in range(len(curves)):\n    f = FakeCategoricalSeries()\n    cat, val, pc = f.next()\n    c = page.add(f'example{i}', ui.wide_series_stat_card(\n        box=f'1 {i + 1} 2 1',\n        title=fake.cryptocurrency_name(),\n        value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n        aux_value='={{intl quux style=\"percent\" minimum_fraction_digits=1 maximum_fraction_digits=1}}',\n        data=dict(qux=val, quux=pc / 100),\n        plot_category='foo',\n        plot_type='area',\n        plot_value='qux',\n        plot_color=colors[i],\n        plot_data=data('foo qux', -15),\n        plot_zero_value=0,\n        plot_curve=curves[i],\n    ))\n    cards.append((f, c))\npage.save()\n\nwhile True:\n    time.sleep(1)\n    for f, c in cards:\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    page.save()\n")))}s.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return d}));var n=r(0),a=r.n(n);function i(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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=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<i;p++)o[p]=r[p];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},378:function(e,t,r){"use strict";r.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/7c1cba9e.0a28bb7c.js b/docs/7c1cba9e.0a28bb7c.js
deleted file mode 100644
index a67ab241be..0000000000
--- a/docs/7c1cba9e.0a28bb7c.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[111],{165:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return x})),r.d(t,"rightToc",(function(){return l})),r.d(t,"default",(function(){return u}));var n=r(2),a=r(6),o=(r(0),r(290)),i={title:"Form / Textbox"},x={unversionedId:"examples/textbox",id:"examples/textbox",isDocsHomePage:!1,title:"Form / Textbox",description:"Use a textbox to allow users to provide text inputs.",source:"@site/docs/examples/textbox.md",slug:"/examples/textbox",permalink:"/wave/docs/examples/textbox",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/textbox.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Message Bar",permalink:"/wave/docs/examples/message-bar"},next:{title:"Form / Textbox / Trigger",permalink:"/wave/docs/examples/textbox-trigger"}},l=[],b={rightToc:l};function u(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},b,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use a textbox to allow users to provide text inputs."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(374).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'textbox={q.args.textbox}'),\n            ui.text(f'textbox_disabled={q.args.textbox_disabled}'),\n            ui.text(f'textbox_readonly={q.args.textbox_readonly}'),\n            ui.text(f'textbox_required={q.args.textbox_required}'),\n            ui.text(f'textbox_error={q.args.textbox_error}'),\n            ui.text(f'textbox_mask={q.args.textbox_mask}'),\n            ui.text(f'textbox_icon={q.args.textbox_icon}'),\n            ui.text(f'textbox_prefix={q.args.textbox_prefix}'),\n            ui.text(f'textbox_suffix={q.args.textbox_suffix}'),\n            ui.text(f'textbox_placeholder={q.args.textbox_placeholder}'),\n            ui.text(f'textbox_disabled_placeholder={q.args.textbox_disabled_placeholder}'),\n            ui.text(f'textbox_multiline={q.args.textbox_multiline}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.textbox(name='textbox', label='Standard'),\n            ui.textbox(name='textbox_disabled', label='Disabled', value='I am disabled', disabled=True),\n            ui.textbox(name='textbox_readonly', label='Read-only', value='I am read-only', readonly=True),\n            ui.textbox(name='textbox_required', label='Required', required=True),\n            ui.textbox(name='textbox_error', label='With error message', error='I have an error'),\n            ui.textbox(name='textbox_mask', label='With input mask', mask='(999) 999 - 9999'),\n            ui.textbox(name='textbox_icon', label='With icon', icon='Calendar'),\n            ui.textbox(name='textbox_prefix', label='With prefix', prefix='http://'),\n            ui.textbox(name='textbox_suffix', label='With suffix', suffix='@h2o.ai'),\n            ui.textbox(name='textbox_placeholder', label='With placeholder', placeholder='I need some input'),\n            ui.textbox(name='textbox_disabled_placeholder', label='Disabled with placeholder', disabled=True,\n                       placeholder='I am disabled'),\n            ui.textbox(name='textbox_multiline', label='Multiline textarea', multiline=True),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}u.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return s})),r.d(t,"b",(function(){return d}));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 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 x(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;b++)i[b]=r[b];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}p.displayName="MDXCreateElement"},374:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/textbox-ad4ead8b116b9f18042ba1302cf471c9.png"}}]);
\ No newline at end of file
diff --git a/docs/7c1cba9e.b72820b2.js b/docs/7c1cba9e.b72820b2.js
new file mode 100644
index 0000000000..178ce6c624
--- /dev/null
+++ b/docs/7c1cba9e.b72820b2.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[113],{167:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return x})),r.d(t,"rightToc",(function(){return l})),r.d(t,"default",(function(){return u}));var n=r(2),a=r(6),o=(r(0),r(292)),i={title:"Form / Textbox"},x={unversionedId:"examples/textbox",id:"examples/textbox",isDocsHomePage:!1,title:"Form / Textbox",description:"Use a textbox to allow users to provide text inputs.",source:"@site/docs/examples/textbox.md",slug:"/examples/textbox",permalink:"/wave/docs/examples/textbox",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/textbox.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Message Bar",permalink:"/wave/docs/examples/message-bar"},next:{title:"Form / Textbox / Trigger",permalink:"/wave/docs/examples/textbox-trigger"}},l=[],b={rightToc:l};function u(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},b,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use a textbox to allow users to provide text inputs."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(379).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'textbox={q.args.textbox}'),\n            ui.text(f'textbox_disabled={q.args.textbox_disabled}'),\n            ui.text(f'textbox_readonly={q.args.textbox_readonly}'),\n            ui.text(f'textbox_required={q.args.textbox_required}'),\n            ui.text(f'textbox_error={q.args.textbox_error}'),\n            ui.text(f'textbox_mask={q.args.textbox_mask}'),\n            ui.text(f'textbox_icon={q.args.textbox_icon}'),\n            ui.text(f'textbox_prefix={q.args.textbox_prefix}'),\n            ui.text(f'textbox_suffix={q.args.textbox_suffix}'),\n            ui.text(f'textbox_placeholder={q.args.textbox_placeholder}'),\n            ui.text(f'textbox_disabled_placeholder={q.args.textbox_disabled_placeholder}'),\n            ui.text(f'textbox_multiline={q.args.textbox_multiline}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.textbox(name='textbox', label='Standard'),\n            ui.textbox(name='textbox_disabled', label='Disabled', value='I am disabled', disabled=True),\n            ui.textbox(name='textbox_readonly', label='Read-only', value='I am read-only', readonly=True),\n            ui.textbox(name='textbox_required', label='Required', required=True),\n            ui.textbox(name='textbox_error', label='With error message', error='I have an error'),\n            ui.textbox(name='textbox_mask', label='With input mask', mask='(999) 999 - 9999'),\n            ui.textbox(name='textbox_icon', label='With icon', icon='Calendar'),\n            ui.textbox(name='textbox_prefix', label='With prefix', prefix='http://'),\n            ui.textbox(name='textbox_suffix', label='With suffix', suffix='@h2o.ai'),\n            ui.textbox(name='textbox_placeholder', label='With placeholder', placeholder='I need some input'),\n            ui.textbox(name='textbox_disabled_placeholder', label='Disabled with placeholder', disabled=True,\n                       placeholder='I am disabled'),\n            ui.textbox(name='textbox_multiline', label='Multiline textarea', multiline=True),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n")))}u.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return s})),r.d(t,"b",(function(){return d}));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 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 x(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;b++)i[b]=r[b];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}p.displayName="MDXCreateElement"},379:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/textbox-ad4ead8b116b9f18042ba1302cf471c9.png"}}]);
\ No newline at end of file
diff --git a/docs/7ca2f128.5fa74d4e.js b/docs/7ca2f128.5fa74d4e.js
deleted file mode 100644
index 079ee3868e..0000000000
--- a/docs/7ca2f128.5fa74d4e.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[112],{166:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return i})),t.d(n,"metadata",(function(){return c})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return m}));var a=t(2),r=t(6),o=(t(0),t(290)),i={title:"Form / Menu"},c={unversionedId:"examples/form-menu",id:"examples/form-menu",isDocsHomePage:!1,title:"Form / Menu",description:"Display context menus inside forms.",source:"@site/docs/examples/form-menu.md",slug:"/examples/form-menu",permalink:"/wave/docs/examples/form-menu",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/form-menu.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Frame / Path",permalink:"/wave/docs/examples/form-frame-path"},next:{title:"Form / Template",permalink:"/wave/docs/examples/form-template"}},l=[],s={rightToc:l};function m(e){var n=e.components,i=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},s,i,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Display context menus inside forms."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(375).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"import json\nfrom h2o_wave import Q, listen, ui, data\n\n# Vega lite spec for a bar plot, defaults to linear scale.\nspec_linear_scale = json.dumps(dict(\n    mark='bar',\n    encoding=dict(\n        x=dict(field='a', type='ordinal'),\n        y=dict(field='b', type='quantitative')\n    )\n))\n\n# Vega lite spec for a bar plot, log scaled.\nspec_log_scale = json.dumps(dict(\n    mark='bar',\n    encoding=dict(\n        x=dict(field='a', type='ordinal'),\n        y=dict(field='b', type='quantitative', scale=dict(type='log'))\n    )\n))\n\n# Data for our plot.\nplot_data = data(fields=[\"a\", \"b\"], rows=[\n    [\"A\", 28], [\"B\", 55], [\"C\", 43],\n    [\"D\", 91], [\"E\", 81], [\"F\", 53],\n    [\"G\", 19], [\"H\", 87], [\"I\", 52]\n], pack=True)\n\n# Create a couple of context menu commands.\nlog_scale_command = ui.command(\n    name='to_log_scale',\n    label='Log Scale',\n    icon='LineChart',\n)\nlinear_scale_command = ui.command(\n    name='to_linear_scale',\n    label='Linear Scale',\n    icon='LineChart',\n)\n\n\nasync def serve(q: Q):\n    if q.client.plot_added:  # Have we already added a plot?\n        example = q.page['example']\n        if q.args.to_log_scale:\n            # Change to log scale\n            example.items[0].text_l.content = 'Plot (Log Scale)'\n            example.items[0].text_l.commands = [linear_scale_command]\n            example.items[1].vega_visualization.specification = spec_log_scale\n        else:\n            # Change to linear scale\n            example.items[0].text_l.content = 'Plot (Linear Scale)'\n            example.items[0].text_l.commands = [log_scale_command]\n            example.items[1].vega_visualization.specification = spec_linear_scale\n    else:  # Add a new plot\n        q.page['example'] = ui.form_card(\n            box='1 1 2 8',\n            items=[\n                ui.text_l(content='Plot (Linear Scale)', commands=[log_scale_command]),\n                ui.vega_visualization(specification=spec_linear_scale, data=plot_data, height='300px'),\n            ],\n        )\n        # Flag to indicate that we've added a plot\n        q.client.plot_added = True\n\n    await q.page.save()\n\n\nlisten('/demo', serve)\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 a=t(0),r=t.n(a);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 a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function c(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,a,r=function(e,n){if(null==e)return{};var t,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)t=o[a],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)t=o[a],n.indexOf(t)>=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<o;s++)i[s]=t[s];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,t)}u.displayName="MDXCreateElement"},375:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/form-menu-d7388e52d93d99081c085e2d1baa003d.png"}}]);
\ No newline at end of file
diff --git a/docs/7ca2f128.7cfe34ab.js b/docs/7ca2f128.7cfe34ab.js
new file mode 100644
index 0000000000..6b830cf943
--- /dev/null
+++ b/docs/7ca2f128.7cfe34ab.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[114],{168:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return i})),t.d(n,"metadata",(function(){return c})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return m}));var a=t(2),r=t(6),o=(t(0),t(292)),i={title:"Form / Menu"},c={unversionedId:"examples/form-menu",id:"examples/form-menu",isDocsHomePage:!1,title:"Form / Menu",description:"Display context menus inside forms.",source:"@site/docs/examples/form-menu.md",slug:"/examples/form-menu",permalink:"/wave/docs/examples/form-menu",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/form-menu.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Frame / Path",permalink:"/wave/docs/examples/form-frame-path"},next:{title:"Form / Template",permalink:"/wave/docs/examples/form-template"}},l=[],s={rightToc:l};function m(e){var n=e.components,i=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},s,i,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Display context menus inside forms."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(380).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"import json\nfrom h2o_wave import main, app, Q, ui, data\n\n# Vega lite spec for a bar plot, defaults to linear scale.\nspec_linear_scale = json.dumps(dict(\n    mark='bar',\n    encoding=dict(\n        x=dict(field='a', type='ordinal'),\n        y=dict(field='b', type='quantitative')\n    )\n))\n\n# Vega lite spec for a bar plot, log scaled.\nspec_log_scale = json.dumps(dict(\n    mark='bar',\n    encoding=dict(\n        x=dict(field='a', type='ordinal'),\n        y=dict(field='b', type='quantitative', scale=dict(type='log'))\n    )\n))\n\n# Data for our plot.\nplot_data = data(fields=[\"a\", \"b\"], rows=[\n    [\"A\", 28], [\"B\", 55], [\"C\", 43],\n    [\"D\", 91], [\"E\", 81], [\"F\", 53],\n    [\"G\", 19], [\"H\", 87], [\"I\", 52]\n], pack=True)\n\n# Create a couple of context menu commands.\nlog_scale_command = ui.command(\n    name='to_log_scale',\n    label='Log Scale',\n    icon='LineChart',\n)\nlinear_scale_command = ui.command(\n    name='to_linear_scale',\n    label='Linear Scale',\n    icon='LineChart',\n)\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.client.plot_added:  # Have we already added a plot?\n        example = q.page['example']\n        if q.args.to_log_scale:\n            # Change to log scale\n            example.items[0].text_l.content = 'Plot (Log Scale)'\n            example.items[0].text_l.commands = [linear_scale_command]\n            example.items[1].vega_visualization.specification = spec_log_scale\n        else:\n            # Change to linear scale\n            example.items[0].text_l.content = 'Plot (Linear Scale)'\n            example.items[0].text_l.commands = [log_scale_command]\n            example.items[1].vega_visualization.specification = spec_linear_scale\n    else:  # Add a new plot\n        q.page['example'] = ui.form_card(\n            box='1 1 2 8',\n            items=[\n                ui.text_l(content='Plot (Linear Scale)', commands=[log_scale_command]),\n                ui.vega_visualization(specification=spec_linear_scale, data=plot_data, height='300px'),\n            ],\n        )\n        # Flag to indicate that we've added a plot\n        q.client.plot_added = True\n\n    await q.page.save()\n")))}m.isMDXComponent=!0},292:function(e,n,t){"use strict";t.d(n,"a",(function(){return p})),t.d(n,"b",(function(){return f}));var a=t(0),r=t.n(a);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 a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function c(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,a,r=function(e,n){if(null==e)return{};var t,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)t=o[a],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)t=o[a],n.indexOf(t)>=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<o;s++)i[s]=t[s];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,t)}u.displayName="MDXCreateElement"},380:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/form-menu-d7388e52d93d99081c085e2d1baa003d.png"}}]);
\ No newline at end of file
diff --git a/docs/7d1cd1c9.1f4be8b0.js b/docs/7d1cd1c9.1f4be8b0.js
new file mode 100644
index 0000000000..60a86f5bc3
--- /dev/null
+++ b/docs/7d1cd1c9.1f4be8b0.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[115],{169:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return o})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),c=(n(0),n(292)),i={title:"Form / Checklist"},o={unversionedId:"examples/checklist",id:"examples/checklist",isDocsHomePage:!1,title:"Form / Checklist",description:"Use a checklist to group a set of related checkboxes.",source:"@site/docs/examples/checklist.md",slug:"/examples/checklist",permalink:"/wave/docs/examples/checklist",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/checklist.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Checkbox",permalink:"/wave/docs/examples/checkbox"},next:{title:"Form / Picker",permalink:"/wave/docs/examples/picker"}},p=[],l={rightToc:p};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(r.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Use a checklist to group a set of related checkboxes."),Object(c.b)("div",{className:"cover",style:{backgroundImage:"url("+n(381).default+")"}}),Object(c.b)("pre",null,Object(c.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'selected={q.args.checklist}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.checklist(name='checklist', label='Choices',\n                         choices=[ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']]),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n")))}s.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return m})),n.d(t,"b",(function(){return f}));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 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 o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},c=Object.keys(e);for(r=0;r<c.length;r++)n=c[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r<c.length;r++)n=c[r],t.indexOf(n)>=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<c;l++)i[l]=n[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},381:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/7d1cd1c9.e38b756a.js b/docs/7d1cd1c9.e38b756a.js
deleted file mode 100644
index 27e127fbc8..0000000000
--- a/docs/7d1cd1c9.e38b756a.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[113],{167:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return o})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),c=(n(0),n(290)),i={title:"Form / Checklist"},o={unversionedId:"examples/checklist",id:"examples/checklist",isDocsHomePage:!1,title:"Form / Checklist",description:"Use a checklist to group a set of related checkboxes.",source:"@site/docs/examples/checklist.md",slug:"/examples/checklist",permalink:"/wave/docs/examples/checklist",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/checklist.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Checkbox",permalink:"/wave/docs/examples/checkbox"},next:{title:"Form / Picker",permalink:"/wave/docs/examples/picker"}},p=[],l={rightToc:p};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(r.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Use a checklist to group a set of related checkboxes."),Object(c.b)("div",{className:"cover",style:{backgroundImage:"url("+n(376).default+")"}}),Object(c.b)("pre",null,Object(c.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'selected={q.args.checklist}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.checklist(name='checklist', label='Choices',\n                         choices=[ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']]),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}s.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),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 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 o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},c=Object.keys(e);for(r=0;r<c.length;r++)n=c[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r<c.length;r++)n=c[r],t.indexOf(n)>=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<c;l++)i[l]=n[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},376:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/7d744a8f.e1c95e5b.js b/docs/7d744a8f.a414f615.js
similarity index 92%
rename from docs/7d744a8f.e1c95e5b.js
rename to docs/7d744a8f.a414f615.js
index face109970..653d286d56 100644
--- a/docs/7d744a8f.e1c95e5b.js
+++ b/docs/7d744a8f.a414f615.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[114],{168:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return p})),r.d(t,"rightToc",(function(){return l})),r.d(t,"default",(function(){return u}));var n=r(2),a=r(6),o=(r(0),r(290)),i={title:"Plot / Area + Line / Groups"},p={unversionedId:"examples/plot-area-line-groups",id:"examples/plot-area-line-groups",isDocsHomePage:!1,title:"Plot / Area + Line / Groups",description:"Make an combined area + line plot showing multiple categories.",source:"@site/docs/examples/plot-area-line-groups.md",slug:"/examples/plot-area-line-groups",permalink:"/wave/docs/examples/plot-area-line-groups",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-line-groups.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Area + Line / Smooth",permalink:"/wave/docs/examples/plot-area-line-smooth"},next:{title:"Plot / Polygon",permalink:"/wave/docs/examples/plot-polygon"}},l=[],c={rightToc:l};function u(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},c,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make an combined area + line plot showing multiple categories."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(377).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeMultiTimeSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 50\nf = FakeMultiTimeSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Area + Line, groups',\n    data=data('product date price', n * 5),\n    plot=ui.plot([\n        ui.mark(type='area', x_scale='time', x='=date', y='=price', color='=product', y_min=0),\n        ui.mark(type='line', x='=date', y='=price', color='=product')\n    ])\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")))}u.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return s})),r.d(t,"b",(function(){return f}));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 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 p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;c++)i[c]=r[c];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},377:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-area-line-groups-fab3e454a09ab17afeb08c5bbe20a364.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[116],{170:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return p})),r.d(t,"rightToc",(function(){return l})),r.d(t,"default",(function(){return u}));var n=r(2),a=r(6),o=(r(0),r(292)),i={title:"Plot / Area + Line / Groups"},p={unversionedId:"examples/plot-area-line-groups",id:"examples/plot-area-line-groups",isDocsHomePage:!1,title:"Plot / Area + Line / Groups",description:"Make an combined area + line plot showing multiple categories.",source:"@site/docs/examples/plot-area-line-groups.md",slug:"/examples/plot-area-line-groups",permalink:"/wave/docs/examples/plot-area-line-groups",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-line-groups.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Area + Line / Smooth",permalink:"/wave/docs/examples/plot-area-line-smooth"},next:{title:"Plot / Polygon",permalink:"/wave/docs/examples/plot-polygon"}},l=[],c={rightToc:l};function u(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},c,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make an combined area + line plot showing multiple categories."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(382).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeMultiTimeSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 50\nf = FakeMultiTimeSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Area + Line, groups',\n    data=data('product date price', n * 5),\n    plot=ui.plot([\n        ui.mark(type='area', x_scale='time', x='=date', y='=price', color='=product', y_min=0),\n        ui.mark(type='line', x='=date', y='=price', color='=product')\n    ])\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")))}u.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return s})),r.d(t,"b",(function(){return f}));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 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 p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;c++)i[c]=r[c];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},382:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-area-line-groups-fab3e454a09ab17afeb08c5bbe20a364.png"}}]);
\ No newline at end of file
diff --git a/docs/7ecd2c5c.7cf98df3.js b/docs/7ecd2c5c.9a5da8e4.js
similarity index 94%
rename from docs/7ecd2c5c.7cf98df3.js
rename to docs/7ecd2c5c.9a5da8e4.js
index ba504b3af4..b4170702bc 100644
--- a/docs/7ecd2c5c.7cf98df3.js
+++ b/docs/7ecd2c5c.9a5da8e4.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[115],{169:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return A})),t.d(r,"metadata",(function(){return i})),t.d(r,"rightToc",(function(){return o})),t.d(r,"default",(function(){return l}));var n=t(2),a=t(6),p=(t(0),t(290)),A={title:"Graphics / Path"},i={unversionedId:"examples/graphics-path",id:"examples/graphics-path",isDocsHomePage:!1,title:"Graphics / Path",description:"Use the graphics API to draw a red square.",source:"@site/docs/examples/graphics-path.md",slug:"/examples/graphics-path",permalink:"/wave/docs/examples/graphics-path",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-path.md",version:"current",sidebar:"someSidebar",previous:{title:"Graphics / Clock",permalink:"/wave/docs/examples/graphics-clock"},next:{title:"Graphics / Turtle",permalink:"/wave/docs/examples/graphics-turtle"}},o=[],c={rightToc:o};function l(e){var r=e.components,A=Object(a.a)(e,["components"]);return Object(p.b)("wrapper",Object(n.a)({},c,A,{components:r,mdxType:"MDXLayout"}),Object(p.b)("p",null,"Use the graphics API to draw a red square."),Object(p.b)("div",{className:"cover",style:{backgroundImage:"url("+t(378).default+")"}}),Object(p.b)("pre",null,Object(p.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui, graphics as g\n\n# Use relative coords to draw a square, sort of like Python's turtle package.\nred_square = g.p().m(25, 25).h(50).v(50).h(-50).z().path(fill='red')\n\npage = site['/demo']\npage['example'] = ui.graphics_card(\n    box='1 1 2 3', view_box='0 0 100 100', width='100%', height='100%',\n    scene=g.scene(foo=red_square),\n)\n\npage.save()\n")))}l.isMDXComponent=!0},290:function(e,r,t){"use strict";t.d(r,"a",(function(){return s})),t.d(r,"b",(function(){return u}));var n=t(0),a=t.n(n);function p(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function A(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<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?A(Object(t),!0).forEach((function(r){p(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):A(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function o(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},p=Object.keys(e);for(n=0;n<p.length;n++)t=p[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(n=0;n<p.length;n++)t=p[n],r.indexOf(t)>=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<p;c++)A[c]=t[c];return a.a.createElement.apply(null,A)}return a.a.createElement.apply(null,t)}S.displayName="MDXCreateElement"},378:function(e,r,t){"use strict";t.r(r),r.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARUAAAD8CAYAAABZ0jAcAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAyOjA3OjQ5IFBNIFBEVCumBS8AAANUSURBVHic7daxDcJQFARBY1GxY4ggpmQ/imClL6yZCi5a3W1mZgOI7KsHANciKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAKn76gFXcL4/2/n6rJ7Bj/bnse2PY/WMv+epAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAqdvMzOoRwHV4KkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVJfkOkP8d6gjyUAAAAASUVORK5CYII="}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[117],{171:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return A})),t.d(r,"metadata",(function(){return i})),t.d(r,"rightToc",(function(){return o})),t.d(r,"default",(function(){return l}));var n=t(2),a=t(6),p=(t(0),t(292)),A={title:"Graphics / Path"},i={unversionedId:"examples/graphics-path",id:"examples/graphics-path",isDocsHomePage:!1,title:"Graphics / Path",description:"Use the graphics API to draw a red square.",source:"@site/docs/examples/graphics-path.md",slug:"/examples/graphics-path",permalink:"/wave/docs/examples/graphics-path",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-path.md",version:"current",sidebar:"someSidebar",previous:{title:"Graphics / Clock",permalink:"/wave/docs/examples/graphics-clock"},next:{title:"Graphics / Turtle",permalink:"/wave/docs/examples/graphics-turtle"}},o=[],c={rightToc:o};function l(e){var r=e.components,A=Object(a.a)(e,["components"]);return Object(p.b)("wrapper",Object(n.a)({},c,A,{components:r,mdxType:"MDXLayout"}),Object(p.b)("p",null,"Use the graphics API to draw a red square."),Object(p.b)("div",{className:"cover",style:{backgroundImage:"url("+t(383).default+")"}}),Object(p.b)("pre",null,Object(p.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui, graphics as g\n\n# Use relative coords to draw a square, sort of like Python's turtle package.\nred_square = g.p().m(25, 25).h(50).v(50).h(-50).z().path(fill='red')\n\npage = site['/demo']\npage['example'] = ui.graphics_card(\n    box='1 1 2 3', view_box='0 0 100 100', width='100%', height='100%',\n    scene=g.scene(foo=red_square),\n)\n\npage.save()\n")))}l.isMDXComponent=!0},292:function(e,r,t){"use strict";t.d(r,"a",(function(){return s})),t.d(r,"b",(function(){return u}));var n=t(0),a=t.n(n);function p(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function A(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<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?A(Object(t),!0).forEach((function(r){p(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):A(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function o(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},p=Object.keys(e);for(n=0;n<p.length;n++)t=p[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(n=0;n<p.length;n++)t=p[n],r.indexOf(t)>=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<p;c++)A[c]=t[c];return a.a.createElement.apply(null,A)}return a.a.createElement.apply(null,t)}S.displayName="MDXCreateElement"},383:function(e,r,t){"use strict";t.r(r),r.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARUAAAD8CAYAAABZ0jAcAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAyOjA3OjQ5IFBNIFBEVCumBS8AAANUSURBVHic7daxDcJQFARBY1GxY4ggpmQ/imClL6yZCi5a3W1mZgOI7KsHANciKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAKn76gFXcL4/2/n6rJ7Bj/bnse2PY/WMv+epAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAqdvMzOoRwHV4KkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVJfkOkP8d6gjyUAAAAASUVORK5CYII="}}]);
\ No newline at end of file
diff --git a/docs/7f8f4b62.3bcf3283.js b/docs/7f8f4b62.5c0f0fc4.js
similarity index 99%
rename from docs/7f8f4b62.3bcf3283.js
rename to docs/7f8f4b62.5c0f0fc4.js
index 760ce58c41..7c3e005979 100644
--- a/docs/7f8f4b62.3bcf3283.js
+++ b/docs/7f8f4b62.5c0f0fc4.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[116],{170:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return n})),a.d(t,"metadata",(function(){return i})),a.d(t,"rightToc",(function(){return s})),a.d(t,"default",(function(){return o}));var c=a(2),b=a(6),l=(a(0),a(290)),n={title:"Module h2o_wave.graphics"},i={unversionedId:"api/graphics",id:"api/graphics",isDocsHomePage:!1,title:"Module h2o_wave.graphics",description:"Functions",source:"@site/docs/api/graphics.md",slug:"/api/graphics",permalink:"/wave/docs/api/graphics",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/api/graphics.md",version:"current",sidebar:"someSidebar",previous:{title:"Module h2o_wave.server",permalink:"/wave/docs/api/server"},next:{title:"Module h2o_wave.types",permalink:"/wave/docs/api/types"}},s=[{value:"Functions",id:"functions",children:[{value:'arc <a name="h2o_wave.graphics.arc"/>',id:"arc",children:[]},{value:'circle <a name="h2o_wave.graphics.circle"/>',id:"circle",children:[]},{value:'draw <a name="h2o_wave.graphics.draw"/>',id:"draw",children:[]},{value:'ellipse <a name="h2o_wave.graphics.ellipse"/>',id:"ellipse",children:[]},{value:'image <a name="h2o_wave.graphics.image"/>',id:"image",children:[]},{value:'line <a name="h2o_wave.graphics.line"/>',id:"line",children:[]},{value:'p <a name="h2o_wave.graphics.p"/>',id:"p",children:[]},{value:'path <a name="h2o_wave.graphics.path"/>',id:"path",children:[]},{value:'polygon <a name="h2o_wave.graphics.polygon"/>',id:"polygon",children:[]},{value:'polyline <a name="h2o_wave.graphics.polyline"/>',id:"polyline",children:[]},{value:'rect <a name="h2o_wave.graphics.rect"/>',id:"rect",children:[]},{value:'reset <a name="h2o_wave.graphics.reset"/>',id:"reset",children:[]},{value:'scene <a name="h2o_wave.graphics.scene"/>',id:"scene",children:[]},{value:'spline <a name="h2o_wave.graphics.spline"/>',id:"spline",children:[]},{value:'stage <a name="h2o_wave.graphics.stage"/>',id:"stage",children:[]},{value:'text <a name="h2o_wave.graphics.text"/>',id:"text",children:[]},{value:'turtle <a name="h2o_wave.graphics.turtle"/>',id:"turtle",children:[]},{value:'type_of <a name="h2o_wave.graphics.type_of"/>',id:"type_of",children:[]}]},{value:"Classes",id:"classes",children:[{value:'Path <a name="h2o_wave.graphics.Path"/>',id:"path-1",children:[]},{value:'Turtle <a name="h2o_wave.graphics.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<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?n(Object(a),!0).forEach((function(t){l(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):n(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function s(e,t){if(null==e)return{};var a,c,b=function(e,t){if(null==e)return{};var a,c,b={},l=Object.keys(e);for(c=0;c<l.length;c++)a=l[c],t.indexOf(a)>=0||(b[a]=e[a]);return b}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(c=0;c<l.length;c++)a=l[c],t.indexOf(a)>=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<l;r++)n[r]=a[r];return b.a.createElement.apply(null,n)}return b.a.createElement.apply(null,a)}p.displayName="MDXCreateElement"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[118],{172:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return n})),a.d(t,"metadata",(function(){return i})),a.d(t,"rightToc",(function(){return s})),a.d(t,"default",(function(){return o}));var c=a(2),b=a(6),l=(a(0),a(292)),n={title:"Module h2o_wave.graphics"},i={unversionedId:"api/graphics",id:"api/graphics",isDocsHomePage:!1,title:"Module h2o_wave.graphics",description:"Functions",source:"@site/docs/api/graphics.md",slug:"/api/graphics",permalink:"/wave/docs/api/graphics",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/api/graphics.md",version:"current",sidebar:"someSidebar",previous:{title:"Module h2o_wave.server",permalink:"/wave/docs/api/server"},next:{title:"Module h2o_wave.types",permalink:"/wave/docs/api/types"}},s=[{value:"Functions",id:"functions",children:[{value:'arc <a name="h2o_wave.graphics.arc"/>',id:"arc",children:[]},{value:'circle <a name="h2o_wave.graphics.circle"/>',id:"circle",children:[]},{value:'draw <a name="h2o_wave.graphics.draw"/>',id:"draw",children:[]},{value:'ellipse <a name="h2o_wave.graphics.ellipse"/>',id:"ellipse",children:[]},{value:'image <a name="h2o_wave.graphics.image"/>',id:"image",children:[]},{value:'line <a name="h2o_wave.graphics.line"/>',id:"line",children:[]},{value:'p <a name="h2o_wave.graphics.p"/>',id:"p",children:[]},{value:'path <a name="h2o_wave.graphics.path"/>',id:"path",children:[]},{value:'polygon <a name="h2o_wave.graphics.polygon"/>',id:"polygon",children:[]},{value:'polyline <a name="h2o_wave.graphics.polyline"/>',id:"polyline",children:[]},{value:'rect <a name="h2o_wave.graphics.rect"/>',id:"rect",children:[]},{value:'reset <a name="h2o_wave.graphics.reset"/>',id:"reset",children:[]},{value:'scene <a name="h2o_wave.graphics.scene"/>',id:"scene",children:[]},{value:'spline <a name="h2o_wave.graphics.spline"/>',id:"spline",children:[]},{value:'stage <a name="h2o_wave.graphics.stage"/>',id:"stage",children:[]},{value:'text <a name="h2o_wave.graphics.text"/>',id:"text",children:[]},{value:'turtle <a name="h2o_wave.graphics.turtle"/>',id:"turtle",children:[]},{value:'type_of <a name="h2o_wave.graphics.type_of"/>',id:"type_of",children:[]}]},{value:"Classes",id:"classes",children:[{value:'Path <a name="h2o_wave.graphics.Path"/>',id:"path-1",children:[]},{value:'Turtle <a name="h2o_wave.graphics.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},292: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<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?n(Object(a),!0).forEach((function(t){l(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):n(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function s(e,t){if(null==e)return{};var a,c,b=function(e,t){if(null==e)return{};var a,c,b={},l=Object.keys(e);for(c=0;c<l.length;c++)a=l[c],t.indexOf(a)>=0||(b[a]=e[a]);return b}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(c=0;c<l.length;c++)a=l[c],t.indexOf(a)>=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<l;r++)n[r]=a[r];return b.a.createElement.apply(null,n)}return b.a.createElement.apply(null,a)}p.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/82f75f63.4e923452.js b/docs/82f75f63.4e923452.js
new file mode 100644
index 0000000000..17f9813488
--- /dev/null
+++ b/docs/82f75f63.4e923452.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[119],{173:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return a})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return u})),r.d(t,"default",(function(){return s}));var o=r(2),n=r(6),c=(r(0),r(292)),a={title:"Form / Choice Group"},i={unversionedId:"examples/choice-group",id:"examples/choice-group",isDocsHomePage:!1,title:"Form / Choice Group",description:"Use choice groups to let users select one option from two or more choices.",source:"@site/docs/examples/choice-group.md",slug:"/examples/choice-group",permalink:"/wave/docs/examples/choice-group",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/choice-group.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Dropdown",permalink:"/wave/docs/examples/dropdown"},next:{title:"Form / Combobox",permalink:"/wave/docs/examples/combobox"}},u=[],p={rightToc:u};function s(e){var t=e.components,a=Object(n.a)(e,["components"]);return Object(c.b)("wrapper",Object(o.a)({},p,a,{components:t,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Use choice groups to let users select one option from two or more choices."),Object(c.b)("div",{className:"cover",style:{backgroundImage:"url("+r(384).default+")"}}),Object(c.b)("pre",null,Object(c.b)("code",Object(o.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\nchoices = [\n    ui.choice('A', 'Option A'),\n    ui.choice('B', 'Option B'),\n    ui.choice('C', 'Option C', disabled=True),\n    ui.choice('D', 'Option D'),\n]\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'selected={q.args.choice_group}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.choice_group(name='choice_group', label='Pick one', value='B', required=True, choices=choices),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n")))}s.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return l})),r.d(t,"b",(function(){return m}));var o=r(0),n=r.n(o);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 a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function u(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},c=Object.keys(e);for(o=0;o<c.length;o++)r=c[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;o<c.length;o++)r=c[o],t.indexOf(r)>=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):i(i({},t),e)),r},l=function(e){var t=s(e.components);return n.a.createElement(p.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,p=u(e,["components","mdxType","originalType","parentName"]),l=s(r),d=o,m=l["".concat(a,".").concat(d)]||l[d]||g[d]||c;return r?n.a.createElement(m,i(i({ref:t},p),{},{components:r})):n.a.createElement(m,i({ref:t},p))}));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 p=2;p<c;p++)a[p]=r[p];return n.a.createElement.apply(null,a)}return n.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},384:function(e,t,r){"use strict";r.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/82f75f63.f94f1ad0.js b/docs/82f75f63.f94f1ad0.js
deleted file mode 100644
index a7aa4936f0..0000000000
--- a/docs/82f75f63.f94f1ad0.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[117],{171:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return a})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return u})),r.d(t,"default",(function(){return p}));var o=r(2),n=r(6),c=(r(0),r(290)),a={title:"Form / Choice Group"},i={unversionedId:"examples/choice-group",id:"examples/choice-group",isDocsHomePage:!1,title:"Form / Choice Group",description:"Use choice groups to let users select one option from two or more choices.",source:"@site/docs/examples/choice-group.md",slug:"/examples/choice-group",permalink:"/wave/docs/examples/choice-group",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/choice-group.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Dropdown",permalink:"/wave/docs/examples/dropdown"},next:{title:"Form / Combobox",permalink:"/wave/docs/examples/combobox"}},u=[],s={rightToc:u};function p(e){var t=e.components,a=Object(n.a)(e,["components"]);return Object(c.b)("wrapper",Object(o.a)({},s,a,{components:t,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Use choice groups to let users select one option from two or more choices."),Object(c.b)("div",{className:"cover",style:{backgroundImage:"url("+r(379).default+")"}}),Object(c.b)("pre",null,Object(c.b)("code",Object(o.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\nchoices = [\n    ui.choice('A', 'Option A'),\n    ui.choice('B', 'Option B'),\n    ui.choice('C', 'Option C', disabled=True),\n    ui.choice('D', 'Option D'),\n]\n\n\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'selected={q.args.choice_group}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.choice_group(name='choice_group', label='Pick one', value='B', required=True, choices=choices),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}p.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return l})),r.d(t,"b",(function(){return m}));var o=r(0),n=r.n(o);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 a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function u(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},c=Object.keys(e);for(o=0;o<c.length;o++)r=c[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;o<c.length;o++)r=c[o],t.indexOf(r)>=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<c;s++)a[s]=r[s];return n.a.createElement.apply(null,a)}return n.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},379:function(e,t,r){"use strict";r.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/8542acf3.53333c25.js b/docs/8542acf3.53333c25.js
deleted file mode 100644
index ddecdbd261..0000000000
--- a/docs/8542acf3.53333c25.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[118],{172:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return o})),r.d(t,"metadata",(function(){return c})),r.d(t,"rightToc",(function(){return l})),r.d(t,"default",(function(){return u}));var n=r(2),a=r(6),i=(r(0),r(290)),o={title:"Form / Tabs"},c={unversionedId:"examples/tabs",id:"examples/tabs",isDocsHomePage:!1,title:"Form / Tabs",description:"Use tabs within a form to navigate between two or more distinct content categories.",source:"@site/docs/examples/tabs.md",slug:"/examples/tabs",permalink:"/wave/docs/examples/tabs",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/tabs.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Swatch Picker",permalink:"/wave/docs/examples/swatch-picker"},next:{title:"Form / Separator",permalink:"/wave/docs/examples/separator"}},l=[],m={rightToc:l};function u(e){var t=e.components,o=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},m,o,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Use tabs within a form to navigate between two or more distinct content categories."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+r(380).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\ntabs = [\n    ui.tab(name='email', label='Mail', icon='Mail'),\n    ui.tab(name='events', label='Events', icon='Calendar'),\n    ui.tab(name='spam', label='Spam'),\n]\n\n\nasync def serve(q: Q):\n    if q.args.menu:\n        q.page['example'].items = [\n            ui.tabs(name='menu', value=q.args.menu, items=tabs),\n            get_tab_content(q.args.menu),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.tabs(name='menu', value='email', items=tabs),\n            get_tab_content('email'),\n        ])\n    await q.page.save()\n\n\ndef get_tab_content(category: str):\n    # Return a checklist of dummy items.\n    items = [f'{category.title()} {i}' for i in range(1, 11)]\n    return ui.checklist(name='items', choices=[ui.choice(name=item, label=item) for item in items])\n\n\nlisten('/demo', serve)\n")))}u.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return s})),r.d(t,"b",(function(){return f}));var n=r(0),a=r.n(n);function i(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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=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<i;m++)o[m]=r[m];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,r)}p.displayName="MDXCreateElement"},380:function(e,t,r){"use strict";r.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/8542acf3.6c384a58.js b/docs/8542acf3.6c384a58.js
new file mode 100644
index 0000000000..583b05e6cc
--- /dev/null
+++ b/docs/8542acf3.6c384a58.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[120],{174:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return o})),r.d(t,"metadata",(function(){return c})),r.d(t,"rightToc",(function(){return l})),r.d(t,"default",(function(){return u}));var n=r(2),a=r(6),i=(r(0),r(292)),o={title:"Form / Tabs"},c={unversionedId:"examples/tabs",id:"examples/tabs",isDocsHomePage:!1,title:"Form / Tabs",description:"Use tabs within a form to navigate between two or more distinct content categories.",source:"@site/docs/examples/tabs.md",slug:"/examples/tabs",permalink:"/wave/docs/examples/tabs",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/tabs.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Swatch Picker",permalink:"/wave/docs/examples/swatch-picker"},next:{title:"Form / Separator",permalink:"/wave/docs/examples/separator"}},l=[],m={rightToc:l};function u(e){var t=e.components,o=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},m,o,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Use tabs within a form to navigate between two or more distinct content categories."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+r(385).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\ntabs = [\n    ui.tab(name='email', label='Mail', icon='Mail'),\n    ui.tab(name='events', label='Events', icon='Calendar'),\n    ui.tab(name='spam', label='Spam'),\n]\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.menu:\n        q.page['example'].items = [\n            ui.tabs(name='menu', value=q.args.menu, items=tabs),\n            get_tab_content(q.args.menu),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.tabs(name='menu', value='email', items=tabs),\n            get_tab_content('email'),\n        ])\n    await q.page.save()\n\n\ndef get_tab_content(category: str):\n    # Return a checklist of dummy items.\n    items = [f'{category.title()} {i}' for i in range(1, 11)]\n    return ui.checklist(name='items', choices=[ui.choice(name=item, label=item) for item in items])\n")))}u.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return s})),r.d(t,"b",(function(){return f}));var n=r(0),a=r.n(n);function i(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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=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<i;m++)o[m]=r[m];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,r)}p.displayName="MDXCreateElement"},385:function(e,t,r){"use strict";r.r(t),t.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPcAAADVCAYAAACL6GZuAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjE0OjQwIFBNIFBEVErPEbEAAB2fSURBVHic7d17XM93/8fxRydaJUUnaSvLcdh1YaZyWMTI+ZxjKDY0Z8rQWDbHTWFMmBzGiiZyVq5dzGk2w+UQu5j9mHQyLSlFPr8/unzneyVK3w7fz/W6327dbvp839/35/353Hp+P+/PwfdloCiKghBCdQzLewBCiNIh4RZCpSTcQqiUhFsIlZJwC6FSEm4hVErCLYRKSbiFUCkJtxAqJeEWQqX+p8KdmZnJ119vIjk5ubyHAsC+vXuJ3rat0Nf9/EaU4WiE2hhU5GfLmzVtAsCkSZMZMnRogdf9Rgzn3LlzeHp68vmS0Bf2t23rVhYsmM+AgQOZNi2Q/v36cvPmTU6c/EHnYy/M6Z9+YsKE8VhZWXE/Kwvl8WMsLCye2TY5ORl7e3vy8vJ49dVXWb1mrdbreXl5vN38rWe+d9fuPTg6Oup8/EJ/GOu6w99+++2l3ufi4lLoa7GxOwuE+8aNG5w7d65Y6+jYqRP37t3Du3Pnlxmizni1b8/HH4dw+PBhsrOy6OTt/cx2H06fzvwFC0hMTGTO7I8K7e+zzz+nXr36Wsvs7e11OubCREdHs3fvHtatiyiT9Ymi03m4+/TuRYMGDbCysi5S+/T0uyQkJHD65zOFtrl27RoXL16kYcOGmmWxsTuLPTZLS0v8/P2L/T5d++HkST4ICND8vnv37kLbfhAQQE7OAwwMDAptY2NjK0fpZ8i6f58VK74gLi6Oe/fuUev11/Hz86d9+/blPbQyofNwm5mZkZubi7OLM0OH+uLg4PDMdklJSWzatJGUU8mYmZkV2p+trS137twhNnanJtyPHz9mz+7d2NvbFzh/3hUby+bNX3Pjxg1sbW3p178/Q4bkH/Xj4+MJCpzGuHHjGT6i/M5nGzZqxLhx44vcPiUlhbVrVhd7PQcOHODzzxaz/8BBDA3zL6/cvn2bbl27sGNnLE5OTly8cIHPl3zOlcuXsbW1ZeCgQfj4DADg2tWrDBvmy8chcwld8jl37vxBixYtCAkJwbJqVT77bDHfbNkC5J9CBQd/RM9evfjh5EkWLVpIYmIiTk5OTJ4yBXd3j2KPv6SCggL5888/+TgkBDs7e3766UeCZ83C2NgYT0/PMh9PWdP5BbWqVasSGbWVxo0aM23qFGbP/ojr169rXr9+/TqzZ3/EtKlTaNyoMZFRW6latWqh/dnbO9D87bc5sH8/ubm5AJw8eZKUlBS6de+u1fbQoUPMmTMbc3MLxowZi42NLaFLlrBnT+FHxvJgYWGBi4uL5ueVV17hy5UrcHFxISMjg+3ffouLiwtzZn+Ei4sLTk5OL7Wed955h+zsbM6ePatZdig+noYNG+Hk5MTt27cZPWY0rVq2Ylv0twQGTWfN6tVs3RqlaZ+Tk0N8XBxfrVvHt9u3k5KSzIoVXwD510KmTJ1KgwYNOHHyB7r36MHt27cZP34co957nz179zF8xAimBwWRmZlZsp1WTKmpqRw/fpzPPl+Cu7sHrq6u+PgMYPSY0Zw7d/bFHaiAzo/cAIaGhnTy9qaTtzfHjh1j/vx5VKlSBYB79+4xbNhwWrZsWeT+unXtxg8nT/Ldd9/RsWNHYnfuxMTEhI4dO7F2zRpNu/r167Fo8We0bNkSU1NTmjZrhu/QIZz64Qe6dOmq8+3UFTs7O0LmfgJAo0aNqF8///x5VXjRjtajRvprTdvr1K3Lxo2bMDU15R1PT+Lj4mjatCkAcXFxeP/nHD8qKpJ2bdtqTlUcHR2ZNHkyWzZvoX9/HyB/ljQ2IAB7+/wZ2KBBg9m4cQMARkZGVKpUmUqVK1OpUiUgf5ZhYmJCq1atsLCwoEuXrnh5tcfU1LRE+6i4jI3z/7RTU1Kws7PTLB82bLjm31FRkRw/fpzmzZvz1dq1KIpC+w4dmDp1mma8Dx48YHV4OPv37yM9PZ3Gb75J4LRAXGvXBqBdW0/Gj5/Ali2buXnzdzxaejBtWiCLFy3kxIkTODg4MHNWMM2aNSu7jf+PUgn301q2bEnLli05f/48AI0bNy52H23btcPM3JzY2J24u7tz+PA/adOmTYEjvqNjTa5du0ZYWCg3btzgyuXLAOTmPiz5hpSCfXv3cv/+fVq3aUNYaCjzFyzg4sWLxMfHMWnSZMaOHVOkC1Uhc+dSt249ze9Pggbg3cmbkJCPmRYYSEpKMgkJlwgNzb+zcOXyZU6dOsU///lPTfu8vDwqV66s1f+rr76q+XdVq6pkZWUVOpbGjRvTsFEjevXsQevWbXBzd8PTs+0Lt0HXrK2t6dGjJ+PGfcDAgYN4x9OTunXrFmh37uxZ7O3s2Rm7i+zsLEJCQgj5eA7z5i8AYNnSpfz882kWLV6MnZ09X61dw4wZM4jaulXTR0xMDJ99vgQjI0MCxo5lyOBBhMz9hE8+ncea1auZM/sjdu3eU2bb/kSph/uJlwn1E6ampnRo34Fdu2LZsH49ubm5BabkAEuXhrFp40b+/vcmuLu709azLQsWzC/JsEtVx06dADAwMCBk7lwAGjZsSIMGDQBYtSq8SP3UqOFY6N0GN3d3Hj16xLlzZ7l48SJvNW9OterVNa/7DhtGv379td7z5Pz8ZRgaGrJqVThnz57h5ImTfLX2K8JXrWLDxk2F3vIrLcEffUSzt5rxbXQ04eGrcHSsif9If3r06Klpk5eXx9Rp06hUqRKWlpbMmDGTHt27MWXqNKpXr86UqVPJysrSzDx9BgwkOjqarKwszbUinwE+vPbaawC0a+dFQsIlPDw8/vPaADZsWE9mZmaZb7/ePMTStVs3Hj9+zPr1EVSrVg0Pj4LT+riDB6lRowZfrVvHyFGjtI44FVF8fBw7d+wgNTWVuSEfA5Bw6RJffrkSgPHjxpV4HUZGRrTv0IG4uDji4+Lw7vTXbbc6deqSkpKCo6Oj5icnJ4ecnJwi929gADz1qERWVha//fYbTZo0ZczYsWz55hv+/PNPfvih7J4l+GtsBnTp0pV1EevZt/8Avfv0ZtHChURGRmraODs7a810atasSZUqVbh69aqmj7NnzxAauoRJEycy7oP8uxxPrv8A2Nv9ddvR2NhY6wLxk1lQcfapruj8yH3nzh9at3mK+p4XadKkCTVrOnHr1u94e3fGyMioQBsbG1sSEi6xfPkyqlpW5dtvo4s1jrJWt249Hj58iIWFBe++2xEAewcHWrZsBcCq8KIdudPSUklMTNRaZmtri4mJCQDe3t5MmjiRnJwc2nl5adr09/Fh4AAf1q+PoEOHDtxOvE1ISAhdunbh/fdHF2ndNja2XL9+ndOnT1O3bl3Onj3DR8HBLFiwkFqvv87JkyfIyMjAxdm5SP2VFltbW4YPH4GFuQWRkd8wYED+HYHch9qnbIqi8OjRI801jOBZM7l06RK9evXm7eZvU9WqKsN8fct8/C9D5+H+5qlPRV0yMDCgS9curA4Pp2u3bs9s8+m8eXw8ZzZbo6KoUaMG48aNJygosFTGowuGhoYYGhpiYGCgCaKhgYHmYlBRTZ0ypcCyTV9v5o033gDgb3/7OxYWFjRv3hxzc3NNGycnJ1atCic0NJQ1q1dTrVo1Onfugr//yCKvu3Xr1rzbsSMTJ05gwvgJ9O3XD/+RI5k7N4S0tDScnJyYN2++5gJUWYmLO8jyZcvZHhOjtT+zs7O1Lu7d+L//05oyX7t2lQcPHuDq6srjx485cOAA6yLW8+abbwLw888/l+l2lESFfvxUjZ5+/LSoCnv8VBQuMzOTPr17UadOXYYOHYq5hTk/nvqR1avDCZr+IT179iQqKpLwVato0qQJAR+MIzs7m/nzPsXZxYVPP50HQK+ePXBzc2fI0CHcufMHCxcs4PLlBA794zusrKxo19aTxYs/o9lb+Y8Br1yxgmvXrmoeh05PT8erXVsOxsVT/alrHWWhzC6oiXzN3nqLo8eOl/cwVM/CwoKv1kWwfNlSpk8P4sGDBzg7OzNjxkyti7G1a9fG3d2Dkf5+5OXl0b5DB6ZN+2u2F7Z0GcHBs+jbpy+1arng5+dfoWeDT5Mjt/ifFRUVyaH4eNXOiPTmarkQongk3EKolEzLhVApOXILoVISbiFUSsIthEpJuIVQKQm3ECol4RZCpSTcQqiUhFsIlZJwC6FSEm4hVEqn/+XzeV+crw/kSVyhJnLkFkKldHrkliOfEBWHHLmFUCkJtxAqJeEWQqUk3EKolIRbCJWScAuhUhJuIVRKwi2ESkm4hVApCbcQKiXhFkKlJNxCqJSEWwiVknALoVISbiFUSsIthEpJuIVQKQm3ECol4RZCpSTcQqiUhFsIlZJwC6FSEm4hVErCLYRKSbiFUCkJtxAqJeEWQqUk3EKolIRbCJWScP+X9RER7IiJKe9hCFFiEm4hVErCLYRKFTvcv/76K926dcPCwoJq1arh5+dHZmbmC98XHR1N3759X2qQT/z888/s2LHjhe369+9PixYttJalpaVhY2NTorGEhYVhaGiIsbExpqamNGjQgNDQUBRFKXZfRdWoUSMuXLhQoj6WLFlCenr6c9skJCRgYGDAvn37tJY/va8++OADvvjiixKNRZSdYoe7S5cueHh4kJiYyOXLl8nKymLixImlMbYCihLujIwMjh8/Tnp6OlevXtX5GPz8/Hj06BGZmZls2rSJyMhIpk+frvP16FJRwv3111/j5ubG5s2by2hUorQVK9zZ2dn8+9//ZsqUKVhaWmJnZ8eKFSvw8fHRtImJiaFevXpYW1vTp08fkpOTC/SjKApz587FwcEBBwcHAgMDefToUYHXrK2tmTZtGnl5eURFRTFq1Cg2bNiAg4MDeXl5zxzj9u3b6dSpEwMHDizVP1RjY2Peeustdu3aRXh4OHfu3AHg0qVLtGrViqpVq9KiRQt+/PFHzXu++eYb3njjDezs7OjTpw/3798H8j+QBg0ahLW1Na6urmzatOmZ63xeuyfrrVKlCn/72984c+YMAM2bN+fWrVvUqlWLhQsXPrNfRVGIjIwkIiKCuLg4zbiEfitWuF955RU6derEiBEjNFPF6tWr06FDByD/D2z06NFERkaSlpbG66+/jr+/f4F+1qxZw65duzh//jy//PILp06dIiwsTPPanj17+Ne//sXNmzc5f/48S5cuxcfHhzVr1jBs2DCSkpIwMjJ65hg3b96Mj48PPj4+ZXIUsrOzw93dnaNHj5Kbm0u3bt0YOXIk6enpBAUF0b17d7KyskhJSSEgIID9+/eTlJSEs7Mz3333HQCjR4/G0tKSpKQk9u7dS1BQkNaHwhOFtcvNzaVr16689957ZGRksGjRIry9vcnJyeHHH3+kZs2aXL9+naCgoGduw/Hjx3FwcKB+/fp4enqyc+fOUt1nomwUe1oeExODh4cHo0aNwsXFhVmzZpGVlQXkH5lGjx5NkyZNMDIyYu7cufzjH/8gOztbq49NmzaxcOFCbG1tsbS0JDg4mJj/3H7auHEjM2fOxM7ODgsLC6Kjo/H19S3S2G7fvs358+dp27YtDRo0wNTU9Jkh0TU7Ozv++OMPvv/+e5ycnBg+fDgGBgb07t2b2rVrc+zYMYyNjVEUhUuXLqEoCkuWLKFr165kZ2eza9cuwsLCqFy5MvXq1cPf37/A6cfz2h05cgRra2t8fX0xMDCgY8eO/PTTT4V+AP63zZs3079/f4Ay+1AUpc+4uG8wMTEhICCAgIAAbt++zcyZMxk5ciRbtmzh1q1bREREEB4e/tcKjI01U9Ynjh49Srt27bC3twfyp4V2dnYAJCYm8vrrr2vaWlhYYGFhUaSxzZo1i+TkZExMTDTLBg4cWCrn3k+7ffs21atX59atWxw5cgQHBwfNazk5OaSlpVGtWjW2bNnCvHnzGDp0KJ07d2bJkiXcv3+fzMxMXFxcNO959OiRJmxPpKamFtruv/cZgJOTU5HG/vDhQ7788ksArWsnqamp2NraFnUXiAqoWEfumzdv8vXXX2t+r1GjBiEhIcTFxWl+nz59OklJSZqfjIyMAn9oHh4emulpUlISycnJnD9/HgBHR0etMGZmZpKWllak8Z07d474+HgURUFRFH755RcyMzMLPT/XhcTERE6ePEmrVq2oUaMGbm5uWtt/9+5dBg4cCIC3tzdHjhzh2rVrZGdnM3fuXGxsbKhcuTK//vqr5j1paWmsXLlSaz3Pa/ff+wzg999/11zHeJ4DBw7QqlUrzT5TFIVBgwaxdetW3e0kUS6KFW5TU1PGjBnD2rVrycjI4MaNGwQGBvL2228DMGDAANatW8fp06dRFIXo6Gh69uxZoJ8hQ4YQHBxMSkoKubm5BAUFsXjxYgB8fX0JDg4mNTWVP//8k169erFt2zYAzM3NuXz5MhkZGQX6vHLlCjdv3sTT01OzrE6dOjg6OnLo0KHibGaR5ObmcuLECbp27cqECROoVq0abdq0ISkpiYiICM0UvEWLFty9e5ezZ8/SrFkz/vjjD8zMzLC0tMTQ0BAzMzN69OjB5MmTefDgAXfu3KF79+4cPnxYa33Pa9emTRvS09MJDw9HURT27NmDm5sbBgYGmv125swZHj58WGA7np6SPyFTc5VQiunw4cNK8+bNlcqVKyvW1tbKoEGDlJSUFM3r27dvV+rXr69YWloqbm5uyunTpxVFUZRt27Ypffr0URRFUR4/fqyEhIQoNWrUUKpVq6b07dtX08fjx4+V2bNnK3Z2doqlpaUyfvx45eHDh4qiKMq9e/eUzp07K2ZmZsq9e/e0xhUcHKyMHj26wHgXLFigDB06VElNTVWqV69eYCz/LWLdOiVm+/ZnvhYaGqoYGBgoRkZGiqmpqdKoUSNlxYoVWm0uXryotG7dWqlSpYpSp04dZfPmzZrX5syZozg4OCgODg5K7969lbS0NEVRFCU9PV0ZPHiwYmVlpTg6OiqBgYHKo0ePFEVRlIYNGyrnz59/YbsLFy4oHh4eipmZmdKgQQPl1KlTmvVGR0crdnZ2yocffqg11nv37ikWFhZKYmKi1vIHDx4oVlZWytWrV7X2VUBAgLJ8+fJn7htR8RgoSik+gaGH1kdEYGVlRc9evcp7KEKUiDx+KoRKSbiFUCmZlguhUnLkFkKlJNxCqJSEWwiVknALoVISbiFUSsIthEpJuIVQKQm3ECol4RZCpSTcQqhUsb6JJTY2lmVLw7h7926JVmptbc34CRPp3r17ifoRQhSuWM+Wt/dqx7Jly3mjYcMSrfTSxYuMHz+O+EP/KFE/QojCFWtafvfu3RIHG+CNhg1LfPQXQjyfnHMLoVIVPtx+fiNo1rRJgZ9dsbGlsr4NG9YzfFj+Vylfu3qVZk2bPLf9/v37eadNa2bNmlkq4xHiZRX7q43Lw7Bhw+nbr5/WMisrq1JZV+PGb2Js/OLdkpuby6efzOX4iRO89tprpTIWIUpCL8JtaWmJo6NjmayradOmNG3a9IXtkpOTuZueTlTUVlZ9+SVZ2VllMDohik4vwv08gdOm4uJSi4SES/z002lq1XLh03nziY3dyY6YGIyNjfEfOYoBAwZo3hOzfTtbtmzm999v8eprr/L++6Px8vICICoqkkPx8axes/a563V0dGTZsuWluGVClEyFP+cuih07YhgyZCgHDh7E0bEmw4f5Ym5mzp69+5gxcyahSz7n1q3fATh06BBLl4YxNiCAXbt3M3jwYGbNnFHkwgdPFLVUjxDlRS/CvXLlCtzdWmj9PF0TvHXr1rRwc8PS0pJevXuTk5ODn78/ZmZmtG3bDgcHB/797/yKHF5eXsTs2Enbtu2wsbGhR4+emJubk5Bwqbw2T4hSoRfT8oEDB9Grd2+tZWZmZpp/2/2n5hjk1yarXLkyhoZ/fW5VrlyZnJwcze9JSUlERUVy/fp1frv+G3fv3iUnJ7cUt0CIsqcX4ba2ttYqgFcS27d/y7KlS+nbrx/vvtuRWrVqMWniBJ30LURFohfh1qX9+/YxbNhwRvj5Afm3tFJTU8t5VELonl6EOyMjg8TERK1lVatWxdzcvNh9vebszLFjx2jTpg2GRkas+nIl8tXtQo30ItwbNqxnw4b1WssmTpzEUF/fYvc1edJkPvlkLr6+Q7G2tsbffySXL1/W0UiFqDiK9b/CmjVtwumfz+hkxbrsSwhRkF7cChNCFJ+EWwiVKla4ra2tuXTxYolXeuniRaytrUvcjxCicMW6oDZ+wkTGjx+ns69ZEkKUHinhK4RKyTm3ECol4RZCpSTcQqiUhFsIlZJwC6FSEm4hVErCLYRKSbiFUCkJtxAqJVU+hVApqfIphEpJlU8hVErOuYVQqQof7opc5VNRFCLWraOzdydaergz7oMAbt26VSrjEqK49OILEitilU+ALVs2s+WbLXzyyadYWVmxadNGxo37gOjob7WKIghRHvQi3BWxyifArthY3hv1Hi1atADg449D8GrXlgsXLvDmm2+W5jCFeCG9CPfzlFeVT4BP582nhoOD5ncDAwPy8vIwNDTQ9WYKUWyqmDuWR5VPAFdXV8yeKoywZ/duTExMqFu3ns62TYiXpRfh1ocqnzdv3uSzzxYzadJkKlWqVKK+hNAFvZiWV/Qqn5mZmUyaOAEvr/Z0k6fuRAWhF+GuyFU+8/LyCJw2lWrVq/PhjBk6GaMQuqAX4dYlXVf5nD9/HikpKUSs34CJiYmuhilEielFuCtqlc8NG9azd88eFi5aREpyMinJyQBUq15dii6IcqcX4a6oVT7XrllDTk4OEydoT+vHjB3LyJGjXqpPIXRFqnwKoVJ6cStMCFF8Em4hVEqqfAqhUlLlUwiVkiqfQqiUnHMLoVISbiFUSsIthEpJuIVQKQm3ECol4RZCpSTcQqiUhFsIlZJwC6FSUuVTCJWSKp9CqJRU+RRCpeScWwiVqvDhrshVPgHi4+Px6d8fd7cW9O/XlyNHDpfKuIQoLr34gsSKWuXz+PHjzP4omIkTJ9G0WTO+P3KEoMBAtnwTSa1atUplfEIUlV6Eu6JW+Yw7eJAhQ4bSr39/IL922JHvjxB38CDvvf9+aQ5TiBfSi3A/T3lW+Zw9Z06BZeZmZlKbW1QIqvgrLK8qn0/Lyclhx44dnDt3jg7vvquLzRKiRPTiyL1y5QrCw1dpLYuLP4SFhQXwV5VPgF69e3P06Pf4+ftjaGioVeWzZk0nvLy8aNq0qeYLGnv06MnyZctISLhE69ZtXmp8a9euIXxV/vhmz56Ds7Pzy26qEDqjF+Gu6FU++/btR8uWrbh44QJhYaEAdO3W7aX7E0IX9CLcFbnKJ+RfubeysqJBgwYYGBqwLmKdhFuUO70Ity7pssrn9KAgOnXqhGfbtppllUwq8TD35WcBQuiKXoS7olb5tLG1Yf78eeQ+zMXVtTZXrlwmLCyUQYMHv1R/QuiSXoS7olb5nDRpMhYWFixftoyUlBQcHBwYMcKPwUOGvFR/QuiSVPkUQqVUcZ9bCFGQhFsIlZIqn0KolFT5FEKlpMqnECol59xCqJSEWwiVknALoVISbiFUSsIthEpJuIVQKQm3ECol4RZCpSTcQqiUVPkUQqWkyqcQKiVVPoVQKTnnFkKlKny4K3qVzycyMzNp1rQJAwf4lMq4hCguvfiCxIpa5fNpEevWAWBoaKTrIQnxUvQi3BW1yucTyclJbI/ZzujRYzh69GgpjUyI4tGLcD9PeVb5fGLFF1/Qq2cvbG1tdbx1Qry8Cn/OXRTlWeXzypUrfH/0KMNHjNDlJglRYnoR7pUrV+Du1kLrJzMzU/P6kyqflpaW9Ordm5ycHPz8/TEzM9Oq8gng5eVFzI6dtG3bDhsbG3r06Im5uTkJCZdeamxLw0LxHeqLpaWlTrZVCF3Ri2l5Ra3yeezYMa5evcqS0LBiv1eI0qYX4a6IVT4fP37M0qVhvPfe+5iamupkbELokl6EW5d0VeXz2rVrXLt6lYULF7Bw4QIgP/AAzd9qRmTUVlxdXXU3cCGKSS/CXRGrfDo7O7N16zatZTE7YtgRE8OGDRt59dVXi92nELqkF+GuiFU+K1WqhGvt2lrLarvWxtW1doHlQpQHqfIphErpxa0wIUTxSbiFUCmp8imESkmVTyFUSqp8CqFScs4thEpJuIVQKQm3ECol4RZCpSTcQqjU/wN96+Qdc8w7vwAAAABJRU5ErkJggg=="}}]);
\ No newline at end of file
diff --git a/docs/854481fc.873ddd4f.js b/docs/854481fc.873ddd4f.js
new file mode 100644
index 0000000000..25a19c3e20
--- /dev/null
+++ b/docs/854481fc.873ddd4f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[121],{175:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return i})),a.d(t,"metadata",(function(){return l})),a.d(t,"rightToc",(function(){return c})),a.d(t,"default",(function(){return p}));var n=a(2),o=a(6),r=(a(0),a(292)),i={title:"Files"},l={unversionedId:"files",id:"files",isDocsHomePage:!1,title:"Files",description:"Wave provides four functions to manage files from your app:",source:"@site/docs/files.md",slug:"/files",permalink:"/wave/docs/files",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/files.md",version:"current",sidebar:"someSidebar",previous:{title:"Data-binding",permalink:"/wave/docs/expressions"},next:{title:"Plots",permalink:"/wave/docs/plotting"}},c=[{value:"Accept file uploads",id:"accept-file-uploads",children:[]},{value:"Provide file downloads",id:"provide-file-downloads",children:[]}],s={rightToc:c};function p(e){var t=e.components,a=Object(o.a)(e,["components"]);return Object(r.b)("wrapper",Object(n.a)({},s,a,{components:t,mdxType:"MDXLayout"}),Object(r.b)("p",null,"Wave provides four functions to manage files from your app:"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"ui.file_upload()")," allows uploading files from the browser to the Wave server."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"q.site.upload()")," uploads files from your app to the Wave server."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"q.site.download()")," downloads a file from the Wave server to your app."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("inlineCode",{parentName:"li"},"q.site.unload()")," deletes a file from the Wave server.")),Object(r.b)("h2",{id:"accept-file-uploads"},"Accept file uploads"),Object(r.b)("p",null,"Use a file upload component (",Object(r.b)("inlineCode",{parentName:"p"},"ui.file_upload()"),") to accept file uploads from the browser. Files get uploaded from the browser and get stored on the Wave server. Use ",Object(r.b)("inlineCode",{parentName:"p"},"q.site.download()")," to download files from the Wave server to your app."),Object(r.b)("pre",null,Object(r.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:"{9,13}","{9,13}":!0}),"from h2o_wave import Q, main, app, ui\n\n@app('/uploads')\nasync def serve(q: Q):\n    paths = q.args.datasets\n    if not paths:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.text_xl('Upload datasets'),\n            ui.file_upload(name='datasets', label='Upload', multiple=True),\n        ])\n    else:\n        for path in paths:\n            local_path = await q.site.download(path, '.')\n            # Do something with the file located at local_path\n            # ...\n    await q.page.save()\n")),Object(r.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(r.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(r.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(r.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(r.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(r.b)("p",{parentName:"div"},"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 ",Object(r.b)("inlineCode",{parentName:"p"},"q.site.unload()")," to delete it from the Wave server. "))),Object(r.b)("h2",{id:"provide-file-downloads"},"Provide file downloads"),Object(r.b)("p",null,"Use ",Object(r.b)("inlineCode",{parentName:"p"},"q.site.upload()")," to upload files from your app to the Wave server. Use the returned paths to display download links in the browser."),Object(r.b)("pre",null,Object(r.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:"{5,7}","{5,7}":!0}),"from h2o_wave import Q, main, app, ui\n\n@app('/downloads')\nasync def serve(q: Q):\n    download_path, = await q.site.upload(['results.csv'])\n    q.page['download'] = ui.form_card(box='1 1 2 2', items = [\n        ui.link(label='Download Results', path=download_path),\n    ])\n    await q.page.save()\n")),Object(r.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(r.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(r.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(r.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(r.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(r.b)("p",{parentName:"div"},Object(r.b)("inlineCode",{parentName:"p"},"q.site.upload()")," accepts a list of file paths, so you can upload multiple files at a time."))))}p.isMDXComponent=!0},292:function(e,t,a){"use strict";a.d(t,"a",(function(){return d})),a.d(t,"b",(function(){return m}));var n=a(0),o=a.n(n);function r(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 l(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(Object(a),!0).forEach((function(t){r(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function c(e,t){if(null==e)return{};var a,n,o=function(e,t){if(null==e)return{};var a,n,o={},r=Object.keys(e);for(n=0;n<r.length;n++)a=r[n],t.indexOf(a)>=0||(o[a]=e[a]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n<r.length;n++)a=r[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(o[a]=e[a])}return o}var s=o.a.createContext({}),p=function(e){var t=o.a.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},d=function(e){var t=p(e.components);return o.a.createElement(s.Provider,{value:t},e.children)},u={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 a=e.components,n=e.mdxType,r=e.originalType,i=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),d=p(a),b=n,m=d["".concat(i,".").concat(b)]||d[b]||u[b]||r;return a?o.a.createElement(m,l(l({ref:t},s),{},{components:a})):o.a.createElement(m,l({ref:t},s))}));function m(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var r=a.length,i=new Array(r);i[0]=b;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:n,i[1]=l;for(var s=2;s<r;s++)i[s]=a[s];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,a)}b.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/854481fc.ce513a9b.js b/docs/854481fc.ce513a9b.js
deleted file mode 100644
index e38e9beb1b..0000000000
--- a/docs/854481fc.ce513a9b.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[119],{173:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return i})),a.d(t,"metadata",(function(){return l})),a.d(t,"rightToc",(function(){return s})),a.d(t,"default",(function(){return p}));var n=a(2),r=a(6),o=(a(0),a(290)),i={title:"Files"},l={unversionedId:"files",id:"files",isDocsHomePage:!1,title:"Files",description:"Wave provides four functions to manage files from your app:",source:"@site/docs/files.md",slug:"/files",permalink:"/wave/docs/files",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/files.md",version:"current",sidebar:"someSidebar",previous:{title:"Data-binding",permalink:"/wave/docs/expressions"},next:{title:"Plots",permalink:"/wave/docs/plotting"}},s=[{value:"Accept file uploads",id:"accept-file-uploads",children:[]},{value:"Provide file downloads",id:"provide-file-downloads",children:[]}],c={rightToc:s};function p(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},c,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Wave provides four functions to manage files from your app:"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"ui.file_upload()")," allows uploading files from the browser to the Wave server."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"q.site.upload()")," uploads files from your app to the Wave server."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"q.site.download()")," downloads a file from the Wave server to your app."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"q.site.unload()")," deletes a file from the Wave server.")),Object(o.b)("h2",{id:"accept-file-uploads"},"Accept file uploads"),Object(o.b)("p",null,"Use a file upload component (",Object(o.b)("inlineCode",{parentName:"p"},"ui.file_upload()"),") to accept file uploads from the browser. Files get uploaded from the browser and get stored on the Wave server. Use ",Object(o.b)("inlineCode",{parentName:"p"},"q.site.download()")," to download files from the Wave server to your app."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:"{8,12}","{8,12}":!0}),"from h2o_wave import Q, listen, ui\n\nasync def serve(q: Q):\n    paths = q.args.datasets\n    if not paths:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.text_xl('Upload datasets'),\n            ui.file_upload(name='datasets', label='Upload', multiple=True),\n        ])\n    else:\n        for path in paths:\n            local_path = await q.site.download(path, '.')\n            # Do something with the file located at local_path\n            # ...\n    await q.page.save()\n\nlisten('/uploads', serve)\n")),Object(o.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(o.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"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 ",Object(o.b)("inlineCode",{parentName:"p"},"q.site.unload()")," to delete it from the Wave server. "))),Object(o.b)("h2",{id:"provide-file-downloads"},"Provide file downloads"),Object(o.b)("p",null,"Use ",Object(o.b)("inlineCode",{parentName:"p"},"q.site.upload()")," to upload files from your app to the Wave server. Use the returned paths to display download links in the browser."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:"{4,6}","{4,6}":!0}),"from h2o_wave import Q, listen, ui\n\nasync def serve(q: Q):\n    download_path, = await q.site.upload(['results.csv'])\n    q.page['download'] = ui.form_card(box='1 1 2 2', items = [\n        ui.link(label='Download Results', path=download_path),\n    ])\n    await q.page.save()\n\nlisten('/downloads', serve)\n")),Object(o.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(o.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},Object(o.b)("inlineCode",{parentName:"p"},"q.site.upload()")," accepts a list of file paths, so you can upload multiple files at a time."))))}p.isMDXComponent=!0},290:function(e,t,a){"use strict";a.d(t,"a",(function(){return d})),a.d(t,"b",(function(){return m}));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 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 l(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function s(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=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<o;c++)i[c]=a[c];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,a)}b.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/879fc8a6.e5d1f893.js b/docs/879fc8a6.e5d1f893.js
new file mode 100644
index 0000000000..8833ade137
--- /dev/null
+++ b/docs/879fc8a6.e5d1f893.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[122],{176:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return u})),n.d(t,"rightToc",(function(){return b})),n.d(t,"default",(function(){return l}));var a=n(2),r=n(6),o=(n(0),n(292)),i={title:"Form / Button"},u={unversionedId:"examples/button",id:"examples/button",isDocsHomePage:!1,title:"Form / Button",description:"Use buttons to enable a user to commit a change or complete steps in a task.",source:"@site/docs/examples/button.md",slug:"/examples/button",permalink:"/wave/docs/examples/button",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/button.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Textbox / Trigger",permalink:"/wave/docs/examples/textbox-trigger"},next:{title:"Form / Buttons",permalink:"/wave/docs/examples/buttons"}},b=[],p={rightToc:b};function l(e){var t=e.components,i=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use buttons to enable a user to commit a change or complete steps in a task."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(386).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if 'basic_button' in q.args:\n        q.page['example'].items = [\n            ui.text(f'basic_button={q.args.basic_button}'),\n            ui.text(f'primary_button={q.args.primary_button}'),\n            ui.text(f'link_button={q.args.link_button}'),\n            ui.text(f'basic_disabled_button={q.args.basic_disabled_button}'),\n            ui.text(f'primary_disabled_button={q.args.primary_disabled_button}'),\n            ui.text(f'link_disabled_button={q.args.link_disabled_button}'),\n            ui.text(f'basic_compound_button={q.args.basic_compound_button}'),\n            ui.text(f'primary_compound_button={q.args.primary_compound_button}'),\n            ui.text(f'basic_compound_disabled_button={q.args.basic_compound_disabled_button}'),\n            ui.text(f'primary_compound_disabled_button={q.args.primary_compound_disabled_button}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.button(name='basic_button', label='Basic'),\n            ui.button(name='primary_button', label='Primary', primary=True),\n            ui.button(name='link_button', label='Link', link=True),\n            ui.button(name='basic_disabled_button', label='Basic (Disabled)', disabled=True),\n            ui.button(name='primary_disabled_button', label='Primary (Disabled)', primary=True, disabled=True),\n            ui.button(name='link_disabled_button', label='Link (Disabled)', link=True, disabled=True),\n            ui.button(name='basic_compound_button', label='Basic', caption='Compound Button.'),\n            ui.button(name='primary_compound_button', label='Primary', caption='Compound Button', primary=True),\n            ui.button(name='basic_compound_disabled_button', label='Basic (Disabled)', caption='Compound Button',\n                      disabled=True),\n            ui.button(name='primary_compound_disabled_button', label='Primary (Disabled)', caption='Compound Button',\n                      primary=True, disabled=True),\n        ])\n    await q.page.save()\n")))}l.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return m}));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 u(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function b(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=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<o;p++)i[p]=n[p];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,n)}c.displayName="MDXCreateElement"},386:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/879fc8a6.fbf02d84.js b/docs/879fc8a6.fbf02d84.js
deleted file mode 100644
index ce649d1f5f..0000000000
--- a/docs/879fc8a6.fbf02d84.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[120],{174:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return u})),n.d(t,"rightToc",(function(){return b})),n.d(t,"default",(function(){return l}));var a=n(2),r=n(6),o=(n(0),n(290)),i={title:"Form / Button"},u={unversionedId:"examples/button",id:"examples/button",isDocsHomePage:!1,title:"Form / Button",description:"Use buttons to enable a user to commit a change or complete steps in a task.",source:"@site/docs/examples/button.md",slug:"/examples/button",permalink:"/wave/docs/examples/button",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/button.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Textbox / Trigger",permalink:"/wave/docs/examples/textbox-trigger"},next:{title:"Form / Buttons",permalink:"/wave/docs/examples/buttons"}},b=[],p={rightToc:b};function l(e){var t=e.components,i=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use buttons to enable a user to commit a change or complete steps in a task."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(381).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    if 'basic_button' in q.args:\n        q.page['example'].items = [\n            ui.text(f'basic_button={q.args.basic_button}'),\n            ui.text(f'primary_button={q.args.primary_button}'),\n            ui.text(f'link_button={q.args.link_button}'),\n            ui.text(f'basic_disabled_button={q.args.basic_disabled_button}'),\n            ui.text(f'primary_disabled_button={q.args.primary_disabled_button}'),\n            ui.text(f'link_disabled_button={q.args.link_disabled_button}'),\n            ui.text(f'basic_compound_button={q.args.basic_compound_button}'),\n            ui.text(f'primary_compound_button={q.args.primary_compound_button}'),\n            ui.text(f'basic_compound_disabled_button={q.args.basic_compound_disabled_button}'),\n            ui.text(f'primary_compound_disabled_button={q.args.primary_compound_disabled_button}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.button(name='basic_button', label='Basic'),\n            ui.button(name='primary_button', label='Primary', primary=True),\n            ui.button(name='link_button', label='Link', link=True),\n            ui.button(name='basic_disabled_button', label='Basic (Disabled)', disabled=True),\n            ui.button(name='primary_disabled_button', label='Primary (Disabled)', primary=True, disabled=True),\n            ui.button(name='link_disabled_button', label='Link (Disabled)', link=True, disabled=True),\n            ui.button(name='basic_compound_button', label='Basic', caption='Compound Button.'),\n            ui.button(name='primary_compound_button', label='Primary', caption='Compound Button', primary=True),\n            ui.button(name='basic_compound_disabled_button', label='Basic (Disabled)', caption='Compound Button',\n                      disabled=True),\n            ui.button(name='primary_compound_disabled_button', label='Primary (Disabled)', caption='Compound Button',\n                      primary=True, disabled=True),\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 s})),n.d(t,"b",(function(){return m}));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 u(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function b(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=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<o;p++)i[p]=n[p];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,n)}c.displayName="MDXCreateElement"},381:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/883d6399.a175ce7a.js b/docs/883d6399.a175ce7a.js
new file mode 100644
index 0000000000..67a036c5e9
--- /dev/null
+++ b/docs/883d6399.a175ce7a.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[123],{177:function(e,n,a){"use strict";a.r(n),a.d(n,"frontMatter",(function(){return i})),a.d(n,"metadata",(function(){return l})),a.d(n,"rightToc",(function(){return c})),a.d(n,"default",(function(){return s}));var t=a(2),r=a(6),o=(a(0),a(292)),i={title:"Form"},l={unversionedId:"examples/form",id:"examples/form",isDocsHomePage:!1,title:"Form",description:"Use a form to collect data or show textual information.",source:"@site/docs/examples/form.md",slug:"/examples/form",permalink:"/wave/docs/examples/form",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/form.md",version:"current",sidebar:"someSidebar",previous:{title:"Layout / Size",permalink:"/wave/docs/examples/layout-size"},next:{title:"Form / Text",permalink:"/wave/docs/examples/text"}},c=[],u={rightToc:c};function s(e){var n=e.components,i=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(t.a)({},u,i,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use a form to collect data or show textual information."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+a(387).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeCategoricalSeries\nfrom h2o_wave import main, app, Q, ui, pack, data\nimport random\n\nhtml = '''\n<ol>\n    <li>Spam</li>\n    <li>Ham</li>\n    <li>Eggs</li>\n</ol>\n'''\nmenu = '''\n<ol>\n{{#each dishes}}\n<li><strong>{{name}}</strong> costs {{price}}</li>\n{{/each}}\n</ol\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'''\nf = FakeCategoricalSeries()\nn = 20\n\n\n# Generate random datum between 1 and 100\ndef rnd(): return random.randint(1, 100)\n\n\n@app('/demo')\nasync def serve(q: Q):\n    q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n        ui.text_xl(content='Extra-large text, for headings.'),\n        ui.text_l(content='Large text, for sub-headings.'),\n        ui.text_m(content='Body text, for paragraphs and other content.'),\n        ui.text_s(content='Small text, for small print.'),\n        ui.text_xs(content='Extra-small text, for really small print.'),\n        ui.separator(label='A separator sections forms'),\n        ui.progress(label='A progress bar'),\n        ui.progress(label='A progress bar'),\n        ui.message_bar(type='success', text='Message bar'),\n        ui.textbox(name='textbox', label='Textbox'),\n        ui.label(label='Checkboxes'),\n        ui.checkbox(name='checkbox1', label='A checkbox'),\n        ui.checkbox(name='checkbox1', label='Another checkbox'),\n        ui.checkbox(name='checkbox1', label='Yet another checkbox'),\n        ui.toggle(name='toggle', label='Toggle'),\n        ui.choice_group(name='choice_group', label='Choice group', choices=[\n            ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']\n        ]),\n        ui.checklist(name='checklist', label='Checklist', choices=[\n            ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']\n        ]),\n        ui.dropdown(name='dropdown', label='Dropdown', choices=[\n            ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']\n        ]),\n        ui.dropdown(name='dropdown', label='Multi-valued Dropdown', values=[], choices=[\n            ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']\n        ]),\n        ui.combobox(name='combobox', label='Combobox', choices=['Choice 1', 'Choice 2', 'Choice 3']),\n        ui.slider(name='slider', label='Slider'),\n        ui.range_slider(name='range_slider', label='Range slider', max=99),\n        ui.spinbox(name='spinbox', label='Spinbox'),\n        ui.date_picker(name='date_picker', label='Date picker'),\n        ui.color_picker(name='color_picker', label='Color picker'),\n        ui.buttons([\n            ui.button(name='primary_button', label='Primary', primary=True),\n            ui.button(name='standard_button', label='Standard'),\n            ui.button(name='standard_disabled_button', label='Standard', disabled=True),\n        ]),\n        ui.file_upload(name='file_upload', label='File upload'),\n        ui.table(name='table', columns=[\n            ui.table_column(name='col1', label='Column 1'),\n            ui.table_column(name='col2', label='Column 2'),\n        ], rows=[\n            ui.table_row(name='row1', cells=['Text A', 'Text B']),\n            ui.table_row(name='row2', cells=['Text C', 'Text D']),\n            ui.table_row(name='row3', cells=['Text E', 'Text F']),\n        ]),\n        ui.link(label='Link'),\n        ui.tabs(name='tabs', items=[\n            ui.tab(name='email', label='Mail', icon='Mail'),\n            ui.tab(name='events', label='Events', icon='Calendar'),\n            ui.tab(name='spam', label='Spam'),\n        ]),\n        ui.expander(name='expander', label='Expander'),\n        ui.frame(path='https://example.com'),\n        ui.markup(content=html),\n        ui.template(\n            content=menu,\n            data=pack(dict(dishes=[\n                dict(name='Spam', price='$2.00'),\n                dict(name='Ham', price='$3.45'),\n                dict(name='Eggs', price='$1.75'),\n            ]))\n        ),\n        ui.picker(name='picker', label='Picker', choices=[\n            ui.choice('choice1', label='Choice 1'),\n            ui.choice('choice2', label='Choice 2'),\n            ui.choice('choice3', label='Choice 3'),\n        ]),\n        ui.stepper(name='stepper', items=[\n            ui.step(label='Step 1', icon='MailLowImportance'),\n            ui.step(label='Step 2', icon='TaskManagerMirrored'),\n            ui.step(label='Step 3', icon='Cafe'),\n        ]),\n        ui.visualization(\n            plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),\n            data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True),\n        ),\n        ui.vega_visualization(\n            specification=spec,\n            data=data(fields=[\"a\", \"b\"], rows=[\n                [\"A\", rnd()], [\"B\", rnd()], [\"C\", rnd()],\n                [\"D\", rnd()], [\"E\", rnd()], [\"F\", rnd()],\n                [\"G\", rnd()], [\"H\", rnd()], [\"I\", rnd()]\n            ], pack=True),\n        ),\n        ui.button(name='show_inputs', label='Submit', primary=True),\n    ])\n    await q.page.save()\n")))}s.isMDXComponent=!0},292:function(e,n,a){"use strict";a.d(n,"a",(function(){return p})),a.d(n,"b",(function(){return d}));var t=a(0),r=a.n(t);function o(e,n,a){return n in e?Object.defineProperty(e,n,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[n]=a,e}function i(e,n){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),a.push.apply(a,t)}return a}function l(e){for(var n=1;n<arguments.length;n++){var a=null!=arguments[n]?arguments[n]:{};n%2?i(Object(a),!0).forEach((function(n){o(e,n,a[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(a,n))}))}return e}function c(e,n){if(null==e)return{};var a,t,r=function(e,n){if(null==e)return{};var a,t,r={},o=Object.keys(e);for(t=0;t<o.length;t++)a=o[t],n.indexOf(a)>=0||(r[a]=e[a]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)a=o[t],n.indexOf(a)>=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<o;u++)i[u]=a[u];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,a)}b.displayName="MDXCreateElement"},387:function(e,n,a){"use strict";a.r(n),n.default=a.p+"assets/images/form-b0f5fccd418b3d5e40f559cf1d60cb46.png"}}]);
\ No newline at end of file
diff --git a/docs/883d6399.c42cc20c.js b/docs/883d6399.c42cc20c.js
deleted file mode 100644
index f751ee86b3..0000000000
--- a/docs/883d6399.c42cc20c.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[121],{175:function(e,n,a){"use strict";a.r(n),a.d(n,"frontMatter",(function(){return i})),a.d(n,"metadata",(function(){return l})),a.d(n,"rightToc",(function(){return c})),a.d(n,"default",(function(){return s}));var t=a(2),r=a(6),o=(a(0),a(290)),i={title:"Form"},l={unversionedId:"examples/form",id:"examples/form",isDocsHomePage:!1,title:"Form",description:"Use a form to collect data or show textual information.",source:"@site/docs/examples/form.md",slug:"/examples/form",permalink:"/wave/docs/examples/form",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/form.md",version:"current",sidebar:"someSidebar",previous:{title:"Layout / Size",permalink:"/wave/docs/examples/layout-size"},next:{title:"Form / Text",permalink:"/wave/docs/examples/text"}},c=[],u={rightToc:c};function s(e){var n=e.components,i=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(t.a)({},u,i,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use a form to collect data or show textual information."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+a(382).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeCategoricalSeries\nfrom h2o_wave import Q, listen, ui, pack, data\nimport random\n\nhtml = '''\n<ol>\n    <li>Spam</li>\n    <li>Ham</li>\n    <li>Eggs</li>\n</ol>\n'''\nmenu = '''\n<ol>\n{{#each dishes}}\n<li><strong>{{name}}</strong> costs {{price}}</li>\n{{/each}}\n</ol\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'''\nf = FakeCategoricalSeries()\nn = 20\n\n\n# Generate random datum between 1 and 100\ndef rnd(): return random.randint(1, 100)\n\n\nasync def serve(q: Q):\n    q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n        ui.text_xl(content='Extra-large text, for headings.'),\n        ui.text_l(content='Large text, for sub-headings.'),\n        ui.text_m(content='Body text, for paragraphs and other content.'),\n        ui.text_s(content='Small text, for small print.'),\n        ui.text_xs(content='Extra-small text, for really small print.'),\n        ui.separator(label='A separator sections forms'),\n        ui.progress(label='A progress bar'),\n        ui.progress(label='A progress bar'),\n        ui.message_bar(type='success', text='Message bar'),\n        ui.textbox(name='textbox', label='Textbox'),\n        ui.label(label='Checkboxes'),\n        ui.checkbox(name='checkbox1', label='A checkbox'),\n        ui.checkbox(name='checkbox1', label='Another checkbox'),\n        ui.checkbox(name='checkbox1', label='Yet another checkbox'),\n        ui.toggle(name='toggle', label='Toggle'),\n        ui.choice_group(name='choice_group', label='Choice group', choices=[\n            ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']\n        ]),\n        ui.checklist(name='checklist', label='Checklist', choices=[\n            ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']\n        ]),\n        ui.dropdown(name='dropdown', label='Dropdown', choices=[\n            ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']\n        ]),\n        ui.dropdown(name='dropdown', label='Multi-valued Dropdown', values=[], choices=[\n            ui.choice(name=x, label=x) for x in ['Egg', 'Bacon', 'Spam']\n        ]),\n        ui.combobox(name='combobox', label='Combobox', choices=['Choice 1', 'Choice 2', 'Choice 3']),\n        ui.slider(name='slider', label='Slider'),\n        ui.range_slider(name='range_slider', label='Range slider', max=99),\n        ui.spinbox(name='spinbox', label='Spinbox'),\n        ui.date_picker(name='date_picker', label='Date picker'),\n        ui.color_picker(name='color_picker', label='Color picker'),\n        ui.buttons([\n            ui.button(name='primary_button', label='Primary', primary=True),\n            ui.button(name='standard_button', label='Standard'),\n            ui.button(name='standard_disabled_button', label='Standard', disabled=True),\n        ]),\n        ui.file_upload(name='file_upload', label='File upload'),\n        ui.table(name='table', columns=[\n            ui.table_column(name='col1', label='Column 1'),\n            ui.table_column(name='col2', label='Column 2'),\n        ], rows=[\n            ui.table_row(name='row1', cells=['Text A', 'Text B']),\n            ui.table_row(name='row2', cells=['Text C', 'Text D']),\n            ui.table_row(name='row3', cells=['Text E', 'Text F']),\n        ]),\n        ui.link(label='Link'),\n        ui.tabs(name='tabs', items=[\n            ui.tab(name='email', label='Mail', icon='Mail'),\n            ui.tab(name='events', label='Events', icon='Calendar'),\n            ui.tab(name='spam', label='Spam'),\n        ]),\n        ui.expander(name='expander', label='Expander'),\n        ui.frame(path='https://example.com'),\n        ui.markup(content=html),\n        ui.template(\n            content=menu,\n            data=pack(dict(dishes=[\n                dict(name='Spam', price='$2.00'),\n                dict(name='Ham', price='$3.45'),\n                dict(name='Eggs', price='$1.75'),\n            ]))\n        ),\n        ui.picker(name='picker', label='Picker', choices=[\n            ui.choice('choice1', label='Choice 1'),\n            ui.choice('choice2', label='Choice 2'),\n            ui.choice('choice3', label='Choice 3'),\n        ]),\n        ui.stepper(name='stepper', items=[\n            ui.step(label='Step 1', icon='MailLowImportance'),\n            ui.step(label='Step 2', icon='TaskManagerMirrored'),\n            ui.step(label='Step 3', icon='Cafe'),\n        ]),\n        ui.visualization(\n            plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', y_min=0)]),\n            data=data(fields='product price', rows=[(c, x) for c, x, _ in [f.next() for _ in range(n)]], pack=True),\n        ),\n        ui.vega_visualization(\n            specification=spec,\n            data=data(fields=[\"a\", \"b\"], rows=[\n                [\"A\", rnd()], [\"B\", rnd()], [\"C\", rnd()],\n                [\"D\", rnd()], [\"E\", rnd()], [\"F\", rnd()],\n                [\"G\", rnd()], [\"H\", rnd()], [\"I\", rnd()]\n            ], pack=True),\n        ),\n        ui.button(name='show_inputs', label='Submit', primary=True),\n    ])\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}s.isMDXComponent=!0},290:function(e,n,a){"use strict";a.d(n,"a",(function(){return p})),a.d(n,"b",(function(){return d}));var t=a(0),r=a.n(t);function o(e,n,a){return n in e?Object.defineProperty(e,n,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[n]=a,e}function i(e,n){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),a.push.apply(a,t)}return a}function l(e){for(var n=1;n<arguments.length;n++){var a=null!=arguments[n]?arguments[n]:{};n%2?i(Object(a),!0).forEach((function(n){o(e,n,a[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(a,n))}))}return e}function c(e,n){if(null==e)return{};var a,t,r=function(e,n){if(null==e)return{};var a,t,r={},o=Object.keys(e);for(t=0;t<o.length;t++)a=o[t],n.indexOf(a)>=0||(r[a]=e[a]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)a=o[t],n.indexOf(a)>=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<o;u++)i[u]=a[u];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,a)}b.displayName="MDXCreateElement"},382:function(e,n,a){"use strict";a.r(n),n.default=a.p+"assets/images/form-b0f5fccd418b3d5e40f559cf1d60cb46.png"}}]);
\ No newline at end of file
diff --git a/docs/887b127f.5b9fbd78.js b/docs/887b127f.5b9fbd78.js
new file mode 100644
index 0000000000..63bcfc6b60
--- /dev/null
+++ b/docs/887b127f.5b9fbd78.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[124],{178:function(e,n,r){"use strict";r.r(n),r.d(n,"frontMatter",(function(){return i})),r.d(n,"metadata",(function(){return l})),r.d(n,"rightToc",(function(){return s})),r.d(n,"default",(function(){return m}));var t=r(2),a=r(6),o=(r(0),r(292)),i={title:"Table / Filter / Backend"},l={unversionedId:"examples/table-filter-backend",id:"examples/table-filter-backend",isDocsHomePage:!1,title:"Table / Filter / Backend",description:"Filter table using Python",source:"@site/docs/examples/table-filter-backend.md",slug:"/examples/table-filter-backend",permalink:"/wave/docs/examples/table-filter-backend",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/table-filter-backend.md",version:"current",sidebar:"someSidebar",previous:{title:"Table / Filter",permalink:"/wave/docs/examples/table-filter"},next:{title:"Table / Download",permalink:"/wave/docs/examples/table-download"}},s=[],c={rightToc:s};function m(e){var n=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(t.a)({},c,i,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Filter table using Python"),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(388).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"import pandas as pd\nfrom faker import Faker\nfrom h2o_wave import main, app, Q, ui\n\nfake = Faker()\n\nN = 50  # number of rows\n\n# Make a synthetic data frame\naddresses = pd.DataFrame(dict(\n    ID=[i + 1 for i in range(N)],\n    Name=[fake.name() for _ in range(N)],\n    Language=[fake.language_name() for _ in range(N)],\n    Job=[fake.job() for _ in range(N)],\n    Address=[fake.address() for _ in range(N)],\n    City=[fake.city() for _ in range(N)],\n))\n\ncolumn_names = ['ID', 'Name', 'Language', 'Job', 'Address', 'City']\n\n\ndef df_to_rows(df: pd.DataFrame):\n    return [ui.table_row(row['ID'], [row[name] for name in column_names]) for i, row in df.iterrows()]\n\n\ndef search_df(df: pd.DataFrame, term: str):\n    str_cols = df.select_dtypes(include=[object])\n    return df[str_cols.apply(lambda column: column.str.contains(term, case=False, na=False)).any(axis=1)]\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if not q.client.initialized:\n        q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n            ui.textbox(name='search', label='Search', placeholder='Enter a keyword...', trigger=True),\n            ui.table(\n                name='issues',\n                columns=[ui.table_column(name=name, label=name) for name in column_names],\n                rows=df_to_rows(addresses)\n            )\n        ])\n        q.client.initialized = True\n    else:\n        items = q.page['form'].items\n        search_box = items[0].textbox\n        table = items[1].table\n        term: str = q.args.search\n        term = term.strip() if term else ''\n        search_box.value = term\n        table.rows = df_to_rows(search_df(addresses, term) if len(term) else addresses)\n\n    await q.page.save()\n")))}m.isMDXComponent=!0},292:function(e,n,r){"use strict";r.d(n,"a",(function(){return d})),r.d(n,"b",(function(){return p}));var t=r(0),a=r.n(t);function o(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function i(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<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?i(Object(r),!0).forEach((function(n){o(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function s(e,n){if(null==e)return{};var r,t,a=function(e,n){if(null==e)return{};var r,t,a={},o=Object.keys(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=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):l(l({},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=s(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,l(l({ref:n},c),{},{components:r})):a.a.createElement(p,l({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 l={};for(var s in n)hasOwnProperty.call(n,s)&&(l[s]=n[s]);l.originalType=e,l.mdxType="string"==typeof e?e:t,i[1]=l;for(var c=2;c<o;c++)i[c]=r[c];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},388:function(e,n,r){"use strict";r.r(n),n.default=r.p+"assets/images/table-filter-backend-e69a57efeee01d99d32a542a71466995.png"}}]);
\ No newline at end of file
diff --git a/docs/887b127f.abe5016d.js b/docs/887b127f.abe5016d.js
deleted file mode 100644
index 21a6a88efd..0000000000
--- a/docs/887b127f.abe5016d.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[122],{176:function(e,n,r){"use strict";r.r(n),r.d(n,"frontMatter",(function(){return i})),r.d(n,"metadata",(function(){return s})),r.d(n,"rightToc",(function(){return l})),r.d(n,"default",(function(){return m}));var t=r(2),a=r(6),o=(r(0),r(290)),i={title:"Table / Filter / Backend"},s={unversionedId:"examples/table-filter-backend",id:"examples/table-filter-backend",isDocsHomePage:!1,title:"Table / Filter / Backend",description:"Filter table using Python",source:"@site/docs/examples/table-filter-backend.md",slug:"/examples/table-filter-backend",permalink:"/wave/docs/examples/table-filter-backend",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/table-filter-backend.md",version:"current",sidebar:"someSidebar",previous:{title:"Table / Filter",permalink:"/wave/docs/examples/table-filter"},next:{title:"Table / Download",permalink:"/wave/docs/examples/table-download"}},l=[],c={rightToc:l};function m(e){var n=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(t.a)({},c,i,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Filter table using Python"),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(383).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"import pandas as pd\nfrom faker import Faker\nfrom h2o_wave import Q, listen, ui\n\nfake = Faker()\n\nN = 50  # number of rows\n\n# Make a synthetic data frame\naddresses = pd.DataFrame(dict(\n    ID=[i + 1 for i in range(N)],\n    Name=[fake.name() for _ in range(N)],\n    Language=[fake.language_name() for _ in range(N)],\n    Job=[fake.job() for _ in range(N)],\n    Address=[fake.address() for _ in range(N)],\n    City=[fake.city() for _ in range(N)],\n))\n\ncolumn_names = ['ID', 'Name', 'Language', 'Job', 'Address', 'City']\n\n\ndef df_to_rows(df: pd.DataFrame):\n    return [ui.table_row(row['ID'], [row[name] for name in column_names]) for i, row in df.iterrows()]\n\n\ndef search_df(df: pd.DataFrame, term: str):\n    str_cols = df.select_dtypes(include=[object])\n    return df[str_cols.apply(lambda column: column.str.contains(term, case=False, na=False)).any(axis=1)]\n\n\nasync def serve(q: Q):\n    if not q.client.initialized:\n        q.page['form'] = ui.form_card(box='1 1 -1 11', items=[\n            ui.textbox(name='search', label='Search', placeholder='Enter a keyword...', trigger=True),\n            ui.table(\n                name='issues',\n                columns=[ui.table_column(name=name, label=name) for name in column_names],\n                rows=df_to_rows(addresses)\n            )\n        ])\n        q.client.initialized = True\n    else:\n        items = q.page['form'].items\n        search_box = items[0].textbox\n        table = items[1].table\n        term: str = q.args.search\n        term = term.strip() if term else ''\n        search_box.value = term\n        table.rows = df_to_rows(search_df(addresses, term) if len(term) else addresses)\n\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}m.isMDXComponent=!0},290:function(e,n,r){"use strict";r.d(n,"a",(function(){return d})),r.d(n,"b",(function(){return p}));var t=r(0),a=r.n(t);function o(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function i(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 s(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?i(Object(r),!0).forEach((function(n){o(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function l(e,n){if(null==e)return{};var r,t,a=function(e,n){if(null==e)return{};var r,t,a={},o=Object.keys(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)r=o[t],n.indexOf(r)>=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<o;c++)i[c]=r[c];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},383:function(e,n,r){"use strict";r.r(n),n.default=r.p+"assets/images/table-filter-backend-e69a57efeee01d99d32a542a71466995.png"}}]);
\ No newline at end of file
diff --git a/docs/88c2f924.37061093.js b/docs/88c2f924.37061093.js
new file mode 100644
index 0000000000..9ab605a8f8
--- /dev/null
+++ b/docs/88c2f924.37061093.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[125],{179:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return l})),t.d(n,"metadata",(function(){return s})),t.d(n,"rightToc",(function(){return o})),t.d(n,"default",(function(){return f}));var i=t(2),r=t(6),a=(t(0),t(292)),l={title:"Table / Download"},s={unversionedId:"examples/table-download",id:"examples/table-download",isDocsHomePage:!1,title:"Table / Download",description:"Allow downloading a table's data as CSV file.",source:"@site/docs/examples/table-download.md",slug:"/examples/table-download",permalink:"/wave/docs/examples/table-download",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/table-download.md",version:"current",sidebar:"someSidebar",previous:{title:"Table / Filter / Backend",permalink:"/wave/docs/examples/table-filter-backend"},next:{title:"Table / Group by",permalink:"/wave/docs/examples/table-groupby"}},o=[],u={rightToc:o};function f(e){var n=e.components,l=Object(r.a)(e,["components"]);return Object(a.b)("wrapper",Object(i.a)({},u,l,{components:n,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Allow downloading a table's data as CSV file."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+t(389).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(i.a)({parentName:"pre"},{className:"language-py"}),"import random\nfrom faker import Faker\nfrom h2o_wave import main, app, Q, ui\n\nfake = Faker()\n\n_id = 0\n\n\nclass Issue:\n    def __init__(self, text: str, status: str, progress: float, icon: str, notifications: str):\n        global _id\n        _id += 1\n        self.id = f'I{_id}'\n        self.text = text\n        self.status = status\n        self.views = 0\n        self.progress = progress\n        self.icon = icon\n        self.notifications = notifications\n\n\n# Create some issues\nissues = [\n    Issue(\n        text=fake.sentence(),\n        status=('Closed' if i % 2 == 0 else 'Open'),\n        progress=random.random(),\n        icon=('BoxCheckmarkSolid' if random.random() > 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\n@app('/demo')\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")))}f.isMDXComponent=!0},292: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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?l(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):l(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function o(e,n){if(null==e)return{};var t,i,r=function(e,n){if(null==e)return{};var t,i,r={},a=Object.keys(e);for(i=0;i<a.length;i++)t=a[i],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i<a.length;i++)t=a[i],n.indexOf(t)>=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)},p={inlineCode:"code",wrapper:function(e){var n=e.children;return r.a.createElement(r.a.Fragment,{},n)}},d=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),d=i,A=c["".concat(l,".").concat(d)]||c[d]||p[d]||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]=d;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<a;u++)l[u]=t[u];return r.a.createElement.apply(null,l)}return r.a.createElement.apply(null,t)}d.displayName="MDXCreateElement"},389:function(e,n,t){"use strict";t.r(n),n.default="data:image/png;base64,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z/g6bN0OfQvwvfxU+7Ut7UIBJSItlxHA9+KTTkit2UBkwlexl69u82btD4qJTLwAe/NWyMvF/9Y86KyVy080CigRaZ2cLHxv/A3j29NgWynRqd/AuvU/4XObEiaL/cjTRC+YAQeqMAYPxL/4NejXu03aEnfpHpSIJI019ymsm+9wNjUc2A/zumswZ10OgfRWv7f91Dysh56M9dCMa2bie/DuVr+veJcCSkSSyl65huiMH8COQ9uzZ2ZgXv4tjNmzMIYWJvhe67CffxHruZehrNw52K83vrtuw/iXC5NcuXiNAkpE2oT1349g/fl/YFvp4YNdT8IYWohxylAYMghj+GCMMSOgU6bT69q3H3tpCdaiZdgvv3k45A5da/7bjzBnz2r/H0ZcoYASkTZlz38F68HHsRd92KLrjfOmYn7jAoxvX5KUoULpOBRQItJu7Hfew/6gGHvxMuwt2476gK8x8mSMcSMxzp6McfH5CqUvMQWUiIh4kqaZi4iIJymgRETEkxRQIiLiSQooERHxJAWUiIh4kgJKREQ8SQElIiKepIASERFPUkCJiIgnKaBERMSTFFAiIuJJCigREfEkBZSIiHiSAkpERDxJASUiIp6kgBIREU9SQIlIu7vjjju444473C5DPE4BJSIinqSAEpEOa+nSpYwbOyb2a+oZU/jed7/L+++/72pdt/zsZh566C9t2sbECePZsGFD3K9fu3YtRZMntWFFyaeAEpEOLSUlhVdefY1XXn2Nhx5+mKKiIm79xc95+umn3C6tQ5s/fz6zZl3jag1+V1sXEWklwzDo2bMnAD179mTo0GEMGTqEm268kbPOOptevXq5XKG0lHpQInLCmThxEkOGDOWdt9+OHVu7di2zZl3DpIkT+NrFF/HsM8/Ezt1++79z1113xr5/7733GDd2DOvXr48d+9H1s5n78MMAnH3Wmbz66qt859uXM3HCeC6fOYNNGzces57jtQ1QVlbGL37+c84+60ymnjGFX912GwcPHoydLy8v50fXz2bypIlcfNGFlCxf3uz/g2XLPuTyy2cyccJ4rrn6KioqKuJu849//AN33flbVq9axbixY3jxhRfiqjPZFFAickIaPXo0H2/5GICysl1cd+0PmVI0hefnz+cXt/6Sxx//n1hQFBUVsbS4OHbth0uX4vf7WfbhhwA0NDSwYsUKJhcVxV7z9FNP8qt/v52333mXwsGDufXWXxy1jubatm2bn9x0EwCPP/EkTz71NDt3lvLgnx8AIBwOc921PyQ3N49nnnmWO+/6HQ899Bcikcgxf/bt27fz4x/9mAu+egHz//f/uOLKK/nv/5oTO99cmzfd9BN+evPNDBs2jCXFS/n6N77R7DVtQQElIm2urKyMhoaGY55vaGigrKwsqW1mZWVRU10NwLzn5nHqqadxzaxZ9OpVwKRJk7jppp/wxBOPY9s2EydOYvfu3ezevRuA4qXFfOeKK1i61AmtVatWkpGZybBhw2LvP2PGTIYMGUJWVhY//OG1bN++94pyFgAABIRJREFUnQMHDnyhjubaNgyDRx97jP/4zW/o06cPffv25aKLLmb16tUALFq0kNraWm6/4w769uvHyJEjuW72bCzLOubP/vzz85gypYgrrrySXr16cfbZ5/C1r389dr65Nn0+H6mpaaSmpZGamoppms1e0xZ0D0pE2tzvf/97SktLef7550lJSWlyLhKJMGPGDLp3784DDyTvX+PV1dVk5+QAsHnzJk4/fXyT86NGj6ayspL9+/bRuUsXRo4cxdLiYiZNnkzVgQNceeVVXHThBYTDYYqLi5k0aRKGYcSu7927d+y/cw61U1dXR25ubpN24mnbNAzeeON11q9bx85du9iwfj1du3YFYOuWrQwdOhS///DH9dChwzDNY/cvtm7ZysRJE5scGz785CbfH6/NY2nJNa2hHpSItLl7770X0zSZPn16k6GpSCTC9OnTiUaj3HfffUltc9XqVQwZPAQA26ZJuBxNUVERxcVLWLq0mPHjx5OTk8PAgYNYtWoVxUuKKTpieC8RzbVdV1vLd674Dm+8/jqFg4cw65pZzJ59fZPXRKLRz72njW3bx203Gml6jXXEe8TTZkvqTDYFlIi0Ob/fz3PPPYdlWcyYMYNIJBLrOUUikaP2rFpjwYIP+Hjzx5z3la8AMGTIEJZ/bmLB8mXLyM/PJ69zZwAmFxXx4bJlLFm8hPETJgAwYcIE3n77LbZu3cKECU17JPFqru2PPvqIPRUV3P/An5k2bRqnnnZak6HCQYMGsfGjj6irrY0d27B+/XEDalDhIEpWlDQ5tn7D4QkfzbUJYBg46ZrANcmmgBKRdpGSksK8efMIh8PMmTOHOXPmEA6HWx1Otm3H7h9t2LCBuQ8/zL/dcgs33nQj3bt3B+Cy6ZexatVKHn7oIcrKyli8eDH3/ulerr76mljvprCwkEB6Ou+++04sjCZMnMBLL77IKaeMICsrq0X1Ndd2Qe8CwuEwr7/2GuXl5bz77rvMm/dc7PpJkyeTm5vL7bffzo7t21m9ejUPPvggqampx2zz0mmXsqKkhEcffYSysjLeffdd3nrrrdj55toEOOmkfLZt20ZJSQk1NTVxXZNsCigRaTepqanMnz+fqVOnMnXqVObPn3/cD9p4NDQ08LWLL+JrF1/E7OuupaSkhLvv/gPTp8+IvaZXrwL+8tBDFBcv4dJpl3DXnb/l+//6fWbMnNnkvSZPLqJv375069YNgJEjR5EeCLR4eC+etrt1684f/ngPc+c+zKXTLuHll1/iiiuujF2fmprK/Q/8mbpgHTNnzuBXt93G7OtnEwgEjtlm3379uG/Of/HuO+8w7ZJv8bdnn+WWn90SO99cmwBTpkzhK+efz4033sBbb74Z1zXJZtjNDWSKiCRZKBTCMIxWh5Oc2BRQIiLiSRriE5E2d8cdd2AYxnF/afsN+Tz1oERExJPUgxIREU9SQImIiCcpoERExJMUUCIi4kkKKBER8SQFlIiIeJICSkREPEkBJSIinqSAEhERT1JAiYiIJymgRETEkxRQIiLiSQooERHxpP8HRD0aACVCyDwAAAAASUVORK5CYII="}}]);
\ No newline at end of file
diff --git a/docs/88c2f924.d842741f.js b/docs/88c2f924.d842741f.js
deleted file mode 100644
index dd0f5da0b9..0000000000
--- a/docs/88c2f924.d842741f.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[123],{177:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return l})),t.d(n,"metadata",(function(){return s})),t.d(n,"rightToc",(function(){return o})),t.d(n,"default",(function(){return f}));var i=t(2),r=t(6),a=(t(0),t(290)),l={title:"Table / Download"},s={unversionedId:"examples/table-download",id:"examples/table-download",isDocsHomePage:!1,title:"Table / Download",description:"Allow downloading a table's data as CSV file.",source:"@site/docs/examples/table-download.md",slug:"/examples/table-download",permalink:"/wave/docs/examples/table-download",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/table-download.md",version:"current",sidebar:"someSidebar",previous:{title:"Table / Filter / Backend",permalink:"/wave/docs/examples/table-filter-backend"},next:{title:"Table / Group by",permalink:"/wave/docs/examples/table-groupby"}},o=[],u={rightToc:o};function f(e){var n=e.components,l=Object(r.a)(e,["components"]);return Object(a.b)("wrapper",Object(i.a)({},u,l,{components:n,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Allow downloading a table's data as CSV file."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+t(384).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(i.a)({parentName:"pre"},{className:"language-py"}),"import random\nfrom faker import Faker\nfrom h2o_wave import Q, listen, ui\n\nfake = Faker()\n\n_id = 0\n\n\nclass Issue:\n    def __init__(self, text: str, status: str, progress: float, icon: str, notifications: str):\n        global _id\n        _id += 1\n        self.id = f'I{_id}'\n        self.text = text\n        self.status = status\n        self.views = 0\n        self.progress = progress\n        self.icon = icon\n        self.notifications = notifications\n\n\n# Create some issues\nissues = [\n    Issue(\n        text=fake.sentence(),\n        status=('Closed' if i % 2 == 0 else 'Open'),\n        progress=random.random(),\n        icon=('BoxCheckmarkSolid' if random.random() > 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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?l(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):l(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function o(e,n){if(null==e)return{};var t,i,r=function(e,n){if(null==e)return{};var t,i,r={},a=Object.keys(e);for(i=0;i<a.length;i++)t=a[i],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i<a.length;i++)t=a[i],n.indexOf(t)>=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<a;u++)l[u]=t[u];return r.a.createElement.apply(null,l)}return r.a.createElement.apply(null,t)}p.displayName="MDXCreateElement"},384:function(e,n,t){"use strict";t.r(n),n.default="data:image/png;base64,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z/g6bN0OfQvwvfxU+7Ut7UIBJSItlxHA9+KTTkit2UBkwlexl69u82btD4qJTLwAe/NWyMvF/9Y86KyVy080CigRaZ2cLHxv/A3j29NgWynRqd/AuvU/4XObEiaL/cjTRC+YAQeqMAYPxL/4NejXu03aEnfpHpSIJI019ymsm+9wNjUc2A/zumswZ10OgfRWv7f91Dysh56M9dCMa2bie/DuVr+veJcCSkSSyl65huiMH8COQ9uzZ2ZgXv4tjNmzMIYWJvhe67CffxHruZehrNw52K83vrtuw/iXC5NcuXiNAkpE2oT1349g/fl/YFvp4YNdT8IYWohxylAYMghj+GCMMSOgU6bT69q3H3tpCdaiZdgvv3k45A5da/7bjzBnz2r/H0ZcoYASkTZlz38F68HHsRd92KLrjfOmYn7jAoxvX5KUoULpOBRQItJu7Hfew/6gGHvxMuwt2476gK8x8mSMcSMxzp6McfH5CqUvMQWUiIh4kqaZi4iIJymgRETEkxRQIiLiSQooERHxJAWUiIh4kgJKREQ8SQElIiKepIASERFPUkCJiIgnKaBERMSTFFAiIuJJCigREfEkBZSIiHiSAkpERDxJASUiIp6kgBIREU9SQIlIu7vjjju444473C5DPE4BJSIinqSAEpEOa+nSpYwbOyb2a+oZU/jed7/L+++/72pdt/zsZh566C9t2sbECePZsGFD3K9fu3YtRZMntWFFyaeAEpEOLSUlhVdefY1XXn2Nhx5+mKKiIm79xc95+umn3C6tQ5s/fz6zZl3jag1+V1sXEWklwzDo2bMnAD179mTo0GEMGTqEm268kbPOOptevXq5XKG0lHpQInLCmThxEkOGDOWdt9+OHVu7di2zZl3DpIkT+NrFF/HsM8/Ezt1++79z1113xr5/7733GDd2DOvXr48d+9H1s5n78MMAnH3Wmbz66qt859uXM3HCeC6fOYNNGzces57jtQ1QVlbGL37+c84+60ymnjGFX912GwcPHoydLy8v50fXz2bypIlcfNGFlCxf3uz/g2XLPuTyy2cyccJ4rrn6KioqKuJu849//AN33flbVq9axbixY3jxhRfiqjPZFFAickIaPXo0H2/5GICysl1cd+0PmVI0hefnz+cXt/6Sxx//n1hQFBUVsbS4OHbth0uX4vf7WfbhhwA0NDSwYsUKJhcVxV7z9FNP8qt/v52333mXwsGDufXWXxy1jubatm2bn9x0EwCPP/EkTz71NDt3lvLgnx8AIBwOc921PyQ3N49nnnmWO+/6HQ899Bcikcgxf/bt27fz4x/9mAu+egHz//f/uOLKK/nv/5oTO99cmzfd9BN+evPNDBs2jCXFS/n6N77R7DVtQQElIm2urKyMhoaGY55vaGigrKwsqW1mZWVRU10NwLzn5nHqqadxzaxZ9OpVwKRJk7jppp/wxBOPY9s2EydOYvfu3ezevRuA4qXFfOeKK1i61AmtVatWkpGZybBhw2LvP2PGTIYMGUJWVhY//OG1bN++94pyFgAABIRJREFUnQMHDnyhjubaNgyDRx97jP/4zW/o06cPffv25aKLLmb16tUALFq0kNraWm6/4w769uvHyJEjuW72bCzLOubP/vzz85gypYgrrrySXr16cfbZ5/C1r389dr65Nn0+H6mpaaSmpZGamoppms1e0xZ0D0pE2tzvf/97SktLef7550lJSWlyLhKJMGPGDLp3784DDyTvX+PV1dVk5+QAsHnzJk4/fXyT86NGj6ayspL9+/bRuUsXRo4cxdLiYiZNnkzVgQNceeVVXHThBYTDYYqLi5k0aRKGYcSu7927d+y/cw61U1dXR25ubpN24mnbNAzeeON11q9bx85du9iwfj1du3YFYOuWrQwdOhS///DH9dChwzDNY/cvtm7ZysRJE5scGz785CbfH6/NY2nJNa2hHpSItLl7770X0zSZPn16k6GpSCTC9OnTiUaj3HfffUltc9XqVQwZPAQA26ZJuBxNUVERxcVLWLq0mPHjx5OTk8PAgYNYtWoVxUuKKTpieC8RzbVdV1vLd674Dm+8/jqFg4cw65pZzJ59fZPXRKLRz72njW3bx203Gml6jXXEe8TTZkvqTDYFlIi0Ob/fz3PPPYdlWcyYMYNIJBLrOUUikaP2rFpjwYIP+Hjzx5z3la8AMGTIEJZ/bmLB8mXLyM/PJ69zZwAmFxXx4bJlLFm8hPETJgAwYcIE3n77LbZu3cKECU17JPFqru2PPvqIPRUV3P/An5k2bRqnnnZak6HCQYMGsfGjj6irrY0d27B+/XEDalDhIEpWlDQ5tn7D4QkfzbUJYBg46ZrANcmmgBKRdpGSksK8efMIh8PMmTOHOXPmEA6HWx1Otm3H7h9t2LCBuQ8/zL/dcgs33nQj3bt3B+Cy6ZexatVKHn7oIcrKyli8eDH3/ulerr76mljvprCwkEB6Ou+++04sjCZMnMBLL77IKaeMICsrq0X1Ndd2Qe8CwuEwr7/2GuXl5bz77rvMm/dc7PpJkyeTm5vL7bffzo7t21m9ejUPPvggqampx2zz0mmXsqKkhEcffYSysjLeffdd3nrrrdj55toEOOmkfLZt20ZJSQk1NTVxXZNsCigRaTepqanMnz+fqVOnMnXqVObPn3/cD9p4NDQ08LWLL+JrF1/E7OuupaSkhLvv/gPTp8+IvaZXrwL+8tBDFBcv4dJpl3DXnb/l+//6fWbMnNnkvSZPLqJv375069YNgJEjR5EeCLR4eC+etrt1684f/ngPc+c+zKXTLuHll1/iiiuujF2fmprK/Q/8mbpgHTNnzuBXt93G7OtnEwgEjtlm3379uG/Of/HuO+8w7ZJv8bdnn+WWn90SO99cmwBTpkzhK+efz4033sBbb74Z1zXJZtjNDWSKiCRZKBTCMIxWh5Oc2BRQIiLiSRriE5E2d8cdd2AYxnF/afsN+Tz1oERExJPUgxIREU9SQImIiCcpoERExJMUUCIi4kkKKBER8SQFlIiIeJICSkREPEkBJSIinqSAEhERT1JAiYiIJymgRETEkxRQIiLiSQooERHxpP8HRD0aACVCyDwAAAAASUVORK5CYII="}}]);
\ No newline at end of file
diff --git a/docs/8954e356.31b01aa7.js b/docs/8954e356.31b01aa7.js
new file mode 100644
index 0000000000..3e2e212e1b
--- /dev/null
+++ b/docs/8954e356.31b01aa7.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[126],{180:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return p})),n.d(t,"metadata",(function(){return o})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return l}));var r=n(2),a=n(6),i=(n(0),n(292)),p={title:"Graphics / Primitives"},o={unversionedId:"examples/graphics-primitives",id:"examples/graphics-primitives",isDocsHomePage:!1,title:"Graphics / Primitives",description:"Use the graphics module to render and update shapes.",source:"@site/docs/examples/graphics-primitives.md",slug:"/examples/graphics-primitives",permalink:"/wave/docs/examples/graphics-primitives",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-primitives.md",version:"current",sidebar:"someSidebar",previous:{title:"Site / Async",permalink:"/wave/docs/examples/site-async"},next:{title:"Graphics / Spline",permalink:"/wave/docs/examples/graphics-spline"}},c=[],s={rightToc:c};function l(e){var t=e.components,p=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(r.a)({},s,p,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Use the graphics module to render and update shapes."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+n(390).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui, graphics as g\n\n# Create some shapes\narc = g.arc(r1=25, r2=50, a1=90, a2=180)\ncircle = g.circle(cx=25, cy=25, r=25)\nellipse = g.ellipse(cx=25, cy=25, rx=25, ry=20)\nimage = g.image(width=50, height=50, href='https://www.python.org/static/community_logos/python-powered-h-140x182.png')\nline = g.line(x1=0, y1=0, x2=50, y2=50)\npath = g.path(d='M 0,0 L 50,50 L 50,0 L 0,50 z')\npath2 = 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.\npath3 = 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.\npolygon = g.polygon(points='0,0 50,50 50,0 0,50')\npolyline = g.polyline(points='0,0 50,50 50,0 0,50')\nrect = g.rect(x=0, y=0, width=50, height=50)\nrounded_rect = g.rect(x=0, y=0, width=50, height=50, rx=10)\ntext = g.text(x=0, y=48, text='Z', font_size='4em')\n\n# Collect 'em all\nshapes = [arc, circle, ellipse, image, line, path, path2, path3, polygon, polyline, rect, rounded_rect, text]\n\n# Apply fill/stroke for each shape\nfor shape in shapes:\n    shape.fill = 'none' if g.type_of(shape) == 'polyline' else 'crimson'\n    shape.stroke = 'darkred'\n    shape.stroke_width = 5\n\n# Lay out shapes vertically\ny = 10\nfor shape in shapes:\n    shape.transform = f'translate(10,{y})'\n    y += 60\n\n# Add shapes to the graphics card\npage = site['/demo']\npage['example'] = ui.graphics_card(\n    box='1 1 1 10', view_box='0 0 70 800', width='100%', height='100%',\n    stage=g.stage(\n        arc=arc,\n        circle=circle,\n        ellipse=ellipse,\n        image=image,\n        line=line,\n        path=path,\n        path2=path2,\n        path3=path3,\n        polygon=polygon,\n        polyline=polyline,\n        rect=rect,\n        rounded_rect=rounded_rect,\n        text=text,\n    ),\n)\n\npage.save()\n")))}l.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return g}));var r=n(0),a=n.n(r);function i(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 o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=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):o(o({},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,p=e.parentName,s=c(e,["components","mdxType","originalType","parentName"]),u=l(n),m=r,g=u["".concat(p,".").concat(m)]||u[m]||h[m]||i;return n?a.a.createElement(g,o(o({ref:t},s),{},{components:n})):a.a.createElement(g,o({ref:t},s))}));function g(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,p=new Array(i);p[0]=m;var o={};for(var c in t)hasOwnProperty.call(t,c)&&(o[c]=t[c]);o.originalType=e,o.mdxType="string"==typeof e?e:r,p[1]=o;for(var s=2;s<i;s++)p[s]=n[s];return a.a.createElement.apply(null,p)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},390:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/graphics-primitives-069da2917a0f9226163992fa997d7064.png"}}]);
\ No newline at end of file
diff --git a/docs/8954e356.7546d395.js b/docs/8954e356.7546d395.js
deleted file mode 100644
index 8ad9bc34c8..0000000000
--- a/docs/8954e356.7546d395.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[124],{178:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return l}));var r=n(2),a=n(6),i=(n(0),n(290)),o={title:"Graphics / Primitives"},p={unversionedId:"examples/graphics-primitives",id:"examples/graphics-primitives",isDocsHomePage:!1,title:"Graphics / Primitives",description:"Use the graphics module to render and update shapes.",source:"@site/docs/examples/graphics-primitives.md",slug:"/examples/graphics-primitives",permalink:"/wave/docs/examples/graphics-primitives",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-primitives.md",version:"current",sidebar:"someSidebar",previous:{title:"Mode / Unicast",permalink:"/wave/docs/examples/counter-unicast"},next:{title:"Graphics / Spline",permalink:"/wave/docs/examples/graphics-spline"}},c=[],s={rightToc:c};function l(e){var t=e.components,o=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(r.a)({},s,o,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Use the graphics module to render and update shapes."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+n(385).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui, graphics as g\n\n# Create some shapes\narc = g.arc(r1=25, r2=50, a1=90, a2=180)\ncircle = g.circle(cx=25, cy=25, r=25)\nellipse = g.ellipse(cx=25, cy=25, rx=25, ry=20)\nimage = g.image(width=50, height=50, href='https://www.python.org/static/community_logos/python-powered-h-140x182.png')\nline = g.line(x1=0, y1=0, x2=50, y2=50)\npath = g.path(d='M 0,0 L 50,50 L 50,0 L 0,50 z')\npath2 = 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.\npath3 = 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.\npolygon = g.polygon(points='0,0 50,50 50,0 0,50')\npolyline = g.polyline(points='0,0 50,50 50,0 0,50')\nrect = g.rect(x=0, y=0, width=50, height=50)\nrounded_rect = g.rect(x=0, y=0, width=50, height=50, rx=10)\ntext = g.text(x=0, y=48, text='Z', font_size='4em')\n\n# Collect 'em all\nshapes = [arc, circle, ellipse, image, line, path, path2, path3, polygon, polyline, rect, rounded_rect, text]\n\n# Apply fill/stroke for each shape\nfor shape in shapes:\n    shape.fill = 'none' if g.type_of(shape) == 'polyline' else 'crimson'\n    shape.stroke = 'darkred'\n    shape.stroke_width = 5\n\n# Lay out shapes vertically\ny = 10\nfor shape in shapes:\n    shape.transform = f'translate(10,{y})'\n    y += 60\n\n# Add shapes to the graphics card\npage = site['/demo']\npage['example'] = ui.graphics_card(\n    box='1 1 1 10', view_box='0 0 70 800', width='100%', height='100%',\n    stage=g.stage(\n        arc=arc,\n        circle=circle,\n        ellipse=ellipse,\n        image=image,\n        line=line,\n        path=path,\n        path2=path2,\n        path3=path3,\n        polygon=polygon,\n        polyline=polyline,\n        rect=rect,\n        rounded_rect=rounded_rect,\n        text=text,\n    ),\n)\n\npage.save()\n")))}l.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return d}));var r=n(0),a=n.n(r);function i(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 p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=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<i;s++)o[s]=n[s];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},385:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/graphics-primitives-069da2917a0f9226163992fa997d7064.png"}}]);
\ No newline at end of file
diff --git a/docs/8c12d624.0b6c818a.js b/docs/8c12d624.0b6c818a.js
new file mode 100644
index 0000000000..ef4e919775
--- /dev/null
+++ b/docs/8c12d624.0b6c818a.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[127],{181:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return u})),n.d(t,"default",(function(){return s}));var c=n(2),r=n(6),a=(n(0),n(292)),o={title:"Form / Checkbox"},i={unversionedId:"examples/checkbox",id:"examples/checkbox",isDocsHomePage:!1,title:"Form / Checkbox",description:"Use checkboxes to switch between two mutually exclusive options.",source:"@site/docs/examples/checkbox.md",slug:"/examples/checkbox",permalink:"/wave/docs/examples/checkbox",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/checkbox.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Buttons",permalink:"/wave/docs/examples/buttons"},next:{title:"Form / Checklist",permalink:"/wave/docs/examples/checklist"}},u=[],l={rightToc:u};function s(e){var t=e.components,o=Object(r.a)(e,["components"]);return Object(a.b)("wrapper",Object(c.a)({},l,o,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use checkboxes to switch between two mutually exclusive options."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(391).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(c.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'checkbox_unchecked={q.args.checkbox_unchecked}'),\n            ui.text(f'checkbox_checked={q.args.checkbox_checked}'),\n            ui.text(f'checkbox_indeterminate={q.args.checkbox_indeterminate}'),\n            ui.text(f'checkbox_unchecked_disabled={q.args.checkbox_unchecked_disabled}'),\n            ui.text(f'checkbox_checked_disabled={q.args.checkbox_checked_disabled}'),\n            ui.text(f'checkbox_indeterminate_disabled={q.args.checkbox_indeterminate_disabled}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.checkbox(name='checkbox_unchecked', label='Not checked'),\n            ui.checkbox(name='checkbox_checked', label='Checked', value=True),\n            ui.checkbox(name='checkbox_indeterminate', label='Indeterminate', indeterminate=True),\n            ui.checkbox(name='checkbox_unchecked_disabled', label='Not checked (Disabled)', disabled=True),\n            ui.checkbox(name='checkbox_checked_disabled', label='Checked (Disabled)', value=True, disabled=True),\n            ui.checkbox(name='checkbox_indeterminate_disabled', label='Indeterminate (Disabled)', indeterminate=True,\n                        disabled=True),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n")))}s.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return b})),n.d(t,"b",(function(){return m}));var c=n(0),r=n.n(c);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 o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);t&&(c=c.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,c)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t){if(null==e)return{};var n,c,r=function(e,t){if(null==e)return{};var n,c,r={},a=Object.keys(e);for(c=0;c<a.length;c++)n=a[c],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(c=0;c<a.length;c++)n=a[c],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=r.a.createContext({}),s=function(e){var t=r.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},b=function(e){var t=s(e.components);return r.a.createElement(l.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,l=u(e,["components","mdxType","originalType","parentName"]),b=s(n),p=c,m=b["".concat(o,".").concat(p)]||b[p]||d[p]||a;return n?r.a.createElement(m,i(i({ref:t},l),{},{components:n})):r.a.createElement(m,i({ref:t},l))}));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 u in t)hasOwnProperty.call(t,u)&&(i[u]=t[u]);i.originalType=e,i.mdxType="string"==typeof e?e:c,o[1]=i;for(var l=2;l<a;l++)o[l]=n[l];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,n)}p.displayName="MDXCreateElement"},391:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/checkbox-7b117add24c72bf0c30d9ae546f39718.png"}}]);
\ No newline at end of file
diff --git a/docs/8c12d624.8cb421f3.js b/docs/8c12d624.8cb421f3.js
deleted file mode 100644
index d834d61f6e..0000000000
--- a/docs/8c12d624.8cb421f3.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[125],{179:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return l}));var c=n(2),r=n(6),a=(n(0),n(290)),o={title:"Form / Checkbox"},i={unversionedId:"examples/checkbox",id:"examples/checkbox",isDocsHomePage:!1,title:"Form / Checkbox",description:"Use checkboxes to switch between two mutually exclusive options.",source:"@site/docs/examples/checkbox.md",slug:"/examples/checkbox",permalink:"/wave/docs/examples/checkbox",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/checkbox.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Buttons",permalink:"/wave/docs/examples/buttons"},next:{title:"Form / Checklist",permalink:"/wave/docs/examples/checklist"}},s=[],u={rightToc:s};function l(e){var t=e.components,o=Object(r.a)(e,["components"]);return Object(a.b)("wrapper",Object(c.a)({},u,o,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use checkboxes to switch between two mutually exclusive options."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(386).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(c.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'checkbox_unchecked={q.args.checkbox_unchecked}'),\n            ui.text(f'checkbox_checked={q.args.checkbox_checked}'),\n            ui.text(f'checkbox_indeterminate={q.args.checkbox_indeterminate}'),\n            ui.text(f'checkbox_unchecked_disabled={q.args.checkbox_unchecked_disabled}'),\n            ui.text(f'checkbox_checked_disabled={q.args.checkbox_checked_disabled}'),\n            ui.text(f'checkbox_indeterminate_disabled={q.args.checkbox_indeterminate_disabled}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.checkbox(name='checkbox_unchecked', label='Not checked'),\n            ui.checkbox(name='checkbox_checked', label='Checked', value=True),\n            ui.checkbox(name='checkbox_indeterminate', label='Indeterminate', indeterminate=True),\n            ui.checkbox(name='checkbox_unchecked_disabled', label='Not checked (Disabled)', disabled=True),\n            ui.checkbox(name='checkbox_checked_disabled', label='Checked (Disabled)', value=True, disabled=True),\n            ui.checkbox(name='checkbox_indeterminate_disabled', label='Indeterminate (Disabled)', indeterminate=True,\n                        disabled=True),\n            ui.button(name='show_inputs', label='Submit', primary=True),\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 b})),n.d(t,"b",(function(){return m}));var c=n(0),r=n.n(c);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 o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);t&&(c=c.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,c)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,c,r=function(e,t){if(null==e)return{};var n,c,r={},a=Object.keys(e);for(c=0;c<a.length;c++)n=a[c],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(c=0;c<a.length;c++)n=a[c],t.indexOf(n)>=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<a;u++)o[u]=n[u];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,n)}p.displayName="MDXCreateElement"},386:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/checkbox-7b117add24c72bf0c30d9ae546f39718.png"}}]);
\ No newline at end of file
diff --git a/docs/8c8ea2c1.31f4a055.js b/docs/8c8ea2c1.31f4a055.js
deleted file mode 100644
index 74590363de..0000000000
--- a/docs/8c8ea2c1.31f4a055.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[126],{180:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return o})),r.d(t,"metadata",(function(){return s})),r.d(t,"rightToc",(function(){return i})),r.d(t,"default",(function(){return l}));var n=r(2),a=r(6),p=(r(0),r(290)),o={title:"Stepper"},s={unversionedId:"examples/stepper",id:"examples/stepper",isDocsHomePage:!1,title:"Stepper",description:"Use Stepper to show progress through numbered steps.",source:"@site/docs/examples/stepper.md",slug:"/examples/stepper",permalink:"/wave/docs/examples/stepper",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stepper.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Markup",permalink:"/wave/docs/examples/form-markup"},next:{title:"Table / Markdown",permalink:"/wave/docs/examples/table-markdown"}},i=[],c={rightToc:i};function l(e){var t=e.components,o=Object(a.a)(e,["components"]);return Object(p.b)("wrapper",Object(n.a)({},c,o,{components:t,mdxType:"MDXLayout"}),Object(p.b)("p",null,"Use Stepper to show progress through numbered steps."),Object(p.b)("div",{className:"cover",style:{backgroundImage:"url("+r(387).default+")"}}),Object(p.b)("pre",null,Object(p.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    q.page['basic-stepper'] = ui.form_card(\n        box='1 1 4 1',\n        items=[\n          ui.stepper(name='basic-stepper', items=[\n            ui.step(label='Step 1'),\n            ui.step(label='Step 2'),\n            ui.step(label='Step 3'),\n          ])\n        ]\n    )\n    q.page['icon-stepper'] = ui.form_card(\n        box='1 2 4 1',\n        items=[\n          ui.stepper(name='icon-stepper', items=[\n            ui.step(label='Step 1', icon='MailLowImportance'),\n            ui.step(label='Step 2', icon='TaskManagerMirrored'),\n            ui.step(label='Step 3', icon='Cafe'),\n          ])\n        ]\n    )\n    q.page['almost-done-stepper'] = ui.form_card(\n        box='1 3 4 1',\n        items=[\n          ui.stepper(name='almost-done-stepper', items=[\n            ui.step(label='Step 1', done=True),\n            ui.step(label='Step 2', done=True),\n            ui.step(label='Step 3'),\n          ])\n        ]\n    )\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}l.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return d}));var n=r(0),a=r.n(n);function p(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 s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){p(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function i(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},p=Object.keys(e);for(n=0;n<p.length;n++)r=p[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(n=0;n<p.length;n++)r=p[n],t.indexOf(r)>=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<p;c++)o[c]=r[c];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,r)}b.displayName="MDXCreateElement"},387:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/stepper-6ec5c425af780ae34209e38d2ae8821a.png"}}]);
\ No newline at end of file
diff --git a/docs/8c8ea2c1.6ffd1b1a.js b/docs/8c8ea2c1.6ffd1b1a.js
new file mode 100644
index 0000000000..5d12e9172f
--- /dev/null
+++ b/docs/8c8ea2c1.6ffd1b1a.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[128],{182:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return o})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return s})),r.d(t,"default",(function(){return u}));var n=r(2),a=r(6),p=(r(0),r(292)),o={title:"Form / Stepper"},i={unversionedId:"examples/stepper",id:"examples/stepper",isDocsHomePage:!1,title:"Form / Stepper",description:"Use Stepper to show progress through numbered steps.",source:"@site/docs/examples/stepper.md",slug:"/examples/stepper",permalink:"/wave/docs/examples/stepper",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stepper.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Markup",permalink:"/wave/docs/examples/form-markup"},next:{title:"Table / Markdown",permalink:"/wave/docs/examples/table-markdown"}},s=[],c={rightToc:s};function u(e){var t=e.components,o=Object(a.a)(e,["components"]);return Object(p.b)("wrapper",Object(n.a)({},c,o,{components:t,mdxType:"MDXLayout"}),Object(p.b)("p",null,"Use Stepper to show progress through numbered steps."),Object(p.b)("div",{className:"cover",style:{backgroundImage:"url("+r(392).default+")"}}),Object(p.b)("pre",null,Object(p.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    q.page['basic-stepper'] = ui.form_card(\n        box='1 1 4 1',\n        items=[\n            ui.stepper(name='basic-stepper', items=[\n                ui.step(label='Step 1'),\n                ui.step(label='Step 2'),\n                ui.step(label='Step 3'),\n            ])\n        ]\n    )\n    q.page['icon-stepper'] = ui.form_card(\n        box='1 2 4 1',\n        items=[\n            ui.stepper(name='icon-stepper', items=[\n                ui.step(label='Step 1', icon='MailLowImportance'),\n                ui.step(label='Step 2', icon='TaskManagerMirrored'),\n                ui.step(label='Step 3', icon='Cafe'),\n            ])\n        ]\n    )\n    q.page['almost-done-stepper'] = ui.form_card(\n        box='1 3 4 1',\n        items=[\n            ui.stepper(name='almost-done-stepper', items=[\n                ui.step(label='Step 1', done=True),\n                ui.step(label='Step 2', done=True),\n                ui.step(label='Step 3'),\n            ])\n        ]\n    )\n    await q.page.save()\n")))}u.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return l})),r.d(t,"b",(function(){return d}));var n=r(0),a=r.n(n);function p(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 i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){p(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function s(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},p=Object.keys(e);for(n=0;n<p.length;n++)r=p[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(n=0;n<p.length;n++)r=p[n],t.indexOf(r)>=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):i(i({},t),e)),r},l=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)}},b=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,p=e.originalType,o=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),l=u(r),b=n,d=l["".concat(o,".").concat(b)]||l[b]||m[b]||p;return r?a.a.createElement(d,i(i({ref:t},c),{},{components:r})):a.a.createElement(d,i({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 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 c=2;c<p;c++)o[c]=r[c];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,r)}b.displayName="MDXCreateElement"},392:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/stepper-6ec5c425af780ae34209e38d2ae8821a.png"}}]);
\ No newline at end of file
diff --git a/docs/8caadd29.8215dca6.js b/docs/8caadd29.8215dca6.js
new file mode 100644
index 0000000000..76c83b122d
--- /dev/null
+++ b/docs/8caadd29.8215dca6.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[129],{183:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return b}));var a=n(2),r=n(6),o=(n(0),n(292)),i={title:"Migrating from 0.8"},c={unversionedId:"migrating-0-8",id:"migrating-0-8",isDocsHomePage:!1,title:"Migrating from 0.8",description:"H2O Wave v0.9.0+ introduces significant improvements to application performance and concurrency, and brings us closer to a v1.0 release. v1.0 will include the ability to increase the number of worker processes to scale apps, while preserving the simplicity of the Wave API.",source:"@site/docs/migrating-0-8.md",slug:"/migrating-0-8",permalink:"/wave/docs/migrating-0-8",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/migrating-0-8.md",version:"current",sidebar:"someSidebar",previous:{title:"Change Log",permalink:"/wave/docs/change-log"},next:{title:"Migrating from pre-alpha",permalink:"/wave/docs/migrating-0"}},p=[{value:"ASGI Compatibility",id:"asgi-compatibility",children:[{value:"Old way",id:"old-way",children:[]},{value:"New way",id:"new-way",children:[]}]}],l={rightToc:p};function b(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},l,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"H2O Wave v0.9.0+ introduces significant improvements to application performance and concurrency, and brings us closer to a v1.0 release. v1.0 will include the ability to increase the number of worker processes to scale apps, while preserving the simplicity of the Wave API."),Object(o.b)("p",null,"Among other changes, the Wave server executable ",Object(o.b)("inlineCode",{parentName:"p"},"wave")," is now called ",Object(o.b)("inlineCode",{parentName:"p"},"waved")," (or ",Object(o.b)("inlineCode",{parentName:"p"},"waved.exe"),"), and the ",Object(o.b)("inlineCode",{parentName:"p"},"h2o-wave")," Python package ships with a new CLI named ",Object(o.b)("inlineCode",{parentName:"p"},"wave"),"."),Object(o.b)("h2",{id:"asgi-compatibility"},"ASGI Compatibility"),Object(o.b)("p",null,"Wave apps are now ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://asgi.readthedocs.io/en/latest/"}),"ASGI"),"-compatible, based on the ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.techempower.com/benchmarks/#section=data-r17&hw=ph&test=fortune&l=zijzen-1"}),"high-performance")," ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.uvicorn.org"}),"Uvicorn")," / ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.starlette.io/"}),"Starlette")," duo."),Object(o.b)("p",null,"You can run Wave apps behind any ASGI server, like ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.uvicorn.org"}),"uvicorn"),", ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://gunicorn.org/"}),"gunicorn"),", ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://github.com/django/daphne/"}),"daphne"),", ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://pgjones.gitlab.io/hypercorn/"}),"hypercorn"),", etc."),Object(o.b)("h3",{id:"old-way"},"Old way"),Object(o.b)("p",null,"In versions <= v0.8.0, a skeleton app looked like this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-python",metastring:'title="foo.py"',title:'"foo.py"'}),"from h2o_wave import listen, Q\n\nasync def serve(q: Q):\n    pass\n\nlisten('/demo', serve)\n")),Object(o.b)("p",null,"The above app could be run like this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"(venv) $ python foo.py\n")),Object(o.b)("h3",{id:"new-way"},"New way"),Object(o.b)("p",null,"In versions v0.9.0+, a skeleton app looks like this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-python",metastring:'{1,3} title="foo.py"',"{1,3}":!0,title:'"foo.py"'}),"from h2o_wave import main, app, Q\n\n@app('/demo')\nasync def serve(q: Q):\n    pass\n")),Object(o.b)("p",null,"Notably:"),Object(o.b)("ol",null,Object(o.b)("li",{parentName:"ol"},Object(o.b)("inlineCode",{parentName:"li"},"listen(route)")," has been replaced by an ",Object(o.b)("inlineCode",{parentName:"li"},"@app(route)")," decorator on the ",Object(o.b)("inlineCode",{parentName:"li"},"serve()")," function."),Object(o.b)("li",{parentName:"ol"},Object(o.b)("inlineCode",{parentName:"li"},"main")," needs to be imported into the file (but you don't have to do anything with the symbol ",Object(o.b)("inlineCode",{parentName:"li"},"main")," other than simply ",Object(o.b)("inlineCode",{parentName:"li"},"import")," it).")),Object(o.b)("p",null,"The above app can be run using ",Object(o.b)("inlineCode",{parentName:"p"},"wave run"),", built into the new ",Object(o.b)("inlineCode",{parentName:"p"},"wave")," command line interface. "),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"(venv) $ wave run foo\n")),Object(o.b)("p",null,"The ",Object(o.b)("inlineCode",{parentName:"p"},"wave run")," command runs your app using live-reload, which means you can view your changes live as you code, without having to refresh your browser manually."),Object(o.b)("p",null,"To run your app without live-reload, simply pass ",Object(o.b)("inlineCode",{parentName:"p"},"--no-reload"),":"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"(venv) $ wave run --no-reload foo\n")),Object(o.b)("p",null,"To run your app using an ASGI server like uvicorn, append ",Object(o.b)("inlineCode",{parentName:"p"},":main")," to the ",Object(o.b)("inlineCode",{parentName:"p"},"app")," argument:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"(venv) $ uvicorn foo:main\n")))}b.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return d}));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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=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)},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,o=e.originalType,i=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),s=b(n),m=a,d=s["".concat(i,".").concat(m)]||s[m]||u[m]||o;return n?r.a.createElement(d,c(c({ref:t},l),{},{components:n})):r.a.createElement(d,c({ref:t},l))}));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]=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:a,i[1]=c;for(var l=2;l<o;l++)i[l]=n[l];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/8e9f0a8a.ea616d71.js b/docs/8e9f0a8a.ea616d71.js
deleted file mode 100644
index f83d4a4764..0000000000
--- a/docs/8e9f0a8a.ea616d71.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[127],{181:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return u})),r.d(t,"rightToc",(function(){return c})),r.d(t,"default",(function(){return s}));var n=r(2),o=r(6),a=(r(0),r(290)),i={slug:"hola",title:"Hola",author:"Gao Wei",author_title:"Docusaurus Core Team",author_url:"https://github.com/wgao19",author_image_url:"https://avatars1.githubusercontent.com/u/2055384?v=4",tags:["hola","docusaurus"]},u={permalink:"/wave/blog/hola",editUrl:"https://github.com/facebook/docusaurus/edit/master/website/blog/blog/2019-05-28-hola.md",source:"@site/blog/2019-05-28-hola.md",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet",date:"2019-05-28T00:00:00.000Z",tags:[{label:"hola",permalink:"/wave/blog/tags/hola"},{label:"docusaurus",permalink:"/wave/blog/tags/docusaurus"}],title:"Hola",readingTime:.12,truncated:!1,prevItem:{title:"Hello",permalink:"/wave/blog/hello-world"}},c=[],l={rightToc:c};function s(e){var t=e.components,r=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},l,r,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"))}s.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return p})),r.d(t,"b",(function(){return b}));var n=r(0),o=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 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 u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=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<a;l++)i[l]=r[l];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/8eaf94d7.6b1f4315.js b/docs/8eaf94d7.f12b9f2f.js
similarity index 93%
rename from docs/8eaf94d7.6b1f4315.js
rename to docs/8eaf94d7.f12b9f2f.js
index aa3b7ce414..00b4a6ebaa 100644
--- a/docs/8eaf94d7.6b1f4315.js
+++ b/docs/8eaf94d7.f12b9f2f.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[128],{182:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return l})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(290)),l={title:"Plot / Interval / Labels"},i={unversionedId:"examples/plot-interval-labels",id:"examples/plot-interval-labels",isDocsHomePage:!1,title:"Plot / Interval / Labels",description:"Make a column plot with labels on each bar.",source:"@site/docs/examples/plot-interval-labels.md",slug:"/examples/plot-interval-labels",permalink:"/wave/docs/examples/plot-interval-labels",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-labels.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Groups / Transpose",permalink:"/wave/docs/examples/plot-interval-groups-transpose"},next:{title:"Plot / Interval / Range",permalink:"/wave/docs/examples/plot-interval-range"}},c=[],p={rightToc:c};function s(e){var t=e.components,l=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,l,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a column plot with labels on each bar."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(388).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 20\nf = FakeCategoricalSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Label Customization',\n    data=data('product price', n),\n    plot=ui.plot([\n        ui.mark(type='interval', x='=product',\n                y='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}', y_min=0,\n                color='#333333',\n                label='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n                label_offset=0, label_position='middle', label_rotation='-90', label_fill_color='#fff',\n                label_font_weight='bold')])\n))\nv.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),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 l(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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;p++)l[p]=n[p];return a.a.createElement.apply(null,l)}return a.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},388:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-interval-labels-bc80dada33a6a5f1a61854ef21caf76e.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[130],{184:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return l})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(292)),l={title:"Plot / Interval / Labels"},i={unversionedId:"examples/plot-interval-labels",id:"examples/plot-interval-labels",isDocsHomePage:!1,title:"Plot / Interval / Labels",description:"Make a column plot with labels on each bar.",source:"@site/docs/examples/plot-interval-labels.md",slug:"/examples/plot-interval-labels",permalink:"/wave/docs/examples/plot-interval-labels",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-labels.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Groups / Transpose",permalink:"/wave/docs/examples/plot-interval-groups-transpose"},next:{title:"Plot / Interval / Range",permalink:"/wave/docs/examples/plot-interval-range"}},c=[],p={rightToc:c};function s(e){var t=e.components,l=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,l,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a column plot with labels on each bar."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(393).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 20\nf = FakeCategoricalSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Label Customization',\n    data=data('product price', n),\n    plot=ui.plot([\n        ui.mark(type='interval', x='=product',\n                y='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}', y_min=0,\n                color='#333333',\n                label='=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n                label_offset=0, label_position='middle', label_rotation='-90', label_fill_color='#fff',\n                label_font_weight='bold')])\n))\nv.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),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 l(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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;p++)l[p]=n[p];return a.a.createElement.apply(null,l)}return a.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},393:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-interval-labels-bc80dada33a6a5f1a61854ef21caf76e.png"}}]);
\ No newline at end of file
diff --git a/docs/8f030830.3fafca9c.js b/docs/8f030830.3fafca9c.js
deleted file mode 100644
index 7d30555350..0000000000
--- a/docs/8f030830.3fafca9c.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[129],{183: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 c})),n.d(t,"default",(function(){return s}));var a=n(2),r=n(6),o=(n(0),n(290)),i={title:"Development"},l={unversionedId:"development",id:"development",isDocsHomePage:!1,title:"Development",description:"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.",source:"@site/docs/development.md",slug:"/development",permalink:"/wave/docs/development",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/development.md",version:"current",sidebar:"someSidebar",previous:{title:"Logging",permalink:"/wave/docs/logging"},next:{title:"Browser Testing",permalink:"/wave/docs/browser-testing"}},c=[{value:"Getting started",id:"getting-started",children:[]},{value:"Using PyCharm",id:"using-pycharm",children:[]},{value:"Using Visual Studio Code",id:"using-visual-studio-code",children:[]},{value:"A hello world sample",id:"a-hello-world-sample",children:[]}],p={rightToc:c};function s(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"Both ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.jetbrains.com/pycharm/download"}),"PyCharm Community Edition")," and ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://code.visualstudio.com/"}),"Visual Studio Code")," are excellent for Python programming."),Object(o.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(o.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"At the time of writing, PyCharm's type-checking and error-detection is superior to Visual Studio Code's Python plugin."))),Object(o.b)("h2",{id:"getting-started"},"Getting started"),Object(o.b)("p",null,"The simplest way to get started in either PyCharm or Visual Studio Code is the same: "),Object(o.b)("ol",null,Object(o.b)("li",{parentName:"ol"},"Create a working directory."),Object(o.b)("li",{parentName:"ol"},"Set up a Python ",Object(o.b)("a",Object(a.a)({parentName:"li"},{href:"https://docs.python.org/3/tutorial/venv.html"}),"virtual environment"),"."),Object(o.b)("li",{parentName:"ol"},"Install the ",Object(o.b)("inlineCode",{parentName:"li"},"h2o-wave")," package."),Object(o.b)("li",{parentName:"ol"},"Open the directory in your IDE.")),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"mkdir $HOME/wave-apps\ncd $HOME/wave-apps\npython3 -m venv venv\n./venv/bin/pip install h2o-wave\n")),Object(o.b)("h2",{id:"using-pycharm"},"Using PyCharm"),Object(o.b)("ol",null,Object(o.b)("li",{parentName:"ol"},"Launch PyCharm"),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"},"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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=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<o;p++)i[p]=n[p];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/8f030830.b746ca66.js b/docs/8f030830.b746ca66.js
new file mode 100644
index 0000000000..db96ab2a16
--- /dev/null
+++ b/docs/8f030830.b746ca66.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[131],{185:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return b}));var a=n(2),o=n(6),r=(n(0),n(292)),i={title:"Development"},c={unversionedId:"development",id:"development",isDocsHomePage:!1,title:"Development",description:"Wave scripts are plain Python programs. Wave apps are ASGI programs. You can develop, debug and test them from the command-line, from the Python REPL, or from your favorite text editor.",source:"@site/docs/development.md",slug:"/development",permalink:"/wave/docs/development",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/development.md",version:"current",sidebar:"someSidebar",previous:{title:"Command Line Interface",permalink:"/wave/docs/cli"},next:{title:"Browser Testing",permalink:"/wave/docs/browser-testing"}},l=[{value:"Getting started",id:"getting-started",children:[{value:"Using PyCharm",id:"using-pycharm",children:[]},{value:"Using Visual Studio Code",id:"using-visual-studio-code",children:[]}]},{value:"Debugging Apps",id:"debugging-apps",children:[{value:"Using PyCharm",id:"using-pycharm-1",children:[]}]}],p={rightToc:l};function b(e){var t=e.components,n=Object(o.a)(e,["components"]);return Object(r.b)("wrapper",Object(a.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(r.b)("p",null,"Wave scripts are plain Python programs. Wave apps are ASGI programs. You can develop, debug and test them from the command-line, from the Python REPL, or from your favorite text editor."),Object(r.b)("p",null,"Both ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.jetbrains.com/pycharm/download"}),"PyCharm Community Edition")," and ",Object(r.b)("a",Object(a.a)({parentName:"p"},{href:"https://code.visualstudio.com/"}),"Visual Studio Code")," are excellent for Python programming."),Object(r.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(r.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(r.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(r.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(r.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(r.b)("p",{parentName:"div"},"At the time of writing, PyCharm's type-checking and error-detection is superior to Visual Studio Code's Python plugin."))),Object(r.b)("h2",{id:"getting-started"},"Getting started"),Object(r.b)("p",null,"The simplest way to get started in either PyCharm or Visual Studio Code is the same: "),Object(r.b)("ol",null,Object(r.b)("li",{parentName:"ol"},"Create a working directory."),Object(r.b)("li",{parentName:"ol"},"Set up a Python ",Object(r.b)("a",Object(a.a)({parentName:"li"},{href:"https://docs.python.org/3/tutorial/venv.html"}),"virtual environment"),"."),Object(r.b)("li",{parentName:"ol"},"Install the ",Object(r.b)("inlineCode",{parentName:"li"},"h2o-wave")," package."),Object(r.b)("li",{parentName:"ol"},"Open the directory in your IDE.")),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"mkdir $HOME/wave-apps\ncd $HOME/wave-apps\npython3 -m venv venv\n./venv/bin/pip install h2o-wave\n")),Object(r.b)("h3",{id:"using-pycharm"},"Using PyCharm"),Object(r.b)("ol",null,Object(r.b)("li",{parentName:"ol"},"Launch PyCharm"),Object(r.b)("li",{parentName:"ol"},'Click "File" -> "Open...", then choose ',Object(r.b)("inlineCode",{parentName:"li"},"$HOME/wave-apps"),"."),Object(r.b)("li",{parentName:"ol"},"Right-click on ",Object(r.b)("inlineCode",{parentName:"li"},"wave-apps"),' in the "Project" tree, then click "New" -> "Python File".'),Object(r.b)("li",{parentName:"ol"},"Enter a file name, say, ",Object(r.b)("inlineCode",{parentName:"li"},"foo.py"),"."),Object(r.b)("li",{parentName:"ol"},"Write some code (see sample below)."),Object(r.b)("li",{parentName:"ol"},'Right-click anywhere inside the file and choose "Run foo" or "Debug foo".')),Object(r.b)("h3",{id:"using-visual-studio-code"},"Using Visual Studio Code"),Object(r.b)("ol",null,Object(r.b)("li",{parentName:"ol"},"Launch Visual Studio Code"),Object(r.b)("li",{parentName:"ol"},'Click "File" -> "Open...", then choose ',Object(r.b)("inlineCode",{parentName:"li"},"$HOME/wave-apps"),"."),Object(r.b)("li",{parentName:"ol"},'Click "File" -> "New File"; save the file as, say, ',Object(r.b)("inlineCode",{parentName:"li"},"foo.py"),"."),Object(r.b)("li",{parentName:"ol"},'You should now get a prompt asking if you want to install extensions for Python. Click "Install".'),Object(r.b)("li",{parentName:"ol"},"Write some code (see sample below)."),Object(r.b)("li",{parentName:"ol"},"Hit ",Object(r.b)("inlineCode",{parentName:"li"},"Ctrl+F5")," to run, or ",Object(r.b)("inlineCode",{parentName:"li"},"F5")," to debug.")),Object(r.b)("h2",{id:"debugging-apps"},"Debugging Apps"),Object(r.b)("p",null,"To debug Wave apps, set your IDE or editor's configuration to execute the command ",Object(r.b)("inlineCode",{parentName:"p"},"python -m h2o_wave run --no-reload foo")," instead of ",Object(r.b)("inlineCode",{parentName:"p"},"python foo.py"),"."),Object(r.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(r.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(r.b)("h5",{parentName:"div"},Object(r.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(r.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(r.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(r.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(r.b)("p",{parentName:"div"},"The command ",Object(r.b)("inlineCode",{parentName:"p"},"wave run --no-reload foo")," is equivalent to ",Object(r.b)("inlineCode",{parentName:"p"},"python -m h2o_wave run --no-reload foo"),"."))),Object(r.b)("h3",{id:"using-pycharm-1"},"Using PyCharm"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},'Open the "Run/Debug Configurations" dialog for your script.'),Object(r.b)("li",{parentName:"ul"},'Under "Configuration", change the "Script path" dropdown to "Module name".'),Object(r.b)("li",{parentName:"ul"},'Set "Module name" to ',Object(r.b)("inlineCode",{parentName:"li"},"h2o_wave"),"."),Object(r.b)("li",{parentName:"ul"},'Set "Parameters" to ',Object(r.b)("inlineCode",{parentName:"li"},"start foo")," (assuming your app's source code is in ",Object(r.b)("inlineCode",{parentName:"li"},"foo.py"),")")))}b.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return u}));var a=n(0),o=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 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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,o=function(e,t){if(null==e)return{};var n,a,o={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var p=o.a.createContext({}),b=function(e){var t=o.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},s=function(e){var t=b(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)}},d=o.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,r=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),s=b(n),d=a,u=s["".concat(i,".").concat(d)]||s[d]||m[d]||r;return n?o.a.createElement(u,c(c({ref:t},p),{},{components:n})):o.a.createElement(u,c({ref:t},p))}));function u(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var r=n.length,i=new Array(r);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:a,i[1]=c;for(var p=2;p<r;p++)i[p]=n[p];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/9152460a.42fa5a7f.js b/docs/9152460a.42fa5a7f.js
new file mode 100644
index 0000000000..2e6011fd96
--- /dev/null
+++ b/docs/9152460a.42fa5a7f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[132],{186:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return c})),t.d(n,"metadata",(function(){return l})),t.d(n,"rightToc",(function(){return i})),t.d(n,"default",(function(){return s}));var a=t(2),r=t(6),o=(t(0),t(292)),c={title:"Context Menu"},l={unversionedId:"examples/card-menu",id:"examples/card-menu",isDocsHomePage:!1,title:"Context Menu",description:"Display a context menu on a card.",source:"@site/docs/examples/card-menu.md",slug:"/examples/card-menu",permalink:"/wave/docs/examples/card-menu",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/card-menu.md",version:"current",sidebar:"someSidebar",previous:{title:"Routing / Tabs",permalink:"/wave/docs/examples/tab-routing"},next:{title:"Plot / Point",permalink:"/wave/docs/examples/plot-point"}},i=[],p={rightToc:i};function s(e){var n=e.components,c=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},p,c,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Display a context menu on a card."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(394).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"import json\nfrom h2o_wave import main, app, Q, ui, data\n\n# Vega lite spec for a bar plot, defaults to linear scale.\nspec_linear_scale = json.dumps(dict(\n    mark='bar',\n    encoding=dict(\n        x=dict(field='a', type='ordinal'),\n        y=dict(field='b', type='quantitative')\n    )\n))\n\n# Vega lite spec for a bar plot, log scaled.\nspec_log_scale = json.dumps(dict(\n    mark='bar',\n    encoding=dict(\n        x=dict(field='a', type='ordinal'),\n        y=dict(field='b', type='quantitative', scale=dict(type='log'))\n    )\n))\n\n# Data for our plot.\nplot_data = data(fields=[\"a\", \"b\"], rows=[\n    [\"A\", 28], [\"B\", 55], [\"C\", 43],\n    [\"D\", 91], [\"E\", 81], [\"F\", 53],\n    [\"G\", 19], [\"H\", 87], [\"I\", 52]\n])\n\n# Create a couple of context menu commands.\nlog_scale_command = ui.command(\n    name='to_log_scale',\n    label='Log Scale',\n    icon='LineChart',\n)\nlinear_scale_command = ui.command(\n    name='to_linear_scale',\n    label='Linear Scale',\n    icon='LineChart',\n)\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.client.plot_added:  # Have we already added a plot?\n        example = q.page['example']\n        if q.args.to_log_scale:\n            # Change to log scale\n            example.title = 'Plot (Log Scale)',\n            example.specification = spec_log_scale\n            example.commands = [linear_scale_command]\n        else:\n            # Change to linear scale\n            example.title = 'Plot (Linear Scale)',\n            example.specification = spec_linear_scale\n            example.commands = [log_scale_command]\n    else:  # Add a new plot\n        q.page['example'] = ui.vega_card(\n            box='1 1 2 4',\n            title='Plot (Linear Scale)',\n            specification=spec_linear_scale,\n            data=plot_data,\n            commands=[log_scale_command],\n        )\n        # Flag to indicate that we've added a plot\n        q.client.plot_added = True\n\n    await q.page.save()\n")))}s.isMDXComponent=!0},292:function(e,n,t){"use strict";t.d(n,"a",(function(){return d})),t.d(n,"b",(function(){return f}));var a=t(0),r=t.n(a);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 c(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function l(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?c(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function i(e,n){if(null==e)return{};var t,a,r=function(e,n){if(null==e)return{};var t,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)t=o[a],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)t=o[a],n.indexOf(t)>=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<o;p++)c[p]=t[p];return r.a.createElement.apply(null,c)}return r.a.createElement.apply(null,t)}u.displayName="MDXCreateElement"},394:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/card-menu-db530edd23afd919e8bb15708a24c76b.png"}}]);
\ No newline at end of file
diff --git a/docs/9152460a.b856da25.js b/docs/9152460a.b856da25.js
deleted file mode 100644
index 89fe35cdfc..0000000000
--- a/docs/9152460a.b856da25.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[130],{184:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return c})),t.d(n,"metadata",(function(){return l})),t.d(n,"rightToc",(function(){return i})),t.d(n,"default",(function(){return s}));var a=t(2),r=t(6),o=(t(0),t(290)),c={title:"Context Menu"},l={unversionedId:"examples/card-menu",id:"examples/card-menu",isDocsHomePage:!1,title:"Context Menu",description:"Display a context menu on a card.",source:"@site/docs/examples/card-menu.md",slug:"/examples/card-menu",permalink:"/wave/docs/examples/card-menu",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/card-menu.md",version:"current",sidebar:"someSidebar",previous:{title:"Routing / Tabs",permalink:"/wave/docs/examples/tab-routing"},next:{title:"Plot / Point",permalink:"/wave/docs/examples/plot-point"}},i=[],p={rightToc:i};function s(e){var n=e.components,c=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},p,c,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Display a context menu on a card."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(389).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"import json\nfrom h2o_wave import Q, listen, ui, data\n\n# Vega lite spec for a bar plot, defaults to linear scale.\nspec_linear_scale = json.dumps(dict(\n    mark='bar',\n    encoding=dict(\n        x=dict(field='a', type='ordinal'),\n        y=dict(field='b', type='quantitative')\n    )\n))\n\n# Vega lite spec for a bar plot, log scaled.\nspec_log_scale = json.dumps(dict(\n    mark='bar',\n    encoding=dict(\n        x=dict(field='a', type='ordinal'),\n        y=dict(field='b', type='quantitative', scale=dict(type='log'))\n    )\n))\n\n# Data for our plot.\nplot_data = data(fields=[\"a\", \"b\"], rows=[\n    [\"A\", 28], [\"B\", 55], [\"C\", 43],\n    [\"D\", 91], [\"E\", 81], [\"F\", 53],\n    [\"G\", 19], [\"H\", 87], [\"I\", 52]\n])\n\n# Create a couple of context menu commands.\nlog_scale_command = ui.command(\n    name='to_log_scale',\n    label='Log Scale',\n    icon='LineChart',\n)\nlinear_scale_command = ui.command(\n    name='to_linear_scale',\n    label='Linear Scale',\n    icon='LineChart',\n)\n\n\nasync def serve(q: Q):\n    if q.client.plot_added:  # Have we already added a plot?\n        example = q.page['example']\n        if q.args.to_log_scale:\n            # Change to log scale\n            example.title = 'Plot (Log Scale)',\n            example.specification = spec_log_scale\n            example.commands = [linear_scale_command]\n        else:\n            # Change to linear scale\n            example.title = 'Plot (Linear Scale)',\n            example.specification = spec_linear_scale\n            example.commands = [log_scale_command]\n    else:  # Add a new plot\n        q.page['example'] = ui.vega_card(\n            box='1 1 2 4',\n            title='Plot (Linear Scale)',\n            specification=spec_linear_scale,\n            data=plot_data,\n            commands=[log_scale_command],\n        )\n        # Flag to indicate that we've added a plot\n        q.client.plot_added = True\n\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}s.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return d})),t.d(n,"b",(function(){return f}));var a=t(0),r=t.n(a);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 c(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function l(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?c(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function i(e,n){if(null==e)return{};var t,a,r=function(e,n){if(null==e)return{};var t,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)t=o[a],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)t=o[a],n.indexOf(t)>=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<o;p++)c[p]=t[p];return r.a.createElement.apply(null,c)}return r.a.createElement.apply(null,t)}u.displayName="MDXCreateElement"},389:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/card-menu-db530edd23afd919e8bb15708a24c76b.png"}}]);
\ No newline at end of file
diff --git a/docs/917fcb62.35b584b9.js b/docs/917fcb62.35b584b9.js
deleted file mode 100644
index fbe7830246..0000000000
--- a/docs/917fcb62.35b584b9.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[131],{185:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return l}));var r=n(2),a=n(6),o=(n(0),n(290)),c={title:"Mode / Broadcast"},i={unversionedId:"examples/counter-broadcast",id:"examples/counter-broadcast",isDocsHomePage:!1,title:"Mode / Broadcast",description:"Launch the server in broadcast mode to synchronize browser state across users.",source:"@site/docs/examples/counter-broadcast.md",slug:"/examples/counter-broadcast",permalink:"/wave/docs/examples/counter-broadcast",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/counter-broadcast.md",version:"current",sidebar:"someSidebar",previous:{title:"Mode / Broadcast / Global",permalink:"/wave/docs/examples/counter-global"},next:{title:"Mode / Multicast",permalink:"/wave/docs/examples/counter-multicast"}},s=[],u={rightToc:s};function l(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},u,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Launch the server in broadcast mode to synchronize browser state across users.\nOpen ",Object(o.b)("inlineCode",{parentName:"p"},"/demo")," in multiple browsers and watch them synchronize in realtime."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(390).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui, pack\n\n\nasync def serve(q: Q):\n    count = q.app.count or 0\n    if 'increment' in q.args:\n        count += 1\n        q.app.count = count\n\n    items = pack([ui.button(name='increment', label=f'Count={count}')])\n\n    if count > 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;u++)c[u]=n[u];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,n)}b.displayName="MDXCreateElement"},390:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/917fcb62.5fdef126.js b/docs/917fcb62.5fdef126.js
new file mode 100644
index 0000000000..7cb97919b8
--- /dev/null
+++ b/docs/917fcb62.5fdef126.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[133],{187:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return p}));var r=n(2),a=n(6),o=(n(0),n(292)),c={title:"Mode / Broadcast"},i={unversionedId:"examples/counter-broadcast",id:"examples/counter-broadcast",isDocsHomePage:!1,title:"Mode / Broadcast",description:"Launch the server in broadcast mode to synchronize browser state across users.",source:"@site/docs/examples/counter-broadcast.md",slug:"/examples/counter-broadcast",permalink:"/wave/docs/examples/counter-broadcast",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/counter-broadcast.md",version:"current",sidebar:"someSidebar",previous:{title:"Mode / Broadcast / Global",permalink:"/wave/docs/examples/counter-global"},next:{title:"Mode / Multicast",permalink:"/wave/docs/examples/counter-multicast"}},s=[],u={rightToc:s};function p(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},u,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Launch the server in broadcast mode to synchronize browser state across users.\nOpen ",Object(o.b)("inlineCode",{parentName:"p"},"/demo")," in multiple browsers and watch them synchronize in realtime."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(395).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui, pack\n\n\n@app('/demo', mode='broadcast')\nasync def serve(q: Q):\n    count = q.app.count or 0\n    if 'increment' in q.args:\n        count += 1\n        q.app.count = count\n\n    items = pack([ui.button(name='increment', label=f'Count={count}')])\n\n    if count > 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")))}p.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return l})),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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var u=a.a.createContext({}),p=function(e){var t=a.a.useContext(u),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},l=function(e){var t=p(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 n=e.components,r=e.mdxType,o=e.originalType,c=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),l=p(n),m=r,b=l["".concat(c,".").concat(m)]||l[m]||d[m]||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]=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,c[1]=i;for(var u=2;u<o;u++)c[u]=n[u];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},395:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/935f2afb.aeb7338a.js b/docs/935f2afb.aeb7338a.js
deleted file mode 100644
index 78c5d6bbf4..0000000000
--- a/docs/935f2afb.aeb7338a.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[132],{186:function(e){e.exports=JSON.parse('{"version":"current","label":"Next","isLast":true,"docsSidebars":{"someSidebar":[{"collapsed":true,"type":"category","label":"Prologue","items":[{"type":"link","label":"Change Log","href":"/wave/docs/change-log"},{"type":"link","label":"Migrating from pre-alpha","href":"/wave/docs/migrating-0"},{"type":"link","label":"Contributing","href":"/wave/docs/contributing"}]},{"collapsed":true,"type":"category","label":"Getting Started","items":[{"type":"link","label":"Introduction","href":"/wave/docs/getting-started"},{"type":"link","label":"Installation","href":"/wave/docs/installation"},{"type":"link","label":"A Tour of Wave","href":"/wave/docs/tour"},{"type":"link","label":"Tutorial: Hello World","href":"/wave/docs/tutorial-hello"},{"type":"link","label":"Tutorial: Beer Wall","href":"/wave/docs/tutorial-beer"},{"type":"link","label":"Tutorial: System Monitor","href":"/wave/docs/tutorial-monitor"},{"type":"link","label":"Tutorial: Bean Counter","href":"/wave/docs/tutorial-counter"},{"type":"link","label":"Tutorial: Todo List","href":"/wave/docs/tutorial-todo"}]},{"collapsed":true,"type":"category","label":"Guide","items":[{"type":"link","label":"Introduction","href":"/wave/docs/guide"},{"type":"link","label":"Architecture","href":"/wave/docs/architecture"},{"type":"link","label":"Wave Scripts","href":"/wave/docs/scripts"},{"type":"link","label":"Wave Apps","href":"/wave/docs/apps"},{"type":"link","label":"Pages","href":"/wave/docs/pages"},{"type":"link","label":"Layout","href":"/wave/docs/layout"},{"type":"link","label":"Cards","href":"/wave/docs/cards"},{"type":"link","label":"Data Buffers","href":"/wave/docs/buffers"},{"type":"link","label":"Components","href":"/wave/docs/components"},{"type":"link","label":"Event Arguments","href":"/wave/docs/arguments"},{"type":"link","label":"State","href":"/wave/docs/state"},{"type":"link","label":"Routing","href":"/wave/docs/routing"},{"type":"link","label":"Realtime Sync","href":"/wave/docs/realtime"},{"type":"link","label":"Data-binding","href":"/wave/docs/expressions"},{"type":"link","label":"Files","href":"/wave/docs/files"},{"type":"link","label":"Plots","href":"/wave/docs/plotting"},{"type":"link","label":"Graphics","href":"/wave/docs/graphics"},{"type":"link","label":"Security","href":"/wave/docs/security"},{"type":"link","label":"Logging","href":"/wave/docs/logging"},{"type":"link","label":"Development","href":"/wave/docs/development"},{"type":"link","label":"Browser Testing","href":"/wave/docs/browser-testing"},{"type":"link","label":"Configuration","href":"/wave/docs/configuration"},{"type":"link","label":"Backup and Recovery","href":"/wave/docs/backup"}]},{"collapsed":true,"type":"category","label":"Enterprise","items":[{"type":"link","label":"Introduction","href":"/wave/docs/enterprise/"},{"type":"link","label":"Basic Concepts","href":"/wave/docs/enterprise/basic-concepts"},{"type":"link","label":"Developer Guide","href":"/wave/docs/enterprise/developer-guide"}]},{"collapsed":true,"type":"category","label":"Examples","items":[{"type":"link","label":"Gallery","href":"/wave/docs/examples"},{"type":"link","label":"Hello World!","href":"/wave/docs/examples/hello-world"},{"type":"link","label":"To-do List App","href":"/wave/docs/examples/todo"},{"type":"link","label":"Wizard","href":"/wave/docs/examples/wizard"},{"type":"link","label":"Issue Tracker","href":"/wave/docs/examples/issue-tracker"},{"type":"link","label":"Dashboard","href":"/wave/docs/examples/dashboard"},{"type":"link","label":"Stat / Small","href":"/wave/docs/examples/stat-small"},{"type":"link","label":"Stat / Large","href":"/wave/docs/examples/stat-large"},{"type":"link","label":"Stat / Gauge / Wide","href":"/wave/docs/examples/stat-wide-gauge"},{"type":"link","label":"Stat / Gauge / Tall","href":"/wave/docs/examples/stat-tall-gauge"},{"type":"link","label":"Stat / Bar / Wide","href":"/wave/docs/examples/stat-wide-bar"},{"type":"link","label":"Stat / Bar / Large","href":"/wave/docs/examples/stat-large-bar"},{"type":"link","label":"Stat / Series / Small / Area","href":"/wave/docs/examples/stat-small-series-area"},{"type":"link","label":"Stat / Series / Small / Interval","href":"/wave/docs/examples/stat-small-series-interval"},{"type":"link","label":"Stat / Series / Wide / Area","href":"/wave/docs/examples/stat-wide-series-area"},{"type":"link","label":"Stat / Series / Wide / Interval","href":"/wave/docs/examples/stat-wide-series-interval"},{"type":"link","label":"Stat / Series / Tall / Area","href":"/wave/docs/examples/stat-tall-series-area"},{"type":"link","label":"Stat / Series / Tall / Interval","href":"/wave/docs/examples/stat-tall-series-interval"},{"type":"link","label":"Layout / Position","href":"/wave/docs/examples/layout"},{"type":"link","label":"Layout / Size","href":"/wave/docs/examples/layout-size"},{"type":"link","label":"Form","href":"/wave/docs/examples/form"},{"type":"link","label":"Form / Text","href":"/wave/docs/examples/text"},{"type":"link","label":"Form / Text / Sizes","href":"/wave/docs/examples/text-sizes"},{"type":"link","label":"Form / Label","href":"/wave/docs/examples/label"},{"type":"link","label":"Form / Link","href":"/wave/docs/examples/link"},{"type":"link","label":"Form / Progress","href":"/wave/docs/examples/progress"},{"type":"link","label":"Form / Progress / Updating","href":"/wave/docs/examples/progress-update"},{"type":"link","label":"Form / Message Bar","href":"/wave/docs/examples/message-bar"},{"type":"link","label":"Form / Textbox","href":"/wave/docs/examples/textbox"},{"type":"link","label":"Form / Textbox / Trigger","href":"/wave/docs/examples/textbox-trigger"},{"type":"link","label":"Form / Button","href":"/wave/docs/examples/button"},{"type":"link","label":"Form / Buttons","href":"/wave/docs/examples/buttons"},{"type":"link","label":"Form / Checkbox","href":"/wave/docs/examples/checkbox"},{"type":"link","label":"Form / Checklist","href":"/wave/docs/examples/checklist"},{"type":"link","label":"Form / Picker","href":"/wave/docs/examples/picker"},{"type":"link","label":"Form / Picker / Selection","href":"/wave/docs/examples/picker-selection"},{"type":"link","label":"Form / Dropdown","href":"/wave/docs/examples/dropdown"},{"type":"link","label":"Form / Choice Group","href":"/wave/docs/examples/choice-group"},{"type":"link","label":"Form / Combobox","href":"/wave/docs/examples/combobox"},{"type":"link","label":"Form / Toggle","href":"/wave/docs/examples/toggle"},{"type":"link","label":"Form / Spinbox","href":"/wave/docs/examples/spinbox"},{"type":"link","label":"Form / Slider","href":"/wave/docs/examples/slider"},{"type":"link","label":"Form / Range Slider","href":"/wave/docs/examples/range-slider"},{"type":"link","label":"Form / Date Picker","href":"/wave/docs/examples/date-picker"},{"type":"link","label":"Form / Date Picker / Trigger","href":"/wave/docs/examples/date-picker-trigger"},{"type":"link","label":"Form / Color Picker","href":"/wave/docs/examples/color-picker"},{"type":"link","label":"Form / Swatch Picker","href":"/wave/docs/examples/swatch-picker"},{"type":"link","label":"Form / Tabs","href":"/wave/docs/examples/tabs"},{"type":"link","label":"Form / Separator","href":"/wave/docs/examples/separator"},{"type":"link","label":"Form / File Upload","href":"/wave/docs/examples/file-upload"},{"type":"link","label":"Form / Frame","href":"/wave/docs/examples/form-frame"},{"type":"link","label":"Form / Frame / Path","href":"/wave/docs/examples/form-frame-path"},{"type":"link","label":"Form / Menu","href":"/wave/docs/examples/form-menu"},{"type":"link","label":"Form / Template","href":"/wave/docs/examples/form-template"},{"type":"link","label":"Form / Markup","href":"/wave/docs/examples/form-markup"},{"type":"link","label":"Stepper","href":"/wave/docs/examples/stepper"},{"type":"link","label":"Table / Markdown","href":"/wave/docs/examples/table-markdown"},{"type":"link","label":"Table","href":"/wave/docs/examples/table"},{"type":"link","label":"Table / Sort","href":"/wave/docs/examples/table-sort"},{"type":"link","label":"Table / Search","href":"/wave/docs/examples/table-search"},{"type":"link","label":"Table / Filter","href":"/wave/docs/examples/table-filter"},{"type":"link","label":"Table / Filter / Backend","href":"/wave/docs/examples/table-filter-backend"},{"type":"link","label":"Table / Download","href":"/wave/docs/examples/table-download"},{"type":"link","label":"Table / Group by","href":"/wave/docs/examples/table-groupby"},{"type":"link","label":"Table / Preselection","href":"/wave/docs/examples/table-select"},{"type":"link","label":"Image","href":"/wave/docs/examples/image"},{"type":"link","label":"Frame","href":"/wave/docs/examples/frame"},{"type":"link","label":"Frame / Path","href":"/wave/docs/examples/frame-path"},{"type":"link","label":"Template","href":"/wave/docs/examples/template"},{"type":"link","label":"Template / Data","href":"/wave/docs/examples/template-data"},{"type":"link","label":"Markdown","href":"/wave/docs/examples/markdown"},{"type":"link","label":"Markdown / Data","href":"/wave/docs/examples/markdown-data"},{"type":"link","label":"Markup","href":"/wave/docs/examples/markup"},{"type":"link","label":"Nav","href":"/wave/docs/examples/nav"},{"type":"link","label":"Toolbar","href":"/wave/docs/examples/toolbar"},{"type":"link","label":"Tab","href":"/wave/docs/examples/tab"},{"type":"link","label":"Tab / Links","href":"/wave/docs/examples/tab-link"},{"type":"link","label":"Tabs / Navigation","href":"/wave/docs/examples/tab-delete"},{"type":"link","label":"Breadcrumbs","href":"/wave/docs/examples/breadcrumbs"},{"type":"link","label":"Header","href":"/wave/docs/examples/header"},{"type":"link","label":"Routing","href":"/wave/docs/examples/hash-routing"},{"type":"link","label":"Routing / Toolbar","href":"/wave/docs/examples/toolbar-routing"},{"type":"link","label":"Routing / Tabs","href":"/wave/docs/examples/tab-routing"},{"type":"link","label":"Context Menu","href":"/wave/docs/examples/card-menu"},{"type":"link","label":"Plot / Point","href":"/wave/docs/examples/plot-point"},{"type":"link","label":"Plot / Point / Shapes","href":"/wave/docs/examples/plot-point-shapes"},{"type":"link","label":"Plot / Point / Sizes","href":"/wave/docs/examples/plot-point-sizes"},{"type":"link","label":"Plot / Point / Map","href":"/wave/docs/examples/plot-point-map"},{"type":"link","label":"Plot / Point / Groups","href":"/wave/docs/examples/plot-point-groups"},{"type":"link","label":"Plot / Point / Annotation","href":"/wave/docs/examples/plot-point-annotation"},{"type":"link","label":"Plot / Point / Custom","href":"/wave/docs/examples/plot-point-custom"},{"type":"link","label":"Plot / Interval","href":"/wave/docs/examples/plot-interval"},{"type":"link","label":"Plot / Interval / Transpose","href":"/wave/docs/examples/plot-interval-transpose"},{"type":"link","label":"Plot / Interval / Groups","href":"/wave/docs/examples/plot-interval-groups"},{"type":"link","label":"Plot / Interval / Groups / Transpose","href":"/wave/docs/examples/plot-interval-groups-transpose"},{"type":"link","label":"Plot / Interval / Labels","href":"/wave/docs/examples/plot-interval-labels"},{"type":"link","label":"Plot / Interval / Range","href":"/wave/docs/examples/plot-interval-range"},{"type":"link","label":"Plot / Interval / Range / Transpose","href":"/wave/docs/examples/plot-interval-range-transpose"},{"type":"link","label":"Plot / Interval / Stacked","href":"/wave/docs/examples/plot-interval-stacked"},{"type":"link","label":"Plot / Interval / Stacked / Transpose","href":"/wave/docs/examples/plot-interval-stacked-transpose"},{"type":"link","label":"Plot / Interval / Stacked / Grouped","href":"/wave/docs/examples/plot-interval-stacked-grouped"},{"type":"link","label":"Plot / Interval / Stacked / Grouped / Transpose","href":"/wave/docs/examples/plot-interval-stacked-grouped-transpose"},{"type":"link","label":"Plot / Interval / Polar","href":"/wave/docs/examples/plot-interval-polar"},{"type":"link","label":"Plot / Interval / Polar / Stacked","href":"/wave/docs/examples/plot-interval-polar-stacked"},{"type":"link","label":"Plot / Interval / Theta","href":"/wave/docs/examples/plot-interval-theta"},{"type":"link","label":"Plot / Interval / Helix","href":"/wave/docs/examples/plot-interval-helix"},{"type":"link","label":"Plot / Interval / Annotation","href":"/wave/docs/examples/plot-interval-annotation"},{"type":"link","label":"Plot / Interval / Annotation / Transpose","href":"/wave/docs/examples/plot-interval-annotation-transpose"},{"type":"link","label":"Plot / Line","href":"/wave/docs/examples/plot-line"},{"type":"link","label":"Plot / Line / Groups","href":"/wave/docs/examples/plot-line-groups"},{"type":"link","label":"Plot / Line / Smooth","href":"/wave/docs/examples/plot-line-smooth"},{"type":"link","label":"Plot / Line / Step","href":"/wave/docs/examples/plot-step"},{"type":"link","label":"Plot / Line / Step / After","href":"/wave/docs/examples/plot-step-after"},{"type":"link","label":"Plot / Line / Step / Before","href":"/wave/docs/examples/plot-step-before"},{"type":"link","label":"Plot / Line / Labels","href":"/wave/docs/examples/plot-line-labels"},{"type":"link","label":"Plot / Line / Labels/ Stroked","href":"/wave/docs/examples/plot-line-labels-stroked"},{"type":"link","label":"Plot / Line / Labels / Occlusion","href":"/wave/docs/examples/plot-line-labels-no-overlap"},{"type":"link","label":"Plot / Line / Annotation","href":"/wave/docs/examples/plot-line-annotation"},{"type":"link","label":"Plot / Path","href":"/wave/docs/examples/plot-path"},{"type":"link","label":"Plot / Path / Point","href":"/wave/docs/examples/plot-path-point"},{"type":"link","label":"Plot / Path / Smooth","href":"/wave/docs/examples/plot-path-smooth"},{"type":"link","label":"Plot / Area","href":"/wave/docs/examples/plot-area"},{"type":"link","label":"Plot / Area / Groups","href":"/wave/docs/examples/plot-area-groups"},{"type":"link","label":"Plot / Area / Negative","href":"/wave/docs/examples/plot-area-negative"},{"type":"link","label":"Plot / Area / Range","href":"/wave/docs/examples/plot-area-range"},{"type":"link","label":"Plot / Area / Smooth","href":"/wave/docs/examples/plot-area-smooth"},{"type":"link","label":"Plot / Area / Stacked","href":"/wave/docs/examples/plot-area-stacked"},{"type":"link","label":"Plot / Area + Line","href":"/wave/docs/examples/plot-area-line"},{"type":"link","label":"Plot / Area + Line / Smooth","href":"/wave/docs/examples/plot-area-line-smooth"},{"type":"link","label":"Plot / Area + Line / Groups","href":"/wave/docs/examples/plot-area-line-groups"},{"type":"link","label":"Plot / Polygon","href":"/wave/docs/examples/plot-polygon"},{"type":"link","label":"Plot / Histogram","href":"/wave/docs/examples/plot-histogram"},{"type":"link","label":"Plot / Axis Titles","href":"/wave/docs/examples/plot-axis-title"},{"type":"link","label":"Plot / Form","href":"/wave/docs/examples/plot-form"},{"type":"link","label":"Plot / Vega-lite","href":"/wave/docs/examples/plot-vegalite"},{"type":"link","label":"Plot / Vega-lite / Update","href":"/wave/docs/examples/plot-vegalite-update"},{"type":"link","label":"Plot / Vega-lite / Form","href":"/wave/docs/examples/plot-vegalite-form"},{"type":"link","label":"Plot / Altair","href":"/wave/docs/examples/plot-altair"},{"type":"link","label":"Plot / Bokeh","href":"/wave/docs/examples/plot-bokeh"},{"type":"link","label":"Plot / Matplotlib","href":"/wave/docs/examples/plot-matplotlib"},{"type":"link","label":"Plot / Plotly","href":"/wave/docs/examples/plot-plotly"},{"type":"link","label":"Plot / D3.js","href":"/wave/docs/examples/plot-d3"},{"type":"link","label":"Pixel Art","href":"/wave/docs/examples/pixel-art"},{"type":"link","label":"Uploads","href":"/wave/docs/examples/upload"},{"type":"link","label":"Uploads / Async","href":"/wave/docs/examples/upload-async"},{"type":"link","label":"Uploads / UI","href":"/wave/docs/examples/upload-ui"},{"type":"link","label":"Uploads / Download","href":"/wave/docs/examples/upload-download"},{"type":"link","label":"Meta / Title","href":"/wave/docs/examples/meta-title"},{"type":"link","label":"Meta / Notification","href":"/wave/docs/examples/meta-notification"},{"type":"link","label":"Meta / Refresh","href":"/wave/docs/examples/meta-refresh"},{"type":"link","label":"Meta / Redirect","href":"/wave/docs/examples/meta-redirect"},{"type":"link","label":"Mode / Broadcast / Global","href":"/wave/docs/examples/counter-global"},{"type":"link","label":"Mode / Broadcast","href":"/wave/docs/examples/counter-broadcast"},{"type":"link","label":"Mode / Multicast","href":"/wave/docs/examples/counter-multicast"},{"type":"link","label":"Mode / Unicast","href":"/wave/docs/examples/counter-unicast"},{"type":"link","label":"Graphics / Primitives","href":"/wave/docs/examples/graphics-primitives"},{"type":"link","label":"Graphics / Spline","href":"/wave/docs/examples/graphics-spline"},{"type":"link","label":"Graphics / Clock","href":"/wave/docs/examples/graphics-clock"},{"type":"link","label":"Graphics / Path","href":"/wave/docs/examples/graphics-path"},{"type":"link","label":"Graphics / Turtle","href":"/wave/docs/examples/graphics-turtle"},{"type":"link","label":"Graphics / Hilbert","href":"/wave/docs/examples/graphics-hilbert"},{"type":"link","label":"Graphics / Glider Gun","href":"/wave/docs/examples/glider-gun"}]},{"collapsed":true,"type":"category","label":"API","items":[{"type":"link","label":"Package h2o_wave","href":"/wave/docs/api/index"},{"type":"link","label":"Module h2o_wave.core","href":"/wave/docs/api/core"},{"type":"link","label":"Module h2o_wave.ui","href":"/wave/docs/api/ui"},{"type":"link","label":"Module h2o_wave.server","href":"/wave/docs/api/server"},{"type":"link","label":"Module h2o_wave.graphics","href":"/wave/docs/api/graphics"},{"type":"link","label":"Module h2o_wave.types","href":"/wave/docs/api/types"},{"type":"link","label":"Module h2o_wave.test","href":"/wave/docs/api/test"}]}]},"permalinkToSidebar":{"/wave/docs/api/core":"someSidebar","/wave/docs/api/graphics":"someSidebar","/wave/docs/api/index":"someSidebar","/wave/docs/api/server":"someSidebar","/wave/docs/api/test":"someSidebar","/wave/docs/api/types":"someSidebar","/wave/docs/api/ui":"someSidebar","/wave/docs/apps":"someSidebar","/wave/docs/architecture":"someSidebar","/wave/docs/arguments":"someSidebar","/wave/docs/backup":"someSidebar","/wave/docs/browser-testing":"someSidebar","/wave/docs/buffers":"someSidebar","/wave/docs/cards":"someSidebar","/wave/docs/change-log":"someSidebar","/wave/docs/components":"someSidebar","/wave/docs/configuration":"someSidebar","/wave/docs/contributing":"someSidebar","/wave/docs/development":"someSidebar","/wave/docs/enterprise/basic-concepts":"someSidebar","/wave/docs/enterprise/developer-guide":"someSidebar","/wave/docs/enterprise/":"someSidebar","/wave/docs/examples/breadcrumbs":"someSidebar","/wave/docs/examples/button":"someSidebar","/wave/docs/examples/buttons":"someSidebar","/wave/docs/examples/card-menu":"someSidebar","/wave/docs/examples/checkbox":"someSidebar","/wave/docs/examples/checklist":"someSidebar","/wave/docs/examples/choice-group":"someSidebar","/wave/docs/examples/color-picker":"someSidebar","/wave/docs/examples/combobox":"someSidebar","/wave/docs/examples/counter-broadcast":"someSidebar","/wave/docs/examples/counter-global":"someSidebar","/wave/docs/examples/counter-multicast":"someSidebar","/wave/docs/examples/counter-unicast":"someSidebar","/wave/docs/examples/dashboard":"someSidebar","/wave/docs/examples/date-picker":"someSidebar","/wave/docs/examples/date-picker-trigger":"someSidebar","/wave/docs/examples/dropdown":"someSidebar","/wave/docs/examples/file-upload":"someSidebar","/wave/docs/examples/form":"someSidebar","/wave/docs/examples/form-frame":"someSidebar","/wave/docs/examples/form-frame-path":"someSidebar","/wave/docs/examples/form-markup":"someSidebar","/wave/docs/examples/form-menu":"someSidebar","/wave/docs/examples/form-template":"someSidebar","/wave/docs/examples/frame":"someSidebar","/wave/docs/examples/frame-path":"someSidebar","/wave/docs/examples/glider-gun":"someSidebar","/wave/docs/examples/graphics-clock":"someSidebar","/wave/docs/examples/graphics-hilbert":"someSidebar","/wave/docs/examples/graphics-path":"someSidebar","/wave/docs/examples/graphics-primitives":"someSidebar","/wave/docs/examples/graphics-spline":"someSidebar","/wave/docs/examples/graphics-turtle":"someSidebar","/wave/docs/examples/hash-routing":"someSidebar","/wave/docs/examples/header":"someSidebar","/wave/docs/examples/hello-world":"someSidebar","/wave/docs/examples/image":"someSidebar","/wave/docs/examples":"someSidebar","/wave/docs/examples/issue-tracker":"someSidebar","/wave/docs/examples/label":"someSidebar","/wave/docs/examples/layout":"someSidebar","/wave/docs/examples/layout-size":"someSidebar","/wave/docs/examples/link":"someSidebar","/wave/docs/examples/markdown":"someSidebar","/wave/docs/examples/markdown-data":"someSidebar","/wave/docs/examples/markup":"someSidebar","/wave/docs/examples/message-bar":"someSidebar","/wave/docs/examples/meta-notification":"someSidebar","/wave/docs/examples/meta-redirect":"someSidebar","/wave/docs/examples/meta-refresh":"someSidebar","/wave/docs/examples/meta-title":"someSidebar","/wave/docs/examples/nav":"someSidebar","/wave/docs/examples/picker":"someSidebar","/wave/docs/examples/picker-selection":"someSidebar","/wave/docs/examples/pixel-art":"someSidebar","/wave/docs/examples/plot-altair":"someSidebar","/wave/docs/examples/plot-area":"someSidebar","/wave/docs/examples/plot-area-groups":"someSidebar","/wave/docs/examples/plot-area-line":"someSidebar","/wave/docs/examples/plot-area-line-groups":"someSidebar","/wave/docs/examples/plot-area-line-smooth":"someSidebar","/wave/docs/examples/plot-area-negative":"someSidebar","/wave/docs/examples/plot-area-range":"someSidebar","/wave/docs/examples/plot-area-smooth":"someSidebar","/wave/docs/examples/plot-area-stacked":"someSidebar","/wave/docs/examples/plot-axis-title":"someSidebar","/wave/docs/examples/plot-bokeh":"someSidebar","/wave/docs/examples/plot-d3":"someSidebar","/wave/docs/examples/plot-form":"someSidebar","/wave/docs/examples/plot-histogram":"someSidebar","/wave/docs/examples/plot-interval":"someSidebar","/wave/docs/examples/plot-interval-annotation":"someSidebar","/wave/docs/examples/plot-interval-annotation-transpose":"someSidebar","/wave/docs/examples/plot-interval-groups":"someSidebar","/wave/docs/examples/plot-interval-groups-transpose":"someSidebar","/wave/docs/examples/plot-interval-helix":"someSidebar","/wave/docs/examples/plot-interval-labels":"someSidebar","/wave/docs/examples/plot-interval-polar":"someSidebar","/wave/docs/examples/plot-interval-polar-stacked":"someSidebar","/wave/docs/examples/plot-interval-range":"someSidebar","/wave/docs/examples/plot-interval-range-transpose":"someSidebar","/wave/docs/examples/plot-interval-stacked":"someSidebar","/wave/docs/examples/plot-interval-stacked-grouped":"someSidebar","/wave/docs/examples/plot-interval-stacked-grouped-transpose":"someSidebar","/wave/docs/examples/plot-interval-stacked-transpose":"someSidebar","/wave/docs/examples/plot-interval-theta":"someSidebar","/wave/docs/examples/plot-interval-transpose":"someSidebar","/wave/docs/examples/plot-line":"someSidebar","/wave/docs/examples/plot-line-annotation":"someSidebar","/wave/docs/examples/plot-line-groups":"someSidebar","/wave/docs/examples/plot-line-labels":"someSidebar","/wave/docs/examples/plot-line-labels-no-overlap":"someSidebar","/wave/docs/examples/plot-line-labels-stroked":"someSidebar","/wave/docs/examples/plot-line-smooth":"someSidebar","/wave/docs/examples/plot-matplotlib":"someSidebar","/wave/docs/examples/plot-path":"someSidebar","/wave/docs/examples/plot-path-point":"someSidebar","/wave/docs/examples/plot-path-smooth":"someSidebar","/wave/docs/examples/plot-plotly":"someSidebar","/wave/docs/examples/plot-point":"someSidebar","/wave/docs/examples/plot-point-annotation":"someSidebar","/wave/docs/examples/plot-point-custom":"someSidebar","/wave/docs/examples/plot-point-groups":"someSidebar","/wave/docs/examples/plot-point-map":"someSidebar","/wave/docs/examples/plot-point-shapes":"someSidebar","/wave/docs/examples/plot-point-sizes":"someSidebar","/wave/docs/examples/plot-polygon":"someSidebar","/wave/docs/examples/plot-step":"someSidebar","/wave/docs/examples/plot-step-after":"someSidebar","/wave/docs/examples/plot-step-before":"someSidebar","/wave/docs/examples/plot-vegalite":"someSidebar","/wave/docs/examples/plot-vegalite-form":"someSidebar","/wave/docs/examples/plot-vegalite-update":"someSidebar","/wave/docs/examples/progress":"someSidebar","/wave/docs/examples/progress-update":"someSidebar","/wave/docs/examples/range-slider":"someSidebar","/wave/docs/examples/separator":"someSidebar","/wave/docs/examples/slider":"someSidebar","/wave/docs/examples/spinbox":"someSidebar","/wave/docs/examples/stat-large":"someSidebar","/wave/docs/examples/stat-large-bar":"someSidebar","/wave/docs/examples/stat-small":"someSidebar","/wave/docs/examples/stat-small-series-area":"someSidebar","/wave/docs/examples/stat-small-series-interval":"someSidebar","/wave/docs/examples/stat-tall-gauge":"someSidebar","/wave/docs/examples/stat-tall-series-area":"someSidebar","/wave/docs/examples/stat-tall-series-interval":"someSidebar","/wave/docs/examples/stat-wide-bar":"someSidebar","/wave/docs/examples/stat-wide-gauge":"someSidebar","/wave/docs/examples/stat-wide-series-area":"someSidebar","/wave/docs/examples/stat-wide-series-interval":"someSidebar","/wave/docs/examples/stepper":"someSidebar","/wave/docs/examples/swatch-picker":"someSidebar","/wave/docs/examples/tab":"someSidebar","/wave/docs/examples/tab-delete":"someSidebar","/wave/docs/examples/tab-link":"someSidebar","/wave/docs/examples/tab-routing":"someSidebar","/wave/docs/examples/table":"someSidebar","/wave/docs/examples/table-download":"someSidebar","/wave/docs/examples/table-filter":"someSidebar","/wave/docs/examples/table-filter-backend":"someSidebar","/wave/docs/examples/table-groupby":"someSidebar","/wave/docs/examples/table-markdown":"someSidebar","/wave/docs/examples/table-search":"someSidebar","/wave/docs/examples/table-select":"someSidebar","/wave/docs/examples/table-sort":"someSidebar","/wave/docs/examples/tabs":"someSidebar","/wave/docs/examples/template":"someSidebar","/wave/docs/examples/template-data":"someSidebar","/wave/docs/examples/text":"someSidebar","/wave/docs/examples/text-sizes":"someSidebar","/wave/docs/examples/textbox":"someSidebar","/wave/docs/examples/textbox-trigger":"someSidebar","/wave/docs/examples/todo":"someSidebar","/wave/docs/examples/toggle":"someSidebar","/wave/docs/examples/toolbar":"someSidebar","/wave/docs/examples/toolbar-routing":"someSidebar","/wave/docs/examples/upload":"someSidebar","/wave/docs/examples/upload-async":"someSidebar","/wave/docs/examples/upload-download":"someSidebar","/wave/docs/examples/upload-ui":"someSidebar","/wave/docs/examples/wizard":"someSidebar","/wave/docs/expressions":"someSidebar","/wave/docs/files":"someSidebar","/wave/docs/getting-started":"someSidebar","/wave/docs/graphics":"someSidebar","/wave/docs/guide":"someSidebar","/wave/docs/installation":"someSidebar","/wave/docs/layout":"someSidebar","/wave/docs/logging":"someSidebar","/wave/docs/migrating-0":"someSidebar","/wave/docs/pages":"someSidebar","/wave/docs/plotting":"someSidebar","/wave/docs/realtime":"someSidebar","/wave/docs/routing":"someSidebar","/wave/docs/scripts":"someSidebar","/wave/docs/security":"someSidebar","/wave/docs/state":"someSidebar","/wave/docs/tour":"someSidebar","/wave/docs/tutorial-beer":"someSidebar","/wave/docs/tutorial-counter":"someSidebar","/wave/docs/tutorial-hello":"someSidebar","/wave/docs/tutorial-monitor":"someSidebar","/wave/docs/tutorial-todo":"someSidebar"}}')}}]);
\ No newline at end of file
diff --git a/docs/935f2afb.d4745991.js b/docs/935f2afb.d4745991.js
new file mode 100644
index 0000000000..c8311cb1fd
--- /dev/null
+++ b/docs/935f2afb.d4745991.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[134],{188:function(e){e.exports=JSON.parse('{"version":"current","label":"Next","isLast":true,"docsSidebars":{"someSidebar":[{"collapsed":true,"type":"category","label":"Prologue","items":[{"type":"link","label":"Change Log","href":"/wave/docs/change-log"},{"type":"link","label":"Migrating from 0.8","href":"/wave/docs/migrating-0-8"},{"type":"link","label":"Migrating from pre-alpha","href":"/wave/docs/migrating-0"},{"type":"link","label":"Contributing","href":"/wave/docs/contributing"}]},{"collapsed":true,"type":"category","label":"Getting Started","items":[{"type":"link","label":"Introduction","href":"/wave/docs/getting-started"},{"type":"link","label":"Installation","href":"/wave/docs/installation"},{"type":"link","label":"A Tour of Wave","href":"/wave/docs/tour"},{"type":"link","label":"Tutorial: Hello World","href":"/wave/docs/tutorial-hello"},{"type":"link","label":"Tutorial: Beer Wall","href":"/wave/docs/tutorial-beer"},{"type":"link","label":"Tutorial: System Monitor","href":"/wave/docs/tutorial-monitor"},{"type":"link","label":"Tutorial: Bean Counter","href":"/wave/docs/tutorial-counter"},{"type":"link","label":"Tutorial: Todo List","href":"/wave/docs/tutorial-todo"}]},{"collapsed":true,"type":"category","label":"Guide","items":[{"type":"link","label":"Introduction","href":"/wave/docs/guide"},{"type":"link","label":"Architecture","href":"/wave/docs/architecture"},{"type":"link","label":"Wave Scripts","href":"/wave/docs/scripts"},{"type":"link","label":"Wave Apps","href":"/wave/docs/apps"},{"type":"link","label":"Pages","href":"/wave/docs/pages"},{"type":"link","label":"Layout","href":"/wave/docs/layout"},{"type":"link","label":"Cards","href":"/wave/docs/cards"},{"type":"link","label":"Data Buffers","href":"/wave/docs/buffers"},{"type":"link","label":"Components","href":"/wave/docs/components"},{"type":"link","label":"Event Arguments","href":"/wave/docs/arguments"},{"type":"link","label":"State","href":"/wave/docs/state"},{"type":"link","label":"Routing","href":"/wave/docs/routing"},{"type":"link","label":"Realtime Sync","href":"/wave/docs/realtime"},{"type":"link","label":"Background Tasks","href":"/wave/docs/background"},{"type":"link","label":"Data-binding","href":"/wave/docs/expressions"},{"type":"link","label":"Files","href":"/wave/docs/files"},{"type":"link","label":"Plots","href":"/wave/docs/plotting"},{"type":"link","label":"Graphics","href":"/wave/docs/graphics"},{"type":"link","label":"Security","href":"/wave/docs/security"},{"type":"link","label":"Logging","href":"/wave/docs/logging"},{"type":"link","label":"Command Line Interface","href":"/wave/docs/cli"},{"type":"link","label":"Development","href":"/wave/docs/development"},{"type":"link","label":"Browser Testing","href":"/wave/docs/browser-testing"},{"type":"link","label":"Configuration","href":"/wave/docs/configuration"},{"type":"link","label":"Deployment","href":"/wave/docs/deployment"},{"type":"link","label":"Backup and Recovery","href":"/wave/docs/backup"}]},{"collapsed":true,"type":"category","label":"Enterprise","items":[{"type":"link","label":"Introduction","href":"/wave/docs/enterprise/"},{"type":"link","label":"Basic Concepts","href":"/wave/docs/enterprise/basic-concepts"},{"type":"link","label":"Developer Guide","href":"/wave/docs/enterprise/developer-guide"}]},{"collapsed":true,"type":"category","label":"Examples","items":[{"type":"link","label":"Gallery","href":"/wave/docs/examples"},{"type":"link","label":"Hello World!","href":"/wave/docs/examples/hello-world"},{"type":"link","label":"To-do List App","href":"/wave/docs/examples/todo"},{"type":"link","label":"Wizard","href":"/wave/docs/examples/wizard"},{"type":"link","label":"Issue Tracker","href":"/wave/docs/examples/issue-tracker"},{"type":"link","label":"Dashboard","href":"/wave/docs/examples/dashboard"},{"type":"link","label":"Stat / Small","href":"/wave/docs/examples/stat-small"},{"type":"link","label":"Stat / Large","href":"/wave/docs/examples/stat-large"},{"type":"link","label":"Stat / Gauge / Wide","href":"/wave/docs/examples/stat-wide-gauge"},{"type":"link","label":"Stat / Gauge / Tall","href":"/wave/docs/examples/stat-tall-gauge"},{"type":"link","label":"Stat / Bar / Wide","href":"/wave/docs/examples/stat-wide-bar"},{"type":"link","label":"Stat / Bar / Large","href":"/wave/docs/examples/stat-large-bar"},{"type":"link","label":"Stat / Series / Small / Area","href":"/wave/docs/examples/stat-small-series-area"},{"type":"link","label":"Stat / Series / Small / Interval","href":"/wave/docs/examples/stat-small-series-interval"},{"type":"link","label":"Stat / Series / Wide / Area","href":"/wave/docs/examples/stat-wide-series-area"},{"type":"link","label":"Stat / Series / Wide / Interval","href":"/wave/docs/examples/stat-wide-series-interval"},{"type":"link","label":"Stat / Series / Tall / Area","href":"/wave/docs/examples/stat-tall-series-area"},{"type":"link","label":"Stat / Series / Tall / Interval","href":"/wave/docs/examples/stat-tall-series-interval"},{"type":"link","label":"Layout / Position","href":"/wave/docs/examples/layout"},{"type":"link","label":"Layout / Size","href":"/wave/docs/examples/layout-size"},{"type":"link","label":"Form","href":"/wave/docs/examples/form"},{"type":"link","label":"Form / Text","href":"/wave/docs/examples/text"},{"type":"link","label":"Form / Text / Sizes","href":"/wave/docs/examples/text-sizes"},{"type":"link","label":"Form / Label","href":"/wave/docs/examples/label"},{"type":"link","label":"Form / Link","href":"/wave/docs/examples/link"},{"type":"link","label":"Form / Progress","href":"/wave/docs/examples/progress"},{"type":"link","label":"Form / Progress / Updating","href":"/wave/docs/examples/progress-update"},{"type":"link","label":"Form / Message Bar","href":"/wave/docs/examples/message-bar"},{"type":"link","label":"Form / Textbox","href":"/wave/docs/examples/textbox"},{"type":"link","label":"Form / Textbox / Trigger","href":"/wave/docs/examples/textbox-trigger"},{"type":"link","label":"Form / Button","href":"/wave/docs/examples/button"},{"type":"link","label":"Form / Buttons","href":"/wave/docs/examples/buttons"},{"type":"link","label":"Form / Checkbox","href":"/wave/docs/examples/checkbox"},{"type":"link","label":"Form / Checklist","href":"/wave/docs/examples/checklist"},{"type":"link","label":"Form / Picker","href":"/wave/docs/examples/picker"},{"type":"link","label":"Form / Picker / Selection","href":"/wave/docs/examples/picker-selection"},{"type":"link","label":"Form / Dropdown","href":"/wave/docs/examples/dropdown"},{"type":"link","label":"Form / Choice Group","href":"/wave/docs/examples/choice-group"},{"type":"link","label":"Form / Combobox","href":"/wave/docs/examples/combobox"},{"type":"link","label":"Form / Toggle","href":"/wave/docs/examples/toggle"},{"type":"link","label":"Form / Spinbox","href":"/wave/docs/examples/spinbox"},{"type":"link","label":"Form / Slider","href":"/wave/docs/examples/slider"},{"type":"link","label":"Form / Range Slider","href":"/wave/docs/examples/range-slider"},{"type":"link","label":"Form / Date Picker","href":"/wave/docs/examples/date-picker"},{"type":"link","label":"Form / Date Picker / Trigger","href":"/wave/docs/examples/date-picker-trigger"},{"type":"link","label":"Form / Color Picker","href":"/wave/docs/examples/color-picker"},{"type":"link","label":"Form / Swatch Picker","href":"/wave/docs/examples/swatch-picker"},{"type":"link","label":"Form / Tabs","href":"/wave/docs/examples/tabs"},{"type":"link","label":"Form / Separator","href":"/wave/docs/examples/separator"},{"type":"link","label":"Form / File Upload","href":"/wave/docs/examples/file-upload"},{"type":"link","label":"Form / Frame","href":"/wave/docs/examples/form-frame"},{"type":"link","label":"Form / Frame / Path","href":"/wave/docs/examples/form-frame-path"},{"type":"link","label":"Form / Menu","href":"/wave/docs/examples/form-menu"},{"type":"link","label":"Form / Template","href":"/wave/docs/examples/form-template"},{"type":"link","label":"Form / Markup","href":"/wave/docs/examples/form-markup"},{"type":"link","label":"Form / Stepper","href":"/wave/docs/examples/stepper"},{"type":"link","label":"Table / Markdown","href":"/wave/docs/examples/table-markdown"},{"type":"link","label":"Table","href":"/wave/docs/examples/table"},{"type":"link","label":"Table / Sort","href":"/wave/docs/examples/table-sort"},{"type":"link","label":"Table / Search","href":"/wave/docs/examples/table-search"},{"type":"link","label":"Table / Filter","href":"/wave/docs/examples/table-filter"},{"type":"link","label":"Table / Filter / Backend","href":"/wave/docs/examples/table-filter-backend"},{"type":"link","label":"Table / Download","href":"/wave/docs/examples/table-download"},{"type":"link","label":"Table / Group by","href":"/wave/docs/examples/table-groupby"},{"type":"link","label":"Table / Preselection","href":"/wave/docs/examples/table-select"},{"type":"link","label":"Image","href":"/wave/docs/examples/image"},{"type":"link","label":"Frame","href":"/wave/docs/examples/frame"},{"type":"link","label":"Frame / Path","href":"/wave/docs/examples/frame-path"},{"type":"link","label":"Template","href":"/wave/docs/examples/template"},{"type":"link","label":"Template / Data","href":"/wave/docs/examples/template-data"},{"type":"link","label":"Markdown","href":"/wave/docs/examples/markdown"},{"type":"link","label":"Markdown / Data","href":"/wave/docs/examples/markdown-data"},{"type":"link","label":"Markup","href":"/wave/docs/examples/markup"},{"type":"link","label":"Nav","href":"/wave/docs/examples/nav"},{"type":"link","label":"Toolbar","href":"/wave/docs/examples/toolbar"},{"type":"link","label":"Tab","href":"/wave/docs/examples/tab"},{"type":"link","label":"Tab / Links","href":"/wave/docs/examples/tab-link"},{"type":"link","label":"Tabs / Navigation","href":"/wave/docs/examples/tab-delete"},{"type":"link","label":"Breadcrumbs","href":"/wave/docs/examples/breadcrumbs"},{"type":"link","label":"Header","href":"/wave/docs/examples/header"},{"type":"link","label":"Routing","href":"/wave/docs/examples/hash-routing"},{"type":"link","label":"Routing / Toolbar","href":"/wave/docs/examples/toolbar-routing"},{"type":"link","label":"Routing / Tabs","href":"/wave/docs/examples/tab-routing"},{"type":"link","label":"Context Menu","href":"/wave/docs/examples/card-menu"},{"type":"link","label":"Plot / Point","href":"/wave/docs/examples/plot-point"},{"type":"link","label":"Plot / Point / Shapes","href":"/wave/docs/examples/plot-point-shapes"},{"type":"link","label":"Plot / Point / Sizes","href":"/wave/docs/examples/plot-point-sizes"},{"type":"link","label":"Plot / Point / Map","href":"/wave/docs/examples/plot-point-map"},{"type":"link","label":"Plot / Point / Groups","href":"/wave/docs/examples/plot-point-groups"},{"type":"link","label":"Plot / Point / Annotation","href":"/wave/docs/examples/plot-point-annotation"},{"type":"link","label":"Plot / Point / Custom","href":"/wave/docs/examples/plot-point-custom"},{"type":"link","label":"Plot / Interval","href":"/wave/docs/examples/plot-interval"},{"type":"link","label":"Plot / Interval / Transpose","href":"/wave/docs/examples/plot-interval-transpose"},{"type":"link","label":"Plot / Interval / Groups","href":"/wave/docs/examples/plot-interval-groups"},{"type":"link","label":"Plot / Interval / Groups / Transpose","href":"/wave/docs/examples/plot-interval-groups-transpose"},{"type":"link","label":"Plot / Interval / Labels","href":"/wave/docs/examples/plot-interval-labels"},{"type":"link","label":"Plot / Interval / Range","href":"/wave/docs/examples/plot-interval-range"},{"type":"link","label":"Plot / Interval / Range / Transpose","href":"/wave/docs/examples/plot-interval-range-transpose"},{"type":"link","label":"Plot / Interval / Stacked","href":"/wave/docs/examples/plot-interval-stacked"},{"type":"link","label":"Plot / Interval / Stacked / Transpose","href":"/wave/docs/examples/plot-interval-stacked-transpose"},{"type":"link","label":"Plot / Interval / Stacked / Grouped","href":"/wave/docs/examples/plot-interval-stacked-grouped"},{"type":"link","label":"Plot / Interval / Stacked / Grouped / Transpose","href":"/wave/docs/examples/plot-interval-stacked-grouped-transpose"},{"type":"link","label":"Plot / Interval / Polar","href":"/wave/docs/examples/plot-interval-polar"},{"type":"link","label":"Plot / Interval / Polar / Stacked","href":"/wave/docs/examples/plot-interval-polar-stacked"},{"type":"link","label":"Plot / Interval / Theta","href":"/wave/docs/examples/plot-interval-theta"},{"type":"link","label":"Plot / Interval / Helix","href":"/wave/docs/examples/plot-interval-helix"},{"type":"link","label":"Plot / Interval / Annotation","href":"/wave/docs/examples/plot-interval-annotation"},{"type":"link","label":"Plot / Interval / Annotation / Transpose","href":"/wave/docs/examples/plot-interval-annotation-transpose"},{"type":"link","label":"Plot / Line","href":"/wave/docs/examples/plot-line"},{"type":"link","label":"Plot / Line / Groups","href":"/wave/docs/examples/plot-line-groups"},{"type":"link","label":"Plot / Line / Smooth","href":"/wave/docs/examples/plot-line-smooth"},{"type":"link","label":"Plot / Line / Step","href":"/wave/docs/examples/plot-step"},{"type":"link","label":"Plot / Line / Step / After","href":"/wave/docs/examples/plot-step-after"},{"type":"link","label":"Plot / Line / Step / Before","href":"/wave/docs/examples/plot-step-before"},{"type":"link","label":"Plot / Line / Labels","href":"/wave/docs/examples/plot-line-labels"},{"type":"link","label":"Plot / Line / Labels/ Stroked","href":"/wave/docs/examples/plot-line-labels-stroked"},{"type":"link","label":"Plot / Line / Labels / Occlusion","href":"/wave/docs/examples/plot-line-labels-no-overlap"},{"type":"link","label":"Plot / Line / Annotation","href":"/wave/docs/examples/plot-line-annotation"},{"type":"link","label":"Plot / Path","href":"/wave/docs/examples/plot-path"},{"type":"link","label":"Plot / Path / Point","href":"/wave/docs/examples/plot-path-point"},{"type":"link","label":"Plot / Path / Smooth","href":"/wave/docs/examples/plot-path-smooth"},{"type":"link","label":"Plot / Area","href":"/wave/docs/examples/plot-area"},{"type":"link","label":"Plot / Area / Groups","href":"/wave/docs/examples/plot-area-groups"},{"type":"link","label":"Plot / Area / Negative","href":"/wave/docs/examples/plot-area-negative"},{"type":"link","label":"Plot / Area / Range","href":"/wave/docs/examples/plot-area-range"},{"type":"link","label":"Plot / Area / Smooth","href":"/wave/docs/examples/plot-area-smooth"},{"type":"link","label":"Plot / Area / Stacked","href":"/wave/docs/examples/plot-area-stacked"},{"type":"link","label":"Plot / Area + Line","href":"/wave/docs/examples/plot-area-line"},{"type":"link","label":"Plot / Area + Line / Smooth","href":"/wave/docs/examples/plot-area-line-smooth"},{"type":"link","label":"Plot / Area + Line / Groups","href":"/wave/docs/examples/plot-area-line-groups"},{"type":"link","label":"Plot / Polygon","href":"/wave/docs/examples/plot-polygon"},{"type":"link","label":"Plot / Histogram","href":"/wave/docs/examples/plot-histogram"},{"type":"link","label":"Plot / Axis Titles","href":"/wave/docs/examples/plot-axis-title"},{"type":"link","label":"Plot / Form","href":"/wave/docs/examples/plot-form"},{"type":"link","label":"Plot / Vega-lite","href":"/wave/docs/examples/plot-vegalite"},{"type":"link","label":"Plot / Vega-lite / Update","href":"/wave/docs/examples/plot-vegalite-update"},{"type":"link","label":"Plot / Vega-lite / Form","href":"/wave/docs/examples/plot-vegalite-form"},{"type":"link","label":"Plot / Altair","href":"/wave/docs/examples/plot-altair"},{"type":"link","label":"Plot / Bokeh","href":"/wave/docs/examples/plot-bokeh"},{"type":"link","label":"Plot / Matplotlib","href":"/wave/docs/examples/plot-matplotlib"},{"type":"link","label":"Plot / Plotly","href":"/wave/docs/examples/plot-plotly"},{"type":"link","label":"Plot / D3.js","href":"/wave/docs/examples/plot-d3"},{"type":"link","label":"Pixel Art","href":"/wave/docs/examples/pixel-art"},{"type":"link","label":"Uploads","href":"/wave/docs/examples/upload"},{"type":"link","label":"Uploads / Async","href":"/wave/docs/examples/upload-async"},{"type":"link","label":"Uploads / UI","href":"/wave/docs/examples/upload-ui"},{"type":"link","label":"Uploads / Download","href":"/wave/docs/examples/upload-download"},{"type":"link","label":"Meta / Title","href":"/wave/docs/examples/meta-title"},{"type":"link","label":"Meta / Icon","href":"/wave/docs/examples/meta-icon"},{"type":"link","label":"Meta / Notification","href":"/wave/docs/examples/meta-notification"},{"type":"link","label":"Meta / Refresh","href":"/wave/docs/examples/meta-refresh"},{"type":"link","label":"Meta / Redirect","href":"/wave/docs/examples/meta-redirect"},{"type":"link","label":"Mode / Broadcast / Global","href":"/wave/docs/examples/counter-global"},{"type":"link","label":"Mode / Broadcast","href":"/wave/docs/examples/counter-broadcast"},{"type":"link","label":"Mode / Multicast","href":"/wave/docs/examples/counter-multicast"},{"type":"link","label":"Mode / Unicast","href":"/wave/docs/examples/counter-unicast"},{"type":"link","label":"Background Tasks","href":"/wave/docs/examples/background"},{"type":"link","label":"Background Tasks / Executor","href":"/wave/docs/examples/background-executor"},{"type":"link","label":"Site / Async","href":"/wave/docs/examples/site-async"},{"type":"link","label":"Graphics / Primitives","href":"/wave/docs/examples/graphics-primitives"},{"type":"link","label":"Graphics / Spline","href":"/wave/docs/examples/graphics-spline"},{"type":"link","label":"Graphics / Clock","href":"/wave/docs/examples/graphics-clock"},{"type":"link","label":"Graphics / Path","href":"/wave/docs/examples/graphics-path"},{"type":"link","label":"Graphics / Turtle","href":"/wave/docs/examples/graphics-turtle"},{"type":"link","label":"Graphics / Hilbert","href":"/wave/docs/examples/graphics-hilbert"},{"type":"link","label":"Graphics / Glider Gun","href":"/wave/docs/examples/glider-gun"}]},{"collapsed":true,"type":"category","label":"API","items":[{"type":"link","label":"Package h2o_wave","href":"/wave/docs/api/index"},{"type":"link","label":"Module h2o_wave.core","href":"/wave/docs/api/core"},{"type":"link","label":"Module h2o_wave.ui","href":"/wave/docs/api/ui"},{"type":"link","label":"Module h2o_wave.server","href":"/wave/docs/api/server"},{"type":"link","label":"Module h2o_wave.graphics","href":"/wave/docs/api/graphics"},{"type":"link","label":"Module h2o_wave.types","href":"/wave/docs/api/types"},{"type":"link","label":"Module h2o_wave.test","href":"/wave/docs/api/test"}]}]},"permalinkToSidebar":{"/wave/docs/api/core":"someSidebar","/wave/docs/api/graphics":"someSidebar","/wave/docs/api/index":"someSidebar","/wave/docs/api/server":"someSidebar","/wave/docs/api/test":"someSidebar","/wave/docs/api/types":"someSidebar","/wave/docs/api/ui":"someSidebar","/wave/docs/apps":"someSidebar","/wave/docs/architecture":"someSidebar","/wave/docs/arguments":"someSidebar","/wave/docs/background":"someSidebar","/wave/docs/backup":"someSidebar","/wave/docs/browser-testing":"someSidebar","/wave/docs/buffers":"someSidebar","/wave/docs/cards":"someSidebar","/wave/docs/change-log":"someSidebar","/wave/docs/cli":"someSidebar","/wave/docs/components":"someSidebar","/wave/docs/configuration":"someSidebar","/wave/docs/contributing":"someSidebar","/wave/docs/deployment":"someSidebar","/wave/docs/development":"someSidebar","/wave/docs/enterprise/basic-concepts":"someSidebar","/wave/docs/enterprise/developer-guide":"someSidebar","/wave/docs/enterprise/":"someSidebar","/wave/docs/examples/background":"someSidebar","/wave/docs/examples/background-executor":"someSidebar","/wave/docs/examples/breadcrumbs":"someSidebar","/wave/docs/examples/button":"someSidebar","/wave/docs/examples/buttons":"someSidebar","/wave/docs/examples/card-menu":"someSidebar","/wave/docs/examples/checkbox":"someSidebar","/wave/docs/examples/checklist":"someSidebar","/wave/docs/examples/choice-group":"someSidebar","/wave/docs/examples/color-picker":"someSidebar","/wave/docs/examples/combobox":"someSidebar","/wave/docs/examples/counter-broadcast":"someSidebar","/wave/docs/examples/counter-global":"someSidebar","/wave/docs/examples/counter-multicast":"someSidebar","/wave/docs/examples/counter-unicast":"someSidebar","/wave/docs/examples/dashboard":"someSidebar","/wave/docs/examples/date-picker":"someSidebar","/wave/docs/examples/date-picker-trigger":"someSidebar","/wave/docs/examples/dropdown":"someSidebar","/wave/docs/examples/file-upload":"someSidebar","/wave/docs/examples/form":"someSidebar","/wave/docs/examples/form-frame":"someSidebar","/wave/docs/examples/form-frame-path":"someSidebar","/wave/docs/examples/form-markup":"someSidebar","/wave/docs/examples/form-menu":"someSidebar","/wave/docs/examples/form-template":"someSidebar","/wave/docs/examples/frame":"someSidebar","/wave/docs/examples/frame-path":"someSidebar","/wave/docs/examples/glider-gun":"someSidebar","/wave/docs/examples/graphics-clock":"someSidebar","/wave/docs/examples/graphics-hilbert":"someSidebar","/wave/docs/examples/graphics-path":"someSidebar","/wave/docs/examples/graphics-primitives":"someSidebar","/wave/docs/examples/graphics-spline":"someSidebar","/wave/docs/examples/graphics-turtle":"someSidebar","/wave/docs/examples/hash-routing":"someSidebar","/wave/docs/examples/header":"someSidebar","/wave/docs/examples/hello-world":"someSidebar","/wave/docs/examples/image":"someSidebar","/wave/docs/examples":"someSidebar","/wave/docs/examples/issue-tracker":"someSidebar","/wave/docs/examples/label":"someSidebar","/wave/docs/examples/layout":"someSidebar","/wave/docs/examples/layout-size":"someSidebar","/wave/docs/examples/link":"someSidebar","/wave/docs/examples/markdown":"someSidebar","/wave/docs/examples/markdown-data":"someSidebar","/wave/docs/examples/markup":"someSidebar","/wave/docs/examples/message-bar":"someSidebar","/wave/docs/examples/meta-icon":"someSidebar","/wave/docs/examples/meta-notification":"someSidebar","/wave/docs/examples/meta-redirect":"someSidebar","/wave/docs/examples/meta-refresh":"someSidebar","/wave/docs/examples/meta-title":"someSidebar","/wave/docs/examples/nav":"someSidebar","/wave/docs/examples/picker":"someSidebar","/wave/docs/examples/picker-selection":"someSidebar","/wave/docs/examples/pixel-art":"someSidebar","/wave/docs/examples/plot-altair":"someSidebar","/wave/docs/examples/plot-area":"someSidebar","/wave/docs/examples/plot-area-groups":"someSidebar","/wave/docs/examples/plot-area-line":"someSidebar","/wave/docs/examples/plot-area-line-groups":"someSidebar","/wave/docs/examples/plot-area-line-smooth":"someSidebar","/wave/docs/examples/plot-area-negative":"someSidebar","/wave/docs/examples/plot-area-range":"someSidebar","/wave/docs/examples/plot-area-smooth":"someSidebar","/wave/docs/examples/plot-area-stacked":"someSidebar","/wave/docs/examples/plot-axis-title":"someSidebar","/wave/docs/examples/plot-bokeh":"someSidebar","/wave/docs/examples/plot-d3":"someSidebar","/wave/docs/examples/plot-form":"someSidebar","/wave/docs/examples/plot-histogram":"someSidebar","/wave/docs/examples/plot-interval":"someSidebar","/wave/docs/examples/plot-interval-annotation":"someSidebar","/wave/docs/examples/plot-interval-annotation-transpose":"someSidebar","/wave/docs/examples/plot-interval-groups":"someSidebar","/wave/docs/examples/plot-interval-groups-transpose":"someSidebar","/wave/docs/examples/plot-interval-helix":"someSidebar","/wave/docs/examples/plot-interval-labels":"someSidebar","/wave/docs/examples/plot-interval-polar":"someSidebar","/wave/docs/examples/plot-interval-polar-stacked":"someSidebar","/wave/docs/examples/plot-interval-range":"someSidebar","/wave/docs/examples/plot-interval-range-transpose":"someSidebar","/wave/docs/examples/plot-interval-stacked":"someSidebar","/wave/docs/examples/plot-interval-stacked-grouped":"someSidebar","/wave/docs/examples/plot-interval-stacked-grouped-transpose":"someSidebar","/wave/docs/examples/plot-interval-stacked-transpose":"someSidebar","/wave/docs/examples/plot-interval-theta":"someSidebar","/wave/docs/examples/plot-interval-transpose":"someSidebar","/wave/docs/examples/plot-line":"someSidebar","/wave/docs/examples/plot-line-annotation":"someSidebar","/wave/docs/examples/plot-line-groups":"someSidebar","/wave/docs/examples/plot-line-labels":"someSidebar","/wave/docs/examples/plot-line-labels-no-overlap":"someSidebar","/wave/docs/examples/plot-line-labels-stroked":"someSidebar","/wave/docs/examples/plot-line-smooth":"someSidebar","/wave/docs/examples/plot-matplotlib":"someSidebar","/wave/docs/examples/plot-path":"someSidebar","/wave/docs/examples/plot-path-point":"someSidebar","/wave/docs/examples/plot-path-smooth":"someSidebar","/wave/docs/examples/plot-plotly":"someSidebar","/wave/docs/examples/plot-point":"someSidebar","/wave/docs/examples/plot-point-annotation":"someSidebar","/wave/docs/examples/plot-point-custom":"someSidebar","/wave/docs/examples/plot-point-groups":"someSidebar","/wave/docs/examples/plot-point-map":"someSidebar","/wave/docs/examples/plot-point-shapes":"someSidebar","/wave/docs/examples/plot-point-sizes":"someSidebar","/wave/docs/examples/plot-polygon":"someSidebar","/wave/docs/examples/plot-step":"someSidebar","/wave/docs/examples/plot-step-after":"someSidebar","/wave/docs/examples/plot-step-before":"someSidebar","/wave/docs/examples/plot-vegalite":"someSidebar","/wave/docs/examples/plot-vegalite-form":"someSidebar","/wave/docs/examples/plot-vegalite-update":"someSidebar","/wave/docs/examples/progress":"someSidebar","/wave/docs/examples/progress-update":"someSidebar","/wave/docs/examples/range-slider":"someSidebar","/wave/docs/examples/separator":"someSidebar","/wave/docs/examples/site-async":"someSidebar","/wave/docs/examples/slider":"someSidebar","/wave/docs/examples/spinbox":"someSidebar","/wave/docs/examples/stat-large":"someSidebar","/wave/docs/examples/stat-large-bar":"someSidebar","/wave/docs/examples/stat-small":"someSidebar","/wave/docs/examples/stat-small-series-area":"someSidebar","/wave/docs/examples/stat-small-series-interval":"someSidebar","/wave/docs/examples/stat-tall-gauge":"someSidebar","/wave/docs/examples/stat-tall-series-area":"someSidebar","/wave/docs/examples/stat-tall-series-interval":"someSidebar","/wave/docs/examples/stat-wide-bar":"someSidebar","/wave/docs/examples/stat-wide-gauge":"someSidebar","/wave/docs/examples/stat-wide-series-area":"someSidebar","/wave/docs/examples/stat-wide-series-interval":"someSidebar","/wave/docs/examples/stepper":"someSidebar","/wave/docs/examples/swatch-picker":"someSidebar","/wave/docs/examples/tab":"someSidebar","/wave/docs/examples/tab-delete":"someSidebar","/wave/docs/examples/tab-link":"someSidebar","/wave/docs/examples/tab-routing":"someSidebar","/wave/docs/examples/table":"someSidebar","/wave/docs/examples/table-download":"someSidebar","/wave/docs/examples/table-filter":"someSidebar","/wave/docs/examples/table-filter-backend":"someSidebar","/wave/docs/examples/table-groupby":"someSidebar","/wave/docs/examples/table-markdown":"someSidebar","/wave/docs/examples/table-search":"someSidebar","/wave/docs/examples/table-select":"someSidebar","/wave/docs/examples/table-sort":"someSidebar","/wave/docs/examples/tabs":"someSidebar","/wave/docs/examples/template":"someSidebar","/wave/docs/examples/template-data":"someSidebar","/wave/docs/examples/text":"someSidebar","/wave/docs/examples/text-sizes":"someSidebar","/wave/docs/examples/textbox":"someSidebar","/wave/docs/examples/textbox-trigger":"someSidebar","/wave/docs/examples/todo":"someSidebar","/wave/docs/examples/toggle":"someSidebar","/wave/docs/examples/toolbar":"someSidebar","/wave/docs/examples/toolbar-routing":"someSidebar","/wave/docs/examples/upload":"someSidebar","/wave/docs/examples/upload-async":"someSidebar","/wave/docs/examples/upload-download":"someSidebar","/wave/docs/examples/upload-ui":"someSidebar","/wave/docs/examples/wizard":"someSidebar","/wave/docs/expressions":"someSidebar","/wave/docs/files":"someSidebar","/wave/docs/getting-started":"someSidebar","/wave/docs/graphics":"someSidebar","/wave/docs/guide":"someSidebar","/wave/docs/installation":"someSidebar","/wave/docs/layout":"someSidebar","/wave/docs/logging":"someSidebar","/wave/docs/migrating-0":"someSidebar","/wave/docs/migrating-0-8":"someSidebar","/wave/docs/pages":"someSidebar","/wave/docs/plotting":"someSidebar","/wave/docs/realtime":"someSidebar","/wave/docs/routing":"someSidebar","/wave/docs/scripts":"someSidebar","/wave/docs/security":"someSidebar","/wave/docs/state":"someSidebar","/wave/docs/tour":"someSidebar","/wave/docs/tutorial-beer":"someSidebar","/wave/docs/tutorial-counter":"someSidebar","/wave/docs/tutorial-hello":"someSidebar","/wave/docs/tutorial-monitor":"someSidebar","/wave/docs/tutorial-todo":"someSidebar"}}')}}]);
\ No newline at end of file
diff --git a/docs/9363aca1.0a0bc3a7.js b/docs/9363aca1.ce054208.js
similarity index 92%
rename from docs/9363aca1.0a0bc3a7.js
rename to docs/9363aca1.ce054208.js
index 43dfea2dc0..003f8ad1ac 100644
--- a/docs/9363aca1.0a0bc3a7.js
+++ b/docs/9363aca1.ce054208.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[133],{187: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 p})),r.d(t,"default",(function(){return l}));var n=r(2),a=r(6),o=(r(0),r(290)),c={title:"Graphics / Turtle"},i={unversionedId:"examples/graphics-turtle",id:"examples/graphics-turtle",isDocsHomePage:!1,title:"Graphics / Turtle",description:"Use turtle graphics to draw paths.",source:"@site/docs/examples/graphics-turtle.md",slug:"/examples/graphics-turtle",permalink:"/wave/docs/examples/graphics-turtle",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-turtle.md",version:"current",sidebar:"someSidebar",previous:{title:"Graphics / Path",permalink:"/wave/docs/examples/graphics-path"},next:{title:"Graphics / Hilbert",permalink:"/wave/docs/examples/graphics-hilbert"}},p=[],s={rightToc:p};function l(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},s,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use turtle graphics to draw paths.\nOriginal example: ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://docs.python.org/3/library/turtle.html"}),"https://docs.python.org/3/library/turtle.html")),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(391).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"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")))}l.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return b}));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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;s++)c[s]=r[s];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},391:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/graphics-turtle-bf00fb61c0569a86ca32908a60485b91.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[135],{189: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 p})),r.d(t,"default",(function(){return l}));var n=r(2),a=r(6),o=(r(0),r(292)),c={title:"Graphics / Turtle"},i={unversionedId:"examples/graphics-turtle",id:"examples/graphics-turtle",isDocsHomePage:!1,title:"Graphics / Turtle",description:"Use turtle graphics to draw paths.",source:"@site/docs/examples/graphics-turtle.md",slug:"/examples/graphics-turtle",permalink:"/wave/docs/examples/graphics-turtle",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-turtle.md",version:"current",sidebar:"someSidebar",previous:{title:"Graphics / Path",permalink:"/wave/docs/examples/graphics-path"},next:{title:"Graphics / Hilbert",permalink:"/wave/docs/examples/graphics-hilbert"}},p=[],s={rightToc:p};function l(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},s,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use turtle graphics to draw paths.\nOriginal example: ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://docs.python.org/3/library/turtle.html"}),"https://docs.python.org/3/library/turtle.html")),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(396).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"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")))}l.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return b}));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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;s++)c[s]=r[s];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},396:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/graphics-turtle-bf00fb61c0569a86ca32908a60485b91.png"}}]);
\ No newline at end of file
diff --git a/docs/93896215.5af00467.js b/docs/93896215.5af00467.js
deleted file mode 100644
index ba951ee953..0000000000
--- a/docs/93896215.5af00467.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[134],{188:function(a){a.exports=JSON.parse('{"allTagsPath":"/wave/blog/tags","slug":"hola","name":"hola","count":1,"permalink":"/wave/blog/tags/hola"}')}}]);
\ No newline at end of file
diff --git a/docs/941b9d10.547b026b.js b/docs/941b9d10.391830c3.js
similarity index 92%
rename from docs/941b9d10.547b026b.js
rename to docs/941b9d10.391830c3.js
index 4e6a5dde8e..0007b7341c 100644
--- a/docs/941b9d10.547b026b.js
+++ b/docs/941b9d10.391830c3.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[135],{189:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return p})),r.d(t,"rightToc",(function(){return c})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(290)),i={title:"Plot / Line / Step / After"},p={unversionedId:"examples/plot-step-after",id:"examples/plot-step-after",isDocsHomePage:!1,title:"Plot / Line / Step / After",description:"Make a line plot with a step-after curve.",source:"@site/docs/examples/plot-step-after.md",slug:"/examples/plot-step-after",permalink:"/wave/docs/examples/plot-step-after",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-step-after.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Line / Step",permalink:"/wave/docs/examples/plot-step"},next:{title:"Plot / Line / Step / Before",permalink:"/wave/docs/examples/plot-step-before"}},c=[],l={rightToc:c};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a line plot with a step-after curve."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(392).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.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='Line, step-right',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', curve='step-after', y_min=0)])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return d}));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 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 p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;l++)i[l]=r[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},392:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-step-after-72cc87c6a29c712eb6728e9d6bd626ca.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[136],{190:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return p})),r.d(t,"rightToc",(function(){return c})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(292)),i={title:"Plot / Line / Step / After"},p={unversionedId:"examples/plot-step-after",id:"examples/plot-step-after",isDocsHomePage:!1,title:"Plot / Line / Step / After",description:"Make a line plot with a step-after curve.",source:"@site/docs/examples/plot-step-after.md",slug:"/examples/plot-step-after",permalink:"/wave/docs/examples/plot-step-after",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-step-after.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Line / Step",permalink:"/wave/docs/examples/plot-step"},next:{title:"Plot / Line / Step / Before",permalink:"/wave/docs/examples/plot-step-before"}},c=[],l={rightToc:c};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a line plot with a step-after curve."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(397).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.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='Line, step-right',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', curve='step-after', y_min=0)])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return d}));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 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 p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;l++)i[l]=r[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},397:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-step-after-72cc87c6a29c712eb6728e9d6bd626ca.png"}}]);
\ No newline at end of file
diff --git a/docs/948118d6.1ba3a36f.js b/docs/948118d6.1ba3a36f.js
new file mode 100644
index 0000000000..47b98b22b6
--- /dev/null
+++ b/docs/948118d6.1ba3a36f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[137],{191:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return i})),t.d(n,"metadata",(function(){return c})),t.d(n,"rightToc",(function(){return u})),t.d(n,"default",(function(){return s}));var r=t(2),a=t(6),o=(t(0),t(292)),i={title:"Routing / Toolbar"},c={unversionedId:"examples/toolbar-routing",id:"examples/toolbar-routing",isDocsHomePage:!1,title:"Routing / Toolbar",description:"This example demonstrates how you can observe and handle changes to the browser's",source:"@site/docs/examples/toolbar-routing.md",slug:"/examples/toolbar-routing",permalink:"/wave/docs/examples/toolbar-routing",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/toolbar-routing.md",version:"current",sidebar:"someSidebar",previous:{title:"Routing",permalink:"/wave/docs/examples/hash-routing"},next:{title:"Routing / Tabs",permalink:"/wave/docs/examples/tab-routing"}},u=[],l={rightToc:u};function s(e){var n=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},l,i,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"This example demonstrates how you can observe and handle changes to the browser's\n",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://developer.mozilla.org/en-US/docs/Web/API/Location/hash"}),"location hash")),Object(o.b)("p",null,"The location hash can be accessed using ",Object(o.b)("inlineCode",{parentName:"p"},"q.args['#']"),"."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(398).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    hash = q.args['#']\n    if hash:\n        blurb = q.page['blurb']\n        if hash == 'menu/spam':\n            blurb.content = \"Sorry, we're out of spam!\"\n        elif hash == 'menu/ham':\n            blurb.content = \"Sorry, we're out of ham!\"\n        elif hash == 'menu/eggs':\n            blurb.content = \"Sorry, we're out of eggs!\"\n        elif hash == 'about':\n            blurb.content = 'Everything here is gluten-free!'\n    else:\n        q.page['nav'] = ui.toolbar_card(\n            box='1 1 4 1',\n            items=[\n                ui.command(name='#menu/spam', label='Spam'),\n                ui.command(name='#menu/ham', label='Ham'),\n                ui.command(name='#menu/eggs', label='Eggs'),\n                ui.command(name='#about', label='About'),\n            ],\n        )\n        q.page['blurb'] = ui.markdown_card(\n            box='1 2 4 2',\n            title='Store',\n            content='Welcome to our store!',\n        )\n    await q.page.save()\n")))}s.isMDXComponent=!0},292:function(e,n,t){"use strict";t.d(n,"a",(function(){return p})),t.d(n,"b",(function(){return d}));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 c(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function u(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var l=a.a.createContext({}),s=function(e){var n=a.a.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},p=function(e){var n=s(e.components);return a.a.createElement(l.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,i=e.parentName,l=u(e,["components","mdxType","originalType","parentName"]),p=s(t),m=r,d=p["".concat(i,".").concat(m)]||p[m]||b[m]||o;return t?a.a.createElement(d,c(c({ref:n},l),{},{components:t})):a.a.createElement(d,c({ref:n},l))}));function d(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,i=new Array(o);i[0]=m;var c={};for(var u in n)hasOwnProperty.call(n,u)&&(c[u]=n[u]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var l=2;l<o;l++)i[l]=t[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},398:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/toolbar-routing-84cf0d9860b9d575f5703ddf0e001bf7.png"}}]);
\ No newline at end of file
diff --git a/docs/948118d6.5b3a0dc9.js b/docs/948118d6.5b3a0dc9.js
deleted file mode 100644
index 064768ccff..0000000000
--- a/docs/948118d6.5b3a0dc9.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[136],{190:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return i})),t.d(n,"metadata",(function(){return c})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return u}));var r=t(2),o=t(6),a=(t(0),t(290)),i={title:"Routing / Toolbar"},c={unversionedId:"examples/toolbar-routing",id:"examples/toolbar-routing",isDocsHomePage:!1,title:"Routing / Toolbar",description:"This example demonstrates how you can observe and handle changes to the browser's",source:"@site/docs/examples/toolbar-routing.md",slug:"/examples/toolbar-routing",permalink:"/wave/docs/examples/toolbar-routing",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/toolbar-routing.md",version:"current",sidebar:"someSidebar",previous:{title:"Routing",permalink:"/wave/docs/examples/hash-routing"},next:{title:"Routing / Tabs",permalink:"/wave/docs/examples/tab-routing"}},l=[],s={rightToc:l};function u(e){var n=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},s,i,{components:n,mdxType:"MDXLayout"}),Object(a.b)("p",null,"This example demonstrates how you can observe and handle changes to the browser's\n",Object(a.b)("a",Object(r.a)({parentName:"p"},{href:"https://developer.mozilla.org/en-US/docs/Web/API/Location/hash"}),"location hash")),Object(a.b)("p",null,"The location hash can be accessed using ",Object(a.b)("inlineCode",{parentName:"p"},"q.args['#']"),"."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+t(393).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    hash = q.args['#']\n    if hash:\n        blurb = q.page['blurb']\n        if hash == 'menu/spam':\n            blurb.content = \"Sorry, we're out of spam!\"\n        elif hash == 'menu/ham':\n            blurb.content = \"Sorry, we're out of ham!\"\n        elif hash == 'menu/eggs':\n            blurb.content = \"Sorry, we're out of eggs!\"\n        elif hash == 'about':\n            blurb.content = 'Everything here is gluten-free!'\n    else:\n        q.page['nav'] = ui.toolbar_card(\n            box='1 1 4 1',\n            items=[\n                ui.command(name='#menu/spam', label='Spam'),\n                ui.command(name='#menu/ham', label='Ham'),\n                ui.command(name='#menu/eggs', label='Eggs'),\n                ui.command(name='#about', label='About'),\n            ],\n        )\n        q.page['blurb'] = ui.markdown_card(\n            box='1 2 4 2',\n            title='Store',\n            content='Welcome to our store!',\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 d}));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 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 c(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=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<a;s++)i[s]=t[s];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},393:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/toolbar-routing-84cf0d9860b9d575f5703ddf0e001bf7.png"}}]);
\ No newline at end of file
diff --git a/docs/950656ac.0aadf206.js b/docs/950656ac.0aadf206.js
deleted file mode 100644
index 9023318899..0000000000
--- a/docs/950656ac.0aadf206.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[137],{191:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return r})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return b})),n.d(t,"default",(function(){return s}));var a=n(2),i=n(6),o=(n(0),n(290)),r={title:"Tutorial: Bean Counter"},c={unversionedId:"tutorial-counter",id:"tutorial-counter",isDocsHomePage:!1,title:"Tutorial: Bean Counter",description:"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.",source:"@site/docs/tutorial-counter.md",slug:"/tutorial-counter",permalink:"/wave/docs/tutorial-counter",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/tutorial-counter.md",version:"current",sidebar:"someSidebar",previous:{title:"Tutorial: System Monitor",permalink:"/wave/docs/tutorial-monitor"},next:{title:"Tutorial: Todo List",permalink:"/wave/docs/tutorial-todo"}},b=[{value:"Prerequisites",id:"prerequisites",children:[]},{value:"Step 1: Start listening",id:"step-1-start-listening",children:[]},{value:"Step 2: Display a button",id:"step-2-display-a-button",children:[]},{value:"Step 3: Handle button clicks",id:"step-3-handle-button-clicks",children:[]},{value:"Step 4: Make it more efficient",id:"step-4-make-it-more-efficient",children:[]},{value:"Intermission: Understanding state",id:"intermission-understanding-state",children:[]},{value:"Step 6: User-level realtime sync",id:"step-6-user-level-realtime-sync",children:[]},{value:"Step 7: App-level realtime sync",id:"step-7-app-level-realtime-sync",children:[]},{value:"Summary",id:"summary",children:[]}],l={rightToc:b};function s(e){var t=e.components,r=Object(i.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},l,r,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"In the previous tutorials, we've been authoring ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/scripts"}),"Wave scripts"),". A Wave script is a perfectly fine and dandy way to modify pages in Wave and build dashboards. However, to build ",Object(o.b)("em",{parentName:"p"},"interactive applications")," in Wave - user interfaces that can dynamically respond to ",Object(o.b)("em",{parentName:"p"},"events")," (the user's actions) -  ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/apps"}),"Wave apps")," are the way to go."),Object(o.b)("p",null,"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."),Object(o.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(o.b)("source",{src:n(477).default,type:"video/mp4"})),Object(o.b)("p",null,"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."),Object(o.b)("h2",{id:"prerequisites"},"Prerequisites"),Object(o.b)("p",null,"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 ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/tutorial-hello"}),"Hello World tutorial")," and complete steps 1 and 2."),Object(o.b)("h2",{id:"step-1-start-listening"},"Step 1: Start listening"),Object(o.b)("p",null,"The first step towards listening to events from the UI is to, literally, ",Object(o.b)("inlineCode",{parentName:"p"},"listen"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:'title="$HOME/wave-apps/counter.py"',title:'"$HOME/wave-apps/counter.py"'}),"from h2o_wave import Q, listen\n\nasync def serve(q: Q):\n    pass\n\nlisten('/counter', serve)\n")),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"listen()")," is a function that takes two required arguments:"),Object(o.b)("ol",null,Object(o.b)("li",{parentName:"ol"},"The route to listen to, in this case ",Object(o.b)("inlineCode",{parentName:"li"},"/counter")," (which translates to ",Object(o.b)("inlineCode",{parentName:"li"},"localhost:55555/counter")," or ",Object(o.b)("inlineCode",{parentName:"li"},"www.example.com/counter"),")."),Object(o.b)("li",{parentName:"ol"},"The function to call when a event arrives from the UI, in this case ",Object(o.b)("inlineCode",{parentName:"li"},"serve()")," (but you can call it anything you please, like ",Object(o.b)("inlineCode",{parentName:"li"},"shoe_strings()"),").")),Object(o.b)("p",null,"It's important to understand that ",Object(o.b)("inlineCode",{parentName:"p"},"serve()")," is called on every event from the UI. No matter how many event originate from the UI, they all pass through ",Object(o.b)("inlineCode",{parentName:"p"},"serve()"),"."),Object(o.b)("div",{className:"admonition admonition-caution alert alert--warning"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}),Object(o.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})))),"caution")),Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},Object(o.b)("inlineCode",{parentName:"p"},"serve()")," is an ",Object(o.b)("inlineCode",{parentName:"p"},"async")," function, and must be declared as ",Object(o.b)("inlineCode",{parentName:"p"},"async def serve(...)")," instead of plain ",Object(o.b)("inlineCode",{parentName:"p"},"def serve(...)"),"."))),Object(o.b)("p",null,"Next, run your app:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave-apps\n./venv/bin/python counter.py\n")),Object(o.b)("p",null,"At this point, your app will be up and running, but it doesn't do anything yet. Let's change that in a second."),Object(o.b)("h2",{id:"step-2-display-a-button"},"Step 2: Display a button"),Object(o.b)("p",null,"Let's add a button to our app. Out goal is to increment and display the bean count each time the button is clicked."),Object(o.b)("p",null,"To do this, we declare a variable called ",Object(o.b)("inlineCode",{parentName:"p"},"bean_count"),", and use ",Object(o.b)("inlineCode",{parentName:"p"},"form_card()")," to add a ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Form_(document)"}),"form")," to our page. A form card is a special type of card that displays a vertical stack of ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/components"}),"components")," (also called ",Object(o.b)("em",{parentName:"p"},"widgets"),"). In this case our form contains a solitary button named ",Object(o.b)("inlineCode",{parentName:"p"},"increment"),", with a caption showing the current ",Object(o.b)("inlineCode",{parentName:"p"},"bean_count"),". The button is marked as ",Object(o.b)("inlineCode",{parentName:"p"},"primary"),", which serves no other purpose than to make it look tall, dark, and handsome. "),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:'{5-18} title="$HOME/wave-apps/counter.py"',"{5-18}":!0,title:'"$HOME/wave-apps/counter.py"'}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    bean_count = 0\n\n    q.page['beans'] = ui.form_card(\n        box='1 1 1 2',\n        items=[\n            ui.button(\n                name='increment',\n                label='Click me!',\n                caption=f'{bean_count} beans',\n                primary=True,\n            ),\n        ],\n    )\n    await q.page.save()\n\n\nlisten('/counter', serve)\n")),Object(o.b)("p",null,"Notice how the technique to modify and save pages in a Wave app is different from that of a Wave script."),Object(o.b)("table",null,Object(o.b)("thead",{parentName:"table"},Object(o.b)("tr",{parentName:"thead"},Object(o.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Task"),Object(o.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Wave Script"),Object(o.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Wave App"))),Object(o.b)("tbody",{parentName:"table"},Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Access page at route ",Object(o.b)("inlineCode",{parentName:"td"},"/foo")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"page = site['/foo']")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"page = q.page"))),Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Access card named ",Object(o.b)("inlineCode",{parentName:"td"},"foo")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"card = page['foo']")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"card = q.page['foo']"))),Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Save page"),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"page.save()")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"await q.page.save()"))))),Object(o.b)("p",null,"In a Wave app, we always access the page using the ",Object(o.b)("em",{parentName:"p"},"query context")," ",Object(o.b)("inlineCode",{parentName:"p"},"q"),". The query context carries useful information about the active UI event, including who issued the event, what information was entered, which buttons were clicked, and so on; and ",Object(o.b)("inlineCode",{parentName:"p"},"q.page")," always refers to the page located at the route you passed to ",Object(o.b)("inlineCode",{parentName:"p"},"listen()")," (in this case, ",Object(o.b)("inlineCode",{parentName:"p"},"/counter"),")."),Object(o.b)("p",null,"Restart your app (",Object(o.b)("inlineCode",{parentName:"p"},"^C")," and run it again):"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave-apps\n./venv/bin/python counter.py\n")),Object(o.b)("p",null,"Point your browser to ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"http://localhost:55555/counter"}),"http://localhost:55555/counter"),". You should see a nice big button, waiting to be clicked on:"),Object(o.b)("p",null,Object(o.b)("img",{alt:"Button",src:n(497).default})),Object(o.b)("p",null,"If you click on the button, you'll notice that it doesn't do anything. This is because we haven't handled button clicks yet. Instead, when you click the button, the events are sent to your ",Object(o.b)("inlineCode",{parentName:"p"},"serve()")," function, but the ",Object(o.b)("inlineCode",{parentName:"p"},"serve()")," function blindly adds the form (with the button) to the page all over again and saves it, causing the page to display the same form all over again. Let's fix this next. "),Object(o.b)("h2",{id:"step-3-handle-button-clicks"},"Step 3: Handle button clicks"),Object(o.b)("p",null,"Add a condition to check if the button is clicked, and if so, increment the bean count."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:'{5-7} title="$HOME/wave-apps/counter.py"',"{5-7}":!0,title:'"$HOME/wave-apps/counter.py"'}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    bean_count = q.client.bean_count or 0\n    if q.args.increment:\n        q.client.bean_count = bean_count = bean_count + 1\n\n    q.page['beans'] = ui.form_card(\n        box='1 1 1 2',\n        items=[\n            ui.button(\n                name='increment',\n                label='Click me!',\n                caption=f'{bean_count} beans',\n                primary=True,\n            ),\n        ],\n    )\n    await q.page.save()\n\n\nlisten('/counter', serve)\n")),Object(o.b)("p",null,"The above edit introduces two important concepts: ",Object(o.b)("inlineCode",{parentName:"p"},"q.client")," and ",Object(o.b)("inlineCode",{parentName:"p"},"q.args"),". "),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"q.client")," is a dictionary-like object for storing and retrieving arbitrary information related to the active ",Object(o.b)("em",{parentName:"li"},"client")," (a browser tab or browser session). Anything you put into ",Object(o.b)("inlineCode",{parentName:"li"},"q.client")," while handling a event can be read back while handling a subsequent event, provided the subsequent event originates from the same client. In our case, we read ",Object(o.b)("inlineCode",{parentName:"li"},"q.client.bean_count")," to get the bean count. If it's unavailable (which means this is a new client), we default the bean count to ",Object(o.b)("inlineCode",{parentName:"li"},"0"),"."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"q.args"),", also a dictionary-like object, carries ",Object(o.b)("em",{parentName:"li"},"event arguments"),", which contains information about what the user did. In our case, if the user clicked on our button (named ",Object(o.b)("inlineCode",{parentName:"li"},"increment"),"), ",Object(o.b)("inlineCode",{parentName:"li"},"q.args.increment")," will be ",Object(o.b)("inlineCode",{parentName:"li"},"True"),". If not, ",Object(o.b)("inlineCode",{parentName:"li"},"q.args.increment")," will be ",Object(o.b)("inlineCode",{parentName:"li"},"None"),". Therefore, if ",Object(o.b)("inlineCode",{parentName:"li"},"q.args.increment")," is ",Object(o.b)("inlineCode",{parentName:"li"},"True"),", we increment the client's ",Object(o.b)("inlineCode",{parentName:"li"},"bean_count"),". If not, we do nothing.")),Object(o.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(o.b)("path",Object(a.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(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"From now on, any time you see the term 'client', recall that it's a technical term for 'browser tab' or 'browser session'. In other words, any time you open a new browser tab to access your app, you're accessing your app from a new client."))),Object(o.b)("div",{className:"admonition admonition-info alert alert--info"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(o.b)("path",Object(a.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(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"Each component in the Wave component library populates ",Object(o.b)("inlineCode",{parentName:"p"},"q.args")," with its own value. For more information, see ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/components"}),"Components"),"."))),Object(o.b)("p",null,"Go ahead and restart your app (",Object(o.b)("inlineCode",{parentName:"p"},"^C")," and run it again):"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave-apps\n./venv/bin/python counter.py\n")),Object(o.b)("p",null,"Point your browser to ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"http://localhost:55555/counter"}),"http://localhost:55555/counter"),". Your button should now count beans when clicked:"),Object(o.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(o.b)("source",{src:n(477).default,type:"video/mp4"})),Object(o.b)("h2",{id:"step-4-make-it-more-efficient"},"Step 4: Make it more efficient"),Object(o.b)("p",null,"Our program is accurate, but not necessarily efficient. On every button-click, it is recreating the form card and the button over and over again instead of updating the existing button's caption with the current bean count. You can observe how chatty the app is by gaping in abject horror at the Wave server's log."),Object(o.b)("div",{className:"admonition admonition-info alert alert--info"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(o.b)("path",Object(a.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(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"To view the Wave server's log, switch to the terminal window running the Wave server."))),Object(o.b)("p",null,"Let's wrinkle our noses in disgust and fix this gross inefficiency right away to make our little bean counter web-scale for great good."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:'{9-10,22-23} title="$HOME/wave-apps/counter.py"',"{9-10,22-23}":!0,title:'"$HOME/wave-apps/counter.py"'}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    bean_count = q.client.bean_count or 0\n    if q.args.increment:\n        q.client.bean_count = bean_count = bean_count + 1\n\n    if not q.client.initialized:\n        q.client.initialized = True\n        q.page['beans'] = ui.form_card(\n            box='1 1 1 2',\n            items=[\n                ui.button(\n                    name='increment',\n                    label='Click me!',\n                    caption=f'{bean_count} beans',\n                    primary=True,\n                ),\n            ],\n        )\n    else:\n        q.page['beans'].items[0].button.caption = f'{bean_count} beans'\n    await q.page.save()\n\n\nlisten('/counter', serve)\n")),Object(o.b)("p",null,"In the above edit, we check for an arbitrary flag in ",Object(o.b)("inlineCode",{parentName:"p"},"q.client")," called ",Object(o.b)("inlineCode",{parentName:"p"},"initialized"),". "),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},"If the flag is not set, we assume that the request is originating from new, empty client. If so, we set ",Object(o.b)("inlineCode",{parentName:"li"},"initialized")," to ",Object(o.b)("inlineCode",{parentName:"li"},"True")," (to make a note to ourselves that the client is not empty anymore), then add our form card to the page."),Object(o.b)("li",{parentName:"ul"},"If the flag is already set, we assume that the form card (and the button inside it) are already on the page, and simply update the button's caption with the new bean count.")),Object(o.b)("h2",{id:"intermission-understanding-state"},"Intermission: Understanding state"),Object(o.b)("p",null,"In the above steps, we learned about ",Object(o.b)("inlineCode",{parentName:"p"},"q.args")," (request arguments submitted from the browser) and ",Object(o.b)("inlineCode",{parentName:"p"},"q.client")," (arbitrary information associated with the client). Let's expand on these and introduce two new concepts: ",Object(o.b)("inlineCode",{parentName:"p"},"q.user")," and ",Object(o.b)("inlineCode",{parentName:"p"},"q.app"),". "),Object(o.b)("p",null,"Before we do that, try accessing ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"http://localhost:55555/counter"}),"http://localhost:55555/counter")," from two different browser tabs and playing with them. You'll notice that each browser tab (or, each client) maintains separate bean counts."),Object(o.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(o.b)("source",{src:n(498).default,type:"video/mp4"})),Object(o.b)("p",null,"Maintaining separate bean counts per client is one way to count beans. You can also maintain bean counts at the user level and the app level. "),Object(o.b)("p",null,"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)."),Object(o.b)("p",null,"Similar to how ",Object(o.b)("inlineCode",{parentName:"p"},"q.client")," stores arbitrary information associated with the client, ",Object(o.b)("inlineCode",{parentName:"p"},"q.user")," and ",Object(o.b)("inlineCode",{parentName:"p"},"q.app")," store arbitrary information associated with the user and the app, respectively."),Object(o.b)("p",null,"In most apps, you'll end up using a mix of ",Object(o.b)("inlineCode",{parentName:"p"},"q.client"),", ",Object(o.b)("inlineCode",{parentName:"p"},"q.user")," and ",Object(o.b)("inlineCode",{parentName:"p"},"q.app")," to correctly handle requests originating from:"),Object(o.b)("ol",null,Object(o.b)("li",{parentName:"ol"},"Different users."),Object(o.b)("li",{parentName:"ol"},"Different browser tabs belonging to the same user (possibly from different devices)."),Object(o.b)("li",{parentName:"ol"},"The same browser tab.")),Object(o.b)("p",null,"In other words, your Wave app is multi-user by default, but how the app manages data at the app-level, at the user-level and at the client-level is up to you."),Object(o.b)("h2",{id:"step-6-user-level-realtime-sync"},"Step 6: User-level realtime sync"),Object(o.b)("p",null,"To maintain bean counts at the user level, all we have to do store ",Object(o.b)("inlineCode",{parentName:"p"},"bean_count")," in ",Object(o.b)("inlineCode",{parentName:"p"},"q.user")," instead of ",Object(o.b)("inlineCode",{parentName:"p"},"q.client"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:'{5,7} title="$HOME/wave-apps/counter.py"',"{5,7}":!0,title:'"$HOME/wave-apps/counter.py"'}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    bean_count = q.user.bean_count or 0\n    if q.args.increment:\n        q.user.bean_count = bean_count = bean_count + 1\n\n    if not q.client.initialized:\n        q.client.initialized = True\n        q.page['beans'] = ui.form_card(\n            box='1 1 1 2',\n            items=[\n                ui.button(\n                    name='increment',\n                    label='Click me!',\n                    caption=f'{bean_count} beans',\n                    primary=True,\n                ),\n            ],\n        )\n    else:\n        q.page['beans'].items[0].button.caption = f'{bean_count} beans'\n    await q.page.save()\n\n\nlisten('/counter', serve)\n")),Object(o.b)("p",null,"If we run this app, we'll see that the counts are being maintained across browser tabs, but the updated counts don't show up immediately across all tabs. Instead, they show up only when you interact with the other tabs, or reload them. "),Object(o.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(o.b)("source",{src:n(499).default,type:"video/mp4"})),Object(o.b)("p",null,"This would be considered normal behavior for a typical web application, and most users familiar with the interwebs are also familiar with the reload button, but we can do better, because having to hit the reload button to get updates is about as exciting as waiting for paint to dry."),Object(o.b)("p",null,"This is easier done than said - simply change the server mode to ",Object(o.b)("inlineCode",{parentName:"p"},"multicast")," to enable realtime sync across clients:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:'{27} title="$HOME/wave-apps/counter.py"',"{27}":!0,title:'"$HOME/wave-apps/counter.py"'}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    bean_count = q.user.bean_count or 0\n    if q.args.increment:\n        q.user.bean_count = bean_count = bean_count + 1\n\n    if not q.client.initialized:\n        q.client.initialized = True\n        q.page['beans'] = ui.form_card(\n            box='1 1 1 2',\n            items=[\n                ui.button(\n                    name='increment',\n                    label='Click me!',\n                    caption=f'{bean_count} beans',\n                    primary=True,\n                ),\n            ],\n        )\n    else:\n        q.page['beans'].items[0].button.caption = f'{bean_count} beans'\n    await q.page.save()\n\n\nlisten('/counter', serve, mode='multicast')\n")),Object(o.b)("div",{className:"admonition admonition-info alert alert--info"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(o.b)("path",Object(a.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(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"The default server mode for apps is ",Object(o.b)("inlineCode",{parentName:"p"},"unicast"),', which means "don\'t sync across clients". On the other hand, ',Object(o.b)("inlineCode",{parentName:"p"},"multicast"),' means "sync across clients". There\'s also a third mode, ',Object(o.b)("inlineCode",{parentName:"p"},"broadcast"),', which means "sync across users", which we\'ll see in the next step.'))),Object(o.b)("p",null,"Re-running our app proves that the user-level bean count indeed syncs across tabs:"),Object(o.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(o.b)("source",{src:n(500).default,type:"video/mp4"})),Object(o.b)("h2",{id:"step-7-app-level-realtime-sync"},"Step 7: App-level realtime sync"),Object(o.b)("p",null,"Going from user-level bean counting to app-level bean counting is easy: simply store ",Object(o.b)("inlineCode",{parentName:"p"},"bean_count")," on ",Object(o.b)("inlineCode",{parentName:"p"},"q.app")," instead of ",Object(o.b)("inlineCode",{parentName:"p"},"q.user"),", and switch the server mode to ",Object(o.b)("inlineCode",{parentName:"p"},"broadcast"),":"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:'{5,7,27} title="$HOME/wave-apps/counter.py"',"{5,7,27}":!0,title:'"$HOME/wave-apps/counter.py"'}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    bean_count = q.app.bean_count or 0\n    if q.args.increment:\n        q.app.bean_count = bean_count = bean_count + 1\n\n    if not q.client.initialized:\n        q.client.initialized = True\n        q.page['beans'] = ui.form_card(\n            box='1 1 1 2',\n            items=[\n                ui.button(\n                    name='increment',\n                    label='Click me!',\n                    caption=f'{bean_count} beans',\n                    primary=True,\n                ),\n            ],\n        )\n    else:\n        q.page['beans'].items[0].button.caption = f'{bean_count} beans'\n    await q.page.save()\n\n\nlisten('/counter', serve, mode='broadcast')\n")),Object(o.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(o.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"The ",Object(o.b)("inlineCode",{parentName:"p"},"broadcast")," mode can be used to build collaborative apps that need to synchronize state across all users, like group chat or multiplayer games."))),Object(o.b)("h2",{id:"summary"},"Summary"),Object(o.b)("p",null,"In this tutorial, we learned how to author interactive applications, or ",Object(o.b)("em",{parentName:"p"},"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:"),Object(o.b)("table",null,Object(o.b)("thead",{parentName:"table"},Object(o.b)("tr",{parentName:"thead"},Object(o.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Attribute"),Object(o.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Type"),Object(o.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Use"))),Object(o.b)("tbody",{parentName:"table"},Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"q.args")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Read-only"),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Stores command arguments")),Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"q.client")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Read/Write"),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Stores client-level state")),Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"q.user")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Read/Write"),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Stores user-level state")),Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"q.app")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Read/Write"),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Stores app-level state")))),Object(o.b)("p",null,"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)."),Object(o.b)("p",null,"In the next section, we'll build something a bit more substantial and useful: a to-do list with realtime sync."))}s.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return m}));var a=n(0),i=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 r(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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function b(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n,a,i={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=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<o;l++)r[l]=n[l];return i.a.createElement.apply(null,r)}return i.a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},477:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/medias/tutorial-counter__demo-f3f19f437fc40cbcb7211837b2ce7e39.mp4"},497:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"},498:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/medias/tutorial-counter__client-879d907addd9c36d405015546d0c0fdd.mp4"},499:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/medias/tutorial-counter__user-nosync-85ed939bea17453866c14ee5359992ef.mp4"},500:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/medias/tutorial-counter__user-sync-cc763711bfc051a85c3df8a8508135c7.mp4"}}]);
\ No newline at end of file
diff --git a/docs/950656ac.0ccaa8ab.js b/docs/950656ac.0ccaa8ab.js
new file mode 100644
index 0000000000..86dda7fd0b
--- /dev/null
+++ b/docs/950656ac.0ccaa8ab.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[138],{192:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return r})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return b})),n.d(t,"default",(function(){return s}));var a=n(2),i=n(6),o=(n(0),n(292)),r={title:"Tutorial: Bean Counter"},c={unversionedId:"tutorial-counter",id:"tutorial-counter",isDocsHomePage:!1,title:"Tutorial: Bean Counter",description:"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.",source:"@site/docs/tutorial-counter.md",slug:"/tutorial-counter",permalink:"/wave/docs/tutorial-counter",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/tutorial-counter.md",version:"current",sidebar:"someSidebar",previous:{title:"Tutorial: System Monitor",permalink:"/wave/docs/tutorial-monitor"},next:{title:"Tutorial: Todo List",permalink:"/wave/docs/tutorial-todo"}},b=[{value:"Prerequisites",id:"prerequisites",children:[]},{value:"Step 1: Start listening",id:"step-1-start-listening",children:[]},{value:"Step 2: Display a button",id:"step-2-display-a-button",children:[]},{value:"Step 3: Handle button clicks",id:"step-3-handle-button-clicks",children:[]},{value:"Step 4: Make it more efficient",id:"step-4-make-it-more-efficient",children:[]},{value:"Intermission: Understanding state",id:"intermission-understanding-state",children:[]},{value:"Step 5: User-level realtime sync",id:"step-5-user-level-realtime-sync",children:[]},{value:"Step 6: App-level realtime sync",id:"step-6-app-level-realtime-sync",children:[]},{value:"Summary",id:"summary",children:[]}],l={rightToc:b};function s(e){var t=e.components,r=Object(i.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},l,r,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"In the previous tutorials, we've been authoring ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/scripts"}),"Wave scripts"),". A Wave script is a perfectly fine and dandy way to modify pages in Wave and build dashboards. However, to build ",Object(o.b)("em",{parentName:"p"},"interactive applications")," in Wave - user interfaces that can dynamically respond to ",Object(o.b)("em",{parentName:"p"},"events")," (the user's actions) -  ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/apps"}),"Wave apps")," are the way to go."),Object(o.b)("p",null,"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."),Object(o.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(o.b)("source",{src:n(483).default,type:"video/mp4"})),Object(o.b)("p",null,"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."),Object(o.b)("h2",{id:"prerequisites"},"Prerequisites"),Object(o.b)("p",null,"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 ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/tutorial-hello"}),"Hello World tutorial")," and complete steps 1 and 2."),Object(o.b)("h2",{id:"step-1-start-listening"},"Step 1: Start listening"),Object(o.b)("p",null,"The first step towards listening to events from the UI is to define an ",Object(o.b)("inlineCode",{parentName:"p"},"@app")," function:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:'title="$HOME/wave-apps/counter.py"',title:'"$HOME/wave-apps/counter.py"'}),"from h2o_wave import Q, main, app\n\n@app('/counter')\nasync def serve(q: Q):\n    pass\n")),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"@app")," is a decorator that takes one required argument - the route to listen to, in this case ",Object(o.b)("inlineCode",{parentName:"p"},"/counter")," (which translates to ",Object(o.b)("inlineCode",{parentName:"p"},"localhost:55555/counter")," or ",Object(o.b)("inlineCode",{parentName:"p"},"www.example.com/counter"),")."),Object(o.b)("p",null,"The ",Object(o.b)("inlineCode",{parentName:"p"},"@app")," function, in this case ",Object(o.b)("inlineCode",{parentName:"p"},"serve()"),", is called on every event from the UI. No matter how many events originate from the UI, they all pass through ",Object(o.b)("inlineCode",{parentName:"p"},"serve()"),"."),Object(o.b)("p",null,"We named our ",Object(o.b)("inlineCode",{parentName:"p"},"@app")," function ",Object(o.b)("inlineCode",{parentName:"p"},"serve()"),", but you can call it anything you please, like ",Object(o.b)("inlineCode",{parentName:"p"},"shoe_strings()"),"."),Object(o.b)("div",{className:"admonition admonition-caution alert alert--warning"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}),Object(o.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})))),"caution")),Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},Object(o.b)("inlineCode",{parentName:"p"},"serve()")," is an ",Object(o.b)("inlineCode",{parentName:"p"},"async")," function, and must be declared as ",Object(o.b)("inlineCode",{parentName:"p"},"async def serve(...)")," instead of plain ",Object(o.b)("inlineCode",{parentName:"p"},"def serve(...)"),"."))),Object(o.b)("p",null,"To run your app, use ",Object(o.b)("inlineCode",{parentName:"p"},"wave run"),":"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave-apps\nsource venv/bin/activate\nwave run counter\n")),Object(o.b)("p",null,"The ",Object(o.b)("inlineCode",{parentName:"p"},"wave run")," command runs your app in ",Object(o.b)("em",{parentName:"p"},"development mode"),", and the app is automatically reloaded when edited. The argument ",Object(o.b)("inlineCode",{parentName:"p"},"counter:main")," indicates that we want to use the ",Object(o.b)("inlineCode",{parentName:"p"},"main()")," function in ",Object(o.b)("inlineCode",{parentName:"p"},"counter.py")," to serve the app."),Object(o.b)("div",{className:"admonition admonition-info alert alert--info"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(o.b)("path",Object(a.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(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"You don't have to do anything with ",Object(o.b)("inlineCode",{parentName:"p"},"main")," except import it into your ",Object(o.b)("inlineCode",{parentName:"p"},".py")," file. ",Object(o.b)("inlineCode",{parentName:"p"},"main()")," is an ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://asgi.readthedocs.io/en/latest/"}),"ASGI"),"-compatible function that you can use with any ASGI server like ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://www.uvicorn.org/"}),"uvicorn")," or ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://gunicorn.org/"}),"gunicorn"),". See ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/deployment"}),"Deployment"),"."))),Object(o.b)("p",null,"At this point, your app will be up and running, but it doesn't do anything yet. Let's change that in a second."),Object(o.b)("h2",{id:"step-2-display-a-button"},"Step 2: Display a button"),Object(o.b)("p",null,"Let's add a button to our app. Out goal is to increment and display the bean count each time the button is clicked."),Object(o.b)("p",null,"To do this, we declare a variable called ",Object(o.b)("inlineCode",{parentName:"p"},"bean_count"),", and use ",Object(o.b)("inlineCode",{parentName:"p"},"form_card()")," to add a ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Form_(document)"}),"form")," to our page. A form card is a special type of card that displays a vertical stack of ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/components"}),"components")," (also called ",Object(o.b)("em",{parentName:"p"},"widgets"),"). In this case our form contains a solitary button named ",Object(o.b)("inlineCode",{parentName:"p"},"increment"),", with a caption showing the current ",Object(o.b)("inlineCode",{parentName:"p"},"bean_count"),". The button is marked as ",Object(o.b)("inlineCode",{parentName:"p"},"primary"),", which serves no other purpose than to make it look tall, dark, and handsome. "),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:'{5-18} title="$HOME/wave-apps/counter.py"',"{5-18}":!0,title:'"$HOME/wave-apps/counter.py"'}),"from h2o_wave import Q, main, app, ui\n\n@app('/counter')\nasync def serve(q: Q):\n    bean_count = 0\n\n    q.page['beans'] = ui.form_card(\n        box='1 1 1 2',\n        items=[\n            ui.button(\n                name='increment',\n                label='Click me!',\n                caption=f'{bean_count} beans',\n                primary=True,\n            ),\n        ],\n    )\n    await q.page.save()\n")),Object(o.b)("p",null,"Notice how the technique to modify and save pages in a Wave app is different from that of a Wave script."),Object(o.b)("table",null,Object(o.b)("thead",{parentName:"table"},Object(o.b)("tr",{parentName:"thead"},Object(o.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Task"),Object(o.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Wave Script"),Object(o.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Wave App"))),Object(o.b)("tbody",{parentName:"table"},Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Access page at route ",Object(o.b)("inlineCode",{parentName:"td"},"/foo")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"page = site['/foo']")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"page = q.page"))),Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Access card named ",Object(o.b)("inlineCode",{parentName:"td"},"foo")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"card = page['foo']")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"card = q.page['foo']"))),Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Save page"),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"page.save()")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"await q.page.save()"))))),Object(o.b)("p",null,"In a Wave app, we always access the page using the ",Object(o.b)("em",{parentName:"p"},"query context")," ",Object(o.b)("inlineCode",{parentName:"p"},"q"),". The query context carries useful information about the active UI event, including who issued the event, what information was entered, which buttons were clicked, and so on; and ",Object(o.b)("inlineCode",{parentName:"p"},"q.page")," always refers to the page located at the route you passed to ",Object(o.b)("inlineCode",{parentName:"p"},"@app()")," (in this case)."),Object(o.b)("p",null,"Point your browser to ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"http://localhost:55555/counter"}),"http://localhost:55555/counter"),". You should see a nice big button, waiting to be clicked on:"),Object(o.b)("p",null,Object(o.b)("img",{alt:"Button",src:n(505).default})),Object(o.b)("p",null,"If you click on the button, you'll notice that it doesn't do anything. This is because we haven't handled button clicks yet. Instead, when you click the button, the events are sent to your ",Object(o.b)("inlineCode",{parentName:"p"},"serve()")," function, but the ",Object(o.b)("inlineCode",{parentName:"p"},"serve()")," function blindly adds the form (with the button) to the page all over again and saves it, causing the page to display the same form all over again. Let's fix this next. "),Object(o.b)("h2",{id:"step-3-handle-button-clicks"},"Step 3: Handle button clicks"),Object(o.b)("p",null,"Add a condition to check if the button is clicked, and if so, increment the bean count."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:'{5-7} title="$HOME/wave-apps/counter.py"',"{5-7}":!0,title:'"$HOME/wave-apps/counter.py"'}),"from h2o_wave import Q, main, app, ui\n\n@app('/counter')\nasync def serve(q: Q):\n    bean_count = q.client.bean_count or 0\n    if q.args.increment:\n        q.client.bean_count = bean_count = bean_count + 1\n\n    q.page['beans'] = ui.form_card(\n        box='1 1 1 2',\n        items=[\n            ui.button(\n                name='increment',\n                label='Click me!',\n                caption=f'{bean_count} beans',\n                primary=True,\n            ),\n        ],\n    )\n    await q.page.save()\n")),Object(o.b)("p",null,"The above edit introduces two important concepts: ",Object(o.b)("inlineCode",{parentName:"p"},"q.client")," and ",Object(o.b)("inlineCode",{parentName:"p"},"q.args"),". "),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"q.client")," is a dictionary-like object for storing and retrieving arbitrary information related to the active ",Object(o.b)("em",{parentName:"li"},"client")," (a browser tab or browser session). Anything you put into ",Object(o.b)("inlineCode",{parentName:"li"},"q.client")," while handling a event can be read back while handling a subsequent event, provided the subsequent event originates from the same client. In our case, we read ",Object(o.b)("inlineCode",{parentName:"li"},"q.client.bean_count")," to get the bean count. If it's unavailable (which means this is a new client), we default the bean count to ",Object(o.b)("inlineCode",{parentName:"li"},"0"),"."),Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"q.args"),", also a dictionary-like object, carries ",Object(o.b)("em",{parentName:"li"},"event arguments"),", which contains information about what the user did. In our case, if the user clicked on our button (named ",Object(o.b)("inlineCode",{parentName:"li"},"increment"),"), ",Object(o.b)("inlineCode",{parentName:"li"},"q.args.increment")," will be ",Object(o.b)("inlineCode",{parentName:"li"},"True"),". If not, ",Object(o.b)("inlineCode",{parentName:"li"},"q.args.increment")," will be ",Object(o.b)("inlineCode",{parentName:"li"},"None"),". Therefore, if ",Object(o.b)("inlineCode",{parentName:"li"},"q.args.increment")," is ",Object(o.b)("inlineCode",{parentName:"li"},"True"),", we increment the client's ",Object(o.b)("inlineCode",{parentName:"li"},"bean_count"),". If not, we do nothing.")),Object(o.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(o.b)("path",Object(a.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(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"From now on, any time you see the term 'client', recall that it's a technical term for 'browser tab' or 'browser session'. In other words, any time you open a new browser tab to access your app, you're accessing your app from a new client."))),Object(o.b)("div",{className:"admonition admonition-info alert alert--info"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(o.b)("path",Object(a.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(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"Each component in the Wave component library populates ",Object(o.b)("inlineCode",{parentName:"p"},"q.args")," with its own value. For more information, see ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/components"}),"Components"),"."))),Object(o.b)("p",null,"Your button should now count beans when clicked:"),Object(o.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(o.b)("source",{src:n(483).default,type:"video/mp4"})),Object(o.b)("h2",{id:"step-4-make-it-more-efficient"},"Step 4: Make it more efficient"),Object(o.b)("p",null,"Our program is accurate, but not necessarily efficient. On every button-click, it is recreating the form card and the button over and over again instead of updating the existing button's caption with the current bean count. You can observe how chatty the app is by gaping in abject horror at the Wave server's log."),Object(o.b)("div",{className:"admonition admonition-info alert alert--info"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(o.b)("path",Object(a.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(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"To view the Wave server's log, switch to the terminal window running the Wave server."))),Object(o.b)("p",null,"Let's wrinkle our noses in disgust and fix this gross inefficiency right away to make our little bean counter web-scale for great good."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:'{9-10,22-23} title="$HOME/wave-apps/counter.py"',"{9-10,22-23}":!0,title:'"$HOME/wave-apps/counter.py"'}),"from h2o_wave import Q, main, app, ui\n\n@app('/counter')\nasync def serve(q: Q):\n    bean_count = q.client.bean_count or 0\n    if q.args.increment:\n        q.client.bean_count = bean_count = bean_count + 1\n\n    if not q.client.initialized:\n        q.client.initialized = True\n        q.page['beans'] = ui.form_card(\n            box='1 1 1 2',\n            items=[\n                ui.button(\n                    name='increment',\n                    label='Click me!',\n                    caption=f'{bean_count} beans',\n                    primary=True,\n                ),\n            ],\n        )\n    else:\n        q.page['beans'].items[0].button.caption = f'{bean_count} beans'\n    await q.page.save()\n")),Object(o.b)("p",null,"In the above edit, we check for an arbitrary flag in ",Object(o.b)("inlineCode",{parentName:"p"},"q.client")," called ",Object(o.b)("inlineCode",{parentName:"p"},"initialized"),". "),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},"If the flag is not set, we assume that the request is originating from new, empty client. If so, we set ",Object(o.b)("inlineCode",{parentName:"li"},"initialized")," to ",Object(o.b)("inlineCode",{parentName:"li"},"True")," (to make a note to ourselves that the client is not empty anymore), then add our form card to the page."),Object(o.b)("li",{parentName:"ul"},"If the flag is already set, we assume that the form card (and the button inside it) are already on the page, and simply update the button's caption with the new bean count.")),Object(o.b)("h2",{id:"intermission-understanding-state"},"Intermission: Understanding state"),Object(o.b)("p",null,"In the above steps, we learned about ",Object(o.b)("inlineCode",{parentName:"p"},"q.args")," (request arguments submitted from the browser) and ",Object(o.b)("inlineCode",{parentName:"p"},"q.client")," (arbitrary information associated with the client). Let's expand on these and introduce two new concepts: ",Object(o.b)("inlineCode",{parentName:"p"},"q.user")," and ",Object(o.b)("inlineCode",{parentName:"p"},"q.app"),". "),Object(o.b)("p",null,"Before we do that, try accessing ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"http://localhost:55555/counter"}),"http://localhost:55555/counter")," from two different browser tabs and playing with them. You'll notice that each browser tab (or, each client) maintains separate bean counts."),Object(o.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(o.b)("source",{src:n(506).default,type:"video/mp4"})),Object(o.b)("p",null,"Maintaining separate bean counts per client is one way to count beans. You can also maintain bean counts at the user level and the app level. "),Object(o.b)("p",null,"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)."),Object(o.b)("p",null,"Similar to how ",Object(o.b)("inlineCode",{parentName:"p"},"q.client")," stores arbitrary information associated with the client, ",Object(o.b)("inlineCode",{parentName:"p"},"q.user")," and ",Object(o.b)("inlineCode",{parentName:"p"},"q.app")," store arbitrary information associated with the user and the app, respectively."),Object(o.b)("p",null,"In most apps, you'll end up using a mix of ",Object(o.b)("inlineCode",{parentName:"p"},"q.client"),", ",Object(o.b)("inlineCode",{parentName:"p"},"q.user")," and ",Object(o.b)("inlineCode",{parentName:"p"},"q.app")," to correctly handle requests originating from:"),Object(o.b)("ol",null,Object(o.b)("li",{parentName:"ol"},"Different users."),Object(o.b)("li",{parentName:"ol"},"Different browser tabs belonging to the same user (possibly from different devices)."),Object(o.b)("li",{parentName:"ol"},"The same browser tab.")),Object(o.b)("p",null,"In other words, your Wave app is multi-user by default, but how the app manages data at the app-level, at the user-level and at the client-level is up to you."),Object(o.b)("h2",{id:"step-5-user-level-realtime-sync"},"Step 5: User-level realtime sync"),Object(o.b)("p",null,"To maintain bean counts at the user level, all we have to do store ",Object(o.b)("inlineCode",{parentName:"p"},"bean_count")," in ",Object(o.b)("inlineCode",{parentName:"p"},"q.user")," instead of ",Object(o.b)("inlineCode",{parentName:"p"},"q.client"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:'{5,7} title="$HOME/wave-apps/counter.py"',"{5,7}":!0,title:'"$HOME/wave-apps/counter.py"'}),"from h2o_wave import Q, main, app, ui\n\n@app('/counter')\nasync def serve(q: Q):\n    bean_count = q.user.bean_count or 0\n    if q.args.increment:\n        q.user.bean_count = bean_count = bean_count + 1\n\n    if not q.client.initialized:\n        q.client.initialized = True\n        q.page['beans'] = ui.form_card(\n            box='1 1 1 2',\n            items=[\n                ui.button(\n                    name='increment',\n                    label='Click me!',\n                    caption=f'{bean_count} beans',\n                    primary=True,\n                ),\n            ],\n        )\n    else:\n        q.page['beans'].items[0].button.caption = f'{bean_count} beans'\n    await q.page.save()\n")),Object(o.b)("p",null,"Now when you play with your app, you'll see that the counts are being maintained across browser tabs, but the updated counts don't show up immediately across all tabs. Instead, they show up only when you interact with the other tabs, or reload them. "),Object(o.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(o.b)("source",{src:n(507).default,type:"video/mp4"})),Object(o.b)("p",null,"This would be considered normal behavior for a typical web application, and most users familiar with the interwebs are also familiar with the reload button, but we can do better, because having to hit the reload button to get updates is about as exciting as waiting for paint to dry."),Object(o.b)("p",null,"This is easier done than said - simply change the server mode to ",Object(o.b)("inlineCode",{parentName:"p"},"multicast")," to enable realtime sync across clients:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:'{27} title="$HOME/wave-apps/counter.py"',"{27}":!0,title:'"$HOME/wave-apps/counter.py"'}),"from h2o_wave import Q, main, app, ui\n\n@app('/counter')\nasync def serve(q: Q):\n    bean_count = q.user.bean_count or 0\n    if q.args.increment:\n        q.user.bean_count = bean_count = bean_count + 1\n\n    if not q.client.initialized:\n        q.client.initialized = True\n        q.page['beans'] = ui.form_card(\n            box='1 1 1 2',\n            items=[\n                ui.button(\n                    name='increment',\n                    label='Click me!',\n                    caption=f'{bean_count} beans',\n                    primary=True,\n                ),\n            ],\n        )\n    else:\n        q.page['beans'].items[0].button.caption = f'{bean_count} beans'\n    await q.page.save()\n")),Object(o.b)("div",{className:"admonition admonition-info alert alert--info"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(o.b)("path",Object(a.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(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"The default server mode for apps is ",Object(o.b)("inlineCode",{parentName:"p"},"unicast"),', which means "don\'t sync across clients". On the other hand, ',Object(o.b)("inlineCode",{parentName:"p"},"multicast"),' means "sync across clients". There\'s also a third mode, ',Object(o.b)("inlineCode",{parentName:"p"},"broadcast"),', which means "sync across users", which we\'ll see in the next step.'))),Object(o.b)("p",null,"If you play with your app now, you'll see that the user-level bean count indeed syncs across tabs:"),Object(o.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(o.b)("source",{src:n(508).default,type:"video/mp4"})),Object(o.b)("h2",{id:"step-6-app-level-realtime-sync"},"Step 6: App-level realtime sync"),Object(o.b)("p",null,"Going from user-level bean counting to app-level bean counting is easy: simply store ",Object(o.b)("inlineCode",{parentName:"p"},"bean_count")," on ",Object(o.b)("inlineCode",{parentName:"p"},"q.app")," instead of ",Object(o.b)("inlineCode",{parentName:"p"},"q.user"),", and switch the server mode to ",Object(o.b)("inlineCode",{parentName:"p"},"broadcast"),":"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:'{5,7,27} title="$HOME/wave-apps/counter.py"',"{5,7,27}":!0,title:'"$HOME/wave-apps/counter.py"'}),"from h2o_wave import Q, main, app, ui\n\n@app('/counter')\nasync def serve(q: Q):\n    bean_count = q.app.bean_count or 0\n    if q.args.increment:\n        q.app.bean_count = bean_count = bean_count + 1\n\n    if not q.client.initialized:\n        q.client.initialized = True\n        q.page['beans'] = ui.form_card(\n            box='1 1 1 2',\n            items=[\n                ui.button(\n                    name='increment',\n                    label='Click me!',\n                    caption=f'{bean_count} beans',\n                    primary=True,\n                ),\n            ],\n        )\n    else:\n        q.page['beans'].items[0].button.caption = f'{bean_count} beans'\n    await q.page.save()\n")),Object(o.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(o.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"The ",Object(o.b)("inlineCode",{parentName:"p"},"broadcast")," mode can be used to build collaborative apps that need to synchronize state across all users, like group chat or multiplayer games."))),Object(o.b)("h2",{id:"summary"},"Summary"),Object(o.b)("p",null,"In this tutorial, we learned how to author interactive applications, or ",Object(o.b)("em",{parentName:"p"},"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:"),Object(o.b)("table",null,Object(o.b)("thead",{parentName:"table"},Object(o.b)("tr",{parentName:"thead"},Object(o.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Attribute"),Object(o.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Type"),Object(o.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Use"))),Object(o.b)("tbody",{parentName:"table"},Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"q.args")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Read-only"),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Stores command arguments")),Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"q.client")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Read/Write"),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Stores client-level state")),Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"q.user")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Read/Write"),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Stores user-level state")),Object(o.b)("tr",{parentName:"tbody"},Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(o.b)("inlineCode",{parentName:"td"},"q.app")),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Read/Write"),Object(o.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Stores app-level state")))),Object(o.b)("p",null,"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)."),Object(o.b)("p",null,"In the next section, we'll build something a bit more substantial and useful: a to-do list with realtime sync."))}s.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return m}));var a=n(0),i=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 r(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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function b(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n,a,i={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=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<o;l++)r[l]=n[l];return i.a.createElement.apply(null,r)}return i.a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},483:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/medias/tutorial-counter__demo-f3f19f437fc40cbcb7211837b2ce7e39.mp4"},505:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"},506:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/medias/tutorial-counter__client-879d907addd9c36d405015546d0c0fdd.mp4"},507:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/medias/tutorial-counter__user-nosync-85ed939bea17453866c14ee5359992ef.mp4"},508:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/medias/tutorial-counter__user-sync-cc763711bfc051a85c3df8a8508135c7.mp4"}}]);
\ No newline at end of file
diff --git a/docs/9747bb1a.8454f12b.js b/docs/9747bb1a.5bab2aa6.js
similarity index 97%
rename from docs/9747bb1a.8454f12b.js
rename to docs/9747bb1a.5bab2aa6.js
index ce88dbe192..b46d1b2cac 100644
--- a/docs/9747bb1a.8454f12b.js
+++ b/docs/9747bb1a.5bab2aa6.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[138],{192: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 c})),n.d(t,"default",(function(){return o}));var r=n(2),a=n(6),p=(n(0),n(290)),i={title:"Stat / Series / Tall / Area"},l={unversionedId:"examples/stat-tall-series-area",id:"examples/stat-tall-series-area",isDocsHomePage:!1,title:"Stat / Series / Tall / Area",description:"Create a tall stat card displaying a primary value, an auxiliary value and a series plot.",source:"@site/docs/examples/stat-tall-series-area.md",slug:"/examples/stat-tall-series-area",permalink:"/wave/docs/examples/stat-tall-series-area",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-tall-series-area.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Series / Wide / Interval",permalink:"/wave/docs/examples/stat-wide-series-interval"},next:{title:"Stat / Series / Tall / Interval",permalink:"/wave/docs/examples/stat-tall-series-interval"}},c=[],u={rightToc:c};function o(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(p.b)("wrapper",Object(r.a)({},u,i,{components:t,mdxType:"MDXLayout"}),Object(p.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a series plot."),Object(p.b)("div",{className:"cover",style:{backgroundImage:"url("+n(394).default+")"}}),Object(p.b)("pre",null,Object(p.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import time\n\nfrom faker import Faker\n\nfrom synth import FakeCategoricalSeries\nfrom h2o_wave import site, ui, data\n\npage = site['/demo']\n\ncolors = '$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine'.split()\ncurves = 'linear smooth step step-after step-before'.split()\nfake = Faker()\ncards = []\nfor i in range(len(curves)):\n    f = FakeCategoricalSeries()\n    cat, val, pc = f.next()\n    c = page.add(f'example{i}', ui.tall_series_stat_card(\n        box=f'{i + 1} 1 1 2',\n        title=fake.cryptocurrency_name(),\n        value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n        aux_value='={{intl quux style=\"percent\" minimum_fraction_digits=1 maximum_fraction_digits=1}}',\n        data=dict(qux=val, quux=pc / 100),\n        plot_type='area',\n        plot_category='foo',\n        plot_value='qux',\n        plot_color=colors[i],\n        plot_data=data('foo qux', -15),\n        plot_zero_value=0,\n        plot_curve=curves[i],\n    ))\n    cards.append((f, c))\npage.save()\n\nwhile True:\n    time.sleep(1)\n    for f, c in cards:\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    page.save()\n")))}o.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return m}));var r=n(0),a=n.n(r);function p(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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){p(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},p=Object.keys(e);for(r=0;r<p.length;r++)n=p[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(r=0;r<p.length;r++)n=p[r],t.indexOf(n)>=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<p;u++)i[u]=n[u];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},394:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[139],{193: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 c})),n.d(t,"default",(function(){return o}));var r=n(2),a=n(6),p=(n(0),n(292)),i={title:"Stat / Series / Tall / Area"},l={unversionedId:"examples/stat-tall-series-area",id:"examples/stat-tall-series-area",isDocsHomePage:!1,title:"Stat / Series / Tall / Area",description:"Create a tall stat card displaying a primary value, an auxiliary value and a series plot.",source:"@site/docs/examples/stat-tall-series-area.md",slug:"/examples/stat-tall-series-area",permalink:"/wave/docs/examples/stat-tall-series-area",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-tall-series-area.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Series / Wide / Interval",permalink:"/wave/docs/examples/stat-wide-series-interval"},next:{title:"Stat / Series / Tall / Interval",permalink:"/wave/docs/examples/stat-tall-series-interval"}},c=[],u={rightToc:c};function o(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(p.b)("wrapper",Object(r.a)({},u,i,{components:t,mdxType:"MDXLayout"}),Object(p.b)("p",null,"Create a tall stat card displaying a primary value, an auxiliary value and a series plot."),Object(p.b)("div",{className:"cover",style:{backgroundImage:"url("+n(399).default+")"}}),Object(p.b)("pre",null,Object(p.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import time\n\nfrom faker import Faker\n\nfrom synth import FakeCategoricalSeries\nfrom h2o_wave import site, ui, data\n\npage = site['/demo']\n\ncolors = '$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine'.split()\ncurves = 'linear smooth step step-after step-before'.split()\nfake = Faker()\ncards = []\nfor i in range(len(curves)):\n    f = FakeCategoricalSeries()\n    cat, val, pc = f.next()\n    c = page.add(f'example{i}', ui.tall_series_stat_card(\n        box=f'{i + 1} 1 1 2',\n        title=fake.cryptocurrency_name(),\n        value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n        aux_value='={{intl quux style=\"percent\" minimum_fraction_digits=1 maximum_fraction_digits=1}}',\n        data=dict(qux=val, quux=pc / 100),\n        plot_type='area',\n        plot_category='foo',\n        plot_value='qux',\n        plot_color=colors[i],\n        plot_data=data('foo qux', -15),\n        plot_zero_value=0,\n        plot_curve=curves[i],\n    ))\n    cards.append((f, c))\npage.save()\n\nwhile True:\n    time.sleep(1)\n    for f, c in cards:\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    page.save()\n")))}o.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return m}));var r=n(0),a=n.n(r);function p(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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){p(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},p=Object.keys(e);for(r=0;r<p.length;r++)n=p[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(e);for(r=0;r<p.length;r++)n=p[r],t.indexOf(n)>=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<p;u++)i[u]=n[u];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},399:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/97d9aba4.2453d1b1.js b/docs/97d9aba4.04f448bb.js
similarity index 92%
rename from docs/97d9aba4.2453d1b1.js
rename to docs/97d9aba4.04f448bb.js
index a8947e8e92..ba7b3e4a26 100644
--- a/docs/97d9aba4.2453d1b1.js
+++ b/docs/97d9aba4.04f448bb.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[139],{193: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 p})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(290)),c={title:"Plot / Area / Stacked"},i={unversionedId:"examples/plot-area-stacked",id:"examples/plot-area-stacked",isDocsHomePage:!1,title:"Plot / Area / Stacked",description:"Make a stacked area plot.",source:"@site/docs/examples/plot-area-stacked.md",slug:"/examples/plot-area-stacked",permalink:"/wave/docs/examples/plot-area-stacked",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-stacked.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Area / Smooth",permalink:"/wave/docs/examples/plot-area-smooth"},next:{title:"Plot / Area + Line",permalink:"/wave/docs/examples/plot-area-line"}},p=[],l={rightToc:p};function s(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a stacked area plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(395).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeMultiTimeSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 50\nf = FakeMultiTimeSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Area, stacked',\n    data=data('product date price', n * 5),\n    plot=ui.plot(\n        [ui.mark(type='area', x_scale='time', x='=date', y='=price', color='=product', 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},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return f}));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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;l++)c[l]=r[l];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},395:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-area-stacked-5624332d0398dd3417cb40e6fd83272c.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[140],{194: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 p})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(292)),c={title:"Plot / Area / Stacked"},i={unversionedId:"examples/plot-area-stacked",id:"examples/plot-area-stacked",isDocsHomePage:!1,title:"Plot / Area / Stacked",description:"Make a stacked area plot.",source:"@site/docs/examples/plot-area-stacked.md",slug:"/examples/plot-area-stacked",permalink:"/wave/docs/examples/plot-area-stacked",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-stacked.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Area / Smooth",permalink:"/wave/docs/examples/plot-area-smooth"},next:{title:"Plot / Area + Line",permalink:"/wave/docs/examples/plot-area-line"}},p=[],l={rightToc:p};function s(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a stacked area plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(400).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeMultiTimeSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 50\nf = FakeMultiTimeSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Area, stacked',\n    data=data('product date price', n * 5),\n    plot=ui.plot(\n        [ui.mark(type='area', x_scale='time', x='=date', y='=price', color='=product', 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},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return f}));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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;l++)c[l]=r[l];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},400:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-area-stacked-5624332d0398dd3417cb40e6fd83272c.png"}}]);
\ No newline at end of file
diff --git a/docs/97e78655.63616476.js b/docs/97e78655.60b6caf9.js
similarity index 92%
rename from docs/97e78655.63616476.js
rename to docs/97e78655.60b6caf9.js
index 7a0190c33b..e944215584 100644
--- a/docs/97e78655.63616476.js
+++ b/docs/97e78655.60b6caf9.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[140],{194:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return p})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return l})),r.d(t,"default",(function(){return c}));var n=r(2),a=r(6),o=(r(0),r(290)),p={title:"Plot / Interval / Groups / Transpose"},i={unversionedId:"examples/plot-interval-groups-transpose",id:"examples/plot-interval-groups-transpose",isDocsHomePage:!1,title:"Plot / Interval / Groups / Transpose",description:"Make a grouped bar plot.",source:"@site/docs/examples/plot-interval-groups-transpose.md",slug:"/examples/plot-interval-groups-transpose",permalink:"/wave/docs/examples/plot-interval-groups-transpose",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-groups-transpose.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Groups",permalink:"/wave/docs/examples/plot-interval-groups"},next:{title:"Plot / Interval / Labels",permalink:"/wave/docs/examples/plot-interval-labels"}},l=[],s={rightToc:l};function c(e){var t=e.components,p=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},s,p,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a grouped bar plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(396).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 = 3\nf = FakeMultiCategoricalSeries(groups=k)\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Intervals, groups',\n    data=data('country product price', n * k),\n    plot=ui.plot([ui.mark(type='interval', x='=price', y='=product', color='=country', dodge='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")))}c.isMDXComponent=!0},290: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 p(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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;s++)p[s]=r[s];return a.a.createElement.apply(null,p)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},396:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-interval-groups-transpose-7a36b34fbae40cd7d645e149db067bf2.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[141],{195:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return p})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return l})),r.d(t,"default",(function(){return c}));var n=r(2),a=r(6),o=(r(0),r(292)),p={title:"Plot / Interval / Groups / Transpose"},i={unversionedId:"examples/plot-interval-groups-transpose",id:"examples/plot-interval-groups-transpose",isDocsHomePage:!1,title:"Plot / Interval / Groups / Transpose",description:"Make a grouped bar plot.",source:"@site/docs/examples/plot-interval-groups-transpose.md",slug:"/examples/plot-interval-groups-transpose",permalink:"/wave/docs/examples/plot-interval-groups-transpose",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-groups-transpose.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Groups",permalink:"/wave/docs/examples/plot-interval-groups"},next:{title:"Plot / Interval / Labels",permalink:"/wave/docs/examples/plot-interval-labels"}},l=[],s={rightToc:l};function c(e){var t=e.components,p=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},s,p,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a grouped bar plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(401).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 = 3\nf = FakeMultiCategoricalSeries(groups=k)\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Intervals, groups',\n    data=data('country product price', n * k),\n    plot=ui.plot([ui.mark(type='interval', x='=price', y='=product', color='=country', dodge='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")))}c.isMDXComponent=!0},292: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 p(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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;s++)p[s]=r[s];return a.a.createElement.apply(null,p)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},401:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-interval-groups-transpose-7a36b34fbae40cd7d645e149db067bf2.png"}}]);
\ No newline at end of file
diff --git a/docs/996e93c8.836b1f20.js b/docs/996e93c8.836b1f20.js
new file mode 100644
index 0000000000..b38d1130a9
--- /dev/null
+++ b/docs/996e93c8.836b1f20.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[142],{196:function(e,t,o){"use strict";o.r(t),o.d(t,"frontMatter",(function(){return s})),o.d(t,"metadata",(function(){return d})),o.d(t,"rightToc",(function(){return r})),o.d(t,"default",(function(){return c}));var n=o(2),a=o(6),i=(o(0),o(292)),s={title:"Tutorial: Todo List"},d={unversionedId:"tutorial-todo",id:"tutorial-todo",isDocsHomePage:!1,title:"Tutorial: Todo List",description:"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.",source:"@site/docs/tutorial-todo.md",slug:"/tutorial-todo",permalink:"/wave/docs/tutorial-todo",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/tutorial-todo.md",version:"current",sidebar:"someSidebar",previous:{title:"Tutorial: Bean Counter",permalink:"/wave/docs/tutorial-counter"},next:{title:"Introduction",permalink:"/wave/docs/guide"}},r=[{value:"Step 1: Listen",id:"step-1-listen",children:[]},{value:"Step 2: What&#39;s in a to-do?",id:"step-2-whats-in-a-to-do",children:[]},{value:"Step 3: Make a to-do list",id:"step-3-make-a-to-do-list",children:[]},{value:"Step 4: Show the to-do list",id:"step-4-show-the-to-do-list",children:[]},{value:"Step 5: Show the &#39;done&#39; list",id:"step-5-show-the-done-list",children:[]},{value:"Step 6: Handle checkboxes",id:"step-6-handle-checkboxes",children:[]},{value:"Step 7: The &#39;new todo&#39; form",id:"step-7-the-new-todo-form",children:[]},{value:"Step 8: Add to-do and return",id:"step-8-add-to-do-and-return",children:[]},{value:"Step 9: Make it realtime",id:"step-9-make-it-realtime",children:[]},{value:"Exercise",id:"exercise",children:[]},{value:"Next steps",id:"next-steps",children:[]}],l={rightToc:r};function c(e){var t=e.components,s=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},l,s,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"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."),Object(i.b)("p",null,"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 ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/tutorial-counter"}),"previous tutorial"),". From this point on, it's mostly a matter of ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://htdp.org/2020-8-1/Book/part_three.html"}),"abstraction"),", which is a fancy term for how you solve the problem at hand using short, simple, clear, elegant, modular functions that ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Unix_philosophy"}),"do one thing and do it well"),". "),Object(i.b)("p",null,"Above all, prefer brevity and clarity. ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://blog.codinghorror.com/the-best-code-is-no-code-at-all/"}),"The best code is no code at all"),"."),Object(i.b)("h2",{id:"step-1-listen"},"Step 1: Listen"),Object(i.b)("p",null,"We'll start with a basic skeleton, and then work our way up from there. "),Object(i.b)("p",null,"The first step is to define an ",Object(i.b)("inlineCode",{parentName:"p"},"@app")," function. Also, we want the landing page to show a list of to-dos, so we'll throw in an empty ",Object(i.b)("inlineCode",{parentName:"p"},"show_todos()")," function for now, and call it from ",Object(i.b)("inlineCode",{parentName:"p"},"serve()"),"."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'{6,10-11} title="$HOME/wave-apps/todo.py"',"{6,10-11}":!0,title:'"$HOME/wave-apps/todo.py"'}),"from h2o_wave import Q, main, app, ui\n\n\n@app('/todo')\nasync def serve(q: Q):\n    show_todos(q)\n    await q.page.save()\n\n\ndef show_todos(q: Q):\n    pass\n")),Object(i.b)("h2",{id:"step-2-whats-in-a-to-do"},"Step 2: What's in a to-do?"),Object(i.b)("p",null,"A to-do item has some basic attributes: an ID, some text content, and whether it's completed or not. Let's define a ",Object(i.b)("inlineCode",{parentName:"p"},"class")," for that, with a global one-up ",Object(i.b)("inlineCode",{parentName:"p"},"id"),"."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'{3-13} title="$HOME/wave-apps/todo.py"',"{3-13}":!0,title:'"$HOME/wave-apps/todo.py"'}),"from h2o_wave import Q, main, app, ui\n\n_id = 0\n\n\n# A simple class that represents a to-do item.\nclass TodoItem:\n    def __init__(self, text):\n        global _id\n        _id += 1\n        self.id = f'todo_{_id}'\n        self.text = text\n        self.done = False\n\n\n@app('/todo')\nasync def serve(q: Q):\n    show_todos(q)\n    await q.page.save()\n\n\ndef show_todos(q: Q):\n    pass\n")),Object(i.b)("h2",{id:"step-3-make-a-to-do-list"},"Step 3: Make a to-do list"),Object(i.b)("p",null,"Since we want each user to have a separate to-do list, it's appropriate to keep the to-do list in ",Object(i.b)("inlineCode",{parentName:"p"},"q.user"),"."),Object(i.b)("p",null,"Here, we attempt to fetch the list from ",Object(i.b)("inlineCode",{parentName:"p"},"q.user"),", and create one if it doesn't exist. We also throw in some sample to-do items for good measure."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'{1,23-28} title="$HOME/wave-apps/todo.py"',"{1,23-28}":!0,title:'"$HOME/wave-apps/todo.py"'}),"from typing import List\nfrom h2o_wave import Q, main, app, ui\n\n_id = 0\n\n# A simple class that represents a to-do item.\nclass TodoItem:\n    def __init__(self, text):\n        global _id\n        _id += 1\n        self.id = f'todo_{_id}'\n        self.text = text\n        self.done = False\n\n\n@app('/todo')\nasync def serve(q: Q):\n    show_todos(q)\n    await q.page.save()\n\n\ndef show_todos(q: Q):\n    # Get items for this user.\n    todos: List[TodoItem] = q.user.todos\n\n    # Create a sample list if we don't have any.\n    if todos is None:\n        q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]\n")),Object(i.b)("h2",{id:"step-4-show-the-to-do-list"},"Step 4: Show the to-do list"),Object(i.b)("p",null,"Next, we turn each incomplete to-do item into a checkbox (using ",Object(i.b)("inlineCode",{parentName:"p"},"ui.checkbox()"),"), and display it in a form card (using ",Object(i.b)("inlineCode",{parentName:"p"},"ui.form_card()"),").\nAlso, we want each checkbox to raise an event immediately when checked, so we set its ",Object(i.b)("inlineCode",{parentName:"p"},"trigger")," attribute to ",Object(i.b)("inlineCode",{parentName:"p"},"True"),"."),Object(i.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(i.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(i.b)("h5",{parentName:"div"},Object(i.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(i.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(i.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(i.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(i.b)("p",{parentName:"div"},"Several ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/components"}),"components")," have a ",Object(i.b)("inlineCode",{parentName:"p"},"trigger")," attribute. Normally, an event is triggered only when a command-like component (a button, menu, or tab) is clicked. If you want a component to immediately trigger an event when changed, set ",Object(i.b)("inlineCode",{parentName:"p"},"trigger")," to ",Object(i.b)("inlineCode",{parentName:"p"},"True"),"."))),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'{1,30-37} title="$HOME/wave-apps/todo.py"',"{1,30-37}":!0,title:'"$HOME/wave-apps/todo.py"'}),"from typing import List\nfrom h2o_wave import Q, main, app, ui\n\n_id = 0\n\n# A simple class that represents a to-do item.\nclass TodoItem:\n    def __init__(self, text):\n        global _id\n        _id += 1\n        self.id = f'todo_{_id}'\n        self.text = text\n        self.done = False\n\n\n@app('/todo')\nasync def serve(q: Q):\n    show_todos(q)\n    await q.page.save()\n\n\ndef show_todos(q: Q):\n    # Get items for this user.\n    todos: List[TodoItem] = q.user.todos\n\n    # Create a sample list if we don't have any.\n    if todos is None:\n        q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]\n\n    # Create checkboxes.\n    not_done = [ui.checkbox(name=todo.id, label=todo.text, trigger=True) for todo in todos if not todo.done]\n\n    # Display list\n    q.page['form'] = ui.form_card(box='1 1 3 10', items=[\n        ui.text_l('To Do'),\n        *not_done,\n    ])\n")),Object(i.b)("h2",{id:"step-5-show-the-done-list"},"Step 5: Show the 'done' list"),Object(i.b)("p",null,"We also turn each completed to-do item into another list of checkboxes, checked by default (using its ",Object(i.b)("inlineCode",{parentName:"p"},"value")," attribute). We append this to the form card, and put a separator in between (using ",Object(i.b)("inlineCode",{parentName:"p"},"ui.separator()"),") to distinguish the completed items from the incomplete ones."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'{31,38-39} title="$HOME/wave-apps/todo.py"',"{31,38-39}":!0,title:'"$HOME/wave-apps/todo.py"'}),"from typing import List\nfrom h2o_wave import Q, main, app, ui\n\n_id = 0\n\n# A simple class that represents a to-do item.\nclass TodoItem:\n    def __init__(self, text):\n        global _id\n        _id += 1\n        self.id = f'todo_{_id}'\n        self.text = text\n        self.done = False\n\n\n@app('/todo')\nasync def serve(q: Q):\n    show_todos(q)\n    await q.page.save()\n\n\ndef show_todos(q: Q):\n    # Get items for this user.\n    todos: List[TodoItem] = q.user.todos\n\n    # Create a sample list if we don't have any.\n    if todos is None:\n        q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]\n\n    # Create done/not-done checkboxes.\n    done = [ui.checkbox(name=todo.id, label=todo.text, value=True, trigger=True) for todo in todos if todo.done]\n    not_done = [ui.checkbox(name=todo.id, label=todo.text, trigger=True) for todo in todos if not todo.done]\n\n    # Display list\n    q.page['form'] = ui.form_card(box='1 1 3 10', items=[\n        ui.text_l('To Do'),\n        *not_done,\n        *([ui.separator('Done')] if len(done) else []),\n        *done,\n    ])\n")),Object(i.b)("p",null,"At this point, try running your app."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave-apps\nsource venv/bin/activate\nwave run todo\n")),Object(i.b)("p",null,"Point your browser to ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"http://localhost:55555/todo"}),"http://localhost:55555/todo"),"."),Object(i.b)("p",null,Object(i.b)("img",{alt:"todo",src:o(509).default})),Object(i.b)("p",null,"You should be able to see your todo list in all its glory. Unfortunately, checking any of the items seems to have no effect. Let's fix that next."),Object(i.b)("h2",{id:"step-6-handle-checkboxes"},"Step 6: Handle checkboxes"),Object(i.b)("p",null,"Each time a checkbox is checked or unchecked, our ",Object(i.b)("inlineCode",{parentName:"p"},"serve()")," function is called, which in turn calls ",Object(i.b)("inlineCode",{parentName:"p"},"show_todos()"),". "),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"If a checkbox is checked, ",Object(i.b)("inlineCode",{parentName:"li"},"q.args")," will contain a ",Object(i.b)("inlineCode",{parentName:"li"},"True")," for that checkbox."),Object(i.b)("li",{parentName:"ul"},"If a checkbox is unchecked, ",Object(i.b)("inlineCode",{parentName:"li"},"q.args")," will contain a ",Object(i.b)("inlineCode",{parentName:"li"},"False")," for that checkbox.")),Object(i.b)("p",null,"So, we iterate through all the to-do items set their ",Object(i.b)("inlineCode",{parentName:"p"},"done")," attribute based on the value of their corresponding checkbox."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'{30-33} title="$HOME/wave-apps/todo.py"',"{30-33}":!0,title:'"$HOME/wave-apps/todo.py"'}),"from typing import List\nfrom h2o_wave import Q, main, app, ui\n\n_id = 0\n\n# A simple class that represents a to-do item.\nclass TodoItem:\n    def __init__(self, text):\n        global _id\n        _id += 1\n        self.id = f'todo_{_id}'\n        self.text = text\n        self.done = False\n\n\n@app('/todo')\nasync def serve(q: Q):\n    show_todos(q)\n    await q.page.save()\n\n\ndef show_todos(q: Q):\n    # Get items for this user.\n    todos: List[TodoItem] = q.user.todos\n\n    # Create a sample list if we don't have any.\n    if todos is None:\n        q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]\n\n    # If the user checked/unchecked an item, update our list.\n    for todo in todos:\n        if todo.id in q.args:\n            todo.done = q.args[todo.id]\n\n    # Create done/not-done checkboxes.\n    done = [ui.checkbox(name=todo.id, label=todo.text, value=True, trigger=True) for todo in todos if todo.done]\n    not_done = [ui.checkbox(name=todo.id, label=todo.text, trigger=True) for todo in todos if not todo.done]\n\n    # Display list\n    q.page['form'] = ui.form_card(box='1 1 3 10', items=[\n        ui.text_l('To Do'),\n        *not_done,\n        *([ui.separator('Done')] if len(done) else []),\n        *done,\n    ])\n")),Object(i.b)("p",null,"You should now be able to check/uncheck the items in your todo list. "),Object(i.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(i.b)("source",{src:o(510).default,type:"video/mp4"})),Object(i.b)("p",null,"Next, let's see how to add new items to the list."),Object(i.b)("h2",{id:"step-7-the-new-todo-form"},"Step 7: The 'new todo' form"),Object(i.b)("p",null,"Next, let's display a form to add new items to our list. For that, we'll add a new button to our existing form, named ",Object(i.b)("inlineCode",{parentName:"p"},"new_todo"),", and direct the ",Object(i.b)("inlineCode",{parentName:"p"},"serve()")," function to the ",Object(i.b)("inlineCode",{parentName:"p"},"new_todo()")," function if the button is clicked. Recall that when buttons are clicked, ",Object(i.b)("inlineCode",{parentName:"p"},"q.args.button_name")," will be ",Object(i.b)("inlineCode",{parentName:"p"},"True"),", so we check if ",Object(i.b)("inlineCode",{parentName:"p"},"q.args.new_todo")," is ",Object(i.b)("inlineCode",{parentName:"p"},"True"),". "),Object(i.b)("p",null,"In the ",Object(i.b)("inlineCode",{parentName:"p"},"new_todo()")," function, we display a new form containing a textbox (using ",Object(i.b)("inlineCode",{parentName:"p"},"ui.textbox()"),") and a set of buttons to add the item or return to to-do list (a ",Object(i.b)("inlineCode",{parentName:"p"},"ui.buttons()")," helps us display buttons side-by-side)."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'{18-21,45,52-61} title="$HOME/wave-apps/todo.py"',"{18-21,45,52-61}":!0,title:'"$HOME/wave-apps/todo.py"'}),"from typing import List\nfrom h2o_wave import Q, main, app, ui\n\n_id = 0\n\n# A simple class that represents a to-do item.\nclass TodoItem:\n    def __init__(self, text):\n        global _id\n        _id += 1\n        self.id = f'todo_{_id}'\n        self.text = text\n        self.done = False\n\n\n@app('/todo')\nasync def serve(q: Q):\n    if q.args.new_todo:  # Display an input form.\n        new_todo(q)\n    else:  # Show all items.\n        show_todos(q)\n    await q.page.save()\n\n\ndef show_todos(q: Q):\n    # Get items for this user.\n    todos: List[TodoItem] = q.user.todos\n\n    # Create a sample list if we don't have any.\n    if todos is None:\n        q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]\n\n    # If the user checked/unchecked an item, update our list.\n    for todo in todos:\n        if todo.id in q.args:\n            todo.done = q.args[todo.id]\n\n    # Create done/not-done checkboxes.\n    done = [ui.checkbox(name=todo.id, label=todo.text, value=True, trigger=True) for todo in todos if todo.done]\n    not_done = [ui.checkbox(name=todo.id, label=todo.text, trigger=True) for todo in todos if not todo.done]\n\n    # Display list\n    q.page['form'] = ui.form_card(box='1 1 3 10', items=[\n        ui.text_l('To Do'),\n        ui.button(name='new_todo', label='New To Do...', primary=True),\n        *not_done,\n        *([ui.separator('Done')] if len(done) else []),\n        *done,\n    ])\n\n\ndef new_todo(q: Q):\n    # Display an input form\n    q.page['form'] = ui.form_card(box='1 1 3 10', items=[\n        ui.text_l('New To Do'),\n        ui.textbox(name='text', label='What needs to be done?', multiline=True),\n        ui.buttons([\n            ui.button(name='add_todo', label='Add', primary=True),\n            ui.button(name='show_todos', label='Back'),\n        ]),\n    ])\n")),Object(i.b)("p",null,"You should now be able to bring up the new to-do form. "),Object(i.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(i.b)("source",{src:o(511).default,type:"video/mp4"})),Object(i.b)("h2",{id:"step-8-add-to-do-and-return"},"Step 8: Add to-do and return"),Object(i.b)("p",null,"Finally, we handle the ",Object(i.b)("inlineCode",{parentName:"p"},"add_todo")," button-click, redirecting ",Object(i.b)("inlineCode",{parentName:"p"},"serve()")," to a new ",Object(i.b)("inlineCode",{parentName:"p"},"add_todo()")," function, which simply inserts a the new to-do item into our user-level todo list and calls ",Object(i.b)("inlineCode",{parentName:"p"},"show_todos()")," to redraw the to-do list."),Object(i.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(i.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(i.b)("h5",{parentName:"div"},Object(i.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(i.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(i.b)("path",Object(n.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(i.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(i.b)("p",{parentName:"div"},"In this example, for clarity, we named the both the buttons and their corresponding functions ",Object(i.b)("inlineCode",{parentName:"p"},"new_todo")," and ",Object(i.b)("inlineCode",{parentName:"p"},"add_todo"),", but this is not necessary."))),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'{20-21,54-59} title="$HOME/wave-apps/todo.py"',"{20-21,54-59}":!0,title:'"$HOME/wave-apps/todo.py"'}),"from typing import List\nfrom h2o_wave import Q, main, app, ui\n\n_id = 0\n\n# A simple class that represents a to-do item.\nclass TodoItem:\n    def __init__(self, text):\n        global _id\n        _id += 1\n        self.id = f'todo_{_id}'\n        self.text = text\n        self.done = False\n\n\n@app('/todo')\nasync def serve(q: Q):\n    if q.args.new_todo:  # Display an input form.\n        new_todo(q)\n    elif q.args.add_todo:  # Add an item.\n        add_todo(q)\n    else:  # Show all items.\n        show_todos(q)\n    await q.page.save()\n\n\ndef show_todos(q: Q):\n    # Get items for this user.\n    todos: List[TodoItem] = q.user.todos\n\n    # Create a sample list if we don't have any.\n    if todos is None:\n        q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]\n\n    # If the user checked/unchecked an item, update our list.\n    for todo in todos:\n        if todo.id in q.args:\n            todo.done = q.args[todo.id]\n\n    # Create done/not-done checkboxes.\n    done = [ui.checkbox(name=todo.id, label=todo.text, value=True, trigger=True) for todo in todos if todo.done]\n    not_done = [ui.checkbox(name=todo.id, label=todo.text, trigger=True) for todo in todos if not todo.done]\n\n    # Display list\n    q.page['form'] = ui.form_card(box='1 1 3 10', items=[\n        ui.text_l('To Do'),\n        ui.button(name='new_todo', label='New To Do...', primary=True),\n        *not_done,\n        *([ui.separator('Done')] if len(done) else []),\n        *done,\n    ])\n\n\ndef add_todo(q: Q):\n    # Insert a new item\n    q.user.todos.insert(0, TodoItem(q.args.text or 'Untitled'))\n\n    # Go back to our list.\n    show_todos(q)\n\n\ndef new_todo(q: Q):\n    # Display an input form\n    q.page['form'] = ui.form_card(box='1 1 3 10', items=[\n        ui.text_l('New To Do'),\n        ui.textbox(name='text', label='What needs to be done?', multiline=True),\n        ui.buttons([\n            ui.button(name='add_todo', label='Add', primary=True),\n            ui.button(name='show_todos', label='Back'),\n        ]),\n    ])\n")),Object(i.b)("p",null,"You should now be able to add new to-do items to your list. Congratulations!"),Object(i.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(i.b)("source",{src:o(512).default,type:"video/mp4"})),Object(i.b)("h2",{id:"step-9-make-it-realtime"},"Step 9: Make it realtime"),Object(i.b)("p",null,"To make your app realtime, simply pass ",Object(i.b)("inlineCode",{parentName:"p"},"mode='multicast'")," to ",Object(i.b)("inlineCode",{parentName:"p"},"@app()"),"."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title="$HOME/wave-apps/todo.py"',title:'"$HOME/wave-apps/todo.py"'}),"@app('/todo', mode='multicast')\n")),Object(i.b)("p",null,"Now try opening ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"http://localhost:55555/todo"}),"http://localhost:55555/todo")," from multiple browser tabs:"),Object(i.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(i.b)("source",{src:o(513).default,type:"video/mp4"})),Object(i.b)("p",null,"Groovy!"),Object(i.b)("h2",{id:"exercise"},"Exercise"),Object(i.b)("p",null,'A little housekeeping goes a long way: add a "Clear" button on the main page to clear all completed to-dos.'),Object(i.b)("h2",{id:"next-steps"},"Next steps"),Object(i.b)("p",null,"Congratulations! You've completed all the tutorials (hopefully). There are three paths you can take from here:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},Object(i.b)("a",Object(n.a)({parentName:"li"},{href:"examples"}),"Gallery"),". 150+ examples that cover everything that Wave has to offer."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("a",Object(n.a)({parentName:"li"},{href:"guide"}),"Guide"),". In-depth look at each of Wave's features."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("a",Object(n.a)({parentName:"li"},{href:"api/index"}),"API"),". Reference-level documentation for the Python API.")),Object(i.b)("p",null,"Happy hacking!"))}c.isMDXComponent=!0},292:function(e,t,o){"use strict";o.d(t,"a",(function(){return p})),o.d(t,"b",(function(){return m}));var n=o(0),a=o.n(n);function i(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function s(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),o.push.apply(o,n)}return o}function d(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?s(Object(o),!0).forEach((function(t){i(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):s(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}function r(e,t){if(null==e)return{};var o,n,a=function(e,t){if(null==e)return{};var o,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)o=i[n],t.indexOf(o)>=0||(a[o]=e[o]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)o=i[n],t.indexOf(o)>=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):d(d({},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=r(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,d(d({ref:t},l),{},{components:o})):a.a.createElement(m,d({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 d={};for(var r in t)hasOwnProperty.call(t,r)&&(d[r]=t[r]);d.originalType=e,d.mdxType="string"==typeof e?e:n,s[1]=d;for(var l=2;l<i;l++)s[l]=o[l];return a.a.createElement.apply(null,s)}return a.a.createElement.apply(null,o)}u.displayName="MDXCreateElement"},509:function(e,t,o){"use strict";o.r(t),t.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAawAAADFCAYAAAAIRMaKAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUAU2F0IDAzIE9jdCAyMDIwIDAzOjQ5OjMzIFBNIFBEVP0rWOEAABgJSURBVHic7d15XJVl3sfxzzmcwBEFT6PyYIk1jkraotDiAopLiuujuGa5hz1TipZLKZY44wo2FWamaCMuaaVhpk2Ry2ja0zRhWIGAmCQCqZlKg5PI8vzhdJ5OYiPnEHbh9/16+ce5r+v6Xdd9+3rxfd3LuY+luLi43GazYbFYEBER+bWylJeXl1/rRYiIiPwn1mu9ABERkauhwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQINlcH5ufn07dP7//YLywsjGf//Jyr0wDw2msbiV20yGmbr68vjRsH0CO8BwMGRPCb3/zGrTlEROTXzeXAqufry/Qnn3R8Li8rJy4ulqCgILrdf79j+8033ezeCn9k7Lhx1K9fn/JyOHPmWz7/7DP+/OyzbNmyhRdeiMff37/K5hIRkV8XlwOrtrc3Q4cOc3wuLS0lLi6W3/++mdP2qhTeI5ymv/+907aUlBSmPPE4M2c8xapX/oLVqqucIiI1UbX9dS88d47YRYvo1bMn7du1ZfCggaxfv46ysjK36gYHBzNlylQ+++wz9u37wKktO/sw06ZOpWuXzoSGhjB27Bg++GCvW/OJiMi1US2BVVRUxOjRo9i+fRvh4eE88cQUWrZsyfPPPUfM7Gfcrt+zVy/q1KnDrl27HNvS09MZM3o0hw9nMWLESB579DFsHh48PnkyW7ZscXtOERGpXi5fEqyMFSuWk5eXx5o1a2kRGAjAoMGDCQy8jcWL4+jduw/3tW3rcn2bzUazZs3JPZbr2DZ/3lxuvPFG1q1/lTp16gAwdNgwpk+bxrOL4+jSpQs+Pj7u7ZiIiFSbajnDej85mc6duzjC6gdDhw3Dbrfz7rvvuj1H3bp1KSw8B8Dx48c5dOgQI0aMdIQVgMViYfwjj3D+/Hn27tWlQRERk/zigVVcXMyJEycIvC3wsjar1Urz5s3Jzc2tYGTlnCs8R7169QDIzT0GUOGczZo1w2azOfqIiIgZqu2hC4vFcqUGysvL3apdXFzM4awsAgICAPihnIWK57RYLODelCIiUs1+8cDy9PSkQYMGZGZkXNZWVlbG4awsGgc0dmuOt9/eyvnz5+na7dL3vxo3vlQvI/PyOY8cOcLFixcdfURExAzVcobVvXsPdu3aRXb2Yaftmzdt4ttvvyW8R7jLtT/88EOef/55goODadeuHXApsFoEBrJ+3TrOFxU59V+ZkECtWrXo2KmTy3OKiEj1q5anBCPHj2fv3j1ERkYyZPAQ/P39+SLtC97asoXw8HDa/jto/pPk95NpkJpKWVkpp0+f5kBKCgcOHCAw8DbmzpvvdNkxemY048dHMnLkCPr3H0CtWrXYtXsXf//oI6JnzdITgiIihqmWwKpbty6rE9ewbNlLbN36FmfPnqVRo0ZMnBjFQyNGXHWdlQkJwKV7UPYbbySgcQBPPTWD/+7fH09PT6e+rW6/nb+sTmT5y8tY9coqLhYX07x5c57983OEhYVV5e6JiEg1sJS7+8SDiIhINdCL90RExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQINlcHbt26lfgXnufMmTNuLcButxM1aTL9+vVzq46IiNRslvLy8nJXBnbr2oX4+CW0bNXKrQWkp6URFTWRHTt3uVVHRERqNpcvCZ45c8btsAJo2aqV22dpIiJS8+keloiIGMGowBo7dgzBQW0IDmrDPXcH06d3LxYvjuPs2bNVPtdrr21kfOTDV2w/cOAAvXqGc/LkySqfW0RELmdUYAGMGjWat7dtZ/ObScyYMZOszExGjRzhVmjl5OQQHNSG0tLSqx5z00030SM8nHr16rk8r4iIXD3jAsvHx4dGjRoREBBAh5AQlr28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LBYriWvWsvSlZWQfziY6eqZTjaSkJBY/+2c2bd7EkexsHnpwOAMHDWbnrt2EhXUmZvYzjr47d+5k4cKFTJw4kU2b36R3795MiooiMzOTjp068eqGjQB8sG8/MTFzHOOysrLIyzvOioSVLJi/gOTk99i8edMVj8sbr79Or9692LFjJ2PHjWNOTAwnTpwA4NixY0RFTaT7/d3ZtHkzDz40gri42CvWKi0tZcKExwBYs3YdS5a8SNoXXzBnTkylj2lla4mIgBtfHP41qe3tjdVq5bvCQgoLC0lKSmLN2rUEBt4GwFMzZjJwYATvvvcuEREDLxtfUFBA67ta07hxYwBeXPqS49Lahx/u55tvvmHN2nWObQsWLqRXz3C+ysmhyS23ADB02FACAgIA6NKlK4cOpdO+fft/tw0jMXE1//znP6lTpw6r//IK06ZNo3PnLpfahw4jMyOTd7Zv5/EnnsDLywsALy8vPDw8HOu8wdOTGTMvnXE1bdqUPn378umBTxkyZGiFx6Vd+/aOOQYNGkTi6r/w+eef4+fnx+ZNm2jXrh2jx4wB4KabbubIkWzWrllTYa3//fBDzhcVMXfuPG644QYAFsXG0qd3b7777jvq1q171ce0srVERKCGBFZRURFlZWX4+Pry5ZdHsNlsNG/ewtFusVi48847yczIqHD88AeGM336NA4cSOG++9rStVs3br31VuDSWU2LwECne0MNGzbE39+fzKxMR2D5NfRztNtsNmrXru34/EMAXbhwAW9vb9LT05kTE8Ozixc7+hQXF9OxY8ef3c9bmjRx+lz/t/XJzc29Yv8fwuIHvr6+/Ov8eQAOH87innvudWpv1fLK36vLyMwgNzeXbl27OG0vKyvj5MmTl4XMzx3TytYSEYEaElipqanUrVsXf39/vvnmVKXHh4SGsm37O+zdu5dPPvkHDz04nMcff4JBgwdDOViwVPmaX3ghnt81beq0rVatWj87xmKpunWUlpVhsTrX87B5XKH3JW3aBPHHP/3psu0NGjS4bNvPHtNK1hIRgRpwD6ukpISVCSsI79kTm81G0981paSkhLS0NKc+B1NTaREYWGGNo0ePUqtWLfr378/cufOYMGEir7/xOgDNWzQnI+OQ0/2vvLw8CgoKaPGjs7irZbFYaBEYyKlTp2jUqJHj36lTp7BaL/13/BAjLr4166rceuutHEpPd9qWmZF5xf7NmjXn668L8PPzc6y5jrc3p06edFzW+7GfO6aVrSUiAgYGVmFhIfn5+XyVk8OePXsYPz6Sc+fO8eijl27i+/j6MiAigtmzn+HgwYMcO3aMeXPnUlxcTHiP8AprPj0rmtjYReTl5ZGdfZjdu3dx678v9bVv34H69evz9DNPc/ToUTIyDjHjqScJC+vsuBxYWaNGjWbJknh27NhBfn4+77yznf955BGOZGcDl14IbLVa2bZtm+Mhiao2cOAg9u7dy8YNG8jPz2fv3j289daWK/bv0KED3t51eOaZpzly5AjZ2YeJjp7J0qUvVtj/545pZWuJiICBgZWYuJq+fXozZMhgnl28mDtuv4PViWvw8fFx9Jk2bTphncKYOnUKwx8YxunT37AiIYHa3t4V1ly4KJZTp04xbOgQxo0dS0M/P6KjZwGX7kctfWkZNg8PRo4cwaN/+AO33XYbc+fNc3kfevTowZSpU3l52UsMGhjB6tWriZkzh+C77wYuhW509CyWLn2R5597zuV5fk6zZs2Ii1vMm0lvEjGgP6+sWsVjEyZesb/NZmPZsmWUlZYxdsxo/ueRR/Dx8WFRbFyF/f/TMa1MLRERcONt7cFBbUg58GmVLKIqa8nVKy0tdXoKcf++fcyZE0Py+zuu4apERCpm3BmWVI2MjEP069uHXbt2curUKb744nOWvrSU0NDQa700EZEK1YinBKXyAgNvIzJyPMtfXk5u7jG869Sha9euTJ78+LVemohIhVwOLLvdTnpaWpX8gKPdbnerhrim/4AB9B8w4FovQ0TkqrgcWFGTJhMVNdHtH1+02+1ETZrsVg0REan5XH7oQkREpDrpoQsRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECP8HZI6lCVI7f4wAAAAASUVORK5CYII="},510:function(e,t,o){"use strict";o.r(t),t.default=o.p+"assets/medias/tutorial-todo__2-c21f17dee3fec1d5b531cdef2c8e06bf.mp4"},511:function(e,t,o){"use strict";o.r(t),t.default=o.p+"assets/medias/tutorial-todo__3-0d9d74e87e9051cf9c76754a3cfee393.mp4"},512:function(e,t,o){"use strict";o.r(t),t.default=o.p+"assets/medias/tutorial-todo__4-7f3700ac8c437bda55137ad74d6cf294.mp4"},513:function(e,t,o){"use strict";o.r(t),t.default=o.p+"assets/medias/tutorial-todo__5-857b867c7263dfa780f7bcea2e1b3592.mp4"}}]);
\ No newline at end of file
diff --git a/docs/996e93c8.ded0a529.js b/docs/996e93c8.ded0a529.js
deleted file mode 100644
index 084ff77a9f..0000000000
--- a/docs/996e93c8.ded0a529.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[141],{195:function(e,t,o){"use strict";o.r(t),o.d(t,"frontMatter",(function(){return s})),o.d(t,"metadata",(function(){return r})),o.d(t,"rightToc",(function(){return d})),o.d(t,"default",(function(){return c}));var n=o(2),a=o(6),i=(o(0),o(290)),s={title:"Tutorial: Todo List"},r={unversionedId:"tutorial-todo",id:"tutorial-todo",isDocsHomePage:!1,title:"Tutorial: Todo List",description:"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.",source:"@site/docs/tutorial-todo.md",slug:"/tutorial-todo",permalink:"/wave/docs/tutorial-todo",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/tutorial-todo.md",version:"current",sidebar:"someSidebar",previous:{title:"Tutorial: Bean Counter",permalink:"/wave/docs/tutorial-counter"},next:{title:"Introduction",permalink:"/wave/docs/guide"}},d=[{value:"Step 1: Listen",id:"step-1-listen",children:[]},{value:"Step 2: What&#39;s in a to-do?",id:"step-2-whats-in-a-to-do",children:[]},{value:"Step 3: Make a to-do list",id:"step-3-make-a-to-do-list",children:[]},{value:"Step 4: Show the to-do list",id:"step-4-show-the-to-do-list",children:[]},{value:"Step 5: Show the &#39;done&#39; list",id:"step-5-show-the-done-list",children:[]},{value:"Step 6: Handle checkboxes",id:"step-6-handle-checkboxes",children:[]},{value:"Step 7: The &#39;new todo&#39; form",id:"step-7-the-new-todo-form",children:[]},{value:"Step 8: Add to-do and return",id:"step-8-add-to-do-and-return",children:[]},{value:"Step 9: Make it realtime",id:"step-9-make-it-realtime",children:[]},{value:"Exercise",id:"exercise",children:[]},{value:"Next steps",id:"next-steps",children:[]}],l={rightToc:d};function c(e){var t=e.components,s=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},l,s,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"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."),Object(i.b)("p",null,"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 ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/tutorial-counter"}),"previous tutorial"),". From this point on, it's mostly a matter of ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://htdp.org/2020-8-1/Book/part_three.html"}),"abstraction"),", which is a fancy term for how you solve the problem at hand using short, simple, clear, elegant, modular functions that ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Unix_philosophy"}),"do one thing and do it well"),". "),Object(i.b)("p",null,"Above all, prefer brevity and clarity. ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://blog.codinghorror.com/the-best-code-is-no-code-at-all/"}),"The best code is no code at all"),"."),Object(i.b)("h2",{id:"step-1-listen"},"Step 1: Listen"),Object(i.b)("p",null,"We'll start with a basic skeleton, and then work our way up from there. "),Object(i.b)("p",null,"The first step is to ",Object(i.b)("inlineCode",{parentName:"p"},"listen()"),". Also, we want the landing page to show a list of to-dos, so we'll throw in an empty ",Object(i.b)("inlineCode",{parentName:"p"},"show_todos()")," function for now, and call it from ",Object(i.b)("inlineCode",{parentName:"p"},"serve()"),"."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title="$HOME/wave-apps/todo.py"',title:'"$HOME/wave-apps/todo.py"'}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    show_todos(q)\n    await q.page.save()\n\n\ndef show_todos(q: Q):\n    pass\n\n\nlisten('/todo', serve)\n")),Object(i.b)("h2",{id:"step-2-whats-in-a-to-do"},"Step 2: What's in a to-do?"),Object(i.b)("p",null,"A to-do item has some basic attributes: an ID, some text content, and whether it's completed or not. Let's define a ",Object(i.b)("inlineCode",{parentName:"p"},"class")," for that, with a global one-up ",Object(i.b)("inlineCode",{parentName:"p"},"id"),"."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'{3-13} title="$HOME/wave-apps/todo.py"',"{3-13}":!0,title:'"$HOME/wave-apps/todo.py"'}),"from h2o_wave import Q, listen, ui\n\n_id = 0\n\n\n# A simple class that represents a to-do item.\nclass TodoItem:\n    def __init__(self, text):\n        global _id\n        _id += 1\n        self.id = f'todo_{_id}'\n        self.text = text\n        self.done = False\n\n\nasync def serve(q: Q):\n    show_todos(q)\n    await q.page.save()\n\n\ndef show_todos(q: Q):\n    pass\n\n\nlisten('/todo', serve)\n")),Object(i.b)("h2",{id:"step-3-make-a-to-do-list"},"Step 3: Make a to-do list"),Object(i.b)("p",null,"Since we want each user to have a separate to-do list, it's appropriate to keep the to-do list in ",Object(i.b)("inlineCode",{parentName:"p"},"q.user"),"."),Object(i.b)("p",null,"Here, we attempt to fetch the list from ",Object(i.b)("inlineCode",{parentName:"p"},"q.user"),", and create one if it doesn't exist. We also throw in some sample to-do items for good measure."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'{1,23-28} title="$HOME/wave-apps/todo.py"',"{1,23-28}":!0,title:'"$HOME/wave-apps/todo.py"'}),"from typing import List\nfrom h2o_wave import Q, listen, ui\n\n_id = 0\n\n\n# A simple class that represents a to-do item.\nclass TodoItem:\n    def __init__(self, text):\n        global _id\n        _id += 1\n        self.id = f'todo_{_id}'\n        self.text = text\n        self.done = False\n\n\nasync def serve(q: Q):\n    show_todos(q)\n    await q.page.save()\n\n\ndef show_todos(q: Q):\n    # Get items for this user.\n    todos: List[TodoItem] = q.user.todos\n\n    # Create a sample list if we don't have any.\n    if todos is None:\n        q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]\n\nlisten('/todo', serve)\n")),Object(i.b)("h2",{id:"step-4-show-the-to-do-list"},"Step 4: Show the to-do list"),Object(i.b)("p",null,"Next, we turn each incomplete to-do item into a checkbox (using ",Object(i.b)("inlineCode",{parentName:"p"},"ui.checkbox()"),"), and display it in a form card (using ",Object(i.b)("inlineCode",{parentName:"p"},"ui.form_card()"),").\nAlso, we want each checkbox to raise an event immediately when checked, so we set its ",Object(i.b)("inlineCode",{parentName:"p"},"trigger")," attribute to ",Object(i.b)("inlineCode",{parentName:"p"},"True"),"."),Object(i.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(i.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(i.b)("h5",{parentName:"div"},Object(i.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(i.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(i.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(i.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(i.b)("p",{parentName:"div"},"Several ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/components"}),"components")," have a ",Object(i.b)("inlineCode",{parentName:"p"},"trigger")," attribute. Normally, an event is triggered only when a command-like component (a button, menu, or tab) is clicked. If you want a component to immediately trigger an event when changed, set ",Object(i.b)("inlineCode",{parentName:"p"},"trigger")," to ",Object(i.b)("inlineCode",{parentName:"p"},"True"),"."))),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'{1,30-37} title="$HOME/wave-apps/todo.py"',"{1,30-37}":!0,title:'"$HOME/wave-apps/todo.py"'}),"from typing import List\nfrom h2o_wave import Q, listen, ui\n\n_id = 0\n\n\n# A simple class that represents a to-do item.\nclass TodoItem:\n    def __init__(self, text):\n        global _id\n        _id += 1\n        self.id = f'todo_{_id}'\n        self.text = text\n        self.done = False\n\n\nasync def serve(q: Q):\n    show_todos(q)\n    await q.page.save()\n\n\ndef show_todos(q: Q):\n    # Get items for this user.\n    todos: List[TodoItem] = q.user.todos\n\n    # Create a sample list if we don't have any.\n    if todos is None:\n        q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]\n\n    # Create checkboxes.\n    not_done = [ui.checkbox(name=todo.id, label=todo.text, trigger=True) for todo in todos if not todo.done]\n\n    # Display list\n    q.page['form'] = ui.form_card(box='1 1 3 10', items=[\n        ui.text_l('To Do'),\n        *not_done,\n    ])\n\n\nlisten('/todo', serve)\n")),Object(i.b)("h2",{id:"step-5-show-the-done-list"},"Step 5: Show the 'done' list"),Object(i.b)("p",null,"We also turn each completed to-do item into another list of checkboxes, checked by default (using its ",Object(i.b)("inlineCode",{parentName:"p"},"value")," attribute). We append this to the form card, and put a separator in between (using ",Object(i.b)("inlineCode",{parentName:"p"},"ui.separator()"),") to distinguish the completed items from the incomplete ones."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'{31,38-39} title="$HOME/wave-apps/todo.py"',"{31,38-39}":!0,title:'"$HOME/wave-apps/todo.py"'}),"from typing import List\nfrom h2o_wave import Q, listen, ui\n\n_id = 0\n\n\n# A simple class that represents a to-do item.\nclass TodoItem:\n    def __init__(self, text):\n        global _id\n        _id += 1\n        self.id = f'todo_{_id}'\n        self.done = False\n        self.text = text\n\n\nasync def serve(q: Q):\n    show_todos(q)\n    await q.page.save()\n\n\ndef show_todos(q: Q):\n    # Get items for this user.\n    todos: List[TodoItem] = q.user.todos\n\n    # Create a sample list if we don't have any.\n    if todos is None:\n        q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]\n\n    # Create done/not-done checkboxes.\n    done = [ui.checkbox(name=todo.id, label=todo.text, value=True, trigger=True) for todo in todos if todo.done]\n    not_done = [ui.checkbox(name=todo.id, label=todo.text, trigger=True) for todo in todos if not todo.done]\n\n    # Display list\n    q.page['form'] = ui.form_card(box='1 1 3 10', items=[\n        ui.text_l('To Do'),\n        *not_done,\n        *([ui.separator('Done')] if len(done) else []),\n        *done,\n    ])\n\n\nlisten('/todo', serve)\n")),Object(i.b)("p",null,"At this point, try running your app."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave-apps\n./venv/bin/python todo.py\n")),Object(i.b)("p",null,"Point your browser to ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"http://localhost:55555/todo"}),"http://localhost:55555/todo"),"."),Object(i.b)("p",null,Object(i.b)("img",{alt:"todo",src:o(501).default})),Object(i.b)("p",null,"You should be able to see your todo list in all its glory. Unfortunately, checking any of the items seems to have no effect. Let's fix that next."),Object(i.b)("h2",{id:"step-6-handle-checkboxes"},"Step 6: Handle checkboxes"),Object(i.b)("p",null,"Each time a checkbox is checked or unchecked, our ",Object(i.b)("inlineCode",{parentName:"p"},"serve()")," function is called, which in turn calls ",Object(i.b)("inlineCode",{parentName:"p"},"show_todos()"),". "),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"If a checkbox is checked, ",Object(i.b)("inlineCode",{parentName:"li"},"q.args")," will contain a ",Object(i.b)("inlineCode",{parentName:"li"},"True")," for that checkbox."),Object(i.b)("li",{parentName:"ul"},"If a checkbox is unchecked, ",Object(i.b)("inlineCode",{parentName:"li"},"q.args")," will contain a ",Object(i.b)("inlineCode",{parentName:"li"},"False")," for that checkbox.")),Object(i.b)("p",null,"So, we iterate through all the to-do items set their ",Object(i.b)("inlineCode",{parentName:"p"},"done")," attribute based on the value of their corresponding checkbox."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'{30-33} title="$HOME/wave-apps/todo.py"',"{30-33}":!0,title:'"$HOME/wave-apps/todo.py"'}),"from typing import List\nfrom h2o_wave import Q, listen, ui\n\n_id = 0\n\n\n# A simple class that represents a to-do item.\nclass TodoItem:\n    def __init__(self, text):\n        global _id\n        _id += 1\n        self.id = f'todo_{_id}'\n        self.done = False\n        self.text = text\n\n\nasync def serve(q: Q):\n    show_todos(q)\n    await q.page.save()\n\n\ndef show_todos(q: Q):\n    # Get items for this user.\n    todos: List[TodoItem] = q.user.todos\n\n    # Create a sample list if we don't have any.\n    if todos is None:\n        q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]\n\n    # If the user checked/unchecked an item, update our list.\n    for todo in todos:\n        if todo.id in q.args:\n            todo.done = q.args[todo.id]\n\n    # Create done/not-done checkboxes.\n    done = [ui.checkbox(name=todo.id, label=todo.text, value=True, trigger=True) for todo in todos if todo.done]\n    not_done = [ui.checkbox(name=todo.id, label=todo.text, trigger=True) for todo in todos if not todo.done]\n\n    # Display list\n    q.page['form'] = ui.form_card(box='1 1 3 10', items=[\n        ui.text_l('To Do'),\n        *not_done,\n        *([ui.separator('Done')] if len(done) else []),\n        *done,\n    ])\n\n\nlisten('/todo', serve)\n")),Object(i.b)("p",null,"Restart your app and reload your browser. You should now be able to check/uncheck the items in your todo list. "),Object(i.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(i.b)("source",{src:o(502).default,type:"video/mp4"})),Object(i.b)("p",null,"Next, let's see how to add new items to the list."),Object(i.b)("h2",{id:"step-7-the-new-todo-form"},"Step 7: The 'new todo' form"),Object(i.b)("p",null,"Next, let's display a form to add new items to our list. For that, we'll add a new button to our existing form, named ",Object(i.b)("inlineCode",{parentName:"p"},"new_todo"),", and direct the ",Object(i.b)("inlineCode",{parentName:"p"},"serve()")," function to the ",Object(i.b)("inlineCode",{parentName:"p"},"new_todo()")," function if the button is clicked. Recall that when buttons are clicked, ",Object(i.b)("inlineCode",{parentName:"p"},"q.args.button_name")," will be ",Object(i.b)("inlineCode",{parentName:"p"},"True"),", so we check if ",Object(i.b)("inlineCode",{parentName:"p"},"q.args.new_todo")," is ",Object(i.b)("inlineCode",{parentName:"p"},"True"),". "),Object(i.b)("p",null,"In the ",Object(i.b)("inlineCode",{parentName:"p"},"new_todo()")," function, we display a new form containing a textbox (using ",Object(i.b)("inlineCode",{parentName:"p"},"ui.textbox()"),") and a set of buttons to add the item or return to to-do list (a ",Object(i.b)("inlineCode",{parentName:"p"},"ui.buttons()")," helps us display buttons side-by-side)."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'{18-21,45,52-61} title="$HOME/wave-apps/todo.py"',"{18-21,45,52-61}":!0,title:'"$HOME/wave-apps/todo.py"'}),"from typing import List\nfrom h2o_wave import Q, listen, ui\n\n_id = 0\n\n\n# A simple class that represents a to-do item.\nclass TodoItem:\n    def __init__(self, text):\n        global _id\n        _id += 1\n        self.id = f'todo_{_id}'\n        self.done = False\n        self.text = text\n\n\nasync def serve(q: Q):\n    if q.args.new_todo:  # Display an input form.\n        new_todo(q)\n    else:  # Show all items.\n        show_todos(q)\n    await q.page.save()\n\n\ndef show_todos(q: Q):\n    # Get items for this user.\n    todos: List[TodoItem] = q.user.todos\n\n    # Create a sample list if we don't have any.\n    if todos is None:\n        q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]\n\n    # If the user checked/unchecked an item, update our list.\n    for todo in todos:\n        if todo.id in q.args:\n            todo.done = q.args[todo.id]\n\n    # Create done/not-done checkboxes.\n    done = [ui.checkbox(name=todo.id, label=todo.text, value=True, trigger=True) for todo in todos if todo.done]\n    not_done = [ui.checkbox(name=todo.id, label=todo.text, trigger=True) for todo in todos if not todo.done]\n\n    # Display list\n    q.page['form'] = ui.form_card(box='1 1 3 10', items=[\n        ui.text_l('To Do'),\n        ui.button(name='new_todo', label='New To Do...', primary=True),\n        *not_done,\n        *([ui.separator('Done')] if len(done) else []),\n        *done,\n    ])\n\n\ndef new_todo(q: Q):\n    # Display an input form\n    q.page['form'] = ui.form_card(box='1 1 3 10', items=[\n        ui.text_l('New To Do'),\n        ui.textbox(name='text', label='What needs to be done?', multiline=True),\n        ui.buttons([\n            ui.button(name='add_todo', label='Add', primary=True),\n            ui.button(name='show_todos', label='Back'),\n        ]),\n    ])\n\n\nlisten('/todo', serve)\n")),Object(i.b)("p",null,"Restart your app and reload your browser. You should now be able to bring up the new to-do form. "),Object(i.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(i.b)("source",{src:o(503).default,type:"video/mp4"})),Object(i.b)("h2",{id:"step-8-add-to-do-and-return"},"Step 8: Add to-do and return"),Object(i.b)("p",null,"Finally, we handle the ",Object(i.b)("inlineCode",{parentName:"p"},"add_todo")," button-click, redirecting ",Object(i.b)("inlineCode",{parentName:"p"},"serve()")," to a new ",Object(i.b)("inlineCode",{parentName:"p"},"add_todo()")," function, which simply inserts a the new to-do item into our user-level todo list and calls ",Object(i.b)("inlineCode",{parentName:"p"},"show_todos()")," to redraw the to-do list."),Object(i.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(i.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(i.b)("h5",{parentName:"div"},Object(i.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(i.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(i.b)("path",Object(n.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(i.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(i.b)("p",{parentName:"div"},"In this example, for clarity, we named the both the buttons and their corresponding functions ",Object(i.b)("inlineCode",{parentName:"p"},"new_todo")," and ",Object(i.b)("inlineCode",{parentName:"p"},"add_todo"),", but this is not necessary."))),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'{20-21,54-59} title="$HOME/wave-apps/todo.py"',"{20-21,54-59}":!0,title:'"$HOME/wave-apps/todo.py"'}),"from typing import List\nfrom h2o_wave import Q, listen, ui\n\n_id = 0\n\n\n# A simple class that represents a to-do item.\nclass TodoItem:\n    def __init__(self, text):\n        global _id\n        _id += 1\n        self.id = f'todo_{_id}'\n        self.done = False\n        self.text = text\n\n\nasync def serve(q: Q):\n    if q.args.new_todo:  # Display an input form.\n        new_todo(q)\n    elif q.args.add_todo:  # Add an item.\n        add_todo(q)\n    else:  # Show all items.\n        show_todos(q)\n    await q.page.save()\n\n\ndef show_todos(q: Q):\n    # Get items for this user.\n    todos: List[TodoItem] = q.user.todos\n\n    # Create a sample list if we don't have any.\n    if todos is None:\n        q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]\n\n    # If the user checked/unchecked an item, update our list.\n    for todo in todos:\n        if todo.id in q.args:\n            todo.done = q.args[todo.id]\n\n    # Create done/not-done checkboxes.\n    done = [ui.checkbox(name=todo.id, label=todo.text, value=True, trigger=True) for todo in todos if todo.done]\n    not_done = [ui.checkbox(name=todo.id, label=todo.text, trigger=True) for todo in todos if not todo.done]\n\n    # Display list\n    q.page['form'] = ui.form_card(box='1 1 3 10', items=[\n        ui.text_l('To Do'),\n        ui.button(name='new_todo', label='New To Do...', primary=True),\n        *not_done,\n        *([ui.separator('Done')] if len(done) else []),\n        *done,\n    ])\n\n\ndef add_todo(q: Q):\n    # Insert a new item\n    q.user.todos.insert(0, TodoItem(q.args.text or 'Untitled'))\n\n    # Go back to our list.\n    show_todos(q)\n\n\ndef new_todo(q: Q):\n    # Display an input form\n    q.page['form'] = ui.form_card(box='1 1 3 10', items=[\n        ui.text_l('New To Do'),\n        ui.textbox(name='text', label='What needs to be done?', multiline=True),\n        ui.buttons([\n            ui.button(name='add_todo', label='Add', primary=True),\n            ui.button(name='show_todos', label='Back'),\n        ]),\n    ])\n\n\nlisten('/todo', serve)\n")),Object(i.b)("p",null,"Restart your app and reload your browser. You should now be able to add new to-do items to your list. Congratulations!"),Object(i.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(i.b)("source",{src:o(504).default,type:"video/mp4"})),Object(i.b)("h2",{id:"step-9-make-it-realtime"},"Step 9: Make it realtime"),Object(i.b)("p",null,"To make your app realtime, simply pass ",Object(i.b)("inlineCode",{parentName:"p"},"mode='multicast'")," to your ",Object(i.b)("inlineCode",{parentName:"p"},"listen()"),"."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title="$HOME/wave-apps/todo.py"',title:'"$HOME/wave-apps/todo.py"'}),"listen('/todo', serve, mode='multicast')\n")),Object(i.b)("p",null,"Restart your app, and try opening ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"http://localhost:55555/todo"}),"http://localhost:55555/todo")," from multiple browser tabs:"),Object(i.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(i.b)("source",{src:o(505).default,type:"video/mp4"})),Object(i.b)("p",null,"Groovy!"),Object(i.b)("h2",{id:"exercise"},"Exercise"),Object(i.b)("p",null,'A little housekeeping goes a long way: add a "Clear" button on the main page to clear all completed to-dos.'),Object(i.b)("blockquote",null,Object(i.b)("p",{parentName:"blockquote"},'"And this mess is so big',Object(i.b)("br",null),"\nAnd so deep and so tall,",Object(i.b)("br",null),"\nWe cannot pick it up.",Object(i.b)("br",null),'\nThere is no way at all!"')),Object(i.b)("p",null,"\u2015 Dr. Seuss, ",Object(i.b)("em",{parentName:"p"},"The Cat in the Hat")),Object(i.b)("h2",{id:"next-steps"},"Next steps"),Object(i.b)("p",null,"Congratulations! You've completed all the tutorials (hopefully). There are three paths you can take from here:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},Object(i.b)("a",Object(n.a)({parentName:"li"},{href:"examples"}),"Gallery"),". 150+ examples that cover everything that Wave has to offer."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("a",Object(n.a)({parentName:"li"},{href:"guide"}),"Guide"),". In-depth look at each of Wave's features."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("a",Object(n.a)({parentName:"li"},{href:"api/index"}),"API"),". Reference-level documentation for the Python API.")),Object(i.b)("p",null,"Happy hacking!"))}c.isMDXComponent=!0},290:function(e,t,o){"use strict";o.d(t,"a",(function(){return p})),o.d(t,"b",(function(){return m}));var n=o(0),a=o.n(n);function i(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function s(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),o.push.apply(o,n)}return o}function r(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?s(Object(o),!0).forEach((function(t){i(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):s(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}function d(e,t){if(null==e)return{};var o,n,a=function(e,t){if(null==e)return{};var o,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)o=i[n],t.indexOf(o)>=0||(a[o]=e[o]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)o=i[n],t.indexOf(o)>=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<i;l++)s[l]=o[l];return a.a.createElement.apply(null,s)}return a.a.createElement.apply(null,o)}u.displayName="MDXCreateElement"},501:function(e,t,o){"use strict";o.r(t),t.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAawAAADFCAYAAAAIRMaKAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUAU2F0IDAzIE9jdCAyMDIwIDAzOjQ5OjMzIFBNIFBEVP0rWOEAABgJSURBVHic7d15XJVl3sfxzzmcwBEFT6PyYIk1jkraotDiAopLiuujuGa5hz1TipZLKZY44wo2FWamaCMuaaVhpk2Ry2ja0zRhWIGAmCQCqZlKg5PI8vzhdJ5OYiPnEHbh9/16+ce5r+v6Xdd9+3rxfd3LuY+luLi43GazYbFYEBER+bWylJeXl1/rRYiIiPwn1mu9ABERkauhwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQINlcH5ufn07dP7//YLywsjGf//Jyr0wDw2msbiV20yGmbr68vjRsH0CO8BwMGRPCb3/zGrTlEROTXzeXAqufry/Qnn3R8Li8rJy4ulqCgILrdf79j+8033ezeCn9k7Lhx1K9fn/JyOHPmWz7/7DP+/OyzbNmyhRdeiMff37/K5hIRkV8XlwOrtrc3Q4cOc3wuLS0lLi6W3/++mdP2qhTeI5ymv/+907aUlBSmPPE4M2c8xapX/oLVqqucIiI1UbX9dS88d47YRYvo1bMn7du1ZfCggaxfv46ysjK36gYHBzNlylQ+++wz9u37wKktO/sw06ZOpWuXzoSGhjB27Bg++GCvW/OJiMi1US2BVVRUxOjRo9i+fRvh4eE88cQUWrZsyfPPPUfM7Gfcrt+zVy/q1KnDrl27HNvS09MZM3o0hw9nMWLESB579DFsHh48PnkyW7ZscXtOERGpXi5fEqyMFSuWk5eXx5o1a2kRGAjAoMGDCQy8jcWL4+jduw/3tW3rcn2bzUazZs3JPZbr2DZ/3lxuvPFG1q1/lTp16gAwdNgwpk+bxrOL4+jSpQs+Pj7u7ZiIiFSbajnDej85mc6duzjC6gdDhw3Dbrfz7rvvuj1H3bp1KSw8B8Dx48c5dOgQI0aMdIQVgMViYfwjj3D+/Hn27tWlQRERk/zigVVcXMyJEycIvC3wsjar1Urz5s3Jzc2tYGTlnCs8R7169QDIzT0GUOGczZo1w2azOfqIiIgZqu2hC4vFcqUGysvL3apdXFzM4awsAgICAPihnIWK57RYLODelCIiUs1+8cDy9PSkQYMGZGZkXNZWVlbG4awsGgc0dmuOt9/eyvnz5+na7dL3vxo3vlQvI/PyOY8cOcLFixcdfURExAzVcobVvXsPdu3aRXb2Yaftmzdt4ttvvyW8R7jLtT/88EOef/55goODadeuHXApsFoEBrJ+3TrOFxU59V+ZkECtWrXo2KmTy3OKiEj1q5anBCPHj2fv3j1ERkYyZPAQ/P39+SLtC97asoXw8HDa/jto/pPk95NpkJpKWVkpp0+f5kBKCgcOHCAw8DbmzpvvdNkxemY048dHMnLkCPr3H0CtWrXYtXsXf//oI6JnzdITgiIihqmWwKpbty6rE9ewbNlLbN36FmfPnqVRo0ZMnBjFQyNGXHWdlQkJwKV7UPYbbySgcQBPPTWD/+7fH09PT6e+rW6/nb+sTmT5y8tY9coqLhYX07x5c57983OEhYVV5e6JiEg1sJS7+8SDiIhINdCL90RExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQINlcHbt26lfgXnufMmTNuLcButxM1aTL9+vVzq46IiNRslvLy8nJXBnbr2oX4+CW0bNXKrQWkp6URFTWRHTt3uVVHRERqNpcvCZ45c8btsAJo2aqV22dpIiJS8+keloiIGMGowBo7dgzBQW0IDmrDPXcH06d3LxYvjuPs2bNVPtdrr21kfOTDV2w/cOAAvXqGc/LkySqfW0RELmdUYAGMGjWat7dtZ/ObScyYMZOszExGjRzhVmjl5OQQHNSG0tLSqx5z00030SM8nHr16rk8r4iIXD3jAsvHx4dGjRoREBBAh5AQlr28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LBYriWvWsvSlZWQfziY6eqZTjaSkJBY/+2c2bd7EkexsHnpwOAMHDWbnrt2EhXUmZvYzjr47d+5k4cKFTJw4kU2b36R3795MiooiMzOTjp068eqGjQB8sG8/MTFzHOOysrLIyzvOioSVLJi/gOTk99i8edMVj8sbr79Or9692LFjJ2PHjWNOTAwnTpwA4NixY0RFTaT7/d3ZtHkzDz40gri42CvWKi0tZcKExwBYs3YdS5a8SNoXXzBnTkylj2lla4mIgBtfHP41qe3tjdVq5bvCQgoLC0lKSmLN2rUEBt4GwFMzZjJwYATvvvcuEREDLxtfUFBA67ta07hxYwBeXPqS49Lahx/u55tvvmHN2nWObQsWLqRXz3C+ysmhyS23ADB02FACAgIA6NKlK4cOpdO+fft/tw0jMXE1//znP6lTpw6r//IK06ZNo3PnLpfahw4jMyOTd7Zv5/EnnsDLywsALy8vPDw8HOu8wdOTGTMvnXE1bdqUPn378umBTxkyZGiFx6Vd+/aOOQYNGkTi6r/w+eef4+fnx+ZNm2jXrh2jx4wB4KabbubIkWzWrllTYa3//fBDzhcVMXfuPG644QYAFsXG0qd3b7777jvq1q171ce0srVERKCGBFZRURFlZWX4+Pry5ZdHsNlsNG/ewtFusVi48847yczIqHD88AeGM336NA4cSOG++9rStVs3br31VuDSWU2LwECne0MNGzbE39+fzKxMR2D5NfRztNtsNmrXru34/EMAXbhwAW9vb9LT05kTE8Ozixc7+hQXF9OxY8ef3c9bmjRx+lz/t/XJzc29Yv8fwuIHvr6+/Ov8eQAOH87innvudWpv1fLK36vLyMwgNzeXbl27OG0vKyvj5MmTl4XMzx3TytYSEYEaElipqanUrVsXf39/vvnmVKXHh4SGsm37O+zdu5dPPvkHDz04nMcff4JBgwdDOViwVPmaX3ghnt81beq0rVatWj87xmKpunWUlpVhsTrX87B5XKH3JW3aBPHHP/3psu0NGjS4bNvPHtNK1hIRgRpwD6ukpISVCSsI79kTm81G0981paSkhLS0NKc+B1NTaREYWGGNo0ePUqtWLfr378/cufOYMGEir7/xOgDNWzQnI+OQ0/2vvLw8CgoKaPGjs7irZbFYaBEYyKlTp2jUqJHj36lTp7BaL/13/BAjLr4166rceuutHEpPd9qWmZF5xf7NmjXn668L8PPzc6y5jrc3p06edFzW+7GfO6aVrSUiAgYGVmFhIfn5+XyVk8OePXsYPz6Sc+fO8eijl27i+/j6MiAigtmzn+HgwYMcO3aMeXPnUlxcTHiP8AprPj0rmtjYReTl5ZGdfZjdu3dx678v9bVv34H69evz9DNPc/ToUTIyDjHjqScJC+vsuBxYWaNGjWbJknh27NhBfn4+77yznf955BGOZGcDl14IbLVa2bZtm+Mhiao2cOAg9u7dy8YNG8jPz2fv3j289daWK/bv0KED3t51eOaZpzly5AjZ2YeJjp7J0qUvVtj/545pZWuJiICBgZWYuJq+fXozZMhgnl28mDtuv4PViWvw8fFx9Jk2bTphncKYOnUKwx8YxunT37AiIYHa3t4V1ly4KJZTp04xbOgQxo0dS0M/P6KjZwGX7kctfWkZNg8PRo4cwaN/+AO33XYbc+fNc3kfevTowZSpU3l52UsMGhjB6tWriZkzh+C77wYuhW509CyWLn2R5597zuV5fk6zZs2Ii1vMm0lvEjGgP6+sWsVjEyZesb/NZmPZsmWUlZYxdsxo/ueRR/Dx8WFRbFyF/f/TMa1MLRERcONt7cFBbUg58GmVLKIqa8nVKy0tdXoKcf++fcyZE0Py+zuu4apERCpm3BmWVI2MjEP069uHXbt2curUKb744nOWvrSU0NDQa700EZEK1YinBKXyAgNvIzJyPMtfXk5u7jG869Sha9euTJ78+LVemohIhVwOLLvdTnpaWpX8gKPdbnerhrim/4AB9B8w4FovQ0TkqrgcWFGTJhMVNdHtH1+02+1ETZrsVg0REan5XH7oQkREpDrpoQsRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECP8HZI6lCVI7f4wAAAAASUVORK5CYII="},502:function(e,t,o){"use strict";o.r(t),t.default=o.p+"assets/medias/tutorial-todo__2-c21f17dee3fec1d5b531cdef2c8e06bf.mp4"},503:function(e,t,o){"use strict";o.r(t),t.default=o.p+"assets/medias/tutorial-todo__3-0d9d74e87e9051cf9c76754a3cfee393.mp4"},504:function(e,t,o){"use strict";o.r(t),t.default=o.p+"assets/medias/tutorial-todo__4-7f3700ac8c437bda55137ad74d6cf294.mp4"},505:function(e,t,o){"use strict";o.r(t),t.default=o.p+"assets/medias/tutorial-todo__5-857b867c7263dfa780f7bcea2e1b3592.mp4"}}]);
\ No newline at end of file
diff --git a/docs/997fea1d.fe5a6ff2.js b/docs/997fea1d.d3b55233.js
similarity index 91%
rename from docs/997fea1d.fe5a6ff2.js
rename to docs/997fea1d.d3b55233.js
index b7aef174ae..3efdea4203 100644
--- a/docs/997fea1d.fe5a6ff2.js
+++ b/docs/997fea1d.d3b55233.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[142],{196:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return c})),t.d(n,"metadata",(function(){return i})),t.d(n,"rightToc",(function(){return u})),t.d(n,"default",(function(){return m}));var r=t(2),o=t(6),a=(t(0),t(290)),c={title:"Markdown"},i={unversionedId:"examples/markdown",id:"examples/markdown",isDocsHomePage:!1,title:"Markdown",description:"Use a markdown card to display formatted content using markdown.",source:"@site/docs/examples/markdown.md",slug:"/examples/markdown",permalink:"/wave/docs/examples/markdown",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/markdown.md",version:"current",sidebar:"someSidebar",previous:{title:"Template / Data",permalink:"/wave/docs/examples/template-data"},next:{title:"Markdown / Data",permalink:"/wave/docs/examples/markdown-data"}},u=[],d={rightToc:u};function m(e){var n=e.components,c=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},d,c,{components:n,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use a markdown card to display formatted content using markdown."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+t(397).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\nsample_markdown = '''=\nThe **quick** _brown_ fox jumped over the lazy dog.\n\nBlock quote:\n\n> 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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?c(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function u(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=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<a;d++)c[d]=t[d];return o.a.createElement.apply(null,c)}return o.a.createElement.apply(null,t)}s.displayName="MDXCreateElement"},397:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/markdown-3164a3fca5f8ccd5e61dbb00656dc796.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[143],{197:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return c})),t.d(n,"metadata",(function(){return i})),t.d(n,"rightToc",(function(){return u})),t.d(n,"default",(function(){return m}));var r=t(2),o=t(6),a=(t(0),t(292)),c={title:"Markdown"},i={unversionedId:"examples/markdown",id:"examples/markdown",isDocsHomePage:!1,title:"Markdown",description:"Use a markdown card to display formatted content using markdown.",source:"@site/docs/examples/markdown.md",slug:"/examples/markdown",permalink:"/wave/docs/examples/markdown",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/markdown.md",version:"current",sidebar:"someSidebar",previous:{title:"Template / Data",permalink:"/wave/docs/examples/template-data"},next:{title:"Markdown / Data",permalink:"/wave/docs/examples/markdown-data"}},u=[],d={rightToc:u};function m(e){var n=e.components,c=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},d,c,{components:n,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use a markdown card to display formatted content using markdown."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+t(402).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\nsample_markdown = '''=\nThe **quick** _brown_ fox jumped over the lazy dog.\n\nBlock quote:\n\n> 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},292: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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?c(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function u(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=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<a;d++)c[d]=t[d];return o.a.createElement.apply(null,c)}return o.a.createElement.apply(null,t)}s.displayName="MDXCreateElement"},402:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/markdown-3164a3fca5f8ccd5e61dbb00656dc796.png"}}]);
\ No newline at end of file
diff --git a/docs/9a52a2f7.1912ba90.js b/docs/9a52a2f7.25d15099.js
similarity index 92%
rename from docs/9a52a2f7.1912ba90.js
rename to docs/9a52a2f7.25d15099.js
index 7630248d05..0ed3fb1223 100644
--- a/docs/9a52a2f7.1912ba90.js
+++ b/docs/9a52a2f7.25d15099.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[143],{197:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return l})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return p})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(290)),l={title:"Plot / Interval / Polar"},i={unversionedId:"examples/plot-interval-polar",id:"examples/plot-interval-polar",isDocsHomePage:!1,title:"Plot / Interval / Polar",description:"Make a rose plot (a bar plot in polar coordinates).",source:"@site/docs/examples/plot-interval-polar.md",slug:"/examples/plot-interval-polar",permalink:"/wave/docs/examples/plot-interval-polar",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-polar.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Stacked / Grouped / Transpose",permalink:"/wave/docs/examples/plot-interval-stacked-grouped-transpose"},next:{title:"Plot / Interval / Polar / Stacked",permalink:"/wave/docs/examples/plot-interval-polar-stacked"}},p=[],c={rightToc:p};function s(e){var t=e.components,l=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},c,l,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a rose plot (a bar plot in polar coordinates)."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(398).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 24\nf = FakeCategoricalSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Interval, polar',\n    data=data('product price', n),\n    plot=ui.plot([ui.mark(coord='polar', type='interval', x='=product', y='=price', y_min=0)])\n))\nv.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},290: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 l(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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;c++)l[c]=r[c];return a.a.createElement.apply(null,l)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},398:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-interval-polar-e54d13fed4e4ea004992a91a9e4644df.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[144],{198:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return l})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return p})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(292)),l={title:"Plot / Interval / Polar"},i={unversionedId:"examples/plot-interval-polar",id:"examples/plot-interval-polar",isDocsHomePage:!1,title:"Plot / Interval / Polar",description:"Make a rose plot (a bar plot in polar coordinates).",source:"@site/docs/examples/plot-interval-polar.md",slug:"/examples/plot-interval-polar",permalink:"/wave/docs/examples/plot-interval-polar",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-polar.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Stacked / Grouped / Transpose",permalink:"/wave/docs/examples/plot-interval-stacked-grouped-transpose"},next:{title:"Plot / Interval / Polar / Stacked",permalink:"/wave/docs/examples/plot-interval-polar-stacked"}},p=[],c={rightToc:p};function s(e){var t=e.components,l=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},c,l,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a rose plot (a bar plot in polar coordinates)."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(403).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 24\nf = FakeCategoricalSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Interval, polar',\n    data=data('product price', n),\n    plot=ui.plot([ui.mark(coord='polar', type='interval', x='=product', y='=price', y_min=0)])\n))\nv.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},292: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 l(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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;c++)l[c]=r[c];return a.a.createElement.apply(null,l)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},403:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-interval-polar-e54d13fed4e4ea004992a91a9e4644df.png"}}]);
\ No newline at end of file
diff --git a/docs/9ed00105.277f7035.js b/docs/9ed00105.277f7035.js
deleted file mode 100644
index 3e4feac78d..0000000000
--- a/docs/9ed00105.277f7035.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[144],{198:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return i})),t.d(n,"metadata",(function(){return c})),t.d(n,"rightToc",(function(){return s})),t.d(n,"default",(function(){return p}));var r=t(2),o=t(6),a=(t(0),t(290)),i={title:"Configuration"},c={unversionedId:"configuration",id:"configuration",isDocsHomePage:!1,title:"Configuration",description:"Configuring the server",source:"@site/docs/configuration.md",slug:"/configuration",permalink:"/wave/docs/configuration",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/configuration.md",version:"current",sidebar:"someSidebar",previous:{title:"Browser Testing",permalink:"/wave/docs/browser-testing"},next:{title:"Backup and Recovery",permalink:"/wave/docs/backup"}},s=[{value:"Configuring the server",id:"configuring-the-server",children:[{value:"Command line options",id:"command-line-options",children:[]}]},{value:"Configuring your app",id:"configuring-your-app",children:[{value:"H2O_WAVE_INTERNAL_ADDRESS",id:"h2o_wave_internal_address",children:[]},{value:"H2O_WAVE_EXTERNAL_ADDRESS",id:"h2o_wave_external_address",children:[]},{value:"H2O_WAVE_ADDRESS",id:"h2o_wave_address",children:[]},{value:"H2O_WAVE_ACCESS_KEY_ID",id:"h2o_wave_access_key_id",children:[]},{value:"H2O_WAVE_ACCESS_KEY_SECRET",id:"h2o_wave_access_key_secret",children:[]}]}],l={rightToc:s};function p(e){var n=e.components,t=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},l,t,{components:n,mdxType:"MDXLayout"}),Object(a.b)("h2",{id:"configuring-the-server"},"Configuring the server"),Object(a.b)("h3",{id:"command-line-options"},"Command line options"),Object(a.b)("p",null,"Execute ",Object(a.b)("inlineCode",{parentName:"p"},"wave -help")," to see all available command line options:"),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{}),'$ ./wave -help\nUsage of ./wave:\n  -access-key-id string\n        default access key ID (default "access_key_id")\n  -access-key-secret string\n        default access key secret (default "access_key_secret")\n  -compact string\n        compact AOF log\n  -data-dir string\n        directory to store site data (default "./data")\n  -debug\n        enable debug mode (profiling, inspection, etc.)\n  -init string\n        initialize site content from AOF log\n  -listen string\n        listen on this address (default ":55555")\n  -oidc-client-id string\n        OIDC client ID\n  -oidc-client-secret string\n        OIDC client secret\n  -oidc-end-session-url string\n        OIDC end session URL\n  -oidc-provider-url string\n        OIDC provider URL\n  -oidc-redirect-url string\n        OIDC redirect URL\n  -tls-cert-file string\n        path to certificate file (TLS only)\n  -tls-key-file string\n        path to private key file (TLS only)\n  -version\n        print version and exit\n  -web-dir string\n        directory to serve web assets from (default "./www")\n')),Object(a.b)("h2",{id:"configuring-your-app"},"Configuring your app"),Object(a.b)("p",null,"Your Wave application has a websocket server under the hood, called an ",Object(a.b)("em",{parentName:"p"},"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 ",Object(a.b)("a",Object(r.a)({parentName:"p"},{href:"http://127.0.0.1:55555/"}),"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."),Object(a.b)("p",null,"You can use the following environment variables to configure your app's server's behavior:"),Object(a.b)("h3",{id:"h2o_wave_internal_address"},"H2O_WAVE_INTERNAL_ADDRESS"),Object(a.b)("p",null,"The local host/port on which the app server should listen. Defaults to ",Object(a.b)("inlineCode",{parentName:"p"},"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 ",Object(a.b)("inlineCode",{parentName:"p"},"66666")," with a port number of your choice):"),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{}),"$ H2O_WAVE_INTERNAL_ADDRESS=ws://127.0.0.1:66666 ./venv/bin/python my_app.py\n")),Object(a.b)("h3",{id:"h2o_wave_external_address"},"H2O_WAVE_EXTERNAL_ADDRESS"),Object(a.b)("p",null,"The public host/port of the app server. Defaults to ",Object(a.b)("inlineCode",{parentName:"p"},"ws://127.0.0.1:0"),". Set this variable if you are running your Wave server and your app on different machine or containers."),Object(a.b)("h3",{id:"h2o_wave_address"},"H2O_WAVE_ADDRESS"),Object(a.b)("p",null,"The public host/port of the Wave server. Set this variable if you are running the Wave server on a remote machine or container."),Object(a.b)("h3",{id:"h2o_wave_access_key_id"},"H2O_WAVE_ACCESS_KEY_ID"),Object(a.b)("p",null,"The API access key ID to use for communicating with the Wave server."),Object(a.b)("h3",{id:"h2o_wave_access_key_secret"},"H2O_WAVE_ACCESS_KEY_SECRET"),Object(a.b)("p",null,"The API access key secret to use for communicating with the Wave server."))}p.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return u})),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 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 c(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function s(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=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<a;l++)i[l]=t[l];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,t)}b.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/9ed00105.ca11321b.js b/docs/9ed00105.ca11321b.js
new file mode 100644
index 0000000000..58909a6f31
--- /dev/null
+++ b/docs/9ed00105.ca11321b.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[145],{199:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return l}));var r=n(2),a=n(6),i=(n(0),n(292)),o={title:"Configuration"},c={unversionedId:"configuration",id:"configuration",isDocsHomePage:!1,title:"Configuration",description:"Configuring the server",source:"@site/docs/configuration.md",slug:"/configuration",permalink:"/wave/docs/configuration",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/configuration.md",version:"current",sidebar:"someSidebar",previous:{title:"Browser Testing",permalink:"/wave/docs/browser-testing"},next:{title:"Deployment",permalink:"/wave/docs/deployment"}},s=[{value:"Configuring the server",id:"configuring-the-server",children:[{value:"Command line options",id:"command-line-options",children:[]}]},{value:"Configuring your app",id:"configuring-your-app",children:[{value:"H2O_APP_ADDRESS",id:"h2o_app_address",children:[]},{value:"H2O_WAVE_ADDRESS",id:"h2o_wave_address",children:[]},{value:"H2O_WAVE_ACCESS_KEY_ID",id:"h2o_wave_access_key_id",children:[]},{value:"H2O_WAVE_ACCESS_KEY_SECRET",id:"h2o_wave_access_key_secret",children:[]},{value:"H2O_WAVE_INTERNAL_ADDRESS",id:"h2o_wave_internal_address",children:[]},{value:"H2O_WAVE_EXTERNAL_ADDRESS",id:"h2o_wave_external_address",children:[]}]}],p={rightToc:s};function l(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(r.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(i.b)("h2",{id:"configuring-the-server"},"Configuring the server"),Object(i.b)("h3",{id:"command-line-options"},"Command line options"),Object(i.b)("p",null,"Execute ",Object(i.b)("inlineCode",{parentName:"p"},"waved -help")," to see all available command line options:"),Object(i.b)("pre",null,Object(i.b)("code",Object(r.a)({parentName:"pre"},{}),'$ ./waved -help\nUsage of ./waved:\n  -access-key-id string\n        default access key ID (default "access_key_id")\n  -access-key-secret string\n        default access key secret (default "access_key_secret")\n  -compact string\n        compact AOF log\n  -data-dir string\n        directory to store site data (default "./data")\n  -debug\n        enable debug mode (profiling, inspection, etc.)\n  -init string\n        initialize site content from AOF log\n  -listen string\n        listen on this address (default ":55555")\n  -oidc-client-id string\n        OIDC client ID\n  -oidc-client-secret string\n        OIDC client secret\n  -oidc-end-session-url string\n        OIDC end session URL\n  -oidc-provider-url string\n        OIDC provider URL\n  -oidc-redirect-url string\n        OIDC redirect URL\n  -tls-cert-file string\n        path to certificate file (TLS only)\n  -tls-key-file string\n        path to private key file (TLS only)\n  -version\n        print version and exit\n  -web-dir string\n        directory to serve web assets from (default "./www")\n')),Object(i.b)("h2",{id:"configuring-your-app"},"Configuring your app"),Object(i.b)("p",null,"Your Wave application is an ASGI server. When you run your app during development, the app server runs at ",Object(i.b)("a",Object(r.a)({parentName:"p"},{href:"http://127.0.0.1:8000/"}),"http://127.0.0.1:8000/")," by default (localhost, port 8000), and assumes that your Wave server is running at ",Object(i.b)("a",Object(r.a)({parentName:"p"},{href:"http://127.0.0.1:55555/"}),"http://127.0.0.1:55555/")," (localhost, port 55555). The ",Object(i.b)("inlineCode",{parentName:"p"},"wave run")," command automatically picks another available port if ",Object(i.b)("inlineCode",{parentName:"p"},"8000")," is not available. "),Object(i.b)("p",null,"The Wave server and apps communicate with each other using RPC over persistent HTTP connections."),Object(i.b)("p",null,"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."),Object(i.b)("p",null,"You can use the following environment variables to configure your app's server's behavior:"),Object(i.b)("h3",{id:"h2o_app_address"},"H2O_APP_ADDRESS"),Object(i.b)("p",null,"The public host/port of the app server. Defaults to ",Object(i.b)("inlineCode",{parentName:"p"},"http://127.0.0.1:8000"),". Set this variable if you are running your Wave server and your app on different machines or containers."),Object(i.b)("h3",{id:"h2o_wave_address"},"H2O_WAVE_ADDRESS"),Object(i.b)("p",null,"The public host/port of the Wave server. Defaults to ",Object(i.b)("inlineCode",{parentName:"p"},"http://127.0.0.1:55555"),". Set this variable if you are running the Wave server on a remote machine or container."),Object(i.b)("h3",{id:"h2o_wave_access_key_id"},"H2O_WAVE_ACCESS_KEY_ID"),Object(i.b)("p",null,"The API access key ID to use for communicating with the Wave server."),Object(i.b)("h3",{id:"h2o_wave_access_key_secret"},"H2O_WAVE_ACCESS_KEY_SECRET"),Object(i.b)("p",null,"The API access key secret to use for communicating with the Wave server."),Object(i.b)("h3",{id:"h2o_wave_internal_address"},"H2O_WAVE_INTERNAL_ADDRESS"),Object(i.b)("div",{className:"admonition admonition-caution alert alert--warning"},Object(i.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-heading"}),Object(i.b)("h5",{parentName:"div"},Object(i.b)("span",Object(r.a)({parentName:"h5"},{className:"admonition-icon"}),Object(i.b)("svg",Object(r.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}),Object(i.b)("path",Object(r.a)({parentName:"svg"},{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})))),"Deprecated")),Object(i.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-content"}),Object(i.b)("p",{parentName:"div"},"This environment variable will be removed in v1.0."))),Object(i.b)("p",null,"The local host/port on which the app server should listen. Defaults to ",Object(i.b)("inlineCode",{parentName:"p"},"http://127.0.0.1:8000"),". For example, if you want your app to listen on a specific port, execute your app as follows (replace ",Object(i.b)("inlineCode",{parentName:"p"},"66666")," with a port number of your choice):"),Object(i.b)("pre",null,Object(i.b)("code",Object(r.a)({parentName:"pre"},{}),"$ H2O_WAVE_INTERNAL_ADDRESS=ws://127.0.0.1:66666 ./venv/bin/python my_app.py\n")),Object(i.b)("h3",{id:"h2o_wave_external_address"},"H2O_WAVE_EXTERNAL_ADDRESS"),Object(i.b)("div",{className:"admonition admonition-caution alert alert--warning"},Object(i.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-heading"}),Object(i.b)("h5",{parentName:"div"},Object(i.b)("span",Object(r.a)({parentName:"h5"},{className:"admonition-icon"}),Object(i.b)("svg",Object(r.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}),Object(i.b)("path",Object(r.a)({parentName:"svg"},{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})))),"Deprecated")),Object(i.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-content"}),Object(i.b)("p",{parentName:"div"},"Specify ",Object(i.b)("inlineCode",{parentName:"p"},"H2O_APP_ADDRESS")," instead."))),Object(i.b)("p",null,"The public host/port of the app server. Defaults to ",Object(i.b)("inlineCode",{parentName:"p"},"http://127.0.0.1:8000"),". Set this variable if you are running your Wave server and your app on different machines or containers."))}l.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return h}));var r=n(0),a=n.n(r);function i(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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),l=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},d=function(e){var t=l(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},u={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,i=e.originalType,o=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),d=l(n),b=r,h=d["".concat(o,".").concat(b)]||d[b]||u[b]||i;return n?a.a.createElement(h,c(c({ref:t},p),{},{components:n})):a.a.createElement(h,c({ref:t},p))}));function h(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[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,o[1]=c;for(var p=2;p<i;p++)o[p]=n[p];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,n)}b.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/a3713279.d69af334.js b/docs/a3713279.d69af334.js
new file mode 100644
index 0000000000..4d9fddf8d8
--- /dev/null
+++ b/docs/a3713279.d69af334.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[146],{200: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),a=n(6),o=(n(0),n(292)),p={title:"Deployment"},c={unversionedId:"deployment",id:"deployment",isDocsHomePage:!1,title:"Deployment",description:"Deploying Wave scripts",source:"@site/docs/deployment.md",slug:"/deployment",permalink:"/wave/docs/deployment",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/deployment.md",version:"current",sidebar:"someSidebar",previous:{title:"Configuration",permalink:"/wave/docs/configuration"},next:{title:"Backup and Recovery",permalink:"/wave/docs/backup"}},i=[{value:"Deploying Wave scripts",id:"deploying-wave-scripts",children:[]},{value:"Deploying Wave apps",id:"deploying-wave-apps",children:[]}],l={rightToc:i};function u(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},l,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("h2",{id:"deploying-wave-scripts"},"Deploying Wave scripts"),Object(o.b)("p",null,"Wave scripts are regular Python scripts. Deploy them as you would any Python script."),Object(o.b)("h2",{id:"deploying-wave-apps"},"Deploying Wave apps"),Object(o.b)("p",null,"Wave apps are ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://asgi.readthedocs.io/en/latest/"}),"ASGI"),"-compatible, based on ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://www.uvicorn.org"}),"Uvicorn")," / ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://www.starlette.io/"}),"Starlette"),", a ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://www.techempower.com/benchmarks/#section=data-r17&hw=ph&test=fortune&l=zijzen-1"}),"high-performance")," Python server."),Object(o.b)("p",null,"You can run Wave apps behind any ASGI server, like ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://www.uvicorn.org"}),"uvicorn"),", ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://gunicorn.org/"}),"gunicorn"),", ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://github.com/django/daphne/"}),"daphne"),", ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://pgjones.gitlab.io/hypercorn/"}),"hypercorn"),", etc."),Object(o.b)("p",null,"To run your app using an ASGI server, append ",Object(o.b)("inlineCode",{parentName:"p"},":main")," to the ",Object(o.b)("inlineCode",{parentName:"p"},"app")," argument. For example, if you were normally executing your app ",Object(o.b)("inlineCode",{parentName:"p"},"foo.py")," using ",Object(o.b)("inlineCode",{parentName:"p"},"wave run foo"),", and want to run your app using Uvicorn, use ",Object(o.b)("inlineCode",{parentName:"p"},"uvicorn foo:main"),"."),Object(o.b)("p",null,"These commands are equivalent:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-shell"}),"(venv) $ wave run --no-reload foo\n")),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-shell"}),"(venv) $ uvicorn foo:main\n")),Object(o.b)("p",null,"For more information, see ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://www.uvicorn.org/deployment/"}),"uvicorn.org/deployment")," and ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://www.starlette.io/#performance"}),"starlette.io/#performance"),"."))}u.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return d}));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 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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):c(c({},t),e)),n},s=function(e){var t=u(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)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=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]||b[m]||o;return n?a.a.createElement(d,c(c({ref:t},l),{},{components:n})):a.a.createElement(d,c({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 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<o;l++)p[l]=n[l];return a.a.createElement.apply(null,p)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/a50fe136.400473bd.js b/docs/a50fe136.b26e4f55.js
similarity index 95%
rename from docs/a50fe136.400473bd.js
rename to docs/a50fe136.b26e4f55.js
index b51b022362..0b05d0507d 100644
--- a/docs/a50fe136.400473bd.js
+++ b/docs/a50fe136.b26e4f55.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[145],{199:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return l})),r.d(t,"rightToc",(function(){return o})),r.d(t,"default",(function(){return b}));var n=r(2),a=r(6),c=(r(0),r(290)),i={title:"Module h2o_wave.db"},l={unversionedId:"api/db",id:"api/db",isDocsHomePage:!1,title:"Module h2o_wave.db",description:"Classes",source:"@site/docs/api/db.md",slug:"/api/db",permalink:"/wave/docs/api/db",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/api/db.md",version:"current"},o=[{value:"Classes",id:"classes",children:[{value:'TeleDB <a name="h2o_wave.db.TeleDB"/>',id:"teledb",children:[]},{value:'TeleDBError <a name="h2o_wave.db.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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function o(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},c=Object.keys(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=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<c;s++)i[s]=r[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}p.displayName="MDXCreateElement"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[147],{201:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return l})),r.d(t,"rightToc",(function(){return o})),r.d(t,"default",(function(){return b}));var n=r(2),a=r(6),c=(r(0),r(292)),i={title:"Module h2o_wave.db"},l={unversionedId:"api/db",id:"api/db",isDocsHomePage:!1,title:"Module h2o_wave.db",description:"Classes",source:"@site/docs/api/db.md",slug:"/api/db",permalink:"/wave/docs/api/db",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/api/db.md",version:"current"},o=[{value:"Classes",id:"classes",children:[{value:'TeleDB <a name="h2o_wave.db.TeleDB"/>',id:"teledb",children:[]},{value:'TeleDBError <a name="h2o_wave.db.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},292: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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function o(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},c=Object.keys(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=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<c;s++)i[s]=r[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}p.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/a54511d2.a23ffe9e.js b/docs/a54511d2.0cfeb42e.js
similarity index 96%
rename from docs/a54511d2.a23ffe9e.js
rename to docs/a54511d2.0cfeb42e.js
index 9cc52d73e7..c30b69b38c 100644
--- a/docs/a54511d2.a23ffe9e.js
+++ b/docs/a54511d2.0cfeb42e.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[146],{200: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 c})),n.d(t,"default",(function(){return s}));var a=n(2),r=n(6),o=(n(0),n(290)),i={title:"Stat / Small"},l={unversionedId:"examples/stat-small",id:"examples/stat-small",isDocsHomePage:!1,title:"Stat / Small",description:"Create a stat card displaying a single value.",source:"@site/docs/examples/stat-small.md",slug:"/examples/stat-small",permalink:"/wave/docs/examples/stat-small",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-small.md",version:"current",sidebar:"someSidebar",previous:{title:"Dashboard",permalink:"/wave/docs/examples/dashboard"},next:{title:"Stat / Large",permalink:"/wave/docs/examples/stat-large"}},c=[],u={rightToc:c};function s(e){var t=e.components,i=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},u,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Create a stat card displaying a single value."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(399).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, _ = f.next()\nc = page.add('example', ui.small_stat_card(\n    box=f'1 1 1 1',\n    title=fake.cryptocurrency_name(),\n    value=f'${val:.2f}',\n))\npage.save()\n\nwhile True:\n    time.sleep(1)\n    val, _ = f.next()\n    c.value = f'${val:.2f}'\n    page.save()\n")))}s.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return d}));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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=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<o;u++)i[u]=n[u];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},399:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[148],{202: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 c})),n.d(t,"default",(function(){return s}));var a=n(2),r=n(6),o=(n(0),n(292)),i={title:"Stat / Small"},l={unversionedId:"examples/stat-small",id:"examples/stat-small",isDocsHomePage:!1,title:"Stat / Small",description:"Create a stat card displaying a single value.",source:"@site/docs/examples/stat-small.md",slug:"/examples/stat-small",permalink:"/wave/docs/examples/stat-small",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-small.md",version:"current",sidebar:"someSidebar",previous:{title:"Dashboard",permalink:"/wave/docs/examples/dashboard"},next:{title:"Stat / Large",permalink:"/wave/docs/examples/stat-large"}},c=[],u={rightToc:c};function s(e){var t=e.components,i=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},u,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Create a stat card displaying a single value."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(404).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, _ = f.next()\nc = page.add('example', ui.small_stat_card(\n    box=f'1 1 1 1',\n    title=fake.cryptocurrency_name(),\n    value=f'${val:.2f}',\n))\npage.save()\n\nwhile True:\n    time.sleep(1)\n    val, _ = f.next()\n    c.value = f'${val:.2f}'\n    page.save()\n")))}s.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return d}));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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=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<o;u++)i[u]=n[u];return r.a.createElement.apply(null,i)}return r.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},404:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/a64331b1.77fcee94.js b/docs/a64331b1.77fcee94.js
deleted file mode 100644
index 7e2272e85c..0000000000
--- a/docs/a64331b1.77fcee94.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[147],{201:function(e,a,t){"use strict";t.r(a),t.d(a,"frontMatter",(function(){return c})),t.d(a,"metadata",(function(){return p})),t.d(a,"rightToc",(function(){return i})),t.d(a,"default",(function(){return b}));var n=t(2),r=t(6),o=(t(0),t(290)),c={title:"Pages"},p={unversionedId:"pages",id:"pages",isDocsHomePage:!1,title:"Pages",description:"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.",source:"@site/docs/pages.md",slug:"/pages",permalink:"/wave/docs/pages",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/pages.md",version:"current",sidebar:"someSidebar",previous:{title:"Wave Apps",permalink:"/wave/docs/apps"},next:{title:"Layout",permalink:"/wave/docs/layout"}},i=[],l={rightToc:i};function b(e){var a=e.components,t=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,t,{components:a,mdxType:"MDXLayout"}),Object(o.b)("p",null,"The Wave server stores and manages content. Content is stored in a page cache, called a ",Object(o.b)("em",{parentName:"p"},"site"),". A Wave server contains exactly one site. A site holds a collection of ",Object(o.b)("em",{parentName:"p"},"pages"),". A page is composed of ",Object(o.b)("em",{parentName:"p"},"cards"),". Cards hold content and ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/buffers"}),"data buffers"),"."),Object(o.b)("p",null,"To reference a site from within a Wave script, import ",Object(o.b)("inlineCode",{parentName:"p"},"site"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site\n")),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"site")," is a dictionary-like object. "),Object(o.b)("p",null,"To reference the current site from within a Wave app, use ",Object(o.b)("inlineCode",{parentName:"p"},"q.site"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"async def serve(q: Q):\n    site = q.site\n")),Object(o.b)("p",null,"To reference a page hosted at ",Object(o.b)("inlineCode",{parentName:"p"},"/foo"),", use ",Object(o.b)("inlineCode",{parentName:"p"},"site['/foo']"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"page = site['/foo']\n")),Object(o.b)("p",null,"To reference the current page in a Wave app, use ",Object(o.b)("inlineCode",{parentName:"p"},"q.page"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"async def serve(q: Q):\n    page = q.page\n")),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"page")," is also a dictionary-like object. To reference a card named ",Object(o.b)("inlineCode",{parentName:"p"},"foo"),", use ",Object(o.b)("inlineCode",{parentName:"p"},"page['foo']"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"card = page['foo']\n")),Object(o.b)("p",null,"There are two ways to add a card to a page."),Object(o.b)("p",null,"The first way is to assign a new card to ",Object(o.b)("inlineCode",{parentName:"p"},"page['foo']"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"page['foo'] = card\n")),Object(o.b)("p",null,"The second way is to use ",Object(o.b)("inlineCode",{parentName:"p"},"page.add()"),". This is useful when you want to add a card to a page and obtain a reference to the new card."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"card = page.add('foo', card)\n")),Object(o.b)("p",null,"The following two forms are equivalent. The second form is more concise."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"page['foo'] = ui.form_card(...)\ncard = page['foo']\n")),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"card = page.add('foo', ui.form_card(...)\n")),Object(o.b)("p",null,"To delete a card named ",Object(o.b)("inlineCode",{parentName:"p"},"foo")," from a page, use ",Object(o.b)("inlineCode",{parentName:"p"},"del page['foo']"),":"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"del page['foo']\n")),Object(o.b)("p",null,"Assigning a card to ",Object(o.b)("inlineCode",{parentName:"p"},"page['foo']")," replaces any previously assigned card named ",Object(o.b)("inlineCode",{parentName:"p"},"foo"),". Therefore, the following two forms are equivalent. The second form is more concise, hence preferred."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"page['foo'] = card1\ndel page['foo']\npage['foo'] = card2\n")),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"page['foo'] = card1\npage['foo'] = card2\n")),Object(o.b)("p",null,"To save a page from within a Wave script, use ",Object(o.b)("inlineCode",{parentName:"p"},"page.save()"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"page.save()\n")),Object(o.b)("p",null,"To save the active page from within a Wave app, use ",Object(o.b)("inlineCode",{parentName:"p"},"q.page.save()"),". "),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"async def serve(q: Q):\n    await q.page.save()\n")),Object(o.b)("div",{className:"admonition admonition-caution alert alert--warning"},Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}),Object(o.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})))),"caution")),Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},Object(o.b)("inlineCode",{parentName:"p"},"q.page.save()")," is an ",Object(o.b)("inlineCode",{parentName:"p"},"async")," function, so you must ",Object(o.b)("inlineCode",{parentName:"p"},"await")," while calling it."))),Object(o.b)("p",null,"You don't need to explicitly create a new page. A page is automatically created on save if it doesn't exist."),Object(o.b)("p",null,"To delete the page hosted at ",Object(o.b)("inlineCode",{parentName:"p"},"/foo"),", use ",Object(o.b)("inlineCode",{parentName:"p"},"page.drop()")," or ",Object(o.b)("inlineCode",{parentName:"p"},"del site['/foo']"),". The following three forms are equivalent."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"page = site['/foo']\npage.drop()\n")),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"site['/foo'].drop()\n")),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"del site['/foo'] \n")),Object(o.b)("p",null,"Deleting a page automatically drops all cards associated with that page. Conversely, to delete all cards from a page, simply delete the page."),Object(o.b)("p",null,"To clear all cards in the active page from within a Wave app, use ",Object(o.b)("inlineCode",{parentName:"p"},"q.page.drop()"),":"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"async def serve(q: Q):\n    await q.page.drop()\n")))}b.isMDXComponent=!0},290:function(e,a,t){"use strict";t.d(a,"a",(function(){return s})),t.d(a,"b",(function(){return m}));var n=t(0),r=t.n(n);function o(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function c(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),t.push.apply(t,n)}return t}function p(e){for(var a=1;a<arguments.length;a++){var t=null!=arguments[a]?arguments[a]:{};a%2?c(Object(t),!0).forEach((function(a){o(e,a,t[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(t,a))}))}return e}function i(e,a){if(null==e)return{};var t,n,r=function(e,a){if(null==e)return{};var t,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],a.indexOf(t)>=0||(r[t]=e[t]);return r}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],a.indexOf(t)>=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<o;l++)c[l]=t[l];return r.a.createElement.apply(null,c)}return r.a.createElement.apply(null,t)}u.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/a64331b1.a104ef64.js b/docs/a64331b1.a104ef64.js
new file mode 100644
index 0000000000..9fb46d6033
--- /dev/null
+++ b/docs/a64331b1.a104ef64.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[149],{203:function(e,a,t){"use strict";t.r(a),t.d(a,"frontMatter",(function(){return c})),t.d(a,"metadata",(function(){return p})),t.d(a,"rightToc",(function(){return i})),t.d(a,"default",(function(){return b}));var n=t(2),r=t(6),o=(t(0),t(292)),c={title:"Pages"},p={unversionedId:"pages",id:"pages",isDocsHomePage:!1,title:"Pages",description:"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.",source:"@site/docs/pages.md",slug:"/pages",permalink:"/wave/docs/pages",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/pages.md",version:"current",sidebar:"someSidebar",previous:{title:"Wave Apps",permalink:"/wave/docs/apps"},next:{title:"Layout",permalink:"/wave/docs/layout"}},i=[],l={rightToc:i};function b(e){var a=e.components,t=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,t,{components:a,mdxType:"MDXLayout"}),Object(o.b)("p",null,"The Wave server stores and manages content. Content is stored in a page cache, called a ",Object(o.b)("em",{parentName:"p"},"site"),". A Wave server contains exactly one site. A site holds a collection of ",Object(o.b)("em",{parentName:"p"},"pages"),". A page is composed of ",Object(o.b)("em",{parentName:"p"},"cards"),". Cards hold content and ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/buffers"}),"data buffers"),"."),Object(o.b)("p",null,"To reference a site from within a Wave script, import ",Object(o.b)("inlineCode",{parentName:"p"},"site"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site\n")),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"site")," is a dictionary-like object."),Object(o.b)("p",null,"To reference the current site from within a Wave app, use ",Object(o.b)("inlineCode",{parentName:"p"},"q.site"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"async def serve(q: Q):\n    site = q.site\n")),Object(o.b)("p",null,"To reference a page hosted at ",Object(o.b)("inlineCode",{parentName:"p"},"/foo"),", use ",Object(o.b)("inlineCode",{parentName:"p"},"site['/foo']"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"page = site['/foo']\n")),Object(o.b)("p",null,"To reference the current page in a Wave app, use ",Object(o.b)("inlineCode",{parentName:"p"},"q.page"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"async def serve(q: Q):\n    page = q.page\n")),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"page")," is also a dictionary-like object. To reference a card named ",Object(o.b)("inlineCode",{parentName:"p"},"foo"),", use ",Object(o.b)("inlineCode",{parentName:"p"},"page['foo']"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"card = page['foo']\n")),Object(o.b)("p",null,"There are two ways to add a card to a page."),Object(o.b)("p",null,"The first way is to assign a new card to ",Object(o.b)("inlineCode",{parentName:"p"},"page['foo']"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"page['foo'] = card\n")),Object(o.b)("p",null,"The second way is to use ",Object(o.b)("inlineCode",{parentName:"p"},"page.add()"),". This is useful when you want to add a card to a page and obtain a reference to the new card."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"card = page.add('foo', card)\n")),Object(o.b)("p",null,"The following two forms are equivalent. The second form is more concise."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"page['foo'] = ui.form_card(...)\ncard = page['foo']\n")),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"card = page.add('foo', ui.form_card(...)\n")),Object(o.b)("p",null,"To delete a card named ",Object(o.b)("inlineCode",{parentName:"p"},"foo")," from a page, use ",Object(o.b)("inlineCode",{parentName:"p"},"del page['foo']"),":"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"del page['foo']\n")),Object(o.b)("p",null,"Assigning a card to ",Object(o.b)("inlineCode",{parentName:"p"},"page['foo']")," replaces any previously assigned card named ",Object(o.b)("inlineCode",{parentName:"p"},"foo"),". Therefore, the following two forms are equivalent. The second form is more concise, hence preferred."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"page['foo'] = card1\ndel page['foo']\npage['foo'] = card2\n")),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"page['foo'] = card1\npage['foo'] = card2\n")),Object(o.b)("p",null,"To save a page from within a Wave script, use ",Object(o.b)("inlineCode",{parentName:"p"},"page.save()"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"page.save()\n")),Object(o.b)("p",null,"To save the active page from within a Wave app, use ",Object(o.b)("inlineCode",{parentName:"p"},"q.page.save()"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"async def serve(q: Q):\n    await q.page.save()\n")),Object(o.b)("div",{className:"admonition admonition-caution alert alert--warning"},Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}),Object(o.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})))),"caution")),Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},Object(o.b)("inlineCode",{parentName:"p"},"q.page.save()")," is an ",Object(o.b)("inlineCode",{parentName:"p"},"async")," function, so you must ",Object(o.b)("inlineCode",{parentName:"p"},"await")," while calling it."))),Object(o.b)("p",null,"You don't need to explicitly create a new page. A page is automatically created on save if it doesn't exist."),Object(o.b)("p",null,"To delete the page hosted at ",Object(o.b)("inlineCode",{parentName:"p"},"/foo"),", use ",Object(o.b)("inlineCode",{parentName:"p"},"page.drop()")," or ",Object(o.b)("inlineCode",{parentName:"p"},"del site['/foo']"),". The following three forms are equivalent."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"page = site['/foo']\npage.drop()\n")),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"site['/foo'].drop()\n")),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"del site['/foo']\n")),Object(o.b)("p",null,"Deleting a page automatically drops all cards associated with that page. Conversely, to delete all cards from a page, simply delete the page."),Object(o.b)("p",null,"To clear all cards in the active page from within a Wave app, use ",Object(o.b)("inlineCode",{parentName:"p"},"q.page.drop()"),":"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"async def serve(q: Q):\n    await q.page.drop()\n")),Object(o.b)("p",null,"To update other (non-app) pages from within an app, use ",Object(o.b)("inlineCode",{parentName:"p"},"AsyncSite"),":"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, AsyncSite\n\nsite = AsyncSite()\n\nasync def serve(q: Q):\n    page = site['/foo']\n    page['bar'] = card\n    await page.save()\n")))}b.isMDXComponent=!0},292:function(e,a,t){"use strict";t.d(a,"a",(function(){return s})),t.d(a,"b",(function(){return u}));var n=t(0),r=t.n(n);function o(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function c(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),t.push.apply(t,n)}return t}function p(e){for(var a=1;a<arguments.length;a++){var t=null!=arguments[a]?arguments[a]:{};a%2?c(Object(t),!0).forEach((function(a){o(e,a,t[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(t,a))}))}return e}function i(e,a){if(null==e)return{};var t,n,r=function(e,a){if(null==e)return{};var t,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],a.indexOf(t)>=0||(r[t]=e[t]);return r}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],a.indexOf(t)>=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)}},m=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),m=n,u=s["".concat(c,".").concat(m)]||s[m]||d[m]||o;return t?r.a.createElement(u,p(p({ref:a},l),{},{components:t})):r.a.createElement(u,p({ref:a},l))}));function u(e,a){var t=arguments,n=a&&a.mdxType;if("string"==typeof e||n){var o=t.length,c=new Array(o);c[0]=m;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<o;l++)c[l]=t[l];return r.a.createElement.apply(null,c)}return r.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/a6aa9e1f.0e25f4a4.js b/docs/a6aa9e1f.29345e50.js
similarity index 85%
rename from docs/a6aa9e1f.0e25f4a4.js
rename to docs/a6aa9e1f.29345e50.js
index 3318bc5265..40f1abfc36 100644
--- a/docs/a6aa9e1f.0e25f4a4.js
+++ b/docs/a6aa9e1f.29345e50.js
@@ -1 +1 @@
-(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
+(window.webpackJsonp=window.webpackJsonp||[]).push([[150],{290:function(a,e,t){"use strict";t.r(e);var n=t(0),i=t.n(n),l=t(293),c=t(297),r=t(369),m=t(295);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.194c0040.js b/docs/a814b970.9c5f6aec.js
similarity index 92%
rename from docs/a814b970.194c0040.js
rename to docs/a814b970.9c5f6aec.js
index 4978fc21ad..ebd41b2250 100644
--- a/docs/a814b970.194c0040.js
+++ b/docs/a814b970.9c5f6aec.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(290)),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(400).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},290: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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=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<a;l++)p[l]=n[l];return o.a.createElement.apply(null,p)}return o.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},400:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-polygon-cef10aff7abe01503bac3e360a6ece1c.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[151],{204: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(292)),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(405).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},292: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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=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<a;l++)p[l]=n[l];return o.a.createElement.apply(null,p)}return o.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},405:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-polygon-cef10aff7abe01503bac3e360a6ece1c.png"}}]);
\ No newline at end of file
diff --git a/docs/a8b2a833.17d49b14.js b/docs/a8b2a833.806669fa.js
similarity index 97%
rename from docs/a8b2a833.17d49b14.js
rename to docs/a8b2a833.806669fa.js
index b262df5fb5..b100d0c5bc 100644
--- a/docs/a8b2a833.17d49b14.js
+++ b/docs/a8b2a833.806669fa.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[150],{203:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return a})),r.d(t,"metadata",(function(){return l})),r.d(t,"rightToc",(function(){return d})),r.d(t,"default",(function(){return p}));var o=r(2),n=r(6),i=(r(0),r(290)),a={title:"Hello World!"},l={unversionedId:"examples/hello-world",id:"examples/hello-world",isDocsHomePage:!1,title:"Hello World!",description:"A simple example to get you started with Q.",source:"@site/docs/examples/hello-world.md",slug:"/examples/hello-world",permalink:"/wave/docs/examples/hello-world",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/hello-world.md",version:"current",sidebar:"someSidebar",previous:{title:"Gallery",permalink:"/wave/docs/examples"},next:{title:"To-do List App",permalink:"/wave/docs/examples/todo"}},d=[],c={rightToc:d};function p(e){var t=e.components,a=Object(n.a)(e,["components"]);return Object(i.b)("wrapper",Object(o.a)({},c,a,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"A simple example to get you started with Q."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+r(401).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(o.a)({parentName:"pre"},{className:"language-py"}),"# Import `Site` and the `ui` module from the `h2o_wave` package\nfrom h2o_wave import site, ui\n\n# Get the web page at route '/demo'.\n# If you're running this example on your local machine,\n# this page will refer to http://localhost:55555/demo.\npage = site['/demo']\n\n# Add a Markdown card named `hello` to the page.\npage['hello'] = ui.markdown_card(\n    box='1 1 2 2',\n    title='Hello World!',\n    content='And now for something completely different!',\n)\n\n# Finally, sync the page to send our changes to the server.\npage.save()\n")))}p.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return s})),r.d(t,"b",(function(){return H}));var o=r(0),n=r.n(o);function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function d(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=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<i;c++)a[c]=r[c];return n.a.createElement.apply(null,a)}return n.a.createElement.apply(null,r)}b.displayName="MDXCreateElement"},401:function(e,t,r){"use strict";r.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[152],{205:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return a})),r.d(t,"metadata",(function(){return l})),r.d(t,"rightToc",(function(){return d})),r.d(t,"default",(function(){return p}));var o=r(2),n=r(6),i=(r(0),r(292)),a={title:"Hello World!"},l={unversionedId:"examples/hello-world",id:"examples/hello-world",isDocsHomePage:!1,title:"Hello World!",description:"A simple example to get you started with Q.",source:"@site/docs/examples/hello-world.md",slug:"/examples/hello-world",permalink:"/wave/docs/examples/hello-world",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/hello-world.md",version:"current",sidebar:"someSidebar",previous:{title:"Gallery",permalink:"/wave/docs/examples"},next:{title:"To-do List App",permalink:"/wave/docs/examples/todo"}},d=[],c={rightToc:d};function p(e){var t=e.components,a=Object(n.a)(e,["components"]);return Object(i.b)("wrapper",Object(o.a)({},c,a,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"A simple example to get you started with Q."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+r(406).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(o.a)({parentName:"pre"},{className:"language-py"}),"# Import `Site` and the `ui` module from the `h2o_wave` package\nfrom h2o_wave import site, ui\n\n# Get the web page at route '/demo'.\n# If you're running this example on your local machine,\n# this page will refer to http://localhost:55555/demo.\npage = site['/demo']\n\n# Add a Markdown card named `hello` to the page.\npage['hello'] = ui.markdown_card(\n    box='1 1 2 2',\n    title='Hello World!',\n    content='And now for something completely different!',\n)\n\n# Finally, sync the page to send our changes to the server.\npage.save()\n")))}p.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return s})),r.d(t,"b",(function(){return H}));var o=r(0),n=r.n(o);function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function d(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=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<i;c++)a[c]=r[c];return n.a.createElement.apply(null,a)}return n.a.createElement.apply(null,r)}b.displayName="MDXCreateElement"},406:function(e,t,r){"use strict";r.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/a8bb5334.c4ff7379.js b/docs/a8bb5334.b90d4b57.js
similarity index 96%
rename from docs/a8bb5334.c4ff7379.js
rename to docs/a8bb5334.b90d4b57.js
index dc0f7a8b6d..99267ce5ad 100644
--- a/docs/a8bb5334.c4ff7379.js
+++ b/docs/a8bb5334.b90d4b57.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[151],{204: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 s})),r.d(t,"default",(function(){return l}));var n=r(2),a=r(6),o=(r(0),r(290)),i={title:"Introduction",slug:"/guide"},c={unversionedId:"guide",id:"guide",isDocsHomePage:!1,title:"Introduction",description:"Welcome to the H2O Wave Guide! If you prefer to learn concepts step by step, you've come to the right place.",source:"@site/docs/guide.md",slug:"/guide",permalink:"/wave/docs/guide",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/guide.md",version:"current",sidebar:"someSidebar",previous:{title:"Tutorial: Todo List",permalink:"/wave/docs/tutorial-todo"},next:{title:"Architecture",permalink:"/wave/docs/architecture"}},s=[{value:"Before you start",id:"before-you-start",children:[]},{value:"Who is this for?",id:"who-is-this-for",children:[]}],u={rightToc:s};function l(e){var t=e.components,r=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},u,r,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Welcome to the H2O Wave Guide! If you prefer to learn concepts step by step, you've come to the right place. "),Object(o.b)("div",{className:"admonition admonition-info alert alert--info"},Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(o.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(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"If you haven't already, it's worthwhile reading the ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/getting-started"}),"Getting Started")," page, which offers a 5-minute overview of what H2O Wave is all about."))),Object(o.b)("h2",{id:"before-you-start"},"Before you start"),Object(o.b)("p",null,"If you prefer to learn by doing, ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/tutorial-hello"}),"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. "),Object(o.b)("h2",{id:"who-is-this-for"},"Who is this for?"),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"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."))}l.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return p})),r.d(t,"b",(function(){return b}));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 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 c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function s(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;u++)i[u]=r[u];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[153],{206: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 s})),r.d(t,"default",(function(){return l}));var n=r(2),a=r(6),o=(r(0),r(292)),i={title:"Introduction",slug:"/guide"},c={unversionedId:"guide",id:"guide",isDocsHomePage:!1,title:"Introduction",description:"Welcome to the H2O Wave Guide! If you prefer to learn concepts step by step, you've come to the right place.",source:"@site/docs/guide.md",slug:"/guide",permalink:"/wave/docs/guide",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/guide.md",version:"current",sidebar:"someSidebar",previous:{title:"Tutorial: Todo List",permalink:"/wave/docs/tutorial-todo"},next:{title:"Architecture",permalink:"/wave/docs/architecture"}},s=[{value:"Before you start",id:"before-you-start",children:[]},{value:"Who is this for?",id:"who-is-this-for",children:[]}],u={rightToc:s};function l(e){var t=e.components,r=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},u,r,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Welcome to the H2O Wave Guide! If you prefer to learn concepts step by step, you've come to the right place. "),Object(o.b)("div",{className:"admonition admonition-info alert alert--info"},Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(o.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(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"If you haven't already, it's worthwhile reading the ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/getting-started"}),"Getting Started")," page, which offers a 5-minute overview of what H2O Wave is all about."))),Object(o.b)("h2",{id:"before-you-start"},"Before you start"),Object(o.b)("p",null,"If you prefer to learn by doing, ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/tutorial-hello"}),"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. "),Object(o.b)("h2",{id:"who-is-this-for"},"Who is this for?"),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"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."))}l.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return p})),r.d(t,"b",(function(){return b}));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 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 c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function s(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;u++)i[u]=r[u];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/a8dc7269.26196dce.js b/docs/a8dc7269.14bf2db2.js
similarity index 92%
rename from docs/a8dc7269.26196dce.js
rename to docs/a8dc7269.14bf2db2.js
index b340d1e8bf..c3db39e58e 100644
--- a/docs/a8dc7269.26196dce.js
+++ b/docs/a8dc7269.14bf2db2.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[152],{205: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 c})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(290)),i={title:"Plot / Interval / Range"},l={unversionedId:"examples/plot-interval-range",id:"examples/plot-interval-range",isDocsHomePage:!1,title:"Plot / Interval / Range",description:"Make a column plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.",source:"@site/docs/examples/plot-interval-range.md",slug:"/examples/plot-interval-range",permalink:"/wave/docs/examples/plot-interval-range",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-range.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Labels",permalink:"/wave/docs/examples/plot-interval-labels"},next:{title:"Plot / Interval / Range / Transpose",permalink:"/wave/docs/examples/plot-interval-range-transpose"}},c=[],p={rightToc:c};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a column plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(402).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import random\n\nfrom synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 20\nf = FakeCategoricalSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Interval, range',\n    data=data('product low high', n),\n    plot=ui.plot([ui.mark(type='interval', x='=product', y0='=low', y='=high')])\n))\nv.data = [(c, x - random.randint(3, 10), x + random.randint(3, 10)) for c, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},290: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 l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},402:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-interval-range-38b09db44df660cf127c051bee921b70.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[154],{207: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 c})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(292)),i={title:"Plot / Interval / Range"},l={unversionedId:"examples/plot-interval-range",id:"examples/plot-interval-range",isDocsHomePage:!1,title:"Plot / Interval / Range",description:"Make a column plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.",source:"@site/docs/examples/plot-interval-range.md",slug:"/examples/plot-interval-range",permalink:"/wave/docs/examples/plot-interval-range",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-range.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Labels",permalink:"/wave/docs/examples/plot-interval-labels"},next:{title:"Plot / Interval / Range / Transpose",permalink:"/wave/docs/examples/plot-interval-range-transpose"}},c=[],p={rightToc:c};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a column plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(407).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import random\n\nfrom synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 20\nf = FakeCategoricalSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Interval, range',\n    data=data('product low high', n),\n    plot=ui.plot([ui.mark(type='interval', x='=product', y0='=low', y='=high')])\n))\nv.data = [(c, x - random.randint(3, 10), x + random.randint(3, 10)) for c, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},292: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 l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},407:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-interval-range-38b09db44df660cf127c051bee921b70.png"}}]);
\ No newline at end of file
diff --git a/docs/a9331674.e034ee0a.js b/docs/a9331674.965a7491.js
similarity index 97%
rename from docs/a9331674.e034ee0a.js
rename to docs/a9331674.965a7491.js
index a02f2b0782..2d62d69444 100644
--- a/docs/a9331674.e034ee0a.js
+++ b/docs/a9331674.965a7491.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[153],{206: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(290)),i={title:"Form / Template"},l={unversionedId:"examples/form-template",id:"examples/form-template",isDocsHomePage:!1,title:"Form / Template",description:"Use a template component to render dynamic content using a HTML template.",source:"@site/docs/examples/form-template.md",slug:"/examples/form-template",permalink:"/wave/docs/examples/form-template",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/form-template.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Menu",permalink:"/wave/docs/examples/form-menu"},next:{title:"Form / Markup",permalink:"/wave/docs/examples/form-markup"}},p=[],u={rightToc:p};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},u,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use a template component to render dynamic content using a HTML template."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(403).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, pack, ui\n\npage = site['/demo']\npage.drop()\n\nmenu = '''\n<ol>\n{{#each dishes}}\n<li><strong>{{name}}</strong> costs {{price}}</li>\n{{/each}}\n</ol\n'''\n\nc = page.add('template_example', ui.form_card(\n    box=f'1 1 2 2',\n    items=[\n        ui.template(\n            content=menu,\n            data=pack(dict(dishes=[\n                dict(name='Spam', price='$2.00'),\n                dict(name='Ham', price='$3.45'),\n                dict(name='Eggs', price='$1.75'),\n            ]))\n        )\n    ]))\npage.save()\n")))}s.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return c})),n.d(t,"b",(function(){return v}));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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;u++)i[u]=n[u];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},403:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[155],{208: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(292)),i={title:"Form / Template"},l={unversionedId:"examples/form-template",id:"examples/form-template",isDocsHomePage:!1,title:"Form / Template",description:"Use a template component to render dynamic content using a HTML template.",source:"@site/docs/examples/form-template.md",slug:"/examples/form-template",permalink:"/wave/docs/examples/form-template",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/form-template.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Menu",permalink:"/wave/docs/examples/form-menu"},next:{title:"Form / Markup",permalink:"/wave/docs/examples/form-markup"}},p=[],u={rightToc:p};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},u,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use a template component to render dynamic content using a HTML template."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(408).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, pack, ui\n\npage = site['/demo']\npage.drop()\n\nmenu = '''\n<ol>\n{{#each dishes}}\n<li><strong>{{name}}</strong> costs {{price}}</li>\n{{/each}}\n</ol\n'''\n\nc = page.add('template_example', ui.form_card(\n    box=f'1 1 2 2',\n    items=[\n        ui.template(\n            content=menu,\n            data=pack(dict(dishes=[\n                dict(name='Spam', price='$2.00'),\n                dict(name='Ham', price='$3.45'),\n                dict(name='Eggs', price='$1.75'),\n            ]))\n        )\n    ]))\npage.save()\n")))}s.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return c})),n.d(t,"b",(function(){return v}));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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;u++)i[u]=n[u];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},408:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/aa7f648d.9fcf7f62.js b/docs/aa7f648d.e4f6c194.js
similarity index 92%
rename from docs/aa7f648d.9fcf7f62.js
rename to docs/aa7f648d.e4f6c194.js
index 47e85f0e32..b38ed1379c 100644
--- a/docs/aa7f648d.9fcf7f62.js
+++ b/docs/aa7f648d.e4f6c194.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[154],{207: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 c})),n.d(t,"default",(function(){return u}));var r=n(2),a=n(6),o=(n(0),n(290)),i={title:"Plot / Interval / Annotation"},l={unversionedId:"examples/plot-interval-annotation",id:"examples/plot-interval-annotation",isDocsHomePage:!1,title:"Plot / Interval / Annotation",description:"Add annotations to a column plot.",source:"@site/docs/examples/plot-interval-annotation.md",slug:"/examples/plot-interval-annotation",permalink:"/wave/docs/examples/plot-interval-annotation",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-annotation.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Helix",permalink:"/wave/docs/examples/plot-interval-helix"},next:{title:"Plot / Interval / Annotation / Transpose",permalink:"/wave/docs/examples/plot-interval-annotation-transpose"}},c=[],p={rightToc:c};function u(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Add annotations to a column plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(404).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 20\nf = FakeCategoricalSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Categorical-Numeric',\n    data=data('product price', n),\n    plot=ui.plot([\n        ui.mark(type='interval', x='=product', y='=price', y_min=0, y_max=100),\n        ui.mark(x='C10', y=80, label='point'),\n        ui.mark(x='C13', label='vertical line'),\n        ui.mark(y=40, label='horizontal line'),\n        ui.mark(x='C6', x0='C3', label='vertical region'),\n        ui.mark(y=70, y0=60, label='horizontal region')\n    ])\n))\nv.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}u.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},404:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-interval-annotation-ad30e4c2b779c452d7ab7d805f037c43.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[156],{209: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 c})),n.d(t,"default",(function(){return u}));var r=n(2),a=n(6),o=(n(0),n(292)),i={title:"Plot / Interval / Annotation"},l={unversionedId:"examples/plot-interval-annotation",id:"examples/plot-interval-annotation",isDocsHomePage:!1,title:"Plot / Interval / Annotation",description:"Add annotations to a column plot.",source:"@site/docs/examples/plot-interval-annotation.md",slug:"/examples/plot-interval-annotation",permalink:"/wave/docs/examples/plot-interval-annotation",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-annotation.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Helix",permalink:"/wave/docs/examples/plot-interval-helix"},next:{title:"Plot / Interval / Annotation / Transpose",permalink:"/wave/docs/examples/plot-interval-annotation-transpose"}},c=[],p={rightToc:c};function u(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Add annotations to a column plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(409).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 20\nf = FakeCategoricalSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Categorical-Numeric',\n    data=data('product price', n),\n    plot=ui.plot([\n        ui.mark(type='interval', x='=product', y='=price', y_min=0, y_max=100),\n        ui.mark(x='C10', y=80, label='point'),\n        ui.mark(x='C13', label='vertical line'),\n        ui.mark(y=40, label='horizontal line'),\n        ui.mark(x='C6', x0='C3', label='vertical region'),\n        ui.mark(y=70, y0=60, label='horizontal region')\n    ])\n))\nv.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}u.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},409:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-interval-annotation-ad30e4c2b779c452d7ab7d805f037c43.png"}}]);
\ No newline at end of file
diff --git a/docs/aa9ca283.5215397c.js b/docs/aa9ca283.5215397c.js
deleted file mode 100644
index 0db8ed8a65..0000000000
--- a/docs/aa9ca283.5215397c.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[155],{208:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return a})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return s}));var o=n(2),r=n(6),l=(n(0),n(290)),a={title:"Plot / Plotly"},i={unversionedId:"examples/plot-plotly",id:"examples/plot-plotly",isDocsHomePage:!1,title:"Plot / Plotly",description:"Use plotly to create plots. Also demonstrates how to provide live control over plots.",source:"@site/docs/examples/plot-plotly.md",slug:"/examples/plot-plotly",permalink:"/wave/docs/examples/plot-plotly",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-plotly.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Matplotlib",permalink:"/wave/docs/examples/plot-matplotlib"},next:{title:"Plot / D3.js",permalink:"/wave/docs/examples/plot-d3"}},p=[],c={rightToc:p};function s(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(l.b)("wrapper",Object(o.a)({},c,a,{components:t,mdxType:"MDXLayout"}),Object(l.b)("p",null,"Use plotly to create plots. Also demonstrates how to provide live control over plots."),Object(l.b)("div",{className:"cover",style:{backgroundImage:"url("+n(405).default+")"}}),Object(l.b)("pre",null,Object(l.b)("code",Object(o.a)({parentName:"pre"},{className:"language-py"}),"import numpy as np\nfrom plotly import graph_objects as go\nfrom plotly import io as pio\n\nfrom h2o_wave import ui, listen, Q\n\nnp.random.seed(19680801)\n\n\nasync def serve(q: Q):\n    if not q.client.initialized:  # First visit\n        q.client.initialized = True\n        q.client.points = 25\n        q.client.plotly_controls = False\n\n        q.page['controls'] = ui.form_card(\n            box='1 1 4 2',\n            items=[\n                ui.slider(name='points', label='Points', min=5, max=50, step=1, value=q.client.points, trigger=True),\n                ui.toggle(name='plotly_controls', label='Plotly Controls', trigger=True),\n            ]\n        )\n        q.page['plot'] = ui.frame_card(box='1 3 4 5', title='', content='')\n\n    if q.args.points:\n        q.client.points = q.args.points\n\n    if q.args.plotly_controls is not None:\n        q.client.plotly_controls = q.args.plotly_controls\n\n    n = q.client.points\n\n    # Create plot with plotly\n    fig = go.Figure(data=go.Scatter(\n        x=np.random.rand(n),\n        y=np.random.rand(n),\n        mode='markers',\n        marker=dict(size=(8 * np.random.rand(n)) ** 2,\n                    color=np.random.rand(n)),\n        opacity=0.8,\n    ))\n    _ = fig.update_layout(\n        width=4 * 134 - 10,\n        height=5 * 76 - 10,\n        margin=dict(l=10, r=10, t=10, b=10),\n        paper_bgcolor='rgb(255, 255, 255)',\n        plot_bgcolor='rgb(255, 255, 255)',\n    )\n    config = {'scrollZoom': q.client.plotly_controls,\n              'showLink': q.client.plotly_controls,\n              'displayModeBar': q.client.plotly_controls}\n    html = pio.to_html(fig, validate=False, include_plotlyjs='cdn', config=config)\n\n    q.page['plot'].content = html\n\n    # Save page\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}s.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return f}));var o=n(0),r=n.n(o);function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},l=Object.keys(e);for(o=0;o<l.length;o++)n=l[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)n=l[o],t.indexOf(n)>=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<l;c++)a[c]=n[c];return r.a.createElement.apply(null,a)}return r.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},405:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-plotly-3b71042a87f940cd5002711c65e34e54.png"}}]);
\ No newline at end of file
diff --git a/docs/aa9ca283.79c8caef.js b/docs/aa9ca283.79c8caef.js
new file mode 100644
index 0000000000..30d8adba7e
--- /dev/null
+++ b/docs/aa9ca283.79c8caef.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[157],{210:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return a})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return s}));var o=n(2),r=n(6),l=(n(0),n(292)),a={title:"Plot / Plotly"},i={unversionedId:"examples/plot-plotly",id:"examples/plot-plotly",isDocsHomePage:!1,title:"Plot / Plotly",description:"Use plotly to create plots. Also demonstrates how to provide live control over plots.",source:"@site/docs/examples/plot-plotly.md",slug:"/examples/plot-plotly",permalink:"/wave/docs/examples/plot-plotly",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-plotly.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Matplotlib",permalink:"/wave/docs/examples/plot-matplotlib"},next:{title:"Plot / D3.js",permalink:"/wave/docs/examples/plot-d3"}},p=[],c={rightToc:p};function s(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(l.b)("wrapper",Object(o.a)({},c,a,{components:t,mdxType:"MDXLayout"}),Object(l.b)("p",null,"Use plotly to create plots. Also demonstrates how to provide live control over plots."),Object(l.b)("div",{className:"cover",style:{backgroundImage:"url("+n(410).default+")"}}),Object(l.b)("pre",null,Object(l.b)("code",Object(o.a)({parentName:"pre"},{className:"language-py"}),"import numpy as np\nfrom plotly import graph_objects as go\nfrom plotly import io as pio\n\nfrom h2o_wave import ui, main, app, Q\n\nnp.random.seed(19680801)\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if not q.client.initialized:  # First visit\n        q.client.initialized = True\n        q.client.points = 25\n        q.client.plotly_controls = False\n\n        q.page['controls'] = ui.form_card(\n            box='1 1 4 2',\n            items=[\n                ui.slider(name='points', label='Points', min=5, max=50, step=1, value=q.client.points, trigger=True),\n                ui.toggle(name='plotly_controls', label='Plotly Controls', trigger=True),\n            ]\n        )\n        q.page['plot'] = ui.frame_card(box='1 3 4 5', title='', content='')\n\n    if q.args.points:\n        q.client.points = q.args.points\n\n    if q.args.plotly_controls is not None:\n        q.client.plotly_controls = q.args.plotly_controls\n\n    n = q.client.points\n\n    # Create plot with plotly\n    fig = go.Figure(data=go.Scatter(\n        x=np.random.rand(n),\n        y=np.random.rand(n),\n        mode='markers',\n        marker=dict(size=(8 * np.random.rand(n)) ** 2,\n                    color=np.random.rand(n)),\n        opacity=0.8,\n    ))\n    _ = fig.update_layout(\n        width=4 * 134 - 10,\n        height=5 * 76 - 10,\n        margin=dict(l=10, r=10, t=10, b=10),\n        paper_bgcolor='rgb(255, 255, 255)',\n        plot_bgcolor='rgb(255, 255, 255)',\n    )\n    config = {'scrollZoom': q.client.plotly_controls,\n              'showLink': q.client.plotly_controls,\n              'displayModeBar': q.client.plotly_controls}\n    html = pio.to_html(fig, validate=False, include_plotlyjs='cdn', config=config)\n\n    q.page['plot'].content = html\n\n    # Save page\n    await q.page.save()\n")))}s.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return f}));var o=n(0),r=n.n(o);function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){l(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},l=Object.keys(e);for(o=0;o<l.length;o++)n=l[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)n=l[o],t.indexOf(n)>=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<l;c++)a[c]=n[c];return r.a.createElement.apply(null,a)}return r.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},410:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-plotly-3b71042a87f940cd5002711c65e34e54.png"}}]);
\ No newline at end of file
diff --git a/docs/ac27f894.267ecdf7.js b/docs/ac27f894.25e9c805.js
similarity index 90%
rename from docs/ac27f894.267ecdf7.js
rename to docs/ac27f894.25e9c805.js
index fdcecfb21a..fcd8fed3d8 100644
--- a/docs/ac27f894.267ecdf7.js
+++ b/docs/ac27f894.25e9c805.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[156],{209:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return p})),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(290)),i={title:"Plot / Interval / Transpose"},p={unversionedId:"examples/plot-interval-transpose",id:"examples/plot-interval-transpose",isDocsHomePage:!1,title:"Plot / Interval / Transpose",description:"Make a bar plot.",source:"@site/docs/examples/plot-interval-transpose.md",slug:"/examples/plot-interval-transpose",permalink:"/wave/docs/examples/plot-interval-transpose",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-transpose.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval",permalink:"/wave/docs/examples/plot-interval"},next:{title:"Plot / Interval / Groups",permalink:"/wave/docs/examples/plot-interval-groups"}},l=[],c={rightToc:l};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},c,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a bar plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(406).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 20\nf = FakeCategoricalSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Interval',\n    data=data('product price', n),\n    plot=ui.plot([ui.mark(type='interval', x='=price', y='=product', y_min=0)])\n))\nv.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return f}));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 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 p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;c++)i[c]=r[c];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},406:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-interval-transpose-d7705a1125bbded7646d335b2bfba02d.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[158],{211:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return p})),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(292)),i={title:"Plot / Interval / Transpose"},p={unversionedId:"examples/plot-interval-transpose",id:"examples/plot-interval-transpose",isDocsHomePage:!1,title:"Plot / Interval / Transpose",description:"Make a bar plot.",source:"@site/docs/examples/plot-interval-transpose.md",slug:"/examples/plot-interval-transpose",permalink:"/wave/docs/examples/plot-interval-transpose",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-transpose.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval",permalink:"/wave/docs/examples/plot-interval"},next:{title:"Plot / Interval / Groups",permalink:"/wave/docs/examples/plot-interval-groups"}},l=[],c={rightToc:l};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},c,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a bar plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(411).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 20\nf = FakeCategoricalSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Interval',\n    data=data('product price', n),\n    plot=ui.plot([ui.mark(type='interval', x='=price', y='=product', y_min=0)])\n))\nv.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return f}));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 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 p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;c++)i[c]=r[c];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},411:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-interval-transpose-d7705a1125bbded7646d335b2bfba02d.png"}}]);
\ No newline at end of file
diff --git a/docs/af172acd.e4c7f550.js b/docs/af172acd.e4c7f550.js
deleted file mode 100644
index 054ad237dd..0000000000
--- a/docs/af172acd.e4c7f550.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[157],{210:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return l})),r.d(t,"metadata",(function(){return c})),r.d(t,"rightToc",(function(){return u})),r.d(t,"default",(function(){return p}));var n=r(2),o=r(6),a=(r(0),r(290)),l={slug:"welcome",title:"Welcome",author:"Yangshun Tay",author_title:"Front End Engineer @ Facebook",author_url:"https://github.com/yangshun",author_image_url:"https://avatars0.githubusercontent.com/u/1315101?s=400&v=4",tags:["facebook","hello","docusaurus"]},c={permalink:"/wave/blog/welcome",editUrl:"https://github.com/facebook/docusaurus/edit/master/website/blog/blog/2019-05-30-welcome.md",source:"@site/blog/2019-05-30-welcome.md",description:"Blog features are powered by the blog plugin. Simply add files to the blog directory. It supports tags as well!",date:"2019-05-30T00:00:00.000Z",tags:[{label:"facebook",permalink:"/wave/blog/tags/facebook"},{label:"hello",permalink:"/wave/blog/tags/hello"},{label:"docusaurus",permalink:"/wave/blog/tags/docusaurus"}],title:"Welcome",readingTime:.175,truncated:!1,nextItem:{title:"Hello",permalink:"/wave/blog/hello-world"}},u=[],i={rightToc:u};function p(e){var t=e.components,r=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},i,r,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Blog features are powered by the blog plugin. Simply add files to the ",Object(a.b)("inlineCode",{parentName:"p"},"blog")," directory. It supports tags as well!"),Object(a.b)("p",null,"Delete the whole directory if you don't want the blog features. As simple as that!"))}p.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return s})),r.d(t,"b",(function(){return m}));var n=r(0),o=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 l(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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function u(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=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<a;i++)l[i]=r[i];return o.a.createElement.apply(null,l)}return o.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/assets/images/tour-968f92ad1236ec66ad30ed613ba324db.png b/docs/assets/images/tour-968f92ad1236ec66ad30ed613ba324db.png
new file mode 100644
index 0000000000000000000000000000000000000000..3be2258af97507db183feff6d5a8b50bf42ee1c2
GIT binary patch
literal 165401
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
OFMVBOokA^#uzv$6IpD(p

literal 0
HcmV?d00001

diff --git a/docs/assets/medias/livereload-c8ab0ea721f98fca13da5bc0b1ab26e1.mp4 b/docs/assets/medias/livereload-c8ab0ea721f98fca13da5bc0b1ab26e1.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..d222743a9e2de15b6a9ab02ee0cf5524130e2804
GIT binary patch
literal 1293296
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%0AnABCmSd@w$>Oad2_wCQjviCCf0*pIKJN9?lN9
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%0DKy(PJU@`Yxsi
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%0Ds?eaKkST@;QBm3&P{l1(tXO~#xyq1wNt
zbHGoJK1n7%yVrC3bZPOfa7AJNh*Pi9aYlv7#9Y}+FzNgKm2U^K>?#HfD`hubxu%8=
zCau1@K_DU#nqc*nMS>8&a-0T-rMH{o|NpGB&VMVDBUqP-{Y!&JGKJv^t2~A6K*;lE
z#wfV!s!!|$CA6?G)S<ND0`IXVD{dXy>8fU%;n_)@&CsoT&ru%4+J?dKS<VCA{Y6BM
z=lr1GCRZvn2@e;@EwmyOdf4ANI-9Y6*crg%0BC!m2k^gGXJ)1OUcgN-1p{Z?np9Zx
zO9B_+&wbjH_|J`i4qR#4Qv6f>`bW)ho(CA0W%Xx|>8wo3nh@9)uwomm_X3<gCIH7h
zd}JcY-BXkOvD2N?Ni*_vB_%J3J>csDf3c#PM2qdz97T;TzE${p9ehqioWeHKU3s<x
z6dir4>4+C-R!umMx3`g~eo%RdB5WXZ|L*i8{BV>d1~uY)_W83lj4kT)hvxoqXC%e!
zj@i0;aFbZ<*Yepbb-@MGdlfvP$?VXsK4NU4V7Z&YTyYp?61~YJFl|p~TkV7zj!LIa
z6e4M_?PNVMsF=WFiFmh}!Ive)-0dA->4mApuX_yt&P}I*{lqc^(fsb)WC$a0n`w&#
zPna$iSio?iok$@wC!l=tqg`U>Tfc0v3*}~M?O4OCCI0}8>#LM+M>YD-ZGz&F2{ijU
z=XY~-F02Q2N}bl*){aeyemOpm!3mg?Il8znPm?_>@sD4nM({-+2%K*!H?>py&co_Y
z#Kc=HAlzggOx{{IkUA5faG~^QJ-u$BI~A#FU9GL}yULLaP5kuBvU2}4_lL<GB;!YR
zcB^m!zA?Mqm0(8A>F-unZyvg`tbxifnKR;gL?|a+;<0zoK{|_bo&to}ltZ(1S5+<k
zklX+Oyu3?;f(hRHucA=2#zrO{zTBHq1W~^^xb*3~6Ts7wXAmS?RAVh6F!Fy91*Cv-
z=mc(|zZvf*5WKNY^lPL@g21zH2;}N}dJ<X%oZG${2a4z&DclWbJW~ufQnY&^3_ayx
zLhP`2@7)4e1qCj)_uq22E~C>u8imx`%y`04a9&f2iNC(Cy04FZ)3D;5N7DrokJ7K;
zgWhT)teV}X=3YuS$WLdg$r`gRMvCyRi|1L6TrKMSRLPgYgm44duCw6M{v0UiQHf=3
zW6MY#@S=Kd@tpAm>7{@!O0sZjgqs=oyQ_2YgjN3m2sla*foZ*D@dYv-xFbZhi0DTg
zrZg0N)g7dCFen7j9H}v>(FpiwgS9<UUd%|g$W+&#Av1P9Ea>?=r@ms73Eao92_bRa
zm=YJZ2cWWd@fLzO)O=m?Eag#<&M<sBo>R$C)ee~53;0sena@91B2E~U0&Z(?U|>s3
z5q~VecWU@aX>Mcq0M8sEzq2W)nVlW~=Cc$i77@u#St>J+=H$^<H?#@0J?O!2GV~Y{
zwAh7g`W$Kk<fkAHM!PU5YguOvOC!XF$h~{z{CsoUf&sMW34TCCiOAFop_Qfn3tAT$
zw$phtXI&0rq<C!2*LTM3%7Ct;GrfYZ)fL=8I^2N@>pUM-DGi#VQx`?TwUYXgTmS}w
zA8WM3$-%_Wo08hZw_|BbEK$hs6)_UqRs2GJAuqr_8v#2{_xnA!4Fnh^fPgtCg?Jkd
z4j)95SZ3@5TCqaP(dbC_(Jvnuz|XN$UE6dXcxKQJX{)Bu%`<ENhGh4<VtZ0ZVTI@z
zj8fyDkqvc8ZzH_p3oGw~XWvdw(W3WaYv^yQ&A=4~nP|kvNDF`fdwm)@3Egwua>t|j
zw<cV^RPHvMc<cn2#IOVrxx6d<Q$ioi$$ko!Vlv{KFX(CDf+bWa9KfZS?b4yDoa$s0
zdP29Es0{%ADg2JxeDOvf?x|}a++m$;AMDosjBLpH<tMCxS&u}GKq6)NbPpvp2_^8`
zn$mh)trb=-6@za2KOqf->Jl8M_2x4bULb3j>GeJQUWM^nslg|1fg()v_~_E&U}BuF
zKZL_55{2h}=z^waMe=v-jLCYI&l$0%A{nzbGUP}*pvNAn$Nb|IUfmm7CBKRimrJG`
zd7JY+%HD3lcyat6q|HUC4coboEv}3}=v}(yt&6QK7S|eX<M%}U`9*JOQ%WVNfFE`C
z|JL?MWft)hbRa6Vj=X6D>b~!Kz1CVHYS1PUO*?QMv2>X*Yp67(!zzuZ-P^<M6!lim
z<rdptd=zRq5~;L%ERr2E1*;&|dxHEFD_bw{IE=i0kV^7PWjQ-E_QShh8~+2x*D0@(
z%I1kaMZOg|f^;#H2jDWsi+oqB`uUH)*~$Dyz>ji)6iBbYepa1MH4ZnjQ9wk=a8@3?
zphElFs+^hXfN5pP4xcOZK+pn+L2R8>)oHJdG6^{Ye6IgH$rDDd(iKbI7^uFm{IRlI
z>R9imFJs4P&r=JDD+_*P;UQ025OW!*dOga|+}F4L&fWEH<ZBzl%gs^q7h()bNUhbe
z%)EB(;}$91?)Q_A{2CtgYq2}0H3)+hMyRtaF7~b@Xk-npT;$R$H>CUW44bZ>p?s$C
ze6VqTde=3I_{=l&?(yChri=vME`6Q$A=1@Yrt<{VQWG&?F}jd^FsPh`mDCS#P6&>{
zx^JHlr!A1?4s>dmo-RTia_hY45u=}`nFdynoLULaJl_tfQEBRzuXru*E0e`K_|<B=
z*<*$8e7kon$*A-;RwPW35OYoU9E&Mo33G+m+SCx~|MMTtLg?op@wG}bY<&(}geTmc
z5)L(1N!Kk}v1QV)P7W#1R&5hR<v=CBa{#!s3&HsAcPRa<AzOMPE6**hl9GHp!VIEA
z$nvj!IJ|PrAKm7Ff3h+RhCh~fxVF=e60x86z_BR*+LWesgV&^M(ZMaDpo(9;%@T^c
zk*i1O$(;Se`aGl9pOW}Wn3Db-bnkd+Bc(Ze5t`o+io>J1qI5R)EoM!?GqRfd2LkDb
zK*C4+B#SnaK}+5!v!FN)9Q>|c^RK#UObxY*;7d}UQXfchnS?tqkc^X4rD$4e8TbyP
zcfqZpGVyxaVVtCxBO_g(hDU>7YoP_FWqwSb@=34yeRrcYa+w8b%?bKuz}}YslUai*
z4U>D3zk1gygRh0wwWg-=c_foER$@iz&Z5{TTXH6qmGLZ+MKsrmhm!RALKCw3d3z$m
zPZgP2oXOMi3hD%8^iue-^L9!#`~lva8K+MPw9E0h6Z&7EKPlP>>y?)R<_LVIy;00i
zw$ZJmg*q~n9<<AI1TDeHM4ih5`#04fvkd3L=K7mig1XaD+?%dQ3&&47G{lg@jhMU3
zc<{zuKS4OBk=xv+4jTEs-b}~nhLMJF1|BC(WJpLlw`hslD4Y(99ae=<(6A4Ely~!u
zl40*-S-v{#XBL1_G!i3yyOx6HbCD~KlE20DD4ZBp85Z8<^E?pg9K<WVnkj10kRT3u
z9<Na790e^jJXE3u`J4Xdi%v&oW9W{nw8cER{Oo?#g@!+29^HlW0(yH07tYle@atX$
z%vpPn9hCJK!Yzro_TeBNKjZ`Qt%udd({LJLUvG+6g!lb}#cbQNwPEbq9b_hNk0IF|
z%I{HUYkZ<puAr>Ap%>&5RZOW8h2Xbok`72dxHO9S<2_+w1O@WFyGr8}W|?FkeV4X=
zB*p+fmY<XXZC-&jTj4qDdO|s$)|)ok(;O`+&+$47-Z^{QYCgVDTF)Je23m^~ejidW
zUz!Iu-P(G6;LhJ#=xF)Kgqwef+>E)o-;JhnVMyr!LaK<VnsaP(K#E={4`E4CBzX*Q
zoMQi)+JAbC>ufx>UxY?_J5xZTinrgg1{yiju02G6wW;MN?4?`i$+E1!AF36;gwi?N
z#jR`>do)WAoXA&qL>+J<jCjznG<BOP{aWckH-nCGh!d(WIyK|ap#B3Rz~BSP-PDgG
zldVjdx$H0;vdGa52FvdaIW$5m04=i=Fl#D0Q70?Q`P>fub(>@`TreJ1)UETwCzEI}
zS<rP{-($59j&F`paY~lLYT!5pp!l?{M5Ke?X8O6-??(R09<XN!&BIC#!jZ{zM7WI;
zjV)p^{@y{x$`IU<?ck5Y@|QP?x>kVuBRxNnz1V|*ZeU?VRxtw~%Ou63I0~FBorsJ6
z!gR?w0M(nUcv2y2&38b>HGghlm|@o_R`g?T)*VXkn%jb2P<m$pc@{1MF4U3;1u@1`
zC=1fQZXU)sd>xffp92cuG|Cbe*u@%ZN`<NIVcuX6RW>eagPGvFy}2msXa6gKUUarN
zj(F*R^F7!AzIusIg)(LVH;7d+Gv(^zF6nFIp82omM+$1`7W_E=gHwffcpGQAw+BF<
zE{>Mp+|q-&J1frB(WTz#1T<L*#|mk9P0$JBXhgl?YhVDDP;$|d9S_^QZBhT(BS1mt
z_Lk&*`p@D|l|`QcYgnNJBPg_2oOqvm6&v()$YO}OgB9FlMAV58u0ZofF($N7JhRZw
z0l8+xJZngzt)1@yj<XIuCL30arB}u;XO+ZWnG|oHBa_=-k>70*i+77SUOj(EVL&Af
z{d*$e9}F`PO8lG&std&(V^u(9aZw;QP@wMwg3wu;>SO;810qs(M3g~fX+s8W^&t4z
z3;u-|46Socd7vD{jKo-3;;N<E2n0wEMC8Phppf<uPb9@i==Zq35X%4y#_0lK%OGqR
zrS1iee&z{QBmnSm`=b4PGnM94Mp7sPMR-+G<_Q^&BYcPpFcFc$4X9(otrD<72B`QS
z<#e>n)(|GsY{@xGOv~D`Uks*UZQ+3~5VL7x9!+(F<xtH<AQvBu3xt07L@Zz%XJx0!
zTOsbTM@l-`_4e?KFUxQ-Qylw%wUdDU!YBTZcS?q(uRN}%97jS_LI8<?5%!sM-)?R}
zoeh|;FN*!9Wt-78_d$hxEr7Uov~)GEOMDEMKC(7hT*v~<lP1~h3QM~mrwB8^A)QGf
z^Ms`XE_-cHBoQ^^J}TP)X8IvtJwz&Ie|XR2Rzf{=P?%V4OW>TRW<*773*KdtcrH%G
zGa;RN{w}^Y@GT?L3w&M(I$!T|R;$C;agw1)L>$;O+E2gon`s}Q5V+!o7-brpkz&zz
z29r7{^y29e2e7jFa4)oB0C<oA!mt<s@ktlHkHuwYVsxJ2&-^p-TD^9K!&%6ekLZ<q
zG#HNxd|a^<jdL9NP*bL@ogV-5qY8SrczRRg><EAHGR-rq?n2b9VaWHsTdVV#qz5&u
zIn5M9z!gR}_c<Wk;nSa_QlLe$9R<+n8eJ|EqYPi=W=J}r@|lNrc?X4opXOQUeub&l
z$ViJ=gY`GCOrD17uN<y=m67bu)RNq7ije7!{RU1hYc@B~b3KY0Mv*X&p1QPAKm<nT
z30Qa9>T(H)QM{ozd22R9#AC)EjZ~gnon9zNe59+~kz?RU^L7-4px8+oim9q#t=E4@
z%Bk75A^^*mrqWhj*w}9o5IYy5T^tGX6)v%G7bU(@ttzTUyCyP|ij^%ly8q~adNFts
zC1GT{6_}1ACDQ6@;U?P4pK0=g6u*kg<+7pLke*?LMq%PDQ1&tjj2sAWmIoX=-3f*D
zNJ#7`g+$7^W8h7+s9ewY)mGPhO?1sn;N4y8YW_eWx7H<^DcqO%ITF+BQHP0PB2kUp
ziLW6c^68MV<tU${IoOkp46%Mu7gbV+T&%3@Y~faVSLw{Ke$(m8P0kj@^s<|>Aj!MG
zo^iUW@|cNS{uYvLuUf&rx@?Hj*lYFfW%xvpAspy%@6YBr^)!=}4V5+LsM^njGHPCv
z44JosB~NMQRH;m4psM;LLW@~7U;i7z!Ndi`qmO?yeZu7%6jMqyciZN)t`{Q6u!~K!
z?xi-^SwasZdK6ysbeA9hW85~<hRiC+f)Ec)O(xwwS6%W<#DPzJ1!SEiTRjyaU-e0R
zucS{4Krbsco{A<@H0-4W1on9GR4q?S*Rz@XR(s^lqsu6;Gz!`g`ep-FJ7wWDv*mEw
zv-^jMN091Ti4CJ20;mVfmf%G<WD(QrTt1SNfna@lj5$g+JU7$Xd27r$-j;R3Z>aNB
z{k?>(8;J;e<6&7s7%_H&(7!^d-Y@F)SDQf?NanBy7>#JY3{(`%2wM*9j+6@z!(Bo@
z%GmD*El;dB1O4vRFPzSBfc*h7lAeSlZcpTMPivFcDG!x&E9Cl<!HLJpv>FN{kj6>^
z3c^<@Gh}_NYA8W?We8sWdgY?lP9$X3hr#r=INq6V?O(++;W@Mk)1{BG9IadjxTNIK
z$1M9;(8Ow5X)*ugd@}M7lKAgcL|381VZJ^r6#eFjuwMb`2UWZu>0L4*fE|k%UOM`j
zwOORgUO9;k<})4a!hZXsQqU9D>*ot-_=Qs0B}ZZ*WZHK^ad-&veis40ixO@nXh0FF
zK)2q#ohJV0RF-2zfF!KFlhZYo%vd?$#F>c;C-Hx0`&K~CrX51*-@lV07702NXTDMQ
z$^2u#u~Pn%NABeTPowHI@-~Lf^=y1i4IroS$7Jya%*hsD6J|1{y4PKKnNBD2=nquP
zV6f6CK!tRD=)A07!iHt-B^aa3IH1-=34qxRD?2w>bn@&3(0y2>y_dzFtCVl<RDH=8
zpP$Qm9W#51Og_{xogASIo3Y|tSU$C&EMe>s6cE_A(mjP7TK$}UUL`wOA==8*0Ha+}
zLt}6_84~^U5Tma$AKBO*{*$UtL}y)X@Nu|dkWr>tttDxMK)2jc=jx3eY-J$*!d_zi
z*}r>)uW$-Vv-ou#q9AJETyh}Pl|8l#aiBSK5J=xKGF2amW|Qzvw34kcwHdJ90n9HW
z&G%(r34QYI&Zwl@^^W7jcDamO!iQ(wJ#D!_GmaOYHYXBmkowfh0W*Y9UJ}Utg?+LS
z`{?go8HT?}R8t?Q#*b@#2X=J@I>lbJi2+UzoAQ7D{>dwu`>9rw{h+j`x2U(4U*>~8
zWmm4Hq0;HSh9fnt7#dk_;{p53n=0I~B|C~+tNjz+&fNDyy%Jd4L3AoKDa*-Pul%J6
zUw3IN2gHr)K=~1;^@wxIjh4VZBQXCF)}?;y_Zx6%C{(mreepJUPUFYn=HISl)5^3R
zi=m}4><8oNTkmz%{O=fCTfBpY1~k^Vlt~9kVc@_Std96<T~=a-CJY3P6DS3`Rp$&)
zq!=F@&)!)=lQ~|NmF$4M`TRpM#mLPF<A!9UT>Z<7t@KVIc==eicf_oKo!Iot^=>k=
ze`<PI_7*828%bY8?ib;wRoqP739QJo_W+zdS`g#ZxdV?)y$vg27j5c$=PFSrot+NE
z{|wLyz(O%wwO^dt+&rsXH;tZ_6#dm6Ri}lw6u<(HZ^|0e!LB>T%-d9f6Ny&b`ORJ_
z<4;h(rd?N4{2hg=%oD1AsV5TPEC`|mUKjY*^3`BY79_akGf_IWgC*^AcSjZbSPdJ<
zlASLV(8gR=m5!^82fp5Ak)ApV>g4&y{-TP@hLTBSFXq9PjrRLd?vI`R6Z_ELp?!PL
z==PIkuec`S-ur2*ZHZD89C?JGKu4?F!$MZgW${KB(C9SofS0vM{PEn{3na$evF0h)
zE$71so67>)BN-vXd7BX1JnpT~3#j*>cUsVp_Yc`AsBT8+9<<zIY?=qD);my=1x#3?
zLtWn_X+K6GCI`$`vLzh7dZcl8;F;{f>PA4p+D*6y7hifvYAAHwrYc9wEReR&Fp{`9
zFzM@v{BND7C3-P6^UHVg;%rGBLN3YYh+^3(=pIcg)Z7~;cz-QfD#>#R>m$!o`cz~x
z+C1Q7o|f8SEw<=At<O@73Sdt=RCtK61a;<T|B?&FjOb}FWBRRFmB%1sG_Oz_XGW#Q
z*wa|qS>9;LcFnh5y@?7har15aO85Yq+>Y=E?$gq%XvM2%%A)B~JwJ$ImTIp8vWRe8
zvQDU?^=_#P*xFw|fPTnP_Ye!V07f^*On<>Y{}3!}=c{&OR-VsY9?nM-8dwdDaQ_v-
z5NXOM^O#T0q^IYz8iG{-0oL`^+bvQ?fymw%8qDDkP~3MxZd$bdnk=~|v-Wybk#lzj
zJ!tc0q858xn>9mneEmTQ&eb@K_LaXY_$BzSBsSe!a^H(mf<5zO=SHJxgN%c5gg5R5
z`DD__Y=I)j2IY_d+>h(d(EW?<QCAkgCgLLPGibX9a*SQg+^!|<Nw+A^%i}`>FxRp(
zOG=^a9j&`E-3de_Z(@ThFiw5apIIYBfJSNG?;{i8I(G~yU&_1%Wa_xCtjq6@lCoa4
zyulX2YLygG7-EnoYMqebULN5OG&<%n=?RUrFf8`x!xJyv_TZ9N<z$m8XJBpGm}X@Q
zWOlfBz1q|_9m;kY!t+HMR_YF~4k*rLS5l&F17GLNbxRup$lr3YY}NULRI4Na?r_a9
zNb}TLbDZlKPnb*;3~_B{__CJuXq)x)5Pxt@q3>{Lo;BBZjab#hJ~^&DrwbB&$k0Do
z_}J_EUu}lo)C(VT-#5owmYiigTspL}{Ls1~upXIS#JD*aED)?aQpksaP%`*MqT!Mf
z5$Yu)@R(=>t%f^7d>+F~KdaB`Z$X5T1<ZaiA3yz+NR=p39uNYdQ(Lo;eP9ugp|gDH
zgG`~V3a;MBAGA<g>oiqnkO-4Z8vX?<BV!g!eqy{yC}_Ke7F_IkThh4rW~PeNW`fl8
zaF`%@2_>nls+p)}z;OAR*QSQlpjoj~*a9wXp<eXl_TJKAJQMPYDN=V1z#dP@;n;bH
zS4()JvFopu4S;HTIyy6h4!vf1fK+~-{u;fMJ`nWK<>VU5nNWo_y@G1LdI~nCJ|r3D
z(Ii5`n4=3xiBG#8&bP-If!}E`fkKiyml=mK_i$ol%}A740Xhw#@q^Qkqe%q?%dNO}
z8Ji60A_2VfaOK;@mXXHt!94t~vSp8L6k}G07rWr*t0zDT1SBfQ3AE*na{Oj(qCvY5
z1cDMI%h;uGy#DVc)VC2o%rG@K3HZY=HX}KWT#?2Wx%2Mxcp#{h(|KUKT>Q&!TcAAO
zmzOu{E<ISb)fjKo0d)p20Kc5Is7`dZ@bPNA1k+80Fn#Bk7y5iqZZY#puV?FLEy|mG
z?Uoik;zo;k^>oL~#gQ?KyJLEpT|3C@rv?l)2-I^p{<aMMCKCPaE8)mQ;l}|1lHgbR
z;qR@~l^+BBL6HOynigKeU$~D+`+TBDN3zH9R6lv!O#iLy^e~a!o{h#<dKY|IV^~YG
z#;ba>Su0Vsh2a!hF2#>k`?60>2+Y*%SM!&ZEPGUV>f6_)nMBL9VV}S|4n)%<EQ;sv
zgJ4#+<+Fiqb@moU=S=uiqEtr{)(iC&J;45(*Yuu4h#4kHQ|HO6zUP0ig?&^ww<4Hi
zFgP{Af#lrNYFES%Yl0W1m7t;=B~?zxNO$WI>@j(6(I5;bc5tytX?ROx4g^;izi7hB
z|4WaB|8Q`08q@4UWJcz-iKf&8Je_`(^~g3fptPE!?}{)s<g%ShdF1Qc*(n6s^`Hh(
zCK<3w;ga`~<Ly~hc6Ky&oYpk8HAbz@h7fTFGg|QW?rD6jTV0h$Kwq$6E&tr8vV>Uo
zt3zW)2qQc;^mr6=)Tv^>ao#aRM}Z~Ji?wQ?yk;58JU_T)RZHvLtJd`*Eo*cp{C&AS
zhiTZ+Z-(yz1ROkA;pJr6ZeLA+PwvRkBj9tZZ#swGdx;xHFU2Ux-yuxkkUfN{WwN()
z+3iP}YfL0EG=#M8-8)4HF&^{4=Q=EW(zy<{J~eE4tAc9Zku8c}vC|&JuAuthjpm)?
zbNHi5Vru(l?LrOAR`j{YRwUepavLJz;8GUy_V=OYNJ3=0pFd|&XYD51pxp2pfd5x4
zmlG~_97w*Ti;UkUy5h0H)q%>C=;L2dz|RzWi@4~rZDskjCgt+-lhHX4L6Qk@;_oYh
zV-uIw-JxdxY7?bWx5$NVf+zVa{D{uVkw~O|G|KQSA;oA_>^*|1NB?>}5|<48r%(an
znEokNm#YF*<om-Gpa~pikgYeI$LMRV$!c8%<1)Abxxer<|Gj9{f3i1CwD6xoeyQ>)
zM?+ycS73jFM3=t|^+l-q34`KcA6V{vo_YzM432$&<*e~OZz;oLK!TR05@E?$Ny;cT
z?trH)UnD2`@{y|D*|-j+l$&!-81(|CsAg%}Y)$F?9{d+RrztZ-CE0$>SrS0v0a8+8
z%b3k-^#T#Wg(j?r3%x{Zhw2iWe+pP~v#n70yf{n6+<0imzpCvRL4;WX!T2Kk+j{Az
zBqbOD2TPq;H&+t8+CzEoQWu4b34&}KlMYX5btRt^J>A(75N~{Tjq(r~LS4PPlINe_
zw{wDKlbgzCLi-$h<9o|5u-(jTPHF8RBv<)LsEj!q*8>n4H+a+_^<1+c<XsE?_gHMh
zjODL%96JPA1g0<WQ9n+Y1Bi2#S}y5G=vUWey-3l+4<r}=?WS2~&O#R^Iuk)KbG_r`
zS^JK0Nb%lE#Qk3<=mFwQW4M-G&4n6DJ9YrS9}fFIS%+cHx&%HoFKKpr!6gZQ%l|Ni
zK7i-5+qvo`Po=)aAzj>~um;}tE!IW$KRU46j6gKUkeAcQiJ`TFP$%DEbI{CEHkS|o
zMD9E#9sQIvw(YR{vm-hJ#QM)fbTVJr-+8<9q#p|_h?`IL%Pp`B*nj^T#!w)iJaJv4
z=u=8;X;B>249w{}?fw6yZ2VIfo^^_~5aAvf+lRlxfP5UelEnK8t7y)^?ov;pGq_<y
zJfsU<R;E`H)3-2AXD^U8g!@Qqt&~G+7cN4O1-vTI+4mznK_p8OlnZVU_q3ai!L8xp
z<Osv`c>HT(XUd!jusJj1nw*;Pb9~k0fW~WUw9TbK=Jqcxs5lQu_pnBXYDH>&&}Kbn
zI6M%?r!t@Qqzpi7jDE}e#?1o=Z7x4Dz!qbXdD)Decq^o^r$2Y4u)Dw1x1-CEOC}vE
zX)pi+LB_1b49DoySXmidWVP+W0NpXJFow(1X-;*RD#0`uR|&fZn*GuB_|Um|m`<~I
zgoh4#8#?ll2Lh>hfJ7cn7cj>F81fozRLSYkLfTgIT=qWwl1+W2>i<ae5??#nL(gfM
zt#Ff4?0%e!Z}l)n5o+R+PxDa<PU)gICwG5l)tVVQuuz-8!#jz+8Ri}uP)m1ExdCk7
zck>!W@>w<YEINyezF09PdSAhchLjAgBQAJs5c`S`oJxj=hGff~p7w`{xw@AA%DMz8
zX`2U!U^MOrY%dY3Ip&0VVsi1BB(KC<$9S!$oqQ|duN$Tc3>9<XI|nZ8*-6qW`z`4;
zv;963hL6=9LdvMri&J}P4{nvKvgmsaBV)Z?^FaG7Wzb+?_lyM@rWN~@w?$o#S+uAQ
zgp$#BDmcdU4c!+!;```evId0Iu#j60f}dAgfSuE^<7yTPw85-EMx=w?S^l2O_sTdA
zA7+z*i)hkU+!hMl3)qG<XL*5)Jny_JZnXK=QPo(rOFqv!@0^~{b1Lr>1?KU6pxvW%
zb$Y9l+rm-xqNIwFuZE}9WjACcoqxOQ{}+Wr#>#LGFXmWGSnzhnSwl|pqs-%III{{h
zziV<fv^PiMFOC0C3WT|uvk>wCjQfnh(~e#V6^+E%jQdoDse*);uKgRV8+OGZ%K_vg
z9t{k3XDfOfxbDI5YyJb20X@F}Da3Do2(pl99R`f{y$5GDlfE7_bJbQmlF2enR#qwr
z&Po&MK?{|Vl!ClZKegN;J6Bb3vGOD6E4=Z=fcd%}*pIx|>QM;GB4nro^Q36~T~Po7
zp1doiG;w*)ly#h>1G;)UbSHF-y2~nTc86o^Il`DtE9_d<#~B3l#V8E<0i@OFi-V1|
zrls-b{{!>Q;U!QiA)kNqW|Ly|++o-)_OQsZNfm%BXKs>(inPYaD7ddZ9>r%bx_y|U
ze><^)Y%q&91i5PWyD;3IYJwOOI#PM5&p%lXV?RjVp0!_T(+8c6zpAx9U5`$QIW>0;
zMT?`Ck?|)2RE!Mz|No1-4mT|g_tzu3zC50aTF4?jPcyFeJ09aCfNUiFuAV|W&6J5M
zYVGcdq>IH06T@;qMU>&0;y!q{xEIT!P6z7r=UCZ$E_q4XH;vUlsFaa0c<sR#1Tz{x
zubI8sDnMmSBHc!JZmX7XjIP(FR+90E0m!8p(K00-iE7W;2(zs_CLQCBsv`Q9%-U}D
zL8n|qW_J<ZXET~x8l00I-ES#*>Sqs%Q|5=DJ#mirT!Ut4>I!Ff85>7PNL(I&kN^eH
zIGHE<hJ_+T|FG9?6S$7rxxTY(ML}b||4iSXr1fnv|1Ti*)VlR0c}ov>3sQ0Zu6nvr
zP&<_Ur^(SySD2@pU^)D`W|Yz4=knMjE9Sg3JQ~+?Dxr~g)Gj995APz#Bmnr*7W1>B
zD1pT|Ae^dn39k5^gA-?9C+?d6ycYdiuaJ{EgS6yPYrw}I?-;mWG-N!<xaBwLhbtfO
znq>H(R~gpjo|4VKwRnA4<?eylGILFsYV+rdxoi)HJ^RJf`6FiJMUbB3Dt}v|WD<(q
zkQ(JC6mzNEp2d-?CUhzfFCw^Wu^<UfNpkggVaq7+lREw?OCjwm{QJY9P$iZfaG2wr
z@4%@QM-$Jau|M^6s?N;8lkQ3PIqnJvURs;L^9wT~zOX0a16@bVm%{gDvT+?~TH_*P
ziwI4}$o`Xq*)@-Ls?s}xXIy|76e)j#+yr+Z=SF2>^p4hiYHX6p>K%$ilVV|Ewwx8+
zr#WA1;ZZ<dW@h+2#7Nrjc&Q*n00nbV|D%-pLunWzPZ%E1o>YjjQ!4#ED;jAouZ(jw
z%_Bm4{wye)S6KgAn9z-6b0rEIwrt~Qlwlyb4d!SK|FpsR=I`!KSpyuk!T*1PwyfK@
zoFsOcIhO!pK%KutR=$<shch*R`%4{T>+9hTEe}nliOQ~P0_CU_XHpb$(y!`#D;5?m
zy#px=lScwYt5EKxpYpBT%mF=sFyF*&R&n%O*i3Uysa7U<D5jpEIL$-ogdtpJ+IiBU
zZ<LGTgcd+j#aD*c+2Q7m8VA)Ga{NfC!lJ$g;M6lJ&C6%zu73DX_qc?p6q&3~0*P^(
z%1Zi$sxsI8tD!sF-?zLe{<ov4#o@FyN0DH{)l~4R6aKgcyWU2buZ}fri#10&g^!#?
zOx*TvcQnG1Y3-hRGR<Wl<(>`t9b<Pomhr?CtL_OiS{~^>1Ue-iPXHlwFoZ|tmN%gM
zy@99z*{qdIM)2yMr5l)q@!dP%*`&$(<jX_Io1H71rp1sHQqK&h0PN$8TsBp*QP<9c
z(warPBYwI*)*@bOE~TmAb*G=|*lD+N5`TZ8RtF*XllA>*C~1rD25#v8dQ#{`74Dfn
zE<2Re8AOK1Iss$C?X`0(ZIRsKDR0m?lGBsgJGkJ188Rws*c3`Lamv}<U{C-5cwYX$
zaa`INlH5#X|LJ~Myb}XBe+twxI3lCb-y~7#W<LBoP9w%$U%ncp;PJl9$5{~$Mu^lx
zXHv8{<jx3Mrg-+-;|3ZoSsL=M74F93ZLn01*wFd<Yt}Y&yNn0*W0Bwi&;U9Nksp9x
z;g_Qb?>(_`EW|~3^=I;m6$)qpHZfYJyfqbG#Y>aLG9oWF+Y*${cStdJ0?>hRL(Q+X
zthbT9NbSqb32ilWXa4E41%vCgPBodvb*z1vXJT?FF^C<H$~mFU%sRH{oM^Dm=DW8o
zZVhh)VmwTYcEF_4A{{Hd@?u3V!-#4FuWa22QOmqLMg$Eok|l*`vs*`Sg$I7OGnw)t
zDR@q6mi7E9Dfu}`fW{`XASZQ|bEllPhu|EU{`aprjz8OvwKkmk+yDQ}&**N69T0tw
z95Kp^fPL5~DJk&5h;Gh78oU@yE^1#UaUp!N74}F_hzSa4ggYu6V*5R0vX3n>pid+7
zx~0lo*}%J>^db*f!maUqEpx{zM{hHf9wLs+1A;2GArfoD(V~&t(!W|oPm9vyse`R%
z=Kj+xs#-pg|JM5vT_lb?ZAf>+l6%YOw*bCn5)qG?JxtETG<;OEaLSs+Eb5o3^My*@
zUOd@iY~%`9;Ycw|q0(JU6&G$?Or<2Xzp;Lr0+^rpNpU%)D6_=SOeh&oTV%KnYT%_I
zi8y=eeRBifkr_{v_N74i!%H>p543N|Ju$UFSn`U}CDfN*;Z$WpsYm@HbAAsEaUzKs
z+;mil(YOE~&FPE147+z$hZmV+nG}zL=0LFm-3;JUl0iD<;841%feEuk(2C6rnR|tW
zXf_<NSu0*cv9Wt~WoMMM301dto{mu^zG($HIH1oLDDa~)uM5d_R5EBfT=!3|-uijf
zALv3&Mh=h+m`x?0V4lBKeR85HmYCr-)&_!&I|K*$p!@dfIF+KPJ<Mi~PNRC^!zY=L
zB!)zV-hXA2hapu$<$3+Sjj<+#*E83UI#^qliQ(D)qe$-zT)3DWwINxQbDA%<$XtHG
zs2gz3e?MI2rhq*jUne<cm7svYTj9{u6{cRI2)+KfJbf%`v%jmP)MWdNhO)L>VwIq&
zToEKl4G2mV54zp(**fJP_C>#>-!KN`ms#)WP2tPwW{J%&pEFaZaALaLO}#T6dwm-=
zEq%Wj=U^Z$q&@L=jE#(WxB|X4msk=BE$aWKdE1Gf0=Vi0^F+4~9Z&vRD7vJG7({FZ
z?}gBqtWIFhoS5P@U<FTw4kiJ6HIKj)Xe*Mo%7t_Pc938J>?Vk>-%#AxuNtiB=JGp8
zpKiTJ15ulR-XOVFlH<mXB8@!h@6)6kkNJu6Sl?Uf+5MiMQJWg=`TPJ9&yTq0hDyum
z;nj&^2S5k1xyo}{S>muY3&MD(tf-;NEab_VedcDa(svrW(4FoP$?67kCI**@LlgB~
zOj0Rj#=IxgO!zE5a@6Q{z1z$M9T5#rGf}WeAhp>B6rI3hX`@G`oi?G{HX#*Lvz3T&
zy`n;Y-W6dIaNrGS@HF6urY;P!_3#dDK*^5u`4ZP>dN46v2RvR11bl75WlW42FU67o
zw2nODG{`@zJ|^OrROv(5)v_{&{55R?+A`Aq%#4$bCtv=_**ayYo}tbwrCq-H_bX;q
z|0CC~j)ZXq>@i`Njp^KKqKG6g&MM^vH!gJgepkb82W#9+`d6~nNLJ?%zWl+cN@G`4
zf9`c*Q!;b9v#dGibe{SMyG;!?v}#qeRr;a6us(qlA%WIi^q5i`ha9d~(B+?7g}-5@
zv}QRH(_35KWKo0-Q`?T<1(B>w)xENZga-WY#2h?AS@M)jf@0_z^9f~_u|lKhlqiY7
zDX#%i6;nqYPoz!PM5TH~UKKNQl?BGK$c+7Ht9vX)X&ctu28t5mpW+Uiv#owxT@@@z
zEY3XpFyr~Cq*@tXQ4t-3D>P2)LYf=-?)UBjg)H6$ue@z&>nqTTYbLqdivW)Jk7#!l
zNgpJk_VwP86C-VkiFO{>_}DL1|I2Bzt5YiNid&$z%4fY9{jMY;C}bGDcj6~mBWh3r
zy6;8=P}tC_S~_&hbh3KOa?CJLr-lFj<^$T^$1)=9Pi2SvMC`rC-{O*04$SC}PiW8<
zn0Ps*?;e{D=l`^ZsMTLD0?$aM{a=T?Ah?EL{4LvA{YHEJ1tm*jzl9kYQgS7o57$5U
z+uBKP-X9R&je?7S+09Ni_}VZK|L@>&IP|1uts-91kB`s*Qa7<^g9uAJ3E+~Q%*Gz;
z)_Pw6O9??^?xPyo?@KmAU*$oKoab$ihw@acm=~*fK3TM!G0?dhK54Szdn<$!A@$s?
zWQHDo?KR2iQGwev)p*p%jOaq;`cCO`B=_8;>N-}4=-Qh@jJD|2QFlH$CwFk;R%j1D
z4QJBbXaq8X(4f`yueI`L7#R3*Gr>>Zs2^vEzJVUFwrX~XlWLOcnYby}?T{kMHJojp
z2C_<US)-KAC9&JN%>MnyPKx&w#kN!~eMSxA05XM_B^wXqnK18SZ+zcioD@fMgwe=y
z0XOMh8aCCO#-)P3J&U{jGx`kFot0SXc+6O4^dUfQm0AB30qoSW&-&AicXl35=)e{p
z&v(`6t*6qM_)Y4j9{a~MIZ??d>ZnB#y$ps9Bd9ej<-~weVq%m)Tey75y$k)|RC8`8
zncnMr);X|FVEv1c8ZN@wGCkawcgZt9=6$a_SP<j7!>{`s>AbJWYSMH~Q<aN5bfX7b
zPV6<LEf^D3>bpV6*r`t|=qG<pW5QZ@gxTCPT~1)5uMR3J5<0HUq6|#V&0r$%>2_Gu
zSunzdb;}<qa42tsayuFb`$cM80YQ|4ZxZKm?!+5n7-u>#%CDlPornzo|J_9kfH*?;
zxvD}_W(+X-OE>>byS@F2%25bAOh{~0w%okJy9k+l|G9dII#c+G1tU0KfL%x}%wO@(
zihl1m7*=P_iEgyraMJ+`=GjrO^q{RW+ssRGMN(dki^pCK!a_-aA#f@cjE4y@=835m
z(_VMxViR*{hRp1V7P1uj4Zkuj?k$979-0&t2(o_x!m|ou<8Mm;CcOwYW=d0on$Ba~
z3Vb!DZ}=LveA>jli26@jb36EnB?zRH=v-$mfJW*ZDjxE20`~*>hK$JmB@ZD=Dq3bO
z`r_`^JL}NDHn7?2MK-as(OpYc9CdnO7A6k`zGx0@;bQytCzmg^H-CI3+#u2%t{k^3
z)m)k<;6!+Pqm!KR*KP?Y_TF_t)I69#U&?AY(Y@k+403$h4FCKEW7gb6OOfj8Ve4mo
z;B#c5N$^s_$v!d>o|0Sh0}_wqZ7flwB=X$yMayTMJ=OSlg6sY^2xAvK_aaR=UR;*c
za2Wx8$4s_{hq&PGx`SrYn8dTVpIWYAS(lG$syv-6Eg+&+r7sz9&1|jEqNiYSD&-Dr
z2B$hV^3ezvA~QuW;?JyV)Fgp>Ja_DmDFQ*9Ucys57f%aJ3CzPVY6$>eYuL_5fqn?c
z_0l2as|&~h769uI?5M(JS7nnkd^6*6XEd6lW<nU?I8-edGh65Cudo*iI^^zwgs^)s
z(2mDdDqo;c;QIGuO---5Tf1`xg#>ou+*dOeK+NZAaS8R?IuP}HjEF<p4r%%q!4hv7
z7+yb(|Cg9N!sMds<)zPK_^U2G!y302jjxrHOE&=N>~ry6q_Ev>6)^RX)C6s^#`M>+
z75{n}kFm_|M|01PM1Pp~(kKD#GlpIYvwy?}MT^kHO^oF0rhdtjJ<V4`1xDP?4E$g9
zR70B}h|DrX!6L&IxWQ6gc%bjJER)#o^w-!fR7GF$*Ja5GGPi(QT}UY2;!SuekK}=*
z3(n9ay*^j|LB;f3XJPO0;{3J-#*3dD6BIQ(U=O+eP^8*p6B9d|%A%z>5Gro;&E2}C
z=@fMxl{)FUhnsKVe2=v~<@;OWX=(E>>Z7gZ^=wfw={>d{#{#HV0aPnJ2+J$)Z9kpc
zE2n<$W`ZR?beUda!5Yj3apHehr6as>jXLesH|S*P@uC*m4SWA)B$XRf>crc_#wk%T
z7U{ztZlt1k>$!R85W>C_sWDRwXlihn$hoaux5|iI6&u;fk9XJ{7zvG&G4wtsK+e>2
z46fOJGi@iDtHr>a{FB0$wceJM?T9A@y}15lTMk>DsgRXQ5h9UTdctQ*l2IHg#wLkk
zQDJsuA|Rt$w&3zupCQi4c<wknrG>wURCgpk-_lhbd$K=l@VyFdJqv>naxHNKQhUNA
zOe4v|>5d9&0&?z_gf_K*7jG0XKI)0N1;Yxt<M>WX`6$AqoPpxTxH-#qAs<6fuE<Gq
zxzGXV1)B7A(g@QzDeV<8n7;iYk|Jw*LTg-l)#PX1sz9)2k3Z@)`3LOZ0Ix+XiQ1Up
zGb5```3U~5D4#kvH}4CMo;ys-oh1&!Nghw<YSo~dc+cr#@ME7Dd-)W%nk_~~Ly+7-
z@O!N8jjXYzErQ7xXU3S^QzSfWTafF!IT;bdRKwP_(m`oStmR;*q%GUCXsWO4^!i-o
zH!kRTY&cN-jXai)dpDjlASdm)uvKi0w#SG`JiImnXG~)z-EJd*wvNHCN{cEhm{l~R
z*9&w`p9D1zjA&2D>Sy_PX>YX8mnuQFCdhMsNLM|5h4;bABWa71*uB{s?<>g+X&=!Z
zls9A-^4;s818Iz90@66Q^_3UaHqB@hx3_l0fvt~mL`%iz4bBwsshHZYaCE9YBR;xG
zoq*7c>||fO&+UDNu9R^qy*_R_$`o2G;(i%uvi15v(Zd>vxKXkdF^?>ea2n9Xd^{J(
z{o5dFXdba*GEDOOrH}<?srf{aM<fXebPb)#hgaTW=4O+ByYx+#JT5(~`0%ArdMF6D
zbFy6sS~v7CIWhXMqSjU7A&?b{8hqtj#oO#gVK8S;mrcB$jYWtSf+`X<C*7h))$-1D
z6S>59>=~Shg~tTg3d6ri8ja32<jJ=!#RX(fi6FF!&08chQDRGFJ7udY&*TeOKCgPa
zTXs`yF@!D~-VxW_ZH8mQXO)OeH~Z6yC@<S_55yr}8~>%?B%v)Rk=}dhq4{oLp=2u$
zLjS}7QizB3pMnOV2XmlR@jLU_aMs+L*7Ed=Q@NCjr=cCb!VU|MD?#Fb5)Eu~wm$7&
zl1WSVl#>ex;wxNJzSv8j^qtN!5SJhebzUOv{gff@AGMAY1#XhH51~}A7XEXc$9uTy
zPG9v9)RN14FZd|NG|L<FzF*p@>g{NU5D&w#({fl|V5T8wERih=8=DY5;oHEHXhns%
z;DJ%$cAZC8`*&-Nw!uq11%Mfk*&~fJNY%BrrE1Pjj1WbW_d?n|GL6Kz8OSoID^a^u
z(?Rf(Nw=Xz-Zgr&>`K<>wh`2GMmR{f<DiTWbP@2=7I<~QPRxuToNT^BSu;dTpE$JN
z_94v=b){01$hZgy5U<>)J2%FII0`Ha(z-7cKT>&I!>6KkN_rOzJ?EA8jkN-oQY*<?
zgiDbjvCerS@j4uIdN7hPS=s2S;jO#_R-a#Y>|eD=W-u)>XD^PI2BpZl34JMrkI}@s
z2Q2Fq&g?4448^Pbp)U16Xx{H0oH*ZZd<nMQ$lh-zKNJ7{5VzS1EJ~v<0e(3{wn(bC
zM&@*|Cim_ppHVv<yMN$|ZlE2qR46`%8F7!$b&vJ<k}LW^yxOEwV~Q{EzGp!B<SBg^
zGrbhpQ;Gr5v*HF}!?%@1gQZ}iXr)`Jzm+9k8>!}b+*4s3WpjMjwWeVMWIzV4(Y;nY
zCX_yN(ceIG3HzzyTgxwY$)5{}1mbKO_ofU*u?!}q&36St|2r+i0MOW@&qG0pTaD>d
zRgNc2-o`Sw0K?K(LnZUPs_*I+7bV?rl~<lNv$5l*9h!1&E0|X$oQ(@U6uSV|Tu_I?
zY&QQKP+y<{G;8IsASiKlY3(Vy@&r%p8|pyi1(kH$$!)a%1WUS2UeO+_*P3rl%ft)$
zvMj(2tk7_SJE6OBdoTLiaiDdUdMz>{;&kQwrYE@z22(FszU8@)g6fx6Hk`8@_s?i>
z3<NDxIqXUkE$ROx();##&vY(5c!_w?AKQEfPj%J;n0`nN`VF4_>28~;8={uPQsY;L
zoUxX#QdM%6cHyTa;s!wtERH|!<U{v-bW*&uGq9Q|y*!nOf>qbeU3l<Wh>QMEpvh?3
zMwrMyO1D5MOT7B+b&iLrHWqa{)4H|nkTYYNR|O0B?6@8gPYh9lwFABKxb$sENBLzU
zz@pB<9K-J@9Af35m*(34aWdaQx50=lL>x_0aV)faeCz-JbOK2tT8=k<zFrcAC`tLA
zs$|jmWj*sNA398?#)oxEBf|em`3dwx!*%UQ$c4oL@U`O-vw_+et%WI)SnbVSM{9BF
zOF+RLQFTNqJI0C`w{z~UAh)W%Jh3U|$ohlbKO);Hz}y7Dtgo<VrbE(j5|W2XPM5d2
z5u;k_g?^z^X+3$3fv*ESwGyPx74p<$$@^+O3)gowWH}no7Ov~$ZT2fUM<v(z$fTJg
z4;nyN^%8zxJA=sy+a4D)Uxnyf4mZ_zfaiA!SP!HU^vTt)L;t$hcdA&;O~eX5{5DOF
zpouXU9^EH={?U9dxr(B;HJE*u%?YE@bjB&Umzm#B7D=!1f*&7RyyBZHQp!EEM^Nur
ztnJ$q=uGN_|7c49e60|XQQFc>YnmCE<PER?DzPGC{N&ReDxC$exW(Yq2)nhtiPUts
zo!Cyub07r(S*`THq?g6ScyeMKjf5@KV|Vn<U7MI<m-ikk8vIwV$CD*ZWrim4bbB+t
z*JSXlX(nk*-;4vB)R*2`_ekpl#3u<R_b9p=;>m6s4D}?sH{7`CdXji<L@c~_+l4Ft
z&g8v$Li(&D3Tj|_wF~C~7|Acnd%A~h--7)MYWSxZkFJ8wxt^XcDO>dtk1zjR+j}j3
zoZq`PR0I$KZVq=+d&{@m+p{uL^e=4G;!dHflW4vdpp*?+8T6}uQf&5hjM>lo`lx}g
z8a<2qx_8T~_N`;lAeY5!f<Xxhst0($%AmFc*KI!=XZ^>Z=0kd8*u|d<{~U&d`F3Qq
zRnBVR=ssp<g~|#Ofw;GbYV4?PPAXc@%Y0daaoJ+}A{5g0AFSv)UNm>?%xVUrYQLg%
zC5>W0^1eMH(HR^!at|y6a;I8yM&++>n>rTA(AdV|NNN2pq54<8Pb^4n)K=O&<sp}0
zn?5MWF5^%yd;}BRQb)_t1r2YC;Ncue&KLzS5`Tg@NG<985??k$k;{$W?!_aStQde#
zxdy9c-pq+)kBO=V$pR63f(owbHLT0b`LsaAWre<hkL9Fte2~B(5!Iwn${d_<a5gHd
zzo=MTmvzEHm+Z1S`vQ;=mwFr318_RwSg92G{VDj2+#FQNinAmX?;yaeY!G<|RfY@=
zIFQ}#;N#r_%u+JCpkgi~9G5gelF(Jj;M##^rT;OdZ(Z=SqTS)dM>wo{F6A8hMbCfB
z4^z0M#-Yw1tHaD`7o!lH<8#%BoqX695ppUuvjsFj|Ngt~T;9gqt-y!LDJtzd7)L>E
zQpytmfg)1QvoeI&I&OP&wlg}FyfqyqWQ4vZtw#8@(SDfLFygMWDmKmaS#JO|Im9rl
zy(R;)7dyeF2~UmY(MFf^lI*m`Ui*f<PTh;>u<xd<b;#1%`Tw+YET4ltJg9>f!CdY9
ztfl9i&P*uJ*2rX$FX-^2Y;;`Q-`52}bY)!dFn@Ka46qby%1&!!dX9id;$lJ*nI71Y
z8EX4YEO?eJuz+igR?_U7Bs>Md35Q%K+}#KOQLl<eir?)IhhcA%%LrgJXtcdr^8$<w
zg{Sub7*SMIm%?Y4k)^=^gC*|#r#(>|v~WKz;J-0##~jcuAhrb{_}TD)tsomhRUH>z
zg^cbqy5Z?~6kUqrP%!~;SAh_g%iFtX1074yi$Cxr{5q&)>qAq7=#F@QuEG<)PTeUd
zEkYm_*{^7bT?;<RlF=IQ1<>*`4%t#?B7ngb?$#JcwKVN)&RlR-9-1fi+=yCgJJ>>$
zFjz#Cvf$JK@HMn+9L!IA%9&-Ptl?EQ3DST%6vh)0T!K6HLic<=sz8LMT2qJTV0FZ(
zIY95VSlf<ezjZorMY)e`u9lESwZKpG;nbx*771>0t4QTTBIaP0ql9>`2H0sr^iSa5
zZS&)p<o%YAToL0>8)%ym(``Dz%yYr!rF6XZ8Qq#x5($LaV!>te?GhT`P2E*`4MX<B
zCAa@IU+Q+X`WW;^HZSB({}3a->}#2}93OA<Lz7%I*lxX?+jjl$?Ya}6jf=&pIdYL~
zRv*Vt_gg->pyN3GNQ$5pakUkq!n_$j{pg%|5X<Z?MA6X90wTITNTEwaaC!@h0ty_Y
zgVNWowN(yVAGkhg82>|YiJ7dspN6e~2~F|3dXAL0)nI3g0dUEBT4D%prn<TLdl5f!
zXB)awFRD1Fk5|oqV)1(;_$Vlc)zJT?8|&?d=^0F&4Rp=1L;0GPWJqY|jSWJthvWy+
z_mk&T)8}##blb}5W_DJex0ByTYn0<50}nB2gGT!n#+6wCxU{BsIN(=ptad*IHNpE*
zGSbQ(^}$<17!Qcqh+cIXKfuO$V2uS?J|BXV#^YvqUEz)ISO5I=(^ysCvnVVM7`xeX
zX_f3Wpvqa!GN)4h!!<+wToh37e=?H4vpO{`fVS(x&K7&h9RGSpGyllKBjZlOCDgDO
z<rUm+a@z*?bO2X<rpc9{j3`lwxS<%=qzLfBcHjUE$t#67<rzNZNdt9&zlEJXNd>Lq
zO8wMQ1DKJFt|r|rKZ4cT?j#!)r!=`FKM;BozyQWkBpUm5u*uX+eXSQH5UE5F?1(xf
zycAg-a<3tl!7tO9))p`4ooh~Zh6Q{&x{W`V?21^D&OQqbe5k#E_gs2elqaSJIj_^|
z$rpv!Xytj|-a3eDvc5Z3y8wOjb{W{F*#;SW@BXuCfnd;S8~dh&IjJ@g&!N@kvI7gZ
z@6QRqyVM?nMj69C?FSWV*~rembWUT}65<}gs6lU>I;*tZ$X;ZpWiZ6Q?)dNMGkjXS
z29u!we^hyBoev#ZmB`dv57Q6yEX-~3e#O`O2c@##NrKOXx~4^JhE^QLPry`iU-7h%
zK~*@g8=E9d?CmW{`?okISDOnZ0%1U@#VUN2v3i<0*a1b?ZMK3ZSH*GwrF1iHapos@
zIr#u%civ{$UCyxFEBZ1`g^|ARnvvh4xEH0R6PC>$vZ?m63`)C_XN``Q*Aiz|dz%C(
z|M}KN7QlZ~rV=wXU}H|825eOLhOx`C1Je&I9Y86ZPs!6CR2`)AFuaFi)HA-4v9??}
zGw?8pAo)Av&s;C~1@(`85ZEDmkN^8C?%@AUI(r5|_gA5e5-rdMI%5dq_lK;^4s6i+
zTxqnJ!JenQ47}|>7`Bk<D6}daTy$cUV-RfVSl7T@?g|L`y-?gJnxwXdXD!&Lzv`Pz
z^$y4lC=>&u-9%&aZ~Q6GcJS$|&^JzauMoE`o6C+BpfekDEsIo6mM6LbRRxmn&ts%D
zRKNeOX4!9~IQlD{dq(FBM99`4v&km;d8V>{%-3zS33+mIRX3HyIJQ85EObk9-r}y(
zW!I)X8|g(z`^6gD*qyMtOmvFx`O4DL`97wh;vKbQ{)Hl@ZDH4|M%&ip!5&|h&>%RE
z-;I*q+sFd1#DREDjGF|QQIYnL2EYODH>7wTcZ_z`M*XNmf6)~rxD(4VT)Q}<8~;ZB
z6>$z4?6KmFg_=yjNel1NPC=+y_#+n<j$WD&KI8xB-SpO&I80$yD*W@Xk6r409>N-)
zjD|=>h6L$AMq7PS+U>F7?Vq}3r#W`8qzefWjP6f*^;Gcgv|`X*2JIrxSM3k)(m;81
zTVWzxB^FI<7(S!>Q778D=c)2l3|10~<#iaw!qa(BYOS19w%8Z!U?-Cj+uz1?9p`P0
z*e6W<rKMy*6-Lga2m*b84D!Tged@%pTCE$>8;RUk;)JJa))u4b3lEg|yFv~A$aJb!
z8UW)U2HL@~o&0wAUvG_YJlMcOglf^@tLa9hobP%_97KAtX5;TPnac3CS<6xPgHk4n
zFK)Srz7dg+2t@H+y-DCeW`?GH`d2D3P>8t?#<{gizEAl!!%rM_wF=p8XrhbT(5~Ys
zj+o%}Q?ut3^Ckh=>k4-Ur;L-^1@3S(Z4AE19lb>~O{Vz&z(}<UteRmJE2T|qVBpG3
z#??H6{dufzV+y|&*y0b1X&n(T_!>u`89p(`CyNv@kUz+sf-$h908woXj>ua@(Jg=H
zQfKx_t}{Ny?IE$Igq0Se$R@;1f2BQ12np4s;*$^jXSLOe;sT|Ck6utRCo|Gy9NoM!
zNv83GA%LJE_x>cu&j4(ecW(-60NE|`;_|!lOQS~!cdJ8VBQ%LvX2sX~gt*dg4kYU&
zFAlaI2uKsjQg6r35}1cAePXDXqeFC9QY2Jwy-~g4J}XKH-Myn88N8J(PLHOBMRE=<
z_e`hi(6)TiJ`4FEbOSDoo_zae0+Huni<f}1opi7|EwKZtr_U<z{;3!EKCH}Cwndwr
zu3v|am@PDFngCjVmt|g=1~ICK`qovVfTtsQk8aKH#?xsT@JW%Vf<GTt&mc%Gs8IU#
z>N~<-hinDRua=>iX=T8yU|i9K!o8IOYcAj2zij+6`r{yzYsz@2fWECDaRVjHR{I&D
zX%8rfX#4z87oG<CjjuobdqQLYL<?af;dVIY?Lv0qI(=to=i~kf8feanBU84+FLOZj
zm)My1fI<pE+&@e;7O2tyC<C0my;%D-Rr4sf5BbaNI&oJ+U7SV5E=4Pp4I?LcQ$XXn
zXu$z1=|)9RGrE5KVg||<$$eP~;n;H!L=&{cKmaZsZ1@3((Z*dgAP10Nbn+1F+P2mo
zT%*`0N~0z#W6pen+p(Cx?TTts-PMn3&Zlx9zzD$aRjyP3p-v@7bE&ySl-Tt|e}vhk
zj?b?=xJWIYiv&N4X=$L#hqHHW;v2jJrRK&;R7%+;6hj(<VPFvAE!op*4c#|dktaO7
z*LyV@bMHmA$Txpa)}elC(c`y&9mSZm=!FrCs;5|AgJ#YO+7F^%)6)s5kbAw)Jk%DS
z<=I!JL5yxHJlL?f<Eu2Ap<~R1(XVcK{X%&JxR{3<?;600^?^%U$$5~(J>bVh4q*&x
z9fR;wKK{kU!BjiUo%JPJ)j#=AsrR=pQ=S!QaP=lllilVB7*NkdCMZ&0K!I2;G&s4&
zQG*UhZkUo4aID%Vxm&Q*tI)=Ew{XNm!J{cgjwv{N#icC7@ayTGap8AMXs@gs*N`w+
z#}+0%w@cn`i&w*OPndDj%Sw{W9=`!$+!nvM1f})jpYXeSKNx++eNe#)4FVLml;W5{
zVdbUj#64Z_V8nf?grFAM5~}Gv+)`wFEG7nk()o5h7Rg5eCh$JJh}*byL~EVGwS@fq
z%1^HM-H5)JjBWBIl)6<bCkip<q|zgCc6w{iF2>s5D7M>q>~nDR^HnLHL9l-DC*?7#
zpn~D)8Bc#eHHU~l;mI3fz5<Uc>q#CGFHdNbMxMIW93pXYcD`l#=NJFwX#BIm+|Xl2
zgbnQLZE5V~JiPA-@7hOLE;DKa5E)g*!f#|FiMr{;?Q!ssX~o85TDl->y0fkHejlFD
zi;VLYb#l)N^cJg=T%gCUXX5kV)$3QOtlhBALdm)aM2DvZrG}qIQk!~lnsJQUuG?fl
zSDMP@JMf>fMg|9rk352-ls&CZxwFLP<u$Y>z$kDaM<N?zx~O{2tf=4Q5PsgFMT?k`
zDr{7t9jm~zs2ypkSBV$MFt6bc9iv{lU*A{ot4)-c{!jDqd#!T5H?2X6&}TANc1QZT
zT-LG+8|%kMC+?T2H_~PLwQ$~0uDl4yWe$^!w`ja44AFq@n;d*@;dJ~nMsC(Kg>+aR
z=PaR2$l0+8821w8yDgTeFI)WB%G;)+0b*m&m5G`7#8Z*!n~#K4mO}vMq#Gg|DSD&C
z*3TZn_fsQyC1oJ_oj1h6yDLQaL2A$_VG;~;c>vSkbz4E&6HUv#*lN`LNjS?g^#hoh
zpEd*n<fKlikGo~?NWL?IH)aSargnQYtaPjUhi&Wtxq6Shd($bF%ZZCIj@qE4BC*?T
zFCm0Wpl^#c0gawo?ym%+D0}bfTYuc3uK8Z4-<4=R=Zh@^68KTo8HEVb!(;*cg5P^r
zM`n5lr7{5+txX!e$U*DX<BO+FZ4d?y`}eGKGbXPT1;R=@;>;Plnu&mJjAkinY1{2(
zC$--W`EHY{6zG_${H7dT{ENGB`yOYwuc_Evp8hcp8Cmfp{J8OA&B(NQaIw|$&H>8^
zI{53kU4}Z7fQcjBc4*$+D|(?N$uKXXjq0!?oq8vxWLfq8-_#`4+=OmHSdvCp{|mbK
zDPb}Qjc4wm&Y5J7k2-4Ppycs-NjcL)xn6j2W4ChR0kWI@_AIgTCeZho4-dgf;r}%H
zm=w0Vo}2u_0X3LHtlR%Iqmm*;s2Pae*COy6SCYRo%iS#41>m3w@Dtdqfbf@zO|Ffd
zHb3rMn|pf22;e`TmU$q5k$RkAvGTBOlYrkWGDR}dNWkjjkRHDmoPpX8r^;5@PC>*d
zQ5>Eoe*hPTV8<@vT!H^r1KF+Pj<;qz;_IQeCl2A}Oa@2#6yM`OB`wS~!X2fm@r|fi
z+ZJ>KolHntWY3+(+}ti!CI4+~qG16-i+(9Y1p15z%OkGC>!qCtFQNxHUdoZ9CsfKT
z7s*pc@UWQ5mylT2=S;l1f2<F+ZRl$*ID@h7pAUqG(8A{lf-%Ysxq3+Bu|fzB$qe?)
z)UeQ&7yXjG7K><VT)q%eLBDi`v#m8$A>Vk1Kq%B8a}RF%YB)}g{3v_9TrW6$>t3bk
zef;xK3cXR)C(eHaQ|>?yNQ;edH45SMM_}LHL8ssc5Q=3Y@D}fO&j_fmIkqqL454Mn
zth~W!p^GDf6Bv*+yA|L61RT!Ux6ts}z&d90jYYfc8PI^b<aw<;a4z?}c30RvMS!-R
z?d%BZ-hg<!TqJbyEw`l=4)#fZ68LKiakgZe2z*<;aPeY(H-QVqWW6rz18S+r5gy!s
zHgm%!TIAiPBTvTLo0);|I^+XV0kp<ST|S}yZDzB`ABQE@L6h~EETH!ZVE(Kw_aB4V
zeY0&{?M`MO^9UDF&6C@z5Yb&n8}}EC3!A_nRj6Mgl*J$t)hD4gTm*p0jvEtcer#HW
zme;8<3uV0gL)7h8|J97UV0SK5#*p>rOhFCFKK1v0)y=DHHMsb6-&~m~mAkgU#E!mV
z3;p8#LesKVHBQYRMEX#X($BRQ7B{aQkORdW?VVhr7FQ8ZYb8gPdiP7;lYC~)hR&hA
z^9gL$H~?=$qkfgcMP~j1@#MI@j>vM@HiCoc(Sl}W!ssF8yk}>hsd%^~e#sVz@5=R2
z$=W-}39M*#Q#cm<OIf`<C#hL$S(<_6jdN!n6~zQzwlx~rMD|o#7V*C!_qXbwwf{!G
zZ%#i2>k5e({hi5k>$ZYSb!2fsW0@O%x@2LVm&;<&2TMlEJi%ZxV5Nu&qrY7zx{*vk
zZ1cpHjbV27ddNzhlW&OM?NNO`0z$)oQl~o4i|9ojNp!XA8<*FCEpK?`(zoxHr9W^f
zW9c9|EPv1-HHL_L^YnAPk2N^DB7TQ#AO#%-m<9@GI(<3nwG@0R+Q`+TtwC`s$V1{&
zw=FbToDSd76yzwdEi<F;y|uW(GonB;-b0DGXJF^#PqVIE@vCF8ZRA1MNIuZqlpC<(
z^3|1#t5Jh3S@jl*G+G@<na;bQo$wBKLK!3K<~9g{*)W8i0JS-l1c*Mtld`7-#0ngB
z)0iC`y&&fH@ZUX7x$!`FZhqj28R~zlHoi^VuQ!1a+_wmfi3GoEkl=dbvtk&&*6@i2
zhIq;Gta_~7)QRA6t(-PC?f)^M8%>`OrtNotLdhSN)i0u>d)~l6UMcbuxU8A3=qcn#
zguW@`I{YVB{mHf(#Q}{F`h0C8?xlCE=o%$preUUH$rLr68R8QV<tV^&$O`k%;iANd
z5QMonFLeZE(g?iCVpIaCV0+Y<DFiaGY@>$!jBHBCM}KaTMt%TLYgTD09f!b$aKri-
zFg0Xh6d9<(+NR?kfSXiV&kIUahWc^rMCW`xxVn&kcvok5%0n|Q14jh(fU7RxiabLO
zm+1%N9qKHJb}MOG@J;zlQikM6wFxR@Wy5mj;Q}n@F0$6b%+YC^|7KuA@Gl;dq^uHW
z5Bgp&Z{=W0W6Y1m&DJgWUB*+e!_@>D2K%x6)HHOFydVtJ2v&54Wz~JA#-@>Z6;2Ts
zaEcui)Rp!>cf@5dud9jUe22D0c81jR90CCvrjagR_q<u(NLBEJV~Ke%+tHEdM8egI
zLHzw#FAof9O~%;$e%Y?ncb7ARi7>~=Fg>>|j?cA~O)nWHlN-Fd2~p`G%q)9vWi+S-
zR2}(P2Mnp-GYHfvN^h+2ud&EuMU4kHmRJ}#cc-%IUr&Lf?S-zBb_@P}yciljBb`kL
zpzx`UJf`s*h1dFdsH|%Nox;_Vr|gZX(}Ru>TDeXSmWq`kV&%<9d8nG9Y3J4}n{Ia*
zX<(YH9;x39dMJlg^~r=duDR05Jp^m)0gOW}EeC)>Y3Kq)kEnuVwnSBhA{3v0krfo4
zJ{c>*w-A!ib{TR(jWBkwIV_rMH;LsfwKb5#1>@nIXKizz5MXYO24h$fgfy^w<$&q7
z4`Mu7H<`<4t;o|xhrt_}W6l-@5M6OFYDde!+72q{QvXc?-`a2Qlp7PVry35WOY;>U
zT^nfo%*5VI6p1^X=i+)zB6dXscC{jBEm{17DWRTGJw94C??>b_kK5vI*Wpmr>V0ME
z<h!#WQ0RY!-M3KA-mtG@LwkCa&7{|yo*yz5kOf?()?1R#cc`?r)sbJX*%q)s|C;2j
zsQap#VnE|BT*<U6hE+d`J`!A>j04jjsvVD2L<DjdRD#^mQ60-gNvlZ<Y>w%N0m5BV
zOEKA>22Xu`zX^=L%oXo41Q3(OKKDZD=Pn)%3xtJKxhLxpttOVe;2Tc<#s-SW0qCCX
z(3Z?h>l`56SYBU&2e4RQR-U!L?Kr6UC%e{*xLveaPM>#eD_?XB4Yl7TBh#iza>{J%
z<TxSSggoVXrhg-Kxz`j2qlwHW5p}~T*u0Xs@aJ3|O-0hr+wK4H0xC8%av`l{^IbIy
z_Sk%)_LIs#wDM05;-o;n4mWoevDpJgR7)hK?YgaC(!Tk_TS_G)k_W%;?7X-B1rpty
z@%<(PlnwVX@_~MY?mEe;-ercNl=>)e+B$O@@;@C6OaRP@!d*l9H2Wb>Oce{))2(Z(
zM5=2%v-$V<`Xczm3TJe9nHP6$F>@8@qbnApR>UK<ULpLM_x<oCEa7N~Q-$My4CG%I
z%0INtEg!>U<_8H+%B204pOq%HMw$bNgZ)E66(ME8LT^rLn5#{#F7pwulgg&)AcR0O
zYkI+TG}<RqOUII2;eWWmQmNhW-xn6<9w!U@AqF6O_oSY&Mfzo5FC19Vri!k=z`XYh
z9Fn(EV<o2BFBgTmzuMptUNrVE)EeQTaI=<)%q`;V?3E%18j#M9t}44%?;XyQkFBr)
z&Ayt-9jj5MQ-4_qV$k2RrORz?vFk8!_sql*acPBl-Vd%GuRDVIJ;9S6s!1V*$M?~&
zOsp9B5VI3p({cO|AQetOaFNerf%W)%nF_I6r~u2giP1DcW;vVb*CgzCe4c)mf3fQM
z*iL8unAlL!+eLOPjMy$&D2Kku-;Zo5$Gwvr2a(sW4X+G0S>@Ul=5Cv|x~K+_U<~D<
ziij06?X=O*Jx5I3aH5p~^w9$lT*hwq%n=zmlH<C3<Iw3VBwSy2uE-K-V8x;&KX>(#
z7etvr_oE&_m4cMk958_O3<djM<3_y$yZRlzWmX(y31?P|YQZyN5z%rDLMh&+Y+fC0
zb7$PZ(#tF+f*Hhh37DP$5#VfP;Wb7&2_sJzWa{e{mku2Nq2k#&lso&d5Gx9|4?msN
zD&)e4m&)O?I_w_9e|6=|*4h4Z`H!9Bq5*D9aXMTtYW%ndLr!p|PzU!3nOu^3@-g$c
z!OaiX(?<*6ZMIuR$}L&Q2EWAu0SXd5s`XT|%tdfv(YFgVAmbA9Em+i=S+sjfFTks+
zw60__n_Ra1LUWB@k$%Yn4>{#@Dxv9pT>zWE4lN{4n=0T$>{dWbk7DU1!_oXVJmHM{
zH*4?2YIp->H(8n3i%B(sz9PnZyRd_8ba7vWJhWWn5AqlDnn0ZoHQYMK(a*WP!WaKN
zyCi0^8U8~Nl`BOhPzs8OFK{BwRYt1}l&SJaWOvkxgMmAN@$u}ZAV*(@`HXn?Z~to;
z+p-Q)91Kb-(gANWMV<`i9R5T=fzFfS>4IB<KF-yITL;eDn;*JQ3pWA0{AN2xOaAxP
z);Vr@Nt8r8fE;OlF9izsEh=lfj_n!$`KAM~u72{Q>xUx*zQ^7H)Lg?x)K^H&gBze3
z;yOfW#LEA|6lu>@`HxBjw!B?SB8-7R5K^1<3~;e~y!NP<te@p{p<n{FFE!7BoC5>}
zAUNe~>d|>}tHhNkdVdV1gRY}UKZEE!s-oMfB!7@@AU%%tMJiPAeylvm5i(!nnK|=u
zNlCQj!8yMP@!3MJ_ahpa(pvBh@EvFlU2%Zcq{aHFtiXR#3NYNkn-c$_pZ@%y^it}O
z(w*qiXz3w&wAwAl1(i&d-H4mx%9oAg#p-dv1w|!EU_&oJSRaLd@rw4>QF-_zky^>m
zj<;s35b4+^2a?x=8*Pq9riY00Eg62DV>?>PqrB4-y)=2@p9FEwQ@PP?5?k$Tkp%st
zNFAe_&UUp6&>ae!AB|~q{HZPU?~V^-_dAdQQw2JawFwJ@9z3>>HDobbpa1{^0Vbfk
zIFhJ^m0opX3zZeOro|{v?Z29A`u_}aSUqpYsk_ww3t<2N0=z+*I}l_4{??^X0948q
zk>sz!Z^<WhIlD*Rm%g?JH_7B*|AqBHWHlx8`FWO1%O^#EfeP_B?Z3HdHe*@9<KS;l
z_@DVL)RJ2`EFu`C`}Sjh025splD!w1T4s(r;_t|ORp`&g;ieD9?*@lK1FpT4Agze(
z?YkxTE*|{7rQV+u{K5niyXauOs1>-&g)yeuHow4ya{6_ku#++#mhapDR)nZVmq$<?
zZ`(<-HgAc88^8OWN&??uY@t$FO#E0pbFcIKA%{`>`mI4NvW8MC5X>&}fnDz#MQ3ya
zHCvrs6wzr*VY&Aoss2Hlt;U(U!~7uuT+x7uF{5l^+d!&7IBGoL*x19&;}$4y0WbPX
zNo@IJnAgAb#WQDKkzDP#-h14vtk+LRP!Y)hVy}Lq1tOeW*c~Nh%)rMlhjy}N@#p{y
zE)L@#Ds3{k6_0<_hZ6~Eo$rKkRb!>7i^ZCS+aIYnQJ*Y4>e~LP$69%$#ukT-CaBZQ
z%W>vx^4es_DOtjOg)Uknz=M4O%<Qzzwy|ZL^bKJaleJ|Hz~ArQ8Bz##AIzuyVX8v)
z*hVY^Z}IIl4<(}-3_z&@S~A5g^sDnrsREC@m1@}R^8Tqy<*tg^NR0U0*h7kPIKU-M
z<V6mT43bC=%9OcMXItvz-W&O6xF(jl{TkkeMm<V4zW-<8vXfGWo*Jx&Y}kCxtByaK
zrp)5ul(asa#LV`GC9t#FcXruJF-gS<cXNkz@!rCa7J6bH61<^Lj`1?Hh#GPvtQ?Qo
zAr_EdzCQ&w@;Y8b;V7kH#J*M2wVS&)tl!KVyNm2|YRC04h{*h3^c#^vLUTO<6Nwub
zRe_^#GUbW2LihvkRApK#y(>#A<*1r`s+P^*v)vi^fKdhwhx&bJ%;n-;eY7~im>*Le
zv=0fq$DkL$0!9D;0wY11PY7hnVFo|`)}>GY0zmQ4^_FTiwf3qA1&IM(J-sK2Jr`#s
zP>&+Z0lvr5Jx&s+3kgm7<At}~`D3pT3ujH+n->+m1ZHp_g2j9ShhfV9eRJIu(QNg-
z;7c48XE7*!{`sx$Er6xlS7Zzl#eNo&S4RX3Nle)pc0@QBRC51B`v~c!3kz9(Wi&i@
zL|Ll$T2QuFmWF}j;8Zm?;HuH(`r+!PYa3(-)n{&QGiWMZRo_=M7Fcv3Vrn~e$-Ryq
zht%c#3H>%p({h<2qod|<i1HmakE4=<V&ANW1ebfq6489Wdn{c5+Us^oIbaan5N`1j
z7rD0E_f64oML8BiN$X+YN-2*wp1~C>i+|GLuo=Wy_fw3<)MagnFf(KkUjB!lYzNfh
zSW5KeofrqZ0P&dHrifx4<eo=xj8z8mC?trU`FiAT3N>J&nR`8*{PGH2JhelKL4@OV
zNl_M*h7mw%Sp>bN^+W;nyMCg1dA_KB3@m=``Sh*Cz};S)k;!8>IihwABZ&4zbQx-2
z^m0HGsGpfu4nmJ+vHsLomNH^!)m9nUUymKB&uC-_9+Aqb++W$3cFneI^AkP0U%-mm
zc}UIWN)}HnM(@YQsoBB2y1quOWwg%ppd+&lgGKgiCBspq_0-cg-55hnL4iGmPW0?@
zYk!kly_skM_hA?ug0lgAku#c|9j9RCjnP-4i)MAi0009300RJ~fdBvk=RulsctgpQ
zz=I$D)}>Gahr1AbK<}&n@LpZ9W^TrK1H$crbM+g!F?PJzns1y=4GIzyZHwZ?)7$*s
zfB*mk0009300RI31XJrBcgrVfE8tR&6kN_&vcms40nf-95{f3W?qoBmFFCGGZlHaU
zp<0JC317iF<_Bri61yUD-6%BGa079ngvQ;}uC>udW71t+Ar~LdP=d9^dI0#9PTVnt
zX}zk7sxFjht%Oo#VwlWpV~RMmwM?0P(l)hE-sM@!7KMj@nvabUrAEjFxI*oa;b8uR
z<Lz^f&zU1gVBB^?2Z-V>2O6@;R3BX2IgAyYun@xTkYTjJ;twJkHGp+Y!@c55IBnRq
zZVRi4Yq)+vR$XA?%s9==LH^%K0bVPdXDpV)_hq$01tKM(YcR2QNqF`TlaYZ*0PZJN
ze|K`?kZ2%J+2Ma#9*q}pMhmOtD(Waf5q}Wq5<?0S1ElJvXCYjQy>JV?$ll#-M~Fwg
zYB?ui=k-;h;AxZaET$PGN9cgr_xySsOF?H$E>-OHyypxXU)ED)UuZWXQpIk>)S3Ja
zo*;adrT)n0MjkkFW+9Me&)9A8%osc)Dh)xojEJ(0BZDxOj%)a00!(R|B9WTdcV~MP
zb3CusUl76OKt=~&GbQrR6l7he)<=(=f$Ai(Mayc@7Oq6L9GQX&=qgj_<xHN!8hthR
zL$Digq3Y{|W9@NH@lJPG59Bx7a>QQNo;w{aIhcZr{Se0;&Gj$i9w|xP!&U!3r#&YY
zx5J$QLe6F|uGc3rb;D9hD@l}UD8<i@0WP;#*-^_6sg`w~<6HO&xROXPYk!JGuClD>
zh>9==`JpY<PB)mIr~oJ{tBnGX1#>A3B0x~LNm^%kb!3S-DK3B*k|2jiYBZj@nr7Rh
z2x+J=C$Q#B{^$y$BIyC~5{fw>^$3wW2KfYU4atpU<qkQS@l>1(&c$4ss5@XyPYw8K
z6Rx%&Tc@i~000FhL7I|yL&=oDgCG9ZrBDKg_e(AZ$mM8V1=s#d0$mw>txv>sO#l@#
zy5h4mB;4PN76D0z&;S4f00093o4#^uPsero01Ug7im@+C@)>}QISLVvgz=QRHw6zx
z)EgjNiG5x4wGI2ijRJOQvY%s39KJTE;eDKr)tepr<%~CQ;`*!kBGM<D6XN~^D9?m7
zbt1{zG)QY33YENK3aMiZ=_+Gen`Ewd9&cuS`W06&9Ll8B2vDO5W?X2$|D}4IM6G$}
zP49}|x95;_$utc_7RqAhc<;<gCM1lj9GlwCFes}nJ#mSr4)^BK2QgXi2%09XvCdi_
zwW7jEu(S$k-!B86>jj1ZvnH{rtsg>y!<3y^rhG*oAf<Yf&o$vO5W|@BZUQeTV)RBH
zY?JE{6O9k#FdyF^q7K0w!}jo>F6(lDTN4q~jU${`FTJ`PwQ$SUD8|$SXriI`KDIzI
z_Sz`c$cQz?S=ZBh?)2++3=r;eLiz7@C52+O*-Itu5eG@82sXjI-LI!$JaOxSL;aIF
z+wUa&O5iPb{?ozeHUmC>VpVSx*t+$z#;r1k@`XLOv?JnTEJ?}A5C~t$ejmxrMHT_H
z5|A|N+smfbs*TT|+$XrE=0<I&TP6em9eehuK%_*pEoK%j=`R=Z#SMfOjfH`SpW{7#
zAsLAn#paz64cbULY%J>K-I@NlP?e<jrfw>~ih^-_<VjcJo-Ywt*woO3FzX_TUy%Q_
zXJTyZDrsQQq!Tg#WrH8PPp5IkOnAz=U7iED`q&TWOrnSwNmDfqu?O_1Jg}F`4UE2C
zw;3WmE2Z-0$Y*PpR(yr;4j9Y6@_xL~<CoM!5g$<rPs)dBp~T_|QlhHv+!gM5vBde5
zygukZMusOqYDH3;V{H^qqa)c|iHvwBu?8{4TS{V9QSa)npXVVtRu86E3bE@qu0%UX
z$#-MkO@QuFmvEcV3vX&8W_7q`>N=$lI2Pu~ZU-;lY4BkjH5Cv#+s$zn4{6@mKL)~r
z6ed`yUy&Q&4MsGJdEWZnm?C?o0YFgj1yvF5Kus3wWpoJYxhIxbaHK$WrC{|JBerQZ
z$U?diYK<D43SPT3WAsP`Nu6U99s7H#5MIOZ@xi`-8!vVS*+FAm5D1h##CWpf>S#e!
zP+=9|yp&|;48XcbMT#54^WJ=ioOQWEzrw8;b{s66i^ro{a7Y_0sJ6RV4qx(w%Wmq;
zQ{b$g%!B-e7E$s7YcEPo^5x6Bb04H4!DHbd*s>5v36*K1cCXJGn1uwhBOwhOyy1sp
z>>T-IGEzDkurxeTJL9G(H!Hzz#txX?)}(tIYm|M%g@(f2>PKGPrK=K&Q=(nK@@zmo
zX#*>QD6O5-P#SsByShxO64qmNbv#iy9En`itTm`F(1#rh=sKff6D*LaHb1otYkD<g
zx_)Y^c~-|K09k6AY}BEZhE(HInu(SSM=g~reV+sd4=j*~Od;(&g-1cCZ)Y)gMKW__
z6iXGIy-=AIZ`@_zBb^7Qka%su5<l_eA*jZj>cz!^9Ox9bz~w~~A{E#V#Ruo_{;>S#
zoxA>ezwqZAU;v9ibibYYr~PKzDuCLGjltk7b6o%Ct4-A95xI<R5IB!91WBA!$xq6t
z^X_#uXgJ<oa|<trhy^LTg8d_vt12H5ZbHC?J*AGQtu?52l6hRLV;U%>-K^`=A8=f8
zECZ{vF<K&@Qe1MlL%#pf@2A8n8-M@+0{{R60009301a6H011pinzDF9$&|o@AO6;*
zPy&ayF$)|A{K>~53<0)2U{YR%<YAUHzC1iLCN1rndCc81QFZk3b90Fs@0-Dgv%h1A
zRY&inqI!L~j4ly_uPgS!+|tUL_1AatKZEpI3@*OOA`iEXO_^x{bJ{NR@$T+GwA7^T
zg1h(3l?3YS=3tSWV-^x{WiyD=S7<ac3(==TRB?P=NT7N>wFTKv#L-GSonedMK@UUV
zDpD3B<tpyeicfOPm)3Dya#@(V{dS3{amO2#8+H(Rrj!|P6J>QzW*ak6Ger{+cV{wm
zM0cGxz-&B9Ax0CHNu%D3Q`jn?4hTR59vH3u(1VV2d4t?&DyluSwKz@x<TKHx#ddG+
z`qBLe(h3I>M5-OKBEsvYdnNBzvr(<DwZZMHuE+}+SQQZLhnogbf!8V{0PI`l!33jB
z3fG}g8G0$O4dmjRrAs8}1ecLKndbyAgaU2tEsjE{OzYk<T9im#762=<T(6m4w>)sb
zr0zpd=od12GgZsJW)C@Zj9X5fiG|iY9eWyCygGu`y=At!dbL=Aq%*@(lEc}iKA7tA
zIT?O(xb>F}%6NrUQ_c_G1!8k6V22t*yLO5%_nDL6b=<`^Qx#^KwnoYk@jBJi$eD3+
zW2)nFdXG`lh59>i*_A*cmL{cR_Xm#I;7ju5UNE`Pd{wOK_z{%q>AO~)FnFn3(pOg;
zJyGIc<$pc{KVc-<vH9`s0hElR0Z{$I((mI;(QS2j|7^T~nVeH3bj^;#hV*2*9*1jE
zQzkbzMe{v+fjwanEZu|?k3gA=!!Nq54Cy0~8)Z{wn=x;te5@w0i8S}KESi_ksZ@SL
zx@9t(pHQOjYpsyO)233mDssZ!eSV#{8}f<;R2ZI{wRzZ9ji#*mK7YKmu>-8z$xrOt
z*lQm0z1*Ohu!N&}ppK^}1V}ZV@Xp6e6WX=6y(4NWXTErZYkaak1g*<N6znv>sO>lZ
zj&&;%<E|}&^@mQkxGflbnr#a{v}K-oxX^dx$AF0p!X}>>%WF#Zv)NwzyBTT;Sc=r;
z7M%1hUJEP-H3^Xek0(;GOl}tOSFS?^5PgpB%Sl5)v$WIOx?iueY$MFwj6UEo00UwP
z-!)Y}t%_p*ok1(5CA#d~v>AG=+~6(!vH|@e&&{?25&W-V#Pk2ntU@G7=9EV&sb0u{
z4IBXFVnyx1iB6NtITxrD=^^hXNSZX@ajRCMv5AZ*U#)p8@)8w{`?ERnuZJB;)8IDP
zu4F0|bi?Yf@p5>V<;MP_xAyX;wZ(XB<mz<^nAch-{+T}4h~~d&`tfV{h$~$4;*C>T
zCXvuNKGPzwjwMFyP>m6;6fOdnr?yj2f&_CcScnLa!w{f1?uIW1dz$pX@w|Y`c-00x
z4&gRA9t00oY*sgWq)gd#LcZ)9SuWJg&@&Q)QU@>9*wp9`+m1DlxU($KNexFX;UB`L
ze?K$&h=S}0g~;Bw-fqKJjh5m#XBCU>e_f%<7Vb{tC5Szz+?f4HR#uQ)KKQ`DC(QwV
zCr)u_<ML&Gf>DC%w^<Dxrw6@M%E!xaPaL2U-sq{Yv0^36iAP(X%I*Cew=h8=F>ie9
zJT(Ruc^wA@Ru_`g58eh{3;}PGX^1pbuk6RNU)sw<*;|!w%bkou`}M2ty50bqt;!vM
zo!7c(kg2Vv--$83{^+#ILRR)Jg>u5^D;?Vw!R|n|n*{Z9bR)}lZMr)af~VckIv3)i
zDVG_^YTFB8-XNY~dlj(G3w>eu&0|>J2pN0T3bNYlt+KPVh4e=9$D2$oyCF}=efBQy
zUKBvZLt~46BvgjByA=4n;LWanRbcs~MfMaj;!gSRaVn$ONvl8W95=Obc5!YCDw1>v
ze<JwUTU+$)b2-2^ULi+aJ|Cb7o~Io_+x1Gsd#)s`DlB@<pIcYXlW9FtJy<*7fYa`1
z(WSJ%U%e$s-|%jTBMEqUzpw@$4^GS|O;vVET|NiSCsWq=$^lqet50r~QPaR&jx4_T
zk;AQ3Sl0XbJ}wUk>{=PRCMD)eTHiHIlRw#cmBJ;Kg;z|mT^;~3fA|ZX3yRn!GDiWS
z5{kFLt^*G@bYF_=)fUF^wi^B~o@ethxUZ~JZ|W!y!%vgS%+8Z=&pScmk`&yp;N$B%
zjNdLEA2!utX3DwUns6`I@^K7lae6A@jm-N;Sr$rK>l^XS6mp+|I8d?=pYN3_tHoS!
z=s%&_ee16iaNQAPCy|J--TG@9^FwD$ii06H>|UqP?o=utjLE?v1+eAFxpB`ZWkrN{
z_E587%$@OZ^@96#%${in4}qc-K2w25sy=nP)%UR&2JSm&Eyd;(HF1hLVcOTE6vkzW
zr%4W|=O}d!$(aPq8j%F@+R0T6k~MPlm#SM1?8|skITa(lgyN&%JD*2tqQm2HpyYL>
zki?NW;`f_~^OGi=CaBXpX$0?T@61&H8{Z#?eGhjnf{>uJTl)>rUIp^$6=eBUUx`&)
zKo2?CtYT=o-hu9QYl-YEOi5QcZ_TL-2}S*b83VUTcPnXDy-MKwsE&xw&7K^%k!M4M
zjsrxT*SQ^-DrLEU8q5I~6J`{g;=UD(>fSFDp-he}5MgjL4dj;8L^bu25XCrVYj%I?
z<VdeB(a(!$leKx5D)X9pvfyzEb&V?{T=N$=L6&k4`7;PNnH9>Lk>`t$mvnCVV67nV
z86}!P!9xN|O8qNCm{H$ia$lqig4Uq9T|WWQ%<BD0BtIa0KHgNfeYS(q`a-lu%S==E
zw)$o6X5_q7K6zMFnYz1`0cC_8V~7bseN3AC-dNRvDh!%=Y8=KCm}K=mcD>jQr?aQI
zd^#Fqr2;fE8k+C|LxDn!c&Qpe$QT^lxdPK-#&LyQw1UnJyw9>zD53v@gX}9dkG`Q#
zdC=Hro9{8wGyDC=Tt%y~Nz$Ff{fqqS{7om;pr<{p1@c5y>uhy<<_U18tsg5C9N}|6
zorZdJ5(CI~K|yt-HI1l<cX+<_%_8ACa(hz!-gni~8ee5JsvwLv`&RF%tmLcn13!_Y
z)VzQvYbbMaQ+kmep<k8Z_`yP6VTKEC;7|BIJA=?wk{tw3GV9E$OMW3KPajl5cwJDw
z>d8br(H8Sq)9dwkc^gL2?BHieqpCb*i~pT@Ti@$*V|QiuNuHa|2PMdvE)jH$9md_&
zeS3!%@DRqYX~3jgPB$`)b!|4RXO?nR<l`Na_;Dwu?GSrlKG7Kf001vRn$mbf$&|o@
zAO6;*Pyhlz@z2de7<-qXfB*mk0009300RI30{{R6000938!!L>M|(k<@_0kZl)!@@
z{??^XEBzUzS|3syD6GzksRLnljOjPsGy)o@Fx0!M&2k$((fb*Y@XXda=y-PtK}NXx
z-)&CmcuO0v+B-sZvH`RI0eA#+MIdtIW&2XF(scm7?z2jo`KuXq35luWCY6vl8tCm>
z$__-D0xmVXNLn};nMMWERl@bQ6$(XxD_yC5o$(B*2bmM<Qv8A))Sviurt<x%EBf*B
z)n*)MD?{sheUd;5+j*3k*@i-1Kb9~kCL4rnc4G!dtUkF8BKAhwwl`MUNa;3{6fub*
z*xD7Yp^(U^Q+uyrXL;H+qPp+wS&RYHqndB|nJQ%^+L&a=7^(Mh89uek)>RDh&by!F
zxr!2?w9KAhaB<z@db0-%7AAX?f|=vDkyokDT*z)~+X>UsbKcH#vB>PvLXghEfn8B!
zS$Noq4XEz1zDkX#i%7w`OWt=D@%&jXo!v9swSv=-a&=sBN8X{}FugkQ-w}*-BUVi>
zJ__xgsn(XdRY-oMH>&QcZ+bfcSP~~4^S)Rkl^;SEl%@6M^am*!9aCxX9CwsF{c`My
z?_Cl+@!f<hp?i@RdY;!}>o6$tK-?(lj&`Bf6G-xf0k)ay-Nik6?$(H7Q!pyIXU_*N
z5fop(Evd*eQTi&au`NK&p6K3Z?=Yxr_nbXbES1tDfmuaNeV7wG02DUst+K!cZ<Rj2
zEz(s05rg4ORO`q)>f1Dtq8<H5v?o$Nis6%Oy2rVhFI79*O;#T{p^22kTa?v6Lns11
zw|d{(V}noJg@QWAiVzQIs4&8*tl+!<pmRq_m}BJctlp~f>G(n6ju?WbXStl^AWSK{
zrbIA0TVV#p0n~_>eN<$ph<cEmy`<j9BbXsvFtuXE{e}El!JK9Y|HVA=yj0Y7dK^@%
zVjDnb$AZ?tr8%u-A}*~MZMJD+OudOTe>i|#k1!+^E%6*o5?+4!ylDU8BcRPZojg+2
zZ72;@;%<G%D>x&w!WL2EHPU4^qvC%^p!28sa{=vs5Ar5ZWgCokPR&=;-~poj2izjt
zKwACXtd#lD1iy$8q2$m6)*HbDTu^ugPQd{W9I^1hm|2K$A{Q06(pX(G!#8?LJ(~{Z
z2<S;j5h#p3X7rPmaP=vsa~+?8O@~14W@qHyUPqE*2SkH-Q%NVV!sK2G1G^hbC`5k7
zW=48x>3(B+!?b6uyQkz~u|Ld_rDEEvjpBdcc)lE_4Lq$KU%EM6!0d<IAqY7}s1AlL
zM0iKlQ+A>}s-R4$v;t;Px)?~3bmcp`4VSO1&RQXYEwiN<@pEvTYfk3{`Z&wA=~^`Z
zb4@*fY7dl%CjxJ?2LR8nq35s~55gk=`#OXZoyiD9xV2Oa=!$N9-Q5yzStsAb?cWpI
ziT7HoNjQU^N(=;>Ov7uyN6-m9=ENsqh!TGy0q>ZHSlMXytAzh@4muw`I6{yCPg@y4
zE{4Sjk;6%~W7E?_gT!0}7o~N1L|9VfJay<_NEh%@D+?-Kw$A(Tyo8$S!TnBUW!8B9
z$#Q~7pa#gQGX=rOaSATo%<6_xseVAzd|=C^Me1juRIO7@$Vv{<XRBYViALm@(safH
z%J}#hjEd>xgaSO>84m;HWkKr#+#&T7ZK6@v7y1v%H2ZH+%6C$k_4=q}K)xsV4#&T-
z6OBe*YlV2E#xZ`xeO1i}O4)R*oS<%EieluQ1z832PKjnu-n@V|4_E^-r(>hRDYM#L
z-?Ke#c7NAXW~%exET46!(xfG1K_)+HwiHX|QY~t*3A@t_0@srvn0amWmN2jY00RI3
z0{{RHgzDH>qoa0t=L{*@dfMP1H@Uo@@h+eh9FevdqUJ!UXdwRQNQ9w0ilG7!oFi}*
zpah=hZuFsR0;(xTM^Z=NkjHrQL&U#eD<QjKSBgTro>8hiuh69402J`e*>nk_^=Git
z_I&{zQ-T3WOkSyoQbJ>eD9>p(f&r#7X-3%Dzz0%^mSQ&n;nPE07$dD93O$hYeY&aS
z7=72CGBx!;5Fq`ouCT_Nw=Q<^v%;}}<w9raaS1r6V48U5TBr8)6v8HFfj3eT?D^E#
zgij>Yw@o%LwpP!J2y|-UF8T3U?p?4+HrD@5euC{t@QB_*QhL50uV{rOhApRo?_keW
z+CRm#&xz5iVf6w1+Can-2EJF+F1RBDsw^RRnNHgCEi9A<uxd`5I|kS-H1(mY$Y$;j
z?xlW#>`eHH7nn?KA?Fi6*3N#O7x%5XA+`VJGG^V%Q8kSobokuTcf3SC9sN8U8!`Y8
ze@h8cE0~7%QQLDBJ$~t7$wm@UL~x8<oI&T~Sd53|wv`>zxD*^bUgI490SeWy^V4#f
zd4bAD-`PITjdiMOj)Up^2;c?vHP8R<P7|g~zEzW_{<VMi?#%`&_hL_nt`7}#pG}d;
zZE2Nuq+f%vnfxlKM9)1*7iWryMxYD#1f&V`=_a~I&80{$`g3`yL@Nv4(f!!IyZmoj
z&RWc`LQDRuJMDkHsvw9AhoE_q{r#I?rxiE4XK6%;dviOF`}zWWlELTiO+_?Z+rnMD
z<Zb589IahaXN~LLOV1O}ASk9BDK>#NsIfb%5yYOwFy8d{N-Y4({9p_8A<5tVbc_Y^
ztR4NW{{<b6-h2kF`y>>-*?hqh+K^7<^p*|kQSX;psadC=gYPx~n}@>9O^)wTlFdc$
z;5LMYDEI2Z9*8$mEQrp$TS0ncAfXf}8?g~#E{d*VZprlzCHhcvhY|aIJzP&CPLy}*
z-s^?3X1O0SDj(?PE*0wna>&N(#>DI?QmoTuLqtf8Z#2ZNc0dS$>E7Yy*8Z^p-0~kz
zeF%maU-ShZO7ijAhr^RAFzVFhp1t=<Cq#D$KidS@hGj>{ZOJ`9Kt(MU`RN{}jV{p>
z(EpdOxTGhqBm96Ss+O&kyz~E>`KILRQCTYtN)WO#n)>0BO#{+ZcIsxT18f&hj$U0a
zt;4VaB<oqS$$mFrKM-!Ak`~I)=B3Z|9GPeL529;b>bW5#Mr~LaZ0(p&=uEk-SZ#aB
zbk;oh6|fy0N>PBHt*qhTwM2St_@b8A{E~cLnDJu0SI4*|Z(SVWW!NflyLKsZO<jES
z56}~_0KXMD#agbo|2>a-px%LSbN0+>O`L)CI2^SBwRN?}=J5Y>`NwJ2VP3DtYtqqV
z{LIIkE-l8o?GypNUz*xr!LSzNchd+UG--l*R6p|4pn%#|Js@aDN-F4pnGazs<9V73
zFHd6LftL??5lk0N&r*i6)I%J;RF8XbH+MQ||0Z*4vT_PCbk&^VcjSMAe6p>Y9Ao}m
z9etgh8Tmx4Yl$^`KQ0kc<CpQDV!e=w2WlLih_SiN5Fx}Dlw6>`)oeSQ?ZQby=_Pu~
ztr7#Y?3%?6ZR-VxAKmx|ybWtGZ=|c_%)E)NwdR#rpQj}g-wNo%AaXn%i2J3H?FE;U
z;pa-B+tA%Z6~d|xLQ3mcInM~4+7Fbrm*~mdT+sBh^19@h`m?g_Qb9O+pWuUGrlpk?
zI_)dbH4TB95k1MF4f>RZI&qZgXqcS%`eGWaUN1iZqLnQ_vcVG%BHaX66Od>qtYQ(S
zKQnXZy&fx<5IQev!x-Jic9$$6gyh9_Qu=MC^AMd5()%dPd}Xfr4b%fkMeE7{+#w~=
z^0{T`O6cQc1u@%Yf}}zi9%T){?xdFw9gnL0$Fc?*V%qecPoVZ)CHKGkgBKVje!k$W
zZ)`o&B-6yk;Q&T3?g|fR*?e2i%^}W0_-)0g0HOA*_x>d&uMgeK@Bd~;F03$5trd0*
z3Te-kim{O3)Bm+Z<pBYE5Vi@k+3<i)-G(L+d(1BUMB>m=0?(kzWbUd@SM!wumG-AV
zOZi~@!B(w&MV1~^=CQXONA~ydycXY&e>lxLE9Ho-8<v!w!M0cfVt(Mkh6^)!YdcY{
zS)F<egKE?Vi=%F(UUXs0FWcY(2Z^e*xbs)Z7Q*44S&pLx(hOaP5);5IE5@0=i=zt9
z<N1z!l*m+hIG(&pn47j3OwXSD&yul(F<!_Yn)*uNWP_!dhyeklYPQS5``F=s^z7~f
zkJpg+YxSS-FU(9P+JOEd;;m_-<_1(^Mj@1l>Ic6q_x>%1#UMpUL4`rzKEr&&Jp4T&
z-^_onqU@gb#)Dc5kL40+mtJ}tCflq9P`h+B6(%oR6HfSFgC4&#lj3;-fo<Fr0LpqQ
z{lOr<{O3i5)k2Mb)ag)Nyht<h>yUxxTfcFZ6GqVi$KDF@lkZiT%8hclz|=h6U9@0|
z*y6mk#p>4|Ul(%@ufF%c@}z})4fNgdcugyllJD)_s(vQLp(-`77v=<*{fli)u5+w<
zAM2o7)@uN7lSp|tXHDjnIhpddz*C3B5XOQXwV?tNDg@ov-^-}%#|x_Z+jnjD<B4NX
zTr9nnl7%cfIu8!*I^2$)e`OoUYYj_o!25PjxJXEs7h?tajyI@cANuURxOPGZR8LhT
zcWEJ^+OfLXnS|ZkxKV}HG_ONw1U*-+RIs`_kmra(s1<wUd4f0_Ee*6UvZbq@W@GYE
zyfrp-${$kPJ@f;K7L`o*=EhvTTai%wnrF<eFUA+-@kZ&plCAWf(?CnwaT7VQ+IIc^
zj-yNKL+pScn?YzW=e!K=?91H9;Owev>)+T|;VoT%TR&3c=Qw`#vAvhB%Go)Fuj6q2
zK*jZA+bwrb$}GG)p85F@?wJ>vkKS5Ytt)y+(`QNF-aDJem9%eda4v!-Y+wx;=XOr(
z^b}mi;%H=Y?ES?M4^LeN465xz6{+@d!*c}NX+4tBK-W4BZYRP|OzbpD4zc0uFzR)%
z%-dn-qO*29ze=9&GekDrK%k>?0!1^3S|ueGi`M8s(i~Xf<U&Q@?Izf!8gZQVR99K9
z94m=hD$xpn9$!9+Lf4#jhc#T(iwsNE7<XT;%oTy-Kzw9vv*IwhRDJ?)Hh<MGe-f}M
z`!TZO_wPYZ2?_K+t0?*(Ba<IRpn4<&gis~h21s({&eKZfLc7yeQ|^Q`N`Je0R$L)|
zU)T%mSofx7=t}pUoQ$OmMUb1Gf=1Dwpd;g3Ngn0yIqBizz5$xm9XtR3vN>!$aBx$-
zxULf7IkS%yYq@<p;dy&@6~cfz13`h<Vm%yp=l&gr<QnaJ(1NbRm6BK-@$YY*m86w7
zG=~jLYj-m<d%r6K6La6u2*D!@QI&4te7B&oTL|^Sot9jb_O=NU4&6XQUM{WK`)A+B
zY(mhLycpGK4mVoExnid(8S)SROCKPO*hW25oqxn$Z)F&a#pzH*xBpZevLovhgiHo!
zoLc02hS<h=g(p1;au-cSrF!^ie9;<=TRE4K5ZYCX86x6&eAw%oiHnRI_n=2>e+yn>
zJEftf{n8#N7~yM=4zn6J6Y_EOE4df}9COm=d3_Zt&Gb>thTxJ*Qk+3pGsnUS-YFnk
z;txfpEXbRE)9_1i;_IJ@c`;gPRPP#uZ-2!)%E%EcrCu32$el?~KB(p=FWY$O2w~8=
z&FD$!;@;}tIG@6R!3nRPYOEq_T?ncfZ{;?A8>*k?`YTK_c<HGV6oc-KUOs&aklW5G
z$kN?HM07p76ZLu21`iL>Stt?^p~s@$iSv!jg%m!-5hgsle|KTQP+aSFRk;-V{z@T$
zhsn`Z@HHMq$G7=#=9I}WIHf#V3VS6@vNUFrBh9GZj45NV?~@*s=&=$iQ(U+C;;0%F
zYb{ZgQ$J)oYoL+2;zR?)CmwHw8*#$iOyPU2BIF38iPiQX{%)=$BpV5IBQ8xdBoyXd
zECB|jl5bvwjZrOqFu#PBu-65tPklq7)W@Lx<91ksHxNJC@~=F6kP^ET_b``<N>XQe
zQELl4yXQyo{>0#A_p52^p<!yK&Cw^^_mfp!7T78eNV;kx8hc)dK|8GWRLiuY=ygd#
zf($?75B8*T!7@fwAd1@Ce%M-pU(^l8e~_6aKvj|rV$ugvN_fB&I|U9m>{H2isi4|v
zkMq$2xQoo|t_+K|vP}Z}B~TCieaDxB@FOk(Y{WwpiF)5aJ#Sf>GQ^aSZ@UI620N&C
zpwLG50;u0X3g>aZLY`Z%B!T?z>o;==FO4IZFC-E$fT=UE12td~*3Mtv|9s*FC_;?C
zll_o#86?!q+^y!!mEPmEb`ZB>G`Cc2^E{UP^|sKWHh~pc;re6B>K=~XwY3eu<y$wQ
zCIS`G3cax@09wG3Prl^FFql1<f<f%;T)siS^8~o6SbWAF(O~*uL(<lSTbwM+bvRKU
zI#seqMN?ahGZ#zk2kH$4FjF7Ytw7S1gJ}_wEyB!?C;n~8@;L_yvzzSmu!_HwXFZ0H
z^PG9j>M9L}o7a=mI*lAxj0_#&a1PQ<WiAj`DZ+_}m|u*q)&mdiio%tq7^@#KNx?;^
z8M_+jodDZ=9XbT--Fxve88#FF?EO$Bxt72La1$3foF#M5;qwa@*m%STrW<Odrdamz
zTn+3ct)<iXD|N7kVT~3KBAB?;vr4SULveqDqtc4XU^fLxjCNRquycXLY<M3ctFvv*
zLd1e)Z$;r6e`h`dS4Seft615&k(G?$&l306I#cwuVOdLjzH>sqpEuC<`OpV%#bmrU
zV<p<(F7;XYLptDC_w`j7JZuuo$+d6v^{60Pu(x<qP2N2*Jm9Xf2{mvK;|+ig22ahY
z1-Up3EK|6U!qB{H5>LYOUdIP8y81UQ{yc4*S8)lN9>ia9E_*!b8g$>~;GX9X5gI-$
z<lj~`XX7pS{iO6@8xtzpFm|Nkc;df%-}Ou;uSs@NAjgfPN4C({{vh&A)jP$ceS`~c
z@dg+PdiEFfe6X463E<&Delj$V7ZZK9-6(-bEf?VFQ~^YeuZ{<F_Xsl$vUIN2B`ST7
zk<g9IU4zDu3$lj3SwIv@0co;Pt>kR=k=bm>LuWbJA4LGQr00-s@g9~^U_}4#;0cPU
zw*f7uT6lRw)RQvYWF1UX@%o@2?2w)7F1WXHw`K~KnGd`Yc^wgs<5Qn2SdfCZkqEqm
z6x{`FwK-TwU}pkVU6<B|IW|!D@U%4%9wir!U;FemVM?bCNeFGnJetiPvvCz)D|GgG
zp%RLgDJ1VdN(ysKnyqoOxSKwYNq|zT76x~!A5hELq%jK79P*#eNqDzQX00Zj3Lu`n
zWZBhCSyy3dd_4l4{-Ru%h(N#8e{DSgU!|}VJV%(|O@%f>h6kpEpaISBGM@pO_p(<@
zwB*Y<QCwxF5###?_jgGPqDe4w_9IDl12kf~tfOxM>e+IUe{k)92Iqu?aAo7jnYaD$
za;w6AZP3_A97jb@?o^~mTHBKr$GE=ZAuY+)udTZu2pL%!LgmI!X0WB@S!MxfoG9le
z`s$JknSR`GKOn*V_ZwJ6NptyUVMPlczSrQFjcpmV=%^i5Gt|_uR4Fq;j05sc&f2oA
zT7#>j*QG33yedh>l<$!47@KyI?eF7<f>rq2(m#_!9d%GR?6l`}8Gz=PN`Qv^eX##3
zMhD>A9;cwaSg45XGXS>)F>~Tg70Z~gvR##$8}$iFSg-@WH4dY>7n_rHgU=NjsrYJk
zgs9fQUzieO^`9!&Y4sa;m*ysfyT?2FT*oRb@Tr|my_#JwVBVtg2GNd^C*iOk)3Un(
zqjs*_lFWfH{x+7^Tmmreehk9F_*Q<bEUIQvJ?8_!LlO<dHROD1y~-DzYLV9@GhO3K
zJJD_(QFm-y)@wvt;ZQ|mpXu4cCZ7mh$%n4}J*e>|4Rk;YpW|Ow$YMO}vCC@hTivx-
zS{p5E<7y!&nh=u3m9bSm*691v)BK7)(V;s%aMLQya95@68I?P~<TL<1=*V$ty8~`9
z-V;|meQ7GK#C-NZ%thiwlrE{_gV}u8$NB5Ka+v!!Cl8a5t!J1dG1w5{d{#fdYJ+jO
z8cChRkfve&dz7-ztsKon*CjHLK1|e*-&tM95CL9u@(r)7ON{*J*XSbkC3>b`OtTo5
zuivAII=33)v6r{{69M?%suQAeVNza1QX1}kE%_R~)WsAHo#`P^y?Z6|ogQ;otcD^f
z@@VRz4~Qex;RQDe5rZjJ{BBI+f?nhV#&prVN?Y8ws-K?qN82Yaen`j!ufP9BCbpk8
z{{Yw0MOC?ZhWnt)q{%<;)hwCJ|28RZUY>pEy3RGXlP+13v{N}@w#kWhy3Y<XTkZF|
z_Gh+=s#4$?KY#pY044B~nG%|a+^Vj@8SkxmxK+mpBl;%GG?$5-J3gsw?fVk8MT+}*
z9Q-Cz6LP$*4&MRq#&#*?JrW#CUjQmUK_Y5XQY;`BCxs1F_Q46FB0%oGCN0s6-r|)-
zoif85MDOj<><iZGn@`MBr6hgdg$+&ipG8lJDrZ{tZ(5%Nj4?@E;j%V`)ozpK&pY$H
z=A|l9O!#`nNcrKimX@fiSlxHl(?L0^6ABNO=}LT>k{Z{!c4^{|%*AxXGMNDquCJET
z-!NWUS?%iw#tDo<!=Lj(+iDm=kpg;@#~8Rm4v>)L<QvcQm2Q}`2e^$&0r?wo^1*ga
z%EP&*riA2PN$^*&ZVH_<A=I}pXsd)ZT*HDtwoH5}MQ!PvroI;g%Km`fQ5%EdLU~@j
z02`+dat(dX$2O{f{rg|Zpg)<tT%MrKC$X>U=T`%D*#o#*Z|QEqdAPzbuP$nOAld)t
zm<TkBx~h!YOK@YWj45#27JtaqZHESRPnvYJ0DBK;(O%u}7I=hw>$%H`v7pQE`3;Da
zmbE=}GQAGP?XHSXbjHsTgBP+1K8i_?Ky{p&Um!9v7lXgH)=MTv<$knADhyMePZUcV
zR(d553TrVE;hUgZHNg}Qs*&+Kepz6EJ;f;<Q?Hpe|E50Fhr{a#mGm=TUoD}kN$c=9
z+vK34jLz+8{%JoM336Arx<3jr<_PnjpxDjoqUA<yJ9Lj`&vmKg!2#vUR{Jn`GR^?X
zYy3}YjCyTRZ4XhuOP!|y6@4DG5gcEJ-ZuUnx^t+cZi`TVdUt<QZsasYV`S6aF3PKB
znwjEz{Z2sFk?=CCT!N(ePfKtgiY2Gajp6YsFR4mVSci_``IjL4t0<Fal#ydb1Og(X
zpQ*oTNKP$8p9}mV^%4E~yG4Zm$Kw+T|A2gV$T1E3Et|okQ%x&-VGOZTCpQaLVj@yd
z)%QLSy3z)W0{o;f6UU<_?7ZvTIa0zX66JauKPVYPdb~|Zf_}PjE>XK4hdD~P0x%qk
zmM%W{Bsqiy+ze<qkY2!~y~4N6m^4p23UbWA8kL6Pn|LS-g%exq38`@&MK4se*g)V}
z=WwnSh#@8lNBCaq&a0#<8CxL^f&X*WDqrPVM9jp37GY>T!urP(WdNJ0JU9ZO&M!%G
zLqRU5ZCqZ0=yILjp>K&vjmBEK&^GuEfQG5(=I9KXpT(&B%>jJ*7jU%s(O@os-h0^$
z3gN%yEoJThnflN@EQ%kzlkY5jTZY&Eq>7J<l5XZ(w}+6Hcx60r8^&jregber)F@w;
zg~l14RR5e+M&|dc(JEt8Ac2%Ml#jVVdr$SLCa4Jt5=bjNN40HNvh%}Zh2jy3)un^X
zL|^(5C)EcOYGlE9&=aVeLis+}Wjjep?HmSytBJCcq@i!XwWAzY&{^=ZJ9#yxswcq_
zvEy8ToV#|tlF&_g>TGG#+_kG=)$M#rik0;+C=Axvh!|4vHOSICWY$T)MZfKux+~~^
zAL`oo>}xr?U+)ekR;^<vxqg*njbES1CWaZ3bVEZXIJEM27K~1DlwdGyJ8Y(FHqlyk
zQJt;2S4@a_=v$)WDJT!Rm@n@m4|uk~60_S(iQ7Mz=ANX2#{%ido0JOpRMB-8dkx~M
zP2|Q@r-V<yYJMAwmH&ckLOJ$C#txwS^mhoA78-+#tuuP<vZ{bHhl?!|j(uyS7x9vd
z?;MNvBh1V471fyK>NbL{XrhGlap9zoni9u%f>W!z2T3>zPu4jCC9N44>wJryDb+tB
z1w~4Y&T#SvcFNlI^k86+esDtXJga~;k^e>_g~zg4G(q01@fOAi=n97vOW5t+%!mD-
z@{NQJOd?)rA^xN$Kz!l|(e?^zU`oZk+VTWU21dDKIezRpA?Kww=6z{yUyj}t3_V1-
zOMSAlYi@HD4Ld0Vf?E7~j;KT{EICI>gaW4h1>^~C1y{>tP&DLBaxfmCy(6EW#1yIp
zinSOZ-r17`^lQR!WF``Uf({*H;v-(-z~$`7<qL{(0*cjyW!(L_buMytP@Y1;IoMr{
z5dFuGS}umpQX-B+)MzY_`4&r8yqo*TcGIF+OQJK_+kl2qa;<)}3_2C(8W$#j<uQq2
z$ZD8UhY5QI<}&QR_}IH`U|&4jGaWE+G$zKWhI#HH=CWQf1v3SJ?T6)RxJ+nhL1A5<
z?1ZBg*_rPn{@s4_X*RXxDbyJD-Nu(UZKzaMRw=XoL4to~iGIxDs09u~<D-mamW6f|
zpd;|MGYnQC?%Y>`z%MVq*Q-`|Pr%)8J9}&G()^rh9n5+vb^C|}$~eG(X%5qTwAX~t
zYZ>T^x({>9hwORxS2y6IaH77p(==&Fd}g4En)B&r`=*cxMM9|~4fldxzhH)Y9FFO@
z$+FzKkA575Rr1Agp!z`v-ExNzhXwUpNr9F;G2i?+ikB<;G)iBgYxFp1u~`Tu0hzw4
zYX?)w<+a}t@659v?fjo<KY~t`RTQyZOVc)19OjwZ*H+en%-~{+Q?F-0G~0`hkp!Ba
zXYJix-mXZ8tM@;?!cR`3DM{QG&E6cD0`CJ`)dmhya2N04UfQSaTZs?6$eE^s*zCKN
z5yL)8c~+_Y6QrJGfV$y<moM3Kxh-g(o(HHmPAMmE+(RUXiQcWEG*<;^lc}$55m2OJ
ze3uM7`TVda#_bE{UBvzt@ac3PXMCeR5L^l7)k?$96B-S=xH?~w&<!Eh)kME;1T+Oj
z8Jq?FApm__^PA#=WCVOIT4zH>%q5|+yK3F!=zQ#qI8lZ|Y*dC~$-%0Ix}B!*qVSj7
zta2aqm`-_!TZH|nXXjgC357^(E1{oF&_ylXMP^JpwiVi~G8wBC?Ne%M*1Pc2&Tg0d
zy5_OKSr6mGQx=Y&Jx@Ca0huwg9xW`|Ys+cEYik+yy+UB+-hY)u#yy1shp<;IP2d)E
zw5~NnJX_-Kc`}5dAfbCsKjbEnSLI^aMee!jc8^+}zWfmm$KE-n8*#B3nRN7;yK8Yo
z+GuzAPXBn##Eu*DLhY>i@XNth@S3HdictF7Tn$lhF2)btVFci*!FFr&=kFC!>b@kz
zC-lh*GbQzIaSM9lh43u0u9AmQCSb(*bnaR1bL}uV{U+|*l8!;nc*mSQGaIhk&KnB=
zDg%cz*{G!(kb!C@_HPaJ?%~BLBOXua-Mzd|T`h1|UNXP>z$mhu5wg@(@AW6MCKS$s
zrLPbj!BXifs5B1pW<Nk$%eICyDl)&6bL7mcD}icy-}T;%8=DsVzA~-l0vAUpydRJM
z*~7QKI^$jTvk-y5adi<#ratwR7u+-XhsA#@MHbGLuwBRLX8bU?ugLR%e~h{~nG8~l
zWK0hOPK$&^RgUaqe+hjwT*Ih+k+F18@>_+klK3yC*GZHGY3&LzEq3gJ%{d1oe=b;{
zHis@F4_1gOC6x<uOiclO)l0CuUD1mscz#ZKJ2@+qaUG4lj}p3o@A*^aaQY8QrV}N^
zNBu?WsJO5TJG*}#l)`;m%`&6z;yeO}4OMSNN;3S#TrR6i#b3`s1n0sHVb^5w26xZc
zetR<p)hAvWDjxc*-atc}_H>~eEw0c8(%J%5Ua)kyPI0w+P4g$vTbrG}TP<KQd&~*>
z_P|{Gzo>Ds@3l&zp98!XO@AN)XE&}lD8df%@tw;6)yl82Vy6<dL89zX!J0;MZL$13
zU2?dU0=ENd?{)BZXY-lL3p#kf(aKe~m~lBBT@4L=Kb+0>Ew8AsjB~t?(il_g7lc4&
z6enuZT5NXby~F;<(yV`fj3<ou>))Mr%BJ(+I5GRni^07d=O2rXOd@_PyIIbf6??>i
zVe6tv-NY&V0?>WZ2DisjfTR+4$g$mr*K)JRtIv7A<DZh+d%tJAiu60L)7=Qgt<bK^
zd_jj`<6VO+wp#i0Gc^%H-UmTm4{sq;pGu8gb99#lKH<y5T7t~8Fl7xOBS{x4qF~G;
zM*7s(3BbWWUZ*+>qID)Ou4>%5xnHIei1-;(UH^&*{RB<fKh<STWf)ts^p?27-WMgb
zN;$w)oqtl7#T>*6CQlBTwEa72Vef5ZG2+rEb<YbGhC$(Y7E)4C7T^L_w;Wp8@dtsd
z^M?^`*;>wmQo`W3Vv5EfjcPvKZq@OCg1d`XS1UXw$l3*451)~{M7s*Z<?#wW>DTM#
z3>f@o_&Uu^|3YixKeq?xsUfJ6#UYEA<b%MC8=~orDAOfHkRfr>-37QI0`L2MXRx&8
z4mF_qPXF^xXTg_iitOR;5)PDn8f9f>&9?n1aMe-9>oUqd`DR?8D_T3SV(OBIj)hg=
zh)}4zgVKNGXE$#u8CorJDnIF4wBB2>I%wF5d=WrDuVb!xR#&v}H?{&MQpmXWBXZ`&
zkd`M#jbD~vTcK)vX=b}!1x$o3JO7ZBG7N1~*5{OTmr0fxk(4FF5UhSc4(c|1qw-La
zHBKLVIBFZ=<V{wIY>$GgOTV;28AW`d#_Li%mCHL`pP%kgx70*ZNxZ_9HavM<@c|E*
ze4ke4$<;Y--O@!Gx4^Vg|MFDL;1AO>gKH?EEXsU#JR|drFgG=af@fCjTM!sq%zH$c
z<qAQ>`DO?Sypc-$MI!!r{}hqwu362MW@)wjN4Cp$Of}`A^OB4o==#tBDf-U^a%VYN
z=6PbmF2f!0`kqF2J}<3Ws`6)maO~&+B4n4keiZ#5%4Pp(bBaSF7q}(GHiAPIX@>R`
zDS0vzWzgrd$j<fRn1b~=NOV{sZI&}}!C?)SVF?TO4N}HF$3iqN*yX;9ufP8-Kp6w)
zudWy)-EX@ar7Faq?YlSrtCY0K!bqpP!@fuLd*~;2%t5XR1A`WtV(5+&%r$SO(lQx+
zx#R^S*>X^;h+s;S<5po6$OtXdV+}#Vwa*Cz+O_TS)sK6_2*yA%SwTukBuj}%i}9L!
z7JB9SVgrEIABgCMGKHY;4_$C6!KddA@3?aFlX(tE5~T1R*<F$UrcnWx0&crP6_PK+
zSA=dnJ;~~P^TIJ-!N=x4mMJAElIe^}o}ukbji0EwlE(=~nOuHA0tj56QBhMXu-Iy#
zZ_+z}WOd-m)FIOAV2O`mIoCg`7mDi7+f74<F)c&#)Kapd%2po?D<0G0z(FTPdHE$;
z$%D<A?&NpQrJX%ON9SoNk<r^gQ=k8);WDHW<0NCmfP}!P;1btD&0#KQhEYdRtmBuE
zCH;5C(*R5&UQJoRd9A0XE?y8b{dpaMZ;0?9<Cpgs_v1htvh8&Bf`i;(bqcDjY&lMQ
z1yu*v*%=b>MAGy>wtj*<4cb!z5E9ntTUVW@qmvn!=n7fpaa-gcOiXw{rUAf?gNr6-
zD#w~p0Lamok5g;yWP;FcEnHYON~dXf02nXs6W0hK$y=N}?*T}cb;sH&q_QkQ!qvIl
zsrp7u5iWqg>vc_m(D$N9>^Cu4VkkTsT$B1Xa3^{0kvsALIx&xoAU@rjj-SHc95F#K
znFV*om4{`8?cQ!Jz^+n3#j`in*>4z;F1}uO_fHV$ulC>H%BO3<*zJUxZ%AlVlNi%h
zy<!+ckH||r5|&R~j{fC_C&i;5c4H8F6`dZ?^%?c)#aPEx>8qGZQ%FT?pAb2Vs&|v(
z87IUhVH`A>+ek?pEMA5#)0>iJV}q6~=@5$yEWjtkSkyLUWImK07`s06zT}9s&2~0C
z<QNB}{V4qhc2x2m*2NWa{C+3e7)4lH?S{e#%E|r-BSyVe-Vkeyqn()K)Yw7?&#=Sw
z%E?u|4Pbe+y8&;k*0oq){dG=$T<cDS9I)HCR8*QVLA>Wc9TE!ug!w~K`9IYKDTqNW
zFQM)u3dwrH=)vbeno#pIO$@}(HF$u-4Sg7aQx}=qvqY~Y;IO^#gOs7<h}KI}GITJ!
z8)D}bSO<5*AQZx<g=Rk=n4r24t_V7_p+qg)oB$Mry26OuQ~V|`ngc+D&=w6sWz87n
zCmKdTb2YS7!3SpwRb*@qKvlMg4K#nZinbQ%g+3>tO<J(ZS@Lt2pa?9Ueh2xCm<RFz
zC}t<*vF$^HIT<qyQJ>i6g}jDLoTkZS2awKzWo8UVBbX_Kj!2E8z$j<4`aGZk{B4a9
zKX>8)kAXR$^EB?)kI~y@Mo>NO%sC4`B3I&717B5_sL7mpa-~i2#^Bc0?X<O7@Or?v
z-tBRc6p^Hf#?sG$-ns57j4#?-Z=z4mHo}(AhjQ?nB3lmmJk@-Y=H`FO$-5kS`rcvX
zH(f=WI1;%Y{b;-Ue0p}>g3?nRM+F;QAc~+sdjPRscMrxt`2LQFN%_nG26C@exks!6
z`F@n(OR%%|xmp}nq4Y-lLo|LZI#^lLe5v~^U~|nCJmi~a$EXmBg()nYWCeNE6=CTn
z?RPF^wcJxs%K^}FFn1PQMr%O^EL>ybgRBx#h><4quB?1Y)9%csj`;83-$NCr658Qs
zgL6zYw*gzs3>=X<RZCEb2w?R$+{0l^0#j^Mng+E4TvBx47;8+1fzgZR-_HSoppF0;
z+C|DtOb9HG`vYTniMRlPD&rF)MIX%B1*gKLcHF9FgCdS6$lx?xtfq~*B|GXBYsZMI
zV6rLejbY$x{`e!8w;f4i#{;oZKoAm<m7sDApugtYe>R$k>X%ak(`F@#C5y0Y9YNF~
ziC>u&_k_|S#b@k&fS?lTN`dAfHGg6sCEi2QfCgUHpCtgqP1CC1Z1ZdYN+E?J-U{lj
zOHqnHk6nEAO_ZKLP<L^-JS>3#Yip%aqQOL$$84St19EaT#qMOk+d_28GYu@FL5oBQ
z<?IS3u!>J1l$Eq&WVDx+%>OmxXB_JAQ-oakfE=Q<4DqZzN##edDGP`SE{YFEg*FNf
zJ`lZ0B8X$z<5X1xjmVLo+L;Ay(xBUg8$_a$NY)(jV1W%l2Mzfuy$(F^CWDe)?~?sU
z>%!G5CxuW?-H1URT}PLbK|VuJx0h|Qr4i-_p!YAhQln&$X6ud)*0<Ti{7Nk?yj;x3
z56a}BTm3a()=Ogf51FnF6!bdxLa^5xe3HRa!4t}ZoRJR5ns+k9!Hqd2*rA_0PTa(=
zX~>2NC{|qk1t<KtcZfV_B`8=<T%NL&L1?)qLw0=U?x<z*I$jf4{Q-m#*v#GOx5)F<
zu+*ed`VO+b>o<LlXD*;B2AtDg>DI4nE2D?2!9uyc!hxc1lBpx4+f@Kky^f(j;0J_^
zNJzT@WH`s5G`QUb{`O8aWsHLVIbv}0=;Oz1&?HU@>70EQIAu1%-B^o2G$A}%+lnuN
zl|>-?zyEQwBtlh`U!FOQm?b#*P6~;bmCSX=Ubw+OUcAl3pT<ia%5qYrR32<rY+xcN
zf)ZEoK33$Vd=e55k<j9z+#J(Y@9~%YB>*<mb9QYT+kt}u5O6toI_SX+M)enq!v4lH
zoRRGBk;p?D2Z;Db9HxzIJQ`SbveO?u^gP(0SL+Gx^(hBepi+Ar_6YNoAWwyM;Yl#I
zfoM^`UyWWj4jF)h9nr`KE@VIWRTZzF*&^3{Gj5`DS!ef*wqAvbRLbsY$hDhf$_Me8
zqVM1A*-R|jx|U8|gmutgflkHxpvQH4iJ4{&+G^<jz@C<8%tOyLwaDlW{sL2--lZ4m
z9=s!$;&@J=#reLf{qVn|u`_mV3kN9Qu-+n->Gm$`7!+gC>J5+g(F47dfb$FfWF$Xr
z2$7Wh)^<Z%KzZ~x&und%p@jRm$w@H>S1|7&W4>~Y-BC+ca4ZPC?%Yb4XA2S?zYHy!
z?=d1=t-}4TtDbf2x*b0<3Ctb_c^bZ|kXu5!P2;xq{uUY#&?;?neSzDSSJzz&r<(c6
z;Kk)H+JSN5{3($(z}@}?SshGw$|WOq&xgG~WYXSG<SFH@N@%K&6)1ob^;U;*d#{?+
zWQYXIZMvNK^WzkAs-OiI29<*xlJ;S^lEHEk?loX}aLX1U={g6;9=cI$89N<QOe>)h
zv8Z+6rY7F%+I{q2C4tT>Fc6>H!7f_^QW-9HE^MLIP&^U_oFWl7JSFH}=B(01o{>cA
zH{MnJuUQNg(}3EQOx6sShVr+(>9+Hk8=tfLNweWWd)=_XAAO|2aY|QHv5X*JHADkC
z57y!=rS&JTsvoDSy{rU+&p3hHIWI&qmBl~Z|AK|#0Zh8^9FmTkm=`SC02j_!7$J4s
z2s&s`r~kDckIS)#UFXb_e(TG8lbMn^_3%=w`@ahD91^X<Nr<Psl?&e@m`*jyWiy@8
z5z;Bgyrn^@m_<=6xIIAbXzvjD4<vF6WA7i{8%t-MhcthS;q;X~BO3VyqfLRocO$qm
zGMk>Riv@?+_X!o68(uw~zs69^#o;*FKzJcMN{UvgJq&)au150Tb`4lcWGS-V9a^vh
z9&qe!{gI2+Mk7g0dr4q8Yg(EQOG-Dt!e6i$FKNIag49Ah`PZ$L`h)r_I_ayH@1&Zr
z$ofX3$tN+W-j~^WV0=D|LkyDu3)`&KJ{&2j4l!SVadE=6zt`K!DcFOQ6tjv|js60I
z(-dEloLYdD4b3BP>oL|D-ub43#yeAf1=Wi~2!cV0zn8K}r<=yKRO~#trm!Lbb_>Mx
zsU&l#Pl!XxUzxZv*Zs%Ib0*rFxQCTfQ6UNP5tR3<Ndxbpcl9!HBlDo4W(x{~m6p~K
z+cjbzEM1<)O{ELRfXFO5r_nN7t@iU>3QROtXL%LTNWm+1C@ah4;bRuz)Ycat1_PfN
z>MO6FzAo!>s{+9VbM)!L{DHTCQZ<UKl}X!g_kb@nv3eL0R!?d7Li{<@_WXEu142=e
ziv*^Ed&rJfxuD)twZn{XqHKut5UNxiP9=~4qvA0@puo`7VuliGZn4lF!QN3$_!rK7
zE6iOw`kEqJTPB4jav6el*y|gPd}SnmMAsFynzQe4?QnPcH1B5hamDeuc{?moE5w4>
zWad9AfXLm&6;AN9p_UYjf*}UzqvAvj9#=Id>kDx6C+CKxSF`$zB9NB+{j$4qI*UMh
z(S<qYuwk+@Xv~r9l#eZhWFIT}SH&bk_=9zCV;GS(nvHNPFB<=!R%;xcZkLI}9xOIr
zvj?3I%CXr>cA}6E`tQ>dTmFBT_z`}W$#R!yS?C^&wm1VYGu3kS+_b{6gx9Qy8uAg1
z_7YV4tZ5s`)gij{HvTqPBzT`A$spSYC-xm?Xlz7QZqZ8>(tF`Y4S*Ra&rnePHCq$R
zs<&!H;b6FCA9ZA9TauCVC9H7ugokX600_w%$EC~HxV5Qhm@`JUd|T|Efmv6~@2U{2
zEP#c;MG(Xle4U#yH}&AIQEooD_-AjF;r}jx=2MXjG4~T^-J8_bp>XZ?dgo3cR@(3w
z8<~MAyESy{>RjTwYiLUL-7(kNW+<zfVQNCMZwMx24ioAGl~oRSQ>8{vQqGh{z)l)7
z#Px@wfv}Aek0R*`jM>UR0H@35QrCX5qW{W4{tj+bK$lv)P><^rhW<g^;u?^QIy2yD
za>MyH`WGAe_6MYcO|br&<gBZg5N7{JYcUVo(hHv!gV6!y3MfE-_&>8dIY-ZNBRm3L
zT+8>1L~^Uj(sjBX!S6x-_nv5y4i6uS*}6*b*4cE~G&LJe1ifq_A49thDeLqjRo(S9
zJt_(-;q+9o0h@hQ*{yWrJY^VuQvSb73K;$2##b)Il^IzZ2P#Vng;p6C-REfm^sZ2C
z#4$WCuxk*+GpCRxl3-~KHMM@1tu9pGGxPT;7m406c>2m(>!;2bnVaML5i^2F&X=G6
zu>6meN)#z*gQ=zD_y&40xj)|LY5Xv80W}eX0}&dEwQ+a`qHe@B2?H&|9z}t6e8=bJ
z$X-KHUPkFb_$gAEXD)8tdwWLi0tVnJYzdzH8-rXD`)K+kr|I0Zyf+!MqsF~7UsO20
zB;NpRVKCyWl1mYux4pI$<l|Y!O8Psxxmi8S&X?pc&Kzs*uDg<n9h1}f>Jm-mnG9CH
z+CS%0`W2W@nEM}IE&yS(j)bC&0v_Z!mgocTv#Hu?USTd81sKPsPt*)rbW4%4E23XD
z$CL$70)%}NcxIWvG+&IPnHlWM<m_@4bfYEp4{0pd@J34#a%qLzTSVFLsM#CMu$WO3
z&imwEVPzlt$sN6{oM$wikX$LU8+}bD;~$nJ9sQIprARScUNvPzC+U$3xTJr{QHCk<
z^IV-%kS0ObZriqPyQgj2wrx$@wr!i!Hl}SGZ`-!}%=g7P5&wT8>bfqnvMMw8Q+qA;
zZdyQmUxec_=WnmmIp##g#8Cf+$3E3aeAuKH<0yGZu9P4`Ei`t-)@!CDL1CqZ1_(x&
z>*#Vm2jmN~m`K*s$bA8O(ak9S&);o{!*{WKBKDM+)~`@)n3Jau0PJj+)2nmwPdesz
zhXSNzimZ<OBC4wfSW)|r4B?&ANXNUV7dh+ZxEofZF~lWcYs`GI+*?X9@@W{Nl<X(c
zN#FDxCX|%YtSwGzAEMO@IU^dbEOVjhn(bIT@QrBr)?=-QS!m$oWnrY3(rnT-N*;#d
z>5Qai<9NDD%EvZLNA8&LkU{_EotxA0aQgF$P>#6K0iKZ3h;AWZ9>|q&k*~c!Ww(%M
zi{qC+rexhSomb0wvF*Uh^krehw-(mguI8U@bNU9AgU8oixNGg3FP>n426Ir0+z6n;
z!*qWX>Y6Dpkz<L}!^LrfT=BP%HZUKPnmK+i4|C`=<s1hx8QYq6!H|lbZjEAx;#hu{
zyn3%TtA#%J1RzyNA{YfKIKiO;Q(W;R%yYN6{vEy54iJmGyEp1OnzsF4UysT$yf7q-
z^TnBH)CevfNZSuYQX?}KZRD21Ov+QWNMjWMR?JVjsr~@$jP`SH6MX3h)9J`8!#l8h
zm8>7ckJ9h$W$`4r#HWLsJ^s^C!UFF;VcjiboVDl@jr3Y`J4eSeyc;v&p$jO6d<R>^
z+JO2qz|1lQWhrBK;SU0eH|f(aQG^BhF&s{egd7Tbu)?+W2g3Z^*I^M#d^B)5sDiIo
z-QRh6BC@q2X3;v2w&kOdDN1nPcBM+7c<xl+8efZKKUQ68KSvr_G+=v!_0G`7up4L0
z{+PWs|8nWf(itdVF4C_y-(}wF__-PLH$e)VCRNHp2gQ7zyq`ne+Q_+D5~!dIH_uo<
zJzr&m{_prl?v;P%EPzh!uB%+>Udvg=*+DZvU4~V0BHsh-<s%Acj$42lYXBZue#PmD
zY|b>GtoC3JxqfqP-+<Gm7S-R)=f$j5q4!Z9&t&y)nm30p>m|Oy9LHe6xP;}|5h(uX
zkfx#TBF9%K%tt_a8$`Ts>D5MnS7M-wqo~te>c-`kg&Kt!e<%VylxcW`&z8A(zFxzV
ze8WMs-ffYNbg`Tq)qyd!>U?*Pa?fNl@lB$NtVD{?SrgPwh62z(+Uj>1y`tN=&KcR5
zx{qJPq-KUxoJ`}l{J#dokd7xvd4j$BtW1e8opb=BX14Uk6_4%mPO%4Qm)!*B6Xl5<
z%d3X*rPR9|oy4}pQ6KKPyx_L2-!HoW6SDT@sD<M>862Or1tyQZb>j3Eq|WYzXuWn*
z&DL16Tt{MGVk6}4LZo5LCJKh}gpQASK_+kIm^$>OJgnNs7sjX=c~z57QR$9^E(%Lz
z{GdKf>6i;{{UIh{g5)PXmw@ZC42mX~<_j`l@u(yS)~!V{u7DzlRyKhzFMFc*e8FpD
z<$<gXb8+kZ#dPEm@y7l(opf>Zi`PK>>ZvxWW+vvPhO!@S`oY%)K}qh5*^G~0jh#th
zvaI+khTR~JJ(<dOX1@sEtU>3wB$)@Sn?Gf=*;(mI6WB8Op+R1h!zG#@3SzzW77v;Y
z?ozHr@$yv8bp~lm5HiI*6{c+Uf-6!<wg|6!P>LEDYo&J3?%x6}hQS6O#GKIs-K2qF
z^HbvLE*^+n<pIg>r6D2>IAxjMzeWy3EfufD{xYLxM;vzw$k1q}(*IeFI(&i14!#7X
zyy0R<0(z%{P`cODg>`^;z%qb(h_kAWy&UAU#C_=V(2#dvkQI9(GaV|ce>oz|#3zH}
zm~imjQ5?8+>pPvEv@d_)BS$w0uP)0$a^UlD%8}_{!a%cOwb=c_jxUXMAp22LSes#(
zy!`|{*j3*5*@iVVWf+S32x^6v=5xF5xhAsUgu-j~)U59rRprnTIB1I<UW4pc)q4T^
zP1J<;(p(SX81v?R{v8HN^75(hWoMi(7#~h8NQXh!5m{}46oX7b?FrY25vH5(h(Fd<
z&Q_Kpt|2qaJ}sWzTyO9C%DZSruu?J#V-v(z_RV9tA?y-IcL<XPJi<`&F}aoGqGKuc
zdb`qi>lXA%YFoCG!X95MS#}rzEIFA^&}C8f^jQJ=5*S8*$Qb$1$-OxFX`Hc-OBQm#
zkMW{I(x^W7H&1`^sBn-Mk9O1H45JKe$*MGq%3%k_b;*=JKmSROVjAmYxAH-B%WLyu
z90MUSIK7ci*t*2ppY2<z0RP&R_bD!l$63jrAK-hm5y-74t+Uot0(7H1q9*1d@yBus
zH;vJ6TAJhG?2mj~9ZCko=TE!;h-M_LB|8x&;c$`=@Y301Y=oG{(*EZS2n5iW?ce_X
zW!Z3c$8?NPtcqp)lp_YN{_GWaLG8**PRRpc$_(XgM;Fg7kvq4BX*l6FQ*`8`#^M9A
zxTE<SX?%4xFO%}&>)1PHMBL9$>g-bEQYKNhqcUt;bz<_X*ZSXggBmqVyn~JL5hQjO
zp?J^Ea&_XJ?UvbcvhOj#qkeEE2K8rDfQn+XC1M>dOE9a_iMsO*STVuX@#S6pLn{k*
zxqMKI<+Sl~%EtmL2!(?QiMR(cc^iWkC#1udb*SkXy~G11PD<5^lkm#kxo2(n{V)uD
z7bn@li6pO;O;bdY;K|t;-Jl-p>CH|17gk=Df1;D2!rG8v!mB*q=mc20Up~_dCECEd
zX*~<0@%;5B_dyMvi}_)L_=_9nW%fjyd0)fq&3ZA7n~O9N-uiNA^BEcQAT<h{)LLfe
zNsGHpIc>+nA?Oo9m2X9j13hw51E@`%^IwTxi#MuoYkX$Eov?JnyPvY0-kLxm-qBSJ
zDI9CC#vrExvG<uEF7~7egv|?dXE|@4*JGid?d;ug6XZW%?M;%!u3j(@o-`H{4^?Vw
zLGkNgfg0KBo77>zu+nvfbpzFA6a9?oWic6l@y>}W5J{N+$|)o!lLg<3&go|kDU<Zd
zfu_}dj6l%z$J>S*`~exIe2MW<`ykPVgzIPN3NKM9)3lJ0t#w=+2>1j;A0!S&=hm@<
zGFKvpjvx-916bX#A0=$o*EVH^&SE?$(-WXF3>Spw#gsJdX|Q*TLIEQ~vMtPI`)$Gq
z@Ff}2sz3c)^|w}Xu}yRd*+BQkmE0!LvO%N2?-hwprt|9wDjr^G<<5dnK`<ttJ}Ub$
z?^?yu=fwJ+1YagQa)&0Fxi8xN=D)eziDIcYBK71^xY)EIzr~YklBx5ClkHr$!%rND
z@4evrop&4uaP|{C6lrYMN9@P%76b`U;CTGza>$J`B`x39oBg;oq8RZ&cViH+WsHVi
ze20=W(v85aMnV_Qid_IWzs<%D&eRXNDO^VP#a7KvSHyR#jt7G<`!$v$50x<vq-=wC
zL07#pJtPgYEba+$Migend4rvkR5!aUUnl}iu|gVs4{k|lgWnjr0T%j!gt+{+5EpSz
zK@%I>Ia$Pw0^0ZVs<=;JSw3V;4?+@d3h<i$l5wG+&1)w#!QCKNB@30~$SP9?&lA@8
zaDewycg1p+MTAuk@1(zmeK=0e-QIHRO|ty{%bgS3_LVxXY6=xpb((KHMJ1ambjN_4
z!vQ27n<moIM>4()Aj6QO5hXoOS@1!BsS}NUi}+i!o1oU%H*jcgl*Fr{|GS2#XPmex
z5vETSaG0BzJZ{fG(t1Uv0FBDmYJ$)+J<2awttsh{6c+YI$t)a|(7^f%KP3%>036ze
zNyvP*I6XT%OjT&gZMib(Z|CM>a+dT@V)D4d`xrl833Aw3KX|CVrc!fK{5AjafyJzi
z9mwBy=Ff)m5$EtNf;0!8y)C^BFuA_N5pw)qpa)N<EdadrP7`-*r1dc4s-^Wp!n!Ms
z9JsQ}bz&FeE`9OLgwz~LICl@bu0$uneWLxGr~0mAJ)&HVqt<qJa5pi|al-9*m#@Oh
z0tKcQ&EUSVRLLRmo8D<Jmi~FxpECh4v2RFClM>l$>R?l+xH(12G4>mHKQM#!#=Gzi
z64blnest{y=Siev5q)I({i2LNw#pFMTa$3IyJeytlHIR%i(ME`dUd?=$F;KNys0^u
zqdZ~O$MOid)s@%}QV0P%d%@z>V4XIm1RXzsgck^I+k+!&XyhXrjWLo@1Ns|F+QQO>
zuK;trGi^D`25*e|62{|?nGOAjt!qEn13X<nQXOuk%?)_G!KHgez3Z;T%Z5hjq(kd>
zD;;<Yo24U~i+cnTcx#y&RG0*F{(DU^bgz3o?i~rHT`KW*uH|r$<9luNB2&!fc3Li+
zAvmfEP5V+SMA?OWl$VHRk-5xQA84f1XOu3SE9Jz>E&wdLuP*Rr{pFm6!q}1aHx5EY
zk^Y`*<d@t2#fQJH10D}sUljgVrXm7$g|dIO{Wxfu`bqz*wi%d(51@ftCqNkgwOf)6
z%jxpYB|tF>OxPf@8JzbMMOi&62de25Dm($rBLbaEkyllxk^g4M*Y_kO@(Y5f@|8#>
z6|1X#1=q~*-ooW35g#x^Z(QJWsT#GU7+2v!leS9f*q_)%K{f<kbo{5~qbpYl&kYx)
z&q+lmKh2uR{!Zg4t;kP!j2&>myC2<2nXKj8FPUuXXyYV?hkOq5mpXhfC*CR_3FWNa
zvT2%hj2!0Y(i}>gN~?UZ;`mD1uubGC2z2mI>937y`M#4cPuB@!dn<ieP@Pky1bB#7
zsmz^z4X!{m%@9cJBr1m0j2_g`z?&?)pA^caIHPx-I02WJH7P8Yu>|~5IBj7|@!y73
zdjY@A4xS4FbEv|jr#0{m&dixDM|U_t<QYtjhAS^f$m6L%k<+Qlsg^N*0a1Wyc+vpa
zkXY>j^p!B-Oqd_)@k(_4zydmg1qFmi{vZ~;+D#>%T(&NVY?GoVZop$o($E@v)NP)L
z_p1v|rmlLn;vD7nTQPfufp+_$Ips)3J=v)Ue{!wBM*Qakxkj%;Ey2*4hE#(4hGfwc
zqh(0SWOH^XqO6yRq&HygV%|ofb^_<i1UdG!+T2qRMpn<g4<@Ed>0j?=QG!7D6E-6V
zw3J>$gnR)3sQQMeE(~7Z9;=?qV7YKcz(*bG16evupX6I%ep>I@NV|f@9Nc1WNJ~8#
ze#so)sNc1(g6XqC;Pv!c;nv7R1`~a(l{C)jthk?V>Cu<R`Ex46%s@IAACEY!TpT!Z
z7)nn{B*DbDB@x#h^X~)(c`CnnI1gD|Kb6eO$*;LQs1l|@zBtDpT4)|GhQ*fKjgik-
zu>x0BbmHR>9}wl!CyU;&^l|zPI$)hU*XaE%gPJiLt>rnnoLH=K9M99Bl*lUrD#b3T
zOxk~q*v%H+tFn>nxYJyd#5!2a60z_x)}%K*qOPgW-j(CyOv&kLGPk*1T=vj$r;<j{
z0Dhz=_)hCiWJ1K|#KXF`W)$VMuV;`>0U=i&WltG2pAwxZ?}a7L%)=Rr6F|dlPkST1
ziV55J>uvGf{a8mPT0FiZMelWCR&^%~I7q;=98{n~%dcWGZBN~pfO^3`W}PK0`@=|b
z1#(s}q4SKlqjOs^2x=|-7z1?Lm+rNxJY+}6<!a=|AWLSq_yIQyL|_?bU=^T`nB!M@
z{p284zM@*EsrGD;@nnr!-VSST6XchW0LPsclGV!4J0nG8lbRqbn^Ry}Y1b?l;XNY&
z_*?!;@Lc{md=EOBx_TH1ta}N2)4X&m>djm{7Fv|4Avnkah3mD<@um*-H4QUglFvfd
ziALHu+S~?0B6!ch{3Bzi@L;)f@q0+XPyVb5FDYu*Ny~FrB4L)~3d;Dr2gQ|Q{EX(}
zV}4Jb*}%AjK&y@O5=_#5odjMVv(j#UQMT&PUJ>GYhY>f+KPC?_p-?u;|G@A3mmh&X
zNTRyZUwl(~m30p`$~O%t=SUb}YJfwT`#1<P7UootTJfda>2g8^J2{HIUW$`^K-B#M
zhT<+HqBK#_E<G8qIoxj^<P6?1mi{f=<~Wk^FSS26k(`TGI|t3fP*G+Qbx5sMLpC12
z;)3}Dot#D^;B}M+tY0sn*S>iiW6wMuyoeixjt;#8#W{hcH&sgWo^;w5TS<VElvBut
zMK;`GDL!u_FOWkLpLA3%fNGs-A>U2WL2|~OcQ8n29RL2)3m{_gmASvrvZ%T6$}89n
zbwe!B4(t)J<n{kYjRXaPS$WLgAXK=0Ib3^5Wj3(1YFoa5a~ZMcn0ekoV%*(GsOCs*
zewA}b<5&Afp5_qB{`LP45h%#DsZ`GA5@rwBe{Kjoo0_5vvvgQPj3W)3*#Pye{Oo){
zwsXt>jR*qnEE4O6MC#ne<)PIcLZK2CfWTA?!mHw_*GbA7Q#ypYriTETv-Z`plS=yQ
zNl(97h-Rewg9doCQ}>au<%EuHE^r1?iIPXK`{hxeDO!Uhn1#FO!hELDRnjA~q#q(C
zb5Sql%H>_~8aTzGjsTWp-o!Y0x%W~YT~i@~E_!VnCN15wG;ej0uK}o`t)VFdaP5Lb
z;2gHw<;J=DqXBd@4&}geiTLwWGOo^Bj3%bMVRRk4Yg$rEX*|PD=8EwRm%hy)0V|eF
z`c9fXslQcBQV-C+mwW}Rom_Ts9yHa|FHFq$&89PK=Pc$8JJWT}9c15@J-szXboy7`
zjFFe1<Q|yz39J9Pe~?pD$wbeXFdMpsun3CoHnJLSS-esJ0z}=e4kmtq^a5v#+Du%T
zQAa_ry6(Ph{U#Q)SfTp<Ad@s^cOZYa_$OZ?IOYRALUhhw#*!~ZRe0#VU(L*4==7q7
zs>$SA!B$IAzO#ozgb2A@#yL7FGz7H)`H>CbfAc@-&9M}F&u#`AYVe0hEy5yptS^oV
zsv7*KdP?wMAP(o1=k8xk6`(Ffaq5||g^|)R<=MZK%+>qtOX&!bMUFR@@O}zu8ZWYc
zGB_-S!q%^sOswq`Y=|BuE^TH=HRjq)_9#9fW>5%}n6o-1_}`ZZuHxU+$q>p`{$EoE
z0`@#rPKa2a62EQw694&f*Xfp{!bjmV?OcjJ2LoAN&T*2tF95nOMoK?=s+L6p|IYo8
zpXSja$jH9@u4|xhPVk~Zwvih}-EBMR6BE%-f4(n;`Pzof{j`>j-mTn&Wy6@dI69g%
z^$wnUPE#rqQO5o1r#g&CH@dh2q3x<<9rvH+Fc$DNySMOKL!Uw;L!BQD8Rz;faV&W*
z;ICFe-l{kuW{e%Wqe$Cxj4$pk$fDM<JTHfl(u$k!^qzl+UA1MET_f-p34Iz1DjA1;
zguWT31T?I820k{1cZS(G>=xyxq<L%Wze4~D1R|9$ARx}z4YYueAk#@-MMrTGVGIU_
zJ@CK<8;Xai-f{ZCo$#Ad?T8icd4fIiz)rw9ZbDP)bUv3Xb!K-+J3A4ICGSPyDq%NR
z*MgNy88?6I^3ZV9EQ=3H*-ucB?;((Xq#?7n1#LASb>w3!7_%b=Y<p(70)tc|kmVA#
zr=Bmj|25EB6<iCr^qbt8sbHZXSD?nYbRlKV7ks?NPyoXsmj=LBcG!<<sxWG*4S8dF
z7{jWS+aNHBxg6)A7NkVfi*^X>ZpiWiwo_3X4{u9sxpX9;wQ=OZh&ZZ;`s?5f<p-1T
zl=3lL+Tq!{(`8H2EnW8p`tq?o=!ihoB!lkYHZW0GUGu>Yn{rQjc+{}S?F&U%twiE%
z?@F@tW9s+Xd}#eqm5kT+N^g7Lx0PV)V=%cj3s@lQp>~!0-i6P5Q&La=ILZ&yF#t{9
zF(<}d5RRHZE(6<P-@O#he@Z7m2xh<qvc4Yd_Sx{^T%X10sSm(9{u44NpQZJO13A~r
zU1EujrKrj1NdC&<^#48<{Q)2#AZnp(=l?Y~{~wm^Ka~9cakU2k0jJ=bMFauIe_zh}
zfwKcX2>UK_xEs2IPomC$<jygXW4L+*K8)!DgK(qk??a+<&G0%~2#eocN3+9w<2Qk3
z!|(`ybt`NSI_TOblTQ*vhLJW!_HtaltN|i)m{Q)Ey&>e3)m>!m#fYv5F=T|+@*PTY
zoPNQc_Qe0TH9g7H#TLD*5lNRHx`B-_maM<vexEs+xixQR!}{uG&rx-X&=4Co6Z^R{
zdtNp5F~Cb-(M2!5^`W|>bVY_66$KjVp$grT=Xqi8synpeCm@I@uB*|serZ9G*T18s
z84$p*|0SAUtEKJvZN@C_?Qitv(*k@{Yqf|IZ7+C3Pz?h~hLD0U2ZJ_#v!nMHjQU`_
zr<)xZ`X1=rSrBo$byiB{n;hIZ&Dx|w{#g}|?;OFL*eU*dM>d%b;yb8wj5rU$kKhgC
zC!lUp9t_q3hwMzojZ1HK6;YF$Du<cHI~qp*^0In%el+$h8e?rOfQ5&4agQTSm!uj3
zsR>&&Xo!3*DOs#>C|#X?;fPACLz27APs-M;&7JD#gwwo--kO&)Ud+c}>~ZbVU3VMR
zk}>+gG8WVjlNZ=0OM}0DXk&@CvDKtRou<Ru&*wF)+A~+?hh*g6(vK8L*K~O+QN=Y4
z#v`Fy(2?s9MYJ#?q+~)6tP)Xab7W2!BT&Uxj$eBB%3A*iB4(`rwH#qx0%^}Nta**F
zzJ!-sq-E^|SavG<pIfp)ZA`Z*o`IgEHyQ-6t|EMUW%Priz%6koDOV`oRC$VJxyJ_H
z)}>bYa%4SmeeeXWfCM+xgeOBc6GgJb(@J;;D_>I1(2I@*0z~Cld~w90J2N!8mzm+$
zX`L?9eTIlCZG<A|))Y(^Mx->!oDGF9hrcmx)$+?!$4g|<05eeICWpNXzbsl<88Z|&
z#!7TRR5Ap?R5R>(TAt0-;mt<Td7MaKaVO%BLB$a^ZYufecL)gf^kz5oK!1;CRB_id
z!VRq*;0li<tK!LdqEVzEL!bcj<%11cLytGafNQx?`?fQTgJK$pJuF)%v>oU})8CJ0
zht8Ka`cJQ&uEeCchMKhWzIp1Fzj2{5ir1$>aPd`Pv}bJNDo_-+5SO@plZ%6XdGb%u
zvV+~a{4Qam-`lCSyGPmk;i>KB4Fv8_Y7HYlUAiPF$y;j5I4lFOiyo-IH!v&K`*|iW
z#Z`qFo~ZFzdhYO%Dmmou-cObjE2C%_$+I$mn+V3v$m+zjPPMvCKhI2y`TM=pi{|Bx
z&Q=|hemHPUady5D{M*Z@vJ{umS)*#M8^pM`@#LW+a&|>eCr^m&X<|#j+7u=j+iC~-
zv~3-HVU6Fp0>&#gQ9z146hPsflHQ{{#HO}lzr?P#jG%Q@-A%&+z}_JJCE6MGbEM7I
zyMm6mi9!}$lCxEn`n4x(jBi9hSj3QK>HYPWYijL$FCRnWkm{;*T}U&omta)W35u`i
zZzJzn6S1e{iK2v5f7$YUJTzP1ZAVK63z(bzwF4I*&YoIY{<2hI9_*tSo9$$5o>bGI
zV~;gb*l1Xv5_6<#_dnmK;?@thL8yr{%MiScVk<Qf!bM1m*nNljh(Pi5HI>R2GGe6<
zBJVOypfBbzrV@}2o<894Jh)pfG4OpZPWb2JDpVvB$JwnR>?a?UA;BMpJ+L}>(w7!d
zK(1KD{YxWw%{ds|?#-i+vWK7G?hw=R4oGVad?L}QXzvpQ%#;|1y3a_>G4D+m!q3et
z29p>ogZu?<-OwE_Q|A%BUy@jFyM-Uaq#6jt0+^fx+Yn+!nc19`CUvfh1CMFzor$@l
zR*A;kfdOu_lT;+bG=Ju8cNOGfG8d?(nLdgVVjl9&1;hKQOe#0!>J!AaDf6hSl**Xa
zI+4-AXFfcTk&f#gNzIbC;G!zLRZ0uS_o{dKctPvc4b;yrQ6$;2^lxbLo?vpkK8p5z
zld1Ff9EG}e^oRYIB8N7*dIVW6S+^0cHh6iYpiT|k7~8C=ow}P&!hs-IK#yuf<ve}E
z1rrl)Qu&#KTE4%QyCLr%8{$z~q$`f(N0dt?&(Xt0M7);1eenCO%S3yU-JsM8=KI-a
z@+Xj0X$N|*>0)>TNt68|f*en2OJVwS>_LHgdP67=cBT6xWRXy``;`D?bd6dRSRw$W
z%Zfzdba_W-BLe_HeH_z8Z*@b{Xh7d_6xGzegO_GhnUMQejK5hZ{zAzs)!7>2-kz|X
ze2r1Vou@RL*Egip#1noy1D);snk~*t99+0tbW6l~o8QI=VV-|b)MxlZqT9{6*-7s3
zCWK{OENdKYbjBR2IEyT7+p7sV|IZ%y)J->2QJB2J$W4gJ9C$Yd9Wbp6wVP|asgvKV
z)aJ)()<oh6oMzck3D)G6<BWBH`wEF8X@T?XMdWJb`-g{dztkEz${r#$tkkB(P}ilt
z?GnX%%Ws^`v2FX;pq@IDirqp)Nr(jClxSuYLHiIHVD{1&0gOgFEEcof>#g)|4s`Jo
zb;8Q!8l?L2%jMgt)<2XAzHp^G5aZ>jdDssBT+5D1uSKswUFs?~tN+enUd&lL9>o_C
zXRho{t@T0;LZTExA)lJlRNklaL|cx)@L=aGmavHH)Yo?#XsSF{-{v4Fn}kjX1iFSe
zb~x2}X48mXU0c(>NYTZ&5UZKtq=$cmyKM(JZxVxFTt*xl0wrLAdh3K?TV7^#)1_<=
zQ&y3qb%{C0L~&(-#%s5pf`EY6ELWtD&<tz6z;KsAx@g3ove6NLj!|EGhNa@1-9|>e
zY4aBk8sL4@RqjEfN#0?87IrCp1MELs#BiOT69K(GVuKsAEW@&<!_gK<?dQe(@3abZ
z2@17>TKh9sM=A`5Nh^J(2wD>^697fe3OwR>cp35-hFyIwvu%{ABVMmf0qr3iY-<0B
zw!UU=^6ltR3n6ju$5FfSHjj1c=;K>5XGgb9xwOr!Rj)W}pDpL(Y2uuoB6b%e5a=*E
ztxLsJl#5uHzXQfCS(G;O8Qb|YiC)HJli;`MRQfdDa-~q#Y|jpv*||S>qZ24!&x6EV
z$yi|FaHiG%sOq6)p)gJlYJs4GG{195ABThprxDJ;S97pjoF1kS1R>#8igs88T_N~E
z@3&{SG{ghlEaOUMebeBy40G2r$}DBN;PXxhhSLuo9nJ1XA^w79ba}j5#uH_dM-&$a
zQ@SCg;CHd(1Y%A#*AACr)rk=`RAb;4r}zky{q$ZJ$nXlA6e*eImnUZ@g0LOp{+&~X
zBYgAnUIBP{H%g>Kxibg&t`vUBqC$nx*7nngsgw)IxL8pXnf3z>l>-~67|=nW9SF{$
zHSp+QkNn0J0q*r~#wn@N$MOC2<?SZ6Pcu?q_ZmwII9Fvy;Pb$va))QEVDb3orX8#Q
z7Z0T>zUdy>D7gbv_4%aQ-~t|x{tOW}D-Wu~TbxSLQ$$Va_d0!WS-^)v%5>C3*ldV>
z#VP97ZOF}p25Kyub}~=<g(Z=W?#{gtr4Y4XQYRiLm<KPso{PF2rP2Q5^54~!!pmGn
zbtQ4j{4JJ8VgQ+^1kWFK4Zm$pj16Q48VqIs0$&MdCB!REbE#Jj0giy;=h3;c=m`kD
z^FN@J{61}w+UbA~q_=GJ6YrN(0%~>G09ErCOKv7P{uo!7rW0(i#xBlC!}4&oA1%(4
z@ufvhS2WnK)}!*Aoa6nfLwJd_TYtXjt04>s`fUIY38j4yDXr=odS&q8Ry<~8mZQm6
zER_Q#OO>k-w5^5XLL@3Q*}-Xqy&_tB(3-CI&XZra-TcPMP1dlheu{F8>kQcrV-9JC
zP9EJBsm1Gr^2(l?fibe19o)l8pS_|_I8!&ZmG<cB@9wP;rzN|-E126JS<eA0-)Zbx
zyw*=oU*e+O_i7c-1y}OZNHFVT=<IK3(xnF%yHIlqm<k3?8i--}cp}-Ft?hWGxM4QI
zxY0?~@p!)@;+;xil6*QUF9;H1UQgnIo@pj3#LHlpw@^=*cpw-4b^ydaL?Kgxa{Jne
z@PV;7Y+>XZgJcH}_2x#IRrFBo{BqQUF8gwP5lskz3oxp}M^Rj4Eip^b7>iP49rI7z
z8}bQKRn&lUh^8K4+*P(QRBj}C^f7U76dsPS4<m+Z+eU6KYw583MIb0+t$xBzY0~UJ
zJDsM;{M#)iJzt*)FdkwgZ1}8sy-z`i1wGasVa2j?MVvOjo2C3a!!tAdkdtO5Q4OKK
zDPr>W;2Q<$LgA8ZB7d6maa`CTGm`B!^&otvJ1*9KE#S@(LA|@#op&1w4PA~ais<8C
zq;|Uo-xp0`3nbc2>x<f|moCnv4*-bzm_h`Fp&=CSMOiTLELD!2P9OLjV0Rt3#Yru|
z10yi9V2|Gvs%8875B)1{o|!;a^ZFyggJXW`sf%O}xEgm*UNLVo{~?iq?ugOUEfz1v
zvT)B_Bz}}EMh*it&TD~Uv{_C2tBl()SYi5paZS?mnE*s1?2ly(x@7kL2jVOC@a1_P
zlBq?mmotPN!dHRed5`8V9R9D#EM)D_2lgo3qgMgdW(YBa>DcZrX}E6n>6P`NS%K*{
zNW(G=VS1v07e+KvcCuRm#@i@j0S@WU^boVMgh-H2Fn3(c{Gxeq6Tv&}rd(Ne;q6vv
z%h|d$^PwV(Temh|eHU#IJ&nFrQtpKqPN*m>i~{a<V1^}lSU<WcLn@{&89cUdu9b#~
z0sSG;*vi{b9pk;6$+HIX%7`~vKP5jgek7N(8iK*n9kuJN0fj@Y<agd}nEc7mSc3-|
z@s$!ofK>EyhPuPOB>wnvfW2`_eLMSh9v`FHyBS-KvibR|*<P=TUMUv}5of3A#-L(n
ztX@P`($DhG&lzrqL6xzUaNF+;8VMFZ<|9KK*Ain)|Lm_J6N^Kjm+>^$vn*6LJm`54
zADtK~<IS5+F*YD7n%@{%%|DOGFaa~wyuU&6(F^>eam7K#E->2opSXf<LqPwvq^zPk
z^8}#6^5Sm9IZ!$G{E>E{yO(Nfc+b+&ug_4zU}qkgOcN}2Z{S?Iw2;MkJfx56tW`G)
z4fK^>jEZGs<c~3)@cahugeFE%@P1yrNX`v_Q+%|n2$KSz-dqIO+o>YZdE{@On?Ca#
z5eR7RyDu|wcRfl*9H{^klZfX+7oR_PT2UXVKB^yHBnzJ}xdl^AEnK$cha1K(%f0!0
zKdz}hG2Si=tmVO<YW}P7?(C!5hz+NspVGVFuKhTeyHft;8*skDkl`s~;a?@oBtb@z
zzl5^CumtBnah%vB9&CxOmddLp$Gng7o1g!Jwww9UY@UMKWLx=;)9AXG$NRw_jG9t>
zVzGHv+iiTltC({qI`0sC$*eN1{f(LTF#`IPO6Ukc?9CJwIy!vP9b0h;1-YL*;>DAj
zyjoY`NqxlPFcX_I|23D@hdw$3m+n}EV0z_8kbwW!!T_;|t2YSfV%tdX<;rK&&t}yP
z`;)#Pni0+|Pi-5?wo}ZTMykFs5`nwc)$DseL{<=zz^RfaK&f=ryvvU$y!@sgO@eqY
zDq91Sg)pa;q!ezEMtl<0Cvm`J^Ad8tu}E-QsVX~6C%!CM>g%Kvv{?QUbK~UL`7z2b
z@m3%z{$GaL(lu~$AD#3P3yD;aW_V^`=DkH*<bIR&)H6%E(IF==gezlGlGMZkVz)6`
zs-+&|>U5CNt$wU9mW+t1+$%8X%6&Z?{L669Eo4<0Y@_)StbXT3S^dm*N)w*d*7PGL
zk7F~r7UE0Qpa16&wnJKk$ni;@X3bf4D(mJ#!$o>cjhbk0xP4#c%r6y2d$*DC4*awi
z+Zcl#n!c>ql3l*xnfg}bP;HWopCi+Y)_Al*K?iKri)h7wz(wig+hK47$0P>-kY}G(
z?)%b9ig(6}kD&7$6HljOOV4GLie2$kklAF5#w!8y+w5S09Ow$<=3j7LRJU8E#35D~
zIeJG!n1hT$cCVv33hb>U%)6KM{mtT(pEa_uPzExYbP4%r5`>ns{&sK0b_EBa%PM>^
zpcFHxc;)^&=r?Kz4+)yU98N+um6D9`H~*VyQ=LA>96s*JFp9UWFe{XBRC1d0&!9L2
zwN?AqfZ)G=p-C_dN;k?9Y6mp8M&l_asL2J+1~=TRLFh>1@`PC5BW5!#Eb23Kk-3Cp
z!-pe2U{;`k168c24)42K-?kM{W=yqusW$gV(;b9=)%=7RJLgcTn5Jsqz79*U2F30m
zPg0^91504|nFMts?%HL|cCV%JrQVZ&1<N{49Txwl-tA5=Rh!k|slArK@=}K-`f{%o
zk*B8!37cPMSJ3gJ0e=(WGJZ%CU*;x+wbE|6#gVH}a#@V2IlbaU=eHNfgX1C1pTHlL
z*jw_wZx>t@RzcH}^dhw%?FWlS%hUYbc_2NTh*VX4xK&NUxcH|OxSMBuZOxNBRNnMN
zuRWN<EB)%LE9P^xk8j+eh-*}HInku)&v25?x+?AvU=>OtJF~juMaq_{zu6634hw&q
zRlZmP4Mf>-WxLr8cHgGdQSn!k_4<aAKG1^b!oAa$^8CslzC=kd%?qDCa_$Es+G(hB
z^L>93W;}C2=f4%;JNp3kix$5<COnJ?rd{$;sdVQw_e0bm0dIFp8f+1M<AD^$u4*ZR
zrph`DL#^D!idJmPhwwRGJ`z%YcxKnN(DTQae^RY3p&IjYDSIH~D?bR+myQ;ig%m=S
z^=56mUdN7Jy!-Rmw1n%)qUZ@@F1`Jg$hp>q1m2d_#W1a_Q&t4s^XU6@C%K}&?JC^{
zwMZ>M0vP4Dlj`M@Wll&QC*Xw0tSh7GGvws^VhJ}SPJ+%m4=7VP^aHQ3%Wkh$kUM9T
z)+;p-4n4b>vNiTd!WMLDu>3;C`NpJ|XTCxs>yemfuIYl2PXanV?AX-QD^WA&ezP5{
zOkQw0sSY5L5l`}RR_~^&6KlSPLf7odeh>hHeF*YEx0VYAwpN+e1g7X6ZpJKe0Kpqb
zQTF|O)1ctF#W}xR=7)NLE`;8pp^02WSNqL<TR3R&xI4A*#++C~zFuKVdxDbU6&MZ`
z{7u4>V0kOU&M)*cv`_vMKAcIbS;j3V`a+dKqQod5WVIZbnCP<7?x^}z7f<J}W!f*^
z;~G4TsKS;S%<|5(Me!%x$W|QJ)o9O=vC*kyM$t{vYkQZ)9i%fpjExYwWr}Na$GAP7
zLvE3LjU{suSTKtKq{(80w$fwiGCVBIE8lcRSXt=%A1F<uT=NcwO9A$upf&mI0G~%~
zHS0IS4re_VN4MRWa_nj^t0e2>M;Vj~jSHJm{@|fFly~8Wl(6azK@~N&ren@^r-sWf
zNMzY~y>V1<7xz#T$(eFrrZ|b7hq7qH*yindMk{)lg$x-C_Bs~7>_&MhH%dePt?WJO
z_bZ*MI0w9R?-htcIQi4(ffoC!DY&;aVhjVrWgFRa%+lp?(CDzQ+9+!zo0o3vboETe
zXeA0K5AB!jKb4gokgfATfoQVl*<V<#?~hh4TqOY>IRv)Sej4N0Z7GrVLt3$smid#B
z)a+Q#Uzvg>$gYg?{s^bbNj6|m<SC)f7H>6#D#ZfEH7ijU^-y*w0pV^T%@Kl185HVQ
zG!4Ilm@K3;ghSj%zPWhvC_G?N=z|k>loO?OCasbrf9-8ni*Qwewms#NpcUlFZfVGx
zp;ABVC6NR`#C#V#nCnS?lGb2X$ei?<*Xk;-;}FXU4$I3B<xi@A=++_L>DMeGa61Zb
z+AQgoqBY;+4}kk~lIrRxr+^6AiV-?otBh@>$PaH(HVT#*q<T4nH)_qeX7%yaWY?eV
zaF~QYeqgg(<h7Mt#Kz85tnMdamnK^Ub$Mru)cq`SDGIRn{PUohD&)2>=q9G`vhh{b
z?bZ?&^<kXoPaFQpx^YH<AP7V-U)@2=PDNufse=SIe^L{)9mNW{;(#GaLLpIltITWa
znd06kR;XeVMR_|AORHMbaoVm>ULmL4leE?8rZv5_A_*svn^1VBa>3f6+|{B>(e(-B
zI^-r|Nx{GhI@RX2*ZTUSdtRyYZQi2YdmGRM*=CYHRK?StY0Fr|HvT@-7&Q~=eLP&r
zx2VVg5iB6E<k#H23C{X%0pggKRIt0XM_TTG9*%>(C9oj7sq(2GsIg8Y!3c+`v~Z0Y
z4T{^4_|t1v1eo%*wHtI_a)JI%an}6RQpNT<JM_MT<tOnzQnlb?TMqG7gQWKuVqPvR
zCQ}uzj<9oq57R*h;muFyCMSC~D_N<ufWFKWat+h<+5V>{-SiAH?$7F_@09bfgdJ@t
z1-d=At)pdO`6?yxibbHfYqaiRU2;~X93q-`9oB6k<8+%7l4m5rLa5N#x+P}DBfXgZ
z=9~0XIGKriJGc@Yf&^qM;r`Er(G<s$m+t%svJBHio#x@?C~g*sdjRq2tUU>Y&ZgK}
zd~$1|#GXAyM?`Il{!olcP>@)@qH8#G2g)n?ke7++G@(U0<=2WO0D<W;m$Vb}>+eRe
znOg2~(}e3mJLQ=PhO3jd?UVpVS@^tDY`+;-1+}AumB2I63HNtWH8I&f%5h2T-sq&J
z{FK_U!&H3>X|NqYEQSKhw9?06$x|%|{(yxVRtxjm3~UGw#z+2z5d!7P<W1qY40V?V
z)NK7#s)u%ws64#>YS~N~cK&;j`<^HF8|I4Z3=Rc!iujc*=R;q%Y6|g8RZI}hKEI8o
zm-Vw*_$EZCV~m*MmjOS-$)#|9hp2bz#tT@~HRlO7S1J|oCgdi}n=VLiFdzsoH__eT
zi8&O<_ZJj!0&CO*c~|^p4lqaY<bJs-Yu2!8=t23qERMdH;IWveIJx7PH}aoV5~wpV
z@F6A`zPb@lTy&nFX==|S<yb*v-zW_4biBU?=%J-$=Ve2f2K;c{th(+!C0o`PX!ORn
z@2+Dr=%G+2gtdarS;MVPtt_;t{QoxC-3m_2EQ;9$JOpb$M<y$r$pauJW36f54+*NF
zIT%VR_Cf|56c#h@2~u7;o|Cv{w8IkSMR#}r^i<^}I&%y?nZ|(JWd=yVb(qi!8HaeE
z>!Z$T(O<^BEv_0HD|}}uULKZg>r|L+SCd=-Lg>Or9P;08v)Jmnxh%27K^hM%i|SlO
z;nJgnw)&b3otJC5B(Gx~iaC!6^Gdp~hhLKh91m(4!^$eHsA;4_ShUc{g*f-p=GYWQ
zwAw|OJsyZZ5<jnlXqhZF;9?Rt-t5=Ht$RB~fv+fnnH`k<1}s&QPE7;-ewzEw7(J1Q
zG>0P3kf(pe;`s3C#OU(u93zVit`@`ABem?23M0YQnfhw!I5hjdd5aC}wN%g33x_WP
zQ;gjy(4w($MTO`DOV28JMp(vdYw`W(E2CqTCE>u{i`V3+DwDi`H~)$|hT53)46uC<
zhm?hF7Tso^*5*NI`+}g35wARM*&V_zF{?5|2}%O4*L}J8OjwT!5u7gCQ@v>kmyi_*
z%oHeH`%LSCqV1Aj^u?Wjw+SJIH6~?<eGkUdYAPk(z<1oer}lgBUy%t*AoG~Wy=I{v
zz36tU%G>ov@+PaivUv3AI{h%AFg+p{_MsbiX)EMn=@29UI5yWtDQ~k56+X|^HsX|9
zUIu~*-*@zN(M+@;ih@0GF1<&qig*Xs)>QJpq}(Hhe$a%<BrkG;a~LRp>cCQjIe>&l
zpBc7L6D+EJy-j_W+E!LMmPoWqZ4x#SWntG1a6OV5K%k?3<seZdrtu^dfc(=b*P!H7
zt;-y&zr@*QLxaJC7F^=lLx43;kB%!8iP&K$a4Y<c?dB@pM8+hU)m7jax-VDkz#eX2
zNU{P}d4+bm;<D((85d>#{pzp4cRnb?+*q3}{P*$}P0zbaD3rKqu!zn$tY8UChH>4w
zKHycS%DjJ8#zdJ01{faIlObJ^cxmdeNz?B*fdIJ1D$5%i0=O?~YZilppXHb<#WJBM
z4}8iZ{>uzzNXZp$2F^XrDo-$>;7pAud5{Z!)n`+3>zr3Y=Hl9}pk=<^$2G&6t=)xM
zO~xrYO)NR7wt_Xwo;HKhLzBW6|A<*19*aDpPLPt5Pha}SEADZC%rlQk4e|Fc9KREn
zh`zrwhtbt&hHcKgwqVReh@yIrcCqCnYfPe@D7x@CCFrmLOX0ihB4=73sKFS@0vn7*
zB(siWY(5DmRT5M9Ah4Y?M@p?TqZn$Db%cmx4o3;Ma`xk*6(^8@W!sLwHp8cY++u0l
zuKQl7{H@qpfLZik8ThBqn=pK6X7z9^XLg3b#YP^;R67zgT8Vm2v(no=sZ-}$=yRr=
zCv!I!Lz3Wsl48rZy$lga!WBxu0;9G7c#<5^d64%y@%vnG2Kq02i%^Q&B1V1)j)_j{
z(u51J)gf)B1M4`ndWAT@sh#&{Emp4?jIb;fI4o4>3WTgeCXE(f*hIKL{N-EOC}wvP
z_}<=)X;Q#jK+BC7HQ~nwl`(9yS%X@DNw4~MbwqxUN(!9~%FRB`;^y=f;2Ks?T(J^x
z`tTUuqJL{#js^CPhp?c?n<+N$J4urNO}R(hX=hPkrcE}n>bE}bq&QI?;TB^e5InP-
z*@dJ4hH&HZ!?&p&Gg>HM>d_KR0n|0|(4}8h{@QVjQ}MvU%`rk>yr&P)o=11f=_Daa
zV5UOxVr*}|p#QJ$-?|jld@Q(2_l?sO3mkb0wN(o-PALFNI#-`(L2I0c?9Z7i9nt77
zu!hje&#{1RmnQb`Q02dYd;i!;%LJdzU!BF{RK}bp3q0Gpzp1u3jFy&C(~E}{>FhZc
z_7?}0IA;*1AY2J^WsR;fG{P2mQ#lEZe~M${X9xX)ht+y?qjzF$!(OzDVK-U)iNrk}
zw$4SjuTNUFc)`n8kFLq<HO4Q5!QwUnRhbi6owhbZlYvtsrMKWFQkXE?vlW9G+;{dW
zl7&O2R07v0gslNO=nBYv(l_5yAa0e<@h!(yN;sSx75WQ?N*5$zaIZ;N4I8z&OGzlM
zL_fCbz1uKYx#+n_0gmDqf0hQmDL45$TsiIus-Qj#WFTyC;gm?C2zW3W7dHqm&aq+Z
z{H6e;G-JcWkoA>%4Cmfzd9q@RSB)M#>DQ6i+W%7NaS|NiUC&6yF?dF{Q`clA@&<u;
zSM4&kX>9x|Q2Rk0fbYZbKv}zG2>uO!Tt^KCB|f4b5hB2s;$@-to(F$A03|KPP=)ur
zwgPu~dDNI>>x?-ueB8j}grM_So*GY%@${B7;&{e~4SCs--tiDve=f_}<yadr;({rx
z>{!InQE_Riro1%eo_1g~2rT8rGO@Os{JR0abpec7`7>|-VK*dREpG8%IX?jq_GD$y
z#FE$}U%(_I#Xbv7hEjYQvQqC}tHiqM0S+(NjV?(F>IT4^=b}JErQz{d2_4#ZT+xfi
zKmnQs+Q4vn_*K2?jGbYN_2;UP2IzvyRffH*i#S>nq*-!Ed|$Bzc&jQx%LRnthbx~p
z^=`iF>fM~o_NUvE@Y~|?<bE~z3g3a&I>Ib>hH@i+e76(&!)u89bgi#+4(5br>(WpI
zSQZ28omD0&P%qFGUAL3Zx6It?sba1|*sGZ&@%d{;m${vakMsCh9Gj8p*UGJ70s1Sc
zf&Zg>QScln5Q5A>z7f@>jc1w$A;H9YKVx6WD+uPUaiuq!aom%>ze7fg#;s5%4CTz|
z1wRH3X$1`tN28TnREXU#vIV|{F=`==mtPbJ0<T0ENt@=B66^KF^o&ZH>S0{zyEClt
zre^NCIyQY3jk|cuA#~du7&#<zub@^2V(tNesTmatG%u0%{4M-Eu}pXbnsty8+GgjX
zCR|rN^F^oVMh<@qfi_q()|Wx;zHLv6Ux%GAznBz%q!+l4GPQh(s_1q@NT<`0&!d?#
z@6Ri>b=H7EQXWJvLPxLr2@4a(1t4&S^J*HwJ||;kRg2dGD>KpYpuHerIvhrSgwgWi
z_nu%>4PHZ)q$hxw`eEFK?bJV|g%*dtvO*q6aOudtQw$MkuRlTS`okI~P%pzV@qq@F
zMB}X2x7YbzlJc>N)ClBn$IyG1W-Ap^liMwbkSndlmwTJ$kwYq)`YzLohW~1^Xl9u3
zI+83}K1j+kv|^tf%-okAW?66B*?wR=I3lwV8P7s7h-kJWFJXu!noZ<}60S03sWq|t
zU#(yb(qDkOEdqfo+$>$WP<>eIB)mA=Yz!81E0t#kJJARJUJu}y$zA4lJ@8kmX03dX
z(>aNsXUU>-Q9Q_ruhM2&Uwx&T_NGma)^2+n>U3Zmv{>VQNzSa==!~rCy3W`)pB+hB
znei$`Qe>KF7qM~G71v67qm!zhn2Vdu*{nHD_QY>JBR$v?f1#x3JId8y1!T-&?w20=
zl3MSIitto-gR`G?!QswVbg;PU_B3@qn*v{w(_jn&9Z|r0B*OnzWNq!|H`!0_P$BUx
zx!xQl0Kx<^;@+R>B;~T`n8+Xdqr`mIe1{%+u6ns&xW$eFL5f^O+1fqjbTba$k1h=Y
z=YFqAE%TU7s$3S#up^Ca&?3o%v`&AJYTz{O4;iEAwuAu#tp&Yp2tPR_Byabu^hish
zFbtdt@8opq9b7j@ecrGA1`+-$b(Kwi6aPt)_MNtyuy<_%<libBM-(hR@mGWu5*d)D
zMi9`<K;88Mq>qRnfK9LR)EDp;LqoV-u5%M%HVEayC9ez-YTv&;v=IH*vZe6N4MEbr
zAQ2r==hjr<FIXv#rnBX%b(n*ZiwN*(GD+t;Lzg|lrShZN#$Oe@LYE+9{%`4`%Hm6g
zx^o~e9*Coq-X?T>>0pJMEK0RGT3-V=b?;y;!1MYRB7!|AK%`AN|0Hbe;lQiHeySXm
z%XO94+Ux$C+jx&uktSiz&ro3D1Fu7vpo+HgB<FpFmvJMT)AF<p5x~#Ufrh)-9xsMg
zamYISO|8F$x+|J6jeZb&yYul*#XYt6p@!Kf#b^bjzMo5N^Y1s0K+j@h&xO;5g}Jv@
z>V>R7vm|6##4=J{O;XTpJ?E<S_jK#YukHL^=*brpK_Prtv{*;8Mg2{F@j<o`%a|L{
zA?taJznzoINK1dOK=SP2@=0${DYxbbif5&6<V-H)E1UG>AuYDq?%+=SsEu9|zSFFv
zjTrm@a+n1C0>-e8f3GN@2n%T$29|R~tGb;d=+;-4^eI&L&N6*-(Aaid>0Zua(Jl*N
z`Km%?9VvbLEF1W9IM3t~ERub@b!&P1%+uk?k~``!1}9r$*sUU7fgO7%l}HA)SV8s7
z#9Xf~&d5?(@2e*1lD*_<sNTYSxs&NvUgsaCl&ANLlnK(_3`@_0?>8_T`cz@wXo|FG
zcD;z^WG8CX1dWE2Fo-UY_X*4a-C3KqVYcR!@g&R^>1=Nhch|eWoC8Z3)lf$N_W1t%
zLZj2Dlm~x_#4VsXIL`Ji1^vk;OSW&bVxo>>u{ZC?CmdoU$yVK;-3)up7g%@;Dy~^i
zamHEfnT~_C`Us1?u%#h~fB2&l@oi46)lQd3bCBqw#ar)apG|I-iJ#FD5=hNrkqM#v
z_gQoHr~VPm@TO6<*!|Dg$N{}(VF}f;z^--0hXPQvVG__mCQa^%8k@Qg&s&7sY0!$#
zTJZ!c{j<$*-YhdP^pcR!lyaEDrrz1dCq(`0h6DvY-Kz|8hOu8(QU)q|l2%Jq^54mK
z$(d8|-u8}(!?HHD$)FO9zbRlQdvtV+gwa!1g=h`SN$GIMP+T_sGrag_{+;;5!WPu+
zKMRAyusN>U-6KfUZb^a{Jj|cN;y;?X^}~BkBYcB~lnx1(JQPLnXapRGjLXUoQz!1U
z7^wdkTO2XH4o+q7TV<%TV)qEt-ZxDh1sg|LElgz~&EPc;&B4oGyTY58T$mqO+`6n;
zOi4j?zs}(3uJ<e{E@U8a*6l!4(FG#zX~cre9?E9R>Qy{J4AT2898i4ou5?gH{OI#i
zW%ADg<Lt**p6Xy>tifvh>=}3oS(1=fnk}E=4I0HE%-zFE(K+^z1S7#onV$y2>15uK
zrE2FAcC-A*`Mw9y!R{b7L;nu|NkF#0_0XC}mUYUUbawFLZ)x-weh;|_?R02+6szx(
zyVl*Z)En<fjc{ffUcQmAAGL~qL;`9F+G080Gq_)ruw?jqFTsLQIIvXh);5ud0Y{a~
zrTy38-r7jqcjcuPcU?pNIy@GGGskq__A#I^f&$ZBmd<mb#Ct1JmT7GaqL&u%e~){|
zDhYD8#*-nzOI)`hrS`-aSpP`>TzI!)1RI^KLnWxr13P3l9{t*sQ9=tsI3HnWEuBxO
z&p!tO@u84ZTUtf6w-)jRWvm=wk6yg_q4&l&$blr(k3(d8n@Cme>N|{=a&#uhVh(wx
zIy_-8fbs+{rPsY~`}NMHez~j|(s}NE&mQF}O<CY?bE>qnb`cxDVSD7(?!5KWsAHYc
z+5@5{;+H71ONkZ#18_k%oT#G={N7rQ8XJZI2*fk27^^hfKlS%ikPd2dPRhu6++xDk
zAL?pEDlsqoptt(*Z?e1dkLd9ZemLbZzT9IQ@4=p9jt1r@-KsFD7lfp1fvt}uTjW0G
zUYmD4zk6+FtOls{HI}8Uh&I5!VK6{{$MhSvYd;%8;s23AgF?ncAVTsw4^_7LJ$I#{
ze`e&*F&-_sqxB8hJ|~#gyX3Et@Yb=qj(7)$9}U|}5`AEO*7WR|&W*wVh9(>eSQ@`Q
zGq0w*DSD4FCgkU+b3WG)26!+vTtyRx>`&&?ez?X#;CDUj%?ql*$Ra5XKB1M;uZp9f
z7!asB);PZ2PORP4M;fI&s>t(KO4^7=g;OmE<03Ry)_%Snn$qhv&smPgjP+H21>`g(
zJ>`uwo*J*GY^i`GohU}-xng%;a}X?t%0CkUv4&o3%Fojk0X7zIa#PvZ5AYBNFJ-Ya
zG0?RGvK#S7yb5ptUzGlO8Y^#?N~3$v0xA3EF0dW+xY7+qCS{%i<)}r#rF$$axR2jr
zV;!fz%<|#gC^_CNKc&ZCUft}T){%pGn{Ib(Gms)jzr2f6yP2e{kinxutW)Sj5;VJ|
zm0xhA21sdRka-Zj<g2oHZ!7hiyo43r0`|Q^c}QqPQcY=wjdW)Mf?C0+<R6w@o~1vu
zD~nIPuX@2x$->{sSyNtrxsp`d6h+Yn1;r+~OE~DH)3LA?c1Ey@EZNN5=wtwk@m~0V
z|F&&zYRnfj&5~zN2)C9wi$Y@~3Y{}}FpY%fNihv_Q5@XRoJZ*J6W-{^6<ksWkxX;c
zcMX_#kR4<}*J&pni=}xJp#>PqJ@?Mj09rvfhjp$VN6|5q+RjiiA6we;NLDaDkp8B$
zbri>w#%|h8WbYshxmJtPIh;-yUg-)+8dBm6r1YrE-_Q8vQb^pskbTh(BNFXyHIAd2
zJTahfCVuX>+EWc{XLeDeSc`($K4sOw@%5vf?PiuxDW7(H^GrJ{>1^%{n_M3tnSdb%
z)hzTu5HY&7a$&-Mo?9n0`@vU)#3+kIlPkCFRX=+qdRXFvkk=V<>+xwf0Bu8$r$IrZ
z)m2W2qYQ2Rm`xe=<E!mv7|TYxh^c%ah-~eeMbU$jhr8uyOVL^2omT<KPhas|%|@cm
z$KIw)KlwXq&OLnwX3<T~l(+2&2Uc)%>nkxCl)$fP|9~P-s<Fv4bnh9yx-K`W&*}^$
z|4|Po62X_V<f{r0#SNG9Z1Y2s4I>SE!V;r<`;?RdpC97W!5eC%wzJyCB(Mji3*sRI
z-Pl}NBypoJ?^7H|RE;<pgPwAgFK!7RlaU5V#A?S!6;a^-#6pPHCJFPrPbm{;IQ)J=
zmaXOP3zpRdjMKG*jgab-LeQ>ux9!&j6qdl#HBXTD8LUDged_;nmS|`lN-P$j21m4y
z3Avbm8b%G}yhEgeIiVatmo08kX3xDXL)(5otp=M)GlJ`zhy-VB(Nk%x3}*LZ9Pm83
zG+g^R2XX$$^$=aL)Rn2u)wly~TP%Z9%eDGIvM(6AW@;)<a@xg{uVip@@AvpJQ|<DY
zwcQH73}srZw6A~s1=u3Ig_5}bUlj;zcB!C@sKUR0mGJ}i`L0yl(*ep{oBZE|lJaWV
zeXQr1-Q#qIay<LkYFevhO<vWw2lV>@hD*)Z6V|wGMA!1ri;R@l0MchtiBaivOd15i
zgDAe*7S5}XK5Bdaq^bg9*<4+sn7mm8Uq2(@$2xLXqnmZoLO>*m>1Z;dw<A(Bbuh{$
zi+$=eo_!FE<?g-|^Gj!-iJyW!iAeoviM$zQjsPk%swXXel}AOZ<o9|Hf__>4p6~u-
z%z`tuGG_7aUJQ)$_GGk1ZPrkI?>U<kcYvh!=0nHvWcWhrtjltn3|e4&`dEj&_I&3a
zJ~@aX>HZqC39L2DTFf8L;f3Lbr<Mg7XBX74)c&qR8dD$I&$OUa2A|qYAG9>i4R=78
zQF2?;5hEZzef)V3Gq6DoXl$^K$WO4GW3|1Co+Bd=OX*Neo`c2JL=nH>c8fQqwP~x|
z6i|rHupg;pvGX{_QC`Tx{*WEZSI7}00p9`AKga<S6BgYW23!VsS7g>l_xZJw<lA~V
z?|j3j$VsSg^r+t$f;@H<M@2n{5l2A^d4Hp|HFq4w4|Q0?MCxd!QpWhL7CWDF@wFn4
z^OJB`w0t5h7sY<Ku2(xyh-X~9PlGV<i8^*Jg@<iHIvIWwT7VS$&z*&fAL{GOn*vau
zDV|L(LxR|%un1Z0%#eay%8V5TNrJ_Y&4&_(rNOrEfPY@-37V&$A<$RmA#5cq(q8s8
znBzeY;WawHioX4q|NpoSVO$KKwDbCmZ`59D;Ko#FD=$c8*3Qclvyzf=be{ghIu`0p
z%&aG(n5@$zPcwBk{*pHFErx0L2SLcoa+>(3jwq)%9hI1&Q$=SPSMySp9idh+S+E2`
z<41Uo6k9rX37cvrjSeP^o>jy>iP0V;DMIkhp_8BNMV#Q4^P-7HC?IDu4*etB@$fJv
zr}||60l~sh8#2)C#bb}oP5PC*(rW#--1!F0RYHz@cah|t+xXU72MSt4%Hd_*Y#sy?
zpY!Mtuh(-cFhWXk2u$<$*D7^l1=_esm&0f-t~Je{FMNh4lD$pq?2?{BK`O^RV+R>P
zxgv*0bB&vyL9w>|StyX?Fjwg00-%V}FyJ2Z?H0*&IEwc7fCIExWuh57(DwiBSPGg-
z*!G_x-1#v+|Cf1F!g>(t|L`IqHNmwVi0FNxgEr6T!(UqzEOf8YGxjOEGxvm7jd-uF
zYTm%{4XFQ&g&x(302}>%>)7wsfvPLU|G2v3`j4DY<jQ)4BPQx|AZk`|H{;<N*kDSJ
z`&Rle?JBltGgidC&ac4^Efj0)m^W&V)pC5m0sZd?HeQ6m{?7^@bRiY4o+eA_?vD!`
zzX&OPkz6%!aQi!#r-VyMQPd!IZ}wTC#xuPqWwP`0q-eT&VXJxAO$B&db)p*JRb1UE
z)$5vEm4JGwYPQ0RFt=$)NwTjoK5F~>#z$swWMyN7^VH7R`6RV6c&)^CX;^SHjI}s#
zz}<l2(;ac>=w)^ENfc~x{JsPyHOk0-@cWpDMC+HcUmN@-=@y#PLRqhz^c1f0C5Xw9
zSs()pJlux(2mHBEzlhzqOhYBq*f)|VS!zhLr{IAhPe#PZ4_c24k`Zp1LuZ_EHl!ES
ztlFu^2trA>%5csWxqHDWi`Q!$<3Ldso&*%(XV<PsjataWzrNqB)#z=pR~49^hTHFU
zOVTyIuVrs~!FdUG8$e0&D|KZXOz56rp+V<CO*$F;p+F0>U&}{YaJ@3CsV<0qHI&8R
zMn#KAhxyty>94CJ=vRE^6BFe~PQ0<{K&Bz*M8l8e;&K1kb#&45x_oh<R$SNPOIvze
z+;u{USULozt85U~X}`Q-e#v<)d7WdAHEEr)@u#E`S}=0#CIx7JcWh7fMnId6^{C36
z4GGLU%&W;B5?*!;(x-!Jze)+DsR6iC2rN=yUw<o|&HyLc#;qLFXkWij^J~n6ZWL;b
z{?95Btnz>Vgj2<s-3A>OF%04={Trkb89OoBeK}(B{kx9?HNx6*MVL>0zlbYun-xzy
z!&jK6>GbyOT8Q`r^X_rZ?sEb+JY-^yphuJ!p^fSm^(F}kQ}?zBzv>l_o3v!F;I=OL
zCag^_<aE_tU>Dv<?+=`Aol;gZ!c9rXUoHyHhKrkRFMqTCP)?oAEQhOr3+7Le(=5Xo
zat+YJW<-Otk&#IpJEXaW^Gw=zwEkalY$o6e!4|<m^<W_?CAl&1h#m>v8e*H&b;N1v
z)~e18^pgfwI-TP6rt6brp)KK}XQP_?sZw*fAI-<AE(EF?2QDZyxwL&s7;qPq$*VM)
z$m~O{?5kOjJMzLu)-J3ES|Pf8hwIgXyOYy}<$EVstEw+|O=Ami^Ggas&|*n(YruEH
z_VeKo|3HgUi>4H3)t6yKvxme_UbE-^x<D+u`9|xGli_HJ7X?P{HL2LU5U!(xtFa7b
zMlBblRrpnHdT1ys<DY*3s-3FrA9DjQxSLCBcHd8CGj4+ry8!y31%L(OCgFMr>8=gc
z3Lh4G(pp(LBNfjtQ%P*@pI=WRvRF$xr{_Ry@!Q-$VEyE<2w5~|@-Yr70oc5*gN`qs
zzgAOkI;eO6599P#dyLF{o;uRgPi9l~_V^hYCWuTqgS8~*geXj(log()ngz)!b*QFD
z?a5*WZ~Vz<3mmQBjQWuj^O0JtnIfsd2g>#3nW&C>P^&~Q!GWegMmJ1#C{G!~k;K*Z
zh|4xf_>tubQ5wxKx<tx9Va;*LNkSTQ0xw%@yra6M3;F*}bl8onrn7!Ne=}kEH0h?Q
zZ4H@WsZdyp?iw?P#J$|jYeArj7NIT-y1()Ot0k7^QPKJJS!N;uP3imAIGcbAr}Q@3
zhh_xD0%+vk967i4nKJs0(Cfz<dxpOS(zL2Or~p<S=1qH6y!lY6OJ|pWNsZ5JOHF{R
z*I4FJW{s`c;6<Id*3^$3U?=OqINxSFxVc<>*LJC>AQENv>f>shHOL>rfDg*gL%(?l
zf4V3a2N{6ziaq4M)BQn1@CD+&Kobe`hPTk#8utwTx?`bj?0CRLOoEs2;IjVnC+E3H
z?Q85i*{b1ZNCjYl*ovl}kMcn8SiFC6iBvd*kYu&FvN_|XgM+0DDVuh`gb%mkf!VEb
zHL*Cj{B8$K&DS&_Euiq6miL>ct?pXO{8X-Xl$3&bD`q#^n6%i9@s>ew>Ytt|{;wxO
z8uqjddv9H&7CB2OOYjwch7t=TEitQ1pYuRIJcea42DsE%jp1}sNLE9aa6>xRI#KF1
z!i_t)y4JpP2BpyNnl?W@lRDh^9b?(l)Y`M#U2al!W?El=%wG&o?G_$nR5jJZ)0BnG
z<pOwo7_#5HJ1VBXkGogU8$twURZ7OxGGEafGY)#OJzD~+={;ALbnfLCF}@uS&bMsc
zld2>1_y>FllH>#@K9_L;@YcNY)H#a_J(l(B<`k}EE(1E|m1CL6HCUflhmPl_{}+hN
zu0t7UqJT%OC8=VT?$TVt!R*hgi^A_T4I`tqGd-}qnD{TIY^tDJKc7fCWSE#T$T7Ug
zHyN<l&Vy&ch)(7<hU&3%Kb#(EI3IGg>;qd-e^UJrO`BI2Ff!P`HWL^rGu>}nJUsg=
zc1BESvmp?RmJQ<o*!-e+aYj4TL2J(?w6092{apnZ(4I0wfBRpIC(`ZwrjeY>l3*5v
zNH^42!Ww60EVQri9daCU#aQC+-op43+)z!U|Kz=B30bq1kh8wl<IqbYU-Mp%*l~V`
zUh!t{KrMna@BVih%`4X&cH#G{-9!g}E*{71)DY*=pEJV+z6$xij+%46L?zIS$N59;
zj*|9`v|$TO#VE#}b!q250e>W)JZEo83?X+m0?Lojn1|7Jk&{VwltR?jC4kCit*XGt
zQS=r|F>QxBA@XDpH1{xxHEWi5)vl8D<`{DD(FtZb_B|Q6PB#r3DoHGkm@4T#WIhP%
zOObV}3ZPW&&=h2_85&*zEPl%GICSc4x_vhceXg8v5r6MeLps^ghI+TSo7F&DBVh*{
zk#VMixAV7x3wIiz-foeO<})#DuFACIaV6|kLzbtS8$K5>gc~-KGLNSD=!%9>&2qtv
zAwNXwx5OON$d1k0>vN6f!+<ES%+;TTZB@1#97Kk`*Hs}OjYt&G1Qq$SMz-Fjdh3<b
zXyBzfq(Qo)wuwdxx8)ApFpCqcY+2AD78Cqnso;BmdS8!?^L4!J3imi!sNt88#Phvc
zo_^qy`oIT{m4AY$w#*2taYm030!;W@S-2#dxXroV7I+PopKftqT048yy7Uss^-7Zl
zi}I$qUEU3$|31%v!U>eS`S<E`Y>S#rbj6-qw`Lg6SRA}y|HB=r6SQuscY$6L5idM<
zxYH2X<ai<uJ0B=FwF*4uv$X>~GdY-w#17@+nE=lGT_dD&1OK2JneqZ*ln`4@7ofD#
zWYB*mwgnBUrW2C6uR;qxal<WuPt9NFB)wx|N?Z?QeL_CHNg2fe|KoGCR|1X<F1v%e
ztR#4hO6jX`FH+Y<>OACY-|eJC-3vs2g8-S4heXz0^o(72D!+ZNow*+qxvmPMKd7~6
zpwMp+Tf5*pk&tv$0D$ITDw86Qsmm+ugZH`Q{;=>$-O9f()x$qj#ymA^`dyz!Gv@^{
zFvmFi&TT|TmL)R`DPm_?WJl}hUS~GHVcAsc@LiGKLvvWwd*t@eLEOq;KEO<}@M%+S
zb*qYgrdL#Ab=X>B;)UN9Q4g}|Q&rx=9)PbNn;`oz?`tdZ9C{7L$QaYXOi?gE3x>bo
zJw(!Ys)gF9-Qkyj*^>{8V3bKSFGxIO$cc&s!;Txh?DPWe=tU_#mfqDb&wflfNTj6{
z#v*5XoTO$u^daek)vF*^a2UwQ&?!r7?z%?V1@@at_oT(Lk}>nHPwBvkdJRT_RD1Sh
zo9FSIIK-%Ro#MFQ`i=SKgU*zfb;hq#Fo)9s05sq5(ZH|%HlRdPc9;F?M_1hgbhaSp
z?}h(~rQ3*t4;GW>Rg@(+8GxE!T~M$+S!Bm8EhP3PZCa-C=M+pO`8$15RES<D^49Rq
zYh88rey<W84>!zn#T~f^Hc4YNPn4okKlpqadLl>%8Rq4Z789wAb7M7DP__alaM7h-
zmTT#*E}!SnNW6s+57y*X>WiKhc}hz<D4-I6dM4D;W))K3rZwun1d*gUBmS2`Jx*c8
zWVHALgQaCpOLz)t1Mh5#)ReliCn#}W?7vVEnA$!fFUH69WSz=O*-#<AC}(}2cbzR7
zk9h?hl~Y~riXC31+G5qA|Gg}Q1*66a-bLf?ZcTRf_+($GXs3rH60WxXI-BvhocDCf
zMH_KwL;S}tkksMz38o?_#OPB%*Nlq@nT7L^3x*FVpJOFd)p9zsjpQ&13ekeQeJR?z
zP8Z;dlWUhKAyt`lAex%!h~aUeTHvp97FYR;!}Z#aruSx*xjATO6xQossyOBGg#T;E
zmeM|S(M%Eev`0H8C#xDy@+^>HQ^quY4-&-H3uO!bT&o2t@5LIfjO}e@Gyaltc17$T
zwwZ)1>uo!|Jd_N3=X#gP4^R(0dD4A}C(^r48ueLFA#>Y>?+~>Wb5Pky+8lIka60NA
zYdj55d3Xc98j~BQ@C@|=y}&lIb$ac@KtvaB-)%T3hvOKX?H4g7s6RL(h01ZYwA;X9
zW0YoVvM+_VL|du(rpxgkKCAh?3F(SvWjo&tT1#)PWe$n^iljTq2r)9f<s*lTlJfTm
zG#?PdS1*PheOVPMQ`0qrZET$q1zG~c5b8Wz%BY{uZ{oyO*@sXkve{o~vve?V25_bi
ztxU3zvabg=7?B>SWeQzeqYXdLKu=3x8pL%m8=pkQoGI@`kp`L;P1`5mo&v~N!U273
zJ2iY^uA*lDGO%c6TwXOAGly@1S-b~OQyxVZRGk?@FMxk&-1j`Iph2$<!{q7Nx5YqR
zPt9{^w+|F_$2*9(>=w8#api=`K7ikP@wmE-MFiN{VNwkZ4yntLRBF)e7HxL3l8bg%
zr25?kh(rCVwR?Ylx)}>&cWSKfz#m&RU9R9!ncw3!_|O&sArlA|sHP?}J8$R5s3kjC
zpC9o-m@XFQiRXs+`_={bl!D(WTT7d|N@@zTI((y8wp1w^2+F=qohc;#4qAUv##5gp
z9pqFCAkr{J*sV!n%+74nkTErJ^OeE6aks-kMG4Zs>1+erRgSTyKIN%i8Ehf=vX5)C
z$ihobn7}ijr0Dr^<DZa7+i~lx#&lFmuamAoDd)Y7gD(XRPiGbp^G1=nG2XEG;-4XI
zgg>d}sg9%R*5M9sIDR-c_?*42Q}moHJ}(XaqV^!pV&{*1m){)2@q_c`K;bF0JZ{cf
z3ANgU+rOhQc1q-LBf2F`;mJW?BeA#+UdQ7O4E=@7obBk}0*mp8S^Zvi9zdt3<pXT!
z#w27vGvtYSZ1rqFUq!~V4Uea}(fmTWt~!&Pi5IJo!3clKCfEpj)DCI*ilWaZu!Oco
zx|hDmCZnZ+WrZRet)B%LvSWUm<*#Q2kdJJ@n*9|xSFOQIg;3Yjvy6oc{%WDk)6)6W
zG_Qqni{*}xTp2b9F{`(nPdiW5w@B#gRL$m;y=2woz!pW0g+tlJ=zUt{F(%wkLQLo*
z6XPcBL;zHcai{A-VAO`F15_u(9jJj3!~YO{k#h!wA$LHBlP4lUt@ak%god;39dZeY
z{*21pTkwez%}!q(03vZ6G!JguH+#kYN|>jYI__Gha5xy_fjM()toO`If7>G%Zx4_+
z9g09D4zDhx^FDu+)9sF$az36et_UQEJudoI`=bBz>L(JU$9}69>%9rn0-Yle&pT5b
znqMFoI^<B)hQw<d<?zfAek3LE238&lLB?nuvmwsu)lR?<9LckX#w-rH$FK%U2}~mm
zCw<c_?@UHj8`CC#7NWm%69e`Yrg5Tv+r2Mb!|$`^a9s$cUSeHXEd&Fh<OT_#QuKD6
zvC3FoS@@Vt3_31~{7htx39J~$`Lk(SL&w1Jy04M%Z;BIWlG$%h_QF)iRc>mIX8q4i
zcd!3I@rqwNENv^=da3hK$0+|7sLUM%brHdHQSsBnj*jGVI7FasJX4wrN(Z9noE|x5
z%0@1RpLhn!K#B$8el&b(?{hWLb4oA{9!h;=Lb`^GP!djMEHTzNbM)K1@WLq`1LzuY
z=sb6HT7Di#Eecih+4qCxD7nE#;kpuQ<q{MC-2Hfc@iaDcQp{f#O6vLO7f6_KHg&Sj
zV|H73cG!KsE;WZGtwM97S`9>SNt_U-PJ?U!m@Y4)lgFC&4w;4+%BgzmTrq6+V!}q5
z;qd9QMJc_|hX+!c0EIqdX|bIUu7wcRc6twu@R&I|O}}CQO(hfSpCOV8cNNSepKmus
zV|cFv2=Q6viH(PlMQ^i4e=M`ydd)-dp`!wJ$LEc2BtX60(@}}|(%xW6>9h}C)}(PW
zz33_l;)*{OT(aKC^?)6o`-&cHioNd3T3*~?aw5B&Z+T74+_bg5mnDv)n~u7?n9vPo
zm8@DD^+>Obe3F8>hZY{}&%UX+h=j`y|91ue>@ygl-sd8K0eawp-{HY`k@8-HclNgY
z^ZjH7nMFjMG@W!rEfTB|%#oO@a|E;fE0Y}Yle)RAo<uwyemhHU50vjivXDCdm=C@k
z4K7O13eL<hr06~Q<)>Ev3r5<mGKG?<)gvh3{nnxj_c+{j_2P~25OhH%_P*tW=>y>f
zA6njgAkZdm4Fzavz!Gri!y^M8p1kv|-@g|G0tTff{L3>8(cm}FOTK9Zy=~n}w<wc<
zD(cRr<!3}PF#r{5+=o60t}RSZ^W>MbWX?lthA$s%A7FJHhUDH(7zZ05Di*G7pP9V;
zR$ChmltLEoMTB*xf4cgSfgDXyi_|f$((GE~Hu75%+<C7K)`JMBb^8>jUpzceF|E&K
zEqmEpllykJJxus*1PrBdVMGw{1muss+JZpk!~p^&_h+4tlDq8r;o)T>DDZ#U<oDM4
zBuYXy5d(^`Q6lJ8MoSiu<W7Jcid2Ahg4WAgksi~l9|{CHmbk+cBjX+2?*J@uUXqvS
zPSpv(7P(P}fpfdtD)>IUqeql|dQlO$&p`j1f}Y0NI+)=xGTkkX)TCus1|Bk#vdz*7
zib2c?+L7nhGAX}>|N7vY5Yn5h+@|ss6#g{u(NnezR0YqO_>MT2Oin345Kp|0hw5`U
zbGdROJm=GB(qO#Yf{M{CEcJ|Ve1nNjkC%66qT7Ylc(T@0IOZ;@x_x1vu0QTOOIu_u
z4k8F)YX>b+llCAY_SxnjumotlZiisT-%pg3J%}n?fdDiBn1m`t=84)s@r7KE{H9jM
z*X%K&-WJ7)sK{H=R3dV}<m!&~SF)KCNQw9jrE6k^LNt{x1!*xP*>slhjO(Onfb$gv
zz)Wqs9j1c{Y<TZjMc7Fme<{SQ!yeQw%qqyO%?ZrCsL8Pt{06>WC*Tk+HpE{sbxfRZ
ztJ*gN*@X^`-356d;I!djGFfYE`qY7N+MLNK_sD6iK*e^%^?U&_tYfJ)q-&sxL%O8M
zu2o)I20%4Z+6oQxWGCXDK#MlG*!7*wyr`5VzK|^O=30hrYXm0L&b7Oq3CYs_6C)Qc
zYQQR;mV};$+bg;ZIid-Qkt|r9BSq|8SKV@;m-9D51Hr<loJ3eT{ENz$-)PfiQ9bHn
z%GnhXwYoQ~dlMe5->iAx_z+%w?WJ5K;~*4$B}N=go5lF5#;GZn_`+4rEsVx7DOl_O
zXQ0+FU6iNX4%S>?8IkThxTB8wavVGlrJu<1KdEQBx9e8l7UOs@?1X|s-}Ak!XQcNx
zyxo*6_yGdQt`cILW=`Y$FtzzIb3+<4zxPE`?^>~mn+I#04yJ(`rNlTYkESA1t4dU>
zgR8=`_BvjqtR?Qf*H%8)#hkol!fplM_qjdx3M9QE=+t_2<{+AdSv*00=v%lTS^j+K
z`B^6|H8tbW;n|mZJ@2aEik|9=++#xCXTU$*!5bOABdY)8Yrj&ckLiDKL-X#Y)R@QQ
zk#*sfqZbI#xOvA%Wf^bA@dfBpOWLc&iIz(1_|V$udT!L|^~UPw1d#>-?#y@h$`>`<
z*b?QXnwvVdh4sVdd8E1n$vq<i8J%cJj+7FXT?`qp<mBayH~)stYA8ARg~kyJYF@5P
z#)Qlm*)#Vc%Svf8xA^=o>P^;azvd07D@id~ovDC%wrT6;D}35^6Tu{~-tzoajXK4?
ze0}><$-?e1*gqhWam9VEvIvSVrGdGX8)h1;>XqDo4#KXJLSq9tFR?q3sdwg?c(xB!
z4cmE+O3S(QUk9gp=+kDAT|`V(7wo^eZAP4AofUbQ;m1<fho{s?!K~zr3B9<9T^kS#
zPphi$+dB$5Szj3>wMzh3fcOa~a2aPR*9t1x%%R|>4(9(V)F$ceSV)kue65vgxRJO|
ze~Qp*c7leBck#hdIF1P!q!Wc!T!76l>4~69zvR;7@{3u6QVvUDI9WoyZ6<?LVGc7a
zn1kG6QVvCzZ$L9_V2Z+eKHU77Kf~pKJ7NNbDcpJ-obX9Xe>t5(+z>|I%N?U7zyEng
zn+AY6c~r`Sm{&V&UHzrRA@hvX?l^nsQ8oo1hKv-Z82@0Y;pJi!Ic`k2{-4-UC_=lH
zZI1-QUR;5^Cp3E{f@rbjZDDbWdZBO}o0xaU2pKdKu}Kbs@1za1$37nJ!4XYLp0WP%
zuum~1=?#{&!eVyooENa0Duvwpu()j6Uj=+UNJ@2Ivymm*NVhLA&ANeEzS3*{ca`Vn
z=rZO8G9$FC!-i8WB)&n#&j)ICF$2)MJL?br{E~mB9EhF6dC3#s@DW*w>O+Dzh%K-G
zM4MPq3TJt2&AuI^C%&NJo*z^`;6-^{h&0pq+AYnq>lmr}pY?g^r&Iol9x7H^-dMAO
zbczFt#8WXlj*5+S|8II;G}vb;>7+Ts^Gban=8jWwi2g$>EoULj<xyoV=5=|i_>#=S
zvO4MEb|!y>IJ?_p*GY57*76M|p?t<L^Y1PtrB!FH6C+!cu(!Zde!9$bI?F+;eGQwT
zh-A|ISd7gC(g*cV7;(L~*ZjU-M73$<IPD)9QPOnVUwa0#S$HT~+daT?1(LcNJ+??g
zv}ZWP{HLpH@7WNgr#YD;6a6Wxw{&b&3m%IFk%V9VV#Gpmz=Hf;?ig(@I|ZzT@?vOe
z37w{vm+Y|FER};44-DLnS%=Eg4lzc1=p&0kxprBFmG}=_wCmC&0uz+!MP7$j{PRe0
z4<BOo&PTP=x|N}q>*5!ku}Y4tc(oJq{~7P*btGpRLj#;g!&aW#GMUbXn60Yh{L-aK
zeDmKNX+l?LPO-~JD!<?L=;H9CqVr9N(nptFaKz`7iW5q+J+c$_Gqq3OGJEj>Cds+@
zJ1(AUK=}9z8aN?QD1kjj<!d85L#*CM<za*|SW<5`x-{1)?*n2Qn8&|I;a;<w*ElPm
zZvGc+sp3^kPBoYCJYocWQfc{NCHrV05Mu7&g<W=i>?t9Xp;@V^C-gCnw7Yc~ovonu
z<b)PSWMgO^2Sk8^Hl?lltu&G@KrG0K*k1B<ox%83=53u({gHH!K;4O*nV`V5R{S}w
z-yEm${bl?S=`aVXxl^Pikw9}ex*i!x^9|+~<pUCu4QR&!VLMvY(K^J&`$sqoL^|MV
z%EEt&BI)`5a1m$cpqLZAU@IZ2=HoV<73l;!lUFdIOf1(7yvqK%zU*wPVg<HbL>SN^
z)T+bUhl$#wTf0bYrBbpM;`yb>>5piW#7FfR0)%elhBj61;C#u$!{LQAb+w;9k)3`d
zhq5ObG6i`t)%G-2iC%)+S;%EkAF|NM-#`OZ`SB%C0jMM%dY}i;4_L;8LF8IoxE898
zE%j_87x#Ya#r#zT;q01czr8_a&0)j<46k;jJ#bfCQ^BNWXU+<a#}oX`oG-}O6!B5h
z0aI?;&Qz!Qohm*4GDG5!!kV%Bsj0wBkERaRY7Ql!PUS8#==KmV<sX{`ITCc}Q3F=7
zj-5HE#%cA!65?=kYb`Af48L1*Or7!!^p3nnYP&l=W^Z0OsQ?8}I}=0C7qHB2N+Qvx
zfGmRQm5_#!jg)~R9h>u55(#l|`s^Yk9~7LFQAscB5sx|+3gvk{Ao;`R-tV2nURjPv
zch*XMwv0=5uAjKnlG^8A6@w>8&>Q8dB1ZKSv*cBQ$FSR*Id44Vi3w<z1$kQ`lu@PI
z3T|+xifhfhQXj}J=1Vy|y3XBFYEO$-X4@1`nLDAZjNY^38hp39<f(xn^sVPDknJ6?
z1Du%0`D%a@Fv$@hDJ^5jcGMC8;0#mbQ9N2O-G*V)=lxO5h7}2lPZdf`4XFuG_!tHW
zMW6QCtbenkVPQhFeaRS3@G))$x{%#6tNT|F@r*2YDa2OI<vo1b#YeBmjEs38pLRJ~
z9uWNa_8FZ6wFP72(q-J$XgzwA>bx@;i<+m1hkH3Cpnl!sQ^~kJoe%84>`I8F<)9;?
zGiVPdtpi}YPWb(*^Ycj!#lvE8yj?)DhdrO_4hK13XN(fyF5RL5m&eFfF0VBYas>O(
z0QEIW=$HK{$W%9I6_)0=mxKVnf&vcWPoe#SS%YJ}a^U+yj5}U3kR(h2@KPg}x!p|f
z2#PmGYPjL1`0&+^nl`(nW7l&XHow5dER1vj)w;`?ix7z^hqZypkO57m4ukDoWgp+=
zu_OC|bG4Jo7FKFtcvZep>^`?B%xLB&eyV2Lhy1zj%2g@FxGq3i+@al)%H`Y<5kb4*
zCu6huk{DnASfFz)W?=GfC+`iYFbkVeSC5pPrszkDvNwCU90~Sep65Gs<FcdiddFKL
zre%(SV_n$3$I~<C^~)h(g!Wi;Gf+D~1(})g^P0?0QmnwCjNa^o+b_xK0?Un8=cayd
zMxi>y=dKeBE#w0ZtItCrb7G{BJ8xPx*n7^yasCE){xFzhUv;b6xA}v~?;d^Z9=~tm
zE4v^M{I_q+B4RE!jzn1GIlu4bttf@vpJ(+yD}0V5&KU%G*H9^4Qb8_El7!SgKu>tq
zA|d6N!Y7$?-%xC7ltGsBqArhJd;PKH>O(c4THLlDm&FO&%_jo3H$GZBx7NC#Vw@6$
zNf(9ts%S@p;z=|jr*h6b=Uyv|;2vAQY~L{1SkohCtXM^9Ag<`6dw1@GkMsK&7~Sd4
z<F$QkVCqq$u#T_F`K%{5YqxBz?y|OINz7S;3=`Jdgb61ZxanuFk#@EF`_B><n1YcV
zhtr1e#GPu}jb2I{gMI;95`TZkZnfDEECGZ<j*)`@f;Evq7#&<1(^70hnfT^iSxqT|
zT1&-qe6nHFdYM2T+IohxG_FO_>vd;eW*q*izd|D4CuOCPeuoYC`ml8A1E!#Bsad-&
z1NmPdbmw{fTcELN7N35hoPQmTK@WOH8O?VKRc!x21h4=CPiif>Gkw%8=8%f@6C+Kc
zGRczazAgdday=#^ZAPH(nah+%FZMUJYWC03ahW_UAZDZQD9jN36ptddCu@;QmJlp7
zg$F@s6u5tGo|WT>Vi(_h^<=^uj?XC@0yC+@Vm?7Ch_sxD8~cBHQRfZ{Fi$OSlFao4
zI7iS!f5#{+NLqeyiKW2}tOFOnpLxa@2I@ZnB$=`*<W&l{*{5_X8DLAUJ!P#pDwh|_
zIA67qyE!*657iA2uG;1_UL=DRLkPgjqP6I9w;KX?bV+~&f*a$~MQRE7{+1JdO!`9h
zTNMFwER)N}kv!t>{-N;vsxX@)&lk-%HeB%}kPg6rcBi(a8CvC$1zA1(EFPElAjWJ`
z2>@AFv&TDVX-ra1`X~Zc(tLO`)+YnaoA=`J>K-N{e86k$(W+EA)xIgcYLx|VN-nx@
z%EVJa1X?hcf`)=SH`M!Awgt?i;SEtX!*y#YYZ*sbipvR2J6C?Iq2Sj-9Rz*MeEpq3
zgHP!2&`bIvy7wHZh=S$(S3=FeAQ}vZf^oJBjsIVV3!~9rfAd>bY!kvloJ;zj)=GJz
zoz%mTGtb^cevDoQ{+gS;{eBs^veu`VyI^~^FPei+sV?u=>rXeesQuzms3=QM$<t@?
ztSc}kU{6l*=dH((iHG_Q3H6<Iu=<DnRq=P<5TE9BF(}3Ys$!0}ZmSTbH{?%Cg1~{n
zrP+9wtiUIrxGe#PQIHcD$6OEQ;iK)Y!4-Bxs7Z(ze6Y1x;liA1O1zikAmD?ufRU}m
zHx^<e#L-Gx4MDnE-NWZ5Ed3gLA}+*XveD%v`OCM7iQliZDlD=aALvKrZ8SC(j!NLT
z0TBQO9R{wly7)t&45)!%0An3~1|TYHJ6T%Z!i-^Y;6-BGIA*cP=hRR+4s4IaOr)vC
zvgG0`8otqha2dTCzgj@J%aTSxJ{g^;@7XK@#c+nq@GZxi+O*o5>$1Ue7-D}UsukJ?
zb!0QDvb#U!+>*(?4ez)cH<pSjRG}?!Di-o7{Ux`)<WHVXmDQ4__}H?l2~0xP4OQw=
zU|!CU(ATs;M)L7D<#K6?#xGB4kD~7k(mAA;nuzWZm|)53+hr>VL|T1>luib(5#n=I
zm+a{mh|$?%T2iraO0?rzvD}aSFA|0r&<4qD3R(R6-rBM*z0eS3lqc-@m4?{TkQe@P
z6f$UVd&{m3uNO--;kKtXOaKx6bn{@4iykI2<;f8~18m4_4BY5sjp7^|I)%m_X`im&
znu4per6_*QLyWs&RIlG^&VqoD4tXlk)nQyl4+TbsaDh%QYauR<mW?f^G>lxyfTwuN
zqfB#eEuMji*8kpeK=D5D7{c%YoHX&tw0Otbp5)k5Ss+q)FXFan3Z{+FgzcHet1MhD
z{jqo>{dDZ>Q-rFB@iiy5Shfa2@`keXHGupPq1znNU1`1q^OzYwOl=qYsw-XRiS{+E
z+pt5$K}|#~=<(6#;HH?EGZ(twpQ)&roomqOaG`Eh25txmwZ=iJTyKj~XJ<wz$45I^
z9H1y?=3bc{FoBOolzpGz$p?)#V(sas-_j}VW>X@EoWH4kNZL#l;^c%rZq&X%mNGs^
zjsJYXWDYf9oVCu4`4Ps2s^)Gs+UaBPD!k5(0`bIyUvXAz=K)&8h?!(UwW2j>uw*wW
zg>b?o_c7eGJzZTrrLczh=yvSjgXL17b*@;5(vVQXp>K5Af5IijM=faq7cd0<pCM1r
zMKr(7W*%#~#OYo#G%L-Pb+Ga?p`|<}Go^obsxC6C1CRti>nA6eN-nj!o`P;_;gSLD
zPIjOF|Nq-f+|jl#UJ}2kn?uW`iR%5x+l>C7E1DTNQ9#GRG*fm2Ce8;eqlz*uae3k0
z?P|)w=)J|Q{q}&Y`mEta>c!LiL>fi*G^=9IRZrr%CE?ogzMQ6OE@5gg!j)4|&T!&1
z$NjJwg0e^R*j6Z+X$(l=o;O04x{R!{HF|{G63$v5{ZEZ=>fmoyQvpT?Bp4xjh*oSQ
zwhKqbHXIYMLExz{$p4>%mWRoldUY49)PJE`upD1*cFWKM^E=G%>x<}6<ukAz8&g^I
zKC+wsoL)L&0S3w<zu+XM&f2i%6AEaem2Rt?0Cu1PB6&-t2W7>Jz(QSlzF9sx>K#*B
zbeJW>Y_+JtqR!u}$`&3T?UIQ|39Iyuo4>)eb&}CTU05Bn8Jb5A3Vsf2Cs3e%cguou
z)cTtgXVM2tt00@EY{@(4vccWP#5jhc2*x)lk4Qnau`y!ndDtmZ6ZULINJVH3wS?g+
zOMOzkc-mRRx=Q2-pGD$|K6{{b`KK|V`5>iVPTL_s4YkBwY?Yuw6s(HS{gZo1nNdjN
z9$dmxI0(ej3;kDfAH>0Vn(}ysc23Pko{;ryxJFD}Ut?ehAm|J%3LW%XH}>r1i}24D
zhDh^WffHdP#Tt<lrsRqGVklv;|AYY`V}$tQtolfC2*mh3A>g;!#-6XD*NGX>$4{6R
z6*APkb#2xYv5>YVicmI|#BF-jaeC41^%fDVu({vlJpln)z-#=#S3%(<$Dhv8qjK$5
z8B)P=+NA<fx3!eXzXmK=Rg2=r+%hmLCI;@u)gsR@Ss2>JP1TAjC@u$p(eU(*|4CHu
zEItvXW_C_Nn}T=KdMmP5F&cHE@eG6E^Pf<Rrl8m4m!YU`{MB`psg_B0Je;H+82NXZ
zflU=dz!{~b^;_2l(|DJeGjN~2az&zzsYLJOEMX*pZP^0+$D;40!q@4Kq+S@U@h%=$
znj#)-QLd+rRw-IA?P+SUaIOI%nsa9z3GcSUV*cvq<Ex6xMp0kd?PaWZ|BZPkdcY>B
z%9df{*CYnAS<Wh$+ogv=)k&9SjQpjUYjHlqiL1q=SP!J%!6aJ6o?jT<*6&N=5j9P+
z;T{DPiB<ExvZlZ`Z2823IcwYGnTH$>fbXY42Fw$^slM{#RP#{aM-bvHhaOj7EV~5h
zT^Vp;OE1cYR`QhmzQGCJhumr@=XLawY~tZX60}Vw-mmi?$2~9-{Ai;rS2mmr4MZO1
zoypWg0!cH0AWG@26OUF&F+vn|*mp_ZlIZ&ERbKhMG~QaQ&yU8MzX{;;*imASOF;`H
zT`B+V5+SKs$1w_Xgo4~l<^=~1*mG<KDYT+>hu%7qrAYt?6`&^BPbYQS!n$kl>kg@V
ztbwZWSKlaCu1&Iq;bR=aIaR;&yd?eN4(aGS1JzXTL!-Ylo}zD-|NXf??#&XFMVg6P
zklpY5qMkOnPia!+3P*x)F_|&G_q7i3zK6=d>-_L5)}?Z2zNpEMKPg<R3cxyyaLvHH
z^f`_c|Gl|`PLy`F-9}xGj$UE<(U>^o(Fc!j3EFW`M5llvXBFvWyy)V9Yot~ttVO|S
z2L_RL|0yMJBZ==s>bn@gQnP-1@GpbWeqxMa(D7z|>F!ur(Xv|8gP-KMB_czN@pU=S
zf+JkHzvL@yFO`nmQ`0ITVg6)U2uG9Vq)K3^nC1q;(i(sZZD3Wp(vz0WF8WHF$!2v`
z4Z;u2F0WbY9{Yxq!V8PTzlCtg@>6{ocR}YX(zYq)Vx453Ajp5qGbulY`%%W;9Uxbm
z8Ru2YwF`0MD&RbefhXLsDi=UxR8CYr!4^Xou_W{`!|ov108SWt2suYNQ-J5}LLUAU
z#AK>x%Y7NE>i%_4+$cHJfxvXq*XRz?ujf?##ZohiJop5Hp+Tx}&fa;kEBG^4cJgfn
z4!VEtL=0nycUP=I-GOnM7oaDO-tXVt;PPN9_C{GkzK0VhJa~4V(?0)MYl6yFrV7WV
ze9U#r7+wSDa4hge+Uc@x<c}zR_Y;#?i~@OL+BVOOpkLj+r&B;S3ysQ^vH-Lcy@$v#
znJqh)fH@e-BpR%OI|e@Ox1)Qm(Uf>|&ioLwmzc7}!#@Nk>L!Lm$R+xEQ7IN7AYTJ>
z*3#26#=cvX)Nf?@Ub_>|Uwo{A<gGIVz9uO$!LgP#%oPm*puQqRS?{1QSfFr%$5AH|
z5*z6IQyx~W_1XMHCGcUkd-KdT3gBk#<HbcMx-GGl<<Rji$rR1*{MnRq6c|`yTC#D`
zt|TwgO4F9*kaq#5e*QibZ|PQeuomEPl(}F$pp`l&_vub2c~5264cBad>y;>mtHxiy
z8v(|>N)1{i%WaV`!fo1*Mn~~i->j>?`7knUo!gct4$G@OUa23PN$8;k{?lVCXKM{?
zW!DOc_@Lt9yMqZTi}hDSVE{!af@ls@W>aYWWis#mmZJ%^%^3YPzk$M*1k4>exdGw6
z^kOV`FM~1ict)KqP^xs)n=sbP>a4)b(F8O%x2iIIz{F7~*@^$-ZH=cg=))n~3;@EK
zoqd0qZ``m#49T21fmoZF*i43O3@Js1aP0t;FJl5LIImT23FV438S{uA`yfNxt5z5j
z!t<Sywc)R|(Q<K+xFMQZV+TmNXZVmntW0b7;e-Ev-O1(K4_)Q`nguxB&ov8)sPh(3
zIv+<X<62l9(5#8HJ&U$yh+CP~JwvrlNs&sXk1e3mNjg9q<M#SpX>`K1a0-C(0bqT7
z0xH6h?uDnRhwV%UDKnP_!OK%)>QBJ&Ia@4-VE4I4h)$!?cY+`8ooS|7sOXr3E@2H7
z!{YRs4CR_ux>!O&CPbq3!d~oTK2)QS(>cXq5b73xOFi!=jsq5Yl3Pm^MWIs)*#CeB
zk#21Q{LltI-z)F+Vg4k10(-1~D|P=4^-VOovaXbK(Cj*CZx#r^iXW%YNCR=fQ225x
z-R`p9%BXkTc*~mf7yFc5T??`7INu0XgPXdnhj<ZT#+>F}3f)xj6az{0hoi48WX71j
z__1{keAG*yvY820HK$KTsgBy%wGx3urQg(`vFmU`cet>q>QCZMB_cO0-Ed>avbJp;
z0P2dai3d5?ZkxJ)>eFH+CWeBxw9sY{F(hQdBa-dTqk(&4{dn@biBRaS-B=&Jem5H_
z!^vQmy#b{}*^vT{mHGO2pU<uzLUwi|sD?QXOk_6{7~aGHwv9h^i}ptuqg$7D6hSgk
zx&J0Q$XX86Ae4r^v$<40fsSt=IHtB!fvNUT;gk(<A=LP^#cmS~v&n6Wrz&-a_AnhS
zifY#-<#nE^&c)Ob9@+*}g(24z>^aaew#1ZK6-w;g<L(7_c{3e+mxOOsS{1VDaHYaN
zI#GY<;6{Ht|L17!2@jZCh-`_X6~*7$c;^3duR1g|9=&hEK1kMRUh0m<ikLn_a5f40
z*yOfMtiQ=>LLw_i7Dxw(qlGCA7K>{!dQ7ialBssQV#hOTN%Ty}JiLo&+aP*xI*oeo
zFo^PwmQfb;<$fW2Enop{_vj1c+>`@A9kx+8s`y?u$9zGIg@54*vlAY`Rz$EWcy);g
zxI<J0*E?wl>CMa7KN%3D?o%_T_D){kc-D35F?8cqbMwtMA4OI37g$pby+x?b$W)7}
z_u*KKl{!C-dX|&x%^#ojZ5gu73iZ#jn@9$eMbcrz^g*UgxR|2SFh&r0A;J%r{B<2|
zxBK|jCo?5j2Ey?BBSKnc$(we60Km1^S$-{)WOxDw23nR>-RWsR0N3o&`xm!v&qu;i
ziXGBYtwi4vyS}fhKh;|OJ>LkZ$R5+7QU2DpHJG5j@^K!?K96j2^{M0}P2NX?xOA82
z%v2y&`GKYYu)7Z#9RuuuBSP;YkCC`Sn3fVAh-me|%-?|i37gP@BZ6gZe3Q^KCr#R=
zb+zwhnsQ-_+c1xAQDxK8V+6(?d@>|zdqwEMmGzedlbNyW%%O+2qn=z#Jft>rjxUs+
znXC{vOzmFMZz+V?<Hu?ftf)Np$DQT&eXA(idMFQdR8IkqRk)yE1Ai(+=UYw<j^nLh
zeq%#vzCH@tIf5?)<*0$cQ!OHz60Ay|p~+{)`JtEXziorGHnQ#WQrcRM9yHIhx}>*>
znalwCV!L%cxIEUG21;LIJ_D;)u;`qK$};?2lzWNvEv#5S?|4niIp2ebO|cgaOlTkQ
zs%K1}*xUl|?ng(Dzu8YBC%hgG4$FJ5obpygp8!{ZfN&hozGVM)jGaVhAO-KSeCh*O
zUu7<2PipABj5eE0rcI-dBbt8QD-`a@mzJ0>$ay@3vKr!njB{+AYKn<x!wM94TUnQ9
ziej>f5lm9WjFA+7$GHiaM7%nSafsM@ZS?s`^!BPqJb(Z9F{G4f3*^hMuFw(M`JNG%
z+`NS3Ua~odPf&?}#<smSsZ70$P7%3*`iu}%paoj<^oJ7k>&%+HK%o&dc!eiW5nuZY
z(OeJf?)|_N_QucftxQr3_M1J}SiVs>DNW?jD^GtJEVkJ{URuifbMv92KsJQ|P9J@1
zc6)aMW+|{4!Y*6ymaM9z_`mm+O`ME=ZgMr7$(Tk)6ar}5rm6kD+<oi29O-MTe!j87
z99-BmG0^QwvGXN40+|SGg>zlt`HpM61|fvr8{xhLu(7?zQ6w5oPTR8mI(qIR00qpz
zU(V^am++V|Ub|g{p`CyS?s2Of@V)5%&yocy^ckZvt@Q813XTjxwoSY!UOEteIli*d
z8EOA@4_94wstm`bwnlI5W7Fpu6LTwxlZXy78#RL<h*7=apBhD~APzj>v@^}RS2BSV
zN!a3W2L-QQWr@{)Tvq5FvWB#q3;Xd6{x_%pfDCmQo)Gpin0wZ+%MI*)d?fV1DINa5
zvy%R9=H`ztM8+|(+1hGR;hs4Qiv{#WM%bQgrEJDm&Y1$lQpqPkcJdc`qO6dFT*7D~
z@FRCR=DpS8AYz67;L9T8>U1RO8t|zZd-)b!GKd%9Cmc{~TUQa!uaUy;ylP2IQ~`GS
zKd!+tof(Oe)SqWC$8b;rO|zwJ@7E}BjZofO<X!<ob^PhXFC*YL94W@Quzj@(>*#A^
ze-4vU-C(7Sb^XpE&vcxXwp}49hAL_Uy=M|6dm_x92k7a|G`A}cgaL=6=-Y=P`X0kU
zZKIQpx2>v^`Q)0DAX9nUL@}{X0#pI@4@xx`qQ6PMpBxEZ!Y)iL?*xDU&554VZ~Ec2
zujh2FmLD-_DCEexU33(T$}<k*JZG``XVKaD^0V~y;=n^)%V{rbj0K?bw+;Tp#XhC~
z%mc@=XJGa`EfyvAhibs`AM~jg4$%L!ePO%FvK&O7zMR7Uf~5dIEh;r+<YO%Zb5<xp
zVG--GNRF@>YTB|YE<?1_ada@5@^=Fb3ah9c^KD?RSq=-<6E%kvzxQo{xQBz#{XKcx
zNsLtrxt>ySx(63Suu0+UL+O}Z?GS-iHBBJ=<2rPQ+gu*$9!iP+XHJ8Ex6I)1_5eme
zxxer|$STdo4h{~5Pn<h0*Dx>Cl8?4WZOXxHoG>*8WEGUt{2LRGh!)s{pl2i{!vAwB
zI^!kj_PsKn026)zOvt=ZV=gJyU5r<zDjsRZUsP!x`N!Eulvo8OYB>P=1vQ{JlE}ln
zH`UH)fvc$1TATiPvI;f+60i#0yGd#!Lpe7?l>&wbvDzWYiyQzA;CR2pT*yif^T62o
zEhH-e#$GQDX)UGN&U0*(B`%yHXpVAkFI6Lkrvp(>I{;;bqW=`Q@6XE6_I6rRf^UfF
z&*a3d3091{cH^2F8ZqKeHs-Fr?+#rulh3;h6Cvy++w=3&;f=N|qFRQ&=&cC>zi$$G
zlv@xOa}TQ$Oga7iG{GGnBt{eTmJU|Sf9lM8g(D3rJnkAqp({4i?T$q$o&v_eJnAlj
zqs}<t<w}0iI`mRHGKgLqZ&j>c>(tj(j}Qn#R;xN^ESM-vLrDb{;B`_FML?W_0ILHK
zfKj>+KdjkHAn$*~4WS$&D<7^6+KsEfVHLb8`S-EQ?b(6^Qo3B?ldl!omw)~kMZUQ)
zu8X>;rc9AfT){EhY);2OJ3nx;xYyx|v_SdYE7Q{oOpd!QZGKt@>PywQ!f9n~?Oxk(
z(ZJ!*=HgVa)oNHCU>)~646T6Hu~cja_Bpe<`$!D-(7*rkj{vEV(K)2*5wSplpJaWP
zus4p~Kl&{`BWzbnA09QS#I!u&uUSIsD6;ljk4F*U;FR2j`662xi0Vsv$`48HP3Sez
zKqaQAm}VjP2-S^}R&ShaMk$^@-&zQ8To6HPuft}NKcNMCHF0~g_$^v4i%{Fj-NBk+
zxxsY;CRx98n*P7Zu`1bFBMqoV!dh3Kp}HRu$Ow%6O`(*}MUjomxxE@HNlxZwltpu%
zBitrCwW%9e3~e?JQt#S#sd?qXUTeN_H9I6X$-Ji!qEP3b;Q+}^yF8Mbz8kGgV~mVP
za29HoASh{snSCH}z*^T2(?dPnLTmILsmW>fo1hsk5{IWu8VSJD3MVX;BPqNt3X!j|
zASrDSC*Y?YAf!$%ZXNOJg`|qO>;BQd2rB`SRU9Yg2s&DODLGxLEy8Hq&N`5=ntX$>
z0H^l9tLVNai$5%drMQ`%h?&hwXrcgbdz(~ku*-2;YJYgRq7lg;H5xO8P}I_}1|Pt`
zl7I`UiPb}LOqtpWD?MJ`>HLQ5UJ%Nij*kSU&uMpl%=Vefsd906Y--mZGUDat)-!DB
z532^TfSdb|-meu8PzA3hLoo8&>nvel6>Cg*s2B`0Qha8SCKIXMX)*r!5_C7EhZYB2
zmUE>#Dd+K#2OlJq_yyqIA3=YZtAl0DH6TF~-fAlk;rBzFJ;vqT@*1&q#J0vZw;Cb-
zx5)r7na&KOgab1-r$D{f|HFK7LJut2<8q((St?>`T<7_P_`RC9Q`Q!uj`p3;v0t21
zM&5pu&!!Me{984=PbhX`OOq}^Kn0iUI`|NGUQk+xuku?~g8yIPJgRD(CLA$<2};L_
z>n2T_AyWWg_m>G9tJ+TSj5)6R`nN0EiM!#y2{E=@EX$0YHS~71fUgYq#%Fzl53?Z!
z7$TVk+g92vZjB_YfJpWoHCQpzo>DDrCde{SwMcs-N`g0GSw)XsusB!8aP&(&CVZxZ
zfuZy3WY<aXsLT4qA3(Pz>d(Snoa2byN(Ps~)#z6iRdZ-E4vhN-Om?6z^WJcd(yY!q
z?cu27i~4{bEsVpDr#5*BowZQJ%ZaFrfk0{wPuArAO^EQ@>XT(%?7B`C**+Hfvrwh!
z)bvUWqmW368##kWRiErFd7n=a=GOnmuyeB_ti$$)$gQ;L3xn;(zB6BayT40XF6VFB
zvSlM!fkAR_Q1cAB6b0iaU&NxYd>j9ze$x)_btHBxL}xjWsnVJ<>s7lC*CiK-IHaSU
zUC0^+QYAO;eO)9TwgigPB|&92mr-4^6gWY@AZ^%Gm-P)Dcr2q!S9W2XKTS0LzW{k^
z7MFhL-AA%mmV)DusKb1dt6|rCi%nKiX}%2}kSFez)mmTXl+B)RZ>AyDV{A;u6s2{*
zjU&QnI$^KYWyHEve~G@A{rg<`Nq^t%?<FyR9(U%BGs|uCNj4|vGDbtff6+0`=VU|K
z5`O)}AM3b}{}9!+GK5$^r>c*BY-Qp14B1Ty5Ig%g5`@yjyGBuXToo$Y<tGHV2@&0W
zC)>@LiDa%_@Irt^aUbWr(%gxLOoS>kVpE~0p2^y<-_Hv7a$;)lHUvnRNagIq(7}9G
za#6R`?Y=FlWdl5aplxU#jHp$c^hGnS&7@zWz^in-z@<Qb2yRuy&@Bm=Lb9d^ni@?i
z2*<Tr-N}8tvm7lRI*O1nA4&}Mp=Mbxrdm*L#%4Ln{YqV5Zb;D3yfOl2nvL<uEFh=G
zqU0mov~TML06=|~|5ecSK!%NL0~4KQ&~QWLf6Wy87OCR*kbv4O0b}ZwFa`|b8)h}D
z1Apu*%o?Ec?E8RU`YUM+<5KAL&NqMdBzT6INkwc={q^{8K#F{{wIZ#a%DT)v4{r!M
zm?cX`v}~g-WUt8<Gm82$uF}jFML3#Hfv`y(w1FC^Atk;`-Jb~lbA~)bG?+$pB6@7S
z%ls?vZ>z(Vj?{&BJfl>3U!h669}a@77&FlvEJx!1FZ#(Fpc029ds$GVgvSa|p3-jw
z0`|C?T&Z2;&`BLUK}-5Bpae2aH9M!qPxw({-(6eE*A@4AVgQ)srWpNA5(!Bl$8*)2
zHuztLgXNnwTrG>)ub0o(k!F2T?DP@Yk;V$SysnRgwjk!+(xCbXSY5!S$xm~7`3D47
zlvw$oh;4?jR8&WT4f@VBWEb3jF|uYVi*|mE${Hx3+OvN;WbZ2X(x&Efb>0{=U%Afm
zs{&+^kCWPk+*E&qK&^9QMV)?=Q9@Lz`I>EtP`8RN6&VN{PfoXnK;<%mx=BpkxG7@s
zwjPM={e+%zT}W@zuk%nfq~u-ykHSvw<!b|mipym6(jGMM4YQ$1TE@M1SP<tgCEQ)s
zE6Pf?)@l8Ao2Oy2yTn77Qa+jDcHz&%naE^xU+qK`AARK6l@b8UHn|WmYW;C~dmGmb
z2I&ZbstvW0fG6BOo<&lHm_qYUfrcPtky(PX-2$liM_&B&yFr>@82l=e=IgCaSLpR|
zuRQbCk^bW}#*W@tDBbdtDar^#v$N720nWx%K-U{2ROt@e@xTg^aw?(F|0u9lpkO`F
z);D&?OjJ2Q=kdpvi4(v&)@f+Zy>Uu0r3t>r`aU&TcpJ}LYtJGWPI;+KtLl$_7rCZU
zj&}YIniC-gt*wZwh0mqy-tRvaD~If-B3l3dvn?(34I{s@HLFFq2oc3uj&)}D@f<aW
zebvmYQoOjRJpL>v{6l_RQo=d(C7Do)Dw_B;S-p49Pc81K2tV;wZiX37tMWYR7Gw1w
zUD&W3TH70~dQtSjgva4Al>=Bxwap+9fJo3@G2#NnC*pZoR0#k>ip8HMdmbvN06*k>
zRdnt3Kp9zGQ>EVB<KOemY(X~d9HZ%zS;jITj7@$&j1d^)*8VeaCAg57ZK|5S-NkTG
zxDgj{;SD96nH>haAs3yp5z}(BpYPKBC=m~!R#7fzA$C{G_&?EMfOP;+*2^+>hvg)b
zT4=G5`+XNv1JLP(Ybd4S=v$@S(Vvg~WE^t=^1zW7St~Lx8ltz^I<>TIoFx3;`PgzV
zkXHHpkTEyds4Q;i>~R$fjZq#;jI|(iQ@2$v?k((03p(FXM$4V}UA-A)=^E$>?ITF_
zy0opCR1fbvaboD}#bp=iyuR?_6S2YW&m4C@uFkD#lFhx@f+d-k7a;NuMXk-AFA%^n
zs4j0U2i;{zEdWN!;?g63j}zgt<?mgywF86*;XdO4?eTDOXGsL-&MnZ@ad1fEasrmb
zr|pdC(XVIpD!Xc4zWPC-HL!ofU{bsxX5?MfeScUQw?2pBmudAk8bL#v7O&O#KYKjt
zXwf=SoiBe#ZUIjrdx4b9nBo;)bY#BUcT_*O3X#X+q<W5C<gn>y+J`f`Yqg>4{CMDO
znsY@kf8mFE%S&Ln34Wey8@`6GXg1leR92_99ao-e$E+wmN2UjkIhMColiwN@r*C$O
z!H{4Wn~ZzLB~Saf_d`cegROPIk?;@u<49`hBcQ*1Lwf#zsbNc?22=PHc3%)W)))Gw
z&zeY^apMNC+zB-CJKk|n9*v>9%D#<UY)867`EL(tKC{_2Tt*eZd3IdzsbCA5FWIiV
zd+Utc3_9AiiJyLR@_@@}2c+KGl}2%jk1v({H=cL5_XWpY@vG2TG@yc^7f#k1I}>JF
zDr<nWwcvo98a&25``-2R3AOJ9U#XQu4W2c;$7#L{2&Hk?fb97h;P<?;jHNGozx#$Z
zW(L7_ZL_0+vp@fktv35x-ydso>qv#OUj%PQx>L}*pDONmCxwaewF$5^9cB-dcVtD4
zaMi~^{dLq^Eh$j+v@O?u#5%#bl#has(}UZ(nRw?(oU|W+pd9L(o<}ANfC>`K`YA_E
zOppTEOnWWkY{-vg#kSbX1E2mjDIjEHCzIB9TI^VzQGr(Az@xl~(o2X|(5EGWvwJR;
zw%I1zCY|u{$p94#Wr+9%ID+@LAPAsUGg-bd2wLEX?xnI9!7Soh{A=gqJ`&@sH6=3k
zkNY2+G-SRY%%*_W1qEtPP#(=wnezRBO+cAPR%{=tr;|_jvb1%UwoN<Fl&+mzYzTVY
z1hQ8;D>WuAex3k1t+@BTN-ct*<>>T;+qYM|$y@LtZSFbtO<7)hyx`QZl_I%_Z)F|l
zr)jU)q(YDL07Lvydr`xOB8?Lv`E8{~bnXMuXen^`hdt1(t=mGMv79^5QvI}_SK!}{
zN`BG8^EmTFg6Sq)&BJc4`dbh1@NXMa`6>=6lkCqALfEsxk;_PkltoDWg}C(Nli$(d
zJ`RT+8piH(9;<~X+mVy8<Ym7m1)P2X(5w-CXNO?aINRjxlJ8p{|3m!U!5VuJh~#&P
zLobT~vZFE6oWIQwW@&7tb=fgtLr_^O!-=e?yjfng`GxO-Q(lr>f@qOF`_@E@=fqUF
zrOlaJX6Sa|Vxz_5WrC|P)MR0;KRPbX_a+;~VoIVu%E|x#!MiCph*nkYZ}=$eJo%jd
z1bpeqdU1g$Xr7mj4i>s$KW`H**W_beW2!wI^I!{o)Q{B%oHSjX=j6NtmUtFH;`mN&
zrlWLsDuIG~DakSrP>K;e@w||iOyid{H6*0gSx=f*b2wj5Ky_gisUdzaIx&NaY>r&0
ze@kSzSF8bq(sYLt#-C`g(-9Ui%Fy@U;H>0%eY(ooK{8uvf#~!uL+Q_<5Hp+q;vqhj
z<;i@iHp+_3Loqo4zdpBK^SN>CtoDLBVH+4-26}(4741w;Vhs$_2F;sQsp{n_u#VIJ
ztvrsX{2H)5g{2<()<~KCtbaZvA?$~C6ekFGdjqBAm*f*S_U%}Q^XE)=R^k9xJD*Ur
z7)Fl$pU2&!B}J_Q-8%eQ!>BbCyZc?8#rx6sdW;Y{#dKR14SnVYpzgzcd?aTcd<xhO
zf7U3#PnauNl6h!{Z7(`S+W+1u;JFBpI-dT8VJmv@JvyJjv*tL60H}p>b`k5^eGESw
zIYS2qZ$>oM8*|3h)VMkOXa(?2K>C<XEkJG$LoYq3F7v6TBlCe?*?e}rEf!DA%l?w$
z+;q<s@4`poZKezx0d6;aFoFH~4RfVK|1ByA4Tw|H284o-{#nqNUVa0*#$gaG!#EQ(
zXwtl>ZONO5+#1VK408EWJ?r(2$biGR&LUNZS|CEPz3L)&<aRI%nqALE;pZ6Ejpy|l
z`9!R1YVF%UE*`Sv>WW30SSwQpY8;l88klJYV5$>u_bk5EY&)Fozbn{_=?KcJWP>Ig
znOHQ{l}#QW$1~5lr9csf2Wf>pgV7PAR61_dz9zP1;ly~W_QT8uHJ36}rYhXb&l=~&
zRaCbUohzBv2N=*Cj!Tbsm^Lr;fybAO5ha~owE^0qX9dap>iWkgL6c|F^udB3iWW9t
zQxK3C!hKE<fN1UXC%DZjM11EtQzJh`IEIlu1pK;mMx$0wmbkg5mCZckQs8LuINQUp
zzs*7h9lboX-Iwa<L-!bUM|O}sw8KUC6~Y+crWQ>Lu_Ar0AT{nmOn0UDo+iQB)PI1c
zh9q0%u8T5d_F{}YNZXk93S26*gY)tz%<9xSKC5Fi5t{ZZ?v*A=e)*j^J`})#`rnfM
z0ctDi;ic{^vyMHaNix8^P(ugEL%A)ntcWm|N*C!zL~zhTR(U3pJXI&fU%J7om`T-<
zQo!T~2M7o#vD*XG$cF@3r!=>Ot{ZnAs($@0uZz||Wf>B0fl9Gnp-b?&?NQN8f)D@E
zDrwg?(Y;z)4p1wkO9-f4h|vDlprlF@3?$|$c(57V$Qi(LDY-a%8(s(5TflrNsA%a(
zf*L3U5a#}w!B+WS{$|MlSI(1WZH5+KkfR>}is^vWQ?)3FvR8+)q{f_j60<uVT%C_v
ziU~0j%{rFkvmg?`RUMHfoezM^4)FJ;)+@DPE0nhGx8HS_HJTl6zpw`@pNiX^{02*t
zprYK{uCC*UxG)5NEHgKKCnl|%y)?6>sLy5VNDwLWxMTw`T@=`C3Q0<vW}BR~eQs^7
zK09r(HjRkAxuG-aE26Ldua2KdBUZaYrvRJ>0BU66IzaxlK79pLh!+W@k5ZR8w#|Qe
zlo7o&vST{DMy9K?Hk%CdhkFUWHG}TL&_2Hic8Y*BvR-2$`0w$Cj4|tNdN`*{qx3k9
zqOidq6_NXc5JxER>E2lri<8iR`z#;LWkkkXg5|WWvM{2qGB2dT5DeQO%z;r+NS~6Y
zAeVBqn)^9lrUOMj{-d(6x)^csc@q`W@0-(n<&HZ@M5<H~^ZfmNc4()LM~3*>7RRJA
z@4Zmhv_f;03*Ty(UuPoo+Jq(4Z0!6pYoUgN0TpVWcAX|eVHS^Mnps|aZ+F)Hzb|AX
zW(7zceMJB{0kU$6r2l@qgE2)`P}88xITceuZ@yYSOrwlVYYr<gl7&}un!<0minbiu
zF3eeh%j}@$N>MM=O3%{14g`z=q~2MB(q4cOB5u&sUV|*?Fa$eI3%U^=iXFSz!|skv
zLIxVhx4Q)vXQi#2$9Q2<MhoXoc2@tSdcCa92e82VCFZO@RvnTUn$GmdVAIZ7K&~GQ
zz8jW*=VtB$@5^5{VqYN=54*zd2<1C;B=0>b0vWDasMpv7Cab1uIL;KJwy9YlbtAfI
zXxk1$2v*q6;D*ZqlMt4N=Gw^LJ~2uBZbwV4(i}Y=xCm~?FYpzH8_nRlsgj)218gyy
zM`Uq0>7`UYbm^j_YV2CHlM`)HX#>@fx;C4>#7pNN$D}Ywa1`sl3D$gS@CnD#D5KeN
z$MKc8ctBp-xk4g8-Di8US{mWv<5hN{BiL$h(|JnxXS}OH6K51e7*Y_f;~trPa**jQ
z!7Nt0tc(rMRC^t7|IlfZCmFc=eq&*rmfgGxufGUt5}-Hw1e-lQD3<b}4}=bm_qbsC
zu;tLKP(*JxOQ`Mg)w<-1lQY(lOFICp@4;fUZKytQsy4x$yk4#>#|0k5IPQi@3p3FZ
zDdBHv0YhdCRN1L`K)|SXVV|T;f&BpFo8)5!O7+-K5gTfR+9Prd!)v0)CP(Ssw&*q4
zG4C>Z8#T~lg_3U==P=8Cr#QY9CSH;CD{eLkoVx4HK6<l0ZvXp$j`ub0y7h?=+T{8n
zHC>Q&JX-VURM_$a4eq(nR#>5!Pg9L<WdaZM&075F#`a=q39;|OXaguFjYCI74Fix1
zkM`nMVO05MBUiv{98nwBvPkRf_}+pYLn$$*CpoPYO4+^N+&I_Py-#L9^py=TJbU^Z
zW_a+t*Imo)sX>mT0<q`0*<(vCq~E@TXM%mTzJL$Bz9hZko*GeFVH2KxlY)4_`?pES
znmM{x)t2LVxaxyqJ%36kj(2g^+RUeP7}iEmyGEEv0GrK@N?G|Zp0Jh2uKXf~e9=Dy
z+qJq>!)(GSi~v-tzJG6_g5~9ZnJB>Q#ikVoXWIFalk&7bIv%7jHc<^cmvl~Bc9E(<
zBtuv^p9GPBj#;TFsy^5ttKYM%(Cq-kV59mTg1cd3(^bN~gP-8-i9F>j#mNBnm-dn0
zhrp(y!QjAx5w5UB-aL{mYux)WTJPgh0e&uzyDYEnSG$b)K^1>hp!+S!7289BcNmK1
z<G;$2t?E#!m>G}<u2L|G8>sr5=}nUq4Qk899LV{OiTCdwcq1C}jqko03H7bnUhy`v
zW{LZSgl4?F+V1>wmb7sehvCKWVc?UjtXD^4|7TZjznT1zBXu)BB!X?E*~L*gzM)=s
z9Oip&iMiQ`)q$j^>l(Pu!&-xz=lY$G7NKrZsF#|fL4ZA(T!MHK98&*!QeU7yhSGz5
zXD(lur!4qSLx1Z`E6*Vnv8LrysRZmQ4)#;q#IYLY3fmAUb+TZqEzDCpDyu9Xn=Md`
z=z;eNufBeeSz;_V(_3NYB+uUwKD?jHv2WV3j<`PpS!3-5CaVZ<W<neT>HR5|+HnEj
z%vkf}*VSTG+4?#9vg*xTS3kRgi~kPdfMwP|(-8mw0{{T}20DKgUkNbD{MYUW7wCG3
zjW8e?I1=B_28Iy{VTj<DxwlqAA8E(5B~3n}Uisx7Q*xMWGi4Y3uFYYmjW14AU<@Za
z!4nOzv4|(|8BWFkDKHUVspWHJDWRWhV~*SQ0&%=oYHg;Yq%igkOGX6@Oqi4K9YZ;b
z^pZNlPhNpQfiYNLV|Y07$zjNazqrsRu%Z4MPnVGJ%Kb3)?1L_~59T7b0$H!{2Z>~&
zKaonOywZv$nR^yaKHQWrNh%@wp(mFUm99G8{2E^b&y8kn2#X~&Ll{J5@(Vt#raL}^
zEu}a9Ifx@2Yxm0*g}$BLMf@HL<M$bp0*REi5WfH4^ke1_&r+HGV+P4*-jU^;!fkNh
z7hiMSA%DKv=c>W|H7vr#Nyso1kA~mWPEB<HFl#(TA=x56mNf)BvI>?pegq(as<WNk
z@+6}c5Jp~#Y#qavF5cUs&<+y<lv+<%FhacdJ-m&{ndWUN4Xcnx>x05%YjNa@o;to?
z&5xRwF^63db<6sE9-WyR4S^q#@0xHcx*{EbYP(8uZM$D$Yil|KdDDME+@@u*F5qwx
zvyP1Lp<8P$PW(ff_7l_fI^pO1dgyeb`6nbpP{!lspvDUOE7n>gn^buTEz}r?*=2-!
zn<pQ_{rf%Y#|DPyeMAw5Y?K~0%&3#p&Vq)PeVjMi{&xnPH^u-#rX~My{~_D(EdhS@
z^H|r@Y%hRHJHV|B&m^E7><*=~TIWdG*LI<$9tK{*<@CKP3F$<*pDFwf4=tV>)861D
zOqpPAzWBd$IeO9RLmsF+eHUc%G^p}NlY9?s<)U+_iFc^@k-y3|2FjhP8A8x4|HehK
z=pnwkj6{e)z);^0s5-&AOB&kHNUUa+Gj%z0z8$IexvsOdviX#4=v{VDn{(IwdfsT8
z0@kJ9m6`F|F$E)8=!gugiYVl#<=8^;GwBsncZ;cnK&@C^_M$1@D0>@F?M-wG;k|a2
z^&jEeltch>;YE%mVqu9Uf|U(o*XXzLM!U_-AYkBsoxQlJx|#U|hz{~98Q2-n8$nxS
zP^GjpUqTn&oN}~D9a!S6tM|M%3YJ3}>s@DFQSP(y#9a2d|E@;tS4|i=6!S|O1N560
z;Dray+;#Zg`SkiyOmh~2I6#5)5$55Ksq0>ft5B^Fm_hAq(=?7qB-e;8J_U7MoeBJ9
z)F*>GriWjWDI;_5$dS3be6Ql#4~u#^_eH?t=n(sy^Oh}^b;hz5KwCFXW`X0n9sOFB
z8L8mbO)Y`0Xm(7xySK~$<V;oiS_=stOLM8;&sZLzgT&`anx?bxlR=Rc0K8(R<^Sxb
z!%xh9_SEG?@S0U?>H7LTXZet@>$aM_9|DF1(+rv}Re0{-7>-{^1+~I9uZRb7+%plA
zOA!L~)%(-r^v(1QpXSK{&Nhdq#?G`7L0|uu<eB;Kv2sNcN=IrMlra3DZOQ8x+F1dY
zou7L`CC=<%lDY*&8V<R3eZkN2W8YAKi~&zTh}0tya}_NR&q<F4c1#fp@-@CA0;|Lx
zlQcBi(GXNbUzb8?#Apa_F3|?^u2l|k7vTFv=4mQ=G`Bi$rCVsSQoY&YcC}7=7qr3r
z_dR9Ij?C2k9jb$mAg-vsq+i}w#&x<8kxVGc!rEXkav;|*KP}+ggG`Vx8b^HGFMB$M
z1D;Q|X|2)%+e!lvA{$f{3ioqNy2{qx%vZjL@}od>_^i3>y(4B7(_iKyD+Qf@k@Vq;
zAgzt$v1=f6RPf8ovbv2^-<O0sL{A{W?JTg}e<<Q_Zt|^R3sTsCL!0RBk}~?_w1HIl
zT&e`O3gsc3;oKhC%0O$Vzpc=n{GoErxPCt2Dl4+}a8A5XvG~X^>N`5{)o@9X_4bd1
zLqaCFpX;*bwd$?Ohc}P#9tng{&tzdGx(CFUw@f7|QsK$a5^)US-fn<R5hjb!t;w6S
zHbTp!{5Pc84kGimd#Y$O@CWne?GqUgOn4>D`yPPWe#SETl<);my;NG2ktGU$L9HwU
z3px0Z2QBOdx|jHaOm%in_h?Y}GKNnBbDvQ==)=3Gqpnk%KMJG_-$e@i;rW?+WEhiw
zffZT-!WB@PpZNsh?nb+pZy!)8xA*eORxr=lORVgJPoqybYU0tuoSl>GclYfBve7sw
z#(Kn;;mFC*$qi9~LTO-jy}84+4yaO{47mJf^+047q({4{tu^RpKvIS^J-bzVVBRdA
zEimFc*sAyq4BFv`N!xq##Iu|f_z_}N!DH=H>*95K*5B@h?AUhYeIeq01M7Bq!!c2;
z?C4cwuL9$FoUwK2&@cLr|M7EpYwA06MHlROf{t12W}olNmzQ9o=BR$YsgR;10Z){E
z^SFNRw4T`<`SALv!7LIRe68JxgMCQO>AJQF=_l@U{b+loyZL?77<F={d<)$1omJRp
zHh8N~pX~z11-*d`PN%yqq4A9wwWn)x_31|$don$?om$G1MfE!M7@yNAQlM(rOXE=E
zW_#rtNFq|4))w=KWk1a*4UoU`d+A2Mumdd#BN4P(;s>W)4r4JEA;{cgx^g8R3(uQW
zd_f+o#33WXf>)FDC%^AeR&-z=Eo?4gGw5h`yREEZQhFJ!9jonB#5Z;Qo+m0}WundO
zp?zFjda&S`ZpRYal!^!R<yd5UjtV9S{qPnEYXch0PPZSFlDfo^xwYNSQ*8+;DnO8X
zW=xQ<gm5nwB0dN!@ir5?e)*xc3Je4ut)EEddZGSgV{R3^?*L5?-9UXqUe;?aJ1B@I
z4Z@2UD^6dwh1Ze+@SY+iHaS0F!bEO2k0?Ii@LUmn^f#2v<LHEOG6eL^5T02;Sb&o$
zpv;;wuqS&6)~Tq?|1<4sPz)c!^6XRlhEwOiT2!6)Bt{*g?swyoTME3a+Sri6Mxb1s
zU)zX@br5D*Xd_wfJCf`)>AaoGTv`AA4Mub|CHdEoIR0G}#{1i;O=s@t=lv@OO8YoB
zkj;faq${l5W^ndh&JJ;_B^Zu!iZU%z>*8`yPV~*A`%G%Hv$H7IhQe941~7w~ht~-z
znF=C66!}N*JBRMCC&kiqQ8|ODl%cSLoidgx476vs2g3^#9dthRS1d8KU>8H63|8ws
z-tSB}U_DjG^-Ou&M4v|^Q8XTF)gRjNarw-<Jk0@x_rUf$d`8W*rFJYstUIz1qmYov
zrSfz7$BqJgWiic>*(4V6?8pjX&af^Fy%x2A_j~Cb)5TDCnR_0Mk8L|LdQ#f<y@d*5
zIT0MLQt|aJiXLH-{$+jc?ZSVCuJd%Nsr55N^g>t{eKubYYra^bB=7KMfhT4rQdIcw
z(6H0TFNYGnf8EkK2_kWO@nS6HCPrZGi^(+X%zefeou&|z@*5$&;|l2+|Epvbj+(=@
z!kX##7{S2w19o|`GCYoNR=+0J&j=5Sr7#t8jZYR~Rx?xZz+t512?Z1$EJ1DK5fKr<
z81<31Cc0hSQDwp6!#QJdo{K^ie9^3JrTB;8%}zabnGhyUT!6^5FrJvH<R*j3nckyQ
zi`9S`u6C#{aH{iqBtJN0zh1SbdFjUSx~X$Vut9MlE72q^F`EbRU_e{+!jE#-t5035
zwB$KLEyT98D}f?}rDjLNoG{9(@#?jVyowmR<T@|qI`fCMdNHZ*mOd#T%{4gStmBi)
z=CMUCO)=?H0Z)v;dc3t{nZP!Fama3ge)R^(CP>ALn%8p-7Wvx)7f8E&{4#o;*}{YF
za1cM2-;ty6C`tf+qu8L)`X{2a3G5KG8-j4&n;!7{dx*0PTCWYM8zTt<Id-;~-mk~?
ze^*P3SL**?JW`gF!M3h{&G_gs@_Bh<jl-y)bGVY3vGJlzcQx;FvlHXT5!H1$y?2r%
z@!I>YUiUz*7L<=6kILVr_CfkQOV!aOI9C$6>jBrl*tmg-7Eoyil*nua@8BA%7{wWI
zo$or=u5gp$zhGwT{_`-ybmdte4pKpI>>1It+8mC$!0Lh#j<67#vGW|1-Dok4HaprK
zckh8nnu^{V&m6b=HjIn58mEwe-zDR+iA%b;#fQ#Js$a`okOLMsR^qWYSCkF7X3FN_
zWPB-tyh*NN;5x52+=f7N4s28sQ{K>W&2n$NdEG)_=eF2PYGqN9TOk!sP-ob88D4&-
z*u;jZgzB6RG}d2?zjU<=88(Djj0?|;mrJ9i7p(-&Z2_MxfHZac<DdaCw|z$X3nq{n
ztGI}L<uYhHERmYnWc-tvo*9t{<99)d6{+&l_=mUxUBAkNaIY;R?m*}+IeT5O@|T>s
zfJus&9c9#TqP>vJh_xC+j-zJnbO|%+#(TN&ng1t+&WVMU{9~CsY6XNoiwq3W@{w8p
zoGx$M1=U&|*%?Qu8AEx8z?Oi)A|`^V4boy3`Ko3%m+EHGJ9U*xOt2QY;&ISPOJC%b
z1YpNkw+2|jgS&v`Br22F7me$4Suj&gx;uqDVQ6l`lhsR^L{@u~_eVE6Gs8fG06dVe
zr5P4lIMoLKInzGWlf$mb{L5r_FncqRP1GEX)$%H_2xH8Tqq|hj*8WQcPY2&GqN97F
zOu(N;+eEMW2fFC_w<EHoxT?bkIh!ww|7Ji0DD7R!_M?}t_sQTa6g7$#k>BG`&9FXv
zSM7$WcXjbQZ=uWcO*${Xs#Fgs_~I8!!Z?8XX(kkO%ymP9>I=B#VhT1-23#~YC@MH6
zTd~Bp<syOkW1}*0egjZTOmQfr#jj4@efR5$tEVySqFb7XYcK<RV`>E+YI_G^kj6G|
zC_zNHq%h9Yuf<Mdf^<)?57XG^JqPyYrY6AUvgR>`lOOm*A*FrCKy_F`FZH1bl~5nK
zj#c9Q$o70KD);l-e}j{9fm2m=9l>_1)Z5yIblCu6M?PrG9FCGsF@l!4+CRDhm;soI
z?SZKE*&iXZKGtF__d%xsKj+{zCi#CU9fK?SEFv13QQ6&7koUIYGukQ5|NrVjYoEWL
z>jXCq7oLNu89(;?txxsH*{FEK9UP4<$Su4#ZB?9l4Eqq%Hg<}wo0KnMPzY!>jC%#D
zLJmE%m~0*#dSVE;4U*)!xzN-&^ciCXieAXWewe>p`<J<;(vb2VM?0ijAi@aeSYCqZ
z^+^LA62FLQ^0vb(?+IR%z{C;<0SoSlh7%*yT$QcF%{duhUqnR=IRAoI?fq8J`d`9-
z<C<dmsL0VT)1y=^fIke5vI;*8p=ukMY>G`(JYdC`O;Ez^Y^B_5Hs2*nk6QX0`qe2X
z3=7ja{QXFn*R+i(-ltf{IDR(jsrXvIthA#Ar7VM&j)zR!w2#sBLCy#bm#sBJ&E($#
z=XhmacN01DD5yXLNd0#?ygeu%db>>pgC-W(0crou12T}>J8X=MkO7o8N^R~ajsJ(r
zD^W$HIjk2U3|?vSVja>mYa!F|i?>rqY+Cqf&cE>O7ZEojI5hJjUZbY~SG@%)`F_^8
z67+$2P$}cA@gtl)f5zP7z$P`z*9N#cRnLw1AP$}_sZ6tDD)*W6C%BNc9)Y4_;UObG
zG1Mk63*t}p$<XcdV|PiC&#C)qRp1!v0)E+mjfY6e6c_o~;bH~Am=O+3?5-l5j+&_1
z5Ft5~_EET1PhcR(%Ad#43%f=LfGw?hm;xrUQ6;7NsB?8%U;ck)e@j~&$AjfBIrFh9
z1C+eq$q;T%hfk!N=>xa_`dDd2MA!VqN>(>P_dFHop#PsFXy7m!ZLJpp-#DkUwL>gN
z0sx0zPJ^b#H+Ej6)gI<7lh6XIO10=lXgM5y;Bo`s4Na_UNuOe$fvB815<@QuTF+Um
zo{Rjt=Y+PEWl2NEV2hr5Ta;~}O+76j$Uk^=3FG1}#n`h-zZ}+t&0!K?Ba-(#!os@e
zta_Nzvnk-E!CX%2hAr2UWE?TwQqyizggbNt^`ZTp$dV6C&z8R^sfhB3?5o*PfOU}L
zWAd4O$Ge~b=yY?dj|aW972Q6EWsA2ZXnR`aL3rj1Xa`VJICMAex5|C$4NWGUW{XhN
zN_dOjszK`}JUV937ff>>-;7)jP(d5f0NK%y(bU5hfJ`U(JJ-s+XBYL=oKlv0>wXfO
zM%Oi0r4=ptIA~EWC^By!*B1~j`ft{)xThB!dcDoFn+IF9;~d7mTg-yNd*}LNs39#1
zC~bs&&ojzs<KN0gvty^Cyx8PeEIvjKp{Rkr`@gcsrU@U!hPy4MKJV8%I#p+RnE5Kf
zln`scl%w5`U;L!Zxs?9^AvX=tzD<<C4T(XmLHt_B8&?5akcHY!G@NDhSf=CAon)}(
zJ%GG$_=Fi=C~Q&`0Y)34c!DL{-WnUC&}CT1p@umYiz8XoyqkegbI#TkCr*n__k%qe
zG=w(Y@7<?Rv*BcL$dLYm0Kz&y^(M-CgYlQ^E?h%s*YX<`=B0%oS$lPtTnlMW@vgC2
z(hdFy^6CdWfK5vv&vqH!<_jxkYmF8|kqO<VzxkO5Jx>e2PyJ5CHNV;*Td3OK&`&zy
zB64dfx>h}Pg_+SZAz!j%9K-IYN-Oxsfzy3&K3>Z0ERr2+I?lFauBD>D3fAR6pI<>c
zcbDg1Dq|#^$!B7b)Av=<Q^J8LsVko@uiw=-g;!FlzTZQkXFi@Ra(U_FgdnYP`zDwR
z`yPF0`vwqFu&(YFyI@Q%v7qQm{A*Y>v3}pRpornoT5VSDa8`{mF+PwBQ4naVC*(Ai
z##->7*aI4BS_9zPXHv2_aQL2hZ7ZcsLrc;Q8<cWcWJVaYNQi*?!C7%?g^HSH^P=#?
zjWo1DwO^ldsVwQn1dFNBA<bNdBepA^=v|abVMD-A|GB+52)cI3q7^%?<)faa3W%ET
zwRzr9%U}L*>sg3QhW?}zPY0XNq&nH$&s{au+^c0`S>-olq=^wvksXbki7(oGc;TG<
zxV0j`S^Ir=ywz*ws-z8(F%U5D(Ej~^v29JmkY0~}S|2AdcT#_7EkigM8EswqV+8gX
z6a{vwoSrKB-5wYSwC0C3AM2<?H@;m@>F1!q)6#yeneu`uL>|(V2yL>rCc3Us96}|Q
zhfWS8Mn9nvM)%lW7L5=mRXug6k^V3De{gq3PyKExquVb*zEqbLC5+X8sEyeTTi<mr
z^yH{-9<lANAkQvB<X44neuFM48}o?99O2kw@?}-jX)`dqf#`Mnc%%ZXWFDftRMDih
zz{CMPU24%_e~SWJS$vy<7rwSVZ2|k*^&>LKEdMCU96<7kK8#N#);%}jr+%iu)%EwS
zWc7j0c-YSVhrm(5uzj6vOsi)r{-MQS@4`(RmUw@f0kX=9@A<9x2>*&%lvtrRgg9SD
zQjmFWz#C#eZD4@S8vKnaUS4cwC#b%i1N%6Y#g&GfSRn5#fx293yn!=n&Q9$>J733#
z4=x~}1<%>)JRze-aNCLVcfa4907kWovoH@<{XsWOk2iQABaX+oFxoosU!wC8DrlP0
zzK^$ATgq_C7~uFwOvS=VV}rT1-SM`z-N@*T*;QNs?*e@VUgpqQvDC0`zs<FT{fCPa
z={lY1w!CdIB-YR~>NG17>M|;bb`)h`mL)>FouM*SdnH2<)heGn#t23ZlVx9uYk~)u
zcUFG>UpMTfDr9hK@@A9ETb0UBi>*R9n=W5<XYw2vEL?w4+VTY;oteF#P|(Yxm54l@
zq7%jC=gP(fzGgH#C@=3V(ztWC_z<rv^o9iR2z@WAKyoL(;&7=0_V@Tz7RVe71s>Wj
zKj*(BJKJN=y(ij_y7E=j@`d4#=Cuoe$N+M-Uy4fST+RGhic+~kXtB?skxX=*0euGK
zBWU^5s!*>4xx8<zHW*#y&MYiJJqvMU0`9f56WmCinzu#hTU96P5~{u~H|?&8w2h8U
zyjBA{qA8`uVl8zK$FfI@s6htx88r+re82LLpzp#jSG9=<-L*;rv@@(>=fr2eP>*=7
zp6|=PI++@`yvZB>D9$B+`NP!4!M|Qr6>g9#0(ipJf90Iz<#(-(Gnt*xYdNPfBB7>)
zg7w^UtHs3$iJ)SiA~(2&IC^lyYCA;+7kA_D6>k{@C%%SwM1nh+wi#VVt_HnH6lO!$
zwTRJV3u*!?14&}Fz)J%hGI|d0P#)CGX9HsZM;W9_$DVTM(21qEm%p&B-aTO5=F<Kw
z;ol+K;As0aV$|yclNdo@P@~)1euW7~wsxd~Ep5|{%7Qn{DdG-ZSBe%M^qmf`f<>^;
z>|r`U5YkCt>2M3ecBx*Hi9x?V@NcKBLYUhK?oK+&rgE9nn^P+05-__JE*~3I6Ebe%
z?vPb`IzoA_Y3z|1BiAo=COK7suP4*QgykbZGyMt9dv)#dk`fP4Ml!uZ6{QrQRQvEO
zA%x1)t{aC$L{l6cXad2m!SqeV?iVQo)i|4UjPDADL0gk7?R&fPK+G3KprPmOstrI1
zR9F=`9@T3D_w@4KwR)#=Wq1qS<PbHIh@mzA^Pyys@oSmos1*5ocDI{}@ixm$&ZMtV
zxh}@Rj_$)822#)(tQT_d$Ge>bxR!T3?dc5DgT6@dJk#ZuvKm&+0{h;LuH+<gbqNl}
zDE~I%?2i!(o-V3X7nK={`?NrJ6{<CuW)6htvDP2zDav8>SuDRjR{<^g&a11l<}k0)
zFZ521E^`CQfty5$*q-I0zQ_w&PP0GP!KioV#mxD<UMtx&Q||Qaq&rc7^S8Z)l?^Tb
zZe)@t^0FShrXEL%9Z20CG3-v4krG%k&8?E`ZxkI6`@?Pyg*2rVoqH8=WA^5hZzM}!
z%Q2yrL;wFNUp`)rsru^FV_%}i^#j(l5!F<TOENq%0#TI0;jJyt^3FQ!iI4>sD?3C%
zVn3ef16R|Pv$BkDF9@5qjf5<~7@M?F5IkC|akvbz(HdBXEb>OLna2s?3a~5w3ytZU
zc<v1_Y~3?5Qk`}sp%v}mrjheSYxb~1lLd;gt$`~`J;jy+ybtz~Dp~X+9}DNmsaPgw
zyXk_IyL->4bW-k!8PzQXD)_tS#3s-<4A<!#zb1dL&ljL9l#(1uxh&35CVOI2+ju3t
zQKqTi9m>HoyocwtM9=ho#V^vV=+l1eC+QJIiUD?`B&C4;LUc-F{bx^BSzU@l_&or>
zh#7AQI}W;MgOH|!UG#|c&uW6x3n;}7J-V>jl5EGi{=+P;qpFdKwK%$&46|1-^Y!XB
zf#no*A1h%i_=(noqQw;4Ro~^Q)|ReKM0@UdQj8Fz>|)6L?YPAz(4*EAZMKrxhYkzn
ztr7P48iX0d+3o<=Es1nYstI`P(QFBl15z%@EAlUr2|y}XEjvNPKkS8bxZ+Z0$P|cq
zyq!vRM2CA)MMK*#OG5^6hb@AXK}WgUi);mB8afcp1h8H+a~RD+OlG}=?!700Syz)|
z=6mn?P=de=f>4SszLO}DMVRsQ@BGZI#lDV%mWt!eOQxXC<O+Wckn$|jv`b=5P5*Gh
z(+QYJ)D4^#)^w9wWoBx;y?TYy+FBbbQxuxfUNwVZ=i*C|4q9rWfPghF5frKYp<X+i
zz(g~O-Tv7fvfnS3a87D`Aas5x$2HNAaDfA(h6L}}xdbG{1C9<h;z$SXW#AbGPc%!X
zN#P;BUS@R!5gQ70h1jl~td-3)o6Zp-oms^}+MU#K9HiSLnV%*7Yv5er&FXeL%Wd7~
z_z5hVD1?zYfyaJCiHGZ3lDPI`S2Mu9m%8lmG((I=X>#`jSMV0@x7Od(sy-xNL(xFE
ztGlEKbcWmN()S=Vs*inzgUbvYG~uxw0&`oCmY)5Ty9+*7M;=}5I&&?$G~xre#ztgH
z{ewEGkj-DVh}1sxO>=R;3BEV6Yu5*5aAJbe<phCXSe;ozytGz5QOQDEM`I&ATMzpQ
z0nNI{2?6y0NeP)811qI`%a8&xQii!ZO(zxfoZbFtuSoF@0v<(ZB?0j~&X_n9LL{~J
z;8%<Eqeg&WLE7-PN8TNS>pZ_Y2KNavn4|a4=mc53x$<02S~FGxmp`0)w^l&9;9(8)
zD;1%mb6!05`V)7r<4;S@j0}37hlP&p8+p70);~o8(fHkZQQ>xc*h&1_owI)83dsJh
z`>JGxL4yJ~k`O_JI9$6OjKbm(5z8qV^`Ng=q=wo%&O`m+$N%!f!599>C_IL9PMN>K
znyNaC7f3O73@E&Bo6>RK{!x2AT04l6nF^056W57T6LV6-oPLiYLh!gW?1A~AZx3V_
zGC%2v0Rg0Hw#&l%g&+U_+k8xEX^C|^pOEVIp0daAfp4b0#mQ_K5(rP?I1DPed!HHh
z{t#Oaia?5xkCX2%xOt#^&idNFWdG(r*U@%Qdt*W;9Al0TT532$#DngBr!Ac)=(;E&
zkAXa>*pA1}Pl@CT1-E5z7+%WafP|zTRwnc(oiu!AjE(8W044rsqM~{1OD}c>Uss9T
z7h0m$S|4I-p&z?=%@`|zyqtsG^6*t=_quX;vbe0mU4vnQJArs4m{*+oX>ym=;I(1?
zXIwe@E!Zllc5^T5Emlr07$DX|#cAwEK00ZKn>2fx7#%BDc6wYnqkvmq${=}{jCV#a
zx5kD|ql5L&Ec%h!31BET9b^#0C-D5pNt*JxwBf#}(#j74haDW&rDRSwQ$Ew-T~z7#
z+YMGdg;BRAem*e0wp^?^$#tp<JxL<Ep~=7t_gL}20B-R54hE!Q+NbEPRFEF#2etue
z7^|ABUS8EEkg0RK2pM3KdvIWzsiQCri2kCHRhix*TZO1eN}4(H+c=L@uPMJA0-}d%
zlfQ0{-==|<!c*2+@z$~T40H_o9pgI!>8Wv-nJ*+qce<Ax9<8~~Fpi1A4d}K981{Id
zHxSy+_gk3>u&8uTBPII|cDkmQzk!?<3{d@iwK34lx)P$gSR-P}dcx$q9M?(n#oQT!
zDwfmuO)a|v?b$xzAtGE|i^4C_X){cUMRFA{GmZ89iC^WCQc0_mHt7l*@zedVoAbSq
zvS7FLndaOTD9z3;uq@XbBlk=^5DvN@VhLbF0Liqq+hyFQ@qt?xfo~G6QttW!Jdu~J
zw$>@)Kku^8AerGVM;Ou--Hb?PL_P<$JA|2YXG6169|Q5F`VZ9rz9!IG3_0(L>+eTq
zUa@RZTx!vcPp+#UQK~TU{<^NNZ($qRdhD&XTj&uArEUuJHa)V}bo`>rxaw=o{+n9k
zeh)S|*y@E!u*GUQ0Yt4Ej?uL@H-9X@i=+bU=64WK6xKMY&Hm_s+!4@X9t<5SB_%oq
zZ{1ytO@7=nVlA@VD;@>28I6(AjOvs2u7>e7&vFR!7uY5FPATZPj7b!=PH49|GHVM~
z-@PRb!9vRDkP+TurXZ^~-k}h;w#Sy)qvR?8d3^dU)6Rr;fYG=>ejS7C`(J=uxD{)_
zARZ%4d)QGZc(lRcs9C|||9Z`f!>m1mz>wWBy(aumUk>Lpgc+;cz1MHtT<P5$A9Z8s
z1`h5ipF7q494o@g*L;5MSZ~J$aX<Vjv|QuJ1wL0JJ3LvbDV=AD+HVpoJl%eW6)Tki
ziGr`-D(>z}#cGC9zyI-hEsBK+W0#`JglH-|S`jiY9-mGc%dg6VYUx_-_N|4&cp`6$
zbLL?k&LhO~5E{~EO*LrVcz3nQJ5U4O8qZ6p5!(0jxR!v*)r81mt4;0bS-;>31X(FC
znraWfv17d1(Gt}_LtZYe+)9prn_?D(t>DJ1NQ89<K%_R##XFRYk!(sIzq5#*4^bAW
zw)m*{|GZ3Il>ah6_<#`bgt({0SRmWTzy?Ug1vFB5SB(njCq1)O?48^r2q?v{B8J&)
zJjINWaXh|i$7N8fAg%0RWy1dDv;O9&%wLRsuytZdM*1ScflS)6LUk*+*PI>JJdsio
z{d-eHqVJ^g;JTFqE&=iIf_I8Y7Dwk139?hNt#T?3qIOQr|JIC&egt623(TSa(m)|{
zv(ve?KMH7t>tUZ%a}$^CymN4$p^VMUIMLnhK5J7*4tMxOI|381iLG{RTiE>48kamZ
z8s2_5&?_W{n=rtHeyMnsXI|0TXxhO3XU1r=fj?iJK)%U&YHbB6y*_*=g1|4%QsG^Q
z&<2`Q(;vKqs+w;w3o?Ti@9<G)vDUwzE^5Oo&JnZS*136>lJBbPy|^=}Vr^0uC9P;8
z79dfE316X~4KW|y)k&nFBmw~ul~X@tJ69|=38bw>9u1Jc5@;mHKV3@kKu(0(=aUWZ
z*nt8UBbIaH+`SKsDy}#@ir-#>E#{xyAeTyok|_9)#xct?=<r1iTa~c61`a{?>c{qc
z4AcwXIk?Ui+4#>TM3;u(_7DAG;Z<OV_IkpEd~72tL5tv}Nv@Sm8o2$n={%5MNb75l
zYBnK7Koi4q*;5WA9{k8Smneqy<!$xUC>@s9-FAoNX!`~0%as))%_bAC{IpzV{2bzw
zR)RxkE2kEo0t)Zx%K8O^W*t!+7~5K?oi9-F9bq`&+sE&e#qf+W7%D5t(3doo@fWg8
zAq#qV-=)&-deJo}WjX?Y@r3BJ|B>T-65upI6L$!a+qQ`bRt7jbp>TiKkHS8sAopET
z{fp2^uW_!qDGRrtYryyQfmaN{_V54}aD$K;Vl}Bpa8oS4TL~Y2nK39F1$jx{vq27=
zUEvd<Ht;scO}<XQHAe65Z)jgs(bcza<}YC=R#@Vx-l-?eub+JJuw;S&00RI3aiQ(@
z?G-rG-6sB*O^5wkD)iRns7HkZ?vi1IVdij3ft1Tewp^{SXT{~^_~QOl&l3b%;U8Uz
z2IV(Qy*xRCNC4p<J@W{EdR-Fxql*rEozkXWpS`5bkNYHhI9`nsuw9K9VNUt^RRuX%
zQVTfXBp~>~qA9Y>ISR_#cTjd!>BmbtA-;p8Sko@O`25RBc$pvg6Hot(5g>BrEwa2v
zHQr$4XgEVo-ig6V32YkeI64x)**Cny3+a$GAg|_`2~az^d7Vtj=!2WybcZeEJDTUP
z$TyEQF}(l-?|^3`mT@sn_7dJh*rTvCVwSz66J?lXEf+63(%IRgp2Iwdzcw-3D$>)0
zHl~Ul0GLu1yX&4?hyFNXXhXcdgERH|C!D}^!2n^Mf;lEpN@ARhkHJI7NgN>kOC|e_
zTdJx%*VnmonlZdjWqPpSR*~nk$45w107XE$zdE$OQCS@`o>*hC0w}66izUtuNl`FY
z^|^H}9%QT%o)<jcUlJ%0TTg=4rDsq-4P1;0K<Bdm>H&ffXT?avNduwL<WQ1I8%ylR
z9&>t%gJGui<v9VweA+c8H^>%G>Z)sZ*?wAZqf;69@s;||9?tGQdLm3$R{4rhRo1|)
z5p~fzl*XKU;x`Yk<EW3rzWH%Vv+FhR)^4X_x<N@p=|bURs7z~`As2c%nv-zaF1`tZ
zudary#BvkSTF?mK@MU95`$&V-C4bKvl&h?kr|si4H3&eTt;-yTs15gOZ^_m%SZpB|
z58TU)K3SdwAn+2pITh_%#?8!-heq)-q2965pQWn`%3IBKc@HpW$a{R~1GnP81o&u=
zUjt~rCDPXAz_IV@sxp9BC7F|I-|6dIIkH#{y~mjjC9p>$^IL04tAyF~HUO(4#@G#+
zCKfoGTdJ&HeuAO+1Y%A_cB4A;bBKJ+2-`TW;uADIh`!#nDGxD#yxnG(J<c8?7%`Fn
z25Z7JUi#zqlhA_m^ejZ=%1?RFUIpT_H4>9=y}6DV=#>o~+e2UYgUL5k>#b6m-B;9a
zynaCPEBA88Y1K#e64P|h+xbvSW4c#UL<&J@zMd8nlJ;Gi&J>=oyboU^OP2?!Q|x?>
zgl=N&9w-0&KjtQT*`_TkO_HJKfvad4W}e-|RNKwiaeN_8N^VZ50T|ZYV8=g6Aov#g
z!(8zk>|^!6FffKjMp6<p!rH8}Lp*fOGnrmQQLY0DGP{}dS{YaO3KBmKsk5keTGZ-B
z(QFuL1G9=!{MVZn?!Yk0%QBz+Y&%Fe9VE%}A5_^Cm8EO#;{C%qXF3Q|qzCk2tSa@7
z?;v;<E;%DO<7|e~O5e9==^o@hVyulx4JB2&2G6xO&Va;%>YjO8N@gPQB0>yA*RsSj
z)S9%U>3a<f88oG5^mvnF@O#q!*q2$w_vXH0rDOoH9CMHF`k@w5MPC{N3LTIwzDeO|
zq+~1q9K_rId8>@{xp5?@_<1tK$hUCDJda@6El+*~C#lz~_6<(g`ar^Xr+F4#YynWV
z(*Kn4Wqg>jo#ULs)NH3BTrGZ``x)-8K(y1vNEq(fqu{#_pgEX-Bp^``BL6t7Qbrg6
z0Bg~z_tb&5RMRmdofLb6<W5WYWvrj7FlU`S4J<n(tjCYV#Nik_(uVid9%_55ZE1~b
z;@V*VxCgNzUdQjf%g3?g`$%@v8-nhV{qQo-j>fl@rnNZsB}uujpo|bfgsC4KQ*aBw
zXuA<WN1x@+JPZ2)eHc{wwXx|eUv1@4$_`<_QkbBt^*)u_%ag*=yc7x_>GHrZunU}S
z+u64=F+#}d;oUKh!Sm+MTyfT=PQWOWn<7(z<HSjaT^GN}JJ$l&g>vg_gYDkdUG*x`
zGumO;*A_z?1(u3mI7T0R>E=F+E=@t3y$Q3CmJJ>;F&zv<LTTX1Jz@+4GWkHpC$zO!
z=zY;^KuoM<_E-{FDG0wOh~CLG*RO0TkuD}AtLefnM*)C`w-8+Rrh}JkJ+G`{i7S(r
z_Al%3>dE8Lw@iUS%WzmM2!ToW0K~dwme?5k<d0$K(tn5WqjF!vwx;jl94D!jrBhCX
z6rG0e&pvEWFsqDH<?u(?phXBx7QRDG=aQSvw+I-{NMhcckj*Q#9PtXimAkPMb>Vmi
zg@Y5FlRn}Xcr=h1U7$>rkDrswFaGGf_l0M{N4*z4tn_VMOAQRG4?dj!`<dxu{;C*|
zZqQXR@^^+GFR5KW@hR!bvaY*fwt-C2@W9cF07T06e#39}xQQxby5YE)3l+Zz)T-!*
zPH*SIgK;1Q(wbweB(F?t?Ax}DgDaK~-STx}@|$=vFSvQKnc|2IH9MT)6V75q{fT@A
zqs*}Y`eb5NFW5=ehv0|szmo*gqj2%h+OghWe7hJKmpE}sBNtgi0<3Zxh>I)5nbLI}
zLDYni22kzIzzrOm=!5{nKSbg*ohBLjZoOqs?hX+{wG&Umsh~a@M%qzu>pv*`MC^H}
zGv{!Y_QM;cr|!`*HRB#(c%5PACPyy+CgS72Lx407A&cA9P7&~m)vJn;e{L@Aun--%
z%$0p>m$PF4&LKRFDFcQ1P#j5-v?(-Qop;4?kR~0_1TX_;@+~5AXPmB%a|@kS#K`;@
zlKyuKklv$ZV$n_3xG#5mD-98-Ue=`2=rwKQ!>3CBm=tZ@6R%KQc0vrgj|QCNPDmBk
zYXV1%eLoK4@SAZ2mhOI{jG{Yx_>K)?j4SH>tb7XmIc(Q-XdrDe4<eZ|alw`=?3BA-
zY_I!J7NdSxmMY2E=Q(*SoQ!M|5|?|I9{;fr)Du}uXcxaI?`fFNmN#s&(EX*Rsm%8d
z3`P?>2<PY2X|a(+6bKU0A*d_$v0W*@<rYY|!TJj8LQ4Qoa2FsH5JD7_uYUq#mA~R3
zj#zw*f!3CL92>>4Dhur8*O<3JXwvRUrqn<PQ&oXRarsusYF&-h8DOojvmvy^@6q2Q
z_Y~tua3$3G?8cHN*^4CkZb#(qj;L>vErA6d7hRDb<X!-NRIRq?N4P7v9qw2;6rcZj
z`>~)%CfwaLFPqTjg%}+Toh5p-IIe4S;L%eoL<W~(as3{G>WFBN{Deg+4_;5s#VM*p
zCj)%U%5)iMc1T-Vet&1zErt~m_1a+bQ7DcXBmr43Yp#6}elHFZu!Iy8UuS9ExO)=R
z=!4vwvQ<gLHy|pKRhxX;N_$a7ui*qv@C%YkZ~%(ygEDtDW#Bc_O1(Y$l$1Da2_GZO
zG$NaTa{dzv(y!ak((Sl4DNi=IOa@1qWw6F<g%Z59x$YmIgUg#uf7Sy%$y2fX2XI$#
z`0^Rd!{DLAm5t}OBv7gmQzY&_Yp3cP%5Q;sy#FLJ1k(=s>$wh8fX+n&;O<>5r(D|s
zE*1PgJG%Y{UGWP1LAF=i)et}EL3GXZ3MY@;?X`NH56H7q5KYA3fj>_vxOng#;v&ZW
zK)}28YOR*Q23CBoS$jO07z8Y=E_KLH?8=843wO}h9%bh>#J}pJZ8TQe6Jy}McBp1)
z8KWqt;7hyoUd(x?D77R4jKDKSsgH}3ahu50nbRaAug*@^g!dJGE2<~Xb(@fMf~kN0
z%gDJv`<kz&4U*tywdx6Zn_z_YgdJ0GV2pio*<U7QhlLeKJys#kDjuei%(s9mjV2-s
zYZ6#XMUO8ZcuTo@{V{J-#2+p>hiP(gx3FEixFfh?xZz;WzJ0mV3=&?UUS-pM8I$)C
zW!5V<>4plH09f#LojMq2(-wG4D%^{iG%;#OICbUc-A6s=fTT0kLAM+y;TI^v^D6v!
zpNfs7CcB}VHBH9m3mdTm%6Chkg`G%W%y4dV*B)v2Q!<G{NhWu}=@lrUxkboo3*ROJ
zXv6|z_f{^7X3|W~)-_V()NM#;$?1Yf`ydG6672pb@9SmFn`$|*DL2fFE0W3rBcbG-
zza8T4>e4#Pe8R={tfb|285p1mN^!c$o1?2OK@qI_Tc;_M$RLMID#<B%_N*eCh+vXS
z*jfifY+CIHf_zkFzrk$DeHSPXULIzr_Xx8e9F&c|s(3We<(WD^bQm490LJe<LIc}R
z=si6;u?1<*>rnQ!C#N07yb{o3GGA_eaAywLYMpFYoqx+w##xOPA^j<_2U@%50%zCw
zWTxeXC02q$Q|$$r>~iqrgGj2ZJ=eN+_v|hrWpIOp?ER5#zfEOCNZ66mp7k!0&ZWJJ
zF3~HPPrfx>tvM(CHv`V#gll|qY%$!nm{wx|W3{ya;dd*W;lIu8k^wsZ$sQPuGyZD-
z;@?kXh{B0RiGqe`5DRH>`gk9S4Q-?h6N^=~V6E0|5J5b|^Bdj>+?GL@1;`!Y0m9pj
zg18cq#(~VsR;?g?mb16$#224i!&g~Ir1|l>20ic7hQsSSvdVydeZ^OCxof9>Za1rH
z=JX;XG(tUbNgb!KuC29&*f$?<KzPyQj8FvYrvbu@d3m%^bDNdPRPBAe0QhIGWhCgo
zvcdXg8=)R@F^Pbtkf!ihTxnq{I(xGh19{U;mQd8*(pJ=I?$e}&J}9DcAo2Bbmd=C^
z-aiTj0<XiAtn0%P7c)j!8LKk1^}pH7R0`eT=L%%p+%TsKOHl&8+MkAv-V(UL(=Yhn
z`4)Bn&tmhy-Jfqdx+B{f3@RFiC7od_Y+o$<=ZpFlRA|=Dajxl<b#UPBZTXtMTHyF}
z3AVzM?{wE%TW2@0#X%$4NuCfsf;HEyTtr+P@N2RqGjrvxz;CgKP$k<8w@l3hsf^lA
zX5ikv%wBU^g7;vT+Ukrf+H#L1xBvm;(*c6xh^i~6l2spgm)rf&A>ksKmjH@MUd$5~
z3LTGip(MzOw$J=!>eD)7<~n3q)j90{q>yUT!c_(%$|O3ZR%UiarZpH(X4>a`s?P$Z
zze5wh9gD<BGsIRB185@(ZU=ydBpZlp$oSU<YDH%BRt_sxa4qerzMn=6rjLJJk>+-(
zAXC%-BThA)*9*z{!!G<vwo`*)V@H3c3J@CBR65ObcF3|xuKPE<!syoJzhOulN&cE<
z|No){iEML-dfj262`3!nm%)lY&gEBIDgPF|VWeb_$tZOGvDYKNuaP}|?gAAX*cz%I
z`J7+TA2<Gm?Y_IN>(ikQ8OAaa5wLD*VEpFQKB6GPtj$!q8aa#JNde6RfNxFFf81pu
z^g=YFR@}nPNr+GZD82U%d5J%;eIY@@r-89O{wDhQ!V_dX4lC*%uiA2c#98gEO04qK
zwZ$1%!W-vK@g@YHIvy;MQUcX#qK@A?Ug_hDBk?Pvq>btjR!}GZWwl>tDtTkX91dTv
z*$yz`dK#9z?LCP9Dm@v7u6;0@J5!=<9?miVLRR^7m|>H#)<3rR`5yKb&B?CqEe}c;
zAd8xmYTuoDU2MDc*_<W=hoygP->@qNZ-_n1_)t*dw#`=nQt7{0#j9(F6!{tQ{P7Zj
zr0BgR<Ry95{RGntsSDTH-{Y(Q3x25fn?ao_PUQBN)Lx?G9~iTzEjS+Kx^jrx6z*E}
zW9s%b*M5SbNX?$q^;2)D&(J70fSKb%K|;@K5|m*(F#p;k!_h@bw;hvykZZw@DdJyQ
zzw8?-CWPwMx1OG6{jh70fM{U<_H2C0x)2LV&j0P&6PvcH@hd=$AfpJ2c$)I@So4#D
zjWL5H8|k*2wpAisjJ^v!ATRD64Z8T_ATE8dpXo1Qo}J@3wHp%y`B96F22+Yu!7f#P
zNuq?fkE#(HyVuI!ijNgR(iYkJ*AU}**8+K$I&de;qU^dOG2BODl@X^_MZ0gkA4H99
zpr+ls+$<rKZT@yI8A$szyClON-R?1xZ+Vf>z(@+CPBA_+kWav$&OX*p8{yY56uFu)
z-<6@4sDtfmd#7zBeN|Y;{QxYi%j*^okx@)A3MYaW!Ra-ppZ9Vweh9oxYwt?Krx7yg
z`iOiuYBknKh`oy7bU^xbSy`-Yqmg~2{Q0yB2-^zau2H+LAd}DkK4i^ma0}`%7Lpb!
zCJ-wdXKfN;Imu&4YcH_+XVLLS9wP??%*OJccs;zWvX2nTM}u60ss99SuD8jWsEjvI
zM}6*Eo;Y`1g~6hKda8~YRHwAir(z+c10g?yjS-3nl;$&BOW~P6>8$@5o6XF|Fq=v#
zAYQsvR(2fbY#f^wXg&VeEvwMhMN!#(vvrhu7K2N7AIa;WNeiy(4D3?F_5VI=@X9ql
zrPZKt8$TOe4W%6@Wc<49!I9I{ZmFq_{4$tOAJj-vJk7aRk*o5r$0GkSTFEbELsu^A
zs|bEg@+{NKFNA`Pr>cA+<)@Fnf|<iSq|p5eYuM95Tm!+}L@3%QoQelT&Y}*9#U!kb
z!ATogj4Bn{j+!3Ch;13&Ff#0!P$1VFfLqO}U}*ZMZopNLsz%O?W7=A^V*#X4zd7o5
zzUl-C4SNavf$(@rfwa2;ZnbB>wgAG0jOINcY%igCpglii_Rm@<ak#BQ<hLM-eAFct
z!*~oo*BToX<0ynk2V>evPrf=Ubo{0E05>XKFOOw{!)wYwf009yvWu3_9Uk)QV6Sg)
z_6T@BObfM9*XEDjI|=nTWqGVP2p^!DU@k*7+Fn@u8sp}Q?^|Sa<6}-#Zu^iaQT#A(
zxkgnb@}b@fHcp2H_L<BXNoEfwkg79ZZmxEf2%_!tIJm?z()8V1dmc0?kwun0Y7&J%
zV#Lc!dzB<}2Ic6`^!*ISUphN^@O>~ScZszP0+=ytRrHzUE3_O-N{6_+{%u#W>#6c8
z0meE`-{`*em1~s1?j>YvWURjQg$L_*>)AMETC^&~-)JUigut-%vV}nUkNxvWXo^g^
zioK+MeYg&F5?=1eK!jtNPmG?*nui{rcw<h?IHwT+Cz1_H*HNA%k1=!GggLhX9W(O1
z)XBvxVa+ScHR0-nhj7}X>47Qull)EShW9-H-B*TbLQytTjd|NK<{J9AFfk-J!Ii;_
zBc4}WZO*HB^?f@re|GysaC;nr?QS|f<<`Mo-t@q+pknU4SIkCcv;j5knImtAVZl0Q
z%~pJzfb}XzswP;yOAe>LJ9%!)_dT#3)i&y&n=d72u<=WWeVM{ao*8ia1x7BnEu}J7
z0<D>9!VgKf_Q6gIE<lI!nKJfxD|92jZDdETUm-)IX8YEL?g5rMsIgK0ZS$@fRE0Qz
zzh(F5SY2Cvz`D^s`I<0ia@D5+^DE}kCBIG)-xLTW^NjkbJno}5#ueN$dS3YYjP809
z%|$&Uu*|(xzR3Wq`Oc7jwosQsl{YXQnOJhB_2>w2{#G2{*&&Pa^Oe7}<-2R#5HXj2
zR4@4GUUH;y`~2BOw!29A{p@)vW2zpB@a?Q*-1l@O6BKLtii<k(CEY9r<#z=N<gT6Q
zTXK1%rl%mxIcP&BiI4x!j>^Fu_K;EApu>5{W*H0SAy{h!u16qb7@u(B<NIGOUN7db
zv?OfBJXKKdgXu*7o6EKMb7WIzMv#N-%bz+X_OGg6+uu{@k_Gz*pV^hA293%44;Psz
zgA>Z||F%9pIsf)tP{4Jv3?~X_bw#ic3=z3EgdR0(dB3>XXg8S!8FR%Pk}%#ezl5Y%
z3E0vbbAnQbwwSC8jF%CSzP%k+q*8cv03)vP8IZ}O?Fd9Ilxv4xPnwl)%NZ^rIHOD4
zVQhuS(854H(1YsrJ9B$<Pw&)NZ~p0a3Uwg_d<x7azq@PAIkl!#yD=Ue^f~f)%ECNJ
z=H=x&>)(l^%6t2qzN?Lnpv}$GY4h?Apzfk&s#6`A83|B<T}6)Z*|pVQ|7>z^jWTX@
zU<YC&>z<Fo`-SKO3b#HW<Wkx-h{{o(DwEz<Q5dN6v}b?S+^SV+3HT^ydPKqkW}B+6
zXf4*$-L{zIv@|NV#vWg8WZwg7S4_^YUfK#5(gef7gCU&5ix@C5h|%Ps!gBjszs|tM
zF#!K@Ahn&XbzEEea^;W1_a$0ZdAY#vJqg15gBS{qU(0<8C&!jEdasscP+bc9?>dHx
zCT?&#XCz;gbG>7(I(f21e2?Uc{?l-h8lf`GN`l~3gg_K}IwgE^aNE)XJtt0SUgL-W
zuS=owh|UlVf8Ng?HR|AVN3|KVVjPQpjwI^bYl_BR-{?#S<9YPpn$xs~f$0>G@IO$f
z5v8IezJe~<x^6J4oD}<@j(gb-mR=D7ZinszIta#(01IZHIW*m0C`Jb<wEX?TGJpil
zkN%&Y^+($$FS3p_2gU#Y_C1hY-Px`IucV4;rtW%t3UNMs|G!kRG4KB+Bn9Q4lrXVQ
z=A&3ysIt$Xx(S&5WXqh|XN=bSeeUUn)frd+^Q7+B5Tb~b3>X84^-apE>=B;!zTsim
z5dSxnz^p-^djYGA_OyTAV=B?%0k(g)<uNxa%H=;&m`d&dxMFzTv+FMYYX3zD={F7{
zRyjN<YOl5k_rL$O9bbOO&ue$MrBP=<6c-jC<Va{Uq%-_&=t81;{J6>IzQU9ZPd38;
zLJADG1B@|AT`;st%c|Zpj>G%&zLMgR;2vHk%bts2nki;qxm|bG(?KuGQ$14R=oBS;
zmuGw}ip+Yg8^%}dyF9j*`GWG(10Wv>&dG^ws*>!y7pEkvdj5^GW8uOObcBa5GnNv_
zF<LVNJOiU4_=b4Elh>h4Hu29*3CO%Rp}uRAD}5+wJ0=YkanPj2b2MQ_17xFd&>hJR
z=7E?we!xD8yL1{gRtI_m-($F0$_;f#UHr{G3Yc*MFGebJt^pRSH`4DoDLjl&AN`1O
zOD^JKlS5e+H10a5E$hPT5_bJ<zSXP&HZ(b#Rxxpd2d)ZwaW5b_Hlv%*S{%pAED;1|
zeQtar_cWCyWq*aCLZg{Eb&U68IcI<Oh#V#Cw|SA6lI(mmiMbLe5R8Egj)_w<vs#&N
zimE%=oA}cpSa5oJ-HXU7B87g<OIOXcg3QXfoUUFNe792N;OvPlIoXiSLcb%BinoT=
zC3{50?K&CYA^WFTG^b|LwcXZ%YI77NnV&jrF;W@r2)ZiE{^H%umv;0?jP_uSo25N*
zzS$sADYaRMxF+MaoyWl6_#)PdmQteUd<q3Y<$u63Bf_2*o<Di8boVq2%^P`3GkO;@
zKu5%Sc4ShrMCw}6pw`5UrD+Uv{_x0o0}OD<qh<!1-3VASGb^`N<)xQU&<tf#XU}@J
z2YA4M%dQ2RjQ?CHueN8J>I?=kM!%^MR^<h2+AW>)I^tmWCyuN}7g{B#Ft=;A&)fr*
z*7VgYhmT9EvYv3tF#f^haPWvjAR3J;TA?LZ)v6~f-4`2Vkx3yh;6G`BOsrFG9utcn
zh7^RZcfzqn9=qI1(_PRJ4tt@BC!vd%&x(a474Z}WiWX#{FTe!kHELMtVwO?GVF+4c
zg9yZOi*|fVh~pWC?~S-1&0#SxR4J|dTVNO$g!J^@BUeM!pK9JVl;ymsVBxRW(hc>^
z0*}s-sE)r+eXj(4=n;{YoY;Z`7KTp(hNr7^;7|_LRUg7b&z=GU$k1uhof*F1N6++y
zqD;v4WwJ{SRy?Npaz&n<(Cv5xmnzwSpcv|SAbxa-NNM4N%~EsqbCE&-!%!{KW0J72
zmBk(G?1w_uX^<o%ur*!D#;R$H1k<x@@pXM(!m$UVi!c6q@AR%&xyHg&XZ1g^T}t&t
zaq8Ey&vHS|w_)M#u+eX4ACN?u27gvfxRWfnz>Dp-7i7(f+zGZrqqZ3$7oqcV4q}mp
z#dS`52d_TPuFxSF-GW{I!)EoE*9_TwWB`#)mf8e<?P@Y@+3ZYyd<xUGl)&vj=Rt2N
zaxl?po)P;b#>+ZvpV~+O&Jg01bqgS+V21@1bh<2zd7w*K)oj%=^qoyQxaqk32z{*O
z*Qh1`)F@ipIUv0~dNn8~n5H}qFRSb0;mm;dyT1ozDYF{qKNp|+z^;&U_Y%d*v+KF>
z=ChMx7fwbyiYXTA1!Uua=7s2|f4KE!!G_|^leOPmQ#AM$E$S7%3sC2nRDoBM%%!{+
z{wh{NA+W9J7^V9Lwl5$BJ;G=P=uUBnF2ln@*;ZH{o};2OJpiXZL-e(UT5(RI>8)>&
zBBCR~5Wp3SJ^%JhP=>QG`V;}ddtCcsPRxz{+j7$-cHLHrk~uPJQp!hI!qwg?Zc4mK
z>r30)=Sp}Z3sAfpo9er2az8grB0Wtxf{)?pt~`zHgA{?XwHqTqxG#{EU*bWg9+k94
zrPOI5^B&k^>GfqN@BeHX0v;xAXD<P$90xL0qZP;FZ{m}zRQaqv+JZM6jk@P0TXwIn
zhF6QrG_1k6m1+3q#zg8NXLYdQ8R7Ka3B{NtYNl-8ZUQ(|q%~n}<X)9ze4XA^&Wa^H
zbEEFouIb87@3E?LQ-dbP%f@v#V=2}w`={o1L6=H+;8LvK*JR6i&CdbSyuq3D(dZB1
zb@Vf!OYg~Ej4_16c^>f<wX!z%PZfL<9ny8k(6}<)zt>v8Bm_dyQVlOio>x`VZ**K$
zuo)S-IJ-;D6>1#*O5pH4VghjzrL$hfb;28UKcRSjG3|F#`gM}ln;FmsLBJ?Bn@me?
zf%+<!qtSJbu2<77@)ZWv*T+alhqA&Ik&4i^Q*KMrqx5yGqpZ7CEGo*n$NFn(UR30V
zmp?Xpr4ec+{XMmj&OMI-5AK2GueIa8-28&Ha*{lWbWC9?EAnx??#oU+5{<K+IF|q$
zRJZ-cxe|lS?Q{qc<nK8^P$>3pE6aSwEB`Qwg=K5&kuRKXcRRK|STCO(4O6-M+yRTc
z?P@TIERC{H`dAb}1*8kL$#_CT!hUg<1gkM&r-x&Wjx?S@ooYGq4rzf<hRSO>>vOaM
z8?(aJEh-36UZle*3<?{LY2XEjViPCIDED5@AV?Hy-qiQ_7_+zK*p9~skxGya$Hsk5
z0@MZc=f;PrdZ+_#sXWp=i~HMmgE&bc-d!OKU%tOT=*pNcE3Qq13ycVAf3$G{7tXhn
zU(u)c8;Kg}@g9{VG=;C%HE7Ko(y<(jt3%{l+TzGlsc-k(hEnzmg^KSd=R_j3G7(jJ
zk-DwKjfn!G;p<r}7qXS~)COll#=977Lu%#fQdwmsLjDrI4Ef5<*nbImgJ(%d9DM0W
zt!f$cnPZ3J4<OeQv}jF=^|@YAYZCGil}VzIzS(<;MZqLG+-(gb{YLeFbqhi~1K|1#
zuVvShh?}nl&P*pVVnS>38FP#tAkP__v4UvYWa2*0(XpAW>5=5@IW^|mnid5%_3-he
z_W$wG;%nSN2KM%1^EuLS*BSV-KPEcdW%^g1L+`y4!+L-hp|EAhSY8&Iq?AZ>JR#Uv
zi;=C<od>|aCWAv%H`EVYVf_3NZ;cDB_)}!e!<`6)eMP6)P7!akGd?j$!#>|5-Q&B_
zPQQQaefpIWBYc;Am*;4nAckZ#t#Gowjl&+Ei232OlPeoqpwpLn=Td8bnY>T;zp%t5
z4tiNb-G3~_qIs6TfL{vU=!MHnqW#rXAT`1ZLlKzY0;S&#TOG?t^)E5mm6<E}{y+{F
z^}#U0r$ePa%XZPiAGgNV{-Md)VGpZ{R%Vy5ue#gpQd>hc@@SFZiGw&C<nz%`Ccx=&
z2Xfw{A*IM!5!1v4`3xV{OaQN4`+hvp^Gb^9Q?4ILN<go@7#xAf!A)><Xw|JDYdF!s
zUlt>*#lkCuD`W0B<H_2e089Z6S?^x*-NCBGum9Rpj|Ex)zK_F@=-S5&DTi<!9%@@2
z)^@Kn_PP1)w?_k?d%68?q(h+XM0!WC=2Lyc)4){~J|;|q#v6Ig?91mKwDjhWcRPVN
zv@GD3K(l;_FSLG|?&BYbe|)J`IwU#kfBt~r=-XhsdUDm<tBt-wq57wH4^R=<doSh2
zjB83_9ee|CIfyaM+SVyJ)y-nCtTp@bmalG^$ZMGtR{mGVopXuy^^VnYWqADM2d)`q
z#JIJ`NW@kl6!?bfggKFeHT6YJ+pnMCQU_}C=|P4mHhh>k!#zx4t$v{Q;-JiV@XQuC
zy<=?culVX0RMnDfODg}W-bNOkFPt(h_1(1e@uk8vCA(kw#8bK=Ez;(aa?^NHiz?gG
zMVW^gXz;wrt+@xQ1WXZv<fR_9kQcQ&L$<}qEGm_*BkFrtfS!O8j4t5x#&ZtI^~YEr
zxSbos=zd^+*VAmfOCBxllFFovIoH2cZVGnYUyVQHy75vOOlI|@nkwnHdj=goPx4yo
zFIMBE?DlnBAhb&fIvL9raEz0E7=;f(JqD~3;Ec)q;hA)I_M*#1HL!Gb@m#5uJIAH!
zwwDhHUp#0-7C{(cmt-Jq$T#5TtrQ1n%7L$}22B3R-Z|RMk8y!`b*G3n^<*?yqB=Df
ztXfxmV5?gD`16?jX1l4B1Tm69L`6RCnd6=#-Q`AgE~!icF!0^?%0i*U#Afz}mVIHb
zDW$}EI6IA=|K2NH=?2D6|JC~wiC(_ZrF~Il?Utq`fBW<ImRaqG@MjpJJ(r;&#b-lB
z5LlsYriA7CO$sD2g+eX7#Q)AWXEPfx6<TdgiCXV|3(G==^^%AcMcU-;l?`Om41;|7
zfkTUSm~k~ovL*yC>pmIQ%hMF94B)3jg2hPvwyt#!{$tuz#Y+8qlGF8c^(4&udF(T>
zkXtwMe9*4rdS;KZonKUS*M<?<DNYp!DSzrJe21q8B0}d0Pb1wZ9bW_I7Y1k1KPGFq
zWKM>GScBfruNX<Inzj+;t}5v`e3G0l$0Vzoj7a*Eee@60^LLg~*(d!fI;W7LIgbo*
z#}ZM7iRF#_FWa7ZA%LX}E=yK+XeNH|7^x{lR5NS{i};9-2{uLdW*D_Ja*f&LAzx+)
z^Qho7;O%L2)lvyw-U_h3iXrs{qO>)4J|WIA>okYBL}Q{NJp{a_gTIo?VyA(O!|xL?
zndpZZAg=cE^cK^vOk01#Tti>_)X02SM>$zjuPmmV`owX_`8}jFAKbBo2;>~P4in=M
zr9{F7FDi%kU-`_8>oD4Mu?|?vz2RMCk)07i0LJ8h|IdS5934o)T;4M^O)Zs_UN6z9
zH7!w#>-lU4L;g{0g^7;Bb32RLhNDwfQOM3q5+n?la~K(%N9@#q?Vv#W1yaTk!&Cgt
zL3%>OVE7?HJ?E3^=e<26=fhgRXn!`S_@@%d@=YvJA|U)w+~46yE4`KA9b{yk=TBC7
zLpb*)a+)D1rA4~9F|jBR|CdNT1?3a?!`uZtATiE)1`K6O(!r;2rNDu|m?@$%Ce3m@
z7UtdJu^0kI&_zx?@s(G;CUhYRl@N*VkC+F()$Ie84U~7-Pb_o~|Mn;}>Ux6R-K&~k
zB^F(PU%|%NXC&#kTN6VFcPj7kpT$iIrafN$q~c_WP|e4Ff}aZo7AW2@d-Lu+(2}q5
zWWO|n=M1@s4m-MdYCZR($YW!ZKU2JecbQVvCB)Y41G6VCB}$#k1&{;JfH5Vs;fI_)
z3U|FLaC4?Hml?bv8yuiAsN@XIRj?e!;l|&cAA2hJPncR20A*cY!!e9TcZRWp`CQxI
zCo!h)@fM(Loh-vij|fxZgdD>Ih9^j4<}~wrRRxe<MF8}cc?rP>(TMkJ|8vCHNE%Aw
zvgMIxxYPRypVP-ESj|TqlLWAccnEyKxZ!^Ppd@eHJ7{kc@<(vXmj+V45LMS7kBFai
z<<cefBU5e!<%e=BN)DBTL={MqvZ6f4mPbuIBX9U9m0(bVmSmtt7G(P74(j7vt61g)
zRp2>>#EVLnzgiIz(^^)?7cDc_)eCViX0sl-R_lY`mDLV4j!tb0)f&Qn6nOqt&hk_0
z=S<YdiC(W5W@uX0VTIcE_$z7DEWwOzAp`MRA6oXzy9dE2dU(ZPtrLm>gFhT&n@JQy
zP@2CDXq#5Ge7`k&!*=`Su!D;X01vvzs`D2?Ct!~PvQt$mz}Km1(v(8-;4*GQ)V&+8
zWq0ro!`Vji(5s69=P;3pM=jG-=f&C2tKJyK0X2{cI_h-#bC2k0pSDfrDd@c4C77+Q
zxC5{Cdt1=E(zgjM;TJ3SHb9URf=bSGoIs+%m#<c`cRr1n>|ilLdHS3wwx5Neg_8AT
z2~S`&^x4{Si5S=Cjj4ymeN~a0h?_uq4V7^q=pn0;)9roS3M?5zK+^@E@tuPWGA~rN
zC=MsFX6fUrs{y+s`tyTNd*do!;eusVsZa^M+eJM|X1}CpKbCef!2tRi(DW6B&xfrr
zcvYg;@saphzJamevQ}RDMWC;*aWjIc=kkk<oee?6PO^R%;`!-qsz)VB`!Hc1+1#X%
zH<Cvdo{v-pqq@uk+GhDNg4fdPHxVZuCs^zsbTa0Qmwf9cISDZToS*`_1yFB0(VHYy
zj||e<=B#>JgIqw(6Tm-&t<~eD$EpM<YpGjiPrIhO#osUqV3|gViK6!2e2I=|11IYU
zfA?b0IDI$HR3UPQ5mcgoRaUTs8ccFv(a;adj?L4Je^Hnq3gQO`i_rgOJK7LK2?d`}
zIh6F@2tS7(!mbxEDLWgep5@aE36|#FS)U1xEx|nW{`@sRFbhfr!Daxy?r_rE#HV3)
z18dE9gVfO??J+pT?V=$p77pTr8lWKlnk^BjHBo~tBmV$(M5l3&%xrcvD7<t5itEU^
z#L@-S%3`EsT9!!@+0MFKI}F+PrG#(Q+C#JHsXeS~3$VD&#}`urAVoFqq+^f1$@%br
zIW%n8ei=n879z!yc<Jr~UA7{$Oi9)%{dOUxsex2JeGhl;j*%{Xxni@R#X`Pe;3a{-
zRkzl%wySj!L{M*3V{;y~JYR;4R!acG8%a%@kuU9avSq?<V88zkllWE)*U(PZg*V1l
z<}6^;iAYO6X@I|;LEBx|4~6iM`S@rJVO=dgi);QWc3QuKRT882xm16=nYD1*Z2hAn
z0TS1In4=Q|^p-34^<t>%K)|>C-bq7fSw_;OA?bP)Vvm<Z>JYW|1t$x|_+Wg~)RXXf
z*mI7Y&aCWFLP9iqkrd5M!?e4R1e8jSx&?6EF7J7T)9Y`!#-hu_WWX_2asXOvj90vR
zf#SbRT(^HdgwgG=Lh|=#oQ`RfQT2u81J3f+4bb9y+g7X)>8d)@7s&%(0Y$V9e%~k)
zO{j1c0n;$f^AYO_<iS5DqIn8yYN<;*2a7JIr%adEHVJTiNt&oK%Hq6?2g&Nnzm*$F
znyf>4Dp;(TVFa4`adUf1L)2<iS2PNe)lreOzl^5K+pOA`hK|!5g3HMUZ%hC0k`V~a
zWB3w{NYAtr(6rRg`q2kQ86G)Wir(^Vg%ZF~6Y$zdrsfrqxaecnReTPN2w9!<XGpp9
z5BL}}*diSbXH5f^xQ%MEf%!E2o<L|u`zaXUfcci)q=tG0DQa0jutZjKe}x%cY|rQo
zbnck-&ISOuDZ+nP(u;YX{aPjL-vqvuA*J*1A9lGCJL$A8OxMr#X=wR|JCkAVPiT+%
z&co4V<0%^*s8jlfa72<R3ib<}NV#8kMj?Q+SgU$Q_tCap8aEeYrLh90dBX`E;CYFl
z!_S{P8+blw0K)qCL_n0{<YKpAKb3f|yY?8TV7JB&TxeZ^z`R_PiN1OcXq|PVA@P8u
z1?L9f-4S(URL7_dxYNu9RXE)DGpbHBApZ>BQxyz2CYWyXoYrgNL}jCqzQis}hWZe?
z>!^`*lvjy^YwzcrtlP>arL|4rX3imM2RXP0X<n=jB%ts#BWUGgaZ@Zv>)}_&$VI*-
z3TuJ)E>DZn?;?|!g1$<-Ed+ONZpLj(iwt#4TXqUukeHXHzPVqV7rdo}=CB^D!cHmY
zg?AC?WW-8h%*Q?Wy?)(;oG6V4#&UFL7M^qViUsK#WUhN|e;(O;Us6Fv!U6o2{ES*W
zP{xT+PC4i9RX{vSD-h~j4gHy00x4JtiLsU>Qjl=IU3{}u5|}awZ>x#V$AGULn%jN8
z6ee6rhQWgrl%n@hH|SqOJWAAF<an0umP#=}O~^A23`2dF%XJ!g$CGdAVL%;4;V|;T
z0nSRSa3^&^7aB8y-u@Lxi0CL4bW0qcFjA{;4#Xl8JBwla`vKa~#uh*R%|nCG;hAos
z2zr*Q<dee`-OJ9M)?~hsuhq9!ve76L=^ZfV>PL~~?7s?6B+%s<6>V~&5aGMk|Da-f
zFCTvHn4s##y2u3NcKQ*2uIxXYPNea89z1i+O_Wurg80~!@9|sf=YIX``BjEUSFELU
zSh0oqRxp&dIu{Xnp$BK2-Ga~gu{**KLBPH~Z2rr+2)P=z?)+EqoIqWNp#P?BZ}Dpl
zdY;aUM=GkfPID&nW_10A$`qAaf<}71!53dgSV5s|PTBVYasZ=*+ZO{h)Sm%tXMYfB
zW2QT78+zKy`_b<NhpOC{sjTH%jVsp+F;-1Z1GM_Gxs$EIO9wR|lPSaw-rPu>9Q_`f
zNBp;RAdV?Qn1^x}p9;X*_Yiyp*-6*G%VBTTufSJHjQUHB6+K`6H*<AJ6$ul|^TJ|S
zx**9VfJc~uZv%DX9)IVUR4I>B>Xy-u(Y1=Aw7lR+2TtOtBp*kZUV^@Qx#Io#P4a55
zT7ml(swk=<94YmTx6Kp*IclkJ>-OsJ7EtW!obrVlA()C=VNDDde5m7wRQHKfSy5j!
zTJu%D@X>al*e>8X(12%2lh*T&-G_9bsssCR4zE}Fiv5p{%vWdw2^I2M_gp3Es|J+c
zzJ4E6NKE&!J+u*mpSNbALnn27eYf)qbOFk$+DwVgt6sWk&id2z;4y*EEm$Y4krgYo
z(Z|~Apd*Xv&`XP{b>DMuor|+M%5@*60Y(dX_YHIT-?PQJ0{QTd5D3hV(I_vx>DjuJ
z<7;@p-K&%~3yz|A1r^E6BMZt+1#+DVg~(h$Tt70F`-nt;5ILM9f@bqThA>^PdKEy;
zfNNcWwGXrbHj$|E<1nDqj#8tM?WdW6t}@q+Dk3Pd9<Kz;Ei+_xf5%YH8y55kVm*pG
zU@!sI?Px5$t3Nj>?1)+>;ura*U-ur#Nmy2b=O6nqSm~0FcRKD>Lc;2CQrHa%Qt(%)
zKlOaT#B~3QfgkBkpXQ;Ju0@fXYOM5!+hS^CdQIoot8;RB`@#fK2w>y>!$B-gE{JST
z72~<;Hzi<Gu%E=&K7w8;lk`kLNsILJd?qci15SZlvWf|(+tc0qL5>c~j?}E+s_1wa
zIUl{85gIst{|~EP^*kLNPZHFlb>5Fcz~I8YdzN0MrVan&ZOz%m))r6ohim2wRruu{
zM1^n_r!3x)XO2^GBv?13%QZ*;KBeOTobp)@j<y2^;>5no>sSw#_5hvOs<o!~toA8v
zt6?K0mj!BaQwcp<IGM&lJ4k*(0q#~x@Dz@o5f!~n4g}bZx5+${Wk^#O8aOFyY1tP=
zM9p&Rv6mI>*M#6nneEj^2JXF@SBGOag*H#)OzFyevrWRKk?GNrW5zq)Fyj7CwMW(%
zd352sR#;%AIf4%UXd`U?0O7AvJOBYn@fJzH(=wM{9y7w;4?vteCixi+BBXP7d2CD|
z(yJRLpZrHE<$||+4mJRIpZ|n_5#ee0%%)w_z!1+qkKmL}yZ>2F``ww&(5sc(n=8=l
zUfSrS_e~_x)>3kkSn}IOeZa>EAz;+Isu_Fog*=HK8aRkU8u;PG&2=L?_LFh1zuqXs
zRzy`jqY`Msj1PdgEIaeVGm2w@1-{_>k|}~U1~%-4QH<^{{z-oj6SO}&B|S_{qJNXB
zfT;g9v;#;o9AjE>L{pxX_jXGAIjA8eWzQFplgm?PP?6M4_mK=KDoS4rOQ4Ta|3meK
zZLeHQ9uh8?t-e0l-$$Te@WQ?f{<-B#QDmCPH^@vuESjx(&c@zGV&nYkPG==ZXU0Ya
zB@sM-GD7L$g>>12rtmFMt_%E%HzX(5k7D2{$MVAEm<>!MJbA(XrJnt$fFD3SWO8NM
zZnE6D{ml<rnLc8TDn8tAmqhvNGeb_<+>$npT2eHc-7hpMD|q_jJ-RN3P#<?bROrEH
zbvNu90#P|OzT1Qzj##}LO4MyQCb8}m`w_oXJ4{!st6?r?0LkysTEy!$bcrz5l_F|M
z>33dEhI|`FY)G*dV<p#J3-5k8o*n7Xk;N<2&}5EJgoar{MK}B~40{K9r@z439G0t$
zel%p)rgxzV*O^ikxf3vy$w{1}Tzg+;qSUY6sFE^`C>NGitx=E~IStwgan&b-c_+rB
ziQs=^I2+J@<u+<(8+_P~JSzeOQ;%qeu@h8eu<c^FebtXFS!2i#UQ=X#&%7F;0F%Ys
z|E8aVo<_D~n9%CcDn+pk_ZZWhc)vxWow)Ck2!aedab!DAOkqJD0aAs1MF4iRlf7kY
zvU6B#vB2d|;1Q~m8*EL@X%Gq|MFP1A^(&DaeBx~Mfw0k0Ek|dP`$z23@lS4=0(7Va
zKujgHv*H#0vJE74gp?K*E&u-rMm)xJ$x;dvDW=Fe9Ic-qH`OB(K*nzuoUC|eehkFT
z1O6oP>7Uxd(@Cm~@-E3=c_?WxSitY4fBZ4{Au2*d@f;gf;r?<K*B2kR`{?5smTr^W
zF0uHsh^}`IAyruVj;s~>Jk1w5EsICiaTnW9w4VOETX2do8>5_SR^9Y#NEO)c9{P|s
z)}ay@$4k=&uPP<EjDIQv4@sFWk13SmC|AKc5Oep2W`o1D0w9Ca@oha>ZP(Hp!TqQG
zdhKThg5kePkRR&#^BwF>U(T(9PhVH+#-{>BOpo%jCWbCZH-Vg@@8hx%6`H$gFDI>7
zXrF06CjZwPq~r(3(ZhR-12dlmSjjXLyP=dVLU3}Q2^)VesS95FY+Oi{tme)Un1s@(
z(pb%Hm;SX_fl`XPE^+Ttipe~fN9eXZ!W4KSIGytL*od#T<`}?6d;<QO6{H=`@HF9x
zAXxZ=cm@*Z?SH}e@6_5KuXC}w!P5KsQpHh8iA5jRs*(PruXX<5VSZ{xV%6y!WpVm~
zM9uI~W^2PjC21`bU*dLdI0rq@RlsRIGU0kY;Y;<oAwNL9#8OQ=^6>DWZ57ZVGUr^E
z1`@xoECN;B97#pX?Bi%<xPxDy7%!5Y;Rpv@8OAj>w{GY|EE79$6*~w)*So%X8A+$=
z*BD()e1c!M*B5Wj4LI|W6((`)Q-Zipm7NCn@zJag((iLCd;Z(X<?K=q^+zeMKgo;z
zw9a>>(%aVwf9w81ZPCO)=>7?5UmWwLgi~O*Mw=Rxgp!myf$=w|DoK;RpG*_96FNGR
ztJ(RfmeLsacZH1n5?O5-vh7M4kSS6Q={cy(sN~MUK2uJ*fVc~i`4i_ucp5GMR;C<>
zB8H4mtM{koU^$4Yf7F^4dP)r*?u0WLHv2GH<uSym?(4+g2jd-UB@t~>mzz$~ksQ*d
z%wCrfCaq6^E%pF$621ST>>Ph3qrV<R<$7z*@YFxZ)5OD9p3G~;eb(Z&n*+^AmiRt(
z3CH#2>U11h<$g!epS<_Thg<Z*>?gS?)q4+q3xQtr!)IYqrKHna*fT@;7*xaQ5_SwC
zNhPn!Km}r5iSk!@ry1BortqcSO3B~vT-{M$Z-V3_(}p#1T_b!TM3*GzAEr3<b<X1o
zS{85~V}5AzBI^~_qC?~DVKLo@WTP}^+9K8_TodXvf1Iws&inkIp56_&wyCqz>V5Ww
z8FmM?8(AO3gieU;lmBSU=uNnOeVfaFYylXRb|GhC(KN@=mCMG%ZESkn;Cvo&W1S)&
zV&F;6*0G+V&t_wPbQu+Sb6<E1Bp;l~h)m*`q^xy=<75g_Ju#R~nd_TVZzm;DYy%@+
z{bW#f98F~~sIv*JQZV?aY$z5gO8o8NT->~7ZH*1tG%U+Y%e=aJ8RP-DImR8o-uulm
zSeV?e-`SsDot+9S(}7d@A#TeninEXXbKJ7AZZZ*=bmaYL1G^e`h5nF*Kd$vU(Hrl>
z^pCpHH>Rmm81^igaLMZm(awT<c6gUn^|tQY?Zx#A=G6D0@hYWnvj>AQkpKnT>oSYF
z*Lf8gi*41;(}0U{2fz$bOdTaXVbhJ0))y@oF}yodG=czvsV&Ymca~LKG}O-%-|BJ(
zypM*ti=JJdDd}zl@kF%xE(+r0mGvn~D-id1$1>y}m1Poa@?!TXE3k;D=jw0TQWJ|&
zC&K=|KPbO=@G1A-|Nivj!v4?yprVVLU!oB$4$qw1ZsDL0yWIx_L@5xPAMC*{zu1<0
zl3CI?-fH8=4lJe<4d|LZ<5}Q@j>?@0rc8^Xv<quBttvUfW~q`pCJNxH^Kzt{t!vFW
z^MARaO#<MuK+E@_KTU7H^>LxwB??K^%U~Dm&kj@P;)#<nLWxxwO^-w1sPXvGNHaOq
zY03kkQpSBV^8PedlVwevLAHuvwLy$L2Ww=yCp&O79^rm(&ODr{$n*g`Us3FRdD#w6
zx=%+S<1uK4U(38LtRm2Id7!@Nl7Yd(iI|d2MBNk{>EU}?kIc`r-|?RCI<fdkS&X9l
zuSQU<3M(~uXub1-*?FFjHRJCt-kmBUtflhKlU|EQnpk#^soMe*hT>;%lWP}MfWgfb
zWM}K`hjIS#0y5?=m3j3t2pL0JNc)r*mXiORcqt0#|BdP^JS*UpD1<}M)RXu|<%!#&
zFsTlv{BmBNUDw?*V7zDwdiQZQERzqzv9O%nCdW=D!Y-19zXH~badL@>UXX$pGC;H&
zj!)LNVi>GLpBi^nJ$+Hru{<axN+_0<nNg*9el5H}nU5_WexR3hABIV32<lV)z>i0Q
zN=D!ni1$!=1}5!|j=T>K(T}3~&2AluL4<CYW=YWv44C56$=q5lbm=&xQtvVVWj$lN
z)_0gTBhG86hhinVE;5pU`>BHvli?#4*8*01X^}f@eqU5>`d%2(mBf@f4=+{wKQ;JE
zKUze@)vE3}8Ffu9#mfJ|HK82)B4Y<o*HA3T`Z|q4#nzg8eXlTU`y(HPG%ikjF{n@Y
zU`jgsKp&yIC3`4WR%4f_+6uLziW8~Z+0P)f*jLCAz1*EJA7u((HCK-f5_D|V`4$>e
zs(wTYi(J=@QG){Y7fY(Ng~7b^`1GNQaRG7N0j2QDQM*>W{6(>X+P6`9d1S9V)Q`6N
zKa>Q<@)%CM{FpqZ#?_S(Wq0d(d{xEe{_OLm65S9O7fbp3P(aKM<;;PG5$kx{)+vQy
zJf18%c9hax%EC7yn6)X4ryYevatsY%LC+3>CNK~)Mr8uw=n`GF#lEM|tBh~x0EpzW
zFsf-bs3)Ud6N4$ZnJ?QAb&rURipvLR%1?-On<ICrOtDIYAo%-=W*9hm(p?W3u{kw1
zKl}Ac6Q>r(9E%T}%hR|w+oy-;v$57&@>@D_4k23T-S2E*6<l%?HbiId<evdNdap-9
zv7?+k%7|mVk9~sGl#rjjX!WB4_=uj`{L0BibY>6$1&KU5<qXq9w8Dq0a6JTU$<T*Z
zpoCe0le%3$?L2k7p;i@A#z<2mRu-`Xh9;Hbts4ZH4YyZEFiKhbX_n{d6bjAOp?hhI
zDz@->{*d<>4Xm$_>`|l<1iu*{cKfawjX9~rccIcudQ2Zx&eK9)V9bjV6G(KDkDNz3
z51*$blBs6EXIs5`pSeBEY{5ES!dD)J%qJ5J994!*{bI*9ZlDGY`?ZjNr!-KHP!i%s
znm~f^2A#2=xy1KcV;^`wy^3SGn1<03P5U9261!_UDt8ys|9|{S*63HK0BhOPXv)OD
zqXgzY2trGgSQl6r(xr=zG&AC3odd~UB5TX8Wd#_x#P!mqb`BqEbGQUmSO`s1mrGrB
zAlZ%Q^X;R2p`HL`Svj2iOD7~o9ZygP2ExG4?@37Q3)?dt#ZfR-xEfogxNL0J*{&r@
z$f*E47ju~;DgEV_kbDuY0`?KCZ@3-m8z@J<0^U<F-%h5Mmxv+zTaN2mHKVZEJ*z6A
zJo7lhtiHY!kx#ke<7%}(ehU@ED#0}Vmqf4~I;F~zbqejzi}_2a3rt*&G>Y|drmVCp
zuE>3h9;z+AtmCWDYzwL9q87%5S0j7g&&}<mzqPF@hk7<Jh;=UDEZiCHQtY0=Kq=U2
zj!A*zs?ybKOHGR@cr(Ia(F}^i`>|10hUp50Hyoy6h3KVBCA%h5(gFgmeViM+(#_+^
z(hNV7`mx>z!fLvQeiLx3yGVgFFLdO#D>dn%D#V;uIhtX0RbuK+k##sK_j(8}zlBBR
z#Itg{JG`!reoJ@;9Ik?$1P!6Qayu<<mDhpk@U>HrDjdoI`z1aoQjRA_q+dIe>zn{R
zK*GOC$<CSQk2$C!EdCSv9z}QD|9-^^Gq9~eXRno~Qv3}c{JQE~ALYi@h9aplB%uVw
zw;;Z-H%iV*gOLk56{GJdQ=t6Dm(jzoA6*Xh+kbQ{<^4`sDeeJujg;_?9f7vB=t^?5
zkSMyY`}q_WgWvGI*O?|cfTcKu-+O0Nj=wK!fkQGVx<d7*JKLTwoU+M(;Y3vr7--22
zdwst29o(#H3$D^|ZxECf#BB_^pp{dme^{TRYG=EaR#sI0`R`98R8+*Npq<u;-mSvT
zYcOW!GgJ0jkpFoDi;|peu7fU&SFN;2@lBX!pHI!pTpF)s%QEZ$lP|VnZnUrL&CWy#
z8^qtaHbkjGpKOx3JotOf@&V($tiR{Z%Kc62Gp`%L^3-__kNj6zjKsEiRly2BcErJ>
z7IGR;5Xs+GlBmU(2Ub08+&&k^<bYIhtIwwsL@a+Fe|9wejRun^3;dgS^zx#3WLaEs
z3{@^hvPuz4!aO#+)5|o0+kry>V?3Mez^zu9urq1-_d>INLRH}oIu}6T2`slmeM-gw
zyu*|p3MFqWuh6sctNTT8Ce9YUP}q1T*!XPuNT)7v0=KVItmg?OeeXOqyoT)C@6fF#
zdNHbW5^tzm(mEDH8SIse*Zx^5tz;%1a_Dx6Z*a6iTUXB1FF~Iz$MWR4bef5smtdcV
zAT@kCH?;pmzDa))@D%_=BprF?wQFznf3cWGU7KXb@!6XOzxXf^Bq4iAE2&cMTMe-`
zoRJ1z@s*0Dm#YT|i9t!D=Yqs+2s6ZKhyirf<vJ~z;$L|;{)NV&N}9jLiQgAYNseMV
zE6Ot5c4=z#<9a!XdB*FM1Cq~zQFH8TZEc=B1^9wo922l+9S2B%$<Y!u9?+u352Y-Z
z`RXUd7ue+W55<f-9I+JdY2)~x)_0>@+Qg5z1*%v_Exm2Wj#A$~F0<x8uHBK#L@W%S
zP=-O?8@lYnz4V)M7J|mVa1--=ehz-(K7+&vYQB;X%H4v^o_|apASsXOkKQ99*cgQ<
zM6UE2p!2dD+ToWmnbj^iGS2o4X)2w1v>(uMG=tu>sUS%}Ypfxd9FeOmyLFU@cm$p3
zt%G-4-}v}uO;)}qAHdfNF&SY4c6(!$K&qOutln(7PV_aLm1B3ibF_s9DO6aqY~}!j
z+%gFbR)+3k9D0KX$cTWmV|<#L&D}7VoMsTHWT>j&J;+bAVatS?yoa4wcG^RD^Alku
z&ef+4vT##=?3+^ZngKvb*ZJKF9%ou4w7S|XlwdksiXrFxfw~IYH)Tpg92nkU4b8Wk
zOXwKFH?ao?B_JqbBNbJ1-z@@0m%+eKY^HFM{zKBN6pcLocF+FRn$OpmdCX*<6NkEK
z53O-h*&TVo#ycG}shc9kFt}&%_i&wLUvOiRxji|m-aTX&O;D2PJ}^%F_0CXJ#xX6W
z3<v`Ie0X7-N4ltNR`z>rs4*1HJnHQfslq`Z7Aj1HL4yZmH*vh4qz({xRe)@MWu(UG
z@$ysRlwJ;~|Lid~BdUT*yPH}@Z{Hlj=Nk_-_kuNcy)h#KjSZPtm)$LoM;D(dqy3^V
zSIova^c`_xX^>{^9m|Cjc)h5RxEF_=AQ2@7CJs6OMNdo;35!W5O{q(EW2ulG1+SXX
z9f<^~)Jf&L$q-x4MJ1OwbVpKVSWcTtrHAkf(c2XF%Co`?Xr;8?MM_7~6-p)2g&w+E
zI7#!`?N!eiY!Hr~NsiF#Lxl3svZG9DbnFcmi~xftLfVZomEjEu7~ttHTn@X^ELZ7*
z+#7~Gw2eG~E%=E&l8t$3_3XBTB45$;68@`vkeP}Owntb~y|0%?T}+~O(>hg)EdLvK
zmxQu3oD4EFhHgjmMev@3Qt7BA#+-tGsPF2h*7PQ^ZMiM(7IgV!kIx`L%%r`jz%dkc
z)UZjBn5V+S^`MD!h;gD8O%S6j!ldrTK}ZI`%FvVl-{n48OCRh9<K4|1trol89)p#Z
zZ}H%*!;N`V5>c~sUFNx%>&pgaZ?^G85EW2ug9~Hd+wIxYSM%-_C%l@XdJ|;9nO$O8
zP-OV>FXTBWEm8O6MPj8V8r6P?PCa15pK?xuaPd|S{Fo&rG=dC2JArapyM7okU~Dgz
zZoFeCj_dG(^TT_MF#M9oiE&jmmC9T(A&WO4A(6G~3u>{kDEbKYRyseMbRIgkJ333c
z1G+M`{D-3=oQ-_KiEz)ipa{RoElF<xUiQ6l;-`IY9Tz|yU__5?FceB(#e=wq_6=|C
zml6=n!U4$zK7T?HAPlo%&rP`ZaY8ffhX)MC>3_BA+45Va@YoY}RbshrTTS!YM3dP>
zLT$3D9QoZ$@oW)C?Vn0G_KNIL6vB<`qGQf$&_e3Izf?3~PCwKU%;>n5qr%AWytGg8
zTInNTdX|d?wMe8bGlQ*87G0lvl{<44XWkvCL}uQ(w_;Up%(V_Kc%gsI0c|jk2vFVr
zjT+D6;W##lSYZtVv9T46l&26kH-YLz@P8|YtJfxa-c%=aD*UZRX6|h;+p+q#n68a9
z_6fGnBhgUhNGsC?aA)Vi&Br>4>Ni~)Ga7ifE@P!1(Sk&i^HDwzX{8f}ii_7I`Dv7z
z`3oj;8+!%iW>~KW9mdWSI!+DIhCvrvh_ucEr6!3UKL`$=l}HVJ{GoDCL&(Lml;u&$
z&tZZ*dm3gm5!F1$W4Lf8)?!E|``CoT2*a~6rB7XV33|ETL>1^YFYT*Dz!It1><idJ
zAl!HmI-Hc<$GBVK7+dJc_(gRJWY~dAsp8<kVOvx?^O&|I?xh~W7V?vT6vcY;A53^{
zY4;+yr{q4k1M#0s7G2y3&pJ>P6WEB;&44aZntg|L{(EGkZNNXjBaA(pVD<$MjrvD$
zLK~;zhVgQ3R1{BBlMeRMDqCApsI|oOSmNVIYs^&Ye4c};xehL;9!JEp?o(tr(cao#
z_Llpq>WyK89=ZUzQnyZ5K*i0u*(qBzin9H7<&S-zz6+LiCNUMJ^lWM+N&jjHwW9Yf
zx`fgFDsVuGzw$L5_qj^ZjU3WMG$(0qdHxqB8D8+nA$DDlN7REj)Z0Z+Up1gzXrT5U
zqy)@g;obzsU1;)ONdVjJ%L5sylb^maQ38F4C4meBr`5#*=3#QgY<CK>xxQ1QeQeg}
zV6hkgKH98E;d6yq&;_~XAXSW9dcyb8+L_ho!Q_h&(HRUm`p>iR2CEhK_(KGUXsR_Q
zx)<lc;d76Zh3{KV!$oUGhc`|mQ0_w7Px)@GwCBEz0Qgd|!mLOsEGl0E_|^ipH5{Jz
z>Vqq@ShmxwpXxR5X0_u>8TXl~LGr3p9yKU*M_FX3I&ObU!n+XGXWbN_iJdQ@8~uO(
z4oR4#+WR3zGH}^^=cm#7d?brJSZ@X`(mBKlYAWt_YJ0itVMC_t(3*?z<SMV0D~$)z
z04KVAGhLqEjoo|hdzXi;x_I{Z^z|oMB2uY$*3HO@2(#gOUhXeB#BPd9wxhD^Ao5%J
zM=odVDSaI0s7jBcffG_E&c|M7ca%I~zOs3#FKtsPl~G#rOUK?%+q%2GT#*j`@qhpR
zWCX2bMf!O?K>&D+pop|4ji=iCYc@<`7hw0zUPFs|RV*M5uEzNA1sJ<0?*OkODrX1V
zNDHnQ8FKxd9Nw5M=wr)zyP2t2#q(sIM@S&Eigw#CSUKoz4|Ty-F;?OpD5A_3(P}nB
z+I(T}+dr9Z#do;bpc6?Pxybz%{R*m0`nrbmAyTRxAjSd_|MEaXN?v>B?8cfpV@7Fb
z3Q$adkA<sD=xEu5v^H0527ZY9ypK!ee;bP?j{>k5B@WI%V5hu`!e4D7W_(z6$7`)r
zjtqburQeg@ZPT5Q7bPI}ph?tLeL4$aU8>U|nz3HhHm0p>zYRVb>3_?xAPfbN{ya4?
zXzBCR#xP1`2^E{2er^p5l)qra&s`aM_*)w|88Ol38n?|-RO7Jtr1VxzM~aLn;cmVH
zD}8^_8xI84Fd<K$8fKFNO}8^cKw%M3GP6O(#5A$1FXFD__z(RUWDw9bG+K8L*%ck%
z9(Ib!zaRrInO_LNMOyF6jFTE7O>#_EqB2YmB>=GVL(rTa8JVwq280)(4XUe~csRky
zGx2Ot#l%hQgaCU&L3xC<vNEWWYZDSVKM0klL!XlNH%4=Aq)R5>OfsV>LY=7_ej})#
zW+`zN*o3@xBLpTCnmL93*=sl*U?(rRKrPkyUKe^N3T_DCx~>uyD3Zs%6iYZymS=vN
ztxYt$rAU8@Q~-w8y!d;=0j>ZLDLBnd6x${5PmRuh%7IF3y4x@|oEqNA;cWRqIeKs9
zGV=)dYHseUA18iJgU){fE9jb;TMB&Ld8QdyfZ}Q72~gHLGxtp%DiEQuz8VJx7f`Fn
z9kNfCaY%J1Yuwu~a-qRbJQXv+wcQx*h)L_-pwjM}S(1I&rZ2~u`gs|m!E$A0<x#|;
zB&=tvMh9|Jl6u;PhLo)T4k!35K-dhK|Nq;2uXDLRhyG_%7rwENMoRDG5SUEIw$J0J
z#OJ*Wtn0|)P75@TX|E+|jPC<>S#Cg*s3;kPHTRHkHFke5jH$kY07<$q)P@mARUE`P
zXT)%ZRG_R@C`YB1ab%%wKWnA-9y~w7`)E2p`~!3?9fnU!OgUK|;=;0fnl|cUdcl+J
zDm-a8{QAYrQk2_Wr}S_ejGS2MJfd(fJ!o_0G?cGgpy3P>uMSZPRKEMN!KpLc*M)6_
zHaZgR*jy{ge0xcfX#NkGWixtn((><cBzE#cQl@73xf0dgJ!cW>+$;&T6lqXbug6dz
zh)cD8uMPE!DggbR!N2~EI1+miGey{Z-#Oje4Y-GMi4LWZ8HEB+6Wc!AuuYPydGJ>}
z<VXST$J(y4^x%X+*kOXES~(fpa2;K&;gzzU6GKzu&SgsvyK$LNL`huj&&GUxQK4v1
z26%oY&wV{fm&KjEp0G$_snXRc{RBc4&AkT$f8k(x?+(fRZZOQzF@N%Bot^*ln{^~?
zuRas3Clv8Q5XKl6w;*oO$g^zcaznAqDp@<-n@W0Di0yKE2476ez-5V#B2=XRF?sjG
z9H#($IENB<Apa7KgGF)~wUv#UhnD%;!hTDv6MkaVbhp27gh&ffBfu{Z+ZEjoCqcP3
z$MOC_U|1J{HZBBgk|>RX6joSJM-?zovm{;s*}!KX9BEDhr)3FSm^P~~BuG-5a8m2h
zIjizQ8cPhP+sw=CaGrX<eiz;(R^z)v7Vx~K6Hb#|tG+$~j~CT&6zy}}?T&pE8nk^3
z8@8UE4dR1w!MK)XQHvm?dRwXc|88iEeYZpO91vVq`<!{;p^^;4af%c#GKh55C6e>!
z>pheC)ets*B^uDJG!Lhiid529!d^Du$WL;t(R;k#B-H079*WdF_W(4UKCO+!ODhYE
zc2{E;5*(-Cu)LDl2d<0YVHFS1;EXR-%`^~ko^zpFqdNI{fKxwX1XF-2OHfZU-qpM?
z<`cZ|W~}<r9xJXr1HVFMLTWf$#!4i4YKmhXT2v5$JWqUF{LK>Uu;c9t^U}ZZXL-JP
z&k@NQ8+%Z`zO3>mQKa=mE$V5%3Lb>n@Q)+5AffUST564I2eMS=2BgL!4)7gm!AB^A
zbxi9ZQ;_v`vi9-0);wvG?x@mehc@K?2&2Y!VQwLkk_cATX1QUKne-N|8cftWOIcEW
zO=Wh&#ZCm9nzv&F`0lD{bo0NPq9kyK5l~zFelJ9pL-i9?mK3-P>p*QPMz?Ra3raT|
zKN{1F90{je-HmnHs2W)D9&#=iYr!FO#&tW{Q8zibH*1xGt8*ur+H>95ntOxz>w8l9
zvk(n&Fg-T5q-Qe%3HBm|*lB>J=lTrWdo*%%jh+3u0k*i$N+fXThTGiDhY8pNvv-zY
zW`UtIp(WM{K}eio$e@YhxG8&>L<r;R2bUBXJcTvu>dL4U+36U?M(r1YEz6*ohyY51
zdu^xHZ@^K(NJ&!a`UJfGc&8(;-o@=UBj;6n!@)`<l8t2<qg*1o$ScBlWzN>c3N9+@
zB;9U17%GKzQ%lR|pqB;-OlMStAy*c01qrV0LBNqfT&DeG{7mI59mKOLj9CRE(%n!M
zv3x}q{}5*!b|s`hKxw^+uA?wOdi}w0D>y{ObkYI%mf*O8&hoC)mWL%%^W7IWW#nqr
z!8II%`(NAPb-Ly!<0BHV!{8$f-|20i*S#_jWVL3x2;rMTuX<moZ(6t;+bxg<VDyxv
zU%tR4II?sh{O0zoCarkg@d~?0q$Bp?F%n{8ihFH6J#}0u%r`@)cf8(1EZSnNvou&k
z&AfSTjI`)0p$>s;j%qICw8hXlrU<^G+m8I_J|82V)Jgd8><G$mNT${E+You_a+6_p
z;u+#kzwb~f@;WIGS%Qmndt0FbkM|yw^x=txYFU-f^Ce6QVs5HLiw`EH8-SnPF8Sci
zS@ohkS6q4r6=3{v45wEiPUmM<6NIB?7OxfHQ6MOjS=1Hy;Re((;t}qp$K(Fx-r#qc
zOmn;)JSdT=N?;gR7?V>6%dVmh?ZUOaG#r>}jxX8wF!0K?^<I2biDW3{Yww2u+<z`U
z%LDns^-8ZOdVn(Ou&Z$7VW!C&VTsGOc>whP#K&m&_6FO&nu<UwsXX@y_i^y($U~$r
zSi}-%HCcd>XFfj$42=#p_@KKVMO_F`t-YXSZtYKQ=(Snd?3n}LDGk?bW=g6&#~`@X
zzmJqB1$pfu<FK8Ah%LFY)BjaV01R*nZvXz?!3;?L_5g^n@tO8w9hB#MFWmQsfa_+S
zAL?oM94l4^J2ssB0=9j;|0?(&#Ba4fr&Tn(riy@Kcr_{wixYAj)^%MhD4nLpb0^ry
z6uRkxOZH+%^+2DY#{x;ZXWa=&b-G^SvADkVgY~dRmofc<18`X*6LI*ESI3@Wa{emj
zWwoaiWW|vXe0uRH7;dqYrOdkV_D6n5oUTs6E$t9x4#1nQ>oW@(uC^R2;ULGrWEctz
zS^Q7uC~8YlO2cA@z#BLyZ^Nu(jDH(?8Xlt*3@1Uhe56RjD>8*sECEu3v0H4n!Kh>j
z$n$!So-O{f3b^Y_2?uW-t6cM=(+SuygKOOkmKEDNlx4y|lus2v7Z0oGd+P5Weu|8q
z5FFA<Dl&=7njY<j3WW|FH4sf!M!ai(dx`vQDQ(g|@Tq>2%|@|bT45`AVAtJJhnpSI
zUx5q?eUg69KZMLIJP9)}^t<{?ioygEYx%qQ;;<U8jaM~-NEK8kBQR6k^KT-nsRL*W
z=aaBl<#20OVgfF99y~33=hp|5D}&0yag;_;(2}w6;#X5(X?G7|+&tngJyS^d+k5p?
z6V}F=Cd5G`?d-4o#I_p0ZGQ*1LRK3AHA;x}StTwudONQ^@NA!3S0jm*RRRkVvo8Bk
ziG^Zyu?>+$wv$sbIH7Ng|1qEQp(OD}irNU4IJ@5fO?MW)_7JM#yvm`;SVq({iEFm^
zMeEk{lmiVggnx;;)f!1|k@etCy&As5xAmm(;Wc3=?~sJ89K3hhNNwrhhMBZ#xjxB-
zs}}+q@+$t<6pCo2T;9e2QEf{*Rh#yz0kI&PMR%sZammy;N-T41$tCD-x2SP_zP+i=
zi$tFJpNE-Ue?_)#DvBB7<c(8P{38*esQ0nmz3RMXW-{*ozGOVJ4i_+O^af0c(a1ul
zWVzcttt~oXp2^*wxx=F39`IH|VM-p5ah^lX&g%s~FDaBZF^G82ohudIGTX3#7!!{5
zccCxGTh&K$<i%)<FF~+9<bS!p$f@8TSL^uAyH}GiYWM}o^rMy*_3&pVO6Lr$E@$ze
zIgwf6^suvDXAQ~z8NP)U{tECK1sz-3s*w=3Zu>@J1-`mc5UImDOS(w4f^6>^@qZ*s
zaMFc7gN48uHFzM&$T&&FI00r8r68%imb<0B<nn*5?gffI9(0@J(;hANYn$`U>Kqa)
z^>dahdbZd@kbV776*E`h!=Rur6oz>Y_72hoH;Z-)HXjuZ4LOMh2ESGv5K-H%h(~b=
zzKr5>9nOXvA~l;0t*1Hf=pJT>X$=nB1VBI0xa2}*Oj2;2dA#ol3BJ;R1gu)|3Wfdr
zY@DTb49X1U)(3^#@;vI87U&FNt-nRWdx<$tP$PqLV%SPaM3kjC_Z+V%-mm(1bMR{N
z(eCN8k-T9E*VBU%kmbW~aL?m25wSo?Th7#7uL!lxGF3>xTJOBLf1$drYDmqdlH=hC
zIZpZaT=Yj@I?#|OxIhrvMNtoNz$k&CpNfjf*{dg_Tb8Ouj_?m`)@Nks3YKU(SU*dg
zytH0;o{58m7gN|ttR#lkwew#5>Jsix{HRg?E@rHbC`#yGNnCxG)&0SASfo|rhO!r0
zVxV7fVB9)pU>_8|Jha__f;wbJ-B221%A|kYMNK{*iiNGYWdcReAtDs4`BBlIhE@Q{
zzc$3KSX!kKvt}4BMXUkhq^V$orNR9s;vo2ZP)=@hs|uNuo$aC@F%QVrb>QR>&=C)?
zV2Rk^OtE<xj(3=#F5vUXnRvA1)ZMFcE~Er6(FV)AENYY~%wWr>^_6USHAo*QlD^q;
zM~@$}kaoCgCaJ<)1XP~M^UH11T77nY?R*=ZPUJJJf`KiONvSfJ3|)4BY%85nIj`CD
zk3kAp!ZCAwXNwRBx-tvrI_D4E8bUDH*?~DA5b?Mc_gY^7_GS`&ea~?>YFJqJSngFA
z)IhfjA6oMSR%r!oz@f>DzU8)rsQZ32i3FvBQ<cX|?{cO+%hitthoUB^GcDYC|K>_)
zB0u*!u&J3j-r5C6#lBsg&x;I0O$Swcf>|tZr0JE1TPGsv;dp@HEeeWhBG|;(@}Md)
zLijzh?$i?E?3F>>=&S5#T(s53{BL#8C}}*CR+L{>Z^hQVEPY@ihLKt|`D;Ih{sqYh
zi-w~GKyO{l9}A;2N9X_Qb+R#w7ge?!vS;!{O@@PAB=hrCj@hiP-<*`JGYyi!+8Ah^
zksZkL;;Ds3waXQCihzc20)L~j-$Hae4_Nw}p4;C-J_YwZ(7gmBoi83a3p{$?Nl*qC
z9*9(&5zlv)nF!hbXW;*u-RtV_2o^Igs?+SQl=k=GEPj7TcYyf$*Z_L;{vUsG&aHo=
zK4jEJ03>K6@wneHPLj8!zeY`STTVD;40&Lwz>2)SZ%1@|^X7s{L#8EEyhtP|9f#8m
z_F6Vd0G+YoiCKnZ&TT;o79cH|#)a2le6S>#_pF=WNO>%Pfh{dg{YcMZW!ZjU^2a+j
zh0+4ZrsRs;SSGMuZ<U3j6fYzk+!eSTKir@br|5K{E>yfgD4560yal6-{m4&~#)uS@
z9UoYakt`+jM-&rF4~UCu4QWK*F6C<8E>?ic;MGl<#$}K{{-+PvRs7WpTQ;K#hz2Yz
zD!#IR`6XA}RciH|we0}wKXYsfq9?PoY1kVJ?<&A;Tmy=0pD$?8>|NqL(Dv10FJPB?
zzen<bF^}kTnS>KLRapG81ZUpDE&_}w#pzPn8Ibr<sAdn(VJm|5+6dO;D5koP+>r+`
zmW|die5SzMI?vi#>VK#mDGhgHgykC55w%x=g6Kz%z`j_rl>+!PX=(5!jce|dcw(Ot
zLW~{WH(XXj-rT1jt}%ni0Vl0?P}lZ>uMh58x`7q2Re(&qmoj(qNnDedo0!o_wAUl|
z&u?-rBSkDVpU?bNDNywq*l1%Pg3k!m*px$aO!%tbxv~(hN8pmIZh<)!)A8e<LK^<l
z^r5EvUR>N&25g_aoh2Gr1S*{95j|%eU#iiIwI-gdz3PwLj^=Jc3rrMKKqyY{Tg9>k
z7swke2VbnT@}(D@AMAWkNmKcNmIXT!ll5hh<72D#B7_29w*gAwxS%25(?;*FJdtqE
zE|YbWNiF3B$>Jga{T&i0-f&3voIL`zz)pbrD}p-4qZ0Mn4K$FuESjx|)OkW-?kY!a
zXBhU79c5`psop?6EE%l$Ru>H^V3@-F%#?uy07(zN(jv*YYiF|&Jb+isNIhjFPCUG3
zLT*#xfK+m|#KOBp>citCN2C?D{HRcumJa!M`#It}KcqL{*raInE8J6l<5mUnsjED=
zxcF=p!l{ZP%%v8XKfLfgoqt9TK0=)o4gVsuiVaWbHt<<BlWFQ?U~%Eug>EKbR?<;7
z@LSz1_?zB${qv!Do)n9L!WDyGpXqd>IU$SSca|gsfP{<TrP4Xn<X?;<5{*J9)Omxz
z4N|~M-9F8cVH{BPNCB5u<c3|MEm^pXtP-a{%ogJ_wm_7?2P<qmYOq*h8konobhwY_
zx5;zFWgI<F?XoL{hyJZ*EAh)9b4EaKs9FB7{|AZwP;UPF@eJd8Cy4AnGXK8EHXY(-
zJF1fhHeq;8XKv{4_`)ocH8%5OWM>2u5cbwUpN+_R*1%h^ZP}*QRMs7w+4)mDzW&$J
zDq+ZQpM>-m-`=Z(Oyt}yg~cq7eblHlqh0vI1El#O+hT3tQs+D|0c7I_q(v))<pka6
ztRQP<s0WOP+y_^@Ggs}WVeEOO^<{Zms|yC$XW7BQA**Vcr-9EL{K>=Oi7>uO{W$IF
zdzsxk<?MJTeds)jiEs#+nN#`^N-+53;{1?)!>9Y<#bB~UBWgUXo-Zry-G~Z7vk~?Q
z9oNZ$mF`W}ns=IFp~D&bN|ki;vfUMZFHYSQJ<3!PV#Yp)AVe-H5UJ+9P>BO%$}1Xi
z_iH$Z#n!<s(enGtc;YsFLN9x4m4Ii!G~UhRmQ$m6fC<`ft9PRjW_*`vxpbJ@c#@gv
z@EurR`U)2Loeri56QC9$4M7kB9J)B?*lk^610-vN+(R`PHmSuhQ%w7b$JKYh1-~+N
zyH<C;t3Qa8ZnxPNafAtR-fazl({49z%&me^LfY4R^$7Yh%_n!#pab@m-`QD@KjuX_
zWSlrG&A>uV#Y(=Udou3FtqbxRp2LL5$*?7C7mMV}7G+#fsGU080)AuFwfj9du!k8h
z&=KPN>e+;O&jeZENlb9q+G}CvHJN8ul1D9tINt8E{IxvyWHPB@RWrrsO8A)LMlMmV
zv0^I&Zdi$n5UL|bd$ja{p1bNtKc)n6ZC)q7&Rul7BYX=!lGWas9Se<_GP@({zj>=k
zRruEW9bio7PXSmBZ43r9AqnO_Xs>)GjvMD(qGS1``qYZ_Au2|iDqJUfv%@>9#AVeZ
z*G|z?Q=Z@fVIzQ2Sd%9oV|trGiv(dg5+d^|r|_zbzljjJ(KCXJnx@~IyK0Rm(gyUt
z{Ipk8(@ShAi2FBTd%}w)C9u4!>}{Q#c0}0$9x^<~{IdLTdqGe?O((e{DrhU(+?PA|
zIzhm{S3s9n*$;IOi>aI5LK3maW+}_X2;&rE-h%u^Uj|@vlA3^3Q0k-oQE#n#3KJ`*
zpPCd!`V;*SBVo$(3bLETaa{G+X9@l?$JKWR?B66!CH1s&owI1ls92_QsxYTiyQVP>
zym65Zd0Pt7JCbFJS#^!ETfTs-i4{!M=6d@7Ljie?D@`FZL2t$qz$p^Sgwd<x)j|;>
zHZisp4ae|R`gaA#+vXdirt+h!j2ZnQwbjF>_<=yNgq&-rys@XqEd4L=y?)GBMZ$L0
zVjdZ{Vq7kP+}Ec<YJyI$pBH4cEVSJyY=7R~XP3Oeys^ho+M#X0dO~b@jZV!EXS?Bm
zso^>v<B7R#2$CYYQCLopB*2I?>PjT-$Gv#U{)$7fFuRXswJ;J?J=R~n78Ao3P~H*=
z$YbX3liHB8jt-@x79r0E-HXhz8Eui<mTdSO{bsjV`UeUgD)LIA^fdd!Zo2g8l&ND$
z!%MH@A&EE@Ueiu+RfWka05$5Fh=ItUH`Y{7&~G=ncTQ<PE!d9u@Xzk#c(OuIsO!#~
za~Ahb=uCOh#$O?>jolK@?p^gPAJ}Oc9@(+@5HdodoWpR7Ool&ID9vV6g(wY06x=l&
zcffo+5D~`ve|@9fXZX}Ibe2UEdyo}mH0pSTMMMpl=DqWR7XMQm5l>K^ZH$;PK>;sk
zqy2$&D(uCs`cbToa-N;md`gOq7^nz)uE?HH$N})%BZI^39<y8=mUPt~&WJ65at*>(
z%6-S@IYLuOu-P8NO<6My849hVUQKJTcNcqZI08;ppF*ulZ8CVCed#>25@o*5-gi-8
zgL|lenz^~heB-M`|NT9m&-)_UQ*15-ShfGupNM}rZw<&M(~o~zek;C#Hpm>!<*!s~
zE39H-)$^%#*mARVjZPmmCnPtbA%Gb3E$^=8lU+Xld!~vybhV;z&!1B`!2b1K|B*9W
zZPx-)5bZCsN?yBkA}(&3+ffSZlgYA=bbPp^t2Q}*O=dXxXfFN^4jS~Fx?>=SXl8CN
z`aKDDXn+D!sgZo=FuU<EencKT*$bi4oH5K6QULnS`po2kuKmogc!K-BY>XNy7BSD=
zMahj^>x%1wODb|R#Jpr^_x-3C?6Hf?COlE|jBtAbs&ua^e_9#LKu+hIVaAQk#fr(h
zJy#R^j1*KGQK_pn1KBWxRGFVQ8+~RMm+3b6iZRGM+roQ4!PfdiheJcHzUWc2F+zvv
z4Aw#wpVw^<LW?3wx{RI-H!R8mRGO}!|9^~+%q~WBKbm_@P5<_t@{Z#&(I%7)#0BF#
zzpWS8G^t(Q#TVgUQG$SP(TxNt9}WmZj=3}}aAVEn{7LtEvfIjM7uv#fKoyxcJ2JO=
zyJ~@wDsJ1aiq%$1IIxsgG))+W_#DNj9}(162IeOKI$2oQ693W3gt21~+t$mF`XO!b
z1Y5s<g?2ZU7oTyyo362YG3}#&Ax(N<<Z5cfqIt*_JV?3?t^``W4aA7kX1FMT%GR0*
z8~jG4TWV7X-L(jCu-|F-Z%p|RD3igreA{M|8O>xED*H1`f&^8H$ZP&?GdWSOa98UG
zD?kHMvi@F1#1(1en{E10!(2>}NtP!wnTlLpT)l453}L*;9iF#1U|vyC(<awd2Xz8Y
zVCh8Zv^3Y95Oe3XCMeDDnYs0SXDo+%)7IkML_Y5|z}W-_2+s9_<$YJ4#suc&5YH{b
zRw0fZ%6Y5>qPy;!m4nu}u^&X|JMT<vO3Cj)Gwt;J(A^)3u)0N!ZNzHDQc&rAtTpQa
zbr(2ukHur;Cyzh1Es9=Z(bQJKAeLGquQoN9*l{4p`ocUnkOCRP`6R$Qw;raSpz%<d
zYi6aOu#4H=>;@9SpG?XD$R@s?-;Q*Th4`x35lF2a=R;=bCP9^~se@KvpclN|6@G;6
z;Dps6EVu<M&*~iXWxvZWh(*)t^c}6KM4ynWQno(R4Ok1>#~=VkmVSNlft&L#)^MCn
zm|<9;l=+@dc+{i^2v_cepPRb}z%1{-+cSH6s5w*d$aM_A)ep*Ia+N}unQHH)GOo`!
zGW?CuO)K>9nucu`lD`F~(!BQ#8VMN0@gQCc`}Y~et?epsmr}NlDB5S6mykcB8&!&Y
z>~V^tg|er-DOBNlECPc2fk74l!LPBL7YeNH<))!LTg0GPjpx&^BepYpJeDshI*v_*
zdMr(iqtKjb%ekH+i)}$!G=~M21m=AF+H(uD)j<`N<#t7b5h+x{Q9{c98l&z8AbQj?
z8v%r8g>L=3yhU|&CnX}kZ>lLnL}kw+ir{v`gYDZm9d&lPa~(zyl?@%?Bt%oHkc=;m
zVz3~g`7!<FR@faa({<6RgUw0)##-X3aN1g0^!yTz{p2=Li#my!Z}F6|x~ZMDg65N?
zI2i0m92dU^f3dLNR=@K;X^I1rMRSYdkgZAwq!Qg+j^Z3-!=D7?<q58t=NM<-=8I@_
zx}Ldlq|Z+Qg%5<05Yt4Bjs7>KwmmI=4@*D%`=>v;blw~fGRz6f;*v~Ko=X=4So6#k
z3!5&@?f+~3i)}g7)ryunzFBMRc2nd@+KFc~wuvdmz&%)KE{UUj5I(UetAFwCTY+V{
zTLr##lxQx_53kBf6+_sTHrg2ZUXt3T$@yw@!yl=j?MXD%@8!j17r9oJtD+Py-r5Hy
zNd{d8b*y|RKYq%SD<b^RUSZUVFkU0|882}k8B2SZ{enYBbyRShZ=lWnr{EWj|F9xS
z&Dt6FpthTtVIHa@gL7LgDx~$3@cwjDhw4T~rPL{Aa`lQ(r6SZo>8{DkU>n-KuBgP0
zwk0>H542mbf@%_5a290IKAnn&D{DyEZYxdbPHH7euMyT5_EAXxMI*CGbvNE2*$!S>
z;{Ch*@Mgy1+eKdhPk@Asuqr1})#MGahDgSD4$AxMwtXWTycum9i3*yQ`fqRKq&iiK
zzB2Qmdd>?%q3zP(o={Xlv_H#Is|tO&5rbAIPQ*-N=PFLI)_^Zx*C}PH%TX#|@r=~V
zD(i4!F@jJ$p7J6OlisVd^=C-h4R<(Hcf>*rrXplBcBN)Ow;OgLix_w25)+15|HRFs
z@l0Rt{qYTF<!pxGSI@cMh$2O81Fm&!8!oH@_&W6Z-FTdlh<wUU#C$-EQ;Cyl-PPh3
zm`WmqoN&VN>~M^4q6->av7=3I$Jkd7=GM1=J}{qQcx|j{A7MZ7E$~GW3yrF-ztSlQ
zH!*^U7)O1f&*X{~DhN>oVW25+W6gc*`u;Tm=_Do_ec^j`5cySGJ{tO4u}T@NMDKIJ
z>j>ccal})xfcW((LY^e@cI#2W{cW$%3oDvR8*A;n-(IKEGm88i)uMpzYV^GFLd=-e
zx7s)?T9*Z<jnagj0ESlVzZOQH8ttBrABx%O_cJzeX@lPOkX|HUc-Iq0Es+zSnOlHR
zHfAx3i$hkf^T8fxkI5?Tl%6F1IY`oLRuqtWa?>&T8-`nJJy50v*Gvj!sq*0%_`Yma
z7Owc)80~GDD*m-@e9R7d;Fj+@!sxfR;UFLSedP@oep<0J5n`&~-am=(5Je-S(}a4y
z#jbZxO_v_&97X_1KnT4X%JjLm%iK-C!FPRhMbva9Q(*e-oyu0RN;dj*ocedhcYX?A
zgC44CvO`249nS?gGVAEJrT7-&-pAY2SSpEHU4DOrBl0nG+yziR<h#+XeSlT&E*>yM
zz!bEaPxeL&Vj-34ZN`)D`V+8)r0Z6__+PR*JKLaXV$h3f&ow!QLi_>{E!Fls>#!RT
z-SuhNO=iHn5sJ;W5cM+*bRQeKK7?Z{xj<OnBp?hl0ZBUZx)MeTWM{){54N*_sOC)K
zACV}K|6R!<bPm^ROG%T%t*abKlgrkq%Jvu32k=zXZ=O9RKL$dw$$STc*aGvmGPcm}
zq8rd=Cm9-<|HBgEC-EGmI`}b!ef2CKVWfanPyDIzm_fK-^l_Iz;LdOGF7qj)1<VL8
z47na?#gWGQU$zN>4k$O)Y+J+dS9pnexuJ`i760Ed>?Tx0aqm^pT^Louc}NE6+{8;*
zzY$Zj+U*?udmn0^E_MzH%eGWw66wd@+EtC*_QVyG?xxJBzGDxQFSIL&7q&T5-Gtmb
zF+BOG+h!@?3m5%$BN_L)*?;odRvJk?r_QUcMVF>9Q2~b6-^%(=ExxTIc+7|}M#`i0
zuP3^Gc0IyN$FYowAnOT>O=^zdY3{TB)!XD@>?F7{)hobv&y}N}T#mOJ_i<t&cUTRn
zPdD-};-!~=Xh?Q2Ux%AL9Ll>n*ChIWVOrB0SKwNI$n`FqY)oC4DT;IO^3j<_gr?nn
z0-?^aEHPwqpcu3yRzG{C1JxFlm;ttUsgh^$<qR&DJJzHSFMVXzB*HmX>dAfg3CDNe
zdve}>Rq{oEc6D!=5QcKtYA3JDOB;;SMJ}7lQi%87RhXUgWbTfbiQqxRL)6Xah+2u8
z{o0fG=7!p-jo0j}#<8y#Z=KU5W3t~QHKijHM@Tr?KfU*3(YVAt<REORQ;*oHttrb-
z;l=C1lJ{sSbJXRiJb6@xT<#Xmof0(RCPw^Sd4QJ8>J-V%@NR~sLAI#L29@dLnbhZB
z8%23!YbNa0nc$6hRX+RPn%h%adczfjYQ~MeqpA5IZ^^H$?3i((_<@9;0*DswmIbF?
zM~_bjKKSVlEZIq`7}sbL2k%BcMKoYIgyiXqq-5cH_y$_{qrg3#_dYbsnqqY!DB%b}
zaOsYt5xHbe;>yLP#7UxBV1T!JB4Nl4cN#430&AbIGx<GxZUfd5Ms+9J&4uY-3|7LI
z$|)B`HcB%onbeTOA*rt_O(-?P<TAXraWldv=K~O>hL-=kvg&5MBYa!TuFX=sOJiGf
z*@Fl(bqy;SjcvN``!p%iQCU~bm3I0w*<b=e6)#pn!M~0K3?18990Z#7&w+f`Y~g!e
z!Lc447LLTNw&W5nv5ru1G>zIZt*)OJbu5SfOp+@USs!8{jrY8ssA;vLiqGp6;rrlx
z=;M16ojsS-r+0Qk-Yk9B^V_NN))dPbo2+gWtvZFW08DNp{5R~Tj1keHI6|p@zjdzG
z>|8TdfVSX+4A?}Kl=660x+Wy4;Gr50Nt06K=jUIYzKG<cdY{TbRkavSeZC<tiII4M
zo+qrvpe&Bm5ukGWOeMr@)EQBcqWu6orJ5C2dll>gRsPslk!I3B&G#RRnyU>vE!Cy}
zAX&6kIaqk2y>4W|rPrgD5oRhyCEM=R)aPR#l!E~t#kbJuTsf%aCG((PgMAP-OsX>7
zXo8)ZSTPxXdZc_#*60sRl6Dh+yU2PL&T$9`#<~oC@x|XI4oi}=(%m$7R(LfgM>PNw
z_5<;&)VNQ6Q{;r(-MgaFqjdg71Ko6PLZ*Kdciw;%P=<iAo=fWM1FTab$}5!@@}1Br
z6iXZ86i_`=_P$i~&KG#^9B!|#IHRFTLFhmifBi(qi~hWeoxMD-n2Ne87tLcdEcM?_
z2&hBS{e?$c*^1R;hBxgbVPLI1u&n%YI-wu64UAr&Zg5UaQSBu}e61yLGQ6_H#d_`4
zAUTyEcM;$eIBV$1Ce&XsR|~4r@mKTEO(i_}NPE-78Q(u)`RvRalcn$c`%AZ611LkA
z_H^Q`{2a>;IbONBx!{188pa^(j7l*9{%}~JORO5b<^=rvU@m>%)Hck}TFQ_dR1*)i
z{D29Z-niVO2%}r#P!?yx?@jkX%mE5VOt1Ph4GO+?eOT~>CxyAPH0Igm>yI-Gs!F*P
zeFJ}>rhrK)$>6fw>}&3>yZiBYnIrx${4Wxd;YD}b8@@4rhOJV)bcr&V+yDQ-;GzJH
zP4S?I`-=STO(Nf)ayPG(o)5A1(-3Y(aQ-Y*J>|U$c`fU+{uf)@9T0B-F)`j*HO1Mg
z{<s4YY(V@UtG;iZj4+iDU;mVDONeavRajy-U#Gqp9(1-&3G(>>4If%>6oo6*_n657
zrYXxj;n7k+_VN`u4X8g-f_b=YeurGicsBVZOEV5(G8BF1j2V?2doSWhR&VmK8iP6R
z>0A|}`9kzAW}^N2X9f^;wyE(^Vcuvt4Ln{g<msC0l)4HQ?7bzf-j2N84lVZM@X|qo
ztn2$;`I5yyzS%qo#`Q_Z>Dx;Wfyw2odcNvXb5Vy<aphjZ2yU0-fNk>=#Uj1>kn5EB
zff{^Y&v#bAAH)~)IIv(&KHiGp5$duxygxP^zMCY5o1&?oKODDy`jz2CZq_)n7E+s;
z<_lr5eRN@;jKC>rMGm+t=ogM@&SSxm@f4_1IQSLpf$7y$^sK{KoZ4YDM#d)B`sW4T
zBIHLEO(}?WeiJ|np;V4mMw9|@IXy)3WmuVbaZ(#a)u?bks2VRc=YDHjc9<84+}pUI
zmI8V}QI=I#Vg4F4Rchrv9a+9;2A{)=!&SIU5>~=%U$#=Jh_~`y-?Nf!`GcKe$3%A!
z8gKuUBP{ld2OHUL(*3z8cyGL8{7l<#b>grHoE!`f>8(oI_ft0x8VmpY)A^r;oxkd4
zHAhabxx~d9D-}!Z#hRrApRqj4Bo<Xx*|}$7a_<sbns4*hyCmYeHqz{9p(CfEN$cd2
zcrX&eK}_V9E7olH>YBj{7YHfju=jXI3!k({aU0=K$}yvWfbl(Cby_W7xxqHP(tscZ
z*C7(HC4No6n62MB&1k6msT+0E&olGj&M(x6wB1Fi^dU1l0b{<N>VceON0jw~i&*BL
z5|x&3HRb%)o1>EPP8`2`#2uV#md|G$b2sISx-ZH+oS6;#uKy~S(jf+FcqDLhWqlFg
zb_+K6QSmSS;e7Pe8WjQV+ckuX-I^iCgWY`kq#sHGf@a6xPF@umGf+&Z1lUj}-2&*H
z!)kIMuY?Nnl}re#{w>@soA~n{H#}VL*WAjMhh=qbS;4bOcwmm%2JxLbMT=ZZ&-znV
z;=fRDvhE_XRX^t5oLPYf?C0407@Fd#pb@9ujD$j2Jsf<xf}C{UhGlnCmo(g1%OLES
zRNRqSN8UhjApQXh2v}Cy>*ov&cs_`eBdDUF8(O@cRrst$yORH=1?XI7oRZ%*mS=|p
zHdQia({y$n$IJjaTV5_rL0AZR(O|U-#k3cAwLFYqOwHo33(YcB7_`2-LTc{pZX~n&
zv(St6(pSWzg5$qOnW~?Fw*zb;=X6%FV8|3qqiK(n-QBr0+%VfjGd_0Z{pOD9&VTW-
zIoun{AV{VwLvbtJs=V~r&LzU}ga{{KJ@{?6RvoHm3fS0sA-kGI(PnSKxF<Z>N&B|B
zQmn>mc4BcB>D(mxoYnhWvh9qN)h>!dz8bCAqf_9phfIR{0It*Mx4KG6zr}MX!J<Kt
z<uvQ6Jah?K{)aE5S-Ea<*6yR!5QaQhHiHv;J^>9j8}VG#oc%b-?eygt4c3+D^Qce+
zF?Ic%>o?OpQdgmB>~F_GtL(uL16a~D<QFC8*2Y;d74Jvqm!uZSL<Y^-2&+B83A`oD
zUFjCK>uF&|TQoZ1x8FVPoyLFmPh;p_NS__jQAIC@mS9wPxJkQACqS$B|A~2GrM#*e
zmc9}x7iTF(E8dt`rz-c#Z$6xC8GzKJsH+mkhXEy3g`%CSx|q)fLcUqL*9-J@+#5RW
zh};}JC*K`1Q~ABwThl>L;_Yc4Iz1sc0*t~SzS0(Y{1u5luB*`he(V%4k=SE9bSAVK
zI^T4I?nfsL@CLl_=({t0)FtG>fbwtE_*04&Lfbj<XX&tIDb9dMbK^*nC6iq1uCwcS
zpTelQs^!5qYGE!om1hKeJ(1Kd>rl>xGHj*?wS#CyB<UewJ&n%p*|m%t6@<Sa`oJr+
z$5ayuluk7u=W-mldIw_MW<o9Jp*S5AqVBg1ss?_+sVm?*1(PN=FjY+!!-!fUuCg||
zouDnt{(X%qSCTkFtGEa%U!C-_Zlcvb<FSXocy6Hu@L4C;%o>tFUG@IVvO00m;<~yb
zTuX>P-R@kej&Xk_;3l~lKMcpc8JM)V!awcDs79=_36A?cPoH-QXAE-ZC8Bm@;6E`g
zQ2JNVkH4aJ&Woq`2h4{7G$+bZs)u_j1bb*YwYG+liMp5cuLK~<1<ust;rF6|1|(j|
zqO-j{KFG1l=e*3FnB>Spm+`OF=$g)2b3skB-Ka=zyu65_6x408Z61eV3F<V$I?oTr
zigV0XSaMzPbWU`xINhbiXF%=aPwBx>jRl>!>zEzI-j{Br)5-xP_V4^u+5PN>3xE(S
z|Ihhghxq`L5`-kLW9i76+3cDd>Vnp7_EOw(|H#7`BFWyx+ygdygvQXE`4CeJ5!V*|
ztRKHE8-5%iGH&+SGHS`k{^Ur3q1j*C9BXxfYy3zgy%BItz{~LwaufaW66<X#o^4s`
zGch~Op%+kTMV#g{bpBIpS_znZNkyPU3U2-k4I|zKX6!BU$B13&iOeS8YXOm~Z6HfE
zAF>ces^-(q1vWTvFaaJI<kAl(*=FX;4u2@{Q5b@VQ~jkVg^e^}|GXH_8RD!oqgd4y
zRYZYzxu)ogN)5zo*N8^klGP21-LQ!5UdjL~EzSbO*?(XHun`|C^UzH0>>W!cJI;n%
z5`puzR&*W4=J54?$uGlpBJa!;0013`Rowq=AZ8}fSihAJlMISz)BYY+$p;W(|M0tj
zN|ece!0^pDqx`vEp7;O%H7G`6qa;Q>>Puak5hzZGBf&QFjf5SAg+ZR<SbG1d=oJ2m
ze~+|~p>H?7x@F`LdE$(>?A65>mVdkBDz)s|U;a(HTt46#!DNI<rBH&HwS*4&nQX80
z)9ol~!tXchJ@c{=uboCGy?hoIgGg>|-*t(K&yXF!sZde`akmN#i8*i;s1cXXvTT5-
zC_j9cr?g+w1k9gpj1-ntNv&9T2^eiFN-lmv{sZz{rC!ZA?nn-=e_(P^>|XZx#|W`C
zwpa6tlQ`863s>y@P+!pwjAQPGT>2Y>1o?*^Fa7Y0)P?|W?(=UDu*BCQnB0rN<Jj(%
zA@6)&I5WF=Z7$IsC}2>Jj0V~8Ul>b_iU)C99MQJw%$FlnpzqMd$HN8%SAHg8HGA-l
zX5bn|DH8*%868AFNI&Eker$aB?*Zvp(=fYlqd7`KOZHjYAZoA~f)#GAzVFYQFuiye
zv!8BQly3@C&bpC}o_Dx1z7a$Yr5)A|tR8#0I&#_GKsOI%hwhl^`uTDazA!8-8;oxh
zTCr&jLT)sdZijmfP2o2vEY3D54eA!Mfzx)tN5y=E;g<AF>LS>h-Qa8fI#goHxzOa)
z`SSk@XDKXxQ$T{TAg5C(2F#1KtYTudvfSpl|L%z1S^Xe{QirtQSi#cznuQIqmZ5)%
zj-<~{is|M-2b1Z^p_Okz=M!26{a9}0?^x5Wif+JQRmG6p7Zy!4(IJT9ySEBb|2d-{
z=e@kiDXQ`YVcglYtl?8tMvfclun*pCnqaqkIpXLprfV2c4p3KtcVd1sO4D5fM;0G4
z$yf|;?7UK3$}62+fTp_+-4~5^eJ-c0o`#>?n{u4P6$s5#uE^(_RytK={S!Ik_6}bN
z_@`IR6`bnKg9n!r2$7wfvn$d=w*jHHRN?GnTBiV~PnAAoOOc~DSv1#EUeib@YUl{<
z9XG}6H5ew8$mltP-xqg*LpGbbc6p)-LCUs2NszKsNQ3>})52H8(AR_=GcI|$id6DS
zcLu%r5j<Dqp}f3e<uFMNWC%kWNVHIPWhZKGBEF^anpP}3MErl5KS&u^*W$=`w!8kA
z44~krl}+F9dXYVvNh+%K$)2~EDCI5hEy!K(O;Ww$>0tup!0pJ^KhCwzbO2p+f@;#A
z;sQ4=!#2mxRGrH3Gl_q<^)X}a)ra)8R|zGtx9&XKNB+u?$(mE%;2P){1QDq<8_k0`
zFlg)X=*4`YMtTGv9<pZR^Dr}@NAxL}wi7yLzM;(|i=$Lwhz?{6m9{pRApS!pbOUBV
z!pzR30Od3zx4fj4i)!@+AJHs*#PR^ldRCpvQ|oQNT7)?2?yQwGi79pcxq+4J(m1N)
z(mGGYjY@eVV+BR_{wxaq@w4|jF&ac_2ObVNVSH8ggS2FDdTY0ex1fcZ<ZjiZwy}kh
zlB|*TL10qYpioemD@C$;pQXwan;65{@DT-059q5AN*@cAX~Vv!f!RXKOW>fmt4`sB
zRtrJBF~1s{M)_zGHA>unxHN3vyvo!XN%NnJkT?iub9<wo1+|U%J<`1Ot}<gAj>%>R
z%e+cq?&;4sKZh{EOI=d*B9;oy1v2sGcR^UI<K5%vXG}pm1LD*smZ&n*cghMqpIRtX
zRLH{qu})g4HYrShKWh)=_8SaEObrr*4hV?SnmyQ!+<@Z01aSy4r^$ghfPLcbq=hqP
zs=<`N`A<V_8jQ@w^KsHX060L$zv;m-<}2E~Ib-Jy+Y78Oica3=<@n{Vor%&1HgVqK
zA~2DC%i4YeAqy3haL3iyp-jjaz8#LdHbpBt=l+lQjyO!_ptB*`QWo(ouQC9<xGcQK
z1Uyestbzs0Pg6(jvx7_pN>QXMsj?aZemZO0K?i&&N?3>2ReNE5l_hE+ZqewewqNc~
zEKQ?Tt2_Q@=Cvfl57Tu4%Z-woTd$s}vXjXq@#_h<Wkp;^+i*Z(L4f}6c-yepl!gYD
z821%SSlD7Wu}31z31d<!Ca{W6A(XBE`ZRWDWa({3HRD9^4j>7*O57_m_7~C|1PwFx
z=HluX2Gz=V;qav@QK0+BQb?j0_ITA5K<!=PgV-JW<@>nt;B($1{&*xiQ;>g4;x^_f
z5{TMFsZ)=}YD4cN#`g8<3}2x&bN6BpN0(9M<j_x$*fPj8UKe{&h_ObqeW!7`03>MM
zr|r#k&njJDyS9QwEEiQR8?7tSA}W;m51FnF6!iC25Ue+Sb_qsL1Wzgsazr~KY23>a
z!Zjt^Eu1oP{*Hf6nxi@Cpxv1eQfFCuw2N)(;E=Ko=53ol*a7|$2JHFI-B8g{WZ(&h
z=nNo^#%AwLzHSbvud54fq8CS_ZxuGeCLDXpd_J=Gnm`(8n&<BC>ZHE>KCF44By^i<
zpbA&A6x4OXUJ_4ktIc20LwVc>e1MbMcr;7#o|ox9kv=pypl5^duPvBaPubdIU(ZT@
zl6j-vWh6fV7$TyOec%7M*^(hTS-b{0jhH1k`A!OnnF&rNX3m*%xqD36fa(X(-$?qN
zy@9T&)EU#U8=M5ra!4hKL=0xahyu#fIpj#|Ou=Mya(SLIF*#I0UAM=eLKmxHf&#RJ
z-KG7YyQDY$XJ*AZIx4$kUhnRScu5=Acr^9zjf_PEAekL>_u1v^XqcF7AZgg=ut%Js
z1Vx7Ra7U_85mRRLzBPE<IA#J2cSj&2{*4#$MKc2OW{%9rE8*uevA54L$W*DAFYV@a
zD9~rYYMwJRUHko;DTSL?Q&y4AC?@S&=!WFFIXz!rZ`9j#$^!ja>Ps``A?NO{2<Q&}
zJ%8`=`Yk^oYdA2zXAYpn`M#?DAk^Q>e^?R5Jtxb@c%rsEzel)|IA17Gd^BzLJ;lCn
z>MW+_2{u&C>s`e$WP+iP6odJOc9ioqK=qV_&<f~9UZJu_)W(kMng6nXiSSqOK0K%F
z*B~_JpfZ23WdRu~rk<p#drjsCsw}mSr%Y?681f1$loDJeoGz?|QUQX_m=T*!G(ZPg
z23VwZ#;KdQZ?u``tK-;`D8S<B#5XKIkIa+7(llJR<6x4xtUKjoWyq(8P_nBG3OrcS
zrF5}8>`uY^P*tA$y?5Ez(|%AE=$zLo<h`(R2{cha9SS^!i)I^D0gr{&60wii{C(@C
z1Q&+MS-Ft?D4A|6Xh`nO+B97I^I~agOhRi?GoH(Hfk~;VwXaDcm$V&hwlbTPNk623
z3;u=%?BB|~%l>uF^K?RI^eVK*Y_A3!({Od^diC_uSzzoVzWf%ljgs-jEBER-m-v#u
zhb?JNV6j@$_h*0I^t$|OD{NMWwq6@hX>9--$D|j4NVtZpIb#69D$0I5c}J|iTLK1T
zsLYN+aoxHOal#F}qfSEu<t^}5`F`UeFb9o*1+Y9@zCwZ=_WAI9(-$aA)BTjMJ@X!r
zP+RD?ZS@e};~4JW;o<k%0bvAw|L53s$5J3nA?eOnrWjx!{h+HpD=+~*Nun_TZV-eq
z=yLJ3UI?x#tcJ#r?g$tXvH6T%5Z88g-0h;U7@=%~)rTiTv^Du)TA!K3-|Zscat>L4
zmk}sIz^B;M1Bvr8#P2E2dvp3y#0TzfTqnm)s5>Pix2AN=4{*H$s)`rMbFUa&#2Ivc
z*w-mlU)t(YGyhLg#MA_|JTE!M>+-A(L$Kv+<Aq>!uq_jHB@C+NB^w0Q0Y;71N+mY6
z5heZZ?Z~aUL(q)cbQD!vl^`72+lY4R*AY$pOAY?pIku!L!P+u}1rcX=XXGZ^d6*0F
z1h_fgV9&p2$1w*egey{daok(MEe10sziG&Rf<@umDmY!QqC-l_@5xA%<a*XX#!<6}
zzWV4ywwc`~<-g(u)^EKd-|WraL_$dKLe$=E;=sL)cWeQEg=7)LG*l~iZ%}k!r#rhW
zh7_ofknINT-&i_PMWIO|qIN)iX1DQx)v4B9DXcJjKgkQ1+tzYmt+jsxu2i7xBZW#j
zA7-hhE>qM;q7XIW&R}TjO1w5p*;*Yk2Njapj0<Q0-aR3|0!73dMeLYZOK=BO<T4V0
z%S>~FdG8El!OBiZZRqHALuN)9UJ?rR4-?!L>xus5=Ih;yN3-H18H=uFlZnq)JVJZ5
z&!)(zL<(%fzn2F86!V95kru^Frb(lX;_>!8o2Kl!&D=TMnWqcF=fuoIVKP1CUCjxN
zDiB+EbLJC5-TxZz!uKnNDx)FPlfZg$-7%MEBG~xE_cu%_KJ+>@{16!z>7i+_+>a=^
z)*J<f(Ref?<LOGdBNLL!fNP|8<_2!NOi}5|nS+aWb}wfv3reYkgQCOIrhQ>r&WV#`
zo)<e*=_0fm%R8r|w?cPF$>_4C(ex)s5Y(@y<69hL6VnBbVNVgp&6mL8pc>7sD9n-K
z^(N>zluYJ|C%0WcJclrxc%l5kAO6Y^|Ioqu0E83W#5NcyBvgWVh&B)ng{aOkso~ls
zZn3dlr!as8a_=aa>83)tD`TqM<&*1LC*RN;@*~UKpJb<QYbRD3!+=h;GAwy-ot5dJ
zk<sB?9^yKkhAjt4x%OHg$RN9~zN;K+3{Z=4&~f+&ZZ}0(N58euuvuOffPmFag(taC
zq&}!<M@BKu`hM;!L4G*CMG5)h2feuOs{3*wbBvMk==MDa1|o0Ep&Ffhb2r^ih;!zI
zsc@0CvAHxX#wpKxcan8bcoE^2%;@tAI4g3@zNh#7^gjq$aAQ2U`n~4qc#?j`<Z>N*
z?+8khaBPZv7qn4QXY0kLvP2{_ED!}A@<r|4tR8vfW{XRw*vrd1Dd#@~TIB(^;wP+z
za!LSK7sz;^7#pUm1AwVm<T<J7C%zPL*a4D^^#+(zRk1wELXV}$7j=T9D6*O==8US@
zOZ~z?IZbE#zTF`%FtojK_sk|~3{a%P!mE&L?sjf{^xW|UkPx^Cq8Ng&lpQQ~>rOhP
zRHFF<Mf1{C;o#lP!F0I8jwd<vvq`I%VcYEXNE|_1YW=(~9=8s=OuzKfqQ}^FH>5k?
z{IoW`RDwQQkXJX2qv5gnXQSmxsv|qU-<7ASu|(|w>qN>f8c#_{;RqS(1bw80;>;Eh
zwWmUd7G!sdkyDoL)9H1m&4~W7Ix9=a#ebjjbHN54%f=*GwTTHfOJ9>2ar^Kwqxc}G
z9&oiP8C9xUX+FZ-Bj4e;*;F*d*<XH-tn=vR)M&rLJGfQNOdc$m;6$Z6!lRi%(8k&9
z2o8A730xFK22(22Y6t5GE#&<lSAci?6>G>b8m{sDZ37b%hf$+Tr&S)R?AE$)aBM_U
zL=cSheAoj>GO3R&#Ao#zy>+zxW%q$p-n3A#37<U{hVfKBX(=Da*wNe5zTEl)?L&)i
z`cxQC_yVa7I%v~IULJ`>UC7m=^5y0crjIE0C*-~orX;>Ud<%Xxn;j`eX$~sB>v%JB
zMCfho0Ygfrc2i$q;9W4{4+Ts8)hSAQ8mR-U{)DZe^%5Wh*=qNg%zNuhD*Q$_)}7PZ
zR&fXhlxG*9E}t3$Ym~>TQV~=rPjEZkTMC*-O^$yb8u^@}Ccu$AH~KgMO3zIXi#<f7
zVYm$nMbKx1)@K>1XrNY$B)l?yqPa|<A^-TxDpL;34EDJU=TU4FEx8je%m4os0*nbw
za#qyhQ<svmc^q@kvVPn!ztb4$b3hjNhr}V*bO5BVpSmSIj2Hu@nr?NKs*^u2$3DS+
z(6hog0>&?Vhou$dD%UZKGf^joyEGsDu);!KT#XfDi|UE6fB3X2HOh(QG+wag%XQ`f
zF{89pOps!g@2Jdx^fSAZgvurXXtO=%QOx3XkpxJ<;^D+kh}>%IRU4@-D9HCL#2+^=
z2foTY1&%02Qew@em*75xa1Ev%%7;sKgrQtpfmRX%)JY5rx~|1=k8_`AIZAaT*tkXR
zrnJr39oVYO1aJ`RO%D|)fqrKHx#H82(8K@ZjFVp*e8xsme|x2xp%&m0n(~WUnTg-?
zAJTkQ8PkyWH#ns0Z>|)YcNS<rjTNP_J|c<gkY049I0l3Vp;3c$5*|$<PPpE!<Jq)2
z$W8qVN!cCB?@?!Ke4<mXpscu|7vvIF@4Q)s;J0a#4oE(@G>ZA-Jz-{XNWni=V%w3h
z)IHjr!&L-+O)(wGcl<IL%`<;r3C~;76?;8tvu&+0!qS}o6QI51Cgc@X6$j=KAFIWN
zAh%0AtFEZ-Z3Vn_Sb{UTf%to1p?dr9S<Bd|w7U4`z$C(v(g1~35mPkg*ye#0yigv(
zapVRN6QmhcD!+M~8Ki{(T$(%b5+-|mNlWD&dVA2lk+jA^PJDU3DWZzXe<q|rl$aCJ
zFQ2C<_i!%tBscKibt%rt=bx80f%|eFZV5}DfH<)ZG(xn$k2(TR)=vX9OP{}h$nZCH
z7Jd~-@;N%xWHVUQ6scHe)Cg@Yygg8eMPK`!dFVBj9f*^a<^1uFn&Q0lxGonK8;O`9
z@6@}qADSGFmH%Fw3LrBVI8CE=Y_;Z`0??TLR-#ft@3Vbe>vyAo$uC$lgl6HT2VqF$
zx*}Xp@hBte4gWU3B5uhsFZ+!@jSK;N2d*IZeif(k0{Cue)^1>Gac{A87pSq5Klf!Z
zMxfLgw>OsaN)>_@TzFC;Yt2yk$QZ~oDJ(EW?yPt=r)P$UTHCMf><>)fFCxXjW!jg_
zRcyLI#;r6+T79X4Q39R2b@DThPEHAdarmQ6Nl>*ttUJtJ?AB=K8ui0@PjKAaq*8$R
zH~o~e@N>sY|C#Q;)d}d7_){ie6L^?lBzm(-*uc5ir7174HY5kG20XBv4FPxzirP!H
ziX@~?Q+oSgq)=RpI7Qcd_|Zys{@k|>FJ9+ph=af=kdGvS2_}iXXkg{W4(k$ys*Es1
zD0wr>R8po5Q8QZMEz18iNH9@uk85-wQU28JE~tPsja@=Ttaj8rI?R~slZ5t#2*jGv
zK=RK+I0ogL5b_4#_HGD#S#C1l#6g-7LpIoBm@9zWB!Q+T7d56y_eXuSMlIef;du4^
zA%y^usQ!kc7OqxW1<Bijz%!?f9%-}h9<D{-6T)Bzrk0~{5vk^5rDNd5y)vvzl3iks
zq%ek5Jp`5bYdHQ()~uKgV#Z=DEb&y?7|&65gUuU9E}lqx2q%(jRu}z~STN>szl*5#
zV{*tF6{LzC&b&1FbjHCGz{Fh_>*1WQGNLk(KpHE;s+TZX>Jjj!H5~?+!;iKv&qjEa
zf(SK8JZoE57@#G~MXTmY4C!&27Uh`bGYfAF35^BKMezQ6$(cTLWNDwE{8VbXSQ`;8
zf^@IAmJ%+(J{12r9z$Q3TS$H1o%WdL-uwVfk6>XxRq#Pz`Wc~648YVOD-6cxUMNOn
zh3pz>@!K_<PyR{Uht_)X_n*;953SegVcOBq*1aw9UtIdg*=2Je3o&AMb%MRSJ-`lz
zwIGIdB!|~S10HkRYIz`xN!aAdgR!;x^?sImTod}OchSG2ZWSv~&g&vo5%65Q?M@`;
zI!L-?3WCMS2bvXjgc@6_zWFDo1RXE;xvN#->$rhur|eR=w>9@a(e07JUj3XrJQR_s
zxe|&5z_nh`+^%z;@T^&5lpx4Q13&;O2^+)l|1UfK_%3I=3T7Kz_AQUh5JANz+pTGC
zX04E&uU>!bc45&T99RMI@WpW4X_JFEh1sZ<i5;d!IS`w#XTroRECbWQVXx=*N^uuU
zRrE}K?`s2-b*#{m8MX(+KE#3?f?##yrgyvi_9=&mv2kpKP`nY=V1Rjnr?Mz=->OZ~
zM8ZO|5L3>m`C%9$TE5DY2JJJ`pO-l|B|m(eA57E&yOx)R<2H17*QS&jWIpbR3Bj$}
zzdQAidYsxufo#gmdDYi<sa)SZlh}3+7~fuobk1hy^0mI<KmY%$ppuM}iWoBIlRWBw
zLbD0;C=bT7o!lZ><(1rj^2qS3@H5>NERC@=L!`giC?^yRH;|yuZk0#Cb{krl3#g)%
zphhZ%pE#(JeBC|)#kcz<ER2TYP^Oh3udJKxt&6{6IwmcO`|ai|pNGD&$L|?>gl;pH
zY1{wwg9tGyV$Dk6JN7&-m97$MT$aoiIS^`bygsJDxG~_=WN&W3De7I72SA&W;AR=U
zMuTalOv(xM#XSVMqm^seb{!@;@2$>47LS}Nf(2(WJfgnYXPxDv4%WR#RF~*kpbLeN
z>%5shYC7%0oPW%lk%eA*MjSrxOct|@gl`}n$B^X=a&A$5`9QbxuGQgcm0me|4`pP|
zsF3P;k|LN)F~?ZhXSY1D6uih0|Fs}XQQl5(0Ht<U2u||NNqTzVc@OzEpL@|bb&EpV
zT3+mg9R;<m1zxaJruCo+AF)Lvq1o;p<aIMeHl-8UdS9?7yFX+P>`1RK^^6kL^y@9O
zQXUA0J*{!~K3F^-lYD}m$7XQ^Z&zHwV{_wS)!x=<nQg{DR_cY+4M#VgkiL_2oxFvy
zAK1%*%|E`~%loHmkHS+9CRWgR?Adduuy-QlqXvlw1TddW5$&F56Un#k@(I6fq*G^|
zhybDFmwyr|tju~t=Pz)OUH3l&cqgd(J+qew(nRfvkMU%nd&|4Vf31j(9V^K3UX8wv
zH2KbZP16Rp$^X}xQE)mgxa?^DZ={M%4WmtK{y+xeIOW}YkS2d0ACj8lt9~wep7P#i
zSmmxbH4o|IOcW5^QY%jHYzCXQ)8+}-%^%>;S!y<69mQl=ZpCh!O(_Ho_mLeyBw&-b
zpR?Hy*8R)(Oa!a!A$?W1CN=x}BDlvNpnJbUT-;(B*o&lBqO>}?KdaNAm9wb1Yu)!L
z+o$u>9)?4|ovKVvN?&<H{v0(QV>8m4v2;PvTC{CCJyDHvYVmRAKR-M1mfs@Tb#$3{
zZT*~8lj_pzYY#|^>hHId%;7$?bmQE-q(H|V%0HF=bjeurpXJhmcfT!xpt%7y62xeA
z%s{_*=u`KHCo|pjLI4A_Uu=yF=^UAP8Uo12)_l!9zgCJYtW9Uc&;RL1J3q3A6-v6Y
zwVu2G>O1Ccx1-J~J<jKfefTnVF>e&j7f}x;)OT?%=+d(tTFbt_AfO)f8QE|DBw$Su
zkXq|P^h@eJlA*1%pk%Mx*y3L}YpmD?s1=ttPt0gDVe#z`g)H`F-t!HTzoCHVLi6GV
z<~J*lc=%vvYH>34=@i=C@X{35-+Z-JND{Cljo_ez_9z=iOe&Zy)9n2OVC7so&g)2X
z-*rCL>ZzVumYedqJxAx4>vod9)f!MZysj70)AH*G(bOZ~F){`(<MWPTCMcQ0#tvz+
zpzidZ+4g-fPJoC#>6wA!AZT21<e-7%y>*q`A}`U;H)pIk=~v%zMv8N7v%9waCSp`)
zNxK{V*Zk?Ge+ukfi9WP2u#gl|Nh_AQp)lZqAG0lk870Q9EH_4MgAqlLWz8QTl;#4J
zfKCJn7Q1lBv27a5p~`-Yl*{zqQ;jgnQ422TwJ|7^=n-1ZRQgfIdPDHAW_!&D<TIN7
zBa@r!ytstL#=&2)nU`_#*(nNf!s2HeWc8lIX|TPu(RoQOYD!8jh~XQ9Gd$a{w`m&r
z?yoUq<WSAw778757)e*d6iV8W-7h5H^QK<x@0`sbIjv#KJt6#~&f#5cpi}@BXuC@-
zrdIsITi!5ETwgg?<h`jXuQfmYy*hgJ744M`2~z9qRox1jNzNobcsN`ct;|)ls_`cd
zgu4}!YOXZf0Z9$~@6cr8<$b>TQAGP27b_vr7<lK$;Oqtko>_$SxX(6!@`gY<ys<0K
zAq_AJnGKSxeB)I1PgCk2QAU&i0-ci!k-T055x>kNZ;X4_oqsjs`Y*GGvB-stK49N6
zDvRkfOQVMbKaz-*0KhEjC(-q6qPqp8f&D+G@n_W#t1}jLSoHtLOOiu|VRHxjD^I%I
z<;V~JugFD>NO9_{<-7cpC;U%Vs~+rirZqF^#f@?Y>6z=(rTazXIK2W&Tqj+2F$TUE
zsCH0VqWWxEk~T;c^9>0DU;srbd_2-&n?^NPNn(#+a|=O^-B;td7DqLZrFn9nqdC}<
zjMRhHHX(IYD0RxnP5(}24D_$lnPB>8j1vGV(Fnn(jv<LCDE-v{al(3*P(Hc*EhO7s
zwPQ1`DR?MgUcvjc&0PL;-~ThNCMTHndsO*wc_|ppR|m*$O4|kNY{a!ODpRiNNY|%>
zm;-sPP=)S~=0jUxm|E~{-YiWSEb5sMY5Dt<cf#O1n5Qi=;f<f3qDYX{IQGOVHWsB@
zJ*Vj8|E9|f=bh4sn+@tsC<A+jx)e;oHYrH?j6H-^oDB&}{nUmRB{4_8(|$s1zQ$8D
z?4->Y_-Ipytau#G%Jm;;(|+r;{#iwW(>tN5&O9$sJ7wWDv*mEwv-^jMN091Ti4CG)
z!9Ac1k!WeL1*IF261GAc_*fmAcZ#OHlPPkk9H_5=o#o*wbViA{Q%8vs+Ddm(9IWN2
z&AMxRHU6la3F|11Cx=nCMp4aR4lu0_xwtu2NvNGuS>uD3^x2M~ALUDzOAqGI{BTpS
zp9|+RoFG3yOr)n@7&{*(zb2R8bqxiodEWj{sXQ2*e5*mAqB#sQm=IPHxk;NN?PF0w
z3&SWv_3voN!j%>9bx_m17TDu@Wv643)<ugnOlvw=`w_`m-PVRU{-temL*gh|rgC0<
zYZu=MjoQ-G$=IA0sA`15eBxY}c8RYPr8)VNZwG4+?ol8!$6}=K>cW%4zYBY)hJvrG
zeFK$xvY;g-d*N3peyxiI{Tm^x;pC}2)SB(8edu;*ivq7vnS{;&RK?g}lsP{GqUT@=
zr9n+;CU5LZbllZLN$X+6nTZQ0?=VVfJ{lrrp@)Nq-^q~+1f2=9(V*9t<UjtD<~1*?
zH6+S!<sH+=+8a8RB{;XMON2`&DY%XLic?RJsW$|tKTSB?eZxZI9EuE^{b8X3718&i
z^09vC{d?8Ex&+!RF)MJcp^9Nqi=8m(<=6?J`msrSFN-}_DBs+u`))rBk*lS;q9i{U
zeW+tPIYJpLaw5y7)HR2!-C(TH=<|otJ%t=v{RkClcD!8Mqy+aRT?}a<vA7%zi9=Ha
zDC^9J_E8jMJ5`_PjO$B;V6b-gy4LK)hYc`@7w8!reyGvb#!?U5CFU>PoA+RAZDk1r
zqKbf5C_Xfwh4Vx#-Jc&p(gT+<1da0(B~ey^@YHm5q?KunsLh7(4q<s3)e=5Fsr4UO
z6BxG>talzGwajAP6gxiY>ut&b8X3m$u{e`lht{T037jH=@Rf5b0-O!Ca=JfG{;B3A
zQA~cK<B5e6Z+HWa2w`-7TWo3%ROkQlQ&9YVedlRE+6zj1dW(5w{%9$YaHgS=peW9I
zZZO6gQq_R~AVi$WvaQP!Q@EwM;k3keV-a*a(It(rf5}5aoV=B)|HuEvuVRwGd`PuU
zd8my)tU_{=Y_<XM8Hf0UBuzqx^%TJnp#V`FaMK0CcOE|vHvMxZo>idiT@5LLMn`|i
zZpMWB*h<YNfCX`G@(wd_2a*p6BjaSS@3G!!M?5tx8Up<ug8=b>L%sZ<iVZ-LA^@hc
zBdKQ&SolJ3ve-?^3gKH!uu8)fiTtuCcXbZIx|Z6_X)5@ORzy-&pr|H9tzJ}}3Znte
z>3=%=C$Ggn!p#dM8>Cc*O?C$-d2W!Ub^Vo?L{HxxDhy4A4>=YgY}3EeH&$hHsldxp
zd65o9lYh!3Yd8}4t3!BbwPk74c3sW@5MSRX;MBTK2&mDl9{=1nnSCj2-Az*KY?Pqk
zT0N5IDiVX|tO8DQv~OnXV^bd~sdE-8jTTlAH-<wUze)c}EI26)%omd88MaQj<oJ~^
zQlPgUSb2{+aiL0SK&FYR9<!}mLv@~`xw!yhN+a1JwB;=)90Nb*3h^I&30A|C9N>qT
z=?P7D!y09Jany&L`@%ffEr7Q({fpdc_teV488<A}5}M;Lm{vC8_4q%CAQAuhU+^Ac
zuL=sr0Eidh-Ns%8sa8)rEH@YcTTT40hr^0X+}!2(;J314m`>oj`Qp)toCy;c9Y?@q
zqH5WWTsWd(c<OLql7;N%_oq5^?YV8UmG;bSzQBUHRe<cYpo~3YUd^1?y2qxRlau^M
ze=s=4TTho7E(fC!2=f$%cq353@Gu_8d((l}U@Z(eKHxhQwAEP;%-5IP#@VRTc9reU
zzX^xc9@eDC3TuKrr_SLGTeWtTvawoSL4#Pf&X|T9cTQzaGcb77S<1-reac8%s<E~1
z8Z!0U2N5TU+@(+?$Qi?cJ*V-bTh~ztW{-s2aJFJEnDy*r0f61=rOAYfTnoAJ)_<GH
zG4+~ue-}{NF=CFZbVhz^ye8Ls&4!ynKd(V{ais!QnH=I}O>60wZFkoF%ASC5^tJv`
zpdIdYJoS!>JH3AQLc)joGVE9-@vmaekORF-udkkQ(&8DrMK`(m0CeBfEms*n3P8`S
zf&f_{NH$WD+w^JLfnHxrSs!)S0<Dg3p|a6<gvL1em^LB<HO-7^5BORXVxv?At}zd^
zd2<ep7zd9aK_7NuG4&cNL4l_8;4{37H%Rv1?v!4nAIYKuZhI@vpbtY1GEGUo1P?@@
z<zTft67D_zpMp5AaC;b#S@?_Nl-!bJO;AN?V%^>-#*ubtb|TRon-8>UZgpd~SBh2U
z^2&*-3QP~sKo6~+OwZTip<WG{CI$eHo^(Q;fI<w&Vn2#P0`GBbcT?b&=AwqzpkWAy
zPfV#x$!z#zZVT!-_N_S>$0#W`IVtT6Yp-^I{<9UeSQCYbE;&riaFe#sJn_|}P6t9I
z>|wvQ8N5_r#Ha|0_^avBD)K+r?Bt|zzfJ$$RoQUTNi2o@(48SyZni`Si2JV*t@zrJ
z_Qi{oyw{blTuNP)j3D@K0sK%*M^>L%_=+O39LdH&sTP3TVeoC}_m?f$0wSn0uCN1t
z4U5<s8*AklD}X;?vYYfta+qQflVZc3f$(n3sjl=H2A7}mmJ*aG#+!^ylR)R?Q;Q$L
zaAIXox?<ewZmj75V0^`EB2mlNsz(=n=tT7nM7IF2x#QM*;z(Pp9Pf}`T#Hto;^L5*
zhwt?%3%)HUl2D19*enS~OV+e@cES*xbm&1(75uauGhA9-k!cO)#|~Zam)w%(7Lp2;
zjCD$khFeD>f8F{UX@s`hp!T(SBM6Ga0>)zeW?&K5nV<ehFB&tUq`{7IwPIHsfsE3<
zKy94!3yra+v9hzg(UR?(ZoPWh(dZTVt@}#&0Gr&7cOB?9W2<Pzt7poh=~6vEh+>v%
zt_&e2^f+EBQI!?rU4@KoFQ33aWGMTH1=|248{?)w+MoY_PuKh_-lY42y%)f3-t6&F
zB*vZwq%4~~M-PJ4eCi6F;Rn?OssID6>D)5<_K~1+H--kVFF7R*$8;9usrp~wM}|`)
zCg$rR!Q-cK8nv><(av4Hh#}lvGw1>=EO?S<@EH#9*4auKoC`KQ_E&09N4{*F=+td6
zadqq!wE*oJ*W-JO+1AYa365+x`M%4UAwkaGy>q~VZXzzzHjA)#D8<~}t-CIQG--d1
z-zlascnx7wX_5QR`kl-@M|3aINO7sJd>5vbD0%b(Gfw|`7@rC?L*}UcL>IvINQ5lL
zqB%ia@`F#1z7xAjpH|!}1gD*v3Mv?P*bc!nkg$Kwo7gmhytA4!F15jA7`5G-rj%ar
z;$ms7!|;ht#c4?DYXr^B=k1^VnWQ}8Ihm8iH!_A3j>P_K=u!sa0>R-`d|=VtA+qpZ
zC1%rBLGE42JG`E!7$dZ?U(U}p9O<KG^k^|GA5ZjrF*5z%ZV4rRR!K3NkBR0$92er;
za0)IZ_8oTg!KqUMXRrklR845h`p^$UF8=u}Y>2m&X2&{FA_j^wl6^tjFwBjcBBM&9
z-KBVzCt>m44|^!=@$@F&mQvoW6MnvCas2KBO#YkaPLves=ww*MQ{2a3G1D0w`5t^s
z>gXM9MM3zjer%pQb#z$p8a;i53t3AwZc4jdCeqAa-&>rAyssA&e_70sd*K#~hDb<9
zsFaVwVVm5>9qkG5dkrl9uRp211`<dY4E0{q@|yvkto+WJ(YDBt&QCbcapy;_lJ|EZ
z)_cr?aR_RjHhxe>W2{i;@qiAi<QGU%vNkbftF7a3k8IndSXo_|_LV^j0DWMr>z4tv
zLJ;QG@)Ao^SyeMo%aj=8L|+vRsX()0r?3QE+d{YG6K%bu!gwd;6jG$_9e_NUm8G!r
z4z8B*MPt`rDjNXQ^mKC}JOea$`Z&OIW1RRT30a)pj#4Y}JDUzQ?(a^3UZ0sG6S^%J
z{Ud)E%v-upS}bqJD)2-LiTNN!ax>ok>SWFqEDyVb6DDdzpqTNBMa%?gPsh=ufaSkC
za%j9nNUxA#z+1D<T`I;}M;pro@}wQ!1d=C}!?iIlmlzB$*t~*)2@0FwbeR<;pIGw2
zaD6C-iJaO-uVsI9PU)8xr#VI*)ivM2Hf0{+fJlgtYf1N@9*uU1vv$2NoAgxCi`X}|
zGH&g9g<)zjQfQIva=kPKf`x%3O1ao^v`(a5mE#(s1{}M3*co3rRRCirwNJlFHmuqE
z0#w2F5#JU(cj8$?-9rMR8uMfCliaQ|_lkZTg_o`i2W(3I=d_Y>nV0WrUk*Yi1e$5Z
zw7ycS?-s)g$Hh$5m9FU@q_tew%XgA98)2Ks&ip;xdtJ><Pf)IPHvZZzWQ4m=inwan
z#i?22-+tg^Q28Jsqzu7myB0lH?#Vqg4HrPhz80wHrlF`!(#09jUZP|oLwu^9mcp3p
zkLy*WRT26U(g$58`YO*a(DFLIG6!`Ee??%B%D9DCxw$Ld2ItGv_0#n)!xpR+T^su+
zBA7)V3wC_9NM+9A1$5dZ=+FIR?+nZ5>RE}XD5#B7lSd|=36SpB$SEWV#?}4s%HtR9
z7)j*#<5EqcPJwrEeeRAaVY!|z)Gp&C$pjuo8t~PJrpb^_Y)uQLl<KmCa(n&RNPWYx
zEEHM}4dHN5u#KEJNZ@sX0~eiTF5uz5|2LjSA0^V(H{I}qOXX_X?0;GU{euB-{^doK
zBFDX28yYw`nc=siz@wg}OBMT$@row{vJjj!Me^1DS|c^#rE^gs>!6*ZL<~5m8u|JW
zDb6`j0;CRTwZ8yXk}Vd662wZS-7m{SJk71%l1YS+qG&em*b_<98KQoMRAjBPIqLOQ
z;Wt)M5BxyaE8`SW>A7sPrCjy*+|O#y-(qoFJR^M?Qfjm0iY+&01XvPIq9MywI{$5S
zX`IS8VR;4j16!LwDL78BR9(&gzXzK{b^@(fyPgCHICvC*sgY(lzS#FdfP9`>Q~KbE
zu21~-qXH(nQTd!II!Z4u@{Q+Tep@8R`<~Q!mbAh{BS#xf{nNBigAwmM4szkg%`1@W
zW8+rGn!84=`4ZTr`yDatO6lDuMHjN%^N+rMTRSA=7o_Fwm8h6k7UvyVQ61C(2bWub
zZ`<5?b!IH@As}}?e$JxL+D)}Vx!^Sc{;pXrBK=sJrRH7<RMotVG%z%jt9`RtSvLJA
zPs;(=s_2vRw#p5Fwa`N)d^GUJbyBAF5xr$<#LWzsW&1T`Ndt%lNlA-a0DhhOY$K_S
zqL(N`=#3PuT-tpb9*e0<LRm*jUoZ631Ul{Am8K8G_^Q*(Z-p!uy?`)t$_yrokB#nb
zHKwZlv=a(_y+(VW1nnki9Lx_BBY6G`By5+NT!qRmrN}yKPyx%p8*-?3@}6xiIk_9I
zDC00rAj=nZm;HFjS$F(*ysIHi%YUrTjqF2D(QN;iilQqW-UFaM`yzl@|0JHSX~Q0%
zRMia4J57nbKcnA*ht%aJXk@!D*{dQ*96%~cOj-);DQ?U`BKXP&(J$tx>1S5@HYet1
z{#JFW9~XxSc)O1bJ{xXZtk^~N0DHix94F1GTMTn1a*JkxW`|Y{)x@thkls<o6RGf;
z82QC@Os{EmC7%>M-Psv5D-A;cyR`w7CEN9W!({KF#5}Ty;vy(dvac3>zl`Ky1Dw?L
z$>3CA7CZjyNz;7N-95wFc|yq41A({J^e_9}VY3c1mc7t$>=9%Vn18`U{W=M8Kq(by
zyQL$cUtN~<BS#E8kT3tXnPr<f2wa%xO$5Qt_m7ol?m5LH$9XFQ^?aY82Z;Yn88s3G
zRxoavw_pqL@b9zbn0y62EC_sRUefIMe^l-Mm-{i@zJTYm+qvo`Q1btnq$|6Wb^zO;
zKi9(u`f&XLw-|tFk0CFokrP8}2B1&A!6%`Zq-`!A{)yapN;~@~X=B4-_hv?P1&Q^Z
zi0ES5=>1)0jw_ll{rtDZ-aQ*&7!UvcHH@G^5%}V}N6@B}*wUgosu`KmciVISO4<0A
z0gVowqa0#24G~Bx(;&4wI_}W_VO4Dz*d3#i%m>ppiXr6&b2_a|t|g~#R9^j{09o1h
z*p;8#v-hGswJ2eCw=`YP_M6k;mPFunJ-|e}iMdA%$m8B%Nh$s4@d*Ti-=6=TjvZ(E
zWu)CY1IYo5*4Js9N`uYpUR_Xd9+7WgjSkd`)cc^!dd_foA&*XFKkG;sfY%uPm-mgD
z1`yg@er13x$0GBy89MM+NnuWY?@M8Kcd2hjmm-!-I#kkN00e`LShkM#tG1=XD~y)C
zxIi1GG<hxNPwLT=tie_Zn`#i9GM3A404-^ua`P~qX732>!{~{E^&$=hLh%5IKGGPe
ze|H9DBu6k$cYRDOC(xQ91V54NgVChntQD({bk?E%^cR{*{K+EMUw2oUXbGo;hyYG6
z(Q2#N$bZZujRNPIdvihNRdo#9NPoagtiwtPZt52xEt~HCV@SSBCcdSYQE_+61|-i*
z_%T4xc@AwCoWA|cya)DiDjFUclP-39+6ck9x|aURx&$d{np|!o)2SxhgOLiRDus|g
ziO<Zcl5R{OGtD8B(y31G@7cUO(4H4AKB^M&OpL4Sx1`p~y1Sc*Po)_PDx*>@P3@#T
zx>l~spXRYhH8r^%;Gw6jR>?rB?h;th3JrJ>x;q|HyGz^K-8yearZ=E2=(*<?-$MnE
zG$y5lg4lEv`nuc%zMYR7P_R{|4PpW{Bp%wNR@=+~?=B=2!RgH(6LRB&goVa(_w-(}
zX_s&wcTl-BUIAdhLA13?KF>PuoSsk0tE-#dc079OR1uLKTcT|C@RWUMsUoDS;i>gm
zP1y-&XYTs{#o<u#vYZ2p`IZwDt*TrxxOlv%^ElcLEW(X%+T4wm4bk|E<A2k_p)O{u
z#5{l_KH)Gl<ClU(V{tZPKGh*=V4))Gzeei@-LXh<FnI{agF_ve%HD@AJFt92|A6HH
zPjA2qaU0*lETkF-L7;JZd0ToW?2!1f9qi@}bZ*jWvbR9PoRlZhf)^?2qx_1#-3nb>
z!Ai6LNizp-`rMjDh!;S9`Zxwh;$8ZYm&$-YI!2GxW!u;!*FH=r{hnR_p_ta}Wz*5y
zp*y5y)>%_x;X7E6k__Z+MzCeoVcKEELrtu;mbV@Ds#Il6bHKfCe}Vbt1WcmmyDeY*
z*`(OK!WPpxsDd9@oCzQKJtO11iMTl2dV^e8vY)Y8%kH0MD4)*kV4Dmg&4Dgjz3X#c
z$`G9<1kRM6YID!lLzvHBer1NzSa0Rr0rmftnk?H!Y5PtX85?!S0Ieut?{&h_7MoiE
zI4mu{_9Nlj4`t1bX!cT(PtgLnGSb6=f{jmmLLTh06)+!@Iit&7nf;omffM3ox=nW}
z8+>BJg3EsJ`r-zcnSGHGg_NZy%d`v=n%PpNadh)$yhhcUqJ4aA!bwK9^<U9J`Cy0Y
z4`ilROP*48jpKDtuR>?dh&hSS-jM&)yXnS3DP$(E-`ko2NTsi&iGYpbTrX@KnROs?
z`A~TghdQynd|{Ds?zt7^KC4KH+;n?t&m`5Kr)`e#ObwU+|Nd)8S(n?^d=h$EG8Yzh
zWD)2da76!h2;*`QiRaMz@u3zEl}J<`$y4U;lCZ$TR@y2#72!hcC7mZFX7gNIxBtQ`
zg!>phT@-rC3JC4Y)~KeBqw`J4PZ;Vm&u-D!&X`SoD6+5Y_fcD-&E0{PGWrW9nYP+>
znGj_uO=U0~m;h?Wd;XcfKS}CxQX*WGk*j7+yrZ=go5w24C1-(ujt{uESg^bLiT0S^
zGw|_0ObkXr_e>ls)}(x^&(WNnag3=*u=FP0CqMiNS7K`^VydgE?ilyC4U?Ne+#oG*
zxo4W1>}~I4trj<iq>$`vtK6Ue|6V2=SK}OL?lf5a<#RTXW95l;w7kch595vPhbeAh
z+0}~dn3vr1`fQY$N$t4q3~QRc_NGdxXYr4>j*M_)chA_ro)GpF9UY5qPYw5%6=1+L
zRpfXK;9@6)R@%r)^`@MhKE?)<VbZzD-pGU_Xu*|P;@w1R`96ml)k+3MR&%&WA)pqm
zROe#X?6ueBctxb0ZduB`Ykc+&dk~8it$FvaiENwHd7gE!M>Hp>`f0?&*pfk?Plty6
zlu6PSwNsZm6x9`Bt8^8o`rL8mzBG8uggc<4>@~qKTXtXgs6JFeeC0-cKS3Rly{nL&
zD+0&cI7zij|6%PWTMj>fFo5z8$%ZI+vxT+WyD7Z^Y=wZzAToqctVQICy?EO|S2LK>
zrd<2tldMU8eO>RssTD^P&!n+G^>k#sW;aMp;SYPAtaJmVs}TvhgiGGx*!^A(G$weB
zn9?O0!A{y0r<r7F4TB!<|Nr<svnT_~-u7XB-N6&ACDW@3mUp1#9#6=d|Ll7{Ya#`M
z595zlptvA~`r|4`ss#E*11}5ZKkp<+3*K9U#O<ft{a+YX#HYkH7%=|eef8G9yB&F6
zW&glK1jRGhNW=uq{@2F^smq+8tx9RQ=YmV7p7USP`^2HBi(DmYyqh_=a!M!vtOtLZ
zm7id78)CNG)BFl{g`Q!gG*FGPOwZ!1W`2nK9_F{VR|{htb?;BiD!Kq_swq0WCe6oc
z>mTb=5TiO*H$PvX23Xo97)UNdd71tG&r;5d7%QUXTZoEl-hrkGV&eL|h*<yq*;|p0
zwL`-X8jeysuXpmzoy>LViW>5`-H*u=MU@@!94f@KwZxX-fz3yy6+9yRc5XqxLxQ_?
zC@%Kh-66*@lkq5)f44xB&~RpiA~TeM%mI}X8RhwB|L%es@ipTk$63sjJDwYd1Xj8l
zzG+%-U(Fo*nUjZL!6@`!>3P~VPUY=%rcwz>Xx3W5pJvqfS9a(6+Zl2ietTimPU@0{
zP=&ctg&2y6azMQB74*X=+n`<oYgb^zV<`No&}DZwqHRSwTgh~nsl~rMr8;vmx@W^{
z?C|qOjRWe8xqc*E${dOhD*XC#4_dxIw5oF6?El}|E(^K@g*d@lM>k4Q?&UYq;~){B
ztDS%R4jyeM;f%6o7o*$8X^3I@H;B9Mae$o17z5uyOaOQrQ~_!N?P{<8`gvv!0^-Rm
zWWw<z;aeBD!`K!eZTlfoc2EAGiE7z>IFt5?)RnCqWznJ-%M$|b(TAh{@zIfL-$5>R
zPl_S53!B&Oi#On1>T?C+d*g%;uAWm#4{KYu_;&cS=>SPo^ygG5e>OLV_%LZ9M9M91
znncj;RQ(RIyPZo}5;&}gEwGusS<MLUnzG_{hzB|bV>3pIYN(|VdUQyyl#zsHpW2lK
z3yQiZY)HuC%=CzpHVF7#wJRLXQH?_Ml-K9<?0%#-c-D;1c=YP3eA)#GFnno;Ad4-g
z)BsRftNDHfbrH4?UFYni3XyvPaRw%dawiu;c~Y=Jc$!$NqRACu=9C*K{+r9XnCC{x
zM_)P*N@*7Cjr!>OSc!C6H!LJT7bZT&g*ll0j=e~A9K^a-QlGn=(PN&`9{d80UYXeG
zT~l@!tkLqg6swhc&2uO(wXn0ekbEE)zfQ_!pR&%SQgi<wN?0Yi{f{Gdee);j`V(Ms
z9&_7FX*=6BlQhAc0yK4d9E^-#d?vl(Q|I!=wm6d0laIDC`aMRdBm_qunFj2P0W?58
zet3kmO~|Czr?u630?4^pTawLQ<@3Q<*7#r?q6Q`Rs9Ct-b+~MS|HcMuH2mS37i1oA
zq47P{#g~0?C^6K?5fm+qW>To;fxM1Rd|(*el`@!dm5~K5)|oKNoISV#xuFD098sZZ
z2I0L82c^WyG^3?X9Ja;L<vxGfE>4X&I2NuM+ZrD~O?t-8mvMmpjK{z91x&kh7Epdk
zZ+u+kI=hBDSL|u`^Bg9&Y9FuUr0l4WDu2HY&SKIpiy=77MVDcYMXA_uaPZtPiemJD
zi$Bkf5vfc3Ca}vW7+q#8HBtjct+pGI%gxKdR{>^$elHRYMjU%QS}NY3L!|9xBxQJQ
z6s@fF5KY58d(?lsolgM#ylA@nXHhe5F^)Ul@e9)xZ4UcrYE<A|PuQt6t=el5nO%Kq
z3)q84INnx3EErcq`QcOXwp`aC?x7<z&6Thm$=~Wl&>OccZVh3!5gsN+J77|25e}8!
zc`+iF-5MGB04>s##B%Qr&_w3%?U|ZeA0<7<oH*~F!D7_Z-9%cTTjkDENO#G~Oa?JE
znE^YjtDNPZFa27M^uN##!ZMhFo3PoIs!B__auA`YP78Sapm(3t#kZDKsoh^n|C(&t
zMOY%q1woB|78e8potR#(H6<J^<t0ilso;kDbiK2T&w1u_j=>8>3pDtNAn}T5lr#S6
zyPHd2L@}GXa!u56MF?yAK(Vlijb-mKb<dhvNGRwlaA*~io@ym6O#B-?D@75CqgPpM
zKqtfiW^_Ip5u+W#y9wXsOx1hq>I&a-+kc9O(matgJFY%=iyiTNEpx{zM{hHf9wLiP
zQ`2`WuxW=EV1T4{^sk;tw+I5!0mvuC<X35yS6x*5u{s@_LNC(YC2EOL9HUz4x{hD}
zpFewQFG_EI{#6phoLGrU7t<T;3_jdm01_figmjJhz^CHsr)09$b&iIipb>QH*XmSl
z6lTuwsrY5qXxs3<C<Jq?YR?;y#|P0%j!+@J`(v4vcqTMwL*mSFPcF+C)vs5wvAGbu
z1dsi^u!deg3w)#tpXg^xIejm|G`w53QVKQo-5RRksBagWlZn`g6hMr)*WZjwW9AI8
zI{^-NL2=gBN^Be*o0B+u>V0zq-;odtQ;-s%eBq^<_XpSk@$Ph4f}H>|w25^k*SJ#S
z&apm!0$W1`;jSc6BRf~{-M)q}&++1R{0O@(h)#z)MaYaMSD_d`DvYCTm(E3@s~5P(
z!Z()L^4k{OdLdeW@Eqn!TMDe_SFJTrc!dq4^Zo`yNDWqE#URnS#PXcMW93%lUxPei
z(n=9ZR;Sn-qQY$qQ{uG-0xj$R=|)nl)KT)p%Fiii602_QJshG*y(NzeIH1oLDDa|+
z9oPr$T;<+^es)u16#=~tk`r|1?!#={Vjx|p$MwS*`v58IK&e+4JIT@WyQ@2o1oWQE
zdyGU=Ef5})PK*KFKXU1*nlQv1H7GMlXfhs7qk7@PCz+J{RH{!Ne`S-0ADc+Y4olU9
z$!o3eQhH39SX-8f;o1F6!Qve@a-{C3x&qjF&s9%Gdd;<;J)u^-?En52jWgB%U$;($
zojWwEmFh*l9SuQRW$GY`+mWwYP~!vp`npX<PpLH)6jB~?=1U8nn7;zAV^6ubX`x4e
zY#M0_^IF{#=P8UjV4RP}7HmPLOL<{&GRm?_Nx@BCxkTP14?Yf=KOfP=LXJuEZ}xkX
zQrMQ~n7Br=>jFU~!0n@};rN;GD~_OFG)r*t&gROZi>gS0ghs$#_+1H##O4h7$&MU2
zJS4AkLQPLHo^G`~tWzt4H8(;s1P}ttUj(61OdEGqZ5}h3);8$kr@tHk8jRcr57OmY
zOOF~jiZt`5zaPD$Vx%F<%96g3qUjA#wd(A<^Y{QIpC5703rgC$ho;b0b8&6087zbZ
zlH#y63&MD(tf-;NEab_VALeGR(svrW(4FoPz3K*YCI**@LlgB{&XOr*#=IxgO!zE5
za@6J&gSVIDyL~LjG#R;g-##7D&ots{i6MmOEU07W-%L1X>hMk%v`A0$W*q34s0Orn
z8nMOAVXB(>{`p_V`hx0aT-iHp;!H>t7eDsqDtmBQ4y;NU$iNSI6}kmx_?)d1*X~4b
z4wOBOTO%lc!&cBOqb(-&ZB*5x@EsO**eA~5=EA9bN~6Rm?I)z?xnFd3&dO_h!0xUk
zuVb@S6hR?|aaSlQxpN28^1d5zJ6_^v(!G|lLbo`7Fer2KeUAjd8*{4)nUkH>onKYs
zu93XiG0n}IUT7@Rzf?EY2hbvfFgnY=lL+6m$OXc)@wUnYa60(`b@f|@5}SL>iZFqy
zdvUw~vNegCx3*C5fZv_?coT?AK2nL0OkD$BVJx#`^vrKn)wcE0ZP;&I^G6*|AWysc
zh3OS|RL#y!6Zrp`1@)q>?6DYv-rKP*C`*ceh&pbKSlUTRKg&Hr6W|D|&+#E>=}y4A
zB4Q?1Xr0!DG&j4ZlMoe6emPuMgB8LK3($&dAn)*`(%|Yxv^$EVkCITTW!fNipQw3i
z%YVf1Gp%1ZCI${4ZchRC*Nucej>@P(C#Y27ET|tRRh`FAeP9tHr*Kb#foN4N9Xe(@
zSv_UBW*8_^0Du4GM^<sDn)IM}MTh)E?7hd@qLNh(%;=9#XwVjzcsZr-9-9G-*|ylh
zu~adT8-hQkzg3^kYKia+km9Dhet8sbA*@p403bLV^X>fhLZA0znn`Zn9w6S0f{TFJ
z%}zG>+At9R=*I`CN3m<RM$&o@U};j|A!yl35SDlo!6iGGe*L1MG|I2YoIf5-E;Y5@
zmTZQ<$U&|F|6c6%C?n{5`uY99mJK4K!FgN`2Kh)br#9@->$gzi5x;|1s1XQvIeRtL
zc+{SZEu%X5iA~TgVncq>hiyb7qjzY(8nS&mHMZ1mfqq@kD<<O;Z2={>OKCx9P-^;D
z+W9k#3aOMq*dE!J4A6@yPo2??%BKNLFRW2ClyZe_eVD#l&Nj~jStU3u(aL6$*zMfq
zD3X%^E)Ys$+bS16qXzMS8A8jF?T7MAn0K)^zHhKj3M09~Xyv)j$@H%c8*0vB(!pOI
z#ohjy{RV1I%B*!f!$!7DF$CidEdPoC_G(#Y{W84s3V$bbU<!_rf-7Jn#~~9KmbrNs
zM)TR<oC6<H%!r~lp^(9@<$Rd*ppXhoOj3voHxHRNp?@aWSg97=6(@UQ8pCnup9q&h
zpMllp_jTw@hh#WS#dFaw9zp8fIN?QD%5o;dy0@$x+fk-=DB^%rP!XuE=3U%H9kd*c
zij3n}A6~kuAik$~O`XFv)aD90@Z$b?BdYA$AjHh<)&egMmt~DblME<VT(R<(0)+rK
zBe9^5v{t3S6d6b+@h*QJ>_N66hI69~s`@Hv*npe={*KU6{?Q&cmZuYM?rT~KS-<*i
z;P2+Sdpr2*Vnbr3w&mso*hI_c{maxr(x1dgDFAjriN6`l^Hq@?<?OOl=X~Eu)+Eh5
zNtD4D9V)s4vbo&t*-8r2Exg3H6jdeacMDpoF#I8uM`KfAnp2Y#4rgMpgpA-IS#oY^
z>M(WxRqd{OVx!hY-Nmqs!P7#5pw=4a#5H?ba^}Q$xMTe_;~{k}fj4LW7ltWlHyj&>
z>s1)C3P&{GAX3hyR{K|lEewN~KqGYy6%TnhfqL=$Lq=qO5{Hnb6)iIt0daS09rfs6
zn^<i1qMKOR=&og}4m!OsixUTe-!um{@X>wy6U&#{o4>vi?ht7XY%6}+G_Fk(@FF}t
z)5*?w>$e1ydv7|R>K;rWFX1&DXx{NZ201=$27p8%G3#z3CB~~_9b`$&UF2;E^LOHH
zgwu7t6@AM5z{I2Z8%q?)2|Twvk#gDRPii;mN*}ivJ4dyhXB%ON&$_Uv4nrU>xapS5
z;P)II*HCQQQn;3P6YEvXD=_ixTD{vndZFQ6Kt*d?OzG)|XMs-dKUbAH4VuSKx(oH;
z-A(J&;*h%6SWRYY9B>Dy)#f$4wot^*#nZyl_;vi6{U)jZ?Ry!$yjrLlX8sU`0z&ct
zVy+ZrWkwL;w=9{P;h!6mIi%GaG7!f7!l7uvn%_TFeSo-8*C%ugB>J54{@#$1n@+Ed
zEM4r0skQe@cWz+NppM*IisoX-8Jz7-7X#h{$q!e!$b>zh=AWOPslGF*HH-R~Y!vE&
z#F#^;CWX;PtUi~)7KuIFoQk`%=mAoOf1KQ);+t87X*x0Ns6)aG1YC)>MmlKbB4r22
zs}Z=h`O=HhX3A3f7939vM}JG3jWH{>iIl!hx@VHp8^X3BLL>3a!^5N$o$j%#jW;ce
z#U-CLn=);I;dAeTtlgK$X#2NI#7uX=#2o#z93bfS<^9UGa$*&)$KuV~hV32xH!z4{
zzz^Z%1-*v`=if*=Gt)WY9c(FyaV4B{{Gmy-#wI3rH<|^P(NHKTWoC+v>RypYQQ1?j
zo0xgF{ujvmQ{G>-z9yERGXAPM=a@V}VTJb!ff&jdm~glfj9AjWzS6Au-LkrO?&fGB
zQ|C#T5W#3{r|@c)ey>VLc;Om#+p2HS$<yOREwmc<{>(`#HmTP77zd0}qGB!6hCJO#
zMDf>h^UxuMd?!+3rWnxF;W3eOTZ>@({5crK3!O`-Lc4XRv)|m18eUybJ@uGncFXab
zX+1q&E(GV~o)o>V^t7*RK{ze#$MYiCa@_4qgsM=96pF*v6FO+9t0vYkKInqCL*Fit
zOV6tmyrGIxs$<k@GiYoQD>kF=c_H@)m%OC?k^5*B0$<OY$=vZ~KSGX9qw9(SwL2M`
zkdAoo)}iI04Xt0r+r<n|x}t7DaKf&5{u7e^N-(J>Ab7E^4sz@YiR?`avK(TU%vo;W
zS+7T3AdNGUp3zeoi|^7YA||(_Cbh?{UPgWDqzeXU^Zuh>qJ<#7CMOGJ5T8};c$VZV
ziDbFtyx%r+K8y?B#(uxrDu#%(wYWXLNYca`c2My!dP@w?^KL%Ee2Y<$kmNTQiN@<Y
zqiZZ_i(s-v+3}_~6v+=87UVka&PGIV)iCv~bdX7OQnh=W$2P@1bI&XhwaA7EU+j*5
zoE-GXfCF)X3RAMoHqNiKrC$>3J23>Uci^KUBAL?|$+ugG;4P!DYto|1isltfDD}Ik
z9z>Hp0iDxtsXAz@8t!ITb0eOsrCTDI)cu8N^fwmUiAA1E^Rrj%ByglkK*cu&#;SeO
z_^=S)H~db@O#(Q#^_3UaHqB@hx3_l0fvt~mL`%iz4c42_^*T{7Ky<1-BR;xGoq*7c
z>|}NdllXbKpQFd~!A06Mklvu!c$iMc@%;VfohvKyI}~h%Ok>L=90s&8Uk?THKX%9(
zng^^{jFUXR>0|*}s(w)<QOOgcT?=Ps!^IG}!QgHMgZGKHJT8Q2(Ku42s012q33-=$
zyx`El<j3m5i&<BQhCo&*Y4eqD7jLl{$8%`@b0gzx-X^^U7E`1mAD!b*oZ1}fCv%AJ
z*fTj13yuk}6^DM3H5;65$&+qdiVDb|5<zJdnzm819K5t+;CHO5v=A1seO~o;w(O>q
z;|N?gyd$r-53*II<RZ76&-Z8IEGM?&ABDUBGXIs}E%rqMS}L;Bj}t)P*4*&NVqe4n
zQk#eMpMnOV2XmlR@jLU_cepBOK;tKTq$qmY9*u<^boU!eR26W5Bz3z&WA4@YB$U5-
zNg~b<8|A8Z*wZlG^SQ=C6667HtJIypvV=XtbXjaI#v7Ch_#>LigK1C(tyG5a65zQS
zTQ7k16=B}x67BxQH99v{`WbyHT`~=ha$0lCTcO+<+$)FmS?xi%O|3n^uDZD2|NKV*
zuvW7(fz4J+wzHmr8&PD#*^)#{R9XwQg&_AFDY0n80$(Gyiqa%cByS3)t3B-YJQLR?
zL+CJUQX6)ztu`z4VaS7FJ}`e`|IN~)44$ZGJV7i25SEQ1)RcquORln@iU1^PuYppk
z84NmEmhWk)SUh)q#u>lXDAUR1-+{mTOyuZM+!KF?+rP1Cd<ojJ{|x^{1WX{X7&W@&
zx`MOZ!qC$*MyF!!Ph8~ehqq?7++hIQ&oVq1SOxY%I*HArO5aQVcXj;wMB!o3UCMWU
z<B_WRrMHT^_f!^5>uH{gc@9<35>VhVd1ylz6^1tn2n!zuL2#8DmVbvKMy9ngGOmc=
zkYh`czDn)s?}>$APMjx;*_h3*$kI6lnnP~sC1*)md-*!_=^y?fS5zwldW417plT2?
z@O`!v)UrOL;OSX{WPsIlEK-F1a8#<ZIx?29?(9T5m*--?`_61j5C7yg07O!sf=5jQ
zgLI%ziPYJO4fTjX_)&bQKL(&OLRxIZ>Sm9Gtgi_5@<{*gWV|YxtoO6n@K0QuRX_Qb
z>im}K-j(8+y55=X-7j7sa_W~WXv>ws9@-oDQ+o`gj#Qa!K;#kan8&miq+%=swQCG0
z0m5Es;Kw0kZ7}I1@~JRmDc{KSZie4L&DcB2<wBJuffI92!HF?<bTLe?KN}_I?Rs4S
z)zxAVAgdu`yuA7Cckn0aA#IJjG}LJQP=-8$1!e!Qbvc_)XOm1-3;x*(JRqOytv$V%
zdzKSx>c<^dIIddV^TNjDTyX}E$7N*~RDj)=#F7*`YJc2JRV;(=(aED%p!PnUxkWAa
z(<n}~3cokvN&(8k{i!wBv3MsRb7V5{!O_Ad;Y@QDtNkHgvP9`y@U;@ov38<HO9lA*
zPiYXMj@=<+x>!1G%Dw0gash>}(&MR2V4-%J^`@%b?z{ym^Fm*OdjRE3YR4OopC}a&
z?vEn2NMp5D=z<&5JaW8U*`8Vu(g?+FX+Fv3GzOz=aTAvHrA6W1is%8!@kJ|$qYmx=
z{JcgRfTlM(2@NCZB?1W-ABRVmr1O=nm8by}RLosp3>F@_k;4!t|0R}5ifn6ndrN0_
z(R24pQx32$9oVD-bSMR5qNoLKw$QR?IpSYi_I}%Le7}2&=<sAESaik0QE!xBFatT*
zZH4o$gQZ20j_uMSg%j#CGsjflCL%NXYfDAL6z{hv?X--{Bb@krRHLwM;B7uasV3si
zu5aV&Y7`Q8*^8d*+3O~zI4&aec8N_3d?+-?C$36?v5V?s(}V4G*`JK@6vR#CWm|ts
zu@pe4zFGn;PC9Oq3$;qkh{E={EpI-F7mfH}#3y_<yBi29^;2T9SEFPgs45ebY2@<n
zz~B9*a&#!}3D3IpZRNRM+8g+<s#Q`oo{XhbtW?TN^1#?wmmO@p?H$&qu5xxm+p}A4
zFo136nH~s4D`aFU8?11!RH|)p^a-%*8=CM(V%o&;La0{<fXj%zi)NApcu6n*%jH<0
z?vm$EWJ-R51Ffl(PhE$ZIdH+5`E=bo<jA=stn~NQdPj`b6B=KSL-ox5(GOKd`?9OJ
z_37C<@S$t{HVr`p6k7%Ral`?alBxH&NFlI~Pinh%7Oej;Iy}>SS$qnjy}&ey+`iD%
zA(-lo-29m`_HutZ>cyLY)W4)Z!x{)VSCJ-h1LUwQkeUiT*C=_GTA5lk?PpGx1!~le
zd|Gw_^MC)@q1h}cp$>Yy;uk^r*E6jozkajm-mH<GNAGKQJ6QHd4-v&ZxyLeV2EI|X
zjqKITE<)iV1pEKrBX#L$7;g`488g3r?Lb1MW#{GshwNNKsqVv%nm-=xbAL6PWO`^>
z@Gj3{D9^g;6wF_#e_g6Ud^ZYr;~ZRoN<y8R5NT0!8HP^Zl1sq;$da2h+joz3|2c}3
zr#t%Mv;|3fO~v;pmjmV?HRwIaT822Jn7=;@w)CBHp@djuUx#Xi8?LHgcD^7bG$xqB
zG16o(%d*<pwSAFHdi<TtF~88dG8m2tXi<zYLT11jo7)_Qu2x*KJe_Q}f)?RMoap8F
za7|?NQa%CSb4x;BA2B&DY%%p`TUI>8EQl^Z`GveY$5npd*mU4W$!_th<hJj`?^wof
z_nN+hi$H2LCN$Az)CJeUhH^b3=RYk8Ko(U=Qm>9yJl*$(Fx2@~7XZOjc+qRSQVMxw
zs0WE?I+5JQFRcdV4G5ZD?c0w2WH$dwJ43`RR=b)mW(KXfdUjFvP@LxyIgMom305f!
z;2j_TWA5zBKXwVD!JwfD%y+Fm2#n6-`MZ0e^%swwX#XibV3Z&s_pA2nd#8D%K)m1n
z!@~=_@4VE9H<9BfmIi?2JCkUOt0Q^>tbm1Ob9h3yd7VLh_P4v0Er$(%>;Gzqd{Xw`
z;RR_VrFaXUTkaUj(S8s4@291khjW@WQ|;YgWt8H$Lg;htv5_raeOi#h`T;ly;K2lV
zY2+ezaut<L{^Ink0md_EV;vHRBl6H&FYza)S#*^Jecxx|VAlD962a96JJgg^)kAkV
zqj*&{S?_1D;GVfEE}DK-j<gG39D;A_Jts4Y_()t}K6PeZri?FLR^5PN649hul8}C>
zb=GPS1YpW5h8iC=08>q5AgXLtx4goONKUMknH1Y1Ja4A1VUgi11Crvd-TjM8;7-++
zoU?jHv(c2Qm5P~3epnj|6639xoukz1dgmu(J-aow;|K=cd6C~EatZgj{>@7ZSL@%s
z=8N9+-`~0jc-`J2)aBfS+zE|C6iWX6Q_tB4rTbutxgl4tZ%HV?$1qZ}!@{utd~B&#
zA9H5F>|5{hg4YcCi^}PL-|KGz>j(r+!DW8O>ptYPDcG{~G(74Q`Wsb}c0v8}z?KqG
zl+rV%SHfg5<-?TvW+R$tmzFLXXFjp}n24v4ErEnI&S17D()*%(hT~_T4GgnQUefc}
zXLe~&N7>XtvtRB{j$6<}Y8Y#XYvlIKleY{0&A;`y%#kZ?sLU~Zy!Sa{j<|t+Ld(JS
z|1>!@!%dZO^Ni(}xUH7xPJT8o7Of>B__FPzNfG%XL*#It-1^Q)F<ri|9J=v2MIZd<
zb*n0AIgKZdbTWGrXOV#(Db@*9Gwd%P!%{)%Yu8$;hb@eB>?r_22BJfeb4h;qg9g?D
z-e=rdFQXBrY#0!Sm~YW(hcVSytkOT3va?<xsM3*rfOE%8&ziKt#hGdRnBZ(wfKMnD
z{KzPNk)^BIReDCIN%5&>M23!d(9|mczED1wyq`LzpF5C?rruXfchWY#1fKdkT&EeD
z20$~D1oP~0Rr5Q|#icX3#{#=;W3l)ttEQye2hb9k@fZq{EG2@bA$initA<-q)@Ulo
z?!hmu0(&#U%_xPBp~*q?j&bV2>nA6ue$DTk+5Y0_aqOKIyK1da$QN1h+)_k|4Qk4Y
zxyVf^>{5|B4Y!amn&ZJ#+~%LO4~;tr+EU*4lK&mEmtObCa}*{53nos2a-l{yfHFK-
z88e0xw*UZ7mTvq1uFCbk^@~`w-a^kvDLJXrmhLpbHOCQ|LZGHXmutHWmn_EMH3pH0
zJqh3dV<@P}ti^XWHGxc_LH31@H>8fjtjBWmU0*wd4H2WG8O-b37y5TA&+{QAIuP8Z
zSL1q4cqFu5_h^1pUch^<JuJ&J(*qpW>Gfob!t1_J7%%S~L^au89jjq@J=XgS>{D!m
z48C*!!tGP0p5%hp2P6R^D7^i!L4<okIPLcX!f-D21s(-2o6GtTLBA20tQ{Z5*5HT4
zbzm7HbMuE)cAL2i%#`zU%h&w)-ioxM83?H+s^7!jKdL7~$5v%>H5SA50sHYcx;fpX
z%eY{i**1<}*G=_fi`pi^ss-q36i+Ys+DIU(oLCLbk|uU~Or3uoMCnoh!pT6GP%3ds
zpCxQwrjB-mEJ?<R8Tx-Jg65<5JO-sL<P-vaKp56Hfv^{ItTytmRFh$3Z@T7XQUOC%
zDhnA4W{)4g`&kAhU6S8^@_t4VXI6uU7ow;9>mv(bKdI9R8J@yqr%(enDttp)GvweB
z_@(W`l-kjT-pA1gJHDzrdDyh2iY1S2-<)&&3?@o`difC-5B-=AW8i|K6_`2y|4M(R
z-|59mn<<g~$}xgPx&X&aVH|$P&8&}~Y@lb2Hleu-3Em*eyl;0*bSIZbSxCQLd8|8U
z*CPK)0PiELU&RSeyaYlU9|MEKZvO&?7K|uX#t99AE!d~O>ZEO44q#fL+m>yN3_iV>
z>^a<;p*Kl=Q=|y_Ug4P43VRCB8I8G*F+FoT0>Vwxg1NFlOLT^+iU0M~PK$ynxJw8r
zx#*|UPTI3mtJoI?$YZm6GhMdOCFR&wT!fbp;@JWKvC#B{^TnZCHoZ{x|7?5n5<^zr
z#O;OBW29GbWxAG^$@Mi45bdic<efwB99ccVaaJ=mevS`RRRP3)=K5!{-ar+8CWYKW
zrYxvHTKGYr3CIAoFkGr3EQ@8)sL1dzUn#sZ_&R!F?Q8#?k*igiNFQdJoaYAFa5Fjf
zRz(#AoP$ucPU&S<?7C<``wNe(MiW^;;W3nhwr}TQ9=p`~J%lwH=?svI3<=VJjJEpK
z>QJYSd2rJ<z4h9{kSruhGrQWlfV22g1ih8#uXEWL`He&iq=5YZsX|1!N&rS!K^pMa
zm;4I;xh%%dOIp*-wAK^ag{JbL)mu2JZLlwt!9qqQx4(?%JI>o1uuhrzOG?OqDvg~;
z5Cr=G8UiD~i6BQ?^y`rnw}(xBEaF~R>@7#q79T0`c7!ASkm*#cGy%py4Yh+~JNWJJ
z!j;5_$*Os)k*i0BucaE1cop#}p0XuQ3%^X#XDh<lXE0~p4M>_Oy}>pj_(MR)W%mB7
zS0~0ld&|~oaYR0t7Gt-A!6lP&;B7|t$^RU6wF=p8XrhbT(5~Ysj+o%}Q?ut3^Ckh=
z>k4-UsIR!y@$PUmZ4AE19lr{?ou>Hzz(}<UteRmJHl<B#VBpG3#??H6{dufzV+y|&
z*y0b1X&n(T_!?KB89p(`CyNv@kUz+sf-$h908ecVj>ua@(Jg=HQfKx_t}{Ny^C~-u
z64daKQP?bVU|RMF0ivk~Pa{X5aN?=|%eGR$$FC?E6NRB-6%et99#9A85Wr9n`|$Uj
zDoMFx`}WozK-n!z*c~!}y(Qy5ak-*rR_`cd;}AfV@y@&+jxi36*a$4&3Rbc<6%Vc&
zml8zN<*`&uQK7mlDH19--m8XrLmoCRjZoAoJyC~BPut4=<42wC=5LL^W=cA2v{=8k
z!Yk{~cgBEb0+Huni<f}1opi7|EufsLr_U<z{;3!EKCH}Cwndwrj$en4m@PDFngCjV
zmt|g=1~IDW0`4pIP^MSHM=RlA)T$08OetYeOnyGCo<NXWPRA=*Hu{DW>OZ#3%6x`p
zsn_-m!E;6z3iecJGV<T-#r^fz6|G+u{ScpPrw`O$W=_{JTkK|qq&%V_qwn!VUU(bo
zHoX7zKK*RTgD4`*i#!n?C2&-kO7Rt|$lLWI^g5kb;4en{aZ-|LV<2bU@RabamD+Kr
zwMLKuK<#s8>>xhYzLN;aX|d=VEP2j`yEu!8T#{EP8b(g?rh&(D(Sib3(u|6t=$ifb
z#0``!lKQd}!?5Nch$m@?Z~$C7+3*7oql~&}Kkp#F>Et2VwQejvxks>0l}1cf$DH{E
zw_`DX+ZWZ<(&;wqLn&IRdy#?Ot6ZnsLYzvD>JxH{DY5E^{|U289a7+=L}B%~JMj;+
zkV8w?-g>k&b@0xjgy4E)tu|6%=GCf7hpt#-i2}^$)IAqzj~>K{X$!l(`XZOC6>$Hu
ziNgHVqsMOkYl|^y(F!9ORZg(K2F;umv>!yjLUaXYrnulkG^y%L{>e4QXV~0Sd9h(}
z$5v@KLdTg2qh9>;`h^w=g<?iW$%XDK)&(tZCFVmBw}TxNIfOBwZ4bdr`|Ogz+7p~X
z8=vMUi}r9uPqn>zobandhp94b(x0;bkfqA#R>u4wqk*?1^ZzN`ep-eX4&n%ec=yip
z`9m`hqOZcR%d#RK4H-%_ZAruCEh%OvhhI$dj|;k6MSWoAyn%woII%J9x?b~iTD}{K
ze8Y~OT2z)`_4o@8;I;k0B`>c;|ApJp_`~iq>V^nV$PlHxrxd~q4=pcNA?ojY26Fig
zxO<M&RaZ&w;*%rYAuu!sm&>u}yf)d*O%#h=jBqQ_Dg`6PmJ{>yDL%XAjxzdUF}KK;
zQt4EzoG8bdlSqxl+3Bx5yBlkKqT6lfvCYHN%}-Cd3lP^;7rY`zzm!`Ze>D97)*c}L
zha_!^_zFC)tt5Czy*;8$8hYzgaEZmq+WD8uoL~Qyqw>!Ob3u(75I3`~<0mteeipnC
zcW;%jTxReFATq0sm6L0SS9FZB$Sp!arxBmQE9e^ta84P>SVzw?v($j*mn`tFL29`*
zz6Di1zL1^gA8w`>btYC_$5dDI!HOJbbns>v;`hAl(~HY$#pm<ST;;Sj^&BrtXGB{?
z?^U>;1U;=zxwFLP<u<e?z$kDaM<N+xzUX?+tf=4Q5PsgFMT?k`Dr{7t9jm~zrV=rf
ztA_Q+FR$Sb9iv{VU*Qw*YfRLc1laIg%S{>Y+Po?XB`cUtYN8K#l@e?7eT5?o9&=+}
z5OV|?-A_0TxyeWBhI?FM^V~;0Cf3+X2-&d-7qw7wQ!AFLuUq;aXz%d=1=r}^bPoU6
z(IBh;ThC-W%Ml;q6+ifj7``o#irt}*o1+Y_ThFD|Em}ISx+vkhD@6D~YS1WQ5)6hW
z#pQ{@9)q+dloxxjsft*Vah7x67cnnIn88z{HRC)EwJz?m3Yu5~EwaSvheo)WDwc`T
z3(|7&H&Y*wot&WI3+^V=g+TTqv0wPXfVb=Dhc|j{i@z7(5zO=;Pbs#~DQRgdes8Jw
z<ytFTppD{>d>HDC!h~udu^E2`wzb&i2hUw`N<blXs-sv*2%a^}aVzKSxQ7NNle~hM
zWYyw;xJgHRS%Wuo5nSHh0lPU!jMKd0_TzixXW+~44Ct7u{H7dTFXhs245u07tHtLY
z&vnZ3O!)ck<0gN2vvMsSTr72bO5Xs5EL-nvBXzsQ;hCcit>(M!D|(?N>w$lwjxN1k
zP~*k3GSUHud+H8&PC_>ztVts)|ApOq*~eNfjJ?*vsWeV0HS|923AU4zzbqeP<$_An
zveb9DfNZA!eTyu7iL^cD1FU#YkbliSrUhe_W*?_bh~k0}t2Y2yzvegWwFGm?m%&8(
z;Mek3hh!<jMWuoAl)jEDAUq}FQ)<QVz<-x}6*RkRfjrJ#@a&L14O}!F@*Qw(lYi(<
zE=4lz9L6=!4^zi2(Cr7)<tuEFfWSjCLZ5lG$haMsiOaZ`Ab-`s_G@<=E!mFvy6A1m
z!?<~l0g}B1IG_^pt#{vqQnZ}yuOeR|Wt{-#lM)u#^XGB5Hw%@Cf7@0qM8ky=Fm1HB
z>4m?i{od`Lli0_r=zu+<5~OI!)iR3(@=~N)z~&U?ymlJBftQz0^aIHgzd-;P@GX{~
z4}^?NIb5v#nQ(Y9y(DO5v27xWvX0Euu+Oxx0?3;di)d<Gz7SEg{NKd$tu<63-*|>+
z>C_-|4{rKuI8KiI8H>F-wRM97UZvc9{PR!>s>sEIrHyA(?m7=hi;f^Q3gPreVBg+B
zrS9uMie)137Vmb?2B@z&wlDPzp=HRd48ce0V|g!)A_}a2k#GMax<&|ESV-BxI%e~Y
zMZ44Z=YYE8d96HfF7`j1!{b0CI2%uP_5^%=xL`+IBy{{;(Af^F^hn$#@aBtgwq%<K
zd|SO=04rfffeXcCy(;ViYN^N(9^8L6bHgTD*lngGPsZDunSt;+<O5ODw8lzZKB4|?
zX0ym2hb7iQkmp8$H{5s%(Cmu2_l||Lph^{p)G82pgbS$V$?eqd_pYOj`-{c}&EOBJ
z)Gv^xVvq@HlhB(k0zhQP4T&&;V5?{67Bj@>p<t9%#J?@FN|wK2ENn)T=^!wiuftq3
zjCq~>W`^d_?BNbk<n=d>Hbwn2KI<5H58X;<m8BE>lM?KXnD^d1d&N^DO)YFOV8VE>
z$kN9^LY-UM$x-E=z0&v~-x;%Ev#4);!do?t08l{a-=%QTS-+YeWF-y=97l8dXrO&M
zFigz2T?9PvE;X6zUM>kAvPGji^1W1Yc8>A_YZ@Jt&IP{`>hDhp>Q-9TW}tavT-mWD
zaX}ZYjYhUnJ(U)Pyjd*$?fR$ff6=d-(~rS=!j49NXL4Nn?Vyt#SsYLp<~ZN3nHXoK
z^4PRM64A1cFjx$jDPjU>@7GE0q*D*eB=IGqSY5rIvJ$6c+u|qtQnloGTCgB#z|OPc
z`VmKxT`hXX<@Ml8Ti3~St^4JvPuvPv`bZ9oAM+@nZ6V^k{T%Nj%}y?epP}0j0Y^b*
z0fL#%pH6zMMIQ>bvNMon7J>C#Q%&V<%S{$%1Gn@?jk;>a`W&tunGYq6(I6RbA;jFX
zvo)?P7aCc9X*_otTlUvTKG58hA)#5u6;nSWorwIl9eK($S{+E4&byqI@D6uE86)cE
zHVA>)FobmgwK<gph(5uSvZn;Z2j-*~J6cyYVniy@J_c#Q4*Lu@A5Cyi%guPAGXcLq
zFEmIL=$+|m980ISPDibT{a}9PlMTfQ-Zb03vq<B85lDmPW|B$q@JyCkLc)R~hZmRw
zoK5e!tVuJ)E9Tmjifp~6uoeJP72VqORYYXJ{3loa$-C;~RlY1~oNXiSrFb*_2XuoH
z!KPx#6g8b0;uD+sukeJ%7$J5O^Q`?cH`%#nSk_b^HJ)U#Dgjh5J?cyn^QL4wdKic-
zb>7uuzqd&vKL92#vZ)dLso+AmVf_pk8nQ5o4Afz5Q*n<#O{y&Cg{2ZheK__abG{zj
zT}VH?AQzsU)aST7=QFP)5)5W>9wCQI^n>w^^%g|26|}8*Cj6!;Lvkcqgq1Qf;kNU7
zffjR@S!-ctXtd4$voIt07mrEORtYnQ{Vx}{@~|Z_<_F^D>lXYj<0;r->Vgddei;60
z8o2ph4Tfq2D>_3m>b}!te@MKFrwEI<MGJ~*O8XzX;xd?5*JSa&L)#*|LuzP_0RW9t
zNS81B-Yq|*D)>S%#JregXvp)TVQR%7{(hA6&cyVl<7|GvY}aZ#(3Ris><0Fe%W06L
zxxt3PIu~C%3Vz>9(zxOYwF)}BRLS!3X=X2jhE(sFglZI}H`aJp*yJ&y#)F&7EDRhw
z)7f<|r@+zn!q-W=1^+(Y3>bY)E<+dJrhmQRoE^oRsR+t5awK=mV$zx-B1vRMF@Y4c
z1I(W<ZUsn~xpPt;Y9^>!dG(6s+nvT*ASSB^s&~U4iXqi~a$ycDu5>a_K^pr2V-U+r
zLEsQtdH|7Q>L8gdkriP`g(u(Tg+(WihDz|Q#3Zy`hFp+iOdQ;uIH1qn3e+BLO=K{^
zfnYO??XGj-{teN<%xeNrhKCP)upKtR>_?C$^Eqtwxjt!s91*#eKEYs71=kY>q<_Me
zG~%v`<KhQI$goB$(~;+};?+2-4wp`PI_DZ<nlf0N#oQw>4F%<XOMx0|y42%zMmtuG
zJi$2eZwLkAUS;>x365my`j?PR$O)znxZ2O4$GOy>btn^rKoC)s6!xLUq(A9+)T=eS
ztu`?EhlNI|0a2@N_Y|qf8Nu(&A31r|7e})99R1Tk;pz^d6vwj9odzkX9z+sMknkgK
z?--t*46`04I{SVT8Go27;s*=~`LIjgJD&p8uRB4sA*(!H>k&*%-g9qugW>F8XspHU
z0|(*!xR{S=#Ue4YrTJ(xmQ7r9|LEM3cg$2WrGnuG<)bh>b=aAoW=hyTdTx$U^-N&#
z4GtdRjBDm$p&yfu!73+5v%@Gkc15e3TIz;Tv3VtN;m)`q%sg*U9ai7wum2s~R=hNo
ziehRP?Xdwx?I)CfY2=<6a+%&u6V|B?@kqgO^0P08dH$1ZgyR)B9nT0t@ZsWFg(9VG
z?zsfY@xSVeJ@_*7h>7y8CrS{Ukw#e78utO{j6&3|w-YKkn{q6XcICU6Kwu-1ao`q;
ztcqhWs|6$H;?l7r&qc0;*W{Ls<L#Zrmq5RxMU{(Dt6~w_uMqxB`~S!tK|LGUctBo?
zjzknJJLU>zmXG1F^8<vZ<x+mjOy$<9IKvRoE=heoE5#G$AvdQrOjV}VmwAZUA4mK)
z_(C8Vb-iG^nr#!QrMt;4aKGGOB~<SCZ;Oj_4-<v{5SY@B36^l($MY_m%f}WpBF$0l
z2dmq^Sz%kLF_P15myEyud5`#v>;d8@jI-_jL_H(!8MytNlQ%5p#>Me+f|wSqI>&RQ
z<Lhhyb8n`yhicSmxzhGR7_>L+sdC#}Y<kQbJ_rF6!5(PBjP!zlA_u^}PjF<%s**@y
zasrB=#bTEkmU_EkG#KOp#lX;TSxX^1KAN;X=0dDi>HsxdL`?>gZ}w%^(s`;!ey&He
zNItC2OXkE3NAKq1zy%=3N>d}d6Hk~*hB&MFan6nnG_7#5n$w^d9=hOp>oT>3T~q^1
zum*C_#Y763_S%r>9;2piI8jP~^(cXeE@L-)<_L<M$#LC2ap-iFk}fa1*JKGaFk;av
zAG`X=3!+S*fzgj3O2JBN4j2m<p9r98vEpY^t>SmKYj=uKfz9dBNCEB3p#s)XN!*~Z
zC%~W(?#WR=Q~iMX{29b`37DP$8D(r`;Wb7&2_sJzWa{e{mkucZ%5e091}#bTqO%|V
zV3nCA9I2@i#ub;-Y5#ZfE3mGlLX~Mf)TdjBY_nHjHXSY(wSHU!p{F=fs002a%&tj2
zc^LWJVCIMG>7$1Kw%aYEWfrXD17G5S0EG!2)p@E}W+J#S=-Y*wka3B5D*nqSNZLK6
z7vNRZT30d|O`GpoqhCYb^+#lZ2b}V{6;ZUlu7FS9hZd49&6RK>b}JwzN3nf&Y<{L2
zo^Zx}oCWvdH9P^bo2<;_MWmX*-w|Uy-xxu*x;U@Go?0%2hxrTn%^*&Pn(j?w=;z$t
z;S2ws-H(dy$wePvsRTy)s0FD67q}5-s-sngPc-=?GCS%;LBO5B`1tlykRz|de8xO-
z!?LS+?b!z@4hAI^X#lsH0`VWCX+K04e<f->$Vumxz>uuhXwcj6km^h_t7w#F*0d4z
zyF{g-(zd^<9>}oX?XEd%YPT`K%SxK=<GV%o{=wzp0lKoO`ydEX?If3geHSp%wH4Ac
zV8-YMc#e`9aWcQ~g&K3!eq+*sEw2|<$fF=o1Qe#dLmVt#?>-X5^|$$5C|CfjYt3`u
zcS)!b@6Q_hLyD*!@#aqf(?59|MSjk4@P&igsx7*jhdBn~1K96WQl-)B{L%UjGcTO!
zYZH5$U`qV_xJ2>-*^nxKaxtl$C9eSA0oH)!*BTFMOkcPV-f#BcqaDl{u`l{&U-lKl
zO#8HnY2MHUPyKu<d9Ht-+SnKd=0x8fRJ?B{FH?>PDk&;U0vUP&;an^Kj90e0i_gI&
zoYqc!b-OiKhfcwuJeIr|+iY?@G(1PDEdVAdeEHT@9p~B6EF;eh_#=*boz9DH-Jt`d
zM~n%3Ptu$2Ncm>)>Oiac>xP#sf~V)a<Ku(bJ<iksyujCm$Pfar$D{vduhyOcIsgC#
zJHv|r008PinmZ6<|NhpcPykfQ6_Mnx!f(kZbve67-j}|%1~<v%U;l;mKx8!}Hmyrc
z0zXGZQ_9avWK}2KCGXE81U-a*rnex8Bi|XUW5RFlFEO>$h*GPl03M?|P4@h3nZ;Vk
z)U_j^n^cr2sP-XHuw%%l;(#L%s^Ryd5T*0K;|FQybktE#65rZ!aXtBs(N6S@?ACsu
zpam|5N6S=H@2B%*yI-<P)LW#8`Ef^?-_?TFUw=R-a_k1=+q1kVC^^^I7bH4-UfT)H
zp~VOY0E3nc(#Z_zzeyqqX^-Fj*oA-qB4(X@CQtzRfdBviL_wNQ2xQ7(20#ARrBDC@
zK=IG@mTEP%_NoW~0B(G@2$FV(iW7-d&{!#WIiLWr;O{K-9U<b&5bY>;XsRFp00RI6
z7XSbVxIvn7ctgpQz=I$D)}>GYVz@66$z_94aM)z2AN7$+#+!Bj*YE}aZdCbRUZ~Kt
zd8s0ic}W>Q#q2MZ{mVCNYrhJcnF6S=f$v%s>n2B<h0{iKO98wNxEtMzuT*2d;{BBh
zcfIa@xjoSCJ0O@ei-t4vJ4}*sxsslX1mmUy19eZ?UgQhkwFLeS$r_i-2ivmR>XT}U
za_9N1vQ}9U)UED@*gV@@#oo7sLCA?0FV@t6+B^BAS@wP%&|E8`#-69z9KW_o%|^Dq
z*ATamw}zHe5ShHf+U93>hm|IO=kb|O);exrBIz-r3##%ypDS7`{Jwfl*z=300-Tzf
zyh8ie>)s1L@Kinq{a3ecFjv^hy78L7)XkJ)XfjB{l7sa%lL~0_iCq_DAlRsCtZNr%
z-fxptRbe$FB4WRvN$WgE|M5Pi3K{35EM}CIf<pLGm*=JoU8V_BGzY5Bgz7eD7i|!)
zG5|$O2(oJFLh{gcxa&`qYNKSI3Xm~|MsNyhJqghv`JxJ&sS{lG7PX}DraVYUy0Rs0
z3<{L<U;tf8&P8%v3px~^q-?wz6pm&bz|!#uZF&>(!zx9QA^d!_!4Ks1?nObZVI!2B
z6hhHeg9&_zcGL*SIU>zS4mR~~>xA0Am>W3jROB$&;-a67WR&t*+RF0c+TJQ_lF)|i
z)l*`bb^9qn<StFqeXxMUG}3!2NaQes{|~rhn1cN}+YF~8p|YC4BmsUZA$v;*?b7za
za#O5d(qOW%M|RI9oQY%djn>x$N_HaxNtlL>)WKs0$_9edZa}93&+gvNRlbIbbYZXz
zwOS`s`~-Y3-AsJ`_;-N|T}oaQLF&^Nq;lo67y$du#c>TXJciMS0#D*tMjfliCL{^h
zLTz)~V#v3h^!Hm_b4p0e@=+{bO?&)$Ysy$SqG4^mz*Wt15%x_<d<;hv^)@|g1WFPt
zu-Qeyb?HVS!|YE@;b52L2&f2v`j?2*!{(Ufuh*PvzP_Uv9T0R9isqZDf}{c9p<{jn
z2OwpzRTpsE(wrE^Ct3%&<<<4_vA;cg$uQLL4=9i)&^%@f(w<0UgYNRBCBNC4VZ4q-
z{LNv9L}SOmM)ws_vf#=%PQI=SWSYedf%lO2R%iu1Fp8|7)edr;VA+CY1Av*1dEL6k
zQ`2zPztY`WUv=%DDuIPvgl}R{n<F)p84KNB;K}aH6Ni$x&V|;AR5WerVWn0;-(YBf
z2^&#mx>(s%NQ3k0D#S<)&l*Fa{g!?(i|(}RGuUr1|J%maD(H;gefi}ehNa{WqO+s%
zitx)Z4m34|K-!Wor=ai;OY){_43yqtLk+(CLXIiF-qDq<5TLkqMcAmnZAbXSZMmQx
zlFY{xh^4axF!IVqi1P8f(R7)s1V<&9^R(Sy=7=&d6I!C*?l~J$WrI}FP~FKb;TTX0
ze^ghl;3kN^1Ptu(WZkVbDp3&gS+PbhQL=(H2bgR8z9&f!@V9cIJtG}2ryX;pxmFBm
z^%-~BoRHUZu)T(<L*cQd1l^HLV_E~OEXzap<rH)cS{q`@;)2Db=+ALUMT8CGc-ifS
z#F}YDHmNGuwW$GeQVLR7lZJVB3=zN<ib=mz@Q`=%QVORuv4mO}AXf`nvI}>_6Kvs_
zep+Z7X&>PNt?``lr__DKJ;($EQr895c#mIk%`;&ckjpfG-}QaMrW5^v1pPori7Sm#
zizNSqIprK~Q-(jzB~-8ucv5W4k_mczM#>qqFCcIGOLt7<K4><GYl{Q}^Jqx?zRxr`
z*tH^njhuU!+ohj=*CZe9^e1~xa?MmV5hn1D9a&qMW{Zv)P3CIW&@ri9Saa6r*Xu}t
z(q58_oN|_qHgv+&y^?ca6VkBj!5^gc;OLtdm>ZrLcn<ajN$leCb<1{N8p>%a7(WT4
z4K1SMx9li%-(<`itNR~ovmn)@N8j5!l$R?>hhp=dI*(6n1kMAtSShKAiepUZkU&EC
zac?M165=LQ`BHtf-~wWo)08OE<HIhD=h1~i;9j%5oC)zRg&H5DK}Y%Ojm$;HHc#dJ
zxv$H2c$Nuz>+}5!W4@pkb7zH^-s!AHiB&w$x}YyuIw6Nk@9aRHti6fluEs}ockIe*
z#k6LaoYxKc)ZW}O*P?XGjbeA7ns9v@=QgR7>*i;;cuD7d8!WO3ZWun;Ldzt*q-rIs
znhu@uZ!U9BQPG76j^NIjf5<66v~zly=TD1(g-zS6qUuHoyeq9bJ^WM}mWpUYSkZDQ
z{;Q+&Qf1VI4s~<-n#$6C;eUg<bNi#1>`c?I{;#`vk4Kpq6YpbsqWD|*#ABGPT>b3p
ztxclkN?d`W6$!9kvd^<Dg;>V=@%>f+RV<xtv4%Pcoh-z!QCFqRbrAZ;h;_0#%v3BZ
zdI6X}k13EK1++|K!Jo3c^}lqIaR55y2=m0ILRiZzlP|@14Ibm~PXEl?<62YSpthG`
zR>Vv?RXAG8=$|pKOB-t$$UMFuh1Dr@ZFo&DKL<Oagb4m3MiH=tkscy;sF_=fVj+3V
z=ZF1~gLo?55+TUt@UE--GZG@ZVwO4YXCRob^qs)*%xqRKC{ovSAkn?qQ=*FJLBix$
zkhoEeepvftP2cI19RZigPT6x_76&{VLhaow{u`5GP9b3BdMAOdvF#CrRnmM#oH<MW
zM~EB^A0Z~I*azS-V+C2O9}QKT;{tnqy})I-$i;S;Z(pUdMd*r6-0G`{k)ERJ$1GGX
zBbT0J4m=WLrX85~Eq0R03srxC3A9htWnKMsK7iT+g&@D|#ibLNmZiKQl3j8O5aoQL
zB+bTap9P2-xZ}*ugeXlH4?3ki0dH;Al)<g^-B84n)AyYaSfVacqGqY(w-GrXHWAkI
zS^udoH?{2~ai<IYI0#r?*0D_7PM61G67Mx$qA-5Y!BN0Ydh?ke`S!zp<As%o#2I}L
zfdBvjL_wO8ctgpQz=I$D)}>GY0zmQ4%|jS_m!P7jOh2dq00RI30{{x$1F-QuCv+ct
zggjSiQYJu=MIrh<h7p6SdgC$b*T<8F{eOra(-*aGO$qz#!o`9&@2oaBFve61Q1}!e
zwpH@jGv_-ksMYCo$E{hOW!fF)nvsXv6Cyn+1f1mtY}3uioB@BDhm-MZYc#;|I=!OU
z6^2K4<J`Q}Dl1)lV}_D6S{BY5GS7h}ky5wTk@S>1^O=RZP;5OnpBG8Lkwn_+kNY9b
zNT1g5YLd~FPEY#<Q?Du+{-(G6POVc-*$%ZG-&)Okya4}Vjn5$XIb^cMVAIk8h4OZw
zYky+9S<6-yfJR>{6>Ht?Hwdc7{wJycATd#Y+N=}aueK-{3O&%RZL)BiHHKQ8=-jt1
zLEU<pgZ9{70009300RICcmM(_x<Q(<ctgpQz=I$D)}|@Dj1}hU{sHideH>H>89FvK
zW_KNbzcg4edju-U-dYja(oQ~2eS1SVQEtsDeUUcR9SqD=e6X!8+5<$rGG;!%>Hh?K
zf?$o>Xzb~LhhB|i0T)DMPZ}3xn8InFS1xhTg5p6cPyctali;?ce#8hqYav7=@{#B)
zevXlu%b2Apr|me2&h(l<ZJ<Y^iSZ&rKOK9Pyg$%LaZSDgZuZw1;C6{s<i|{@i_Ap}
zDrotK?Z#YY2}Ql_ocP>(H&(iyxhj8S3!OEB!1XpYt^H{i-U9X7H-!<?No@GpHQfZ!
zBC73*B}|uMs!QbInNFfoMv7$VYqlV_KOz7^%`J6WQ=)O|U53(nnUEw;AYRFPVIf;a
zav>n3&5Tdp`KJ9R4>EYvHpt-q{uEth?Q0duL~^peuC60}o7Il)xiUg7=G1HfWt(vW
z_yr#Y^FV_W2no!e-abH5h%-wSojkxjoT|DOr{AaAU)Q|;J1ETK`PO#K--`h?AzQ={
z5|9ktlgjc32+^lm#Ia)uO&`{8={>8h<oF08&cn7gQFS6^kPWHDL6A)rpc}*9>(|S$
zDNfxw88+f6jHbfQ@C@OTrRSUTi^|PTN*84!!FPFpv&p^dc$N9@7ZFg!Ez0%T*Fd|M
zlzg}0xCDA0T|AyP3K50{%HXIBLq!!t2`7Wz)ae9;1jO5ve%BZV#VnLMSkM6KZcWmN
zihm4S-Vqj*X*k5uG+};73H1ni`|XSBXU|;llD${*TYt7m@CjI}HbC^cDt6d;MF)id
zR+@w+q%fcymfGzA*2b?1Fu2l7+6y_Ib>BwrFfMS|_Ei34mK@rGCpQCkP}c#+jJ^C8
zG83Xju4o&=E8C^KZkTrok0Pv=bKrM7_tO9DUs3NPE{m{|7_1RbtyI4=Y*H3w9yENf
zhlbE5_n-#pF5YS8Fj;UB+}N=N#QzbXQE|2-{t$mjn0u%^t-?8S*W#=`FCk+lJxJnv
z#Gubm5ViZ_KlKjkGN_P`zN}X95KJB?D2~8-q-QH)#j@*=)zcjRiprc%2CHdXDfM6l
z0fo*kP5xgsz%YuS9N`#z%?l~P(N87UM*Q6`j(Zg9r#hW~V99soc?zsC)fCAFe3_!U
zq*L0)&J;F#ETnMY>IqE{;+344?}!ume8XBPz+Q@>4Po8!SHV-i@Y6r$)f65<f0Gl<
zvIpo#(%0Ro-)Vg;nm`!!4D;wM^uUd#t>HFfxrNgh#G7~F{UxRHikZ7A)`0Bh4DnRo
zg`kR<`m7I1Q)~oW=asXchv_O<Qr&OK#HmD?!iS8w0GblPNkp8N+)>;l66u#?&^9If
zrP0=HUJaA?ZvsgiKcXfaZ$DmW9BchPMeW|CVh?KKl;~DaW_j}s9*)U<CM9%cTxstT
z$;r3TCY@iX+9%H{Pv)+J$aLMSCm7{z>Um5sIcB{yT{|yrBanQ*q4<QD<Kr7$DC4Ae
zwDc0_tU00+RA~|XNuG%YbC)qcxv6{Q#YrorlyI*|V~;B}dz@lem*RRqx>dgn4qabv
zZGkO$M7t~2OmQ*19*%R^-w|frku<`%CGf8&i-hOldlG0=1Tr#fh3RjWy>a6Q+uxUA
zqpauQ(XFsJ*QqgFzoKM-gQf)pdvS{0n!->K2QC{Nt;!pD0pwRT%rkrLhhkzT2D@+c
zk32<Jiz4XBxW0|<);V0gYR1FnV19;4tF&S@xBXeC8g8&}<{5QY=JGRLE6AjN0TY>q
z96jxSn`Yrgw(rUji{w^lVq=m3WN45;y2IB?{ZNDr{ji)=0%u|`>Q0Hm4^-0}I^?uH
z4>msA+0voxGe>jT&ky`8eo4G$(K#Mx(csC99dJP(lH}{_y0-obvG2VL;ue;bn&<<m
zRf!C?D`2&6CY4X!YksW9qRvR6MB*S(-??ZPPjaMyx>LOW5H!<Uuaj4DuV=rs&GbIy
zC=Asr(OUOR)Xl4PD^OWy;XaC(9iuL!XCnM>QBXnvtvxEN1&Db|hZY@>+cM3>FPt0&
zb!4xJ%Er9|Ecs6&yKg{)_BDsgP~o%=j|(a75=2v9G;YkN2UAO5Hr?URHHQ=fRFGAK
zklO4mFMRG+#&>Uzd`vGN=j8<=&{prdak~<oWrUg`&N+C{&g?Bs72DhV+ex(3i*O45
z^pLKCU8&WLH{C$Qq4<j7Gxc6g80me2T?I<VBcC^8qNZrs--l?Tm|A{b`NT??XF9Vg
z(~Qly7A@wnbxi+Amq!5z=Of7yUv61Y1XL&Uq&9hF9RftN1-gayTUOKDVV{_0$TXI{
zG^PQSM9NAXkNo6PbM!=J+=7_6Yd%f3l$q6t4ZqlD@bo!3Z3HnHhixTi(m7#*vF~V!
z3WD`16P{e*yW%JkMZB}JKBzmeGRc~so~hNwPG@N@;{thJw#X;fp58NzdPpDV+&Je>
zqsxP_NWojz<{Z#}Lco{h!(G$vV1O}pg`*`fC@1hG2qsb-gL&-PZwg4cVf_g`p_ov=
zAA6SF5neh#0E;HPOj+=AVXOWGk&r``lC5FYCArb~<r-SO1iFRt{;t%}O1w0YTCchL
zncB7SPuf1kS5BcteXFt5d_Hft!v;j&i-0%54cwwjr}MN!)jgoZ=1kz`7GG$S?ibuY
z3Z4tEGuiwXVy^|d(Vs<RZ}I)q*w0txcSSF@>v26;6_l68H>Vm;tV_Z4&ht;E?WH=g
z^dpg(BD_jR{S90a3<U!*h1CR%h+M(Fo-e)&X-Q;-<#&zE7*oC^&Ecrkvaww5a|S<t
zs$;HG0HB>h0MEuuSvKofDC*dD`JtSQc!?5m?UA64zYvo}NyWB??7Umb`~__vjLLm&
z=?iKRsB)N1(JH5h@6isuDL=b}D?9`?)+{h0Upy~0dxRrOkrytg9mO~^ZP%iMqkLzC
zmD)m<;rJ2Y#?;15IuN6MbHE$chfADs^M%EvPI*)r0DMS!)gD?AXbG3c^}Sax6yFE1
z#*=%Dz$A-lba4lh4Yliv;Q@L!;=nLzfFIfta<fSFlHFIBKwDkznFxF}V%Y53%rDm@
zrIXsD$009Sa)7;iDdo}lyZ_cQ(v565Z${Yaclva=C|dlhV5t6vT#Y=pE@uL(8cRs{
z^9gS?DYzdOwZT9!=5bB7L6}96`^O3N_R?$2>$uE{XEmW;AujIAR#BB>Syv%44Bf@1
zW$9rxOiispb8~cFtk_T}m)^IuLt*!)i?Ige6r*u#;2f{%>eSAIER;6ugsnq6`U@wU
zb<H%o;fl_^ed}aq!3CAhLXBEtuMDi&yudGJ+HIaGj42gPLd1fy?|nm{<Ckoq8Fo(n
zS<??<7Y+T9*=xH<sZTkK1%FFhA<u%x70Nsw;IuBOY=z$v-jX+*9f!`2(AtG2<@QrF
zW5@Zpcc+uxtE}5zm^X1uG{|uF2BM$CXZ~M@tQd-M9EE<`_#mtJ_B401sE`g2E;F-0
zyQvYGuPbph8i4=a`JYLgm)m$DcJr1vH&oCZC^-#xZguvohs#PaN@bLeeI;;EPJznl
zQ*!|WOX*_uk4U8F#p1(8UMC91i2W(qQ<$9_m!@Xq1P#xiJt2lyLL3p|5qm3uXLT$Q
zzo_Q+&FSjeTkc_)7lFvsb~vx(#;mC^VLnX_Bz7U>J#xDixj_Kiw4Aicp4C*#t84kW
z_oW=dPmEb^H~n$d<IFgiE0%iaXm+YxA0LWJ>7|lvf6MY1rQXt*58c==_;vb(Mwyd2
zvK@JDpVPh|b*F7fD38OL&c5Mpb1@1y&v6n(<9g1wPiuO!wi{wAnk)JzhcJhvk<XBd
zmK3dxfDe`8S6UVu_Af9O?KyfFv!sy$9E9a^S$-1MiMw=~47_5HjZ?3n$qBU-90h<V
z+w?*9RO=~alE#qTG8d6QVp3*or^E9y;6o{}y*0*L2q%asvmdYZ!nt%x;_nDd3X-z<
z06jp$zrH1)bF<jgtw8a`WK<mK8Y*k!lau?%zjAyc=TdQwtk04$WC7Qs`r0j6=L18N
z3Bk|f@L`!U<wyq?uIpp5Ej2*`<C*QqMYK_DD+i^$dz_Z*<9-}<`F`lT>X>7vCK39j
zct*Ym7<gc5=|9Kdq9heAgu4N-ow1v^unFS4OLwCRz9zR$Y$KlOBW<HgIU_kuF>QvC
z@q_N_d7W_Ha>@LQSIi`5eg>Rd(zxFm-HTj18|Sers2^w288V&2Qb*e5Wj@dSh3whe
zm!ZCu$^A31R8d=Ok!gS4D9G|m*EX28Pc4SYcEX27war=&<xpm_<QOOT3R-ozQAP$4
zXAM3FwFkzx6M5Ih-W&le1pifw&2OjZ7p23uVlF~QF_Id_u-?M7d-?3~-+8<{hECi~
z8IIxL=G`?;tX&X*)mW-u6nXl6*d?DWTGnR+gM!~F&E;>chN`xMKlzC-qS?s@vp>b4
z!ORb%Qbb_?XH`8)?HJ6r>^{7mMuxuB03Il2ad&ott$utK7?uJE?a0a#dF}{2xdKg*
zcLM*>35cv3%epg@0^t!mav`D7CJNKISzFfVqrGHq!u1o&BBL7Xt_z(1&Dhyg5_0dg
z)1NU6yA_vSk0m?7wGVtc9hbrI*6?@m4#i;j;;Gr<&@qBA|Fh(>&ryN|4Z$PXY7$T*
z_I%)!ll0F!C5IFJq9@37RXXa0XVT5P<02K*$PN$rG{h#kAXMXe>w5LEK9`hvi&`H|
z(0d`xd<WK?U+`^>mlh}LS8V3hp%+li!2toWlb#=sp8Po+6Y5v?G^WL~gz2`zs%mxC
zYu5!*yaEtIvoT<Mp53z5GhC6I(*GNxg>$JXbnNbBOInRD@*i&Etjq}?uii?x`w`Eg
zoM!If7r~9Vs&Z4=*>8?8o4hl;BoCqu8Aa7BPO2uOZLLdt1`$vGT%LcT(KQLvR4DlW
z*9B%HKlz`ZbkUG)Lt~cT{by`?1W=gsCJY{XJKsrdU~ancffen4HdUWB*O8tc+Hk>z
zlItWt=&uE=zPy!fF2ZP=n}BG5^M_0V9??sS4}GsDhvC$}|1kk8Sh+|4`{4P-t*F9o
zkNDvLpM=HhEVKzBnakox&O;Sx-Vv=dvN|(-zm8UJX-m7K?V|YG(WDX5o|T5moi2Na
zQVyopG-QQ#g>LrN^wsKl|M#YSg>@ls-E3)5gyM}os9I_`zYcqJ6sq(ZYv%A?s!YPH
z_PxH{fy;SyJNdwAN!LLbx?R|0!2o;M?vq9?xYSg9KsWxKMqf>H?dq#=!M?6E-#Q`#
zZJ=s73tnsRrd0&eO#-{q{ZWbszy$dg*Y?<8*b;e2T8={Ve%%py#`ikg12zR=fgY0c
z`M~Xh=W=>5Jl=_?+ap*XhoEa9P^xC_MAevZ`D5f;Yp_uI8EHo^=TLV26Cp%?{PVzu
zwyp8*2;yc9(%QHvkDvA-x$1cv24W6NPbJXP>nmCSRDB^NbmKXN4=Q)>d$f_jOc?)m
z`SCSw&aU`xrf7KVactx<b9vAe32oL@0XsMmVr%h<o=hi{NqZ;QZF_V4HI!NQ6Bj9=
zG+S^j;oc_@421MRB;LcT&*x*~_>pVl%l<&Q&@#;Dz0~Dn@K{?Rbt73U9A>V`Cs|6w
zv`YG}P29zvKzQpYB-}F(p@Q@yGZ*Ju+1W5=7Y$NVPVAeK<uerrR@bgto}K17^n8sH
zkn}}1eSeT#<wlj7-#v)>h7PuA-ty`Lj2@sR@-+qf{E1msm^!6{+h70rc#3F4sX`ea
zEfn=>U}>;j@~lvL%1=#f84B<eiA3GiC@c$k=P(fC%(I$-=A&@KL$%Q>4?0FVE%O(T
zZCVX#s9B5f=ey&LYNnJf@TBVWu40^KCg`0W$2#Gc*&w8;9{s0B*=wK%KU<J>Yk0!q
z>Dj3FkxhR(s!P81EmT8k)R?0O4G3|X@oR_iwoD8J{;v=ejEPJ-j~YIippikrfVV7j
znn)PX70oOj?L0`_OQvyk0xcy*jwKC!iRF8^&m!%dNY<eZ=ba-B65|<#Y7iSN>FK^o
zf7X3GEA6q9$mC`52T0g+F8s2~IG<0JmtBjiNNO~Hs9e6tWK)NDD<ELehU4QvbvL5#
zaX$_4-XUwKPAQPYbF|kVTdgCX>Hq&|fo(1y8nacRF<Y=fxveyP#TKh|;|6BsZMk>k
z#zyK*b%|i;)kmTXIuH4b#;YVP!paLWO}!BNp~7+ZgD|6jN0s9LDn~OhbNiuKp`U+2
zou(tl#{W`0`A`NFLuzMnaNoBke;}*#i#?}%SMgkd=tVDMRRscIf=da&`2bkL4O}VB
zOft%P{e&**tI9Ytwl$WjKsj&{e^Y)n($RW?%N+b-(M<pLX4rw{5b{ZPB2~0vZZk&Q
z8{Th;g-)VifTO53lJ)rGQr#h8d#@&h?qqV6O^i<^2&=DkO_Ty2j4Ax1I#1m6pozz%
zpJ(yK)rYcEiRai>%AfFF>#)i7m^Qq2H|%pAf)Bf>B9X*SGei8TP!2UI^sWC|t1pPo
ziT-ka68<0_?StL)(?t&bE}^jRD;!pKUd^{^og`klN+X6m(d)W2Gq{~zP0zDJIAihk
zbm4-^cGFY8#zn^#F38gT#26+TWHBtqFXJNI0S@Xi`n{)Dr7j)AIj}eWB^FTUfsLRy
zqo|7$t6y2DTqfckE$Ha~<AFjFZQ|+%!bj>{L^VVB;PXH_E~Gj<n_3r4wiG2!L;SSP
zHdGL)(~30?8-)ji#^;uiGf(x+S-<gRmcYyT4yLW7;8P&z5BkI1NYX77MG)5!M>MIY
zyd%D%h0PXKWBbtL8F|hF2y7hC5J9~H$s9m`+~J9`eF<;;uAl3<glq;vdOrL@da#L5
zo8KAm^B}>yfWZ*9p7<|`G~5?CX?toG`&C#$6``tM`XtP1bvD%#$}E1^h@_GUsZnWP
zh!#(6wA(@scmNlLyshZZ*C?hoyx;s+)WV+t;jHf$2iiM>5x+Qw`K6k&Q$ZfuTs{YO
zc|ANz_C{*K$aLwo2yHN|Ibx$JXX)3nuI9$av|=ZJ#*ZM5`MT_REjF}FjM>}ly%D-y
zBZ*_;JH-vhX|*g=@pY3}A8uQ3*5sFi5eNE-mayPHW}Fw!(4+mhd>$D8Csz2sA`M!k
zg|vIjkI4Je-Mko7&Oxvnoz{{vJTL#lzdu3`;D&7vUA_u^N9ziF6AgbC*eGj#y=}-`
zsg=N!+w3L^rj<Ez0FBde-&EgP>-4J!J=6doZ$u08Oi<)y0}+cb>G>QMCSZo+7u1C9
z4^JEab5|TS&|z1~A^)>^59Ck`B!ki8A9rL#gbxToSA>?4Az3C%Hmw&~2-+%T@i4aJ
zF^GknXhv6{2`At99`V0`u7DO!INg_tjY<1*AF^TbXioQZs7XM4HkKX*&V)hDic$J%
zXYQ1#1^SW4*5wrNQRlN_yZ;^#3;R{(fJ;(IG_fn+P2PGGM6+=oJ;P#KiHU6HzB9d#
z-O{35k}>*T#W_Qh9B$scQSSxXfdIGwKae@LiMLLz^^Z`fz%jxlZD~HXXqpK9j~XYw
z7Dt>F^s`1)5n)t5M;V4=RF%3QwjxwqMA^Li24Z_rBPX%O)N5bon#;hhq1F3?zSVxW
z^>V-O-SJCl=Gl|}u2Z4bS!lYvKw0-%*3Fe+^ChJ~&~;oGB1)<6q6_PMoM(i7Ay8&U
zZ#;#KA(M6OINvLxNqrWvNLkL!0nKaH<n7e8(`IROT#n@84!0DoHs2Ky#$_pR+-32a
z`^d7FR2ii7?veLkyEa3OwDlt1wIz97<k6=Y9ajLnx%@42kD*@M+FM~5ey=0FfynMN
zG;EXj$%9A<F1Y6?cfx)jaCfyvKCY4o^o_xh^TpKcVG?tOBXlj!PA|QZ`W;Dn=2#D6
zKq9H$i1g3q8pmbg`KqTX{R+SikmgLgODMYq;XcG$#3Akj0Vvo@9_iK`^3*Ku=IBZ_
za4odExT9$6b4NdQkNa-3Kg6?%4%BIc-UD4bvR@iDNV)U~D-A?eug|sVTA>a98U+vn
z`$6XFokN+jA_7&iMts|}N&OhI_tq&Fsyi~+>9}kV^1jXtNjEK0c-z%?x&#9_W|d2F
zcx&Af2=rWBCqzc5Ym0304^xtE=ED{$KA$pkD{pLC#zK#W)f+|{7E2bE6la?U+yex@
z?dV&9MM#%3Js{FErN9f9g>f9{)w6|XNhG$@FyLFf6la@PK7b>Uy(`aHrBkU0ud~7e
zp46NOZ}W1cI*#aqyJpP{D576@IgFOQNy5lmehYId(;J8BOu8JIL;wHz|NF=PIsg9-
z&VTrr3si*?7W9BQE8982WY@VbOAbN{Fy0McLWmQ>D+gHfGpf4{yno(bvh~_S3y>ou
zZ*Fa-^4Q%Es8CSpiEV#j8&ewcdd+gRbHvp-+|F<!Mul?``y;cWiWR&HGg`2od-1Gk
zDoT^)^#A4z_$K*!p(+a;=L)iQhfSz3%sYfdbb|)Dub|hQ5`}l_7dVq?@+gsMmls{W
zrNg*b<xAJC=Cx%Jg_QB19yJ@NNp0YdM7Y^SWzNBj^5LRy`1Hb{-##oYPlz<73uV*{
z$Z@iYB76u)sCK(>MW>$DutlsiRV>rL)Y%FW&4&7?JcQg`^f&bBLKfYC^wibk9uFXD
zNoPjg?H+^X+g_rSO1}espHBa)VVN8)myxTgP$Wt?=Xm{zj)P;b)_t2_M-6u3bRKx7
zHoH&Ajhs)Gne?uAGB!KgJQgR^Bp1cJTy%DKy<62EyB?F1uQq{YG1{0;9(F2TRg^md
z_YC`E+!$6JlfUOV*q&q+vrFvn3NBDW@(f(4>Je1V<5hrfkZb3a!Y1!%%4cvV$y%0#
zMB`+69<k>=+t*NG8@!Y$(g|s2s8d3~Ql2cVPYlVQ#C)DlZ7~<198KZcAS18giOcK-
zJI=LzK#5s9VpztM%3e3SyDXWq%-)cZ>JK_o1o35Dl$g%8eZEKM*11Pj6*`8CVOvdP
zdUFPK!tT`yUWyz=A|%<L2bZqanJBxjEz!UdrEdgnd2Y&+HX<AU4Ref*tU%B{gX5>C
zWb3#4xo)NgaJH)rmC7y=^+&_fRk#Vwe{|A>Sl~N|{^kwoIjDdH4<;;HNQ5`{3;fu>
z=-PN_$^R4{gkB-L^G5G{Fk<waVI?ElvD34SN=&dwOQ+0hdT)opv?6)ioLT)<+fa?}
zuG(+#1Hqi#<>`;yClHDT**x&N(->GxN9IG)CnNE^NMa_!^>*BWii)1m^)lT3pjU;+
z32!cd3g@GVJ`ea+2}<c$G95ckoUNwV+f%jUt;Fx8&?426;Ax^`uFc^^9mnNyDq+MG
zEJNbNGIzk!<_=m$@E`yQTR)e;{nV>g&~GRbU$m~+55wfYObs-g4Zp>QJZ3CY`)$1o
z1}yA~`xdgxs$KAqEmww{h2QSVJG&yI4R~_|%1ek8&@;4Uu9~LYoS?E+W53iBvoR@%
z8>rWwgI4Q6pNFh5=7Ea5s!U$4X#w;yM!^hiPHvPgzg2NfLY?s*fL|&7m?{N-@8cDW
zdx%%o>%WarW?}jfhy^?2A2@^a(hF%eKp5-$!p@9@ud=;xD`OuOMN?2d^6exRS@E^z
z{=fOo0YZ+1`s|64yBr6sPP<V%x0pd8^Y;%@i&vb%W_njQhmh_x3h`2W)GA)9@|=P<
zLX0~Pv6^cmt&=;!Y`xX4&}B!hnM4*ZPnTvN+t{$ZJk%Se;r9&Pc0+MiqrmztUt8XW
zR)xCUceyY|iwz|+3{6@mL~#dJ!(y^U(!+{DN!whx6O3#W<GEiWYnlK5dB)6KpD*Bh
z)S<Kuf=pn)(rD|}`;|WfsQk6;5*-2Upa8>81fNo-+W^Vmur&uc=h2bWpu7QV(?PP?
z3cPR|J;jYRFV!P6^6+?DaD=Aoj?|%gQnri`7i^U{aBLpxd|@Y;%4WTRYN60ZtB=Yr
zc}!51698)wy~y^BTjq~1p$R|cZ}=ZYr?Du)LvA91!(1n}(Wu$OtclM$w#r+M!-{(@
z#TzP_155KiX9G8srKX@+rRt8pCqBO$E`X=J!id0_G6s*6LBv;Zl57-|k${4*jTM0W
z=S0bP2kp_4fh|5XAS2H#nEC?j&9tn;D~BP#L$=fri^3FNn*cj+JLWuGuLv__Pc_P!
zyM{4EMFtl@zL(qlOd4NvUyB576TTY=FlH-aH=J@TPGQXoCAvY)h1ARENT`uyROlzM
zMakcmpQrA1a1V^138)^$N0$&uXJL=YIxF9ep61W~=}b$4rLjk3(cPXo;2m@Ds6`xE
z`t>t}a_lNGfcsKJ=D46THj@%myI<wVpnm^j`Kozf=MaoCKp`r)eKpsjE&Ij;M@BX7
zuqdy_2L|hu9^qN>EtXUW&Q1L!)&q1|^KGIS#aYM_0$_WBRfYyYy1{B(cYs90Y+zY*
zlyakEG4$U~%%OlPLb?Jf>5}UKZx}u>o4dLj4-9sfuWCZ=9-y10wA=V7jh`^Hm+m&8
zB%VZgnOZ+3jw3}RoZwUNG|^*u@pybwM^LU=-FGPm(#U;>B@liqn2udIE|BP^g{e|!
z4v6GOC%NS)M_aj{?xl>qVuFMuk@*g+Oz={QLi_{R@iL}7j5x~-n90Ba9n9OdWCxj<
z2xmKx1Oa>4tDwzv<5{oakEZ&IQ!tLOxy8Bqt~e7U0Ew47Kk#JQLeHO%GpYtBf*M=|
z0Y}0QbC|7HFo})jpqg}mRd*>ymw?co#Oeq1M~iQPJ_|A->*TF^c&+KZWZG~+bu-p+
zqwJf(-Il=vRe>Vy;Tcx<1dJjsp^kjW^pS*~Ol7%@36ZVjEQi1Z@>sldiiq=@Ftzy!
zn^A`v+X>rRY0zN{dwlvrN{SHLuw1ncF3(2%m=LQp&Axgv6ZAfgDH<zNa8L{bqA)9I
zK*vQuy?UPI4X}dE<?TO0Q@~9G>lj?i4SSL2nS6Yd03LEW;L#M~Y<}7`Fl!=PYpY$y
zS``T(?O?i{nd1D6Z?bRSHgQ@P>1jH}7+h)Y3YH~1{MW{515Wgxla)u|fLk^Ga4#5k
z8rZ*M1*+8cUyncuY%|eXbJFDZW27#B;{CF^7w>%DrN*?M+d>%);Xf8WWS}ehD9fyr
z)OFxg9f7>GhBTKcS&G!3P!Eh^lOWVgqZlhAqVA@){a_BU^-RkXy$e{%rqj3oTu)Z=
zD6+iRE3|K%XhC{n;FJ^TTMTBo`ZbH^p6``b1n)V&rd6pR;XxpV8B_9W1{YqX4<~)y
z)NvHE4Sz^vvM71&O&e0q4!he<d6H~<g_d4zooYtVo>9!L&Z5!f2i3F=C`aZw?cfDO
z{Q2&m)v}%qE-;+uxl7$6jgl#W05A<h1=8<Z<revHUPor;2#x38*ROBdy#BYX&92ey
z&$4nw`i#+(Q)-71Lp^};X?7XbDVZ4rsZoilU+N?nZb+mZx*|P(;cm=JB_5>_sJC08
z4@;NQ^wk49MJ0((7Ip4Jeyg;4`lcEPe7bGBYDE)Y+Xgw7bZC*v$%U5}qW*xvXXcn|
z&T9t4U6S$`y(^z#zVqk<o$LL7Km>)%7G1u3oND3DXdS5DZ-s_=Th(~ZCWl1zkk?=6
z+w=DDhq3i%VbWQG{&6a-CcM4{L_If&tp0z$2+93N4*$VY<F4<M9H0>s8bBv}l(Wd+
zXlvgbm^WJw$9IKE&W`1bhRne+u%7-fmj<(nKS+aC%IqFt{vZ<L8;=)TNx-U4a$E>y
z?RI7#hg?X`L^mzZJ)ClG)%LwK)s2P3qb-{;->EDbQ!z#r=q~2w=8+~XqZ=X}QGeC{
zo&)2UJ01<2C*lkt?8d#HUi(|qz2VEsCs?%Jb;_mR?f?I|C_l$lE)m8Ky?e@&`49vZ
zu)dUa<@mVxY5cl9Uwm`~&V4k&(*JsOpgeX&(cvqpam4V7n>pGhfP+uG<;R)_T}QNm
zWG0lDTRhDEVMMaD-wh6#BX=6@wU`?yIICip<MhbXoxZYtdgbycuP0V>;E`LllS1NQ
zg>B@|;lAWG(I)DBbVYyvR$6&QwbaPR{Tt=}^N)B^8EIH<$n!<|XWHvrNJ5Zbpv^-S
za9#FBXeJ=yj9isDVB7Gw{E9)u{L3lk4_$0LAex073zu5p8&vxSVLqKy_TSjK>-M<g
zk!-n$2rYijbWaRYQ>^SRbYUl6#xYA$scd+TZ^|ia0<P@{-Vzp{c@?Vn*-7a-f9Lwe
zC0l(E(;4JwU?s+9`VnS&W+7N$5^C4*0QQ_Ni_!*gm<$52^jE8sfq=0SDmz@Cor$5d
zl4|yTu(NEzfs#_>{7I@`;mU}x_M4eNoU^`MY0cg^!sVd$UC=q?tj>6Ce{V`wL`*MI
z5q-!Cb^e<;-{Y)<Tsd8dc77Y6a$K>DS(<nOqx?mJ(;VDM4gyl&32P|y)Znt0NEuL}
zs<!t%8v5f*;hcY2om7(0?;bki@d11y2%=4neD#_C7%v{;%AJAy>L1y#&aN~?-k-i)
zE<o!^ry>_tY5$Wyk00dthxMEQ0s$(Dpa1|wzax}ZnP4ALHLpBtU;qFE000pwo}eE0
z(pt<-3+QB@?d@buN3^a_NpH<tAh6cAbp)Io5H+sZH8)|Idq73rDLy`J<{}|Vu`mj`
zuz{@&q+5y<wJ0e&I8%Iu4#KpRHMC@%og;wyj>A*}xo!Ln{-_ea!O3AFy6=dMx~m;_
z@`(ap{&um!$;E$uwz<MMp(%=dOO9Em?^YO^KKc)|-~)*0Ta%S^Q0Z{)3m@grNOQ&F
zkcEfehG6XM%{$wuTHL`105%ex&XGa$2;TbE#a#&UkUi2s0<S6QoF|OgK0=Eghu)#A
z<kL*dm<cM_u61B-H&wL|F1rGwCszb@cH<nbF8@lxIp7m?-M42Xg(+;YnkF=5sH$uQ
zy5f%w@!WoH0Efo7yvf_g=z`9K0dd*y5b`a}KcVqgC<ZPsA(<`-s&pxWOkZm(!$S$h
zUhnU;)$d#3LFXgcxNi}DIDuo;pFTcy7+J=j*mo~`<veWv(1!X0E*dfjPJ8)^r%}7>
zPK5VtwSHVHGgg?$=2vpU29nJti77Nv4vv@St$E3&4@ECl4glg$+t_9o@@)1Iar!Nr
zP+*~C3uJ{>4*l74Z4ZHs%Lh#H9$bfla5b6UBA0+Rg?hb;1PtpX>a>(v+#4Y!_o)o$
z0@NB+X|JR`6rNyuFT?8MpW;%O4smRDo9oMi?l|BVa7ibG_PD-X3=`5jw-}U?Vg817
zGSDQl<j}kBedzi*`gCZW`Os<YOi!D580Z@hE8?-ZDL$zUW{Mw6KS;-WUL&t2QT+5y
z-=n&QRS4?yAL-Q?vKy{z`cX1iNM%IVNpelWa%!si*zi{<6&Z0z=4BgF!cDgDcuMf)
zx#Rr6(GdvW{3_t;XnpW_pcui;Oc7M}AuNr{xflT|j4R`}K|0$ngzk}0xm*b0yPS?~
ztR2IlvW0#!3}X<Y{vs1xaQ4pvuv<(w!AYf*D-jomFQiiPTFO+2TQqf|Bo`5|`22Qk
z%FG!%`g=M32=vJi%r}99%V6RO2D<kKcBoOfZk34h8TuVpQiMf&tR1}icJH<os+2Cj
zQ7oFGa;s{6xh-a6_MII`4sS1*D&1)9K1}_We3O6fZmx352{Kr-|1<klwp2dAzXqu6
z6}R9l1N*wvst70FLYx3KH(rLK(`1TM*3XlQZxG+jo-_Ak;8O*L)2x|eCRhEEKT7U)
zLDwc=Y<;7=0y{16KGQi3e?^;pOm|cm7{g0{|HzXfsh=@@jtQNE04z<%9+#~tDV=<A
z0;BQtsj`}}`X5EeBMuEbbG>8-PY}SxtSPOxxMj5gvPE=*fh+&C>`kcbX#2I0=n<nn
z*#GOClUXBH%uVMwati!^`&LoB$Z9q8&@3zmgbP*@A-{aSQp61L-}Sr?E^k55o(r_~
zN6PEF6ChpNd|01b=mXqTUn5q<2fqx%Gzi4?-oj8qkMS&>gMu_)QHZ|=bXM%tCDW-%
z&h;F(>zz(QjU2HAG5lSfS`%juFxFP{)7pQ<`l8c4><l@+#NUKAWj$g1{yNO5^Zkgp
z2eeIf(bl<?z}<FQBW4sx`*?j!rV2cIvM&cA?q)6e!H=8cg83%Zd|?v-4sZ*9ZmOMn
zEgEfh*m7HIE(>OMRZ1A#8)rH7_Gtm`wihL$OTjP!B}(aOs;xV^Z?>;g=n%XfO_xC)
zJgg)rz){?*V^Z)~>9|hro(6u9V$5Y8MM6M19OUzt1J^B8?fuEyd5qyh8Cxbs2wW7K
zUXAVG9A2Q)Wla8Zg8Xn)#~{U}OxoO<J|;2vXZ3vn3J@<$dY&78H`s<jng&^ae|W7X
zp7MpXV-3GgUm(!&iKy$KDLZueM@R@muNTx!FI>wVQ*vR&0)>};&-XPVr$K)eWI_mk
ztAGEm|NqY-|NJ|i|Ni+%0ZQLDI(lG#(DBAT-Pg(J&*Mtt!^H=w7Y`5=IA-QXT>s->
zy?^IYFOUAq6TjDe#&yuU|0cJQy%skmhK*RWVd|_YGbTB9cs*Tq6ue6^3j<*B*x*tt
zciyyw8^8P?j3@t){~!PG>2SHO*V2lV-9EjTZnN%iay(x!(g3ZzI`@X~KsJQP*42<_
zftp_6gK)!%;$TDxf_=96m~p9xp*o_nNb_o_Qd3_0IHJ&0Y=1alNcRyHYL>qUi3QTy
zbfb!~p&HCo1pAXUcxNZkO{Rl`c5jp)xRm{mTVR)R?!e{?&v_E&c`~RJ0nk}J&gPZy
z_~?22Ya~miWn%$)qDrzDI6$n;+ppeQ>1kkX_Td(!4tFV=x={Tf`y$oPylofrd|UNq
zK^1I+IVy{ijDYV6n#Xv5u*?o@sZ=aqKLjXUA4<B3;ZP2-Q;4TBp?(%P)yvF~h69_L
zhlG645!?}f*)BufEhFZ)$zl=3^bI&fp-k|Orf=v)6;?i#Zgjox%?IFyOsFUS@PPc1
zwoXW4&2@ix9#BRZG%dzPz~gTlmZM$f1Q210(Pmj1HGqYPxzF<`_n=zy$oe}T#o|QE
zL7cApMj*-2CB4k~PKvF0HOl%sg)1HG>-rqq3eubvFoJt%W^%>0D0mf2$(yN_@Z5`b
zx;Nzet4TxbG|t~ysl_au<Rxz9(&r#1IJCR`Ne=ywy{Fin*+{kbv5<oJKB`3xtrVy!
zzj)mU|D@E=kH)??CmFK?8)%^n4ew97K16i(-7TRjT#Os`Jr6XbHFe&u^iZI;D(-Qy
z$N?+P?xM$`joHETg4QL&#RZ@Y)gBbEZ=JnNX}2?FSXa^(zAP`<b5q+ZBNeELH^j`3
z=3(*t5L!iyvrX5$v$}!>ntcbM{2*r|<p1`RE)8=DQcmvI=h?e?-8gjd7tNg4ih#)V
zlG+E+B&)nmaRFO(A3IvgNfPRl&kWJ7Dy3Zq?%!<RKAbL?I%hM^{=Y{VIYefHn)t?u
zhkr&KJgbCg2&7v#k+-+7dZlm&|GsWT`fUyXUTUJUtuo!7BtoEOQcERE?Q7MOneyEn
zd5`?2iTKCQ&mdhN7G2nkY`Is4r)$(e{N?L+;VmkI4*{j<k?x27mD0|Aa8Z9a1YrCA
zja^E@Sp3db&q*$;t-?X~2oj;~R=rVzF#DE&N!Nqo$Zs<3t;htbM*4iv`rtzX*3@+x
z66%c0OW)cs5GwrxYjNq+hZ8g_3B`fUQt{t;&5LL`)4Quza8Jh86TT<+U#O;}IbSOj
zkYh%_KZ#&J4mj7>(2s#nADCI|)UE`*r<o?9<3N?l((;^0?(lzK4b0E`|Dkuv&eXvx
zMV9G)7r1Abd%lu@Km9DPn6&B=3!~<1hVS`62g=1B9vMi_My~wQRcD*g%=lHrW}d56
z^?dmmpb^plIx%0>MxR9g6BnKNp3kbugUp&NMX>r9^HrSJvSk~9jAhAt*$$5;%J&%X
zbbt^Sfx3w@8~i@g><b8?t}i}32$nY`W2;gNkzHkJy<zzq&JE#kf&d2d4$S0_L*Oj&
zU~%aFqNj3&BIh%!fSrKe*Kbq)d#zR|owEF8_}Nd+6bfm2GE|(iiuf4<2f@ne3GB<#
zns`F?1QC{uo-H;pJ(;e5%uo1D|FHC=8Js7%(7bT`0H!{9F8zZaBJkE!T`eHX7W&4(
zi`ZUz3J_~r(y#(|F!v2wguo9nS*i^b{rc&B)7P&;VfiKhMpNyY>|8C%E>Dqq6PEJr
zt7RBK`49}RceprWsLGh0#P00mcF>*wJv8F@M=X;HEfQXH75^iMy|U8)E08BH5Z4d?
zDXjqcRFIdiC5CqcDn8vZTFpRFBg66vV7RjWsJzH;3`+tf0>p9uf{vrVk=(l)dI)(<
zYGkxx`TYnk^{%Cr)2gs0+{tL8>hn`nLzN12)>+b&fnW$9P5eG}=r7twHN5I=jRJ`m
zUu*`%oW{Q)aGlGhJ1CAHKgC6q9(_HqPdwf!XYD$N|I~xGvq*%8K5$nrUWkA=&l`x;
zt2x#hsla~jD))x<^7-JxR^+oWJ;K*F(Sz|37f1nqx4ja^CGC+sw0^<tbS602m#4{2
z{GTIm6^I1QfSac^(Lg`*-7rL%kW*M*zye~lrDd~pm%Sd^0j@<6nXMTthq5iCNQXaS
zVS>Ox7NsLKc+{%RC2RIScT0V(aNubnyXwTuhSAPi?L(=(n7!}CG1kcv0)VmDiBB8i
z+M7EAN-wXLs)sM}m`N`VyLL;n0v=#qQ3WQ7FUg_SYw7lJ_HsiWU*yq}dJpg7V?!Tg
z?r^ZIA)P*^%RrO^{P7Shg3$j7p=4Nt6U6jixw=1(J#sK0WL&9|Vef%NJ<e>uS$Xl_
z+Y5Eq$cQWdOrM-ZS(T(J5p4@)M1f1FoSM^kc90R42;h~eK7O{s_qf5%vM@&U1-Ops
zf8a&654BKan~jAjor7>>sW7KAO4;3-jrp&VZ-5ZjF`OJ6>EdZ*BzFHS=^%G-^PY(W
ztUnFn174vkb2s9BGe9|A%Np7EY^h2W#>+GhaBbg|g&K_pPm-Zef;o#|h4donK+*-w
z`RC}Hh(>!RsP((k)En`VZSwoI^Y}-QSp;T@*leP+*G*Xn808oT7@yh1o_*AdJ)=y_
zGvzYQDUQuO{W*c+Q49sVScLp%&=cP%js|xw5h*u@>@cg6D9U)&_jEx$qfT5c6Y*}h
zDCUHSnvYcrAO++cYCc#(1aG5<j=s>;cR0N!qJ-{v-7UUSDW&Demh3F?zd6#rUPNQ>
zf;N&!lxpD*pGhXbtli!cVDIza@oG0$SG_Anl10M>2;*Y$8V6mUfCW?1B!a3&f!88{
zQvDVrW67GkQa!3D@`;aXz7ItXW0RyqaGSL*!WX=%asa-x)&HfY95fM}Wb)h@onC7_
zL<u9X{gGgy(~^`I6q@OeV&(1pW(CD4I~aigM_H{3o}aCp2QKR@>`iXdZuDA6u2IYE
zWT90$JXR;=&*1&><Sli#ly=ilv7|T_Z)(*~s<kUiW4w$&J1Ssm{@Oy+fB@MY(x;pK
z9v6?_bfm4(5sM8OteT7DHSBMMC-^3>wh1AG73*{Oh7uEZI&ZoCc@V++qG!J_n(xbF
zfaq)?rX+i>KF`;$Bl6*;Zzt}m-?>2Tbw(`PUYiR0uc>>^gbEbR)ooaq1=keec9h`4
z)CA=FSMaOGy2ZdolbiN9{Gx;=Q2>_PU%9YGp(f7)Vk~4a8?mxTdP_jIpVE{GZ1B*&
z>Ry6eW48sRBVFWaghHprG=bUS?BHGj6!gzYe5a}(YkAbT4tBly(5A<SYxu6;3%ESn
zMq|&DXbD<b>fj6<l;>FcMBWH}IzxO!CB(n+L#H2Tv@vp1h!k_;Pr*NQo=x@+qwTsn
zOBHRqo~Z_Mit6B9if{tsXa-3h9^AC-H%3&2Df|ghPpOn7<jg%v%=rw7`<o=D<m^Xb
zb0Y*(YFiQnzTRt}SyqDd)c-q&#bK<jr>=*Q@H%@7Y1c%BV>I?k+6_t`tTl1;ZfzZ2
zOAjQ}RwtyA<<F4ys~q^|y5|ZK8ThiQ4hCPwgL)b*B~F{Dr3vuP3YP9*Y@qdFe9Hf=
zZzotnBP-0NkO%7BAsjK0(~4*LdDKA)&!ID!{r?8PmsLUCF`TYnFgC|vHml;!DnEJQ
zP?M`;FDQqZPH|o9QvDgz6d1(}Wg$WCOk1`NK-dlcNGkn_rkip`c#j*0gTbL^&!6*0
zU$)4yD1eZPzL);qMqBUfl@d`P6SyDjmrr}C+Y4gMb|881Mqj7^b!%1A97x=Ys18fr
zTb}&WKk_<$MIN!8+^Sy4^kK6J4g|y~BPm$-9k1_Xlcs;>?|wPqTGk>*lG%NZZV9^&
zQ{_;HS7<2i8vExV@|crL<>9=z?`NDnOY4}YvTL(T3D^sWmX72ao8FER(Tq7QLLaU`
zGuw8mX8c)ilWbMVHC?awvFWS<h24A|mA=nh7e$>I<4IkBmzor%%&$f+O9igEvE?U)
zON%p#Qd$fqtdPLflDnpA6C1nblp*`dn@rNhig&XE*Xh)2`W*9a4c{c~Sdr=g$z#CZ
zL)EpsUzByA6}+Lj3<wII0COs_FWgFrD>xiVx`MfSri=tkzq-Yek^bJcA5GTo6P8B6
zG6O>-Voh99FoF09r^0cDLEvVZ&a|8yP7lyinkdg}A%KNhzSp?{530mrcgCEX=n^~@
z=V7DxSc=I&=voa&h|(F(CQ{VeUttBY3613>>01+U1B-n4u^3QFmlyxdrCJoanP)n7
zH`Ku^7tP(uj0LRZmVM+mg{{>U??qxJIgGbg&7!&1s^~qUtlLhbpfNj9$GFqR4%IP^
z%JvAq2ao3t?A}bPBU{8*LGlp`f%)zaA6UC>Ngm2pXxMsCGhUa<e6Qnq(W%Q3PE9Rs
znqa2WBsOcD`wgI|5bysuh|1Qx?EPpC6GyUsu9+b-SOUv;u||oUAQVqsq+tN5`kSY>
zzI|P)sD4azVsspnO<)zaWf|6VF}rv!Oz_P2lj|~Y^z`h7v$N-%^NlA=vQ<gUrm`ph
zpA$yuT4l?>aR+Bsule)|dsmo^RSi>6xs~bKp7H%{;;!)pYgPoX)cc5hhj34^e9b2S
zd1xtmA-@Y_KZ03gAI?ZSk+gCr24}fCNkLD5R8tnj*-AxU_ERhN=Miw5cq?#h>ppU4
zMx?NE*ujF#6zV7j`*#R9h(9tmk$vv9QHFllzGyueioUt$3mZ||+sFo#v*n}N#5iX#
zPitUeOcH=KgtutB5U{dHp^&doORS*^5QXm^dAK}@FfQ9O__Mj90mdGXkWIg-QwWNt
zOm&2H;(&pEIen!dPHJwEvjB+<+2jlKCK*W_k_!jYC&dWrpvMv86bWXnV3Zy^X_N^w
z3mi}k$B+>5AWtN&RFj54e18jZr`4pWQLkdGAxZhHsichgWq~b#d%m>Oy$l+SQ#ac0
z1708b-kA*>8m@XL$I*y2<`)7ER(m&Q+vy(Y{7rcaxxFc2IDHk91?IaxSzFjUj!7nv
z33%RJ3DwqGPX131bNj&36)DN%_WFq5n1kZ3;*~Q#iv6{z_~wRb>qtPlc%iyj*=puj
zGb7uzK8k>04gX_~briwLjdjlZ%qalMsPy3V;}1eBwQto!tdAVBqEJi7|CfXdf&<P{
zX#zCC)9MZYcZD*Mq?GI(I@mI#04J_}7_q5=wyZ?9K)yKKjZU}nZ^b#Hk1o9^1<8o8
zqBOUHj<RH3mv-JN2XmfOioEc=v~E?Xjy12^EV&U{#aN%!NK|f38fQ%aniG+Sa8CJ&
z1e70mUH`4ACEQyFkdy+!8nCcu%t6Jy9UT0u?GQOISEn;`TlAk3cS=gr-NsU3E;qBZ
zYXfAyy^*auTwMdEvm>sx7DP^k0S|M#`*GSwX5f=|qDTy;#;_P#ULi;i0n}^ZlbZQT
z#A_O4D8x5Ku3`>IL4QG)D1g3&@+|(~H2ULq;abd$p>>F4VzeO0o6yJS3a(dd+JZg;
z3JmDUXwTC5<o5-7W35S+^;&zh@X2z{if;TR?d&n{9+<C3QY?|yFhCuzw2g7#`8!8x
zKn&=?`lrgAF=E|*1!NSq(f`EZH{L<S`%$v}SQq6(kieJ+sQ={z4Tn^(2M(m)U8R3~
zd40ZXr~*TK@(8WR>~NSM@%*tiPq~-dyx;R2f?oWc`uwv=&|9n|kejULW&Z_s62u-D
z7@==Y=1wbtjyZ50mTzkv=?CKZk4M=7JvlqhI|aX;Pn)thprL1uh=q7(Evi~5#0uX;
zzpfzo!mY_Jk6h+rquqE;UszVD2b%$u`zzbTHGb4>z8Nm;kyy7{Sh$)YNda3s*A*{M
zMsV(<a9#11@l5fLKM1m;T%BEPasd6?CK`R$NG24z{-cMjVIApL4@tjPPh-)q(x$HK
zLYLCzT38uaH|rj-_)>g{0()|BI>4z&eCHDlN?UJpD}QSwck9dG{qXswzZ#UxzIKR<
zmUNmfFDPYjzE3V_#3dpm!d+skZOVxecl8)(XS!#|Uvdb1{7mmTt?jbU;8cn@E$Sp}
z+zpU@D!o%!z?+RRp8HZ175^-u3V+F~R|jwZa;fsM3u(?)WpA;57@%5$N21+xI}&2G
z0UMT3RzwBCw{xjg8B{p0i=>!5E-9wo<wKZ<B;P3dRjB3tovEC{8p@c4`n~eF+77lE
zl)qKlp6X-alvRl8j*#;HYnarFw>hk=SjMB$(cu`Gr8s02vABJvN0)Ph-R>oW+y_NI
zr(bZ<wT)e2ZU0d5&KsKc_X9#^9eHADFy4oY#<}I2+R*n(qDYF}JviQB3aeo-5*bG*
zrnR|AOuwa{NeX{&RcrVB7V!>ebD<vc6$+BJy&C1X6(Lrbeh)?q-Y&>sZc1N*=6S1&
z_xga%i`lO)B9K)z_&>_8X@sxlDVHOv=E;8MirEh#{m@}@I6nUfYn?zRoeEPY#CbwL
zEWa^(WBLSeRt9l@{zuhQI)0Fu7a}C(cudW<7BsPeNKhlBBu38Rrd35OvD;yE8bPRm
zY?<PM8p_R~Ts6H;jF{<~gGIRlvME;FskTLdGriU5S|xu&1v2qNC6%Li-8FjT=adie
zyeiy&zX2x5`}>M~AdC>-->I`Y$M2#hRvQm|Ci(>hrx7Q^o;B{WF9sZbfPk9lo9U~5
zX@np5Hq(nC@ooNSM#^}0fy<7S-b7HUL5q!l-s1Qa(cWWjPG&$1SN@|DyBFi_D)<tQ
zU8or5`8-Nq(F%5mU311`XO?Z(8ebz5e1(n!LjJEGuMA)dZXWyAm&81h)v1*7jZ(PN
zo_;)IbepdJObv6HF6dP-WS>STFW>89?dNH3{L%LJuivh2*EUL&KVg~2rsie^aI5Kt
zTfsLGvgM~g_bHAj7B;BiTyK%~(%>4FYe#bMg<B?yY1qngeC@2c!|o9r%L$`Ms*rU-
z(NGE1sU6?@s2hQtWEm5*m$#hsj3_P$+A~q(Y4mXWB1W_eXhTO+<oqE436_jd^(>~X
zX4nUHKypY>$-@zhmZ4)Y*w2@(QpLcz?b$`Xbjx9rCeVJDd7xh3b@0A-0NP3z4aD+N
z#Jf8~3sYU3%)A<j9aQIMQ%I!59>rIVn(xWttn!QvWS0v{*OaL4OhX5qZE`%`M&KKq
zkFiqwK7!Q-`s6*17Wp&Y_Kc+SHut2$I|Kv#12h5Ra4wX*Q1*Lx-jY`9kgtus6mFW~
z`FR8WuLIE_|0j4HxA76?+zXskF_ZIa72mNLs?-cKC-<bK106fi0d;G+hCPHxa=@n>
zyRFhrJFj-A?SfxY%Y|g%kzVOnKmx@x5aWYDaI{hnn5SxgY9}CokNtD-O5ZkqM466t
z1^)LyAVOG2*$CA+P2Diw?$KQ&@+A7kN#0-jTYL|Dl+Q4ntCB*J@C2Irw>SegYcV~Y
zObcB1T^pR9xIUu-f~0x}?lH(!jZzRHWA|D&Xovmq?DOB_u3hEBi9!GGnI4`_j1RMO
zQL1N-ylv5dL@x(8O*J2(9TeT0X%)p7svhbot&URxOWYB`hdYx{oGLTQ=oZzk_oU-A
ze-3S%LbPkd>cDP6_xC_N{D8$Ue|NR9#lo5*Jx$H)VSyevo|kgLSZKUdiiikWE;M~O
zJ&@8dTTnZD+}+)h6!@zThgh?oH_<7?`CPz{^NmCJvM+Rf<(x`;GszyyNpBP-b<K{@
zgA*6k34NhN$OtjDD~&WhA1WDNJxdStj!~6~QS3ZK3Y@!Paw?2!fk2u5ltxbslzP3=
zI>^g?i2tQsnu+1^RZ2GZb_11wb(*iRL6y=xh9FmFnbEYRlA8JC;se)W1X+#v^HVmQ
zQQHGB$zxfG@jidLzWT6I@K<&GQ!wn0@SSk{Yym2V1`S9jXhTfWB$vMnSri2`CDuI1
zdrDJN65#aZya2A0y{|x**wwTAtB*=txFcyFMwyL;lt*hI*;bl30hF76eOu7P_EqTh
zEimohH4GO*p-unT#1*H3Q|7*I>^Wg2u4xJth7ec)e|vZJz+WHWu8cupIp6<9|LVjE
zSMa7&bWIkZoIqXj*jVR%ef&{_x$<4ye9^QWh7IY2guA=#J8Upm(y>~Om!wTRl^ONv
zZ5xv^3Y*6%0vdL{0~vlIlyk21o+<38VqHKF^x{}9#8Fe1ufzbXX_HO|5?SEEO(eH}
z>I8A@v($s*f_*teBt5wVLqHx1nHK*X-BQ_E4?66^de4Zx!$>%%XdDtrFidIt#h66c
zWo<I10n`Q%<8P`i5p2=2Kmm`wb?3^o6`!IWxZ-Ni<T1I7i#zW5I4Q{agy@A8QGJiB
zibGEzhgEN%q8snNdTvx6+RDGl#U+&#)XhQv|8CJ#3}<bGnos|tYv|o5AW6EOppBCn
zyO3I40_T^6xax}9S5>*RE_oTC+#L2m^H<-8xv`|^2ow+^uIhRGX!P1K&6ELS?u%VV
zdLF>3etbfnQg>qyZ<YZSv;XgQ-%>{^3q2*wNi|d}s)wT5m&sNDM8n=m27Q13^fnP*
z2iX0;lAlYIE4(C=4OKEr@AZY=_we{T)hg*sQ0MxO1wQJ5GW+O}e*hjEw6ZF`@DUT|
zU{2#mA}TpjYlZTKn^xr$#}|_0X3U^LT;wU?KgbDfb-xrbFkBQ+Pln!u_En{kmjpZ6
z-FGz~0ay_Qx<h%)!K+=s18XQ2NIVC0KCi$*XhA?SELy>ayL^>-EY>Wh0^v3x<;TMN
zeV&C86jnJsN18(ecnKuXPeh5OyS2__dv(NSv#N(pZvW8c#&{YIaK4Slsb!^z&vEhz
z-5K}0&5zp>9m%rr36e_tR)Ej%z!ck(jyJp{08rbxk0By*@;GKTy?!AwV|>R)GJp&W
z+HSbu+v83|#zIo|=|qF2ai>ad_Jjl9e~-oW3kq)x&fYcM#%_V3;I=n-y_e58G%g$R
zJCLRd{YD~@znB`}es2ozQEn~VzdeAp-i&fw5>*rR=^9uVTXhVcjRvzdj|g>6FVZPf
z#`bgXGuqVHK28}gcKjqpj^7DZ#McIkmFGF6ez>gBS+NF)U<@csDhKXB4n+RsY^pM7
zl{+!!5`o-S3PY4j27*Fo_IX$U{XV7|U9Dbt->y!``3Yo1x=o1%UY4xjaUu8cV5eaB
z$_F;}&Jb+Sg!-dGiG_}nHrh14$Efbbc9xQ*j5|y}1tyb12J&hVb(4O-&tdeD&xy0g
zP~e@zS}R+oP5CS@vv!1hZ@ZVLpQ`o-mGjAD+hw7NU;a)}cmRq?ok^&FmS?_=^Px}8
z;x}jd(uZwM=s7gTpxprRZLenN?{y6|)ljQ`DC*jSm;W)Xvx_>U#gn_xC2b#DCv44n
zc}u_g7?d;(4{)YV9(48Ww-pvI1t4Sz1yu3B6=e1Pc5zsrB`I}mMG-7jf_Pdp8&VT#
zvGAQL)l|U@_Na;yn`as$*z5-JnsP77exv?3rFU)!Qx=rBUdUp_eELN+Oe{TN`XKa1
zPWdL}gzmS-r9Y4;NGRAZvLRH9NVVHxkOmSkt_VLIM*1OZ(8%^|h=rvElHlCZhO_Wr
z>Rci6yX~B4K-fSL_O5T01P(eFtUw7|b)h<PaB1`qEQed+qq{03!=243*n6h<G$5Zg
z`)}Z`DYFL`LVNX`$RMC*?Jw3F*;CgteJO<|i$jZ!eXKo|!@~*{U@<gz_PFwTfX_Fv
zwKjZ@W#dFsXWjS2E}=nJ9EI5gVMVX8$|Tz>vVo$dn7=RDdA8q~SBw|WS_{<=Azy&*
zc&Nz#fqFcJh(=&_smWIb2gP&@n$0fy5)8$wg+zz@<Jn8DZ@=7yZvrj3)i8*v9LN0C
zhLrK&9bsMH3MnVd2V4V7&;0NSxa4^XaVoNwHbzyqWO<*ZHw|P603&E|lmpE6w3{Vr
zJ(ap_Y-1OqKWc{OY{H-l8{tn`--&~+`W;!`1j2idMpaYQWTmEdH-ciHVZmxi!h)kG
zesj73=#8=Rm-A;s>^;KqRJ#-A$O;|2!bBw5luZe4{<M~hKfD|kAHRes!^nCBa$RKE
zuunRcvr|eMwTHYCn(s)n6u#4Tbo)(*YgtXN+hGyJ1m~xU>bA38vS_(dNxT9brg8B>
zf>*la(3>!LET~C^08E)Rl(FQdX2f@nf><&KUn5k<QsRR9d5J--!b9|0l~?UWnyu?k
zjz<e@QwIay+pCPaayliq9={9t48JltOZ=t4e|&W&-4^mH!&dz}0+kokBYh^Z$sy?6
zrz{#ir>$eD2o4|T|IXwdA3EqYrg_66biiq=JAu89o|fTdR`_>w@ht+Ag_R@)n>K=&
z`5P%d368NdCh#}a&6f+Y&i(zQFias}Q;Bz`A|E+e*tAsERQ9Yi6)F-O3?B9oC-u_M
zMVqPV%C-o!_7n?}rVkC1cPwpApH}Xve!hrR24A}P{O@L9i{%#Z!sJD0>?S@&!%eBL
zn+_6AO{}*B#Ani2`o@Ck$H#6b)3r53P}Ih7=y)*gk%|*MNhxpiCOU6EvH2uSAwjsm
zQ?$X-LEAgky9BjONJk}u1h42;*xH?B=BBib2_bp2yM4-P0LyV?vA2$7hV8<7{@nu*
zTKWO^mExN@GB)E^BSXJrFO_ER2V9;+8{NRkD6w^Cc6}}KBGoc#hvO4X5CdX_^L~2A
zE~);xvdz}l4Sqh2TfmlWnAOr4wgxmPVas%X{S3TYm%pVqb%fFv_&=aFe4by$Zvj7!
zunSV53P)++J>Uqauc79KH#tt;DI2X?m~ied5s_(aqNmhX{Mh7$GUugQWsvTUxsDa(
z8mGXa7#^LY_GX^)Lc>LuP@s<ejndC{LB%!rC~mneOqJP8{Q#u)2!2}}QXh`iQdkA2
zN)AK78-j$4zawk;;c1qryk`eAGUKSf(`3A@RrmyW*cwD#n#6pO8hO^x`u3Ipo%uGk
z!_Z;h7!#~wk5`IS7X}!&$fAq$OKwNqjI#rpKtxMjBd$Y^b&F?9idY@lWh}_jiF(Hq
zeh}l%-sx$|=wgVX3;kh=AP5dYiHP9&n^~%SvIF@&`2rX>NtiD(@AJnUr)CNC$*WI3
z2BqB{_}|9SrdD!4b?8H!FgLUC&U`@^*jcwLQ2I7NZ)JcnC`KL{bkicKkz%|qJP9d^
zw}EnUeYe)eqUJQK0awcND6~HPFYN3)*G{%`5XeV?A2hFDdajEcB?SO%(F}4#u;>pj
z90HodS@SG@+D258AmCXVw`2fPK&`*_c?(LT)uRZ#sV)xHBW-q=JOIEZ;7<deIv65p
zJLAxK^HSkRZL@_RbnU=GPXT4M+#bnl`G}&b5L6X~A`W4xi~Jt<nB`1HfGdA&EE7jY
za8%J`{_No8D~gpGndkx3>2c|sQd;i_NmQ+9GIeQ-=-tCpcz%9CH7EQ5Qk6_f0Ema8
z;wIEQq-?W<{(ESG1j?}cbHC@JOT^jeo!Q%+=vd$?dGhrD7#b4hHvh~{>(rp3rKaS-
zy-+IO6j3aK6Wd!Y%yiLpiwyg9!GW|S*jj`C@@fEmz9kcH-no*10ACuW%~RlPN8q&B
z!TP>;N%zOq@Mtf?{#-t2=3Y>+dy&9qpM|Wt2Yz~yFC2a-KkL_?qHsedH|F+OPib`R
z(WeR;E?Y*sDLFbRTRMt_;&2gm^EakBMo!x(pf#pv7A>Iif#v8L5-{a#O?EelK@d5p
z@RW`*4NlJHGEYLGg+-8u;u@<km**nV6k#LYb>Jw_-eu1}ysAx4SkH9)9$^0K{)KIv
z=U1K*wIru%TE+#GSp+&Kcwo3{`vfQ}KAU4W_OnB~>-Rk0IXK{-Fwc2Bfx8OpjrTb|
zm24fKN=}0x6|#zA_8JqSGA}k=1+zABPs3V-E&r2Mc7$2KB76vcy6i>vH;b(dHx~~M
zgBVXS^BdVJ%}eOxlVdTWXB`hXBR&3MIOja>0#V~W5+q&;d4|PkFX(J83aZ%SiiBcp
zlx97`Zv&#MjvVs5j5lV_vFQDU=<iN8BVBP}JJQt==Ll8w3*?@nyRfXY;{3Hj6){=o
zc0LBjET1F~Acyq1R-VSUK4h!O3e*B(RsW*2f@j!o2_aozaR&fXm%O?7yJ|$mv%duf
zm{+zv02lq4|4azEzbsjIRX{oHetT-@{1RenCKadxcot(WnInF!aeS?hT_VZ}#x8tw
z)T|b5xC~9LAu?mx8fR3h>Zn}UO4xtmSf%_LP3SZqu!sVVXC`Z9JLXE)p_Mdt{9#a>
zL8;AMRz3S4VwHSlMTalLIb8F(E@E;I%X$@Bx;n1M4TQfx*If^;OXVVa$Qlv{gLpP?
zU3CKLFFu*asNPqnm0zLD)RFD~Vf`c@{|u1zWy98R-%mk>=?YYJPBGYP%NR;M2?WFE
zP0g=K^bMN$Qp7QWz4#TA41V$ciOnNPoNacM-fzD-l^T!KOnIb2%TJVk`_T>P$o@xP
z{OxSZV4(3X6uIFSpkT{DS$1r!n!k#aBEu7qMX<Pbb>s}j5&@L~pI0;?H=-qvJ9&mS
ztPJ%-&|ZIzKc;oBLvZP;u19C=h8!uGvw*J_%RF-b*bXYOx4^Mmxf?0c6vOKs=C0MP
zftxaQa(M2KjGv`BC+lnBh1LOD(!-A)*(FbJx~`zvnqTz!I)%bRk1Q9ez;$2R7z$2U
zJp9-X%E~2*gFZF3x6Qzc+GP=KFAP&q6Na`=4zB~mwiKD*s~PVFVTK#l^lDRIqI5q}
zukRE2X_tiHoh?si<Hw*_k6yRX^df7rZNxA=EdND>km6@q^-UQG?%T#6o4%P%#(X)i
z&>z|qUxb5q|K|t){AmCG`RYIa|Ed8?)5)G%Bk14_*aBRZAf&BQoZ^0vob<FhGXQ}t
zFptyjr8VrHJ$YXQN&^!kDj*CjOWE?cHT54`)5JP5-SfR*O7fV7=(7Q;c)#&HucA$W
zkx12S_J+pen0zs`Xktr&;biD9NEq8jL5wKk(5|V&1>7&dr6-;qj`A7jD_hP?p@G;A
zGU)$CNWCm@@r$P>$Jh&0IHM)?H;Ku)B<e%jd;n7J1K+itD<Rtaau0wv5L$nU7VPPW
zCU%)&Y?36&v<}@*x-C`^E0j(%U!A;;+~DMlTNBDq*?qs^afbx*JFUb-EmNnBGihq@
zPh(AanZ<%TZ&z!0bc7*T{-iF|iM2JA#}IN_ucXaZX*h4Hdv5+tS;-NwmQMWmDXf3X
z{N4^>zee;~>}Le7WMxwld{^9(F1;RLdCnnuDb`NG4w52K^&-z5o)AF3vw{}h#U!=k
zvo~u@viS+Hh&~?f!ZNLTmeQkbHZ8;2-UeKy3m0Fj<+&jOLrb^e{LNYRhI9TfudKBi
zpq7c@uzX@)op23*L|LTheDMUuQrtRgE5tCmLU2W!rm9|m1{#;R5S4zLC1;U7MQ<qF
zq+Et?dF>VX;J|>iPQ(XWjGn>gnZZ62?^8B&Z#&O^k>VX65yYngz;)0p4dDlC5*IAt
zZDl(t6K=U-ueDG2?CPBz9RL}tM|{*C^=;fP`QIfgRqc=fFr0C|!7;3wAK$2QCR{zs
z&(+sgShX?HC3}af>&Qkh#S)bmSbTP;_N(f7#RV&5#Z`D!#F+Z%92X!GIj(~<ZEM8t
z$z&47#2d_((sy#OBw;L5m^z+<IL2o?<7$=z3GLzt$?QS#aucg*1WbQOK&$>G=19AD
zTS^mg;69TwME~0cWleRV><xNeFnSpE*p2AIjqKL+9K2+}5LaQ#$pt%)Z@R89lKkrZ
z4BG7UKG;{Xg`5*r1#$SGfNW0j;wzrlc8$XHnb}{87sQzen=jk&r4q84B;{N|w=(Oz
z&*MSERPd^|+GVq`7rR#RX2Xc09LUm8#;@yd2A$|mvQ_dk|EN@l+clIpUMi-rZ3FSk
z_xcfZcWBo<tv-h2DSp=Ec*LVz8f>q@M?6MS<1vX1Jrp}kXhAbBAtb*m`5ks*jCF5X
z1sH$N<@>G*4SWFNv<<jI)f_&rk@FwyvN0u6N*8H+HBl-0>fEjh#eflTG_}{OyTMk4
zGo_w*dW1~ScvWVuI2!$?uI6Xv_E2JvOgf1nc`4gtEmFo;NHkA8!jkT7E7;jBi-QHC
zHqASh=wFjFbCKX(wsG<<O8j)P?frXt1b4B|&!$x(AYF&Pcw2iLBsb5LK^V5b^j54+
z>ehHk?L8v?PpLx>b|3xyOzA`~0!U}WhHb9Fu2NC7JMK4~SX<@X5A;m5zSH*3AG{Ri
zFp68%r==;mMXYV<erTHtSq{Ew!k9DCw%49_YOM8N{HQrL+tSH#E{S19rS8DER&Zuq
zkEHHjM`5M9#`x4Rj)t=2zae#>X16X7k9)RY=efB~*-wy81tffJk?p<}YKCwZ!#J!?
zAfzMqJ32RA{vQ0}87s!Taq9Hj+dy^kp1`n{^&}!vrX`I)67c75Bp@dj+Z6*cv^ZH3
zzmD6W6hJN*z%nN5|MVxxeTk5k89g(6M)&jTXVE$DZ&mbj;kE>ID|1WiEH9Xixgb>f
zQnhC;%|uU;H;6}Y9fVxFymxCc^aPIIXDUTeu&_R7)=}}t%ZxdmAglZ=bB6X@xjRRp
zfN;d9+~0{30;@zZru8#0uao$^g(Y0fQ<mw{>mSgiFPOGZTsQFn*)nIFR`Yn&B<doJ
zBN7X6hkeediqFnu+V#7dt3`y7m<=L5N$A9-VY~k6FaEJ>%@Iv<r&vgAil@LvDV+um
z)opqJY62n!g|ku+jaPEDLw(b#2E~xYv{F!gpIL!;mM!}joTyl?fYC&H2JV@#Y%C*_
z%J_8cq54Xqb@i^MFgw&^+cpu&ILLGf>!c56?JF&4gg-IZ`&k5-`2Su$;-dujdl6oG
zZ8`$Wt>QJfE)?eyzW#8Am!XSk>j1QXrn`T_MrAEq21|ce$Mb!899+Hzh7`1|!@X0^
zNk^-6dj0SI7_^$=zQ<9G27dTln)0UXIO6$H$MU@zDy^OD#uHChEERSJl2QuwkQy67
z0gjr_ycJLLtW_1r3X)sH7Z%G$kaUBJP>9s!X0>P%jYzmfc9T&D`xHUCS!DzQbF?rp
z9k?>0@Kau_y&G)+(7r7o(C;5#>z#<(NabanV{xp?wAuNfiK9bcs1!YX|1h`W%~yzC
zB5E57v-6G1W1DfNVUXDke`;Cfy5bnpcvPu76+vHl!rSQ-&Ih4tVU>9?6yI}$9MV{E
zruvdYC-01QA)9sG&vX(dpvV|a_+kWX7CyGP`CvUCK{WLs0IkM4`-s^zll0B|Ww#|c
z{LwsD&A<NhMTWAe&3;`Takgyeq2mv+_Dq!lh?KWTSN`7j*0*ZQOc5SEz$7$`Sx+E^
z8fI;HK7SmG&b{Edd=YE`M>og}cuWxWtWQS!mJ&a%P|enTl2S}J@Mur_ct!6=gg<|p
zwG*(#zc`t5U${L{XRhYoaT{zNI?|6&vEwuPw`U1>F&n=z^#;~V_WL%o8tm?16=ssc
z)0tbSLy#8bO@y|fo)mYEuSbd2ueT@yjMyt|?Z6$zv?jvw-5f`l!lUVPyrXKg`mnl^
zfpVupBfq8mG{Tg&$mU3QBf4b5tE~R;5n6*N#`<^3B?8Q2HuYYP^b23v{1ZOz_0%b!
zW(+99M-siiG2Uyr6)kY2M>4HFfW%ONr+Y5|`aXbU#Gcz*=xdYf6uNEBzvhhk@-wLU
zB|tDBh291I(af>vx+!e_#tel|LUje7IvNrq&ISh)k9P1I|19IXnqe#A6Ezp2?-&}W
zo*jA085rX1v;O}+uaR?R2ZFu%SowGtG#;WRkZO}bMbR?wQ7@_z2<~D?aO@jo<|e6I
zjKd0`c^+n-PQ;#XM#KE5BI`bz+f6ktkNox?S@Igra*J_wBo`u`haur(ES64m_;(1U
zST48>eO4b^9=ZK$8_fk<&!;Zpr7C`%d!Suv2$kjA1?K~Vk>QE6vZ8wj0|0&uf{9#S
zGoV<sW&d?N&EWO-es$;vWy~s*O1K8nun++1qRLsW-aR;Fy-VlthgWmyNva$NwE-3L
z;SPY9x8e0$Ql)6-XSWHmG+z&#gjYU=uA7JBDyru=LPDaq>dC{xH{E9l*`@+qa@aa4
zTWd<{nfd37gU{Syu;P%vxAaU*tXiHF{pIs>$oay*);7`ja+kaC%-m|j8-aZ^+BaR1
z65s#0`cVLlq0E5of(_5vA#|6k49sW%Qn7^-ik9Q}*#25V9fRU^cW<l*Z%+OXBg9kJ
z=0Fb`LnGa3xpivxim5fAc^#>~4{0%s-3)|@W)MQqv{}QXih%0jTe`tbLX;00pODDA
zQ;qXik%V3c*=LwZwos;hdBlV5-YV0U?iWj}?oY~nmmg28&fe^A_o;YgBVoGM!^1$O
z<?L~R#IKw$HjR;0Eb?5V<sO-gTA!M`GX}qug}i6^SK)UnMTAq&a}=``e4=}a6NchK
zvx{&)@k_&ZgzwaQmpNi3cK#3f1|_~-vbgB_dFX!g_uGu)1q+%o0kBxSeu!K2*I&9L
zdGRa<>!@DoaR9uF-6Z}Q_Xc5j%0ruK4Qgh^3i85Z>kM(Qb>WJ)9mD8pL?e=;Y97<#
zaLqri_8uj%mh$?jOR;;2u;oK4Bl|K?hk5Fk7gn936v?>kuku0+914ykE9@-qY@|!<
zh=GXH?77gIXKbXR7WJwZqg$EXfBlPKW;CP|gI}sCGeG9FY5`OzT-o0l%QA<J<pYSm
z0I{y|S7Y^yvOu80_qf=WJbX7Q0*RR4e?@<|nwYcuA&2i*EwtMDql(?_S_@(H(fkpV
zBH-{OwXQUakVp117k`gv<ZA02<KHMKQuz;WVk&T&@<$_`mF~Y6+3L;GmWty$K%g>#
zCMaHhV5Hj8oe&+8lVD1T-0fkL>%st$(W0)FVKdrNl^VS8m;c~DUXYw6R(9-2e=Q)f
zJqqEqYq|8`9`|0>>wMf(3}wH-CcQ?d!6)HE^@lL{(87wYlMQTgMS5qSu9~**kp4QG
zHN9W|dro)INsH0tyn@wKtGj^i(1_Cy(`9%ltP`={5oPfWqB*aoO^9W}`nt^>KCrDy
z!WGyl9+9uhlGnBp_=ZRN=_QRi68?PBkFhvEeW>4$o*m$}EXH6=H{pa)NBMppV!3G$
z>5jLaj94~q8pp__v$@HtI9;7IEHv5Z3s`+pd>(q}LV4g9Z1&Rj9uZkf=X;gy-ia`;
z10)q-fb(UoNS3fQIu$DnO6ak5V~HXkGZv}~Y7@7W<En8d5Q?bJ$W^5TC*sOEvrh{5
z#;o8O)LH=0Mg^63O>Lx#A<@jp*0KA$FjwsaQ=H$}?bX7`lzwXQV&a;j3Me>{C@k7}
z|9aHf{H^;t&uX7BUsl=vdXVw@kpUlEHBfYC)?0^|$hM)*hXdcmo_>U`7Y8e3F(o?r
zy%xLYa!w0embd|eprIKu%!tVCGid0Q>>N4NtlVy%N$-oH8b_>5FSUZ$D566i<Lwft
zNGX;viq&?Z4gKMsYR~r_-?{C?ee^cyN-toeT7tA&QZoOq-?d(WfNDW8krZ^xDFD5#
zqjUQ9%=bc55B8*GZiGOUuyS4mxfW{FOh&ubym>JvP>k4jIkChC&Wk-FaM`eKZz}m6
znU1bn7m_aQIZ(^8jdbqwtASP{My4Ypett((ATO_2I0D|2MchZH#e|I~vDb8e6Tq`r
zqXU|qukmX>>4)+Pj*ZGYKa*9~y2b|BatM26HRgr7v1ocRJWia#Q?W1UNY#}m&a0D<
z<(UOdFXl00uXXN0v=d@XScAV#{lE@gIn_DSYq4|SwZ9{y7rN+ADWo;Q0U)+r&W7`f
zQK;s}bd|hF-q>W=NtSY83)=rPp<ZK0d46gLg^ng_TNEsZa>{O@dqy0Pz#E8xb$&K9
ztrRDb+T8v^Mty2-@Be7R|5Zw3yO^jT43CpM25_%cTtHHYYvXQwk$hKY`otcCLErVO
zLRXmEAo?j>wF{8c@GcfGGB0e<FhF9`UJ*c%9?YBKQv&qQ<h!|ZbSe-zjewN`&%7*K
zl_E8~@5ne}B)dw62qIes1=w3=g)0D@ryheX7e5P@IG@!`PDq(D7YTjihHN+j2aQ~Q
z6cCobBjaqLNOf9TcsLP^&!OaF|2sxeZxs%Ci)jtJ^o`C7x&=Wl^iH*+<u}H3-8szw
zKon;^{tc#uFsCrxr2!?@cT$k?4eg0oxEgI_4pnbX7S~?BV-fLt|GAZHoM|Zv=MtOj
zErG6L8qg_JjFr6r&&L59!A3$4%*g-gwR%8(H6w`1=q~SRPSP3-Y-tFy3@Yi+3Gwrj
zzyc+8>-fQkC;u|nl~)JW5j`=AI`{BV-_&bIdo;~5FUy9s?3}L+JP=``s&f2f8A9un
zD9VGcKbsXyHN^oPCVEetF>~XKy8_`MY@(d%EIh!>$JonPE-ZKW6eWyWuy!YjvRE_b
zeu1RlIGQKkY(#`9)Gi_!qghf8Wp`9%d|^TnU~}hAZ#<YL&@OpgM*-VtePlY5(E0e9
z{zumxQCdDsWb8{hnI~j$uiLa+F?Qs;jFPEQ)mg1(U<_*Yp+4|9=;QKk-ec%gy+h#>
zSFDyDS4>IP3A>-IjuO@&SZoTh0IP+0mLI7_!S7V3g(`pPh}fa(?k1dGYe3ln<?&gK
zS<7;b>2+BY2F!NEJU*27nHBl4(V1cbr(fu32EH6vV@$6Z*>9^mdxfj`=`Cw7{IT{+
znF~&&JlfTVq3(Ftb4)x=`g8hyaV8%Ymbi7a^?k6ozux<z)GZA=<JCa{{!oljVAG<$
zc+KZDa`;^v?SWW?{h9-~bNZtYlsm$l*U0GY1d=amLshW>moR@~G{euif>w9Ili0iO
z<!BKV3VeKA{i`x1nx<)+wdlRo6&^5{gx=Wr{uM9x4h$wg4NtZ9zWHd_MY5Skk6yx&
zweJu2%ZGUTSXgCo`40P{O|#SJh?0g!+a7U=v=RxO8HWOM4-F3vqtG#V`BIL;uOaYd
z&Q&H`y<?!*t;51gSHCGM?(aEW`8%y*DK3szyj!XkOMW!J%9NoKnO>djO-BI{J2QO*
zKG3HA>jP41WKtj6$b&%b6`AgKgMi2(9p=ZCk3<x26iJ%!uZU*{yk4)2zT+EYwS>8O
z>WL7Hil%0H*c!febEZ*Q?}}+=gSrn)tNx&^j;`5A0h9z|Onvra#h~84dKkYJln4|Z
zT`PT6zL&Cr6-KgPtZ<>RrY6i9=P2z&?)f3j9Wo0zN~GO7z6*ykLrR+_h}zK{DRmxi
z1UJ+L`G;E8x~u<+8q~v(Nmf&|tCwc81w2_i@!D24hj{Pp+1@626);!HMHhxgo-|c*
zWIgEDPByoaH4>N#X3#E1gWQ#O>84(Ak-jj$X=-uqJn#FT|HyxuL;wH6+W7HgGO;4^
zXa8$Rk+(r*4y9|84SlLMLYCx^!&xmAb=W%lzi}#geP)*dU{f{dn4Ht}FZeWoc7b-d
zV&zvNaLTDvbmmcHGNbV~K-E$H5<^i9Ma@PP*t2a~84N3R=5Q~3@1>l9Mv?#Z7sAh*
z?^FMZ1b2ivQKa*D939YawvXKJRBny96k}_p1TjHt)<F2K5F)nBs+a84H!H3EkW0^a
z;B!YoY#~(g^g_Ly(XYci0L7y(J{xT3K-tvA65IGa{4)Rz>a&ikZ4a;^tc76A+E(kp
zS5G{h@Zb}SK!9w6DEHYD<kIYOSu4-UynB1Pz!Ju@63GNnvrW5~LzFKL!}hp?3fSOj
zCcGL+=SVSH0GAfeE2@j>JvnkOx|4DMWpQT}Sa1LRk3mZj0+s>4ZN<Ibrc&pVE>jI(
zRDN?$se7XiyS?gwr+7}jg0v6c1%JAe)F{AJD%^Xz7(KO4N{!HT!zhdY(9yUb5H?#r
z5Q0}b#piWSq}Z?-yh#%iUMutIU;pj8E@YV+5JCyijXTx8RTDpN=ld^bgs-A2@g(!)
zVnc&xsMRdOwfiHczxC!(<?8h;oMas|&B_6zj8D)aD71=bf8Lsh3%Gv|e>n@Gi_hLM
zOD66LBf;v^xeQ;4c}DBh76MC&+4UM=0-L8xt>h1Bj3VEQ$9NR*iO1ZctT5VsiQl(;
zQxy_@CMZB4f)34yGW!37%!dAuR~In(mR~vycm+<*xI3-ItN-1gH4*pJzGh#I08_<R
z;v=cwOpE?5f6Sr~V7V>I_5v#gYW?A3Xl;xEatTN~pWtsJ@77(?!#8WO)Oo<HvrL>?
zT$)IR!s|Lb0YrOarUPK`PDDc=DW0edv^^NRV5{WOcf%!;SuHdzUhRMy>(7QecTIqZ
zu3i*(#11?qJJ@?`nypBF4EUC<f;<}ih73};aM~*={P31?non-A;{Zt5|1AG_uP9D-
zEcLd&+>)MC=r&44?L1ro2~apXFjc0l>RHHkMfbk$u01Y<x5dy%4~%^EWR%NN$UC!r
z^v;g7@AW?V^4+tv_52;$DN<P{;lXd{lH9$J#Z@eZ=fxtx<Skd8`cL#<Z8To7LKmT8
zPo@7`(>B82S%atqL>#>Fcbn}4M-1rnGJCk8xC1UA!pUfusYI(wKiVXwIO`sl=)@+$
zpnJR<5wwEJHxjOxqq3Ok*7iWy=2Thi@N1u$#5a7i>&vr#Y|BBB?I2Kvh<7CeH!YdI
zfoY=FGBwL#6#E5dbb;BfDNR%w^pJ*HUk!At`U1Z(4~07m1H0*N^6NK&^5{gS&!I5i
z;pq#JFQs|LIE;r0dHAOu8^pOcTo4&(TybzmQ(0|oox8YrwjqJ`5Wkyg|4hQvixFIl
zy$zHbu^4ti6%bejmz*gLY-9!PZsvP~loskvz#635s^{>Ue)vwoTRdH8=-zWYg!Iia
zP$WGwCfUTn$=q^ts{fsH6LYJJkfPOgZZB@|JS}7h(ulHU2s4I)LEf);_CKqPtGsE$
z-THd(iN**4ELg&>k?Lup6^66OpujaZ;d_6-s$yGBR^{9cI{e1oTU~{~dY*lftZc-F
zurzv;SYGU5yT$*pFaQ6q{0OYX8s$a)C#pQrIGM8oz2r=y_Wf`_QGe9RBYuiB`HE*%
zKj@vuelwy7#U|{EVw41cANU*zkKY#uXM|4b$n|UfzF9ht7kRv3)G4sip8LNwu^O*N
z!X&VZYR_vGyeI7A(chd1BE6Dt?Pf}}J{H*88m6w@n77&sR1{pQLh2p0h`>-k2~AEz
z?f_A3rZq5}$d1IcwSB{&Avq3t4A`YH{C5p(RQ8JO&oJCfBz+Nv^yNYqN0^>s3FUi!
zzWq{bk}9{>h{1N<6pz(Pv*IqDKW%Xebum#A+V}y$Gd5*@4*tYw@^D&p^LoAwM?8%g
z+;xDufC(gbq7$kI86|M!L$;EW)Z?kTNP3(OKPPZWyw0R*yhZgU*pVF^B6E=0PjXWB
zp~5cjpKhEJ9^<n`sFR9+I3+}>=yw>MT|z`K9x)=NB43*{*@ZHNr57aL2GhyVfserW
z8#rl^5l$ceK&HQ;4jDER_C-IRf@c{-fO`(!&NBhB2Yz=fNz~$IlTC5QH8i2jeKv!*
zeGPmx;qSo-ZK|dw8o)M8Mkm<UW?AZ8zKk&ne?tEe63(K?*A&0{UEuA410%ha!^Mr0
zwh`srOr3`+i{@sbkq%KK8<P;0_NqN^ovR@RFZFR#hMwx^S2Mlt#)l=MY4^6B&drGm
z%c!qG+T2JQkg!_Wcgcp@)(pRZA%y08frXwUA-6OjBl)I961JpM)HhLED0AON!9?%C
zEf%02PyBhue|~Gj_?f};j_?nR^Qvs4k2QuHk7YE_gRt<)^pZB_R$NlLxSphN%;H=*
z`Ph4^K-1l>;u&1?%*){wH#r&L7k@UL;_CX9B%>dmq#JAf^8_n?pnS;t3KABlJyPZE
z$R2JdBN>9H6Kn?#LYXrc#Yy#dt)*_|@|-D}|AHkzWRL+~j{YfE?<Ol*ghW?8*JhAw
z3ox0IUfyLLJ2I-whYmP294ok~f_}?Xq{`GR;Q6Rzsw<<xW5OI%(g*etF@C~24~My$
zATZz=p0Y3bL#z?F__b=OrNi$m4F96^?wIx!+sK%*zfB4o7|L30^|C1em;wKOv~E}p
zEJj-@a;8D4w@C=_q8$BBR!aEmMqV}dK!rF*0@ewl<(lHTRA*_HFR^9Wuniu2^N78y
z{JQ90CuyM{#5%RZPD2gc*)rFlwXqQsB6TvY>*3<O`cvgO`nkxU<O2m(Gec^0?Skwl
z&gh~(X2T4&4^ZPc$lFNlDEu6Ls_d0uE2UDUc!f3;@s|iCC_1!siWtcLI8MaDkA_T-
z%j6l|)<b&}d8kI&%(D&rsZekq!^z`IOjiN`Sr_SnkwNjvuQJ%_Q&eTV{^xJ=ovbzX
zi@yyz-Q*O$fB6gLbDl+g5%ei_`gc-NpQoVwD1D^8GBolGba{cCYw?K&mNw!}r3nro
zY;vh;E;7n$)FmCd=`=aLgJnR5TUo;3g4ikmDOJT>N^$~7s%PNu1l6phdtTbp9rMiZ
zHW`b23gjpwJ(!cSzzF22o4Vr|V61~d4Ts=~mn`1IQh-{h@MlkjKmgy(Z@td{pxDKu
zOLik%)}AZYPpaY&41%4O^l{zY+%IG1F8zWCfHaLy!1|6=`DJwmlq_z38$$XRpN9w%
z7Kr44*f5zAX)N=UG~tS~eBJ;cFBZ<sY>8CX&gDKafk=_M{H3U~QNUWrdkJ6l76AYm
zMYP(&4$UNb_oKQrhL2EPq{r3yLR~&59g#DW8ez&+Kki;~X34t#TGjt3d~DevrarN3
z+o^daMHx%l0MV(R-Vc$^wp)g<K%0;flKmTZu0NiiO5T0?0130OBMYzukYTzrmC9U2
z+ASOrknLeYb?;6b7LtwR;^@Lc_m8tN>_)2Sxh1{DM4+vw`#po%+1H;Y?(qPNe`tvQ
z64s}{?$g?{#@`ri#0sBOl^hl_KkSi78C<WgVM=m<JI4n**$nf?-EB!}h~UD_HA3mB
zd_G;uu70DsavA9)P$^C1Ujt{8^cFc`X+Jy`rjK@#vD=muMRE$kI}uSZ%M%G95PlJ%
zQ>gZ3Q=NGLVAI}-rWr$+mBTfZ@OUR{N2q^s)SOgbV`Fy4n`c23p~8^qdoci*^}bKn
zk|ri{><nkf9sBy7WhCFIfLP*}g8ILBWt5*HRdfDvc~Bc?F)w1y^!!al3n2{DzK#QI
zG*+ntl#LWvatT}IW&e8t(%!(-b~c$MD%lC>kp~O$eP+@g&=qIuGrMnKH%J9RL#NX2
zc4^N=fX<zD*D6ZGcEP}X+dp(*yD{bE%GZmDk{>?btoBYZwDxe*&@SZW=WmjEtVd}f
z$=EYs#Fv=#W-G-<2Fdmjx!x}r@G$i0U$xlx9OYpC%xsv$_`y}uqrMa=|FTwS9|(W;
zHJ&JaGfeT0c>3Ogb&g+lw6u<&$=Q`BKUv280q#HE<J1`BhDHVAe?haR!d?1f7LU1c
z=;9x*H;HqUn>YTZDOjNQoN5i=0{Sr>7Wgu8*F;Xu_3DN{_6esNW!X!qdC0-*vg^_U
zB(7<jhJ=N~cb4W_7ACbqZGybn28<zSvxc9!d$Ms-acTDym2axdCRs9QcLB7VqzLSM
zRFkRp4xoBD4F%7T10Rdg1N7*=Gme51{LqbEyr$gjk>QV&|MfA6`Vwx=RP21^Ya{ma
zqa1SL={=i`R#+DGSee99lXU2P=>F9#_WZgX4obRjVnV;r--o)~KabKxbL0SjUn+^^
z9~sJK`E!Ao&=|0P>1`+*cR6G6To%9o-vWl$gg)K|&e$k4QPWEcT{v%pe842?jf3YJ
zY&K>NK7xl-(=KS)PY;+MBIHo+ytg*w9abQtJu!yBZ>a*muH%)oavM6hUEwO>%`^Cx
z7-RnVY%uCiWlWVDHzIO1u`s~pH5jwPsc6XIo%{C34P`NbjHMY;-5rQ9qq9J8F{V_a
zw^?oV<%3pTdUtRotuLC!4DZ;<En2nYQ?+H(85Mv0$2aJ;yHyy|zGVA8#+5Sajmnz;
zv4LRZ?K6wbL1J=)NSF;~c)>}ZU|in3*=kZPnV<V-o+IraYtGu@)m5k2bv+zU`?PK4
zw~;K6gx}4cq%e=khNKj2On~xy1DV9!o|21MX^$Jb5_x5u*_yD&=&3R~vhW6*<dKd+
zy{41e76)jeQ2^keu&<k~T}E*8?isjny$HAC8Phb=!(_JwqfgB%aCl9TGebG~6LgA*
zj0R63aI%EKWVXYJ_8RDiLXrYqftyk3SRQUnTR$wDRhD{kgKrF_xKQR#=S&XRny1XH
z$o!6W86WCO_c<yXgr;+aF(Rc1E)z%$Ek;T!{k%u>14k7Wbdz_=Ap+s5APnz~0&MLJ
ztDPmak0w;~V?KSRJvke}5+hrGNJG|>CMTFxaYbRbH_liaT2@Dnya+}|LZVrAD{;^3
zQo93T9<F*1^8}H@O;E%MoKT{A3X;L|q`dD0s@dQ1OJARE!e;#NWIhVAWmrVk!(>>E
zZojVmW_y*&eLl6&tjE{*4NOdu%hr8HDBDWmcyo=P8(`P?`0v47+WjS{JP0c8Sv7zR
zsWc5e)Qe5mRz*_NLXVKDm8ZJ93_EFq{|k_Ux^ghzp`_pD&<chw02ZS@VcPT#xtwOF
z3|y`s`D&AlsyJwO?J{!w>HVw(zY?akLd&Wo@67FnUv6=>{bo^i=cDWg*din!ym*t3
zN6pSw*{bEmWhCw2ronXcQD++|ZC8qq{8O=StoZGL<mF}Gg;iZ=gfrrVsgrCT3NT9f
z#&i(@srd%I9|Er)*<3>|JdYIyaONPk9pATD5H;NM8^{7YC_Qg$$med&iI!EAsa701
zA+zRd<dia%b^C6UvyYLLbWK*d&AQUIUeHE@C3LxA{Wt#Ggm;L!Psz>oV@!VLUxxo#
zTtAhw<a(HcSMR&PDO-Wp+qBoh@P(^o2$ZePKf550zpX2=Lc}gBkZMrg`e}LWo_(SN
z(M7nF!Ou35&!?q5liBQpeQnA}oZ6or3k;u&xqZZ0No2nDqiM-|Vs~2h$$+SWtj$Jn
zn2)YpjcI!xVQCQ&1^{yE9zpH0lS_=wSGa&_*v|Lp#wc2G281KZ^{zw4+2|=pKWX+B
z<w?Tfcq4KxZv;|lcd<co$^LzyBAq^q-lL-px^TcLJ3H@!_44Phj&YF1TG^0*st%h*
z&-?MM0P#M9>UO@}8O(FtI$nwE@`Kd!Cb`5;LHS=%eo4y2eTV$yr(RsW{f5W5l2bjb
zGYq2_)Eeb9E0TvKv`Y;t6ru@-nLeS^C}C7k_5?C<f8JfHHZB4K9M2!TrwZqg!jJjy
z;JVLu!U+i#%`x)=(8nd3Hi|Y>9x#ov4L~ZAZR<RmB&2=HCd#!j+lBP8Doc~jTVMH#
zK#_jhoXz}4m1d`lcL!CT!>vzPTR5mGugn~)xJ8&{0l4bYPt4EB2Lq0LgZ)cMEx;zX
zPLF=A_`&mmPkP9Q;!ngsW)CM#duPhW#OITY!>(ucUofT86*+OK>rK0scJ?Fut`bKx
zu8`+jfoan6FYF6|5Hyr65TvzmCWz^BV9Wp?f7a;8YIstwgKrfAoDQa?ee_PNc8k)v
z8G4YR`;KY1M4vE1#>n3ANI(vv!K)ck#{3<pO%0J6dWW$enZ!o&-ha+U!47hDJ^X@S
zo&GynCR|+|9Q8WpWx<H-t;72D6q18<MD+I$Dg9;jRh-1qP`!hd_1mLIAvup-(x_xR
zmW@cIHnJe#w!oLQ|LQ+jIq6wdwJjh<o6pKZC^$!41k|ETKr=LpfT@AHB}<~z$~6t<
z@DMafCpm*m&-nIMA?lcN7R3)BSa9<+yN8b;Pq?qX5fu)`z{-{9G617Ps#s56jCm67
zu^o+*zJfBqpL$U=0U5xsq~V_S?tw~~lW=YW>YwpvAJ$IX!>1H-Y7Es;yva1YBj49B
z8Guu1@yxGR`x;()#Z=Q%tF@~O$}-eNy8F;KH#ap2%K7xgY$$@+9$FHUVic3%0p#l3
zLPDyE1q|)}zIyFqa8s;!$9r-0YM#7@o4c(LOLchUoT(ApgC}^?ss!C;oNoP=xkF14
zlJh1hH^KrZm($bA-Sj!%lzfmO-65b@-1o0wr%;(WGBr%1^(qaii~*&PKsH7rPn(YB
zEnMba+s7F~S}MT~hkPXiioeam2$x3=Cmj&z^<Lt97rQ$4m3yPkV3x87kWnwBK&12N
z4IqSuEhh9{Oo*JLS+Qvi;YUlkhS2-B4fNn@-9~HY&LpUjdKQD4<xhq)!AfEhVY3GW
zeSEX&11Xb}<*FRXdgnqoZ1HV{H)-3S&*zaBgm8A|k_LDa-^TZz)w3+a;nV)#W?sww
zfV_38P*}!BHS0m+9eP>!qW(C4DHLezu|8IA*`bmfMO{oZj4FQSH(7wT^_^kneW*c!
zr*}?Q`8Pv&^=u~rCZ8ZMUzXvb#PpqnK}s^$vOzb7tfb|@km0zZImOJ=AFg@vAaT{&
zNzSuWb(K!8biZi_=*&nugKzdH|FnOgMLU;&;G0{Xz`~4$Np$0em|D5tzH&`v9#Hng
zct0aBIwazg@`~ET-@D_R(`A)6xqYOoj-|IM9v)8(j9|EaBFf#fYSYp9EVb44Uw*QS
zZHso4Bb%ipnExA4EY{=3Tf3H-n8iEEIh}t)c>n*e{J}hA)rNAnIlylGI|Rw>Hh{%S
zY|L~`WU4FJl^;|`Wb6)1jsZmrMo%$EiHGxZHT8S`Bmcv&7vr;saG?PeXkkLnsIyG8
zLd3Fe?k1lQ|In)~Y5lGvUI+4Ud<L8{juhO9hI?%sqfY{$EIFL$wQci%k&VniNyN0H
z%oG4w)?3-4d7@A{`L3vV^^4u^*(?13yuB0=I3l-lI)*A$N*nog{Jac+gHJPWy%>dz
zh=b=56RM}m=vA3ZguPa)$4Y+Si0{Z^al_a4lx!p7`4Ydss=?taSS_t;8pUo(2-`nN
zD@z)@$Nf1ktQ(IwlmE_yfHRDLOMm9(j>py9F+U;@_9J=!qz=W<00T{Px!z5Ipx8t0
z^&%PR05g2<=6O3*E8q$%J7@RldUmuw)RWkBFjZFNK^re5XP~Csg#gV>v)DJ#P#hwq
z<3eWvoj>wcTyjP^q&}I*K;}^8dTb7I)2_05t?1plYH))TG4dvbzs~2E<F#BZIi-Nb
z;=hWz_jgJ@q1u1|U#K8U*-woZv-~NB{NovN>4dc+<~~p9i*twYW%SHOmfmDZ!HgCv
z`O{8rK*)?&%U*+)CPZC1hiBZJYR=(&D$SGpS&uBp;b!RCsY(D<6BW18CShZlYma*&
zhU+SLgj_XK>26_r5VIz6Lb*0G`i)pmv#JBrp*Qk|7Htu-k96ljFmN(+c1$QjrR!3r
zR<>j4+d3#7wLu9u&gTh5uw#nJphgS|vqd@>!v6CqDutRF&tnB1!FNsRd^fD$0*aa6
zWABrk_uztc>ZUYC&6Sxs(Hj>#HBO940oAzrf~?fR@!n(xH7((p<*f1HViXaLSJCBQ
zTM}O>j%#*9GLx1$Z0^3J+#E?6q;5}R9VbQQHNN#*n0kS!`s$2(&*%^S)>{f*n(LL$
zT7wU#&yE9PJ$_(Q2{!IPC45Q6xqpsa(X$I3Iz*S`TUU#^(TqJlaIMV|I7jMd5F9CA
z6*_0fSs~(J4WFf9!pP9y&Z}yaZU%9aZ}TbjlZwjyPbaixh@m(%XcxnOX7V|1u>$}9
z(pmUbK0QJRf6H$`BmtzxfbL-?jkD^TC{yD+<N8|wlZxnp2`*chp%Zy?SL|=<McQbq
z{=0v9+U)+Nqp)4FFd62a>$I(;c+#yjobZyBvqC`T-igerU+LxF|J~Em;!mahgunQr
zj_jtgrFE41K427Qb-zC(W;U`yrfK2z%276L3o%I=caLoXvlqT`ug3OPmbcmx4Pi)O
z%{>41c(}HEs#L85=3pUU^Vhm8v@VjShsQ;sQY;1ySFa`pqwj#*|E8WMU|L4GMIWTn
zMv*`8GA>UEw52~Sz!bbO)?7tLVI8~d2OK++?+8Gl@e<*<B|D7ynziE)AihEl+YHmC
z>8*T;RaPL+5Lc^D{^q%i7ER(k`)0z1$fZ1csontS0RkbeC}I$hTP!M(VZA*%apWs}
zC>COMKam28*wE_Ow-kifxK$T&Zy9j~1(a&C0sXgW`=1eDF^Mj%aRICme`f*%*-Vsh
zkn9IG*5zm#4?8Ga`iEcuh^IKb`Tb9yyH~uKb4;RjD)A+JCy3vyAeS}7Lg)RNpu{Fe
zH#^7Nzi<`f2yQ09+YQBMRf;b@CykF!zQJ1y-93uI>L6nF!$jvCvs$-H_e$MNvKkT)
zZ%64nL8M(tI+RvWHihR-Ra&~JuPXQ}-&n)juqGGi|ITW|R!48n|ISo&ew#n#!?>^*
ztKYwXS<jN3Em5ojvCNqXl3TGMRmkp}_~pD}k`N?ciy#-GzIcpuO<6!r-{tRv<HF&`
za1Y>|0|-l-efO{{F^fq>rFoFEdzlj>F`7>DBIZ-Ldf;RZ*B2Kl->Zo?XxWouQ`dxx
zhw3HUK<@2d-s$3vg-=`~V3MI1Vym89)E-#ZkCHqhoJIUTKYv^c#kMy)op!*oinIZC
z7TVXOb(2I8-e7%@9LT}>AGbVO5a6CwX_O^TI#xg8-s7hp>Epnx+|2E3X5Q$^j&WVE
z|5qM!#BZ`LxXyikJLb;nast2hrK#+Z7w|9d*i%~0(cK6WK=h9wHOT4t-BS|_AZ?2`
z!q^YG_xDB?Q9xVVbD@(%uD?&`@96XfxZoH$?(o_#i0Kww1N26?<znG3WNcUhR6XyZ
zutM-YI~EeXlCB(e&uY}E+v21F5vC{5fd!X?J@}N99$I;|^zx|Hyne=}+0EoX)PaDz
z3F`17jlM}|uc)Aa)knjq_S9|vwSv>gaJKOA3R-{kDkpz?KgjMd8v}Cr&dtM7WdT>v
z_MjahBG$2mX4A>JxB6N*KN7#tmu{O=FX9(IR^)av#aSr<(5@HQ?lmL=@D6~KdM=~+
zH?b)&%LX|2J`2r$lnQ*S#b0T>YW^fXd)?c7T0*|P?+;*Z2`Y(XM{<Zs;7ICOAVhdk
zJ!;!LXtZD1J>&&l5NP_FyszY2K6Y8?X1Qe0M1{Oy|7p_mU~o4Y6_5%ytMxrm^kGyI
zn8vJOKewyVc#nUp{d^_E%0A-Qc=EE>i$9IjI*|Atjw!n*J$|MR3MX-es}5gSZi^wA
zvI`Os7Xq-cH@T+XUIRIra&WI@81ancVS$Y$E!Ug(PNTzO^Nl1|?B`<<(UL2(I2tFJ
z)~al@?t+n2nKvWQr;tz;tT`;{8KKid31yaI7a$MMx^)Uah-RJSq>pDJ<H$CPV4f;|
z3xtR{*=C+ywo0#?ioH+J241a3aq%r5)G^TZwRM%`we>Jp!|9#(W*CJMhl@ghJUt>|
z)|R3Zkex~)i6otpBp(tEFQ9g2p`HB2_1dZ}u6a1nO&R0%RxQR0rfZc0!6ixzKIhJ~
zqfcb=&E{P2FDl=-Go*+s?if0R5$RY6hTd%CRTMP~+w7N4#7ZRI^#vo*!LOi|U522l
z7t$iaF$K9#(yt#TD~I65AXYaYpO~%%_w7<mXP+rpWf?o{JIu&@xyB>%s2JfQKdcxz
z2G^&m6*sWIxNd)UcC25w)SCd#g=jMw3lC5wvFy-*opiiJ@$MqJP+pV^xFfPXj@6jB
zwJ#LH88Vntcvr$n0dGK`x>0}^z>umv0Xb2@MFdffT$uKA-_!bMqJM~Tc%+%Vdgikt
z^awZ?Y+mnx5XTa_e?3kz;B&ViG3lsUVhyqS)YSiLC7cX#Oe``y=W-jc#JJJ@YvUo6
zD%uR^8+vAJ6)iS*`B_lhL8TT$(H8T}LRWKU3ExcaHOx_8ONRbXam<!*1);yuiN`Am
zakChz>1n=v(NpMQ8tM28=&Q30l!tj%eizkZ5$NRp+up39p4Ar%0`S~VwSD^FWUYni
znwqM#rpnjDRTk2W`ahr)UYk#(fmGodSz$|$>ldQhqL`z6z(|B6;1a^qX19gM5YyZg
z_H>ihzhfdWK~HeQyLpmU^B&$KT@`fp!1)?e7V9orqyEd~^6&tXCtw&6uSR}(xdR-{
z{s!cJa#4Wlk0^Z(zDUSWzA0P1sn?^#;WzaY{@oiIAy|!)B20X+4BAJc1(MpCa!$WJ
z1$l-xlF3&sclk-yT>y4qZWCUBdI3>Sl2*m^Zlf<O_M8h-&@G|9PuWVuIbTgs{Q1b7
zF0I~MyIp6Ql5xo9^jv(!(7#p({pyVSyB@VVKt?a72J~F@e<?$@tz8%sFqQh*I%3PS
z=651DQm`;djd_Gv*Q&|;Y4#b<8#@H7h;rJ>=$ih^&AJDgPM6CAYf0R29|23z_>t%|
z>y#VS31W{Lr&IzrKiCxfZjQhbl-6XrQO9$vdYb!2&8jUp&Rn3rBMc%WY)%~wof1o#
zJ#IuxFDpY|xPwl6wBq!#g@G;I2{aH(QmVS!B?^Ti`=AgQf6f>x1HXDv>ybE+pq_tT
z=UW+}`1P%UQ&!*bU<S(p{G$OeXsnUm3y-;u`;V(3hLXLeRi3zh31Bet?yTGyS%8X|
z|E26g3HffX9EJDW1|ILS*2+1&MZcbyB3`jXBO7YLcA&N%FG21)rf=D7@^gvET&Sf5
z?P6eh6A|&uH-$ja%a-O)D=E7(6g-9@8$PE}PDg1|R!&7ya&P}Oz~6%docTEs{-_sA
z{kPc5Pw0T2ys$||qdm!4D!TQ(sN5y%s)n>lnXoB^h91e%M(ZTb7kFPrLG4u6s;`Rg
zO^EhtBiQ1<kqFf8XgmjP?{+2zMv`gBA<eRb607giT~Wre*?6eVJ@ZhUiH*wr;x}-{
zVK@{rMur<j4=!Lt!{3w{LT@_IycYvl^sYAba=+!b0R@D8M(%DB`fGu0>z4jFTLq0%
zMg(iR2m`kl67d?+z@B`R4~$AKb~SB@7DTXu!O4YBO<{T2pWt@-$Huo4Gz*XWizjW`
z+oyBs{#pxkVG-J;!g-Zytq{H=cSx5-_sX!7AqL@@uQbNJxOfC!0rL(GBHBCF_R-<a
z#UIAKjDW(vSNTuI19k+gSWtEiZ7Eu0XRpiLgG}v>a?i}102-F(<p;ewc)eq`Rr>F<
z3e&Uci<5LE2Xvaho^;VU%&fIoAw$}+W{g}8=EB9*j)06PjAqjiv2IY9eahk`(j+WT
zmG7WB-wN}{`HcD=OVrmlCTIxX1C2B==A9-6war?-$^(>Q83jCNsam91cN^}7;Cru}
z)DBO+t=p35l|*WKrJP(^`c9hMI}37~h%_4ea)Jk^x@S_%mqu&VzLcQR!c?B|5!+tC
z^g1HFgi1`M!$btBjyp+Ui)9{uOMt5D>3w}l;J4J&y=aJ=<%1xU!v5Wtl_v~vYfK^x
z1El&uo8kVfM#-RDFPEz>?TVNN$iK~#Wi<kz?jR-saZPd4n3<$nz-K<v)c|@x3?Zm)
z7$YjW_)8sQzSCv*8YLDZXN*4v=Lx43*v$b*2ky=xpa`iOdW115K2Np$Fi}ZyS-U4)
z+Sx_7?G*(fRB1hmNCAi9m%RR6@C;Oi9vA3*S83ni11s22H&iFKr;rWlP|0)k)&38E
z?J8f!>l_5ExY|^osA-aBX_B8qynmL~LddX>0>_+YOu^wouz|_Xb(>1QJ4b83|JcVr
zYRVf=*974cW!Gla@jx9qlG<eAW%SL^1p5X5ywa#cyLo--n%~2U4&p8T@AQ(7a?);?
z{~+Opk16k_l^ymJ_fAwbt6)M(VV?^l#<O>rk0}#>c}Umrl~%c2nK7IV!2GbUPTL=l
zNUTg5IQjHJ{6~c^@3&XlB$4gCWkRjSSBB^frm<C-+|s_?3Vy2r1Q4L9-N6|B0v;qa
zo7x!~xgm5Dx|dM{7#y-AmbnZ_@!ZPEnS+Um%fx8E;QhOZv55j%C)5!4Y1GS+Uv9Us
zb=u)EZdV1&-0jb&q&gGK5T2r<#OUrCOCz53L%^v%*7j*Sy#1mtIg3nWpM)02geCh-
z$@uCHI!!j+fsFn#8UXJ9#VFQ>iU4`BORoi~R`qYx*>_lvkG;!CDN$d4ad7jiN_h+l
zSV69qVb;rRP&;qQrf`<bCyaYyUjes#c}yf2OAIoodCWui1Glxz>*wG7N_aD4)%K{7
zN#~R4!Oi10bh6qS;Om9v?oI(3<H}F`tI|bd><LOHi8uKI&JX<!M<vomqE|E!^P5>;
zGqk}6X23%SFudf`O8=EhDnX6OUDDjU=ffRJ(K#PtO3$q{7dSlb<>;O@_4u}RIX7lu
z@6=TmD*D(1hIF>0X{Z<L&LqUqIYfMb3e%}zQ~1R8pO*#TJ5AkShjS&0t_s5M4jkUL
z0eRN?ZV^PGh&s$pln$H%jyn4~f?8yK>us%b<E^S#%gm5qImmkmL`FGQkWZpPC2vAV
z71d{RwZ}?q=@2!k)l9Aa^#*41{q~bwQc>CWm0fYm>pBv7K7aTu#1vjU<P;f%fAa#*
z2KO{>d8bpZ7!<VKve@IW1vs@><6?4-3KkaEBwvtDn0d`2y<JH)z+&2c;sx1zh^Vhi
zE)~kG-%n6n)`Ht){>qEvI5C9miB>h^qJ0%kxjEv84?|;JhSpNEl0QR{^X}eO7<L^{
zH8)7f841W!l}>u2cV|wT*DP&g77^C}Xy^T7-v_@T;-ugQ%}OrlSl%uHay>t=#mnm%
zxmng3SCKvJI**CbYmt~(4QG;XKp(QWqQFXWUo-?I7mz8Fy$z{H;&ws~fao9_v^#(V
z)?%b-cz>jR26=6q!*Yf$PRzl&-3z$B!?<cDfe(hh*NtJVwP`4iMm$ecCN?hQ!-K1>
zsKR_qfi>oz%F5DLG>{YAcH6>EuVitr%eUbSRJ13`rmJVZTrv*MV_DYf%~-%0s4EG)
zMZznggq7^|voAC1F4ixnCJ{^qBK9RIx1wrz0j$NhR8_gX|8VZXcuVt3>>jznc$DO_
z6oK_ehyX)CyuVIeqxxI*KeXtxHdsY7-tWi59f;OdbNQ7upFw4R7}RB#IU&HYGf5Nm
z!O@NJ`=Ml%OO#Us4K>X>dBe5+s5lL{BsWvl1>t`d!cPvD4fpP$koOVy^v=%V3b|IH
z$)O4p^zxQ0f!%a!Di=9wTOH{ZN>dG#tU&YBi{dm)lZP9Hmum_}7(ot;MYtt)i(~fr
zo^O{M3+D3~bUyvP73`Z}o4OKA0vmR6+JB})d{EgxsFEPwr`}sW`c8nIl_eY{;}iMS
zA>}sSjq#idDDHeI*M%HYRdp7R?Cs%kBbh#o>O~Ex&>lNLz=y0mJz5g^f3WEPe}oHZ
zuu@N!GVYSCcr^&A_8>k)skx^s+j(rfzWwu#@BZ9`NCggsb<jVG15p0YQo+P*Z-jlv
zoCg2FB&s@6sQ_4`>KcB%7@<M25KB*b09aFR>xpXD&BLb$Y7?$lKdqdVjZm0wX&z-#
zL*p+%7#3QTmH%nNBQQ?q2vwQ#1<VEMAqY(n!Sy8i&MJ0D*1#QSnnUPM*fUps)L{eP
zs7CNO`15nmHnBwavrrZKZXKQ7LsNZfbclOO{adN!l{eW;3)Z%#5t;FGa6PP)yDi^p
ztDy>m6&pNK>|)<C&Zs26n%7OYs3Mhs;@7jS3p(1|LJt!QonbaC#&zf^S3;z=T-02c
zbn(Y?6oA?i?F!YT_IqliPNy?!QY0P7lqPT`#AgBeX&XLYF|aKMKzUO^Ut*4$umU*(
z)?ssKo6zkLf+j6SY-O@@EMd30j3nQ}KDB!DiKpNWjs9y4R{^07nC1K9Cm;OVh3#rV
z4eA1jLi)(Gd5_zy=Q71j4jI<a0>SkFe(my;JxeY~dsjRNi#$(RWhCb1SDUOO)e?pr
zv@x5^nN;VKXs&?lq6O`Mv|Zq=k5fDoy+_gu;}SR~z`z8QrFZei?dg6|hfAVrY`5DZ
zWL6|?t^?6rw>><oUdtQa-~oO2AAVL=Hv1Tf`RH$fSQ27Met{l9_u{yy2J(os*Flnf
zssuX8+(LI2S_+;}IhSp<tI`XQ^uUda-loY&g^5#W=xc%IRcp-T$_P*f$f<VfhK_;z
zT(r9wO^YkGnGt2~`JcxNk_LSk5f+0w|LCWP?p!SdF0~&6^Fj)C0jcxJNj4(9;nIll
zh~G|*^Hb|)9-<(r9sgQo#l&G1;NOB9s$A*&9ZlBxQ1%TeXb2=IEWa957KgJ=Lant}
z;+4~U@E+k*g&AAcM<3oSn4k|;^0vL6g=*rV+!NN~jf`wO#J(tkB%Lh!?gA)(NB##C
zFUbSfMCts*9_N2^ma_L1Y?s*+n1}au(>oRizPsC!HhpMgmpEC+{l3DyfDSi$K*38B
zbKbo;`d7G`<Dlj{^{)XvT2;m%8iH#EhVT?7cT*Bhf9sUs%nOw6QM}6+3jh9wdws-4
zDoq$hnpD6EPC%gR8F{p)KZtV8T#qfBP$e&Zb>6HaXBs%014i}AELB7{AM6Lb7U-HD
zj-Xh~ydG7jt{4VbegbtW=xFJ321*mOJTt>AfGD8dRQ$(Wk;w!Vboyp%t7PhqwW*t1
zF3$=&W91+L?DBE>-#YdB0LrPXyzHHl9Ll4O2aM)o3{`ZP2rw&3!`h5)2z%_=XtIq?
zn_~du{5p04Pb5e?b|cY&Fm%Q8gFtjEwNr(f0+Y(rvfyPAf5821wZP0zz3Fc7;3`*<
zWul|?#w=8h+(msEa)f4}y*M6whCYIk=hJTGbb8ST&^@c*fD9GH<U<JskM)ZZ)AetE
z^zN(>olCLT-N27dR$l3o39xBFR{qa;%(dt`MMsus1WdkBy%A}QSZ`|;T{Py9!-(1&
zFPPh$rcoxZ^-9LjoJS=w7fh<Hz}k|OTfv+u1Yy2q#oJke^+P&=f9{43mCn;B3ohbY
z?-np0Wq`6C1rg&3O{y%Y4_HofzZTUeY2|ZW;&M0ct_vTzstn>y#`5cL?viYX#c<AX
z(ShxBQFnOCV!MnA!@CXO70{pAZs;<DKRvu<3#nbD(tv>Az4!a5wK%p$(W=79d&%U@
zw8G`B<BPNu)>=efPl)czG@c*=d6zI)JTh@xXIsHXZD)lkN9N11#2u#uW!|x9U+q$+
ziF2^Y?5rqBB9d4K*dun*{4it`$i?d=?te1`uwb1}i0!ytYjA`b)^js~Hio9rt+v@R
zOJf=?h`K`clV={Bddg-vK8h1PNSNeedkI+=iKg0#UURirq(VmP{1b+C)I{&9+_Ne&
z@m1Q0;|vUH2zpOPT|JMZhf&}LlLejJ;@Mc9QNcA<pXaN^hi`_u9cBL+<VcW<i6}ai
zK?{f^Esf3V3a>f&ACSi*hajQXqFWTi9!prkt%Vc+N45r&_?qLn_)!vHw>}%=RX_rJ
zjdHc1c}Ze{aJ6D701c9_;2zc{alDFA2;r3~pWl&6Mq~xQDE^5LhM9T7wcqlIX?<EE
z6?=rvM(19O()CCcr2)itCKGR0vKZX&t=T{1`x?aCH`Cg7swP;}v!Q8F_urPS{se&R
zMj)@O&P3jt3!!_=+i3LGiAL{fhymNmEu-WcY?lhir+QBvL7Rr@({(on>)9!z-ejAS
z3~N7h8LmzK-s#B)v5|Vz?^yMI0}X`oD?KVP@CM<_?C8S~vpJ7UhjrW9G=`$MP1ueb
zotkD{StOuzwmlq$<Ymb|SK_&1+oNhn?AvFiQML$bGHtuD7x_In>s^zzU%_AMFzkJV
zA6)p1Y-<a*g~W?wKk)7qPxYAp&8$kjde6qP=ZPc2{u4AWltAHTn!b9D_|wY7f|!}H
z*;PqS`FR{{-Cf>|{eKo!?(1DL<;fo5-Iw+3s~pT|=Q`l%fKQcM2ks?rhPzcJ+;Kw)
z;p~*7KJ{O5bhG_ZUK}?p+W<9H)VUlC%}imuQ*v2|lQq}>sY4lkwcH?+ZLuI;&;*Lk
zyJLV=$#I@W3cq`RTQBb@l1WbPNinK-a(l0;bWjwf<lc!dp}S?K5vjGro%~a<)Szzs
zT0ShrvK>o{%?sVZ39#jQrA-bkhxI!nac?bBKu_NUclr?atir-X;m`l{T`i9tdxTWb
zmigThb~srd<2BmCl=taDK=nxtRI`d$m&%Q-j}`kVn4eE~O79hgB6QpJ4Nv0)!&s%T
z<8Bop#q2gEyCXa0d^;;O%^!@X5V4o~%H~AllxbuZOJVs63Tc`x4~LfV0EpzW$yj_{
zE74Q_VOh1M3HQu?X;9j~UQT`v&`3MMUgom8fV7vy7TxuHKRMTy0yE8|dRbRIZ(+~&
z`<PU!OQ%m~uO1KxGi)z>H&CDqR7b-%4t*=4mt!7_i;4nTOp8gsLuobo52W`fuX#k8
zA+NI90L>1}xWV+oqQkjb#+lD1fX8MDgEpClUUlwY^3QyT6W=`ah=4kznG5?OkR~aD
z^y&w2{mbFGWGV=Eq1>NKPS3<W5Sw?<A?B0XH`86VxO?vLI4MQZ3o>u-|HcQBARKWx
z`K2mRpuQ@C*jB0fx{GK$tUx2e8k%VaKV`>q-n<B6ym0p7xa_Wla|S5K(#{Ywctuc@
zywZYnR-aSz98~Cs?r_jOp)x<2kZ#+fB%Mda;iDx<svbriMoMZT+w~1<nlpp*R%?W5
zAnZZfJi)C})vT=edK@gLzi_Kc`}V|!Xx!WlJ(igqY;wl@I;2p#J^AxJgv)Ynrzp(g
zis8PqdC~d7MXD1nA^C&V*NI_&3I*>x4+>54GxyX1L^Vi7dnSSn(Jcj<F;jLT)2Qu>
z5wCpr*!tD~#Z<y=S?}}Hu>E)TPI^Jcjnl)6AMc1O9U*MOeZVO!VdoUSfcxA9D?Ci8
zF>OgKB<>gJwC#k1d6VvFrO$SUJW(>0$N9Q4G^Gbs{DZOP(N9CvN(Wc^TJ>GeT?mN&
z>=eMyDb2!W3?yi3cqHJSd*S|ueO00rU{|PVw)3(KElp8FcWR|yV%I&CBeI;{H=$2u
z$G1+Gu!6`7;+HnlFU=2#M1w5p9WcHi`UI@|sQRted*60~4!QrJSn_`fkUIuXpBvNf
zVRGIINjebt+k3p?x(IvS?}RGrAf`=^!n|<`#XB2LQN-EZOa-<%9O+I&+x9K@rt#P-
zXDJoy3&^nOGW(`q-5g3lwm|<GnFEkxtWVtiL1n!kQUFAhr$KK`uj4%f3<bYInFfNN
ztc1W&7dSH3XDYF39q#n>lT5F>?0GkPOpZOxN1{W~_?TY#<)_rOZE{ij$}~?K2fO}(
zDB1b+(jph=A8mWqzG=Wd)=x)4BsR%CEulNCLF*U>{YGbM9@kZ^+r_W#!c2M1gcR_n
z!#;CVG5;gP@0X^fV$;ecc#_f<gz`H&x~+PPETl610zFA(J}e~;&6apW;PO+A(6_-D
z-A^%Z;Q+i7tUm3vx{)5m<}c_Ur*2stpiYheXZIwz+3~$y&90PwwW(07Hg$n+Hl$Q|
zHV4<81cXMTs<YpW-7d6R56EvVkhN+k`4ZQu1i1UMlZfx385Zb{flY+3LnoI?JAY`J
zCI?55Fqleqi625MP*k-Uz=zoEGQS06uF9AJzm<Q>tJW|n75L(na<hB(Zfc!CoWR@{
zKHw!0u_cDA2BfO``uS*@K)+bUi3crs(QXg~()OdADZ9MD<MO=D9<5mgLzwB}cL(Xo
z^S->l?<;mdV$Rz?)NlLsCD%=69QfJ%3?%=|e!w7^(xb84N1M^7m;*Dv99zY#V-ZyC
zs!4=wQ+tY?s3MIwJ^>ErJ2{c40vUUpT7$Pq(Y2~gfy!yg6qlQ_r+FXogP5uq^Y=7(
zXCn|u4A!yn;(DlB_UQP;RZ^S*i6+a+z<BjQK9csf`JA3dEc8k^yI@f295M%y{2NrM
zi>o+U_p=VVbslo~9lu_pLDm6Y9e87l16}$xWfPEa;*Vfgua0oqdfMkPaxNnP^y_5)
zO{OeTvd8iXzXgkXg=54REQmfUY+iWQX)Xxe6QO3K3iuqH`iZU?REA3rezIT38qLeO
z->X($lE7>5(VoiFRJOSGpBQqr)n!XY(tq&?!G=YkEh69{31rl)oavi=m$nZ6VAA;C
z`XlTTu=^j;G8`4M&^mkjY)}G(C=jt5`I%fiOvUwTa`E@kFaI~aB*mJcZ20tktLqp1
z)CQC>^)K(uq`7j*AhRofDbn_ikoUEnk8=SHr*X8>hW65exPxMLW;~?krT2MJb}D;t
zY2sfz>&W_lK(~k~a>WO@@Avw;ma8jwY#S@xLFcBPwcs&L$E+2O`PZJ1GZ1U00|V|!
zJxwbu()znG4AL&`!H5EyWT9U`tT*4&e(=^)PT#FZd0A_>VO-p-Q@v>n9DUxk<Nx`f
zSOf&N37PxWJ<V{dDY`x17KkPl-3YLa{Pw(x`k>eTx52&I*AaHR@HzWg@et4MHTw^D
zWSwt4JY0=qNsN2{Z%1Gc+xmZOE`3)+Z_#CHaiQ-{&pky5wQjU-CL3ZfB|A*QV|tgU
zN4HCS7<OrkPjl&gcBwn&%me`O>f2*uY)!^p&sDU2NwH7(pO?zg#M#f~PebRX9ywr4
z$wLNH;zi3huTDVLQa@bNAs-b*pdQ@4yz3Y}E(Tg{W4{$vkI&&ag#i)isWJe&MS=%^
zrYuhUDf)inB7EWY6Rb*ZGDlX$t<QKo^BF}<tM?9hWJ-YGXa$=@Ly)fb@)P*_$!<C{
zO8%wvqCh6T0ye!!#0;fsgmySyJ!Nw<9q;)?GWW(W(fx$u;q`>e*n+!mDf6>I&yoT}
zTV|q;vf)Y^i=T;#<#n=ybuN<d+q6xXZ~tI|4Zv~COk#1H2koIJRgR3`c_>wI8Mf(1
zBU+4VW}l!#=i;?|W>)|H?m^DX9h#vh7v-w;2UQ*7{p2iUUP!T9L6guFN;I|550W%|
z*@BL9P!jV}1ECUW1jM!ul3FI)Yy`fQMHplWsv3}8k_eP2;_(GfJ?pGo_PO>}Rq#0x
zHA0Xe2P9lADDId_PXl>{_qF{V^?K|N-tw~^H*<vuaaz`P(@SdENbiF2QDtHIOH&OZ
zx*}OU#FD`$$>VWqxVba>xw9FMa}8<N1x^|DP)nPKhy$XfS$|7#p4i%)$FzH@*mO`T
zpu5-1_`2LTpKTv1D86L&?*r#bfw$G7+vxz9y&Gbu`Z#3hR4hI$VLK$zFv~ky^{YaK
z7A|m@EyX9|)Up|P$8-@40v3vpm1Cer!0bQnGn9-R5vldg!OKi6o~pSI>&uANJs$>u
zH$_CTjM<1=zqJ1tRLqxFYIhCEjv^w`CJArdW{f5I($9H}B&ySZJ~)wzI1c!iNK1%6
zucTjs6=AI12HXFYKQU66Q8(DRXJ2A(2SNC8q2&?vL}$AwVOv{<W!>iq(+O;kMB&)%
zK?;sNHPo$6Vv^N~7%Fx%`|N)!vwZB;>UscX@-NGe_{9pM!}ufZYEXPs%Ld-BCHa~Q
z!B(QO0-?q-=z87Jknj(Rh-J$Fez&jzRSQt(uySD6@T1GS0;N^|{w(q@vZy%M%lm@i
zZ2-c?)&Ri~)9e0x5c<i7FM_~Nyq$hu%rHO?%K!V&B`X$-3Z1NsjF=by`cE$nv@u4@
z1r838{u}v0NGvIpT6GbXZauhQVL)9$f)>0SBdu`f)V*JJNuR;OC<v1ienF7<04BYA
z?X+{W)MCjep?U;OV_HTx=%a9Gh&d^MCj`vMcVX)e9JPNr3F8s9anrp(AObEyh}Ixa
zFwnk+0pzc5)AAe<Ijb3Yb$GpN?0fkp*dSJS;;NZuGC`Ic*KjfIjcM+aV$Ow+UY5rm
zWUyhR)N;U0vpCH<h6R6<E&beMnD6t#S6Xad`37^h0h_ufy}u|Gme6+mDKe4$co(#R
zi9w<2qjFY}hnC{8l}%h+L4vnOC{1&i-w+BLh7pCyv2la-e8|;?!+4t;_$0pSnJ#2X
zi?C@WapoxQNR=ZDx>)>46X?G;u5{bgJBNB9=pEx13l9dW|6KMNlHz3A^Euc=wg>NP
ze&z{r%xnl3Q#v%@^p-Sv-}hei?yD8D@?jxBxmNFSTSv{XYAYUHyVJFQ`!v~mGyeRr
zPXa7xJfFXm!AD!TN{&2J4S8UA$}3IZg+sTz2F~jOE%nHy(Vown%DMtby&|oNDIkmX
zD^V17SJnY}Kt(0ft%96ZelRZ8Q{C**PfQ8`TAVJ`cyYOG1}V-L%9Fj3YI1j>TX+j)
zU~};eZ+a3}PyVmS66^iVPK-(`iClkSzCBWs-2zDj&=>WRlnC$II17M`TN}yvQfC(E
z*##<<kSLU<gV66F<Q)dxa0QhA#-QmrpEgHFz)O~C>l{=#QSc&Vsl0{+cF6^k4v+~b
z;GWL$3D-wVm#A4mx#3wFG7q&sGIGG}@l~X#AghSZKiA6fcD+k~{O!3ae}ow(^IhC^
zhU!Lv`XnnfMk0&8Mh0rWrX7xPyzjLq7*_Y2O}$le`8^_opeEdK2v`4i|Iw5+Vw&TP
zwd|t&wWfW*8s?jZJl3g220xRR&=bNLGT(&>un_-Q37nO~`Ran0VldcW?lk(Qy`@%x
zIH&3@9r4E0Ss_JHl(}QCW<xHo_*Fia=OdGX@I#~P$XlpgC?1PbL5eM3pw^Bh&eD+@
zZ~+D00f6@MWEm^97?g#%`ZW8T`)|SMzY_j}{9R9-ZH$Rl>e>BvRwtM7R@tUoFq)C>
zPyO(0Cq79MB%Ef6&cwo(qS)JkSgPy(Pt5#fxY7ok=@9eR`5CktyuGYF<sqK!q=<`x
z1I`=WYz+KBH9MAW9r$TFqdcy^Y$A!uaw<cRdD6$WsNPd5Xt4mDv+o1a+YSEkDGwKz
zSP%D4aqi={b>Nd#E>QHB819adUNho6*`F@$$-n_n%}~28>pY&~m3xZjI;A9IN+E@B
zxeS~JVv)=51@Yw#*Oq%hyS;<vsLd6~MAxGGW@$^dClIFNHFMFyS_mD5;%v=%bVWTp
zzE_Muy9cjaQ_=A&;Jvs21ve4vFETJPP%p4;(dq65c$vxq%jsVbF!eZ&G@IWV*7i%w
z29f@zpqX5!q-6TPxqo08)ai2y(N~`>=_%Sfht?$74PVWnusT(zyqT%5?y_U<Zs9o{
zj@H0q+v`uWM}ErP4M*I9hWAlZ%jsv2ShH7)#&H}MsxNLfxWeub2sgM+e?(i5M(2}&
zz+bf715Li+UI2%OwX{nEz=vV(*>Q%9iqMSS961BQc3I<1C?mK1g>Z$0t{uy9KmIqJ
z59`*Y1`hpDs@l$_G0jm?^^^+@!&}p>GHj}NA<*vCX=6W0O_3SVnrY~f@D90=*an#S
zT?s3|zHR7;)V}cN2mN)y3WsS43p()V{s#z>*~#s*r~AK$qZ-gV%QZJ*e~&I7^EA(9
zr#Wip#iJZw_f<L*Bvs($Kx`>N<pfYZ-o^zn6Vc!wfP8wLU%d(&^-eYYux}xKs@m*d
z?x}#^NdgJ`oE8}V0>o)JtkrYGaB9>UeDE~HokNcT|8`Nv-Qw=78&O9;cq}mxh?Hw_
z0+SDLz`uILu&$Q<@J*&ErMR1kfplR%a_&gh)IFu6B&6Jj)owiuMb6-;7R&oOwCi*w
zB7GLNnGi$?T_KQw3zUX)FOP>q?TKZB2zUJKLrNhc3C9MjW5yy=4Mz|3CllspOcBU{
z!$2Zq`En9{TNCq&9UQ(&<Q;lF<_)zeJK%U=vaMEej#=^l=UQ3TK?8_ENbk%?XNvn*
z%$pzIT$kSRhA&V>_<=AUIfxRD<wJKuA6(!TqKi-v;jW4ub(vV2R0ysY?fySpu%15^
zlp6=>DzZVl+S562$b5N7cUU$yy>e%N^^};F@K8)0sCV$TMrquh(+HJ6)0RHCx{Q2u
z#41<Zl(zq36qu9~@mHD=VD}AD?{@n#-y?Kp3te8<TtZhcTXJyfb2pi&RurSN4yje=
z;!%|Of3N<7L}iSKL+3`c%@-bK5OY=su>YvNd<pRXAd@4O?X8M}NlI+HI-|Dkm~SDg
z<xf;}$%bS>AAvuBt73GneWyR=q53|-6=D@)l<#OTfy$~iIWw+IO<(<j8z<kf?&ngE
zae&Kn{=xV0r9czPd0RcxVyp*<k`uU1#Pp%xOz<_bPbGW8x^so{5R0NOha4N079+(I
zT6M{+I0WAt^I;8fHi6B1Dv%DtA5faaT*xV!i<upNX{7%Vb;cYAypch}z%eyXFPs5@
z?uU*crqWO@HtYH(HKG1o0TQQBHe-kkw~G|iV$Re{IW)5?gn)q?5G)`=^ju{@gx%Jr
zdgI&$o$aq{5htb<^(h>tFX3Z?KwQ3dL3gRWP?C#?GOY*L9c-hu&wzHx<HUKi5Gg-5
zEF1-~Evgw?w@e+qf}XmIZK2S*HO}(UT8sMpuBsUJ;OFCt+Ihw7x7W}vFNR^dZ5IEj
zMeQPzgVh%xh`I|G1a+45X}BKvym1T^-K0kt9xHg#1>5f*o}az_T~_tjk+&mo*slcW
z4$X~L#=}5QGp}^IX79ntE+|X>?YUP?wD8(^biTTRJ}Xuj1j>-?@<Z6_obGJ?jo(=R
zr_QD_-~`ltgR5tznI9xbE_iL13yInKI5CMz^=?>OZ~;ZBn89rl>+Sge_N=5h8A27a
z-z8H9l2SG%C5U`H8G{P?o~XNXgfZcqhfOz{Spawp5a!;ib^C#ViYP`l0HRy#c_LDu
zP)8gM1#uvY<X+MmH`x<@JfeDgc>}P>QmnJWIBB7?{b6nrLu<EG6xzkk;YBg+ueJt%
zu}>fspKqea&CIKK#(=0Jm3KF<>=sZjltH+w@_4xqTH6vG(7uJ-(T)Ai>BlPrMVXd@
z-*yOA6BdGUTfDN0wC<uVt2TRtwL`Wb6N#vgr$g=A<z;Y?)HuNPlVyw*atJb}K?b3v
zRG<9*O<wFzSKWkLJkX+x!~HLomO1mKeYk--aoLJk99k05?J!m0%jXp%+~*>nKb23&
z7{JKKv%3RHH*ID`s8{})A{19+WP^~pEBerGqHlJ0yTj;AU(D&6d=){EOKGXvSqQu6
zAtFtarB#a&Y#u<=5%#4;kN)5b1$Wwt<XAdc^De4z-s(%2O@A@PHq!xFdZI~aITjC8
z(D}W7^P4tVf!j?ChM2|Is@#>NLf3ed(hT?)-Dfaky48ZByq(XRu<-RMVQ~y8!xyYV
zwZl>-WfH&Z<edM1wnRa5bLeB)^eN>fIiOC`=h?2g)rFed(_mkp-3I5!cR9~0j?7*S
z#AWylquvt>qG_(j)|r9vk)@iaTh{HTQcDwrj{oI%xyJx*QIwUdIAd^6Cf~ZnwF9iF
z8&=*sfO4mdVb16_Rw4p5bSP$~{5rAtbIx|anpHrGMo5XDMu_u58E1>C9Jr>vDGZ2;
zuhm~>x2m*O))UyE)wrU!6YeD|_fNM<ZFLkjmRi3$KY7ewOv!uf?sNoH@LsDfAHY}%
zm^y?=wO3x1vALi8ZiU@JwA(?j*CJ#^%u}QP={g4T(aWLEAywGwdp~?X8>Hf6iN6Fg
z%D?-wxczhHn3%tExC7I_oTuF5*%dt{hYt8HF`iD{@xsYG2D4?d*_AQmU+P6Rr-K_;
z1pV~%9}T{Xu;Y78S%5vU7vfh;$w(~bjfnA=ewH}W7E35N;)@&-Tq?&!t=$|oCM=TS
znJVmu5z&l?AiFqi;;u|mU8tSwhek_}Gl;D^gGdPJ7|6JBfTPPCkAgda09K<1M64To
zzjH+^Qb9z3wlY*X86_G<^Dr)RSyyb9=>v|_bhWldg`_=1mda(K0|01xUnsC)2}Do$
zWFVH(Wm@Q3SgD%HAx~)Vq{`fY+F9rw4={z6zGfH)kzZdX*BMhz<76u3k6(=yk=iEQ
zi2UnT{nCfqGVi%8B!Bos(&+!>Z~ldeh7zNS9$@Od?i9sW17y)h+XRdJ4jB)RG{SX`
zeFxVj_4JG1XUzznb3MVY33<(Xu3=RW|NS!9^V{(K7K7eCGgT|)Iz}9&kVA>*m%B8;
z=l~zC3XXgKq3mEV6a`=PhX=GA^q0t;eM#P(@oC%qje!x45$<ubE7f{6FWCQXeUf^j
zV5$>-jySF9^N46V*FjPH7+(D{$a7bCld9ChWGGSO!-=N<v}cD$QTjpj%Y8EEuv%VV
zjETk{-XN15D;vfbURI_v_ckBMmz<Y>+8b_Nf64J)7q9S$lmWB${u#|KT}-*)ktaMJ
zuX#{HyMA+ebiDpBN_ic=VL4WSix)AW?Y38MR4|oOxQm~ZBAduP0vMVej&IX6=V)@R
zAB41<bOuMi&_$J}L%QxeW*}>nG>+5wdlh1DG49~d7sEteVBDfJ51Og_kwfcJV#Ocb
zG)_%kHpOFNfVW47tJMfWnr(rw7`?hv4{^j`-hxFlS;P5ld(ciAf*VKC#1(9((a7uo
z6E=)c8IPL7M?>UkRsLBVU0}c=>mh&~Z(+{KHz0rUa%%)io-j|Q65dd27%&@kTngzM
z6C*xfK7ke6l$RI9ID&LppZ$TIHt~C}AO@|%N?!}n2I#gyPpD0wR?as#HH7Ly|HPx!
z?Co{(Dw!_|oHcE9L#ieIRU$SQS)JJqceO!#7C+{V$AVug5l;}l!k_}4773=C0N>iz
z!g-F|N!E^&kx=u9rf$G{7Z^T181<}0GjF$J)g@7J4Q{P|Xg{hXPNouUCpO-hiHFnW
zWlCAdqB+jS#M|aD#A4x@Caf`9ed}&9&Tjn)U<Df30F$>r{oCHov$m4BF8?_m7w2Zu
zgt6w!_=hw4D%wp&RlZv>Iq-&<ifcQVs9=Oc@V#bvKiRf0%oo-*b*;{$2kj4hkvx7j
zY<M%_*41x;!h6adkG#!kh>PLI%Ek2|ESLX`hnqv9Q60g9ev(dL<lq2sy<dyz7W|ji
z>fCxVu|3bgD?dFAsHNPN8Ykf~uG$WCcmA$LJU&G5Ujx$c;ci%R^*UMc5_c`1-2WpJ
zEHEaX+<i#6qkag4aW!rx>@3h*3yrBZPTXA)y})j;vQHe-lac7d!(as<nh*VV2Y2_U
z(Lf&>CHJRD(gMKU9mhw3YhPvmy;@kB2uI6jNfslkUUgumPHupV?@XQx8`9yEW#D@B
z<t|LBFQjAk5>VPt7>d=zq_WcKgu0b3gJ-g!KeW%+=#JAU)Q^UQI#olJv+rLdwIpzd
z5uDU15pGHKyxo*WB##(+;k1kr|1&+ewnLQV#PO*Ul~35|X=2!wo9W?1&{#&guD{Zd
zRB9V^ekQvoKMuHR<el)E&H2(nXsYF^l3`fM|A*>TSY1tdL_YQDkHE*-@0F~pT@l^}
zT#S)`JneT$Udf&pl7>|q!^vT%+xV)g6imhW!AFl2yxE37h5E-$>FHmB-Vo!+BO?!>
z(08vt?Gv&T_#258eW0RSFtU1fDYN|q=M9`&PXj8?2aQT^m+&tJD|r0Co`%zrq>SqA
z%6uRZH>B&L9Ly>H6+SOE1In`X(8`9J<x6dz8_jV1!2h@TTv}aChc51&^IiwCesDOV
zY}ZhcQjk|SpAGy&zUHV-2k_T6_lvxmRLp=?67#xG=bJjL)V^e%ln-b>#*OdlIQdrv
z__J}JohDq_6IL}IjYj1?ADM}%8$a;*vo)l`+T3?6S)uW-weyb~{u<&ZCfD4ZuX|=`
zQQ8e8amUZ2GixAAE8xbChjf}Tk~HF<pxHDiazPrR8Q}X$-(^vX!{z_7GnAyjl8NCK
zf9Xl7(IqwUD0Rc``y7-@WsYh8{&Yx*S6%{W^f9)C#~)9mm<q~+IDJkKKuWOfO3eJ^
z7HY4{O6N}a#h=m(?qwo8m!7I{kd+WmkLDxS2`|$DX=AH9hCxhTl%qBw{O3^@6AOJm
ztVKXaPT=U2C8r?YM<y>RIn;w20SV(DbG6psI~dSS5NC-G1H`%D6O_C)HQyMO`)9Y&
z5`yIjAt)Sg#fWVEwG}_D6Xw@(AvF*s0}scKobKun633OgHlg_#s>;7P*@1}rf_Mz#
z5r(~9XFz&RmYUS#PxEf_A@wfMPEogTzCe1T_SGFVs;GkzWS@w_24&!~dEg<*mL@_*
zr~-%<f+ylsVB|A7r2lZ(+Dl(B&GLM*k{zaiGG=EJU&r1NyRH4GM#?oR5pGr(wSshP
zR!Mmy4=88gy0-r<<m=X1P14lEMaxp?i$=^$L(Hi*#l0B_GZz4kpyM*3#utXiV@sQ=
zQ6|Kb;#Um)$xFl^m%i%arLzpgEiJUeWq0rGWiLHrvsv{=i>>XvvRLY@UGyxw_z2DU
zJyK2dzH*?Uz@o|H#Fg(0u>LLPNc*aYM=AD9l5s;bf`{O%g`*)mWckjBw4^@!E#Ti;
ztXRpdnFhB$lLD@$J1s|qJY_#hJ?g@&6jk9B2&vPePS{ePROtMM=6@-h(Ddo`@R!iI
z@-#HZJ9c%xxj038^_auYwVWp9paTr;tdu?nDmw14dmq;SEXdkPcTC>%hX|j^RggzN
zq9Rgm5`F(YG*>?%1TDL$nY67^um;W|e!<LXGu$?lMf4`PU`zuu-t;i1X)Tw+8I1U>
zJ{zc-uVUJBKNn&+W<aFz8cSr(+1siy9*PNyvERi~|MG-1GvTZn^n3)~ib;ik$1OOj
z^y}Zw!vC4{K+k^fVY1v+5N67dHyCP0r$jBi%eEq}8O$<v|JwDk|HCO1@+<rZBFu2;
z_vc|KqVs>-G`t|ilYc=3nGefUq=XY};dsTwuHD&Ac#@B$*l-eCyNd|ODYy`S%B~q|
z{{JcXtYz@qby#aIcGAC)$>^bSNmfoI{@aM`1a`A&UJ$M@a7AU$sD<8(ZwimMKu1q5
zQF+Q;|6uz;^7CB5Mi|0x0)rCLNuPT3a6J6&Xd66`tE=Jgbng@PG7Tj)=n($(hn$lT
zp2PS9``STv_ge7m1&)^2Py#+BcQT!5d7>mGsVGdZ(GaFx6rEzD`{%dy2l6G_tS}n7
z;H{^fqa2ZX9?$O$j#3%HmPM6$^AnAiUZ-Z)qniE5Q!CffT&8L|2N#jrgi32cU)Bg6
za5ft|aFC~msrxDG`0=r%TIkIMg{E5OXro#uK<S_->>tK1y8Ej!WskDBsQkM*Y`_$Y
z!bA>ZTLmr~6^B>xMRvE4p2S=RJx1Swh{aMSHy!c}e+lEZVF1JtbZx08Y40lYfn8Q4
z9Tm^9(vlpU|1CAykvkAL@-_eFX~REHjCIr8UDE@|yW4fb8v+OD!tRl!42!+(qJ!Tv
zCq}T3ccu5VN?F5+5H2EYX<<Bf<}|_Er6+8SPbi1th<(5oK)81~Z>VBhetjenZ3|~~
z0qdTwQ(Tg)cPxGGxMbmGFynY4$ZBw+LqT3LSFhMa%y<*GD2lHT^tH!WszQfyVl_X_
z^lf<&!T<m6Y#+w2+K~2ckJpgb6mm)e!{0!dJ7>^(H;r)kZ-uV!$-Y^8xaXC!3-ysD
zD%neUZFTtQsn+|uA=tPMN_bbu(Ai(5RnmMLU6Sav_|qD_Tkv@;qZ34sl{8kOWsR*n
zV1zet=R<+tJ<naqf(QW_iwNA$?d^;`Z@jIiw(96fT7r*Oh*~SB$}3pl)L(Bxahs4U
zJTsU;%NISrFLmRa_4LrqZn*ml+Ny+i$_`wN0!v1<`m2=OEaHaQzLp!Z%)O*^Z+W+%
z+v!_DZ=rZ)-s45FYV@G{o!0c851-oZm?pFVqpYy%KaXsSyVmCI+{x&_FDRVSWHEa;
zpVRcH(#q2&ZlEe_lskA$k%ZD}<IB9~GjJ#s(K4JBTQPZFXcQ66gX;ZqUuV*(oK!Kv
zMPREzAqXUzSROw>&2pIP-~L|z+kG0V+$t?6P|<GoZ-E5V&MQLkb8z}jvCut2q9tnc
z3v%=AL5mlxKdN6Pa2JU<VorKzc!bU+QR3Ys&1&lNM76PMPD^lT;`D=?x#}4nbsLKA
zS2O*ZZkO6RX{`A})uNCLndGp;WJFcMB#HgD$32Izeu0SC+-o;cF)z_KbkW2R?vMYm
zrLCaT?aSnJ7jWWFMS$CN2g@9svFUp=5hUn<2%=3-<|a5ofCfQOHv?70s~Kv1RB5i9
z1Z*(#%%o-9bEAkJO*-j*HGIkLFGBrrLWIaLIRiNx=~{?66id>VAa@%6v3#5Z^A5S`
zXp`(LF!OwAt-yBXR1n~%wepV+YAd@N-|cj&DBYl+fRkh7%<{H4mCLl;IFk{M`iW-9
z!TT?n_`(yy6C4_<VPwta!K>fiYHK^g!1!t7%AxDwRGMN7J{$Z5$43}gB7Gc8-*6CI
zj5MXsL#ck*y#95Km+6nKCW3Ea?r-#M<p`-I13qcJU*WpNk6%GS5YoO!JA|i}Lww3d
zA``PV@3c92<xs$Ve)YY4Ye!MZ>?VR>xBpFW0oD)DEDB5_--6}=aG)2_lPEjyZn=}s
zwa=wb@7T<3k<rdU^2L<d7s8%$xmngy&vHKo6I?kdT1u0rH%6IiTr3q4aPb{o>^Zn1
z5O-PPlI&DH-%{O%^e#UfRUx|l7CGtN4FzCtPlymanldW^OSgP?!w&$ji6Jh=<^PEg
zRyRiG1c$DTXT;X)n3=W-eTZb%At7aJSq~Cl7<N#Hb^t`m8Bsy|gsqC3BWj!C)WW#i
zD9?hAnD544o&3H<Tka!4&Y?#o-9l))T|IS>5=IBEUpccae9Os4(p`d#)QRJ>n-D^v
zNtMYH?Kl5-h`{2+njCOj0Gfe%FW?7G>~J2t+X&$gjai_BnR0B9=8`bR>BJ{E6y!gb
zN*9^6ZE?l;NV-iz^|cHZhSPNjSIVG@^eH>kcTDiOqa9W(unJUP(oF%(i?q44^hb;{
z5uLTC5HcYSvjDu`@O9a?!(Wyc5g?Ywp@&^p<Er~xrx-05f)7hX0%@;cWn&{?)jz55
z+9;3%aO6!6s3;}1`=I|gbBjkO>!@}yd3vMUl~BuE6)geXQVC00<6A4T0jgXDTrcfY
z%vBj9M+x-~XB*y+T{5q8OduK?^@qlu$iU6(j+(u!3tz;cDtg-k5jDOh7u-NS4<~+3
z;Z9#41u4m!g6Q2&{P|LSWQL27a(QaMOKV2plmUU8D_<^&<bn3|<9siC&RSj!T;pmq
zvkOl0+cI|rAI2P21TJNdZq_yP`_CkhkKJo#<8pJ3*z*a%z$#L}7{j6-{V2VSuNRxL
zmJ_u=$y3^`MjX4XPNBual1FtiDb+MUJbMebkR6dO@rtC!@E&T_%1J}wf^b#(Xo!K5
zYd0l0jh~*qbOwdLYnfC-%+u~1-ObTWzKNfIcTn7!W`~U5`aAWI_(3iy2Z-LR%+PF%
zf>leL!DhAvr}cP>H@YTVg8u928l<Zq?et*-1DNO3nscx3`uUH%P0E}5zd5~KsnNW+
zOe;g6$^Sn!^0c!yBftGo(9-WYb9p%DiGuZaR9ljcI{JEN2`ESOG=)Cr@(@Y584t*U
zpug}3=y?SUzKO*yL-|BW@Mt0dzx6^`=B0c-6R7bnh=n;Oe+(^(7)hog$HB_1M%8H4
zL=+_aG<l>bal(W@cUr4Zu;CD^)@8w^t*N|7=^|wonv~b73YXlO?!QI-OM$nfSW;fj
zUAQ*B`dN<bf7Ee7Y%-7+R~Cd4hTX;+O6eH4E=)%_6%|_R0)TVYuc^D|vt_3SNAdU|
zN|K517O!K|<^da=gV<j{8C(kK5#O|@IERDO+&$lhypxMG47UY=M9oxa@dlRmVxI*r
zWJDJ23C34kPlSIjM7uD3I=&hZJSEXyzyPO{miUq<He|NN1aH{Jv4Vj+GTPs6BSU;K
zyIY+eSFes-J3+R-VdPhEnL)pzk&>hPEVP)02Gbx<3LGhFaBUI+xF%AZ{OZl+mcw9>
zCjw-#2y<xf@#;>UZ@!soNxEjvA10E;Z0XPc_-4Ntrpv_*$t{-<jp{$nz3mBu%ggym
zU~_0HzOQqAE+U>*mLjfazROHf(GAYo1*hI{eur?4<ay7cb(@3O&<U|FMUTmCr(+8(
zw=%2zL4<y}XT5i$oSn~db`iBAmL6e~k=4&sC@MW%1sR#QrUNMcz9pR;3rWgmk(A6@
zc=PC9|IBoCmccA6=Y~Y07R@!GD9jRm@xs#4qs8X9PBU0x2Ac_@PV!!YnpKAVqA*l~
zmAyLp+~}5FOa>^+Ui?o93<%L%70Q)ByD|s}S2w}WM(A#HssbNjVhVpvWH~3)Octvq
zI8Er*3_(nOe-$Y&1gzjJNRT0%pi)QS0o>zoTyq-!SxCSmR~kr1s=H9#ob<mbfqI>C
z1wf0)&am+HxU^Z#j>(tDvhpXOs}U>z{+`9<bUl#8(qd!V^80HNcTERV>PhaXiv#l6
zq|jFny3#SPwn(Bh-_|R4V}cIE(?aM%cs2VIn6~uNelkPIV^Yg&u)eGgA_`+}nid#{
zA_{4q@_JG+V*+-|QO|$q^5?^ip2Y|zm@4v{bv{2zdEZzMB{Vuk?!ZD%;Oc2979m-6
z>I<kjf`<P0h@$d^Ohx4rm&70N*k4;Mb{ip!7_?f$Hx8bRLDJ4^9@F=_x6JOk9s`=(
zfJ23QuquXhY+8mSyBcMfZC#vDT?`VuavB-ET&4F9{3a!!xWDRpdgsU`-H*DFs7(@G
zUB=mh{t_`1H0vRZG#!byUN5OY!{q4F_w|1GnA>`P01|Xso;~Fw>j#FOgP!$P%cBzn
zC74`EeNHkEdo<TXQ^8%*r8A}W0u9ygN7hNzLP`hBQL3&Wtnb{+T2vV3nIDHA#Q|LN
z53eKN;`eS~*3SLky<h+B^bh$c3((08#;bk95v0=OOF{vF9xgC2xQHI+4y(dte9}S(
z<4Sw)LP;xYrfP_U+d{$%4%V^AIPjsBPz046<=!XCS5?VIMwLwO=oBbSalhtU9A({i
zjouo>+jd%U9uuRX;5wi4)Aa=6`e8M*_5%6XclX;EQl!#_C^3lsZ#~Vp=Ezr9$e3b$
z1IqYvXCm)o3En<UA5xNy#r!{NO7*E64>!qGlXxAt-Hg}I5H*ZP%|$gVj*9f~p@nym
zmY;0q>$$(Wn0}=@4cE4HOI=+}r*cK9BGPx(b3|p<l~vqh1O`1vjGVnD)&Q+;?x*h+
zydQC11{`G<kwpELBmoS1Nl<@1`)eIWJrmgvquQ<bO@*Yx<Y5LIehPV&XO4#V%NvRd
zyNY?uw9bm0*-hwr0yZa$X<yT$8yE4=-&@2q8>5)L`|NkN>0KsWEGFDDZDHL!DNJpW
znq5%NbPTD<U56-ysB<Dn3ll+R|Jg&ozrtmwb}}gz9Us7dDfy#v;zp511yRUd_&dgB
zrIL08L_S-r{7z{)kp%Vh^8cHLDt{W;nKml*tQ!UUPzY%H(W&bD=|w4UodppRb!!%J
zOKx>?LCTlE&;Lw_i>SFCi~N`yTisMLk3GshipETyC5XyMa1aPHoXw!kE(l0$C8(zB
zI|1%2ENc4uE4zHUlMnl9edX;J{S0GB2xoV*m8nN7v6L*<x2?6%U;uQMDz{5P%7@UP
z0kBUsc}g4-=0|>j3K3i#1Mk|uZ(a24dXfucdbV2;%->-BpF7NhM5~MuPvydE5q<RC
z{4*;mtGFj~PDj(gUk!pD!_Rwywt`*L2Tvfn%g9~?XU)xtGBhpbxv#7zaR@1L%55Ka
z=IKP1!LXZACDi>Dj+Rqh0TG(H^EK&CiA__Q-ti7>`9z~#p~~)hInoJjIeX`S=|+o@
zWs*$v<Btb?^KGZ<rr3xTLGr5b)cuv+-~X&p#ARfXvd>gBhA^IO%|sD(d2U(g_ukRg
zP@wS7hVbrUD-^hvMQl+V6<=-@l)*2G0HB*}5*f2XVeF1p`9TZD&(dj#0g|wrZI<nB
zN=B>Y%wKtpdgU6+2IK8~rOGQ0y)A3M*ST+;Ec>v$tr^D7^q@|~w|HqyfHsZa#&M8k
z?4E*JO;~)yX~l<4CYIMHYPV9=8JzxeeOzDKMG6+vbdQN<QwHpe#^Cp0vq_-s<8_v;
z6EHZrF4!1Dj<*O+Of|w9<ST%=mx+@WCpH=$47I@@aei7)@0v*2|HOA{TP2^KfFNB&
z(|;Qv?9>wtsDyc}*@?}8u~&WA-M~1m3x(KLqJ#_M&?)snl2OG4)jl(L6A(r|Wr?eM
zRFsl;^nF2BXCpG(z&mi25LrMnDT2}4Tvna}GEDo_hvC<Rn29BEH1DL3>7QHiLVx5#
zj`=?~)5R34XOnMcpvdTmgkf?SM_#Mr`3Z|mn{GEE)}xI8E$mq+%49=H+fL!4cqMS$
zfZMX#;$FE@qy&`u?h<jiB{HX~>jLZ#M@rzsCrVtB;g@p5p<sXLd%K&`@0kSJ<knv@
zRH(YUD=s-m9#B%g=jdwM-R9_adZ|c|%!s)9>(FWPfL#RIY9jftmnGjf#8wYbaMux}
zrwPkxQjH^qJi>1`w5V4j|8-UUhDyd{S?k~i3pPM=<>oQ9ZrDdWJ1mvdRW$E4dc$8<
z?eONft{E_2(8wlERl=^ZGakVM^rM-^3C%h;yY{KJ6h&WbSQ)A_Gl&!Rtu6p%eo72T
zw8VPFMq|Jw$%39nu1HyFg%sw2d^snH<q{!Y!*7=cn<nVJg8E`^RMqsy&qdc;?t^CP
z(vmTES4ua6gl@s+B<F)-A!pp^ayYhh47a!-k$bF^+{AgF2+k)3!<`^)EL^+Oo=^TH
zFmT#3goRkSpGH5|;d2q#7=Bs6hOKy428Lf$HRJB>F^fpL>}k>ZE+ssR*gIr9-G3s2
zwiIZwoE=P-tCbVT+-!hdhCMG|XAO&p)3>g_xD&BKa4SjWy>4iN(oWPrGpN)u&l`x}
z(b^tc5}J!TTJK8o`#RZfGrG{SQfr0XuT^jmJ~UQ9&YjqqQltE&%ap}-jz1+$w(uMZ
zJ?kU3-KUJ1NTeYGz{gJEld3Q}VyFHw*W<h&0;Yaqp0D5uAUBT2oYQ9Ae$g~;Vt1uv
z7!NG>HViy$_?7^lSX?<kHK3b~sBcbgI4c~eObjZcF2~PDh-LM`cy*^X(6RiK-Te(+
znrj7pwLO$Rlzap7U6*s4LCCL<Zd5YvvPgnMJUIJG-vS66Be(&L`c$x^_I*}AyDH{a
zkr=7FeCXih6^8sm`~cE*W$o`nBU-W^P@T*LaL(OTcrBHx)qHAPrTm;~3}@Ods`3$y
z3BORooaYJD%M_zy)yA_C;y+ziE|apxnE3KQz0v*iD9+kpkDGmRrsxL1^@c#LQ1)8z
zWWt8?9c8eAZ6%`48=wlN(3TMT1cT+2EZRjMPVQrnCK2MyUFjvide9=DXkx0_q#|d>
zTn9ubs^KydnO>=KJz@g;kJumu+Lsm^S9*hRcJICIl}%i{T!`0fq>eG?^b83+l`%7!
z{$<LluTbA~L}jD+71upb%4s9g85;V~8ctc`)+?zfedyD9Z}s*Qys(on12S~P0Z`yP
zz_{-3O3QK5oW|Uq%7vJ@@fctY=$S>r!m$pb2&sZXruykbtGbsLU#EvT8K9>pw*~Cc
zd{}~osqCpl)9TUR)OXjE2ed?AQis7dJ{eOxC=ECNb>)c`sFr9S)zHauK7|e-g#jhj
zwf`dns35RsC)YQrM6ABL@mE1W%7ZDp|Dt41eA+iv@efaNF?P4Hi>tehdTr$lxOrT|
zK~$a7REnE(FPqj`dObJ`Hh%wl&0U$_PUwu*pXQCikUD=M&a-w3DB$CAR1dP?i_f?`
z=HV(O@uyQWF`wsF&u%gOLT^z*HRRhFZ+eul-&N%4Hm0=!@jMkb2;Md;_D#XSE1;*$
zoDmgbQ*!ii;6eWP-5sSp=pl`JDuA-p)8VM&g<^Cj+sgFscgp|965pw(`_Woe2+11i
z0=V!kKPc!Xx;>9dA}K`qY@5xGtNV!$+tp*<judQ`$*|VT%ZAI-V67hlLtrOB1Qv9-
zx;)UAig9M_7hI90G5-;dFa=N~zMfdU65dVY;1HP*zeA<8$?N|Gl%dCw&OrZ%^F&7D
z*aFh<H7RKUyUW$ea|T(r+W*E<Ay?HXwDy5XBjy0+(dBuo4StF~cfD}k0Bx^aLK~gA
zm_uiKBqJO~ZwFuU7urW*2w3phhCkssG>>^I9}C|bb1B?x9Mrur#k_LT{K#t%n17;k
zQ558-Y#d0%AfLvN?U{D@;MO%sl_Ypp_jF}8R;Jl#0{!`oORD|?WsS5jxx^2%qO_05
z1$Q~+2|}Q@mgnP#2{+b1$VE6wg^6d-9#M~4Q#ZmL<_YvktDu6+b|j_y4au4&u`=I6
zz9$zIh9SFB?~&PPj}lU$%_*GEcX^gSR0vWDDV>2Y_^fBrng)0GdGT5o7MRZoa|2KB
zD?G5NlUKL<X4PkfOCAUmBw3Ba+W}x7IiSA)Q$>AaO1)UHS{D2mPeif=B@MKftcEZ9
z3fmRg@+9e2zy9a|fs#4@)BCx+PP(Z7$Tr(a<|J|iWNCnkcKDxs30gc+w{ko>V*Gh*
zM!ng;bF<;3d7zJ3`-<Z=P_%rIpw`clx^G{MBJ2*PA*##IHlfzS+PE?aQb|6fWX5=!
zTzWu7V<9OVDr|Ee+bXCnM9KmI)rS1v(C<BLa2(BIGRBB3E?UL$PuOZNdUm+SbJJ!u
zB!XaQy20Y{%Fa#=`s%0xwW>sfRL=>RbCKSo0>`pZT0fTAFmKN#NsM`DF4yP6IaBMG
z@$klTErji9e|I2^ao+_|<P8A`in2ll;v7Q{c#}}#rp1JP+PJ{7dc?CxE{x0=##_DF
zOvaj4qmth4iCJWAl$+iR2ZAd49%T1XXqfz|tN=qmyuYff@e!f^LolT_I~Vr^G6%E{
zHh)2A?te26DPf%s$#7`^9q9Iikq$#PxtfpZ8Cf)S9abB1)|EA*A6|?0>Ydfc7NO$J
zG#tCLplqwbuZWycS+F<%qK&!h$>|9P%2l;x@Y1GpIB3OPq{KeXqvy2!fz+Ayu^GKV
z(9b5*Z+|HM#ZJU@;0<itqy-9!o9`{?%gxD3_&jA6Wp{Vb)dVle-|O_;La58_H;eSB
zGCwk*K4RvXU|vq(W>i%;*#aF8I(B(h0)pKwvI5Am8P+W)2kZ%9D#bQk$ho-0v4QRE
zW6pJR7+Ov-7@d@jF}T7%-~C33|Nf_jL5@@i%`zPp4|Gg4ylD{F096c*rccKiKHarN
z*iDR=z7fWX+RBE3;-<hR?8A@#n2(W5)DC-6y_A{}n~asD1;X~W=4rbj!&h16-~J4o
z8~o;6{5P>2tzzd(dn<J*&E^S6#OqVmTP*@?u#!26aWbTdnEWVSQQm`@vID}$@B;w?
z4Kcnn3;YmpK1Hp3FS<atB2t{F!s?3f)dX;R`#8B)H3tu_|0y>E(?b)CQKfg<@nok|
z2Y-IbJ{;ij=(fOy1@rz(*juhfgs45fkJX6I{AG-QtdlJQa_A=SL;gvQt;48dC?~2(
z*<f&Pp04R#(q4-#l0!?1{*E}gA{vde)D17x7VrEC?B#>H0uzLXCPen1WHVYQR=^9O
zcvcvH#m9LpUb!iNxKkgX^4EUS^}K~n?pd2r|5O3L@%;o;m?Tv{h+1d$ap&8Tn#oF=
zOk28{#|bsuOvT=qv2KEpMa7>8Ki5ribnivbEci-vxhoNYNS23hvUw@+MphX|j>-rn
zosx7yR5H^}1grF8<?Tw{r*k`DGHfWzju>w4PY?8^izWNFAjMNcu{Z)1t>t=!u>(I$
zh&(f7lUwmQ2pE+=G;)DmwS0>A_n-Ha5SiBFPF-du6-!Q-tY65i^dPFS5GvKK^EC&X
zlhdMEKU1}dKOZhnhu$Y{O@j63`?YB#d6bNkWjKUF5aU{3V`KEGBe0NKN1Va$zyuGr
z4`E;&p{otuY+hsUbw6FBqJZ7!A7@b4E_YKDkrjq+as5hQY4jy45g1;&yTdh6^q|p`
z-=E_x6=6#O_T51-kLSq4d&H^tV_kaQhuY@w&Cv!fdz|Y#uXlWeZkGHh=a>W)8Laz^
zkWfs0)2GkUb#v)HPLYt@kf783X+llU_i?q3@F~>kza*a4wW9XD3-vOQowl%{$2x4~
z`=3X#!pUE!XW<>I42KJ6gb*uCEHb^+V+HU@A6$I4zYn5*P+AHjlTT9fluJMU&hFcX
z9*EoACAaqJ_FX7an!+_)_ML|eaGUw=VO3pd5;(t>gHM(BGpS&goqWjUX<}DF>he)i
z0Vp&n46L(DPW8p`svv=VGs5`HvnFtM`4@8Su3>*URa}_=Ik}(^KO*2<>_$P9#OXIH
zILe2J7}@h?Pk8lx-4YPXQXOg-Juid)rL7!qWpk-Hc1#A8gzjj#8&1q8oIQ$1=68r$
z$-B4A9=A)@QZbKM2H&jCJo2b4R|CiJ-6-=Yd%JocfbEZe9<68?kadqGfQ!Mzf;615
zO=ZV16ne8&CU2Mj_#*u~7x2Fuc#^kS%+f43MnU*;TB$hQ8}uFKlk?$>4r?7Jc{+wt
zrMj|xEZLek3Iqrv>H!$c;qePg*|@#9PIeOQ91p9$(}-y=HF0kZ=S7z=lOgFYZ|Ocl
zOWPdD<#HaJHBnt2&61We!{mII8R_JZ?rBXo-GpkTvhrJxc7V61_TqmgcfY0w)8|EZ
z#3)3W-$k)H0DYt~h|qYNAN-NP;hJkxM?@mm@c!90d8jl*JHbqkU9^B#3)#QUgx+Z2
z!}h?V`y+TU*&qR&NP5W=f_P5#em#<WCn5*tq<+$UdN3nmsdOpVNI(bQtL**(uvoCN
z(XdtxJnfK!%YrV;Nko=#1|q324gydDUzi~OeV7#xL&{5a8B4fRcQvURNi_~b0aIQ<
znMAuCxzneXG!TY|-N$#-<dYEfTQqawOZg06YZMpN$<WZleOm%*PART}3rf(>pb+n0
z<Qrn?&>FvD@rRb*u*)a^e_YJGe5;LwTFZnl?vFHC!+bXnpi>T4CSM8wp_>RJK6L?k
z;Rl-?f3j|+6JrRBoTH8tOyP!<j;5$g=>?@(w<OmlW{-1DA-a6dQ?YVBDeqSSBTrIV
zFDCuekg+XH%Tg1D)#^P=<35LixPxdBm%yJ|({^r}fmq!D)dC`i%yn6P_R!2)anM<V
zF7S940{Nj;j|}-vq3HGPM8uDlikn9Qj((elVYGnU5M|-0$s*<`O{7iJ^b5Pam3<Bb
zV4^x^>R%Q27t}mLm+kue?i0pn%acOjWa8o%9w&e?Wvvx6eLP4|ZzoaG=F`E<`4w+r
zqkG?Mre+gkyEzrg-_ne{9CgmXgp@p~{(+M`mE^75F@yy>rgfxD%|cNG9QopBpKZLu
zQ5yPYbu6xCnjHPt#je-3e!>Bh558<NOpZNsv`P!n{>_$@AXE~rPEUy`6Nc$<ihKq|
zpY_H`sRAeOkSYuR=)9lI|7_Xv;cOltWP@TJa>dPR(9si6r|%(=`64Cqt(@sprHmh+
z_%7^}3plZ|%K;(?eRJYB3ZSVGeui#uRU_p@YCWiV0qy-8$p_&V&!+yjT;`C&J><{=
zx=YM=MVgwQd4p=IGJmP!8T#%2ocvpeH;NCXaX#Jx&d$WIdW`@oANqLF@$(KQ=4~Y3
zo#%1Qkg@VHpuRuuGJFAs_tFhF<K!b5hlwImlDSWUdTJ26E~d4^*G)UbYUM)4I%4O)
zl-3G_-;lraN)dqKeobe<l|SSPwwqUm<$SSK8#PYn1!<;Ky;;u!9#o>YMC)J@+e*on
z#2+QyEvQ43V^YKNjx|xUX?fA&P=-Np9lAj6E_9OZNXtslx#gJ#cRl1FAxlSIc6N09
zv$%Vg+u_NH)9!_FVpS0@gaaY2ph_J(tMBw;I8p=Q^Ik-Vc(p%`DW7a=?SJiEtb#?I
zu$01HqmbWC+zRu#fJt?oK~XdXqjR;SR!W0aZX*oR3S-l8QyCTyyTuq!+7ZO_ldEwR
zK&m24W`k;|nyiL)gQ#Dh$f+dE)z<#{CYpk?be$0*yO$|8LX#q3U!7R3)9G-M)`&zy
z;DP)cb3jpHP2d3E{QgG^%V_<^`yuAC5FjuU-kd<)7Iy8dE8>d81L7jbH-RJ0qPyml
z0(O~{&6G8?y#U;fXiQ@TG<V`zNdqI%|E{h;Jt_&O<HUm3MSQ!Sr~wX}$in|q%;y*a
zUBz}2_I19fD+tB3A3%5h4>2*A^g2@Q)Ri{*oSW6nj#R0x>NB!`p{b`-`80@diL%u4
z-|?gp))x|r^F4T6Oc<AzvWibiYI1-Yun9u{;pLM4gFXX)bG^)hnD7l{A8^dT_wk4a
z3k9<gTblz<<oYguLs~-#`35jktM2ZmtN<c?_)QOkgc$x7_1~ANNmpWYuryCTNV-c1
zsDID5Z2AWI7_~|w(xh;oe}}5jN^Mkm<aSpR;0W&vxi}x>?*@U8|E_v84mEo_*gH}o
zZk@M>qgVCel4%QBMcJ{}j<vmCYia<R4mfg)%zN?zX>!DM{G_k#XT_4QUnHzExWlnQ
z#^Vr}w4j$$6rI&)jGuh9MXPQ;tML(?WXfX5#^yH8eYF-BU`y@RJc=V?>O&%p&J<l8
z?u3+Anz>iZ@NHpcqroJsA%DF2Jp?Ve3(dFZi+<i}@BM<#Tj_*0uEo&Pj`qHL)Zb51
zJm}4113l^v2)GXP>}lZ6L7gj*8)#H5EDcMxj{%^t<Vs%y$9w-f`VFBiW+~}XWJ7+V
zYSj~EqcE`3qJD88YU3A*T(_J$n>w0vZ$zW7zJ8pFK9~8guO_mIf<|vt^kDmVF(DGA
z9C&6fU1jtD{lETy|G5ba1z(}Y7p4fl@rFk0q7knaMiVF7{Qnpilk_n*EXx!W&1%qS
zsUK=^HQ0ZWkI$xoAff*VN_9-{ln_OWG7t-_7GO<dLfGg4RL33^)D=r*Dsw5(&9Qy-
zn-xgvB&(i0OOx3eV#l)suABh2ix%|E#_m{!VAS3T^TnNAD~5#Kq!E{t09^T`zv6jE
z33({N4W7$B%KTHebfzH0{Zc+6E0Bn03l~<WET+Fv=4@w+hwEOrEL<2nNV{kLBf6)f
z*d&#gzSO@jK;{sfyGpsL+k@UTcg!!Acd?K;c3YQ4<TC7WV(gN4h<FmbGu|>*t(-i6
z74(Z8zoZuT-B|9Pnjf+!HhMR^0H*HsIb~IrK^SKDKoaBeQEeEeTpuyk6)?bpg<i^a
zW&rlchW5Kefu@<QyZJA;;6y~uQOHLS2(vHVs%XVHD5TdBZS)PTnT9rJin8vxY!>6E
z-=U4C{6e;GxF8ki^P<H9eauHR@_i1H6FipDcb$3i?~0Z`{SG|<RYE9~$|tYq5T+Td
z^m$-uSy^tA6rMyRmh)wqz8^cuEhqdmQC4RG_KwicSo`5u9hJkLT1l}>w8(4AoP3jO
zA(SSG*czr8h!X%%#~`u!0N;ZNFBys&8Cc*WIpwp{GF(Br${{(c+u>NuwTBGeq(kj$
zgg80MVFey~zl&Urot-iP?XFD*HLiuA$Y29;c5uuO2l^&;3*Qac_qp?sujl8ODput-
zH45S12@b`RzD`|=0)1D29awk?)u8K3mVzkYP~22Qii2qGEQ*+hN!PGAuAl51Yx_iB
z7Y#zvMZ+@bf{xhAcsdClGldynpqgljI$&2=S8hajPGUy{v>vmIoK)u2qs)!AaK;h@
zbMSI9^9e+)G6r>)rp@2{R2-c0p7hQ4t7SuUND;6}5Tf~|s;Ud3jKc3sy2RmJ<UICK
zEcy}b$Kt;WEd|ffA}9lrwMyx4Glj0*qQ>?#E3q}wYpC9u1E>EU9len!A|{65l@F+Z
zTK-z$dE}*mh%<_HWU8y_hC<=)7|vKJ8KFwC)<Nu`j_zxRVWIS%oW86%jiS4Px36#l
z6*|}x5iT*+Gw>>^Kt)*~p)sjmF^uO7_z0^f)Qo?#Ae#gJh=|}}Dvx^4@;}^9>GPKn
zc`I%&)@}5D#}%6XoV_{}SiwZwdbk;Cr+kPpVyBOxXI(V(Yr(j&BKvFUZ`3u8&!pUR
zdU{dTr0H`hUPC|OOp?Dyi!>i+Y@wZrLUY7v@wgt!2A{eI4UgGT_SeSbJeDOEJA5%x
z4J=P*qFh5@g?(_pG7_ZrieZ%`1B-<jWzB@I(TJ!C@0r}*+D4Qdx*<qdLw`)|ZxbyM
z1O9S1rYT5F>F&G<kl`?K-{q|Xu}-{QQ&oA4Dz+WaFqk3dEGLl`@HR8z?!~oKyTXZ)
z|FYaFkL6GzJ5HcvS>@TIc_IAlgUQih89I>-n6a(Xyd%Y!>?v~MA;b^txdBI)7a$Wk
zAt+1czwVcOT?|uwdGH~^fGU27@HPbeI`rYBa;fKK%~218sV|GZWhblffH>Q^oy%mW
zc)a$2-t&oY^lEvP&$b9d=zf>gPjUHl+B0r=!Aqex0m1do8!VENKl#br_aQx*x>_fv
zCx^gd^mYf#ZUL+t9lfFi&wFRLaAVsRIj$ML%C+`<2l#QeeFz29A3%_GnFVYWa$nrQ
zm@vuMr;W!<QI{QxUzu9Cx)5XxQPM1t=c@ETJ!wU6k{zc(-E{8Ze<LC?a>Mr)7$3`V
z1h=6A*kU{d?*RX@;7CPS!)cU-C-*uBJC0%y)|Xv6nMxm!1XyULLu8<jk10rBu+R^8
zhyri;JX_>|*Wu9V4P%>&?}AXp9Cq1UbBGgM6))NZLHz4~NTI;#Of7^UIM9|})8w#5
zVWiA}3N?q+TK&v?YlA*uvPvw-pnmFn)xYarOsmmbyuu=^Mt-cnMkS-wdh7+()!8mc
z-zti<`rlTg+kXgdlEPa%7x`mRLqD?>QbEXJgg^S{rQ2NRyv}smvn4Ypyrz|lqk^!e
zsL}5M$b|M{W{=0wc&x5U#1#@%m0Fmu%KIE$40odC*b0;TTz>yJmR;EzavEFS;8eFi
zUpEXg+3lhROUF8r`)}|KAB}Ov0%M8^=leR&TFZB&47TThSj4GJT%eEAfv|;^zR&(d
z)J#oN`&<$<5F+Ar(XNrLkIuhkk<+k)D^spg_Z`iHIA`M%ls251@Q$-cMn$}L%d(ui
z6aqPcW@m~HKk*Fglwm@5nE~wAhg<ufUKU8pSLnU`z>s@>;leXSSF&BN|ML}jihMJC
zg`KX%Phw`G?uvAn=x~=|Kowj`xO>dAg}YKBP-KWM6&UIXC@RJ~EOagGI|2?eY!luW
zru1NEL(R4msLq9cj07L75xvuqvA-X!w5;Zejo5p<PI<!U#5kp^M4U^T=>7tb@c)t&
zTB1E+W1G1M+8gTWfD~(j3l@DzT#U|o{AXhLN#AY;;3sg1((v6`T^P5EEOW%2|Fl_A
z=>&=JPoR|-Ao8vkIfJ5lXW>A!+^zLEFqG>^Q<%_8vPyqTD*(JPTJ3j0xD(F?CJ-#o
zz*9@Z@*aB^3&aj+BWhep%H|Z;HXs{cfF0iy+h798abyibE9v?0xRB7=x^xS}81~j*
z|GE86i3!jv`e8Lgh{Sekl$1$iB`i204dN;=Qvc{T>$;DE)O4|))hH%s^J5pR<;>Tk
z{82OHZZh4UBoq)Umx79gR=fI4u-yJU)|y%E#E;sUS9V#Gkv1{vaOq?8`d4dJs96-D
z0#!&O&*mu;z#%79v^h#6M<f#1<d|Y31l+a^s{d6$*n~KK7ygF8NhM2ugEyGy=;$^e
zt78bEMqy%XUnUDxPJeiSkOHYZ6OCU?Q7lDh<CSBh1nt$~>IH<?j&*LEnvLHv-lQZE
z1%O;T9>mQU^DV8fk4)lZj;@=B&R*C(zMlKkH3vG1u=Xh-#9(4DZltOby=RsOanhTW
zWE1<PzUURf({j70tO@-t8v9MXzlKds=i~3QfXf<Fuu3)}0u`KmXm_@`Qe@hQ5a!1g
zz;}h+3)nHpwuN&{vxP_yzT5}2HI$`*fjC=cAuz<$sVV}7J&0v;SUd7J0)Rr>X9lDA
z;x}KZMrynY-=%5U{swnN9_|V9U(ET-CsIolZ?>HSTeuDn&E`w&QYMsi{I21)D-qJ@
zi;41gs}*fbBta$fuq(14kr=hWp0hWMuUI9yv5mPtB>&IgSk)CX$77xM=|N{Ps*?ji
zl_U$@)w1?3dcPi@!>#8hR)1q|J$=Mh%7xP#yYi(I*O2TP7ZD|I;#D3@nuKnp;@xD>
z(G|zC5Q|mXxD-bVfO5PC16xxFbod{+5TAn~B&tJBfWl_b@<5VcA(|YuBk?(4D}5iX
zE0MiTzw_vzeg|BV?FV6iVl~G)C8ldsSX~>Z3`%4D9=oJ|c<pfe@7;Pdf?GQ*+HJ|m
z*jal2QS7m3r%BW{AM(@=z_~3;WoS2%7#lhUBl9?zw3kk2v9gRG9W@{)Qk+V1h7t2$
zlsb8;fD|=mdxF=-8TtciS8njy9=6dg)$_kMqXUSdsQ%-yByApy^2XI;>bD({qYa=F
z0Fu*kp$ExzseruDV+85-{RGI*2=zZu+|7xOUU?3#+q^_-(C7JSDmNf3k^((07w+~~
z|B&iY38b*f0lo(o(Fs3;gGNN?ns$3P7^Nm<ZIfP$-%#_f$Y0CpC4uvVA#u$K;{Br}
zD;6PunbCB3e#1)j^$B3IjL}V1nf=hIA?$A)SgsDt8_CpZ2c?+4OE)Nq%{#KJvFLG3
zE^=g3P%4i!Q!U28KR%FNE<@_jE3ps~SX*ur4RkW%+B*Sw-dOC{$Ka<W%M{F$+op8(
zr&QdI5?l;f0aEjCklG53C9{2E&J=_Y{H)EzYH8Mf{2KP0-|GG?w6<kv3-64BN<O#(
zQaV(z&UI0iMa1Zr^^>5rX&OT1lSC_7ZUYC9GH#X_J8uqOY?jcRyZ|GLGN5U;$g~jv
zkDMPj?xz~d)1QGFCgJ$&p3d3M6};l&agNDKlPo+bUk|M6oKWIIIN(QZ%zl~gVmp{i
ztQ}cXUZ`q;GGK{F{fJ-~P+VD*0qm0i4GE}5WP3OLx|bSQ=eunrl&F$+@)bt9QyxDD
z0RPY}e?KSvb07*Nz+#l(@i2tx?{{@>rXFwlwC&uAWbU>f8rr>+fobii0RC54A7|vf
z*b*WsdL?*Xp?KLz+`t<ZZosjWtBd6Cl*^<}I`uJjtp?f`<Cp`~@W4Na)xsAF&rI5(
zFKejkkGL8=jV&<rDg)KO=LdAweG6hxs4(I<(`YjjBlZ)KGVUK0KMF-;FI~*kLB_4H
zKX5wCStf0KM(^UQTPO1Mmxqh&JNRJyOh_JpeDFejHRJDX!BU<+LwG@z8&9bAvmCNQ
zFk@*5#i??QBkMw1{{GA`W2L+hy^(V?Abc=2#lj{(`JdwXp`ey3eX8NC1FoaUL%PhP
zCezrOlqU_gm)EOLj63zsBJZc~QT-|p0x={COTWQ>iJ~H*?yUcrKWOyhxV=&GqFg|X
z#Y;E+dm+t1JSbSeVCq(nhl00_2CrK(aRVTbrm;))cB9N(=V-PQatQGpulz(0le?r7
zo@DXlXnXih#Shw<I-h%y90!lfz15mgj&+sUeO?Z=Alo<o?Q_^xyIZY~NI(CLKLIZe
z`CdS@T1T!mq5}wV<YYldCYw%v)O3C;s&aJ9x|rJtW@X{!l$M$pbLsZEOO*bL(rd!W
z{Dz!UgnP3}Ii!8olaCgzl@LXc|5r65Q&p?A&~|A<u%twS!w{hDCOKbpaN{uksn}YY
zr0?s*m6ut%_F3m>gNV7ryZ!7DLt{ty`^!rBkr{&^CX>`G(vZd!!Nx?l*kDm0=Z~6P
zXh=|#)UR6JRXbA1!)&xwjn`*6`6u>64bD1(v{L;bksI*+d#}RaPDerB4Ngn$yK-{G
z`X0H5stFD`(+SN&=pTu)o6;Y6A*U)n0{NLWO0wB%1_eJ3OyvRr^R)hw@Uke$-q0`f
z4{V?RE)Izfb|t6^HXSRLT3n3(7Re?;BkT1Q?RI_It_%1VrV&$D`-q9MiMzGf({g>0
z<_MSj=aEQFfO;T|4M!Gu><|m|CEXrCef|@<%_mrrA@;8FI*%+H*$klF6hP0;P&?nC
zBp(i~HxFt1mPJPtqhk!p1ir?Dd<ZsLS=qPgCn*PMAPt*7$Iyb48!mk)okmWdKkQep
z5fhcGn)_VP=pKl&M4drsZT==hZ4^rW;BKK$8i78bS-#xIc36dbubusm0IQL%OGhzp
zm!n->FbPdt=l`dJHc0RZl=LOJL=>!MzlA|~vjHgxS{%+Z&k4+~=4UjqwTMuje&cH)
zJeq!vu_5}GH3$3WxLd>;>F;4bnJI4SX`)=>A6ys}g;Pj9)O5=Krg>uJ&}jmY`IKam
zq5jl=`3)|=+@_6m|5^P5$2K6IIB7@}j5orgxz<qH#>;82rV0jIEm>?|-RQnYA?c@`
zYWO#ODvBBIw${Q7!f7H=!Mt2m^yjbqSXoJJNp;cNb6TZ!!<dj{M%38?$CaTWUEP9H
zmU;qz&0M*P=3;cO<3q8Qe^TG<4Xx=dK?JWvR<*lf4cRn_j&XJw_6v!zfG3~1U(N>a
z^5W3B&RRGrZzrpR65-;zC)-W)im>oP@y0*)H;?QK79jxYC_JD+SR4bJbodornJJnK
z+$&iPAp3byJns=mlK;Nsnz_~~9n~#nEJfK5*f|`Ln9U}h>(5LiNHpp%d*do)8HX7W
zrN;8T^IO=PO&|n*Ur~c>VbC-CqzS-|F8!B}HV!X#<oYsN4#Y5ddm1^<=B&fhmgT=a
zG+F4C;hMD|DjM&g->jcKYrjD4<My1gdVw#o0QT9(C$hUKY|Sk@ad8=GM=u5M$fi4(
zut&TG+Vo}o#Ip-n4Yl+_qyH8yyjZNLHr>Hm2oMM=lY1dGV~z(3s$lSh7!dJcL&il~
zO5ADDz5l;=jmh!xDK<Xo%7gj%fSLciH0BY;erUNghO6Txa$VmUEk5Ei1y9d#hYUv(
zq5{Ihrb6*3!_Tz<k;WZZyBR9}W~$9h1X)#0fK{uoRhd)5Qec>n`SPgYgx*GX3&Ps-
zoOvdzx)n6-*MHkVu^p3G5wLnZv4c!*j3fWFo1Sd?i0ns;_Z83wBY!<a=jfoEOE50r
z^8Z5JLV7kR+#>f~Tz+MqN)9s<o7M|5_FYFU-V?giBn60rrf_aidO)XjCo>|5HyxkE
zKKw`rs2&5HXO<BUtp;l#ced=uCJ4ffT-rok`o8X8*3d^hKux4NCc*hl^g&{dU5VNs
zv5)`!vztE2NTt80xRE-kFg8jN7siw2t<w?Ab)QFEmjIfwvhS#^{zGL6=0r^?c_^eI
z=`7D@=?*uCm(BceinMpV?cDOmFA{06ShgJ_Osgni4fV=?<`u^F0-7bmyM9GqWt$I%
zqe|~{u@AVNe`6qh&TpT*(At^3OF(x`DQAI~bu*=vw0SH-C~<kX-X9TJqQ1pyHSY8!
zQ!rrLp<c}ZYHR^BfH7yb)gV+x_P%K4j{4{!)W%()y@-&lCDn&IJq&SodPh~;hnsEV
zJd--LWqdn|@ok^LFeCX_>Nj${C!LaitEM=_r0VU|Sh-H(9nw{m!-iUj`xzSHoQ>M^
zUA(IIIN582zYvqtx!M+wB{ZizX8P`j@!yFrE2R5=9spT1?nxJBomCnHWSNhTh_gp^
z1WKf0?qc{XP8;W6c|w&J0IJ-A&>gF;%84T|mx{Esg&m<wedcRi$E=(u?_K>KOnYSi
zbiHIKv4nIfIlxwqB8W2W-u_GS2AjQy&CeZMXG|FzA%~+B6i}SF^NCeG5UzNc>i9ZA
za6%A@gW+?%Xjc(be)dzS_ZL-@W|%39+FHQYQ*65$+>+0GgXdB7zvtCeu5}$RAm23W
zxG-VR&++kfZUha;!gKiYALpL_d9{t>u~$Zg9+qUwH@qccZ=BA6Ak9WTt}l`S9pRYr
z;uxl^jiy~l_^xco{DLxCqH+po`#ROHZ4zwj5clP&04h#wYKN3CEhNS~N_cJuU$~t4
z+tR#+AEcS)f7&pyApsq`0#<qANsM*yNE>M%vHG?tFM1h$1?LX)N<Q8alZk}`nUJ8O
z8yQ-o_0PTHS&z6#Qzk&VmuWGc`F~_*aH5=9|3jHyo9J_k#O?igv7%Z!Q4}4W>*0g$
zxSV8%S#1-j5>R=gIctr<tGt|MY`!H<c_p82mi*v-4zmmr!2`RA4EtiZMF`T50Gq8{
zQ<XX0M*>K)orS5@YLIvR(H-;*SpGqmb`bT3b;#XjDE{QvY{rfijwW<d4X3qvCl<;D
za>M|(Pm#}ukb14n^-QT!B=PLKP0KB+L{&qb%AvJ2EB0PcwtkW?bH`6&`(aL!yITul
zU{HRSO4^6aAG5~Yqo7f9cz-RCpJ236+9ZL38-S?>VXN!^L#bKRy3c55sq=eS5rmn(
zVexF%A0<&RsUigFMfDpS1U3G|M6nW4>{OL@VT(+sJ=tHDtE4)HuK(1(Cb#0d+`+B8
zRNBpclc=O%?6%hyz@)*C5tz+~=Yc5a`eMJ>7@kiXU-GEWaW*v;hFZkqy9mmO4YLfO
zO(QVp_8XKp1@;Zzk%Ww7wa~aW5hb^H8)(R!_W2;$vg{!HWvPW5B&FdA_{1fP5z>mi
z1#_EzRZFUIGU|ihil)Wt+yxc)ob8q8-g=fOX7Nf`wlG3oUSJ1VN&C+LYx}A453SXx
zS>)1K9uu59*}tHqfqKCv`KJR}Z<Hi4uEPNFDUu=y-M^edTHMnpw@DE7P~uN4ND7N7
zJgFgNEeHzsa&yxo5Eo7Gmu@hrtCvJ#W3kzUDeni+W76h_fHsK{X`L0igT-`SgrBpS
zSwbb3vURd5wjJAimLH@Wc3PlcNN%w3mOy&9BJDL+mn~7L**1=v2Myp#5!#_GI=9WT
zP#{G{O~an3IS`eI<_6WmEx*az#zi)=uyIs1HQ^u2s}hJp>Qxwjt|F3IDEt6ayBeEY
zNY9wi!!mQViHY$X{N)s`w1dJu*IdEk;=YJRA=H!84;=nkQ0j9AVk$ABFXFDTE_v7A
z?`{6jt`pNy1MX5KKYC?sQ120#3QgwQ8pH~54T<hi5LGWpZe>6`a-I=`<O)~2>+7d8
zPr93@NVEQr%Tt_-k7|{*tc0l*_S=mu)0uSV<Tyk-a?_iqwA3z5XxjRCKl{Y-T8unj
z)ke$Je<2zJObsi6e;Ha3$FZOCBB>+mp=H|B7grCktEbW?D3-^*`UzRJ25`vLKJKv|
zmcDz+nWYts#e$kWE=1r2DH>fsP=+$Y#_F_k^zp6n9);*hW%uX(v$o3m>h?Yw>_QH+
zJvO+}7F^}OdkU-o%z=kt@S=8h1ZUG-Jz}pbU%rmZyKS(|Q^`EinW==AKpea1naT??
z`%@s8^_zdHve*ZEWiN(=ghzHa_n$f96x}GnD-wD`_f0S5kg>*A;aFfM;90U*wi0Mp
zYiq6Eft*XayhG>stG#)jmIrq^ULK2b5MkHIs)^-9AsTEP1ulC-j0(v37<Xx+!OL5n
zMD%*nie_)}92VpmJ_X9Pyu<LP>KQMH903pfou&C-X6+*nYpNx6#3BY{Ue(oBQEY!W
z!$@AwE#>Q+;t75sGR7>Wl~OkO%zS<Ab46bvK)5etJI0KJ!md0y?e|H}+vF-!S7N!j
zDH2nkdurqgFLHG?6xr5DItxgthZ3<~f?`>)+445{D?}`RKCT<vWA#b8-dF4seQby#
z_ruHa)6|$!4~CK~sntOp203m3)!#7IEB(f@wKEr`QtjptaJguuadQ-oCd?%>?;0<t
zXhuOF9Pgp2DADYTo0~X_nlFR*es<S6vlJ8gRiTc@xFl%$5k_`k^WU<rmOmIi+jrmU
zEaov?YI}YxA?cR}KgtgzqP}oWKCI|j?}ry19D+@<AT%>s46gcM{$5U{%ud~Dr+zu-
z7Ng|!Z?ls$*VzRkTfpHSypF#ivJo(m(zI;K7apn*dpVBmqIbU#h<Cs){b%OKE+)7!
zv4dOapwnL1f`VgX>YO-E3Hjf4MKYx*)1wkR>+dc2S0kN*V2cD4@$t<=B0H+8T!j4?
z!b;Y+&@carZjhv|RM_wrh-U3(+TQ{nc0kc#qgiAanN<S4pNLn^#ZcLP5ZM0qLhp)k
zALh`%JDIBU@g3>Iy6OgQKQ|-PA%sCaB&ny-{!tNR-F%n68><O_i;eeaY2zNh)u<>-
z=hVsJx-HywzYHGJ!ZO0r=iFQ1)Qys$&gYr*Ft@qD)H|3sBIywCC-ELB*c1uC+*J(!
zE@=NgD&_A{eLXKf?~0$+GB2TR!Qa9a((w_9^h93M!zYRxzK;0PPq2K_+3df9`)7Vf
zC*`GWO%KZ-r$R)FFlnM~pDp9pid2v6jU5OGx#Ef`3R%8(<u8eGgEhnkNPcqGyLSjP
zQXzE>FZ8TKl4N>$Dw31W#d7NM8d{~+U^N#IqNACzv)C(6ZOZATVArXc1f3SE(;vVG
zg>^JFE>IA4XZtTUUwqz?>MqFguZ;YEsnw?euKeru4^18ft#~>G%he_YH38Wwjx9kY
zjk(^kh#=>zfrgn$z652&Gw=+PP!qr$VCcHw=2YM11`Yc)PMiaD8qQ&T4|KJ^Sx%^U
z%53yq0OadTAbIbw1|_D!*4LaHiNqQfr^&+IefyQp{BfdLiq*Q2>vg<D$!a$G=kuWW
z%%>;E-SUt#fQR?O4ks>QylLR(VwcN~?d!7q-+8`MxL1qag{}RI)1(dkdo-1cDne7R
zW=z*!9vlx-|M3*xc-XKh`YWU!<p?(UPF{iEX*&@^v8nfG-~U4BJs2W!+FG;91*2p9
z^*)M+($2HVC64c{(3Z~3wcp;kZ~p(Y8_I}^1*cisvkj$4XQ!GEtugxm>`VJ#;r}|O
zzrU~zq8iGleFoV3Y65IoU;o%9kO;*mJ{i=x!Ug@$SkENAsQD{u&#gaa8l!g{!yI$x
z9ci#hA-wRTz^?KWv?uk{M{jaduoY4=zLPF9G}3v5OCuaa(pUv_2bG2c!+EL|1w#=v
zT){vV#IO17+4pG=Zw;mpcvV140SF3NZ_$PSMzG_9e4qdASK}X4Lhw$kyy`PWq3N75
zx_hblGC^uS04~)6g{k$+B#a9w(eiZijMdb6j%Qz!=}v`?5TO08JAIxX1nTp6Rg1y4
zV;a*{^kFL)^VJ{BdX}!V^+B$h8`7cN5RFe>Ng_sNzbuGHyc#ze6Y!epoCOSL*p|m%
zAgf;D$&R-fA9nc8#c3+C4OMiAtF~_~XHF0R=d%XbUoPAMX8STJ9M{o)XKRYr)H=)@
zeAvMox6ri1q9XB_0>o*Jx5#t+9EIyAE^v?ugt{x<iQK#FIj?B-+__0vnFs89AACUY
z5mFvCLZN(CN2#JC@NCf9BZqdYHcV8_JpHG^O4U1t>$dM<?=nC=jCZ4^N9kMr2dLS_
zsv6^bv2&4kDPyV3aa_2VEnK8CG~)Q|uhWwaj*0b`H1pb31pjXVEzF%05t=Xmpgu!u
z>#sLDMZ@SWn?~NSgykOW;KkHB$M79wL2*MvG26W-E_)Wz!h|JmsG`a~64$JgL{5%{
zsUY^TXnmKZ$Tf^89i^=(AvS;f_p}Kz#k(R2rs9F`Ho;E}m*Fz7`4q9cu-wV_?1sBU
zz@Y?2<?&z_4Pye-!E!mjwcF(2UsA7z2@md8VpP7^#p9;B1ddP+VYdfwl9OL&vl5nF
z&*l|`(SV!|-C1QO&!?GOpafx2Jos*^JcJ)w{K-OCRH9M-e9&-YF$tBZx|^ipk_UHa
zE2is-bq6&e$Bl29QyZYeX8}R|E5-mT%f5NYCT<6(6rZ?Xs2Co=A$rUJ%n89@$la;j
zf01Ut68fa=>jqT-UK6mTZaU=^9Cp`6m5p1HuIzBFYk4ivC<X?H?xxtqt_9I&&#kN&
zyu>8cN_1J|{q$N3&*gO+>WR5p=7<+QCw2*E(BPJ*2%!T(wdHm^8qNu<L8W)$V&*uF
z=4EX!2J?(^{=1>sP$8yo%j4}%L$59cuyQQxHL?+)?iaX&7o>>WMZIALomAsu5p4N6
z6S^+_&k4_h-x2_q2}lvNHK?3~fy4V4T_Wi4*HerDJX|*g>LP~S$Wim`B=$#|?s`S5
z+c>=G_#l($UE{iQe@qr_MumM9{Syl(A<Q8FMT=LAOLoqlGm^nIh7w;mj_|_r(QmY)
zLBC*RVg-A+{f_`nR|2m0w2l8m4zx27E~37it~9kO8&RygPrl7`2>Xa>jRVOEf%f@7
z^IN{-jIQk^fO8$R7-rnymlw{&iQk$O7LIV3Lb1qW|KYJX%JwY$sDLJ6sOf>`e;~z`
z)><z0(~lutxtEb5({}fmR2X6+2cE0<!w(h=k7VsW(ybsNydw=NbEpuqBC^Sc@b<;8
zdiMsoDwE8dWq(Qt$UV1fvaQ`H;HV#5-||DDexL3I>~qVJhQd^rlY@DOjf*$$uK&o-
zn#sbhyUW2zV%tZfYCD$;zuM9zoFz$C3O*jMIT~-EvSGV?Ewzd7kl1j4D`o$V;QtZd
z|J-m24@NQvBP4<~@{(8Kg`xaB0lLTk5CkuP*cD9Ov9BCsi9e!MPq84+x;6?>&5K=A
zR|$KB{TR|0m3WpF)U)om)7xeC)dc-h<lp|={u#L(qxxUA_-3>J%7npXF4tKMAJta>
zBzYseeN^4JHnsK3xD#rZ0SoAvE^~2}D1jp&sdfV?`J^P;8Zwo7zCj(vC~0B*Z}y73
zbcQRj8xtP1y=&9j1(i?wb(Y6PzDuv-WOUXa>!>``fbMCh;RUZ>T;)vkeWOq{5!B{&
zfi~GeBUg8s^Z165<)j1ATLV9GJUZ52kLiFwqI3NX$c~J<D4zZiq3pHs+S1q4->jv8
zqoOF5h>8BeJ6Nqg&v<mdTp{d^S+1E71UcKd37Re<#{W|6ln3RH0QemY6j$5s7TkwA
zplE)ogTVvgt)q~Zva7C(^meHd9Hp#9-eTYhVQ0kPekUJo3GK8*ivUljJVPwtn+{+N
z0I2jGgJDNBWIiBI1X3}_(Z~r654VXw_GOckef_Jv=x3%y2L9_KpPL^oi5lD8k5RK&
zQ62bv^^OiHCO^kR-b!Y%c!*JmyxA-F;f9UkZf9jen=p2*^{T)*bc^9TIkKYy<&BBG
z&XCNMo~|RjQ~#ZdB9dm`Wd@x7_44@ujg+i5h3v=M((c_ih?H>pC8?4!alcPoJn$>i
z6snNZmU4CKQuNdhIjZ1Uk@G=LiWJAQDjLg8Ai(QNi&;T-K1gJ!0;j$qQQg-U&x6ku
z-OMwX^(rwZ`6&Hh&B15_8{4|&$Rmo^)P*eprVBpNhRg{aDO8thwI#VhD`dDVsdT__
zzP!Y@gp*%fD9g9aZ!t5>V<E}_UvQ?)a<L1YMz+1aWJph^t1_2~ZW_Rx8pBAJaPZU`
zT5S_jh0SAdZELfVcY^(=g)e}E4UI6P^%9K^7d{3Xg86rG^i$u*qeG>1*e7*l!kn}r
zF3kDj)NA(1Ny0l}He44S0g$r3B^z4g$~MxAs@Y@kvMhH_MRj;e0Rwc>CXr9S>VJ2*
z<aOT$8tW>`eR=6zLbG`DFw%VO#10U?PshD6pj$iX5<#tf#`|uig-J(8Dr-^{XWi#?
zEJ>7`ta@B=R3S<M<TvZj><>OJa7QE069>a-s?kT|#lRC!`Y_<<4d4W4F!Mk3?a{~;
zv6A{#Lr`9K%*L9yIq;EQIv~gL>2>KbpaN)Q(HFgm)`yaLnl%SNO97hM|9TvUEtaGM
z+d?$eiFu|$Jc#~Iy%lBQ0HBPPk!<Ixxx&%oHxDPdQxX{!3N22fH6_~{F-_fdw5(Nh
zQHASzWFy^>aGD<vBfjyX0lbO#(}nBIx#*dwn{QY?2Y0LXYaUpr=9Ek2v*V<T;)E@)
zBZPj>)O;|t&SgLC6~8c$Q8ohez*?(wKI0TMt2Yhlr^i0$M*lC!4nA5_W~Dbzx_*z%
zNjqdcB2L(d<4F7p`X3dfVr#D<bU^|CLJqIP%Ev_q00v11%SB~L5KiQAN2dj8ARq?A
z=gVLoH?r0To=0^9X67rE>A!RgH@{qu(073K!eB*-_bI5{0(bj4r>oYOeecF`<J4%L
zqDHL>98gmek7~|0qt<PBsdul-v3WFALB>@%vf+2_B-f`i3Sgq29aD&5+M!>Y8=H^t
z%F|HW<A}V2{Lkl&CFTSA3(dz?&=JIoRo}z%d9~LgJI7UxZeZ99^0LLHfcgP#*>Mn+
z;uUZV)Rf`nYRcju$G<1Xj>X4l<$Z7OjA$j~l@`WG4zQ?y(PGvdIe_J@bs0_7^$#bJ
zfcNK1=+5wyx}~EpDmW^n9^>+`XCM!!_ECA#`{Vr%D3*8y8`7vFCMl}v`lzyjmnTu3
zO89xSzE=MwL-;yXAc_cFvr~|I`UlZxcpyj_E*C)7-9<T2vYJ)7*=q>1xxx+8y7U1p
zd?FyB(+l@CPIm=D%t5>#jJhaViKG1J2mTr4rHaIWFYFpjumd=lf9OO}5tXdT6vDEr
ziAbijSy)lk#bcl#OA;_)k}J8-2TwY|<CJz4pV%%T@K+F>#+LeK*a(Fk$Re<h{uhVw
zKs<{h#HaC@n);VS=g-q%)b*F(&^3Zv?4(0uA?BNk8QnlrPjHQem%t}JF%25wesW!I
zXgYP~e2ynX@=x;(Be1gJG5+Xl>QdM&A>-_ZsyA|i+XXq3&1_L6xy9(E&~6!`_bluo
z4LTkNZmr7>@Rd{#zfw@|$dEO)u5a7D$*n(7ou*P1r(BnSZ)r#jKJbW4Y~leXO2aSv
z5t|4fCeeQM)1(KR#LtSN;x&B@d;850r=ke%hm&$pp6^DxllygJvA?#0jUqImHz@G=
z9IlCO=m-HtqBSllTU#52OT=aaB};Mf+w>Xz)HrY5hGhDkdK=;O8q_>|)9=YM@f~+Q
z?`z`bQ)gD4z{SzS55|0Kx#<^!w%R7ybIW}%6r)=Q3C`6rEI=O*A-2QKkM`D^NeV6b
zQC^iKhzavBvrre>1*&2f?RUa7Tb`BMr9eJ=vFb95E4ae|*(^L@oyYpUqwhz(c9J|;
zVfR&muoC%9GG9C<xpyq^Cnve2XrJ&(s>0U1D*U4X(?_^<VG;-}Py?@*e7pq7GQ#ah
z0=Xv_Jg$7TM-mI7r23)1<P#qkpZDk$1M|}gnBf*B;Igz@z}EgKC~rCt<h)@$#KvpM
z4%w2xXxe5;i!2|s06<=f%rYcLV?Bp~nyG;0e&jyGy)HgJan~3EJ0N%sQ(*VlqKLJp
z(leyXvF+;PS;>TknkFm20VMM*AJo|LJ5-UnbymYkwFoY%rWz#OcV8mcR+IN>?iA<P
z`V&(Z@?BGn357LgOA2mLLv4xhwT3j6OYLM(NjFp=^V*ryh9{^x`$p7ww@E)zswSmZ
z$bnBMA}p4FrN;oEr;7t-i)lPB7?rX^RTkg5Spw7Jh=`O%Vl`2EiU(y{dR(X*5Xo34
z(ff{JjmO?O;Y6zhd_FH9Wfs#JV43|O4RFf3J=25Nh{s?cFD72@d@dviY|7gFXl}r+
zZH8|wFQ3rkA#aTrcrxrU#=)yOo>%9Axa)G&tQAaZ&!3UU_I7Wszc@2k2UA+2@TpJ(
z_1PV2#4Wfvs!*)SK#&QYY7~>XEw`YgCtO|?B%9BwCkcbYh>0J??^=~?Hx&RAKdS%a
zAiAt&kno*b-y3%$$t|#<udD$Ne;^r_`C#I-W;WqtB`5jgKqW~j&TV6YXY@(uuEbxS
zcvBkJJSyk6`HW9MjlB?6sKZ$~f2aKnKbz-%zp`}E(3`w7FU7MG1c76sG>3rIZ7@;+
zp`_#(1NBNDd^6OyFU23b+6UxJQ}cZ<K!ptMQ=?qQ$s&P;)$^?ir{zyOL_3F3ax2zh
zfE3#S-u(r_GA6OH98KL^P0YKMx0C=!%tbx%^Z!;gsS6`-?hv;(`+niZk;zrosp3F}
zIBaUg4iIGtf2Z%|o0_YRCi1PGZa3DVzvtuw?NJx0+URgHI-jM_No;{Cb?!AQq_&31
z2V{PzE-Yx(=iPB4ZB~&zU;Pt+sM3%5W?vIA{qLB$+bI~4)*T{qZ-CtRXdQ}aN*dV+
z2c(eR^!Jnaa}mjDtEQ$XTrOZ`OLLgJ2g7N#GUJb_Fsl9KM#zXS8u$OIN!b%c^D<&Q
zFKjoRy}vt4l=}|vCx=L2+3Qpl5d=pdM?mtE>#Tg?qdCpU+jse{qxq>z1`;2Pv)s_B
z=*KQR?l)kP%q@8s6IrVA3_mf-Z<yHh>-pB!zxPC^d%2X{cg=2gRI4I3Rknk>W{81>
z<fU+8qEiHN4$-=rI*`AWhQD`(%EMBPP#D(lnq;ViB{tL5nknY}He`(zPM?=}^kiv}
zIwa`zD3*~=ImhE3<vWZ-mR|)*yawm2pF|$E^Dj)z?Fr?M8k}RomD3~AFMgM_shS^9
zLUTuW>mKH|D4AilL(m%_Sz7_&1#CO&3_bnkRo6Y*#DV-}fq#xQ#l2K#k;!2#TATf|
zTrwR$aZ4UTAL9;`H^mP-k`L%~H`h3YLL++50LTkrlEx+FwC?EBMD<uZpa**I^qMSG
zIzTz3<>S>3v`V(K!tL#mws2C8^rVje#TD~AvdQp&g)-`WfKt*oMV?qrrSqL+isE&>
zdP@}W2#!l>!oo30Ist6{UnhT7Trg<k4yc=4|8R|B4(MVVHcV#%YmcHi0|c!fR!kT3
zBtsqVe*2b_fH@X@M~EI*GnUQc1d@3d-RgI^-6dTxj_;S74F<!1DFWxSMvi^;1K>&I
z2Ie+L`uZwd{I4CR%mqTz;M`aI8*kE>b;9_?1HSZ1njk}v_`DJBop^55OF~I1J@!XW
zj=&?hs-wfdmcv@euQuiLtERG4P<ER$UR1^Nd)IP0R1;>_#c>u9m3)B-Oqt@E9Ad<0
zU(~_o*KHtOi1lsH3sbm_l1UGzU|1Uu1W7ojR-4v$Odip$cT67MF_PA5*QV;G0b>b}
zX$FI?12G(+((wI)&rhRE!7}XQ=EP>el>~=b5%vl6=P7%;WwFOxT?BK=j((o@IIC;j
z_Q|QN+;+!RlB5va*5k3;CD}>7<2SQndcJ!4s;~`_Di0j@KKsnlFOtXU5R6h7aGmp>
z9(%_$tQp69)qncuHMgA;>GieZZ}7pB?3>7gXLrL%>1?g$qKzQg5V!tGPHj8m<wJLN
z_LM{NU~_!=FIm$@`fm{RwYS|U`!ZFSvs7jbJhX@u6E|LwhgTGfFY%R*MQp@bnUknv
z_n|z`^~U%Ci0CPfyif@J4TkVV51CHM&FkE5$Tyk!LH{&7+3T}fL;xB9)RU7RVy;f8
z+XW>(=u=W=JAhcoPLud|^8Jfg@HpJDE;7QyLgnnX-Bom+2Wa;~-8aahVC|;g8G6W^
z9X0n`6amzJ)95Q#T2NN&I)dEU7kYY4P5|g8K&)?iXo9Bj=82qO_Ys02g>JB>*&U=Z
zngr!RxgRt)?#_-=l|QET^<v-;u){G&*#ZB)T(~w*u8=?`%bxdFHrWwI=P-6+O$7dW
znoEZmKXXn!4%>jni$OgW4Vmg5xTz}7&|(JJmPlnD^VkA&b`!(`zi5<-`X8*UwKO~+
zoT1E^<7UR(u{Y^agM7cW@6Rmnupc10D|onLYf%TG!-a?TGs<0(c8ocHjloO1pyHYo
z3v}%JA)r)0AFbK7$j-oU-?Y`mTu=VluoU~=NZ7>;<%@UJdnDC%xwnjL1t=f500{&&
z={}vOIAFS=L=1~h{}X}J?FIVCQ*oTZlTU4B-Mx?^Fd#)+zu<?)$4?s_fd`*$Mlknh
zU^qtUAD0M7-_Z4zz9t^+Pqu22vlzWdfh&#L=Z7|36|;`|=Dq0CVW5Y#sbn_4!{_?<
zu+gh!>UHId{+i+rZ{JBipowa+WN(sCI1tMzGzx?JaqPPNfJ#WOJfo08d>=jEXYX2<
zzw0A!&}Bl?QGV-T5irMllf`poHck+@AXUwF9ikkCr(n2A#9Ns|+L!GnZ4X%O9Un_X
zzl7&p;AY32@;zoY+P(r5(>rds_q$H1<BqY<Sdj8e_uSwfFn}$7L!iEf`|?*${<a7Q
zEA&2UFlW~Toa@Heyae%gam7gR5(p~!29kWV)WV!axCLH!&+BkOoUF8_6hq3}@uJJ-
z<Qt&A@nVY3OPiW?kwZ?AeXg95fa&VK3T~3ZrNYs6MITVeLWsU0^c#r=*tb5c6aVqB
z8zE!>G``UoO^gWGO$uW9uk}vkjyC{=0Ee)>&hZ5ZS<VtwD`E1^Q(1Js;C}P|cgAE*
zBFp%WZ>whpdP#<5d}p*k;%3gqD<3C-emd1qTyi?Q?B*zqI-K1{vJijz+aBUFWev$F
z3a$*BbYb^3=#07yTO?<(PQg8+?4Bxz0l_ip=;Qes;BL%R9s*7x9!n_K4c=={+B_4m
zkgAJL0QMsljE8-kT@bmbOtNfArUY?chs}w-fwe&YxAyS=B=WH~tc@@ny)MVmm8@@b
zzjJk<(L|q3=uJ>_H!FA%Zv``5zO^c;Q^`9*rA%^}>(?ktoaR(3xUDP6aGBDd?~<`!
zf-7N<tSESnn6(tU<u)Of(b|~AyZbqP5Ca6Z_pt5$*e-MJf3XqJG#~?YZ`|0h!I{WM
za{xs^y1zr-P13!Y0%TZ<o7HX!BQ+K*M$+y)a2+6|lLBxt#7K>b{I)RB69q0^f;?-{
zuE8x`zPc$zLG{!0#7F=A>10xQROu*DxE|6vP3FiBsDP)NRw7H^OpK5m5VfbSCJ~Po
ztG*WpnAU6P3b*pna2dzkewcBh1E2J2<p#Ue_LE8~j{W<2{|F(WK-b=ENu|Zm;ZFx>
z$o3kI-KUU$&`~35N0$Gv|M*j434WE7(wdRom=k_du`SoHd6+rLo4q}V!uxV}<kkT^
zAhWF<-4!usO3a`Me0r17c3!m50_0cyzf*YmK2TBynK(MhHqrE44~4%sML03@2Zw{d
zJ?Tr$_0SLAKm}a)eZz&I7o<SgD}EK>9>6j*doGBq>{1Y56z@{bvuN~W9BJ@Fx&wjC
z&&?{<J-t`{T#ZM_U3zm|>aEIazl!$7D8P-H|AioQSFqEa)8G*BRjwV2Q-SgF^i#^A
z06(wMtkA`8)jBdQdZ}MN=<yU|p>eQGnxSnx@9{vl1pE<Q>FrPMbpa2Y*xz;gi2Fvj
zE#D|PByp+lnOpIXuJL5P<bM9DoWjFvD)w`lCnHwVK*BmoZT<v&V5~rYu%XPqU}ZAh
zK=SK4ga#y0_HR@w!Dp}*uyY8hJYDYu3C7^AoUMM7yWrC%Rhu`&AI&7tIQ2PBShCq`
z{xADf27pax%!k#0N3*Kf|LQ@Y#p=0{@qcQJd{kF0*^TZTf*-Kj!{SkB-nVi}psbzN
zPQ39*NSk6*rF`imd^Ds%_M@Jlu3{_o>mk42Gxxb|cX;2qZ`Jz+4&M~aX_K(r0b1)d
zmW3|ixXV-{Om{lUlLV?qLVqHOZmcW^S}Jzf;_7k;bCI<>K9S|GwXZzetD}qe8Z|9*
zmV4)==xRUAGfGqLB*}+Ati5sc7D~_R2H)lC8n_q_PC81wGNU`7;>D3rfbYKQoQ*{W
z0Ha!=clf>$pjg9N2uyI#XlMLGUKQ-+tSW(3)NAE3yBA1l3D6Ld`zDbU`rlCGfs)Dn
zx!6fwj4(L2O50>s-Bx{U3+ej!9s0uK<wg_<db$e5AWHIpqc20`ST#A2-)IHDMiso=
zq*RrW5jCCS`UO$B=Ez-#^={Q!#pu*Vv8}Q>C9KzxH_}I4s(g_<b<4ssq84tif=XcA
zVdu->nl8YC*m(i+Vdhd<^^1t|JCQb`;P51}uo64u%JpHMju>VxXdMBLl!)du{&Wp3
z=A@nt^_{^1dhC-?>!C4QigssBbs}a+-IFqpmdK*rSd1-=9;c0dP(E<o>`sEbAt`1h
zp5ri(e<zyrqc%-dlJQp8Vz;sjPRanl`u6Z?kjJ&N^4&o`{zf27U~ZFh5~tH&ssM42
z{Nkn)EGF+00oI0BiY}rmWHMYdTwD*t3?$p$8eoyR8n>wqYFdH}R^SIu=0;15LLZ>!
z3EZ#P!Z#e=$w_Me;t27KuP3PCgwBnxQ_m1h3ALx0Ey|QrkeG1-<jjXc5{v;9?d#a0
z%le?Qn1b-6<tw5%(ZJ25UTt#Y46>!}CEO{cWN`Z?)AsF85?a5tmuXV2g_f2dC0~Q0
z`gNC*qwM$80q9QXy_FL2w+MjypLEGhNs;(AGDPttx>nf(OwS$g{rS8?g#bsi1tf<h
zG=H#P;{m23o}Krfg$kxsk*PcoT;t687M99eeG~BA*(NxxS__WG)2?3s10PGAwg?6k
zEx89+ilo18L~dNE{}|}Ca?$OMp7+?F!nE>a;<wmuX&jRTl|RcRWR$x1EwI|^U)Mb-
zP)(I`xbi2&bj3QGKb}qYKxTm#Bsz=$6!>JBOob5u-5dG|9evGILB>K#Z(hWadwInf
z?$f)!KYgWKoGn8Oz9u$=mI?1IAym<y$odZ0+wk_9ob;210u;q6&e4{;g>3dIv*Aji
zZH!%xCC3dQ{e$&R3*IXPE?FtR|AOL^2a_pRNOuHMj;4Lg%C>}d^`?G|Y<2OXBW3B@
z03SmQ-%;x@{L!a1X_@7%J3#Q&n|J?$LeKsm{{Q5^-vClsG<9NJ6{w4~gWd-Be->M?
zk4F0a%TlwF|GkD48U{fS-6W8&$*rJaYV*?!;_NH`Ym{?xPg2b7YlG3f|9|`8$}i9O
zDqqQV96n3-4Go|;gtV&xr!GMaXG|a@y2Gq6z_>uPPU3?XC_xK2>@EQh{AYn(jp*fw
z2{i^9?XsBqTurG=Zr5ACdQesXbe`=#{F#g?K4;4+g>|C6Y@jQl*wPYlK@uQoHKAQ3
z7uB&zG#2&WK>aB!bn+0ABW!4AetMEQol+r{1)nq;_WaHp8}_F=otLqELSO@3KS4YF
z<kjf<BgXdW=6tK^CT_tC=-+xFO=KoRH?v@!D;QlaopL9UIVgFenr~iJJVqB7RupFX
zA?95hAf1^!2ZThj5OQG)_2m1%Pcar=i<TQ{Lg)L<+?OKlw^R2jRbPeUNQIzh$dsxF
zOzVI2^h~mxcB<GOwVkh7jNvWYnJdr69Ai6xBAt>jw&jP6hN1d%Y!Q{x$g1w8y(*C5
z8U_#c-uQZwN*lUe3SE2NT+~~?HaOdef8S*}4_Se(7qa4pJCGDN)jSiKM2rTuzN=tL
z>aYbnN;1s%S>mvxoj^DDO!;Dwl6SQ+|BpcZGt3a*J{7+<@Row}bw`EuNhvDqhJ?7a
z)EtW^kvwc{aIGq}of8mAqQHjz<8rG!Arx2)j-j`|;FUf7Vetrcc5>W?ymT(nG=l32
ztRA5PjYFU!Vv&+UJj8mt!A1d$azg9ts``BlRFv&MK(0aZV>Zw5O6~N)-XwUeL~`Ee
zL=na4E{3c}JoTB<5uCjF%vC+A3J}?7*X=)CmT5oo{cTpWQ#pBN1LkSog`v&esz3#w
zHjrEd`wW(x$0p0*6K5o69j#zs>jM3v9KUiI0El7PyFObA68Q1(ay3dWbcSA64sk%8
z^yuk-b6llr{T$eR2%o$il8}yo5C-k*MW5r>uDgo)jjlV#G>`?M9tV-xqyww@7J!)L
zyw?_eSd+-)s-T#@iwe)EVG8+qvaP)veQxY836B6YACRaqQHty7msS=ggy7OmiGDP(
z3nXU$z@k-*tuq#|&VSr5VZ(7FGa%wcIUC)EG@qEM>LJ=~f3}*cyiEo$hc>`6$%$je
zoQB5FF$U^?!@t7tGKa{Pq=Edg2=ls`#>7}ykPg1sg>;ZaHMb~Qfu~TRwYZ*9h{R72
zME18;$H44*lS?s|E*&bm8b=mm5&gy!sgCMSYng4Wj-q)(Fe_}0Vzn<m7i~?ncIl9=
zHuEDk(y{r7+Hr4f!7Gply%Y_rpaQ-;|L8SGODeoM+5AFX*6^166?C`#{425UT)F-V
z%}KgQS6$-{v5kYqL54I{j%?V5M_$}xHiXoJmAP92ylSk^SM2|%9yC~1ZFE?-)q(9a
zi_(++6ZCR(3>VxLc_gqb83uYD@4w|vbt>fqJ0h5Qc@`|VWd&nGYZH&Agval9UkxU1
ztE|4VybeP9fDxZZ;am@m55(=Ch1Y00&L5htZmOdPmKiu_+f;N?p(lRr=L7$3h0W)@
zMtzJaDn+(ikKksaA!vWL$_0!x2}hBw#7I)z)#X~myYk+L4Q*R;aDAc^x2=}_4BI>+
zlVh*wcIpalaShp5gcjJ>E>6}M#eJZHLst&^1isPHi`r~DW$<6XFI<((?R-|jbT|M9
zRFHo8&2W;2m)8HP!5U(03nIw7B&j!gtQk4x0{TtqE7*LZHe1Q7wr5)OvaHL6oQceC
z_Zuc*qcKpwb0E~)*cpl5XTVuEp!Kj`JGc7g`-K;ViEiC;U18J-x>B%hzm&am#k0S!
zos*8AYj%T2>|^LqZ*oZ+%Kz#*EnQCQte<A)&?Ks3v7posbyV!ddqieJ94i<!&vL-{
zXJLi!t08{Yih%6i9`OWrou31x1Bt^E?8}KA#h9cSg}DVoiMQ1k7b4o-7^G^4Zz6qB
z7!swYkSd}si!l}RL+CwP4SG`~e!C!!Xe9|k`zAY~MNaq+%ji5r$1^ccQQ~dg)Co+&
zCPf-K%?cpo8Zh&qt-)}-${3?GGM$2$3#yx5IUw0&bs*@7e8Ak586*QqtaaW0VTnTQ
z{!KF0w@8S5UdAOYnqFhEk;zo9{aHsHU3fb3Nyr^SgE=to#3dX()Da6hi87o4l%WjD
zIMeo=mr0X!rb_RW(@pTT(^vp_woVoFeM}{D6MNqb?ABAz_+C_l3O1?OHICsh=)b<V
zE#$@ZYI$~2EwE|zTFdJ{Tdge2nG6Eflu#<)o>&z2DT-k1yWT@X@2CDMK4&xHu$CN-
zfD~7LO9nYVMmq$HJt8i3v?V)oNzBC?0e_1P$nSuGbmg1gE*Ms@Z1NInMgnt;70GHS
zbKIv*s4y+9R{$N0;RqC0wJ4<CHbnR4+?~{XaWy+*8B*ZkKyG#^v?J>iC~bUX2SHSb
zhS%T`U4?L51GU!z8Q)27&p;^mCz@E4AVXvZzQs@dfZ+1<J1uNyK<$_$#{&BF+Gm<y
zhOn?{sgQa%jLMsqq8;aZLXifVr`=C5a<?tI*cn@RH1~<Xmjwbraq;SQ-EQ@!Px!O`
zP_~vj$#@jx<z-rwDIB>6{m;`CvW`PK4qL~6n<J$cYjuMfzH<DUZ71>*a4z0v#d#C#
z(l>f?k5S9)^BO)r(6mra;PSUD!|CP42?4cTSW=bYha|2V+s$co$veXeJ;UONRU0=a
zv}5#8oWVx^g&rA7ja5*1-a!GIctRzAG=~PVyRl-%N?u7ZX<?Ln8r6Cus`>n<i0iEb
zh%xbH>F2KgcL>r@q;GzxgoZ!_yC})emxf;Wt^WEMBEKWamK9T+j>@V$bH<Ux<P_Fm
z40~UdW4ho_>A6Q*YiyM$3H5|r*mBthf61IBrzO4l#R~1w1?A(8-{v~sWNWhDcRuN1
z+0c4AzF6m?ysZ5&^Ut=pN)dxCp#>6-SL9Z1M=^sBl&1SG#FF=1GmB|-^17ito%b3*
zdgb-eahhbpfoi?G4r72P*1W#KRmTIUP*o9l9_s~TxWn-#`$Y^L>S&K8@j7dn)2o;M
zzE?5^Fl^st88FoHVtJBs+?32BK2I>Io-~mmpsB!GRVHCx3ss#`98#Z)y|DT96NBHh
z_s{A%y3HSzcl*f4jr+D+s7uxBGsbeY1)np>&sjG-AUAgGP0wa>vn1_@aERHNccF5N
z{M~KlAnud{Hef|n(S|r{Sjre_rP4UMKwJXZ1-v(1qhEx#6j0o?Ct7!Am|F7CemE^W
z{C`&E8foQlJ*|2P?_dBUg~EV(Rn?E%%(`z!yC<aoiy&&u3#-<1qA_zIB`t#;7VJUN
zzBX=N;P(5+1NCv*KA-YB0GwgErjbdrjkLQ}q46lrSh1{NiSxxL$Z4Cv7%I&AsFq7M
zn+aJ>!0#+7JlTyl7}bh`a4+#_%et$r`NXicZ)CsGK0FEJxF>hU>0OcZnH_KJm7aqa
z<6gFnC#=}1<KP3qkX8MI?Ve;#fo0QDkjJ48XDF6qv!*HqJCwX-)@DOm)m-H+PdAIT
zsKl>(s!Cgril*Id!{adNd&*qNWfC%3ps~bc`hBe2hRsh6ajjNn>S{j>-API{o!b+n
z-{+ziWS{j7BX_%x;qs=X)ha;_wziVz&V51FmQ>K5&zzp^Y-G%5vZCREQM@oB4mo8N
zZss*J3bPpumB<<rgO$_lUo}t<d49(+7^OP!o%Uc)B8C|qK5?3C3RY&5|I<h}D#dkv
zME$U2A0$~7+k7YAiTv(4BpmKmt-sh_WTdr8o*j;U9vE|bkDSO%UC=u|vQ2Ao_h$K{
zzGwyUaGnJfqld}7ZmAlhGpB&7=0<lMQrhUFSdB4j;n$!$(3*YY^dM?-+ThJe>W)p_
zjZRWPFI6Qc)PTzGze*Od{+E)Nto)MP^IzH<WH7&C*?|<bHTB&|;<i3vrcNwC5=3<M
zPjLT`Yi~zCqV&Ic^pJ>jfTN)S>M1_+>tzL_8XU28x1y<<%x?uYzc`vw*9LN3bl#CE
zC8##*=*RbVzxgXBr<B7?_qb#(BIPFiY2~F#wd$ba^u%m|lKd&uD91e=f#ssv&cCYc
zX2)LyN*x14tN&Z~o#LoH6$+7ahwf8^HX=8l_yPJmqA^@qVhd-JFmdf(=_nk}^yJb`
z!*WA}5ZChvyGx3g#cfzVY>T!p;*sB`#-WbpJ~r(X+j0H0*?x0KoKA5}F>VNxl?!Se
zb1SUOK%IoDYEhGky=KVUPSIMfh9zkWfbmD4SV;3&57*>wUB<53T}b+!PMHEJpSjsk
zcA62>o<HK%J6_e>e`F!CUkT*)Yt3?26awJ7=kbxOX)v%-9#HM&QM6h_qWVa4T)+qB
z%<9mt=qO>nrY|;)uDMf`&+u<=u7O#^`0J7Z<QCF@1`;D=-Q_2ruIYvuFbXr@6|vsD
zw4T@`;GipWw7vXMUGUv*RZ2MoC~HKZd`|=fDLT$FwBrfK`{@k}b^X<PIS4JXopBQo
z-DNdDO*W$&TIGgP2w|l#wXnpjEArc<*9UppCKXdQuaZ&l0Bw*)OM*aadYA0v?WUA9
z)cYiI|HGbp1|+NA9DKg#UdT&D&IUik;)M>^U01=E?F-KV_S4}TWj`$km9n6Cvc24s
z0cJNs*8xulmvKI_c1QBe_#UBiNAUPrlz|-&P;6qaLz?BT*3s=C`nPa&T!~ZNtd9f%
z8KL+~#oQoaILlRT_z*fi+8@Ao%l0Qd2xcMq^eL%Zw*AOUA6;{>nYu3`@0Bs-hs=A5
zGY5-ni@@4+1cLTbL8dUTfQ;-3|22;a57VMu$C2b<5e>J)fmS|VQt74?gtQFeYs(t=
zKnbhgEvzA~$hMnwU0pU9oNXHj%dQ`6#dq-=@4k48tsvP7T%u5C7bCB#(sWv*WVH;L
z3#UJ=&7PxW<w^Csj!R(q%QWdmivU&c5#c@eDpI=so6CD+&#oGCjBLd;Oh0G&=PIuX
zzT$=hYCD;q?<uVRveyD43n6i0xudBFzOTq*;NP`Z+lmw2C_An9NT*~u0E;HQ+sz!Z
zcBhkik1JS4wg>r-{TMIRKn7fvl2~ve=irp|-JN`U3$!a**hibE?oxzk;lICR>tAK0
zVf=$-5q_)^bZDm7T-m!?<F<(vfrYQQ&GwV*s>&<lLKDLuIZ?MDJeLAYSG|hkO^zd<
zrR`tsQ%_HH*5o#p0T8E6^Ae&M73DnR*OCT{`i}v*q?L!}IK1S5D#nJnemjBl1Shw>
zI%$6b&!@=L%<rCLUKP4?2tcQ_O?lBlQf$lDUcq>V28OTTVEnako`g{`peXX!#iE;h
z-cSgs4W(4u=PFA9JBFQ}=RSD$C%3=UabA3$*!7pKie8k~OMlVjqph$InjaHf-#NcB
zB_x-2KbY+)LOF{c8vtZ_jCqzq-<m`Ut>+Z`!&6PFAD3ymTfbu<8~2-L$821{&L_Rh
zP0OcN-yidTv?)xse~k!vLWOzVK}w<r{A^34Ee(d|PIv-HEAI^|pd&Bi$ew$;34skQ
z4bZuB&s^8uoW;I^Cda_Pdzdq7!r&1HpGB|%T_Z(#8xq9s4;S@4`>K0GKiiNE&t->+
zwIHVEQ6j}bl`%>BdWrdT0HARtt+KAdlf@?N6`TEm&i2rXJ5E-wJ)#oIC{SF=Q=Pe`
zu`xKoZL4iFv*Mp{!~)ezA3#NB0DuXI1{YASbTzZ|rTPu4VPZ~Rxm+wCDS?6hT-6C;
zO4T4N|A-1rIiTUE2Ge<8jGuIMxryjd>kWkRMm-FM@J!^b|8baX6KFr`Np8PQ{T5e|
z2en@foJM_@B}TsFp9>wm)AwJ(a&0~*EoDhwLy-8St<gy|38(9%#EhX=-aT%ch8xir
zv6AfS`VU9+8#fN;@~PVK7)Zq2c@7oRhjCnEwej?W0RnN=Wk4_|hFsF(MDmnXo7+0)
zMaYz(`J{ZvtA&%z7}|aipYrti-q+V(@*h$2O90cj=v47+w7&rfCznK4r71}?RI^!m
zC%*{MT8M>$;U5stUK@QC36%eG%LfEm$rgo~ShoaZW{ll(Zg#4zAPbNu0v~W;;%mz|
zOkAyMcP3^+frc-6G6HVI`}BIAiU191@MuhE{d()S>9|*-nEnJ4cO<-s{!d6ppnAYh
zAlwOv$Z4_s83F$}qt66C?oM&_?jyaQIJcqQJBS6jpu9#?ONo&@Mr_&*F=Q{#i%-fO
zsp&dyZvj}=f{LDhf$6<zg}ifeYWmCNAMEjvKLE8=v9B|pJ5T>jdYWUT>nL+MUakcX
zx%hBK28}x8#j@L%xgt5ZLIMJmn%0RCN}TyM{yQlse&MjUG&sKpc6aw8RlD^_=QDT0
z42TRSU=>N@QO8(<8U5q2u4oHLI%!*WVOgarkkwSeE&OP5=j&FxL8i{ab_pKF(#IcV
z5;~3Rwq53uLjE{AZu}H!qZ(tOE{-l#qye4`AJrpEc%qEYY9uP7P$6n8k-po@;Wgg>
z!ihEGxr0~>r~CeloG&Ub<}W~$TjU^Un*-tm^`C=N#K#_(1~rqt3+EfvFA(|MDiaz<
zIwV&=FnC|l4_V$II#ir~XGrWV7CB+D`m2Ta<Vp4?Djh)!$^xg3s%vLP=mkT8zeABg
zxhuFA+IA~79vCd%*gB7z2JV$IQGWID^(orK>z!t0;)h6&F)Ugt!GVqY1sqB-!0ld^
zl9V7NkXabnJiaaau@@7Y?t&x7F5yc&2A8;9sEy6P`sE*^F`JdTA(KzT*@}5ejP3?^
z6k{K@?e;w~RW$eMvho!XKrT4}RCIEZiA0;j0jvU(Ej*OwWYSJ||M<U$v<IWXS$%7Q
z;8Fe?7Kn1rv?8AINeQ5Qa}W}5W>8dJ_jxeje*H*)IXu3W_oXc<f1B|qiK$j9FwJ^A
za**EglvtOX`2Su`-NhHJ{yppcK`JEd7A-{jeK%p&a9KI$+wZ%@2gru|oB49B$$rj%
zPW^0?6=v2OP4&|;)N~qCyJt6}Vx6@q`%F1(5-ihT(rDehF>eD!l=A%gmjLcSX9#L$
zWROXvH_M7y3nmPB^e}Osol|=hbV!WJ{GR@J?J}ZtYRR>mDgh266_xv)vDPZ26EC|A
zEL-!jkcQfzS}3@UqZj%TocFElSTwQ#Gx6C%zv-CuCjQYZ-IcT{X&LGx0UDDjKZ17J
zV3HP*C3wTgigWUeQSRR^Kol=nA$W1cA$m>N&kE(%#Fbpje%rGUvyg59z#IR4DKX63
zfAXK+x%U$t--3ty$g1py))ZdDHK*Y5rmg62e6IRF>%L&{=O7pl%T)(xd&k={{N@$3
zv?_*s;MZ8-1}Pb=qtyKuy&yxp1?>o6ePPcT4T5-OA3DxNquLHAJjD}7hrTUM^4^#J
zT!doyY0wk=95E^lP}<x%Afh#Brm@94m2fTNecHJKsh(7W97AcZMs|xro;z#Y=*{42
zDsR&-G}}6)5C(|belmh1CkA`{_>LeL1pMaZ8SFdNV~(mq-;-Fr^m&vO%7;do?U%zz
zEn_~n!gw9~8ZF5%!x5q)PVIlY&OP?Ts~U`bEJt%q6a;4$nBl5C?U{T$d%@`N7WKqc
zb-_UI;}VW+s1#>jD<0f994<#Vp!<zVB8T-UxEw0K8pR|O5lS}cO9h8W8eH9W&xC4%
z!H}7e(Q{hZv9RovkPc$G9u>`8TDQLJT$(4N#`rsZ$2bvG(ZL<%Sa6*v0q`KOCU<d)
zOa__iT9g@(K4qekjmDXD#<(a--|D7Z&L)tIV5nbwaO|{v0ui);giB-S|5mfJ(->I_
zpR+-V?WJBrzw=ub;j~~&V-VGKG&8}n;?RxDOnT=Q$kqgF|NrFTx4o!5HVWGB>Jwn&
z1KCKJ>q=)eBE(rA_-F`-Q3-@YdKg(=P{Eh8GP?YK=Sztkc$4Kmqgqk&1AnjIJ4ihx
zN7yDl#`i=1XEZE*O3vWSmmZI66y-a9&&cYnPrQ+4o;`#6FNM@ibz?9`){&O)ZOF^j
zMrofFcxnlg-$CAxOWAMUVoJviOBe?xNI&mcZN$`?eary*T;o^X;*CQ;w=AI-i9uy^
zgcC9{3If_(`Y@;u*2L-%H?Ov$xg6rJqk#r+ZDyvu0E<(NO5@WQ(XCA)1ak+Y@ab{~
zdB-yU3iJf_XiOFy=E*wnLYAmp*xO=Du2w;(>7(Y<^+)UbQ%_7$h%<ke4@-T+pCRbO
z{E5wfaPcmEVuh=r2v^>L((k1QSV6Hd=f0bO8XDh4O*YXRj<k#^H0Ff^iNZr3v|A7~
zYh%29CEOV1I_@B>zVt?C;oU_4|2|t2dE%Z2dB|_}q9X}7di&8!iMgA9&?DM84TygX
zvzD(~4rfg6c3*@FqTDGYNE&&U9=LG4M8_*R!>%_s&frf=(l0TmAX%gFuh`b4e#98=
z>@$YN)612z^ehokmQ1qLOZ_fccr?7nIq>4ao0${;fn5VUl!nr%daC=ywZhMw1%3>s
z)Q6IRCQp5zmTh+(gj#hV<fk3d=0enu_>qqqU=boe91`6QTdS^i<(R-uK_`R8**BI)
zW6Ho7%|as2{{WI-O`;qTAzWZUB|G52>d;wI^!HHcC6_ePrT+6vz`_pFK-$2N3IS5}
zuZX)roN;4Z4YvCCCu8=$2Y>*f+H5<jOsE)8oE;$@UBoSELNuvf+)xz~L+U)u5!8$X
zY4riQRx;Zk@va2DRvR0`ILs_D9<1SKff^(h41%{f?d{rqU((zXeXWrmKk0zKn<GRA
zZ_-V|^Q!eE73mi?VVG+jP&<!h*Rx^^_M~2dU|mPix>vY8QN&L-%~hm-Md*pFoTf$1
zsk-etBj?4zp^!o7gy1sM@7BP{XxN&5(V9mM!Z2r1`K=^o?{xf?ZJ-3S$fDRhiHyQ_
zyUT7tiJZo;IPp@(a<vXv%icKQINDFid)j_%&E7P6#yL&35JQ71YL&DrU^{X^ckscb
z*IR1}@ao3MVlCTBvpVt9v26Iicv82q@5RD3yb$qD$<(JPiF_UUZ?!mrBXc7cJZ+{s
zo*l_E{2}%Nd)t7{>?b^d3?glE{Ub7S+BqF|byhU$NvvmU0t>G?w+pVOB(HV@TnEpJ
zrFL%T9@j6EifitR4%tBBTwPSWU`*%_isAyE%)tSH=j43U%|*b(0CJMYS%{#@DK`^K
zMNjotCf}Qp)r7W-I~=E6M2r<6LpbKUoE4fF!gLMJC8(*6xi6*d&jho(R8>*h!|}RK
ztN67Qj-fie>mjACvbZz?Fz~R-*Oj*FZoz}+nkT2Qib)|KJ`PS8e~!N^K&?{dx;w%G
z@s}u0r64jX`!V(O3UEDcN}aym)?62+@{L3<jZgxcH9I2^D5y;zsg#_p>`eM>6W09M
z!MP@c6)KcgF7pbG*c=&d82vpTNh)yOUbh~+VUkaMz^j@%t|KXRu|Ld$5F_u`p91Yz
z1^}%&NzUIqEFxd;Sh8~S^-yeVUPL02zk>xz>>5`t1S(2maJ}Ivr6Ehq#bFtkRL#zl
zVkvRH>}Q0RpJ;G$x!Diwu=^mh>C}vbX<KD+$<f{r(TtT4o^?XEKCG~Wr6`?Rr4S%f
zeknLrl?((G=enwWKk@QU>VPF4ZLH%NLpa6@5uRv^q*<ek>TQtuI`NdZC33zPVG*b;
zd39N`wPnv)@hX;2Ugb^)c2J9G?4igL?wQJXQv8Y|)*uJpsi4vQX+d&m2O_mv_M)8m
zXOP8;dU<>2H5H9of&wLb)v$?lBUdcCd73JG?epy!8K{s<ob!BFWl$iKFGht$GJ}$o
zB#cZ@OPnXLF~gXEwFf%X>k|Lt+|QY%`O<^?l%f$berN1<n}pJo?fkah0q0##U$VOb
zz*l``6#Vx}xEGw!rzH{F3$o~;uL>3juLtr_|6C$p&hY}hd)ZPNk(%*#a+-Vi$)v^_
zUGA$zln^X+bH3}GY9ye+-JWz|jNUH#eM0A{-8Gf9S(73BExveewr@zmZX~828*cnG
zVwio3B|TvJ%T1;dyY*`z!9dM{x!(9eFIe-a**S-_F&P^vAbSJSYD_6175p$K+W)yd
zJKNJbdVc8{(xnTUJG74lJ=VM4tlB|DaOdn}mh+2+e%O?ewB5U?*xVF9E7b*N28)_I
zFx0og-03pwd$JI?-e2OOL1M7*ZufrM8r)6KT~nsVrznh4DG~4fB(D&yDbwDc7|JTd
z@(14D2h+rkQV<#+!Ur4n8_fXgwDToU;v~=Da;`&CSy_}_5js~3h|ew|io{*6P)S@K
zM_Ey#d*gnFH9+zOj*V-LE#K~O$S$`gt`a-iUWu5BA8yUh$355gJnCXA$Ed*YRGuJc
zeYTin9queqd^5--0Ca0yeD2WK>xahfNpda31yswIukmG!*=SGD)ho0z2cqAk!dAtV
zJY-K1YWnBcFG(!oY5t51X@XOPLQ$$3TO_?;tWK>3e3q>DM5#(S)|-+Uudshz-bP)U
zAXNiJEoorwK}S}l8whWX`Xo!9(wvNHKx0lP@tavNqs!W9r??35JFcsG+ws6OOs40<
zrtujD7~2M&#OUrq%j9uc9zF0QAK&U`{WrD;dNlxdIzTcQ0YF{f8G=xdi<sG;a{ug{
zQrT6)42E!^Xs$5HsGvoB{po+oP5O|N+;e~*Jo!3quN;CbM}Rkjo4C?+shHp0Q9AjP
z0^y?v_Qrv>c=dYD|HT=%4JGett|z^QeovuChvWH<ieQKfrJKb?M{Yvz*B)VtQ4DXM
zBO-$Puuokfjm4YrL+9^zFf$z?FSeFjaw+?Pae9+sBRLU9nGE!E<D|UgH)h76x$@s&
z%%FUZoZ2{CxPk&i*p`m0)W36TBM|dSsnwvQXl24)%uH)m+gE*KfW}G|=8vn-D5HKz
zN4$5smW)t~ocL~;dLV<TFw-h>FYk~!1yys-9#Xzo<;8yF0J%kS6E`>`aP()>F%JHW
znxD!tk@#sr%k|M9q(CW}BRVz|{|S^Y92ofX$%2KFEV;U7qe)8f;h2kGNhmQkwS~XR
z#uyZT@1^B4Uv>7Pd=+}r5>wY}NF{26#<Sz93Kgu))YpN1toTl-hF)i%zi~^37YbV<
z<e5eWNFmX69=Kn1eXXo<@a8{sid8TZ^YRDXNoF1*Iniy{nJ=`^+AaDp6cq<WMy8~&
zLsYv0J^5z5G)O)Q-pS@!AYVOklX=JX#P9JtXGCo^@ufFNfY1I%08X>HGkN4eR(!Q%
zA2wAP>d~#bAZof~mP$F_Kf5Mh?-MDUmEIEa4K>HIF8Qf7G)R=v88?|i@XmhHAW74D
zF<c$!8=4X2Z0k$dT^fUDbmUn&%DcWk83?pn%e$jePVGP`dWR6|B~(fFKR_cC8@oTg
zQ$PtbXu5=$5gRJt)2(9KWYdqslj6Vb)y8;f0HGE=JnUN`p2#$vh8|&pHa1z1Qecsg
z<)tamAK-Bp7&#c45dU&<@8nP7Xp#^gEXxNDP=Y>A>UaanN%QvkJxWvp6fm4BdJ~Nx
zOBB-c_xIG0Mdu~N@Xi9<MJeE_5{&px+k%?LN0m0OHs(sUYfg{^D*7&a$`R$)vdfEB
z(M(Gz{<&@JnUhDLBZC&C7Tb<}g`M)Ag7xl<<jM>F+cIi0g9zbQ?SKq}=qSL-aORT4
z^8AuiS@JQcv{H~Vrs!&g$}EXwP_47kFC{-$^B3nvWV@JSQ$S~x?Q#N1CfB#o!D@lE
z65?@4_`MT6m6Xlww~C7QFrN%L3+E)hDo+cR`7$S_&j>E)6!m{qDCS_Ycg|RYCwoS7
z(X<%dYwWEOkWIW5ot-~Ji|7X-08KTjQ^}ps$e9QK0>p+7qHJgNX-1oIKkdadxg$GV
zNdhf>^3?bBbJjbr#?Mm|!4&!6RXOIe*iMvZKq8SQLO9M}ib{7&{-|PQd5$VAZyQl)
zTGXmN_5EY{y9R*IXUXPxOmWKoGFVdakYr;HbvUoRJSI*#HtV-2IMsVzGsevG-1x>F
zKQ_(3tG!v5G|RLOJJwK#xI>%8p9T${=+4j0<N#q`rsY8ydxb2liwyUC1&PV>s!8B#
zj<VtD8nY&=W!Y6%a84NrZ``#a7Z&1W3iA;i4J3<s+Gn23kwbQLav?=BknML2FPEtX
zJ#}}Pil^IRA4r-k9*FF)?m8cyD)rW|F$AM6Cm^2!>e7fV;78pduj9i2t@yZ_!Gyh*
zBUI!oXPTUk#DFEkrfc<-9T-o!9Iq~12uhW~>7l(`SpL9<qIJTN<-%7snbX?_>c)^+
zQ#S>6OeZh+9eZL0QbV66o^V>hS8#}Xf-3n{u*KhJ{5nAWuaLS+NK_CT)xsPU&Y8Ey
z8{_UkNCbBimpRucpBu*A;il76Hd-M)<cM0<FAk~u9E#*`V)Dv|<CN)hsy3}b%!!<v
z+9IB_Y8&<7*PUFal{xMmj8MU7C9%?w(2U$9KoejFk3+_y7K+T;Epq09s%LSHlz(;~
zHi^0Xj@z${mI8UR`95co9q2ZQ7fTs%;zO>Yg(FO8?%?r@dI@h*+nMb|eZbUQl+mi9
zJu?OWWT|vC3?*F0QXwuOI5lw7=)o`JquUS2(l{(d4sD5?M$k)wgkRi-0f1~qv|JPN
z`wys}*;&fO83CSpimQ|z2)`;BRssC@Dh@CFeg1XjwPJ~x&hY7B_h)>-B=L}rg$3$v
zXfQ}LFM0Krv8Xnhe3@oa4Hbc2i2%SRqY$;yWR_%`w5@o9JPR$9IF4ZdBIrK;kWzIs
zH>b*}XyaaoB+L(4`SU)9ITvvzvH~v7BOSn??Zw-(*<xC+(z>6Zl(v{(Gw+Y;Z|(zS
z1wDj!_`Zi)@zesJUOD%$-enmfKiu$gqZXzOXmtTn=n8OHJh)i9_h?l6si&ov;7b3$
z{@%ZUIT-%T!(ReVd4Nk^48PG4y|SqA+7&sWkY<4A^1g5hXb`KmLv%T$f81DxMq8%x
zeloe0Va5#A99HLYmWh*MF0sYF&Gh|0weWeAQG=%d)Xwi%1JN07qKjVIxPub3upTc5
zX~)C4@5$uGrP!^65BYXN8HLiwBRQ^py&ddZ50zdjV7hw5x^bWM%heo-2RQ9>H>vsb
zn%u^zdcyA)pw;7^B6u8WD2ozPCc1f<0%k!ZZb7HVA0V_^#;p578@nPCxjhT^1F3Rf
zrqN}jdh}xdR38E!$6-?1LnYI#+DAzQBfcR^rJU0@FL-@j4ja~f@@1wATngK#fjF(P
zKPPiV;RR{Y{3Ae?=_d6Zh5K0Y(yzY9L!`tasU{3K2RZQC=Z<^_A11Jpo3<N2h(fKG
zWEZy0anAY8F@tXKU>V$hR;7zI0;3~S3f-?U%zgC~@E^6V;hdzO!u2bBn`h@Hq}*#=
z@2()qWUCe8?Km`kAM8XLwY}EX3=*k_!~X#BoW*MkktS|;(biChy$6{D!n(7LS8#TE
z%z8-;4NMHe_2$gcJw2UfLahI>oRw%<?Welh?dp|r*<PFd&4l+Xt=gVZUB9nvJNRsD
zh^~UrS(UBIpUi=u_3|@W)1FUDI^2z-J+uvCI{y0=jA!KUTYwJ^L>6s9V{E(7==@)&
z=7{I&Z;&{+FdBq0U#ptSm9^^Tk{4$3a&hdh;={|!LsqFGt$k|nx=dGqrOdWqL(q0V
zfJN@&d(*k^V!jFRsDxd0w*>zN{anh!sx^(bI`+I$C}}&+Q9Sgni{er<vvo!3{w&k|
z3FnO(pCBzb_L1SK26k7fFnbL++s)v>T@NhVlmi%Zon^xx4Qz}`ElT&Z4Z<Yi8EC~P
z%1wVaq2}CBF!8xSolDhY{V^u`m|7dgzvfrRTzII|eIxBFGfYWK{E`G=McZ)<ZwqaW
zdo57KWq@45H^$44c}X=2;g#I~ODQ-I4AlPu4m+y6m6xx53?Tn><|YVtmF4mNfK+Ox
zt8(kHan@{6>z<IJEEmB;eB&VbB_i%SXj969!m%H~!&j-5E9lqv_1b;+>ZbW3{uplV
z1m;dvN{CsVFL4go_4FB(!5|RRY6d)xu+E_RpB9Q>Et#4b28Rah^LI1hdM%z*YFkV9
z*sORCI#Xp4VBwtmlRIr3qNPlv{}b(}J@R1GRsHcy+J@&x9o!oGE(S(7QoUCa3Vg3v
z_${Z}<~}$_z(2MYKF~x))wV#uVXaG)6fa!>29p4;<qcjiwaLZKVpl|S@b*fM2VOb6
zd=K}r!76~uT9LV0vU%U{^@!Nfxta#Fa^=}im#53%*Y3^C3tX$D6`ff}2I*K#TfU?k
zQ(NzwAC%>tqAW(jX|TJq+SU(Eus!drY<AdKO6~_vmdzS~Cb2+<_)zTSP*5|U(UAB2
zCo#BY$Qj&y#KY0K^TV7NbBf<tm|?@YaPENRw#bS2eKQhQ&Ci#8Bn>-;Je*$(D?Qu<
zp^Q)ZMtaj5)bBlZ=T=1SQ+AEEN2|=Z`x+_0MWkrCbiWN=56==EGHU)j6+sxR##>d&
z02)PgNMl*nTBtfd*s_GVq0nf#y?SAXh+x+m+L7lZ3F*L3DjZKDstqA~Oi_;#5>ANK
zQu>cZm6t8)x%=Op<#+M|cyZVG%Xt@Owx0aLc_+0`Cb~Ol{6I!4B3S<%lj!pWcDeUj
zjn9?;h`yQsm)0-HM7J2YxCqF<`~WNjrqx?MSA4~zp&?d+nJGs#QpF<G_Q~LU=`?52
zNG^ItT`ABP^CJVvs-9;R>aFd<wFq3^u*~r7ckzX;X46u;KJB7SZR>ljh5fHi70%|m
z&3JhZcI=oXVP}`Z!B@(2lq|h-MY>kS&M7!B#{qA#0Y^4Lu=JM0f37V&eVB~W23yKc
zfR*zN9KS(aZayq|oV+0#VAxTL!$t6L+GR6BP}cxf9Gtk_br4g?LO50(GS!ynzwde5
z%xauwU`!cd9wCHl0aTwRZBasR$;emEv*!@l^fze<V0Et3>Cb@Zz3r`%=cw6fT>u`H
zhIsqhA1v=q{fNF&>-0hdbuq@(Vr>iO<t2!V%qSqP!e*Sy0Uh8FK0SR1(J&(0VlblP
z$wYX)t1S4flSbeQMtd_nXK)I~z#7q{U;gh<D?@X9&qQ$<s~VGD!vq@84>2(qR@IvF
zj|Nb9frew7kB(%HWhAx4d_-kX;vg=BMVJJ8?aRKQyyXTM=TcrI*0I%1h5H6_Vln4W
z&miGq^}my?HnzG=QnF)RF(A<mW`w(O4AzIKN)eF8KRN@1g;N3E`oC~YKJW;5k7Cd4
z8;}=jJmq}pgbQP}LM{HPTc-8g|2$MaVkgz^X087-D?eo%z<A*Pj>S3{^=fTMp}TIG
zPBH_JT7-9puJf`%i$5_by42<TIDO$w_yUzOQf^EJ;yj_b7UQ3nA=aJ7k`Lk?MOFje
z^$w%5_Gv3g?D#K7Cx0P;a!UcX4s$bDfjp`d>tF#-fjDI10rbmLyKK`;7(i(`>Smq-
z8US~2fR^k9)HctC!vS!(sMD@azNf#-1(Cd2N1=@z)5=(ERF|o<gN!PicbTPk#hQvP
zB+~`h!xmD^8S#rOSH8tcg-pN=tP`to6c;^h9F+kKzAmA}Z}*EqEW~tCpq3O0G6`gv
zTf=br@>G2d&hOZ|$utTr<x9oH5(Xs8H*UeQLd7B`#6|IrBtUZ;z>2Py(3Wsyl4;6}
z^=4TG$%j9nS<_f!sJ*#*DnM2sH8P6857%-3<)bHQz`eI{deNRi9;*C#tSIsYIoE+@
z-B{F_bB+yTm9@B=LX?uc3>TtfR843SbbN{S)~sEiJ9+Y9&vR8nxgH$|<e*i-T4Rzi
ztiRyBAM{J24+n|wc^gUD);9u;N66(hj<Tl@<-rLcM_~bUB$)tWl||3e$SEJx4c9T@
zABibGcG!%Ukes&%!pxtrykgvSGuJebzuCBb!978LLPGadn|trC@C6jxmod9ZI!DGf
z+8RQ2Az}Tcy8Z_)a(yExsA&`%yOI`WdH51(5N{Y)t~EZd5GAL$qR+#+QMgPOQc}L-
zea{t#!T3{D_RUl--T>o7xxNSGxncI%6JL8`^}xJC@`dL;;B%DMyD@|4F{hG3D91H9
zQ*a;xYZrat=Kpe+|1m;m{sbg5M4rl+O74w1QGt@pNIHM}AaVwIE~rQIAzwxMn_nPc
z47q?tlEpED=qH*F*}6%IHV<yM7)#>v(^jX)Rp?DFx{{9q%0VF&q@iBwsY%Ze2-%OH
zch<#cDyqzk%Kxxeu{L&j$KO_7Ft(BDs7D~)JgC^QQfrh0>B@@zox+SIF&`o@gd9H%
zZk0DHC{iz<d;$F;SE(Sv(Lk^?(<2#Idj?9a`XwJ9d&gTytjRC^*LtK`9?`V`O%OL)
z!A!V{GON0I5abrbU2sZeXdP<I3>soi0#fx!_}u?h#n(%&lYc|PLbIp0I*jm2C1?u_
ztN#mK00X++KI~bV-4wpjYo*CUs6<A&g^wljfqAXlIm=q9a#8&H@?Jj*1lt|_R|6H5
z5q@m92Luj%G>GK234InO+tbGGC~aT!A8m;>^JSUyL_nA^9{SMvC|WCkU@`9e9rMr1
zbvUyJZBErqdJ_0tZ|gH|c+@ib<JGDHM$;#)VNL6NC_y$F{YIKUK8W(71gez$gfp75
z2yw_0RD0cg6a0@r8Vvt#pqc-23#h+#IW$uLjiLCv2DjGIb67N}OGsPfP09Sa)3ZVp
z(vl{-{7FRxch~0|lw%EQ9P<`X`o0@oLSJe__uG~R=<1nNCvh48t`9|@wQI{#=-J+0
z?xItFzwipVKCO9oxFOVNd1QQcc(+}Ak1;22R$TtUDxq&kY3W@-PJx~6JNQ~VM-?+@
znG+{{8RZEPAE8D7nMhBf+J8zfTGg0Dx}``ljENg*#*DT8yoMow$=V>Qj^VbH;P?#{
z&2Dp$whljM9qO;s&6f{njv?E?M(JF#?2iaZ+M?DsJCy`5@<Dw;afnM13AIp2%MAcO
zO(E~9)gKA6Di{-F2M`y3_M!<Vn&aB@iutK3Ksj#nhb=WaKaYiA&wC~JFr7+`#boD4
z&;C=IFt0r4@vKpcv<Fg$_Dix+N<d|zPTTCnH!?X?Qbw!+B@4ENK(tLPo?r6*v+#t?
zhoE$tG*nFs@aFkm8(z{xn^Iq>D~Pk{hOq;F2iE85rX!R9$nhxkrLp<D{Sc#o-RM8N
z33zF+Tm)yCcGxHd`H^BnB2`)827$axlY`C*>E})}2eM2jrnMED%t3q#!x#cwe?*XX
zWL)gL4OCpDini<c7#=!@rhUr^fIWKVD1H9=&l{AX=b0lzm(z<WEZH8b;V<QQeK$4N
zP;_FI+i#YIC0bkD04ia#i-@Mmm|0sK`sk@_{BQ&m%L8s<0nYX~lg#o=BgTj^`w@13
z&wr9E3lz08R-lo;n}-T@8mv+{h`4@F!ag3kVYsumJ))PqO&4R5DjtHf&%^cy2Z53o
zB(_-Un|=NJRBJULfaP{L2xWh_g4MGVnEA=6@!nz?;+x8%p1kCBoKR`sl*71L9NnMP
zoi(0dhP%gvYYd5gr7_~f=m#o;W?KU>uKq*n-tK?pzB{=PmAf63k$!Ur2{(;z@H>q^
zQtsWjHRd&y3I4ptU~cFH7-imHeo-ou3S_EdR31yBjzA!Rxbxv~gVlql$l&(=<Wx2+
zLp=50WpRJBFbIpscsK}eoWub0);Q-Ifd&mFdSxV)=tkXpu<ls;?QDdm@uh9`qsUu1
z_?%SgqMTtrm5b<4Qy6R6!=I>Yt3<x(u_m0t#o@Xryfj)ho{F7C0Th?fRa34LYuO^M
zzczRS-Y}<_G<wV*DLNpC$Grd~uZ}%Zh+wgs^R@QLUyf9R-dckNf70yfMU7!;V($^J
z($sMWZX}0VhDEE9CsYIB#}Z7#+6mK&R(=3j{gq;`Nn=nyzgm)~i_rb6X}#;?L8abx
ztb?X<_PepSATVwOELF`{XB05fVkh17LZ<jv`Nv^t^2l_5Nb9BL-8VtRe)W;VLFx-o
zTj`tOK9`b3eS;*qz@>v+3WH$AS=7Xd&$PfnN`z8NGc&MAgW5RCI|Qgq5Np!ke92jX
znyUNPto?ZBtyZC-$-44(`07tKE33Z7Z|s9&5(p^&ZL-|qfe&KoO8nBAf~W5O%0>pA
zIqgS0Aj6t5mBZ!*EB-v<P4ej=xtpS&jkZ6ETMfBa#fNo1i!dB%(2k0RD5QKiB(H>t
z(KO-QQr{U2)j@wfRE?69u8xPBe$sPy-bZxHUDHz^a99z?3%gPbo59)`ZdRO1u!>=^
zxs^g;^2X2rAt#?|n7V5VD^1aVRVVohZzgDzWXLdq*x_FDK5q3Bo2JgR@D<3J{kXgS
z90~rbCv+CM`Ga$v%&HWU{r~vQ@2c{p<{1;;f`mX+Kr0)+{-rNVB0g0NNje)z9P7t9
zo}?#H8Y@shZ6d?8dOE0yPjEBzuO7TK8?yqchag^&V}RGzv`w``Q8zV{)WUOOZ3ALP
z5BQUNBat3CDH;TD;}xg>hlxZa4@LSldTeW`w5<(o2@8L=mxwfFBA?3N9$2#rsId!E
zhpXC?r8`z<UW{tK|3aVob_5eVG|u}2n`CbGS1t#JHmIWqoV9=o7Icrmt%_d2B)GQW
z>>unE47k><EyJq)F9Srhh2R0hj5gu~3g?|?jbtUd*KwkNC4rwmcPp%i0?l8__qC1&
z7DWFp0ty92$N)&#%YuVe?NNFH_=$nu$#UnP3rd2eMQ!4{3+=Qr+_|G3G#wt|JaIJY
zi>^z><Cm^44X|Mv{yrL49mjSKu<ADs{CWz?3wKD!`OAS=${CT5sbJU73@Bx){=12}
z&SGLJ9;r%PDq)TA;*oJ;cdz&Yjnfj2W<kS7W!r4u(8x!|KF{v<oE4f3PMy*Qx==lA
za)#rQlRxJq#<v@)e^69AQzF;sl>pY#k8f|L*@tzBS43RdbmSt#8n^ynIweu^&^z>e
zuU_HSR3R0ytj$NJ?=gd)d}iSsdCm%w>^aRmnnx+_wu?}eRzuc4FS&g`3cA~5#{Rf}
zO|WCFI^~ebo8Aa82@TcrRO<ZVg;j<Mn;MSbntP=r8l0D!1vLXg<6HYe6hoZK&~Crv
z@lo#B4&7}$?X67ALA(LpT~3Yp(YLmh&mhwLNunNCeX-n2d1B6mNp^&9OIZ0`Zjq-b
zn>T-93k&}Y4bRP%fwo|y(w3RYHY(3Hd_?XO8szpd<E_mrduuGZ%0sC?AZyN{nb)a_
ziK);E5D?Wr#NV>=vCk7u*S|kJa_JVsEBge~X}f7}JLF0`fo3^II)q9XZO&uNJ34bE
zj7F20F6Ct#q(h@X0&d)XLm*Gm=PGuttH3c&yR>4N<gs-;W!NilEFBs6><NX&`MT@?
z#s&B0l-lKVN>6z^@l27mQj)QvTRKL2({_S5%&_ZdiOo@z-SqGsE2?VU`P-;VoT7;#
zsRjCqXcL{Hya&o=i>v0efT&b6iuo`LvSWIzQ!7i9Y=$)nHlTYTR<vJ@-PC$zHSM4u
z3lNo3aFSV&3^>Xuv7{}$<+9+U+fF+7^wO(Xi{!WnlOKxRs;jr?kbQZ4;YDj#*hOd&
z6fj3fxw-BhnQ2`du;AzJD{9A^9IyHip!)@-VRq4CDR&Uo<KmaDzA)M_?a&rYTSFTI
z`Wy!?D%X8`gv;5_Vj>cgW{R33sjTm9bS`Z}40sF?YrBO)upUm@#aRHSBF2iy#H+@K
zD8)6pPO}{LD*R9DsD)<i*qZbXn&{*G96+%EGeFG0neodExs1yO83)dts9M+|Pf4Jd
zT`-CO-LH$F?N{*}nW(J!LXA<pOb#a;{j-0OqQc#fEAWkkSdqpkTJKwxLjIg7_F5R^
zpzvf+evWt}pi3CQ?aeJ-ccBoH#Lyiq&5ENd-wJ+Eo(%KfNhxSJ<bh4wbyp(EJk%?M
zRbq0?5c93{s;k{}sk~ecf(;rrpZZYAgl1XJM@Z7;yg$03VoHpTh%I>E#4^8w#KD5j
zm-Cv3oDZNrCNAG=+Y;gI=fCWuR4iI?V#&Zxm8S-=dmvt=OBj(3I0%u}eR%3({Iy!7
zmCm(f1q>T<pgB)zw)`&vR3vgBeF1=bF<HM_Cgl&hwx*b!PE|I740!e==asV5TW4e+
z(Psl>k>SKY&`lr>p|X@h)1}o03MD%AB9cp~rsTrrzu>wF4RO>e&W`i=lj#A7yA%-Q
z!>G~n6kA{T8d#dbj*I(!02Jlcz15%c+nJNwo1Y>w;{;b*`Q3@IS!F(Jw{bY4$DbcH
zLs=PR`fuUy{l-;qop9*0ig?r-COj`gNqo=P<3=xHF)H;!I+5dA&KZx<YlTVNQM3>H
zkf7eVvri7O;yu-_E%3`xjz2vOx7)AeAxJ~dkU|Y<(%NtSF(so@sJIMc0uCpQ2G6{B
zz>Q$XPgEcOIPa2V`*M1GG!;`%izJ9U4i&jEB)NbUTWi!8DN?*a{7O^)KI0ceud9g<
zBrIs&K-n`*mgoc>3Rjgw4?iLhSn2FGTVT=)B<ck`3q1GtLw*&Abd?o0uz~4@WKD;B
z^?_UdK@@S2X-Zi0NvAjm#TWs2n@->J8G<a>wki(APAAIw!f#9F+1lQ1%Y5iK7acgI
z=%h))%WE&inzDoVoi|xT7g+dz7uZ#)sT!(j3H{M%$9$&<t~MeNO^u(WgJSG$leBL@
z>hP}{U*4B_c!BPbh8r=CCVz`Tv3#ZxmFv3=XaIhZ+CBekNEa(bp9K{$pYl!c+(Xp{
ze6U~ascDWt{k;0+*uMUhwr0|@+W<kY1)YO^kN9``5~R+=x{;ccz{z}3NyJw0J=ke#
zg`cu;W~GaORqL)!VM}3Wcwh40wJ~kjCuQ>w{gzTJRzcPYL5@H*$*&rSHmt18wTR23
zjtcVaS6_VnRidju@uE`K-3e8Da&XmRT-y2?290nVPh0_MDt3A>#tPshlru!n{U(8G
z5M*io=Abef5#pMh>qj6DFMD@{01JR3<9kwj->9K@AP&53;=e=XQRnbR=25z}^O53p
zKFJ=`hAnXiiARg2RKfB2;jDV;Y1Y=3RV^hCPgULSXx?R2j**}{XCjiO;%e{aHbP0&
z9lQ>H<N$!26z#jp@d>+XnC4qyEEz$+au2k&?mAJs?w5h?1k=~shITmvT7ZPX%N0NF
zikOm@xi4WM8Q-1yYUNvw9j~hiD`a#*sp)KhJ~JUj=^rl171`1;JgeX6z%$GHcoaK$
zc1CGxc1as4pUZpUr$qDJf0sSKuS@%^-NRC_s=n-;(<KCIWSsjs`^JqMOL>$Drk)up
z?iLK2z&X^o?%E2%syS&xF>hT<wqny2ii)GM^VBYJ8bonk=CZr9Dn63KnGgKRto`Aj
zOXNPFV}g$=Y2Uy}xQ7!<=qWwB(rY7XS4gxR7)ID)WS8$W5HZDGt_K|k3JervM%T{p
z($}9dlmz7#SPfX@D7Z}W5YAB%fP>3w1w~B6s77CAsPjY@kyz3rD^(lgF)>ocL&`*G
zNm4;mqZQ5GEkH_seYjU+L~4@E7qum!(9;Ma8fHo&@fZ~LsOmT5V*+;TiG6dlZFAY*
z3H{C+8p1G)=IUiVd`nyA*C60J!(}X7T~@v;s^_MN7S~ktgG&Zp9alp(qY$E%tE*{P
z9-o_2e!OGKAYHAoM6ypd*5B;@lbGXH2?!ppe<`RdB=;^cAjJB?ebH&Ym@0_xH7hkR
zhnBpx?VM3psG(mK4sheTcXhI)s(=<Lmy6LcSX;Mlo(e886{w^m8MvHAj$2a0rTHBw
zKNa{_`|x3#y5HqnvXY-U&<;M(g8c*lQZ_x;V<$Q1<L;Oih4l4OE&}buosn8@gr;+t
ziTA#sP78U*-~iW~3Jp`S?bWERpyDfW^Smmr$%jM}G>A9*z&L-ht?!MRMGKO41inY4
zj*#yfu>wpba4_A^UWB+W(JS%MS?X1cide@AsLo$C_kXL(4NJi0tWoP?+@Njs60Cj$
z0;Jiyc7XnHZ>j;8qKg@4OD(a_php!*#=$lt53#~^z2+<hnl9Qb(a<Vq)l+)d8%T1W
znIgm}sLrz}G3FTi0Gg!X0A<=pYr=;9P5E^+VPDV*9|PfJ4BovvL~egbB*mZQU;}pz
z=i1&@%~QOS05_PZ{<Sv%iplC@10<{cl2buKc3SzmHE(&n5C<1bwU{uQH7RfWa@dKj
zX5d=Y;@aZ6<16H`pI*~_cxQ)w%@lHt*ojA-bhg7?16EA&hju_vIZvH~J0_AzrtHLg
znGW78LJ2hKtWA*jV^XQ@f%e|5v%*-x2D;H5ks1KKTjfYc{Aiv|NJX)!_zAD?Jjdpc
z_6?}?P?w<Fx7G;zX9xD<;4ImV{<Qi0kgw}wIR{Y>e@REzN~^2y!gZXmMpciak!~`u
z&x48T*aheW;frwF-TqZ~I-b1hrtqKzW!Tm-Mzju<%CpD6+G|}!(2UrN^V?*I#K{+E
z=Ejb_nT40R4%h((Ww#O}V?ePUN!D_u8FayY9jw2^k&eJE?*a-72^|+V^I#N;I!cA%
zC~x&a0X&UC_=k%;`KwvhMCU%tC4XGApq_h85}V~}s*N!R0~Hv0eou)(>>w*M*$)d1
zZs%9}ao&bOA+3ZWYQ<L!;o?ay0K`AiD_!XXC@gGUtLscO_mhT<HS$g8Y_nrgw9xe=
zPKLy-J^U^0K-z3sX!PG#*lTu-^MYOnQ%{8?>ij6KaJ{op$SISPP-pEzFVTW0lbZZ7
z{uwyjEd44YuGqD|4G1;K`F$k~p4Z=(VO-w2SQy#%K;wC72$dW5G8N*I?`fhNa~I5;
zx1WFAj`~;Jk81vW9oGp@%ogdyXAwDDZBizjVs0F^NAL!Y$*QxhbBHlzWEF_Wxz0mc
zR$DH-ZUp!>#AMqF#QO6Y(l2y9(vlHw-2p6+j3CC<n3@CHqT~C)1CmEZ8#;pFd_mWv
z-@iq=5pr?~R!zZiJu+0L*u*hfr|qT6@sH^RQzFO=DHsf|P#omvCE4I$tKXbHOWHbc
z=KscJpY{7KCh7?ku*}T-RX)MKQVn_pOGr~FPz{PzZIB)32%wJ2XbUpNVn_@}?NWM0
zfiv)vg-Uk#$xBal+k9VxR8PyY20SDYIXr%qJRd-)NjX@<Vl=?Kk~=MEH}K(YK>7(=
z#<#BYb-ydhXu|eK6%#ATh(x489p-DBDc37NzuN1qfqOJ|uy7fOR%_$(6Eb#IrK3<k
z-naHoEexUIY-Ddg4afT9%eETb^`s)>Mb~go*fYL2t~JJek2|Z~Bw_O2oFn=VC482b
z07DC7idR?WAO*2z?->>j8&J!l*)`DE527<aKmZfm+bjN0@)fa^X@OO8^VfD_@RSte
zcJ)ih3L%J-#ZGe{Frh?vE#lF3td@)A%e@^`68|TdU5!I3ai*Gun$K|4a|Dxji1es(
zzWZar@ieJb^(EJ~p_0p)(>(Cn^66!(6O0|^s0LacGR=!(DtbA!+Yo%VbL<U~sj_`O
z$OFup?gs*KmBaOJ@Y-BZNn4*S8;9XF)+lBAfkPd<WMrW#RW=+M+`8mnH6aZ!T<j0~
zJzc?_S6-8rlfg1zTm9LXWhy%8yK`Ib$t}JpaKyw3?9p>Lkv8sR)m#|zk-cDW$0${#
zn@VEi;&07<4UbIO1<-=Uh~x2=;mz=tl$}Ht>kWBryAPcI4z@w%)L2NLgDi`fT9xRJ
zGPv3Vqtw}5k46CtXQ249cc4I<jisIq7}*CGzLz0?6kQ&had#ObZVejWVK$LJyedWX
z|F^-P=D*Yc|7-YgTehT9ZK9hdN=&{wbMu>ym1`2{s9S&_gms{~m1=B`Hoafrn<N>9
z;gyv+G;Ya%rqOvXW`f5h;!0V##x!>mj6g!sxAk$SU;D8`gSL4R1p98^a|ILOnF*rI
z8eS7H<2Ckf+(r59{7S)2ClcUR@(fCRP6!o3dn9Urt(GjBNe%Cvk8Zk(s97*ZAuibH
z+7Z0Fjr;tbq2ZLf8r6No*uWx*P8<dZGj^95RGcZGJ%by!ECl&Sw>JyJY`x}-{Jwk!
zQYn=*gED;Mf7n-4{BFx7Ch%S8`<1E1=NbHV9g+-O6CGGU(9(sNmK#Bm4UpA=(ha)&
zH7+(+{>GgFP7+iJ_;`Y1o@1gts<B$7oLiIaXJrv4P<ApxN#20!A_XIFH*>#AGXlvQ
z3KfX1cf7|GI_h^A#X%-lY(@pFGn~dfR4&DLgTvpx!TYfx;7<=0#PdoZY`}bn2p#*Q
z6PrpA@hZv=u8^<-+gXm*=5qnzhlS(6K1-_>hBd$Px7K*V@uz6U^a$Sb_w?r<d_%_H
z6breK-pkpWaUcFuIAf2FtEmFVpx5u`s86Aim$)IMQ}ZmWjW9j3Kp#91yXbwP?WO84
zghCkw1$L05_s{YdX1*WBDO}HLe>fWJnl0Rl78w83k2y-FIr8>h)|omT9xx09gA`++
zAEKz&RsMA@A6q`<C+0GSo5A;^QZld@D38F%U|dF5ZO(O?6DB5j^*nCTNk=oKTL_6S
zK0KTb%Ji3&c_R^zf8tEW#><35zMGtOYoWysz`uC9tn`ep=4QzMbu*J=gQkLZHCo-D
zx4kIKscI>jtOv?8M#|)%zHqjmYlwx{zIyd|dSTXuM|l|h^Uwkvt7U;|#!bDYNXI9B
zZT*A#0=1ycxM%CeM<E+Qy!QM_(`Ea`wy35DBw~i5V88)p-&|FP-Y%g-C*2kspED29
z{GofO2%P<DFK<nC^7ji6H++8|NWtgQfb6{H31$<p#fps`CKq=(g+uQ9$&+?8u&?<T
z2pri5k;N(4qku{{-jxjpaAPj)JqaI8db*Pb%Aq%Y2V7PMKAer_w`N6>dzUvHW9*UV
z^wwm1=x0iYxcH#f*2yPc(D@z}i^PzSsS=<D%XZmEVl*LMxq!iFqLMU8iR+_BA+=D@
zG)?jpfGsakw{<6(+9L`6q!%PdPTus)rWYMlPi@e@u3h))0-@27G;c-;Ukl|upr-|E
z0pr>SawV1G9~O_PXd}cA&FcqneMkqs;_ACTC6Oc`=oaNy`5T4I+2VJ%gbz0=aRq|o
z5d4tdg*-b$)E27PhCml5^#-1w9D5$i&8LeSa}D$o*gfZ}MTFGGc%yF|*^olO{EO2D
zq*$tx;9oYYZeB`S%KrTu{!u%skk(Oq7dUDs4o#CIXpVv_{}(en76dwK;JL^kNffqc
zc@3q?j7G}UY_2mk#;>e>;I4tW6u1QIH^PERg8g^F1d9Bd=?Px$4l`NDSX|7uK46Z;
z4?d&3CU%#`$NvFf2h~;o_|SN`DM_9Jc6$k0!SLCKhH2(LxS6-)`ud)9grR*xc<E{d
z#&~81;)!+QjQ@#7XTI|v%zf{#b}AZGUfg(*VbKY*wYp%lJQf!yKY>!1Qhsk_5!_fL
zpKJ;?2FBAc)3C}5i9|no;cV;^cqtq$hh{Ku%8DCngg&Buev*U$CAjacBhI5{LsLkI
zp#4knbgDi^9-+dlf$13fp9fD$!Y|3n{%S5}xb71AB{t<ifQmJy3i{~#Bo}v^JUAjW
zY0U2+<1K`3mo=UNV&|>*@SjkOI?Fm;>qN)BUF001Gs#<?7m`f^GpKgXS{J!tvfe#N
zj#Xhxc%&A}d)7H5FrVoWb|PXpX9>1!|1a5_EFcq!qX(@&4Pm!qDgTTIP-Uir43JsT
zM-(!q-~O)TAn#K0zrrap2=r2#Qf`R@-0|bTICzhuf%ci`6oxi@-wRzq;<u%T9wQ1(
z2Gj~Vfky5l8W;RDIA5k$@u`*;F=WKn&nME=dlkUPLi>zzL;rW>5-zKUNz^_@(^D*+
zb%<w+!Lds*xHWu<X3Lq?Xy*0+SlmX(#4m?6aEa49W=~Rv@4eVjKz!>)F2TblY5#7p
z@Zz=D#D)2t1^#~P0uclvu#PJe&^*)^GIo>MMj~IrQZh(wJvpfYGcR{4t$vMA+5BWa
zrZ2H-;o2Ae(2%>&#TOf-8pjq0QAC~Vv$%!}Ja3GnchSfC(Ya+4YpsG&LXI^4Y}sWD
z&+mO;w;G;qpuX~UnGDKaE${P~`2^?JMs~vyY;Zt90h`WprA3mJYo=I{eK5mP$}n~h
z{SNG{(?CcNtVn(t$$+Fq%g9D<Jy5H_Q2GSm{Xk*2DkUo;Ik&IqcHWisrJOyzlwDo_
z-k*HX=tbFIG9|V6o5PX6*0Re}Xl`kXG_aNE(zZrjpe9{c><-r%9jw9h#Av3j{FTq5
zxj|c5c;#U{l5a9&E0%=;m|&Pn_u>Bruiu{&2+ty`Pp435i+h44HJaO;4@uoFan57l
z2I6_PO$F(#aFvyf`2@d6s`>ypw2Vmrm-@IScE`L{MSD1NAf8!0maOqyq`UC(%g(_f
zai1?l)r7h$qa4-&`z}fYL+opFRw_rvwT;|bsZ85{F0>O!q0IJ6lN1NS^I+{B{+5?{
z!lx1~b|MR6Zybosb|#}Q>uc=eG)@&7MAup_#JV%)PpR%l>6bnhlO_-I3|bDluiOLp
zeU`koER$Lu0DI4(i^FU}TU}i^z+Y+`fVmCHB6Jpi(;Vj}0yPfh2tx|dVoSmSw7{sa
zbZdTyn#I4hvlfLjtD{==?H`;M(yp&X@hS7WJ$R%#f}Po&0_X<Y%i64`HHwwWB>1y{
z+0B{@dmpjf_{Eqxx2ZZRg1u+88vWnBi~%t4(jTZFI7R*mrzW`9{85Geu6de=w-vtc
zQTa=<odnZQj2K4WnAcWLq1}D7<)QsKEIHoW=E9tkAVT9yy0_82MZH~Mmo<|>$|dn;
z#g(|3;b<=zhU<Imesr@ppOtpfC1HjKmn@>41$GQ`>rt4|;OSJ|F%AnA1<?}VEJZhe
zJr>{Kc!UFAm2^?5*9j<60oP@}mobI!s0t|3PVoTOiB4nklGzCmkYV;DyGBKbo1_18
zO+cR-twX`Sn&HwB4h-^QF+DyH?5a}-ETu<JbGLR=@D_%Z9^1qHx4{?8Fw1tajtTNO
zb+<KJ6{gm~se2hMLsiz!kuLR4QM)wlaU7LCPW9S?3B!wRhyn9<?-M9-OZwt^==UGc
zK)3=9vL~Y7rDb!GBsBiT5svC5*o(f6|H^pWQgya(-A5OSnGR$egw0}JcOab$iN#DZ
zpdt4^ea98h)`~mjZP5sC;SPu*$_%X{F|m?Rdzn-TgV5VDSP|;iNQcSa3E(!p5LF&)
z2DU9={QbfrueHFF@O_sXW9pWdjKZNK&}&Llr<ZP&MIPFfed27+ulKcr6fi9~%g?Xs
zR`+7`6X7^$_D8uZ6!L^jx1NHGaZYabT)>v*T$~zzC)k&{tFwd>0+nXDj5HI$-9K_V
z-BLvY6%KOMP?4wjQ7)OJk(6v4({<bTB|tRwj;rQjhHEoZXwrndFzoT(3}#=Z4>Hf8
zWejS#bU3$h1PqbPxD*9xNswV;6=vw2$}Jr;`5JC<#}i6nE)*dvW?=o#H?@#6s}GQY
z+iq@tZyI=2Zi@BEPfy>ripm^%^@UBSWJ{&5eiIKTnv<Fm9kP3kTA4~EkMkx48Zr*C
zf?iaBB}8ZC<ZIei$7b$Xr}}4|nc~D^a)V(wSK%bzCEHfUWrXlzJ6{kP^f2|9OkRFv
zBDX}A#2w&n4ueqiA>7}xh2o=j_64)|qBfe>#ln3fL?MbcV5UI%1XK@d)W&k?2%wnI
z%VwoNCE!7;Hi%m{6_94kdfk%EB~T?2;=tUojP`<&({r-CUr1LuGbN(3Kxw{-S7$#=
zLC>+Z0==CbXRq49rC30Zliyc62Nlj-Q%fD=B0v|CF#<o45{M>G5blT<mOI$PU1YCl
z3pSS}U^VuV$d;lo(>6L=U7=ry5~Sholm{0&+>Qu0%sY$*R~;Un;Fd8Iq4zp6&4lI;
z=Oo8JXoo<3j7knHj6NRrogA~pfetce-6)qWssytdp;<9Y0o3mL&Rr>>|HO&$=zw@V
zL5;ifT}@%WZ#6K?V7G!=OySwhjDu;JTKWHxJmt^!NrN<M6xDKzwi)+|KB-ce^3Ksn
zm<nERUU;vwe@S?@b!{XCBg1**$Hi5;cRqB)Vfp|_1dSOn9&<P~vJ_x%joA3qc)_o*
zyiYGC1G{#%%YIy>106K<dN$X+nD^#|Wp5j+NeyO-XaYN(lEK2?*-k{xTXehXiLX2*
zP{VJfF*BK&mQ5-eySot<UYEh(D@k72=oGAYGe4I;B*2Yx7TD*GCMQNS5wP|~JXHhw
z2Y{l*!F4hD$)MMB|FJkZ_XH`hn++~N@jG@=a}4x7f0-G5D)uwhM*1`4%$wOW%W_N7
zs8I%<yO0Wt7P}_Y4<xG%Z!8#k3WJbaC3%86M6BC*)mRNViz0x|yb{5$y7am^#t-Jw
zjGFD#>dk9=PJDrj>b%ac1|#pj0nylW9NcJ{y3Ot_P}iS1{D`1C0_hMP#kCIUm-;3F
z1wqzxphl<pw@`lqlH?5il42Z`rd+49nT>mb6*fU_COZL?g?1h=@KhbIZW>T7=YO&Q
zi^cZg9`Q#h8nz~ETU3h+b9NItn4oX0+=l(+-$TTcS(XOK#|FWMB1-tuF(WFGS|O_j
zwIqtH*oZI;WdsnFVWLD{gS$%S&dSo=Hz#;nf4xX<f6!Gw*aSti;W-p5Q{8G?$w-ti
zj&LW{otLY1|79**&d1uq*x+hkU6=Tl<E##b&|n8|7#ePduD<Hx#%L_Lj$>f_XFk}K
zP_O^)FX%4t3;I~R5<8{Q)CYF`zy+=9W`V|*ti!nrNkZTL{Z-MSNlEavF9f{`;^oQ`
z3}q{%xlD7EJnw&rMO+1PD8q)`<?uAD`IR=q;3p9<OYF!?YNRRxElN1tWxQB1lhJxj
ztdxLiJCuS!L+s{2Z*O#A#!GYR<g>j_%g4t~DP-~a#-g#bt7RauUTvsqY9MJGc@>oe
z8!8PJN2lELgkh@5m4O{T_$>a{gEFukG$YmBI>gq^_>40<J@`Ph8~jG}=;|cVO%ZCm
z{IbH~o<TuSZ-gMq<XZ~9mU^aiq0AlldT_fLP$iF${i0h?wDSQ~`JSUnM;794fsM5x
zEo1w!7VcWq18$FfS3tw#@X*)vZ}O}H#5$_CEA$nRg4;^mPHsaOJC$h?SG8xIPE^~&
zWi<mzmr8vD3lGVIG=!r-N)zw1GtH;6v|h*d@>`D#@c6RDcrcePuRMr1ig_BeRmpk5
zTrl}^3qND}BOspliaimkem^bboR!0;xXytHN}IWd<Oz)238q!D?V4>c__=PwY;F6Q
zRr;OV#=yIO^*d7=jp@OLsx9Ci?9Ko6fB*W>7c!5_l@4@y_=+O&`I~+6gye1UXD#iD
z(+o6aW0!x#Po+jrbFCegd}q?1ud{8Yad(ivtcX-ZwW!uEtphA&)kI0=rKennn052j
zGq2Hl6oZX7Gj_rcT1HcElQQaE8Oo-CqVQtYb8uS?DRWzeho!J_8fA{0fXCd_;rP_s
z#|{WdRw~33T~XZ31b2!dZ?1Z}<COlAA~@(wxLV{w#A90>rV!)r#`@kwH;!hC&aCn3
zXZ3*>6c9Z%Wz=4ECD3hSCso}Gjsjm+JC}!$`PZRJV-Wovq;M(-q}TJ=7h&vy7_|Fx
z12wy~M~y!vR*fBz-sk0iJ%db2<5x#(Gvm2oQ4fS@#n^r1yDT<V{FVryCbVo5Z+qyE
zk0G>GpEc=Q2>K!&)?}y;@jI<@9?(QaBVSh0Hr!XBu^vt_a&#lEkkaLDY@gInf$EaV
z#uq$X>5C%7d|?8MvjHQMBWYUkSR@Q`7q)&KKPG79R24!Y^(Qgv0P|54k|@n_Qj}l1
z0Apt-$1|nLvJ)}TL@T3D68z)z2m%=%K!E)`mv7@55bt!=scj&}J=kV2<vf3-Hb=#{
zd`bD)tWRRjjyUjmZW}dhRl#FA(y7O&2r3H=b>2{TGcfED>w=aO=t%dAEsspZi{yJH
zfE{^NseeC*^~?tI<y&0q;XQVB`Gm9MEj?QZ8Xa7Vm0Hm-s`Ly+t{e!VA=Pm)LljGw
z+7%-%y)|g(X*~~ZtgaheAd65QfQrBg#~nL5LN*d{seL}^dd72zpLDpB#;6pbK_1A?
zOWRdf=yxuWSop88VVqi}^RwD*@;?}jxYU3(+_tk!ReHgi=*en3R*V&W{e_<cr27E5
zr&JU1?u;aOicoID-ow96D_^7ncl|c{!A*%AlVQ9)>bI##G4o9{@_+_6V@F<P-KxSG
zSBwM#zqK=HhZ1{bj*}Ota8-U(45rHW2qA>>{cC2ITT=ebt`)b|1x}p_fLEbf4_*#&
z%X<~m7kH1sE?GUF<J?8e^C|zJvD4g5#kBd~>SF$U^%sO8?w;hDXOXdK{_E_v((P<5
zM^QD~#w7L$g#lJ*u8Du-E20_Y^EV&+bb*ePy)>JI$hr>c%G|H7W=NDBjVaZiNCg4S
z(EllF99Y<~>_93YX$9c>>b_|5?!SyT2ENB{sTERqR@j5DBxl*PM{8T<!lE3Wqk?if
z+|~8=ZTC%>rbYxZFYkt7Cz(UM{_F3fD+ASKzZS>~V(jW<N;Hg4PhsSQsTqaC>aH>V
z^XKhS560#x2^EecQ(rO~rj|+Lx&u90sJ+}ME|eSwCqD>B%(2dTM1Pkuy&4tL&1=6_
zy)AZ~-L$K?Aw+mgHJkXBvmL<B<VziTpm8lM7&R4}EJfgE{T^eqH)yf+Dshh{mpU)I
zHGk2x{6s=W56S)pHwC~s&JQO~YsR&o^k0J6x?*n6tF>_RGKK&he0^sziBz<#&$2@c
z8SHvx2dS6Bpnccxf6|dbQ9)|4Ll!{i(PVPWb&dVI4HE~#knssa=!*^s+EB)NS8yyJ
zz2p70X1gl}<2F<1Klz2v354b`*3%`65}W8OG4M-{J3XC$QP~*jO%DL1w-yh583etj
z<xV>n6ga%Jku`CG(qtGXexC?98O53>GHi~%RJal#Y&+9brb;mRC7jPgz9VXUK==c&
zb7GoG)-e*P0spM}!-{;$*S*@M{BsTX@$rQJW>D=djt&CCjV#PZ4Om|x246e^_B0T}
zI)A10A7q>ZF0)CbXwg&G&FQOm_U1rW#>0L@jDll&q+D;*JHXnx&(I(mw`2uiE@UnK
zYEb1rtZ*TU<|MCIasVk}{qQZ`&gMT+=HAqfCe~BqzvG|x$$|8`d}y*I=IJ3<Kp2#v
zCkMzdEDKk)?v@>$F3w>%zkk;{f(h?WA#^szB`Gmej`KSM8JkM3tHPc_<FUxLGZJS9
zwq**9d<bhlk>g(YK49%=p}C%QS=}Vy(QU|}G4Htk@Q2vgKXDW>V@!Dr(p1{|)aYo0
z{h0asEfoIj0Sb$*7Zz5R?sITOxEKYPJlnA(%&&0-%#+pjw_gL)TKfFSAAN?168yV6
zd_Uh#2^^>aj{6DXIK4!5C+0wzfz^=f(NsQS3kIxZ2w15QSh72{+N||bWTuK@W&VBw
zuWB+n*OTx~9MIsKLMa9gG=K}G(&MWsqL|y1qY`VM2ebA<<+G*-zdv<~x~10`>aftp
zXbTxLp-}mXHyJ@~i=(V4zssF}15a7BGz)||H`}*6;>5Do4F4w)TjEN6CM#IMqVTC3
zDF1r7$*IXunQ_=r<}0KzzJn^U+C91e)!O+or{nhqu-V-BAv3os;TIM+z&|mh?-CH(
zr!>-NRdh^qRy0xlI^n`5Y+ylqcmqaG9zM<!3qkcFJvtlAY|EKQ0q+!;IFZggGcp>}
zF8BmtCMaag=*7~sO@r`rD=&<?FY`f*AlP}HQIHV)H2{gSaAUC>aJUXlj6))@LzCzt
z;jcM7>auuF#G?eR=Nn7$Cd7vA?up-9D+kfq{$r~iAQc)Vu}QQis7T0c)V<-G{UK$0
zw-yQ(JUY~Lb+?U*%GYrWB9W~HFE2y--#1ZTA?hbyNr{2Ki>78*WUVxf97bmO!NYyg
zyc_dwa+Wp?#;l-u_YMYNp2AtoZf#W$!@b!|<Km%J{M+z^W0}HM&>A?YoXf)n%Eh{B
zkY;mHRgV`1wg3WtHbIirO}=5%W1r`n2!)1&S?PxF-vuVA7V8JNkPklE?4>oE9pG&I
z_fj<C(RyOq@)hAaJ{bdfq*9mBB}eq?+1oj=v&e7hv4>+4OIw~a7MAgGUjwUWxl-Q@
zPW-3->@chFeE;7JKl~us=rdNe%Ea(61xqBFjl>HcnE}3c1o*}P?qIiMZ*JI8(_#Pr
z|0=28nSW#zpTVkJ_y?g09Cw<0u9Ysk{w+_<*LJTlt_ngPx6EFNx<#Eean3xUVXQPr
z-(P7RuUi&?4QyCSRgDcCXCyVr3u=gNzgR?lhRE>Vpz)7){g18?iyt`R3`K^V=^<B~
zLXN$ie;=g>5u9`ZwpFVx>M1wlq+4*dCINJNdu#vxNv};jNYqO4;~X@uuzHJnppl~~
zOb#bf$%1%h{87R1FO)5wQ?@FVfs=mFEa~aS9<8JnDrvE6wvwM~4hmHumY++ScsM;A
zL-%Fs8A<~|azI#a-(f4rz}RV0wK-Cz*|4e-A3R`h6H0Z^_SHv5S=L-nw>x`L$5&Ya
z4Fh~wvf1q0@x`NK^&1b{Mi|*{#R48w0RijTJ-9yMg!!c-9YslX_x4N2pb&i$ED7RW
z-k|VfH<}@@YDD^^Y874wGJcHq7ROD%w)gB``OZ5OwuE?s_tTGW1ogWgmDlvusm)Po
zZ7*KYp^sZFAa%K_z~}-yIFpYA{UY?xIv4I1cUtFDG>QdMisnQOscnq7iG#+ykf=Xz
zJ?qnZoiP<#P?yH+WaI4>4~b8~c864bq%#oK>G;8STNIvj&6n<MZDbFqP%+jncBFsW
zb+0J`T>{sq72S8|2haMX#JF;qcGU=fq+6G;<(|mR9`F($3KFMP<kw4|b6O7Q!;WXI
z4W7JCc2N&<5vl`$6CXDj%uh7qm!JqMk4Tetfy?<dG{jR{)bVb0)#}MC4L|7^Xy6s6
zax2tF!`UbllhGacywJohWPAXzsZ2ntvSS$qnI}$JJB?StU@xqDWYvD(!35%WMRIuq
zmK|}!yU9SnRaq4n+Za*Vl~`AI8htgS#`5+`8}KFL-%_IPg<vzod!0XejCq-M<y#*B
zE)YZ-(UUjW#MAG<B~2{uY7+lH>wmD{r41dpmIP(4cOYh&27LSwLfd#|JWsfhTeYdZ
zZ{2?p<W=b*R1dCk9n0|+ZB?+BO#8{W3FNI=zd#=IH_Op@26V7xb#FcAMuFF0BN8!b
zxIIjL^WE`b#G$GGL*qz;f4T-~wfvnTF9fsW8>quSV0kE`fB9F+5{SA}7&>|6t|rBa
zlM+AAM(Lc{qr&cbzVAqZlVm-F>F+Qhj&b6f3Os-%#Zs{{&#;^Xw7LcR(5Wdf%p2sp
zw6xp+qh%O9Rwf5;dOK*lOPZ@MFLq8R$Oh29?$AOwR1vwu2L(Bl(x&Fsy}j#6J%MjM
zKnYh|WDTh(f^eobPAB)i9{?8jWIv2TtcQ0HEN`zc#)Af(zE#&Epf$iD3_6?8D@cZP
zGB2A>+~7c25G9@f%N?r!WO64sBj@R23LsoA=lDhbJiGfAYmP3mK}}rsV_3$2A%i*C
zMcmBMLVc3paU+4iqQ$TEMWBNMKYs@`Y7IK(zN3%+XJ^8Q@1*!}U=GD|*EQzkPF?W5
zP-|RXX{;Z4Ms$58#WGtwJZ>I@#4y`+tVjppF}TPdyJqY_8P`@FYL8Z<hYoDt4moFY
z^hkA_<84P^n`X*w^B%j5V&K%f8MLox3<uiC3!lCtU~QAuN~8P$l=vcdGPfro;HhgV
zl*twA<(XrGqBOewHH7uU8x|`mk&pQprs?7}YpEWd7LX;Xc2`O!@%~q;&7h*AJQT2L
z79ZTy!YEH?_r}h3ZAly%gJSl<i)$)%%0Bwmc<dF_uW1PccA!nEPlOIhg&oWey)M|G
zB;5c-PYoL#^9H5^OaXnt-`_8gE%Fg-DYnYBt5b>xfJGmRYB!8-1v_+&#=|k8V(*{S
zTxT7dQrz-++Xd!zb0GiZ^=VqIoauhw$km`e!unL?pPVk~KV5s?>GTzJoOi|P7I!2c
z66lfXt85_gef)%gY?-2!YW*-&1bG?`_RbW-l1sSAS&_wqwqAjWxwf#Uyds$O|AB=F
zpPWTG-41Bq_MzN0V^$I<!jg+;-2NXH7=Oolzo9VsT*<(uve&lIZidE&#Yx-3mai3|
z8*PyjD)IZ|$0M?gdI=6c@mf@oB(Vv5SHC-!)GGJ-|4lPm6n;Vdd@(u@SyqT+I~c^l
zIl9mxN%Q>yiagM%izxjm3?Iz_?^V5S&qZ#S$9MwWx03q3dJqTS{@u5|K<H}IVZZ*H
zsQZSAui;xUHcEMRVXmE$?{OT_SbWQ9EnZOHM$_NWg4kB0Y6&ursd|td9(`+=@-p|%
zR((&y+22gNO!ZTfu-$#94MjsSP#LVK-718cov0zW<O~4>=chz5GBpc0lQAA7xTP^V
z-k>~MD6e;Rui4I1bnyIJ+;0B$N#mq(TbCa!*sz4sj1`lgsOB3&E!R#E$(lpY!W;kd
z`f4_E!yie>qA|8WlKIn;=I4(8j~Q9*Gt%g($@V6PY}V7H%)&U0=ZZk+#n`C+aRVX)
zg!C8y{mwOutH8!g@)tkEQ&$hgIDFimZY;?sy_-f`yU*TYk>c%UV$4?BPIyb=VN-|O
z^)>jXoOSAOZ4z!ExMYL^cY<O9Vbo;xDIiV!{scu*6L$c1DF+WAUR;+Z7}~bTA@!?d
zMZoWY{HyvvG-IM;a)M>pC@kk7dgQd7WVilsdEKRMZ3e?tT<T%L;bO=<)wrT!dfDu3
zS;iNj`rAzGB19zqDH#q^_q_O#ATrs<uVnrq)YoeKJ$g3+r&D!T#UV6m)aKb48z;x&
zdIZ5`vof#97gF*by(m)!-E(|@XAc1SyVfrclWoGzDr5u&1XZF5Rdj$93Haa^J89@I
z+!<=9Nc$Itr7y<r`ML^c@fucE`5ck2Y>K9`4TafSWiST$a2Xap%VvO*5PlHrT4M+C
zBlJy&HQBc{h*o4bu%XMP*}ZXWjRacuI=Xee?yt#I>tIdN?>&Mkc{F~rm>>{ml@8F_
z8AcYK6!V5{mGTN9bk9m6U8;!3$_9dxj56^uzLrJ$YcpRequ5Iio6X+2&1^S87M|V4
zzPqChNgqa{Sr?0LKrv^JtXN_y^y0q+R3uwxjt*z|B+E_>Vt(F5aF)M7x5h4vL%>!1
zI%ZqCg@`-=ip6e|MLof(mnsIa_--aFfvGMc>MVpp?9)WibOF()-mT-neoZab?Zy{m
zx7Vz;2MOD0bte-(PKAQJjI8?AXZLq3>9;g|g9U$vISl4m2V?+<a@xzCEPU~{XOgxo
zjC>&@$Y9XO70HB{s==abi?@OKWkna^jRLXWoANLc6E`pG0ThhM;Bn?JI)Rs*(b6aB
zg5g_od$byF(`{loY(a&~TxX3&^c9vw8BlfdjtT|2vFm0cy8|JKQQ-yVw>Icod$(X>
zCN-|eHtef@4~!bm$Um}bt$22wwWQhh+O3h1n#ODUX~UJ~(4Q0QHWco3a}%2los5WV
z+neSVT7-45{PM@at05H`yN0-la_%={G+_8kovU$!@$x)hVFltb<o172Jb&eue%i3W
z28~|LS866;EOv#Z-|K4kvKJ+OI(GETrRkQ%c8YgySY6)pb)tXIanN0B3}osjI|fk)
z{&Db9Ja@$F4ssJ>CJ{r;4O(MN(CW*q|Mx6e{YeZZ>$*7$$R}^1=*>xZEBM8o(N*`F
z(PJ^G16+B+5Do{~z#WtOfiZt}{XFiu_v24A!~8hVGvirm5)?cHN#5Pzybb%Tyk*kK
zx?;0j09nwq{P3$r{fQy**&R%t7CDp~l(=GEtjB?`6WOLDvs-4|A8rqWsM^H4+w+)e
z{%ZFEi=?Xh+Vf~HoktH)!0D$qa}7!nvIJj{%wr4nV`qQjL{G%LV4}P8DssMGp*LW3
zt@l}b_bODZhCkw;O-@o59xV;WG85D&-5b6c=B`M#Cx!toDQ}Qae?fu*UhP{H*BrFZ
zn7&C&9g9Mb5@9GYwsrq=TE1CJ2>eXT9Zf8AuT8dV{+cACQ})nX239nmEKj~t-s0}d
z3{Ajbv<(%dJ7XF?QrLM5jCL(IbK3W$?qa9>%FVykh7(m&@6C!SX?5?ZFzX^^7ua!3
z^W`XD-`b-{e{m0DaM0Ne7Zu-P+=BMK5lYU?)vrX`qhdqx=-~$Bud*#X{@e1^NxrV>
zcpMNP7bX=NUSp`|nO3NP<3wc=`i-je<;a7F99L2Fw~#%u3<5Q^328PC+clxzv^x}f
z=P5y&IC!D+mTNdGOAJVdQ4j!Qg@=tjX>77!Rb4_B_=MHQHO(6OpVu9TNQ|B^$hODo
z98u$YEt++V6-A4<1kZ(^OX_`k5d?7I_)vrx$rK_b`j{emuZ~X96E&jBC+Ht})qNr|
zwJY*t#+l`%1e_dX+X}hFllMPxg2xqE_l?-G;xa&wD0DO#b!t1V`C34{fWyLT)^!d$
zEXFzn$phH|W1aOS$s&K?o{vMlM~3(2Wd5+|E&uwR3V@8=Lryh*lZpdsj{wr?fB=_A
zhxTW%CtqQK(1=ATZR*3gW^I}f()Lt&QS>Rt82>6SE5hF*&u0lMV}2g5^ps}8*H6z$
zr})Q`Bs;l5?hu5G0!@|;_0Q$;jeo+0_o$9={oj)oU;MpHGvs-(|7Gn4HeJ5^kL|ku
z(s~3To=-4|xwm5FiRzi}EM;j?HsRM2ex&+sCM9HZsTV=_e+P(JdU*qsZ8rNadVzF*
za>e;7z(hr2REj0gbFc7%%s+d<DK{8tut{04kvnxesUa7J?^LhgSaKB|^#>$Vdw9UF
z>4KrhD=xSC9bzC99U;U66jeOZ?!GIB8TgMRcgP-yyLm-C-+daDEf^_|U0@sp#_#}S
z6VS7gYV@uQ&si;_)MdRCB&zHT*@?Vz>L_8?p4qCAL1I*{8^sLCVTv+51?<NxRpSzB
zi#g_K^6TL7;-!Fc`~Bw07m~uYcSvJ)ZR1rovR{=#&G3!BSAT5=iP09_=BN>2*KBjl
zDNMv{l2Y?=m*F{p+URIjlNb~K^_Svu3uMM7v)dMhK3CLI?p`16ll$72c)d;L$*$w4
z%%bBVuXfi*8=Of+s3BOUKfZqu9{VYQ9qSG6!5<pL<9K8o?ZsG**1W>2(+-`!IJ>Qx
z33*rQ{OZ4DJm<VL3Z1@XswjXCG2@U=T%1!W$P!twRC;T+k=+QdFDM5({q((%neWcg
zRRqox=PV3BFXgUg%%ZZ(ONk>XxwdJQ;N{g3?t)J@2tk>@5c|7{Q^}h{$59QEE$0zM
zQ7{RF6<0as$Oara&_v)bNZYP=3zzPyGwoqt#6t{ri3r}MB-p@KRa<<=ux&*7;ipZq
z;9#id+6WSb<bhOFUeOmF@VVXWe^<`!Rgr=B5c(DBbNa$@dVjqX<57{K|4B_AGvx<7
z!X?zB>;8@RJ*|+()wKJXy%HD~DDD+@Aq3s!5#a88bxolKj~9jZKRIYw-VF#@0E*i{
z0*d)qcwS1ZE?9YW=JlU=1~y4}c!@NMHdl%DExgZ;`;nfv%Ayx3hY2WD3Ovd=R)QNf
zT+tceKHirp^%?AJ**sZ9uhr9L0WC;so9^)G#*vzZcKAg@@dDSbV|T`ym^Gl!Wd=^K
z<$*oEf&Xw=9j{Dpyj8O6^Kv7s`nIATI7YHV2)?xx<u~p3AEH*?+gqLl;Fl5$BOCVe
zX?jGlqoo`l(y8>c$_9GeZ(p+jXy6033|cYc=Ev|`ByYmj1gjQJB&yb+opjK=jp??H
zG3Gkw<_TZnKKpMzu7-5`P6P8=Ks2%bJJYEdN{m4&ZLeSFDvqqu6*{du7-2i>F_X*%
z@0t*F?&F?(N?Hg1C(p-MXtf<nS)-N`R_<!vHl1H%A{^?*Z{%BG+mIIk6i{}cV@t*4
z_icSo!m~_7J({00&=feAHSsR%0rTS1WDsM8rIE)?;^N+8I)FET;+s7TWVb0w&iJq%
zC>VnyPZ+(EIh0ViNALL=hV0Px>{X}sC)H!ED2M(gqZg6ujvsg>)HU2>k7QyQY0Pr1
zUyBG-F)m#dy88O+NfT>S?GS~YK)iYjDN^#~1^I43+&7to?~EtdY_D}c`F6cSdRv4-
zBlOUva2x}7eiGlMbUf&(EgxWJccR3$y+{<HkY=1btuHH;27-5+^AXmaHFVG|li_R`
zC{A@<v|u#6TorSI>sBO*J?IM_;R9K#pTr6_SR9R#xNkIUXohz>gh0Hk`@n!bf9a;9
znS)o{_pAD~OaDMr7;{F3ss#c8!ALMe5vqiePxKM3B0%tL`^rZ0FcTIp$W7fm@qrAt
znp3;Fm0^wxLFuS%?kD4n+v-fAG@8UOCXlbub7w#2mw8<V9AjnOl}(#z@sJ%;+)+u+
z*1|kmwxtm(vz`Xu*sKg=w2BC;^J@i<a#@e@%YGvp3sL3ja)NB|)7lWnvlHsPH}`!7
z-S5f4&NNTDn_MT(5?cX4J2J}}ogtCu@1#i=_SjJT`uHz*zp4%#govbF(RFnX#*At~
z<qC2Qzw=1l#*T>Xc;=VaKu35ksw)v|y?uh3gC&h3AjSN!NfNBQ<(hO4ixe-X1y5Gm
zIMlbvEdvpV91?tJ8bR5u>AN2uczn|=^&3&?iUfiDJ$4tcA$l4T*2fZgPO)uzNq~DC
z9So@_Y42L?rfn|VEZ)!SNHc~MQ;XBYo$KD@rg5HO<4}Gv8p<@$Ss0tzHDWll5qd6{
z`UID~v5H7FPc|NUgifQb3Vw&V(x<j^XFIvfF9-*HL|A5=O{^P;WVpJHW{Ue7^4NVu
zRfea<`gxX<JlJdrXaIsy7<6Rxc^D(h`W;lxht@d@d8(A8mJ(!L_(or-uRKF<<zoJa
zpJsSr0;-i?0?i(KB3^>l-_&&Eu;hNrhvsM4GGQ;OIjXZU|H&o((a3E7(b#iY|2G#z
zu@kC>*JkNuJ`kOTXuNfc`)Oc_>TT6a(-FawxkGtO-@h9KeIOsB`|N*>__0Mz+G?l<
z+uth2U1Kd$c(VIdtY=T(_^{p8(m`dpcVE~i*vF~$BDG~;k%W>v)<6GW*)6XRcLMzX
zv(SRTO&=#xS|m1pf-PhZp|=N`pvI|NpOix?c)w@09dm9w&6s*s81DR&VF^{L$ebVm
zp!Lzi_Z7$sMw_jA-#Fxh&AfM#74?A!Nqr#w-`9WXK;-@9VFu>Zg(^c5aCBo6LUt_=
z7eR;NDKIW!T8|`u6c=<eVVON8&Vwru$+Zt6PJ4h~E7cp#_A#YdZ8~XY6w`gvYvWc!
z0<Oe4I;8zR3H5duKYUYLNUp)3y}SK4u^{$tBu0&<(TG;|pjSK>-T*~jyFytzN>|74
zpyZw-P4SC|R$TnXPj-~u!;Ee(`Tnw8pv;mV8Jd4lTq`(;ZbmN=<dOIv8sR3aK>Y<6
z2K_X$)bfZg_7?9Dgt6eY-kHH#aBHbAfeXdsCR#h4*4HEX&nnc>#bp3qKb@qH@Zux(
zFBqK^$naL`xib%I%;@1Wqi7gEykRr%))GVo&9tQ7a32O#K)w6hcYpr12l%`~p6?8p
z_S<(tziqV~DooIOw=!(pk#g_?z;5#-HwcL(_ZiqQZUP(?%Gh++)-EoH!-jXs|1#oh
zD61@8u*FEox+k2-4WT|$K>yE&NrS_wpG7Ur_M$i1k<!iui;m<SZ-#|H#EP%tr?p(N
zK$f<%+uT*s+{F}^#1M1@h8Y2*Al{D+mUaVF`-34A+SeVZE22p{p0uG#X9p|fRn>kU
zoLX4RN!-N%%(Z-w%gMPurqf)F%{dA|&j~NCB(#@2VwwNSRD~H4mGTX-iO-JUNBxt?
z6-ebHv@g&qUS3pnO=8d!QUzQ4iRpIJ<H10D3^r>^0by^SMvlay@w6>&M67R~tR7K1
zW>9Xrwfd-Pb-&|*a2hFPjs^lfP<V#R@gg0~2i|JEBFlkNpg|>&{fMCF#~f-dSY1~1
z%bop!M2s?lj=p+XS~+O1lO5lR@F@U!&+T>zcl9SQURvc<%q6-N(yMjA`}YXqdwDBD
zpfFQg69^I>RYxwk_c=0tqbZLuD7WfgTp`Cc+ox@+I{!{(qZxMn5Vv{m>@=jK?!hLj
z5hf1hJpOE+(LnZOb|ea+f)|$?OcI&L{`z2iaS5z(Kfpmm%YzH(tKPflaQwqL&B62+
zoUS17T)*xclqNKE*k|_*Sz{lH*V6$=Zj{&av_~Zl!JiU>jy&Y?u&Tr*`cJLO86R)_
zjmm`U|3u}6EXAhaZnmGx;RhG0j4+UKL0-Cy<~J7?;u{q_S)Wj5;dafk!m0oxhy3D@
zEnU@{av=h;kll_{Ol<ECR9<*79}H~HGK$g#0{;ne)b$Z@dddXQ3ZD^{7co!bfnic6
z@^L0;DBd{C7c<OkzmfBS!L4@AbN;}P6bkvB-3Ph4Cpc)HIhgYl-cK>l4|C>IghO;H
zCZjeB_OFpr>bh^|=nAYO#1#VT;-9aF2G=+oW#zI5@WIMdA)@F*akgPpxxChiE%kC%
zXidw2yr<vvnM1<5qm4P}g@{GKZ!8S%IO%C|;{Q-S3HQd50mg+%4vWUX1QIaLWs;`P
zFJ1+62aW3ql@TdjNh<Z?E`_O00LotHTGGW%D2CO+1KIhHcnB9ANXmZ}1)%JBHgUex
zO$zNW3v_u&@Dfs(FAMC2KZKI!T@o&A9dX}dL-|uRSRJm66e5HYLZekNwqz~iWxWHv
zv`)QJ*4-WhJE5<l@#)Limg~ZFzN0aNF(Olb*d3~G`=W&Za%%kEfIJ=14JiA}KpxO(
zG;)9bu-I*jK$=L5!)V{xJ2#RMuuF!piPl6);%oc;1=|xJk4BJ@dJ1%`6yG%ovf=%-
z+%4_Ca%Iy0iz|R1rBdS;Jc{CPa&dOu6nricUZSL!6~Hasg#wRSx!~8kp#O}`peI&%
zmS|8*sNT?rXPDg<oWOVtgr^;w%JGV(TH9QtbVs3AnNJ_JXTHykh-Z^DQKH^BJ5V{}
zx`jA#k2N#r>!HErZ=?Lar$Ns=yQIcpSrqv*PF)V7uqgaPZDa&I?E|P@NfpeC+96fv
z!U<ovI25NuvICV4OaRT-z8tD@WL>lld;~s=MW8?X6`W$q;p*R8FjRMyWMhs>BU83y
z@HILQ@s&zLZa%hf;bw7(@x1==AD+t;lVZy%E6;uB{^Z9CTn5iK3yvCTVHU*to83U$
zhi0DmY^|&Aqd8|lL!12T3getSo;HP!sm$^FM)2?!uND1C1Pd~RcVwKj7QVL?|6(b3
zDnY+u_yka^-=nLIDV;+G=BDgn7qC98Qgp4FMSr$n{z<frU646VL;ijCHtIqMYhO<X
z9PKW(Rk@99c(G*@r@&k$L|Wv$J)JP*5E=F^RdBxpfi3R<KS030{CrtbcH0EFByh&o
zT9K%BUA<3-<TOj}jLyiv9IsElU1^9}CR?N!^jV2xJ4>t+G{uou;2=drqJ{f6yKl^p
zgVHX*RZqsBOu@lvzz%9Q-@m3VdpvON)|nYT$HE!`q-k{DKpuG(a>Etf_s@fG&<nvH
z(KvC03zd*yk+aB6KL%5mT_ry$2YTH<fRcUVJkI?-yfWIodDuW3^wrPY-&6fp_<PwL
z7BGVT*mMQ7w-0VV*x_GoJBI4tn#2|-Fg5izKz2>TfOf1+lZWHHbKlTL46fHaxYXEW
z3?BUljp7Mo1%X|N$6)HmV8hIU{QI}&*aE7vnV%V#FUEiq%rpN|c0=iJ==8>%2aqHx
z^gTIOh+0+PC9E%blvU?j6Y_6N?Zb|-rZm%;U#<|I`k;W>z@5nEt9d5$)TmO*)nxSW
z2Qj!@_GR|sN9haE-CIx9adNGLpKhYl<NDEVqA#C>(c9TV>+Rk&`CcMoGys{L#};&Q
zcT~8IKY9{E1*rEvItdlgVv2S-z{cL1Z|~n9PdRN@Oga|Pz4dq8*4)v9a%$C7a<$#D
z0z*u*y{hc9xhqv3br5`f08nv@aeUNH@CHmQuS7N$+(w~_yDp+OFS_OpXWVh)6LD3T
z+KU~e;JA2}*M2%VJ?=)iMwcKO6C0GQj5peRCU)jhY~0@cvM6<gVykWk7+A6ENV<NK
zBsMFRXvNnDA06ei;{s27NNJ7}fTLtsYA^6AVgc1he7~&HchFU2L!Q2t2@Xoxdrl|y
z{#`C9k}JvO=W3jlG}M8?dw!Z@UMAE?X#csbYwVT42M*ikb4UKpA1KJz4U-3q1pHc5
zkYIkm?yT@dy+ON)nPHD?Jp0QjErO`#1}W?F3}A!C|C(oN1!hwL_-^HT{f1;YZJ<fz
z&RrAP+Iq@nLV@5%H7t*PpTC~06eMe8>!6qYnSLB@AcimW&LylDYRXuh0OI)rmag3`
zE&S91?0o+VZoQzaw^nxsiaYw<Wo1+QXtWwTkn^U)B?oYBkKzAGV4p-!fs+v{iizm!
z6oN|kzQCLK?;O7L!LvSf3E{^4GY_OTugC;pcK=#z#n(`_DPR9;p;k{NGqyiIkX1zA
z$IGKfMmF8x(gig4W(-40!_m9C7Dn;bjyJO~<Y}6ad%-z+v~-uC-fkE8c2!!j2%jqA
zTjw<z%JF{NokRXF!R6`yu~Bobg+?P#5d%!m2ozfXH`sel)=m}M5Ibb7*yxe}XTij4
zKF}=tfKsDdZHrs_$gGMz0UY~l1`lV~DLG9FdS$i0nKUt`<|Wkqf$Om9Mk*7zZxBXI
zA(26yeWKs&?m0^$sng@*J`x?!l;?UeJ5|^ZHIc-s(2jz?ux-`$1PIJSUIGc4CbP|C
zN@0cu@d^HpzJ6w|7W)F$J-ei&S4d7tEPj7tT}^+4kJI++zMgmH?#M==KG-TkGN7Hc
z^^fNdq(;|vfar>aZXl~nhsP$sD`()syVOLzIwc9ylZLaE7FP6Oi#BN5o+j1KM)^(r
zv=2_6TE6@#i?;z7UV&8CLB^upX*heq{{BRLhYnAhv~1oIUXY#Vhhw@ll@hd=Npb^s
zM~eROjXGF&o{b4aE<iFyCh0L0JJe=gA~$exKHquTPk2#V^@0zM!-$+}>e@aF5QSBt
z1daO(;9?ue!Ij&P#aY=vhTUDcy~Z)4oUK+)3V0_HvR)$85i3_b1!@Sl?iE`}+5++x
zwj*t^k9Na*fAntxkinHpAv&P-q4SDX610J4g>p}LZB=m_`j!xoQpsN|>=7pFgfX)d
zLn4`6s$?ar!AVpR+W(Ap(r>~_Vc5U%zI+hY5va<8Cqm=`0<Kk|I~r~f9>X|j4V_tK
z_3|(vtAPLa_zz6~N{anM+D1O6mj2#vsUYuLTABJu6D+oJ61wr1HZ7C4!|?c)n6E7=
z&hop!e(oeCpi_pyu!WlI7p1=pk5mz*Uw(fjQl~cYGrvr{iI0bzQo^mt&v9xV?cXeM
zwvKxyA+kR&AGqrt=z>Ag$r*!Ene#a(%w?i=@p({NgA;IfzNG5-*$b1>3=<4__=8&=
z9(ma|t98jHM>$+)AeN`XnUf5)4In!GQ?Vx$QHZS|5PlXa4?geNr!gxo+*Q{~wNG)j
zSk)kPQfbL~1lzGn;{^OV8VFzDnw-kEJs^2Bde$?XEKSXEm^AcgozVc}1iHz1#rRBW
zS;;Q!VKb`%V%Q(Hyb}A$kk3+`r6gQ&Vy3@5B*|x%Fp=0?-E60kGZAm2lTI^&zna&!
zTmK#HPDp%uWRpgC2id(<fqR~DPqx>rfg%K6Gg(Z*=W0QT(xgf}WS}mZJar=LGE6%Z
zs>#2X4B#JnaFe8nFBi;PP-mBz4yRyUc3`WHX)kz#Ov)6NDt;MP?nEPUQvI__HUWYi
zl=QlWas+}6GmRJzSz|y-vwgmQeq#|XCQQh6RW$`Zu33;>FsXd)X+eiT7Caw{>vzUM
zLA!kC(&Mmnnr}+91z$E7F+L(D8dbFsI2>oq(}X=PleXO>$XU(s)Qzch2L0DYlnmL`
zq;!;8<k-ipF13fypi=I;l;qV`2D?}H1x;ymSBMz#6EU-#fQ#IZYw9BckJR1AUvB1B
zK8jku&LAjw&4Dv2ff_WGVHgwxXi&pC#X_;=co@Ez2IAT$4&w!vM6Rx+ppnV;Y+u4D
z#LJUtZjMLX`>8@s5ESGkMvwp~h*UKp-=fIQn3p3xGM1DeT@pLH0#+#}++!+`VZum%
zTTsaS!G|s$W;N95V}f(|3Q}x#2-MFLQ-oeWI(l95#KyuA1<_k&PrL(rmj5&SRKsN;
zWjm#^O6bv!;gJL89sF9WrXNt13D)Aws;N60j)aPiqzfX|y>3>OfM1O$QM9A*DjuaE
zIp1TMkyj%Ey2Uod*LGF~Jc5QvBI)=prw>NqAwOe{9X1)}P65X-+@8D2UH;@PF&sh0
z!Z@{1sI)b%gIbL2be}iGm&Wxg{cLA?cA5V(MN?{R?_gHTeFP!|%TM(bz#%!)Qk`B8
zusw`^rEHXuRC7;4G_OSKiFz_1wDWDkUfYj>_GqqB`lz4N#a1i}F1aYa--p=e2yWj0
z5jeb%{BC9Ph!Y1~;&RQ8{gU$dpiiMgYS!wX_coxw;Bz>`1f$BoRpJ$A?kR-7JkOba
z;n)(F<ohF(khIuBm(zXIOBh)XGE7t8Pj>%X=o3m(v#v+AnX_jO(`sbemUlAuoS%KG
zc7n%0K+5Kl{1G0{HHI_ygVws0dBzSv@(rdQ;!RFx(~qqKbXRqVL*;X_&<uxv$IG*r
z@pRbCWaJbvM=bQ-c07BFv&)_pm1xjKm}B5y=~zrz=>De{d31}u=^ie|b{4gW(lpNA
zV)(*s>6z(40eut2pcz=7;Ef^!87eZ5CRR5<K(D0JAv>pO<9sIf?JLk=jX9M^-8@81
zU9>Z3wn>M<MOO0l#b^GPWZS)T;)<uaePa?&i+#1X1p1Ixq-c1YlQ4V~N__fz_bRYR
znkodo@aP%xBb?0XP8&IJ>-JLAu#DWsyq&KW?>*QdfT`U(*OU+Vn`zaYk}HZ_i#YVh
zRP?#?oQ;c&D8D0iNuuPlIs=vgJ%)yf_qV~C(jvKDg^Q=&vR`9xCqR1lkrRpF4od8)
z;jjSC4p&O%QtS@$dtw;f5XP3JsJh#~>GKWBWJ_!Mfr=o*DI(k~uP>T`9&ZB`^rY+H
zoL0zu0g|mV$+B79oF`|VFP~+)durYMgGA#fB`|-`W5Lqd$JTysvu|t!4}xMtyd^lU
zY|qBnElj|@Hc#DA(2k*PxWdM=j`7gs8o>umwT0L?Kt_g5`yIr3lx*{;L~vA`r2gLt
zejXGOGx{C>K<HjD!2P4S;6Y~<1zF?O<}viic?RUBFV9m^$imars7I0S;TB5ao)0xs
zr{<6f5U)P4DD**bCI#P1IQ}b<F|4VhMujN15_oA(vR>tww)~8d^gRLgv3eZX>rU#+
z84d>IXUJ^tU>t>~#Dv%G_xbi-yTDS9>+8}R{fZ(r2c#)OUlO3;x+XjnU!Zk!VEX-7
z{V|-ifW8D}O>|d?Ksh7gHWUz#sDz*BOa~Sp#F<A{e_cUF{LvEx{r72?ZLlbnRnL7t
ze}h|fYw@eIrr7A+q4H1=mSp-&KEW}$$HU8x`<6j%dVbM5wY<8R+|vQ3$?1a+VFK9C
zKXwh$+3|u|$&7YoWfk&&L6MRt%NCRbuaUlG&V~MR4jwW-?G23cU6$J|l&qy4$Bp*A
z;FB*(j2)g_dM8N6yf<-zD;G9S<mj1YdCD6Kh7Z#*U+eBDLR0wAnzv$Ztn58opiqM9
z<gC0S2R2muSD>I$9AJnE5})B9zrixFg)kI`GFYQSQz>xx%i9g?#Iw-r&GeEI9l^QM
z(8T1z@h*K}h6Mu2DV4)fj%k$uWiJ=oy7BjHbF-i#G<F_xM+sUsRj|NU)VuH(K?s(R
zBtLIw2Dnvt=w79_mfJSmM&8ST>Ny5eP$og_Ru%Bg8rqQUF_o;xB&Vi^J_2D(SE(}L
z7}cmFF`ZzZTDr&yO9U{`_ZC70QnbE6zQ3K%zdm*hoJDPj!K8`@7`m+Y)?UI@5={b^
z{*=kS5VvRId+RYK8D#O<LZwT!42#|w-*`>mAEJr*q<5;I5VsTj+{D`)q}oJZ`fNj;
zj8_2P6#@-xzLPN2M!nz^cYB=%uzj{~GH0IE;?-d3jL@lj+~6{AXT)Ns;jIn88g-2;
zzwH!vFC=wcG}x=Ix=wC)UB~t1XJwRc04Zt&Mx141#H63<!^vVaj?-Xm2>U~A-1)O{
zQ$!_YZzt3jHMDH-KeC!RDRl(3)Hrg8#;X9vJX)h=ESoLlL&GDD^Mh=7`<3>-yQC8K
zVlwZmL9XqRAif&KKDN-87bbpx|0QP&JJ68)L9SSEcEgpV{3mL9HSC7vzpR9ZaC=k~
z``IHv`M>Y`8RsP1vw5KqS_<F;V;i*^+>Jj~P!CAL7Uy9Jdv~Y?l<hapeWjb#2i05c
zUuWArVb0GB7=yK<I`N`m^{O-47@Eifd9@__R888f{Iha^pO4V^FMF`p5S0|7L?pF4
z8c2co+WVJULdE2UoT~Vgn5pL7fxEe2WlGa-K}0>6YW*cprY{*7p51uD-3|`jawk4{
z;a2eCz-%5y!8>X~$b}H;ENK(VsAAt#0!NNhkT{viF#7XL>Tc!j*SR!Xpxx@hwH^aD
zDcP%3)qa46)4|K%ptmi4t+>n+0TU%+pjgVTgB=Xoky3oHK%|T*bz3hih0&1h=jVdI
zv?~YW@iiHIHjBaCH;d*=SF#SK?%GnOPi6~MxK$Fg{TM_N1EI~#5k+~XrkwpiK6k!v
zu^FEzWm~f~ehyZhXx3-OZ)#@qv}|zwS7@fBqg9&(?BFZs|0Qh=uF04df7%k^(^%ly
zV!I@DZ8!m@05}0~R^cb~(2)swAU%F$B>5{g&v39mVwJ(%KsCUF66f8xi-xo<&%4H)
zk}a393{6)Xrk&L48$*^RUj66Zw53x-7IF|FH{q(c_&hbO?@felviW{;Mm_(hSL5-n
zvVZdE;~(H&_R&?gTW2Ra`ejy`%9y2G91>)wjiW8FMuIZ00xWY+xiRf|MRQh>Y&CM^
zTCLHE;UPYVG}3&DyWnNj<W(oHg11db@Pvh{@h1h_tswBq0t&SoX!TWaMwi%=HSD(k
zFN?^UjrVr5l9Ht)Ot;k@@Nhb`P;@$Xq=b%KWq`xrl*myq3huJZe^{P`x_d53XIl&d
z4uj{CkR2?_p?+vLal$Gs(!hz|TTFAx`no*bc}RBDbObo_Sk@u0rdp}41QL!t0JItC
z<anYR{0$#&LH2A)CHJ*^b{>UZ_Q4kVUw9(QlMLr=jDAsW55?aNwx_$yS#JG*Yzdl~
z+{DIEml@0T!!$K+;+}DeYA4>2+!qj-T?wO$f^={;&V+do+j6EVE!w4bi#nY15Wpn|
z^U+g0dt<7tm9q=2?Yq?Ek=|CnT`Ft67^VZRj=eJO>hmTcLHr&7+>7sOYt;Cw-5-Ec
zy94bOYn3CpEFN)dK2wiRAw`2_yz(sLwD%zoGr&%Kehv%6*Cvagy|VH;gjt9qS8uif
zXxKR$9K1an1~B?>0o+7&bA`W6BNzJ=c5VcYC~&01PyUb9L8`pSs~%>5ZNE=~Y$wrO
zZ+rZLbIt0Amoz&u{vEudD?c&t4g6|l=8sxR-Y+N0@<aqfkGBq_{eUa;3aGilPw83Y
zRiW2T(qq3y;2S;^#Di`btRz&x%|yap2uk322dpRc>S+^9w?Zkd8xkD(5Q18v9*DeI
zo2Iol!C3-8cfVEt35J{o!p*nN_z~vk1(>6JnN>%@%m|ajbWlv;z(K3}P?l;t6;KEe
zqJ2G^=og6M^lpc6d$`JsFIcUkI$aFrpWrA1XsU~L*CR#dFr%Y>hi3PAcUp@&+oJB4
zF^`|K8S+;n(TM%7c3sG_a8Eb4sBB{FF2Sd7vs(Wbs3Ql1mUYi*1smGG$w*6mfOt25
z=Me^X3LyECC%t2<i<2F;ZSS^_05ZQ_Yhj@euk4AY;S`=sWA|5#?p?AkPPW!30Jffw
zzDx#;79aGBINkPA?p|EZs(oeX-@}pPuX8sx`4t{dqV!|iSz;~AFt>`-(DnxvppIlZ
zE{X^?I==9g;kIw9`3V^h#h_Tgf*Uz*Jxa-gE7aU^1#R!V8WCs@wZp0mMIe822d%NB
zUFr?RO$c5U_p4aag-c1TDEj@WBPbn*&4K`6^QYnF#PnCcPZB=Q#t++#X<vOk_F`#=
zO@|?G%A$;Sgw=8Zd%69sl<(h`7P3nmodk%SFF&-OcH|<^p%a+}bd7+ws%pCAj(qJd
zkdk|X7QY+QODw<P_^$6iag2;%US9aLbH}e+skVR0jwCAzB+5yFJ^Wn0q+C|)53Q25
z(;y?5zP&0JcwdaSojR5B77=<rijlZ*1!$jRF+usHulnPh2^1=q4gN3PVvK_Wv`A?&
z{I&_IHd^PQw*%xDNi%L;PX)#VJ85g#4sW;XhmUk!2^K8<p%6SJ7h|}37gRKn0vN2W
z>ORnggbj*8!})CP0MLIt&e#&jR*GK0n7kwijTcsH&@)_*0uDV{kQ0b9uWs^^wq0cY
zYs*{NmK74aH+FNL4#?fr05<2V3h$qZ?d&%&;>LxA0B-zs^X`Pql(n#_<Waz?khkrE
zD?g>sW}c@AJoO>@n4<#c__CbjB$1l|KPg(s&Lpl%TaX8i67vQ4JbDfp`8<Vd14kA}
zbnGMZ1_C@D8?C;Hm2dNE|Ks2p@>ZBle~i;hhr?5q2tnweG%&VdxP+Av&Gs$e8s~Pw
zo7Jx4{TfDBhqrnAQL<ABB#WA4vAXgsZ|NnXV>2oXj}eU@+U?xkSD@nqA~c2EXwB=i
z8VMsT<KrQw5dP+3Vpkw|Q+K`Dqe<qLyVA?-JL&QTVS->>w)>6H_$?94a}fRN;ez~|
z5D>np_Srh1kP!kdpBpgk+?F>dkaO@^z`Shb#2@tcR)uM`c6uW5aOTr|7WEN?QG9<i
zwA)4t-V#|yNh{0$|JN7%hQ?<D7?K?apSY*OtX1Py%fc~mKGU?!d3_k2#2JvboFXd<
z@uI{L!{txo3Hch9nqlzZ&uhc)`kQM?QlV`&9H=dR<L}7Wuo#CsGgx!#hhW)qMkT|)
zV(900U)TaIW3qgK-)~QRPmfB*nBVqzyf)CsU?ANtqfGp67H~UTZ0>?~=PU(s9W#))
z>77V@uRBq`ft*I%f8H3_192C0dp$U3fBK9{Z=Xe5<`Gu7;q-4ZkHd{j7No@MwNF~e
z2nU9w%Z6mN7}nA&F70SlZt*Mbag+J$;o3^Rfx7Hh9v<%lkPRvLUq1qyD5dGt?=?FW
zzId1C;rPL79&Uzqjt5%V<A7QX!(QcZE_=V8`e$|DTQK8h95n0A@htchxUccaW3B#H
z%OFVVwzNBXz^#81t`-lMza4oZH`%UF|MMq0)U3@2(g)c4r8BWz*f%0J>{N|L9#VDq
z6Wv~xf5D(^N7(=gfUElR<BB{HN9O*6`WF8y&sFS#Ou9Fj{~#gcH!&VtVIC@B<eb;n
zXy-D5+|3uu;Mh>l(Ty_;WcTz49t0v!9<*G9aC^$+8l%m6G@;gKq8kS?LUuJNDiS5G
z&^{DuhUFcyV`W(A<^2H@+Th->rfSw(3PA5KK!G&BBkPFB1nj7SgE7NR7Du6wFtZMo
z0#o=I3Nrs;7!c`A=ji50QyoH5HLs?b(FWR?gg(X6B|IFYP=7tnXckw=M!5`Iuzt~)
z{A=db(n$9@Tb23*JdE?6A1}}J2%Uk$&R0BZQBmMCR#g)8MlU4Mfo5nvNU@m?lx7hV
z^W(XDO91r~b4cJkl>55S#V<QQzUK@v3GZ!1^dhQr*(sxec0A?+RxOltXSPCLS+?${
z5=BiQci*m@O?3CM+o8wS?nBPD-h#=_(!V~yE@&RJ=50a)oHAa3wRXNrd7I@TA7I00
zz)DmQeWvi$dW^JROzTgWq+?HuMSD2*Xl-3BJb^_?i$}De;en6+D;cA1fsLj*6FZ0Y
zNkx|B#}<xdg>t_m-lJV)+ya0`AZ>UR;5_{BbJ*fA*+uTAh#a)4Eaz>Dv6;g@YJ(h~
z0<3Kw7fJQzqL371PqqqT1xbCkn+h5)J8lXhdi8CR9NP_~+yJX2Qg0IG0Lh8}XWRwp
zj~^23a_8$^_S2f@p9MAe8h3WufD+qXfU+YQ%TJxRz`qyu^z8z7O`z%E$RtrocEM$d
zW}v2&v}f`ee5QlgY=lU)XU>nw+35K3RfUTMV0}l7*V0JoKM6@#eE9_i@Y#5TS7Rpa
zIPdg=O6c+axmM^|S!(|;gla$hcV-{{f{@LcX*Q;xu@KMqF@0P2O{JO0zQmX06kQ?|
zwsiUF{`42~h2p<I7jpjn*bjs}ptat|f$t<FvsPH0I&=_sx1y8t2LxgKLr~jh;X#v*
z6A>@#g(NFgz8LfVX98{r8fAxIuHUqRLsIml*9P5k4rQ#ApjH9D>RqZMI;cW=?03;w
zl0C%=N3=CI`OGqY%Q#De>FJC_pW}XvQY(pF#MWrg4~x;X-A(qtORw^;xB)>dweeD!
zDsLhJjY+PPWc)~HuygHwjDfjp%fpfyZjQb_<|^B5m2%Tdte#J1yEjB%23;^9+?9u8
zH}>Db{VA3YDFj00BctMSj#{&#^RwiF%MMc*l3rV=(8hr<De-)G-#_;oBP&wGUw@PH
z)F6(;njvJE-^yuCJOmBfUuH|I2!ExyUY}IKq#3G~D@@)Ko}9(+O|7R>kg%xL?Fax>
zkTKo)HA0pA(?odFepg%l#|*MEb;YF`G2W*9Jx(t#mb*`o8meuhk7qVabHk`yhnb2K
z87GL}=1oD;BGdbRR|?cwi*M}p_Jw?X503q7UMh^<0WOg+9UVz^ft8Nd3UrwBz^aR9
zZ0#0ZUT^~`|4q&<2k6;x)bA^`r=5$jK8X*6gbzPfiCH@UZ<W<Ds-bv27^_=e##9f<
z76~g@mg;2RH7oe%Nx?Bxb$;&K5qFjiI6(f~z#oKEA5#;O91<kAf1DYdVZ9{Xbr$gY
zPl2D4Fc-B`3bNf{T32w&$%3I<$+{>)1<jnmsjCry)D(*cmk7}(ax(jlbFPmEd3r5>
zWnf@1&C9`*uhEb%hmZDdFWmY0v<sADr|&1p(S^+uhS0*CNFfTF_MoohY!LzWzF#MR
zSy*ua!V(jSub7W)PyCZ%2Ya+4s!Wx=N=ZI_LU;RaEw*mdI~rna^EeXMeeDTg&SYK6
zlw~L1x)?7~N0{8rD;;lFlc85wfudDFYX5tL7xbNzY;U>!TXp3$Ft7Z&Q;1f1;@8`u
zT8sb*{ClZBeQ}A?N5@zRr4Hu$pdaQj0wLkK0CQDd{&6|cZkfJO=o#8)%MOxcIA9v6
zVGe^5=h}n2(D=lhH1<X+%l8P@BgOx>7yUC3yMIFrhFURn;YXqx7x+Hwr+)tVINxpa
zUhg~vlq(93`o0}VvK%KZ(m5dY6VSStj0ut4M=)Nk9o-0VF0;(TzBMi~gM4-+6rzW|
zamy67ckdOFJ9ni;G-RX4#%OUs^ej<mVbb$|7A}$&ko6GHej1HMSBUwz%tlQcc3h5*
z7#wczMJ%!LvJerxt@hZ80WnN3CvEh(_x8m@R#%k7IP^Hm;^&Br`jjvr%)@tipU6hu
zYrCy$r7}GA^9bnXtFm7K`Y@H@0Y___mIvH?aSvLDd@eFOKuWcNw+l^&%D}!L;h6ZT
z(e=NgCQO$Lpp$TCDg*7uo8_o;DV_1v5FQDHoi_xPP#5r|1Vw`o=<<xsFgHP2R(C-X
zS#cuVeA8XqdN;E%ODnU|&WhbRC7^xSXS8t({$20%9=Vy{L(u_mOHER$`I|!nB6-8k
z`@hQ)c7cmm!t=3L<v8O-2+H5sdzzvn&%!6-dgtJ=nRF&j>I@IA!yWE4IUwnZ)NM8l
z9Z~do7Cv(4m(<N|ewh&XR2v>viy&+NN7bM>rdgc=O9tDHeET!ZZ10=An7q%#ZSkA|
z)!~MD3lwM8b8zi&88N3LCW1xwwC?WybbYyHaWg7QKcAuAAtI(;VW=?-K*2(97eg3I
zK)lS7SD69S;WS-y1llXd8kp9)47Gn=(VFuVfps~t<w({6g*Jd(>WF`ZMZm`Lw9ik}
z4ilAtMX9(Jb~%Hm{*+UEx4HB~LqEd}_hvVe(BOv+FV=4cZ<w``ho#g#>VD;&FWK%D
zJwa7<fj#OdU6zO)V$7u!#vD4B%TJ!>5X3bORH*Y4DqxbG{PzrHcWes;{uHi%F}aeo
zpkxf7nl~fo0$V2=F}KxoBksch<b$VEDW6nw)Lo_4g;b87M%#&gy>Ja~>s|MW@gpq`
z0qD+970O|_Y%@0CpHMesjH9<t4@j-LM3|~8E{^V`Q4vCU9wH5jdxGZDQqT`3=VVN`
z_LNU?Lx(=hG9|)Vm1SPPB)C8%qp0rUBIeDc&~orI^R-f3uCR5Iz3xpz9TE?$8)xSL
z>wQ~j9L=}OJjsakxG_>+1=u)TUPCnz#!vYJMZl#x$d>Cp4Wv?Bh`DPI?B>(T)1(-v
zzGe8JBFgJNl}oXGF9|VdAv1Y(j-;bXpMH=7j%Uv)cE3M;(7k-qSJrvcoI5E~1n<&)
zZ_32cTqg5elu=KtWq&m1g3hilN^%PX3ZO1u|7En4<hg{oi-F27vI(Cf*r(YzL`4c*
z|4>|J^^E>d+Y@7KTasH3j)$Wa#+c<_Q0LN<J43cQI30)W;FnRs*ode}s;bI8k4n|j
zGyycb%nPb7l?(3xNb006nIV(K2@%k$$)8Xymb}vCu%^918^kMda7kVk{cg5N4zsmU
z^vl~_GK|A|u~U%i+ego2y|Zb8^T8`JG}o|2NeqCc<ta_}2Ap<1Is>8v?x$bY^@Q%g
z-g(DA|1{{h5?1-WdT)IX_|_9afWmDy&^d;ftW9>|4`UfU3CRK3ecOr{I9fZ4j8$C-
zWMPm}P)A8tZHenOuoxsKReQ|3m=|OOqWOrA!W{Xke2olpKBC6<zH--;3UrAlh4Tcu
zl}$n4`D2nttd63j4Z^n*VP2f+M#Dy>qa=i-!m3P-2JR~QpVT!6=;hV0Vh3l`7x^MD
ztNeKK9i#G<7QvxCPDuHvJ|xa+;Lzw9Nmpq|9ksf#Kg&$3f4rH(#+N+a1<3GV0O4F`
zT$&TcM6^IohMVm?kFuer4l|5R!0hRdv*O+vaS9XZ3)gz5`az;J7?`1lfh>A@-HJMn
zmmaYwZtegZxt7K|L-$01_$8hPM7CLnUt&RexROms`q-9QzoQ_^;&m~GrQ5`IHDt9*
zRt-Jww@h1yK8f5Qa?#?%0NlK8ZaW!L7XX`if`{cUO=$`|jkuD_ywuzkd)I|gbcJ(p
zN5sZl2eX|zjv^rfQiEsjNmH)kEM8!=;E{LD;TEBWcVWlrX$uT1Q_(Q(1Q+)D^p6_L
zfQnz{nH6H|-Wr!#X0O8CdQ&an9H6rDnlK=bVCA@+pQdKVNo$3+naDIwmH}YLRl4$$
z&GxDLqFuLSD;n<uiJ>PMb39Yh7_uZv7QemNQg%ZF-Srpr?`Egd1|~UOValp1TMxbv
zmnx<Y-=|YsA~j#e!7^@SKQtg^{yoq04Khmi@Wj==PKY;ka<%j~8GW4s<+5_>$Q!h@
z&*AKBzUL<_qq7<>6QZ4g<gt1+9JaKyf8q`lyi?#G#CEek_voZJ-hTu7$*A0#tPL*_
z!!AWoH-j<$K5fpXN^noaj|{^*c;8srwEErTx9sSQ{?%uExBV+Tgze0^y6;gDtvFcW
zx?5$T`Xhqa@VEqFG9OH-hPv=d8MP9-u!l}DH|Z%UBe6@^2tFsb2eY*zcV&h23gmO9
z;RJ!qn3C<x%XLJUaS<(cuGcD{7_lMH3Gz|nP(DpR^Q@$cBT5WI`kri_c-5F2^%Qe8
zxA@_V!4C?f`sc!bnL$^;B^u_rsrw#=Wd~Y%qG!i5eNn7<ksnk3(&Y8T9pOMxN7D&h
zOeKljD^03-qE0EC{9_7QF-G054#@~9R<9}IC5>E!qj>;%%<gjnitC~(OdLjQbW9J=
zws4)HSPf8o<D|kRv`c%nJri4r&}7)p0vM_-aXTrZ5?*~%u=q)g??9$h#B<g-<DsJo
z$1D~OuQ$5b*JJAq?pkIa)E6@mBO@#{9Rry!3bb+9q|LrapJ+$|J}BC}Bj#(b$SX+F
zAhD9EEUPbdMm!5-tl4W@hSvH~T^`l15xh&RnI$|QD+>b$H_Ibk&EQif1Arf@bDqZL
z<)L8sRLFfrEmTdu1w+jX=L508zz=EZY7c7E9=<|m2gwsd$PLqL!?fEpR_x<{4`#D9
z&J<WT3jv2eFiql0zSE|{VFZvonCOxH&sU}s4r0H&ELk8jJ#AVj18{Gmvt)nr9y-5(
z(FJ>?29+^#*yiavklSoVJ_6di|5!5d3vv)#Vd@vY!ix?yjDb|zBp*q)j1`FiP1u8Z
zfL_exAMYlKxFJ=g$g%Pg+6%{Wpi~?Y$PQ~-EQLkC8}~A*0GXwMY}TOB9hFf?8a_~%
zglNQ1TPB(+K`k(%V=IAFVTnL&;f!Tz12CgtP}C*<AN~zJf}*!Zj}f8TBpQ!>#4_9E
zJw|*kQ=c<!-Gh9&Q@d3GY;m!nALIs#-`{w4GJ3CaL=3~QmPc^mbBS+A6iU{vxRc&Z
z!~)5c?P#V#ik>BVEb$3=kCnKHPgaeq5}P2chYuL8X}0uiycd0IX|ep#OQab>C+%Ns
zs?oeh_;&4@%sRZ%%94p_8vd*u(aEhR$f~)rGf?rSUazVIUQ`L}&stP^{q-#U^-9=a
z1a#5GRrPrvcW4L$^eNkO$_Rh3_b1kRnB$w@tK#dO`g#}gKq=cHLW!e(!W{&p2nHb<
zX9O5c31j#ag|;v!vuMIOQVoozzy+1T!AiZ;l{%&Wg+)R{9(5N$Poh4FNZi(T`f9lY
zeJogn3_T0DEJ@(W;7D<=1yiiWrb)@z7Y(=zG`q*ufB)Tnx52sMG?B4R9B84Eb>cNY
zn{N&Oday`NN6>yR_IFk*PWusoQdV3@Vx~Ui#Y&AA)Nl=R&UKaVWrKl%SlFzHsXYa-
z&bp}GF)@dBO8{hgJxbV30<FSd2zo8~!w-=!qfh9)>9$r!?>yZcoadlY{i5=LrY;hq
zvCrKuv5~9mc>e-v1hdqZqSHRJX$clYp{-_O^jCP2yG`%(Mi_$npk0&bttNd>Et|Bl
zZi*2+kVrU8(~czFEx(UMc3X9Pc`O6~>Gzhgfuf|QZ9Q*F2dvXb4M`$$)Uw{8wuGDN
z+3ibQN<mY1d(I6AG@|c2MOD>9hWQLEw`99O57TsoH0TVoNfb1Qik|-AMgq2&#!6xB
zndnp_R&l02w!z5uVx3Ms9i8wdvD`b_vJevSJtYg<aEJjc4olsJ(?w7f-EeM*Ks_`m
z4K|q;9vB2eFwK0?m@p*N-MBEWqdW&K&(fKAZ=LdxV^Lhyod3;)D`@6MR*4DPvBs0o
ze+jh0PdOpm{+WE-5#M>n1bmY+hZsHWo81i``0#Xx*`CWXTP-_2E;&@|H}=X1+gsq`
z-K-@Ub=&ojrp(?TqNq1@dw7)~ddWJi)v4hfHaDQ7t!1;Cr&F7c<E?pJCrf~ZfL<-G
z?)nN<qbLu?nmWOh%#fckLW(Cq4F(mC?WuEd`-AG2#Fsb7o*Vp)SC8{J-ji2WakEg0
zj=cO4fOsWq<@9;dB%9Wjm!E`zOLdJuUH5>poQ-I5y0tN5b1DHQEx99{BzAf*v-k`3
zFY@+Y?nV3L3ZbH!$o99ZjTqml)?9>UeUUQpx!Z6`t4n)RCuDh1URZ{(dUlbop8sA^
zgZ#rG-^e8v$ZEAr4sNDRI6jD225+T=sCBZ%jK;oGKmTN`_D1znKge|zu|!Z#K`B|6
zAEo0y30K~K)xOT%@W0qi>kA{MQ2wPMUu2qjXj+(h;&IJNP;-6+NLw#}<9TdI-q{Zt
zc54#Bss3r<swM<AcG<*9QPQOKlk*aw*}MHU_oq@!QEk|(3j$$({-?3Ti1=tfB&Ly-
zoO5unckp3P{eR~x3tKFNFaQ?s33F?$^&E~IavqhcVo^F;q9w+oi?f#S(a+{g8I|T3
zjWkGRn48&ziXUwv^}M5DKCjGjAIA>Kkm6gE?ro7`IjZP<P&L&$2zpmWO*MvPcM^3X
z+01=G<4CzJIX~qbnsMHLh#=XBfd4jOZy%xC1>HuvrpR`{(7HM1$b04laK=N!*#4O`
z6d+$l33@`9diJ<Y0H!LN5G~Q%shKtM2*p{@W1h9Ez;9d%YI|QJd2w=8BVM}{Bu<*u
zl~g4O+_<I;XiQPKWgCivWKL~O4-C%#O2$T8DTe<>VUyW#J_q?jfAK}XR>oA}_7m*)
zAGE5O_9$c0R0bTWJs|&+yQUv}t;^YIe!rUu(H;Kz6wPu!rbv41cIfn(vaS`0r^w#F
zsMLC<Arprk)&p(~?z-VVs311hlXW^;b_gTu1gl2=wJEXmf26!g5&0u-Gy3Dei@|Pd
z0*ZNCDvi2_$pS^>susdNAoP)Q$w7waD8eur*NavLK-RFtCtvA}!j1;vX6|?!X~G6A
zk;ARpk^b7*_Nn{YX+)IP>Y~e}Kd-60U_NXa?n~<?Z+kTDL&@GW?N!dzYUqh){1Z;T
z-j(63iUZ0&i`3r(FmD#lNW$X-9(@u8)~5InWgJk(mya<9W3EF@#yubZdr|{DC{i}B
z2ayqqy&vMZVOoI7xoie}y+i=EQ0~Ye!dM>3`aj4{?pT^N1tD-4cZut<FdXEfd1-X{
z2v*S7X)0twMFcwk@`UjjSjku9cB@i;db1f{_l`pv#eKp0Xg&Y&JCBgQJ4Tk*@=*T@
zKoD3nXq1!F2(N0v%o({}%u@$4)~vAVF0a!E3SBR<kQu3P-|9issZM$c;O5LN;q`1P
zuj@$@73NlzKVxS`_;cZ7sd`x04l_IEynl&11#SvTo4%E~s64criGOX$fwyL<DHP~q
zk{1(MIdZAoFct;D+1}tLyg%i;rd^#CPU7l2?f`!0jIAUGONIMyYWwRaSIwBK>R5xP
z0N{5ty2Y@^{%@qf2uv8k>Bc+HV9wq2E_1Heapy|8kC_@E;Z8+wNGg`(5v@iYE)yEe
z<eui~ZhTMR77wf3xlR6cuQC1a$}AR(p6g=Vren0n&W`ILZsH!Pzu1cOwIOCHFS$V2
zt>^8WVak;m-O6+e!Sv)r+#iqx@d|nPDqCO8wNttoo%<F;{5vJ^thq6FH{OZH2>U_p
z$xLZ-qE2EHa}vHL2@hh@6qLl&N40ycKg1XglP~91Qq(8wfPqNzXLx8;YGO`ZEy2UJ
zsggHR8;QnnaK8zwq=#z{7bVQ4^TNlzQ#$^1lbLo{JX%vq6_ltW)Fk??W~7Q_#k0|#
zgZf9yc<!70(`M?0wI0eLPaE`Y&D49Zbwo%XqpTEVFSaE}I#auBMlDMg^-_-*1o(Vj
z>ZBY8(jAbLG!924eR&*Rmvz99mXi<qff#LS(t3ZE{H{09Mv9xt4QE^#Id6Ki-XxOk
zd>nRAu&TQlkPcFVcyi)D_|g;HRUHm!VF(ahK-R8>hKYK*aYEmFh6#>AUP_x)7+ey_
zxx@~(u93X`u=sTGCw59mr{OT}#tmP^N5PqaT%22xMDAO9mn_F`bPG{g^!s{n&gi+0
z!faJvUbYo_;hJFnndQ)0a=^3A5hnkOla6a<i#mwRM@`OgudwB6w!(_P_p)qn+Fd&t
zjmuS}Y1#X;1ry|$qiqJ^5p_b%au<0k&P>6lOx7^u@>Uz1a0_!n_Ezy*g5Bk_J@HBz
zex>>eXmOWF2d@#ud_FWa-<vx#YY4iUVF1lxg(ZyK@tpPS%fe7g+&>yohtJsf<f=_e
zth|@>u(MTRMhxv3=(3U?PxOc(N43HY1tO=@Ae8nn1SFw1qCC!*uFcZyJxd!47b>tb
z5+<(uj7EQ;vH{<55*(LDn`w0j6-&V{%aQm?`kz^snaQL1O4V~rbexXXwU(G4Cj`AA
z6?j56==(#&mv@-&BLON}L9m@(*k-=K;f$J-42;VE5pm9Wh81&BUPP4F`u1Jp+^G%1
z5}dx&jPtNksgEh(=gLd{z`yxb)YZVhe7COVy_uOu=ix%46Qs#REYFx=@Ya8TAiAQ|
z?B;h^pN}#1(Ui&Shk`R$*Gm<6Wl=yuxq6yWpLs#ycwQQL$`4`i{p(5l#J<HGeVROB
z3Q2=Y+6Uqo9YL+e_N<;l|5MKZD-y%9my$Q420LO?wJaWRaGq$t_||y&?H*Q5AxhuG
zP-S%}_;-?>Edfj*Ki#ppw~97SepeY`)J%V(#tG_FJUDs(I0SRJ^G!#yavTzwEmi<M
zsy4RlR`jKDA(0?$4O@^0Mz;rVE5DMdlEVN{l2QU3$*GOKG$!!oFrU^Lat-F)sGj-4
zfW<ht4B)R}uct!D<^UsNRnQDPZ_MYB)|gMk-8q?SgKgTi{H{2=Bz}CN!}<rP3b|z}
z#d_mUB)E)8vZ3Z7W#x8Rdo1sE{RrBYqN~*Fe-T>D8`3T1fIc{85Tyu2qsvJmL79iv
z{DrV$1Sk<_GYU(`Xl(~o0xIS`H!$mAkdXByZZBil@CEao@>D;vBX<{dPOaqBE08>*
zM(<o-{5scl5TDdZ0{bdM-UzW}sV!p{?!QW|c!JzHk`0xX(6R*vXq5HF{UW*`NXc7`
z5$@{v$Gm)uW^Lu~?b7A>hrcYW;&$46QgQIi*l~`BI;`)0Wsb=)O3&vC>0n8|BIpU0
zrM{lOnX8J(=MG2wboV$SqOBZm{dlFG>70yaW(%Do^X$w^cbsnC5#ViyNLZy7u^d(h
zvr|@;$|PBr;8Y3PMp(>K8NG!6a$LkC;7G<nce%ZfWL)?046>{C%>ob&7}|Lr>E`xu
z;e^fRoo^?WFNJ{sL%B<{L10I+ell;H;YS(vJzZv7XRX~lhe2);Rvh|nVvivc>`NYO
zIx#Y&GPp0>Oew07W3pnOPhjHqd)9#ToG?lmQ}Y6s{@1XCoI1Du1zB<FpLe(zP+}2q
z@1}GZBsVYUc*Bn3?Zg*&cg{3=<Jmr{w`K}%kuQrQWS^G<E@c1=9>>}Rak9&U@sR~x
znjIdq?quS{Ledj$yI?LH6d;KCnN1aS(p0n(`#N;HNCwHyldcph7mSXjVOgwyIL-W|
ztO=&oLtqE=%{bR7?_oU#A%^`{Kt?s7ir(k_p+R({7VC^WHLLk=Bb5G=9<)POtEqjR
zh{%l;v4Oez<P#}-QAOH95N01*5Z*cP-JY3`JviVN$6BM3{<-EpH_4aG)151ZTrH9v
zftgv1`U~aS8S9vR=XBk{A*K?Ocdy00aN?qWbV_q;eoZWGn7T=Z)#o@_s_a+oWogr+
zfO%s$8xwx3kZ*hAfYB*%ZsqeV>;gfp2!H!eH))-d{)e=qRHmUtECe<pT0>~nsePHP
zjLj>WR&4!7v-2`dy;ImDhoLM^lzEF9r5FbB!u2nz*tCaDsB_OJ0me1LWI5c6XzOXN
zZb9Z;Rk>0kBC%6Y>8VWal#mc@p>(LtM*Zj{7;Y{ACB5@U)^>}gx$n@uZ#2f&3{TY?
zqz_)J%KdkG|M6+m7N1%>^W86XtXmDbG`$r)yAlZ58wVJN1G(}v4|(s@wOC*W3kE<;
zq4rH-*IRl9Vx>zRsUYv+Und1$MgKg$d%j-sl#!q4%)G;2+H7SPdQf%4fv@_FTnHVm
z@3Fez0L$y^Ik?k#%EZvJ&%F<tyfg{GUtj)a0b28gcQ-22`S42xQ0RGmAM*;y&|r0d
zi|!-0!+8IE^dI8X9Y}#=3oV(l)4z?5^m7C$iAV=_PUl7aS`G^ai3kc;V6jfOOAj*(
zMqdz0lx?+h`1=e#(<eCvPea7}+N=2vsl{R`?PEQ;K1wQ+dzJEin~@LkS!@p=8T51x
zY*n!CXul@ZfG>gg_vlly$}eO{c)Q*h0K$byFUBGVkA-`pJz!25Z62Ltg48wD)R1fc
z*DHiYWBdx&Rwv>smFwxk)zxMFpaDx|TK8LoBhqU+>B5|o;>a+Fhp1pvPyWS$Dxiod
zv2-i|*yt(&2@#YfWN#UlF43ms*H{11Bly{9@x5^DI2oeg)yn!JHm*rTltSqK%=lD8
zF3d;1Kz#WGnG8*j2vf`a$k<^2ZnYU)3xo42dOMS21sEzTHnV|zCF!pbe0kS(!2A`7
zw0QA00t{7GWg0@kc=BUjD$Repya@>e9$7|E;plfc&o5L$03tf922{bl573h|gUu$|
z1v!U29e>SaN2i}wqP+(ILj46`Z*5=~yr{fEnbecJMIF?%)spiz--D-uB{*(dtX_tP
zZcK`aGQt`eK({8j6XPvmn?_SB#nL{E?VoVw2$4iX<MF0L@~<Y9b}A@}-{{q3`S!wR
zj&89dHoZiBsq5xuY^<%QV6I)t)U=9|k4jF_^!Q5Ozu20v0<?*?j9%^dzd}p+mB!^`
z>ZD0p3BiCahqK%;;{B$?5!m@I!EtrMIG0yAKWh|S)nJ(ZUXtC9NhvNVtEEJMg2{I^
zzb>4q?-@HZ=G{G5e5F8EwJQ{xg?xeMr$^C~Y)JIklAbqmuDgV`pmeAp?5vJ3VMKVg
z0?YX0guwv7SmJ9TqAH;`@R0bobuI`lgY>n45*#=ekfdb+_`i;ad@@<TAN^TKMMV6H
z>vmxWHZa8X)&kCYEmt1J`{p$rz-@*<^4E5JOLnu^v!Qy<c>cZU=i;UdvuahE+4({#
zn)yLTX*vRT!^k0tPw<Xyy3N)->db?cUa<I`uGl=CRal_E5>>Nf0bN-<<KoR{0ED-4
zgDz{lwR}}IEWHy6kdQLXZ!lGRpDGshIxUh)B+-%jW3Uz)<XYw;xA>s!V8qwzR?2oJ
z&|V4{$=)JX6OQ4IzUJww1p(zM|7&V*(cVil*Tmd^l==G}AN6Kw)Vn<WM8luDkJt!h
zqWv}Fw&kN5jhPRjx<aV$y!B=&ASdlk^#SL*MrsAJyp1gmV-)#)>w{m`>y;gSnn`7@
zeDIQAR=Ut+JK$*h+#07aH}Gd1%+$PE5y|t~MYXa1?Z650l_^NC4*lYsvQ~jZF2qb;
z*``~43a*GnJKzf;dgz-+1<#L_k1PCcQS^x`PRfHT2*gYJ<<3kFF~(O-(4TGC3+~w#
z0D%p6tLjxsEpW$J)Tz{l#JFPHQQjk{Xhw@s=OvuJow`0WN=F-JxBLf^niIQuy^dio
z441xjRHm-vbB1+z(jK9lun!IQ$~-SyQq2TMY4{tnH^rnHT6kf4tP2k+Iypu9n~Dzk
zvfas``tg*6pK>2t@ruTVi!m?HjRPEL8MF%V0|*;+9tVJp^LHhlLXGe7JgjEj-T4CX
z??wA-pK1Hngfwb-=||kRxux^3Jy6rjAbAk{WXHU2)VeXH6nf2_V-yTp!R0d0CpLPA
z!IwCDz`d<8bs`sPC(V`Ry1fF<NF1n1I;k-jlIIoOiSIOm2p-g2ai~_aX_>eG$gUpJ
znIt_PPcm~qzIi7|a{$w*VZ)9us7H*_N%L}9C`7eUQr!X6iv{)T=7JWwzTrot3(&X_
zyO}%K=)&Pms+@3kJLpSQG)t737p~%0m%XYx@Nou-AXO<7reN(jBu$d+bvWw-=^pIt
z-C*Eq{=zzrDtu==U}5J>Evh6!LhsS+vUj#0uckx@ed|k=N^0lre;=F<syhU6%d#j}
z6@;`yP0*;B*NjL*htNp8&OMg3UY*Ewi7FGQQm<DDGYkeb@n6PP`X<LxkK;pRKOe=(
zN+df0KljEQ^6C{P>aD8TS9HP$?Ms1P7c2Pc7n)5oD&<*0%dJ&~l$S9!d5b(<1d;Oq
z+^XW>y+>GGh-NbFmE@c^Ilr54@B$_41>w&>3bi0&e5ptp@$?5_v1i}35-CmlITFt1
z{^c=6M`&;s^Y<iDz_S%cMg%IbY$m(hm;@U+yw8nPSm9LboT)h!23zx@T2<I7R#%4l
z!eBe^b=BED=WjRgGa~_eUS||CdBEpp^BT<iqR44N;2uxvXV-%#+=}UoL!oqxO%G#e
z?WdsZVi;j(+(USJ-Sd-RNB3~$#54Y<kEY&$f`{Gt&V5w#b>E~Xv}Gi-<dWif%h+yI
z-@DT-okmGbXAAGY-lE$f0!W?;lf;meC;=X$juhWyWIyvlEDB}1Kk*DEP}d-MU!uqs
zfN1~?DN;!tu1H(i5re#Gwf7cC5ea8xsL46#S7QWkuArzm%d@I)50+9WO8e+ta+0UG
zOx1L-F-<5kzCs+4tJ9{8r5kh>_t1-N2EG`?@0&;aXJ@F9_p<;0?;bC2AZW>97rk+Q
zUV9FE7I2?9ZQ|vA4z$>BM!QoejAdx^xBBIbjEQ+YtiNE}+CA3nVKE}@e+=o?A{bO6
z6G}X7n+&#M(2(})?_ud<05u>8TNGrr9L$|(Xk`Q}k)!oUgHJHh<Uh8;Da-mhyq75w
zb|r@I{KjTQ)pbiHSjTVUOORI?+l%==+e_umWcfgI{-VH)cF2sieB67v`^9hvE1rj+
z(hf&s1`#*<2lMr$Cg{9c#S#Y|7<Zv&423thJ<M=&`cylYI31_H_W!E6O=(|(mr_S2
zYev9BP}7QFN!jX0{mtjg@~$c<6`lu6(L-c3=5lT)a<Tuq+h#WtIB1mk#{yDquI<n*
zzJuci0XS+5M7)EgGsXXJ*)3o1oBzRuV1N0>BNu)AD0Gk2v)0q=+4=o|!U%^)1>a3|
zW0kl^4MDNm1DZ^F<RrI)d2R`X@7>{johlV{6DqRp>pDb!C)m~aocOHyvP^z~^%fpB
z-jH9!<xtqYsYwxJ=N|TK-A({HF1$i~RKg_w=wXXwmPGK&Y1w^@0ZBPwq*H5uU`m->
zQ!iY3KD<YBblC2Tektz~4YueP!qD1CBIrTW@ifn4-?@5ZTp}GtAMjOtHh7?qeX&GG
z2VX;pWuaqV^C_X^3nQGNKCu>-bzEPRmC14lZQM^;8h&rw+@rX<AzxgS4EOQJJWj_1
zhV9^+@=3F2MPze^$UQ-mUwGFXY9MlVQH?I4^eT3|ZrXl}*y|1n>etd1WO>glB=7(<
z+Ma{}IY7q0aq<en$nB$8q!=1C+JcYxgMvU3;t<m{4_2qBymG76H=R}j7w^?;z5>il
zmiJTNgpQ1jv0(mjSOJ&jvbnWN9X&Q2Ba{&QU!PE8<`25C@uqi|c_c(@IYAPH#B}^L
z^f2EI^vq{SE&>4-UBeIo>GfPf8nd^#tNz!R7#GL6f%-P`f`xHd$9Oj_=0B2rg|}(+
zr15xmfUAx*ETtp!=I=#lQ<LQ8KTYZN?5@P(0TUF*5})r>8&hfq+eOPqv2{4r4BY+@
zUSPyk=%L<$`5kw#DRvVk)A74-PhMc``RG%<CY2xeWcV$4(5RiP5@>-effU-?4Db*H
z3I}r_6-21YN-la#PJFc~PpqSbRT^nwqCQ@R(m-%o%IfKi;tpK_1?*<Y^8j5F7l?WX
z{7uA6Qu7%T#*q^oz*l56QSkO%7E0(ZD@q&zktGNjcI{>EV5e8^py#rc3-*b3Yh@dt
z;y00*3;)h*rppl{s`J7^Bi^O}y|rL-cGPc+NcD=0yZU`qvi}(W!uo4C2YFA4UMF!m
zs6vNr3p}o4B+(jx#QnnJ0%V5dTqrF~8Y}q0n(}Hbd|x{FqC(<-l7AjS%qBGdLsB$)
zAghKAgDza;d&uP{3CiU~#QWhfJ4u@BFJ3OOLFPZg#^W++JX2p^lV<N4qTCcJs2+u*
zsqq^4+fHwF??++@g%~sq?oEugw=zPZ=BeuX(mA$t@<AFrpt3ET1Q$;Z+#8#r7f|YA
z5j2Y3m<#gQ<h)BrL|)TeA0*^{zxV+M_X`u_7!M7SRmB)n#Z=L|@IK@?fM8OU&)M_z
zjDet~lVAlDJdx4Fsu#pTwiMoZFPF@d(J7fZQ+Y-|&=tx~dk$l_(+QX;6E&Exi$?>I
zX?3Agq<P%lQ4BYBr$%+KaTWa#od#iO-Cx2LhSp;e|K9xPWHID#-bdTL>c{uess1Dj
z@HXHmV({65)GHwcrkFg|_lD6k6c|aO&JM*sb+W8BrB`8c=jiwQ<k_8Ih^%+NC4#Y~
zS|e!RZIUd5%v$ULkSeWqW$OUX<K<rI?Cjmvq%H=nFCFF@F>Csgixil~qS)L-ns<NS
zFEz+M6&DGJp!;>CGa?(v6X>%?R{?;!4mp%60<}z5P=B?vBu6e;+dZ)9At$(8rD#2O
z-cR(t3?x`hRK)JY=;8OQ%s%lRVoBuRN7UoJ4K17w2QPaVPm;!LwSurwQ>pvxZeDuw
z%fP1MV3D2XOJV!8E~NxbkXP|^WxE0YDE2Pb1b{Zk<@@p|43ka3;o@cUGKeA^YImiH
zbNX~`$kWaF0Kz80lt-B_=-)Zibi$t;+^&mpNg;*nJfOA8Tao>)fMaL;9;9By#Q?2W
zo(>4V_8p-%VLnUO1tf*00}DZ-`%$Q3`osfQG%-{q#1#FVp(`!MHg}F)h%$`l443ov
zXy97HKwstxyaF~FRe{nmXNfWK(D+1ib<ZH_7<8F9?K$9h6;RF#4Y?mgyNQf!R)xsn
zCmqMGcPGz)l{Z~bT-xG6HUFz785kyyLBQIOQ?4EH0C@6*T5fl;i}qK&&ShsU2>_`~
zCFT8q*w(bh$-;~$_CH>Qc!k12nor06>ggr*ek%<J5O<DDx7C28li`Dx`uZ7E{Cr;B
zgSu^cdnS@<sEJnT%mz-mt4v?&$<asAK`e#atm@X?JPw)_MuM@iHaHzO;*C}h0weof
z8ORt#aFfvf9B(%TG3n#c4~MIfvxvhkS~9YAQy6%~5w(yQ;oFa(4J!kn#j$FBBk*tB
zF;u)KoJh^2-00p#=7x3jQ>2%uFE*4EP10Y6)H&cbT1;6F23waH8*K=!=xm~aPB)Cg
z(&}8VkVXHQY?H~ahsk^Lh{Cr}=fqShf4}Y+OCIq2J-FeR_C=C#ncIyYf@(`%;#|8W
z-FaGT#J*r>|7;NV5>zS|QO{8D6KIVS4vKkXwV1o*THa!_D`mSibB!le_cPh->=%wG
zTdGc6CFG>JbA#VD?uy&ZlQ>M+g2rq`rjBH3oXZ49Y34zb{M*IE@QtMPjG2O|EkMh&
zjy_eaHica8Pr(R4Hq6{$NL@e8_&CJgTEvZ(F^j8+vw!G&L?@-<_HFGy&ov0yutu)n
zFM%Igj0fCc9QG>t4mqhzDMDJO`h(@vJ=>Ayv4bs00-_*-CA6@C(e3>-)5>tBny2M@
z(c|}?vqaB9wp3JhN{zzd00<rzZcoJ~Zs#X)^<#9>tB16)!=Tdb%9+ap9io^l6Ucub
zI(gcqr7TiGU6U4m)_e*j6Q_=nC3U8Sv@j5y2BAsOTlrKF_56~-fFl?`66{ZGEYww=
zfJ={*YOQ9nB3HUZe&8cj0S+@P@ea3nXuIQh$M?XNGx><w!5m?GFWohSXP69V*kBf!
zxB4<Svir^|rRz&<An*p{?pe=5A13qBKhtRjo3EL|*x_Q|jx>Le1M7_A7yjM94hPT=
z`(prTRrl)BAcT)ywY4u_f{MhxM6*!^&!xoPzYYqNL|H&5Jt?cyc);SfuLJH$`orMn
z0SA#auG4A@kG40gf<|w2Xjlh@)OU+N!k1eqlBC#IN&PyH#LpcSfv~u_=@(Ct-e+fd
z7o{pb&gC!E`<*<M<K1Ng!jqukp_@>w?&(qE&g{cFm-_&@NWbq}S8r}T`!Qqu>}w^j
zd21(`zkpqvPvz_lrb38IOZPKV{+-GVTz^|Zhw89#;Kn9epEfG?A_pEiD9{K{py(Ho
zLMGGY8U4JR{uAgK$y4%WYOA{o*CJD$#ZFiIw=}ibI=fOjZl;c9my!f@4bc!A-6oa-
z_Qm}hglpCLL+m?piR9yz9Fwkn?cn{C(?G{hCYRo|+8OtNhpyuaU`HNRU;^bG(q%o!
z;t5xO2wa<B3JTS{z?bt9^yCkr3#Sx#Gwj==o+*Ye-7$)MCi5RlSv-$w^CdgC_Cnu$
z+=leh(U#*C({&|!kZ&K_i@pf5%tDk<{ow4eO+$yX*YIFQT4-3-FiJGkclf^Bs_Vwl
z+&ox{HPC5~EZhfLhWRRpwR`0Pf$pRD04uY^&48e)jFcMI(L8n`*8pK{Ue2)SYH<h6
z&0X5NIwM1xU}6-MQQC<WL!1MRaEM$=BL$u$MAjCpC%***rjbGo3Z()Q_1<}0KNA^4
zOm`0sj>1I^ej-@M2HNXFDH*%b7<q;}0J4vro~LI(L!@Y-n<gu-KTfzW$CJ_b;ey>(
z*mnV%m(mYa6u3t1`t^xpTIQ_ea%o^I{&h{foI`b;kkbmnfUa_5Eh8)4!)urig2>_k
zS(IXg$|&e~=Xu!L&J%=-whWBw#b+Ged@Cn?q57KWT4EPy$ckw$S733`WZVPKc{Iwv
z2u8K$Xq>fd3=7?eTHNo$@W8ibykV_tSRbG0zes}_2!uoPBflj8s3I{3#8<!eu*SsS
z9TI1rH}{7Wj628)Sq*n)r#-V*Q9*icy*_H)+*InIWCC(}U$SU?JJlw2gr!*T>6js|
z^{tLb!}4v|im?-2bdGUt1}XJ%n(osG$hKQkX(7wHp0~+~UM$PymfIP(9)?g|-_EqJ
zOc54h?QLrB?x55lYv;8eF7cgZrm~$l@IEGbw4N6a_2WAnMoPD4MCN?loXss&^l_<+
ziEb(Mfp&$&>$Ja*fi5KV=B5k{Sp8wQ9@oTi2UMvm=3*$MRv&&UgEZlNRQeiRzK@vV
zl?v`qynAk8VP7MJiL37zGh|}eckJY)e|;J7L2I}+V%%8+M%yRGn#E^QQM`4Xm##K&
z>y%AjfVN{-d1DrA4_n@j*fG!&f>imNw|F(Ht4IV<=G5kibD=Nj%F;lj_uZVf?-u4$
z7Yfft4mlLvI4R?}Hp>zF!yS)vC0iS4PB@LTKUh5sM0Drt)l7k-n>8ar%&-Ik9$%Wg
zE(x_#aG*mxuq6niMs9K`bx7e*p%*l+WaHmH(Oyr(rvArs8dSlwIk>upI{NvbEzjKi
zhKtcz4Pf&qv@PxM4u*J?_c;Vv0cFA|AHDr?65u0ipF^;=UMjL;wnk+}4)GGOx5<=;
zb-FkAAz}uq+h}xpYXs3>#%GMPcw1`&0_Qq6L~TZ-T#8HQD4a=GvEnCc)n1J)TaHtv
z@Vs$HgFvQ?rA1Q^&bbx?Dg27ZQqgk!Q%_UdV*pga07?=i!r|a2^;{!=#tu*|&=dZw
zocGR)os+3S`}4W7c)lRQgUY%oQ`hfjsGLP|F>j9*Mplo4-uK;g@WEf`-<s6kt4_dw
z-q=Ivqm+UIeU-p<l1m4p_bxJSOY3Ew=QT2M6B`B{EAW`Ii>4o1UU73D8{I#rqVMFd
zc#`V4)JmJ`sGAMZc_X|*n!$VV#dUYACtRd|E#b4(P<l$&4E&uF^N~057xL!HS_*4m
zlq6@*AZ5?DuY)ADHc1;nHBJv<yhT)W7I6CXUgF>GC&m-uB_0c*B+H?zm^zL6<uNP!
z-~Pioy%4S0ZRQUZie^<Hn+N0YZQ~rI0-ANrIYX(!d<^m={Vw(<caMcVDiwqgUN_+D
z=_?G`JLuF{t5#4MT1yGU>Eka&Ap4wgb_1@}dfC+~i+u$AOckSP`=P193Um9CvR)<t
znz**bd~%n*w_86cj*x+P{;_I2?;AD($i!Re##uaD3|PFWucyJEdU4eUoSsWvC7)Kq
z3R!2+BD4hc-kGcD6+4iik8cvVIXMyQ)=W&@UCh$Vgzcilh&J1eBUfz$K13h_@n>kf
z;UQ-56<qAUECuC0a8d1iUk>Hg51TR+I&1S%6@e!{nb})Jao)7-t=%i!^LhLtDQXYl
z!Ve8yzzSC&BzX%<Xu6Id7{+gzrGo!Wp*8G;S^DQJL3JlGrSmdIPq4v~>@ZRM#J(*0
zg`KQzb`oi=;WU>pTz#LS^@#Vc_kh`M@Jd^6QF2%se;3guSQ&V}icWv;zIR2nYyaSa
zb#%QLeWG!dzM9BdWhMNG@VHM4nP_n|gO2=d>P;5xmcAwrbXWbAP<A0T;Y$5Om)=c(
zYbIOIo?P>4Vh1yB8vtP0X$+JFf~d^{_Y@)3&Jvq%^5i^Br$*H8_grJbl}HEt9}h@m
z*jWh7cHwoFwE$Y9yju{4Lvb2pA=i|~2JM-wEQUHkcjQfDzxBA03s^ZDiGIL^4P&nb
zGf97uHHPyk6L!GbGn;n_tn8Z!?M*Ba4AZJvC^|Y8>-ep>j8bSS=&=8^q-1pf|C2P2
z)%C%<Sb?~7APv<yWyvoM3h{Za2P@I{egWdxcw;;T^s7k}8XxyQPEV@_Fj$suzg^Bg
z1_;x2=qk_(H?WU>uWHR$If16@0eib1H$QgDLmEyD1AT^p*L2ia+|TE_cJI_y010B^
z?QuogtI}Ko)fF32)GzzZ=`yhIVDAx0xKAm&P9%n!oZ@wRpBcj6N|gPb>Y;mE2M31V
zHP7DGkmQMLYU@LN%DsKt=`O*ndFhkts`Z-$ebaBQ6=OD)6ba*XqDp^-+Wy(EkUzo?
zY|mQL@h=-w^xD?PJh_TkUu`T2nxJ4S*-eYgl4$qOR*EUb!=Vv=A>oz+^c_6JrXy&A
zARIK7C<YP5YbmOMXN-0slAF@?d}R;qCRB=Cq39ebA%4tlGVGWTs-K;*&5=t2!6~0Y
zQwluh7L_~foiUvpbBlgG>UF<d%&vl7BbmrXb>P8rwLgF>_y=TJDF@w$sg(jGe1Tv6
zk?1+Hp8oi~1WZ>m=ASr@*M5}|4}kRWZvH9pZMvoWY{51wb|+Dm{O$TTSs}B@=ocU(
zK*rNA=H3F#^EKhb3x+15$>oZ&Dt#mYZkm&MeNIoS@*-%hRLB$HwtGP=RqrutHp$?q
zm7c-h7=vZZ;6ag*T$gnIV4N}b)9@KG^xd~IIiHX0?Wv4!L@PAs9iScLnf$+Zg`CE=
z?n*q7M@QREUXNtDS|d<hpHGCcwVaY6Mt-8`0ZttY98A;dab9w&Vc(vsXbv--=gGoy
zxhOE6(9RJXa>$V`wUQ4fmr6<kb#3F>EI*^H_X|$C86?Nh_WuR7V6$gsoRO_WSaZxV
z!QA_!2jAhWn{~LM?DQ&6{MfUb=Ke@_ic4Oavw`NiEXf4?4Z3t~Np+tyHr|9lvEU$<
z1(58oVsW5Ny}PI3d_nlVIHNPTGsx0SNBoYfb7NjntJFOuaB!4c=i-u>i~k014*m$@
zjq=4;S~j^Xb19FtDaLyqA>8tbn&dEbVzD<|b40&TDmm-%Ux$71fK0>K=}rMZx3EHv
zugg4iaZh~O0LKKFjk$Kqe|8f9hfEMIBAV2e!10BjIlZm8Z=y`JFKy3SEkcXJ_yy~T
z!r%Kj{txD+i+}j2vI49(T!WM`syv`cuDV-#0JYg~2z?IE+p&gpT=gyXkwJ1k@Hw6+
zZ%@`L^NnHhyq_~L*YvPjb}GN(rYbycStPRV$E)zfz4yUO{Q!|*TnWfl(hd91(W&^k
z7SEai9Ljy^94FBTKm+MI^v`8Bckywx<v8Ze*t^wpe_=4lq9ZAW9XxjgBU$WwxOT4P
zotQV5V3+KFLK?jks5_a$GiB>c)WAB4uqUk=E&Xj6NL8>X7Z88ArL8r?<{$0|-<<y9
z)Rd+5M`@Gnm(+T$Y;1iw3`115D(lZ`H=Pe7u2Q{~9#ot!7;aRxyS|9R>y)=Y<uO~~
z8>U6bp0Qq&8_J}Ud$UEIaBJAZR74iaA905^Z91}RsUR+w!9*v`r#lg|l)+T>ak&e-
zu(#4PX9z!;8KOIaP6Q%?oy_dFmy$-^I*KS_B*00z;L=G;e*h+-YO!t2A-qu??u@We
zi>JczP|3R!FDysSyFm@4e0z9`sL#taHEeNlC(*V-)GR_)=%CGC-C2QIYb}#`HUKG|
zee&#q3_v=yeGpf2D!NS#8SR=NFG2V;6D^(m2P^@lsWqC3X0_r3V6RJL8`YrE1-<YN
zAX35w)%0p#ukUPP6=cmYE41Cx>q2yWn|+&gZpy5tU_fa0QM~^^kua>C;Q_lm${%?_
z*LiiM0LdG^lfb?3eS>D&UmUzPS@iH-<VFfI(eq6#A&w>}s(hcd;yff~f_W6<W{)nk
zfFCP`82{GLef02w{c|kwFLWd!Bi$D$j)J!U6((?a{Y|gLwx(RK2C@G;3pFm9{^zK^
zB6ZaT>6ylkx)CtjwEGF@56Ht>N|79ildX;yYRCnT3lVRs?y}6g3CkF#SY8{2z@#pE
zOz?CoNqjWao=1O*IOd+Km$kP7-g2Vs{N_k=Yc|}>bq?3u5u|N2pl&hpeiXN7QY9Y?
zcvHzq7<*RxfXK7SoY&tcqrrQ{*-y5**7=f#TzWEOD=UrLf8eh)e~ZqPF;0@$PM)Jv
z2TaVc?DEqWLy6zP1J5gNe#i3Wq#t33YDA}5v^rI1cm*_p-%}c;MO8wm5jvbl?YlkE
zz0w=D9M)+7Y%YY%HCEbybiVS`$-kx&tRS(2@5NA?;t%WqBR0%SMr)`X8Qkc9ew~v`
zzj-uq)!uq#Mp%l`!5{2Zj=Cvut?gzm&tU1J3;N8$b4|)FmZB5!HDP5xP*Sw9OW*RV
z(JA-jh`N_DKg_kdBr$SUIgqaou2J)6AiwX$3;M*O0zQ{K@?pd;OemVkzW+E%@gsct
z*ipe<NL^Ut?_GQ92UP%LD3%=j^s($(n&_1HbBzRC{0HSL-t&L7@SC^K0JuWgMuI#<
z#7bUj==^Ou1{pTz!1X6z(6i3=nt`-}?mfR;dyV1ckllX?%Vg3~S9={f8pZDS5}aZY
z`UuiX1QY%`_)0qBnUUX8BL`*;1rGeh#?Ke0a%!h!J;OiHN*ULu+#-xQ6yvP<PbuGE
z&86h|3AsWe${Yo-tNI!+h3g8so4wzNiiWC;oLwLEU@r1*fV#;|@2W>;pBgW`xE{tf
zVvUW7R%_7F<YNZUh?g_Y0*1jxiS~{NQI&2(bzU|HrMYA7(n>)EWbcIKRQgvA+v?qu
z(5Lj4&E+)?`IMeNS+>~vM9ntIX|h5f*PcpXyMfrMzAnu-<pm1*HFC!ACD)VVKfyBn
zH7)OVoWj;|{)(}H!50)%Q+@$Q0XZcYHKC7OT$k1U-;lBkV`u6dwL(Fq^&(XhA&Y&v
zD!qwreN^Q`SELlzVQlc<$0+kKEJm~CAyUzcn~hv2IQ4rxDg=c_6MPcJ>cJ!=umamy
zN>QicmzWD%F#Jbgs&U$kgk4n&!Wa;^^m*jiV|iGCWQ_xj@i1$G-ztKRc}1v?rvk9x
zb-TE&x-<;4>tv<%dDd6mujF?M#`^Dn<C}OZ_O*t#-ytEkUW2qVna#4t|Mc3zbC%7O
zS^#L>NWs~^e`yd!Whn^u2Kkco6N+Jp`rqz95m=V>acq*i%|kmed0y&(XOO1pBoIIS
z#7ZXykv-^=$~VMmW{6vH{UP4B3w}oL1cE~gkcna{hyI#D7$dBsuVL<~xTeUgDyAV0
zee`wdT?Q(m`^uan*yj5c&}IcV?DNC%gJI=X4^d%7atzNTGD{A^;gVG-WZur$>5<fY
zc!O|cX+xl~fAm)1Mi5;(Z(S`&X#*_7%>{4r2gfNM5u7bvG1^@%rhhmvY31lC^0<cX
zcB4542L-I&L<=)OIZe&Q^8w@c^b0cCWjGD<K}K*lyzjIeFR8~16^8*!JpS|vFmBw(
z_-nat(Hta2nfVEqT5TukM}BFbq%LG9;AIC1-^hviM_?%59NCA`Lfl3|6-mO?yoa=0
zH8P$9TUV}szxeLPcSyK22LuK3Or>=(Hj?OnAXNLA!WBXDZsbqW99JI6AdQ`z^F;gR
z>SljX)OXJHo=lGR8ZA$$=>hiMvw*35i$?<Wmr>_j;bQkhPz)nu8z(x(OJj|}Mow49
zkPSWFhCW6*;1~Vdb?*?RYJOzK3ZE^JPo$)H!lfV2IE*;|$Q9wku9`uGd2Sj8C!@CC
zyYfO|UerTQlh#Hs0Ib5tJ~=+&iefqUeT@og9Pqk&6Pw3G@%Ha8tw~ozs_icc1+{8l
z-uaOhDcsH;_BfC7lAr$2vnMmLdnd(U%Bcim&d2M+zfH{b_Cm%A0`my>hnbAj4X0cd
z$Jd)<I?l^fY#Pf<x(>%5P%yf(LqeG{E%9SX23$~*=~ykKI&VThV%fH8b~&Qya`#YY
zFTJCou}eCUqo%Jrt8Ry@miKJ}*lz@z`Q;_gl1l`;Q$uQr-P6YB6N&1F$9q50`g5Ju
z5-7{mmd40(@1(QGqOri6^Rq}fVxeX~3d49<rWs-vEiJ8OJC2Du)_*aIY$r0nfk#8j
zGm&HkQmA&VEBui2L#ud;++wxC)syJdqXQYtQ_Dj*EY?&3>uL|!Pp0tz!B*iNTH;wY
zsr>K6rtF=+B38~@E+Yzs1^%-4p)f|HT_C4eITtc~N!plprFk?xiw+x~F6&7fu){~S
z?khv`qbZU}dlv_L*8R?GePHx-4d(qUV95hO&+zwg8)}uQranD5P3NrcT!C*vp_NxT
zK?IlMfC%2p0Nh3U(7>S#uC9EZvXJye8?Z>t<dKVgCMP(hQX8N&2N0-l&v_E|B!+WO
ztq#XSlgr=^aMZCxer}px#tit+iVL(c#pH{b`Go2O=!k}XE^D59K3qFG`?tPlqP118
z0gNUxM8sK0=ZQFsUeu83EDNE+Kx(h(x5jpVpx9fdM<HV%CE1FlOZ}AZtIy2I<eyz?
zI;y>FX{!-HKsCsEhhf>kL?C#Z-~goTS%4&~H9wa``2D?pSQny3c@Xeg`E$vkAKO8p
zZ3Ff5)p!0*y}4CWtfSZ2uPM|aZAYk*Q7_Cz74kHAVh~R4wJLvnDo@V0g!>*)7D{Ah
zbjSt~_ED6`p=e1m&PS_A9v%SC)Id3aN%<2_5elf6co_R}d8pJ8d5t~?nWs}ON|aRz
zfKScIg?v$C8-@<+(OFx+9jb?{rnHc@4kp!&zB8Uz-<$0f5RQwsBOcp0u~W}hH1SIT
zU@g>1j9GrALdk6IjOa!Y%Rq7CU#4zyi8lNSxe@Aq?y#q^*6=^QOi%-Ea*)}FDLtsx
z<U&gByw;WhJ7vG}E$fO?=rWPlgB@}Hn;F~%COf2}VOYnkIFf-doN}(@Bor)H_)=Gk
zq9udSJPvpTyFex&G7Nfnh%e=HlmBo726sMXj(E|57+3r3b7rN-%lQVf0Yx!Fi{!Ki
z5tPz=9Kbc2(awjd4p7^sY-_z;Qm;zfo_b#sL+`(A>aVqyj_%((kb&v2f1i<f{bEP>
zLqqtP-rVv-fJRbnBb{31o+;@3+nw*|%G+Q5x%&DM;z`2<0a1?wbi))tz#&ANbmH9R
z2{%Bf{>I!d`1bSxkvx$0cLVlUpS&uaEb5~;Gd%AZzl79{46zjpKc|)=%`GpfGv;Hr
zlad_+f<UJffI)!27@@eo1g1Mwqyk;#zRTSdHe!<X{k!d;^fJ}qkyeyG0X?T&`h3Vs
zyZo0o)#G!P4Idby-I7$Kn>wBB^WY|4H9j6wO?@Zu;FAKm@$H$%EtRc@{*OqxO<S=h
zYP8xJ6@Jy_@i4fy@?B&G9%n(7a+>xrcA#}JG6_Ov<+ih@hi(z4{qvnZ3#08hivr!3
za*UJcd_z0Dt#YhU@4(LiQ(GPb5QO4j4k+6GDM;uJk*q%M>B-NzA&^ek(D#;SQfnpm
zVO2aGL`Nh>>038J9c#1OG8i3oELRY_cqJRv;n9ke1MJUTf(q$>zkCp92NCmzNoElO
z7Xs-nsq}(s$Ju<QJz?wbW5I7E!2V??@uTe@sc9v8`EJi94ElCgR!c4Nks|ZrOFmp1
zCwWeqAjZ1r1midMS3$bFIhU>TI=w30k5mBGrCFuRKRHA9Vm0xT#>;2*AU==~gWfM&
zZ3CLzM@wH>rR#xGjnCTBeGwXif}zwY_W$ii=|Gjs==xIVp@Lf*zNUKOPO0um%df-f
zHYq7L!p(N<|NOgw(%)<0K5U(W>}XAb+<20g-<k3kOm99!4w~7T#5hn(XdRQH!p|U1
zH!ME0;>X-4@ZGStm-uWcQ3Yl6>u(=F{#k4}zSIwB!|b@nmfHxU>bRJ2Svbldy(sKb
zg7^~aVqY>^otMT&Y?X$LBdoPk25oC<a2WYNFUfJN(Wjmr@4vjq0y|7&ws_KOt@34K
z=1*>~v{z}NQiT`Y)NM*2cozb4gbWbx{uA<_D>%v*SSgk*`7R>8itU;}@;RPOVeajS
z5+vF3V??mXcqaGE>^$)lWtb`;e!TWmF6DoVc~$IN5t`Ax%Po2$&N%zf6%S;%iJR0S
z(g<GUO*B_6OG3eTWt({b5^;!0La#1+0uQ-3Q%C8Sd=Q<$B(HJL-HSEX>MTS@6qAo8
zEt@v9T}=V$1&`HSChqLP{hTR`@Az^L_-T3k;JkDmy@RmE$s_d$v?FG43<{V)nzElR
zb<DvyY+GJ>-IU3X_VL|ImRJ_)X+9U3j)241C{=Y%RucZta^Zq;0*UJWXCy+tIg)2P
z%s1H-EC?^iqP6d$uDPt4SKJUNm)@DV-{Fi}XZ{|J-*S>zq{zb_X;Uc*ED{4hT`iwU
zvmW+E*m0e-H7hGgdw#R1@yEaO6FHO0PS^5i;>Zjx4%v&1u6_DmDx%0!_yBOlwP_-V
z);n?&9v-Ez;ycq3H5#l8PiiTY#1uM9es{fV<uTAL_4|E9&lsEUgjeJzJyx-(vJQ?u
zU+T*Yn`~2)UE@nS_DpCELrT$6c~U)@Q$9h9qUNkNvut8IXqt%*RV(_2b;U_Nwn0C~
zMq+-SG6v|Z?!ORFI(O>m;`=%MDev}H+EeM)tOasG2S`2Dmv0qReW$i7kCvioKSVgx
z$oU+A<S)=xiPnDJFYS@`K3&JCI%V`*5Nas<%kWU54Dgv+4I^qx$~V^1P@*^}zcMyI
zLMcd*Q`YLO{>c}Jk>gmSzgW>*+gR}|dDr1{+l+MkSZc{Sr>C1NqLn_tbHQYTMBccB
z30Ea?bB<wM6qI}&_Q^5OO_}nOHQJ6f!=V3fsK&j}on&+=a}kCHgG9BtV8<;U5iecP
zRC+N402j032TT2Su|V_HYR%V+u9if+^xWlYpk5n=f#{{qoIh!4)zFOLebS3NuzU%F
z8QjcRA)0UVJyX71*5*sU+vX7ZTr=aZQD>y;%fX>Ra|FjbK-ESs9Dld=#?y|u!L1z+
z@-aRRJ{)6yg+S+Q;jUf0Kt<<f6gdcq2^J2YXq_)$T4deyZ^H$QsqnPPTY9Doqi#ao
zQ&P&l+^%y7V!e@wv>j*a4OBUQP0wmLo={`)zzSYVVHlIV)_vmSe>xGCtx?46xWs?{
z(%U@qkG#%MeK#XOHv}C3>BU(@GnvFoiF0J-`%CFX+HUB?6E}-?950QYa~gJp*}H35
zqq;}bU{oEuW)DqTTTd~qUJLr<J-@44FFuOgOTswKV&B)&$Vnt_w1BD~)!yjEev)$j
zytNJQnN#*~EWn<3ks@%ivnf7s^S?u@k?jaAhw~A3_T8t$DzUkGal(ht^t9L9y7!_*
z>&>6yR|gO$0Xa2hG8ze`WC`9rv2BmBLy$97EgvRsMmKG_s=N#pTq!+?U3VKMl6DJ0
zbk9r=Get=2_LEUt$_I#u<*(&#GwZpijbYJ9A}HRF6`d50j87^RV_z!z=z7MntG|5)
ziz4Bf*m6#Owxo=v2S?$SumCsbq7=i??W&^9A|c7B9awN~8MAFSVl}0B<0sK*St@~+
z!}{#0hl*t=Q7#jug?>qKJE=m7I9iQkQMBZp&Ub6!!!~di)w=X4HQ7L%(Bg<7pVS+I
z4ZBQTewsp)q(U#{^~O7Qn^H-UoO2jivoe$vl;b*Nr{kE881&x56G-Y`o2Ds20d%3l
zE!*dHr#SgjPdL0&58>edjoZJz%qSq*HiS(FYJuY%13URksFOrCvKQWN(a;TrxdRMC
zTwcg%R5T=Lk#UIhg`2nrskn{>B<l-Q@6L-(j^_2rpdMs%{@$~^n@v2^%vQ;>6I7vS
zWq}+JY{NRJzFCz8=j3~F@vlB#2zl6bb&wz==Zom^=e(++y*=Qcjach;wj0MxLU`j8
zuQ<wM_=Ws~Z~U8*CxCQvq3rLZ7Jp#?aIc4Kot<Z)r-51a{nmJxk|(<?hFHGd%wmCc
zU!qF%z6UJL{)mICKzE-&t2+NnHeeH?_7q31=Ng=mWFF;><dnxh#rNIENjx&vDWJRR
z)<C!d-P?P3b_vvAW>7hTE`FatCpH@>8hKX&FJz)v;(OEawA(Sz1MO-_TK%gc{3!BK
zC&N1v5`-RKMblKi77;Z_pbtN*e#(~OT!QpkuZ0`)JOBS5F==3se8Gs-BN<##=*8dF
zIPajvFEJfF(y4gr$oX;_W@cY~_8xe#Jx$=s;0?2Ufu(dksfRGDKjYNChC1<1xda|)
zfJbfT1vFtRq4W&<Ch<XxN2tRv^WdO}eQ1ij*9`|phe>p>)Efetkcu;<jSY|xboMb1
zt>(E!$SbcU0N6lO`y7A1rA+Ayu6|6@98Uy?roY1O_@`)t030S99L94~w(-A=j=6jW
zmulFW%-~;JIDLw1i_fRe@z+f_;A=E7Z0u4-c2N#|UV9q!E<&&|7Ex56LAmijiAu}c
zFib{E%LtKw(>;PMp7ot|YNNm8CDWk+gQ5n(&enPYV1oosv6z{VJa1XYZOS%HqZf=f
zH+ezma~z$NJ<HPKB1EwD^rqRp1n=>GV<EdqvB^%Y_K+BD`+by($IhhgM^|jB^!s;P
z%Z{bz)2E(W&v}A*V}ch){q!x)U4K-XhbZtw7Vd8{K9dLjnc{$(;=#eA$fJqs(jr;4
z$Kw4QVs8!$$FmQAAgtn9y5)_Q-nC@{9#|qr8Drae;sFw<H@5$9GsSm3JPN<)3Sd)F
zCU5#hM2G$Y-u7mBCK~G$wJ@9`(IQ{YdaFxg0qDPjS{sTMjR(ntwQ>{Zz3-raEH3nW
zzu^Nr?O84b&bA#M`qGAN1xA~=WtBv`dE*2@+)A!A#n_Wm1>MHL^x1JkXT)rY<RDv?
z)j>_KJGiso0>`fU;CGfwXqbe-=S=$f(>bw@$W$}ezZfK3G7b57`-muiT#nhqNzZ@v
zMlp7Z0SUx8KJWSC9n_HIuCHV1<^fha)~KzMiI1FK`(k_IYQZgTI{>=Q&|hxWv8CoR
z&75k<q&MdAG4U!5oN1%`%X_)}r^R})VQW($6!!1S%x>L_GeLOi=6QW?zLqPeN~J9J
z;IYDk#k4`I*H*j&DUAeK#ZJ}?rVU6LoPN^2B!I7zZ3D%-Ah)DT(0l=p^EGW{;RDFo
zk2}4qViN9G3=6NOQg12;Nc$M*K*gYM6etwb7#SvYoEuKxv=PTtpMfrW8FkIrO`%8d
zG!IS`wyHqkXXfe3_v_tW@<Zve)6_Jd@rC(L0P*%_Uk`FPBBZoU#Sklgb)LS+Poc;s
zYW)*;`uW<aS?OjE+;dOemkZ}uxnJK8c_|D_*6?5!PPGJpr12Q%Ee8hHdS^pfML`Q9
z-}gD}=$GlUOCs<Ma-FbuD3s~N%y#VXKj*PV=UgC&-G$WQAE`Mpt%{`V15Tz}<&&e+
zqy2-%yIYQe?M~T0u;xL26pAa8q5D)AyvS6ip<R4i+y8P1|2L1IFY|zS7!LX?8@}>0
z8SEDT6GGW+V23u0f7e_@R+JF~!xHFSzVPJ;NG-XuLm&J}cT{(Fy-l6)OXhevwW@wX
zRd@o#ruwm%pa^Hn^l3rS86R<9)-S+gmN;8x3*y&x&nd~Ed11Xx9AURs#7)JOScI@a
zkPu}AD`ZS;D1p!+Zbg$RV8VgV1A=~thzG~xuYr61J7tgNDX7FdPRgdmzhV_dnU$p3
z^*G1X=WQPe`s+FHrwcWW>iodJi|?D4L@QWtz~=%DH?2gE)07J14JQBlY<;x80Jgq$
zl=gS{5^!T_zG=Fj4=W-dq^Igux0rj%!1MTm2i_yo01i8wdK=q;<G3R~;}ZicJ>MIy
zJC*E*0Fb|7j;ZvN{M$=NjcVIL^jP%Evs4f$9J-<l@}3+)o<0Or@pdIMD=8(0o3fOX
z6ebbJjdFpG6tW0}6Qe(#fjR_#uHGs=oFwis5&%V91681V8$SM2CXi4*iiFi%X2t3C
zI50%{I=W!X&qi`0gwn{-_-}a%^e72Sl7$06_*Fo+<@Yy5Yha!TW?H~95F~qq5vgKM
z?E*8~_dn#N#(!G+Pc)XH#ul3cz3H=r_)68LZRYEm!?IrmU>(|q70@hCRH|LL5;R14
zix5@!h$){+kMQjf+M{<+6})Hsif$KN@{=oC=Z!x$AW(%WWMV!;{aGP+zF9!{M!OG`
z`7yK;PHjDBY404AFm|Mmy9u}ux4-uz_C%t#Y3Lr1XPa>;bhp?2b4&MM(=)2gTU~eM
zX^(gPcF}MEiZ#3sO-sQm*6g+!MM$MdNrzD3G<}X1cv%AN(Y%LoU!2;HK%jygL=i#p
z2htk7YVQu|z|S&;I$Ol6=|)%W=(Pwxvtd-|h~PL6BR?3DI||hd^B0qXeb`S*o~x%W
zq@rrBXSrIg*SFmyN)bo=qy@2mtm9a@9A~nP59yyrN#6Z_HbIfSW{SD^-{Ry32cAC-
z_c#yD+`tH<tg#a%-zSEUAX}ppAxbbQeh5*uFy<fa!sx2}^+4}cf(WsIRJjgJFlQa)
zarX_LxAT6v7%97qU`XJkWcsx^frSD;J)S5a<UeKhxZPA^L0VX*TC$#t(9)gC2(5z$
z_AH0~|NqAqsPNKIPO`RCV!l7-OOLvhnBuwq3k56%Q;z9l1(m^x<U3k67kJgmX7rzq
z$Yr6(&j<N0-)~nw^ce?ps7g<vd9Yj2{pvnOxz8$SWM&&0>hdc!wUP8|pbwi{#_ZW{
za}Lmr4f9lQ3TgA}HO%S!T1D#eI3W>f6bBkGCnqh#xzd=G@`WFEJ?9Z%t_rcAdFPeQ
zPaXSnvlvIF@7Ot@;LT4Qdl)&4X90t^Yn9Ds=h{`<RZ-dbaE9+*uFw_o%@4!C2Oy-a
zJT@6a4MbDjO;7_Yp9ZViQYl8-!pE$(#UR3@e57<zF+}LhnQqyKA}(}6i}rQ_n}Vg6
z^y*A$!m{gk`{_@jVEKnn_?6zhsf+<hZwv|k!loE~J7!7|D}Xr?<yN*R&1$2Zm;%r_
z#Z?DmB3e837^Jo>=tHXi6z@JH%YPz|fp5^ei{>Mf+-|&=dd)UM3E#L^j#mHWR2^O*
zVuoJJ<|s~6ay`U6lg80fVF~o*qf@sE!&<e(s}{`B%yXHr!ZXyZ!2`YflZ-`QV4B!A
z8ejnF@f~9EXS?Aj3#PoKt*!jhxtTUmPm)Otsc5K!da<m7O*bY+2~=KjrsDj7(jlJ&
zxaP=KXTZjcu;3>H2t`=9U*w>%SkM~+(mr(<Oki9{C9hSo)fm;qLkIG*$XXHC?EGL(
zWl({B1OPvmp^yvYD$6I_%75$YFT<F>96pRrf6QbsGM}sX1n%R)-M>&$N`XpZDNgn%
zUg1f?Po1#~Q~=-uklT{Ah4`tLb~?Bo*Hq4LAVb)XW}I&xkft1&3;N}H75)meU}KEm
zY0h2;_rT=??jAZII5x}J_*`N?NenT@PFIVu0Y3#~hy}s3Z`VNw0C3V(LS{)3u{iR`
z)<Co6X&M*ov0ES#|IDD_o)ia}<uw%`Z3f<Li{p<<M4>b`k(a<-tg0Ynp1c@~tKIJ8
ztlRuS=}sh-C9n;{v`MdA-d<3xGd3)hi<fis@99JG%9@IIKfx@P$vXMP9_vQY%9;k*
z+UV+?CDo&fGpO3S;>XdMp7<47mE1XBe2y`Mh-MX1+KM+zN$CRoki-v*ibHM3hcAWq
zu@G%GtbWe5<VZ<UTb4MnTxif8fO(==%D!N9@PEMQI!ONP+CYyzTHdeoePF=sYK7UF
z*kfy+bLGldf<WQ@WILd{@)|2zmS6~vRhM=+=xwB5lYMD7Ki->cOh&D6lUob)SYhh)
z0h=<>%YW>_7KQO$ahYm)o+=z#gdfdQ`O#3%dMYo#vuwryU<fihzM2Y)pC@4BnN5Qu
z&)3)w_W2Tth?_VLIUOan>KCG=ZcLCc3jUkN9HFkLvS-<|Y`u}Rud?v={?vBf{7wKi
zj5g0=YtX5n4Fllw7vURBKN2FmBZ8Qf8^9LC5<m5*QB^a1e<CTCh%9Z{r^G+MwD>AX
z$OKQ~Z<iY`IIC#MlIJXK>tIW~LfC>O9|B1(RVg2)<K@S&0cUZ6VNS@=HcYQ`px^|}
zfBp%t{<pUCCiy_3&$&DpN&(fm2{`pgxCkN<g#wky(QG?1+9E`O3LX@vVV^kFD*ApH
zBu9KEi-AT1&cosV-xKfbFfXhSjjbNX^3;D#$FM_Q4rOnFZQkJ5vigPDBjb}$)A6D8
z+WP3tBDQ%-X_!7WT-Aw7G9l9;@qTo<cZA{x1GFdl1eSDb&dM*fZ?StFt>(DX4Cfpr
z7Oc5IopKt;1pklu|CBU`_t5|Fi=XCtm30ya`+apyQ>8(HFgLo!ulMDiuXWuicVs@a
zjBf&5%hTZ>cy+>No;-gJh@m=`hwfOYwVqf-NE?VHu-&kM*K0M}&hu79k12a`y^lM=
z5J=}5aa(D^QgkEoBMXqU<>I9^m<JC0*DIXjx(ns^Ae6=5YK|mwfu}r`h93;m#^Oa#
zh~HWMqovakqR(e=mRc%_dgihF(8GNf+NTv22hFMgcTXTN=(pN8!KL5;2l)YW#y8Ot
zOIFRJox;0#{4|J@lkWDzgIwZA!q5;}@>sZ(&%p^}P0MZd|7UH%Ypd3R=QL>`HX6m3
zZbfK|;2W{*XcP4Bt*ZZF*l~B?WxMC<){z3HJmn=4{u!al3YLytPAAc0%2^wqrOGXD
z&$R`X_25*a(K__o%yYXr3MD3(2}yZ$**h0%4dt3##t;*B4TG?E;)v*5v`beWUui^*
zS{c3L2;=ev`M%t=$~Y%k`)p9r%Hls6*OWd1Mm+r}-<|&9c5OBVG3B(;ME;)oaZ8XI
zB_}sV7bP^{G2*v3R1Q7<!*(0HMH(3iV?wl|g2o3|m9EBOPix|iv<=i^GX_lFF$+@I
zR~Y|wh9`n%1DpjdacSs(muDo$=e=b^q+za)0~pU7{?1RT?pDN)(vD~?30mGkY&Z$x
z)|~qp0E1!)z2#cGsl5<&<8y0bafq)58feH?dNC*4+_pA4*@YfGG~{?RD?>u7+syyE
zTC6N`&7|hHD*b-t@nayDbQ4F|$&7e@ZOF|(EAh0DsSqj;f(U2)SGvgkkT$P&l1?s7
zg1=Yei_yWEpROE3h26yf!f<<D;AzX-JcMD8It`GYvRHWeSNg?95BcO&+B|#s^mzu+
zQR-A}cKfH?R)17-lN{IQ>tV7`eO1d@3UVSq{{VhpyB0*VIbNZ}_b)ge8dUjORK{<K
z1c;0v(0>bQR|<z`S9eU@B;>U4F^AXYk~rJxyf`oAe*>oU@?r4$dJx<G5#19EF=)b&
zp;&Rj6)H*%5cDbDXzp#RR3x!~8nC+bY{-z{<G66}2uZp4&b#m{X2}+}<&9JbY3FCP
zmRAYV-Pw-0(-=R*Y3g_!O6ueLYeODNY9Y_MLRD#QdEN+X-nE$c#@}~1ddDX$-h@}~
zoT*W8nF&k;z><<H9c$0vII`Vf=0`bMRi<{(N#gw;kJ7rVo^Tbtg|_q;AZT@iQ^h|{
zN^kqTf<9T>$Tlwr<(}8#X_9z1d0vv10%UUi_5Yi2B-%hAeY$jM|C`B4i6Bc*oaHjQ
zvAsJPg#YBJl^4D9Ax76!XOj_51n)6et975A>|9PCIM9YZBbrHnjH2<%o4`y&6i60~
zi;$x7$faHAX&n1_rDnL*u^#{FZ0dyUad45kQ3cnVo>Vw*&;iy6^i8^zBX_w?PZWj`
zCZB|#|Ibt_;$@+{wSF25pB9vwhKg_sh1N`-jCIO6Idm6ptL2;`fo3Q8l@I1<hUf#x
zWTEkO23-Tl?!{`MXsBg%y=|n5!GAYV&PTue`-iASwcgD(XPgq2TperQAz*JcW~>{F
z4KYaVnUiuG`7IgbAdv3ZFnf{{`D1ET7oOmG9|x=ek((yBwp68)p)n76AQu`yWN$W=
z0}j|-a`}Ea*O4SwLa}pnD=X3gdNxvfz6q$HIy~zqf>!tYa0&g$l_A*n5miipUM)rq
z^k>j4zQaiin3bQ6FB8vscs*|(g`|M6D>7mT4Me#MJPC{EOX!KqPq(_ps=~5~KQCCY
zWUa@nO&h!}!zvD=+G&BJPRH3rgK+SvXg_t<T5WuvFF*~Pc>g#?q7m)62A6SmfHtiV
zn%&}e!-0evsjrLJw)bjZ<B)do;coCbBVFzK!y>Og@;47Ta;cmynV)A&mIrz}3**C~
zSuV<kjvo?%!Q}pe=vwN>#V2qg&1flKwK_a-DMhnQ5lmSF$N!fim@c&7jSP_l<v22p
z)WEh8+&}xAjNTuK8`^0X)}RGfn61g@|36f^&Aj1ZNOsQ=?CmDXVnc}m7-EFVLAEPO
z9up0GHW`P=K$%4o5d1Y;lKS@)E4)bYNLQpHf#W5@DPF<1M8DsWnyaYS3(%+O*H#RS
z{F&VN{UZ2^!}P*)Qo0xw7|>$WyQZ1>c`M;^!FM|KahcwIRem4+I+dLW4jkmC1`Zdq
z0{ph<(!@E)UXa^Lib)&*4}LAk&QUF<E9}lh$~NDj=+J}1rsV@KQ4ctTceCBn)3;cO
zZ&D-#JII3H!7kAZ-d(wL!lk|1No~us2s*Zu?oG)(pGCV`gMR^-&bep5{gQ(awW8DJ
zFJ9~b*0=hdgSFAhgYG6riqE$^isvS0KzE;O)-vyECo&$?%n8P!reo|}!ATJfz+{KI
zN-nLvmthDWq_!U{Bd?f&#d*^v9##L)3TAg<LnnU3<Sy6!B^dhS0?o^C!P3Vd*Vqqp
zn=%<lra3R`N*S~GYJ(|w_fz~tF19P~22`8=btv4e0uClU1rm=CXU*U)^+b`;B4>r{
z(L9BBmgR9!(9a4MtUQ3$c$3dacXyR-Rc3uXc-T(1xuNuw{dFeqB^1Q@U3I;j?X939
zz~>0;_7+2SU$5^0^t(J5>N48IZw1$OYfJyKsqfTed51sYDkaKu3j|;I9+d`J_-<@F
zcQRkB2j;H3t9BnZ{#F!jWmmr#fFSLDUbZvtjT)tLF($v`k&}5<qvUO?_~e4Mx(EhF
z9iYH($v)&wG$qHm_!yOdkq;+40eAZ5l1wZ&DL=3P&qhb(QDs6^<uhZX6L9jCT?}pf
z1hhOa*YJL<uaTP}Cf#=zrR(V&c4_L+2h0`0(W9}t{w5_*G0<VRn@f`P<+KRl;yPh}
zojWoA!O43e9pQ7Lf_c0=<EzKnVVYj6Hp5Fadbf!P$Q+<<aGn)Rb$(aSbfzof8XxPx
z%M0S+W@t?N#Q_H`uFB9R?=KU{riu4dg}(ewpX?2yy!T`3=_~7oSvQ@c@g4ur^{Elh
zlrCvd@q(Fs;vvU$YZ1LjE;W$sH=Bj`XTJpu5GPK&|BEAt7$-ff@$=OM&oZg6kg!J%
zd>O1>2ufvM|Av9qfGoktbnWq$lM(4?>K%}PTm%v}+aa}ki`Q?*iH}(ht^8QIi(-ev
z$^p(|=+W$j&AN;U95u^L?6duHR@EIkRZT;0Gh%Q-o48?c614TXZP-O9SNJTc6W*pd
zF?Umk<)7<9w^N(#2HwzWl*$hz{Kv7ffl4|Uls7waKuRfq<Ntj4jTyZK!Uj!b3-cq#
z=^#1Ry0A241YnGWh>zz&pdP-0PqUN&>4rn5ZCyHM8bG6hI8%iAsCc2hAo-}s3Y*MZ
zcu0(?d{Difa0OqqpctDw566ibhG6UVXVLN$7*a;!FDzm;7yIg2Ax06fXpN2Hx0Pes
zrT=-Uu<ik#dNAz?nPohGXe`&SJ2u~M59$Fibg&0$zv=H=pWw@Z<pe@qYYCqjXAnyZ
z2!gmiD4!-ET5l9mzF=sx*Yu@Tjr#0qMvN`Sns0N$mM~bcdm{P7g+2WzP{Q!w`P*fX
zS@n-Rk)s2N)Pqd)D_M)hRMpBB#QZWe9PwNJt;yRL)<CQ4%Q|qGilKi0D?t(l)_uWc
zY12FI))JY)&T%>zDLJ@>IB7rEW^MM4eF(F%nW5EB1*BQp=!G5xFkU7;UoB3djkCX)
zctyEw9Srx@#@I5J2&!0SbN>9~LDEtG<|XBnHK5l$g{ibJ_?l@|3~$ZVKhhU#p(y#+
zWiTZ`NMBCC6G_z$e!~z;Z*VNlHMAZcBt|TucjE!xLZ&d+2WFXSfbHRIiJVs8r`kqu
zd@`3C<K4#5c8lNU^S+0*!VP9R17E+)Iuk%BgDPC1ua+CawmAeKO=xO)W?C02$&5bc
z_ddxLusQc_WerYM&VH<=suC%x&5p=Ybmh`uaI!N)Bd9X_@DpP)cH@*>{yGbzBoTT~
z+`@il{}~_upYvu?Ih~2G8Nvz#X7SRges4@KW<TF|#Ul-v02->lqTCq#5G7|})=Uj`
z#=$AhuIq-Y$UtdJ<N!MV_l~X{hn22md^up+(6|htyc<M2@nY+6qH(=BCF?)voEI=B
zB}uXEP9d7MDJw7HL{(nBy&qcqwd`IYMlMcItSnL0CIp55{z4#k{?c~Xtit*|z`lR$
zeTtntV6yd&Dywzcd)r+fvPXByrWYzn>n6hzMlFFv4>j2#zB|dHI(J&CUw?M_uP1Lc
zV9JFL%D^x+Vh!k5Mr?aFGyqXRuD{vu+6NP^oQG>hc_pu-3)61B)<aF%&bY~-vR=2)
z)S?5XrjgiAdbdd>5`={vYR`j`%;i5>1hX&zL@BGk%Gnw|rp1$RCL_^J7r%ihGThiw
z^tP&4hDDqVBFFPsE3*lG70{(J+jjHCzE|Kf+&z{~nq=!-Ems{tEE$n|lcrY^vC7T=
zX^&4P9H`9*d#?QtVH(mieG$G+lv2d+4k;CxGutmaV-GBzg|@fHv_%Fo&QYPwDzfGX
zJ^Dm+@g9pqAo-e{=w1$YO!_K@FyKj!8~~2a)4PjupGUXa@)ab(PL1ML>4tABSzHmf
z1|nbT6`4%!0ISObPBr~|X?^%bC}^mO+44ajOQMyp6$|_9?fWEF<JN%Pq8=3<YpAqg
zTPcg#Z_1Gya>znl*+ThVud8H?$6`K^3>(XTVIZaC1Q$*>2y@iW7ZqNN8zM<;7=t^C
z{0c2ze%!XGR=kx*P$QZM1igm<2L)B}*lb;;#62oO6Czz!6avwb5Z46=10U#Fbsdwa
zbMaiO^~+8EzXm~hb(Wk8vH`<3L$S2izTLo8eK`{F4&U*CfL??;zpfB$*;!+4gnv$~
zTGaeJ|3$z(`MEx{DFG^*OQr#^Or}Ao+iyKq7N7y-;xCx8|E}yr+^w!?mdb}h-u&1X
z1fWV4buX*cD~}RfA<c0QOzVWvWVk7Pc&wNe-OaMTld9Uu66>Gi9uVs(pe$yCgF!)}
zv(!mfUzhBGkF#h?cZ5s71=9Gh`IP1yXjgzg-1o=l%jgD@6QWN5on$&h+=Aa2Z1t`K
zBD}WMXH++h*J`LhV{Ec-GN@b>3VqEcpzhuT45MJ!{+G$$x4*FLI2UswK_7suqVAmo
ztJ)As3h2=JUHbTIOgztH8&W_3xKqLp9>)i)<h?r9&1_1T-LI>jV_$0N+0ci9wbsr}
zXhF*wcb&zpc!h^#Ot>lx!!qH7Zl04rM75zxIYS)x)nIx2noFy2g*Ei<1dUo8z3~|X
zdEv*G1rmtU#4xlOn&_>6c*&q1=KN;{R8hmfw)Ld{H7<KyjHm04C#c;^_?4(5K?rNk
z)pD}B$>X&yOLORY%TiMTMW*g#NocRN?l@tBCsBM?yeA5w@h14SEX>x3Bt}{k!2Gt@
zsSe0@9YzMSuWM)<c|$uJN+&i)2ZV0+``+mYSYvoiHm)mAdU8n0HeZZ}ciFflN*8&d
zQ!E6*jEERu`_37xPPWxz-iJP4B?_RCou1m8G72@W8#R(F4&7_t?#PG3YddAK$iAAu
z1Odz&C{ymlvVvXiufV9g|0ksm8q;7<*B*)YKa8zJxZk`jDA3d?s047u;b}+!FOEYW
zs36sW^EqXU-%H|Z><B9H-sFnHi0W^#Av%2{jQO)T5lXCM-CZ*w`P;BN2C2p7h*+i4
zK6DI)kPZG5ONsa=#Ma-*^a6^Rig9yR+a<wt<Noh$yQbaMOcwjI{@mXGXwmYXj~%HF
zXvdTlcX`a_&^;n)8PET*#gt_*f)ynm#*Bc>;OCdlBg;OG5UF>4r8fR$^a3|I|8`}=
zoTMm9Xgg;{I>zV5LeJfFlRiOwa@G=azYa$Ckc;Vv`w>I=lY-fU0@HoYsthASY2gl1
z>|X8SK>|YR>Eox2gKW}^!pcYTx^Vm-kDEaLZCGAeE+%|bc8q2n5@6wRfi+uZ@%-DY
z3T&gNu2r@lF<E|_L=&PoT>R-*e1{@jtL1{PzqQkk;MO)|VT_x-(40+iV&HvS%G)iW
zph+)??!08*DAwi<(e!z-It{dJH1R-D1Jx}RYe_1o2h8wlN9ZNO=XxO-X!fGu4RnMY
zyn#<4>kv}hVq#it4&4nk@G+ogiE?@LdH{XsWC^BdU3E9vwH;?H0;CDz6>OX(zr%Tv
z#0-SI`P_wvmML{S4e_2>bi6ATX#{!=VoGJ~H%s|yWU6BL9RS2uNQsa$riS`(XXaPx
zs{5blzz@K}s+NBM2VS>=)vmR#!Okpd!-nJu<9OMwab^O263?Kr-2|!f8oW1Kr{VU%
zPWT68#$=45PNPAM9s_EO4W!?D06P|qL1%~%9tX%kAbLg4b}&dsVD<r&1G_L2%|}fY
zMF)JuFvkDtANG2wX>Ap7L7aH;J9m~9SW<VLegb;r7r~!+Q}N`;Y$8acn%EIxjrr$e
zH$pX}ywsZqrmO8Rym%CS5>})&d6NdSTox_IZsfl^9^xPgk-2dx%-SFWjbAi+e0o$A
zb9&E~1maS)bfGl;+xYO0bVqF7w52fcr=k%*5c$%gf)dTPz?{%ICzeP!-LuVrB5^kR
zEjhb*0tSC5f7{Y?z)T&jO^8JE^#+xs+|vXya>}+#M=lGM@g{oL7ctwwGKJx-M8U#`
zRk2!UV+?L3s9fn4GR8yxvManEgam*~3~C|OhJ89$38no@yieZlEcj0CnGuU%Uu(lY
zACw)QqpT`hRRR6_4pW)Jb?gd$=76F?i9#$cNOx;_&WY#QoxI5qM~&t>uAni8f2`48
zHPRLlLClQ4TeCkdo62<}8nz@5(D$d#s4w>R*HbvfkyAIjfKE=3(h`4o^pSr#{U2pz
ztv~T00{^_)xcE0yC<+lWQCUC<9^1GoHZR!oX$MB916rJ!|Em%EX^J)*@&Zcc0aTZ3
zx&+nRF_Pg(z75QDB-x6?o$5p>e{wH}_%eI`s&G{QlHXvCq&DlmWy&_%{zI4$dX|lG
z0vdX@y$63fa!N990Fl1kH%n5Ir9$98hFYLJn9zvQ*d%wjuj>h2e_Gq5%I*`US3J#j
zur+8+#>w4rW}GV1tWUxJ@i^pbM@a+|`>Q3ed}lzKF1K|h)eU}9{_lEq;)qcZ(2r8L
z+@Nl6tOnJZ(6M=~z>5UykC)v=p?W*<PT1l_u#(cMJ#@vRG9V18N39@>5>R?Ds^?^!
z=A=qcJCAFDuWP^mqV4XnAF<$2g%ufjI`3{6{S6<~xN4Bh@=*9oL2l&BdkH*kFTuv0
z(|`KRa5i(X@XgY67>PN~s-gBhtBU?C!S*d)E!2r*>LTikxaAbpOI-sn!6PB104Gzd
zKoeJ|G-&xLX2r5};ZNOHmeTxP1G=<XkTV&zB5qfN+Hdfiv&9`bEPX9Ka}p~kjG;lx
zndUmo^()rbBW+k7EP7mCQK2huem5}6zEG#$6Q<v`u1Y6v7DUWuAtNTMVquu6WBA~U
zI_(n!A=e4-oOj;bmNvODcmR~v?6SHRqFsJHj*F*Z;rJZCY3KSR?*q!@i9B<$WFOef
z*t|YkzOYi4E+qHtNF9j1G&#FjC}*2IzwywN)@#C>{DTnRml4P5c|Peumm*9k<JA$K
zlDA+F{uTGL$$gk`Jx<agw@&%un$ea~a|2Fd6mCx_u>6l`@3wh!P1<r_8KS1wsE<>(
z(J5;*>OLL6j+*ylT?W0@uOAvGWwK$Vx3`5cxtGZ?w=SfA!Cb8`nYjo90I8r$4|}de
zyExriL|5DxEtg-1f6{jT#=NtL*z$y32v7st``o5PW$Ug5!9p~$j;WWd=tE;!aQmjt
zP_<E~@`_yu;TNx2ANU9{U=5|qXbQ(7lLqU!cH50eY|9-CSbas*L~P3kUo(r9%AP5^
zJMfepovmaEP#KTBT`zt{5bFj3MoZ#}R(V~&6Pj&drHiW^jq@Ah><Sw{=TSjSt;tW%
zpb#Nn^mBj?*j@gB0j$at)nT<(yOl0UZbptQonSqBR*1X=Lq=H&T@AZde|R|)=)3oQ
zPbm9HGlv<t9Mfo%zVtVwe;r@0_=wE8bLLkVU(FUFfHzZ8=d<BIx%vzusGWY&+|MUZ
zN<JV*2Ukn`8vTeEset3!k1y%PLy~ZU$?=^&y!uZ+e(y&>=DN(!`;fCCc@(>o0XS;!
zlJVbmav+6N2#9=Fs?_^&0pZla1DNJCjDeNinIp?}h|1TMBm2`H0%)Lq*qfpuzf^Kg
zNhY$g<s^7vggK6!^E#1-HRU>~psVi*m@}fu)P1N*!8Q>dHc#4L^ly+>F=LV89L1eN
z<G|L-qSUW&9yu8n|5<=Ubw_FcZ3H<-Z%)OS4%ZdBtMs02MTq{V|Npk%2iIw`aGbwc
zTONVdeO+gNXEEj&c{2dP=98GZK9i;e1aIMQ*=q<Z&h(8R-h(_OY(`3bNisUq@tbYC
z*x28gT=R)X9Zp`K>Mn-|fLD9aw<UW!VABX?=AV0W-m{{bE{H2BaKO19jyP!5QFV;l
zO5v6?0p7D%i=-MaYy>d?s8GsjMZ$mLHdBZZJ1xnl%6*Q(WQ+4FXg|<`v)W4Y$%nYy
z!|GHspZF`AcN;^lryX`~Z5{{DF<ssx1ycGNg*^6a92(j47xG#_%Dao{IgY@hz{Y`6
z0I%6<{kaT&0S?~Gn+>9{LvQMIt}3#c4R*qUF0x<UF9*xNi?kb+9G<MQhO5J*>;J)p
zF}bwMdpfa&xEza*54W8*#J+u+ovgO#F;F$ULKq*_E64I@iFjC*L?$cyyMO*}?kiBF
zETY5SN|#tY5FL=1*afjC3Tf!EH2l&xXH2sskKEfAkE-)qJ;ZYF%q6cB`yg2qLo0oJ
z!CU~Dhz%6T`;;tElV_2N_Qir|=Yu^*t}Mu|$mvxx$aeWUgw9>;ASq-fBwGfmb6z?c
zNwz_QFoG5_?o!&P!vRW|RN@CHz|%8MiEB>N6ESD_(XC=<0O8?FS<y*UBJW{317lx*
z4pFtVk37+M<3%S!J_)F=HMD(N+=C#2Du+r$lZ!l-ZV#xq)BtJC(x$$RbZ-3$)pl_U
zX~lGTC|%6tt}3Zw(F*AxY7&Gv{zGPykZe|eA4F25H+aJR_t8kGYYJ?xlQ{0)@j7JQ
zyIC#2OtcV>U&3OeiYItOayHEGI+{ODe5yyqX$Qe2=*RbbNuSwt4|LUgvwwIpYN5Ks
zzM-Y2B`Vd&s&<p&&}{`Hz!M7fK+OdZkV>p6dWz?yx*x73;@6k@;qS6~W)M62eW(UF
z=p&bl7&)Y=_H_e-Z}h|POitk@ueFx4d0+;K;Hf0QxCor6a&3o}<+oJYQIXb@D{w+y
z_OOJTESwLE{!ETkJHDk1`HaKjpPZ?11pIOZgJ##FP4*t$Y>fu>vJEQl+%^8g0i(^L
zBE_rTEIg;qJ=Ta+O%1CEV6%st)Y5q&Uf6&gcy6DkIvN|W#35k>u20CI0Ma}$zzqn3
zWFPTt13s2}+DP;48$pPPbEU6q&vo#;tnm$!^-3qw3)0vyZ6nR~AE4L?P`|Wif0C#N
zA5FbeArM7dYh@)51UG=MjbcliI~SIIwaxJEpq<PwY8D7eIlBz+6HCI<S=Z)F*w(fb
zE!{c1U^x830nqv3u)B`!;WN3+Q;zFf97`gDOVq2J?V&6UaSiGAYP!3%SL|2;uOfHL
zt0OasR1pUFavKCs302Ov-j*t*=zVZ6?Y<6^Sn(IqShi3KRFO@}eKEE+B>U?pV<H*#
z*UuaaYT=^B<*z@Mnq*hy`W{Tv-Z_I`I~ZbitQCO&*0+~^cwkA+fUr76=qmNgJp$Y*
zFh-KJtqxgVCV->d)&Gu<TS%|!7cd~AiVGWF&!&0!u@VFXn(dT*EtVlo^!)&?Q)iy`
z*BTh#nnk8jZR&*8eu*i*Woo8q{Jr_+!|+6Z^jgQjlB^?PzfA2`gF08$diw5JAyyUa
zw^bS>*rlF2qTc5~_K`p?KjO!5DSQB+!wE+U!iu_Gta!017l}$Xl(RryE+TO8V(pu0
z3dQyPlW?k4^YQOy?L`(4fw=EcAjYsXROr|^u31!0dC&qP;+O=}hf&txNY@)M0SW~{
z3(!yn1hyG*-*e#;T0Y0K+ktLYO6VC*ysNqAV<ewJzqjV$kf2AJxvBZ>aMLL}xTV;T
zsBgC@z(m;e+7&M)wX!KBy)&TNX`HD3cm2CUQM#EK9#0g5#fpe9&M#8cf8+zwFt1!l
z))OQjTd?V14k=UAu9eq|I-T^#ekVV|utRv353aAzEfag`;X&`={5pP$;496rzMna$
zsDLTxIdom>f}WmrBmNwJL+_XWAQ7pEAD(Qd)3Zo{rAZ0j(ZtGK)id;q+f(8WeXmmt
zxm$ObTnFQkG#6jh@N`Sa7{#3W!jk_*?wY{#>Buy-4?Qx|Vmjm3-RAC<UppZ*#ki3z
z>mjIJ-p3O<L&<=)GG@&qv9sQM4WT!6O7={(;c~tu!8d_k3}=PH5-AUPO6yB%*#q5H
znOq49afg<m57BOUR~oGy-)+#+;?0y$DWl>xecGJ|L~k<}#gZXMCc~I?S4dK!YuM;g
zC{Ex|unKJ4SZRvZS@`ZsH{z<(ri3e25L}Cit8Er_&lmrtCb0gBU?(JXgq_XHSrS^S
zk0>a{&5!H-kClu%;OU2~{GwMmp~+IsOW`$4Da5JVh-eI!z#2^hjzgH6AWrAVppg60
z8yJEe6V($q*R>+On|Q$e?yVXf+GVkQQ}~)ylVRy#H#`(v<=eInbR9y6@ghFBkj<$M
zYAPSGVd#r#Z0{P}mV&We2ODe{oYPKv89Kdq2HN8~MGCe03BJ5&gcza$#Z8Ms+t4GR
z_#=Yu!Lcm!8<@|e>d%CoJ%^?`X48m{gUsTjHJVgEl?8H6{J*i8D}jVeg$IkZrqQO1
zl1A7{lh-8<vg)?~<;m!3nYGq#2MPelIe3qyHPR)O>AN>WRQ(@4t{spPhS`2)ui#}>
zN${{fV2>2EoC~_IrUdT*sQZqsO)ncWsf$=q=gzuF4UeJ4^-D|`?$9eyz+O$Aq2SyU
zssgkd-(J$y`*XWw#${cN8lZ7X_s~Zl+IERB6{9jCN;Q#nHU|yJ!@D*vzmEuoJRqU~
zxyFOr|3;c<jNJ5%={afA08MDD5-0X~F|d--7jMs#EhDu?8g4RSiI6{@>PUm(><L>~
z2FZusZqy^d-yJfcL>_pgM@RPQSUg0*m~0d#hB6>~>Dqm5tq&c?0Xb~|Ckb`Fr<G3z
zH0{;Cv3JkjT=_#tMS~Nzqw!}aUEf-qgwVwLVEMMlA_x+bA&m|7JRQmGNYy@(B4Jg?
zgr0{Ct*CgkS}Y+G3VP;GVr7T|W7K4|q4p2@_q@aM+Wj(s9cd`nuj*BiVk9~a9gz8w
zw#4<-`u5(G2m}NY(DGY&mtjyZBfFokjOn|{A_{JSP~?wLuBD&?x*H(B;CukYX*LWe
z>4F*Xj~W7@IxL<%IioZ`$?^DV2qRFMG^vajWBlxo`UR7VD7r}HP3a(|FpgS1#cB#>
zGpLUUmF1)&=rgHBO0^_{JyrZVjkMP1GP0D^RCZ^lh2hD+g!g<QyH*!Nty)@Q=-Gw^
z2jKm>9`h$yXscgvoA3?A1QK2ENxoZMbsHJkZyB>xw;?vNkgq5eR0%o(f<#I`uM}+T
zgm!^tZ&>=Zyl78_lKF4Z!nbdFws^~(v^d9Pq)Ge@8VZ2-_801%Tr+4Z>o{51zswYp
zs0Lk)0R}1-mied_3keQmp2^OZFPexKkgW#VN{J})$+9op$5MfajV#E<5$}mCc<&AN
zd!-cpznS<E`zDdQkH=VZNqXi1^eCWpe@^(<nB!2EVEkMQ+f|U%fSDpBla{xle(#1b
zWRh}moc+b}xW~O-T)+|38O{!*$4T(Kg`@Qq%&a~u7_O&UmMfxLgd8jq=QmQ#Nk@%$
zyRe5qy&KQ|h<Yhu+*-Fx^V(W)!i@Rw*(iTrve|9FQObV0$hRI!iJ{0)vRvA^*{%CO
z$<X=9eBB}qLu4l8C(7XD3gzHepzGl~4oOpqm#gz&d<zWu*tOAMuVmMXaFzkh?)x$8
zmj2z~5=8u0X9IM*8UE={-DKNyr$GTGEVpAizrQ>526&v;*Tk3)xG=!fkfA`9jaFNA
zM7+Uj+HDM(uK^C15EEPo<0%h$eOy&N<b6$J&)ZI;++{vR^v^4}RjA=oo=9>>*te^c
zu9&-K6L=h)ir@c_NuEw>$JyNl3EkMybA4gqp=mb4jDn*J>K&ojz9tSp9?{K6h^XuN
z=@z-lMAMn(*KhA7HX?}<6f{vIxyxg2zm*xaRFCTsnB7G<?-hoKiTw*tp;CHFjdf((
zkxEG2aF>w3ooN=F1UJiuRKtsYf3i|nL}o35SjL*tK!~*~+9X84<z2)=%F=OjKCW`%
z(h)5hJdnTG)mLqHS4u?jZ<D;dOFNENR@g?3dzLgjS^%n|hYY@{#U)X6NGk{j9t$G3
zgPm}Q_ZTA-5CS@+afO)N@9X6|K2)H5Cv$sD>7JK#fD#=8#x)%U@KkdPR`A)cQ??Z2
zFBT!H_Ovk2r%d^3-$WCB_Z<grTnwdTLYI`Ue5;`F_3Oh_1@%J+HWMdh$<dua-8PO>
zBi`s^$maPKQH#XF>6FHh^Ls$N`sC4Fa3)=8>Pd0hVu@qMcuK5lR{{ys_#Ns7f1XMI
znH?uL{hpuU#=gluau`^VGK=(YBs#V*g>RR-XneW7TYW?y?I;T@l4h5~tiA@6h)an>
z(#K+}!Gq4sc|Ys1P!@al-<)udjg_Hy5<?_H;tAneDytXK9l^!elSgX86TNaFo4_7x
z7i#WQV_a5x1L7Yr=AJrYK*_qnOy5VkE;g{rhxdY0ta|~b<WTQw@t*4@kw?w#)BG5~
zr0fGkv0Wf`3qc&;TS|@9mbuN?f7w;_?HBl%sdujX8Fb>uIWByfvWjFIrDPBlfRBaR
z&k0B9-#aiG0YrrA=#)CnND3QGfe%oR(lDXFRvPO3IB$I-KRYsdok?12ap$HYan>G6
z5UzCDE2Y+fggXcu@aeWIk4vdnt@=wl+gPRS_wL4*m#+{uCEyB@?3Sr#?L+mBOGRli
z3aj6b%}>d20}q|bxMsb{HLs}{uC9Q)VTbq18lqx<{w5oEwd5PSfCEEVw1E>V<??^l
zR+85y(huLpq3vtV1Vg`#pyk}*Sm}NN0u*QUd^?+q1+I2l=5J{5z^Y;+)j}4LuP^q@
z{sde7Y8@S3r-!Km95M+L%uLI+YhvPUIL?U*K0JRXmg-HCsEB*+3)2FJcT^Pxqx6RI
zm78j_+uO|c053f;GWCp&X4Y=BaB4;F>-2=o94E<ub<yJOEK!Aim{YVxfnwf7!db}-
zs-&3e(ws+3I`;?rtcAZ?{7pZc=BFv@aPT;7d5%pR>ef#Gbn9pk`u%2H&XgoY2R7N&
zKdNTMEFDO49D#Hnbu{+a<;-g?YZUfE&C39pz4Y}>8C_bNo8=&=onU>NY51(`x^8!l
z%MO$HUNIa1Jn2$wyzFXnWXSGX)^AV<2Pm{T-Zc;gMh?`P<17rCKl&{*?Liqc+MzLL
zr@7>plFw7lXEqoCpXcSy=4Qeu+LJ<dsuX|B`&;QEVjhLY<pg=;Zdv=x7j};leXQ4_
z-45ze;=JG;q=g_~)3~+y9{NEnrwMY+TXq{=+c|2uaue7#Nji8~V?k^rccIFGu*v2o
zyMbL%WNJN<C6*14OT}3toQ?NfvH_gDe2pmL`+_L*oj2+8#%x3oS)q{;+a4E94hvuB
z)NSV}CMG=rI4^8I#%C<aaFO*hRX%8EHK~^2bH=+sdnMU_0WIf2OVB=<c!Lw&spB*l
zYxFO>XbMCq!;J-YM+ur5UQVZc6WhOlm(aPUaeL04y-?wgi~y8in=#b0%?FSm4<Zvi
z{#TxZ3W}aj0%z%*bGL3nua@@^4Awhj@o_OG-POAFbbo6aRxY+SQ}(t0n=Atf898;Z
zHuR}H$`OL#MnmBq7b_ATSCikU?LFFd{B1p(9X6Uy53Cl}l@f%==X=KbUZ~6xJ>d}C
zR3We6h2_R}qpw>q002e5L7LKdL&=oDgCG9ZrY9dfoY$Fr{W`~Sz*jo#L23CV)X|~A
zat0KR!$60^N?mZw&`TYDRIG!vR@z|jrkR7on~#JGYd~~?wyf6Evdbk5v?$?|eRuH1
z3Rzw1bvmYurtk<uXE*_5Op@mj1hoJF0|9x)1lI=Iu0?~~01mM#jKlN*b5u>1Mh@gW
zbO-5ab^Pu^kXbt7s($f>`Q%FNE1zfi#$RxdBt(45!&=f#DxF>D*RPG)u%0RfC&WqZ
z0}TB|sCSGSxFl^a^{EG*w3KslshN>^ZW20^`RKr8J(WDKcNu_dS`qhZzgZ*%oi^=r
znX>k0HR;38<??r+Jxkt%aC|vD&j;8XkJS}_Y`z=#o7NSW!PScgQMd+^wgX}TW*p`X
z6dh*PxA@=*2u2w2=QI7F?@#>-t)NB~WkWof;*HqJ-@rSN&5qcz$7`+CI)^;$6LkA$
z@|r*D1LTC((@K8zY5el-7CfUgozUM=%_pVxSqWdrd5xjs4_s`{@MC?Yi~OZuxz9Pz
zS|76=04`v{KSse!yao<RJb`u5@!$#>dOQHqxBK7&1|AdOCZnqmlWL~Gbx~(4Q%1rS
z=e5{x4inXbOd&bTG|n+=1(6>G$P&ix;N)cUVx%swwWIi~%+PP!JfJu$yZDv=vc)&V
zBsT$F)&4Y&*7n20wD^@}HXj#cy$z@(1t>o4V&3s#itw*N&ZBhwMcdR1Z38m$SiIuD
zoAkaupL~M1_1<~<i;uW{hQcn3pk)HWx5tzj`OJ%at-fb==`awIT)*&LaViuOf4yR)
zir!SvuHq3Cv1DLS8T(n#9N0oxT2*SQ77)C*H@o~@fqp%1<SC^l&iHZh+l221v>~l^
zNi@44{Orf?O?a)>n5pDYClXu+bs0migAkqi9en(G=%v$DD3cpQ>4gqFO%4%<VLH;N
zK5b>(lw`V7N*1^aq|3DrJ90W6iT@8xLKa)NOHdxiKalX;g!5=#svz&XaRSAD&I%t$
zL<Dfo{$TDl@{MdI3R&e_CeXD2zZJDLtl9FdhRT#hFD_vuN<0ROg(a<Nruce)CL&aL
z!+Y+D<#>{$6p=@Ps@2gS0?wyfXEu_t*eZ{`XCI3V1G-MEfREFV(W4^$kj<PFhgrSy
zACf$!MmEns0vl0XqA{#-X}I+^jfwn5DL>79+ume@Wn+HR74p?fYH68S6vbIcLu$#-
zuIl2>S=`_bB9pwHPOJNI90!uVLNC}GlsE(_Cq7fZ0Ur$#Wzke)5w601lhuJTNB*lA
zpR+3M?b-nh4FSlf2??sBoBF`+6KbP?TPwvQ>qOTl|NZbHfjsK1mDEW6+;!y>&V8*p
z$f%-31_3|S!C7UJ5}8sGNH3E4;6xtM+v+@R3IeM)&p*cc(=Uz_b)4wgqnIYi7;);B
z0^Gk(-zth&G%orVj>@87lPot*j<K1PxB9b&sJU%)kv{5C$Q0hr`-KCwtGgEN%OsJ;
z&2P|F^H)c@K2II-K<}2fxy-n=;)G^n*pR~5T;UpgQ#=MVV!KHRU0oPvWoC%Uz}OO`
z=f`Fv6h@QXl<JfaUbbAFC<V|4q*VTxaw6ysD@T2`w!E_?ix$*Ek9j88C9z#1TB(=O
zh#ecs(Vuv&Lb047u6~1Rf9`<FQ8n}FHTsZC9#wVgL}%Y~hjQmnC<4nQi+P*yAHX@^
zN%jJ9ZD;eRVH5dQ6VB<OxbyeoZ46}?e3Pj{$#{|%=}TmF){L3gCQmHZD7kBRk`!E~
z@wloZD1_&Jx43?&3BAEl@~`h}D*kNWp_)u|(1a@)Lej#$)<=cr&dR8b8Un4*^z1Fy
z$pwn+LzQUc5A}1Pp6RrK_o<eBpSU1KjtKNQqu9qvYX28W{7~01cq7dMej!vE3B+a8
z%h|a=L$?0rJYmfWan1T}hbBmpVp&&oC?k_+T`D@Ss99t*ROV=u2KzJXRx{+?=ZcBu
zlVk-{MklL}p6^L{vq>kuDzKc%nLOFLV^fQNts;Hky!2S0>w>~C^0%oU)zYngKTSz+
z&beMdk=&YN5k4`1DryJ9P3eT$(MT3m-y~=r)CfYT0|rMQz;|*0w(LDcMfsz_u<Y`@
z{(nZ}Nq!M2r>4o*`KilM&tod7QwoStfOv#~$}{So$*iOvsNt`3XKoD=H+H#e8n)+=
z{GX~y$cJzl{1A#eMlXwh)Y~rVEe}uAK1#AKud7+Peah_5X?O<b{4!^aD7S}97bYp7
zV`l`z5AtTd<FC$CVldP1Id=>u_J=mBmQyX4d&w(v{;(l?STFK~4sjs6W76o?z@zHj
z*~vq?JV7<64>C*D5P)5Td4f<lz*$OvH1Iz_l+XMP{D>4B^(5k4ricNvz}aAkJqRF|
z8v$pWsWr##p?6WlvMBH#b%jxvTp1vvk<)CoxZwtstl}dm-4N4Qzs-;@l^f;l#e=~r
z&<`7F)z*?XVy?hIHKnYvmBkV(K3z;b&kjlQ!WGC(!5u#IrYyI?;|(ldglDnv@F?4%
z%B76`p8UxeYyN~z27*n1eJzpb)G513vAb8E=gY`%QZyi_Wiqf!3J8cLg(E!jZUk4x
zh^Cj9nZIMl-#y=PF6=LUhU||R)rj%9N#^|K6)kS>H@YPY7eacO1`Bdc(3Y8fg>iI3
z?RMMGhmVr=@<GMkr^-=5MzIB~&sEKYBCwDEODP>4@GrJVF%hQP7gGcJy5n{R{YkHg
zqK)-x+~OMNePpYDYKC8XE@?;NSkK2-m;Bmr&5i%_0d4#>W<fMMY7nEC4b0F^)Lh_r
zu;Tt)-s=Rq?lQ^5HdB>*f=bDb`Myli?Hr~*+{cYy{r>{5f8!7T|Np_@U(j-urc!Oa
z0QrA3a$GW9pZMj2b_8ihB4`br_p+=%q*a8dG<+oyUPsy>a<rm@jtr<rOvjb$<*B8-
z_52k(c<}EkAECiSP#zWR|9TmSa}C{VNRYlEdR8#{RJh#({=h8@)Y<WwZ%4%6-t<Jy
z85cm?L1J!fH(rGq&2>}prI|FbLEj60=-dk;<Wbms?DmV_(|x@lGkt?a1|_9;gI5l1
z^qHjPfC-1dlfv+YyM6mylQhzk?k5BKMahQ?{hmJ&O@FE1HfVMin~(TGf=vGdL)OVK
z&m@9UVtAFnsl;i?%$*&M^g{rytdZ8%)`kLiF(BS^I%oh^gk1`Df`-kQBKx^{9hT&{
zOUR2=Hhb?Zib?``oxW{Zz`tlCkq66>-%K!|=WWzmJ1TfWi!i=sBq}4+o7ba>7Cdj;
zSF91MAz5v>y%E4#fvTd@nm;%{Db}xGTeb5SKam6l8gJs|Gw;bG{a(7l?cOzY_s(g^
zV6y&AOZ!wKKWLJ|tm$?=MVjun8Il*i{ee5=PZBQ;zhKJIFL(zle1xD*T)<HQ99R*F
zO-aR(-rl0p;VvHV%Y4>!<0(XsS(3dR^^=S|LN{TvHaup6(7t&fQ4(O1wN@g>ET;e!
zuT){ENv8{g4|98t$5x?jH4-tYn1P9T#O9{^03;Zfo;h!;<5(KHEgh`F`maUfk)Qyx
zbi|zun&)upg$wX#N`6Q&$^|d~GH#dL8IMrb3wH#z3LQl02+01#w=c_qe_8NxJZE=C
z52jE^=T|PWR(%eLN0%(r#E1>IOx$${^$|_)9!q_ignCo&_af`(r$-a7gA3t5+nlD)
z)uIVoEx_sEl1O$o&AU^WfeRfa;6+n(V3RpvW(LfYB4YKxN~3hV-wFWy{l}Ro`FlO$
z+PbsjW|fhJc@M3Bdt~Bk{>qsoxNs|l=)vEIbe1hAw)cq14H412dbgmsgAd1_CMS1g
zCw^ALSDL6ne-RNw&uc9rv&^*mZB|&!1~(=1NFTS)+L~s+1u8yqqlgxt@%$1v=;t0_
zU-w7~;_);helgU-qg&GWvkYfq^?c7^-q^`n+MfcZ4};_w(<4K{8Ucw;V)qA~V*%s%
z^(U5@No!6%8l10m#!3vsif`8zKQlFcn6jA?=T&%=uoNR~e0<998CYoQ9uX6!`c&aX
z_VcgfJzeI<QH|?i=<)gwWf^%lTY&=h`Qrd0yIiYsRqk@^ok00R9B!EHv>^I72Y3_>
zH#c1GO$>8*O!Oq5P6B>>$GG6N`4tF&__m%YJEpU0#W5ov>;T*j(xe_tJ*LHs=_9%L
z;|^QIPHjOeELTr!xSV&0kMVe?dQi~ST+U{5r43fBQFqD*RE1Af{cKE<Sbbk5!Rw#<
z&5(m_ErhY{-r*p+*D}NNJhDWU>}aZvK#Q6tbThmVr3UH!=bbh;#9+o<h89U*7Nw(7
zyeEmkKdnm3O?d-JLs(a=?mwYU<)4|%OE((b&MYX7hd24$_TsTm)bvSyauG{xb;zq$
zDvGKby>4Gs871B<w=T~uDPny(ZAY_>zpgRFXJM5w$~Fnpb@|>DM*Sb&m}2hHU4LvY
z_ofHL?gFY}v1Pi(fNTEJs03Wt!I2h<1D9-AS_}c_aVewZ(F3s9O?$A`{AA44XvJQR
zjrZR=>r}PjRuPhd(rD#raQd}rEK+hJt}vCs%`uY_g&M>J=wm4s(O8KaqLHrwpZ+G*
zRS}oIF0Z7<xjq%`%vWS4Wuu$`4y{@-@7Gt0L0SVcilS<AyeumcumE!-2d9_N0;p=v
z=Rsl__q2&D5HeWebVy-fhgtybc|onWnG|)mU<|wA0ATb}Tfkpw1qOc6FU#6ls|_-O
zobxSw??r}LRI7yq1+}=LF~+|CKeKnLJ;Y;eT+H(`!gJ$j^tRL2P8+^vTF#V>rpw5m
zssoPN&67-6Il4xMgkl9Jkyg<hD5!YM+%p$34osPw5@7BXL=ecRj4X<)+|ruC6VYai
zNtGX*{Vb6a(g7ZKZf#o&m<FIGBHcucBpHKPJ}DRqo3_?Rrx=L;?$heuH3!*YH|Lgd
z)6PYHBT1!5@Z#=BqAg-slBp8#n_sCa^UM=AXXV++G6z|(l!+NJ`KO1FbYtf$a9{#P
zc%U&3@rP(_oa<n`Q|d&8pp)ibj3Au#AGLA2X~=r>edV-P6}n7gU{`fTc1!Mo^StZ~
zMu}sQlBL{>+f~Ofu^0BioIUW+Tr#5J&We)juQy9!i&kTvXJ67hDcTusFQQ<4-C);K
z$;55{=7DEr&pRjb{h$9+qv7D0l1-nbm=MzsXTU1-$uA}(y3$6_m4BMTIfa=2n%Ll@
z#RV825@^rpA<FCl;X2yo+!z`m^Zm4ag89}8`O46Id}Toj&i2yq!hyY`==-}93cr_s
zF(6ZX_3<UgVF6Jz1zTI&td;snE0_byGy8Bmxvj&O7j&<EJxVxRGmbk${*x2!KT-t-
z(R~uo<*J<rkwYr-=<Do@#im{@1k}1eb=DuIgMY4f6!ZbK$zP5iwx%0gKmSddPX}0G
zf=jUCX4Cb&7HS=1Pr}0yeUXBkh)2$OMttY)e;v3PhT1KNd%>_efYoqnMoD28Y3QDL
zaJiORfbRZHjMmay-GUs5X($0?t>;L0!rQ>R6EDzcx5m$k<WO0_p>8*Tnn+@XWrneO
z;~>gLcd?fg{k~*C3!Wmq&QVc`^#AkbZUG;n>&tfY-iXE3?&4U<v(Y=_BlWvUepeT?
z8CP?Z_yN9q1xSVQsd&@=W-dXK1!w;8RQ)JuAH!IR1QkS#j1H&QR=2ys@t-t7sRGP?
zVQ=)$f$x@DhFKuS2=e`o4=-~2p%%0G7CVrpMvC9k>Hi7K=Q^)Q^f~-(VQwKBxubMJ
zh~J*W$(A|26ibL&PeT>P#Y@$}v7xM`4&-4kncZGTr|h*G+>l?XLzy~Yv_^nourMRg
ztTFxy#p%trY)eqzP4Q_tVMXu-|D&{8JPWKX$qlHCr*NV)qw?7BSJMlvF&g7lfzwAT
z9GHAwZP>cvbD~(@{lOKdN<@2D_~^7sqh|-3UD*#?c@ixQ=Q(z&qB{Eo8(6u>{OZ7m
z^ERv@2IbGwSfka@Z|H!TI;tCo^VOVikCOz?rSa_KU?+Uk&piV(Yzr^na;x`{jRaFr
z^8@}+iyzqL_al~s!Vr;<fh_h&fsA-uK3QEZxEf-Kt@&#Nq>ceAcN{#${33-VE4z1D
zQ(sFT)8SAh(TeV_7hfTv<b@IJWm!>sYN=zhRu!6Gky4U<2K}LO*!2|q`+8?bulA~5
zCwa6tvODeS{)Nxguk}eRh&|~#AGS%MGwny)_mY+X_G$Vz*MusH%hY&yVO^e!(~k48
z)kg|z`x;BtFF<-#X4|!Y9z*w;Uwg`%5?UIUqZF1~g6G8m#2PAd56#JLRYCHs<l8WZ
zCH(17ZDV9@PVxg39zMa8TMu|NpWg3Q;XUem4Wq3CCY<cguj`gEa$}UCc*#cWeAVKk
zmv>Ff-eEqietaYlVu|LM2yZe<$$lZ7E|w+j53oI-)^wVdsf}!H9pte*JaiLo=(ca^
zUA^tA`Eheh9z6O-DE11cTU?R~5|h9Sse3RWLj6ooKr<$v%jn)=JPsx#qr%*-n4B%B
z**HuFvKIHT<UY7akRG@dZVBiQ3YoiqEbV4%3JHr18oL)8S%%9*(9XWZL#X!*=ew7D
z5%t6V4LrYBbDNc8&PrFoE3-W(2_<(n#(TenWG`^Yh6nSxZ*rAU0CR9<i&LDuQ2ln6
zhjq)Y^hBrdM?kvdEZpM9ae^Kh*?lEB`oivtSQh@hSoop_NmCmY-`BLtkb`4gxX=1L
zkoieu{sW}a+=mm;V)fvh1{@*J{>OAq0ZiAags4ht%K&X8RSV~~3P%A_7Hg-=Ik+xp
z2_h^R|AN29-r%lWK3nj3GV50Dt?}SS5$VoDBge%;SmanXF9?@-sIEpc&iM_V8&8)u
z^zk@X_*A-`X&7aYhe%PE+~Ke}KL>`oU8S_o4aYr*9xX9Kl(v;|(b#`awAPC(EkYEG
zlU+<W+0kM90>cte`sXl@;HNiAprPJ~F@+tzR2sGg=t-GcmIopu-3%JiB7eNkq$jb;
zZfIP`SV|w+@*bbiScbkx@2b7|9;Dd2UhCOfFia?^Jirt1aIk}e!xl5poD<D+^dq7*
zcCUS|`Dqw205+VYZpP!XZ2W?B+n%mRY_Z`Rw#7tfr4HaUM{oaJ2S?<;`pfgYse2=I
zy<^j;xu~LFbJpZp^JT>dGpZFeqf8;9J597~mc~;k<@JBJiZlcaGijhK(w<&mUjIJL
zk-&i8Q|B*l5blV_rYH@SGK|{mgIj&q>}aN^ZQS+bI!J~R(yLaEe4L>67Uj@GDCl_l
ziz<}}@Xg!AoeFU+>2=3>n8r!fQ$V4?acTCMAxs(FSAvSGw7O|~_sV>u-OG_I$n*m*
z3yu34FLW^ZPEC>Pd+?B}`ShXFbf~!zt}($xr@O%6a;o(CcX9Q~{G?FoY2hcz7>KwL
zXh#>1u_*{j{5Ow^^NlC9j2`X-Kih)_JK&ijayNN}P1@054428Bv#w3gQ(FtIxZww%
z$_%uG$g}<Gg6L)~XwS~O!*R?h26FS5z7JAF#GA=3@1pu*Yrs=@fKRe4kOg+@o9BIg
z0FU(*(Za{2C)sV0L<RQo=t+X6+{mDaRvaLYjphHFzr^N|r^wU!b@<eH*Vjy3Dn;QG
zO*5W*j<Un^&40Nbe;uVS*5v7TcpW8uG9r)#X>heE^nR07RPALQEIOR>m<L=VB;l8V
znS;^wN!;v;-B?N6uN$;Ir{($D42{&yNilU<?aGjqQf9WM!F6~0I_i5*Sr(U$4j_^l
zP=B4;BsOFpN3s%AxF?P`_OxUfzEnQHjJLA#LMtQXy(M8a)1l8Up5S*<l-|!FKdKvt
zcUASzT=-M$p|SYXnW42!wgq>x$q86yb&VUgjqFYg0&p9xe@hUbZ=9Bi(e6EitgA^a
zzncnUC66wL>k~DoNdO7lH<#!}f?SgBwgqav#&Rq{(v{eM==-^Y7tQ%&&~`F|3i4sF
z9>2QO^p2TMBFJemi>#<w-D?MKeL`&8Mis6hc^X_E<w5k*P00g5Q#%&%DdOjc6NE1|
zme5_kW<EV>l{o1a#J|lsC?yQcPYH1nc)}f;gm`D413HLZ#rVb_P7>v3P#V4n6-7SN
zKq%!-rV3<`QwduUP*)>-5lY^e6Iy5C^|_cmVk^P`2CR6RR7(?u3iAXsZs`Y;gpH$Y
z0Xnjk<E^!>=i`kZ4E<>iN8s{t<Hw>vty^hZb&kn7BApao%b3P(SuQ6==Q$K}`PG%f
zKxDe4Dkk!M?e!-0&d9|`q9?k*dBbvPx6d;Nr~}p~3%xzcKAUfrbxQoy1uyKai3r?F
zUR9uVO_7P!JN|hT?IeWvNZ{NYE`RTm%G3s)e=s%xS-TOLu$1_tM_~E{6~Z}$3XfKC
ze9)~pd37#{DFK*JBovSTi`hA7roQHpu*m4p3^JX9Ub_D@Z%WhV@UeukAe1A>-sn{?
zM4eGVm5R4h1$KQem<b6k2hp0g>DfA+$(>{j$6US%N%%1Jl(dvkEsCv&KeIr6h>MG4
zmU1Ob7sFruf05_lO#?&eha72@UOkT2c85CdB4h$W2N$k=<j`OD(H1e)rA`FF5>tT(
zHmF$W$aAPk@mnUykG_>_e=>9bkT-Qv8v)_O>mkqOr`V0{bH!G^QMJkVok5uGXKg+I
zfOi9S)j~25vQY?{M?P>)R$1Ul($slx7f4#u=A4qQvG|{o9jJMTSjb|7{n(TtI+|ca
zU5EE{PM73-T*6AmL1?Ta1)Pw6+rlFb`FvViCZ_K|k4ma)m{E7i?epG-4FvBerr5M3
zpXBrBC<+_jYv|~JaiGP*A6i!?<iWeA4`2hF4Az8gXsKQDQGQEUOb82Z*K7M=EkhAF
zmovPeO^l?*t$f3@n?o>8L7XiER0XN56sFzy<Mi?_hK@M#R_)A5$+<{i%h+SB%xz)$
zs9#!+<kvSX1?{Kae3K;D`>f|^-~{n9(j7YTjHLb=qCSz<hIPwM!`)87y<Y<_2v)66
z;=cvrfjCeN^;7UbT|OhXUw@XD6I4}A8#^WnO-_PtGni=mkvWo26EF85Sfs?n!H=`)
zBYoYcyme8zsr5F&pcZXU5;3fipT*<80bDv`OZjJp=!X#^BUFcl;`4bJ=nC=x8M^7J
z&N58Tp-@GvQNE+&yx;l3xc!G->xcEw6|~0QyZ4J@ULX#3Ze8lsa%$xngLD&CJSh`E
z!V0iwnX1)zgX;y`H-dYW!-a$7HBv07Ce<~nnCc%7#|;^|bN5iVMk`q@H(qa62qYwW
z?~;p?1P?vm9^2<Us#Bra4#A3HYzv1Ob=L7@jHz^vHT2+Cu>CC&fYt&wvEUDW?Fs)d
zr%%`CQof?N^36&3A(F6qAHLwkY(^#QBmL8!i>Ko(|5BWb$+@{b8Q5CT++}sf#Q<u%
zPozbvv#8;)*%<Kj0-=)}Gi7}0h{1BmSiT%ZE+7Q}l~P}F{{sxB+avz;J)9l#7bj&{
zT%1ef`q*R;)Mg_ESh?Znq$fwHFrOrhN@7SD#a-c&U<&-$AyQ^ut|3yMEQndBT1`af
z)~&~Quh*U=pk4u>Q^RX$LpAM%A)+83673&Vr<M74Ze%3Ds12XBtBlmgI{*N7vNjbA
zPX9^n6ZSx19}sY++cDiJF$@D)hko{fw%63D-+^)gV4pSxs*XG%sn(LS`-13wU)m>}
zOzkhO`Khy%qs<OmJ1iz7;JYQa(y|<+3-$MBOBGPTC7w?fw5wmIl+wX|`alj}#CbkJ
zb(dE+vqfu!zUID#d-Ts@vv!%+fQ9eJ*qJ<rC@GPW0tXi6@xc8UH4Ge1I3>e_SHBe$
z0OjYmia&+78SNg&JOJV2XA^tqPK#is+PX`_5FiB>C=tOMmRvMha0F-ShCWK}p@Xnu
zVa5C3l0P$I;;w*}fy<u0@0rvX$y;bJ_iT;q+L+xP9LPCM13k-p7BZs_aPO6ge4VZ_
zr2roJkE<>l#?DmmP!yNyjjA~Nnq6&}#k*h90&$4k?NP>931;QGFSMrukuRymj~u)r
z&2?6RxYzCyDBa_<;%hJtJU9VSsjSgHH)bh^j2rJC&C;QBKoRX!X}kyd!-Y^TEqY20
zq<AmRalkKw_H@CQ4M0cW!$PU2%sE&+t$n~LS;Z0$QCx9Cy<12nFbem_F`Hs?Dc9W5
zZ3s%5LYOB;>odKK$Z6ZFC#o{wNx`M3m5%Ay_vXK|q~M2ufbIR1vOy&Yj)>F?umb(N
z#l~?!9I=fLs&Eu?+Xp-usE@#F0@8T?LMi7`j^KPNE-<Jo8NL;kz-=F=G$Gi2_B**`
zzrgD}cOZkhlHR4lye0`{KQE{Iut$rp0|3Q|0``wH$v>}NCB3+K9FtS>IZ)$~1h|^q
zE`8FeYkb6I^4KKosEx$_M=Z!D4G#(Z2GmG<EKyR*i@3gjCzti!o(%iFtPYT9ycp+K
zuMEz=;)<}&simGPR#GN-<c{n}9;seXdb$Y&C0XiwKLWr)6)RJrM&|~*+TfT=iAaJZ
z?%|r4H!;b+kd;Vd$WH$8>4hj9XHv<FA?NN>wI>oP(1^>&z`FvmkiOe#rIeA{xYNxJ
z7p)o#hoOMCP7kiOizsrCrt!6i>A?M<6~nL1l<IZCpUoD_m4Ayk8mk<fy~Xt+-f`)6
zy_meWekSc$9Jihdyj7x+ucT^D^AOe9RSI9A0O>>t+*|PruP?K&V~AvT{qCFOATn1N
zN@>Ond;XAdUN(%3%9>@EROua!2KRUQ{nZ$~IXZrU5b1+59{=KL1|o!5qNW9ngYd--
zhuO2tZCX(Udd7UBG3e<<UC!N0&|a&$^MGjaQ`@UZAp(B(b#SpJ3*-rsnDp1zpesVa
ziOk0`IiEVmlNlZ$=AOx2h^N5RJ4tQRi~=E|T|?&KJ%{}O+kHgfrJH-JFK3zrq`!%m
z7nvl~{H?;VDB(OQClMyX)u1Xm1$0Z>JaD@6qOqmrT4jH|8X&OmJhWm5M>d{|90Z~G
z&6~h`ZO*f0lB+vHu1(_hKez?7U*`RX1*6l%Cd18GRJ!jjYk~Z?E8L#nh(;VUo#-J-
z1j~)GshlP2hz>!3Ct+aD;qSJc<&6O7Y4|97zIWZuHUqBAF-I*>FgiyqGb@T=;deUc
zei-+A$G>6;TI~U2>X0w+RkxmV0FP&)#~V9PI{rht<olx4G9<zM_XKH?VvaNZBslL2
z3r&3PKAao#n68$utRf2s<^aH#9@9vf2h9OqUddBTln`%Qp%vL(ZABsAG1MboCmUHz
zy9Povz;m%I4K63M%VpZI0^<l*b!kZFH6g%rsdT^J=unEq>8Ql^a=3Ra*=Y0t6fpeI
zDi8pYzmx_UuX--)JC$~|5-5*eRpeiLEy;rV-olAno-`rX6)s#YAy^QDsCB&zu_0PK
z9Oa$S!Ytps@E%}rY!vr9C&(29CPb>g@&y%GuTV`)Y~&7K<IoXAM-Z5~Y6oGKW}|UW
zE9M@*{o7ze{4v^_HpYxc)ezIhUx7q7R(ZQ9b!m`$4pS(-t;SQB*+ROYQ_yTwIL3rO
z2G9<wkI$*Y(80-C&U4v73<>C+t66mX@I;vyr9m1IFKGy0m-^&kV)K(50VX>3IuCjv
zc)QyWapa?t>$o=}%09jk6k+-+BdGUgD}?L~+hv7*SG-qi3<6gc#@pRqpL$O$*OppT
z-mObGKjKChlSlv%om#0Il!{RqOgs%nvcP*}$G(KpwrOlb4Qqu9(joaYscrzDv)kGr
zhQ__V=Wm(xRaH2#Qg0p$Wm0_W8j~1QSh7SJC{aDb0EN8_M}2ex7H(Q<P*fWO7yz)7
zfEL&;kclbyS|VPDt~>XIab`vG-;eXDzAWD~9~c-I4EMZOx}alBp^q08OhPulA47>}
zi@8%t><ctHYVW(_TD%QJ4tAZXSDO==pgO)T%?Kog%q&;rg_yo0(m%fk5rXZM&zdWS
z!1M6{NkF#0B_vuS<Km889{mhfg?J~Ui3nr|84P$9csTB!&q7t+Awzib$X|4U{}Jtm
z)$<Y}?8NvQ0H;HK5{J@`$me5_M_@NE5C1D9LHKExI!Oq)WImT+(Zbgf2g|I8O)&!t
ziWg!8w@OXec@IQUj!z3D)){W-8L~ok=#0MD-x#H;870n4`I9)&o?YhB?TrU51Rs&X
z<OP7|$>A3vH#lW+U(8k&c_T`IOjaOSDVA25c!=uf*jWCLYYCTkdMxlBt*?9u#t@9i
zevHc{<tI_R-er(iGLs38<ux@Z>%V3s^oG|TOflOi41z|5w>?r!!{(k?r3hN~-n=LW
zQ0Q*Xriz_$<XPYaceMr`FLUp60=T$4I@6o!u8w?%P#oy~Yyz_vu*a1VG+eS?ZWe^(
zA;V^;wBFVf;zk}(<<Y7)*7XJFC&+vLaA{hPC1gcUUCX)Cw~=CrHJ;UHlqasYnl?ZP
zNM$+z7-=buTMJ<x-%>@AZ!a>;z)bLgE!SLY^J>kJ{i@b8D02SKD))O39_sm)KUCq^
zjijH_&C<$=q8T$aBp8OyTKe)~o=`>dSKzb7i$KH3ww}Z%XrmN@ihep|zM}jUzC7e+
zv2!c&j8qzpK!l;)DNW5W%-}wtru}UpcYtxG7nYs1_n34B^iR^G6P`s46UuO50LFCu
zUgrZcQjD~bt?+S%;bAnCZjq?EZfm7DZ|gZ^uGy)-taH#z0<k>sjWI0TBd8Ugeza~+
z)i}KoUHftU5LPeiSRse>C(WXCvqtF?v!0yTX1H>EyB?qxpz}wI#no}5hNU_A$Tc*c
z9D-jpGqSJ!w7@C}kY0VJ9r<X?=kE$LeLklCw(^EqZF?rBGP$|AW9}k>{a9@6mbP<_
z%Ib2UTqI+jyjTpQB`QanfW2*C1Wr`+31;@h2mqCPaMI>EiC0-%qk&`@xeGe2L(^)i
zhp{X#{9qvS;d0F(N)fTzKhW}ZM=K||yDH<bh_fTz`<+N2`zQXYIC_uS4RoLIy`oW^
zD$Hb=T7cvC5_f=|tg-eE;ei1b7jbV88?fZKNpt!Bbz0$BdWLuA^?ofbqV41}01WVb
zIE2fm7YYxJE0ZJ^I+xYrE;aPa-QyPWSF>mQWh^8^NGv+?%2CUc;qg6o9+1&d=(2a$
zzk4KVM4MV?2@8?Mk+je!rA?<B^GO)L?uGwiVD!g+b5Ty)4pR!?2Zpf}47X;DH78~K
z50|EcEb-vbyzy^m(qgz@=3s7rOocb0zE`u>UEQ%-z1{3|J0A-Q6?O`44jmOvVJUi&
zTm;tcb~KdjS%W5CU#X#PZ+7jt{-!S3`blY9?V_`LQ>0}#gn7ZWc6!EFF;jbmw8>Yj
zDDj`Ti5YJuP1YlMu1q8CgSN>5o@f%=Q~8bj?0V!h#4F==+~-)1K={?itK~mxVB!rL
zHG!D&4*lSB^NvN<7D4&KVO7==2grG@s%@4gD^#2sO+t+^EmpD@d6;|&@Sh1_gG>(}
zSvGgSaR2iHn^Jr7qJ+|ONi`Z`m1&Q+*)kKAL>~SDHZO&TB44aeE`eEzsCB8Ag-Z%M
z0qpN{YJ&GC9t-M4m2<Fyr_#!pTHZz>r9CQ9;+Rz}xG$#*J}qf)&PI7b;<Ni?LAK&)
zl;s><KNZ_pQ0@(I!{8TCiRqnWDYoj&^7>ubO2ygcz1)ojRo|8tR&JAfUXLX1PnVt@
z6jpyrgXF;d=&*z)Rhx{k)E><1eS@HqeH|cJ-<rr>A_5sBGrOPeD5{tygfP1{91ZAA
zvs%Be>5IeKC~-~#0tzTHQhz~x-gz=}k>2#Ydiw$t4H3|{@hlFgzxXK9_6$keK{`ZE
zC8_23jGp{Ep;UN&@z-Uj7URS3IPKT&wZGp1>zyl|?;h%oC2rT}jc3ZwXKPvy8nhIx
z;YE*Kc`D=wgB}IvTc0{oJOu<o>!kVR0PzA6pWg7i#hA1{AFO86geGd(vh3ry!L1Go
zl-av777j7bir78iW{sX5p_K{2XV0tGyU5dTq(qEl&rr2#@8FPtk)<jaC7=s$$DSr)
zPUk0qgq_CF#1TNA5e|jcSG(yir-yX7ouLwpk~```GtT1^)b^W8fsNWKL+q3{^lbv+
z+&oM7UZyyDtJn5=m6=jo3p28BrcNzH8BDWSU+YpIv)u%S@X(8mvFYP|iEQXqqWqf_
z|EgF_@8-jJd)M!A7+tQX6o(v2Eh*Z#7leue+$pVZ!3L02F1~p!KPD1!P(1P+etH#o
z0tEM-sB)$biJ3)`{XLBY_3B-72o?UkP_qm1-~|-OR<sCZPM-#Ssl%<iigoTc3ZQOk
z0K`-|(>bLqX*${JYNc|YLN_!OEtnrk`UNSa{*CW!VoDCNM_<Dnzbn9oD+fvpkThQ6
zln#AaC`+D%jHzuuVSeAfg-$#uuf`na{?EbOZl*a);`Yf42Jj+ni3%CCmaw3y4K(?U
zL+=a}wkd%9dzOk<2KBs4*+|wZDdlwreH*FGW=Z`SFQvyEQWvm6IL)bqXCs~KhU)<?
z#PN5f+F+(k0$0ZrU$^oqhvFp{?cf;Ni68e{q2c(?y6tC*iV-{@Z+1V*k)=H<_Fvqo
zBkMpBk%W%P!G#oMfAa<EzF7QF>T5o_!!+Da7V6LS!45BpDma}oikgQ-25m}AsMsoQ
z)4Jr61!4ZV-<xSD%4kgd7UR?Kj0x#K>plFbe>JWko9#E_#Qy^NdeZ7y#G}~&aoBY6
z+#t-5dEhMKI3&_Zm@672i^)~|^B$1c_&rT*w`B+_Nj($zRL7%Ssf<mI(5y|Z8z(Y2
z@lorY)=y+5PJdjVo@auneA`zze{YaHQ;=4%x&dkmmL;jr$H#LzJ_Cnz2;VsYO^5H$
z6h%$_b;dVmwi8PZ{@51n0QH_(xZ^W`FxZd~CMver$-QJ~69&p97l;+BN(|TuL_+>#
zWAb7jB*~d^ovlOoy5_mP_E7APM)`-@apVA7Bo=nU2Wl9l;Z>+^eF3#%%mR?iX+_*%
z1j1D?b(yQvOFB@jvMO|msYSj@L*Xj9HdAHH_y@d1#umPrI|2^Bd}DE^ni6Am*Ml3)
z&oK7>vcRBI7F7UUZTbk8_V<Dg=Jug;<N3BL*bs&jHMFE=A|NNKC+HmJ#o{m|s<gKd
zOl;qD2qf+j>|H5dE!3cR_9mbY6pW%YGVh?-Lt?6bCT7onVBAn}Tkm#|ZoZQ4I)ps>
zx&XHb^6r6^6?us!N0<-}^l(9tZFr-xOkaC^UL~+j6Lfv^kQ^dWe;GZ5X-soktxc~$
z0ol2^GZr2Ea`49H|9<!~Qx4bHy{5=928lh$@wMDANuEWi!y8kEyC#6z4iN{k07RrC
zU#ydx%-gM6D?bE_RY-TP;`9JX$e+OzWcXy8HCy;%tild=*6y7lD)rIZ;LnVsR13Rp
z7}?8RsSUD^-uSRTqjgZTA7rS$8A3f1g=jqAZl&Y5NyU3`Z!o4p{cSpG#&W%Egw0Wy
z_UBH4O>KCe-Pf~$SM5RzmvZ3jwdP!`zFKOF4C0mhB87=Eo(xhZXhp-<*XtQ_@V{!(
zyI{7Hy&m6(iTJh1U#j3D#P?DmUZv7kuUBZH-{7HOVY^d`*W3|)cxd<a!i%B_rig~S
zq{O&ZNID@(W+x+Or0my|T^Oh)L>OTB&K?Vn(~C{6w0}`@^B0z%BPVBA$a$51+IarY
zB}x|f^=izxxpF(jb9dpDUSQ!@!YG`~w?09(#ljX(^5p}Uo`9sEU?-}ES6~74o3v{z
zARgb|?Qwf_PK)t4Ii}YQB9&zMA-sJ>8f`kVQ)z9PN!xzo#jC|S!e!h@6CSw;GYIKm
zTM-o}A6I8xjOW8{?y$tp6<+nk{}o01;6k%h1nwf?E+s|8*Aa3fNNowWnThEavj7yS
z>jBwxyzSoQQTw8FcQ5KoC9V62eN4%bKcENK7<rT*^0%|uCnU;a*8eqK)MK6Vc0uRr
zrwf2C39|usuHC{D<Ra(`YkL>R7zuEaZMhXRX&|xK%?$!ZQDjk;SCsexlbkl^R|jPl
z+3C5oO7I$h<JzuqiQixz4MO?-ckgH5-%3YKsSuQ((uZ%xxi%lav}O6=3!T1{Hl&Ir
z+apob0g@QL*nnkD{)(VV6I_S<Ldc@w95ZI?XU?v)`DlLok=t+;92{tmm&FvU8@JE9
ztv0~Miyh3?oe%~D*B?O76Mc7C0IMUVh)M8=(Fbw=6-T)oQ?SF%o3YMuwh=T*k)Ca5
z=Dc3D6`-wAL098L0_zcg#t&hIO^He?D6Gpw_ZJ2qh09HgnBQ{z%U;0H)r7H?WsxR>
zjI2P<uI&sOQdN9Ce_A!I?L5fR)E6Pw$bP3Ta@vD2+js{%rcEDUKl<axte#^}{4I9_
z+~N|Iy*5}PnTWgli)>7i#ysSbis^NYI2ylvS<2JXZs<tI^zW7O`DRc<_$-!r;W!g;
z%*e=GYD>o<{XmPG&R?`P%f)B;_ddrrcUJwaU-~~9!RGcHP$at3CryJ^w1qO{cZEOw
zm$h%QsIu=+IE3^mu!vZ?`L<yc))_!?_rPWF|DX;Jo|Lu)LxM=cvDIiR{D2~Su!Pst
z(Mi?zK_ElC=y3ED7dd8s`9zt&>hO;)oFMU$9I;&IW@_O&K<@GN!>l1XEClnlk=ikr
z2aX~plNvj~a<^&}V6PCPvqS<TU6LF;+%c~QT9v}{x~*Sc^#Ip*FBjSi%&{lgvitx3
z*%@h(mXbndWvk^iNOM7y?fs(0#mTmlE5~^PfKcy`Gbs8AX~+Xu8^`)M6LCB>`>{x_
z_<Zn)dG%Ll61fySCJ3_wZ+OZm{qM8<U-u@<7RISBKobJl?Aa+}(tZ%F^<b%#nj*Mw
z+dvr}C^Rd*s=7$brXr&DBpSaYD)s67`-A(}^cvPT`2&rZW_&FSoR2IUarV8?f1<2E
zUZ!_D-=q@XUyy}(TJf1_MY@O$_oHF7<TxEIs(4EhpAaz#DBqX@775$<Pa{_S6vow(
zR-!JbjfRPP?Rr!QNXr(hM6BD_&-e<-?}_Red=dq;6Ck$YGtZs#GVWWlV{y!ibh%cf
zft%>LBWCG@C8Ki!3Hb`W=Ig<V#YOy!ZS0*pXkvC2T9uz<g0FpU=1M2r`K3W>q+^{O
zS%z2%J!A<F_P&r>UO{nSsX6%!86=}{t0qtQwxgdeEuhA}*?-QA@ficZ5)QN$PAO@s
z#j2d)zT9a%RoDVLU{!o2S&?b(5f~czx=AQU0fW`>rwO)hfb%1ZsM1_tR1V8g!0{q#
z8M60|+J-qVum0{KPj+K$Q9I!+DsEu#BrF4XINdZK7T3!qA@r}TNq>4kCoy%Cyy}`_
zMHojll(cTO0|w&|b4Xl|Smdyx3G9tjegKROU9}WAYM(0j_Zi@mJMzUAB<fA>OG=lR
zWd<+EXo*C#Clx>c3Gq>j(k6;oiNiR1js)x0o~C=9<@6=ETD>B8TdUFFl$Up1Hqsvw
zF8kRT^F2UKW)CQREXnN`^$RY?CmujN2O-w+sRsu!zWMcy3iovr5s?+OK62;hAvwSv
z87OR_%h-a}rAEo<3_ikYA!pOyc#*0*y|(Py^KgD9$jAaSL)^2ptJl7GTXtV%69niL
zD19Q7&TQD5i2CkG{hRJ1|NjUP^%W%V#EL&tSMk!_neQ@sNBm(Av4~q9zKN5HSp*Lo
z&frK9EQoXG8-x56!3YHpoG!#FY4Fy#V3laK*dSVW2-G&c9gCXdRhWOHi(|SLM)O|1
zcdyTqZu#wk4)*F$&{6%jmh5^8(`)%U=;rdy1JBgE1;Qz*)zqo#`wMaC`BgDmNN+$G
z5pRO#L}?!HHH}`J*9G(tV}0Qf7LihGFhHQSUudE)V7o#`)5HnYTEl&(HtFnk4M<sx
zh8`8f58PPHmd=<2E^4+vCkAtqEY?g-r=|$G)(deuN&u1|Y}lNO{1>*d=})7{<CE=L
zFq~@?QMU5zChr{4-&b~OU=S7kEbNb`TbkQQVQCgxJ#WYoPU#Fv1v&Y4kzl^voQEXR
zVPF+8vc7Uk^oy6keV*k18hSb1$NOd%@kF(SZ?ep#%9LsqHT+N0Qc?Xqds6u8GOvl2
zhkAZbQWTJ2bz{w@&nqc}N@v2K=r>?SJ}t{D!+d_kD}cj8ejhNgkogLIKRC@Ma((ZP
z;+1aMc#(i(9u;eiGV!#+4aNx(j+OX<`!Nd%N=4z>8}--KB$KmMZc{`-jh>aHjJe+B
zi~#`7d+dp^>(FJ+P+&YVet-W(`??NgcF#7%?t0AK0QeW42)n1En1b(4MZd|!KNX-U
zP#JR(nj>}4e?L0%WLVEO4_Ti+4A9UUNd0<jyrL7g^i2~G-ntqd^4-%I*Xv=ToG*K3
zdnHqv0GSq;=apQjw(5oOuGg{-l<u=GP1LN%L~BbIgEAv~-$}FFC#kTcJB6&{<$}-u
z2#%m<?CQ0302)Tf@ZTK!OYL-NdXp$5+M+n~3&V7=MhB$ytfu)3w073PH_W~M&h@-n
zv!K9fuyXhL>xMXLa4-d~tEj0xs88aqC-2WkStdyqnY?y{FP7_D;Q7zPJ+p44lMIi_
zvoI`R<J#$mA&_7>!#Htq`InZGViuU)nui}F0iB;|{d>xJ=KAhN*5TIn+?s4@(;>5S
zL5am13;F=Dcw&dQV@eiNH2QHVuZ{WKdKjfC64?za?xfD&tfZ0(A1520b#s;Hj;t$M
zh=oscM4L$lju}<IF9JMf2lTu6Ciy!f!%`$Wx^ij_Ar$on_i}(6Hd!@NuW^5ne07gn
zrw+fojdr}~g&Vhoa9(wY<mT4=OKR@h2kaDP(e*6QToVQuju(xtFax|j_o)~81cE?p
z&_j@VL(-3mzjwE{Y;yx-6~>{I8|vt&!l9WMJjGAQK_toRpm8*Iui6@ekyV)i_QV~_
z^I`z%7K_}6(y`@B6l~vAi&Iyq<HzDI*Xvv@U2!OKq3aezDp)*Myl6^i7I<YfSx18S
z96qghE=v3&*#jsqk)Xc*1)Xob0vm<eqPxPV=bf7`zAl7&3anD45h`jTlfYb2P;(m0
zya>G!E+{5gDw#RRpcmx2e-1u18u9mV9Q+L;FT_uSOIDN!NTRWM({ZCU5h!CB6lL#x
zNwlrLUf~Ukm10Ga?dOxi_CAKj{Ix6*c|u1)1kMR&-w=<_mxLE?K1CqkkGl0o7he(@
z8Q+_nDU>THR#Aus6jkZJ%~gq?=^;eV9R27)GC|t)FnO#JyMe`>4Op_OMk!zmpVhPG
zX{mKoc}j?|vT90L?5sD(&{Xdtdbc>@m>VaZH2OpoZ^OGw+Pp<wcxv&liji^=dETo{
z4qJ^;_LU<(&9i59{mDNobHF1@LpR`R`A6;Kq!0SJVlgq0{jnjs58Dd7lb$@On109S
z=@cS|9v(Xn((uRm)taYg^C!3C`1lFmGd|XvPYxYh#XaciIkBjhp^0Ri$U;Nb)<DFq
z+{=;x2q(}*Ee2SG!~tgZp?#BAN}yDpr!QXw$B<Zgj2#bi1WRpA;bPnmo@4wFR8MNy
zt5wz^W!*vc_0HzNWRc$_-D0<_GQxox!xARdG+f`Y(C&#IY186klr0$@%@W_KH;J6e
zPa}@zf`H7o-Kv~{nq<Mj0Us|js*#NXT-e+`Z#;-ai+=v04TlgBmf>TqAB+9Q%Tq>z
z<gsoex=<Mp5jA9!b#diRFdc7vQT?vBSHt26A8B4#TSm#ZzX?3U6gGP)ryniA{G~Bv
zdDNOC#MPoT;{pf}+a^?F`!fZ*kw5)@As;Zoq2#`O7Tt{<WU|XsVc0!t9j&q_93WIZ
zS+P7umZC7iaw-E?6((X=`nfbZ`nlxAuIYegn`0&x$DN@1{OI<7{h83G-6hSi@<nl`
zVt$~Da#o}0Pf2s_&e%;PISnMFlxcH2Bb!<XVI8Yj7yaOzk$E;~Ai96K6GMTPUcz|n
zlIE!r(~tG$^fn9ysfpmc3=VAP?h_A(t`vt3kSmS9{ESMN4%d)y14AR_WXmAi(F@@S
z&(4S;P<2QOb~I8zYPX*cXIz1MFg0Qr6iOznH?80a4Hf+u@s@p-|H`sm4&OSnI{uBk
zqIK-Gv;EhY6WV+Gv({*OS`r4t@)luhQ9>lhi5vDWtEBDSZb<{pj$%>68j7V}3i<^g
zGVc3dgrTTWTTn`k;Op}Lh)sno+h;KXs*<+0OMv?KK?6$kll5hwlUKm|P$Tdqs<mY<
zPJ_Pr)>F2S>D{r+{alBkvGIgHv7HSdBcBJ!#o?5Yj+RhSLj|?U*t4NEDiKva!T!?B
z$vXM+$}EV-4M)_R0v=05dLDIuVzirZ!r=<f*c~jZqvwTjuUJS#HLJi`_S$J$Rqew!
zDfr$KkG=U|*7+~7uqIR`S>GHk;8Nh`#m2$bLp6lm0{XzX)kk0Xo53di=WKARrz2{N
zc#|!JTJ<h$I^p?0^80;mYbz`Y8q?h=&md)zfq%TDZmiC4r^~R&ru?+wG<5N6Ji>~i
zvTbLDp;~w|Vu|L4=W5zmQ~g$oo6`aR27hkgGSwj$3w0j6NrDDix{7v-+y>9~0tezj
zCTS=?^ct2p7JPI>jv<w175fa9X6QeNhbyy_O1B*Tfe(iR4T^+A#}dR&egnBnV+;u{
z1urx$>_ieU5vUE++L_q52CjedCxUOCf4nI-St87O&BXqZvMF{};$0BRjDSK0f9(Su
zDPWp`WvNz`apjDG>6f;O{rKhxf~LepDJeC+hYL5~#q>7ppI_P<AM-83_&0KS#i0gC
z$4IcsjbT+@yF;jzM_9ms_jNhq6pwkb8rB}p!xOqU#$*DQAcfX=cngS`(^f)<O2ySx
zA&AEJtzRDY7gz2)k_J91DMx*(0){rWAh4@dWcI^z{0{oG97%D%O(9*=L7sQfwlnqD
z)Qu*H>52tu=U}*CIst0H%_9ab9|fn;x81AenlXun1or$wcL6bMj-);Tmv!iiDFT0h
zV+}*Q9xR0!En>9BNX{Ze+1R@5B;Uocw-3Km6m0OVUvBvh5-f~cc&`(dbvV8Ft!EAy
z8t*QB$*ZS6D>FEC>6%D_BeG`IQ&9eIFKZM<+dwsqdSMiwRAK(S*5UywfJMV{DBOHU
z*DzX-D(JH}<OMC>web-jS(7*xj#^CC4X^qy&&{yleDCfJ+D9HutDWOth(X0RpfG~R
zj{<H->-i2}Ft~YSsfu~wbe^ynBG0|`b<kR_S4uGHUtBY}P4b&!E8vqGTf7)gBg2k1
z1$DbN>cr8^*Aeja&9GTowXBL5DjKVtv%Kiua5ff#$xG+tOaEdbum!p=fq}-GPOMJ3
zAA+&}=D{*H8=to~r=NbIR10*xVW1D{x1*)Wj1hU21oaN(rW$i`x)v?~No4}uo~+3X
zA|=tyQFB;G@Je-1zdyfl)_!MJ^>Z<g?fB%+JCI!-o1d5bZ;PeYZ5p<;kSLIErZ?WU
zvfTN5Pg60}B||DY=Z*vF$v`;t?`t>Cl))_LgY&T&=F2;24qv4AxLeofzrqe+LY>6a
zz;<=|SjjjdpmNL*JMgMrL0F+s)%cv`3K`l4`@XzcO2Ha^oQB}*__!UI!@c<J%}xa2
zNRd$?SIr%m|Fy}|UP#C_cN2ku9FAf9z9(^TfQ_A4Im)^SX?(+EGZEo`8tWecZy5Z2
z&~6Pi5OQOEHd7OP1bgVV#tajk0ZTdRB>($=guV><Ye+wB!fZ{@HLoxUn<-%D)MvnP
zXh_Q^nCU%H!q3yHOkvtP_E1DHHe-;LbPAB_bXc8alLH!UH%n&vp!p#Pupoui8p2p-
zAel!-^6}aHbrSi&U@6kDgyB9LCI=JNap;fPzDZb#U%w9DjzC*Ie83$`V-h##Cvsqs
zSw(r&F!>3w&06`3zW9IT*IE|MYgWqnF&RNfc?Ah)ez~g56+T1%Bhj^Q_>O9=M%PF1
zRskvTjT!tlV+!@<P?E0q9>X+U$1KIS_sfJPUV`h9an8gT&pjgr{6K;z33jo)_&G8)
zeXmh;oO)JHNGt*xg26g0fblgefH0+}WdD*6hRlHK{NoNgu<B7@U2@32e$b>}8B3=U
zAbS-?Gie{9v#tJ>xkw{!<uz*K3rLGqD7}9~L0&_=#Tr*ST2VBJ#pXtd*nXDOW6+Z_
zSEjwLl&x=5^(QX>AkEM#(focUZ|C{OZzX<|@trO0zHW5&+6tUe=m(qAvor<&c~LJL
z8Rrpo?0vEX3eZU$Bfr<0MXu|T9ln#5z4+N<?rBLqv;Wb{I!f~FIh0U`%pIk@_8jZ;
z@Ioc-LvVC_{Ty7%>vHyY{Aw#%wc@%|ov1{y;6UoK2LMKf?){C^P8B%;_4T%KXy{Qq
zdQM(aU$>(FGT6I*pxF~OY{0pyp(xla4OL&^;&Y4E{20gfUD7vG<k0y9+uSW43)iq^
zcKm2mnlgQ8m*Z6bP&s+gmJ=vy0roY98jphNhdxEE%>PxpPsY4zfr4n|%Y-RH92Iw~
z+>I^|p4*hQRJ42+q8b*SfMe7|$q3I^Hjfo_S_&HYKNPsVO0rnvlpQ7%e&Clt3AFxt
zdz|Iin~y)wUV<LtEeDgO(;nGI-vL7?`{32{{j{@G7+19mvW@Qj&ea}He&xxjqy6p{
z?pNTy6Me&D8#GdHwGW`DNTVd9533V2p8b8Gni3z^LAmC~Y8d8-G?Ar`6WDpD`u3s!
zu9{OYej*BGS{b(~l%9Q0`}Wnhme877$l^AF>kN1{Gg!Tprx?+^yg{pmN+S#*z7H_5
z2utF|id#WCPXUH7AzB{4#XkaCmbVI;_u1Ug%=gc3Br5SK1UGAw#ld`Y-B!+{jamjF
zyd*f6!Fy6kV9_Svl>;y5g$W}l6MK#*r4<0cs~rOfF;n+t{3Aasf0IgD^t~D`P3yYm
z-EwpS5`%Xu-C*h}aKiWbTCG!)cX5ClG!2W>yRyj5qbk!1lK1G=<X4)Opl>Arv7`lJ
zrbxLgwK^3vXGmm5z66vyY{Wf`pmxk4&P7+R1m|KhMEiuY#h^7&R%wF^vhb*l0bvDL
zeZ_pxuO#K<SNT`2)(D(Cz?Mj}wzHEFU#bVXlXtji_35o@9X@%JMtsCwOw>o2K*)Kp
z3y=6LKb^74q+L&_7xbej*#F-=@`2lXX~8WqkAO$P?XCrnU@)mWwBqAm;HPZ%zq#Cn
zCTpzFdw7`ziaEnT7fb_iX%9bgPm_A2c2oT;T-bNH;<)$+Lud6b^D}#|;_~o_7XvaL
zenZ8wxd|`~nqai_3jLBa4<$#kuJNFP;DeWZ>OFYtNj8MwBRklLBhgn|(2<YacAfvR
z>BA+3EN6DT8dO8#Wi^%5P<{yi=5lB=5E-yf@;EwW)*3EnPIC+6&}}?KbclL0!{>TA
z9sX~fsWyLnj8xA0``IEBSGUfAwoY_j$fDwa0B~HKJ9*>vUI7WOCa)R{fF<G3>esFp
zjaeoZvjfYLQlmB8svw3dCcv;vSt42vSEAcn(v_qi^t|4v`HOmJ!xl#An+pf`YovAm
z|Nl?_{yk6dD3*Z#z?f>l8B|(1&pq!msQTf?sk>g)l5O-%{s(4gNMo*&0rfbYrmfX>
za_0FvYX9BiFaMwa{9lb-fB*mZ=c}>9W6Z+Acn^`$dq;dQNzc7G005C_L7MV-L&=oD
zgCG9ZrBGg!Ze-zQ;|IAL?Mfp1Ve@^kU{jQETMx=9q?BXmbGgxiRFD;ye46a70Ea8k
z(|n--bk|Ehrlk!~r~UYrQn?hc9tUpX56}R8y^X>5A}93n-{50aNK!5~79#EGZ&eEo
znNYx(sUUPOc`Ow6@^l+aqUfAhpdL$mkl(i*6>6}9c%S&#xV&~Tr_F%R>I4twZIpve
z+BG_o2Icodfc&o%lZ)-%Ibk<7bH4hyCxn<AGUNX;-=iUo8(pLptc@K0ZmqIyC+?U4
zb+Zk;X}3jGHno(-r?_IW0i{DF&Yz;OFl$W#04=8kb3qn*5XT0S*{ek?L=0~g`6zzK
zvM8JXN|BJyWNu#D)t1>tfcki;48sVyF4lu9rvV`6A^Jnke{u>u-m*-U&t>R&xy=u~
zo{Q2RQgWqS1UEn_O6kj+5uRYtpB#PS&TD#2y1ZT6-gu#)eA!hu#fHhLK6M31tD=6f
z)s(9Z%l7iPCf%fkToD!~Hn!5I5|0w4=<TO0-I#qimmT>zEPFZ!KdxBi#qZbyeZp$N
zvV}WNzGb+6Q*`U>xkTWhaW@khdqJO-FE0<@-~hzFDYJ2c4T`MCmvNqABW!8U8m0#~
zfw_)xi5?X0q-IPb^>;Bs#)f0mP%5G$eVQ_Oa4j4Is^D0Q%l8peOHmYPmp3EUIIL{`
zaqeIkz-r^ZITDY1QzgFrhhpl4E)AHE(okSzl020zSr`~NZ<ws=<)y@N9NS9iM5M2g
z9&Z~}K}P;?=Se=>Qm@yag8|)c0j1vg66+S#D^9rk@&qSxjhCrK2fjL#%k%v4ylgh)
zalWxqVa~nL8G!pxwjB7@QZu<g@BV4`5Smm?7vKVc?})rpMp`}HT)S1gsf(zuz|0t6
z(QF;ZGD(C})+v*?KxsL>VXC_Xfn#&%B|GTk&-aYOC!4l>=2YDbGp4*BO8L~LRW%Bu
zqHFRUq9LSkK=?)-+pB~LVKOc2tR)4YkRM;+D9(5!e{%~P7?-+;$QZgk4el+<rI71z
zHZ~K2LcdO4YLrG0xe&%cK8cH70bk}(Clrk<!s^6ZeA<uo=8U^{+pab93qI}%qMGvD
z`8yL6dZ#tbxwX3oxWoor7jD%njHf6`Da)0=2_7|Vq!l{o1s|DZ0Oo=Sg4FblJV;|Y
zhzLz5_b(`2F+U_W3!j)czhoC_Y0@y47gGh0AffhkOkK7jk=NoN!Qc5LBGFwFMkAZF
zL{=;eFY6+!9zjDOJSDBW_7wCTGqXz#iiY{#8-+@7ch>2w)?^UG68H5Mdd8GN!n#<W
z)8>6tS{^~Bj|H)D4x~|0Bn9J8bzNGG&!xnX!JAJfaJV07n7k9EfN|mdzR^dDrOA1q
zmP=g4w+ekhfI%Lq7oW}(o?fhtJtR~Dl^5k<+v*I~G-dY7_o2noWpKsd6TLXMGsMl?
z^K$%_k$#XyKRJlL*-~PO`zT{Xdbli3P!LFarBj@_>0+(k4bp1dOjU*>h=wp=L!!wo
zyli~kRfiaKpOnW=?wheqs+SVe8{8__r%s^8Osms_K<<(yZ?OT8JVSaxb{jVy!~dIx
zyE+rlj(|pL?R|Xj+kX;*N7sKi&;nPG@**HF3Xe)Fe-0W92sZ)4<r5n!GAN2`c!RPQ
zCztt|kl7*=7$4&{O$SFT|Bnmww2C#qezzPz%@dU5(;QvTbwrcy-x6B)8;%B^JGo{Y
ze50wrA<1C6(!T}(+%g_fsmgpxM4|wRokg#+5d7TH85@2duL~x$`+^zoUxsfy;{FY(
z)X2>`q)Tz|IBUCLlZn}qt&yRe*>@h!Ly53H*JG^QuY6UFR6(+9MHd~qkGAg3M~1k<
zS8UA5q;R#SJcO4C)mEP<jM@f=Q6(iq8G^-HC^$)0==zckeHE0fKQNPwA^eC%gga@x
zcjD_5dx(>G$FyRRT(n?S^1u|}``8tebDF9Ke<TuVvt&qbEw4#<(Ll`4545>xUe&=v
z2flL_jFg$Sy@J`ZtwH6fN%KU&vMTL4Mln=D`@|9;2}YSsgjSKfW;yhAxgpT!C#Grn
zprZYtPPb#)vxwuZQH)QE8i%$Zp{`bm-$zX(+E4*LxNJ0|&a)$CK`K_IL3|k@m__b1
zsYG780gr7@V(p4KEU>wFAeIDk17x|{AfDM@KQF)SEW6zyGpi;H6bh>l@D>qh#wvHn
zbzxrExiE)v5|(_{f>y_k^!dZd`v44F{k>3O#A!1Zj9V)Y;<w}Ck*-0XHqKQ@c<-nF
zJ!#J0L;p-$?65yhKkv2@MabuTd$5O~xEVE!8-V7)?*KUQog1rYk0awvx^CB{ol6J&
z#Q)hBZ?eXro1#DkW<{?SsGl6#GV4=^*)nvO7w3Mc$(PwOcu`VY3&g)V%aX+!$^f@F
z(Yc)gi;h2U6G$d0KI|3mQstkMV@p#USs{FayGFFMUNMAUF*E&faLNFfLEpg6xvo00
zjaL0a8>I#x#K({>X2M*$2KcxOWjY?5WT2SBFnQSIm-4u-HqP^my1{>9yl}9NFwnr1
z=2AvL9EN^D_gMW#Yu>k#v#QYNl&LHYsOE(tp|9yv6tLm=k|Y?4nX$oAJqis9D4sFA
zV5cgNxxm*z4bg-@RJLKSSR8Oc`^{i$CvvQ-J3&4|&ZckAy`ow^5sj`Mznt8;xA;-W
zi+kM!nYS!(U2QH#l4rO{3gEl14wUE}N3Hyz`ZHVr%Ou7Zh7GM6!0m%q2_H@>v?AoU
z#zp>w5R7v=N~zNABm=f^`&hGP8v|{l4b<+v)aa_$*1onS?UTs^j-Q`f|MdI|UB}+H
zw<sMr%f2CJ5vjXNTNHqd%qMUF)($1ahtB!dBg>4ALk)T0>KM}?4L#>0jgKVA;4Ikc
zCe3}<<hy+%LxT=gP_zEv^L@9tU6G3r)aJDmczNUoSijS#ylFO(#Jcq>=F(uqE&jqg
zo-XOBVs@0EVZ;=Z@@T&I&nlWu7*w3prb2BK;zT2+9bF;IE7)jnE4a`LwMM5Mf4N7e
zMzM1Eo9}TNf-%gQo*X7i9k6%SF^5FhW_bAOwyn+c^<4aJ3XxOOqi7+5{a@#x^+&{U
zHDy!rzD;2D7dub@EmpN0>L|Dco&>b;1jjuFBvZKJ`A_^22}-k9zc7;L<D>>&s@rG?
zCDlz4r2FyX8kLtN3#IutK+h8vw?Q?fBuK9<4=Ik~&8<GPzG`(sM{K(bf1W@K^YJfc
z{CcwawXgls63kg;9H-c|mBzr%u!3c&04Z!6N<*Wn=?q$gm3{{pC!5~b;h{1php5a!
z(*ZsV4F3|c4clAVPYVNv8Emomtxh(J7Nz^jB{aU_EqQcft6LvdFhU8lW%h<Y#7d(j
za(!{71-IQL*k?&Ll}6L_{dtfz5w^lwZ@vS!k2n{l<t~pmfpe<mn$KtIjq2<a_Pr;2
z&B32-K=~9}49#=7z=J+W>z7%33dWlnn&hJRw|Gm)x>4(G;2FK*7$sK4;Jtv+oL?qP
zQ4V_=-SsIXP-lG|Z25qx^v6PV2WND{8#<-V@_s#Yk-lqAzS3@ylkr~~xOtDwNIjyz
z(UJ-QjOfRnr{3gI@9$RVn({bEF+bOAG(@=a6Y7`WTualze*^V2i0tjA{}dME8CH^V
zF9ddRwykdxjl%1vfthV=<x}huEXBD?Q4L{P5xlo0nh+4zE+7m_SNeul>{M_RIi$|_
z#FTL(1Wi!3eyR<YT~-I_Oe1rlL0HRl@V~HYLeKEdd=g+^D2y)r&r$?k#g%|skuZdn
z%k-^S1NY_ySew%y=o`1#0b3mfNyP9**F&9f4S9L6XM<xm7QNv|Xaz`ElIRj!?N&={
zd{C5VBLs6S7Mr9;D3d^<GS}e=*DFvpA%`3!`4Y)$YJUjg`vb?dXv)Hrx~@!(d~iDM
zxzw+57=oCNpN`w^HbBRO&>qx$*YSb|g-b)lDs#LlU_*piw<IoX7+DjXVZKE>g~<rj
z7*R2H|M=w)q|H{VwWo6<9*}MNYO>^wO8XVm9q`!-B!n|%f=%BCY@&c8ugmOoWnYt=
zk@;YejSm8`-?akUhy^yn{EIXND7sDZFlNmD6*%I%b+^N`qgSaKrH&Aka;(M*4mzID
zk}`^4Qszh%C4HQ;+<MI!-4@vbrx}Ar*nG)AX@yM}2JH8o%tbS19Rv_zCys3!x}%<-
zefEVng&_G_zHK;v-kMe5uvkk43Rx-9)bsvG|8POxr;&8}Qt9A3^c?rrXR&&+&hp~!
z90z&{h=MZSrtS2s^=^%Qb^;iSGFyH7gOcofLVIznct%99@gcB2obJ47r$cws{F%&t
z(y7B6&acJFM^B#zrzGp7$d-^=@W6N|R5?oYr>o6ma!uX=3ljUPg<AuQ3>}O=?5?J(
zop4Gvccc^eAHn#kTo@I!;7Cl7ld(ATA+Y@iMjVia%@Ez<dA*HXUdv)mY>%p2C*$on
zg>kdYDY7PpqWRsM^a~;z7o*ri<psNq_On7~<O^oFP`mj~(OFN`^3*Cf*t^S?*o@Q9
z-9SY9lRnd8R2MTb3+re9Zq4$kfaELxg%~B4_(-giZHu7N`~iI6mAa(yn7k*kv0jPu
zgrvb0xYhVC=diXjxcs~?yqu2?>@re_5YGt>VY`<DF?769Ma4^MIJVEmD`Hhihet>G
z_jzxU20Ewt{KE)PGYP)X_qaK3OxsBx+op0{D3F@;C5e08db|w<cQGE^_1?$?eF_K`
zkU5T|XT|PxxWZZ7wTU6SVW#xeTXoAKVu@FfIZKdAPs1h!VZBtWI;FM<QjTLKZ;kgf
zgq$I*|K_V9Dm?^wJhAw34GU$p31Q2yVE;u|^JUWcpWsXB)t@$U%c)$c7!S`8RCw)(
z0T{o(K0XZ{NYMV1W_D`KMn?;+NV#z>vtjlT|2v!|z^f_4EcSZh_X;l5H!hsHDU^QI
zawo3T{T8|C^%S2>a8{<58_c>XNN7;*+NaoJgz9DrJ{vw7c?o}_TFs<b?K@2T>k|B@
zfg-12<_P`8VJRu^>zj<@$6(rJkv|AlV3T`AUUvxzIRg!`?9<##4xD}>*o%P}AFI@R
zMvPVJ2s}n+Ewow`@*a*j#og|ZOGjr<>L^c~+$#VC6ufLH6S~ISV}vIL&{P*U>uY~o
z>stujLcRc?)OI~f5~$=xU45969tCYqO;13FR+b`_6|9hdNCsbiOOELWaUHz=pEtAy
z1aI~C)x|k+jS@WHJ7QRv#whhOGL*Y;lz9L6+P5L50iKyf-s{Aqmwe$&&xkxxj^JI4
zY#^$Vn*i*S%ryEPz+ISL;U^L_6bD&Ke1(}t%b)gFM~Zo1@O2U`oZwn=)ITMfqnbs|
z9iZC?mOr7{j@}b}XKd|wE-pcmF_n2@NY3{q-bY3vC*UG@oHbcg4r}`4upqD4+KxdG
zt20Uib>|jSMgZeTbU9MJf~Q>03Q>T&QTz<<g$E_${hk{?Tp|>%J79!hXJ>2#vqBg`
z$7br5nKgx|uL~?U5P!Tja6!`Hxih3qB;f)f)}CWDB6AFMu^Ez&X@k0f)Rp&++e|nK
zK9QyK9h{U=?Fg?=u$wZ7be?@|g@r>z@~(N`U?hy8l{Tq9Y}M3J+bz3J-AAU5s(M1|
zSmgqFm#A^xL!v;jyiLSdkzHVEJ47*8v;bOdqxhAI^BObSPYK<->mKLqeb>XnI>=6&
zN=CPCSWKrt<B6dVA4_R-Z*mgb;O8F#1UDEvdg>yEkz?OVYG7y~Mr}N>{!fpyBb&Oj
z+>yXD?e->&8B{8SflE9Udjno}H|eD0fy=-gGG1l93Jly6)zSS%$^fM^n7k4A3s!9o
zeaW*I7?Yljb9dUuWctqpXcwgD<7O|qD-`rb=~7~6?%A_vn2AgxQd|5=G}|J+h}gP%
z@JZ}$9&*qQTrn&beWsww{^Xrcy?_gb%zY5F@hn~m@rAptl^KsQ-L!zf3Qtpm^tET7
z&$pk$J@fK;eE@NxpjIJJwFk3R{)H?c^ggGRs8Zyzoc(=fV~j^9@n<)Fjj^X|fQL!X
z<!U>9GeJw<9p0DV)D+gxYsQ#QG|lUe4NMp+Ke67!_@fwt_1-4Q?T{SLe~=i7x)AzJ
zesV1Qn(rCY1-Y@a*Qc7}=-ymuULN&>cPR^W=reA6oq>|WXBQfBQNt{rD)gv$#|M;<
z{das_TmClF<f|F}4ApyUx6s>f<t;frOe5+%L}VU^84d(+EsUQ5>KD84txx^C?r;Ey
zG?}e2n779eddu=F=o6pk&5WDDLvjacgb8JZ>6IPa*EgF&94n74OH@rlhhm~aOgYqk
zJ2^ZW@-IG7LFVP_|B$+`IR}p5l3x%3L*Iu*S#<}R32dZ;A^wwP)&?MH`{%*lc-qc+
zSpj;DAxDDi%b4t$Q-i1mCkLMohO3*=$HdjtVl~2;pS=H%PpeZfR(;X?nNmgLRaixU
zAGJH{mpF*kn4LfugS~Q5x}zxWzAhHoPlFZbjHeq0&WD{Sab+gnV_$GhZon(IkL3=0
zm3>`XPF8N_LQB3;c56*vKupY)oD5i{R(AbxyU?pW5Q2jEvNAieaZTdlBEQD|+5Z-m
z8M{@6K48;=efk9tl2E?MLN6|-Xs<Rr30R;bC#=<`+^!HmaZZW&$`6AyK5+`I)BD34
zJp{d42n;(mXcm^9t>Lb)PsY_egl(USn8$9Xeowyi%ALfF(6z^8)e?(}b#n&qx!_B~
zHlF7VrM*-E@2RGB8MW9rw|k2I&#8tizago3$CDd<L2$O(j<7O)Cbf~r&xvFZ5xMmh
zcz(b(oucv#RJt8xTP91=m-~$|x+3*4tjDOVno(_;i!FSrv#>Y&GMfE({bmyL5lVv<
z#5t-<pV_({=VH>tbK|wErCZ&tt?F-V^Vb9vx<-Qnbz&3VokDiwN)R!C%0H+fV`2RX
z-n-)R0>B_)=0R5d{OH0C2$*(Ff!+69)qhr>zKGDa0+XMq;x@@I(C0gA(}^cto4lM$
zU?-hVsAOi_2gnZjU-WELWi6OUvTlbG?u0S5TJypoIDvCaqdj!I@}Q{F{|kPqm;<le
zEwLnMhQ!dZ@h!J4S^zc;p#N6@S;@5dpgzH3p7o-R#k@iN^<t86*#CHgp2Hlcox%0A
z9HD>%=T4ydsW6_<T919vRK$t37ZA#xuD)|dh~^X6Q4nnMdJBhGS`-pkOZ`kaX~^v6
z0fxgx=9Cz&W5%|6=rW?a8a$L32hW%0RFpBXcx6}u=O(L}iTqbYj2x0F9?sJVzC&c1
zu!)+?#Cz;S4!x)SJf(!g28nz|vW50~;DTb+qsK^4BBj;o5pLkiP1i!M3l<4>lgLzo
z>5WMWq60NECW_`*PS&S(nJCvTHsmdVT*-5mF&cJS9@$?)Gz>dhkk}5G9l+L9g6Tup
zdUj5q&E?3kPOreaR(C7f0jEAo(^Mrm#J*U*oJgW=cR`33g|j&d^U|0{%No4WW+p_3
zM{khmq{!LQ2HpbQ9_1b8z|h!ad55oP#}*P!Z|kMSMD6W8U=`Y?LN?uDTj&H_i2idS
zoRd(Qew;agct}nf)wTP<v0pLJ;ZO@K6s$IDSn7{Z=SSV*`t~moN_pd6Ros_b*lIh3
z>2JeT8<Rmyc6`;(9PQ@zsr|k4uMN^@d!ct8&=2qPfQ4d)i!<J(l6noO+qH(Uxn0h|
zA89bDBjP`~L_AF))yEkMZ>wkzmqQa6`;IV@OveCPdHHh`&VFp)U{^|VD?Kv0A1`q{
z6(B>6K1n=B$hh%X<vn20a1N?#7nbMjiYG1F^f_^aYEbxHvtgT<W;Mv9&&djmUZ+d6
zssap-UoXUJZP9BvVdcI>x6e7R6=4O9Ngu{zp5Au6sis7KmIS_Hh`04p`Dfun_o6JB
z9}d3(JSm8VX|h2o+Vs)060?AHyp@I6WdD~=WP#}~FP9Jy!y_3v-L@ir30IM~N;S%p
z0XjC`zs@72CbmD|6uVF)3d239G+alg0&qIY_o#Zp*cgPx*qb8EloxU*)cOnkreNbJ
zP;`P%9%^~ct`LiLmk4m$iRI)OOgym@WzlqbxZQm(ym4;=UM62YLya+1vb^kPp<}9>
zHRuVbzmVHagTQL41SwhzMcJno+DnlR#6^VBUW3>@su}maWrk<Wy{>`U7O2yL&{&1z
z#r9k*tYWqO?$p}Gy*kiY5@IIuk6}gxl6!2Q5SPaZoAq@^OxHEM4=1aBEQpH68t#*O
zq@rF25X?DciLro^-O@8$au^rqq+X=(<gG}x%!`einrHQ({D`^Jlo8lwQdZZc*Ms;3
zoc979t*}VV_|AB^Lr%IUhN)*o(i5vBwyvn0JYzW&>?!DuC?k1Qjg68k697kC;)&eR
zL7)Du0Jxqdu_u5NUeF}&fYsBlvEA^2#_4;+c2sTnZPAs7c?~wM{kM3VqL=!q1+SDA
zAPNHJA|0pj;@aMXqZpW2k(rO_#rLM*@3>Hd<!<uEy5+EEME-bF=va1X{n2-NN`$)n
zTRg@R#>io%?HPXp4;t70&Lb#}i`x^M!PrqK<zVzBCzoIh0&1f75$Bpg4S}06xCMK4
zSLp%+Ft+g7iMXt2C*E78aLL*s<RU8q{yMg5JZM>i6IAkr_^Dbc-}W>P<nz0tWI3R2
zeOJkMtY$;(&I?rg53v)PufJ%cY<V(3A`{#ViS$h6intHo%8pr^C1{78i7ah=cwg{N
zQN8h-wC^tVj+$^wh%Gb|UdS8-!2E`5)k`$uRjT`_;jpRy%z$v?D<8`sX^3riJZ-c$
z&3WE}`PBg!h2G;kuOB;i^qB?)T{bE&Arsi@0rPN3VIHkm=dM0FUpy5UE_I!KBB+S(
z3$EqTx)7Q+2tk{?em?QFsDCsp%}h|>3oY5*)+)*6(%|OC@@nPfU&Z=r^lVL6Bw|4U
zyaoO14mZHTTrb#_TYg~WDsv3#^ZE^xM+D^4)8H8&2Q~pMoudXsoM<a@POu;<d--XK
zSs}fxoq3$d6h#OD0K_Q`W(jIji?hlLK-Y?(O=hg$9T=BL#wFKh(EqjFNwfxyIlqkX
z#WC2(Yksg*<s~PQymHOCfBbw6_S#4HX&w=6Q48zqpS=za5TLe)9HH`#IzD4Vg5Z0t
zYVpH1_d9|uzUp()8of1^B%){F<&#Kw7*i6raLIMP$em0&wY_}{z_;F=H8VA#n`YkP
zdo3c$%)f&ZsGN1YcNwdk7ZMZjMXy*?@|ZHCOFnRgb2*xxEOeAf4UdJo>YIu5ON1@Y
z(Q;#XE_@W1H;3sp2G_}|aUuvWnSq9llc7d*PaE6_O<2%E`to6_L&|#ii9?a&8?<^u
zV!N&7DI7b()87b5_Sy+gP{H^j0{(~H0$-SG!1+FbUBhpf1nBWj!fEQ54|fJ-h%b@f
z7YhqW_cUScocTbmwpOv3hcQSqb9%Q`h^@#h9mt!k>O5KLF@u77!1Anuy^H{($?k8W
zQxR)xyL66=y8ETzM)IsIj_>8`K2P=pu@pW(Dm_h(0s4j$TAA#(EMqy64n5u&9263m
zD*n-f_b3;-Sv3d@PZz%Q$j{aSG<jW$Y*ADH$_K4N`$=SE0Fm@{8=I|ZCYy3m3vCiD
zuPSyx^jsEp{Q-^Sn^u_jT?$^b@1AgzKb8Oh;Q0uOv3+C_MZ8p}&e2y}XgjK!ryXD*
z;3CCe3Fy0jKM;91?617M^#uY(F_lnMjFFKGl6@`>g^lFg;iOo#tCoEO1@plfHUN@y
zyFqpl^Cis=(ZljPG_4~h#)^Cpmi^C<!$IZ&5pllUmQ1cq3(g-WfmJcPywW_dQ4ZoG
zv$u;v#zb`su7BH{wG_UxW9%wDOmO_D|C{d1j_IowPLC33VF_BnCo<vdzFa1m)Fxpd
z<L>R|L8giN3(-~soA)9A465O{@5|sw5X_;#44Hy8WY2!u=t<+2fE>_#k?)HMS-JJi
zuQ+DuNGnR(qzPp<nBRA!u~8hU?u1PLaX+bbY}lVyPwI9Fez*Gv3Mg5O-85;}$Chbo
zC(}-WR^Qlf(LSKVHO0^&-8-|Zoqj;=4+Y}H69kS_oB%mM#=k<RFNs465Pt&d3+C!%
zg-|;v2nu>Apq7djx(hs1Ty{kW+y)cAEdl?-)-RgRsJDci<A*>bjJ$x7TX@CPQ|@B>
zca`8bLN{6eKI!pqkg8tx-sCy3xZ{V)s_nHaJR((o@LBpvRTiYOJVvotxB6g`Ad3Ts
zj2CUJTW-D{FKI;Tir(&kn<g`J)*-?{aH1n<TrDCAAR4)EnTfR){7QN5JAUVtJ{Cg~
zz^U40Y<P)AmtMKfmPUOm^2oHzIz?lg2pA$2cSC4Z)0B9iOp^=#hQO|e#bT7R(_zeC
zDd==|ioHNjW*@;Iu?bKQ#^T_RXsec$x0Ln6gAXZS^o`7O22^J`66}XD(iB^?a-}j|
zY?rT58F{JE4ZxW$#RuMQ^3e)ev9f|hZaw!oOjjtBjPdplwCo_ydyK8Vr@JK+u_@+^
zzIdsyDs#dfF0IZ(J1LtWHrRT99X+)PY=K-?n4?pp3Lc>Yk8ICV&sUOJx2Y(?qzkP5
z$6c+bpndTxDh~38rR4a}Rl_71Pf)V2Dkf8Lpe)?I_1*l((jjq`L>hlV`xIGLAL)mE
z?*>qYH1IHaOhTyI8B%wDEP_8k4=oKJm|F~`BqXCwziz(e<BB#qE;<$;)t*1AE<jx9
z$J=G=?O-f&Hc+jddZ@8}Ch#3wN`szqwy@kz;>%r-YbmEOXKFylF#Sld<Us3(K2U2?
zUMXT?H4DKn3|9eRq<(L#v?b7-yO?LFQGk_s0k=j^7SdX^z=s|VQKe8C7JScyl^H!s
zQyKSkScX6Ba*=TRIMLgT%Fz)}Fk$XuSa}{wTK7j3oqKJs{;$~sYg;_AsyKR}DOO^*
z%I2aXApcr`+3Q;oN~h;E85M&NQHTEOxz*@XeOCBRTV{VNduE)nARbBYhAu{~$jH*b
zgV)gT(O7RItF7tRDuxDcaHMrzS3km;wu12ODv_^~)gVTIcfucS)6|DDM=>hr0G=S2
z*INi*Q*czk?m~?NcmonU5WN{D&z|f;GJ1GX*nOx&ACM}<wl0UvXejcDR*p~DhFvn^
z#6MO%D$1cBmS=YiQo!lAQcg>$k}g%o2vNeoO}JTL4IWuVnYn`~LYE;hsIfyG8Tl!x
zV&|DB5~oHB)clF(iJIBooi}WBmE*CYS*B;0h0a$Nwu}w-yWSK=-@)1U|8$v4N(v}i
zxAeBs6nWsV=yzG&jOY2PYmDO0jV97JVxk`G1pviVS|-nF_rAItMSTFIixAY7qb>Fn
zEed!i1m_TvPJL}&*%i<7Nn6%3&@nQglohw&P$0)W#s!9J7q;7TwF#q?Zq~K0_k&HI
zlW>#9nVS-XCo^0=d?+n{_5B@y&2;|%7TqlrEkvU{=S8ZhoBuDtWo!p0K|8=h%%Ccw
znmqw}7>kF$=Wus{j;LUwjOiKkAao!Rd+^Mg(QiycxL@o$n}5uR20jLQ`Y9?gbm^hq
zUvWF9#{<HCmY@E_?Z$cP(Ok@d!A+W#hmMy+q+^178j0@>?2+=oBGX3ShM-_soBTv_
z^Tz#SeU+`75_%kXdlVdJG@CM}`EE5CW+U*E-fOo6*w5Zl6>@scskJlq5L)^{QBBl*
z7iu|`(^@NpOv5Lk9?82_$D$gq$4(Qg5N}DoY7Ptn;XUM1GKZ^5N!4+c1<mc+0Vw7w
zm3wZr*y(yjH{CqIe?Rp-@cEp`HNY<f0J80sZiL7`8;WElvPjG!MPt`xeA`wC&jj`Y
zC!pbBuv@Q-C#eKOg^uP(%JR~!8c^_8@&Yz?kxZrw$OKPA(aaENS1{vRQh_)NwiIP7
zjDd9M-Ha*s6znFgvjp=oYxk`BJ;j(f#2N0+IUc~*+u9gQJZCH%+>v<FLPN<vV3K2n
zwTD-Z`Orw|+_s~fFNNc^Y6#7zc|jFp`9VB~nDE(;U7vLb2ojev<2l9PmMi}ZfDLt{
zuv%^ly^GFyecqI`$ZL)3te9)CaU@!9fp|Gb)rQTxhT-2|O@XDmD)`k4v4a&R<1lX#
zV@mqAH0g~-xpMSUbuMwql=FY$fR*Hue(OgW9y(p`Z-PVtSEadHK=B1(Fv*sf53O5s
zj)*RvQ;$eeKAm3Vo+lwqbHfi9^N8Zi?3h5r>A=;LZ$k#h19UJ+gLrVYDn|qnzlf&t
z-5zhpoFrtBF~kOR09_Vq(zZ;`*_e_0<qV`rkb(fduekuGYL4@_S_k51?6SCQh5%RY
z%Mi;_O9U=5pz=_2;A?j!!x4-k*v{H^iW4J7@1&&1{s<_|%<nM6k}RNJQe=H)f|H~;
z9<(}Pm(%D28bowww_9k%XphDvJOAc(%_H#bSDs)oOiXgZZy9a8KQF@LhbIk7%A$;0
znk^=ZNRd)rU-N|+;!@=pPHc7mW^N>x*p(+j9`IpPtX$KsSEiY8?DCsE$m+!pS=OBF
z{pf_7Jv-DB1f34OV}>KKg^`>of_bZZCL<BDU)n*YBWfSVX32auoy%HV5YEC?C&-=$
zXYdhoq-wJpu#&34=@^IJ&Ry(nF@<WDqJe?mep%9*7VNBGC1UO0U+`7sP4AX_(rW{)
zm@(CYCTL(};niVeGcT`LWwqfU^ThAB+~i1FYz%O7Kc){S@~D0u@}nkTTkT>6GLJ#y
zs`zJEXI{?GE3G^t9yb|RwJZ!d1j!`*vH=kXwWUt7sE>#33E~}JJW*(?m|?o2J%iw0
zq6?D({0ouP-&SrBQvt(@R6Hz4!v@j>oWddPH_SGwF>PK+zLE##SW&+OL>k>4t0|KY
zA-<kIdAXhY;7_3Hdu|xfy>N-+&M;LWJHTe0x?L${gr^<or$M!Gc_ULG5CyjPonG5s
zT2SBRr3Y!u0Yda2gD63{NF@|gNIhT0|IbKX#~23a(=y<x2+^B^hox4lO2<X0ahgjI
zesC_d-U)@`8*a&gPJu~m!Wew29Ef6+W_{ac7d2I-<$j})r1#VAv5xn8C}q`UFrpI1
zwh4o0JXz5hMR8NlwRam*u_N2w90M1S^xrs~%^LIQbk@2g%j+9&N!LkDoE!*NqEj|e
zSS(zU6DQ>J$q+}%=5iS)WjVWfC5yFL8UY_^yPc+l=ela*l(QF9{1IZGM_mY+2uc@l
z<6H(vdjCpu<io3zqg`aB=H8W*H{XYr=P9%bS;o$RC=EoM#ql6KsK^Z?eaRv1q7teC
zAa{aKEzOdn-*kL<?P})Y@SIgmit!Zl?sNwQ#XA+%bc(5x5UGYT0{~N?+gPygFoTc1
zC}~(~uPO>#g)@L%6v;n95R%{W_oR3(hWugOXF{TbYHMoG#PliV4@-2^)h)o1@Kqng
z`UQh59Eca}+6!1Bd@qWi0<2z&A}svsjPL~s%#BQ{m>*g0tyJCH5xX#*9(!iOKiYlZ
zEy>gd6c*kJPSK^a_RWJmEw+c;70HncR5v!?higey-C<dDIjuSRN?-VPV$+YS5+&IT
zn-v+T$CHPP0Iqvm$w>uETEYEhX3QDDbE;CX*96k-yrkl7)`xLc7#z+v5nKQ3EfYJ`
zKTDs;U1M$|ntKOUPp9-GM#4@YhVnd$ar&xwu1EA{1X#|iB9`ZnIBD@EOZkxK*`ZgP
zutH!bZhJ5T_w~dIae02!#Z6%O6fC#K)!jj2^W(7M(xvw|%H4vaO6gH-OB}4z=+1Li
zpUhedh3e0as{fyt+1RCczn)+@!wUv%S=}yL0j}(Jg+}(HthE;Sa8zV4K=tI-#7fDB
z>4hbRB9%z<ubp7%xMQ{#eKZZqANFa+e6`7H4<!s$N`<bXw*o?<mE-Mr7BAugT{1Au
zVFN~j<G1~~#!<}<i69i1UMAt7Y%9yFu4GxZh&Jx~x*uW`akp4MJo{iq15o#LXg_+j
z9_%<!YNg)R_BU9kVPF`$h+`%k1hV84SZ!97f%#Rgi=<t{(j|jBAcHNdXA5QdDv;@w
zez1r-#UtZ~Tx{A~M5{n<iQ#Y(eQiAFfHF?|vV>rW)>I&PJ4fuy(>(cp7c11A!%78K
z7S9V`{pA8~+cn}LS0a8H`A|2h%B_EP_}w$_TIOW+Imb?T85N1dKeKW8-vYabc-M$f
zlUFx13?R`;jg5@-_SKhO1p&gQG27?C4d{thTmG$C`np(36Q<03awRa<%b*UbGvfCD
zHv*PAkBhFl$epRc4>FX!_U`#ZyQ3-zA;`bs$wjVeOXn@4_>y4!Tb6cdL+jWFSomH#
zQj=FciSZ}`4l&S<*>!<5=vmq4S95NSdG{3q9g!KuGGb93e@4xad|c2Qd#YD-+^$<3
z>hlY9%v0tV=Pb;9)y|f331@ZpSlY?0k?T0e`52aWMpwZ03ob6Jyi?3i5GnDBAW6e`
zxzF<aBN$y9A4H29ZviuwnxQ&`zgr2LW(KHdfujQRx~(kw-eg(ahN*uNk^2|2LX8Ge
zxupa3aRO|5MzN-Z(JfxDZIJ0%JAVl5XM#YrKV>K+tcdu3URT}$2*%4cemmUOIreCY
zLy+eJLwkHWO7Mhadiy-TvSv3Pu!pg^U~RozlA3g|^<ihl3NpR&>OadAy4a>l6vu;n
zYt%i@zczwaA2R0DB#&U@!wT$h@*!)5sXgF%S-UN@WX@htX`9a$H0;(asCy;`Pb7(G
ztFtB(NC4SSWf$|VUz~488F6>txzlT&UG=?Pugtm;!84#vzNY}z7N7o5?O0U#=F(0O
zTQ0hA2qe^hDPH#65;6MhbEAR@T@QAQ1poF0Qo)rB3%A8Pa0fXW6;Aj_rwi_?i2N&T
zCE2yd8yrvL8JW?0a?EO%mvWloU7n+bYzFzxwy$`p>a1xEi15*!kR!YNZw`e474I=6
z09E3)?uqBb)wVOVPI^^*^K{%I98})%|BAJsp2+ZJ@k?7-RHeld9u>y+X&OO1c%bUL
z8!1FbR9I0vK`N;L+&L4VIQ6-bdQUgDX%Y_7ZQ6(5MST1|QDvc<TO!#VTxj-Wl&t(~
z+Wk6mG{hUZ+uOlOFeLsV9R`x%r%b-CGQ03c58I_CN3VV8hXN;Q-^$2uH^90>@GHhB
zzun}AetQ`+gQom>=`Py`CA;Y|2>y}9s!8RX9X&aOO8%-lEi`CDMkxcW04&+DinMvl
zEt|_$=Q|q)&fC6;4di+UzL*G272f~*l@3*UzF*!EW#7iwsGhN>e$rB`k`Zhr|4U$|
zrT0KFYOPnEP3<-Cik0bR!70JCR=L%<#I9(ok<-D1Bmk!=Wb447)R<c?Q$*b;DMo52
z-txqy>#i2+8NIGAeV%hVWU|h4y6+N-w)S_|FA7=l>w&j~D|I4LX7e*fWJ9h28!`WQ
z7Cg^!PBU{<jy|&_>sj6~_mi4e_=-sF&ON}&jx+IQvUt7E;PX8bvPzvV#AGsT)v;eR
z)M8?681}8H`V$`W`x~|&)zhPlOIp$Rs;vadL%Km(G~koVNHJ>wl8@~O7xMOaNeD+5
z$NIS-+!8EfHv?Af3fWkN97hP}L-<03eIN(iAyl_nw3euF4Y*}jn~S!8=^d3b;agvh
z42~HGDihs@NSr}kwqTyp_JX48|LB$TC_)h*&Fx>{`V}nWf*LhZtbth4=0ud~6%JYT
z(satlU|lmM%u<!q0M+ThOkT(Z%N2uf^O>KxP@8?Oc%+VFV_}wyWK|hIqxb?NCWmGG
zs78|s7N?%ZeK8@UnCtgd{Hfe;zNSf2x{v#;6*7c~7=UNy7DI|1L4h^4HNY`yp``^v
zb2g>M(#L|HLKtaln`fzQ|1YsPoOCtc>gw)}#9N5wAx3w1&Zw43iT)@0t;Y8|k`%8{
zlomG**&TS)!toZLaZ~NTYWHD1<&=?b-!povqt-M;)2+SMfq9rXOb|%h=j%xa?H{cX
z>m6y#lyfq1N*^5Brl$T<sRxGV(1@ov7Rv^f;n3hICUEHMw~iCa%i#j^?`22W1~8eE
zP=Wav`oe}x7GR&*FXJGhGg3EQ4+z`rbni1b62dT79kZXH;NBG^<mlu<{N6Bb4fs%O
z43I5<r8B%|YwV=;Y_!`)#UVO)A>X>Wc4f@;SBQn5^};PlDl&MFo1kd4_HHAGs59DZ
zJXjZEU%GHC^o3`amq*x4BZvw6#+$nZgFHAP!0&24eD?&98gh!QybSnuA1kfnPWPTM
ztN$J6#h1TGtv9+9>3TY0fBhc0!oZ1wD{tr;<349QFxhBN@Yi|ZE^FI@kr@sa;WYY1
zpzRLpGVh3pH$+C@EC2Uzn@WKVo>T;Hw%OmS_Y~HL_eIrXh}PdM%j=`z@8Y}B&@O7T
z%{dlq&?)Kh>-8C`)o@F94Hv%I!<?yZ^?z+8Z4GaZ*dt1wO-jO)?euemfK-!bqUrAE
zQk`7d%}b^Z0g!*%u&uPNkM;3Z%M+CMt7X&Vv&bTfu2P#*E_^J=oKH?VU+Zi>7XiRO
z0^_0Dqs1)L;gU^i_q*&R2*gUL0koG4DoQ=O0wDtgocFvQqk;X61ME^z+qKk1r>S^f
z;qtkoJ{^FVWp3%sy2Pj2DuY9JK*t9&AQkT}%v2O!SyAH(DBH!JOiy2xS0B+f!CCjs
z+^B2F6|gf8$%bs4jY*0TojRFV!KHN*S?%ITs;z|sFrj+*c%cB%dJqhZkL{dPC{-Dv
z%SUa`o_Y_)E{oY%8{mEx$x{mdy8i_h;f&wsc+J)7K%>3^j|#a=W-f0FYn0Um2K=?8
zwUI1_s||~_xjLDC6qL4**NRUFYY%=qR`Mh9av?*qx3J!Xx!<9`_0{^mEqT(`1Q6^@
z&GkW{;!e0oCJ+i7jK<n}#{^+E{OAS#8_%-cMVxjy%uW1nd|@>*BM0@qpSdZ$SKId*
z@tX5tClKT#z=_^plF5o=^R<ACPPp-u6Va973;*@0q1U#>qU&bAt^G_<L62R{)F+@?
zTjOG!G%Sa>bEF)F`Oq9FdbM2`4vzjcWUt`0$;fAYD-a$g)m7oY8Dcg=9JUPi%>dr{
zUj7|@GKs}~wE!onSZzezG(<&ADjwxvXX8inT#=5BhaYzbpCH$vz-*r#&`8Xn`t@vx
zox?!!)?(rzE6p0g<u~%nFwQup9vJ^SHJm&5^ONW&9r3qN=2wQ093$|P8|xq_OwuDK
zs4i2xp>;Q$YFy8rh_9izNZwlo*pr`n@0G&|qdEP=8k`MzzY_n5ux;MO=;mjw^}$;P
zV`X5+se)rR=0}ZUQHf16usU6J$-qCt)!D)Smf50X_I11`yPlSMtE*CL9Cl1<RsB`c
zCF`(_($X)}gOAm;bY4X9d0LAXzMp>WfUw@Z7+8bM^snWBKUz1Ip5{3j+T)E~_#IAo
zj<I%8&VTF*V=)K4#3Gp95v3-NKJk53F=l@RySL@=G>3^IPbWcSVchXnaVw_YBk!}&
zZ=g5lag9gqVF&cqy-jrm`*S8B-pE|1!dEvn-5#K9J9Uw?g&jug@)-nDZ`BLAMX@e2
z+ME)S|3X6ixItiGsQ5ii0=ND7gJ>}GehjOGK?=5DYl@%Hy=yQN?d#-O?NUHufi)U$
zUQ0UJUC(@RayNU(GHVgg>CKDIR*^OceUm<hzUpZf7)4CkGU1UfD@(vGb{z8lVZ+zP
z<3vL%n7+3ctrmYr-=dlWScVt>vvaDB-p84Exe1Rkv7y1gI!;N8ThE`_Lu<LH|E)u9
z&f)>f@e!Dndm|B`n8z1<A5tHl%(lGkV)~o=qj!E0yl`qn7s|amHce;TNpes_X3B2F
z4olP!c@`XTmu-TfNgnf?mskXU8ElJM|LnM<1EqEh(VhMS>+(k>l@3ELQT4vQB@aMo
z@#<}fzDK(t%<u!SMG<6>%BA9Um>ctP(PNtr$yj3W%+mF}w;2k=6Vcf!LIpzU*gRT*
zB%OJY46FVtgEMD8cTxgl;bf1m)kST&Lvk}y2*l>mcN$6Hj2bdh&G{Vfe2+&MW>|TE
z_&5^b+U`JOKQ^d*!d((<*EROqf6!}<H|GpM)wn{qT8nZP$Ahg>#%Ds#%Nncpp;g<F
z$BCN>(#pk`O+FN`N*NDlr{jWdbttY-o!XH~V;7vjTM~bkJ0zHK0urK|L)ZU(nnBJ>
z!Svq6QPI@Qix#hdK+fb<scR6d0^-^qM6Uj|Tvn1WqY_<Dz)lCIzo9Fe<+C%U^!C`+
zH5Cm_fAWYsnk{-RjD3^?%Yzs2?|4aa>(he1SM!feL8bFv*qIdo`kdxSw&OLOs|Q?B
zNCr;{+tRMvD7xT}($^bdNniLzR;2DTDe%I24{VmbJMpb(t3(HP_9`}KHvuI^Zp;ht
zXNp0cn^Hhpr_z6Shg*8*vEYob(SgSWH3)JS-=v}OzM%4`UVHxJFJM%Vl4|o64gqn-
zFpe5f+nr)o(55ur7UcCp_WJA|t#nYBYJngqA!+h2hS5%Mh8c1Yw{&InhZl06Q{z>P
z$$F~L<(DD>loVUiTvz1G_%K&MYJ)b8AC)gyl0dS*Dlgfzr}g+e_%P)no~6@I@#6`X
z32K|kH5U6HSsZUO@NuE~tR4Q|iJBbz(%UFt+UVK?sqzrW28GTkG|~WzufG#o67OvP
zF9+CfK#we1soQ^iU4n^E4dei?sKh44C5N5H!p5kZUPWxc&@DA%BKsdnhu9>$V98!!
zAQSmv=AZ%^kk5IHO(vb5&<HVmQj!u?@YdZR<J#G1ksaF#b&KsE!Oo6>0wDDxrE#!O
z!K1_x6&qE#ST;OGkJw+KuFqQ3Xz~ly!(iZ}XT689fx7YPFIh)-Iv0(2NtOIK9(-64
zqL)v<KAlb=Z{$y2@#B3o*+av5PrpG;r@-ZhL3X0r><(|<)^;oc@QmgYaQ$lFWQGmL
zZk)CT5fu20Q>s}WnX~1jSyPHOYg{GJwIkrbDtxz%c~S>O(NynJKPa$SRo&jOb6{gC
zmANBdhNVmENt(*Scu+9N$sWGBK3X?Jbd=6YmAP-;sbynQfr)+m9^`dPwUF&CRJ2_o
z`WuK@BVOibdnuV+MLDmdUT7_~|9p(#*WdbAY?l!1y>>1}zLn`J>DOhzmlU)rZbqQF
zdg$Ehs9xcHbhJ4oL0=xXhPcr(f?IfOQ8oipOM^bn#!{0?G+U#6S2CD*GC^FQKBHp8
z@5;Cm_=cUl-M#uM(_U!gVKJ$FA;##PQerX2^q-`K7{pDAQCun9L#6i7*|Mm1bUwvQ
zPB=E<<-pgixwb))Lr=cXrA@vsQgk%Y&kAVbBu<z3Oo~BgBWg!df#F#wU$s^&c-^^-
zGylO=F$Eb=9b+nxmv7MFx%GaVww%WKcR&Th9~5p`bzEnC=B};)ny8!X3$r#7tt@`y
z!`&Yn4eq=^k|4i%Od*FHbaoGSugjw)QNe!>Caq^{UTW1GtL-OYc+?2$%<3OoX7Esi
zQ8diYgwe+n>|!(_ai3om=@wlFvojpqa#%e+r>Z1l#A-|dq(B#(IY6Dr$D)I~g2s7m
zxA)IQ!n$Y{m%l2oe}#Uoj5UpYyrR<(?lG<mk3AzX_4mF!k>2OBwiY?+K@rT1KiGUC
zH^~8|k@lc*$b{%(A{!ewlIJrMEfVh~B^`utcfY#q!z}^8`PIeq&&>BbJ@gt_YRO!C
zhv&5##L&M?5N~PA^qC9%`hspD25Fh3aXcJd26~(X<uNlaw0bv;ozn%+RY75_!E(GZ
z%AtME(0vs&-)Dj!4ixIRXH{^pYZ>Cg@etUJ3t1bm&2*fVT98k0E4zYyykLNVI^0!H
zvX|V<(SAWLjTlXM4Uh}sK748egw#7U$;MgtE2^!*Epc0#S8#1&1vU1ak)y(K`=w5Y
z6p_slV$!;7?8g7XQqX1djKXoW|5yCKsIee}rxal>Zu?jHe};x7rC#N%_P$i;<eoAD
zNK8gCuS*Q^3R&l`7VEc|fd?e8mh?S{41QMI9P;^xyZmX}NK8ER(&eP*GD9_=3tuRG
z4A6FB48QgeFL23`@y3&Ff6)_;@)6W~B)3oct@_idy-LRc529jm33IEpHO*e4LbS=l
zV-y(<Z2iTl#cKwxlar1SHjJJoz;HlzZ%EC$D<UQYEAP7TtN;@)?tN`@{1Ygx5^rM>
zU-mBhU%EN<I&%{&<`BP@)P@Pa$cEV!LsLbIv}UP`*OLlLmDvmbSZDRei^o^DdD!lS
zhMItAEz>d$JW!$NKsNjIcSlTLiLj1bqP;-W=scmYt7bneV}j`0i_XHJReRnEScVQq
zsqajp8dpN$e={^EH^gSE-%>?P7vnuHWaaW+Lb;Q~1cfG<uVaYPem}8*$VB|0J1;q(
zrOnY7%S3yb-bmBX=1^|6w}bxzXN_}lLw;2G-y5m#INZwmTs*fXqYzedMWvAbg9L2~
z_W}up54&Z?qrG)?k|uaKauGm58FU50_RnXXN<gM&-q-aKE<!a59^*MYC?itov|t3u
z8$tlLf4_WXzP1Xe+#Q?tGCT#sO(Lcc(Up4YRo5f{_OaYS#O_8q4xpX>uFFLiY!s3U
z!!qghlrVMds(JLauWyAk;qOgQrEnXok%gx2nr_Q-I72(NOjJt6Pat2bza9L#xf7Ar
z@PV0WXLF#$!NwuI>SHj(&|<B*ls3^rzUfCK#QU%PNc?|%g^4E-C9`V9nev@gpc<VX
zhS!zc%ZqOsIpfZW(^tCJD2U*8Q+YTVIt3Ku*}~%`#$9_rTdkDw{*S!^eB3HD8dPL=
z>9ZdNWT)a~^_w`kYQ61180b5CtFd?kMd&`Kt1*lBw4q<oquh7>Cprd43)W^!?LTzh
zEJgm9oi)Y^afo9j4anWPKOD0xDihjr`^a)3Rsnjnp2u91Ml%+F6*EIo<_`w55L@_x
z`mU-DuX{5h##(o%mfTVgo&1MDfH?h(&$7fAA3MjtD&owbrHDKdlPj*F*OG0&v)#Rk
z<TGbI2BXAO#<T6nSU<arh@KcyCdP2=&!Z)8vuV@AM;1ZFH({cq$I2O7fbygG-Nf_Y
zV!l#727w#HJ7gTZ!Tl!pi~Zpv@~e0ff$#{R1w&xd8=v9n2j!K*W4lehW+A9>RJiNU
z8+2<dOS-|v1KaqmL})%V)n3(HZo2e@PgtXBB)MSw${)f=d(j=zqm=)tJf?^!u*C|y
zEuy!`h&iC$&#UkapyC*L>44UguWUG#gf-*yitY{TlFvdTvze*5h?n358Tc~q$X2IZ
z!Z<gs7#mkJTu3yfX(2F(9XfCoA}$nP4}#A9x*bWk*>_|a$pgSCj*{oNhbzB~f)5$)
znChZcCh)%XS+fv*^?yYkTT2rRA}P78bq|#8Ur(Ifwq0#_$@gz^rM_JAa27_PmGJyt
zPH79UZsYunx<{J3x~}Kgn_?oi^QBc{b<#R!@bJLgXw4s-mJy0<9!{~c=+tceNze@_
z>84$(#@c+qo4$@pSy_sg9yPlBvE(x85i7Ec;9*I=VaRWYt(A`_ewj%k>jfJWQ$1No
zM|1Th#frp*NKP9Hev&DoKLqT2i&KXO>4}NZ8b7YX#_Q8Bip4X|8k#l>rrSzn9HCP#
zghu~}AyWkLLJDf9i#VwDVwiUdm05ZCL@gdk-ewiSWU0tH;rw;J3XTe$dx{`*xdFC-
z?j?P4etuH{5lY5RH>eP;?{X6+m8<<+wEaVuov=#<<CnP=*`C6a<ezoZ@vNsU3`_yH
zy+?iN_+G&%Fepu$*yq%j@XL+0-ol}3q_gEtor(5qkzQFa{9>>f`Y<5Ee{8PnJ5O`u
z41wCX8#iUq^!_kAvi^bB;b)8cV@B3OZUvPESDJ6RjUJeNU7$3W-ULcF@J@YP)@QU;
zWk)4w-VPjzZU|M*CvCt@nbt~#0caIl_c;4W&)FP=L9ODerrCHT``--6Di)+2=6-o9
zH`A;Q`**)~u4lvUQ+&lh4q$IPmb&vwnS-yKnWL`<cr~WIEJCWXiweq90t$yq&U=xA
zxlvAEo0iMW^gxCS_PNl`%^lKS3k0Ve_Enk@Pg9v7DN(__M-1Ct_azS4i!Lk`UcP!q
z-Cxvz9ve3A@L0D$#-S98WwuD3m68ayyaR6KyiW{Ro_}aOWRnXTxBWhH9n%11L?u&^
zZ-sbynMx3rgRG<}@U}5qi<`Kc;WyJ&zOba&Pm=%$DCgisnGq&5qrDcv8AqC*Byj6l
zuFkCwEuZAc%eY|yKO8TS=w}M$G<z*%{b>~w)YDVHb`%LWxuY1rIC<KrA#7(KSBfmi
zJi~+CdYi>72k30Ev4Xd!HK6`P9-}Smu(&a6&X$T|*Nb;j5sTdM5qTTeN3|SXcak0p
znH7w1nK_^Amm|_^kio7D-D4kcpbZ=lH*e2frkzj)#jU`r_}UC4!~}{qIV4C*cw9U^
zNpD0OUBp`UCTsQ{&MVJ9HztcSV9WPJjVI@4Fo_S!peRS7cCbTR7~QiZ-LOFEcHbAL
zQr!ameQqZ0frAz38##8|8uEtkW!6#zo~am`;TqGEA6TJ8fHdkVcvSS=4$ULu)^Tl~
zWjn5Cq2qs`D2SZ}oC2l}X%99YZhko(?bn0<r9G7EnW=WlNygA)(7Zq?799#@12um<
zoLg&1|0<gDZ|Zt&sF{cOzB|Q$dus0K`(cKeHV)nO=Ys|IvM*BPc|YLFL?rKF1H>w>
z=ULt}-EmYR+Of2Df+d(=p}XOq;>4Ewy3|6o-YeqCu3787PCF%`V4RS}LDwgExWaY*
zq50$T<v~b?D%(TEi9EG<jpMM+7ige>fJdW5^esV4Up{&>o@jftnnRn6Zya#E`;B>R
zbYd{Vog)P9YPW9$PH0qCrH{vQZBusAit$o-AphcX${r5-Id96`7WT&x8i#(PzLk&b
z>V<Oca;6eAthzS$WRZD#U_*H}u%a~0$}?7;AtXWK<qI70xJC_x&hs=vUYa)^IvO$5
z=BcBGN=)QjIL5OWOkBDOnZ==mgATdMoRrS-tiLQV7eY^W%wrjlKj3iXNO#kZL4%b5
z;9U)bU)%jAi|lV9PbiH^w)cm3umHfiW(dWLq;iVQdavh}fjiy}=<mrB>5dSN#-zk!
z&^nf6JWD(d(p^U_kZSc9pxs3OUkzVVtj>GP1e8`il}Z5e3kbgVCgf|;Z6>Tv(+DSc
z9R@A$B-F0v#Y;}nA+#a;Y-@a@fLjR(#x?Q#oC)lJEn&S@lx%3hR9UN5Pj@34YOz--
zohpmQO~}JtYrOE;PpZg6Tv7rT@}skE$u}Yl9)sc!>O}}zPC&~~&0a_~m7p}t^MXE{
z>s*y@P>`1q1Dz(%9+Yuf7KYMa)xkDN%8Bn}mbgW6VH-Fd|Daw)5yFc>OewtQ0%l%w
zUlhjg!F(Y!pzUIYw}!k@Hl?FkoTDlh_aU~li3ISOy_u!=g1HH2PN}9mx3T}fImgV-
zz*tm>Bw4N}@W^*>`8);i685x2;$<kXsWp7m^w2W)y#n%`aVmefbDnJ)Gaqs{*l6oP
zELW|J0cCD42}^rmF^uxxweN*ar39IAgAjCV^~#@kKRl3vaeSe&wbXGtq4YJzS{ZS7
zWg_ofY;1AGxvi^JsR_=q7^m$Zc_>=Gy?qY=350hdTIgm=8h5Qzo5_XkdzGs%qfP}F
z^z?VGdvFicWPH|7;;DBZ*(*v$P;qY57ECDKP4{i^$n;o$rEUdTwK$Cq7Ndt!MM&>h
zP1}=R$sslY0>U$h4cK4Yu41Yc5-SY8?v%gBUJ~=X_4p%n{C5vq+v}m-qIrwBBu{kQ
zFsq+60(mWkjmbLT2*g-lWad-?7=$<45S&}oxbJ^`3r=f4==aUyU*4~nrV$G~nYp7J
zj6C}Yg(qY`Jvuej^mGeyj2mex2RJBt!6o!+xg(c=HVp-h-=zOt3)53u_E-kyOENr>
zlwY4t)mg<iS&34LP14G251XTI`Qfc<SPv!b0=t>So7=J-)bn^25Ous-ad$4;O^}jj
zU8}t-t<&bMKn2J~+jykNm~AwQA4ZVT+KBZhuQ>vfK_$XqVh~tS2aklI!Prv%|CTJP
z9)5JZ=mfZ7f$6|pOT_^#b6}WoH<y*cb9~MfG2fxg*BEgp_LAdQC34VYdw}%N>UpK;
zmu}xxJ?eIJk-Q`viHZAynvyw~>DqSiF5jnqTM8lfjPC!;Y$7HwOrQvK{f{x-3+<Bz
z{>Z$hMEk!!6_-L>14dG<PN9=LF_C+835Lme=GzJzK;a*QyJHhj12L{y<3H%tq^D}D
zP;H15P#J)@n<k1pU?I@Z6ZM^wqhil7MaK*SWFFLJ8cuoBB`#^0=89#{IFa;g+HQ9%
zYb=j14ow#j+Y>2|Hx*d;@^)#SIwkF4#<R=U2EU*tfu0ZmERIsT9%n^67RJ=(YnH<c
z4XRZIWnFo}w=H#<ix~TEBq7AWtG8A2=!om8_LkOQ+WP+~5~6V1lF_kKp;{m|Xnr;j
zihp^N1GGF0Zjv;tD0OY^MxH0mjjj%WtrAjP^F;dUaaKk4wc~owxWwsr2S#bPl;5xU
z;_Tg8vA9UPiMHl3PK~W5p_!`duy^@!*HykuDpjzDAAUeGz_A__s%{?rUH(dNAy&kE
z;jk(p5j@cLR15>pkZjE1tbqrQsFkuWx@kz#3J+_tC`8=)t$ZQ%YHkARz}M3#I>xQC
zfAij=!e1w85P;${@7nMsMxcwY#yUbhmh{!4m-l}H`&BWO8&Q;??T{cI%_bYhZ{jyb
zOjdFI;4$UnB?<}+c#HY7sz4ar10vz`MkW=*fgb#m2Ut)EZvk-!RO{m&Fd&*J+|l<g
z#XjDd8eKZv3fG}>JLaSq2)L5+pydAEP$%5HH)UfrimLK65U^q;Xj|uS)s>?=M+?Vv
z*nqiYTI_kE85Woy{U=$HN3)gWZO86)C;|diopN(s3O)i<fh+aQP&EIAI+SfLm0{3j
z>(12%!sJv`eAwg@7jMV*cS5^)2UGnb_rh_9R}da~Lw~=^Q0f|SO{<b|!KZT$HWqay
zA!#f?4n1fr`*O~LqRK-NK+s1>Gk>q(ri7yWO!$WiL*lhhhgW}ZILpL(#YQ|;AEvJ2
zYQ(#w+j9;wk@=-67=mU_w8&@|-`1J7Z)h%O-OZy)*sfqCN&6uyU`o5mi|9Gwugo5B
z7r50zBo&q3Nk;&u@&0Q>nTHBH9dM)2Kg%O6YB}--+noh$<_sW*f2=8k@`ICHEpf6M
zjKtPZl*^Fme!9t@oD*JRB~1&UaN9bRJ2t$zs*+KZ5ZQES;jSbF(_i6$6(ranO4~ck
z(t*iojZVB6>`(t#u6r?5o|qC%4)scNs-LR%<!2$_GxnhV(XX1noQAf6V@TwKKT3i&
zJzxdTMWK?+H;0Vfl+y#YUj8$44^(nD+UBytg0J=@`>YOC1B^Pe6<Y`kc$pt-$(S8L
z_LG@?umShiQtcH3F80A+-{S)pM&eLNKZ4ftpDIN|1N69iU3;HrISgGE>+;OqrT~4{
zarTt9$av_Hp@x6nYuqG&d2)tx;*xs1G>z=1dtQx?{?pLU25fBASYv36B5Z?6;P@xZ
zxK(r4B&e^K?rmU#8j$~+%(DNqMSZO$dC3aH<eS4fw&gu6hKi}Bql}b_!XEz?!(p;#
z7{(__R2)@W2UPqqBt#8dFAJ{hiDRaL#8C@^cRe7pf!m>TH}*Q5S_MCdw>9lZ6h}$+
zB<u944hfs0t;hAg=w`e66f&DlBo}B=N#d<CGYa=7I$ojQ5n0GJBSlY5igN6*>w`x^
zDVbP!@VIZ6VVL-F8}Q}YhX)w5Q(fjRPPBDMTp5~NMB|Y;`}Lmn)LaOF;=s>m-+*ZD
z#{B=!DXuVFWYFyqM~C~le$=_>#)GK|lBEsB>L`cb1q`Dx)ciu~TVQj1e-Zh2{k#9s
z@2s4b-YvHJhc<X5TCGchJ2Gl17%Mn5_|@sy0QEJ?ZnAj~BJZ(mYN@20hE7wYb^H*e
zqEyo?6^h96a09#Ced4s^zHQ(`rOk6XR4#|g0fzf<@FB`G;4<^7t8G!_^HUSR&9wUc
zrLDZkMlJ%Qkx^VvgHl&xJ-;AN`o>va!osd=$$7_J)p>}?Do#Xy?r!Auper!|=@c}t
z&k-S+9wM}E{>Tne<Uorinda#ryCBS|vDfprI>zQh#0F^Be^rfOg|k00XVNIR&e4m_
zyM<33C|P$8d(!0rQ2>yxAV;+BFLD(h&#(#S?ITvLdBmt!R8NnV;+7LMZ$bjN`^j{V
zmbI`Z<oZif0i$hAJ>0m!U?uOMwB4>I&GRB^#N?v;Mp9Z30>%cWh&t!`6(LnJA9wK=
zKc;HCpNRLvpZ!B<c+7Ba8F<!3VNdoPwXo~=?cBNA^7B*2%Srcm9Z%peKbj)OR~}@X
zB6R5_+7O=%965iiX_UPu!bY>~{;&7FPno6huR^uc{*944BMxk`5jOv2a3BIr+q&iM
zObpc_UaEUHhw%UmrZ#w;I&bNsMV1kbA(O^g6fS#X8Fr(hbS<@0i;_KVsvkg2KL1gX
zp(yCu%Hs^xkszDOLvxo<0g9ImNlRTYGBs4wpx#x7QP3qC2;z-O2syfvt)D7J1-@%t
zQV71m4S7z}Up!Hn&mEI6#6QZ-&%fdx*Y;fls7DXFeUQZA*9Z4$mMab!?0hPRMyh2T
z$8z5!|1|7K&redN4O)Wdl4JnpVR94BG&?wS%4T<UL8R9^4Lt2*)3@V5>M=^(1Jt%g
zu7ihT3o}Crg%eO?7VwJVL_PqvIXY1(K6156+n#jH+p?6Rll)LFP|&@nNHn)&G0#+U
ztvv?3h0M|+#6VFci-|OQwsflAyhm(Dj~Q6^aqW&%4IN$V-{nOFlwosy=(LQ_l&(tG
zKErg~xh>|&0r)DmU!yO;AgPR?T;h#9U`U~0EMInI-CTM=Pn`FyQFBxI^}Ld&>&p3}
zphvVz*C?%?1ZLb!k`*z$>hd$Z#i<9d>q*JSD2ihxv=5PIN*<n9?;l5|7;?KLK$P^W
z_oo0APlA8Sek=(3^nr;i;ZFI*LGs5!^Kvv4p3X<%RBdHPSGIBQ&_6|z%oFm7SZ;s=
zN0`bwNZ&$@gwxd=(G5H&q<(oNKu<+L>Ji@;Ui!%Lq^@!77~sl#iDdY!GZK_4Xznvl
zxEnmW+CwWG<KUueqyVtg#6BFx+f}csl!OT{>%-W^4yt(!oebS~s7$Ro^QbcWAgQ8B
zLOm?$MM(526ZojnTRq%cc!37tLk7Ohdzb1wn#4%}gS={Mm=+JPwOZD<IBLMu3a{cw
zJj$rfb%nYDu^hjvpU7lNDUL81P{-p7PGnryG41FHNH#um(JAmPmQ&2%C`JT2hNX+a
znCe8z4Vx^QV2`Qk1}dBg*sM}DRAWQtuJFWHPU`hYQUHbYU&~aN-+u{>uPd}!dNUV}
zv;e+BRDfJ05{8D6!b2$Xc<7e4^z$8qU_uk%WP^9T`YNBNo6LktTKp_J$ftZWFTdmt
zaeZC&;q@}^;2@>fk$nR`YTc*wu*4LyT;=(uvte?Ab3y<0K_5RxaGqCp3CrvM3frmi
z<2%P#D0i)xN%G3@Q7byHT`#6>V+aKGfnl*yn;$(Ep~=SV>r1bv@fJwLTW%kLBF)mu
z%mU9h$J}UWGo&3vG<q>Rfe^eU$g~%M=mPKGDlO(R=xr(oek`hJLx@9B7+?<W8e42S
zdI@kprDKy4_D=F0b^>w(Sy+P6V&l@xdw6?nyLo$-&-_(QyU|+aEf+IccUyW}+}HLm
zDMe6&xdiLqa3?q${A_}46>hB&455FhU3lR<Mue7fsx`J*lb;n_ky=Eu9Y(@GW)6jO
zdo(#DfZ}L2W$%+S)>df+<{USdNiRhVYHa}xcJ?(CL&u!A*gigjxw^#k0^<N$aa~-J
zZ3Tv<k^MhhO6F^XhfFM91n60BD<%S*>T*cNc!3S6-G4KK5Z5q-)B*v2R&W_0won^M
z5p=4f#&BDm?`5zn@;4;1G<hVQi3R+j57lkPLM&&h{n$PzgC|}EEMHx5SHvnL*Y|O)
zEQz~cL}T!(pgZvfDbQW6D4Qs5R+(Ljt!^y^DGe^|)@l>?Z2%s8?B^sV`)W2s95-9$
zD6RNA$Zcb9!1A*vy|m#DVAM-?yaEd(P6sl#?`DKfoe$~-XjS=7Ocn&H;+rC*(LajX
z98*N8uaY6W8t5r}pG9Ep=TQu3ls>5B0qscKFCtKCjW{@NLGV#`U&;{t6t~HNs}R!R
zk*c<6EFwuGMxuVCdD-;Furz|Qrg<(nm8A!*(pK;4JtF%sK&2MBvJ^hTwt4v$XtGb+
zRoz~#5@vwP3M=IO#V5@H<s8jOom<SvVScY=F?p6H<1Ab8cJmlZzR{I+GYXAG`RhL5
z3&^25wK~_XDCpcPC$NJ2vQn1_5M7-(_fcnH+c-Fgh#sKT<NHJ}!uQ-tI^w_WqD4X<
z3)*Q8HjxzC$Gn#N#?KMn|M#P{U@m7~vgPTg`@VMqKMkQb)lNBw>ajlxeCc1P06J)q
zXb@d`#2Zkz!{H9jjZa?-59860>D<nwl4WN!fj>@59EiOSB;`jl)wS)ApX*C$B1~QZ
zc_WtMc?0%tC@FGDEU?0|tnLaZ-+R$x>_yXEgW{yc{9rA}Ols}e8IgfK*l(8euB}MW
zLVt|TBF4p#5#j~qXKG`m`9XYixcU~B>gT~TDEdDpqdV1j9I}T*TZmjdZ>1KAc@5vY
zA9hPvxJ?F9UCx%d0Ed3lL`u!l0)%mbMdp`ky+I_Po^jwKVX!s*a!k^^o_a4|W@Ze#
zbDCDxf|*pjJtfXb$P!8R1;Tp76n)H=non0!3Wa9VF|n*R;&2kWeQ$igbBB=D8JHHH
ztwICf^4Gmr1qTF84k=qN$l51S*f*U@5{K(W)E+O-H5-PVppm1Vj?}(?r>I4LTMhZs
z!&oM{V=VNv`ymE4AJ$)k1`LC1A{?&E@B1@ngS?FszeeQPyXi*KR^BG_#q@NO*BBI6
zfOpxR$bp_b$Se6Y=iZ?y;>SF({^C_`=C@y*U#u@xW?REW5r<s1Vu9#)-|_MIZg}Df
z&yDB-ARpOPRj(;jsPDO{T$jhN?i9CJ$IWGpE81EAm1Tj>nI+2zt!$p+$z$PWhDoq$
zBFkaV=o?ob%!wywy(})qgg(8!fFay@#oGnKR35T+4<kI+@FReP_lHik^)5v@05V1B
zZO#wtr<napSUM&3V*Ks^g1+yqrw_A09R}=pMq%{ox(ag`AXDdq_5sZqOuJ?ox;_8Y
zJZb~a#F(nWP;BT73%<(d|2%G<R{xtZrP8T|`XRQ%Uj49JC!KI@aTld}A+##QV|4*T
z0;@qNkL!D_;PY%T2A2CHtL%cvFyN0(_!f$1@R+`!LIEbiNH)w5?$ZYHS$%%l4xT3I
z80Tr?YK{NUUY#KZ9y`g!otb~#v_h7=I3mnQCMF~#ugBLqg7$p^xQ$C54N(B}M{A$9
zsufD5$jl~`C7^XX>xR=~(}jg_8y*qwK$DzEp=d1Ll6uH;?v~V`Q!t7U8NC-_81brW
z(ED*NjY|MZtF*(fKUK~-BFz-rxl9yFYO1g45yx=YpS4}%QcrBodvy0aV5wSOF1^7)
z(qdCNA|XTgMev~}Yc8jP)bjT>JMx#2%tfr~cFRw<Zi}xA5$sG!u>8up={F!h1&J=N
zU#wvs)VNlMztdsw-Op2^Jv+9k#I(+M@DeaQow431UeSmB;qNzG7CSB|KM&3!^d8-S
zQNB)C8q;T+?4dgi`SG22p5V6}c4HQ_w4GqegSEB)-)NM6^hAF3nYvFcipVT`IRgD=
z<)|WmdX<^l_pj%R=unt_*=SJMCkX(8gNO7C@JK5jA1BT?@7xwMW9}0r{ky9ZaJXR@
z5ijk7|EJ}l*0G1ND>q0W-w4a53KzMUGO3Ha`F9Z#J#$;5J@AwfQpzwD_ocKQ!&Y0a
zPv)`UjG+|!$xJpDVIaI#DVV=9k|u2II!R+Pdn{=1ZS#>9#8`bu^ddL8E%yFrg#`}c
zS!nPhR)ci>8iAc7Mf|3=7wXYcRuNHrpEXLx2T*W)sb{v}E9b@T8R-`V?TR3LO+D6L
zx5jQHA%poHK=QA6iNGE9C0c^ENZCs7i!v}9K!L4HDdX3$Ow#D#aTvBKr<Vfh<sH00
z5t=9dIr)4_0r!!S)9#AmYx1tjYzhj;;VyB~z8V9(TC9vD=!`@YM)>{xOBUentsRD^
zzpo>}7&-2j@FV~}4$#I$c3LqZ*k;ZqD>S+d;2A1kAO*4JmkTD(8q5^54&)`i=mH*9
zKhy9@@dS>955!be!(?Leim6Qx#FUbsoEpkhP{i0JX&GhbvB!P#6*^o-DcX8NG(VKg
zBj36>#Crfq3jf@pU!ANyhn{g$raMA`2aS>m0gFS*xkq3e0gRGu%l~?G3G=c0Pp+y%
zsj`=hhVL7GJbiw&>yxc^+DXayfri#3#)D{>3*{TJ)eTiheb@WQGAHBID34v7;k5-m
z#EQWM7*{?>aH5&gVwYw{Fj2Q#Vmej?s-C4UVs)04-P0Wbm@q~mZtr;_*I!94uX6)q
zjp+Jow_$Q(f>8|MZnyo#OYKRW?#$Zu8bS@Ff>_(0k<YDKwDLVH@$7-fKo*Xtuuw$B
z(*A0&fi<qJsZYBAbB3s<L}>P0LPt$%B+5f;WxIiH&EmED3;7iv>C(&xyX-yX@VhfT
z!cbytlL7bv+WoO;+~@;-{KcoK)efF3S{WIZN@A(0(r`6#KQ7saGIu4Ag46|TzyaY7
zgKUkgrVyvJ?PzV)NZapeG+78T?9xK>>1OlP_n9erUp=Y413NzmXz3rzo?VLaP<=YN
zQj+0LpL`k(_=L7EpDa_YLXu-*G7GvG!>+rPd*TaDDWm)7V9H86$m<*X(JoO%2AQ+?
zif@>@@QJ4dU2QKFdotDa*tLrMN`%O&-FT1~|3mq>juLfj{#P1CIDTi6<~x~g;`}L0
zp{jP0Po-~%R;`Uf(cXVsg}f|~s50{IDg33al>so>Si?(Zj6yrvHd~CVWQVU@irN&k
z^OH=yPbFGkql?s3b2jg5h0nFTqq*@KO@gY7maNV1B&uWjZrhrk`%N;*eRr$+{<rtJ
zVIc=BDc=nV#cq8#^FY~)zBjAEXv_Y?*`~*&l%S_f*t(5A*2TKnZna@(t*qo?=&8IL
zV}5ll0a_{8-FSY!>>Zi*n7?0h`Q1q-Jjv30m*xANHkhvW1p@XMBw?E2rFM?c;uA|R
z!SZq7V6tsn9ai%DNa*{n46?N=Oc7HQl_U&-W1}0BADzg@h(yez4Orkl*Zl<DX$|_d
zn2a&kF_zj5CQx-{z{vljPZbl`knVu6by$aeKrN%ED$9>XYc>CBW4CPuRuXS2`6%nG
zXFmN_+IzFXZrEo_N(|*=M;>dq9x*DWhergFC?SuRKvzGFr!vDx40HE8L4Gu|P#Eb}
zTc%x4WMGI%6$|lKi{LTr?4O+uZ?7&UwzfW}Ak+&82ys;O`?9g2YVm?qO9=Yz9qNm%
z9~YtME|y;8@TOGfYrVx&S-<eN#|Ikmsz}~%g%gUH0V@eEElg(^ZEuzAdi$cMTLJjD
z%4bf*1{y&1A&+#0rJX>w$TEZoVQ#}<K)}i77j_o;F>B;e*xdh5o=x_)Sv*2r6OC;$
zB_Rxh7(a7sk9%qlC~{3R&`MeShMqUs(P-jo1^CSH?tZ(|2hQA7_~s%r+`_jx8*(;d
zFe>~}{7l$d@Thl>)PA$fBhB?XunO*)2LyKkd~Tm=R=!VN*+K9B=3TrW4IyO!GeFG0
zt%U}=f<Lg4!;5(v;JDkEa}O)gw!FJCLnh-t_$yd4O6eP9gcL|BU!;@lGFHDUFrhs`
zsJeDZhZ+&j?p_n|reB2KLW3D+c%#==aExQ3kkj!w#mIt#lL>oAfFzzkOI>ANKps$5
zX}P9R=6^O-Mp8&ihKMez2~6(yDoHSM5|lE<hdVg?q--YECeC@trqmMZxMwZA_#AEO
z6_cwbO}6~@MC<UsJ~y$O=nrcL0$&1rFHer-sekiEM$VcVmGsGgk``5*B>|Yiy#_!V
zpwGDS4|IJ9Mw=04j%93E82mM4%)F#j0X)M<4dPP8-mR${G`<*7W@H3J!Q;=tp=S1X
z?%Oifaknw9_=d0v92_3})4pKRw@<KTe!#;k3}*=JMvEUO2XAyS`QEPH5D+$EA~nch
zCo-zi-(CiSYXJyVKE%lgl;+cI5niPm++Bk4f3BaT$uh%N)^943=z5gWVdBsleD79*
zEtqdXx7&CqfVTXemg^O-Gb<*<LXwTl=2eLLrLjd~jrJfU4#|iDu{H@T@B}$aTrnY1
z7p0>RBk->7fT1ZJckv*2KGsDJV;i5r1ecPViyF-S;*Sa+CkAN^0$kM6EP*Q^*io>h
z5se-<rFQ^f)odPE7R(`mGtQFk`AWFVU$g^rkxVAYdXZTfE~aK{P1RSK3(bM${hp!m
zMGR=`6aPJ7PPX>G7>aqC>W`S2(?Cy@t6D(IXUmmvY%%1AK2OGG4wBhwLrlAKH=xPm
zQziOu9dV%g1c0jYKL+%GE{osP!G539&jEEScGZK@6NzX9ijdnFHDYT*LUUs;?+Ei=
zv0LOMD(jY@CTsp4>1Km4pX2eb{1;6l>;iyXO4VCj{6kzQr(@W9I8W~KgR#K0)*QUU
z>W#N5#04qhH<;uL5aWleAOh`MUXQ3zCMwyGgUaulFaH5|IcajdK)bu$E(k{N?+=u2
zHqXL~rL0I_q%EaLOHjeLqCYvk#d-HIx*5Gdr2q>Ou<yb2|KpMcBJYeEGR$GurYdbc
zTZAsRSMY<gKh}#{9Q1ut?O&lqAZBsxdh+=NPqACKDaypH6SEqc8N0dTKXYH{*I%*3
zDx;PwohRh^$v1ekxed6?Kn?1m0|A+dYZE*Fdc;U?dhUs8?`>mW_6y=*xLS|Qcp9+U
zw0KbgOQEJgz+!-TXSx)V-~%jACnATSiU0cNvE*bb?TkGOU*4}|GWAbp@Cl0UXqlsy
zLX;L5&K0M)nn8#++CJsYKrlmu58Jd@e3N)$GL(X?Ex5zplUn7Auq(j*uNLU_)x;RZ
z0u7$c-0bWjx~<NFAGpH&oU>ejJCp^0Pf&cj?k79%7lAO$q7VPrk}3OWPf`V>V19=1
zpZ|`nm|web0WAxPj@pnjQIsSXMCLAxy7NNOq7E^|hWO2&D@FBGn+0{jc+a?)7npn$
zDY+VP1h}d50*>LUip#p<t-@+{@`FYn@xP%bYL}+WWSB%|37wsWl0B@Rt6y=RCI|Wa
zXc?6t+CmYi5-^QTD@#mRLaQ`dZIF5JUG)XxWQq7-D2~V%N3<E$rMi@ZQ6c!=H7M;}
zyDyY|q!+cXJ}@6Tr5C8;?v_lP1D*gm$VkXGc(x1Tx*T6z{|x2E=&eD>TH;_=+=D}<
zM9Yz(Xg>bIdXj~`H4bF2IC}XF0ohz*2M-fzfo7<Hd}`pJjm?@$dS={qV=DDmU#P<k
z6q}y?dbEQZM_&dt7o}F9GNJR}J#a&%bRXA@8y$Yx6M4Z!+F3WhhC8c_l2SsY!EoT{
z3cO)QTL>Htb*ECS-_YSO`F*>UL3C;&y{90gwaJg5ZFk;)+$q%bkY|L_wMe$eV(c_f
z^wePa&~E_P|C9m)&OrW=rq|prV~#vEr${hR!Hhr*m4316<m{!ZUzf76n=4jEYdU5#
z%~|?HF@V)b__Ld^EoJk^u3$kWjScTJ0(aLpa~xzF=)@Gwl=hwR;-K0GzGK`~+0vx5
zC2*TbdK3@(F{|te0Nk1xk)&*U&_ZD){&9B2B%3C!ykR~TNAY-fSn6W7#yt{<{S5T+
zPzt<WfU<$*_}{iJwrJ8)bTMkR^(xi+Z}6aJgHuenv#>KsTb@(RTq<<6@d{xS_v)Lj
zZ+22sV@!r^OKp2l1lix73}+lMT^~5dMeUimPhtD<XA62)yqw2GPD~OMNZg#<B#2si
zvYc!oRp@_uKt*sYw#m?|Ww<!VKEdW=@)EmtTX=$!g)t;G)9y^(;6H?t`_x7+^6)Fp
z)lZVRo_zdHowVa*yXFiT&|Y2)ri*Tp=n=?p%-}D998dMSl1Og|37hQ4iu>HxHP+jC
zb$WYK1ua#yRC}FPc(RJYIH!rIQKR;`Txol&y{y&6WBqIVo>u1$c6f(aWA6tD%cn-R
zU`5Lz)l0WfAudW{Q{M3yGDloSz0^eMWj`O)03J7{Xv0o~v*|((%#F?Q2%iFxYOV1&
zLrF!0XQ<$RReeG$u6knSU71>2CA!!(Zk;TurL<msD-S}(3F%lZ-+J^O=niy02G&C~
zCECu&H25J$Igx$RL8g#efI2A50I*C~Lpejy3Q9{o$Tl3JeiHz=k%ij&Oyub)=)ZV+
z(2e&;4c|yDq^aq|+LcjihjE9W8Tu8oNpxNhHEH56)1RZPZ!<_nA<yS!)s3cL4}7n1
zZ0T!wm-I=Gq3vudt8v+#8fP+@Q{B{P9%^19HYCySU9h|v9b;|eIT9Cn(rn+jc-RKq
zrJVK<PN-|$M>}Hlv~yq@V4Poq1Zk-boPrd`l4Pi@WtPK3B<JC!NsjK=Ts*W~8>Mw`
z%SmKix#wwB3Yk^(np<pN$92*%lvn#tIEtiv!lEM=FCX_hJQVj&+Z#{R{!g5q%tdD6
z=5mYuX}$oT@0QJkOEQK`%q2C#2XmfXXlyo3BJxS50*9i<isvVG&>t4>$G}oFQ7)j)
zcA^>tBYJguv5uF2e$5qTP$ngg{kcRJp{J*TDz(x5pwlLkl3ic_9smFSd*8sD;R#i0
z$AA!Fsd^h+KZTpi=)L*j73bsUparc8#YraTg*2_fnZx`hr~)gE0qW(HngjK31x`yX
zJyG<2k4_5cd!&a)R<ySnO)gqlA6s%VD4tiD=+$YZ44&j{>|YXz&_Fw44DWW#hXA)G
ziM?l@ZM-Uxsf-j7p74o~X9g2~&{ad{hrc>m9i-63Zo%&5*wPvh4PwYc8C5R{_^=a2
zohV;t<_(gE!lw$pK5ftJtPH4<SFV>x$*)858r)(h{Gh`VrYHegfStN<%}gu$p5GRh
z;e%(a-^(H+w<-iDdoYHGmwm%++z<yaA_v$i=W%Wl-RmrUr;nth0OFe&aILhkyAMKW
zw@fp+TjHgDZBe4+MZyU}?()Edd{+qC4n)L;M+`#Zt*tOuA@k4a(sJ#!yC3OQgaHtb
z;5|VH(Mnex==u^$tMK#J7ye*c>ljBs0uTxUX_npV)etTQeEbj4eXUasVzeay-m_6P
z)Ai5P%sU+h?Nn3VTv83;odQ{@YF>QA#Q4|KM?%i4arT-uddbS-h|uOp7|YW$Prkr^
z8~yr=N}sX{7?|F4nTnBg2z-5953AsqW$%~Om>CysOCR}%vkVB4Q6qjqHclCJ4&3sb
zRO{z_@k&<H8*`>@J?3TOd(FR`GMPhOtk10IBnW@Uk3SOvaNHdl&5oS-(u_BwYTm6j
z@@FfYI{lv^5SipqJUYScMkl~xZ%@ol1NxOZ#M@~V!zQVVF}2SR<FPe{I`oy0<#3(h
zStFN(!mc)+<#Y1?vc8gWJxSuLl;SNJLT>7#il#+$hz|k=uN&g!?I35xCOBaNkoE}|
z)YFo@n<8{D7LI1)wWM1_*i^a)wZ$+SIw1`%M9+xhFiazfS@==$NPcbr<cUM07H=PU
z8l5m~RUSK2AI1;ewMA*%@fV}Nr||_I?k%0ts5C_5p!})9vDcvW=*p6o&UB4UNAiV$
zHSV5y{yy}|=5gWjRJ5tlMA7AaJJvMA+CmkD1~0*5xNOe&Ou7&;S<TwUD%6r<Ry+i6
zT*Aoub00Jq&3mSfpNRHNI{5UN#K7es?@n08wUPS_={p<2{kG3(B(=JG92$vHj1YMu
zc4TC`4diq*OJ7<ZJI<>Xi27KKUC<me)cKt<3Z}9J<basSt0!$}wlP%fpy66i|FEOG
z?Js|RtX*nKX*U+FB<$$L(;HbtKP(#eTQFdb*~X;gEgPV9e-~CPUBGwvufp(h5XL>J
z3MH?*D0~vBzf%p^!*&F<viI+82l5%Fg#7($Wv9uE`Q+j{u&F9)7$PcULkY$VH7MqQ
zNB_QD8FAtya&IM@Tu+s{+dB$6B)2+xLcx9Q#6H^PG85xR0~Jq3c;B5FD|P(wKjn*G
zNYsC<&I;(#&C4CyOe#0<T9C=drhS0CAq#7<lDuD?6Na9kjg)_1U*dtQPNYHmWsNBM
zqyQwfqfzxs^e^kLY4*+?dn8m^rZ}r*HLFiD)k99I=dr8CB?xgSa$GH#n<?FNo3!Oe
z9(^O5reQ2hR^XOvfd?ZE-5@*|Y^e@$a|YXyh|>sw_E@nUKC>9{v`Qp;t*Rzfr{=#W
zkaoDTN`FhdKluE0fJo+=)6EFFrago0k6RhKi%K*hC0;-Q{mazq;=}5719zQ>lUc=R
zX+>%#H>oAWBO}s;3I20>kvQP@3>VUMSk8o^fzn8ai2@bKk_CG@0U2km0$uz0orGK!
z-GPkPicE0uPqvw7O&zf*+&kLIJo!;J*C64PMN(^LJT`imLs@M-KBTdTunlo*b>3}|
z*j&_c4?J$~WTE)0hOhVa_r{e*Z71{Cu4w_iwmUjC6yj4OpbQL#tlpC#!(m>PbwP>)
zX`rXRwgB4Ds-8vn6>p{PFlZkRXLyd_1=z%r=R^@@DKsmrC?_Fuc<MZyO3XO?7=1y_
z^EHQEei+~4((-~j@PzD;s4v~O4jpS&SLKNuL*0&arP|`5@b8qgsu)CQMIv(cAE+B<
zyZxW{thIV*F$t!Nhp%6Wvx<iTC+K!2hPHXRqyd;+wZImr!s?t|@Pi7jk!iGvqxO1@
z0{fjt$&7Fn&if%?DL64htTRHm(#q&Glxw-H3Dv!5%w=6*?pwGH$ftu*3g?qGm*S8f
z9-nC*G=0Yy0nm!Gw@!JfC{=*A=l^5_xZ!~?<juD__5<;7@XV0~%>{Q#4#~sj-rCIp
z0(Ui0$neua6pf7MePtDT6anTuomMT|a0IGcG~yXAh0(cnHQZc<*<!?mA#n$kQ8hp3
zxb<_^b3V8HO^0m7x=vG7?-)=Eb!Jo?X?{u^jl@L%`){lG0p}mt-a|>fUEQC8_o1N+
zw&KqryF8dv-He={7hlD<ZN)vPE91XPIJZDcSzj7^3vgdWk?x3;5xv3b)#5^=)2<Ve
zgFjwq$<k&a2QTkb`)oqNXGyta8e|)uIeL6!k0>R@M(N<~Kvpb|YoTN8@Rh(EYcqyN
z^2<?~$^*gAWKGpQU<>XD#Vycq!8&ZMx!e0DB({I{fldl1X(Gi@N5pi&KB|(yrCfWM
zRPf9#!u@M=F675(&Z(z61}|}6KNP>uDE1bL1T;~nh&va%YgqXc6Hj%_^I2oN#<A&5
zl|oCQj!UuJytrN%xxPmUyzrlx7#RoBhJfiWn13=(p@^^!04VNzHclKUo7YM=wx3^+
zFN0L!d<#A9bFMBk-Seh&fR-hw69z_K&VALwrA>b<FwEjUn)7Le{VrgpdEx%RCC)wJ
zvw_<4QLC>n0PI01@Qom~r|$0dNcXgPZ$<k?>_Qpib*S}i!H%H=bRHpk<|>A91B;N`
z48znAfYA8mT8m<>rdl9}TAqC#HQBj(KB|}uw=@*o56qASa^4Q{19dY~SO~ldu>@!7
zgj5|ErjwKCu%BB;O-T1uK_=l@T{Ox9xt?_0e8>#|$??w+_VTZ;3+V9tg6cLme>5gI
zs{C2in^)ww+&~_GU-N8Fs-=B7+N5J{^d-HZwWK)fEXF|~2?K4$wHa)h^8$2I{kOzI
zVB=%epS8Zp43I1G;^WWk39?O7t)oFt_N}Qo+JV)3bVD(BB(GTY88>hfM;GFJ+3}Ja
zdX<B%4E@Ic^u1Vw%Ilq-smfhmQ84`0Oc0!3RC^ekTds!%iQkY=z}2Zgl_H9M?7In%
zo0E9a{Qcon;p}ci72?h=BJ{oAhfP{{;gVtb=kF7qzuZb3Vp7izzKbgdU{wz^7&~Hq
z$(@zO2RA74i<ZAxDMErIYS1ul;K{HAVW6Ek^h~bzUVPFv349rE3J#y6vLe2S%Pg#@
zqf-b%7YeM77!t{31FC>;=)ERX)!K9f6OABXEYz|H@aM1vmK-j^owX9WBldF@tEB9o
zhsMCFnl!I=-^$dD?=06>hEia^nmaLV0#bMYi$NUSa2b1WxmiatF{^S{zkb8o+TdL2
z+Vfym$(44U{cZ$_wYBlG)u1VaIHbRcP;c2N)5a25{gJ6fj<ux@z$jD}z}&`j4-Ef@
zNQaxPnrVq^-WXJubZSA;kRkW9&ecCv7mc+pH%UH*8!Q%6CT?=Me&OKjQuE{R$dTu)
z6NRK%>+sO1m;|s!j3<`<q8mE8Po!WnV6C)?P2<hts<ktai592}GFWKv2|^O&6(kSL
zt@%D#p^N?lS|}irheSsEsvd?C`GdG2#8|&t2{ZvMd=#3$?sF{@uoa$Z0Y&<!;UWL)
z?00oZq(%bx(+WfAt44|~zO%Dha9K9W1ejIyJcG$xj2cQd$5bgH{)B)>-@~BAMM}%c
z0>6Ez&kWiDc>t)j>ei%;+2f<f^bd3TOi#K0C#Yj&v|%|1?&@k7)(7e@LMU(JRjt7h
zOev~1%P1;%-EI#ae>=Ec4u|C@3+eIWQ|1f$&iYk*#~uAxqZ_2X0izic4%4;moqLB6
zrrWwK$c+EI-^Yk@Gkz?E6A$&>Q)ot4NJ;13){FxpxftbzFgy8p6$8?+H}^#d7S{Z4
zi60KgqJmHt7`QefgHs8WE8AX4v@d_p+}rea|G%mTDji?L(za(n*2qdlVtM7$;oC^x
z>Inn%7C*}EE%lCL&^ElK7P?eR67DSVv>Y$v<B!|aAO@#2<y1Fi^QJ|i_WbPcR{}}_
z?L=y~Y>l*HZnnyr#FE5>4SJ##3~zyrk5IfSt3v$^pT*=a#WShz8cZhWMYiyGfqt&&
zPNtPAlaMo?ir7%Zk#cHDF>3llH)`15?f(EzjXHX@6gYN#p!O7GnYyE+lH#p=4y`oy
z5|X(axPk6U$OOD;;HcIaoWDrTq3T{Vdd74s*KdV%cgYPc0XGuC(pU7FrO|Z6K069n
zOw(eH82)Yto}te3-eF=RW&fzYhuMI)kebE1U*{+{<1T}m^ViZW<pQhwDc@}{S*)Mo
zN1%Njd6z@v7vaeZF;QUp`_cci%<$~rnJ+<mr!6%y(^IE@v2tr!jtB46!Ot<%2p<WM
zDFdt7D!Br%g6i!3S*D}lJE{gIKYDsGA%Hz$PsAREc!nJmS-S>wQI!a05*fra;pbyv
zoyyM-H&E;}srfU!{~xmp668Ck?g9*cJlg_PqDpylpKYF4^fI@iVh(fohr=Qtu1Jq4
z+3epL?Pvxt7jU=5L^LLIx-w0H2MlT)tXc+eKdwbvhd#bLFkHdfENcH8_(MW-tXE6s
za*!U?4&9eKo+FToQ&;15{2nsko1@D@puAr~4}hN{Z!ed(Q+F=B$blxqV<;_zL&wP`
z=RW)4Gl7ozK@|N^53D<@nS*iS$~}a_5v2AsCSfF3+uKm0&3ksxmAWr|w3%}LT7>=s
zvY3T@P-dJ`!~=8{=J$;pNePW;I&{y{f+=)I1vP>)vK&n`PfKP3Lq9e=Ne*51h36*-
zcJVD-hokswppwSV5+1B>>a0}#pEiquh?u{@X&EDF*eNgGj_3)Pn@$cDk+g#LZ9WP~
z8=pM8fipQd*>XDG_9hyLsBcpNhP?lZ1jFB)3p_qkoB)G;l9S3hN)Zx82i6X|2UfON
zGm)YJ|4mODlUt)t_H1GvLTN-jUOkCSjjnZa^N++qTe<6#F6OB_wChK{M0AyBPX+Tx
zovw6C<y5L4?ZzN0!3lMai`1FVsb(My$w9(!;uRsO?!}OXcBQxSX>=?2mLWrHDwqGX
zxX`qF6lJyAHnN*v8#s*qT>*|Pbg`qbhsbCV1f~-}I^#|kYR4v8<n1aQKP>A98eOJL
zI$K-ZjS|6`VdnAJ$~QsJt_)fG#MX?hWwZS7PPP<zMlk=argUWd8FMV_iOkuEHNMjZ
zOb)Hmw#{%7ra0xr$n%6Un$zsx@XyH&3kr9m?7^Tj6k~(YJy%b~i&d3F#5L=MYosyJ
zt_ZOZX!nFo8>~WSeHA78O}}nnh@aoQn#Otf0xuQfhT)DOtxMX;?NUSj*2^gVW}pGZ
zwGdg?E1_F*P(Fn}c0?7wr-1bEeYwHEg9LRV%1x+K@>#svKBt~2lp&>zc`-7jV3KHC
z7`0gkS`5z!`YMdAy7xg(6<!&U+GFNunE)u$*|Nn_zQ})gnyIYIOe!YncGcJaH<7KU
z*`6Fg+#u>sF|*parEUGwQZSIt{dxEDAhV1!p7|$XseP$h6Y#|Gi>2)_o_kR#7S8GQ
z{E>`$7LEm;me)X=!N4jaV3{UcM3BVCn?g*xXLBm12BOGLJ<LAKDRuivZfJ;zx_3O)
z7TLRn2<IpFhO<uEU1O`%0<QoQ=u$-^$khCx%lp68=|C^!JMigcFeUqBu4yBOBvVsP
z`rr<+6}@iVoh6Z!1ISjG!Ov>NxUI8IGuTalIiryYe88`jD-B8wrzlS$kYfe?A?kQZ
z619sP>yZtMV@n5R^Q+Y!&1EQ<pI80@`7}(9^0OAh-|(~!6i&8ong4NEAu4a)Puw+G
zZ!g_yYJqBjTm*xWE#zhobyGf*dj$(F?z4dXtvJ%rhWEeX()EAnh)(fNIC}eGEJAxg
zjY5#rtW`1|n}?=GfNnY&#a^ge&SU~!jSDhdYsMU@;-L`jyqLpwB3Q^|-(j^bV<cl@
zTA`i5)T2Zu$c#-NzXM}>nrjl|M<us_j{3p4Bytj%!Xrq)X6H=$OJd;3)kYzDHE{oP
zBwG&kgv#1>=E-0PSxEeYTd9Q|umvR#erzsgXdYR3imBfiaSJ5fg^1fSxeX9h-ShLi
zHND}%HD3=J?6-`YC~9dvwdVJblHxhyx<M84Rs|cRzD&FJz=l)aXGI;|FOKZNy3M&d
z{jP%rK~Uz$V&%r3!R4SZUMmFej)&FyL@1hg`21Sj7nXgQVU^9<G5i2le#?~|4Fo1b
ztXm|N(j|!Wms|*3T72ohE+6!9GAi9|;%0T^K=%Mi|5R1tcWOvHVFDAprmDtsn(@<s
z;Qitkfzgp2skOH_nFA=$5Ro7pcGd9~X)_sZqZhg%fA`@|T_$&x7BabMoS(-Ej}H7@
zAc*|BQOker-OsaN<IcFIxc~qvZz*Pphc72N!_0x#aRAVbHDxD>5d?Mmw`*p`zQ8dg
z9gN<RhAuVfk)ei_1am=os05#86{3~f=n}JkFPZ2b_t785^@rcBB_nJkxg{qwpaSu!
z7;pNjKi}M2>fg$jn`yTc_|`(Oj)5@lzktGFpX4X<anY7dgBzXAz<{t8$dEmF#ex@^
zF9mPX<uuo!C^Ma|o~OrmVL4hy{SS!%a8<u2htD%Dw!Y-m9zwYArkVi!+G#Nx%v~*7
zoC0TV;c4<sUHYEa=2dI=hdR=L?i<$^PG%S7LcEbB^597r0mK&+3{wAQU+MisYefj{
z<9Pq!H9`dt=_&l^2$N*-|BQ96kxgBg1fr_kffhuI{`hE&-Ee|`;fpQ<+*BG=4n7+F
zF#r}6xJ{sQm`6p&u2ID>J#syi54MWMK~|?_vkCXwr0d^{)qf1RJ5|DJ2h4@%5yV_5
z7nSx$MIP#~m&tGV?MlZ)$8>Zs_V=zM;|(~_=#-m?fN{WTSO5e?LGbfPw0~~xf|fr$
zxCvrkNQ5G3&p@15%ibVL<8c<P%<}TlC|2AeRuu<LDnbPdp2HB+6R#x%q!gmJ1D^Qo
zf0aZWUhJ`|%8+U@NFayEchSJrph!O|eL-S@{i91DHF6zr@oU(2tdvZG#<PY6c*A`n
zoyUITqR6`;dg`=MW!R9h+pL>q*ryAjm+-ob#PotQ;qmX#Vo2RL9a7_h2Q2Wuf7A6&
zxS;G20iYaV=AJ-d6e6KY?`3#4&4U28=U@Ny^3;Ek3c~qzbK&ZftaWm(GoSuq!mU34
ziu|XTRI!-za#5P~tl8&^t8(E-dVRn>gLQ{q;`z${bU{{LD;`(S^_{zF7*qYWobh}`
z)ygL#PuoqGDZD3PS6=OiaX%fRZ*{{EW0dc8P9wXMZns0RvF^$*{X4UmVo;cay~&h_
z<-9MLF$^Ti+a?{<+zzBEH|rUWtM{W;LaG#vXyBK4^dVX`bby<)a?!=%!cCT9fQxd^
zUGG7K;A+b9n1MIo0|6*Y9QMP;AbGLbxNt4#bM4a{$;}<z`Q1<f@7zL<{13AaW{-=z
z>Qf1Iwg5Gy=^h!oTE60$bObG?B5bn={h%R<FC+q%ldG#sE5ua)K+oC)$B*yZVSL{F
zaQ{Bkl}A4L>5Ba9Iyv)h1)^)WVTe?fq(c<A|A4Cy$W}(t?cWUi9FH}%V6%?p&W`;n
zfKZ2JxbkH*;W?+{z2WL1@7~6FLS4c-WILS*%mSP1tzb1uv>B}z{7xvxUDI^Gw_akM
zstLny<%FoV%VbcU90%TPhC))eL9<8TNEcp&0d&A<1Ve@@*S{kgr)hT|;E53C6Oqj1
z?D!+(dX}wKT#nlzM+)5Y+!Lb`*B0mgl2T7U><g2Ru0I6jZ~=83l<SQo9fJ0F)BeZl
z*M6#Sn|}oq{-SLN30Xjo%ImcKTz(fGJ}X6MR-+?Wn9O0aO1Wg-Gm-MQoKLEF!uF)=
z#9kt$*u(bX-<}fS-$zd^1fli~<-T$S{Cprn+x4!lZQG7!w|?9!7Qujirt~t9?-q+k
z*5^`<JR`+vx3V+(r2xxOWi*fxw~D8gADw=JXNUx4btwu@7YtFZdulIwViQi5J1RN>
z8e8H+iu;Ysu!d{lE~njmk&=cI95>CE)hjmj3E92X&7q8zsebSXiw38tI5%a7T*~CS
z>XjHGg*=FG&T<P7;8My@3Glp7L4bsDdNWnfK;Fwmg)bDs)q;&$d&viVOI*MPETDSa
z1s}K;>H{5X@xAB@IQ3FbDB+tZ!v<6Zqbx%6&uz*{BbRsXT03i%#GFtNBE9_k1r89(
z5_e3~qR0h1n)!X@8PGlEQM)bPlvFrTQ0_y&Q+$NMctd5>r+)r~Bh`;6x*^NQK-XH`
z>N+naZg^lQvz_KM%aWAYVnCzra*i;-Lt`X@;-NbsawOSCSft1b?7~JW6(#h4pp`{*
z<Ie}H%jSB)rL<t9jwfq)lnBYR^@A_M7Vd$x5@f6E#g)1Mp{XKscEo$nv6!OBf-q?`
zd!l9w)JS1-UcOf5f(!-~hliZnZke@)xMdrQAcjuI5!n&=Pl`}EKq?VO0~58^hVUxc
zF?PABOSmB9%Fgg8M8%%VNDm1`^^3VM3Nc!aa=ge;DP|;nkGMhvq6>lY7OdMlL1h`h
zlD@_iO2=DhX^6-HTyMEVT_^hV^KQ17tZmA;-GKA#R8)LFa;l452ItiH`f;Ma>UaK+
zBhk>>FdXoXyger`G?9zaz~ah>F~!W6A;LTNKSxQ9uE3Ifjxh&f{cVr<J*t~oYP70;
z^J4&J)(qT=@xMw#Te*eBjIXg^tY123*xAsy@$jgC6m|E9ZYGFK-hcP#5v>X0jS&59
zEo8R8;fgyH?Ot-T;@=5OJm+>o5M>h#7I&RxDyr1EWP>CaTr+cuxSQ?Ncejpz%)#cH
zu-v{Fad_DZC*W18C+#ei5^4bi)#3n%z0=m56nu_O@~mnykOsN(ZDaJch~C!xY<r3g
zTMuQ_-a73N`FqnMZQ5o6pR<cQlu!<o;klPZs7?RaG|VD9w${$J^!9v+XsKr8(pb+B
zp)p#patm7u>vlhV+QB5m-F^m(mtQZxH-cp{3_U!ag2kw6&ttzYdUJUBhf_|e=i213
zzMBt8T(7q@xEmA@^f$d0#><IxvFQlc0)%f2_yX0JvNhh;jm&LnElupmB<oUATN&nt
zJ+bEy<uVy=i1HG%#^%i+Nl}P?rDT8AYx#Q6pWd~q%j8LFF22LYrJR=#MR5j#xW2Y#
zaOMP-)P3hDa`9{0Y7{dTg5TJY^{<Gh?QN%3ftGH<Rmq}izio$GBE0g)piP*|x@e>F
zZN7FxV;1!kaD@EEuXa>ma!1OJQ6N~z_Fm3?%jd;J*RUcy71kxe&L#1?PU-ZG&xlAC
z70W_*dCJ5r^RFD4&+N(sC`pQ?>j~B8t5wt~Pm+n#ih=tdxNa+}rO8s1CqubQnWN{K
zE^#=Pg_!C5$tXCoAk#qW3mXHFqHpV>@PV@%afWJ-N_nb>S)*ueBe_4HWDYp3eiMMx
zimkPU;0Kln5x8{e2Euat(=?1BVaK}xNzMMwU|!=6GxyosxC*Xj>>MF8B9yZ`2Kf>)
zU?t~tgL}M{8TEqKonhuqHD1J|awA|$PU@pi#@wf^vIjiG4vs;kLS>JPSz%Ql{n2g+
z3XIsCM@m=AXb-#6fDz6;t6l}cmE~mq)zMm3r8L^I4+FC5n2LU6AENcNeiUnRGfggg
zs{W9>Qo)eyKN1jq!M#4bzdtDx3jcKP&;lLte28gV*r?1xsv23QUcN;lU#52hyW2n#
z;r`%FK^*1^LL)euoRhmpj10r3T3(cW@2baBytpYtiaR)Qb3%6?^U&q|U~dC!%_#~t
z8<NE{D+_SaYPh)YDpudiVv)Wf2*?UfSWU5sN-0R8>JWLk&e2G<wPakM4Ztl9J25?r
zWx(`7z)!1hp=4^N;()wpq2}Ga;I4J-5!KAB8Mq5cUy}&@9R=7h-KHFNqj+OQ`gofM
zRRrV;aiaWY@;(#GBBYAn5h+LBurC;Ol=nxrJqGEu;Mfc#`R$lfe8k66RDRnhG#Qld
zx)mMWrD@xt2Z<=7_eL#JV@s*fz%BiN11i%USSdauSA{;<$a>@S_G%4q85Hq^Uq$r_
zZ_=gn6@4Y#K6GhVIN;8xE}(X@JzsbKqC98QU@6!~%45w)*Re<pZTL`tawuM-k_59!
zxvM^&&uG*lKW?n13?y)Za5>2)y~(>GwlEQasKEwDV|1`<t23+G5CL-L2Hw%oOi%0_
zmA5iB699vV43~SmhPmNd!NtNDjSKQzGpW45MBGqTFQ*P8!xbgbJb>H<^TNJA5-cGj
zj;wd6oT>+3cr4VoOx57n!M}&kAz3$nvrGw*Oy-QRDI5qFaXDfX3_N$|=U|PJJ+0b&
z0FYLn!`ZEG9H+>B35?vavSAAC^+z}>ry*~@zIT!ynZInhfT-#TrT?Ka!c4$ZWMTOp
z6Q{Tfe?Bi6SPzOfa<TA(FSUA>BerKIRA@yX+rmGR8S^`YtO0E75Vc3&uHZJz<Dit~
z@yO%M)Zs_dZsuVY{@T}qHjUPlR``alec+k^4pyx-Lpf{TC6xSDU049So$Y7Yg8j|m
zBWgE;lHOzn8fDox={SO)2$+fk?5~k=uh0ygg5n^{1>KD`8v(e^HZyr$vH0F1DPS9M
zup77*shW*Zh{^hWo@z@;rtM}C0HSL1O?D+v=mS_oo!r01AXtQ0)8V*t9*~~N>Akvy
zVtkg_n!&eg*t?{Tp)11{mrpJ0#Ks3}%x|S2exb5{g4zZLuoO?^6UY^^C!ZnnDUjqA
z(3&-F6jN)Qt(P!j#{`z3gUPe>B@0Cr$L?I__%$e4Z7O4U)<t;eA<26;tORilkb4i!
zF~%Mc`9&8vVog~A9eG+{ZT@gY?-+?Au>JvQzseVRe_xG1U;|uaO+5t<xRLTU)2&|4
zQOSAnQz)BcV(c`K*p+H@1XFMSc95u)&OmRVzeLBHECP5d%5o3&Q=qCx?t+=bhCj}<
zz;q+?j172=J;KaIDzL@k=L@9>HJOmN-N-=*cKef0@aHcnUMm|PU2o`4XX+hy%{3t3
zlzln7Py<x>xc*L~vl(vdl++^f`TF0P#nEQfa6Jk_jwham%6vQ#VaNDk>k(_{*<V}i
zmSHyPrpp=bEnAlEwM5~6ZW86x-Z?Z^k?_Tr78D7NN*&R#8CyT=8Sz#b!zwO3b{sOo
z50Crk;-H&VvTT6D;L?lBc@v?b@RIC6gSJ~s0k$Ikp4;zG*5L|+nB-46_f@#1!i6pS
z7@K?37Q(tV!Z0y~_g3Ij<W$r2j8hdG+=9kpIBw-s2M3Xt`|vi#%$RTklwYQdW!4AV
z$Pr%5Q`*_la2?rNJb)^MHSojvZTPX2Qbhv5KKiKb4DCHWX#z*wmmkLTJ%hL-IvA0P
zn(lAtHrt6V5K^l-moj#A`8ySrIb^PzIaD#9R>`L3G<0S5#;GclWELkMqIRBcp~}#6
zs(*T1%W=gqL<dn*hLzA~7I^5{w2nyT=x+6y;D-wP7tWaoL5Vs&sBJzZ8O&V3!!-)o
z5F@^8{nM15iZSm<uVa$AvA4RV&ZddD>PR|B@1Jh(w)?CKX{|br@eMlzCLK6``Z}x^
z@E|J75Wucse^@D?zqa#_s9V7XKh3Dq#u%{oAO0${V0_!XtMrr5z*qMy86FLRBp?oq
zq^TeNhrur9uTp`D!e-*wR~gze?!VNLE5QnY5)y0XNMQ{pfu(h;WmZ8d|Gm;=F=AxW
zo5oxzly{>4?tNe4hX%q8t6+<<{RS!lEED`QV}=N2y1a#^;`!tT7+2A=)vuktZuu>N
z9xh>G%Eyk{owBP{gu}ptXxemmSs+Y|yHR>AY`F6S9Y$+$0i`ulBJsBT;eU-z0kt~e
zJCI#&Rf79!?lHdKO+@J^BB#}9^9-sNlmG-t_Sa>ILq=(6tUxp~%L&gcmhi*l?&|Dq
zUV=Eb8nesz8>64RCKK=WvZ6`l$Z_!TV{^TWVxC)PK})k#))X^tgjq3gZVat8x^?2R
zw%7+kU}iPA?~d`e0*Ey6DO8~RJj=A^Ec<PEc6#1}-vIkR>Y#WZm{jU68jOx$jij^h
zF>vDx28@#H&3xxOM9wF+wexYG^f9xzV3a|Xlz~|pN$&HdHT0`KcgGYB^Jjb@R#G;%
z<h|V(y+3q)1p_B{S(MdM7u6AO?D|KeeWWD;M+o}Flgm_1h{yi9usi(1Q;!Cu<yL6;
zln$}7i8|HOI6^piHv2W{LJ@Kql#Ui<Gjk&^ou2sQuVy3pzurmXm-euR-W+?&G(z%1
z^H{GW@0&ktr}K+NHe@Ew0j~78ipd(Ec=T8r<>yi;UKoTP+{4wN@=l<Ap<d6EVcm}U
z=s~~*GqPb5Hh}^f|2k~&9#y3JIrGS6i=k6`j+$ufoE80u#8uqTW(v_=Xp(F^B3(-$
z$ftmnBiZ}dQh!(7k*PEoQ>=$huXZmC>se-)3m6*WfUoPgPty01*@{7m3Ni`+H;G3x
z6UA42Q<{+0Elo^7fV1O;=I1~cb7E>TH#kx%V(D(pLT<SQ@~}wATJR;fcZt<nyMcka
zh~MLQx$s(#2(Tk{KJ^x@c4Q3N;W?6Cod^2amE(`BO@Qvd_AH%i_(;>0fTMeHuhezg
z<kd)^zu%x_35ADKF7(}`;nGt$)OZ159QXp^uM)rz*hHs!YKbp8iu8U^42?W#hP+2s
z(Cxh}AQS$kr~M`S({&$(azy<nxG;AUUsT=SRK#$Hdt@NQ+Cm4l>PJHIiO%*3Q24US
zt*bF_B03G}jznD71?EUrIn7U!4D#K4k!v0aJ;u)~O)A^TWZHt{j7g^Tk#_+#(33Q$
zY1g88xQ=jChV4Cm^UyjfGe__IU!(r-IyykNKKXsiG|u$z!CZRhWTR}$V&sl?eot>D
zF4?+}Uriig?m=l@j@AcSF5947lj9r12zj8kV}~G?17u!zj}5}I<`9ybRb9Rjc4G&!
za>$S})h@K76DITUu<$RO4{C~0pNS%nAVnDfytrC^Hn*a)chGbRkX~pL+`0vV$6M)A
zcUK{}zjH-F-Wbpxf5lt3H*x~s16lN-p$r?C>xpGW(cKnvfY-Hicw5_c?>gs*j8kds
zMcnRw6b1MlRsdKkTAgE|YQkIhny6860g*m1?IIC7B18sGWKJeHdh;KjxL~f@uD`=Q
zg+7X6-Y7?G&B^cFd6^nf%KUX1g04E_K9(Sn-+~*E(kuJA_^bNf(u_otWtkf14m5%d
zye>})9^WEKMwYB2Ad9E31wcx-h@y)yUl@vMG%!KtssMPNS%a*{oP_RxE@YwER^r&x
z1aH1AkJ64J4mT`WBW}M+>qZfAnx_ymb=SHwdJ@Pdpan`IZ3_kuePky0N;qwFcw_;&
zS#V)G6nQzI8q^F@Pxd^Q-FPNKv%QxZctJx8hsv6W;Sv9!V=O^+l8OL!6T#1E$4=nc
zPM;<YaW9hCY)pMB!~k+YcT**WOhIIy+G09ja`Vhet~{It<`lhA#1cNrDwaVlwyXuh
z0Kbwz0br7nnf*zNYhd0y{DO#LywotY>p43CUm^=r<}SoWudmNyKH;E!_d00M-v-gd
zb*hFg)-&=ah|E^p5eF1Rz&TobU$=x^zJ{e}970}$q1DLNuT!lkhC?x{50CNWU48p|
zaj2l_^1Fwg_#6p^qj_$dwUwL|NAAgN{XzLIWaYIlw;_}F;)kqR6OM|*So&>tyu@dm
zmO?dT`Xk!ygBfVgQ2O2s+b7^t<&e2fB!{^y-18_MeQVv3yL{zixf6=<5NO;MxfdC~
z+x0S5%yXXG!Xo9W-3*)F&%=AZ&_rb!h)5yIP(c#{ON@vaftd}<_-VA)nG{$g+-9MF
zrh}6Rln$duNB`fC47=G3P<ppz4E;7u9|=_wd;#I7le_8j%iR@d8&hq4(u#^vrw>MF
zc=WP+wQ%<*yUV7306C{rD=gvzKXKGWxfmDG%+*~11}lh)nZf3b{z(K>C#FF%x=5R1
zl+HWOD7uS~A7V!8mk9x8GJ%=9J4=y(iR(OhU*hSGC+6j#S9fHJPaz|Cm_AUc3;U9p
zb&lQ#e_BrgQ(fM5UEG__i`(+5$MIdY1bA-4<>$wM78F3;1z8PX4wM2<UD!i=Jy5h1
zur{$jBKUmR8Uz;ll|VZk8eV9aARx_4H8Ip>R<+&t{&V0emn4=|l%3;r1aLjQ<EPA-
zg1{FEjy>{XlomHMlgCe+^#%Sbt~PN$=`RqSq6(AX!A%7LBG7z$*@HQRn<xMPR!u>h
z5_m(&l)!@@{??^X0kY%AXOXK^C*xAg+5JLY@t>Y%+w3!St1F~tK5c?oH?2!>6~<e&
z(tK>Va19jBe{z<9k&JKYVhOW#lJxP8Z{W|tBC)fqm@t@!yZCP&aJeOtOvmko<o3Nu
zFA7S`G>=J!#=Iy7njran4{v#CUa5jD`+9BMij~KD)(kKWT%xPjmhtxa4%4V>-yQIj
zjaiZB2quJeb|iWd)HOXo%M^|du&QVTGr~@ek_=uHw=%T1+fSkpNICWUB3Iz-DZlW_
z=#o>CJ@Z`q<&r*2#R+&lM>~D#_1X$#4*fDbMadevR%~caRn@CW*U_x4DY<h(qz}5g
z4?p!gj(K5{(fYa7#S0mhihDDsh;B?AZ7L@XR0txtPFaB93#L#=`d^?%_4^PjjD?%5
z@5GgxO|F)Gw3A6zFJdYe4uGbW9*Kn!1;Us7HBstAE(YlE3W{<33C9gU6%sl%EpGo9
zNis6MR&%(o97`%n0-ZV118+NNr}!DB(_v5Uv&UR+U-dH4hY3kGBEFhV1)BQIG+;l!
zToV-zN~1J@Dek?KIi%Fl0GC&gUpZ5ZAPOTkh;Z$WW8W6Zmbfx{_f9}%mci9{&<JY#
z!32761%*l=Rr_*O1~EINOG2V`4P0r;qQmnwf$Y4rrHp9_;!Z5{j=fY$N8PMFe2ol_
zU%^H!?3I^XqcBAny@eReK!%4MjItpyzQ~IK8g~Cv_ekWI$-iXwvhoWu7PBxPe@JWS
zM~R21AwmdH+$Z?i4V79iFU#cXe;U-a()eDyww(cO+MOuy)L_<XpVtGZIiS$D5%Y`;
z2Dw;*%vHW;#pd(~*thP;3?!4klr7E{L!cZs?la3L^!>y{)lL6wHVsIAQE`v`7-Q!(
zGP;^(W$-OAFpK;s9hd?J&d2UyN8vEMQ(e|G60et=n5yZ~0t_Yt5R{}6zRDZ^0h3=f
zmdL7_uK6^0?_Nz|MvKbesHvK{39pLLvjM3?9U^StyMwymp*F|feTCm8gfVnCy34|Q
z%A^A{Ll5nB>};nl{@qN}zXv?|y#G<M898If*FQb3tu<7(%_<$Idmi2L7z3D^zMRey
z9V5NDr5*k`Y!tUFyNTJ|_ugqaWX=`!2wqo6;ha!w?x9ZTk_UoB_;nz*&}f=0Vm1Ws
z94Gm+M_SelrtYCJg$5l$y}zU`BeYhE!UYZMA9^tZpG58GeS@36s@+EXa2!Z{N~4#9
zg@li!Jg)!ZQ%Cf4x^>aNi6w5pOs-E@*Nq)(>T#-Hcw^SOZ=KEZ$`*eMJ}mi&%B0P)
zB(hf5-P?;*&RA?CXTkhU7a=y7URP&eaa2@gQq*vK%sFz5R0{SG+YUKv-Ho}s)&;*-
z8H-a7YkUHH)I4&SwV_f^4qq_DUd9k)(Y)1hKVk~UgCkYQx$<6*&rLfeDHRXDN)fmy
z*3j(*eg0ID*g$4>DWVY6P037G;0^*ZA)y{y9+)rQaN)LbGGdqBlG|m3*_xy|+XAAF
zl9e%tusOkrwbQ?|B=F&^FSd_PhTF8|Rpb8o<Gg%ci9Z<UW*|$n%PL9XYzU`cIkh>4
zO<bt+nwhaxy2;F0!&;dM2BA`1lNIWV-rA!`5W9J5Q4RoU45Cy9bA2iwgFC^t6W!;#
zWMTxuup(h5_+zQPGBc{zmW|#WmM9yUCyt#i596drk?h_BX$4}P)(X9~1}YhR^IEs2
z(Ph{?=tUk%ZZws0+Hre()I%(qZ^6T-1h=k!<z_p0H$Akm-(3!iHNn!uKJKo}!09jg
zPYs-L1;8ngp~};M(P8+oSDYXu0}nHLjS4Zm{}1VcprUBY;%eB49`y#L^Qa4PuOdoX
zK4kWCxfcEj8F&S5i2QVAwWVs_N#782-r0R7b8S2E3v~3o==Byx_@>VASb@rz-HZdD
zi)yz&P$oFoYwm<bFL$J0gdH4t&ms2vl1_6wb1VBS2_%*);3AUbR#mAOrS@M<MN={~
z6<|FmCAj04#bd@q?55O0-yCxk6J+%Q6Opm*;GSq@I0?J*%0v*9Vo#)}8^A8lfABSi
z@jFRp$&ns4`yN2xCht7+4S?9^P6%Q>qgaBoRJAf<C1a=X8wK}k7P8F^CiIP0LF{MX
z7kgVj-?wHJN)mql3+P1#hH#)DzFJRPrCfFu8PB-q))l=C{VOc1#cg~A?bj2YkV1`g
zNj9!CJMO0A1<otFy3Igb-ji?zy{l1^-pd$3tkaZVXh8C;Z}gcd&9~k}dX5iJZA+&{
zZ9Lkj^+?aQw4W@{bkEOS@HcN}J<^Lkt;q1!|0-dcIJ@=#{W3W37qs~Rt{k`h-pc!=
zi)0ELFU+y}JfgcC^ui$V>#Xyt!O-lNX0g*r0tN&I>RzY(kwTGbZf)$_c*L4BE)r`l
zY(KE)gk2^<2AvcQp(|IP9k3M%C3jl~<GML;iLJQ+=m+d3`*G*exPG4ZlNSVEtY9yk
zxxyZUaxU3w{1sxvT&)q)lXtMcM)s~Tf76YU<jl5Tptb3JiXDLKqYAD+FOl}pSZv_l
zA-#4VYNx8Wup<B5ZO>+?Xl|Lu9h34=bkG9}e!Bq@i~c9zZ5C8X2}cSG+97$)L!wX+
zv+k}6!S8Q;k%bkZRR3M&kF}e@r5fb=?#t)Dphd1|#2<TdXYH!bGycBfP@o3H-#GDr
za9=OIER96A|7rg4<~?y9IbP@{aac!zzdfOD`O4G;!hQN3i-+~}U3Rco&ywhPa2on^
zZv!0$0*Dykif-yEc|^@_GZ=_SbeW9xQ))wGyx*huWcmU3L%zjHl$*u7!iG=y)7wdK
zxtuWb`Q=Aud^)6uR=Hq9+;|}bA&YY$Jt(0+67wNVr$i<Bf^SHN(d}EBZ%rrql7o?~
zq@vxMaD5v!hg-9YiHy@yJkK$Vcpcn$Kf{Du8?KLcH?((Pz7fkvQ$2CBQ5Uyy6QxT7
z84z_vH8aO%wT$F^QShdG%NLG+Moy^wfzP*cyH9PJibkHx0E<Ml5w<?GLXn&9WWVh5
z{@QF<g?^z5K=&BQi{UW<00RISp@47t60re>+iIln5=eZHjlp+$5&vS4F!IWv8fjn@
zvWJ+^l)YzC9#9H!KX|N4&!7MR;-z&LNeoN|MsRg&>z<&*zpnjYSFW*gP4xaCj@9PF
z+<>!O5jiMFF+e+&{r~_&FDO<^FO(tWN}f}K^ct{f1e0P46qme1zyJY(dfz$l1GzHo
z`>TM4s!Rx{{!@o~z3-F@$nSsy!(QN187O`r5aZ}C#|`W)n6i|c8DpK<{i3Yv2jokT
z>QsU|nbA%kl!~yJjD+dI$*~Jb?BHC@-F2WyqrUYDNPuxxS^RU;k+l*pW17R1TI$F?
z<WPwDcY!4PDRLG9%xzH(RFr>@iddM5-2V<jTor+-vZnrNq#93WuXN9rnVB-}z@U$d
za@$!JJlv-f3j^C99t{{doq>AA8nyd*I-fVTVlQsTzY)688r8q6R@ft+Rw)j>y1LXj
z`bx_cz5z!PV03BzNxb~HG*;Shfv>Jj@0fjw@YU5RWp|P@U-`7MbSXwW*=lyI;HFn>
z+)K!kM41(4t>n{Q<anxEEi`j1lc^%((Dw!>$v(va-@ZAvNCH}Y_Tih>h}sJE!xg`!
z5?JkJ5OMs3TONLR(hd^U&==g_6Tprg5AFt)Cq$)C13PV(myp4<RdKKjM^V2uB028S
zW7x?UO{nGAl@A5t8clectkF1Mp9%0qc4OiBn?lFfead3Im=TKqupkdAlN%PhA~+~6
z&7ixt-g)O(?ZFdGpx!vb^#Z*o{g3Q#1T`-fS(UC!s!L5*@N14odd1+WS!Hz}L%U)3
z1rH%a3?$C{D2hFf{x<W3ucsFZQ@L2$*S@d(b^i=B!{%e!df~F&Bj|ZL_;ckYRwJ-O
z$_4%tb|-ZP(fYf76zu)~-FP%M)@^<N|H^nQU^y-rO>0HNW*+iE!mawcoJESvLmbdC
z(|nvKJLnz9iqbCZ_|&y5kM;s~oOxS*&(~*g94`cs!)XB&uG3BT5~tecgfCpG09%=~
z`Bj47Jpr1BAKyzoVAcRbX!JvINSzFp<V>#JPSpY|#XF@24&6BayEp+Hzbn-$P6S}M
zLFHIAh_V{V^-uTSG(8Ar1QW2o$2i%Bn4g|A(}!3|d$#6=9)vLaoRQ#n#Sj*T<Wc<5
zl=C7HPQ<GPGW8#E;tKMfXkfO(rzk9EZ;Sbap$o;sYOAT?{-d2Ij|YbX&Umu58rw^?
zG~%?_ky2mcsDI8{|JIY12Gu61)QcGM#yg;!0*~sQK-a<eg+uxY1xJfy)|`z_@SIub
zI1|+XEkM%0;dN`y`s%1VC?XF?(mHHodEhq$hi*>}bR$6_)s!)cad4-?kV~q`7-$i;
zEYW})_<dvC*QitA*+BdtRQ$S@)YCb@^iIa?DLvvT#6dAsFpRHxr~*QYJ?A;S&cf3-
zEw%F{-?Mm*E%+^6tZ0?`-Ph$IQto2^*y|Ah@)X!9dc+7sz2Z{rmw<ZN;TUg~d3qm^
zFQneD($m4GPa351NyeK?$v-}_dV5u^*7B~X*LgjK!(~B$04My_P!>db^YtZR_C#F|
zb^^hpU5@!@&b~r<aEtNbdsCIgfhEM;j_XGy8(92+(gIf`K+5RSlPD9;z_SjA)EOpT
ziH;jVTs8=n0|tykG7Rmut!#tc_UUqG1x=3+7!upAUGK`w65+&Ml}x8ic}8~8ki(N!
zlsh~TWNk<1X!N9M6KQFT?e-p_-bQ#T&)tt+jnr*T7*4)}+8C-N|I})*c>fI%!-?+w
zv9=XiXzs9tPDe(_?H*u3=jfS@pI5?-(<+VCoKzNQ3A(c4(~re~*P@Pg>ZUbJL3zsm
z)XW$d@g*v=i(Vh_ors0Cy-^;6cwaT9LKhv!th(jDhV6<oYoI47UBRqP4^M@wA+LES
zL|995l^VAG!YjN2U-nF!H!2w2T)tU~<d{Z^xggA&<3W4Ziww*$&j#6>+o?bum2<(k
zo*Z;acc>WL2X}6YND*tQW6hhweClbq;+}DlCxJq<R%9n%Xt1aYp2CV8m!I8uu(c`y
z(E&b#M=#)~Y<jBdu}xFKnl_V1DGF6|wVP+jD$cGhr>*qkGC&27@w4PBXNNkt1AdXk
z<fMcbg+uAYM3B>e9km|QNo2by3JF#lqLgti^^JOR6jL3gH>O3tM19Co?wQd+0JhFp
zkiie-P14xh2&=T+V0tuqQ2#vWd|fm}=vp^pg`iF<d*>B*#?TOeTe0Bn%5(?Xe&mJy
zG#o2o8abz~a=(&!0(x;RS@r+6o!KS8fA#3L4=k_Lbo~f`11Teyp$Sh*I0N6_AH(<s
zyd-o2*6*?Gq4*9wxyMPfHP7xB+gj#-nPG1YrZRU5(mHdDxcOhpwC#YhnIzXt>~*RR
zg3Vw#QW)-@Og_apoo7uE#M*intPFAhSLFRSlpKkdcN)QfW#v=I3nUn&t*;^jm((Po
zm^+Kq+QNOVhLRWjhi^8vn@m}21BAwKpQF8_@D95kD+>IKBFEQ`Qx8W%*tGS|oZx~)
zQM<pIb8GMH@l2CfT}B~m$u$!=Kpfv%yRc%)Q^>=yuzaKwEp^$LRW^&35!h}RG!0>g
za1i2Z1<4@<BP(kFhd}@<wkrjNRV!&~3|>}DqYL9kjoot5KdnhwVx&Gt&x;6Mb<__2
zfUkXy?{$2kdb9y#g*VO|Xn{`tiw$10wpL6c#|)26!C5vtsU>kDQSPx0#V_?gJ9oA?
z$E=8-kOqJrB%~-~?)a#R33&mm53tIDx15hQ=C=Z^0#3#AAst)mKAzSKBGiOfS+)<^
zy_uDbUE_F?%j?k{Y53=o%9$d<ENOxW_#LpLmDgM(7FOj8?;qsd-vH?lBPwVU->h8C
z<Y-nQm}MA-HkeM-&*qB7Kx$`E1Me3-6Ifoe8)iTHx4yC{%ta>*>pa%{<tbO?ou@3~
zS05+Iv$JBE<liC*_BjbB1vhx0S`&O0g{l{Df$RuDd+bQ97r6s;PnJCxj8AOe9JW2t
znSEG<{ncZ4hY<+dPTSGcN?zfbAL~w#2xj<NG3rrVNQ6(4F7|z7js+f*5s0)(D*P2L
zSp!#@mCnA!C#GY{1^&1Kz?qlZ&kG~qu{ryM!}-`wVq*Xx2b3Pah3=~ab9Z`-MLZqm
z`-WBFPqCcU)NZDywaO?QVk599kPmzy3o+ZW2n;?R4i%OogQc+dSdm*UhGdyzK{-(x
z`@c|`y`}`3(7h~Rw190^#B|%<CFbfG7?7C|Gwr2i8P7wXQtlW;5&q?Yjl07yob|#A
zWn|N@Q4(4g52?2h=pEP8xfW8$-2413$eQd#)W?K<eF*$`!ePIj8z#v9nJTv4T_bF4
zD~^~4G3&X$f*Utp;V51rBMRDJ#g2Zrr|qr4YPLkn3pMT-DmC=(7psI?2>W|jNc|9M
z4a8ZETO5&|bs|_uFeh^#v$P&w!5CPe6?=yf$+IkZtH@{nOwPyG4GhHh3R0V@wCb;^
zX%S@FbZG#zkLP_>X5+~QlggGg^6ZDj#xNr?UDP|$*+uw`<E^cjH&H7~0F2Ag>_5%y
zRzKfNi$jW|6<k%DL90zq23tOf7Bivb_vZVVP|t*n`ey#9#aH*@%~P7vWtthFGnqgJ
z#<j1kVD4z_OuWS`xb6#@%f!zvmdOiZ6kPOzz*NvR?Q`U_qA%FK^L?EO{f-)LW$g+!
ztA*W*_tTn_nKtPTanH{jDxF~z>j;iM6U?%g&p>fsdZ|^R!PNsTT#?9|6ZH_bWWgHG
zxTo~K><{Tj9aKl~%4wjm+)8;F)TEg{PgpOIzd>ZjL7x!lP)JAXl1DQ3jNlAxRR9KM
z{VO5q1S5D>i&%tPpI6}K@(U6kz7^7B>SmlhO(^BUw7nronsCU9;T;aj%}MkiIU_2L
zmp>H|gAB{o5A6JTpZ*dOiybVvwZ1K<G*G`0r4hVR%3x0ZpS$08qbya1Z7&wZVyla!
zbj%k=PE^{Pbg0w%1i+C>Nxm`4dTYzJkv}e}OrBl2XQHl<Y%c_*9v1RZ8ZDVRvC@Pz
zN}P6EfD^BFO|YEG4ua!Y^LEK>5bP2QK4Apf+jKlN>L0gJFc)m2KeH>5B){YSmX}ij
zNAZa~PQTu0W%FTs>U274&-~{7^E4e{e;#PVZ$UIa_zHhzn0Sh~-@|{$`p3FpLu4Gk
zAn=Jz%HA&szIGxR`djsvbwMxkoknVPI4^{4olnl|kpoY08rX7r=KzZxj{uV*lwgI?
zyDIMKiaE=aGk|~u_!zO5t-fMj8`q%JT91yYrI;vdu<VO*e8L_8jlbPJ#Tg5StpD3}
zvekxhe#IIGRY5@TV+K%%aDezb5dQG(lm(+@sMv>O`6b^BwmFzQYtOo5x%@ZQp50nd
zat%CU_x6W8xw%qv(NjYXUnNwb@>(-@@YGdAq~acZHiNqV0SF?Q&kXuJaI0ClnWdYq
z>F6t=l%z{Pv33ZU1mZU;-PbR4(qBsky*~F3*{&|KFMBOC5EUsQx<yHvlWoK2Mi)%q
zYz|BUVY&B|cE7m)scUT}F$s}zt&A6K=4dC3j2LEbhGb6bqR|cUqp>z#6iU;w7)U~q
z@TIb6M#+hp#_U~FpWa|}Zme>@S?j2+0~o@+oI}q45h5)$P_}7Oi}xi%M&Rnep~}f9
z{ZeT&guVsV;7C8zh<15)1{ZXnN>B~yJ~wyGeN{CDyJJW{RMq~A0h}6`^xiHgpF_7S
zN*8!)Bq(@uq^~JAMtPe>?Kz8PEF4Rj^4N45@@l!l7vaEFke!!#a2}0)!5LW$#5xD9
z1r4V&rWzrV++<%y&WSE8aB1kQY41S&43jDOzeEoCOc5aSSc&MHyyMf^h;;=gi6>*W
zA&<9PV4Zg!sA8~j(^>&@8MQ>I{2{9kc?ID0{BekpXsAHW$&<3AP|W4LQPJ8ml){HV
zwOJwmUQvlw#pplCM8l4uZ(t*gtOj&Dl=j{90p&F4zMbhVqN_(v*>%znPVjy1WB9Ho
zGzh42U41nP);RFU(QAcS@X~KAeS5P|FiGpp(_alOI7)40%$406(@Lup&LpemG4DP#
z!@12vm8dB}LT&N=Iv{ykn{@H-4vT?$WSwul+AG6GothROCoPp_SeSIp8f0|+7pTEC
z)<^H;VVj<|-ZX+;BwGO@1A>Mx3^E^mvO47W-IW>^vV>Op@{W<-l<Uh$%>kKif#&xH
zOtnunS#eSP|BBiCoN!(hyf!kR?Y<vzcf$-@zFbIk&`wPlnZFRSl#Rl*uFNC{*~qEc
zcYlmvQh6kL$y!LTKImZL!l)oNpm$|Y$F7*J2Y<;OFod(;Vs(jx)SZH>HygbmZVzTI
zx4<NS2RZd19-6_B-J1r+H?2h!rZ0A_v}<B|;Au<QF7X(Q#4CfkrU|?|1;VP+#UQt5
zN+N>osY<*C7tjZ$4Ema^O-9A$x{U6()G2Ti35;yeNRj#gswxa(%X*1C>TZ3QI{L)R
zzh?{ps>Fd*w%(a-KSeVv06^OI0*%T>RwgZcY*5SvVfz<}(m0+V6PW`IAdUSc<`!-^
z<s>B&l2<H_QmC%NqaG7L+ho#ZX{C4x@b)QuaHr)P&WzdD8%L~|>SnVIHP#6eWZSEW
zf>;)~A>;Yo3qXppZs)06(%2(xvA7IE8Z(5jZXISk`b7kL<tU3AG*LfODvKG54n|$z
zSldZ)Rk{gEf(_@mKS1ltSVWXJR--sEM>^h$yeQv^-UAHZ2-<AJA*2-eADFG{>0%J>
z^t#99@kN*q($f->1pA5Qzf96Bg-XCfW+Wid>x-xs386pS^fgk1czxs(fu(UI*)11u
z`@G`%yT#%Tw?0s`Iq-P63%=6bnh@TLove#Pc@#xlw`UjLf-`MT9}c8J3CREsgyDFO
z3f4lZL4}Q>f7BNVfae(Jh}>){*c#89{fQ+1h@iB<gkGJh4>>GrUfD~UnxNiqjJ|j0
z|KzSBe?88Uzve}ah>u4IM=zaT4toha)`dk!5~?UddhTj)*+0!>no`z9lI%|qJ9rxE
zXM1HK7+zvmypcj*Qsh^xf`$**nsMD*E4q6MjIzLU%WLFy9u>~-Zc=u<%eFY9@1z|=
zvx(gI(mTx=CG`c#xeef|t9t~8><EDBD}A*(ET$z!lb}IfccImcmO(WlJ~n^@M%KD-
z8ELM=W+n#aAD!Fn7N>=onWnizihq$QUc@U7O1un6?|J|7768a%xokV!42L~~0O>Nr
z8<G%k1QciG&DvhQel&Giby8D3)r?MZdVS#KBFCmB3i|iY?TVaZe~6hWzUXm5-`x%2
zNl1>!>k;|I3pDXCIB5gXfD$|YBKHwUu01Iina;)i8>*+d3}c1m{==@{d8gD(d=Qkt
zGR3(B>Bh9zKk(<15PfU#V93`=8L7Cr$$3r+ec;BtMPWig*_Tp&Wo0=OE6o|``r;u4
z$WyyS|1#XNhcz_maGeCPx-BDAsNCh<rt7?8DnZtVTHaVAAdLjn$GXgde|`D|2+mWL
z8mrzC{U@ma?p(lia#$|x4OrT9t6KHZj9`E{GQ-0P7Lsw%Ee-PY)hsj3$_{ble<5w1
zv1Q>9pb*q%>%HYMZG->r7otv2!ZzCEYXSnAYR=d&jaET<2X3yA2}<A0j70+m(sz$-
zklI=8lioC+r>8PMNI1tlcq`V0SVAs2?x3#0ojqTxv_Mhi%UYy1d}Cv#*^Nc5`#p&g
zfwXL^FcDJ3Z4I;?xfTgy<GY%$?Ml~MCqpOOC%>{qIo2q+x8V#R<HoXd*&6uXzBXp}
ztWRzw+Nh9Fj>?~v8px${!WfgT+vv-7dL%7lN{h<5#$_c($K|!37^GAc06J{rU=g(-
z&9>YZx#k!fd61u9KpA0;23V#lzCEUZCR~@YSL9>2I8!lcw<FP6-OJ|Eylv>pSHeQH
zX={wmLxK`ria@{#{#I{)>xibn(W{-uIjb>)19Y$ckw2g^@Ha!&Y)5158~4G4I7$FC
zfK6(SKVN-unE5m?Ar}-e9~ZS<0Jn301T7svc}T${Hq|s76wnJQoIF)#`3Bb{J2y2a
zYtU0<zUL<nhM~Mr<REXg^Oj)yU?dC)SAM;I9V<;O-qEeZ8q3eq;&8*A7?BjyuN#Qg
zW#ap+#2xUn_SsD8g9V>+-BUlUvL-dZ4$auW<>4(Y(kP)mtl`Bh6)d8;P=47TWlITn
z-oPxKC1>jU0S?)-0ysh`Kh#-Qh#tHQ_%*w4#fjxCl9vE+6x?ao%_TMfk_y*P-5!ko
zf;p{r1avm98yrZ$pO%&*MJ9M#co1=F23~PQ$QT<BHe|YXv}ENVimbo54@S^$go@Nk
zC9EA&6=)K;0W-rPnT1XATu7Y0$P$~x{Pb=AW{#_JN%}9WwqkX2Y8sWk?A)1G?X*2Y
z7Kls9%_a1!VGl0t(k4ofo~VSeF+G6}<R%45#Iie-ElrZXRAZcQBDj_sH_UW=oKDx~
zTfm5H?3Oua{k}lo#W5?c1w7>jW?wClPf3xL-sr%^owu<GhVG6fN*fX5-Qgj`oKA#9
z-7I&SBI`6rO>Di;7&h(l>!awdg}4DqpOmHh^bh38Vc^&yHoemZ^Gnql9IackLmMO6
zUBtTNTRR)rbZ*~*tU?ZG;u>)9*JOFn3G7OVfc*w#XSjqqPx}nlcr>k|<i_eq$kn*#
ztH`XD#x)@{Jtdm*{BmP<@+xX@t^<>86po&vh2a7a;HWZsF*XGPH?h*c<NmAP2e9~D
zGwA2H@a#O^j)IuP!%<s;J%c~My0hG*bo{?PKK^LfD6)_uvifT;^o+iM!7n38nKSKo
zL2&zTF&y}RlTG@ko6#bZ*S`$BvRW?Agx)oTwucE>ut$a8RbCCtklgQRX3B+YeKqQ5
zzm3EMWZFnuY40aAU9|u$)Wg{#E$~$VM-vmed=F&^7D=WSKzd=8(}1*E26X!V;-yp&
zXdirmRt$raUz|!XB;dbf;WqkQ$Kf2o`a<F>IELebOyE}B1;FKwG8p)E_a>r7&xz4L
z#+7Cz=Nc)w;cYX)Cog2m9=*y^O7JF^!ol*7nb-aG3pMowg0sYT`NWJf^pnESv<G1N
zCrCBTorMHdtT^|!49NzUhCUh=aks1aTW3&^QtM7G+O%CUK=27uyR(LRV|5x?9e;3q
zaE&3_^)m;s>`(JIhi`w>gSB4F8w9x=8Dl-EEwA#5ddI4DsJ*H6rd14It!-ET0uyG^
z9g~^(t-qtqzkzHN?Q5qI!Hv9w&kk$schueUg70~{?wG>1XZ!K(8+@UI9HSrgoF1-*
zxq{54KTuT5fG6E#3QpAm8lYD^I(7T-fPjCi{KBj2Yc)<uf>R|USN~b!13)S6$)BAi
z4&huP_bTid18b@=MkSTfL$jVuXTW&vinh3e$cdB|;+MOX(nKDqbv>nz%?xl}S>juf
zJM^=wF)gQqFE19h)TPoHW=PJ27@#s^bo~L|%T4bWKy~yh(*iT`TBS~Unyp4Kl#vt?
z179$`KrKuZwV`nS93RCtu7W<8v%~Yqa{T<^c;_yf{?LNu6&p`c4$o)3;DoqgGN*J+
z8N?HkRXhNYTgXp7i-Xi;ARDG25DCj4Y<wiFf$$<W-UPDU0s4DS_!<QbB5$2~J$*^C
zO#D3?9pqElT)eQZ>TVly%@>38W9X~Luq=pOtK}uDX+S-jt8g^@wP{2Y^)*1c*#uB#
zqnAR8eyUF(85;;DA%){EYmLV$WL5GRe}NGet&BPWo!a2-T=4`re0afJNmB7eJUG4v
zk^)dLj7*1q`SV-=Wp;!Mx7u)*gnL>IHMyG{F5Mn3m4EgsK(hkMw*L6nI!gD=;@M8x
zbQQ3{QKDhiDb^{5h{V-&TxKOv7!-0~{5SnSd}|wnico}M#jra)_g(x+4)`6Nr<}HI
z@!MK$?0pTezkd*js?R^n5t5OoOk#6e><QZ59t5u`W$Q;gJzIuY2kBD>Gu|!g!_rhN
zZ}F$wQL!ZZdZV2T5J?u3=S?2Vq~nJ#_EmY6uKKe2?UPL~#C2j*qU=i8-0EDIbOzkk
z()_wU`+S%tz0uz28M#i9b)N}9dR%bBdQammH58Mwz0q891M;yR+nuqGcSvorK7YI~
zTmzY`>0P0!iK8pR&COU*2@V{T7+zNR^!%IK6Z=y@1TU|PgN^_g3fh^(z^_{Jl*NQh
zrw<`7_&o`ziQhgYITGSP!3_IBan4PzA<w(ly1*HOi}}l3+kTD=FUEaz>gl9NQ58@?
z)4@OLM00%XSqE~H;$wWdbp=$-r?)Y3yA#HlVX#8XTVty<xl$=8mC)qZPtD@j=U1Js
za4!XL=es_c?Z5}Cm$<!TD<HF%q1%TR9S>|Ln*Fu1wGalau-R7br}r4mjj0A&ER|IO
z-5m=du)C8UXW=-66uickbM3eAumzP+|0FffuqAG+bc~>H-)5tz*tR?62Qb%hi(jsY
zPR{Z33Axy5$KWIAN{qaJ>fAuAw?9bQQP&<ou?$nz^}*mM!=T05taECzYPP%u(#WK@
zy%t5Pc)jtQMS7D_9)IZbQdq5W*emZXD4%={N(sJKN@T+bKz04u(bk<Sdq_A>#so<J
zlI_tX;&lAQXftKi>|NO39Z(@j=nZZff_s9C)*oRKSmeuFcv(e!jqmUDQ+T2-TC10(
zJovvbkKV?9dD-sgzKwCFv^Uhd8TIRrdzF-N1O+ph7cSy0@dv6%!Tv-3hdwWAe6m?u
zt`%bAC}xg_AAOuHYAEg6$A3W2;jK54yOI<eOuBy@_|zCAqHH!&6sue~w823~aB!=b
z19_K=@7=UBVTR)x0DaQifJ2rvn*Od}qyH&KCcISt7)IZje6Q|ZOPbc8+6yxW!T9RE
z&P`rPIQ1$X|9O4%p9xkD`5GnkRzXjR$>jodO*Qn=5LU}M>Ut;$O){bvy-VstlNG^4
z7_6u@_$RrNcf3SOW3s8==6AEU&2iK|79TbFKn*gmXnMS#mvh2qa*iQcZzl|llk7g8
zLM9<>CqynmmRK)QdeFb+qOzfHu0?3@2BA>k5z*V9&qi+W{>>C>oMaBPW+p_o2Ecvo
zDMfkCEG|Vxrcoq?dg)w=f%k;09|Sc)W_AS7DVTDh+Pt8ubzN*yG<rOyP~kLz26C)W
zJV5CSJVLm<16SDx=C5H@_plY1r#&pY#s5Xlxa|gcHAe>{n5M<Zw2c+S@q{$;IxqpV
zT{W5jCq%99?ejpc4y{*M_^`Gug0iK|_Dxlef&!}N-93NjiveLuffY+ZZ`G3cn&}IW
zd6oi;{!7Py#qzqF`B%<AbCGh#YCPdz2zy<^4T|AUn``Tj%4D=@%X|9;nEn3V0f$g`
zmtSjszHO><e;sx}4&N6K#R(JaY7)rDp^*;-im@lBm3iU?X>u-i5O<$p6$0HD!EKLc
zsc4mQm)s(Jp~se_%&Qm0hqOUjUKg|`y~>ljR}Zxdj$VMK8}2f+u5=$I?Sk_ro^OeV
zHuT(;E>o~wM%v>((y=xfQPXd|2h1A!diz*u@8k~UTJ36)5NdBzuF@Zp4;RmnRWRT1
zON`rE*GOT}1pxed<@!Z5^?yEA<ZO;KBMJ?nx|q&8Oj1|%yeWF-N+fn)Cd92*dFDjp
z`g3Et)0y_?BEyY45n|y6_ilVb!4toYjgz3kxz`gVMsDx`Z64N9aYIBzgmU$W^~7%h
z-t{Wob?anY!w~rSllbBp28z;H=n(&J=;n;lZc=5X^OaTGm1(WrXI@lus~AxE*PFlu
zP~lJuwX^HjJqF;#gkrp7n9_eHkci*@rkMcwtO%=knhB*zuiRJG^i@7K6A|LDlAeCB
z3CFlQr`%ZPXFCr_>yvNKK*SLDU))5%tpFw$D?$?gRoC3*<ODu-x3d0}uk~p?MTZb!
z#Fjnky9moDff-LzFk>@#Ow4S1#_iKPz*>UCPrQ&TDJF(LIw5~9_?^9?H2ib~C(a@(
z*gnP+ezbA$wE~IA?du1^{&FJI<N3X%tJ=-YG{@KT-L_r9j<X_;``?KS56{P9O}miY
zxoBS)p&2u2`(Q#hK{b&a>~YY-Bb&l&vzzOi>iU&YzCpj}xR00en3N%34Ss=rGWRk#
z$=q>r`xf)sRY!(nY36N9-%6bAp9**d;0(4<4aIZqiJk?_mI=^*(;3N2Sk<UUr7R5-
z)<nazxyKw@PnDNte;u|Ymj@_$hd$&J+n#yxR>7Znt^f*-e)GP~wj}>1!YdHNuQjLX
zd%Q2~$g}QN|6M=I^3(jjgtYAR*F9LVK1FtOmLpJ{*S}Pl5}k<qTy<fhNWecV*gf))
zmV(C6lQ}a+hejb0Zu0>aLvA5_TWp_sT}ukCot94Iof?bWl19EXqb?_qhAZ(7SB1nV
zQ@7{wfB^d&l=Mb&NSkt35<&(Ic4e+COd?yTgl#Ns*$~=K1=u`%wu5AMaT(V@eZ*`$
z4?%2Qd!ck(p-K)Zxn$Cw)ejf*Bg&q-|BXbRCeFOp3YB}qTTg;JmkgR-&Zfh!T;(Zd
zSXx4-9`kcPn?ycfac)m1=tg>r8~5dD&A&J7zbjH2+{A9KBy8EDXB6A12pvtD2(7-K
zyt}$j$?t>j(z%=r*B7@4!QTdw4Q)-_+)a9VPN@WNXiG>uh(I3f@&C#i>SrY*tcDWw
z7PGFaPL8BGbnj1VC!I;gQ)Oq*F*o;~{x)|v{TXGkt4>L3_xGa0CVczwz>CX~hYtun
z6HhO4bNf{|$!l$1SrC)40AtZ&xgVn&NNFxh3tMLmvzwY}7Q38S@n`lSHwaKXxfuFZ
zjO5S|R-}-grMVWYuK^M&H^gY)o_RLIF;B&w5e&YN4X@ZINNNsa6i$w9Yw2jEKzV`r
zjH7NcdCD;lWiuv!j&6Yn4`;ET2GkAip+2K}zH^Q#>yazjuEa_z>893haqGKcKO?vN
zKJ1Jp!T#OWW7VFW?h{%<`b&O8YttYKHv<%>#w86TVdKCDrH2nYm%~F}%{EJ_7Esd(
zNcRXV7L&-~ayk925AB5C4{u4fp}ss_{b)oYZ!vG{@~84#(Rho6#$h&kE8{v{$UEL_
zFr4<L|C2KuY*9{du$PjiSP>O!PD_$f{6f;cfmP_g{@_AA>j=+w@(5%8<*(rU&YiGD
zN<7tfD_AN>OGSm;^73~cx7jMY1SX7imh6yBDV*(OyaCE9+*mE<K-+tgDCD)ySYafU
z^osUHk!blRfh)2KAKnV@6~oP%?57B)X-FS~KSIAEXPbGhc_{3P@RV0Y_@0QtB(>*q
z2PphNA7uZcXK(QRdsWBQZ1-R*uK>)_;i`(u4^^Cd#sYylpd=l#qnWDJ6L+YDDT3gm
z+*Q-OobC+dDHS#EZIlC<@)6=w#2qq3xA0yuCpY)LNmprsAfa<W)KtUN60~-3bf`M1
z`i#X76EHSV*B>krvSWj|ZhFL7ian9D;nGg_dE^Ad2E<V52tI<FBPDPd7k`54_WSC~
zq!nD^Al*1MNu^g^%_K+10aPYI-W&E(QL1;Wgti$RXLl1=@B~t>hcRbZ139WImTw(N
zK0jN_0Azq8j1*+kj^H6HvC#VLy(fxvG7f#@cJho(BG_n@{25#rI%<-iloY=4_SzDz
zRe0--DY=!}_2R|TaWH%Ivv;U`sh%mCIenqSiVh4U1dxvbD@oDxu<a#vS-^oZ%>&NA
zdWTzNd_`ZoRDqb&;#8x$>e?So#sI$~0sGk8{Q<<dT;U&u@9d^>H#l^x5%e(6W5I_c
z=b9q#Q?g{88Ux>q&OKxC#xky74NKX|&5lX36@`{ecYU-I_zeYKB<h(3(I#umv3Em8
zqGOnhvAyK_#&ACn;(~NORLh`8E<gM6bgs5N*%-msIU&6)r@l6G4}<h~z);5klH`0M
z`_if#*}C}f0I$rsCb=IIz1>%@Z&SkHT8|^)h_p<|B3yV2GjED~waxL|F;mV=x|<1S
z>gh(z@Ljz~=Y<)i@Ai!Igw<5vXFE9}t6SO&v7S~8@NovZE5;63F_K7<bN`?YYFjKk
z9^r`rj;_a-n;n#@3t|6$*;^;v7Wg0y(kb%TfDDozQ5z>C_t%(6Nbpzx7>C#MPRYPr
z)3S*ausuT{$GZ`OK0^m_qi!tvrz~WRk7oKJ5?#WMu#Flm$XZpvbrMnGbueq-z$y!h
zWQl$>J4u(7niP$`xTr-|eBN-m>3pST{o>ahDl}e+PvyUzEWktwD>-9WBgj*nFhesU
z4>Q<=Phx?c?(}7pA9_0KUyR%;=6JY6J_;#LgGl-$Ud$Ds<a%Mdj_B7{*R&p_Wu7Fz
zTB)2nGNaBXcM)UD(@`e_$?=gd>sa-N__kY2h)Uw1yK8g@hnXw>EaVDhKG-~#p62%#
zSVIrcqQgtmq^%*ZLo|g15?dr{v1f*g#8@UVMF6W~hrauE^4{Op`l`gcR~X3i_beNl
zXDzjE36z2?oC|ZjZNHf1Pqy$yv}$26<8u2tgd>R?iK6F^P+cm%x-`<OOcwio=1)8}
z<HFn)%Xujm4q|06&x-(m5v0*SK?c7mkc^z?N@JlU4%LMsisvvL_}1E`sD3WQB?rsr
z4TJIGDXy}n*AC*N`#EBprFeV@*Gg)$9rUeKe*T~ug8T!wy{r+7f5Js6n9uxjfa)iw
zHqeQ5)Hd<;Xk(mLr!CFDeNomLObI$cdn4+fTuba@#-gck-(zkCn=%i&htp8!Fl%$W
z%~vEy=s$9^$Usvn&qPW1EKZsmZ1|y3B#0Ip;)2K@%ALbR4Ul9Wy&4%Bd<2}=DHNOc
zH@<)vQ>peGU&zrBqq||<B@G}UpI8;sUB_3(YfOiRd|Joc**`XJGUEeZ;mE1nGbX(F
zR3652&dRIN2fg?2;5M2;sT^qSyXK``Cr%no{TNjC1oS*55C&}k|D~euXjB9kst|=<
z=oS3$-tlm;`)hj(F6tCozR^2yW`b;9@a(O`P${FI049{XwtDiyJ8QWWT2_uTdo*S1
zouv~<*S(?gOUNJTOtS~X&Hv1JYC@C_D|8m)w*h*h8i#bJl`*|Ftx!ryq1r~4NZXJ=
zTR7DA9mcRR_r@eu?QABUE`f06f|CGXo!7sleH-gxR$+NKM*k$}$w)V<dZtTA7-Z^?
z>N8QsfqEG1kQ-w&vBY@z*rAke=h&8Q^L%kMl4E3WW~)p5Q`9LD3cjUervUKiL?$-N
z``3}yJuCS&;kW>j+U0A2-kbx7iR~Np20Eo>!|xPbZwn(%rc7dGX6lkHUH}@3FZZY<
zGsIIWKs0SdzR3Io=E-L>smdlZ7j({Y8)(!GnAROb_EPg_pJ`noDz*&wUJSm$Q~uBY
z=T2t98+evXLfe%nt2p`dpU#@b@`P;^(5&g(iNnPuO;i=>2M+4q!Z2kL-K)m{V~g6y
zoVY$1Lo2^r1ltwFFRy53$X33!(fr8G;e{|d6}HC+`btQFREk{s>kTle{RY2eGp@hx
zb`^TfugsL=V3PCDi64cT1`@sg*OiuLk(D#jK0qq;NQnfdC(|#qhU|)t@`Uk6EPyZ+
zrC5xIRv)*a+r>RSG=bBWJE&YGhm;6prh=gO;?hp_AUf=wVf^@PAKQ<uL_;50{8OPk
z3p^_GOFfz$C!nnosCsTL3(`xNQZ8#>M`ptdDuExJ_Q=136hp?4smOOAksAO=3L)&j
z5Sb|Y{2i%go-xlXd+s7<XbZTiSJL%oBMtA^#WE>mzV6TafmJu(e6ER6t<0%=bWsNF
zy6UqSzOM8DFYDgpu6SnO_*Gz}ycZO#15f})0#BX9R+fplLG$*XFr(*`^L*2vS{92z
zQ>9#pjx4$2r{ufTv`+wl6+^5^o@Cus+T8Z&G9SfuSjx%ry|9iZxY@q23MwN1%`%#x
zAKO3Ez<NKJH3k)l@LY5f{Fw1iD{?-2Zu-=d)wo!%ndCJOC(xT8-x5@ei1VJ3lXjI3
z8$eV&?EO?EhgKaTgYUMI-_W~mm|Z3%i;;mLO`zFJsl~6db+ArF%tHbG<<I4r6FGKl
zwjmdu`jps}SH@^IKXBB%D+fdo{W!<1G}jVlt_Dl3b1Xs#)zC*;y=R-t4~CPo%MMnI
zl!|>Sq`BB#V2z<2D@$v@!};=nOA$r1n`v`}+*z?a@@Y?Gl^X3*<<Gpu#`Q8(qI-^x
zZu~#G``t?~`M3fKY#r&`bZ>^V22~T>E-i?c<5C8+H#S^yh2pmjfELUKcO_S|+~_cW
zvOg-Is@Y>QpKOH)C!9(`|0DlREt)A59u&U_hf(s@F_5rXPA+W6hy_zDYS)hK70fRm
zwSPviT#=Z{jWRP^SR7-{!kU6#2`T1TVGv#;qk(~(oATATL#1K5sq=fPs-M!pR`C0*
zBF8cp#=hSmae35JsAU>ez8Wg7hHSa}RC)(8iI0PGLctiiwm@!~85yL}hp?G|0rQ@a
zS!0CE(v5Xjg#>@bB3Fs(M{+5>bv?89>dRC|x8m5Ty8lfcPdSHbpEIE<=gGfn5dG98
zG=fMZB|fI><uZ@e0lt{Zxq&#z)r%V}+oGva>6Jw0Z<A)s>)A|C{LlEo35f94RFpi&
z9xpUKJU`+G5_h;Fv6mQdgBWvNMIRVB;7hVxP#`-v;zNxt#1W0wON_B%rpV_pQ;{&*
z;dX04H&5=;y5?MSVW}n^ZYoiV^j`)`&mH7PNEIPyZ&~<g?H~sl$M~WJ9Ts}xc0|Mt
zahD&i4X#%;J^0mvQ|9Wp;%I2?lM9zI^0vJOSr|z-*(9O7{lBIwMoTllqQ)wG3aZz;
zvNFt#NSa+ytEO$^F(opN0yT?ga_3E^f~1D10e*O`Q=83i2N2hQuMRTUm1uw05%~fW
z2EkX~P;>&iZNoosy}>V0;DrYSIIe5_3ta+`#QSMr0vr*yu(59xfyT(eh5pNR9ihlG
zYIRHDJ$3X$j1h7ZOx~q##}J=1`Zg%nt;$22Otc9-^4y$7cnqBLe{}sz&j1+)yMrAF
zBA^=fXe=lRLKqAG%2GF$k^pv)OM3)N<Up?^@X2rZIkB}8yn00#+U(g*=&gN_G+48Q
zZ?eGI3ZQp5fC+Pb(U`c6Qf+HV=|ldiZ<rhTDg^3)G_Tgob~VHKti-wxsH`3im4q_j
z9;B7T?~l6OH=nS%_0`wX@D%s!18iV79Qz@(a5UIQa1P5~S%s}2-HT^dnS=gm?dcw^
zkmM22neM?c?j!xLzt0V6>ceWP&;>}Sd!Lu8pSdYhN?wt2huRo9sH`hk={Uw9gRzK{
zDreUE`j{ofGo2*3A8_?2TVz?9#xid9gXy&W?JFo3g(?y2COnm6os-df0HJ*ZDygm~
zc!BEAN?#3GymEYF;82eGR9AC~UHo0wp+7EW!{(GWOfvpcAckae>#Eq}HF936#;O&u
zrTOr(7NzXa?Or5r1Vj@HuolXi#boy5HoBC_NpcxwYLYuy*gVohe8o8|TxTZ0bYq#6
zwst&sdtJVo1p0a#29eO>7w&E%XF@x)@0FgR?ol#}u)g^9a9wEU+<v*yIarNOuKMXa
z<eMdr+?zyQAb<_(AVzA>2;+`cmEN`(Ii3NmzkCgwkBzqyXZ+>nvb{^4!#!u)`@ucS
z-U4Wb(4jl4!Etr10Q}e`Aa#0TN(JE#kIL87^6f~cGj$RYiVC|rO#k>oe|K~K3qo1@
zoU=9>i^tg<O>C1Sw%*XPmPf}h{|@(0)Z5f3(LKmC)896XutHvz@4@jb&>>HZ=}m0l
z-J;c7H6Mc_RsZ+IdaFT(6fS~8sv~d1{mJBk<WUDRV2zf!l8oM=|1aAi!5_Yv-H5y^
za6U{RhG5c{(tPrw3vdy%H>u+w2ooFD+nWyN>0pVoEdliniII=yuwjI_cmp03a7m+r
zy{CsI(xC>sfyT^*Ba)d4Pk2qKVZoM#E(arHT<~&u#)IGg{vGJ|{#XMI0Lq-Qu_-u9
z{wc(0|1q^YAN)+>qb(f@v3$&O)oiw!O&fvGDC9G(7I9cq=P4dY5T^i(y>K-PjhX0X
zESb%3-263#*+!EJ|F1sMDqQKJ*u{<FL6PE$YZ8K_$b{wOC{4QF^gI|aZz!k8+jJ%+
zyy!6W06sT^X2QRNh7ve{sKBXA1g(?dJys|V>DNr2Y=NPB$R^rW=wzw_K0GHU&w^Z$
zy+Moc^t;I2kSI4|U?^(BA2%^RzBT-Zn{D18PK5b42&)%mgLF{&iWAe8va_d8VYP(Q
zU63Nb7Vw=|!t_w0QpQDraN0+#<*3#85&&MfY#?Gt$gA@bCrjyPd=Dczje!oeztCn!
zon(2D50VFrUiVd3`lz${(*PY_5tr{7HhGn?=-`0Xh)}K)w-H@3(NjV1ib6R`SQ|db
z6k1?_Pm}Aa$1^?*VlSArVFEZ7UL>VMqtImd*&l@o4yn9uMLy~c{`tao<ySYcK?4a<
z%0j)9E|*v&Fc22#OYyRbQy-+RuzlPOVoGS>ofuyv4-iOLb;AGu*IlnQAXyiSk)#%9
zEZD#OwC}m$`W7O0nnMups(kQ3zC(2UiP^WoMAlvIYCrcUW~lW3!+5e$4U`Yz&24iM
z(&?p(sJ~YFA%xJLP-fy%5J04ysiryBT4q+;xJqhI^J|(nAJ0cUctvb*CB@!ClY9j_
zgzW0_ibGTp#_^exbmvi@;#U-&S21vjKWA>dg8mJn;X*`j#@8w&K6RXI)-YAFx!5Ye
z)HPRc%6SV!@g)%;NaBcC5cvH-9CvW|fM2*<LR-i5?ivEvqi#n(={%E~5!V_xJ_VwM
zJ4V@?`e86ZkG9s?5m#?PWGiS~(tx}fkAwJ{ReQm^SU)%tGCja&h~Fe4I|nD5z*<v@
zUyY}4&erSZUPt%UHV=Q2UA#4#l&Ff9ALzhkp>Y(G1s-b?wWevukZ1T4Vb@RQxLEeN
z5E!tn+(rD+r)G1nIHxistL8Fckk)nM-#uKD)-1w(|JPlgiPwFSLx%$Lzp#>a!~E);
zDVty|(c5UfecnWev4H#hM;e$(A+BG1+8&uZ4K^~FT%($rtKru7E1>P~WhWva+|5@>
z9ym?I#FT!^^_RyvBM#bg^UORWZEr{IU8uHsgQXy+I9*8jfA&eT!XOgW2Tn-w#d6o-
z9s1j7wM-gX?0^kfJ~4$+ek_mV(lR&{(yh!CxKjq6J;`|mwlXc?N!vhJ-?jx5=GoIR
zRtnsyMtApD%Uz9xx?mq((08ZgrXF0_Sqh}#<y&{R;U2bGt5-KJ3n&f?MTqA<4l3Cp
zpOT^y0^rphtWEPg_{=*%E8y614`a_1D);N3&4eF&>6p?NarHfGD9z~IATgstQ8R<X
zc_Zl=7J-P4D?WyZn^|FLM0&{S3byI&3Vl`Sg*^UpD#98w%3HBM;j#q;=@DIfOW(LM
z!|)WxXegoMqpcL%L^1Hxf`Is^pw^X^2fT0!{1G3QIdHy-8djY9z<C|;ZF}2uT^T+f
zeQ(jKw$VF}B&uRcKcC431U=-|1mHVtJpZMxZxwqHjR5zp;WK?eF|HpLB43EV!C?HQ
z4lAxJm8>%N{wk2$1&5U`mlRTUJ`a{l2<9<jZcP3B`n&Of?>9XVUtl|kPR45`>tbhX
z3A6vV|Ns79;Kq|uUUNcfgXmGA;}5#m%o&5OFvR9x-w&(EQqtR%oI^bFA4$H8uLCU!
zj_wpYogl)@NV3Si-5NjmKKzH4V^#pApYcE@mG3L;ZyOBLbxg)`i--q(r*_KgcuOCx
zQ!96(2k((>!rEtJW@}6j6&Wua8Bc;~!cn{qG@2a_XF&Eal~^gvQ<}Ml36FbnlS!aP
z@W(c44^K$%tA>m#fO7UG(?%R?Qrc44!q!@8^L`gePPaxO`M&3n(lV_|nShI$XyMjA
zH*<_#P+Ac-I(8BeR>r4~bgPM5ox|=yaA2G}dA0GwTEW^=;9M7|9M>*2_h}k)F}T#I
zG}1>VD3))EP%v`bHeeO$)jjx!MN+{A@Q3%!;$a><Ilm&31i+@_bK{TskPR5NGvKi?
z<>(V@<n#%pBHQ>(-2(l%6DsVGWdX_&N*hQAbO>z&B&2g9+~zsinODv^K9{45W=Vqq
zJT3yuSUdKaSdr7r9I<vvezE8^JzH!n%2Gozcf*q(B{d*8y5D&nOmT-#*vOdgq<3wD
z7PlJ5vY*Y}mMXS906%Xq>u4`XQqw@hLMzv5zE0tc76O#DS8{Jd=O>?sraRh9$%Gu9
zB%S3W(|v)=RO%O-Y!C~EdBoQpkg|uR{zGd&eHdv;sUHYu?G6A*m1T9KTDv)4@%_EJ
zw_B6Y6Tj8}-AjQvu~bu8(o=gDO|0;B{U;I(D9+oEWI5N`UTkTlY;RUm>O#xrwx0^t
zmHeK~cu`RL7XNiQV683V`B2y?VUrOTfCPFq&YVyO5N{JeHTWZ*SF2^<#aW4vI=vD;
zV8lgY;OGADM`=Ld&@DkQhF}E41%A);F5BR(hxKDBS`$@Mg_-3JYG>D30-GNrvOOV&
z2Ij4lNXluJ9snc2I<UiR3Z{XkmS4Q5@ACwEH3l<g#_%ot|JPB?*2083emmVg-mojB
za7C(6@-jhETK%U#d!f2pZ`+e?tk}N8iq>Y~cE4!Jq{O?rrJ`zR(bS-toEN(*U}&g%
z<Z*A9s|Q3#k_esbASLe1bJNZ;{EJ}zNl^t@Asq47F#0?+5G6k*L{(xULq8#N1Btm^
z(GOdfcS-_O0L79FGN?J5%PKT+t|vUw#BBDqG4P(Xaiy=M&j^-hK{74m_La=%3bG*0
z4bvLqwrEgiXAf+GMa9~o6EqTJ9eR;dLB|T)CpkncBCR;*fb`y25%20qI*RGHLND7=
zaw@uwKupV}<YquXu=KqTQGp|D1C$cBz$|r>ZCbG`ed`oZo{z)BQ(3?dC~?*}k0md_
zBTV{gF~xzknf<B76{hYwU6^^#+U^>Jd2b!(l(lrgj9}~9S2yIU-ik<{ea6Q;Iu4Z^
zTfR<qMN1tLNWonMYFf0x5Q7jBxEHL97=;U$vYm<kaKws}`f=>Fay1k@4^*XKN09BH
z$n?W%s4{4Ksn~q0|BUuO?>{%2KTy8FlWGJSvRCh!HYqz)f+ZyVB)|xD$invR<qPN|
zu9a5Wx64L%Rz&L|isNj`o{#GDO3v}Db9sjMcGN8%ffem#=Dtut{$_)TjHC3G)^fFY
z`W>UHR2R07V(8)e{A7%b<Qhn_Gr#Y<Jln7GzhbbPx#j6OYpJzhpVDHBK_+HjO-8_*
zLJUKIGSGC0@izZWwh9G4u^888n3EA2W8HqA%WAKvD0jA^j5A9Jr*i*8yc61vni-YI
zxCI+#q6JaeCd>gq<SznHJ$}6GY{N?}k~LAiALxO%TrYoz#sMn<!*8Iw-B%hToxI(e
zmt&hBWaIH{0C)di7J|&L5n<wUYq`4?0XVs%FgeXfs3##!voofMjI@}7TO-s}=LEx6
z+)iV@7LPW%9Sh}xk%R+mRf1s_Egk(qZm36O?*1v4i*m5WW=aTYCW5J4z3Yyf6DjA-
z_MQIYq;wOboG%UYOjq`Ex|Cjgby3Q(6jGW{kclRaPD-fyt7CZ_?7WVSgy#QsDJ;ls
z$(BAEmz+$NWhN<ObL!Jo{w=y1+niVW@KDuK^uS5BO<8FVE2?iE6uN%%d59)<>5g`%
zyq)q3w<z>q*CXf$&<wOt1-Z&K)p4%D2W=wkL!wmm4|a&h3LoHWnPGfe*2;K@>Ur*6
z?8SJE@euL#PwMRv%mP+k6vpe;ig}3+SEcul_ARc@Q|wqNJECfr=Pvl>T6qSE9iCU4
z`xHV;;`wL;(PU#T(r3JglYWD2#%EAxCG$ldd00h_-sXgMzGEfv-T}M-KhPN5y>*AV
zzmP7bKQUYK9&=O`5hsz*%2jE=wO)P$#I65Jm!%Oz@KGuYc|!kYyP*7t?&%$CQ4eB*
zf-`b1O1p*|h}CFT{TQ+YoL^(~nTEk8&#-!&0N0d6o}rcC>_3Ur4tXy4?<Q@|a-X;L
z;53HH*0crr58Ra$q%0Xr!sB`RybXq7epDDpLzZt;F(n2R&LPD=G`9glVY(czC#0U|
zIO*h)Seu4DmtpOiNW(TvVU7VKR#4+sVT`w3wFbLEg!g@S#jG;sQxO!|+spaCe>H5*
z2IVu6K+;co^_N%h*$?3;lH+tZLpyX~TGhhIzvjJwA`Y;eY`n{=caRSe;j8M6OY0;q
z`QIQ3Dt7A!VPp+{{t)V9wrRmYS?jp7)8kKy@E{J413aumH!D8;eN5K5P#J6XSoI=7
zPjoyH#aX^K`Rkff)~73~_cI1xvH)+g+?H!DpGjo0i^aMJT0Yeqi0Dd99tl}3O)<=M
zZc?F-P4eOjj#{jjA(<>kRlJ<T7?dFhu`hI>Jk;U+QtYY))tCRga3y$M(31H?G)1;W
z)SyB}#*sNIG68po9vRjnl~Y1xo^BF}AumV$FM@w?k4p@Vz~F~dkZ1pX3t?1KQ_c4;
zoq}J5Bs8lu(`x-_UNl{;f;2gMA2Yh3#F`BvaqgVnJ&2bE#q8|R88SQ=EWgMt#Ul1p
zSXJJmV4Hx0X$O`5+|~E6n~);8C`x$0*Ify$AGWTyk|A(fIy`4<EnwbTV;K;qc@?>$
zE!4s$>n_SE`0I;D_fMvYaHSgjs&4+!P+YpMEB9E-6*4#k37__6{@b#O8euzSdNw$$
za&a^mdb#yiWtVc(L}+aWEXTd)AtRVCDRn?;zl+e~GSYVB3wFgLK=JJvbPMuJ&@}p>
zn2)Lv8WR(1$Dn;lEvu=_ra6bq_oKI^Q+ap&=HSB*aVc0h4+qTm9f)2uRT%ARZcE=N
zi(IsKmjL%G4P9K&*rRm?0wHLV+uhZuTa+E*(y#Laecs<!JnKJ%efF(Rj}Ez1y^!hg
zcjxnWV>kq*+we5cFWea0?PxkuHr!VC&Kb6+>JJCW&^0sa>h0>KwkLY%DdGUo4nF0B
zq{itu1pX%YGB$6GC9{9AeeeS|=y7>^^qYNTkG7IO=r(E4yRI|&Q5aRlDOSVrSYm7)
z9-_Ue7D2==OYRm|X_i%isnuyg9*bi7xZ4!5m)(gSfrfl>1Q`+rn-u&RlKQ%xgwRFa
za9)~S6QktG%fqDYvY<w$M8636kbg0b-qa{Nk$H*_gm!o{(f>}7a#!pcM;h!e93SHr
ze`!RHk*Fv9=#q19BX0Xh$M3UBa3leiOqew%Bpg9_O|5y+stgXoVgFmk&O>m@T7>zi
z7BfIRX2@_Tt|ZLU-G$c*r7Q^}dyG#Q+AWjlGrm8BxB=HA&_M1aRx@4dGg!dpS(pjb
z^ZKq3xmgdq;3uS&9+1*??1;UOJjUmwJw$kP^td$Oz(HBmNB2b(j<SWVB@uk1Kbhg|
z|BYS*bUtUvpxdfNR0r()yL1UtmFNeqR$6{5O=QT&ak_+_IJ-5a!l!lR`g!m-Gd?Vu
zv377$msJUbV@~<(u<PkcqZ#DSnbOB{vmcxf?@lN01S6;L6wY|6%ymkqzV1uIwoM~O
z`y514dzQ2K^l=kXcvpzJ2VOC$lS#|M_|(yEZ_=y9d2-~es}f|@-cJ6FYOLMqdJs{B
z7m6&PzQcobhy})PiOrk#<sA|FI&@IJIy5lQrOQ*GK5N!Reji*=Pb*1S&EiA-83d=Y
z+8h#;Q0+R|H};0r!E8At;OW5-y~Gk(aKND9Z&+>P=yx@D$#CmG)S<&5I%9@j{<vvP
z1vmt^k9^wU0T$r6Wv_9&G@(D~rWy4lC5p3}gWVQytY-rN6>_#$Lm7Urjh~_F5jw6N
z5=cw`z7WDz;4)k2sX)ako!9fHEfA$13e)4&&vWz^TDAuWjMu>?8>`?(c|^H9F%QR%
z1GX9*r;{IqUzmgUGJi6gy?kQLH<V2~2_TM#`l^$B!~j5e!@YBJ^6;~Cbk?!~IklYy
zP4;$EA$HLa^Kqy8guf<oy!0Fn0HzWgx?<=8EeWnjBiT(OYlC+gly{bHDp7#`ZLn|H
zx7mq3CIEOqhreKH-gj-6`*Niu57=;tVZ!*=fUu)S3xLmpKD?O#Z8gvNL+`aEf0+uU
zoxzk8#(N$Akw{<go-PuMLS;&9cTHk`?&9Nx(g~6TQckS8Qrf6|oz%J9Fcw;cf;MYs
zC~B{e`cY(bzHzH%{Hp)jkv}aG-X;f}eu@WhN+4_(U-hpIETwGnnXKQwl0rq<niNXM
zhx0fY2Qlr+LneFNr>6w(c}!PxEuSIBE17Qy<Y;q*_+<~jQ@5_@6bN`~q5)z_7kek?
z1*SS{Z#pl0=^7R{zP$ywV)6^&&k8TA=dEsj=cc|br^El&!rWC5<LEii7bHSOmq-r{
zyMI0&mkGa}tW#csi0qxMrv2O1+LTPj#$HH}^BV<3Rl|}5WL;cCfs7_M(9!Yq7C0O8
z!j+^2Gws}7RswZ?ozei?A1MIE6xxU6X6?**HH|A@KA>-MMfXEeg6<tkV;bI;5@peM
ze*#(e<ai!NQ*|bnKz1wp&y<M0!X48%Rk>*ANK_XBRmMaSGk;MCftelCoy)Zvj+7;$
z4;#a8i;H&|))|k9ytSXxJ;WW!@t5`IT4c9*aZ<6>9b2S25KN=BKnbh{g+Sr(<`|j1
z1|#ktykiKjcxK#{ky@<tJLJG0g;Lc2AQJbFIT5cH(O$M6Fbpe<L)Azg!^;J=rq0yc
zSv<Wq`)+1SUgU^)S<QIQ+ykzDR&R4LuFqe#s%Xr^oIkm={sIdLM_Q2LG0xMbi`wos
zd=R2XGKGcBsJlt|L^990ap8Wz&bBNmQ%B@Um+k8DI}K@`lC5&B15mf_<0)eHNXkwC
zjUK|TwDEWm6G}~M`APZsly-MT-`>6^xAq(9t_c0b*Wj#R=d>Y%y57mAVtV5ODVtww
zqSy_*gDM>Te$4g;%<8(@cDA3Gp(!+)7CKDs|D?V95O-{Jrl#*3{wBAi5gXNW9oA39
zJQ{f3uMm;l()WU|75v8H{g7FWP8mbRTs&YfYTQ<ZBLQPhLw=3VIvlgcU`1{}Q;_%*
zFYt#i@mtEv_ebBOgu{Ul2M{DOvacxj$5DM9%iC?OeJGbGkZlZ1lr$m2ah9OqU+esO
zzIC<V0mZ(C60Q8OXL^ceF<#0livE}&g!oF3HbZ4sgcF#6UK@e7?dO|IBTw5b<ev>x
z!S;cYQ^pN3j`6Xvyy4<r*4z2p*?bytZ5K|UGJQC_6_^fE@?81&*e2pjJ`UrTFFlDD
z?mb!x>Wh`dD2?rD=$=K-2;=GCN@UMN;)P)f+WPzwHp39BsuK!Q@ibe{g4#Phc?72f
zxEldGV*wpo-a>n@=%n1~6j2|iJaxE5l4G6A;odg^*1GO<>Uu1=zmi9cI<!zR>P4m=
zXxOUgZxoyB@y3`r+|E(Eq?M-!rw5}cXqVTNQ?RrAjfeJ&KYxU7v!H?<CQY}Fc5JrS
zK}}!LRb?o@@2Fx%_uPzi_M`sKv=eMFM91Wx)#p2mq>}ved<q(MomgCwc>AQ;=~MeM
z+>xNwo*#gki_CLYLMhWfM`r>{W^#59=I8P4`m~^{fIEHXY%J1twZ4e~ZS>Qjztuh~
zC%jbNxpXwQAULHhQi(5_Q>kl)-KLqsknyD>3Xv?U%cL{0J%X^d1_PLfMPbm_))~~0
zWmii=*&*zrYHrxM4N}>P<;>H8=eTxTH$%>kWBLI1s2u-n!kBYdm-EgImh`+^52>B^
z+Zk7q`xIf*fKe|fypIrojk6HlICh!^{>l%M{qPSV!U9+N#_(&K(auPeOVNIeYq$-c
zBIK8;fOtj6@zR$aa#=OMy15q7%O{7Pb=+%n*Xg8PXc;##V33I)wWZ~3%K)EAF{dIO
z0ZWuA-9jsCAlMGJ7@{enT?(l4Lk)8<jsiOym`KmOeDs(EN1nGATzB8OhvdZGC|KIu
zDD<D90fk3xA#>aNPA{2rb2VA*m?a2Fe#AbQcs&YsR0`2#oY~%%qKDYVf%z%qrm{K1
zVg<G7)wPulYJg96Rwx1nlp@i;#*K0t6k_Tvn82AKi_L7%o{5&2_)E>NZJ2}pRoq}1
zOHQQ3qMDS6i@f3U7|huOmJ~PS@+HPX;6P;g+zeZ+B5ZoSaH<LAckOt?uUjIg{fOJ(
zT2BmK48y}$;Nr!?-xMV;E{yQ|4bePgi&bw1W}&%L(Z6t_>US@$R{cg<X@a@t9GR-+
zXLjus?Qb_7(TiPAY}r38&g>j{pawa5Q&3uTXT=QqM*w5M3Jl{wz~??7ehdV--jX64
z7`t!&r}xOV-+Oq)p|)!UosaA#!yyiKHW%~@A6LCYu=|g-AD~ut<aW#VCy2vcYry@8
zV_=eOW-}jlIl>R3Q}{7)Ce936J-5jHh>(n;)$3q9uz3#X=VA~TL<#bV2Q<@7a7`u-
z0Y#|Zx#YJR7Oh<5>qWA*opz6(bhlxg;Hu~k&(m4%RXp0UK1SynBa~T<MT1)a6cr`#
zuhxu4<4JNYMg=+*5xyH5pR0_2rYkY<s3-ByxB7YjJ+Q3OV`y8Exvm(IX(<=r?)w_?
z&;L{R@t39^a<hJCcN%2JsS+fYuv~jJS_H7>19eK-P95yX;>J1quS}#kw}*rC+Ne=Q
zJU&Wh`WSq*ssoYjuW*MbX>ZU9Btd&cW0ZjwaslEW>U6)fNGyadaTI*#iIE_oL?0DQ
zVqDIi?p<!)FHci7wQ*weOalCm4Ul0vCJv%%&t%WbZZUxl3Xq!*kCWy|W|-1atWmlu
zM6I}(vd0tK%tQW|!qx&m)xNbAPBT9sG|ky(O4{}AacXgEUcq`~`(4A!ZpH8F;Ee#C
zl$A?c?}?004?E*BDo2@ux6k=_><nSfbHWrzxE1Y2ZZDWDDRoNzf$s=Axwf_(;6Y<d
zf#dCZK}I&X0Bk6Lr>QvT+;5THCwou``{&-269Kz2=DKhq-)N2!+x0odpCJa3UB3gN
zSxqYTtjJlMMYUVuJsFmUCxuF2kn`4Mehv<bF`d5Bn@Qi28bGxyKj}3qN1U$K%A!%n
zdDGWv!Y|Xd<oS8|GCzIasK%X`)~OGD0c)p9@Qg_!(kCY%pU0|s8T9a@W=$<ikE@O{
zna)}Kez>w7n$@zv6emP-K<Enp69i*8Ar!oO_tv>9E)2sr)h1K-`0%+itn5AQbRDn<
z_y7O}X+fJZctgpQz=I$D)}>GZvg5~Rk)3FI%CCZKy6I`5h8g$HI&hBCk7*>|^K%aA
ziiF31+g~9u8K+Y?A}h`>oGy7`z*{${Kait!{7JYteAh0YWx-NH3ykpGIMovina11R
zND|mvXIlj^-%fK}Fj2pA>bZKG%v`ZbC{h}Q9o@W!B<CmbU6+U9KL!$N$$5^BKbx>_
zWunp=Caal<M?zLLKTM=TgZB<kUjH6`$<7vZis2Ex2!Fdf)WxtO8NL8jb<3E_j0py6
zUdTrqA{{@dh@NTms`%43hlZ}39M>-BsFex+l#(i{JG&DF!(FQ_fnXDrg}QzB-P)it
zUm*S22AekEw$LUe#dYn*;lY7;$_RLz$Y1Vb6k&{7K@g9Fu|>HszQC^Q`r)OxnG*vk
zWcw}_2ESAK)m3170WhVx2ls$0tV|20mpUJr30i?WutTIr44KpS#OewCX>xYW5k2Kw
zL(Z%6muCy4J5C3OUx)T{;osUx*Y?hb;TL<^D?j>PvqnEHyYCxd0E!#LyRN?_j^+P`
zqNPgw3tT#xdI^qHuJc9gUmptMl+8O&nCOB2^6zs4nR6ir6O#+;zX&?^8DRXSTRlz0
z*N_~xBXwFxqi%R&yFzcMAAbe_L>BxMA+QbGTL#m1m>CXCi5qOH0C8_(pOMBhgkY_{
zMFYnHNnmscEO-Q_EU#^Z#EHXe#$W&llZkWA)2F8ieZw)q6n|aQZQ=R@5apxK4ELxd
zD3qUm(1)q`r?!oqAb^Q*CHrsY`I^FqVE@LY{-$)>n!~||Rk)|^_QjhMtPuk|gX``~
zksF+!X7^tLjgH5oQIemk^Wr%e`-<iE*Y&pq#EoQkcF4fA=JI=`w%DP_l&i}PRqQbs
z2XtdL*PLm+oH2n+24)@ihbC`5^S2CAXx8BH+3@=~HJ;W9O0xeLQKVx4j!mE+Eu-Eu
za>Mvf#bpR>5eGBhA|GSQtE%TAQFcz-@^l1BKLdX|ZGF~xLO7SviVM*fk;NYJxlp0<
z`gc|s>q0~_>LFpRwQZZGF{5vVElm(PUBGGn)Ue=`+S-4b(OaX0m+qtHXzPCrv{VIN
z<PB3^a-tdyr~tT#?(3iYt}M1iDqdw-|NX1<26>N(lra9@H&<4ImgEDjzxYP#0~4Ck
z{3LAVzxNlOi|3!P{+M?1i%5BIc_k*T?#)d0!kz<#k+4_r-^!qpkzkbs7YEt2w>FjV
zRC%B-CU2_8veTcbNwO}fVc+*?gdJ-(;AXm71?pbd*1H6>Un4T`uuozMW_5<s14w|%
zbuFo46oWs(>qYMhu@)=P#klO~;f=$5ZG@QK0jALHZK+?7Rwb8yEdSfXWvm+)Dqp<K
z3G}-ppF*M^@SR?_9B0(;C7uN7#(WU|OqTuwiL~l&sBj0RlsKZr=mepxrlQQh?8(T$
zM?w{iPj~}W1yIB27=7`-`0GC1^>8%ua%O(#^7gzdbzKdwW4PqIB;ah{fIWQETR|An
z?n8aC-Uium*v`YO>n=^Df|3;rYP_^cen}ZF^X8Zv^yf7y1g88v3K&s*@-8`?14<(*
z93cmTff?!Y-RMyODe`C6VqY8x)=)YxG;1hb|087m@WqJt_mTr|cV0cZ)AYLb2&P7p
zrO|uXogZPzEt@emBIVXwwed=E;!v|DfQ$3?QixDk=f~KuBl70M5Ltzwx0*_n;*_?B
zXoeapQ`^6w;-VFLMb|a=8IdVlNakEUUO@PzcgJ3U00093H<B<88aXc&_3~DB;f#X$
zr#UrvD!|uj#lf6k3z>fyqu*~Z8nVX}5f0`nfNwa3)%a3ZC+`3NT*E<|Qg}njl)!@@
z{??^X0kY%AXOW#~ddjbYAp{ZJTlS1%Z|&V_c~fScW6mh~x>FhZ{eVJ<Pswm0xx$V?
zy>!c_o4Bjwl^bSj(N@HbT!f5mZzk{?Cq+CvUVy(xL}Qdp>c@)`PV<4x-6~n=^rM7X
zbl&5>Z|vicwu>NMrVTC2`L$%nSBS7ze=6H}klOO4c8Mz8lnk7WA-vfXX8->?Emj97
z?`P-i>W`_UI8?Kawzj(m1~>NpurL{`em=!jOL}i*aD{`3i~TrXG2gC`E1!y^>rE76
ze&>aYK)CjgAc9HdWtrYe`YFA5f+>36ATMC*&T?rLq@O3~Su&I0(mY;lVEhTrPwOaW
zPHdFz*Z){ybFR3H;OVU37j`;cEJC(|&!F`Jk`o;t{aj$=l}M7o>^`8Pl71yQ1p7E-
z>FBx^A8i*rU?5_uDL){D-Y}D$88Xo)EpgFuE`TFea+(o;Mh8FJWyzddOR4No8LhtU
zPewCRe4{ltK5a%>Tap%y>HEnN6sJk}kz#`t5~oC0DTH>}ANOz$OcV(!kiE{iyi#)*
zZ!X$}_CtIoZwN2<r?vpkrHqp=;ZHQ`&Q0<yP&M8i&2xQU^ew|RHT#mdtaX5P7NA!t
zZpNlr?g&-tUzFJ(k~`qbuNb;HM94o`H=2<o;$a8&`Lb9*H=62G1wgbm$R)fnc!dj1
zA`AW;+W>0KNv7l@qNg4IW-XLnU;tF9Q&$p)mQ?@tnbW<sz*)D^U}bYSZHwl0LL_Me
zx=-)SMCUH*%+<&_W|6A+v-||Ut+<7)0w922j|db-v2>uu^u-u(+xmr+DRN2nW9)nC
zxqlwO9KTi<Ulbbq8ZRS<PRbJ~r)&%92OJt_%8N6ruUc;z`R$l3eIZfHf-x6A<h$8z
zT;KWgiTbEz2*2j_b{LyYF^a{$8tzXT#LF7xO_))B4FRKym-VaPiGPhRVvJ#vL7&kh
zg^+QQngDw^lzZW&={=Q|)-+}u<PE4Mr|+9)c{Osom@bb;*1n*_ccqsS$)^=-_O?Vp
zgs&ftE6(MrN&#dPeYx>=99`x4RxNjY|2(?c_YN+FP-mMlAYz%rea?_U#3#$5xKfeq
zv?#6V)je^V!j9p5e`p=<ev%7@#=@Ar6Y77AQ-^pjzMUh_ifm0KK?-V^ca%}GL=U>X
zc?oEMCov$gplUXJ79v&zTtD*z-#M_Vspaj}Q~{r+RCa-cbnhKBXN?=+prx2|ECxIh
z_N<Btm}~1g$g%A`H@v&X9;W&|LK8lZ_BBBa(s0Vqf3d!ml)n{q(qt_AyA7KceE6>(
zBm9&dR`$gh0>OK8m*BX4db2%zCcG`kJLBANCtD6)qPEiOX=E*Glb;gbyD9*2Jr1CO
zvgLk<!pC~i=GZ+yNZBS=w_-8Hum&S@<#a+iyXrg=ilKW{0&}Jj?7s^@ZmX}lRkQ-W
zu#M1FcxZ2>mIafi5Np$_?5^W(@h8*tjy8Um_1)5sjv9Xz{&W`0Y6Ot-!Utxw=8)YJ
zQ`j|Vm{MOL!9p$&$#iA9Z1GP6tiu7AXi+4mRiP(ohuY8e@rFitM!1cL4^u-hss_It
zflSGMw!JizoCT}3=Fhb6{vEE+g+;xm|9|V*DBXa2<(T0vpClBqwvL}O7$O$Qyc#wl
z%x`|LB9-~X1OCY8T_>|NVct)}_|Zgd?642a%J8K`pE-814kmDzLA#mJj=Qa6A7Boc
zR*b1Cp!x%48(k_?er?*D5r@vCTmLtm2Is_rKKR$3!ZHu3o_Mqjq*!oX6d8d3jIe%2
zIC3>wx9IY~i&{PqI;G#qB;z8-Eh$Wc%9f&(6mx$9JJS7uw~pvNTu(TISt=?Vgd3*G
zYUlR%!U(MAkyg@rug7!JuPM<Bv0=;N>F6ATLg^8_t%!MVsDBoei2O42Um`hlT*iTv
zh%YT%Yo&Ry&OL5wkt^i0v(cn;)SoC)sJbI8mDN|$y~3FHul#`mkCz1=NKemCR%3Nu
zX&v+83!n5^S%fLt-A;>1zP*=J)?a6MQr1jC2#Ka;b4ow|48j@gT3+C5n`rAN(0n#m
zugJLE?KEmTYcwNnV?7WFtpL-}2MnSzLF+K5h}5RV&S?n(XnT=txs7E<03Vl1<v#Y`
z`ZM9(25B%1@-s#f?3_Z75^zU8bZ(5-g&_Q)4Zs5t{3G^-vmJVVqn2imG{pLLc(oB(
zE{Y0)vSMz6L2i&NrX|M6aS92OCWD&7YM^M!ODXc>UH=@tt54N7ZO3#k?Ypms55+@J
z6u?0~(uXbXmZ)7)QBCSeug-o8=vw<X@}zL_3c=#N=|FwGUog6epr=Ubj97W(bCvjS
zw7X*zlgg~OyP^6S4i-lv?_~p6ozXE@tlK1}mO0iB|Mt0dcFX7IaaoGUbGifESPRk&
z0v5I>u$~x@VsmU*q6(Bj)v1=B(f03g-EQTHfJkf5?d9NS549ierwfPu`fV~wo&GxW
zf?goXLS!{0HdXGvw3u3`G(csKi;EkzbDY|bav;r!ivn?AqnM|AovA{_%ptV-Hw1=O
zNrhqfznJv;{wm(Gi=Ydez~E(~TSRrCisk0nB%iAy0Df58lZ3I<3Rp-P2An<0K>!y)
zsSZ(dWB;ajjldB$lsX`g=VK>Fi>WLv2>lOZ!H+i*VkXDG>b1uBDaunIxZZ@VQ`2Pw
z$%SiID?#oEN{FN>0jHchUWQLaJYKc8RWZ(Mce~+dY!hxZ<EezC>}H*EAJjH?#2F)+
z`-L8ICX2|P1-wi5WVbnI+F&!`pfSN42mvy{+JW+Uz0NjeBF5<DA-E8umh^?}52Cs(
zi^s!UFbb>OM1W30(>^q*LpJhW7&4CcDrfSCUVE4t<Dh`#!5U^Ou2G}43uK_litv+q
zPWxziYt}QwaRK;Nb0TnbHwEV?ei&GBDR%U!gMET@5-I--V$iDOW+12boKneLXFGa-
zVfbPme=@?$KXEsGXLX>yr&#JkKqLW-$N#C4T|PRzAwe<wdTpb+uR8}B3}tbyM(R@_
z(x;vqG;h3IP!#0ev^=hy&CCqp7?eR@RzPogF0Hw)bzaXs-E=zKHa!eHum1lGFRph?
zIWJ0npoUMarEEm_Ekzixzoc)|9yJeviPwobT^fWKY-LMJ?95T~w#_WT1Xadm*=Hq2
z9u0pI?}<KIfmYGY3kFO0hs4(;(t_uUG?pxoCsBbdcgJ`R37<-i`&EDGV>HwON|{xq
zmM~|<Iv*<4H?oIM@GfS_X}AIUQmN~v%a>*Es}#_PME4%b=^akRpY*Wh@U(@M3ZJz`
zTE}g4x-1RE4^zBIH+#@q?z4=exHkE;F>mf6bwdijNaLL_u^dq5pTw|?yZdMEvqNBm
z$l_cPH2W@Ql;r`m+EiWmCDS!24y7&Nr_p3vMPz2@nAR<|F6!kv@_54D;7!>Ouv_>6
znvl6`WjVQMa`2@POt_gqm{YQb?H~p7tam=NxXtPGJxo|~?mBs=?}h>;HCDu*kGsON
zxKcS7%TD>?Y+Ve+-?CU<aT7DiEcS?>xDpy9QWmkJGPD*kgzWghw?%|hq{CUvQ^E2p
zadpvJN5nS@rwEZ_qlsB1kUgcEmMz_FsvKC3dXG!cLem-F+de0}SPX0UMG2bv;GIA4
z$~ABwx-SSnxGK?q0XkbD&sus%R|<JUVWDq(6$f8$x`ubT9-)*?9l#*rj^WbV^?)mC
zA1|irlVJ8aN%x!l>*8Hb3|anLOj5na^{(Twvk|Jrk^Lu!zXe>9dU9<xjoJF3g&W`h
z2A>m*2Ho5u*dZ}3d|~$xm$6qtE8A!P<)b%L9f^n6>$7hxx)P6AJru+OObT19aHngm
z`x(P?ZbrABEr@KNO1sPF-3G?Ut%rj`Fl^?edc$y#0zT5iHdS<y{C*L9jz8N`!_FVk
zNO3ju9OMHn^7uo<hwkW2le7@0Wfc=*lcU)<k-OrOxw2vde-2>R{Juepv{?p^zwu@t
z8Bu1CBC?Qvk3bzR(O5JJxgl@kyo^%A&<0Jxq!C9G@rCLL$s$cMWMLrcPM&$DsbJHy
zy{5-9Fu5wFqx4qoS}I?RK*>xZcuJeSn-(;slI{_FdB10vN&DN!ajkBKpvGkoE}!Uj
zZZLsK=KN9be~LI}G3y3ciY#<ro}CX4Bc49%=v1SKcE~JZ{`oQLT3vo!q4d9MvbnbK
zF{v?3s(?o+!73Xx`Lq2$YD@`Yk|^GHzrjXFzIqOX%$hY@z^XMpO!NTxIt300$S(eZ
z4ey+R3}EnRvTL)*V8H--go6}Zbx9mU5VfMxRtQFFCs6ZD-TPF=yyzSwmUTrw@uDr7
zen8Q@sd2b`(Ce~5@V>e!Y~aaI`tVfuu~+?FN{#%15&vW>{fXYZO-i~>nyW_w&PoPn
zUEpx)fKJ+u2{M1GTFh0odNk4E!BU-mc}?#bvD{*>^;Yt+<!UVG7Q`1`Nje^lzG#-O
zGO{S1xNPECecwHEa%E=f6lTmLqNtNKsjF@iXq6~8{<(GV!`=*}1y=i^MaVtza1QAI
zl$8g6+7O%oLC)`B)%#`$xm}6h+vttuvmM^-xCkr(?8Bo=ZZX-JmJAzZC&F{uHHE8L
z-u?V&EUK;~UC7+j^&xFQnty)$Ygv4llH=1H{b^8Eh+eEP_E6gNaa+velX$FM>)Y2P
zm6QK+ZF^+tuLcGGSoUOH*sTZm=O;9Om$!~&8?x`C$^6UP67nl$KSaHBRU=<!Wb3MG
z(oGCpoKHMv4jvCL&g_7>N-P3M!p~7&2HJKY0pl9+^(RRgERJsZDI!vm$Ic_qZoLlB
zICmxJ^Rao|Qbokzgvh@IYMmOBnMG7xMYjIH5rda17yNK-H*xOAX6`6OY~hB9fX)J)
zWZE-;slsW+M|$Nke^GJ@%{2Z0W4|%e<8S8_yN7#u9#7cC7n+EAdZLTOrr{rq&aGwL
z@J!Df{#6{n%mS|jasxc9v+g@wA!-DImRDf(05=PX^+ZCo_7lv4PwpM6$!7%I1?eLv
zg>o+2;|J*NE^bqc+^qp+*)md{C$6%>W-=3lsvZHj4eGa$Hwh;8j@90{)~G3rx;TfO
zn@(@FG9%5uF0Aq!rry4OB}tkfU?+CL4dH5jEmsMT*}ZTY`A4T+vb<3a<ENK*g?4Vu
zTNdTpx{6|-5Kd)=X;%6FVxm7WFxo}<_|UIWQ=cLPV~9jUr{9~JR!FGhWC+#u9{ZX=
zS$rIwOUZPmLcfab|9R0iO|`d>PtjTs%Xh~0@J@~9C8ZFAH<UNjL~}QHi7ccsB6{qZ
zLRUfWyVjHoA791yKfMma5-OmN68K?>u>LJhz0<eqP`z6Di-qX2BcC6o<@W_#!V5lP
zRqi`01lQvr+=A0B+`HaNFKJVAOvq}zRg3`J!rKk67c>yqYQrcBYyYNXAnK%MwVfrB
zrMr-)J>3?e&2`ate&TVG<#e(=m;#6K60y*u$@A7{-AqcJmli|HZ`KWb4%O-RHA+sg
zuE&S}Ktx?<NapigCpqA@`#-)yi4$sP$>ggd7(ZdnD_b)s5(+8^Y#$OkLbOFK{P{xD
z@8bw2r&-W=*M>z6>@a<<3ge*C*u;__x*IGXZsSWl1B??W&?R2|MR6X?6qgn<sARk(
zU~*uwIO>gd|Dz|tYyBMgu<j*-v76>$vGi+DyM&jg*o$yNJHWq3IX!&hU$iZ3QVQD7
z113-1&&8zEw}(&UDwWp*X2%hp$?DQs_y%V%IA~U_KF05jst7IWPX2=5ddFF6#XmWw
zlpQ*3v4rA_FAW#K2<m%w&U1dbT}I+K8yx2dB%=(F7~cRrAOg8F=mV*-0r2l#BMAY$
z;gqB!)C8}HLssjpJuD<J1Mc>nehO#+K3BVe*H~u^p3VRfH2EV)M0hbOxW&aJujW8X
z_!6>mBlvq=<-g+cFxYFN@Ec?PP!!Vo0r>e6c#YPZRqDC~D7p1m+Zj1OVPCfH#a+GI
z`;S3``=(V484As(xCA+qN0p}rrW<9qo;@yH?dRkO9XdY@UFkdp6s5J7Y8p=X9CBeC
zP?q?KDk%tzq~WoiM;R)=*rwJ;p)<haE@QX;%TSc!SE;6pv=nzvWVC?8-DVC_b=m?2
zY?~jf@Zux8gdikzzxe358c?RlPL|rD7LQHM^MG1J4z^4RRm>q6k2-d~#}tOnLK;Mb
zLch66a}Z!{v<G=mJ=UwlOUz%tO9Nx(5_QIdh9Fm??-o3Z0V432=QjOx)8`Kb;af(1
zS92Zp(Upx6t_(eh>fYUrn^$@i+C#<`G2{jM9l%+!RDZ@Fs+->?Qgjh7d*x@G%d3L%
zhC%)key|XYV3u2GbvwUsTH(O#W56^hNfC8b?XWegZy?wC%`!4|xbnB-f59WDMGien
z_6TAXq1HJ->(rEjDU#@Avpp_M=K%+bT#?XtMbD*J{bplUAiytl`TzCJM%791Sx5E8
z)g0UmgA`;YQQGpfm~bX@J9f8Orh3j_zS@Y%2pgLYZ9k82E%Lbf&h8=BerMAmXa$|#
z^UAai4Um(R%v$y^9uRL!b%WynpW7Q3368k_x5D!^vTn9|jDiP_4CeU5{5*{m`-Snj
z*c-!B5ycJiw~%aoXWi=UyR71ZTKMPm&F(vAq^l*3CEF-Y-hs>1-!@lC!WD>@AS$YK
zI-~+Oxs!K(Y}qAz+V{$KPM=B8h>UZlYj$9bs+DI6`Xllc-5Su>KDA)~Xr<_*H|$Xh
z3jV>#D#;7v#|)<?8Y-&wifMF<>xyqczB@4P%`bw?&9%82n?evq_T!^X+#6mRG|@8{
z1FyTJ<82gXYyHvLP`0uvYcxSG_^W662Kc1WytMj^i}N~%_@$8Ud|V|@9e&alNF`Bz
z+qL&v%FvdM1%mint}cwv%-Xk7y1jd(AsD-h^{lP4uV8l0**Jvw;y7TKE6{M=8`V)W
znJ+>WkUMrcIq6!PShJL@kZw6F1T$9Crtw54fheQQDgd`I_XUHeo2Sh=tb6kCL%YEe
zwEsV;Vhc_)M+>;g(758NaiXiw&*NNl#pn<N_kgV67#UrGq@F1PwRp)x3Z;Lz0>3`X
zyz-ZO5jJ6grXYM~r2Qxu>#frzt7-8qeF|0m*w&<>)VHNFH8`C)1&DO#t~OLMXn&{T
z+~zH=Gv(0hy(XaHhfTjHr*l&%(vfK6&Wh&d2AurODx)So%}q2~!0|06SY{0xm!;rP
z|J%CDedPDS=1&`1Gh5@4OChtrQ%MI+?jmhQPR`Sx8GaO&=?wE>L~;hPcn$t<CI94`
zT${f_q^a)5>H;Mjf4wDSz{iICLiE$Q$G5*5D%&cmtFLz?GrwoRl3u$|i35maHf(t6
zzR2w?Q6M3?Fo*+0(8b7O(EjTEGP86MKYc|qEy2Qk8nQWC<JmLbsXIrMm8*F@hB1Zk
z0|YEVrJtBF%7vBp&N48cvuojGa%W;u8})f)>!uL5%+k-S7iC@tu&f*7A}Goj7r}SI
zedUame=kpNgu*Jiq+4?Bz6oP_)ci&C^!V0G^KdgVA^M?C`(@lHtHSr1$j;Z+3a7_M
zr$!F>LK|F?dXM|-!Sp>RLjo;w?KC4rKW{pr4@TKPZh{);q%+2ifZYF%z~3o+u95Zk
zeinuPPD?o9ZnxM&({6N5pR*wj8soLoRqhR#|F;~#yTZA&1M_1Dk*|WCC?Q*f$1XYE
z18)qU$SUkj%8~L*=wIN&BaRKU>t)g;DaO9DkkhHPJ#lzLF8&qN{K9U0$%obc`*3Ka
zaEwt{SOZ+6EVA&O^uCr(WvlpvPzgvKQraaf>&mHbGk`eD74~bjef`f?b1puFztV;d
zHtNWZ=R2jmW~o%BKbNI9*u3aY#Q$I&mYbLzjfR!t9e&`jc6=FW@QW33CM=a1RM8CQ
zDEm4iUooUt0(7y+tkG(}00C~^+(unh`7jkOR0W*X`>4WEU+>ngy!&+^Zd%DF55Ip<
z8_vG&U?P~=<`zCN8e1VG>Co_!seZhL)aBCR5uE6jePoE>POKnUei1hcCN_BqU5Tu(
z>kQhG<%OzM5E(@_pPN9j<OrNimNHnxEv-)4hzgwPbLX-_+)T9@*^C6AbJ(o`jIdzQ
z47mAlL3WTyQ9P<L1WW-Ars?djp0`PAlOp%u8~SLX=3su&CkS5;G?q7kW^&Ro$tY?+
zXQ{FrJ9dgAd2;W-r%EJp!x#3&FRGv#rO`scUM@og2A?}zX}nx9fktTEm~`8FAxF_T
z30~A-0&_|2>>V=ELO!1F*}PV&ht#m*E?<lv^DD;&F@xDEaxQ6dOaA9bEyX#|R&&eW
z>L&m{ZWNi_e$T_~_R#fg?w#jo*M%b>QK)u%UPvAWX%;M=lQ>o+I&AZR5B9;pEvt9e
z0<CGT#Pc#^zh%^~OBj|v?y^p%XX<W_(u<t`pIYR^21vXO5;cs5=)lH#M!efsU0N1}
z31X5Xl~?dSDf{de5?x>cZ1o_@f_8SzjuAkg$2t9?KKS;b8b<ZV^+gMZ1>2om+Qw*q
zC2))B7dgZ{K+l(OZ$9iQY4PG+b@aNx@IH}ngwSB|jQAm(!nZ-6Mpjg7A4#1!lmFTf
zN!01-l2ARDdt$*U%mgKqkwDAWgR(BbC_DVB>>)};ruSO=vLua*h>OBiK_LO$TWl2s
zwA4?IF+Yhv&Kckg#B<SF%mAn<{+BceBbScba6E83^ZBHt<M@~X>%)SunVR-P7|TgC
zlx7@;F;wGdil7e`jy8zEeI=)1kpnUK&=6;XBYy$lkGM#@Lwdtv$sy(?l+7P|9JCVs
zW_Eyzy;}P_kk5d0flE1|x&;BCEnad`V~78>b^cUUtn=eFKI;(2L1GT^Egx-aZ>vks
z`&6<Vm?}R_q517oUOB4~GDM*q3KgQ3hRgedpO?D|<bV;LYK$tv2RLy~)qTx@<2xi6
ztN{J}z}CDNh7G%g9yQT0Ss+>&?C2`!F{Abgys3K_fB;$+<?JYGc*(_^D0@i`FO)NL
zBSt2BtQ2n;{6Jf6mRwiJ1k#lHMi@~pUAO2*4dkDXQniA~=YSLUC!Rse?=g8%b=I*{
zX<IT$Sb-bWRQA-66EcgSbO};YZU<)zpnQ7-6ePAPHQRqLN__yMcHAeyxxZfm{q>a{
z*U<mGCCI`cJiSr}pnX>9w7aKfj%*4+SMU(9FUU6}I#g?2{|<JhsC&*MCbfVIb_m9>
zXX3Oh7)<|Him?|jIxds=9J}3Q<x5l@CufzV*VBVa$19&Gdzi~F$NNxd$*^L*)Omzg
z2%Y~nGypbfir-KOpg{bXE!kH0T!~9qq$jo>c%K3_5|cLSYd_Bd!J2YQ3gx{h<0U|-
z$#df41td8$`92}eFfTCf11I$VOkh$UJ>YkEFiDv!OM@bP!|-iRK_rK7NVZE}))ft>
z^&*tKSy7#$hr2JfJg$#oEuQT|shoK`4fl7)AtJ1Uv7YtEHPc1ANLr&pv(Z6YyAp9P
zl+?H)j1`KFyuDw0;`S^hP${(VDmi18p4-_k&3d|VrR9emK@cU##h;pBnlZU(ccdE;
z*@VwvB{s9s1$XJ_9^#mLEGY|pLxJh8*DtotB@kOgbXc_VNx;pU$~$!Y6c*>XSnXL=
zi}@o7!|TxyV$Y6QYGpS7c|jUZL_aS+9TU^la+G^fe77OjTHh^E9C&UsZ%2}*f7O;g
zyQIz{?B0@~yl9_F;aR0hH8|~BG$%;jQYWU^;CkLn(fA=8cB(_7tG*PK*k|`DxE=K@
zir>6K9AsD^>|QCnrDSl{NwOLwn$dro_vfQsgvi#c$OZm4Ve}&>G$Mw|qi_mvM`5qG
zj_aQr!x^z8srW;dPk|YSYi`8vWdci7Q?u`VHvQ}G<t2Fm=FC^zi;2Q}%?*rsHA9^f
zBD>t7C`I(}Cj7-M*Ssn&s~<W@(yt870g(^-Z<;iTqmle_LWamd&WWEpJMO*gkqEUI
zFG0(RO4LG;Hy&w0g0Fj_hKct@@i>Ihqu&+rN}Cz_c#Z-!Gh4cgZ}yZaM>uC1`eKJ>
z_m$HTk-&nUXG`1!eVA$;3JbCtOc0<~=ay6S__oCCxjKT`xYb6)e|Ygyb-sGjYurF}
zP2zD~KML;m;Wgv>hruZ8qWZ|EjKV}A656EINz{YF1WA#9p)rrZO5}#$ZI(<i2=VYZ
zNerx;QS5x6!*nz^;p4p1CHG2*#b^z%Bkzyvh-;p3Rp7LC3NuO)pN%#^PXW9D1BioL
zg%+x+DGT`J3~GWljQ>7wKq!K#el8yVKHR4U=;9`k-wdJ)`5~pCq&3SAq}l%J$B(|f
zNfpkXz#*mM-8ImMc~SmbDfjvO6;LJsXTrRDuK=Ra)wE<f?OK=JvTQ7cE;XKiAw6{l
z5h|tLK|Q*2DCmF8K1fJR<Btfphu<H1BX3bVt}Uv6x2Q-woG8V(oIU}n@z9AtP7stH
z3|dEKMZ{kKyXcSYdI+7p2kin5v0W6+<5_?GgR}v%5}SuLxs?_CQh^8D_~#0cjIV;g
zv*ktcaH+8#TXUfv8T$6U(lN3%kG&ZfjElE-tOS-ptE*;(q&I#{4OApvxU!;SOw9<J
zWkJ<VkJ!~RK!68!YPGdd#s_JvHN1>Lt8AI`pCnYVIwo9*nl?HIfP%6doYyXzesQ<7
z^UlQI|9a+Mqn!l~mN;$;Hf0&J!%7HwyoWLB%9c$~AUknh{iPL({-qb0lLx^7wSJY4
z-Wb2KIbD^n2G-UB5YENxNrS3*6#Pru-+$_BIq&LCyO?oi&JW?uX)_1Q#HdSgz{$ES
z$px^Q&^&;UAoOZfAKznLk&XHGCSG+aS{MVE+D};MNf82Xvxme6u+`tZ{23TwR=GVA
zY{du|aNW@}X>0C<^LS|d;8EA2(5Vr(-IVcW>Vvbo3uL=;!b7>cPg_e`V2IECcDqN%
z=4pqcKMeJik;LzA)34yMYY!jVrsdO!vN^+nlWDS+`HH#@a}(k7!#qnxreB@I3#@Ul
zx14$(eJd1jbsvPmo@Po)!z<@7*lGa>aUKYjXP@|wg+)+|Bih+#^wDvN?vLG9iePXf
z<mpyyLKn~1L&e1t#xocmQw1G3w;P~%e1_yn_^JZ!OO|bYiHE8Cb87X@CJbK8^L=C^
zwR}`h=_(har`8H}YA*%{NBR%ST1jzm6v#Ncfqf{0o0q`mLVIq_Bdld^x(;0Y9|XY8
ztyGUd3}pz#`nY|1oEM%!^*LaN$0iQ|p9yrvi0j1?%%S-G!VpYAUqH<QPdUYWPL{W@
zW>()aiIQyTn^`Dh^ZIlN4zs<~Y-;BF!8qH18RD!<cpg%kr^vf?cmrk;919wa`_6z0
z>8TkaIM`(HCr#pMvRf;|)Od;UzNi;L1VR55&^0<v8ruFzSek=`L-0+8RybNpZIL$_
zF9Wc4FVZs0>g1@`S08slidDp#ww5P*`1w01?-*$%I6K-JDlZbfGE!u;NxO9yiQ9~b
z73<XC-er7Kr4u77BcGh}S+Ps`607{*#tpmI#<S)Mf>1@b)C@lE5S0TOquI#%O|s(-
za@F0}k4-mBa#!<2i|)UCa_K7MYhTtBt!L5cwrT0QR`k(N5KNJmEyvzu(aV%5HNcUo
z$gbHW!!SH5v-1;2-Y8j-Nxd{(Q@s;;f%M|OcGIA0U*-vBH^aW^m8^@Z$PKl0h3mK5
z*hH!H%}7K#pB4zJ23g`Fz$~z6W_{G;I7L-X0U<kwYvD8{LyXpc#EHup_3g|pszIp5
zh*mobYHFc&WXhykAeoAednxGAuC}y-w&X&vuwFWQPG)cC%riC)|5$Q|t*#^TjBkTF
z0l*~V+DKEvIJ+|g9A***J!+NNy&L5Gr>Y`>BY_7&La||y<T%dt8z}={Z{!ql8%}eX
z!?$4>S8?QGC=*DTX0IJ9ZSOQ9$J<nO^XL#nJW&?K7jKgfG@}yf11m!HXioJg@sq&;
zh`sE5Fq<F3Ua?ECWJ>i()f9b?fzpA#zLpqZkcdw)A>@CnzV0be-TZs*f_$NL<=%h`
z%p8xS#bDw82mcl3(-e2RCHG*pODsgI8n&?{r8I6;n^Ua#VZ>?Rc`!^J_)K%-7`_MM
z`;wsnpAKOi7M`QO3_jW`8lA(Hmx)xVleF!Nm9HF13%bvpi_9fn&|m+qI#bJ-xdSDx
zr2Am@{t^AXgeM9luVq`2x=tu2wmJi%l~erZ(Np*24)$O?s*IBg=(d<Y$uC;Euh-c$
zXZFT0)p1qTM%iay>2q)Q)QF2g#`IM>ja-HVDuL%xc1a+kp=zuqPXu_Jf(O4;N<wET
zXtE#SFUBW*u3xQw8E5EZ?EkFKmR=`?OAKb$H-;qVxVnhnA|gl&?lQ_4>MI@7aQ@<0
zi~$weD~Yg^)l~gR!nqt#w{SQ8AmDUx>1#h9vS*u?3{Y;>v3E_WEei_D<1AruA0{MH
z+}F}Z^6gNo37j<WPGr_hEL!1rmFNc}{5*bW^5^jG=<CDE>C67Af%gsImr1LNg>NrP
z?SG*vS66`qJHOlv^<kO1YR}HPTT(+%t=$Jb`(mAW5VQl#p&&w3p76PRTV5w%;^S#)
z{C3<S&q3vUkQg}tu5T|I>Yz}vA*kSU>Wfn)5+!iPv!E!1Gl2Cel1K5wtsk|}tceUe
z3~|$wxFosifq9Zo{eVd<qS*J7Ese_7S7Xd>%ZX-|4iV?VJv#OfA#q2b#81YmQdGu1
zv`-t&I9Gi(MWPiuPYREph=Ty+IviULt<yur44fut`jg#hf|;d?Z#R2G;hr`|fLH^h
zhkzszTzB{2IDfUOV?4PWqhvJYoD}y!C?30`JTO&OxjiWRy}CVeY>Ekmz))=gE<}*Q
z`A^I(>~h-rvxLDU2_2rV%$QwqE_Rt-C8=7(lXCp;5A^MdB5}j=3lBXKI!WLx6|h=9
z<XtOQ*xajs?Ffmf3O#fo9oxpSWgD`BEYBFeiMW5If*|b_mYimdqF*^aC(XfK8)Qcf
z%_&PAuXVAzRX>vYuL-|i@V|E{vg2OQznO7mEX~nS&4a;%-?J&tN;xEm+zf+E)^ray
zvb_`ry!Y1VC;SSq<g$UXYdMt<`f)(E@au%6D{4{F4Xf>^W1`z<7YnfLm;D)nV*85K
zI-y=-28<s3Ul=bRl1d$%oNcTxiZ{S0yG^!y1-_=QA)>!<e8Vj%+bG_%thgK4a`6*c
zkaV*t9?DNf`a{8@>O1vRR&7>J7v5XkAJ=nfcw0{jP0yS~Bg^FEGv040XX-m}jN4Wl
zeiug;=K@-I|F3_`i1h<RkH3oR1VCo3cmqb-^h*YM^tq%?e)jV}O!>&irdTF{*zGJ)
zeKqoE2?^-1eCMf=Mbn|k58m;+FXgUx9;Qvck)Hv^i<HsJaS2-I<nXoRxot|$Cn`9%
zmsWIjdMeGZ$2reg3S;~DN|1#thZlLqG+=w|3T}>9+lM4*ds>e<<AM)XSW$qo=Qe)=
zc6rEN2j5cc(a&&)fiLb8hXk<h-vu^B)}qfLvv*ZtqR-mASa-$!gGUK^KeKTZi9N!n
zXbeu2f|kRI#E7ipy<6;dY~_Nj@~_WyIvI#fXF@v@M`|t{=Io5sI{I|T4#Ao_*1c3i
z<rD)Giz&)N;MS}_oLBz`yjO}+cFeHJM4DJqV-2t;6fBCrWWKQAqR(%yvB>1sCTD>X
zP>$PZ>#h!Xhx%P<`ZN5n00TD;iI<7vv%?d{uH|(Zp2Sjzu^HFb-$=-Pcy(rL->9m#
zwo3JIWqnV}Atj`x<Saps&%q6SdU0SJT1(Z#pu73!YG~go1iC->4BF7yi-6g1(qnN!
zGfg^?XuTMnXf?>H^%9)Vg)3SM<Z3h(OTFpe-@{j@&f}PXNFBS?A@@2ac|s;IZigB+
z5*|59V|ClnJdF>&rN!?1EO@c?)>W&oPJJteDL^+f7&K3~x=xqFvy5qm(puD<|H!Ui
zPXO3+F=_R0@Cay+Z|cig152DyD!prW#p1B`^t`*%0-oB9|2}VCAXCFa(v0$!X-OPd
zb#v*8Q|JvfQDhf*h!y^%kd!vk1kp~_99t<w-Q{jU_~twyFv>vCYLvG;Y%Vf)mcvGD
zZa1<+aVLDsLLPS`NZleogrbgBz7NdY=uM!ec{{3~A4Q9|4zm-o{y0AO&&91ED&cTs
zwZix`JHByB3y_#3ggUzib5n*#OiP(F2$G!FnV*QI#1Y#&nCDS;)BjpB*_g$=r5BNe
zhhb--Z^km9+g|EIDJaQ3nH0D1<$3ppbn!j#6mV!}`2;0H(B2Txlq59ZtDmy<qSCNp
zy;@%6_ngrQ3ZmvXL>6a#`0I%M;P&#3;yzyEvPbTF>kQ{LkozIPQ#=Sb2-JZ(Qq91z
z?{ei$sGJQn2%|Si25wjN=O)AAj4$n}7+j*Sox@)!R(Ozbt_e`KGTBihIn70ycVi;p
zTHz9&WmvJAhRxsRCb=}RFJhW>nVMf1LvBs7ZBNuln|A})sV)|{Pa0jrc{bHR$bqj}
z*vAZERD%9s0O@XJa4Mfs<EIiqXVmY8GLDw%e`jqISt@Ht`unw&0j;p{q80XMg-l#S
z;GDs=Jr&>l@}+qw9y3!Vb6H)F;`QrdqL%L;vn#0*wQQlE-Uvabq0Ns1y-#(d|8Dek
zbW?P%a8V^D3MY=jdaqkd@2PCy{o+|Ezo-|fOCi<oot%<U<LoH<Tp_n7z|Cz1uTHDi
zS67#QI$}_$L$B~43yXZihgi+NINT8J!1cjbQZi_OW(XuA9b0cB68KT713}%QpA31D
zg!Bok@s%K##Q>I%qT~Cebsx<2u#;E-`h6SWUedp&BYKT<Kg_1jOz%+sWBPqpfDVzN
z+ZX55>|Zjj9^8(7bB}`fqDb(W@3h>8g;td5OG?d45H-`<%|gGZ$B0HvFRO6?yDr3z
zn{f}8yOiwc<#(3<rVXv^&`FMkYNnHDW7q*0g2oXq&6g)?*WroD9)<XWG6oO{g+gUy
zm`C-=ct&kt=-2jN<eFkSBXq{90$xo7b=sP2y8Z@(6F5wV?Q0v+W1ZUb!qbK@jfpfO
zxJjk5`8P&zeMpMn<Uske5D`FfbsmL~09wU<{>acD6gFy@){XOe<taYqj9J+0I|MsS
z7yJOD3QNgYe~P@;kd*A;3^kT7TY@|}fB35K0V0}Rc@`V0o@PHP^PMN`bQZc>e>NaI
zGqWlWMY+tHq(QVZ(lN`+O;LG@`-47W#z&P+{NC@-IMIKstwuRN3309ubVm@FV6zrW
z?S#y?;A8)mdgp0(m_=NZvg#e2r``6vjh4s1&9YjFsSs3*8sd_j!gbHS)nW35&+N2n
zOhjRqXxQ#C+`K*aY;mts+mFVxS4~z>1C@6v(y$K7-s_H!@j{3Tiz%JjR(2nNMY^wB
zsczmUH};DWR?dbJr<;Hu*(kHJ^!GWWb0W)rs=!7+%P7*zYwr372M?~#YIxlQNb`3O
zCTv^$>Qn;Lm{f>}mq&0QugoBv37unwg@@yLpC~{pE(qB}v7<I_33jns5X^CEXP-%Y
z0*L*ptW%m=f^p}UM|4GwD8U?DA=WWse0bNX-Dx(2_wBtN*lcxqJlh0R;v(N?h%gB7
zB!)Db;}PpnU-fcin17uN;ZYm3{!IIf;hX8r1cYToqm>2%=hIA37|c|2k|X|pPf@gx
zBvS*lgg`=hE5DU7miYm1D_y<;>i^24bOgI-??;W5ae_cfZ{tfaoIa6n6JC>?u=XGE
z4GME~MG1$bM27E{ar5HEQU_u(I|(HtsN&;TU~YD9lKyuANqX_#0N#ObvgD)-z-5N&
zNy(OQW}}nfXi6geMgHT#xizKbqDe#^h;$`@$nfLiDOOOG<=ADqot=Nt5Qj00ml%YW
zNoxPQ>nB3~D*}&@J9&<T@SYW{+#8G%S^efFo}8#4B-1AD+W4?mxO#B&&TKepg<pec
zCqcR!?HXH>L!RsdH+{<=KO*#0Trv^>_(I`jnLQIu;t+7`s6mK-%o)WzFqTi|8DBW2
zlgWzth7kq`MnKXp_GMEsdT-H##=%6C2#7w7XK<U*dI($AL9C3zBe$0HF+lw;>QGEM
z3w<5jL{jK!MpeR~7?9ECxQvVHmrbPo^`eBDcVEhhmxI)(a4>?mxBmDS48x<Q>>C-w
zlDQO{CIKjUI^RSD_2FYyzw5IUBQHH#k~sdVWU>kFwWc9@o{@_&T>dx5cOc?I6E$_v
zZ_;iMX$evW@Pdj3B=5sn!6P$;w5Qb!N5(-I<XeHlA+a`d21af`u5$6r(JD5al_RH;
z|1UV{Gh}jxVQ7l1mrhTzrZmdpIvq?C?>70TODZr58lAg8KIEm&i02Lm^rz3~_ss~r
zI~(9r4-4J8o#y~R7%`Jo!*?Rat;$|S&cgo+uu29qAm@)gG8SbSB6JEXRDck0f-5B>
zx+{mB2J)_$xGzeUvFYdl<{hD8tN}V}&2DrWbhsHY0L%ZNhg|t1H%%Vfj|-=yb!bv*
zWeF+_fDayX$X?QN>!K7~_+1EGqIvR<PF@u9v4g6dkbO3L5{c!_lC-l8XroaBP|5Rv
zd&tBcvJKh&vI>knH%*-4;ALUaq<RNlA-N+x@#aSV8jJH_990EAy`e0gXArq91<Sp%
zf(bNtO|=r&)WP{LO2~<!;ln9WA>Bc#OALLdt_^`D>l8j7;0SE*!Hy(fgtTnLG6X*g
zl;Yhi_7Q#mL$bZcM=+dl<(gvmKE16;gBK<6Vib!U?fI8%19!_M0tZO3ndT|YK{V=~
z2HIf$el8hNC<b&oT5Gu=b;5<8{!6C@RwsE8FKhr&K(4>MYhh_^6z&?1F+g|#9RZk$
z&k0r$cxYd^m*@z&=Zke%#aU0T(;Mr7N;9r);A#|6Tf`v1h4fRaa;Sl@mB>&Ozk5v2
z5o%PR?&>(1iNYkqf9z|rS53nn4_{M@)3P2>^5c};0Q{Z(zaq+zaXFWz0HpSxV@iXF
zqUCm26NjXk$M+FKt>|P2;02oA*_8OWfs6j^H0k--&c)|0y-g2`*Q9~`SA^fw>nDDE
z(YDULbDS;g&4K)q<5hAO>>sv5Ep2VRyl8XDNDh+20*0I}m|3H5Cs^klzy>yCXAYBK
z+LOIQ1qkUvd772uP4zq*4fGkAC_auc0)iFnKYKz%Nx;MU=Gpsr-lH|^&~SpSVlg$i
zIjl~&Et-Zab3N%x+;DH8W(d2ba+&Aw!51HlgD2E!0>hILz@kpZb?e<2a;L=X>pKGh
z>iCn?k?5xu5Fm!;(Pskv78P*YT$NE=GX<U~ucW&a)zS~o$_}J{4^2EdB}}fwj`<bO
z@R(cfAVj_BX)GH*;QfCllhib{?7q1u@cDq)td>(pn|GlFwCL>JP)9n+;n1H7zZ^~c
zYLpX8hV<D91f%jRc^p9AhlgQlo!W%CPP|%mF`cV?0r*yLib>if884>_NgHjRx+j$W
zwHvNjOuxi5IQ9RkXjkRDy(X_xw9<~+PJ;3JgUH^{@lwwCA9077M#u-g1a6+->Gqxs
zvqs7GKRVmLw=ZfO5;Jcnu`F<YLESRvE{F;trdRaDVHrV#+%+OxyqX5h6?6L_bMKnT
zkABDu4hYY;%jZq&Hl~v0fxL@dML>wRH?Mr@P#_UJM6U6hSgSQdwi$YwMxl6R)5Gq{
z8;)-WJ3IOj_!@XT!2Ldx%ayzodRQ&x1+S9LT*9I(-~svchW%9Ii^-!^<iogINLFjG
zE82CXd^n|#(n)T@ex#>jUWo!KKMwvHhM<?RHlo@%L6K&0{wqXcq~LYJ+YtU;kf2~Z
zf6pZ8_-Yc}@Hhf^d_$n;<}`61Zjt*xwLXivk%7yJ9`Ke5j(d-nqEE(}d&(J4a8MZj
zK?}C#5s*VK&Ww~Qx!X*xQXDIRF>|;=)V#mLzDEtuH`VQUBuL&W(^DL45nOudT8dNr
zAp+vS5nTxtbKq7Tb`!_ZZk!Yx(4V;d*F3(EoIYG~mR+@`55b1=KIyoq=i0R_X?@e_
zV$=YYhh%0I*jnFh=st_JhEUjtceugxRX!FdqTSVxkwHaZ*kW3i%O|Td{t&tBA!x7f
zN9!roxWHNR(sC#1Rni{)!m>W8RUU3Lh9`UzeF8gzd|f}#ghJ0z;*#;wKrQOP)FY&+
z9c-<?9Ge}!qmp#?mJW|3Ta4bUQ#=#SqQ#=esuKez4PD$=3o3QUUeB|tVSWke=WQ@B
z+ft;y+GBo*a4#hOcXCZ$vtNESXHhvH6>-G<aWN6iTd#Y14?c<e52eQ&|AK6BTvq;p
zc(O4OB8r+5jHc3rp|k$0SAYL4Oq*W!zeuO=Km7jPj|^}1_|&lO@AqICSeykp%}6MG
zzVi}cPyUu#395!)U)o|uawtOvrYzyBl7c};I?5fSPSaxbvdEZl)UZHwnaBgedoZH2
z*S!@qdOyD__RBz4Txs*3S1RHDgn6?h%E!ObMwpVo!ubG1a$%m=dF(|K<tP=OT<5tY
zIBC@N_HzI87xZ**%^4Tn4p(Oa8R@K1bzi=?dW8{OIwSE-lD?*_TY4#suSUQ|YD8xi
z-%$M+&|qq#m<B(5N~D3jH6F%RJ>`W!>$kR;;fSYxXfw*uF|pTEw-vgU400xF0M}*E
z6UwtUMA)LEh|?+q2K3EyXQml51vx|%r#$R7(GIyo-A9RjtlIMG3ex$Lvc@v9ofAj+
zc&1@VUvo*^qViJG&3FJH0G=?<W|AXFW3@h#PM86X7lYspvF~BE$yke@(|5p~1lYOO
zae@|aAx7V`k+0r}Db;NxB4hID++b3tS376uyVsXjsCjs&M$FkV`DodA_)DG?VYAfF
zjsM?!l+lLP-0LLdz$$YOL5sV}`<06Uu3GB^4JV?#{A$3$dabbWGO0JUiLo(R1Mkc|
z3c){#MJ7%wRJoe5tTRV*Jl_T$t1)F3aP>T(-8Jy$(Ht-d?TE_k&zlTWcRTU?Oz7o8
zFgQU2{#Bd*RAO^OxmkGHlp>*0fEGr+TG(*#1hgg7cgOnAXq@V!-4H?L|J}hsGc(&c
zOP|V);Z0#AF@`59uSE38MBHabxv(H<?9$@(Gb4Phf-+vBbitsAPy$J_^mP0~bZcp>
z-bPzxF#zS!&w7`5aBPCD(4;CdoppFHPfrixrZ#z)Lll>5B}UoPkfd2bAkEeSzdF&+
z#bL?H?M_B*Gl_bCm=K}$%}bjlb?XK|b<dMD0@|S@P*}-YZnOQhm%McNQL<AZF6w0+
z6;T?p?dqb?1^4n6B27#V;G*3S>d71o_<t(7n@V}M7B39EwzVYlqV0xzU9vMX8~dDd
z{SOCcEI&_2X^?lFgfp?w#9LBT#ox+K>+T7IF#J@>KoK@q*eN+M5pDX4WWUPV07_b9
zc+M24P*xvX4IL+)n;kcGtmg>$N~d8s_3NYLp{1ctw&hRsMbX_z=mVoY_ak)AiDLU(
zY0SK%X?{R4-Ual90971M7+||5<wC<y7Z!K!&yk3N!plHoM-`rFK4n8j2{4+WT+7+k
zsYquNw2BiB#$y%R6U(i@B3M~R4Ja4|YRRzQfgqa(V$DTD=ud;7jFzWKJbOw{l2O5#
zK=^YA*84v5dd?R6+(>2JMx;q`?Cr3}9>IV}QR*?!;&9{!{=KiX#P>l@ZkE_KN(RF2
z5=D274RHvuNdYnA+^eZfct`s4Xs9{tdId2?bPo4&7s);UjsuGYQ#5X;;7{7$^84w{
zhFN#zF7B&ARXb0y=qEF_w(ZITrhbQq?+nom!$L-z{_&r94mx3~)|Y=3Wffl=4XFmE
z+{nYJM>Rd<ZNZ+5W2MVAjaz=?*Uo~rgXK4tiM5xm@&)WSs}xc?i7sJWCJTqzAtlCL
zr|hAD`K?gSsOy+-nld8~k)bg<L1x~WxA!b4bwkU#%B4VfIml1YRKz=88?Oq{_BoJ2
z)6SL-w431A!6J{71`6=08^!XdSK}ry5940bqVqutUr{x+61su}<+-BQ+`jExgSRLE
zEvB#-%?I{*vcX9GywO(;B=D%)pHVO%@N;7qm}lDj$s$jW^=4$0k#|Svt1%~glpL_A
zM?@xf()8PMc9%wQNu6FlV^b1}<oQgt?)N!Jk!on<NuAks8aYVXBgt~*1gbalwJ~e*
zd6`#TaJNs$&a-k5?b77}{8Xf;kPbX$db|p7fF`ps%2*dpzvS<G)v^(kLL5IlBc%n{
zP;TQ|%0$M~UQRt{>n8;O$=YCU&x9qzc=Npy9q{F*QwPh+ehaZ|4^7wlBNTmA4hr95
zU~sstxEy*8iW7sokBsC0n!yi+<f=mHdk6C!vZXvjlDPL-*~U;2i*?4uPWa_+TU1bD
z`E$NHKN@MV^te2G82>9gts&3(t|F0xN=M&-Vk$y3E>SG#?;L@Ppc>4sUlh6D(=68$
z$wV4I&r?j~qbq9iCkkT*#8UeXb2k%wylgUGHUi|9BHvNpwDtSR8DDhYuR9{u#Ps$)
zK2WS*<0A;zll3#6$=s!^GTylqHd(N2%4QM(@l|Y2xXg-!93UPGE7lcmeeA-Nf0W(j
zMFH4lFNwvOpEHeUcBv0A02Az;v5({YdmL(=Q3S!7U~GX<ypd~PF}HHOoIyjVPgx?X
z@@d&)jV2!ymhnE}><ikHP_nbN{Px=P%byPPW%N`Q4bP?{szEM(o330WnWW6b9wIpR
zz{4RzLnvbw7_P){93lr1vKA52*c!wg5Z%M9^<0M#N)n+}ocC+2dagkRpbls?R*Pc4
zpREgKV5_SiBU!=CbG%)x9PepSd8qCgq{Ms-dxRg3L>rvqo%Rtr2d$TQ@-g;R&e7yB
zKY_cob271B=~k5s%0q_tHAP(w8!K@md(Fmp=~-iiHixaz2%>x+dPh0v<H~Dt_R(g2
zX}~k=eO0X2OSp$339)*n!RYsSz@gNxbt!8_1L!yoSlzu!h0)*y_0SQ)Uesvtwt^PU
zlpyGF$2>B(m5C+JFXYDz_#g6`(F+!l+Z`KSyLAs_<rtOWN4#8%P#F3Jnwl9VGxl?)
z;tIZeu$`j6VO0#CM8)|2^tXpLliITNrJmwpdyde_m3am&dJ@w1G^y9G0vK4$Wl!!*
z0s#o}Fm7B!@{ZrgMpNQAtWk3EJ~5KflvdjID-RCZ^&W*ql8v5MQ<Aeu&U<$T=q1Nt
z#Z~J>g0Rxd+pvlH_ODUUSu}~%0snV27v^)3A6NChQ!vvQQ^5wvj+sP6M3Qg`MO#8Z
zm=j(02f$er5zRDIeWj1NulTq}+(Qb8LGW=2k6<3kS9AK!i&__hr0BMQt~Xo*Rn#LN
z%9`8oz4tRx;_7;;{t}hD4A${BQolPRF*mHjKqbM7M9d%Q!bR=Se+rRamYjoH>g%wE
zpKdJZ4`G?nM-Be8R?;aB+x$igTr>LBJqTjY6&GSkf}fj4^`e|&*=AUff;|!JD$74p
zcA~ochh3D@%`SXR9cj|+F%?zSF>5U((kdoD;NdXlSZlPIg?X3oVc11wDDDy=n)wu$
z4k`5>OK)^mtQ(v+b@%rA()FrL?)e*)A%y{c+O7Q&H4>@J{AZVa|Jnxa3u!l$tN=9y
z1_Do??q5z(zKu`qEb__U9Mfs1#d=_I)f&^NJYEG3n%9=Mln~WPuHNha>0*FgpoQl}
zx<;?KEfAcsg)~G6CiK8nusXxof-cSkI7?w{t~nNkr;yft@m_Q<JBs4k`TcH(0TRI+
z<RSw`^ymMHQ%lHA*sBqujjgUhGX5TAC@O+uY{6bigkOmGl)GWaLch4Qsb+K(`A%>z
z6z1{7i;Rd|GO>d~0}agu9d4Xjt%UGZ+AaBqz%HR&vS0J28+;?@JD3AGlbTSS+`w66
z@j%Vk4t#1?$XG_1hqH9~EU+Gjzhg$tk!jNwMozII-jO<JSC3|RGg*N8xWo|dsgnj4
zzYL99TS-uawljvIt9*0Us%(l8Vf$NU(O??&jX{_F>E8KqVf{~F=#zKjKuIJ_pP8wu
zcOO66lH}|};jV1-HcL3@Bc0X(F3EUMvG#0%qGE&t(6$Q7>H4(M7wgy^37O`*Xl;rD
zI!UkmJE{NY0Lt7YasJJ!KGz_yK9qF)sH%BFR6M+Is7F>XQwo9^!HQ<sCngzbyjA&E
zPF=N>O0J4#!1XGU)d#Dy>+2>j;N?7dCB+V|C7O#k^8*|lp>UgGIZp-rF%+Q>q6`?h
zQJtucoKtXF@I!9J9=s~^*BQ@y%ikVDzRu<;Jf|JVwdu6|B3dpkRG<Z)t%`yx9h0Vw
z1pP!9>KHT2<<nGY*3R@ZhfhtcmFTp>h*I96ad6Mplm+j(%<DbWdZ2#~6r}j6nIrO)
z9Itvdv?n-VB-G)xxl_wFoH_vM$M(KW@ROau$}#%ZIuU_J*%Mh>%emQXtCl$lkl1nm
zsGwalql{Ob_>4|oQ2^y_d@B#0aqI<+&gB2|t26R*MQA6XtADTxGN_xnAZ1VE@G2<j
zj51Jv%d|fn>OdY1Zyoq4wLb&P{Xp_NoL~AbL!<aOPnNp~`SL9ztmVO`FO>+9RIRV0
zXOdfZnL?rh{hykOyj?)P&*Is}(1As0^6%^fS6>K!Sm-mq5L9>u6q1NnJFG#Sulgyw
z2yoL77w}t<$@Lz!XWR3-aFcrU%;64s>cZx-XRzMQH9bJO5UDz~4n7Vhlpo|XrX&mT
zCM=#q6DHPFVJ~7eBdB0&8&-Z<y4*~u#i;OahzrvjRE7sv>}J<^J9az#SdhC<)x4$Y
z;p!>hh2Yo#a+T&G`})<|YCpdddeg;v3-?XU<nAXec=-GeOypLQq;MbiC)h|eZ8g=N
z43K9!sh2X>O)IVhLSQg`tBmlJvr&lJm9A;m0z4jGSLCi#l<OpG7dC3B@twaZG#HIi
z5v{oDb9NnY3)Q|>iJ|$H9f1mCfkmXB??zyEWxN7(4p}=l2F{)zNT|kxW^O4{U4Nm{
zL)fL`lQ+NImP<F}(Qnt;A~-_ck)suvcczbZ>iPK;cmK>XV&7qeB*ISgB`<**)2mty
zVH54=H28-vxo?nI@sM<*F@iMP3YDHAS>@P?{7vHK2ANvNgtk{J#E!0{(XGT(vp)-~
z$z&`NU!I%s9H;8P&T%T_7lI(Gcm$!@UL3Hj2CN=((4|mG4=`I)@ZRb-9S*xB(=xm3
zJTv?LvR!(HB9mf<L#uYW`*E+<)Ud>;F=zLl6RqMSZOr$rslvrCC@BWKSZuKED3pb0
z3PItjxn0SJUs?|W5%{MmkVO$z>;K3-8<>@pRcpFWRIY-2eIMOA^XX}zQ#lMy&1&oR
zDonIE7_?E=oN4hf3?8QBZ`bFoDO&)MTV=FR6p!>|+{hyB3&l>#L%=(iRxsuFx=M<s
zG$3<F>)F5m@;Kp^iSarYfWJJ7Yg2-H<%-PIG~6n2>h~xHq<ZwI#vTvz?0<QYN_*}n
z&i&#KYJtHf(xyckJ!aeUR8XC=^O~dy#6@Q}GYli;O)9vk2Uu3Y`m`0g(rafPsxd1o
zp(lFRE9cQ9ru=wM8n=sa06b`W%qLxbW9V6HY*z&My!*g6nj3iCrRd-Vfed5IXTf|X
z9ilqS$|<?pluDG+Dai6}l8AsC53)n{c6AJgPo&K4z~$iE79EnPx;F{xQ>mIVyL`l}
zKm~qY-duBL?K!mQfe`BVZ2*9eZWUOEeJ(ne7n~Is5y?Gjg$?81lCd|J{f+5w-ydYV
z4T=CbCQl?78DfMP;Wo|~4yzrHbQ&cZAST-_3bC6H`UGR-aLJZM*1}&KTCEf;<IT8J
zc?sxbl41_h9rO<uZ6D;N*^aY9BW*NYFa|I117)J~@A+IF{Pj1W_Hjpz7JN&ZUy!vW
zY$ic(<D)->c(~w;AJ*Y>#?=eWxJ#fRH<(mb&EJ-R0WFNqZncg{3A&Qn_yH)qGqkNp
z*^=m_g6A->m$(?QuKrWakV0yIUk5XNgi&B}R^vNapq*_i+OT2OL6P?68?d<R1C;n`
zeZL4A625H+ec`;O|FbE?-74`4p6Nv#Z|xHZcvz*=tG2tch!D4^FC7q+g@nDcDWH%k
z#dIJphOuvPhO#m3jzvKgUi&;wS}y794N!C1F)T-N@QE}Yu*Wy0bPV*mZZ`P{4G*&*
zT4uA7UcS`Kqi1y@{bGqS{4veqH^q{2#70Dnq=jIe5wExsP$6@qNzI*9odtyKyJ3=w
z_aFVcuOu;6EW{@MZaoQzVbuK>`zztLRnIykkY*IpY?$5%hwmd|s7zFTTAc$1S6_*h
zUoecbr@ZQj{!@ZYwLQO)&EhkBBz`kuLvKId2fwvkUHCUQe`pOEz6_nLb_@2n({i?j
zTlbmV7&>|%er7)x7-+9jK&&(Tw#yHfW?1|0q!x1G!Qg92TAmpQ(GWK3aG3xJc^_xM
z`0gal_KXu?68-=G#>sy9Rc&20xHr<Gxq%Hj;AtV;duUdzD$G+xPO-@^4S+C}BlCa}
z8T@1e-;n#RH@ZhBY5Rl>fQtW9-z@tB*KRQXPrnYQwQBGMpV17<xq<j6ACz|JI+3?v
zh-@4q*PvIcDRbL}vH(}WXm?iT@;x&nihY{)#zBp5oyjDNE(UJ2vB=|tmQpgu{H>~A
z%{;bg^YH5&e&83lOD3t!Hno9|m3YfcIx#+r?5!(1%e04w3E(8DuawUbsY!R)(%h$b
z|9iA({|ThZ=W!$}rZTHNKn-9x`B;*oCRdPrXe0!Rb*{YG8c(fY<&lRNVtfYnc@TN%
z4h!np&Q&=J3SZr?cr+z$V0He09LlsT<7d||;sG5ZicO|2!ywvg3C>miI-XQKXelFi
zHM82zWV3<v8@{Zbq&URbqhLs@d%D%Jyy+!6(#+jq-4~;QigOl*tv$-7M>$x$;fQ1m
zK@4%-wsZm-=}SvJ$rRQ^q1GqecXt`*YtbX$xk|S7AC3q**(@ZpwH2S03r5~Og&CxP
zYb6vQ*N?es2D^>*RdE?vN~g4fQt^z|(Y3~dz?O`VwV&JQmCL)wLa18XiB>P4r6gC$
zKo~&2bcZT(xoQMb?_wSSjtOkVz&JqDdKiwRGfVobK0YtVc8d)sNiF>K?c;_YQ3VpB
z{yup=v7w}7G0iHTnc|`2yi!ldN$%+Mm&%K?#Q-|>$Z?cr-}Nm-_i(>Eb*=WwziDy`
zIfMRo9uxiFD}-a_Yvx$f3iJZ^MEbccm&NAHfyQ2j(fgq>8vGYnSp|9>a99clro?Lb
z6%2$f=K%~Zqi(fj*=dFbF49uI-^4&~(`JVguelHh7R80eJpGcye9ZHiAS<@%xTbA}
z4Ba5W7a4_P8ymb91aFsG-3e=6eFvW%UJ6*{lX&<Vmqx5H$q&yNyW&VS0&MB8RpnvJ
zSSMeZi5t@XH8*uam)aI)lmYjj!TwIPvXMooQZk|i!b15}BTk#j94s74m%fX-5_Sqm
ze{&r`{j;L=1-jmeFt_3^rlo!m6Ce}NEhN?Y!`qp_FaBWVS#!Ua{d)s|m`QV0DBxpz
zHWu5-5aG&OW?1;KV~9{1>X6&lIEUIkd&u^Kj&U<>2G8N9_<eJt73Vm8LkKfEbhQZL
z0D8|pL{x_2y}<X+F}H#L#dcClBC)7IVn?GI7DtP`1+jk;_+R8u;>jjytrltJyLo#%
zdqnxn8f4}VXd>PQe1yKV9I3EM!#iV7qBqz{EgJV)o}y`p0q~dQ5Gun)TS$j{c?-bK
zpIamY@V?dXWcfN11ty27gwrb*yTzc}vfc{^pav+>7W8lXWa^_J*R^Rs-%bQg0#nGc
zLSLn6lIf=`nC$x&b_q=@`hK$iV*m0(?lgRgI3eF=m5$p<KUv^A6#r#--rEp||0=`r
ziaX+T!D2kp-%`nVKLqvJG=+n4>Tlr5UupDG9Y1^QD*!Lhv=Ez>$Nj@nxG`J$er1HB
zWeRn+Jr|}%NLByrC(LJL3p9yH0_*iU?L<@96QdC7B}0Nf|7K7|9g{Jpiy8+fuv`D*
z+mQS~Ze%rah)WsOPfa$wzgpBtN{S_}$p6$8yBdSvftv28@2TU=Rh#CRg+2dd>8IoW
ziMG?w8*gThVLN-dOb!crf53%~{^_oiDcNw98-1dwqLAZ(H^Dv+$;pp<Kgxn$UL@-i
zXI8#5l%+}C7y75MKp3;#6@5?FLm!RYWKe^e<6dN})A~WWi^+mK_KKM?Me%jLp<f??
zVptEpM#Ej-`mx1;ebh%~YdYqy%n739RV6u-nHhFq2vQP0iz2yq9gp^k%Pu1V8<Q#I
z3vO;M$&r)TDKsT_VM*rRLnJ<Uh7v0r`|2@f79bc52f9UAt%(;FNvp%PxGeWjyFSBs
zc@~I^ge+jD<qNO^M9nNXKAeO+V54(YEJ*}NHk-!3bi+FOFz&1wJf%!VhrCTad4o4@
zTKG;CXI`|}Ml&VC0N87Ip6FWg2><-9M`Ta{5E?A>8<`SKMm5j?al|OaXqFvf@IIxs
z^G}KG-bsVPN<yYD*dpmr{KAaym1r;ZhMRN|wGGENK!hN-Q`WBdi_Hf{qK;G&o%xni
zJtQ|Jl>PapRdqy1sKsAM%G+^JSE5q9qxjHlP&zJ1-9wyITM4~~R#j|&7({Bdv4tKp
z^$*<T0XElv|MWc&slDl^C@c0?@;yT;p;|qIXnR5?{B_y1m`Yj*ivr&VGsjla%D3!0
z6Dt1p3Idf)q2c?LhIWm<QL4^agO;+t`yE9o3*YK(KwG4Byl6{&F?P6X9F%mTEG;q+
zB(?l93ezu7$@z!^ZTYj2NvCM&{&DJCR?(rGQ7l)2TUcvE@e9tVOb%|Opp!?K_cf2z
zZNXM7W61YDnC3F;tPO&{xkCl_arnC)_~TVkqW-WPnc}@JygTCg3b@W$KsE0u3ZwkZ
zWOQH1rVTg=J@H&JdOfGueu~FO7{JpnSGZML$2~h_95=;#3vTu^@S`Q86@Ml3$UcvS
z$b_%%{_=f|>j4`#H5lTiHyW=eT%JLr9{~9scPKH_b*P4C4FL6Yz%{y$4;t}&btZTA
zmbOPuzF%27$`SrD@i7=bp-4l?Rtv!G_xEEkF{4;^x6cwr_CCOhUVX-O-Pfk-_&mNV
zcM@iA5GL8?1@iZOE_fUL6sxWIqtoQPMvig62j^Y^-Ft#)aEY;Ev*UB&2HUEUjn+Rg
z<*IRrSRh@kA$|rfQLL|SOW^pVx_WI$()1>HBG8sE!WMPBx4Cw9sMj!$FGsYQ^L<mw
zHuW5a#!gru%u?B3MmiXtIt=P}gTi*kyP`nX66Bn8W^^<$t!m*bC+?ahEu^o1q(O>Q
zHR@w!w(;|Bb7M+7pa4nU12E~!pJ<Zcq#}lUGatG+P;!#C?EcAuYjdaeg<kDcH+gha
zdX(?WbpyS2ime0?HmGASFwGsnJW?INwYdKd0_^$S*R~*LNX7-4=3<O^08v9irvow$
zS8GlV@=o@6As7YO1u%OC2Lt@TAbLEW5<Yk<j=>lH-v{ve>a`wF30er}nKR&n-B#js
z&@>TPLT6Q8G{i7E8@T7jgV7O^gn})1F)~`f+E0v*XK|X-uUd%8QhFjTn9sVmXI_|Z
z(>rgo?>6A``@|%Sg~0$F@Q$Ghc{qyg=8tgt$4wtnRhR$9tk^mWmH|IFTPUT}OUofb
zK1FSFQg!QzH~USXpNFsFW#!feQo<~5?M;|AK>FdDdA{7LA~-J|{&<9Kg%^;8`9qIS
zORV#Y5!spPTtw%%1K)AqA$(^AfU$0L<_*YCz4+Y2)itSzNVUt)u{+c^IhW!Q1jb1W
zbrW`#7SbXyr^1YjT9<a=<Y;jIR1Yvjr6CNJKA7v}%=u{_?rt$z!(6$|3Mb*bS^xqJ
zJ#&uoB!hJG7S*9xm{aGjxDkXQ6zPR_7#dCZ=I>qV{(Q?-PRqYuDB(V%GUm<pA2PT>
z9c0YrM;HP|{fDT7st^B@Bl=W6T#+cpD?iCVR)CAN1hqE(QN(6&jxm>V6wFPdw~W@#
zSYFz=eUH$>Y$cuLp?j&};H+$gheLRZ#<Y{H{()DpiZdi4`k6=4;&~W25<|tZ^Ag}X
zu($yVbmiweTvC&UjAW*&k0If3ok6r5olpFxBq~uPZ;J#7IFl*xEF;-52wZA;aM3f1
zpBV$Sr6u<D1~|H~un;@Jr@P?loEW>6*)@25;kN`ko9wF=_(ZG|m(Hlfdqs%)*1_ih
z7a<>Y6WSjC$?IU?z17NN*av~1UrwfjObKg7vXr2lGMljV$b>yjx01iM_hh5-`Nr!T
z(o$(8B#g=b%kNLWj~HS={i09C>jzYP0AY+FL4@R<<(5-vAtpzEQ6dLzo$u!?a&dMm
zP^%@@_45du)kXv}*v{g+(L0@WKQngPltq;$hiX~nb>Vcp;%3>Zqm<2(WB%@GOB(-j
z#Vu{5kL`OIs037ZR0X-;M}q0J2obv?GbJou4K{4lrr?gk-!!e^&4!~L#Fq%cw574l
zkI`E&4YcwJxUIfRdZ&zOOE27kS-#$#;)mZcR{)g_Kyvbd9A<GtKKXQ$-;qF8_0dT^
z51sbRpHlW{m+d8Gca}T__IqH^GbNF~?qN7|=_T)T8;7>H{oO!@-5{S0*=-J-efn1D
zf)XE3PcE1Qz}Mo|hNT>gCy7+cOt(-qrIX07tv`otUxQithMKYGW@OYS*UyS~BmW^_
z8r46-&3`%5=GaJkx?EX3lM^3M_nE5kK@vA)2x!)0XDbsJQ}PFiC3h4Ld<k7W$+QtK
z@YTI5Wuv41+KegKtiB+&@<`V?0fJSg2ild8wJb1^%2lohNuJ?KM|G*v+cBu3$7ZyT
zeu+B;Y5h08?Yet#^>w*;=gTCEN!(YIUOUwdoTL#DKH8e_Rym3|de0i86HV_-phakm
zj2BFDu*{vkMdad*&jAn`K^5&?Nbd6}cvp9+rDyNRJk*Dsj#*p_-l9=rZ8FdQi$0a-
z%8n@M|LUrP{m4bk+@6FT_mTd0cj_Z%PrsydMZK_VPyF@<CmCL9!UbVe)A|!hzdkSN
znh~i`c%VtCOwx-Hbawat06R0$tF9JMP6}zYj;0_;cgKhHh~Ytw#A#6p&f&QY^CMMx
zIkGnGKR7eDMJ7*rrBK{w8_(pT3xfZQPR&v+w?c0-SKW}puAR+`XblB+Q|N<Iw*45B
zkPb{tRy$toe0*B7-O1ii>CbaUij#7~=XeFhy_HWl7WxA-%EoezeSxwZoFPGas?#`W
zMk^|yW>v=_kwecQ7Paph&5{vQ>@67CWfmQ7Dut5!4lppej$h4QK3+iP{EAF4Fi&HZ
zaxd(`r%Jti&ejI@A<&ySxJZM^!fok@8@z{lh~y4&T~H&Gjqr7!i1UN4Z=v#h8YgXf
zUL`;xtxJ^WLh{txV|(Ny8P*GxC1EtgO6EY7g<Pl31oMjF74PzQHx@h**pe0+OgJ?t
z?eNuM+1H&Z6VApd6-U`B8F@4sO+kRhO=`=ni;RWIQeV>YOYW8>5Kbp}rTg7kD3kbe
z<A&@}8+vLkgwW1h>Wam8+Lx%t{v%Go@V`rW!D*osGBgrb8Ibp_1^ObJ@=@nLvi^eT
zRcjdK(xW7TwEslGwCUekc(=)7Dd?Z#p$F2r<Ds^qSKRSGW#MqSNt-yapZp5irK2k8
zBXJT~h^H^7bYH<X(!3_?0F^|8b15U1-H$qBJ2Pbi{Aj+}GFJJNX0pKk!Z@Xz<S3YJ
zbLBIZmI^7yBf!3c?H;05p*+doVbO2?AE?~)8vKh=AJ?*)+6V4o;ol1`L<eZ7vSj|T
zz~S@n0R>Q9apw~em8u8Hh@?rY?}fJ-4)e{{mGwA+xgFC^kSRU)2WULbYg;QMexpT6
z28>U>ra(!kN!1SQC0PVdRv_SW&asqQjGEXOXiOm&djFIsjQ)b3gm%GbiWr1+WgGUq
z&{^22kD(Uz;o<Ra)>e_X6kNmx__xDdjpGGjc5cMLyg+ssYyR?gIE6Jvzj>*=;I)Vv
zM2{~5>ap?%jOR*_P9YD&kmHFm!uYgNTxTle*!~SJiJ2gGA1po1UBrSt_MayvTG!fS
z4jRP9!gXM!P|vkT!_HFKqj0)@K~Yb-ulCW>t$8)i@O058zpT?LQsb5KB6b(-W9uk|
z#O^eY%oCewgSOmPN%b!wdaMj+-b=^?H5f{6X5p0VV>1Kfy%i6sn84kKqtZbT{vrq(
z6{>qRQG>B-B|Mei#<lizb-l!eI_!)BJ@;*Q9j|cvj*-zAWS2>2G)b3`e@zNI@AJ${
z|6dXkTzimL7MEb&VtwEnMpm_Gn~p(rfyNUrc2O#10E>hppVXLED4HzorjOauq5Iyg
z&^IjL2M<)D+}SVvPzZ!HEhZ98C7%zl{21W*-h3vLSsGrVL@jB56w6ohpxLB@{i<Pi
z?8ihwxf-78JPp5)Z*eewrvG<D_)i^eyg74vysG6=A)4P4-HD6A-1kdsQ!OEhf2twD
zeb-&iPIQ}i#x^^!UP+jb!p>+7@bGC6S8Y21s~d+>Kd2gz+o9)i7y#9S{TQ6sdA~X=
zKnY3;-~gkm(^AvK!eYK)AMD2E1S;zV_xqA_USck#(;P5~MObxmJ*Fd=ZF~;c3;hfp
zWR{BT`sQRU$Sv<ppVf^@Qdhi2Wxu6h5WJj2$7+>?7U^R^<=jA__Gp#ll6^d%y)8^1
zb~cS55D4~nx3}xN5kdOv6I=S!!YuVP|NNa6eb>Y((vvMLY<up6@2phjHAZyjZ*RUf
zYjMU~Q@a_0Yr~3+E2yH`wF}xjb*Kc19!wL8k4>?k%mcLM$?3F|&%b!xercZCx)2=>
zBR>7dqR?#NGi}<t%bLwHtPoY3Bkmm%%Bl_*mrJ7l0hh)zp0ss_yq<uE_n(*{m$<u<
zpVF$h;gKHMjUW(+N>}ywy^DFxp$4Dti{YF|GACS(((qjKt+*5?1WTZ8Cb|=qEdxhI
z)WS)}siew3Y+8UUF+I#3P0s(-JR-`FUXLF0%DN{0_~(!_;)q4KYcJo{ONz|;UO$m%
z6C|eX%GlY|WtI=b1NlgB>Adr_)jZbdK9Gth$5{B@nbRKk`J$3kWR$-lj;)$}DK>}D
zcqkA=3C_7nTK4!V0a7d^%uU0ly3O!BH4%#dHf^8(i_)7NT|0q%?zhrxbUv%r;gn&Q
z-yo$3d-XV-;opK`(s4p+_NS?w?bXt|XkxQ7!1YlY*4SIQY=;<mJx?SO&@SQq^X*o;
zD_SX4uaBg}iKz@Q&y<iyY<rZOrXvt7`<I3R7M^j*yHZM2jYz?B(Nt1aW##2MLV~NV
z>rINF1!LX!!XHvXFdc_P?s4A&C#vAMGm8}$Z8Y#^=Jkqro*F`N#5BJo^6zFze!(3i
zn5h982jLV=Y<I!2ZmLKdPHp5D0{HA~p4)%`7ZCseO720Ma(F|@l)!@@{??^X0kY%A
zXOW#~ddjbYY`FN8#KfejAJ7Rv^i1a75t<wS1n%i<BX$`u%+ruBK{B$3fzsQU^scUk
zn&QRZsC$HZ`gRX;*k6yDpubGMD@)*1I-RA7AesskPP@hsk@XrTcmu{Cb5^LKWLSyv
zcc|Y~;AYuBhEIn4>CG^Ur}l@Pp45n0{}pQiH{CAp;gedL-jz(}j-do5Up1fze$c;*
zIj}|1337C}ff};Wcxv<WPU0HTJcqncs5c%>3H5oM0NxO)<Co(-&l{$!1Um4EL<R|Q
zEayC+o~`S-+X~){vh&!{>Ob7<nXBFXhpCsc#o>@N(^AONB}IHrQ1=EHj#rx8fYhJh
z4C8j|TgpB5wka(9RfY~1VgdDmcQe(aV_Z-oCL-L$wFj&!#E1kvYYoeH6HZh`MWg-!
zn~eF(<qF-=M?Hu*wtO$zAGx}L(23R8vf7kcH&kaZuHJ$&1%+fU`Ha2htA;?`egaN;
z)9+1fjMtLB{aAc&nDJPlk$3LY*u6U1``Vd-59sO>yHJ6mH3(KLxFN~#h)@><rEksX
z=|E1B`sNefOOHOMH;u7d;58^QCEDt>)#?60RX3dy4T)AfbEHM&tD2F=ll&e>4RJ>s
zhjm)eYj1S^EIWT*uPa$QG2OL@F?JI1Bap=be-VW=1UrH8E3>wZ3=S;bI463TkbJ*q
z-hV8yYSW)+Pfp4(IDr|vtF#VJn}1ns%c+X8=B1O>)3eRXL56B#iu0y~1P<(k-dl90
z8gqsW^!*w~l4_#uP7Ix97%0y1c(h7eaGm0q)H4us#jTMXtpU`Ux+7jC394Gu=4G_G
zRTcTGu%DhkC5MKn0BE<_c&$PEMpKW>uW~sUVYa86S)YPYmc7(A!1rU|uY|o=-B}m5
zxV%;rpCm5$V+^y8QtVkm&z}n~*};N{D=gWzEP7qxccGtRR;4f$7-5xBdIM`ai|deZ
zkc}0hQ+Thl2-{_B7)nTD+Tta<&Efu)k<0^L3Ff9MS2cOIH_~w@Wu1>r4r#BkJ8DGr
zCLH{_dWhgZu&MrYO+Hc7cXg3>!;tnP5WAR<i;*2z7`OgNKay#--saE5Y4c$q@9;^0
zX??46HKi6ubd$RL1rRV6E6+VT93o=xGeCi8yzwEdf&m&fZo|}w7sg03d#JR5mR4=p
zTc^s#>2br%{_Tf3J`lqfxr)c8#XxkKZ0g4tHcx>^QK9iu<cNN$4!@)>4q~z6;`KPC
zUXEW*$Y{jVtl)No7)@9Fpe;`=vMSdSDt*Yf>n{!V_Ostbm=@{L2bXx=9_JSP0J57k
zO;OYIx4^dJI%}&H;M)K`BMehqv6$R%!a<k=#$tpDm8Vs4&GY*YzqJ@8$Eud1ojmLU
z$pn^yG8QtgwTE4)<jx|{Fpnb1qlVx@HuUsfPnB`zw2ljL#Q6_O7f`JUCntK+n-f0S
zdndMhRR`Y;AhZVc*@<t!{+&=Z`W>&Z)bK?{M(pM?qM)1u>{DWTC|*GI%+11fJ<)JH
zMWM8w(sm{<?`lrjgDAISLvsCvFgg;xEuxdXj=?TTFfyBsNP;1={Qf|E*RYB&*V3~O
zYi5YM^i_;mVgwUdv2ALl(tIHN*OgkGK?Kgz__k4{vSVV?`kGcTA@h6D{X{Sn4PpOa
zVTUogE0{p5n22XOo^?lln1u=Znc{fm25?c6wv`$AWXv2&2fq%)*$|2DH51uVcy;df
z_yY6&OqN^HmlJTdS*e-pi5MGktbjhcg+|md1Qn!?y8T5D<eIW2(4ONS02oJ}Y8T)N
ze8JTM6}V`HO8D0GMFRwkPApd|zV}+M{<hgQkp($(<zW1}AED?k(;-Lt*W?$SL9yz`
zQn_QY?CNrKJ;T!Oby_^xUDIUz9qt5IqF&PKh&J2K^6|{QCIj+?l3}?fXzJSXqXl2?
zNh>0;NfRTZ@5hC<Bg}TEl%GVW1ZJmX^4Ll;2t=JUYx*OJpFUQ)E3h2+>Mt{5YPFw)
zf+3uTFkl&oRj(W#stySy@(_}<lHier7#!7e*>t{HyMA<!T8<G4uV?vNt})tR{|^X=
zmoOPHz?%#9IW0DF?zd^tAm+o0%qpQE)Z)(P`d+vQ{a%Z82!RGpmNlvQ9S9kR48yja
zGcY}Zm%~i;zkD55ugXerYV^bLBY8rONSbGu>^8-4sTcAEs{l1C8{76ukgZ+<cr=(t
z$w(JOE(}Dm&=WXBLJu2U1N=FO7)>d`q;*-*`bVG&-c{g-7x1x6^LNpwzN6+!d0;V5
ze}nZ?g1tG1>((0qv`=O8hDy?(s_bl6ui9r46A{kFM5olT5rH{;SnweA*suhWtmpAC
zP9dpf;w-u<k&-~O=;_D|VlH1$FrRkR@zg5V)}$lv^?^?iU4%U<{7+~q!^N~K?79*U
zZ4l6@wpKAJ0_u;hFWhezN&T>mL^icBr9p=a9uiRrA;8EiJ2W=+!6AnN>o4V!Aav1*
z$aMM^we~?Y6s}Uwf7GfaKI775-gQ;9ikoD;*w^Z7{~|5@kMDJfDA5_ERI9**E(Dxa
zDd9u39Y*a~xW_Ez6z>Q3blVjPaH9>W=S@(S9QU<dn%thMBfkzmYN@C{S)rszOV8{9
zw`HbrdEs*C8{@LQR(?O8REm9@mIwjIqmb&Fe=o^6=)q;?6s8CXZb$jq<5p^$$7|!V
zt(tk!WJrX1#ZL!C9;02sS{^8qH5F1KvWD8h4QvH{Y3`9+))%Qdu%)mgb961Bc|?;a
z9PfKl5epx!2m9WcWLn#i%f^y##r3aGTEC1L_wY*IDwdA^7?gV2`=D?j6uAkW$<5hu
z<9al5A)+K%qFX_Pk;wts<{pwVpgk|quDdd)*F-UOvkx`6wXZW~pI^w@g!ux#brj9J
znXo8~x<5v{(F@3d#^Y!Fl$OwmYXBK!InD1)z>b&6!XB7Qb@}y!=YSjvr%E|~Iz(fE
zHkGJ5Ld`9j4$GswMk)#w+QQKHU?9DNh{IqUdGG#M*4e{BRq`4A8;vnqOF&#1OgAs{
zy|ac+c3-mj{1*Gv>@!OVtxc_?aPpV-9~M)TT{t~YbCBI9ZlaH#jwH|-bQE~NW|u=5
zc{DsTD)_QBuxG;S%+5-f+`|IaK^zOtO`%rZ1O`S`nJoxl6E#IgJ;{7Ltw$A>ZRe)T
z2Bba6R^@P{@_%_*llIYmb%DVgzhhDUi$U3rX-gK*6n|w*Ly4n2VsZv;QJ!WRF8j$b
z0C^w4*msHwvo@hhry^F(F+Z+3TmP!aT}w7_>feLf4$P41zRrWxVdi9z<y!OR_nlik
zst<ad;tfb7M$@HfY8d7S!mq%uEN4B5Fx{4%QgVr9nNr6s7!-&2js{TILG5p%h+N4_
z<?x*&9N!_L?P02a)f)`2KOhyAGk?}3rampGurdnL{YdTeO-Me{p`P^~?QN-w|D&tG
z@Zvy-uY)sMRN0N$roA1#WPAuiKs|A!{VCu~@-YIK2-t&SO`fAWD3IwSPphnkV_bUA
zS+1QjxAstXN}kW#s5VT#?p5_l#(8QegKeNhWu5Ct)yWokKF^jvg1r=~c;R(NY4~_V
zyiWKD)mafE%W1q}J!9Ij{-@9i(tBD!AMXrCO6?4L1b&fR?){MIRnc<6{eQ<Se{`)V
z?W{Kyf!$#eKf0SuH>8pNWmzI(x*#W9D*}cGWj7_r-}VgW?SJ{W=Ih`NcuM~AbQn8d
zn}Qz*h0g&~0bCg|8lO3P{yhij`3e~8hn7xu09|j$RsRX9F0-z~{-fi=JyU<H^w}L4
zYyXkD6GI2{*rK>+^-;uuh8wN0LWO8lP!VM%z51s-3^}3w`5miY*J>U+abux?M{CFm
zbxbVanK_NbTSOSp4@-ckv*by*D=6q%b>5zK?jI5IFpB&xkGPSzh<`Ti&_}jK`D}|K
z!a$IwH~C?s=)4b4gdwe9=D<M&wY(Oi2f#-Tg<lcA&6Yz1CGYn}H$Kf{jXRe7nc{w-
znIBayJ9tOpyOf^Ba&`}fYjt0{#jTsvww_}MSyb`Q1~vfw@Bz|m3?Y-Wl=DIpX7&>$
zZIT4A%p&bTj_bJFf`PYE6x0?`+@wINzYWVF54HnmS&eN}Gw|Reruvocy1dNnaDxkH
zCY;=_R#P1P8UTL_tk5q>!eLe}$ErX!mF_m0#plp>LAG}=Rk^`c$MHq#dpCv;bQ?Y)
z@@KXYNKxKNWWFZ^lZca?e(D%!5Mru5XR(3vo!hA4mC6hf7+a69=p;^X3{KfUF=4g5
zhAi#(gOk~K?|S>aY*xPY8*^;Cf-iLMd;d6Q&7OKQ#$vZeQFZ90XB;!(%4GqgBpzQ&
znI$xlL6~Pi>)ME>DHS5%e+sDHP=6`3>(O3n@b{}B22m`Uu=8Ab$%$ihez~w4UAG(F
zyNNKh8Cq#s`Y`9e&!u!Z-8>*`(AEHoz$6XAU1k=F;TIE~n{CQ#x3oBgS4w13`k&O@
zvayYqT2e1IrI$|7@gj|G9VzW4Emr)cZ0u*#f^SiEK43Gms$FyB{9_OQA2bJ;g<LQz
zF@9;B=Z;7JZTHZvY$x^5)nE{h!9;ELzN!i7=-e5;04y$L_a;DYn39pWg)+R1%z9j=
zfLnT6!$&^8UR7zC2+vCfNDMpE>-Oi0jM*I7$hh#4dXBfQ`c9L;aXJsz)y^3Udsk%+
z3Znd6<5?S!I44nuD8c0X1c7vOneRcz#97`AG|7!#{s_M5<r}_Z=gytfAaKL#v*SDz
zxE1;c`pa;!;%~-bj3!al{0R8X?Mc`zw3GHey8T)pNJQJ{YL|@z%orZ9!{QY^IGLDu
zOXgSoOE12s+YCu|<<<DtNwh4j=2p0c#}%~PRdHDC`U@w+`A^KPYj`(InX6oB5^gxq
z3MJy;IWon5V;@)PK>BPV(scKgt384B<smMkOdyRK{Z#TUB%V?}OYSG~O!1lvvNq+X
zd#ox%iK>&b|2r6Mqj*)lh~%QG)$<{w1TNm|tz#ri2P+U_f-3~DtQT7CnO>kuKD~n1
zWr{Rzb4(@5I`Kj9mREy&f>1{fy%O^L;00ba#nSjDK@K%U%D{Vm_Wq|>_PwoP1Wx_<
zWO>JiP3zl*2uZq1>Q7Wv+sk8?a|T^a1i)bDluHIRGRtskQ$R$jdbs<9DPFt-l{zJ{
z31Oz&)dgFxXX@o#$(>9Sx(n(h=vZsS2ObhpcAm8B%+F!;`w=RR^=O3rT9K}_IsfZV
z0Jads;~>3U;efurJb<VAWb-<EnF)uz)p)vE%;tqFOJSNFrW(&0bvvx>if6%9_^{{n
zlI|o2!hnWe@~bwzuVrnn>s?c8&jee&(a;jB!hU5f9Y4~S+uvNL+{DE$&j}Yg(~n<@
zcSjma*bMz=bEV9_VsPgQOik~XqATju2OZ1THIBR($0nm-DBdT=O)!}3EUWHCzHa>!
zB5`kB4(SDgrTQ2?<8sLL0zLQX`VcR+k>`=InKfD(9Y`qDB6G_WM%~>KD<EBZYS}!K
zVzC(21Zk%N({8}ym4?*wV9%eAYj4*KC$AI7ba_)%XAN47rAJj_EHFHJ|97S5KWW~H
zGfb-?34yf<Ly8$v?CU_Y$e&Ph6B>j%TJ*e`(T<Iz7*O=H)52%nWz9pP^kia8n8<a{
zR=>?-MmT?|amPbNpq_r%&CSiBfqK`kvB_=*XKeJtZuNfa#A6kxAVW?su26dbqAHT#
zMNY)}1Pp<yT~ftwSQ;yUvw0eN%UVB>Y4j-@Fy<gT2(%^$8CP6o@xe!yLCPBG%$`N*
zk>+Fzu<R1VB@wX=W6)ywU0V_J)ZTN|*FfG;I6=<l3TVd9CKkzzSu;7j9nfm9x)3~Z
z>?;`YDTEn?F`RVJyykO0fL>Wu?4S)~J+0%TVG_|ZF^^~|fHGC^=B?DZZUd=)_*oW#
zjpbRHy50ev$x}B*mJw-%u>mi4y~%u!C-(BJzp2*9bfF^+)U2Z63W31M^toRwa(4uu
z8C(3tbeo|B3bY-FDG8@w8!#P#hydj7Oh@U`hW(PN==q^e6J7t?TCjznx`1lc#T=k@
z{W%UxM!AigHGu?SCn?ciel7^>4WiMsOYf0>{V0dhyMb&3yru)`1|6<HEmLyYWzXJB
zopNA`fWMsv2esgNJs%};GK%^{W5IsdwA1esJ1A}uL8?HPP}V*riN;Qh@^;RpvHw|L
zd)xhKk4^^PATU|Ax)bTkyNS9$+yl@_MU8a`r6=C4Va|I$aM%aR;KeNqM$LoEn{ipd
zs(cpNnh!U)wIiAFP-|hZA(zMWVsv73Pob2DR@Tq`Bb6<^9v^>aZL<YuS)ajf#kxm5
zLx`k-El&w0q&@+7?F8il?@gb=1`xz}K%?zFEzh5OkKw#v%G=;&3>Nx!lE8Ry8NjtR
z8v`NfR99+y@3+Y#k82~l7mem2@MXY8O<}}np?ZIaW%HfF@HdS};TESg9SBdf3*iE$
zj(O$;)sE@G2es~6=6;lHMCM297q35UeeWn<>e>%hu&@kUDDeI{snXxM)VTR{^d<{d
z@Jzkq;vLNG{j}hc7xe5@x4cb{Sr6Ys97hX3tUd1lXoGY|*=1QFV5S)T;R8*oM#K<S
z`Mpz)|1Gjn6m9ED(PZ9OJj;#)=TJ3Wi&`9Km?xZ`Y0h<6&{<>N$14?}G@xG)4OE)d
zGB7UD&a~Lj-nbBMBUJK&`?3S%BRm#b2|2-9x>$DsEI|xbyzg&3B^Qy^p1e7auc^iV
z*p&_m_tN(u=R|*{!9G(`>O5|Kpzxg;#DwX&cZRR$soT2@-;m@+WdX?ugnEQ-@_z47
zF?*iA!Bp)y4qr6$tKy~lvrH{sis>TJT6=^Lyw`DlIdNhTVMi?0eYZ1|B1v%;40u`w
z#igL~s#|8*UX|8^M@QrJ;-}0BBKA;Hsk|#NVDUrw10XC3YpNBIxRzIoYIMWkO)K{4
z`!mF^{a_P!%hz70A?i6o7}qM%H=SlxQrlr~814I28#r@Bly*+Xd-pUc8bghp;Ob3^
zYO!+rqFqS>(=qV9y=9fnpv!#Y4#b)32COmO)q1(e>+hBzr&L$<L_lx=0K@7&kPGZw
zej-Vrsp0#dfkmlUV;#SNc@(~2w*zydkBdUwPOY|1txwHn&Yt7usgxNts|5^l6&oRB
z!{8t(|7$dbRw0I%JrG!I05L$$zkau@9*X#y%gI=$u>VxFFi2G>P*p@sATE|D)PHhp
z)5znvWeZbq39~&|m&W2qle?+}Trb80_Ozc(^&dh6kaQ5qHQ*kqUnL||_P)}2U>z{m
z(Y8BdWnt{|MPm1?99CR;92$N&Fr5PB1wCg~zx@c}z8mGY=2{icUr(H90{EK(Vq+-x
zH<4C@S?U4i%{}W0hOI*n1>Q}3X~c5a9&SlcbEk7dIxy57fv9b+@Be}`lKah=i6+=e
z<pQZbh~j?_WuVQyzsKzdBocDLWsdIInj@Fs6~rvD@bkY0YWyX;#W%0)hL*OA{Jp{r
zr8CkWm6Aaz2u7q~VH%^j#DFJL+v%J|rJ!g7Mh{u`Hhov&lU#>4ka1pGEAA%1@VAak
z%cpcXCQi8IFf0YR8!$Bg`ebmnOtIf@%0pD3)<r@qhD^((hZKp~iTCU8xZ8vVXmSJ0
zcwY>PVOy;e6kDWxCwy9(I|s~0#@__5ZF&WWR~RT+;p7?5G0m*1xbqV=WW9Xe8DQ==
zf{S67t}TWj{7#PVO(1=~xDUr%N)}?7Fq_WYwv7|KCyF=mOr1}CQsDNX5Zygy6{56$
zhj1pHpe8LYJ;8AnrR;DrS8qm0Se{OLCSocK1(;(h0wa$nI$S!x!}~)KP*CJu8xvW9
zwx<)IPZWC%i^TdK6#RijX~>5!2f=717$sFi4D4&kDNf+A!&O1a;|knjQ0-6>V5A8>
z+h;Mw)}HB71&{`vhCps0XCi57S=LA!R3<@Y#|n|64z^p9mP8-s*~ow=JFg`y)Xty1
z5<0@W?GF6svN=5zBwj@}F70FJf=;@1v5@`nnlIuG>2ka&ow4LKc0rgY7pFGOk@a*~
z2XZy_SA9I=G@f1ODSItmO_H4BU^JNufx*X?Q(Bv**ra&ZgOg%wUx){fPB5roJgP(7
zA8%TVa{YLPQ_ChA$XvX{9D=^q3|lc@lt~gV4WkE!Rrd|Ge-Ho-9ln+Whr>%hL8M+M
zeQ<7eD&z|<8+ip-Qk)(=XE|N5VuZQNVX2dxsckIax491`iHZDq-%mED8C&f(EW1EO
zI4R&oT9i1p*x4_LWnvUmj5WR;HN<C9;xxohg);5Tq4Wh(h$)(_dEuYXe>{RTwIiCH
z;1F(;#ZOgY#hXGxi~xO($QPW@y#$IWVmbuuJxn6Pld9QyAr<=YzpWRtWi!>2sQN&Z
zavKC^W$HS_OVJ8KjDvN_W?2X746p|fqy1w=`OANXK$<kCB@SlSc2U@ZHGu*>P|^vt
zO*#Ox>Lw&h%vYcju6sYt6_cYQHHtTZu-V^3hI<H|a`jP$;Hmeu-&O4^>bEz;nTguP
zGiy$UjJ_k3fXgivIo_F0OP6&%@fPzcwNurWZfB6lA#=%uVP-*U{zE|TS8Y(;VZ&mJ
z@X^0yA#<=%!FDI$Oe5yfjx~I_bwYjB(NcLk)4|#L(2pjmX^<7)Cih7(0V@wEg%*T-
zwv2XX(*?`%uIs^B#1$=bTK0$EH1R2B9i^88wk2g^bG=m(y4niJQ=4DqT-ATr2$Pf?
zxA%tOPHsPqPKvB%IHXPhXjLoR02`2unW*9#9-L}jW7M0hQm39J6pi-v>eVU&Y<ihs
zm)wRlc+yfw2IY)9Z0|$;`(n*yU;4}g#+%zr2Bn0?K=75P+Xq{yXIl_8P-a<()))0=
zwRw>m!;-PBW;ae(7%xuiUH3FV&IsTlJ|z@_05^yd(#OI>&nGBg-mK9`OCIi3f`MO7
z?EMKc=C>{yaC1-2-7*FIrTD*D4(mqtd$awgn;||T>KX`^J35fRKu*-Dq(79iCnO;u
z1FhT-)%b2+DAieIH_=s(@-~*M!iBV{Z#?Xt*B;RCPcJ{?4Q}nOPS?B0{L!xym-%jX
zRZhZKeRD-Kff{b!fhsGJR}WnKuF&X*e|!wB^sOYDJ&)utFr<36=+F3Ya%$`}tBA1y
z--3$MaPDK80GbQ4*GTZ+oUP%59SguaoWTC_6`89TLKtZ!dFAx74&VtE80GDDJjrT+
zDO|7DC$W2xaG;q~a9lzg(R8ai>-uBcR2z~&!M_k)md@f|2&1Yv2D@}pQ)IHtJCbe&
zNp~gSafFYN8E77H-~N8%9tqkkE#F2@ee~Aa3&TJ1()(#d?zgDz(C#=(!U<elxm6Gm
zDipwSu7hF0Je-zP$Nn15U%6+p4MiOK&A3?FNHn(m*lL>61ZQX((9xs8#2j|gkAH97
z^vautPuqobyyET66{^HAr~pA*&@v~$>;fdS5aN$oXdzzGi}couFtZGA35rM8UHkdX
zjJPhJ=jggfFb-8!b|X12vUG^E*)agNCpRZuk%kAMMaUzHj7Y<GUxL$9O7rUvqifKk
zror&;uj(rkp*GPdR1s;<f}V}A=F}vV3nlV4inmT2$fOJxE|egMsr;c=O3I{&9qmci
zcMUJjnzE(?o=(&y+>&??<Rpw0Zh42AnxeY6i-JwQ6gd;wt%f`c08jp`cw3ZdVEweG
zstQ1Fu^<NtJ4^J*B6Ev-(q2iGtQSMX2Cj#<Uip}n`@jkxj+CWgx7UKpE#LtA%oS@`
zOVuPWxX;XuQabBWBXJ8f-U8{77A&lAi%npsd~5BEp>~+pvi<ZpT^GnBF$gcQLJm7A
znBkrh?v_^F<0gY8T*zxCiL>8rpk%fhv-xDdfDjo%)x8ELJNwE^V>r3h31zYWNxzXv
z;cY97NvN*{d7@O0L`x7fSEuknU1~Tp0bb6dJH2P979!0?cSQX8C<r3XI<VxPVG;kO
zOc1jgs!9UDte7aiA>9DGB+4m1g7M=bg0@x;)3jJXl8&K2{c~S&P63LK_s8}#J7=#P
zWQGFe0op}50RM5!Z5t9%`|TNPvKOr_^z+c}(-0cvxaRX}MP%AZBSja<OB-+b2`wQS
z*m=TqFi4mQ5r38*k`{H8+ra$9y|^U?Fi`z&bHu^o14Ja*>>mfV;mrclwhFia7IAo-
z6OgbETZs&0pG?t<KC!lx{y8(6BzI1N5|d@n6!D7`m*#;qX%8PjQ~WZ@r~I98Oow54
zOp6cx%sct{C*3|s9DfNdgc&}N$;^<NMKANX8&LTpvXS(6`3QoK1(z;6<ThCvq*SBn
zdrPA3`=}0NwR(0r_m=a<yJBH460~!Ah)4hZWZ_%d6dovRJZ6jxP8!2mxSAj**AVLj
zkWEU)&lDzaleQ@KtU4R)Zb-wap?aV9BE@_;T`tPBsWSjw2i_!xQfGD|fa2E!vUt<~
z1ti1q<t64&iFySeLv4ZBawYY&XvIR4vFh_K3bLlGX7KAzpxH2wZZ|sE)n#YLEhQp(
z(Lg`Sm#(53E+WP!0E)juATmPX<ZsRjw#)yP)#jodxz1^B`8oXxX>ctr6~tZG_cb-t
z698dbFk$b+kE}J25aj@pp|ED)SXB}u;EcXlE7tCYI~%oDZToN$>_QD*Vc5mn|7TKP
zUo9;mwPD=t`4e{zX#u`T0*mP<<Sduxm;}mtjNXPPE?lTiPtBGL+GqCSVqR^?LFaoY
z>O*?V|5=1jj~3_aCQs#Yr(+sh<T3wPgbh!5P0%J#uOnI-1eq`zg0$ZDFFX>8RPEJm
zXu19|F9@~eLD_j-NwJUdl$q)RL|;-oVhFeseXbwhCMH_vuyM6p+e{c@W*&G~3882M
z1k8=1NH?^g>u`9!KF0B#QQ_PgM)mxM<v*cou1#VF)n(>7NF|p_t5XiF(p9Lut&-Gu
z4f{N#R84jLtax&O?)Rw@6or1j2?p@M#3R<*iy(n}lc;+EJLVJ!IMZI&eJlveu_j8n
zBkNhz%Z~z^#>z=Qe<z3D?%kDI_D=lKz6riXTE52^v#WcZ2s01<YETV$K@^?-p$A=P
z1}t^Hh}{rA=n~@nvigBP;c8;#6+7_<)_>I2Xii?X*g>iX)UHjZthum$GDC9;6D{j>
z7L{wXn~vGVWlw-YI^63!6dL!T|Jbj<<14<n2T6w8cZiI!--a<Is1I6LI#Me_IVbV~
zroq2$N1Zo^N{D+QFN+I$MV?gc=@3?;7s*B^!HD|PGr&jl)_^t~cZB#aQf#rJAg7#T
z-iR2|=W`AK<OJCUUT_x{qh96rcgY~AmO(Bw#=8HSvv4Y5CKP<C3>e<1RZuZ)o8dT2
z11={TNHUy)QbYVf{}H(in&&t^I+*GzMoqpk7MCrf1GuO_^fcVRaf^{3=fgv0<tL3`
zPmDgORnmvE&7@`5eSMkotBQ2>l&LjF83AWu4zOk%9xe1>MAT5Fa0W|GACr({ZrLA=
zBjkUAL`pW9v?H_H7tiBX2`}QdL<#EGY9~5fp~GkcKwa(;L`U$yQ{xf<yOh#^NJVRN
zM7uh&yt1>y@r+HwY*PQn^OUQwE_GCxndiNzTi%xNXC6DmnEy!B)vfdwT{%6$Bv4Id
z^4GFSMCHhKi=Xca?!8{2|G>ugEhP3Y^uP3tO_oo}P4W7)#bzda-`-Tp@1feb4}2<v
zkoIrT*`aW>l><Ps(Gz+AtOloxY{foy&Y67^!K&9~60jv!EJM*ejVFh`>vk8-xkQqU
z$rS{@Yp|YUV#c;$i|1w$s)#n^sT<>*0<Hly&mwZ8)XX=ZEtDb0L72Bey2`kEnm8?p
z8SC$?P42(QytR2NT}m!ZC`^`<^H;T$iKfTyO=|H}6=H_J(cCO}W&JCLNu*%Jda&|v
zT<$JfJ#S6wN-NHvkl)#(9rJ5rW<2WSr4niIuf`G9e7XdVT=><XStKrt3ov=)J#Z&Y
zZv``M#;g{bz~{lwlWh2g{EEzhf3@3+1c<l#9Q|760I|ju0=^GW_$rfa?JieWMbfWm
z$wEM`z|V6$f_lVX%zo5f5|3C2y~aJ&oX^6>oj4s+fij1DO%bJ-#;UVr%Hr?Ali#IE
z3aS}%z!Ir@nVNtP)W}(PK+1wOXeSK)=v`Zot7Qb^<hkryUTH%e2mZkOV@2I^Qj92r
ztkDUGjsiF!sz)+iw?vzzxWz+(sb|1va9N;ol^BTg&?qwnGCS0ukCLb`<q4xMBSv&9
z1NRt5r3^4FaEXiNq67m>m=i_aY}X<LqaiUiHh#;!z;3D+%HwvHisb)R*y%<dC8;L{
zzjp3jJmA1L7pxGRiz(cVLo4hb+;cyRoA6TA!0@`PkrDMPMdQk+K`K(Nq&mUIJ}LSv
z7t*Mkt$z}CJweAPsBhdg+?L5SEl^qh`}vWyKjkbQDxd)`=R+B#v>1fWkc>tG!R*5$
zkAdgcyrwF<W(&eNjZKLO^~u#XMB3*Us2l)U+rt<Xq<DZ-#ncIEs<8oV$-HvK+)@tH
zghpHaM!OW6cPGoJ4jcT4dYLvPKvb~6uBPq!)Bn%khsg}#Y1qvEYFdNN&QMhSgt)~)
zkus_5v1-t%|ImD>O_d&~y<rC|v;To<z63>eG}?+oP-z&$<Th_vJ%pNA)oe1h4S$d9
zZ$X7vq~H&iVHZN`x&3c2x=A@&N{oiG^e#<JN7Rf;nEVL0V8M965i5%k*kp&K^p`&2
zRFZ}@XfBwUUj#UfF)TEv!U7Vc$U9c}m*UpeBF^VGyxe1~KNlcE(6Z#nD;^YMWnBGx
z-b`=QWcyV+%n3svHx(ZLLDO=G=T{BGLLLe#4=9BcL7>B7U%CrizOx$^pGldN?%BFC
z{$e94K9Ie!=($JJByDP?fz1HyUBup_lwv5~T&g4^;d=TM%P6&RDYgVi^^bSI<=R0l
zYgziz{KR+8#@-nA4Pvp0g*=eDF_oF;bswcTxU088Nh-8YaN4W_T}y_RK+gNu_%U|)
z=Lui!yL?xc)51?6NfKPmv}rU#WXM~Y&9$<gdJIM5`0Qg1q2X>MTMV2$9sd4d+JXZ=
zV&o}W=!#XV_nBek8UodUvmK6|bp_LW`V&ekX}DGqM*UIVN)G0h*lM+~RiV(nLNBji
zQdtCh>Q`*oSv5FuY6>TVl#wXt!sIL~G#TNsLR(>@2bq3s?5>ELXer58&~_+`py|Fv
z;v3dF_c|pd@?$<Wt8mzCt`YXmA3zVd+yK8jj&OxqYJh9?0$MrD<6~Iql3YIlVvKHu
zz@GuOSq&Q)<(KThr6-KfLrYQcel!M)oZf`5Wt5^>jx+3@5>|<JT<!xqXG->#FTSxa
zle{k~JD42H8Sw#6C6-gQFo?fQ!qNP_DCRq7P%h(g_*b+GMPnXzH9XxatAzK%Ky{im
z=fUbvKn@fm8tS89{$Y_^rYT>Nza)Bav(f){32>NKdLi+NzyF3`Z{vNhnN&HYdngUx
zy-Fv!rL1|~Kg)NGR)4$jB*islY89~3e<^>0+?QOs3}p7^c+<P1@c_j~X8<ue;Iq0#
zpg>NGn7vv%v6-k$X1D*<z<t#)-Px=<I>&U{Uk<ves|$D|Fi1b}Q~cGgN26HApmh%-
zKbQ|`uBD&C^#3jpfYCtE<1Bs;1VB1mi6P?n;+qk@`13w|-Nq2>=D)a2O@0g+GA>;Y
z*;ZJ0J4&KL3!-lJ)>PgG-v^66?$!Q)<H|2hrd<or{CHxpxmR$c;r>dOX0AZY@p?jY
zFt1&;L{>C?JzH-+ST04S5gpAvu#F!`{TICzin?7f=|l1;kv*$og(=kHyiMA5PcKa2
zqX-`7L#`(pb{xhi{^dVby~ejqu?za|rvLQrbbKk?=)oucg2-d{Y5!#l=qN(Yl*XO_
z)5N7*DYd;?a7@-!7B+9gw<7KMe2gQRsXAHlgX}FDpowisu5LVFu4myUOgCn^oCy<^
zdm21@qSn0d&o(J@%4`rQFQ=cmUIUf*h^cFmLtP^VAxr@NpL@Ki@VU%l1x_wymtdV5
zrGsSAH+&q|tL@6%I!+kGS;o7dtDlY~tX;rOM9XK)1j&?QkAO)#i&dw(78QJU3Kcf<
z;c7KYnUajN1N2Vw4;!tRlv)}T1JAoxTo`|SR=8<ax>!8{bZnG&SlfwMS=BEX7vrwv
z1B+3g{!ywjRj&SJC2z7_!#345cbd);iH2*0-`b7eUh<l}(+WKD?E!*6?T-tj?!1KX
zgnL{~Q^!K>pFLjWD=M@r=#T8k#VzbDr@_2w5}6%@KI#_VcYt;$sx;n2opWn|8{3Ts
z0S%Bs$2*tyvTK^6ImY{$^@@`P0*_(WF##G{s}#=-80{1vV#V_pII!}%M*sdhXby3y
zZTxyARRuHudlOb51-`K8rF}fFKB#)imkB))2yA4fc=KO}3KRf$MPZ1P*{w&2&2MQS
z`oyZ5@Hr|eL31R3zbRr(ziho@7>i9|#G(&+F%%kdDQiYUFQ>;S-X%bXd^O+P3|YL%
zV~moV)7({U7Idem(iHM=XtliM8RVz1YG#ZsS=Pi&A(>&Wt2aTZ$Kc=D{D0Lk?Ce|p
zw&Kh^u~0z<7c#PB!-b%=@Bz$jVTYo>i!t!C$jC?Dc=f^&&7sv6Wb)k8*vAM5V9pDh
zX6nlYTa=N52rk7)qOg!G6Zg0o3)wjBW496X+T}pf9MViI?tT^F!N0i)Ln)1!p8&(D
z4QfSpBu}T<uWMn2(aXUuVoAMb5|0eXEeEn6bED2=WCZlNqMt|^WYw<;y+cN;UEwR5
zjt9(o2SM|TX)?h>K<_P@R$b{_l@jG~%~3eB$W|L8IFfo`J7~b|y1fY>t+(%MXf?Fh
z9M8BCYq6|giKs&FmiplkisyQSokDpDkRF1uz7ra{?F|E<^+7VjPgSeA2`<H$q2>ii
zi1B;k%|*2L!Ts=|A7mX^oWZ|=>dr;raA-(bt+kDq!E{R*39@qXlBf1eHaDDFbSO=!
zQhQHbkK~|!GRv}NoxE8~-elo?@899%W?9w)m-G<JjJ*qd2(za3NgV(~?~wDBRLXy<
zgyIKDv<vO^3}%BGi@fSC*gEdsljnLra4){1Do#k)Vy-NHDt*iZ(zcTO>pXt-xT4o^
zJ@8`{;o_(K*0W&{6y}~JF<<Ng%VO2k{ySxlWG&v1{aUjS;;z|sX{wtl%Z}dz0D*5q
zS2;+`<p7!(V;Ttz^yNg>b^hBjl2w7H>VR5Dtxuw`XC*6yHntA~>1#zN&wvi0bke4O
zWcm!ry=JJ(8VAeI5*>pIRivDy9Sd|0w@D0wI^5&gYAouBW&g3be*n3Y#JSvf)hqEF
zA}QfCvKAI9FaTB1Aag>z%~AN6M2nCqht8JaREq{Zzm+?BF(9~_v>R|!gSn>Q8~vHC
zQ=C4xojmO(ib13g^qC=F;yU&F0g`LIAAz_ddlN7cV2!h8mn44^N)Ld8mq<480f%I+
zj%WwVA^|}RTBEqlkjfkwYr||<%=wR9E@y-6|E3)uFh!QLf?q39PWXor@4|I4{{`EX
zo055u&dRE`4Z0Y!zD7r<XA;&HVr6M1w`RU<Bn!&(lb*y>R~E}mX_`Pl%&jJckyiV|
zx}M^YJzRR6lxc3K$$K+XU-Hu>ZVH9Z7Hc=WUBA~eRXyUh$BIh-iges)F;C10&7QL*
zGH}fOUkopmWp4%k9zPd>7L^ldK(QBOYKArl&TF)!aBoP{y76v5&(qZTq=O@#qc#y<
zBMsk(G;&C8>c!!T18N>2rYW70*U(Xx_v=m>h%xzf4o}$Y5N^R7XuiC*AKX%rh&T6P
zTZQmtoOIlky)0XxS%Ayr^gPNNdF~1nP#E`+T%TUg3COL5;KI9+uk&8UxKE7KhR34}
zg-%4UX4sUudKKFR2MM!@>tX@uAYAgDM;Lxup3jvd*CSdrc*@*n+m~Nrh-g(ZoQvqZ
zrp!BYqll>|m+cPzH*KC$m^%!`4dsLg%{#TB;(=SK6rXpC*NM7ptMmSjH<|3SgSdDV
zqme+q0Z+LJQvW1ieXK`rluse&KQfibO&HGk7$LPlD43_k>}}E9eDviBv$YDJ;1u{M
z4l_@|HUsX<Sw=8GqECX~E^fX(q_Ji;(w!<%Py+=%=PHyGSc7CD1L_#|U>vHPH1&UA
z<-O*eN$|3f{O!3=YEjE1-vQlq33f3N^5N<VT=_B@ld5RP*Yi-8fSP=3nygxFi{?uY
z+Mvh*^L$oChSeHUBEK`C`p%Ga;C&PriGHKkJ?z^;kJf(b&F7#ZIA#FbX6^*UBXQ8a
z2bg{Y+fbYvbp6yU&>li4IdBc!Cg^IQQ${JAF_&if;WndM{e`XfE?LqIVYzvA;tjtJ
zbD2^H-POh%fEIefX#*xE{NkXpUm}U4VZY(Ti3OnFC9Ows<&uCm(ki+26{wGfS@+xE
z+p%=#`m4exKT?T5SkC7m!I`-*ko?Jsv$jQ7_*%kn?yMZPq*-7r0JRGlqu<7Sd|Xa9
zXzAaXWM>Rq8qf@tRbvX98-h7)kn0m_5V7!&wDo|08Bw#X2GL$-{&tCiIvYlgQ@pY%
zD`#%R!K3iIJs--Sv|<LtFX%&jZrj8dSZKB}M@fehqX$bWDwSO7s@hJHoZ9|dX~!F^
zHC@9Q5nIt}YlkFjP^QB8+?uS}a<H>@af~LFfib5Es50pn^g;vQA_oPJnE5nxeMc`j
zxhNEr|MTrkcTvb2n;1(rASfd#ds`&BR{AqiCcji$_+Tl7O-fK#!s~;DU>ZiF7!N&3
z#{I5))^xWFB=wT79XP&F#$u(YQb54GFw3!_?s8{;?kv9ZJ@17SNzqNdDkfA9Ui_Dn
zn(&<D+z{~E^WiVVsNR&lqBXdE8kGro<{3YOc5d%s!OG3%cn(e}A?DJA2u~wpSUJba
zJ*i#oxo%IvY|-@kzmG;uyawOSm!F<vR3-%4?(JckVQK~2h1HAfavhfDZt=Cj=aHA@
zzJC)-7C?sxWf#aog-zWYu@fg!NU8;!;zol8DiqR|R?<}Re}~FDF|0gUxgH!|ct0g@
z6~ir0XI~*jA}^Q(IA-Az;#^e4JkH~fv;#kF!ptD}(1esO!Nt)KV4&_bp4h~Wx5jUS
zOz49S?s$Mjd7#f=Tgef70v2pZAVQ!stXDsCQkJhjF40fXDbmE3$!FMvJD)Oyj*n44
z1{*4myeonk8Fpa*R>J-@`FlR4i`WBpDoTIIWt$kBNl?>MKAb%zXwJsMwLh3up6Nmv
z-=NmH4nZE@D4d+Nx?aqSx0EH}#{+J%oNY_bDA9MH=fF&LkyQ*2CH*A`15^2|M%Ch^
zsS%w)jXHr^M52}}6@0zx%K3WSs?7A?O_n-ODZ$+^Cq|y}Z%lT=2p=Kwp~_qAdkM7n
zz4(dTz*H>>X|>G96Gw=`uoSF^{RlfG58B<Jaa<SIRKn%)Ny8zQyUxjqZ1uUkQj;AE
zgfy^jCfc)NEnS1s&Mf(k^cV&-03$@XhiBimaY(lRPt+2;Pr;*K%MBH+<34|WtaUo8
z4z_+Ar7clYVyt*pV9N4hw^Jb&N6tX&1Ns@7I<YxxH}6(PBUGOhD;{7(Fni`0jJp|p
zLzJjKQ7-Txc^(EXWd1kI<<DSnLTa}F>sWwyouopybN|bj;)}ah4jYA}#|6aULwIo^
z^&eS(bx&rz>`!Uh7%|2WIL45C-l^Ow2h8hNVL-D){5kopS#9%v{mir2*M*5ac`0Ln
zh=+m4x<nwGEkMfY1^A3dKb0Pq#T68(0FKuMss?6s(_TqGmnix`aU6ueQn4-~rqg^&
z6rcF8R7;H7nE87V@#o&)G39vmDG-TFF7d<O^hwN8)St6TVnYrcgeS9u{V5t`OT%qz
zV@Q%4UONiS)Wv3X9r|^Ym806x$aLR7Dr_xaqmb1~dbR;ms@pFaHOL=JIYgvq+>$UC
zyU%eManNXkWQuMX`M9k=_KwC7LVXlpRCU>dDh<-wU+?UZwd?(!-%w*!<ajJ@%X@Md
z!RJ9_9u&fA5JGDgCMAL<1w%X1%>(s?TerX7iNQiE%TJOqvmWBPe!DhB^P2uxW7v*I
z(TRwfoIT&DNPug1u8=+b#>~&@G-EYs9N*s=S1E$_<!t^-+}v$Dfe3Eelc=M7N|_<E
zrfFs7|1{L=mlB2It=#1|%s$lB8l?~WUB;r`w?C~Yub3HSEsmDIiZ905E*iN<a!3!B
zhVM@C0JY#J!wfQ)yj%mMR=xtRQsCeb31fo-CPaL+u`j_^5x}g$#)Xuj`99DtGcXW<
z;ru73bUpd0?8;YXd2@?Cg{@J#^CGE5;MUY<<^V1VHYlmW=a$8Jvzp~8iG!@KT@=}4
z@Uc<RKpQg^fx0@a5WKNaBF6n{lL0;$>g6ZD7`uXE((99p^(=T$F)eX-@#qASM_UI!
z6;s3NJ4ZN62HfEuY_0y$e=(SF9~?Rx06mYYzlwdKZp2GYGo+YkF>=XYe%X!UDN-Gi
zYFZM!*IF;;+t1^MmZSy|k^#+-_<Lg~M(8JGz^IrArHAU|M$*G_+h)ZNRhuYmz_Qg&
z_@^BaC!i9J=At+8__eimR3hM#AcR7#+i4B<Mv<h|&VuQmp0uNA>GEt^I;N;eEV$5a
zL9%m6*Yn25#TC|hXPu~&=lKDyFhBEG?pP9}K7a-ZceoA-{yq1+fV<sUd#!LKI^3L>
zxiWib;+3?oZY${G3$6{t{p}zS``^hy*bBCOyg)CmWAX%G{}+L2SZIz*QbnR=1k}6t
z97661tvLqm-%M%uPPQvZPz}(!3(FnKTf=13BDbr?ihr@(dK;q*?#FQu<C-}xQJn>x
zBb5?%wGQeHL?xE#sdU-HHH>JS`At@~rc{kJy$Wdjv%9pEIDgAd?oTO1ex{?k2XeOo
zO%OEZLE!JYB-XlG8nozT4cmV7=qwwM#aZ{kL+v@zflf|0>#A({^pi_NQ;;+);N3kM
zW`56gKYsRaSjO?ij|3{6IJ|zqTNS@f41&F_P9!gR6pDXU1MFpx;+4VjLrJjb6-X8n
z;CrY~`6jEA2Q4>8>Cdv+&uZ2UX#^$JCu;{dZKmfYDu{*&GF0i;H)Vm}fr@Blq2ElE
zn(T}?@&rlCcS=Q;(pplA>!=`A5&{<u&j;dye#L_>G-v|8HCd^|@Slvv3UZ~#_Kk9w
z(Ne<wkPr7yx$Y$svY_SAN$GV;#9jmoh%U<JWX)m@?7`V*)f-}i?L_-`;%_|S6lo+T
zgVa@vgF#4RZ8YW)Dz)r`EYsM)U1;a^>5YwO`@p03bba`proUG^NW~k*N#ib5vLem<
z=PIgg(c|3JJIwbRj$IP?Ta!}Z=iBvDDxru4983V9Z->t{L&1w5?<WbF8(aUE1e17~
z=`fLSECPl2sNg_yD|^t0%%(8<gD0~6K=*kD81FFctG155HFgre{aJDn+;R6<O}2m~
zHWcC}S4lu$8bU~~@OuV;j;a-%h6_=K!O$%?Mgv0&fY&;Ik<hX%Nx7-dS~9h?cMM}j
zQ2MDbnWQ>+5a%SQD^q&nzGN;DW78Z!w`cy$2Ao^90!i>PaMhR$u3Opbu*~5axch}?
zydfMS5;=r9rQVr1iIAopQC<VpF?MfPM$Ei|kIUH-RaE=k(-J^a+-G99NtDA<9geU&
z{l8L$rCB=bk%YBVDBVribBB(JQnbmq9RbAfv=)1HWd^sfl`EGA9ODnzJ8J2#YPC&}
z=?w^*0AM%TeHEv?hQM)Xyn~cetidVqm~TlcH<<)A3{in6bC<P?4h{z#No2<q8iwX|
z3Rl4m{r+;-=9H&B37?Ncb<Y`VTZjb9Yb+YfG**;Q2}x`Yx{1zUi`l$allS$H(9UQS
zk|P3rq*0cVA@5XZMBlorxr4fUi~P<~#KcyQ`$j;}Hx9F5>l_*ObU%yYLgon8_~}0|
z1=9os%wdJkr#37np5`g%8&ff<C}P`@!P;(diXf;u*jkB`rdmdbz8b`S=>8M!Qm-6n
zryX4|RG%<ub_a4vUt7iGwZw+gjrhSD7wFt&WH7047pKjk(!Oq`W9_%#0@|*@`OtjW
zY6YJ)zQ~<$E>x7=K>;2S>98t>uee=ikACp%DYTgb&zAU5M=MPDSTG}Ob65&wkM<0#
zK`NO6@*X}@?H)EFnV@yn(!dm_Q8ek}GV<C1AU4t_NCVYy6YW!p`*GmQ<^`kV9g@Cf
z4|YF%J<68xQzIEofbC!^P&kKCm`!onbG8bgek#qA$`WzR%N%fx5WPW55G^m>5nZGu
z!UpYaD~-nY4tX<`W@PhZua=k{q=R~f5MuRdd9t4y_qd`<2A+o3bs*pfL{!CCq4!gu
zC&k?o^SCGf6g<I#)1EPvvN@rbSBQPlh;_>ku3?UJP?`ewhj}qD?Ct%TS}V)@@e29!
zAkPXays5e9c=kop!TnX5&94jf6<y9yX_)t|rmWny)jebv1sm4@@II#BQyNi()^wq<
zPpprQ%0tJ_qhcTd8c_x^y5RsA><H;A#}*P(u4<dRsy2A#oGln{$(k~n$00e*kmx?y
z{Si&|b|RQxd+9|Fu~5^J+MUP{H5ehslJ;O+IWjTt>1RA)Bl&!dY0H*oq#~Z%__cBi
z5tu+xdI$@I(P>c&KO~ZML5UOb0W7GdD|<bXJc)}v8O?qsC<`_4D-|;I=8-m~*@b`T
zFXf>MPWUHb0#b;?ydp-+u2`K`?gCo44!-&a`Ut|m1D^%S641oBDX2RQ1v1Qwk?(VK
zY#D7Ge`{B~CHs;A{cIi3rXhKIQGA=x#=WAM9eek9xh5cji|RRnth#GbGzv2o{z}7>
z1x{G~-qY#TD%wJjF9s;k37k&5fv`Bo(|OUzq>CE%e0F)Y24Tj`uV)d>U{A!-<+2ye
znwS(z+n7^e|5Kt$DIZ7iu!+Gc0qxX3N2mc^B7jd$c9l#R>)N#t0y4l8o3AG0(ONe?
z@9z06iZZ!$_ydUWQ;*pBfPKPRb<)57Lf*jPSyl^#-Tg8D=WzeLGc)d1b}Tl%S&RSE
zVZi<p&gYgv*NttcCqM+I&^_h+?LLl+W4N{|3BT6eS#4mDTz4lo;bfdW)GF{as?scD
zMf@eTXY^Nps)2ME-x^3#BA2)$DGH#4fV^ED#K3?pibU}L$CF+DJfI53aRupjqt9#j
z*z)PSKDrW%K!Zr_7Xa<XZ}3q-<04bT4Hsw+YJ@<^eZ-~v3HAWf=jnh$X<~h>6P=48
zb&54V79?IrqzDE3P>shl*7iidHiB$Mq?F%Z<Wv{p2~g`VVW^vDkz07k9`Mo}43LcF
zr@?HK*rqfu{jnYd(0VcxDH8Y$aI=Lj(`S1=ugZ42uKF4>E7&f_P^9lsl-fwI0m&e$
zL0QmhNpMw8G2^xWrqlne-hYwc#EarFR_1`oX$x*}U_kAu!bd-Kexs>5Gx)_z{OH$L
zt4Fh4RNrIH^LT7Ef@OxU@g!zZUxHI>)yk~&ek%Oqv<^&?k&~0#p1G8}i+QY+4nOVK
zNw&dH5WKwZ&}|`nymsIoHxk88iMju;88`UI_Rk=7PwKFzju&!Ao*r>%SLjiQq6NMI
zLKB|`PglgDm5JsJsB}+SFFcqQp^N$e1V~AUbyEA@s3c9R9UJq&QU)prZrB0wx48NJ
zj$^ie85_<duN!TIL1E;QTxFYKZ!2=Nb$s)NdPnEfHWa2%)D21EjwEJ7mE%q9yrI?)
z#f~Yd5}++Regq75vv^ZCFX|~=ZZX7ml%C8~C=1UfZx0$<sZutb)ZI6ykvD?DSWJN9
zi~q|?EkRTp3-XzJn*5e{j&8Nc8zn&p5}HQhmykSxrVXLws+8PwT{^{`c7+>rSbhxN
zvzNA8Md<!l9JSaM_!O6W6x<=K`K$QD9v%Mg{EQ2PEc~-&ACSGLVw}O#hj|5iY#AmA
z*H3pd@c*dAf!=79Jw3`rkOx7DP)AJ%F@Mz!O~p>}e2AiQhW|uvJP%g&U=>&L5@6)4
zlqI<7oz9v@L@#ir$-+5XyzDRR4L%FwMwxdC>1}$`USVS2J2kTJhDEUY!gP}=`oJBg
zk)<tNwbr-pBMY{&T2@wejj%Al)Q}L96Dnsp^ZQ{iYzw9M)*43VJ+S7Jbsxo>c!tZp
zN*>w10oNqT8(QS%yJq8nZSO#C2l}3v>3?)0*2PDmyqVEEH+Whak{G|p0c`RN*3Vi<
zK`_UeRhSPL$cx}Bjc^Hp7gM?U>}58*ZsTh-{(P?5@ieH5EvIeYlA*xWR-J%ODkw5i
z?VI^d!K<aOp_*v(!hWfE*>bU#B<!AB;XrXyTNrvvjN?t2D2XKDpCFXhlCml>HkGHP
zvxmpj_)qzE<2}ERpgBZX4#HG~zOXMsPs_YON14^wJ&hS>t2LI1XOLolv~B4ATPh%;
z+*0_zfV(0f)?hEV+F+}ieuiB6yJ=u$PUSFpcsl$SRL46?qa{vEa8$YN&?ueG5IH8g
zC1>^Io<b1(fIMqw8UzRL!reaBP*{R*efxuBX48h-Y8*j0L7&?aR{w>5`vh$-f=|d9
zcuUaw@fMSzzbW2%AVLlYKm3o3ar@bSgJ=YWUx80uIeTA7)O`40OHe(KMcxt$%@A<~
zKJ<Y)0Qko1$Q*w*hovYvK7+}X4qz;+msBjI_mvttV&Z#CBJe$ujVJSD3z^L@CqU=P
z1Y##d^3a2VzZFHpEClpjBGb$(a~OR%gJ?ZI=?ZMCY{fC=|7i{>J+Wusze?6e5q^8<
zH-~6ST<&E)$Y0OEe<8a93jN6sJz3xu%N(Ue>7)>mz&g~y64R^C+#EN_te2V25@#P0
z-)xdHltSKvWy`C$kOBpa1Vn<pXpTT?6_4<%73kE;JKxeg1v;dhp}AgEgWEMp2D#Lm
zKpx(4B}x6=gh&a{=vxTAr>|9`Cbd)D_|^D&_$Oyq^bXtn*&H!Ql_rbbHRkZ1g@r}j
zYXylg=%Y(-fQ2s~@<meuV)uOY!4GAWSTdLF*>(<{Aj%7dp*OYp!c(+wb6#6{T2Vkl
zt#zR?D0E#~x)5N2+p_MXLAr$rezOp`h-IXJyHR~+N0hpBYUPS6n?0x4mfix`1EyR?
z8E_*UJyJRoAJa#pRd2x2$s*7G0?>FD>dJaRZ1<jmVxXhi&DXRI>*?KshM;x66+fLN
ze8hA$C7?AI?)tF<jVmWjN~&Y7qR8K-0UQ*JIT^l$bX3W3`n^8Q(ILZM3pm$bj8KH1
zv1^~%57~4Vr(|iW=V$a58#+6HG`M7uma+egYK!6FYA_1{S=3k|0f_c~?I2GSEzYfY
zy9pcfR50ni8Z#<2qvTrmSeI4&{>;Jr5nu}_<)6gLb?g}c0?LUy*2AybO|9k5uY`Ls
zD0@JC&wkvK0mNYj7h-?+%b<3;m%_%*qI7!N=uHk-X4W@kVdoZHqaU$lt~LTRh;}Kz
z#IVqjS$D2RY64{@Vp6daDdm@|KD~FANW?X-xz8qB;jw-p%%8=JJ@IXm>081llrK)g
z_JVnwklM@JX{F1KU7(S>FDK2}h2WQxqL%Xe0-nHi6`z{c_8&Ha1<e6_Ca$WMM!Ea`
zr4~CEFF2XFO;^tK#no*elPac{ltvU#>jbXjVJU44f~6sfoO%2?!{{wcI=#ZJr1gaV
zF%On?6%6il@mt}~1nbbZ1zCY}I5TkMz@(_45LGT;FQDemvx>*!qEDjS+val5q|R!0
zEdK3jw;Z*m2ZoH8rdlJWpW{>hYIPoctT`1QyZqF0TXUndR@&=`CG!9rLIL-LrJ$$+
z$YX+=BaDiEy?iBm-L;H<OmA_O(P}fboc`eD7d>>{%OCs{ctlWUsoWuYwG*`H@?-`$
z0^Awv+EqGfWrLt`w~MmPU+kRyB8;DbasH?VY5!QOEx#^ck%Quqt<G?*hG~3lv_Qo#
zDcj2qaT>$`Hq5CpvOlsolXZ5DfEqASntx*=GFy`4^Td*SU$DNy^d95DR<<?0cArX3
z^iASEdk#r3<g8Ju6ozw9hP?0WSc2BEQ@`PljeDQgXCtR$?6n+wQ_JbBu_S}UcR4e;
zLuNY3Q$@d&Ot(n1Rc{xJWucfh-h{I(n>@Vi8=A0Ej#_97NvZ0KeqC-dPnYM=7LN2Q
zATL8KY%p$s=3&H*1Gh5FOiw+Kv&E_ErX>;VQDIkRR;Q2{oE1@Pr{HXd{MfV2E*V^k
ziKbw?X-l_ix=TZZ(~bcyIsWNXxf`#X)26p8CW$6KDK3{a2by1J4q~J5n`CIViw;+#
zsxF6NH-=LJw$=rZfwEz?;W9wY@Duvlsn9utq&Gjs>4)R3WVcJ=+ukHLp*Bq!YGkFB
z(H$$+csS|UCa7;y!I}nQE}+3UX^1-cH^?6kOjS?jv<LFuF0)@W^C<$r!;CqG8y{o|
zW9U5d5ww=1bW5Pls-`=LKSKw-`7TiV6gp|de!Y5w$v4^XfH(@|FHu?}?KBnjSFG+o
zkppwM@D0V<{cGeEcb&VlJ@w9wZg(-Pu{vhj*vW7vEf{9{H&G&kyo8i-`4We%jCHis
z&q;43(i1}6+PhE;8^)}5FQ!mQA~`E+(-SC>%Jr-^{;5HfN4)VC4DCEuAH`D+v0_So
zjZcJjY}X^r=@YR*+yUFHW2H^#<Lfzrc(*fM!*w9S=p+1Eu3yN#tJ#4|{vSL7EXuTZ
zNip|%Uk85V^so171fEZc*_PdY#f*##mq>A=Q2o7C17-=Ks$=09iz8IjD2r$sg555(
zDKAw^az=&`zKz1sm(W}FXrE8WPcgZ`+%~+@9BEHeg^RFGjmZg)S%_hjLF-Rs=*@Ic
z74c|c3lXt@)<M#c_GrA^trv9ZsSgAX`1XOKO?4t2HDQ@ny;<5|D@G=|2?MoTQNRFG
z`aJ|-H44s3rJ=-gSRWuMowPhwNZzh|D((M{49@f5TMm_)VG;ANLs?N;CB60ZtxhXD
zY!OD6RTLdZy<`k`oPbimMlHzbjGTyjYTw0x30ioci)$MUceM=9EXcE5)(Nwj6p+)@
z@zcHK-o>FNwoAnTe=4(5HXYuT7_&XEpBJvk=VW>X3v`*idiY1{vmn#Q4&1?9xRRvK
z@EP9<25+0{4KUGXC!kHcOF=hu^5X8bU9c1rSnamhTpSBf``ZQHkCZ1NH6yq67>gQL
zTBxjF3OG|1))fT8H@>lS%b;6dLZ?Wkqys3qDefqyBUNZ*n$+>Cy&Cd>EQ|VX#nayT
zcCqlRM*oR-?uSAyPbxvKj}TTTH+XRl(6X!2YARnnxNumG$hpN6)c=Szzpo3xSgH7+
z0=^@RB%e>d)&qElf_!QtP|OfOEDtCd000930O$}%!2klo-DQY`20#An&wd3q-}@iG
z>zq2Uyo2Y8>i<pZ7ZHp(y+8Y6ErEg?i?8y8i<iY5y1Zwj`gO+p2g4`cF7hTEA2Pf6
zLzV>fB1QC!D9VOmjmLfy+gavJ>?@}@!WW-Ac`ObOf5=h<UDTy?v1%O5;}I1?S+CNp
ztXDiU6bZt3s8jru2;!oM6kbxS#96?+(1SZOT!{T<;26{$c%<!x>A%wul50Z>0V9yx
z{#-*|C@4Wm0j3+JZ~h@&d%D<guiVP3rz}Gfahfu>EM0GQ>_zWtB%HnCR#k$2EZk&?
zFIuv+^Zd$UjQ0M+^7(25%UaW>H5S}~-aS?n4oDp*$rOCHpQFY>(Y#Yx*guA|_cQMp
zmFXnD0*!vsRR4)VT&0?r>Ti9O2M>CKnTT9s%=eQd%H6-9w7~jjJl}`DMZe%HvW)}_
zXBs5wOLi@V&({xFIw+hmGkfa_Jh~RIG+g2;leP%$cke_Agbf4+*d@Af+r^>S#q8%@
z7>evLyLcxRlVV<UJks65AoL1x#G|BtO+USbK8{85ej89B@;x>?9oIKR+6&_N+9N>N
z1<wFqCY8_;pO&=>?GD$&82qkUzRx}(8s1~npCZP9000oJXJcH)SMHX&Hg*DJ`jIvl
zD;+8!{xv@Yv?R<+TjT_=q55qMl5#H6pC17I2*Jg`0#IyygusnqYm^=OHe6UM-|&M)
z`Ia|;^bR8u*yIkMMa80K=ipoWDrlJ*pmL=^%vTIvGAVNGR1XxGH7YIvylOYMnKY$Y
z=cPFh`DHgWFNnSl^sTbA$21t^I9%@jAZ5Zf$n+@8`aTdTeA{qQea}fi3I+k?vBF55
z9}9?0I;U>3D#RZo@p(ZrlxIi%P`ZiAD?0z=h)X!}Xy{D+cEtxC=FdFH?Cn-7>ath|
zU|UuOmYJH4xql%;v^<$OBf?$geviz=^DvD&NtkNc@b5%EbWUb-Rt4+KRTC)SzU5nO
z`)J`5)#v)^Rg!UJ!TkWjz1gM%>r%Gjavhk%ftXTn@i-R#fCRfT1isj03xqx?VtLE9
zs14=YBRd<9dER(5FMiykmatmoCAhQUoHvcgQ9nz_Xl=($tt|H5e<9>{Sq2N_i}dA#
z;QJ_qAJO<9rab-c9ZB<?G<?H<*{Xd*x_&X!ejZ!e80<hNI7==@7I{RBq&4VgeX~5h
z&J@W*CT2jKXkh!sA!7E1t{VQs=+U~e5+G7vfps>oK0!Qk$G(50hlcpdG?VQn(;Y)R
z4E}lsj^^ws+8RBCMI``vp-9oZJN;LF?vTWnR#5)BV$WXjK+0#M>d{mL*g!PZbIVIb
zX-)D;p%kktKaHg->bRr47#hJVbc0#o4492SGY2jIjD8vF$P5hlM(Uh<>&*8t9h0}=
z=A7Tl|3jClb)@*Sp8()L?U6xG=}kioXNl1!t$!E>UEXsus`IQkgdcA#>vZ4EaL_pp
z2KL2WQlnSxX-L2P&pPx8b)Y_Ln>0#FnUxPS;=hQNcn*1V$b%%qEe@7&ecmA0kmfkr
zthMHV00094O>Oq=h7pz0(Fi%UM$)P<(&dEFF5qezPQ3S2*nD;!USlYtSGt3|6TDq_
zIj|3~*SHkAZm8S8p)&}PO@kr6VBy&j`B^uZ?=YFN#_vvOb%ZkO-_n<7yLTWCfO~)C
zC2!i28{Z@CELo<yEA|A(udaNE_-lL|RGquSKdy)r`Gda(Jny>>|L@NhFhw*jPU{=4
z#PBRWhj5=S(ny&cJAoHvs(|b~G}m4KO;bAs)yT_t>0AM8uHsvHA+oIpXO=o~ua7i1
zq`qKSu9NCX1IJL!0HNm5usF>3oWoAMaWw1_`&?FP5T!`>YR2{zB~Nj1q2R!0of}Bx
zoGw``k^QlG&sSNPwju3*JxymjO@$#uf#&nuQ-!~fPFB@tYkS&t8Me&>4rrNuumG;p
zRk6VZWym?Yd8|*+hmljt$;W0*2%~XvO=fRbnx3iP!7OwA7F2KCShDUG*!K15sH6AI
zB&c;TeeRQytZsv9*vsg%jj8x2CP!G>Jfd+vxHZf1Noc*Y_}7Y6Qfu)Yl5Y06=UTpo
z3e&I*VTVdD1xw3iikAgN>Fyhb+io0Hu3)={F1rmC-9)=dy&8#egKSydh$W?BpG+T$
zELA30)o@DD4z|<^Zc(~)ICd{z`G`=YM`u-teO$(Qghx`-S-7isamTIH`=PtERreDG
zx>W>Yc?;PcLg(u1iuzj(=s%cv!Hos4aRAPWlfq(lN7N_3pg!&yo+rZ<iw3QKPM2tz
zUXeDPC)Fxi7u%cE4q+U6$Axak`@xC+eE0<~Keq5#umr8cKD*XEns~NJg5K|5Ybr+=
zF=CsRkYg`$%OX7dx1AGl-6*}Bi-jl66GDYft6JMmaqcB3^ugH}^)-H6t7dhVw^xAl
zNjVroy9UqqvAgZ9fZdP*l1u3WK;2)Iqt|JyKQOSD(BFhvEerda9jF!HihK={z~!Qd
z*lX~`FZCf|ngyiLnS)*!481vLGIpQ9Ys=ItB<M7=zrq;OT+i#FFIEZ4>&XpID&9!m
zpp(y!Z3cl?Ot1UNK8=Z(3ld@<?pO@PF;NQumGhoWVR%sxobrQ3oAHJnyRoS~OdgY4
zQw#$$F&Zfq*ZKplB`;A*Cma<GI7YX_RbU6_fPS>_VZL*O>w+-2VSejQ+wWjJ0VtA#
zlmZ!dK@CgeyPmK>2T~XD+L-;WhPi6vu%YD!^^V7RV%GhXL;Z|A_XD<~c-yH`GGpFY
z@>l7OlFgS%T}fS7d-Ew))p>RSyb>!>1Jt<@%$w*D13^(V{vD~vyaNx;?q>&l?pehw
z&_ss4ScEYjIF8&1^psQLHY7H%sq5D#G_0^3*pf^}AV;=ZJT+;#%P|+BKj6VF<$aQR
zQzbD8b!yS8vjT;Zw^6x*YNC|Zfh``!ofjzh76)VN$PMQWJt<9Q{k302fM4+=c3l5E
z=>!=f??)$@+!24ibEyF}v!q^_i88@_CCV0yQvqplU|EX>f$h-pKJURxgtoV9V2@`v
zVwB|m+Clx-EmtG`za~BcKckrntMp%48mPoGANf1f_(0p)Iv$^lmx=Q682JxuqVP=x
z#TRi_5N}Z*%`vg!l4N0A0Tepx(HWFW)5}rkStmW6J1$E?^Qp~kDM`LN19IN)=-FDq
zclXvMzQKuBpz$?HIm=tZgNb*-1;tHEXm0qzM;1<|+g@Bfj&sRWC5st#EFlY=SLKO*
zPEhoNva}85#vDhDkkY$6L=3vdd<sK<+@N_OghA5Ws`Tgb<TE*Uk13ceOn>E>_(i1Y
zBQU+BHjtn@*yd#e{%=*dOsH|MsFAzBKgJk0w#p)&%3c#8sqg|NFAP#z$W02vf-?iL
zywX_$h32``h(stsiKe=@PL~JT`v&|M*k9@UJu|rADNwT3WIBg~QJX!DJk~!*KYE8a
z0SrbJ@<?gB!ikM2l!3|<R?4vZ7YXN8+elEr{t5A?>nWO5{r>+eQ=0y8-}cC>xg(^!
zDm38&;4KnkhpH?p2x<(p!yz`-Gv)wJK(W8N4Q~F&Z`8JX9-ktkgM<Ied|CxnZ?DBH
zD<H)BpYrf3+gN-vxH&{TZ%`5lLw1OLYrVN$ec5=a!GhrxGtiDB>L+%4_=K8s%FJ`g
zZ>3vSoy+`HYm8rm{ez#iI#}#=s%9W{hY0pb&-ZNJFBviXw2901I6OJh+iXjbv6o1H
z7?9ckLYMVB5|8?#o8C5e{8ikxmc1#jQiRstO?3L6FLFt4b0l5~>VAPY_o@Z#IUoi=
z=_OZeXLHQ;(-{^<^TDgd8NE-f7hTF3>h;FTHA+>KJ}=|9jo3)b60xavpeq%s_!NBs
z#y;kR#sUP+KdM{&;!zxDpU18mDbufH_1Kep4i}L&W)7mqeY5MzBZebIIbDx@wQwd&
zw+VRNa}2`WwRojaiC?lICO1be+kL>Ep#5wVbry|2;SLr8iy<}`yn?q3?qN|G`T?Ax
zk=KLAW|hHa3kh6DHoF?7U_f-CD((K7aKOUqcZp{1bA(Rp@@P^<My36--n|(}lTUkO
z3rQ`Vvt)FuS(~we!%qAjfRQGEbKCyK#nt|>P~6u|#nPP2#n@cr`qfP;^u%I+9K_UA
z0>8k@7_@CkYTY^73B#sKZ<+tPko5=U3~Of&v)xa)Eq$Ha<OE7jbf9U)6zi4=)C2iv
zJs)Qgm*L0!Bq7$H?0>E#Pn4`{sgGqR;Kq)I$gr2aoyKIGY+V(YR5Xj|oF}w7!3HVz
z<-&w%+c?mXl|D?Est)=i!<pyV>t48W(Z*vcLAa;v;2+-!O*vLT;y?zYaQ#+RWAGCM
zV;7QW5EhH7$`l+~k)y(VA%(Cq(FE6(b{eo{JRv7lkmm4RShIA^VUHG($*FDn^Mmsc
zx<k&4ndEhe$jwn4d55xUE`bUkiE6%F(Ydmz_4C>N$P-0gtU>~VR7`0M;FJ(+q#Cti
zi?<04>Od7#dj}zcDZQ4VpU2DsWBMBVbx!&SR{^GSq>&VkU?Zgk%JF$2mpx|>v0<tC
z<EBm6+!mEuH9f!ylfi~o4aeB2CHMy|suOKxT93It;&hIyad~Bf0W-y~PGh_hVhA)v
zpx_Q_D7pIN4CxfK2KS5I`4LrqK*NpOJ6V9Oi*`&&g-u)fb7}^KLPN!ecX;RYIpFWS
zyp;M|6ts$DdYmCv*tlmh`T(1s?Swz7Vn3Fr<`eyIKSkiZGE+!<Bi4%0ZydqNz!yd&
z(gZ+Ts3`Iy)+b0qh8Ta_Yd85M4%y$FhklmdJFUP}kYM2z^Hu&xKi7SxB~ozQ2`2yM
zRV;GGIYnA5`M}t1Pxqhy{@iJEE>R&s(|%zrw!ok+VUvyi2(rd2{m;@vhNOWT2fobZ
zTle7c^ZnJU01Lxj_bEtRtbi0jSW_Hf?tH`xRl+A?Xa6@+aq6^B3i_v>s72J9;MFVC
z9LYB49yqioQ^LrZ?KcaBm!qGn8t{ALlG?=HsS*!dXxrcHKBliCuE2=}$iYJYh?OpZ
zn3Tnt2eB$+^<|f-+dQ|>y&Frmlv2b|j8IBdnT$g7?eJ_CD3fs3Y6F6B9#^)JRo1z6
zPI`JIi*cIW?5qtbRX^yn5UP6~Wc<D<|FzGYtK4dOF4VDz5vr(CF%YRiF9CFl57nrH
z(nv?A0x_hzk}RcRtW~oqKA)t&5r|Z~LGBs46kKBO;7}oV;781CqA$2V?3{z-J6gz9
z=<Qh^k4|x644)Yjl4TJghfJHl24qoppvX`;G#;kazUO{(Xz&A<14H&aLW=6ambZkF
z_aZB-gg1ZZ_M*+JSX`QoqY@lF@=u4`Yj@1lB9tj3Oo#7TD7rdH+$F6H5m}ef6cOy>
z-Qx)oU*elBUUu`0kzHgy&qy9JE8P^L73k3(SE*wnj|^r(1Uz4*`_i_4^Uncw8vbEh
zp1Xw=T!cPqem|q`2f0u$8Tx$q^`XCKmujD%8|jVvM=`jr{1@+T4d-eHN&HPMq;4?C
ztP3HCe7q60BB{<P1r{|BvUQ0*mCGS~69K*_h#OiSMz7H@;;@5>%N<gl>oo#6j97@J
zqbL8+CLTaDChr}qO5iFVA;VqhiqIfQwN-gHVI)S|T6q}vAP(z&*9Yqt`yv}1-K(y8
z-HWpQl`m2IzS_^$&Yg&*S}`ccj$-TZL20P-$^PM-_#nBmFd3fK5-Js8iP>1UG(~0$
zHBeP<URv=?#D@%Zlx)UY#*F`TMO2n0MWdcfczF`hZLq%gX@Yx){@d!}aV{w>8)Za3
zO2qtsz9HcjiIi(!0)$DJ2e{&oxlkJ{l%r{bkUVvpwjcG*n;5i%Xp9Cj?>B49P!S#c
zF7x+)c+c56<MX07#Gv^Qs!6M1gwomokQWl2N~(s`+(0ZG=NHa}1C>e}t)v}LmtFsf
zPAkr((TukgJ&LN;Cc3mJSKnhj$1pQU4yQvlJ+))nfWp3WYEx3no-)CJ4InSw+7K(o
z*EwT7a=SY9SdOF3guVS%luCQOhf@D<qelvl*4f{MO$=ijg!ODjW6zwHW08`9FJx(E
zJ7b(ZC6OhAFtvv=#nZw(1YV1-uU6}axetUh0MY7gpICX!YLX3x`i$+&HVnbEcWw65
zbb76R{30u}$0T)r$6x@FUn9mAv;|@|>sWWhFHPVCV;R&|_c1*yN9bk@3|VJtC^jnF
zNYbxPdLYodCZl_tvi-9#6>V2-<y_C!>bk5QPR$I#T2YHpn=15RK#KUh7R;=BfYt6R
z^w{Ge!-05yoa&_t^KofZ8xiB7lz)OwD?sLtz}n{S5958il&-RjznD1ntjO(nOsF8V
zh)bXLCYQ!aJZRu8GW6Y$z_Ou9G)i0KG6PH|v4@rMuQWqNz#>Yck)oBsoo6e=!rV$6
zk)3_e0oiRGf~S{oEr5R6$w3QUUB|xtx-==4XU>-$oZks^*#~rBp}_g{kvCMXQRsAH
zZ#`Xm<K5AgdNKOnu_EbvrNtk*5gWR#8tngsAk^&ydpGseXt!s=HRAO23Icq2?VDR8
zo)fO*B^6?6t)z-Wq&4f!PV6#cN|2T?#mMY#UOCDo;^gk~51_W4TPpNRRHfiSl2#PN
zPVVQVqo!y#f><@GM_S>0#Y#|l8Mxk<ah~<LcBgUAu@Vl|tgu{yYqps$&`IW~kuqy4
zEcvxo=)&mmvlmRcZ%ZBF?@PeWq5NrI6teMh6`5>btpiiUkOouSeOxUpkc5NM-;XG0
z6egQVB;r>3+w+DblU?-kH7AsnGvY;_`{RIVn{&~A9^6hp#^Jih{+~#LZO#r37~&ik
zOJ6M^twEH|-pLzz8*O-h)5o($1AkX~K-?a`xk-qb@%TfKub)rN`mwsO)(&|W;mp64
z-(NJR#k*D4QzxX=CnPv?PyHnH<gGAKT#IR!5Gt`*PRS`D4Ce&zebk!<0@CMW*<gIF
zWIHFeScs~HrnUi0jH0U&D-eMR&W&WgopOh9qFunm?wrzFUNyd>B$Ra-YD^x>Bx;7y
z-F)Iwk5h(;Kiyy~o5fGj$u$b?TI}%H{ZoH|$^>LHZ)t5UmZR9QS`Dbk2ya?a6`gA6
z-=BxPa51}>QL`_qhKS_tQ2Ai-T9xf^tUC)`Mz~IT%NncQ+$DPOG6p_L8EIJ3{2iL6
zzf7NOXZ0i)c&7{((wr+6`9dnRc1x^Nx721Ji8v`{{O|R<M%2x-LvP&Wd$x-zPxY%8
zyQEvX7uUD8qGBy)?sckZovtfkt8ADRy7l)D_4fCl^`9_znHil@pj4P<x$sMqd-%%d
zP0lyHizWq6e*Hk)AVnTqHFc^EVHfA-Py8G~T(*dMY8;<@jtzB1ED%13Q24CiVG90v
z+#X<IPHzC5^0iz@U~bJOZ9q%C%=RE$8<tXAm`^TBsFY;#Pe_Bhn*jw?B=;N))Z)>E
zmEBrBabwu)Q2AcX?ytx^AgzZ*tL<RXS__$Qaw%0t0k_wov`=^uzz{e;{{deZOw{a=
zJ4BKNbg}(6R_<eZPX07&`T71PF#Q~>ek^2g44Esf52_C&HB&&+HOH6!+~+|m_!s2z
z?e1A~R!%~(E{T9%b6ttqRR2*wAPQy+P~$NEy`g)JGN-TEi<sH+3wu%N6>aaVbELDk
znPURA%ftjIQ;T1sMg=0DO8N-3?(_OAy!|^unRjYNHHakZvZ#_j1S&|=K?MT#!o^IQ
z@j^=m5O3zCeRt4THWzsjc1ua0=R7Z5RJ`oql3Kw^a5~C$P%=!GPIN)vkO8e7+(nd|
z`hnKrD+_Z5N6XJFmqT~v<n9k?D<hC2r}Z6^rEy7n)Jc_gSZ^>tqw_gVz&pvLKkmiJ
z`(i4~L1!s{N1T?TTPR2U0Bo3u(Kt#p1#u^^IfhjNq7%g<Wxx2S@}~cNOYr8bI4DFF
z8J0;HajSDfvZ~aP!A>P2L1@JM8@DY_W#4!5Lgvgv<?BKi#_=A)XqmBp*n*msk)(hS
zCUhD$I7(~cQth7YfhIaOU!+y)F6-^s<?$+yGv-?C8W(FEj%EAxjRMZJIcjLO`WX7G
zM0s&%-J`@jIlcOCm25oUo*S4R4N*}+O+po7sDESDpZbH}y|O@HdnP3Bx<O96rw#wT
zrVYUpNgF+m*$rO_rbC`z)`%rL&pYkZTCeT^QG#X^sYojty*z9;(8>UU75f0#MXIuP
zrw_F6FN|4VFkSBifXeqw@@RpQwkL8wrYbLlp<d-_Sbu7l_0?XsGi}EyO?iG=(BY%*
zE^q;^DI&{lZ_`%SH7!=%&FcyZV>qrVk^IC!km4OS`I?jXkSfiYWykt^dLjImQm0q4
zzHlJZ5_-J>ia<uv6%(@+IAd{~1i+xs9+MP4kzm!A3{r_;d~;JveCH-=^Y1G2=E`9F
z7PJwb35cd|YZMS<Ewd4ePSdVaSzhDC(E4~*TJ>LDyXlv7%x=DzC^DF;+}0x}dz~?U
zJX|gEhAbNJUeFD^tS7RZ>t*JnOKmU4zY7Lus~{1MVwA30*MO^f>K~_>;>Znn!0R#w
zL-qCAOARKv){*F%3M)KkqeLHYx!MCoN$)k#AZ@7(3`FtuJt4h5iX-OzvTKp(&Jpz}
z0BKBDZ*;?Mfr6|059gKinKY4|`iT9cZ&r+Z?=4kh0E264PpSSvwmxs%1o?a7BH|c9
zarB<c;9Jv}ttBFm#g;y!mj->uVdi^2_^NDb2wFQgCT%9ol}Bx^b*(;yG`JGY=)HY1
z2mz2ZhlMaK_vR&DE}O}*J)S@f>2YA7&}tu8=Z-1NiH=rvafq>Yfyo}@6a>`Y1PyLO
zgk47<>-DAmS@;IGEKJ!~Ts#b%KLs7fn(@TRi?<~=T8bg&$)XI3mO;5JU)3Hhf2-AA
z!2Xt$yKXOAaM5Qm&ZQw9ibS0Vso7I3PhY`~0p1-~!@1I`nFCQtw1o;0>xr6Q#NPv^
z^)8v_K{F<SkRs=(E&v-KRs8&qxrMJ94Id-v)&ow?uI#UDYcrm#{F~jWTA-~6kGY}w
z6YQ+Q^ly4CZ}E;mH<uhTZ&w7Y^zMW~{(yZ4JMU~4Veaikp))A}ZVnK3>?9<nfn^M8
zkQBkwT0x^e;k$5(w@%us4IRowApRLO#HAiXO^Wo>R;gucqcj+c4hJ+b^M6PBdD;a{
zn#z1K$f+8+bvJO=8(Onoy~O4IWcLnHh=eo{Ho<E?dkS`?U*UY?ciYdjmudi=yf;3x
z_!t>VIVNRNj&rx%dggAFzd$1LBC--*=MgJE*yfPiR&N6m^KjQT@FkHg8+<m&wQ|*|
z@Rh~W{3)g4O=9r*H)qP&vf&{I_(CB$S$(yt^wj5-{13g)#jSa#A&Y#{d$+NadWk@y
zf;0+?fBF9T>&=nb1On&+NZ_nypBogr0?ag@-k`=@BdGiRXw3)2_9`J2Z_mFrV`WB}
zg*@S`a4L=*ApI9JN$#naphtSWxi<s+0oi#I4Si~3PX0tCVr{*SW_!K*R!qr+4WZ4E
zJDzc~_<4M=#NQJ?nz%{zfO(|QDH-8NYq=;oFAjzkMCR8?t<g=eGAwx7%qrX|&<{lh
z5|mG_%mi4-P?IljWI5QJwEjciQ2n;j9ARsBXIDC^x*-+UjVzRU^3hqRZ2fkZmB(TG
zp=FUx*qmXq$LzX;#{QR_Yv)k0Zyr9Dd!E-oL!-_2me!<)buy}AcqicDHA>unw&HUp
zL2E-@`++qOxK4UM&0Y$InG=+1aaxma_34K-nMirXKh0#K7`jKRUKy$Qa=OIFo=O%S
zuYk>cyhCTQ*ocm!W7XzD;h2rUtiUd6H@(=OYH!Zfp78<zA}xdu73Nj$?bM)d^l7BV
z3Y$kjaiBavSgSEw&}ij4%>If|{rlz{J5OkcQlAZN_Sq;!u&$E`K}s1Lt+m!K<h>5@
zlfPN5jP~$OwV9uPv~taKB+&f@PBIwMlSr5wQuibWv+PUAO#gmkVt&3xw5QG2R?CV5
zW=Xd>J^s}?kZ{HIEt*sQ0yU6wNvb=J@#dNR%|S``hMjBo=M1t~QZ{*~n@HfJuL?5!
z7#30BDVR_5=>3VoQfMaaCEGHO056I!#*u4&eI$bJwKraSsT7NXS}*{t-B&x{Mq_!f
z{D!B4@9MTwP-JHGaAi@i^j=!m)1P98qj`=OzxrE=&)ix6<y+JUjOW5+&#YC3%#V@!
zXCe&*MQRIByR7k+(S%>fI0IRqksU7yV47Mr3Yn<ll5G}@E|vZo5wEvY<;4h)3Y<Bp
zc=f7t;K0~0k}*SvB8IW^k*ay_itf_ZupGJ!8T{$}$h8}M!CO&`tK12)+A>ev01Vqn
zv{&=l7xub_PQ0kQ9<Cxxbcu=?s!;Ma^+F}Mx#eZ;b>H}@r|&T}IOnoCU@ooiV!0Cr
zpqa8!o`OHC51mju21k@_-)PA{yQ(c_g-)ez(ea>PYq<t{{Yr>_UPAH^ft!}eXR$mb
zuLZvI?98Ihw`e+<l8-R;l)+1wKdj0`#j7Xi(<N^oyv~JZl4w1m0VK*Dh@SZHBlVZK
z(o6+kw@`WD{&7K0h~S~s>G6b%rWJX*9{>8vn$_`pcDeF!$EXS>^e1exIrwX7_8Mbv
zScgO1)=p&@?xlnn*Azo#wFLbZlSBvgCh33J4lHFzLz|OG0OCmMgH-TU%hVxWh&TLd
z<QUcxG}#u-WZ==2kdMC<YohJ|&k1RFE;!(mV}e0T<!zp)uv9HR|BDm5T9Ma2MfIOm
zq4|<GLO``k>!go#IrrM|2^lCfHXSMO3x|R&h;dKqNyw*d0Wq}=Rh%OVH}UeG#ySi!
zSba66pqAg88<A=mZz)i4I(OQ-uU2mg2BRhXp<YuAreHRKW0s}wOB54qbJ9wOc(bT7
zT|ZhB&falhF+w$}P1he{O`*3b7S0pEyY>`q`%dsv62uG7HJvseisp;+8VUg@MTN^o
zt3+o=57FoJj2I6q?Lc6gsDJ8^uaWemNp3;h^5ro;n|esTze%f!t6jhP%AM$Y_kP&P
za5#z3Pj*Enh_c*=#1i$ZRTiSrrL(146!IfSM%Tj5uqMd3wkR(C=J{@Rqb}2+8l7bj
zM@55yc{Z;kyBFCNc9qKOv$YOOJ0H5)F?ol{H}t7CE7QhMp_x58)}L{$M;Co@F@5P1
zZfEmVp1O0E>DV1xgI?(vtQji%%K;H7Sjp(HM$w5>oB~$$3?GveW;SP!B}0QpXCZGE
zp*N)x7&Kw`med~tz>js&vuxh+v*6joGsr}|RAz{^*z^F(|G&TW(Djr2{D=Q`s%5T>
z@lyBehW|AqQr^Un=22%}8xyy=lZL7htT?NkNa1Z?lGIib{=nE)V#e`p>sp%j(2`x=
zeA5HzRO?$mO0XYVn)l4ZK{FRyJ>o)0CfxWAqClr=UZPOMRaq$;o5nlOV^@YZ1>q!V
zMc82`?bN$;O_}t~fV2!}Q&*JBzAal<nPsjNb7;u6oG0>2i=MZIcMV41Ue4mlF^Fy;
zij=^B(~e%@vnY=Ddl*&_ghBeiPyXMQW_G3E1R{z}$UFbO7kQuH#G0~`Ijwoyw*LBg
zLN?(&D>&ptOH;A4{;KpLqJkZDcaV7k8$+rU)Ug{qH5CYk&i(Vb5b@C$m_~143WUwe
zs%#)I3`91HnBMh1Jv41hFJ~PaF!D4F9&IYMx8%yysU~CA%J2`Xmi4Uul2Jm43$D6n
z;XVctLhzX1l?C&d=){DT%pm}}C<`+!s8b+Y=6*txBMF<YVof9vR@lx+*}rXl0W~d-
z(PPX?m{a0}glZQ54Ms~&JWzVcoW%5)kjqSU(XjfWq^1u=nAAj9b%!XB>f2^_RCV-c
z+hshWM3@J;t_j}I!o#V`gV3D%<;vn(z{`C9RDCFnYfC}8BD$2`5wbMRD&yye5wm)o
zbZ8DPpY*xJ5udT|+1Huk|Mm3#+luI|Zo{Y^t3#a;J43HojBdJiyk)QC8ig8@0Hgn&
z%1=k|`h|Lr(_Q7U3dH9vuwae@LtohY6U??53zsP$WrGGeD`xS2#`Bi4d$#Ij?A}?S
z&H`QJAUmSWGVdY*ShIXpwaZ{tt$glmn@N45@@{+qZwcaW38VAVCg`QHT=9wJ?(47N
z^}duVPUfakpXl={6q|Pqv<GSSR8j$TCSQe3uTnu%E!hE3DiRylnMP$_z}a1GY7ohK
z>$`4@_g1b1=mH0wvm=2~3m->^k^ZY>*&NqdLrT&<yY$=?WJ#NZxo;ucKXTm|IVS>=
za2G$%qp(?PxPO<gVZ!%erBTtYm)Rz82)&#(I>Lz`Va02{&%j1|2N`3ZJFJKa{Bapu
z$K<(aNe_AoiX4am6=*Z{O$q*ZC{@AWn`;Up2vKR2mh?yWo0DmP1#(;16BSUA6!CP~
z^^0m2PfT3~FZGIt-I0a0jaih_E9>juOrJRAjLjQmRIP8?XeaNz46h&|&og)yG%AX`
z6cLROG3(w>#1?VoA|uxgd6viX{-XTh+=OzZk7%wpd~G~MVn(;4H)NZUDax1Ib~@L^
z=BV~<6N-y{8mLvZx2eq^z0&p|GV7`!6-1fZW%PtfKH=`6t^xJ)@e|SD(k;eSC{QZ5
zsagGb0b`KE0}Q1fHG=&eJL|s#KK|up_?fV2=VyfHPZSP$(DIDwI=~7hmtv)e5jdaZ
zE{T)QSI7`-TSvBoeeDjKnkb&G#OVfIN_2&JS$&y70`M=~zFO8&`f{Nocl=pO$&$OX
z2IPsZ=E*k_6`?ugJuaELlJ7m`riQSwK6-+}c#qvUv<=Uo!Mc3UglYz+DG||l%&@hP
z+@utj-iviAilxkeMmwkt##<3;wm=Um^=XnQ0{T-d!4mUKNuI*_8IE*Qh=Om6eb!bq
zkdk(ZUA~Wc?RK`kuZ8%L@)!doYL+FM!A0^Y``C+zCu-pmUR5bo9cd~qS`+89L8|_h
z8C0P5U`x%!do8oUg+&YAUzQIg;1Uhxhlmmdg~dyc5l+nB>gh+egTkO1e&@9-7s5cN
z-=Crg(tsaBVF=El!Mc%EV(2sRrXFmhmG~sDcyQ{Tq0FBjdz!=fTdqzHeMpiBwX#Cg
zE0kCJ9f97|`3ljk0XCX_+=zYpr8*4!X3ls3_}S|-UKTiZEO=eY6vd4RGgVHrUrAPb
zD7q&OYLmPWF+(x8jQW7T|LIp=F>`bV!GTa00a4mfCXO24z;yA-rxv%y%@O6|vqYlC
zWz!Rb_GbHj%kjA*I2cn)7f&Cft<&Rpb=K}?8CHlw^DH&8V(TKI7Pb7vAxqdB#3`g(
z^362<h%g7@J^C33_mp>4_!RSSI|3SIwyYuriIk3wszYcl1x!(_lmb!{(duJgG~Uij
z%vUwpW)ELfqq-W2)kmM&R#TNPx`Z49E01FR4pf5ZpgPPZr3c?_SMx%i;_%JFD4qe0
zmq@P%k^IO5Wc+}YxAyEo4nO}xh8o;VA0H)CHFnmen~o)3^k>-M2I3UYSAV_V@TM(9
zJJ&kJITZ7xAI?^h`HM*#_yDDJ?ZbP^Lpz@4mkTc-;3}00HofFAfXBP(Yel!vep1Z=
z^4sm;<Uk{xOsNo{@(un#M8Wk#?(Md)mCTViAE0tN7A8xwI0ttBm~1H=&cpO2%ytzl
zBj*|<lR9m;$OAOaG~D;z=-u-Sb;^`s5Iy_ri&4{=h}WAWm9WKTidE@3M!2JvSz$4`
zz_rnzyun`V6$x9acXwmG4PNxeqVb|fY#QY8_iy<*JWW$g|D|f*K~ih6|BqxyU7&&v
ztIE6p&O9Auf4VBfS4<jnTz)_6Vli(V?8bOXXF_<^<u>Ph`j*m!@trKIFFhk)ckJ4W
z8$8KQq;ParIX%kv(3Yd*{IZR-e-Ch<s%n(lN!t#Ap)k$N1={nzR2=j=ATV)uL>(H$
z6FVhnHkIJ(eJc%&8I7Y*K#SRf*e}~vH(9hfI_hCna17vqc=ZW6kRo7#jc!Z}f1E_$
z3U??@Tf&)MOmKH+WPXIvtO?Gja{uxi(JmLzHVe<*7DF*EMIXN+lXCPhJ|P|{F-FPj
z6%iH(xK!Ny&(!**7G`%M3kx0p0z2CHIFJA%z@sxedj+aDVp<E7m#6>m7HAZADpy=t
zYnF+i1Yp$o;|o!Q=%{!V!Ji|Lh`7Wbu7fbCd|65=%u0#@jJXl;d=~Wo_vKVxVKEhV
zl^?esCsWB(@o6Q_JuwOK4#)%gbyNSRMU3sfE?Pe-N8$~x7IHtb;m(Vk`sK}h3T&Qj
zxt3N7+V?}}NURj$9(HU+DOr!GtZE5)mc7f>!e9HkeN2_e#S!ZuU~<NJVJUiSjBR85
zD11XF<aAss3rKLS;`EiJ2NUjPE$x`fHp2?8HtAhLO!smtfy@V^zsK`;?e}Y^vGajd
zqhv>MaH(cABNkm)tap0?$xEa%Fmq!~G`tKcE6)}kEArR@msw=5Hz8;SReR|4w98mz
z`v|vArLkew`%ed2X8{2c?zT+9Ycs~6w8U26NqL$_@(RU?UQSDu4|8(cr!l}Kf&ocR
zm$dw8s>9;ckG;w+Vy5YOoBRqSYORN2!LQSs>>gUCDU;cSs0d#BtuK@=!ogU8(ntq5
zDyBg%i=8W_r~t`IOUdYEV){+Z0{De(MmMZ6V--9NI3M)kU2zTrA{4&&cLKS;x)3!<
z0Lj*Mu-yJG&Mf%=#}oLiZ!QYvhdt^EtKyuvcE}S1-E5e(p2PQ*mHQ&-bCyBFPu(IF
zi5z(T4#3QUsAhxZzJ_R(Ll?VP6m*DF0ewJrku|uytc<0XN>A+oQerwA67lxb-U0&h
zEWqI)seQhyU3u+g8IW5)k8?PpbWFCl#ZbltLk-u}oFRA7(YD){b-nf)R4jR#*1z46
zN0GZ_OaUT}q}<)e2fGW9puqp=jX4EKVLf-gXgdxk={K3|ax^P!1AOzVb|43<isZ#2
zAUzGSj&=e}S1!+R*5eMT^+)^ov!#2k`lQ&+ayT^mp~RwG7BTC67mDhfv)71w1K=(Y
zBaow6+JsW~UcXnKK7Qrqw`OD}_!bpoB8Y_Dzb5Md2cQ!14X>6D>N#L@@#q%a4U?y7
zYn&;wSuP}PBVg`<7N~@^=rL`|C4T(sjSzHSBd(o0p_?rugtGB{;loFnHQg8#)7(C=
zUczx{`Z$w=&PJuRZ-VrMDLD7l%7rcLEP%r)jwWDb0WkIT^L|Fw$#tsQbkh<xQJKBT
zL>5sze~9r5uHc3hSa>4!i)>;xW__xM?t-APicVF(9WUYCK}q~1=@hn{pne93RjFM~
z?+ls`S+<JM7{+IJe#DY&aTeviz0^~0Xo=;Exs}_22FN8}KRZqZw>*-1SCto+XLNh8
z;QkwjsNP`rnPNsrT)dxWyf5eu&Rv_)^WwsU^>JC^qF$JnK_`$cY@l&h)cgjKxX0(p
zo(Nj}(Y_R>Al(B_Uq@&xl*b%ZVbhz*gXOuIbZyTgz?wYfClaZmE*c~jrqinI{>suY
zoQDs%sj|gn#?lMU!!F-4)J*y1`omOScxyAPI%efkp`E2J$L0yUb?8(+$?MP^l;OpM
z9SC<b<3#FZrwW<jdDp>Q*0Vh8?8KlKnS3^_B-LgyBPo;99fM;=o$V<kjbP(NE35SE
z&A{`?YG}Fxj7^M-VbfpXn;P3MloKU!DA4mnlJT%cu7*#(K7ERrI$H1i^%mM9Kl_Q_
z&v%(5jFG{|kC-BND{fiwp8<(*a+w^%jbcZ1%=j>O6OfwoVp-IJ2``8^ekg;1-S&(|
zNxw$2^2`Gk)_zoIstYQzH@Z_8^5c3s{d*r~ssIvwF#0p6sgtGVIQ-ioaLO55EK!QK
zm_t7IgegKod9)rkueK#=vVRSwWu$0aqS;j8{V8`oQ>~lpE>(E1D<DWx;{N(y(<e?}
zMUTB-><05rF_dGt&ta&b#57V6Cf!zA-~0T?0r%j?;j2&Ezt^8iwPGcVWu2q*XpuD*
zD!g2VKs6%11S9oFGH~tLf(vaG%xU+6&f7aa(H7Y@DWLrzClVHr)t~y32mS!nsyuWK
zp?tf_woi0@ZKp^&NFqi>(A#sfR6*Lxq7g_x1{vP}Tv-~xYGQS8|AJ)Oq@oN80bz40
znt~~ss2Hh<X-(V;)BfjfF&V1E1n)v)sZM%t%gcg0R`tx3*8SW@a*0vtNh}%cm#^6$
z9{nqw`Eigi{sA7IuV_0@l%`ZvImBAM_qlkAY;qg_F$9So2E&E?xrx@=PAOoixVRFm
zn*V#9);;h2mJ)vqs?Kn^`GQ|qxYND@SwJ9zU+9YX^X{7<)e^Ai^xjna5Y(}jSc<^W
zQwaUz(TqJ&`^3$g{#K2TIVae}(BUz(4<9VO6|ueMm4R1waQ?U+iQpGN$v+P0ZA4ja
z3SM^Qq%Gu5BO7BYPFmcIvn&qRhpq3-XEjHK+Z(E8s*VZD-Fb_8&1fQGrxNvVOz9I9
zV>)@%VBw;}p<K>1ZawJt?;i}zau_@}gb|)S=?p|#qNQ(33>P;1Y0}5;9hY@k6ou%h
zT&*@ZU*q}qK`M^|i>L-|yaBVkiZ&nt6gC##$nt<C8o(k|<bd>&qy^DO1`6B2##95@
zHW3|_3pRFFc^7`B4JyM~Jro;181j)YOkv-B0PumO)WxW4Sa%0XVUn=-iL{Fv8~KTR
zLCsy3fk5gpOc_(8&JcN<W`yV6v-wCI%YP3E;5yTnN4`#-3(x>Ohsj+~jUI);$?*RB
zs=yIBM4ACbMx|AFH)z@@uPfE2)R6L--vIu-&=WOXmp%X|s5@9nS){$}Yca-x9Xjal
zT%D(xfB8y6$IM?-R%v7-#rr#=C)PS^$ijJiXA<jDUQ{2-1&022Za$J@KSuN(7E!4x
zkQpnIy;_YN-6Sr*a|9ZC5{2fK(!ZyKn|8Y6S8@~BpzwxDSocsJg_G^;r;v|g*=n?v
zBoBUad$P-ZS)s~lIPt-by4I8IS$6z_`8scT6&k>QhazeiturP{da5gD0)o9GuJ!*|
zhIVbC%dM_Zcp)cec?cWu+VBa*&)V+ld8YQjx(gM6kOD!uw+r&xH6Bi4Sc!t`0eeSt
z=FoDhm1ALLJ}6rH?lLPTYsz9vR>I;V-U$xjpeE<gO)%^zK%rWHi_tYVv4&xF9K#@)
zPv2+Qq#0pZxsJEADnqj<7(8mjq|4@bi{q4G0h8t5GhXcw?&^k4^gX}&(uZU)?k7Q$
z0iCMqnkb@5Exx*5V9^)vY_CNCie+(m{?bL~E7wdD${_s$@{?<|3i1LqE;JQ66DdZe
zh^E&Fv?DP-SrS9>ran%zk|3<S^xs)gl+(biFkFsvOaEyG?@UEf8{wgFmwf$CQsYJX
zc86tL!~yyBSiq=y{<$UR&ohFN&SGQp1qZ0pn0(IM;L`vbh8pY0G{Y-Nvr57GQW}jk
zdC~s$PQ@v|vntV87IwVgwW(g-<%InfhouF%-BgJGsU^4)MHEb_60UL0VwUr~H4QkE
zSRMtwCXJU$YCGJ}DFwi*?`o-=Uj@Lpgs;PaFXQDb)XDY;HcZ5(sYOqz&E+)(o@ZZ?
zZ5OM+p-*f@h-eK4L^oV5vU0l~>!T;cJtoH1nuZlV@s=Rz1=%>W$tk@BdXWJ@VxRQ}
z8#JzO^U?Qi6A;ODHVx#7)>@KXym(IaO*$PQU90u1w<dE`<e!T`&foM1&*OQaR^24q
z<vWE7Tuk3Qwd(H56GuUIa&(gO3(Vp5W-t6p3Xi&mQR{B^>1r0_N?l?|rn;*$q6<G@
zXfGVdkp0<JzxiYMP-t_ff=eMOhdT6Yom!jrjf}wI>OD?ew&PQ(IX$ZgtZPCn?Frr&
zI&1b&`V}!bg@#}Ig}D!UP);d%(J?r=c#x;|U4oFY$Rf$K(u|4t($?OmSK-j2R$smt
zKLhVH>4~X<?p%>Yd;YD5^_aEiBD05Z?S*%-{F3F!s$^j}zD%3Ob?KYx<z8=+rk59>
zwXYoAe*r<$_~HCp?;7_#9-<($Uw<o|&HyLf;6L`CLbFr*fyC(&zr5_5vo=&`<z$CW
zy(ngH`P3R72@6Y8a4;G{=%%E?E4nRvN-LMORO%+~iAD9<G8&#Hn5Dr9F8UM5vE_K1
zS~>8!PNO&NI}v)Nt`CK~{RD;lFyth>?5ED(Q0uANp*6OiT7sFULb3L;LHGCuY)TnU
z#Yt&2XQCi=ZRu6=L7Xb*O>d`B#U`i9B|86SAf|OY^4tkOWl>)4*#}qv$`mDq;4GB_
zf{kn_K}#Dz|0ux)rm5^jM6jFjY+wN^KC2LktN1dY4Jt9zC>7t4B!ihg8m!>oNibz&
zsopPIZn-u}65bjndNxVAmTP0Pe?TUp;7XzwGS>3jw$J>^A`P}5;bt>96bw45ld~V~
z#$Q!Gp?nMRtao@#xcy_E5{qaE8U%l(F4iQ0E6ARq@HncFxR#Qv(adssix|MBnA^{z
z*;IJl&u~-}v!h`BR^&b&H`nVzN6KZDqwOBE^-$Pe#DB*>`^=wNpnB9;`mH%>EsO?I
z#IS3jul+5U240yHBjg!2+^P*S_~Ly-GKlJBG_gk5QVl!mk}vsZbS!&MTQ8PgMs<;a
zA&G3higycfLq&>WyDXELtN|Gb+IRd;2g)f%!R$&b2=NqMe}{3j*f;PN#Km4?R;l+Q
zTVIcg0D&P8<Y2*FJ)KAfmY}R6Od9@>@aUiOJ#BKCM98ta^r;SVJ=2O8;1av8=b__f
zL^<}0xYONr1X{b6%$A@KR@`TOr?fyb*1<Kc#>Xro$<qEJW6`b6+IJLyM65%gijqY{
z6)gxf6;=yMGKYl#Z(XNcswq3iC@xr^kneiVm8wVfz_j&6cs!#LWeT#9n`T$qR2AJK
zc_yK36&DUe+ouuQRRkHUtzb;u(#s{l*QiaQH9vTZCB?;5DRYl9m6J7JusK+r$+?92
zf!^TMLGd6o%P1#1Y-j3!cX(6rV^oZ8U?9sovyOGTdiN#_sA$0>mjf%L|FR4<Y3b1e
z%}>FEFziqM{aPi85sRmg{;bH$z@5K6rUu2M`yAU~4gpm_)!(<o@ZsTl0N%D|>Y6CQ
zEI~uIf)zzlpK|D+4K!Icc;;{u&+R=>pPV~2bl$4TrAMM1%X+IA$YZ@UmyB5Sb)hv;
z5Ji(u{ddhIpH~H??m7kfu%5J}lKx}<P~H?a8u*b+mvMj(4*Gu8jAVZeELblA&3>?Y
zzJUHn6e_;W0tdb$q9FqlvAw0#i}Ys>n{$;~27~&kLPLVODoYC=cSd`4^;2)!&jobE
zS<p~=y=VI#PcN=qP*f#aU7T;s)+(tc=~xoL63zfTE{aJJ7+`)3uUf}4n`1IpP4g<&
z!FL9_koP^megn96yf3{SxxN3_F2qhl&Rs63*Rd<@Sm`j7n|YX++YRG*o^3NWCR!o+
z*ILZ%s+#<^nB`;wS&OW2d-pqAA~!G2?|}2fr%DFGt~Y!#W?$y8!&il3EnuV6w3w7T
zs^uf{!_gIbk|%Kx_=~yXj{7%e$Q@zFHle|b@EQg??L<?SzUx3I_;!K-zuK%tmK0*y
z(mrmV*P8UbNL<1nSY%lFd&Fx_GQ>D6-MrdG*-%D~&<A}@n)9-;sWZ3Xkh`Kc4UFhE
zd>Dl8V`y%x7dE|xIstjVvR6p0^l|1)M*%KN6s%-)QU%|8rwp4NnkEesb?tRdoAdww
z|4(&oE<Ez-BqLgUeYcaf=0AX6baeaTDZSo<=C$LAs#tS8P^Oh8R?KSFvww1ncxcO_
z^MR`mDVm~QKm_MXSTBy*nKWa)EVHckx|rbZ9-jnJdeMuH#~CclZBal6Fc~=O`qYHK
z)|SNjXd$>HCIO;;PlsX2ao=yct_mG++5|{sxyQQ>1oIR)e5OmRU|BMpXc(cz;2j*|
z@t{9Lk{!QZ9hdSa*wSatJ8xsWES&Q42$0NWUPG(OxpuLGbyU<5WX;#UuI_TJF+N%e
zElW@_pS+CM7KN5{G2~c_<j6ZvJt*3pQ9#tM;^I|R8(-}`dP1%bgi|oKty}~k|E+jd
ze1SiPkMV)m{KB-o7UA)#9%`P_-oJBCq){Iz3>5O0?k&|%{S431kd`4uhjxmwUufVc
zBn?E}){9}&Z!7|iH($uge|^Qu!R}b3iz0Hs_8y^MuE3%=HK8lqjr}I+0B>ErfX#UW
z)R6KZRAIJU-bk6;cD-%LSX>&JqYQXdO@LrEWXC$w8i!QUCWK-p(3%!$zXz|u8s!}E
z_Qi^_J6YNqY%eCv7bU0n!}ZI+;{bvDiS1^DZHC7L<$MF&xRHj-1f7gX&`C0NJBPs$
zwxzW*ciHt-1;iq5?ql;;N^NB5bp2nrNP+=P;VXiRM60y1t19)jj>c=BH>a(VzuMDA
z@!gut7=Yc&$1}{{MeIQAVUsf9YF?{cDFAPt)H6g4pO4^GSpiwI`g3I4w~j4JP6J!q
z!&Qli3tT@PO73R;(fXCV!^-f>$oC2cs?o=smvxISwd-jPSAJ5WJP*o!|L_%T=v`UU
z>3E{ua3x<_nblL3GLeg@hMf}!y#qZnIhbz8GK`7{?qL<#a$4tB*c+4CJ6Fl_+$j^c
z{UwD|Ey_0Q`naLDoWjPU*eZP?(mmJ6r1^DRI_o{{>MUB9LUIq7<HB&XJC<{o4B`oh
ze$B8ZNHQxWcCb$vI>Ly5azJhQ^Oul8Cs?>8m8{e<hbVYQeFW+P^RXR*S#d5_MT>a7
z&9oQ3s%OwijNG0JO^EI4-?mb|7hQy^MXE70h28q}P+jYtjU1RnN8RXjy<6kwK7+fA
z{ypRw>>MSZQ&FlO>qDr5zj6;y(dfCxo}}0*7>tOlH5b|Mmc;#2?KS~=bP8geTQz5L
z)QeA{_8HbO2Cp2+ta(C1Da$zHo4?2WCxyID|NL-O8dBo?Mm~;cT8-EcWz-U$INZ1?
zElzByrcRm`3T!1jNYX}0ET5CeygMb&l^ggAUJdN_Fw!Tu&2usuZybz7AmEAs$62fB
z(fR|D?%xxD2=>-3)vYajMx*6;*h{2cS1(1Y1+F@5wJ5pm(p;JwPX=t`W<-4rZ%>?j
zt8vT%DVzNyOWR97C4)Dg(93ULJBG~&gy8p?8M#ytG{Jgk*0gQgm83Ulh-51wL5RV9
z{?#<{)Z{IQIs0z^?egtbd9SL5fxG4vg$@;z+Ev$s7DWC`_|{?l`9Z5d!<0NxMXan+
z!ZN}3ze@FWm_8on#>#^xh4M<?^Nc;L?3cOd2B{vH>)-cp-L-p*>5czsi$GR2IDhwP
z{>eXOC`fKb=cQ%_66~-APEn;o3XWIR%(+h6*#bzw*};Q@ewMOZ@W3|;)Dei0_eP)y
zv=JUKjzK^fak=Ur_W^a*GTIC2Ph#nDYVDW}K}QE5w||dvK7LHH+3_#PgnTG)sKw+d
z>jfIG{$VjZAll7N6%Skd>&YPb4Hb=ME3z6N`_jlzT50c2_7PmqM`Q?aQnDm)Ba1^^
zJ+~uEm|w|4`z}FUg(+>LrF(5X5nBeqXGalO6=(JT?4P+0vAQTotMdJ*V^C|IWSow|
z_j%f1ec&p7jhh~0?Qu2y5Z6j-az6cid}(Sz9<xa^Tu{&ZKia|jUYP2YQ_)0LMH;sl
zPS+Ptg-y-_VHe>&0?fcdqH>u&?YSBz)^*{J(y(eEQb%WlZ`_0*0At|W1_koU3;)Qk
z#9mz*uHSp_#T{o<FcQlv0uCa)k;7D5`ZM%*|Ne-~?H@){9;Yxx-_(1oUZNDA6Hn81
za1`)bCS!9PoXm=Plc;M%guw;77PrgFuIMTfgtBW2<mJg#xQGaSDN0_;Yd)J9T3eRi
zGjF57W%C>MFbf}>LVz0|%V?2&CHy8AW+?>nkh+h~cRV4`6KK3DY&peU8SNFBl478p
zi9Aj-FBzQRDF^^wNE8sSxIV`r1bCH5E*X(!TCxep@2MKx<e(u^+$(s2(+M{3T4gJR
z_#a$=eDq6gZr-PP$_K1CMX@vDfEd6X%+B3dRiUl(oeLXV@0;`1<3`Ml+QH^~tUdgK
zAq@5CaQ5K2+9cF-4+z>9w5V;J#wNiW!S_|@x^&+Cy;?fI{Iz-x&6rEyHR_$w!ilw2
zY}imF7w9Tw+D(1VAN@P7<qX5xpw)(b>^rJlA!;WskFk2-%CqK0@xnHoLA7n$p!~QE
zLsrDGdcOo>-Ox$v=XT!8zs0tkiBiSq3%t7x?*0S^?%tRCtd@V2&@aUk(~yu}(4R5?
zz}5A?I^WhknnE2l1oDV5MW&u!Fk{GP(YMgg8%RthH$X^L>l!*`J~Y<0hXJ+1`vNf6
za6DAvkE~;yDn|zn8vs3OC}sQnz?aaPkMo`Z&K<Hw)vS6-#t3Mk6jA;%6@`HZH0|#2
zCGQ3mUOHJGDS%qZ&4mM6zwtYz4Hdqyq=Hd&ou|Oi&1E-7XOb2BKUbeHmNDem)oPak
zelgmeWd2;v1}}&bR@sEvT~;9Zu=%;`i!s{j<@Q8ku+0BbGx($~saI(%=;{%ec3tb4
zJzV<pb+|hsLNJE7tT|3SlY#j*xF7uIrqT&aClmz&9M*-H6zVV;pkjU&o<Y>rl@Ntg
zP%ThM*-#J5M&3+adP$zsP1ADGkGWdhF8vIbg(AmONb)g1FjSI=!L9=OE;X0PI_s@s
z`4z$Rh*EI|#@;jZDW}oSi8D?dKv`DSyOL`{I9YAK5lw3f1+{D78Y_nWG2xbas2g-H
z`$gWfv9qdx_nk0B?x)SEt0K!snUaBoEZk$l`si0kXT%r6Crq^0r_ufBOZ0WnHiamm
zQ9ZrV;t+#ep9`<WN@35(6S8EK*sE+PV8iBhECx&B9S<Tx+4;mX<T|ioJ5pC%BHdy1
z*BJ2k{eQA9VAO~&6jGOxG|~u&)U5@mgbf?4yLEi@5q>6fRXv)h_Mdyz%ItFuQR8lJ
z)|I1$Lxw)G+!O%ygoP&uvy|7PXQW`m$J$ST)8@Q<I&lW0Yl^?l8Pq;~sx&ASJjR>T
za1sB&H7#ke{x<vMyLWq3gq&u>Kyf|_elcKtQtVw?4ZJ}f?K2TKU`CGG)KhY1`%p^S
z%1k5VK#G?SM1&uY84+(W&0Z}pdbQ~3ZM11Bev{qOA=4T_P|NfZ*cG*a4SB&jcs}Ng
zL>qT*qb(%VA{DLp36tk53K2_F>KYw>8Ml<%pWEHJe9FdAxkG(pzWy?x)?Qw~C#-?-
zz&t%=h$e3we2_Ii6TwrAl_F<nJ}IS7<~x~G=lF+;dB6Yv#LpU(=lOX^eP;6tg;@P5
z^On$}o%s?0m&j{LobQj%W?qN}Y!BOL=oQ_M9C2})M{XtC0+T9|U*e`)p>`-WUXPe)
zj>0}-AklexhCy(e14AH|!L2}4M!K6<?NmjvcNl(rUV*>PJZy@iTP?!gl-IN}^%qco
z7q7-<+vD|nY-91<EKvPMz6tE4awF4*8W%{zIRT~@W)ToCPFug!>XwpFhAK-hVX7ep
zLiuE+mJzjY^0GbSfzmIF1K18291*Wo5(y19?r#O{1OJ@pNvxHF#43!y^fx(Ffn0Gs
zH7e*)4QFSd@`<`Q!qKh0pz!%~NKtVq5r2eU#GNbbDyrpp7)OfFD5nn(A|XVUYT5Iy
zm-rx_RJ$}qYCQASv%B(-97-=69`#<hmvAKL9P{r*{wDd9kSnbZsv+8|gAMcf25q|U
zsBM4B&-#ZTYU<{hAx^^{-Wv&^5qnIzUaJ}Q-iYPIpgSfSAWj#vEH_OKQe8Y5sBt8k
z_?+~x@3pXC4#P5gE^5Tcfe*Llt~6?FnBe;HaTJ3ef~opXF1x3Rk=_?8vNM;;a&Q@n
zw+<0|((O^t889=N$)49{#a`U4=4c(mYPYPB5k`_a8h`vtqlIyWhe7YpEjlo+9}ZL#
z0M`!3hD$GifjH}P7tlK79BVss6>&WgFDHBr2=iiH`<arx;C2!#eeP{!+_J!zwdyAl
z%MyMs8%WP_Iua7M%JTBs^Dsr92CxhrP)HS3D8!Paav#QIk!<2grOuh&F6GS2vGW?)
z_X=I;OT@L1tuxovJk--ON${6%1_An+WsGUl48`#;d}UZ9^VlD6aO4goI4P<zdWJRH
zYpY*w__Yrm>~}1bv8C@bZ*m4~T(!JJ>M!n**dRGftfAfl8gD)ESQ6)_U{Q3OJUEH>
zU0`fW*)E85_dBF==eeWy@ez<+X(|(~G{s&`k$gNAHzV^kc9@T(#q5V=@L<qDh`<9t
zL~W7z&w~p7J)de;F2`+x*YFH;p{Hbf;p3y67Mjw=$@pHKxB_N@lC4ja$tC-LGLLR_
z@=P&oyg2vFg6xD<JI0x?C0JZsTZI-4K)-<C#lPtP^IkasjnCIVW^|TbTRUQXoHsO}
z2^>%o@FJm2!YnU<Q)Bne!mISXM|c^25)+rfJP6h3ea}Hy@v9UBmKE@}SXF$l<<lZ3
zmfWn}VH$OSjaDlwj2e+<wmVO$j|VkX5ehL#s&=u())D046#xims?FNNMjft!O`WAt
zg0R4hdq8KoxVZrjPad?V6chuC_dp0tt))n*7GgWEgCc<IbB9mwR>O407b!oTj1iQm
z7f>+O@DoUDvDzEwZaloi0$y|F6fZ1}k>tLiZ5}b!Zs9<_waR>WdlS+qxA4wrlVsWy
zhJw1fmn#}T7TK~g<QBnm=n3Yb-F5(IR|604m#Mbl4e%on=^F(qT1+6*oSlw;5Y@d^
z^$_@3Y0j)hU|t{_0*Rf+X@sY+KI5}>mzt*t*dV(bsiRJ8;L^!LJr6rIz`=D!2wn4H
zKp75x8#^b>!&RcNuhuO%#1Sy<07K@Hs3ZZzX)QULE(E;Tm-Nj^+~`-AU0Fc-#l3Hx
z`0@k^nt*2nKwEGOpiaE&{DA<|bupUBn0SC{xLPQCsBK_S_Qr^P=){@w=ojiNsyt1c
zEdNd@gVYVahw>{=u;jnOcw{SBeFT0{>_wT3gyB;!;@nT;8aB=wAR!06wW#!qHOTmS
zm=ALuai^uRMJ7u@p^)t+s~xR?5VCK242=!x>klVDe4OVpymaF|U0UJYJ7j@uf9{{o
zVUQq@^Lq~pf{wU?)Z-`bZZjM#MDMuIEM5)@(>ZXIU<yX5zllZ?2+BYM^Vksdy<DiO
zVt7?1H!Lq0FrTJZ*GqP%zwc^LrYB^+ub88bg8JADOTT&1@x+tQ1^p1+4J}sYEfUKW
z6^Q<7>IhHu=J5hcq?AOYA*;@oGjFj(uPYyReos?3t88RyqjdqCp&l!uw(M8FQsFq-
zVS~l``5Q;DS+g-Zz9g|q)~+Wy^QHN5YXzNLrTU~)a3s~ZvHt})UGjxe?tFFJ29%?k
ziVm7#aR5g^xW9x#*|T&-Dqw!7Za5T^Q+83c7U87NG{PQ${hzOKIo8mVEAOD*C;b+T
zT=^1kR5(xc<7EbscN2?4uS6w{VrWnr<$M=-ZmI~1FU62tlZ}ltYt$JrWDvk9^P9xj
zu(;#IG}S&us<;vZr`)<&Azj^?z9n8NVvxF?X!Xp(jv}-qSB@>&g`mbd;?nkQ!VI%m
z3n;I{Iq;{Osx{*3@!3AC=SALjlt0kr7eRVq{H&Rm6MT<KqveFq1O3Ua6LvOH<Ee!-
z=-bl;wZL>m{I4HqnrUPAHldp)6Fi|^J}Z2L)`%CsO9EK*eAXVC(h*lfRtwFNy_O%}
zK`NPTdB~KJqEkvovwjJdfHDF!Ij~XSvg>$SxEWDZk(9=_)j#?nkD)lgORIF}=^9T;
zlkQU)MFJ|yEX{h2<$i0VwVq2Ga-diV!mFEAg!c{R&R<p#(z0&QG3P;P-H~REXe#2g
zrGOn{N16E5==L8!ePd@4U4x0@fmFoAJ#L)HX!SgrY7@bPrT+{Mhz~n`q5TEQ%DEuj
zukHUDIGmOSXa6wlAL&XesKe}p@^87u#WHSVGPX_`cfM-5<qqH;*RHm4tIhM+6!;4q
z3>Y5Aigbl$1I4eVhPP8I8u?v>J5-sprOSHw>UT~$s<14tEoCWTzN0=VSXgu1X8<u3
zl|{#3%0o-Pr!J(5E5C^j6@UCHZbuy<tf%YvKCtkW?hNKv)@HBr30QlkgOGzw0l8Nb
z%#7188@-exLMmh-4W<7C#3~1^Xo$7^OEAa>WM5^sq@a}0du_17BCjHeg*Z;O3vd$=
zjtlg+rp4F7f;Q2{uxP(8Kl$Tsz2Vpq1E=>~Rk++6l0M%f1c-J^PB2SZDAb&!SOwoa
zZ=)60cuRJ&V|hq1CQ5KP6=vfj;Z_b`apP(zs&rGem@GV>eJR3{9b|{C!=T4x9>pVc
zgYyt(#dNKMtv~%V;CpZ`F|cvl^+HxWm;A?<b7juh@f2LiN||ES{Kj$tZ8+3=eP|u@
zc(2_aU^~u#!w=*@f0O$wI~n4CKaQMV&J=VKrG6Wx%sHfBR)1n{+8(mkW$}K^ofr3u
z2Ca_|^A$A1f^qBPa5*ivxuRJ4PW)&2iERa5Tn%2sJN!%mT;fRTT!Q|{=8mSW9S!pT
z8Snt@D>Wv11q<+@2mJUJ*1r~J3m!8Q`VOlLYC!RCj{zxYv*LlY(;ABdO0J?n{SRH0
zPOt3=NTD>VGut6Qb!z>J@aHDd;#tmkb=m#N121n@fXMZ#1wrk=g?XcuCYSD?JfO`H
zq1&3^73H0jy0&JWiNE)WR`k`C(!pz|4+Li2Z=f&XCM=HsAKSP&i${Ee$jnJUpOCC<
z%0C0+JL19^Q!?TJhI&CuqKz&y7oM-3!Nf-}ERSlKy{l7*r^M-Up_2I68V7+>?kOIl
zvwh$cS*O%JM4{>wCy8#XiT{I4v<_8+@8Xzno~hPgwx&H?D}jdA8=N4{iGcb4S5G2~
zb58r@WW$^iLbj6L3fhd};Hj@EP>ceXxl2xu1=bGC2V%%J=>+C$QrI6p<zb}Eld|<J
zHP6o{&!qADx);Z`nFzDw5Cmwj8eyx=z93J3Qs0N`+(YJTI^-jF40s5NmV%Tnli;q;
zkJc^Dg+r3Nm{(j}r#8}C1RHCI$VwPy&nMB&q!1?vH85t{_ju1Gv?^%?<83-*ne-{F
z$ECeOyPSI2ar7f=E1+{{M&ne3A?P)$LnocT#Ky+;omf`<=zaTL{`gMMe>>a#SM1}9
zJ$UY;UM$G!&v^xLm>4r=!d6{~1o+uk0_1w6I#Vfbc(4r-mYlFs5$(6xxs5{CE2TM;
zg=J-ihDOjDF@=LY?Lt{Mh(yIRr$UGp@@Ga%+X0L;ddVP(jH?S5VWCFmnLFee=^c2C
z)pmA#%-$!86HYU)?3F}R5O}=K*2fkJ#!t)5oBYrc1jjSMwV>x)G{YR=W@E2%*f&5Q
zDM)-_hf?_ZzWE6J(M?16%y%=zx%{E=vPjMi%PAm8>nbD+fz5tcfwqW~&oj97?pvy<
zd^HUm0BrjZrOVvwg6-c>W=UQ)jz=Mj)iF+)a>je!uO1lw6Q9WGZUa2yV@?s$3Q4@b
zPK9TY(SRwm)+gZYKdHjL`){coW$f-Et;EP7EKWexPy%ba>eI;4@CJU(Oj3hJ0`!7Y
z3f;f|**NL<cm`AzM<sEuvR6d0D{BCEex^kE-9<<ME)ef4ujoI|Gx`3Vl{(6m4C_8w
zUEQs&Tr&i+c!l5d3b{U4bEM+cT;Wqs#n2_uWII__k=5Rx9Ce>bA=Bdm>9lcy-`H0(
zc=M$7rS!CoAJB`_%hB!^!<P(iaUXe#U-DF-I`BKx1BUY+W}^fD&~vwlA<-Dq4{P6?
zPK<GX%HXxP;FjCTGjHO&%E4dZi#19anqTGGxz`}9O~S+gEh$ekkXZiuo`2fak`E(j
z_5OZ2i5ubgzJ?TLUKZPouQ1tnqt>c(RYiCWtC`>V>LVjV@^>Ui!oOVo!Kx(N&kG@>
z;MX@x7wdc3e4&)gprV`@@lh(NHaX(|=}L<$Hka;##>}kXTkAMDWGRFL`P(awOu~)?
z!mp}ykuxx0=xKXhbFocsu%Hs6HP8PiW0Vwy_m-f!tx^KmwEib|QEs8&s)*Ud7AR7M
zs4;?`{Eh;Lei_Wx6C<tW^8Q^L@~jZt|7$Du?o8qgo~7&Tqxi_rufEk!G?5TvGVR$*
zQv1B+NSV0Hlb5gQHSGU<;W)OUP2G<2Ztc1?C;cUmVBDXv9w)QXXq1D(TgsO6%MHK9
z$_kaMa7aT8%!G;w{E2Iyr|vae@KF#h_78j4^W(V8Ue%1n%`3i=rS(JW?q!Vr0nl!R
zUXdk<+qmn)C;l;|=r+2o>@jFmVBbKc*-$k{FH~x%q^vE(na3J8Tf$1j_9kC$CgFlZ
zT~Yzey9o!mghgqj7=ncf5U^*2h12UH^gZ{J;1?`+TP-)JUMUS<qhc}m!PXm%Dg6Fd
zm?%`K7Bz`kXUmx?(Pz4yG=o(3U7`o_W|>n<m@2?Md%iVB?yCj{VOJ@`Mb0a=nx$E!
zY-|J+jG>Ub*QobiKR`6w{|?+xmhc38Ms?S#-%_T77t5`Q8Wg{#!&ZDfX0Au}wl3VH
z{e<?m1*QS8H?hedpj@G74nmGdE!-Sh$E)%~0~UThkYVC}B)RKsmCtzaEdGofT!4JQ
z7IM=(42pJRW&eiM#kv6N&FM^H5JmQYFxf(Hj;;P72qsdnSR|}x-#F~vLcv*o`=ifn
z+_V0-vNO{9#c-Zb2};O%p~#lM(3W>r^pGvPLDacWOTf<;q!0;B)s+H3amDdbNRE!S
z+kk?z_LU(eZ!Q2EekG@m2Xh;$AL5dKn@mmf|B*4E(j=G`_UW&|zkgKP^?UD9+7Wy+
z?55S;XN<Nx4RKjheZlha>95uP;~<p;C#f2L-Q>q?jzU7EM&&Mb*InxNzyJz0Vy^zV
zAC6&%e(IRNR6xkzyVI4JGOgtO3#zVr;gX7ff4uGKEHorX6n{^)=5%L%`!D|k`2Y|G
zbNZNW431!Bmy7b`RB(l0F&unz4P>fY&-oQ$`_I^_U;&&$)^b2`P*$ZT32n7WK=S>n
zoQ4C-b(>C_^CrC9ncxrm_}%Ha>ZKM%Cx%t$!}C^F=w1{%1rb-H4vagx+NU*;ECKjP
zoRs+q4ZG()`g{5lf48Wsn>i3Wpls}u`iUIXlkX)XAo^>E5D_eZ;r0q+M4za+;wYmT
zyhG!kp57HKY^a1kw`7^rBRBgAzPW%Lrra_6GEv{tiXqW*{Ylwc88gI>z`_S7Loan8
zc1$Pb(3Fc-Ibowlg+sLf8L;0@=<B5qyg$$~hFOb?*jIZIh$&TolrwcdP3JI9bC3=x
z+0<}<1JiOs8aNVpfxU%;(*Pi`8cA=C2Xtl=&1R!PETJrhUbOb(C8i-zo_@zP9(!fN
znrZ&#Nk~D8(;6RMS|U%5EwTX=hMeAb&3Y#-15n%EPH7nN@RP_)bRhmxnqqo#Gh8Bo
zIzxZ6xy3ejS8lLEIm24hl&wkia06JI|JuSDT)t&<z#Jxnf8@n8Z??vRBYOt^!#G5A
zVVNhuX;LFMVg$<n<=WQj)6cnVLm>%Di?HRLP7g`QaxI}f6Qu%+xC!I26CK8#_+0r4
zVAGZ<LZNwW*P}c;6514A2+@QQo>u0kUIMEH2c9LMbJ*DkwHz3*w-r~u!KuAs(l=8U
z=GZoc_;iS#KDtD?<353K_;xPKmox%O^=8I?%uVX5UgSM8x!DAD$KZbyDD2B_Sorh@
zY4tco?>3Qt8g@O+dJ*&`Qn2B;e(UY#6O50YOM&bc-+T?vgAHio&LHjPz14`_f95KQ
zTW8(p8O=m3JNFu(Z|hkQZNOH87!?;p0B&Rs$Y%Q$Md>84;KNFQG7^o~sl1hHAs`l+
z8?(1(C~fErr_U}s7ChkQiyE{zx>fddQaJ8U=llmQeIiRth>tDZq!&epnRt-*93685
z^3Xw$l&@yDWesthizFXxr|zG%^slfSY_H>rhwpl1F#~j9#&m8c{<<nui<m{2cYCH!
z-j;NyV&JoNzl(JFuxn(DR1{9_`TjTJew?M(Y4n=uGtNyi^cF02(kd55ZIMgh^em(;
zSC~jR1Jt@fS;fpwAZyfy2lo=gwaixS`}ML(2BPM%Yk5KP_I-1+52OJG8p_!()1)lN
zb<Z^c|2`vPC>;niHgE>}qGI7WM7~m~T`&Qj_(t}V9`9qjQ&;6$TgV@lvX5gXnB78<
z0BWL03P?4m8M=S+Ge#$%`p_!V1gEIFVRok=u5hw{H9#(HZs}qu$;wa88j|cER6b;&
zcG$zoZf-tlGu=s6sC3zWY~{i%NqEQT7Rngjy%`>lYg^PK=zEfXxwH6RJbw$YD7r<k
zW3k-kMQDP9_by7Wuk~hm{vG%ghy2FsF0_{bbVpUu---IfZJ9>-GV%9W-KZd)Cv}l9
z?!rC;c1M3r!%<-)01Ej({}6_b3c~0Bb5D*kwb6`*ZROU#opFgD>S13M(U|(#kmSkt
zdXgl(#!P&1DV$du6Lln7AgA~t1C{_2g~iv#QELKdEy28X=H{&a@v1E#%kmVCWUki&
z-h({)b*k163ZH|N$?r4F8d-JG2Cp2C=ie)j5a^*=JdioFj#jHC>IuE~i)ls~GkNj}
z_Fbq|=bYuhN5E1j?})J_Hfq?Cs?iPvp+)iGrUMQqR)Wn0!v<fC!z}(yzUSl6+45}&
zbPzdOd->9qk>{H~jsiI5k^5Dd{*Ngf>CoSNHq5B=^MwZ?$1@_%#dF26Nj*Lxx-Lh-
z%bC5yqYqfG(mVHN_R(W(m+z1CUdR2D37<9p|Nr?FrTskXP<f#QlFxTN7G^jxtW|@l
zgZBWs>e8W~KSzLT+T=2w@Ylx-fZ7T@+^f|=W<`Pjl<%2ZrFdL}!sFH}4}X>-Wu<z;
zv}-tn>+&l_u?<Ly1PH+54d_l{he`Sjn8?+Q8UWxtque{j3`DZh*J=W`@83?&H-*|{
zL6Y#2!hq6k-js~xRY6>arp+XP`@u{VjLPP1|5Y>cKI9V*!lMQ~d4oR26N+$L=+{{^
z+h(jl9QoYtcqsBBxf?|XjlT*zS(ep<bVVMDoB?+W9N#cMRfR^}%+8m(?Z<!$YhB|8
zC<=|qoCx6P{U}Z>=QE&|35A^2DOf<lbrk<FNCp;i%6mUyhFM)y!nuaYqGr67xCY)b
zcwZ#%dv&8XRS^~60jZh2{`lET&AD=<UPVO@huJXRQAA)v!ZE&nC@9ST(6)d2vuam=
zDH9BuIR7VMC{N#dT=&6ztK&tF5cGX%^iNm(P^r|WhWWv6OXuiP`k?i5_o^h@B0pyI
zOrKa-1NY)>y&x-F=!kmY;0UUk@>TkqNQQlC`%JmwIJyWAHRYm<qS1IGZcgD~R-Y-l
z?O#YrIsKsCA68OlZ}|^2LS|iZ)|OZ|WN+7MA_nt|B1bDm_vwTLxiI}L%w6E<ou}ni
z)kGuAfHUTN^NH=KI>d|k(os~_LR2$vTMOoe_MGhaa^3__Rrq8~kr8B?J;NroEGrqd
zsg7SY)Uk0gvhfNkh+=a81j5-2o;(_B77lFuh*{dgG$)r{-WzfqL{(}Z?)MKbQxRa?
zG%=pU#^*=qyri62m=iL1!P)^by^`&#vD@-njhFW%Qc(?eGM&XU$?!i3By)9EXnr0}
z9@oex{$e)GnpQR-vF|xRI}&RCoMPvKTt)NFkVD~i;Z)xT^Z$gGIprpnWQ$ijdp+tw
zjy{y4R@kQbmw^CP50)hnbFs(AfY6-dHwF$n=`c5TKKF$?`?r48CvQ=Q<P80YC_3kK
zlKPUh94<cmx(~RmaC~*~ADb)U*3Fl$7sF{k#X!FCrUZICKF__+J*z?<+}2ol@%*_-
zmST3Ds&!1+(`)gEh|_j14=rFl8r68t4hUog62y<3$~0UUP>&$0W*I@-<nRyWOoKQW
zfaw{02mdxmS~)&~i=%7>n|EVZGa~ZR!LSuakg+A@@yp$4kewfS$<$=Q!zH);*5NGg
z-`~dD%~)&Yy(V6Qtd($TM#Xi0t}|F#I8mZN++1MRe_cM#*9zDxRBJAsq!7Trm-a$6
zdu>3!#tq^sW(>T+nu09f(P%Rier0!JPybV#tHa>)(}Si&w5b|D;X=neCt0mgZ~#LA
zR^FdJHpH!clhGe>dE{@xziUa3?g#nBRvGer9E<BN)-YJRAOa%h6u!0fMm+gWn*NUR
z^*&fOCvh?-%?j_3a`F<oYno<S$wsNAku-5u0Mg>QI;Qelj=8)j%?9FoHoCY0D-QVV
zP=NH}S6SI1+_zOGgg(9ICOB=kfns2GSLIzh$6##`D{6-Ywz2p{dz_BpANb`(HrWI7
zwrd+AIJhHb&m(81dKb-QvUl_C>iak>X8Dj6z2;F`Oa%Pcy?jJ4EO<S9`>(i^@C^#z
z&Y++0bhb5SoO~USRPz_C6|a(WN=JSeIsY)Wv2ql1u{lJ4Dc<{CObc4IqU#oZpB7lk
zL(9AA9+;K4LqKU#OS(Z^R;-_aXYa5zi?xA{Z(WZ==OBF&9dvRUw|o39Zqo{>r2JRF
zul)Q=q;W}3uA^MV-s2Xbk?(t<S;h7N@C}Jf8j@2`e*o}ToP36c6GbYzc`;pMSGbV`
zc2Fk1yUcHy>!Bh{uD?t5=72)v{!D>s9rSYE%MA3>UOx0iY_T~B)%~kjM)Ih&W}K!9
zoW%x2eqSS$+iA8Txxax!xu~P4{zZ|jpoRAa52fD=W$=6NPHApR2|Vg>o$%MUii^UY
zCs}rx_8^f!7~OZkbkKCMrb|{fVU4PM@V9n`!sqQD4b41IZ)(eTT<;i=&wc08+C0ev
zleg8eJu{UYM(2Qx_IxNS-IGg4wDuW6F|LPRsv-2rk0vGHmCOLOO?v~y#0b@VnRX=F
znLYgGP7H%kiWwj$nG*@TM1O`B`JeVrqB2Kf7i^5PRH1cqO&-%SSb{5yTSE-=r_448
zL!7B&$?^z0%WIh0y2Ga`b$QUAXOLO4Am-%9iNkadVuv5P?6=>^@b^3+dgBe^>4;N3
z60vqhQy&7NV1>rpb%2Z`J2CNby!!*8*pR`_$-T&O|NSw12Sj<=)k!qb)Sykq#chTN
z7$Ok#$SPyO%n}LzYVnxoG%ss_svyVb#|*8m+Hn8%-^%_T@u_g%TNbWsF{#yXDi#~B
zU<fSadWcky(oQ6In6!e!J_P0|n>;~ox-QbviN{0dK<61tv^1p%#tl;|Sv&u!w%s}T
z8jKz|d5};M^pKlcCgjZMeN4u1uz&KD$0!TU{)+g{zIBDtuD`Q$8#gQx=X9#237FQR
zeuJ%Q8C{Vqs49+uN8;-;_ATU!6wMXwl-Jq%29Oi{B!Po>5rDsBKREYZ%fF@{x?(X;
zprCuO(&v&}9cP<Hf2M7V;tNT)djHhgRiL1<^tFHTQg%s7x<j^8!q+YsN6c;`%=Aq<
z&>u(sxv@ehFl+6vgI&t8ZnJJFrqEUK01*JN(tI!($}4SlFOHtmTW7IB<_Lj>L;(_|
zs;ER*l<*bw@1}XSuO<R=HgAGFwezQnplrqJ`0qA3-||bp_IAk-Eo!UpqEo9@IPx>m
zHf~?1jTJ~oKE6;t8@ErYi>_Kb8ZZmvN}m@iApyV{{vX&Dm2o&^=hE9>pNS69Tx#)+
z2m$>e)elU5;p{*A1`;l>A=)L2y`eopHR=M-R%|;HTp{B(R>gq|?vj+nyin64PxQxG
z#Pm+@R^#Ww5DzHQjwZ9euIh86wWba43jRgRnCNUHH;8ksZrAfeOa1G*-Gf66CG5qJ
z3XWd38`7S53eb<qY<?(aW-hNfH28o^0p)+xqPd~Ji~K0o80%g)PRUlD`0$U0MI*0B
zh>wc_bgGqn?<K7ikFr(Gcu&)VvERTXo69*bB_vxlTy`vzx?__){WY#N3cVo-pVkqN
ztIsvxe;`aH&`AqNng_(tX8xULFSNGJOgFbsFOJJojZ0aMlr4O4jlbJ#ldHy;je!MX
zgs#rv8J&lLuowfD-p$%n9YM^zgpu%|DEsk_f<$aaqNqzMU0GcZVpAK}-zl^q(%Yia
zLA=t%+&cN&_;^6q|EkT&V0Q>~Zq1M2(I$8f>6W(vY9>-Fx~QXW+J5jR$^0C{?~n7g
zu^3x{4g7O<zUA<+>mchFlWKe0uvz2Re4n_f&j%+_QD-%ku*Ml)FPnumx7!g7A*as*
zCa`C&==p-K@S$4$r`KrH_{+V>Rm@fDKr^gKlk)x`R{-P|*s7neEv@EU#(!^hG8Dzy
z$n7q)Hh&b;^`y-6M3d~W#aBwKB<S`WDuq|fYqa%5V1IYjZ-sij=pDqogB<HRq<THE
z_UR{aO`n7M!M&g0=ToScV~P~*N=RTNvFyz`U&{L?rLx3b_xv<Q)lG967P65TAYX2P
z-^ERCo}>*9?Jx!Wajnb?;F~F{=@z43O-F_pbfE`q+uv^=&Xbb}lQotMQGF0<*M)Tt
zok=-+;q86RWrKE7l<N48E)&0i@6a0nQkns$-W)0$VV&fq{ML}aq>7TSRWWz$WFK;V
zm?gyKbao>KVdCJLB-P3?Cd=e~Tn6i9(*eh$S|rpm*(k&;273*X!JI{ztdD4fhL?2|
zwyw#%2bG6?Yg}viYye1MNMz0jeT%KG(RH)t>V%Mtf9$5e8@b_wQB1?Z6TuA6&+;0~
zmop5*GJ<GN;nsx;ACx>rV!PY{B+xb$29>1R;l`C+Ky?4;6<E(N8MdbsQF#EnS(hFc
z&a2b)NntL&4kaR<@Jsijhi}N839}XH;HYrwMmWB1q%C6#$tWtWYZ#%UZe1S9K96m|
zainBk$|ta6H090x#gb#)DiR$U1nO@%l4m39=9?0IpqGyDo0e@EXsg%Mr4Kfmm1ppH
zmpH890v^p>?EvKv8997Nkt5V6p0xdrtY8)LQ*+&BhV@dsSMh*3(z%7x0?G!pG51T`
z^{t=K03%-)&+Wxk&9Q6u+{l1IVM*tpM2^bnY3m=kNZMbsZCOUs&$oN3qIeWquCd@R
zfxnd^cIBrA$3fPxJtw_y-s-R*L<P@t!ezVTUC?4-Jf3DNC%xso<~TUpG5XoG8jOY}
z#-Ezbg)Kj6Ojk(==u)bbb#39Jy$c&14{qGob=zl4<6)V8CF(M0>)FFMSew%6{i~VS
zt5|(1!4AGjDea52NolcL)|nkN<v4M=v;h^R5+e=3Au{!DkxR6bbNvm05In6qmvZEK
zGn!p~03KsvdMn_Vmv@k$CJ|B!R#G!XJlB(B?_=NWb*dKJwq!*aD}{kNv{acak0H)J
z3za|6%|^v^UIGgtLMsTnS)VMwMp5EpomBa7_I(R8Nrjazvcxp(2ey$DCOo4tz?AEe
z{1`Nhv#i9<q|WBn!&%Py;>_V+bjIarG*Ddz+srakg2gSx6Y<?^`qH@tg!gltT<#Ax
z0gYXaZ~FrFRtG1Tv{`^K`?Zq`cFFcbOeiUG8|zplEv6+BTePf>&brfG1JEwX87uF|
z`aOx(=@kwC|M@3DE|H$rrWROCquo>W=g7lHB`2|TXU(z?o{k*JI->K4#gSQ?us4(r
zpEm__|7H=8+u1((olNx|UT>fk5NBuXA*UHl{l3PI=<W)4zqwGQC!R)L>_tk&vA&3C
zX9%PV@6)ruKQ-u;;t(8^mTVjnC%N!1Jg0p)37{e<I&n!W4vNqs2O6WS>*yJp|Hqb=
zPE9Ft-^jn-f#j19!R?Tuth$LVQtO#1`4{MH`g>{$J+33Y&1gO2-R{5EjNW8DcTUKv
zZ8_Z!e`|$vjmk&|`Ca7z$4;a)(1uFe%mn^HEu0+ZvsT(|+j#HIxqqiuGo*J0hbCOu
zi`CWu0Hk<=y)Yl0q03^Er8=nYA>R&hc+}LZ%lyK8Z}GHqJQfDDlRRCx?bQu}HLYT=
z#|F9Ytt)Zl6qC_vG1lVNp%tLLe41`EAv6TdBH3e$-RfFsYt$58nVDh4eFkLMtkG%U
z8T&Hbg+lj?!_yu^*nYNcL`8N=VGO5~GSX6;u@rphz7EeVqCeqq;*^sJl-H8?3thNK
z9yy8s2H`NH1~4$n5=i@s!hZWwElAy><>xKCN_4N*7di%9_ZjQI_uaK<K$wuF@t2Y3
zR+{eC5e6FL$f&_hR4QrIpN{XX+^|4gYd}X3v?JAzfYOiP3D?wwrWTp(RugyejkR=h
z7>Jt+L&xBh@_B)v;OO*~8X{%+d@+?n<e6Em|1;mhWn~)2wlVQiZp<xPBl#<83`QUE
z(XWY%$PrngvE`s?-lm2I-+(&QOlpFX!E4~&yw~LRuk}*l&^wtWT$uh6FI=Q)^7MyS
z!OhPUnQB|6cs`4uQ6bxw+BMawD$4dXc=Gi^QZu<ZyxCw?R;;_*7Y6_AUx<XsYn$GF
z@4xx58DcX06@|-oeW(575~hu{pNnySs{P6Stv@9@vX9!e24bSV8K7>8QN#n2&Q;w7
zjd9W}<_cN+XoJfFybeLFlju`IFV2-Obtg^(#0{<-$qUPgzy*O#3v4TjA-rt(E$#Vx
zg&j|CWQyF;83EmY<*WwpPZw1QG3?K0VJ3`8JnQeQpMxB)w^X=C;riQKdO<==y|r1Y
z*|-Gn+p4uT>)Uo2!P}B1kM*&4UQGhTb1JM^y#D)_KC<TLYkqJYP?gdy0Zipg%L7ar
zM&1Nj^7)E|j1DJnTTeMT>dPJ^<u6|87zkfdZJe1wtYIesT>Y!|=6M)m9U`Pa>)}&a
zh~7D*f%y8QW7;c--6Z7J2^&BEW=Be-RFo`kL*Kj?vKz_^3>kkU+0T-)p}{^A6K8#Q
z>h%*%g3?F{_mvQRaJR<t_|<RFGO5KlSakZmzlG%Z-TA%CGnP_^G5v-zfDW6K0UO^c
z0otmbqsYsCpo#DJ=4U^}MV1`lp<vSczYsPvU>eM<3W8Ce6>NDTiIm^iqSx2cqY4=f
z;s12S*vp&xeOb--2aMfQjwuHBm2jp0=wm7P&oc3fU^W0+U^V6YS{%$839xV1-JYPb
zXQ$UHAWodpgT)YfH(&Na7GLo;pkY70SJ*+47H)V`&d`ez-ZwqGigxa_WU?Mu!J=}v
z*tkb&=d@#Gu;-vHU6Ve~3-qY_k*CUHVVu^WRmya<oX<Ra%>4eVYv=d=#aXf#aq<8E
z(b^cyi*CBLpSvthAcVDUpjY&qm~3b8w2QPtw`FfIw5zw!i~u{>m_^bkY!25ZHBpwZ
zIA9;67k5&bBA)npcPz#c7Khk4sbq7PvryePkM4K;ijvA*QJrMx1=AlZD@*jm?B<Hm
zY}>od;6wG{<pyPkw(Xh@37gctMT2VA7Agcy-THj>=0sBj=)S@<9qczaOnhW=3woGI
zplhkWGcLfFo=28c-lo78BHYrgecP>EC~M)?73}0VbVyXId<+`vjpELMhz}dKPeXhw
zo4mllJ&}GC|LuCK_#rellN5ylpyy!-+t(#{oYsvFQJ-_gvZFhwC>O<bmQH}b+VQF&
z_CV%9&qwH$HNF$NyB_>d=VB;~N`Y|cEO~NwbJ?DSpc*z)ptlm>otuTGx#+LLZWKlO
zU5<0oz?}HsDL8KQKW2n7v{0iwk5V@i?K(`#azR?f0jQpEoQ=m-@5x4{b2XO^Tnv_w
z&bxx0)d<~QCAL%^s*YzWZtI3@91K;hPG~A?BA16z6Y}>&cGC>L;Ovk3u8~1PoA}44
z?#BMG`I-oW6=Sl+m0OJ9F<Notldl-us7^%+Uf=TyMRdH+I=6o<E|`?N+a|7-?sMCu
z)nJ;(y{P;{;|e{E3fYLUd`|_cpD!&HUW__lT<nBL7j&Rpw+i1oEe)Bu&MQ-l(N6sq
z`vQH_n;+ve&h*vgstY2AcpQZP-~I$m&yx7&FAYM^Emx(SMqly28t4-Jj?DR;5a78k
z68U~s_&za0(d}pob^uB)ZjOPv>(MIyM-RP>eru|1fEX!2OM6lmY=5xm{y)omMA7_{
z$!DjJzNZweuUWeq4TbopcgUgz4SZc;ZnOY0V4BsLs;spiiKPE14*J1Gma$z`Om1ID
zHC;8)l`H1MXEIM5{Lz(*O!G{G+kAkzfC6P4qplT`+a>!6qB@js8JOk%1AJ2ZYCw;E
z%P-sE&Oc>$y)l17wJe*0-2Iw-WoZ$F9zjCJBMjK#yH>9(*D@5wY0aP#-|rdvq(UCJ
zz3^^0zs^$o*RorKk~?HP4QGKt@?)?0$Ku1eDk8WK>wu%e?}V#fBlBs07)%)S7@*ZV
z`t|*rJ!uQK&#MaahF}P9ozdwnAXM#q)hxP~el%peyBRi6lifK8-}>D>J$t(p&mnrj
z#l%K3*JLflzezI7dOJvdAfj!u<x~h+O)pQZ{{tZ1>o5V#WoUlx*$nHJSuv9c8^7Ts
z=-|@i36$HjQsw5dJ#Q`BtH8*ZDpkUMHJrq&Hnu6wPI{@PDSE@jz1lgz8!Kwhb<fsY
zSb03ECMvI4iJf*4s}U<~aW`{XKI0Yi{l>X5x0E~DDcf==LD<^}>cK-Ilpi2Ec<38+
zz6QrRlIFg16KV<PaK2I6Xi3fDC#KSV=H|Vssg3~>H5(d*+Wtzk7FqebyBRpgS?k{%
zKKU`vcPiN`#(3{2b(q~<m;L4?451^E_A-(Y*rX~%8b~i6S2AeyJH8)A0|x*dKizuM
zF{tAM7AI1y644l8@sI#^5mCX~DMixW0YO=DXySx7vOG4LK^Na59JuA}W0;%3Bh|sw
z+H6)Jhd}VYsMNg0(A<HS(ZHOQ2a4-^pG;N73{I4W5k>Jyv{J3c@GVw43osND8PddE
zH~<`18XRSBhQFV9H+eCT)lzjRBp``h#}GPsn$%!tH(xFene1%Ei|%g%i;}Ubhd0;X
z4p=X76ls-RXxOkPM3;iw=SwnMJ6Z-lX)1^+UEl9RZ;`E@VzmhpY@Mk~QHD4k!LRh8
zMk4kAylDl9k=uxjJv<a4Yj=LF^M^*xgTfggn7#u-<~_fJVtH%`ZErX)>kPZQ^}cyO
zHC@HV9&Gvyt|&ynRO@YP-{EK>T+T!z-GHR94~<@<yS|VHk>RkR4PbN+`}IGde}t{T
z_MDEi-zr&H7mt1MCS};QS%R@iN0f-0h00Td5_Od#;%Cu}zh<aE<!MkfiL2R2KSfwa
zVS9R~gQuU#UQklCQm1#sno%58c?!5tZS60y&Lt!Qa6TpR4&X~c>ZiroRLn&N=p+JB
zRylp^BpF+)cL`02(9$h`f&UqRB^|hD(bW^L9}M5SP4HxVD1G;H?e-+Wik2s_?(80H
zwm`KGqUWZZYio;3^(TGeuS76^FhKNERa}diV$fQ#>^|k%wczjuemzZDub8ktJC4xg
z!Vu=>?^h13;4r$huS+(AxF=TobK;FpE79(%D1-_w;p7${F@imR+d!cH)kpM6cru6$
z6SYG_`zRe2OH?`P8xzNG)Ps8_(`mPvsZfI(G};{zoF`4+?*wsS%19V*veCapHn%6h
zv2IMGIIN{RVSAkAz4>A$i2*EJYTl)3$d3rZr1}}b;AXZ$VXkn@v;*(d9<z@Q;=oqG
zjtffiA9sb+Z}Pp298n>_RizbQvN?%<%#o|q<CdEeP+UlgWfJ@~z!P_riK^slB-X%@
z=KUg2ZXV*^WJ&j*fjR1&cRuj4|F3*`N<g=VaUuo2zo`d8FoAJd?t{^v31jAog7<Lf
z=*H+?-S2>9H--%@adFB34RG<&Sp%rG1jB#T&BXy_d`veI{sA=)U;A02{X5tUDC6V`
zx__6;Z<is(BCd5<Vh5OORM+=j2GEF1_@e?~Ag6oVZ&nWSP>|;G85hy>#lBm$a0ofv
zH$6vxGf5L-lloemoR?3a$2TXdOm!c|=~n6VnE(d<1=7I*gKh*PrfE(?FM?nP71g5y
z4!C!nE(j2yRJ^R9%c2<wbWqLB@JOrViYbo$v0-7vPBcGBr%+7Fxr(znH*(Uwe^Iic
zsq_TfG2&&Y@=ME8>ps)W-T;N&NU4B(tZH5iiR`%@MQ>ro&Vbs9SQCEqx@ndE2GK+g
z9?JKc_qS?rh|C923@5m>Hz6{u)o`36owlvAjqmm`<LEr`o+X-WMPae<iARb)fp${X
zIr*wn1h>1ZXjPYA3qPSkIn#D%`oQ*1G{)b^Z7X>CKk7f_kxydRhGb}PDH3j<pCD5}
zSKK?b`|I7aURI4L-}O-cN1D5x7*MT(Tk!s}KbjEK5f#EH1p^a4TtXJ>93E^X4q#0I
z<7)SMc#iciqRr*oo>O2!UURg6y(n4~1awu<@3qvCQ5qJ^C+wo@3pya99<0xM<@2p@
zL~H!Zz9D2~E%7@I#S!;2sTve4$CEpEp-=<;&sKjQn)B=nl+)TaGu(JfkcQz!V8ciM
z+(45wxiqVmuBWKh3!aY3rMFxvMk%Gx{KGn0DM-<?IXu)B{pSWcc^E>~{5HhM&tW9_
zW(IBO_E1n^u`G9lR$YChY&(p%8kKuN*NdS&6Z^Xbi&DBS?G2q4)@KKg4&S04SE1xa
zZ`R(ni~N1<kF8MEi6Jr)yL=GDZJ)<X&xDi8J`9u)J5Spb8@y^gSq7a6S(UXtG+TX<
z5)Lbz5|y>#I5*+FKzLMXMwPNft{??xrfS*|XLr%8z1}09RQ|-njL7-T$?@dK_BMJx
zZuW(kfBII)&9?c!N{bfnh;_eK87R>-5neV`8sV+zrV*Z}HNV=~#MuD5=yPySWDw$2
zu#`Djl=UF1AR%DmkN3_?ai<W2FT>gHpMo2i2PD*vscYvmvo*jKv0>){cjt^E9~)ly
z&4@}A;^wV+zB_6lI#K`|D5D=J@P{jGqszKQjF)BjeYa0EhPVtTy`yjrHnBk-6;TxC
zm}!{()Ovno4yhtnU(qW>axpT#)vDZ$d{Y%WoKb<G0R&I!)TB_mgu}HOXnc&brnJQu
z9=zU9MUK)h_ay0CcE*#x`B=vS*!<@(!Y1(2aRK`Bbx|D&hYCDT@R;cba<TP;JlSfA
zK8tIs#l3|l0DJ?)*QGX}#1f`SiaUNLa?jkS;D~xca|*X!@AI=e9Eny4Y}pld`t>P?
zM_bhPo}X^@zp?{g{rd3-kVIr;=jIRRdkyl$vDa-u+Rl)ZRkKh~Hj~oDHu4D=8`{q5
zn^8BGp=7m#PR<c(vxy>EbX_-)C{F(Y`osc<ZJ`aD{4N--R#9m{Pn(7e-X-$!+5?o_
z25hdUpolcG<0Bmid;ozMqs>qMH<9l~y)k+Yn8p3)XzZze6U6<gSu%Vp@@OI&l<0($
ztiL!stzhgR(r#+7`&kHl7Yi_YI~LE#Ew&~0VM_aYK`Y(LcB;f-pEW4w9$NjXeIZ<O
z-Mb*0Pisf+9yAvKUK1ksRlt>pLeehzVCQbLIcnihOYN(sbLV5AA-1qg&=HtVXc${h
zRcy_lG>HX#xKU+S3g|!a^u9b995DB~9W-_^E_GT+l1#O}9}e1XvWBOGx25h}F%^-+
zlZR0>om!pZ|3HB$5aKey&&*REI04E}srvI8Wz|S4`X!;v@ga;8Y+?>50}mKJ!+~S}
z%3pb@t<RsMK2iT#Pf)Cfmi;ovM2irT8;qD4^a~DK0l{PDg*^dPGY{fuk)Nozc6K|W
z`b<Z@Zjkf7WILEOG<A)D^?f6FiOYbOR=o(q?7a#YkEg|?Od;v8Q4^GH`f<9FCp?<{
z#KQzCB!*pLt)m84vw!<X>K7;E#Sl9=5y3`B9e-R%!j^=7(Dxq1V&v&Z*T+b&CKp~k
zU?i|b&SO5<U)E}G7UvzyjY%`{ra7a9HZq_v;Gq&g**dH23mU>S<W=irn^@$^nASRj
zGd2(P4GZ_L*wR&8lS)&YRil@ZRo7HaDMPlM$+4ZMhve!|vl<#Fv~W|v;eWKrbLjGk
zq<(aTk-&L&S(l>9eR|7zTnC64umCiq$z1!jaW;wBoI1<fm@vy(c_ohwd!uounleH8
z5$4lr&Q?i7ICfN(#9#j8xD{{vG=Hy~BxEn=E8~M0YbQU5W8S%&Uz0)A+bTea3LLI+
zdPg-jgNjXG-S*=eyg<66^8mcQxvl%y8}R`~Io|VOneRJXd^{0>VcG@$HuB#CW%pqB
z_WP|6u0%r&((?}HvlgZ?Q`aLNT`0Jdm|^0HfpBG^<saGWw^WjUOVpkr);6|07~>Un
zf{xcGOk1iz8Z8%E@av2bhnRK*T|{Ml#w~8oW#hOlrpuD+6_!&h1^LiFVV63V^9gh5
zjAGmIY1N8^u83Xnc7?msZ)$zbck-yhS~+uJ?y%g6%W}J!wK%kX(6#C%=P|HHmwuk6
zuDdsaQ(TgEJtA9mm0cH)K($i-^N^HM{dY!VBK4%lcP^^R0y471_}N$)*t2Mvmum&z
zc94QKae-Z!k#@Lu>K``PQ#J%p4xOcf2fFhgr%0cFQZ+WO7$pHlX?+>tB3(D>`U=Cm
zOknHxIKvg^5DvSXeQwKU)C3Di3@g(Ut`6fn5d_yt-)3KgAwu1eU-$=YZL?;Tm58`M
zeR)<jHJLs1n7HmJ3T=k)NLZtiqa;{it7urqWk9Zw5?vKthjoHLf{(Iz)b|p<A}XAr
zI%vCRLOk!n-wuVds_iZpEKs^VnTl=Xzar?L@tydjHFVJ-QKmg*NspdkP1skr452<r
zn`OFKbF@?wLYAd)>cumogTHbxoO)RprKxnj_ESQ{X;7iS>7J2B&d<YKFL$g*`hzn(
zEOFa3ndn?3Al=LYZY@6vVab=PLe$Y&6C=O?0I56MQ7U>bnj6{r3SdK5u{@%qF*}H_
z2_01#UX8+z#d433^fA4X?ziQ|m0QiN(R`o(XF?`;FS(>1k^l1Z^C`DV4z5|`&ew{a
zxOYJE9H+D714u^MENurY?8z8@fJvQgF0nM=<t<a;Eu;23YAgsp1y{`{r;>t`24e4m
z#365Ravl56J$L^t_A-Nk?PsvB=dR(G9Y^H9$lPF!qW!7+eoBFQmq(A`hDy~3BUwp`
z)r?NnEF9LElM_3)dqZ9r5iPH6IS99UwYJ*ucb}x=5-OiGg5qovnX+oN@E|V;&u~+^
zPE9NG1!O10ZX`vwR+f-!G|rnkYv{BE(XI0pX1BkR87$knZOWaHPG%DB+`Ifbu9QV0
z4QnCkEC%_2j{<5(bK=YtGl$YvGUrpaT?Ep|!<K9b1o&*oyws|M7GrbZ4#!-cX?Mi2
zJ%jn7V`NkR*a{XU@7lI{6)svgnb!b29eS^AM$=((@q8<-m4lhrKmI34;iB5H->Se#
zN1y-x1%F{twi8nmN#BwD4(9!8otNvnR5P~mPtTnX2PGQiE`!80t6~5p%b=gd$^`GC
zq6NS^!Rk`w{ufe1>zJF%RqqZa$y7#J!ii`Y;Z#PAymhAZv@zLFgI`ff7#)+|n{XnU
z^Vlf)y$Kgu*KBj=$i6!?$3`xe({oaxG=KzgT8UZ$@WH04O!6A2wDpw*_;(Z`Ad?ND
zt}lZ&&aD#9h@Wcs@q71&tHtyuTzE5kiY)h2N~j<<g>C_-uTXWG5z*wCL7wEV&%eCa
zXSWa!k1S;&dYB!9QV$iU*|Tc(>*7NSE6s=rxB&HCG*HZZqkm1HFz`&Njt$l~G}f%L
zBkfST1M~qjrQD)X-(k&E@)W`5d=7+}gX`kr^8&%tMWD34R<@$W-7I4jxl9|PmtfD1
zuR8Nx{XN-}(kE-Be0ih0Y2_D}&t^2@FVyuD-|L_F-fM3Z1BCW<hM0z*5rH*;mB3q&
z8X5o~O$yi<0A2-&YI)iSBI`NY21xiQUA1fTw+lHoL>m1j8Iv227#aQD^@_UMlb__%
zDM{UZSsEV~ygF6qqJ1w~%`M{0q!bd+K~v=j4b3mD-+2h87=k{rx)<%FwEf14)q3M(
z%en|We+M5!-GzpHn(p8leDqZL6b9+PV8>y)0V;p>Vu_-g-j?hLJw>IbDYN)hZ)0x|
z%?j6X7x{vh@27?J$ED9#h)O*xps!vdpcBztZvT5>E11>D?FFB~RPtL(Z_2f&<#EIP
z7<`1H>v9BwPtwE0B02SozK*14k^FCAaNcL#bqgKU;EvxuSX>1FXNX5_3zqg_$oCzO
zJM-7L{1+`f0vH3gbGd1>n%=~sSRxSRr3|2=H~G+6cnD^Jxzei3d-Am;Xo^-uhR+}I
z$CrAbB`@PkgA(J;+5l(u(pudpJi#8exDUaP1A{IMc)MfjNDUXOgfm?SP4K|?gtL{t
zlOi2B0$0jyVDQ7lUdEFG@BxK=%|}s}rvbcw%)3;H?58VEsdJG$Rw8ZuZRWe*TKQIZ
z2nyC!^x@?$nx#PM&DXQA!Gu>t30S?GLU&jNETYpn?Hk$arV8kju(hmO8hYCP)wLo)
zJ6Y8_z`hA{veoj^CrOj19d>|f6Ws1=(Z7EQp&vy%lJcgcRzG0q+dN(DVuIA=VN+TN
znVO+-^$4hXpJ1OqgRT|rwWdA&Plj1_<Ot!?TnV|^JzfPKxc@45iK~Qi+yYx|x%{1G
zL^R3+3_PTixl!yt(j<CQt{X`P=<4zyWxFA(Ci{VGTINrfbr5a#xu*EzF0MX@vh{|)
zC5PIO)Qb0x2qyIAH#4(EiVoM6S|Gy%>Nv9K+<6U~@|7K;Hw7teFkcqDex|dr`J!;p
z;LcnjfdJqb2VWZ&F_gJUNkS2<*3G({Qr!e<xCg_OWhYJp+0NLK4J|!2>N?n9a{s%J
zc;~22wjvgia)??ts#r)#$GH8!9+t`k*P3#z;)2?=`;t?{Lw`>UguVn`M+{-P25S91
z_DjxW;=bIbtj6Tsre!$hZy_nlF-cnOFH;0+-6SNG=^Vqchb-IXp1orD#S-1jk;%us
z@7vqkO)#$JyxVtI<daR$v#Un*Qzeq2^Zqf8z2ahFV_1Si-^fY8z9+bG>5m^d71F#~
zRw>DdksO^KJ0>-Fs?k)FDpOd|Ugm1)b>(8BGP><-JO0zO?EODJ9kswPQ;)20hClw6
zc)G|+fIboTWtNrX(v;P_TuaF+FMo^EwP$-M<bI7)e4Mh8r_M7}T|G@$NpLunxheu>
zl06vzM1^)6p!<xE@K84Anp>i4pP1;=lv1)g-LW^)n2S%;9!x720Cc%dm&iHdzP*ny
z@>0!Y-W(RqSfr!0jaKWIoxGAo(*I{DZGf2R#$oeZ<3q5pAQ+P!HZz{VgEHedqe1`D
zX#WelM~2%@_SZ;S!3UP`_lC-6oAuB#H#_d@8OlFDa_uv5*c};SL5dJC!eRwB+-ZO2
z>n_$6P!s;Je5$qYy)if#Ytj>s-Rcn^V6qMT1RH?El*zNb2oJChB{b6zx#L%^hV$4z
zX>uEc>yH7{@})i5=fN9bqkQkXwv9lcg96!@HCG6Bs9cn=9MFXNSoWBuX4jv-up7m~
zoS`xS6y-Pq0fP4(O#=K1v1l4Z_^Sco8H9%eQ#o1frl5lT2*U&7;pfP}TySXm={S2>
z8SK?Gk&85gM9;wV@)Dy$<!5;;u1hd4E48EVoyHG~8}zqVZcL&R;X?~6688G24l{Sc
zM^$o5^VMyWbaFY&7TYgEI{cy6d%IukN81EU{uM{Ogo=V&5*p5(jM&#7X}<jPcCXJO
z$)R73ds{hEZ`6?0<leyX#+XfY!p#4=iS-CSrj;EpRR!8Nq2dvt7*pcMwbVwG&Akp;
zw<=_RooqoG=?4`T|LHxFee|bJ5-m!=I$99&XVrS~DNvwPohpa(=YB8LRSE_p3<1Rc
zxWzxUxO=rI_^OFB39Q1TRlJu3?fh57pfRXrvE*W)@$awYfaCD#{U?|-_m`s(q%0M>
zZm*i5W<1Z&$&3osyOf<^J$kKay0w;c(39x~CzIY+@g75iqZmxTa~9MJmny!HMTp7q
zPXN=NoRwi5q&V5UqiEp`y!tD@8RmsD<MJr(^fM|bawu<;Ir>W$tv4;FRCO!A=@9h0
z8lDp%ACM|<rO;#tKY$C!NVKf%mOCR|TOv7!x6Tc13s`D}WtRhs>qU}#f-m3u`hlHm
zK5sDci}b8#;m)-!`JNKCiYc|01_?f&<L5Q13xSs?iOtAyA-jIj-LKCa;NPYH>}C8U
z*kr7Kb5wQ@bLw3qHJ~rCgdQu;r==})T~%WhdIy?(rXDlGr4*F4&M&3%w&t5{?XuRq
zzep^0_gk8XXyddkunCoY9%W=0TO+>#`6}U|?;+DS9Ez&bK)e0N0N_&TD>`H;OT_<8
zAXHq~4n-F$Ct;=980bY3UL&F(WS_#VAi+airyw;u(QovOx){ANyJ=L-uGLOoihQ?7
z$$C1YenWGeqJ$H{tZd|;bcC4$jQ>&zCH4RUe3ebx)1^tx1}FvV_D6%paB8r66_J+W
z;taG!vFiNKZ-IP_Vo!2v;(K=%;tmurdX6ijz_Jj)O&4|W%zd>At-bl^+HgP<_s){3
zO2HrYJlOJ)kj-(Y1^h&LS-H&YK3fU98mFsu-U{h#Aao+=8_H8m)#w$!INzbALNnY<
zmFDqCn07(~^&m(V%XHx$&YZp31|)8ByTw6W3=&1eUQ9iol_gG}lcp;f`QD+1XNk}#
zs7*kaR2*n!bhh~4+T{qXdV>RueJMw^989hYg)`^CJ0xd%2NSOW{GJb3q%c0~3rkC!
z81~9W58=Ya)!LM`EChWTkk)fnzT=^a$x|0qhlLE*{7FXaZ$4hP|KYy1b!r0vA3hED
zWtBpxUxX3?sD^fot498!@3Py8A<2E+lkE@2{KO(R!R%WqqCkvHBMYh$j5b9&x@;|<
zzD~L2>AITV#EskgKp0_<>n?h?759tl4uy%j8qSeoaTQuhZ4=Y(0kW^OGFkEN(Ts`{
zn$j7aG%D0qG^cdWCO-MI2IKs*h0OuiR>x+&e8|+vwDOJ{d|PeNl|sj&LAeEO&8%XK
zer!BoTogj!filj}3^s7!?oL(U=mcYx|B}YsKU8V)uiBhNDaAC(g~m2OqMs}RhJjzM
zH$N)=Wo77lL(L+7#G9>7%PP@zrbtbx)%7C&@e~SkMbk(d+zwE?;K<whwn3$PSzE>e
zc`|<N1g?bU3mfsha!9+FD8K7Y3A3~7fmX9Fnp!M<g&v97XU>_?V?_O&Bk1ykKYX{=
z591JL$V*UbB`r8XdUwymcH~I;&+1eEefh@!S@Rli8~{T=yuW5X?6CMxi?Gm(v)}mO
zM<09!1CE(LXOn&7O6{0#GqF5lnuRb_kMsf7t}PnQCqbqn*4jNs5t_FCE3#gbGAAQ3
z*%Zpc0Uxql08ZwgAN>3~c_KiVs|QljAtS0x04lKy!Onf`xiIv?29aopKfoc;y0tXC
zHtTpczs6|5xQnXSc^?5CsLf)N2e5u5$YcJa1t#+?eFv&rzt>Rr2S6)H7H`QKz(|0?
zmxatXX)9BZZJ~YN%FX3m_NYX{{v|(?sJQsd+p5v(SV>0EXHdI8PdZ{gT4~`EH@O@o
z=5(qisFJfae)m<RCRJ&TY1~DlKHVbR3>R38gAG%{g{yP|kJwh*87F4M=+KkbuLZ5?
zh`3F2BVrgby6A8FYikL=CHq~K?)=1y=_1@lq?w6?mg4kMK?_}8g!vw@wc<Nsv_zMp
z{s(&;a_`O<$2rAfrEv;dUEN61^Ms#xis-#2>pT$CfcfjjK@T4d5Kh+pJ7~Fh@a@S{
zX^q>XfdwCWH3Ku+@WQA9o$QaYzKvp1`bZs)X^a`ft`<IJR)K(Ah&f^ycZV7k^OanX
ztXjuWtxRoq^+z^q4xju(fy`VYAtJo~RLm_Qx|<v_E!Tf*&DUN7$DK5a1SR`}{Z|Bd
zHT(Te$5DV<q7_1CjzdUa<*2r3b)||lP9o96ZtmihOj1nHdGTaU3|#akUKq3zRERKS
z3R*s7!9-Zp+a3;fv9vHs<(5r-_n=QRy#VHj$|H8fS<F><G}k~=2YhdeCsbt1)tXS=
zc#~7=^U3BVFpa5wJOMi~UV9n%Wxi&FFCJfedTKHz+rtA3y@jjg5UPhwWeV{Y)5|&Z
zN;HLMFY6bBpS<xU^XPgTz9!C<XfJ?8qh<*AnU<oC29@O!O{ZcKb?1My(~Eqyy)Ql9
zRJP!<Ec(s%1*BbhqNdn41F^)-Ha3OfVB2dsNPO_~u8CRtC_>R&s`2W_cKulb8E<yR
z{lAaJbZ~o|xYz&_MV2hKg(=!e{{%V1X-~QaD&>oMS3=zd+Dl_-Uv(?yqEej_&e_8`
zAW9gNM0vITpHSZn4cTk_D!l$fP%>ei+~^+0-w^P#sd>+hQhpQd+D@fXzMtz(t|Y>%
z`-<%;6~JugG15!;57V<*@tq^^1v2y?Y=I)w#-C1DK*HdAedZ^6>D-HVB@?}?J25g|
zV?Z78<DJ65ThBsf3zC-GW&S(@Ys0Zthy+#it1>^g_)R?K{o()1%$+&e^NE|y3AXuo
zM9`0=s`Esr1_4_PpX@&O#M1YqPxU(%WL(THO5*&5cv)-;LN-jnpbHPtF8+z1MimQk
zgj*js)hpU9@EO*&3r&8Fqg{XZ`>OJqs8{Z)%c$k9q+oPcclBV`XN`c>EbMSl5eZU{
zSrij+J9R{^hXcE?WR928KT05-?ZC<7A#~8e8A8ir`LOgJHhBE;uDtrmv@Bb{aM{Q*
zaNL^mH}PF13VkT?+i4@gzo7b+gz7iMP55XaQRnOpkz|~%$v5~fE#CQ999q;A;_{V=
zll=Gcg|9AM+Sus7Z_GHbExdn8%T|BDe#je@!ARxsZP{jQ*Srp(!M=(uWKtjsU5%;>
zN*QU|+tE$ZY1I<-{07|=5LNqCxtLtIaY^M~XIKR=%P$8I(^X0($H@Wd<#<4kV+(*}
z_ohN;#a+W6yGE}_^bsX`iLJeAjfa+M;MeE9J&Y7n8W=W9>KR<FMru?iGiYvxN7C!*
zmE{ieL3X1*6vAmQ5hu9)jTnE1CVnJb^sIZtZz@pU6E+CZN3pCvUrmD}5a5-k?R@S;
zq4JgaLaLEMB>?+Q3%r;7tAQfi{BuJO7_yxnefk<0{17o~r);WxqiwdN7Vd8axP!rq
z)g#jSe3gQ1BVuqC-Re4UQaWWYMLC1udlCTb(03N#rL8t4hOCttOfla|)YXY+XUU}L
zFp|NEH6h%Vy6-jFYdzT>RaRmj3=Ypa-Q&bKJ&Y`~$XB)x_T8nneO1ZcrQWklsJDQJ
z?c;0mw|EUsW3~^)Dz=1?*=Xt^PuG1<pvfZ*7eT0jR*>8U+^$cPRt*Yh5dwT77ze9X
z4YZX0e`469tnBkGGWe+rqa4JKSfT;1pf0XHEC2nbDIt>>6_o?WZ6tZ(JjwwTAW}AV
z>KF;g3?RlixnEMQ6GfISLeD~R>~b_qrUjal!hz5DUGF669dS-iv_=;w<23i#3@4Xb
zf-QM|d<Ue6#Gy1xdN`rc9<e3vhmydFgE()y{2az?4J7t4=8HuC|Mfmb?~y*N<n3;~
z4z_#O{zmX)+nz@>>jbYGl5uu5f!(F&&bEUE%dyIy*<dMRT=9@`XHZ#li%0n47{83M
z{PmkOx9kOA&4H0*W32`#Y0Otp#Rev?S*G;r|E+L0Gc7W(?}$V_-+LIeAHtwRI5q@3
zMFJXGFO5^i!$6UDU<NPTRjNg@4U{~#qGtQ!`9i?g;9SHLX3Rj;x9T`nXYWsOTuEmE
zFK3kSqo$0J|NTLJSi<~<Q?VrQqFi+tYA0Ve+OVr~Py%*2Rs%X~2^D(DmJ*j+!AWM|
zg2R-3eWJvnF8&$6cu+_Z)30avF}zp*ru46bz>9M8-YrtD-c{^RCQ>vzm1*`HE|Cf7
z3DslH)q-!jXN~@p>a}DuIB;qu*-1k*SFVSIqP?EmdW_r8VqR+qUA?SB({-`yDp0y`
zv<<ZV7jNMKY^lon>GGr8iVg0f=@YKMBdAihU;7fu)N(%Xh}K7rUKD--{Eq)gCX;#?
zH+jWW-i;8vJN<cmH7sJh(DjV%KgAMc*(`?n8Q7J{U>2X_3n-`(3$v!wc2A;tv>|@M
z6ascF{bSFwZ=gzSNq`%=?|@y5*`UUmm2+&V6ODE!hur#W8eYMwzZJA9QIFOD${b@4
zQR@ZUOpVVqfPG5dg?`#%MZR?C1^ZIwr`_#mMPJLp$}<;&4lPB0VN1o-sREl0K=O)6
zIS%!kSEa*GensBF0b`*}F)m=0Hkm)&Xbv=b&x;Md;E}!jnw$FBk+?X!8Uwr;&R+Cj
zY)kk1v-G<PYpWAIAnibB)fZMSiUH7AB_9+nq5N{DI<~4~MDvIcUj^;c?E!7r0#r|`
zQ%&K0{X^k)+M@cjIEZfsYXa{~q%u-itRyroUP@`|X}K(a|L&~KyHQKUT3zt1yF1K+
zwt+<+*T}j`Dty~Gn+Y*A>$tTw=uEW?x<}VJ?G0$zifAUEfoff;ZHt4|uD*CDcPwWV
zMAcNAoqU&iqz4h}qa=A4pzq6NPA+apj=z+^%<R0jV|W4d!In#BDc116S0wjLJ+nGk
z@e?|u(9|uc?ACF;Rqup7d;a$GwI#<->&>8AROZ+yryAz`6(gqmy_6d~rVo=o*NOr`
zqcYf?wO4&9zTtHNLDk#mYa(IiF)tQKHRuYmoX5&BT7tg13hWU5-xc(%@=MX94CwvU
zaVPGTVApc?vCRpnp2L_1>$FMxivV18nf!^^Q%6j3Mriiq8wtO3Bd~-m&zVb>8EQWT
zk821cx&kw>4`6G+yXFdslHokgh%qK(Cg>Ud{65MWYZ%d$aR)?pA!@x<?k+uv6tns*
z4|dE>SbAXQt_NF__lu;af_W1I7KoB{t@~7n6}e_>`!1ysj}Bbjy)NaKzRqbxh%wgl
zkjZ@&wRR(WEm+`x(77J1GVUA!5s%D>2B#=>>%Kh8OG6c11$(GF_D6CVbdz0Qr!rCn
z$3Ag)1r3t(B`4)*e<1JS3oe#5O(eV>FL_?k^9BT`Rm1>#-u3|sB07Xa2fzQ*ig7<0
zqb}aToUQ&bv274L2S35v5_!s5i+;8qcB}GSZY{&C5F_3NFSt2z!U&K`v?RoPfPknq
zQuJb2Tvj+*KlKyG8dZ4pe#|nYh$GX#V{GAsD<>TRr@Q9_xNdI9FZ)00!~{EO2CGJ$
zOng+0bC<2H&Zr^@OAJg{<K|RcyMba~O=X%ikg7(R+pg|2k1*8xa9|Yu9DSu{TEPV7
z%z-8UzwZ6$aP*C3TkgA1aSTFbl8EGsFjGk<LWJ4k!<E!%-M73Dg)U~*3y;&Yns2f{
zNdtJ4!W|v=(0<*#9P798eU6i7u(?)M`@5~B_+E2uHx4K6Lpr^`KvXBhbokp-!ZMO3
zE)OZ5xdX!D_dS{Wm;selw=c^RQ-1DOX!9@rEb*&FFr=_+H;G@g_zb+80&MX(VY~Y;
zb%tJ(=02q#;3dcnCHqDtQHf+}>?5F`#-d>W*l0J5o7^k!BbkqRC55?AD+!&T%9SFm
zYJOo;@5df>t5GM1KfSE)lV+Li0YWHKu-H?u$JK9s+SB|@V9O*OVUwpF>tZ$FP>J~(
zk_byuP4R_gY&67X9lt%h!?5`lN8}GV-j^WyE+bR9#XVsjByScA2x-)DKo5B1D|ePD
z(&I)cD7Q!r!4zg!>gM0m-`6^LwCrl@`UGLr7wCA#D_o^Hmt;ud@5Y&xKr4C61NUwC
z$_mJd0{O9#D6WhWQue*0C<l@R_ES%z-HfVB^nFTVhF%VO8d%4lCcx{q#!1ukSEM*R
z|M&vwAaJnF$0U`UsMnekOVr^acEjlLScz^C20bY*&yWX*^v0Zmu85plo|y?RG=R&y
zvAH|~ARrHuXRXYituO>OO2zodOlVgV2RNANJ16}s=7x<dn=~k33b)D<`O30DLgu!y
zD{52~jY;UeXj51i-;oOu4s)t+EaB2e_5PmjK26`rM2V?&J7<vqA|`P+)qa&Y@NP<0
zhh03pD>z_D6*PzZYDPi0#t4q(nQ@W6-{@0zzHdUOjmf$_3O|-1z=M_&`G#c{HXu*x
zwqt-rIb*e66Y^BG1|G8-QJIt$@D+><R`hUBlXpumI8r>FWi6&tk^eLf75OIxtz95i
z#5cjdzZ(>BqHj+&9n^@5J-Om#5ybpHW}l87Rf>259a^`qvM#2RKA!tv0mOULGBZze
z0B-1^2qb9XtFYTc1y*n4v&X#ipYn9${;;JNHcxh*!3`#h;Fr32xH>_o*yelLJ02@H
z2~Qve*OiKAq#2#>#XBUxd*P(aD^%8B+T_iH+%lq(rc@JIVxHO9D0;W0_rLwlygzHJ
zDrDMW(0|8|E#^755^Mf#EhwLZ1o6>UJCLA$nK9#`4#w?NKRcH(+*&<o0hD&jKUt<1
zPk9DG@1IkJppB?bK!Jj`-V^5RS_Spj6~S)39oXq@mK(>!6`zBeIMP*$Rzq?>-Uex=
z+ip1XECU1AbcR+xocI}mIF&3VFo$swFOWk%_TLtaP9b4g!CP#UNDD1!?thXmL&|J{
z2E_>`)|tWj9wEIaF~HdXbYY2yUXC#_dZe6gNs$;3p%t|YEqs<7q?11|(kRW3q6-oq
z6E7_JNv>K&VZD-!WyZcpJZOZl?=g5eTT&2ctCqWvHGUf+HtDTtHfNX^KsT&JcyG*}
z(Eol8!2ud9W>j|W#9P?EkP*X^+xscr7qNFZTsFCDH>4e5$N^h*n-+=safR}VM`GF2
zQ=wgOAkJ3RrkccR0A6{ihruW^JV|aiy(wW@|Lr+&%03uz(WBxRHIY={{wXUsf@8GL
zk=gR8AvRvAW>eI&JuWqxXv;kZp{WmBxcL(AyFuHnQG-`4ehd@}^pVTp^g2^zt(eB$
zAcZu;u|n?R0{eB$*^<$)BqlloZ&Y^dCUS2K5~*cC7UUqyW{+CQ1a>LtZWdJ76FH7K
zdpmXRh(%Mhu!G7Iaf0dp>|F?g2!^R)vHKq-5C0m+4pD_{df)U(%m+x4oJ!DJVgr6<
zI1?aV4#~QrsSh4NQuV}>SXM7jg46R_zfyg4S=uL21uU=MUMiXZQY)W!Ep*cqdvr4s
z%WtRJ5P6@9m|}NQ&BWD4I7w=#^;q(M=@XdKW{4)pleq8jRkYZdU|h#uUF%dA1!RZ#
zZk%o~X!;8$B)M#58k78tSpI%>j6JN6&NS}Ftn1t-V8~q$fBlsJq98L63E{S~WPNU4
zzy{(3(se7Q7v880vMXZ`WN^3cxLkVG%n`3`C$~F3KBWD$srzu6_2~aewEg;m;R6a(
zuCM)WP1ZlOxBS#%6R0BGl>Ol($wn{V0ASu=YMcL)y#{V;MDrIMZ91R}Q6)0(yJ|T!
z4~KV$H|C7>f6m%NX_s^Nl!JC0%jGqmL|)UI_4hl7xj8NJ!L=PB?vort3$qV=!?Cw~
zIvIi046$}2*5wYnElPHBv;cb>hbtEd?Ghx&w|?>)%I^vN+c8Dc-*OmmtJ?NI$@<R8
z$G~JUWe<vk<VvC0@d9xaL%lNchIU~yPS+=N{%y7`j|S}kQV4qDxQ&F8rH=Z^!|t*_
z`Qs<}G=Z94Bj7n}ayFVmTfmt|oAB^Gmx=AEg%1y5k`UZg!fI9aG5UwM@7;b=`OOYD
zUFvW966h~rgY+lNAVPAr(5`+I%nLZOZ$GJH&_JXa9p8c_5fws!L|Mf#X}By#ZHI0%
zJ*Oi2Is{E+->@Rt2dp6J5fx~EDI94CI4-OEQK}Q&9Fjr$jClI*xS=7S+u9X#k6+#Y
zOPw)f6{<D7h3g9t2;-3D`^?GGajbdW{gkQ7>ZPJ2Wj$Zuy`rCFAwS5rGO3ZItEa%_
zA8||!0A9w(I814}Ei1p!V2}dZ$EDIb5S-L<&UAjTjXLxuM-%afHmX7Dtb<Wfz1&r#
zh6>xzHzwEBiKd87M((ky*fK(99<qmp?G>(VW%JJ~?gXCc%%$l@+7H9<B~&SWcr{p?
zv-7p;4L;&e0&gRjp^8V0Xi5ZA+m}XQ0X=K_dTT;EAH|9e^OYrFZQS<9s~zECRp+Xz
zhJf0MQjtXumc`GtFE^YgUpvSi2MRZ;fy}ak;FdDG9OBXkToHe$`lVpwEGOX=-(MDD
zI-Bp@_+NQR^A698us}dxqa&B}sE#J~spbOnLC6VZT8FyPe|&?^nyOiFhHv`scvqM(
zC!<DDn~a`LO2NO9?le<0^<SHI%bmg4aG;t@wbuLesq`J-g}(E{sy5(gYi&@6U8omb
zYxj~7zXSMv$eNb~mu$UuAL;JoGr3Jxdkj-q@*1cegRzD2v!9C+xC&%$RXZ<Gge5Y#
zyqPHRqqQ^x{3mv2E0g{tJKTU8RZE!XYVD|fEVnUM`dkEQ#6qU}Crq}?oF+CJ@>(T&
z>&MmivX!jv9bFPi#|49rz9uu7lP_USVAwLKs9977vR)RMZhLotLf-!cZmu@!7m08$
zWD}kkez0d{CpG%Bw5mfUlr|>1B{Y&<&oP$|<7>4t)Vfxj(DXl|Tc@snEL&)e{@5zA
zbE0k^lhCD1K>1W4lR=ng@9IehlRe3ZjF^xA*6l}`-NUa{fv)T{%%N~&o}Ii<edT(w
zNZ=@8W6Z6bEu?#Lb>B&Nf@ZboPg1Bx^5KpTc?{H{?E~R_Pm<r6boXX%yuM9%qp=I$
zf^L~bIsdm!AtC4(Yo~@X?gfZ$HUz@VT7<>!{dgi4MjYsf7HJ?_4@3rOL#oMr9@3{6
z`HUG)6+I3-><)`^#lf+D7mHb{yTrwG<Q&fACDEW$>)b5PPRh|4XZa6B*A(Leg()85
znpG(ok^SvSR#=VWhok>S(tJ1)R<Iqk5s}{P<rGTDKdk6Sx(%Y`ieq#F5y!enOO=76
zhus(h<d0phcDfAVjAA&L`|9P6UfCSyRs;KK{89?`?*{8g{-b*`@l_vb?~7m!n!}bA
z(-6N_C&CSn^7|XQaHoAW$pM{3=?)2O7vxDMLGN~o?mM2w*qJ&CfI$xI?)ih0^VQIv
zaS-9MmGyoGJu;W-b-2Z~`BTNf-gXv|C(7NQGt41Z|6o<rMWvhERK)q(be3r(yP}j^
z|1FoKc?K+h9H!AJ#D{p2Kl~(Pd)usY=h4y#949o<pDOb8Z8dkRFTr<1gXv@`w~)4T
z`S5%fe|nEFB?RFgU<+jo>+NNjEs($gHUZs&piV5SD+-z|d85Rk%j{lyj^KLPA&H|4
zY`o@vnB?w#2!`li`2D=&nrLPQVVrCdG9xl7_gyWoBjhko#U7()(W7x6P0B*D&d6n9
zKywC|F@G)U|5VFjGYJM0WTvXz;g&s3VZP5-zWU^Yc7|T`D-?r;!{_NWQ5vTW!Y(J_
zn>Ran+TM%GbG1yw%u$CXk#J<tU$RHJA?=&TVO7!o2A8D+>FoR6H2fyOb%ac0iIB*e
z3!%d4*rl0nGd2vA_X}{=)K*s>|NO%^TxZmI$U>Zh!=tsq4=H<9T-y5^YvFZIq25Uf
zhz5qo&Kjy4OQJw}LZhM@8+bthv6r>osE0o=$Zq8xS8}(D)-~${oR#nBRt>AI-Lmu5
zL&twN0#+*AQq`gYMt-(tO7MmFgw~cbHV5r=f%ICjdWosJN;T)l7P~mO?l;gDx~v8%
zU7s&ByXRxuNIpB@LL6*#Y`#vSYO{ZybsqFv;^6r>`wb4K33BxWMsnw2Tgebc70T|l
z{lvqUH_{#QiQyS;?z?9lRo;Q~sCi4mf=G}fJl$D)a{8O_GYO)!h#bFHUul6Z=DPbP
z<4G6cW_6=`+Z(;lcC*U?Gv0T+JiTE*SoXZVU!315IE-nWD=%M#uz3F61+(FIc3n;r
zB5^-Ud}e4}&~auAaHehMJOsYtWh2mwhX$cDiq|Pae1FKx{<_MUo3K2i(RK%pLxJ#I
zBVVZu9!T*@MD!c7{cdTq$W_H_=24W5f8xo}6B^ANL0_a?>tBGPy#4I;H;&T}BX2>n
zzr#JG`cik4aZwP5cmR3#y(Q(CKj>7FG9BnUjG&bRpW1`HZ7TTH_UaCsokbLUK36pH
zRJKTUEZ{$!z#{G8b*7shCpS`TLv7{=j_CCT=wb#B*DihnC`JG9Tz6t8KPt&@fEf5&
zIQSA4WD`e1<Qt)UP4o3H{~a!n)ba)2Kr@yJ4WLd$_PQ1+2+|Nh6jYK&OWH?{f&INe
z5IDPO6IPTjPZpJQW_4<!vT@ORX!MjnSc2dRtuawD%<SPfOMjo4X6CyuT!Qs#Y|)Bg
z`vqq8ob|$upNFcDo%DeUb}zOvt#=U93cn2=NG2K<nX7Q@Ap~iIKas^zK=_fr$}kSL
zpFaKJ-VJ@i4|(dr6!HA3tiQS;a?k3HnL;3Jt7}0b;|$-lpto#<c765rDTg{LGyfsr
zSXxK!EC6pC_6HGTu3&HJ+hi6H0+ZKYOPW*5ZRY!By4@lP4n#~KC(3}q+EP?0n|uMP
zAi}(UrG}m~i^5gq0d1%4c#Bw`8!5Dha#1xWe3ag#X;p)p=`Ixhg?}7??4v0LOjvJ_
z856sSEA^+%{DDSPZ@hIZ{R5kK<7g0FktaiY30J|9sxvTxcGev2SWEy9ByhQbV^X;B
zX>9AXdlLop%7;yo1WIr!3p}-e+~KFAgvqyZtDm3iPW=1a|L_w?nG%D5Z5#BdeXmS`
z=>~YsfBr@CQL<0~n{+*@=={;$Ed`dANFqoQd}EgNe7!AQ344k6$NDTp&BQy))t!*i
z7{5Dmk|o%KZmSeG22(OpZ0|!A6v$yu{RppryhEmN+8W4&v$dg6xkj^bLH($sHGr-^
z=cISOoynL9UsEi6AQXwl?fomnb~~&R4Sv1jw$zb{R%~siMfo6m=)HGW!wbO*3yzC?
zSpUDw5gfO2%GYyD?t8fKtgy;>V-AguCNZ?!$ePxD;o^}W_nHU=Gq^6b3n+R2J*!d~
zOO(xoBW877_K)Ti+V&QEO@gS)rM&KxFNH9KXD+G{jn2y}89Vy6;k0Dl;lJGK_}*>T
z_OBz}XTQt_lu2%JjgAN{FZX^L8WZ>%(tdWYbc?wkCf3Opmo22aBkeDX%_|PBS-{mI
zj-!f{Y}g*#KlnfIL1ZWF;n_?O-H-uxL&7~ZNhakEC{Lck@om!lp&dJC`oE$Xv?LFj
z*EjFm`al;<4nP$|`j)s?UScr(xxg&ds}@>Fk*76glA6-a=;Y*J_=`IH<|8%sYBgIO
z1w;xSvP)XpGOAE`$t@=K?<8rdwJnnTyg3VwsW3E-b*)4z&U%TjLhlYq*`H-M0j`*$
z-3i@r7aRQ$<VJz-DtcvIpMW%p2!f-|7-P0t??ITt_lC8+$lA{9=l=7<pRzu$Db8O(
zd1=$=BgySIe>>R-gQ>`GHFAhqpvqaE6)k5L#Ew-fiS8Nq{O-eiCG>1qjefigp^CiS
z*m8sX{LD@>N4>n)RggljiNoXCJ4n?|m_Dj4L2_F`OtKr-3cuX975xQEiIJgo*;dq8
zasWlZ>Y&zBJtzuE<wheaF3&&G7TD1-)gOWP=BZnVY5=eO?L=AeTNk8Y&C@g1yJ=tj
z#)?q<zO9Y{X;y;AI|%1Mtk9Dd#$40c6dYtmNHGUR+~qyyX^A+}I#=JpfxHl(bp|}T
z5Xrj<p->i4F~tv*ExEwXRZUgW84N@t)=2QPQFX{UZ2(cRyt1<QKr~=;;@CB0auwEJ
z+d4Zg%|AH6<6{N{^v(YBCSmR3o34H`MdF^s5pu{!eVNzts;<gRWf2+`Z6Dlw1KO=)
zmK&ASHo)uC)h1KzuLs_NF=hGj#aJ9{mOY&Htnlc^a6G9xB20XpU>LBpqD?@tZ<8M%
zGVMlbvm`aRu-e>6O=5P8gfCFv##%K22shGk{;$wGJ_af2VZWPc6LP&^!gsua&*=S!
zL7dZYnu7@MoP-9JUu%nbISZsvm-l9bc{@x^pMUvnZqxyUcOX>7HvRF3us%a9aOY4b
zO#LKEV{A#vApyQwBm0Jt69LVx37LHuPdR;#UUZe`9XqIkfTB*<?IZ%(K*aRQP4`DP
z_^+3)2TQV6?j7@si8vDu$2bhdkanl)KM;Ud5NLzU`73yG^Qk#Pr8^!9DGW7Wl=6B?
z6oTWpU1JN1rkQE5#!EuQ40pTy#0MDv{`bRzLvmb)v~YB|1YrM4$l^H)a(JjO`L7g_
z$h^Bo&Dm2gGl1r&Ipnhk>j|2zio7yert>alEOC6vkc+7EwTf!C3n{|z!d-!s`oGuS
zFzeJCfujI_A+nPVtSDx>@_4n$pcEJ)x&s~CxyF;#lp)_q3mR(|S4)Gj&Q+~(@>$mB
z0+IcaLhqq(MWtzHHr>s6y0o`lro!HIE=ObLnQM1hqXykO4ipPEDxPM&N68V8NuF}Y
z+kXcy_tFv3T`H~@kJ}M}DT|lcz=9ZQ*uQ|gdd53vmWyU+<lO10Ix~kYie$wB-D@q9
zl5KFqsGDzoc$RWRriy}E(*ARY>rJ>ff_+2;nT4T+R|@60jyXS#7S9#bK55(_;rIs+
zZ=8iz@xlrrhI!`?E=&j%@WF16re`rI{j&<(2$lMC6fb#Kmqx9Yr-1upbP&bw`3po4
zYEDXh-gAmFt|MnAiK~XA1F0kBdIw6A35c>h<UpF1E>yQVuKg_67udo(2}ckvmj~{n
z+6T6pXf-QAjViorcczpLdZH_xD$|;qffiv|)D}$;@KmuM*+x6}`Zk&g;2{>6B50D;
zdX@YdmX^~S7gn0QgDwi%@q(G;1dNF~?*NgE1CpCPW4^oGSDR;Q?R}}Wp|w<wjDzN~
zC3SG+<PrClU0a<s(EAUaawSTm-F1GFYLzKMKfX+Wd@#A!>E#m;fiAwn|M|v^cNew3
zaQW-}S?~>cVJvjMKoCc)_kJf)9<0^)u)F<+ojwd#!)nd!QehhIYBIWX{gPxJI96p0
zSSuJ3cO_KpIVtS!OqJ)TyUKXS;^B8aF?yKhHLyNokElKb!xAeF)_*77FG`Um(ltgu
zOH1{zRjSt#SM83tWXU#K((VTz`Q#Hep+EB<ps6%Ez(S8yF=K!1t*IsBXY{yL!W^L!
ze5~ruMuTo&Q@6u^P(7nEIPab+{OoKK6nJ~cyc<0?LMHK#E%@I1%LbCwDUhjC_iweb
zZ!a_=7`S9ja*d1PoWbYs)=FW-K^&d|*IZK{t$Isw`t?gSs~G=RFvmyQ%pa;}a;?+9
zmZx7G{MGeyz#<}*`dnkCBbZy*Evat|*Ia=EUs}hkTD8PThr~+J5Qa~NYvBYk%q(70
zOd!pHJ;MNHH~5c=Qm;5f)zA6ASKN<WQM#m?TJd^`)1U}P(gDQhHe`gK4)HST?`hJv
zc|LCHWJ*rg<>yt*sKZ44IO4;AFORKDm6{(&*|JmB3BDtV_Wh$D1_U&N%1#CTb8Bz7
zsN>YLZQr>Vehf#eI&X~cstC#y+kOLvkf;POx$`ZW3P!W~!W$s}Q6rB_<U7THGrrAE
zsfG5JJ@sDXBNcJ8u&2RtI@FJ^4MGx#VAf771zehR9->ZS%0{?&$*;6sO9W`;8EVsX
z`mnX})y2QjC~_cI^zKyWS%pJ_Fc1iL;bQSYRvuF8LM^eB=^XGEWHrV|#42b8TquTk
z@{7N+qN>~w5y>m~J#*??JjSrugtZ7Gtqx@|ok=Z~sw0LB`z~ey|BfrJhZ}d)Z`*kQ
zhoO+=QX7M6Yt<;`T{IYc&WhiiQyx!RD~06wa$PJZ2KL1z&+TsZK*LT+L+{Q?jT+*2
zae@U_UlzVasIMVZ1e7-Ggy(y&ceG%p8Fv>%n*8d~CEqKxb~=6ILH~AM)6gI8bIC>-
z;?=*ei0cpUS*I|e?LYTAS9PU}ZelCu3BALCQh}$Fd|7b;dHSgYIJ-Y(i4capDVq5<
zgt>5kyS6afmHdIxEVb_K^WAUD0r)VjfgTY*(rL;K%5ACHQs{=&G*;*|Nc;j=TGAAH
z*+2EnOR~cBFFXu-c*}?$SrD2EzvME$!G{|P8w7SQX+VO^3ps+z^ZxqNl_Fi{5B8@E
z@a`TC1NpMf)p$6*ZMjUQ6|XbJ{@;Uk5cmf~xJ@$4T6mOKl&|z@@5$tNe+CwXN;Hci
z`g)m@Qj()G<--M~xN)1I<4#NBfQU>IN$skN1wdm$)f*9WYE7I=1BNGllGi>+=HSDU
zJY|e1zQI*1K{{YyR}`GCMRe8TI#2T2l=DEOUUsU7LZ<z+!f=OPaAaG*39Ok=p!8CZ
z>cL0NPm9U17!%Z8e-fVWvkN;9#?+6q1D4B}$jD58;Ya3<m=EeIlNRsnB_m6vcR+K^
zvnf<5=J|W4dhU`mBr=%p+S>7vn5`OxeJ?dGjjc$U|AEi(J(Qpq#ejwJZkk$;#ps2(
zaHT>#l;PFy_tvs<BwRGe?Inqn;so&&*Z{m;v>OImygk$F6~~C<%kBUF{aKjDz2~2`
zhkb5EBi$^SI-SpT;>Uh9#)dF@#HWAJzn`L{r)Vxy<9%r{PL;#1YJL&<MFDZqp;&=`
zKg)zYw8rWpvt+u*6;gf88C0Aq$KTqa(?3~Sq^BiP<&gjRO}{E~|7w(+gzh>+Y32$M
zIHs$YOAz04)^&z$;hr`NroPa=FG=44o2DR1#-kx}r!qR*dYxlD0o!ubOs^?M@_(i!
z%tC>6(;Y#a<ZP{6dEs?IF!^9Sux!O^027$}LD_Ifc2HBV{4)G;?o?{8`h=~|$5n(8
zXBf7qBmJKT%ogR_x0ZoO<R{+NCqA+fRmA%Ac6Z(UBQ1MZpL8JkOP#d)7+?KHz!%`I
zl9IKIxHIC??^!B}$d=N|qCLmMn6mHV(7|T1b?hn_PaikfCxz3b4QLRoWo%guz!U%d
z*?0f{^*?xe!SC~AEGon&DVF{l%%m&Ab=ksZd<qGPAmM6HdN9&IiW7N+npIekU*)~{
zk}^#tRq7griNQr3)O3~vcIg2Jkh5QSd70xnJ{&JTW)Hu_I=$S+AkJwAg`9{Resw6=
zmZCoR@!l-7!q=jO!GDFHPV)MXbVCi;NN)TwPV07^98i8Hp|Gn6oJ(G-aXUjm%hgXU
z&k#)20}mBX{%jylw^~!72Wcu#;lQ5w0Yr?A)$wy`jy^*f0NNVTl36A%2K?FQv0QRT
zBIjt6dv>5_eSU44tV%WJ-JTqc@fZ9RSMDRfxR^H&!O5^esCZ1&0gv7A*oz}U@uVv#
zvzrBens2uZ!3nTl?+a!DTJA}zic}<~bapiB$hL1fVqF`lfes8bwTIuHk_R*(R06)B
z!?ss(_oF`edcew}%@43ER2=X9y#Q}=C*<wgyBhG3K!B~LSE;5xK+bxGRAh8SJWiGC
zzO$^Mkm05h<0%4Q364`12;AipOH=d{{*lcbyZHYIe~da8o>mp9nu2Z_;oG*A(Xux4
z!TmoHJkplcaYjt%^1gGVj^4uL{XWa{I|yWKeW8i)Bf$Qe664Qc1vLhi@OgdjzblIX
zjnGkGXSgYU8>DL4y^HKrI(%n+UA6Z`$kzEfMv>L|a$>x}ubb3N8u?ccjNa?;MIbbL
z3pj|uC;0k%Yq6#b>LxWNi;)ge)NCJ71R&X97Pk}kyahr~PutZ%8Fn~vLtf391lgo9
zuw3dUjWXuq1L6GLhTR1A2fxi)a?6wc28X~KF;)(F!~UHzbU4hAWYEf^JC9;?dN=O<
zy|4ChhW%-!YdRy&6O`z7eT2_*AQcFf?X0vkU$oCfE6JYBq;qXDJgQb;1KYHND>4kD
z`~#7mF2dTZT;UM(kQ(3UZ<}|cryQ~YFm+ln!;@(_#j?M(I+6oS^m5UozV_^ci}NOX
z6*A6!K;>Af4&;-!<&NM*hRmbq2J!SxZKQr)LX86MlMss;fh>DKCUlZ7Pn2aK&tR)9
zz7=1UW~Ctwv+!fMEo3uZqqDwQa(h}|ggf1{-U_8c^Wy+Y`=7{S<I}$q+n75b<0`e=
z|6#)$UybrCS%y;YxVG;Mq+o|oGV@3%ceGnpfI5I{YDiXAml8QL7%G~5lt=Li0XO~F
zx~5Mxwu(b1H%V#9u9!MYG=C=KMzd(Hf1LJ-(xeP&&BiOaWmmi8Wo*FZH86Ar#=$J9
z-_QX}&q-V0aWzhQ5IwQ91a!9Bg<?I<Lo<xHb~Tj2%2>2ZOw!0YpnK%0a4DOWGAW?Z
zi2kg6aJI<A1gKX0jfkI5*&Wpe4JJ$zZkbOVumAqDVVmCJ3Zv=O;&YM6p?~N634gH?
z0#mk^(^#A;3A;#)`EgwpYP6-etduf}&ab&bvTQG|%U*2hHwbPUhhk?_)n|E?t}(mc
zQm*8rwKeirys{WYM?4-1?U~u%xP7bq>IS%P>P$27e*@X_iWANb;bTf0k$xYF1ZM`v
z0_S?9-)Nl)4~ue-87}()D$?#p$Us6RS33LN%eW~UN!W$Fduve>P|NjnNjL45AdA8q
zP#Zh5(AAsVGd%YAWoe43c~NP9x3!}v)p+89uO|`q`?g4+lUgNd&uW-KmNy<312Y5C
z^OF*gc7JyAd7$lYD5lRUo=_<w6nPQXcQ2LYs#IY*!_-6hPc-zuuk>dM`|hX_I12eD
zmQ=!<qRSJA)d$e@+*i`{T<%^!RMdsXY6|NOuTLDI@|Z?nNk;fq!-wG7V$=+Y{F&7C
zBW|#Qhq?r^sud6kQI`fl7awxP|FAq|m>EGWTv<fSjSf~m8ZKa-%X)B+dDQ^XZ_63$
zsSlQU1wPfvDnJr_wWU=4PR-e~4AGi4v3Su8<9MRg6*z_G3*ck-GNuXvD0Jh2&r6gy
zm{c&;v-ccrXz}1NkHUT<u5snXwXkJ_{EIv^;h@upb2VD@W=8kXG}$;dwDh0K8L;Ci
z28HDY8H2NoUcS&8AgyCCM*&;2hiow4r@HC+7V)*4Jzd%v+jC9^SERwah6}^3$oAAm
zE4^Wa2BQh;ZfIM$2k5gtO~gOA@&}VCdEuI40DTO+r1G{V=|Mw~V!9i?E^sWIr`jpU
zJJv2)#(mZ4(wC04R-g}XHV2$8qnW1TiR?Okf@Sw4jN4>;{%~)v41s(YN_EKo*>X~g
zUm!>QGY%l1>hUo@FQltQlD~Ixzup=DV`8%>rgK|irE#32J@TnhlvkKmutU4OQO*FM
z&}>NssG)b|aL70v%PlGc5rORt_x*q;0AVzak(@(S{QdZG?lWV)Z`5wyC3{`5sagZp
z<TiYWnnOlE(hP)W0%8Bva5<i>pfLK7T^kNoyBer;bwz#`C+a-Wxhg(r>66UpY}dM5
zj4k@1_BrSYhCd&)Nf)?U!GgIy`0_}^B*1+$Lt58!V~F?!Z1O3I02iH(#WQ@~`f<3m
zE1>Z3J*J!VRG4q5ALeY<GAZwjkbJuvIFI5m(c_itmBsvm=Pc_WHFwsT_0}|S+tF2l
zo&2gHH~`DhnqYj@8_X0zb5136qCo^n$uW*hRJ|PSVkj8$5U=?!{9>-f2)7ZO$3~?l
z?;2oxBjh7S)LCD4pTVby5p3!nSWZjU?bjlg#+J{L7z&6xbDn{Io_bsV&J)khF%vm=
zUK+ZRylu%VU>k=wDgiD7klVQQ#h-R?r+UL9K$=L=jqM$@A2v><|5>>@BIzAt-_g>|
z<GWR$#EXTR0>beIk(%TLhuRQ@jr^&J!|kG`pIJ1xVxW_GfgqmM7hok_&kH$HOCLJ5
zOYc4dnzSz8Gn%7b5Dy#4)*%X&3_~&R*!<F?5$L;>Yyfs7lk-ltGM`1zKKkTNNMW2u
z#P9+3brQLceyd#<g~nOQ^kS3*H*edy`yrREMbew0MrK_xHL`CUt!ELQ%b*E>Dyt!P
zQ3GOO#mUjj#BNLI-;T^RAVjh)Wi<Fzt?LpZaHGE%3T0qccqeS_eQd*O;sMm_+%wYz
zHD$Q7IBv|oZ@1%+TjXQ4vvi`ysGQR?8(LC#cSzdz$|r@PA~k+8QCc|_5J+v?Jak9Z
zCM+99Ef8dqshC)x*0PF@MCKlR4pjqzg8J7Xg12!>{`kO(3s0Qizl^c4C#B)*VoSFL
zm*j`E@O1Ku^nCSkZZs@m;?@Eu=maE%`d;}*o0}~5a;a0UxsLn}X+QZP7NlS|tlj_N
ziyINr8bmQAE*ykcE~2CzQ((NwFa?i4V)VnM;HvuW70^eloIg@=GGpoTyUL5ULB4!D
z#UwAQZcHMLf)fTl#zq**eE6Yp!Ide8n!1GAFSJW7l@&}fg?#iQ3IVuTqd~5$OFBt{
z*4$_!DmbExP2OY=+dSB#qG6oSE%mXfd0K(XwXMS=$ry%Z47#_fp_B?q9P%+%9GDo(
z1Wb_GcfO)Qw0pdV8Q2ec1DwFgPgzNcWQ2MO)1KU(S;ev!hTL>0+OTR*n{bw15T`il
zNwV!TK3HzhS^gM+QK1(=Ee`n+jCb+d%k6qbgK~iDPN!p+i=wU-#T#VR`3b6{NgCC8
zMssP=TVcwhA2k+EuU-^OPtt6|fIX=xJ46Cxd8CFB#u6+5JjtMA(b-+5I;i)#qCQ=R
zV4*zu&{=Rt@8o}?GvPc2l?o3gmYi+X*0L!cYt%7r<wIXnnR0{XAA-zQL(%2LEIQgY
zMx&dE6U`HDVx44sWo{x^o>3VWOPzYhT)>FNXRQX#XprDdd7cSd)!34dmKn-;n*rHs
zCW5-w_Fngm&djzI4v}LNk~#wWf3&rTe(r+(*Hx3iDwGC~v)A}aKcFprJ4-VKvy9(U
zmtO9#K1ep5x<&;we#^3TCC!t+%J+=DVBCqLL~8n-cnO#EV;Az+#w%`KxOhT)>@fPj
zJI0fZg_)`wOhQm>;0^QGaG4&%8_l_+DNoywzOqjTnRq~$doO5d&<tMRrvJ54Pxv!{
zV|TGwKwOSr+f5GGt7EuKsAFNI&61ui*cSsG97%e@FiU11i>@d~XI0M^RU#X?dBNSM
zH+2$N9Lq*#JojAFNspG?bL5?CWKVudW*$W>wq?=5$ZL|wmhYPJQIZwFhEA~vl&-Ap
z!@vN+R<P$rI>u?P)paO#bFjQSp+${-!>>9}R4#dBK0n7RrUB{asqPd9pn&n9Om=jC
z$!KRqOpsnKD%RUBPHN!jR*yi-taakGT#@fz*OVxetiw07-RV3zdlFuvK*NUG%^VhE
zMVKeK+dIlLcBxfQ_7$oJ`LcQu6}=3IqhH$!z98YUgq}F$H>0seN!6^(%JTfA^rbF~
zeWCdT*!B}~bhE!CtHkT-k7KJS%5|ljs+jlhu`>ayXpa#Y+qpB!1rQ&GMHF*Mh!o7|
z01ad)cGe>+OY(=E2k{9hM<UHoT0!ybK(3yO#~=-_k48de6#)5i8~Z^hr5AMVp=AI;
zA`9{hP<a=XW2V1dx0yTHNm2j*w(W0&<X9QLt;7IV>{0Gurl?3|anaGSQynN68HwE>
zfNaFSLmRQnd%-t*ihp&GgVfFcO}8pWPAo0r{izME4Ep8yREpTlV|hy+F!^r%CHlwZ
zXnOYY_p3FP0{l&J4*B@z{>yW}@j6b>7icn={a~NReHl+Qh|2}A!A{Z+$3^XK+$agJ
z+Ep(W{zlGv57KITq{X4p7{6Y^wHWE2x(LeG2hAmRx@p}yXtuLJ`ZFD_^S0*o*(3jM
z`pz><`%GI`Dk*!l3mtrqpgFD2kA52J$ckR%qJ9QL0`t<{$sqD*a?fkA*{za@q`KJU
zX_OJFi)zS7{EX+1S2uD#+pZqXZL4HMn}}SK<ca_RUWoLFV^P7?qK^ybG$wq~^kDGW
zSmam;5N&ro><7m)3`~Rt{hq=ChM`S;+e?w4em#HI9#?xSu!E&jH7!>8pGK!769Z%)
zsfX399F1z^b82)`-U8HKE=T8^;PF(!wuT7P3JB3<wHr_}Pa25?PygV#5Myz`fq8Y&
z?&q}ukep%B@`zT!(7$@f_*X$P=0q$cvkfSus*?(EN@8T{*4wqhlZyA?n5Gq%<Xs6g
zgkW3XR*HDW!r!rbx>pu%)cluej-``HFJH*u1HsbbTZw^SI01sWPQW_`W`?oZreX(5
z`FvM9C>*LEWyTJu0}RqgCPqF7X6SkJoztwoF;aw<>fnP-fq(J|XTChTw`U7b3d)vZ
z2DDO=1DwAQmttO7%lg%mu;3qQr#%nM?}%wnw&#G!s?(Vz!mD@l!;kqOly*JMr$VGJ
zHRBw*=3C`Mf>9{0WC6r@J+3b|@B7*2GX>oos}Al~aa1AkEQCEFH?eGwmqeiri#G?h
z$i!T4UGJ~~Np9w4F7P+=bXo$NgFEE{|B2jYL+oD!#1W0&=%0u_s_V(^?pW8*251T!
zHr867B+ZbwPWvJ3m>n@)B*3B?P_q$fMR_V#ufP~Jvb8F|V-lOkdQ3VWFULJ<cLqWR
z{>$L2(n#FSsbd_YWTUUjm_Vv*AjHVM`1b&vekJr5!!2}BK<Wy3(0fGt!*DPqQc|tT
zGA8!p+EC}t0s#Cu`<_tY=;HZ3-PI*#7bevMVqg&p4v}#P7Mm9Xx|SoP`3Bb{YS{Z;
z{5Dk3?w7K2H~R!m$B78ZVO+NB$?n(@(bq`t9?9?-aSY=31DJm@bB!jK!SwQj7gAAT
z@WaB|I|Dmv@oah_SLx1;0{a7yIqP2E-7R)~1q^KX$s(Y6)Q#H-6B2ymqde_{B*aRo
z<9bjx=|k{?llLGDqDwc0^*CV7T)k0#&fR(i{9(=et)`hZmWTiuc<!-cJi)1JIl?li
zS)lzr=Q$~QW(laFr2JX=8DBFN;Jt5nNo2p7j__<D*`iWMewR0hI|b+4@qZu&?w`d@
z<_?u~$N74%cybQTvg)e5#F$6&C=^8oKREJAEa>u(8<&98_&iUIw+0fucqe^5W;ZOI
zvkEKCMRd8JJJ|EJsuzpc7_y)6`V-;CZ&NU$D;{|~QMZ~@mt_93PDi4NE1q=a1ek_9
zW5y@s;6;RA2Co%$%pA>h=$&W%g~XvSV_9Q1w0D)TQS5)koZ=EOMNDf~AH-_2G{wb9
zy!K8bHdTancC7U*lcQ+X6&hy+h*;l?j=OzX<r1v$JpCf|HM*l5_m%AAZ5#FTTJh>g
z3ldq3cZ(a%upN&aU-gdqiAfdxW5`RQ+K_7cJbUu^===Nsn9+Z$Q2Xvbowa7k>`gC&
z{!RH#G!<UVUL#I5#Ldm_754dHE0y>zfBwAu-u^xtTv1Jqgraj>sjH51IZ&BH1xN#C
zDW7#nG!#*h)=%2RGnUX5`ZiZB{dsU?68J&WSHf#KWo0-CPOcgwtkcO77EK|c4Z^%w
zsHo<;F%#2fD$^wluXA}%j<?<C@Lhc96l1DO#4Gkn5m1gH1t9vJOb6rkp@Fv0MYm#V
zZ+>W=%(TVi_c!_o>{!~7-FW@zQ(I~a@<kVj47p_`kVI<?p|-^h5M=!v=+gEKt(B2a
zRUp;F=o>S0178F4Lsb?*D0_zM2-3PHrPl9RW1yXMD5iIct#{-SWnu4x*zsc~gO`dW
z{PWsSN!Lk$m2@B)OuvF~AJiY3nd{T(HtzO}E$jWQ2IasX^&|<sn9`pHGaeukiWO>U
zN}8=09C3RhyXCZ2oU)K&ZJ;sG3|6L44lYyA-g#c8G8wpYei8B(;e2%I?>=MuW=tr&
zJ_w!Xy&br`L(SHAv`R?xC0+(7hCY0$gj&ORARbkNCr>?C&u#U%sc^b&nHh&cL*B=3
z2y<-P*5=~d)&WLKV_d31N9v?mSywPZJC{8Z;eotuYxrVhyoE=|qM|jP?<fzC1J9Yj
zWNFIClMU>i*)amjIgq&DB-IvS7%pNAZeeeC&%c{f<b5abyXG||Lo8aie#3slLaZZH
zQp=G_H6b1X35f|=&8VzCs$!nLxbGMDQQtiVW!3)OTCjcIIDIID@62r#8Mm#Zvrp<5
zxDKsK>9@lA=>}cU5F9|gsD9N69`io~HIz@9jOz|k@oRr(Bwq6(wZw)QSFjh16J}Ys
zg)HGdE*7KJIw<j+bX2Y{tYVJhqM-(S^aY9Xr7U=u+far1H^66u!itY~Z213$72&9(
zrQN&o$h7C_O)l>a;R{G#WjV-<z~<4l!W1g1rf_ewzoS+t1w3M9fX?QJ8@{CtK~4Z-
zc<=K8QaVtoO|jS@?-V?sG#BhMB4%08yevO%fcLtNbyjh$uAkrBZ}+LBf9~K&B-ab)
zTv5o0MIru)c^6Ve9{}xkZ;G{dAkiBC(H{@suDHI)wZ=zqFG^WDM_WYJHUpB~;U(=y
z-WGVOoly@ih#{#u#CT=BTZi}VO@Pd+&68xVPSa&-AS<#`?O6vLnvp|CWQ3eb*oHWF
z@j#-;P9G%DR`q4Ht(Hq*tJ@=b%wDb@P%Zp)*d<0IsQ0>(DDDo4JvK#GO=M;HjLP*u
zX12m%BQ)=1(+W`niIySu4m`&2c#J^fpUBpibjSysk$6VQ;84$?2h3nsZVOAc2)n@f
zyC22fG*jF)1C^y~_j?r_BM9M~igKt(?mUstI|)&h-jARJ=(C{J4Ymh$ra|S_BiH#X
zoYu8lwv+W)6Gth*eEtCgqJMd@sememMvy6_19~gLCxS$tKDq|*oBtXOByO7ZYJR_-
zM#$YhU0%g-%Y5JI!Ia{8DEcSirfG80SMUvi7dd(Hr!CU$T>|U=X&nJ+%yNixC=bf}
zAdOG+K;>3hs8=)NnJ_8pDKzDe6OJ?c-DoLztI`ppuc-=vXQ9wa5Fi$G{f)2sLzyhW
zn22L^d7QjZx6TPJ3FEJ(1kAhytn!3H5f9Be7BDFQ$uw|M8?u>d7dU@>C8u{w0iAKK
z*rYdr9z7zse8=jAi?9hei6Ox=rqdmO+`^)`_6m1l6DC+|>TfWgg8cg@8u$dE_65KA
zRk2R6?xR*(8OQ^i1=q$sQL5-2&H2U;faNImDJ=I;o?}`%teP!ym$&{`Vfvci4~hau
zrTI_|J4b9L$oQ%PsRyr#^=W92$}98IYU0iX5>)o%^;C#`(#Rysw@#^+oAL1TK9mCM
z;OAAy@c=78)V~eP+Rlkyh!9NGbyf;?tYAFFC1j_Jw<k-sehTT}h-JFlU)1`lWbQ=9
z*Sol3RNSfLxhdsA=Bm@gy|?3AsePJu63lGTZW<9ew#Ew=LOTdH!DvNeL4P%SrMlF=
zWdwYVd~xcrbHp7pacjuj?J7^~v+xb)p~720dJ9Ur7U4(uOGDD3bQQ|z2!Qd@JN7o7
z<vJQ}Ra&Y2^tg~Lt5>PUnV7w-UTO02oR1s%gY>Xr?3$lb)11)5)KCsx9z#S>jb-cD
z5@>%=K+LPV9EAcwkbUDM0<cA}z=cQay=V7H!t*obl2D@hZOiaa`$pU993@MwDH{+3
zQP99aT*4>@Y&5O^UdySvig|BoEyXh#E}6rpQ3j%C1Jd^z&ANcBkq;cgFC<vm<))G&
zK&6Q%#2*zGGMGzs76h=pkBk8-3TBSyXf3c6jAo8R7!tv80b@?)zjL?6g&>oxqPfd`
zb^Q9B%23?iFJ%IvFM<M;>i-9z4zozIbk)t;?|G(9PAlA$ISlUDS_9o6pgAsXbcUuT
zBMt<BAJqT+$cyrYbzU{^AwsW1R2u&12|pxgL)}F|R~b-899=jTm!03`3k~;i>Z<FP
zB274*A#Haw7X@eOM3CW$oUpK~0*}8D2A8>=Cly5TM-9lK_lrx=(yla`?{8uSnFVO*
zEu1=1WRzY0WURcw8x=QIv>15Sfpm^z!M9<Oq)%W`Au{j^Y?~U2tzd2~@hIY*+n#a*
z=nKH0R-78A%@+^Ik)k(caZ=NN0NY+Q7wXEunB^Leh2nMGXQs2yp&z}r%%qi0K;VP0
zs4j5-whOo=6@n*?jNL!h6U9BR#vQhF;l}6^f!u_(NTI3K0mF~atIBfSv23NrVp_~o
z03u8fr^sae;Oa<I$}-T!1RqVAz*Jl6m|Sv5d*M^%4r4|Y;NN8~xoDv?($et*!!YNk
z5ksGyN_MY$(mz}iv4#t3Hd8kw=RXWv|4#Jrh@73p9utZ}3h)QoO?tdKwTUTeubE^m
z_f!C~2l~hNcD>R3<D^R@=({Li>>W<pj|WaP)+{T2B6EeVkN~~Qe~|4Oal1|)kJk0p
znIQK(3U&$#t7!Bbgjfy9MyESwiU+STlc2<p-@Yp{JvF_Jaf)Iz&&@3*+t_2yW?D?g
zZn%gQo84;^X{oFQXvcyF)$F=Z0Jt>8hi%>_WBZ?sin7Hs@ZJ+x^F!E7Bp9TVOpt4>
zV++Rham5dc*LYMY&x?(RPqPj!l6dnV^2c4>G>OKQQ9fJr+tej0ul`@_zx(r<SQS<N
zJN1M|M>xSe+D&cZ?deFYOYrd=WCfL4Sd;Z)*rr5|RlDBIlv@$D#WIHoWE0*-(1CF=
z+|m}V0){*G!5W35-dx|7S)l_c8sCZd<;VsMwBZRh=4p;t3zXC%iU45m>Dp^MNF!{%
z#FJ_n*b#xOmyP(f%yiTprU+3$f7>jVx8|zG3~E7n3(n#VrqMu=pVI8xODW4|JLt$c
z5FZkapf0{9ioF*H=dehPIa_&DYngpJNx+Eg*E}WMj2}&~XFb!s)(gyW1wDpF?6}pA
zSDj5tC?5gxMdzuEDHQY?K~uKpEHT2%ca}mZG8^TWX8nrMt%HMBa)tzd28?xYF@p<?
z((LzK2D4UX@(#n~R}6sE*0M+>;<^G?BD5UfCXW#h)`a%SP<rZIpyBcCrB?uf7OU7-
zZbkf(v9gxZbiYQSYxWXFgZ1%ZN3kf-{Ge?~mM<4iy|I-Q?~8C3(^iM2BY-^NcU(D8
za1(ylRYE_Tiua?xSoiQRXH9I$dd}H;c=O#M%`rkB4pQdBvFZ_!yMd^;D4ukG?-V@x
zc;7JIxZzb?<ze6Ue8tQ3iouc7xlQ2cIl82O2V2ZWpMAr}ZY?IfuJOKDph6mdL@-Ut
z{qqloNjuRa(U*yVnX?nNkDj|K<h{wg$GgsuujQ%-;a}GlYK?~0hfO0v;|`F3jaeW5
z@<<0o@aB-PX0lpCCkp&k+)%VcP&(!_k&TQXCOFD%)F57)TZIqlgDjh>4^R<{7ZmGP
zBn8ZQ(v<4gB*6u`DbYkGmD4nw*@T_Jhj{=HhBGIIZcfRQbr_|w1Wi$BKN$03x<zBV
z^1s*nejTD-Uo%owg*6|V_Eu5)Kz5Ls+OkKAWEJc{56JLG-vj>MUosc@sisRQ_=x{2
zUT^7KFmZ+mh6)3PD-@oRg=Z%)kKD&mH?Tu9_P`mByu*M8&5B^Df}D+?|J4D!mQe!i
z!aac6vAyqwnzDy=J*$;FALqXOr7PVdY)R}Z{4BA1)6d^8QFPgy!DnT+<Lj2w^y8_@
zZe|G&9yuVTC#S&Q?Q-n5)VJ02ia|F?B6iYU!S<g0?SHqAvam<ko4I7Qqr}v5R8f#0
z<nf1m1}O#LeGkdVNcNQG>&rK>i`nn}TKW#2jpJ7)krVT-rG1(0*~$fj=O&7~^Mq{m
zecVh@OF)~?hTv3Mo;MP`o5K+`qlumtTG&=Nqq0OS=^@&A(DwMSuR5K*Q|D{Crb6vn
zT9VZ{2n#ZWGy#mY!57a=b@_lJs5qG~+N4b}%K01>JmADajlQ`a|8`?Nl<NLU@y9TK
zvb9DS71<Lz!oo>7Z~-{KIm|AJI{v$3ag~{cmfGo9zwR!Wd$5_yIqnz5BnKO;>t|#f
z>$ut5{2!qcmSyyKt(!7Wy@z#NM(T!?UZcJP34wvjhoB?$mM~|CUH?n$7p?}qo$Gj+
z<dw`?P#SzU_2zC!<Sg2kgNMZ*Qo%~dmL+6pjZw&gZ*i&wzSs(eomc07CRO~c{@(EG
zC>p#Y|Fap;XSW^NUg}g6ulVglI(QD)AQG-EEv0k+Qx7Q!jv3~?jqgJV4Vbmt;No4*
z`CO92pp`PDq-<K$OVCH`UOTlEL~zT)&E1^Czz6r@)lne6KYUA7i_?6a`$Q^ge$WW|
zrU!Cla-1s#Nn1aM&gGR*&yiiWSHKOm<Y6DkIHd;n!%Z7HWz94|`bp4--5IZiHo_QV
zrcK0N(b(9v2#ezjr|s5gR|n(kARIJRm61}#A@W4=A+oaNpyf*0>sBzzP-+I{&8w7(
zlqYEpfZ^G~QM^60n$qR3OajgSBc&3WpEx?%TwN_aUQ|t%zdBOfaeue6El4SjAAU|0
zO%iubj*MZP%{c50TdfwJLEr>l&kzxCjHK1+ll}AP2EUh3zV{YL&R*!?U?ibN@b#u+
z2*EqmTuA5I^t3;9XjxD{D&Dw{t*Z1~y=)g&z{zXL^k9D&KAs5j=!KN+97GP$jET8P
zqrtRk_wpk`x6DmUR6|Ob|2ym?xF%dbdwQ7vS%*E`>^!fp2FH4Wau_Ngxow3;5sw<B
zE)A#Tep=j@k4dWdaQ?uvcd1UO`vx|e+Z(t?M0>Zj<#`Mza?N6<gCz;z>+<Xr2Royu
z9@-4A)&MtznfCIi;t#TGG5Ye$)=p8o+UVHSiRBKxcy_vB5%1U=qAVqk3ZVB*o-ueb
zKnKQjto4-fpn_}4G!+nMn#Cfe$|Dx1LIfn|yy261(Tuoo-+N>e<dT_ggG7qUgKW2Z
z<m01N#xnGdVhp7<)F;x-o<CD{8BTYwe8E}3FI(Z$;rsQA&sa3pzQ<((N$S7;G_L?R
z1pfQxr|qEg+4?TV%x$OkC^(|Tj|uu;?Zw|D-kp`e;!?a$No%GgXukBA^m?egD%QL7
zbM(qSPjC%-5BZOC*~^eq$DJz$y?OopLj%?a(FgC7q#1c6;tZXX^vU9stoICj`bi)G
z4M>I;_qK=_b{Zs^MzIUhBGvLKFd<!!AjAJ!kH%M$iv--?6(&qk$K}p*kJ>x9^%QtU
z2-Q!YA;sW9Zb1H?6dMfeLhkjmd-#9fV_DKFp6rGqXaC-}+k#=tnDS$OR+|5G-|)3+
z1n==QevR1m0(LE1L=ER+Hu)0;5%{Be41y|uvmmsNTej>^vl9?>y`QCsRyx_E|Hc`6
zLwh?99@`qA{3&G4npU=ZK{(oCxIP4avIfVhuVRr3;%~h;pb`<Y9`mFG5{e9KHBwX1
z=0qf(Z}Ic6ZsC4abUmS%!qMr?;yn4qYyET7d_RMN<1t~FxccK}sQNW%!3WEj-NLp<
zN<CV8<f7D=Ib3a9;ELiXKG|=DUXm=3)Q3&+7VP~hUniSg@zGp6-FXuXbwF-L^|N7+
zG7US?F?EPss|X2gt-bb&tmlA$+wff~M*5T;(M5}l;K!6(zs&lcY`Dyrn5|uQU^}f#
z(w@YcoF5Ql{Qyhs^5}g3t%j4nyC||C@L%~a4R1nF-I+Cf2Mb!c`bMZ9$vysR_%q3h
zb}cRk&8Xdnq!l6UvH?-DLc>1v`alsl<JqXCuP8yHf4VV|zP}o5^F*iOqe?yloBtLg
z|4#!OR=0J)aiXo>qm2z*w&<{0PboSu%|{*sp&cy*5OJ{Ha&)7}I+j!jolN+Vyb4ZY
z7vfNfv&z$YgRu4syiX$)u8c8iSA7JCx~z^IG^)O)6<UQ%Oyc!iZ%if}K)PYHyi+eB
zYfIVBa$u&R%4N<v6v!f66+8p@p;bIatD>a!#ERwTo_|2()s79)8Q^C%g%duG;=ehC
z_8|o)P-Fk`n4EI5*7Mn74Ha<MV_lc4BXRjjSkJ|gy88)LQL8Jqubq}P1?A4MbT9Ed
zh*p%m%k1uXLma!iM)6Au{T)WGxgLNxD6|x(ek0PN?lcaN(0rWr1u?M0+MMVy7a>!h
z;zBn!-QDhEb$w!7FvzR4DaOa6ln?0XtgwaUg3!D_+6nDwdgIUw4&XC)Z*OfX&b7Z3
zRwb7Jg~4Vb3c;M{0t8G`*RLqD66oyLdwTy#<@6F?3BW34O7nR7F7cD2LbQjR7-=Sv
z*RcA{==W=b%n)|6%F}Qa|HH3omP>+mbU?`UBw)i6mM%11&`;dDE}R&IR-YT4W&b|=
zT9%GU6ozcq9)8mmEWiFOJ^UKJ`k4sBkC54jnT{n-{AneVeL?NW=uFp}^u@+Hw_hF{
zGfsLLlO*Xy$lKX#(Oo!;N)k2t`|wy}N5{;*7MKed%YAdSAuPl3K{0#HZPXoWwtJ{<
z$Nov>`vk*Vt{La6xd@+t+EYdq=&uGf#!*fkbgPN{N!*UbfGqq;_EC4|hI)gNU&H;l
ziMlW~#5tsqKL7-9O|UFN94$FXw%QPKV~rXsymZ&Pn7I#pL{$HMXHRkyZ@Q}>fOq^L
zAuG{F{&NRVTzjRzOV$d%;yR)XGXldwJL5tYliJTmEKfcP$R~6YOgUJN&uju|d@NBo
zX%Zu}HKYO0(HkiqJOZvD#Ma8i5K?<LgiwxEVSKlOtUPo~%QM^|qBaP!8Bjn*J${Mx
zgz5sau0Iz$(T}#2hN76l0K}k701eOQjg-d)iLUvkj4y$Tu<3lw9i>?rBYC@@PM`B_
zAL9Q)4Mk7x#Fc?scYk4Gj+VnH$5^+xgs3)g0x)u<nXMlaGRm~fi50ukI@>>Q(4?2X
zk~a+%L-qqP9x}1XjUx<ssn6SUln}b{RRLOtiS4rti@|&n%yo0(b<9FAHT7Re^;(B`
zjp3o<?)#HrjS!CuJu#v!4SyeaWB`Bm9`S|MB08%iG^<Rg$&>4R=*snt7w~BtJBrNM
zaP(Mi=cdpc@(PGGB$%-AuF<*Ms$=)k%FpNa_K)L-9FxsC55BLJYajVS#`*{kW=orp
zEQeB?fOQYf^@rN@6r2*6Dt6~<YQQ~Ki*d<?LE0pH8MyR027RBVEew;K8Xzqw3he}o
z;hJLnV)H@0Od;9jZaa&}zZD0B>EpWc7fm+Lbs?TbgBg=lwTVA-f*xzN)}u%AOM57=
z02OeD8SB~LRFVy{^{&acHpOKdMPtlkzFKoY{)7zLFA!2P6}F2I18yLwdd`h(&H^i!
zzC>&4Kt{=mU&LgAYi(r9FYP?%XHZk}?vQ0Lug*VAl6Bv%oklz1Fza$N9jQ$`TrsMt
z=t{Q7A5S6xi7DbN_S$o&=t?-I756|OcW6LZ@%s!NIX4Ax@EqHFWpQ_2+xe6GGZn9I
z%=G25|MPWxI8Y)iDhdue^LDr#txVAtH4(F!*FRWk!66i4h6H5pp4c;rD&`}BTkymv
zvgCa8htlGe7zlF>V3$)caB4FMX_{=(hPpoBp~sE*A=~@M?^WXl`zp})PCQ?k=J+`H
zXR4ztBpDyF1D>bsYvo0K@g8@IJnKDUaE|6Fo2y?xkn+jmt|q76L6Y_KrVg{ek2r%Q
zE-85J>Xe7(Xv(S9{Y*t^lUNT$XpH+}C7tv5_}DU1Mn{M*!kCAV@o5@0uj!x4yoR0<
zXP<AeBsq;|+k=LNMZ19Zu^7qM6HUNp0W2bsmvnH~n9mt>A|WlUyQ3BU#=6`#)3z}z
zb4b3|=a!B6M4%gPj%<j{5mlK0Y3^~vDHXUnuJd`Jz)ye>j79}3Jq$D1oEVh@jI<u<
z6%lWWZCGNOylmDiaKwO^_IfUib-3DVR(Z>L39hF>FlFQbB&Ih~kG5V=wboe6Ea-{@
z1g+k#J<OMJfPWI9RIsgEfB*ZPYoqy5lUWQ4Qtty}Y|R>d_JQ`&ZA2coP8GdD^d%>Z
zD_KcK0-qy0GTldl0FO~T&MF-XC`8ixRb(xev{v0u+kY8Kj5?{Li@f`_`XpqhO5O=7
zY(B1#SvDDSkBmtl%uEz1tJb(PU@=r<@+_TPxN+rOdU|D<EdvvMfXSyu9|S>?7g%HT
zGk_N1QB0(p(5MU7Ah{&rmx;^7?>)E*MD3w*NF*#DEq&`<MW*N2X^?+ej0g#Kwkri&
zS83Gaz`S5r-Ajiy7!si|=n4u!=1C_isO3#&hxEi2YFe=4j}!?3`<}IkHUS49D+YL%
zI&*kgFHr3*uGF?z9q~wjw~vIG&65g`e_yB*QO>aK4<mn+O3ve(qqZz!yTe*Qju309
zqONQ?Tfl0C;%t1*;w-4MtnE@3@W^E23dQbF5;^j-2>?>sAi)+G$m<!UoVry9$V3i@
zK@oYss)|)_{{jHrMc}{=w-$h`+8gG~I{S45Qi8{4G%5iJgGm{ij%H6&k=Mgsg}kzH
zYFtG)B%1t>RRM<P3Fv;AD4+8F>1{cF%KLvktnr7#IzK65iT;r>g==>6sy#l8oeLct
z|3OC2te%Ww*<kM!vN*WqkoP?Tp+|I_rlXl2zS^gm;3dsq^<jTfEO)h#0tM?Xk3vC0
zd>S2)QB}t$h~UbgfmKj-045=W-+G}g00(yZEsdiLu<KCBEga5vvpzQa2Gc57c~Zo}
zq$aEHZP|^w4C`PmlYlJ{+w=59Qg4O`D@gf%@`Whmc&vn^okqZVH#9ef#Abnys2W;|
zZQ}q!2jt|Pt(H<XS@f+C9b+R{yL?vcT4W`|BT1GThCi_&IYGC|LF!_B<vitW?#SmN
zuFXwR)CKg&{>8TNYX|NY@_nk=%Ytt=I9gARbKiVZ$#BiYNI5BzH@70@ZcW$f#d~sN
z^Q4rUASYBjYsui1Zj~U=Dj;9a|0^F1qL&V3Uc5CTyx7E<*orGE3Nk0}A)fa&(7-gI
zCFMiz#ue7(_Za(DeNS5ep-7%eqNeW}s`Qy-cEj1rqAWE|kL+*w#>XeELc3B5Eo2hA
z^q=H&Hy!E!7{^=>02f4?3Ue(1)Mxsgk$Y@dPZCTDYW+4zjz-$uMi$%(+$_Aj({Fp{
z3@oC1zk`gnRA@Tk8XHl-lxkF9nm6X*({LwWAvQC`XcDO%!CI#<>4erx!tX2cnxDwS
zczF7E>~V8pNh##J#VeDJenT{+^=h!9?+LY)0hM7?f4<1KE6p5`4C;-666w3#QRj-)
zOf6Gzdv3k?VqMH|m<ktC2bo7dXj#s8WN;LPJZrk|=y<v;_JekdDhyep`bqoAd+1O9
zJ&;()Q*T;J1+{&Nbsz(Ft#usk<a^EYaYK8bItYjAx`%!1X~Lo2S8oV{qy3VOH3Yc2
zMQd=OI&ISvsB%^<2Mr_~U$dlWn%3huXn9HMU*%6#u5&2BE~wZU1K$_GL#!<lsB)|S
zX__*^+87j({RxoHjO)mmh@qEBEn1c<hT7?}^iNW0D0?{OQ+5DS-Fa^oN2L;M@8L&}
zI2@#@>6mY!K#_I$WydGb{+Qu7e&i<sY3*SyjFNC?{?vU=v?D+8G4m5~jxLEWka<#3
zR?u$K*(cxq6bkT`v#yqGY&RvW%%RNSA#kxv#7E2o@Ke00)kuYSFn@1?`Dc_Upu=_R
zCrg;-kvuf@Kium<gIq@DKTd9)*fsoQu&Qbw{LrNNqTyl(BZ^uX+jk0Iy>+WZJVdcR
ztDuj>AB_uI{IE{iik1H+6%WOJu4CSeiK`^`<Uy4l+~VyF^hwcy9RrTQY7)8MYrN3h
zG<H`$M6Qh`M3CQ4>eL<~EAIY%mv_M;&}^L#A8a9!(5Z0UGZzwx(i-08Ttv_zxLuc{
zo9k#U+0GLJuId1NY<k@3XnfEIDwl3gaoC^QJL-3L5D4K>redn4s}-}?xNZQBFV~W^
zT>PumZfd&yV~;OcMjT9BgVuvn#kkK3-eX8!zEk%a_<zgq$kb2p5a>glvlp_lXmcEh
zreAU8U(Af)s4-o>2Jc<WG0}hS%fxw-=-DO^S&!XPFZ>Apg&c?5z4YiNshgk|Ex`HL
zt8iZt-c}t2BRbC4&2Y);0@v64+t>ENe~~vgM}dB<(vCYC%zUxtjGn}sV;AgmYWs{y
z$LQLT^ZadWec2<SVB&jH|FYQAQ3w*aRfabzwy8j@7)Ma`?+t62aSQ%n8wrb5t<z#|
zqwS!8VbFzdlL9k0om*uY7wQy^;bs~$4QS)U(3>4x2LEb1Z|fUNB`U`#9|+k_(H80c
zj8|20PB1rW5G$e!Ne?qAxA%_*D)1tZoHQgQ#M3q)5E9y)6Z(l7=(u@~pCj@I?7AIv
zh;rIMH2L{xhY{<KA}~-mQ@R#%fAzd;pz7!SL7*N9vL#Rd;E0~{mE%~N4pN;mC?h?D
z7xiiUNrC)=asT52t?H)ixhViMz5ffgBZBe9Ue8-6x_cYdSrIECELD~JFPtcUb&r4m
zd+|qEw}y>83EkJ33Lg&#3J<%cZt~`w*S!4H!&V}c2AQrIk?v#0-gCrD@0{Rw?dg#_
zXGko1O4^b;+woYY6x&EOvvt44%JAnByxan#wH9TF)r(;zOnK=kN8pqe+9Su>{Dh@p
zU!K5VT3<Prr-yaWC<21si5iaLBa!T|HblQLz-h$4NFfieJtDt>>98sbblL{o6A7x?
zT6kbdv%8(4?y~sMK(LGk0qSMQ&m+_fm$kYta25Q=AHwQ^c|kYhgO+GYmTD*`4$olO
ztNI*v?*4-QRutx3QaPa(G6|&iHA-*yao%}7gO8_s7?v7D?{STSV~lXHc2KaAr#f-1
zf@no2tCWgZ4YN_T;vkQ;qjn4;Iim07*ecT?{dK{R{*tG5k|1iIsZ|H>LSm4F;SU5%
z=UZwUVMi3ExiBBvt#h33$wi8F>>NzAQ${V>c=nSSbvR0@Lqw#EIh*QN{uJ+)0K4|>
z{-w29iGTo*DT|4-8%0Fs-wzKk;ri~vl)l2oF&6(Q?wVbT=Z410>#;|x<l*?F+ay^v
zvr=grbTeJ&_S|@|>vFhs+Z}5+u?|i~Tpy##CbDohMN~D9>acA}Sq~S0w8XfhU**jD
zb+OOCyOb2uaCvenOXP*){I<!{;1*w}s6IE*1zMKRwrFN@?h&?b-OhLw7$?dqS!EsX
zjO`+~i6tG*d|0&mj)$7x86*mq^7YOuC<EM$ny&*`C|jcc6AAVcbY(stZXtnwkN&oT
z#Skaaze3JK>?G{vb>r6Ly<KCbSJ^|8y@?Tk3p>O)%<nC>{<4UcAwCrov&t>YF8~q)
zS!6MxDlcqFkIU;UmRFFYP2KTXp3y_zB&Ewz>R}ub^+Fv(rQ0ULrERd+Phdk*Ft8iL
zXzdqW9VU*WEXg)-owjAXp#0pQ<d9Fa5yk4oWJ%$`C@ew-$xKzEaN(kkj>;}Qw7)bX
zb~$~ts%tX{5f#wkuqIu_84FeENNjzYVM$A`K;I&2JZ6!eJTPZi&u9#hie)H-u<1V}
zNNUd~b66p)CC^?r4A7yIjJu$3zlz>Q;@k!xq&5>b{Dx$d_OgXQd+ew|Rygpo6`)*E
z9uinG@qG0_nmUzBxtvX>kw!~18+@NfcN5P_ZbGcjn)Qv|t%%&-7C@m@d#=%BEstz)
zr;2Mpi|~tOOTi2o#RO-5MFy4Eh>sUhH-Yo}G@j|cEVKWp306(vi>u4TpbNX9pB`vO
zLHKw(J%Uv>J^qbN-XEY847S|oo^}V;?uBRqizwl<3s(%pm+l02|H8G8_&4dj+cNiy
z=vN%yCn5B1&Vc%ET@%oGxdeVA4ZR@#=dYIM8d&q94EO92%lIezYo12cmU99u_C;VL
zx6I+arpVr?I9G9)u}m$Ep9b|yh^TJs^9XvxJLOd3#Sjk`q5I(2H8u4R;MG38Ntfxm
zXKSdh8<_cau(`{nz4;*csoG|%$g=0z8>q}Rw{5ihaGdYPb!gC0JbqxZE%q%=>uw_)
z8wf~l$S$N}!umOw0y;B5^gTy?#GS^|;0&u^99c=OHv-Zk%lfZL1H8TF?)q#mpJZ5s
z!ssFeQXz0-bG#Iu(D~QQcZ(%x>JoCdj)iE5XX4p|&Zf~YPD6=Q$b4%ZQ6L$2v1<w=
zJl)ZC={^`zGily<m{!y7HvaN_gqix!h!yuu8Y?XqFWqKv*o;9&vk_Ro#!biycqZ${
zfa4dgrcuS41+WI#$^QpWd`AgfxnQbsaSh1oZ?qt;>DB0g7`vbDD51Y;9n}P>D4URj
zH1*O}e{-S6S8)^KO*|yCY>qvEV`5eaK`vhGg!$qspb|NK)_2p;S+M?utd`~iC5$6c
zF~lFoP~HB*B=5SOAK%T?3tPAmm&M6EpL~<3=@`xJhIfnp9=wHFW`wbWJ=Pb)QrPbQ
z?`bxg3=bg;TIq_jaya>oxCQ3di_@XOtK<PnOWXr5+DO)n$w{c`H%XF$7f;N2v4PZ=
zXh5{dzI2vw9E9Oq?#gBe03vR&x&dilw&R>Vd0%ZN0n^sG<s9t{1Eyd1`lz8ddHp`|
zZJ%7%KjB?7&Z2Jx;h?$%*Cf1#`i^i8NE;RpelBf!3S$){@5N=zs6Q^g3*c?*D(K<Y
zUqYl~RH~4=eHeNTvo*hKFkn14WGI|EO>!MZOKM=%Z^(;~UXzmNMMf}AV_)8DzTbe2
zCL*+z9We`qgVax$?umVji-xEHwqOWvHd|wBQgfNoCT$jA5g&x*(Z+W<W&nF&w%<z7
zT08HbAabohAkq)uuE|}f?e6%7<*ly2Aao1OGwr@UbiTi-sz79okw7sAx{&0A<T3>n
z12PL>kainyjfkwOcs}TLNVj20u;m!PEgy2UDZzInb%Nx!xA4_zeQ8hF2lnsKy}>RT
zyMgDV39kV9@?Bd|Nfhwb!snCT$cOx{HUQgmud_0@H{%j=KN_~WB8|T|QeQN%K*g}J
z%HwXqTUsyrv3R;;@qUGQfBP{~ZxxD~#gk3Mw-<ykO%{_492d|j2h;W^$JgDiiY`Pa
zQcu65Gr^_bix`Q-)kDI$Gkp-!_KzV}5~3|^v+oTMtdJ<}HXdE%S03G2{hmlOAKMj@
zi^i|{A!Ig>cx4HDeh<kkedNqc+wBUhWGG>m$(|8B^5o?>-F0a!4=mx-m4Qx!m6~c%
zyU!ov5~8hqMxYl)Bb0CiCnCb6_idGyM6zw&bg;YBt~lZ$tshYP^*mtx$J*VXE!YFw
zu6@)mq%|Lgbeju`r-BYNq5M+Uj}D;gr0B7)lOfuKQ_IDTNg6JX#(eyN&Kr?$FRGkZ
zwPm_%7wiL5BVVXk;(gGt84v&k`dh@n<og|S$wgAJIOoVhk6ZfkwUrX5E}5ZV><+M5
zntIwALebUKMuCdID;vMWLf<}a*|V2ip1c}i#!s?lYC}f9U#U}|i>c7v^^MB+aI^|I
zN(8=jkhHJWTKi#q>%E8OU!H;t`(V-#PUdK#UYGbaqQG1ol*1?)pB>bY*0Ryh_(DiS
z`bhz}j-6plGcjtb#RHEViU@oqru>reTxxUBvdry)FX<KEd6@n2a5&BR=7lio%H`C3
zB(dH7@!<EU_I!mE;2ReRJ8qq+&013uo&8uvyw`Q>CNiL)x$YH@i71(HC&Cz1WbHl3
zyGSrU3NnX+#;O*z#x@vw%n5XKFYlJKZ_BZ*DMSv{GK>qT@8_k}r#zGfH63;~>QWa^
zUth*wz@fO88U8rOib)vUE9Hv+!Wp1~K!#o0DM~ifDVv7uOw&SKpnR=&;bI;fAiZNM
z{NPhJ)!m)VM*RmmEG2>H*{07OC9u_u<~P#T-CZWv3oOHt3^<XybR^1Mr4>%H%e;3^
zlMW00FvfuZigE)dI7knLF#IOot}Mg|0W!l!vj}u1@uDLU0N`X^`Tmd-3_uIstFhy_
zj$@z&^3rWsR_STOWA5tWPZ$ug-c<mCS~9}BM!k$N>qCbym2uM~S-fTF92cSM2sV7m
zMg0{I4pNY;6lWyY?L6K96TVCdN`z!J;E+E!f|AMULJLd#cw3=x)$BpWC_ZCyIq#*&
zF9>gCQ}3V6g0|@Y6(=75Jw(AUxax1H_m&2iGINxd4U456?{()JXL@#gk9Y_`o`Ij;
z;>>mY8k)Sv#}Ee5hQ4~<Wy4?%?URr7bE1Aq#PTvx$}fBHsOPD>a$?Bd*_+V#1KQlp
zjcTz5^dgWYwDj0GyU0ZJ7{J(0p+1*lTbm56uz{%SM!t7`O>p<e$C(7erIm-8QODn{
zi?Ne%L49gp(<GdXwuKZ7h`5Kb5*WT!fU~}zlKP;lw>F)o$4)lXLf8rv#EUq)c$_l_
zyWGm^=EAZ{9&f*jps62XDFsFL58Om>$nj*@S<VNyESrkzgCaaOhqK;NoM+Lv(&7s6
zT7j`UFrFP)s4!3|sP~k9y5QCqA&7z^PgD*${$w(^`OyvFu;@6p1_YE3b8I~H);FCl
zz!Qf3L6RS;UOW@XDXQSV)^(1!p_E6c^Q<NP`(isns`5tPRPx?PQBG2DZ-Oxr^G(A2
zojOS{9Vzm+pu(?_e)j|AUcnxNfEP(fmA~IUr`C}$sOwb(X{GM;t4Hb_v$|j(gm71K
zaoq}!`L2kYUG_KN>)CjmISu7?mB|7*48Vnn*g=1Wv`~J|5n)N3Ber*tBd9ax%UUJ@
z;%2L`rFJpn)A_nL44ol=Or;>$L*=eZ7nkPv$#=(*VfS9x353`%y+P0u0&A4?ie+T~
zBkTtOaat$rCVy}#^Z|e8q%+?KNOR}Fr8y+0eJrRrRlfnbqXlBe^jSgsQ}5j@#ZM?;
zlwx^3F(7xJw_J>T10{XU*8^t8`6ULoKmC^-tExjrAjkm*rN^qK{zzW=96Xl9eJ(Tj
zY{J3<0=_wEYChck7|!_98JAScL!;~<>s?B`ag&O+JG38cKDt)ykbc!7{(C*t!yv_$
zj<42*J-tviDZBLcUF02o5g#w|T#q7Jqv=hr@7-LxE;yIqL~>7>NClVxF<S;$(k|$#
z&jk%bF+<?lsj+aR`UCHe5*(9?Y!BrwXG_49_0*;}#>V!9IpOvkH>L{B+KhWG)`d?7
zV$hrdpk=JEBZpA2O+Fx18N=#WrgA9jH3@S}q4sayLxA@bz(p6J?d1q9;I{&T2(Tcy
zgi2AJgLUM69B=3$`4uzYE7ua^f^Dk0G?BNzVZX`=^XLRKZ#(%qOm0&_og}XP?Ft2r
z2Gp#%_kB6<Nm8pq<|D<#UmwFsW%ysp$9*;uVBZ4`W-V#QeIVLwgI8#=na~Mel6~TL
zBWST^l8%~l`Quv6|J+xj42K!sj47U--X@bUBbuBWCIE50jGkI0;ZkqB-OT((87mCr
zK+REQm@UM6H2g3s%}jf}O-7LLYsyLPSIX&@^KVTdvW9-2!Nri=biluP1iIyZ8&%6#
zWPmotN?N4KHBJ+fwaxI1NXtrKJGkrFM{}Sa2%=B3v8g-metd~eYxcx^N~%e@_`nEd
zZzl(zUsS{6YY#+Ud+6FF$*3O<r0LjQ|M#J+`qZw!y~pc+5i7dOEUjTwu%%U@Jzl~N
zX>l*>y{}z1QT1qd{hmrZ3>vR7w*F^=S0F8oT@b*kECBwyiYsQ~4L&WK0Mg1ADtDFF
zcq`e1n@W06Yxi*kK#sU`aS8%KLYsg6{nZT<M((e%wsj8HwX@i5N54dRppQz>ZtVva
z87<|SDeE~GtGjz-J0zvX_V9w!P-HQ#KRlPCz~4%i4B_;(M`SmYrT!C7c6ig<{ga>k
z807m5W}WM#U0f5k@NfUf6~i78m|y8`FNBvJdLa;-s1g@90-Wd}vsSldH(}ApcwyYR
zh0}WmHsPM&H0$e1Im}{)?S|pw&sp8AGr&!^bm(q<u1oxzWY1Sguo<tgcd3@1B<8o!
zsrO&n5#LsF-#D;n&A{NvPX|X=qZx54j1vx3I-l?9#An_b5q~Nq_9CzbMCfm4Eb`;K
zm!|^o(3m??vd+ydDUb`MAmUG2+y_g*q<ZG6YDTw=u{pkVYz77oD-~W2ax^Ze^`&Xe
z7D{EbByM7T@zU{B>feT!uOEQS_rxuv^b23=-+8+a`~fkyGh8e5pgTGCts~NmYktje
zK0$?=;*V=(5jJb~f;{P<`>ozLt-L^DaIvLN9{;{mso?ynoMbcu>~;4V^$wy8v;|}Y
zG!nAVhV`c>G&r1+a7k!c5Ch&&F>cMf_+JOp@DLSFR65(93?fEKW)wD<%acmcU!N8e
z+23TGh~<joX48&ej5YspOwPX(18z@7^&`p)Cv^nCVHG9=F#Fhm)wRfZsC}~mAUERM
zOg@PNCBMOb7fET&UMuwE7%AJg$%~7U*%qp-iH>XreQ|-s$A%9OEgp9<P51|-AgUK4
zA!Cwbb|3m~$0<)<mV6a38o%zFGByq*lOG6s2?qX=C`;c0aW*sgb=pD5O?BB;*!!j-
zCNQIm0!tG0^HWY00>048C+n-!#e<e#UvNk))~b!HoT`%x3dZhxskpZji`vRb(k_Rx
zh^w%R*C~`;SLVS7t+8Q!KR<5yf7+)GX!JSg>Y<a0I|Y4f>dKw!%N|VdL$qkLQk)Gf
zrxa0KR@f$_5lwSKajlu^oSINYTSwUcDi~+!VzsHfLU6Odog7K4lJnNta733#&l5Ut
zXC+LsdbI}9Mft8mhoR2=VtiljqB%3o|H(pRBvjGR>QNV5XjoN#l9URIMLq-l3`K1^
zlXChksi}+Tm|MtI4ODVMfD+1k;O(z8yN(iaD2Q$kOs7QEb<c?9*Z$9{`Uff4gC7x_
zuAUzOtJ>=%h36n(LnpKUCFod3X4`>eHtJ$Nts9S7X2`r=P=gHX0omgv=tSE@piPqJ
zFNEGyQu;;4Bg%62EsSI=XgEVHo&m!*q9bgjq6glX=7mpX>`2{`JI;w|%swq|))o7K
z&ob~gDJNwC@@Z5Xl1AsX9cg8Z9)Le$Lr08{14x4`%Q;O<61ZOP)eZYMB)=p_m_@cO
z2E;dHr=5hJss|;r3O88_O35-44s8mFR;-mNzyZ@_R1mzm4SI$x^t6$BABjC=c8she
z@&)h(q=*lu{%#<7hvJod$?~dtof+h}2GL=0*m1vu)u0&YCTclPYC_duINK3Nwm+ih
zC>6zB3riKX0+yxU4thX`YMPff`DTb!9o(&MSlKi<JngJ5S0S1fbY=y)ZOW*e&AuA~
z_8ed8{bB8&@QY(Ky6S0HAQ?ahgR=Uy_LDdw3qYJVZE#cRG$Z*pgLf~PUYpb^?S<ON
zjYG&RI(+Dx3ZrHVlgw}h`k(@IWgSC{5la$`2i}=}XkI0ybM9h>rCj?c3Yd*v?$v&O
zYhmSLlMh7^L>u8!n9vcQC!%c;d#JtJEL7OV%M#JqK+4IeF^7_@Z>^F_l>P8#fA?Ew
zR?(wcrND!mg;BON&y+@xERz$l3P1Fc0jcR0YMo-s&~a`q5-LMmm<aUK=4juahfieo
zE&ud?#Wb|46e$%*TgQas?Pl<<R5#7MVTU2gnW+3&Tqr4j9$PDp9dqLNU-k~M_rj*l
zXu2@s{a7Iz+zktl_@qvZz22rLMqUKTrlY>!3bjV5Earw1tjDltfZ64HTH{{Gsksyn
zd$H-MxtrXxVFqL|<&nxEXxfgKR3O8SdAczw^^v~><#i(JbtS}7&EI>OBD7|dF0ya$
zZH+~<(uhJRFd8E963X`jeXWEu$L{iA(g(JWb8>up&WT(huyoMG43{a4eI4+9BvO#c
zvX6#&o1GgCTYqj`TDE7G>4jZaVkfWFdm1t-{&`mNZ~XG2NMN^Yu1~nOPb!3-4V&So
zx3LXPza1|2Jst78_V+kbt#5z5R29VY!<2>}kCD$XtM9VCW;9iSxFKw?hawYd|7&Pv
zFw?+fcxl?@gp3lqI-slrDg(cTAg5)g)3aQWMuHVH?O=5o!M0mhw6XUB%wFV*P6eWg
zV~WLS-K@o3BYFIxIH(3O;EbMB-%GDC0PLgYWisX`IJDH#O`&j>G~QGzTE?obYaHUm
z@4NX#;S3LSOAoTw!K-PG$-mi8p+X2-S9l~vH&kV<-=i%Yf#KB$fpm$nSjnP=&aJHT
z2K3^w25?Ln^%HA;!d7y&7J%K#{HUJW!7ya)sNS=_K(mr!G*Nvvd)o0NoENzqCy)BL
z)f&juVz>Lb;s!&$OI}L3n!m#q*vbR8AstA|Ih&bnKQ#^qCeZ9#ve%?>i6v&oz50d2
z#W=%6(##2or05zk^Pq53OjN?!S`K|~@}7T(5Kiw(FzZQaNQEE~{B#-5c(rr^z}!!y
zHr(N#I#9LXnSL1;tVSBq88zUoiG<%*n5i1Ns!McbC(8YfPdZ#~3non?Cr};lIfJJH
z>!5dmr|rgKV<pK$a7RUd@T*Wgl}Ac9fROqtYI0`=!o#;JW~KN(Uva<ZfQhqJpmFV0
znooKQoIxl*`3c=Dcwtd;KS#-jnezCnAMY$}a(O;sPIBx~A){DW1o}q}I%vLoFHrY2
zNd1tIv`}a;tov~Z)^TNyRA^1~ZULI-K~|eJ;EL@=%D~$f`{`}dWGn-hfGRO$v}kZF
z{Ky#=fugL!?EAJ7!T)0G#%Nb|L6uq(AGfXkpq=Yt4rUt=S-#}y2p9Kj8>)UM^Rkvd
zi96QcRe<8`(G$SUlRY#@BH-u*&;0{vFI3~k@pd^-x?xrfT+KcvLuH9{U<k<X_zLrh
zxIN6=Ti7QPD&%q+!0)jC`(^|Mh!0CN{L~mMkHx<S0FFtR$+p#LhJ)8#2uE3II^2HL
zYxXE%=z8-f_qeJoV0Zuil96_H;CZ4Yj^w33^yxd8|LzxKlDUD@WqtYdizogprIynJ
zSGb32qFf9Tv%rye>|!W<D!WnDgg+*riB`18_{4;2+4eK0#MNIB?cb;Kgx~+v{cSQI
z$6nzl%yR=PE}I}ze!$DLDk$`)|G6}(TSaQfUdSSA4VFO+QpK*m6)5J!ps~9LH@(cF
zBI5&!fUSz&&9J{k?1`vwOL-cJpdAbD5*Gv}TJMhMfny;ivpMV6Xmy2{d65x|QTv{x
zy|q2Ynr5Cqe@<g`w)as1>Ba4U#_EDAe&O2r3<^3o;xXomv)i%%oQ-N%(5<rgVhq`8
zGURM7Fu{3OtVgRr3-y74V;28~Z)d#k$8^0LO;PcopL`r6-Gt!ltWF797>6FoJcV_c
z!eOH&WbLYKk@mrPI|dgdZ9o%d#<PhZV%9D~K(QNv;i1{iB<>O{k-2+ECzkmx+yu%G
zl87+qX1i*?<WFZ`|IZBR-<#-C+C^UDBmiEPVKTEqkp;Ie3p!hmka~0K5!({g>GZYo
zDz1B0#d535R(@CunD*0MPn<Am+2FnY%jfC4g)>?15tGEV^;GCJKev>USOC%wEop=`
zLEmhB_3|UrZ49@-kp=a!&%EGnBa4KTE-ycb?viDpn(Z%ZCX8HdI>9R0S>y(a4h$t+
zX<awW{^af)ZHqI>`BF09@(S`>`A_+ElX{r3POdegS$O38<U?pvp}9Bt?pg00And|(
z-5DTZXz2tylGp$p>OXK6IXRFI$W^7a?7e|ZJF7xqNEW1qaaExJI_7Lu)7-jwv`rge
zuGLzeW;umFm<AHUHzpGL^aX(HojU%3kDi9<x%q`MRIOM!57e?!7~V4Y*VvExGNemW
ze7LzqQU7&8t-fGHfwHh<q0Wch$2VG?#^6NzFr{(x`{>7q=WNUHZaEz$qUEirtGz-y
zL}9TF&)#yQSLm(2HAQs<F3+SL)m;ODTl=LFYiN)Ycu?sUlC#aK<)c^_y(sG$PWRTB
z@&UAyRQ`N9ffUGVchpzTGjk5)5ZX3pL4~$O4;M2V&SubXypOw{s005l5DIdpnm=1q
zZGkyenFe`~XeCV?vKs<J;)}Lg!pS)KqwNCI9T8zLd^WJ(#0X7rPXw1Fa?~(AQmaqi
z0$>t*OWGfUyYV22&WuRka!I~CLh$=_%r{fES#(L}hiYEq`l}URDM43w095ew%(*UI
zO4`-$OKKO^Cb@#y;?rQ#>w8r9=X+L|_F2EBdStPiHlXsveIcDlI&ZpmktiTV=jNqH
zy{>MSeW2Q!+cNDU$5REyN!QOnL&#ajpL_iLh3|joT?!OsIOhXhz9-TAyd`rRUva2Y
z909g4%ZPBTD&atZIsnq8SOrH^Wi-J!UW-kC$1~i6fkKXubz5ztX86|yF)8=-15ooM
zxv_4FD*%}-jp5g{`^jv^PL@d(U1;15Ui%eqn<TaS9?(fmXQ44(Lc71y!0eTDFvHi9
zTf5lvSalsCB`eOx<_^i8x+y}(>(FOxUKVnLn&b+|!&>+{PltVZn~Vy-hu%tCh<|DI
z7!3&e3TEHeDdT8JF8G?#bdxpj-)2xlMkg%dK{d`sRn2l(oXvgNG7U)mKAGgvBWA4l
zPw`)_t@{EXu(C*OLbxG6e4YVg=Kd~N_g%<(%6NM;Wd9q{mSp%-xXvo$0x8}xG_}V7
zNE#&e@Df3=>_3V7FaYb1^nJ)@zPM?60hZ#j+3<iaifwY)JBthd0?D%f?sR*FvVbqR
zudA`;%{ohM^VsL=JajpE%z`nT^JDa7Cm6C8EzS^$oKJ+uR(ljVr$TH``8nwMc%15V
zu*f;6<9{Ra;sc)KvUc@^@%?^Imq`+jz<R}HfbW0J_yr$opsIo@0bAEs$<+;f&ktcy
z-J728<WFk2*CmA)vI)|j+V=G!zYgNEYEFKi<fieoc_96iNImsfsc@iOY`Tcf{5OQ_
zxh^4dOuKD%6nkP?8AagSB|8c*1x;+0xaH7!brjqxgY4Bz9ZVlX&$5>L57I?mdN9td
za`JyBZ&PvSfq!O#Fg%p?cLSK|E`el;<8MPbNB*p+ryIUoaWUcX7v0hbFVCBFq<PoZ
zaq4N{T2IFXvFsIXi-_u=(mpwmap=4a_`OJT&#jYaEBzbmQ<;v1w2j*-?AzKPGQ}ab
zsGUsYev6l@_(PyfBfXlI?W*d<^iX`BHaFFTITlvEv=iOl;qm7I%w|M90TfyWPGm-n
zX+GU17OJ{%X8kwQiMDLCAJLFQXmAo!TT<ckV#kVb>8-dDuUyva+k<(}VI+0Nnci?c
z6EwYcDdB56hG};$PS>(*`bWi7hy{GH@9DFhe@`0k&%{3BRXC;a(6(PYt<*r&PL?k>
zF!iI_UJHXe8@O(q<OHk`X0%)fknLD8a8(dXU;C^-0mpXte?k<CjVFWwK*U4^H+?3H
zD<GJeu^&Ztg#>0yS=B2)7XZGEIWT%{$F_d@zwY6;-Nj(5NJgMwV<6_6ZWyGDcj-jc
z2wk$qg(9mztb{6Sf&DMwYK_lQAAvZ{m|l`oonY1C+-5k;39Ghs?;+}BwuTCQs=%=u
zWeE4Cue+r;S?FToKG8d({#C8JPr^QAeeC<apvCT&4b}d9SFH^v;Kb5JV8QQ70X<c8
zhJh`3$<~gtK%2ekfXF&7)$z@a=6^$Cw`YHbaX1mH%=WgK+Sr7v1rSa!4t^D>J?hQw
zU~dH~vsQp~4B4CVEp3Vsr^*dLD2t=MaLi+LD-6c>G1n1CFW?=8DrVjE)FOR4e4Mfb
z?+TsMk>`zPumhe5J-#9+T^5|rN)zvNFrk07f*Cg<nelGtxyQkOm=uxHCt(anwce-m
zRThy6dD)r1Ba;w?M~5gzUc@?yfQ&YC7Ww)nMzj)Q`PJ@1OMET)R<NV|Vp#Kfuk#pj
zjpx~}m9$L|&=ly~C7n0XxjEYZ1FT2CIpg#Ni8tHUy4QDi*Mhx!2ILlt=W?OpjXqrq
zt@m%fb;fNcj9(SfS4GhmorqHtjXtr1s8c;*8Dx_T>}>j^9SJY^Eduuq%}2WQ^$_N6
zK5-r^8jw#eo|ej5#IO7akDE9T4(yYkJ@sS-{%F{1dRqClsqd`m^NXyQwLqhZMWA=|
zz&zrZ{Z@H||LM{^A0)Cq{&a=tk`CVB01qGOl6S5jKw`0;k%p&F%j$BC)`C38%mRKS
zw*;3E7esjUVw3q&;wn2tdAU?0DkqJB@~}WlU?YUND{K>kFxBZ}Nz8oKTl)3rNvxha
z%XPK*Q#lUdaW)u1zZ8mbce%DW8s5q&WH>C^<WEXm6W;p+M22q}rbjXPRw0K(=wE8}
z_cbt-vI?}|jvS1&AMIiz=UisKZd~&L&m)}XkwN&87}}{Qvxbo2{QYe=7*O~zMOdO)
ztC0@CwPDIZCARYwQiZ~vD@~k-AT>Ki00XgBwj&0XF*>5Ac_>KAL1J0n`>o*8;7o=O
z!tEXr)L)^<;Y|L7TJ`(8m;uu2dZPEN;EXP_TdzOalSZ7bg80l?>ha9PAs<Sf@*UWA
zjods=c=lr;J*sW1CGQ5B+o=X>=2sc5Sz~p4$G_WiNSs$OmIvt;#4*r}GB3MPuG3CH
z7iIQe6y7t7aO$L^Y!{GF4kyqv)$g7!Z`pkk&u;pn))`hE)mh~g=x^eA=*kiO7{c%j
zvvLpmES$fc`y>tyl-OU60)PTL>ln7#b_0tFRZAkQiAQ$G*8|A25k62vtayI6yhP<#
z^FQ50XMPcSm=BL;Foq3IR-jdXz5>Wb03mFONV3^)!wcah=T=n;c%aNJR@N1R246Zg
zD!R*_lx18>ZV|A*O!q)_KJQb}Y4Jb;(W`je?l_DtgX=_)3Js#@#iGgeImg~u3x7EO
z7fE=+@c$$jtC>A(_=C0H*CEj~fMoL4NnyPli~f%nCtr>U$4LY9j4A2}u(->oBaM%Z
zr6<t1sSTm)`=0t1d3K$fUpbmMR^;j;gww9WD|$ylF%X^rG6{L{Z#S~3w3HwH&;|AB
zt~S#3rl;<;AFG((?=tCZxzn$4qQ!@@S$=N%XXvX+n9-YaT$=t<D?wn3Q3C6^&(tAu
zc7@m^9qPxCwYvYO=Qpth;ON0JXy7!c@%&D-LgUo|AoZuEZXGy|Y~|HWKf7|KVUb#*
zA?UC3Y@Pe}p6oKJ_x&lxxD_oSQveP{W15ft+-eT7*sPFpEtTddx|E5Qynko!3WNjX
zSNWY|Dl3?CP2hoQ{II)&-P-M!s@7fYVP(>{n{9jk)3Ln_YcjR<4%ViMqP1PNqlnS0
z9xkP>RRBLgz`t~I{(C&`A*C1LQ%KVX1&{PIo6AJ}i~MH(do6V1#tAeEe+?0g5y7%T
zWEkc+6O>9$xsx2lGcwqc&1|Jfv6M0r5+3L3x*bU*kLC_wsuM@EB|5##AY9OKsd|WT
z-RMhK^32a<_Cca^T_9L&tCuJVC#-JD21ZuJy>q%i+QuYoaDV4aaTv&T8f9ZX_y_d&
z8W3)`hlME&oVg0)&=A4+B@&&tL1KUgexAEPZ{)`McK@qWN}WwLw{T(+#|8+NKtw(I
zPefs{g3;T!SkIzdH$YS})aJ`pd4&Ep2}~U3an;!TBCIx7w#(tNeJGShu1YAF)ma%Y
z$c2opic+ZnT+A84p*FA(cX2+r;3Xe~0|3f>ZKFRwdHrXJjKb}bM&BzYtJrBtfrUHr
z9Yi%+5~3aJ1&P(jJMSsh#~~&0@kNj&;ABVg*tOw62iu_sP_qGsCw;%Hqh1>xX?c?%
z_74jp4#l*Mo3jG{0dw{#5IY4hi0N|RGxpTcaA3ExGb9nBx8!V>cdI@;xjEG`kLYsV
zJ1$x<l+;D=zcUD1K2hLvIuSXiMFtFx?Zo?S56lUlT$VsfB`3?x&9|<xc)+^LUz%~y
z2P?P%A-GSK6;zmvr>y`yWAZW~nO-s{Cp!_o^3s_LyQh#8GyB;jl(kq;0{|eG^f&Ao
z8M_DHEcq0AgYPHoOFiAl&VW^h<W=*uK9s6qqKN}hMP2llG?(???_1WoVN+S8C9-AZ
zKCF;wVkB!BmPu=<CGe#Y^x-EHBvm*IoW#coLod1CJv@eTOx-wj;IO{s1}U@ZRn;@R
zB%L#K8-ID;|BG7)J;*u70#Ni=bk@T+DJ7eJeJ9gt3a#uD7y4c1ggVZeLlC4EUlQRG
zj^_XfId(ws*)D|MuxFhsZ#4f<%q90mDqnZXhkH$<+9oy`bU~|>|B`3tTc5@@+qAgg
z4{jI!Mpl7!x=IT7Sz~aOC~Y_qG#oHM>UJO9+V^)bMzI{qQRvSh6$ZMR_K_kJ<}SVx
zd!F1l`5M~*f^=^{zmTqPo=42AO)kM4Esuab_F`B!ZdL6)Nt<>mRW9WA7n~28nQM;h
z&MAo8|23xwF?Xq-JL##7Akf#RZss`=@eCCc0{B>vvNXm10oA!>feOait5`M0-+Rg-
zD1Pl2eM;B)Y)EWV4q<*Z>F7HmTwHbcZjF%YOXH>}fO`g_gziN{4ghhWAf@X5qoWJ9
zwjSTA?^TOt!0s1{J=u#K5k8^M91k-Ax`rcv*-V3;EKXZjiJBo<@)S3q4XQG{Z^2!m
zDYC1T)+>@PrT$N(8W}Cy?nrv9tW)3S7c1Bg7JOmDMlQ>&HWahE>{3ct{gY%z=l+-T
z^Myw75NCBhTp;7t3CADZY5`Z2J+8_;PG9kD`H{Q!Y7Sbg9FqdF($1qh$V+eTe#sqk
zkM}+ZFa+*AVh+dVEpWBMPWaU8_I}XxIqm;g&wLNJ6Bi-qF`-xNGDWQb$PW~r^00w6
zg)-{^ns>p&1?j#yM9$EU#ed3#$z{iWha+K(v^n~7_3&TIVux?HV%W{Dt;jr#OHEp^
zZ#sMja}Vx7e=iwF_1S(RpFDf|f6h%#?MwGMF*cF^p(VuSf`BA0i_-vR@Xwb81owG1
ziLDjNb0^^P*@X}155`$6a>xDW^d>OotkSZCn78CRV(SrdnpS&o4$HWF)d(QjZI2;T
zIwabs>4x@)nA$Oaldg)M)C@F7y{&Q=OjZePA}qXddNWnS=r66S4$9-UR(a6objop-
zB2;?w4gyQe*Y(OYzH#U<`R?NndSc`k35A&!2A&S@oD0x9-E?CY6nN!_aJ!W@qvqJF
z1~Kbjgr#srwfKNy6)zTQm+k<svo(XoN5}gM>}_S@71;<2t8SqFS)+&@l+$aG<+pp`
z$nn{1{fpYo*au4wTq*y#DI+k`2-3Ke4hbA%Sy(_dYV=ib%n#8+(!Zb=g)}-~eyxaZ
zQiC(bY?dqjaxW``<M3zJk7UZ}!xi1-onj&cA#z+?ec-63l}^C&=?)Aa+xa|&T6%$m
zb{{K}@cuiH5e()`-7}9}?C8ReRaIwU3(N%e7(Tjh%$6~KAC>E~+%9<~36qg|;I!JC
za%QRO4q!;EyI*LQiLH}NLizNrzUwzc#5!Ba5X+Qy=AlYt8ICK@mOHMY9i?wrR?py`
z4~Z-nJMlSjL5D)X_ncl@Jvm_=m*?DbKiheI)@Hs6=9`V*3H#`}Vtl@d`TPg`;`x=d
z4Yw}3F1u*o5$M}=^ETSPm_$kgy4nR0v6FB~KJaI&To63OH4*}3t2u{y_u9D=V%(s`
zwWjAOt&l+uwiXG)b9nkVWn+tRE<Z4M3M<cWf_yGiZ{S7Zqtn!|%#SrToV4>9TS}d7
zsV-lb23PG`;kqz3LoY(*iY4^8oxfsHGi0c(_K^<g7|S^(GM@y{e=cDq{PM`wLp1%3
zZ#x?Q2?2q4Nz>ed-8@ZDA2r;b^#Ou&Oh`^?ZU&U16*%=W4!?X5^p}^TiVmTT5D%9|
z)|A4`U23WRs1%8eRVNSYp++PS<|t47AyC1NK%pL&tb8+NH~nN1m23Lm&7($bkonPM
zL5|z^M~s;!6T~hckdcW}bfe8XGOr6UeGU&Khg`lK%mJHY#*Q4&GfU-Pf|o@1hcGFe
z-`*?vO8v=}+Q4HBB46*ov(QxJB#a{D&oX*KB0(&G`k#=qwf^&{WKT&a$($c~8MROc
zj)sn$5?*YVlALtNcY5Br_H*=drk#$lfB!d}y=Z)TzfjRDhkx?VmQ%Xl)p&Vl^4;-m
z0h|!2(0StYXrx3ZTJhCrVTLf=0hrvn=L9elS#|&ys=7RC)5EusLvQgla;r2Yx)?rf
zDIU~QuFcl#70iZfAUK`d0!Qir4h5Q1(_yfV5}VeNiOrGE`QChlh>{g)@62d!vr0l5
zf$u%I#&Om0RVB)`!4A}JOFC&*+{Ly9MY0wG2_eDNM7z}BaRAhB;?0iAZ1E;YTkjdM
z-YS6jy&2Maz@Kmej2Xhu=cGm$Isrkx?EeoK5CjB(;z5*nJScSJRoEt(@zC({K^)t;
z1>D%mjvf`<<ap|!p@+#}AnHgIj5X*4Wcy4K8(5p}@*%%*7&h{wcL|9e4F`rE?1~Av
z&-YEp*A6>-zUG1pReW`1<#?dof~mDb-%xYsuOCGy3GvzcN~5Vy@=uKr_%7sh?s?^H
z=|6BiVW)FMQ`K20vF~2gzO6rsBWkE#mW>0DL5Z7Rf!e7_LJKqKZoq(_Qcj{GQU38o
z(~9xXTQ7y-A{_5|IEypl2p%VkhKA3BEDdJYRSB2gq8<QW&IPdrAC6lRoXEm3Y-;h@
zE|a4QRDH8uLKz+`q8yyUARg>$p`HioR{+y^3328&sa1HS4!pBRKD(=(Uz9v8RRAo-
zp+OK2@~lr7x`NH2LAGQ|<eh{CRG@upbO?^TSDOl-pJU;+HT?+V_G_2!m-n*a388o_
zM3iZF1?ja1dRR&<{RcF!ZVIgr`<QJ~U}uSEbI+^$)9My%F%HEXE)RJMZXumM7(nvS
zc!tMhs&%I{2KBY3KcDFboaXbD5f6@XNy3JikG+aGa$U4wx{hzUvq4E#8bW1%p-g0N
zk*sLLZM_IWc>j%k`%ar;{vB+pJwE>@^rQzj!z+O+YpLG$W{Fsy;(`lzsg>d8Pw#<c
z{;&W4g1NZBMCK!FYp9e}X+wkfAs=N#5+uc%Bx7n7x*AByXleJnHdc%v!>g`qO<~LL
zw7C0^<JFj<dyp@WpP%wn>rdhxYuodsCn7+Kr940&*17<dGJ&r83*a<F=Bo0SR}Q3{
z4vK~%3W~ve%PIM$IM6w$o;vPH%kimK14=kufHOgWO^$w_xx6L(d)2-L<;wmly?&*j
znNM-ded?mNKf;J1S0?$3e9QV#Xf!EyCjQJc%J(Wpj{>Wm#5T4M#Pn91Aik*81*<r$
z<XW_x13`~jZRQKsu7)G#eDJ7dxGIkHqFwwPeG7==1C0*%>O}o&9g8l>4;RFd;BZ6M
zm~7s^9`F3Y7xIF_3#hN2BDf@he3>ubsJ3c(#7h4QcNjA(-ErUhR>I_NgfSO7Xi7s3
zTa`U7Rz9(z8hh`VP*@SjDKeSX)kz~KBq4c42W|#$9<9X~>O1SX#+Kpwr#9&i>JpN+
zrOrjCDa_NmL?RqmS&$>*3aAUr^&a*)kk?(KT10wWuHbV;<Pb?)!UcAAP~{$`cgHlP
zq4jEhuv*r&M^-@cY~3j5clC`|7tLg4$^)~C&1)IDGa=fGXi3wFvSMm3JJBa9lXZyI
z@7_A3SDE9_*giID2CZC5n^Cp2mmI_VRe}y@+KNr$>fnn~$M=Myc#4eZf(<4{|8zN*
zb~V#JzyklB;!gb006%3m>_^N)y=m`or}y$uOntST#95nE&Z9%X>AlOfb56en1=8K;
z<!)DnJ|JW&$C7f+nj~0HrwWnu79S8NNZd}HzZsAJEj>9Ox~|t!L#cI!vEf+W<G&62
zTll6gTXzuIUN8E*DPAJ`GE}8rKyBoEkP?^N^;ApG{5ZI@lv0X&{yFwmrXpH2fFDqD
z<cUd<Q(6O>x4VdusHjHw{J6Iz)Oh4z>bv^QT-#m3@5Te>Yc<bk28i$!!WbvMEFtHL
zV2U!9=TVs8fZ=LZ@2=ub>F4{#0u6YodIyp=eQGrbYm9FWsL&$##w?$;S+7*S7@kfa
zB?k`vG&UnN%?o)i;RqFj1%1w9XD;h{*xx?6bs4=fD9>;%sDTxUy*~d(->UgN$NTA3
za>kFH5kY}2!RNNrW54r@hU%W=a^qrdheSS80IYatUROHCPyJhThk{PGsN^H|?%U!E
zS^lZH`Kl~7xWPNg<{3_=gn`v7P!UCOF*frd&l>tCy(KnPmEGeXE50lDxPkT$F7AbR
zjQgloF(^N^7?X{@F*XLX2>I?HRHzp=BZXST+9-6*{RwIfL2~*5B2qu;CiO%Ivg2*t
zF(G$Y&waq>`!{4X`P;HG`J8K{CQ(7%)20_Cf@NHad3l2QF@=`H|3dz%vf?bT39^zc
zW=lAta+2lqt<n6X=j-f9HvTf}Sj<wkPe25F>i*4+oZ9pl{weK0?o8(WhY8`+`V9@w
zR;`EXfkv$Qy$?h|TK+0i`7kqL;|1&%4Sj^uH#5A(5L8}z(z{l`4nd3n>ZUh5QYj3L
z$Y~2)L-Q&gAHZR;D)6W%sVAm`vMU)o?mRYBQf9F4Rq<jUS}C%gb&IYg@Xh1yT2y`=
z;0__F5De3;M@rB<>-5eCTwLlJKD$qL>gE?T&6>C`YVBPnOr8b!oJ+4{WJk`rO0txQ
zcIshn#zVAN1Wqs8cEw*f!i_AuRm&lM`tPTSX}M826ggk<Nju2C{|d2|`A*$p;x(gM
z7_-g&QLD3?XOxYo-Tx0>*?(lk{b(q+F!#&1PwQ-dhH(gHVDNK9B<5i<MZCSsK2P(p
zQr7?hiFq9kg;B!DpvrN6p=wS9?IknyMj~woSo;517Jg8_pdZ%xx2zg5FrNO>;(?na
zhzPcA)I6?VLS?;*qSB2o;pxGDlnW6yyC5po<<SGsH5mWZM(-Ol{<WrFN%L>2_~v)s
z)WRB9hxS&-3c+BzBGZ6GrM&VUT5ylcGZlAfXqZfavKO&XU;_F20ifZdscEHDwtKY+
z^uy)qZ~Y07DxYB*N`a~)0+r_QO1lQ-#**pqE~6h`XGT+VC(jK7YBIzPIrGbc|2^qL
z50HB|!V55`eyCvR$@>7yzlR^fyVvg}9s;bJ>ey-}LM?PFmtVYMLtUriNMq3a3~+<j
zXc(etJ2Oeo6RvK9nJVP?9S?tXmcG;y)Rf%#NEEj48AM?pV|Ov>h^l|JT}ADyJpmEq
zo<@<?(;xq~z~KDrSx*>k;ZXdq5+_QQce9LN&YrIM;t9r#3Y~x6xR-%4T=zn<$FE$_
z?(`A!oQt&Bu<1kXx>tjCrVp%DD)ryV)iWfm+@9#%zHarE)G(YK&9$7QW?^=Q!#R9x
zL;B8B-F+!k{=VLxY^iH6xcBjctrFqJV|LxdAMD!F*v}mWlokN;P!S|bK9WB)W(}Wq
zq{BKhcdbXa?gPl|z0fp=wzXvD@eB#gu<188#rLt2f*xe6-Fz;1qSc(0!;pHj2EhI>
zTRcz+Q-E*r5v2L-B_FiIckG#UM7Nw&cDN0Kl}M3oYwsqU$03oHMc&;d#4)vw$|3z*
z(D3g>=Y@%h!0Q8c<ehpyZZeXb(!x!igTn5uqg^4$>JRJ*H%Ct=NhV^DGD|uQMs(D<
z0kB+i-DoE`SY@biSV;i=U7dw<PnJGXasuF=Ua|kUtVQ(LmpzeCUvg!1cA7D0v8Qz6
z^4_R(7#=}65iWlr<(Jhjbu8~!WZ_>2BZX<^cy&UoE0P`pFZ{S(ZiW$~{`S$Sm_Ac1
zMx*;Pt_X2MGgN&R!aXB0jz|F02maKgS3*m!FkGq<k`HsLcpUI2XZJuVw!`1YD?vgD
z82Pf{4+tGlun-4X@&Bw;&@>DUbUT{!Tflm2YuTUDzhXz%(6HGfBa^LJyyG(Q6d#73
zaq*kfTWv7Uunr&V<ri%T4KS=_FB;6tss82kam+D!9}K{N^3uvSbm<DyVmY=Nb|xNQ
zcO2;)dLL3D)dL=bdOwu6)pRfKN2VM)UxU`6zAoHTaNNn_-&OHz0mN0Qu(1X*>d=Gy
zYw{C%S<OCoJ2~di#6xo^`g?M1)807A5BKbjU8$V3&Zpmm&4sx0;v7bQZj#~r!?!kN
zD-FzMTVxx3xKV#SUn$|?A+sNcls^N&NkYPX`lB3;9=;pf&D?_!v!b$vauBp)-l6fm
zeXr0gRq>D^-zp;lZ8n6D%^@q(_+d|YrT)M7d}i3**pV=cTv&`v<`)7?A77>lBiY{@
z{b!5p1LBt&NJd#2LL}c|sC<$=E8!@{K-3AqF;OOUeq|g84i})50wjk7uR~umO4VYT
z#}xH5zFxD=d--<2X^!M07*J6}rTryzEc-#tw3m^^pwMf9zVEW~pph9qXEEYYrH)=r
z;8s&ea`UfJr9wmsEJX>sWCTuu{#jU^YFvuJSTGSSCy<rtY&CW-lgv&0gjjzwVX#C8
ziRw=zLNlk-E5HsfgxPB`PY%Q7QkVhk=4`q}Rr)l}<_@-q@Nkh-PZI)tncm@cb%7Ad
zhY(NUr=Zq@@8s^HQO*~ameU}CZl%#(D#Qk}tx;biSkzjPd6I=^AisPawYr~fa27(I
z&jrSAFRTK3yzLC0-qz`5$I8`s+I#DFaP5_Kp^KRWaj!OH;z!a-*G>`dqGCR%kp;k@
z@BAO9p6H{C$WU}=om%kD`0F5I>PmFj@m^TBDCa*@2uT%*`0_j-^<k2zD#Uy_4Zkku
zmQng~>RW~JW`lH37Os#_Q!i8TFlkt(vmbWk=FgUepQ-`PWUY8&L6;TDhRKF7`8v1X
z47A_hxMczHcCtu!rd-fRJVanq;j?)KZx7Rw2Ef~T3b-$^y~{l-@i=&&X4t6$_9ccn
z-&Fo0SoY}u*}h=GO%?so;ix8(2<3d}#B`6o6MZW#;KXP&Gwx|s5`#{*Eua5J&TekQ
zL(c~vpPBlAxr_Fbo8U)^&qLx2ZkZ)$K+vD>dL!bu^t?+2p=w7KGsg3iYtCkOZto4%
zT`_=u8j-u6nNJdBJ0n!@qR#uZiUN&C)dvq_Zlum<e9TLanM)$i-9F5nUtjXVYxYP9
zCbT=fiuKFd+8Gt$966fn;n#omu`1!>P>y2!R|x@<Uq0zqo4)lDz5NW_uLVkWFTcwa
zKJ?<kj`IQje`fzG1r8J7_u!U)k{se5zio6PuB<T$FDL1)S||^^*&C@-b@eI#_(AMT
z?O986qk;~Ld&6OgYzg+wFPCzE!E@D`*##Q!C#~8D@2NzguBFx{W!uLev74Mhx%c|p
zc0Ef-Gdx>|4u<5ZS&DIq?KO}6&^8;EbY2_G{+f>YwGY1}+IXixpf_(D%L|2k2(!rs
z3({z#4*Efn@~+iOpf$u;YBQQupzIg{E*avbn=GlFqk03erz1rl=z|7b7XCR-xK`Ae
zyWR(Nx7wF0{l}YZQlrei1>up0rs~lb?0!Ac-IU_VaoH+6UqPp`*>%na#Qpnj@k)48
zZrYbh0Dx@jXNtsxkg(a)pI6*;(+Iz7?ctRM7&TP+@MriC;G(7#aa6AobPRxocbky$
ziJmN6xSTN-dPi66T)dmK52-WHv02p_hZP^#0LKwrr*T#x3b<T%yI-9v+dFL!bI2Os
z3OsBN?{neq^9J)F7uF3<f`N}m2KX3TQD6QMoa#Br5}p@>p{xbF2p9kR0_*yhfHA{d
zslj3cfBFv53P^}yr%ajra6BYh8am6HQcy0{CX2N2#R{6?XKfLNz|%h_zdD>Rqn^r5
zh62#yb&Uy-v}JuGEDfOwPS?1M{{AF;$h6{McSV2oa@oYUdi({*qt8YAH7;XYJ?dQe
z<!`0uP<rdCJPT(iaW9)&3t$9~GHtt<04lYFrCIn)rjY+DAWgv>fC=+Ec2*`oC*9-0
zCW&mWV?x#~%ZZbu8k3HiIX*bIzgW)Qw@y5|;l~<XCLjfww_T<$U=^OYq9ahMh>c^G
zVxjQdBWs`zLcp9Yb^|074oyL!0=~;g5@7M_ze0JN8UEHKH#X3(cL>)E@1<PWM^7B1
zPF8?N_-L^TBAq>j+mjlwb(>Yvns`P|O^;*Jxvyi_EB%V-aZom!okIIBzk#o2KsS}%
z*;DGuH7&Dxv+I@f+ZlztZ@gMG2=e31d<iWNoFXbm&yL0{OD}cE`|SF63-x+9ylOls
zK%3-Ih3lgF*`Bcpht`ai#M8rYL>1!OBPK=WpfH%9w_y4=l?xheY|TB(*Ae`gxEmm?
zLGUzOk+0khBYwd*hZ90Uco}X`ZzUvr;2p$W#$;~#eK$QmF2k1QbBKJwKu~F{`0=xv
z8@$Q_7pZe#{3xNoc;N)gQWK6>;8H4QE5%dv8WjT}-7FK|l>hyoL(x+@wv~~Q?ET$;
z4?!x442mR1M&}NP5r(VfjjNiihvzG(>PGN0jyOSZi0FV{FtB*DeMo)qx)cwE4cNY<
z=C?1Cs=W@s<-yU%_qeAF8a1lAqaR&wT*Ua*tOgYc_ldlb88ZIYVVO%wTC?2la7am#
z+C+4HsFk9u2lre6l0B$`6rQ&voF2C^K@?+h^%A&6M<|S96q*NiXt+S^lz}Fle3Ret
zpUtk4kH2P+G>zl?Qm+|UqlaTu<uD=ibD|o327oqk{J{~CRKu<Z47-E!_c{OAb$Abo
zbk9kqy}9+U=V3vb^24i3=aKi`s0uoJ9J6A(7_35o#9TsV>s7W_YWt^!uDd-KP}jEc
zIq)JW2JYSNos^H#U!yA9izyH;9k5q(x{4k*=;pF`J^wuCp1ZucOZEWAwzkw$z4tCO
zQyx=YB}NfM<UifN=A9Eb!KdLlW96BDw0FB`VZ!}-m?i(N*1_-tH=fDkO~7B6ykP#L
zJn_PGglQw^&M4x_W|VU2%r1u~MY4wiKq;};0B1E{jKQK>hjFX8=);wO)SL6m)W02d
zsp5n%@JXd(4p_CqBD(C8kcPlUZX_J=DeTKLQF@XC>&nM&Zipf{akT9l>rN_Na^+uV
ze^nJkK+!LdtL*SlG*^$-%6pWLWn=-auS|9pyL%#fCezXVZTT}Z&HT3R?K$>JFI2eh
zbrf{O!erQ1yUM-Jn^|aQ=xR)a7yB_cCb$yb?WgEKVw%*p2`xlJJWmMcOM2~Twz|sF
zUWIr}Zt<%zFh4ErfB|*kHYZ@pOn!7(Z$)*7Z3D<qekb$r_8o#`9MrElS~+fhplHD}
z_&Xea)dxquC=4OrkpM2W(<GwRjDciAUPYkxBZls8a6LN3VAV!1vf>I(QEj7Vg2VxV
z$Y1ye{u1K^iI`&9U1;bb;xRUy8llHjU%nJF+Kx)#3%Os>qQRRy3L$IA8I2jJ6><5%
z;UL|e#5&Kh^z;;B8Z>qZp%@z;Z9$HZ_Ic{V>WJE=Fqtv`O-yiO72JuPGbUym0Rb5l
zAR!6Wj-CHY<Sa29n9(77C*@RKN9gH_T91}`YL`CU{pt;yHW7(q`kK^^gUhu!pngoH
zxivSv!VG{pBq6EKRdZ2=+^5Ol7n^6k3Ip%HTQjtgTWaG!WlZrIZZTQ8{&Q)Z3-J`5
z$9niG%rH6Bvg(@Xt(yNzp>srBLhYyEu?jN3<%J9m3onO_TjDqjU;2nAkV1@7gZ@(&
zy18KABYs%;tneoR6~i-8u@;UAfjC#{UeQq{ET`E_*9Det=SS(5Jk-y2E;dyST;RR(
zukkWw@Bs`kQhn$D-l#y~AoTH#|K^vKVuRS6NL7_mg|mdZy=n4}5oE~j>|~Y$Kr}>6
zg&26wj1Bo;v5`a;;!&?+&6S-787yDF+TB>55RO^KPRZ=5Dh;a7a?XK$LWB>GC{^tq
zoZh0h9%skmy}nBaY;##b41t)K%@0kPbLe09qu4RpgM(g?Jws_bc;oz<XIf(#G+i3J
zx~t2aF@_JXMUM4Tf)|o+Hs~?8CmX&4l*GI)_BV7rcRG5#8his?wnoy&XX%E(J|S>+
z+#&*|MN+Sh*=qHyvzF$iP-GPmebGf<ANjqpR4oZl+osrwMdSi^!jslOID%R2XB>u;
z!VyvjnKt>BO5@PN=$p>K9)<`KvTpTc{Tw(2Y$aCUmww1E@o(%&NKcU4!Db%WK~WLx
zW1z!HxP`CNB$k@|-EDf|YQY%_rl4~F-?6YtkQXY*UkjIcsyzR{LbgoEIN2qL&Vohd
z^MSredf5Z)e?!Z+kz^RpFi4>DW=psr_znIdBYpLm?Iig7XS;XkEnCm#@)0^k&}Hav
z#!%a}GH8vzu=B4;MN^{z-&DvQ(hq}_VkfoF8__3sEy|h{+<~x&v+}hqEN9cGBPqKQ
zZ2@6mO?=LD2-&WwTMe#9F(0@Nf~3dGjND|OhXwPz^?t;ChoN0eYYW|!gGF^#T@9J+
zeTe8-t|T<gAG6k^j4}~hP<V^n-fLSm_I3pdNqd{p0_Um`;X+R8fSN+q(prxgojuwi
zY<O{&`Vw4S#O-j%lL{p+2ti+}qco3^8|QBOnMOlM0Z6biT0Wy(;OxFHiMRU12Nw^y
zVm24DAA4$ju^%_U+6#zidXY$!Y%ksXqujPr<|fi!^F9q1YtX}6!^q6%Xq2a3g!t&R
zZ#W;>cAbU%fV$qH!q<{xE)zQlsZ|Y8Ots?Tx(h=&NilgA8@T&LEp%sdN4sTWm3SQH
zAF_Q^S1kQIDd&tNImMY3VW_)FPy#&_mASUmJuiS!ojx_-H8tia_vJ-kHuDVCx0rQi
z#Wt}canaqMcOfj?e7$mOPgyz_jEC@APvJ8@p%SOK;&{l*bJ{*^vJ9CWqY<jXeDD<M
zQp~m50?cEx?3>3MDDQB`ihur|IONmNvXpc)(6F0fTh35T`bPf|DTX~`jB}LepM^ke
z0wD=RTgIHMxL{%L7SSkX6#|D;*3WOk?n8L?p^HnJG^w|@^}DGaNSB)m-kU^ukvN}*
ziF{WZy`9TA4~C3ofW&s{tD}7rV4HtE`b(FE3I>h{<Ic?LtPf&<aKX~Rn%`fczav$3
z>iP$_UyHf6w7!=M|Nqx7$`NI1q)kWvmu(Y?zDK8E#9#Bht0fH+SYyQd-zW-XNx`S>
z;Df?mC|P9F6~5sc(YLhE|KrsisC{}LfO+k@*6;nfg@hMM6*!*P#x^vpmqsJ7G__X_
z7JN=0;(?{C@PxtrHcRg_JBRD{HW-#=Ksx==YN?;{w0YsbS#orX`^_s~Bh}hF&Ftp`
zN^<}F<nhvGupn~V=*wuKkj#@PE@ObD{eO0UNia?YHg$4HUzDqUjBZdWq%moFP1bDU
z=G3byoHWMm`UMC<)?i!~t-|q|k0fUS-U0Dobv7)g{@o<IPO0({37A)pJ9Bc1Um_Ra
zKCZVZ{LGH7mg}KW&V&+2%F*=);MfXsl96zsC>%}T5XEF@ZX;-rf-ON8uwla)u*gsd
zy&;J1<WEO1+$?T9Tk5{>j`sCW3)Oi(7j)=#r_)*7YGc4nq9QP3l(>nJvAHV^xU^%S
zE(#)o#b*OgD~lO|x&FyGy$-x*@PplP=%j7JC|6tPAv}Jo_f%=|mvU7)O6Y2aoc!Hc
z#HR-eS$xN0!~aVvU0fF4>o0XRht)mp&9v~0R?$C0J!j>@6VPvh={iJtUIF_ZF}xGP
zV^k9<b7mYfbP{VvEt}s^0Vs=mg$OeyWXl^3c8caUX^deHAjY(1Nne$*#zHIK1JU3i
z%8;m;Zk(y}wL6Ib_}J+v=qzTq7i`(>Pgg1WoU3OT-JNXIz-|0J$vIKVe69JLHAG?#
zy6>U_l6O9w-VFVJYA&4!8*T8mhmRbW#n&Jb^6h#PqM(3vAX!z6f6v|5_29*1KPz;<
zn)UDcY+(LCIuI!jYZ=6h9vpm|&2Tc=AN!NpFT~x3XR|vJ%J;d#^4cg3wpqgBff2^d
zQ0BF3xcq-=;`>SNjX+PUj<v0^G)Fy(1WIkhkaqdf;iV~60S5Y(&9)LTS_SdsDhcsL
zccZwKdS633+t?|jX9``J=LOVlNipxQp(angdl4g@2PN@Tf-g-=eQ+A8X>Xq_(BTQ)
z0su~u<p_1`hr+1Ky{)jHIiJjy!hnk_U|?oKr$a+Yvb=f1nHml*MZSl_J*P9$xaZ)s
zUCN2y;ioKVVy+CSna&$fRHu}2Jgpr7uP9nk?BlwBd|$Ca`<d)i1*@^g|62^A4+^>Q
zxy`Udg#3X_0QJP1chb%lmRpXH*;KD8b=xh^ow8kVazaU9d;`SdD)Almms#Q8;^oUP
zn(eC4J@nX2h0Lp9Fe0Sdu4G>>XoC6@KVoRNN4!{3peT^_FQ0guGIIODTf<hRU%55C
zszBrvyK$@nqkESvMzfRaPw)BBRqlPyL$5NVDTg2LLY~@EmJY^=!ClaH`>fyhRaI!m
zv&CYJU%ME-);#zdSbhGq(*&f3CBNbH&BOJ;#E@t{@-JYs6iDXHcm*<C1Ik7nno!e_
z{rvx&bRm0I5*r?0vt1)rfAN0nFX(kwYYc*A`lAmpB4h#j;AQ+RdvoNhX){{%P5D~9
z{KnTgteL}-`at<4G`zNlw>HQFj}b@!4(NpWKSAIOL-)Dw9-(sUh?C05R%yaROsdZl
z2AyJ>Mfg7S1~pshCf5deJ#K&eI1&%Q<Z!VzgS|;`Ti{3)q5^yTiwy}o>0Tnu+$;tb
z$Oa-WKZO(MD8DDsMfC2;-blbXS;}tisA*N0)q@{E<B>p;`S*K|jPBahc)Y7{%{t{2
zdG%tqBvtk~@j2#WGHz_<)oIpYF4?~lFSI+-EYOEe>02RwHIdEE`4%V8D}QC)R_WfQ
zj56W9x{v{Y5$8)4?@X8}FfuGKGBGpM4v%pG3I2#N?C``5P5pn(!Mq|^kb`zvDv3Sy
zPgc!tj52FWl*1BgH?Z~EQsLfVo0xdjG(8q$I^V^YE_@qEcgJt9{I`v2fP4h~S!3ph
z64F4oVA%8JjrOsKak8Xt{w*FpELzy?>-2mOY(~gvBS)4>6CJwm3Fzn1nTX9~&{-py
zXpjlCi{tbBH1@ZP?pL0I$m$%|d%GJUng`7Gk`obW#UX$(GHLxo^Z$`L8qE&XlPtO_
z#^^p*T*6@CGiIQu36>PXe5~bop6tJX_c85?>w9?~RKC{Oi5@xV2I{%05mBz^jVc?F
zxlepgDZr0cQSgiW$M1(g5B6(;+$a-64eYfY2+%EhrI!yZr}St9&_a4(Yz^!^0KvJF
z+TrXQ#AU1ATl`i`Qp9|n?$8Cj!0#(IJ9vVuCoQ%l5J$cxocq?3a(h^vWfauqDq&aM
zqZ669aMw&%c!zSt+esR?Spk1tL8g;HrT}J%U-#+|$og)edD=@I7&@|<XEU<;l*hy%
z9b6};Bg$~-z_@Tw&rg3b@px#kD-P*@Z`)_Wly;4Q%*lDf?xqNsVpV9c>^G9C6ih&k
zENh)^MUbP3|D1d|%OMkBMkG<gALaiCx+6xnE=!qlN63bOR|3R54D7b|@I_VxJ{HWO
zcNJe~UI>rPBHAIH?dwAU{h075&F~1xgPZ#=&+RhJv~x)q*#<qsXw{on-Z>As0^1L7
zevOxUh%#C+c^TT|I%3S(o1M3^=#LXC;l3a>Wvr3yE2sh3C{u_{2D(Pb%7mrYFmT>y
znNQcn*z5<~gXTGV#%Fv=m=oHheGt_Mj$rLZ={FkR)S-+rhN$Ar9mSP%jw?3sALV%Z
zmeh>~_o&t3N+Tb&zmyDAzPbQ_)6;cmUw2&tri)J)FG50ms+b@Q3YlF4pOd5O3mtM#
ze*|Uc^)CSP$jA_z0l?eU%3yj>#NPSK4zhSH`>@5Giv=-KuS%jJun$)<nrz(~p_)A*
zAIe<sLc$sWHtFOzY-@Qz>w_5YmWuo?4fMBS#x0NXIyhSj2x{p+z1@sYsn@C7JY@h1
zY`RsGq9d>&2zIJ~by!8l<kDr0<=CZKPHk&i%yF?S-a_gV>!xsK-RvZ8JG-mptlgR^
zn;Gygl}fK4P`51wwdJc!lzT7=<kEVy-U7mop@gys3nbnU+JWAGHANKnd|0QLM4*iT
zwPDMsak|bhl(tx<j)+?^XySA*;M?(yS=>)zE%%)p#G`fXGxZruFxH5A=??&D1>#de
z-`Kez1;vu2I?XkB{$;=Qo@kCFreZos{-C;k_VPP<HrLR~Eh&lNN2$X-Sn()Ck&Dlv
zpw#{?SHErg2m2QXH2%?2>103#5R3oK9B`%-{=_Nb>4vtMIaY?c$Q@{V$%Bya!9Y;h
z!ptT+XnzbRn@WV>=i`dnE$ey~&q}_MGrN)Can$@A|F=^Dg03g=mQkx?`&(#YLcc+M
zM`xc!l3hN$Ce>+JyP2?Wi3^As_vkh-O@!%gT+(U^PGD@6i>At1mMA4hAk1=UFFYLj
zCnOz7UF8ny=nZww)9AJX>hYSOt%^_YuJ$kHtT$Mdpwa)VX@oxg>Uo|OR8`Nz^bz0B
zWGi8$WG#Mf;KiFnZI+Dl1nEw@6h!mH4*Rw(&Bc7pi@$Q@3!M9pO-;9GT8oBMiH?W4
zPW0Rbkn2*Ad@5_zZqnx#{Dk^o-`u$l#%#sgpGkhA=s(pfR*uwajkVso^rZVx^1b5+
z&|xsAw#fOaaZ{AIbdBq)={?KM@0O}x4Hz5HP%eB&$-o5d@*p95seYlphsw1V8S*j?
zld6`mhKsQ|!QV&wkx05w^rpNshsB-@1WUcY3+CSVrkhY<=n*%%)Dmt8Z$0}=3IX9v
zU8o$+eRr7W=2j!RzM)WF2kgACQMQR2{7C@9T|L#u^^C0J?6C{awf~^0TSVXQWfzn-
z_Gt2dn@v>JC!_jx1lvmwAi?ZU*M;r%OGE|hn-R*P|MPZqrG8}?qERFU2%3tjIIo|q
zpvK>ZbGt>Wk6aMcy7bn2qL4rB(~SJ0-PQP7Sa?Du?faOInwowm4!hn)D7Qi``Cx=A
zR-o3GWNsi{<_!1Wr_kBRS!?m>c6MYMfEsyG?`mG^U1$3}ued!r?y!&7Zo^;Cu<8T@
zHxi3!VNy@Wz~yqAhtxtmu^Q^yv#tIa1fMC>zBR}hz+GIkk~h3&AZ$CU5{nHD+dHq?
zD!W0o>s)bvm0ePPRzOw2RP42-3GODkmLL-Mg@VYzI{)}q#V+!G=AM84P4BlR%OEZC
zq(ey@5S=l%h~SM<|Lp^z-@6a_FnFy~8I{G(>nY|-^A=*nr*4P1qs-kK<p}iJ^_QY+
zx6f>uZEYgcV@$mNKyRULgP-H*1z>{$BStsLUq`tXBcA`_Pra|aL$;QsZ}!f=@YRYi
z#E-L0WRcRZHOQt0EDn@$P`hD3@6Ep$V=eglabMR|>?J#0?Rs}7Y2l`B*O;hc#cBDn
zHl{W(ZHwAKhZ2G5Rl_Ue(RUP*+<E9$;WgsqbGtERKgI7^L7RQ!o1R$eHteG>*7an4
zXYy5A2E!+|kz)KfV~@!SLX>r@T-dtWTfb~G=@4*ZxO&C*grD2^2td^6OWAehVO4^M
znjy`9`(Deqe#b<jX~gtN)xJ!EalPHq$74;ZFB*nOhTOykBY$x&trZzg5%2V^?gjed
z$1l^X(6~}iGgbVxg9FC$KfqhCbu*Hf4@B3aDpUm7eTp}PDUgEB>MK2}V7Hx;H$I>O
zvB)4Mq+@8(Z@NJWf$S<@(8|<pLcwAu+<5;zrATVl3hWq9)2taiLkWPeeh4SJ?Tvj2
z9VqwyvEX{yEAm0*9SoI&1;T-&U=70cXBM1yEI&~E0K~J(n)Q9}puWh5g4Z68Rchcf
zjRJ(&HW<wmlBN2n9loguD=N&8UC~z$M;hv7lULDyIrAtfvn$7IN}MP0|Jq6?(Z$X=
zDDP|S>uzqFo6l0#4L-l8`M?cMQ3*~oqWB|Fs9D@b3X_C1sd|!K;y#J)K1zxuw4qK>
z>7)UI!NcsLd>h`g!di{N1%cDXH6UU3{u4i`_cXk0^KQT7{Yz1Yww`ER##M}BSdVqT
zz6;q;O+Ay#HV5|639Jn>jNf5pSwloxxcAV;@NxWL)nFp|YwUGr43Uihr~}%9nYsYL
zgI(GaU{KX|BH8k@;re+npmGp6hMJxA_TMh*+mjm+6OMbo^pbxr8oC*O><3alP%S`S
zg3Je@W6lU`7kWdrI7=eBXXObMqN9+Zigt5SgYe2#%w&HC(ukDermOCrxAOP<DEk`c
zw(AtXDA?Zt7l8fr+Z>1!&rhk5w+<<lFdUKa>p#tfg}d@24MPU26+*J14nQi0$_Ya%
ztFSps)rOEErfO7R1*xRB1f2*(DX1cs5T9BS&<P^?6ye}gDzs~j1L2?(nMX0Z2#W-q
zmPxmoS5HF?5(3mFipjAes5&jmiY#v7Hg111qD`*bV!W?E06|#!{$2ghls%NwL007F
zdGzvg@-PftK{AYH@zEj`_g~q+o76boHlo#xwG6uw<5r**^0~(=e5I^2nYjX*Zw1{j
z39h^2@8y}AfiRpjG$DjBcjF%brILfQo{r<u-16C>-nBn{I+yJ7;uti8xH-1VB&z8&
zT9Dqk3k%ciz5T3sa9xTmwE9QC@>&1wAZo(+?(JX@odYv~zFh=NP*UTCG`ENE)W7|~
zPKkCJc7%%W^kM5q2c|<&uexsPH3Hoeuy>QW5b7UP3(uosU@YAn%*7aqMvJNjT>2EE
zd!f+{{x`wKgUSCrv`eFGXzY{(@=Aaln2>C4^@@!#Hf`|#A5q-RbH!);JF<$6aw>lk
z|9FRureijs#BMzN(4J`Xv|Aa)GX%QzY4!pun?sn_{H<O8$1mH&88`aB!|}XVo1;${
z(&pr291>KVX;hes0<Q2R|Ax-}HKqW8Y;A}`k8!#&0GqgKvifm+QxYgvB2lvv-W<ar
zEDIqwR>&Cc@N@ebf<;$v3PYm~IIePlP@9P)f=Kg0dUn+T_grrv_cAo(yt~hc;0z*1
zjX)bjeRdeR?$@+G;h0R#g-t-a0Pu(jiSp_qsF+h3;$>x=i%ATb<S>joQH)6*gTN%S
zi-n4BGx+08mvUhvwmaAgsitG3n(1yQhbu*F(W0+Xam-@r0%{vz8sE2C5Pm_+#2*{J
zANHwxJZh8=f|bLQzN|-MTx(sJXv!}f?5Q5ae59=bffdvBhII+!%((<97`st)5x(ox
zieZRFwA$owH<rX1Bvs7&$o&ak$$#0BHHSOA5M!4Q2R#^GtrnNkB;4if!i1CE9h>Ps
zU;2!(AdlV{N|{I6wub)(CGp*DFh6|Je?d7}7h2FB2s)30p9F&^9Y~F(ToIgH-1b?>
zLQjkog(pP}_Q8ZF8JYp54lPRasQ>m%=eFEv5fntb7wBSw9gz*K75JxnOlHlnXunM5
zN~>qW^Fa1McSN0bF6wtqNbHs#Q9dwRaz)`grNb4(s!Li6S>MqH_P*xf$p(!xoNr#7
zgyayp1+{TUQ%N93RRlfk9OAbW@E1A)9ad3WM>~^-xX}H5;qxMi{ndh0&=Pd)UX#`h
zB=_6aGc#7E=HTK;DlZ9A3U&uJR9aCKWk%$A>OHiANHov9svtHU=&btd{W*`@eUb;_
z$6!Iy{?*r`)kcjl1L_`LWdgK>CtCKGn@H>4Q?RoIZhbs6$1rUa-OS|3sT432vMaz0
z&4oG;yiMIv_*3RMJ8hwJm9M`#!U2nG7C34G6U9cjZsH0lT@rc|&iM)A^Lfi<67@AX
zx6-SXMjAd^Do>^j-n}z(yH&dq4`=S?R3KypRiV3ZPXy$wRprA-u_LUkqquKIRkWS(
z)xtDb)NeV+OcqjHy<H*FpBkGsj5+_Uk+I(dYN<ak_&WDnQ!heK;=If=p1NqDKslnS
z=7;d$Ww9Z#5?fHm>te6Yjd|GzYre_9Rl$#{c^Vqc($eqRF*tnBi3XueS+}7Rxt<3)
zrQufInR^r!8uga|ZSFe*wwKzFMkJ#RlcEbsb>;1%_PO0Cxy6>W&Xt*c7yFXSCm4s?
z5gKFF`i60Ti()vWRR3*dPOqMoC2uLBin!oG=$~06FmAoT4Yox=kR##So7suV#8IS#
z{^1U9>+m^zT2JvgPLk0#ZnW{eJjrKT0d8$g8<5Of5X=cqmm_kFEQR!8N}r7;hSxkK
zWIub8Ki;nZF9<|BlD#=YUoe~^y{Ub8P5zL}Z2v!xf%nx|{xVCUi-1{a!4NZ?2qmXj
zpzs^Wv-V+kol&o8);=NZCQ?LaI*m$AWNm#qLT!Xs(qc0zBd6U#`W@BD@7n()U3>#g
za4#)Z6*uWv(8IL%eQN10xG$`*@1EV>!2}j6kutkZ?#$oU|9!45PxAo?DJ6T5Pt~9}
zVqTh8Ld@*gfvhv_qxU2dOGOpETKNOhJ<gtqpxG5^q*ObDK7y&Rp3|%r7VAftq&_j{
z{CL=!D($`8n}gJ)`}<8K<+zV4=_Rz%rFikDhkHWQ`pcQ2YUs@lZCfo`1mK%5a!*Zi
zCR@@a)*MKVpXX@Gd-)cdo?k}+fbTNNwz25g5MQwkqnnIFuq^T!WbVad#|VQt=<0)+
zqNt)y*k-kq5O<VthxJV)BOs*OS@QB`5xPC<iwA$^UV*SHpG6T11wl&GiUW)%dJX)h
zM_Dningo#$TdV!h3k;WkG47CtZwOdaxGa|9^ER|7&?bJgB!hBD8k!9CvKFWZDUCnm
zfYb$K45%$;<HQadG~igF6v71uDZhK{N=$HLxA9-u*yn|ViWaDR2n{IE2<2MH7`saU
z;l(XIRwODr`k~Q_E8@7UPutaQ9<ib9md7lqAxavCbjW`u&tzjj)2*t*Ie(~aQ*L^Z
zOJJ&zb=#HW5cB7v-vn?ahTEuT4M<Bz@6kD|oIGk8^*xrT?oPbMQg3`20c5N^lk=I;
zTATlRW)oyFkg}-ju~vt=&U#EW=>M{KGN5G`5mJJ9T}Unt#JyJ1(BhWQc_{B-TFuMU
zzRJ<@?eaVZtiY%mhv$&mGybgo5}`w9u_T;tBAjE-E9hS%Yr_;1s6mIp-(XDl#%c3u
zr)JYOcw0@|$h_$*eAb=Oes1t->3fdKs1Q=c9Y|wsxExHXZKaRmBBO(4JvaW(&lUJT
zeXKD?oFrSZ#h6^ABNy=v4F*o&?^UDiQaZBkZpc`ri(S&^s^@sM2;Y$G$8zza@Tbe7
zS13fVG0q|eMQz)wiBPw4aVYyrQOJ$DUo<0qfpgnH0;4(8kmS_<z>Wrci->i!2N4)_
zXlS-F@9DG4mtxm5E07-g*K<mYkQ?cYhGE20w1e}>rhP}gXrxv&U2OH}L9w4Au>T}U
zSpzoy2W}1B^}_)aXaFM)8l_G*Y%wC{K=P3b^+3<Ym{>C80y2jt_b*>_>zvmIsSFCs
zk9@y1i7M`&U_Htw0Xnel+K&KV##RyMeBIwS5LTq1c&K3g5pnn6*dX$K(ZtjUh+JVr
zVR$mPISq5`e>i;wy5czwZWV&8=9hQq%GyN!A);4%(Q^m=)&V|w)*`J=b3H)k2t&YV
zi9@)@=NhSpvralQDgsB?U*Kcmbn0SS3|5Sy%U_Jqw{8F|xw4mP(}vTp+c*KI5&%jy
zYY50)z}e#0$c`FMPf&I!THWb2&2!w&G@!(E+Pd!wn7@mR?Qz>Pwx))R#N|<*TY3@Y
zkn0}q!{SA+A(krv?0|Ti9k0l|As5kf)Uh8-$<2P)bw2yF$DLJZ<~Pdez^k<_>pZ!r
ze29p{yyH@eB^q(~Qsjq7Zr{|*uU2_uFU+Y43tbrQYTG<DwoJNI)s8*{yWFg%Q-jOt
zy)B;TXCU5l3czERoLZZa`|?SirtwoI&O_h0#ReP)X?@ux48bGlY|!`v{tp$Sd|}}X
zUS;pdF%m!W#$0=ctTEETrUE^1Gj^V(5{u+LE0SEtG#9rVCK<_j5o~YsWvJT}{5|;+
zYXz+e<ACuih;R(Q0X94751qySQ35`u6Wlkya27B0+r+-E_mFXKA$xSxBsQTW=#$YB
zXQCYC-REi3-EF1f;i0MLV{`)buNEV+bk<p+__ZD~2+yiymJp>;GobAy?M^AxWVa#6
z=%;Xl$-1qovm1V4pKOai?p(>uRI;)WMZd84Aa*Y@Y%F(D`ax{Ep4ZvA1Qxm%nNiyX
z2y3ckXc|-p1{%_zLej`kmRytkreOA5I_$}v7j+RMGl}7|&?fLIjXAj6Wu~Om(Zxuy
zYp!fx{f7LXS)Np~jZo?XBN_B64O1HyQl%ZLxjGI%t1LTBz~nOEhauoo7fqM2Sb=5B
zr)^+9LkiwIK<`xurJ%jY2S|!+WI{Gs<$!LGw$zj=!u?mu6m(wkt!a-u6*<=q2x%Dg
zC!kCf>Qp6`iO)jsfW&7QkT4eFQO`45xI*GbuhXp&uH5IHb?6-mm*-lXgZ9^^O&dvY
zk|>ShhA#;lAkszVn{YOxlv?f;jy=E#09CQx;N+t<EN3scvO4l+He(SE_c=VPAcQuT
zX>l`A$w~Eik+BkF7svMUX;y(}{jtTh4Tat$vVB0GvDqd*4#pPtlpzaG2)s`q4|;9^
z3l6#IBjY}1^38BSESdpdD&}3<&_3{XeO4FaO4X%AFQ5%-774gD5o_s3nNf|9gh8?e
zyj2ZEvjw;J4f#y@O7S$fe^c+1=_O6yRu->KXZUDbvO*gb8;kq}HTT=Akd6N?o6n7L
zmj4U?#=yt5-%9FzMk=7nieMVO#NcGCkA_YkaG63d1RC~Oi%hfy$sjZ>2Z@Zk8oWO)
zL0rD>P2HdM6#FdiPsXmp64$N0z+LiKnVSs~+wbYei1%#vxTL7+_r8l^^Z<=J&HT8*
zE51(xMv?f=cpl6@1zwO)RL=?e1E<=0ahUV0gaj}D|IAY5PAqRe<?`qUxOmU~52d<?
z=gl_K*|uDV4t{&GB41ZXKp{BZ;_bbF+hzYLli}Exlaq^q7&arvsT^%4Qpc3!vRXO3
z4lqLDP?$j~Ky|DbEJ=k=-q*$&B=;%Pk~TKTBu_}P;|$c!EWRknOwDS%z6m;X=M4E3
zWy4SDoY$H_;F4;!y1I{^n0y%82B+;PMu9VEN&qVX2~Nx`!jSyVhGm3nfbP{BFniJ;
z#F*{ATy8p$yq!Q}smgWz1_3e7-R5DqHvmCEzQ6Hj2^oz&IOpWZ11pqTX4E^^ihQ|3
z_wgf6+=em;#}vG@U*r-^y3w=>;SN@16Jypx9FbQM1M5#bCdkgD|2X4soy(=mA=MWC
zU2NtOy3SH<u@Znv8mpM%_TvUvJhZsQ<!Ky=DcNXb46y@1QD&P#&6{OYxC+P`3{7R3
zHrt4JJ(MP81XQ?e<NZj+@u<4xYZ;8Bh<^-&i*qa$eblpew-Hd;s#!+iPDS*hcsz~t
zc=5!p#VF2h(F~diyJ`!l0}NX{Z2sR8zR88?&I`xeAkrTFnnD{fS6>=Fb(zJ6Hs1DV
z8POLG(1!E9D(iTJB;{22tKu@j^ExG??6Ga0!{j}4_4ow$Y$Pg}NJN7WEu~+xD2fjt
z;-*lPWsY~)WN2#|$}8)go4KRbb;d~AWtGV|4I|~nD#sFN>>l8Kp;6dDOGH>>N=75s
zS;9`j-v)Cx?{V&rP>odqfkXDjE0WlfroFB;p(!{wi^Wlemus=L&Ot1LN|aNF8(p03
zAc~4}PgZ09yI4eTJ%6AlGLAXzTC9dzN1QLh@HM8Z-uxCI>!$q&ZQG}R;vu@@OIho5
zu$EKjHX%`LCN`v2Jj?)sW%w%Qp{j42-W_NU`VXlmx=Z?brx659y`6-S4hKd$ODR+Q
zP))#UV77~$DPAjKHk5yGQh@6ji?_HPAk17I?$(>OqmD#SS)JErLN{DPGsJk;DQXKK
zeD3y4tW7;eW;I&U97LU<0sIPb-U?HwRv$nuUFw32<S3;N+PDx({a#C-C;fiJ6E=YR
zVgqI_DTRwaSRwd&R#`|(HB65Qf3-%x!fgL-64Cu^I_dlE(q$Y>yRyP@k?3V1E7zcv
z$0)BrG$#Ur5xqp-Wpsn)@aH3rDle12(>qoV9ZjTElQ|~iPEy!VvCqjN-q?P44b!nA
z%;Kgg@8Us>%FG!(^gc71mAT6U87F%02*JkR*m(P3*v|1QyD##=Zi2%wNRAcouqOq9
zYk*c2(vIM(v(6_zUxB<S&As%@r88W$z_04Od+rpgxaT4<_ZKVfc92$rqc`x0B>)Ou
zez;RDF>wloMdLc5`J(Ji3nP-{z2IZCrQ<S;>xFqw3xdykE~H3}N}kPy-_Qm~xT)M3
z>L<NwpNl4c^&uzT<v0F8bU^7l6KSQgQ5$lEN}rWM6qPGsYS{jA3=hcAcNkL5>=?DX
zniQP)MJpY)eVU3)l_i2>DgUp?VYLLVC4}~K;a@NMcIaIJTM0ZM4_#o8J0jD__XB>Y
zYfGRwqDaxsB~baxyMP9ws;a-ZafrRMphE{`HoV#Xknr~+dBkE`3*UspO>7~q_Pt{O
zKp7#tvRMYv0vDgCzF9Pz?r0n0sq&T|unxvc6|E5PMeq*>TR7NxRmt^$(mYqPqwcz~
zQT({<bf#o_%j**AI;N$FWl*Qq+f~hW2j7AlBMCy#FowxF#d8{Bx^yaMjjK5P@RrEY
z&mku>W(h5z8_m-fj<OQtfD_w?Uc)<M-~$RSwd&H~HS4v?T092pg6xnT;iX?i6Nm;D
zl}7$wyGA9{bf$kYJ-)o&e7I1E^1vFt!3js_DmfMg?g0nV@Y#%zi=CrpEfg%;>95sb
z8QkiTMK7z}@xzG(Ya@h!vRaziGIf%h&Y<NR%wO05S{l82v(q~GNib9xP>qq8U~5H*
zMQi<0s3-iQRSa*?>NBc7w%XcmqbMhkFR^CGtp^&?_zhdut(>%vQuVE6@VN$h4{X4~
zV<7=d(68N`j44s+><?Z3jhVf5N$3$$J%UV(O*P3?P|k_kBAszCBzUex{H=@q1DGHC
zlnoFdva~|oK^;qpG%;1+rTgT9%PPBBO4UA{!|5wUR>gbb5xCV;ZIgU)dai1Ef4v@@
zLc~}djcK`K`1k3JHa0G$V%2{jaZ<^X!7Tqo5`LZo!EWK>jpF>XvW?~N!C|h&U`8od
z-t#OwJsw^0rSpA8!8AOiXcc@kv<h%YiBn};a1M6a!qy~sq3_2pLI4Q!*^YJ~YJZI=
z3i=X`{5}d92z2pkm6pwAZB|y6tUaTx<-o2W{6^$L65+YF^ke7yxx4%ZVMns)vh4#B
zVoLUQ>~N5hPb|?1O0*$kbUbNWD4R2qed1%=sI4UycD1sU8E6GQa)msIMOu2CMxU-H
zHT0uokLDgwRmbhf^~L~sq9(IXLeGVBhNfX*(aj9h*t+Q&yF?>#*2J_suGnqY+9j7r
zoqf)_jUgx-bf~NnDj$u|kJ=szQ&FxFyvZopyvDsB9(uOp$)}djy=Rj>P}AUHe-u(7
z51mvE#WmhoBZm6j$RC%at%Fg=kyb^=tlFBsN~)#V>22z9`2=57JX`Fr%WyTvMYf+d
zPXpOoyW5V(6}*sBH1RH0{pc94((-~N>HvMMEfUEwkXIEFB9>KWzsH->lje;s!|V)B
zIa`NO=dZsR0(5G%$GnTCckz;bgtC^Ajb20ghz{whV9Ssyw289lF^I8}=2zG`140lI
zG1=%JF3^c;Z_8GxZ#U&`;4$q!s?`-J-<R1MSmY1UTbR)ws8#BYYW+NAl}6$?QhJ~;
zx7+uMYx0&Y%d3e~;F_3l>cl>A^hNSpvN;&Be?woy+`faSifSv?QhX#Ej;tJxE+<13
z)~7tS+ACLfT$HuNxl4(n+tzKpErhD0jRT#3pUru3jTohSlG$+9kh=zw5tfn40;i{o
zW(1X8Tt(~u4VPC;ew(d$g>Pa{3^(~Pea-6PaO9uv>aBUmDW(|)`Sk*R)~Yb!$l48g
z!-17C)vLLO3acX%7A5H>P0QT>MD`G;qa|FLpvAEDZ_mIMVx$+m(Y>QjoZhqtQ41$B
z5NW72>YBj9!WF#paxme))vow`wCSxfk>@H=jTU*hGR2yU!cGjc2wB_&ya$d`^usYH
zs-tL7_6tI4wWg$g>9n82+ne^g9YK>;w3q;@GCCoqlKfdNC6Zrb$M2f$OkI)Aq0)zU
zKn=AWK!O0ht0RGUc_js#dr6GCXSz2~Rc_E6HzFW@n`$-fGC4lNjj(nqABcn_vemI7
z!^^jL(w)}~iu5vHV;a3xP8GNcytfuO>b)IJQq;6%o?Y??R4S2bw<*5u&j24qydCpU
z993e^;Sq7c3lFToHn${~PkcdxC!`QDn608!V(2sR+rC2dY`Tc>dg;fZ|J<|;?@Wf<
zQ)P~iqSTN3f3RKcggH`Q-DMKrXdC{|U1qa0)3(P5ZJ=tuy=;3b_EAI}BI-uRJrsJ?
z_sjyp74==sf6qGEIAQ(K+u(KDIn;5pf*_7;u1|>uPP+1I4}&rX?xRb@xv?`JU)|cB
z1aSq#{@dG@%Iv~Wrwp<Jl3aQ;zV0OQRr&erbN>zm(YUQHj<?yx^`PVybUI&14RC(j
ze_~6Ie3No*Z-ju(BO<Z37n;=`=bNN1m+r%ecd~&1cv!$L-yAs-;ACtI4l;i6O!(r@
z5jP{_@Fw<@d9$rGMZ^E>4I(ortjd-+^p3G8zQH^p_34sR`0K^EcFcdjU9z~Q$&4<@
zU%kEJASiGF)I2Dp8x1CtM}p7yP_?Jbg57vrInw|cg?x*OC%4-v^4p?I1_9-}1gAkK
z=ybg6IIw8_NgO)YE}K+Up@*9gubGVI4EZ)t&otlB3&OgM(&eGq5}dJK(VV#YWRe}u
z^}x|EAQ_m2WNtPd70_hEF<mhe$TipPIEfLFXjJ#E&88)MzSz_*VYjNc<O}ZCTno$(
z)|HaHsaRD^L(pAKc$yk0u!7+_QM8wmY7qpSIz?`mr^7}BPn$&&+mRky8DgbpHYWOo
z(5mVOkFncL&Sa^3$6I>FLMZ!uHt?lYO>81g+rb^N^Hlz<c>NyhklNlRr8v|QPWFvG
zq7hum4&&mp>l4nopc+86x8_x0Srd^$U;@^EbvvhF;k`-UWKyg*LVSK)G<f<yJxOvN
ztaEbeFh2$8aclA-bNhA?(!}SjAfXdxxOtz0%{cfl$eC;^M^>@a(V+#=XNDdt50G!O
znHLu1O>`+~A+V@w4jM`DIeTd<B`(t3b`@;g`G)0}C;)|7)I%Ufd`$^7RYf#zZM1&o
zp>of*suX5+P0mYwSg%@aJKI+?B3B)5zj|_fY_`!ui^9EG&f)^GTjVV?@tgWvgEO|X
ziEt+>yZ?$Qo#WQsz)JrB;y+v8YnzLFBwbA0y5^)I!4H<ytOb#r2fJC5hm}%$k9|+r
znNQG=AEaJ;QCczs9&oW5Re*kM+J`?rnPB{TB8yUC6tA&;tKV^Y=24`3wfZGkRxVsA
z5#w_qk%N;hXc!J`e9d|rGp$^0vG^qR{`Af_>gb#DY{L2({}J^i(qGYKp>spPvDRIg
zp&3_Z7L||Rnb)U&X+F5te?ZyZpD6>0UyG@?7fd2$#|HAY+^BEGqR1J4!iQ}Vx+OyQ
z)Squ%*azu^Va+}aXa`nt@+FIHqWwyfY$2-v9uoArgUlQm+l~Cop9mLXV3+7PF7m}_
z=BSFG^G8Y8FX*?ewUFtfrF1=_3Hmd7Yf!xsX&y0660xx^NcC!t6Trfg3O4tCXpWD{
z=>q^;Wu_@e5h7)<wExu9Ua4<A{U_m5!4BI=Dn%qEd>EKDN)e)8>*F=#`NchEm@8Jm
zfBxQgK)ps^8Rjr(Y4m<O-)ohV{-#I5o-KHTDEy&YImHGOv)!v5<ag7wqhH{f5)<Qt
zHLInsy<gzQeT9|1(_l%-#@BpyK_YPcev+P0CJQ>)2-+h-^4T*&D+J$AFFAK8x|R)d
zE0|A@MRh_@E;{r~lG<1i%t}?$pD~nlA^dUM55w%lE)l8n6JBnhBVAK9$-3^C5uVme
z=0UD3lyW%b%%0k)C}}>NF=^$LATJ>^H&}~Ue#Mk{toFG!K_*_ivb+aVaG7bn?8yVT
zBGZlpd^`G7mwuVg_hZR=VA_@6jb@}u^%8EFh=aSDbMQ!5D*JZ1YdY|>BeF$GfkK0~
z$YEvR_p82O%^#_=O3E%}0ONK;yr5VuYz^*X-EE<~-<93O&_sSXgah9>nVp3i6F2Y-
zkw5X^L^ZLtr5;pB{HQruz1-P-DpRXvAiYl?4P#)4!7%d@PcLye1=dmKo5>8qFBCoY
z)a>N=@4Iwut)+w=<0UfW@*4<Sndij4n;aL8M851gxbL#(0KBm1k<e--64|9Gop-sM
z#GfB}@rwWIL&gDJ?mU$tsKa84kEq0TFhE&T>Gd%p88M>&JD1x`N7F|lW1%)tww*%-
zZ66?Uz_?^ww&oVilpJbr<CqA2%Uc2EuiEFQewZ~^obDqfPFzeZ>S=nz+VhyMAEz`}
z=$deddJWJjP71R1%Un80W=<X17C#KFxnr`cD<;CN9u_8w9XJh8tsqt&f>Nt{Z-olc
z)9lWQp#Bl%%A9Mt?Zm85CmaULCg*JQjr6lx!P#6*A>%+1_JI~a*9IJbJ^*{@Bh^2<
zoj?6;m|y%O0H;uYUHErgmw@|JGcQXI|BlN!n2|jAgw~!F^{J~T#(7#<IdWiyAB3?d
zBp;7aPw@haz<L5X@W|9$|5L*gPVAWYvwqB&@&(QoILR8M{k;}~eyt|ER}+$s)?C-@
zuFJPnUQKx~d&Q<RA}X>4hf2Z*BGS2ymgR{<A}z>75f~V$Q7?$8U65Mo@Hntl(y?!9
z^#}urV$|%n2l*Oe?dWggIK*Kol{5o|N1}mhFYne~?NR8dKbX(O8b7GgpfMO8(9eI^
z4+_aQPeiiD>lTAq3os4B2+)dXG>IzH2^cJvdZf%`A-h0#XGf>f`%?S*Zl}Jag1dt5
znCDxyiD@+-gZk=J!fK6Kww#HS1#?d;2nDc)jY|C4kbPJnI)^kVRxYhsn)0k!b}?u}
zL*56;8AOp~jy@d{P8VJ&mw5mA0+Q035s_NvXHhPL0Q%2}g?Sm>cWLV7zQghwSdYkf
z`kc+$3L&+-IdAEfD)j^j`bat?zSg!|VWgf`x|75q!c|L|^;=%4HYpsEw>5sgro<dU
zR&N5jdt7<d;~{*z!zI%nvY9zYhG-zh;C%uo`xFCWKkX$)CaF?esJ@11iDqb?#%P_x
zz<8~+j5$RF$>W#$<z(H<{fG2*DfYNIk6dWf-Xl@Sk87l_G2l5%JtnDD`EOna%0_j8
zmmqw4I+};r+jJ9-KNhwS^u_env3qZH%=f<_xRBQ}v+6uVQOc>R8~vi<6V#nQDY~*m
z+4ZZiKpj-}eVd2Wrw~E{ZdXR|QVPVM6^tJ47Y@)`6mHhn=!QpcKEXJVP&~%(EDpYu
ze%yob^lm?2azCIUJoBCMC?rFZ0{w?TR?DSh>Fs7*y8EL`d}~u1-~*KedV=5vK4*hx
zAMFNIB)H*lmwo5n()VOTUI=ESXV;<8UcurNvnHF$)42xl`T6(L$a}AukrO;n?IC1l
zSaudF3?u5V>PvnUA09Y1^CFePO=Aa>h%QsLJ#^_bk4bu^F#=AOqPB*d?Qqz{5?(g>
z<;y<Fh7wpePvz;L#QVqGDYqR9m%9n{(3#MfqiQ<Af0}DXl$ofS>rWW}B7cX^3Ir$P
zY&Im&sr>&3{1Uf5)%|{n=fqolLK{q%1Y>`{YO;pvTZ&|zhCGWgFL%r>x*|aRG|`?v
z;pSelT6Kb$p)bS%mzJ_gn@{|`5+~o%5P?-WueS^KRkrQ0*OXxXWDzY@;L34_@DrE%
zceJ)iCV+mSECcb;)I?@<8FqGfE!3l-!dGR-xeS<7tjMdWaPo+RG^s43B14eo=tS|R
zUH^h!8)22+an4yS<~mK#ua~@QTR+kZiwJhXl#RM1B8XNv{DTnVWy358;yv`3shEV%
zA@00vYx8|=e^;<)JsBQqnJo$*J@14WzrEEw*kQ=KIn?H2oudCqK4N2VY|*f4W?InY
zQOjei<ZJ@{N@)lIkpOn)wa44YmLhIC|IyT_0>`f(&>--HqxZlt_0%_4+Tr!AgjnZv
zd`i@RZ0Xd_{9N^NUu=4aA^+*g(=`JkzANn@(;U6pvm50jR49kS!DC%p?FS0_<L_;k
z5q?HISg3>RA`@+Y*0AKl@b1E7q@V$j6UzCLO=)OBKS%VnE^69KkC>l1-tA0H%2HgV
zl=l@X_78}{A%H|CxavF<O7|d<VGmkBHlRhk1JwAqY|z%ETE-(?st(naC|Vg=*JY?4
z?5`_5`GLU6&RC=}TlCoQ!bP3%UdiL%<$eUmA-(ErEZQa@@(va;l(uv6$95BhGE52$
z-up&K><;#*xU15*lqFw?6xl2&pgO%tU+P_N%(V-5kRD6ZTt48UJs$5$_0UF3rs&QR
z+$Rj|q4%YwN1VHs+~BPU8xZJ_r7SaG-M;nP@9CRiTJuVO?eeCREsi`46RI5zKhda@
z$Rw@5PCA(Izy1A%um~zPRi*zq_iCQU06}>Q0G7HA*c#;+h`rm73^KpxlRYRoS#JFE
zI&T>3thyr=EO~7GywSfOvk+d3Pw5U@okxp)R+n{gS<OEnq*uJO0$wr|$5mg%Eu=X%
z6og$xnlmYy9IM+0nPkCyL$&4SnbS8T>HSPajEt|r@__q}VJQbT*df?btb#LaH<c|Z
zLW-*=Bc`Ma2EUdyPl46x@u-{+@)$C^!ZJ-A^_htqnT4JNi+g7=H{V0pM;?Wgd;iO6
zXw|b@kFmLS!a(vUCrucQD2FHwXcqiGLOoatyA~t1Z8HRTyg3d!$VJ2ip6+ATB{3MU
z#!!02@@b+v%e$yTVE8OEeMc|<l!YU4nht^bQD09VAq==etRi9lPVuP1zx`X63trt|
z*>Rpu2wt;Z9S{ZvW%4ShFb^DdeVXqCm;pQW=X#+_DpJ$NKvdN|en0)Q6FxeS-k4}{
zv%6=uMtR?^(GpALSdb`N>`=vO&%5{~`sO7m69_VZ3tqwjCA+G6T65Qv*;CGPZSGVt
z21g&fb73?Xg88V_lCwIYaDQAR6CW%G%tU++n@R8Aoee2~<XpwBCLa@NGc^yoch+Cn
zW{y!5ZO&(vkmSXDNuAb-?$8qPQgp^Jp)<&ge&F&t!)~(LJep!D#7wP1N)s&jMbxLn
z1j<qch`h(Raj-PihRokyRF6}42K|0$kzncSPsOupKB_0fGTQpubn$Z!QxDPnp_hSn
z#}ZpdZP|%^wYB!~NW?^w6mkb+m&scNkV!{CQ!38egRDJAzUzNRIWe^X@}EW=%-;@z
z(nA`&aU{Dtk*IUx6FnaS+PFlPW}XVVQ{5VX?BgUn!E`_l8ovp`pRKv%5lq~Nr^|98
zdrS_SD9uG?3Na^5Z66uBecExF{`0BAC;$a{W(hm$o78i7788Z*0@DfQjYTP&dU`Yy
z8+%A^Q<Cd=u9K~1BSGQ~6b1ydRcM>FB$O+|BP{wT`Zd)@y+i^fIv*S$L#MdV(*oRc
zBXw2Lqysp&9tZ8LP!7#LO`kY72!AE3cJrf72ogki3CJ1k)ag9fRym<3V08U(w|^>M
ztjcfGsJw9Pig1x6lsWJIjA?AKtAa1>!|?)SZ}vq)+Wo{n#2Dc@)B*q9EQ+lCVK-(f
zqKY;68Zg%rJ^Y<xZ%#Y6IskTE>b?&s-7q{2n4pl%wa<Yge!4v>&Pf+S_i4(?U(&D~
z3+ohdY@aNCuJ~%j&729l4pVu9Cs%D=R4ddI$R=|~U1L&9D7IU+I9)cF8hkmY{1sxR
zBCu(d?HZ@x=R*yqs{7LC2S}lAiR8EKVgikn%J~9<xY&h<abm-aYiYgn=nEMmNGlzA
zYdxAV!(=B;6PVOL_uyT!)00~PDZ7MH4o|%+!zg8R5_i1PdCsG8^)n}{NyDbmKX~Od
zj$KVvBzF%!19UST<pk8_PTdv}_*mHa(wb=iMdyh0jJR?o$*o{iaZ}VTE=kaM1|``1
zE9i6JX*>Vm1<fIvaK;Q5>I0`Ytpls0IVs1T!Bqa0^t*{CWW@68$G2gWLO(G(fqPzF
zcvIb$+@{s`CzIqq$NB{_Zxnz4d(;81m0M@#ob2-yaldTr?5w-?erdbcXLC4K2fY}w
zvBC&%OsjoQk~u-#AAnD`{v^4-OErTGE!Oz;R#v7-P+ol$zeA9NAxPu0KUre(h~D|@
zJvJL#ey_#w@pAcyJ%j#$MSo{q7&anlK7*!8aR6^+N0p9g*rGZr5i4>G?Q0kjYJrL4
zTMq`}5dmv7ipLlMs(pUwusLUYJDDN@Fy`tb`+ThMbAMV=S(+ZI7=FUo#w*aHtm0pG
z%})3p`?-$9vAkp7xmPMB?3W9B8>UFQ@lAwrrZXH}!ao1u(ca9qErw5xU;p`@S!8E_
zV0HAWc~&e&0P;RH?6~s){Qo5D+00)A1n9jnx-qWv59cwEBD5`}?*>=BA%0`2(@t2R
z$R5dhDmFTZ$Pv2;WB7+u?uj{rNKnln&69i1s8=n*ciBQ~7Euk;n$&Fj`9kL<ASfiw
zoORWc>m<>Y;4)qQPO0Xt_3z#_=Bm6=(iDj<Gu2Bn8oLgI&=0!WHw_^btr^848q)HJ
z2$WK&y`_K?B}qISZalI$BqjQ1MN;n-afUuqTUBGmcJZ5H`YNpD*CQis^^_2x(E8{v
zwTrUpY*P%)5KHO;xKF<gi*(D@{}T*rrAT34!2Ev|OsjB6XqjyDg7vnu7{3tU*tpQ(
zYgGo1GokRXKwd}f?Yk8pr4v#ndJVNh+UK`#3KB4xE~Uyu^&0&WIM#Vi-!AL%jqh~S
zb6BcmxY$Atu%$`y_tkHw_(rMFhhkY2vZT!z7XWOIwsJ>NEpzmBH)ZFT3o!?ZTx|}u
zQ&7DekR8{0IrQMy7%H|bTpd_^?9kg?Q><L3vq<JV?5j`X1}h@Gfd_#+$k1!>55mp#
zZt_%t>8*-v4JlF^&Y7d5K_bG{Npq_=amh61fAmd_D`9^fA@{w=5$PYcRC`&e@jUbD
zpfbi2)QMibrt2^)ahTjV-0<u*`X~%*WVTUCxdo%udn)im2L%AQUyZT~Py^JhMEWy*
zcl*JibmPBXX0mwUWOD1BA}|Ai!id!CjgmqVUX%j*7EVDHSWJSF+rYEStCcGZ?}UJY
zUuz%@iZDW|UcD|2aaIj#IOb@xveBz81~1+>?;D`Ix6K6+O{dy%(&%Zsg*bVeD_}4A
zlONAlku`FhjTp-{T(Z<+`&^bK)7PLW9RMQ4Vx<$RpuNUs5aWZu=5<+6f)?#e-T%h=
zo|I10O`j!;zm4_I#at|_jt&#G%2Q%$$B6)DL$J|bB{Ke+Tzm*@r`0c~5}pI-dNDpe
z*P)dU)-~-91M?Ld)D9^NEKwvA=fywTnM5=&Q3>d*4vXBzoYm}xp8aYFvQ@n5!#Vc#
z-K-(m_+X45U>#T+lRlXfqSkt~17qTFx-fK+2lN5I!QRZ%s#FJw>YA$-bu^yOG{iCc
z!Zw-N(eKm)f0sHf0tH?A2a=w}s%-i}*DkrF(>T8iBuP?*YH)GcO=-Su9XBImZO!F;
zrg36<<$<VvsA;-F9+j9~Ber=}rI7^igEVZ-J`1O}y9d|k5zqr~OR5==j_~G>rO3dT
z&!U_x+)I`uaz|hmDZ!{%18vdzuJnV;R;%MW8iO3h>%5pQg~4%LP@2zNrQ8TRj$tP&
zt;Cc3MfFVCEQsMi+!*sgY3<O!90)}n!8bt%XVPr1Ll1;>EvF}q$i5rl-;XroTRI;0
zf0}estQr0c4KFcbP5ve~s<eKv5w0dnTXEJMp?C=S&@O%-COl2>p5wp$iP_o~QzjNn
zZ9EAMXO;CqPWZDNqf~vVJJzZ~k1Y~K8MeDNWnpy~f~xBoXMO-*_$mTA;<rBKPWSf@
zq6E#7d~0u~Ea;^@91!mu^(1oLJ_e}@0Af``3e${=Tzq%T_>u#8oP%!h_nU|nack!P
zfqx(&;k9*~GpE5qBBiv>3&DOsJIzjrHzJ)bu{&+BYt=YVh3fA|J_-|owkuNdV*x>g
za|A!)cqG)i%H4oU$BoG%L8XAW8&A}b^Wx1GA?6AHhvEu0rnc>QK>y;W!8+&9MtjC&
znYy)HBiC)eO7zYM8|9cqTJWzBrO>Wa+UKDx%Boz5kV~{oihO;4_i|xGT%2c9Sc%#P
zrkWHh7>Y7=sz0oU?YfN%_bgwo{xzk*+ab@M<-*ap!CzSx>`x4#O>;CiyPrvqo~(0Q
zHQ^qdCnRYuIzriq=8cxAQ<g)++nG59-Bg!hvh_x(j3-dTD}?ZMiLnaxA%-S~<?jp0
zi~KP1wp(UHCYV?{3UXg;OV)rs@CjuNL_BkZAOG7840&5<4k>%sQk8gFQSzrR6fk2#
z%q8|`^RCtzN~NRBoX*}z)dDZ~OGO;FKl7Jf)^1AajnKju#$#l`w3<*7tkGYGi78*T
zdVl^7-L?<~uel5XuQ>ssSc1^B`-nL<uwbRDW;$%Rt_WxkR8EASbFcnP%e-Ln<&~>4
zxPHKKzA9Q_kCMU+`Q09)>dG$akGfs}ClaxDaX86_U?CpUP3AGK`3swR4gTaE{|(WC
zivtfgEUI7<6%Rfw=+g`I%SCKkuj@uJlcPipe+<r5=DZ&V5IbC_ZViiCOSsb!tCF!v
z7q6qcz@CCcJ<H@+nZ1WhTeqK!K`iHDXBS2DI%P@k@@o<Xgd*L&OMcTABMg?$v}_x^
zw_x#ky<a8Gk{&UG04y)wk)}~42T-7G8!kp+BIk~^T$v1$7L$a_=g-}z6grGZH{trv
zTBQ8Ul9hF2&1r3YCr+FrIj8q^>_z*)7?pnXo`SA1jW50JfOoTX4;=6&rB^Dj8x&4s
z>&on4P5JK?mRys%_ow3rH(bX8-o7<e0w+@jesT2@(NlOGw9yOg|D_aaIny%24rTAu
z$PA&eTcDpd{kW}J$6REbHYlzdpFdyagF3M&;A40OK-Ec_v7Tyh=KYy(pHIO&vtWv$
zA^0vf0FX-3KZ;21w5?F&0BcG0CX7$cgkSE2@;{X+?+_br8!=%Q5R$j-aiU*@@b&;a
zxrS;#Q(?NRxqS(V(a%SU>oH%R#BiB+p;CL3BM|&=7Ut<s4qeRr#@KtwvtJkPt#J?~
zaJVArSV?-=shnIAQy9mn9Z1#dfC{-aicVLQC8`35?hO6><`()}8sh-86ej*vd^<)s
z=w-9sqbDckrafWMxKcU<pe5`NvV(6_<$=|ms40~SU(lwZ>;U3J3f&o)4||YiOM#fZ
zak8VELGf1<;GjWG(D~dV)};MOuSbPw6T)zKB=r_1L$-k;lP>hqIGheWzc=`_o>CSI
zlpFniqdKei2>9kD<lXVAsa0WlBD~1*g`8GRnOK6kw%U2{br5A-@ct*fOfzvRb}l*}
zY8p~h;>;cn&BvdV>!Gh`XdCiks<?vixHT$U4J#^vM$AN$(JI<}GUKR?&cJQu{yHEJ
zB?44{ys0BSH4S3W1h;t5wR>7F=*5g>S8{QnPz6D$MO`vAaCl?eOCp`W3z|7@zQYZj
z0}#@^I4HY8LHFp!-Xf)(+X=3IU4S!o_H+#tk}$;|OH5z{aP5xEesCs<s(;!prad3c
z#-87!Lu@MpV-E%0AT9*>C{eU<(eqw@$Ely|vP4TIBRlF{p_nr7Kwv2(<mo~U2~)v`
zw|G#}ra?B!fJ&+aK9`@)U6-8v>|ptFST*q^3*QEq2ue_|@pk8pQk2KaDIJH%$GF88
zfqO}>hl;&yY`K+*8@hn!G@mmJuZ_q}<V8`k`8=3aum=_8H6<0y30PZdYTm}08LJ)u
zSh<#7d5xNK=aCbTkyIfxE`2+DY~h%{p6$Qx48qSakF$gQ&pQ*(zu8JWS;gY~b^|kd
zY=xw?^oan}83v3?XDn{23+P9uesJbPlBA|RLOI);@=e7wTC|$aHF0{I++9_71*d1v
z%TN<Z0&}v?L2Y+;bwU}r$0Qca)tQ<yG*g;Z+Ki9(MGm1It{kd%%}`g$1z0k|aK>`I
zq_jv^omSoB7w5YIc~0LLUlBL!)UFw}bi1?@XX04l6?0;H$gI-D3};D<S4dD4on+=h
zHexh$ME4V?jv?=QZKNOaf4gqka=2gRrHo5uV$ynYM?k0QdlUTqAOXR0d)hywiYtH$
z^r&6W*`2C+|KXSK2f(c`eYy2rr(V`^5}j<DSMPQzoU8|$)vd&yLf%Lsqy`W~u*h1m
z8Z}&^8_gNoTLSiZSi-j{?b+<BRz47PBX4;bH{W(!&9)QU2WEu1{E<IzWd?~RL;0G-
z4Fq(wK}gr%5sKX7?517x%Lo2s+_9CJ>WIfQJ>vxp>{a_`YIj$uXbDaKo-=^;$DH^@
zWYALn_2v8F=KUfNI%lE3dqDE$cYX}p&xFv=Fs$V9UZlp*O6_j7fOUYICU&DaC>kaT
zaQcdsZkqY>YbrtOZL+WWOpb8OET%F2Q_WQcx<<gi)4w;!r$mWkZ_(p2k!FgMoM!E6
zlxZDcWP!v6?esVdO}&rpoupCvqc`<c)W_~m=>rS=UK$@2Zz-k&XA*U!ZuZp5gpT;r
zI8%Fgp#XjgxUnkmorbfA8MYX)tSRMj9iIxQh2K}%kk1Sh(M^{)lh78Q?+3<I(>D|e
z5tklM0e`;o73W<*_{<_D@otvH=mNyMQD~L=B;*Y3UeZ7vQ5{<XKTsL@2&(!<>c>3S
zwGX9bbwbd8dscE4x8E|{w|!0b!45pSZaF5(R+0I@I=oNoi~6LxInz#|Q5P%lL4)iO
z7$kYk#3n@Ug*Q=}o5a9iqrFSMerO!IOh8lM6x!HNy_25FLw0$5pJi-ujD1)vrS`Ro
z>`L0Xac@Hf-3C%?tK@PiBJA(N)_Sl}{wq=46;RLi6V%HKEZY>xx8h+hfq3SX5<iwy
z?8oIP2toyZg{@Ugakr>m<uhM4Oqpv{1slaJK=u+vu^Wmi7N;gm1_AOHeC(e8fBjbi
z0>Gxd8z+)Sz{p5oca|YDQ#N+aym&JnwKD~)8u+e8-J{sNi<!jQn1cQ}NgUg_X%JdT
zjLbhGAz?3h@pPJOPVS0dVqWlMFq1p60D?m~g^Lr1)YehY$L`!^ZR<U&7%b@NcGjZC
z#Zo3?3F!uz#*%=uPOu}|d>72%j4;7*sq_hH+|w5ra)~&^4~B1pi!y1*A*qrwxudAL
zB+{nkG0E7}uBq3{ya7RR`o%;yI^?J)qr;pyCrzX<E95i&^RY47S?TMaL-#56D)0zZ
z|GgXx>}};5Qq!SqW_$1UoFXO;L1D8?X5p%RI;(8lEHJ&)tOyp}VNLrP{0HxX%Hf*a
zSP%WcMfOqTo&3fjPT!|L<<;4;ct_f5LMdzA4B_=YW>y7a1rBEgCZeCw)uM#=mWMF;
z7BKWRQlz>;I_$}uIUbBj3ajAk%$0dkLXTTN5gW7K;{Z@NPX)_mar)ZF*l--*a?-N!
zD=q?mtbl+OB3Z#Tp}0X{^w$J03)+TZ(WEn!D^>jO_H!$i27tErere739)6GA1m_B!
zJwCY8)H;tKwr^qX8{VIC&Ln%Z93tVCnGzKM8_)r-kW#YjEnk<*4t|Gt1Dj~T6Xiy*
z3bAX{hb^5U)etPwDV<GEZ%CZ)u0jIr7*Z4Q(UQ-Ywp;z6Ou_0o<TPY%ONDYI(M0(M
zTWLyt189n9*TIQ9jtluYE@*tta{?{+>n`kiEJ!1z(nfX`l6rUl4w^UXW`mv$FahAb
z#PjkGdYFuUZ--Brs6tP>^SZAuBk=uOy0Wc}C&WO&P}ak?r}SfI$4SZ2K1f9H3JS=h
zD*7S8<sxm9Hp$g{&W|C&sB-_$I6k@&6#>OOxB;tTZk}`*xNvN1E|x>_QJde9mhucN
z)K!S|0<olwczH*z0wI8#NM{Rx2Gv<?Xo+H?Ceo%`3_uYY;jy-bZ;#hcAn=UO@oKV&
zF$KMKyJc88NsPNs8lyZ-mMB!mq>^7-c{Hg|E3ZIyYi|&eV&g9dFtHk38>9%ct<79V
z5ZuKd{_NYYFZumnL*cm*U<~F+d>3DJy2WuWorGKo0S{~5k`((%HRyD4(qb^Ou&SBh
zDdGg1swNTQj?j=##Q2gLDM^SNw4t<q{~gf}C6R||eA2@4t}2`gr#-ErssgCIU3+6n
zYLrR*v1=|eipjP9`pS3%b*OekSqt~UXDH;&o=^NnJ_u<4Y4g)h;*xToG}ai|Jx?;l
z;OAI!Rs7p_GtJ}Sri;4Y0%mq}i>OsG%{iqIoPx^#{$0KBDN^*`y^@?&mx%8W{vQ?9
z*c#}^|8gSQDCc(izXe_Ukj(ivg_<h$Ne8EY^(PDYtW%@5<7JHL+j8hoVw68B5>7Lo
z9-i3t9U9Gq`9W1C`Bux;2qCXUw~|~I(1|ns4=i~2mYgZcPB%d?Q@-uWP9~mVeHR%4
zvkH}%{X=bJ0$z@Ix4N${Rc_kFKn)I0Qpv!M@rf~r=jC){q{A17WUJzA^gA1Y22vaU
z^XhW-+k!*V7_`~6kJW<b-_9{f!=hf0@fp-^)Ert^_pwueU0Z<QDjRr_n9oA6iqf>W
z6<J|bnaXQkosvTJ^;^q~oKdTz0uNsKOgS8W`hyXDT@HPg8E(iAU;Yfl47GFtR3@QB
zX(uQMF%nCnd%AEfOd6$SaN7PnFNdXa!bl{IDe`0R{`xIrq}dC;ydT0gd|_Y5=T`G!
zx_o!@LyMWmhN)^joX`2V3|gdGN^oFW{NNU86;U74)<&xVS5yBrzTT4{sKj5?96G-@
z#2a1YiKY6uEuI@@T0sa8yCd8GsVP;{QU*UdA?xtJh3{tT4ne1>nhFqFvcU~D%^=Ow
zN}2^7EW?;c0rjsMr-2|vNE2E01;Z$O<Ov*S;R2oWb!ybB;+z{8vnwTrg$qK1%J4vw
z)_!+O;GbPhh`OKVU$*WjIvb5bAt2_|?8{4Yyoa%2xNdtL@uJ1Jm>-|{goYL^2_&Ri
zl#fsRAcNwGSWF_n1K2I1S_1-+J4QGgczI}YFNA(yQ}*XSATGF|ZwAau;kuea{cwf#
zMh&gVcO8@_#+|E@^LKcZtyAZm{!TZ$UjUh2AF>4)mDT?tBd$i6^%be11^G-zk>;MU
z88`@FLDA#79POlje|Q|P&dgl~h)l;V;k2$<Ym~51xmm$jprDu(Ir)wcz;ie2z4@@g
z&5++~2ReAx=oM^(q0sW9<6g@+n<6zCaS3jFg!dgDX5Ocxz7w}cqWYl@#aYS2d7t<E
ztVdD5k?8HYLH2}=z`t2=$fqC0IF!Gg^8x*KoNz^OHQ8`jEsI2?rR(Q$?+@`*0L+Gw
zH6r#TOiX&HY6U`)Q{Qgz!27l~>fO^Dg|!d;*Svyu>ULnpPcx|2(zKKE))c3oW=?$9
z%48RN|58Esquhs!097uYE%#TI$UFQunt=n8wx5}W0K>f}YN*k|9YV$3p^u6CJPMa}
zYR)p^?IN1jHJVC&gGog}QS1^H?*S_5?O?aFl47=H>%oOSfjq1ezO&U*Y*PP~<D<lt
z^c0|6mS<mrlxsTH``G6Jd6)SH0ei>I(!9b#SmokaYoj<?hehWxPQ+fR@U9fvv72AJ
z;@HMCs3Sw}l#<;9dq4a&mCt_u(4s5j^<}IKF4gAd#}oR2gdR9RQ}h}hA}KGYA)M*g
zJ=ibG4?hnAUL&?tQhyc)@`HT}84JbcsKMXC_|6HiOeAJDIf#<WsyiF7Ni%&lu!|ql
zH4JO$eCH>TPO_g_FE+31*lEGO7W|njM+n2nc@^ch*zb$`<(o7s;^F!w-qe?mtL66h
zBX!2+o;fUjllwE40hjZIA3&q?Ok2KvFlO4<Ha7Jh;qg#Um-B>p1@lfqX6erVf5PW3
zOCoNG_5$QDnQ{*68S=cP?5jJY(3FEnz<dIti0Fv|t?+f^psJW}vul)Dk@chJ{5Ct1
z$4)fNH@N+DsyuyEqJ^YQ^uO_yT-I_ADiooce{sc%yovO-<US%5rl2U-iOrQd%{mxK
z6t=;`UBrexdK`R#7LM7LG6le9!#t7YM$?l17w9ssm|P`U-e${vd73rVs&o~sY&z7&
z#h}B@1ilH!GXu0NCA<3Z8)c)1{qB*;2e-Fs))p4=6N6{<QSjWQLq>CX_FTq%2kA=+
zW>va}egE!O7RmCPf0Plp(*SNBqTvAsi=HWw)hWjo$nHHTPrb3%+auq(BsiEPH733U
zw(~64Q`!nqeCmf^REFE!(5|n&6`JtAE%xqiESJK-*qGv1ZeFGo3TGI^?|()4ukIA#
zi-Fp7lV6PDCw=7G=&t|wilc7^;SxulqPyl9FaE}3BiY>sB5{}s`MqCjI*K;DzATb3
zr=RA|i?Lp-S$ZxpJGNe3SWH<;Z;&-qzA^DP5DGo>V3l<6ToK-3NfH;F>Op;DfR$%;
zb(!2t`4pL|%<JG<TR5WI;j+o^^W8;L(Skfff=aqSfw@!imralFY9For0#c~B0?Pt^
zy3@W;e<8R}w!y+Y?LfVL{mko|sexBup1)ayu+2NIbYr@AdXJ|q7-`WK%MvL#pOTGq
z@ttl}c=>UEliw(J4;g6!cp*q-bI-x2{_yEg)z;U*z&4IA^&>-A%e7;1Y(DgnI8T>z
zh2t`Lvzzb~Q#U4J8^{h2m*OPnG5eGyu`%F1*g#Yl0c?%jBl$JQF+4M)QqSMELNETU
zl`X)P`GI_^ekCKoFoKR@_WVxCd%j^2VDgJ%9Xp3b@gyhLpfsS9;kc3zT#?Q9jPh%R
zvcbEn*BXXHwaDGiRVc=ehPx}*aVg%2p+Ah+Mnng^1Jl~i4Wi$NS*55Q>-je)uskkD
zA!uqK8dUKVU+0XQC|&nUeB<eV)gU`|nPABHs!w?=H_sxTkbW$C6*%)=RxE}4O?KQ0
z8#3T}d>nsTU&^>8Mo8fbm-+puZ&3tqKAtjvV&9d2E*h<~6mAwuxEYKLBZ0!4Hr0jX
z9oQ}_2s{X-hNZqOgh!=;q4<Gg`c&w%PTgcAdh%mlnmmw)51xslJ7K;ogC=vWc3{=s
zap|fw;c)9+0O^Ye&cX3lqNsbr@NM|QZf*^y!TWv|#OovwCOq5k=c%;Qq#AkPVmMNk
z@ttxzed@qHIKon0AbGbG5w%zxR6iqBjoLiNJM9G`$aH}V3->p3QsedXF;2Mp|GMCL
z+MC*6rbGD)AC_Dv!H@NWp|+2s*C&v=$6-uxMehSG9+{%O?Rjoz`%X4ntIXrO*g;}X
z3-r?@)Whq6ckJQNR@HOJ9*lt9U6$VgI0g5np*10<5^;^bzDaA6_LoShr!h)r78ay%
zv+t(-7a<++_|eFD33dUwPi)Ebhf5=-OYXg2+v_zWGav&>55kV>s?&5oa*9>{A&}k%
zWStk$H=c{9_q3zLeGPapK$Hjo%5D0d4wRYYu%E_694x*K?YFSSm)WI{89D-0hEq9f
zK(hGzwey=TNalv)L(F88S5i28pBlPd@HC*WcZ1wkj;5YaZxwf<rz<#q&^II+G1NQ(
z6H@nJuyg{-(xj&|f`g310Z}#z)P~wmP|YzmDG7x=yYU}&mZ6Y#apU>GE;6N1Cq^^o
zp+4o7-OuDigR;sgOAzW%<`|`k9)ueOCt>06UPB*}{u>UzQ(}*U@c@=0k;~3v8DI8E
ztKMOOa%9WRPqY!W8J$ELwv!OxgsSZ6=+JfSaq$k_x>5_fPlGMI&xiqD!`-8^WUWc(
zrOL}YRiK$Ru0Sy=r%VuS|NdWezXksx)0Zy!En@I!&a>nPpstc%aJ)B)5>gB_;LJ?W
zKjKd=Dgz2}NJI0+{)P+Bk3>bsJtIsl;yM4sGrM!jDtAxn>Yar|665FGpFX-VRqB!E
zE)hZJ0jQoaWI>&)z4p7L{MJ0{mN1*1O9b0kc;1&)@WUn?UU8Y5j+41N3BgEU-Iw<K
z_gS(*XsWuCt*8#Z&0__kZ+W)_qU+fcj{MJ*4E(?_ES(5B`^xUo0F*)lINg|Mc<xI~
zG~jZZ+6T&F9kH4o8`l290%HmkEh)ZstI~P66T5XHgqz~mAp_@||L1^#Lf!Hj7u;Xs
zI;6Uyg3l;~0d@MRf47JiG^1qv)&%sFqBB*o0RYLTZZ>F20>pTx0vZ$gc_geeQ{~xf
z!+1WH|NF$3Vr)@ML4(O0KL4(jn%&^q)`FfS<fyOSM0oGK6W5O|pRjel=}ZEv=g=(U
z6NR0_GaQN`xubOcuCpYoe_Vaj-d}Ngw{}Bm?t45b;^>sjz|&HhA|s;H24>MwctB^7
z)Yre`={L*{?EVWiZOiFL${3=sK?SP^mb988>@diUlVio2od<IT10gRP){$AB3YsbL
zn)IDNgY<buaWtS2rV6K0%U2%Se{Oy^T{ARnm?V7rAll65wjRDQ?+y|X^`$Ny6*1Zg
zeA1q7A2u<&yxro711RGma{Up!&nUtX1(p*a+yUCqQutiX9iG2k<qkbj1=J=Jg?u!j
zgb&vHZF|KjGIvjDB^5;yrV;f~P%x0l3R!_MXWL^;`9_h=Nbb^89Qo!p@FomG04Gq_
z&;_*ad0|~M_&VxM1+s#Sw)gGNS5I&&vBp*39}71`k!#ew56u?g4BnPnKsPx~!1BHE
zv9z79&mUTVj+w6R^R$JYUht@o^^Jh$Ru|Yvi_Y1?o;1NL>7D8S_05eEVYptzG!b3I
z4RdoK-)PE;j+8`<TMM$Yo4?!igG2@FL4;VL8YYof2)xC{^{MHD68Z6#`p8kP#d#2T
z7&go%vsshzw=Cr;-Bg+916{E<w`&1CpLKcdeG1JXL^d%_OS!8sDGZUL%ERST;^u>}
z^@3^G%?x0`TBbYOWn~@>n74~Xs`=wV2CMU8d0={HOH?gic8O`ueg)S|<(%UYB>_~7
z<1Gn`@o!%*r0*>%SJ1g`rQFh=4BUAnxY6<+YH)cNIUB3*YAJpgjUy57D$%p=XAK_n
zRSAlR8f2wVs@TxCt^}NW`*VpwbL)c@h~&)&(%{C($=Z<+mls-Mpk0(>B(xWsupT%>
z1Y4Kd`7`^w8Ii{Z$@`3;%?Kmyg$@@T7i%SsN!DJA^uu_8Vf$)jahT@k%I_ej+;R2@
zW*w9JYq<taLu_h`LXQA5Qh6HLf`Q8f93?t>R-RGdj9~Kqg9raBbSh&ekq6lv8*>ZH
zZ*L~pxFw*}zcU0SJ|}1MSQqG`^NeNs!&7bFj=~?iKZ#x$1Q-UiCw&M0e~`*`+cg_j
zR^-?I{&gcE;9_KbZLILK{7kO5@6zUEX$CcGAN9?VIXAuL0JNczMxtN8?x1oIOoA%~
zrw1|<L&K~y_j~(Jsw&99u1B+cWM~>mabkjJ{r+<Q(O+JP+{r}<0a=v3vnW#89m3lx
zm$+Sn$|fBU>Dyq9RY?u-a^z9elc-ScQ+?j(x^FB%u#zk%kbfM{{pnq}5^}(Wlify8
zt%NxJH^jh0B@0CUpDxlLOB^QbH1XOR!b4wEYZM<Nw{%_t0F7>WcA_GRgI$@7O5}GG
zj^p0UU@{`16aVe~Wz60in;;_gpB=VkC&aRuCVj@2Ob<n3iG<aANDo5O4>mTTBg5Y^
zIIr>|-ny&AHx<~N9U6BN_3w4tgE5vYM5YoCzWJ2t!jp@D<^l9(iir=Q#rOCC7p6!U
zC-IPD6`12&m<0b;q3MB?hLx6hRhAwJ3_$?<x9@9XqFlv$riL`Lj+$0C2Bs@~Xw4f}
zYp}KOv|jOYL9%vau0RmGoGG781oowV<luyGFYqcJ3*z#^?DddflH2V37^}DFpc{!j
z7p*H@=bs{fTwf9fJQyo)m6CKM@)<*-PDuG<$|!^JjmX3|x-D*1TC%Lkq&CqwQC(dD
z-KUTEJ<5$ml*7k{*{7jLHE*HVeNq>Y4AM=aFiPTxT~PBO+nKpldZvDbJXxaY+nE(l
zBc6E5vA%*uAeIO~#5On&Dus-$Q?1eRv{J^g0kK^*8^S=f%TY1{8|;a#dd=qY(^f9>
zoa$mIC%e0S0}u@IXS^|EErkT&jO`q3u#U&u)m36Qv)_o$fp#~&$%*E4N(Ok+*j^Uc
zesKBTKbc1+my%7l#Bz~TIkr22VO4p0ACGO}Kq4TYv`@x<EE>_)OLjm%L%`{y>9*a=
zUCqttR-1&%-12}PyJH`t;N6=)Z+c~H1eu2X5I2ucqFI#h3SlT=JY}g|Fx1k)gw%BD
zYZG_;J5plLY0-&phFd4llX3_1w*f;n^6sBWf}&iurJ@uyqk!cYBHCt*|A5mZcv~xB
z<r#bI@Av<DsK@Llj9=nrUCp$M7hcYAaI)20=A`d>@s05wj<QGRekf2)P<6+3!(PDe
ze>SS^>L5cCX%r;$=U(WZ6I7`{W~GZ;<ToRlj9f~1Wf!>N!@V2URn(92`nV~Pb%rpU
zj2Gc`ohc!GdKh}(Y~gcdJPF_6sXR!}d(&taz7<JBKy47L${}1JyTMrhgX-b^?SH}e
z#ySm&JigXUJP4r(RcDd>VYSpwYVa?jH0lSGk3Xx+!p^He^nEV1MYkR<LwtoSL3Php
zZDSn4g$B_S?APW2IWINE{Wqymh@pnCEr95`c4)$;!vfaqfaxaX+GJVfHld#9Rf$aU
z0>i%QBUdgpP$qmYvU0UR!00fQf-(u=X|;r)A87v<j0vD@TAa1=<IVva%vVSnzv%EP
z5#d1W^ZRPrQ4dXZiqdl&q^*R22{C6qT95yU{%)n&`}n0i&eh$?&vc|@aO(CM^+Ydv
zU!OM_Hv?+cs}2z@6!Vno<;KSQ?qwfk@<vA6n2AV7$QG*2U3g-(Ppy8+anf=CTR^10
z<m~DfBo!uB`AxbFEOilywvkyJ{@7_e9DsnM&Cd6w$s0U{fdt5xe}59ET-Hz*`QsSU
zX<{%nSZdsXeiT0e9zrY>Heh(^FK_)5TnHGiIRH<jF}|Q`3Gn;H@DR;}U!NL5kBmI@
zEYfA(F;$W6NfC6zurVm#S;=5{QG#scE%4AUrj9|Q^5>@B+z3?+LFkkb!hl~YNELd@
zOX7Iwn_>i6y@j&5`0qj})fxY(s2iVMzE4mHAi8CmAAdiRDNu@9BeRu!rGqC$P5pk3
z0syFy(G{cf{gn+Z0Pan*MvuSQs{L7Ss}8MT+7|UVlHCh~155P3_B9v|B2IiP>pZMn
zU0HTO8d#G^LG~9RMt&@Zd#U=}_09#_R(C&ice=x9vlZfBQi%cdIakVXcB0-z#2!<5
zo!5palMab<&`2S9<gdk%qV^Go=inT%L_oj26F~CZgjnxh$_r+Yn%9qr4Ws3(wtq|q
z?(|YFL<>K3zD52C?Va2cZ@`YBMuHu{_Q$`25#b-}Fpx4(I>UodHYl}1->L=6X6ZA-
zYT;xlel9ff7W%pyzdiac!UNPk4G}ZoaYxMFANb6<ZW>xp<N2=hxnIVV$Hawd_I|$>
zVM4S|YW-RTY;+X;gO?`+AiMtm@0`={0MVYMFE@MMKL$9Ua&*FK@ZYzAqCyqRrjcSS
z+VX_3LnW%e3sQn^0K^>6ONa1HPR0AG*DYdXf<3<R^{Jt(Ck$5>3kT(6cUyI?;yz~=
zhd)$n)DM)2Rhc9;zaDV&F&CSHy(=Q=7Jr1Qa*IY}QF0!=Kh6rW)#iT$3KsIQn%T_>
z<PkXjr5*2@M<#_x8f8elKlGSwl|MV2`9!-{WN)frt#Y-n!H}lPFr=_++s7#irs*<t
zAxWXa>x%*e^|ZTx499?sKC@N6?2^NMVXZs)A&|fOUDRseG*FaCkJR+86!Nfb*AOLz
z!NXt6D#kpa%kNnwkDEH#=5FJz(P%XtHpwoQDs0|B++wfjceli3z0JKn;pFjWC*CX_
zD6S|wCK^5pEGJ6Tve{piV~gHD#2Hz_W8V;Ho&RFDpGio1U~u;?t?jcf;ad_|b5!HF
zvrt`}=%W-0`xBzrtKTkIUfM+#ogUGz(&cwC)2L?B8ekOKHp44%@m8e$xE+6eu3a$P
z>m(K6)y<ew%;CyErS$}ilk>kh9m-n66m>_N_N!;I-u)n-{Wa}9g8I4R?HzukYT!jk
z-2J;X85;?xn5yQ4OlNe76@3&B|H$8ij0f&K&^fU7hvD3__xPsY0s5-Hd2)FQ;N-Cy
zWnCDl3lcX<gjs+19J(d-(9aEZetQl%MCbPAFi3|jRHU^488vJ*%1h(zxMU4blQ`ta
zwBI(sJw-!HilZ)r|H<O2IKaq5n7cZ>R6l@VDA=}{ZJ+U`&&K4JEuS~dYc_xpg%Dc{
z({<f5xx|mYHwoYw6r?ox>p?iFwOC@`<h^v3=sCx1_YDyXkNW?Iei4n;V+SnoDq1Rw
zA!<HXEGoNo4cjoAG7l5~{Y<80{ExM5?oP_goIG#hBe;E|`q8RByh$(`fq<U)r2_H&
z;nQ%mz&}76z-j>`a)=w<C7fG;?ol!s`tqX3l$xoWA*up&Kb?$Qdg7PJ3ZXBB^jBz`
z@jWw{b~}gY)B7B`p-KCZgBjPK>OdF_uCd&6lMAMPPfel6OOzLYk2Ae&c0NcvD-se#
zfT<vv<h?EFKpz|NHHSt&+@s$JW&oICE6}$S5KU8W3_v|0K4wQY`8TC)QH+SC#GR3Q
zwQA8lzt19SO}5DlzLZNMHvj?o0D|}BhiH9*!(YUf;tiY4YmZjTv0C;`E>Eu*hZ%AF
z?*u`lS>Mf<U-W%%cxS}@j!ZV+cjinL=fs*p<HKH*R0I48NY*9pH?1MHt1z<xVmalw
zRRM<%%*uZ#B3?IF@6-n2AhH2eHn|P?RzJH=qcW7?ISikh^?iZSi}`x4w35s<tQKRw
zJYX_hWiHjU3X5~}aQ1N3R*M0*8|5d3VYv2WGA)a4Cbst_Xa+SV*~T?t;clP@ynenr
z4vnky7%(3{NgTclk^egb;muu_;2_rz)g*q?>6!uU7V|8wD2BogA};lO|GstXg5P2j
zq7KEzW3Ou2M}L^!5DSyyyI|O5L*-}hs*2n#h#rmM-T+obiLK=p??2*E7cf2RjEzRJ
zpR7->*aLr!Z)A{O_QG<i+K~j{5U2h@o+bq-?mx2=FrhQQ&2CdoxxnkmkLL<;T}cIj
z8GwrCC!YxN%yIZ2#3|1&IMD|>ohZMI<m?sAUkBD%gJO|c-JYZY18`vMN4>@OZ8_ci
z7+8!(Fvev!ypDV9e!LknCW;TU!c0d+ejibpdnr6z&I$VYMM3d>VOXxtPP(f7(-K>;
zjQ?sPX(ORZjho7LA$+^DQWpOL@*vFlm|Ja)BR6tR?-IPH{4CHOl#lsj)Bi(4l%{K}
zb<Kzvgd97N2vOFmb2F8+mf;n!9*#X98HdA3vTZxx&d^6kNe;<ibjiyM%gA<hI(vRf
z-l=q$nO+Pr8fP(0Ay)fQW)ElXAz&r=qq^{Ox!>$7Vx|iHJO6tn%;qvRC*d4JY}!t~
zqy+Wci-3_n6N2wZnXi%T9ZDJ%5uA{D?D}7si#6E=7D45o9~>o>H*0@CR4W44vWPQ;
z>VcQ8Jg4?RxQ>GxHFobujiAb-g?gL9;BAzU<KrgC@6bJCcV5MU!)64_`)<{L<&CSP
z{ursRQZHq!DH0A^Q=&Z3@w2eyG_hM(ROrvlcs+r7PF35i%VHptfMFPDGfaHA?vY1=
zSx(#;37K`y9?nnUy0GSZm8xVT7$zvxhC7Ucgp)z#AO^?w5Z%^{on6<fqH_Q5D5T&m
z*t`nu-46fS)!L%Y+!H*J;~WXC2H?qZUy5lJF~G%Q;5!TPg*SosKvpnQg`h6~(D4iG
zQ!9(0ZJ86I{;`1hb>Qc7zuRbyCI{q*m_`tSF$ns`oPXF4e5yUtSx>pcaCms*5{Cf3
zka9|VSp!38<GB4z%?nb|E-%~CxBhLRqy}sDZN7ZdvSL#Z^+K(s<zoGIttZ8pUcQT7
zv!&L|*a<75x%71TRdW^F^5>lqe{%vpok{hNE8xvyo=5@IY?-A=m{^WTFItV{6=mif
z&y3NQ`|em->7&f9-|LiTNY~%Ha>Mcg=(kTmgppAX|DwryYhmfFqQzX!pueG>wTz}n
zKa~Q2_mB}7s!9=&!~M*_tYI~<id-pUt;tFHaPkwT=5;^fOQ?U+XK%$UjhU)FoLPY?
z<iG!l?J!x-fEVHQByy+vgA-KIMNTOr8CX;f|8y}8`KKbw-bRkU&wR#(>i9k{zqH)x
z!8$1!!8eNY0VrsXUoFb&aklz~@u-4oZh&DtGI-I|4i)d3*zi%Ua1E;=M{%qeYE|tM
z$#3X!2}So!QAMt8(4)ZKrj@g+IaSVF1pyz60%L0g<@eR*s!1JYGYmeE8en;va>QBu
zb*kY!#&*j?^0;L-Z?m{v)DowMD_x9viPAy4YL9ud35`KDbJVdZ6Hkjx%0xE5APUj`
zc9hykCpgG*pEA}GPv#+97?7AQz_~=^N;iT$T5xj#uXg+P)nwLuBa0^Bu@90(`RiGV
z?GBBm)@}~uRosC=C{9-XU^$A)w!i?oc+63Lx14|A`IAuN)S%k1@^qa8y!BE9$}R?t
zZdn`dYs9fZ!*N`2XAkh^Oqt%p2*1*|U2yh4b2lCFkBQ32m|;X`syuHck`{%==Z3$^
zbWj9wx(o{0`b{7m14ng?XZI1<9J{;+w}Ipv+?*hrrnYEl47p&I*d{d2E9HYJjs&!t
zy~!;zq__M6^IHKq^HGvt)#TsKP3UpBvECsqS}keBJ#mbFoz6WYex2(U>`10b;Wt0#
zq1=sn3H>Vkof&c|QNc9$%h{S9M2N0qb(h)BvBsm+OxPMiDFnCQyp(TxMFi9fFvMrS
zXM}^~(~<GC#`!LAFouhSCSSbM1T12s)fKNn6`CVaFJAIB$RB6XW%2?Koaenn4R9M5
zK%cece4#_l^s;2{cWMiqziJii`>BK=b68iI5r<~&Ytyo9<|XGFu22q3Fjv6(wj$a_
zC!ATJw1Y7fZNK~0?Y4eSgW;(5k#;TMmV+6S<KK(j2|^tEAGquxeZuzN(6+}90ZH1L
zgj35S^M7c^IGcY1jy0ZqrEavABo1ny5n+?2E*hy?nqDl8V>rtz&-yE{Rr_{+bAnIj
z)b{b#(J)&Oh=Tlu7AcT9=^CyZ0`K_@kM`6%e#Uz-1?tSSb}Z7r+k%-soy^Fyt0&oP
zxB$ZwfPx9m2u_I@4N)$ix%zEi^4BCPD{-|&#xlBvEgp_>kD_IJRgk%ffUq&8rgR3h
z=+-klA9@<bd@G|N3&^~o`vpmO=O$P6jUWQN+pA#6Rrighy9ipq-&_~sq%2Yf@$p<k
zeEVM3<9Fa;86jy3*Jt3`{f6-?$DEqZIu&$=e(?U8%;a*fkcOl&9_@l%1$wF2%X{_-
z#IArP$`!UhU?+>F#iX}l&8Rwc<E!$es%~k?eGQC3!O1<inELf{eNcMw4JCW+ILtv4
zlTI1sy)55(gEC=XUro9Xx;e<Fl5PS@ND;GRHi{l(Z5tOBiT~hd)QgjNrGXjeuhkS)
zX5;-fZ1Dg@=ntQ$CmsaE%oTynJ;wIoBMFGzi(e<ff113+xK}eMq)-tFCqBs4)zb?T
zS~UKT^y8JU%X4cTp?6KMMCFO6IjbF@l|S4XOsDmwy-yB{4I>M~3!}Kw_2LD<4)*`=
zg^|O&Jh^VjCJ^r-Ob!FPH5#gxH-fdA&DA-VKS}{9MRYH1{RBfUiCRj><X?jiK=Dz$
zYIhK{m)OZSIqWkj0}F(viFu&SOVmGiIO+NNo?u=4*#A{CRk!xuEaUe?xY}wWgR!)<
z{zcqnPd=zM!!&{ZR4}M<f|B(+J)NDfppt@tj@EooEQfcO3Y?^x5EliVNeW=|>j>&c
z>_%~osVofCwS-p4>nbfm;0VAI5Z*AWZsQU4mK(kar}dh!kb>2HXwGLCFVkXA<hV4f
z2?N9`qDm^wE%ncP+Lr7M_W|C{2r;@n^a&E37qcy4!N~OgLiW{+dzWpBzRF|nj*D2V
zVO69yA$;b)@@}L`|Cn2Yo`-UHH7Q$o<hQt4l!Cj7Jb?nsg1{pHuVL3x!HXH0IW?&A
zHzgM?lTlN%DgAKd2Cj_JQo_pP>bpnbVDhU@@uU!m$7yTuaXta{EG*}Y#v^$7T~@k`
zG)mkC)-lely~x_#@$(4tVr?mE?b(DyhaG5#cWG0B5+Z52sItBVnbruAlYf8`sW+?8
zsLD(1HYzr5JzVq?k6(oP^q%&s$1<1{M^qMz4i%ez#SL)KJ`(go51wanr;KGkXMPX7
z_;1aoAD=U|JzTu)@*baRt<IH}K}7|f3~3^aTPNNpZ$`p=iBTx9ts@zZXZpW-D0*|x
z*f+DX^-9TVEA-HSylb@zNt5f78GF^HI%`R6P;X8}RRu5Kb9uG(McI>nXD(9Z2!VbL
zs@<CI{yX298-l>-Qy$3M#}mkUc@cm&Za)AS8IG>0<9kb3HbhPxm>#Qg9Pn&=XP#uJ
z6|Y~63KSPWXzeZ09qADm#q^%j6vT>eb;*`eiXq+jZSK$bU6t-F@uX844bdw0Deb%W
zqE?{0Q4>5Ao@uQxh>&$0FRLHA2{<9E_aI16&%Zh>QX?|K${%-Sko;_@(-&@kUNWSm
z|6o}R=2WY%eU7{RBktWrSGWrz68EAkEQK=9;5b9e+Eo+uPN>CGYeM5kkT~$v`2iGK
zm_LxCxrt~onJz?*F5{uKc%_skKo><{pugMY0+)1dnfg(u0XG@zUxtse5=X0KRCH*Q
z#`_u*DX=i<$~x1oR;h%D6a~$*YuPq&akQt};I_JZvgkn7f$-`M0f(9k{<FV8vl<%e
z9Jp41bgIG7un^Z$D$pCRg@bLXjJsW7=QIEu)5=|&z_>Vufj8#?W0e+#C>(|&u+6(4
z?x)8)Z0U2M<t+mx6+;r>Je#-5FXPw2vfVX2XHm)@r>EgNTbZMXL|s^*$`#_dd%=)k
zkdohIpp*^;jmSqdgzBab=4y`(9iCfhZw7eMjn3;sZgt=Z^ZBwG?VlllI*93!<7w$K
zli2*oDD29Kq*f4;b62CX0#L@dNxPPgpkG%DTLr#^7>iH`m_>TKT{$o6N%=}^s+b!;
zx>(BgR&NH*p`|!Jed)os=jaY+EcWODLPz7U?wBPa?yLSRInAqnr5$<#ejgV2aoquK
zv*ytiUXB8b-3|yW@uPXlo}FFC(-zS7pa1<A8crVP7MKEd)x+`ag}8KA`SS+7Ox|}-
z5mvc8@X}<|o_j|LB>ki_hgx&2<_{BDaQXHvOaiQ0|1mI_=J=XmjIjp~<bPDRskosi
zY-pwO&J6!ilwj3KEDQ<>u4aeJeV8b)Kgr<IHD_GfbFbBEpLr-98_)1UY}VB;qx!sy
zR4t|_eVb`ab&oRzT{VvD%$8X`%l@!?!**iEWiP5)c&iP*j>0F+Fb7IlqIDqe4-_7D
z=d=&C#|zUya#n&jz)>&7_XEY=ygABuBiO}-8=KS@a5pme)(`r^IDo=cp44@-V1g-(
z`)Fv(>3Zg>GaVbpP87-axr}((uMV3v!>^B=6@o%?#~4ChGyOvNMq3+vd5@R7`7DS@
zhQ1>F&QufG0nJzAR~$F1MPkfOmz7cluK!NXM?A)AGccGQPI6CPFq><c@Nwa9&JN@e
zsO8T7QY;5^j=d(#|DVysi{cP?w^L?7=@~`{s~=6bpcAuqJIbX?dd?)YRD_MTZ?~q1
znEoW1w+#*-NVOjhEZ~_|+=r1Z3Pb>6;$!Di+Z^|>dA={ZGT(w8h>Vw|<QeF=mfVX&
z!cCkY)j=b^CYgDy4i`r@u=c3yQfoWVa;@xcV^`2hy!FI#0Z$sKKoRr(PM`64l@I1S
zR%^|3R-IS^_3%$@9G=zcDjVcFqLhwzd%#FF;XTX4k)dqW%F?2e?#}LXg+7sb4ybF@
zo}M%#y3C|i2gMUXI*YT|(Cv2&jT*o-=R$ejJlb8=Vs%9%bM>68L#1@S&OZ1ZH4+yG
zddv4b9@g0j3!WF*_(`8+5$m`b(iQgUd2H`gH(r&XuRPB^_%ZTuI=yU_+%!bb|Ahpt
zwy2P34;D+EM%5NgcA*7Y<mm!XGytnxB2kQlpN$;N9=$fvLi;OUFpywDZ&@S!vk7>g
z-x7Ft&Hxo=MPKcir&Am1k3z|A)rE$lmy!8>T~(zUFk9(AASY(PVe{jnGi;9XQ+mP5
zUo^0mfN%P5;(%PcoZB&o*zd!7#o?#8Ig@c8q`u1HwAvV$_Gi|%0i?9wmshJ0VaANB
z&_G)gHA}o5ObPZ#x}s-}>Jxs=LB0Y0;G{`d=$JKfgG*aCF@AdsXJIr|4X9Y^wP}ti
zU<6MK#U|<kY3^JPEy#apA1}U0_wckMo*8dnVEp~dDsA5*Yny#x#YP=3b3g`3h_%)L
zPcGP({Qzt52H<a)%I&*`BWxPNWQ)a1>*fQWiq^-Nd$mRiZqIsEhBSrMd8}CeWqZf)
z(zxtS6u%9)+Qw7ofdmg7qyJ~dK$G$m?a`UiOD0$&n$Lvj&+~>h>wi3Qh9sBDHoWut
zdTYN8G_6AxsDp%_eFKqRh469IXiMex%r5`Bz{fpWf`XL&#z7$Ewq)m<t-f&&Ez;Qt
z^w&K=xqEj%xYz79fyO@zURc~WjGzrU1f>>bg-PsOzxA3nAmPyo7G*_q%!EOd?9GQS
zOiy(Uj*2)W)JG(y-lXDMa&q6fQ!{_7$o%A^8SMZ>b_=&$YTCM4S+OXnHc4MRKW$(U
zKRzjVDULm6m>`pE2ScNd?A8puOhtFvh;SH{`0EJ)k6S)EfsS8v`O7`5xqi6gIx)$k
zd*<-PyeiO9&~JTag=arhr~DhIU!BiAVVzB2jr6b|C+pxw>0ik$qNx+1KU(g`QC8e=
zKq@+zd2>p<IXGNQBt|qW0^?@vj6R?$B7-}lhV1|MHx;V6dZ(4*m^C_>O>t#{Y=~i8
zG0$`l%Fge!8O2F<ZREnd;6Ewk9?;;3Hzg!a8}}Vr`ZbL>J_#)JAkU(3nxvt)%#<Dz
z;R1FKOzem|>lwn>!=l?YxjyHy1`uN~h~?T;O(JSY7u{PyK@3M2eQ>5`9`+aS@Z&B_
z#d&C?khHNG+d?sKwogyu0$ZrY-sn<Q9vfotj&tbXLgq-%Q%RV&-Y$nx*yjzHhwyDr
zB#aj><O87834cNvbM5`gvg`*j$6kl&`w(TX3HbUmRbk{@ipi55ge>H&v#A>;P5xny
z_E$HYIi+9Rr(TXybc1mGT<kfA<+EJEGm%0W6aR&9C<U<3I`?=xZF}+iqqwQL{xtQ(
zrR!brfcY*Jzwq6v>Rb=9@j3a+WH70IlBvmtdiO2CGfi1<ki9k{QXDJfm@fKPn($@4
zQjhrbna9J|Cj@1=7?yI<5NrmvIZYeQ^#LP2aH`?oqV(1f=`XW5xPH@>EyacuF@Vyj
z0=Rx9ROI2_A;YNRd+Z*u@|GsMmcd}e*&eN7?&q=V8{}+Lx5e=6r5!8~6YFa@CR2Ni
zxUC|F1P0XRvSWHy$Xy3UwK36Q3=jJIWJqb*Lc=8k=YM{ljtB{ZZ#Cow`jJ-P&H5P?
zz&q?qiCbH(0b+y69X#o!4LHTfdqA0pFXR^Ur8x}=L9k-Ptl(Wc5qTS!2a5(q4vMVp
zeUFv?Oqhw*bb<{BNyqMnz{6#9g_ry`Wujt8_vpKz1Hi!F@3&#kuy858;t6+|9k9J-
z0dCQEl;=B2xK>N@tH$6SVcmEH8$UG%Ds<fmO6dNW6JUBjA-U4033cGFX6P=5;*@p#
z*q)#V8iU2-jznp99!(JUQh2t^U$f7FEi!J|pZ?z?)&UU~qn8CMo9a`HQJ4r776%r$
zNLfyVns|j(bh+E);^v6ZCS+?2EK$s-CiJ^@?`}7n?u9#3;X2cAKaws>33WdVu)Ti$
z6G}t+T(SPX*^pGvD229mBia%B!gFR(Khva!k(X%-aXZl}E<>#z>t<}xIt@&wPr_~P
zP8kb>Rm#pS=CxI2v3QIqmC+pB2s8e8h%asBJ%WZ3hqs;cdAB5HizA|$@0cF2T!!Mw
zm(+^sgu6$p^Gq+s^O|~&?BSx60ao_E4h;}(mP^@L=EW1joaYb}vA80*Lq9=UT7<k^
zu+zFdE=MxfehZKQYu*A=0!wIS&0~dCntI!AHjlH7P~49ZE^g(mvK$_qdpzW&OB1GV
z$98r#$4gw?5uJ0<a!-~=0LFdM2PX<N^CLB}9=6i^@batHz{Ikt$|IdK;g2ntljO)>
z)fmWJ4-j0~!2I|-jHV_4bU?FW5vNOC|BOT*3eaE)^JL1apMdxsV43f4o~qi|dmt{J
zC+R`i`6bu|!Clbm&7te(``<4VyHxww5UkqU-}m_d_5zRk-rFX2xL#fA8XNHv^+_Ns
z+)C(Xf7}paUx%yZar@`WBjR+2^{dHJs#h-df2;mUd0$1zI%jN7weahL3M6s@oD`V8
z|67{?ulXoE&e~!pvyHSwvza1X&Q*5v@VdSoB$v=+CKFsw7XjGS(9F1rkT7HV>(Fi~
z_880IbnT8d$yGaSEvp8DYV%N1KgD*vLXvTR0N{EGIe@y*QFoR#FMpNhsWG71Hk$V`
zpT1Y0R$k#fo(ju_dxX36>GDE%sv>L-c3x!y{E0~JsE^QV)MABB3p$<pTVGAhMqvI*
zZi}hmH+)rWJLid|eaOYS7t-OQEd(ZT%VhmPbuYB13sNv<91r1&9S#DjgQwuG!)Wk9
zxbJm)v27_k$g1RXd^iSpk|2!SxgkWm1d$Tuq96owz2at`*V!3L)2$S(`@{c*1t@dV
z=`Iyn83;?1yM`uEZ$Ik<{r6u{V0t!POEcBI1;JxVT3M+lwfj{>1g50d31P8bTw?@`
z@5k<s$e$-GY%<%kHIP%xL>=Trrz&Q~m4m;X!|GLQJ{SSj@jH2DL&a^u-$1$WHqVCn
zM{Pti5@D^S&x=6G^P?vavfjyP)+%!g&~2y29&GFfgWNWYXcAmqaQZr@17}-x--YPo
zKOB)tzl}(`{*6>~)_IHX2B)q=k??Rt<zUBJ->jV6zbFFNUvoh@n(YR)C;O0ISa*d0
zZO8fc03*GChy&owb&b#gT#?>rG-UU_+6d+zJTLOJZtwl!-sp4&DZtZ`@|ZZmpufHd
zv_#<I7N>y#h1~8Tdm*%<{)@i7TiQee?mBW-GYSnv%y0UA_0+9KSCkshRI*x_I?Fei
zMlzrJ;&%k6=pX%^Y0_+X=1j*HFUK0_rG*FHj|sSvkWdb1R^75^^b&shwOLX3I|Ab{
z=><zYlQq2GqXGZfxDG5^eK08PqjymTkq7oTlUui2PQTVZVyjo%S&WU13;G^e+T7HI
z0lJrN=re;(KKInz>0zm%Dp{e>O!^4qjp$x+YkMZ^;NEAMIGGGg%e>2ZHsXj~0X|0V
ziObng8~_MEDRcDQz-^1XJA%I}P(lUdJTcQF_QGg`mayt>MxH?D3W1M35dg*F$2v3R
zU^!JL=FT@QK=-MUM+QBM=it290)(*JlC|8zS!5e{b+Nv~5V^UxBlY08)pZd`F0{Vz
zn5O1+*N*g3fL4vf_f~AF1HjDiKDUSS9LOas9qaKFZ?4*UzjZwf3))KD)98)UIZwFq
zB%^Ohy8cn}Rcw~Pc*ntRAo4EXJyAS&{KpF$>8G#*-sBQ1C_ha>TbyzJo$S_#y8v%r
zOZC|z7@|)lhb3!qQv=!OZ!Ww8%_SW@2G8dMB<hJxm~p7RznRaO6O7dqpUs!+`5Zh^
z1raSC<QPS`sF?D7KM(QVb_d4$!LkoI@-6ca`=j~9vRtg1AD$Qt_KL4Xo1`ufy(9R3
zWmZ@p?Y`xXYJ*h`6b5m5TDrI>F&(%5?$9~%#!WD7wfKc@z7#!qu{dX=E=Fje4%+lW
zGt2^ab5ClHPe}6>IYbM-ys&u=_n`P}a004-aBH*Gv5#FbmzG;M%Ar%jyht<|3prDL
z4<3X{Z2VJ^$oyhX<-wUGP6PO$`i_2jen7v>boGDvciorV{n#|~U*n76w>FpI{6s%o
zSoqQviB|wI!x9pP2xE%OC7%<o@bf%D2%B7rFuON8K}Hoe?7jzk;Z~RLFId;v#8J2L
zxiJ)~0JXHKD<tO(TVsVHF}xwb30v`T9MzS9t*N$O#J#2GIwN_duWG-czSOw71Wc*h
z_tcczz4(7`_!o5WJb*6~vyb}0{etVAjqNj9x`!%iGdEU;a)H;~JsO16#K)R$1MHY{
zo^6PrgJdSeZCdN#ai885$_z7jE2upM3d4lmbohH=^mc>)=Wi2jR35#Rue79HJ^2cY
z4Sv<q=T6|(+3x=Tt4>#+%N!s9obbib&flL4$P1~1Q_|5=J>wSKg$6^refaYpBk#de
z#R|5Hyb^z~uVOD>pPBP)F4(SCB<o@NzQ>jPPG!oM#5_MPp#l%whRPMI=wo_1E^1Rz
z5b4K;6Hk-XPhJs)*M<SFJ*j!dk}j~S8e>n02i1j?S;p@tfPqqqlX`v9AV~Z;fVb@M
zF_<%>8Ph5%iGA)+jl#|tD#KaW^W@Uwy`T3#wGLfl6d?*`yruIxy49k+%?n0f1n>h{
zPP*J#XG-GtJ<YyR)z#L2Ci#xEdsIA*G$NmD7llrAbb0);dfjZp6>$`~zs`w#(O6yc
z63!#e2Hk?ghNFL%uYuAVYh~+)mIZt`Mi<6HWVS*17X{=%VG}#OqxJSwu-UKQ?H9i8
zo?+sz0>JV2iuCu#71hvL6KMcZJNCRwWL);CS&NibpI&SSz9IAV4?eixEr=V5koIYE
zYg9eXiZP5<?{DQ>5xwX37GJnqO}*2Vm9G4%I(93^Yr_(py0*A6kDhOR{_JA^IFl1b
z#tu}F-uE>O0|M%1FqKxQGjQa#l$Y}hq>DaO9tyJIJ8SeeI;&fZJx-#}`dI_L+LT_a
z*L7CkpoL$0;w_U;6|t;pt|5WKtm-6Kp3I@aw+*fn*?}sz*9nQ%i(2saBwB?Ws(;ES
zoDD0NPO6TUV4RU_>0sH6y`)Y$=ZcM)Y`X5pAN?Luu7gkXy}I0IBE4Lu&8Jc|Gw)P=
z?{+n_M_1REl!7CA-z3e4E{kO&E=T#YM0%Qkr*%U1e&kShLKrom%jSIIe}cr-88_Dd
z|J>ZFx?Dx3k9@}?$}G$EsO(>c-}TuL*}N)J`^^k6GErMv9AD=&3_PsFTA#MIRAR`b
zZZM9>Y4|?gz#rq*f>cLRU|4{?Lo@?lG1$8>A<xA2FWJ>;(PZnWIWV$bGpz~hmHg^w
zbOee-lmjD{@Nh#<vE9YM(*W1T^`}f!$Ka2N(ZKyzGA%-s5C9T_%a2K`D(`my5Ba@o
zH4PhrE{!FNW?pA;REA>!><ePq4Xs=kX;DQ>2IH4lNRPSwhKTv9ox5NKH;dCu^mUQQ
zj;NYr&Ex%31)$KX950g0@h>)YPxi|)Sok$1WF9OaWb_6JJ#k=VX9}&^<{6r%ExdSR
zc2mMXNwZbi-??al7l6_;+qm1zr;-%aA5{Q<8YhuCKgsW`svkG`rOM_PECeAqg>GIE
z+qLLt*_(z5Q6+pBP2$wBUg_MmzS*VI){-v6+2I7)J&0{Nf%vo^+23#pr>B=<cB7LY
zVWq<tJ425sA@hLualE7F*(uU;k~YA07*VeWt~a+-@KDRw!K42Ng4fT~?y;@ACnDbo
zRsXI&L2#Cb^jcnBqFZ21<eYVF|0${$!<o>J^J}zTcZCg0TbUIQboLc$>lmmsN>hmk
z-|wBI2ju%62py?&1*aPY3P>wzKrY0a6|Tv`C9gol2spkKsCa~=xB`bG#>aHZK;QV+
zFk-@8ChD?~E^-F4N1M<?Q26?bYx5PFYd!k`B~2SUi}J4sjYvk(*fkgVwR)THtc^T#
zgbrO-Yw|LGdxW1wyQ&%cSe11^#2mP|c2<nYRZb;e%CQbp68s?+B?>-_ez<tm>c-X^
zBtzDzf}3Zg2K!+#+MVo-)T<L0L>N{>{Y}Q{DQy=i%q9IUd87bxm5T8uu^Uaelj-%t
z!7UwgYYVcWBN*lkmP%=JQ{Nd}4Fvi%1uQ&~KEEZ`%aK%n#oyvKgu;QVIe(rgwX(M5
zXp~CtOfCh?i+}Q$?rJ?QYHlI9X!p@0wfhLmqw%c`9K7kJjuv+c5`z){!-qyB<B`K=
z^`<lcabSuVbtBok^_owNS-K;t5Q1o>Eq>@sJ`eFP=vqdUy8^TP4FQi&tIU5v=D)=-
z^x7%OJRg85yoHuEfH^CYk>{0r%g6+hrD3IFF3be#;-WDX&F=w5Ycp5rBDrplC2Tbe
zjn(h^Xav`BD6L>-WO4UwJ_mmStjO(bATCcB^YdktqVAp8adFw8f-FY!-fVgs-Fo&z
zXSW?26u0}H+mAk65gEj}fORqgLAL!YfKXd3#-wu!_jwg@NN3Bq3AKK28y)olzg*53
zBMJ<z)V+&2Izf%xW^zCnLQmn?+@c^ySgpZnJaY#qN@3%G2<Mn3Vd1sUvzT8&WNodu
zSqsasg_)BK>V@8EY)CMhOiAS@@N`u#<{%^HLhQ?aa?TlJdXs1X^vQ6^2EM?*xHOPq
z<2{5$p}v5=m`nYOzdu6%Z{KVlAoO_b?nerPC!+zs>s&^MhX1gBX2qK`t5BJC$>)%g
z{s$dtz1S9DLV8TEC}9M9346lihKI}y)kSb=mdB{P6!sy)!xbl`o>rGuuemdMr6i=x
zp(9%-CoSI9P{ueZ(mqbF08buCX_2ec{j4j1m#tF=EnA02X(s3=9?h4R9JD<*q>nLV
z#sg1EaT9Cl#!J|Q;UKLfKT#6^EaUk$P?FRyIWt@ipZ9>(0DGuS+dX`&+1s1|sBJt|
z=E0o4wdoD>&e>@oXoT-&Q&%Ar6j$>dFWl_09T2vz;ZOCbkalveA@~Zj;pfE+%Naid
z$r8@NCY%)}ErOt6boQ-IYa={`z%aJX;^wiqC&0i43xe{1$oR${;Lmu~m=}T~=D6g{
z=6mWxjs&N6&KA7^AlTL7GFnXyVY-?3v*s&}Y}iDyTZx-XHA7qM3{5MOkqY2Ej0OrV
z(Fo>T3P10n0uqZq8L*z|by)4FdUcs4Ujb@Kvd|U(qfMV^i>W185y~sHp2Lbz^~Twy
zqt8neR^voO^A^aIQQlc!WsY^@g8<@Et#4-Y;*C?V9OG$@(0#~Gp4X|+KKh%t3+Q2+
zY<>3gXsq3~1BUAY{TLARLs8v|R^XeTVzA*8^TR#oqk=Y2*!D`}MI8c_Pa(Uhbbsnw
zMxXuq!h$@9O-^>3HAn$Fk|-e-jHHA|;I2`|xrkv|!C`JGtlSerlA@3H37An=o!y%8
zK-n--A$)Hxt{S%Xg|WM}befrekq1DwKJ9;nTzs$T+koOYw5DR-$I5r8P_iN!*(CLN
zeE39LPL(XZ$&(-Whrj$0+$=Y!ndmMUN^oKDCI0~SQS2q}3r)q3Ff-3GRo3B57q0u`
z<%NbSPfI*iZmZ;N-Yf<8!Z-o3Vs1m4&a2O56SU8yei6z7-&-T<x-18VT8=230H(H&
z(YBz^m(Z`Qo*BCb>5?2PX8)|C*hiKzKrGxTvbpLWXo}X4>ST4u6}dUbS~AW|JP@E;
ze_{&-+LO@uR2RyVF&3m8T&rs|U%ujbi8URIL>h8673bX|EMAuXw=Q%*rW=aNLvhLg
z@&AqupZBIyDQj>@iz|873H8!ax=#iP-F#_#y#b|s38b5E*El9hV71Vj)tcz$`lgO1
z5Xk;Q3Y=s|=C9h7M6DTECiZ8{)39||3I@3X$&^<qvjVKJJgZ1Bb(InAJF}I!J=8c<
zEyUpI55L7DmJjiJV!nF0P@+6uX8o*>*ntD$+O9odJEabLNb_W4uG<;rOLgQ#cz@~O
z=p=*Amp2L8CM44uzzoS18gqOo>hu`9)5i0?dLj$66Jq031b+?;3??Tg6=jgY^D<Iw
z$rTBpv*q4M`790{U(dd;31D5J(LXsu*-ems7~MD___mkKSm*bMP+v=9e4d4X#o%t2
zikJ?&G*qZfW^C^3ZLPM90a9|{pH{V>)eJYojKjCp2ZW5~?VxMM<V{&z)SWIUS0;xs
zj%^7^H{4uo93<zk{(QNAsW%+eVF*J5;65y=6gf~XunD*H5{uw#i0{-ixQ({>EOY_q
zBMAQy)wqa;tPY;9s|rD=WJjL?_W-l~l-3Jam4T+(=N?bl@W}gc>Bz2}wXIOw7=oc!
z<$8Roy@1RAKqV$TR>D`Am(xy1m4FwIkd$RDo=rZo$EJ@{MfRVs+9(v|h|T>|4VZsD
z#hba)7R%keEIjX1FDRWdnB5Fc!-Y}7pfk~t?}?8t&+{cJ(dTs(dx1nIy989?RHhhd
zwJ{J$j<uD-hdz-aGIcO}$(U|_InI1tuwc?#K-C@E222tnm+n7^$op_j!1;n;4+Kgh
z6)rwMy<^5|75pd;jNl3FISw?M)CQ=IvpS<|I@np|Ptp!;t%ZDefpx!JVIp{g`0aOZ
zO`p8jNP_Lg>=RQox(g<Qe0@i3+5BEaoLeU#mEi`gAuGv1(tvgkyjIPhN^e-Y!cTxB
z=DU2c@RE4{`J!n_1X6l1p|099P62s6am=aTSFmXP$>1{_O(df&^f^$f2e;$yEzOq~
z_AxsOi0KmRCy<<?_7h@~kYL0lBBy$bB4&wqu&jaEV+)XDnFb+fAOG~ZzdP%G>lY>p
zI<mHc=GonWzB=rNXhm2<R_eNM<=wJ0cLU|+f=%y8f-n7)Gc_T)cm5P>7NN_6BLF(a
zppUjXFv(}vhc)8=z3-=Q@Lix^<kk5z>;$0^FTGS>p78CM(z0mUdMq00RPNP5YEVhq
zf|oU7pzJ$tg}wpSh{o>iKPVDv{8#>D(jlSd^m8FX4LMh&fyd94iGqXXhh5M8>)UnO
z;K7V3Qug{rZMvCU(jz+SsG9-%S1b6+de%lLR%M@J)yXc?Llo;ZO@eEKdqG$jGK8k3
z!<a?$bCh`+7~M6Fsl~;SMnV9OOMSg$LDzJY+Y9@ltvY^bYh*U=S$4@PD+L~g(8vp0
z_*^!Po&N^h#qkttA7NjIY^QZK+Jka$U1?612*Em@f4JWc3c>Mm*mxle@xYXl;%z_o
zQ^GmuTox>u3io^_@<cX#VNy^BLt@yTTz;Ij=w>c&0^8>yY!1AY5_(YaV3zrntlX#P
z;FnX&saaC<O{5^UgOLK7E|TRJ1${tCG`#{VsIFQ?Pp2BP<us1mJ^RWpYKK^O`gEQO
zH1K<o%pp1P<CS}pV#Zf<6VWrkRN%7)3)K)S*o79`t?uWt0B1wOeyRP#9jNYz!>pIS
zS6mpOQQ@i=q*Get2P&){BGG6I*=F<s3#{_e1$LA1EZi(SbHWfBIENKTzX>~?DA;rm
z4XCofjqH_xiGsbQ)ObN}9pJFq7GQ{vrBg=C35*piU!ImBlW#{e{o>72$g=x?>pqX-
zf&)O_E{OWf%cB6L@f&5OlbJ3`Wu=$e+))CbxspKI4`rLrc19`EjZU_ztpVW$XDD$|
z!seFZ*aDJFX9nIk3k|My0=%4XNV~UM5buHlFTO^AxDzn}nyeit)9Fm3<+DKHHtZi<
zdHR!RNB-2FqdVT+KQ^JNsIEK#yDC@)W@N`z7~&>ehH#d;56tjkjkaEE2jE$A!ye-t
zN?vf?O)pZab+h($LSHV1YG&cSH}yCQwM6%x?p-?FvSUbaUYfW2FA}9zIU+rmWoybz
zPNXbW0REN4@MhNY0(sdIy(s*KS14PoK=X}El<r*WOQ|LqWnR|lvtu@~8x>Jy?81Jt
zcu^PT_Em&0Q+$rq0mvrvDL+zbz$%f{z<mYI`How|!0ukD@x4^Lna->)U)521J}7<l
zR{cm$iGIxLxm!4lo=4hc+QQ6p!AWPf*!swXOW-=)8_*A!cjR&Oik{s(+05-)(LWA|
z3)K`K|2fA?NR{YI*Ygp4(Wmffey##dhJB4nUk{t5ceoz{0e3V{Z)@R@JJ^EB)>B!I
zn0MZIhK8g7MWM)}TG^kYD1JX%^5*sfj8D7+wsxdO7pHI(_gvBvrc{2hB<k;D!SA+9
zl@JcD3)4OOZhk>L<vUP+9$4r*(2Hm7tHBxz?5JFvs>ah0$ghGB4lT2-?1P1|d&$(L
zots|$dEDU<NW%^=(=dx$b+X1uyJjM&J|b_Hzx{&|-u1>lLk%&An`2Tf?s-}ZzLB-w
zGdHGJ>deWvFVvM^RW)0U&Wc2}F4?uty`&sgE$2m)SMg4m9l#NoIy`<%N>?<fZ85l3
zGh41kamnNQ-ng4S@X@vU8;uE4i>e~8J$~ub)#j<_8%7=Y^$>>ClHa1LA1UKjJ>sSm
z?fr16BC}nVOmSVlc!O>$zW{mZipD4<{S3sb3eka`n^4j2<+|>)@<s@I?@*e-z~C2E
zaa@2HpP*t8${2^nqIa{jQnI4l)wMF~nj15H70sLB5RifpQ181vt5G}2Yq?e`;^G_2
z$U>3+%b6nS%`{!S7Z;ET$t2l?jARU`68AFk|B>RJT2lC&a3No5;(Z1Pfpb<$2cw&t
zwy2?PqS02fsfbMFp`TD6Yo(~vJ`-)^pn6h`moS$1yQb_gR(Hg^y_d0#|1}9-F7kWi
zhBoce$-%yQH3klalJpprSTqxGM$WEHbL;Z)M3}3aE{=Vj^8TQMYuE0ixQYub4LS1@
zPR4~I+Shtz=8+H66Cbld$|qty4pPKS?8Vzjp-4zu%M#Zo(~H3XzSfPH1+*eyPqW^@
zm*Z9<@9cd%7Qra5cWJl{il#-d8%)?AN_L+p5N;~GFhc8xRC>B$p47GLD7`FGGGi3B
z({UZtOXJ@4NcF=FjOjE}8-};&h|<~ZcbQc%)gGINt3(3tt)0m^^!TTiV5DWd09eo!
z3I?ov)DLe|Xx1Z?O$NEd(f_grKGANcTMFzhCj_D=F$%^Qjs2bd9rI!b&v~HVyZ54_
z)aMQUwD9(;0|2_QjR^9_XOhQVWmCC;<OxC%*OIx;)M-5Qf*%uBybs(dKKf*N3@Qjt
z)5Dofu=_ujlDa}GQzJ$WUx@?aBPQ<vdT|NEf=C~pfjXz7zZC4S{ICQ(?n}Yl-1g=J
zCfXtBF%ENKiX^@e$*sI!M8;lF3OIl@Ym2~(_rFp_Ov?X%C~w05|9YYGzxV3av%M%p
z3d3>c;yrYpp3}|vAnytS_M9}sK$sth6Z)V{A9=t#9nD+UkEUqrCN^06fY`d?_;0c*
zZ%H1=aH;cSrm^OQBsnC8(hiiS07;JF7oIiFkslq1Q5FzHL5ZYgdhYLU;M|!>k;KpC
zwHYqaZ@?iWIO@V9;N*%j;o|3DyuPcOn<4&qHytX6OK|4UPOX1K^Y;VC=LyM#1txJv
z9qs}3e=0TKhCo!UD8>`0IeE=nb`(zla^xEY+;T;&UX(~mJ?#_XKko6%5Jwqb8@dp%
zEUtM5GcPa&WPqOz&nIf+QTo#r%zkU8v$uJ=U<?auac1y{_6ur-$YaYv#Hw)aJ|_}e
zi}Js_e?BQpVthdRx}nar)M$CrGD9M18TYOFkj!c(wjnv-Rm@18ghQ7+j&FZR3%T+|
zFn~+p_VK`s=&}(k?7yNE#zyNVCZ0#qM-6rduU1eHQmy*udS*k^YH*9zKpZ*OfU0)1
z-%4FkhSK8v-N7<T6Gt&ewP8@|Y?(Mvy$3N0=8ia*@{~u_`U@K@HiVR5tX#2o5JwWl
zA#-aVt=NG-)CjL18)nx?N<L>($gPdP9->Oi{m3CqoRwOMzP)7#QSVL9v27#))A;hi
zO@QoG+7H8YsWTZ3Gcn8j?f9Jj5{Ub1kk?ubIt_8-u7<%`+|$5qNv;7h?<0s@tE9JV
zly}N<ox3D^eBD5c47g85BJO5P@a)}EY;dJ?oedhklW9LG@)H^5CGm7(n{r>C^?Sbe
z<7Zk78HSLtESMtl+Z?}_<V!~~vc-2M>o9rJ-1C%T_f}?~c_xY@B)TDfT@OGc8Qd}X
zZR7tMU=&sNHo0;fs>FnlrX{wO_<75@j3JMelSY_1eV8F!57VtskA?M-=2Du{gKYMg
z?*<Ho<^)SIsl(p1-V=f{*Nz9Tqaxl6%BP?2UavV(lX9YPVylsh_~+4Y!(Rt~0xOg}
zXcG9CkO}I{V+9ddU&&&-+l^-3bfL9d|C6Tv$*(+^_3;qKETaY<up_+IQ_JCML!?eZ
zQYQshEQoHyEsPFulz$H&c`ZMXN?x2^Z}&{ufrQ+XxxVIoKTfoD=uWBoaob)C#cd2D
z7e=WSj@1L+_y$d;w|}80WNE*i;k^`<6939?zMZ!JjY1Y*=O`wk1BiZnKT`2S0IeIA
zrLiEZ5ttF9buFvW8e+~!qw?EMrJ-m({DK&AQG$-<HND6`?GXK%EGt_6RxDs97vt(t
z<<oxQflZj>)ybuSvf9OoPY(Cnf0-K%ZB3o%<9I*6UmP-ImWh5?U>fBQW~gltZbb2*
zQu-%$+=Y1T-%JroDPf$Rg;n63lAjwpN@)~(yQu*c&q8*7RzoHWm!y?HkB;d=QjPf}
z;GP-rl152=N}x()&cUlM6^K@`qfm)hq3ssYc~`*L`t8Aa{^e5_jz*KnS^}Z+_R@Wx
zQ>Yy8SO-@a3fv^?&>>+PeyuL@S)-cL8G$OXbz@iqmQ=}sdpo3MhPoBjagC)}>^t?Z
zyLrMi#r>)mdDWPjF8BMtU01Jv-l9%Xe$ECWJLaSrNWMh}%xae@SBO^Np&%a*EwR9o
zl=5-vF0QVWjxx(r9PW6Py1(a>n-OTyn*e^VecG^z-o7m=+amV@W;u=YFdegsJciKk
zqmIbv3*5O_G5?bs0Fva=iXv*<dwIv_kv@E@w7yT^e%D9W+bccp42{>kIKLAzKMI-5
z#==#GLVV_GYdCRHs9KGys?@E4m~}3ODr@E%C<=p{kVJLD4H>Q_oAZm#yYqW2Et@qh
z;i?V}d#r35_8ZiJDA34o1)wxEzjQ^jpJE7Bdo=$|9GTgM?FrFJjW!^8OW~%mC&!B1
zR+6mFyHD_U_4zinPrN%g?*%lo-?Rs##l0Xz)=Cv^?D}g!>8>>}vi(O$;s#?ROq=9=
zoOFcY^03&mZW{-ZsFCxlwJ4@|u0a?tQi0Ikb!K<3dK&Bqfabe|sk^ro?<&|Ha3YLQ
z$l6}1f4y;W9(kD!n!?Z*D#IO-|Hr6FD3WBYx%|2n_`So#!g6~wh=~-(wdh<hwEr>?
z*YLo=z>t<k-E3l*?46z<FbnBmx51ls#3)TBu#q~3?~p=(%0vx(2olfH7m(h1+Cq#O
zIb)SSY4Rr~2!ECZQbQ1AVP;SO**Q!sIEY=JKM#7b&TM=ls1l9$00Y0R_NzhgfO+de
znZm&lTX`=$5cqN`G%#mkuxfm^(OD<&&9&v5Y|d4cdQ(yUepiIEAUm8WA<ccWYCJQ^
zNn)0(Broq<1jMLjU>4)X&>|k-8=69=%@a%Vyv#AD{^hF^0PV+wX9A<wtbl@q?|~?>
zyGIje)UKI7UCq~_B7X5QGFx*#5Rs;40grS1#_{L<D!qz)RN2Me#o&C%TcMAn1Hvvu
zJXFO-yh4#yzs1d#a$p%~+7H05-6~C}yVEN^4uDtA2m5wcaww6E_hm>~-85T>!IM*k
z7wFZni_Xu9ThR+p3j3MSgM$_|H`t~draG|RDOdw7A^63orZlshBC>|@<@2xD9QD2L
zjv7GN<SG@7^fxMGB##Q}PuG@`!A^~(5sdOVair}fM1>O)@pj;m@o^mCvL{PSyV<)f
zuc5^R{#=NaFk46`@Baf@L^HICWWro(*UgpU{69jDGF!H?KnqZEuP}+q+UW}(=~9D;
z_g)(#uSD}?3{XRB1Nm7ug@*SHbT~qm#RgA^=P_J8f-r*cK1r87Fb;Rh+>F>%S?|{2
zF6Wz#^*7@n!h8l19Ku`oEDoK$B-HfZ$$6IA7Rh&@Rtb+OFzX0NYE;9ZE+`Pp4rp_>
zZMwi}9<MH4oms=Gs~Or5r}|{<MilHbg439<$_3*2*0!7doKr)Xm(E9(xo(w|#ocUK
zYJ2$E=r_H_Q3rkUWVra7z-n_e+O`$qLz9;J%YAgTTcom`^oZia-Z2};b470X@Jh3l
zju^ELmp4$s|5SGJd*nT!eQnG8+U>$u3=ma`^8ITCYg*I1$s_gYB8Ep9xIi{69u4=R
zMroBE!i05VG2Iwa=|UQNhjZNbO=VQM5V7pq1Zf|G$WoX@kiI&BIy#i;(E&defam3l
zRT0PxZGqk(0x48O6J02+pwwV(vjuR5OVHZmMZ^zzlc3$0uGUljO_v)p0hm}Xj-&PH
zoOPwH0=|E1_QCBCX!0JgKf0v%IPDVw!fN2Tm)e0^v_+;=GYNKEirrNCP_Z<a(0WuJ
z_CkO%7NO)HaMxeOK3iY)l(e<d5}Rg~do*lXC<>@>Pp((oD(ohWQiIBQzyk5EX`$_z
z0r2Z94lx_o{KNYy<ROjeHv_@LM0+c?NJ$b3JF*lWmFrnjw8T+8XP40C8^?=Wn<1K{
z0Vf)a>QDE8|B9{&DBz$ukB`;wxo><>mZcBo3QPe?I$BOJ0LyO-+^dEFBS750kfoo5
zCrJ#-l4B1XylY8Q!0J3*6(;G@^0jeb*XFtjh0R6ZiOKebZEAXF;r!!-FQxb^Mf0b|
z+?c>#)-3rE=B8gCf@w7s(Xx~5^96Oo>n$xcRPo^S%6XgSSH?)Q6LbSjn`k8VV+c~{
zWY7dZc&kcZ3dPvzVr;W=-JI-WitfdMOUTJ)>>#Y9sHXS7$G`n)Cc5NJ+;K`B3-$N4
zZ}Ka36M`)}$gWGIB436>&iRsxPkLRUuhLnhX@<@$f#GBp&2czoG*`dA-4*nQbT|TL
zd9~BlWnt1$Pk#*gW4}FehMfR)Oj4jy@s0EXg-!D?xuhwA124GkN1OQP#l^Aar8;g?
z$a2EK=K3r&6`%Y_gRQa(K<5{15A{2ETZ0cqMWJMz#W{aP!DNI!pU1U!(bEJZgo#~*
zm+Pd^QR^V+f@Ylc_4l-~$bb%(am|&b7fOeJO=|yiz@!GTOo%`!omk=2mPyx}-athp
z{AD43YhThG7GUmu=Ew0x!O@zD#qjMKgOL<5k)$8Tq`IvpL^Th4dhTJJd2^`0hNObd
z0(c#w)B1fx?Q<b*3Ik-2GvGxQ)`wT8?C%C@rU@eAJvy-GeY3++fTIbK05t|0L%I(O
zxMD$Yw7b#nL%)%{nGYtRPQiV*XV`StwQf3LohnzX<-np6Bl}I|YT<3B+VO_DB$i5M
zgabfjLO3e9ClC6_6jw*sE}U=wM^{M1KcOly{X&+qv&;Q911<DcwYQ_=mQt6$Imtit
zU$84zA34VZZNjv@8wbj{JM+lG)<8r!lFw`TO@Q~#cY31dE5B$dl<QZ-3m2;i7UZC7
zK$#Fe#hSS@N7QIua;sz`WQ&A0^FI8}ALoXp-e>q-*Trjgc?WbMJ8OAg4_T_J)Rp0h
zh|r&N<IELF+jrl{yr=)t#aLqOr4?D=s+%lUxXPtZcVVgprI<)$zlg-QvacTzaODS?
z{!Y|zUKzJ`)=rVHw;~J^fNLpFSQmWu=k3%2?9f3A&E68k@FVX~4xnd(6Y?({@4nDI
ztrzwE;Z0ST;H4W28BJ+Mx`(t33M@?Q&ym)!PlKnk1|L8~1{7KGF$RKMEkWrrCCGFI
zh^%p_8lm>CmrH{HRfu#mNss=TELKm^eo{E6gbh%{ryo3H`8OPv0S#l)NGN^&GZul;
z0fjW>4k!<0oXW*~oN9&Xw?g*hWjtR81Lsz-LY3z66?FlI==1TunV>}JD)^y_c&5VN
z9-A8wz7gr}Ph?r+9^J)~)%<TPr3cfgrg^U}ZdqnLzA-<kf?%^Pm4Esv=uo_OK7V?q
zl6B%|!WV2WqWgem=*}b{(~?a|rM%qqm2yXvu40r8b?&4t)lXU*gG}SM@JI4>Ma_!2
zHcVc_2-J0B`gL$F1w<=Ckmu6|v?!5{S5f=yoWx={qHj*79a#l@gPbIM5=J#2BM^O%
z!)_OhiU)b9nj@1Q5~dlgaDY-M8vX|jiOJ;-HWNk@Mq0%9qb0qdoO&6eu_dLB&ydq+
zAe><Xshq#4j~KPSW%cPLfL!9qky&7AFj%<~eX&EVB;uGP#~v<6CPawmt>jeCza7ax
zAjsFs+J9Jl{*c^Apz|OJ+P61e4p_J4?h2W#%8iTaZCtq<@E@wIxBPBH*b@RVJCc>k
z2)97d8P^;8y!WY!T9mttZ143Tw<-1+lIwJg>K0c|WHH5+ycaIgo3Gncu+-N*eHeI!
z<&sXa!wDE_5(vF&eStvGY^LZ&g@HZ#6_dlZPERYdRjS!5NIPp4S!e$a-uwJvUs95O
z{>uoajNg5hy#G2$nAXe_;lEKWI_sWEiXk^U*l(iXk{%MEJB2O^)%PR+0Ih$zqMiXU
z>Bb(rO!~ekdT6bzDb+U$28QP~%43k~j631TsQO@(8MML&4a05Hp?pV^g0o8!Wl2hz
z9%<W~W7S={9>0t$;#Vx@twZl3T`G4@44z%6z9d|R7You$JZ6*wu8I$4!?vzS2bf?0
zaS-@Ah_gAv?U7N{yT$D`_njIA&S34(tUb6}lghtlX5U+Cpun<t_`X&Yu%l4f(2`@o
zyk`P9y<*}C8-<6e5#A-bwZN)AX?}@UXpM(iQ^ZiTp#;Xd4WeH-g@lfxnLiF>ivuQ?
z&9C`C?=eH?3`vZYm+R^4jwl#R99nj@a4EWocfMfCN>uR7>wt+>)U=Brk*u;Fmb2rb
z$aH;R^ynGg?B!yim*o1H*82>Hi(=hP?9^rrp*hQZV(w=IgzQS=18JAN3|Q7$ZS0dj
zmb9v)lfhx)AY<s(*POeahS?j7feLm=@zl`&;4y-Iwo4GSwYzuJ@c}vzn@yy$el+4d
zhRT;-8?6iR93FK4<|T^gbc2qapft<PgPQEml^^jSy<-KiMVbKqI|U9?AwcaHcZt}2
z0GeLw2ukscV*0nY2dF8Xp~49h@c4`0cR^;Lw1=+>G&JC3%?iSaYKCsLe0XZ0ve+4K
z{R^iwiac#op;3g=ze%7aniZd8_%(mihf_<VJfqM(r)DJau>ZIsu+*ze*9j)fdpV%p
zItbe@2|+2jm1CQC4a9c@0`j$uuHbnztdU1i_q@+a<9Tr;I6SJ@FA$XdUQ}xxt`1HW
zW0H$fi5ZX&<g~pCNR0CV`QzO7YpwHxhV+mbf`UytP?T}iCHSIWNvh%e<IOR_On{m;
z;%b$|t-=1%hnR{OfBf^@X1q@<b`g@r-bj&RE67d=&R^lI8%}j%j-am0L^3TOp!jVl
z$6EU^EgO+`kzDu`I&T4qnmHoXdDJ{i6`t+mVx#H-h;OTvik=%SVoA_Z*lOVm#jc+;
zVd`pTMgsE4v1~MBnI!9ps}wa#iSigDZKDld$!K&YLQS?a{Q@h9#cE$OupizW!Q-J>
zi@p+a3bUy7G{nP_-Y^Yv)Z+E$-uvjgcm^=fCdpVGIVg}6dJ}(WBq!QyTZW0(Djy>&
zVSXBw%VpCNN&(QaQsH>4iBNEG#OJ`#$@fk<_?7EPd>khk<uEv^1?tYDZk~$O_B^>b
z-#uH5g&64T+{<8d0=H=+&l{RsIdax0%nSD$EGksf3#@P^REPz4>td50goB>{l!`_5
zZHW;vLjV{h-_SF9mUBFXK+R%PNqrKsBeU&YoD_5`f<fA9IgG0e)ylM<vlKaEsoINT
zzDTo)@b<(L#frp_84{Hws(n{*+vug3sb0HE?*V-MNw;oo+hEyrb<?dGo5j}el!^Fl
z<3L9ooJuHl>I<IF9aLsHeELI(<BRMII$~jl&$C^+BS;0Js9RPJDez)?h`Yg0hu*Ee
z$2^%DgUZ39smkN1_<^iaYU#=s9kfFrx!8{Qtax2rQ(l7Du3=e2VBfiDK;Q+%^Ra;#
zu9Viu*-4Nm={m<;TbVQ-k&{ajchW@f0m!o8f__2w5rY81<kSO+51vgjN(~LkADBV&
zNl_^Fl5EPqbHtb)N8-Alg?E|e5G_7uieOtnfptRha(ZST6O#rp;tY4gFY*ycJu;%8
z5Ka#6*By@r)!zA^;eAkja1X`NaA&=4EE%3S>}EHoq$K2^AJ0EseDxVJhw)K%u0_0y
zGloONU^7;~VZ1@01(f;D0VgWBF04lV+W(onXxbp2+<TD{PSkynCcjT+nC%{&|K(Ug
z{Om9?>$G`uB5FKTkEc+D79qGP+Eiu{$CeRx0#%HCjpB{xLadJHm%rVs9NJ9H__pRJ
z6vD-_CSX7^;9`4OeH*Z@GOLH0d-dbEMurbbqPtd`eJthY8no@JxRO?eQ!W-pX75x7
zn<!*EC{hy@s4B~w;9xxzoU~yit6hPZ7t@n<W*p*D(PE!*1(08TTTq-jW7s8=;&|ID
z@}iwsm`}nE^1lXdmzE+9rvMI<ouf8XRbkfV2_DJ#zQW^w;;SSAR-K1DxnHbxIGv36
zYVU*l9&CCsvHL=BPLvPYNc#P^#vOR?)&SD=E{q7{JN($_$B6%^3yFM{vY>97n<Vk%
zL<sJ5quFWdL?h-hs?~&z@V6B*((iwu$*Y?L2NP`FYat%aaNGG%NEt<@TJjDQjoFh2
z_bm5R;lhF=47PT#?61~go|*Fa!OVsV#!tf)ZRcAN`+ir~5M~jm!sfOmrF(W%IIMPH
z=;$HR9kI1O_drXKgj7XiZF5VhaZBaz%kt8<R4Uo%YSCTTXjCz`%=P8T8+Jr_Ve>u$
z2lO;!b6GW(6NMqC{X}R7Fg4RLtm|V94^SL;$j*9z+_E7N9QykZOxEPLvx-ET@753x
z1|~?GHYvmHkbOJbPDlu@pARG^W7hF~N69DdxH${DG}WGfL`IWCdPa>G|1Tl5O2`$f
zzTd=8G{qC|`G35MQGUjq_!;WQ$<5EtDBs*vM{MMdG$d`VYc;s$KsP~c0}l85J9h=`
z69+r$x~_+JM2nWo{cqGrJis9qm`c$eo;ILu7e7`5D$rN&6NWlT*BWGS(JH%(t;uN!
z@XowZ)tK=qq|+%^F%bOepz&;cLsL>3>^{m`Peh};sv<K+ihJTQv&}C={?N-)#n5mB
zl<eW_g<&(TKX)2|0ir7JADk|~cuTP3U*3NGMmsm|SSZ$Ckz@}09PpKf_k<@5TWSIH
znR4T*t7V1M4bM8VhzCDuK%zT&lzOI{V}?-9Bd|4=w<qGrn{?=dvpCgnWuW#I4Y=my
z5yu%TncyXl*E*tsm!9kf-^rrvp)37%8TE;x^l{e!_*xnO?g95;YH*?|?~=3F<>p`l
zdrE@Ul&rG3H<Nyp+H-mntz6kKr~BHC^2d2HU&SVnp(1+e>&zBlMB34pH26U$Cze~$
z>T`FiNrt}TWEs>N4ucoGvDOnX#1RC<$or;qn@UP$X*K~hs2y&Qs>1_F=d$1?wDVN0
zcSQnW3m@V3*S3h7i?EH4Wdra|0MWU*nCjCmZ4{X4d%oKQirPrrQu#=PaWsPL*MC*0
z2SOQ?qi_HMY!-<DG5hQCY`&xou^AYfVQF-z(w26H?g%`Pb2WFQZ3aL;W>q@mlzkln
z4QZ<O<6`4MHj(aWmzSF?^b-j_@kAkojhB*bj3XonYyzbX!X%Gbuq~&*AgbEFD$Qt<
z)-XxZ{3NugcKbld>UD3P4U?MI>ul*gjd=)H-E6s3)peTMJ0%&R8vnFX>Hh2VDAPpt
z+QOrP&D3}(f1UKy>y0ZZ37$mDH_&0RYL{uxiB!o6YM!PjpP>%Gn{BEr&(9V6q<(p#
zP~m+<g)_CR8y$?2DqG5tL+7=%qRG5?;Ah|Y*z;qT(YBVB;n9!-CYuoPt0Vv<wveVy
z#YT(LFZleeK=u64=$+IwOsG7%a_D*Z!DW!660qRy&{u(XG9TNAb>wAvX$%M#uFULR
zb^+%EmC2hJ9*mo$tA<@hG197$EFx+i^(z$m24+yG2RgSkmc^K~1(15XRueBH-4G+B
z;mru+wiGER*}2})o;OkbRaOh3)wdZxCFR+G3vtYu)5y(-6iOq?^L9`yEAI3$CO{(5
z2FR(TG-6#xIxoa!hBr0=$iRjO32ZzuH67<2gvwI21lcBk{zl$j>Dfi3DV;TU@jT78
z)PdPDBfzQIPtOi$`;8aFYY=d{GRh9qeW<deHH`$sT30y-gWZ78{kVBex(x9WgR8!g
z9{qs51R1H@X$hmFoVCqx@~BVXRH^EH&~mA-amAbG%3j?M+(jGCP`THVl5qqzXVJS=
zOC5pi*gUUO(c+d0CPH4PIAl?OH=Hx&8-D91D340b^Q?V{6=;1`B$}rd$oK<IppF!Q
zEcX#6d()GfG3cId8}&aSGQU-^*0-UK;xrv+27NRz99a0`dPHvQw>nXE3J5Ks??+pr
zktk_ezlZ?B)hQ9H5ax!MPHZL<>*7u|69%$#?;ud4wp$Ml&u~b{c4Mov`3f@&?lfel
z(=#wH!I`TTe)nDP)~RVTdgt|WmcYrdxQj%_?e==Di)VssLg_<2iTp~MFe7EEjJ=~f
z3s7|g4XeVi!N!A)G91?j6;UVii880un#8PcEvr*ZfwAt+{c^A>n1iqNIR?DXzGw>i
z(4Uz;2Q2OUaN(%e9Qm-w8@NB%!+J(kp$9R^)Co^Cyw2@MOzB%;4v6S|wL30lPKV^l
z7;9v`YmaGbbTTv1sJll7GN}CfYQl?CTt{Y!>?#q?w3RSQH0WR=dSQ6feBLYE1JqF&
z?i9zEWJVL64C1B^`d$f>3k4^r9xV7Wv-c2zrNO+<2#Xf*?)t*b(Hrl2TEF|)c$#~}
z2@Tf*Wz|a;pkZ&IBB}S7?PbEC3)wJ`{bNQSOR;yv^##syr)$GTSe8$vOnrJLu9!$F
zen?W<FS}bn(C|ZH%!b$jj)|-kCraJNlTCKYHA=7Lv1|Fj#r}OT1C$07+A`9J=y!q~
zq%)43J@^1iZ!&vWmS0+0KpY#<&S6137vWs`J;8x8#|%_Pvv{jN3=vcezCsc;;4L5J
zExh&U&_3mtoXBp~jE*RxN`G5Ngzr5N@i&aBYU%g;a&q@2HcNw(q%PQAt34kRDnfov
zqN}oOO>OIHpedQvB3dTY;(@T&@j^LbpoDD@YU1EkPF0WnA4wNO*Gm=-AST>tBTvun
zMm`*WW8muB?))kaOnUcb!OrM=StE#h`^|zLIBl7~3wK<_&7u0#?p@yl&gW1{q)-|c
za!525Klpp-JL=WW`uqQ6>`|6WZYJ5V|Iq=*7Fs#vyX<E_c5#wRX&KbP4|ff42O$x8
z?GV-i)X>&SMLjggR6P3)y9f*TJBs7YS=`_ryHVOWILGMSjAs8!Kd`Tpg)Azdr_=^y
z^%OHrJ+1jM<Bld6NX-G&Ti;pVcd-r2XdKPLNQe2#WgEg~Bl<lVRb+jACunjxk|T5W
zk&(9emYK$Sle9IDQ;}J|!^96#|6{5CxxP7PM6SBhY+a{plW39vP^CKGZTMn4-5%;z
z%_t=(lBZ<yE6QNn{9F5Y9_)w<8jIsIl?!@pZXB0Tx#w_m$Q_zypZmNTBD}ual~ck=
zH&Z(y34#B1gcZ7TnbS4dZ}h~F`uSpIpRV#J@EFh#5@YFr-B2{q7ATwHcLqKv?&Dg1
z#3f^=ZFsfIN1jBAhn6rBIlpWqai}mXpR0D?@(MmR1@}5bN?X*nmM0|-%oJl7AOCwh
zr!S5ZKUhV?u~Ry)XuKaM%)e^B0OAlTr_rZiv3fIs>+4?^Wdu}x)v{O7Ivw2hoseh>
zuZMEvIL)T!LFXVJmfU_QE;5J3#UTOiRYb?*&K{6Qz8njDqS2@NRwDMP={?xIApK!p
z*B|=A91ALXt#b3f(Ikh7JhzD_54k)mRZ%PkUtNv({r%$Td>yjp0^l2!^8)E+J5e-t
z1STfi-jPH5R=rmmzr#*1`=|`!{IBZ5#I!WY8&hr=GIa-r<YRK#qsGX&-~O-m=z0Kv
zmm8i^?G_nO_K_=8@R#L>RJlww<?U(`sC5KeV)KBFcNxE@1BTL)?>E{Y4txE|uWD~#
z+fLLDY&1MN7DE3@&Ye}DrOf=$L7Lr2d-{}V59Yd-|H(|(=fj=@HHC=#k@;;{z*0Y%
z0jH*y+JQ5tN7N3Pq9?_UQGc+@$zo1FQ62PMS;$$|Iv*-8@*n})@*GlpvLS7%q>Tve
z8>@N5@URHWwO0^lP=ZzGI;tiwNt_f3?H*ww-c*MoQWpc@su&B{hgD#OS6B>79d>c^
z?{YilOwyqYVz(>!S4!J59=9makB)zYS#{vIihca*zcZF^0@5noKJRNHsmN}-XeA>`
zyJnOi(l@=Qk{t+KUcGBRDhu#%*lueAk`3CUr(Ty8<7KG}#wmz9x7=%o0Ba_UCL)~%
z(%m#)+p~Rls1Y*yOrcqR@_0x9kOs<``FL3l|5K<AQ8BpfxKhxoaBcfG?SKrqf&ZQA
z$C+}mt8Mtdcc3{+VOFH_YYTAl1zNHOta)TKUWL0}LrLjKxBwPu;8;Ni>TN9OO66j?
z%f>B2%I}GI6;LOrdu-X>=ymh+3Ms$cIjS8)t(Mu>Xf9eya+vs=rwm!mU4wH}vsx3w
zb?&VIeqWwdF7Z0Wr?^pZM`(4)Yp74bUo2Wl;>}pK2G{pf^Z7q1k-;lp^6;RQvm(>w
z<ZyHXY_7X0mJw(R{aI_3b_CS6)qrs<c*?-p6WlcQ_wR799mfoz38RJ+hAXJvKGPN9
zCF@@n{USq48RTa(>CdH@EJDah@`n0VVNM#2*>4BL?=+|#qXVYwD&~O<U`@O564!O-
z$Za~hshP2Jaj*Pvm$7R_@U2Jm-+93VJo+(8qT*|6Cnd5%D-#UptP*tZr_~J#J^pu}
zMP!#M+?ci|h>S<$=2*K=%q7XzxfFmcSM)Y9n39sXV7=z`k7y9n{A}6S!!tT5sX!mP
zmjTgo-sx==xttnkbq0Le0&e5R06%pRLm4xPxe-@OjTA0*$OMD#Z$3xRcnY8WAPDxw
zW%D42#oVXgo~fT=CxSmU{V)ABpoh}2{zzt@X{Yy-V&9r1+D~!-8jD}>Ij#N4S;vaA
zjHns^aY32&KXxqDMiHP_N7p8Sa&rk+Wwn%V#2%BhM<Z;WouWq}>wtF=jd3i)i3r9L
zFX3q%a8NZ!9oii(gd`O3P$H)_bo(Dj_JZUeaxv2^CBF0%0;!XUCf_gr$2NW!MK(Xw
zBoLW!tB;c*cam>0Yog9)GysXYvywiHg9In2xb!P4o9-T7#3_#y_u(Z{N5bA!p-YD0
z%+5CGd?0$pKpflZNjDj`4EZc9w<Wn5F%i>WFm~!(4m3EOBF=EC82m;UwK+Th1d%j;
zll~B_fJ7Y2xEfgW18=XLG}e<elNZF9WD=D&c@trHzAjj#S=-JK(iJ_d-JmHk>;W1N
z-2EL#{PdKkOR^?g4SLTP8TVa*0$E=)OxM@j4@4X&m||C9HH=kRh^fVHX}-wA@C!!g
z^r?!FHyqoSaoI$JD;NvSJv;^h8_W`D+5@3c*`X|xb%nps$u6e*@V`zW00ay-3bbz;
zOr|tEyV%^Fa&Aw?d$QypXrnGCK^$t<!_PvY>tDQAS)NmY+hGX+jOIOj;-ZE3p=I;`
zu_fKV!;EB*-iNSro!e*-JZ=Lb4h_O~%bTdMeBZh0)*=%abgXfhNn@oBd`8q14F_yp
zneq$p%@F0<l}yZibwF#teayJ|?pUm#vTnLKuI8KdDvb=GnKwtk8ewrTyfDz}7O>bA
zRJ6aKGBtS!#c`E1uKD4BNpraU+*zsKxK?lhq<GP;2nq}DvQe~ZY^(aC#9a~_XLTFA
z_t_##^+-u}jt?AFbHvLAa6Dht6~kh!47*OA-PEh%c<0LdT^#cReqjA^+PbIo$_Prt
zmU5i)doSN?N?I2R&xqR(!wg(N>mPyu%j*3)Q9Vg%3l%_N3ho$+0o$Lf^suU{OT|Rw
z|7Wb9{(-|^bcX-3+dju;D{0EIa-G8GXkb!R#~8c?=*<0sQ2Ak~8EP!*R$ny(z3o0y
zl|Gx~!igqpx348SJ{U(3^DG<*F6~H)dki|nrc6^pKpj+Yg?g1ipmYCx;g9neG%eFj
zNo1ir^-W%G%KIaYsQdMZEW*PehEo1Ze$qN|;0FjVBsT+Mbhr;yR*rza?NR>fiv&?}
z6*tWqq@|U-uaPU{W*4?lfcD$U=?k+Z<6}$t^{^BWVENMK1L;UzsMLBaL-vFd_H?S{
zU(~Izt0}+KVt>3qkR3(5TgA~sN5XB1PPOYAO`&sZR--(GgRVwlRgYX%yoKDrqSf8_
zA!pdjU=fM$<;CGFy%XIHl|-~AB~n<bF*=FYCRBHI^l%rCdR<MOOKdpzs+jc-B@HJx
zW;5Z)bfrRW00#=Fb?qfQfi|0UM~&696<X*QoCgW0=f$_a>4De3BZbJvCP%}?D9B<e
zCc}8+g(I}yn$Fz$h?|#yB>*3;_eH>Xbi^IsYZp*R8pd0FZhrVQ&pQ9=ubu-?<g30U
z9|GGzT|%s?e7P|&jS1SaPUF*`)7MtY{VNfI{Dd~oRig?yo$?A#FHDK|^Z~K3*1D2X
z<5rr6jR=yrNjGVH^UMa#LrHdWpJUo>@-?j0+$-_66OXJP?w0iLz6kX?-hZtKNcCT|
zXd|pIGs}PL9;i2D`;Cvw@Fg9WPn+u9VY*>`>FHtQDWeYssnt&}19a-=ev%!gjHzq4
zb)6m(ZYD}S!jZLj5pj7s)Pj!grA#jFfP}8!hfMoUIr|fNQTm#n-(2vMyN8ROj594{
z%gB+Yr?jF6WwdIJG^ls_g_`Npmhm-Od*)f<ZN=?+ZZ9kA!b>d-X?c_tAgBbuJy4RA
z6ktQpMb{T3;pWQI4mPjq8*L7+jdutpC{hVGVP`}<s*_onF+waN%SqSJat$6<1qpL~
zt)}v-B4u)@@c-k7FWvcG1QYZH={%+81xJ(o%<Ji@ma>SF)_>)AbPulv#@@T^d@(BG
zFjFhHIJGTNqJ#q2D{{<v^80*Ik+J!a7nH-rO~Y2nFs;AZVw9RCWfN5@u`M_73Bs=Y
zi{-E`sl#EG2|0$_KCO99RI;Q0-)+NPF2@J1*um(IyPvR_?~6ArR>n8Kzf+DcB_^Yl
zIDMyPPc>v@?oSOY3_g+v{`Xha23N#c2w$V`l~d6htQyvgO$6wYc(4d$p@?Rr5jTH|
zy4ig)jHvx7T{;(u4c*2F6C5t!YI)ct#I;Z7nZAw($|>TMr9UkWl9QNBv4U6fsfNtE
zN4m8PZ7>E{uhz?JlN^1%&a5;Us>=^roYPz>cQJb9BjFVTRIpibye`0yLVUhS7;E9u
z1}ru!h1D?+DELua0ubJbcXK{aY%Hp|qT{=+M$Pj~e;z0@NjBZ~t*pSV(bqhyxW-Ti
zn&`EJ>NDo1zrw=-cFL*tHT|e92Bc6D^DYY7ncL9C{hV_#lQN*cDRcc8m5IbFZQE3z
zz@G>pJyMbAJbQ6a5M!$b_$Qu36d~J<oUmMa>T!Or=x^OnlP9H^4cUQ%*SSVP;&coe
zeq!`5i;B$~Ffc133jZt`@h}ywsOavPy*}vF^78=!Jd_h2VY^^~jw2i=`zJaRgOMCt
z@z{Nmthk~MX;x#oCpTB$A5=UchO>%%Zz^;~Rrs-EN*%goxp*cVVL;1}82^ni^+PoW
z8f-0SPk5}sWW#@^OGFTwf3f-s3#+<}Ep8yoZ(2|Ha6Q6zUe`*w&f*+?V?nsK)S-(c
ze|iumFRScKM=JEN1!ZoUR0eB6z9>6Q(SHZV5g(jiNwBL6&$6O)q(vbpW63xOM_+Kn
zy+Kq%YZ6qjTQ-9omI2rEUhjCXu9X@`hcu?r?b<6%I>mpG=xej)rm$nsPO#G!0taW!
zChn0St7-`J@#f>^O^Q{C9Ze;zuBk5#)-ok5n~8cVCAZ>;q-`SJHHIU^_498jf&&#~
zt|71;oaiI%xGO+MFLA-|)5E|Tk=Bd+GN+-8MeKE)k?PVGXKYvUS<CTTlajF!N&R$O
z+0Zs2F33d5od!m==?x|bNZI0*;ZOI?OWo4|vQO^C<xsz6Ki_1~peX@&iLzJ`1#~Ve
z4cw|G92|lJdlHWd*QCOb=hR_s_(e@Yo2#CkzK=r!8jY{?kQ+f<_i~y}a+<A{9{xyo
zRNq1A`47f0=M)3+<qyd`GCDwfV<L50!-wGN^Ak{Wa5GT|9(|4i$IgQrW}CW|!JYaw
z=19=i*^P(37QecV<{wryW_4?wanlS*1L?8kM6CRpKa7d$hJhD*Rm#Q9?Mw;(SK3L-
z%n%cUAx6ivyx`2(K~8|0@W<i$M@TGSbUu<4A-^4Ay`~s>sgo^a3eV^DWt9M~!!-}V
znYmusfXvrO(aga@6WCAo{TJ28&solnyh=zdna}u6ePnPvOHZ?;D6pn?^06~*`vc0{
zU6$P<L=svUVBupnmh#?-7iXTX>DJ%2&JBOKKvU50zxx4cLXeErq^SDn<QQX;z}_)y
zw*98u05kpMu#t{W!8gv(=Xae)lC1K86;-(<D;V4m(J1wNI<OSH$sZKz1tU<?<j7wJ
z7Qk-mtNPvP`><s`4G6?I9qVz4BHdL8B1D;?Xgl0qlU<fuJKu{_M6Uk^2nTM9=MM&2
ztF^?HH&%d@K3{)flgaf>h<AhA>hwvC8lqyoCh=mRom53x{@VvwV&)o^Fx%{55GkN<
zW0sLHK}~I`%e=K@x79y5;TST$>Pd`N3t{)v9U~*?k`dmy_SPpjz35F%i43Mqf<pZ#
zm5X28{4n(@llI%QGi(aRuWPDC)2)hB=2#=-Q)^a%tt@+xAn;cdm7JDWqn4001;LI>
zPs5H<cXNCz*&V2d6_112Y0wB{Sd+KpUM3CQ+`N(~y%REP=NY6Ldu1cFzcz#hF^Rm9
z@+$620vOtzF>!{g%K-1XCxI9YBy@gT?wZP$jM?X=bOwFKJP<FqeS7y8RS>ADA0@pJ
z>dZ|Ha$w5QIN=i)m}b3M+6XV7$D+Vrwy`ZN<^jmY>eD85SlRg}2sy1**;ob85Or3K
zZ641UY{U9-2f07fqc7ZUaKW5ZZ(zsOIOH;~lI)q7GEj0dNhS>!+eSdv1!Sw|l#$Y~
zuL^D#oz3v<%Bmv%i1(SM(OypF$C#H8DbXbjP1l0vTiu5nx~{C`R2!C*i>6z*JT&XE
z$fTBX9!i7eN0JS}t!MZkl{Y^gmx^N=AWSU?g}eQ>lEV;(VYO7~uNyA#jB33<OW-N9
z^^TA*>wbgnS3FD|DeAT@AY~qGsToF!t@p#j?bl<}p9#)DMkceQ4CqO<3=U{Pb_ks3
zaBNKt#b4u!oL(Ofx@{|OYlT9Ohp;_39$R;3rw^XO8TG96`OKW=X_tX(Y;^)Da@W^N
zR=u&Amezk<BEvi297R=^(H2W=^>XcOc*tte9*!fV*i)f|TI|rPW(qcf9Jj7Q6cbKA
zjIm!Pvw&NY5WmnD`+e%<^DrL!Vdr+_VeSpei7vE~v-Vqt*G?qU!o5u559xf9=dl_*
z3Vd-4{^J8m^Mz|hst_oXjfH_96g{LW__<1oOB3fS!LFI+$<E00$}i6p+?SIn=x-|`
z>$!TGPn}B0uO~-4niiWg4)3%dM217n#+=0~2oZ`-Of8b7j}I{d$qP@GM@ga5uxu)V
z^?F11m!E2z{1M;$@ry70IZFIToj*&8zX9~(3X#KFC#4w@<LsE&0m$hKhFca0$Jl&7
z#ytm|I3H5R+BjP)g>~rq`T<ZP0+E}Q+^2^cL<vQ#K0Yo-Rz}>RXf^xhJMm9#cSV?|
zpa;gtHthfyy0TtAC?dmR`JJ1~us@c9QBp%}W6&p_O34DWT9wEo4tV^ngzr>Jr{=qV
z6iXX?VSSJ8>)s5r`K+H1db_z@<!jrUm0AP*^b#^sSv(O0rxy@IM%zyZ6dq09{|#`V
zpGLL2JMN(0PSle2s?p^ezxm56GiqM<Hoa_UwC==xy4aMBM@)p6M5V$-OToH|eaI+g
zbkIoGpVkbEX~x(MYg66Y^^=q$HPpE>71CLrO<Xxja8K`XFR1`5Xe=&(8Xoz3pfuqx
z{&^hFT>-*)JM4onY}ZdNnUyG=r6g&TGhA@^dks!ZjlR8@Ie<H-(+?k1&?9{&Pi_R`
z!|^-J^Rd|q6HsfCrBdh2)rioUq>bS1e#sWhJl+KzcVxhMiJs;d9B;rzM~%nre{(Qf
zsFst$<GX)wpi;lvGUNn7y<SKNzTPZE$VcpeLT_JdjlZr>3TVl|><^ce0FLR~8lU)d
zXCN~%h+@b%Hs8L1{TCP{mkLl^&BH=%3Je~$@LW*Wbtk4rHi;Z)Dz^AHdhIZUg2(hu
zAj(HeOP%FMnGn|K7{-9fYV-C|MOp`p*!;b_8yx^BSCJH4ChrLQ8tWT*<=)cOY477T
ziHarm&wQUIZ6dtFOh7=_0rlREw1t0uNR-!h_7t_>wfthmir@&6k3|owHJ6A_kLyo8
zp2CcdP(s$DK7Jwj102Zn7;tqlThezQ6d1nhX@L}T${O7c1b`NOMqpa=l|2l{+t6+C
z@yfS|kv7U&xIkwc7PJN#E)_sUbpP9iO$5P)=X78NB0uY*^N<tq(luvWjtBf`PNZ(8
zv^^@Ugw8BPR9efOhmc}vwMF?)r>#V-heaz)c^po;D`l_<Rb5ji4h{Cz8=(0Rbm5mM
zsBUK@_$hQTihrHz9(j|dLkRu+cdt)SscVehjSKe};KLuKiV*bnLn_l6Ft9JoK;j-o
zt@)l&^8(Yp(v+b8MMm|wuuLEFu!iVx2>Q84sJ*Uu58oG(dZ1JRB<enVAclCB9QV5#
z#%<8Cy~lJWvSv`b_JlWo62|qR-VBf|RH4;9zmypYci&Xsm%QyfMm`I#DDuU1fSV7=
zK>=ES{QH5UY`Q;Y=|7u4&IuGQvu!^;xrUAOveogUh?i}iEJ%10(JNkxLNWW^1Apr$
z8LCL7Z8VE|VRGhE+StnG>%ML~_FZ6C6yrHAB0XH;J;0jbj!rTF3a&7D6no=CHvK7-
z(?fx0e1bQWkMmbaor^8KcXI*V+DEMl3yKnRY3uiRpbCfGYlK$i=@c5rrA5r`^Wewy
z_^R1SNt2Cxg-G=?K!w?gu`|D{4+>+2Jl~c(O2z&*0|0#*&)Ir+3XqZ~+)QRDgb&6f
zo%e~-=mK5dhw(UGn|mJ`(9QnM&NQkYqHq(9zoEJCT$|yEYl4iZv}iIEm3N4@0pU-u
z#1Q%5SHnS|L|pfO{;RptG$jPxa?ZIEo}PX%iSj9hckjs!Xs)%mdwP`xewwh5YT9Eu
zFI;FM%6?CWzZDA_>2g*^-8EM!jIZxY?^?U)1}SV|<uAsgz}_%MEL+v9lpVUcc?!0|
zq2a9ae5B?XYg&(#=}oaZxLz182-$QWGF&08y}c|mOz~)`Kv0PI<D)=IS9u)-mjT-s
z<5Bwly>wmho;5GRR3HZ56#}r0RtDg{X^&pkSV#+MDr%paS%zoGeOWB1KsJeIqY@N3
zJ}kWIRQ4xd87~u4c`%cK`C9WMd4yF@P1RkJxT9;=AQ5q$Aj^D`!Oq{;W@O{2hZnyX
z>02QZrsi4gSEyBG=a|F+h|)!~fFC%gMCATWe|DXG`SB-G$`dKJHzP1gZPsgE@xS<V
zV3UlSbR>dUXzq6es36ZFURWUOLi268i&p5<+F5hrr)z(=D-i=xVTS5p9;2njZC=CV
zo>0BGDvG1oEeb}k(92$1FN>On)y$N0!Hu#`D)t!_Em>lD&+NNAY?uM{9Z|t-9koIx
zLqPI=qXn%19gMw2Xk}H&gtGP;dKny4kD)Au(eyc!YuU$-KuNn-9I2JZ?7Dsj_{MfO
zHTVjF0fA?kK0yBeK(>a)-QY)SDGJv|)`?MFr1aP~#eC4>^j2)T9?_fFHhdJ@2{Wj(
zL9V_m)nrW};7++2Z2wvMf<s}INmUX;RAEW<bBw5?vO7f9FEby*JJQ5A5hviC`*+%f
zrBsArbu35OYV2Q08Z*Oe>|5&9JjvX`5V0!ODw6-ThNm@C&Jkr>QRu@!EivPkW@MH2
z>amb^lD;%!!39Lw12*1Eup<7PL#O#-wa-L%5p48kd!>U>G9&H|y&~VH3V~d$()>w2
zF%7f;`E5pQ54;j?5958hbw$K3N#OEa>x1pQqU7p(QC3PMuSD#cXpZNZ(83X^D|U`(
zMD50h4Jrmu^kVqq+){@dZ_9V#+^cZa@Xu2dK|w6ZkBye<e27##Yv2BUR7d?#0*=~-
zE@+3w@PTubkPvanDNf6#(gzTf#ex6-1PIeoTk4<n7fC|P_~*=Cn^W|;rT@HUjL-j<
z&Fd(OrMa0h<J{z?3wNM|N|RB$i}1)&^t$X#lH4p8J!uw6K|GRy7;LmRv2{dtgZn1w
z0Q(%xlIyNYc9c+fBz_`lrL2A_Ik|FriPsB~=FfEaN*dY^{(oCva&qhAp|Uk;WLS%D
zK2L?Ltuq*w%u;}U#h0gjls^{8Mls|U|30g}a!yQ0EW#{QthU5`LJiX_Onsm3c4p^!
zp^#1Ts@f(F?^<s_=h`El2#{S>WHdAQBd{EpA!UJs!8OKA5((gJFdgZsQ;21Hd3S!5
z@3|rWWkpZh)tml4ec-X8ef|K|?hM7Y6<8;F-SB5_Q0LjRK4iTaoO2)+S+GCaFsGoA
zlVEbijZ(S^D8=e%BL0qp2no-cRCqh5rsp<i1wOlWygH2p0u+B(@0c{~q)y-LQj~ji
zk>iDH`2@6lQ5^xK;CKJU?E(N;Fm_Cfgc#?c2V(ys$(C}q)EZOo_~LOB?@_A*V(fG3
z5G~1zc$&tUyae3~84lCF1`vR)J3snSOk(f;8bCFVYZYu5-~Jc`{zZl33>>{RZ0sE0
zAL@Dt@#9EaY)E2e0dP1SifsrH1p%tT%RQWEuwgq0{55NHsGuoFeS|Sw&nmPPUu}O3
z%W;1m6aJG3IiKdDoYXJQ;AHA9^s5>~*a?WS7r;ehhaHf)OB?p6tu`rrA6$x!mPP5J
zy0bfgoqDeof)@8`;Djx_)6c_np%?`M*EYbpGd4xr3uS`j12fgQIAG2v-)zDl&s~wp
z;kOIru(zo9dQ@CIpL1>>ss!N~CLe<;75xCya`Y`v6i<IEZ;E-b2NLW55<)O&mdg}p
zV@+I{JLdx8J15%2IDq13M_dyCw1hdOx0V`co4t#|c_;nwn#*o59>HCH^U>&uH+(&{
zmNN1+DxQx6#FORM&}!W!F+|VhIOm|A{-m9MoifzfLQSM$92YMBp%np!OG4Bx-VS(T
zWc!QxDxYz+IQ@P-N@70FpQAQs|J0SgXgl6#dI_kF@@@5C_ky1|_h~+T`{&ir%ecaY
zju^D-L`U=1PDs{?seYj}y_1I4=+i=1N+6RLlS#w(EBj=EDx|lv?}zjiBd{y5*5i-Q
ztWo7VQb*5mlh2UJUr81>8y?OD)Td5uC<i?g7j6Feq*L|8uS_eff3QyHL^p&uGM3(H
zKgOzkED(WXA|~i=kWY9Q1*Gbum**ZSYgoHmw|36J&3`0bP8D?^NH)K#SU$fI{FMG7
z)PC6WJNdK+PsbVbW&O;!rNra(Se+q$65WMyZZ>{DGJ2I;$-`eY=Lv!4BMvk!YX}n>
z7e!p?3yg>Dd7)+Q*p0v9Iy26AIoLBEe{3qfdr9$7;hGEl-Dq-z1K+iydxpTaZWpNt
z5v{do`PWg{vo%k_Fw9{5PalDUuV-{hboDa%BChH;Rf*@uWQ-q|0-*V}Pnon5tIwbo
z-;?A^Po_QNCSmq{){^5~aAmF@X9xXQiV>m~&Mg-%ql0CElv2SiXS4XLa~Nr$oW0t^
zDTsp_>*E-p`!|w>q`kigH<1(L;D)!tF6sTMehrnPHtfS#z6mN1)Op^Rrx6~&<^@SF
zp?>m?@}I@Z`s&H~d4aX^tx@<>zp@S@^06vdeolfBVy2D=&=`S_;BDtMgp)UvfZ<qw
z<LF#fAwH5G)-%!EP}56GYRnN|0c;~WAW+g%=2+kiWgw)y!_Q&zZ+^WIPV4WhFNSim
zF`JS@*Y0-pu{JaQkVuhVU-@0T$m=!%=cKju8NS?rv!Uy2Sakty$`kkCEOLtJ0uv?D
z?$*kZz{_0V(+<w%S**7q=cDl<3uXECiGSFj-1^>E*gB2~lKy0e5G_#~G}@iFS_E6w
z_xfVEnxp5D%BlyPc$m4?Nc!LbBU?UG82p;olpbe=^xXXA*0!nCdP{jI=A&K9tQI=p
zqnAAq%bAN_-yel+V1Ic9Wp+~{5c9KNFx<N4r1P^@<%v^E`iOX^Pk~;M46k=J^jaCV
zVYHidv<YmQ#fZHw>)=UohG+K~v}57Og(vZ|rj8EZ#z#ZLzQts)!xM1q!7HO+!N`Ro
zXmtY1MsP<dToRmGPn__R@K#9MN)YM-#SsZ}e=v=b4U_WW?EL{a0oH6V3gStI!6L|h
z`Go@iH78T10?nLq98+*`8c6T07UwFHEkJUll(svc<isFTyIQ$T&%siqv9W~Er(ZB(
z?@IiMnL@{}Q0n6*r`w{N9d!D6l86oy|DV_++jqz`HkYZ9OFHh2EKMmCp2G>ZF_Vs)
z8Rs~ZVtc7U!EiFmJ;SU{8U>GI#4daUi$Rr^l7=J$KuZ&`K6vO*?0-cNO&c40U{5yc
zFS)QMfzh;_oWW^Otc`umCo)TO2F-%Hk19D$19$+MHJcLLlK~~Yq*tG+5$@;hu$1y-
zRr*w#FO5epzHu$YV%8>eewul5<pT$O;M@DKxumpw9V;T0I(4%ANbw<GMuA<j78HG3
zr=yH<;?pzX;roD(I=MMarY*=5x;Mn{F%{duve9rcKz=rOpEdCvhCm)w&!DG30j1A5
zr2b8I{P9_X8}7xE@MoW<QN(u)SIpH9-2Q8YvDu`d?eW#TPvch6T(HONBXG8V0U8vF
zK-D=ce`4HXgx+t_$kMB=Mwi`<MeGxfg8Infx?&B|{)o?NNLCbOcw+rlyjE$@1OBP#
zsPMw|hM7V70?=<AB{RViQ@R1W;A1ci2V^A5gg;j3$rQMQokJQB4NSz9>sx*EG)Uz<
zEan=Aa|Vl!x7G-vGROO6aCxks|9kNn&6rz>oduGsbCc0z7_`V@no{<rR8Uo(3`MAK
zYtN06!5VKH!KlvWL~jl9f(hBGpnQFF>m`24=9xeTN!tgtpx&o@1S9V$6xOQ?;-kOB
zhw8R>*M^I$%^fzM?Rqtdn<~Nxe9%UYn`lZSQkD%xFcvm@Q2Sfnf2mvJVCui$AD$+;
z4gtc|x#j9^rGYQ}for3ke?E6kEt%1rv6`<Z%UnuLJRl`&t&%<hdL$?MDCcbj7}mzo
zt7Hh)Z#sx?k(v4;dD{x!yS%1sp}vITeq--89X>Uqcch_-+Iueh5%-jUHEc+S$Ejau
z1tjsO`yguQNVSG_06INZ+PuTT6p&3^ESd5E-Oz+0mU|y^%;85^mH$ef>snCcevu14
z1)0JFV)+p2VW-;rHD#IefzULAsG9rH3?(=q;LYEOu^enY0a>|=B%k24S^^u*VP3WT
zt977cFP7-oE_NLN9AHeDuNY#UiK?=*T5K6=7j*m^(n+ZFFe5S4DO{89y}9G_rv+sA
zikNd%q<Ed2AC2O8iyQc{Sp%1WF?hH=o*9heSPX-9Bq7+xO#%%B=Bq^MO_bnW>+Kpz
zL!7agg_35V%>p}^M9l?4nA)t-xg8@qj1;)~H`+5IrV@bKztBMb_<vmAqeCFnoQ_NG
z`os80+(P&*ZYh8;r?A2i_|6rdeJduAJfe!@;cauG@#_j&+FlI_7XVsY3w&*r8Ivnu
z#*mxiaa+b%mALnOr-?X3hr^mbYwUN``tcT9AyuVq9rV$|2?%6TdOt;aeY@F1n)B)g
zznVk3D;~g1AfJW1XmNsH97mZ~(KiOf-@l}tNl$$NPlo9IfvjdZ_>g$3WvFrr);cqa
z#(Y5ou_(d>_r<+X30m1bW5(xxL<Rd<IAR8b)*suUsxr?)L&857O;l(wRc3mZDB8vZ
zj2cMyZ@9@j>QrWy18i{s6VsiaAeogK`!R;Mb_W2kCiHaT_UZzY+fge+kL3%kPPSDm
z*80dQ2m`LJ=J#hm)HgGp2zFDbcKKqE^|$Cu>Z$|2Y8`h!Z<)q)U>Ll)muBg&lN*^4
zSi=Fv?M<#2yT5nVTLub{0YXt<N*mr$czi)Sq&4$(enSzjYb}_@wx3?jm*S|?6yw|<
zfi966TN)PV-J>fZagO#Iys1c2fc$rdDA>yp>5EXt4T?`Nu5CJ-aPmaEQ5S4Zx$}fF
zq-jMCuXqy3j84*23^U|WSo@Lzq2g7R!)bD&t<CSk7Gh|6u(>2rgKyo9uO!u=1XnYD
zNNa_DZa9D3SKeI|VFMMN`>4c1KN+ELHe>P%CW6bAeS|z>Hq+$PlvTXNp?$8FQ=+UI
z@(dHSR1q|)%uv;{1xeqxp!M_@RTG8*gYfZjcQQz^WHYl;*<rqoTc}o#nLa=5yO#6u
zhMhoUF7EpwQEI-V|G^*s!l9U88})&mG*DQJ)B>76h_J$MD#;}&qlSY&AHJP7#);09
z#cU}wzCLdbeMG<s3vxKY8p}uUUD=Nuxfyql$`<v`p;SWvIE-*hScNEPABABvz3mjH
z5*<_WVKiD?hw=xBTCy*c)Z3<5_^#Bt%}Pam=QFEblY2vxYi)hA#aU(R05=IbbxykZ
zg{pZN@BPr{2By-cA18lO15ycgdnp$HhZP?K@3crbQ3BVBxJPR7+?4@a;J5ttm@Dk!
zcM6<lEC=B+WvgtB7@iXF$B@jOagyE`5`X^)X$tLr@jTPV|NqD%uV-pw$SnO{vk<VA
znDw`cDu)L(SHv#>U7?8l+?T}_o;AaP*bQs)YCPYiQ#nlb)^i-`E@Ev_uEwSrsg-+C
z#;o)Q6>fz%F@rLo>-BrFqA2~Rd#K_^Wu{EEj)vi{d6wJ66DO0bJ9hNj2?lgAvI+$2
zGT@8%_kxjGF8Ke^;7x6S56|BvUv)eC=jH`u?4UH(kG?@ZqRQ3wFsK`=iLJOnd0+XM
z=ve3M3No|)z0D?CsASV|Kke$4YE`J#yHBv}bmg;>8XM90vco5pQQb+ijMk=r$Ou&^
zB|!G8V@rv*8TJ2E2Oeap>Vaa}gygOQ6c;$>{p*<$H}7eMR5|y4RF3v?UlVs|a|;p`
z4VfB@M6w`k>=3_;Md@V1H3Yq5dV3PoEOz(-$L&~F)!e=eP(*9tHg40<azlLtE4)|B
z{F?`i0n2I_W!vciSv$2%mf9kQm<w>L^x!T4Ghkz&hLw!MMSnRaBph)#bpM-?9DdDt
z+C*>*+>4913I!rHFDsnln?xCH%H!l(`_7`it0^^Mzp^TY^-}-;`23`~x%>|`Yo9wX
z2-fyHCQXY1yvK<dUyjh1u=9#6(IzR}MtCX5#7BTNT?)Jj0Fl@-sjjNdJ7F%@2Gcfc
zjPm8N?Vg9_`ffpML<NU>H;C$e7j;?E%AePBSygARs}QKl{V!y6e3K{_>FW3T0CQmv
zSdaEr=Y6lCoqUC8Aq^%M0?dG7DZ1c=yAzo1Go@XygH>#^*Tvey(+HS)gw=XF*E+P4
zK3giykxo>FT$}`3$(ukLT<<Kxea^8S8qi?KEJ`LeliOsYi9r}%mdC?56H4ux0(y|G
z?+|>L2ooEqa!w+g14%!g*d{(-=qlj6sR+xcv;=$lTiF_>Q32n<8QX~EJoE&yK_|*o
zj~Ft~*koA&>^6+e5pK0{v@F5~kdciVjP7m;dR;0RW{v|(S8Vk~AQ$$DsRO-79eJ07
zKx88tC$ujjqA#&VdNID+XxMw@FR_NN;Is5Kvy%P)L!DMeODn^px;m`^C>VYCt&7Mw
zfX)5M&GbMry!73*fJ+{?xY?`sxf3IOJlyp7pdDV}|H~YjJmAO34t%e;RiFgL%u}de
zj5!$yc1a*-?mZKtdgmk<0<1$%pGaYPxVnMZ^ip}Bri}PDW2w|9%S}}EeaVA`oQ_I2
zX(Q*&QR#5>eg#fmH-o-g7=KwmwhB9GTzjePn1C*J(gBHwyBd8Yc<cuNy+eANpPRgU
zC!eI@u1g46O%3j#jHTg~wbPAJ?t5wCg>TKCMbVJ_8FlLMv15Fof<wWhR)S_*p?>48
zlP*6Vqa(Qc(E7UjQgKDTDt53wK`eWHXp(O1+s@FUWdUaZS3s!0*i3@AzD04|FXn<V
zb`&H5Nx(2~Y9v4^JjLI|^DN9XhSe#btfl|AX^FhtPlx&9Dr;}0z{^6Hm;rY=o?J6v
zE^YCXEj;k?R(8veXMX#;33)**;)m*M($`{6$JzwqQv?-g_|jkRWai#lDqfM!Q<6O`
z4o-hN$}$_5y7I{tDFl$SSm1cKwbzQ>gr~x6FrTzJ530Ud%~$TfZA>RyMW&)M=NHP8
zS2*K^7Xf$#9zVi!$`xv;dzUGQkSGbiHUmlF*93dj(?LmY-}QXlQdYctHh1N8PS#U}
zvvngZ%Mn0#b{fJ_DMc{I%j)yG!!J9{O_0~=i`8<VOz{eA{46&Bmit@6a#v(UQbLBh
z#7HO>5mPGGNA_HseU0Dez2uy#%u*V-Z7l(s53YzZp+i~vO;MCoJ-t^z0pXO~QVaXM
zpAMgI1PCAx$jzzPzds5kJShmRU=1&oaVnH8Y~yOdDzOR)(gX#8MZR+r!#9+`Xsc{&
zY-m+u=a=C@CZu!Z3HCv7hMXZROII1g6P6|j;+zX`ci&WE#NHCo%9B8FonRn&bI3TH
zE;LC8N26le-g?|bKTbJm-?dKd+2zj*PEl?a)}`_*jez+gPo~a*I_(B9j~@tgIqiKH
zrs_$MjtBN`;;Q)T?GUeq<hKOSHI>-O5EJBf0<R`l0Z#gI`q_6)*ZC~@M-hJ~BEQad
zz<i}BDjXgf;bwze<4k<6el-?wL;$zVkj6cYRVx0M^b&n6=*c=J)AhxUqNK8Y%m)j+
z%52MN;cfsF6NDiq<D<iBJ9JBtp+ee|9Ir`DY?hXbum3F+BSB9rpD-PCDt9}5jYL|^
zU8lS@K@NXir1WCy3NQ>E)i#C361UB4;kj7WX3`C+%(Oc;Ej>aPV%+}`=>k$?nz(;a
z!NM+2L2zHxar+jjY1OSW{LI|Zg&gb&@9lreEV0Q(Jtp-W&Bs613mWZ9hxs9f=owd4
z`E3MivP4!y-);>$ugwLEg`pHdFUtM%A$avJA5LsBPfBbiDA(JEYNcoduzIhIN*_hc
zDfw2B`FjQNj@?7+=jZMuX08b6Jqr86)hyAf?693l>|z7(+pYh}-mz(5Q6CZfijMDK
z4^;Rg&Igh8|E9)0bIAv~>cAHC$;6y^Xht1-cMLU|kKZVf4pu0^jC(_Zd)Y;SW(3~P
z`{S1dK2KuUelFYy`6ze8xXF`g)##%EW3}%r0hd&<f}gmFOcU-I-*)I2sz2Kr%k0Se
zXn<;xy8aEivW`S7bQVX58Pk4XYh)qnia(W9SH>Nn+$xqAG+>nqG6s_ag-7Td+I2X;
z^PN9&69RmPWTz}lQse>sLN_#O-_)<#QLeKlYk$sh5ihnBI@xSNxK@0Jw>W#&#C2`M
zR(k`pkq3>#j5fsp7pl($JABt>@W!zkaj!@b8zP5*3Y^UAZPj~YvG4X6Q?}^uA+X*|
zq@NYx;$8xzqeO+%=nZl}jfS|petYvp#)5f|5h8{$DC76Ra6140nB2V#dnsk7;tU`8
zF=;vlU&qv5NN<MYIoKfWnJyjBcei9AP9^t4APu_xzCx{@yc;_@S=lK0Av8I7KU;UV
z(V7qOTe)Bsv@eVF6Wf8Y4j*WXzhS_(-478@lTdmqy$OF&_`gkm`oDErV#M5q)t=nn
zjrJ|;>v!OnXZ+Ls5G`rYgjQXCm5QHuwUCoa>-J`;&$AGRhE_M{c5dWfl~<4@>IPrX
zxQ7lkY^6{L0TB&!Z8x$`ntA=Z_x!Ja!^tVux>E+s-1misSUrA-rpX;fWYp@w$u{n<
z*3T~X@5DlgGV4vqVF3wtAKj30Jh+qveD$x`xR}HIG)oZl+oxq}_N)HfD`6dTXs<r?
z(2oH$^is+D;G*9VVRcMC*kiC0#LI`NQ<5lQENUHLQ})3?JES7dR+a{u?SPEw`J6=G
z%e-F`h_p-d5Qh44B%Im<66VBf)9nhxnq0sz;aZjr>Eobudwbu#>g~!KEXBtnLv21)
z*EL+A_AhH4r3Q>?^LZ%ovPz8g|5NDdYx4^JkDFVq?4kOn4)=0BV?yWu{o8Lz)eA8T
zTFvspw{c(b0F$!UOu2^mVqpK_e-UQNoqD9RDy7EbXGmo<t3d?+%2)#+EYfCQcqei(
zyN54}Gkyv!VR^Q}RXH=Q{j{2ZzD%JuYxpr2+^aRJ?Qva}KMK;a+yY=iHzPQ~K&a<S
z<DGn>b>bky!b%LWo^xQbJ?q!H$6ihcuysl`2hw{hLS!}s@CWG^FLiOUu)<zIsN3(Y
z4zIK(G61bke!UqbpJWik$uk)v@IK2_GLs$Uqpwqgw@qRc9;VPhOMCzZ;nXGuR>nFb
zf_YAj?9D<>$H3>uE(&^jy#BvfBB#8uNfKAR0~};&RD$~`#RcRabGhu;F~6O@$E%pb
zCAAlTKlHo-ee}wj_^_mIxWfk1cA1vK)Kxe??8cG&!))SMzg=MZBlowOy^35Cq%D&d
zH}Z(TjTZPh7YNU>E=wBTv#9hIX>fS$u}T0#l4$xvuX|@Xx&MirNpoyjCJlSx>AUQ!
zCj&S4QPmY2iIg(2xFw+F6FL~2*<97_CZL2>K%hpGLXz*HP~GrB=()3n!~<#oYt$zv
z8m_hRC?m<PSJY$nr^4;@39q~2br@4RG+jzQlkH`zE?5@_&=;d1ji}{hR`S$fA|_)_
zw9|2)tn(z`cdbQaZ!R6?z&U#-nKFx=bdZ1B8hC6xE8MtF&?fCA2dVwId2lFEY~?cu
zX2b;+*O)ZsFAIhmgbelY#r~~Y`M(6nkx*N7m?#l9?kC=3ibJso#3ddM=HYYLL+_AE
zWN^SGonf6N1q9gjZTKYkeZkft=}>4;Y862&+|krFvufUmtD8<}et!M#Z)pg<+mriL
zi58#1_j_rLXSI=j_bmtzh`j^wPf(MCV&4i8_F_^cpk^+->53pNp1yiG0t6J0aQ9c6
z#Zl(;smNf~M=x*^Yx(x6MhHd?*0#s{)pkDYfj3#sVt0VpZiiJzsJZ-KBpLfPouL{k
zs;Pdg`nF?G=x3i8S2WF~LX<JBbTHBC4gi6YgmkgZ<w-$c1<o&hHLf6-299%2o$W38
ziR4kFE5C~ArX4l|Y4+ta!KpIe8Lmr6VEcf^>53SxpRba#xLr{x4LW5?t%sU!p_bH7
z^!a{RCWMrp^&pkS2g=EM*>orASPL3nK9Q-3*;|#LcD}fZ6l2FGh8D9);o1g3u#c5S
zZ@(Jb{a<*3#84gu%6;AKkHidMX9a^&WTSFWBW_^0B2Ws$a;}|d%bpeaWKfV&HY{DN
z>f^7hoaS?wDE-+$n4@k7lsm`4pcBKqs<Bsv0i2oWntqV7lQFoP)ql94qUipp9<{ug
zVuN>6yS6J6;D6#Ff<}xA?l(FFcJpm|Y{N^`{wps3kd?iHqN?QLZofAnm?5RRpIIVA
zC&xW7dH-pQn;h1KaR<3GKY7b74>3h)%q`1B{tOgv1&`W|Nt5uP@;r8d_X7fBdv|DD
zx%oTDowkPe!xU{>2Q?WI?jJ>p(-!@9MqN?hrl#TMG!9-#;>z3~O(cv?*B38qY7<&w
zU1Oha93_z0pqJ`N%A<yY1;ynRC-Y+G|4W%qv5A#vk;BFWcyBv42dvey2DE5R9y9K`
z6AJdUp@d7mZ_SLG6@D5-@ER)rmtGtHMJ3zSp|UA5Fd^%A_Kiu?X{E*WGI5P4a-!Z)
zb=G;U=lEnZQ5zd&mM%K1A$J>9XnEl=bCu{>p6Y8KF^P6>PUBk&W>@fksO|RH_;8n3
zigM$liF`w>WyOJ9!rv4$9}}r8f@kMbC{o>z%$9e}bV2qe!VM|Ms+l(EVSS%Re7!_6
zv9k{;Rf#9n%`3b~J!P-9A_ICU7|YFU55cvIZVJsD<9@t<7ZxO-6Pi_0#~@NXZZage
z3nAgBXA2(YN2f3Sp^v$iD^>uvwd?51dpzO!z4pxQ<WsAgU)~!Vv?|fi15}q0&r?j(
zJE>|gG*yl(R@a<TQtu+v7dWY;gRFy;S`vN<=s<<L4uC|@ASc)6A<^d9bfah7FiBD+
z0Peoi+b@U2;w1%i6)IW$uX=TO5IxtYTDZz-7Ld>6-OA0at1`B-EdV%lK`%!l!&#0u
zXNGIoUA_HwzztGJ1I4=mYnRA606iYhX(_Uy@y}Q+xDSUFI#syl`nVtZY4T?1eO)kz
z1ela++af*E;i(Du^)}!)w#RvLDKlL!kXH6AYdysIj=cwj7*SdVUnL2Q%DThQnxkp1
zjnM^b^?iMuM+vpsW*5>BpA0d6lP6`7d7ni`I{7S~t<e9}@({u#9dr05FFqYvYyRvk
zqUuz-MNTiJ<|4R&O`Hx{bWT%{8!FvZs`P3{Wp5LRYvgI6&rpz9ODF89-*N4Qor!4i
zhW^cHrM^=JlS7i$p<n$h7LGuGVu>oC+?#8(=OJt5gkk}sx6rn9|LlzUQCf08?@X9i
z&_n@htpG3h#JB6<)B-@Rb7qiOKd&SD#;&87VjygZS|0D-Ym*>p?+P0aCCCYO7gzj(
zK{n3||1R{{=KO%^S4%z_89&REjj8-aU4Ku#EqWzYapF@q42w|(E3tYk&@<B&b-7MM
z?6gHPIzPweQ|b|urI}xCk6iY8^l@f@!6J>yrJdYaZF!%?Lwp-5TJL?3To-+i&{&?d
z88C?rQag$Ej0^`v8!8%b*YI^UM$782JYL<($Zmr~_HO}c9rLhFTk4cc_itm1S##O>
z0n%02x+dbC<2x3C>gTG3FYM{(>mp|;?XD;{Bw~(>`PJSCU;!B2Z}hypP9&CBx!S|O
z+vVyPlukXLMP8z{5<_yOHnTFaXVyOn#?lj1IM{%v1Ajz|djaiEw!fx41mDL`ifz07
z)cE2d^Pfsoj&lfy5nc|e``WRDHX!*XMWh$RFx6`#dHG|8*JNCAN_uN6qh9HKI}?NA
zq3)BIXo!jU$y}pD8g5m1eB7wA5NuQ`hp5y(o>CWwYS+!Hdu!=uBKSwO`h?pB=`;>w
zN%;9l{4R2_`NWvQ*{AULe&bAwv=bYzI(JlXM3HbPS}>vE#0L4q1SI{<Zt;6uyNf=$
zybD&Gp93zYRz6$^B*_2n`70X*+k+s}lBmIgex?W#tgx*{IY}Z_So|ZvQ}gs#wKHST
z>Dp7^aI&dzZ?<sRV2>Bq02YF`zW=@!_PcqhA1(?TdBEH-33(Y8q~cZMeVAdE2FXu`
zc8B>+QH}m)g;yu+hQdtP8Kc~@@t5Md`B!^By&Z>x<=sN;?I%VshOWTdz`{nCwr2i4
z0RTe2z+BR9_8re^`X|RN<sUK$AFly|@f@z$Sj$$?*ZDV?cqbyrjT+Hx3HDuo2fqe8
z{?F1}<yivCTPZHq0rEzr50C$=U^5?jPl#^Sx^OWUQv6i#lq*R1LOfH!C_3O?C#KP|
zt`tFm4k-OH0sH|;ybaHa-&al)+k<#<XtuP!$??$0f*VG2A~@Ni@)nEBL@i@C|1q5f
zsVck-@Ba0Ag}FKa4!+&~e9M7@8#=}6K!4i{56v;XDwhi2XP4Fvukt}*fV!pGh-nPe
z*dIe{NR7kw@3{#}L2JsNiGRPeLhtfyJaaN48t?y#Ff?zfoaJ%*4xh}Ou<SScWnpIK
zV96Ng#U_hE!^X-Wi*`Ml-$M}-sAd&&SN7S~+`Z6O*3h(m>%K;<lUxp@M1e9Of&gSR
zK+l@E=n;~?vloNZ)yl*;#QdjhAF07PB8ATXtj*$jJH&ukN=lQUgoWq2(}I(`@83MD
zlG-XhU)fcUnjNRR#z#Z##Ce+36ZD(|t{(?gvoBXdr@p-z1+yWzFJqY{N$R`G5_6KY
z*=(V`0U$!KXt-n*mYv{0ge@*a)zVssqs!|^k-`@`m<0KuRr{XsTrR<oj|Q@rIBmgC
zYN-8JiF;D37R<}=ob*(W+Y;&D4ursv=!^cqWAh|!P5(;d<f_-04SirXw9v+H9--qr
z{!oe%%GznJMel@b+a1<Zzi4hoHdsTme$Q07{;wLS+pOR64>I1&Dk*)B-DeN;PUC^@
z^pIwl2&C)v^7iR!+I7EWbQg!GM#iXNqo#SS(u{7eWx!sAW45g<P1}eZjF%5DWYxcU
z672)e?#4B0nR-93OgR$`PKx^I1dnjuQ*p4g_k?v8;L{U0sD_*F1{@;=9q^M{oft0v
z>N$7UxX7wRAkH`zO~aD`Wq;!j^Qu#+C@Jme1GZ)98%d2V(Rlm(xfv_!Sb*A}6B>2U
z{um4jvL+jX<mZZ;BT5DDfv|1gJYrmxs9|(onL!Zd^mXSx%S?jPnaYL-AcYtOI=tX~
zTuCYi`gSG|_t5;gE3Zw)n*Am{o(0vWt)ODX<U|4>9?YV;`wM7wR`MX;JH;?ozWE>~
zS<ixqiT2<0bHSC)u&|q__8kEdZsXQMJ7HjwECJAr$yW*I@e?#iBJ;<o+CTi`6HX-R
z)V=5Z=MgY(+>OQkT&}uu@8Lb4C(}hkH2f#2{zC~7_c>HB=QMn8g(o_us(UPijTF-=
zmkyyJa8XeV4CZCM21j{}2;+s_N4AOf)6Jj+!rl~zrQkjKIt)8)X8#!mL|>uVL?JyQ
zdE%589p@k5xx-%UJ%SrE3$Uk?n7B=!$cf^=7Y*g(7WHCra^;(avvFG^I?7J{{55?{
zOLWUgJ4V#y-F)gq137-wE7|>Z;7-pF$8N~%(#uq|v~n7to^I9!$x=F+J2lkk^4%T*
z)O}3+|14e!RHOGYrVLZ~&_RM?u`N)vSNR3=k)<xQi<j@Y6iPh7RSHMmc#8lJE{-%4
zCKU?E&cPOqrRAYeOYIBV?B3N;8MV&uF{nejD~*vxemqypYCfnl{4bZM{BeiZ$$TjB
z5zuqV6+S$4k@Kbt0?J09f1^#A61xo)3Y60OXRki;h&!z5rMMo`5(6rIPc6<^A%G#)
za2!`TiFEdiFe07y$sMCnU26r1e=QT0B4{V=V6hPM-^#me?@-h=JDZ`+qXS{w4Q!mG
zvM9TlAS%(6A&}+qdxnP`|2Ij3)-|42u0V(-GL}P6B=%Jr_GS(#vGv5rQW>mKiuyOk
zwT22@g@{OZ9UWJuk9?$qC@D9mQ>q*7)$rQdJOk*pm}XlU5ivTOn1gBhzL#i{r%9cO
z!9vGZyE=K}V^u4Kjfv32U_Wd-y?XgMbyJEnvOS3)h1<hc^SP=r{~sh}K*L6!#<(bE
zO60C79CRV5<_IIKM*(FXO3h$0VYw9ForchacY<y!U;Wl^NN$GOr8do~{|lL@-0`O?
z=m6^+7z!|T39oWa27&h1^=5cfrQ#Xom?kY^PHpWS=?Bq#n#&AolWG%(L_zBoH`&Fm
zQqo)VGJ$JUICu`3z-|Rngd&!IJO=#ekw&k0|I!kCy8r+W#K@|Ix8v|(zON_$;9nBb
zZ)?*lYgAvA7I|GJ!hn-1hRZ4u@|yW%;P^IHY|8UXxExTVxvzpXz<8cb)n{fZWh{Ex
zjV7+lAm!fd@s9P^(hfBDc#X#7Yb5a%MTv_efAS(|j2gyJM7sMjbunFy=3q>(QnR#c
zxA?tCY`EW*lQ~ExvcP*f5=KJ>t(AlN)mw_*n+B4Yy*V8u?GL5STQF&~di8ig9$wlh
zCAWaLru=aXM%Uo91()7wd&;&^wwLg=VHb0r8ui;kJ!lT}KoLjAf|I(ZzN(Yrzd0^z
zmKm0wCgK8102wZZH~tZCTVIpE;F3gEZYFZ3ihwLV4|721WG6HESvE^Zn4ztaXhm^z
z>AjM<RYf|(8Odx}g{-w66<($pEBInL({(cqEEKoq56(X$NG48n04j&Ed7COZAYpY7
zx#<Fd6CgrFnfKvO-W45wR4@oyRR<<U*3wsewGkq}W!o!xhM<%Hp(maNHvB%or=?SP
z!7(<C?iT23jH1O`w=O~NDiV&Vk`6_Cs|{A1Ij_$n$>uBuCGo93Lb7RyjD@Y8Iu=(;
z5(td=#CZf~yT6WkUKz+^fxi0U<%sFKChz;HPIx%EA=5eYQsv@7kl$^-&{a`5?bw`g
z=;lBw#RM^i*&ORvGZnwL!8jZa$-94Y64izWH>Om~^t+;>bX`Z&{Il7voxpJzspxHb
zhMCmQ)dR{gc1voDyGkd^H9fP!jU(?qM$#(oHdr!EQqTyIbwJLW_!j##9SM)t9L~{?
zq~?g7?|t)Hso@hlmyw?>Et4D_wPQ7qp*(Z?EE#%UkG1WGa`8Z0x_tSY`i44Xmw8cD
zEL8&FZPUsqf(8d-UEVUjS~JZEhm8(=Jtmhh)L0xQbg;=apI~tU5d-gHSN8D`)(AGL
zvI@GVKDj7B|9BqUU0qcq_bVM*qeQF@qMlXz&l3VCMyy?Ami`?X2<K+HR*}seg@{%;
zB!6o0dpTRQRDe-EUVWO4%*_ch(mX1rR)L)m4lOQqC;Ix?&`st=hY+&t-_UEtd161=
zr9*vz!|^sijPC!^GC9M@TzdZB=g!Tjl9x8A-puima`sH*#iLGeslLG9=A#41?RlK+
z0p2tNwMKrW<t|O{uAmR9DI?(%cH`OJgyXaS`@m7hez)*2uA4yfB%!(gM*l9r1#?U=
zQ@Eqn5ow{oZ`<jUb)*JsfXvOd<w5Tg_ydwy^!UKC1LnZO5XT;cj9rB-+6vfMrvk_h
zA8mb)=xVH?lmS_gLmXn-!lW&*Ok4D*qk1=h7aqpDx8Tv*WKT+^TFVouaRUlnfz1S8
zo(Eo}lp54*-IukYWekM6WB0cTJf+{+B>47C?o{wp5gb^d=kg9j7HqKn;b;J616b4(
z|0>as2u?<Rp4U$*`%1Su#h=h~fjn{I=NNpY`5Ry1IG{}?-4_+mT6t!UbE-eyQ5)ws
z1kb|<NIWqbug7aYrlRqG`*%NJgO=E(nZ!5QBVrsx#Z8kNg2x=82yv`3PPv7H{;V`q
zg|<76Y_@YE32YSmc6fG|8|-FaHLD;crt!knLFA2u%l?a9%@JdHRGrk#@zzx0ggVg8
z+=K9~7{A95-BwY~(rIpKTx%;Ie2y%O)g9zce(1e9gq;rk&XK-44~=g_?tURj0P9KR
z9fVue^a(K4_@IN_S(JSjU`uN5udV;(W*_C$P{AWcY7D?>Oi!wrV=S=QPIS-z>0lL;
z1|cY8$NV<OEly@o1K5sJ49p~|qz0jHd{C@;22k--Y*W>FgvjJrUjQz$<xq8Ij;p<x
zxhF69S<{KvN6UZ(goV6)ny^j5ZZj5|&F$b#kGhM7Rh#AyO?7vo-DbJM=UGXzs#KI~
zTdRgM>Y6zb!wwzuV!4eqotJ{N)_T^y4`EKgnEv=GnB2ZoLu~5Fq=`X;h5<~W#W|Vi
z;^RUs$>>e%YFi!4h&^%djQ!nqHZ<>WX?Ka#<-H2*ea~79y=vY~F`d2zr&NWl1^rwW
zLLM%5;s;%It-Hu><5z|*rVqd<7mq&qt-Uck=YxG*`r)xd-fQ<SMEMW6zzdCSNYC~i
zVI@O9RLwgw>RptHWB1FcJ!@&yBnlTEvnz-;QqoGp>cqNZ7z}8g5K^_=c8YiPZjTh-
zaUE4sN2_$y4YTGArbCel`K*>Gdwfw{wcfGtZLOr$H}mpOz&2YKix20NCqtDPO2~ER
z^J{?glRI#vPYckSiJxx&;68PU1>+t4Y-d^zvlI$1Ao5<bAknxHSmNV(>GiXgSB#e-
zAo@+i5JGy9{+M6_g=ja^{QLHq#^^IXyD!crhbu!KC(=4}CD%_6G$$B*3K6h;j%;WS
z{TRRRmNxSBu|Eys=I!5oVS*`-=g+?J{{}yIHB(E|)kcDwwf*qdl7ia^IrS2~@7I^#
zN-ggHuLj$>^n{n)rP(wYymb9`V7?4z%2y3ufbH&Y3^}7=q2eGI*I2L<m}Y$z6Ie85
zzArto<{=DNo3MzP^a9V2thVkdKmu9PdfC9^WT|1S4b>LIi339IMBfs*&x$5c;LT6)
z9G3ctVJ@!^__~PRRaPM;S*U_sn}%ztxgOfX%s#S2G>$wZ#bml+M}Wzxyg_R#&>tJ7
zGH+(mQZD&oz?GIWC6d4&0jthxyCgfOag39_W>D1(>n47lEiFfP4yKJzK&^s^GZbt*
zdUA9{o`TDV9LHE!hj%<xKd7m1bg%s-6q75PW0GaoA@daMdhp3uJA2!FP>A#fm(vDi
z!wU;JGYZByZuP;INm^PQM$2r|ujw-juhzoYKnEV@$`Y7{pS;RIQTltv9R=4R|Cm%G
zJIl^{_l2(^J*)f0Vt4gwXt~)-^l$veOPqKG1{~^pKKr62a5M_CM;iz=hD7pTL@NOv
za}WI^=ur#(o)2iBvAv0xf{-rjU}m`xrWJbG`GL7IlFz(DByukaa0~w^U{<xUvFNX8
zkV)Lwcw~pWE^E4Q{G<*-1A<FScm=||8SHh<vL<|y4V(*n&F>nC6NXp#8U=N=LXSUh
z5AmYOmDj6Q3RfzHoaIsYK?JE8d;JbS)&XcvrPDx5I{)+C@AWk;bn1~3>2BVd{rQ?H
z6X<s}k3s0#kFWE*-NVay-1izy=(|}LYoKJ)%qs37iz6HX4j>b?1X@TZ@|#*L#qy)b
z>mLlNhFj9EUi6>&iDp4hOZ036v2ClVfsWO6dCSReI=rY*SW7hO>F1-$5IQ_XviliT
zj3*HA^T2*7ukR=XdL=&<L|CEaTLtV#`b?q>^9+<bYJpPJ$h+Tmc_?|L+yunquoaBa
zxO*J5&)Tmr-h!lI>ZSM4%0v+gdbR)MTfCU_ZLl3j0>75=hHAX!B0zh*-kSchIZumD
zxQ{O-yVN_HJ09C0qLI47AeXz{n6<$>jF_>En5o_KC>kbq<`eu31)e}^U1d+*nA&Se
zI1_MxpE1}8UVm$SlZiaF$&y6@Uypz4IV0<{gT^q9$-fund=g`t4LkwT_%>U_8M~|R
z0S$r|ro~o52*22l!L1E;CkEZke0Ro?G26_ERqc_;B+9N7*$N|#r&B+HsJW+(sSBGd
zzIBCkD6qA0&<v)5=Kwk<L{lygy!ss$F(XFF7S_0j7>JFLni!fla9t(F`wY$0HxYeQ
zD#F8duHxY$x3o4}bpIV%ePwoqbtaL;3dYO0;s@sAE~)h{FO6nE)sayD_$%>QVwU=r
z?EcM9bKdKGVcgix@tCiWUtWRf4CcEEPzT|*+-<E=0OKjmVua#zcSJ@vPK8M&+Y73P
zQzARg3??!mdT-x)IG?7S_%jP3wLCod35q5PCe*~8(RPAZ;7T_&0D2UqhZ)^y^nK;Q
ze+3ky36a{5>^lvXDeuL)ZU?EpWA%?69W!!lg3*cRiaM5TFPM&%29NN?v?ZiK?xMHC
zTJlvKMk*9VzX>C9wYpD|6)5)AfNB$X$V&i;%*?7>n!iH?2kmna!Di+<33<`QK#UKA
ziFDtqP8Q6mb>8g1^KUY1(f8e$RW)tp!Qd<0(R1HH+V#cLv+TNG;PvYsK!U`6?dD05
zSa7!6Ifx}$oWyU%q3oiXHtLbx@ixG&ogQ9S_F$Lu=#oP>AF0+TW@%+<%e?#>9?20=
z?Y{x-t$Xx#7-<a^zpHUG(KkwjH9-V<M%4{ey#pKJI6i2Cy#)M7_X0#b0_x`<!&!^v
zUy_u(_>8RX#>Qj+pOvJd{G7dyaRQA`goQL}@Xr`7{Tr5@|9#l+12KoOI4mF!+~~B!
zTF`baN!nky48Cl(*S@Fq5vndHugJiWzN$}Xf*F#s7cV;4w$8_%bOB`yLOy_A!&m>y
zCnQl)G<zC<Dp&;|vpI7Oy7~pI^FSUSOi2yDV<6fI3fo1@YB%Pl1jCUJ0)vy&jxA*;
zIm=&2VZZ8!Ch&t~xkE#?i{S+UU#)I3|JD4bQEGKA$pdARm|T3U$f}VeG<5I>>HR?n
zvvU|~ZQmPjo;v@SCW_bOV9za_4F^9giZ<hn2qs+=f5i>g7UYo)+ucvJAx-c<>=H4h
zQ@!8`kT)8u<3}v%^%aU>r@y;&>8E@jK+YTEfcE}p$qYiJkBjY>w%Lkte6u{Sd1A1H
zSmHk~<jPzc>Z=c1(uiY)bSf>?)XCq!2DTfeoZEBnA43*}0-m61&8`j8&rQPh`SuAd
z!g!{4_PPmHmx-Is0c-7S4@LL^?~lNnA8F^dhWtJG>OjqPcp*kzHJMYJG&NhdcjVE$
z4DYYq^EA?~=OJyfw`{E#mtRU_DR!krx4~ARI(_{O6!p6WQ=rm7yo$NZc>?0)Wx)9w
z><IH>_aeGIA%a?-PTlF*xPamwk9{FCf25HW1CD}jQ;;u+X!;aYHoq2Lc?TRM>^8ZB
z7hZj|QL%A;ow6TjFQVLXV{fMyjIIFCOvcEe<!Y=q|CG}3p$gYV)E=q3FV!&L{9Ec?
z>47*=vDrMV)v<?D8}bBPj-+*cbpLd#gsaLsRN3Y*kMIA$T8gSd=;Js{r?<F8fc{`?
zNDK{yJysv?Ri(+^xjZTTi^<M+(LymaaY&h@oY~&S)Lb-Wk^2;ZW5Lv->n{Rd#s$@I
zj+KsZ>a>K;*Lbk1vQz;ye|kjirNbDH%0gZJ#v+@*|5HMtc|Ll0#)QXSq$4DF+0VYF
zA2@7WXZfIlHt?28Yf>vU`XBx&)hAka;DWpkdnE4biDQ=2_A&vM>p8bxrG6MfB#W6;
zI>jSN5FE|;WSZr~UdqHY<wIsoLjpEs`ygn+A%0Xs#=Zz`L~VwIokDyIGI$`eDy4)$
z*@7+uj6!{O^S@!mo@MOeM~KE&Wa}ix65%pRu5GmiXBE(6)veSQ!)PTknXXC%5%3}Y
z?-L>)<e^>g3^G>8QXT47ku;OCpLVr7C|l<?E&I|ISYKbJUjp!89+xFX(`pp4%nwxM
z$(yo}8O{0$<?3@Sls&5_GoSB9|5YgDD73lNv^GxEn?tUXCH+Z3VzS}otUNipudzO*
zLIg}g@TDb(+*2p?Y-jtN=K^?WwG3x(v#pq<wWN*X(i`ty+(h_9&@`YQgsyNrJVr^_
zrszKNzB6%B{_iw_<y-v?46<m6U2eK7D@h`u9?Vb_jq^srDA=;?6EK+D`<kO7Bvks*
zTvw+MZ3YgG6V%qV9{3>6R(ea`*~{d4Dj)bE>&{IMEg%^c|BvN=<5^vn1^R}bu-32S
z%&q%1^2$dEQ2*cY<(;&60sK?ES;rFIRZ|P=m97o`gh2kJ7k{=-HxGUkmmU19c4sP5
zp`>~c8>NO5TLNo(+s&NrK@OfrPE7W6x_69GlQkQkD7`ddS|&2zsXQPK@GW}R7tywe
z0c$+(Z3HX~y$|!kK<i&ND|G7$*12k#K%v^?$Y=t!ntG9Fw0i|RL(~kRjmcW%@VCK}
z<h_<Xklqd&w!TSm9Y!2ejru(<zhym)I%NsLR|UQ3Gz31OfE81RSE<%Y(uOx)GU$us
zt8Z=Isn*-Qk!kqkAYWT0C_g@IUt!id3c6}+B>^p==l>5$H`YMi7`2l+&cVh41<maa
z$uBORh*1<aF_VEVT&2WFCf1~@k$uAc#3o;%>7%R_SRW5Y)?>(pE?Ko+t;oXW?90W-
z6=NLv8pl)7^s|2;Or7vlp$Ho=D#yvGcbSaaKeguYp{I)#6-Gu*HfLOQ)wug7&}Bhg
zWS6k7brNP|RHLGH|E2zJepdmSiQvqVtP``vb;qEg$);upMEC6rjOB7q-9wC1h)y7E
zE5hgoATS91Bgt^05*i#ajzJnc>;4y+aaeq`IvMa30hY?BE%y)xIf(ys@ZqOWFHO29
z)*ipi$X{(9Krf~Amg?bNf0NXt#8R1U>lYtA5**1v(H(#=lwuE_El}w;jpzfTUaFVY
zX?m$jeez&&b$fNhoOP4+7lboNbvXm+#4QSkL5i8&{QzIB@bDvN^yAmGgUV`xmSb07
zheM6o`UYUv5W)L&v%GK*GRY1Dd7z)w#RveEs^;Wq7S{R=X2LG~(OHo*!3-kj6JNCO
z;wemE(&!bR)ZSl-1XTs!!~Sej(#W32e>QvZJ>GBsP;_0gTHOraemCL_=&pIhD_uub
ziFb!0z^KGD#JHn|J!o<a-9PXXf6V*-rCjZ-v~f68LFBpQ1=pHtZjy3V%s$EuvLE=h
z{9q7y(9~h4<h4cev9tY*1`@%a<Nn3WgZkUvzI)TT{D1%BWq;C!qpTC1u^@<i=?i7A
zok=~fU@hW(&;&`Vw+GYK?_clfbRf0#MwxKJ1~yh4CBP9s8Ue3s>eGtQ+inWGO{tgG
z69r7K1cYe90UgNAE6G#n2eO7Vg?a3c@|B!d12&Z2?vaVE4}LMXn^9=dt7u7o!(gOi
z_g@?~0H1lo^54Qn7!g(5l4s7#_DBvtWCbjM<CDC9wSE(}Yj2BZyrwL2Qyq>2Z~Z?i
zdl{qE11NyDT0*{%JWyr!kd0-5JillWy~AH*eQXEA{bX264n^et>Da@djv-!@aO#1h
zs4l>=usm{mYL8DpuP1~Wm7#s)IIe*xUT4rdmdj+uR$NVxi~dl-zv711uPeJ%4#5X%
zsXyxk%oBit@Z<r9A(1!PX;^C82la0!{~dI_OJWxzUT+xszPQ)L^#ZcdGnn+4>7pp9
z&+mCmZgi}1q}*gC{W?B@FT{VDd&yTvuVf{Mn1xgN9A8vh!X^fgCP=%<Xf!%hfQ7c!
zqo>W%8LJ2!lR4iG!z{&Z$bLA~B$$VVhmphMB7#_%W4FNo8>};!oxkMm2WC1a(F^fH
zU2<~?MCjI<vfR;H*aaUP&-(NFbTxcOnTFLJvNb64t<g3HFgv^z!qxQg#bQHYSyLhu
z5<TQj(Wn|tJ$eI&E9o>_DSU?lF<4mH1OO)x2ar*Br|F|ag&fUjx5c-${7nziQDO0<
zJDL!c%Z)b)Mvq12o>QULoI|Zv{?PFq6p+z{7zh4=?7SQi%dl82J(T{)d{;jNxHPv=
z%H{k!?rH0($`2u-9kpkE0%Xt?RM_?&C6L1Y1#$|Kx6Q<W7_~bN(+bwkt6vlu%wTO7
z%AcU3ko`Bhq@({Fd$9!N2iHWQR%3=fJfyL?yto}kEF&FHCR5lm1QloGG7OdGoBl+X
zuwU&&p<<2kmduh~lr+Fo<mU5gJzF#p^hkE+8XEYcP?Nmsu0)3Omo&o_+B`{^>K_v$
znbIF4A|Dne8{v{)A$A$3;p=nqhgHf#eS%K!2k6_&?)$Os^M207%ZOk~n+3bE`I%43
zaZL>u2-;kpY$P0=i5W-sv><o_m0B2F#fLnD+8po54cI>w1XP-XwpH(D3V~JnB(kDS
z^L+AaJXr!A#(a4N-27>8V@}uGya}=rE}2+u-J^=g1dBN+%9f?0gwv2wz@_x>AjEXi
zr2GH;?#mQu+RJZjp~{Z<tbPo;hmKG`%*Y5sJ1pjc8g^{-1dg>FHs(`g%=+>?jy=Ts
zUeo?8Y2o?=WSin6&_My?ml?WGW;tJy365GiqFz{TLFtTVKxn`2CqxRt_vnil4s-*I
zyRid47iUTDTn?L0gD&=?&k_*N=2Gl7%ZWca!m#?tXZ&oZ@4B6F*j3IKvRzP|H+b0#
z7X?R7rY!<s4B(|dVqiS7+%Y>+j)4_^GWiGMQ6u{kvP@D%VHgZ-db?0zL;Nh#%$xEz
z71~|FWKh~D@@;m%bmu*CxC2kLsgP;!C)V-Z$PMZ~BduV7;y>uhASN~6+4j~tep~2$
zr80~k_1*86lt$Sqo7TGgmWj1|Qm=-sl1W@FGQtK;r9<X=Zab0*^LE$Un#45@#S|us
zCZ>yg2S(x&8m{IS-DHbqCu-B5eGdbe@42HQjj{37eEt{-)6TfqRUUFh=i8Cl#QNs@
z?rL7YUEx%_^zu3M`9Z*1TQgVl82HS$byz4~1&vhV8s}tJ1fU)sC|u^F-M^Je<R<Sl
zV=(48W65bq>|0!!k&D0{CB;}J$@ffqX;HLuK*ulOQBz;tbsY((Tq4myq(v*0T|a95
zX`$(#&ROlJO|ybGsNOJOU6>r}k_GPP@U{JQ!KGm5e*1})2riOWeO>S^pmq>W_$LFY
zasU)_S5n(Tl}qQ3G5}|{B*<6zwLsBdg%+ejj&<K>ctmi3dl2PQ398|EhVKcR)=P-A
zs|E|6ivp@pEf9$eHQdNoZgU3P;1^wsq#gv&=9?VA(Sav?1am()^5CFRivmJ58bg0=
zXl8JG)+UFzFmHvT{Cy|;`~%2@C2$hjMv8=W4(uT7v+C>qb5`;~`5J{kIF3(1=vX9+
z9On=A0STKz2f^lUv5&NhzQy0oJ|W4Y2&7l&^xQ;=MP^@}!-0Rap4~&B3v=@(iR{J2
z!`N&RV8)95Yi!S-teCj)J`^ASX74k2$U97-wk#(95IazRKYf+Qx2Sm*YJXB2#lPz}
z-4$cm5@ix6<!AEdvg+3reQTSBXi={@#|2COQQZXR(g^Co8++jL(_5A{&<~?_5gis$
z=ag2ERy%Q6xEs<lo;~9xA?tcAc)@Y}=%6k~-ky$kXnm0tL`l%KzlDBwaS{^~p#9ba
z27&))8#OTiotvf?)g;_N0mR#0Un<cExqBT6VdtdX;<$<Z@*x+h70S{L>>rK;b97X9
zU_FfaODI<RSM^;?l8DlY+_rpqUjd)`tRmts5bGBLRNnejB|q1vT3JL-TYc4$6K)8<
zH>=?x+G#owNz~wQ{o1%$NtypQfkS^u^8J%>02WczzbwI^)Z~damcEpbR4v+0A2`Xh
zz@Vnv#y@p-{ChUo#?V<8^Yy2c<T}(B0_;a;yZ)0I;hjL1gILCed*$8&&&hZ!gjnxz
z_GPo-fO$#;0=hEaMxrg+aYCr`1R@&P8tW6@$j+~P$@v+P1`}9+=5qtxC*mn=%^m0n
z_EyS2=5fN5vY3w^zRQN(k4+6Fd>6O0HG@~lvE4FTWIet&)pIMsyZ-8jt)<qj-7E;x
zN5gxjm2MKr7!}~~qdds0N-U|Nja#cM8$T0K{CHE?&ZHsB*TelJ!Q!wSKMZPHHIeB|
znJ<3yZa;Um%wi2JqHdYl)FFo93VjtC)K)J8xp(_UA1D|&6Q2XgrVO7aY{rM&w<L?P
zS%vrY{CtuEzr{&VzGm$;inMPco+gE%HAw19TaxqS`DSMXGSSel!??hWpVrXWW(zib
z9ere6r}BP3VJZDne}GH(C3GXcgKU=*tt5Xj&kFETNF^yshREty9C5uY3!$_G`s<n=
z3QYt6#If3RBPz(gqE@YGjg|bRg1fot`^5uz4y7Skl<jx!h-TdWgmnum%Y0?#LHd!H
zWvSUVW$A#$n0do_W^<^VoFVA+ETa6hfSXp{SAX#@ez9+*wd4VGFzg^BSSHCDPuEzq
z8Wl&tF#!L}&Hntlxo|fEiXL$&TBrDFc7EL4ycURL;%!B4(ovRqJkPg^HH5!qg%;0R
zL7PsHOt@UXMhIGYZcc>grOH7PQXi=8;KKWN7atAd@sai)_?Ht^ml4h85OslowlX9@
z?nWl_YKzP7^{#-(BJ8s*?`3*XlIMtnBtO&C&tKgBk$h&Q@qXqym@Sv&R@OFcO7xP2
zFTM~=P7$Jv+B=%GJ@^aRI;uQ{VvLrc^&S$oR=eOaG-+|CGGp!B0|w{M&b$hxwfO+c
zU5Ww>{c`v|t`p3A#TPng?*F4JCTe*n?HO0~2$HXh_ydE{FScLytRX$oXxsp|0a$$#
zS!qqLt~PooaZH#@Doz$fF)>nUmW{hKo2sZ&X~g$5i`I(UshO#){%6P*u6{)u1qQan
z%2C`V)9&I-pNkI{U6wqC62GW!YM}QhXj|%DF5eX2xa~;dyCG(teE${xG)6Ec(hW`t
zi$wt66~NpkkwUG#LdS@sV_|0R%e`s-HUHI;xW>~7hJTSEbwW!W!wB$OkeSLr=DJ^6
ze^s4GymLVS-S6!3)xJ9zvP%eVHjtsB5V5a3;75z#L?tOrXx&oz8p0>j=*g-s8pjGz
z^eG#NI2K7NRFNXL8Fbn_oIy(DwpZFUu&E>fX&m8TJuFP-JVHz6<3^vxRLnu5n`M3g
zqzbJxflqFs3S)Ap&<j))Yz_>xdEjBMwrl&gpnEeI(zXmvKJ~(V3zu(IDPU#e2+AI0
z@_2y|(0QRcfT94Hy)O*QIgUj_s>icwD4tuYT6N@T9mX=UNl>lP?h^|5u}2CQPMMLh
zyAu^;UC#Qk+2&hySW7-7G2c<gg(~?HfrQN@m(hyl1;y@JCORON(3F^%6B&v>yzza*
z2nFJ3nW{|bmvN=kioEdw2EHw9nV`Tr<osnj7)!70n=b<jY*H!QIQlEQiQo7m)L#EO
z_QKI9MemIskO?M(l~Rl0j{K038-jK8T{+HM!FdvY0YM@j^2Bk!cHgB~^dv1^=ZjeY
z+^Fopf)~!?Zrw81w^nojkpR_^t=)j8HznBA+EGNVvt+dYb5zGK^A$jI{^C<ZGjn98
zv4PjE&d!HYj)Y;iO+Utv4x)AWgwV_P4W%CMF~n+ONwaYMa%AOU(`U-&R+<3uK<SAF
z&6!cIrY&YGqOexudWUlJ&!49Ch2M|zXPOF85FwTxlGjt#5!r{3N4BmY{VPjtkk87A
zN@9al)H++8o1e!yEh%G`1B84~m;cj?s$l~fmb@nsRJ8o^3zu>lJ!^|=^cr4){V5Lc
z`J<~t%~nvU1s|~`p-tHwBBGsyANe*u3f04Aysg~aT&C_8>gQ(o4QLLXOYSGC3!}*L
zJ=_x)DUTI7uP8QBm3xgk#h(dR=c<57|6*bki$&v)Cj1(DFBCQ)gcWTppZAT#UX)$J
zK4ATL=IToU{=fY!nLJ;}Z*Z91xL+CouwR3<CctWo6zC1pi46r}4Q6nE%^Cir+3exM
z>;4QwBe8F@1~Ku3Q%{}t`hR~1Z=C}kC&?Rz-CkT=RP0WI^NwI=t=wZ{fkfZF$}J<@
zOBr?u_5EPi#eLl`r<Yj=L#OF}={Y=`pMU<~-4r(e>-mKPj`3&Vy_b0L!$T>0AP?ID
z#X~MJ)DM!X0^|sn!f<i_-N$}+ABQ|Z%zC<oB_)Omf#%{Ag?u5-e6aBXi~PfLS^}m*
zJpidMx`X+u?O?6;nq9p@3J9mIU$lD~IFI`|{uS!i=CC=C+OL+(edd!>@wlei$P<Ws
zt8P9x7?T(<AF22r{*_B?wtqrA=pvps^io{=i&RC;-q^QsDSf|UL<?>90qYf;9unx2
z76our15)V|Y&9NzwX9yV5$%p|D6>MPV9phP{(terDu0+~h)Hq~2g4s{x#jGTb%yk_
z|MzHRs?y`@SbRI;Ti9XlA~NtY0MYEe^>x|u7hxw)>5v3`FGt~p6%ZZr1Ewld5itTZ
zqy7B&^#QPrWOR6cO~X-d(I-zvX2}Ixh3NRCuR!ZRWcFZcsg;cwOzWgbfG^=!lO0J?
zLp6PDqogMzkgL>4BUQHTJ5FskS;VCeV%X$ZRpELrr6>Swf>|Qx<yX#TfYY$<t_h=b
zp<Cpgf3AzX^;8un#fq4R=f>NvvNFhJgFl8CnkX7~xR2UdFdZf1Irx@PY+&989-u2}
z3Mlgb%5RgpqTi5mTgqT7H%r1>&^Ves8eeD-at@l*?tn)hASWuL_yKM5(j`4d?E2oy
zhWnLFrV@hN#{2S1#c%6jLX#V|7sW(E<?@z--r_XbC^XoGV7A0!c5oYh@RAr$X;$0h
zZZvU7i_4G4Z^DyZ80xr@tweoD3GAkbxf=}7i>cf#j;h$6#hjOa!y%m3xApLx^miPf
zbJnEUWx4TvxXflJua~@c*deY09QWuaoAyhvP56s9s%r2NtstWVJ}6rOl$p{{61H+)
zE%izkPk7#QmjeTi1nWN79b0!s)Il0I%7BIS6EfrNVszG0juuSE$FF^*bvt^LC^3C6
zK<Oyf=3{ImIry3`_-=i~K<Cj7AEiA1h<dGUkW35wpj8DtRz*TXe`Vr6s1T=VDn%cF
z9Ek>WSh3W)o=XN~902{IfZ^033eV{IwDe^R?eibqbPRwlHp`L5-m7SOa;VjBAq`l4
zAOO4ZnsJpzQ)K0b0=1%YelE=W@joFkm!nR4#GT@Z2O{(Mu1P7%WXl)MZzaZ{xlnTr
zO6BeSH}E>8oyZ(aA~%-7YJ7{H3YY<3KcQ{F*w7HX-$>cIwb-Z-LNB50T8#dPa2gcG
zVw9$JEPfw+5_i&iHm90)AB%IEjd2AUx@=cA_57CGgDc1Q<Se|2!640;VF_J17%8=c
zXTzzOp{o8NVi3cX-V9FQjx&}<TmnV-0}CP-QC3eR+GeZ?TxH6;4mIZsc&QTEmn{Qt
z_FyRL{^8hK%m*OZ>y|~@rZf~?e{we;{x|(5X~nAXUHw;4>JI{Ce4tn%Pt-EZ0|SFj
zxqi<cT|#H%N(%vmW`G19ysVYc^0*{Uf=O#tVxlXTr0%vd5$nYCbTgEP+~?ARd|~+~
zl4)-s@@h5GW%83gjoA5K-t4eD;e6YPqB$Sq>>agE90suyn?@F2G;<Lt)a>7Ri-Sye
zRJ#jT_DBHWGUw%EHj`<WBk{IdJDbf!rK87@WJW+fi%UHD@25sAY#dOt7|#auSo#&e
z57<^%WO66}0I=}KGY@OukTxkSoGqF`7ciXh`tj7=J~2KmK<YEMtsH5i4MtB1T@<4L
zWg(p82B_skMIRYY7#vVA5bVrYc!Ur{3<luP%5}X|_zQGl%lnH@{-LJe<lHvW+$x*;
zV|=(9=aS)MYOng!-Ei}m(5RCxd$x#BWqEQo%g17qweYi7KC*d#f~c8NxK3xAE4F8y
zcl5eJ)F4x-=FrY~D-A(Nc?Tu6e#8vz3iVor>r`4lIh<vjQ)MrS`eLiWGVmIZvTv<+
z+!$U!l;yxEm4Rx@jj~RInu)t9`~+z#X#A1$=%t@0Ahiz;0_;h+f!K&}w-RsD{AjDa
zOj9RgDboD+mWF^Q`QJGW5!&SuDzDzQ?$k6D4=%Z)ry_lQt<}3AdTmkiqZTjO12TZ{
z-dAyOsVN?K_2m+-tdQPFNiZEB8m`;AuF_=00|K2+P^_v%1Yu?7h!?Qph2UBH38~DC
z>RG!?sDwd(?Tz#Br{jM2%5ZH_2!&zNtktxkyHM*(af5yZ?BV%yNMj@c=dMc(!)$z8
zpux)%1j13Zg$<<r=j<n@DAW8WbIPLL3TA8XtO)n@tA8KO4kbm@A{W*epw*Ys;2vLq
zB#h@>Asnx}$#=8E0MOWK(P~dq(5kn={N)RJTk&eR-BX%G)iy{xn2ylED;5~Wqj7jU
zchSPh*Rc-a@X+Mcgdk>h`7Cd4oc>N$Y-t4uRrx?G_3g|S2x|p5GU$M_V_LWkA3kVg
z)}N*0UnS}I4#t@}TcLG*-oe<&w@wdt!%j1dK#&nWL4#}W_uS}OJ<`w1tp3DCAcXj+
zu_Cp#X=Ha|u7rQSB@1HXL1%7;QJ)(^a~03PqLITt<wWjYUPxx2O}c{58Q1Lh2f*7Z
zU5NTjGP#4H9Y=EF`pKWf&;2!paNg7PBZ^gk=j-$xhQOPb6?t|UH6<^O8_EQI(s{a+
zVQ91_=l3aN@nsXt{2ur4Oaiw*cuG4MDX7ZAW!gohN6|`aS|r`$ZE2T$QLw`QH6g0V
zw>%RMO}ecm)-2#nkMf*oBQquD1hvQ3p%|?<L^;7><0=Q-UA;05^7C^__qCC5gWW{Z
z+(V`Nqkg6^zH3)tEc(R`h&{~?MqdgqVi4KnlhS;nAuW#rT8yotgR8!=>gxM{h`%X0
zlY*q7XZ}F0o9v<0W0YLKCOoJvYxKR;1h0JnJ3z$01GO0rem3Qxqd^7Uv$9;A9P*|9
z4UhyZC}EC3NJARv_92&oZGf$1&n6&7eLVK&mBh&+@{D!><1C;1bb;DMB3zB;;4Kc4
zn0!%vfX&HOp?A!|+?UwggB=t=!=zf_&my>vAnZQ3)pNF-zEhyw?5p^<h3*RT@HtS;
z0vQeG^b!RpHa=6Qk7=BPx^6hE_%;OCc0Ik0CV{#sN=fqW-RIsw2Qg5yAVXJUz#j26
zsTvKv*N^t_3`<)K*ejCUvCFm__iY%0^j7>n&a^`a7>}kI&*YEAcZxAj`;5m9;S(aE
zcF^yU2iy=Assa{RT~;KQ99YOU?=B3tbA9RDlMoZM!QnQ43Y{K^@a(y-MPRK8`|!as
zya#h3`wK(BDM8u$H&!eX3R1WNFuhHouk!$_Y(2q2xtjnGy8c6K<uIGqwHcqWwnc4m
z`-r1gVOBWX|4rCQ53C}1#RPCp8J2x|^l31*@W%O?bKYhwfymVcRPkcjpr9&q!D$u@
zwrhWE7m6QD-AJ$;@0i#H5RlT2HzJBaRe4c8I6wULWB-@yW&zBKo#1V*$Afh*X{z^f
z5WiQ1s$6PN+6Tac#DOZ>J}_B)Zg6Cb<nqiQ|F}$C+B7FMI>D=B&t|Be%P<syshm^<
zd;I)Cs1`Dk`3pqzE)_u;U&BXF!prxW2mtYa`qRsE*fnPPsNd-O7ymF_)0daFNqxP7
z3(HZD*(@Sp@Pnt#9dHbG$+<ni)e<axiW}1lAYL9!kV<{}H@YLuZ+(AR>mc7_S7lGz
zSNRuY7+$0h!kf!T>YCODwO)9`jauptk)K4hrsbn>ATYGo^IkOg*?{l?u};lfiyJ%-
zXs}RBn3pfef6cQOR-HdTnRns*3ETC-IP2~=TX19>2H<#JheUvH(_76ashrK0lmh6$
zJ*)q*2-K3RDp>WvzS%Orcc&L#6Oe9p%Zr%x0{*N*YmXz?2HLTP8At7!vKu(({p8`=
zlvqXo65`$05Tiflauk9>X8llFYmXnrDGM)A7iu1lZ@oGO6qlyFpsr*{a193c5=t<a
z+{hxf2?B8;L!_u-=Vs*xu4_R*s0K$N9J+jLxaq_MsFfR;88m@>={s{yuEZ^V9wL0k
zwP>Z!%EKlp>GjEX*~r1f$D+t4ey?E1Xg+g5U!$K62l@LNaWj8D9$+-d#-g2`{Cqh$
z#lovu`jz4xV_2gNZ1+px!s24RieGwzDT~0-<zcA+d*@B_<4q6Zsc4UmkG2c<c}CSd
z83<-&90{p_b;{5!<=rPYN)$u$7OCN&#5itu{A`{Q^izX`oBj*Pmn%-|5bm)h9S@>{
zNtOv7ySlh~E-E{-aa8cp5^ywb&RcihYG3eODpLJje!$Ocly*2<=8w?Zt*p1Y-%vXT
zUt&tA|KieU;s5_I5E`(HCohp-*lX6hcd0-Z9w3rs9M6`;2h=Bn>+Whc-_?!}DCt%*
z()2x77q`iL&6T__^lkVdu<SdO=Z?Whf&rdG7)RwTt2@Gv7=p-Br%53h@F%?m>2Ip$
zOk|GFuh-BRy5^5Kv-rj9W2Mfl1h*o<(dOQElBm!S-716TmCr9P&-nO8iyw%g#%cal
z=liX+dn!H1Pc)mL6pGgqK-D0Pmk!QF#MVQZNV}y7@NRynkNN>o2I!fvz=6bjSgS0)
zWRoZsHx;$ACI}rhVLs|VW)3SA3HskL%^$oVwURYu5AcunIVYg&%JqCWM|}zN3pUq>
zbHtla&0T?d1l#sk&}5&}HSVHfsK~}4v>)feclR%LFVn`AAZpJJ1xkhx-=4{gd3M_;
zD-;$ciLsPYpev&2KM+u$cUDGu;OgbZnVJvlno$Y(HTj}Pq+*)Aq^;#f0_yr!dKO1z
zb&9+Fm@rZ1sm%cJnKlB8=6IXNPcPnZIhP(c!Kwha5IWY<vO%*vn<nU-(;nXNVQ{q6
zG3bi`UA8^y_`kuK>=&@FN#Wxu4ZKOU^JkzSZI8mjI=AZ%839^LInC#Qa%uiSE)#M!
zt++3z-d;vGr%;VZWDv!Fg~&@%;A?UoLjbM2?eDQnz*O(}`ylNxfgYLg_46mRPLMo0
zt>^`h{9&SgL<woNP8x<7$A6`{5pw}>zkKkIHUSnA2Lm4{0p;JcR6$+f6_zPilXP$b
zkV$kkmP+W30d65GQY+Y_X%b~ESx^)~9v3j@(TC={(jW<|AM=@)hCU%UL)p3t<@FH$
zEj@E>;9-sDL$45U2{3qt=l2V0dMn`owQ8O1G@^8xaEPre$K+!hYR+nhOpOZs4uypy
zyl50^(<1sL{$lE7@#KNtz?gn4=;9*uz>=Y<=DaxYv{QS7y={(TM**PO2NU5&4S8q(
z$7F~1BND}u(8Flo_`0+)=u)o3?Nw<Z2cACz6~Kw($9d5#$x1@Q6$t-*R?Ut|-^p9w
z<KjI|MBq;Xrl&rF|M5%p(TzC!<i?pbW&2tcO_D%@|5@Md4=hMJvea}htzq@6l*f5W
z(Y3zc<J9uVH0@;2<q5Mtc)ZfPwJJ-`@nywd`_Vik57N<d-DG_E11A<0*W&AH>-X*b
zNcY+0;h(F|<i6O((zy0QI^}jFzI!7RIs&Cs@XEAW`!c4VKfb+jw;2jf^oUy<L3W?A
z_tn>_oA`ks6sQ{|k7a+M_i{KJ+M(dQTr&_wW2^^JZBo>klWj^Vpl&Yg5pbLIz9CZ)
zyRDlVDez?}_K$Kx-A8uZi>h)aXl#q95Cik;?3Ky@6H);!3%{Fh2GV|wC<yXJ6>jlz
zBUPaHjuJREx$bI@=T3_*f2)iQ09MnaEm2JdmY?|*Cfc0>u;%%)#aRzHsdX}5-Rw#l
zi?x$_R6mc10^2+m#nLo9n-BxORTSTBkov<qoFDlRN7K@Gvq7Qd4tM7-N0rl3|3%!{
zyxHwI?96diIFN^{Sez8&h)0_avnM(+{PUS-VnW7q9l-nKITn@B^ge_C{zNuF|5=E_
zhYPcrYn6HR(9)`1jJRjxAIv(bQys^lSUoyAMcAndNn!ce38fQ2fVU@TL&?VFYFh`r
zOQfRQ-3?fZ;H}O%vAgsa1}V>n2$L*K8Ro~heN<x2o?&h}@Uc2KQqr?aMa?Lx52oYx
zgY>75ZKUMoK|ruCa{D*9)s?LO#MY^Bw+z<K<A)opf~~@BKKfk8{wx?%8kO1dxvZ%U
zj2LgBNdUdRyqUi7L8QW>o+ir1P2m<lGQAEfr+)Gx`IQRW-AjsV4m((l5!^IPsDsX?
zvK?WWH4n%X`EjfyJvatO&wUUx9NsU<mej_7@GGp)sW-0sMk7e|l)ltZCiA*usfU$9
zt|C>GvS0&^9GEofM9CHXBhsQRcW@hAP%N=neu0{~K^O59y_4H8sbP%(gTYH;R^f7#
z&>R7f2k>Myu?To;!!5I4J{$}wv=nk#G<zL-xmCO6<!05tj&n3J<kT?6gK&!w&>X}p
z*w36DW3ix$viQ%iLpB0s{<1OLKdrBp|N0}i#m+yh6@|Un*zCSXu7^`nK1zV!@=={&
zWDFwp0InI-MlQ+^zgo^FgneC@)G5*>J-nBFxn<dN>Y}-dnlDTzugW+00Cy~+>q@|v
zU2AzJ_q=ryw91#z#wV7z;5~3KPHkPR`RIxM9s!RW_pd$j_8O;d8x<Wc(rq$OaPfX#
zMnmc%k+L?U%O>Uqr)c4u?sO-gnLYD6UKiuQ?ozB&XfAwj3z$OJZx*Q>9<nOx(U=5Q
zUxl>loJ%!2kFUhsGJ+4`cQM#S$=!XL^=^pzQh&5UO@-)?+4U8vf>!RlNL^+k1=`TB
z@T*1?@<Ms(I{G3YG8U7ss*xi^usRTIZoY9MHinra-x6>t_(F-q3NYMHlNiwz=p*3w
z%RvyRvkBRU5J!b4-PN@FopMEIkM&k7E=tpq(t16*KfXgA$eOu%F$tybDwdXE_ZWY?
z`wy1L7eg!jOA*Dif*5pJI$W(tWD<>?Rqt>8yk%-j%2gm4VbL73;r>d=!ZFr^zTii*
zF6Vk#ZZBkcHxQ`xm}wBzuy^GS5Rr(9Cp_shIVR2Q;&EH3Y*g9%wq0%)XO1NryyMp-
zt^YX8w%)r_KiMDx*(~psbW{spcoOPlZM|hzSZr*7^lB;I=u;wY8{~-`^yI?n3`9UO
z<q-CTYBz6^6K(F2R^RtD9RdA|9lqbMKg{%NGW*G)ToZ5Q^SlYYl|(DF{suBHAGOW;
zWO?0$B-Avs#RrF{4LmCYl%2zQ*iiDfZUa+*L|BOMDF|ht{<0{$rIq!!s^o*;{lqNu
z=IQbDmn*PTxu7@*uIo>C&YKGkPTC>zp!mjLGC;}mw3PYEfW!l6j4Iw3m&|;WAuCGF
zUC$Ve&nYR)$C`sw>fC2zL`MV_#AB!7XN43_+nF*(Had*}IEFrYAvi(JuOxh;Kn&gH
zKMvU5nZo14YaJCRnRo8+(e0j%iY%P|_MoF(2gYYakis7|sSw+#!}QT?E&+m*bw7Jg
z{I)+9P(f*<;Oht^jfy+X)nF35lnRH+jwLbyGEdJ>>_}=^;t~~`3sVq0?pMs6x%kdt
z0>BV(Na?FdVOc6u;M>+5Sv^uUSDal81Uvu6T)6+(^xmfE=3_|6dE}-O=sD|JM3z|9
zhdO?pzpfubGKQ9y9&-{XAm3NC7Wep@=PIfQCrxj$N(O@}G;o%VI<}BNH>H9p09p;?
zu5&?UZyr~pV`EbG)6h~ZUWJlBna(Y%rFS@xVwTHY2rZ=4sIw)$)OAqt7d_k#uAjz_
zsEsLfS3d>`a_z~?@}rv)<Nuwwwi}5{cAzJ{*uH$lZZeXskWJoLLb)M@G^}3zWjUc%
zMT~?WGeF>Fz^2S0Sx)-`Lqh=nMtDEFs?4RJ=mf$Gnw)}2hXLtfij_6Dot?Q-CgIN}
z+%AT3b9|15o>*eica%TKSz++}*}&*`-%|<yUwFcktLVDBw*SX0`8o_t8TPcsK~Ek5
z3&ndQ$~bDZ-al<{A(XUvycw+g01^@hGI7US8#R*~O<p1p;fsYd4qfAe;xxio4jH^c
z)h`mtI^J9rKh>Yp$wFr1@YH0H-b=70?qY+EzCS$IL@05rfIpWk*3T2$Wc?1950A_`
zc%khD6NMf)@8oIXU&Smk=?5J*W{J5?=9bvhp8QOGZ>fiPvUoq=Es~^{E(mc<>dG?Q
zkf%SZ)iEO@FM|x|WwOb%CG|Zl#~G77;=IRLDi$6I9sQxZZG1eZ;;PM+F)sF31O;F=
zOMyVethvJos#f(Xnl@*oH9`)r4AANMwj)b0i7T&!Lh0V=TcvvwJi<QdXbaCivLASB
z|77hEZSkVIk4THsa)ht9^qfQEe$a9QRzaqH%9zMj9{(n%v-^}g*Ny3=Mh4T$1ZVV>
zHy{;zd@r#TT2!`PZit>ZT+|Ryttsl91*)1A0Eex@in1e`U0)U97KfQ`&yL}?Ap{nQ
z<nWfr(a!O;jGY*hqnf(nA8-<9g_5=(4Rz`-8=d|2cjUq*v30vMk4~U)4`{6rt`=>t
zh#W5xp`9By)E`^C7D|I0GU=iGvA5$hxUCG^v*ExA@8=72L$VS3=<i(_=D$k8M#reg
zH00)37wf<V4q&7}ei0#;U{HV2HJm^8V{$6?QEw{t%?59f_7A42yk0j8?L%*$4wqx-
zNVb)1xv6=wv;n<6(q8W479L8JDv-@ck9w?9$3J}{HEx!NOEcng3`o=YwgIiJ8kN&Y
z0ApA0UR|vtpaNMASWy)B4%zhotk@8NnAJIf-BwbMK}J_{jmtj+iQWb^Vqo{lJsNTt
z-WQrFTa~Okz>ygXV<z#U<8Yq0OQF?mR*Oq#w#;b8C(8E{>z&67$%wqnd;hpitp25M
zlZAr$LzA0JI3s20=#bOBbam{xEBn_foA>=u&r{>t692Qbc#RDYL=}x0N{Tm!A_$(Y
zZ$5yj9qx@R*!)w*-^x@GmUH5BoFDCRDtN>-ypCdtme4MkXf5AS1$f^a?v!KR0=;QM
z0uE#pj-D(~4ymXo``>6@5KHU}KnWFK>TshWt5G$itH+k)G`~VE!K4+Iad7-Q$(Q!3
z$ew1XpW}j!$K-(?e2DrF5t-Kqrq5Xw$2L`lr%9jVSR0f<pAWj>*=0?AM&wVtlQf-r
zENI1VElyMDI4A_Jhp=quZsL{qgY}Q@mDzI{7@n_zTCUP*neTm=4h~n`yD01V1I?E_
z8!{m2jFJ630+~dm_<3IT4)4hJqDPn9cq*7>7a}{9@oH395_A%e_5ok)EH`-5d-L!_
z<hHIsxqleL*7-S1f%LAh9@#E+Djx>b)##w~b|-=!Bo+gyy$2U~=_rZfos^i-e(s}l
zQh!)|kmFBU6b6Tx=y8OW34<iuIYY}{OybIrE@qvpWM4srxE85BXi|Bvcwg)3_>gtY
zEMT49*7)ov79M25{)XbVg@!%(aZyt5{@jQQ)hZ`R$0E;G#%<It7p$9=@p2aS=h&`_
z;tybV=VQ&I-myIFM6(q@YvKfi+uO~w43Z{$ikF;tPT$9^5q;g|Dn;0WiLh1EA!hFl
zAufF*5mG^TpSluMB4X1fk7r+e>LfvYFLf-HqW0^cP8bAxpCje5c^f|P<`M$i?oqwM
z-6lgdfcDH5-bn`0IC^Yw8qjEUd-aa0{p)<~8=Y^m8F{r8XK~Glp5bgm<i6HeW4(00
zW7g>VCv25X@s1Fz3lpe?s{<Lwd;g6;{IM+)BM-*(Gy*Av=dC0uS|Z__C2bU97}tI^
zMV9f}=H!$j^2(p>-=jE9FE73___1j$)Vs2VF3gDxQO|@9Shk5eDG~^cnsA=p%jxf#
zrK`-*PBN{;Pic!%h`FEBPo+?^KAO(!qOYhXMl$Op*Y1<@9%pS{876ADEbOn^Osh>K
z-_xh>Yvo(q?#-0N7*y?c_sf;{!3&$@VQCxz2uGmMM3Zr9<)bK26K@^Pjrjw=A++nz
z$?-beaNk%T@>79UbAS2-i4XtPEu$t!E+o}r9I<eekQe0MD86uiOKr{ZN<LlEm2SoA
zUwZb<s6S}lPfRCxRKfK;_7pZ)r}(RPPivjj=z&{p7Rp8XO%t%2TeV`2jz%6YB6gqq
zBgW9bv}5XLd{6B0=UI{@rQumy{OnKJ<H7Jr{utgY{8&s)vGi>7Q^e9ucuAD>?tX7+
z<*I?$+Vs}h|1t$S0<Qut43^fSfE3X6yiwMZbNrp&XNuv0%?PtaPShFCyrQ|NXf0#8
zc0@Yxs|oS7?yYPxyh1s}_XWxW*J0M{QhRV{)6u2o^=x|PeGSWH(Po{h4g@gC4SH5J
zBLb4=C1X#5vV%6Hh8kqQnNm=$$uhU)R1O1KJ)65jvM3$MF_@ifgy0BxXudsz{-~}&
zy4D>Zh4I>R5=HmCA2+5yfQWuVB}dwLO=R9)z@Akkd$z%V_A10+Ax$q+W%Ow<UT;{M
ze$bIe{p}N~9!vOBJcU()6#nWLqIFuQrDDNWt!KcC_gFQLV`X%?CxK8X!j5~S3Qw*-
z7o;m4J+COMC{)HN0^a>^85Q!@;JxBrGFjLLZ;}fofe)<Ewl~lYAQMSYaGg*{>r5|d
zH%($5#B)er+M8=zf5^M>uKFn*bEky}rHtZx7S(YxS2+4j`hxLaUs2zkeS)exJuhdd
zR{&XKZFPT~Vf7}NmG+4lQLZ%&+l+dFqzImjchX=_nsEK<?snMbB~OC^2z?7;EZF!z
z&~r>+f>*AQ5Wn6An;0^Ctb^7}mxf>u6gn0W2*?DJE{=U6-)c95tE-2oWIy+vPxfZz
zrN9JRVV!x0>7a*6eZX9KbX_MZ+!Wtt&RzYM@UNR|0_aqQ_Y|Sodc-qVBG1=VSf?x~
zHW)b(l=dDg#`E~$tT7TF&PqZ5nea@>=>BAb9=CpIPbCCrLcO49im`*J@{aXe&dtgi
zXsvY9V17p#DE#eR;M!X<y;P5#Z&Tf;OiT)(bf&_`YB-$|dSCvN4~-TK^oH6SKU&w#
znbpa3CDC?u!}I*ROIMl;FMQJUU|u9=GE&VB=y6(sTw>=%v36WXl{)Xv8{y*t5uZM!
zy&<O#^f9-Aa>Eb0!y47DLw33Ne2;?gDF=gdeEA>n2owvzT2~7p8uk+b<xJ!~=vMtq
z+~|&?@mpjI%^S49;i?>fNr{`Ha?Mo{Iq5Rzxva#MU*bJVw2i@Mdp)%e-)U)`p8O3>
z{f>m`sDM5%m=E+$pES=-NIDF8f!C2{N~03#`dSBj;HBu$n^~uAa1I;4o?0PtJQ}FF
z{A1_SnR#h-*Gi4Bjs>%Gnu!(9wg15F-zKI8M#6-!mR1W$dw%&FCL{&E#*K?{BuSr6
zjM&gaqog)t>Z~DY;!^5H+Se0{{MzF<7^UVv>!&-~gPYnbW=lg=M+~VX@2DnoRoT7l
zX~-AS&kvD2xGUy&MmU2Q5Bz>r*DLngCHhVm6ef>SftIsNAv^XzB5P}$wHkk(MIju7
z%|@V1V<nzJqX$<+2nUMizhbPl_?AzsgZg!Q?{p=~Pz??`BugMo?MY!gyQ5WAo=$iJ
z38nSFq%+NCaURdV>LW}<h*W($8I}(C-8jI(e`-Qayg9>-=^oDcDXt5cZw|lZB{?4E
zYEhplCJnW<z_8t4S7ojjQv!bU>b<DDjv2P18!Z*`W3!HjkcU(E;9OF&#DWI!zw5I5
z(f$8gqLKwziV#v(Z$ogklUhbk?)S@NtMuFob=A#@<maYT%@k0`jE2sE$*^C1*MyO%
zz=~=H^PFN-E+#h=1*HcIooS%F-`XiMc-Y#X7z)#xECId6y|}D~1kDUZrhkOsTvIKe
zqIU1gbOArHGDI#Kae5@Of<FEo!ijH045$P;^51$(c{l46cq<Q}w4iG=xxBKNPs~G^
z6YpfXmwM%eqPV$6c$oF5XSpR%3~69)rH;_QKTA&QTsgJHUoWx)1R4hTe!9(<+Ted9
ze$fk2nXpG5+))rq&oLE4xCzfFeeRPTAdgT#eH!Dl1RJJ>?Hzz56e4g%m~iaHMOXE~
zpqeF}LGY%yq)9&vXLCCGZP2HW?`wIN;kmiM$K8gPPrl3=mEU8n3(u~^K4&gG2KmTL
zo>`CRrXDT}XFhxWGcAVzPu3ZKi;Xw(QdAQL=B_rR*J^kv=4i0)SIi0Pug8f|AIeA`
zKj0+K!$PgitXKGeQReOyCRuFLb&sQ$+kzl2swniS3Bs(zVgHl^Jqs=&mr>aR22QEU
zJkh37>JU_TG<`^B1s81u#MA&$>^Gcvcgr50eSX0sNEKK$!R4!=r{B8rtygZ&OIjHb
zrq}XuCrNxpwk-GpRP0j4p9>yu(x#q?`<04->w^OK{OyX!M0VIoudvh`3pJySMNPg`
z=?J7k77ePW7<n=mMz(5(f-PF|PsEAm%c|KEvXC|!j9cUToU^z^hm>z>#Cl6s*^1GP
zE<smA8%Nw*?`z&LbO1A#rr$Oi;2JR-Xod)z(FG=XK*gQ4ExjfP`)SKlgVrtI4mSOd
za!V5<t<yTD`f~%ARP~8zOh_>U=Gt4Za&_6$@||Ppojol`@w*&`h{z0oO?TS~-EgAl
zF_Utor{_glFKoE1)-GNt^~LVz9zsbYvzHO8Y8}pe5|FIKu{E@RwC#l_Viw%~dUv{0
z@|XBRM&>DZzzFDyDmc8vyC;c`K?0=ZDW;h8R!C1XUS$2@&SDO^N-Z$+H<w5dm>xaC
zTSEuo#cexYgW1sG_*jAIRe}KnEbPluA#bj1bhW%e*&fwAP2v_d<iha2zXHo3?ou~h
z6De{7QmKf{{1iHKy;iub%~R@)M_9O76f8sOgGiZ40coGKv7>v!hw&`iKJ&jkaZk3f
z0Xya&1nE8rp7i>beLyijpbGTrDT%Lb-NnarXBu_(+%zn_iGFiZ!QD|IR_Ev={3HNo
zS^<K4h7h|e#LfSGCWi&jqlhuKuNzLm%&@2dBw`*zTtz^Z4P@8{eKVoE8c~c-Ri5GZ
z-@O-z!i2p6Sw~>SEsp8z(xVEX#Op&Is7A~to-t8cbbs=Mn!nu)<?*%d0Iuh@(e-?T
zGWV27;;X}zu0Qzw_IxXmm04^`FBO^mNF3<Pta1fG;kVaM3NX(GBkJx_rOs)Ojlm;8
z7h?#8*1zL42|qFHU%g9>+zg>yw;5{C<ld9uFb-a(u^i1W9g+e9+<9kV?C57hfM_Ag
z_Hg>>o*D8yU<SR$gP;w<kXUlK3Z0hRZS?qC`g6q&jp(?ZNb^z*M`C_T081T;Tl-x`
zm!h6p8FIzL#vHVDh=&!XK1DS=oQPc9h<$jyR862=UP^Q4lypU`zj#Sg#rg^J;6=tj
z+8g!*xb45X_<6Gf`A<H>pr4XE0CW$qW+6pox2bX2Q>aHFO+2ZKLT^n4lb6^7ls6~f
z`Y4bj(&&fjlYgz9r~P3Kq1foapNR{y478G&vK2HK(_`qh+SXsvW_K!^kDZwDR-1>G
zgU+C|AQp=DqKatyEJN*VGYQs)?|u6an6n|$vouo~z%b1`%lrHXc%<QI7z^H$@ZaI;
zu%%`e{Rz_#l&HPBhXm%qaOfG+14%}*<Vbh(TKt_Xuq{^FATE)~kIh=|;7nzi6yq6B
ze}6tEVYmME{B35Tq*3UIa+}-q#iYo?#<WE&j!AJ-2^xir;I_Djg()i{0ymSF21edW
zl4!*8vB);w4)@5aY_?YX03|0Gv(N$p-E6&@1n%h`WM1lT3rl7oqju)KxLM{>!wG<~
zvj%g5iB4~^K*)%17Ap;V>9OC-G&3iGvXApwN@c?6G@1kUfBnLZQc!w*VvGD*jKf(4
zW$VBb#eAX;k!umLe+u@u;`Qk9`#2=zd(I_!F;?;lZ)Q+5E?%hpt%jMfsz9xIQre0#
zAEGDL7Id#}3~Hz3(D7?9sk2fiH_nIz7MW3nj;ZVSeaD3TbknHPLj<UP!c*H@B>W^=
ze(+e*&`T1m^80tVy`5~&u$bno@z6&iwyTZGi0VeI=uz!*BVi|7{s|IINipR8K!kTH
z;Ln!1DPc<c7n@Ma)zxpAj4ITpVkDNSw`dU>`a46znty=q_jc`lYG8nSH69}htgcag
zUx@z^Z1#(tHYk=3W~7dyHuND_VZk}@IeiCo!%M1CLr6DVEIo$}=g>@pSHVQJ@Q>fb
zGL>71mG%Ylsc7W6HoUcPPhLF7Z(`>q3BJ95Vz*PVHThhm{T5_ple@1J*hXGNJdig}
zaaqq9`|5xH{=A&{z4m(f31O8uLs8o(W9L=e3s4R;oMz(R@Px$YsUK5Sa~pYdba#<-
zH@Ct!ev&=Q3vI1rmtqX|q<fgV0P*jm6)V8AFbE6PMe)Il`!xXwT6B|VUI)DJ0mc0o
z#udbw&f!~G<>OCF*0jqLiIGLDhR`T&*SfFW7^a%3@HHbny$uydY7<0>(28k}IYR(|
zuD*`h0y02z*%tl&ai&F8Q5)Iu;UH6f<DxGOEN^CVN~Dra<l`z$1Q)pynm_4@E12`Y
zAc?4RUqkW^twBq!2^+gr{Qra}*joW@7F2ZbuEZEmbU+}}p0KDo&R0esEPA`jQ@s&S
zw)d6Jtx5ei{w?#HN6HU>#;r^BdqLL8Cs6mNbKAZXPdhdo6q(Si*}48kP(bq(43lM~
z<7ODD1rHr4Kg#^wvc5!PZ|s(<(hgQxkD~(7ViqPF$n}|OTeQHBnHHY2*0*jv89;8=
zvf>V5(lGxHk$bYA^VFXuwFySn>q|r!bT@e#I*ioNZQh`Yau_%(*)xi!7m!)}Z84lr
z$a?l}LZLw_kRGJ2i<Kd*jn%{OpVWWv&-KrU0%p<O3Nqs6c#Dl{87UGhC&ees5FCzr
zM9j#A{!P0};U@}?VP@M09G1yFG+;e}AI<9%w*=Vzcsj#edmTPxsdx>+Rv%Xr^@>5L
z{nNHFj#ZbrWeyt9>i25i5USvAa(VdF;_~@rwKc2+TNInVTB^6{=bTudOn-J=Ct^#r
zQj%tAn@M<;e6+g59d$0HodVa7rnLTd>}Gfz<S+e1(-NR@ECY~#yciW)N&y`uted;c
zT6OQAy8^4M8%HPohOT4PVPO9Ew)*kF;eX@Ie6RM4e^izO7jF^C$`B7S$97pY0$`s5
z%c@*j!Dvt2&+$}d7bqG533_caDiDp2wSDxR4&S-R=JPwkLAWbx`{pS&L*As?CjU78
z<P6*%@7xu-rFxqfDLTnojdmkq0qVgUt(*SC1VDQo`6fOMNx+(#TPLcyjY?CSb*_kc
z4dNSY@PW8OBi1EMQ7>&j|1vLJ7WIQ{C(dnYn#vw{{!SS%TA~|iYr>$@ed4wgG36p-
z4wrP>jkj3e!B(ZpL|s*m?%SG8#MsCF-C)u~k@N}WF{MSsZ3F){8dZQ|#eM~N8st<K
zx`CsEccbz9;Wy@*o<5(|C0Ht{hANgn6dgQBV~T<J?>`k;*xk46CPCiOUjmv_%w`Zv
zT_a<A90gzVgYG#)N+%9N4Xpoc!LO0z7EVWWALfSI)wL!m>tFjm4zSr^!+sgoNji5!
zhBylUC`#`504Aef1K*WIJT1}<p2Z|^&-svo&o9YAEa4RsXE~(njdm87n)DsVhL42k
z<1`a15#KXdngbxmO5bqDl?W*FJx=>7tbvTB#Bdc=aoA0Mo=*Ujq3fH4H&Mg*V!x@V
z{}%l#1i;Lm&Y^hsQIlj4x)P)03pY0VVy1_9zh$?56JPx8>CZ?Yw_v}2nOdKljk^ik
zB)S#e&kL(CH)7)#g%{ReXfLr%Z|%vPQGatm5#?d^1aaVj&_(Dw?8EHi4)o4-RgZeF
zg`R*Y^(1bXKE!^v&~yA}4`k~+XDDB3T`=q~*l9)A;!uHl&vec$Z1=fFpBo}b!^?jd
z5d8_YjbvYt`xqNa_5e&<KT+qoom-YZ1we1#Hcm{Dhr55cfoNf5^3V3EO<GJS!#e0q
zv<9>eUR^ex_pqR+A_s<Rq@xY9LN_6v>j~X%KmXj2>b8Ku?gEq)CG5*Q=-O`^eXo<x
zVyA2Z6R!ci3MM)naNPY>5KqH=Ad^&uPd3W`G7bc*O{8#z<ZRP(A-YQYHq1gvmT-t(
zZu?5EE{vJV7Gy3gS@$H)y%Un{Iii=J_&QDw9V#Gr>B;wzBS;9)g|;V&4g6##xg>rG
z`y3s75rq5JwJSHFK8mbP{eS7FV%rMf<Ez6V-el02GP@Vw!_^zan4_Zr<8dLDWeO6$
z35%|g7Omg_VNLFg6sl@yRte%u>0#A5twcY~1gVj?8^EnMr{O)nka8d(_eQpja9IM0
z3a1jV!;Kx2A9qo=*T{>A*G6APs!+_$^?}hEK5VxaGR|XzUFRs!-*X382GcI@mJmwH
z>rcF6>q5R|&_joAw~R$Z9*oMvACYrheirw~^EGsnuLS^FW{T0y;{`B4A$3tFSb4i{
z9Q6exT7!0Z5@YkzOe|_@AP$MhlACe{Z)-4L*x2Jrbish+9F+L{SH|DXdMd_MAi<d)
z*zbj=2-aGpU)sJm9XO@>N231Tn(!dB!q6M?vA)P>QjU7pxV4N+7MsgA(>bR(=32&P
zCp0nPpW*>-OYTd-MI~rz6;Jg@d>z54b`B(={i0ffR`YpiFB?*rly<Uo<NtDvclJ5G
z)2-a{`kA928adiD&<%AH+vK@KOr*mRnq*3C!P>=llcjI53^q2Oj`5dsy@R1*M;v9i
zfuEXha$TEzk(K({BiGl`@Tm`aqNloJ-g5c5O-=mYkX&q<!zez&<THO0gY-Jh4I;p&
zL>JeC&4xZD-iJE#XzQJR&ItYrVc)-cu2pHA`O#Z70b0=!digH2VqaAhv4Z@2R_!UJ
z=~QxH-`OAMc=s4z@{{kHwRuDijE3!x<2AG6vt-TIL<8x(FFKWKnYLNy1M!`b>4*sY
z;>MBinh0Du<{PKg&sH9;LKaxHqp|mn@f2t=0?ZfrUYHA8;rIhXQ%g^S-t`2jZ020C
zS$XoeRKFnIu>!^|5B{=_W(EKkf4$D~u08yB<1Ms^KT;Ob7UVL-h){T4o5%o{eqkrY
z2_`tDQ7KUMq4Na8X&FeC?hz5+C(`-Y4{k!Tah_4ygYv!co7A2)6Kv)M)pfrkdID$b
zLZ;8dHdgH6bi=-tjj%GbZzE%fFTrCpK1}H2Bo58{{Rm)eSI2V$a&iJx@_l-Q3y2H!
zBv&@ES#Zb4k7RS7{X=hVWaYiPP((wQZ3Lfz0YjU?2;JKLFbL}1B@Q3@JIGI=?D*sX
zL_jNaR?>l1ubHuCRDS~IV|=}Ct?@Dpk^zn=lCJ=yRY53+I0?_SoD=h2Zd8tn>{>I!
zgJCrGozYa?H#l1aakBqx<$y5N7$=I^bWFxaAt7WL)SVlu6`0*;>;B&w4zi08UdVQS
zcJ=gz_aiv}!{$9H-l@2JwW2n)elYToa6v`(uQvLrM%l+}cU1=_1bCnTwnl%;2ZDP{
z1hg{aUmQS>eZ8s4fSnntZLu)eFnE}xa|p5;J+Zt@!kO%~GyS%+>aZ0Z4JH0zP|USY
zbj$zsu|@vvxg+beRpU3uRu60@UjQw8B_7vXl7#o=LB{*Y+H-IJcaA-O_V<YT|G;E1
zImXv<phse&W-2g2KP>RbIh$CoKk#aIlSgh)a_~@T_nop3(q>Q;DF!^@<T$9$1zuH+
zq`*4kyZEMq7=Bx2U-C$(dd(JazwO&Y<xE)Wkxvlo$Oz_f`hNGz$MsTB?zp7^Kz?9~
zU@T<a$+Z!&alGydn{8p#gu<(e>-3!ercKC)Jq0{TXaRwKZs;7cPR+fi1=hrmrdR?`
zjnlD5Rv=z=%C(DL=(1-{QfJOK0YIOvYNp|)0eWWWgc*dFUP^fZ#yF5J86hEMVp2u@
zesHJkn_{apF$5`YArhDU*fpQI^;k5Rm2T3PNKty1MQa1FtI-@TQu$};-mYOsuEzwa
z@HM=B^3-SK`#A!Xk>)d3LpbjbnEB(M@n$XWh)Q1>!I2Eh%qg#UbAG71&5EsDt#T!o
zq2$4qrn0NUz1OvmAmVH7kj7NhynZYgN#nFC^r)P#R7d(t*%e6mCHUb1T&(m0G)N%g
zMyZ}me$V>2kcl;3T^M-?A~YI{Z|lT?tr)61zX0u=pCRjgI>=mOqcX-Yj1=F;yid^T
zWE{o6MXtdW-o_oBQ694G`y!WUS;~8*p#<aOTx2}rzDXYQ|6#o5w3!6X*-%j+s0ou!
z$yyh%H#By`D9XY@e>&gABJH~1x^Hm?rfPxoNl+7iIhkGdzhEozI%1#RC$?lEW#ld~
zW%Jd!_!Za_H0?+(Zg|srVwpm{yY5vbs}`lcKdd@t((}^PPsGjo9`N7)(9RUw>kin}
z4)Pr7N6DJupqJjtMpXxT{c8wOHs<IroAq0q%l2wzT_v<eF*9}mT4|sx$Z}R54IX{M
zCII+kW0&TB>f-@u1w<twm&ujghRQ+}<V6A34qLV+4YSHcnqCn9;&>>2U)DS@2L!J}
zsE4b3k+n0~o{!}_`e+Q^ny82*RwlzYk)t8{<J#>3t&e<YVI#RXl;_&P(se%`pCf@a
z`=4z<;n*EoC58Wnj@<8T3KB3xMw5I5h~7p1l*V_>^cr4zM3pN*dvHXF)j*$}*~bQn
z<Oq*%dt}<{@`)7egiuz|S#QICvd2C9u9gg18jfb!-<OYW8Y(AdCTp^?8NU2{U+{jl
z-i+J$q1JB%rNL_7wL!l5c}CtITC;r~%EFB<xe_e;u@UBN4-uEEZvhM<(50@$yKV=j
z;>)r5kCM7tt*q%4vuQlZ;?LmUp5S~qO<#%KsR;=Gk6SeLye1_yXwf6~yw5N;gv34_
z;{D4#?-_p;5@m3E?IH-{TD>OA=PCc4dq$<v-!bXo$UyNJK?3d1^w^+CYXy3wXQ=T=
zY2>~tOUgFi!EaOBFBpKSN#L4dB(C>}4({y=Y!I3X=|7Iwgi8Zcft>*@vPnQ6G#JWZ
z?rsr@R1cnB==4WCus0(gJ9L2K-(!laa#A?MG=KIH!8Tr}dLSL3P$~9kP+WP78C(+$
zfTvr|A<!;&5H1+&v2~qo`WYYEnB%QM<=6pu`!kf%{=DF+nGx|(;~v#FkLkQS#)K<x
zF4ssx^czpYA+rh-*7cSbBR^?!4W+-GdA{hz@xpBiSDZVN+1VCH$QN~`9Mz~FZ@Y6z
zt>k*uED*E)ejG1iQh7^)8b%^=Q16KJj<r7TC3g*6>Yqi>!6ugOp!+bC!FDlfr@E-4
zc2QbMCVTIju{MWfc|hk*3-Qe0kn`#ASyTgJHn20VCgrY$9Pu^Z0a>&feXai?j_0cl
zL5zB?dxr+u-k<<QPDSX_^nh`5{rb%!wN6Yu(&rHM=e2<EQEPEG5v3=zj<usVR&u;x
zDdZXJSlblXrS&LXf;c!<P#3!OI2yR#3J^%*AHf@;Z>pA{ID@oo&`RT-+8Jl&zW1<8
zZEAxymNBPF>2Jb9d)6gCw*TebrcTQed`CW$59SVvl(q^RmM4`vZF8k`dT5HpyEf6<
zZ}vAdBI7B|nG4!T%*SGP^$0ZlU59eT3Y4nojSr}LscpPjzoM100?M!UPo)KjsBd(I
zY1N1_<#QN02t}<~(aT;fajm-b!-iH!O}6}fyODuuc71y+mn!C~7Tf?O#ad@Em!Bk~
z4sCWT>JM5n#l5$?Wv=6baEFlko}z!Ac`NK7S{9E(&2=hv(-J~$!{?~M%6bI~`x6n5
z-*Zlf*wamuQamT1@k(yqB=}=Kp21v^h4Y0BYTol~)s-`e-WF2#OJkK<o_@B9x7+5l
z^|Ggyr|q`2N_G8b41>RQ$rIs1(4?S(J9X%03gDY17((FI8seck)^+$yYYOcmxH>>1
zr4F~)@)mTbC4ro?@FMmo$3$DMzr=M+&P8^CG{pw<{`)M@a6e}#oS-Y;N#n?Ar<iBu
zC@ydb<|srh>HQ;=p`qa$t{8zIt|&Z2ksS50730lBh58XR&kE~Sg+I(e5#nq$ZH?Ag
zOK841`tBFa>%mf)<<D+(n*<-iz|Y*-%OG;LaX1;ZvFdiORr6@EOYtQ#*Y^~P=~YU=
zj)_JHMzgioXgKW(Nm-_}BQC@HBlha)S76!1%>Wq#c9>g4gVA6h70s-Gk$*?-^xjUA
zp$yl&#!S@vRfn8>AEc9)if^V_4-POJbjuv@mbm0p<c<q#hclCfVg{#nx9Jcyf=8?o
zvcJZEGXToTZ^f2c*rkWne!cDwIhfJX?j8{D8?_J0h27!HjV-os*9Ba~TlvbLh80xc
ztL3L^TV(=(FX)nPwNz+gxvfHdjxrF5V$J93MZTERvhnwr0;pd$6e`vB#QiSjGKjR{
zekEA-+o_rcK)POX9t{*UKm@r;cWI>z$9aVG$l(5$(;6=1ekRiXCcfC-JKE4)IkJN9
zPX@6S^#O1Y9hXFw_jY}y5vM)l{>n08-IMkk4>EgoqqlmGGv>Dz6l!64MqS#e6ly|J
z`(g{54|XXyPL@yFz%kW&KZXMJUlqNC<VW^I@JGsa5(T;>y=BwgNBBtI0`byo9SRyL
z1!yZ%O2x!x0Om&QCr=Js=AJL9<yge9#+}qVLMC>*`NZz8!ifBK^2@ocKT>hCNdLGL
zM-y1vVX~kjWnX_3c<}-BnNr(mQTxOk)<Pgh$rz;L+`W{t5n;7=mr4TYYT)(;FKg-X
zmUG%5$EKf*AC#1&!r!?Wp!>pE89kxGFhbLbFX}pHMyka5JTojgjSO&161+$qnC@*&
zYS6P{&?gphiA{4{?}2R5>(ely0ACHKD<s7EBCinOS*!l6omY!x-*vVU%`R5pGJ0Cn
zeq4~tA?$TAFUhiYXmc3Cl2|6!-h7P$z^-C|oHrohScXLtf0TsC>nrO->?|V7Q<eb#
z@!5=ca>(`bByl^#?#~CR{IGJTT!W#P8E=ohFlQLo)y>3>kkU}*Y`my(ek*VocLfJ%
zi}9{N4L?J_v%P)l`&iYP&ooY=tN;9VyRh0=Lo>ey$Mc)4&)?50vNrYgLBE}~_oiW|
zU$T!fX5r)(Q3tF4z|6(QK*DHwgfY)%I}F`%15L`_OZJ8}msz&_nA6;r;^A&pfw(uw
zhmOrjmX#;aPdBmXqtFCawJX=3Wft~eKogJ^-g(n@<SR+nR_k|!4#j}3Uy^42<X4Cm
zrc&7zZJ6H;S2+><e%7ABua}u?!(muH!)Nm&;8BWl`e#ruq*7~+U`1-JM!_&2;KDI{
zhG3ZtGO&URMIo^S(VxetFZgwFrDXnFbU_m0X{xNeV%sC`Mj;urb<GHU;AL-8y2@p-
zxBU4ZE2_>beQx;{j)OYGn<Lz#1fhjMemN!+xo_O2%WKYMP`$+mYv=Lgioa{Kv-kAG
z<Z`Qq1Tf_<$}YPu=&xE}NTVNkLUfbxiM(YM!hMGjw0XdSrGFETPcOrAK}O5k%!qhC
zP%ERoU|DA#4Sjb+F1&{?{i}sx_B7DI_1t=4qDlP_tQUIommB_jk=O>k+goyAGlP9c
zKC9yydx`ZyDhk<5Rs&KS+-MzF`TT(rhQ!lfwFVFl=&>-V@ZGAw$O>$4B0s(z{Yy>C
zlHu9^qRLJov_mql<=KEgKRk4tuv$HYm?Njg0J@{Ati|ICQ2*fOaPpa8r-Bl+{%~C~
zad>xAPVffctQaG~82dUwF=|aD`aN;$tVNBc`viZ9TJZx?bKE~q<C-rY)KU7;I;GaZ
zMfG|8!PDhXPybFXR8~lS4^=D-q4@X2?CIAT@rrvg5LteCEkeRHq=1Cym$JUKo30+c
zvwmkb>FXrXUK~np<HUkoiCg5-yEAX)%WJDFTeDoakYy;2Ev?(ZVyWL^Q0&a-B@IFe
zqB;(&IMeEsFN>gS?r!eWk3$uz<WQZ^3be|`-=y;2L{$dxg&UM^?ad6GM&#D*dl57(
zCyejBxx3%DCC6~N_EHP4?g3;8rT;343;c-=J8oD&TprxwWB|$loJT5yE^DuIt=h!6
z?R)Fhrd2H{^F{|=Kj*822RHltd7xz#s-Q%egCM@Um%#D)gtBNS+OFlbd*kS~CTvCP
z+eqk1P@<w#)&$N0HqCP1=?3rbNsmV`nJB%Tn4hSsJQo6L)DY7FzJo8?oEU{kPJKIy
z;CGEtSK_a4x&22XWozy}&%6Lpb_F`d#qRIlebYhVRBgE%*BG)gH|zYfl`4%1Vn$Q?
z?f|N;uW+(6ubyW@5ROv+2C(HJ<gi_Lv~Y+-e#2AP)JqY|UQ+6!)#(3R+qs7ok-QPt
z;i2$=!2K+ITdCN-?+~#1UHisMX}c%vSbm*~(R1=A1|wYs8H@?A!iQ65PK?K^7EH@8
zRfw}<L3xSjuw-Lr|Ncdh|AUpR?;?f&<zRuWjp6{E6NbhoD>y@MqF~yb#6W;VNj!kr
zOFe73TSnwDgXq2|luva>MOLM-)7Js5wXtuO`34v?CIolVgjn%(hCVdu*}ahv8e*yF
z5s5yt{4Vd1(cXDH_axf?xsQh8+Exx7aBO4b;k@9HA{6+?9FyuzKs|m;T<<~ZPcHD7
zr~$d%GhF*@GvtabL}oTo-DkUxT_{Bx9?wXyP@ihj{~;2Ws|T|ECb7l?gaV|i)nmdM
zkaj!XLJ&|*sipNpm^wlNHFD)Ms>(#QTWp7k4PsYfhpB^V@&|-{%|qlDGy)`bMhOGD
zbN3mQQz^gjIKm{tKNCIlb!i+dm&UnQ^9(q+0G$eBx{E|5#-A}!#CY^dzTRMuyZ3M%
zCMoT4H`Y;o`;F92|K+y`u#b_(15(qA6D|T{L~|QKQZ7#gk@{-fzlN#T887KYmMEuR
z7{4lA3lK418txfZR7T(%WxBAQDJ?vl0e7mQ+xFu7=lgcdf_l>dsqV@5ZFFAr`Pk9~
zJEoI@^__N#*f~*QHHs0qct^G<22-^lw;!s%DW8W+$rs)Q{^CH~?muM#93N3MIDTP!
zE|w`_-qU+cn#Y_~H?+b=ZPURg7Y@XQ>(!Z`fj3uL;glovF-`h7jPW|(27GanF8BYW
zjF}@()r7%4Mo=7EmavK|^7%3Qv{g!u5}iKWc|EVQ4?2oSDgZ(iVFs1oQrTKrjj%S1
zG~JhL!MufR!IZY1p7+cB-0m_WDB;~(zH1FjpNuu^n_hW*Emy(jFPRv*vn?6;SZ$Ur
zc>o6CIHAf|z-KX>Hv+LS3D&SCJE%eguPG08{ZaGn45O*T4^}_H<w!`L(dENMTIka9
z6IgoTi?VPiQ|5_LRQ7~G(Bki1N>!aa&OzCl_s}ba!iHZ^re4lO<8_unmvWUB136Ea
zy(7q-$3?;_R->FR>K{26-^Jz9w!HK61n7qjvez|^Or^+^@8C#^8{9(ib)U0h<^TCn
zvZ)#agXfD2fLLSeSurWR7`0P7coq@&-mPE!g;%m`b@0KFDs_@}Fg&zeJJWTz$I#A&
z-U}c6@wU$9VyvtXS+?aE%H#M84~0?9*6bJLX-|-&rbdx-0!gK@M~0|oSrFa?t!x~Z
zP|ma@*d9mK{Dsg~@85LWB=y1JaC*A6d-U~4G6$yC^dFGD$_J3<j3jB8NztxQKEydL
z&V2!&4nG!ZkXVR<FWP*Toh5~PbOcjTG2$Pew+`v1oFnYgsh!zL+zINQ%#7t-mPq>Y
zts2G~J!P!ze{@(1tVvU@m-!}`Wpxc!bgqm!+O`&0ixSG8|BY6>rGItlFg{y{j|I})
zO$v@8l*OzliPqbPQQz?g{jHdWM~X(y!(@-Ar8s+OAlANUdk!Kf(8*iAmf-qondaSb
z<}ru1^g?L>QHUogqwn^I4YY1Nt`;_9B}LNj0VV1vC_RK0-VZ-T`k#$iWt9}P9?=uH
zhDj~yY&pSE_G%+H2LIGGO+C=07g4y3R?F8{%>nl_+RWKkI?=5#QNT;f{`uat?AIDb
z{x)Qs0tM&y+CxKK15%uXPwT6i&`AgvIJWUS*_lo5Tb3vJfTN<y#}i%*0C4ffu8^kG
z05o4|j*JveK@ifxD#f|2_to1bh*6edCizb0=EJ0ELCz%V_PJ6N`+8n!qFD+~^|*Be
zeJFzl?^@V*V;AyWjs6@nPhgbsEv`}PTo^C>pF&!qCPy2dqfTlcJ7uCvARI71ip&Tc
zr9otzV4d`D=_5y}M`jiJTQW!lQqyy_jQem!W0g<?&wbkv5_X$fHMH=R7cLn<W*Sco
zVy@_EkU&&ZG6tXdNvwlb=jHU*RujDo{Knu5>oZAdk5TqI-h909NV=?n9&`;f?(9>_
z+Bz3NXb-;DFlq>;KuoyLr(K+Tog2?wBIdQsB5D%OaNbpUVbHt=4Vh_c9@vLQa_Bl4
zT~rMhJgMv~EGr4T?W?p&!!enw*d6*8&gYy+FPl~PnJX58O&)%J>cvIp3Pe4A+vW=|
zxdc_DYd&jK<%Z7zb8L?J5G3h=x|l`1UJ#;-6w2?Y#<z$D#zZ4M+!ypt*g|$6KsT`R
ztMr;tP2%wVe|W0iV>AWnX(~R8SZRUXmO<1Y7X<TS*=&2#Y!5&@G<PeNpvw0QY=xcN
zLVdYqE`}NK4|m(IdWAR2dHZWo02=PEcbzpMmrRi?lYs2mc}L%~6rj=Vx$x2yX@}kH
z@+*XG4my~I$K`x}m%NM(Q?{6T@B8idri<qTH7@ak4a*_<jbiNrgoGBnLm4uAH_~>1
zL+S55Zt}ldg5N7RcnzkDt(Ep(iK=)&54Z3F*cQ0Pl@X0=A}-de?U5M(JwU?0d#pzg
z@1OXD{4Ao|WV-BEHjERc4Kih|(KsnN{*_p3=XSZ!b-YDf$Yhpvuz9PY`h<-SHmFGY
z(VThyJUSQ&kD&qXvOAN+={g-0HyZ=3D*gEzV6tz3+RpnP?#O@A09m<->p-%<UYg(u
zhkrIvGc%a9$Isk)g(YFLVm8|z%XS>5p{Ui}6Ovy+Oj%xu3J`wFLk)dp=r=fBIZtUR
zO!9+Llj-3bz8NWq8!`{MF0+G8=?b<ttGbcwj@KkTzDvMKuA|f{Eu~X|BWP-x|IyTV
z3Dc?>Ze3G<;GXR1IzJd7S)-)47T7h4-)a2;ysI?EeUo%@2@=AB+x{Tu4)}NP($+LJ
z$L;Ssh~sHszF$d=3FrAnXb<-)*0dd^x5M}I;SOVu2o767A=cs>J)4!l%#GDa-}_u?
zoA-4OKrY(1^AlRP%FqG^+fuU1GsWFWKRY}l`Xoo=3Po^)@B%IjQR98p9|tTwgHMvg
zy7=O*P(^93@+z7j3JR3J9IHqSD)_3S@DXgn+IAKi&EsqV@~8pI)srP#LoL-^6L;Yb
zhj;$alb*P+4n>rE@)Y{tXbJFPK#*`o-_Mt2NM6mIWtMMF)veF~^Z?Qo;KB@XVlQK`
z9m9b$XAI22zGgEA4J*S@=HSj5W|+egY`Xu@mAeC6lpr9|jv(@YTqKDb`~sbbf~$sa
z6SINPCDjri>fL~OI5~|!(~dKid^yYh(p8Ce7qZOgN_r|8decN0cBf#h%&X7Kk1g?~
zPZ-;E=7|Cp)wUd<9qF5(6A~6L10wP_PnvlG*EMAaqs0*PmykdCzgX}XEZw~x$@Uu0
zX{|~~VLA!Y*;*Y->Sib4-@wzk8-Ll)Q&*_v^Pw6p5$W&w#X=GpRHOU%HMCD{W%d0a
zc7f}9tR1JqD7iUqWG?I*J5n#5jsjt`1Xq)S+n;9i@s!ySJOG9gb<55AEhF!x9`*_r
zYLMy%&HB|FsSnD{ptkZ2fp&iHX0&k5@sPa@W~-&`?B2BVnJ}vnRF`3N0E<w+B<jq8
zsEvLvjf0lP{>YZWexdx@9U%H6!UzKmjBGfafMIaoWZmXqw}7U^#KKAox^*FBEro9y
zi<PnqE@Sl(6gR0T{Ga3^79w%}5*jwl;KcHX&n;X2xx~z{!+6TTMY)zVXM0}N&JbBq
z711?Kr&Bh(MhUL&y%;dN1Zfv>ld&RkfF$Fde#q0hyGEEC&9#pJ-u9dJ=)=R-z=aXe
zVJ{MvK53qucmL5;fQr}!j6pl`iC(Eb>c%FSkCc4vLlx6=S7A6SlF7^&ASz<*<a|C~
zb;+2ys;wCU*FzZVx=Rv?d741MTq$9Hb`t7h4r@LhnY-COdZAN&AI-z+kdBVl>};oX
zf(?dI+`puRuh?wi7Tz0?F0qy0_v+IscUuD;!)q;TIoMc+l1=s+44L0u0ao4ef0AXN
zlPEhkw87Roz%n#Nv&#kTKLmH9qsbNH6nfDinr#GvoYv83RsZHf7}qVBRoP{~mp9hB
zK?-_3c`F=px#;~0$#35gJxc-Y>B)n1J1QEMb__AKU!)vRks!=Jds8NWn2r+MeX-6+
zDomYX!nMwI0+kYKic$-*Pe(Oz|4go75q!i3SmqXae8aT|@ye?rI~;qqoAX2U5#i9*
z@00MccX&~~3Uo9Xu;-5ZK8Z4t%zt*OEr`Q6VPqZ=mg(fvBTnH5EQL`kpRz3wDZloh
zGE|5MLXPYc6j&EiPxbeysyWL@EBsqXa%>EywdN%7Ha7tzs?+#cu+tjzM?iin#Vrk=
zxdeg%Fewbm{|b!4R+23v=3<SyLH&MR%ERV+){*#2%5dm1bNQ!p%kgAPfl?8j(K@3I
z9Xtf7z|t}o96C^H?#a8lRwNhwjf{rTNaxRbAEqT-`r}YB<G9-(+=c%X^=OMi4!<$~
zv5M6AoXuSSx)S>;RlekR*s$JcpWuOI4*V`G&U99-2{02UVxrBn4KYlM!k8IF7}_H{
z7<;c{&+KskP!Hz_Ogd3>>8dl!SA_fTb9k`64(O_dwX_=1?;-5sz|zk8E>^}dlzzkP
zD2>{g29S2j*2Q$9GzIdA#%|hCzt7E^S(h{y*;jXTDkfpe!1&{NJ)E^?|A+O&vZ2zy
zU3+Wq+Q}etj(59&x=y!jA;Nc}*TB5YAM!lU*(4%Us{_MSvG)V8EJurYu35}|!vV8A
zGTAjVW2A@+jHK_lx;j3Pr31v|Us_y7!j_RGTesV^$6#{rWz2jnB0MW}x7R}>6j)o`
zAHj5#pOocMV!Fxq;fF<i&-bx#Mb9?tZ}G&U>0P%F9|gt;4vf<V)V+Uy`H1it)*!>K
z9lIJFTEoDPy+=y9jJ7I#I&C^6`g{>uq~3{IT6fheQRFFoVIQ^dHbzw(DMdfrQ3D`=
z4O{XguX8Z81u$Yn%DNsQ_YG~K4|X}|<t^OhT$+f`Tzx3}ezl~7Hj%=Vz2=f<-qwCt
zIc4uaHrIIe8|=wJ%aQ>RAC_WBi-foQw=%7ImGKM|#5BWK#)pY;n=tEc+d^~xK$<w<
zdPR}0>T?K|aMZsxIN@{ub_HevdkLZ|_rYS%09hY(5+356L@d5UHN-v=tSOqd9fa4R
zDZ`?!D!QmgZBx{Ub7ue*RjJ!i5XZwi(24@-<%;;4J6v_IdGC7i$vP;NE8sOc+Oq<u
z3_LK74}0aDWNH<p6|%^S$6iZLavz39DT>4+l20&D#*JZxbxpd9lKvm|f?zHf$@Smz
z?5-n$+iv~>3hvQE&q$Mjuc{i90&x_z00ezv#wN<JO(6c;d7Nr$I9N@4jZv{)E2*cY
z{V*;Xv)Yo%D1BILtvTh9jGYt2`vWcR1W;`dsJ-V%>C#oqhGo2DiHGXPxWp$WQNT<`
z0Yli;vNDJKHEjagGW854MF#_`ZY}dx@&~goJ%Yl?uHP)qRiCSX$D;yaV?K&{6%3G|
z5DGI$^FCJxG2RyN$D8n9tlNRw_Y*#q?6r~=xs-(Ba38ej5>{8{xhwd$%7^xJ<agnp
zTwki9T^{y3JnT07oYsk}c}uCz4fB|!u`qG4C_X)<0*4J8?p|kytM27Fv#`r3HqI_z
z70PUpG=!LdF;gd>?AS|SDCw(g@ym}AE@0bMNJq3BYaw-(?Q(U>wIMZMB+=s6L{?N0
z>a$Z!f@Z^&VB=_F=amkXA}ubl^Sb@Wk~WA?y>xjb!rN;YY1Iq3W}{lRn{WELqcq5n
zX+am4h-I3Q8mJ}tb}Vlel2sFf_<~MnxTcyQ@=!qo(Id4;h=|!hD%oDXc8g{iiieY<
zOBdeLI@MQ<N3_{hsg;&Uts`4x)aM$1Dg=Gr-v^If_=glg^ppHfyTEa#>@`QRXg5s{
z;hzeO7cHY)=uaHK|LW=+-nlQ%$e!J{JmUf?i(h}d^}AEvEdQ<ppjOU5FRcJJfuKNR
z9_-WRMAC^vun3P(qAQ!KC)Qta00Sl1O9h$P1VYcR<gzA5AL^0}=&m>ZM5aBQ(~*%h
z^*-Z#CrX_({^R-AoRJXYp+k7)QF^kq;*H;n^;Y}7DwT?Fagh1m5B`{0&*&>o>Wp_7
z(3XESqe-(+LOBq{F1;Pl9<ZftGI>ncnwNN{<?}tkYL@Yb>0*6ZAEX)Du8IKwZf$pP
z?O}_!)(-T5&CQxpO1!<mwTTV})%Mhq8ZU*ByQ#2%hTOI}^$mMc*WbHcV+6ki2b5(n
z@ZIs*6pjbEK%=8B+B#Q?vgwjJ0V0#nDF|XXx9M(Vg*bV3dj@pjh(`H!2|ahOySyIa
zgJr-Obm6RR2A{)}eC$bohqxg$4;B*ydJaQObi>ijTEIO8f{%{ks)%-z1h#I2o9Aq>
zudQ|A-Lsc{OvGmjn|XR10KB6ZOjL{QqC_maQ=L?{cYHQ)HLDq>+{cPSTElN*ZAc!r
zNa`Gfjp+irri)+9Vl|cT>Q}a!`9-dOcOVb2Rp`<UGdbr@Zkz|BlIKc1JfF{1oatNM
zl{MCfHa!E%4CGA)Bg?F``eM!L{&<mw1=CdUOfI^vY2(AYO)@5C)Mlg-i1<O^8cX|!
zlniGm%CW1NN2@=O-GB2tKmmvu+7;)eTh_6RhK+_hn@<tTe{i=5rFMT}W>Q^05R{Wp
zqtrW`A%wYWiAb%C+9g}eiKxsp%kDwL@LMPTRa<f;NFu9dmU6%Utnut!aF-i&>v(md
z`1{m(=J38&^689mkk?O0(QU*Ozp?y{-|DJ1#u;yG0R9U$=%+W^&32@8p7=m-LnV_7
zhRD}7dy9pbv2-P<Zf~F`H-kD`b%qsJ0pXbYSPSr@XH*}-wie!gU%h<8-cF{ACVv#P
zPioT=16AZGkNy1<BsHy?O$pFu$=4x4GZb?A&Jh=V-!5!Ndxkr=QM#?t=o5B){V)pk
zLAX5JOERd%kWxJ@)d6%)W`Ey!c4^-nx&a%u7%Ch{abaqQ4z1z|hSyKl?6GuW+iSR7
zPH-IJTGipyZnp12)S3WlFC?ij7kWPMV7UrR?bAU%OO&pI3CEbCpV|T{vPc|M(K%(7
z)?6QiMo_@BNE@?*7a&Hh=(owjtz&Cux$v7q_dcq3)QGP9&p$aAOQtTe-K3|*7#NK_
z-nqYL+aa1mO^^u`6p@4haY=Rs7V76qIR_~oK@WzZmQ>;%z6gY_;e+`P1YMpEQ;3N8
z-9COBZ0w=WP(2p0f*&{NUjN;&+!a%fnQShr@X(=3N^I~<tzw*EEG(?!nSLO2cp+tP
zmBUc6pTE|Fl#9WZ2xW$$BmUV(*iQMg3!u2Gf$$z8X||;6xY@PG_y4&)rP#-$Ymv4?
z!W<F$cj3w_|CSNI&?9|vlkNZr8$}`!36Ree82`Cg8HIgvmeW^P<z6x5yql2JL^$R8
zF<tX69ez>AtI<W<0$w=Ra=&!&r%mql;DQHzmtv3MU~n+g0OrxnI4~?LSLDc|OD&gT
z68Nk?n*H+`Z-A{xjDE?es#X#vWR&eSfpIzmPQPlf;lK-HKrvj>1KYv0;O1kiJyVuF
zji}jzUi{MX8_C$z{}4{9F8FoD_sowFQrkhp%R&x1m$a4#;j>$S`y5b9%g5JXHVrEy
zpGG2eu9?e_j!X9LDEKVhvD;pHY4XbB)9shTFs(}_<q-t|t5x~r53q0Z?8B_gmX{1!
zAmhJWs?)o0@C06W5-JvQ0=#8zktVt>X&yIXsc)Wr#H4j8oRn^cBI3EPom-3eY0YRP
zQ{v&2FUGH`iHi{Y$a5(e1TY^OLUa2p*>I_+m$d7qcl%4VzPea{qL2sJZgIvJ&TqT<
zv5Udvj6XtD4n-YpG#dk3pVI`FKn?>gkKr?_8t)VIpmMb5l}QOcuF>lD$NeM`HNvzn
zAoMZkb-IN}&As$TN(p&yDr0EPmjiphI=go*CZ_t#H=+nSf5Vrf5*Fa$GnHQ-baGiI
z{ce@y?pFBzB0r!3B!{V<La2_T8{BQz618g%5E@|cNYEH-S8UZS<@AtIouQJ&rw41m
z#r!7>)J=%Z)}u@}^~XbeIJ_^%SDW5?A<PGTnvd?C%3Eps*nS?g-Kjb6+y|lPw2kJB
z(8T!(ywu`OLuo{!To4*Hme}L`FquTz;G&jTX)r`PhL>ac5XJ}dOsBLZ89l}gShH2V
zX#&cm7~gA}vUflKwSYxaj+K|5Ixv&oZPcRybl%-=YK_3c{YKT9`L^j|gvNjn1$<WA
zx%{vF%3C8LYPt%kNrg1FeAl5VA6+K<6++$x?Y_J6s`$R=zOTOwZ<$754gHBHS9J0G
z%d$Gdxpt+<JAtvu@~Lbf7UMRze<HA2QjBvz`BdLE9sC5{!K?2>@>}k#mAAb?Tq!^U
z=|zPRCi28!Vh86T+)H`P`c`%+Wwf>@jQJAeL}^6AFk0-RL#tjX8AtUDU>uTcWAY_;
zGMe_9wNb*+K2%mHx@914?8W-~l%!`;W+YQ%GX2>~_g?;<-{CS3Xww<XR~0!~P(d&V
z6z3#&6bW(pAliH{?GLQXiOgKxN{#}0sPfP<V?l;;tNWD+(eAOsORusw<nM+=e^^S=
z2*OG7w8t~h*C)qo+GkL46D%Ei^ey@ZAW1gabE1w5jtGIE(`dHF2=9w#tWOVa39n(^
z74J2<<%djODKRqRre)4oi_pwh|Mo&t^F~Hv%YPS(q@rDX`Kfo>!B`yKJ<x#OP(MYe
zJ+p^v;@dDxWF@RKghzU6!jmg2Tu#hxaBq7Z)n<%4U;TVFDI#4-yCs?ZGta6H#>h9>
zSQgGtV6A8isK?1j(R4fnS{AKYtXY($cces*Sc(*43#2OAw%FT_&6t`hugMs(?um*3
zWJ2a?xv1s<x&BCw&fQAro}2tF`ef<Z_1D2~HP$LKpU9Oc4bCxPKfn*T<KKt`Ruu8B
zB!=2QV5dfETF^o84=i(PFteD_re|R(2<myxmXX|$)|0ikhwLyye)>9JZ}W5a%eLFA
zRUnKQG{lM1bk6-69@hI7lXsop=6i~}0n`9$tEy|zC{50O0YH71Kr5fb4;YE_0;%1>
z46mm{SRQ|>QL{*1bYe(`h!6~d{SVDmDbz6cU>Pb$7<<)o3$Hc_8s&DdYp$W&jpVq;
zga-<W{0x;L!z{^P0K3{R#eO5KtIhX{lW99)MqN@JO#84zFGzM=L6!^HBf~;yY~d#s
zyLJH3d&p(pgeiK9Lp5rs<FWKy{G{=cS_;7}E=vS?#@h$jfh>=kfUU^tixzMMgd4GK
zJr69`$x-eb(~$kZZ>ht86Y2TsIA7g*{~2^)nwCQs%r~`qoNx;9i*a)yEuzH->3Mv~
zVUh!JTNFuB0Mn<Qq)&)TW`*gteYriihPFIEcm^$l9%vAIu^|h3eT+W2Vo<V}OsE>s
zdPJ6DthbPA^@CUJpgzXN`v)6tRUyQiFOJpVUn^`(HO5k%KW_8HoiM0dzB`5PO2s3G
z#Q;Nyl@*pphZuZ2jr3uDjS;7Gp~37T1HANz|JEm0U9;q8OcHl1sOf@&rqE|xboh?g
zVd3$XVBof0t=lxx@oBo(KHu^Ad6&{s83Uds>3C0Ni!ZK7hH%g@tY`ki*NLw3i6YQ#
zQf-$!sxtsG`o`z03s-|iH-9Lz+|T+ykOxomxg3L>c~bDdwZTnE#0BjVONDH~XB}yC
zlK2k1L1P{x9SpzGVv|Sf#VQgc5`9$C+5q{SQbxRio2yOhi9SVY{ebJ4Q@YvC07s0a
z`6hDD!y?mmyT=(#1hMTaMQae6fU$IK{&PTyjlRDKn3tJEVA)ulAoqvjK`z@}x$*6g
z+z(fY(+&86)H3ZO&h0fdTWS~3;Q#RZ<erBrA|Y?aLB?6<UmxQn3T>0?>u$dl1FJPc
zDY~U(tR*uz5FSDR%PbV&I|V-tOojo(rtc<0(CJ#^ITjp%)@RH3ah($Jk}>>Mkb2;v
zARl91mKu^`=yI8gek)>d>ovDQNrlmID3ERAf(Yrm;|Y<b9M#=p@>Ni^j%N>Cd-I$=
zjE%FED)~7F0X}3>pu5EdsE~J0$Qy16jit+`mjGpE-dVdi<aKSab^5^B#_VscVa^jZ
zpYm8BtM#1s1vc9wWri+kF}98Rp_dk^Nmv4^!e%~}Lj{gAv|dKD3x}&87XJk0olO$%
z>d9ADsj>o~LsZV=x67J2JB9nGOKDF|BDc2adXs|v>3VJ)Dz8qaV+@3PmOB9)2NLF^
ztjE!)WY8L>o+=$Uc^N(~WUlHu{hyvQPj%&Dx}97H7WL^v%j94EyRJ(?!6z$ghhozk
z?7YZ=M#z?hj*|TLE9NZ*ClRk7M6fvL)b%^_Fa*(FLbq@)3u@Pv=YxseFN~JPAW@hK
zJh-|pHAUucx{*!(KLys+nl*}Qy8ZAtWIq~`O!DL9tG>!oatCYc-|2Mm?epY}Gerg3
zaO*l|LGa>t_FAg(N?u>W`(o$t>vsT}_d0*=M}~|wnl-_=m4VAgXUDHaM9hep&ju4?
z8A9^hCn^-RS8RJGoH3@FC<utr9YMh?M0dhJ4Ua5828GJ};uz?F#;M3OtuubC{lxSC
zP@$4T%p0YB7IT@%GY>Grjl?*BOUn}7Rf<fmQU@_0@2BP4A1AV@N%oO78$L(LPftWh
z)Mo%Z4rDB2=l7n5IOiAFQ5mGyxrFWvpjjPc*v$I9Q-9N`8Ldy?vNBzpZm8V{CP3VJ
z8q(daXF|-m)d0z<^qn;PY8!z8V@6Cn(M8G2rkrr{^eFVF9*IIAd1bE(a{VC(^wp~P
z=;lR&s4e%JmlR(<MYKx=GE#J#cnVzp-?zn}wKxflA4tK1@g`?Po-dPSv^hfSi)k<v
z1SuLJz@C|vUb{cZx`)KF1H1Nl<~G%&Bd?{d{{<=kiUvdSukGmWn*6vd8KEt9q3^~x
z3INov&FIFVq{`s-1uUN&=Cz2BMw$@rI-60(^&k@YtgOwanp?ILeTsD%)7DO{juG*O
zn||SWCsWgNbpaJzcHok&k>m0StQWa;eX9L-W>eOvm2*agbIvi+{<B1JSR996(V>8}
z`UrtPAhT9IL&vJ@Ym)A0Hih}n4>G;nw(ap+dqI(=bM=?jPOT(DTzqdjy^BoG{+IV0
z!)T+DnysC%1Du7+bQLf+dUm&b5)KkO^wT^dy;L2HbTl`zO(VdLUGZem^rm66h_L1W
zw&&yZvBr+7UUD!FEF?4)ENNmu`nJ36XI4@OEfYy}r9WCd${Pdowcfs?BX~x8MU{Ew
zhHz!3VRrv+AKs`tkBC16Q5;|gWiY-#YAKrIu^Uc9ZZ95NvRPIMmqEo<-_3G!2M2&j
zXu!%r#4F;2=}P+OJL3)y`BK>~a<x%(Mybm)*$DS{mUaV~8~Za0{sQUgu|`-!a4H^p
zCy6Jp#I>3M|NC>e-jhQzR^4y7FizagO=HpOUuVs7XVA@N>`wMf!-_odK^E-!e8n$#
zWw+fIzeZP;<G+%UI-MB~kv=rdk4qDIbw71qZD~dk>}^PFrH4So?5a5fT(Lw^o19AP
zhX!qbSa~gwfajN`O*?wPCX>REZz2Ycn)nbu|GBvZizMy^mq#=$F1Md8bw74n1vcMp
zE3!TcDffXyM-ExTLlEO&>@VwBOU*@&NjP$PQ~sT0%lx4hmV|k;p-r}0+9#dlaHDfW
z15w~-QxOb=a6>PRcl5r4Fe)^-Qbht0`EgB@vChp?&y-jTYx6((Hy8p{^Mtn+jYviB
z%_xaOm>;X&2ah__RO}al2gVqoljCKIy4Q3xw0wQC<}v<CeOn4Y?3VrhQ@c=_oa1#L
z7#<Ns_$dLoY-#yxvfJcjx|PQfm|$J>a4Q$l>XFrrQK^{=IA9TVofC-V$P`b&A6u_2
z;@qnyK?&_6;m0y*F*D<Q*9u@ZYk1u0p3#r4=xU<kw3Gcq{~C8WsarX%x0L_cu^Fh^
z()`5qZ~SS2gwVaBN)Zpz?A$}>Pb$Oq>v~SYK*`;PkBAHab4rbd3poL%d(>s<{1og-
zePu~)?rVRHbzX0VPq;yUPVGMniRs5%`~It)3sGT?r4e7%*SG@PZt1Nxtu*GX6+=M4
zZTKNIvNKS6Q+ygvyNX$HF>*$xZCMQBr+A)B&WU!t3MYfbhEhxW=rmi5gjT*7yDDKH
zL&tAR1a-i8?niE$s0xB>8-pz+hkm@-;sAjRcl^Zb%aLc~JAmgOZpStKGKku;j)PkY
z56!*A-1K(pGo7r?(@qwv)ip|75ND}?QwS%L&bF6tO@`?T+LaCMiKOzl(Cb9n(T(bT
zBmTecFzQt%Z<!fg!q#GzEfPf&M?61IaI#3BwR_pllvZ>s-LqAaisQhvd_-Y6PD(l=
z32);PfD?N+w}oJugLdoz0UXxhLN)M_U5j@-j9aqZNMu;|p+UY%B~x|eDnNUE32?B&
z$UM$>s`y1VQE!}gNq_y6A-sZ`i$jY6jmxU^n!gUV{I<&FZk=rPt3R36yLciWM(6HA
zo&qILHy=0;N+cj$z-Fq(lbJ#C_k8dbIMdPeg-e8S4Sjf$%T4nWVB{HI?~~(nE5`uM
zfROj`{y*a16j9YCgz3xvb5^OO__M2$g{vN6Uh(PS2^D;ys(VFmfZdE82jee<<A}K|
zD&h~08XnTL4jP7tE>NjKQ=sXx>ftRxrOa?CdC_gNJ!I*2#?Ttz7P@xK5<}hYEU5-i
zfU-tCl^j<>Z#IV$+$M)TpPP<o=?uDBnP9>^A}NXnop|-~D!t3}y(-4tUG>#bwuyTF
zEaITGP-=qDCgEulo%&SZa1IG>w(?=B?6k7DQbDSLVxJ=jkBv8S>-;I?ek%&AzCP`d
zm-qBB)Wmy^Y5<dZoT=JOh=@L_xR&M)zAUBiQvDklJ<qAZk4_Y=m6Vjy#F;_8`8NIP
zQH}u1QPL69PT(H(CO8f#O42HD;P5g*UEdtGPqnT8qOmO)6K&nODD~GC`?3u+5n&7!
zd;w~utbNee{I(DPvOT*KEO=0X?I-?d19vP6?<6df&l!N8=X(rzrc5l<!h^Lp1O=<i
zB*nSE1zD^cOuLseyr2V;X3P|jnO4X)&;EH0j~q?k)&;o*?3!4ztq@L-gu6*zdKB|(
zXWfxtQq7GEN9^yAe5GD2o5=f@2)>fGGncdrYRo1mEM9}>NpDZ<R8?Il{P}kNWPE*E
za6uz!7z`1+KL+9OnzWrvtatufLlnm^q&{0a6s{bF{JQ)jjt$4}Hb#B8VmJ$iCj`FZ
zwQI1{{Qg#Hsg<PFYrsfa)jHD6ftur&Zzvf_K2pr;frxAHz%IGGwhLkp8XNX+{(t>^
z>jBjusM<{IZ`hSj7^nKXy36YEn&Jm$fp@1JdrR@WEZP(Brbl$cuOsjOK$xmOm2AA=
z7ou#@EMX2a4QV0@MR494$n9oPYpq7Z&`%(J1L|2VgiJv`3KatT=O-Q2Ec;D!)7KM`
z@~J#6|L8XUfpkP~(AS{em)heDqJ0O??fbFkO-eugyTdP}G;2U2%7OsrFWanQKfTmc
zVBLS3@(E|N%!ec8D=fmuJy9n!!kZee)~$qY$yFe2aK%#@x0V6~tTUynW{3vAMZn%T
zpihsve_egfBqZ_*))XG=`iOeIW@;~oCS`=ihe@_3Pv5V9%ZS^dg`H0<$2dVHoDX}s
zkaj?%|8FZpiQ#{U0SuJ$uW0PjF(vuGg<Q{=_c{Hs*}JP0dR}FjVCKoWccl8!Vx(>+
zOyB!^B$UOE7;-Gn?aoK|fNv@0xq8DVUZmrzT0mZSBiYer7*~~7ERefN`MW&yRH5~6
z&{J~R8|@Ij5IYDbS7*3zbJqTajVTe}3v>i)8Ij=lP5dPfhV*RT0ST=rX<M%);(?6A
zN1cTRUaz<+mC_Nc!`Ek}z!Cdok_FVFlp6w=o?v;pxP4e$#&A965L%r`zDMeU1&b&$
zR{^&lwJKW0k{X3VCpELf5Ujx@R8sUnzBle1X3NGsu|dHv3_CvhIsw583W|t`<s8xi
zd1WOuRn=WzS8tN4#HKypDbU!T1C7oIYIjLVa!fJa_h@~`JVod$K5rmY^jlz6ic)$b
z9JzWimE~5H>BQ=+r#6vX1E`W5Z(QG)-~)xOVd$jmvO%sj;yx&xHQcKg*@wJ!tG{l>
z7?X0<!2lY-%S<%M-)-<?&oZCV*72LR2b5Z0{RWZNaK(a6-d^A?*NniXa?hI(vaHXp
ze0l~KqCm<x!?xgL?y*U#Gzd$<@$#4ut|+OuKjVIT2Jy^-6!zLpMxl?bMh)D*o41XH
zVku<AFoLk_K)uU%R8L-4X`1i;)uIlm7F3j&NxZcd#WdzVOK$Y}5?6(@UO2$3k(PYJ
z8c$}IQ`(fFYfx0K^o<m?daIJlp7c)7+!EOqDvUjn6Se<MXi&(99VgDH;7Tb}6Y{kx
zy|eS&>CBT+F`nh8`F2(5rUM(-ibRTB*^ikTwlltn+=3w9MiAl9EAVt2TJ%!H9?VM}
zv}hk=kYWzMobqg~3hfS5M5Q*wjbK#9<s20;&2bL<WdfKb*I2#ii>H*mVs^VX#5*}j
zS=Aa*Vb)wZh2$6cu@ntdr8|8;-IZD8n5rfy(A^dki4_~~SgqHYBaNliVdw@R#3`Ly
z%Pqqr27YgQrc?E3TRv$Y1^kdY0he%55Flo5QqEwDm$(^wPcMuHf_<rd--`CmxP_c=
zU>#-63^LcNaQ0*p3XoHVC9A0)&fLC)T9T+F+&l7ti?p=*P6JxGwn;;sb$IcE56Qo`
z&wu(Y5GZ12zXuPv!`^ifi`@a}DEXYY2lE9q%1}p?mB@ybPt+c}0<t0E-=Y)kh(!rn
zA2k4}RI>C7Q%3??SH<8~)_^!xJ9Zry|NQJD3$!yr-tRh#t%xf#^QB_`)E!rrzoVsf
z9HR(a3~0|d<i#DCay(^Fc?VatkV1Ulp(##{q4#jK`!!o71TTTToXk`2tD&yWBncMf
z14zl<RM0r?S};IL`caW?n)~sH8z@^P^<*c9Va!1gPSXqKt9_UB5q5|yt6gXWedo@T
zhuXcP<R|5D5JQ-oX)2l=&<<*ApJ#8v)N2F$`>oj1iMGy7g&8-Mt&sS*qV$g)i|dm=
zaG^%1O`1^VyFo<IdiK~T$LJ&IeTrIP2(2$_NQ^HbJ~+qUXoaKCANz#InYW0yX%@Qw
zx7ohB0*vvGUVq*G7mpEhEeO99zJ{O3kw~`I1UzXfh|_ySab9Z&lDAb90Q~-4rq_9g
zmCPv{x{>_t<CuooD?O<qrTba<Wo1S}8Q7Duh4U-aK;0PF;*7BRtwKBie@r~DnWpb9
zhK^ReeX}IP!%zUH?9%mZn@!!+)Q5tDbP}@Uv6!FD>BY%omp826NZ}M#{L6iB43E=5
zteDM<2&D(e)$ts1;?}G@Kap|*q{CVbX7zMwu1)si+%XXFXv$Hehw@rRjfBGnyv9!<
zg`FG`d>Ap!c>@KEablp>T)CET;_83_QTUa`^v)Z>YtRJsq_mcaeH*2X!d}<NU<2FH
zs2~|?!y11ooXH$K75ep?DPxe^N=f!1LOHtl9x{Y!rfTB^w`SvN!!|W4tdHL=$_q=p
z9enn=7!`ljBlHQG37yWcKqclK<HWL;N~L7iUOR*(ca+YPyFIIq%i^2%r-ro#&V!5}
za5s={7k2^ur@YPL1J?~{kv`|j$&<eV<~q|+vp)?5>-3|J^hu*nU22XIIJrAtGm=yz
zbXMJV2sI71V!6hDMdlD7Q08vz9g4!?VL9jK;gw9Xr70F9S;#}{Ak8y=gZ+<Q`bZ%k
z&^6yq{H~zjUaUjqRoN+XLtYkx&0LzWg2-=<*~_w>TyZw@>RtbFO{IHx3Yd5u5VV{H
ztwur2ks5-F%dIF>x=QE&$gpSdTT35hqL+#fmF=k!!_4Osr(?T#X(}mWRn;zINX{<@
zn?eyZxh4D2I8QDRLNL_Dgc{;X6c9_3P>&|kFTMSWNczvn@U=@8Sw7aArH`_;?AmVa
zAl=Wk5b&lk%+Ie2ba|4@Hw(eG8@3jEl-{ab{oO0;NMhAXT#tHk3!)P)5Pp?1zUFN~
zyU%j$<3ySYt>7!U><fJ1sG#KcxcEq8PtLQ1#+$(lsO~5DPsrm(;B0)&Mfkl>Hwfs<
zjt~dc(^uXg`UQA;IB{s9>m1t)GK;c49oN4UnotdSuXrnwN)iDbrk16<^dxHhx9{+c
zz)#~os#VZ)4b;R5I6U$EI~An@W9wQhzP^hKdi&2O>_IKsecUD__4c(w&YBBu)l1@M
zP{qD6_{sJ99Jzg2%rYm4hp`DAbfFMd$2H%jbygJ@f3Gi>uI~3$i%8@7i$C7&8%LLq
z(DF7hzrtHD8Gz$^1veoB{NU%0QDl=-(Ax0BKvoG-JHQ|fY%n)>T7>1^5l)GUu~ogy
zv6bq4;J(2T9^hG+z}Yly-B;mn-*F6E{$`Jstf<NFLrv>N9esljFyFcCr=oIJCNa4?
z>-5TT2r~5D%wfnP)1T8m8?C+Xs4|?W;H({1PKzGU@A>GW1OeFe7nQ+kx8Jq8)1Fav
z0@M$`N>-(e4(j0SpCWsM7`?x#_FSSZ$gxb$0C-V)7^r{j4IH2z+eOWNJTYWPXX+MN
z(FUcR*vPsMz1Is$MBk#nv+>mtK(8>M3Gfrxtbp*BiA`_I4O%=lP3(cOfcP)#Zick{
z*cWBayUgXhb+PC4i4L-~1Vi|JX5P0szGf6S{w(7f?y-WwCl~4OE{Zbhb3F^A`B2r;
zgzY=?C1l%lkA;42@zeM8VAK&GcnMtK$dvvL(QQrBaC$a~nuDFW>>a-V`CnWU7xKHN
zJSdI7cd7}AG|EBgp9}F|bZV~VLWskc*id*mnx)~);I&g`hVX^)LEWj#w0;-nSGp|}
zR6LND9e37YA`!aD-0pSuh4SYcp*T@RC;?KI&I77YXf{&E11n40RM-QjbK!LxGW=CO
zWO)vXsQF7}qjtyLW(SZ;^=Mxh=<T)%`0`r}&rBCWq!aK7rW3i4Lb!!HGr&(;@rFKw
z?m@oHwBOAB{AS0pD=pMOH)BzA^o*{2R#4bVhCbNB0Xa+!=m_%)(mcfGrES4PV}Rpp
znez#^zEMOef!eU6EPDKe8FGq1&^aNU{D!WrxWZpo9wc=f6;`GgEW3}J&ATGXDwA0z
z!XFmzTIysV<>k@}?q;&+*F7xJ)%J!otNpq-p69j{{VN}&Am8K2>g)(MCov8ZeUK<e
zza}|s!ZlvsIEh`Z;m)~Sx3Hq6OTNf&<IquazB@T~92;bDk%E$q>H#C|LEvkZTD#|S
zi?01KKAlH*BbT>v<De@UdX1!bHw~h*V6~@UKk$iDNG{`<$H5zS(7I!f2-s?i>9GV$
z`YVqu%$^%AdSrG&k<&am?IQT#{ggJy8|bX70a4?H9!nn`t;$_9Pq3~jg@h)hdgx<R
zj0!9?-}PN~C|WRNVQe$coBHnlDS!Y{gz!FSy2N}SUQn(YDyzQ*wQ&G<%K*{v-c@ce
z?k9S(@5$%^$d+)zcH6@z*P_Moz??%>B=rC5(V^K);9K!4)t8fM^1w(T3|2M-5w3Z?
zd4+SuGhoZ(@W^Tc|D3gZ^I#d2E+8cl0?GqTD#nqSjn(~>`^<Vywy}_mbu#u~D#gq#
z`yWm{LiSnq;s?S3=2`r&_$K|>=_H^;%Ztg=GI*r1^Jgq>D}QU$zg>_I{OQk_;oaX}
zXidY&jajnrfme9Jjgxm+7$NH-#x-tQADu8L5H;S@6vDqJoBkU>Wz^aAxb^G;><K!H
zB90Yv#!?R2Sq%>;OWXT^=q3-#MJ3T|;ANzj*BX}#Il{|&hReWjTouJu=<4$-%?pIw
z#4qyngDQPaJ5RE$=kt_bS)q~-f5#l;xhONSH=k1<%clzW@FfSyz-7EYqytcSYFV)+
zh>62z#2_6)2?pUYm+IKK=m5kD;g2UD1Q)}io!!fk4w0v;i?PlSHN8-w(m}+TS#W|x
zDwafdECu8Pf=;@g`&#g^plG!LDHBRgr*sfZ>@(Cf<ZZ_Dh>4)G<vp(pq-;tH=jeM~
zrZv$&%^6sjmCQgxG-a>E?F-<^E#{5~P2Zo*WkN*pxP5gvmr-cf{9_mA3eLBo8oy<r
zuZf<`wLjsD+uNtkd3!OOmZkzH%i&PO6&>5tTKN)F*;ao4tqz(V^)=_-81v;pCdtO;
znP86o-6V|s0H7TV(pV^3W)53iCF*cUD~nuqCP5}>zsFWW4ax%DHA8($#z;^qz-{KV
zoXWDSRa^y^K)f`B9{vXvCnGe^i+xMV%as32?VDk+7PkLWdhxs5+4^=MQ*FL=Lm%X8
z!s`z0h-@7Hm_3shv$?Z?^>23^_NE5dI^wv#9ct<F_RowFlSp6U?+9^6vz_yiH!HB_
zs}s2*BMD1?1Si~|BEtE)Rm#DP^_&N(#1+$TWCLXn&P(JDhqhp*z!W&1udiWkMU+Pw
z|7hADF?23)eGV~6amsd)wPC~)UIG>MIs0XGJe4T3c@_*1N4W<THF7-%sb+0z0OEaX
z%hGMXwq(FMFahKwu@t@g@^pqZ$FW;!7NkQInJ-qPIIl0-XZoi<onN!Sx#eLFS&XjY
zqSAlCh&Xt#VD5S<l@L}{Z@)m-d%|A3823{NcXcq9S^?NpIOHs+1<b1U1V+z9JOohK
z-+51$eMS?m)J+LD<rS#rA)9*s4qF{xLTCM?Ac)@SOw(gf_r>(=*LSv$NM4`C`^mrx
zjdHkMDF^^F!Y;;5BZ1o0gZ#?*xIIx#LG=w4<&%Q$#Nd=oLxyVOSRIKa$%l=qFDb-E
zMik23Nm_~yzw-bUpdpePIeVrG+eabXDLy`-QOVG&By|^-0}uma!BM3bpeCTpW<&#l
z?4W5MA%=`KjQVp03*GLDKKD0v=4)LH=X_`QIl9QHh`r#6Niy_7(cZ5>Z&3azAnkM2
zD4zR4H+Mj;I=2GyK~Fv>fHng!>~N*X02V|3ev%VFg;YLDD?!R7i5l7f&pkm!9rrYC
zj|0fPNvzz+glmZ6wLsEt;ZmO(>zAVU{hx0JE0pS73d$ANEU6&8ic+8;02?raX1+r<
zjx;*^ejc)4<_h?M!#-NJ5i&Dq9cM!dU+E2W(q|EAE)sWTsVDMk76k#Q8Y6Ym8!7bq
zZvd2t#?F`Jpw3w}YSbY+!7OUaQgQVJbyRaTi|glIh(iKL?sz)$sM}tte08*kt4E%>
z(5p<Dp4wp6+udHiA5GW<$h#kqP(eB}6A??rQxz%Wz}$%qHAd_VWRf1odb5Bg5~IM-
zTT{E~y{u(dUhg0nDRh+=)v?b2E=O9xwCwr1(u-tjjdX-!7l#iL%qbNsZ*|BfSXa<6
zlb8;=W{^kOTw#?egt48D>ue9*1QoKB%A+_)EYFBZuT%-Xx$aTYW{-QVwk+(YScv=1
z=6s1(cj=wnS8i_06fq-h&BP`=aWl%8@$>n)_qfb++#eLGsna;}q(Yo88~A4<2^{x^
zW+7QM<l41}mV~erSexq7C3>vL1f7@#9~KG)(rb5*lE{$~#mOhs^VK3~O59wt?PyGQ
zdeVwV*U}6PbYVX^wCN9kg`bOQVI)^z<-chhgv&X{6#16uMk4^5WdiI()ynonZ?!b|
zetoLpJyq{I9s*vzYnn%q<ECnnsNa4o#t*0ZYL3Xo2wDgTa}|X^IHLsg-PF_W1m=l3
zI^Q62i`$)SKD@$xRtcM3OuwD$WBr&LD?63u{`)Y1)K8Xf|IL&y655C?5^?Y>W4fKl
zzL7H-@?C}vOUX6<AhxJ)nAG-6o)KTsls$v_4Nn`pbcA%O+N5{t<-&xwvl+qxWCCo~
z-p&=KId30DsMbgMz9_aOlG|ZUO=~7TJ1VI*MsDt8g78qpR2dO)h5SKLrLZRq#3KVB
zG=U3*vcp{lniWYKD`Qr@Sjyer>^<^)ypw%-by9C5p$C<%ZEtRqoP^aBKqj?JdqDx|
z*|k7*(Kt}R?BgmTd?JCW#+c%RPWVM}z_aB%Z3qFow`(E^r>}AlM27dgs~3nAcQ-Hp
z`S$a<tvb#Q<`U^gqQ1Dn^wk?qihG&xl+o|?oF8I&bj&d}9Rt9DSXNZ|{O+k&CKNor
z0u7Prbe0=Ksims}lr}l5CyxeID0Er*n!g1^Zt#B4PJ^8WHT=jfIZU6+Zak93E>CMt
zr^Jn1_5;okodqHyCz3b6(;@J)yAq%81tn{M|MfW}$(ka+b#Klvo57_OcQ0-xwZ}XT
z9On!$-etet&Um2}y$JN-@vQP@v+?JfujE)O|IDjtX@&osVA5AJPH{urH)QcUuH6j_
zu|HqWs-Y77dK_|}-WfL+23(#RaxVGLh>Id;LjY3*`B9sfCjaT-qagmEta&s(Qc{4A
z^4F9IZOKvP#SB@F6TmB;&oOyneuL}sm5zyEdw13bG^+LHoHq;^(vNnKx%;*A?~~rM
zn{rlsbKJGEsx$vY7k?#ZA;?MRmbS}R_Q1tX>VR!*0K)r#;{Obq%rOnMO*%o`rxLF=
zUo(%kp*<B2cJKx=4Q2-M=7&T6NGxcD%sYaZt+}c99qLZ-(X|!CMl*^9RlG+3Suyor
z_(F|2#y*WOx`2U$y#Im)>rt_8N3z|B5ydGTX)K~0_vngXEBRf%<i-X_4QE41ib{yN
z1oW57SptisT@!Hw!B@jONCHyLpgqLK;5fbh)pPTjh{i<ZMb#CreJX9V%Dt?%bsudk
zoR`T_-31CMZ+|JJnD_V?Z`N})qCLkC`Isj;<Aq2<fBOuZzym1T8~`T<fJL_X3q4zJ
zWOVvB2hTlAubYR`bN9@(;;@woY)r*NT5HG?9~q7~&=d$zK3=ad=edplj+Tu*uHir|
zjqH1Iv<LU4aDC9+%hu5H8zGDBjf5e;3bxPuzJ>EtnP305w4~@lf<~^6Y(PZAsXE;p
z&k!w;YH~o4!gde(crUMyArc<<7tYxfBA|C0I{n0LoHf!uhy>m%*x`Tx05-lX&AEV5
zB*F>r+DiyraB7b&E+E7bPl+lJ@~E=}K>r!{Bep0<fB*o;n?ag85M%%T)}|?6?Lw!}
zb2|5N2>t+JNIOUt|L98nA(Y1EvR;Fg?mrh!*7<TVoEF#oHd@e$brI8mz5PzQ!C~>I
zjoQ1l$uh`gJOEQT<`$^g-N9Tkjb9lAr~d(X1an0oa^e1zV??fhu1F78d|^FXdhjGf
zjYxaQ=&PP_4P^Ja2>jg3I_Zp2xvp_vvkL!*J|lO5f)$PD+>7Bv+wD-GO$|l1gy+|{
zJyCIr@I-q=82>e^TQ59-d>WKQUT0t)Cz9Pg9i-!1O8~;5Q-Q>}=3Z;fw6YED2wF0D
zg8F|IqCX-t*7HBhem}L69O)guF%^`Q5eUdI{wt_=K`HUy3_}jLS0geIu1n+XNRprI
zJ)nK2m9^?RE&of;GDq)8P@tSjB^~eR?*YPG)KmRRir=^f6WkPZN#(&JGc{l0eE~CY
z_n(#r+Pr`dRFh)Uk8EcT=m3tjkQ~V?$3lgrN_M#y#>eb_px^O5s;CBha_6dM7c}RF
zO&?U8fEqh;j;ZYeEZIhRRAK41XNO0uu7WfMioiO)*hn=ZnEW)|K~*7W59AUAe^ne@
z)rUiu?`C$RI~bLz+ko{9rSbMQKiI4{c-TZD2>fi$eFXZY=~%fti9QilpAPdhMn4qd
zaeSp`i|qOBnOL6r*Vw}Vtz?8=dcY@dZdP5sqILv_rbQlyQfI%TI@2NRHFJ!$Q;J-g
zAcrw6SnoOoHpm5|54$*QLl|(;O?3T%!x2Lf*W7}!rVbdkwPH)!7WHf%Q&r`lthKiY
zZJR<io~<t37Jk1mHrUy&S#R^G9bS~vES{jjbeHP_j@DKb|Kw5<v8dLvtzt<}O(hrn
zRlH#N9{0+1{kg?n>*`|SLzHvi#Sw)MFbezaV5J`7Z~bSh(TrTt+%2Gk004qG9af8+
zBY<2TeWgU1U)p%42gl3DDddNH<c8V8z9jTd@(x=Uidniy)avWC(>~=-f=nhW0U~~I
zwZ_nY<bL}@jzCNK2+HX?#J&K2gTu_nQ<k&3AkIYUl<&xSmjNB~J}e`;enQ33!{$kl
ztxe8CmeaJ?sG+LICq2IJ_r1@r`(mgwdl^-Z5Zeb6W)sU(^^_EWwWg!<yl8<$+XtxD
zu*0%;kiIDDp(cYJNgrR3>};%~?0(WtdD2Ds{WsS=xdpbMlb(F^zu(KgO9{o4p4-)u
zO{!S6e6c3Q?hP~uhOE=NwLzqVXuzJ1);wJQ>|vqj2JPj)#|Qe0?PSLPA=S~P!k=ny
zY@f4`5DNl4)iSG9T(Nnci6+!JrD%_0){hU=6!hWeXy2E>><jx$SFnraUPMh!OCc=c
z5wu>=KJx!?3DIQbk3y?A|Aakbtz4TX3{#fm<oQQ6aIBjAxX5PJNK8(~37=k6pkU0F
zBSF$;c0+rK>9OuPz|`xsoOxVcv;Sw0d38+If6Kq&Oxn3>jzj{tsm*MM&{+ERTlgyH
ziy>@q#M_Xd7J_xaT9>&Yw|9Ptu^30~+ph)&&<1wWhd!l*jBijYwnOTbo#`fkYKc>_
zSsb$3wv_(xEk8Z>MJ!ML`kvY2MY+kPe1mBIz7F)Mzv^Wq?95g5)rA5Kl8>3ca{VNI
zO3+eQIc_UI0&f4YU|Aj{ZeP`h*P5@fobkWmpGqU<Mi&tR#r!<Mxy~Rt?7(J-oa|!&
z8snAx5KmDSZE<vfJZb~4M<%b0&?=$uvv|F6mmYZ_qC)*x;ZH`k5Xk~o@GSQ-h1Ps&
ztf+9^vXVar|5`{h%(07rS=YyTX@=MBB-&^NYA_?ECl<RDm-oIankBLfx{(2l2fxQA
zJn^j|u;{GMqH_Ym)(8a^yX$ba@w-(O)A)ZWiNSOfS)z<%WFd`G9|ziTkUI`ecbjn~
z$@dJ{q~NO;t04$~66^P5Za?mj2j2(e(0%c}-n{wNn1DF9w2CYvjro!6*p+D9se$TV
z1l(pD&-IPo<S`o8wGwY=GEcL&#UTlPlbY*wbY(V#S@}XN)-%$y%;N9#ogWjyB;~oJ
zpwlzY^Be6f6`N=Q)40GhLVsCW=>&03k0V$t_iz=|t{pRC3BYH-?4vc?isyybhrzFP
zELK3Uikch267qN$<NIkUH;59PENd7n2;i_S>`83LsGu@iDuhK~7E{T$gKve|Z*vm<
zI$n;c2L^;mqE^G294h(B=@F4S$o`}}axz7?pTZ+(PZ&Eg8YF|1#|f~0Z8M9@r6$gy
zbmfpWu<iWjNfrq4uzJZ&0hmoCatj=h8PH(iJY9%o);^+t)mGp$k|@a3xRa2?$0rh0
z<0YQE<#8-}%rc$pB(r~U#C|Z%HE#4X=+^vUg4;S|+nVcHEP(ocK6G$Ku}}u>^92M2
zB!HdD23;m+zg0pM1mySh4gLC>V2^JND~g&agoch~We}%`lBwPlsRnWzcHo0Z%RBs{
zTAnn&GWIJOo$<6*bg=7|PjQM75lSccr8^d;FXR*@RHl^cRwYoJteJ7(|8L}?XQRvj
z^^~#j-4)=7TB4P=Um-^@DYx3Em|Ru(Q|qI404K6n&d;RR6p*rD8AR**_YY>9e1BVz
z+gTXt3P12xK?jzcDzYq#@7$AtG(rzLGMY??7rXs!j7SlS+xu)I6PBYx(WI=R-Jw$>
zR~&t%a&a`Lj4d?4^}0v4bu1A`?8=E?fYL*!ox}o+8-F)4j35Axk3HLY^&4pqe$7x`
zFErX}DmX9P-p+5B?E<!tMIamTBtPh52m-E&(zk^RKm9WJlGt1&XI=*9IQ2!vXv?5G
zukGJ$(@mBMPjeaM3MYVQc@tP|xVVins~AyEKEg4|j35HNf|lwcul&Rb45af9#xD|W
zR;QbYkcoE!Pbq+B5A6Uk9~K_T-MUkoBn`so6gyO>tF4lFq1?k;y^tVDcLLBWDK-DX
z|GT{RWO?+!5C4=gcHk9nuF-T?p_J?V$SJL_0<#4A)o%p~`I$Lf%TU2Da3*)_eiQXR
zj{<kZ($jotr)?G4TqHC7_zEu7p6$NaOak9YKbw-~82^V>T&)>zex&;Y@Isi!g4;xk
zo<H&wrL+ysqe~r!JA%TDtrBx1+cK?Z)K-mPN3%+<`pux8`;MZ%bFD>i%Ns%<<tI;Q
zXkZud6^zc@5C%>tzD*scdd%Ua0h#d6hx?V7doPl-2$E0`p2|0be(_@;%5aT=kFV_~
z$Gu91-8ReEKmbQTxWABv!fGK7XDsQ^b%n+1gxfq8(Igl?ub|+InyCO6IUVc*e~T4d
zR>Yvk-J1ID(UIUvm&WDgy828pdGlQC(6a+Ml~F?!9z>v!<n!uaZr4i1iCpb8JPgsy
zS1^HEo^q*%mY0pU;^9C4Ix|wDgfA{tEABAE>t@0KU=A!n&~N)9aPC*B)yWKK6f-|I
z5Jt4ONQj2CW8>FeqkP0F3_<5^Zlkaks_XHousa_dWRZZ4VQ*Am;u`;SAB(1LO}eG`
zp-ujWsV?k`Hj?xDy2mJXN*EkvlnXBQ6>3Lx=^4|&d|1M50E_H0cC~|k8>2FDF(Zjk
zI#1XaJM;AXtBye*k;Ci-V{M`h%0n{iiwoTBJP2F9R|?&-XO!J>c)R)Snj?Hxn?Bz!
z2C;ir|1T1l&R3pcc1M*m8S&9Ptg&u;6?VbGdBtc*m&}omoBO9_R2aXY5Ql@PvcI*4
zuV!~nm(sgXqqCi(USc4QaS3gk1>by(+{F|f_(X|v-D?1?vgrv-I%%jMm<fE$hxY!a
zinn`)Q1f{xb*Kv*nL^wDPJQW3w6C{O*Prn2M`?ZSbnjbVVBpVeMe(KVKo;E8Cx_1h
zPCT74$Q4jD<DK9viJ8p+%<~UClf#Ip1>OMjtbBa_yx)<2LA=$k435Wg8WuD30q=ha
z!8gaU<1-maj>?Usa54O_`bK)Exs}Khe~D~?`>8eak>9~9OZL*7@nI~c*LgFq7%;D|
ze)PF(9F2;GV;`TC!`$qJUMNQ@mtGpPKRK@=VCa}Jqt?pMOa4mhT52yK?CngT0(MQi
zP|@*K&yt$5L|!{Gs-sn(d<-t%)DKoeq26GV=8}cEuw<;#$wa-dFMsL(m}Sbkz)y6m
z<>svgWPyU@|9YYZK19XcID@gUyGZ{NJgzwoZbjp*8mry(VrPZFlKnIG06jU8nf`DR
zcDC9K0hSJVDwbehg<p(g#LKJb$ZxyL@uOr4yH?MW?@ksB{hMHE!x9o+wmDfUC*PpS
zzUJ(*w>>GaQ95S}xxGLB@WkUmG)P3g-50+u%ke;WFvU3)Etd{dVpFayIms1ynf}b*
zar)F*F2o6StUhHcx=sIuM1<w5jQELpGOPd#3$g<pslp%oQt<CFzSG7Ardndwe1K}c
z9TY)A-=_ZitQTbq_w!+X*8WpGy7y4hBLxqrk?0RyB}K~j_3gYHV9~Sc9%rOX;3}l9
zV~uCp5!Ia@*713*=WmeT7yzW(Z4)7%#Ny>^AlUeP?u9mxh98n8<Ns>?`<K=9r0Nn1
z{2lu@t>b;pAES$EVP;+#+QE@@2f%?k9ln-s4R1;F6=`j9$PQw`6<SVDm%+5q>%s9k
z!EY4Qk<Ec{ede-@>uyD+?=%ex>U>#&D5b&rmNX=NEZ=s7`SOqF5;EK3=EZLWR|Dn>
z+BT$nqw8~PEt0DGSxPd&X^yLRk`~Y6qS_D}{W4owOS8ok;Np$3cx_~P-^8-#HOOU!
z@X~aXqVgJiyCuy4#IHV9=I)Tsi$_X-dNWSw%WwX<Kob(5%J9MMRdZJ*MN?rBueDn`
z3xQEgxFpz9_v>U|eI(YKbhP{Jqs7}`gd?_nM&-}uZuNpHx=R?r3m)sx@wIe5@PE-T
z;VJ_+!(QCg?IP6qzyJL5^F3Ewp^ezjGoJvsZ#6%V{T4oYnyBfdW^J;BL*svx7uVol
zIPC62juE~FuR)SeWHDOt)6J$<9eEMkX&Hj#sSxYSTY+cim$+ZfGiU1!!f_VQ((f36
z$4h+^w9c#SoLhwEVZFa9v)q(UR~^-biA@6tySCV?`lWfDf!sXH0YYv@fumbQ%&r<a
zKw~m_A4JcL4NylaNd;@QTDR~HlADH_@NE}MO;D~`bpHNnoHm>HE5%;cz%79D6~F}h
zg=YM+*4ggF3i}PW*Cx}LQ%-wR^n>gHZD0`q5gY2SN8(EzObPe-38cP_OT6G7d#{je
zp{@#sGFCwu?^yw@DSlJ<^T%t>%-e4cCyh6fa}ivC)einKixEQI8A~H`CHSr={-!UC
zW76G2SN50d2)30Xe~GbAz;q9nM;jHh4@U1>0nkyU?Y$0(f<@{%dQXp$DhiuqY3AFK
zkpzui=E~t{8hFQTDeT==+u}3wA%R#^;AjudKqM|JaeIw{dRedcYH+4K#ohfB>T8dD
zVyQ6p^Iv|nu$yBp<4|Uu?k)*BPP1J5ul<nzHB!H~5bC1MpScxiK|mSe4mpv<C&h;C
z(YDzP`RX69snyIKqWnx<akB%gP`d~?e6|$DprSB`a3Smbm|_N`&xih(hu@Sv9QWwB
z8k(bOGhrTee1;B<^w?$m(cRDUC&n11txi`~E=LfqJn@vSZ+c}YBvL8N24FlCjKAYr
z3Ju!R9AtvcR)SMjT)7!MEF1EXb&BgMMGid0mL8}MFe^Eb3zNAyf-Ex)BRl9H0oOvp
z5~dnPJG?{@2F3E^@Yk)Oc6b$dR|ktv18cy;)9S-q(TD**BKdwm$6KVyjQ_AG*g&As
z#yO^0W6gaSfgY^Tgy9y~jMob9J&FR}wEP?W&cv8dN!j*F<vj`+GE@0CMbjzA91!>L
z)Ts)?t>SYPoxPERs|$;;e~4~4GxAj0d$RMI^uc9MXz*Hc(3wNCP3le?JL$Hii1|o-
z(RA&--EAaKqAJDBb&}BANqZ-B=19wZRyU2PcG5s56Fx;d{<h)H<ZmX6gc&3cUPw=9
zCe1Fz_5~n5^}`HQ4=I}do^C?>_*~B9Us(Pfw_qk{CKFCXLMOqy)j$fCRGncljR-ok
z)NiTVxXI(GJ8c2}E=MpiJAzQ!9%?fAMv%WL1v%qG5XL(3;UOs6yPk*`8>@+&3$9mu
zXX4XQ05cXQq}vh8SKG%4gXMUD`186@JWUeLnpPh5!y{r^Z!PYx7FZxiDjHqnTqP0M
znfo94T;PGWssj=+ZZzqPr^5rG&bxH9UP8ldq==@_*2$P2sQwnv18izHm6oi=(cMxo
z=3m%d-!UnLIn@yg@}vE%h~vc|L=pj;a3mC-N>-9xi;Xcs^9(yD_m*$_zP`W+8(xgl
zl7sfHCZfh|4gH#b^lM(YyA2f1Vg^V(wj$JrNu0TYiYHS!PN?@sz3eT+vX8X(>Q9Of
z{;Am?a=rvbo2%>nx~*181XR?Y<O0M>?6q{Ir4xD9f93DCMx?>Gast!6iv!365Shi{
z#drbl_Mg&ZQ)7YRU<%W)-hS>|Fyqd+1v4uu<tHA6)DlfXA5lmaKeuv_Ku$q0?)_s*
z*QX&sf7aifan?zc&H6VoeCGRtnzD&m5z(}AWfGS<aXAWmlVkX~Hq%@6e1kkg&w9vH
zkE;dIn+(2k;O$vndeRu@zUBk+;9A2JXVLvsBnqxH=;6Tgii=F1p$39$2PsPb@$B__
z!<W6@%4E4Q7HVeKw}Zi5+77cSKz>q*>C()kyPIRahUvb;k9vX$U;+txkT<M&jNe*z
z>!avg;s*7the%<UPxx^)%jZY2_8R$K;z%6j(Li(Mgas|iIkhf?kCtuO5|>m3&pOU3
zQ1~5M9GL4Y;{FZSW1$$asD9XI1Qha;`MrYC!PU%3(c@fwe&^c8)G+i_@3JwyqahA5
zG5mMAUJA*S=?3wYdQ2z#)wwfx^p9hch23g~4|ELDfH#453IF%<DE(P^_#NRd;%|^u
z=!ve)jn?91f<3Bzg&Vm)-)>xxnwzA185~6^yR6Wc54EQCVf*yWDrKy2WGI_+MEmsp
zRHF5}Fr)U!@F&Il<6;0Ah{ya7ZbOAkKW_&t!4pN;jRZS(k`!VFP31ue7`^~2v7PmZ
zx;Nt>Ax+tt6a75E<Bpaa;JC*$B4-9}0N@yR-p&V|$Q!^}qGdklyi;&*o8!R<4wk<1
z0pH$h$T6ScrYUt4S;9nriK85rVyK;p<4NyzuK2|A;}d^U&N&zde>BJtk>a(})mD<>
zbDp=z&I0E*lD={+tpx|L@HeCS18Id!wE_(lp6V-)h|BrFe?w28IV6r@bCOCOm49NV
z&V1b>Y=GPF#VJ+UM@KBW9zSx)>mQFG94G?-0IZ{4)TI+syZY}!#=r#9K7dg<G~x6p
zUBOJK6<mIHPi+x-_{i`;qB*<kUePOY5voiEcn$+3E$#OVqv;il@-tk55gc}FKAu$x
z=^d};<8HYOM*Dc{@TdCIJCANALu>0c?RNKaQ&p~GAy-uiE4XI%9;PFfu;eo@NN^5n
z+Z-dsr&^9|P?@w0B&Yp@;jlQ%h6{LMf?ATqc5~z45}&PeC?ydXStYn0#(I>s*s>wE
z&Pnh-&Lr3Z%Gu3xbAS@Rg_v4@@3;pyW90`cWG7qJJo_^OI*t=qQEc-Jt&~mhG~d9_
zC0g=vBjx<psnj`2Wf3@0Xjv`vVY8tx2I|GP@f5JrGKW#L!iCqy7(1^lRuBL&1+djE
z-q49dqXJIud9lE+hmvoPjKGl<AhFEq`%I9ruG5=EIB%NQv!x`{E_3W*fK^6w&o7&l
z?4o)QeVg9aZKg$yUrw|rqa<<O_wcTggrxgzoDt%1(3Z#?{a!q~;_NGd4BwwRrJ=gj
zf!7Chy;XUv1&Lb7gEVwHDIpKdy)6`=rxQ|zLO!e7SH=dHW~CaovKg>;HFXjO!n{&t
z)LAvbg6griVZeXB87@lta(Y3kEuM#Qcg}GqF7=O~wH1OQ6VuL0p+}MT9{DQ#I$SjM
zwNWoLMGzacdm;RmTD*3$v&)aXT!M4r=-%c_wJhTao*tyEXdk-B0weMLrDV-T<mRPj
z?9^Vjcub#C!{2?Az9cfDrNxeBsh9;h&Ku{W3~TS3ce+aP{(3cOFTtE>T7Q)!CqHe*
zY3fuOf{v99UJg-^`6tE)<e9z@fOOU%6N_dKQYE4%`DBpe8Mrwc)RYmSIkHMgQ*cj%
zF+kKWo+DP@PDABBnaTdEHFaG*C$`n|8L(7Djtp*n!?O@f_zt5eDJt;QA;}|}Yih9o
zZk~UcQCj|Yh`L4V|Ff%aib939-S~%%fZsp`vSb$7N-zlHc^y%V1eE*Mq%X0Y!h>b7
z-k)XrQs%dVxBTEf{$(2{0nue?(5;WkL{gerNv8A17qiJ>&2M5id-Z)yXT59h$Wou%
zxP!I3=%;?l^=ki&!y<mMAe7VnG6WITIR@T7<GxE4EAl>h3V6T`q>p4`C9GV?1#Rvr
zN=a@v7DfSyISflMY%9x~6cHlU!^D`Lxy3tqNYo1o-~);mH7PyQ%WoGdp<ghGih{Iu
z!Rg0SI6*?dB@X}f_lAi<R6N*QYbhh%+WIks<*Em7=ed0(?(Cv`aS1&n4ztzdtii80
zgITrH-P7^xc9I{aWe|c;QgYnEBFkB%BHI+`wKWwmVCGo;Pl(PtHFK_0%0G``r$~jG
zThPoNFG!Hs{}<o@4Im9!h!mYRtV~9Q035ikD8!EW#J{M_D6ukeF7G9hjbPYI>7lo%
z!!f}Gm!Xa4_`LM)lxZ$jgCt(wHoyF<Wc24ZGP)s?{d66w7&D4HJQBmL5rgM<Acop)
z5j|6d>H=rmGVh^4*ryj3%%+vX$!$>-=|iGcX|q1?3Ge@Jps;>5GOZn<%Y1a15-)UA
zkIvJXHbcNVlGWCo<YFZUBe9BOZ^6bRS<<a2gBt8@9QW^1<Qb(DR3!(7tg^TK7#*2s
zzTvZ{5H2-t)9DX;tp^1Yz&<T5n2I*grRc>c$tB*>$4!)Lr+Y9TU-e}<jmTE6;t779
z6u4VbKTQb+n4VZd3(H~;=umk0iTIR<uVNTm8A*`Ee0n<gpw$z>2D<)oKsW8z8s@{2
zrPE4FvXuhQ<lhw6`qiY|CEA{O#}6tLbMbD*oO&;}HagY)&+Powo`B`Ou9-JFMeTA(
zL=w#TrNFy-F5&))#nf%m|K>D-e+y3HgQRia8A>Z=7#uzm)5^1omc@Akf-Rfih_P^|
zP*=Jkq(`ML=dl#t>Ptqf_V)JF0a7cf+mZg$^r;pYIamY}NK^5fpOvgawP6D1H=~-d
z_xUIIV@(8%3pWEZJTJfUM@fGH5rQoDJ$AZa`fq@);4so&Hv6eHpzLTV(o{y~=!;h^
ziDPcqg_}&qVdbQB{b7*S??W*v;Z_}s^!$1I%M7bkiL8&_E!eleo}xNr7MEVqgim=A
zvi;#JGO7jg@ClIvJ?Fg5Z10caLcJ11I7Nm1owD4b0moJwnu6r1@9R%g!{QzLM3Hfn
ztY=<SRi~o_VFcPK^83*0P`VEye1nE&fWA7$=+%LGxXz^PQHYVjA&dxsDIQQC$gigJ
zf^(}uwdYCRnDtvskkIDj&2Y{$>?=WvBYo^J0At4W_0>L!d>`%HA+o2(Gh^O9zUIfN
zcIDKeT%o`YBSzRA_I^nkGT1m&k%1IMrDnwCSF*`}J=ihc#v(OtM2d{+rl4oWc)0QL
z{sp!tI$$8f8Id&jJ<RGAgBUG?yEgW^3Ydevi{D5rIMCm22kG#(5RdqUJ!FmthABFi
z8Ft@mAJdHUtUCb+?vjt~IBuhdCml)zodJLKPfy%VQMDhwXsA|u7J8GON~0{E-;)!8
zkSi)IA!O-Jk$93Kuh?K+w|y;E75I^>vNUDi3$COe2D-;k8icRJJKm#Iq4}YxPhpJh
zts5V?3SrA2%~{W(C9$p-dJw+u-zNQ+QxScb1)KlmWWyc)1{yObrB}W?iI?gw)q*;m
zCl9{XDz#q~z@l?#N#O#fnjpsoLj@t<qH!PQ`7dJCv+JjSC2xuyJigCOhdev=2rw5z
zS>60Wmw1qWI-&j1`zP^-k{w?F38#wy*gy`Zl0x~wf19$Q^Bh#PUms0P;TVH%emL1I
z6_@`74cqxw3{llAs25fbHZ<`A2T>jx2PATb<CMGHLlT}OSVnXZkEu{jUjVyt_3wNP
zf!6$b@|R!0r1~iR&^1|?qcse!=&~Jq0ZcCY`aMX}?*QRd8d}uSYWj?w4fr(pCa%8}
zB-1)T0?TiB;9U86Pa4=XHvwUa*~r?H7D;H7YzrB5CEID{52pK5{yum8hOKDnmY60N
zhJkri`|SK?v2*$RKbMd*3RDL4+=1>Wa0!XJQ|I9>>GJ9auFn*Tn!g7rNek+%_cLUR
zUeFb!ZFfX2>su-+Iyqag{6}j(IppJ<^%xiCaK|du%Ujs7<WB>ssfkzU0UmhpUkLv1
zCx|dwP<vdTH_AAyWL6ARsyi|R%?~~p(=zWK@!0~h!{Q&L6!~ZxXrU5Fc``Zt-T3B&
zO?DEn8|(H-6+YUgGoR13`*^5zPvpNcY(_Pt@Fu275OGn2`p}9Uy-eawBOR)x=_NBt
zv9$mYyfs$<`K0H}kx5~ef(*6wwKLRV<VY(4v$!*(*&KKKhX=+CDO<$L!LpK?{MVMJ
z)`vvf4FHfrgzoTd_dKV~)QZ(Pdg11Ku;BoR22mpy^grE)M3b6Wo&RDZ4h~KwQoI%t
zihQuPpnY(@9=Yu}_QGKvpR4!e?`tXj*1F|%hVkDJt%1jrAl4GpHKvAMiWTtrSbbNQ
zU98o!H!3Q3c&eXX&lg8NR^;=g><~K{wF!YqUZR<Im}k5+%JRj-!7TsTC&w5Qoc=ae
zi(R767QCMd8869rn)#c_Ir0wW2~g$+e~E32PdTu3Q$wSTRI;Bk%vL29?#tJH?Mx8`
z*JWe0zEf)qxRgU7hJRc<7gatzB^jKY>&==nzj`qumNuj2Vi#wp`m0cmec>+(pM3J$
zBXHQXyfC3(&82>UaHu5;vLFGLsi>uBFRhH5KT3VA5qhq)7T)v_14Vm;WFRvn@X&xe
z@bg_h`(>&GX|A+>;T**8VC3T(8k}3PrE&~=k#Yaw0FaI}Xbf1>J`&9R%0Qk<Bcc`x
zi*WgxhVR8+c;lF0GBiHpBIcR~Hz+7}4WlQEJl0(PvSP@9QAb&B*bB`g`r1(CINk7@
z^}^z;hrlLb%AB2Uc9G!O(dr)@4^_WF#vSh^>RGj1*7T40w|t3enVLDOU3z;fkP765
zkXM67E}BIB#zFtBkw^gsNN#D?ugZQ<{S}CcsPL5hon$EQFC|ybhu~q+Jia8m+^|Zy
zwa+ySI|l51^H>6^pt!)WM&a}>pBnH6U$#yhzV(@U9*-#>l-YC>mu53sKUiY0XWmWK
zLuCFfw(Cf8fl7-6C2$!JAqKLOzWDv8bu6f=>zz;TP3NKF`4z&_fS~;EUgJhOcX@Y)
zKf6^wKDXW)rN|z^MT(jmDt9QH)6?p7hpA=-4F^v^Ij(Hr&|WTU2mPc`HefdMsMg!J
zpHui_E>NV9>OLMZbKW4^E%7f&oDW(6FJ$q1fkK=uv>Geg-%sY@N!W{y5UsG8<+yEC
z(h1W<C3FBmI?gtT=7)O|x1Lz}+BvI&a~wD7Mc;qDmE8?_&ZX<^-MEg^r^HFuWn`wp
z`yg^N47Iq0GfOy)vXcRB%@ORKM@jy6J%nMHpPH=z?k%z3L|S$A0TWxU3Aa7`-eorG
zWJ%Z}L*s?@k%WbD#;Qg8$^nW8>NtgRhl`u9EQa<F_||qD=Jyv1Q|Ry-z+%IuzlH|S
z<GFIAid@5W2OWP43Nlx*fT|n+4v{OQB&i2<l9BIq->cis;^W6l#nZMZLxw!{J%1Wz
zbu0}|w^8cdmWC|kz-!@Tz$8Vi1*<L*Q3*n{|H#WSP#}t<OqX=^=25gER8G!?BSJKn
zui}oAUPw|mE35)bKRRG)phLtp;OdJFq?Eyi4(y>HT@BypT8XFnEDhOeaYzWft`eIC
z#;QMB#m=ESC!L4SrOQ!=P>pQzWef1e**zMyo7LR&CnG%78v4*sqqn>}JarpJjSD9$
z2b7{aj=&o)bb?|2M>;u3TS2qGiaz&S16z!r1}4L<4Wp!+JeY`dk8q~ma`@L=vEFMN
z6p4*2ns(++(Zh@%tzWTV+8tEsV@{h)^1j^o!VM_#y9Pq@mOc*?=w4pWUb5UCbwuj<
z5kO}V@vjuG*A?Og62%CxV1%wELqzFABDt4;*m2~c3KYvK)GRRZlK2Sh?2-j_Z77|s
z`B0(U69#8PylG(U?vw(7)H(*j?Mzklu7;P$1$0;QCVgF;BX^}85JwGFd^`L^<cr!1
z6rw5r3(}6D#nN|@tl;A#^siAGkf+Fh*sfW_Ifc4}#+s|MmQMG*t4WrtZ9kl(E`@J*
zPyhb^%HAFUJaxy~k|*Bb9`D+OUu3EDTVcxMs0&ScK>Zg=mSiJ8!7Ei_n2Z7;+I$bQ
z<Xy&!pklqk=Q*DS2yiO@W3-%eN9a?pSY6iu3ru_ujPm6Y3clIFSB&G<AYL#3{ar!r
z{~}@XAULPsxjc$xU}019(T#8wLK&<$vwqTjPHt!4H(CRJ#uLZ?+gbB*LkRr(zZ|3q
zWY2>B0AYr+r>8l56hF`=x>rpm6R=_zZ!-CfMIoW>CU$xFm84N(Ta-r`NS~C}M%VOY
zsggjQy=oRC_jxB}DUW=3RD^?<WsZ`-aJb$szMrcp|E}6UyhxAsw2vi{eB|DNF;P3=
z@?%vTBd<Yfv{HixL~zkKBlC7FdVZM@)hWnTuHXz+lhLzEaPMGzUg#kKa0HYG;du>?
zLt)Twmo<!$ida{V33&74Is5TAR`Y8`Xt>FDT>@4b6e4_@2(5ZpqG9EY?xle;Ogx21
z>UcsDK4eg8Aq!@cj)S+{0L)cP?2hl^z%)omOs@IY?@`Cr6l$YJvxHgB?a^u|zr15j
zhDrg0uH<gC3Tcn9Bytm9&0P~f=gp}7i|&)l{SwY~<-Hbf#~yv!&b5V7oRZa(SsuYA
zzX1j*S0rBh!Lt;wuXLGUZ=Sxb^F`WuAHs%l+fncRdU)SeKI#Pfsbg57W2nOBdhL~3
z3|ke(_tV$DX8c#y{5+42H;*sR42_~^AW6^{hkz!hFFzHoHY-B5)nu9r(A3<?)+k)P
zojDIZA#n=fG~jByXh`l~a-G6onlP~?Zgftdsc;{%R5!ZJgh|Q`rLv|bYV6i8mXYUS
zGgc;)3Ayv=P><i#Fv`ZV?AAZBGKxt2(OkPFojPdD)Gt%QL`%IvgZqeUSKSyv3=b)$
zrJlB@|8Q`(d`<07$HPSo57>9@1Il`*%l_2k$9X@^oQe?vR~$7giEZ|k-D{HC6cb1Q
zOyzZWk~h<XrtI?>&)?#BEqH%gfk)3p_Gc{9?1E}C&__Gk4qVBSJPHJEclu2Dg7`dc
z*Jdl-_};*Q)dbaSc|}(!w)kj{W9$?EdXCUX1Z1pR*YM1HdJ8;t8~^Gr>V=cgLmHEZ
zu|?%>jf$B?$FW(5Ht~Sr3I^G6*D689q%e;;i&J>^ZjOzGWf+2^zk+65$!l|3f?b_u
zwSy{1Bc=jEWJ)#=WZqbskwTU1Nc*C&!jOxQVf(m7&o1D>dP{Bys~F@~botai?qfcN
zf;Equ_tAv>S#3KLO#BGfAmuTZWU67B)VJGL0=xSbbB~V{;U*1ej0%Xx?D;Y^R=K-x
zC6R%ns;kR+_Pca&3N!5$i}mT2S_sP0J}K4SVNI@K%oHzUiDg4=Ugg$9bT}_CLcNPe
z0L6v6Vxy?!+Q5Gn-hCv_wgMUcV#Aymbu3#0yN1EG;W2~(=1qM^iZMB)!p(v}&L>Es
z$t3r<o`xH7)n*f3)Cq|oe6!>rz?qYP)22w}DgfCgM#1cb%KC2EI#doi=K}TUt_a9D
z_-FL0s+OFob!%#&Md!($qZv^+pp?7?wF9ZweVZtI{@vp~B2g07F6i`i;(Fpr<2(3D
znq*NV5vBR$uvpjdPsj!@_AXN~OGSyfcezlNT?bLQo#3{C@~@9u=Xu6ed&v@(7b5z;
z){5(p+l`)^uC?I9kkm+8+c;@h|719r2{Zmt=ez7yWy8X=F5rzPCP_K{_E|F#AAe@a
zgxRt9mF7vvcMy_3)B2-al8XF@%(>A$OupqKRr<E_sD|+@`Y-WULb2N^-!6$xg{M?d
zn%L~lfC5wLWIu>Re|&`W1TpET*(Oac<`^sv!Sx<Z6XQJH2N5q#W8EkrTZjWdrh{}d
z(aR*$aKns5qGhhM41>)0tw($$K{$@NtZ9+A^r84@&aftG2{P!;mUzi59dozsBqI<P
zOYex>)m$fTF1GA`izswWZ`+cQhlC!SAki2fgpfKComn*4kI4V=R0~p!Hk7a$pr7Da
z%zGJ4a`Otj!ElO5LQTdpys8G|@EVO_zeFsu68wJ7O7maZ!Vj?fX+B$@*7zMLU=`Hl
z>7}4w5}BrWg#IrrHqjxl;EciK=QGsB&3D2NYN7REd1|cYrzavCl`IA~!#upx)sRYc
z?U!qKmt7f|cep*$cR%m}xykdhsR$04<1t+uf<LXD5Kt5}W(S|sF$njfL$kW}MCgg_
zU2K(h_$U;kft%JcKd$x+nMeGOhgHBe1^mb;`cOLDJnjHO%UMz+d-}1P&))F={M}tO
z5_Wv-h=|IdNf~J)p`b-hIHaSw>Kkjlm!2Sy{6~OaM2LaT9yEZj5xhb~+lQHDbgR`-
zatfHbd%mOniyfe$1L*tCr(Vs|O4}vfLq>&i805uDpHBdGbzO2jdUaU-2WDM>_~Py@
zcsh_reY|5$G$Bw`T5bRTwdR*wMOh~gROg!>8(BBox5657eysg#VFq?+vaC?LLn2Jc
z@b0f2yp}Kp)GhjX>E9n9;xT-emML@R;lQU(PZGRue?e{F0O+w$1DdmH6q*Q1qHK>N
zfDLhb(^eG2db%z2KfoPMJIH+^JT5u1viIjdfsb?!!F8EXde(_Jh1-BDVJCDbgb^V3
zr$S>PQc?aqSOg#nxq~}y3(~Ps5@1G@TpXf!H-bdk+O|%*Dnti{H5KwGxEPL|5+{el
zB%)w0Ztn9)XDop(zz`ANw7B|2iisd2w2^bEb5D=q4jlKBJrzWX>Y#sNaUI(2i&^l{
zf`E`q?eCWp!#>UObioA+#89n0f<7iFV@<jQpuoz^ORW9U&ikpogjq`v2l@<9eE}L1
zGEsUu27}X*AdW|^qpCRUs9TNeBasO3sI8FTYnsNvdbCGy*=GBljq6a8oRCJ*fQB2c
zRTs{sK(sXy2u9y;OK`ZNMztA%K0%x<+0M0*>jZt!oaGx451co0%Z=NGjmR{ccELG*
zk^{yxNTvlOR;sql-ZHqn$8kyM^sEP>iA7p2i+lic;G~cAQIdv;!MqVlBB%`%;K4oj
z&yy#xfs`dlH;f=GJvIk)pAg$XZ~OZ{$s55D{-nQ-X3J^d{SnGgHYcQJu0FY->{6|3
zu-G$XHK=v1$U9%iqR!<r1+r~Up}`IA+Q!|DyCO{%BZ2RQ<t)H;4Xw9h1opOcFi835
z%zxm6AkhMJ*ymN_rdI_fvJ=@REUs*Z%`UEgA7XcYlkWY$+TZTT7S2ktD~u}L>*o5>
zF%$0EpdbJd)<E%3fi<M!NYW@g(>_%Kz}dD0B!=-0go~!m_tldeQ_cXp;{A{!>6@vO
z2g?fK!SO*cHke=4Yds&{560avKN0``M5RtyZ&HY8Y&T229+FO_KWF{t#zaru3$%A;
z7ad1^h~yU2L{4SU-(7>fbYODJh8cEVVEyaoIA>_yr6~sWE4T;PzKXc{3H!<mBila&
zL*AXn|6SmM0lFz+UJixS%cxK8rrMQ{(vMPcX=ftQ7hPeh3>A%B^Z}Zfv6;Cwg*ywU
z#i$h%Blyc&iKY4z4v`8^yu`fG!NwaJ63DDe&a||#HUOO&lLdqc^JImbBDh@ljZK#4
zCRVeLV`zCzI!X;#O=xfs!{yQ>qlYE?d2zQo`qi8KRFwZ;@r~NY-wvlfY@9XRZipTJ
z{_r@c<LB$+MbucU^;h4<k;Y&PxdAAr6gb}EqdI(a+C=C*&qh`DTEe`Wslbr{Xi+5^
zg@_K8Avj1mk4RQ8D|*DWB7LGY%=z^`9n_uy&bQ9Moq@BaBbDLNaGfReZSMTx-c{7x
zvN1*^uM<+o$3i|XG0HUBpC|RyGNR4n)frt*q_)`9AkQBrd5t<Yl24LyXFv&3K<$5P
zKP@m-iuUN2>s6zT`eR}-$_@Q11t`_RK#{n_Yxj|{>+o-Vx{B0m-Jh(_XH+Dc9_C_~
zZ}iwl9tr6I%CHuG#6_a?eWkjrHTHE*7Z*C+fS)jrAoooQtCXx3S3QY)4522O<nB0F
znkD8_Q2oOQY1ZLWaIokz#-TDMK7tMVSie-H=4^*#%(h9tKE?8f4-rRMWzM{@ixTuk
zIOn2_Tmtg<LM@p#*(m$$F>G9+Z*5@mFa@>GCMGBacUS*e)1Yhp!CyfLh^lwy$dpHQ
zPMwQ#RAVv48sU0Fz_+50DC1#_lxRwNR@dKPe8eV!Usb3vzJ8}F)+x`MjE3^+LT+E)
z=O(nDdPOo2<-~zM$8%vd2Lxy!d(#<)p}2{?H67ze7yq>o^K-VzJo_pE)2z{t2{WhB
zmOhx2#W_i_oANj+A0I{AbAHQP^Rip0dtp?ET*o?OYSlb9h!>kC3lwg^*#B_;)kX@!
zvnjTAEL)zCgC@0Q2yVGMD3wUiLkU2n=8GJ5HS`G;x`$^3x9%^f6tgq&7%<=Bf~~oo
z6WR<peIO|+4Sz9BDT)F$aH>}S8{ofV>+KzgCr`97XYCG^{Z{4ML9eejsu0v`E<Eih
z1jc9Yog+;v0&#_X(S&(hriHl#6O*jr7ZPi;e~~FvO>k=z+CtsWvkogio*v+CX(uJv
zDB_$X??jv`rDG}9$C*6YHMxM!Ils|s99H_vX?-*K2q}h`b&UuxLWh)su-N60CAKOt
zQgjW=j#aV|=X*X5&hlyAK-T)^>6DPG0|}Y{U6evKs13}K&_9563LlkZb@G|zVbo`W
zzOyJA#0c=_+V9ooWI=l<D^#tgd&KbVETP6icM-$fQ{J(<lH(b-ynp>H@{w9%-=P(@
z`~RfOnE7;V%w6VA52jv6g_4}{PAy5st<`v1?|<l?rXRf$G^&Pw5o}(A;Q*(Rd9R9?
z|LvkIG;W0PK4WFvinkQiWoPDr&>;U_exa^<kji5A41%X54Kj|r)vN@q#AIs&dU-Vr
zu#Vd#;;8t9z`7^pRv-LTLzT&-<P=ph)k7tTSF)Tbsg2b;1CIJ;!WN7ScQs(6*MZ7+
z_v0_@>C9kP&@AR;4I;E3wYRXhNk+dM50f1KuC+_111Q%ge|T6VWP^a}F}s2ln6qSX
zZqoM;MH>|kIOxQKNQ-x-{i}dlKqEXZ=5h=I;}p?PGhQ1MHlvNEF$6x2M1gN?`!(Wn
z6712gh^Ez7i0{APNg;0JO0OKy&yV6#Occ*(z_TYy*V0+sb!P2W-mH}O28R~wGYI!W
z1^CspyF-F-v(g6PAr4E9b|aw!W$#PT<P0{T%1(Dz714e~PF&ma;jeN*^uVVnJMOI?
z{(I~)siKxqQ_W6U2nP6rM27#sXBkLs6n_m=TOiI>#=%VPv@o^2++fRW7i8hoC|v1H
zFtyemevV$?IZb6@x6Bwz_3V`azdr?|p=7Hu<jbB<w$uM{rBftnTd9@RoWT6CnJidP
zcqbczeUBUeV{|Gr@g0b%%Yr$Z`*)L^xjXpct6@2B;HGe@@hOcSA3Su;PdmM<ne`jg
z<Ia)twbQs*G8K}7J>NAi__(_J4B6M{Mn)Czw&hOzG8I72+H!F&Zf8v>*z}m=E*f7`
zklvQM8C`M^p0vpqkZi}MCFm<c&Wv#h-|9c)z7Y6&@|CEO?Fag}2vs9u0piMt;`!=%
zi5^yhP38Xt9CTxh_+w#Gp35`o!#L(|`IATpt>NPS526XxZGW10+zkiI()L9hQXKLS
zr?P*SI3>czea3XT)QPmqeSfM@ef5P+)MJ9jYZ~N@-+yASrl9lzC^ga!mkA-9@f0(f
zZ}!m_5)?Qf&$c2xRf(#{4S&0>G{PD(#vGv12=`G);ZSM%-#1qI`<zA|<^=-t!p7nf
z1{@Ok3WqxRY^;w6X$gYrq1nSQbN}x;5Ms!bZmp*c`#78AP3`5)I{t^Zpn2@-Q{VP8
z?RgBkQn>>e@M)pC&s2<f^i&Js8ZsRyi{*r{-?QOxw6?&GAlXJYR5Uok)q4<6C^66+
zOj-pLoI+}Z;?(9kF7Z4=HhzciKwOW;+nHH@66eyVgi5eP6BGYeHz~Daf0}Flz`!r$
z$|%_7-x>P-J=}{YP`fmtjDH_SUJ3T7jFp4cB!n)FO{(>u>zU8d<(W69Vwvnw?l8K>
z(<0hC%xQTsU%X7oF(hEO!7^=`<aLoJZa$AcB$C8_k|vMj(ioPR_%yrr<Un_$Z`(D4
zu=Li8u&B?or%a(s0Yk#4xb}El1$qm_+mp@_01SJjLaoHLb7A!C)`r*`=YJ8(7%Lf$
zsxhT><s%YiZ>)BIMF05c;7S3I@X*4`F}M?_gD*E6Z0Bf76+y@^V1{5|q-^wH;r$R4
zE;8a_=B6Gf4e+k)yk(OnmB#%n=gRp>+K-6}XZv3@@-hA@?L!+BDd81`jPcsB0I#0X
zSZTo&&Ta8eOr?4@E-A4jG%B`3k!Qyze3lTPvyv{^;T9%|0Q~YqenHLX3YTrMfLjuf
z!b!P?H^8Y)PcO2-3W2w?%yEYKhds1gvd#iFKM`mo%BWk!0{F1P{v^vn)kk(qLQZ5O
zN&}I^6JuI&snZ!H-t#V@5-~si_VHk!ob^w&XjQW@;}|#7yUn08AJp8bl5X9vNc-=g
zE7ssWe>h586O0yq!S4lZN`!LV)+69z5Kjh>+CV@N3oM#bJ|q)UBE+-Bh-3Cs%NSzA
zOfJe0Jpib3ixS56OPE{qiV3@DR7|7-00`SPeDVaIlg!$5>XLEAiiul`2thrISMg2%
z5!h%yb=Svk3nHJR9<-+@5~lMuz2DHrCbyk1!>ZPnNG3#|8v$Pnc8=vrN`V(;VtR*t
z#N@`;BbR245);~xQR5ANSX&dgFQO!gZBo6!1sL<VV2#srwU~S!|5i`}bkT%2j1ZSO
z4gv)EvfS`rAZM`4%*TP{!(dHIQ(<-$cswgi!#C@DN}Cqz)wG%oK4qrRWZ02iiZ}B#
z=c%|T{Edm4Rwq_4X3E}20&)F7`+_8-@CmSDV@jxnhWtAT8!yVe&$6`~=#R<7s9N&d
zpze^Q<BQZgg%Wve{uXNo8(vs5!}R_1BB}9|Wi1{S-+oTps_N^zJzQmLxnwq9FuZw6
zZ_YEP>YD(DGwShLfOzf!t(L+p>|Y0*5PWN?`eJd6IeZl_OrTjSyL8&&soUgPz4ci}
z$-i&){I##2qi(?s@y&Z^_<#teZI3*?iL~cI#%#19Xk31BtxaIY4SskL^A$<&gId9j
zkJwf1O(I<wdsdx@aQl!9<0>B(3=Ox@MMiiv|37{$D&jcIejl}p%QslL73EdK7Gq25
zQiJ%Wra^9ORAH6Nc?wLDt@I2__WX?pp@uD9hVLVc;Am%xE_48rw807ddtr@cvS<=F
zmaBq_gCw3}``&R}h{Wt~wwvZE*oz9=%XoQuF%ctr)mxRsSYKIsrRadtb#+5Y`0q$;
zCy6Zt?2=h0|FksLzP`s{Lcj+nH30pbQmMP&QR6l+H2>2h;bT@{8KUER(81)_IR;s~
z4~9;zCP`p%U}8&=S$o9l6R2(D6w>v{eU+FCnS#TkMeRvC15g2bq__TlNFVa$LxXM|
z8M3X-Lhys#|Drd(S!$#kx;Oly^zKuKOv3{R{dX6po?3|c5l`cRjNJ%l)89ZNmN>kB
zPyqq@;XL#xw_3zZr^{x=b8ez(zl&htz~5ez&JM#DBY~0oq-Fh6q?tJy<yqVg1Wx#+
zcj^WQbPUYx@v^JtAXA+MpK#d?fj3=(s&UNUxmIut0z(;}p2Uw&J%d}dqLDhl2$?i~
znCqhkjguUgr@07H)7#0d1=1G@Q(_&>?$GfEgcu<zxy<6c&>0Q0n~T;ZhbZ6sMrKGC
zFHpzX#<!>VnLwpCU2i3104e~`5qkS15Z{tA8aqcZW(|mp1PYHUL#T7*Z&1>(W+D4y
z66U74%x$3s)^^Nq7d6mj3|dQMo~_Qtx?}}Tcl}m>hdh{ELf>Zj^Qyd!&#XuOH;nOc
z=N;@FC+rC;A-rU=R3&HDGS<Q}S#sp)AqU*K-3%H12ePi5TC#lj@Mp{)NV$sALt8JY
zU4${z8Oi}alJ1$qh6oP9$iw6$d6wM@V{gO4B9uDWYEBj%XrLE>#z*<2o}|St8r69O
zPcuCTlZix-)v0)Hu#VdMyUz#QVM>oW&W<DmJQpXGY&Sf74sg^!lo<OmEQ(2+oo^7I
zE8=DM=bw8JipiyO<tH&Q8=U9aAQMlnYNDutkdvRJRW3yT?{|xfx##Bf&XL!_pq@@k
z(QK8SD>ZeN0fR}oYP9@)o34^TKvg9b5OaI`o_IY}zuaa(h#(L2MBt2N^w}LKQ9+p!
z0zbubP-=PcIV5e{gRZL;!1G@n;R7&D5<EIUs&)K(1xQ~=79`j2i;)5TT@b(!#NbRn
zxpIuLs$L!SF<MuQ;5wZsi`HF`S0(kzWjmKipdi&piE@=d`5Cq8tB~eMurrPvYMIfV
z^<6c*gxS71kuR-UL+BClaQrp$vMVgXh$-IeiyQf-H}M(ZKc6uU^Arf{tKEhagQx*~
zd0-<(h9)6PJGB;QW3KFC6zI>tz9%0?jAgS~1&}J2nH`btWopum@URS*R4EX<0kzaM
zK$AXian6IeekCfZbI#`NWeV+Mpx%$AMhr3D!gQPAZ4(gwG@ZWyJ4ySbN2Db@Iu=ax
zUi5)j{@hb*g{FuowuY^pKMOzinz8pZVfKv?FXNWvZOZW`I8X&`iT}ahxIiX<j)!+o
zlZ1{YohfTlin3VqJ%$l^FWO$172Vf4J`ln>d;=c_qDjEVY3(76rnJT7kU$sEY;7b0
zGM{d_x~(<ab|5yh#qMB*l&r%%9bGTiqFP5V>txVSw+(ImC6H0R1i+}kvR~C`tB$o8
zI|K|~pw@=!oq<^T^SI+9S<$as`AFE-Psb6tQ!{_C7rK(fI*nc@`;^pd*(2X;{&^%J
zMGxlz2u<ChZk4Jc?&_uN>B-QdA!b*ir$Opfkg@*W^`xXt`HS$@LM;oH+V{hj<=o&Z
zUO24tZ`_=~jicXcBSj1Z+Ic*Gq53iMqw;2;@e<lvSb-IJnEsOmcbz3G1fq;pay*pq
zy)!ilyK!_C6DGy&X8^$7NM14E_JN+G&)szBZD~I~_tMinrWcx4IQB2;P&6z;SqYwp
za*2y`gg{t^;$t`hSCN{9+v)9Q5E0Z85l!r=<$L!rdO`9SzK-}6hz3Q-G`~MJ7xp`=
z1Ad}-%4pnwQJQ0+71O;Zl302JL^A1hST9~Lzr%(m6Eis;aw(CXH4Y;g(DsBVx+pa2
z8EOdajK`nXLX|hb<-7)D(8*`0!ZpzO1evXT{N~SWU`%2TKd}6s+e!J9Z8rT?jNdnd
zX!s-ap7!fx3R88kajoGEe#a#%=%<zSv>A2;<soIpZByEPMLwq1>lN0|8!cSVd8?F?
zrWB8e1=(*zixcISSmu10Ha6s5f(^e~N0i;{`~ryn)hxgt%G?OwO{W7kjMS`_z=hr5
zrQfWKu1JOAG$-m==Mc>Ub|doi6*mz-M2xwmO`_1m<chE=j|HTm@kDc1c@c!>E`NtF
zRjYgVB9aQiI&mhQ3oSGF1H17Bo$Y3gu3i0{ok$${+G?U-5Tq>>X`58CucvvOZx4et
z6yhlKm<Xn=Xz>7OAw2R4-SC9W*jBFbS#+C)92ATmhJb!2`Jo0+O`af@uM*7!>ZAgG
z9KgIS?Z{wQJ*Wnc3}+$9+AOm<txie+Pd36Bej*>E=0k)8*gb>m9FHguO9~%05YFQJ
zjqWzsOdRr54RE=5x^9`D3ZVFzZOO0j`KyN)jfBKbKD=B5>*CTAn%Fw<)t=}GXwN8{
zZOfM4F|y+DHmN6HSa+rNZXS(P#0lwGa2E3#s-`AOfrgmZ6{hf$R3FY&M-cI92#7{~
zW_mL|^VNz+=E3|XxNWt3n{7^yIk?{^D_o#%dTCwN+5>&WB_g;0m3=2x+`L>BmdF5|
z-rm0Me$Ee4Ron@rYpk)~m#hTcK&sfymu-S5@z05V(fgn|Z0#F)3$Y#~#Okm6wBgQr
ze<V99iOvn(7iK+-u$<39D$RhS7|9i|t<~E!=P2e|&8>8@lu&<bzhu#>#6o}$LBZJN
zd0cI=(myR9)DmReS3IgmrV>D29u`P?o`ldBybsPeTUaJwW)7^j+K8FQqo-kUKmW4K
zkp2y?i2?R%u$wIiWWOUBHU<C8JpvN9IcH#HIw!!Kqrsou-DpYReb~Ti!u(vpivZa`
z7rX)9x+~#J`Xj&gZlkmgkRlODz0nM6yrksOgX?D?K{-r2k=`Dh^3;i)dp&flD`klv
zVr`NaSs{`bt;5bJ2d|H1-47q@;~#_ro|ThF8hj^V_sZ*HR<3N9uP{to#ywfks=@LA
zV<f=;>k%Vv0a3rfS$8tG%4p!7kvg;ds$BfA{_hG1ZMYtNnvN+4%sd#lAcTH9?K~-s
zjAd@PektD9rrGbQXqD0!NJpj>>0J?v-(WjOa%wYwCD;zLyWURC#emsH@2Q7sL9<z0
zI$ENRH)JEqQ(y%ks}0%s#UKy!3MsR#{&{eiG5m26&8Ea6%;vi@FpG{8j%F_}7M8%p
zz{hEbgvS+nZ3hS^1A2)YocCdqK8FPE<}SI>s9VBlyF&b1a!L15gvFs(1XyfKmz_d~
zKpLljEnwL}_TLj!RArof%7S5#z;u-Gvme5xcfm4G{m&|6cJ?le^&>$g4I0nW<1H0e
z@C~Q`ny+F@KXd;xW4vUs|E)^<8<1^;MK(w(^Z7xdTy$)NeJhoxm7k=H0d@r)Lrn)j
z-bBKT8Sr1jc_@vx&RuBY&Cih3Is<w9Yt-C(=lF{$0)gcnGk4OBuv1$e>Ee;Q@$xu=
z_5Q;d=Pv*3@gXPjzyXZ<D3k9E%VDPJdsa_t7UK8A{;kVuRV25Q*`~<=eqM)DDhcK-
zV^;C)WDqPvn>B%NS+s>zg80`%TtZ{rmU{e(i~ROz)#<?B{-!e6*B4HA$H~f^R3K)Y
z04k6Kwoc<z1q0q6E*_blXs2WUO?9^>goK(lob{1Nrnq-0BTR8@g<AUQk@W-2LS(A~
zGk&^oleY1m46Y%D5IR)6F&7mM0meL%QK7zsGl}$sCgJvVL<3<LuEk8<o`V5xQP>u1
zfFu7~?_-s3CFX*b*$n87>iQ$8J!k4R2J<^rplgZO14E|4@JdEh(?8-i3W<Fn*2X%_
zJl(d?wx5|#1(e7fb=;(eqqaR((=wcl7tY&bE}1EE4d+~le8-(`QXw=u+hYJQVS@%q
zCRx@$#z`PHH@?<I$hOH)P-w}ZJP$8L6@4hNxt&wjhkhP9XJzJj6F2G_4+#|2ffhyU
z*`{hPETPIXMb?*VdhD-Y=ZT%GUtoP-W8!<gkU;eL+M5hhF<Nj|P$U2p5&fWou?zst
zKq1c6{A^5-Mp1lnlfS&X|LlLxH)dWKj>&P0Dq}EX#%gNjnc)4JQ$ph)v{HFftvn^`
zT^s1SE&r!AaaxqJ&TavY1->_fz1<ESLQ1RMHycX*_Rn&)d?!{gOzg>7HX`<VZkYgp
zehka^ST<$$0`iEJ-X?b*)Su#zANqA(K0INx&@@Ww=<+u~)ie7riQLxX5w$<z51Sb4
zAT?Y3M;l%e2cg5jUgVR{>Yc`ble-)KZf@^+VPB;W`Vwif+&&EV5}rFP&JkKGib`M=
zT=vuSYsud}wp!W<q`z=aZ>OKZBf0b3tQplf+&#lt&zSzFq$0g~1Pg<JsmIf|Tq&Sp
zqo4@cZ_d*;6`RM9-U%hQu(mz#3LZt-xz?5%Q=O*MW~`kaJ6~B~u7UzSg>Y;z0TMGU
z!6-Ku6IeMeAYAug%?wee(WA@qn%;>ikD|4g*x;EwaJRQCkxwz|xfvT<n!|~1oj&0&
z(&R%UQj7A^6X>YZl9BhzbIGx4XLQ<Z+3k{!?nh@J1kyx`sb)L8QSjuoQTWJ%6p%ut
zJOIJi^8VOM3l<)I+p!f}(@H0q@^%ty)@NOvmRU8S^paEK>!spFkicI~oZeksG5+)n
zm2TY}4+U8vX;4(?6Y%Jw{5vI7awA~_+#-Weq_7;oc7eyf6&tAj`dSDA;xz+<PeJI~
z&=}v-i~iO0y@*q&2T#XiYBask7$2fLY5<4Fmjr<}>4D9fM4P)rS(6Nr!_}78+kA2_
zQ*T$SzW%?=WmFH^L2b|t4zWSWNbVoxA9sMmVDF$8_4)Pm8V$nYMr%frn`8=RZAEN7
zjz+-_gcTH({>h~{?O8iFfPwbWaEeo5xh&B@9fwUGxhA<_q~`@492xlj1IxE9Hocbd
zdW;z20Fb&Rkc`;`QgotdGQSf|-Y~4X>S~BxZlx9o8N9b;`xh4pI4hDOo1)<RdRg^S
z0sN&*7aG<KLHtJ2B0OCYtLkNDeuWDL4|69XczJ+Sy4N6w##unz-4Ux}ax`duM*2i)
z+XBto%*WoQ{m3{{TIoWaXUa-Qv2dZgEReol_5k~j_n`LT4-%miU-|ew%GF9&5J5O4
zU(XWLPj0C^S?Cks!h2SX=O(E__pK3~3S<#gG8h}VEL(%1x>()~+gg4#+8IOSpa^A;
zy|E9pnV;Qx0D;fMOT9X1r(vG<?E66H9UjB3`WX>sc_2KWmH;(C%D*iLds_kFYF2@T
zLV|#C<hPISQ%vyqm<3@Hw0;zI70)dzj~vFV#mz&`gQo?~g3kL5agU#`t}FLU$`AX0
z8_6pq&?2N^iwFGRLd+rU&h)fx$nAld=u!&F<C<$^g4vzf8sjA}HS(80hi7=CKn*22
zSo2FUSwq<n9i`K^uSS!B;;Ty-<&fhe@jLuO=Ss?z@S{rhYtLU9tlUz67OJ(fBofCW
zS}QOKTLh$eY+K{l*Aj{{1i^4GDChr`RRMRQk0Zcp-4Mv1;%yx)DXcg*=-+>C*VLMK
z(e*o59f%xrJUYM^1rku%>a_F%b!cC-v1iW1i!x$5*q>>-JcE=T;%PdbwcOyZ#U9SL
zJ(GjdDJ#t4!cds%>N!5?)=oz)W)gLAU2WS3w||P~&Wz|;#N?aBx*uY-xX`o_zLDUM
z2l(5MIyMhFi$CgR{FCI`pojfBKarmkJPq8GE_dKRzIg9;!7Y{l`RN<e$FzF$tP!5y
z%0M<r504W9S`tUfR*1xUph+umPTSyPr8gZ+<r2Vn>r}@frZqsrFNvWGfj7ZKnQZ_5
z-v};we{q<Nnfik1tpRnZsur``$N2tvvkw}my4^K9Kl56Q&{Al-`F+Y%!4Al64tZiz
z#MgbZIB5!i_Y8R4J}W|(`fT%_Xz=<HlQDV!L}=BH$ky_**CZ=h+2N8{k!uzv3{K6^
zFN^bbqm&9hM#|;`TT~nHRL+NT1b0oQpH=f${ptfz**8LmT{8duCbz$rSb$J5S>~0k
zSuR{l=j8i>R?4ev<Levn6U&L1r_qSFnw-Wr|KIu1g(g5wa8q)^Vv`V_fA0PQ&kNH%
z_lfm}utqYN0|?1bp=;kojk&q)boujskWEgy_tf-)ky2~AK+u<s-qs~QT7$Y+ivCoH
zjCHcF&b!%y_xN@hUoQ#Jo^h3~Qj|dp1u(6Gf$Qa2w#+&2n(YD18}p`>L7MkX4;wJv
ziON#I8c1hs+k3nGDroQmI2P6yM1IA#+wA<1;o@JS(Mx?E?;{5X)(97=<!`bKDcZ_$
z#`wJeA9W=@H>QjFWt9Wj@zn^fmEDH+7+52as&q<pD67fm>ND|;2@c9Ar$V5LB~#LR
zCTjXZmKJLKRj#X{ltP8`IM6N?2&A3xPG9M48vL0x`igf)?0SKK<Ea3L<lYx^yu`&Q
zdC}lVf^Y~UD66|3In8bz06gMvZaC76LQN(aY;J`K1m{d1hL8Df3-PKG5hZFcx}Im2
z>U;k+f)M%I{rR?aFVnD^#UW@`OO`9>p=O*p^PDU#1f*>bA)kS&4$=oRaPS~$9{RRr
zcVh465_}UC{|s4Dho^c58Yv5;V`1>K*`evP)>?=yBd+jLfPQdeYVZdp-u?M7etr93
zx4cxhU+c*eav{td%&aL|o&Gb4<KVtVmFHpta!<3)xJf8Q4ao7XCX?oU|6*x6sCL%N
zzd;`fByAdlDj5=<Ob;eJybdtLxSF2W(8$zr<}TOTyCc{VTSQ}-CWI-_oZN#EMq1kI
zJU3i-PzusCtYzNS@Q#AoM3%b->jajKEzP6k^{`xqwd!k`(6{FQleimhethA_(m`Og
z-XDKbBJ{*@@zZiIFSl>L-@pu<zxWJaa;f%s1C=k|;S6)^Kd<Lml;DPF2woRpukqq&
z3304!{I3(={$w2+RPY;{`1=K7?%g}TyMLjyG|6*;k+=CD0=-}(<Q%+5;8Qpwn?9Tf
zp*Yz<ev^$bIV_PpJcDg93CIXj|GbVg$YG~7r?VOpw3jzPQWLQ0p$m0Wj%{#{yC^r9
ze$xdj7H#vWUZUrrIw`M0pvy1EO-!*d{S(OxnGW1?x=4ow0(}P;jByRv8Qg$`-p5=T
z3Y&1Ke%)<#>3TV35Eq9U*BnD@z1<3YuEkFq)Dl8V0)sl91^B5h4<~eot-f$*CbDcx
zMbh>ZzeBdk>Toa?6(yFpJJpqtmxNI88MP)EI0#zU>M|;Q2dZ{Ci~tDXAXhCQ(#G#m
z(tMt=^SjN?nz`H8cI&Ht1pw;|ke(SeQ#V)>ftIqfs#y}AM%gf*<gFA0MESVvn4BK{
z_@PnYM9Ue9i!3r<r(UA;knGFrF^`tp08~qBl7ip49IZDXz_0@UTD1=R4^D7n^)v(R
z@lP7f-=^n)XBOwBahyBpsR-()e$;UDj~u|S;nU(B-NW=YgFb5W0(Un5fol>FBd+Sx
zW@-A~QYFldB)W8Pjxa@hhiF#K3gW$tQQ*BMF>Vo%OnlZ}amqUi1I@)o<5@#tL4&Y|
ztms~bo|2zAr-Cecj;s`n7CMLJ3=ZE!n|O>UI4CY9p@*fwj7aka({V_s!Xi#1SKS<S
zj&Yt(-l(TPZWu+>b^jiR+dw7o*N~osn@gymLz%EAKg--d(vc?c9`S}1#~b%VfI2^w
z2+nn2!)X0KI>UnVowVs0&eP!;ST>cCf-wcUdR@1<I^{f4EFwt7So>GyqR0LXs2YG8
z)HspVCrKH#ibd`(8VI~JRmZICRRNI1g2xpbo%^?wrXYoAZGtvHN?gVm5COObK(AM?
zy%X{VX?^`JH1~sAOJ5;LCU4wN+>xpD3lN@!%z8q3{mA+gkbZBKT{a>M`AJ>LMs0RQ
zpn$dNT7kZ%W+mCz8%i5fCl<-wxWYhgQKFI#8UrzWkDZ;O;xwQ^62=IlwVyn6$SQr{
zB(tr*hVZ^XDqI}#bxAYoRNn`Ncm=Om0HL6^(<?ON$h`+k?S=0+#*GlaXF}T=t>#7H
z=@>R?qX3D`RYArioUlkk_7YX1XzABN*16P{>q7SnaAapxx+LrUUYv;0U_!<I!b;Es
zzA#B%ySb0=Z${A7w|swlVIqOC;@RQfTRb((Iag%zNZ>e~pFigcYCiydpbL#6u#rtO
zN<ppU%=06y)UG-Ba)^^eRPy8p`yYq1=bQL=g?Z#>I6F#~z9OplCYfkA01K;1#yo(J
ze=9v#wfBH4qwqiue~C#3Xx_{au?@eRi#WxaQdUetg{2&PezN^goVHRGr)R2uG60Q%
z4@zs96OIM`Qp_)JAjxX~VXNt#U$o~GYFb3iZy}-bnz`SeO&-{LA`Q>s+Tm1+b*@(I
zarjT7Vt&w|^0=)yC&Q}%n{1?Dg%wkrKjDL6S>d-)U!QSHuCbQ@xUMg2rMQ=82pZ4`
zD%xuqk|LA_PYm(L-kcKYP~f+h<atD^4lfzaTKLTuk1xE_4o;al&g94Qoj>B|krZ=w
zMgDP{qYi4kk_D)u4lWH@^^n3q+-JEwXPaEDR=J*8aV13^>N^a!5>LA%bA$iiUndei
z6Hp>*C^Ec>%Lbp*)E)&B$$#gPVerdWIIHEZ0FyIifBq5n!k3u)X*X1O*?aX7(66$n
z%!<n#vtVaOF>TI>^4g`9EnFTtqQ~Ldl_O9fEI^;Cr~o7Xf8AK~iKeUW#Zf`OOQ#cT
zo`N&UnxzVYF2LbFX6`}xa<ry~hAZkl_5tjVwEWnSq-3js25jmFC>u*qIgBC$&0Q>J
zoyd=phv^KUz8FY{zZjDN!rpYI(Kjh?Ap1od7X2=238eZs<9uN==55dQKSm!{Ob-~F
z;|`?EzW`AKB=BY=>h#ogKFAIKfca}jb(_-Om=J@0Qpe!!xu+=roBfz*r>6D?VvEMy
zwu1l{4VKyL>CiCvB@;$tuC+xSZEbAW@_jhWmyEcRK&^9Z73}p>x<^r%lJAB+M?7`F
zeM$e5#O?vT`wDJj+J5eEzg<@K-KY(5mJ~Tn$9MhyM8qiObmh2l!?L_f|F<zCR{v$@
z9GOq#B-4Hhc=JJ?V7f2Yqp_XkB_e(0fXOLZ)-6}sT?|m(wz^35^f56#9({Ygl$zw|
zM^j1LG-Rjg?N@piifqK(ROnHK$Vlcha23C>OqOBT7-W|5doR-<41!?;+Ba@YE0d#7
zzrGK*k|l!Q|Kbw&zA=9RkFNg@8`COiP}a*2*NnVf)*b)<|2&dRQ+37^Ahpnh4!5-T
zgDB2zDwVtYpG@u57aL34<=1Fe=Cn>*b_mK;WrtvqVbCXoHvigzX<P!rB;dRb@)JAA
zkjI=I_=MTEeUEGaOjk58JIOuvXU?J*GaHb!u1&co48WB+bD-XFgBWWAymyx&<H2(l
z#|OW~4*Q1|-SQt+m{;5;1)UJ^3-oF&+YMNuK*wTX-{Yf^P^auf!dI^<a<v*Ih4V4P
zvH7!Cg4EW(m<b7LADp3N5qaoMPUj+zNx?PG1YgYzNT!L+1zY#1rd0uJpZ0pm6NSld
zm0k@GI^<sUaQUZHgIVUqN3t=oa|QJRI(e%#j(p>Fr7Q2_rUpQfmxLt8kD7p+6pZCp
z`NZPS>_kXGSDaY1%<5Da_Gm{=t1l4l+4xX=PHxkDP7P#osPCQqNpORf0+|da9}S<N
zS=Qhd>m{Pw1KZeTxJ-`!oCiTeY`o-h+ps3mo+xaj?#<?Dqx!=c+$hos8^C}v*SG-I
zWKF6bU92y2@I1Fuv0PgC`+l-JCOhar0z=;YU7m*+PusWmkNi3gSvqrz2FRw`|5@U&
z=!>&?F$837%C2WgmTjui;sObcHAwaxAwl!0Gi^Vc@V@UIMqXGTjlK^N>0&DOwI@Es
zBaGDsZa<eO_T1K`JjTxQA5TOI!C~=SD&WTpQ8tgg)5n9I)<3a&lyW>;gt-{kJ+c>I
zKLKz$v3{3fk(`mvWQ_VP#S;1)P3~G0`4`-O_55_YIU+Ov`2bv6W9MR-L$`KCAca(y
z;y%@uKlSd->HjFMjRAP}ykJFEBqDnU^7XwBqc6@1^_aVvYzDBPpW|>e!|iEw{96Gy
zbG=J+JYD@hYcA17OOHf}fhgV8ddcX~DG7VUAKsgmVLEHR=DM^Sv)was<*Ua&c4@cC
zD&L`2)Q#L}|M-87libjgKk9{8GB#xuthWsKL3Y<qo)rpEOo8Qsr8@s+m498wr1Vjq
z7l`<V4)h!5z~CDGzLO@R=^qu923GVP&yU0?6gGt)LS!&d8Enf%i7-cD;?a%u`8O>8
zX%?&Hhv77y1S2bH;e4G6R*};9LWT6g!_F`F!vTtLXb>=a;(s=nNF6TM>F@FsVbY&6
zGEu&T6!FknXOE;&)n}<Qv0Xw9DPS+pq1Uv9fRFrOU>O|v9YeI}dxFN-lya5G_)Qts
zSLLT!)JR10NBrx54Is{K82g*sKQJ-?$69)Hx5z?^y@n!S$fFN+>V@ew83y$Jp3?cy
zkW@%s@;`^u^`p_<N%puAPzb@)nfE)~_j>l&u>^51XZu_`&g9%-;{sBILvx28bD(M^
z>bU>ipJHjUMUh6a1DK1FTAJV1klK+KxNINma!!!Mh|QTER|RsLD{7R@qHr_A=U94w
z3d(f&O>wTqSYG!VdK;BbfHViEVI^Ssa}v>msj$+U@9zjGh3m!W!-|?)^$l<-Jm@5*
zBy*JjlK{t~fcmip(KgXt1UJ=z0~8dX+iTAyc!T3$xTG0A^IvuLeu<Qi<+-$<hG$lc
ze9}H`cLHQD)g}>yh=qVa?Y@-U!&}QayuV%cJ!R&b`(o)&U6A_(u8M6-=9rP6j*E@@
zK~FgB()bTw;OkK9gMq=zR5|UIQ-FWif6JQCm8@Ga$CIFXvbWRNF1U)=V&q#yy1blC
zffbeP6)A>t?<-GTCXJM*7yf#Vo3$I@IV#X%cUoOT(}s(%I`vVHwY1AQC!^!%|1pu?
zE6~qDxpkHWU$+Nqj;Nl)mI_d2e6;l`fuCbKiy5Te?Q!ab=t#+(<o86uA?iTN=&Ecy
zHC*G_=3lfaux)MPjy<MfL|)I<f?AT8)+99?35hlpD#8*!ui-rQ4*=>I;mzdB(l{|r
zxHhS4QwWjro}t;Ga;0;VvGp(s#nrl6;Y6Q<N3c(fN^yXiirR?xg5`-Z4Nnt{|763_
z7H$`;57Kpyv*1Ivpl4w})3|8gK9uAf4L`><Z~$e8Lz9XTq44B)e%!HJA;>#ldkOeg
zAV2+Pf30;N5(TZWJRt)e#|ju&;+vr#eM=dgKX+)M56m@};T$4K?d=_UCF)0o_#vb=
zC_?DZ<bL<#wR5Au#sMiO3qH?MV2l@SV!BQJB0^C0CbAlQU|TYR1(gm6!1yQk<-uTr
zRkuZR#9Yn-le9LectA6TR*UnO^my|@b{*0(^Q*q>RxTdqr$l0U4Y5>mw{X<Xnr2N4
z1<(8LBTnfk);nigjFC--3i59}<&bMNX$v{y1on639lgTCP0nC0gOg&_o=Im6k6|ED
zYyIZr8Q*+}|B=uIw(G}cZ#DVmxLclRDAkx}kUICqo#(Dvva2qXdLD@yefoLWYab5;
zgNxaf`T?2euE-Z*Yecybgn!<F{^@9;rFe~Gv5FlNObCn(LQ^xV%R$Lt^6!YZ<~!4d
z3={B#h*QwcV4OOS_9Z6g3@>o57m%ZV@KJgW!Su~(U#*$6f-qRJ&gXIuO{PL5(P+d{
zNS5`@mZ|Gh61&wm#$lzvQX}wp3E&K3yRLx_m~m_ZB!~S~adIV=mvxs2@r+c~QB#@G
z22cBQ)|ec^UFa6X7$#NlbivPgPQ9>5VR4sLM70feUU?~&Wk@e7Agrwl-`rmj?QxQ(
zEA20(F-4S5H=lq1v?zpMzp^WDlsQ|NdJ!t5u?{6i0^4Laokme%S^?&THQ6?eT>~7g
ziQ5amE}AU5XYvTAD2AtO(9h@v-DeTZ28LZ4f}U~Gg0CzerTBY*nag{(@?RoC`z!?R
zF{8jdQwTBd1R3-$LGfr&BC;t|kYA0F@A&VbtIf3D1!-(gj(E3NQQK~=5rina4Uz}G
z7lF$(maN@E_1JnO;`9f-2}^~@0bJpDUKpxvp!{<?nJaWn@kZLx)GDf(qloMSzpac8
zr<=Td`y*e(G|qnvN(1J+MA2#^hGMR`9C<N1nTY=hfs#4@OzUC+YT2y3gqrcEpO}0_
zGRvX+;)`cr(dH{Lq^9*6OGZ$V9~vRxiDWnpDXh2uK6EjOGTT?f_D&Z3W|dd+4Pngo
z)An7Px#W`=@V+^I_qF6H)MUzEEf+Yq59PdkUbC<ONYG%40mRawW2UsyB%D9{6nQD)
z>av<SV!fPP;7lEc(vNP+Wk98*jb|N&k-L{MpcGdjG?V7>5I~%;BpFd4l$qOtymeiB
zoULDZhmf>XBXzpkrIS~YWd*NktYsU|?IFp4jq#hE<a%0{@&oBE0?<wm_Q9uwJbc|$
z;jOf{Id;00>Gg~1KRy#GFA@v)fjkHfz_tLA+NHHPB4NvXYHY!I4=`;-+)HF37-m*I
z-F(eR<&8xxTO)R72;Fl0*WDa%J9Tu~mqv@s^ehs*yUAQS)*TSe8fSYo-|zQ8{EjaF
zC&Tj#-BS6BUoz*x8G<q2J8Y!<zX&xIn46EqMVY3=5~%nm1yVtjh*UeOW`0+RnwQe?
zJsvxp@AfxW#`%H>P91&`Nzf2Nmo4-HYQfbyR!*7c_)$GPM<g8amNN5qDk{d4QsF-C
zW`5DpICU6SrJjrx+7#)u^C!&ai^Z<sKTRvXg1W(}v&^SGLxS`S2ih2w$-mgeu~PK}
z#2kOIN@J7|=|y>Gk-Q;oI#jFI{*^L*Cw>;o(P{Y3t1hT?P_Z|}`iPlFSKoJP{A}7f
zf=6^*&DZ<rX<rH^C#A1*s75%6n$`||+Q?3vpe(;bmti*JCa71UP~E{UWGW4<lMcvV
zWN$wW8QI0X|Nk#~r0;$m)OM-MDQIvNOFDs+GF~%md*(*i2326ju#}^ge&EegLi3+T
z^J5Nu&;C|z+$~>W?M_+C;&Ik$7w-BZ2>x;#AbX1(H_c-*mLb2#C<W-Bg)j<hk^jlR
zsGzmza!oS!<1-6?=&icCb^4(WgOa$?sUU1nF}YLUgquD}${5Se!O(Uau@8BZ4fBRW
zbj!T;3lqHVIj5a{;?EOpo6nomFMH+q)D9$5yGS;!TrMJT{Q?qybR6X0qM=hlhaED+
z02vEpSgP}!3~GyeiW7K7>R#wvZt^6TcwURXT!0h_!(;@C6q69mZeU)CLmX%6y)t2U
zN1e4}d<P~JH&<L|N5tD-P386d1V5vUguApeS=wK~;h*3p!t_x=(Zo-4TWuYL=LxgC
z)zotFn66$>a|y-_bgkj1F3NGY4pJK4nlF&GahK#f^HJT!S=0Zrr!=p^qx!3KY=ikC
z>Vp*arN%h`qfw_-o99Z5@S1)ETuvxZdbAP7G0l8+A3|IdeD(MXPNdbe@_{n#iIAfr
z#Q8|3OwMNCK+9Mk&Y4lR^s3#g#rKhg7jdqTGf`nhXfQqcT!Ubp5}>fO%bnqp!IQvc
z@y?e=;jd0SJ`&@8oFbg`P5>E-5qaR7LpUm|Yjd&ES4xKM6JuukNv+q4KX72@kps2{
zF6<}}^cPdF%@Ck|Lh#R*NG3t*p}^ML<{sn^N8jjuM(nw6GG>UdKJ;<kpy>T%n%p8-
zdTVVKp^&C4-E=svHR`|)zmlfVH+G^sA==#fPMsY>UC*$I|0L`q*g`43iR!zd;Zsm_
zpEN4I0&1hA#g%7KwVcy>xm(c*Z9SYJbG;Ux?09{v;$#Nc%*#k5=1!_bbW;XSxQ=zB
zX@kRTYtrgl?Jg;sayj!Shqifsm860J>^TmHmLq$;@C0}#^r5gPfTAw`@-m^X#$75V
z2d1zI!Y187YHJSZ$2TTKRylwpjs9EVvNrXk(u!Z$M+lYF(1*EpVimBD1Zu45{86OO
zgv5`o53_|%4op6cCn(q6b$VtBmbTX@DNy?%b(yH~1eEp|_8ueUs8IfN1;jXM8V(YH
zWi}Rt+!3#Fw{k|P{3H6@K$@9~vN;GzZ+<z)pO;NbV-haANobH4F4gYT7e~Ng@i=Kx
zpoSQ(*eSai&$P+}GrB$(2~Pw09+|grg1zr-$LEa*A;T~G9V*n-1CXyy6tpwYvJ(a6
zwMHlLfm2N(wnI`t%jT>)(SEe-oWUT5#jLZXw-wkWMPq%lSb97Wt^F`0L|W7YG3ASC
z$g`<=TG%uvH2InYs=m?aelu*3jLBHOSRlW<EwjAmmCnq$xvH}wO_;Am%kV3;v|}ZR
z)^Xf@z;U0jbC)=m`y%RUKI!hfO0#3z0ujDj@HT2wNZJaO>cBU9bEEnOZ=wBB9Oo`f
zrC@W%H<=}_-f~QlL1o)dWc6htXzk2{TrVubBR;V9y&}xD{<i*Vgg9(S%pa_>wDE-j
zNefQ!bo9jNU~$iESXwL@fgHo;6aR63vVQEYAmT=T)f9W)Y-I%TOYFWqkGuZA&~Oy7
z8?cP@t7^uWFs1;2F{AqOLW$<+j{0(?&j3ia%bBIM#&V^6CjJ!yUbTv(YbNnXLG`H!
zm)v-AXE=F1q}hBREDE#rLPVnr|CmGaadEj6bjd|%n)%uoJeb*W8uGkH%2LevVlp+e
zz_a?8sTLTyCAwwpL{rnyv1D5gkso;D*e@HUjWy|G9@#8GNnR(!p|$=sgH{T`J%-U`
zD%z%VD#GJBf(bkVCJSRAZxRy|BHJ`||F8zLV}T7MX7UHS|Bc=;-EaYTUqfLc1!6?O
z*&|ojGZ{B5hUFmF&WR^egdt8k^Ze|A8%0Dk(StXe;c!hQ`A)@T2KKTrxbXTfMb2p*
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

literal 0
HcmV?d00001

diff --git a/docs/b140a32d.d088877e.js b/docs/b140a32d.d088877e.js
deleted file mode 100644
index ccd3c8c99f..0000000000
--- a/docs/b140a32d.d088877e.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[158],{211:function(e,n,r){"use strict";r.r(n),r.d(n,"frontMatter",(function(){return i})),r.d(n,"metadata",(function(){return c})),r.d(n,"rightToc",(function(){return p})),r.d(n,"default",(function(){return l}));var t=r(2),o=r(6),a=(r(0),r(290)),i={title:"Form / Dropdown"},c={unversionedId:"examples/dropdown",id:"examples/dropdown",isDocsHomePage:!1,title:"Form / Dropdown",description:"Use dropdowns to allow users to choose between available choices.",source:"@site/docs/examples/dropdown.md",slug:"/examples/dropdown",permalink:"/wave/docs/examples/dropdown",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/dropdown.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Picker / Selection",permalink:"/wave/docs/examples/picker-selection"},next:{title:"Form / Choice Group",permalink:"/wave/docs/examples/choice-group"}},p=[],s={rightToc:p};function l(e){var n=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(t.a)({},s,i,{components:n,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use dropdowns to allow users to choose between available choices."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(407).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\nchoices = [\n    ui.choice('A', 'Option A'),\n    ui.choice('B', 'Option B'),\n    ui.choice('C', 'Option C', disabled=True),\n    ui.choice('D', 'Option D'),\n]\n\n\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'dropdown={q.args.dropdown}'),\n            ui.text(f'dropdown_multi={q.args.dropdown_multi}'),\n            ui.text(f'dropdown_disabled={q.args.dropdown_disabled}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.dropdown(name='dropdown', label='Pick one', value='B', required=True, choices=choices),\n            ui.dropdown(name='dropdown_multi', label='Pick multiple', values=['B', 'D'], required=True,\n                        choices=choices),\n            ui.dropdown(name='dropdown_disabled', label='Pick one (Disabled)', value='B', choices=choices,\n                        disabled=True),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}l.isMDXComponent=!0},290:function(e,n,r){"use strict";r.d(n,"a",(function(){return u})),r.d(n,"b",(function(){return b}));var t=r(0),o=r.n(t);function a(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function i(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 c(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?i(Object(r),!0).forEach((function(n){a(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function p(e,n){if(null==e)return{};var r,t,o=function(e,n){if(null==e)return{};var r,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||(o[r]=e[r]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=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<a;s++)i[s]=r[s];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},407:function(e,n,r){"use strict";r.r(n),n.default=r.p+"assets/images/dropdown-aa5530f33720d6851ade03079d16f40a.png"}}]);
\ No newline at end of file
diff --git a/docs/b140a32d.fc920547.js b/docs/b140a32d.fc920547.js
new file mode 100644
index 0000000000..2e6ef2f99e
--- /dev/null
+++ b/docs/b140a32d.fc920547.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[159],{212:function(e,n,r){"use strict";r.r(n),r.d(n,"frontMatter",(function(){return i})),r.d(n,"metadata",(function(){return c})),r.d(n,"rightToc",(function(){return p})),r.d(n,"default",(function(){return u}));var t=r(2),o=r(6),a=(r(0),r(292)),i={title:"Form / Dropdown"},c={unversionedId:"examples/dropdown",id:"examples/dropdown",isDocsHomePage:!1,title:"Form / Dropdown",description:"Use dropdowns to allow users to choose between available choices.",source:"@site/docs/examples/dropdown.md",slug:"/examples/dropdown",permalink:"/wave/docs/examples/dropdown",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/dropdown.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Picker / Selection",permalink:"/wave/docs/examples/picker-selection"},next:{title:"Form / Choice Group",permalink:"/wave/docs/examples/choice-group"}},p=[],s={rightToc:p};function u(e){var n=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(t.a)({},s,i,{components:n,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use dropdowns to allow users to choose between available choices."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(412).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\nchoices = [\n    ui.choice('A', 'Option A'),\n    ui.choice('B', 'Option B'),\n    ui.choice('C', 'Option C', disabled=True),\n    ui.choice('D', 'Option D'),\n]\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'dropdown={q.args.dropdown}'),\n            ui.text(f'dropdown_multi={q.args.dropdown_multi}'),\n            ui.text(f'dropdown_disabled={q.args.dropdown_disabled}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.dropdown(name='dropdown', label='Pick one', value='B', required=True, choices=choices),\n            ui.dropdown(name='dropdown_multi', label='Pick multiple', values=['B', 'D'], required=True,\n                        choices=choices),\n            ui.dropdown(name='dropdown_disabled', label='Pick one (Disabled)', value='B', choices=choices,\n                        disabled=True),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n")))}u.isMDXComponent=!0},292:function(e,n,r){"use strict";r.d(n,"a",(function(){return l})),r.d(n,"b",(function(){return b}));var t=r(0),o=r.n(t);function a(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function i(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 c(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?i(Object(r),!0).forEach((function(n){a(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function p(e,n){if(null==e)return{};var r,t,o=function(e,n){if(null==e)return{};var r,t,o={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||(o[r]=e[r]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var s=o.a.createContext({}),u=function(e){var n=o.a.useContext(s),r=n;return e&&(r="function"==typeof e?e(n):c(c({},n),e)),r},l=function(e){var n=u(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"]),l=u(r),m=t,b=l["".concat(i,".").concat(m)]||l[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<a;s++)i[s]=r[s];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},412:function(e,n,r){"use strict";r.r(n),n.default=r.p+"assets/images/dropdown-aa5530f33720d6851ade03079d16f40a.png"}}]);
\ No newline at end of file
diff --git a/docs/b18fb770.4af7a823.js b/docs/b18fb770.7856e763.js
similarity index 95%
rename from docs/b18fb770.4af7a823.js
rename to docs/b18fb770.7856e763.js
index 277df882e7..31e401f003 100644
--- a/docs/b18fb770.4af7a823.js
+++ b/docs/b18fb770.7856e763.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[159],{212:function(e,n,r){"use strict";r.r(n),r.d(n,"frontMatter",(function(){return a})),r.d(n,"metadata",(function(){return l})),r.d(n,"rightToc",(function(){return y})),r.d(n,"default",(function(){return c}));var t=r(2),s=r(6),i=(r(0),r(290)),a={title:"Graphics / Spline"},l={unversionedId:"examples/graphics-spline",id:"examples/graphics-spline",isDocsHomePage:!1,title:"Graphics / Spline",description:"Use the graphics module to render splines.",source:"@site/docs/examples/graphics-spline.md",slug:"/examples/graphics-spline",permalink:"/wave/docs/examples/graphics-spline",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-spline.md",version:"current",sidebar:"someSidebar",previous:{title:"Graphics / Primitives",permalink:"/wave/docs/examples/graphics-primitives"},next:{title:"Graphics / Clock",permalink:"/wave/docs/examples/graphics-clock"}},y=[],o={rightToc:y};function c(e){var n=e.components,a=Object(s.a)(e,["components"]);return Object(i.b)("wrapper",Object(t.a)({},o,a,{components:n,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Use the graphics module to render splines."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+r(408).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"import random\nfrom h2o_wave import site, ui, graphics as g\n\nx = [i * 20 for i in range(50)]\ny = [\n    88, 100, 116, 128, 126, 128, 118, 108, 121, 120, 99, 113, 117, 103, 98, 90, 104, 98, 82, 102, 104, 89, 87, 69,\n    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\n]\ny0 = [v - random.randint(5, min(y)) for v in y]\n\nline_style = dict(fill='none', stroke='crimson', stroke_width=4)\narea_style = dict(fill='crimson')\n\nsplines = [\n    # Lines\n    g.spline(x=x, y=y, **line_style),  # same as curve='linear'\n    g.spline(x=x, y=y, curve='basis', **line_style),\n    g.spline(x=x, y=y, curve='basis-closed', **line_style),\n    g.spline(x=x, y=y, curve='basis-open', **line_style),\n    g.spline(x=x, y=y, curve='cardinal', **line_style),\n    g.spline(x=x, y=y, curve='cardinal-closed', **line_style),\n    g.spline(x=x, y=y, curve='cardinal-open', **line_style),\n    g.spline(x=x, y=y, curve='smooth', **line_style),\n    g.spline(x=x, y=y, curve='smooth-closed', **line_style),\n    g.spline(x=x, y=y, curve='smooth-open', **line_style),\n    g.spline(x=x, y=y, curve='linear', **line_style),\n    g.spline(x=x, y=y, curve='linear-closed', **line_style),\n    g.spline(x=x, y=y, curve='monotone-x', **line_style),\n    g.spline(x=x, y=y, curve='monotone-y', **line_style),\n    g.spline(x=x, y=y, curve='natural', **line_style),\n    g.spline(x=x, y=y, curve='step', **line_style),\n    g.spline(x=x, y=y, curve='step-after', **line_style),\n    g.spline(x=x, y=y, curve='step-before', **line_style),\n    # Areas\n    g.spline(x=x, y=y, y0=y0, **area_style),  # same as curve='linear'\n    g.spline(x=x, y=y, y0=y0, curve='basis', **area_style),\n    g.spline(x=x, y=y, y0=[], curve='basis', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='basis-open', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='cardinal', **area_style),\n    g.spline(x=x, y=y, y0=[], curve='cardinal', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='cardinal-open', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='smooth', **area_style),\n    g.spline(x=x, y=y, y0=[], curve='smooth', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='smooth-open', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='linear', **area_style),\n    g.spline(x=x, y=y, y0=[], curve='linear', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='monotone-x', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='monotone-y', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='natural', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='step', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='step-after', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='step-before', **area_style),\n]\n\npage = site['/demo']\nrow, col = 1, 1\nfor spline in splines:\n    page[f'spline_{col}_{row}'] = ui.graphics_card(\n        box=f'{col} {row} 3 1', view_box='0 0 1000 150', width='100%', height='100%',\n        stage=g.stage(\n            text=g.text(text=spline.curve or '', y=40, font_size=40),\n            spline=spline,\n        ),\n    )\n    col += 3\n    if col > 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<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?a(Object(r),!0).forEach((function(n){i(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function y(e,n){if(null==e)return{};var r,t,s=function(e,n){if(null==e)return{};var r,t,s={},i=Object.keys(e);for(t=0;t<i.length;t++)r=i[t],n.indexOf(r)>=0||(s[r]=e[r]);return s}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)r=i[t],n.indexOf(r)>=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<i;o++)a[o]=r[o];return s.a.createElement.apply(null,a)}return s.a.createElement.apply(null,r)}x.displayName="MDXCreateElement"},408:function(e,n,r){"use strict";r.r(n),n.default=r.p+"assets/images/graphics-spline-76e8a919798c7e38711618ef9b414f78.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[160],{213:function(e,n,r){"use strict";r.r(n),r.d(n,"frontMatter",(function(){return a})),r.d(n,"metadata",(function(){return l})),r.d(n,"rightToc",(function(){return y})),r.d(n,"default",(function(){return c}));var t=r(2),s=r(6),i=(r(0),r(292)),a={title:"Graphics / Spline"},l={unversionedId:"examples/graphics-spline",id:"examples/graphics-spline",isDocsHomePage:!1,title:"Graphics / Spline",description:"Use the graphics module to render splines.",source:"@site/docs/examples/graphics-spline.md",slug:"/examples/graphics-spline",permalink:"/wave/docs/examples/graphics-spline",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-spline.md",version:"current",sidebar:"someSidebar",previous:{title:"Graphics / Primitives",permalink:"/wave/docs/examples/graphics-primitives"},next:{title:"Graphics / Clock",permalink:"/wave/docs/examples/graphics-clock"}},y=[],o={rightToc:y};function c(e){var n=e.components,a=Object(s.a)(e,["components"]);return Object(i.b)("wrapper",Object(t.a)({},o,a,{components:n,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Use the graphics module to render splines."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+r(413).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"import random\nfrom h2o_wave import site, ui, graphics as g\n\nx = [i * 20 for i in range(50)]\ny = [\n    88, 100, 116, 128, 126, 128, 118, 108, 121, 120, 99, 113, 117, 103, 98, 90, 104, 98, 82, 102, 104, 89, 87, 69,\n    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\n]\ny0 = [v - random.randint(5, min(y)) for v in y]\n\nline_style = dict(fill='none', stroke='crimson', stroke_width=4)\narea_style = dict(fill='crimson')\n\nsplines = [\n    # Lines\n    g.spline(x=x, y=y, **line_style),  # same as curve='linear'\n    g.spline(x=x, y=y, curve='basis', **line_style),\n    g.spline(x=x, y=y, curve='basis-closed', **line_style),\n    g.spline(x=x, y=y, curve='basis-open', **line_style),\n    g.spline(x=x, y=y, curve='cardinal', **line_style),\n    g.spline(x=x, y=y, curve='cardinal-closed', **line_style),\n    g.spline(x=x, y=y, curve='cardinal-open', **line_style),\n    g.spline(x=x, y=y, curve='smooth', **line_style),\n    g.spline(x=x, y=y, curve='smooth-closed', **line_style),\n    g.spline(x=x, y=y, curve='smooth-open', **line_style),\n    g.spline(x=x, y=y, curve='linear', **line_style),\n    g.spline(x=x, y=y, curve='linear-closed', **line_style),\n    g.spline(x=x, y=y, curve='monotone-x', **line_style),\n    g.spline(x=x, y=y, curve='monotone-y', **line_style),\n    g.spline(x=x, y=y, curve='natural', **line_style),\n    g.spline(x=x, y=y, curve='step', **line_style),\n    g.spline(x=x, y=y, curve='step-after', **line_style),\n    g.spline(x=x, y=y, curve='step-before', **line_style),\n    # Areas\n    g.spline(x=x, y=y, y0=y0, **area_style),  # same as curve='linear'\n    g.spline(x=x, y=y, y0=y0, curve='basis', **area_style),\n    g.spline(x=x, y=y, y0=[], curve='basis', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='basis-open', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='cardinal', **area_style),\n    g.spline(x=x, y=y, y0=[], curve='cardinal', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='cardinal-open', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='smooth', **area_style),\n    g.spline(x=x, y=y, y0=[], curve='smooth', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='smooth-open', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='linear', **area_style),\n    g.spline(x=x, y=y, y0=[], curve='linear', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='monotone-x', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='monotone-y', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='natural', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='step', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='step-after', **area_style),\n    g.spline(x=x, y=y, y0=y0, curve='step-before', **area_style),\n]\n\npage = site['/demo']\nrow, col = 1, 1\nfor spline in splines:\n    page[f'spline_{col}_{row}'] = ui.graphics_card(\n        box=f'{col} {row} 3 1', view_box='0 0 1000 150', width='100%', height='100%',\n        stage=g.stage(\n            text=g.text(text=spline.curve or '', y=40, font_size=40),\n            spline=spline,\n        ),\n    )\n    col += 3\n    if col > 11:\n        row, col = row + 1, 1\n\npage.save()\n")))}c.isMDXComponent=!0},292: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<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?a(Object(r),!0).forEach((function(n){i(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function y(e,n){if(null==e)return{};var r,t,s=function(e,n){if(null==e)return{};var r,t,s={},i=Object.keys(e);for(t=0;t<i.length;t++)r=i[t],n.indexOf(r)>=0||(s[r]=e[r]);return s}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)r=i[t],n.indexOf(r)>=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<i;o++)a[o]=r[o];return s.a.createElement.apply(null,a)}return s.a.createElement.apply(null,r)}x.displayName="MDXCreateElement"},413:function(e,n,r){"use strict";r.r(n),n.default=r.p+"assets/images/graphics-spline-76e8a919798c7e38711618ef9b414f78.png"}}]);
\ No newline at end of file
diff --git a/docs/b1e50d5a.08a7c151.js b/docs/b1e50d5a.81243680.js
similarity index 97%
rename from docs/b1e50d5a.08a7c151.js
rename to docs/b1e50d5a.81243680.js
index 8a70928596..6aa8b9c8c6 100644
--- a/docs/b1e50d5a.08a7c151.js
+++ b/docs/b1e50d5a.81243680.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[160],{213:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return o})),r.d(t,"metadata",(function(){return c})),r.d(t,"rightToc",(function(){return m})),r.d(t,"default",(function(){return u}));var n=r(2),i=r(6),a=(r(0),r(290)),o={title:"Frame"},c={unversionedId:"examples/frame",id:"examples/frame",isDocsHomePage:!1,title:"Frame",description:"Use a frame card to display HTML content.",source:"@site/docs/examples/frame.md",slug:"/examples/frame",permalink:"/wave/docs/examples/frame",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/frame.md",version:"current",sidebar:"someSidebar",previous:{title:"Image",permalink:"/wave/docs/examples/image"},next:{title:"Frame / Path",permalink:"/wave/docs/examples/frame-path"}},m=[],s={rightToc:m};function u(e){var t=e.components,o=Object(i.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},s,o,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use a frame card to display HTML content."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(409).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\nhtml = '''\n<!DOCTYPE html>\n<html>\n<body>\n  <h1>Hello World!</h1>\n</body>\n</html>\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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function m(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=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<a;s++)o[s]=r[s];return i.a.createElement.apply(null,o)}return i.a.createElement.apply(null,r)}p.displayName="MDXCreateElement"},409:function(e,t,r){"use strict";r.r(t),t.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATYAAAC+CAYAAAC/KCOoAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjE3OjI4IFBNIFBEVHPSFY8AABXSSURBVHic7d17VFVV4gfw77kPBAxBvCpoCUKOD2ZUfESIFomaAio6jUA42qyakFErc2mNM5X9bMoSg+m3ftmaMcN3Rubvpxj4oHy0TJvUUVc12YxNySwJERG4QCB3//7Ae7rn3ovcy7083H4/a52l+5x99t7noF/PPvecq2I2mwWIiCSi6+wBEBF5G4ONiKTDYCMi6TDYiEg6DDYikg6DjYikw2AjIukYPNlZCD4CR0TeoyiKV9pxO9haCjOGHBG1hW2Y2eaIJyHncrDZdujj4wODweC1dCUiAppz5vr162hoaFAzpy0549I9NmsHQgj4+PjAaDQy1IjI6xRFgdFohI+PjyZ33OXyhwdCCAghYDB4dFuOiKhVBoNBzZy2aDXY1IZvdMIrNSJqb4qiNGdPG6/aXJ6KijY0TkTUVp7kjttTUSKijtBuU1Hbm3cMNiLqSPa5407+uPXmAYONiDqKJ3nDV6qISDqufypKRNRJ2uVT0RtNuzkUIiJPtdNzbEREtxoGGxFJh8FGRNJhsBGRdBhsRCQdBhsRSYfBRkTSYbARkXQ6NNguXryI0aOiHZb/fuONjhxGi8bHjcOrq1d39jCIyEOd8nW4U6Y8iJiYGLU86Gc/64xhEJGkOmUq+ovhv0DKrFnqEhUVhfLycoyPG4ec118HAHxy9ChGj4rGoUOHAABHjx5BWuocjIu9Fw+np+Hk558DAL788kuMHhWNt99ejxnTk3HfhPHYseNdbNmyGQ/E34/EadNw4vhxAMDmTZswelQ0/nfXLkx9cAoSJj6AjRvznI6x6to1PPvMM5gwPg7JSYnYvm1bu58XIvKOTgm2WnMtrly5oi6NjY0wmUz49bx5eO+991BWVoY33/wfjB4zBvHx8aioqMCK3/8ekZGRyMnJRffu3bF8+TLNi7HFBw8iK+t3CAsLQ87rr+P0qVNYtnw5LJYmvPqqdnq5e/f/4Y9/fA5jxo7FG3/+M44dO+YwxhUrVuDkqZNYvvwZJE+fjuzsNfj444/a/dwQkec6JdjWrXsTUyZPUpezZ84AAObNm48ePQKwaNFCfPPNN1j69FIAQHBwMA4dPoLnnn8Bof36of+dd6KyshJlZWVqm2np6ZiWmIg5c1LR2NiIzAVZSExMQsKkSbh48aKm/yefWoLxEyZg5coXodfrUXzwgGZ7WVkZPv30GBYsWIDpM2ZgwYIsjBk7Fjvf39nOZ4aIvKFT7rH98pcPIf6BB9TyoEGDAAB+fn5ITp6OvLx3MGLkSAweMgQAUFtbi/968UUcOvQxAgICEBAQAABoampS2/D37w4A0Bv0AJr/71Og+X+7sVgsmv779++v9mcymVBRcVWz/fKNwHz5T39Sp8YNDQ0IDw/3/OCJqN11SrCFDwzHuHHjHNbXms3YvWc3BgwYgLNnzuDLL7/EsGHDsLegAAcO7MemTZsR9fOfY8vmzcjJeb3N/X/77QWYTCZUXbuGy5cvY1xcnGa7qbcJQPNVYFpaOoDmEPX19W1zn0TUcTol2M6cOQMfn25q+e67IzFyZDTWr18Pc00NtmzZgiVLliB7zWvY8E4emm5ccX19/mtcLi/He++951H/r69di9S0dOzfvw8WiwWTEiZptvftG4IxY8eiqLAQkZGR0On0+HNuDhKTkrBs2XKP+iai9tcpwXbwwAEcPPDTfa05c1LRu3cfbN++DXN//Wv07RuCp55agqwFmSgqLMSMGTNw+tRJ5OTkoF9oPzw49UFsePvtNvf/8MMZWLduHerr67D4iSdwb2ysQ51XXlmN1a+8jJycHPj6+mJiQgJ+97uFbe6TiDqOYjabW/yKStv/JcZiaUJTkwXBwcEdOT6v2rxpE3Jzc1D80ccICgrq7OEQ0U1UVFRAr9dBp9NDURR1cQVfqSIi6TDYiEg6t9VUlIhuHZyKEhHZYLARkXQYbEQkHQYbEUmHwUZE0mGwEZF0GGxEJB0GGxFJh8FGRNJhsBGRdBhsRCQdBhsRSYfBRkTSYbARkXQYbEQkHQYbEUmHwUZE0mGwEZF0GGxEJB0GGxFJh8FGRNJhsBGRdBhsRCQdBhsRSYfBRkTSYbARkXQYbEQkHQYbEUmHwUZE0mGwEZF0GGxEJB0Gm4uKioqgKIrDMmnSJLfqkHc9++yzTs/5Sy+95FY7ubm5TttZtGhRO42c2lOXCrbs7Gynf7jslyFDhmj28/X1dWm/LVu2tHlskydPxvHjxxEZGelRnfZUUFDg0nkoKSlpU/v19fUtthkfH+/dg3HRc889h4KCAo/bycrKwuHDh+Hv799q3Zdeesnh+MvKyjweA3lPlwq2Rx55BAUFBcjOzkb//v0dti9atAhbt27F+++/r1l/9OhR5OXl4eGHH3bYZ8iQIcjNzUVRURGmT5/e5rHp9XrExMTAZDJ5VKc9TZw4EYWFhZgzZ47DtoiICGzcuBGfffYZQkNDne4vhEBxcTGKi4thsVgctvv6+uLUqVPYsWMHkpKSAAAmkwkbNmzA+vXrvXswLurevTsSEhI8bqdbt2647777YDQaW63br18/TdlgMHTaz5ycM3T2AGyZTCYkJSUhKSkJu3btwn/+8x/N9oULFzpcrQHA2LFjMXbsWPTt2xfbtm3TbBsxYgSefPLJdh13V+Hv74+pU6di2LBhyM/PhxBC3Xbp0iWkpKSgR48eLe6/b98+TJs2DQCwZ88eJCcnO9SJjo5GdHS0evU7a9Ys/OY3v/HykXRt9sEWEhICna5LXSPc9vjTkNCAAQMwfvx4zbq6ujqHK11769atc/p7e3V1dTh48CAAYPbs2R6M9NZkH2z2Zep8DDZJZWRkOKzbtGlTi/VLSkqwd+9etVxUVIR///vfTusePHgQdXV1CAwMxMSJEz0ea1eiKEqrdeyn8i1N7anzMNgk9atf/Qo+Pj6adUeOHMF3333ntP5f/vIXNDU1qWWLxYK33nrLad3du3cDAJKSkhz6uNW5co/NZDJpjptXbF3PbR1sTU1N2LhxIxITExEaGgofHx8EBgZi9OjRWLVqFaqqqtp9DEVFRUhPT8fAgQPRvXt3+Pv7Izw8HKmpqfjwww/b3G5wcDCmTp2qWSeEcPrJ8PXr153e/N+wYQMaGhoc2rB+CtnSNLS8vBwrV65EbGwsTCYTjEYjevXqhZiYGDz//PMoLy932Gfu3LlOP21dunSpWqe0tBRPP/00wsLCoCgKrl+/3vqJsCOEwM6dO5GSkoJ+/fqhW7duCAgIQEREBGbMmIH6+vpW21AUBSEhIWqZwdYFmc1m0dJSU1MjqqurRVVVlaisvCquXLkiOkpcXJwAoFm++uqrm+5TWFjosE9qaqrTuuXl5SI2Nlat16tXLzF//nzRr18/dd3QoUNFeXm5Zr+YmBhN+wkJCQ5tu1Knvr5ezJkzR61jNBpFenq6SElJEYqiaMb/448/unHmfrJjxw6H8zF48GCHevn5+Q71rMvWrVs1dU+cOCEACD8/P1FTU+PQVnFxsQgKClL3HzZsmHj88cdFeHi4ui4oKEgcPnxYs98XX3whsrOzRf/+/TX9//a3vxVCNP9se/bsqdnW2NgohBCirq7OYdyrVq1yGFtNTY1ITEzU1IuIiBCPPfaYmDt3rrjnnns05x6AWLhwodNza/szXr9+vWs/EHLLlStXRGXlVVFVVSWqq6tFTU1Ni1llv9y2wZaUlKSpd+zYMSFE819M2/WPPvqoZj9vBdvixYs1dXJyctRtK1as0GxbtmxZq+fLmdraWtGjRw+Hc3LixAlNvYSEBAFAjBgxwqHu+PHjNXX/8Ic/CABi5syZDv19++23mv769++vhl9ZWZkIDAzUhFtJSYlDG9axWJe0tDSxbds2YTAYHMbmbrBlZGRo6sTExAiz2aypYzvGmwXbrFmz1DoffvjhTX4K1FaeBNstNRXNyspCcnJyi8sLL7zgUjvHjh3T3CgPCwtDbGwsAGDChAmaj+63bduG2tparx5HSUkJ3nzzTc0625v9jz76qGZbbm4ufvjhB7f78fPzczpd3Lx5s/r78+fP46OPPoLBYMAHH3yAXr16aep+8sknOHfunFq23l9z1u4rr7yimb7PnDkT3bt3BwD07t0bM2bMULdVVlbi1VdfbfUYjh49innz5sHX1xcPPfQQsrOzMW7cuFb3s3f69Gls3bpVs27t2rUuPZDrjO30k1PRrueWCrZDhw5h7969LS6fffaZS+3k5+drygMHDlR/bzQaERAQoJbr6upw9uxZ7xzADR988IHmRn3Pnj3Ru3dvtRwREYE77rhDLTc2NmLnzp1t6svZp6PvvvsuGhsbAQBvvfUWhBCYOXMmIiIinD6TZn3047vvvsO5c+dgMBicPuxs/zjJ4MGDNeXhw4c7jKM11dXVWLt2LS5duoT8/HwsXboUL7/8cqv72bMNc6A5aOPi4txux4rB1rXdUsH21VdfQQjR4lJYWOhSOydPntSUbUMEaH4K3Zb9g8Ke+vzzzzVl21Cz6tOnj6b8t7/9rU19TZw40eFxhPLychQWFqK+vh4bN24EACxYsED91f6Rhy1btqC6ulq9WouPj0fPnj01dS5cuICKigrNOvvj6tu3r6Z8+fLlFj+ltRo6dCieeOIJzc/o/vvvx969e6HX62+6r63jx49rylFRUS7v64z1nBqNRr510AXdUsHmLaWlpZqy/TuW9u/9mc3mdu3fz8/PoY51Cmd16dKlNvWl0+mQlpbmsH7Tpk3YsWMHKioqMGjQIPW1pMjISEyZMkVTt7q6Glu3br3pNNT+mADH47I/JqDtx5WYmOjSM2dW33//vaZsH7Lusl6lhYSEuDUO6hhd6pWqjmJ/zywsLOymL3FHRES0a//Orjzsn6fyJFwzMjKQk5OjWVdQUIDz588DADIzMzV/ObOysrBv3z5N/dzcXFy4cAGKomDmzJkOfTi7D2l/XM6eEfP2Pxotqamp0ZQ9ff7OGmychnZNt2Ww2U89o6OjkZeX12H921+52N5vs7LeA7OyH7M7Ro8ejcGDB+Prr79W1/344484d+4cfH198cgjj2jqJycn46677sLFixfVddZ9Y2Njnf5ldnY1Zn9c9scEeHZc7vDz88O1a9fUsv3zee4aNGgQdu3a5fGVH7WP23Iqan/PqSMexLVlHwzOrnbsrzA8vTJw9iEC0PyGgv0noXq9Ho8//rjT+i09lOtsfPbHZX9MLe3XHuzvWTqbOrvD19cXsbGxGDlypEftUPu4LYPtnnvu0ZStU7KOMmbMGE358uXLmrIQwuHxDvt93OXsK52A5mmnM4899pjTqeOsWbOc1g8LC3O4iW5/XPZh0qdPH9x1110tjtmboqOjNeVz585pvv3EHVevXkV8fDxCQkIQGBiI7OxsbwyRvOi2DDb7m+klJSXYv39/h/U/e/ZsGAw/3QWorKzUfGDxr3/9S3O1YzQaPf4WjcjISNx7772adcOHD1ef37MXEhLiEGLDhw+/6Zdo2n8PnO3UF4DDYzPOPtRoLykpKZpyRUUFDh061Ka2XnzxRRw+fBhA8/R6+fLl+Pvf/+7pEMmLbstgi46ORmpqqmZdeno6tm/fjrq6OnVdaWkpiouL2/RO4s2EhoZi4cKFmnW23yNn/97mU0895ZV7OfbT0Zau1lra3lq4PvPMM5rve9u9e7f64cAPP/yg+abbnj17YtmyZS6N2xuSk5MdrtqWLFmCq1evquWzZ8+6dO/tiy++0JSFEA7rqJN1pVeqSktLxa5du8Tq1as172xal6ysLJGXlydOnjyp2e/o0aPir3/9q0hNTXX6bmR2drbYs2ePZvxVVVUO7w1alx49eqiv8Pj4+Aiz2SwaGhrEp59+KiIjIzV1o6KixIkTJ0RjY6NLdazq6urE7Nmz1ToGg8Hpu6IZGRmioaHBK+e3rKxMPa477rhDVFVVtbrPsGHD1LGcOXOm1foHDhzQvFY1dOhQkZmZKQYMGKCu69Wrlzhy5Ihmv+rqanHkyBERFRWlOXeRkZFi37594vvvv3fa37Vr18SePXscfoZpaWniH//4h6buP//5T4efTVBQkIiLi9O8y2q73H333eK1117TnKuVK1dq6vj4+Ihvvvmm1XND7pHmXdE1a9Y4/cPlLKxsdevWzaX9Nm/erNnPYrGIPXv2iNTUVBEeHi78/f2F0WgUoaGhYvLkyWL16tXi4sWLQggh3nnnnZu2vX37dpfq2Nu9e7eYPXu2uPPOO0W3bt2En5+fGDhwoEhPTxf79+/3+jmeNm2aACAyMzNdqv/GG2+oAeOq0tJSsWLFCjFq1CgRGBgoDAaDCA4OFuPGjROrVq1y+ufI/j1OZ4uz8Jg/f/5N97l06ZKmfk1NjVizZo2Ii4sTwcHBQqfTCQCid+/eYvHixS3+Y3f69Gm1jfr6epGZmSmCgoJERESEyM/Pd/nckOs8CTbFbDa3eAdV2DzVb7E0oanJguDg4JaqExF5TUVFBfR6HXQ6veYBelfclvfYiEhuDDYikg6DjYikw2AjIukw2IhIOgw2IpIOg42IpMNgIyLpMNiISDoMNiKSDoONiKTDYCMi6TDYiEg6DDYikg6DjYikw2AjIukw2IhIOgw2IpIOg42IpMNgIyLpMNiISDoMNiKSDoONiKTDYCMi6TDYiEg6DDYikg6DjYikw2AjIukw2IhIOgw2IpIOg42IpMNgIyLpMNiISDoMNiKSDoONiKTDYCMi6TDYiEg6DDYikg6DjYikw2AjIukw2IhIOgw2IpIOg42IpMNgIyLpMNiISDoMNiKSDoONiKTDYCMi6TDYiEg6DDYikg6DjYikw2AjIukw2IhIOgw2IpIOg42IpMNgIyLpMNiISDoMNiKSDoONiKTDYCMi6TDYiEg6DDYikg6DjYikw2AjIukw2IhIOgw2IpIOg42IpMNgIyLpMNiISDoMNiKSDoONiKTDYCMi6TDYiEg6DDYikg6DjYikw2AjIukw2IhIOm4Em9J+oyAicqptudNqsCmKtmEhRJs6IiJylX3O2OdQa9yeitbX17u7CxGRWzzNGbeCTVEUmM1m1NbW8sqNiLxOCIHa2lqYzWa3r9JsKWaz+aYJJYSAEAIWiwUWiwVNTU2wNDWhyWJRtwECzDkiaovm/FKgKM2LXqeDTq+HXq+HTqeDTqdTt7nK4HrnzQ3rFAVCp4MegEUNNiumGxG546ewsuaLotM1/+pmmNlyKdgURQGEaO7IGmqKAsU+2IRgtBGRS5ov1LTBZhtuiqJAgfsfHAAuBJuiKM3hdaMTnU4HYRNqvNdGRN6g2FylqVdrN0LN3XBzayoKNKesuBF2LYcaw46IbsZ5UKmh1lxo/6mouDEVhc20lFdrRORNipMrtHaZito3rgacXYcMOSJqi5aCy5PHPVwONmed2YaZJ4MgIgK8lyNuB1t7DIKIyJv47R5EJB0GGxFJh8FGRNJhsBGRdP4fmorRKHaYkl4AAAAASUVORK5CYII="}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[161],{214:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return o})),r.d(t,"metadata",(function(){return c})),r.d(t,"rightToc",(function(){return m})),r.d(t,"default",(function(){return u}));var n=r(2),i=r(6),a=(r(0),r(292)),o={title:"Frame"},c={unversionedId:"examples/frame",id:"examples/frame",isDocsHomePage:!1,title:"Frame",description:"Use a frame card to display HTML content.",source:"@site/docs/examples/frame.md",slug:"/examples/frame",permalink:"/wave/docs/examples/frame",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/frame.md",version:"current",sidebar:"someSidebar",previous:{title:"Image",permalink:"/wave/docs/examples/image"},next:{title:"Frame / Path",permalink:"/wave/docs/examples/frame-path"}},m=[],s={rightToc:m};function u(e){var t=e.components,o=Object(i.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},s,o,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use a frame card to display HTML content."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(414).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\nhtml = '''\n<!DOCTYPE html>\n<html>\n<body>\n  <h1>Hello World!</h1>\n</body>\n</html>\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},292: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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function m(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=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<a;s++)o[s]=r[s];return i.a.createElement.apply(null,o)}return i.a.createElement.apply(null,r)}p.displayName="MDXCreateElement"},414:function(e,t,r){"use strict";r.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/b22f7242.2a60e38a.js b/docs/b22f7242.be8d2b44.js
similarity index 98%
rename from docs/b22f7242.2a60e38a.js
rename to docs/b22f7242.be8d2b44.js
index 527855e573..1016f1f84b 100644
--- a/docs/b22f7242.2a60e38a.js
+++ b/docs/b22f7242.be8d2b44.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[161],{214:function(e,i,n){"use strict";n.r(i),n.d(i,"frontMatter",(function(){return r})),n.d(i,"metadata",(function(){return R})),n.d(i,"rightToc",(function(){return u})),n.d(i,"default",(function(){return c}));var t=n(2),a=n(6),o=(n(0),n(290)),r={title:"Plot / Vega-lite"},R={unversionedId:"examples/plot-vegalite",id:"examples/plot-vegalite",isDocsHomePage:!1,title:"Plot / Vega-lite",description:"Make a plot using Vega-lite.",source:"@site/docs/examples/plot-vegalite.md",slug:"/examples/plot-vegalite",permalink:"/wave/docs/examples/plot-vegalite",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-vegalite.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Form",permalink:"/wave/docs/examples/plot-form"},next:{title:"Plot / Vega-lite / Update",permalink:"/wave/docs/examples/plot-vegalite-update"}},u=[],l={rightToc:u};function c(e){var i=e.components,r=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(t.a)({},l,r,{components:i,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a plot using Vega-lite."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(410).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),'from h2o_wave import site, data, ui\n\npage = site[\'/demo\']\n\nspec1 = \'\'\'\n{\n  "description": "A simple bar plot with embedded data.",\n  "data": {\n    "values": [\n      {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},\n      {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},\n      {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}\n    ]\n  },\n  "mark": "bar",\n  "encoding": {\n    "x": {"field": "a", "type": "ordinal"},\n    "y": {"field": "b", "type": "quantitative"}\n  }\n}\n\'\'\'\n\npage.add(\'embedded\', ui.vega_card(\n    box=\'1 1 2 4\',\n    title=\'Plot with embedded data\',\n    specification=spec1,\n))\n\n# The following produces the same plot as above, but separates the\n# Vega-lite spec from the data. This allows you to create a plot once\n# and update data multiple times.\nspec2 = \'\'\'\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\ndata2 = data(fields=["a", "b"], rows=[\n    ["A", 28], ["B", 55], ["C", 43],\n    ["D", 91], ["E", 81], ["F", 53],\n    ["G", 19], ["H", 87], ["I", 52]\n])\n\npage.add(\'external\', ui.vega_card(\n    box=\'1 5 2 4\',\n    title=\'Plot with external data\',\n    specification=spec2,\n    data=data2,\n))\n\npage.save()\n')))}c.isMDXComponent=!0},290:function(e,i,n){"use strict";n.d(i,"a",(function(){return d})),n.d(i,"b",(function(){return s}));var t=n(0),a=n.n(t);function o(e,i,n){return i in e?Object.defineProperty(e,i,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[i]=n,e}function r(e,i){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);i&&(t=t.filter((function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable}))),n.push.apply(n,t)}return n}function R(e){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{};i%2?r(Object(n),!0).forEach((function(i){o(e,i,n[i])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(i){Object.defineProperty(e,i,Object.getOwnPropertyDescriptor(n,i))}))}return e}function u(e,i){if(null==e)return{};var n,t,a=function(e,i){if(null==e)return{};var n,t,a={},o=Object.keys(e);for(t=0;t<o.length;t++)n=o[t],i.indexOf(n)>=0||(a[n]=e[n]);return a}(e,i);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)n=o[t],i.indexOf(n)>=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<o;l++)r[l]=n[l];return a.a.createElement.apply(null,r)}return a.a.createElement.apply(null,n)}p.displayName="MDXCreateElement"},410:function(e,i,n){"use strict";n.r(i),i.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[162],{215:function(e,i,n){"use strict";n.r(i),n.d(i,"frontMatter",(function(){return r})),n.d(i,"metadata",(function(){return R})),n.d(i,"rightToc",(function(){return u})),n.d(i,"default",(function(){return c}));var t=n(2),a=n(6),o=(n(0),n(292)),r={title:"Plot / Vega-lite"},R={unversionedId:"examples/plot-vegalite",id:"examples/plot-vegalite",isDocsHomePage:!1,title:"Plot / Vega-lite",description:"Make a plot using Vega-lite.",source:"@site/docs/examples/plot-vegalite.md",slug:"/examples/plot-vegalite",permalink:"/wave/docs/examples/plot-vegalite",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-vegalite.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Form",permalink:"/wave/docs/examples/plot-form"},next:{title:"Plot / Vega-lite / Update",permalink:"/wave/docs/examples/plot-vegalite-update"}},u=[],l={rightToc:u};function c(e){var i=e.components,r=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(t.a)({},l,r,{components:i,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a plot using Vega-lite."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(415).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),'from h2o_wave import site, data, ui\n\npage = site[\'/demo\']\n\nspec1 = \'\'\'\n{\n  "description": "A simple bar plot with embedded data.",\n  "data": {\n    "values": [\n      {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},\n      {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},\n      {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}\n    ]\n  },\n  "mark": "bar",\n  "encoding": {\n    "x": {"field": "a", "type": "ordinal"},\n    "y": {"field": "b", "type": "quantitative"}\n  }\n}\n\'\'\'\n\npage.add(\'embedded\', ui.vega_card(\n    box=\'1 1 2 4\',\n    title=\'Plot with embedded data\',\n    specification=spec1,\n))\n\n# The following produces the same plot as above, but separates the\n# Vega-lite spec from the data. This allows you to create a plot once\n# and update data multiple times.\nspec2 = \'\'\'\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\ndata2 = data(fields=["a", "b"], rows=[\n    ["A", 28], ["B", 55], ["C", 43],\n    ["D", 91], ["E", 81], ["F", 53],\n    ["G", 19], ["H", 87], ["I", 52]\n])\n\npage.add(\'external\', ui.vega_card(\n    box=\'1 5 2 4\',\n    title=\'Plot with external data\',\n    specification=spec2,\n    data=data2,\n))\n\npage.save()\n')))}c.isMDXComponent=!0},292:function(e,i,n){"use strict";n.d(i,"a",(function(){return d})),n.d(i,"b",(function(){return s}));var t=n(0),a=n.n(t);function o(e,i,n){return i in e?Object.defineProperty(e,i,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[i]=n,e}function r(e,i){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);i&&(t=t.filter((function(i){return Object.getOwnPropertyDescriptor(e,i).enumerable}))),n.push.apply(n,t)}return n}function R(e){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{};i%2?r(Object(n),!0).forEach((function(i){o(e,i,n[i])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(i){Object.defineProperty(e,i,Object.getOwnPropertyDescriptor(n,i))}))}return e}function u(e,i){if(null==e)return{};var n,t,a=function(e,i){if(null==e)return{};var n,t,a={},o=Object.keys(e);for(t=0;t<o.length;t++)n=o[t],i.indexOf(n)>=0||(a[n]=e[n]);return a}(e,i);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)n=o[t],i.indexOf(n)>=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<o;l++)r[l]=n[l];return a.a.createElement.apply(null,r)}return a.a.createElement.apply(null,n)}p.displayName="MDXCreateElement"},415:function(e,i,n){"use strict";n.r(i),i.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/b4d5475e.dd3985c3.js b/docs/b4d5475e.dd3985c3.js
new file mode 100644
index 0000000000..a0bc9cd7a0
--- /dev/null
+++ b/docs/b4d5475e.dd3985c3.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[163],{216:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return c})),t.d(n,"metadata",(function(){return i})),t.d(n,"rightToc",(function(){return s})),t.d(n,"default",(function(){return l}));var r=t(2),a=t(6),o=(t(0),t(292)),c={title:"Background Tasks"},i={unversionedId:"background",id:"background",isDocsHomePage:!1,title:"Background Tasks",description:"Wave apps are servers based on asyncio, Python's library for Asynchronous I/O, and lets you develop and deploy high-performance applications.",source:"@site/docs/background.md",slug:"/background",permalink:"/wave/docs/background",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/background.md",version:"current",sidebar:"someSidebar",previous:{title:"Realtime Sync",permalink:"/wave/docs/realtime"},next:{title:"Data-binding",permalink:"/wave/docs/expressions"}},s=[],p={rightToc:s};function l(e){var n=e.components,t=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,t,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Wave apps are servers based on ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://docs.python.org/3/library/asyncio.html"}),"asyncio"),", Python's library for Asynchronous I/O, and lets you develop and deploy high-performance applications. "),Object(o.b)("p",null,"Your ",Object(o.b)("inlineCode",{parentName:"p"},"@app")," query handler is invoked every time a user performs some action in your app's UI - access the page, reload it, click a button, access a menu, enter text, and so on. Performing blocking operations in your handler will hang your app's server and make your app's UI appear unresponsive until the blocking operation completes."),Object(o.b)("p",null,"In some cases, blocking calls can be pushed to the background to improve concurrency. To achieve this, the Wave API provides two lightweight wrappers over ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://docs.python.org/3/library/asyncio-eventloop.html#asyncio.loop.run_in_executor"}),"asyncio.run_in_executor()"),": ",Object(o.b)("inlineCode",{parentName:"p"},"q.run()")," and ",Object(o.b)("inlineCode",{parentName:"p"},"q.exec()"),"."),Object(o.b)("p",null,"Here is an example of a function that blocks:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-python",metastring:"{1,4}","{1,4}":!0}),"import time\n\ndef blocking_function(seconds) -> str:\n    time.sleep(seconds)  # Blocks!\n    return f'Done!'\n")),Object(o.b)("p",null,"To call the above function from an app, don't do this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-python",metastring:"{4}","{4}":!0}),"@app('/demo')\nasync def serve(q: Q):\n    # ...\n    message = blocking_function(42)\n    # ...\n")),Object(o.b)("p",null,"Instead, do this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-python",metastring:"{4}","{4}":!0}),"@app('/demo')\nasync def serve(q: Q):\n    # ...\n    message = await q.run(blocking_function, 42)\n    # ...\n")),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"q.run()")," runs the blocking function in the background, in-process."),Object(o.b)("p",null,"Depending on your use case, you might want to use a separate process pool or thread pool from Python's ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://docs.python.org/3/library/multiprocessing.html"}),"multiprocessing")," library, like this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-python",metastring:"{1,6-7}","{1,6-7}":!0}),"import concurrent.futures\n\n@app('/demo')\nasync def serve(q: Q):\n    # ...\n    with concurrent.futures.ThreadPoolExecutor() as pool:\n        message = await q.exec(pool, blocking_function, 42)\n    # ...\n")),Object(o.b)("p",null,Object(o.b)("inlineCode",{parentName:"p"},"q.exec()")," accepts a custom process pool or thread pool to run the blocking function."),Object(o.b)("div",{className:"admonition admonition-tip alert alert--success"},Object(o.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(r.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(r.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"}),Object(o.b)("path",Object(r.a)({parentName:"svg"},{fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"})))),"tip")),Object(o.b)("div",Object(r.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"Apps that make calls to external services or APIs are better off replacing blocking HTTP clients like ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://requests.readthedocs.io/en/master/"}),"requests")," with non-blocking clients like ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://www.python-httpx.org/async/"}),"HTTPX"),"."))))}l.isMDXComponent=!0},292:function(e,n,t){"use strict";t.d(n,"a",(function(){return b})),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 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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?c(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function s(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var p=a.a.createContext({}),l=function(e){var n=a.a.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},b=function(e){var n=l(e.components);return a.a.createElement(p.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,c=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),b=l(t),d=r,m=b["".concat(c,".").concat(d)]||b[d]||u[d]||o;return t?a.a.createElement(m,i(i({ref:n},p),{},{components:t})):a.a.createElement(m,i({ref:n},p))}));function m(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,c=new Array(o);c[0]=d;var i={};for(var s in n)hasOwnProperty.call(n,s)&&(i[s]=n[s]);i.originalType=e,i.mdxType="string"==typeof e?e:r,c[1]=i;for(var p=2;p<o;p++)c[p]=t[p];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,t)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/b81c5e46.c8f1b9ee.js b/docs/b81c5e46.e3f1d216.js
similarity index 92%
rename from docs/b81c5e46.c8f1b9ee.js
rename to docs/b81c5e46.e3f1d216.js
index dc271ec832..0a12888bfa 100644
--- a/docs/b81c5e46.c8f1b9ee.js
+++ b/docs/b81c5e46.e3f1d216.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[162],{215:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return i})),t.d(n,"metadata",(function(){return c})),t.d(n,"rightToc",(function(){return p})),t.d(n,"default",(function(){return l}));var r=t(2),a=t(6),o=(t(0),t(290)),i={title:"Image"},c={unversionedId:"examples/image",id:"examples/image",isDocsHomePage:!1,title:"Image",description:"Use an image card to display a base64-encoded image.",source:"@site/docs/examples/image.md",slug:"/examples/image",permalink:"/wave/docs/examples/image",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/image.md",version:"current",sidebar:"someSidebar",previous:{title:"Table / Preselection",permalink:"/wave/docs/examples/table-select"},next:{title:"Frame",permalink:"/wave/docs/examples/frame"}},p=[],s={rightToc:p};function l(e){var n=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},s,i,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use an image card to display a base64-encoded image."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(411).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\nimport io\nimport base64\nimport numpy as np\nimport matplotlib.pyplot as plt\n\nnp.random.seed(19680801)\n\nn = 25\nplt.figure(figsize=(3, 3))\nplt.scatter(\n    np.random.rand(n), np.random.rand(n),\n    s=(30 * np.random.rand(n)) ** 2,\n    c=np.random.rand(n),\n    alpha=0.5,\n)\n\nbuf = io.BytesIO()\nplt.savefig(buf, format='png')\nbuf.seek(0)\nimage = base64.b64encode(buf.read()).decode('utf-8')\n\npage = site['/demo']\npage['example'] = ui.image_card(\n    box='1 1 3 5',\n    title='An image',\n    type='png',\n    image=image,\n)\npage.save()\n")))}l.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return m})),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 c(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function p(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=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<o;s++)i[s]=t[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}d.displayName="MDXCreateElement"},411:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/image-dab53361cb560c92baeb4fb3315cab5a.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[164],{217:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return i})),t.d(n,"metadata",(function(){return c})),t.d(n,"rightToc",(function(){return p})),t.d(n,"default",(function(){return l}));var r=t(2),a=t(6),o=(t(0),t(292)),i={title:"Image"},c={unversionedId:"examples/image",id:"examples/image",isDocsHomePage:!1,title:"Image",description:"Use an image card to display a base64-encoded image.",source:"@site/docs/examples/image.md",slug:"/examples/image",permalink:"/wave/docs/examples/image",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/image.md",version:"current",sidebar:"someSidebar",previous:{title:"Table / Preselection",permalink:"/wave/docs/examples/table-select"},next:{title:"Frame",permalink:"/wave/docs/examples/frame"}},p=[],s={rightToc:p};function l(e){var n=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},s,i,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use an image card to display a base64-encoded image."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(416).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\nimport io\nimport base64\nimport numpy as np\nimport matplotlib.pyplot as plt\n\nnp.random.seed(19680801)\n\nn = 25\nplt.figure(figsize=(3, 3))\nplt.scatter(\n    np.random.rand(n), np.random.rand(n),\n    s=(30 * np.random.rand(n)) ** 2,\n    c=np.random.rand(n),\n    alpha=0.5,\n)\n\nbuf = io.BytesIO()\nplt.savefig(buf, format='png')\nbuf.seek(0)\nimage = base64.b64encode(buf.read()).decode('utf-8')\n\npage = site['/demo']\npage['example'] = ui.image_card(\n    box='1 1 3 5',\n    title='An image',\n    type='png',\n    image=image,\n)\npage.save()\n")))}l.isMDXComponent=!0},292:function(e,n,t){"use strict";t.d(n,"a",(function(){return m})),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 c(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function p(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=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<o;s++)i[s]=t[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}d.displayName="MDXCreateElement"},416:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/image-dab53361cb560c92baeb4fb3315cab5a.png"}}]);
\ No newline at end of file
diff --git a/docs/b8435c12.1840dde3.js b/docs/b8435c12.a4ac6d35.js
similarity index 92%
rename from docs/b8435c12.1840dde3.js
rename to docs/b8435c12.a4ac6d35.js
index e41f54f590..ab4612417e 100644
--- a/docs/b8435c12.1840dde3.js
+++ b/docs/b8435c12.a4ac6d35.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[163],{216: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 p})),r.d(t,"default",(function(){return l}));var n=r(2),a=r(6),o=(r(0),r(290)),i={title:"Markdown / Data"},c={unversionedId:"examples/markdown-data",id:"examples/markdown-data",isDocsHomePage:!1,title:"Markdown / Data",description:"Display dynamic formatted content using markdown.",source:"@site/docs/examples/markdown-data.md",slug:"/examples/markdown-data",permalink:"/wave/docs/examples/markdown-data",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/markdown-data.md",version:"current",sidebar:"someSidebar",previous:{title:"Markdown",permalink:"/wave/docs/examples/markdown"},next:{title:"Markup",permalink:"/wave/docs/examples/markup"}},p=[],s={rightToc:p};function l(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},s,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Display dynamic formatted content using markdown."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(412).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"import time\nfrom h2o_wave import site, ui\n\npage = site['/demo']\n\nbeer_verse = '''\n{{before}} bottles of beer on the wall, {{before}} bottles of beer.\n\nTake one down, pass it around, {{after}} bottles of beer on the wall...\n'''\n\nbeer_card = page.add('example', ui.markdown_card(\n    box='1 1 4 2',\n    title='99 Bottles of Beer',\n    content='=' + beer_verse,  # Make the verse a template expression by prefixing a '='.\n    data=dict(before='99', after='98'),\n))\n\npage.save()\n\nfor i in range(98, 2, -1):\n    time.sleep(1)\n    beer_card.data.before = str(i)\n    beer_card.data.after = str(i - 1)\n    page.save()\n")))}l.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return d})),r.d(t,"b",(function(){return f}));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 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 c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;s++)i[s]=r[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},412:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/markdown-data-34fd56cbb56e79c00a4539f5bfab1e3b.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[165],{218: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 p})),r.d(t,"default",(function(){return l}));var n=r(2),a=r(6),o=(r(0),r(292)),i={title:"Markdown / Data"},c={unversionedId:"examples/markdown-data",id:"examples/markdown-data",isDocsHomePage:!1,title:"Markdown / Data",description:"Display dynamic formatted content using markdown.",source:"@site/docs/examples/markdown-data.md",slug:"/examples/markdown-data",permalink:"/wave/docs/examples/markdown-data",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/markdown-data.md",version:"current",sidebar:"someSidebar",previous:{title:"Markdown",permalink:"/wave/docs/examples/markdown"},next:{title:"Markup",permalink:"/wave/docs/examples/markup"}},p=[],s={rightToc:p};function l(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},s,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Display dynamic formatted content using markdown."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(417).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"import time\nfrom h2o_wave import site, ui\n\npage = site['/demo']\n\nbeer_verse = '''\n{{before}} bottles of beer on the wall, {{before}} bottles of beer.\n\nTake one down, pass it around, {{after}} bottles of beer on the wall...\n'''\n\nbeer_card = page.add('example', ui.markdown_card(\n    box='1 1 4 2',\n    title='99 Bottles of Beer',\n    content='=' + beer_verse,  # Make the verse a template expression by prefixing a '='.\n    data=dict(before='99', after='98'),\n))\n\npage.save()\n\nfor i in range(98, 2, -1):\n    time.sleep(1)\n    beer_card.data.before = str(i)\n    beer_card.data.after = str(i - 1)\n    page.save()\n")))}l.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return d})),r.d(t,"b",(function(){return f}));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 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 c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;s++)i[s]=r[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},417:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/markdown-data-34fd56cbb56e79c00a4539f5bfab1e3b.png"}}]);
\ No newline at end of file
diff --git a/docs/b999a6e4.aa78f2b5.js b/docs/b999a6e4.b163bfee.js
similarity index 59%
rename from docs/b999a6e4.aa78f2b5.js
rename to docs/b999a6e4.b163bfee.js
index eed905f0cf..f232881650 100644
--- a/docs/b999a6e4.aa78f2b5.js
+++ b/docs/b999a6e4.b163bfee.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[164],{217:function(e,a,t){"use strict";t.r(a),t.d(a,"frontMatter",(function(){return b})),t.d(a,"metadata",(function(){return n})),t.d(a,"rightToc",(function(){return o})),t.d(a,"default",(function(){return l}));var s=t(2),i=t(6),c=(t(0),t(290)),b={title:"Module h2o_wave.types"},n={unversionedId:"api/types",id:"api/types",isDocsHomePage:!1,title:"Module h2o_wave.types",description:"Classes",source:"@site/docs/api/types.md",slug:"/api/types",permalink:"/wave/docs/api/types",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/api/types.md",version:"current",sidebar:"someSidebar",previous:{title:"Module h2o_wave.graphics",permalink:"/wave/docs/api/graphics"},next:{title:"Module h2o_wave.test",permalink:"/wave/docs/api/test"}},o=[{value:"Classes",id:"classes",children:[{value:'Breadcrumb <a name="h2o_wave.types.Breadcrumb"/>',id:"breadcrumb",children:[]},{value:'BreadcrumbsCard <a name="h2o_wave.types.BreadcrumbsCard"/>',id:"breadcrumbscard",children:[]},{value:'Button <a name="h2o_wave.types.Button"/>',id:"button",children:[]},{value:'Buttons <a name="h2o_wave.types.Buttons"/>',id:"buttons",children:[]},{value:'Checkbox <a name="h2o_wave.types.Checkbox"/>',id:"checkbox",children:[]},{value:'Checklist <a name="h2o_wave.types.Checklist"/>',id:"checklist",children:[]},{value:'Choice <a name="h2o_wave.types.Choice"/>',id:"choice",children:[]},{value:'ChoiceGroup <a name="h2o_wave.types.ChoiceGroup"/>',id:"choicegroup",children:[]},{value:'ColorPicker <a name="h2o_wave.types.ColorPicker"/>',id:"colorpicker",children:[]},{value:'Combobox <a name="h2o_wave.types.Combobox"/>',id:"combobox",children:[]},{value:'Command <a name="h2o_wave.types.Command"/>',id:"command",children:[]},{value:'Component <a name="h2o_wave.types.Component"/>',id:"component",children:[]},{value:'DatePicker <a name="h2o_wave.types.DatePicker"/>',id:"datepicker",children:[]},{value:'Dropdown <a name="h2o_wave.types.Dropdown"/>',id:"dropdown",children:[]},{value:'Expander <a name="h2o_wave.types.Expander"/>',id:"expander",children:[]},{value:'FileUpload <a name="h2o_wave.types.FileUpload"/>',id:"fileupload",children:[]},{value:'FlexCard <a name="h2o_wave.types.FlexCard"/>',id:"flexcard",children:[]},{value:'FormCard <a name="h2o_wave.types.FormCard"/>',id:"formcard",children:[]},{value:'Frame <a name="h2o_wave.types.Frame"/>',id:"frame",children:[]},{value:'FrameCard <a name="h2o_wave.types.FrameCard"/>',id:"framecard",children:[]},{value:'GraphicsCard <a name="h2o_wave.types.GraphicsCard"/>',id:"graphicscard",children:[]},{value:'GridCard <a name="h2o_wave.types.GridCard"/>',id:"gridcard",children:[]},{value:'HeaderCard <a name="h2o_wave.types.HeaderCard"/>',id:"headercard",children:[]},{value:'IconTableCellType <a name="h2o_wave.types.IconTableCellType"/>',id:"icontablecelltype",children:[]},{value:'ImageCard <a name="h2o_wave.types.ImageCard"/>',id:"imagecard",children:[]},{value:'Label <a name="h2o_wave.types.Label"/>',id:"label",children:[]},{value:'LargeBarStatCard <a name="h2o_wave.types.LargeBarStatCard"/>',id:"largebarstatcard",children:[]},{value:'LargeStatCard <a name="h2o_wave.types.LargeStatCard"/>',id:"largestatcard",children:[]},{value:'Link <a name="h2o_wave.types.Link"/>',id:"link",children:[]},{value:'ListCard <a name="h2o_wave.types.ListCard"/>',id:"listcard",children:[]},{value:'ListItem1Card <a name="h2o_wave.types.ListItem1Card"/>',id:"listitem1card",children:[]},{value:'Mark <a name="h2o_wave.types.Mark"/>',id:"mark",children:[]},{value:'MarkdownCard <a name="h2o_wave.types.MarkdownCard"/>',id:"markdowncard",children:[]},{value:'Markup <a name="h2o_wave.types.Markup"/>',id:"markup",children:[]},{value:'MarkupCard <a name="h2o_wave.types.MarkupCard"/>',id:"markupcard",children:[]},{value:'MessageBar <a name="h2o_wave.types.MessageBar"/>',id:"messagebar",children:[]},{value:'MetaCard <a name="h2o_wave.types.MetaCard"/>',id:"metacard",children:[]},{value:'NavCard <a name="h2o_wave.types.NavCard"/>',id:"navcard",children:[]},{value:'NavGroup <a name="h2o_wave.types.NavGroup"/>',id:"navgroup",children:[]},{value:'NavItem <a name="h2o_wave.types.NavItem"/>',id:"navitem",children:[]},{value:'Picker <a name="h2o_wave.types.Picker"/>',id:"picker",children:[]},{value:'PixelArtCard <a name="h2o_wave.types.PixelArtCard"/>',id:"pixelartcard",children:[]},{value:'Plot <a name="h2o_wave.types.Plot"/>',id:"plot",children:[]},{value:'PlotCard <a name="h2o_wave.types.PlotCard"/>',id:"plotcard",children:[]},{value:'Progress <a name="h2o_wave.types.Progress"/>',id:"progress",children:[]},{value:'ProgressTableCellType <a name="h2o_wave.types.ProgressTableCellType"/>',id:"progresstablecelltype",children:[]},{value:'RangeSlider <a name="h2o_wave.types.RangeSlider"/>',id:"rangeslider",children:[]},{value:'RepeatCard <a name="h2o_wave.types.RepeatCard"/>',id:"repeatcard",children:[]},{value:'Separator <a name="h2o_wave.types.Separator"/>',id:"separator",children:[]},{value:'Slider <a name="h2o_wave.types.Slider"/>',id:"slider",children:[]},{value:'SmallSeriesStatCard <a name="h2o_wave.types.SmallSeriesStatCard"/>',id:"smallseriesstatcard",children:[]},{value:'SmallStatCard <a name="h2o_wave.types.SmallStatCard"/>',id:"smallstatcard",children:[]},{value:'Spinbox <a name="h2o_wave.types.Spinbox"/>',id:"spinbox",children:[]},{value:'Step <a name="h2o_wave.types.Step"/>',id:"step",children:[]},{value:'Stepper <a name="h2o_wave.types.Stepper"/>',id:"stepper",children:[]},{value:'Tab <a name="h2o_wave.types.Tab"/>',id:"tab",children:[]},{value:'TabCard <a name="h2o_wave.types.TabCard"/>',id:"tabcard",children:[]},{value:'Table <a name="h2o_wave.types.Table"/>',id:"table",children:[]},{value:'TableCellType <a name="h2o_wave.types.TableCellType"/>',id:"tablecelltype",children:[]},{value:'TableColumn <a name="h2o_wave.types.TableColumn"/>',id:"tablecolumn",children:[]},{value:'TableRow <a name="h2o_wave.types.TableRow"/>',id:"tablerow",children:[]},{value:'Tabs <a name="h2o_wave.types.Tabs"/>',id:"tabs",children:[]},{value:'TallGaugeStatCard <a name="h2o_wave.types.TallGaugeStatCard"/>',id:"tallgaugestatcard",children:[]},{value:'TallSeriesStatCard <a name="h2o_wave.types.TallSeriesStatCard"/>',id:"tallseriesstatcard",children:[]},{value:'Template <a name="h2o_wave.types.Template"/>',id:"template",children:[]},{value:'TemplateCard <a name="h2o_wave.types.TemplateCard"/>',id:"templatecard",children:[]},{value:'Text <a name="h2o_wave.types.Text"/>',id:"text",children:[]},{value:'TextL <a name="h2o_wave.types.TextL"/>',id:"textl",children:[]},{value:'TextM <a name="h2o_wave.types.TextM"/>',id:"textm",children:[]},{value:'TextS <a name="h2o_wave.types.TextS"/>',id:"texts",children:[]},{value:'TextXl <a name="h2o_wave.types.TextXl"/>',id:"textxl",children:[]},{value:'TextXs <a name="h2o_wave.types.TextXs"/>',id:"textxs",children:[]},{value:'Textbox <a name="h2o_wave.types.Textbox"/>',id:"textbox",children:[]},{value:'Toggle <a name="h2o_wave.types.Toggle"/>',id:"toggle",children:[]},{value:'ToolbarCard <a name="h2o_wave.types.ToolbarCard"/>',id:"toolbarcard",children:[]},{value:'VegaCard <a name="h2o_wave.types.VegaCard"/>',id:"vegacard",children:[]},{value:'VegaVisualization <a name="h2o_wave.types.VegaVisualization"/>',id:"vegavisualization",children:[]},{value:'Visualization <a name="h2o_wave.types.Visualization"/>',id:"visualization",children:[]},{value:'WideBarStatCard <a name="h2o_wave.types.WideBarStatCard"/>',id:"widebarstatcard",children:[]},{value:'WideGaugeStatCard <a name="h2o_wave.types.WideGaugeStatCard"/>',id:"widegaugestatcard",children:[]},{value:'WideSeriesStatCard <a name="h2o_wave.types.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,"<html>...</html>"),".")),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,"<html>...</html>"))),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<arguments.length;a++){var t=null!=arguments[a]?arguments[a]:{};a%2?b(Object(t),!0).forEach((function(a){c(e,a,t[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):b(Object(t)).forEach((function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(t,a))}))}return e}function o(e,a){if(null==e)return{};var t,s,i=function(e,a){if(null==e)return{};var t,s,i={},c=Object.keys(e);for(s=0;s<c.length;s++)t=c[s],a.indexOf(t)>=0||(i[t]=e[t]);return i}(e,a);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(s=0;s<c.length;s++)t=c[s],a.indexOf(t)>=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<c;d++)b[d]=t[d];return i.a.createElement.apply(null,b)}return i.a.createElement.apply(null,t)}_.displayName="MDXCreateElement"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[166],{219:function(e,a,t){"use strict";t.r(a),t.d(a,"frontMatter",(function(){return b})),t.d(a,"metadata",(function(){return n})),t.d(a,"rightToc",(function(){return o})),t.d(a,"default",(function(){return l}));var s=t(2),i=t(6),c=(t(0),t(292)),b={title:"Module h2o_wave.types"},n={unversionedId:"api/types",id:"api/types",isDocsHomePage:!1,title:"Module h2o_wave.types",description:"Classes",source:"@site/docs/api/types.md",slug:"/api/types",permalink:"/wave/docs/api/types",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/api/types.md",version:"current",sidebar:"someSidebar",previous:{title:"Module h2o_wave.graphics",permalink:"/wave/docs/api/graphics"},next:{title:"Module h2o_wave.test",permalink:"/wave/docs/api/test"}},o=[{value:"Classes",id:"classes",children:[{value:'Breadcrumb <a name="h2o_wave.types.Breadcrumb"/>',id:"breadcrumb",children:[]},{value:'BreadcrumbsCard <a name="h2o_wave.types.BreadcrumbsCard"/>',id:"breadcrumbscard",children:[]},{value:'Button <a name="h2o_wave.types.Button"/>',id:"button",children:[]},{value:'Buttons <a name="h2o_wave.types.Buttons"/>',id:"buttons",children:[]},{value:'Checkbox <a name="h2o_wave.types.Checkbox"/>',id:"checkbox",children:[]},{value:'Checklist <a name="h2o_wave.types.Checklist"/>',id:"checklist",children:[]},{value:'Choice <a name="h2o_wave.types.Choice"/>',id:"choice",children:[]},{value:'ChoiceGroup <a name="h2o_wave.types.ChoiceGroup"/>',id:"choicegroup",children:[]},{value:'ColorPicker <a name="h2o_wave.types.ColorPicker"/>',id:"colorpicker",children:[]},{value:'Combobox <a name="h2o_wave.types.Combobox"/>',id:"combobox",children:[]},{value:'Command <a name="h2o_wave.types.Command"/>',id:"command",children:[]},{value:'Component <a name="h2o_wave.types.Component"/>',id:"component",children:[]},{value:'DatePicker <a name="h2o_wave.types.DatePicker"/>',id:"datepicker",children:[]},{value:'Dropdown <a name="h2o_wave.types.Dropdown"/>',id:"dropdown",children:[]},{value:'Expander <a name="h2o_wave.types.Expander"/>',id:"expander",children:[]},{value:'FileUpload <a name="h2o_wave.types.FileUpload"/>',id:"fileupload",children:[]},{value:'FlexCard <a name="h2o_wave.types.FlexCard"/>',id:"flexcard",children:[]},{value:'FormCard <a name="h2o_wave.types.FormCard"/>',id:"formcard",children:[]},{value:'Frame <a name="h2o_wave.types.Frame"/>',id:"frame",children:[]},{value:'FrameCard <a name="h2o_wave.types.FrameCard"/>',id:"framecard",children:[]},{value:'GraphicsCard <a name="h2o_wave.types.GraphicsCard"/>',id:"graphicscard",children:[]},{value:'GridCard <a name="h2o_wave.types.GridCard"/>',id:"gridcard",children:[]},{value:'HeaderCard <a name="h2o_wave.types.HeaderCard"/>',id:"headercard",children:[]},{value:'IconTableCellType <a name="h2o_wave.types.IconTableCellType"/>',id:"icontablecelltype",children:[]},{value:'ImageCard <a name="h2o_wave.types.ImageCard"/>',id:"imagecard",children:[]},{value:'Label <a name="h2o_wave.types.Label"/>',id:"label",children:[]},{value:'LargeBarStatCard <a name="h2o_wave.types.LargeBarStatCard"/>',id:"largebarstatcard",children:[]},{value:'LargeStatCard <a name="h2o_wave.types.LargeStatCard"/>',id:"largestatcard",children:[]},{value:'Link <a name="h2o_wave.types.Link"/>',id:"link",children:[]},{value:'ListCard <a name="h2o_wave.types.ListCard"/>',id:"listcard",children:[]},{value:'ListItem1Card <a name="h2o_wave.types.ListItem1Card"/>',id:"listitem1card",children:[]},{value:'Mark <a name="h2o_wave.types.Mark"/>',id:"mark",children:[]},{value:'MarkdownCard <a name="h2o_wave.types.MarkdownCard"/>',id:"markdowncard",children:[]},{value:'Markup <a name="h2o_wave.types.Markup"/>',id:"markup",children:[]},{value:'MarkupCard <a name="h2o_wave.types.MarkupCard"/>',id:"markupcard",children:[]},{value:'MessageBar <a name="h2o_wave.types.MessageBar"/>',id:"messagebar",children:[]},{value:'MetaCard <a name="h2o_wave.types.MetaCard"/>',id:"metacard",children:[]},{value:'NavCard <a name="h2o_wave.types.NavCard"/>',id:"navcard",children:[]},{value:'NavGroup <a name="h2o_wave.types.NavGroup"/>',id:"navgroup",children:[]},{value:'NavItem <a name="h2o_wave.types.NavItem"/>',id:"navitem",children:[]},{value:'Picker <a name="h2o_wave.types.Picker"/>',id:"picker",children:[]},{value:'PixelArtCard <a name="h2o_wave.types.PixelArtCard"/>',id:"pixelartcard",children:[]},{value:'Plot <a name="h2o_wave.types.Plot"/>',id:"plot",children:[]},{value:'PlotCard <a name="h2o_wave.types.PlotCard"/>',id:"plotcard",children:[]},{value:'Progress <a name="h2o_wave.types.Progress"/>',id:"progress",children:[]},{value:'ProgressTableCellType <a name="h2o_wave.types.ProgressTableCellType"/>',id:"progresstablecelltype",children:[]},{value:'RangeSlider <a name="h2o_wave.types.RangeSlider"/>',id:"rangeslider",children:[]},{value:'RepeatCard <a name="h2o_wave.types.RepeatCard"/>',id:"repeatcard",children:[]},{value:'Separator <a name="h2o_wave.types.Separator"/>',id:"separator",children:[]},{value:'Slider <a name="h2o_wave.types.Slider"/>',id:"slider",children:[]},{value:'SmallSeriesStatCard <a name="h2o_wave.types.SmallSeriesStatCard"/>',id:"smallseriesstatcard",children:[]},{value:'SmallStatCard <a name="h2o_wave.types.SmallStatCard"/>',id:"smallstatcard",children:[]},{value:'Spinbox <a name="h2o_wave.types.Spinbox"/>',id:"spinbox",children:[]},{value:'Step <a name="h2o_wave.types.Step"/>',id:"step",children:[]},{value:'Stepper <a name="h2o_wave.types.Stepper"/>',id:"stepper",children:[]},{value:'Tab <a name="h2o_wave.types.Tab"/>',id:"tab",children:[]},{value:'TabCard <a name="h2o_wave.types.TabCard"/>',id:"tabcard",children:[]},{value:'Table <a name="h2o_wave.types.Table"/>',id:"table",children:[]},{value:'TableCellType <a name="h2o_wave.types.TableCellType"/>',id:"tablecelltype",children:[]},{value:'TableColumn <a name="h2o_wave.types.TableColumn"/>',id:"tablecolumn",children:[]},{value:'TableRow <a name="h2o_wave.types.TableRow"/>',id:"tablerow",children:[]},{value:'Tabs <a name="h2o_wave.types.Tabs"/>',id:"tabs",children:[]},{value:'TallGaugeStatCard <a name="h2o_wave.types.TallGaugeStatCard"/>',id:"tallgaugestatcard",children:[]},{value:'TallSeriesStatCard <a name="h2o_wave.types.TallSeriesStatCard"/>',id:"tallseriesstatcard",children:[]},{value:'Template <a name="h2o_wave.types.Template"/>',id:"template",children:[]},{value:'TemplateCard <a name="h2o_wave.types.TemplateCard"/>',id:"templatecard",children:[]},{value:'Text <a name="h2o_wave.types.Text"/>',id:"text",children:[]},{value:'TextL <a name="h2o_wave.types.TextL"/>',id:"textl",children:[]},{value:'TextM <a name="h2o_wave.types.TextM"/>',id:"textm",children:[]},{value:'TextS <a name="h2o_wave.types.TextS"/>',id:"texts",children:[]},{value:'TextXl <a name="h2o_wave.types.TextXl"/>',id:"textxl",children:[]},{value:'TextXs <a name="h2o_wave.types.TextXs"/>',id:"textxs",children:[]},{value:'Textbox <a name="h2o_wave.types.Textbox"/>',id:"textbox",children:[]},{value:'Toggle <a name="h2o_wave.types.Toggle"/>',id:"toggle",children:[]},{value:'ToolbarCard <a name="h2o_wave.types.ToolbarCard"/>',id:"toolbarcard",children:[]},{value:'VegaCard <a name="h2o_wave.types.VegaCard"/>',id:"vegacard",children:[]},{value:'VegaVisualization <a name="h2o_wave.types.VegaVisualization"/>',id:"vegavisualization",children:[]},{value:'Visualization <a name="h2o_wave.types.Visualization"/>',id:"visualization",children:[]},{value:'WideBarStatCard <a name="h2o_wave.types.WideBarStatCard"/>',id:"widebarstatcard",children:[]},{value:'WideGaugeStatCard <a name="h2o_wave.types.WideGaugeStatCard"/>',id:"widegaugestatcard",children:[]},{value:'WideSeriesStatCard <a name="h2o_wave.types.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,"<html>...</html>"),".")),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,"<html>...</html>"))),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, icon:\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.icon",className:"api__signature"},"var ",Object(c.b)("span",{class:"ident"},"icon")),Object(c.b)("div",{className:"api__description"},Object(c.b)("p",null,"Shortcut icon path. Preferably a ",Object(c.b)("code",null,".png")," file (",Object(c.b)("code",null,".ico")," files may not work in mobile browsers).")),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},292: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<arguments.length;a++){var t=null!=arguments[a]?arguments[a]:{};a%2?b(Object(t),!0).forEach((function(a){c(e,a,t[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):b(Object(t)).forEach((function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(t,a))}))}return e}function o(e,a){if(null==e)return{};var t,s,i=function(e,a){if(null==e)return{};var t,s,i={},c=Object.keys(e);for(s=0;s<c.length;s++)t=c[s],a.indexOf(t)>=0||(i[t]=e[t]);return i}(e,a);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(s=0;s<c.length;s++)t=c[s],a.indexOf(t)>=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<c;d++)b[d]=t[d];return i.a.createElement.apply(null,b)}return i.a.createElement.apply(null,t)}_.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/b9e4d6e6.d5c12a3f.js b/docs/b9e4d6e6.94216ee5.js
similarity index 98%
rename from docs/b9e4d6e6.d5c12a3f.js
rename to docs/b9e4d6e6.94216ee5.js
index 6efcb782b1..91b9bf37b7 100644
--- a/docs/b9e4d6e6.d5c12a3f.js
+++ b/docs/b9e4d6e6.94216ee5.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[165],{218:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return o})),t.d(r,"metadata",(function(){return s})),t.d(r,"rightToc",(function(){return u})),t.d(r,"default",(function(){return p}));var n=t(2),a=t(6),c=(t(0),t(290)),o={title:"Meta / Refresh"},s={unversionedId:"examples/meta-refresh",id:"examples/meta-refresh",isDocsHomePage:!1,title:"Meta / Refresh",description:"Turn off live updates for static pages to conserve server resources.",source:"@site/docs/examples/meta-refresh.md",slug:"/examples/meta-refresh",permalink:"/wave/docs/examples/meta-refresh",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/meta-refresh.md",version:"current",sidebar:"someSidebar",previous:{title:"Meta / Notification",permalink:"/wave/docs/examples/meta-notification"},next:{title:"Meta / Redirect",permalink:"/wave/docs/examples/meta-redirect"}},u=[],m={rightToc:u};function p(e){var r=e.components,o=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(n.a)({},m,o,{components:r,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Turn off live updates for static pages to conserve server resources."),Object(c.b)("div",{className:"cover",style:{backgroundImage:"url("+t(413).default+")"}}),Object(c.b)("pre",null,Object(c.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\n# Set refresh rate to zero (\"no updates\")\npage['meta'] = ui.meta_card(box='', refresh=0)\n\npage['example'] = ui.markdown_card(\n    box='1 1 2 2',\n    title='No updates for you',\n    content='This page stops receiving updates once loaded.',\n)\n\npage.save()\n")))}p.isMDXComponent=!0},290:function(e,r,t){"use strict";t.d(r,"a",(function(){return f})),t.d(r,"b",(function(){return b}));var n=t(0),a=t.n(n);function c(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function o(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 s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?o(Object(t),!0).forEach((function(r){c(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function u(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},c=Object.keys(e);for(n=0;n<c.length;n++)t=c[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)t=c[n],r.indexOf(t)>=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<c;m++)o[m]=t[m];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,t)}l.displayName="MDXCreateElement"},413:function(e,r,t){"use strict";t.r(r),r.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[167],{220:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return o})),t.d(r,"metadata",(function(){return s})),t.d(r,"rightToc",(function(){return u})),t.d(r,"default",(function(){return p}));var n=t(2),a=t(6),c=(t(0),t(292)),o={title:"Meta / Refresh"},s={unversionedId:"examples/meta-refresh",id:"examples/meta-refresh",isDocsHomePage:!1,title:"Meta / Refresh",description:"Turn off live updates for static pages to conserve server resources.",source:"@site/docs/examples/meta-refresh.md",slug:"/examples/meta-refresh",permalink:"/wave/docs/examples/meta-refresh",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/meta-refresh.md",version:"current",sidebar:"someSidebar",previous:{title:"Meta / Notification",permalink:"/wave/docs/examples/meta-notification"},next:{title:"Meta / Redirect",permalink:"/wave/docs/examples/meta-redirect"}},u=[],m={rightToc:u};function p(e){var r=e.components,o=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(n.a)({},m,o,{components:r,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Turn off live updates for static pages to conserve server resources."),Object(c.b)("div",{className:"cover",style:{backgroundImage:"url("+t(418).default+")"}}),Object(c.b)("pre",null,Object(c.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\n# Set refresh rate to zero (\"no updates\")\npage['meta'] = ui.meta_card(box='', refresh=0)\n\npage['example'] = ui.markdown_card(\n    box='1 1 2 2',\n    title='No updates for you',\n    content='This page stops receiving updates once loaded.',\n)\n\npage.save()\n")))}p.isMDXComponent=!0},292:function(e,r,t){"use strict";t.d(r,"a",(function(){return f})),t.d(r,"b",(function(){return b}));var n=t(0),a=t.n(n);function c(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function o(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 s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?o(Object(t),!0).forEach((function(r){c(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function u(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},c=Object.keys(e);for(n=0;n<c.length;n++)t=c[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)t=c[n],r.indexOf(t)>=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<c;m++)o[m]=t[m];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,t)}l.displayName="MDXCreateElement"},418:function(e,r,t){"use strict";t.r(r),r.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/b9f028e1.76e1b947.js b/docs/b9f028e1.76e1b947.js
new file mode 100644
index 0000000000..194ef81757
--- /dev/null
+++ b/docs/b9f028e1.76e1b947.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[168],{221:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return l})),n.d(t,"rightToc",(function(){return i})),n.d(t,"default",(function(){return s}));var r=n(2),o=n(6),a=(n(0),n(292)),c={title:"Form / Toggle"},l={unversionedId:"examples/toggle",id:"examples/toggle",isDocsHomePage:!1,title:"Form / Toggle",description:"Use a toggle to present users with two mutually exclusive options (to turn settings on and off).",source:"@site/docs/examples/toggle.md",slug:"/examples/toggle",permalink:"/wave/docs/examples/toggle",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/toggle.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Combobox",permalink:"/wave/docs/examples/combobox"},next:{title:"Form / Spinbox",permalink:"/wave/docs/examples/spinbox"}},i=[],u={rightToc:i};function s(e){var t=e.components,c=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},u,c,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use a toggle to present users with two mutually exclusive options (to turn settings on and off)."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(419).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'toggle_unchecked={q.args.toggle_unchecked}'),\n            ui.text(f'toggle_checked={q.args.toggle_checked}'),\n            ui.text(f'toggle_unchecked_disabled={q.args.toggle_unchecked_disabled}'),\n            ui.text(f'toggle_checked_disabled={q.args.toggle_checked_disabled}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.toggle(name='toggle_unchecked', label='Not checked'),\n            ui.toggle(name='toggle_checked', label='Checked', value=True),\n            ui.toggle(name='toggle_unchecked_disabled', label='Not checked (Disabled)', disabled=True),\n            ui.toggle(name='toggle_checked_disabled', label='Checked (Disabled)', value=True, disabled=True),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n")))}s.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return m}));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 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 l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var u=o.a.createContext({}),s=function(e){var t=o.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 o.a.createElement(u.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,c=e.parentName,u=i(e,["components","mdxType","originalType","parentName"]),p=s(n),d=r,m=p["".concat(c,".").concat(d)]||p[d]||g[d]||a;return n?o.a.createElement(m,l(l({ref:t},u),{},{components:n})):o.a.createElement(m,l({ref:t},u))}));function m(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 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 u=2;u<a;u++)c[u]=n[u];return o.a.createElement.apply(null,c)}return o.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},419:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/toggle-5e565e1d5a735ee4a481835a4e53ee43.png"}}]);
\ No newline at end of file
diff --git a/docs/b9f028e1.d50f1261.js b/docs/b9f028e1.d50f1261.js
deleted file mode 100644
index b5ad98ba89..0000000000
--- a/docs/b9f028e1.d50f1261.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[166],{219:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return l})),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(290)),l={title:"Form / Toggle"},c={unversionedId:"examples/toggle",id:"examples/toggle",isDocsHomePage:!1,title:"Form / Toggle",description:"Use a toggle to present users with two mutually exclusive options (to turn settings on and off).",source:"@site/docs/examples/toggle.md",slug:"/examples/toggle",permalink:"/wave/docs/examples/toggle",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/toggle.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Combobox",permalink:"/wave/docs/examples/combobox"},next:{title:"Form / Spinbox",permalink:"/wave/docs/examples/spinbox"}},i=[],s={rightToc:i};function u(e){var t=e.components,l=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},s,l,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use a toggle to present users with two mutually exclusive options (to turn settings on and off)."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(414).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'toggle_unchecked={q.args.toggle_unchecked}'),\n            ui.text(f'toggle_checked={q.args.toggle_checked}'),\n            ui.text(f'toggle_unchecked_disabled={q.args.toggle_unchecked_disabled}'),\n            ui.text(f'toggle_checked_disabled={q.args.toggle_checked_disabled}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.toggle(name='toggle_unchecked', label='Not checked'),\n            ui.toggle(name='toggle_checked', label='Checked', value=True),\n            ui.toggle(name='toggle_unchecked_disabled', label='Not checked (Disabled)', disabled=True),\n            ui.toggle(name='toggle_checked_disabled', label='Checked (Disabled)', value=True, disabled=True),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n\n\nlisten('/demo', serve)\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),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 l(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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=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<a;s++)l[s]=n[s];return o.a.createElement.apply(null,l)}return o.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},414:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/toggle-5e565e1d5a735ee4a481835a4e53ee43.png"}}]);
\ No newline at end of file
diff --git a/docs/ba1aeef8.33b2d023.js b/docs/ba1aeef8.421c8e2f.js
similarity index 92%
rename from docs/ba1aeef8.33b2d023.js
rename to docs/ba1aeef8.421c8e2f.js
index 147a8c5b3e..b3c701ddc2 100644
--- a/docs/ba1aeef8.33b2d023.js
+++ b/docs/ba1aeef8.421c8e2f.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[167],{220:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return o})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return p}));var a=n(2),r=n(6),i=(n(0),n(290)),c={title:"Stat / Large"},o={unversionedId:"examples/stat-large",id:"examples/stat-large",isDocsHomePage:!1,title:"Stat / Large",description:"Create a stat card displaying a primary value, an auxiliary value and a caption.",source:"@site/docs/examples/stat-large.md",slug:"/examples/stat-large",permalink:"/wave/docs/examples/stat-large",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-large.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Small",permalink:"/wave/docs/examples/stat-small"},next:{title:"Stat / Gauge / Wide",permalink:"/wave/docs/examples/stat-wide-gauge"}},l=[],u={rightToc:l};function p(e){var t=e.components,c=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(a.a)({},u,c,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Create a stat card displaying a primary value, an auxiliary value and a caption."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+n(415).default+")"}}),Object(i.b)("pre",null,Object(i.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_stat_card(\n    box='1 1 2 2',\n    title=fake.cryptocurrency_name(),\n    value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    aux_value='={{intl quux style=\"percent\" minimum_fraction_digits=1 maximum_fraction_digits=1}}',\n    data=dict(qux=val, quux=pc),\n    caption=' '.join(fake.sentences()),\n))\npage.save()\n\nwhile True:\n    time.sleep(1)\n    val, pc = f.next()\n    c.data.qux = val\n    c.data.quux = pc\n    page.save()\n")))}p.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return d}));var a=n(0),r=n.n(a);function i(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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=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<i;u++)c[u]=n[u];return r.a.createElement.apply(null,c)}return r.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},415:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/stat-large-4434acbc0c05f2c331071c827076d7b0.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[169],{222:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return o})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return p}));var a=n(2),r=n(6),i=(n(0),n(292)),c={title:"Stat / Large"},o={unversionedId:"examples/stat-large",id:"examples/stat-large",isDocsHomePage:!1,title:"Stat / Large",description:"Create a stat card displaying a primary value, an auxiliary value and a caption.",source:"@site/docs/examples/stat-large.md",slug:"/examples/stat-large",permalink:"/wave/docs/examples/stat-large",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-large.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Small",permalink:"/wave/docs/examples/stat-small"},next:{title:"Stat / Gauge / Wide",permalink:"/wave/docs/examples/stat-wide-gauge"}},l=[],u={rightToc:l};function p(e){var t=e.components,c=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(a.a)({},u,c,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Create a stat card displaying a primary value, an auxiliary value and a caption."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+n(420).default+")"}}),Object(i.b)("pre",null,Object(i.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_stat_card(\n    box='1 1 2 2',\n    title=fake.cryptocurrency_name(),\n    value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n    aux_value='={{intl quux style=\"percent\" minimum_fraction_digits=1 maximum_fraction_digits=1}}',\n    data=dict(qux=val, quux=pc),\n    caption=' '.join(fake.sentences()),\n))\npage.save()\n\nwhile True:\n    time.sleep(1)\n    val, pc = f.next()\n    c.data.qux = val\n    c.data.quux = pc\n    page.save()\n")))}p.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return d}));var a=n(0),r=n.n(a);function i(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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=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<i;u++)c[u]=n[u];return r.a.createElement.apply(null,c)}return r.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},420:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/stat-large-4434acbc0c05f2c331071c827076d7b0.png"}}]);
\ No newline at end of file
diff --git a/docs/bb5446ac.f742416a.js b/docs/bb5446ac.b79cbe54.js
similarity index 92%
rename from docs/bb5446ac.f742416a.js
rename to docs/bb5446ac.b79cbe54.js
index efad12109c..b0ca382cbc 100644
--- a/docs/bb5446ac.f742416a.js
+++ b/docs/bb5446ac.b79cbe54.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[168],{221: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 c})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(290)),i={title:"Plot / Area + Line"},l={unversionedId:"examples/plot-area-line",id:"examples/plot-area-line",isDocsHomePage:!1,title:"Plot / Area + Line",description:"Make an area plot with an additional line layer on top.",source:"@site/docs/examples/plot-area-line.md",slug:"/examples/plot-area-line",permalink:"/wave/docs/examples/plot-area-line",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-line.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Area / Stacked",permalink:"/wave/docs/examples/plot-area-stacked"},next:{title:"Plot / Area + Line / Smooth",permalink:"/wave/docs/examples/plot-area-line-smooth"}},c=[],p={rightToc:c};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make an area plot with an additional line layer on top."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(416).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='Area + Line',\n    data=data('date price', n),\n    plot=ui.plot([\n        ui.mark(type='area', x_scale='time', x='=date', y='=price', y_min=0),\n        ui.mark(type='line', x='=date', y='=price')\n    ])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},290: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 l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},416:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-area-line-fbcaba9e073f71a07b202834d2992b49.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[170],{223: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 c})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(292)),i={title:"Plot / Area + Line"},l={unversionedId:"examples/plot-area-line",id:"examples/plot-area-line",isDocsHomePage:!1,title:"Plot / Area + Line",description:"Make an area plot with an additional line layer on top.",source:"@site/docs/examples/plot-area-line.md",slug:"/examples/plot-area-line",permalink:"/wave/docs/examples/plot-area-line",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-line.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Area / Stacked",permalink:"/wave/docs/examples/plot-area-stacked"},next:{title:"Plot / Area + Line / Smooth",permalink:"/wave/docs/examples/plot-area-line-smooth"}},c=[],p={rightToc:c};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make an area plot with an additional line layer on top."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(421).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='Area + Line',\n    data=data('date price', n),\n    plot=ui.plot([\n        ui.mark(type='area', x_scale='time', x='=date', y='=price', y_min=0),\n        ui.mark(type='line', x='=date', y='=price')\n    ])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},292: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 l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},421:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-area-line-fbcaba9e073f71a07b202834d2992b49.png"}}]);
\ No newline at end of file
diff --git a/docs/bbdd3825.5e58d881.js b/docs/bbdd3825.5e58d881.js
new file mode 100644
index 0000000000..5a2934add8
--- /dev/null
+++ b/docs/bbdd3825.5e58d881.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[171],{224:function(e,t,o){"use strict";o.r(t),o.d(t,"frontMatter",(function(){return d})),o.d(t,"metadata",(function(){return i})),o.d(t,"rightToc",(function(){return s})),o.d(t,"default",(function(){return u}));var n=o(2),r=o(6),a=(o(0),o(292)),d={title:"To-do List App"},i={unversionedId:"examples/todo",id:"examples/todo",isDocsHomePage:!1,title:"To-do List App",description:"A simple multi-user To-do list application.",source:"@site/docs/examples/todo.md",slug:"/examples/todo",permalink:"/wave/docs/examples/todo",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/todo.md",version:"current",sidebar:"someSidebar",previous:{title:"Hello World!",permalink:"/wave/docs/examples/hello-world"},next:{title:"Wizard",permalink:"/wave/docs/examples/wizard"}},s=[],c={rightToc:s};function u(e){var t=e.components,d=Object(r.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},c,d,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"A simple multi-user To-do list application."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+o(422).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\nfrom typing import List\n\n_id = 0\n\n\n# A simple class that represents a to-do item.\nclass TodoItem:\n    def __init__(self, text):\n        global _id\n        _id += 1\n        self.id = f'todo_{_id}'\n        self.done = False\n        self.text = text\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.new_todo:  # Display an input form.\n        await new_todo(q)\n    elif q.args.add_todo:  # Add an item.\n        await add_todo(q)\n    else:  # Show all items.\n        await show_todos(q)\n\n\nasync def show_todos(q: Q):\n    # Get items for this user.\n    todos: List[TodoItem] = q.user.todos\n\n    # Create a sample list if we don't have any.\n    if todos is None:\n        q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]\n\n    # If the user checked/unchecked an item, update our list.\n    for todo in todos:\n        if todo.id in q.args:\n            todo.done = q.args[todo.id]\n\n    # Create done/not-done checkboxes.\n    done = [ui.checkbox(name=todo.id, label=todo.text, value=True, trigger=True) for todo in todos if todo.done]\n    not_done = [ui.checkbox(name=todo.id, label=todo.text, trigger=True) for todo in todos if not todo.done]\n\n    # Display list\n    q.page['form'] = ui.form_card(box='1 1 4 10', items=[\n        ui.text_l('To Do'),\n        ui.button(name='new_todo', label='Add To Do...', primary=True),\n        *not_done,\n        *([ui.separator('Done')] if len(done) else []),\n        *done,\n    ])\n    await q.page.save()\n\n\nasync def add_todo(q: Q):\n    # Insert a new item\n    q.user.todos.insert(0, TodoItem(q.args.text or 'Untitled'))\n\n    # Go back to our list.\n    await show_todos(q)\n\n\nasync def new_todo(q: Q):\n    # Display an input form\n    q.page['form'] = ui.form_card(box='1 1 4 10', items=[\n        ui.text_l('Add To Do'),\n        ui.textbox(name='text', label='What needs to be done?', multiline=True),\n        ui.buttons([\n            ui.button(name='add_todo', label='Add', primary=True),\n            ui.button(name='show_todos', label='Back'),\n        ]),\n    ])\n    await q.page.save()\n")))}u.isMDXComponent=!0},292:function(e,t,o){"use strict";o.d(t,"a",(function(){return l})),o.d(t,"b",(function(){return f}));var n=o(0),r=o.n(n);function a(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function d(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),o.push.apply(o,n)}return o}function i(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?d(Object(o),!0).forEach((function(t){a(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):d(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}function s(e,t){if(null==e)return{};var o,n,r=function(e,t){if(null==e)return{};var o,n,r={},a=Object.keys(e);for(n=0;n<a.length;n++)o=a[n],t.indexOf(o)>=0||(r[o]=e[o]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)o=a[n],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(r[o]=e[o])}return r}var c=r.a.createContext({}),u=function(e){var t=r.a.useContext(c),o=t;return e&&(o="function"==typeof e?e(t):i(i({},t),e)),o},l=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)}},A=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"]),l=u(o),A=n,f=l["".concat(d,".").concat(A)]||l[A]||p[A]||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]=A;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<a;c++)d[c]=o[c];return r.a.createElement.apply(null,d)}return r.a.createElement.apply(null,o)}A.displayName="MDXCreateElement"},422:function(e,t,o){"use strict";o.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/bbdd3825.8257b386.js b/docs/bbdd3825.8257b386.js
deleted file mode 100644
index e05a4c0641..0000000000
--- a/docs/bbdd3825.8257b386.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[169],{222:function(e,t,o){"use strict";o.r(t),o.d(t,"frontMatter",(function(){return d})),o.d(t,"metadata",(function(){return i})),o.d(t,"rightToc",(function(){return s})),o.d(t,"default",(function(){return l}));var n=o(2),r=o(6),a=(o(0),o(290)),d={title:"To-do List App"},i={unversionedId:"examples/todo",id:"examples/todo",isDocsHomePage:!1,title:"To-do List App",description:"A simple multi-user To-do list application.",source:"@site/docs/examples/todo.md",slug:"/examples/todo",permalink:"/wave/docs/examples/todo",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/todo.md",version:"current",sidebar:"someSidebar",previous:{title:"Hello World!",permalink:"/wave/docs/examples/hello-world"},next:{title:"Wizard",permalink:"/wave/docs/examples/wizard"}},s=[],c={rightToc:s};function l(e){var t=e.components,d=Object(r.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},c,d,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"A simple multi-user To-do list application."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+o(417).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\nfrom typing import List\n\n_id = 0\n\n\n# A simple class that represents a to-do item.\nclass TodoItem:\n    def __init__(self, text):\n        global _id\n        _id += 1\n        self.id = f'todo_{_id}'\n        self.done = False\n        self.text = text\n\n\nasync def serve(q: Q):\n    if q.args.new_todo:  # Display an input form.\n        await new_todo(q)\n    elif q.args.add_todo:  # Add an item.\n        await add_todo(q)\n    else:  # Show all items.\n        await show_todos(q)\n\n\nasync def show_todos(q: Q):\n    # Get items for this user.\n    todos: List[TodoItem] = q.user.todos\n\n    # Create a sample list if we don't have any.\n    if todos is None:\n        q.user.todos = todos = [TodoItem('Do this'), TodoItem('Do that'), TodoItem('Do something else')]\n\n    # If the user checked/unchecked an item, update our list.\n    for todo in todos:\n        if todo.id in q.args:\n            todo.done = q.args[todo.id]\n\n    # Create done/not-done checkboxes.\n    done = [ui.checkbox(name=todo.id, label=todo.text, value=True, trigger=True) for todo in todos if todo.done]\n    not_done = [ui.checkbox(name=todo.id, label=todo.text, trigger=True) for todo in todos if not todo.done]\n\n    # Display list\n    q.page['form'] = ui.form_card(box='1 1 4 10', items=[\n        ui.text_l('To Do'),\n        ui.button(name='new_todo', label='Add To Do...', primary=True),\n        *not_done,\n        *([ui.separator('Done')] if len(done) else []),\n        *done,\n    ])\n    await q.page.save()\n\n\nasync def add_todo(q: Q):\n    # Insert a new item\n    q.user.todos.insert(0, TodoItem(q.args.text or 'Untitled'))\n\n    # Go back to our list.\n    await show_todos(q)\n\n\nasync def new_todo(q: Q):\n    # Display an input form\n    q.page['form'] = ui.form_card(box='1 1 4 10', items=[\n        ui.text_l('Add To Do'),\n        ui.textbox(name='text', label='What needs to be done?', multiline=True),\n        ui.buttons([\n            ui.button(name='add_todo', label='Add', primary=True),\n            ui.button(name='show_todos', label='Back'),\n        ]),\n    ])\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}l.isMDXComponent=!0},290:function(e,t,o){"use strict";o.d(t,"a",(function(){return u})),o.d(t,"b",(function(){return f}));var n=o(0),r=o.n(n);function a(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function d(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),o.push.apply(o,n)}return o}function i(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?d(Object(o),!0).forEach((function(t){a(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):d(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}function s(e,t){if(null==e)return{};var o,n,r=function(e,t){if(null==e)return{};var o,n,r={},a=Object.keys(e);for(n=0;n<a.length;n++)o=a[n],t.indexOf(o)>=0||(r[o]=e[o]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)o=a[n],t.indexOf(o)>=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<a;c++)d[c]=o[c];return r.a.createElement.apply(null,d)}return r.a.createElement.apply(null,o)}p.displayName="MDXCreateElement"},417:function(e,t,o){"use strict";o.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/bd0b0bbe.8f6f01cf.js b/docs/bd0b0bbe.d16ca985.js
similarity index 92%
rename from docs/bd0b0bbe.8f6f01cf.js
rename to docs/bd0b0bbe.d16ca985.js
index 2014b0994e..58b495e07a 100644
--- a/docs/bd0b0bbe.8f6f01cf.js
+++ b/docs/bd0b0bbe.d16ca985.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[170],{223: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(290)),i={title:"Plot / Interval / Range / Transpose"},l={unversionedId:"examples/plot-interval-range-transpose",id:"examples/plot-interval-range-transpose",isDocsHomePage:!1,title:"Plot / Interval / Range / Transpose",description:"Make a bar plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.",source:"@site/docs/examples/plot-interval-range-transpose.md",slug:"/examples/plot-interval-range-transpose",permalink:"/wave/docs/examples/plot-interval-range-transpose",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-range-transpose.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Range",permalink:"/wave/docs/examples/plot-interval-range"},next:{title:"Plot / Interval / Stacked",permalink:"/wave/docs/examples/plot-interval-stacked"}},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,"Make a bar plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(418).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import random\n\nfrom synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 20\nf = FakeCategoricalSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Interval, range',\n    data=data('product low high', n),\n    plot=ui.plot([ui.mark(type='interval', x0='=low', x='=high', y='=product', )])\n))\nv.data = [(c, x - random.randint(3, 10), x + random.randint(3, 10)) for c, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},290: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 l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;c++)i[c]=n[c];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},418:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-interval-range-transpose-ac0df7689c88cb6fe886aaed084918bf.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[172],{225: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(292)),i={title:"Plot / Interval / Range / Transpose"},l={unversionedId:"examples/plot-interval-range-transpose",id:"examples/plot-interval-range-transpose",isDocsHomePage:!1,title:"Plot / Interval / Range / Transpose",description:"Make a bar plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.",source:"@site/docs/examples/plot-interval-range-transpose.md",slug:"/examples/plot-interval-range-transpose",permalink:"/wave/docs/examples/plot-interval-range-transpose",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-range-transpose.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Range",permalink:"/wave/docs/examples/plot-interval-range"},next:{title:"Plot / Interval / Stacked",permalink:"/wave/docs/examples/plot-interval-stacked"}},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,"Make a bar plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(423).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import random\n\nfrom synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 20\nf = FakeCategoricalSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Interval, range',\n    data=data('product low high', n),\n    plot=ui.plot([ui.mark(type='interval', x0='=low', x='=high', y='=product', )])\n))\nv.data = [(c, x - random.randint(3, 10), x + random.randint(3, 10)) for c, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},292: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 l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;c++)i[c]=n[c];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},423:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-interval-range-transpose-ac0df7689c88cb6fe886aaed084918bf.png"}}]);
\ No newline at end of file
diff --git a/docs/bd7ed1d7.0af32e81.js b/docs/bd7ed1d7.0af32e81.js
deleted file mode 100644
index 3c58493d2d..0000000000
--- a/docs/bd7ed1d7.0af32e81.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[171],{224:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return l}));var r=n(2),a=n(6),o=(n(0),n(290)),c={title:"Mode / Multicast"},i={unversionedId:"examples/counter-multicast",id:"examples/counter-multicast",isDocsHomePage:!1,title:"Mode / Multicast",description:"Launch the server in multicast mode to synchronize browser state across a user's clients.",source:"@site/docs/examples/counter-multicast.md",slug:"/examples/counter-multicast",permalink:"/wave/docs/examples/counter-multicast",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/counter-multicast.md",version:"current",sidebar:"someSidebar",previous:{title:"Mode / Broadcast",permalink:"/wave/docs/examples/counter-broadcast"},next:{title:"Mode / Unicast",permalink:"/wave/docs/examples/counter-unicast"}},s=[],u={rightToc:s};function l(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},u,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Launch the server in multicast mode to synchronize browser state across a user's clients.\nOpen ",Object(o.b)("inlineCode",{parentName:"p"},"/demo")," in multiple browsers and watch them synchronize in realtime."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(419).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui, pack\n\n\nasync def serve(q: Q):\n    count = q.user.count or 0\n    if 'increment' in q.args:\n        count += 1\n        q.user.count = count\n\n    items = pack([ui.button(name='increment', label=f'Count={count}')])\n\n    if count > 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;u++)c[u]=n[u];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},419:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/bd7ed1d7.9faa1af2.js b/docs/bd7ed1d7.9faa1af2.js
new file mode 100644
index 0000000000..ba9dfdb95c
--- /dev/null
+++ b/docs/bd7ed1d7.9faa1af2.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[173],{226:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return s})),n.d(t,"default",(function(){return l}));var r=n(2),a=n(6),o=(n(0),n(292)),c={title:"Mode / Multicast"},i={unversionedId:"examples/counter-multicast",id:"examples/counter-multicast",isDocsHomePage:!1,title:"Mode / Multicast",description:"Launch the server in multicast mode to synchronize browser state across a user's clients.",source:"@site/docs/examples/counter-multicast.md",slug:"/examples/counter-multicast",permalink:"/wave/docs/examples/counter-multicast",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/counter-multicast.md",version:"current",sidebar:"someSidebar",previous:{title:"Mode / Broadcast",permalink:"/wave/docs/examples/counter-broadcast"},next:{title:"Mode / Unicast",permalink:"/wave/docs/examples/counter-unicast"}},s=[],u={rightToc:s};function l(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},u,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Launch the server in multicast mode to synchronize browser state across a user's clients.\nOpen ",Object(o.b)("inlineCode",{parentName:"p"},"/demo")," in multiple browsers and watch them synchronize in realtime."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(424).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui, pack\n\n\n@app('/demo', mode='multicast')\nasync def serve(q: Q):\n    count = q.user.count or 0\n    if 'increment' in q.args:\n        count += 1\n        q.user.count = count\n\n    items = pack([ui.button(name='increment', label=f'Count={count}')])\n\n    if count > 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")))}l.isMDXComponent=!0},292: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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;u++)c[u]=n[u];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},424:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/bdc330a7.d1eb828e.js b/docs/bdc330a7.2904007d.js
similarity index 96%
rename from docs/bdc330a7.d1eb828e.js
rename to docs/bdc330a7.2904007d.js
index 7db87cd965..6e689eacb0 100644
--- a/docs/bdc330a7.d1eb828e.js
+++ b/docs/bdc330a7.2904007d.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[172],{225:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return l}));var i=n(2),r=n(6),a=(n(0),n(290)),o={title:"Tab / Links"},p={unversionedId:"examples/tab-link",id:"examples/tab-link",isDocsHomePage:!1,title:"Tab / Links",description:"Use tab cards to display tabs on a page.",source:"@site/docs/examples/tab-link.md",slug:"/examples/tab-link",permalink:"/wave/docs/examples/tab-link",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/tab-link.md",version:"current",sidebar:"someSidebar",previous:{title:"Tab",permalink:"/wave/docs/examples/tab"},next:{title:"Tabs / Navigation",permalink:"/wave/docs/examples/tab-delete"}},c=[],u={rightToc:c};function l(e){var t=e.components,o=Object(r.a)(e,["components"]);return Object(a.b)("wrapper",Object(i.a)({},u,o,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use tab cards to display tabs on a page.\nThis examples render tabs styled as links."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(420).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(i.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\npage['tabs'] = ui.tab_card(\n    box='1 1 4 1',\n    items=[\n        ui.tab(name='#menu/spam', label='Spam'),\n        ui.tab(name='#menu/ham', label='Ham'),\n        ui.tab(name='#menu/eggs', label='Eggs'),\n        ui.tab(name='#about', label='About'),\n    ],\n    link=True,\n)\n\npage.save()\n")))}l.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return f}));var i=n(0),r=n.n(i);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 o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,i,r=function(e,t){if(null==e)return{};var n,i,r={},a=Object.keys(e);for(i=0;i<a.length;i++)n=a[i],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i<a.length;i++)n=a[i],t.indexOf(n)>=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<a;u++)o[u]=n[u];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,n)}b.displayName="MDXCreateElement"},420:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[174],{227:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return l}));var i=n(2),r=n(6),a=(n(0),n(292)),o={title:"Tab / Links"},p={unversionedId:"examples/tab-link",id:"examples/tab-link",isDocsHomePage:!1,title:"Tab / Links",description:"Use tab cards to display tabs on a page.",source:"@site/docs/examples/tab-link.md",slug:"/examples/tab-link",permalink:"/wave/docs/examples/tab-link",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/tab-link.md",version:"current",sidebar:"someSidebar",previous:{title:"Tab",permalink:"/wave/docs/examples/tab"},next:{title:"Tabs / Navigation",permalink:"/wave/docs/examples/tab-delete"}},c=[],u={rightToc:c};function l(e){var t=e.components,o=Object(r.a)(e,["components"]);return Object(a.b)("wrapper",Object(i.a)({},u,o,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use tab cards to display tabs on a page.\nThis examples render tabs styled as links."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(425).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(i.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\npage['tabs'] = ui.tab_card(\n    box='1 1 4 1',\n    items=[\n        ui.tab(name='#menu/spam', label='Spam'),\n        ui.tab(name='#menu/ham', label='Ham'),\n        ui.tab(name='#menu/eggs', label='Eggs'),\n        ui.tab(name='#about', label='About'),\n    ],\n    link=True,\n)\n\npage.save()\n")))}l.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return f}));var i=n(0),r=n.n(i);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 o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,i,r=function(e,t){if(null==e)return{};var n,i,r={},a=Object.keys(e);for(i=0;i<a.length;i++)n=a[i],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i<a.length;i++)n=a[i],t.indexOf(n)>=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<a;u++)o[u]=n[u];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,n)}b.displayName="MDXCreateElement"},425:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/bdd709f1.bdb6a562.js b/docs/bdd709f1.bdb6a562.js
deleted file mode 100644
index 5e892b8b01..0000000000
--- a/docs/bdd709f1.bdb6a562.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[173],{226:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return i})),r.d(t,"metadata",(function(){return u})),r.d(t,"rightToc",(function(){return c})),r.d(t,"default",(function(){return s}));var n=r(2),o=r(6),a=(r(0),r(290)),i={slug:"hola",title:"Hola",author:"Gao Wei",author_title:"Docusaurus Core Team",author_url:"https://github.com/wgao19",author_image_url:"https://avatars1.githubusercontent.com/u/2055384?v=4",tags:["hola","docusaurus"]},u={permalink:"/wave/blog/hola",editUrl:"https://github.com/facebook/docusaurus/edit/master/website/blog/blog/2019-05-28-hola.md",source:"@site/blog/2019-05-28-hola.md",description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet",date:"2019-05-28T00:00:00.000Z",tags:[{label:"hola",permalink:"/wave/blog/tags/hola"},{label:"docusaurus",permalink:"/wave/blog/tags/docusaurus"}],title:"Hola",readingTime:.12,truncated:!1,prevItem:{title:"Hello",permalink:"/wave/blog/hello-world"}},c=[],l={rightToc:c};function s(e){var t=e.components,r=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},l,r,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"))}s.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return p})),r.d(t,"b",(function(){return b}));var n=r(0),o=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 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 u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=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<a;l++)i[l]=r[l];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/bf614533.8a69ecda.js b/docs/bf614533.8a69ecda.js
deleted file mode 100644
index a5b98ff9dc..0000000000
--- a/docs/bf614533.8a69ecda.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[174],Array(227).concat([function(A,e,t){"use strict";t.r(e),t.d(e,"frontMatter",(function(){return l})),t.d(e,"metadata",(function(){return u})),t.d(e,"rightToc",(function(){return s})),t.d(e,"default",(function(){return f}));var a=t(2),d=t(6),i=(t(0),t(290)),l={title:"Gallery",slug:"/examples"},u={unversionedId:"examples/index",id:"examples/index",isDocsHomePage:!1,title:"Gallery",description:"Hello World!",source:"@site/docs/examples/index.md",slug:"/examples",permalink:"/wave/docs/examples",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/index.md",version:"current",sidebar:"someSidebar",previous:{title:"Developer Guide",permalink:"/wave/docs/enterprise/developer-guide"},next:{title:"Hello World!",permalink:"/wave/docs/examples/hello-world"}},s=[],b={rightToc:s};function f(A){var e=A.components,l=Object(d.a)(A,["components"]);return Object(i.b)("wrapper",Object(a.a)({},b,l,{components:e,mdxType:"MDXLayout"}),Object(i.b)("a",{class:"thumbnail",href:"examples/hello-world"},Object(i.b)("div",{style:{backgroundImage:"url("+t(401).default+")"}}),"Hello World!"),Object(i.b)("a",{class:"thumbnail",href:"examples/todo"},Object(i.b)("div",{style:{backgroundImage:"url("+t(417).default+")"}}),"To-do List App"),Object(i.b)("a",{class:"thumbnail",href:"examples/wizard"},Object(i.b)("div",{style:{backgroundImage:"url("+t(312).default+")"}}),"Wizard"),Object(i.b)("a",{class:"thumbnail",href:"examples/issue-tracker"},Object(i.b)("div",{style:{backgroundImage:"url("+t(358).default+")"}}),"Issue Tracker"),Object(i.b)("a",{class:"thumbnail",href:"examples/dashboard"},Object(i.b)("div",{style:{backgroundImage:"url("+t(302).default+")"}}),"Dashboard"),Object(i.b)("a",{class:"thumbnail",href:"examples/stat-small"},Object(i.b)("div",{style:{backgroundImage:"url("+t(399).default+")"}}),"Stat / Small"),Object(i.b)("a",{class:"thumbnail",href:"examples/stat-large"},Object(i.b)("div",{style:{backgroundImage:"url("+t(415).default+")"}}),"Stat / Large"),Object(i.b)("a",{class:"thumbnail",href:"examples/stat-wide-gauge"},Object(i.b)("div",{style:{backgroundImage:"url("+t(356).default+")"}}),"Stat / Gauge / Wide"),Object(i.b)("a",{class:"thumbnail",href:"examples/stat-tall-gauge"},Object(i.b)("div",{style:{backgroundImage:"url("+t(306).default+")"}}),"Stat / Gauge / Tall"),Object(i.b)("a",{class:"thumbnail",href:"examples/stat-wide-bar"},Object(i.b)("div",{style:{backgroundImage:"url("+t(354).default+")"}}),"Stat / Bar / Wide"),Object(i.b)("a",{class:"thumbnail",href:"examples/stat-large-bar"},Object(i.b)("div",{style:{backgroundImage:"url("+t(365).default+")"}}),"Stat / Bar / Large"),Object(i.b)("a",{class:"thumbnail",href:"examples/stat-small-series-area"},Object(i.b)("div",{style:{backgroundImage:"url("+t(421).default+")"}}),"Stat / Series / Small / Area"),Object(i.b)("a",{class:"thumbnail",href:"examples/stat-small-series-interval"},Object(i.b)("div",{style:{backgroundImage:"url("+t(361).default+")"}}),"Stat / Series / Small / Interval"),Object(i.b)("a",{class:"thumbnail",href:"examples/stat-wide-series-area"},Object(i.b)("div",{style:{backgroundImage:"url("+t(373).default+")"}}),"Stat / Series / Wide / Area"),Object(i.b)("a",{class:"thumbnail",href:"examples/stat-wide-series-interval"},Object(i.b)("div",{style:{backgroundImage:"url("+t(336).default+")"}}),"Stat / Series / Wide / Interval"),Object(i.b)("a",{class:"thumbnail",href:"examples/stat-tall-series-area"},Object(i.b)("div",{style:{backgroundImage:"url("+t(394).default+")"}}),"Stat / Series / Tall / Area"),Object(i.b)("a",{class:"thumbnail",href:"examples/stat-tall-series-interval"},Object(i.b)("div",{style:{backgroundImage:"url("+t(345).default+")"}}),"Stat / Series / Tall / Interval"),Object(i.b)("a",{class:"thumbnail",href:"examples/layout"},Object(i.b)("div",{style:{backgroundImage:"url("+t(422).default+")"}}),"Layout / Position"),Object(i.b)("a",{class:"thumbnail",href:"examples/layout-size"},Object(i.b)("div",{style:{backgroundImage:"url("+t(423).default+")"}}),"Layout / Size"),Object(i.b)("a",{class:"thumbnail",href:"examples/form"},Object(i.b)("div",{style:{backgroundImage:"url("+t(382).default+")"}}),"Form"),Object(i.b)("a",{class:"thumbnail",href:"examples/text"},Object(i.b)("div",{style:{backgroundImage:"url("+t(355).default+")"}}),"Form / Text"),Object(i.b)("a",{class:"thumbnail",href:"examples/text-sizes"},Object(i.b)("div",{style:{backgroundImage:"url("+t(424).default+")"}}),"Form / Text / Sizes"),Object(i.b)("a",{class:"thumbnail",href:"examples/label"},Object(i.b)("div",{style:{backgroundImage:"url("+t(304).default+")"}}),"Form / Label"),Object(i.b)("a",{class:"thumbnail",href:"examples/link"},Object(i.b)("div",{style:{backgroundImage:"url("+t(425).default+")"}}),"Form / Link"),Object(i.b)("a",{class:"thumbnail",href:"examples/progress"},Object(i.b)("div",{style:{backgroundImage:"url("+t(348).default+")"}}),"Form / Progress"),Object(i.b)("a",{class:"thumbnail",href:"examples/progress-update"},Object(i.b)("div",{style:{backgroundImage:"url("+t(426).default+")"}}),"Form / Progress / Updating"),Object(i.b)("a",{class:"thumbnail",href:"examples/message-bar"},Object(i.b)("div",{style:{backgroundImage:"url("+t(318).default+")"}}),"Form / Message Bar"),Object(i.b)("a",{class:"thumbnail",href:"examples/textbox"},Object(i.b)("div",{style:{backgroundImage:"url("+t(374).default+")"}}),"Form / Textbox"),Object(i.b)("a",{class:"thumbnail",href:"examples/textbox-trigger"},Object(i.b)("div",{style:{backgroundImage:"url("+t(335).default+")"}}),"Form / Textbox / Trigger"),Object(i.b)("a",{class:"thumbnail",href:"examples/button"},Object(i.b)("div",{style:{backgroundImage:"url("+t(381).default+")"}}),"Form / Button"),Object(i.b)("a",{class:"thumbnail",href:"examples/buttons"},Object(i.b)("div",{style:{backgroundImage:"url("+t(346).default+")"}}),"Form / Buttons"),Object(i.b)("a",{class:"thumbnail",href:"examples/checkbox"},Object(i.b)("div",{style:{backgroundImage:"url("+t(386).default+")"}}),"Form / Checkbox"),Object(i.b)("a",{class:"thumbnail",href:"examples/checklist"},Object(i.b)("div",{style:{backgroundImage:"url("+t(376).default+")"}}),"Form / Checklist"),Object(i.b)("a",{class:"thumbnail",href:"examples/picker"},Object(i.b)("div",{style:{backgroundImage:"url("+t(351).default+")"}}),"Form / Picker"),Object(i.b)("a",{class:"thumbnail",href:"examples/picker-selection"},Object(i.b)("div",{style:{backgroundImage:"url("+t(316).default+")"}}),"Form / Picker / Selection"),Object(i.b)("a",{class:"thumbnail",href:"examples/dropdown"},Object(i.b)("div",{style:{backgroundImage:"url("+t(407).default+")"}}),"Form / Dropdown"),Object(i.b)("a",{class:"thumbnail",href:"examples/choice-group"},Object(i.b)("div",{style:{backgroundImage:"url("+t(379).default+")"}}),"Form / Choice Group"),Object(i.b)("a",{class:"thumbnail",href:"examples/combobox"},Object(i.b)("div",{style:{backgroundImage:"url("+t(427).default+")"}}),"Form / Combobox"),Object(i.b)("a",{class:"thumbnail",href:"examples/toggle"},Object(i.b)("div",{style:{backgroundImage:"url("+t(414).default+")"}}),"Form / Toggle"),Object(i.b)("a",{class:"thumbnail",href:"examples/spinbox"},Object(i.b)("div",{style:{backgroundImage:"url("+t(428).default+")"}}),"Form / Spinbox"),Object(i.b)("a",{class:"thumbnail",href:"examples/slider"},Object(i.b)("div",{style:{backgroundImage:"url("+t(429).default+")"}}),"Form / Slider"),Object(i.b)("a",{class:"thumbnail",href:"examples/range-slider"},Object(i.b)("div",{style:{backgroundImage:"url("+t(430).default+")"}}),"Form / Range Slider"),Object(i.b)("a",{class:"thumbnail",href:"examples/date-picker"},Object(i.b)("div",{style:{backgroundImage:"url("+t(431).default+")"}}),"Form / Date Picker"),Object(i.b)("a",{class:"thumbnail",href:"examples/date-picker-trigger"},Object(i.b)("div",{style:{backgroundImage:"url("+t(432).default+")"}}),"Form / Date Picker / Trigger"),Object(i.b)("a",{class:"thumbnail",href:"examples/color-picker"},Object(i.b)("div",{style:{backgroundImage:"url("+t(347).default+")"}}),"Form / Color Picker"),Object(i.b)("a",{class:"thumbnail",href:"examples/swatch-picker"},Object(i.b)("div",{style:{backgroundImage:"url("+t(321).default+")"}}),"Form / Swatch Picker"),Object(i.b)("a",{class:"thumbnail",href:"examples/tabs"},Object(i.b)("div",{style:{backgroundImage:"url("+t(380).default+")"}}),"Form / Tabs"),Object(i.b)("a",{class:"thumbnail",href:"examples/separator"},Object(i.b)("div",{style:{backgroundImage:"url("+t(433).default+")"}}),"Form / Separator"),Object(i.b)("a",{class:"thumbnail",href:"examples/file-upload"},Object(i.b)("div",{style:{backgroundImage:"url("+t(341).default+")"}}),"Form / File Upload"),Object(i.b)("a",{class:"thumbnail",href:"examples/form-frame"},Object(i.b)("div",{style:{backgroundImage:"url("+t(434).default+")"}}),"Form / Frame"),Object(i.b)("a",{class:"thumbnail",href:"examples/form-frame-path"},Object(i.b)("div",{style:{backgroundImage:"url("+t(372).default+")"}}),"Form / Frame / Path"),Object(i.b)("a",{class:"thumbnail",href:"examples/form-menu"},Object(i.b)("div",{style:{backgroundImage:"url("+t(375).default+")"}}),"Form / Menu"),Object(i.b)("a",{class:"thumbnail",href:"examples/form-template"},Object(i.b)("div",{style:{backgroundImage:"url("+t(403).default+")"}}),"Form / Template"),Object(i.b)("a",{class:"thumbnail",href:"examples/form-markup"},Object(i.b)("div",{style:{backgroundImage:"url("+t(344).default+")"}}),"Form / Markup"),Object(i.b)("a",{class:"thumbnail",href:"examples/stepper"},Object(i.b)("div",{style:{backgroundImage:"url("+t(387).default+")"}}),"Stepper"),Object(i.b)("a",{class:"thumbnail",href:"examples/table-markdown"},Object(i.b)("div",{style:{backgroundImage:"url("+t(303).default+")"}}),"Table / Markdown"),Object(i.b)("a",{class:"thumbnail",href:"examples/table"},Object(i.b)("div",{style:{backgroundImage:"url("+t(309).default+")"}}),"Table"),Object(i.b)("a",{class:"thumbnail",href:"examples/table-sort"},Object(i.b)("div",{style:{backgroundImage:"url("+t(311).default+")"}}),"Table / Sort"),Object(i.b)("a",{class:"thumbnail",href:"examples/table-search"},Object(i.b)("div",{style:{backgroundImage:"url("+t(435).default+")"}}),"Table / Search"),Object(i.b)("a",{class:"thumbnail",href:"examples/table-filter"},Object(i.b)("div",{style:{backgroundImage:"url("+t(362).default+")"}}),"Table / Filter"),Object(i.b)("a",{class:"thumbnail",href:"examples/table-filter-backend"},Object(i.b)("div",{style:{backgroundImage:"url("+t(383).default+")"}}),"Table / Filter / Backend"),Object(i.b)("a",{class:"thumbnail",href:"examples/table-download"},Object(i.b)("div",{style:{backgroundImage:"url("+t(384).default+")"}}),"Table / Download"),Object(i.b)("a",{class:"thumbnail",href:"examples/table-groupby"},Object(i.b)("div",{style:{backgroundImage:"url("+t(369).default+")"}}),"Table / Group by"),Object(i.b)("a",{class:"thumbnail",href:"examples/table-select"},Object(i.b)("div",{style:{backgroundImage:"url("+t(436).default+")"}}),"Table / Preselection"),Object(i.b)("a",{class:"thumbnail",href:"examples/image"},Object(i.b)("div",{style:{backgroundImage:"url("+t(411).default+")"}}),"Image"),Object(i.b)("a",{class:"thumbnail",href:"examples/frame"},Object(i.b)("div",{style:{backgroundImage:"url("+t(409).default+")"}}),"Frame"),Object(i.b)("a",{class:"thumbnail",href:"examples/frame-path"},Object(i.b)("div",{style:{backgroundImage:"url("+t(371).default+")"}}),"Frame / Path"),Object(i.b)("a",{class:"thumbnail",href:"examples/template"},Object(i.b)("div",{style:{backgroundImage:"url("+t(328).default+")"}}),"Template"),Object(i.b)("a",{class:"thumbnail",href:"examples/template-data"},Object(i.b)("div",{style:{backgroundImage:"url("+t(437).default+")"}}),"Template / Data"),Object(i.b)("a",{class:"thumbnail",href:"examples/markdown"},Object(i.b)("div",{style:{backgroundImage:"url("+t(397).default+")"}}),"Markdown"),Object(i.b)("a",{class:"thumbnail",href:"examples/markdown-data"},Object(i.b)("div",{style:{backgroundImage:"url("+t(412).default+")"}}),"Markdown / Data"),Object(i.b)("a",{class:"thumbnail",href:"examples/markup"},Object(i.b)("div",{style:{backgroundImage:"url("+t(368).default+")"}}),"Markup"),Object(i.b)("a",{class:"thumbnail",href:"examples/nav"},Object(i.b)("div",{style:{backgroundImage:"url("+t(438).default+")"}}),"Nav"),Object(i.b)("a",{class:"thumbnail",href:"examples/toolbar"},Object(i.b)("div",{style:{backgroundImage:"url("+t(439).default+")"}}),"Toolbar"),Object(i.b)("a",{class:"thumbnail",href:"examples/tab"},Object(i.b)("div",{style:{backgroundImage:"url("+t(363).default+")"}}),"Tab"),Object(i.b)("a",{class:"thumbnail",href:"examples/tab-link"},Object(i.b)("div",{style:{backgroundImage:"url("+t(420).default+")"}}),"Tab / Links"),Object(i.b)("a",{class:"thumbnail",href:"examples/tab-delete"},Object(i.b)("div",{style:{backgroundImage:"url("+t(360).default+")"}}),"Tabs / Navigation"),Object(i.b)("a",{class:"thumbnail",href:"examples/breadcrumbs"},Object(i.b)("div",{style:{backgroundImage:"url("+t(440).default+")"}}),"Breadcrumbs"),Object(i.b)("a",{class:"thumbnail",href:"examples/header"},Object(i.b)("div",{style:{backgroundImage:"url("+t(323).default+")"}}),"Header"),Object(i.b)("a",{class:"thumbnail",href:"examples/hash-routing"},Object(i.b)("div",{style:{backgroundImage:"url("+t(441).default+")"}}),"Routing"),Object(i.b)("a",{class:"thumbnail",href:"examples/toolbar-routing"},Object(i.b)("div",{style:{backgroundImage:"url("+t(393).default+")"}}),"Routing / Toolbar"),Object(i.b)("a",{class:"thumbnail",href:"examples/tab-routing"},Object(i.b)("div",{style:{backgroundImage:"url("+t(338).default+")"}}),"Routing / Tabs"),Object(i.b)("a",{class:"thumbnail",href:"examples/card-menu"},Object(i.b)("div",{style:{backgroundImage:"url("+t(389).default+")"}}),"Context Menu"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-point"},Object(i.b)("div",{style:{backgroundImage:"url("+t(333).default+")"}}),"Plot / Point"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-point-shapes"},Object(i.b)("div",{style:{backgroundImage:"url("+t(352).default+")"}}),"Plot / Point / Shapes"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-point-sizes"},Object(i.b)("div",{style:{backgroundImage:"url("+t(322).default+")"}}),"Plot / Point / Sizes"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-point-map"},Object(i.b)("div",{style:{backgroundImage:"url("+t(340).default+")"}}),"Plot / Point / Map"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-point-groups"},Object(i.b)("div",{style:{backgroundImage:"url("+t(317).default+")"}}),"Plot / Point / Groups"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-point-annotation"},Object(i.b)("div",{style:{backgroundImage:"url("+t(442).default+")"}}),"Plot / Point / Annotation"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-point-custom"},Object(i.b)("div",{style:{backgroundImage:"url("+t(315).default+")"}}),"Plot / Point / Custom"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-interval"},Object(i.b)("div",{style:{backgroundImage:"url("+t(308).default+")"}}),"Plot / Interval"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-interval-transpose"},Object(i.b)("div",{style:{backgroundImage:"url("+t(406).default+")"}}),"Plot / Interval / Transpose"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-interval-groups"},Object(i.b)("div",{style:{backgroundImage:"url("+t(443).default+")"}}),"Plot / Interval / Groups"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-interval-groups-transpose"},Object(i.b)("div",{style:{backgroundImage:"url("+t(396).default+")"}}),"Plot / Interval / Groups / Transpose"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-interval-labels"},Object(i.b)("div",{style:{backgroundImage:"url("+t(388).default+")"}}),"Plot / Interval / Labels"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-interval-range"},Object(i.b)("div",{style:{backgroundImage:"url("+t(402).default+")"}}),"Plot / Interval / Range"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-interval-range-transpose"},Object(i.b)("div",{style:{backgroundImage:"url("+t(418).default+")"}}),"Plot / Interval / Range / Transpose"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-interval-stacked"},Object(i.b)("div",{style:{backgroundImage:"url("+t(324).default+")"}}),"Plot / Interval / Stacked"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-interval-stacked-transpose"},Object(i.b)("div",{style:{backgroundImage:"url("+t(444).default+")"}}),"Plot / Interval / Stacked / Transpose"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-interval-stacked-grouped"},Object(i.b)("div",{style:{backgroundImage:"url("+t(445).default+")"}}),"Plot / Interval / Stacked / Grouped"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-interval-stacked-grouped-transpose"},Object(i.b)("div",{style:{backgroundImage:"url("+t(446).default+")"}}),"Plot / Interval / Stacked / Grouped / Transpose"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-interval-polar"},Object(i.b)("div",{style:{backgroundImage:"url("+t(398).default+")"}}),"Plot / Interval / Polar"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-interval-polar-stacked"},Object(i.b)("div",{style:{backgroundImage:"url("+t(329).default+")"}}),"Plot / Interval / Polar / Stacked"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-interval-theta"},Object(i.b)("div",{style:{backgroundImage:"url("+t(331).default+")"}}),"Plot / Interval / Theta"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-interval-helix"},Object(i.b)("div",{style:{backgroundImage:"url("+t(447).default+")"}}),"Plot / Interval / Helix"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-interval-annotation"},Object(i.b)("div",{style:{backgroundImage:"url("+t(404).default+")"}}),"Plot / Interval / Annotation"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-interval-annotation-transpose"},Object(i.b)("div",{style:{backgroundImage:"url("+t(353).default+")"}}),"Plot / Interval / Annotation / Transpose"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-line"},Object(i.b)("div",{style:{backgroundImage:"url("+t(448).default+")"}}),"Plot / Line"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-line-groups"},Object(i.b)("div",{style:{backgroundImage:"url("+t(449).default+")"}}),"Plot / Line / Groups"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-line-smooth"},Object(i.b)("div",{style:{backgroundImage:"url("+t(450).default+")"}}),"Plot / Line / Smooth"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-step"},Object(i.b)("div",{style:{backgroundImage:"url("+t(313).default+")"}}),"Plot / Line / Step"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-step-after"},Object(i.b)("div",{style:{backgroundImage:"url("+t(392).default+")"}}),"Plot / Line / Step / After"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-step-before"},Object(i.b)("div",{style:{backgroundImage:"url("+t(326).default+")"}}),"Plot / Line / Step / Before"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-line-labels"},Object(i.b)("div",{style:{backgroundImage:"url("+t(366).default+")"}}),"Plot / Line / Labels"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-line-labels-stroked"},Object(i.b)("div",{style:{backgroundImage:"url("+t(359).default+")"}}),"Plot / Line / Labels/ Stroked"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-line-labels-no-overlap"},Object(i.b)("div",{style:{backgroundImage:"url("+t(342).default+")"}}),"Plot / Line / Labels / Occlusion"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-line-annotation"},Object(i.b)("div",{style:{backgroundImage:"url("+t(451).default+")"}}),"Plot / Line / Annotation"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-path"},Object(i.b)("div",{style:{backgroundImage:"url("+t(330).default+")"}}),"Plot / Path"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-path-point"},Object(i.b)("div",{style:{backgroundImage:"url("+t(452).default+")"}}),"Plot / Path / Point"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-path-smooth"},Object(i.b)("div",{style:{backgroundImage:"url("+t(453).default+")"}}),"Plot / Path / Smooth"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-area"},Object(i.b)("div",{style:{backgroundImage:"url("+t(332).default+")"}}),"Plot / Area"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-area-groups"},Object(i.b)("div",{style:{backgroundImage:"url("+t(357).default+")"}}),"Plot / Area / Groups"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-area-negative"},Object(i.b)("div",{style:{backgroundImage:"url("+t(327).default+")"}}),"Plot / Area / Negative"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-area-range"},Object(i.b)("div",{style:{backgroundImage:"url("+t(307).default+")"}}),"Plot / Area / Range"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-area-smooth"},Object(i.b)("div",{style:{backgroundImage:"url("+t(370).default+")"}}),"Plot / Area / Smooth"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-area-stacked"},Object(i.b)("div",{style:{backgroundImage:"url("+t(395).default+")"}}),"Plot / Area / Stacked"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-area-line"},Object(i.b)("div",{style:{backgroundImage:"url("+t(416).default+")"}}),"Plot / Area + Line"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-area-line-smooth"},Object(i.b)("div",{style:{backgroundImage:"url("+t(454).default+")"}}),"Plot / Area + Line / Smooth"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-area-line-groups"},Object(i.b)("div",{style:{backgroundImage:"url("+t(377).default+")"}}),"Plot / Area + Line / Groups"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-polygon"},Object(i.b)("div",{style:{backgroundImage:"url("+t(400).default+")"}}),"Plot / Polygon"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-histogram"},Object(i.b)("div",{style:{backgroundImage:"url("+t(455).default+")"}}),"Plot / Histogram"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-axis-title"},Object(i.b)("div",{style:{backgroundImage:"url("+t(456).default+")"}}),"Plot / Axis Titles"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-form"},Object(i.b)("div",{style:{backgroundImage:"url("+t(350).default+")"}}),"Plot / Form"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-vegalite"},Object(i.b)("div",{style:{backgroundImage:"url("+t(410).default+")"}}),"Plot / Vega-lite"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-vegalite-update"},Object(i.b)("div",{style:{backgroundImage:"url("+t(337).default+")"}}),"Plot / Vega-lite / Update"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-vegalite-form"},Object(i.b)("div",{style:{backgroundImage:"url("+t(343).default+")"}}),"Plot / Vega-lite / Form"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-altair"},Object(i.b)("div",{style:{backgroundImage:"url("+t(325).default+")"}}),"Plot / Altair"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-bokeh"},Object(i.b)("div",{style:{backgroundImage:"url("+t(305).default+")"}}),"Plot / Bokeh"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-matplotlib"},Object(i.b)("div",{style:{backgroundImage:"url("+t(457).default+")"}}),"Plot / Matplotlib"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-plotly"},Object(i.b)("div",{style:{backgroundImage:"url("+t(405).default+")"}}),"Plot / Plotly"),Object(i.b)("a",{class:"thumbnail",href:"examples/plot-d3"},Object(i.b)("div",{style:{backgroundImage:"url("+t(310).default+")"}}),"Plot / D3.js"),Object(i.b)("a",{class:"thumbnail",href:"examples/pixel-art"},Object(i.b)("div",{style:{backgroundImage:"url("+t(339).default+")"}}),"Pixel Art"),Object(i.b)("a",{class:"thumbnail",href:"examples/upload"},Object(i.b)("div",{style:{backgroundImage:"url("+t(301).default+")"}}),"Uploads"),Object(i.b)("a",{class:"thumbnail",href:"examples/upload-async"},Object(i.b)("div",{style:{backgroundImage:"url("+t(458).default+")"}}),"Uploads / Async"),Object(i.b)("a",{class:"thumbnail",href:"examples/upload-ui"},Object(i.b)("div",{style:{backgroundImage:"url("+t(459).default+")"}}),"Uploads / UI"),Object(i.b)("a",{class:"thumbnail",href:"examples/upload-download"},Object(i.b)("div",{style:{backgroundImage:"url("+t(460).default+")"}}),"Uploads / Download"),Object(i.b)("a",{class:"thumbnail",href:"examples/meta-title"},Object(i.b)("div",{style:{backgroundImage:"url("+t(461).default+")"}}),"Meta / Title"),Object(i.b)("a",{class:"thumbnail",href:"examples/meta-notification"},Object(i.b)("div",{style:{backgroundImage:"url("+t(462).default+")"}}),"Meta / Notification"),Object(i.b)("a",{class:"thumbnail",href:"examples/meta-refresh"},Object(i.b)("div",{style:{backgroundImage:"url("+t(413).default+")"}}),"Meta / Refresh"),Object(i.b)("a",{class:"thumbnail",href:"examples/meta-redirect"},Object(i.b)("div",{style:{backgroundImage:"url("+t(334).default+")"}}),"Meta / Redirect"),Object(i.b)("a",{class:"thumbnail",href:"examples/counter-global"},Object(i.b)("div",{style:{backgroundImage:"url("+t(463).default+")"}}),"Mode / Broadcast / Global"),Object(i.b)("a",{class:"thumbnail",href:"examples/counter-broadcast"},Object(i.b)("div",{style:{backgroundImage:"url("+t(390).default+")"}}),"Mode / Broadcast"),Object(i.b)("a",{class:"thumbnail",href:"examples/counter-multicast"},Object(i.b)("div",{style:{backgroundImage:"url("+t(419).default+")"}}),"Mode / Multicast"),Object(i.b)("a",{class:"thumbnail",href:"examples/counter-unicast"},Object(i.b)("div",{style:{backgroundImage:"url("+t(349).default+")"}}),"Mode / Unicast"),Object(i.b)("a",{class:"thumbnail",href:"examples/graphics-primitives"},Object(i.b)("div",{style:{backgroundImage:"url("+t(385).default+")"}}),"Graphics / Primitives"),Object(i.b)("a",{class:"thumbnail",href:"examples/graphics-spline"},Object(i.b)("div",{style:{backgroundImage:"url("+t(408).default+")"}}),"Graphics / Spline"),Object(i.b)("a",{class:"thumbnail",href:"examples/graphics-clock"},Object(i.b)("div",{style:{backgroundImage:"url("+t(367).default+")"}}),"Graphics / Clock"),Object(i.b)("a",{class:"thumbnail",href:"examples/graphics-path"},Object(i.b)("div",{style:{backgroundImage:"url("+t(378).default+")"}}),"Graphics / Path"),Object(i.b)("a",{class:"thumbnail",href:"examples/graphics-turtle"},Object(i.b)("div",{style:{backgroundImage:"url("+t(391).default+")"}}),"Graphics / Turtle"),Object(i.b)("a",{class:"thumbnail",href:"examples/graphics-hilbert"},Object(i.b)("div",{style:{backgroundImage:"url("+t(464).default+")"}}),"Graphics / Hilbert"),Object(i.b)("a",{class:"thumbnail",href:"examples/glider-gun"},Object(i.b)("div",{style:{backgroundImage:"url("+t(314).default+")"}}),"Graphics / Glider Gun"))}f.isMDXComponent=!0},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(A,e,t){"use strict";t.d(e,"a",(function(){return r})),t.d(e,"b",(function(){return I}));var a=t(0),d=t.n(a);function i(A,e,t){return e in A?Object.defineProperty(A,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):A[e]=t,A}function l(A,e){var t=Object.keys(A);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(A);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(A,e).enumerable}))),t.push.apply(t,a)}return t}function u(A){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?l(Object(t),!0).forEach((function(e){i(A,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(A,Object.getOwnPropertyDescriptors(t)):l(Object(t)).forEach((function(e){Object.defineProperty(A,e,Object.getOwnPropertyDescriptor(t,e))}))}return A}function s(A,e){if(null==A)return{};var t,a,d=function(A,e){if(null==A)return{};var t,a,d={},i=Object.keys(A);for(a=0;a<i.length;a++)t=i[a],e.indexOf(t)>=0||(d[t]=A[t]);return d}(A,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(A);for(a=0;a<i.length;a++)t=i[a],e.indexOf(t)>=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<i;b++)l[b]=t[b];return d.a.createElement.apply(null,l)}return d.a.createElement.apply(null,t)}c.displayName="MDXCreateElement"},,,,,,,,,,,function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/dashboard-24aea705724fd29993c5508a401b3b3c.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/table-markdown-fff816fa17022f80817f83239970db97.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-bokeh-0e17ac43f3cdff49e9cb5ff21d8c8214.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-area-range-0663c734a05c77b333b1cfdca966324f.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-95ba708d52bd4b0bda18da55cfd578e0.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/table-f4d13c60963beb31475a54192f62b47d.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-d3-27f0867826e9547bb4bb23e79517892b.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/table-sort-160ae663649156d89ea2cea500cc21b1.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-step-8c593fd75d3829ee2e6928c3e3c32372.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/glider-gun-8acc444425a295f814222e258d6ca3e3.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-point-custom-2a5eefc8951352109b57a03aa44baeb8.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-point-groups-d949b54bdc3583a858a7cc8c46532c90.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/message-bar-d893610affc5c6857a7cbf1546ad8326.png"},,,function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-point-sizes-8591d0b3d70acfe4b28d08c74515ed4d.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/header-0cdf3777b66e47f9e5320eee81ac5e10.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-stacked-6a492804251cf9ef3fcd33cf721b725f.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-altair-6b648257bc043077af771b8bbdf91735.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-step-before-45d2a85b93deb34a9e029e0d1ac5e578.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-area-negative-72b6ee9e1692572a50b4f9e5f88db0ce.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/template-1b5f5707f248dfd5a606e722345ad2a2.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-polar-stacked-dbb95e41cc47e31cb7614c6c9f3bf387.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-path-2737001d0f8727c8d62799faf298a88e.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-theta-ecd6315a48713f45d162e64c4414325c.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-area-0a621df3247663494f8a594d65f0516d.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-point-ca45d9c0f59368e2e351f8bc69f5566f.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/meta-redirect-ce65a2bb8925d26db3db00327634b324.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/textbox-trigger-3063508395dc193e6087e98ec3caf604.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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M1GbN21SYGB5J76uqPlUTf34n/9cd7ybNkXo8cefcELoigYNG+r333/X8ePHU3fjaZBZ17wStFeULFVSZ86ckZT4kHxoaDU99NBDOnHihLZu3arFixcpKioq2bsnS5a6+m+b67775HK5VOjBQs42l8ul3Pffr6ioKGdb4hIkz4ABANLP+AzYFTlz5lSdOnVVp05dxcbGaszoUerTp7e++nq58uTJo7Nnz6pAwYLJXlfwbwV19uxZr22WrBSvkdL2EgEBevTRR7V61So98cQTWr1qpUJCqii/n1+qx14iIECFChXS5k2b5PF4FB0drfIVKig4OERbtmzR802bauvWrerdu48kOeNt26Z1smffPB6PoqLOJruGlBirSZ09e1abNkWoYoXyqR7rldcVTOnfsuDfnP1XZowySmZd0+32/pH1cblkezzO9/Pnz9OsmTN1+vRpFS5cWH//+9+VO3fuZB9xcr2fmWvZuvo6liABABnFaIB5PB7t3btXhQsXVp48eZztuXLlUtdub+irr77Svn37VKlSJeXLl0+RkaeSnSMyMlJ58+ZN1zieadBAn82Zo46dOmn9+vUaMnTYzV90jaqhodq0KUK2bD355JPKkSOHgkOCtWDBfP380086d+6cQqokfqTClXt98823FBgYmOxc+fLnT9U18+TNo8KFC+u9995P01jz5cunvXuSPyN2OjJSkpx/T5flHTOSdCnJc3qZcc2MtGXLFo0dM0ZvvvmWGjZq5LybtmXLFhly/rp16ypbkhlZAABuldH1FMuy1KVLZ02elDwgfvwx8Z18V5bXKgcFac3q1V4P6sfHx2vlihUKCg5O1zjqPV1PkZGRmjx5ktxut6pVq5bmc4SGVtOOHTv0/fffO+9c/Mc/ysrj8WjGjBl6/PEnlP9yWOXPn18lAgK0b/8+lQgIcL4eKlxYBw4e9FpmvZFKlSrr1KlTypkrl9d5oqKjdeEGoRRUOUi7du1ylkyv+PKrL1WkSBEVLlxYUmIU/fbbb17HbNu+Ldn5LMtSfHz8Dcea2mtmpKNH/59y5sypZi+84MRXdHS0fj9yJEPOX6duXdWsWTNDzgUAuLcZnQGzLEsdXuug8ePH6cyZs6peo4bcbrd2/fKLli5donr166to0aKSpPbt2mvVypXq0vl1vfRSK1kul+bPm6vTp0/rtdc6pGsc+f38FBwc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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-point-map-13e6e7b5d7bfc7c6337172bb86dc84e2.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-line-labels-no-overlap-6597ed5a76ab4f19c1f7e189cbc21624.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-vegalite-form-0d561c88fa3bbc9f612e304db9a412b4.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/color-picker-d5462fd8a2dcc2b3d980e2402a61d930.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-form-7b7c198bf0e0f55d1d9389b4f4dcff1a.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-point-shapes-98b5ada97343dfb174c19df0f0ea7ea8.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-annotation-transpose-a0e697aba7f9fa2b783814edfb13d0be.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/text-3c5275bb7d17545e6fd8952074ab9d13.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-area-groups-26a91066657837eeb3ddd3d83dafdc0a.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/issue-tracker-f8f5460fa5058fa880076f1b4d032c9f.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-line-labels-stroked-8f085e306871e3c87d798b4c4206fc11.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/table-filter-ce33da2e8b6fa9d9965683c9017e8662.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},,function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/stat-large-bar-e578fa2ed742b2a1b9eb9ff52d50c476.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-line-labels-f98b2fc53482efef18cf834fcd851704.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/graphics-clock-fb82cce5ac3fca365e9cd43ba116c948.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/table-groupby-8a15ae0b2ea905a6961c5783aebe43c5.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-area-smooth-4826228f8423a45fda33727184111c06.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/frame-path-0db07ced544338ad72aef8fed53c931d.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/form-frame-path-e829e3ff6a85bcc0e461e8c2cb505c32.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/textbox-ad4ead8b116b9f18042ba1302cf471c9.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/form-menu-d7388e52d93d99081c085e2d1baa003d.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-area-line-groups-fab3e454a09ab17afeb08c5bbe20a364.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARUAAAD8CAYAAABZ0jAcAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAyOjA3OjQ5IFBNIFBEVCumBS8AAANUSURBVHic7daxDcJQFARBY1GxY4ggpmQ/imClL6yZCi5a3W1mZgOI7KsHANciKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAKn76gFXcL4/2/n6rJ7Bj/bnse2PY/WMv+epAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAqdvMzOoRwHV4KkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVJfkOkP8d6gjyUAAAAASUVORK5CYII="},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJoAAACrCAYAAACe2YUfAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDEyOjUyOjAwIFBNIFBEVDkKT7IAABsSSURBVHic7Z1rUFTn/cc/u7CwwC7XhUVguctFUDTeMF5yUZOqMa2p01zqtJlOLm3TzNg2TabTaaeTmNZ2zIsmmU7SVNu8aWMuJjYaE2PyVyFqvIN4YaFcZLmDLCywu+yyz/8FegqCLFH2kOjzmTkze855zvN7nud8z3M7v+esRgghkEgCjHaqEyC5NZBCk6iCFJpEFaTQJKoghSZRBSk0iSpIoUlUQQpNog7CD9u2bRMGg0EAcrvFNoPBILZt2+ZPIhNC4+/NgNFopLe3d7wgkpsYg8GAw+G44Xj8Ck2j0dywEck3m8l4Syn7aBJVkEKTqIIUmkQVpNAkqiCFJlEFKTSJKkihSVRBCk2iClJoElWQQpOoghSaRBWk0CSqIIUmUQUpNIkqSKFJVEEKTaIKUmgSVZBCk6jC105oubm5PP3004SGhk51UiSTib/VK1znCpqraW9vF1u3bhXR0dHjXvf2228LIYRYt27dlK8CktvY9zIgq6Cud3GKEAK73c727dsJCgpiwYIFzJo1i9LSUpYtW3bNBQ+FhYWsXr2aV155BafTeV22JZPLZCxOCWiNduHCBWU/NDRUlJWVCSGEWLBgwZjXaDQa1Z/WqbD5TdsmA9X6aG63mz179gCQn5+PyWRCCMGOHTvYunUrLpeLe++9l1dffRUhBMXFxQBUVFRgs9l49NFHaWpqwm6389vf/pbCwkK+/PJL+vv7OXDgAKmpqYqt4uJi9u/fT3d3Ny0tLbz22muEh4cDsH79eoQQvPDCC5SWluL1eomPj8fpdFJXVzcizeXl5Xi9XsxmszqFdBOj6mAgLi4OgL6+PuXYypUrWbx4Mdu2baOxsXHM62JjY3n66ad58803GRgY4Pnnn2fnzp2UlJSwf/9+li1bxksvvQRASkoKn3/+ORkZGWzevJlPPvmEJ598kldeeWVEnBs3bsTr9fL6669jt9v56KOPSEtLo6CgQIln5syZ7N+/n9bW1kAUx62FGk2nVqsVd911l+jv7xcDAwPCbDYLk8kkhBCira1NGI1G5bpXX31VCCFEcXGxAERFRYUQQoj09HQBiJ/+9KdCCCH+8Ic/CEAEBwcLh8MhampqBCDi4uLE6tWrRWZmpmLb4XCI+vp6AYj169cLIYTYs2fPiPR+73vfE0II8atf/UoA4sknnxRCCPH4449PedM11dvXvunMzc1FCMHg4CCff/45er2eZ555ZkQNcfr0ab9L7t1ut9KsXbp0CYCmpiYAvF4v3d3dStPY2dlJS0sLTzzxBP/5z3+wWq0YDIZR0yUlJSUj9nft2kVfXx+rV68GYM2aNXg8Ht57773rLwCJQnCgDfzlL39BCEFHRwe7d+/m9OnTI877fL5Jtbd27Vo++OADampq2LFjB++88w5btmwZFe5qu/39/ezatYsHHniAhIQE7r77bvbt26cIW3JjBFRolZWVbNy4MZAmRrF+/Xq0Wi0rV66krq4Oo9HIG2+8gd1u93vt9u3befDBB9m0aRMRERG89dZbKqT41iDgNZraNDc3A7B582ZKS0v5/ve/P+F5oD179uBwOHjsscdwu93s3LkzkEm9pbjphPbCCy+QlJTEmjVrWLp0KZs3b8ZoNGIymfxe63K52LlzJxs2bODjjz+mu7tbhRTfIgRq1PlN3bZs2SKEEOKhhx6a8rR8XbbJQArt8jZv3jyxdetW4XK5RF1dnQgJCZnyNH1dtsnga+e9MVUsX76cRx55hDNnzrBu3ToGBgamOkk3FfKLjxK/+JHIhJA1mkQVpNAkqiCFJlEFKTSJKgRUaA8//DDl5eX09/dz7tw5nnrqqUCamzKqq6vJzs4edXzjxo34fD68Xi8ej4eamhoeeeSRCcUZGxs76vXdL37xC6KjoyclzaoTqHm0H/7wh8Jms4n77rtPxMfHizvuuEOUl5eLZ599dsrnhSZ7q66uFtnZ2aOOb9y4Ufz9738XMOTJu2DBAnHp0iWRlJTkN87s7GxRV1c34pjNZlPcpdTcJoOACE2r1YqmpiYxf/78EcdzcnLEsWPHhFarFYBYt26dsFqtoqenR+zdu1dYLBYBCJPJJGw2m/jd734nbDabKC8vF/n5+eLjjz8WTU1N4sMPPxR6vV7AkL/a448/LiorK4XNZhOvvvqq0Ol0is1r2Vi/fr149913lXDz5s0Tx48fV85t375dvP3226KpqUmUlZWJ3NxcJeyGDRtEfX29sNvt4tlnn52Q0K5sR44cEUuWLBEw5Hv3s5/9TDn3zDPPiC1btgiLxaKUf0tLi1i6dKk4duyYcuy5554TgJgxY4b44osvhMPhEOXl5eLOO+9U4qqoqBA/+clPRGVlpejo6BAvvPDClAotIE1nQUEBDoeDY8eOjThutVqZP38+Pp+P/Px8tm3bxkMPPUR0dDQlJSXs2LFDCTtt2jSqqqpISUlh7969lJaW8sQTT5CWlkZYWBgPPfSQEnbdunXMmTOHzMxMEhMTee655wD82hiPVatW8cc//pGkpCR2797N5s2bASgqKuKVV17h/vvvJy4uDoPBgMVi8RtfUFAQq1evJiEhgbKysnHDNjQ0MH36dOrr60lMTKSkpIT58+fT2NhIRkYGf/rTn9DpdOzatYs333yTyMhIfv7zn7Njxw4SExOVeBYsWEBBQQGzZs3ixz/+MUVFRRPKeyAIiNDi4+NpaWkZN8wjjzzCP/7xD06ePInP52PTpk1MmzaNGTNmAOB0Otm+fTsA+/fvp7y8nIsXL+LxePjiiy/IyMhQ4vrrX/9Kf38/AwMDvPTSSzz88MMTsjEeR48e5dSpUwC89dZb5OXlAfDggw/yxhtvUFZWxuDgIC+++CJa7bWL8dFHH8XlcuF0Otm5cycvvvjipPy30rJly7Db7fztb39DCMFnn33Gnj17eOCBB5QwW7duxev10tTURElJiZKHqSAgQmtvbx/xZI1FcnIy1dXVyr4QgqqqKpKTk4EhT4rhzomDg4MjwgYFBSn7w9ca1NfXM23atAnZGI/h/msDAwPodDoAEhMTqa2tVc653W7FNWks/vnPf6LX6wkJCWHu3Lk8++yzrF271q99f1ydNxhqMYbn7Vp5mAoCIrSzZ89iNBqZP3/+iOM5OTkcO3YMrVZLU1MTWVlZyjmNRkN2drbiov1VGD7iy8nJUW78eDa8Xu8I926DwTAhW83NzWRmZir7YWFhJCUlTeja8vJyXn/9ddasWQNw3WmA0XmDobxfT/mpQUCE5vP5+PWvf817773H6tWrMZlMLFmyhHfffZd33nkHn8/Hv/71L370ox9x2223odVq+c1vfkNraytnz579yvaeeuopTCYTUVFRbNq0iX//+98A49qorKxkyZIlZGdnExUVxTPPPDMhW2+//TaPPfYYRUVFBAcH8+c//xmPxzOha5OTk1m7di1VVVUAXLhwgfXr12M0GsnLy2PDhg1K2L6+PhISEkhJSVFq776+PubMmYNOp+PgwYPExsby+OOPo9FoWL58OatWreL999//KkWnHoEYdV7ZHn74YVFeXi6cTqewWq3i6aefHnH+gQceEFarVTgcjlGjzo6ODiXcfffdJ/bt26fs//73vxebNm1SRlePPfaYOH/+vLDb7eK1114b4eJzLRuAeP7554XD4RCVlZXiiSeeGDHqHD4izcvLE9XV1cr+D37wA9HQ0CCam5vFL3/5S1FRUXHNUafP5xNer1d4vV7R0dEhXnvtNREaGioAERYWJj788EPR29sr9u/fLzZt2iS2bNmiXL9582bR09Mj7r33XgGI7373u6K1tVVZAVZQUDBi1HnXXXeNGHUWFhYq+2+99ZbYsGHDzTW9oeZ2dYHKbfK3yUC+gpKoghSaRBWk46PEL34kMiFkjSZRBSk0iSpIoUlUQQpNogpSaBJVkEKTqIIUmkQVpNAkqiCFJlEFKTSJKkihSVRBCk2iClJoElWQQpOoghSaRBWk0CSq4FdoX2UJmOTmY7Luv1+hvfzyy1JstygGg4GXX355UuLy68otkUwGso8mUQUpNIkqSKFJVEEKTaIKUmgSVZBCk6iCFJpEFaTQJKoghSZRBb//QOzxeBhwuyblQx+SmweNRkNIqH7C38X1W6NJkUnGQgjBgNs14fB+hSZFJrkWX0Ubso8mUQUpNIkqSKFJVEEKTaIKUmgSVZBCk6iCFJpEFaTQJKoghSZRBSk0iSpIoUlUQQpNogpSaBJVkEKTqIIUmkQVpNAkqiCFJlEFKTSJKnyjhVZXV8ulS5duKI6GhgbKTp/G4/FM+BqPx0NVlRWn03lDtm8l/K6Cul52vPfuiH2dTkd8QgJFRUWEhYXfcPw9PT2cPHGCqKgolq9YeV1x9Pf3cfLEcZKSktDpdLS3t1Ny8IByXqvVEhFhwJJqIScnF6126LlsuHiRM+Xl9Pf3U1Q0+4bzcvDgATra27n/298hOHj0LRlwu9m160PMZjOLlyy9bjvv73gPo9HIipX3UFl5gbMVFdx5193ExsbeSPInREBrNJ1OR2ZWFplZWRiNRpoaGzl86NCkxB0ZGUnR7NkUzZ5z3XFUWasYHBwkMzNrxPGICAMpKRbM5kQ8ngHOnT1LycED+Hw+ACwWCwUFhUyfnnNDeZhKsrOno9PpKC87rYq9gNVoAHq9ntnDhPDZvk+x2+309vZOyudKs7Kyr/taIQQXGy4SGhpKnMk04lyCOYE5c24DwOfzceL4cRoaLmK1VpKXl48uJITcvLwbSvtUExQUhDkxEVtDA3a7nejo6IDaC6jQrkav19Pd3Y1ON2R2cHCQC+fPY7M14HK5iIyMZEZBAWZzIgAul5PysjJaW1sRQhAdE0PRrCKioqPHbE462ts5e7YCu92OTqfDkppKQUGh0uQNx+Fw4BkYIDFx2rhp1mq1zJ4zh6amRurr6snLy6ex0caXR45QUFhIbm4ePp+Pc2fP0tBwEbfbjcFgIC9/BikpKRPK5xW6urooLztNb28vJpOJObfNJTx87G6G09lP2eky2trbCNJqMZvNFM6chV6vB8DtdnPq5Ana2toICwtnzpzRNb/ZbMbW0EBzc1PAhRbQplMIgcvlwul0Ul9fT3t7O0lJyYSGDhVGxZkzVFZeIC7ORH7+DFwuN4cPHaK3txeAY0eP0tjYiCU1ldy8PHq6uyktLVWasOHYu7ooLS3B4XCQkZlJVFQ0VVYr5WVlY6at77KNiIgIv/nQ6XRERUfT19eL1+sddb6y8gJWayVRUVEUFBai0Wg4dvRLuu32CeXzCieOHyc2Lg6TKZ7W1lYOfVE65tpJr9fLwQMHaG1tISM9g5QUC42NjSOa9yOHD9HU1ERMTAzxCfGcOHF8VFwx0TEAXOq8sQHVRAhojdbb28tHu3cp+5FRURTOnKnsp6WlYU40/69W0QzdlM6ODgwGAz09DoKDgyksnElwcDCJ5kTcA+4xC7/SWonP52PBwoUkJJiBocLu7raPmbaBy6PMkJCQCeUl5PLSf49nYNQ5R48DgJzcPEwmExaLBXuXHX2YfkL5vEJ+fj5p6ekAlBw8QHt7Ox0d7URFRo2w13DxIn19fRQVzSY9IwOA8IhwzpSX09bWSlhYOJ2dnURFR7Nk6TI0Gg1NTY0cOXx4RDyhl2s/lyvwo+eACi0sLIzb5s4FhkR3/tw5Pv/8M5YvX05EhAGD0YjdbufE8WP09fXR1dUFoDyVqampVFVZ+eij3Zji4oiPTyA1LZWgoCAGr6pZuu12NBoNJlO8cqx40e3XTFtQ0FBl7vFObFrjijB1utHCTLFYaGy0UVpykJiYGEymeCypqUrN7S+fV0ic9r+mNDFxGu3t7fT09IwSWpd96PqystOUXdWZ7+3txeMZKptEcyIajQYA87DfV7jykF0JH0gCKrTg4GClH2I2g1aj5dSpk9TX1zNjRgElBw9gt9tJTk5m2rQkoqNjqK6uUq6fOWsWCWYzzc1NXOrs5MyZciqtlaxYsRLtVYX2Vb/ccEUELpf/70d4PB7sXV0YDIYxpx+SkpJYvnwFNpuNzs4OqqqsWK2V3L54MWZzot98jpUHwTgZunxq7rx5GI2RI06Fh4fT3t7uPw5QugHBusB31VWdsB30DQLgG/QpT3ZqaioLFhYzPSeHoKCg/4UdHMTW0IAQgtmz53D38hVkZGYy4HbT2dkxKu7omGiEELS2tirHDh86xIH9/zdmWq50fnu6u8dNs8/n4/Spk/h8PlLT0sYM09rayqWuLmYUFLB02R3MmzcfIQTNzc1+8zmclubm//1uaQEg8qraDCAqeuiY1+slNjaW2NhYfD4fly51IoSPyMgh8bW2tCjdjJaW5lFdjisPWdjlJjSQBFTKLpeLU6dOKr9bW1rQaDQkJScTEhKCVqultbWVKqsV94Cbmpoa5dqgoCDOnTtLf38/06fnoNPpaG5qRqvVEn25EzucnJxcmpuaOH7sKKmpafT09NDe3kZGRuaYadPpdMSZTHR2dOB0OgkLC1POtbW2cfTLLxkc9HLpUhdut4u4uDhycnLHjKvRZqOurpb29jZiYmJoaGgAIC42zm8+h3PhwgW67F309/XT0d5OZGQkJpMJz8DIfmFqahrWykrOlJfT09ODLlhHbW0NaDSkWlKJigonLi6Ozs5OSkoOEhkZSUtzy6jRd1fX0CAgJuYbPmHr8XioramhtqaGttZWIiMjWbiwmNjYWHQ6HYsW3U5ISAjnz5/D3tVFfn7+iOtvX7wEs9lMTW0N58+fIyIinMVLlo45UoyJiWHxkqUYIyOpq6ulp6eb7OzpzCoqumb6rszDNTbaRhzv6+vFZmugra2N0NAQZhQUsGTpsjGnSQBmFRWRmZVFe1sbFWfO4PV4mD1nDpbU1Anl8wrz5s2js6ODjo52zGYzty9eMqpfBUMPybI77iTx8jzYf/9bTUxMDMuWLiMkNBSA4kWLmJaUhL2ri/a2Nm6bO3dUTdreNtTEJk4bf4pnMvD7Fz29jp6AJ2IqOXhgP/39/axYec+Y/a+bFZ/Px+5dHxIeEcHy5SuuOx7DVX3Ea3HrlOw1WLJ0GT6f75r9ppuV6uoqPB4Ps2Zdu8afTG75Gu1Wxev1IoSY8KdBr4Ws0STjonY34Rvtjyb55iCFJlEFKTSJKkihSVQhoD3ChoYGKisv0NfbS3h4BFmXvW1vNj75+GMWL1kyypmzurqK8rIyZdI1PDycGQUFWCypfuMcGBjg4sV6srOnK8eqqqykp2fc8EhxKgiY0Orr6zl3toI5c24jJjYWR08Pp8tO4x30XvNVzs1IenqG4sHSdekSpV+UEh8fj14fNu51AwMDVFdVjRBadVUVycnJUmhXEEJwtuIMi25fTEzM0HvJ0Ph4iouLOXb0KNOn5yg+UhVnzuByuYiNjWPuvLmEhYUz4Hbz2Wf7SM/IoK62Fl1ICAsXLqS8rIzu7m6iY2JYuLCYoKAg9n26l+zs6VitVgYHvUxLSmLWrCLlddG1bDQ22rA1NLCweBEw5N166tRJ7r57OY2NNhptNgTQ2dFBaGgoCxYWYzQaAbh48SLnzlbg8Xi+kkt3TGwsRoOBvt4+9PowTp8+hdFoVF6FVVmtuFwusqdns/eTjwHYvWsXC4uLOVNehtPp5OM9eygsnElObi49PT2cOnmC7u5uwiMiKCqaTXz8kJvUvk/3kpmVRXVVNQMDbjIzs5hRUDAp9/d6CEgfzdHTQ3CwThHZFQwGI3fdvRyNRoPD0cOJ48dZsLCYtfd/G5PJNMIxz+VyYTAYWbV6DeYEMwf272fObXP51qrV+AYHsdkalLCNTY0sX7GCe7+1CrfLhdVaOZQOPzbGo6WlhdzcPFavuY/ExGmcrTgDQHd3N2WnT7Ho9sXct/Z+vF4vTme/3/iEELS0tOB2u4ny4zYdFhbOPfd+i/DwcNbcdx8mk4m77l5OWFgY31q1ipzcXHw+H4cPfUFqWhr3f/s7zJpVxJEjh0e4PXVd6mLlPfewYuVKampr6PbjqRJIAiI094AbvT503DANFxtIS08nOjoajUZDXn4+LpeLnp6hNxFBQUGKz318fDxRUVGEh4ej1WqJizPR3/e/m5uVmUVQUBBarZbp03OwXfae8GdjPGJjYxVXohSLBYdjyIvW1tBARkYmUVFRQ3Hm5Y/7VzX19XV88P4Odn7wPocPfUFuXt6kTJZ2dHSg0+kU75SEhAQSzYk0NTYqYdLT09FoNOj1YZjiTDim8C1PQJrO0JBQXC73uGGcLqfis34Fg8GAy+VEHxqKVqsd4blwtRfD8JurH+biEx4RjvPyUz2eDX8M7wdptVp8viF7LrdrRE2t1WrH7W+lpaUrfbTu7m6+PHKE0FA9027QY8LldBJx1eDDYDTgHJY33TA39eF5mAoCUqMZIyPxej2Ky/IVensd/N/nnyGEIEwfRl9f31Xne/12kseib9giD4ejV3HkG8+GRqNlcJgr9ViLTsZCr9ePiHNwcHDCPvdRUVFkZGbQ0jLk4KjVaEe4c080DTD0cPVdtbil19FL2HWUnxoERGgajYaCwpkcOXyYlpaWIa/Yjg6OHDlCckoKGo2GFIuFurpa7HY7QgguXDhPqF6veId+Ff5b818G3G48Hg/nzlaQYrEAjGvDaDTQ2dFx2cfeQ5XVOiFbKSkW6mpr6e7uRghBxZkz1/RTuxqn00lLc7MyDWI0Gmm02fB6vTgcDi5evKiEDQ4Oxu1243Q6ldo7KCgYu92Oz+fDZDIxMOChrrYWgLa2NlpaW0hKTppwualJwKY30tLS0Gq1VFScoa+3l7CwMLKys5URVmRkJHPnzuPol0eUEeGiRYuuy1aqJZUDB/bjcrlIsViU6ZPxbBiNkWRlZ/P5Z/vQ68OYnjOd2ss3bTyioqIoKpqtLIWbnpMz7pK9urpa6uvrgKHmODklRSmD1LQ0mlua+Wj3LqJjYrBYLAwODrm76/V6srKz+XTvJywsXoTZbKagsJBTJ0+Snp5BQWEhty9ezKmTJygvLyM8IoLi4kXX1SKowTfeTWjfp3tZsLD4umpCyY0zUTch+QpKogpSaBJV+MY3nZKpRTadkq8VUmgSVZBCk6iCFJpEFaTQJKoghSZRBSk0iSpIoUlUQQpNogpSaBJVkEKTqIIUmkQVpNAkqiCFJlEFKTSJKkihSVTBr9DG+iq0RAJfTRt+hRYSqpdik4xCo9EQEjrxP8Lw68otkUwGso8mUQUpNIkqSKFJVEEKTaIKUmgSVZBCk6iCFJpEFf4f5AoBRuRdDnkAAAAASUVORK5CYII="},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/form-b0f5fccd418b3d5e40f559cf1d60cb46.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/table-filter-backend-e69a57efeee01d99d32a542a71466995.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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z/g6bN0OfQvwvfxU+7Ut7UIBJSItlxHA9+KTTkit2UBkwlexl69u82btD4qJTLwAe/NWyMvF/9Y86KyVy080CigRaZ2cLHxv/A3j29NgWynRqd/AuvU/4XObEiaL/cjTRC+YAQeqMAYPxL/4NejXu03aEnfpHpSIJI019ymsm+9wNjUc2A/zumswZ10OgfRWv7f91Dysh56M9dCMa2bie/DuVr+veJcCSkSSyl65huiMH8COQ9uzZ2ZgXv4tjNmzMIYWJvhe67CffxHruZehrNw52K83vrtuw/iXC5NcuXiNAkpE2oT1349g/fl/YFvp4YNdT8IYWohxylAYMghj+GCMMSOgU6bT69q3H3tpCdaiZdgvv3k45A5da/7bjzBnz2r/H0ZcoYASkTZlz38F68HHsRd92KLrjfOmYn7jAoxvX5KUoULpOBRQItJu7Hfew/6gGHvxMuwt2476gK8x8mSMcSMxzp6McfH5CqUvMQWUiIh4kqaZi4iIJymgRETEkxRQIiLiSQooERHxJAWUiIh4kgJKREQ8SQElIiKepIASERFPUkCJiIgnKaBERMSTFFAiIuJJCigREfEkBZSIiHiSAkpERDxJASUiIp6kgBIREU9SQIlIu7vjjju444473C5DPE4BJSIinqSAEpEOa+nSpYwbOyb2a+oZU/jed7/L+++/72pdt/zsZh566C9t2sbECePZsGFD3K9fu3YtRZMntWFFyaeAEpEOLSUlhVdefY1XXn2Nhx5+mKKiIm79xc95+umn3C6tQ5s/fz6zZl3jag1+V1sXEWklwzDo2bMnAD179mTo0GEMGTqEm268kbPOOptevXq5XKG0lHpQInLCmThxEkOGDOWdt9+OHVu7di2zZl3DpIkT+NrFF/HsM8/Ezt1++79z1113xr5/7733GDd2DOvXr48d+9H1s5n78MMAnH3Wmbz66qt859uXM3HCeC6fOYNNGzces57jtQ1QVlbGL37+c84+60ymnjGFX912GwcPHoydLy8v50fXz2bypIlcfNGFlCxf3uz/g2XLPuTyy2cyccJ4rrn6KioqKuJu849//AN33flbVq9axbixY3jxhRfiqjPZFFAickIaPXo0H2/5GICysl1cd+0PmVI0hefnz+cXt/6Sxx//n1hQFBUVsbS4OHbth0uX4vf7WfbhhwA0NDSwYsUKJhcVxV7z9FNP8qt/v52333mXwsGDufXWXxy1jubatm2bn9x0EwCPP/EkTz71NDt3lvLgnx8AIBwOc921PyQ3N49nnnmWO+/6HQ899Bcikcgxf/bt27fz4x/9mAu+egHz//f/uOLKK/nv/5oTO99cmzfd9BN+evPNDBs2jCXFS/n6N77R7DVtQQElIm2urKyMhoaGY55vaGigrKwsqW1mZWVRU10NwLzn5nHqqadxzaxZ9OpVwKRJk7jppp/wxBOPY9s2EydOYvfu3ezevRuA4qXFfOeKK1i61AmtVatWkpGZybBhw2LvP2PGTIYMGUJWVhY//OG1bN++94pyFgAABIRJREFUnQMHDnyhjubaNgyDRx97jP/4zW/o06cPffv25aKLLmb16tUALFq0kNraWm6/4w769uvHyJEjuW72bCzLOubP/vzz85gypYgrrrySXr16cfbZ5/C1r389dr65Nn0+H6mpaaSmpZGamoppms1e0xZ0D0pE2tzvf/97SktLef7550lJSWlyLhKJMGPGDLp3784DDyTvX+PV1dVk5+QAsHnzJk4/fXyT86NGj6ayspL9+/bRuUsXRo4cxdLiYiZNnkzVgQNceeVVXHThBYTDYYqLi5k0aRKGYcSu7927d+y/cw61U1dXR25ubpN24mnbNAzeeON11q9bx85du9iwfj1du3YFYOuWrQwdOhS///DH9dChwzDNY/cvtm7ZysRJE5scGz785CbfH6/NY2nJNa2hHpSItLl7770X0zSZPn16k6GpSCTC9OnTiUaj3HfffUltc9XqVQwZPAQA26ZJuBxNUVERxcVLWLq0mPHjx5OTk8PAgYNYtWoVxUuKKTpieC8RzbVdV1vLd674Dm+8/jqFg4cw65pZzJ59fZPXRKLRz72njW3bx203Gml6jXXEe8TTZkvqTDYFlIi0Ob/fz3PPPYdlWcyYMYNIJBLrOUUikaP2rFpjwYIP+Hjzx5z3la8AMGTIEJZ/bmLB8mXLyM/PJ69zZwAmFxXx4bJlLFm8hPETJgAwYcIE3n77LbZu3cKECU17JPFqru2PPvqIPRUV3P/An5k2bRqnnnZak6HCQYMGsfGjj6irrY0d27B+/XEDalDhIEpWlDQ5tn7D4QkfzbUJYBg46ZrANcmmgBKRdpGSksK8efMIh8PMmTOHOXPmEA6HWx1Otm3H7h9t2LCBuQ8/zL/dcgs33nQj3bt3B+Cy6ZexatVKHn7oIcrKyli8eDH3/ulerr76mljvprCwkEB6Ou+++04sjCZMnMBLL77IKaeMICsrq0X1Ndd2Qe8CwuEwr7/2GuXl5bz77rvMm/dc7PpJkyeTm5vL7bffzo7t21m9ejUPPvggqampx2zz0mmXsqKkhEcffYSysjLeffdd3nrrrdj55toEOOmkfLZt20ZJSQk1NTVxXZNsCigRaTepqanMnz+fqVOnMnXqVObPn3/cD9p4NDQ08LWLL+JrF1/E7OuupaSkhLvv/gPTp8+IvaZXrwL+8tBDFBcv4dJpl3DXnb/l+//6fWbMnNnkvSZPLqJv375069YNgJEjR5EeCLR4eC+etrt1684f/ngPc+c+zKXTLuHll1/iiiuujF2fmprK/Q/8mbpgHTNnzuBXt93G7OtnEwgEjtlm3379uG/Of/HuO+8w7ZJv8bdnn+WWn90SO99cmwBTpkzhK+efz4033sBbb74Z1zXJZtjNDWSKiCRZKBTCMIxWh5Oc2BRQIiLiSRriE5E2d8cdd2AYxnF/afsN+Tz1oERExJPUgxIREU9SQImIiCcpoERExJMUUCIi4kkKKBER8SQFlIiIeJICSkREPEkBJSIinqSAEhERT1JAiYiIJymgRETEkxRQIiLiSQooERHxpP8HRD0aACVCyDwAAAAASUVORK5CYII="},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/graphics-primitives-069da2917a0f9226163992fa997d7064.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/checkbox-7b117add24c72bf0c30d9ae546f39718.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/stepper-6ec5c425af780ae34209e38d2ae8821a.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-labels-bc80dada33a6a5f1a61854ef21caf76e.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/card-menu-db530edd23afd919e8bb15708a24c76b.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/graphics-turtle-bf00fb61c0569a86ca32908a60485b91.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-step-after-72cc87c6a29c712eb6728e9d6bd626ca.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/toolbar-routing-84cf0d9860b9d575f5703ddf0e001bf7.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-area-stacked-5624332d0398dd3417cb40e6fd83272c.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-groups-transpose-7a36b34fbae40cd7d645e149db067bf2.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/markdown-3164a3fca5f8ccd5e61dbb00656dc796.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-polar-e54d13fed4e4ea004992a91a9e4644df.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-polygon-cef10aff7abe01503bac3e360a6ece1c.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATYAAADECAYAAAAVkQ0PAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDExOjIyOjI3IEFNIFBEVN1Kc0cAAB1/SURBVHic7d15fExX4wbwZyaLxjZECEXpa6lSbWZCMpNFxFKUoJZWaCsJlYiltqJ+fa2vPbEnaSmq1aKUohWhraXIQqUoktKXtyhJKosk1mTO748kVyaTZSaLxPV8P5/5xJx7z7ln7sSTc++dOVeRmZkpQEQkI8rK7gARUXljsBGR7DDYiEh2GGxEJDsMNiKSHQYbEckOg42IZIfBRkSyw2AjItlhsBGR7DDYiEh2LMvagBD8qikRlR+FQlHmNkoVbEWFGUOOiEojf5jlz5HShpxZwZZ/g9bW1rC0tCyXdCUiyiOEQFZWFh4+fChljrk5Y/I5trwNCCFgbW0NKysrhhoRlTuFQgErKytYW1sb5I45zLp4IISAEAKWlmU+NUdEVCxLS0spc8xlUrBJDeduhCM1IqpoCoUiJ3tKMWoz61BUmNk4EVFZlDZ3SnUoSkT0JFTYoWj+k3cMNiJ6kgrmjqn5Y/Y3DxhsRPSklDZv+JUqIpId866KEhFVkgq5KprbtJldISIqqwr6HBsR0dOEwUZEssNgIyLZYbARkeww2IhIdhhsRCQ7DDYikh0GGxHJzhMPtmvXrsFRo8bXX39lUB4aEgJHjRqpqanF1r9w4QIcNWr8+OOPAAA3VxcsXrTI5O3fuHEDjho1li9bJpX98MP3Rn1av/4zOGrUuHDhgsltF9a/ghbMnw83VxcAwPnff4ejRo1t27aatQ0iKt4zN2Jr3LgxmjZtitjY01LZr6d+BQCcOnlSKvstNhYqlQpt2rQxuW1zv3pmaWWV85MzEhOVqyobbPHx8fDz9YGriw5DvYfg5MmYEuukpqZi+rRpcHdzRdcunli+fBmysrKM1tPqdIiLi8O9e/cAAKdOnUT16tVx+vRp6PV66PV6nD17Fk5OzlAqlYiLuwg/Xx/otFr06+uFPXt2S225ubpgzuzZeGfYUPj6DDfa1o0b1zHCzw9uri74cMoUPHj4QFpmlRtseT+JqHxUWrDdzbyL27dvS4+8kAGAjIwMjB0TCL1ej1mzZ6Np06aYOGECEhISim1zxoyPcPz4MUz58EN4ew/F5i+/xLq1a43W02p1yM7Oxrlz53Dz5k3cuHEDw318kJ6ejvj4eFy6dAkZGRnQ6nRIT0/H2DFjkJ6ejnnz5qFt23aYM3s2YmIeB+3+/eFwdtbC12+EcZ8+moGLFy9g7LjxePHFF3EgIkJaljdS44iNqHxV2v+osLBQhIWFFrrs2C+/IDk5GZ99th7NmjeHp2cXdHJ3R/i+fXBydi60TmJiIqKjojBixEj069cfABD7Wyx27/4OowMDDdZ16tgRlpaWiI09jYRbt2BtbY1hw97Btq1bcTImBtWeqwYA0Om0OPbLL0hJScH8BQvh7OyMTh4eOHHiOHbv/g5OTk4AAHd3d4wbPx4ADM7JJSQk4Pffz8HHxxdDhgwBAJw5ewbnf/8dAEdsRBWl0oJt4MBB6OzpKT3/4fu92L9/PwAgITFnZDZgwJuwsbEBADx69LDYEVtSYiIAoFnzZlJZ82bNEBUZCb1eD6Xy8eC0eo0aaN/+VfwWG4u///4bao0GNjY2cNZqcerUSdSoURPNmjeHvX1DJCbltNs8t11ra2s0bNgIifn6Uq+eXaF9Sk5ONupT06ZNpWDjiI2oYlTa/6jmLzaHi4uL9Py32Fjp33Z2OUERFByMli1bAQCys7OhUqlw8+bNQtuzq18fAHDlyhWp7MqVK7CzszMItTxanRafb9yImleu4J133wUA6HQ6LFq4EDY2NujevTsAoEH9Bjlt/fcK7O0b4sGDB7h582+0bOle4mu0tbU17tN/H/+7Zs2aGDFiJP714r9KbIuITFclhwru7p2gUqmwYf16DHvnXVz76y+sXfspFi1egkaNGhVax97eHs7Ozti6ZQsa2jdE0j9JiI6OxogRIwtdX6fVISw0FPfu3YNO5yKV3bt3D3fv3oVWpwMAuLm7o06dOli6dAlGjnwfhw79jMzMTPTt26/E12Fvb49XXmmPrVu2ws7ODklJSbh48YIUtAkJCdizZzdeatMGzZo3L8WeIqLCVMmrorVr18bqNSGwsLDAnNmzsXfvXowbNx5dunQptt6ChYvg6uaGlStXYMf27Xjn3Xcxyt+/0HVfbtsWKpUK9vb2aNGiBQDAtl49tG7dGpaWlnB07AAAqFWrFkJCQ1G7dm3MnTsXcXHxmDlrFpy1WpNey4KFC/Dyy20QFhqKv2/cgJeXl7QsOzsbDx4+5AzFROVMkZmZWez/qvx3idHrs5GdrZcOsYiIKlJycjIsLJRQKi2gUCikR0mq5IiNiKgsGGxEJDsMNiKSHQYbEckOg42IZIfBRkSyw2AjItlhsBGR7DDYiEh2GGxEJDsMNiKSHQYbEckOg42IZIfBRkSyw2AjItlhsBGR7DDYiEh2GGxEJDsMNiKSHQYbEckOg42IZIfBRkSyw2AjItmp9GBbt3YtHDVqHD50qNzbDgpaCj8/33JvtyIJIbB69Sr06tkDHp3ccf369cruUpUSGhIC7yFvF7vOX3/9hS6enbFjx44n1Cuqaio92ML3h8Pa2hrh4fsquytVwrFjv+DzjRvx9ttD8J/589GkSZPK7lKl8ejkXqpwqlatGpo0aYI6depUQK/oaWBZmRs/f/48/nf1KiZNnow1q9cgIyMDNWvWrMwuVbrr166jtkoFH9+na6RZldjb2+OLLzdXdjeoElXqiC08fB9eeaU9Bg9+C1ZWlvj5558MlmdnZ8NRo8bBgwcwbdpUuLu5wtOzM4KDgpCVlWWw7qVLlxA4OgBuri7o8Xp37Nq5s8TtR0dHw1GjxsWLF+Ez/D3otFp49emN73btMlo3JiYGfn6+cHXR4fXu3bB40SLczcwEANxJS0PHDo44ePCAtH7y7dtw1Kgxd84cg3YGDHgTy5ctK7Q/Awa8iaCgpbiTlgZHjRr9+npJy27cuI4Pp0yBZ2cPeHRyx6SJE/C/q1eN9tX3e/dizJhAaJ2dcOBARJGvfceOHRgw4E3otM7o6+WFbdu2Giy/f/8+lgUHo2eP1+HqosPw997D8ePHDdbx8/PF6tWrEBwUBI9O7vD07IyQkDXIzMzErFkz4dHJHd27dcXqVasghDDen74+cHXRoV9fL6xcuQIPHz4EAPx66hQcNWpkZGRg4YL5cNSoER0dbVA/MvIEBg8aCJ3WGYMHDcQvvxw12hd5pzfMeZ+PHDmCod5DoNNqMXjQQJw7dw5+fr4IDQkpcl9S1VNpwabX63EgIgKv93gd1tbW8PT0RPi+wg9H16xeDZ1Wh6++3oKJEydix47t+GLTJmn5rVu3MHKEH6BQYMHChZg6bTp27dqJqMhIk/oStHQp/AMCsGXrVnTt1g3z5s3Fmd9+k5bHxMRgTOBovPjiiwgKDsb4DybgxInjCAwcDb1ej9oqFV599TVEnni8vajoqJyfUVEG/fzf1atwc3crtB+rV6/BwIGDAADf7tyF0LAwADkh6ePjg5SUFMyaNRtz5/0H9+7dg4/PcCQk3DJoY8WK5dA6a7Hx803o2NGp0O2E79uHpUsWY8CAAfh07ToMHToUK1eswP7wcAA55/kmfPABfvrpRwSOGYPg4GVo164dJnwwHkePHjFoa++ePbCyssIXX26G/yh/bFi/HsOGeqPFv1rgiy++RGDgGHzxxSaDUw3R0dEYOyYQrVq3RnDwMvj6jcAP33+Pj/9vBgCg3Suv4NudOaHjPXQovt25C6+99ppU/5/bt7Fu3TqM8vfH4iVLoFLVwdQPpxrti4JKep+PHzuGKZMn4ZVX2mPZ8mXwHjoUM//9MRITEoptl6qgzMxMUdwjIyNDpKenizt37ojU1BRx+/ZtUR5OnDguHDVqcevWLSGEEMeOHRMdHDUiMTFRWicrK0to1A4iNCTEoO7cObPFsKHe0vMFC+aLN/v3E48ePZLK0tPTRefOHsLX16fIPkRFRQmN2kFER0dLZXq9XvTr6yWWLQuWyry9h4jp06YZ1L1+/Zpw6thBhO/bJ4QQYuPGDaJXzx7S8pn//lhMnzZNdHDUiKtXrwohhNj57bfC3c3VoJ8FffXVZtGtW1eDsuCgINH7jV7iwYMHUtmjR4/EgDf7i3nz5gohHu+rTz4JK7LtPPPmzRV+vr4GZadP/yq9F4cPHxYdHDXi8uXLBuvMnTNb9O/XV3ru6+sj3n9/pME6w4Z6ixF+fgZlowP8xdy5c6Tn3t5DxMKFC4y2r1E7iMuXLkllndzdxPbt2w3WC1mzRjg7dRRJSUlSWWpqqujYwVHs2rlTCPF4Xxz6+WchhOnv89tvDRYzPppusL2YmGihUTuIkDVrBD15t2/fFqmpKeLOnTsiPT1dZGRkFJtXeY9KG7Ht3bMHbdu2Rd26dfHw4UOoHRxQrVq1QkdtrV96yeD5C82aITk5RXp+6uRJdOvWHZaWj08Z1qxZEzqt1qS+vJSvfYVCgRdeeAEpyckAgJSUFMTHxcGrb1+DOo0bN4FarUFkVM4ozd3NHQkJCbhy5QqAnFFJnz590KZNG8TkHkZFRUVCp9MZ9NMUkZEn0KNHT1hbW0tllpaW6NXrDaNRaevWrUtsz8FBjbNnz2D1qlWIj4uDXq+HWq2Bvb29tL22bduhRYsWBvX6eHnhr7/+wt9//y2VtWrVymCdWrVqoWGjhgZlKlUdpKamAgBSU1MRHxeH3r37GKyjVmtQp04dxOYbQRWladOmsLOzy9e+Cvb29kjOfc+KUtz7nJqaikuXLqF3Hy+DOh07OsHW1rbEPlHVUikXDx48eICIiJzzPzqts8GylStX4L3hww3KLJSG+atUKCGEXnqelpaGenb1jLZT19YWt0w4jFAWaF+hVEKfe04oJSUnQBs0qG9Uz96+gbS8RcuWaNSoEaIiI6HX65GWlgbHDh2g07kgOjoaAwcNQkxMDCZPnlJifwpKSUlB/QYNjMob5Nu+1HcoSmyvT58+yMrKwjffbMOmTZ9DpVKhd+8+GB0YCBsbG6SkpKBBYdtrYC/15/nnn8/ZnqLk7QEACuxPn+HvGe13vV6P1NQUo6oFFfaHQalUQp/vd6Iwxb3PeaFoX8jrrlfP+HeLqrZKCbZDuSd1g5ctN/iliYmJRmhICK5evYrmzZub3J5KpUJiYqJR+T9JSWXua926dQEASUlJaNnScHSSlJSE+vUfB56buzsiI09AQMDBwQHPPfccdC46fPPNNpw7exYZGRlwcXUtVR+SkoxfX1JSUqk/0tC/f3/0798fd9LScPz4cSxZugRZWVmYOm0a6tati7iLF43q5O3PsnyMQqVSAQCmT/8IGo3GaHndShod1apVCwCM/lAAkEab9PSolEPR8PB96NjRCZ07d0b79u2lh6+vH2zr1SvyIkJROnTogB8PHpSuqgE5o7hIEy8eFKdu3bpo3bo1vt+716D8xo0bOH36NLRanVTm7t4Jv/76K44cOQKdzgUA8Oqrr0Gv12PdunVo27ZdqQ5rnLVaHDxwwOD1ZWVlYX94OLQ6XTE1C3fgQIR0CFtbpUKvN96Ah4cH4uJywkzrrMX58+elw+o8e7/fi6ZNm6Jx48ZmbzOPra0tWrRsifg/4tGiZUvp8Xzjxrj8558Gh9sKhcLo6ndFqV+/Pho3biIdSeQ5d+4cksrhDyQ9WU98xJaamoqoyEhMmz7daJlSqUS3rt0QHr4PowMDTW5zuI8vwsPDMW7cWAwbNgxZWVnYsH59uX24dcKEiRg7dgxsqldH165dkZycjHVr1+Kll9rg9R49pPU6duwIIOec35QpHwIALCws0NHJCYcPHcLo0aa/pvz8fP0QsX8/xgSOxrBh70ChVGLb1i34559/8P77o8xu78yZM9gfHo6JkyajaZMmuHDhAg5ERGDkyPcBAJ08PKDWaDBu7BiM8vdHg/oNcPToUez+7jsEBRf+URVzTJw4EePHjQMAdOnSFQ8e3MeWr7/GpcuX8e2Ob4HczzK+0KwZvtu1E7a2daF11qJ27mivogQGBuLjj/8P1WtUh7ubO24lJOCLLzbBloeiT50nPmI7eOAAhBDo0qVroct79OyBGzdu4MyZMya3+fzzz2PdZ+sBAB9Nn45FCxdi0OC34ObmXi59dtZqERIahv/++SemTJ6MlStWQKvTITQsDBYWFtJ61tbWcHJyhp2dncFJ9bzRm7t76fpjW68ePt+0CXXq1MXs2bMw898fo1q15/D555vQsGHDkhsoYMKEiejbrx9CQ9bA338Utm3bCv+AAPj6+QHI+QOzatVqeHp2QciaNZg0aSJ+P/87VqxYCQ8Pj1K9hvx0OheEhIbh6pWrmDb1Q8yaORMqVR1s3vyVQYjMm/cf2NjYYNbMWTh9+nSZt1uSnr164T/zFyDyxAmMHTsGGzasx4wZM2BXr57p5xKpSlBkZmaK4lYQQkgPvT4b2dl6XiUi2bp79y6qV68uPdfr9ejerSveH+WPIUOGVGLPnk3JycmwsFBCqbSAQqGQHiWp1K9UEVUln3wShu/37sWIESPRomVLpKWlYvv27Xj06BG6di38CIOqJgYbUS4/vxGwsrLCxo0bcOvWLdSoUQNqtRrrN2w0uPpNVR8PRYmoyirtoWilT1tERFTeGGxEJDsMNiKSHQYbEckOg60Ypsyv/7Rs7/ChQ3DUqJGdnQ0A2B8ejs4enRAfFyetEx8fjxF+fnB10WHhgvlSeUREBAYNHABXFx327fuhQvpXnlasWI6OHRwruxtUiRhsFaC0c/U/SbVVKjRp0gTP2dhIZfPmzsG9+/ewYOEieA8dBiBnduBZM/+NNi+/jEWLF8PFxfwv8VeU+Ph4OGrUuJpvJmEg52tsBWfyoGcLP8f2jHJxcYGLi4tB2fXr1xEwOtDga1O3EhLw6NEj+Pj4GM1uUlVZKC2gVFqUvCLJVqX9Wcs/53337t2wdMli3L1713idIu4zADyey/7MmTPwHvI2dFpnvPvOMPx5+TKOHDmCwYMGwkWnxfD33kN8fLxRvWvXrmHU+yOh0zqj9xu9sHHDBqO5+Yvrt7lz9RdXt6CoyEg4atT48/Jlg/LoqCg4atT4448/iuzjnTt3MHv2LHTx7Ax3N1csWbzYaJaMvH2Qnp6OiIgI6d9LlyyGo0aNfft+wIL586VD47ffeguOGjUScue3u3//PoKDgtCzx+vo5O6GAH9/xMY+/j5ncfdgMLVucfe6+PTTTzDUO+crTgMHvGlwmK20UMLCgiO2Z1mlvPvR0dEYEzgaLzRrhqDgYIwbNw4//fQTZnz0kbROSfcZyG/5smBMmz4d6zdshBAC48ePw/r1n+HfM2dhw8aNsLKywvRpU41Ca/LkSejj5YVt32zHxImTsHnzl1ixYnmx/S7tXP0l1S3IydkZ9evXN5pGJyIiAq1atSpyply9Xo8xgaPxW2wsJk+ZgiVLlyLtTho++SSsyNfl7uZm1G8Pj84ICAjAgoWLAADBwcvw7c5dsLOzgxACH+Te/2Ds2HFYsmQp6tevj9EBAdLUR3kK3oPBnLrF3evi7beHGPUtb0ICSwtLg8kJ6BlUGfc8KOweAr/FxooA/1EiNTW1yHUK3mcgby77U6dOSescPXpEaNQOIiYm2qBtjdpBJCQkGNT76qvNBu3//PNPooOjRnqNIWvWiCFvv2XQ79LO1W9K3YLbW7Fiuejr1Ud6/vDhQ9HZo5PYvPlLUZQDByJExw6O4tq1awbl/qNGCY3aQWRlZRnsgzt37hTb77i4OKFRO4grV65IZYcPHxY6rbO4efOm0TamfjhFCFH0PRjMqVvSvS4K65sQQqz/7DPRubNHYbuHnjJPzT0P8u4h0K9fP4Py1xwcEPbJp1CpVCbfZyBP/imC8mZCbdiwkVSmyp3xteBMqAWn4HFzc4dSqcSvv54y6ndZ5uovbd0+vfvg+vXrOH/+PADgxIkTyMzMRK+evYrc1qmTJ/FK+/ZGc9F1f717kXXMFRUZCY3G0WjKpC5du+B0bKxBWcGRpVl1S7jXRVGUFkqj6eTp2fLELx7kTb1sV9+uxHVKus9AHlPnyhIFDkVr1zacuNDKygrVa9RAWmpakX0qzVz9pa3bomVLvPTSSzgQEYF27drhQMR+uLi4FjvxYWpaGuwKWV6e3+9NSUlBZOQJkz5SUfAeDObULeleF0XhoSg98WDLmy//n6R/irzKZs59BsoiMTFRGuEBQGZmJjLS0wud078sc/WXpW7vPn3w1ebN8A8IwNGjRzFr9pwi1wWAOiqVwYWSPOU5vbWqjgqNGzfG8uUrnmhdU7V/9VUMG/ZOhbVPVd8TH6/b2tqiZctW2Lt3j0H56dOnMTrAH2lpaWbdZ6AsIvbvN3ied6+FwsKnLHP1m1O3oF49eyEpKQmrVq2EpaUlOnXqVOxrcuzQAefPnzf6bFfE/qLvCm8uJydnJCYmwqZ6dYPXk5qWhgdFXOUtj7oF5Y3Us7IeGZS/9tprGOLtbd6LIlmplM+xTZg4AePHjYOVtTV69OiBxMREhIWGolWrVtLoxtT7DJTF0aNHoLRQQq3W4I/4eISFhcLbe2iRh3plmavf1LoF2darB51Oh+3ffINBgwcXG4IA0LVrN2xqvQnjx43FKP8A1Ktniz279+De/Xul3U1GPD090b59ewT4j4LfiJFo1KgRLl64gHXr1mLYsHfQtm3bCqlbUKNGjWBtbY1169ahZ8+e8PTsAiDng8YHDx7E9h07YG9v/tTp9PSrlDOsOp0LVq9eg6tXrmDypElYvWoVPDp3xqLFS6R1TL3PQFksWrwEZ8+exYQPxmPLlq/h5zcCEyZOLLbfpZ2r39S6henV6w0AgJeXV7HrATmfug8NC4ODgwOCli7B1KlTYWtbF2PHjjNll5hEqVRi1eo18PTsgrWffoLx48Zi9+7vMHHS5BJvwlOWugXVqlULi5csQXxcHGZ8NEO6OFSjRk3UrFkTVlbF/xEg+XomJ5qMjo5G4OgAHD5y1OAcW1UVFhqKgz8exM7cz5oRPSt4zwMZunTpEv78809s2fI1Jk8x/w7yRM8qBlsVtiw4CH/88QcGv/UWvLz6llyBiAA8o4eiRPR04D0PiIhyMdiISHYYbEQkOww2IpIdBhsRyQ6DjYhkh8FGRLLDYCMi2WGwEZHsMNiISHYYbEQkOww2IpIdBhsRyQ6DjYhkh8FGRLLDYCMi2WGwEZHsMNiISHYYbEQkOww2IpIdBhsRyQ6DjYhkh8FGRLLDYCMi2WGwEZHsMNiISHYYbEQkOww2IpIdBhsRyQ6DjYhkh8FGRLLDYCMi2WGwEZHsMNiISHYYbEQkOww2IpIdBhsRyQ6DjYhkh8FGRLLDYCMi2WGwEZHsMNiISHYYbEQkOww2IpIdBhsRyQ6DjYhkh8FGRLLDYCMi2WGwEZHsMNiISHYYbEQkOww2IpIdBhsRyQ6DjYhkh8FGRLLDYCMi2WGwEZHsMNiISHYYbEQkOww2IpIdBhsRyQ6DjYhkh8FGRLLDYCMi2WGwEZHsMNiISHYYbEQkOww2IpIdBhsRyQ6DjYhkh8FGRLLDYCMi2WGwEZHsMNiISHYYbEQkO2YGm6JiekFEVCTzc8ekYFMoDBsWQpi9ISIicxTMmYI5VJxSHYrev3+/NNWIiExWlpwxO9gUCgUyMzNx9+5djtyIqNwJIXD37l1kZmaaNUrLT5GZmVliOgkhIISAXq+HXq9HdnY29NnZyNbrpWWAAHOOiEojJ78UUChyHhZKJZQWFrCwsIBSqYRSqZSWmcLSvI3nNKxUKCCUSlgA0EvBlofpRkTmeBxWefmiUCpzfpoRZvmZHGwKhQIQImdDeaGmUEBRMNiEYLQRkUlyBmqGwZY/3BQKBRQw78IBYGKwKRSKnPDK3YhSqYTIF2o810ZE5UGRb5QmjdZyQ82ccDP7UBTISVmRG3ZFhxrDjoiKU3hQSaGW86TiD0VF7qEo8h2WcrRGROVJUcgIrUIORQs2LgVcgQ0y5IioNIoKrtJ+3MOsYCtsY/nDrLSdICLKUx45UqpgK+9OEBGVJ87uQUSyw2AjItlhsBGR7DDYiEh2GGxEJDsMNiKSnf8HHaM141YBmUkAAAAASUVORK5CYII="},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-range-38b09db44df660cf127c051bee921b70.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALsAAABVCAYAAAAR3pWYAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjE2OjI0IFBNIFBEVOXz3wAAACAASURBVHic7Z15XE3pH8ffFZWKUDJTkq3G2FuQpRJhGDszyDKya1dm7GshlWW0h2RnxhJZhsZShsaS8RuyZCxpkyKl4rbd3x/lTLdNKrN136/XfdFzvs9zzrn3c899znO+n+eREYvFYqRIqQXI/t0HIEXKX4VU7FJqDVKxS6k1SMUupdYgFbuUWoNU7FJqDVKxS6k1SMUupdYgFbuUWoNU7FIkyMrK4uDBg3/3YXwUpGKXIkFmZiaHDv74dx/GR6HGxS4SiVjv6YmRoQEbN2744Pq///47zk5z6dfXHOPu3Rg2dAjrPT1JT0+v6UOVUoy0tDTc3NYyeNAXxMTEMHTIl2z+/nuys7Ik4nJzc/H18WHwoEH0MDZm4gRLLl6MeG/7+fn5+Pv7MXjQIEx692LWrJncvXu3ynFVoUbFHh0djeX4cUREhFO/fv0Prn/+/DmmTbXiwoULvHr1itzcXBISEti7dw/fTJ5EhlTwEuzdu4f+/S2q3c6bN2+YNtWKS7/8wqTJkwEY89VXHDt2FBsbawoKCoRYV1cX9u/fx7Tp01jr5kbrNm1wmjuXK7/+WuE+1qx25cD+/VhZWeG6eg2KiorMmjmDx48fVymuSohrkKlWVuLVrq7i7Oxs8bChQ8QbNqz/oPpDvhwsNtDvIh465EvxlStXxPHx8eKQkCPibl2NxAb6XcRbt26pycP917Nnz26xhUW/ardz5MgRcc8exuKXL1+Knz17Jh439muxWCwW3751S2yg30X8a2SkWCwWi1NSUsSGBvris2d/lqg/z9lZbGdrU277Dx7EiA0N9MW/XLwolOXl5Yktx48XfzvP+YPjqkqd6n9d/mTpsmW0aNGiSnVzc3NJTEwEwMKiP926dQNAS0uL/Px8EuIT0NbWBsBr82aCg7fTrFkzVqxciYeHB7FPntC6dWvs7R0w6tpVaPfu3bv4+fnyv5s3yc/PR0enBePHj2fI0KEA5OTk0MO4OwAenp6EnQnj4sUIGjRowMyZs+hjbo7b2rVcuvQL9evXx9JyAhMnTarwXK5evYq/ny/3799HSVmZAf37Y2Nrh5KSkmSMvx/3791DWVmZfv0ssLOzQ0lZWYiJiorCx9uLu3fvoaKiTD8LC5ycnJGXl2fmjOlERUUBYGigT+cuXQgK2v7eemWRkZ6OvIICDRs25Pnz50J5+w4dCAv7GWUVFQAKCgqYPWcO3bsbS9TXaqbFjaJjKYvz586jqalJr969hTI5OTnGjBmDh4c7ubm51K1bt9JxVaVGuzFVFTpA3bp1BTEfOnSQ/fv2CeIfNWo0dvb2DBgwUKJORkYGjg4OvEpLIz8/n+joaGxsrLl/7x4Ajx49En6e69atS+PGaty7d5fly5dx5PDhUsfg7eXFhQvnEYlEJCcns3q1K/b2doSHh/P27VuSk5PZuHEDly5dKvc8rly5go31HJrr6OC5fj12dnacPXuWRQsXCjFXr17FxnoOLVu2xHP9euwdHLl8+RLW1nOELkNCQjy2Nta0bNUKf39/5s9fwKVffsHdfR0Aq1xcGT16TOH7dfgIa9asrVS9sujRsydZmZm4uqziVVqaxLbGamooKCgAoKGhwfTpM1Au9oUsKCjg18hI2rb9vNz27927y+ft2pUq79CxIyKRSOiiVDauqtTolb26LF6yhHnOzmRmZuLh4Y6HhzvNmzenn4UF33wzpdR9QEZGBgsXLWbMmDHExcUxwXI8WVlZBAcHs9bNjQcPHmDUtSsK8gqsXrMGeXl55jk7c/78OX788QdGjhol0Z6amhr7D/zAkydPmDjBkvz8fORkZbkQHs6LFy8YO/ZrsrOy+DUykl69epV5Dt9/vwkLi/6sWLFSKNNproO/vx/p6emoqqqyadNGLCz6s3TpMiFGX78Lo0aO5Mzp03wxaBC3fr9FXl4eCxcuok6dwo+pdZs25OTkAPDJJ5/QomULGqupSVxk3levLHR1dfHwXM86NzdCQkIACN6+nS8GDeKTTz6p8DPbuXMHsbFPcffwLDfm1at0dPV0S5U3bty4aPurD4qrKv+ooceuXbtx6PAR5syxpl27dsjJyfH06VO2BwXx1ZjREj+xAPLyCowqEqy2tja9i37+bt78DYCBAweyebMXzvPmERV1nYMHDxITEwPA69evS+3fon9/5OXl0dPTEz5k4x49UFBQQFNTk9atWgHlv+lpaWncv3eP4cOHS5R37tIFP/8AVFVVhZihw4ZJxGhpNUNf34DIXyOBwi6EnJwcCxcs4Nq1q+Tk5NCyZUs+++yzCt/DqtYzMzPj+IkTrFy5CoADB/YzYvgwgoO3l1vnl4sX8fH2Zv6CBTRv3rzcODFixGUY4mRkZIr+/bC4qvKPEjuAuro602fMYNfuPZw9d55vv5uPvLwCKSkpBPj7ScQ2aaKOrOyfp9C0SKDvhikTEhKYPGkiXw4ehK2NDW5r15CeXijUst5UBXkF4f/v3mA5OTmhTLbo/2LKdjKmFXUB1Juol3t+72I0NJqU2ta0qYawXVtbG18/f7LfZGNna4uZqSnffTuPhISEctuuTj0AWVlZunbrhp6eHidOnmKukxPeXl5ERl4uFXv79i0WLJjPpEmTGTFiRIXtNlRVJe3ly1Ll7861QQPVD4qrKv8YsV+/do3hw4YyfNhQ4uLiAKhfvz7jxo2ja7fCG853V+V3JCcnk5ubK/z99OlTAFRVC9+UZUuXEh0dTfv27dkWFERExMVSXZeapGHDhgCkpqSWG9OoUSMAUlJSSm1LSUmhUVEbAAYGBvj4+BJx8Re+37yZ+IQE5s51fO9xfGi9R48eCfdH75CVlWXs2HFoa2tz87ebEttiY2NxsLenb9++2Nnbv/d4dPX0iI6OLnWBuRMdjby8Ai1btvyguKryl4q9uDBLotOiBUlJScTHx7Ns6RKioqKIffKEQ4cOcv3aNQCaNdOWqJOXl0dgYAAFBQVEXb9ORHg4AJ07dwHgaVyh+PtZWNCliz6ycnLvHQ+uDo0bN6ZNG11CQ49JlN+4cYM5s2eRnp5Oo0aN0NPT43hoqERMQkICN27cwNi4BwC3bt0i5MgRAOTl5enWrRuW4y15+Mcfwvsogwx5eXkS7VSmXkl8fLyxt7Mt1VZiYiLPnj3j008/FcpSU1OxtbGmQ8eOLF+xUvgFLEnxewRzc3OePXtG+IULQllBQQE//HCAXr16CaNElY2rKn/ZDeryZUu5cOECBw8dpkmT0j/hTZo0wcpqKlu3buH3339n5ozpEtuVlJSwmjpVokxFRYXDhw4RvH27MIpRp04drKysAGjfrj0XL0bg6+ND+IULJCQklNl9qUkc5zpib2dHXXl5Bg4cyPPnz/Hz9UVXV1f4xXF0nIutrQ31lJTo168fL1++ZEtgIJ991pYBAwtHnFJTU1i92pXUF6l0NerKs+RkAgMD6G5sLAy/NdfRISM9nYAAf4y7G9O5S5dK1SvJVKupTJ8+DUvL8fTu1ZuYmBj8/f04fOgQn2pqCseUlZWFna0NmZmZDPpiEBcjJJ+cmpqZISsry7FjR3FZtYr1GzZgampG27afM3jwl6xYsZwZiQloaTXjaEgIjx8/ZvmKFUL9ysZVlb9M7MrKKqioqFQ4TjrH2po2um348ccfeRATQ3Z2No0bN8bQyIjp02eUGtpUUlJinbsH69zcePz4UeE4u4MDn7VtC8CSpUtZs9qVq1evEhsbS/8BA2jWrBkbN3x4GkNl6dGjJ15e3vj7++Hs5ISSkhL9LCywt3cQYrobG+Pj64e/ny+nTp5EWVmZvv36YWdnL9wjmJv3ZcnSpezetYttW7eiUr8+fc3NsbX7s9vQq1cv5syx5sCB/USER7Bn795K1StJ+w4d2LotiC2BgezYEQxA6LFj9OtnwazZs4XnAzduRAldycWLF5Vq5+Ivl1BSUkJRURElJSWU6v35XGHZ8uX4+/uxZ/duMjIy+Pzzz/HzD6BNG8nRl8rGVQUZ8ce+1H0E3j1U0tDQ4NRPp//uw/lPkZycjKODPfv2H/i7D6XG+cfcoEr5Z6CiosLoMV/93YfxUZCKXYoEysrKjBkz5u8+jI/Cv7IbI0VKVZBe2aXUGqRil1JrkIq9lhEeHs6TJ0/+7sP4W5CKvZYREX6BJzXh+vkXUiNir6ovsSRdjQwxNNAneHvpTDuvzZsxNNCnr3mfGjji2se5c2eZajWFkJAQnJ2dmD1rFteuXS0VFxcXx4L58zE370PPHsZMtZoipGtUliu//oqhgX6pp+AAu3buxNBAv9Rr4YIFVT63ylIjT1BdXV04f+4cDo6OqKmpc/78OZzmzsXb24fuxsbvb0BKmZiZmmBn71DtocAjhw/j6urCsGHDiYmJwdTUFJFIhPWcOWzYuBETE1OgMBFtyjeT0dTUxNl5HoqKioSGHsPW1oadu3ajp6f33n2JRCJWr15d7vbExETatNHFwVEyMU1dvfxM0Zqi2mJPTU3lxPHjuHt40LdvPwD69OlDdlY2e/bslor9H8CWLYFMmjwZR8e5yMrKYGJiSh9zc+ztbNkeFCSI/adTp1BQUGRb0HYh6apv376MGjmCY8eOMm/et+/dV4C/P3JysgwZOpSkEpmUAElJSbTRbUPPnj1r9iQrQbW7MRX5EqvrLHkfeXl5bN2yhZEjhmPcvRtfDBzA8uXLePbsmRDzzeTJGBro4+vjQ2BAABb9+mJmaoKH+zpycnLw8fGmv0U/zPuYsWrlSt6+fVvhPuPj4/l23jzM+5hhYtIbZ6e5xMfHS8QkJPwZY2ZqgtNcR2JL3BQmJSXx3bfzMDXpjalJbxwc7IU026jr1zE00CczM5O1a1ZjaKDPlStX3luvPNLT02mq0bRUuds6d9Zv2Cj8PWnyZE6eOiWRXSgrK4uioiIyvN85ERMTw549u1m0eLGEN6A4iUmJQhZl8VkL/gqqLfaq+hJrApdVK/Hz8yU+Ph5tbW0yMzM5HhqK9ZzZvHnzRiL255/D2LIlkKysLDIzM9m/fz+zZs4gePt2MjOzyMjI4OjRELYEBpa7v5cvXmA15RtevEhl2fLluLi48vLlS2ZMn0ZmZqYQM2XKFNLS0li+fAWrXFx58+YNU6Z8Q3Jy4ZewoKAAGxtrXrx4ibu7B+7uHuSIRNjb2VJQUED7Dh04dLgwTXe8pSWHDh+hc+fO761XHr1NTAjaHsTly5cp/ghRSUlJyK8vSU5ODvHx8WxYv564uDiGlXBflaSgoABXVxcGDR5M167dyo1LSkrizp07DB82lG5djRg2dIhgBfzYfJSsx8r4EivCy2szXl6bK4zJyckhJycXQyMjxo8fj7l5X2JiYhg/biyxsbFcuXKFPn36CPHp6emEHj+BsrIykyZOIC4ujocPH3Is9DiNGzdm5owZ3L59i8jIy+UaEoKDg1FUVMTPP0AwIRsZGbFg/nzu3r1D167dCA4ORkFeHl8/P+EK2atXL8Z+/RVbtmxhyZKlvHjxgtgnT1jgv1CYRaFd+/bCZECKioq0aNECFRUVWrRoKWR7pqSkVFivPJYsWYr7unU42NtRUFDA+fPnkJWTpXdvEwmnV3HezbigpKyMh+d6dHUrzjo8sH8/iQkJeHl5lxsjEonQ1dWljpwcs2fPoVGjRoT9HIbLqpXk5+cJBvKPRY2L/Z0vcfGSpRX6EquLvLw8a93cEIlEPHz4kLCwM1y/fl3YnlnCY2poaCj4SvX1DYiLi6Nt27bCT6pRVyNu375VYdcrMvIyA7/4QhA6FCZOefv4SMYM/EKiK1CnTh0GDRpMSEjh1VpNTQ1tbW02bdyA1dSpdO/WnQaqqnTv3r3Cc65qvfr16+Pi6oqDoyMDB/QnIyMDZycnWrZqhZeXF02bljZVB+/YSWbma86fO4+z01zc1rljZmZWZvvJyc/w9fVh4aJFQs5+WSgoKAjTfbzDuEcPxAViAvz9GTlyVLlfvpqgRsX+Ib7Eipg5axaWlhMkygIDAti7d49E2fagIIK2BwlTtDVo0EDYVjLlR76YQGVlS/tL5WTlyqxXnLS0NNTVSxtPSsY00dAoVa5RzF8qKyuLf0Agvj7euLq4kJ2dTcdOnZgzZ06FXYCq1nuHuro6I0aMwMTEFF09PeZ/9y3zv/uO4B07S8V27NgRKMzPl5GVYb2nZ7lid1vrhp7eZ5iYmApG9tevXwuvevXqCTMdlMXgwYM5ejSEpKQktLS03nseVaXGvkYf6kusCAV5BerXry/xKmnJunbtKt7eXmRnZeHk7Myx0OOcOHGyWvt9Hw0bNiQ1tbR3tDiNGjUiJeV5qfKUlBTBowqFU2GscnHl/IVwdu/ewydNm2JvZ09ycnKF7X9ovdevX3Pnzp1SljwtLS0mTpzErVu3yM/PBwo/w+I39+8wMDAkISG+zOk4MjMziYgI5+bN3+hjZiq8zpw5TUxMDH3MTDl79iwAb9++5cmTJ8L+3iHzEa/mxamRvVTWl1iRB/VDiY0t9JeqqKgwduw4tLS0CC/yoH4sunfvzpnTZyQ+9Iz0dGxsrIUHNN2NjQk7IxmTl5fHT6dOYdyj0F/67NkzgrZtIz8/H1lZWT5r2xY7ewdyckQSTzdlZCQ9ppWtV5ykpCQmTZxAWNiZUttu3LiBhoaG8Avn4+2Fg719KTFeu3aVpk0/ES44+fn5wg1xvXr1CAzcUuqlU3SfERi4ha5FM7SlpKQwetRIzp8/L9H+saMhaGhoSHhdPwbV7sZU1pf4Pg/qh9KuaOaozMxMhg8birp6E+LiniIvr0BOjqja7ZeF1dRpnD59mtmzZjJp8mTEYjG7du4kISGBzz8vPJ6pVlM5/dNP2FjPYcKEicjIynJg/z5SU1OZMWMmUNgd2bZtKw8f/sGoUaN5KxKxe9dOGjVqRPsOHYT9NdfRIeTIYRo3boRxd+NK1yuOnp4efczNWbF8Obdv3ebUqVMkJz/n+PHjnD9/jiVLlgqxEydNZuaM6UyfNpWRo0ahqtqQn8PCOHnyBCtXuQCFoy4jR4ygYUNVdu7ajZycHIZGRqX2a2RohLqamsQ2bW1tzM374uqyiqTERHRa6BB+4QLHjx/HxdX1o/bXoQbEXllfYmU8qB9Cu3btWLpsOUHbtpKSkopqw4as37ABZyenjyZ2dXV1tgfvYNOmjaxcsYL8/HwMDA1ZsXIVKkXzITZWUyN4xw42bdzEihXLEYvFGBgYEhy8Q7hB1tDQwNfXD29vLxwdHZCRkcHAwJDALVuFdgBcXFxZsXwZy5ctZ+3atfQxN69UvZKsXevGzh07OHXqJCKRiMjIy+jrG+C5fj3m5n2FuE6dOhG4ZSsBAf6s9/QkLy8PXV1d1m/YKDGypaKiXOGNaEWsXrOGAH9/9u7dw6tX6bRq1QoPT0/hgeTHRGreqGW4rFopPEGtbfyj5nqU8vExNeuDjo7O330YfwvSK7uUWoM0n11KrUEqdim1BqnYpdQapGKvxTx48IDLl0tPR/1fRSr2WsyDBzFcvlz+kjn/NWpkNCY7K4uAgADCwsJ4+fIFWlpajB9vyZivPmwata5GhuXmZTdr1oyjx0LL3Cblw4iJiSHA348LRVND6+npMXr0GEaPGSOR6iESifD28mLfvr1MmDiRuXOdSrV18+ZvTCsxu3JxtgUF0aWLPgC9e/Us5TOAwjWhqrMeV2Wp9ji7WCzGzs6Op3FPmWo1Fa1mWly7eg03t8IFrT5U8FLKxtlpLvLyCqx1c6tWO/fv32eq1RTat2+PoaEhiYmJdO3aDXf3dSQmJmLvUDjbcHR0NMuWLiEvL6/CNW1btWzF+vWlZ0WO/DWSQwcPClmir1694s2bN9g7OKCrK+llbdq0tIvqY1Btsd+JjubOnWiCd+wU1u0xNTUjKyuLQ4cOVknsZaX4yv1FmXH/dXbv2kWbNrr4BwTy00+nuHPnDk7Ozqipq+Hr48PMWbNQVFRkw/r1GBoaMdfJiXFjvy63vQaqqmU+jQ0MDKBfv340a9YMKExIg8KpuD+mz6Eiqi329h06EPnrlVLl9ZTqlZv9+D7epfiWR0ZGBp4e7oSHhwtZjzm5Ofj5+qKqqsq58xeAwqSloG3bOHToIG9FIvqY9WHgwIHY2FgD8MMPP9K6TRtevHiBr483v/zyC+np6airq9PH3JxZs2ZXeBxv377Fx9ubsLAzpKdnoKuni42NrYSZ4u3bt/j6+HDmzGlev35Nmza6zJw1S2K1PZFIhI+3N6dP/8Tr169p1aoVDo6OQo66oYG+EHvmzGmmTZuOtY3Ne+uVRXpGOuol1qICsLScwJAhQ4XMxuqsaRsREc79+/dZXmzFwMTERGRkZPjkk08Ez0BV9VFVajRdIDc3l4yMDCLCwzly+DDfza/5uUDEYjFzHR2FFfGysrL4/vtNZdrG/Px8Cdq2DSh8Y48dO8rdu3ckYgoKCpgzZzYP//iDunXr0qp1a57GxrJv717+ePAH/gEB5R6Hg4M9cU+fMnuONU2banD69GnsbG3YFrSdjh07IhaLcXRwIC7uKdY2Nmg00SAiIgJHB3thVQoAd/d1XL50CSfneWhoNOHnsDDs7ew4eOgwWlpaHDp8BCenuSjIy7PWbZ2QF/++emVh0tsEDw939u/bh2K9ekJ53bp1UVNTE/6uTh9629ZtmJqaSazQl5SYiKKiIksWL+LSpUsUFBTQq1dv5i9YUCNZsJWhRsVuYz1HWHXZ2samym6lsjyojo5zmTR5MteuXROEPnHSJOzs7AsX+7WeIxGfnZ3N7l27ATA0MsLTw5O3IhG2RVf1dyQkJPDwjz8AcF29BgsLC2JjY/H0cEcsLnQelWVKjoiI4EZUFPsP/EDr1q2BQlePfF15fv/9f3Ts2JGIiAiioq5LxBj36IFI9JaNxcR+IyqKYcOGM7BoORd9fQN69OgpLCbWokULWrZogby8goQI31evLMZ89RUZrzPw8fEmOzsbgDZtdBnQv7/E6tpV5dfISG7fvsXOnbskyusp1aO5jg6tWrdmxMhRpKamEBgQwIzp09i3/wD1in3xPhY1KvYFCxeRlpbG/27eZHvwdrKzs7GrYHmTqhAVVegzlZWVxdrahjp16tC5c2fM+vThp1OnhLjo6NtCqq+VlRUNVFVpAIwfb4mrq4sQp6amRr169Xjz5g2+vj48eviQ9h06sM7dQ2L59ZJERl6mQ4cOgojfsWjxYomYdu3al4oZMnQoISEhJCYmoqmpSZcu+hw6dJDGao0xMTFFU1OT3iYm730vqlJPRkaGadOmY2k5gYULFnDxYgTrPT3w2vw9a9asrfY8P1u3bsW4R49S+fWjR48pZag2MDBk9KiRHA8N5auvy78vqClqVOytihbFNTQ0RLu5NosWLmT06DFoamp+UDtl3aC+Mzm/M0SrFVtmHBBuhN5R3DitpfXntmbaknFKSkqsXrOW1a4uxD55QkCAP1Bo6La0nFCuxbCyflSNsvyoRXO4pKWloampyYKFC1FTV2Pnjh24r1uHjo4O48aP5+uvx1bYflXrQaHDaMDAATTTboa1tQ3r3NYyb54zx0+crHKuelRUFL/9doNtQUGVim/WrBmdOnXi9u1bf4nYqz3EkZKSwqNHj0qVGxgUjpk/jY394DYr8qCqKBeaFF6+fClhWUt5LukNVVb+08zwvJg/s+Qq2VC4uvNPp8+wc+cu5i9YgKGRETk5OQQHby9zwVuonh81tWgN1Hd9bwUFBWxt7Thx8hShx08w+MsvcV+3TvBulseH1isoKODOnTvCosjvUFJSwtbOnuzsbO7fv1/hPiti65ZADI2MhHH14jx79owXL16UKv+r/KdQA2I/d+4s48eNLWX4vXa10JPZTPvPtUsr60EV5Ygk3OmvX78mq2gGgXbt2wOFPsgff/gBKJyM8+zZnyXaaNu2rTDi8OOPP5Cfn49IJGL/vn0ScTdv/sb4cWOZOMES1YYN+frrsSxc+Kfj6t2MACXp3r07t2/fLvVFd1m1kj17Cu8VjLsbEx0dzeMS/tDQ46Foa2ujpaVFTk4Oe/bsFmYV09TUZPr0GXz66afcu1dsPpgSftRK16N4EzLY2Fiz+ftNpbbduHEDQHBTvY+Sn+WtW7e4evUq06fPKDPe29sLWxtriYeGjx8/5vf//Y9OnTtXap/VpdrdmMGDv2RH8A6mfDOZyZO/QVtbmzt37rBt21aGDx8hdC8+xIMaGBBAYIlRkE8//ZTjJ05iampK69atefjwIZ6eHmzfHkRGRgaNGzcWZuWCwgV4hw0fTsiRI/z8889cvdqXvPx86pewr7Vr1568vDwePXrEqJEjaNGypTAmrK6uLsyDWJI+fczp3LkLtjbWzJw1myZNmhAWdoYTx4+zdVvhz7ipmRn6BgbY2dowc9YsYTTmaEgInkUPYuTl5TkeGsqpkyeLlmFU5uewMJ49eyYxH6JOcx0OHTpISEgI+l26oNOiRaXqFUdGRoaZM2bi6enBy5dpZGVn8SAmhvy8fEJCjjBo8OBKjYGX9Vlu2RJIp06dhMmbSmJpOYGpVlNwdHRg+PARZGa+JsA/gOY6OgwZMvS9+6wJ5FasqN5qqgoKClj0709iUiLHQo9xPDSU5OfPmTxpMja2tsLV9drVayQlJfLV11+jqKhYZltbAgPLnbelfv36WE6YgJycHH3MzUlKSiT5+XPq1KnD6NGj6dSxE9evX0dJSYnJ33wDQM+ePRHliIiPjyc3Nxfj7sZYWVlx5kzhcpJfjx2Huro6/fpZ8ObtG16+eEFSUhIqysr0s7DAdfUaieG44sjIyGDRvz8pKc/54cABQkOPIQMsWbpMcNPLyMjQv/8AUlJS2L9vH6Ghx8jLz2fJ4iWYmP75JTI1NSM6Opo9u3dz7Ogx8vPzWLhokbDaNUDHTp148vgx+w/sRywW06Nnz0rVK0nHjh3Raa7D9evXuHnzJiKRiLciEROK7k/K5WwLCwAAAYdJREFUMj3v37ePFi1b0qNodoSSn+W9e3fZtHEjixcvKffL0qRJEwyNDLl86TI//nCAqKgoTEx6s2b1GompEz8m/zqnUkZGBtevXyMxIZFhw4fToEEDxGIxTnPnEhERzueff87uPXspKCggMjKS+Pg49PUNhOmWd+3cyaZNG5GVleX8hfAKjcr/dU6ePMGdO3cqNTvvf4F/nQdVLBazdu1aXr54QUBgAC10dEhNTeX58+fIyMjwzZQpQOHQ5O5dO7l69SpycnK0bt2a3Nxcof88esyYWi10AF1dPRo2LHti0/8i/7orOxQ+eg7w9+PKlSu8fPkSZRUV2rdrz6RJkyTGid++fcvWrVs4d/YsiYmJ1KlTh1atWjF06DBGjxnz0ecpkfLP4l8pdilSqoL00ial1iAVu5Rag1TsUmoNUrFLqTVIxS6l1iAVu5Rag1TsUmoNUrFLqTVIxS6l1iAVu5Rag1TsUmoNUrFLqTVIxS6l1iAVu5Rag1TsUmoNUrFLqTVIxS6l1vB/qwcRG+Pps0UAAAAASUVORK5CYII="},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-annotation-ad30e4c2b779c452d7ab7d805f037c43.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-plotly-3b71042a87f940cd5002711c65e34e54.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-transpose-d7705a1125bbded7646d335b2bfba02d.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/dropdown-aa5530f33720d6851ade03079d16f40a.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/graphics-spline-76e8a919798c7e38711618ef9b414f78.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/image-dab53361cb560c92baeb4fb3315cab5a.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/markdown-data-34fd56cbb56e79c00a4539f5bfab1e3b.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/toggle-5e565e1d5a735ee4a481835a4e53ee43.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/stat-large-4434acbc0c05f2c331071c827076d7b0.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-area-line-fbcaba9e073f71a07b202834d2992b49.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-range-transpose-ac0df7689c88cb6fe886aaed084918bf.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/text-sizes-5d78df884df4f57688aef7d5b7b68349.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/combobox-99fc7d69ef37ddf7a125cdeaa730e2ce.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/slider-06551b8ad6f45a0aa69c946c5d8332d1.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/range-slider-7394a0b0ebb5aace4e83bb302adc6fc3.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/date-picker-a98cee22ba2dc41a9e12a103dabc10e9.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/separator-761eab53dd3e94f7cae3fc78ce5f36b7.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPMAAABvCAYAAAA5UvYHAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjE1OjMyIFBNIFBEVK0FpMUAAA3ISURBVHic7dx/TFXlHwfwz5V7+R2/MX6oIOQQWRbZIMQVg2wFmkglEDbZMoiAppXVbDUbtrlkE9parZyBiY5ZcwMU/MEmWCmVZjhnVpgKTUTC+CUIyuf7h+PEc84BLpeLcp/v+7XdyXPO53nOj8v7nnufe9DAzEwAYPNm3OsdAADrQJgBJIEwA0gCYQaQBMIMIAmEGUASCDOAJBBmAEkgzACSQJgBJIEwA0gCYQaQBMIMIAmEGUASCDOAJBBmAEkgzACSQJgBJIEwA0gCYQaQBMIMIAmEGUASCDOAJBBmAEkgzACSQJgBJIEwA0gCYQaQBMIMIAmEGUASCDOAJBBmAEkgzACSQJgBJIEwA0gCYQaQBMIMIAmEGUASCDOAJBBmAEkgzACSQJgBJIEwA0gCYQaQxP9NmGtqashgMGgeTz755IRqwLreffdd3XO+efPmCY1TVFSkO05eXt4U7fn0Y9UwFxYW6p5Q9WP+/PlCP0dHR7P67dq1y+J9W7p0KZ04cYJCQ0MnVTOVqqqqzDoPLS0tFo3f398/6phxcXHWPRgzvf/++1RVVTXpcXJycqiuro6cnZ3Hrd28ebPm+Nva2ia9D/eaVcOcmZlJVVVVVFhYSIGBgZr1eXl5VFZWRt98842w/NixY1RSUkIvvviips/8+fOpqKiIampqaPny5Rbvm52dHUVHR5OPj8+kaqZSfHw8VVdX06pVqzTrQkJCqLS0lH788Ufy9/fX7c/MVFtbS7W1tTQ0NKRZ7+joSKdOnaLy8nJKSkoiIiIfHx/asWMHbd++3boHYyYXFxdKSEiY9DgODg70+OOPk8lkGrc2ICBAaBuNxnv2nFsVT5HY2FgmIuFx7ty5MftUV1dr+qSmplp1v6Kjo4XxExISLKqZSpcuXWKDwSDsg5OTE3d2do7Zb+T5q6ysHLN2+fLlTET8yiuvWHPXLdLX16d53gsKCiway93dXRgnNzdXU6P+PZs1a9ZkD2Fa+L/5zGxL5syZQ0uWLBGW9fX1ad7RqH322We6P6v19fXRkSNHiIgoJSVlEntqm9RXZnXbViHM01RGRoZm2c6dO0etb2lpof379yvtmpoaunjxom7tkSNHqK+vj9zd3Sk+Pn7S+zqdGAyGcWvUH1NG+9hiaxDmaeqFF14ge3t7YVl9fT1dunRJt/6LL76g27dvK+2hoSH6/PPPdWsrKiqIiCgpKUmzDVtnzmdmHx8f4bhxZZ4Gbt++TaWlpZSYmEj+/v5kb29P7u7utGjRIiooKKCurq4p34eamhpKT0+nuXPnkouLCzk7O1NwcDClpqbSgQMHLB7Xy8uLnn76aWEZM+vO6N+6dUt3AmvHjh00MDCgGWN49ni0t9jt7e20adMmiomJIR8fHzKZTOTt7U3R0dH0wQcfUHt7u6bP6tWrdWfJ33zzTaWmtbWV3njjDQoKCiKDwUC3bt0a/0SoMDN9++23lJycTAEBAeTg4ED33XcfhYSE0LPPPkv9/f3jjmEwGMjPz09pyxJmm50Aa29v55iYGKXO29ub16xZwwEBAcqy8PBwbm9vF/pZawKsv7+fV61apdSYTCZOT0/n5ORkYfIqNTWVb968OYEz95/y8nLN+QgLC9PU7d27V1M3/CgrKxNqGxoalAm1np4ezVi1tbXs4eGh9F+wYAFnZWVxcHCwsszDw4Pr6uqEfmfPnuXCwkIODAwUtj88wVZdXc2enp7CusHBQWY2fwKsp6eHExMThbqQkBBeu3Ytr169mqOiojQTh3oTYMzic7x9+3bznpBpzmbDnJSUJNT98MMPzHznl3Hk8pdfflnoZ60w5+fnCzXbtm1T1m3cuFFYt2HDhnHPl54bN26wm5ub5pw0NDQIdQkJCUxE/NBDD2lqlyxZItS+9957TES8YsUKzfb++usvYXuBgYFK4Nva2oSZYg8PD25padGMMbwvw4+0tDTevXs3G41Gzb5NNMwZGRlCTXR0NPf29go15sxmMzOvXLlSqTlw4MAYz4LtuKthjouL46SkpFEfUVFRZoX5+++/F2qCgoKUdQMDAzxjxgxlnZOTk/CEWyPMzc3NbGdnJ9S0tbUp65uamoR1JpOJW1tbLTqPmZmZmnOSl5enrD9//jwbDAY2Go3c1NTE3t7emvrGxkal/sEHH2Qi4tLSUs22srKyhH6vvfaasP6ll14S1ufn52vGUIc5MDCQjUYju7q68vPPP8+FhYW8ePHiCYf51KlTmprvvvtOs31zw5ybm6vUnD59eoxnwHbc1TBb8tAL87p16zQvEiOpn9Djx48r66wR5uLiYmG9p6enZgxXV1eh5tNPP7XoPB4+fFhzTnx8fHhgYICZmdevX89ExM899xwzM7/11lua+pycHGZmvnjxIhMRG41G7ujo0GzLy8tL6FdcXCys37p1q7De19dXM4Y6zG5ublxcXMzd3d1KzdGjRycc5uHjHGvbzOaH+aOPPtJ9IbZld3UC7Ny5c8R3XkB0H9XV1WaNc/LkSaHt6uoqtB0cHIT233//PbkdV/n555+Ftq+vr6Zm5syZQvunn36yaFvx8fGar07a29upurqa+vv7qbS0lIiIXn31VeVf9dczu3btou7ubmUWOy4ujjw9PYWaCxcuUEdHh7BMfVz333+/0L527dqos+vDwsPD6fXXXxeeoyeeeIL2799PdnZ2Y/Yd6cSJE0I7IiLC7L56hs+pyWSS4+4vstHZ7NbWVqGtvqdZfZ9tb2/vlG7fyclJU+Pi4iK0r1y5YtG2ZsyYQWlpaZrlO3fupPLycuro6KB58+Ypt0SGhobSU089JdR2d3dTWVmZEma9WWz1MRFpj0t9TESWH1diYqJZ3wkPu3z5stBWv7BM1PAMtp+f34T2Yzoz3usdsMSNGzeEdlBQ0Jh/KBASEjKl29e7wqi/75zMC0pGRgZt27ZNWFZVVUW///47ERFlZ2cLv5A5OTl08OBBob6oqIguXLhABoOBVqxYodmG+piItMel9x2utV8oR9PT0yO0J/v9+HCYpflaimw0zOq31ZGRkVRSUnLXtq++Qo28WWPY4OCg0Fbv80QsWrSIwsLC6Pz588qymzdv0pkzZ8jR0ZEyMzOF+mXLltHs2bOpublZWTbcNyYmRvcXWO+qqz4u9TERTe64JsLJyYk6OzuVtvr784maN28e7du3b9JX+OnEJt9mqz9D3o2bQ0ZSh0Hvqqa+kkz2CqB3eyfRnTvFvL29hWV2dnaUlZWlWz/ajSJ6+6c+LvUxjdZvKqjnIPQ+FkyEo6MjxcTE0MMPPzypcaYTmwxzVFSU0B5+u3m3PProo0L72rVrQpuZ6erVq2P2mSi9Pw8luvOWWs/atWt13xavXLlStz4oKEgzEaQ+LnWAZs6cSbNnzx51n60pMjJSaJ85c4aY2aKxrl+/TnFxceTn50fu7u5UWFhojV2852wyzOoJoZaWFjp06NBd235KSgoZjf99Qvn333+FSbempibhqmYymSb910mhoaH02GOPCcsWLlxIMTExuvV+fn6a4C5cuHDM/3hB/XfUI9/WExE1NjYKbb2JuamSnJwstDs6Oujo0aMWjfXhhx9SXV0dEd356PD222/T6dOnJ7uL95xNhjkyMpJSU1OFZenp6bRnzx7q6+tTlrW2tlJtba1F9wCPxd/fn3Jzc4Vlu3fvVn5W3ye9bt06q3w2U7/VHu2qPNr68V5Q3nnnHXJzc1PaFRUVygTX1atXhf8RxNPTkzZs2GDWflvDsmXLNFfn9evX0/Xr15V2Y2OjWZ+lz549K7SZWbPMJlnzS+vW1lbet28fb9myRbhHmkbcvFBSUsInT54U+h07doy//PJLTk1N1fQJCwvjwsJCrqys5H/++Ufp09XVpblPl0bcqDB8+6C9vT339vbywMAAHz9+nENDQ4XaiIgIbmho4MHBQbNqhvX19XFKSopSYzQade/NzsjIUG7wmKy2tjbluFxdXbmrq2vcPgsWLFD25ddffx23/vDhw8ItneHh4Zydnc1z5sxRlnl7e3N9fb3Qr7u7m+vr6zkiIkI4d6GhoXzw4EG+fPmy7vY6Ozu5srJS8xympaXxb7/9JtT++eefmufGw8ODY2NjhXvHRz4eeOAB/vjjj4VztWnTJqHG3t6e//jjj3HPzXRn1TCr7xAa7aH+YwEHBwez+n399ddCv6GhIa6srOTU1FQODg5mZ2dnNplM7O/vz0uXLuUtW7Zwc3MzMzN/9dVXY469Z88es2rUKioqOCUlhWfNmsUODg7s5OTEc+fO5fT0dD506JA1Ty8zMz/zzDNMRJydnW1W/SeffKKEylytra28ceNGfuSRR9jd3Z2NRiN7eXnx4sWLuaCgQHhRHaa+b1rvoReYNWvWjNnnypUrQn1PTw9v3bqVY2Nj2cvLS7l119fXl/Pz80d9gf/ll1+UMfr7+zk7O5s9PDw4JCSE9+7da/a5mc4MzBbOIgDAtGKTn5kBQAthBpAEwgwgCYQZQBIIM4AkEGYASSDMAJJAmAEkgTADSAJhBpAEwgwgCYQZQBIIM4AkEGYASSDMAJJAmAEkgTADSAJhBpAEwgwgCYQZQBIIM4AkEGYASSDMAJJAmAEkgTADSAJhBpAEwgwgCYQZQBIIM4AkEGYASSDMAJJAmAEkgTADSAJhBpAEwgwgCYQZQBIIM4AkEGYASSDMAJJAmAEkgTADSAJhBpAEwgwgif8B1l8uv8iTAYwAAAAASUVORK5CYII="},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/table-search-f29a132ad20079a67a0fee3143689fa6.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/table-select-428e4b7f6e76c00956feb8ede847a369.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/template-data-1b5f5707f248dfd5a606e722345ad2a2.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/toolbar-6cae7b599ebdc78e77db0f536dc3392e.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/hash-routing-816838345c1b3e01e3fe1664c336f3d6.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-point-annotation-394f235e137883e033b2cc056955e713.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-groups-b096660ab331215122bb6771cda619ac.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-stacked-transpose-9f125bb40e6aea97cd6ad2b4e547a259.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-stacked-grouped-678de98e675478e364cab127af4c07bb.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-stacked-grouped-transpose-2b181afc5e1a2626b7e700625c7f41b3.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-helix-b499f18c451e87aa39d64ca154a15bdf.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-line-47205e6d75190eb08bb6cecf3dfe347b.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-line-groups-b3aacba3e2a8fd2306aef09adcb88fea.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-line-smooth-566975ab0a25c3e3ad7b3941ca441df6.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-line-annotation-0b3e87d958bdf0bdcfddc482ad9cf3c5.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-path-point-7e7d80f97ee02c9ac8591676f931f173.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-path-smooth-d3dc4edb37522cdaf43f8da9ab425156.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-area-line-smooth-215c412ff603d4f09d5e46af9dc84085.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-axis-title-f0d1c16575277e024054fbb19e5af49a.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-matplotlib-14dd0da4129dea8f5aae83573ba31241.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/upload-ui-ce3af4e53ce2d7a546aa933667f7758a.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/upload-download-ce3af4e53ce2d7a546aa933667f7758a.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/meta-notification-fbc7ef4c16cebfc522a564d72cb6953d.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/graphics-hilbert-0b77a235731e83c53e6167b922a11f1c.png"}])]);
\ No newline at end of file
diff --git a/docs/bf614533.e9f653e2.js b/docs/bf614533.e9f653e2.js
new file mode 100644
index 0000000000..da3b280df4
--- /dev/null
+++ b/docs/bf614533.e9f653e2.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[175],Array(228).concat([function(A,e,t){"use strict";t.r(e),t.d(e,"frontMatter",(function(){return u})),t.d(e,"metadata",(function(){return l})),t.d(e,"rightToc",(function(){return b})),t.d(e,"default",(function(){return f}));var a=t(2),i=t(6),d=(t(0),t(292)),u={title:"Gallery",slug:"/examples"},l={unversionedId:"examples/index",id:"examples/index",isDocsHomePage:!1,title:"Gallery",description:"Hello World!",source:"@site/docs/examples/index.md",slug:"/examples",permalink:"/wave/docs/examples",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/index.md",version:"current",sidebar:"someSidebar",previous:{title:"Developer Guide",permalink:"/wave/docs/enterprise/developer-guide"},next:{title:"Hello World!",permalink:"/wave/docs/examples/hello-world"}},b=[],s={rightToc:b};function f(A){var e=A.components,u=Object(i.a)(A,["components"]);return Object(d.b)("wrapper",Object(a.a)({},s,u,{components:e,mdxType:"MDXLayout"}),Object(d.b)("a",{class:"thumbnail",href:"examples/hello-world"},Object(d.b)("div",{style:{backgroundImage:"url("+t(406).default+")"}}),"Hello World!"),Object(d.b)("a",{class:"thumbnail",href:"examples/todo"},Object(d.b)("div",{style:{backgroundImage:"url("+t(422).default+")"}}),"To-do List App"),Object(d.b)("a",{class:"thumbnail",href:"examples/wizard"},Object(d.b)("div",{style:{backgroundImage:"url("+t(314).default+")"}}),"Wizard"),Object(d.b)("a",{class:"thumbnail",href:"examples/issue-tracker"},Object(d.b)("div",{style:{backgroundImage:"url("+t(363).default+")"}}),"Issue Tracker"),Object(d.b)("a",{class:"thumbnail",href:"examples/dashboard"},Object(d.b)("div",{style:{backgroundImage:"url("+t(304).default+")"}}),"Dashboard"),Object(d.b)("a",{class:"thumbnail",href:"examples/stat-small"},Object(d.b)("div",{style:{backgroundImage:"url("+t(404).default+")"}}),"Stat / Small"),Object(d.b)("a",{class:"thumbnail",href:"examples/stat-large"},Object(d.b)("div",{style:{backgroundImage:"url("+t(420).default+")"}}),"Stat / Large"),Object(d.b)("a",{class:"thumbnail",href:"examples/stat-wide-gauge"},Object(d.b)("div",{style:{backgroundImage:"url("+t(361).default+")"}}),"Stat / Gauge / Wide"),Object(d.b)("a",{class:"thumbnail",href:"examples/stat-tall-gauge"},Object(d.b)("div",{style:{backgroundImage:"url("+t(308).default+")"}}),"Stat / Gauge / Tall"),Object(d.b)("a",{class:"thumbnail",href:"examples/stat-wide-bar"},Object(d.b)("div",{style:{backgroundImage:"url("+t(359).default+")"}}),"Stat / Bar / Wide"),Object(d.b)("a",{class:"thumbnail",href:"examples/stat-large-bar"},Object(d.b)("div",{style:{backgroundImage:"url("+t(370).default+")"}}),"Stat / Bar / Large"),Object(d.b)("a",{class:"thumbnail",href:"examples/stat-small-series-area"},Object(d.b)("div",{style:{backgroundImage:"url("+t(426).default+")"}}),"Stat / Series / Small / Area"),Object(d.b)("a",{class:"thumbnail",href:"examples/stat-small-series-interval"},Object(d.b)("div",{style:{backgroundImage:"url("+t(366).default+")"}}),"Stat / Series / Small / Interval"),Object(d.b)("a",{class:"thumbnail",href:"examples/stat-wide-series-area"},Object(d.b)("div",{style:{backgroundImage:"url("+t(378).default+")"}}),"Stat / Series / Wide / Area"),Object(d.b)("a",{class:"thumbnail",href:"examples/stat-wide-series-interval"},Object(d.b)("div",{style:{backgroundImage:"url("+t(339).default+")"}}),"Stat / Series / Wide / Interval"),Object(d.b)("a",{class:"thumbnail",href:"examples/stat-tall-series-area"},Object(d.b)("div",{style:{backgroundImage:"url("+t(399).default+")"}}),"Stat / Series / Tall / Area"),Object(d.b)("a",{class:"thumbnail",href:"examples/stat-tall-series-interval"},Object(d.b)("div",{style:{backgroundImage:"url("+t(350).default+")"}}),"Stat / Series / Tall / Interval"),Object(d.b)("a",{class:"thumbnail",href:"examples/layout"},Object(d.b)("div",{style:{backgroundImage:"url("+t(427).default+")"}}),"Layout / Position"),Object(d.b)("a",{class:"thumbnail",href:"examples/layout-size"},Object(d.b)("div",{style:{backgroundImage:"url("+t(428).default+")"}}),"Layout / Size"),Object(d.b)("a",{class:"thumbnail",href:"examples/form"},Object(d.b)("div",{style:{backgroundImage:"url("+t(387).default+")"}}),"Form"),Object(d.b)("a",{class:"thumbnail",href:"examples/text"},Object(d.b)("div",{style:{backgroundImage:"url("+t(360).default+")"}}),"Form / Text"),Object(d.b)("a",{class:"thumbnail",href:"examples/text-sizes"},Object(d.b)("div",{style:{backgroundImage:"url("+t(429).default+")"}}),"Form / Text / Sizes"),Object(d.b)("a",{class:"thumbnail",href:"examples/label"},Object(d.b)("div",{style:{backgroundImage:"url("+t(306).default+")"}}),"Form / Label"),Object(d.b)("a",{class:"thumbnail",href:"examples/link"},Object(d.b)("div",{style:{backgroundImage:"url("+t(430).default+")"}}),"Form / Link"),Object(d.b)("a",{class:"thumbnail",href:"examples/progress"},Object(d.b)("div",{style:{backgroundImage:"url("+t(353).default+")"}}),"Form / Progress"),Object(d.b)("a",{class:"thumbnail",href:"examples/progress-update"},Object(d.b)("div",{style:{backgroundImage:"url("+t(431).default+")"}}),"Form / Progress / Updating"),Object(d.b)("a",{class:"thumbnail",href:"examples/message-bar"},Object(d.b)("div",{style:{backgroundImage:"url("+t(320).default+")"}}),"Form / Message Bar"),Object(d.b)("a",{class:"thumbnail",href:"examples/textbox"},Object(d.b)("div",{style:{backgroundImage:"url("+t(379).default+")"}}),"Form / Textbox"),Object(d.b)("a",{class:"thumbnail",href:"examples/textbox-trigger"},Object(d.b)("div",{style:{backgroundImage:"url("+t(338).default+")"}}),"Form / Textbox / Trigger"),Object(d.b)("a",{class:"thumbnail",href:"examples/button"},Object(d.b)("div",{style:{backgroundImage:"url("+t(386).default+")"}}),"Form / Button"),Object(d.b)("a",{class:"thumbnail",href:"examples/buttons"},Object(d.b)("div",{style:{backgroundImage:"url("+t(351).default+")"}}),"Form / Buttons"),Object(d.b)("a",{class:"thumbnail",href:"examples/checkbox"},Object(d.b)("div",{style:{backgroundImage:"url("+t(391).default+")"}}),"Form / Checkbox"),Object(d.b)("a",{class:"thumbnail",href:"examples/checklist"},Object(d.b)("div",{style:{backgroundImage:"url("+t(381).default+")"}}),"Form / Checklist"),Object(d.b)("a",{class:"thumbnail",href:"examples/picker"},Object(d.b)("div",{style:{backgroundImage:"url("+t(356).default+")"}}),"Form / Picker"),Object(d.b)("a",{class:"thumbnail",href:"examples/picker-selection"},Object(d.b)("div",{style:{backgroundImage:"url("+t(318).default+")"}}),"Form / Picker / Selection"),Object(d.b)("a",{class:"thumbnail",href:"examples/dropdown"},Object(d.b)("div",{style:{backgroundImage:"url("+t(412).default+")"}}),"Form / Dropdown"),Object(d.b)("a",{class:"thumbnail",href:"examples/choice-group"},Object(d.b)("div",{style:{backgroundImage:"url("+t(384).default+")"}}),"Form / Choice Group"),Object(d.b)("a",{class:"thumbnail",href:"examples/combobox"},Object(d.b)("div",{style:{backgroundImage:"url("+t(432).default+")"}}),"Form / Combobox"),Object(d.b)("a",{class:"thumbnail",href:"examples/toggle"},Object(d.b)("div",{style:{backgroundImage:"url("+t(419).default+")"}}),"Form / Toggle"),Object(d.b)("a",{class:"thumbnail",href:"examples/spinbox"},Object(d.b)("div",{style:{backgroundImage:"url("+t(433).default+")"}}),"Form / Spinbox"),Object(d.b)("a",{class:"thumbnail",href:"examples/slider"},Object(d.b)("div",{style:{backgroundImage:"url("+t(434).default+")"}}),"Form / Slider"),Object(d.b)("a",{class:"thumbnail",href:"examples/range-slider"},Object(d.b)("div",{style:{backgroundImage:"url("+t(435).default+")"}}),"Form / Range Slider"),Object(d.b)("a",{class:"thumbnail",href:"examples/date-picker"},Object(d.b)("div",{style:{backgroundImage:"url("+t(436).default+")"}}),"Form / Date Picker"),Object(d.b)("a",{class:"thumbnail",href:"examples/date-picker-trigger"},Object(d.b)("div",{style:{backgroundImage:"url("+t(437).default+")"}}),"Form / Date Picker / Trigger"),Object(d.b)("a",{class:"thumbnail",href:"examples/color-picker"},Object(d.b)("div",{style:{backgroundImage:"url("+t(352).default+")"}}),"Form / Color Picker"),Object(d.b)("a",{class:"thumbnail",href:"examples/swatch-picker"},Object(d.b)("div",{style:{backgroundImage:"url("+t(323).default+")"}}),"Form / Swatch Picker"),Object(d.b)("a",{class:"thumbnail",href:"examples/tabs"},Object(d.b)("div",{style:{backgroundImage:"url("+t(385).default+")"}}),"Form / Tabs"),Object(d.b)("a",{class:"thumbnail",href:"examples/separator"},Object(d.b)("div",{style:{backgroundImage:"url("+t(438).default+")"}}),"Form / Separator"),Object(d.b)("a",{class:"thumbnail",href:"examples/file-upload"},Object(d.b)("div",{style:{backgroundImage:"url("+t(344).default+")"}}),"Form / File Upload"),Object(d.b)("a",{class:"thumbnail",href:"examples/form-frame"},Object(d.b)("div",{style:{backgroundImage:"url("+t(439).default+")"}}),"Form / Frame"),Object(d.b)("a",{class:"thumbnail",href:"examples/form-frame-path"},Object(d.b)("div",{style:{backgroundImage:"url("+t(377).default+")"}}),"Form / Frame / Path"),Object(d.b)("a",{class:"thumbnail",href:"examples/form-menu"},Object(d.b)("div",{style:{backgroundImage:"url("+t(380).default+")"}}),"Form / Menu"),Object(d.b)("a",{class:"thumbnail",href:"examples/form-template"},Object(d.b)("div",{style:{backgroundImage:"url("+t(408).default+")"}}),"Form / Template"),Object(d.b)("a",{class:"thumbnail",href:"examples/form-markup"},Object(d.b)("div",{style:{backgroundImage:"url("+t(349).default+")"}}),"Form / Markup"),Object(d.b)("a",{class:"thumbnail",href:"examples/stepper"},Object(d.b)("div",{style:{backgroundImage:"url("+t(392).default+")"}}),"Form / Stepper"),Object(d.b)("a",{class:"thumbnail",href:"examples/table-markdown"},Object(d.b)("div",{style:{backgroundImage:"url("+t(305).default+")"}}),"Table / Markdown"),Object(d.b)("a",{class:"thumbnail",href:"examples/table"},Object(d.b)("div",{style:{backgroundImage:"url("+t(311).default+")"}}),"Table"),Object(d.b)("a",{class:"thumbnail",href:"examples/table-sort"},Object(d.b)("div",{style:{backgroundImage:"url("+t(313).default+")"}}),"Table / Sort"),Object(d.b)("a",{class:"thumbnail",href:"examples/table-search"},Object(d.b)("div",{style:{backgroundImage:"url("+t(440).default+")"}}),"Table / Search"),Object(d.b)("a",{class:"thumbnail",href:"examples/table-filter"},Object(d.b)("div",{style:{backgroundImage:"url("+t(367).default+")"}}),"Table / Filter"),Object(d.b)("a",{class:"thumbnail",href:"examples/table-filter-backend"},Object(d.b)("div",{style:{backgroundImage:"url("+t(388).default+")"}}),"Table / Filter / Backend"),Object(d.b)("a",{class:"thumbnail",href:"examples/table-download"},Object(d.b)("div",{style:{backgroundImage:"url("+t(389).default+")"}}),"Table / Download"),Object(d.b)("a",{class:"thumbnail",href:"examples/table-groupby"},Object(d.b)("div",{style:{backgroundImage:"url("+t(374).default+")"}}),"Table / Group by"),Object(d.b)("a",{class:"thumbnail",href:"examples/table-select"},Object(d.b)("div",{style:{backgroundImage:"url("+t(441).default+")"}}),"Table / Preselection"),Object(d.b)("a",{class:"thumbnail",href:"examples/image"},Object(d.b)("div",{style:{backgroundImage:"url("+t(416).default+")"}}),"Image"),Object(d.b)("a",{class:"thumbnail",href:"examples/frame"},Object(d.b)("div",{style:{backgroundImage:"url("+t(414).default+")"}}),"Frame"),Object(d.b)("a",{class:"thumbnail",href:"examples/frame-path"},Object(d.b)("div",{style:{backgroundImage:"url("+t(376).default+")"}}),"Frame / Path"),Object(d.b)("a",{class:"thumbnail",href:"examples/template"},Object(d.b)("div",{style:{backgroundImage:"url("+t(330).default+")"}}),"Template"),Object(d.b)("a",{class:"thumbnail",href:"examples/template-data"},Object(d.b)("div",{style:{backgroundImage:"url("+t(442).default+")"}}),"Template / Data"),Object(d.b)("a",{class:"thumbnail",href:"examples/markdown"},Object(d.b)("div",{style:{backgroundImage:"url("+t(402).default+")"}}),"Markdown"),Object(d.b)("a",{class:"thumbnail",href:"examples/markdown-data"},Object(d.b)("div",{style:{backgroundImage:"url("+t(417).default+")"}}),"Markdown / Data"),Object(d.b)("a",{class:"thumbnail",href:"examples/markup"},Object(d.b)("div",{style:{backgroundImage:"url("+t(373).default+")"}}),"Markup"),Object(d.b)("a",{class:"thumbnail",href:"examples/nav"},Object(d.b)("div",{style:{backgroundImage:"url("+t(443).default+")"}}),"Nav"),Object(d.b)("a",{class:"thumbnail",href:"examples/toolbar"},Object(d.b)("div",{style:{backgroundImage:"url("+t(444).default+")"}}),"Toolbar"),Object(d.b)("a",{class:"thumbnail",href:"examples/tab"},Object(d.b)("div",{style:{backgroundImage:"url("+t(368).default+")"}}),"Tab"),Object(d.b)("a",{class:"thumbnail",href:"examples/tab-link"},Object(d.b)("div",{style:{backgroundImage:"url("+t(425).default+")"}}),"Tab / Links"),Object(d.b)("a",{class:"thumbnail",href:"examples/tab-delete"},Object(d.b)("div",{style:{backgroundImage:"url("+t(365).default+")"}}),"Tabs / Navigation"),Object(d.b)("a",{class:"thumbnail",href:"examples/breadcrumbs"},Object(d.b)("div",{style:{backgroundImage:"url("+t(445).default+")"}}),"Breadcrumbs"),Object(d.b)("a",{class:"thumbnail",href:"examples/header"},Object(d.b)("div",{style:{backgroundImage:"url("+t(325).default+")"}}),"Header"),Object(d.b)("a",{class:"thumbnail",href:"examples/hash-routing"},Object(d.b)("div",{style:{backgroundImage:"url("+t(446).default+")"}}),"Routing"),Object(d.b)("a",{class:"thumbnail",href:"examples/toolbar-routing"},Object(d.b)("div",{style:{backgroundImage:"url("+t(398).default+")"}}),"Routing / Toolbar"),Object(d.b)("a",{class:"thumbnail",href:"examples/tab-routing"},Object(d.b)("div",{style:{backgroundImage:"url("+t(341).default+")"}}),"Routing / Tabs"),Object(d.b)("a",{class:"thumbnail",href:"examples/card-menu"},Object(d.b)("div",{style:{backgroundImage:"url("+t(394).default+")"}}),"Context Menu"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-point"},Object(d.b)("div",{style:{backgroundImage:"url("+t(336).default+")"}}),"Plot / Point"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-point-shapes"},Object(d.b)("div",{style:{backgroundImage:"url("+t(357).default+")"}}),"Plot / Point / Shapes"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-point-sizes"},Object(d.b)("div",{style:{backgroundImage:"url("+t(324).default+")"}}),"Plot / Point / Sizes"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-point-map"},Object(d.b)("div",{style:{backgroundImage:"url("+t(343).default+")"}}),"Plot / Point / Map"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-point-groups"},Object(d.b)("div",{style:{backgroundImage:"url("+t(319).default+")"}}),"Plot / Point / Groups"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-point-annotation"},Object(d.b)("div",{style:{backgroundImage:"url("+t(447).default+")"}}),"Plot / Point / Annotation"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-point-custom"},Object(d.b)("div",{style:{backgroundImage:"url("+t(317).default+")"}}),"Plot / Point / Custom"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-interval"},Object(d.b)("div",{style:{backgroundImage:"url("+t(310).default+")"}}),"Plot / Interval"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-interval-transpose"},Object(d.b)("div",{style:{backgroundImage:"url("+t(411).default+")"}}),"Plot / Interval / Transpose"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-interval-groups"},Object(d.b)("div",{style:{backgroundImage:"url("+t(448).default+")"}}),"Plot / Interval / Groups"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-interval-groups-transpose"},Object(d.b)("div",{style:{backgroundImage:"url("+t(401).default+")"}}),"Plot / Interval / Groups / Transpose"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-interval-labels"},Object(d.b)("div",{style:{backgroundImage:"url("+t(393).default+")"}}),"Plot / Interval / Labels"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-interval-range"},Object(d.b)("div",{style:{backgroundImage:"url("+t(407).default+")"}}),"Plot / Interval / Range"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-interval-range-transpose"},Object(d.b)("div",{style:{backgroundImage:"url("+t(423).default+")"}}),"Plot / Interval / Range / Transpose"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-interval-stacked"},Object(d.b)("div",{style:{backgroundImage:"url("+t(326).default+")"}}),"Plot / Interval / Stacked"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-interval-stacked-transpose"},Object(d.b)("div",{style:{backgroundImage:"url("+t(449).default+")"}}),"Plot / Interval / Stacked / Transpose"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-interval-stacked-grouped"},Object(d.b)("div",{style:{backgroundImage:"url("+t(450).default+")"}}),"Plot / Interval / Stacked / Grouped"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-interval-stacked-grouped-transpose"},Object(d.b)("div",{style:{backgroundImage:"url("+t(451).default+")"}}),"Plot / Interval / Stacked / Grouped / Transpose"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-interval-polar"},Object(d.b)("div",{style:{backgroundImage:"url("+t(403).default+")"}}),"Plot / Interval / Polar"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-interval-polar-stacked"},Object(d.b)("div",{style:{backgroundImage:"url("+t(331).default+")"}}),"Plot / Interval / Polar / Stacked"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-interval-theta"},Object(d.b)("div",{style:{backgroundImage:"url("+t(334).default+")"}}),"Plot / Interval / Theta"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-interval-helix"},Object(d.b)("div",{style:{backgroundImage:"url("+t(452).default+")"}}),"Plot / Interval / Helix"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-interval-annotation"},Object(d.b)("div",{style:{backgroundImage:"url("+t(409).default+")"}}),"Plot / Interval / Annotation"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-interval-annotation-transpose"},Object(d.b)("div",{style:{backgroundImage:"url("+t(358).default+")"}}),"Plot / Interval / Annotation / Transpose"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-line"},Object(d.b)("div",{style:{backgroundImage:"url("+t(453).default+")"}}),"Plot / Line"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-line-groups"},Object(d.b)("div",{style:{backgroundImage:"url("+t(454).default+")"}}),"Plot / Line / Groups"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-line-smooth"},Object(d.b)("div",{style:{backgroundImage:"url("+t(455).default+")"}}),"Plot / Line / Smooth"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-step"},Object(d.b)("div",{style:{backgroundImage:"url("+t(315).default+")"}}),"Plot / Line / Step"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-step-after"},Object(d.b)("div",{style:{backgroundImage:"url("+t(397).default+")"}}),"Plot / Line / Step / After"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-step-before"},Object(d.b)("div",{style:{backgroundImage:"url("+t(328).default+")"}}),"Plot / Line / Step / Before"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-line-labels"},Object(d.b)("div",{style:{backgroundImage:"url("+t(371).default+")"}}),"Plot / Line / Labels"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-line-labels-stroked"},Object(d.b)("div",{style:{backgroundImage:"url("+t(364).default+")"}}),"Plot / Line / Labels/ Stroked"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-line-labels-no-overlap"},Object(d.b)("div",{style:{backgroundImage:"url("+t(347).default+")"}}),"Plot / Line / Labels / Occlusion"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-line-annotation"},Object(d.b)("div",{style:{backgroundImage:"url("+t(456).default+")"}}),"Plot / Line / Annotation"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-path"},Object(d.b)("div",{style:{backgroundImage:"url("+t(333).default+")"}}),"Plot / Path"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-path-point"},Object(d.b)("div",{style:{backgroundImage:"url("+t(457).default+")"}}),"Plot / Path / Point"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-path-smooth"},Object(d.b)("div",{style:{backgroundImage:"url("+t(458).default+")"}}),"Plot / Path / Smooth"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-area"},Object(d.b)("div",{style:{backgroundImage:"url("+t(335).default+")"}}),"Plot / Area"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-area-groups"},Object(d.b)("div",{style:{backgroundImage:"url("+t(362).default+")"}}),"Plot / Area / Groups"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-area-negative"},Object(d.b)("div",{style:{backgroundImage:"url("+t(329).default+")"}}),"Plot / Area / Negative"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-area-range"},Object(d.b)("div",{style:{backgroundImage:"url("+t(309).default+")"}}),"Plot / Area / Range"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-area-smooth"},Object(d.b)("div",{style:{backgroundImage:"url("+t(375).default+")"}}),"Plot / Area / Smooth"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-area-stacked"},Object(d.b)("div",{style:{backgroundImage:"url("+t(400).default+")"}}),"Plot / Area / Stacked"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-area-line"},Object(d.b)("div",{style:{backgroundImage:"url("+t(421).default+")"}}),"Plot / Area + Line"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-area-line-smooth"},Object(d.b)("div",{style:{backgroundImage:"url("+t(459).default+")"}}),"Plot / Area + Line / Smooth"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-area-line-groups"},Object(d.b)("div",{style:{backgroundImage:"url("+t(382).default+")"}}),"Plot / Area + Line / Groups"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-polygon"},Object(d.b)("div",{style:{backgroundImage:"url("+t(405).default+")"}}),"Plot / Polygon"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-histogram"},Object(d.b)("div",{style:{backgroundImage:"url("+t(460).default+")"}}),"Plot / Histogram"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-axis-title"},Object(d.b)("div",{style:{backgroundImage:"url("+t(461).default+")"}}),"Plot / Axis Titles"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-form"},Object(d.b)("div",{style:{backgroundImage:"url("+t(355).default+")"}}),"Plot / Form"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-vegalite"},Object(d.b)("div",{style:{backgroundImage:"url("+t(415).default+")"}}),"Plot / Vega-lite"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-vegalite-update"},Object(d.b)("div",{style:{backgroundImage:"url("+t(340).default+")"}}),"Plot / Vega-lite / Update"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-vegalite-form"},Object(d.b)("div",{style:{backgroundImage:"url("+t(348).default+")"}}),"Plot / Vega-lite / Form"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-altair"},Object(d.b)("div",{style:{backgroundImage:"url("+t(327).default+")"}}),"Plot / Altair"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-bokeh"},Object(d.b)("div",{style:{backgroundImage:"url("+t(307).default+")"}}),"Plot / Bokeh"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-matplotlib"},Object(d.b)("div",{style:{backgroundImage:"url("+t(462).default+")"}}),"Plot / Matplotlib"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-plotly"},Object(d.b)("div",{style:{backgroundImage:"url("+t(410).default+")"}}),"Plot / Plotly"),Object(d.b)("a",{class:"thumbnail",href:"examples/plot-d3"},Object(d.b)("div",{style:{backgroundImage:"url("+t(312).default+")"}}),"Plot / D3.js"),Object(d.b)("a",{class:"thumbnail",href:"examples/pixel-art"},Object(d.b)("div",{style:{backgroundImage:"url("+t(342).default+")"}}),"Pixel Art"),Object(d.b)("a",{class:"thumbnail",href:"examples/upload"},Object(d.b)("div",{style:{backgroundImage:"url("+t(303).default+")"}}),"Uploads"),Object(d.b)("a",{class:"thumbnail",href:"examples/upload-async"},Object(d.b)("div",{style:{backgroundImage:"url("+t(463).default+")"}}),"Uploads / Async"),Object(d.b)("a",{class:"thumbnail",href:"examples/upload-ui"},Object(d.b)("div",{style:{backgroundImage:"url("+t(464).default+")"}}),"Uploads / UI"),Object(d.b)("a",{class:"thumbnail",href:"examples/upload-download"},Object(d.b)("div",{style:{backgroundImage:"url("+t(465).default+")"}}),"Uploads / Download"),Object(d.b)("a",{class:"thumbnail",href:"examples/meta-title"},Object(d.b)("div",{style:{backgroundImage:"url("+t(466).default+")"}}),"Meta / Title"),Object(d.b)("a",{class:"thumbnail",href:"examples/meta-icon"},Object(d.b)("div",{style:{backgroundImage:"url("+t(467).default+")"}}),"Meta / Icon"),Object(d.b)("a",{class:"thumbnail",href:"examples/meta-notification"},Object(d.b)("div",{style:{backgroundImage:"url("+t(468).default+")"}}),"Meta / Notification"),Object(d.b)("a",{class:"thumbnail",href:"examples/meta-refresh"},Object(d.b)("div",{style:{backgroundImage:"url("+t(418).default+")"}}),"Meta / Refresh"),Object(d.b)("a",{class:"thumbnail",href:"examples/meta-redirect"},Object(d.b)("div",{style:{backgroundImage:"url("+t(337).default+")"}}),"Meta / Redirect"),Object(d.b)("a",{class:"thumbnail",href:"examples/counter-global"},Object(d.b)("div",{style:{backgroundImage:"url("+t(469).default+")"}}),"Mode / Broadcast / Global"),Object(d.b)("a",{class:"thumbnail",href:"examples/counter-broadcast"},Object(d.b)("div",{style:{backgroundImage:"url("+t(395).default+")"}}),"Mode / Broadcast"),Object(d.b)("a",{class:"thumbnail",href:"examples/counter-multicast"},Object(d.b)("div",{style:{backgroundImage:"url("+t(424).default+")"}}),"Mode / Multicast"),Object(d.b)("a",{class:"thumbnail",href:"examples/counter-unicast"},Object(d.b)("div",{style:{backgroundImage:"url("+t(354).default+")"}}),"Mode / Unicast"),Object(d.b)("a",{class:"thumbnail",href:"examples/background"},Object(d.b)("div",{style:{backgroundImage:"url("+t(346).default+")"}}),"Background Tasks"),Object(d.b)("a",{class:"thumbnail",href:"examples/background-executor"},Object(d.b)("div",{style:{backgroundImage:"url("+t(332).default+")"}}),"Background Tasks / Executor"),Object(d.b)("a",{class:"thumbnail",href:"examples/site-async"},Object(d.b)("div",{style:{backgroundImage:"url("+t(345).default+")"}}),"Site / Async"),Object(d.b)("a",{class:"thumbnail",href:"examples/graphics-primitives"},Object(d.b)("div",{style:{backgroundImage:"url("+t(390).default+")"}}),"Graphics / Primitives"),Object(d.b)("a",{class:"thumbnail",href:"examples/graphics-spline"},Object(d.b)("div",{style:{backgroundImage:"url("+t(413).default+")"}}),"Graphics / Spline"),Object(d.b)("a",{class:"thumbnail",href:"examples/graphics-clock"},Object(d.b)("div",{style:{backgroundImage:"url("+t(372).default+")"}}),"Graphics / Clock"),Object(d.b)("a",{class:"thumbnail",href:"examples/graphics-path"},Object(d.b)("div",{style:{backgroundImage:"url("+t(383).default+")"}}),"Graphics / Path"),Object(d.b)("a",{class:"thumbnail",href:"examples/graphics-turtle"},Object(d.b)("div",{style:{backgroundImage:"url("+t(396).default+")"}}),"Graphics / Turtle"),Object(d.b)("a",{class:"thumbnail",href:"examples/graphics-hilbert"},Object(d.b)("div",{style:{backgroundImage:"url("+t(470).default+")"}}),"Graphics / Hilbert"),Object(d.b)("a",{class:"thumbnail",href:"examples/glider-gun"},Object(d.b)("div",{style:{backgroundImage:"url("+t(316).default+")"}}),"Graphics / Glider Gun"))}f.isMDXComponent=!0},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(A,e,t){"use strict";t.d(e,"a",(function(){return r})),t.d(e,"b",(function(){return E}));var a=t(0),i=t.n(a);function d(A,e,t){return e in A?Object.defineProperty(A,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):A[e]=t,A}function u(A,e){var t=Object.keys(A);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(A);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(A,e).enumerable}))),t.push.apply(t,a)}return t}function l(A){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?u(Object(t),!0).forEach((function(e){d(A,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(A,Object.getOwnPropertyDescriptors(t)):u(Object(t)).forEach((function(e){Object.defineProperty(A,e,Object.getOwnPropertyDescriptor(t,e))}))}return A}function b(A,e){if(null==A)return{};var t,a,i=function(A,e){if(null==A)return{};var t,a,i={},d=Object.keys(A);for(a=0;a<d.length;a++)t=d[a],e.indexOf(t)>=0||(i[t]=A[t]);return i}(A,e);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(A);for(a=0;a<d.length;a++)t=d[a],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(A,t)&&(i[t]=A[t])}return i}var s=i.a.createContext({}),f=function(A){var e=i.a.useContext(s),t=e;return A&&(t="function"==typeof A?A(e):l(l({},e),A)),t},r=function(A){var e=f(A.components);return i.a.createElement(s.Provider,{value:e},A.children)},n={inlineCode:"code",wrapper:function(A){var e=A.children;return i.a.createElement(i.a.Fragment,{},e)}},I=i.a.forwardRef((function(A,e){var t=A.components,a=A.mdxType,d=A.originalType,u=A.parentName,s=b(A,["components","mdxType","originalType","parentName"]),r=f(t),I=a,E=r["".concat(u,".").concat(I)]||r[I]||n[I]||d;return t?i.a.createElement(E,l(l({ref:e},s),{},{components:t})):i.a.createElement(E,l({ref:e},s))}));function E(A,e){var t=arguments,a=e&&e.mdxType;if("string"==typeof A||a){var d=t.length,u=new Array(d);u[0]=I;var l={};for(var b in e)hasOwnProperty.call(e,b)&&(l[b]=e[b]);l.originalType=A,l.mdxType="string"==typeof A?A:a,u[1]=l;for(var s=2;s<d;s++)u[s]=t[s];return i.a.createElement.apply(null,u)}return i.a.createElement.apply(null,t)}I.displayName="MDXCreateElement"},,,,,,,,,,,function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/dashboard-24aea705724fd29993c5508a401b3b3c.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/table-markdown-fff816fa17022f80817f83239970db97.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-bokeh-0e17ac43f3cdff49e9cb5ff21d8c8214.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-area-range-0663c734a05c77b333b1cfdca966324f.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-95ba708d52bd4b0bda18da55cfd578e0.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/table-f4d13c60963beb31475a54192f62b47d.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-d3-27f0867826e9547bb4bb23e79517892b.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/table-sort-160ae663649156d89ea2cea500cc21b1.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-step-8c593fd75d3829ee2e6928c3e3c32372.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/glider-gun-8acc444425a295f814222e258d6ca3e3.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-point-custom-2a5eefc8951352109b57a03aa44baeb8.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjoAAABDCAYAAACV+q/gAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjA5OjI5IFBNIFBEVHarcngAABrBSURBVHic7d15XE35/wfw16VdacwoU/MbCW2DmdGmUlMpe0KlkqFpELKW4VaDMoiKjExkGFlCGZXmS/haZiwZQylLaZE2LWQZrrbbcn5/9HWm0yLVvdNo3s/H4z4e93w+n/P5vD/nntF7zvncc3kMwzAghBBCCOmGenR1AIQQQggh4kKJDiGEEEK6LUp0CCGEENJtUaJDCCGEkG6LEh1CCCGEdFuU6BBCCCGk26JEhxBCCCHdFiU6hBBCCOm2KNEhhBBCSLdFiQ4hhBBCui1KdAghhBDSbbU70fn6azfo6Q6Hnu5w6OvpYtzYMQjdtg01NTVsm1GWFkhOShJpoO+6fRERWLp0iVj69ubzERsbI5a+G6soL0dwUCDGjLaGsdEIuLhMx7lz58Q+bmc0Pl8bv/7zyy9dHVqn7AgLw6KFC1usm2w7SWzzu3jxIhYvanlcQgj5J5LoyE6url/BYdo0MAyDgoJ8BAUGoqKyAt7ePqKOj7QhI+MeUlJuYkNAAFs2erQ11q/fgBEjRoh0LD5/JV68eIG1330HZeV+SEq6gdWrVkFCQgIWFhYiHUuUXp+vjb333ntdFM27zdzcHKHbvkdyUhL09PW7OhxCCGlThxKd3r17Q1VVFQDw0UcfwdPLC958Pry8lkNKSkqkAZI3izkWAysra/Ts2VOs45SVleHq1as4dfoMlJWVAQCDBg1CVVUVbt1K/UcnOo3PV9J5X5ibIzY2hhIdQsg7QSRrdAYP1kB1dTWeP3/WrK6qqgqh27ZhwvhxMDE2wrx57si5f5+tr6urw/btoRgz2homxkZY7uWJ58+ft1hv/oUZlnt5orCwsNVYioqK4OPtjVGWFjD/wgyrV63Cq1ev2PpRlhY4ceIEvpzh0nD7ZbozMjMyWu2vtrYW20MbxjczHYklixehqOghWx8dHYUlSxZj48YAjDQxxvHjx9nyiRPGw9jICH5+azi39t5mXitXfINt277HgvnzYGigj4cPH6Illy9fgoGhAQBAIBBAT3c4nj19Co8F8zF+3NhWYzxz5gzGjLZGfX0921dJSQn09XSRn5/fbBwJiYacuOzxY065q+tXWLp0GQAg5/59mI40wY0b1zHJZiJMjI3g4bGAE3tb58MoSwscj4uD4zQHGBsZYflyL5SWlmK5lydMjI1gN3UKkpOTW/u4OiTpxg24uEyHsdEIuH3lisQrV2A60oStFwqF2LRpIywtzGFpYY7IyINYueIbHDxwgG0TefAgxo4ZDRNjI7i7z+WcI009ffoU/JUr8IWZKUZZWmDjxgBUVVWx9W/72b+t5ORkzJ0zG6YjTTB+3Fj8uGsXWxcdHYWlS5cgZMsWmJmOxITx4/DrrxdwKiEBNhMnwMzMFP7+fqirq2P3GWE4AomJiWAYBgDw5MkTWFuNQlxsbKfiJIQQcRBJolNcVISePXtCUbH57YDQbdtw9WoigoKDcTz+FwxQU4Ovry9bH7JlMy5fvoyg4GAciYqGrJwc5s1zZ/8RfV2/JWQrIg8dxnt9+mD+PHdUV1c3G4thGHh5egIA9u0/gAMHI1FYWICdO8I47SIPHsDqNX7479lz0NDUhK9v67fcgoMCkZh4BcHBm3Ho8BGoqKjAfe5cVJSXs21uXL8Oxd6KiImNw9ixYxEffxzh4eFYsZKPYzExUB+gjqioI5x+32Zex+PiMHnyFJw6fQYqKirNYisrK0NZWRl0dD4BACgoKOD3a39AXl4e32/bhvhf/tNqjObm5qioqEBqairb5vy5c9DR0YGamlqzsfr06YPJk6dg8eJF2P3jj8jKymrxeFVXVyMiIgI7w3fh7Lnz0NbShseC+ey82jofACAuLg6bt4TgWMwx5Ny/jy9nuMDeYRrOX/gVFhaW8Pdb0+rn1V4FBQVYsmQxxoweg2MxMZjx5UwEBwdx2gRu2ohbqanYFrodeyP24fatW0hJSWHrTyUkIDLyIDZvCcHx+F+gqakJvzV+LY5XW1uLhR4LwOP1wP4DBxG2YyfuZ9/Ht99yj0Fbn/3bevz4MRYtXIiRI00RdzweGzdtQlTUEVy4cJ5tk5yUhH4f9sOp02fg6OSE1atW4fz58zh0+Aj27duP369examEBLa9lrY2BAIBmxBLSUlBXV0dSkpKHY6TEELEhmknN7evmIi9e9nt0tIS5ms3N2blyhVsmaWFOZN04wbDMAxTW1vLvHz5kq3LyclhdId/zpSXlzMvX75kDA30mczMTLa+srKSOXQokq03GmHIFBYWcmKwnWTDXLz4W4vxCQQCRigUsttHo6OZGS7TObHFxcay28XFxYzu8M+Z58+fN+vrxYsXjIG+HnPvXjpbVl9fz0ydOoWJiTnGMAzDREUdYWwn2XD2c3KcxkRFHeGUzZ/nzixZsphhGOat5rXim+XMd2v9W5zja+np6Yzu8M+ZmpoaTrm1tRVz7do1drulGBmGYXx9fZigwE3stuusmUxk5MFWx6uvr2dOnPgP4/aVK6OnO5yZZGPDHD8ex9bfz85mdId/zqSmpnL2mThhPPPf/55hGObN5wPDNHw+J0+eYOu3ff89M3+eO7tdWlrK6A7/nBEIBK0fmEbc3L5iDPT1GKMRhpzX6/1DtmxhvDyXcfYJD9/JjDQxZhjmr3MgIyODra+oqGBGmhgzB/bvZxiGYX7as4eZ/fXXTH19PTvHxudgYxcv/sZYjbJkqqur2bJHjx4xerrDmbzcXIZh3u6zD/vhB0ZfT7fZvIxGGDJ6usOZX+Lj2bbPnj3j7Lty5QomJGQLwzDNz42qqipGd/jnTErKTbbsu7X+zObgYHa7vr6eMdDXY65f/+ONMRJCyD9Bh9bobN8eil27wsEwDGprazHS1BS+vt+22JbH4yE1NQVJSUkoyC9AVlYmgIbbAXl5uZCTk4OmpibbXkZGBi4uMwAAqakpEAqFmOEyndNnRUUFSktLWxyvB4+HU6cSkHb3LgofPkR6Whq7puS1jz/+mH2vqKjI9tl0geqDBzmQkJCApqYWZz6ffvop53ZXv3792PcMw+DBgwcYOmQop69PPhmC+zkNt2hycu6/1byUG/XbkoryckhJSbG3ld6kXwt9jRs3DhvWr8c3K1bi8ePHSEtLw+YtIa32wePxMHGiDSZOtEFZWRlOnjyBoMBAVFZWwdnZmW2nMXgwZx9tbR1kZ2Vj9Ogxbzwf5OTkGmJV/itWCQkJthwApKWlATRcOZKXl29z3gAwfboLptrZccpe95mdnQUDA0NO3ZBPhrDvcx88QM+eEtDQ0GDLZGVloa6uzm6PnzABx479DAd7O5iamsHMzAz6BgYtxpKVlQUtbW3OWjZlZWWoqKggMysTagMGNJS18dkDwKeffobVa5pf3VrosYCzLRRWIzLyILKzslBYWIj09HRMnfrX8Wh8brw+l2Rl/zrmUlLSnCuNPB4PioqKKC+vaDNGQgjpah1KdBymTcP06S7g8Xh4//33oaCg0Grb1au+Zf9hNTQwhOJ7inCdNQtAQ1LQeI1IiwFKSOBIVHSz8tcJSmMV5eX4cuaX6KesDCvr0Rg9egxyc3Px889H2zlDsPF1VG2jNQ0AUFfP3W7PvFoj16sXhEIhqqqqICMj0+4YjY1NUC0U4vatW0hLT4O+vj769u37VvsqKSnhq6/cIN9LHlFRRziJTk1tLaetsEYIHo8H4M3ng7j06dMHA/6XQDRVV18PXg8ep6ynRE9OfY8ePDZ+tk2jxd8qKiqIOx6Pq1cTceP6Dfj6+sDAwAAbAjY2H5ABeOA1L+8AWVnZFufVOPHNyLiHee7uGDXKCoYjRsDR0QlHjzY/79qrvLwcvXrJtd2QEEK6WIfW6Kh8qIIBAwZATU3tjUlOfX09zpw5g7XfrcMsV1eMNDWFUPjXotxBgwajsrIS9+7dY8sqKysRHR2FiooKDFQfCIZhUFNTA1VVVfZVkJ8PSUnJZuPdu3cPjx89wg9hO+Dg4AB9AwP8+eefHZliQ3wDB6G2thZpaWlsWW1tLW6lpkJLW7vFfXg8HgYNGoSbTRbMpjfqo73zas3rpOTp06fcGADgLZI0CQkJWFtZ4+y5szh39izGT5jQatuzZ/8L20mTUNskiamsrGyWZDU9Xhn37mGwxuA2z4euoK6ujnvp6ZyyzIxM9v0ANTUIhUI8ePCALWu6/fTpU/z555+wtByFlXw+fgjbgdOnT+PFixfNxtPU0kRGxj3OGq+ioiKUlJRAq9GVQ1G5ePEihg4bBj9/f0ycaIMhQ4ei9NGjTvVZXl6O6upqKCkpt92YEEK6mFifjNyjRw98/PHHOJWQgKKih7h9+za2bN7M1vfu3RtTp06F35rVSE1NQV5eHtav+w4xx45BVlYWvRUVMWXKVPj4eCM1NQWFhYXYHhoKHx9vVFVWNhvv/z7+PwiFQiScPImSkhKcO3euU//32ltREVPt7ODntwa3bt1CQUEBNqxfD6FQiHFjx7W6n4vLDOzZsxu//forioqKsGfPbhQUFHD6bc+8WqOkpAQlJSX29s9rfZWUcOHXC8jLy2uzj3HjxiHh5ElkZGRg1CirVtsZG5uguroKy5YuxR/XruHu3TuI2LsXO3aEwWGaI6ftnj27kZqagvz8fHy31h+ysrIwN7do83zoqLomV8+aevnyJYqLizmv8v8lGvb2Drh06RKijhxBcXExLl26iPj44+y+73/wAaysrPHd2rVIT09Hfn4+Nqxfh56NrpocOLAfy708kZ2djeLiYsQfj0Pfvn1bvLVmYjISffv2xeo1q5Gbm4uMjHvw8ebDwsKSvW0lSmr91ZCVlYXk5GQUFxdjz57duHP7dqf6zMjIgLy8PLtoXSAQYO6c2bh8+ZIoQiaEEJES+09AfL8tFGnpaXCwd8CmjQFwc3Pj1K9YycdIU1OsWLECLtOdIXj1CuHhu9hbBSv5fJiYmMCbz4fLdGfcuXMb4eG70LuFWzz9+n2I4M1bsHv3j5jmYI9ffonHzJmduy2yYsVKWJhb4JtvlsNlujOePn2CH3fvhlyvXq3uM8nWFosXL0FQUCAc7O1RUlyMmU1uz7RnXm9iZvYFrl27xin71vdbJN24Afe5c9rcf7iuLqSlpWFqavrGNS/y8vL4aW8EevWSg7c3H3PnzMGZM6fh6/stpkyZwmm7dOky+K1Zg+nOTnjy5Al27NzJrklp63xor+vXr2OkiXGzK02N7d+/D5NsJnJesTENT5LW0NBAcPBmxMbFwm7qFOz96ScsXLSYs/8aPz8MGjQIC+bPg+usmdDU0uKs4/HwWAhtHR3Mc58Lezs7ZGdnY/sPYS0+20hCQgJhO3ZComdPzJo1Ex4LFkBHRwfrN2zo1HFozdhx4+Dk6IQV3yzHlzNc8PTJU4weM6ZTfd5MToapqSn732h1dTXy8vLw7Fnzx0sQQkhX4zGdWYhCulxGxj14eXrhxMmT6NGj/XkrwzCYMtkWyzw9YWk5qlOx5Ny/D0fHaUi+mdJ2YxGJjz+OYz//jIORhzrcR11dHScpSbxyBWvX+uO/Zxt+3qK+vr7ZsZ0180tMnjIF9vYOHR73XTXNwR7e3j70wEBCyDuBftTzHaetrYPPPvsMJ0+caPe++fn52BcRgdraWpiamokhOvHLzc2FoWHHf+oiI+MebCfZ4MKF8ygrK8Pdu3cQtiMMZmZ/HQ9v/kr4+/shJycHjx49wsEDB5CdnQ0jIyNRTOGdcuHCefTr9yElOYSQdwZd0fkXmzB+PKSlpeDvvxafff55p/vriis6Cxd6wH2ue6fiPx4XhyNHjqCwsAC95OVhZWWFZcs82UXWJSUlCN22DcnJSRAIBNDQ1MRCj4UY8S9MdAgh5F1DiQ4hhBBCuq12PUfnyuVLOBodBYFAIK54CCGEEELapKCgAEcnZ5iaffHGdu1KdI5GR8Fz+TdQVx/YqeAIIYQQQjojN/cBtm7Z3Gai067FyAKBgJIcQgghhHQ5dfWBb3WHqUM/AQEAERER4PP5KCsr62gXBA0P/QsMDGz2PJmamhoIq6s69TMU/yY8Hg9S0jLterI0IYSQ7q/DXy+nJEc0ysrKwOfzm5VTktM+DMNAWF3V1WEQQgj5h+lwokNJjui0dCwpyWk/OmaEEEKaogcGEkIIIaTbokSHEEIIId0WJTqEEEII6bYo0SGEEEJItyX2RGfp0qXIyMhAdXU1Hjx4gFWrVnF+KZp0THJyMszNzZu9HB0duzo0Qggh5B+jw8/ReRt8Ph9eXl5Yvnw5bt68CS0tLYSEhOCDDz6Ap6enOIcWKx6Ph6lTpyI2NrbVNnZ2doiLixPrN4EkJSURGRnJKXvXksiKigoUFhZCS0urxXqhUIjs7GwMGTLkb46MEEJIdyDWRGf27Nnw8vLCoUOHAADp6el4+fIlfH19xTms2DEMA0NDQ+jr67c4l40bNwLAGxMhUfnwww/FPoY4SUhI4Py5s6gRCjF02DBOnVAoxE97dsPUzKyLoiOEEPKuE+utq5qaGnz00UecsvPnz8PKyordfvLkCezs7JCYmIiqqircunULY8eO5ewzd+5cpKWlobKyEnfu3IG9vT1bd+zYMaxfvx6nTp1CZWUlUlJSoKOjg6CgIDx79gyPHj3C4sWLRT43b29v9OjRAwEBAZzy10mOj4+PyMdsr5qaGmzduhU2NjawsbHB0aNHsWbNGkRFRbFtUlJSMGfOHFhbW8PDwwPXrl3jHP+SkhIsW7YM1tbWsLe35+wrClJSUpgz1x2XLl3E3Tt32PLGSc6wYZ+KdExCCCH/HmJNdIKCgrBu3TqEh4fD0tISUlJSLbbbtGkT+Hw++vTpg4CAAMTExGDo0KEAAHt7ewQFBWHVqlUYOHAgtm7dikOHDkFFRYXdf/bs2QgJCYGqqipyc3Px+++/QyAQoH///pg/fz62bNmCgQNF/xtdTZOdf1KSAwBbt27F3bt3ERgYiLCwMNy9exe3b99m6x8+fAg+nw9LS0scOHAAjo6OCA0N5fSxfPlyaGho4OjRo/D398fRo0dx8+ZNkcbZNNmhJIcQQoioiDXR2b9/P6ysrKCsrIyEhASUlpYiICAAcnJynHb79u3DlStXUFlZiejoaMTExMDDwwMAEBMTA01NTcTFxaGkpAR79+7Fy5cvoaenx+5/8uRJnD17Fs+fP8fu3bshKyuLgIAAvHr1CnFxcSgoKMCwJrdFROV1svP777+Dx+P9rUlOTU0NrK2tOa+dO3cCaPgB1tOnT8PHxwdDhgyBmpoafH19UVlZye4fHx8PAwMDzJgxA6qqqrCwsMDo0aPZeoZh8PjxYxgZGeH999/HsGHDcPjwYejq6op8Lq+TncuXL2H79lBKcgghhIiEWNfoAMCVK1dw5coV9OrVC1OmTMH69euhpaXFuf3U+CoD0PCNosbfHurfvz8WLVoEHR0daGtrQ0lJCTIyMmz9w4cP2fc1NTWorKxEXV0dW1ZVVQVZWVlxTA/AXz89UF9fL7YxWiIpKYm9e/dyyhQUFAAAeXl56NmzJ+dKloyMDNTU1NjtnJycZkmLtrY2+57H48HFxQU+Pj4wNDSEnp4eLCwsOMdeXHjgiX0MQggh3d/f9hyd8vJyHDp0CBMmTICdnR2UlZXZOmlpaU5baWlpNnlwd3fHuXPnICkpiejoaDg7OyMnJ+fvCrtNr29XGRsbt7hmR9z69+/PefXp0wdAQ9LVo0cP8HjchKHxt7Jet2mtHgC+/vpr7N69G8OGDUNiYiJmzJiBjIwMkc+j8e2qxYuXNFuzQwghhHSE2BIdVVVVPH/+HJ999hmnvFevXqivr0d1dTVbZmBgwGljZGSEO//7I+fi4oKgoCD4+voiJiYGOTk5UFVVFVfY7dJ0TU5rC5S7Qv/+/SEUCpGXl8eW1dTUID8/n91WU1NDZmYmZ7/s7Gz2fV1dHbKzs6GmpgYnJyds3rwZurq6OHPmjEhjbbomp7UFyoQQQkh7iS3RKS4uxtWrV/Hzzz/D0dERenp6cHV1RXx8PA4fPowXL16wbZ2dneHs7Ax1dXV4eXlh4sSJCAsLAwBkZWVh/PjxGDp0KHR0dBAZGdnsKkRXaG3h8d+d7JSWlnJejx49AgD06dMH5ubmCAoKQmZmJgoLCxEcHMy5YmNra4vExETExMSgtLQUV69eRUJCAlv/6tUreHh4IDY2Fk+ePEFqairS09PRv39/kcXf2sJjSnYIIYSIgljX6Dg5OWHdunUICQmBsrIyiouLsW/fPqxbt47TzsfHB/Pnz8f+/fuRmZkJW1tbpKWlAWj41s+PP/6IP/74A2VlZdiwYQOGDx8uzrDbxOPxkJSUhJiYmBbrvb29YW9vDx6PJ9YHBtbU1MDJyYlTJiMjw15x4fP5CA0NhaenJ3g8HlxdXfH8+XO27aBBg7Bu3Trs2rULO3fuhIaGBubOncsmcYqKitiwYQN27dqFHTt2QFFRETY2Npg8ebLI5lBbW4tRVtYtPjDwdbKTnZUlsvEIIYT8u/CYdvwldnOdiYj9Bxt25IlmseiTJ0/g4OCA3377TST9vauafgyvBC873WdLa3DmzZuHiRMnwtbWFkDD7anGV3muXbuGwMBAxMXFdXr8riCv0LurQyCEEPI3aZyXtEbs37oiXcff3x9ycnJwcnKCvLw8zp8/j5ycHOjr6wNouC24atUqLFq0CJ988gkeP36MPXv2wNjYuIsjJ4QQQkSDEp1ubOHChQgPD4eXlxcEAgEGDx6MTZs2sYu5NTU1MWvWLERERKCoqAhycnIwNzfHggULujhyQgghRDS6PNHp27dvV4fQbfXr1w9+fn5vbPP65yEIIYSQ7qjrv75ECCGEECImlOgQQgghpNvqcKKjpKQkyjj+1Vo6lqL6Vtu/CR0zQgghTXU40QkMDKRkRwSUlJQQGBjYrFxKWob+cLcDj8eDlLT4f4OLEELIu6XDi5Hd3Nzg5uYmylhII5KSkpCUlOzqMAghhJB3Wruu6CgoKCA394G4YiGEEEIIeSu5uQ+goKDQZrt2XdFxdHLG1i2bIRAIOhwYIYQQQkhnKSgowNHJuc127foJCEIIIYSQdwl9vZwQQggh3RYlOoQQQgjptijRIYQQQki3RYkOIYQQQrotSnQIIYQQ0m1RokMIIYSQbosSHUIIIYR0W/8P62LRSt3wcY8AAAAASUVORK5CYII="},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-point-groups-d949b54bdc3583a858a7cc8c46532c90.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/message-bar-d893610affc5c6857a7cbf1546ad8326.png"},,,function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAABMCAYAAAAvHnFsAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjE0OjE5IFBNIFBEVB8XT9UAABJiSURBVHic7Z19WJRlvsc/M8zwKqTgC6QCaokoqUDKaBla6inZarfUyFV78WXPaoqbgPa6bVar7VrannC3PFdd6ba2UaudS3frKsHcTPMCjCSgjgokZwhhFyGYYZiX8wcN6SowzwvtpL+Pl384c/++35tRvzz3zf38HoPH4/EgCILgZxj/3RMQBEG4GBJOgiD4JRJOgiD4JRJOgiD4JRJOgiD4JRJOgiD4JRJOgiD4JRJOgiD4JRJOgiD4JX0STrt37+azzz7rC2lBEC4TFIdTakryeb9vunEGT/7qV7S0tABw8uRJNjz5K55+aoNPeu+//z6pKcm8+sorSqdySbBp40ZSU5KprKz8d09FEPwKVVdO4eHh3HnnXH78k58waNAg9uzZzZqsLDweDyNGjCB33Tpy163Xe65+T2FBAakpyWzf/vK/eyqC8IPHpKYoMiqKhx95BACHw8HiRQs5dqyEz8vKGJeUxF13Zeo6SUEQLj807zkFBgZy3XXXA3Dq1CmamppITUnmgZUru8bU1dWRk53N9PQbmDbtetbl5vD1119fVK+mpoYZM6Yza9ZM6urqLnjf4XDwu9+9wG233sp1U6eweNFCDh061O38/uedd5h75x1Y0iYz55ab2bYtD4/Hg81mI23yJBYvWtg19qH160lNSebtt98C4OzZs1ybmsLyZUsBqK+v56H165k9ayY3TLuerKzV1NTUAJCfn8/atQ8CsC0vj0nXpnbpFhUVcf999zJ1ioXZs2ayZcvzOByO8+ZptVq5//77mGKxkHnXfMrKyrr/0AXhMkCXDfGms00ABIeEXPBeW2srS5fcT2FhATNm3MjsWbPYv38/q1Y9gNvtPm9sS0sLa9Zk0W63s+X5LURHR1+gt+X553n1lVeYOHECy5Yvp6GhkbUP/qIrJM6luLiYJ574JcaAAFasWEni2LFsf/ll3ti1i5CQEMaPH09FRQU2mw2AkpJioDNMOv9cgsfjIc1iwe12k7V6FQcOFHLrrbeRmXk3nxw5QtbqVbjdbsaPH8+EiRMB6NevH1lr1gBQXl7Oip//J6eqqpg7dx4JCQnseO01Nm/+7Xlz/c2zm4iKjGLcuHF8+eWXPLR+PdLNRricUbWs8+J2uykuKuKv+/ZhMplISU6+YMzevXs7rwqWLGHlygcAiIm5kg8+eJ/q6uqucU6Xk9ycbGqqq9m46VnGJSVd1PPW225j6tSpXD9tGgBGg5GtW7dw7FgJsbGx5409efIkALNnzWbxPffgcrk4cKCQUSNHAZBmsVBcXExpaSkxMTGcOXOGyMhISoo7Q8obVhbLFFwuF2vXZhMUHMw111wDQEVlBR/9/e9YrVZGjx7N4kWLWXvsGIsWL2bhwkUAvPrqKzidTjb+eiNpFgsej4fs7LV8+cUX58113vz53HvvfQD8dMECKirKsVqtXHnllb7+dQjCJYWqcKquqiI15bsgMhgMZGfnEBkVRVNT03ljKyorAEibnNb12tJly1i6bBkAJ06cADqXQgCRkZHMnDmzW+/4+HgqKyr45S8fp/Z0LZ9/3rn8cTg6Lhh73XXXEXHFFWzblsd7771LcnIyM2bcSFx8PAAWi4VteXmUlBRjtcZgMBhYtnw5mzZupLa2lpKSEiKuuILExESMRiOxcXHs27uXnTt38NVXX3UFTEfHhd5eKisqCAgIICU1teuz2rz5uQvGJU/87vO86qpRVFSUY2tr61ZXEC51VF853b1gAQYM9B/Qn+uvn0ZCQsLFBypcmjQ3N1NZUUHCmDEXff9ny5dRXl7OTTfNJD09nTGJY/jT669fdGxMTAz5+W/x17/uo7ioiHfffZf8/HyWLFnKipUrGTt2HOHh4ZSUlDBkcC2jExKYNWs2z27axKGPPqKivJwZN96I0Wikrq6OBXdn4nK5uPmWW7g29VoKCgs4cvhwj1+Pr0szY0DAd38wGHyqEYRLGVV7TnHx8WRn57A2O5slS5Z2H0zAmDGJABw8eLDrtZdfeom7M+/i1KlTXa/NnTePvG2/x+Vy8eijj9De3n6BVm1tLWVlZczJyGDjpk0sWryY4ODgbr0rKyo4+OGHZGT8iOee30L+W28DUFhYAIDRaGTSpMl8VlrK0aNHSUtLY8CAAVx99dXs2PEaLpcLS5oFgE8+OcLZs2fJzs7hoYceZt78+di/3avq4ttQcTqd3339iYm4XC4+/rhz097j8fDgL9Zw/333djtvQRA07jn5QkZGBq+++gqvv/5Hmpr+CcC+ffuIi4sjLi6ua1kXEx1DWload2VmsutPf+KFrVvIyV13nlZERASBgYEc/vhjdrz2Gk1NTbz55p+79T5x8gQbNjzJnj27mT37P/jss1IArhk/vmtMmsXC/v0fUF9f37X0nDw5jZ07dwBgmTIFgIEDBwHwZv6btNna+PTYMSoqKs7zGzJkCAB7du+mw9HBqtWrueeeeyksKODxxx4jIyODEydOcvToJ9xxx53qPlBBuEzo83vrQsPCeHn7f3NDejqFhYXsLyjghvR0/uvFPIzGC+1Xr84iPj6eN954o+tqw0t4eDi/3fwcERER/OEPv+fzz8tY/rOfdes9Z04Ga7OzaWpq4oUXtlJcXMyCBT8l95zQs1g6r4wCAwNJTkkBYPLkyQDExsYSExMDwNSpU3nggVU0nGlgW14eISEhZGT86Dy/xMTErr20N9/8M3a7nbFjx/Lii3mMGDGCv/zlL5w48b8sWPBTcnJzlX6UgnBZYZCnrwiC4I9IVwJBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPySPn801PfNaXsbBxu/5kBjHV+0NgMwOiyC9KhopkUNYVhwaJ/4OqtOY3vvQ2x/O0DH8c4nAZuTRhNyczohs2/AFD+sT3xpOY2n5gCe6gN4GisBMEQlYIhLxxCbDuF942u1Wjly5DCHjxzueuz7yJEjsaRZSEuzdD21Rm/c9fV0FBXRUVSE89vH2Zvi4jCnpmJOTcU4eHCf+OJswNN2HE/bcXDUdr4WOBRDaBKG0CQwDewT25rGZj4or+GDsirK/+8fACReGclN4+K5KTGW2KiIPvFtsLVyvLGO4w111H5zFoCh/a4gaWA0SVHRDAwJ6xNfAM+3vy6Zp6/U2tvY8MWnlLU09ThuXHh/Hhs9gaE6hZSz6jT/ePApHMXHexwXmJJE5HOP6hdSLadxH3wSz5mefQ2DkjBOe1y3kLJarWx9YQuVlZU9jktISCBr9RrdQspdX0/bSy/h/PY5h91hGjWK0OXL9QspZwPuhl3QXt3zuKA4jAMzdQupmsZmHs4/yKdf1fc4bsLwwTwzd5puIdVga2VX5TGqm//Z47i4iAFkJkzUNaTcuIHv4qjPwqndbqfD0Y7T6cTtdgFgNAZgMpkwBwYR1MOTepVS2FjHYxUlimo2jElmelS0Jl/bvgIaVzymqCYqbwMhc2Zo8vVUF+AufERRjXH60xjitPke+vgQv/nNs4pqcnJymTplqibfjqNHac3LU1QTtmIF5kmTNPl62krxnNmhqMYwaBGG0PG9D+yB945XsXZXgaKazZkzmJ0Ur8m3tMHKjs+LFNUsGpvK+IHavgF1Xie5L3g94IknnnhCk/K/0G63803zWRztdlwuF+dmn8fjweVy0eFop91ux2AwYjJpW1mqCSaAgoY6RoaFEx/aT5WvmmACsO0twDx6BOarR6jyVRNMAJ6q/RgGjMTQX52vmmACOHToI2JjYxk+fLgqXzXB5K0LGDqUgKFDVfmqCSYA2kohMBqDeYgqXzXB5K27avAARg3ur8pXTTABlJ6xEh0WzpDQcFW+3QUT6Hzl1Nbagt1mA8BkMhMUHIzJHEhAQAAALpcLZ4eDdrsdp7MDgOCQEELD1H1htfY2MosOaJrzrtR0xUs8Z9Vp6qZnavKNLtylfInXchrX2/M1+Qbc8WfFSzyr1cqKlT/X5Jv34jbFSzx3fT3N69b1PrAHIjZtUr7Eczbgrt2kydc4dJ3iJV5NYzMZz7+lyXfvL+5UvMRrsLWy6ajyQDyXdZNmqFriuXF1+55uP607N5jC+oUT0X8AQcEhXcEEEBAQQFBwCBH9BxDWrzOQ7DYbba0tqjw3fPGp5nmr0fjHg09p9lWj4T74pGZfNRpbX9ii2VeNRttLL2n2VaPhbtil2VeNxsP5BzX7qtHYVXlMs68aDXc3V0xedAmndru9K5jCI/oTFBwCwNGSUhavzCFiRDIRI5JZvDKHoyWlAAQFhxAe0XkJarfZaLfbFXmetrf1uvntC2UtTZy2t/k83ll1utfNb19wFB/HWXXa94KW071ufvuC58xxaPHd12q19rr57QuVlZVYrVafx7vr63vd/PYF54kTuOt73lQ+v6Ch981vX2iv7tTykZrG5l43v33h06/qqWls9nl8g621181vX6hu/icNtlaFVT0v2nQJJ1tb56TC+oVjDgykw+nknpW5WG6exx/z36G1rY3Wtjb+mP8Olpvncc/KXDqcTsyBgV1XUF4NXznY+LUeU1esZXvvQ918lWh5arQtX9VqHTlyWDdfJVodRcr3P/TQ8rRp/wagRuuD8hrdfJVoHW+s081XiZanl2ACHcKp3W7H7XZ9u8fUecW0NOthdubv6bZmZ/4elmY9DHReQZlMZtxul6KrpwM6fqhKtGx/0y8klGh5qnUMJwVah3UMJyVal104lVXp5qtE63iDjuGkQOt7CacORztA19GAoyWlPQaTl535e85Z4gWfp+UL3gOWeqBEy3vAUg+UaHkPWOqBEi3vAUs9UKLlPWCpB4q0vAcs9UCBlveApR4o0fIesNQDZVrfQzg5nU4ATOZAAH633fcfv3rHemu9WoIgCJrDyXvA0vtTud373ve51jvWW+vV8oXRYfod21eiZU4arZuvEi1DVIJuvkq0Ro4cqZuvEi1TXJxuvoq0AtWdi9KqlXhlpG62SrSG9rtCN19lWoZeR/xgb/xN13i6W61WyM3puvkq0TLE6eerRMuSZtHNV4mWOTVVN18lWobQJN18lWjdNC5eN18lWkkD9ft/pETL8H2Ek9H43QFLgB/PmelzrXest9ar5QvTotSdwNWqFTL7Bt18lWgZYnUMJwVaaTqGkxKtyy6cEmN181WilaTjN3klWt9LOHlvP3F2OABYtXSRz7Xesd5aJbeyDAsOZVy4uqP65zIuvL+iTgWm+GEEpmj/BxyYkqTshHj4MAyDtPsaBiUpOiEeExNDQoL2JWVCQoKiE+LGwYMxjRql2dc0apSyE+KmgRCkw5IyKE7RCfHYqAgmDNd+s/KE4YMVnRAfGBJGXMQAzb5xEQNUnBDvOaA0h5M5MAig6xjApOTxLJx7e691C+fezqTk8efVerV85bHRExSN10sj8rlHNfuq0TBOe1yzrxqNrNVrNPuq0QhdvlyzrxoN40Bttyap1Xhm7jTNvmo0MhMmavZVo2HsJX40h1NQcDBGYwBOZwft9s5T4tu3PtNjQC2cezvbtz4DQLvdhtPZgdEYoLhTwdDgUDaMSVY99w1jklW1TjHFDyMqb4Nq36i8Depap4QPwzj9adW+xulPq2qdEhMTQ05OrmrfnJxcVa1TjIMHE7ZihWrfsBUr1LVOMQ3EMMj3FcC/Yhi0SFXrlNioCDZnqu8csTlzhqrWKQNDwlg0Vv0yetHYVNWtUww9RJAuXQkMBiMdjnY6HA5MJjNms5mfZMxizsx0bPZ2TlZ9RaDZzPzbb+Hl555i5ZKFBBiNdDgcfNPSecYoNCxcVYeC+NB+jAwLp0DhYTKtLVPMV4/APHoEtr3KbpjU2jLF0H8EhgEj8VTtV1SntWXK8OHDiY2N5dChjxTVaW2Z4u0s0HH0qKI6rS1TDOYhEBjd2WVASZ3GlimjBvfnqsEDeO94laI6rS1ThoSGEx0WTukZ328xAu0tUzr3ngxc7NyTbl0J/vXGX+9p8e5ot9to/abzhl8tnQm8SLO5iyPN5jQizeYuyg+u2dz33TLlYkibXmnT2ydIm94ffpvedrsdW1trrwcqjcYAQkLDdO2IKQjCpcMl0aZXEIRLj0vmAQeCIFxa/GBvXxEE4dJGwkkQBL9EwkkQBL9EwkkQBL9EwkkQBL9EwkkQBL9EwkkQBL9EwkkQBL9EwkkQBL9EwkkQBL/k/wErTlfXHS3OUAAAAABJRU5ErkJggg=="},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-point-sizes-8591d0b3d70acfe4b28d08c74515ed4d.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/header-0cdf3777b66e47f9e5320eee81ac5e10.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-stacked-6a492804251cf9ef3fcd33cf721b725f.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-altair-6b648257bc043077af771b8bbdf91735.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-step-before-45d2a85b93deb34a9e029e0d1ac5e578.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-area-negative-72b6ee9e1692572a50b4f9e5f88db0ce.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/template-1b5f5707f248dfd5a606e722345ad2a2.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-polar-stacked-dbb95e41cc47e31cb7614c6c9f3bf387.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-path-2737001d0f8727c8d62799faf298a88e.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-theta-ecd6315a48713f45d162e64c4414325c.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-area-0a621df3247663494f8a594d65f0516d.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-point-ca45d9c0f59368e2e351f8bc69f5566f.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/meta-redirect-ce65a2bb8925d26db3db00327634b324.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/textbox-trigger-3063508395dc193e6087e98ec3caf604.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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M1GbN21SYGB5J76uqPlUTf34n/9cd7ybNkXo8cefcELoigYNG+r333/X8ePHU3fjaZBZ17wStFeULFVSZ86ckZT4kHxoaDU99NBDOnHihLZu3arFixcpKioq2bsnS5a6+m+b67775HK5VOjBQs42l8ul3Pffr6ioKGdb4hIkz4ABANLP+AzYFTlz5lSdOnVVp05dxcbGaszoUerTp7e++nq58uTJo7Nnz6pAwYLJXlfwbwV19uxZr22WrBSvkdL2EgEBevTRR7V61So98cQTWr1qpUJCqii/n1+qx14iIECFChXS5k2b5PF4FB0drfIVKig4OERbtmzR802bauvWrerdu48kOeNt26Z1smffPB6PoqLOJruGlBirSZ09e1abNkWoYoXyqR7rldcVTOnfsuDfnP1XZowySmZd0+32/pH1cblkezzO9/Pnz9OsmTN1+vRpFS5cWH//+9+VO3fuZB9xcr2fmWvZuvo6liABABnFaIB5PB7t3btXhQsXVp48eZztuXLlUtdub+irr77Svn37VKlSJeXLl0+RkaeSnSMyMlJ58+ZN1zieadBAn82Zo46dOmn9+vUaMnTYzV90jaqhodq0KUK2bD355JPKkSOHgkOCtWDBfP380086d+6cQqokfqTClXt98823FBgYmOxc+fLnT9U18+TNo8KFC+u9995P01jz5cunvXuSPyN2OjJSkpx/T5flHTOSdCnJc3qZcc2MtGXLFo0dM0ZvvvmWGjZq5LybtmXLFhly/rp16ypbkhlZAABuldH1FMuy1KVLZ02elDwgfvwx8Z18V5bXKgcFac3q1V4P6sfHx2vlihUKCg5O1zjqPV1PkZGRmjx5ktxut6pVq5bmc4SGVtOOHTv0/fffO+9c/Mc/ysrj8WjGjBl6/PEnlP9yWOXPn18lAgK0b/8+lQgIcL4eKlxYBw4e9FpmvZFKlSrr1KlTypkrl9d5oqKjdeEGoRRUOUi7du1ylkyv+PKrL1WkSBEVLlxYUmIU/fbbb17HbNu+Ldn5LMtSfHz8Dcea2mtmpKNH/59y5sypZi+84MRXdHS0fj9yJEPOX6duXdWsWTNDzgUAuLcZnQGzLEsdXuug8ePH6cyZs6peo4bcbrd2/fKLli5donr166to0aKSpPbt2mvVypXq0vl1vfRSK1kul+bPm6vTp0/rtdc6pGsc+f38FBwc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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-point-map-13e6e7b5d7bfc7c6337172bb86dc84e2.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjkAAAEXCAYAAABPpVW2AAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjE1OjE2IFBNIFBEVAe5grkAACAASURBVHic7d15eE3X/sfxz4kMomIISVSQ1NyiRSsh5nmoq62h2ntvKUGUVgd0uLRo0eHXibaGGjtd9NbQNrRUqUpatEqomDUig4SQhETm/fsjdTiNEEHD8n49j6dnr732Wt992h6fZ+29z7FZlmUJAADAME4lXQAAAMC1QMgBAABGIuQAAAAjEXIAAICRCDkAAMBIhBwAAGAkQg4AADASIQcAABiJkAMAAIxEyAEAAEYi5AAAACMRcgAAgJEIOQAAwEiEHAAAYCRCDgAAMBIhBwAAGImQAwAAjETIAQAARiLkAAAAIxFyAACAkQg5AADASIQcAABgJOeSLgCA2dLT0hQWHqYdO3bo0MGDSklJlSVLFStWlG9VXzVt2lQBgYHy9PQs6VIBGMZmWZZV0kUAME90dLTmz5+n1d+uVlZW5kX7Ojs7q2PHjnpkwEDdfvvtf1OFAExHyAFwVWVnZ2vunDlauHCBcnJyLutYJycn9e7TR6NGPalbbrnlGlUI4GZByAFw1Zw8eVKjRz+jiO3bHdo9K1VSi+bN1bBRI3l6VpKTk03Hjx/X/n37FRa2UYmJiQ79a9asqXenTZevr+/fWT4AwxByAFwVycnJCh48SFFRUfY2X99qGjFypDp16iRn58JvAdywYYNmz56lvXv22Ns8K1XSwoUfEXQAFBshB8AVy87OVnDwYO36/Xd7W99+/TR69Bi5uroWaYy8vDzNnjVL8+bN1dmPJX9/fy386GN5eHhck7oBmI2QA6DIcnNztXt3pP449IeSk5Pl7Oysyl6VtWnTJq1Yvtzeb+TIxzU4OLhYc4SGhmrihJfsQadXr/s0YeLEq1E+gJsMIQfAJcXExGjhwgVas3q10tLSLtq3d+8+Gjd+/BXNt3DBAr333nT79tx589SkSdMrGhPAzYeQA6BQZ86c0cwZM/T550uUnZ19yf5Vq1bV5//7Qu7u7lc0b15engYPelQ7d+6UJAUFBem99z+4ojEB3Hz4xmMAF5SQcFTBgwfps88+LRBwKleurPr1b1e9+vUdvsTvsREjrjjgSPmPko8ZO9a+/fPPP+vXX35RVlbWFY8N4ObBSg6AAo4ePaqBAx7R8ePH7W2enp7617//rc6dO8vXt5pD/+joaK1fv07/+te/L/oU1eX697/+qd27d9u3nZycVKdOHfXoca96/uMfqlChwlWbC4B5CDkAHGRkZGjw4EEOj3P37t1HTz/9tMr8zV/Q99d7c87n4eGhESNHqm/ffnJyYlEaQEF8MgBwMHPGDIeA89RTT2vc+PF/e8CRpDsaNJC7u7u8vb3l6urmsO/UqVN6/bXX9MILz3MZC8AFsZIDwC4uLk59ej9gDw19+/XTCy/8p8TqOfvxZLPZJEmHo6L03Xff6bP/fqbUlBR7v1atW+vdd6fZ+wGAxEoOgPN88vHH9oDj7e2tZ54ZXaL12Gw2h+Di5++vIUOH6quvvla7du3s7WEbN2revLklUCGA6xkhB4Ck/FWT9evX2bcHDw6Wm5vbRY4onpiYGO3ateuKxvDw8NCbb72trl272tvmzpmjo0ePXml5AAxCyAEgSdq7d4+OHTsmKf8pps5dulz1OWJjYzVs6FCNHPGYw1NTxWGz2TRh4iRVq5b/pFd2drbmz5t3NcoEYAhCDgBJ0pEjR+yv69Ste9Ufz46Pj1fIsKFKSDiqU6dOacRjwx1ucC4ONzc3hQwfbt/+bu13ysvLu9JSARiCkANAknT82LnvxKni43NVx05IOKqQYUMVHx9vb0tNTdVjjw3X/v37r2jsjh07qXTp0vljpqRo544dVzQeAHMQcgBIkjKzMu2vz4aGqyExMVHDhg5VbGxsgX0pKSkaHjJMBw8cKPb4bm5uuuOOO+zb0dHRxR4LgFkIOQAkSZU8K9lfJ504cVXGPHbsmEKGDVVMTEyhfZKTkzV8eIgOHTpU7HkqV/ayv046kVTscQCYhZADQFL+I+NnHTp48IrvbUlKSlJIyDCHlZWzNwlL+T/mefabik+cOKGQkGGKiooq1lwZGRn216VLX/lvZwEwAyEHgCSp0Z13ytXVVVJ+6Dj7C+DFkZqaqpBhQ3X4vNDy+ONPqMe999q3m959t155ZfK5oJOUpJBhF76sdSmxsedWiipXrlzsugGYhZADQJJUpkwZNQsIsG//97NPiz1W2bJlVf/22+3bI0c+rkGDBxfo1617d70yeYo96NSqXfuyQ0p8fLwOHjxo3779vHkB3Nyu3s8FA7jh9e3bV+FhYZKktWvX6rffflPTpk0vexwnJye9/PIrsvLyVLNWLQ0ODi60b7du3SRJK0O/1ptvvX3ZX0D46Scf21/Xq1dPvr6+l10vADOxkgPArk2btg6h5vnnnlVCQkKxxnJyctLkKVMVHDzkkn27deum997/4LIDTmRkpJYuXWrf7tO372XXCcBchBwADp57/nm5u+ffvJuUlKQhwYMdLgddjmv5g5lRUVEa/czTys7OliT5+fnp/vsfuGbzAbjxEHIAOKhdu44mTnrZHlDi4uI0cMAjmjt3jjIzMy9x9LWXl5enFStWaOCAR5SYmChJcnV11cuvvKJSpUqVcHUArifckwOggE6dOunFl17S1ClTlJOTozNnzmjmjBn6+KOP1KpVK915V2N5eXnZV3wupnbt2g6Pp19IakqKfr/Ij3ZaeXk6mZys/fv3af26dQ5PYDk5OemllyaoYcNGRT9BADcFQg6AC7rvvvtVvXoNjR/3H/t9OWlpaVq9erVWr15d5HEmTpykf/TqddE++/fv1xOPj7zsGj08PPT6628osHnzyz4WgPm4XAWgUE2bNtXyFV/qsREj5OHhUdLl2JUqVUp9+/bVsmXLCTgACsVKDoCLcnNz05AhQ/Xoo4O0ZcsWhYdtVFxcvI4dS1T6mTOXPL6sR9lL9ildurT8/P0L3V/KyUkVK1aUl7e3mt3TTO3at7/qv5IOwDyEHABF4uzsrKCgIAUFBV31sRs0bKhly5Zf9XEB3Ny4XAUAAIxEyAEAAEYi5AAAACMRcgAAgJEIOQAAwEg2y7Kski4CwM0hPT1dZ/587NzNzU1ly1768XIAKC5CDgAAMBKXqwAAgJEIOQAAwEiEHAAAYCRCDgAAMBIhBwAAGImQAwAAjETIAQAARiLkAAAAIxFyAACAkQg5AADASIQcAABgJEIOAAAwEiEHAAAYiZADAACMRMgBAABGIuQAAAAjEXIAAICRCDkAAMBIhBwAAGAkQg4AADASIQcAABiJkAMAAIzkXNIFACjo7qZNSroEFMPW37aVdAkAzsNKDgAAMBIhBwAAGImQAwAAjETIAQAARiLkAAAAIxFyAACAkQg5AADASIQcAABgJEIOAAAwEiEHAAAYiZADAACMRMgBAABGIuQAAAAjEXIAAICRCDkAAMBIhBwAAGAkQg4AADASIQcAABjJuaQLAHBthK5cpfLly9u3LctSSkqKtm37TR/Onq2YmJgSrA4Arj1CDmCw/fv3a2Xo15Ikm5OTfHx81KPHvZo1+24NeOQRnTiRVMIVAsC1Q8gBDBYXG6ulS5c6tK0MDdVHH3+iXvf10sIFC0qoMgC49rgnB7jJREVFKSHhqKpXr2Fv696jhzaGhatBgwZ68623tPb7dRr5+OP2/TVr1dLkKVMVunKVVq/5TjNmzlRQUEv7/rsaN9bGsHB17NjRYa7/jBuvjWHhanr33Q7tb731tpZ8/j/7dqlSpTRg4EAtWrxY69b/oGXLlmvEyJFycXFxOM7Dw0NPPfW0li1bru/WrtX8+Qv0YP/+cnLiowxAQXwyADcZT09PVa7spcTEhAL7Jk6cpKNHj+rVqVP0/dq1kqT69etr1qzZqlWrlhYvWqQ5cz5Ubm6uXnv9dfXs2VOStHPHDqWmpiogINBhvHvuuUeSFBAQYG9zdXXVXY0bKzw8zN72xKgnFRw8ROFh4Zo6ZYpWrlqpPn366vnnX7D3cXd314yZs9S5Sxd9u3q1Pnj/fR04eFAjRz6uMWPGXr03CIAxuFwFGMzF1UWenpUkSTabVL16DY0ZM0ZxsbFavGhRgf6rvlmlBfPnO7SNGfusTpw4oSFDgpV2+rQkaekXX+iVyVM06smntGHDBp06dUqbNm1Ss/PCTM2aNeXl5aWIiAgFNAvQrJkzJUmNmzSRm5ubwsPC7X27d++uVStX6v3337O37d27VzVq1JDNZpNlWRowcKC8vLw0JDhYMTFHJEkrVqzQ3j279dTTz+iLL/6nQ4cOXaV3DoAJWMkBDBYU1FJffvWVvvzqK6348iu99/77citdWm+99aZSUlIK9F+/bp3Dtq+vr+rVq6fFixfZA46U/6TWgvnz5e7urpYtW0mSfgoPk5eXl2rWrClJahYQoKSkJH3y8ceqXaeOKlSoIEkKDAhUWlqaIiK228c7efKk6tWvr8qVK9vbwjZu1H8/+0yWZUmSOnfuovCwMCUnn1TZsmXtf9av/0GWZRVYRQIAVnIAg+3YsUMff/SRfbt8+XLq0rWrpk1/T++8/baWL1/m0D8nJ8dh27daNUnSvr17C4x98OAB5eTkyLearyRp0+bNys3NVUBAoA4dOqSAZgHasnmztm/fpuzsbN1zTzOtXfudAgIDtXnzZoe53nn7bU16+WUtXbZckZGR2r59m9atW6f9+/ZJklxcXOTj46MuXbuqS9euFzxXz0qexXiHAJiMkAMY7OSJE9q8eZND25o1a/Ta629o+GOPadWqlcrMzCz0eJtskiSrkP2WZclmy++Tdvp0/qWpwEAtXfqF7rzrLr322qvKzMzU9u3bFRAQoB07IuTv769PP/nEYZzNmzfpwX591aZNGzVu0kSdO3fRv//9iBYt+q9mfPCBfY7w8HAtWVzwMpskHTt2rChvCYCbCCEHuAlt+GG9WrZsKR8fH0VHRxfaLzY2/wsD69apq92RkQ77brvtNrm4uCj2vC8VDA8PU0jIcAUEBMjV1VW//vKLJGnLls3q3/8h7di5Q3l5edq06ecCc6Wmpio0NFShoaGy2Wx6+pln9PDD/9RXX36lmJgjOn78uE6eOKFt27ZdjbcAwE2Ae3KAm1Djxk2Um5urEydOXLRfTEyM9u/bp/4PPaQyZco47Bv46CBlZGQoLOzcU1I/hYfL1dVVw4aFaO+ePfb7fjZv2iQvLy/17/+Qfv/9d4f7gby8vfXW2+8oIPDcPTWWZSnqjyhJ0i235M+7fv06dezUSdWrV3eoo0OHDpo3f75q1qplb/Pz91e1ao79itoGwBys5AAGq1q1qu6//377tke5cmrcuIkCAgK0YvlynT7vZuLC/N+b/6fp09/Thx/OUWhoqDIyM9SmTVs1a9ZM//fGGzp16pS9b0xMjA4fPqyatWpp4cJzXzQYFRWlY4mJ8vf318yZMxzGTzp+XJUqeeqllyZoyeJFSkhIkP9tNdWvX19FRkZq35/35cyfN08tWgRp9odz9OWXKxQbG6uaNWvq/vsfUNQff+jInytSFStW1IIFC5Wbm6v7ev1D6enpRW4DYBZCDmCwOnXravR53yFz5swZHTkSrenTpmnp0i+KNMbuyEg9NjxEwcFD9MiAAXJ1ddGB/Qf0wgvPK2zjxgL9fwoPl5+fn7Zs3uLQvnnLFvXs2VM/hYc7tOfl5enpp57S0KHD9EDvPqpYsaKSkpL09ddfa/68efanq06fPq3hIcM0aNBgde7cRZUqVdLJEyf05YoVmjtvrrKzs887xyPKyMhQRkbGZbUBMIvNOvsJAuC6cXfTJiVdAoph62/cLwRcT7gnBwAAGImQAwAAjETIAQAARiLkAAAAIxFyAACAkQg5AADASIQcAABgJEIOAAAwEiEHAAAYiZADAACMRMgBAABGIuQAAAAjEXIAAICRCDkAAMBIhBwAAGAkQg4AADASIQcAABiJkAMAAIxksyzLKukiAAAArjZWcgAAgJEIOQAAwEiEHAAAYCRCDgAAMBIhBwAAGImQAwAAjETIAQAARiLkAAAAIxFyAACAkQg5AADASIQcAABgJEIOAAAwEiEHAAAYiZADAACMRMgBAABGIuQAAAAjEXIAAICRCDnAeTb9/LOGDglW61Yt1aVzJ02cOEEJCQlXZeydO3eqVcugqzJWSWvRPFCRkZFF7l9S556bm6s3Xn9d7dq20XPPjlVaWpp63ttDP/zwgyTp2bFjNHv2rGsyd4f27bT111+vydgAioaQA/xp5cpQPfXUk7rzrrs0/b339OJLLykxIUGPDhxw1YIO/l4bf/xRK1eGatq06Xpm9Bi5u7urW/fuuu2220q6NAB/A+eSLgC4HiQnJ+v1117TuHHj9Y9eveztLVu20lNPjtLbb7+l119/owQrRHEknUhSrVq1dFfjxva2xx9/ogQrAvB3YiUHkPTD+vXy9PR0CDiS5OTkpOGPjdAP69fr1KlTkvIvcUyb9q4eGx6igGb3KCYm5oJj/vLLFv3znw+rRfNADXp0YIHVoA7t2+nzz5eoT+8H1KN7d0lSRkaGpk+bph7duymoRXOFhAzTwQMHHI77/PMlurdHd7Vo3lwTXnpRn37yiZ58clSh57Z161YNHRKsVi2D1L1bV304e7Z935Ili/Xkk6M0c8YMtW/XVm3btNY7b78ty7LsfeLj4/XE4yPVMqiFet7bo0iXYIpz7jk5OXpv+nR16dxJrVu11KgnHlds7Ln39mytn376idq3a6t2bdto8uRXlJGRccEaxo8fp6lTpigiIkJ3N22ihQsW2Ocu7Bx2/f67Bg8epJZBLXT/fb20ZMlih/2bN21Sn94PqEXzQPXr20c///zTRd+HuLg4DR70qL3/tm2/OexfuTJUvXs/oJZBLTRgwCPasmWLw/mOGvWEXn11qloGtdCKFSuKVCOA81gArFdfnWpNnDDhgvvy8vKsoBbNrW3bfrMsy7LGjhlttWvbxvpm1Srr+PHjVk5OToFj/vjjD6t5YKD18UcfWTExMdb336+1ev2jp9UyqIW9T/t2ba2+fXpb27b9Zp08edKyLMt6/bXXrP4P9rN27txhJSQkWFOnTLYe7NfPfszKlaFW2zatrXXrvrdiYo5Yc+Z8aHXq1NEaNeqJC9aekJBgNQ8MtBbMn28lJiZa27b9ZrVv19b6/vu1lmVZ1uLFi6xWLYOs2bNmWSkpKdb2bdusVq1aWqtXf2tZlmVlZmZa99/Xyxo/bpwV9ccfVkREhDV0SLB1z91NrV27dl1wzuKe+9Qpk63+D/aztm/bZh0+fNiaOmWy1aN7Nyvt9Gl7rW3btLamTJ5spaSkWEePxlsjRjxmvfD8cxesIzs72/rss0+tf/3zYSszM9PKzc21z/3rL7/Y/13OmjXTsizLiouLs1q1amnNmzvXio2NtcLDw62OHdpbS5Ystu8PaHaP9c0331hJSUlWaOjXVpvWraxTp05dcP727dpavR+439r4449WVFSUNX7cOKtzp472OtauXWu1atXSWrfueysuLs5avHiR1Tww0NqzZ4/9fJsHBlgfvP++FR8fb6Wnp1+yRgCOWMkBJJ1KTVW5cuUuuM9ms8nDw0MpKan2tg4dOqhb9+6qVKmSSpUqVeCY//3vc7Vu3UqPDBggX19fdejQscAqkSQNGjxYjRs3UYUKFSRJo8eM0Zy589SwYSN5e3ur/0MP68CB/UpPT5ckffbpZxoWEqL27TvI17eahgwZqtv8/Qs9L29vb6365hs9OmiQvLy81LhxEzULCFBERIS9T9myZTUsJETlypXTXY0bq2PHjtr22zZJUnh4mNLS0jRh4kT5+fvrzjvv1IiRI5WXl1fonMU599TUVC1fvlwTJ03SXY0bq0aNGnr+hf/IrXRpfbv6W/sxubm5GjN2rMqVKycfnyr6z3/Gac2aNUpKSiowvrOzs1xd3eTq5iZXV1c5OV38427JksXq0L69BgcHq2rVqgoKCtLTzzyjL1d8KUlKTEyUi4uLWrVqJU9PT917b0+tXvOdypYtW+iYDz/8T7Vq3Vp+fn569rnnlJSUpOjoaEnSwgXzNXbsWLVv30G33nqr+vd/SN27d9eqlSvtx3t7e2vEyJGqUqWK3N3dL1kjAEfckwNI8ihXTqmpqYXuP3XqlMqXPxeCvH18LjrewQMH1SKohUPbHXc0KNDPx9txHJvNpu3bt+nXX39V9OFo7du3V5KUlZWlMmXK6MCB/WrYsJHjuA0a6I8//ii0lqysTH366Sfav2+fjhw5osjISD3wQG/7/urVqzv0L1++vJKTk+3nUb9+fTk7n/uoqF//9osGhuKc+6FDB+Xs7Ky6des5vBd33nmn9u7ZY2/z8/OTq6urfdvX11ceHh46cOCAKlWqVGhNRbF3zx5t2bLF/uSVlB+q3NzcJEmNGjVSg4YN9cD996l16zZq3qK52rVrf9Ex/c8LoB4eHnJ1dVV6erosy1JkZKQmTZyot958094nKytLbdq0sW/7/OW/s0vVCMARIQeQVL9efX300cIL7tu9e7dycnJUq1btyxozNyfXYTsvN7eQnue8OH6cPYQENAtQ+QrlNXDAAEmSZVnKy8uTk5PN4ZgLrSSdtWfPboUMG6YOHToqIDBQDz7YX59/vuSyziPnL3VbluVwz86FXO65X2q8s7Kyswscl5OTI5vNVsgRl2fAwIHq1+9Bh7azgc7JyUmzZs3W9u3btOnnTZo3d55mz5qljz7+pNDVnEvVNW3adNWsVcuhrXTp0sWuEYAj/s8AJLVr315JSUkKDQ11aM/Ly9OsWTPVrn17eXh4FHm82nVqa+tvWx3adkXuuugxeXl5Wr16tSa9/IoGDByolq1aKSvr3F/qNptN/v7+Bb6fZu+evYWOuWHDBjVs1EgTJk7Uvff2VIOGDXX0Mh6Hr127tvbs3q30tDR7W+SuXRcNJcU591o1ayknJ0e7dp3rl5OTo4jt21Wvfn17W/Thwzp9+rR9++DBA8rIyFCtvwSF4qhTp64SExNVtWpV+5/MzExlZmZKktLT0xUVFaUmTZrqsREj9N9Fi5SSkqLNmzdf9lw2m0316tfXsWPHHOY7duzYRQPLpWoE4IiQA0iqUKGCnn3ueU1+5WV98MH72r59m8I2btSoJ57Qnt279cwzz1zWeP369tNvW7dq3ry5io2N1dq1a7V69eqLHuPk5KTq1avrm1WrFBsbox07djhcypCk/v0f0oezZyts40bFxcXps88+1e7dhX8pn18NP+3bt09bt25VXFyc5s6do507dhT5PIJatlSFChU0YcIEHY6KUkREhGbOnOlwyehqnHu58uX1QO/emjDhJUVERCg6OlpTJk9WVlaWunXtZu9XpkwZTXjpRR06dEi7du3SxAkT1KVr1yu+VCVJD/bvrx83bNDChQsUGxujX3/5RU+OGqVvv/1GkrR1668aPOhRbd60SYmJiVq5MlSpqany9/Mr1nwDBz6q996brrVr1youLk6rVq3U8JCQAk/TXU6NO3fu1KBHByouLq5YNQGm4XIV8KeePXuqYsWKmjdvrhYvWqTSpUurRYsW+ujjT+TjU+WyxvLz99e706br3Xfe1tw5c9SgQUM9O/ZZjRkz+qLHvTttul58cbz69umr227z1+DBwXruuWft+/v266e09DRNmTJZyckp6ty5kx566GH9vuv3C47XtVs3xcTEaOyf83bt2k2du3Qp8nm4urrq/Q9maMqUyXr44YdUubKXJr08SaMvEvqKe+5jxz6rGR98oDFjRutMerqaNm2qD+fMUZlbbrH3qV27tlq0CNKQ4MHKzc1Vp86dNXbssxcZteiqVaumWbNm65133tGcDz+Up6enevS4V8HBQyRJrVu3UfCQIXrllZd1/PhxVatWTVOnvqpatS/vMuZZXbt2VU5OtmbNnKG4uDhVq15dEydN0t333FPsGlOSkxV1+LDOnDlTrJoA09isol4MB3BdyM3NdbgPZ9q0d5Vw9KimvvpaCVZ17S1Zsljfr12rD+fMLelSANwguFwF3EA+/3yJBg8apIjt23X8+HFt2LBBK5YvV6vWrUu6NAC47nC5CriB9Op1n+Lj4/Xii+OVmJioKlWqaNiwEPXocW9JlwYA1x0uVwEAACNxuQoAABiJkAMAAIxEyAEAAEYi5AAAACMRcgAAgJEIOQAAwEiEHAAAYCRCDgAAMBIhBwAAGImQAwAAjETIAQAARiLkAAAAIxFyAACAkQg5AADASIQcAABgJEIOAAAwEiEHAAAYiZADAACMRMgBAABGIuQAAAAjEXIAAICRCDkAAMBIhBwAAGAkQg4AADASIQcAABiJkAMAAIxEyAEAAEYi5AAAACMRcgAAgJEIOQAAwEiEHAAAYCRCDgAAMBIhBwAAGImQAwAAjETIAQAARiLkAAAAIxFyAACAkQg5AADASIQcAABgJEIOAAAwEiEHAAAYiZADAACMRMgBAABGIuQAAAAjEXIAAICRCDkAAMBIhBwAAGAkQg4AADASIQcAABiJkAMAAIxEyAEAAEYi5AAAACMRcgAAgJEIOQAAwEiEHAAAYCRCDgAAMBIhBwAAGImQAwAAjETIAQAARiLkAAAAIxFyAACAkQg5AADASIQcAABgJEIOAAAwEiEHAAAYiZADAACMRMgBAABGIuQAAAAjEXIAAICRCDkAAMBIhBwAAGAkQg4AADCSc1E6ZWdnKyszQ5ZlXet6IMlms8nVrbRcXFxKuhQAAG5YRVrJIeD8vSzLUlZmRkmXAQDADa1IIYeA8/fjPQcA4MpwTw4AADASIQcAABiJkAMAAIxEyAEAAEYi5AAAACMRcgAAgJEIOQAAwEglGnKWLf1C361ZXaB9+/ZtWrb0CyUmJhZpnKzMTC1b+oXCwzZe7RIdhG38UcuWfqGszExJ0vp132vZ0i905syZazovAAC4fKzkXAEnJ6c//2kr4UoAAMBfEXKu+jAfpQAABHhJREFUwNmQY7PxNgIAcL0p0g90lrS1363RmTNnFBAYqIjtEcrIOCNvb281aXq33NzcLnhMenq6dkRE6Nix/EteXl7euvOuu1SmTBlJUm5urvbs3q2YmCPKyMhQuXLldEeDBvLxqSIp/2cVfv99pw5HRalUqVKqW7degTnOreQQcgAAuN7cMH875+TkKGJ7hGrUqCFvHx/FxcVp088/Fdr3xw0bFB8fp+rVa6h6jRqKj4/Tjxt+UHZ2tiTp9507tXfvHlWqVFm3336HMjIy9fNPP+n06dOSpN2Rkdq/b59cXd1U1ddXBw8eVHJyssM8Z1dwCDkAAFx/boiVHCl/ZaVxkyby9vaWZVna8MN6JSUlKSUlRe6lSzv0jY4+rPT0NNWtW08NGzWSJLk4u2jv3j2Kjj6sWrVqy8/PTz5VfFSlyq35B9nyg0/S8eO65ZZbdOjQQZUqVUqt27SWu3sZnambru/WrHGY5+y9ODYb9+QAAHC9uWGWIGw2mypXrmx/7eXtLUk6lZpaoO/ZFRefKlXsbVX+fJ18Mn9fWQ8PZZzJ0NZff9GPG37Q7shISVJeXp4yMzOVlZWl8uXLy909//KWu3sZlS9f3mEeJycn2Ww2Qg4AANehEl3JcXZ2VmZWVoH2rMws+/7zWZZlf52Xl1f4wNZFmv7MIxt/3KDk5GT5+vrq1lurqkKFijpwYP9F6/3rsH7+/qr0Z/ACAADXlxJdyalY0VNZmZnav3+fve1EUpLi4+Pk7OyscuXK2dsty1JCwlFJ+QEnISFBkhz6nFWhYgVJ0tH4eHvb2dcVKlRQWlqaTp48qRo1aiggsLnq1K2rUqVK2fu6ubnJ1dVVKSkpSk9Pl5R/I3PKX+7JqVjR036jMgAAuL6U6EpOg4YN9eOGH7Rzxw5FR0fLxcVFJ5KSlJeXp4aNGjms5NhsNu3csUOJiYlKTUlRakqKKleurHLly9u/nO+sGjX8tG/vXh04sD//RmObdDgqSu7uZVSjhp+k/EtNCQkJ2r9vnzKzMnXo0CGHuW67rab27t2jsI0/yqdKFSUcPSpnZxfl5uba+238cYNSU1PVpWtX3XJL2Wv8bgEAgMtRois5np6eatuuvXyqVFF6WppOnjih8uXLq1mzgAKPbNtsNjVpercSExKVnJysqlWrKrB5iwuO6+zsrDZt2+nWW6sqJjZGMTExuvXWqmrbrp1cXFzk4uKiFi2C5Orqqt27I5V88qRuv/12hzHuaNBAderUVVZWlmJjYnRbzZryrOTp0MfDw0Pu7mXk4uJ6dd8YAABwxWzW+Te6FOL0qYI39/6d1n63RqdPn9b9D/Qu0Tr+bmU9Cl6KAwAARXPDPF0FAABwOQg5AADASDfE5aqbFZerAAAoPlZyAACAkQg5AADASIQcAABgJEIOAAAwEiEHAAAYqUghh1/Z/vvxngMAcGWKFHJc3Urzl+7fyGazydWtdEmXAQDADa1I35MDAABwo+GeHAAAYCRCDgAAMBIhBwAAGImQAwAAjETIAQAARvp/BCRisf9kDq0AAAAASUVORK5CYII="},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-line-labels-no-overlap-6597ed5a76ab4f19c1f7e189cbc21624.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-vegalite-form-0d561c88fa3bbc9f612e304db9a412b4.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/color-picker-d5462fd8a2dcc2b3d980e2402a61d930.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-form-7b7c198bf0e0f55d1d9389b4f4dcff1a.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjoAAABCCAYAAABepnxFAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDEyOjU0OjUyIFBNIFBEVNkNx8MAAB2gSURBVHic7d15XM3Z/wfw173dyhIZU2EaYiiMiVFpU9pIKFkiZatRiayZoiYqyxjET9mVZaxlKaXQEIMxX4OUrV2ptFDGkrZb3c/vj759dFtU3Cv6vp+Px308+nzO+XzOcg+9O+fcz+UwDMOAEEIIIaQN4rZ2BQghhBBCxIUCHUIIIYS0WRToEEIIIaTNokCHEEIIIW0WBTqEEEIIabMo0CGEEEJIm0WBDiGEEELaLAp0CCGEENJmUaBDCCGEkDaLAh1CCCGEtFktCnR++ske6mpDoa42FBrqajAbbYoAf39UVFSweYyNDBF7547IK/olO3jgABYvXiSWe69YvhyhoafFcu/aSoqLsWnjBpiOGgkdbS3Y2trg0qVLYi/3Y9Qer7VfZyMiWrtqH2Xnjh1Y4OLSYJrleAuxte/q1atYuKDhcgkh5HPFa+kFs2fbwWrKFDAMg6ysTGzcsAElpSVYscJDHPUj75GUlIi4uLtY9+uv7LlRo0Zi7dp10NLSEmlZy5e74/Xr1/BdvRoKCt1w585trPTyAo/Hg6GhoUjLEqWa8Vpbly5dWqk2XzYDAwME+G9F7J07UNfQaO3qEEJIs7Q40OncuTO++eYbAICioiKWurpixfLlcHVdBikpKZFXkDTu9KnTMDEZCQkJCbGWU1BQgL///hvnL0RDQUEBANC3b1+UlZXh3r34zzrQqT1eyccbYWCA0NDTFOgQQr4YH71Hp18/ZZSXl+Ply3/rpZWVlSHA3x9jx5hBV0cbc+c64XFaGpteVVWFbdsCYDpqJHR1tLHMdSlevnzZYLrBCH0sc12K7OzsRuuSk5MDjxUrYGxkCIMR+ljp5YW3b9+y6cZGhoiMjMSM6bbVyy8205CclNTo/SorK7EtoLp8fb3hWLRwAXJynrLpISHBWLRoIdav/xXDdXVw5swZ9vy4sWOgo60Nb+9VQkt7zWmXu9vP8PffinnOc6E5TANPnz5FQ65fv4ZhmsMAAEVFRVBXG4p/X7zA/HnOGGM2utE6RkdHw3TUSAgEAvZeeXl50FBXQ2ZmZr1yeLzqeLjg+XOh87Nn22Hx4iUAgMdpadAbrovbt2/BwnwcdHW0MX/+PKG6NzUejI0McSYsDFOnWEFHWxvLlrkiPz8fy1yXQldHG5MmTkBsbGxjb9cHuXP7NmxtbaCjrQV7u9m48ddf0Buuy6bz+Xz89tt6GBkawMjQAEeOHIa72884fOgQm+fI4cMYbToKujracHJyFBojdb148QLL3d0wQl8PxkaGWL/+V5SVlbHpzX3vmys2NhaODnOgN1wXY8xGY++ePWxaSEgwFi9ehC2bN0NfbzjGjjHDlSuXcf7cOZiPGwt9fT34+HijqqqKvUZLUws3btwAwzAAgMLCQow0MUZYaOhH1ZMQQsTlowOd3JwcSEhIQFa2/nJAgL8//v77BjZu2oQz4RHoraQET09PNn3LZj9cv34dGzdtwvHgELTv0AFz5zqx/4nWpG/e8n84cvQYunz1FZznOqG8vLxeWQzDwHXpUgDAwd8P4dDhI8jOzsKunTuE8h05fAgrV3njj4uXoKyiAk/PxpfcNm3cgBs3/sKmTX44euw4evToASdHR5QUF7N5bt+6BdnOsjgdGobRo0cjPPwMdu/eDTf35Th1+jT69O6D4ODjQvdtTrvOhIXB0nICzl+IRo8ePerVraCgAAUFBRg48HsAQKdOnfCfm/9ARkYGW/39ER5xttE6GhgYoKSkBPHx8WyemEuXMHDgQCgpKdUr66uvvoKl5QQsXLgAgXv3IiUlpcH+Ki8vx4EDB7Br9x5cvBSDAf0HYP48Z7ZdTY0HAAgLC4Pf5i04dfoUHqelYcZ0W0y2moKYy1dgaGgEH+9Vjb5fLZWVlYVFixbCdJQpTp0+jekzZmLTpo1CeTb8th734uPhH7AN+w8cxP179xAXF8emnz93DkeOHIbf5i04Ex4BFRUVeK/ybrC8yspKuMyfBw6Hi98PHcaOnbuQlpqGX34R7oOm3vvmev78ORa4uGD4cD2EnQnH+t9+Q3DwcVy+HMPmib1zB926d8P5C9GYam2NlV5eiImJwdFjx3Hw4O/4z99/4/y5c2z+/gMGoKioiA2IpaSk0KdPH8jLy39wPQkhRKyYFrC3t2MO7N/PHufn5zE/2dsz7u5u7DkjQwPmzu3bDMMwTGVlJfPmzRs27fHjx4za0B+Z4uJi5s2bN4zmMA0mOTmZTS8tLWWOHj3CpmtraTLZ2dlCdRhvYc5cvfpng/UrKipi+Hw+e3wiJISZbmsjVLew0FD2ODc3l1Eb+iPz8uXLevd6/fo1M0xDnUlMTGDPCQQCZuLECczp06cYhmGY4ODjzHgLc6HrrKdOYYKDjwudc57rxCxatJBhGKZZ7XL7eRmz2tenwTbWSEhIYNSG/shUVFQInR850oS5efMme9xQHRmGYTw9PZiNG35jj2fPmskcOXK40fIEAgETGXmWsbebzairDWUszM2ZM2fC2PS01FRGbeiPTHx8vNA148aOYf74I5phmPePB4apfn+ioiLZdP+tWxnnuU7scX5+PqM29EemqKio8Y6pxd7ejhmmoc5oa2kKvWqu37J5M+O6dInQNbt372KG6+owDPNuDCQlJbHpJSUlzHBdHebQ778zDMMw+4KCmDk//cQIBAK2jbXHYG1Xr/7JmBgbMeXl5ey5Z8+eMepqQ5knGRkMwzTvvd+xfTujoa5Wr13aWpqMutpQJiI8nM3777//Cl3r7u7GbNmymWGY+mOjrKyMURv6IxMXd5c9t9rXh/HbtIk9FggEzDANdebWrX/eW0dCCPlctHiPzrZtAdizZzcYhkFlZSWG6+nB0/OXBvNyOBzEx8fhzp07yMrMQkpKMoDq5YAnTzLQoUMHqKiosPnbtWsHW9vpAID4+Djw+XxMt7URumdJSQny8/MbLI/L4eD8+XN49PAhsp8+RcKjR+yekho9e/Zkf5aVlWXvWXeDanr6Y/B4PKio9Bdqz+DBg4WWu7p168b+zDAM0tPT8cOgH4Tu9f33g5D2uHqJ5vHjtGa1S6HWfRtSUlwMKSkpdlnpfbo1cC8zMzOsW7sWP7u54/nz53j06BH8Nm9p9B4cDgfjxplj3DhzFBQUICoqEhs3bEBpaRmmTZvG5lPu10/omgEDBiI1JRWjRpm+dzx06NChuq4K7+rK4/HY8wAgLS0NoHrmSEZGpsl2A4CNjS0mTpokdK7mnqmpKRg2TFMobdD3g9ifM9LTISHBg7KyMnuuffv26NOnD3s8ZuxYnDp1ElaTJ0FPTx/6+vrQGDaswbqkpKSg/4ABQnvZFBQU0KNHDySnJEOpd+/qc0289wAwePAQrFxVf3bLZf48oWM+vxxHjhxGakoKsrOzkZCQgIkT3/VH7bFRM5bat3/X51JS0kIzjRwOB7KysiguLmmyjoQQ8jlocaBjNWUKbGxsweFw0LVrV3Tq1KnRvCu9fmH/Y9UcpgnZLrKYPWsWgOqgoPYekQYrx+PheHBIvfM1AUptJcXFmDFzBropKMBk5CiMGmWKjIwMnDx5ooUtBFu/D1VZa08DAFQJhI9b0q7GdOjYEXw+H2VlZWjXrl2L66ijo4tyPh/3793Do4RH0NDQgJycXLOulZeXh52dPWQ6yiA4+LhQoFNRWSmUl1/BB4fDAfD+8SAuX331FXr/N4Coq0ogAIfLETonwZMQSudyOWz92Ty1Nn/36NEDYWfC8fffN3D71m14enpg2LBhWPfr+voFMgAHnPrnP0D79u0bbFftwDcpKRFznZxgbGwCTS0tTJ1qjRMn6o+7liouLkbHjh2azkgIIZ+BFu/R6dG9B3r37g0lJaX3BjkCgQDR0dHwXb0Gs2bPxnA9PfD57zbl9u3bD6WlpUhMTGTPlZaWIiQkGCUlJfiuz3dgGAYVFRX45ptv2FdWZiYkJSXrlZeYmIjnz55h+46dsLKygsawYXj16lVLm/euft/1RWVlJR49esSeq6ysxL34ePQfMKDBazgcDvr27Yu7dTbMJtS6R0vb1ZiaoOTFixfCdQCAZgRpPB4PI01G4uKli7h08SLGjB3baN6LF//AeAsLVNYJYkpLS+sFWXX7KykxEf2U+zU5HlpDnz59kJiQIHQuOSmZ/bm3khL4fD7S09PZc3WPX7x4gVevXsHIyBjuy5dj+46duHDhAl6/fl2vPJX+KkhKShTa45WTk4O8vDz0rzVzKCpXr17FD6qq8Pbxwbhx5hj0ww/If/bso+5ZXFyM8vJyyMsrNJ2ZEEI+A2J7MjKXy0XPnj1x/tw55OQ8xf3797HZz49N79y5MyZOnAjvVSsRHx+HJ0+eYO2a1Th96hTat2+PzrKymDBhIjw8ViA+Pg7Z2dnYFhAAD48VKCstrVfetz2/BZ/Px7moKOTl5eHSpUsf9ddrZ1lZTJw0Cd7eq3Dv3j1kZWVh3dq14PP5MBtt1uh1trbTERQUiD+vXEFOTg6CggKRlZUldN+WtKsx8vLykJeXZ5d/asjJy+Pylct48uRJk/cwMzPDuagoJCUlwdjYpNF8Ojq6KC8vw5LFi/HPzZt4+PABDuzfj507d8BqylShvEFBgYiPj0NmZiZW+/qgffv2MDAwbHI8fKiqOrNndb158wa5ublCr+L/BhqTJ1vh2rVrCD5+HLm5ubh27SrCw8+w13b9+muYmIzEal9fJCQkIDMzE+vWroFErVmTQ4d+xzLXpUhNTUVubi7Cz4RBTk6uwaU1Xd3hkJOTw8pVK5GRkYGkpER4rFgOQ0MjdtlKlJR6KSElJQWxsbHIzc1FUFAgHty//1H3TEpKgoyMDLtpvaioCI4Oc3D9+jVRVJkQQkROrF8BsdU/AI8SHsFqshV+W/8r7O3thdLd3JdjuJ4e3NzcYGszDUVv32L37j3sUoH78uXQ1dXFiuXLYWszDQ8e3Mfu3XvQuYElnm7dumOT32YEBu7FFKvJiIgIx8yZH7cs4ubmDkMDQ/z88zLY2kzDixeF2BsYiA4dOzZ6jcX48Vi4cBE2btwAq8mTkZebi5l1lmda0q730dcfgZs3bwqd+8XzF9y5fRtOjg5NXj9UTQ3S0tLQ09N7754XGRkZ7Nt/AB07dsCKFcvh6OCA6OgL8PT8BRMmTBDKu3jxEnivWgWbadYoLCzEzl272D0pTY2Hlrp16xaG6+rUm2mq7fffD8LCfJzQK/R09ZOklZWVsWmTH0LDQjFp4gTs37cPLgsWCl2/ytsbffv2xTznuZg9ayZU+vcX2sczf74LBgwciLlOjpg8aRJSU1OxbfuOBp9txOPxsGPnLvAkJDBr1kzMnzcPAwcOxNp16z6qHxoz2swM1lOt4fbzMsyYbosXhS8wytT0o+55NzYWenp67L/R8vJyPHnyBP/+W//xEoQQ8jngMB+zGYW0qqSkRLgudUVkVBS43JbHrAzDYILleCxZuhRGRsYfVZfHaWmYOnUKYu/GNZ1ZRMLDz+DUyZM4fOToB9+jqqpKKCi58ddf8PX1wR8Xq7/eQiAQ1OvbWTNnwHLCBEyebPXB5X6pplhNxooVHvTAQELIF4O+1PMLNmDAQAwZMgRRkZEtvjYzMxMHDxxAZWUl9PT0xVA78cvIyICm5od/1UVSUiLGW5jj8uUYFBQU4OHDB9ixcwf09d/1x4rl7vDx8cbjx4/x7NkzHD50CKmpqdDW1hZFE74oly/HoFu37hTkEEK+KDSj8z9q7JgxkJaWgo+PL4b8+ONH3681ZnRcXObDydHpo+p/JiwMx48fR3Z2FjrKyMDExARLlixlN1nn5eUhwN8fsbF3UFRUBGUVFbjMd4HW/2CgQwghXyIKdAghhBDSZjX7OTpz5szBwYMHm3z2DSGEEEKIOHG5XNjZ2WHfvn1N5m32jI6EhAQFOYQQQgj5LHC53CYfMQK0INCp+TgprXQRQgghpDW1JCZp8VdAAEBFRQX45WUU9HwkDocDKel29Z6ITP0rWtTP4tNY3xJCyOfigz5eTr8cRINhGPDLy+qdp/4VLepn8Wmsbwkh5HPxQYEO/XIQnYb6kvpX9KifxYf6kRDyOaMHBhJCCCGkzaJAhxBCCCFtFgU6hBBCCGmzKNAhhBBCSJv1QR8vb65Tp04hPDwceXl5kJOTw9ixYzFjxowP+qZt8k5sbCxcXV3ZY0lJSXz33XdwcXHBkCFDWrFmbcvr168xfvz4RtOtrKywcOHCT1gjQgghLSW2QOfYsWM4ceIE5s+fDxUVFWRnZ2P79u148+YNFixYIK5ixY5hGNy/d++9XyR5Lz4eg4cMYR9oJA6SkpI4cuQIAKCsrAzR0dHw8PDAsWPH0KVLF7GV+ymVlJQgOzsb/fv3bzCdz+cjNTUVgwYNEkv5nTp1QkhICHvs4uKCadOmsd9u3qFDB7GUW5uvry8UFRXh4OAg0vs+evQIKioqjT7/Jjk5GT179vwkbSSEEHES29RKVFQUXFxcYGpqit69e0NfXx/u7u54/PixuIr8JDgcDjIzM3E2IqLB9IiIcGRmZYo1yKnRvXt3dO/eHb1798bcuXMhKyuL27dvi73cT4XH4yHm0kU8fPCgXhqfz8e+oEAIBE0//vtDcblcto+7d+8OCQkJyMrKssedO3cWW9niJhBUIShwLyoqKuqlPXhwH5djLoHHE+uELyGEfBJi+5+Mx+OhsLBQ6Jy6ujrU1dXZYwsLC7i5uSEkJATJycno1asXnJ2doampyeaJjIzEyZMnkZubC0VFRdjb28PAwAAAsGrVKvTq1QspKSmIi4tDr169sGrVKpw/fx6RkZHg8XiYNXMWJk2eJNK2jbe0RER4OM5GRMCi1tJGRER4dfp4S5GW11wSEhJCf6G/fPkSW7duxe3btyEtLQ0jIyM4ODiwf6XHx8dj//79SE5OhoyMDCwsLGBnZwcAyMjIgLOzMzw9PbFjxw68fPkSGhoa8PDwYH/B5+XlYcOGDXj48CFkZWUxZcoUTJs2TWTtkZKSgoOjE4IC9wIAflBVBfAuyNHT14eq6mCRlfchKisrsW/fPly4cAGlpaUYPHgwlixZgm+++YbN874xXFZWhoCAAPz5558AgBEjRmDp0qWQlpbGnDlzkJaWBgA4fPgwjh07BkVFRZHUu6bfggL3wsHRiR03Dx7cx1/Xr2OOgyOkpKREUhYhhLQmsc3o2NjYYN++fdi8eTPi4uIa/MsRAPbs2QNnZ2dERUVhxowZWLlyJTIyMgAAV69exa5du+Dg4IDg4GBMnToVa9aswYsXL9jro6KiMHXqVISGhqJHjx6YN28e2rdvj5MnT2LZsmXYsXMHcnNzRd6+8ZaWYBiGndlpzSCnvLwcR48eRVlZGdTU1AAAVVVVcHNzAwDs3r0bGzduRGJiIjZs2AAAKCwshJubG7S0tHD06FH4+Pjg9OnTuHbtGntfPp+PP//8E9u3b8fhw4fx/PlzBAUFsenLli2DsrIyTpw4AR8fH5w4cQJ3794Vadtqgp1r167i4YMHn1WQAwABAQH4559/sHr1agQFBaF79+5YsmQJSkpKADQ9hrdt24bc3FwEBgZi7969yM3NxdGjRwFUv296enqwtrbGxYsXhYInUVBVHQw9fX12ZoeCHEJIWyS2GR0zMzMoKioiJCQE7u7ukJaWhqWlJWbOnIl27dqx+caMGQPV//6lbmxsjJs3byIsLAyurq4wMDDAkCFD2D0nY8eOxZ49e5CcnAxdXV0AgI6ODjQ0NABUzxDdvHkTM2fOBJfLhb6+PhQUFJCeni7yXxLAu5mdzZv9oNxPGeMtP12QU1FRgdGjR7M/S0pKwsvLi51tuXXrFkpKSuDl5cX+te7r6wtra2u8ffsWcnJyOHnyJNu3cnJyUFNTw8OHDzFixAgAgEAggIODAxQUFAAAU6ZMQXBwMIDqvUrPnz+HtrY2unbtiq5du+LYsWNC762o1AQ7+4ICEf1HNExNTT+LIKeoqAiRkZHYvXs3VFRUAABLly7FrFmzEBMTAwsLiybHcH5+PlRVVdmZmk2bNrFBhqSkJKSkpNiXONT0Y0CAP9q3awcHRycKcgghbYpYF+FVVVWhqqqKsrIyXL9+HUFBQcjKysKaNWvYPN99953QNf3798eVK1fY42fPniE0NBSZmZnIysrCq1evwOfz2XR5eXn2Zx6PBykpKaFPdUlLS6O8vFwczav23604n2JPTm2SkpLYv38/gOrZm7t378LX1xerV6+Grq4uUlNTkZOTA8s6wZdAIEBBQQFkZGTA5/Nx4sQJpKWlIScnB8nJyTA3NxfKX3uppHPnzuxMBYfDga2tLTw8PKCpqQl1dXUYGhqKJdCpi4NP29eNefLkCXg8Hvr168ee43A4GDRoEFJTU9lz7xvDVlZW8Pb2xr1799g+VFJS+uRtqan7px7HhBAibp/kc97t2rXDqFGjsHHjRly7dg0vX75k0+ouadUOYs6ePQtXV1dUVVXB2NgY3t7eYpmZ+VA1y1XLlv0stIz1qSgqKkJRURG9evXChAkTMG3aNISFhbHpgwcPxv79+4VeISEh+Pbbb5GSkgI7Ozukp6dDQ0MDCxYsgLGxcYvK/+mnnxAYGAhVVVXcuHED06dPR1JSkqibKbRctXDhInYZq7U15zuemhrDOjo6CAkJwejRo5GdnQ0nJyeEh4eLs9pCaparFi5cJLSMRQghbYVYAp3CwkKMGzeO3UhZo6ysDFwuV2hqvO4vxoSEBHaW59KlS7CxsYGjoyMMDAygqKgotD+nNdXdk1N3z05r6NKlCzvj0rdvXzx79gzy8vLsp4Q6dOiAgoICSEpK4saNG/j++++xYsUKmJqaYuDAgXj+/Hmzy6qqqkJqaiqUlJRgbW0NPz8/qKmpITo6WqRtqrsnp+6endbUu3dvVFZWCo3hyspKPHjwAMrKygCaHsOZmZlo164dxo0bBy8vLzg6OgoFqxwOR2xfmll3T07dPTuEENIWiCXQkZOTww8//ABvb29cuXIFycnJuHDhAjw9PTFy5Eh07NiRzRsTE4OYmBjk5eXhxIkT+M9//oOJEycCAL799lv8888/yMjIQGZmJtauXQuBQCCOKrdIYxuPP3Wwk5+fj/z8fDx9+hTXrl3DsWPHoKOjAwDQ0tJCx44d8euvvyIjIwPp6elYu3Ytu5m4Z8+eSEtLQ3x8PPLz83Ho0CEkJCQ0u+y3b99i/vz5CA0NRWFhIeLj45GQkIBevXqJrH2NbTz+XIKdzp07w9zcHOvXr8fDhw/x9OlT+Pn5oaKiAiYmJgCaHsPr1q2Dv78/8vLykJ6ejuvXrwstXX399de4e/cukpOTUVUluo/SN7bxmIIdQkhbI7Y9Oj4+Pti3bx+2b9+OV69e4euvv4aZmRlmz54tlG/u3LmIiIjA+vXr0bNnT6xfvx59+vQBUP2ANj8/Pzg7O0NWVhazZs1CSkqKuKrcLAzDoFcvJfzYyAMDx1taIj4+HgzDiHW/Q0VFBaytrQFUP+9FXl4e5ubmsLW1BVC9X2nLli0ICAiAi4sLJCUloa6uDk9PTwCAiYkJcnJysHLlSvbYyMio2eXLyspi3bp12LNnD3bu3AlZWVmYm5vX2xP0MSorK2FsMrLBBwbWBDuprTweFi1ahKCgIHh5eaG0tBRDhgzB1q1b2Y/wNzWGfXx8sGXLFtjb24PL5UJXVxeLFi1i021tbbFmzRosWLAAe/fuZf9tfCwuh9vop6uqZ86k2U3uhBDyJeMwzZwXr/mlzTAM3ha9EUnhFhYWWLNmTaNBw/8KmU7CD54TVf8SYdTP4lO3bwkhRJxqxyRNoS+dIoQQQkibRYEOIYQQQtqsVv0ym7Nnz7Zm8YQQQghp42hGhxBCCCFtFgU6hBBCCGmzPijQocfEi05DfUn9K3rUz+JD/UgI+Zx9UKAjJd2O/nMTAQ6HAynp+t8NRf0rWtTP4tNY3xJCyOfig56jQwghhBDSWloSkzT7U1dcLhcCgYD+AiaEEEJIq+Nym7co1eylKzs7u2bflBBCCCFEXLhcLuzs7JqVt9lLV4QQQgghXxqaoiGEEEJIm0WBDiGEEELaLAp0CCGEENJmUaBDCCGEkDaLAh1CCCGEtFkU6BBCCCGkzaJAhxBCCCFt1v8DociJIB2oWWQAAAAASUVORK5CYII="},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-point-shapes-98b5ada97343dfb174c19df0f0ea7ea8.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-annotation-transpose-a0e697aba7f9fa2b783814edfb13d0be.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/text-3c5275bb7d17545e6fd8952074ab9d13.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-area-groups-26a91066657837eeb3ddd3d83dafdc0a.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/issue-tracker-f8f5460fa5058fa880076f1b4d032c9f.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-line-labels-stroked-8f085e306871e3c87d798b4c4206fc11.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/table-filter-ce33da2e8b6fa9d9965683c9017e8662.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},,function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/stat-large-bar-e578fa2ed742b2a1b9eb9ff52d50c476.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-line-labels-f98b2fc53482efef18cf834fcd851704.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/graphics-clock-fb82cce5ac3fca365e9cd43ba116c948.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/table-groupby-8a15ae0b2ea905a6961c5783aebe43c5.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-area-smooth-4826228f8423a45fda33727184111c06.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/frame-path-0db07ced544338ad72aef8fed53c931d.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/form-frame-path-e829e3ff6a85bcc0e461e8c2cb505c32.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/textbox-ad4ead8b116b9f18042ba1302cf471c9.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/form-menu-d7388e52d93d99081c085e2d1baa003d.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-area-line-groups-fab3e454a09ab17afeb08c5bbe20a364.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARUAAAD8CAYAAABZ0jAcAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAyOjA3OjQ5IFBNIFBEVCumBS8AAANUSURBVHic7daxDcJQFARBY1GxY4ggpmQ/imClL6yZCi5a3W1mZgOI7KsHANciKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAKn76gFXcL4/2/n6rJ7Bj/bnse2PY/WMv+epAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAqdvMzOoRwHV4KkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVJfkOkP8d6gjyUAAAAASUVORK5CYII="},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/form-b0f5fccd418b3d5e40f559cf1d60cb46.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/table-filter-backend-e69a57efeee01d99d32a542a71466995.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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z/g6bN0OfQvwvfxU+7Ut7UIBJSItlxHA9+KTTkit2UBkwlexl69u82btD4qJTLwAe/NWyMvF/9Y86KyVy080CigRaZ2cLHxv/A3j29NgWynRqd/AuvU/4XObEiaL/cjTRC+YAQeqMAYPxL/4NejXu03aEnfpHpSIJI019ymsm+9wNjUc2A/zumswZ10OgfRWv7f91Dysh56M9dCMa2bie/DuVr+veJcCSkSSyl65huiMH8COQ9uzZ2ZgXv4tjNmzMIYWJvhe67CffxHruZehrNw52K83vrtuw/iXC5NcuXiNAkpE2oT1349g/fl/YFvp4YNdT8IYWohxylAYMghj+GCMMSOgU6bT69q3H3tpCdaiZdgvv3k45A5da/7bjzBnz2r/H0ZcoYASkTZlz38F68HHsRd92KLrjfOmYn7jAoxvX5KUoULpOBRQItJu7Hfew/6gGHvxMuwt2476gK8x8mSMcSMxzp6McfH5CqUvMQWUiIh4kqaZi4iIJymgRETEkxRQIiLiSQooERHxJAWUiIh4kgJKREQ8SQElIiKepIASERFPUkCJiIgnKaBERMSTFFAiIuJJCigREfEkBZSIiHiSAkpERDxJASUiIp6kgBIREU9SQIlIu7vjjju444473C5DPE4BJSIinqSAEpEOa+nSpYwbOyb2a+oZU/jed7/L+++/72pdt/zsZh566C9t2sbECePZsGFD3K9fu3YtRZMntWFFyaeAEpEOLSUlhVdefY1XXn2Nhx5+mKKiIm79xc95+umn3C6tQ5s/fz6zZl3jag1+V1sXEWklwzDo2bMnAD179mTo0GEMGTqEm268kbPOOptevXq5XKG0lHpQInLCmThxEkOGDOWdt9+OHVu7di2zZl3DpIkT+NrFF/HsM8/Ezt1++79z1113xr5/7733GDd2DOvXr48d+9H1s5n78MMAnH3Wmbz66qt859uXM3HCeC6fOYNNGzces57jtQ1QVlbGL37+c84+60ymnjGFX912GwcPHoydLy8v50fXz2bypIlcfNGFlCxf3uz/g2XLPuTyy2cyccJ4rrn6KioqKuJu849//AN33flbVq9axbixY3jxhRfiqjPZFFAickIaPXo0H2/5GICysl1cd+0PmVI0hefnz+cXt/6Sxx//n1hQFBUVsbS4OHbth0uX4vf7WfbhhwA0NDSwYsUKJhcVxV7z9FNP8qt/v52333mXwsGDufXWXxy1jubatm2bn9x0EwCPP/EkTz71NDt3lvLgnx8AIBwOc921PyQ3N49nnnmWO+/6HQ899Bcikcgxf/bt27fz4x/9mAu+egHz//f/uOLKK/nv/5oTO99cmzfd9BN+evPNDBs2jCXFS/n6N77R7DVtQQElIm2urKyMhoaGY55vaGigrKwsqW1mZWVRU10NwLzn5nHqqadxzaxZ9OpVwKRJk7jppp/wxBOPY9s2EydOYvfu3ezevRuA4qXFfOeKK1i61AmtVatWkpGZybBhw2LvP2PGTIYMGUJWVhY//OG1bN++94pyFgAABIRJREFUnQMHDnyhjubaNgyDRx97jP/4zW/o06cPffv25aKLLmb16tUALFq0kNraWm6/4w769uvHyJEjuW72bCzLOubP/vzz85gypYgrrrySXr16cfbZ5/C1r389dr65Nn0+H6mpaaSmpZGamoppms1e0xZ0D0pE2tzvf/97SktLef7550lJSWlyLhKJMGPGDLp3784DDyTvX+PV1dVk5+QAsHnzJk4/fXyT86NGj6ayspL9+/bRuUsXRo4cxdLiYiZNnkzVgQNceeVVXHThBYTDYYqLi5k0aRKGYcSu7927d+y/cw61U1dXR25ubpN24mnbNAzeeON11q9bx85du9iwfj1du3YFYOuWrQwdOhS///DH9dChwzDNY/cvtm7ZysRJE5scGz785CbfH6/NY2nJNa2hHpSItLl7770X0zSZPn16k6GpSCTC9OnTiUaj3HfffUltc9XqVQwZPAQA26ZJuBxNUVERxcVLWLq0mPHjx5OTk8PAgYNYtWoVxUuKKTpieC8RzbVdV1vLd674Dm+8/jqFg4cw65pZzJ59fZPXRKLRz72njW3bx203Gml6jXXEe8TTZkvqTDYFlIi0Ob/fz3PPPYdlWcyYMYNIJBLrOUUikaP2rFpjwYIP+Hjzx5z3la8AMGTIEJZ/bmLB8mXLyM/PJ69zZwAmFxXx4bJlLFm8hPETJgAwYcIE3n77LbZu3cKECU17JPFqru2PPvqIPRUV3P/An5k2bRqnnnZak6HCQYMGsfGjj6irrY0d27B+/XEDalDhIEpWlDQ5tn7D4QkfzbUJYBg46ZrANcmmgBKRdpGSksK8efMIh8PMmTOHOXPmEA6HWx1Otm3H7h9t2LCBuQ8/zL/dcgs33nQj3bt3B+Cy6ZexatVKHn7oIcrKyli8eDH3/ulerr76mljvprCwkEB6Ou+++04sjCZMnMBLL77IKaeMICsrq0X1Ndd2Qe8CwuEwr7/2GuXl5bz77rvMm/dc7PpJkyeTm5vL7bffzo7t21m9ejUPPvggqampx2zz0mmXsqKkhEcffYSysjLeffdd3nrrrdj55toEOOmkfLZt20ZJSQk1NTVxXZNsCigRaTepqanMnz+fqVOnMnXqVObPn3/cD9p4NDQ08LWLL+JrF1/E7OuupaSkhLvv/gPTp8+IvaZXrwL+8tBDFBcv4dJpl3DXnb/l+//6fWbMnNnkvSZPLqJv375069YNgJEjR5EeCLR4eC+etrt1684f/ngPc+c+zKXTLuHll1/iiiuujF2fmprK/Q/8mbpgHTNnzuBXt93G7OtnEwgEjtlm3379uG/Of/HuO+8w7ZJv8bdnn+WWn90SO99cmwBTpkzhK+efz4033sBbb74Z1zXJZtjNDWSKiCRZKBTCMIxWh5Oc2BRQIiLiSRriE5E2d8cdd2AYxnF/afsN+Tz1oERExJPUgxIREU9SQImIiCcpoERExJMUUCIi4kkKKBER8SQFlIiIeJICSkREPEkBJSIinqSAEhERT1JAiYiIJymgRETEkxRQIiLiSQooERHxpP8HRD0aACVCyDwAAAAASUVORK5CYII="},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/graphics-primitives-069da2917a0f9226163992fa997d7064.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/checkbox-7b117add24c72bf0c30d9ae546f39718.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/stepper-6ec5c425af780ae34209e38d2ae8821a.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-labels-bc80dada33a6a5f1a61854ef21caf76e.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/card-menu-db530edd23afd919e8bb15708a24c76b.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAABSCAYAAAC7Zl0HAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAyOjA5OjE0IFBNIFBEVKhCfrcAAAcISURBVHic7d1/TJT3HcDxN7BguFvAaFMkBkTTKSAYDxJElIIpE2KnbQGpA9TD/jHB6vyxIWhqrZ2VX+pEreI/hbWjiWLbKMLQOa9C1jBdAB0/MmA1CEETWEDkUMR79od6CdRV775QjuTzSi65PM9zz/N9cu88P3iSw0nTNA0h7OQ80QMQk5sEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCyc/s+dC/bt7AZLrCoNk81uMR48RNpyMqahmBQQvGdL12BWQyXSEhIZEZXl5jOhgxfu50dVFaenrMA7LrFDZoNks8k8wML69xOWPINZBQIgEJJRKQUCIBCSUSkFAiAQklEpBQ4nAB9ff3c/jQIX715gqWhC8mMXE1xcVFDA0NTfTQ7HaqsJCQYAMhwQZ6enqs04eGhjhaUEBszHIWh4WRkpzE1avfTuBIbedQAfX392Ncv44vvvgci8VCYFAQPd3dFBw5ws6MDH7qX+PLz88jJNhAXV2t3eu4e/cuxcVFz52XfeAARUWf8aqnJ7GxsXR0dLBj+3bq6+rs3t5PzaECOn78GLdu3eLtd97hfNkFCgtPUXahnNDQUK5e/ZYLZWUTPUSbHfnjYTRNw2vUX+7NZjNlZeeZO3cuRUXFfLh3Lzm5eVgsFs6eLZ2g0drOYQJ69OgRFeXleHh4kJGxExcXFwDc3Nz47dathIaG0t3dbV3+n9evk2pcT/jiMJb/MpqD+fk8fPgQgN7eXkKCDby/aZN1+cbGRkKCDXyyfz8AOdnZhAQbMJlMrE1JZnHYItatTaGttRWArMxMviwpAeC9DRtI2/gbm/epvq6OyspKUlLWEjT6GZSm8cEHe9iZmYmz85Ovwdd3FoB1PyYDhwmos7OT+/fvYzAYmDJlyoh5fn7+nDhZiDE1FYDm5ibS09Nob28nKTmZwMBASkr+zK6sTJu3m5uTQ2BgEOHh4TQ0NLB79y4AVry5wrpMVFQU8fEJAFRWVlqvZ0a/ampqrJ+xWCzk5eUybdo0jEbjD7ar0+tZuWoVCxcarNMqyisARkxzdHY9jR8PfX19AHh4TH3hskWfFTE8PMy+fR+zZOlSNE3jvQ2pmEwm2lpbmf7KKy+9XWOqkcTEdwFY824iLS0t9Pb2EhHxOr9OSuLLkhLWrltn/VK9vb2tMY3m6elpfX/u3DmamprI2rUbnV7/wnFcv3aNkydPMGfOHOLi4196/BPNYQJyd3cHoO9e3wuXbW5uwsXFhUVhYQA4OTkRvmQJ9fX1NDU1sTQi4qW3O2+en/W9j48PLS0tmM1mpk59fsgBAQEEBAT86DoHBgY4fvwYs2fPJi4u7oVjaGxsZNv2bej1eg4eOvyDI7Ajc5iAZs6ciU6vp662lqGhIVxdXa3zWltbOFVYSGjoIhJWr0bTNJycnEau4NkN2ujpTz1+/Pi5059df7ysxsZGvvn66+fOS0pOxtfXl9LSM/y3pwevGTPY/4ePAbh4sRKAffs+IjU11XpEa2tr4/1N6aBpFBw9ho+Pj03jmWgOE5CrqyuxMbF89dVZDubnsTMzC2dnZwYHBzl08CA1NTUsXx4DgL9/AB0dHXz33d+JiHgdi8VCdXUVAH5+89DpdAB0dNy2xlZXa/utuBNPYhx+NGyddvv27f97l/RGdDS+vr7c67sHQENDAw0NDSOWqa6qYlnUMhYuNNDZ2UF62kYGBgYoKDjK/PnzbR7jRHOYgAA2b97MtWv/oLS0lKqq6qenlH/T29tLZGQkb0RHA7DeaOTKlb/x4Z49rFy5iu+//w83b94kMjKS1177BQALFizgxo0bbEpPw8vLi+rqapvH8+yapqDgCPEJCbz11tvExMQQExPz4/uxZQubt2wZMS3j97/j8uXLXLz0V6ZPn86DBw9I27iR7u5uvL29Ka8op7yiHAAPdw+279hh83gngsPchQG4e3hQ/KfPWbNmDQB1dbXo9T9n69Zt5OblW09b/v7+fPrpCWbNmsWZM6dpbm4mKSmZA9k51nXt3fsRAQEB1NbW0traRlbWLpvHExcfT3R0NO3t7fylomJsdvKpgYEBOjs7gSdHtbLz562vS5cujum2xpVmh9zsT+z5mJhg4/G9OdQRSEw+EpBQIgEJJRKQUCIBCSUSkFAiAQklEpBQYldAbjodd7q6xnosYhzd6erC7ekzwrFk17OwqKhllJaelp93mUSe/bzLWHPSNPm/8cJ+cg0klEhAQokEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCiQQklPwP/AdkyB0kEsMAAAAASUVORK5CYII="},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/graphics-turtle-bf00fb61c0569a86ca32908a60485b91.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-step-after-72cc87c6a29c712eb6728e9d6bd626ca.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/toolbar-routing-84cf0d9860b9d575f5703ddf0e001bf7.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-area-stacked-5624332d0398dd3417cb40e6fd83272c.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-groups-transpose-7a36b34fbae40cd7d645e149db067bf2.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/markdown-3164a3fca5f8ccd5e61dbb00656dc796.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-polar-e54d13fed4e4ea004992a91a9e4644df.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-polygon-cef10aff7abe01503bac3e360a6ece1c.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATYAAADECAYAAAAVkQ0PAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDExOjIyOjI3IEFNIFBEVN1Kc0cAAB1/SURBVHic7d15fExX4wbwZyaLxjZECEXpa6lSbWZCMpNFxFKUoJZWaCsJlYiltqJ+fa2vPbEnaSmq1aKUohWhraXIQqUoktKXtyhJKosk1mTO748kVyaTZSaLxPV8P5/5xJx7z7ln7sSTc++dOVeRmZkpQEQkI8rK7gARUXljsBGR7DDYiEh2GGxEJDsMNiKSHQYbEckOg42IZIfBRkSyw2AjItlhsBGR7DDYiEh2LMvagBD8qikRlR+FQlHmNkoVbEWFGUOOiEojf5jlz5HShpxZwZZ/g9bW1rC0tCyXdCUiyiOEQFZWFh4+fChljrk5Y/I5trwNCCFgbW0NKysrhhoRlTuFQgErKytYW1sb5I45zLp4IISAEAKWlmU+NUdEVCxLS0spc8xlUrBJDeduhCM1IqpoCoUiJ3tKMWoz61BUmNk4EVFZlDZ3SnUoSkT0JFTYoWj+k3cMNiJ6kgrmjqn5Y/Y3DxhsRPSklDZv+JUqIpId866KEhFVkgq5KprbtJldISIqqwr6HBsR0dOEwUZEssNgIyLZYbARkeww2IhIdhhsRCQ7DDYikh0GGxHJzhMPtmvXrsFRo8bXX39lUB4aEgJHjRqpqanF1r9w4QIcNWr8+OOPAAA3VxcsXrTI5O3fuHEDjho1li9bJpX98MP3Rn1av/4zOGrUuHDhgsltF9a/ghbMnw83VxcAwPnff4ejRo1t27aatQ0iKt4zN2Jr3LgxmjZtitjY01LZr6d+BQCcOnlSKvstNhYqlQpt2rQxuW1zv3pmaWWV85MzEhOVqyobbPHx8fDz9YGriw5DvYfg5MmYEuukpqZi+rRpcHdzRdcunli+fBmysrKM1tPqdIiLi8O9e/cAAKdOnUT16tVx+vRp6PV66PV6nD17Fk5OzlAqlYiLuwg/Xx/otFr06+uFPXt2S225ubpgzuzZeGfYUPj6DDfa1o0b1zHCzw9uri74cMoUPHj4QFpmlRtseT+JqHxUWrDdzbyL27dvS4+8kAGAjIwMjB0TCL1ej1mzZ6Np06aYOGECEhISim1zxoyPcPz4MUz58EN4ew/F5i+/xLq1a43W02p1yM7Oxrlz53Dz5k3cuHEDw318kJ6ejvj4eFy6dAkZGRnQ6nRIT0/H2DFjkJ6ejnnz5qFt23aYM3s2YmIeB+3+/eFwdtbC12+EcZ8+moGLFy9g7LjxePHFF3EgIkJaljdS44iNqHxV2v+osLBQhIWFFrrs2C+/IDk5GZ99th7NmjeHp2cXdHJ3R/i+fXBydi60TmJiIqKjojBixEj069cfABD7Wyx27/4OowMDDdZ16tgRlpaWiI09jYRbt2BtbY1hw97Btq1bcTImBtWeqwYA0Om0OPbLL0hJScH8BQvh7OyMTh4eOHHiOHbv/g5OTk4AAHd3d4wbPx4ADM7JJSQk4Pffz8HHxxdDhgwBAJw5ewbnf/8dAEdsRBWl0oJt4MBB6OzpKT3/4fu92L9/PwAgITFnZDZgwJuwsbEBADx69LDYEVtSYiIAoFnzZlJZ82bNEBUZCb1eD6Xy8eC0eo0aaN/+VfwWG4u///4bao0GNjY2cNZqcerUSdSoURPNmjeHvX1DJCbltNs8t11ra2s0bNgIifn6Uq+eXaF9Sk5ONupT06ZNpWDjiI2oYlTa/6jmLzaHi4uL9Py32Fjp33Z2OUERFByMli1bAQCys7OhUqlw8+bNQtuzq18fAHDlyhWp7MqVK7CzszMItTxanRafb9yImleu4J133wUA6HQ6LFq4EDY2NujevTsAoEH9Bjlt/fcK7O0b4sGDB7h582+0bOle4mu0tbU17tN/H/+7Zs2aGDFiJP714r9KbIuITFclhwru7p2gUqmwYf16DHvnXVz76y+sXfspFi1egkaNGhVax97eHs7Ozti6ZQsa2jdE0j9JiI6OxogRIwtdX6fVISw0FPfu3YNO5yKV3bt3D3fv3oVWpwMAuLm7o06dOli6dAlGjnwfhw79jMzMTPTt26/E12Fvb49XXmmPrVu2ws7ODklJSbh48YIUtAkJCdizZzdeatMGzZo3L8WeIqLCVMmrorVr18bqNSGwsLDAnNmzsXfvXowbNx5dunQptt6ChYvg6uaGlStXYMf27Xjn3Xcxyt+/0HVfbtsWKpUK9vb2aNGiBQDAtl49tG7dGpaWlnB07AAAqFWrFkJCQ1G7dm3MnTsXcXHxmDlrFpy1WpNey4KFC/Dyy20QFhqKv2/cgJeXl7QsOzsbDx4+5AzFROVMkZmZWez/qvx3idHrs5GdrZcOsYiIKlJycjIsLJRQKi2gUCikR0mq5IiNiKgsGGxEJDsMNiKSHQYbEckOg42IZIfBRkSyw2AjItlhsBGR7DDYiEh2GGxEJDsMNiKSHQYbEckOg42IZIfBRkSyw2AjItlhsBGR7DDYiEh2GGxEJDsMNiKSHQYbEckOg42IZIfBRkSyw2AjItmp9GBbt3YtHDVqHD50qNzbDgpaCj8/33JvtyIJIbB69Sr06tkDHp3ccf369cruUpUSGhIC7yFvF7vOX3/9hS6enbFjx44n1Cuqaio92ML3h8Pa2hrh4fsquytVwrFjv+DzjRvx9ttD8J/589GkSZPK7lKl8ejkXqpwqlatGpo0aYI6depUQK/oaWBZmRs/f/48/nf1KiZNnow1q9cgIyMDNWvWrMwuVbrr166jtkoFH9+na6RZldjb2+OLLzdXdjeoElXqiC08fB9eeaU9Bg9+C1ZWlvj5558MlmdnZ8NRo8bBgwcwbdpUuLu5wtOzM4KDgpCVlWWw7qVLlxA4OgBuri7o8Xp37Nq5s8TtR0dHw1GjxsWLF+Ez/D3otFp49emN73btMlo3JiYGfn6+cHXR4fXu3bB40SLczcwEANxJS0PHDo44ePCAtH7y7dtw1Kgxd84cg3YGDHgTy5ctK7Q/Awa8iaCgpbiTlgZHjRr9+npJy27cuI4Pp0yBZ2cPeHRyx6SJE/C/q1eN9tX3e/dizJhAaJ2dcOBARJGvfceOHRgw4E3otM7o6+WFbdu2Giy/f/8+lgUHo2eP1+HqosPw997D8ePHDdbx8/PF6tWrEBwUBI9O7vD07IyQkDXIzMzErFkz4dHJHd27dcXqVasghDDen74+cHXRoV9fL6xcuQIPHz4EAPx66hQcNWpkZGRg4YL5cNSoER0dbVA/MvIEBg8aCJ3WGYMHDcQvvxw12hd5pzfMeZ+PHDmCod5DoNNqMXjQQJw7dw5+fr4IDQkpcl9S1VNpwabX63EgIgKv93gd1tbW8PT0RPi+wg9H16xeDZ1Wh6++3oKJEydix47t+GLTJmn5rVu3MHKEH6BQYMHChZg6bTp27dqJqMhIk/oStHQp/AMCsGXrVnTt1g3z5s3Fmd9+k5bHxMRgTOBovPjiiwgKDsb4DybgxInjCAwcDb1ej9oqFV599TVEnni8vajoqJyfUVEG/fzf1atwc3crtB+rV6/BwIGDAADf7tyF0LAwADkh6ePjg5SUFMyaNRtz5/0H9+7dg4/PcCQk3DJoY8WK5dA6a7Hx803o2NGp0O2E79uHpUsWY8CAAfh07ToMHToUK1eswP7wcAA55/kmfPABfvrpRwSOGYPg4GVo164dJnwwHkePHjFoa++ePbCyssIXX26G/yh/bFi/HsOGeqPFv1rgiy++RGDgGHzxxSaDUw3R0dEYOyYQrVq3RnDwMvj6jcAP33+Pj/9vBgCg3Suv4NudOaHjPXQovt25C6+99ppU/5/bt7Fu3TqM8vfH4iVLoFLVwdQPpxrti4JKep+PHzuGKZMn4ZVX2mPZ8mXwHjoUM//9MRITEoptl6qgzMxMUdwjIyNDpKenizt37ojU1BRx+/ZtUR5OnDguHDVqcevWLSGEEMeOHRMdHDUiMTFRWicrK0to1A4iNCTEoO7cObPFsKHe0vMFC+aLN/v3E48ePZLK0tPTRefOHsLX16fIPkRFRQmN2kFER0dLZXq9XvTr6yWWLQuWyry9h4jp06YZ1L1+/Zpw6thBhO/bJ4QQYuPGDaJXzx7S8pn//lhMnzZNdHDUiKtXrwohhNj57bfC3c3VoJ8FffXVZtGtW1eDsuCgINH7jV7iwYMHUtmjR4/EgDf7i3nz5gohHu+rTz4JK7LtPPPmzRV+vr4GZadP/yq9F4cPHxYdHDXi8uXLBuvMnTNb9O/XV3ru6+sj3n9/pME6w4Z6ixF+fgZlowP8xdy5c6Tn3t5DxMKFC4y2r1E7iMuXLkllndzdxPbt2w3WC1mzRjg7dRRJSUlSWWpqqujYwVHs2rlTCPF4Xxz6+WchhOnv89tvDRYzPppusL2YmGihUTuIkDVrBD15t2/fFqmpKeLOnTsiPT1dZGRkFJtXeY9KG7Ht3bMHbdu2Rd26dfHw4UOoHRxQrVq1QkdtrV96yeD5C82aITk5RXp+6uRJdOvWHZaWj08Z1qxZEzqt1qS+vJSvfYVCgRdeeAEpyckAgJSUFMTHxcGrb1+DOo0bN4FarUFkVM4ozd3NHQkJCbhy5QqAnFFJnz590KZNG8TkHkZFRUVCp9MZ9NMUkZEn0KNHT1hbW0tllpaW6NXrDaNRaevWrUtsz8FBjbNnz2D1qlWIj4uDXq+HWq2Bvb29tL22bduhRYsWBvX6eHnhr7/+wt9//y2VtWrVymCdWrVqoWGjhgZlKlUdpKamAgBSU1MRHxeH3r37GKyjVmtQp04dxOYbQRWladOmsLOzy9e+Cvb29kjOfc+KUtz7nJqaikuXLqF3Hy+DOh07OsHW1rbEPlHVUikXDx48eICIiJzzPzqts8GylStX4L3hww3KLJSG+atUKCGEXnqelpaGenb1jLZT19YWt0w4jFAWaF+hVEKfe04oJSUnQBs0qG9Uz96+gbS8RcuWaNSoEaIiI6HX65GWlgbHDh2g07kgOjoaAwcNQkxMDCZPnlJifwpKSUlB/QYNjMob5Nu+1HcoSmyvT58+yMrKwjffbMOmTZ9DpVKhd+8+GB0YCBsbG6SkpKBBYdtrYC/15/nnn8/ZnqLk7QEACuxPn+HvGe13vV6P1NQUo6oFFfaHQalUQp/vd6Iwxb3PeaFoX8jrrlfP+HeLqrZKCbZDuSd1g5ctN/iliYmJRmhICK5evYrmzZub3J5KpUJiYqJR+T9JSWXua926dQEASUlJaNnScHSSlJSE+vUfB56buzsiI09AQMDBwQHPPfccdC46fPPNNpw7exYZGRlwcXUtVR+SkoxfX1JSUqk/0tC/f3/0798fd9LScPz4cSxZugRZWVmYOm0a6tati7iLF43q5O3PsnyMQqVSAQCmT/8IGo3GaHndShod1apVCwCM/lAAkEab9PSolEPR8PB96NjRCZ07d0b79u2lh6+vH2zr1SvyIkJROnTogB8PHpSuqgE5o7hIEy8eFKdu3bpo3bo1vt+716D8xo0bOH36NLRanVTm7t4Jv/76K44cOQKdzgUA8Oqrr0Gv12PdunVo27ZdqQ5rnLVaHDxwwOD1ZWVlYX94OLQ6XTE1C3fgQIR0CFtbpUKvN96Ah4cH4uJywkzrrMX58+elw+o8e7/fi6ZNm6Jx48ZmbzOPra0tWrRsifg/4tGiZUvp8Xzjxrj8558Gh9sKhcLo6ndFqV+/Pho3biIdSeQ5d+4cksrhDyQ9WU98xJaamoqoyEhMmz7daJlSqUS3rt0QHr4PowMDTW5zuI8vwsPDMW7cWAwbNgxZWVnYsH59uX24dcKEiRg7dgxsqldH165dkZycjHVr1+Kll9rg9R49pPU6duwIIOec35QpHwIALCws0NHJCYcPHcLo0aa/pvz8fP0QsX8/xgSOxrBh70ChVGLb1i34559/8P77o8xu78yZM9gfHo6JkyajaZMmuHDhAg5ERGDkyPcBAJ08PKDWaDBu7BiM8vdHg/oNcPToUez+7jsEBRf+URVzTJw4EePHjQMAdOnSFQ8e3MeWr7/GpcuX8e2Ob4HczzK+0KwZvtu1E7a2daF11qJ27mivogQGBuLjj/8P1WtUh7ubO24lJOCLLzbBloeiT50nPmI7eOAAhBDo0qVroct79OyBGzdu4MyZMya3+fzzz2PdZ+sBAB9Nn45FCxdi0OC34ObmXi59dtZqERIahv/++SemTJ6MlStWQKvTITQsDBYWFtJ61tbWcHJyhp2dncFJ9bzRm7t76fpjW68ePt+0CXXq1MXs2bMw898fo1q15/D555vQsGHDkhsoYMKEiejbrx9CQ9bA338Utm3bCv+AAPj6+QHI+QOzatVqeHp2QciaNZg0aSJ+P/87VqxYCQ8Pj1K9hvx0OheEhIbh6pWrmDb1Q8yaORMqVR1s3vyVQYjMm/cf2NjYYNbMWTh9+nSZt1uSnr164T/zFyDyxAmMHTsGGzasx4wZM2BXr57p5xKpSlBkZmaK4lYQQkgPvT4b2dl6XiUi2bp79y6qV68uPdfr9ejerSveH+WPIUOGVGLPnk3JycmwsFBCqbSAQqGQHiWp1K9UEVUln3wShu/37sWIESPRomVLpKWlYvv27Xj06BG6di38CIOqJgYbUS4/vxGwsrLCxo0bcOvWLdSoUQNqtRrrN2w0uPpNVR8PRYmoyirtoWilT1tERFTeGGxEJDsMNiKSHQYbEckOg60Ypsyv/7Rs7/ChQ3DUqJGdnQ0A2B8ejs4enRAfFyetEx8fjxF+fnB10WHhgvlSeUREBAYNHABXFx327fuhQvpXnlasWI6OHRwruxtUiRhsFaC0c/U/SbVVKjRp0gTP2dhIZfPmzsG9+/ewYOEieA8dBiBnduBZM/+NNi+/jEWLF8PFxfwv8VeU+Ph4OGrUuJpvJmEg52tsBWfyoGcLP8f2jHJxcYGLi4tB2fXr1xEwOtDga1O3EhLw6NEj+Pj4GM1uUlVZKC2gVFqUvCLJVqX9Wcs/53337t2wdMli3L1713idIu4zADyey/7MmTPwHvI2dFpnvPvOMPx5+TKOHDmCwYMGwkWnxfD33kN8fLxRvWvXrmHU+yOh0zqj9xu9sHHDBqO5+Yvrt7lz9RdXt6CoyEg4atT48/Jlg/LoqCg4atT4448/iuzjnTt3MHv2LHTx7Ax3N1csWbzYaJaMvH2Qnp6OiIgI6d9LlyyGo0aNfft+wIL586VD47ffeguOGjUScue3u3//PoKDgtCzx+vo5O6GAH9/xMY+/j5ncfdgMLVucfe6+PTTTzDUO+crTgMHvGlwmK20UMLCgiO2Z1mlvPvR0dEYEzgaLzRrhqDgYIwbNw4//fQTZnz0kbROSfcZyG/5smBMmz4d6zdshBAC48ePw/r1n+HfM2dhw8aNsLKywvRpU41Ca/LkSejj5YVt32zHxImTsHnzl1ixYnmx/S7tXP0l1S3IydkZ9evXN5pGJyIiAq1atSpyply9Xo8xgaPxW2wsJk+ZgiVLlyLtTho++SSsyNfl7uZm1G8Pj84ICAjAgoWLAADBwcvw7c5dsLOzgxACH+Te/2Ds2HFYsmQp6tevj9EBAdLUR3kK3oPBnLrF3evi7beHGPUtb0ICSwtLg8kJ6BlUGfc8KOweAr/FxooA/1EiNTW1yHUK3mcgby77U6dOSescPXpEaNQOIiYm2qBtjdpBJCQkGNT76qvNBu3//PNPooOjRnqNIWvWiCFvv2XQ79LO1W9K3YLbW7Fiuejr1Ud6/vDhQ9HZo5PYvPlLUZQDByJExw6O4tq1awbl/qNGCY3aQWRlZRnsgzt37hTb77i4OKFRO4grV65IZYcPHxY6rbO4efOm0TamfjhFCFH0PRjMqVvSvS4K65sQQqz/7DPRubNHYbuHnjJPzT0P8u4h0K9fP4Py1xwcEPbJp1CpVCbfZyBP/imC8mZCbdiwkVSmyp3xteBMqAWn4HFzc4dSqcSvv54y6ndZ5uovbd0+vfvg+vXrOH/+PADgxIkTyMzMRK+evYrc1qmTJ/FK+/ZGc9F1f717kXXMFRUZCY3G0WjKpC5du+B0bKxBWcGRpVl1S7jXRVGUFkqj6eTp2fLELx7kTb1sV9+uxHVKus9AHlPnyhIFDkVr1zacuNDKygrVa9RAWmpakX0qzVz9pa3bomVLvPTSSzgQEYF27drhQMR+uLi4FjvxYWpaGuwKWV6e3+9NSUlBZOQJkz5SUfAeDObULeleF0XhoSg98WDLmy//n6R/irzKZs59BsoiMTFRGuEBQGZmJjLS0wud078sc/WXpW7vPn3w1ebN8A8IwNGjRzFr9pwi1wWAOiqVwYWSPOU5vbWqjgqNGzfG8uUrnmhdU7V/9VUMG/ZOhbVPVd8TH6/b2tqiZctW2Lt3j0H56dOnMTrAH2lpaWbdZ6AsIvbvN3ied6+FwsKnLHP1m1O3oF49eyEpKQmrVq2EpaUlOnXqVOxrcuzQAefPnzf6bFfE/qLvCm8uJydnJCYmwqZ6dYPXk5qWhgdFXOUtj7oF5Y3Us7IeGZS/9tprGOLtbd6LIlmplM+xTZg4AePHjYOVtTV69OiBxMREhIWGolWrVtLoxtT7DJTF0aNHoLRQQq3W4I/4eISFhcLbe2iRh3plmavf1LoF2darB51Oh+3ffINBgwcXG4IA0LVrN2xqvQnjx43FKP8A1Ktniz279+De/Xul3U1GPD090b59ewT4j4LfiJFo1KgRLl64gHXr1mLYsHfQtm3bCqlbUKNGjWBtbY1169ahZ8+e8PTsAiDng8YHDx7E9h07YG9v/tTp9PSrlDOsOp0LVq9eg6tXrmDypElYvWoVPDp3xqLFS6R1TL3PQFksWrwEZ8+exYQPxmPLlq/h5zcCEyZOLLbfpZ2r39S6henV6w0AgJeXV7HrATmfug8NC4ODgwOCli7B1KlTYWtbF2PHjjNll5hEqVRi1eo18PTsgrWffoLx48Zi9+7vMHHS5BJvwlOWugXVqlULi5csQXxcHGZ8NEO6OFSjRk3UrFkTVlbF/xEg+XomJ5qMjo5G4OgAHD5y1OAcW1UVFhqKgz8exM7cz5oRPSt4zwMZunTpEv78809s2fI1Jk8x/w7yRM8qBlsVtiw4CH/88QcGv/UWvLz6llyBiAA8o4eiRPR04D0PiIhyMdiISHYYbEQkOww2IpIdBhsRyQ6DjYhkh8FGRLLDYCMi2WGwEZHsMNiISHYYbEQkOww2IpIdBhsRyQ6DjYhkh8FGRLLDYCMi2WGwEZHsMNiISHYYbEQkOww2IpIdBhsRyQ6DjYhkh8FGRLLDYCMi2WGwEZHsMNiISHYYbEQkOww2IpIdBhsRyQ6DjYhkh8FGRLLDYCMi2WGwEZHsMNiISHYYbEQkOww2IpIdBhsRyQ6DjYhkh8FGRLLDYCMi2WGwEZHsMNiISHYYbEQkOww2IpIdBhsRyQ6DjYhkh8FGRLLDYCMi2WGwEZHsMNiISHYYbEQkOww2IpIdBhsRyQ6DjYhkh8FGRLLDYCMi2WGwEZHsMNiISHYYbEQkOww2IpIdBhsRyQ6DjYhkh8FGRLLDYCMi2WGwEZHsMNiISHYYbEQkOww2IpIdBhsRyQ6DjYhkh8FGRLLDYCMi2WGwEZHsMNiISHYYbEQkO2YGm6JiekFEVCTzc8ekYFMoDBsWQpi9ISIicxTMmYI5VJxSHYrev3+/NNWIiExWlpwxO9gUCgUyMzNx9+5djtyIqNwJIXD37l1kZmaaNUrLT5GZmVliOgkhIISAXq+HXq9HdnY29NnZyNbrpWWAAHOOiEojJ78UUChyHhZKJZQWFrCwsIBSqYRSqZSWmcLSvI3nNKxUKCCUSlgA0EvBlofpRkTmeBxWefmiUCpzfpoRZvmZHGwKhQIQImdDeaGmUEBRMNiEYLQRkUlyBmqGwZY/3BQKBRQw78IBYGKwKRSKnPDK3YhSqYTIF2o810ZE5UGRb5QmjdZyQ82ccDP7UBTISVmRG3ZFhxrDjoiKU3hQSaGW86TiD0VF7qEo8h2WcrRGROVJUcgIrUIORQs2LgVcgQ0y5IioNIoKrtJ+3MOsYCtsY/nDrLSdICLKUx45UqpgK+9OEBGVJ87uQUSyw2AjItlhsBGR7DDYiEh2GGxEJDsMNiKSnf8HHaM141YBmUkAAAAASUVORK5CYII="},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-range-38b09db44df660cf127c051bee921b70.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-annotation-ad30e4c2b779c452d7ab7d805f037c43.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-plotly-3b71042a87f940cd5002711c65e34e54.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-transpose-d7705a1125bbded7646d335b2bfba02d.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/dropdown-aa5530f33720d6851ade03079d16f40a.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/graphics-spline-76e8a919798c7e38711618ef9b414f78.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATUAAAF0CAYAAABCG67NAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjQ4OjM5IFBNIFBEVKNYgoQAACAASURBVHic7d15XJVl3sfxzw2KAlkjsWiapFZSuJGiqZi7iVtu82g2LdOmltpC6zgV+VRIu6UllKT2jFhOqdnkWKNkaGISUJpjWujkAiigY4KBcO7nD/QEueTBgwcvvu/Xi1ec7Tq/c8yP130Oi1VUVGQjImIIL08PICLiToqaiBhFURMRoyhqImIURU1EjKKoiYhRFDURMYqiJiJGUdRExCiKmogYpd7ZLmDb+i4rEXEfy7LO6vbVitqpQqbAiUh1VA5Z5Y5UJ3AuRa3ynfn4+FCvXr2zrqqISGW2bVNWVkZpaamzOa505oxfUzu+uG3b+Pj4UL9+fQVNRNzOsizq16+Pj49Ple6cKZfeKLBtG9u2qVfvrF+KExE5rXr16jmb44ozippz0WN3oB2aiNQ0y7Iq2uPibs2lw0/bhYVFRM5WdbpTrcNPEZFzoUYOPyu/UKeoici59NvunEl/XP6OAkVNRM6V6vRG3yYlIkZx7d1PEREPcfu7n8eWrcYoIiJnowa+Tk1E5HyhqImIURQ1ETGKoiYiRlHURMQoipqIGEVRExGjKGoiYpRzHrVdu3bR6ZoI50eP7t2YOmUyubm5ALy7YAGdrong4MGDv7vWxo1fkZAwB4fDUe15PvzwAwb070dhQQEOh4OEhDls3PiV8/L77pvKn24aX+31XbV0yRI6XRPBzp07z3qtlStX0umaCLZs2XLSy0eNGsl99011ed2CggI6XRPBuwsW/O51n3v2WaJ6dP/d653suRepDo/t1AYOvJ4nnniSsWPHsWHDBh555GGX19j41UYSExLO6tu4Lml6Ce3ataOhry+2bZOYkMDGrzZWez2pHj334i4ei1q79u0YMXIkU++7j7Fjx/Hd5s3s3bv3hOv9c8UKRo64gW7XXsstt9zMpk2bgIod3dy5bwPQJbIzn6ekVLnd//zPH7n33nsAyM3NpdM1ETwUEwPA9u3b6XRNBB99tIzt27ezZs0aSktLnTuKuXPf5sZxY6us98bs2fSM6sHQIYPZkJZ20sf0/fffc/ufb6NH926Mv3Gcc9exZcsWOl0Twdy5bzN82FCu6xnFe+8t4v/+71369O7F4OjoE9ZM37iR4cOG0bvXdcyZ86bz/EP//S+PPfqoc5bkhQudl5WUlPDUk08Q1aM7f7ppPLt2/VRlzS+//JIRNwynT+9eJCYkVLnM4XDw5htvMKB/P/r26U3cc89y5MgR5+Xz58+jb5/eDI6OJvWLL076+AH27NnNHbffTlSP7jz80EOUlJY4L7Ntm3eSkhg2dAhRPbpz7733kJdXsUM/2XO/c+dO7pk0kZ49oxgyOJr333/vlPcrclyteE3twosuBCr+Ulb2TVYWf/3rNFq3vpxnnn2Wo6WlTJ0ymYMHDzJg4EDatm0HwOuzZtOhY8cqt+3apSvffvstDoeDzIwMALKyMiv+m1nx365du1a5zaszXwOgbdt2TPvrX53n79ixg//8ZycTJk6kqLiYp5+OPeExHD58mMn33oPD4eCp2FguvfRSHrj/fvLy8pzXWfWvfzFp0j2Ehobyyssvk5mRwcOPPILDUU58/Iwq67333iLuuusuIiO78FZiIitXrgTgL3/5C19nfM0jjzzK0GHDePHFF0hJWQ1AYkICH3/8MaNGjWbEyFEsSk52rnfgwAEePbYbfvDBGLZv387ePXucly+YP5+kpLmMu/FGpt53P//85z+ZNet1oCKGr82cSdu2bbnn3nv5+98Xn/D4j/vL43/h3//ewuQpU2nZsiWfHpsbYN3atcyePYtRo0bzXFwc27dt48UXXjzlc//Uk09y4MABZsyI57rrehE/YwY//LD9lPctAm74ZcbVVZBfQEFBAbt2/cSSDz8k4OKLadGiRZXrfLT8I+rXr8/0//1f/Pz8CAoK4s+33UrK6tWMHDWKrl27snnzJrp27Yq3t3eV23bp2oWFC//Gtm3fk5mZSXh4ON999x07duwgKyuT0NBQQkKaVLlN586dgYrYHQ8mgE+DBsyIfx7Lsjhw4ADz3nmHw4cPc8EFFzivszY1lcLCQt5+ey6hl11Gnz59ua5nT1Z88gldjsVz3I03Ej14MGVlZcTGPsWEiZO48sor+e6773j/vaq7kMlTptKrVy+uHzSIAf378emnK4mIiGD9+i/5y7RpDBs+HIDMzEw++PsH9OnTl88++4y2bdvx4LEd6YHCQucu78sv11FcXEz88y/QvXt3Bl5/PX379Hbe37JlSxkwYAB33HEnAPv37WP+/HnExDzEvz77jHr16hE3Ix5/f38uueQS7rrzjhP+TPPy8ti8eRO33fZnxo0bB8A3337Dd5s3AxDVsydfrk+j7OhR9uzdS2BQENu2fX/K537e/PkcPXqUwsJC9uzZDcC2bdu4/PIrTrhvkeM8FrV5895h3rx3APD39yduRvwJYdq/bx9BQcH4+fkBcFloKAB5+/L4PZ2u6YS3tzdZmVlkZmYwduw4Dh06RGZmBllZWfS87roznjUoMND5y2YaXdAIgLKysirXOT7TqFEj8fX1BeDo0dIqOzU/P38AvOtVPE4fHx+g4rfm/PbNjuOB9/HxoUmTphQWFLB/3z6g4sX3V15+GYDS0lIuu+wyAA4cKCQi4tcd66WXXur8/EDhAQBCjz2HDRo0IDg42Hn5Tz/9xE8//cQXxw4ty8vLKS0t5dChQxQWFhIYGIi/v/8J61ZWWFhYcR+XhVaZ4XjUdu7cSexTT/Ldd9/RtGlTSkpKqF+//knXAngrMZHk5IWUlZfTvFmzirnKyk95fRHwYNS6devO+Jtuwte3IW3ahDnDVVlQcDAbN26kuKgIP39/duzYAVDlL+Op+Pn707ZtW1I+T2HHjh1EdunC999/z4pPPiE3N/eEQ8+zFRgYCMCLL73k3EmUl5dz0UUXkZOT4/J6/9m5k5YtW/LLL7+wd+8euna9lsCgivsYd+ONjBt3o/M+GjZsCEBAQAA7Kr1rmp2d7fw84OIAAHbu2EGzZs0oLi4mNzePFsciFxgYSOPGjXnhxZec63p7e3PhhRdy8cUBrF+f79ydVl63soCAivs4/ucEsCP718/ffPMNCgoKWPnpZwQEBHD/ffed8nAyOzubhIQ53H//A/zp5pvZunXrOX0XWs5fHota9x7d6d799G/1Dx06lGVLlzJt2jSuv/56kt5JolGjRvTp0xcAP/+KEL6TlMSoUaMIuPjiKrfv0rUrbyUmEhISQmhoKJFdIvnwww/w8vKic+fIE+7P29ubBg0asH79l3To2JEePXqc8ePp2fM6LrroIpLmzuWmP93Mrp9+IjExgRnxz9O0adMzXue42bNncfDgQVJTv6C4uJgBAwcSEtKEzpGR/HPFClq3bo2XlzczX32FwUOG8PDDj9C//wDmzXuHF56P59IWoXzwwd+d63Xr1h0/Pz+efz6eP+/fz5o1a6rc35gxfyQxMYFPPvkHrVu1JilpLrZtk7zoPfr1H8DSpUt59NFHGDhwIO+9d/IX7ENCQmjbth2LkhcRGBjI/v37+fe/t+DlVfHSraPcQUlJCZs3b2Jf3j42bvyKxo0bAyc+9yEhFf9w7dm7h682bODdd991+TmUuqlWvFFwKhER1/DMM8+yc+cOnn46loYNGvDa67OcfxGGD7+BzpGRzJ07l6xvsk64fZcuFbuxyMiKgHXuHIllWVx19dU0atTopPf50MMPk5uby+xjL5KfqQsvvJDXZ83G29ubp2NjWb58OVOmTKVv374urXPcrbfeRlJSEl9//TV33nkX119/PQBxcTPo1KkTr7zyCrNnz6Jvv37cc8+9ANw9YQKDBw9h2bJl/OPj5fz59tud6zVu3JgZ8c8DMHPmq4S3DeeySoeJt99xB7fccit/X7yY6dOfpnFAgPP63bt3Z8rUqfx7yxYS5iRwy823nHLu5+Ke46qrwnjzjTfYu2cPw4YNc142ecoUmjRpwuOPPcaaNZ/Tu0+fKret/NxffvkV3HX33Xz26ac8+eQTLv0DI3WbVVRUdNov8qr821wcjnLKyx3OwwwRkZpUWFiIt7cXXl7eWJbl/DidWr1TExFxlaImIkZR1ETEKIqaiBhFURMRoyhqImIURU1EjKKoiYhRFDURMYqiJiJGUdRExCiKmogYRVETEaMoaiJiFEVNRIyiqImIURQ1ETGKoiYiRlHURMQoipqIGEVRExGjKGoiYhRjovbhhx/SqFEjtm7d6jzvhx9+ICoqiquvvppJkyZh2xW/DTA2NpaIiAjat29Penq6p0YWkRpgRNTWr1/Pxx9/TERERJXzJ0yYwIsvvsiWLVsoKCggJSWF1NRU0tLSyMjIIDk5mZiYGA9NLSI1wYiotW/fnqSkJHx8fJznlZWV8eOPP3LttdcCMGbMGFauXElKSgqjR4/GsizCw8PJz8+nuLjYU6OLiJsZETV/f/8TzisoKKBx48bO08HBweTm5pKTk0NwcLDz/KCgIPLy8s7JnCJS8+p5eoCaUnnXBmDbNpZlnfJ8gLVr17Ju3boqlwcFBdG7d+8anVXkXGrVqpWnR6hRxkatcePGHDx40Hk6NzeXSy65hAsvvJDc3Fzn+fv37yckJASAqKgooqKiqqwTHx9v/P8EUndkZ2d7eoQaZ8Th56l07NiR1NRUAN5//32GDBlCdHQ0ixcvxrZtsrKyaN68Ob6+vh6eVETcxYidWmJiIq+99ho7d+5k+PDhhIeHs2TJEp577jluuukmiouLGTJkCD169AAgMjKSsLAw/Pz8WLBggYenFxF3soqKiuzTXcG2beeHw1FOebmDgICAczWfx8XHx/Poo496egwRt8jOzj6vXk4pLCzE29sLLy9vLMtyfpyO0YefIlL3KGoiYhRFTUSMoqiJiFEUNRExiqImIkZR1ETEKIqaiBhFURMRoyhqImIURU1EjKKoiYhRFDURMYoRP3pI3GvE4wvdss7SuPFuWUfEFdqpiYhRFDURMYqiJiJGUdRExCiKmogYRVETEaMoaiJiFH2dmoib6ev8PEs7NRExiqImIkZR1ETEKIqaiBhFURMRoyhqImIURU1EjKKoiYhRFDURMYrRUfv000+JioqiX79+jBkzhiNHjgAQGxtLREQE7du3Jz093cNTiog7GR21Bx54gPfff59Vq1bRokULFi1aRGpqKmlpaWRkZJCcnExMTIynxxQRNzL6ez+DgoLIz8/nkksu4eDBgwQFBZGSksLo0aOxLIvw8HDy8/MpLi7Gz8/P0+MaS98LKeeS0Tu1F154gYEDB9KhQwf27NnD0KFDycnJITg42HmdoKAg8vLyPDiliLiT0Tu1yZMns2rVKsLDw5kyZQrz5s3Dx8enynVs28ayLADWrl3LunXrTlgnOzv7nMxrGnc/b3Xtz6GuPV53MTZqJSUl7Nu3j/DwcAD69evHypUrCQ0NJTc313m9/fv3ExISAkBUVBRRUVFV1omPj6dVq1bnbvBaIc0tq/z6vLl7vdqu9j7euhBKYw8/GzRogLe3N3v37gUgKyuLK664gujoaBYvXoxt22RlZdG8eXN8fX09PK2IuIuxOzWAOXPmMGbMGHx9fQkICGDevHn4+/sTGRlJWFgYfn5+LFiwwNNjiogbGR21/v37079//xPOj4uLIy4uzgMTiUhNM/bwU0TqJkVNRIyiqImIURQ1ETGKoiYiRlHURMQoipqIGEVRExGjKGoiYhRFTUSMoqiJiFEUNRExiqImIkZR1ETEKIqaiBhFURMRoyhqImIURU1EjKKoiYhRFDURMYqiJiJGUdRExCiKmogYRVETEaMoaiJiFEVNRIyiqImIURQ1ETGKoiYiRlHURMQoipqIGMXoqB06dIhBgwbRrl07Ro4cSWlpKQCxsbFERETQvn170tPTPTyliLiT0VF7+eWXGTx4MJs2bXIGLDU1lbS0NDIyMkhOTiYmJsbTY4qIG9Xz9AA1afny5aSkpADw9NNPAzB9+nRGjx6NZVmEh4eTn59PcXExfn5+nhxVRNzE6J1aUVERs2fPpm/fvkyYMIGSkhJycnIIDg52XicoKIi8vDwPTiki7mT0Tm3v3r307NmTxx9/nMmTJ/PWW2/h4+NT5Tq2bWNZFgBr165l3bp1J6yTnZ19TuY1jbuft7r251DXHq+7GB21Jk2a0K1bNwAGDRrEJ598QosWLcjNzXVeZ//+/YSEhAAQFRVFVFRUlTXi4+Np1arVuRu6Vkhzyyq/Pm/uXq+2q72Pty6E0ujDz4EDB/Lxxx8D8MUXX9CmTRuio6NZvHgxtm2TlZVF8+bN8fX19fCkIuIuRu/UYmNjufnmm5k+fTqhoaHExsbi5+dHZGQkYWFh+Pn5sWDBAk+PKSJuZHTUAgMDWbFixQnnx8XFERcX54GJRKSmGX34KSJ1j6ImIkZR1ETEKIqaiBhFURMRoxj97mdtNeLxhW5ZZ2nceLesI2IS7dRExCiKmogYRVETEaPoNTU57+g1STkd7dRExCjaqYnUctqZuqZWRs22bVatWkVGRgZeXl5ERkbSq1cvT48lIueBWhm1iRMnkpiYWOW8Bx54gJdfftlDE4nI+aJWvqa2cOFCpk+fzu7du9m1axfTp08nKSnJ02OJyHmgVkbtyiuvZOzYsTRr1ozmzZszfvz48+hHOYuIJ9Wqw8/HHnsMgPDwcIYMGcLw4cOxLIulS5cyaNAgD08nIueDWhW1F198scrpmTNnOj+fPXs2s2bNOtcjich5plZFrays7JSXORyOcziJiJyvauVraifj5XXejCoiHqRSiIhRFDURMYqiJiJGUdRExCiKmogYRVETEaMoaiJiFEVNRIyiqImIUWrVt0lJ9egno4r8Sjs1ETFKnYjazJkz6dy5s/N0bGwsERERtG/fnvT0dA9OJiLuZnzUcnJyWL58ufN0amoqaWlpZGRkkJycTExMjAenExF3Mz5qDz/8MM8884zzdEpKCqNHj8ayLMLDw8nPz6e4uNiDE4qIOxkdtc8++4yQkBA6duzoPC8nJ4fg4GDn6aCgIPLy8jwxnojUAGPf/SwpKWHGjBksW7asyvk+Pj5VTtu2jWVZAKxdu5Z169adsFZ2dnbNDXoW3D2X1qtd6trjdRdjo5aens6ePXvo378/tm2zdetWJkyYQMuWLcnNzXVeb//+/YSEhAAQFRVFVFRUlXXi4+Nr4Je+pLlllV/n0npnt5671d7HWxfCZuzhZ48ePdi6dStpaWmsWbOGsLAwEhISiI6OZvHixdi2TVZWFs2bN8fX19fT44qImxi7UzuVDh06EBkZSVhYGH5+fixYsMDTI4mIG9WJqDVs2LDK16PFxcURFxfnwYlEpKYYe/gpInWToiYiRlHURMQoipqIGEVRExGjKGoiYhRFTUSMoqiJiFEUNRExiqImIkZR1ETEKIqaiBhFURMRoyhqImIURU1EjKKoiYhRFDURMYqiJiJGUdRExCh14ncUnK0Rjy90yzpL48a7ZR0ROTXt1ETEKIqaiBhFURMRoyhqImIURU1EjKKoiYhRFDURMYqiJiJGUdRExCiKmogYRVETEaMYHbX09HQiIyNp164dY8eO5ejRowDExsYSERFB+/btSU9P9/CUIuJORkdt0qRJvP3222zatAkfHx+WLFlCamoqaWlpZGRkkJycTExMjKfHFBE3MvqndHz00Uc0bdoUgGbNmlFUVERKSgqjR4/GsizCw8PJz8+nuLgYPz8/D08rIu5g9E7teNAKCgr4xz/+wbBhw8jJySE4ONh5naCgIPLy8jw1ooi4mdE7NagI2rBhw3jppZcIDAzEx8enyuW2bWNZFgBr165l3bp1NTZLdna21jN4PXera4/XXYyOWnFxMUOGDOGpp55i4MCBQMXuLTc313md/fv3ExISAkBUVBRRUVFV1oiPj3fbPK1atTr2WZrWq1XruVvtfbx1IWxGR+3xxx9nwoQJREdHO8+Ljo4mJiaGu+++m2+++YbmzZvj6+vrwSnF0/STjc1idNTmzJnD5ZdfzksvvQTAzTffzKOPPkpkZCRhYWH4+fmxYMECD08pIu5kdNRKSkpOen5cXBxxcXHneBoROReMfvdTROoeRU1EjKKoiYhRFDURMYqiJiJGUdRExCiKmogYRVETEaMoaiJiFEVNRIyiqImIURQ1ETGKoiYiRlHURMQoipqIGEVRExGjKGoiYhRFTUSMoqiJiFEUNRExiqImIkZR1ETEKIqaiBhFURMRoyhqImIURU1EjKKoiYhRFDURMYqiJiJGUdRExCiKmogYpU5GLTY2loiICNq3b096erqnxxERN6pzUUtNTSUtLY2MjAySk5OJiYnx9Egi4kZ1LmopKSmMHj0ay7IIDw8nPz+f4uJiT48lIm5S56KWk5NDcHCw83RQUBB5eXkenEhE3MkqKiqyT3cF27adHw5HOeXlDgICAs7VfG5333330bdvX2644QYAevXqxfz587nssstYu3Yt69atq3J9f39/ioqKPDGqiNuFh4czdOhQT49xxgoLC/H29sLLyxvLspwfp1VUVGSf7uPw4cP2zz//bB86dMg+ePCAXVBQYJ/P4uLi7Dlz5jhPX3XVVXZxcfFZrztjxoyzXkPrab3asl5tUVBQYB88eMA+dOiQ/fPPP9uHDx8+ba+KiorsOnf4GR0dzeLFi7Ftm6ysLJo3b46vr6+nxxIRN6nn6QHOtQ4dOhAZGUlYWBh+fn4sWLDA0yOJiBvVuagBxMXFERcX5+kxRKQGeE+bNi32TK9sH3vDQIdrJ9eiRQutp/WMWa82OHLkCF5eFpbldcZvFNS5dz9F5PxRnXc/69wbBTXJtu0TviSktrDt0/7bdV7bvHlzldP5+fkemkRqgzr5mpq7ZWZmkpyczOLFi2nVqhWrVq1y6faFhYW8++67hIaGMmjQICZPnkxqaipt2rTh1VdfpVWrVi6tt3v3bkaNGsWyZcto2rQpAKtXryY2NpZly5ZVa6f9wQcf8MILL/Djjz/icDgIDw/nwQcfZMSIES6vNXLkSJYsWeI8PWfOHCZOnAhA27ZtT4jU7xkxYgQ//PCD83RUVBRbt251ea7jHA4HSUlJ3HHHHViWxYABA/j5559p1KgRCxcuJCgoyKX1xo0bd9rLFy1a5NJ6d95552kvf/vtt11azzSKWjVt3bqVRYsWkZycTIMGDcjPz2f9+vWEhoa6vNb48eNp2bIlGzZs4LXXXuOPf/wjcXFxrF69mjvvvJPVq1e7tN7EiROZOHGiM2gA/fr1Y+fOndx7770kJye7tF5iYiJJSUnMnj2bjh074uXlxYYNG5gyZQr//e9/ufXWW11ab9OmTVVOV45aWVmZS2vVhCeeeIJvvvmGm266CV9fX7Zt28bXX3/N3/72N5544gnmzJnj0nq33Xab8/Nbb72V+fPnn9V8gwYNOqvbG6+uffGtO3To0MFu3bq1PW3aNHvz5s3O86rriiuusG3btsvKyuymTZtWuSw8PNzl9Vq2bHnKy1q3bu3yemFhYfbu3btPOD83N9du27aty+v9dobKz12bNm3Oer3qrFFZq1at7MOHDztPh4aG2rZd8edz/PPqOtvb1zXV+eJb7dSqoWvXrixfvpzMzEzatGlz1u86eXlVvLTp7e1d5ftSq+uXX37h6NGj1K9f/4Tzf/nlF5fXKy0tpVmzZiecHxISgsPhqPac7nLkyBE+//xz5+ni4uIqp3v37u3SekePHsXf3995es2aNUDFn8/xPyupvRS1akhISGDWrFmsWLGChQsX8sADD1BWVsby5cuJjo6mXj3Xntb8/HxiY2MByM3NdX4OsG/fPpfnGzJkCPfffz8vvfQSDRs2BODnn39m0qRJjBkzxuX1fhvHyn73+/BOorCwsMpjrPyYq/Mif7du3Zg1a5bzdJcuXaqcdjVqAQEBZGVl0bFjRwDnSwrr16+nSZMmLs8n55a+pMMNDh8+zNKlS1m4cCGbNm1i165dLt2+8l/Ak5k8ebJL6xUVFRETE8PSpUu58sorKS8vZ9u2bYwcOZLXX3+dBg0auLReYGDgaS93NUTufrzutmLFCiZOnMjUqVOJiIjA4XCQlpZGQkICixYtokePHi6t5+7nry6pzpd0KGpulp+f/7v/E58rRUVF7Nixg6NHj3LFFVdwwQUXeHqk88aOHTt488032bZtG2VlZbRr14677rrL5Xei5ewoaiJiFH3xrYjUeYqaiBhFURMRoyhqImIURU1EjKKoiYhRFDXxqA0bNhAREYGvry/t2rUjLS3N0yPJeU5RE4966623uPrqq9m9ezd/+MMfeOihhzw9kpznFDXxqGuvvZbMzEyuvfZavv32W/bs2ePpkeQ8p6iJxxQWFjJhwgSGDh3K9u3b6d+/v9E/oVfODf2UDvGYI0eO4HA48Pb2ZvPmzaSmpmLbNqWlpfj4+Hh6PDlPaacmHtOsWTPuueceZs6cyV133UViYiIlJSW/++OqRU5H39AuIrWWvqFdROo8RU1EjKKoiYhRFDURMYqiJiJGUdRExCiKmogYRVETEaMoaiJiFEVNRIyiqImIURQ1ETGKoiYiRlHURMQoipqIGEVRExGjKGoiYhRFTUSMoqiJiFEUNRExiqImIkZR1ETEKIqaiBhFURMRoyhqImIURU1EjKKoiYhRFDURMYqiJiJGUdRExCiKmogYRVETEaMoaiJiFEVNRIyiqImIURQ1ETGKoiYiRlHURMQoipqIGEVRExGjKGoiYhRFTUSMoqiJiFEUNRExiqImIkZR1ETEKIqaiBhFURMRoyhqImIURU1EjKKoiYhRFDURMYqiJiJGUdRExCiKmogYRVETEaMoaiJiFEVNRIyiqImIURQ1ETGKoiYiRnExalbNTCEickqudeeMomZZVRe1bdulOxERcdVvO/PbDp1KtQ4/f/nll+rcTETkjFW3My5HsOorfwAAATBJREFUzbIsioqKKC4u1o5NRNzOtm2Ki4spKio6491ZZVZRUdHvlsm2bWzbxuFw4HA4KC8vx1FeTrnD4bwMbNQ4EamOinZZWFbFh7eXF17e3nh7e+Pl5YWXl5fzst9Tz7U7rljUy7KwvbzwBhzOqB2nsomIK34N1fG+WF5eFf89w5BVdsZRsywLbLviTo4HzbKwfhs121bWROSMVGzQqkatctgsy8LizN8kgDOMmmVZFeE6dgdeXl7YlYKm19ZExB2sSrsz5y7tWNDONGwuH35CRV3tY6E7ddAUOhE5nZNHyhm0ihM1e/hpHzv8pNKhqHZpIuJO1kl2Zm4//Pztws64/ebOFDgRqY5TRas6X9LhUtROdkeVQ1adAUREKjvbjlQrau4cQETEnfRTOkTEKP8Prv/Qiq3Xup8AAAAASUVORK5CYII="},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/image-dab53361cb560c92baeb4fb3315cab5a.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/markdown-data-34fd56cbb56e79c00a4539f5bfab1e3b.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/toggle-5e565e1d5a735ee4a481835a4e53ee43.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/stat-large-4434acbc0c05f2c331071c827076d7b0.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-area-line-fbcaba9e073f71a07b202834d2992b49.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-range-transpose-ac0df7689c88cb6fe886aaed084918bf.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/text-sizes-5d78df884df4f57688aef7d5b7b68349.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/combobox-99fc7d69ef37ddf7a125cdeaa730e2ce.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjwAAABgCAYAAAAZ3Kg/AAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjExOjI4IFBNIFBEVJtn38wAABp0SURBVHic7d15XJV13v/x12GRwya7eFhENEXFBTR3ETQtt8bUUmtS0/ZyqfS+f9PMY9b70TZZmUt131Nq2bRaM5OOlruClisoKgoooLIqcFhE9vP7Az2JokHCUKf386/jub7X9/pchz+ut9/v97oug8VisSAiIiJiw+xauwARERGRlqbAIyIiIjZPgUdERERsngKPiIiI2DwFHhEREbF5CjwiIiJi8xR4RERExOYp8IiIiIjNU+ARERERm6fAIyIiIjZPgUdERERsngKPiIiI2DwFHhEREbF5Dq1dgPx8xMXu4rNPP6GkpKS1SxERkV8wd3d3pk6bzrCo4Y3eR4FHGu2zTz/h2YWLCA3t1NqliIjIL1ha2mneeG1xkwKPprSk0UpKShR2RESk1YWGdmrybIMCj4iIiNg8BR4RERGxeQo8IiIi8pNQ2oI3xSjwiIiISKuLjz/EokXPkRAf3yL9K/CIiIhIq4qPP8Rby5fh5eXFiuVLWyT0KPCIiIhIq7kSdoYOi+KFF19myNBhLRJ6FHj+w0pLS/nwwzXk5ua2dikiIiKtKi3ttDXszHpoNnZ2djw0e4419KSlnW62YzUp8NTW1vLhmjVMmTyJQQMHcOfoUbz04gsUFxU1W0FN0f/2fky9796fTb8AGzds4I3XX+eDD95v9D79+kby4K8faJF6REREWktISEdmzHyIWQ/NxmAwAGAwGHho9hxmzHyIkJCOzXasJgWeN5cs4Y03XufSpXJGjBhJu3btWLt2LXPnzcVisQCwePGr9OsbSUJCyyw6+rm7a8wYnn56Lg8+OKO1S2kxSUlJPPbYo0QNG8odI0fwu98+T0FBgXX7kSNHmPHgrxk8aCDjx41l7eeft2K1IiLSWuzs7BgeHW0NO1cYDAaGR0djZ9d8E1GN7qmmpobPPvsUDw8P1q5dy0svv8yHf/+I6Ohojh09ytGjR5utqP+EKwHtP61t27bMefhhTCZTqxy/pZWVlfHUU0/SvXt3Pv3sc956620yMjJ46cUXASguKmL+vLkMGDCQtV98ybPPLeT111/j22/3tHLlIiJiyxodeKqqqqiqqsLewQGuSmIvv/JXduzcRY8ePXj+N7/h448+AuDhOXN48onHre3WffUV06dNZcjgQUz81d18+OEa67ZXXn6Zfn0j2bFjh/V//jNnPMip1FRrm4KCAhYufI5hQ4dw75TJHDx48LoaExMTeezRRxgeNYzRo0fx4gsvUF5eDsCWLVvo1zeSt996izlzZjOg/+1UVlY2qt+rVVdX8+abSxg75i4GDxrI1PvuZfPmTQCYzWb69Y1k4XPPsmrlSu4cPYqRI2JYsuQNampq6tWxetWqRp/7FV999S/GjxtL9PAoXnrxBSorK63bcnJyWLRwIdHDo4geHsWihQvJzs4GICEhnn59I/ndb5+3tn94zhwGDRzA2bNnb3q+TVVWVsbDcx5mwYJnCAgIIKxbN+65ZxLJyScB2LxlM94+PsybP5/AwEBGjRrFpEmT+PKLL5u1DhERkas1OvAYjUaGDB1KQX4+06bex1srVnD48GEcHR1xd3fH3t6ecePHWdvHxMQwZUrdOpitW7fypz/9EVdXN5588il8ff144/XX+fe/19c7xl9feYWePXsxZMgQjh07xu9+91vrtkWLFrJj+3Z6hIdze//+/PlPf6o3SpObm8vjjz1KZmYms2fPYcjgwXzxxVr++sor9Y7x0Ud/x8HenslTpmBnZ/eD/V5r1cqVfPD++3Tp2pWn587F3t6e3z7/PCdPnrS2OXToENt3bOf++x/AZApgzQcf8L/vvHPT3/dm5w6QmZXFu397l5gRI2jf3sTatWtZ/OqrAJRdvMijjzzMzp07GDN2LOPGjWfXrp088vAcLl68SEREJKNGjeKbb74hJSWFuNhYEhLiuf+BBwgODr5pXU3l6+vLgzNmWIchMzMz2bDh3wwbNgyom+7qGR5eb5/wnj05fvxYs9YhIiJytSa9Lf2ll15m2bKlrF+3jvfee5f33nuXoKAgfv/7P3B7//5ERQ3n/gce4OOPPmLGzJlEREQC0K1bGH99dTFDhw7FaDTSt18/Zs54kH179zJ+/ARr/w/NfoipU6cBMH3aVFJSUjCbzeTl5XE4IYGwsDDeeed/sbOzY/v2bSxauNC6r9Fo5NVXF9MxtCOBgUHU1taybds29u79rt45REREsGz5CgCSk5N/sN9rnT5dt2J89uzZREb25a67xnDiRBJ+vr7WNrW1tSxbthwPDw8mTpzIxIm/Yu3az3niySdv2O+Nzt3T0xOAi6WlrF79PiEhIZjNZiZPuod169bx7HPPsWHDBrKyspg5axYLFjwDgIurC6tXrWL9+nVMmzad+QueYdeuXSxfvoy83Fy8vb155JFHb/4HvwUZGRlMve9eampqmDx5CgsX/RcA5kLzddN5np5eFBYWtlgtIiIiTVoN5Orqym9+8zxbt21nxYq3mHD33WRlZfHMMwus0ycNCQgIxNHRgSVL3uCpp55k/ry5AFRWVtVrFxbWzfq5Q4cOQN0UyZWQMXjIEOvIwdChw+otZvLw8MDH14cvv/iSZ595hkn3TKSsrIzKqvrHiIzsa/3cmH6vddddd2FnZ8cTjz/OnDmz+fTTTwgwBeDt42Nt07VrVzw8PADw9vGhS5cuFBUV3fSifqNzvyI4OJiQkBAAPD096dW7N5WVFWRlZpJ0IgmAYUOHWdtHRUUBdSMqAIGBgdx//wPExcaSnJzMU089jaur6w3ruVUBAQF89PEnLH7tdRIOJ/Diiy8AYKHh0bNrF6yJiIg0p0YHngsXLhAbu4uMjAycnJwYNHgwf/7zX5g5axaXLl1i//59N9z3zTeX8Owzz5CSnELfyL488UTDIx0/uBr7qmvltdNOu3btZMaDD7J16xZCQ0N57PHH8fb2btwxbtLvtWJGjODjTz5h1qyHcHBw4MM1a5g+fRp79ny/6PbKep0rqq4JXQ35oXO/tqp6dTZQ85XtBr4PErWW2qv6a9lF246OjnTu3JmYmBj++Ic/8o8vv6SgoABvL28KzfWDX2FhQYN/KxERkebS6MCTmZnJMwsW8D9/+QvV1dVA3UX1wvnzALRp4wR8f4Gtrqq27rt50yZMJhPvrVzJI48+2uR1I506dQJgz57d1jARGxtLbe33F/CtW7ZQW1vLW2+/w/wFCxgRM4LS0tJb7vda3367h2PHjvHU00/zf//3N/78l/+htraW2F27rG2Sk5OtDxbMysoiNfUUnp6eeHl5Nem8r3bu7FnS09OBusXRiYmJODk5ERgURPfuPQDYFft9DbG7YgEI61Y3cpSRkcEnH3/MgAEDCA0NZcXy5ZS0wEva4mJjmTZ1ar3f0M7eHqgbxQkPDyfxyJF6+xxOOEzPnr2avRYREZErGr2Gp3fv3vTq1Yv4+EPcO2UyYd26kZ6WTmpqCiaTiejoaAD8/f0BWLr0Tabcey8TJ96Dr68fSUnHWbZsKR5tPfjii7VNKrJr16706dOHw4cP8+QTj9Opc2d2x8Xh6OhobePr6wfAsqVLiYiMYOOGDcDNp0ka0++1tmzezD//+U/2799PeI9wNn690fr7XNGmTRuefPIJBg8eTFxsLJWVFcycNfOWnifg6ubG/HnziBoexYH9ByguKuLe++7DaDQybtw4Vq9exUd//3vdm2YNBr7617/w92/PhAl1a6Ree20xNTU1PLdwEbk5OSxYMJ933n6L//rv//eja2pIj/Bw8vJyeeWVl5k5cyZlZZdYsuQNevbshZeXF6NGj2bp0jdZsuQNpk6dxuGEBNat+4q3f2BRt4iIyK1o9BXYYDCwdNlypk+fTmVlFTu2byc//wJjxo7l3fdW4uzsDMDkKVMYNWoUZ86c4euNdWHghRdfpE+fPnz26aesX7+OefPmN7nQxYtfIyYmhuPHj7Nv3z5+/4c/4uTkZN3+yKOPMn78eL7b+x2rVq5kzNhxBAcH3XK/11r0X//NfVOnsn/fPt58cwkXS0t5/vnfMnbc93eo9egRzqR7JrF50yaKS0qYOWsWjz/+RJPP+WodgjswZ84ctm/bRk5ONvfedx8LFy4CwMXVlb+9+x7R0TFs3ryZzZs2ER0dw3srV+Lm5sbu3bvZHRfHhAl306VLF4ZFRTFw4EA+//zzBm9/vxXe3t4sX76CtLQ0pk+fzhOPP4anpyd/vXxHmZubG8uWr+DQwYNMnnQPb7/9Fr//wx+sC9xFRERagsHSWk/gs0Fms5k7Ro5g8OAhLF+xorXLaXazZ81g1ftrfrihiIhII9TW1hIXG0vU8OH1bl6xWCzE7trFsKioG86ONPWapJeHioiISKs4k5HBmg9W88HqVdabbSwWC++vXsWaD1ZzJiOj2Y6lwCMiIiKtomNoKHPnzScuLtYaet5fvYrdcbHMnb+AjqGhzXasJj14UG7O09OTg4f00lQREZHG6hMRydx581m+bCknTp7gwvnzzJ03nz59Ipr1OBrhERERkVbVJyKSp+fOp7CwkKfnzqdPC9zIohEeERERaXURkZEsXvw6bu7uLdK/RnhERETkJ6Glwg4o8IiIiMgvgAKPiIiI2DwFHmk0d3d30tJOt3YZIiLyC5eWdhr3Jk5/adGyNNrUadN547XFLfLSURERkcZyd3dn6rTpTdpHr5YQERERm6cpLREREbF5CjwiIiJi8xR4RERExOYp8IiIiIjNU+ARERERm6fAIyIiIjZPgUdERERsngKPiIiI2DwFHhEREbF5erWE3FRpSXFrlyAiItIgN/e2jW6rER4RERGxeQo8IiIiYvMUeERERMTmKfCIiIiIzVPgERERkZ+EmpqaFutbgUdERERaXWlpCampKZSWlrZI/wo8IiIi0qpKS0s4d+4cjg6OnDt3tkVCjwKPiIiItJorYcfDw5PQTp3x8PBskdDTIoEnOyuT9LS0luj6Zys1JZnz5/NauwwREZGfjPLycmvYMZlMGAxgMpmsoae8vLzZjtWkJy1/sHql9bPBYMDFxZXAoCB694nAxcXFui12107Ky8sJCAygTRunWyrwcEI8hxPiGXnHaIKCgxts89U//0FJSTG/njHrRx9n8zdfk52dxbTpD+BkNP7ofhpSZDazZ3ccXl7e3D3xnkbt883XG8jNyeGBX8/AwdGxWesRERH5KXByMtK+vQlPT89635tMJpydnXFyar7rcZNfLeHo6EhgUBCWWgtms5nkkyc4eyaDMWPH49627hHPQ4ZGUVFRfsthx1Z4eHoyYOAgvLy9W7uUFlNRUcGRI4fJzc2ltqYGTy8vevXqjZeXF1CX4uPjD5GXm4u9vT1BwcH07t0HOzvNqoqI/FIZDFwXdq640fc/VpMDj7OLC8OjR1j/ffJEEnu/+5bvvtvD6DvHANxwJOaXrFv3Hq1dQovav28fAMOHR2Nvb8+JpOPs2R3HuPETMBgM7Nv7Hfb29owYeQc11dXs27ePJIfjhPfs2cqVi4jIL8Etvzw0rFt3Tp86RXZWFhcvXsTV1fW6KaZTqSkcTUykpKQYo7Mzt93WhYjIvtY+TqWmcPzYMYqLi3BxcSGsW3d6hNe/EJaXl7N18yZy83Jxd3On/4CBtDeZGqyppqaG+EMHSTt9iurqanx8fenXrz8+vr4AWGprOXToIKkpydjb2xPeq/dNz7G2ttbaX0VFBe7ubekdEUHHjqFA3ZRaWdlFoqJj2L93L2VlFzEFBDJ4yFCMRiMV5eV8+slHBAQGMmr0XWSkp7NzxzZu7z+AvLw8sjLPYTQa6Xd7f0Iu93nFhfwL7N+3l5LiYtq182fwkKG4urlddZ4HSDt9msrKSry9fYjs14/27U1UVlbyjy/X4uDgwKTJ92JnZ0f8oYMkHjnMsKjhdOp8WxP+yj/MZDJhCjDh4uIKQNewMDIyMigvL6e6upoLFy4wbvwEjJenC3v16sWh+EP0CA/HYDA0ay0iIiLXapb5hPam9gAUFhRcty03N4fdcbEY7AxE9u2Hj48vRw4nkJR0HICMjHR2x8Xi2MaRiMi+OLu4cGD/Pk6fSq3Xz6GD+3FwdCAkpCPmIjNbt2yitLSkwXriYndx/NhR2ptMdOveg5LiEr7e+G+Ki4oASEiI59jRRJycjISEdORkUhIFBfk3PL+jiUc4djQRL29vIvv2w2BnIHbnDgquOt+q6mr2791Lp86dCQgM4uyZDHZs23rT3y3xyGEMBgOdb+tCWVkZcbG7uHTpUr02e+Ji8fNrh79/e7KyMtm6ZTOW2tq689y1k+PHjuHj60uP8J6UlBSzedM35F+4QJs2bYiIiORiaSnJJ09QXl5O0vFj+Pr6NXvYAeh8223WsFNVWcmp1FN4eHhgNBoxmwtxdnaxhh0AL29vKisqKCsra/ZaRERErnXLIzyAda1OZWXFdduKzGYAOnYMJbxnL3rU1nL27Bk8PevWdnh7+xA9YiSBgUE4ODjg397EhvVfkZ2VVe/CHBgYxNCo4QC4ublxOCGe1JSUeiNFAMVFRWSkp9GhQwhDhkYBENwhhA3rvyIlJZm+/W4n+eQJHBwcGH3XGFxdXelx8SL/+scXNzw/s7kQgF69+tDO35+OoZ0oyM/HxdnZ2sZSW8vAwYMxmQKwWCxs3LCevLxcCgsLcHF2abDf9iYT0TF104MGg4ETScfJy80lpGNHa5vefSK5rUsXADZ9vZGcnGxyc3NxdnEhIyMdXz8/RowchcFgwN+/PVs2f8PRxCNEjxhJ165hnEhK4siRwxQUFFBdXU3/gQNveJ7N4euNGygrK8PX15dhUVEYDAYqKypp49SmXrs2ber+XVlRgaura4vWJCIi0iyB50rQaeN0/SLlwMAgnJycSIg/RHpaGu38/ekQEkJbDw8A3N3dKTIXcvDAfoqLi60jLTW19R8vHRj0/bqgoKBgDifEW8PU1S7kXwDgzJkM/r7m/XrbiouLKS+/REVFBX5+7awXWldXV7y8vTmf1/Bt46GhnchIT2fTNxvx9fXDv70/oaGdMV4VeAx2dvj71410GQwGTKYALpw/T5HZfMPA4+3tY/3c9vKC7+rqqnptgoKCrvoNgsjJycZsLqTsUt3ISGBgkHVKyBQQgL29PfmXfwODnR23DxjA1s2bSE1JJrRTZ/z82jVYS3MZFjWc8kuXSElNIS42lpgRI7FgufEOms4SEZH/gGYJPDnZOQB4e11/F5Krmxu/umcyaadPkZuTQ3raaZJPnqBX7z5E9u3HwQP7OXY0kXb+/gQEBNKhQwf2fvdtA0exNPDpxs0639aFrmFh9TY5XXXX2HUX4Zt0GtwhhAm/uof0tNOcz8vj2NGjHE1MZOSo0QQGXg4kFgsWy/ed1F6edrqZxqxduWFZN9hQV4PhBu1u+ss1Czc3N9zc3PD28WH9+nVkZ2fj5GSksqL+6N+VkOzUQEgWERFpbre8hudE0nHOn8/DFBCASwNTEwUF+Zw7e5ZOnW9jxB2jmDhpMgBnz5wBID0tDVc3N8aMHU/vPhHWW9uvde7s2as+1+3r0cAta1du/a6uqsLPr13dSI6LK7k5OVRWVWI0OuPk5ERhQQEXL9Y9xfHixVIKC69ff3RFVmYm+RfOE9m3H3eOGcuwqOFYLJZ6NVksFjIzzwF1YSfr8mePy1N3P1a98z5X99nTywsf37rRocxzZ61BKysrk9raWrx9fKx17N+3FyejkY6hnUg7fZq83NxbqqchFRUVfPP1RoqLi63fXQlzBsDLy4tLly5x6dL363XyL+RjNBrrPb9JRESkpTR5hOdSWRm7dm6nttZCkbmQoqIijM7ODBo0pMH25kIz3+6JIzWlHR1DQzl//jwAfu38AHB2cSY/P59DBw/g5ORE8skTDfaTlZXJzh3bcHBw5PTpU9jb23Nbl67XtfPy8iIoKJiMjHS2b92Cl7c36WlpFBcXMfrOMRgMBrqGhZF45Aibv/mawMAgMjPP4eDoSHV1dYPHTk9PIzUlmZzsbHx8fUk7ffryOXw/PWQwGDiwbx/ZWVkUFhZQWFhIO39/vLy8qLiFJ0UmHkkgP/8CF0tLyc3JwdPLC3//9hgMBjp0COHMmQy2btmEp6cXp06lYrCzo2evXgAkHa+7823AwEF07BjKuXNn2bf3W8bfPbFZ74xycnLCaDSSEH+IPn0icHB05FRqKgbAx9cXo9FIu3btOHjgAH0iIqisrCIxMZHOLbB4WkREpCFNHuGpqqoiPS2Ns2fPUF1dQ9ewbkyY8Ksbjsx06tyZ/gMGUlFRzqGDB8jLzaF7j3AGDBwMQNTwGNr5tePEiSROpabSt9/tDfbTr/8AqiqryEhPw9PDkztG34nb5duzrzU8ZgTdu/fgwoXzHE08gr29HdExIzAFBAAQEdGXHuE9qaioID09na5h3fDz87vhOQ8YOIiwbt3Jzs7m4IH9VFVVMnDQEDp16mxtY2dnx+AhQ8nOyqIgP5/gDiHEjLijUb/pzQwdNpy8vFxyc3MICAzkjlGjrWElKjqG7j3CKSwo4OSJJNq6t2X0nXfh6+tH+aVLHDmcQNu2bQkL64bR2ZmePXtRUFBASvLJW67rWgMHDcbZ2YW4uFi2btlMobmQIUOHWe/M6j9gIA4OjmzbupVv9+wmODj4uilHERGRlmKwXL3wRH6U5ni1xU9VaUnxDzcSERH5ESwWKCoyN/hUZbPZjIeH503vbXFzb3iwpSF6rr+IiIi0ioqKcnJyssnJzq73fXZ2Njk52VRUNN/LQxV4REREpFUYjUaCgoIxF5nJyc7GYqkLO0VFZoKCgus9sPZWaUpLbkpTWiIi0tJKS0s5d+4sbRzbUFlVSVBQ8A3X6V5NU1oiIiLys+Hm5kZQUDBV1VWNDjtNpREeuSmN8IiIyH9KTU0N9vb2jW6vER4RERH52WlK2GkqBR4RERGxeQo8IiIiYvMUeERERMTmKfCIiIiIzdNdWiIiImLzNMIjIiIiNk+BR0RERGyeAo+IiIjYPAUeERERsXkKPCIiImLzFHhERETE5inwiIiIiM37/6P0iNTPPTJkAAAAAElFTkSuQmCC"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/slider-06551b8ad6f45a0aa69c946c5d8332d1.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/range-slider-7394a0b0ebb5aace4e83bb302adc6fc3.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/date-picker-a98cee22ba2dc41a9e12a103dabc10e9.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/separator-761eab53dd3e94f7cae3fc78ce5f36b7.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/table-search-f29a132ad20079a67a0fee3143689fa6.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/table-select-428e4b7f6e76c00956feb8ede847a369.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/template-data-1b5f5707f248dfd5a606e722345ad2a2.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/toolbar-6cae7b599ebdc78e77db0f536dc3392e.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/hash-routing-816838345c1b3e01e3fe1664c336f3d6.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-point-annotation-394f235e137883e033b2cc056955e713.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-groups-b096660ab331215122bb6771cda619ac.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-stacked-transpose-9f125bb40e6aea97cd6ad2b4e547a259.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-stacked-grouped-678de98e675478e364cab127af4c07bb.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-stacked-grouped-transpose-2b181afc5e1a2626b7e700625c7f41b3.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-interval-helix-b499f18c451e87aa39d64ca154a15bdf.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-line-47205e6d75190eb08bb6cecf3dfe347b.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-line-groups-b3aacba3e2a8fd2306aef09adcb88fea.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-line-smooth-566975ab0a25c3e3ad7b3941ca441df6.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-line-annotation-0b3e87d958bdf0bdcfddc482ad9cf3c5.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-path-point-7e7d80f97ee02c9ac8591676f931f173.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-path-smooth-d3dc4edb37522cdaf43f8da9ab425156.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-area-line-smooth-215c412ff603d4f09d5e46af9dc84085.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-axis-title-f0d1c16575277e024054fbb19e5af49a.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/plot-matplotlib-14dd0da4129dea8f5aae83573ba31241.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/upload-ui-ce3af4e53ce2d7a546aa933667f7758a.png"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/upload-download-ce3af4e53ce2d7a546aa933667f7758a.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/meta-notification-fbc7ef4c16cebfc522a564d72cb6953d.png"},function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"},function(A,e,t){"use strict";t.r(e),e.default=t.p+"assets/images/graphics-hilbert-0b77a235731e83c53e6167b922a11f1c.png"}])]);
\ No newline at end of file
diff --git a/docs/blog/hello-world/index.html b/docs/blog/hello-world/index.html
deleted file mode 100644
index ca8e85955f..0000000000
--- a/docs/blog/hello-world/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<meta name="generator" content="Docusaurus v2.0.0-alpha.65">
-<title data-react-helmet="true">Hello | H2O Wave</title><meta data-react-helmet="true" property="og:title" content="Hello | H2O Wave"><meta data-react-helmet="true" name="description" content="Welcome to this blog. This blog is created with Docusaurus 2 alpha."><meta data-react-helmet="true" property="og:description" content="Welcome to this blog. This blog is created with Docusaurus 2 alpha."><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/3.2819f6b8.js" as="script">
-<link rel="preload" href="/wave/ccc49370.5545763d.js" as="script">
-<link rel="preload" href="/wave/d610846f.db356212.js" as="script">
-</head>
-<body>
-<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--8 col--offset-2"><article><header><h1 class="margin-bottom--sm blogPostTitle_1mse">Hello</h1><div class="margin-vert--md"><time datetime="2019-05-29T00:00:00.000Z" class="blogPostDate_3bQP">May 29, 2019  · 1 min read</time></div><div class="avatar margin-vert--md"><a class="avatar__photo-link avatar__photo" href="https://github.com/endiliey" target="_blank" rel="noreferrer noopener"><img src="https://avatars1.githubusercontent.com/u/17883920?s=460&amp;v=4" alt="Endilie Yacop Sucipto"></a><div class="avatar__intro"><h4 class="avatar__name"><a href="https://github.com/endiliey" target="_blank" rel="noreferrer noopener">Endilie Yacop Sucipto</a></h4><small class="avatar__subtitle">Maintainer of Docusaurus</small></div></div></header><section class="markdown"><p>Welcome to this blog. This blog is created with <a href="https://v2.docusaurus.io/" target="_blank" rel="noopener noreferrer"><strong>Docusaurus 2 alpha</strong></a>.</p><p>This is a test post.</p><p>A whole bunch of other information.</p></section><footer class="row margin-vert--lg"><div class="col"><strong>Tags:</strong><a class="margin-horiz--sm" href="/wave/blog/tags/hello">hello</a><a class="margin-horiz--sm" href="/wave/blog/tags/docusaurus">docusaurus</a></div></footer></article><div><a href="https://github.com/facebook/docusaurus/edit/master/website/blog/blog/2019-05-29-hello-world.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div><div class="margin-vert--xl"><nav class="pagination-nav" aria-label="Blog post page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/blog/welcome"><div class="pagination-nav__sublabel">Newer Post</div><div class="pagination-nav__label">« Welcome</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/blog/hola"><div class="pagination-nav__sublabel">Older Post</div><div class="pagination-nav__label">Hola »</div></a></div></nav></div></div><div class="col col--2"><div class="tableOfContents_3SO_"></div></div></div></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/3.2819f6b8.js"></script>
-<script src="/wave/ccc49370.5545763d.js"></script>
-<script src="/wave/d610846f.db356212.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/docs/blog/hola/index.html b/docs/blog/hola/index.html
deleted file mode 100644
index 77056b3656..0000000000
--- a/docs/blog/hola/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<meta name="generator" content="Docusaurus v2.0.0-alpha.65">
-<title data-react-helmet="true">Hola | H2O Wave</title><meta data-react-helmet="true" property="og:title" content="Hola | H2O Wave"><meta data-react-helmet="true" name="description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"><meta data-react-helmet="true" property="og:description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/3.2819f6b8.js" as="script">
-<link rel="preload" href="/wave/ccc49370.5545763d.js" as="script">
-<link rel="preload" href="/wave/bdd709f1.bdb6a562.js" as="script">
-</head>
-<body>
-<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--8 col--offset-2"><article><header><h1 class="margin-bottom--sm blogPostTitle_1mse">Hola</h1><div class="margin-vert--md"><time datetime="2019-05-28T00:00:00.000Z" class="blogPostDate_3bQP">May 28, 2019  · 1 min read</time></div><div class="avatar margin-vert--md"><a class="avatar__photo-link avatar__photo" href="https://github.com/wgao19" target="_blank" rel="noreferrer noopener"><img src="https://avatars1.githubusercontent.com/u/2055384?v=4" alt="Gao Wei"></a><div class="avatar__intro"><h4 class="avatar__name"><a href="https://github.com/wgao19" target="_blank" rel="noreferrer noopener">Gao Wei</a></h4><small class="avatar__subtitle">Docusaurus Core Team</small></div></div></header><section class="markdown"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet</p></section><footer class="row margin-vert--lg"><div class="col"><strong>Tags:</strong><a class="margin-horiz--sm" href="/wave/blog/tags/hola">hola</a><a class="margin-horiz--sm" href="/wave/blog/tags/docusaurus">docusaurus</a></div></footer></article><div><a href="https://github.com/facebook/docusaurus/edit/master/website/blog/blog/2019-05-28-hola.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div><div class="margin-vert--xl"><nav class="pagination-nav" aria-label="Blog post page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/blog/hello-world"><div class="pagination-nav__sublabel">Newer Post</div><div class="pagination-nav__label">« Hello</div></a></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></div></div><div class="col col--2"><div class="tableOfContents_3SO_"></div></div></div></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/3.2819f6b8.js"></script>
-<script src="/wave/ccc49370.5545763d.js"></script>
-<script src="/wave/bdd709f1.bdb6a562.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/docs/blog/index.html b/docs/blog/index.html
index d6f14ae645..e119034f09 100644
--- a/docs/blog/index.html
+++ b/docs/blog/index.html
@@ -5,31 +5,27 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Blog | H2O Wave</title><meta data-react-helmet="true" property="og:title" content="Blog | H2O Wave"><meta data-react-helmet="true" name="description" content="Blog"><meta data-react-helmet="true" property="og:description" content="Blog"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/3.2819f6b8.js" as="script">
-<link rel="preload" href="/wave/a6aa9e1f.0e25f4a4.js" as="script">
-<link rel="preload" href="/wave/af172acd.e4c7f550.js" as="script">
-<link rel="preload" href="/wave/3570154c.6fb4d9ba.js" as="script">
-<link rel="preload" href="/wave/8e9f0a8a.ea616d71.js" as="script">
-<link rel="preload" href="/wave/0eb58673.1082abbb.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/3.c0e07a77.js" as="script">
+<link rel="preload" href="/wave/a6aa9e1f.29345e50.js" as="script">
+<link rel="preload" href="/wave/e7ad456d.8574afa5.js" as="script">
+<link rel="preload" href="/wave/0eb58673.d66df410.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><main class="col col--8 col--offset-2"><article class="margin-bottom--xl"><header><h2 class="margin-bottom--sm blogPostTitle_1mse"><a href="/wave/blog/welcome">Welcome</a></h2><div class="margin-vert--md"><time datetime="2019-05-30T00:00:00.000Z" class="blogPostDate_3bQP">May 30, 2019  · 1 min read</time></div><div class="avatar margin-vert--md"><a class="avatar__photo-link avatar__photo" href="https://github.com/yangshun" target="_blank" rel="noreferrer noopener"><img src="https://avatars0.githubusercontent.com/u/1315101?s=400&amp;v=4" alt="Yangshun Tay"></a><div class="avatar__intro"><h4 class="avatar__name"><a href="https://github.com/yangshun" target="_blank" rel="noreferrer noopener">Yangshun Tay</a></h4><small class="avatar__subtitle">Front End Engineer @ Facebook</small></div></div></header><section class="markdown"><p>Blog features are powered by the blog plugin. Simply add files to the <code>blog</code> directory. It supports tags as well!</p><p>Delete the whole directory if you don&#x27;t want the blog features. As simple as that!</p></section><footer class="row margin-vert--lg"><div class="col"><strong>Tags:</strong><a class="margin-horiz--sm" href="/wave/blog/tags/facebook">facebook</a><a class="margin-horiz--sm" href="/wave/blog/tags/hello">hello</a><a class="margin-horiz--sm" href="/wave/blog/tags/docusaurus">docusaurus</a></div></footer></article><article class="margin-bottom--xl"><header><h2 class="margin-bottom--sm blogPostTitle_1mse"><a href="/wave/blog/hello-world">Hello</a></h2><div class="margin-vert--md"><time datetime="2019-05-29T00:00:00.000Z" class="blogPostDate_3bQP">May 29, 2019  · 1 min read</time></div><div class="avatar margin-vert--md"><a class="avatar__photo-link avatar__photo" href="https://github.com/endiliey" target="_blank" rel="noreferrer noopener"><img src="https://avatars1.githubusercontent.com/u/17883920?s=460&amp;v=4" alt="Endilie Yacop Sucipto"></a><div class="avatar__intro"><h4 class="avatar__name"><a href="https://github.com/endiliey" target="_blank" rel="noreferrer noopener">Endilie Yacop Sucipto</a></h4><small class="avatar__subtitle">Maintainer of Docusaurus</small></div></div></header><section class="markdown"><p>Welcome to this blog. This blog is created with <a href="https://v2.docusaurus.io/" target="_blank" rel="noopener noreferrer"><strong>Docusaurus 2 alpha</strong></a>.</p></section><footer class="row margin-vert--lg"><div class="col"><strong>Tags:</strong><a class="margin-horiz--sm" href="/wave/blog/tags/hello">hello</a><a class="margin-horiz--sm" href="/wave/blog/tags/docusaurus">docusaurus</a></div><div class="col text--right"><a aria-label="Read more about Hello" href="/wave/blog/hello-world"><strong>Read More</strong></a></div></footer></article><article class="margin-bottom--xl"><header><h2 class="margin-bottom--sm blogPostTitle_1mse"><a href="/wave/blog/hola">Hola</a></h2><div class="margin-vert--md"><time datetime="2019-05-28T00:00:00.000Z" class="blogPostDate_3bQP">May 28, 2019  · 1 min read</time></div><div class="avatar margin-vert--md"><a class="avatar__photo-link avatar__photo" href="https://github.com/wgao19" target="_blank" rel="noreferrer noopener"><img src="https://avatars1.githubusercontent.com/u/2055384?v=4" alt="Gao Wei"></a><div class="avatar__intro"><h4 class="avatar__name"><a href="https://github.com/wgao19" target="_blank" rel="noreferrer noopener">Gao Wei</a></h4><small class="avatar__subtitle">Docusaurus Core Team</small></div></div></header><section class="markdown"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet</p></section><footer class="row margin-vert--lg"><div class="col"><strong>Tags:</strong><a class="margin-horiz--sm" href="/wave/blog/tags/hola">hola</a><a class="margin-horiz--sm" href="/wave/blog/tags/docusaurus">docusaurus</a></div></footer></article><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></main></div></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/3.2819f6b8.js"></script>
-<script src="/wave/a6aa9e1f.0e25f4a4.js"></script>
-<script src="/wave/af172acd.e4c7f550.js"></script>
-<script src="/wave/3570154c.6fb4d9ba.js"></script>
-<script src="/wave/8e9f0a8a.ea616d71.js"></script>
-<script src="/wave/0eb58673.1082abbb.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><main class="col col--8 col--offset-2"><article class="margin-bottom--xl"><header><h2 class="margin-bottom--sm blogPostTitle_1mse"><a href="/wave/blog/release-0.9.0">Introducing Live Reload</a></h2><div class="margin-vert--md"><time datetime="2020-10-28T00:00:00.000Z" class="blogPostDate_3bQP">October 28, 2020  · 4 min read</time></div><div class="avatar margin-vert--md"><a class="avatar__photo-link avatar__photo" href="https://github.com/lo5" target="_blank" rel="noreferrer noopener"><img src="https://avatars3.githubusercontent.com/u/6334572" alt="Prithvi Prabhu"></a><div class="avatar__intro"><h4 class="avatar__name"><a href="https://github.com/lo5" target="_blank" rel="noreferrer noopener">Prithvi Prabhu</a></h4><small class="avatar__subtitle">Chief of Technology @ H2O.ai</small></div></div></header><section class="markdown"><p>Today, we&#x27;re excited to announce H2O Wave v0.9.0, with a new <code>wave</code> CLI, live-reload, improved performance, background tasks and ASGI compatibility. </p></section><footer class="row margin-vert--lg"><div class="col"><strong>Tags:</strong><a class="margin-horiz--sm" href="/wave/blog/tags/release">release</a></div><div class="col text--right"><a aria-label="Read more about Introducing Live Reload" href="/wave/blog/release-0.9.0"><strong>Read More</strong></a></div></footer></article><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></main></div></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/3.c0e07a77.js"></script>
+<script src="/wave/a6aa9e1f.29345e50.js"></script>
+<script src="/wave/e7ad456d.8574afa5.js"></script>
+<script src="/wave/0eb58673.d66df410.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/blog/release-0.9.0/index.html b/docs/blog/release-0.9.0/index.html
new file mode 100644
index 0000000000..38426289c7
--- /dev/null
+++ b/docs/blog/release-0.9.0/index.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="generator" content="Docusaurus v2.0.0-alpha.65">
+<title data-react-helmet="true">Introducing Live Reload | H2O Wave</title><meta data-react-helmet="true" property="og:title" content="Introducing Live Reload | H2O Wave"><meta data-react-helmet="true" name="description" content="Today, we&#x27;re excited to announce H2O Wave v0.9.0, with a new wave CLI, live-reload, improved performance, background tasks and ASGI compatibility."><meta data-react-helmet="true" property="og:description" content="Today, we&#x27;re excited to announce H2O Wave v0.9.0, with a new wave CLI, live-reload, improved performance, background tasks and ASGI compatibility."><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/3.c0e07a77.js" as="script">
+<link rel="preload" href="/wave/ccc49370.847efd16.js" as="script">
+<link rel="preload" href="/wave/08f25880.4ddb9f20.js" as="script">
+</head>
+<body>
+<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--8 col--offset-2"><article><header><h1 class="margin-bottom--sm blogPostTitle_1mse">Introducing Live Reload</h1><div class="margin-vert--md"><time datetime="2020-10-28T00:00:00.000Z" class="blogPostDate_3bQP">October 28, 2020  · 4 min read</time></div><div class="avatar margin-vert--md"><a class="avatar__photo-link avatar__photo" href="https://github.com/lo5" target="_blank" rel="noreferrer noopener"><img src="https://avatars3.githubusercontent.com/u/6334572" alt="Prithvi Prabhu"></a><div class="avatar__intro"><h4 class="avatar__name"><a href="https://github.com/lo5" target="_blank" rel="noreferrer noopener">Prithvi Prabhu</a></h4><small class="avatar__subtitle">Chief of Technology @ H2O.ai</small></div></div></header><section class="markdown"><p>Today, we&#x27;re excited to announce H2O Wave v0.9.0, with a new <code>wave</code> CLI, live-reload, improved performance, background tasks and ASGI compatibility. </p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/livereload-c8ab0ea721f98fca13da5bc0b1ab26e1.mp4" type="video/mp4"></video><br><br><p>Among other changes, the Wave server executable <code>wave</code> is now called <code>waved</code> (as in <code>wave</code> daemon), and the <a href="https://pypi.org/project/h2o-wave/" target="_blank" rel="noopener noreferrer">h2o-wave</a> Python package ships with a new CLI named <code>wave</code>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="no-more-listening"></a>No more listening<a aria-hidden="true" tabindex="-1" class="hash-link" href="#no-more-listening" title="Direct link to heading">#</a></h2><p><code>listen()</code> has been deprecated in favor of <code>@app</code>. Wave apps are now one line shorter.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="old-way"></a>Old way<a aria-hidden="true" tabindex="-1" class="hash-link" href="#old-way" title="Direct link to heading">#</a></h3><p>In versions &lt;= v0.8.0, a skeleton app looked like this:</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">foo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-python codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">pass</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>The above app could be run like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">venv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> $ python foo.py</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="new-way"></a>New way<a aria-hidden="true" tabindex="-1" class="hash-link" href="#new-way" title="Direct link to heading">#</a></h3><p>In versions v0.9.0+, a skeleton app looks like this:</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">foo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-python codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">pass</span></div></div></div></div></div><p>Notably:</p><ol><li><code>listen(route)</code> has been replaced by an <code>@app(route)</code> decorator on the <code>serve()</code> function.</li><li><code>main</code> needs to be imported into the file (but you don&#x27;t have to do anything with the symbol <code>main</code> other than simply <code>import</code> it).</li></ol><p>The above app can be run using <code>wave run</code>, built into the new <code>wave</code> command line interface. </p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">venv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> $ wave run foo</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="live-reload"></a>Live reload<a aria-hidden="true" tabindex="-1" class="hash-link" href="#live-reload" title="Direct link to heading">#</a></h2><p>The <code>wave run</code> command runs your app using live-reload, which means you can view your changes live as you code, without having to refresh your browser manually.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">venv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> $ wave run foo</span></div></div></div></div></div><p>To run your app without live-reload, simply pass <code>--no-reload</code>:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">venv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> $ wave run --no-reload foo</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="improved-performance"></a>Improved performance<a aria-hidden="true" tabindex="-1" class="hash-link" href="#improved-performance" title="Direct link to heading">#</a></h2><p>Both the Wave server and application communication architecture has undergone significant performance and concurrency improvements across the board. Apps should now feel lighter, quicker, and more responsive under concurrent or increased load.</p><p>The changes in v0.9 brings us closer to a v1.0 release. v1.0 will include the ability to increase the number of worker processes to scale apps, while preserving the simplicity of the Wave API.</p><p>The Wave Tour (<code>tour.py</code>) is now quicker and more reliable:</p><p><img alt="tour" src="/wave/assets/images/tour-968f92ad1236ec66ad30ed613ba324db.png"></p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="background-tasks"></a>Background tasks<a aria-hidden="true" tabindex="-1" class="hash-link" href="#background-tasks" title="Direct link to heading">#</a></h2><p>The API now provides the ability to run blocking calls in the background to improve app responsiveness. The query context <code>q</code> now has  two lightweight wrappers over <a href="https://docs.python.org/3/library/asyncio-eventloop.html#asyncio.loop.run_in_executor" target="_blank" rel="noopener noreferrer">asyncio.run_in_executor()</a>: <code>q.run()</code> and <code>q.exec()</code></p><p>Here is an example of a function that blocks:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-python codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">blocking_function</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">seconds</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">seconds</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Blocks!</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;Done!&#x27;</span></div></div></div></div></div><p>To call the above function from an app, don&#x27;t do this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-python codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token decorator annotation punctuation" style="color:rgb(199, 146, 234)">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># ...</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    message </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> blocking_function</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">42</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># ...</span></div></div></div></div></div><p>Instead, do this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-python codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token decorator annotation punctuation" style="color:rgb(199, 146, 234)">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># ...</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    message </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">run</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">blocking_function</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">42</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># ...</span></div></div></div></div></div><p><code>q.run()</code> runs the blocking function in the background, in-process.</p><p>Depending on your use case, you might want to use a separate process pool or thread pool from Python&#x27;s <a href="https://docs.python.org/3/library/multiprocessing.html" target="_blank" rel="noopener noreferrer">multiprocessing</a> library, like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-python codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> concurrent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">futures</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># ...</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">with</span><span class="token plain"> concurrent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">futures</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">ThreadPoolExecutor</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> pool</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        message </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token keyword" style="font-style:italic">exec</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">pool</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> blocking_function</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">42</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># ...</span></div></div></div></div></div><p><code>q.exec()</code> accepts a custom process pool or thread pool to run the blocking function.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="asgi-compatibility"></a>ASGI compatibility<a aria-hidden="true" tabindex="-1" class="hash-link" href="#asgi-compatibility" title="Direct link to heading">#</a></h2><p>Wave apps are now <a href="https://asgi.readthedocs.io/en/latest/" target="_blank" rel="noopener noreferrer">ASGI</a>-compatible, based on <a href="https://www.uvicorn.org" target="_blank" rel="noopener noreferrer">Uvicorn</a> / <a href="https://www.starlette.io/" target="_blank" rel="noopener noreferrer">Starlette</a>, a <a href="https://www.techempower.com/benchmarks/#section=data-r17&amp;hw=ph&amp;test=fortune&amp;l=zijzen-1" target="_blank" rel="noopener noreferrer">high-performance</a> Python server.</p><p>You can run Wave apps behind any ASGI server, like <a href="https://www.uvicorn.org" target="_blank" rel="noopener noreferrer">uvicorn</a>, <a href="https://gunicorn.org/" target="_blank" rel="noopener noreferrer">gunicorn</a>, <a href="https://github.com/django/daphne/" target="_blank" rel="noopener noreferrer">daphne</a>, <a href="https://pgjones.gitlab.io/hypercorn/" target="_blank" rel="noopener noreferrer">hypercorn</a>, etc.</p><p>To run your app using an ASGI server like uvicorn, append <code>:main</code> to the <code>app</code> argument:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">venv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> $ uvicorn foo:main</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="download"></a>Download<a aria-hidden="true" tabindex="-1" class="hash-link" href="#download" title="Direct link to heading">#</a></h2><p>Get the release <a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer">here</a>. Check out the release notes for more details.</p><p>We look forward to continuing our collaboration with the community and hearing your feedback as we further improve and expand the H2O Wave platform.</p><p>We’d like to thank the entire Wave team and the community for all of the contributions to this work!</p></section><footer class="row margin-vert--lg"><div class="col"><strong>Tags:</strong><a class="margin-horiz--sm" href="/wave/blog/tags/release">release</a></div></footer></article><div><a href="https://github.com/facebook/docusaurus/edit/master/website/blog/blog/2020-10-28-release.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div><div class="col col--2"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#no-more-listening" class="table-of-contents__link">No more listening</a><ul><li><a href="#old-way" class="table-of-contents__link">Old way</a></li><li><a href="#new-way" class="table-of-contents__link">New way</a></li></ul></li><li><a href="#live-reload" class="table-of-contents__link">Live reload</a></li><li><a href="#improved-performance" class="table-of-contents__link">Improved performance</a></li><li><a href="#background-tasks" class="table-of-contents__link">Background tasks</a></li><li><a href="#asgi-compatibility" class="table-of-contents__link">ASGI compatibility</a></li><li><a href="#download" class="table-of-contents__link">Download</a></li></ul></div></div></div></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/3.c0e07a77.js"></script>
+<script src="/wave/ccc49370.847efd16.js"></script>
+<script src="/wave/08f25880.4ddb9f20.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/blog/tags/docusaurus/index.html b/docs/blog/tags/docusaurus/index.html
deleted file mode 100644
index 5be44c98c7..0000000000
--- a/docs/blog/tags/docusaurus/index.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<meta name="generator" content="Docusaurus v2.0.0-alpha.65">
-<title data-react-helmet="true">Posts tagged &quot;docusaurus&quot; | H2O Wave</title><meta data-react-helmet="true" property="og:title" content="Posts tagged &quot;docusaurus&quot; | H2O Wave"><meta data-react-helmet="true" name="description" content="Blog | Tagged &quot;docusaurus&quot;"><meta data-react-helmet="true" property="og:description" content="Blog | Tagged &quot;docusaurus&quot;"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/3.2819f6b8.js" as="script">
-<link rel="preload" href="/wave/6875c492.eeb898c4.js" as="script">
-<link rel="preload" href="/wave/af172acd.e4c7f550.js" as="script">
-<link rel="preload" href="/wave/3570154c.6fb4d9ba.js" as="script">
-<link rel="preload" href="/wave/8e9f0a8a.ea616d71.js" as="script">
-<link rel="preload" href="/wave/60759c05.8120de71.js" as="script">
-</head>
-<body>
-<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><main class="col col--8 col--offset-2"><h1>3 posts tagged with &quot;docusaurus&quot;</h1><a href="/wave/blog/tags">View All Tags</a><div class="margin-vert--xl"><article class="margin-bottom--xl"><header><h2 class="margin-bottom--sm blogPostTitle_1mse"><a href="/wave/blog/welcome">Welcome</a></h2><div class="margin-vert--md"><time datetime="2019-05-30T00:00:00.000Z" class="blogPostDate_3bQP">May 30, 2019  · 1 min read</time></div><div class="avatar margin-vert--md"><a class="avatar__photo-link avatar__photo" href="https://github.com/yangshun" target="_blank" rel="noreferrer noopener"><img src="https://avatars0.githubusercontent.com/u/1315101?s=400&amp;v=4" alt="Yangshun Tay"></a><div class="avatar__intro"><h4 class="avatar__name"><a href="https://github.com/yangshun" target="_blank" rel="noreferrer noopener">Yangshun Tay</a></h4><small class="avatar__subtitle">Front End Engineer @ Facebook</small></div></div></header><section class="markdown"><p>Blog features are powered by the blog plugin. Simply add files to the <code>blog</code> directory. It supports tags as well!</p><p>Delete the whole directory if you don&#x27;t want the blog features. As simple as that!</p></section><footer class="row margin-vert--lg"><div class="col"><strong>Tags:</strong><a class="margin-horiz--sm" href="/wave/blog/tags/facebook">facebook</a><a class="margin-horiz--sm" href="/wave/blog/tags/hello">hello</a><a class="margin-horiz--sm" href="/wave/blog/tags/docusaurus">docusaurus</a></div><div class="col text--right"><a aria-label="Read more about Welcome" href="/wave/blog/welcome"><strong>Read More</strong></a></div></footer></article><article class="margin-bottom--xl"><header><h2 class="margin-bottom--sm blogPostTitle_1mse"><a href="/wave/blog/hello-world">Hello</a></h2><div class="margin-vert--md"><time datetime="2019-05-29T00:00:00.000Z" class="blogPostDate_3bQP">May 29, 2019  · 1 min read</time></div><div class="avatar margin-vert--md"><a class="avatar__photo-link avatar__photo" href="https://github.com/endiliey" target="_blank" rel="noreferrer noopener"><img src="https://avatars1.githubusercontent.com/u/17883920?s=460&amp;v=4" alt="Endilie Yacop Sucipto"></a><div class="avatar__intro"><h4 class="avatar__name"><a href="https://github.com/endiliey" target="_blank" rel="noreferrer noopener">Endilie Yacop Sucipto</a></h4><small class="avatar__subtitle">Maintainer of Docusaurus</small></div></div></header><section class="markdown"><p>Welcome to this blog. This blog is created with <a href="https://v2.docusaurus.io/" target="_blank" rel="noopener noreferrer"><strong>Docusaurus 2 alpha</strong></a>.</p></section><footer class="row margin-vert--lg"><div class="col"><strong>Tags:</strong><a class="margin-horiz--sm" href="/wave/blog/tags/hello">hello</a><a class="margin-horiz--sm" href="/wave/blog/tags/docusaurus">docusaurus</a></div><div class="col text--right"><a aria-label="Read more about Hello" href="/wave/blog/hello-world"><strong>Read More</strong></a></div></footer></article><article class="margin-bottom--xl"><header><h2 class="margin-bottom--sm blogPostTitle_1mse"><a href="/wave/blog/hola">Hola</a></h2><div class="margin-vert--md"><time datetime="2019-05-28T00:00:00.000Z" class="blogPostDate_3bQP">May 28, 2019  · 1 min read</time></div><div class="avatar margin-vert--md"><a class="avatar__photo-link avatar__photo" href="https://github.com/wgao19" target="_blank" rel="noreferrer noopener"><img src="https://avatars1.githubusercontent.com/u/2055384?v=4" alt="Gao Wei"></a><div class="avatar__intro"><h4 class="avatar__name"><a href="https://github.com/wgao19" target="_blank" rel="noreferrer noopener">Gao Wei</a></h4><small class="avatar__subtitle">Docusaurus Core Team</small></div></div></header><section class="markdown"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet</p></section><footer class="row margin-vert--lg"><div class="col"><strong>Tags:</strong><a class="margin-horiz--sm" href="/wave/blog/tags/hola">hola</a><a class="margin-horiz--sm" href="/wave/blog/tags/docusaurus">docusaurus</a></div><div class="col text--right"><a aria-label="Read more about Hola" href="/wave/blog/hola"><strong>Read More</strong></a></div></footer></article></div></main></div></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/3.2819f6b8.js"></script>
-<script src="/wave/6875c492.eeb898c4.js"></script>
-<script src="/wave/af172acd.e4c7f550.js"></script>
-<script src="/wave/3570154c.6fb4d9ba.js"></script>
-<script src="/wave/8e9f0a8a.ea616d71.js"></script>
-<script src="/wave/60759c05.8120de71.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/docs/blog/tags/facebook/index.html b/docs/blog/tags/facebook/index.html
deleted file mode 100644
index f74d591bc3..0000000000
--- a/docs/blog/tags/facebook/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<meta name="generator" content="Docusaurus v2.0.0-alpha.65">
-<title data-react-helmet="true">Posts tagged &quot;facebook&quot; | H2O Wave</title><meta data-react-helmet="true" property="og:title" content="Posts tagged &quot;facebook&quot; | H2O Wave"><meta data-react-helmet="true" name="description" content="Blog | Tagged &quot;facebook&quot;"><meta data-react-helmet="true" property="og:description" content="Blog | Tagged &quot;facebook&quot;"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/3.2819f6b8.js" as="script">
-<link rel="preload" href="/wave/6875c492.eeb898c4.js" as="script">
-<link rel="preload" href="/wave/af172acd.e4c7f550.js" as="script">
-<link rel="preload" href="/wave/4657d646.d9cdfd44.js" as="script">
-</head>
-<body>
-<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><main class="col col--8 col--offset-2"><h1>1 post tagged with &quot;facebook&quot;</h1><a href="/wave/blog/tags">View All Tags</a><div class="margin-vert--xl"><article class="margin-bottom--xl"><header><h2 class="margin-bottom--sm blogPostTitle_1mse"><a href="/wave/blog/welcome">Welcome</a></h2><div class="margin-vert--md"><time datetime="2019-05-30T00:00:00.000Z" class="blogPostDate_3bQP">May 30, 2019  · 1 min read</time></div><div class="avatar margin-vert--md"><a class="avatar__photo-link avatar__photo" href="https://github.com/yangshun" target="_blank" rel="noreferrer noopener"><img src="https://avatars0.githubusercontent.com/u/1315101?s=400&amp;v=4" alt="Yangshun Tay"></a><div class="avatar__intro"><h4 class="avatar__name"><a href="https://github.com/yangshun" target="_blank" rel="noreferrer noopener">Yangshun Tay</a></h4><small class="avatar__subtitle">Front End Engineer @ Facebook</small></div></div></header><section class="markdown"><p>Blog features are powered by the blog plugin. Simply add files to the <code>blog</code> directory. It supports tags as well!</p><p>Delete the whole directory if you don&#x27;t want the blog features. As simple as that!</p></section><footer class="row margin-vert--lg"><div class="col"><strong>Tags:</strong><a class="margin-horiz--sm" href="/wave/blog/tags/facebook">facebook</a><a class="margin-horiz--sm" href="/wave/blog/tags/hello">hello</a><a class="margin-horiz--sm" href="/wave/blog/tags/docusaurus">docusaurus</a></div><div class="col text--right"><a aria-label="Read more about Welcome" href="/wave/blog/welcome"><strong>Read More</strong></a></div></footer></article></div></main></div></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/3.2819f6b8.js"></script>
-<script src="/wave/6875c492.eeb898c4.js"></script>
-<script src="/wave/af172acd.e4c7f550.js"></script>
-<script src="/wave/4657d646.d9cdfd44.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/docs/blog/tags/hello/index.html b/docs/blog/tags/hello/index.html
deleted file mode 100644
index 58573753ad..0000000000
--- a/docs/blog/tags/hello/index.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<meta name="generator" content="Docusaurus v2.0.0-alpha.65">
-<title data-react-helmet="true">Posts tagged &quot;hello&quot; | H2O Wave</title><meta data-react-helmet="true" property="og:title" content="Posts tagged &quot;hello&quot; | H2O Wave"><meta data-react-helmet="true" name="description" content="Blog | Tagged &quot;hello&quot;"><meta data-react-helmet="true" property="og:description" content="Blog | Tagged &quot;hello&quot;"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/3.2819f6b8.js" as="script">
-<link rel="preload" href="/wave/6875c492.eeb898c4.js" as="script">
-<link rel="preload" href="/wave/af172acd.e4c7f550.js" as="script">
-<link rel="preload" href="/wave/3570154c.6fb4d9ba.js" as="script">
-<link rel="preload" href="/wave/4fc0cd6f.5db0a09b.js" as="script">
-</head>
-<body>
-<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><main class="col col--8 col--offset-2"><h1>2 posts tagged with &quot;hello&quot;</h1><a href="/wave/blog/tags">View All Tags</a><div class="margin-vert--xl"><article class="margin-bottom--xl"><header><h2 class="margin-bottom--sm blogPostTitle_1mse"><a href="/wave/blog/welcome">Welcome</a></h2><div class="margin-vert--md"><time datetime="2019-05-30T00:00:00.000Z" class="blogPostDate_3bQP">May 30, 2019  · 1 min read</time></div><div class="avatar margin-vert--md"><a class="avatar__photo-link avatar__photo" href="https://github.com/yangshun" target="_blank" rel="noreferrer noopener"><img src="https://avatars0.githubusercontent.com/u/1315101?s=400&amp;v=4" alt="Yangshun Tay"></a><div class="avatar__intro"><h4 class="avatar__name"><a href="https://github.com/yangshun" target="_blank" rel="noreferrer noopener">Yangshun Tay</a></h4><small class="avatar__subtitle">Front End Engineer @ Facebook</small></div></div></header><section class="markdown"><p>Blog features are powered by the blog plugin. Simply add files to the <code>blog</code> directory. It supports tags as well!</p><p>Delete the whole directory if you don&#x27;t want the blog features. As simple as that!</p></section><footer class="row margin-vert--lg"><div class="col"><strong>Tags:</strong><a class="margin-horiz--sm" href="/wave/blog/tags/facebook">facebook</a><a class="margin-horiz--sm" href="/wave/blog/tags/hello">hello</a><a class="margin-horiz--sm" href="/wave/blog/tags/docusaurus">docusaurus</a></div><div class="col text--right"><a aria-label="Read more about Welcome" href="/wave/blog/welcome"><strong>Read More</strong></a></div></footer></article><article class="margin-bottom--xl"><header><h2 class="margin-bottom--sm blogPostTitle_1mse"><a href="/wave/blog/hello-world">Hello</a></h2><div class="margin-vert--md"><time datetime="2019-05-29T00:00:00.000Z" class="blogPostDate_3bQP">May 29, 2019  · 1 min read</time></div><div class="avatar margin-vert--md"><a class="avatar__photo-link avatar__photo" href="https://github.com/endiliey" target="_blank" rel="noreferrer noopener"><img src="https://avatars1.githubusercontent.com/u/17883920?s=460&amp;v=4" alt="Endilie Yacop Sucipto"></a><div class="avatar__intro"><h4 class="avatar__name"><a href="https://github.com/endiliey" target="_blank" rel="noreferrer noopener">Endilie Yacop Sucipto</a></h4><small class="avatar__subtitle">Maintainer of Docusaurus</small></div></div></header><section class="markdown"><p>Welcome to this blog. This blog is created with <a href="https://v2.docusaurus.io/" target="_blank" rel="noopener noreferrer"><strong>Docusaurus 2 alpha</strong></a>.</p></section><footer class="row margin-vert--lg"><div class="col"><strong>Tags:</strong><a class="margin-horiz--sm" href="/wave/blog/tags/hello">hello</a><a class="margin-horiz--sm" href="/wave/blog/tags/docusaurus">docusaurus</a></div><div class="col text--right"><a aria-label="Read more about Hello" href="/wave/blog/hello-world"><strong>Read More</strong></a></div></footer></article></div></main></div></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/3.2819f6b8.js"></script>
-<script src="/wave/6875c492.eeb898c4.js"></script>
-<script src="/wave/af172acd.e4c7f550.js"></script>
-<script src="/wave/3570154c.6fb4d9ba.js"></script>
-<script src="/wave/4fc0cd6f.5db0a09b.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/docs/blog/tags/hola/index.html b/docs/blog/tags/hola/index.html
deleted file mode 100644
index eafed0d29d..0000000000
--- a/docs/blog/tags/hola/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<meta name="generator" content="Docusaurus v2.0.0-alpha.65">
-<title data-react-helmet="true">Posts tagged &quot;hola&quot; | H2O Wave</title><meta data-react-helmet="true" property="og:title" content="Posts tagged &quot;hola&quot; | H2O Wave"><meta data-react-helmet="true" name="description" content="Blog | Tagged &quot;hola&quot;"><meta data-react-helmet="true" property="og:description" content="Blog | Tagged &quot;hola&quot;"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/3.2819f6b8.js" as="script">
-<link rel="preload" href="/wave/6875c492.eeb898c4.js" as="script">
-<link rel="preload" href="/wave/8e9f0a8a.ea616d71.js" as="script">
-<link rel="preload" href="/wave/93896215.5af00467.js" as="script">
-</head>
-<body>
-<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><main class="col col--8 col--offset-2"><h1>1 post tagged with &quot;hola&quot;</h1><a href="/wave/blog/tags">View All Tags</a><div class="margin-vert--xl"><article class="margin-bottom--xl"><header><h2 class="margin-bottom--sm blogPostTitle_1mse"><a href="/wave/blog/hola">Hola</a></h2><div class="margin-vert--md"><time datetime="2019-05-28T00:00:00.000Z" class="blogPostDate_3bQP">May 28, 2019  · 1 min read</time></div><div class="avatar margin-vert--md"><a class="avatar__photo-link avatar__photo" href="https://github.com/wgao19" target="_blank" rel="noreferrer noopener"><img src="https://avatars1.githubusercontent.com/u/2055384?v=4" alt="Gao Wei"></a><div class="avatar__intro"><h4 class="avatar__name"><a href="https://github.com/wgao19" target="_blank" rel="noreferrer noopener">Gao Wei</a></h4><small class="avatar__subtitle">Docusaurus Core Team</small></div></div></header><section class="markdown"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet</p></section><footer class="row margin-vert--lg"><div class="col"><strong>Tags:</strong><a class="margin-horiz--sm" href="/wave/blog/tags/hola">hola</a><a class="margin-horiz--sm" href="/wave/blog/tags/docusaurus">docusaurus</a></div><div class="col text--right"><a aria-label="Read more about Hola" href="/wave/blog/hola"><strong>Read More</strong></a></div></footer></article></div></main></div></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/3.2819f6b8.js"></script>
-<script src="/wave/6875c492.eeb898c4.js"></script>
-<script src="/wave/8e9f0a8a.ea616d71.js"></script>
-<script src="/wave/93896215.5af00467.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/docs/blog/tags/index.html b/docs/blog/tags/index.html
index 496ceca57c..e5caccdbd8 100644
--- a/docs/blog/tags/index.html
+++ b/docs/blog/tags/index.html
@@ -5,23 +5,23 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Tags | H2O Wave</title><meta data-react-helmet="true" property="og:title" content="Tags | H2O Wave"><meta data-react-helmet="true" name="description" content="Blog Tags"><meta data-react-helmet="true" property="og:description" content="Blog Tags"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/01a85c17.5007ae08.js" as="script">
-<link rel="preload" href="/wave/121dd878.095d5908.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/01a85c17.0bb633f0.js" as="script">
+<link rel="preload" href="/wave/121dd878.8a593ca4.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><main class="col col--8 col--offset-2"><h1>Tags</h1><div class="margin-vert--lg"><div><h3>D</h3><a class="padding-right--md" href="/wave/blog/tags/docusaurus">docusaurus (3)</a><hr></div><div><h3>F</h3><a class="padding-right--md" href="/wave/blog/tags/facebook">facebook (1)</a><hr></div><div><h3>H</h3><a class="padding-right--md" href="/wave/blog/tags/hello">hello (2)</a><a class="padding-right--md" href="/wave/blog/tags/hola">hola (1)</a><hr></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/01a85c17.5007ae08.js"></script>
-<script src="/wave/121dd878.095d5908.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><main class="col col--8 col--offset-2"><h1>Tags</h1><div class="margin-vert--lg"><div><h3>R</h3><a class="padding-right--md" href="/wave/blog/tags/release">release (1)</a><hr></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/01a85c17.0bb633f0.js"></script>
+<script src="/wave/121dd878.8a593ca4.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/blog/tags/release/index.html b/docs/blog/tags/release/index.html
new file mode 100644
index 0000000000..f6a294291f
--- /dev/null
+++ b/docs/blog/tags/release/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="generator" content="Docusaurus v2.0.0-alpha.65">
+<title data-react-helmet="true">Posts tagged &quot;release&quot; | H2O Wave</title><meta data-react-helmet="true" property="og:title" content="Posts tagged &quot;release&quot; | H2O Wave"><meta data-react-helmet="true" name="description" content="Blog | Tagged &quot;release&quot;"><meta data-react-helmet="true" property="og:description" content="Blog | Tagged &quot;release&quot;"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/3.c0e07a77.js" as="script">
+<link rel="preload" href="/wave/6875c492.0137459c.js" as="script">
+<link rel="preload" href="/wave/e7ad456d.8574afa5.js" as="script">
+<link rel="preload" href="/wave/2dd92585.1591767e.js" as="script">
+</head>
+<body>
+<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><main class="col col--8 col--offset-2"><h1>1 post tagged with &quot;release&quot;</h1><a href="/wave/blog/tags">View All Tags</a><div class="margin-vert--xl"><article class="margin-bottom--xl"><header><h2 class="margin-bottom--sm blogPostTitle_1mse"><a href="/wave/blog/release-0.9.0">Introducing Live Reload</a></h2><div class="margin-vert--md"><time datetime="2020-10-28T00:00:00.000Z" class="blogPostDate_3bQP">October 28, 2020  · 4 min read</time></div><div class="avatar margin-vert--md"><a class="avatar__photo-link avatar__photo" href="https://github.com/lo5" target="_blank" rel="noreferrer noopener"><img src="https://avatars3.githubusercontent.com/u/6334572" alt="Prithvi Prabhu"></a><div class="avatar__intro"><h4 class="avatar__name"><a href="https://github.com/lo5" target="_blank" rel="noreferrer noopener">Prithvi Prabhu</a></h4><small class="avatar__subtitle">Chief of Technology @ H2O.ai</small></div></div></header><section class="markdown"><p>Today, we&#x27;re excited to announce H2O Wave v0.9.0, with a new <code>wave</code> CLI, live-reload, improved performance, background tasks and ASGI compatibility. </p></section><footer class="row margin-vert--lg"><div class="col"><strong>Tags:</strong><a class="margin-horiz--sm" href="/wave/blog/tags/release">release</a></div><div class="col text--right"><a aria-label="Read more about Introducing Live Reload" href="/wave/blog/release-0.9.0"><strong>Read More</strong></a></div></footer></article></div></main></div></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/3.c0e07a77.js"></script>
+<script src="/wave/6875c492.0137459c.js"></script>
+<script src="/wave/e7ad456d.8574afa5.js"></script>
+<script src="/wave/2dd92585.1591767e.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/blog/welcome/index.html b/docs/blog/welcome/index.html
deleted file mode 100644
index 0bde3d55ff..0000000000
--- a/docs/blog/welcome/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<meta name="generator" content="Docusaurus v2.0.0-alpha.65">
-<title data-react-helmet="true">Welcome | H2O Wave</title><meta data-react-helmet="true" property="og:title" content="Welcome | H2O Wave"><meta data-react-helmet="true" name="description" content="Blog features are powered by the blog plugin. Simply add files to the blog directory. It supports tags as well!"><meta data-react-helmet="true" property="og:description" content="Blog features are powered by the blog plugin. Simply add files to the blog directory. It supports tags as well!"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/3.2819f6b8.js" as="script">
-<link rel="preload" href="/wave/ccc49370.5545763d.js" as="script">
-<link rel="preload" href="/wave/2868cdab.e22eb885.js" as="script">
-</head>
-<body>
-<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--8 col--offset-2"><article><header><h1 class="margin-bottom--sm blogPostTitle_1mse">Welcome</h1><div class="margin-vert--md"><time datetime="2019-05-30T00:00:00.000Z" class="blogPostDate_3bQP">May 30, 2019  · 1 min read</time></div><div class="avatar margin-vert--md"><a class="avatar__photo-link avatar__photo" href="https://github.com/yangshun" target="_blank" rel="noreferrer noopener"><img src="https://avatars0.githubusercontent.com/u/1315101?s=400&amp;v=4" alt="Yangshun Tay"></a><div class="avatar__intro"><h4 class="avatar__name"><a href="https://github.com/yangshun" target="_blank" rel="noreferrer noopener">Yangshun Tay</a></h4><small class="avatar__subtitle">Front End Engineer @ Facebook</small></div></div></header><section class="markdown"><p>Blog features are powered by the blog plugin. Simply add files to the <code>blog</code> directory. It supports tags as well!</p><p>Delete the whole directory if you don&#x27;t want the blog features. As simple as that!</p></section><footer class="row margin-vert--lg"><div class="col"><strong>Tags:</strong><a class="margin-horiz--sm" href="/wave/blog/tags/facebook">facebook</a><a class="margin-horiz--sm" href="/wave/blog/tags/hello">hello</a><a class="margin-horiz--sm" href="/wave/blog/tags/docusaurus">docusaurus</a></div></footer></article><div><a href="https://github.com/facebook/docusaurus/edit/master/website/blog/blog/2019-05-30-welcome.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div><div class="margin-vert--xl"><nav class="pagination-nav" aria-label="Blog post page navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/blog/hello-world"><div class="pagination-nav__sublabel">Older Post</div><div class="pagination-nav__label">Hello »</div></a></div></nav></div></div><div class="col col--2"><div class="tableOfContents_3SO_"></div></div></div></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/3.2819f6b8.js"></script>
-<script src="/wave/ccc49370.5545763d.js"></script>
-<script src="/wave/2868cdab.e22eb885.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/docs/c07c3c71.c8e15b94.js b/docs/c07c3c71.61abccad.js
similarity index 96%
rename from docs/c07c3c71.c8e15b94.js
rename to docs/c07c3c71.61abccad.js
index 4d4b7c6530..0fe5f43a49 100644
--- a/docs/c07c3c71.c8e15b94.js
+++ b/docs/c07c3c71.61abccad.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(290)),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(440).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},290: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<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?o(Object(n),!0).forEach((function(r){u(e,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))}))}return e}function c(e,r){if(null==e)return{};var n,t,a=function(e,r){if(null==e)return{};var n,t,a={},u=Object.keys(e);for(t=0;t<u.length;t++)n=u[t],r.indexOf(n)>=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(t=0;t<u.length;t++)n=u[t],r.indexOf(n)>=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<u;s++)o[s]=n[s];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,n)}b.displayName="MDXCreateElement"},440:function(e,r,n){"use strict";n.r(r),r.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[176],{229: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(292)),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(445).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},292: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<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?o(Object(n),!0).forEach((function(r){u(e,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))}))}return e}function c(e,r){if(null==e)return{};var n,t,a=function(e,r){if(null==e)return{};var n,t,a={},u=Object.keys(e);for(t=0;t<u.length;t++)n=u[t],r.indexOf(n)>=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(t=0;t<u.length;t++)n=u[t],r.indexOf(n)>=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<u;s++)o[s]=n[s];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,n)}b.displayName="MDXCreateElement"},445:function(e,r,n){"use strict";n.r(r),r.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/c0ac41fc.8be5a1e6.js b/docs/c0ac41fc.43ca1f95.js
similarity index 92%
rename from docs/c0ac41fc.8be5a1e6.js
rename to docs/c0ac41fc.43ca1f95.js
index 6e2353f522..2cc3fe3a4b 100644
--- a/docs/c0ac41fc.8be5a1e6.js
+++ b/docs/c0ac41fc.43ca1f95.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[176],{229: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 c})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(290)),i={title:"Plot / Axis Titles"},l={unversionedId:"examples/plot-axis-title",id:"examples/plot-axis-title",isDocsHomePage:!1,title:"Plot / Axis Titles",description:"Display custom axis titles on a plot.",source:"@site/docs/examples/plot-axis-title.md",slug:"/examples/plot-axis-title",permalink:"/wave/docs/examples/plot-axis-title",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-axis-title.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Histogram",permalink:"/wave/docs/examples/plot-histogram"},next:{title:"Plot / Form",permalink:"/wave/docs/examples/plot-form"}},c=[],p={rightToc:c};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Display custom axis titles on a plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(456).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='Line',\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, x_title='Date', y_title='Price')])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return d}));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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},456:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-axis-title-f0d1c16575277e024054fbb19e5af49a.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[177],{230: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 c})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(292)),i={title:"Plot / Axis Titles"},l={unversionedId:"examples/plot-axis-title",id:"examples/plot-axis-title",isDocsHomePage:!1,title:"Plot / Axis Titles",description:"Display custom axis titles on a plot.",source:"@site/docs/examples/plot-axis-title.md",slug:"/examples/plot-axis-title",permalink:"/wave/docs/examples/plot-axis-title",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-axis-title.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Histogram",permalink:"/wave/docs/examples/plot-histogram"},next:{title:"Plot / Form",permalink:"/wave/docs/examples/plot-form"}},c=[],p={rightToc:c};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Display custom axis titles on a plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(461).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='Line',\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, x_title='Date', y_title='Price')])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return d}));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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},461:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-axis-title-f0d1c16575277e024054fbb19e5af49a.png"}}]);
\ No newline at end of file
diff --git a/docs/c0b6bb44.07febaba.js b/docs/c0b6bb44.07febaba.js
deleted file mode 100644
index aa1d8bfbf8..0000000000
--- a/docs/c0b6bb44.07febaba.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[177],{230:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return o})),t.d(n,"metadata",(function(){return i})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return u}));var r=t(2),a=t(6),s=(t(0),t(290)),o={title:"Table / Search"},i={unversionedId:"examples/table-search",id:"examples/table-search",isDocsHomePage:!1,title:"Table / Search",description:"Enable searching a table across specific columns.",source:"@site/docs/examples/table-search.md",slug:"/examples/table-search",permalink:"/wave/docs/examples/table-search",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/table-search.md",version:"current",sidebar:"someSidebar",previous:{title:"Table / Sort",permalink:"/wave/docs/examples/table-sort"},next:{title:"Table / Filter",permalink:"/wave/docs/examples/table-filter"}},l=[],c={rightToc:l};function u(e){var n=e.components,o=Object(a.a)(e,["components"]);return Object(s.b)("wrapper",Object(r.a)({},c,o,{components:n,mdxType:"MDXLayout"}),Object(s.b)("p",null,"Enable searching a table across specific columns."),Object(s.b)("div",{className:"cover",style:{backgroundImage:"url("+t(435).default+")"}}),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import random\nfrom faker import Faker\nfrom h2o_wave import Q, listen, ui\n\nfake = Faker()\n\n_id = 0\n\n\nclass Issue:\n    def __init__(self, text: str, status: str, progress: float, icon: str, notifications: str):\n        global _id\n        _id += 1\n        self.id = f'I{_id}'\n        self.text = text\n        self.status = status\n        self.views = 0\n        self.progress = progress\n        self.icon = icon\n        self.notifications = notifications\n\n\n# Create some issues\nissues = [\n    Issue(\n        text=fake.sentence(),\n        status=('Closed' if i % 2 == 0 else 'Open'),\n        progress=random.random(),\n        icon=('BoxCheckmarkSolid' if random.random() > 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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?o(Object(t),!0).forEach((function(n){s(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},s=Object.keys(e);for(r=0;r<s.length;r++)t=s[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r<s.length;r++)t=s[r],n.indexOf(t)>=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<s;c++)o[c]=t[c];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},435:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/table-search-f29a132ad20079a67a0fee3143689fa6.png"}}]);
\ No newline at end of file
diff --git a/docs/c0b6bb44.58e31668.js b/docs/c0b6bb44.58e31668.js
new file mode 100644
index 0000000000..00d80bd104
--- /dev/null
+++ b/docs/c0b6bb44.58e31668.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[178],{231:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return o})),t.d(n,"metadata",(function(){return i})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return u}));var r=t(2),a=t(6),s=(t(0),t(292)),o={title:"Table / Search"},i={unversionedId:"examples/table-search",id:"examples/table-search",isDocsHomePage:!1,title:"Table / Search",description:"Enable searching a table across specific columns.",source:"@site/docs/examples/table-search.md",slug:"/examples/table-search",permalink:"/wave/docs/examples/table-search",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/table-search.md",version:"current",sidebar:"someSidebar",previous:{title:"Table / Sort",permalink:"/wave/docs/examples/table-sort"},next:{title:"Table / Filter",permalink:"/wave/docs/examples/table-filter"}},l=[],c={rightToc:l};function u(e){var n=e.components,o=Object(a.a)(e,["components"]);return Object(s.b)("wrapper",Object(r.a)({},c,o,{components:n,mdxType:"MDXLayout"}),Object(s.b)("p",null,"Enable searching a table across specific columns."),Object(s.b)("div",{className:"cover",style:{backgroundImage:"url("+t(440).default+")"}}),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import random\nfrom faker import Faker\nfrom h2o_wave import main, app, Q, ui\n\nfake = Faker()\n\n_id = 0\n\n\nclass Issue:\n    def __init__(self, text: str, status: str, progress: float, icon: str, notifications: str):\n        global _id\n        _id += 1\n        self.id = f'I{_id}'\n        self.text = text\n        self.status = status\n        self.views = 0\n        self.progress = progress\n        self.icon = icon\n        self.notifications = notifications\n\n\n# Create some issues\nissues = [\n    Issue(\n        text=fake.sentence(),\n        status=('Closed' if i % 2 == 0 else 'Open'),\n        progress=random.random(),\n        icon=('BoxCheckmarkSolid' if random.random() > 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\n@app('/demo')\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")))}u.isMDXComponent=!0},292: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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?o(Object(t),!0).forEach((function(n){s(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},s=Object.keys(e);for(r=0;r<s.length;r++)t=s[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r<s.length;r++)t=s[r],n.indexOf(t)>=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<s;c++)o[c]=t[c];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},440:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/table-search-f29a132ad20079a67a0fee3143689fa6.png"}}]);
\ No newline at end of file
diff --git a/docs/c10c720e.0173a8d3.js b/docs/c10c720e.0173a8d3.js
new file mode 100644
index 0000000000..fdac37e2a9
--- /dev/null
+++ b/docs/c10c720e.0173a8d3.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[179],{232:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return l})),t.d(n,"metadata",(function(){return i})),t.d(n,"rightToc",(function(){return p})),t.d(n,"default",(function(){return c}));var a=t(2),r=t(6),o=(t(0),t(292)),l={title:"Uploads / Download"},i={unversionedId:"examples/upload-download",id:"examples/upload-download",isDocsHomePage:!1,title:"Uploads / Download",description:"Accept files from the user and downloads them locally.",source:"@site/docs/examples/upload-download.md",slug:"/examples/upload-download",permalink:"/wave/docs/examples/upload-download",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/upload-download.md",version:"current",sidebar:"someSidebar",previous:{title:"Uploads / UI",permalink:"/wave/docs/examples/upload-ui"},next:{title:"Meta / Title",permalink:"/wave/docs/examples/meta-title"}},p=[],s={rightToc:p};function c(e){var n=e.components,l=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},s,l,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Accept files from the user and downloads them locally."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(465).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"import os\nimport os.path\nfrom h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    links = q.args.user_files\n    if links:\n        items = [ui.text_xl('Files uploaded!')]\n        for link in links:\n            local_path = await q.site.download(link, '.')\n            #\n            # The file is now available locally; process the file.\n            # To keep this example simple, we just read the file size.\n            #\n            size = os.path.getsize(local_path)\n\n            items.append(ui.link(label=f'{os.path.basename(link)} ({size} bytes)', download=True, path=link))\n            # Clean up\n            os.remove(local_path)\n\n        items.append(ui.button(name='back', label='Back', primary=True))\n        q.page['example'].items = items\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.text_xl('Upload some files'),\n            ui.file_upload(name='user_files', label='Upload', multiple=True),\n        ])\n    await q.page.save()\n")))}c.isMDXComponent=!0},292:function(e,n,t){"use strict";t.d(n,"a",(function(){return u})),t.d(n,"b",(function(){return f}));var a=t(0),r=t.n(a);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 l(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?l(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):l(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function p(e,n){if(null==e)return{};var t,a,r=function(e,n){if(null==e)return{};var t,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)t=o[a],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)t=o[a],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var s=r.a.createContext({}),c=function(e){var n=r.a.useContext(s),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(s.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,s=p(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},s),{},{components:t})):r.a.createElement(f,i({ref:n},s))}));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 p in n)hasOwnProperty.call(n,p)&&(i[p]=n[p]);i.originalType=e,i.mdxType="string"==typeof e?e:a,l[1]=i;for(var s=2;s<o;s++)l[s]=t[s];return r.a.createElement.apply(null,l)}return r.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},465:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/upload-download-ce3af4e53ce2d7a546aa933667f7758a.png"}}]);
\ No newline at end of file
diff --git a/docs/c10c720e.4da34ab2.js b/docs/c10c720e.4da34ab2.js
deleted file mode 100644
index fd5fd72022..0000000000
--- a/docs/c10c720e.4da34ab2.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[178],{231:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return l})),t.d(n,"metadata",(function(){return i})),t.d(n,"rightToc",(function(){return s})),t.d(n,"default",(function(){return c}));var a=t(2),r=t(6),o=(t(0),t(290)),l={title:"Uploads / Download"},i={unversionedId:"examples/upload-download",id:"examples/upload-download",isDocsHomePage:!1,title:"Uploads / Download",description:"Accept files from the user and downloads them locally.",source:"@site/docs/examples/upload-download.md",slug:"/examples/upload-download",permalink:"/wave/docs/examples/upload-download",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/upload-download.md",version:"current",sidebar:"someSidebar",previous:{title:"Uploads / UI",permalink:"/wave/docs/examples/upload-ui"},next:{title:"Meta / Title",permalink:"/wave/docs/examples/meta-title"}},s=[],p={rightToc:s};function c(e){var n=e.components,l=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},p,l,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Accept files from the user and downloads them locally."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(460).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"import os\nimport os.path\nfrom h2o_wave import Q, listen, ui\n\nasync def serve(q: Q):\n    links = q.args.user_files\n    if links:\n        items = [ui.text_xl('Files uploaded!')]\n        for link in links:\n            local_path = await q.site.download(link, '.')\n            #\n            # The file is now available locally; process the file.\n            # To keep this example simple, we just read the file size.\n            #\n            size = os.path.getsize(local_path)\n\n            items.append(ui.link(label=f'{os.path.basename(link)} ({size} bytes)', download=True, path=link))\n            # Clean up\n            os.remove(local_path)\n\n        items.append(ui.button(name='back', label='Back', primary=True))\n        q.page['example'].items = items\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.text_xl('Upload some files'),\n            ui.file_upload(name='user_files', label='Upload', multiple=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 u})),t.d(n,"b",(function(){return f}));var a=t(0),r=t.n(a);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 l(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?l(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):l(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function s(e,n){if(null==e)return{};var t,a,r=function(e,n){if(null==e)return{};var t,a,r={},o=Object.keys(e);for(a=0;a<o.length;a++)t=o[a],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)t=o[a],n.indexOf(t)>=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<o;p++)l[p]=t[p];return r.a.createElement.apply(null,l)}return r.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},460:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/upload-download-ce3af4e53ce2d7a546aa933667f7758a.png"}}]);
\ No newline at end of file
diff --git a/docs/c1570962.19157d64.js b/docs/c1570962.e4a00ed0.js
similarity index 97%
rename from docs/c1570962.19157d64.js
rename to docs/c1570962.e4a00ed0.js
index 735adc35f0..be84773d35 100644
--- a/docs/c1570962.19157d64.js
+++ b/docs/c1570962.e4a00ed0.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[179],{232:function(A,e,a){"use strict";a.r(e),a.d(e,"frontMatter",(function(){return o})),a.d(e,"metadata",(function(){return i})),a.d(e,"rightToc",(function(){return u})),a.d(e,"default",(function(){return p}));var t=a(2),n=a(6),r=(a(0),a(290)),o={title:"Nav"},i={unversionedId:"examples/nav",id:"examples/nav",isDocsHomePage:!1,title:"Nav",description:"Use nav cards to display sidebar navigation.",source:"@site/docs/examples/nav.md",slug:"/examples/nav",permalink:"/wave/docs/examples/nav",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/nav.md",version:"current",sidebar:"someSidebar",previous:{title:"Markup",permalink:"/wave/docs/examples/markup"},next:{title:"Toolbar",permalink:"/wave/docs/examples/toolbar"}},u=[],l={rightToc:u};function p(A){var e=A.components,o=Object(n.a)(A,["components"]);return Object(r.b)("wrapper",Object(t.a)({},l,o,{components:e,mdxType:"MDXLayout"}),Object(r.b)("p",null,"Use nav cards to display sidebar navigation."),Object(r.b)("div",{className:"cover",style:{backgroundImage:"url("+a(438).default+")"}}),Object(r.b)("pre",null,Object(r.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\npage['tabs'] = ui.nav_card(\n    box='1 1 2 5',\n    items=[\n        ui.nav_group('Menu', items=[\n            ui.nav_item(name='#menu/spam', label='Spam'),\n            ui.nav_item(name='#menu/ham', label='Ham'),\n            ui.nav_item(name='#menu/eggs', label='Eggs'),\n        ]),\n        ui.nav_group('Help', items=[\n            ui.nav_item(name='#about', label='About'),\n            ui.nav_item(name='#support', label='Support'),\n        ])\n    ],\n)\n\npage.save()\n")))}p.isMDXComponent=!0},290:function(A,e,a){"use strict";a.d(e,"a",(function(){return b})),a.d(e,"b",(function(){return m}));var t=a(0),n=a.n(t);function r(A,e,a){return e in A?Object.defineProperty(A,e,{value:a,enumerable:!0,configurable:!0,writable:!0}):A[e]=a,A}function o(A,e){var a=Object.keys(A);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(A);e&&(t=t.filter((function(e){return Object.getOwnPropertyDescriptor(A,e).enumerable}))),a.push.apply(a,t)}return a}function i(A){for(var e=1;e<arguments.length;e++){var a=null!=arguments[e]?arguments[e]:{};e%2?o(Object(a),!0).forEach((function(e){r(A,e,a[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(A,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(e){Object.defineProperty(A,e,Object.getOwnPropertyDescriptor(a,e))}))}return A}function u(A,e){if(null==A)return{};var a,t,n=function(A,e){if(null==A)return{};var a,t,n={},r=Object.keys(A);for(t=0;t<r.length;t++)a=r[t],e.indexOf(a)>=0||(n[a]=A[a]);return n}(A,e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(A);for(t=0;t<r.length;t++)a=r[t],e.indexOf(a)>=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<r;l++)o[l]=a[l];return n.a.createElement.apply(null,o)}return n.a.createElement.apply(null,a)}f.displayName="MDXCreateElement"},438:function(A,e,a){"use strict";a.r(e),e.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[180],{233:function(A,e,a){"use strict";a.r(e),a.d(e,"frontMatter",(function(){return o})),a.d(e,"metadata",(function(){return i})),a.d(e,"rightToc",(function(){return u})),a.d(e,"default",(function(){return p}));var t=a(2),n=a(6),r=(a(0),a(292)),o={title:"Nav"},i={unversionedId:"examples/nav",id:"examples/nav",isDocsHomePage:!1,title:"Nav",description:"Use nav cards to display sidebar navigation.",source:"@site/docs/examples/nav.md",slug:"/examples/nav",permalink:"/wave/docs/examples/nav",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/nav.md",version:"current",sidebar:"someSidebar",previous:{title:"Markup",permalink:"/wave/docs/examples/markup"},next:{title:"Toolbar",permalink:"/wave/docs/examples/toolbar"}},u=[],l={rightToc:u};function p(A){var e=A.components,o=Object(n.a)(A,["components"]);return Object(r.b)("wrapper",Object(t.a)({},l,o,{components:e,mdxType:"MDXLayout"}),Object(r.b)("p",null,"Use nav cards to display sidebar navigation."),Object(r.b)("div",{className:"cover",style:{backgroundImage:"url("+a(443).default+")"}}),Object(r.b)("pre",null,Object(r.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\npage['tabs'] = ui.nav_card(\n    box='1 1 2 5',\n    items=[\n        ui.nav_group('Menu', items=[\n            ui.nav_item(name='#menu/spam', label='Spam'),\n            ui.nav_item(name='#menu/ham', label='Ham'),\n            ui.nav_item(name='#menu/eggs', label='Eggs'),\n        ]),\n        ui.nav_group('Help', items=[\n            ui.nav_item(name='#about', label='About'),\n            ui.nav_item(name='#support', label='Support'),\n        ])\n    ],\n)\n\npage.save()\n")))}p.isMDXComponent=!0},292:function(A,e,a){"use strict";a.d(e,"a",(function(){return b})),a.d(e,"b",(function(){return m}));var t=a(0),n=a.n(t);function r(A,e,a){return e in A?Object.defineProperty(A,e,{value:a,enumerable:!0,configurable:!0,writable:!0}):A[e]=a,A}function o(A,e){var a=Object.keys(A);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(A);e&&(t=t.filter((function(e){return Object.getOwnPropertyDescriptor(A,e).enumerable}))),a.push.apply(a,t)}return a}function i(A){for(var e=1;e<arguments.length;e++){var a=null!=arguments[e]?arguments[e]:{};e%2?o(Object(a),!0).forEach((function(e){r(A,e,a[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(A,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(e){Object.defineProperty(A,e,Object.getOwnPropertyDescriptor(a,e))}))}return A}function u(A,e){if(null==A)return{};var a,t,n=function(A,e){if(null==A)return{};var a,t,n={},r=Object.keys(A);for(t=0;t<r.length;t++)a=r[t],e.indexOf(a)>=0||(n[a]=A[a]);return n}(A,e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(A);for(t=0;t<r.length;t++)a=r[t],e.indexOf(a)>=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<r;l++)o[l]=a[l];return n.a.createElement.apply(null,o)}return n.a.createElement.apply(null,a)}f.displayName="MDXCreateElement"},443:function(A,e,a){"use strict";a.r(e),e.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/c1cf1fe4.44f01cc0.js b/docs/c1cf1fe4.af8593f1.js
similarity index 92%
rename from docs/c1cf1fe4.44f01cc0.js
rename to docs/c1cf1fe4.af8593f1.js
index 4286d27646..325c02c964 100644
--- a/docs/c1cf1fe4.44f01cc0.js
+++ b/docs/c1cf1fe4.af8593f1.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[180],{233:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return p})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return l})),r.d(t,"default",(function(){return u}));var n=r(2),o=r(6),a=(r(0),r(290)),p={title:"Plot / Interval / Groups"},i={unversionedId:"examples/plot-interval-groups",id:"examples/plot-interval-groups",isDocsHomePage:!1,title:"Plot / Interval / Groups",description:"Make a grouped column plot.",source:"@site/docs/examples/plot-interval-groups.md",slug:"/examples/plot-interval-groups",permalink:"/wave/docs/examples/plot-interval-groups",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-groups.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Transpose",permalink:"/wave/docs/examples/plot-interval-transpose"},next:{title:"Plot / Interval / Groups / Transpose",permalink:"/wave/docs/examples/plot-interval-groups-transpose"}},l=[],c={rightToc:l};function u(e){var t=e.components,p=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},c,p,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Make a grouped column plot."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(443).default+")"}}),Object(a.b)("pre",null,Object(a.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 = 3\nf = FakeMultiCategoricalSeries(groups=k)\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Intervals, groups',\n    data=data('country product price', n * k),\n    plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', color='=country', dodge='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")))}u.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return s})),r.d(t,"b",(function(){return f}));var n=r(0),o=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 p(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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=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<a;c++)p[c]=r[c];return o.a.createElement.apply(null,p)}return o.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},443:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-interval-groups-b096660ab331215122bb6771cda619ac.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[181],{234:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return p})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return l})),r.d(t,"default",(function(){return u}));var n=r(2),o=r(6),a=(r(0),r(292)),p={title:"Plot / Interval / Groups"},i={unversionedId:"examples/plot-interval-groups",id:"examples/plot-interval-groups",isDocsHomePage:!1,title:"Plot / Interval / Groups",description:"Make a grouped column plot.",source:"@site/docs/examples/plot-interval-groups.md",slug:"/examples/plot-interval-groups",permalink:"/wave/docs/examples/plot-interval-groups",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-groups.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Transpose",permalink:"/wave/docs/examples/plot-interval-transpose"},next:{title:"Plot / Interval / Groups / Transpose",permalink:"/wave/docs/examples/plot-interval-groups-transpose"}},l=[],c={rightToc:l};function u(e){var t=e.components,p=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},c,p,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Make a grouped column plot."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(448).default+")"}}),Object(a.b)("pre",null,Object(a.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 = 3\nf = FakeMultiCategoricalSeries(groups=k)\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Intervals, groups',\n    data=data('country product price', n * k),\n    plot=ui.plot([ui.mark(type='interval', x='=product', y='=price', color='=country', dodge='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")))}u.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return s})),r.d(t,"b",(function(){return f}));var n=r(0),o=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 p(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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=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<a;c++)p[c]=r[c];return o.a.createElement.apply(null,p)}return o.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},448:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-interval-groups-b096660ab331215122bb6771cda619ac.png"}}]);
\ No newline at end of file
diff --git a/docs/c4f5d8e4.8905731d.js b/docs/c4f5d8e4.4fc6a1ee.js
similarity index 95%
rename from docs/c4f5d8e4.8905731d.js
rename to docs/c4f5d8e4.4fc6a1ee.js
index 3096885059..c87987ee06 100644
--- a/docs/c4f5d8e4.8905731d.js
+++ b/docs/c4f5d8e4.4fc6a1ee.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[181],{234:function(e,t,a){"use strict";a.r(t);var n=a(2),i=a(0),l=a.n(i),r=a(292),o=a(295),c=a(293),s=a(291),m=a(294),u=a(235),d=a.n(u);const p=[{title:"Know Python?",icon:"fab fa-python",description:l.a.createElement(l.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:l.a.createElement(l.a.Fragment,null,"Broadcast live information, visualizations and graphics using Wave's low-latency realtime server.")},{title:"Collaborative Content",icon:"fas fa-users",description:l.a.createElement(l.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:l.a.createElement(l.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:l.a.createElement(l.a.Fragment,null,"Easily share your apps with end-users, get feedback, improve and iterate.")},{title:"Run Anywhere",icon:"fas fa-terminal",description:l.a.createElement(l.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({icon:e,title:t,description:a}){return l.a.createElement("div",{className:Object(r.a)("col col--4",d.a.feature)},l.a.createElement("div",null,l.a.createElement("i",{class:e})),l.a.createElement("h3",null,t),l.a.createElement("p",null,a))}t.default=function(){const e=Object(s.a)(),{siteConfig:t={}}=e;return l.a.createElement(o.a,{title:"Hello from "+t.title,description:"Description will go into a meta tag in <head />"},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
+(window.webpackJsonp=window.webpackJsonp||[]).push([[182],{235:function(e,t,a){"use strict";a.r(t);var n=a(2),i=a(0),l=a.n(i),r=a(294),o=a(297),c=a(295),s=a(293),m=a(296),u=a(236),d=a.n(u);const p=[{title:"Know Python?",icon:"fab fa-python",description:l.a.createElement(l.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:l.a.createElement(l.a.Fragment,null,"Broadcast live information, visualizations and graphics using Wave's low-latency realtime server.")},{title:"Collaborative Content",icon:"fas fa-users",description:l.a.createElement(l.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:l.a.createElement(l.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:l.a.createElement(l.a.Fragment,null,"Easily share your apps with end-users, get feedback, improve and iterate.")},{title:"Run Anywhere",icon:"fas fa-terminal",description:l.a.createElement(l.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({icon:e,title:t,description:a}){return l.a.createElement("div",{className:Object(r.a)("col col--4",d.a.feature)},l.a.createElement("div",null,l.a.createElement("i",{class:e})),l.a.createElement("h3",null,t),l.a.createElement("p",null,a))}t.default=function(){const e=Object(s.a)(),{siteConfig:t={}}=e;return l.a.createElement(o.a,{title:"Hello from "+t.title,description:"Description will go into a meta tag in <head />"},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/c641a4e8.56e47608.js b/docs/c641a4e8.437ff80d.js
similarity index 96%
rename from docs/c641a4e8.56e47608.js
rename to docs/c641a4e8.437ff80d.js
index 3622030614..779f536030 100644
--- a/docs/c641a4e8.56e47608.js
+++ b/docs/c641a4e8.437ff80d.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(290)),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(426).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},290: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<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?i(Object(t),!0).forEach((function(r){o(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function c(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=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<o;s++)i[s]=t[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}f.displayName="MDXCreateElement"},426:function(e,r,t){"use strict";t.r(r),r.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[183],{237: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(292)),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(431).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},292: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<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?i(Object(t),!0).forEach((function(r){o(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function c(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=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<o;s++)i[s]=t[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}f.displayName="MDXCreateElement"},431:function(e,r,t){"use strict";t.r(r),r.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/c7b62599.724ac45e.js b/docs/c7b62599.b49ba390.js
similarity index 93%
rename from docs/c7b62599.724ac45e.js
rename to docs/c7b62599.b49ba390.js
index 70356e8615..8a601467d0 100644
--- a/docs/c7b62599.724ac45e.js
+++ b/docs/c7b62599.b49ba390.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[183],{237: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 p})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(290)),c={title:"Plot / Interval / Stacked / Grouped / Transpose"},i={unversionedId:"examples/plot-interval-stacked-grouped-transpose",id:"examples/plot-interval-stacked-grouped-transpose",isDocsHomePage:!1,title:"Plot / Interval / Stacked / Grouped / Transpose",description:"Make a bar plot with both stacked and grouped bars.",source:"@site/docs/examples/plot-interval-stacked-grouped-transpose.md",slug:"/examples/plot-interval-stacked-grouped-transpose",permalink:"/wave/docs/examples/plot-interval-stacked-grouped-transpose",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-stacked-grouped-transpose.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Stacked / Grouped",permalink:"/wave/docs/examples/plot-interval-stacked-grouped"},next:{title:"Plot / Interval / Polar",permalink:"/wave/docs/examples/plot-interval-polar"}},p=[],l={rightToc:p};function s(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a bar plot with both stacked and grouped bars."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(446).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 = 5\nk = 5\nf1 = FakeMultiCategoricalSeries(groups=k)\nf2 = FakeMultiCategoricalSeries(groups=k)\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Intervals, stacked and dodged',\n    data=data('category country product price', n * k * 2),\n    plot=ui.plot([\n        ui.mark(type='interval', x='=price', y='=product', color='=country', stack='auto', dodge='=category', x_min=0)])\n))\n\ndata1 = [('A', g, t, x) for x in [f1.next() for _ in range(n)] for g, t, x, _ in x]\ndata2 = [('B', g, t, x) for x in [f2.next() for _ in range(n)] for g, t, x, _ in x]\nv.data = data1 + data2\n\npage.save()\n")))}s.isMDXComponent=!0},290: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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;l++)c[l]=r[l];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},446:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-interval-stacked-grouped-transpose-2b181afc5e1a2626b7e700625c7f41b3.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[184],{238: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 p})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(292)),c={title:"Plot / Interval / Stacked / Grouped / Transpose"},i={unversionedId:"examples/plot-interval-stacked-grouped-transpose",id:"examples/plot-interval-stacked-grouped-transpose",isDocsHomePage:!1,title:"Plot / Interval / Stacked / Grouped / Transpose",description:"Make a bar plot with both stacked and grouped bars.",source:"@site/docs/examples/plot-interval-stacked-grouped-transpose.md",slug:"/examples/plot-interval-stacked-grouped-transpose",permalink:"/wave/docs/examples/plot-interval-stacked-grouped-transpose",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-stacked-grouped-transpose.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Stacked / Grouped",permalink:"/wave/docs/examples/plot-interval-stacked-grouped"},next:{title:"Plot / Interval / Polar",permalink:"/wave/docs/examples/plot-interval-polar"}},p=[],l={rightToc:p};function s(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a bar plot with both stacked and grouped bars."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(451).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 = 5\nk = 5\nf1 = FakeMultiCategoricalSeries(groups=k)\nf2 = FakeMultiCategoricalSeries(groups=k)\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Intervals, stacked and dodged',\n    data=data('category country product price', n * k * 2),\n    plot=ui.plot([\n        ui.mark(type='interval', x='=price', y='=product', color='=country', stack='auto', dodge='=category', x_min=0)])\n))\n\ndata1 = [('A', g, t, x) for x in [f1.next() for _ in range(n)] for g, t, x, _ in x]\ndata2 = [('B', g, t, x) for x in [f2.next() for _ in range(n)] for g, t, x, _ in x]\nv.data = data1 + data2\n\npage.save()\n")))}s.isMDXComponent=!0},292: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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;l++)c[l]=r[l];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},451:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-interval-stacked-grouped-transpose-2b181afc5e1a2626b7e700625c7f41b3.png"}}]);
\ No newline at end of file
diff --git a/docs/c87c151a.061d9ab0.js b/docs/c87c151a.4b34076d.js
similarity index 92%
rename from docs/c87c151a.061d9ab0.js
rename to docs/c87c151a.4b34076d.js
index 9a68961bec..9b03697c04 100644
--- a/docs/c87c151a.061d9ab0.js
+++ b/docs/c87c151a.4b34076d.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[184],{238:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return p})),r.d(t,"metadata",(function(){return c})),r.d(t,"rightToc",(function(){return i})),r.d(t,"default",(function(){return s}));var n=r(2),o=r(6),a=(r(0),r(290)),p={title:"Plot / Path / Smooth"},c={unversionedId:"examples/plot-path-smooth",id:"examples/plot-path-smooth",isDocsHomePage:!1,title:"Plot / Path / Smooth",description:"Make a path plot with a smooth curve.",source:"@site/docs/examples/plot-path-smooth.md",slug:"/examples/plot-path-smooth",permalink:"/wave/docs/examples/plot-path-smooth",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-path-smooth.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Path / Point",permalink:"/wave/docs/examples/plot-path-point"},next:{title:"Plot / Area",permalink:"/wave/docs/examples/plot-area"}},i=[],l={rightToc:i};function s(e){var t=e.components,p=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},l,p,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Make a path plot with a smooth curve."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(453).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeScatter\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 50\nf = FakeScatter()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Path, smooth',\n    data=data('profit sales', n),\n    plot=ui.plot([ui.mark(type='path', x='=profit', y='=sales', curve='smooth')])\n))\nv.data = [(x, y) for x, y in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return d}));var n=r(0),o=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 p(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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function i(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=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<a;l++)p[l]=r[l];return o.a.createElement.apply(null,p)}return o.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},453:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-path-smooth-d3dc4edb37522cdaf43f8da9ab425156.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[185],{239:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return p})),r.d(t,"metadata",(function(){return c})),r.d(t,"rightToc",(function(){return i})),r.d(t,"default",(function(){return s}));var n=r(2),o=r(6),a=(r(0),r(292)),p={title:"Plot / Path / Smooth"},c={unversionedId:"examples/plot-path-smooth",id:"examples/plot-path-smooth",isDocsHomePage:!1,title:"Plot / Path / Smooth",description:"Make a path plot with a smooth curve.",source:"@site/docs/examples/plot-path-smooth.md",slug:"/examples/plot-path-smooth",permalink:"/wave/docs/examples/plot-path-smooth",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-path-smooth.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Path / Point",permalink:"/wave/docs/examples/plot-path-point"},next:{title:"Plot / Area",permalink:"/wave/docs/examples/plot-area"}},i=[],l={rightToc:i};function s(e){var t=e.components,p=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},l,p,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Make a path plot with a smooth curve."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(458).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeScatter\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 50\nf = FakeScatter()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Path, smooth',\n    data=data('profit sales', n),\n    plot=ui.plot([ui.mark(type='path', x='=profit', y='=sales', curve='smooth')])\n))\nv.data = [(x, y) for x, y in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return d}));var n=r(0),o=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 p(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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function i(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=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<a;l++)p[l]=r[l];return o.a.createElement.apply(null,p)}return o.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},458:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-path-smooth-d3dc4edb37522cdaf43f8da9ab425156.png"}}]);
\ No newline at end of file
diff --git a/docs/c9e5c590.14dfa3de.js b/docs/c9e5c590.a5a4891c.js
similarity index 92%
rename from docs/c9e5c590.14dfa3de.js
rename to docs/c9e5c590.a5a4891c.js
index 287349c922..706b0c6ab1 100644
--- a/docs/c9e5c590.14dfa3de.js
+++ b/docs/c9e5c590.a5a4891c.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[185],{239:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return s}));var r=n(2),o=n(6),a=(n(0),n(290)),i={title:"Plot / Line / Smooth"},c={unversionedId:"examples/plot-line-smooth",id:"examples/plot-line-smooth",isDocsHomePage:!1,title:"Plot / Line / Smooth",description:"Make a line plot using a smooth curve.",source:"@site/docs/examples/plot-line-smooth.md",slug:"/examples/plot-line-smooth",permalink:"/wave/docs/examples/plot-line-smooth",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line-smooth.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Line / Groups",permalink:"/wave/docs/examples/plot-line-groups"},next:{title:"Plot / Line / Step",permalink:"/wave/docs/examples/plot-step"}},l=[],p={rightToc:l};function s(e){var t=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Make a line plot using a smooth curve."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(450).default+")"}}),Object(a.b)("pre",null,Object(a.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='Line, smooth',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', curve='smooth', y_min=0)])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),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 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=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<a;p++)i[p]=n[p];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},450:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-line-smooth-566975ab0a25c3e3ad7b3941ca441df6.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[186],{240:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return s}));var r=n(2),o=n(6),a=(n(0),n(292)),i={title:"Plot / Line / Smooth"},c={unversionedId:"examples/plot-line-smooth",id:"examples/plot-line-smooth",isDocsHomePage:!1,title:"Plot / Line / Smooth",description:"Make a line plot using a smooth curve.",source:"@site/docs/examples/plot-line-smooth.md",slug:"/examples/plot-line-smooth",permalink:"/wave/docs/examples/plot-line-smooth",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line-smooth.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Line / Groups",permalink:"/wave/docs/examples/plot-line-groups"},next:{title:"Plot / Line / Step",permalink:"/wave/docs/examples/plot-step"}},l=[],p={rightToc:l};function s(e){var t=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Make a line plot using a smooth curve."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(455).default+")"}}),Object(a.b)("pre",null,Object(a.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='Line, smooth',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', curve='smooth', y_min=0)])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),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 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=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<a;p++)i[p]=n[p];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},455:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-line-smooth-566975ab0a25c3e3ad7b3941ca441df6.png"}}]);
\ No newline at end of file
diff --git a/docs/ca1ac85d.ee5b488b.js b/docs/ca1ac85d.45e0ea7b.js
similarity index 97%
rename from docs/ca1ac85d.ee5b488b.js
rename to docs/ca1ac85d.45e0ea7b.js
index d5d90bc5b3..32184f9d85 100644
--- a/docs/ca1ac85d.ee5b488b.js
+++ b/docs/ca1ac85d.45e0ea7b.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[186],{240:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return s})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return p}));var a=n(2),r=n(6),i=(n(0),n(290)),o={title:"Introduction",slug:"/enterprise/"},s={unversionedId:"enterprise/index",id:"enterprise/index",isDocsHomePage:!1,title:"Introduction",description:"H2O AI Cloud is the best way to operationalize AI/ML applications built with H2O Wave.",source:"@site/docs/enterprise/index.md",slug:"/enterprise/",permalink:"/wave/docs/enterprise/",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/enterprise/index.md",version:"current",sidebar:"someSidebar",previous:{title:"Backup and Recovery",permalink:"/wave/docs/backup"},next:{title:"Basic Concepts",permalink:"/wave/docs/enterprise/basic-concepts"}},l=[{value:"Rationale",id:"rationale",children:[]},{value:"What is H2O AI Cloud?",id:"what-is-h2o-ai-cloud",children:[]}],c={rightToc:l};function p(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(a.a)({},c,n,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"H2O AI Cloud is the best way to operationalize AI/ML applications built with H2O Wave."),Object(i.b)("h2",{id:"rationale"},"Rationale"),Object(i.b)("p",null,"The end goal of data science projects is to produce analytical software applications to facilitate decision-support and automated decision making."),Object(i.b)("p",null,"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\u2019s authors: what data to use, which algorithms to apply, what information to present, and how to present it."),Object(i.b)("p",null,"Developing and deploying such applications presents some unique problems:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"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."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"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."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"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.")),Object(i.b)("p",null,"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."),Object(i.b)("h2",{id:"what-is-h2o-ai-cloud"},"What is H2O AI Cloud?"),Object(i.b)("p",null,"H2O\u2019s AI Cloud is a turnkey platform that streamlines this entire process: one platform and one API."),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"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."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"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."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"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.")))}p.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return b}));var a=n(0),r=n.n(a);function i(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 a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=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<i;c++)o[c]=n[c];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[187],{241:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return s})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return p}));var a=n(2),r=n(6),i=(n(0),n(292)),o={title:"Introduction",slug:"/enterprise/"},s={unversionedId:"enterprise/index",id:"enterprise/index",isDocsHomePage:!1,title:"Introduction",description:"H2O AI Cloud is the best way to operationalize AI/ML applications built with H2O Wave.",source:"@site/docs/enterprise/index.md",slug:"/enterprise/",permalink:"/wave/docs/enterprise/",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/enterprise/index.md",version:"current",sidebar:"someSidebar",previous:{title:"Backup and Recovery",permalink:"/wave/docs/backup"},next:{title:"Basic Concepts",permalink:"/wave/docs/enterprise/basic-concepts"}},l=[{value:"Rationale",id:"rationale",children:[]},{value:"What is H2O AI Cloud?",id:"what-is-h2o-ai-cloud",children:[]}],c={rightToc:l};function p(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(a.a)({},c,n,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"H2O AI Cloud is the best way to operationalize AI/ML applications built with H2O Wave."),Object(i.b)("h2",{id:"rationale"},"Rationale"),Object(i.b)("p",null,"The end goal of data science projects is to produce analytical software applications to facilitate decision-support and automated decision making."),Object(i.b)("p",null,"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\u2019s authors: what data to use, which algorithms to apply, what information to present, and how to present it."),Object(i.b)("p",null,"Developing and deploying such applications presents some unique problems:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"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."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"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."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"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.")),Object(i.b)("p",null,"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."),Object(i.b)("h2",{id:"what-is-h2o-ai-cloud"},"What is H2O AI Cloud?"),Object(i.b)("p",null,"H2O\u2019s AI Cloud is a turnkey platform that streamlines this entire process: one platform and one API."),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"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."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"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."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("strong",{parentName:"li"},"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.")))}p.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return b}));var a=n(0),r=n.n(a);function i(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 a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=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<i;c++)o[c]=n[c];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/ca622d62.58f63235.js b/docs/ca622d62.58f63235.js
deleted file mode 100644
index 69e0c593a0..0000000000
--- a/docs/ca622d62.58f63235.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[187],{241:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return o})),t.d(r,"metadata",(function(){return s})),t.d(r,"rightToc",(function(){return l})),t.d(r,"default",(function(){return u}));var n=t(2),a=t(6),i=(t(0),t(290)),o={title:"Form / Slider"},s={unversionedId:"examples/slider",id:"examples/slider",isDocsHomePage:!1,title:"Form / Slider",description:"Use a slider to allow users to set a value within a specific range.",source:"@site/docs/examples/slider.md",slug:"/examples/slider",permalink:"/wave/docs/examples/slider",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/slider.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Spinbox",permalink:"/wave/docs/examples/spinbox"},next:{title:"Form / Range Slider",permalink:"/wave/docs/examples/range-slider"}},l=[],c={rightToc:l};function u(e){var r=e.components,o=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},c,o,{components:r,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Use a slider to allow users to set a value within a specific range."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+t(429).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'slider={q.args.slider}'),\n            ui.text(f'slider_zero={q.args.slider_zero}'),\n            ui.text(f'slider_disabled={q.args.slider_disabled}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.slider(name='slider', label='Standard slider', min=0, max=100, step=10, value=30),\n            ui.slider(name='slider_zero', label='Origin from zero', min=-10, max=10, step=1, value=-3),\n            ui.slider(name='slider_disabled', label='Disabled slider', min=0, max=100, step=10, value=30,\n                      disabled=True),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}u.isMDXComponent=!0},290:function(e,r,t){"use strict";t.d(r,"a",(function(){return p})),t.d(r,"b",(function(){return f}));var n=t(0),a=t.n(n);function i(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function o(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 s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?o(Object(t),!0).forEach((function(r){i(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function l(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=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<i;c++)o[c]=t[c];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},429:function(e,r,t){"use strict";t.r(r),r.default=t.p+"assets/images/slider-06551b8ad6f45a0aa69c946c5d8332d1.png"}}]);
\ No newline at end of file
diff --git a/docs/ca622d62.8941bf61.js b/docs/ca622d62.8941bf61.js
new file mode 100644
index 0000000000..d25638baa6
--- /dev/null
+++ b/docs/ca622d62.8941bf61.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[188],{242:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return o})),t.d(r,"metadata",(function(){return s})),t.d(r,"rightToc",(function(){return l})),t.d(r,"default",(function(){return u}));var n=t(2),a=t(6),i=(t(0),t(292)),o={title:"Form / Slider"},s={unversionedId:"examples/slider",id:"examples/slider",isDocsHomePage:!1,title:"Form / Slider",description:"Use a slider to allow users to set a value within a specific range.",source:"@site/docs/examples/slider.md",slug:"/examples/slider",permalink:"/wave/docs/examples/slider",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/slider.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Spinbox",permalink:"/wave/docs/examples/spinbox"},next:{title:"Form / Range Slider",permalink:"/wave/docs/examples/range-slider"}},l=[],c={rightToc:l};function u(e){var r=e.components,o=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},c,o,{components:r,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Use a slider to allow users to set a value within a specific range."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+t(434).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'slider={q.args.slider}'),\n            ui.text(f'slider_zero={q.args.slider_zero}'),\n            ui.text(f'slider_disabled={q.args.slider_disabled}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.slider(name='slider', label='Standard slider', min=0, max=100, step=10, value=30),\n            ui.slider(name='slider_zero', label='Origin from zero', min=-10, max=10, step=1, value=-3),\n            ui.slider(name='slider_disabled', label='Disabled slider', min=0, max=100, step=10, value=30,\n                      disabled=True),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n")))}u.isMDXComponent=!0},292:function(e,r,t){"use strict";t.d(r,"a",(function(){return p})),t.d(r,"b",(function(){return f}));var n=t(0),a=t.n(n);function i(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function o(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 s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?o(Object(t),!0).forEach((function(r){i(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function l(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=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<i;c++)o[c]=t[c];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},434:function(e,r,t){"use strict";t.r(r),r.default=t.p+"assets/images/slider-06551b8ad6f45a0aa69c946c5d8332d1.png"}}]);
\ No newline at end of file
diff --git a/docs/ca84abdc.cb7c606e.js b/docs/ca84abdc.cb7c606e.js
new file mode 100644
index 0000000000..39363877c3
--- /dev/null
+++ b/docs/ca84abdc.cb7c606e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[189],{243:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),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(292)),i={title:"Meta / Icon"},c={unversionedId:"examples/meta-icon",id:"examples/meta-icon",isDocsHomePage:!1,title:"Meta / Icon",description:"Set the browser window icon for a page",source:"@site/docs/examples/meta-icon.md",slug:"/examples/meta-icon",permalink:"/wave/docs/examples/meta-icon",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/meta-icon.md",version:"current",sidebar:"someSidebar",previous:{title:"Meta / Title",permalink:"/wave/docs/examples/meta-title"},next:{title:"Meta / Notification",permalink:"/wave/docs/examples/meta-notification"}},p=[],u={rightToc:p};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},u,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Set the browser window icon for a page"),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(467).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\npage['meta'] = ui.meta_card(box='', icon='https://en.wikipedia.org/static/apple-touch/wikipedia.png')\n\n# You can also upload and assign an icon, like this:\n# icon_path, = site.upload(['path/to/my/icon.png'])\n# page['meta'] = ui.meta_card(box='', icon=icon_path)\n\npage['example'] = ui.markdown_card(\n    box='1 1 2 2',\n    title='',\n    content='<a href=\"/demo\" target=\"_blank\">Open this page in a new window</a> to view its icon.',\n)\n\npage.save()\n")))}s.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return g}));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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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):c(c({},t),e)),n},d=function(e){var t=s(e.components);return a.a.createElement(u.Provider,{value:t},e.children)},l={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,u=p(e,["components","mdxType","originalType","parentName"]),d=s(n),m=r,g=d["".concat(i,".").concat(m)]||d[m]||l[m]||o;return n?a.a.createElement(g,c(c({ref:t},u),{},{components:n})):a.a.createElement(g,c({ref:t},u))}));function g(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 u=2;u<o;u++)i[u]=n[u];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},467:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/cc0ea0cf.dbdc3880.js b/docs/cc0ea0cf.39c2181e.js
similarity index 92%
rename from docs/cc0ea0cf.dbdc3880.js
rename to docs/cc0ea0cf.39c2181e.js
index de7401a4ab..e803908c96 100644
--- a/docs/cc0ea0cf.dbdc3880.js
+++ b/docs/cc0ea0cf.39c2181e.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[188],{242: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 u}));var n=t(2),a=t(6),o=(t(0),t(290)),i={title:"Form / Separator"},p={unversionedId:"examples/separator",id:"examples/separator",isDocsHomePage:!1,title:"Form / Separator",description:"Use a separator to visually separate content into groups.",source:"@site/docs/examples/separator.md",slug:"/examples/separator",permalink:"/wave/docs/examples/separator",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/separator.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Tabs",permalink:"/wave/docs/examples/tabs"},next:{title:"Form / File Upload",permalink:"/wave/docs/examples/file-upload"}},c=[],s={rightToc:c};function u(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,"Use a separator to visually separate content into groups."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(433).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\npage['example'] = ui.form_card(\n    box='1 1 2 5',\n    items=[\n        ui.separator(label='Separator 1'),\n        ui.text('The quick brown fox jumps over the lazy dog.'),\n        ui.separator(label='Separator 2'),\n        ui.text('The quick brown fox jumps over the lazy dog.'),\n        ui.separator(label='Separator 3'),\n        ui.text('The quick brown fox jumps over the lazy dog.'),\n    ]\n)\n\npage.save()\n")))}u.isMDXComponent=!0},290:function(e,r,t){"use strict";t.d(r,"a",(function(){return l})),t.d(r,"b",(function(){return b}));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<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?i(Object(t),!0).forEach((function(r){o(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function c(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=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<o;s++)i[s]=t[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}f.displayName="MDXCreateElement"},433:function(e,r,t){"use strict";t.r(r),r.default=t.p+"assets/images/separator-761eab53dd3e94f7cae3fc78ce5f36b7.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[190],{244: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 u}));var n=t(2),a=t(6),o=(t(0),t(292)),i={title:"Form / Separator"},p={unversionedId:"examples/separator",id:"examples/separator",isDocsHomePage:!1,title:"Form / Separator",description:"Use a separator to visually separate content into groups.",source:"@site/docs/examples/separator.md",slug:"/examples/separator",permalink:"/wave/docs/examples/separator",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/separator.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Tabs",permalink:"/wave/docs/examples/tabs"},next:{title:"Form / File Upload",permalink:"/wave/docs/examples/file-upload"}},c=[],s={rightToc:c};function u(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,"Use a separator to visually separate content into groups."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(438).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\npage['example'] = ui.form_card(\n    box='1 1 2 5',\n    items=[\n        ui.separator(label='Separator 1'),\n        ui.text('The quick brown fox jumps over the lazy dog.'),\n        ui.separator(label='Separator 2'),\n        ui.text('The quick brown fox jumps over the lazy dog.'),\n        ui.separator(label='Separator 3'),\n        ui.text('The quick brown fox jumps over the lazy dog.'),\n    ]\n)\n\npage.save()\n")))}u.isMDXComponent=!0},292:function(e,r,t){"use strict";t.d(r,"a",(function(){return l})),t.d(r,"b",(function(){return b}));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<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?i(Object(t),!0).forEach((function(r){o(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function c(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=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<o;s++)i[s]=t[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}f.displayName="MDXCreateElement"},438:function(e,r,t){"use strict";t.r(r),r.default=t.p+"assets/images/separator-761eab53dd3e94f7cae3fc78ce5f36b7.png"}}]);
\ No newline at end of file
diff --git a/docs/ccc49370.5545763d.js b/docs/ccc49370.847efd16.js
similarity index 90%
rename from docs/ccc49370.5545763d.js
rename to docs/ccc49370.847efd16.js
index fb6ba02116..19c0383df6 100644
--- a/docs/ccc49370.5545763d.js
+++ b/docs/ccc49370.847efd16.js
@@ -1 +1 @@
-(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<n.length&&!t;){const l=n[e],{top:i}=l.getBoundingClientRect();i>=0&&i<=a&&(t=l),e+=1}return t}();if(c){let a=0,n=!1;for(r=document.getElementsByClassName(e);a<r.length&&!n;){const e=r[a],{href:s}=e,o=decodeURIComponent(s.substring(s.indexOf("#")+1));c.id===o&&(l&&l.classList.remove(t),e.classList.add(t),i(e),n=!0),a+=1}}}return document.addEventListener("scroll",c),document.addEventListener("resize",c),c(),()=>{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([[191],{291:function(e,t,a){"use strict";a.r(t);var n=a(0),l=a.n(n),i=a(297),r=a(369),c=a(295);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(473);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})))))}},473: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<n.length&&!t;){const l=n[e],{top:i}=l.getBoundingClientRect();i>=0&&i<=a&&(t=l),e+=1}return t}();if(c){let a=0,n=!1;for(r=document.getElementsByClassName(e);a<r.length&&!n;){const e=r[a],{href:s}=e,o=decodeURIComponent(s.substring(s.indexOf("#")+1));c.id===o&&(l&&l.classList.remove(t),e.classList.add(t),i(e),n=!0),a+=1}}}return document.addEventListener("scroll",c),document.addEventListener("resize",c),c(),()=>{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.7a492562.js b/docs/cd329814.ee103b68.js
similarity index 92%
rename from docs/cd329814.7a492562.js
rename to docs/cd329814.ee103b68.js
index 7c39e748ef..191c83d928 100644
--- a/docs/cd329814.7a492562.js
+++ b/docs/cd329814.ee103b68.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(290)),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(444).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},290: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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;p++)c[p]=r[p];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},444:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-interval-stacked-transpose-9f125bb40e6aea97cd6ad2b4e547a259.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[192],{245: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(292)),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(449).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},292: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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;p++)c[p]=r[p];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},449:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-interval-stacked-transpose-9f125bb40e6aea97cd6ad2b4e547a259.png"}}]);
\ No newline at end of file
diff --git a/docs/ce88eaaa.795d7cfb.js b/docs/ce88eaaa.795d7cfb.js
new file mode 100644
index 0000000000..ecbe20aead
--- /dev/null
+++ b/docs/ce88eaaa.795d7cfb.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[193],{246: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 p})),t.d(n,"default",(function(){return u}));var r=t(2),a=t(6),o=(t(0),t(292)),i={title:"Uploads / UI"},l={unversionedId:"examples/upload-ui",id:"examples/upload-ui",isDocsHomePage:!1,title:"Uploads / UI",description:"Accept files from the user.",source:"@site/docs/examples/upload-ui.md",slug:"/examples/upload-ui",permalink:"/wave/docs/examples/upload-ui",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/upload-ui.md",version:"current",sidebar:"someSidebar",previous:{title:"Uploads / Async",permalink:"/wave/docs/examples/upload-async"},next:{title:"Uploads / Download",permalink:"/wave/docs/examples/upload-download"}},p=[],c={rightToc:p};function u(e){var n=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},c,i,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Accept files from the user."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(464).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import os\nfrom h2o_wave import main, app, Q, ui\nimport os.path\n\n\ndef make_link_list(links):\n    # Make a markdown list of links.\n    return '\\n'.join([f'- [{os.path.basename(link)}]({link})' for link in links])\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.user_files:\n        q.page['example'].items = [\n            ui.text_xl('Files uploaded!'),\n            ui.text(make_link_list(q.args.user_files)),\n            ui.button(name='back', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.text_xl('Upload some files'),\n            ui.file_upload(name='user_files', label='Upload', multiple=True),\n        ])\n    await q.page.save()\n")))}u.isMDXComponent=!0},292: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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function p(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=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},s=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=p(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},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 p in n)hasOwnProperty.call(n,p)&&(l[p]=n[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c<o;c++)i[c]=t[c];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}d.displayName="MDXCreateElement"},464:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/upload-ui-ce3af4e53ce2d7a546aa933667f7758a.png"}}]);
\ No newline at end of file
diff --git a/docs/ce88eaaa.defa501e.js b/docs/ce88eaaa.defa501e.js
deleted file mode 100644
index 18de8a8a5b..0000000000
--- a/docs/ce88eaaa.defa501e.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[191],{244: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 s})),t.d(n,"default",(function(){return u}));var r=t(2),a=t(6),o=(t(0),t(290)),i={title:"Uploads / UI"},l={unversionedId:"examples/upload-ui",id:"examples/upload-ui",isDocsHomePage:!1,title:"Uploads / UI",description:"Accept files from the user.",source:"@site/docs/examples/upload-ui.md",slug:"/examples/upload-ui",permalink:"/wave/docs/examples/upload-ui",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/upload-ui.md",version:"current",sidebar:"someSidebar",previous:{title:"Uploads / Async",permalink:"/wave/docs/examples/upload-async"},next:{title:"Uploads / Download",permalink:"/wave/docs/examples/upload-download"}},s=[],c={rightToc:s};function u(e){var n=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},c,i,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Accept files from the user."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(459).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import os\nfrom h2o_wave import Q, listen, ui\nimport os.path\n\n\ndef make_link_list(links):\n    # Make a markdown list of links.\n    return '\\n'.join([f'- [{os.path.basename(link)}]({link})' for link in links])\n\n\nasync def serve(q: Q):\n    if q.args.user_files:\n        q.page['example'].items = [\n            ui.text_xl('Files uploaded!'),\n            ui.text(make_link_list(q.args.user_files)),\n            ui.button(name='back', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.text_xl('Upload some files'),\n            ui.file_upload(name='user_files', label='Upload', multiple=True),\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 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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function s(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=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<o;c++)i[c]=t[c];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}d.displayName="MDXCreateElement"},459:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/upload-ui-ce3af4e53ce2d7a546aa933667f7758a.png"}}]);
\ No newline at end of file
diff --git a/docs/d05981be.9ed423a2.js b/docs/d05981be.375a90cf.js
similarity index 92%
rename from docs/d05981be.9ed423a2.js
rename to docs/d05981be.375a90cf.js
index 85a5051822..dadc9fa1a0 100644
--- a/docs/d05981be.9ed423a2.js
+++ b/docs/d05981be.375a90cf.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[192],{245: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 c})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(290)),i={title:"Plot / Line"},l={unversionedId:"examples/plot-line",id:"examples/plot-line",isDocsHomePage:!1,title:"Plot / Line",description:"Make a line plot.",source:"@site/docs/examples/plot-line.md",slug:"/examples/plot-line",permalink:"/wave/docs/examples/plot-line",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Annotation / Transpose",permalink:"/wave/docs/examples/plot-interval-annotation-transpose"},next:{title:"Plot / Line / Groups",permalink:"/wave/docs/examples/plot-line-groups"}},c=[],p={rightToc:c};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a line plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(448).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='Line',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0)])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return d}));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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},448:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-line-47205e6d75190eb08bb6cecf3dfe347b.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[194],{247: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 c})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(292)),i={title:"Plot / Line"},l={unversionedId:"examples/plot-line",id:"examples/plot-line",isDocsHomePage:!1,title:"Plot / Line",description:"Make a line plot.",source:"@site/docs/examples/plot-line.md",slug:"/examples/plot-line",permalink:"/wave/docs/examples/plot-line",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Annotation / Transpose",permalink:"/wave/docs/examples/plot-interval-annotation-transpose"},next:{title:"Plot / Line / Groups",permalink:"/wave/docs/examples/plot-line-groups"}},c=[],p={rightToc:c};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a line plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(453).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='Line',\n    data=data('date price', n),\n    plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', y_min=0)])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return d}));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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},453:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-line-47205e6d75190eb08bb6cecf3dfe347b.png"}}]);
\ No newline at end of file
diff --git a/docs/d145135f.219899e0.js b/docs/d145135f.219899e0.js
deleted file mode 100644
index fae5199fd4..0000000000
--- a/docs/d145135f.219899e0.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[193],{246:function(e,n,i){"use strict";i.r(n),i.d(n,"frontMatter",(function(){return o})),i.d(n,"metadata",(function(){return s})),i.d(n,"rightToc",(function(){return f})),i.d(n,"default",(function(){return d}));var t=i(2),r=i(6),a=(i(0),i(290)),o={title:"Uploads / Async"},s={unversionedId:"examples/upload-async",id:"examples/upload-async",isDocsHomePage:!1,title:"Uploads / Async",description:"Upload files from an interactive app.",source:"@site/docs/examples/upload-async.md",slug:"/examples/upload-async",permalink:"/wave/docs/examples/upload-async",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/upload-async.md",version:"current",sidebar:"someSidebar",previous:{title:"Uploads",permalink:"/wave/docs/examples/upload"},next:{title:"Uploads / UI",permalink:"/wave/docs/examples/upload-ui"}},f=[],u={rightToc:f};function d(e){var n=e.components,o=Object(r.a)(e,["components"]);return Object(a.b)("wrapper",Object(t.a)({},u,o,{components:n,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Upload files from an interactive app."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+i(458).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"import os\nfrom h2o_wave import Q, listen, ui\n\n\ndef write_csv(filename, rows):\n    with open(filename, 'w') as f:\n        f.write('\\n'.join([','.join([str(x) for x in row]) for row in rows]))\n\n\nasync def serve(q: Q):\n    if q.args.generate_csv:\n        # Generate\n        write_csv('squares.csv', [[x, x * x] for x in range(1, 1 + q.args.row_count)])\n        # Upload\n        download_path, = await q.site.upload(['squares.csv'])\n        # Clean up\n        os.remove('squares.csv')\n\n        # Display link\n        q.page['example'].items = [\n            ui.text_xl('Squares Generated!'),\n            ui.text(f'[Download my {q.args.row_count} squares!]({download_path})'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        # Accept a row count from the user\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.text_xl('Square Generator'),\n            ui.slider(name='row_count', label='Squares to generate', min=0, max=100, step=10, value=30),\n            ui.button(name='generate_csv', label='Generate', primary=True),\n        ])\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}d.isMDXComponent=!0},290:function(e,n,i){"use strict";i.d(n,"a",(function(){return c})),i.d(n,"b",(function(){return E}));var t=i(0),r=i.n(t);function a(e,n,i){return n in e?Object.defineProperty(e,n,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[n]=i,e}function o(e,n){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),i.push.apply(i,t)}return i}function s(e){for(var n=1;n<arguments.length;n++){var i=null!=arguments[n]?arguments[n]:{};n%2?o(Object(i),!0).forEach((function(n){a(e,n,i[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):o(Object(i)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(i,n))}))}return e}function f(e,n){if(null==e)return{};var i,t,r=function(e,n){if(null==e)return{};var i,t,r={},a=Object.keys(e);for(t=0;t<a.length;t++)i=a[t],n.indexOf(i)>=0||(r[i]=e[i]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)i=a[t],n.indexOf(i)>=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<a;u++)o[u]=i[u];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,i)}R.displayName="MDXCreateElement"},458:function(e,n,i){"use strict";i.r(n),n.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/d145135f.9c24e637.js b/docs/d145135f.9c24e637.js
new file mode 100644
index 0000000000..ec21e001f2
--- /dev/null
+++ b/docs/d145135f.9c24e637.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[195],{248:function(e,n,i){"use strict";i.r(n),i.d(n,"frontMatter",(function(){return o})),i.d(n,"metadata",(function(){return s})),i.d(n,"rightToc",(function(){return f})),i.d(n,"default",(function(){return d}));var t=i(2),r=i(6),a=(i(0),i(292)),o={title:"Uploads / Async"},s={unversionedId:"examples/upload-async",id:"examples/upload-async",isDocsHomePage:!1,title:"Uploads / Async",description:"Upload files from an interactive app.",source:"@site/docs/examples/upload-async.md",slug:"/examples/upload-async",permalink:"/wave/docs/examples/upload-async",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/upload-async.md",version:"current",sidebar:"someSidebar",previous:{title:"Uploads",permalink:"/wave/docs/examples/upload"},next:{title:"Uploads / UI",permalink:"/wave/docs/examples/upload-ui"}},f=[],u={rightToc:f};function d(e){var n=e.components,o=Object(r.a)(e,["components"]);return Object(a.b)("wrapper",Object(t.a)({},u,o,{components:n,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Upload files from an interactive app."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+i(463).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"import os\nfrom h2o_wave import main, app, Q, ui\n\n\ndef write_csv(filename, rows):\n    with open(filename, 'w') as f:\n        f.write('\\n'.join([','.join([str(x) for x in row]) for row in rows]))\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.generate_csv:\n        # Generate\n        write_csv('squares.csv', [[x, x * x] for x in range(1, 1 + q.args.row_count)])\n        # Upload\n        download_path, = await q.site.upload(['squares.csv'])\n        # Clean up\n        os.remove('squares.csv')\n\n        # Display link\n        q.page['example'].items = [\n            ui.text_xl('Squares Generated!'),\n            ui.text(f'[Download my {q.args.row_count} squares!]({download_path})'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        # Accept a row count from the user\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.text_xl('Square Generator'),\n            ui.slider(name='row_count', label='Squares to generate', min=0, max=100, step=10, value=30),\n            ui.button(name='generate_csv', label='Generate', primary=True),\n        ])\n    await q.page.save()\n")))}d.isMDXComponent=!0},292:function(e,n,i){"use strict";i.d(n,"a",(function(){return c})),i.d(n,"b",(function(){return E}));var t=i(0),r=i.n(t);function a(e,n,i){return n in e?Object.defineProperty(e,n,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[n]=i,e}function o(e,n){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),i.push.apply(i,t)}return i}function s(e){for(var n=1;n<arguments.length;n++){var i=null!=arguments[n]?arguments[n]:{};n%2?o(Object(i),!0).forEach((function(n){a(e,n,i[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):o(Object(i)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(i,n))}))}return e}function f(e,n){if(null==e)return{};var i,t,r=function(e,n){if(null==e)return{};var i,t,r={},a=Object.keys(e);for(t=0;t<a.length;t++)i=a[t],n.indexOf(i)>=0||(r[i]=e[i]);return r}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)i=a[t],n.indexOf(i)>=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<a;u++)o[u]=i[u];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,i)}R.displayName="MDXCreateElement"},463:function(e,n,i){"use strict";i.r(n),n.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/d3f54ca5.47bd0228.js b/docs/d3f54ca5.47bd0228.js
new file mode 100644
index 0000000000..27e1c99e9e
--- /dev/null
+++ b/docs/d3f54ca5.47bd0228.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[196],{249:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return b}));var a=n(2),r=n(6),i=(n(0),n(292)),o={title:"Wave Apps"},p={unversionedId:"apps",id:"apps",isDocsHomePage:!1,title:"Wave Apps",description:"A Wave app is the primary mechanism to publish interactive web content in Wave.",source:"@site/docs/apps.md",slug:"/apps",permalink:"/wave/docs/apps",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/apps.md",version:"current",sidebar:"someSidebar",previous:{title:"Wave Scripts",permalink:"/wave/docs/scripts"},next:{title:"Pages",permalink:"/wave/docs/pages"}},c=[{value:"Structure",id:"structure",children:[]},{value:"Runtime context",id:"runtime-context",children:[]}],l={rightToc:c};function b(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(a.a)({},l,n,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"A Wave app is the primary mechanism to publish interactive web content in Wave."),Object(i.b)("p",null,"A Wave app can publish content and handle user interactions, unlike a ",Object(i.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/scripts"}),"Wave script"),", which can publish content but not handle user interactions."),Object(i.b)("h2",{id:"structure"},"Structure"),Object(i.b)("p",null,"Here is the skeleton of a Wave app:"),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:'title="app.py"',title:'"app.py"'}),"from h2o_wave import main, app, Q, ui\n\n@app('/foo')\nasync def serve(q: Q):\n    # Modify the page\n    q.page['qux'] = ui.some_card()\n    \n    # Save the page\n    await q.page.save()\n")),Object(i.b)("p",null,"An app typically imports four symbols from ",Object(i.b)("inlineCode",{parentName:"p"},"h2o_wave"),":"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"main"),": An ",Object(i.b)("a",Object(a.a)({parentName:"li"},{href:"https://asgi.readthedocs.io/en/latest/"}),"ASGI"),"-compatible function. See ",Object(i.b)("a",Object(a.a)({parentName:"li"},{href:"/wave/docs/deployment"}),"Deployment"),"."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"app"),": A decorator for your query handler (or request handler)."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"Q"),": A class that represents the query sent to your query handler. "),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"ui"),": The module containing the API for drawing UI elements.")),Object(i.b)("p",null,Object(i.b)("inlineCode",{parentName:"p"},"@app()")," has one required argument - the route your app is interested in (in this case ",Object(i.b)("inlineCode",{parentName:"p"},"/foo"),"). Whenever a user performs any action at ",Object(i.b)("inlineCode",{parentName:"p"},"/foo")," - access the page, reload it, click a button, access a menu, enter text, and so on - the query handler ",Object(i.b)("inlineCode",{parentName:"p"},"serve()")," is called. The details about what action was performed, and who  performed the action, are available in the argument passed to ",Object(i.b)("inlineCode",{parentName:"p"},"serve()"),", the ",Object(i.b)("em",{parentName:"p"},"query context")," ",Object(i.b)("inlineCode",{parentName:"p"},"q")," (of type ",Object(i.b)("a",Object(a.a)({parentName:"p"},{href:"api/server#q"}),"Q"),")."),Object(i.b)("p",null,"Wave apps are run using the ",Object(i.b)("inlineCode",{parentName:"p"},"wave run")," command, which accepts the name of the Python module in which ",Object(i.b)("inlineCode",{parentName:"p"},"main")," is imported from ",Object(i.b)("inlineCode",{parentName:"p"},"h2o_wave"),"."),Object(i.b)("p",null,"If your app is contained in ",Object(i.b)("inlineCode",{parentName:"p"},"app.py"),", run it like this:"),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"wave run app\n")),Object(i.b)("p",null,"If your app is contained in ",Object(i.b)("inlineCode",{parentName:"p"},"path/to/app.py"),", run it like this:"),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"wave run path.to.app\n")),Object(i.b)("p",null,"When run, the app 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 ",Object(i.b)("inlineCode",{parentName:"p"},"/foo")," to your app. "),Object(i.b)("h2",{id:"runtime-context"},"Runtime context"),Object(i.b)("p",null,"The query context ",Object(i.b)("inlineCode",{parentName:"p"},"q")," carries the following attributes:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"route"),": The route at which the action was performed (in this case, ",Object(i.b)("inlineCode",{parentName:"li"},"/foo"),")."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"page"),": A reference to the current ",Object(i.b)("a",Object(a.a)({parentName:"li"},{href:"/wave/docs/pages"}),"page")," (in this case, the page hosted at ",Object(i.b)("inlineCode",{parentName:"li"},"/foo"),")."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"site"),": A reference to the page's parent site, from which you can grab references to other pages."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"args"),": The ",Object(i.b)("em",{parentName:"li"},"event arguments"),", a dictionary-like object containing information about the user action."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"app"),", ",Object(i.b)("inlineCode",{parentName:"li"},"user"),", ",Object(i.b)("inlineCode",{parentName:"li"},"client"),": Dictionary-like objects holding ",Object(i.b)("a",Object(a.a)({parentName:"li"},{href:"/wave/docs/state"}),"server-side state"),", at the app-level, the user-level and the client-level, respectively. Here, 'client' refers to the browser tab."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"username"),": The username of the user who performed the action."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"mode"),": The ",Object(i.b)("a",Object(a.a)({parentName:"li"},{href:"/wave/docs/realtime"}),"app's realtime mode"),", one of ",Object(i.b)("inlineCode",{parentName:"li"},"unicast"),", ",Object(i.b)("inlineCode",{parentName:"li"},"multicast"),", or ",Object(i.b)("inlineCode",{parentName:"li"},"broadcast"),".")))}b.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return d}));var a=n(0),r=n.n(a);function i(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 a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=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):p(p({},t),e)),n},s=function(e){var t=b(e.components);return r.a.createElement(l.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,l=c(e,["components","mdxType","originalType","parentName"]),s=b(n),m=a,d=s["".concat(o,".").concat(m)]||s[m]||u[m]||i;return n?r.a.createElement(d,p(p({ref:t},l),{},{components:n})):r.a.createElement(d,p({ref:t},l))}));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 p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:a,o[1]=p;for(var l=2;l<i;l++)o[l]=n[l];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/d3f54ca5.e6a485f6.js b/docs/d3f54ca5.e6a485f6.js
deleted file mode 100644
index 2f8454228e..0000000000
--- a/docs/d3f54ca5.e6a485f6.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[194],{247:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return s}));var a=n(2),r=n(6),i=(n(0),n(290)),o={title:"Wave Apps"},c={unversionedId:"apps",id:"apps",isDocsHomePage:!1,title:"Wave Apps",description:"A Wave app is the primary mechanism to publish interactive web content in Wave.",source:"@site/docs/apps.md",slug:"/apps",permalink:"/wave/docs/apps",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/apps.md",version:"current",sidebar:"someSidebar",previous:{title:"Wave Scripts",permalink:"/wave/docs/scripts"},next:{title:"Pages",permalink:"/wave/docs/pages"}},l=[{value:"Listen and serve",id:"listen-and-serve",children:[]},{value:"Runtime context",id:"runtime-context",children:[]}],p={rightToc:l};function s(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(a.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"A Wave app is the primary mechanism to publish interactive web content in Wave."),Object(i.b)("p",null,"A Wave app can publish content and handle user interactions, unlike a ",Object(i.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/scripts"}),"Wave script"),", which can publish content but not handle user interactions."),Object(i.b)("p",null,"Here is the skeleton of a Wave app:"),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\nasync def serve(q: Q):\n    # Modify the page\n    q.page['qux'] = ui.some_card()\n    \n    # Save the page\n    await q.page.save()\n\n# Start listening to events\nlisten('/foo', serve)\n")),Object(i.b)("h2",{id:"listen-and-serve"},"Listen and serve"),Object(i.b)("p",null,Object(i.b)("inlineCode",{parentName:"p"},"listen()")," has two required arguments:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"The route your app is interested in (in the above case ",Object(i.b)("inlineCode",{parentName:"li"},"/foo"),")."),Object(i.b)("li",{parentName:"ul"},"The handler function to call when an event is received (in the above case, ",Object(i.b)("inlineCode",{parentName:"li"},"serve"),").")),Object(i.b)("p",null,Object(i.b)("inlineCode",{parentName:"p"},"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 ",Object(i.b)("inlineCode",{parentName:"p"},"/foo")," to your app. "),Object(i.b)("p",null,"The ",Object(i.b)("inlineCode",{parentName:"p"},"serve()")," function is called every time the user performs some action at the route ",Object(i.b)("inlineCode",{parentName:"p"},"/foo")," (access the page, reload it, click a button, access a menu, enter text, and so on). "),Object(i.b)("p",null,"The details about what action was performed, and who  performed the action, are available in the argument passed to ",Object(i.b)("inlineCode",{parentName:"p"},"serve()"),", the ",Object(i.b)("em",{parentName:"p"},"query context")," ",Object(i.b)("inlineCode",{parentName:"p"},"q")," (of type ",Object(i.b)("a",Object(a.a)({parentName:"p"},{href:"api/server#q"}),"Q"),")."),Object(i.b)("h2",{id:"runtime-context"},"Runtime context"),Object(i.b)("p",null,"The query context ",Object(i.b)("inlineCode",{parentName:"p"},"q")," carries the following attributes:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"route"),": The route at which the action was performed (in this case, ",Object(i.b)("inlineCode",{parentName:"li"},"/foo"),")."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"page"),": A reference to the current ",Object(i.b)("a",Object(a.a)({parentName:"li"},{href:"/wave/docs/pages"}),"page")," (in this case, the page hosted at ",Object(i.b)("inlineCode",{parentName:"li"},"/foo"),")."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"site"),": A reference to the page's parent site, from which you can grab references to other pages."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"args"),": The ",Object(i.b)("em",{parentName:"li"},"event arguments"),", a dictionary-like object containing information about the user action."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"app"),", ",Object(i.b)("inlineCode",{parentName:"li"},"user"),", ",Object(i.b)("inlineCode",{parentName:"li"},"client"),": Dictionary-like objects holding ",Object(i.b)("a",Object(a.a)({parentName:"li"},{href:"/wave/docs/state"}),"server-side state"),", at the app-level, the user-level and the client-level, respectively. Here, 'client' refers to the browser tab."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"username"),": The username of the user who performed the action."),Object(i.b)("li",{parentName:"ul"},Object(i.b)("inlineCode",{parentName:"li"},"mode"),": The ",Object(i.b)("a",Object(a.a)({parentName:"li"},{href:"/wave/docs/realtime"}),"app's realtime mode"),", one of ",Object(i.b)("inlineCode",{parentName:"li"},"unicast"),", ",Object(i.b)("inlineCode",{parentName:"li"},"multicast"),", or ",Object(i.b)("inlineCode",{parentName:"li"},"broadcast"),".")))}s.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return b})),n.d(t,"b",(function(){return d}));var a=n(0),r=n.n(a);function i(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 a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=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<i;p++)o[p]=n[p];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/d4ee2b4f.25e52c39.js b/docs/d4ee2b4f.e3cdbd48.js
similarity index 92%
rename from docs/d4ee2b4f.25e52c39.js
rename to docs/d4ee2b4f.e3cdbd48.js
index ef15b66f4d..fe8118e868 100644
--- a/docs/d4ee2b4f.25e52c39.js
+++ b/docs/d4ee2b4f.e3cdbd48.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[195],{248:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),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(290)),i={title:"Template / Data"},c={unversionedId:"examples/template-data",id:"examples/template-data",isDocsHomePage:!1,title:"Template / Data",description:"Update a template card's data periodically.",source:"@site/docs/examples/template-data.md",slug:"/examples/template-data",permalink:"/wave/docs/examples/template-data",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/template-data.md",version:"current",sidebar:"someSidebar",previous:{title:"Template",permalink:"/wave/docs/examples/template"},next:{title:"Markdown",permalink:"/wave/docs/examples/markdown"}},p=[],l={rightToc:p};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Update a template card's data periodically."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(437).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import time\nimport random\nfrom h2o_wave import site, ui\n\npage = site['/demo']\npage.drop()\n\nmenu = '''\n<ol>\n{{#each dishes}}\n<li><strong>{{name}}</strong> costs {{price}}</li>\n{{/each}}\n</ol\n'''\n\nmenu_card = page.add('template_example', ui.template_card(\n    box=f'1 1 2 2',\n    title='Surge-priced Menu',\n    content=menu,\n    data=dict(dishes=[\n        dict(name='Spam', price='$2.00'),\n        dict(name='Ham', price='$3.45'),\n        dict(name='Eggs', price='$1.75'),\n    ]),\n))\npage.save()\n\n\ndef rand_price(): return f'${random.randrange(0, 4)}.{random.randrange(10, 99)}'\n\n\ndishes = menu_card.data.dishes\nfor i in range(98, 2, -1):\n    time.sleep(1)\n    dishes[0].price = rand_price()\n    dishes[1].price = rand_price()\n    dishes[2].price = rand_price()\n    page.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 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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;l++)i[l]=n[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},437:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/template-data-1b5f5707f248dfd5a606e722345ad2a2.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[197],{250:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),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(292)),i={title:"Template / Data"},c={unversionedId:"examples/template-data",id:"examples/template-data",isDocsHomePage:!1,title:"Template / Data",description:"Update a template card's data periodically.",source:"@site/docs/examples/template-data.md",slug:"/examples/template-data",permalink:"/wave/docs/examples/template-data",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/template-data.md",version:"current",sidebar:"someSidebar",previous:{title:"Template",permalink:"/wave/docs/examples/template"},next:{title:"Markdown",permalink:"/wave/docs/examples/markdown"}},p=[],l={rightToc:p};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},l,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Update a template card's data periodically."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(442).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import time\nimport random\nfrom h2o_wave import site, ui\n\npage = site['/demo']\npage.drop()\n\nmenu = '''\n<ol>\n{{#each dishes}}\n<li><strong>{{name}}</strong> costs {{price}}</li>\n{{/each}}\n</ol\n'''\n\nmenu_card = page.add('template_example', ui.template_card(\n    box=f'1 1 2 2',\n    title='Surge-priced Menu',\n    content=menu,\n    data=dict(dishes=[\n        dict(name='Spam', price='$2.00'),\n        dict(name='Ham', price='$3.45'),\n        dict(name='Eggs', price='$1.75'),\n    ]),\n))\npage.save()\n\n\ndef rand_price(): return f'${random.randrange(0, 4)}.{random.randrange(10, 99)}'\n\n\ndishes = menu_card.data.dishes\nfor i in range(98, 2, -1):\n    time.sleep(1)\n    dishes[0].price = rand_price()\n    dishes[1].price = rand_price()\n    dishes[2].price = rand_price()\n    page.save()\n")))}s.isMDXComponent=!0},292: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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;l++)i[l]=n[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},442:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/template-data-1b5f5707f248dfd5a606e722345ad2a2.png"}}]);
\ No newline at end of file
diff --git a/docs/d589d3a7.36aebee9.js b/docs/d589d3a7.36aebee9.js
deleted file mode 100644
index 2537e53632..0000000000
--- a/docs/d589d3a7.36aebee9.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[196],{249:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return o})),a.d(t,"metadata",(function(){return s})),a.d(t,"rightToc",(function(){return l})),a.d(t,"default",(function(){return u}));var n=a(2),r=a(6),i=(a(0),a(290)),o={title:"Introduction"},s={unversionedId:"getting-started",id:"getting-started",isDocsHomePage:!1,title:"Introduction",description:"H2O Wave lets you build and deploy amazing, realtime analytics with dramatically less effort.",source:"@site/docs/getting-started.md",slug:"/getting-started",permalink:"/wave/docs/getting-started",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/getting-started.md",version:"current",sidebar:"someSidebar",previous:{title:"Contributing",permalink:"/wave/docs/contributing"},next:{title:"Installation",permalink:"/wave/docs/installation"}},l=[{value:"What is H2O Wave?",id:"what-is-h2o-wave",children:[]},{value:"What can I do with it?",id:"what-can-i-do-with-it",children:[]},{value:"How do I use it?",id:"how-do-i-use-it",children:[]},{value:"Show me some code!",id:"show-me-some-code",children:[]},{value:"What&#39;s included?",id:"whats-included",children:[]},{value:"In Summary",id:"in-summary",children:[]}],c={rightToc:l};function u(e){var t=e.components,o=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},c,o,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"H2O Wave lets you build and deploy amazing, realtime analytics with dramatically less effort."),Object(i.b)("h2",{id:"what-is-h2o-wave"},"What is H2O Wave?"),Object(i.b)("p",null,"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."),Object(i.b)("p",null,"It excels at capturing data, visualizations, and graphics from multiple sources and broadcasting them live over the web."),Object(i.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(i.b)("source",{src:a(506).default,type:"video/mp4"})),Object(i.b)("h2",{id:"what-can-i-do-with-it"},"What can I do with it?"),Object(i.b)("p",null,"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."),Object(i.b)("p",null,"You can use H2O Wave for:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Dashboards and visualizations for live monitoring."),Object(i.b)("li",{parentName:"ul"},"Live information displays: news, tickers, health, or performance data."),Object(i.b)("li",{parentName:"ul"},"Apps that require instant notifications, updates, events, or alerts."),Object(i.b)("li",{parentName:"ul"},"Apps that involve messaging: chat, bots, etc."),Object(i.b)("li",{parentName:"ul"},"Collaborative apps: whiteboards, sharing, etc.")),Object(i.b)("p",null,"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."),Object(i.b)("h2",{id:"how-do-i-use-it"},"How do I use it?"),Object(i.b)("p",null,"H2O Wave's mental model is simple, but powerful",Object(i.b)("sup",Object(n.a)({parentName:"p"},{id:"fnref-1"}),Object(i.b)("a",Object(n.a)({parentName:"sup"},{href:"#fn-1",className:"footnote-ref"}),"1")),": "),Object(i.b)("ol",null,Object(i.b)("li",{parentName:"ol"},"Your instance holds a collection of pages."),Object(i.b)("li",{parentName:"ol"},"To change a page, simply grab a reference to a page, change it, and save it. ")),Object(i.b)("p",null,"That's it. Your changes are now visible to everyone."),Object(i.b)("p",null,"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. "),Object(i.b)("p",null,"The API is concise and elegant, freeing you to create in broad strokes, tackling high level ideas first and polishing up the details later."),Object(i.b)("h2",{id:"show-me-some-code"},"Show me some code!"),Object(i.b)("p",null,"Here's a bean counter. Clicking the button increments the bean count:"),Object(i.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(i.b)("source",{src:a(507).default,type:"video/mp4"})),Object(i.b)("p",null,"And here's how it's written:"),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:"{8-9,16}","{8-9,16}":!0}),"from h2o_wave import Q, listen, ui\n\nbean_count = 0\n\nasync def serve(q: Q):\n    global bean_count\n    # Was the 'increment' button clicked?\n    if q.args.increment:\n        bean_count += 1\n\n    # Display a form on the page\n    q.page['beans'] = ui.form_card(\n        box='1 1 1 2',\n        items=[\n            ui.text_xl('Beans!'),\n            ui.button(name='increment', label=f'{bean_count} beans'),\n        ],\n    )\n    \n    # Save the page\n    await q.page.save()\n\nlisten('/counter', serve)\n")),Object(i.b)("h2",{id:"whats-included"},"What's included?"),Object(i.b)("p",null,"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."),Object(i.b)("p",null,"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 ",Object(i.b)("em",{parentName:"p"},"Wave Server"),") is written in Go, a ~10MB static executable without runtime dependencies",Object(i.b)("sup",Object(n.a)({parentName:"p"},{id:"fnref-2"}),Object(i.b)("a",Object(n.a)({parentName:"sup"},{href:"#fn-2",className:"footnote-ref"}),"2")),". It currently ships with a Python language driver, but is language-agnostic (an R language driver is under development)."),Object(i.b)("p",null,"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."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{}),"                                      +---------+\n                       +-------------\x3e+ app1.py |\n                       |              +---------+\n                       |\n+---------+       +----+-----+        +---------+\n| Browser +------\x3e+  Server  +-------\x3e+ app2.py |\n+---------+       +----+-----+        +---------+\n                       |\n                       |              +---------+\n                       +-------------\x3e+ app3.py |\n                                      +---------+\n\n")),Object(i.b)("h2",{id:"in-summary"},"In Summary"),Object(i.b)("p",null,"H2O Wave is rapid application development for a more... civilized age",Object(i.b)("sup",Object(n.a)({parentName:"p"},{id:"fnref-3"}),Object(i.b)("a",Object(n.a)({parentName:"sup"},{href:"#fn-3",className:"footnote-ref"}),"3")),"."),Object(i.b)("p",null,"Also, this page was mostly hyperbole, so let's download it and take it for a spin, shall we."),Object(i.b)("hr",null),Object(i.b)("p",null,Object(i.b)("sup",Object(n.a)({parentName:"p"},{id:"fnref-1"}),Object(i.b)("a",Object(n.a)({parentName:"sup"},{href:"#fn-1",className:"footnote-ref"}),"1"))," The model parallels ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Retained_mode"}),"retained mode")," graphics, with compositing performed on an remote server."),Object(i.b)("p",null,Object(i.b)("sup",Object(n.a)({parentName:"p"},{id:"fnref-2"}),Object(i.b)("a",Object(n.a)({parentName:"sup"},{href:"#fn-2",className:"footnote-ref"}),"2"))," Runs anywhere Go executables run, which is ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://gist.github.com/asukakenji/f15ba7e588ac42795f421b48b8aede63"}),"almost everywhere"),"."),Object(i.b)("p",null,Object(i.b)("sup",Object(n.a)({parentName:"p"},{id:"fnref-3"}),Object(i.b)("a",Object(n.a)({parentName:"sup"},{href:"#fn-3",className:"footnote-ref"}),"3"))," Hat tip to ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://xkcd.com/297/"}),"xkcd"),"."))}u.isMDXComponent=!0},290: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 i(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(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 s(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?o(Object(a),!0).forEach((function(t){i(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function l(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=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<i;c++)o[c]=a[c];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,a)}d.displayName="MDXCreateElement"},506:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/medias/getting-started__dashboard-6952c89912f2a5fd750d8f6f33cc422a.mp4"},507:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/medias/getting-started__beans-99644dd0b9c4ddeb30b94cb8668781b4.mp4"}}]);
\ No newline at end of file
diff --git a/docs/d589d3a7.7779cab6.js b/docs/d589d3a7.7779cab6.js
new file mode 100644
index 0000000000..f9795985b9
--- /dev/null
+++ b/docs/d589d3a7.7779cab6.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[198],{251:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return o})),a.d(t,"metadata",(function(){return s})),a.d(t,"rightToc",(function(){return c})),a.d(t,"default",(function(){return p}));var n=a(2),r=a(6),i=(a(0),a(292)),o={title:"Introduction"},s={unversionedId:"getting-started",id:"getting-started",isDocsHomePage:!1,title:"Introduction",description:"H2O Wave lets you build and deploy amazing, realtime analytics with dramatically less effort.",source:"@site/docs/getting-started.md",slug:"/getting-started",permalink:"/wave/docs/getting-started",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/getting-started.md",version:"current",sidebar:"someSidebar",previous:{title:"Contributing",permalink:"/wave/docs/contributing"},next:{title:"Installation",permalink:"/wave/docs/installation"}},c=[{value:"What is H2O Wave?",id:"what-is-h2o-wave",children:[]},{value:"What can I do with it?",id:"what-can-i-do-with-it",children:[]},{value:"How do I use it?",id:"how-do-i-use-it",children:[]},{value:"Show me some code!",id:"show-me-some-code",children:[]},{value:"What&#39;s included?",id:"whats-included",children:[]},{value:"In Summary",id:"in-summary",children:[]}],l={rightToc:c};function p(e){var t=e.components,o=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},l,o,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"H2O Wave lets you build and deploy amazing, realtime analytics with dramatically less effort."),Object(i.b)("h2",{id:"what-is-h2o-wave"},"What is H2O Wave?"),Object(i.b)("p",null,"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."),Object(i.b)("p",null,"It excels at capturing data, visualizations, and graphics from multiple sources and broadcasting them live over the web."),Object(i.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(i.b)("source",{src:a(514).default,type:"video/mp4"})),Object(i.b)("h2",{id:"what-can-i-do-with-it"},"What can I do with it?"),Object(i.b)("p",null,"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."),Object(i.b)("p",null,"You can use H2O Wave for:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Dashboards and visualizations for live monitoring."),Object(i.b)("li",{parentName:"ul"},"Live information displays: news, tickers, health, or performance data."),Object(i.b)("li",{parentName:"ul"},"Apps that require instant notifications, updates, events, or alerts."),Object(i.b)("li",{parentName:"ul"},"Apps that involve messaging: chat, bots, etc."),Object(i.b)("li",{parentName:"ul"},"Collaborative apps: whiteboards, sharing, etc.")),Object(i.b)("p",null,"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."),Object(i.b)("h2",{id:"how-do-i-use-it"},"How do I use it?"),Object(i.b)("p",null,"H2O Wave's mental model is simple, but powerful",Object(i.b)("sup",Object(n.a)({parentName:"p"},{id:"fnref-1"}),Object(i.b)("a",Object(n.a)({parentName:"sup"},{href:"#fn-1",className:"footnote-ref"}),"1")),": "),Object(i.b)("ol",null,Object(i.b)("li",{parentName:"ol"},"Your instance holds a collection of pages."),Object(i.b)("li",{parentName:"ol"},"To change a page, simply grab a reference to a page, change it, and save it. ")),Object(i.b)("p",null,"That's it. Your changes are now visible to everyone."),Object(i.b)("p",null,"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. "),Object(i.b)("p",null,"The API is concise and elegant, freeing you to create in broad strokes, tackling high level ideas first and polishing up the details later."),Object(i.b)("h2",{id:"show-me-some-code"},"Show me some code!"),Object(i.b)("p",null,"Here's a bean counter. Clicking the button increments the bean count:"),Object(i.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(i.b)("source",{src:a(515).default,type:"video/mp4"})),Object(i.b)("p",null,"And here's how it's written:"),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:"{9-10,17}","{9-10,17}":!0}),"from h2o_wave import Q, main, app, ui\n\nbean_count = 0\n\n@app('/counter')\nasync def serve(q: Q):\n    global bean_count\n    # Was the 'increment' button clicked?\n    if q.args.increment:\n        bean_count += 1\n\n    # Display a form on the page\n    q.page['beans'] = ui.form_card(\n        box='1 1 1 2',\n        items=[\n            ui.text_xl('Beans!'),\n            ui.button(name='increment', label=f'{bean_count} beans'),\n        ],\n    )\n    \n    # Save the page\n    await q.page.save()\n")),Object(i.b)("h2",{id:"whats-included"},"What's included?"),Object(i.b)("p",null,"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."),Object(i.b)("p",null,"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 ",Object(i.b)("em",{parentName:"p"},"Wave server"),") is written in Go, a ~10MB static executable without runtime dependencies",Object(i.b)("sup",Object(n.a)({parentName:"p"},{id:"fnref-2"}),Object(i.b)("a",Object(n.a)({parentName:"sup"},{href:"#fn-2",className:"footnote-ref"}),"2")),". It currently ships with a Python language driver, but is language-agnostic (an R language driver is under development)."),Object(i.b)("p",null,"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."),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{}),"                                      +---------+\n                       +-------------\x3e+ app1.py |\n                       |              +---------+\n                       |\n+---------+       +----+-----+        +---------+\n| Browser +------\x3e+  Server  +-------\x3e+ app2.py |\n+---------+       +----+-----+        +---------+\n                       |\n                       |              +---------+\n                       +-------------\x3e+ app3.py |\n                                      +---------+\n\n")),Object(i.b)("h2",{id:"in-summary"},"In Summary"),Object(i.b)("p",null,"H2O Wave is rapid application development for a more... civilized age",Object(i.b)("sup",Object(n.a)({parentName:"p"},{id:"fnref-3"}),Object(i.b)("a",Object(n.a)({parentName:"sup"},{href:"#fn-3",className:"footnote-ref"}),"3")),"."),Object(i.b)("p",null,"Also, this page was mostly hyperbole, so let's download it and take it for a spin, shall we."),Object(i.b)("hr",null),Object(i.b)("p",null,Object(i.b)("sup",Object(n.a)({parentName:"p"},{id:"fnref-1"}),Object(i.b)("a",Object(n.a)({parentName:"sup"},{href:"#fn-1",className:"footnote-ref"}),"1"))," The model parallels ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Retained_mode"}),"retained mode")," graphics, with compositing performed on an remote server."),Object(i.b)("p",null,Object(i.b)("sup",Object(n.a)({parentName:"p"},{id:"fnref-2"}),Object(i.b)("a",Object(n.a)({parentName:"sup"},{href:"#fn-2",className:"footnote-ref"}),"2"))," Runs anywhere Go executables run, which is ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://gist.github.com/asukakenji/f15ba7e588ac42795f421b48b8aede63"}),"almost everywhere"),"."),Object(i.b)("p",null,Object(i.b)("sup",Object(n.a)({parentName:"p"},{id:"fnref-3"}),Object(i.b)("a",Object(n.a)({parentName:"sup"},{href:"#fn-3",className:"footnote-ref"}),"3"))," Hat tip to ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://xkcd.com/297/"}),"xkcd"),"."))}p.isMDXComponent=!0},292:function(e,t,a){"use strict";a.d(t,"a",(function(){return u})),a.d(t,"b",(function(){return m}));var n=a(0),r=a.n(n);function i(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(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 s(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?o(Object(a),!0).forEach((function(t){i(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function c(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var l=r.a.createContext({}),p=function(e){var t=r.a.useContext(l),a=t;return e&&(a="function"==typeof e?e(t):s(s({},t),e)),a},u=function(e){var t=p(e.components);return r.a.createElement(l.Provider,{value:t},e.children)},b={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,l=c(e,["components","mdxType","originalType","parentName"]),u=p(a),d=n,m=u["".concat(o,".").concat(d)]||u[d]||b[d]||i;return a?r.a.createElement(m,s(s({ref:t},l),{},{components:a})):r.a.createElement(m,s({ref:t},l))}));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 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 l=2;l<i;l++)o[l]=a[l];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,a)}d.displayName="MDXCreateElement"},514:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/medias/getting-started__dashboard-6952c89912f2a5fd750d8f6f33cc422a.mp4"},515:function(e,t,a){"use strict";a.r(t),t.default=a.p+"assets/medias/getting-started__beans-99644dd0b9c4ddeb30b94cb8668781b4.mp4"}}]);
\ No newline at end of file
diff --git a/docs/d610846f.db356212.js b/docs/d610846f.db356212.js
deleted file mode 100644
index b9de762b81..0000000000
--- a/docs/d610846f.db356212.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[197],{250:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return l})),r.d(t,"metadata",(function(){return c})),r.d(t,"rightToc",(function(){return i})),r.d(t,"default",(function(){return p}));var n=r(2),o=r(6),a=(r(0),r(290)),l={slug:"hello-world",title:"Hello",author:"Endilie Yacop Sucipto",author_title:"Maintainer of Docusaurus",author_url:"https://github.com/endiliey",author_image_url:"https://avatars1.githubusercontent.com/u/17883920?s=460&v=4",tags:["hello","docusaurus"]},c={permalink:"/wave/blog/hello-world",editUrl:"https://github.com/facebook/docusaurus/edit/master/website/blog/blog/2019-05-29-hello-world.md",source:"@site/blog/2019-05-29-hello-world.md",description:"Welcome to this blog. This blog is created with Docusaurus 2 alpha.",date:"2019-05-29T00:00:00.000Z",tags:[{label:"hello",permalink:"/wave/blog/tags/hello"},{label:"docusaurus",permalink:"/wave/blog/tags/docusaurus"}],title:"Hello",readingTime:.12,truncated:!0,prevItem:{title:"Welcome",permalink:"/wave/blog/welcome"},nextItem:{title:"Hola",permalink:"/wave/blog/hola"}},i=[],u={rightToc:i};function p(e){var t=e.components,r=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},u,r,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Welcome to this blog. This blog is created with ",Object(a.b)("a",Object(n.a)({parentName:"p"},{href:"https://v2.docusaurus.io/"}),Object(a.b)("strong",{parentName:"a"},"Docusaurus 2 alpha")),"."),Object(a.b)("p",null,"This is a test post."),Object(a.b)("p",null,"A whole bunch of other information."))}p.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return s})),r.d(t,"b",(function(){return m}));var n=r(0),o=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 l(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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function i(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=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<a;u++)l[u]=r[u];return o.a.createElement.apply(null,l)}return o.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/d8689276.205def1e.js b/docs/d8689276.205def1e.js
deleted file mode 100644
index cf6b4afb83..0000000000
--- a/docs/d8689276.205def1e.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[198],{251:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return s})),n.d(t,"metadata",(function(){return o})),n.d(t,"rightToc",(function(){return b})),n.d(t,"default",(function(){return p}));var r=n(2),i=n(6),a=(n(0),n(290)),s={title:"Form / Spinbox"},o={unversionedId:"examples/spinbox",id:"examples/spinbox",isDocsHomePage:!1,title:"Form / Spinbox",description:"Use a spinbox to allow users to incrementally adjust a value in small steps.",source:"@site/docs/examples/spinbox.md",slug:"/examples/spinbox",permalink:"/wave/docs/examples/spinbox",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/spinbox.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Toggle",permalink:"/wave/docs/examples/toggle"},next:{title:"Form / Slider",permalink:"/wave/docs/examples/slider"}},b=[],u={rightToc:b};function p(e){var t=e.components,s=Object(i.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},u,s,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use a spinbox to allow users to incrementally adjust a value in small steps."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(428).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'spinbox={q.args.spinbox}'),\n            ui.text(f'spinbox_disabled={q.args.spinbox_disabled}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.spinbox(name='spinbox', label='Standard spinbox', min=0, max=100, step=10, value=30),\n            ui.spinbox(name='spinbox_disabled', label='Disabled spinbox', min=0, max=100, step=10, value=30,\n                       disabled=True),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}p.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return c})),n.d(t,"b",(function(){return R}));var r=n(0),i=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 s(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 o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?s(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function b(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=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<a;u++)s[u]=n[u];return i.a.createElement.apply(null,s)}return i.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},428:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjwAAABgCAYAAAAZ3Kg/AAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjExOjI4IFBNIFBEVJtn38wAABp0SURBVHic7d15XJV13v/x12GRwya7eFhENEXFBTR3ETQtt8bUUmtS0/ZyqfS+f9PMY9b70TZZmUt131Nq2bRaM5OOlruClisoKgoooLIqcFhE9vP7Az2JokHCUKf386/jub7X9/pchz+ut9/v97oug8VisSAiIiJiw+xauwARERGRlqbAIyIiIjZPgUdERERsngKPiIiI2DwFHhEREbF5CjwiIiJi8xR4RERExOYp8IiIiIjNU+ARERERm6fAIyIiIjZPgUdERERsngKPiIiI2DwFHhEREbF5Dq1dgPx8xMXu4rNPP6GkpKS1SxERkV8wd3d3pk6bzrCo4Y3eR4FHGu2zTz/h2YWLCA3t1NqliIjIL1ha2mneeG1xkwKPprSk0UpKShR2RESk1YWGdmrybIMCj4iIiNg8BR4RERGxeQo8IiIi8pNQ2oI3xSjwiIiISKuLjz/EokXPkRAf3yL9K/CIiIhIq4qPP8Rby5fh5eXFiuVLWyT0KPCIiIhIq7kSdoYOi+KFF19myNBhLRJ6FHj+w0pLS/nwwzXk5ua2dikiIiKtKi3ttDXszHpoNnZ2djw0e4419KSlnW62YzUp8NTW1vLhmjVMmTyJQQMHcOfoUbz04gsUFxU1W0FN0f/2fky9796fTb8AGzds4I3XX+eDD95v9D79+kby4K8faJF6REREWktISEdmzHyIWQ/NxmAwAGAwGHho9hxmzHyIkJCOzXasJgWeN5cs4Y03XufSpXJGjBhJu3btWLt2LXPnzcVisQCwePGr9OsbSUJCyyw6+rm7a8wYnn56Lg8+OKO1S2kxSUlJPPbYo0QNG8odI0fwu98+T0FBgXX7kSNHmPHgrxk8aCDjx41l7eeft2K1IiLSWuzs7BgeHW0NO1cYDAaGR0djZ9d8E1GN7qmmpobPPvsUDw8P1q5dy0svv8yHf/+I6Ohojh09ytGjR5utqP+EKwHtP61t27bMefhhTCZTqxy/pZWVlfHUU0/SvXt3Pv3sc956620yMjJ46cUXASguKmL+vLkMGDCQtV98ybPPLeT111/j22/3tHLlIiJiyxodeKqqqqiqqsLewQGuSmIvv/JXduzcRY8ePXj+N7/h448+AuDhOXN48onHre3WffUV06dNZcjgQUz81d18+OEa67ZXXn6Zfn0j2bFjh/V//jNnPMip1FRrm4KCAhYufI5hQ4dw75TJHDx48LoaExMTeezRRxgeNYzRo0fx4gsvUF5eDsCWLVvo1zeSt996izlzZjOg/+1UVlY2qt+rVVdX8+abSxg75i4GDxrI1PvuZfPmTQCYzWb69Y1k4XPPsmrlSu4cPYqRI2JYsuQNampq6tWxetWqRp/7FV999S/GjxtL9PAoXnrxBSorK63bcnJyWLRwIdHDo4geHsWihQvJzs4GICEhnn59I/ndb5+3tn94zhwGDRzA2bNnb3q+TVVWVsbDcx5mwYJnCAgIIKxbN+65ZxLJyScB2LxlM94+PsybP5/AwEBGjRrFpEmT+PKLL5u1DhERkas1OvAYjUaGDB1KQX4+06bex1srVnD48GEcHR1xd3fH3t6ecePHWdvHxMQwZUrdOpitW7fypz/9EVdXN5588il8ff144/XX+fe/19c7xl9feYWePXsxZMgQjh07xu9+91vrtkWLFrJj+3Z6hIdze//+/PlPf6o3SpObm8vjjz1KZmYms2fPYcjgwXzxxVr++sor9Y7x0Ud/x8HenslTpmBnZ/eD/V5r1cqVfPD++3Tp2pWn587F3t6e3z7/PCdPnrS2OXToENt3bOf++x/AZApgzQcf8L/vvHPT3/dm5w6QmZXFu397l5gRI2jf3sTatWtZ/OqrAJRdvMijjzzMzp07GDN2LOPGjWfXrp088vAcLl68SEREJKNGjeKbb74hJSWFuNhYEhLiuf+BBwgODr5pXU3l6+vLgzNmWIchMzMz2bDh3wwbNgyom+7qGR5eb5/wnj05fvxYs9YhIiJytSa9Lf2ll15m2bKlrF+3jvfee5f33nuXoKAgfv/7P3B7//5ERQ3n/gce4OOPPmLGzJlEREQC0K1bGH99dTFDhw7FaDTSt18/Zs54kH179zJ+/ARr/w/NfoipU6cBMH3aVFJSUjCbzeTl5XE4IYGwsDDeeed/sbOzY/v2bSxauNC6r9Fo5NVXF9MxtCOBgUHU1taybds29u79rt45REREsGz5CgCSk5N/sN9rnT5dt2J89uzZREb25a67xnDiRBJ+vr7WNrW1tSxbthwPDw8mTpzIxIm/Yu3az3niySdv2O+Nzt3T0xOAi6WlrF79PiEhIZjNZiZPuod169bx7HPPsWHDBrKyspg5axYLFjwDgIurC6tXrWL9+nVMmzad+QueYdeuXSxfvoy83Fy8vb155JFHb/4HvwUZGRlMve9eampqmDx5CgsX/RcA5kLzddN5np5eFBYWtlgtIiIiTVoN5Orqym9+8zxbt21nxYq3mHD33WRlZfHMMwus0ycNCQgIxNHRgSVL3uCpp55k/ry5AFRWVtVrFxbWzfq5Q4cOQN0UyZWQMXjIEOvIwdChw+otZvLw8MDH14cvv/iSZ595hkn3TKSsrIzKqvrHiIzsa/3cmH6vddddd2FnZ8cTjz/OnDmz+fTTTwgwBeDt42Nt07VrVzw8PADw9vGhS5cuFBUV3fSifqNzvyI4OJiQkBAAPD096dW7N5WVFWRlZpJ0IgmAYUOHWdtHRUUBdSMqAIGBgdx//wPExcaSnJzMU089jaur6w3ruVUBAQF89PEnLH7tdRIOJ/Diiy8AYKHh0bNrF6yJiIg0p0YHngsXLhAbu4uMjAycnJwYNHgwf/7zX5g5axaXLl1i//59N9z3zTeX8Owzz5CSnELfyL488UTDIx0/uBr7qmvltdNOu3btZMaDD7J16xZCQ0N57PHH8fb2btwxbtLvtWJGjODjTz5h1qyHcHBw4MM1a5g+fRp79ny/6PbKep0rqq4JXQ35oXO/tqp6dTZQ85XtBr4PErWW2qv6a9lF246OjnTu3JmYmBj++Ic/8o8vv6SgoABvL28KzfWDX2FhQYN/KxERkebS6MCTmZnJMwsW8D9/+QvV1dVA3UX1wvnzALRp4wR8f4Gtrqq27rt50yZMJhPvrVzJI48+2uR1I506dQJgz57d1jARGxtLbe33F/CtW7ZQW1vLW2+/w/wFCxgRM4LS0tJb7vda3367h2PHjvHU00/zf//3N/78l/+htraW2F27rG2Sk5OtDxbMysoiNfUUnp6eeHl5Nem8r3bu7FnS09OBusXRiYmJODk5ERgURPfuPQDYFft9DbG7YgEI61Y3cpSRkcEnH3/MgAEDCA0NZcXy5ZS0wEva4mJjmTZ1ar3f0M7eHqgbxQkPDyfxyJF6+xxOOEzPnr2avRYREZErGr2Gp3fv3vTq1Yv4+EPcO2UyYd26kZ6WTmpqCiaTiejoaAD8/f0BWLr0Tabcey8TJ96Dr68fSUnHWbZsKR5tPfjii7VNKrJr16706dOHw4cP8+QTj9Opc2d2x8Xh6OhobePr6wfAsqVLiYiMYOOGDcDNp0ka0++1tmzezD//+U/2799PeI9wNn690fr7XNGmTRuefPIJBg8eTFxsLJWVFcycNfOWnifg6ubG/HnziBoexYH9ByguKuLe++7DaDQybtw4Vq9exUd//3vdm2YNBr7617/w92/PhAl1a6Ree20xNTU1PLdwEbk5OSxYMJ933n6L//rv//eja2pIj/Bw8vJyeeWVl5k5cyZlZZdYsuQNevbshZeXF6NGj2bp0jdZsuQNpk6dxuGEBNat+4q3f2BRt4iIyK1o9BXYYDCwdNlypk+fTmVlFTu2byc//wJjxo7l3fdW4uzsDMDkKVMYNWoUZ86c4euNdWHghRdfpE+fPnz26aesX7+OefPmN7nQxYtfIyYmhuPHj7Nv3z5+/4c/4uTkZN3+yKOPMn78eL7b+x2rVq5kzNhxBAcH3XK/11r0X//NfVOnsn/fPt58cwkXS0t5/vnfMnbc93eo9egRzqR7JrF50yaKS0qYOWsWjz/+RJPP+WodgjswZ84ctm/bRk5ONvfedx8LFy4CwMXVlb+9+x7R0TFs3ryZzZs2ER0dw3srV+Lm5sbu3bvZHRfHhAl306VLF4ZFRTFw4EA+//zzBm9/vxXe3t4sX76CtLQ0pk+fzhOPP4anpyd/vXxHmZubG8uWr+DQwYNMnnQPb7/9Fr//wx+sC9xFRERagsHSWk/gs0Fms5k7Ro5g8OAhLF+xorXLaXazZ81g1ftrfrihiIhII9TW1hIXG0vU8OH1bl6xWCzE7trFsKioG86ONPWapJeHioiISKs4k5HBmg9W88HqVdabbSwWC++vXsWaD1ZzJiOj2Y6lwCMiIiKtomNoKHPnzScuLtYaet5fvYrdcbHMnb+AjqGhzXasJj14UG7O09OTg4f00lQREZHG6hMRydx581m+bCknTp7gwvnzzJ03nz59Ipr1OBrhERERkVbVJyKSp+fOp7CwkKfnzqdPC9zIohEeERERaXURkZEsXvw6bu7uLdK/RnhERETkJ6Glwg4o8IiIiMgvgAKPiIiI2DwFHmk0d3d30tJOt3YZIiLyC5eWdhr3Jk5/adGyNNrUadN547XFLfLSURERkcZyd3dn6rTpTdpHr5YQERERm6cpLREREbF5CjwiIiJi8xR4RERExOYp8IiIiIjNU+ARERERm6fAIyIiIjZPgUdERERsngKPiIiI2DwFHhEREbF5erWE3FRpSXFrlyAiItIgN/e2jW6rER4RERGxeQo8IiIiYvMUeERERMTmKfCIiIiIzVPgERERkZ+EmpqaFutbgUdERERaXWlpCampKZSWlrZI/wo8IiIi0qpKS0s4d+4cjg6OnDt3tkVCjwKPiIiItJorYcfDw5PQTp3x8PBskdDTIoEnOyuT9LS0luj6Zys1JZnz5/NauwwREZGfjPLycmvYMZlMGAxgMpmsoae8vLzZjtWkJy1/sHql9bPBYMDFxZXAoCB694nAxcXFui12107Ky8sJCAygTRunWyrwcEI8hxPiGXnHaIKCgxts89U//0FJSTG/njHrRx9n8zdfk52dxbTpD+BkNP7ofhpSZDazZ3ccXl7e3D3xnkbt883XG8jNyeGBX8/AwdGxWesRERH5KXByMtK+vQlPT89635tMJpydnXFyar7rcZNfLeHo6EhgUBCWWgtms5nkkyc4eyaDMWPH49627hHPQ4ZGUVFRfsthx1Z4eHoyYOAgvLy9W7uUFlNRUcGRI4fJzc2ltqYGTy8vevXqjZeXF1CX4uPjD5GXm4u9vT1BwcH07t0HOzvNqoqI/FIZDFwXdq640fc/VpMDj7OLC8OjR1j/ffJEEnu/+5bvvtvD6DvHANxwJOaXrFv3Hq1dQovav28fAMOHR2Nvb8+JpOPs2R3HuPETMBgM7Nv7Hfb29owYeQc11dXs27ePJIfjhPfs2cqVi4jIL8Etvzw0rFt3Tp86RXZWFhcvXsTV1fW6KaZTqSkcTUykpKQYo7Mzt93WhYjIvtY+TqWmcPzYMYqLi3BxcSGsW3d6hNe/EJaXl7N18yZy83Jxd3On/4CBtDeZGqyppqaG+EMHSTt9iurqanx8fenXrz8+vr4AWGprOXToIKkpydjb2xPeq/dNz7G2ttbaX0VFBe7ubekdEUHHjqFA3ZRaWdlFoqJj2L93L2VlFzEFBDJ4yFCMRiMV5eV8+slHBAQGMmr0XWSkp7NzxzZu7z+AvLw8sjLPYTQa6Xd7f0Iu93nFhfwL7N+3l5LiYtq182fwkKG4urlddZ4HSDt9msrKSry9fYjs14/27U1UVlbyjy/X4uDgwKTJ92JnZ0f8oYMkHjnMsKjhdOp8WxP+yj/MZDJhCjDh4uIKQNewMDIyMigvL6e6upoLFy4wbvwEjJenC3v16sWh+EP0CA/HYDA0ay0iIiLXapb5hPam9gAUFhRcty03N4fdcbEY7AxE9u2Hj48vRw4nkJR0HICMjHR2x8Xi2MaRiMi+OLu4cGD/Pk6fSq3Xz6GD+3FwdCAkpCPmIjNbt2yitLSkwXriYndx/NhR2ptMdOveg5LiEr7e+G+Ki4oASEiI59jRRJycjISEdORkUhIFBfk3PL+jiUc4djQRL29vIvv2w2BnIHbnDgquOt+q6mr2791Lp86dCQgM4uyZDHZs23rT3y3xyGEMBgOdb+tCWVkZcbG7uHTpUr02e+Ji8fNrh79/e7KyMtm6ZTOW2tq689y1k+PHjuHj60uP8J6UlBSzedM35F+4QJs2bYiIiORiaSnJJ09QXl5O0vFj+Pr6NXvYAeh8223WsFNVWcmp1FN4eHhgNBoxmwtxdnaxhh0AL29vKisqKCsra/ZaRERErnXLIzyAda1OZWXFdduKzGYAOnYMJbxnL3rU1nL27Bk8PevWdnh7+xA9YiSBgUE4ODjg397EhvVfkZ2VVe/CHBgYxNCo4QC4ublxOCGe1JSUeiNFAMVFRWSkp9GhQwhDhkYBENwhhA3rvyIlJZm+/W4n+eQJHBwcGH3XGFxdXelx8SL/+scXNzw/s7kQgF69+tDO35+OoZ0oyM/HxdnZ2sZSW8vAwYMxmQKwWCxs3LCevLxcCgsLcHF2abDf9iYT0TF104MGg4ETScfJy80lpGNHa5vefSK5rUsXADZ9vZGcnGxyc3NxdnEhIyMdXz8/RowchcFgwN+/PVs2f8PRxCNEjxhJ165hnEhK4siRwxQUFFBdXU3/gQNveJ7N4euNGygrK8PX15dhUVEYDAYqKypp49SmXrs2ber+XVlRgaura4vWJCIi0iyB50rQaeN0/SLlwMAgnJycSIg/RHpaGu38/ekQEkJbDw8A3N3dKTIXcvDAfoqLi60jLTW19R8vHRj0/bqgoKBgDifEW8PU1S7kXwDgzJkM/r7m/XrbiouLKS+/REVFBX5+7awXWldXV7y8vTmf1/Bt46GhnchIT2fTNxvx9fXDv70/oaGdMV4VeAx2dvj71410GQwGTKYALpw/T5HZfMPA4+3tY/3c9vKC7+rqqnptgoKCrvoNgsjJycZsLqTsUt3ISGBgkHVKyBQQgL29PfmXfwODnR23DxjA1s2bSE1JJrRTZ/z82jVYS3MZFjWc8kuXSElNIS42lpgRI7FgufEOms4SEZH/gGYJPDnZOQB4e11/F5Krmxu/umcyaadPkZuTQ3raaZJPnqBX7z5E9u3HwQP7OXY0kXb+/gQEBNKhQwf2fvdtA0exNPDpxs0639aFrmFh9TY5XXXX2HUX4Zt0GtwhhAm/uof0tNOcz8vj2NGjHE1MZOSo0QQGXg4kFgsWy/ed1F6edrqZxqxduWFZN9hQV4PhBu1u+ss1Czc3N9zc3PD28WH9+nVkZ2fj5GSksqL+6N+VkOzUQEgWERFpbre8hudE0nHOn8/DFBCASwNTEwUF+Zw7e5ZOnW9jxB2jmDhpMgBnz5wBID0tDVc3N8aMHU/vPhHWW9uvde7s2as+1+3r0cAta1du/a6uqsLPr13dSI6LK7k5OVRWVWI0OuPk5ERhQQEXL9Y9xfHixVIKC69ff3RFVmYm+RfOE9m3H3eOGcuwqOFYLJZ6NVksFjIzzwF1YSfr8mePy1N3P1a98z5X99nTywsf37rRocxzZ61BKysrk9raWrx9fKx17N+3FyejkY6hnUg7fZq83NxbqqchFRUVfPP1RoqLi63fXQlzBsDLy4tLly5x6dL363XyL+RjNBrrPb9JRESkpTR5hOdSWRm7dm6nttZCkbmQoqIijM7ODBo0pMH25kIz3+6JIzWlHR1DQzl//jwAfu38AHB2cSY/P59DBw/g5ORE8skTDfaTlZXJzh3bcHBw5PTpU9jb23Nbl67XtfPy8iIoKJiMjHS2b92Cl7c36WlpFBcXMfrOMRgMBrqGhZF45Aibv/mawMAgMjPP4eDoSHV1dYPHTk9PIzUlmZzsbHx8fUk7ffryOXw/PWQwGDiwbx/ZWVkUFhZQWFhIO39/vLy8qLiFJ0UmHkkgP/8CF0tLyc3JwdPLC3//9hgMBjp0COHMmQy2btmEp6cXp06lYrCzo2evXgAkHa+7823AwEF07BjKuXNn2bf3W8bfPbFZ74xycnLCaDSSEH+IPn0icHB05FRqKgbAx9cXo9FIu3btOHjgAH0iIqisrCIxMZHOLbB4WkREpCFNHuGpqqoiPS2Ns2fPUF1dQ9ewbkyY8Ksbjsx06tyZ/gMGUlFRzqGDB8jLzaF7j3AGDBwMQNTwGNr5tePEiSROpabSt9/tDfbTr/8AqiqryEhPw9PDkztG34nb5duzrzU8ZgTdu/fgwoXzHE08gr29HdExIzAFBAAQEdGXHuE9qaioID09na5h3fDz87vhOQ8YOIiwbt3Jzs7m4IH9VFVVMnDQEDp16mxtY2dnx+AhQ8nOyqIgP5/gDiHEjLijUb/pzQwdNpy8vFxyc3MICAzkjlGjrWElKjqG7j3CKSwo4OSJJNq6t2X0nXfh6+tH+aVLHDmcQNu2bQkL64bR2ZmePXtRUFBASvLJW67rWgMHDcbZ2YW4uFi2btlMobmQIUOHWe/M6j9gIA4OjmzbupVv9+wmODj4uilHERGRlmKwXL3wRH6U5ni1xU9VaUnxDzcSERH5ESwWKCoyN/hUZbPZjIeH503vbXFzb3iwpSF6rr+IiIi0ioqKcnJyssnJzq73fXZ2Njk52VRUNN/LQxV4REREpFUYjUaCgoIxF5nJyc7GYqkLO0VFZoKCgus9sPZWaUpLbkpTWiIi0tJKS0s5d+4sbRzbUFlVSVBQ8A3X6V5NU1oiIiLys+Hm5kZQUDBV1VWNDjtNpREeuSmN8IiIyH9KTU0N9vb2jW6vER4RERH52WlK2GkqBR4RERGxeQo8IiIiYvMUeERERMTmKfCIiIiIzdNdWiIiImLzNMIjIiIiNk+BR0RERGyeAo+IiIjYPAUeERERsXkKPCIiImLzFHhERETE5inwiIiIiM37/6P0iNTPPTJkAAAAAElFTkSuQmCC"}}]);
\ No newline at end of file
diff --git a/docs/d8689276.c08cd42b.js b/docs/d8689276.c08cd42b.js
new file mode 100644
index 0000000000..e956567774
--- /dev/null
+++ b/docs/d8689276.c08cd42b.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[199],{252:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return s})),n.d(t,"metadata",(function(){return o})),n.d(t,"rightToc",(function(){return b})),n.d(t,"default",(function(){return u}));var r=n(2),i=n(6),a=(n(0),n(292)),s={title:"Form / Spinbox"},o={unversionedId:"examples/spinbox",id:"examples/spinbox",isDocsHomePage:!1,title:"Form / Spinbox",description:"Use a spinbox to allow users to incrementally adjust a value in small steps.",source:"@site/docs/examples/spinbox.md",slug:"/examples/spinbox",permalink:"/wave/docs/examples/spinbox",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/spinbox.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Toggle",permalink:"/wave/docs/examples/toggle"},next:{title:"Form / Slider",permalink:"/wave/docs/examples/slider"}},b=[],p={rightToc:b};function u(e){var t=e.components,s=Object(i.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},p,s,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use a spinbox to allow users to incrementally adjust a value in small steps."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(433).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'spinbox={q.args.spinbox}'),\n            ui.text(f'spinbox_disabled={q.args.spinbox_disabled}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.spinbox(name='spinbox', label='Standard spinbox', min=0, max=100, step=10, value=30),\n            ui.spinbox(name='spinbox_disabled', label='Disabled spinbox', min=0, max=100, step=10, value=30,\n                       disabled=True),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n")))}u.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return c})),n.d(t,"b",(function(){return R}));var r=n(0),i=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 s(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 o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?s(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function b(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var p=i.a.createContext({}),u=function(e){var t=i.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=u(e.components);return i.a.createElement(p.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,p=b(e,["components","mdxType","originalType","parentName"]),c=u(n),f=r,R=c["".concat(s,".").concat(f)]||c[f]||d[f]||a;return n?i.a.createElement(R,o(o({ref:t},p),{},{components:n})):i.a.createElement(R,o({ref:t},p))}));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 p=2;p<a;p++)s[p]=n[p];return i.a.createElement.apply(null,s)}return i.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},433:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/d8aa093c.262becc1.js b/docs/d8aa093c.262becc1.js
deleted file mode 100644
index bc4fb8491e..0000000000
--- a/docs/d8aa093c.262becc1.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[199],{252:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return u}));var r=n(2),a=n(6),s=(n(0),n(290)),o={title:"Table / Preselection"},i={unversionedId:"examples/table-select",id:"examples/table-select",isDocsHomePage:!1,title:"Table / Preselection",description:"Use a table as an advanced multi-select. Specify rownames in 'values' for preselection.",source:"@site/docs/examples/table-select.md",slug:"/examples/table-select",permalink:"/wave/docs/examples/table-select",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/table-select.md",version:"current",sidebar:"someSidebar",previous:{title:"Table / Group by",permalink:"/wave/docs/examples/table-groupby"},next:{title:"Image",permalink:"/wave/docs/examples/image"}},l=[],c={rightToc:l};function u(e){var t=e.components,o=Object(a.a)(e,["components"]);return Object(s.b)("wrapper",Object(r.a)({},c,o,{components:t,mdxType:"MDXLayout"}),Object(s.b)("p",null,"Use a table as an advanced multi-select. Specify rownames in 'values' for preselection."),Object(s.b)("div",{className:"cover",style:{backgroundImage:"url("+n(436).default+")"}}),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from faker import Faker\nfrom h2o_wave import Q, listen, ui\n\nfake = Faker()\n\n_id = 0\n\n\nclass Issue:\n    def __init__(self, text: str):\n        global _id\n        _id += 1\n        self.id = f'I{_id}'\n        self.text = text\n\n\n# Create some issues\nissues = [Issue(text=fake.sentence()) for i in range(10)]\n\n# Create columns for our issue table.\ncolumns = [ui.table_column(name='text', label='Issue', min_width='300px')]\n\n\nasync def main(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'selected={q.args.issues}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 -1 11', items=[\n            ui.table(\n                name='issues',\n                columns=columns,\n                rows=[ui.table_row(name=issue.id, cells=[issue.text]) for issue in issues],\n                values=['I1', 'I2', 'I3']\n            ),\n            ui.button(name='show_inputs', label='Submit', primary=True)\n        ])\n    await q.page.save()\n\n\nlisten('/demo', main)\n")))}u.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 s(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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){s(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},s=Object.keys(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=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<s;c++)o[c]=n[c];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},436:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/table-select-428e4b7f6e76c00956feb8ede847a369.png"}}]);
\ No newline at end of file
diff --git a/docs/d8aa093c.abea6469.js b/docs/d8aa093c.abea6469.js
new file mode 100644
index 0000000000..ac9dd58bc8
--- /dev/null
+++ b/docs/d8aa093c.abea6469.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[200],{253:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return u}));var r=n(2),a=n(6),s=(n(0),n(292)),o={title:"Table / Preselection"},i={unversionedId:"examples/table-select",id:"examples/table-select",isDocsHomePage:!1,title:"Table / Preselection",description:"Use a table as an advanced multi-select. Specify rownames in 'values' for preselection.",source:"@site/docs/examples/table-select.md",slug:"/examples/table-select",permalink:"/wave/docs/examples/table-select",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/table-select.md",version:"current",sidebar:"someSidebar",previous:{title:"Table / Group by",permalink:"/wave/docs/examples/table-groupby"},next:{title:"Image",permalink:"/wave/docs/examples/image"}},l=[],c={rightToc:l};function u(e){var t=e.components,o=Object(a.a)(e,["components"]);return Object(s.b)("wrapper",Object(r.a)({},c,o,{components:t,mdxType:"MDXLayout"}),Object(s.b)("p",null,"Use a table as an advanced multi-select. Specify rownames in 'values' for preselection."),Object(s.b)("div",{className:"cover",style:{backgroundImage:"url("+n(441).default+")"}}),Object(s.b)("pre",null,Object(s.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from faker import Faker\nfrom h2o_wave import main, app, Q, ui\n\nfake = Faker()\n\n_id = 0\n\n\nclass Issue:\n    def __init__(self, text: str):\n        global _id\n        _id += 1\n        self.id = f'I{_id}'\n        self.text = text\n\n\n# Create some issues\nissues = [Issue(text=fake.sentence()) for i in range(10)]\n\n# Create columns for our issue table.\ncolumns = [ui.table_column(name='text', label='Issue', min_width='300px')]\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'selected={q.args.issues}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 -1 11', items=[\n            ui.table(\n                name='issues',\n                columns=columns,\n                rows=[ui.table_row(name=issue.id, cells=[issue.text]) for issue in issues],\n                values=['I1', 'I2', 'I3']\n            ),\n            ui.button(name='show_inputs', label='Submit', primary=True)\n        ])\n    await q.page.save()\n")))}u.isMDXComponent=!0},292: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 s(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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){s(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},s=Object.keys(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=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<s;c++)o[c]=n[c];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},441:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/table-select-428e4b7f6e76c00956feb8ede847a369.png"}}]);
\ No newline at end of file
diff --git a/docs/db32d859.e1958d34.js b/docs/db32d859.4bcf621d.js
similarity index 58%
rename from docs/db32d859.e1958d34.js
rename to docs/db32d859.4bcf621d.js
index c2d65fea27..b6ff0abcce 100644
--- a/docs/db32d859.e1958d34.js
+++ b/docs/db32d859.4bcf621d.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[200],{253:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return s}));var r=n(2),i=n(6),a=(n(0),n(290)),o={title:"Security"},c={unversionedId:"security",id:"security",isDocsHomePage:!1,title:"Security",description:"HTTPS",source:"@site/docs/security.md",slug:"/security",permalink:"/wave/docs/security",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/security.md",version:"current",sidebar:"someSidebar",previous:{title:"Graphics",permalink:"/wave/docs/graphics"},next:{title:"Logging",permalink:"/wave/docs/logging"}},l=[{value:"HTTPS",id:"https",children:[{value:"Self Signed Certificate",id:"self-signed-certificate",children:[]}]},{value:"Single Sign On",id:"single-sign-on",children:[]}],p={rightToc:l};function s(e){var t=e.components,n=Object(i.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(a.b)("h2",{id:"https"},"HTTPS"),Object(a.b)("p",null,"To enable HTTP over TLS to secure your Wave server, pass the following flags when starting the Wave server:"),Object(a.b)("ul",null,Object(a.b)("li",{parentName:"ul"},Object(a.b)("inlineCode",{parentName:"li"},"-tls-cert-file"),": path to certificate file."),Object(a.b)("li",{parentName:"ul"},Object(a.b)("inlineCode",{parentName:"li"},"-tls-key-file"),": path to private key file.")),Object(a.b)("h3",{id:"self-signed-certificate"},"Self Signed Certificate"),Object(a.b)("p",null,"To enable TLS during development, use a self-signed certificate."),Object(a.b)("p",null,"To create a private key and a self-signed certificate from scratch, use ",Object(a.b)("inlineCode",{parentName:"p"},"openssl"),":"),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{}),"openssl req \\\n   -newkey rsa:2048 -nodes -keyout domain.key \\\n   -x509 -days 365 -out domain.crt\n")),Object(a.b)("p",null,"The above command creates a 2048-bit private key (",Object(a.b)("inlineCode",{parentName:"p"},"domain.key"),") and a self-signed x509 certificate (",Object(a.b)("inlineCode",{parentName:"p"},"domain.crt"),") valid for 365 days."),Object(a.b)("h2",{id:"single-sign-on"},"Single Sign On"),Object(a.b)("p",null,"Wave has built-in support for ",Object(a.b)("a",Object(r.a)({parentName:"p"},{href:"https://openid.net/connect/"}),"OpenID Connect"),"."),Object(a.b)("p",null,"To enable OpenID Connect, pass the following flags when starting the Wave server:"),Object(a.b)("ul",null,Object(a.b)("li",{parentName:"ul"},Object(a.b)("inlineCode",{parentName:"li"},"-oidc-provider-url"),": URL for authentication (the identity provider's URL)."),Object(a.b)("li",{parentName:"ul"},Object(a.b)("inlineCode",{parentName:"li"},"-oidc-redirect-url"),": URL to redirect to after authentication."),Object(a.b)("li",{parentName:"ul"},Object(a.b)("inlineCode",{parentName:"li"},"-oidc-end-session-url"),": URL to log out (or sign out)."),Object(a.b)("li",{parentName:"ul"},Object(a.b)("inlineCode",{parentName:"li"},"-oidc-client-id"),": Client ID (refer to your identity provider's documentation)."),Object(a.b)("li",{parentName:"ul"},Object(a.b)("inlineCode",{parentName:"li"},"-oidc-client-secret"),":  Client secret (refer to your identity provider's documentation).")),Object(a.b)("p",null,"Once authenticated, you can access user's authentication and authorization information from your app using ",Object(a.b)("inlineCode",{parentName:"p"},"q.auth")," (see the ",Object(a.b)("a",Object(r.a)({parentName:"p"},{href:"api/server#auth"}),"Auth")," class for details):"),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen\n\nasync def serve(q: Q):\n    print(q.auth.username)\n    print(q.auth.subject)\n\nlisten('/example', serve)\n")))}s.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return f}));var r=n(0),i=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 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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=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<a;p++)o[p]=n[p];return i.a.createElement.apply(null,o)}return i.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[201],{254:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return u}));var r=n(2),i=n(6),a=(n(0),n(292)),o={title:"Security"},c={unversionedId:"security",id:"security",isDocsHomePage:!1,title:"Security",description:"HTTPS",source:"@site/docs/security.md",slug:"/security",permalink:"/wave/docs/security",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/security.md",version:"current",sidebar:"someSidebar",previous:{title:"Graphics",permalink:"/wave/docs/graphics"},next:{title:"Logging",permalink:"/wave/docs/logging"}},l=[{value:"HTTPS",id:"https",children:[{value:"Self Signed Certificate",id:"self-signed-certificate",children:[]}]},{value:"Single Sign On",id:"single-sign-on",children:[]}],p={rightToc:l};function u(e){var t=e.components,n=Object(i.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(a.b)("h2",{id:"https"},"HTTPS"),Object(a.b)("p",null,"To enable HTTP over TLS to secure your Wave server, pass the following flags when starting the Wave server:"),Object(a.b)("ul",null,Object(a.b)("li",{parentName:"ul"},Object(a.b)("inlineCode",{parentName:"li"},"-tls-cert-file"),": path to certificate file."),Object(a.b)("li",{parentName:"ul"},Object(a.b)("inlineCode",{parentName:"li"},"-tls-key-file"),": path to private key file.")),Object(a.b)("h3",{id:"self-signed-certificate"},"Self Signed Certificate"),Object(a.b)("p",null,"To enable TLS during development, use a self-signed certificate."),Object(a.b)("p",null,"To create a private key and a self-signed certificate from scratch, use ",Object(a.b)("inlineCode",{parentName:"p"},"openssl"),":"),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{}),"openssl req \\\n   -newkey rsa:2048 -nodes -keyout domain.key \\\n   -x509 -days 365 -out domain.crt\n")),Object(a.b)("p",null,"The above command creates a 2048-bit private key (",Object(a.b)("inlineCode",{parentName:"p"},"domain.key"),") and a self-signed x509 certificate (",Object(a.b)("inlineCode",{parentName:"p"},"domain.crt"),") valid for 365 days."),Object(a.b)("h2",{id:"single-sign-on"},"Single Sign On"),Object(a.b)("p",null,"Wave has built-in support for ",Object(a.b)("a",Object(r.a)({parentName:"p"},{href:"https://openid.net/connect/"}),"OpenID Connect"),"."),Object(a.b)("p",null,"To enable OpenID Connect, pass the following flags when starting the Wave server:"),Object(a.b)("ul",null,Object(a.b)("li",{parentName:"ul"},Object(a.b)("inlineCode",{parentName:"li"},"-oidc-provider-url"),": URL for authentication (the identity provider's URL)."),Object(a.b)("li",{parentName:"ul"},Object(a.b)("inlineCode",{parentName:"li"},"-oidc-redirect-url"),": URL to redirect to after authentication."),Object(a.b)("li",{parentName:"ul"},Object(a.b)("inlineCode",{parentName:"li"},"-oidc-end-session-url"),": URL to log out (or sign out)."),Object(a.b)("li",{parentName:"ul"},Object(a.b)("inlineCode",{parentName:"li"},"-oidc-client-id"),": Client ID (refer to your identity provider's documentation)."),Object(a.b)("li",{parentName:"ul"},Object(a.b)("inlineCode",{parentName:"li"},"-oidc-client-secret"),":  Client secret (refer to your identity provider's documentation).")),Object(a.b)("p",null,"Once authenticated, you can access user's authentication and authorization information from your app using ",Object(a.b)("inlineCode",{parentName:"p"},"q.auth")," (see the ",Object(a.b)("a",Object(r.a)({parentName:"p"},{href:"api/server#auth"}),"Auth")," class for details):"),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, main, app\n\n@app('/example')\nasync def serve(q: Q):\n    print(q.auth.username)\n    print(q.auth.subject)\n")))}u.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),n.d(t,"b",(function(){return f}));var r=n(0),i=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 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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var p=i.a.createContext({}),u=function(e){var t=i.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 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"]),s=u(n),d=r,f=s["".concat(o,".").concat(d)]||s[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<a;p++)o[p]=n[p];return i.a.createElement.apply(null,o)}return i.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/dc705eb8.7f4a21ae.js b/docs/dc705eb8.0944bfc8.js
similarity index 97%
rename from docs/dc705eb8.7f4a21ae.js
rename to docs/dc705eb8.0944bfc8.js
index f04702420c..ce459e35cd 100644
--- a/docs/dc705eb8.7f4a21ae.js
+++ b/docs/dc705eb8.0944bfc8.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[201],{254:function(A,e,r){"use strict";r.r(e),r.d(e,"frontMatter",(function(){return o})),r.d(e,"metadata",(function(){return m})),r.d(e,"rightToc",(function(){return c})),r.d(e,"default",(function(){return d}));var t=r(2),n=r(6),a=(r(0),r(290)),o={title:"Layout / Position"},m={unversionedId:"examples/layout",id:"examples/layout",isDocsHomePage:!1,title:"Layout / Position",description:"How to adjust the position of cards on a page.",source:"@site/docs/examples/layout.md",slug:"/examples/layout",permalink:"/wave/docs/examples/layout",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/layout.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Series / Tall / Interval",permalink:"/wave/docs/examples/stat-tall-series-interval"},next:{title:"Layout / Size",permalink:"/wave/docs/examples/layout-size"}},c=[],p={rightToc:c};function d(A){var e=A.components,o=Object(n.a)(A,["components"]);return Object(a.b)("wrapper",Object(t.a)({},p,o,{components:e,mdxType:"MDXLayout"}),Object(a.b)("p",null,"How to adjust the position of cards on a page."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(422).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\n# Every page has a grid system in place.\n# The grid has 12 columns and 10 rows.\n# A column is 134 pixels wide.\n# A row is 76 pixels high.\n# The gap between rows and columns is set to 15 pixels.\n\n# Cards have a `box` attribute that specifies its column, row, width and height.\n# box = 'column row width height'\n# They indicate the 1-based column/row to position the top-left corner of the card.\n\n# In this example, we place a 1x1 card in each column/row on a page\n# to demonstrate their column/row values.\n\npage = site['/demo']\ncolumns = 12\nrows = 10\n\nfor column in range(1, columns + 1):\n    for row in range(1, rows + 1):\n        box = f'{column} {row} 1 1'\n        page[f'card_{column}_{row}'] = ui.markdown_card(box=box, title=box, content='')\n\npage.save()\n")))}d.isMDXComponent=!0},290:function(A,e,r){"use strict";r.d(e,"a",(function(){return i})),r.d(e,"b",(function(){return f}));var t=r(0),n=r.n(t);function a(A,e,r){return e in A?Object.defineProperty(A,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):A[e]=r,A}function o(A,e){var r=Object.keys(A);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(A);e&&(t=t.filter((function(e){return Object.getOwnPropertyDescriptor(A,e).enumerable}))),r.push.apply(r,t)}return r}function m(A){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?o(Object(r),!0).forEach((function(e){a(A,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(A,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(e){Object.defineProperty(A,e,Object.getOwnPropertyDescriptor(r,e))}))}return A}function c(A,e){if(null==A)return{};var r,t,n=function(A,e){if(null==A)return{};var r,t,n={},a=Object.keys(A);for(t=0;t<a.length;t++)r=a[t],e.indexOf(r)>=0||(n[r]=A[r]);return n}(A,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(A);for(t=0;t<a.length;t++)r=a[t],e.indexOf(r)>=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<a;p++)o[p]=r[p];return n.a.createElement.apply(null,o)}return n.a.createElement.apply(null,r)}s.displayName="MDXCreateElement"},422:function(A,e,r){"use strict";r.r(e),e.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[202],{255:function(A,e,r){"use strict";r.r(e),r.d(e,"frontMatter",(function(){return o})),r.d(e,"metadata",(function(){return m})),r.d(e,"rightToc",(function(){return c})),r.d(e,"default",(function(){return d}));var t=r(2),n=r(6),a=(r(0),r(292)),o={title:"Layout / Position"},m={unversionedId:"examples/layout",id:"examples/layout",isDocsHomePage:!1,title:"Layout / Position",description:"How to adjust the position of cards on a page.",source:"@site/docs/examples/layout.md",slug:"/examples/layout",permalink:"/wave/docs/examples/layout",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/layout.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Series / Tall / Interval",permalink:"/wave/docs/examples/stat-tall-series-interval"},next:{title:"Layout / Size",permalink:"/wave/docs/examples/layout-size"}},c=[],p={rightToc:c};function d(A){var e=A.components,o=Object(n.a)(A,["components"]);return Object(a.b)("wrapper",Object(t.a)({},p,o,{components:e,mdxType:"MDXLayout"}),Object(a.b)("p",null,"How to adjust the position of cards on a page."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(427).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\n# Every page has a grid system in place.\n# The grid has 12 columns and 10 rows.\n# A column is 134 pixels wide.\n# A row is 76 pixels high.\n# The gap between rows and columns is set to 15 pixels.\n\n# Cards have a `box` attribute that specifies its column, row, width and height.\n# box = 'column row width height'\n# They indicate the 1-based column/row to position the top-left corner of the card.\n\n# In this example, we place a 1x1 card in each column/row on a page\n# to demonstrate their column/row values.\n\npage = site['/demo']\ncolumns = 12\nrows = 10\n\nfor column in range(1, columns + 1):\n    for row in range(1, rows + 1):\n        box = f'{column} {row} 1 1'\n        page[f'card_{column}_{row}'] = ui.markdown_card(box=box, title=box, content='')\n\npage.save()\n")))}d.isMDXComponent=!0},292:function(A,e,r){"use strict";r.d(e,"a",(function(){return i})),r.d(e,"b",(function(){return f}));var t=r(0),n=r.n(t);function a(A,e,r){return e in A?Object.defineProperty(A,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):A[e]=r,A}function o(A,e){var r=Object.keys(A);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(A);e&&(t=t.filter((function(e){return Object.getOwnPropertyDescriptor(A,e).enumerable}))),r.push.apply(r,t)}return r}function m(A){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?o(Object(r),!0).forEach((function(e){a(A,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(A,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(e){Object.defineProperty(A,e,Object.getOwnPropertyDescriptor(r,e))}))}return A}function c(A,e){if(null==A)return{};var r,t,n=function(A,e){if(null==A)return{};var r,t,n={},a=Object.keys(A);for(t=0;t<a.length;t++)r=a[t],e.indexOf(r)>=0||(n[r]=A[r]);return n}(A,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(A);for(t=0;t<a.length;t++)r=a[t],e.indexOf(r)>=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<a;p++)o[p]=r[p];return n.a.createElement.apply(null,o)}return n.a.createElement.apply(null,r)}s.displayName="MDXCreateElement"},427:function(A,e,r){"use strict";r.r(e),e.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAl0AAAEWCAYAAABc9SIZAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDExOjQyOjE3IEFNIFBEVAv66mIAAB3WSURBVHic7d19cFR1nu/xzznpjkSqDLAlQWdFGa1MUaw7JGEkZGBGcVTAqsGZhIcRFnVUCD5BkhmZyOx44fKkW6U87L0zEiKWAYQRZWovuqXr3fLhMs5emCFRhNpbRALWDBOrhJClk9CaPvePkJiHbrpP58cv6fT7VZXSmF9On1TedfK1zzndTigU8gQAAIDLyh3oHQAAAEgHDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWBDo7wY8j5f5SmeO4xjfJk2lN5qCaTQF05JtKqmhK1ZsRJgeusfW/XfenwMbTaU3moJpNAXTTDTla+jq/iCZmZkKBAKX5f8gkDo8z9NXX32lcDjc1YefJmgKvdEUTKMpmJZsUwlf09W5Uc/zlJmZqWAwSHSQ4zgKBoPKzMzs0UgiaArR0BRMoymYlmxTvi6k9zxPnucpEOj3pWAYYgKBQFcfftAUYqEpmEZTMM1vUwkNXV0bu7hhpnz05jhORycJTvw0hXhoCqbRFEzz25Sv04teAhtE+vLbCE0hHpqCaTQF0/w0ktTpRSCa/jxtD0RDUzCNpmCa0dOL3S8QIzxcSu9G4t1eTVOIh6ZgGk3BND9N+X5FesJDLMm2QVOIhaZgGk3BND9t8DZAAAAAFvi7exFIUMJ3BQEJoimYRlMwzdjdixc3149dQXrw2whNIR6agmk0BdMMvk4XAAAA+oehCwAAwAKGLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALGLoAAAAsGJCh62RDg376wP0qyM/TO++8E3XNgQMHNGvmDBXk56mpqanP1yORiHbU1KhoSqHmzimJuo3z589r9apVKsjP0zMbNhj9GTC4HDt2TPfft0hTCidr1swZemn79qjrTHWTSMNIbY2NjaqoKNfU7xbptlu/r/Xr1ykcDkddy/EKfjQ3N6sgP08F+Xn64IP3o66x9XcSdgVsP2Bdba1KS0t1zTVjYq7ZUVOjTZs26tprr425prysTIcP/0nDhw+P+vVQKKQ5JcXKysrq9z5jcGtra9Pjjz2qq7KztbysTHW1tdqyZbNycnI0c9asHmtNdJNIw0h95WVlOn36L1q8eImamppUU/OyrrzySi1btrzHOo5X8Gvz5k2X/Lqtv5Owz/ozXaGWFlU+VamVK38Zc42b4ar6xe2adffdMdeMHTtWr+59TePGjYv69XA4rDvvuku79/y23/uMwe3UqVMaM2aMKisrNW/efK1Zu05ZWVmq+6iuz1oT3STSMFLbhQsXNGHCBK1avVqL7rtPTyxbpvHjx6v28OE+azlewY+6ujr9bt8+LViwMOYaW38nYZ/1Z7qKiookSX88dCjmmnvvXSBJ+vDD38dcU15RccnHGTlypMrKypPYQ6Sa3Nxc7di5q+vzhoYGtba26qYbb+qz1kQ3iTSM1HbFFVfoqZUrJUktoZCOfPKJPv30U82bP7/PWo5XSFR7e7vWrl2jyYWFmjFzpnbu3BF1na2/k7DP+tAFXE7N585pxZM/V25urn44e/ZA7w5SXDgc1rRpUyVJBZMm6cEHHxrgPUIqq6l5WZ+d+kzPPfe8mpubB3p3MAC4exFDxrlz51RaukQXLoS1afMWZWZmDvQuIcUFg0Ftq67Wr55+WidOnNDS0lJ5njfQu4UUdPr0aVVt3arikmIFg0F93tgoSWps/Fytra0DvHewhWe6MCScPXtWS0uX6Pz589pW/aJGjx490LuEFNbY+Fe9/dbbKpwyRXl5+crLy9fRo0e199VX1dTUpJEjRw70LiLFHDp4UG1tbXpl1y69suvryyHWr1srSSop4e7CdMDQhZTX3NysJYsfVn19vRYsWKj33ntXknT11Vdr+vTbB3bnkJKyhmWpqmqr9uzZreLiEoVaQnpj/35df8MNys7OHujdQwq6ZfJkbdz09V2LH3/0saqrt6m4uERTp04dwD2DTQxdSHknT55UfX29JPW4MPXbEycydCEpV2Vn6zcvbNXG559TVdVWBQIBFRZOUXlFhVyXqzLgX05OjnJycro+HzFipKqrt2na96ZpzBhefiZdOKFQ6JIXKHie1/URibSrvT2iUaNG2do/pJAzZ84oI8OV62bIcZyuj95oComiKZhGUzDNT1P8LxsAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWMDQBQAAYAFDFwAAgAUMXQAAABYwdAEAAFjA0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWMDQBQAAYAFDFwAAgAUMXQAAABYwdAEAAFjA0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWMDQBQAAYAFDFwAAgAUMXQAAABYwdAEAAFjA0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWOBz6HIuz15gCPHbCE0hHpqCaTQF0xJrJKGhy3F6bszzPP/7gyGtdxO9m+mNphAPTcE0moJpfptK6vRiW1tbMt+GIay/TdAUeqMpmEZTMM1vE76HLsdxFAqF1NLSwtQPeZ6nlpYWhUKhuBN+LDSF7mgKptEUTEu2KScUCsWtx/M8eZ6nSCSiSCSi9vZ2Rdrb1R6JdH1N8kSH6aGjL0eO0/GR4bpyMzKUkZEh13Xlum7X12KhKXRHUzCNpmCaiaYC/h6wY2Ou48hzXWVIinSF14n6hravY+pswXHdjn/GiS3q1mgKNAXjaAqmmWkq4aHLcRzJ8zo23hmd48jpHZ7nkd4Q1THk9wyve3yO48hR/AsJu38/TaU3moJpNAXTTDaV0NDlOE5HXBc37LquvG7RcX47PXWG1/2jM8xE7gqiKfRGUzCNpmBaf5ryfXpR6pj6vIsxxo6OGIeW6CF1RdfxSVJP23dunabSDU3BNJqCaWabSuhC+k7dI+v8dyb99OZEme79HNBoCr3RFEyjKZiWbFO+hq5OsWIjwvQQK6xkb8WWaCrd0RRMoymYZqIpX6cXoz1A99j6EzNSk6nfOU2hE03BNJqCacn+zpMaukw8MBALTcE0moJpNIVkJPU2QAAAAPCHoQsAAMAChi4AAAALGLoAAAAs6PeF9Nwqm94ux8WkNJXeaAqm0RRMs3r3Iq9Vkt4ux23TNJXeaAqm0RRMM9GUr6Gr+4NkZmYqEAhw22ya8zxPX331lcLhcFcfyb7SM01BoimYR1MwLdmmEr6mq/tbH2RmZioYDBId5DiOgsGgMjMzfb89Bk0hGpqCaTQF05JtyteF9J1v8hkI9PtSMAwxgUAgzpvARkdTiIWmYBpNwTS/TSU0dHVt7OKGmfLRm+M4HZ0kOPHTFOKhKZhGUzDNb1O+Ti96CWwQ6ctvIzSFeGgKptEUTPPTSFKnF4Fo+vO0PRANTcE0moJpRk8vdr9AjPBwKb0biXd7NU0hHpqCaTQF0/w05fsV6QkPsSTbBk0hFpqCaTQF0/y0wdsAAQAAWODv7kUgQQnfFQQkiKZgGk3BNGN3L17cXD92BenBbyM0hXhoCqbRFEwz+DpdAAAA6B+GLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALGLoAAAAsYOgCAACwYECGrpMNDfrpA/erID9P77zzTtQ1b775hn50z2wVTr5Fc+fO0f/54IOo686fP6/Vq1apID9Pz2zYkPTjIbUdO3ZM99+3SFMKJ2vWzBl6afv2qOsikYi2bN6sO+74gYqmFGpp6RKdbGiIuvbAgQOaNXOGCvLz1NTUFHVbO2pqVDSlUHPnlJj8cTAINDY2qqKiXFO/W6Tbbv2+1q9fp3A4HHUtxyv40dzcrIL8PBXk5+mDD96PusbPMS3ecSiR7mCH9aGrrrZW8+fPj/pHrNMnR47oV//4j7ruuutUUfEzDRs2TD/7WYX+/Oc/91gXCoU0p6RYtbWH+/V4SG1tbW16/LFH1fxf/6XlZWWaOHGitmzZrH99880+a3fU1Oill7brjh/coccef1zH6+tVVra8z1s37Kip0fJlTygYDMZ83PKyMlVVbdXw4cON/0wYeOVlZTr8pz9p8eIl+tGPfqzXX3tNv/71/+yzjuMV/Nq8edMlv+7nmBbvOJRId7DH+tAVamlR5VOVWrnylzHXHK8/rvHjx2vd+g2aM3euVjy5Ql9++aWOHT3aY104HNadd92l3Xt+26/HQ2o7deqUxowZo8rKSs2bN19r1q5TVlaW6j6q67P2L6f/ojvvvEtPrlihe+9doIULF+rkyZN9/si5Ga6qX9yuWXffHfNxx44dq1f3vqZx48YZ/5kwsC5cuKAJEyZo1erVWnTffXpi2TKNHz9etYf7/uHieAU/6urq9Lt9+7RgwcKYa/wc0+IdhxLpDvYEbD9gUVGRJOmPhw7FXDN79j2aPfuers+PHTsmSfrmjTf2WDdy5EiVlZX3+/GQ2nJzc7Vj566uzxsaGtTa2qqbbrypz9pf/KKyx+fHjh7TqL/5G40YMaLHf7/33gWSpA8//H3Mxy2vqOjPbmMQu+KKK/TUypWSpJZQSEc++USffvqp5s2f32ctxyskqr29XWvXrtHkwkLNmDlTO3fuiLrOzzEt3nEoke5gj/Why6+jR49q06aNKi4u0Te/+c2B3h0Mcs3nzmnFkz9Xbm6ufjh79iXX7t27V//2b29r7br1chzH0h4ilYTDYU2bNlWSVDBpkh588KFLrud4hUupqXlZn536TM8997yam5sT+h4/xzQMfoP67sWjR4/q0UeWatKk7+jJFSsGencwyJ07d06lpUt04UJYmzZvUWZmZsy1v9u3TxvWr9Pjjz+hGTNmWNxLpJJgMKht1dX61dNP68SJE1paWtrn+r9OHK9wKadPn1bV1q0qLilWMBjU542NkqTGxs/V2toa9Xv8HNOQGgbtM12fHDmiRx5Zqptv/ns98+yzCgQG7a5iEDh79qyWli7R+fPnta36RY0ePTrm2r1792rD+nVavHiJ7n/gAYt7iVTR2PhXvf3W2yqcMkV5efnKy8vX0aNHtffVV9XU1KSRI0f2WM/xCvEcOnhQbW1temXXLr2y6+tTh+vXrZUklZT0vPPQzzENqWNQHhmOHj2qpUtLFYlEdMstt2jfvtclSRMmTNDf/d3NA7x3GGyam5u1ZPHDqq+v14IFC/Xee+9Kkq6++mpNn357j7Wvv/6aNqxfp7HXX6/sEdnas2e3JOnWW29TTk6O7V3HIJU1LEtVVVu1Z89uFReXKNQS0hv79+v6G25QdnZ2j7Ucr5CIWyZP1sZNX9+1+PFHH6u6epuKi0s0derUHmv9HNOQWgbl0PV//+M/FAqFJEmbNm3s+u8PPvgQBzH0cfLkSdXX10tSjwtTvz1xYp8D1L//73+X53k62dCgZ595puu/33DDOIYudLkqO1u/eWGrNj7/nKqqtioQCKiwcIrKKyrkuj2vyuB4hUTk5OT0OMaMGDFS1dXbNO170zRmzJgea/0c05BanFAoFP0ChYs8z+v6iETa1d4e0ahRo2ztH1LImTNnlJHhynUz5DhO10dvNIVE0RRMoymY5qepQX0hPQAAwFDB0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWMDQBQAAYAFDFwAAgAUMXQAAABYwdAEAAFjA0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWMDQBQAAYAFDFwAAgAUMXQAAABYwdAEAAFjA0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWMDQBQAAYAFDFwAAgAUMXQAAABYwdAEAAFjA0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABT6HLufy7AWGEL+N0BTioSmYRlMwLbFGEhq6HKfnxjzP878/GNJ6N9G7md5oCvHQFEyjKZjmt6mkTi+2tbUl820YwvrbBE2hN5qCaTQF0/w24XvochxHoVBILS0tTP2Q53lqaWlRKBSKO+HHQlPojqZgGk3BtGSbckKhUNx6PM+T53mKRCKKRCJqb29XpL1d7ZFI19ckT3SYHjr6cuQ4HR8Zris3I0MZGRlyXVeu63Z9LRaaQnc0BdNoCqaZaCrg7wE7NuY6jjzXVYakSFd4nahvaPs6ps4WHNft+Gec2KJujaZAUzCOpmCamaYSHrocx5E8r2PjndE5jpze4Xke6Q1RHUN+z/C6x+c4jhzFv5Cw+/fTVHqjKZhGUzDNZFMJDV2O43TEdXHDruvK6xYd57fTU2d43T86w0zkriCaQm80BdNoCqb1pynfpxeljqnPuxhj7OiIcWiJHlJXdB2fJPW0fefWaSrd0BRMoymYZraphC6k79Q9ss5/Z9JPb06U6d7PAY2m0BtNwTSagmnJNuVr6OoUKzYiTA+xwkr2VmyJptIdTcE0moJpJprydXox2gN0j60/MSM1mfqd0xQ60RRMoymYluzvPKmhy8QDA7HQFEyjKZhGU0hGUm8DBAAAAH8YugAAACxg6AIAALCAoQsAAMCCfl9Iz62y6e1yXExKU+mNpmAaTcE0q3cv8lol6e1y3DZNU+mNpmAaTcE0E035Grq6P0hmZqYCgQC3zaY5z/P01VdfKRwOd/WR7Cs90xQkmoJ5NAXTkm0q4Wu6ur/1QWZmpoLBINFBjuMoGAwqMzPT99tj0BSioSmYRlMwLdmmfF1I3/kmn4FAvy8FwxATCATivAlsdDSFWGgKptEUTPPbVEJDV9fGLm6YKR+9OY7T0UmCEz9NIR6agmk0BdP8NuXr9KKXwAaRvvw2QlOIh6ZgGk3BND+NJHV6EYimP0/bA9HQFEyjKZhm9PRi9wvECA+X0ruReLdX0xTioSmYRlMwzU9Tvl+RnvAQS7Jt0BRioSmYRlMwzU8bvA0QAACABf7uXgQSlPBdQUCCaAqm0RRMM3b34sXN9WNXkB78NkJTiIemYBpNwTSDr9MFAACA/mHoAgAAsIChCwAAwAKGLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALBmToOtnQoJ8+cL8K8vP0zjvvRF1TW3tYixb9g6YUTtbds2Zq9+7dUddFIhHtqKlR0ZRCzZ1TEnXN+fPntXrVKhXk5+mZDRuM/RwYPI4dO6b771ukKYWTNWvmDL20fXvMta+//prumf1DTSmcrJ/Mn6dDBw9GXZdIN4m0jNTU2NioiopyTf1ukW679ftav36dwuFw1LUcr+BHc3OzCvLzVJCfpw8+eD/qGj/9HThwQLNmzlBBfp6ampr6fD2R7mBHwPYD1tXWqrS0VNdcMybmmi+++EKPPfqorrvuOpWVl+vQwYP6p2ef0XV/+7f67tSpPdaWl5Xp8OE/afjw4VG3FQqFNKekWFlZWUZ/DgwebW1tevyxR3VVdraWl5WprrZWW7ZsVk5OjmbOmtVj7fvvv6e1a9bo1ttu04IFC7Vv3+tavnyZ/uV/7deoUaO61iXSTSItI3WVl5Xp9Om/aPHiJWpqalJNzcu68sortWzZ8h7rOF7Br82bN8Vdk2h/O2pqtGnTRl177bWX3NaluoM91p/pCrW0qPKpSq1c+cuYa7744gvNmnW3NjzzrObOnadVq/+7JOlw7eE+a8eOHatX976mcePGRd1WOBzWnXfdpd17fmvmB8Cgc+rUKY0ZM0aVlZWaN2++1qxdp6ysLNV9VNdnbfhCWHPnztOzz/6T5sydq0cffUytra36f//5nz3XJdBNIi0jNV24cEETJkzQqtWrtei++/TEsmUaP368ag/3PQZxvIIfdXV1+t2+fVqwYGHMNX76czNcVb+4XbPuvjvm9uJ1B3usP9NVVFQkSfrjoUMx1+Tm5uqplSsViUTUfO6c9r+xX5KUn1/QZ215RcUlH2/kyJEqKyvvxx5jsMvNzdWOnbu6Pm9oaFBra6tuuvGmPmt/cMcd+sEdd+jLL7/U2bNn9ea/vqnhw4cr91vf6rEukW4SaRmp6YorrtBTK1dKklpCIR355BN9+umnmjd/fp+1HK+QqPb2dq1du0aTCws1Y+ZM7dy5I+o6P/3de+8CSdKHH/4+5uPG6w72WB+6/PjDH/6gxx97VJL0D4sWdf2RA2JpPndOK578uXJzc/XD2bNjrvvNr3+tl17armHDhum/rVrV49Qi0CkcDmvatI5ThAWTJunBBx+KuZbjFeKpqXlZn536TM8997yam5vjrvfTH1LDoL578eabb9YLL2zV0kce0c4dO7R5U/zz4Ehf586dU2npEl24ENamzVuUmZkZc23JnDna8s//Q7fffrueqqyMeTEr0lswGNS26mr96umndeLECS0tLZXneVHXcrzCpZw+fVpVW7equKRYwWBQnzc2SpIaGz9Xa2tr1O/x0x9Sw6Acuurq6lTz8svyPE+TvvMdPfTQw7r++uv5w4iYzp49qyWLH1Zzc7O2VlVp9OjRUde9/fZb2rt3r6655hoVFRVpeVm5IpGIDhw4YHmPMZg1Nv5VNS+/rOPHjysvL1+zZ9+j6dOn68iRj/vcHcbxCok4dPCg2tra9MquXZo1c4YqKjpOI69ft1ZvvPFGj7V++kNqGZSnF9va2rRx4/N69913ddv023T8+HGdOHFCP/rxjwd61zAINTc3a8nih1VfX68FCxbqvffelSRdffXVmj799h5r64/Xa9u2Kn1UV6vcb31L77/3niRp4rcn2t5tDGJZw7JUVbVVe/bsVnFxiUItIb2xf7+uv+EGZWdn91jL8QqJuGXyZG3s9uznxx99rOrqbSouLtHUXne5+ukPqWVQDl2TJ0/WmjVrtX37i/rnLVt01VVXaf5PfqInnlg20LuGQejkyZOqr6+XpB4Xpn574sQ+Q9fiJUsU8SJ6Y/9+vfXWW/rGN76hX/yiUjNmzrS6zxjcrsrO1m9e2KqNzz+nqqqtCgQCKiycovKKCrluzxMEHK+QiJycHOXk5HR9PmLESFVXb9O0703TmDE9X3bGT39ILU4oFLrkCWLP87o+IpF2tbdHuOgYUZ05c0YZGa5cN0OO43R99EZTSBRNwTSagml+mmJkBgAAsIChCwAAwAKGLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALGLoAAAAsYOgCAACwgKELAADAAoYuAAAACxi6AAAALGDoAgAAsIChCwAAwAKGLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALGLoAAAAsYOgCAACwgKELAADAAoYuAAAACxi6AAAALGDoAgAAsIChCwAAwAKGLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALGLoAAAAsYOgCAACwgKELAADAAoYuAAAACxi6AAAALGDoAgAAsIChCwAAwAKGLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALfA5dzuXZCwwhfhuhKcRDUzCNpmBaYo0kNHQ5Ts+NeZ7nf38wpPVuonczvdEU4qEpmEZTMM1vU0mdXmxra0vm2zCE9bcJmkJvNAXTaAqm+W3C99DlOI5CoZBaWlqY+iHP89TS0qJQKBR3wo+FptAdTcE0moJpyTblhEKhuPV4nifP8xSJRBSJRNTe3q5Ie7vaI5Gur0me6DA9dPTlyHE6PjJcV25GhjIyMuS6rlzX7fpaLDSF7mgKptEUTDPRVMDfA3ZszHUcea6rDEmRrvA6Ud/Q9nVMnS04rtvxzzixRd0aTYGmYBxNwTQzTSU8dDmOI3lex8Y7o3McOb3D8zzSG6I6hvye4XWPz3EcOYp/IWH376ep9EZTMI2mYJrJphIauhzH6Yjr4oZd15XXLTrOb6enzvC6f3SGmchdQTSF3mgKptEUTOtPU75PL0odU593McbY0RHj0BI9pK7oOj5J6mn7zq3TVLqhKZhGUzDNbFMJXUjfqXtknf/OpJ/enCjTvZ8DGk2hN5qCaTQF05JtytfQ1SlWbESYHmKFleyt2BJNpTuagmk0BdNMNOXr9GK0B+geW39iRmoy9TunKXSiKZhGUzAt2d95UkOXiQcGYqEpmEZTMI2mkIyk3gYIAAAA/vx/SN4jbijHNF8AAAAASUVORK5CYII="}}]);
\ No newline at end of file
diff --git a/docs/dceb90d2.36c09c0f.js b/docs/dceb90d2.36c09c0f.js
deleted file mode 100644
index 19486e858b..0000000000
--- a/docs/dceb90d2.36c09c0f.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[202],{255:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return u}));var r=n(2),a=n(6),o=(n(0),n(290)),c={title:"Mode / Broadcast / Global"},i={unversionedId:"examples/counter-global",id:"examples/counter-global",isDocsHomePage:!1,title:"Mode / Broadcast / Global",description:"Launch the server in broadcast mode to synchronize browser state across users. Global variables can be used to manage state.",source:"@site/docs/examples/counter-global.md",slug:"/examples/counter-global",permalink:"/wave/docs/examples/counter-global",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/counter-global.md",version:"current",sidebar:"someSidebar",previous:{title:"Meta / Redirect",permalink:"/wave/docs/examples/meta-redirect"},next:{title:"Mode / Broadcast",permalink:"/wave/docs/examples/counter-broadcast"}},l=[],s={rightToc:l};function u(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},s,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Launch the server in broadcast mode to synchronize browser state across users. Global variables can be used to manage state.\nOpen ",Object(o.b)("inlineCode",{parentName:"p"},"/demo")," in multiple browsers and watch them synchronize in realtime."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(463).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui, pack\n\ncount = 0\n\n\nasync def serve(q: Q):\n    global count\n    if 'increment' in q.args:\n        count += 1\n\n    items = pack([ui.button(name='increment', label=f'Count={count}')])\n\n    if count > 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;s++)c[s]=n[s];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},463:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/dceb90d2.f2ed4112.js b/docs/dceb90d2.f2ed4112.js
new file mode 100644
index 0000000000..716c1e98c3
--- /dev/null
+++ b/docs/dceb90d2.f2ed4112.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[203],{256:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return c})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return u}));var r=n(2),a=n(6),o=(n(0),n(292)),c={title:"Mode / Broadcast / Global"},i={unversionedId:"examples/counter-global",id:"examples/counter-global",isDocsHomePage:!1,title:"Mode / Broadcast / Global",description:"Launch the server in broadcast mode to synchronize browser state across users. Global variables can be used to manage state.",source:"@site/docs/examples/counter-global.md",slug:"/examples/counter-global",permalink:"/wave/docs/examples/counter-global",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/counter-global.md",version:"current",sidebar:"someSidebar",previous:{title:"Meta / Redirect",permalink:"/wave/docs/examples/meta-redirect"},next:{title:"Mode / Broadcast",permalink:"/wave/docs/examples/counter-broadcast"}},l=[],s={rightToc:l};function u(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},s,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Launch the server in broadcast mode to synchronize browser state across users. Global variables can be used to manage state.\nOpen ",Object(o.b)("inlineCode",{parentName:"p"},"/demo")," in multiple browsers and watch them synchronize in realtime."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(469).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui, pack\n\ncount = 0\n\n\n@app('/demo', mode='broadcast')\nasync def serve(q: Q):\n    global count\n    if 'increment' in q.args:\n        count += 1\n\n    items = pack([ui.button(name='increment', label=f'Count={count}')])\n\n    if count > 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")))}u.isMDXComponent=!0},292: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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;s++)c[s]=n[s];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},469:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/de02e8e6.4e7b68e0.js b/docs/de02e8e6.9c87a59f.js
similarity index 92%
rename from docs/de02e8e6.4e7b68e0.js
rename to docs/de02e8e6.9c87a59f.js
index 8da2c32dd3..cafa5673c0 100644
--- a/docs/de02e8e6.4e7b68e0.js
+++ b/docs/de02e8e6.9c87a59f.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[203],{256:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return p})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(290)),p={title:"Plot / Path / Point"},i={unversionedId:"examples/plot-path-point",id:"examples/plot-path-point",isDocsHomePage:!1,title:"Plot / Path / Point",description:"Make a path plot with an additional layer of points.",source:"@site/docs/examples/plot-path-point.md",slug:"/examples/plot-path-point",permalink:"/wave/docs/examples/plot-path-point",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-path-point.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Path",permalink:"/wave/docs/examples/plot-path"},next:{title:"Plot / Path / Smooth",permalink:"/wave/docs/examples/plot-path-smooth"}},c=[],l={rightToc:c};function s(e){var t=e.components,p=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},l,p,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a path plot with an additional layer of points."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(452).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeScatter\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 50\nf = FakeScatter()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Path + Point',\n    data=data('profit sales', n),\n    plot=ui.plot([\n        ui.mark(type='path', x='=profit', y='=sales'),\n        ui.mark(type='point', x='=profit', y='=sales'),\n    ])\n))\nv.data = [(x, y) for x, y in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return d}));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 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 i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;l++)p[l]=n[l];return a.a.createElement.apply(null,p)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},452:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-path-point-7e7d80f97ee02c9ac8591676f931f173.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[204],{257:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return p})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(292)),p={title:"Plot / Path / Point"},i={unversionedId:"examples/plot-path-point",id:"examples/plot-path-point",isDocsHomePage:!1,title:"Plot / Path / Point",description:"Make a path plot with an additional layer of points.",source:"@site/docs/examples/plot-path-point.md",slug:"/examples/plot-path-point",permalink:"/wave/docs/examples/plot-path-point",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-path-point.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Path",permalink:"/wave/docs/examples/plot-path"},next:{title:"Plot / Path / Smooth",permalink:"/wave/docs/examples/plot-path-smooth"}},c=[],l={rightToc:c};function s(e){var t=e.components,p=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},l,p,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a path plot with an additional layer of points."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(457).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeScatter\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 50\nf = FakeScatter()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Path + Point',\n    data=data('profit sales', n),\n    plot=ui.plot([\n        ui.mark(type='path', x='=profit', y='=sales'),\n        ui.mark(type='point', x='=profit', y='=sales'),\n    ])\n))\nv.data = [(x, y) for x, y in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return d}));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 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 i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;l++)p[l]=n[l];return a.a.createElement.apply(null,p)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},457:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-path-point-7e7d80f97ee02c9ac8591676f931f173.png"}}]);
\ No newline at end of file
diff --git a/docs/docs/_start_q/index.html b/docs/docs/_start_q/index.html
index a39829ffc0..f9c1cd22b0 100644
--- a/docs/docs/_start_q/index.html
+++ b/docs/docs/_start_q/index.html
@@ -4,32 +4,32 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
-<title data-react-helmet="true">_start_q | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="_start_q | H2O Wave"><meta data-react-helmet="true" name="description" content="To start the Wave server, simply open a new terminal window and execute wave (or wave.exe on Windows)."><meta data-react-helmet="true" property="og:description" content="To start the Wave server, simply open a new terminal window and execute wave (or wave.exe on Windows)."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/_start_q"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/_start_q"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/fcfc3752.e536a904.js" as="script">
-<link rel="preload" href="/wave/47a365f9.d7ec0ae7.js" as="script">
+<title data-react-helmet="true">_start_q | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="_start_q | H2O Wave"><meta data-react-helmet="true" name="description" content="To start the Wave server, simply open a new terminal window and execute waved (or waved.exe on Windows)."><meta data-react-helmet="true" property="og:description" content="To start the Wave server, simply open a new terminal window and execute waved (or waved.exe on Windows)."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/_start_q"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/_start_q"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/fcfc3752.1ceac70b.js" as="script">
+<link rel="preload" href="/wave/47a365f9.7354e3ea.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">_start_q</h1></header><div class="markdown"><p>To start the Wave server, simply open a new terminal window and execute <code>wave</code> (or <code>wave.exe</code> on Windows).</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./wave</span></div></div></div></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 #</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # ┌───────────────────┐</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # │   ┬ ┬┌─┐┬  ┬┌─┐   │</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # │   │││├─┤└┐┌┘├┤    │</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # │   └┴┘┴ ┴ └┘ └─┘   │</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # └───────────────────┘</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 #</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # {&quot;address&quot;:&quot;:55555&quot;,&quot;t&quot;:&quot;listen&quot;,&quot;webroot&quot;:&quot;/home/elp/wave/www&quot;}</span></div></div></div></div></div><p>The Wave server should now be running at <a href="http://localhost:55555" target="_blank" rel="noopener noreferrer">http://localhost:55555</a>.</p><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>Don&#x27;t close this terminal window!</h5></div><div class="admonition-content"><p>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.</p></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/_start_q.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/fcfc3752.e536a904.js"></script>
-<script src="/wave/47a365f9.d7ec0ae7.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">_start_q</h1></header><div class="markdown"><p>To start the Wave server, simply open a new terminal window and execute <code>waved</code> (or <code>waved.exe</code> on Windows).</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./waved</span></div></div></div></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # ┌─────────────────────────┐</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # │  ┌    ┌ ┌──┐ ┌  ┌ ┌──┐  │ H2O Wave</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # │  │ ┌──┘ │──│ │  │ └┐    │ (version) (build)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # │  └─┘    ┘  ┘ └──┘  └─┘  │ © 2020 H2O.ai, Inc.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # └─────────────────────────┘</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # {&quot;address&quot;:&quot;:55555&quot;,&quot;t&quot;:&quot;listen&quot;,&quot;webroot&quot;:&quot;/home/elp/wave/www&quot;}</span></div></div></div></div></div><p>The Wave server should now be running at <a href="http://localhost:55555" target="_blank" rel="noopener noreferrer">http://localhost:55555</a>.</p><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>Don&#x27;t close this terminal window!</h5></div><div class="admonition-content"><p>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.</p></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/_start_q.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/fcfc3752.1ceac70b.js"></script>
+<script src="/wave/47a365f9.7354e3ea.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/api/autoreload/index.html b/docs/docs/api/autoreload/index.html
index 5d450c381e..5296867ca4 100644
--- a/docs/docs/api/autoreload/index.html
+++ b/docs/docs/api/autoreload/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Module h2o_wave.autoreload | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Module h2o_wave.autoreload | H2O Wave"><meta data-react-helmet="true" name="description" content="Functions"><meta data-react-helmet="true" property="og:description" content="Functions"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/api/autoreload"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/api/autoreload"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/28283d16.6409b930.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/28283d16.58230099.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Module h2o_wave.autoreload</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="functions"></a>Functions<a aria-hidden="true" tabindex="-1" class="hash-link" href="#functions" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="add_reload_hook"></a>add_reload_hook <a target="_blank" rel="noopener noreferrer" name="h2o_wave.autoreload.add_reload_hook"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#add_reload_hook" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">add_reload_hook</span>(fn: Callable[[], NoneType]) ‑&gt; NoneType</div><div class="api__description"><p>Add a function to be called before reloading the process.</p><p>Note that for open file and socket handles it is generally preferable to set the <code>FD_CLOEXEC</code> flag (using <code>fcntl</code> or<code>os.set_inheritable</code>) instead of using a reload hook to close them.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="main"></a>main <a target="_blank" rel="noopener noreferrer" name="h2o_wave.autoreload.main"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#main" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">main</span>() ‑&gt; NoneType</div><div class="api__description"><p>Command-line wrapper to re-run a script whenever its source changes.</p><p>Scripts may be specified by filename or module name::</p><div class="mdxCodeBlock_1XEh"><code>python -m h2o_wave -m h2o_wave.test.runtests python -m h2o_wave h2o_wave/test/runtests.py</code></div><p>Running a script with this wrapper is similar to calling<a href="#h2o_wave.autoreload.wait" title="h2o_wave.autoreload.wait">wait()</a> 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 <a href="#h2o_wave.autoreload.wait" title="h2o_wave.autoreload.wait">wait()</a>.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="rerun"></a>rerun <a target="_blank" rel="noopener noreferrer" name="h2o_wave.autoreload.rerun"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#rerun" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">rerun</span>(code: Any, glob: Dict[str, Any], loc: Union[Mapping[str, Any], NoneType] = None) ‑&gt; NoneType</div><div class="api__description"></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="start"></a>start <a target="_blank" rel="noopener noreferrer" name="h2o_wave.autoreload.start"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#start" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">start</span>(check_time: int = 500) ‑&gt; NoneType</div><div class="api__description"><p>Begins watching source files for changes.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="wait"></a>wait <a target="_blank" rel="noopener noreferrer" name="h2o_wave.autoreload.wait"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#wait" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">wait</span>() ‑&gt; NoneType</div><div class="api__description"><p>Wait for a watched file to change, then restart the process.</p><p>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 <a href="#h2o_wave.autoreload.main" title="h2o_wave.autoreload.main">main()</a>)</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="watch"></a>watch <a target="_blank" rel="noopener noreferrer" name="h2o_wave.autoreload.watch"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#watch" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">watch</span>(filename: str) ‑&gt; NoneType</div><div class="api__description"><p>Add a file to the watch list.</p><p>All imported modules are watched by default.</p></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/api/autoreload.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#functions" class="table-of-contents__link">Functions</a><ul><li><a href="#add_reload_hook" class="table-of-contents__link">add_reload_hook <a name="h2o_wave.autoreload.add_reload_hook"></a></li><li><a href="#main" class="table-of-contents__link">main <a name="h2o_wave.autoreload.main"></a></li><li><a href="#rerun" class="table-of-contents__link">rerun <a name="h2o_wave.autoreload.rerun"></a></li><li><a href="#start" class="table-of-contents__link">start <a name="h2o_wave.autoreload.start"></a></li><li><a href="#wait" class="table-of-contents__link">wait <a name="h2o_wave.autoreload.wait"></a></li><li><a href="#watch" class="table-of-contents__link">watch <a name="h2o_wave.autoreload.watch"></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/28283d16.6409b930.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Module h2o_wave.autoreload</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="functions"></a>Functions<a aria-hidden="true" tabindex="-1" class="hash-link" href="#functions" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="add_reload_hook"></a>add_reload_hook <a target="_blank" rel="noopener noreferrer" name="h2o_wave.autoreload.add_reload_hook"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#add_reload_hook" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">add_reload_hook</span>(fn: Callable[[], NoneType]) ‑&gt; NoneType</div><div class="api__description"><p>Add a function to be called before reloading the process.</p><p>Note that for open file and socket handles it is generally preferable to set the <code>FD_CLOEXEC</code> flag (using <code>fcntl</code> or<code>os.set_inheritable</code>) instead of using a reload hook to close them.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="main"></a>main <a target="_blank" rel="noopener noreferrer" name="h2o_wave.autoreload.main"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#main" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">main</span>() ‑&gt; NoneType</div><div class="api__description"><p>Command-line wrapper to re-run a script whenever its source changes.</p><p>Scripts may be specified by filename or module name::</p><div class="mdxCodeBlock_1XEh"><code>python -m h2o_wave -m h2o_wave.test.runtests python -m h2o_wave h2o_wave/test/runtests.py</code></div><p>Running a script with this wrapper is similar to calling<a href="#h2o_wave.autoreload.wait" title="h2o_wave.autoreload.wait">wait()</a> 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 <a href="#h2o_wave.autoreload.wait" title="h2o_wave.autoreload.wait">wait()</a>.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="rerun"></a>rerun <a target="_blank" rel="noopener noreferrer" name="h2o_wave.autoreload.rerun"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#rerun" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">rerun</span>(code: Any, glob: Dict[str, Any], loc: Union[Mapping[str, Any], NoneType] = None) ‑&gt; NoneType</div><div class="api__description"></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="start"></a>start <a target="_blank" rel="noopener noreferrer" name="h2o_wave.autoreload.start"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#start" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">start</span>(check_time: int = 500) ‑&gt; NoneType</div><div class="api__description"><p>Begins watching source files for changes.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="wait"></a>wait <a target="_blank" rel="noopener noreferrer" name="h2o_wave.autoreload.wait"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#wait" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">wait</span>() ‑&gt; NoneType</div><div class="api__description"><p>Wait for a watched file to change, then restart the process.</p><p>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 <a href="#h2o_wave.autoreload.main" title="h2o_wave.autoreload.main">main()</a>)</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="watch"></a>watch <a target="_blank" rel="noopener noreferrer" name="h2o_wave.autoreload.watch"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#watch" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">watch</span>(filename: str) ‑&gt; NoneType</div><div class="api__description"><p>Add a file to the watch list.</p><p>All imported modules are watched by default.</p></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/api/autoreload.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#functions" class="table-of-contents__link">Functions</a><ul><li><a href="#add_reload_hook" class="table-of-contents__link">add_reload_hook <a name="h2o_wave.autoreload.add_reload_hook"></a></li><li><a href="#main" class="table-of-contents__link">main <a name="h2o_wave.autoreload.main"></a></li><li><a href="#rerun" class="table-of-contents__link">rerun <a name="h2o_wave.autoreload.rerun"></a></li><li><a href="#start" class="table-of-contents__link">start <a name="h2o_wave.autoreload.start"></a></li><li><a href="#wait" class="table-of-contents__link">wait <a name="h2o_wave.autoreload.wait"></a></li><li><a href="#watch" class="table-of-contents__link">watch <a name="h2o_wave.autoreload.watch"></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/28283d16.58230099.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/api/cli/index.html b/docs/docs/api/cli/index.html
new file mode 100644
index 0000000000..09a7b7b97b
--- /dev/null
+++ b/docs/docs/api/cli/index.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="generator" content="Docusaurus v2.0.0-alpha.65">
+<title data-react-helmet="true">Module h2o_wave.cli | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Module h2o_wave.cli | H2O Wave"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/api/cli"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/api/cli"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/26a8c297.6b0d8d74.js" as="script">
+</head>
+<body>
+<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Module h2o_wave.cli</h1></header><div class="markdown"></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/api/cli.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/26a8c297.6b0d8d74.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/docs/api/core/index.html b/docs/docs/api/core/index.html
index d3d45797f2..181f1779bd 100644
--- a/docs/docs/api/core/index.html
+++ b/docs/docs/api/core/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Module h2o_wave.core | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Module h2o_wave.core | H2O Wave"><meta data-react-helmet="true" name="description" content="Functions"><meta data-react-helmet="true" property="og:description" content="Functions"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/api/core"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/api/core"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/36fe3260.fa6cd51c.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/36fe3260.e056d46d.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Module h2o_wave.core</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="functions"></a>Functions<a aria-hidden="true" tabindex="-1" class="hash-link" href="#functions" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="clone_expando"></a>clone_expando <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.clone_expando"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#clone_expando" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">clone_expando</span>(source: <a href="#h2o_wave.core.Expando" title="h2o_wave.core.Expando">Expando</a>, exclude_keys: Union[list, tuple, NoneType] = None, include_keys: Union[list, tuple, NoneType] = None) ‑&gt; <a href="#h2o_wave.core.Expando" title="h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Clone an expando instance. Creates a shallow clone.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>source</code></dt><dd>The expando to clone.</dd><dt><code>exclude_keys</code></dt><dd>Keys to exclude while cloning.</dd><dt><code>include_keys</code></dt><dd>Keys to include while cloning.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The expando clone.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="configure"></a>configure <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.configure"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#configure" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">configure</span>(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)</div><div class="api__description"><p>Configure networking addresses/credentials before use.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>internal_address</code></dt><dd>The local host:port to listen on.</dd><dt><code>external_address</code></dt><dd>The remote host:port of this server.</dd><dt><code>hub_address</code></dt><dd>The host:port of the Q server.</dd><dt><code>hub_access_key_id</code></dt><dd>The access key ID to use while connecting to the Q server.</dd><dt><code>hub_access_key_secret</code></dt><dd>The access key secret to use while connecting to the Q server.</dd></dl></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="copy_expando"></a>copy_expando <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.copy_expando"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#copy_expando" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">copy_expando</span>(source: <a href="#h2o_wave.core.Expando" title="h2o_wave.core.Expando">Expando</a>, target: <a href="#h2o_wave.core.Expando" title="h2o_wave.core.Expando">Expando</a>, exclude_keys: Union[list, tuple, NoneType] = None, include_keys: Union[list, tuple, NoneType] = None) ‑&gt; <a href="#h2o_wave.core.Expando" title="h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Copy all entries from the source expando instance to the target expando instance.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>source</code></dt><dd>The expando to copy from.</dd><dt><code>target</code></dt><dd>The expando to copy to.</dd><dt><code>exclude_keys</code></dt><dd>Keys to exclude while copying.</dd><dt><code>include_keys</code></dt><dd>Keys to include while copying.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The target expando.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="data"></a>data <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.data"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#data" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">data</span>(fields: Union[str, tuple, list], size: int = 0, rows: Union[dict, list, NoneType] = None, columns: Union[dict, list, NoneType] = None, pack=False) ‑&gt; Union[<a href="#h2o_wave.core.Data" title="h2o_wave.core.Data">Data</a>, str]</div><div class="api__description"><p>Create a <a href="#h2o_wave.core.Data" title="h2o_wave.core.Data">Data</a> instance for associating data with cards.</p><p><a href="#h2o_wave.core.data" title="h2o_wave.core.data">data()</a>(fields, size) creates a placeholder for data and allocates memory on the Q server.</p><p><a href="#h2o_wave.core.data" title="h2o_wave.core.data">data()</a>(fields, size, rows) creates a placeholder and initializes it with the provided rows.</p><p>If <a href="#h2o_wave.core.pack" title="h2o_wave.core.pack">pack()</a> is <code>True</code>, the <code>size</code> parameter is ignored, and the function returns a packed string representing the data.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>fields</code></dt><dd>The names of the fields (columns names) in the data, either a list or tuple or string containing space-separated names.</dd><dt><code>size</code></dt><dd>The number of rows to allocate memory for. Positive for fixed buffers, negative for circular buffers and zero for variable length buffers.</dd><dt><code>rows</code></dt><dd>The rows in this data.</dd><dt><code>columns</code></dt><dd>The columns in this data.</dd><dt><code>pack</code></dt><dd>True to return a packed string representing the data instead of a <a href="#h2o_wave.core.Data" title="h2o_wave.core.Data">Data</a> placeholder.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Either a <a href="#h2o_wave.core.Data" title="h2o_wave.core.Data">Data</a> placeholder or a packed string representing the data.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="expando_to_dict"></a>expando_to_dict <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.expando_to_dict"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#expando_to_dict" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">expando_to_dict</span>(e: <a href="#h2o_wave.core.Expando" title="h2o_wave.core.Expando">Expando</a>) ‑&gt; dict</div><div class="api__description"><p>Extract an expando&#x27;s underlying dictionary. Any modifications to the dictionary also affect the original expando.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>e</code></dt><dd>The expando instance.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The expando&#x27;s dictionary.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="marshal"></a>marshal <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.marshal"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#marshal" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">marshal</span>(d: Any) ‑&gt; str</div><div class="api__description"><p>Marshal to JSON.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>d</code></dt><dd>Any object or value.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A string containing the JSON-serialized form.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="pack"></a>pack <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.pack"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#pack" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">pack</span>(data: Any) ‑&gt; str</div><div class="api__description"><p>Pack (compress) the provided value.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>data</code></dt><dd>Any object or value.</dd></dl><p>The object or value compressed into a string.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="unmarshal"></a>unmarshal <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.unmarshal"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#unmarshal" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">unmarshal</span>(s: str) ‑&gt; Any</div><div class="api__description"><p>Unmarshal a JSON string.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>s</code></dt><dd>A string containing JSON-serialized data.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The deserialized object or value.</p></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="classes"></a>Classes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#classes" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="asyncpage"></a>AsyncPage <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.AsyncPage"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#asyncpage" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">AsyncPage</span>(site: <a href="#h2o_wave.core.AsyncSite" title="h2o_wave.core.AsyncSite">AsyncSite</a>, url: str)</div><div class="api__description"><p>Represents a reference to a remote Q page. Similar to <a href="#h2o_wave.core.Page" title="h2o_wave.core.Page">Page</a> except that this class exposes <code>async</code> methods.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>site</code></dt><dd>The parent site.</dd><dt><code>url</code></dt><dd>The URL of this page.</dd></dl></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.AsyncPage.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">load</span>(self) ‑&gt; dict</div><div class="api__description"><p>Retrieve the serialized form of this page from the remote site.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The serialized form of this page</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="poll"></a>poll <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.AsyncPage.poll"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#poll" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">poll</span>(self) ‑&gt; Q</div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="pull"></a>pull <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.AsyncPage.pull"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#pull" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">pull</span>(self) ‑&gt; Q</div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="push"></a>push <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.AsyncPage.push"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#push" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">push</span>(self)</div><div class="api__description"><p>DEPRECATED: Use <a href="#h2o_wave.core.AsyncPage.save" title="h2o_wave.core.AsyncPage.save">AsyncPage.save()</a> instead.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="save"></a>save <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.AsyncPage.save"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#save" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">save</span>(self)</div><div class="api__description"><p>Save the page. Sends all local changes made to this page to the remote site.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="ancestors"></a>Ancestors<a aria-hidden="true" tabindex="-1" class="hash-link" href="#ancestors" title="Direct link to heading">#</a></h4><ul><li><a href="#h2o_wave.core.PageBase" title="h2o_wave.core.PageBase">PageBase</a></li></ul><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="inherited-members"></a>Inherited members<a aria-hidden="true" tabindex="-1" class="hash-link" href="#inherited-members" title="Direct link to heading">#</a></h4><ul><li><a href="#h2o_wave.core.PageBase" title="h2o_wave.core.PageBase">PageBase</a>: - <a href="#h2o_wave.core.PageBase.add" title="h2o_wave.core.PageBase.add">add</a>- <a href="#h2o_wave.core.PageBase.drop" title="h2o_wave.core.PageBase.drop">drop</a></li></ul></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="asyncsite"></a>AsyncSite <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.AsyncSite"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#asyncsite" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">AsyncSite</span>(ws: websockets.server.WebSocketServerProtocol)</div><div class="api__description"><p>Represents a reference to the remote Q site. Similar to <a href="#h2o_wave.core.Site" title="h2o_wave.core.Site">Site</a> except that this class exposes <code>async</code> methods.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-1"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="download"></a>download <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.AsyncSite.download"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#download" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">download</span>(self, url: str, path: str) ‑&gt; str</div><div class="api__description"><p>Download a file from the site.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>url</code></dt><dd>The URL of the file.</dd><dt><code>path</code></dt><dd>The local directory or file path to download to. If a directory is provided, the original name of the file is retained.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The path to the downloaded file.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-1"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.AsyncSite.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">load</span>(self, url) ‑&gt; dict</div><div class="api__description"><p>Retrieve data at the given URL, typically the serialized form of a page.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>url</code></dt><dd>The URL to read.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The serialized page.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="unload"></a>unload <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.AsyncSite.unload"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#unload" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">unload</span>(self, url: str)</div><div class="api__description"><p>Delete an uploaded file from the site.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>url</code></dt><dd>The URL of the file to delete.</dd></dl></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="upload"></a>upload <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.AsyncSite.upload"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#upload" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">upload</span>(self, files: List[str]) ‑&gt; List[str]</div><div class="api__description"><p>Upload local files to the site.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>files</code></dt><dd>A list of file paths of the files to be uploaded..</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A list of remote URLs for the uploaded files, in order.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="data-1"></a>Data <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Data"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#data-1" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Data</span>(fields: Union[str, tuple, list], size: int = 0, data: Union[dict, list, NoneType] = None)</div><div class="api__description"><p>Represents a data placeholder. A data placeholder is used to allocate memory on the Q server to store data.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>fields</code></dt><dd>The names of the fields (columns names) in the data, either a list or tuple or string containing space-separated names.</dd><dt><code>size</code></dt><dd>The number of rows to allocate memory for. Positive for fixed buffers, negative for circular buffers and zero for variable length buffers.</dd><dt><code>data</code></dt><dd>Initial data. Must be either a key-row <code>dict</code> for variable-length buffers OR a row <code>list</code> for fixed-size and circular buffers.</dd></dl></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-2"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-2" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Data.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self)</div><div class="api__description"></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="expando"></a>Expando <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Expando"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#expando" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Expando</span>(args: Union[Dict, NoneType] = None)</div><div class="api__description"><p>Represents an object whose members (attributes) can be dynamically added and removed at run time.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>args</code></dt><dd>An optional <code>dict</code> of attribute-value pairs to initialize the expando instance with.</dd></dl></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="page"></a>Page <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Page"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#page" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Page</span>(site: <a href="#h2o_wave.core.Site" title="h2o_wave.core.Site">Site</a>, url: str)</div><div class="api__description"><p>Represents a reference to a remote Q page.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>site</code></dt><dd>The parent site.</dd><dt><code>url</code></dt><dd>The URL of this page.</dd></dl></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-3"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-3" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-2"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Page.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-2" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(self) ‑&gt; dict</div><div class="api__description"><p>Retrieve the serialized form of this page from the remote site.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The serialized form of this page</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="save-1"></a>save <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Page.save"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#save-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">save</span>(self)</div><div class="api__description"><p>Save the page. Sends all local changes made to this page to the remote site.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="sync"></a>sync <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Page.sync"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#sync" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">sync</span>(self)</div><div class="api__description"><p>DEPRECATED: Use <a href="#h2o_wave.core.Page.save" title="h2o_wave.core.Page.save">Page.save()</a> instead.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="ancestors-1"></a>Ancestors<a aria-hidden="true" tabindex="-1" class="hash-link" href="#ancestors-1" title="Direct link to heading">#</a></h4><ul><li><a href="#h2o_wave.core.PageBase" title="h2o_wave.core.PageBase">PageBase</a></li></ul><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="inherited-members-1"></a>Inherited members<a aria-hidden="true" tabindex="-1" class="hash-link" href="#inherited-members-1" title="Direct link to heading">#</a></h4><ul><li><a href="#h2o_wave.core.PageBase" title="h2o_wave.core.PageBase">PageBase</a>: - <a href="#h2o_wave.core.PageBase.add" title="h2o_wave.core.PageBase.add">add</a>- <a href="#h2o_wave.core.PageBase.drop" title="h2o_wave.core.PageBase.drop">drop</a></li></ul></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="pagebase"></a>PageBase <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.PageBase"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#pagebase" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">PageBase</span>(url: str)</div><div class="api__description"><p>Represents a remote page.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>url</code></dt><dd>The URL of the remote page.</dd></dl></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-4"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-4" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="add"></a>add <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.PageBase.add"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#add" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">add</span>(self, key: str, card: Any) ‑&gt; <a href="#h2o_wave.core.Ref" title="h2o_wave.core.Ref">Ref</a></div><div class="api__description"><p>Add a card to this page.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>key</code></dt><dd>The card&#x27;s key. Must uniquely identify the card on the page. Overwrites any other card with the same key.</dd><dt><code>card</code></dt><dd>A card. Use one of the <code>ui.*_card()</code> to create cards.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A reference to the added card.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="drop"></a>drop <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.PageBase.drop"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#drop" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">drop</span>(self)</div><div class="api__description"><p>Delete this page from the remote site. Same as <code>del site[url]</code>.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="subclasses"></a>Subclasses<a aria-hidden="true" tabindex="-1" class="hash-link" href="#subclasses" title="Direct link to heading">#</a></h4><ul><li><a href="#h2o_wave.core.AsyncPage" title="h2o_wave.core.AsyncPage">AsyncPage</a></li><li><a href="#h2o_wave.core.Page" title="h2o_wave.core.Page">Page</a></li></ul></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="ref"></a>Ref <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Ref"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#ref" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Ref</span>(page: <a href="#h2o_wave.core.PageBase" title="h2o_wave.core.PageBase">PageBase</a>, key: str)</div><div class="api__description"><p>Represents a local reference to an element on a <a href="#h2o_wave.core.Page" title="h2o_wave.core.Page">Page</a>. Any changes made to this local reference are tracked and sent to the remote Q server when the page is saved.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="serviceerror"></a>ServiceError <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.ServiceError"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#serviceerror" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">ServiceError</span>(*args, **kwargs)</div><div class="api__description"><p>Common base class for all non-exit exceptions.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="ancestors-2"></a>Ancestors<a aria-hidden="true" tabindex="-1" class="hash-link" href="#ancestors-2" title="Direct link to heading">#</a></h4><ul><li>builtins.Exception</li><li>builtins.BaseException</li></ul></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="site"></a>Site <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Site"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#site" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Site</span></div><div class="api__description"><p>Represents a reference to the remote Q site. A Site instance is used to obtain references to the site&#x27;s pages.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-5"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-5" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="download-1"></a>download <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Site.download"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#download-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">download</span>(self, url: str, path: str) ‑&gt; str</div><div class="api__description"><p>Download a file from the site.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>url</code></dt><dd>The URL of the file.</dd><dt><code>path</code></dt><dd>The local directory or file path to download to. If a directory is provided, the original name of the file is retained.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The path to the downloaded file.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-3"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Site.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-3" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(self, url) ‑&gt; dict</div><div class="api__description"><p>Retrieve data at the given URL, typically the serialized form of a page.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>url</code></dt><dd>The URL to read.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The serialized page.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="unload-1"></a>unload <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Site.unload"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#unload-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">unload</span>(self, url: str)</div><div class="api__description"><p>Delete an uploaded file from the site.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>url</code></dt><dd>The URL of the file to delete.</dd></dl></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="upload-1"></a>upload <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Site.upload"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#upload-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">upload</span>(self, files: List[str]) ‑&gt; List[str]</div><div class="api__description"><p>Upload local files to the site.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>files</code></dt><dd>A list of file paths of the files to be uploaded..</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A list of remote URLs for the uploaded files, in order.</p></div></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/api/core.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/api/index"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Package h2o_wave</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/api/ui"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Module h2o_wave.ui »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#functions" class="table-of-contents__link">Functions</a><ul><li><a href="#clone_expando" class="table-of-contents__link">clone_expando <a name="h2o_wave.core.clone_expando"></a></li><li><a href="#configure" class="table-of-contents__link">configure <a name="h2o_wave.core.configure"></a></li><li><a href="#copy_expando" class="table-of-contents__link">copy_expando <a name="h2o_wave.core.copy_expando"></a></li><li><a href="#data" class="table-of-contents__link">data <a name="h2o_wave.core.data"></a></li><li><a href="#expando_to_dict" class="table-of-contents__link">expando_to_dict <a name="h2o_wave.core.expando_to_dict"></a></li><li><a href="#marshal" class="table-of-contents__link">marshal <a name="h2o_wave.core.marshal"></a></li><li><a href="#pack" class="table-of-contents__link">pack <a name="h2o_wave.core.pack"></a></li><li><a href="#unmarshal" class="table-of-contents__link">unmarshal <a name="h2o_wave.core.unmarshal"></a></li></ul></li><li><a href="#classes" class="table-of-contents__link">Classes</a><ul><li><a href="#asyncpage" class="table-of-contents__link">AsyncPage <a name="h2o_wave.core.AsyncPage"></a></li><li><a href="#asyncsite" class="table-of-contents__link">AsyncSite <a name="h2o_wave.core.AsyncSite"></a></li><li><a href="#data-1" class="table-of-contents__link">Data <a name="h2o_wave.core.Data"></a></li><li><a href="#expando" class="table-of-contents__link">Expando <a name="h2o_wave.core.Expando"></a></li><li><a href="#page" class="table-of-contents__link">Page <a name="h2o_wave.core.Page"></a></li><li><a href="#pagebase" class="table-of-contents__link">PageBase <a name="h2o_wave.core.PageBase"></a></li><li><a href="#ref" class="table-of-contents__link">Ref <a name="h2o_wave.core.Ref"></a></li><li><a href="#serviceerror" class="table-of-contents__link">ServiceError <a name="h2o_wave.core.ServiceError"></a></li><li><a href="#site" class="table-of-contents__link">Site <a name="h2o_wave.core.Site"></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/36fe3260.fa6cd51c.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Module h2o_wave.core</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="functions"></a>Functions<a aria-hidden="true" tabindex="-1" class="hash-link" href="#functions" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="clone_expando"></a>clone_expando <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.clone_expando"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#clone_expando" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">clone_expando</span>(source: <a href="#h2o_wave.core.Expando" title="h2o_wave.core.Expando">Expando</a>, exclude_keys: Union[list, tuple, NoneType] = None, include_keys: Union[list, tuple, NoneType] = None) ‑&gt; <a href="#h2o_wave.core.Expando" title="h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Clone an expando instance. Creates a shallow clone.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>source</code></dt><dd>The expando to clone.</dd><dt><code>exclude_keys</code></dt><dd>Keys to exclude while cloning.</dd><dt><code>include_keys</code></dt><dd>Keys to include while cloning.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The expando clone.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="copy_expando"></a>copy_expando <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.copy_expando"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#copy_expando" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">copy_expando</span>(source: <a href="#h2o_wave.core.Expando" title="h2o_wave.core.Expando">Expando</a>, target: <a href="#h2o_wave.core.Expando" title="h2o_wave.core.Expando">Expando</a>, exclude_keys: Union[list, tuple, NoneType] = None, include_keys: Union[list, tuple, NoneType] = None) ‑&gt; <a href="#h2o_wave.core.Expando" title="h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Copy all entries from the source expando instance to the target expando instance.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>source</code></dt><dd>The expando to copy from.</dd><dt><code>target</code></dt><dd>The expando to copy to.</dd><dt><code>exclude_keys</code></dt><dd>Keys to exclude while copying.</dd><dt><code>include_keys</code></dt><dd>Keys to include while copying.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The target expando.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="data"></a>data <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.data"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#data" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">data</span>(fields: Union[str, tuple, list], size: int = 0, rows: Union[dict, list, NoneType] = None, columns: Union[dict, list, NoneType] = None, pack=False) ‑&gt; Union[<a href="#h2o_wave.core.Data" title="h2o_wave.core.Data">Data</a>, str]</div><div class="api__description"><p>Create a <a href="#h2o_wave.core.Data" title="h2o_wave.core.Data">Data</a> instance for associating data with cards.</p><p><a href="#h2o_wave.core.data" title="h2o_wave.core.data">data()</a>(fields, size) creates a placeholder for data and allocates memory on the Wave server.</p><p><a href="#h2o_wave.core.data" title="h2o_wave.core.data">data()</a>(fields, size, rows) creates a placeholder and initializes it with the provided rows.</p><p>If <a href="#h2o_wave.core.pack" title="h2o_wave.core.pack">pack()</a> is <code>True</code>, the <code>size</code> parameter is ignored, and the function returns a packed string representing the data.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>fields</code></dt><dd>The names of the fields (columns names) in the data, either a list or tuple or string containing space-separated names.</dd><dt><code>size</code></dt><dd>The number of rows to allocate memory for. Positive for fixed buffers, negative for circular buffers and zero for variable length buffers.</dd><dt><code>rows</code></dt><dd>The rows in this data.</dd><dt><code>columns</code></dt><dd>The columns in this data.</dd><dt><code>pack</code></dt><dd>True to return a packed string representing the data instead of a <a href="#h2o_wave.core.Data" title="h2o_wave.core.Data">Data</a> placeholder.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Either a <a href="#h2o_wave.core.Data" title="h2o_wave.core.Data">Data</a> placeholder or a packed string representing the data.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="expando_to_dict"></a>expando_to_dict <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.expando_to_dict"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#expando_to_dict" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">expando_to_dict</span>(e: <a href="#h2o_wave.core.Expando" title="h2o_wave.core.Expando">Expando</a>) ‑&gt; dict</div><div class="api__description"><p>Extract an expando&#x27;s underlying dictionary. Any modifications to the dictionary also affect the original expando.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>e</code></dt><dd>The expando instance.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The expando&#x27;s dictionary.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="marshal"></a>marshal <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.marshal"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#marshal" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">marshal</span>(d: Any) ‑&gt; str</div><div class="api__description"><p>Marshal to JSON.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>d</code></dt><dd>Any object or value.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A string containing the JSON-serialized form.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="pack"></a>pack <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.pack"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#pack" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">pack</span>(data: Any) ‑&gt; str</div><div class="api__description"><p>Pack (compress) the provided value.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>data</code></dt><dd>Any object or value.</dd></dl><p>The object or value compressed into a string.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="unmarshal"></a>unmarshal <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.unmarshal"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#unmarshal" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">unmarshal</span>(s: str) ‑&gt; Any</div><div class="api__description"><p>Unmarshal a JSON string.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>s</code></dt><dd>A string containing JSON-serialized data.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The deserialized object or value.</p></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="classes"></a>Classes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#classes" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="asyncpage"></a>AsyncPage <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.AsyncPage"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#asyncpage" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">AsyncPage</span>(site: <a href="#h2o_wave.core.AsyncSite" title="h2o_wave.core.AsyncSite">AsyncSite</a>, url: str)</div><div class="api__description"><p>Represents a reference to a remote Wave page. Similar to <a href="#h2o_wave.core.Page" title="h2o_wave.core.Page">Page</a> except that this class exposes <code>async</code> methods.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>site</code></dt><dd>The parent site.</dd><dt><code>url</code></dt><dd>The URL of this page.</dd></dl></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.AsyncPage.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">load</span>(self) ‑&gt; dict</div><div class="api__description"><p>Retrieve the serialized form of this page from the remote site.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The serialized form of this page</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="push"></a>push <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.AsyncPage.push"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#push" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">push</span>(self)</div><div class="api__description"><p>DEPRECATED: Use <a href="#h2o_wave.core.AsyncPage.save" title="h2o_wave.core.AsyncPage.save">AsyncPage.save()</a> instead.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="save"></a>save <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.AsyncPage.save"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#save" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">save</span>(self)</div><div class="api__description"><p>Save the page. Sends all local changes made to this page to the remote site.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="ancestors"></a>Ancestors<a aria-hidden="true" tabindex="-1" class="hash-link" href="#ancestors" title="Direct link to heading">#</a></h4><ul><li><a href="#h2o_wave.core.PageBase" title="h2o_wave.core.PageBase">PageBase</a></li></ul><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="inherited-members"></a>Inherited members<a aria-hidden="true" tabindex="-1" class="hash-link" href="#inherited-members" title="Direct link to heading">#</a></h4><ul><li><a href="#h2o_wave.core.PageBase" title="h2o_wave.core.PageBase">PageBase</a>: - <a href="#h2o_wave.core.PageBase.add" title="h2o_wave.core.PageBase.add">add</a>- <a href="#h2o_wave.core.PageBase.drop" title="h2o_wave.core.PageBase.drop">drop</a></li></ul></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="asyncsite"></a>AsyncSite <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.AsyncSite"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#asyncsite" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">AsyncSite</span></div><div class="api__description"><p>Represents a reference to the remote Wave site. Similar to <a href="#h2o_wave.core.Site" title="h2o_wave.core.Site">Site</a> except that this class exposes <code>async</code> methods.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-1"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="download"></a>download <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.AsyncSite.download"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#download" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">download</span>(self, url: str, path: str) ‑&gt; str</div><div class="api__description"><p>Download a file from the site.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>url</code></dt><dd>The URL of the file.</dd><dt><code>path</code></dt><dd>The local directory or file path to download to. If a directory is provided, the original name of the file is retained.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The path to the downloaded file.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-1"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.AsyncSite.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">load</span>(self, url) ‑&gt; dict</div><div class="api__description"><p>Retrieve data at the given URL, typically the serialized form of a page.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>url</code></dt><dd>The URL to read.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The serialized page.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="unload"></a>unload <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.AsyncSite.unload"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#unload" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">unload</span>(self, url: str)</div><div class="api__description"><p>Delete an uploaded file from the site.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>url</code></dt><dd>The URL of the file to delete.</dd></dl></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="upload"></a>upload <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.AsyncSite.upload"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#upload" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">upload</span>(self, files: List[str]) ‑&gt; List[str]</div><div class="api__description"><p>Upload local files to the site.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>files</code></dt><dd>A list of file paths of the files to be uploaded..</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A list of remote URLs for the uploaded files, in order.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="data-1"></a>Data <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Data"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#data-1" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Data</span>(fields: Union[str, tuple, list], size: int = 0, data: Union[dict, list, NoneType] = None)</div><div class="api__description"><p>Represents a data placeholder. A data placeholder is used to allocate memory on the Wave server to store data.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>fields</code></dt><dd>The names of the fields (columns names) in the data, either a list or tuple or string containing space-separated names.</dd><dt><code>size</code></dt><dd>The number of rows to allocate memory for. Positive for fixed buffers, negative for circular buffers and zero for variable length buffers.</dd><dt><code>data</code></dt><dd>Initial data. Must be either a key-row <code>dict</code> for variable-length buffers OR a row <code>list</code> for fixed-size and circular buffers.</dd></dl></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-2"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-2" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Data.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self)</div><div class="api__description"></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="expando"></a>Expando <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Expando"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#expando" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Expando</span>(args: Union[Dict, NoneType] = None)</div><div class="api__description"><p>Represents an object whose members (attributes) can be dynamically added and removed at run time.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>args</code></dt><dd>An optional <code>dict</code> of attribute-value pairs to initialize the expando instance with.</dd></dl></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="page"></a>Page <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Page"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#page" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Page</span>(site: <a href="#h2o_wave.core.Site" title="h2o_wave.core.Site">Site</a>, url: str)</div><div class="api__description"><p>Represents a reference to a remote Wave page.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>site</code></dt><dd>The parent site.</dd><dt><code>url</code></dt><dd>The URL of this page.</dd></dl></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-3"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-3" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-2"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Page.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-2" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(self) ‑&gt; dict</div><div class="api__description"><p>Retrieve the serialized form of this page from the remote site.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The serialized form of this page</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="save-1"></a>save <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Page.save"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#save-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">save</span>(self)</div><div class="api__description"><p>Save the page. Sends all local changes made to this page to the remote site.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="sync"></a>sync <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Page.sync"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#sync" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">sync</span>(self)</div><div class="api__description"><p>DEPRECATED: Use <a href="#h2o_wave.core.Page.save" title="h2o_wave.core.Page.save">Page.save()</a> instead.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="ancestors-1"></a>Ancestors<a aria-hidden="true" tabindex="-1" class="hash-link" href="#ancestors-1" title="Direct link to heading">#</a></h4><ul><li><a href="#h2o_wave.core.PageBase" title="h2o_wave.core.PageBase">PageBase</a></li></ul><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="inherited-members-1"></a>Inherited members<a aria-hidden="true" tabindex="-1" class="hash-link" href="#inherited-members-1" title="Direct link to heading">#</a></h4><ul><li><a href="#h2o_wave.core.PageBase" title="h2o_wave.core.PageBase">PageBase</a>: - <a href="#h2o_wave.core.PageBase.add" title="h2o_wave.core.PageBase.add">add</a>- <a href="#h2o_wave.core.PageBase.drop" title="h2o_wave.core.PageBase.drop">drop</a></li></ul></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="pagebase"></a>PageBase <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.PageBase"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#pagebase" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">PageBase</span>(url: str)</div><div class="api__description"><p>Represents a remote page.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>url</code></dt><dd>The URL of the remote page.</dd></dl></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-4"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-4" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="add"></a>add <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.PageBase.add"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#add" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">add</span>(self, key: str, card: Any) ‑&gt; <a href="#h2o_wave.core.Ref" title="h2o_wave.core.Ref">Ref</a></div><div class="api__description"><p>Add a card to this page.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>key</code></dt><dd>The card&#x27;s key. Must uniquely identify the card on the page. Overwrites any other card with the same key.</dd><dt><code>card</code></dt><dd>A card. Use one of the <code>ui.*_card()</code> to create cards.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A reference to the added card.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="drop"></a>drop <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.PageBase.drop"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#drop" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">drop</span>(self)</div><div class="api__description"><p>Delete this page from the remote site. Same as <code>del site[url]</code>.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="subclasses"></a>Subclasses<a aria-hidden="true" tabindex="-1" class="hash-link" href="#subclasses" title="Direct link to heading">#</a></h4><ul><li><a href="#h2o_wave.core.AsyncPage" title="h2o_wave.core.AsyncPage">AsyncPage</a></li><li><a href="#h2o_wave.core.Page" title="h2o_wave.core.Page">Page</a></li></ul></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="ref"></a>Ref <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Ref"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#ref" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Ref</span>(page: <a href="#h2o_wave.core.PageBase" title="h2o_wave.core.PageBase">PageBase</a>, key: str)</div><div class="api__description"><p>Represents a local reference to an element on a <a href="#h2o_wave.core.Page" title="h2o_wave.core.Page">Page</a>. Any changes made to this local reference are tracked and sent to the remote Wave server when the page is saved.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="serviceerror"></a>ServiceError <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.ServiceError"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#serviceerror" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">ServiceError</span>(*args, **kwargs)</div><div class="api__description"><p>Common base class for all non-exit exceptions.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="ancestors-2"></a>Ancestors<a aria-hidden="true" tabindex="-1" class="hash-link" href="#ancestors-2" title="Direct link to heading">#</a></h4><ul><li>builtins.Exception</li><li>builtins.BaseException</li></ul></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="site"></a>Site <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Site"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#site" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Site</span></div><div class="api__description"><p>Represents a reference to the remote Wave site. A Site instance is used to obtain references to the site&#x27;s pages.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-5"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-5" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="download-1"></a>download <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Site.download"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#download-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">download</span>(self, url: str, path: str) ‑&gt; str</div><div class="api__description"><p>Download a file from the site.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>url</code></dt><dd>The URL of the file.</dd><dt><code>path</code></dt><dd>The local directory or file path to download to. If a directory is provided, the original name of the file is retained.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The path to the downloaded file.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-3"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Site.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-3" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(self, url) ‑&gt; dict</div><div class="api__description"><p>Retrieve data at the given URL, typically the serialized form of a page.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>url</code></dt><dd>The URL to read.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The serialized page.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="unload-1"></a>unload <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Site.unload"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#unload-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">unload</span>(self, url: str)</div><div class="api__description"><p>Delete an uploaded file from the site.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>url</code></dt><dd>The URL of the file to delete.</dd></dl></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="upload-1"></a>upload <a target="_blank" rel="noopener noreferrer" name="h2o_wave.core.Site.upload"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#upload-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">upload</span>(self, files: List[str]) ‑&gt; List[str]</div><div class="api__description"><p>Upload local files to the site.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>files</code></dt><dd>A list of file paths of the files to be uploaded..</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A list of remote URLs for the uploaded files, in order.</p></div></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/api/core.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/api/index"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Package h2o_wave</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/api/ui"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Module h2o_wave.ui »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#functions" class="table-of-contents__link">Functions</a><ul><li><a href="#clone_expando" class="table-of-contents__link">clone_expando <a name="h2o_wave.core.clone_expando"></a></li><li><a href="#copy_expando" class="table-of-contents__link">copy_expando <a name="h2o_wave.core.copy_expando"></a></li><li><a href="#data" class="table-of-contents__link">data <a name="h2o_wave.core.data"></a></li><li><a href="#expando_to_dict" class="table-of-contents__link">expando_to_dict <a name="h2o_wave.core.expando_to_dict"></a></li><li><a href="#marshal" class="table-of-contents__link">marshal <a name="h2o_wave.core.marshal"></a></li><li><a href="#pack" class="table-of-contents__link">pack <a name="h2o_wave.core.pack"></a></li><li><a href="#unmarshal" class="table-of-contents__link">unmarshal <a name="h2o_wave.core.unmarshal"></a></li></ul></li><li><a href="#classes" class="table-of-contents__link">Classes</a><ul><li><a href="#asyncpage" class="table-of-contents__link">AsyncPage <a name="h2o_wave.core.AsyncPage"></a></li><li><a href="#asyncsite" class="table-of-contents__link">AsyncSite <a name="h2o_wave.core.AsyncSite"></a></li><li><a href="#data-1" class="table-of-contents__link">Data <a name="h2o_wave.core.Data"></a></li><li><a href="#expando" class="table-of-contents__link">Expando <a name="h2o_wave.core.Expando"></a></li><li><a href="#page" class="table-of-contents__link">Page <a name="h2o_wave.core.Page"></a></li><li><a href="#pagebase" class="table-of-contents__link">PageBase <a name="h2o_wave.core.PageBase"></a></li><li><a href="#ref" class="table-of-contents__link">Ref <a name="h2o_wave.core.Ref"></a></li><li><a href="#serviceerror" class="table-of-contents__link">ServiceError <a name="h2o_wave.core.ServiceError"></a></li><li><a href="#site" class="table-of-contents__link">Site <a name="h2o_wave.core.Site"></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/36fe3260.e056d46d.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/api/db/index.html b/docs/docs/api/db/index.html
index 27eff84c7e..c4d2c9d602 100644
--- a/docs/docs/api/db/index.html
+++ b/docs/docs/api/db/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Module h2o_wave.db | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Module h2o_wave.db | H2O Wave"><meta data-react-helmet="true" name="description" content="Classes"><meta data-react-helmet="true" property="og:description" content="Classes"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/api/db"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/api/db"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/a50fe136.400473bd.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/a50fe136.b26e4f55.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Module h2o_wave.db</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="classes"></a>Classes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#classes" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="teledb"></a>TeleDB <a target="_blank" rel="noopener noreferrer" name="h2o_wave.db.TeleDB"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#teledb" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TeleDB</span>(address: str, key_id: str, key_secret: str)</div><div class="api__description"><p>Represents a TeleDB database client.</p><p>Create a new client instance.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>address</code></dt><dd>database address</dd><dt><code>key_id</code></dt><dd>access key id</dd><dt><code>key_secret</code></dt><dd>access key secret</dd></dl></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="teledberror"></a>TeleDBError <a target="_blank" rel="noopener noreferrer" name="h2o_wave.db.TeleDBError"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#teledberror" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TeleDBError</span>(*args, **kwargs)</div><div class="api__description"><p>Represents a remote exception thrown by the TeleDB database server.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="ancestors"></a>Ancestors<a aria-hidden="true" tabindex="-1" class="hash-link" href="#ancestors" title="Direct link to heading">#</a></h4><ul><li>builtins.Exception</li><li>builtins.BaseException</li></ul></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/api/db.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#classes" class="table-of-contents__link">Classes</a><ul><li><a href="#teledb" class="table-of-contents__link">TeleDB <a name="h2o_wave.db.TeleDB"></a></li><li><a href="#teledberror" class="table-of-contents__link">TeleDBError <a name="h2o_wave.db.TeleDBError"></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/a50fe136.400473bd.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Module h2o_wave.db</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="classes"></a>Classes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#classes" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="teledb"></a>TeleDB <a target="_blank" rel="noopener noreferrer" name="h2o_wave.db.TeleDB"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#teledb" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TeleDB</span>(address: str, key_id: str, key_secret: str)</div><div class="api__description"><p>Represents a TeleDB database client.</p><p>Create a new client instance.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>address</code></dt><dd>database address</dd><dt><code>key_id</code></dt><dd>access key id</dd><dt><code>key_secret</code></dt><dd>access key secret</dd></dl></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="teledberror"></a>TeleDBError <a target="_blank" rel="noopener noreferrer" name="h2o_wave.db.TeleDBError"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#teledberror" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TeleDBError</span>(*args, **kwargs)</div><div class="api__description"><p>Represents a remote exception thrown by the TeleDB database server.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="ancestors"></a>Ancestors<a aria-hidden="true" tabindex="-1" class="hash-link" href="#ancestors" title="Direct link to heading">#</a></h4><ul><li>builtins.Exception</li><li>builtins.BaseException</li></ul></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/api/db.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#classes" class="table-of-contents__link">Classes</a><ul><li><a href="#teledb" class="table-of-contents__link">TeleDB <a name="h2o_wave.db.TeleDB"></a></li><li><a href="#teledberror" class="table-of-contents__link">TeleDBError <a name="h2o_wave.db.TeleDBError"></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/a50fe136.b26e4f55.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/api/graphics/index.html b/docs/docs/api/graphics/index.html
index 964e7ad1c1..9bdfe0b7ac 100644
--- a/docs/docs/api/graphics/index.html
+++ b/docs/docs/api/graphics/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Module h2o_wave.graphics | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Module h2o_wave.graphics | H2O Wave"><meta data-react-helmet="true" name="description" content="Functions"><meta data-react-helmet="true" property="og:description" content="Functions"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/api/graphics"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/api/graphics"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/7f8f4b62.3bcf3283.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/7f8f4b62.5c0f0fc4.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Module h2o_wave.graphics</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="functions"></a>Functions<a aria-hidden="true" tabindex="-1" class="hash-link" href="#functions" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="arc"></a>arc <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.arc"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#arc" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">arc</span>(r1: float, r2: float, a1: float, a2: float, **kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw circular or annular sector, as in a pie or donut chart, centered at (0, 0).</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>r1</code></dt><dd>inner radius.</dd><dt><code>r2</code></dt><dd>outer radius.</dd><dt><code>a1</code></dt><dd>start angle, in degrees.</dd><dt><code>a2</code></dt><dd>end angle, in degrees.</dd><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="circle"></a>circle <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.circle"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#circle" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">circle</span>(**kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw a circle. See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="draw"></a>draw <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.draw"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#draw" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">draw</span>(element: <a title="h2o_wave.core.Ref" href="/wave/docs/api/core#h2o_wave.core.Ref">Ref</a>, **kwargs) ‑&gt; <a title="h2o_wave.core.Ref" href="/wave/docs/api/core#h2o_wave.core.Ref">Ref</a></div><div class="api__description"><p>Schedule a redraw of the specified graphical element using the provided attributes.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>element</code></dt><dd>A reference to a graphical element.</dd><dt><code>kwargs</code></dt><dd>Attributes to use while performing a redraw.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The element reference, without change.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="ellipse"></a>ellipse <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.ellipse"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#ellipse" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">ellipse</span>(**kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw an ellipse. See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="image"></a>image <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.image"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#image" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">image</span>(**kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw an image. See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="line"></a>line <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.line"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#line" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">line</span>(**kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw a line. See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="p"></a>p <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.p"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#p" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">p</span>() ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Create a new <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a>.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A new <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a>.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="path"></a>path <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.path"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#path" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">path</span>(**kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw a path. See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="polygon"></a>polygon <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.polygon"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#polygon" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">polygon</span>(**kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw a polygon. See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="polyline"></a>polyline <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.polyline"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#polyline" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">polyline</span>(**kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw a polyline. See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="rect"></a>rect <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.rect"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#rect" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">rect</span>(**kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw a rectangle. See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="reset"></a>reset <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.reset"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#reset" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">reset</span>(element: <a title="h2o_wave.core.Ref" href="/wave/docs/api/core#h2o_wave.core.Ref">Ref</a>) ‑&gt; <a title="h2o_wave.core.Ref" href="/wave/docs/api/core#h2o_wave.core.Ref">Ref</a></div><div class="api__description"><p>Schedule a redraw of the specified graphical element using its original attributes. Calling this function clears any changes performed using the <a href="#h2o_wave.graphics.draw" title="h2o_wave.graphics.draw">draw()</a> function.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>element</code></dt><dd>A reference to a graphical element.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The element reference, without change.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="scene"></a>scene <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.scene"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#scene" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">scene</span>(**kwargs) ‑&gt; <a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a></div><div class="api__description"><p>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 <a href="#h2o_wave.graphics.scene" title="h2o_wave.graphics.scene">scene()</a> property of a <a title="h2o_wave.types.GraphicsCard" href="/wave/docs/api/types#h2o_wave.types.GraphicsCard">GraphicsCard</a>.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Graphical elements to render as part of the scene.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="spline"></a>spline <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.spline"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#spline" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">spline</span>(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) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw a spline.</p><p>If x, y are specified, draws a regular spline.</p><p>If x, y, y0 are specified, draws a horizontal area spline. Sets baseline to zero if y0 is an empty list.</p><p>If x, x0, y are specified, draws a vertical area spline. Sets baseline to zero if x0 is an empty list</p><p>Missing information is rendered as gaps in the spline.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>x-coordinates.</dd><dt><code>y</code></dt><dd>y-coordinates.</dd><dt><code>x0</code></dt><dd>base x-coordinates.</dd><dt><code>y0</code></dt><dd>base y-coordinates.</dd><dt><code>curve</code></dt><dd>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.</dd><dt><code>radial</code></dt><dd>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).</dd><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="stage"></a>stage <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.stage"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#stage" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">stage</span>(**kwargs) ‑&gt; str</div><div class="api__description"><p>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 <a href="#h2o_wave.graphics.stage" title="h2o_wave.graphics.stage">stage()</a> property of a <a title="h2o_wave.types.GraphicsCard" href="/wave/docs/api/types#h2o_wave.types.GraphicsCard">GraphicsCard</a>.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Graphical elements to render as part of the stage.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Packed data.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="text"></a>text <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.text"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#text" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">text</span>(text: str, **kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw text. See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>text</code></dt><dd>The text content.</dd><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="turtle"></a>turtle <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.turtle"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#turtle" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">turtle</span>(x=0.0, y=0.0, degrees=0.0) ‑&gt; <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a></div><div class="api__description"><p>Create a new <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a>.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>initial position x</dd><dt><code>y</code></dt><dd>initial position y</dd><dt><code>degrees</code></dt><dd>initial angle in degrees</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A new <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a>.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="type_of"></a>type_of <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.type_of"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#type_of" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">type_of</span>(element: <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a>) ‑&gt; Union[str, NoneType]</div><div class="api__description"><p>Get the type of the graphical element.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>element</code></dt><dd>A graphical element.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A string indicating the type of the element, e.g. &#x27;circle&#x27;, &#x27;line&#x27;, etc.</p></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="classes"></a>Classes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#classes" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="path-1"></a>Path <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#path-1" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Path</span></div><div class="api__description"><p>A convenience class for drawing SVG paths.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="a"></a>A <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.A"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#a" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">A</span>(self, rx: float, ry: float, x_axis_rotation: float, large_arc: bool, sweep: bool, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>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 <code>x_axis_rotation</code>, 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. <code>large_arc</code> and <code>sweep_flag</code>contribute to the automatic calculations and help determine how the arc is drawn. In absolute coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>rx</code></dt><dd>x-radius</dd><dt><code>ry</code></dt><dd>y-radius</dd><dt><code>x_axis_rotation</code></dt><dd>Rotation in degrees.</dd><dt><code>large_arc</code></dt><dd>Determines if the arc should be greater than or less than 180 degrees.</dd><dt><code>sweep</code></dt><dd>Determines if the arc should begin moving at positive angles or negative ones.</dd><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="c"></a>C <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.C"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#c" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">C</span>(self, x1: float, y1: float, x2: float, y2: float, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>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.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x1</code></dt><dd>x-coordinate of first control point</dd><dt><code>y1</code></dt><dd>y-coordinate of first control point</dd><dt><code>x2</code></dt><dd>x-coordinate of second control point</dd><dt><code>y2</code></dt><dd>y-coordinate of second control point</dd><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="h"></a>H <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.H"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#h" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">H</span>(self, x: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Draws a horizontal line from the current point. In absolute coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>x-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="l"></a>L <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.L"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#l" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">L</span>(self, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. In absolute coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="m"></a>M <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.M"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#m" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">M</span>(self, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Start a new sub-path at the given (x,y) coordinates. In absolute coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="q"></a>Q <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.Q"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#q" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">Q</span>(self, x1: float, y1: float, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point. In absolute coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x1</code></dt><dd>x-coordinate of first control point</dd><dt><code>y1</code></dt><dd>y-coordinate of first control point</dd><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="s"></a>S <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.S"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#s" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">S</span>(self, x2: float, y2: float, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>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.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x2</code></dt><dd>x-coordinate of second control point</dd><dt><code>y2</code></dt><dd>y-coordinate of second control point</dd><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="t"></a>T <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.T"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#t" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">T</span>(self, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>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.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v"></a>V <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.V"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#v" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">V</span>(self, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Draws a vertical line from the current point. In absolute coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="z"></a>Z <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.Z"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#z" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">Z</span>(self) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Close the current subpath by connecting it back to the current subpath&#x27;s initial point.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="a-1"></a>a <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.a"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#a-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">a</span>(self, rx: float, ry: float, x_axis_rotation: float, large_arc: bool, sweep: bool, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>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 <code>x_axis_rotation</code>, 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. <code>large_arc</code> and <code>sweep_flag</code>contribute to the automatic calculations and help determine how the arc is drawn. In relative coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>rx</code></dt><dd>x-radius</dd><dt><code>ry</code></dt><dd>y-radius</dd><dt><code>x_axis_rotation</code></dt><dd>Rotation in degrees.</dd><dt><code>large_arc</code></dt><dd>Determines if the arc should be greater than or less than 180 degrees.</dd><dt><code>sweep</code></dt><dd>Determines if the arc should begin moving at positive angles or negative ones.</dd><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="c-1"></a>c <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.c"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#c-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">c</span>(self, x1: float, y1: float, x2: float, y2: float, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>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.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x1</code></dt><dd>x-coordinate of first control point</dd><dt><code>y1</code></dt><dd>y-coordinate of first control point</dd><dt><code>x2</code></dt><dd>x-coordinate of second control point</dd><dt><code>y2</code></dt><dd>y-coordinate of second control point</dd><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="d"></a>d <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.d"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#d" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">d</span>(self) ‑&gt; str</div><div class="api__description"><p>Serialize this path&#x27;s commands into SVG path data.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The <code>d</code> attribute for a SVG path.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="h-1"></a>h <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.h"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#h-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">h</span>(self, x: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Draws a horizontal line from the current point. In relative coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>x-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="l-1"></a>l <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.l"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#l-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">l</span>(self, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. In relative coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="m-1"></a>m <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.m"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#m-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">m</span>(self, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Start a new sub-path at the given (x,y) coordinates. In relative coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="path-2"></a>path <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.path"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#path-2" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">path</span>(self, **kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>A SVG path element representing the commands in this <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance. Same as calling <code>h2o_wave.graphics.path(d=path.d())</code></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Additional attributes for the SVG path element.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A SVG path element.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="q-1"></a>q <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.q"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#q-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">q</span>(self, x1: float, y1: float, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point. In relative coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x1</code></dt><dd>x-coordinate of first control point</dd><dt><code>y1</code></dt><dd>y-coordinate of first control point</dd><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="s-1"></a>s <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.s"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#s-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">s</span>(self, x2: float, y2: float, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>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.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x2</code></dt><dd>x-coordinate of second control point</dd><dt><code>y2</code></dt><dd>y-coordinate of second control point</dd><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="t-1"></a>t <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.t"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#t-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">t</span>(self, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>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.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v-1"></a>v <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.v"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#v-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">v</span>(self, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Draws a vertical line from the current point. In relative coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="z-1"></a>z <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.z"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#z-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">z</span>(self) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Close the current subpath by connecting it back to the current subpath&#x27;s initial point.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="turtle-1"></a>Turtle <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#turtle-1" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Turtle</span>(x=0.0, y=0.0, degrees=0.0)</div><div class="api__description"><p>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.</p><p>Create a Turtle.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>initial position x</dd><dt><code>y</code></dt><dd>initial position y</dd><dt><code>degrees</code></dt><dd>initial angle in degrees</dd></dl></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-1"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="a-2"></a>a <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle.a"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#a-2" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">a</span>(self, degrees: float = 0) ‑&gt; <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a></div><div class="api__description"><p>Set the turtle&#x27;s orientation.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>degrees</code></dt><dd>angle in degrees</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current turtle instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="b"></a>b <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle.b"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#b" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">b</span>(self, distance: float) ‑&gt; <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a></div><div class="api__description"><p>Move backward.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>distance</code></dt><dd>Distance to move by.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current turtle instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="d-1"></a>d <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle.d"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#d-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">d</span>(self) ‑&gt; str</div><div class="api__description"><p>Serialize this turtle&#x27;s movements into SVG path data.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The <code>d</code> attribute for a SVG path.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="f"></a>f <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle.f"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#f" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">f</span>(self, distance: float) ‑&gt; <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a></div><div class="api__description"><p>Move forward.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>distance</code></dt><dd>Distance to move by.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current turtle instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="l-2"></a>l <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle.l"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#l-2" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">l</span>(self, degrees: float) ‑&gt; <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a></div><div class="api__description"><p>Turn left.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>degrees</code></dt><dd>Angle in degrees.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current turtle instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="p-1"></a>p <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle.p"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#p-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">p</span>(self, x: float = 0.0, y: float = 0.0) ‑&gt; <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a></div><div class="api__description"><p>Set the turtle&#x27;s position.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current turtle instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="path-3"></a>path <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle.path"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#path-3" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">path</span>(self, **kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Create a SVG path element that represents this turtle&#x27;s movements.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Additional attributes for the SVG path element.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A SVG path element.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="pd"></a>pd <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle.pd"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#pd" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">pd</span>(self) ‑&gt; <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a></div><div class="api__description"><p>Pen down.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current turtle instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="pu"></a>pu <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle.pu"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#pu" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">pu</span>(self, close: bool) ‑&gt; <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a></div><div class="api__description"><p>Pen up.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>close</code></dt><dd>Whether to close the current subpath.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current turtle instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="r"></a>r <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle.r"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#r" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">r</span>(self, degrees: float) ‑&gt; <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a></div><div class="api__description"><p>Turn right.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>degrees</code></dt><dd>Angle in degrees.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current turtle instance.</p></div></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/api/graphics.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/api/server"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Module h2o_wave.server</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/api/types"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Module h2o_wave.types »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#functions" class="table-of-contents__link">Functions</a><ul><li><a href="#arc" class="table-of-contents__link">arc <a name="h2o_wave.graphics.arc"></a></li><li><a href="#circle" class="table-of-contents__link">circle <a name="h2o_wave.graphics.circle"></a></li><li><a href="#draw" class="table-of-contents__link">draw <a name="h2o_wave.graphics.draw"></a></li><li><a href="#ellipse" class="table-of-contents__link">ellipse <a name="h2o_wave.graphics.ellipse"></a></li><li><a href="#image" class="table-of-contents__link">image <a name="h2o_wave.graphics.image"></a></li><li><a href="#line" class="table-of-contents__link">line <a name="h2o_wave.graphics.line"></a></li><li><a href="#p" class="table-of-contents__link">p <a name="h2o_wave.graphics.p"></a></li><li><a href="#path" class="table-of-contents__link">path <a name="h2o_wave.graphics.path"></a></li><li><a href="#polygon" class="table-of-contents__link">polygon <a name="h2o_wave.graphics.polygon"></a></li><li><a href="#polyline" class="table-of-contents__link">polyline <a name="h2o_wave.graphics.polyline"></a></li><li><a href="#rect" class="table-of-contents__link">rect <a name="h2o_wave.graphics.rect"></a></li><li><a href="#reset" class="table-of-contents__link">reset <a name="h2o_wave.graphics.reset"></a></li><li><a href="#scene" class="table-of-contents__link">scene <a name="h2o_wave.graphics.scene"></a></li><li><a href="#spline" class="table-of-contents__link">spline <a name="h2o_wave.graphics.spline"></a></li><li><a href="#stage" class="table-of-contents__link">stage <a name="h2o_wave.graphics.stage"></a></li><li><a href="#text" class="table-of-contents__link">text <a name="h2o_wave.graphics.text"></a></li><li><a href="#turtle" class="table-of-contents__link">turtle <a name="h2o_wave.graphics.turtle"></a></li><li><a href="#type_of" class="table-of-contents__link">type_of <a name="h2o_wave.graphics.type_of"></a></li></ul></li><li><a href="#classes" class="table-of-contents__link">Classes</a><ul><li><a href="#path-1" class="table-of-contents__link">Path <a name="h2o_wave.graphics.Path"></a></li><li><a href="#turtle-1" class="table-of-contents__link">Turtle <a name="h2o_wave.graphics.Turtle"></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/7f8f4b62.3bcf3283.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Module h2o_wave.graphics</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="functions"></a>Functions<a aria-hidden="true" tabindex="-1" class="hash-link" href="#functions" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="arc"></a>arc <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.arc"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#arc" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">arc</span>(r1: float, r2: float, a1: float, a2: float, **kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw circular or annular sector, as in a pie or donut chart, centered at (0, 0).</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>r1</code></dt><dd>inner radius.</dd><dt><code>r2</code></dt><dd>outer radius.</dd><dt><code>a1</code></dt><dd>start angle, in degrees.</dd><dt><code>a2</code></dt><dd>end angle, in degrees.</dd><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="circle"></a>circle <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.circle"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#circle" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">circle</span>(**kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw a circle. See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="draw"></a>draw <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.draw"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#draw" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">draw</span>(element: <a title="h2o_wave.core.Ref" href="/wave/docs/api/core#h2o_wave.core.Ref">Ref</a>, **kwargs) ‑&gt; <a title="h2o_wave.core.Ref" href="/wave/docs/api/core#h2o_wave.core.Ref">Ref</a></div><div class="api__description"><p>Schedule a redraw of the specified graphical element using the provided attributes.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>element</code></dt><dd>A reference to a graphical element.</dd><dt><code>kwargs</code></dt><dd>Attributes to use while performing a redraw.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The element reference, without change.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="ellipse"></a>ellipse <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.ellipse"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#ellipse" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">ellipse</span>(**kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw an ellipse. See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="image"></a>image <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.image"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#image" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">image</span>(**kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw an image. See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="line"></a>line <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.line"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#line" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">line</span>(**kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw a line. See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="p"></a>p <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.p"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#p" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">p</span>() ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Create a new <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a>.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A new <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a>.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="path"></a>path <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.path"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#path" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">path</span>(**kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw a path. See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="polygon"></a>polygon <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.polygon"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#polygon" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">polygon</span>(**kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw a polygon. See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="polyline"></a>polyline <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.polyline"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#polyline" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">polyline</span>(**kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw a polyline. See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="rect"></a>rect <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.rect"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#rect" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">rect</span>(**kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw a rectangle. See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="reset"></a>reset <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.reset"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#reset" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">reset</span>(element: <a title="h2o_wave.core.Ref" href="/wave/docs/api/core#h2o_wave.core.Ref">Ref</a>) ‑&gt; <a title="h2o_wave.core.Ref" href="/wave/docs/api/core#h2o_wave.core.Ref">Ref</a></div><div class="api__description"><p>Schedule a redraw of the specified graphical element using its original attributes. Calling this function clears any changes performed using the <a href="#h2o_wave.graphics.draw" title="h2o_wave.graphics.draw">draw()</a> function.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>element</code></dt><dd>A reference to a graphical element.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The element reference, without change.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="scene"></a>scene <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.scene"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#scene" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">scene</span>(**kwargs) ‑&gt; <a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a></div><div class="api__description"><p>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 <a href="#h2o_wave.graphics.scene" title="h2o_wave.graphics.scene">scene()</a> property of a <a title="h2o_wave.types.GraphicsCard" href="/wave/docs/api/types#h2o_wave.types.GraphicsCard">GraphicsCard</a>.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Graphical elements to render as part of the scene.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="spline"></a>spline <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.spline"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#spline" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">spline</span>(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) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw a spline.</p><p>If x, y are specified, draws a regular spline.</p><p>If x, y, y0 are specified, draws a horizontal area spline. Sets baseline to zero if y0 is an empty list.</p><p>If x, x0, y are specified, draws a vertical area spline. Sets baseline to zero if x0 is an empty list</p><p>Missing information is rendered as gaps in the spline.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>x-coordinates.</dd><dt><code>y</code></dt><dd>y-coordinates.</dd><dt><code>x0</code></dt><dd>base x-coordinates.</dd><dt><code>y0</code></dt><dd>base y-coordinates.</dd><dt><code>curve</code></dt><dd>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.</dd><dt><code>radial</code></dt><dd>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).</dd><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="stage"></a>stage <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.stage"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#stage" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">stage</span>(**kwargs) ‑&gt; str</div><div class="api__description"><p>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 <a href="#h2o_wave.graphics.stage" title="h2o_wave.graphics.stage">stage()</a> property of a <a title="h2o_wave.types.GraphicsCard" href="/wave/docs/api/types#h2o_wave.types.GraphicsCard">GraphicsCard</a>.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Graphical elements to render as part of the stage.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Packed data.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="text"></a>text <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.text"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#text" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">text</span>(text: str, **kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Draw text. See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>text</code></dt><dd>The text content.</dd><dt><code>kwargs</code></dt><dd>Attributes to use for the initial render. SVG attributes, snake-cased.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>Data for the graphical element.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="turtle"></a>turtle <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.turtle"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#turtle" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">turtle</span>(x=0.0, y=0.0, degrees=0.0) ‑&gt; <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a></div><div class="api__description"><p>Create a new <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a>.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>initial position x</dd><dt><code>y</code></dt><dd>initial position y</dd><dt><code>degrees</code></dt><dd>initial angle in degrees</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A new <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a>.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="type_of"></a>type_of <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.type_of"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#type_of" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">type_of</span>(element: <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a>) ‑&gt; Union[str, NoneType]</div><div class="api__description"><p>Get the type of the graphical element.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>element</code></dt><dd>A graphical element.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A string indicating the type of the element, e.g. &#x27;circle&#x27;, &#x27;line&#x27;, etc.</p></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="classes"></a>Classes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#classes" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="path-1"></a>Path <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#path-1" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Path</span></div><div class="api__description"><p>A convenience class for drawing SVG paths.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="a"></a>A <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.A"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#a" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">A</span>(self, rx: float, ry: float, x_axis_rotation: float, large_arc: bool, sweep: bool, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>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 <code>x_axis_rotation</code>, 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. <code>large_arc</code> and <code>sweep_flag</code>contribute to the automatic calculations and help determine how the arc is drawn. In absolute coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>rx</code></dt><dd>x-radius</dd><dt><code>ry</code></dt><dd>y-radius</dd><dt><code>x_axis_rotation</code></dt><dd>Rotation in degrees.</dd><dt><code>large_arc</code></dt><dd>Determines if the arc should be greater than or less than 180 degrees.</dd><dt><code>sweep</code></dt><dd>Determines if the arc should begin moving at positive angles or negative ones.</dd><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="c"></a>C <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.C"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#c" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">C</span>(self, x1: float, y1: float, x2: float, y2: float, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>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.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x1</code></dt><dd>x-coordinate of first control point</dd><dt><code>y1</code></dt><dd>y-coordinate of first control point</dd><dt><code>x2</code></dt><dd>x-coordinate of second control point</dd><dt><code>y2</code></dt><dd>y-coordinate of second control point</dd><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="h"></a>H <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.H"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#h" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">H</span>(self, x: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Draws a horizontal line from the current point. In absolute coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>x-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="l"></a>L <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.L"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#l" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">L</span>(self, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. In absolute coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="m"></a>M <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.M"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#m" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">M</span>(self, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Start a new sub-path at the given (x,y) coordinates. In absolute coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="q"></a>Q <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.Q"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#q" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">Q</span>(self, x1: float, y1: float, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point. In absolute coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x1</code></dt><dd>x-coordinate of first control point</dd><dt><code>y1</code></dt><dd>y-coordinate of first control point</dd><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="s"></a>S <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.S"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#s" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">S</span>(self, x2: float, y2: float, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>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.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x2</code></dt><dd>x-coordinate of second control point</dd><dt><code>y2</code></dt><dd>y-coordinate of second control point</dd><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="t"></a>T <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.T"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#t" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">T</span>(self, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>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.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v"></a>V <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.V"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#v" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">V</span>(self, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Draws a vertical line from the current point. In absolute coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="z"></a>Z <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.Z"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#z" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">Z</span>(self) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Close the current subpath by connecting it back to the current subpath&#x27;s initial point.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="a-1"></a>a <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.a"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#a-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">a</span>(self, rx: float, ry: float, x_axis_rotation: float, large_arc: bool, sweep: bool, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>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 <code>x_axis_rotation</code>, 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. <code>large_arc</code> and <code>sweep_flag</code>contribute to the automatic calculations and help determine how the arc is drawn. In relative coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>rx</code></dt><dd>x-radius</dd><dt><code>ry</code></dt><dd>y-radius</dd><dt><code>x_axis_rotation</code></dt><dd>Rotation in degrees.</dd><dt><code>large_arc</code></dt><dd>Determines if the arc should be greater than or less than 180 degrees.</dd><dt><code>sweep</code></dt><dd>Determines if the arc should begin moving at positive angles or negative ones.</dd><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="c-1"></a>c <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.c"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#c-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">c</span>(self, x1: float, y1: float, x2: float, y2: float, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>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.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x1</code></dt><dd>x-coordinate of first control point</dd><dt><code>y1</code></dt><dd>y-coordinate of first control point</dd><dt><code>x2</code></dt><dd>x-coordinate of second control point</dd><dt><code>y2</code></dt><dd>y-coordinate of second control point</dd><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="d"></a>d <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.d"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#d" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">d</span>(self) ‑&gt; str</div><div class="api__description"><p>Serialize this path&#x27;s commands into SVG path data.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The <code>d</code> attribute for a SVG path.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="h-1"></a>h <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.h"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#h-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">h</span>(self, x: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Draws a horizontal line from the current point. In relative coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>x-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="l-1"></a>l <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.l"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#l-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">l</span>(self, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Draw a line from the current point to the given (x,y) coordinate which becomes the new current point. In relative coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="m-1"></a>m <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.m"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#m-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">m</span>(self, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Start a new sub-path at the given (x,y) coordinates. In relative coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataMovetoCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="path-2"></a>path <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.path"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#path-2" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">path</span>(self, **kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>A SVG path element representing the commands in this <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance. Same as calling <code>h2o_wave.graphics.path(d=path.d())</code></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Additional attributes for the SVG path element.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A SVG path element.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="q-1"></a>q <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.q"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#q-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">q</span>(self, x1: float, y1: float, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point. In relative coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x1</code></dt><dd>x-coordinate of first control point</dd><dt><code>y1</code></dt><dd>y-coordinate of first control point</dd><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="s-1"></a>s <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.s"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#s-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">s</span>(self, x2: float, y2: float, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>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.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x2</code></dt><dd>x-coordinate of second control point</dd><dt><code>y2</code></dt><dd>y-coordinate of second control point</dd><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="t-1"></a>t <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.t"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#t-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">t</span>(self, x: float, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>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.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v-1"></a>v <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.v"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#v-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">v</span>(self, y: float) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Draws a vertical line from the current point. In relative coordinates.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataLinetoCommands</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="z-1"></a>z <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Path.z"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#z-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">z</span>(self) ‑&gt; <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a></div><div class="api__description"><p>Close the current subpath by connecting it back to the current subpath&#x27;s initial point.</p><p>See <a href="https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand</a></p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current <a href="#h2o_wave.graphics.Path" title="h2o_wave.graphics.Path">Path</a> instance.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="turtle-1"></a>Turtle <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#turtle-1" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Turtle</span>(x=0.0, y=0.0, degrees=0.0)</div><div class="api__description"><p>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.</p><p>Create a Turtle.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>initial position x</dd><dt><code>y</code></dt><dd>initial position y</dd><dt><code>degrees</code></dt><dd>initial angle in degrees</dd></dl></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-1"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="a-2"></a>a <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle.a"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#a-2" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">a</span>(self, degrees: float = 0) ‑&gt; <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a></div><div class="api__description"><p>Set the turtle&#x27;s orientation.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>degrees</code></dt><dd>angle in degrees</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current turtle instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="b"></a>b <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle.b"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#b" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">b</span>(self, distance: float) ‑&gt; <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a></div><div class="api__description"><p>Move backward.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>distance</code></dt><dd>Distance to move by.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current turtle instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="d-1"></a>d <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle.d"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#d-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">d</span>(self) ‑&gt; str</div><div class="api__description"><p>Serialize this turtle&#x27;s movements into SVG path data.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The <code>d</code> attribute for a SVG path.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="f"></a>f <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle.f"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#f" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">f</span>(self, distance: float) ‑&gt; <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a></div><div class="api__description"><p>Move forward.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>distance</code></dt><dd>Distance to move by.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current turtle instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="l-2"></a>l <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle.l"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#l-2" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">l</span>(self, degrees: float) ‑&gt; <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a></div><div class="api__description"><p>Turn left.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>degrees</code></dt><dd>Angle in degrees.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current turtle instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="p-1"></a>p <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle.p"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#p-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">p</span>(self, x: float = 0.0, y: float = 0.0) ‑&gt; <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a></div><div class="api__description"><p>Set the turtle&#x27;s position.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>x</code></dt><dd>x-coordinate</dd><dt><code>y</code></dt><dd>y-coordinate</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current turtle instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="path-3"></a>path <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle.path"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#path-3" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">path</span>(self, **kwargs) ‑&gt; <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a></div><div class="api__description"><p>Create a SVG path element that represents this turtle&#x27;s movements.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>kwargs</code></dt><dd>Additional attributes for the SVG path element.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A SVG path element.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="pd"></a>pd <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle.pd"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#pd" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">pd</span>(self) ‑&gt; <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a></div><div class="api__description"><p>Pen down.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current turtle instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="pu"></a>pu <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle.pu"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#pu" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">pu</span>(self, close: bool) ‑&gt; <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a></div><div class="api__description"><p>Pen up.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>close</code></dt><dd>Whether to close the current subpath.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current turtle instance.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="r"></a>r <a target="_blank" rel="noopener noreferrer" name="h2o_wave.graphics.Turtle.r"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#r" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">r</span>(self, degrees: float) ‑&gt; <a href="#h2o_wave.graphics.Turtle" title="h2o_wave.graphics.Turtle">Turtle</a></div><div class="api__description"><p>Turn right.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>degrees</code></dt><dd>Angle in degrees.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The current turtle instance.</p></div></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/api/graphics.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/api/server"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Module h2o_wave.server</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/api/types"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Module h2o_wave.types »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#functions" class="table-of-contents__link">Functions</a><ul><li><a href="#arc" class="table-of-contents__link">arc <a name="h2o_wave.graphics.arc"></a></li><li><a href="#circle" class="table-of-contents__link">circle <a name="h2o_wave.graphics.circle"></a></li><li><a href="#draw" class="table-of-contents__link">draw <a name="h2o_wave.graphics.draw"></a></li><li><a href="#ellipse" class="table-of-contents__link">ellipse <a name="h2o_wave.graphics.ellipse"></a></li><li><a href="#image" class="table-of-contents__link">image <a name="h2o_wave.graphics.image"></a></li><li><a href="#line" class="table-of-contents__link">line <a name="h2o_wave.graphics.line"></a></li><li><a href="#p" class="table-of-contents__link">p <a name="h2o_wave.graphics.p"></a></li><li><a href="#path" class="table-of-contents__link">path <a name="h2o_wave.graphics.path"></a></li><li><a href="#polygon" class="table-of-contents__link">polygon <a name="h2o_wave.graphics.polygon"></a></li><li><a href="#polyline" class="table-of-contents__link">polyline <a name="h2o_wave.graphics.polyline"></a></li><li><a href="#rect" class="table-of-contents__link">rect <a name="h2o_wave.graphics.rect"></a></li><li><a href="#reset" class="table-of-contents__link">reset <a name="h2o_wave.graphics.reset"></a></li><li><a href="#scene" class="table-of-contents__link">scene <a name="h2o_wave.graphics.scene"></a></li><li><a href="#spline" class="table-of-contents__link">spline <a name="h2o_wave.graphics.spline"></a></li><li><a href="#stage" class="table-of-contents__link">stage <a name="h2o_wave.graphics.stage"></a></li><li><a href="#text" class="table-of-contents__link">text <a name="h2o_wave.graphics.text"></a></li><li><a href="#turtle" class="table-of-contents__link">turtle <a name="h2o_wave.graphics.turtle"></a></li><li><a href="#type_of" class="table-of-contents__link">type_of <a name="h2o_wave.graphics.type_of"></a></li></ul></li><li><a href="#classes" class="table-of-contents__link">Classes</a><ul><li><a href="#path-1" class="table-of-contents__link">Path <a name="h2o_wave.graphics.Path"></a></li><li><a href="#turtle-1" class="table-of-contents__link">Turtle <a name="h2o_wave.graphics.Turtle"></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/7f8f4b62.5c0f0fc4.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/api/index/index.html b/docs/docs/api/index/index.html
index 503828b6e2..e9f921554f 100644
--- a/docs/docs/api/index/index.html
+++ b/docs/docs/api/index/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Package h2o_wave | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Package h2o_wave | H2O Wave"><meta data-react-helmet="true" name="description" content="Python package h2o_wave provides the Python driver for H2O Wave."><meta data-react-helmet="true" property="og:description" content="Python package h2o_wave provides the Python driver for H2O Wave."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/api/index"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/api/index"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/5e8c322a.17131ef8.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/5e8c322a.cd3a7a36.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Package h2o_wave</h1></header><div class="markdown"><p>Python package <a href="#h2o_wave" title="h2o_wave">h2o_wave</a> provides the Python driver for H2O Wave.</p><p>H2O Wave is a lightweight software stack for programming interactive web applications entirely in Python (no HTML/Javascript/CSS) required.</p><p>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.</p><p>Wave&#x27;s components work in conjunction with the Q relay server that facilitates realtime state synchronization between Python and web browsers.</p><h2 class="section-title"><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="header-submodules"></a>Sub-modules<a aria-hidden="true" tabindex="-1" class="hash-link" href="#header-submodules" title="Direct link to heading">#</a></h2><dl><dt><a title="h2o_wave.autoreload" href="/wave/docs/api/autoreload">h2o_wave.autoreload</a></dt><dd></dd><dt><a title="h2o_wave.core" href="/wave/docs/api/core">h2o_wave.core</a></dt><dd></dd><dt><a title="h2o_wave.db" href="/wave/docs/api/db">h2o_wave.db</a></dt><dd></dd><dt><a title="h2o_wave.graphics" href="/wave/docs/api/graphics">h2o_wave.graphics</a></dt><dd></dd><dt><a title="h2o_wave.server" href="/wave/docs/api/server">h2o_wave.server</a></dt><dd></dd><dt><a title="h2o_wave.test" href="/wave/docs/api/test">h2o_wave.test</a></dt><dd></dd><dt><a title="h2o_wave.types" href="/wave/docs/api/types">h2o_wave.types</a></dt><dd></dd><dt><a title="h2o_wave.ui" href="/wave/docs/api/ui">h2o_wave.ui</a></dt><dd></dd></dl></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/api/index.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/glider-gun"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Graphics / Glider Gun</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/api/core"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Module h2o_wave.core »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/5e8c322a.17131ef8.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Package h2o_wave</h1></header><div class="markdown"><p>Python package <a href="#h2o_wave" title="h2o_wave">h2o_wave</a> provides the Python driver for H2O Wave.</p><p>H2O Wave is a lightweight software stack for programming interactive web applications entirely in Python (no HTML/Javascript/CSS) required.</p><p>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.</p><p>Wave&#x27;s components work in conjunction with the Q relay server that facilitates realtime state synchronization between Python and web browsers.</p><h2 class="section-title"><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="header-submodules"></a>Sub-modules<a aria-hidden="true" tabindex="-1" class="hash-link" href="#header-submodules" title="Direct link to heading">#</a></h2><dl><dt><a title="h2o_wave.cli" href="/wave/docs/api/cli">h2o_wave.cli</a></dt><dd></dd><dt><a title="h2o_wave.core" href="/wave/docs/api/core">h2o_wave.core</a></dt><dd></dd><dt><a title="h2o_wave.db" href="/wave/docs/api/db">h2o_wave.db</a></dt><dd></dd><dt><a title="h2o_wave.graphics" href="/wave/docs/api/graphics">h2o_wave.graphics</a></dt><dd></dd><dt><a title="h2o_wave.server" href="/wave/docs/api/server">h2o_wave.server</a></dt><dd></dd><dt><a title="h2o_wave.test" href="/wave/docs/api/test">h2o_wave.test</a></dt><dd></dd><dt><a title="h2o_wave.types" href="/wave/docs/api/types">h2o_wave.types</a></dt><dd></dd><dt><a title="h2o_wave.ui" href="/wave/docs/api/ui">h2o_wave.ui</a></dt><dd></dd></dl></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/api/index.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/glider-gun"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Graphics / Glider Gun</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/api/core"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Module h2o_wave.core »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/5e8c322a.cd3a7a36.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/api/server/index.html b/docs/docs/api/server/index.html
index c31baa976e..e0bd0bd306 100644
--- a/docs/docs/api/server/index.html
+++ b/docs/docs/api/server/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Module h2o_wave.server | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Module h2o_wave.server | H2O Wave"><meta data-react-helmet="true" name="description" content="Functions"><meta data-react-helmet="true" property="og:description" content="Functions"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/api/server"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/api/server"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/296a8b4f.aaf763e4.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/296a8b4f.a8ff9479.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Module h2o_wave.server</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="functions"></a>Functions<a aria-hidden="true" tabindex="-1" class="hash-link" href="#functions" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="listen"></a>listen <a target="_blank" rel="noopener noreferrer" name="h2o_wave.server.listen"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#listen" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">listen</span>(route: str, handle: Callable[[<a href="#h2o_wave.server.Query" title="h2o_wave.server.Query">Query</a>], Awaitable[Any]], mode=&#x27;unicast&#x27;)</div><div class="api__description"><p>Launch an application server.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>route</code></dt><dd>The route to listen to. e.g. <code>&#x27;/foo&#x27;</code> or <code>&#x27;/foo/bar/baz&#x27;</code>.</dd><dt><code>handle</code></dt><dd>The handler function.</dd><dt><code>mode</code></dt><dd>The server mode. One of <code>&#x27;unicast&#x27;</code> (default),<code>&#x27;multicast&#x27;</code> or <code>&#x27;broadcast&#x27;</code>.</dd></dl></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="classes"></a>Classes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#classes" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="auth"></a>Auth <a target="_blank" rel="noopener noreferrer" name="h2o_wave.server.Auth"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#auth" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Auth</span>(username: str, subject: str)</div><div class="api__description"><p>Represents authentication information for a given query context. Carries valid information only if single sign on is enabled.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.server.Auth.subject" class="api__signature">var <span class="ident">subject</span></div><div class="api__description"><p>A unique identifier for the user.</p></div><div id="h2o_wave.server.Auth.username" class="api__signature">var <span class="ident">username</span></div><div class="api__description"><p>The username of the user.</p></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="query"></a>Query <a target="_blank" rel="noopener noreferrer" name="h2o_wave.server.Query"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#query" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Query</span>(site: <a title="h2o_wave.core.AsyncSite" href="/wave/docs/api/core#h2o_wave.core.AsyncSite">AsyncSite</a>, mode: str, username: str, client_id: str, route: str, app_state: <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a>, user_state: <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a>, client_state: <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a>, auth: <a href="#h2o_wave.server.Auth" title="h2o_wave.server.Auth">Auth</a>, args: <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a>)</div><div class="api__description"><p>Represents the query context. The query context is passed to the <a href="#h2o_wave.server.listen" title="h2o_wave.server.listen">listen()</a> 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 arguments<code>args</code> (equivalent to URL query strings) and app-level, user-level and client-level state.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-1"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-1" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.server.Query.app" class="api__signature">var <span class="ident">app</span></div><div class="api__description"><p>A <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a> instance to hold application-specific state.</p></div><div id="h2o_wave.server.Query.args" class="api__signature">var <span class="ident">args</span></div><div class="api__description"><p>A <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a> instance containing the active request.</p></div><div id="h2o_wave.server.Query.auth" class="api__signature">var <span class="ident">auth</span></div><div class="api__description"><p>The username and subject ID of the authenticated user.</p></div><div id="h2o_wave.server.Query.client" class="api__signature">var <span class="ident">client</span></div><div class="api__description"><p>An <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a> instance to hold client-specific state.</p></div><div id="h2o_wave.server.Query.mode" class="api__signature">var <span class="ident">mode</span></div><div class="api__description"><p>The server mode. One of <code>&#x27;unicast&#x27;</code> (default),<code>&#x27;multicast&#x27;</code> or <code>&#x27;broadcast&#x27;</code>.</p></div><div id="h2o_wave.server.Query.page" class="api__signature">var <span class="ident">page</span></div><div class="api__description"><p>A reference to the current page.</p></div><div id="h2o_wave.server.Query.route" class="api__signature">var <span class="ident">route</span></div><div class="api__description"><p>The route served by the server.</p></div><div id="h2o_wave.server.Query.site" class="api__signature">var <span class="ident">site</span></div><div class="api__description"><p>A reference to the current site.</p></div><div id="h2o_wave.server.Query.user" class="api__signature">var <span class="ident">user</span></div><div class="api__description"><p>A <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a> instance to hold user-specific state.</p></div><div id="h2o_wave.server.Query.username" class="api__signature">var <span class="ident">username</span></div><div class="api__description"><p>The username of the user who initiated the active request.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="sleep"></a>sleep <a target="_blank" rel="noopener noreferrer" name="h2o_wave.server.Query.sleep"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#sleep" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">sleep</span>(self, delay)</div><div class="api__description"></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="q"></a>Q <a target="_blank" rel="noopener noreferrer" name="h2o_wave.server.Query"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#q" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Q</span>(site: <a title="h2o_wave.core.AsyncSite" href="/wave/docs/api/core#h2o_wave.core.AsyncSite">AsyncSite</a>, mode: str, username: str, client_id: str, route: str, app_state: <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a>, user_state: <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a>, client_state: <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a>, auth: <a href="#h2o_wave.server.Auth" title="h2o_wave.server.Auth">Auth</a>, args: <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a>)</div><div class="api__description"><p>Represents the query context. The query context is passed to the <a href="#h2o_wave.server.listen" title="h2o_wave.server.listen">listen()</a> 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 arguments<code>args</code> (equivalent to URL query strings) and app-level, user-level and client-level state.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-2"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-2" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.server.Query.app" class="api__signature">var <span class="ident">app</span></div><div class="api__description"><p>A <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a> instance to hold application-specific state.</p></div><div id="h2o_wave.server.Query.args" class="api__signature">var <span class="ident">args</span></div><div class="api__description"><p>A <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a> instance containing the active request.</p></div><div id="h2o_wave.server.Query.auth" class="api__signature">var <span class="ident">auth</span></div><div class="api__description"><p>The username and subject ID of the authenticated user.</p></div><div id="h2o_wave.server.Query.client" class="api__signature">var <span class="ident">client</span></div><div class="api__description"><p>An <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a> instance to hold client-specific state.</p></div><div id="h2o_wave.server.Query.mode" class="api__signature">var <span class="ident">mode</span></div><div class="api__description"><p>The server mode. One of <code>&#x27;unicast&#x27;</code> (default),<code>&#x27;multicast&#x27;</code> or <code>&#x27;broadcast&#x27;</code>.</p></div><div id="h2o_wave.server.Query.page" class="api__signature">var <span class="ident">page</span></div><div class="api__description"><p>A reference to the current page.</p></div><div id="h2o_wave.server.Query.route" class="api__signature">var <span class="ident">route</span></div><div class="api__description"><p>The route served by the server.</p></div><div id="h2o_wave.server.Query.site" class="api__signature">var <span class="ident">site</span></div><div class="api__description"><p>A reference to the current site.</p></div><div id="h2o_wave.server.Query.user" class="api__signature">var <span class="ident">user</span></div><div class="api__description"><p>A <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a> instance to hold user-specific state.</p></div><div id="h2o_wave.server.Query.username" class="api__signature">var <span class="ident">username</span></div><div class="api__description"><p>The username of the user who initiated the active request.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-1"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="sleep-1"></a>sleep <a target="_blank" rel="noopener noreferrer" name="h2o_wave.server.Query.sleep"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#sleep-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">sleep</span>(self, delay)</div><div class="api__description"></div></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/api/server.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/api/ui"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Module h2o_wave.ui</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/api/graphics"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Module h2o_wave.graphics »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#functions" class="table-of-contents__link">Functions</a><ul><li><a href="#listen" class="table-of-contents__link">listen <a name="h2o_wave.server.listen"></a></li></ul></li><li><a href="#classes" class="table-of-contents__link">Classes</a><ul><li><a href="#auth" class="table-of-contents__link">Auth <a name="h2o_wave.server.Auth"></a></li><li><a href="#query" class="table-of-contents__link">Query <a name="h2o_wave.server.Query"></a></li><li><a href="#q" class="table-of-contents__link">Q <a name="h2o_wave.server.Query"></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/296a8b4f.aaf763e4.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Module h2o_wave.server</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="functions"></a>Functions<a aria-hidden="true" tabindex="-1" class="hash-link" href="#functions" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="app"></a>app <a target="_blank" rel="noopener noreferrer" name="h2o_wave.server.app"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#app" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">app</span>(route: str, mode=&#x27;unicast&#x27;)</div><div class="api__description"></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="listen"></a>listen <a target="_blank" rel="noopener noreferrer" name="h2o_wave.server.listen"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#listen" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">listen</span>(route: str, handle: Callable[[<a href="#h2o_wave.server.Query" title="h2o_wave.server.Query">Query</a>], Awaitable[Any]], mode=&#x27;unicast&#x27;)</div><div class="api__description"><p>Launch an application server.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>route</code></dt><dd>The route to listen to. e.g. <code>&#x27;/foo&#x27;</code> or <code>&#x27;/foo/bar/baz&#x27;</code>.</dd><dt><code>handle</code></dt><dd>The handler function.</dd><dt><code>mode</code></dt><dd>The server mode. One of <code>&#x27;unicast&#x27;</code> (default),<code>&#x27;multicast&#x27;</code> or <code>&#x27;broadcast&#x27;</code>.</dd></dl></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="classes"></a>Classes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#classes" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="auth"></a>Auth <a target="_blank" rel="noopener noreferrer" name="h2o_wave.server.Auth"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#auth" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Auth</span>(username: str, subject: str)</div><div class="api__description"><p>Represents authentication information for a given query context. Carries valid information only if single sign on is enabled.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.server.Auth.subject" class="api__signature">var <span class="ident">subject</span></div><div class="api__description"><p>A unique identifier for the user.</p></div><div id="h2o_wave.server.Auth.username" class="api__signature">var <span class="ident">username</span></div><div class="api__description"><p>The username of the user.</p></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="query"></a>Query <a target="_blank" rel="noopener noreferrer" name="h2o_wave.server.Query"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#query" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Query</span>(site: <a title="h2o_wave.core.AsyncSite" href="/wave/docs/api/core#h2o_wave.core.AsyncSite">AsyncSite</a>, mode: str, username: str, client_id: str, route: str, app_state: <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a>, user_state: <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a>, client_state: <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a>, auth: <a href="#h2o_wave.server.Auth" title="h2o_wave.server.Auth">Auth</a>, args: <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a>)</div><div class="api__description"><p>Represents the query context. The query context is passed to the <code>@app</code> 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 arguments<code>args</code> (equivalent to URL query strings) and app-level, user-level and client-level state.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-1"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-1" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.server.Query.app" class="api__signature">var <span class="ident">app</span></div><div class="api__description"><p>A <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a> instance to hold application-specific state.</p></div><div id="h2o_wave.server.Query.args" class="api__signature">var <span class="ident">args</span></div><div class="api__description"><p>A <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a> instance containing the active request.</p></div><div id="h2o_wave.server.Query.auth" class="api__signature">var <span class="ident">auth</span></div><div class="api__description"><p>The username and subject ID of the authenticated user.</p></div><div id="h2o_wave.server.Query.client" class="api__signature">var <span class="ident">client</span></div><div class="api__description"><p>An <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a> instance to hold client-specific state.</p></div><div id="h2o_wave.server.Query.mode" class="api__signature">var <span class="ident">mode</span></div><div class="api__description"><p>The server mode. One of <code>&#x27;unicast&#x27;</code> (default),<code>&#x27;multicast&#x27;</code> or <code>&#x27;broadcast&#x27;</code>.</p></div><div id="h2o_wave.server.Query.page" class="api__signature">var <span class="ident">page</span></div><div class="api__description"><p>A reference to the current page.</p></div><div id="h2o_wave.server.Query.route" class="api__signature">var <span class="ident">route</span></div><div class="api__description"><p>The route served by the server.</p></div><div id="h2o_wave.server.Query.site" class="api__signature">var <span class="ident">site</span></div><div class="api__description"><p>A reference to the current site.</p></div><div id="h2o_wave.server.Query.user" class="api__signature">var <span class="ident">user</span></div><div class="api__description"><p>A <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a> instance to hold user-specific state.</p></div><div id="h2o_wave.server.Query.username" class="api__signature">var <span class="ident">username</span></div><div class="api__description"><p>The username of the user who initiated the active request.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="exec"></a>exec <a target="_blank" rel="noopener noreferrer" name="h2o_wave.server.Query.exec"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#exec" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">exec</span>(self, executor: Union[concurrent.futures._base.Executor, NoneType], func: Callable, *args: Any, **kwargs: Any) ‑&gt; Any</div><div class="api__description"><p>Execute a function in the background using the specified executor.</p><p>To execute a function in-process, use <code>q.run()</code>.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>executor</code></dt><dd>The executor to be used. If None, executes the function in-process.</dd><dt><code>func</code></dt><dd>The function to to be called.</dd><dt><code>args</code></dt><dd>Arguments to be passed to the function.</dd><dt><code>kwargs</code></dt><dd>Keywords arguments to be passed to the function.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The result of the function call.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="run"></a>run <a target="_blank" rel="noopener noreferrer" name="h2o_wave.server.Query.run"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#run" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">run</span>(self, func: Callable, *args: Any, **kwargs: Any) ‑&gt; Any</div><div class="api__description"><p>Execute a function in the background, in-process.</p><p>Equivalent to calling <code>q.exec()</code> without an executor.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>func</code></dt><dd>The function to to be called.</dd><dt><code>args</code></dt><dd>Arguments to be passed to the function.</dd><dt><code>kwargs</code></dt><dd>Keywords arguments to be passed to the function.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The result of the function call.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="sleep"></a>sleep <a target="_blank" rel="noopener noreferrer" name="h2o_wave.server.Query.sleep"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#sleep" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">sleep</span>(self, delay: float, result=None) ‑&gt; Any</div><div class="api__description"><p>Suspend execution for the specified number of seconds. Always use <code>q.sleep()</code> instead of <code>time.sleep()</code> in Wave apps.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>delay</code></dt><dd>Number of seconds to sleep.</dd><dt><code>result</code></dt><dd>Result to return after delay, if any.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The <code>result</code> argument, if any, as is.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="q"></a>Q <a target="_blank" rel="noopener noreferrer" name="h2o_wave.server.Query"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#q" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Q</span>(site: <a title="h2o_wave.core.AsyncSite" href="/wave/docs/api/core#h2o_wave.core.AsyncSite">AsyncSite</a>, mode: str, username: str, client_id: str, route: str, app_state: <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a>, user_state: <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a>, client_state: <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a>, auth: <a href="#h2o_wave.server.Auth" title="h2o_wave.server.Auth">Auth</a>, args: <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a>)</div><div class="api__description"><p>Represents the query context. The query context is passed to the <code>@app</code> 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 arguments<code>args</code> (equivalent to URL query strings) and app-level, user-level and client-level state.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-2"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-2" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.server.Query.app" class="api__signature">var <span class="ident">app</span></div><div class="api__description"><p>A <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a> instance to hold application-specific state.</p></div><div id="h2o_wave.server.Query.args" class="api__signature">var <span class="ident">args</span></div><div class="api__description"><p>A <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a> instance containing the active request.</p></div><div id="h2o_wave.server.Query.auth" class="api__signature">var <span class="ident">auth</span></div><div class="api__description"><p>The username and subject ID of the authenticated user.</p></div><div id="h2o_wave.server.Query.client" class="api__signature">var <span class="ident">client</span></div><div class="api__description"><p>An <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a> instance to hold client-specific state.</p></div><div id="h2o_wave.server.Query.mode" class="api__signature">var <span class="ident">mode</span></div><div class="api__description"><p>The server mode. One of <code>&#x27;unicast&#x27;</code> (default),<code>&#x27;multicast&#x27;</code> or <code>&#x27;broadcast&#x27;</code>.</p></div><div id="h2o_wave.server.Query.page" class="api__signature">var <span class="ident">page</span></div><div class="api__description"><p>A reference to the current page.</p></div><div id="h2o_wave.server.Query.route" class="api__signature">var <span class="ident">route</span></div><div class="api__description"><p>The route served by the server.</p></div><div id="h2o_wave.server.Query.site" class="api__signature">var <span class="ident">site</span></div><div class="api__description"><p>A reference to the current site.</p></div><div id="h2o_wave.server.Query.user" class="api__signature">var <span class="ident">user</span></div><div class="api__description"><p>A <a title="h2o_wave.core.Expando" href="/wave/docs/api/core#h2o_wave.core.Expando">Expando</a> instance to hold user-specific state.</p></div><div id="h2o_wave.server.Query.username" class="api__signature">var <span class="ident">username</span></div><div class="api__description"><p>The username of the user who initiated the active request.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-1"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="exec-1"></a>exec <a target="_blank" rel="noopener noreferrer" name="h2o_wave.server.Query.exec"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#exec-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">exec</span>(self, executor: Union[concurrent.futures._base.Executor, NoneType], func: Callable, *args: Any, **kwargs: Any) ‑&gt; Any</div><div class="api__description"><p>Execute a function in the background using the specified executor.</p><p>To execute a function in-process, use <code>q.run()</code>.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>executor</code></dt><dd>The executor to be used. If None, executes the function in-process.</dd><dt><code>func</code></dt><dd>The function to to be called.</dd><dt><code>args</code></dt><dd>Arguments to be passed to the function.</dd><dt><code>kwargs</code></dt><dd>Keywords arguments to be passed to the function.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The result of the function call.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="run-1"></a>run <a target="_blank" rel="noopener noreferrer" name="h2o_wave.server.Query.run"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#run-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">run</span>(self, func: Callable, *args: Any, **kwargs: Any) ‑&gt; Any</div><div class="api__description"><p>Execute a function in the background, in-process.</p><p>Equivalent to calling <code>q.exec()</code> without an executor.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>func</code></dt><dd>The function to to be called.</dd><dt><code>args</code></dt><dd>Arguments to be passed to the function.</dd><dt><code>kwargs</code></dt><dd>Keywords arguments to be passed to the function.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The result of the function call.</p></div></div></div><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="sleep-1"></a>sleep <a target="_blank" rel="noopener noreferrer" name="h2o_wave.server.Query.sleep"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#sleep-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">async def <span class="ident">sleep</span>(self, delay: float, result=None) ‑&gt; Any</div><div class="api__description"><p>Suspend execution for the specified number of seconds. Always use <code>q.sleep()</code> instead of <code>time.sleep()</code> in Wave apps.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>delay</code></dt><dd>Number of seconds to sleep.</dd><dt><code>result</code></dt><dd>Result to return after delay, if any.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>The <code>result</code> argument, if any, as is.</p></div></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/api/server.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/api/ui"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Module h2o_wave.ui</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/api/graphics"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Module h2o_wave.graphics »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#functions" class="table-of-contents__link">Functions</a><ul><li><a href="#app" class="table-of-contents__link">app <a name="h2o_wave.server.app"></a></li><li><a href="#listen" class="table-of-contents__link">listen <a name="h2o_wave.server.listen"></a></li></ul></li><li><a href="#classes" class="table-of-contents__link">Classes</a><ul><li><a href="#auth" class="table-of-contents__link">Auth <a name="h2o_wave.server.Auth"></a></li><li><a href="#query" class="table-of-contents__link">Query <a name="h2o_wave.server.Query"></a></li><li><a href="#q" class="table-of-contents__link">Q <a name="h2o_wave.server.Query"></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/296a8b4f.a8ff9479.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/api/test/index.html b/docs/docs/api/test/index.html
index 9052268fd4..45fce90890 100644
--- a/docs/docs/api/test/index.html
+++ b/docs/docs/api/test/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Module h2o_wave.test | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Module h2o_wave.test | H2O Wave"><meta data-react-helmet="true" name="description" content="Functions"><meta data-react-helmet="true" property="og:description" content="Functions"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/api/test"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/api/test"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/430c4fb3.3c61f745.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/430c4fb3.19a43eed.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Module h2o_wave.test</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="functions"></a>Functions<a aria-hidden="true" tabindex="-1" class="hash-link" href="#functions" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="cypress"></a>cypress <a target="_blank" rel="noopener noreferrer" name="h2o_wave.test.cypress"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#cypress" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">cypress</span>(description: str)</div><div class="api__description"></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="classes"></a>Classes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#classes" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="cypress-1"></a>Cypress <a target="_blank" rel="noopener noreferrer" name="h2o_wave.test.Cypress"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#cypress-1" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Cypress</span></div><div class="api__description"><p>Represents a Cypress test translator.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="run"></a>run <a target="_blank" rel="noopener noreferrer" name="h2o_wave.test.Cypress.run"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#run" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">run</span>(self, f)</div><div class="api__description"><p>Includes all steps from the given test into the current test.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>f</code></dt><dd>A Python function containing Cypress test steps.</dd></dl></div></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/api/test.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/api/types"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Module h2o_wave.types</div></a></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#functions" class="table-of-contents__link">Functions</a><ul><li><a href="#cypress" class="table-of-contents__link">cypress <a name="h2o_wave.test.cypress"></a></li></ul></li><li><a href="#classes" class="table-of-contents__link">Classes</a><ul><li><a href="#cypress-1" class="table-of-contents__link">Cypress <a name="h2o_wave.test.Cypress"></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/430c4fb3.3c61f745.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Module h2o_wave.test</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="functions"></a>Functions<a aria-hidden="true" tabindex="-1" class="hash-link" href="#functions" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="cypress"></a>cypress <a target="_blank" rel="noopener noreferrer" name="h2o_wave.test.cypress"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#cypress" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">cypress</span>(description: str)</div><div class="api__description"></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="classes"></a>Classes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#classes" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="cypress-1"></a>Cypress <a target="_blank" rel="noopener noreferrer" name="h2o_wave.test.Cypress"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#cypress-1" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Cypress</span></div><div class="api__description"><p>Represents a Cypress test translator.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="run"></a>run <a target="_blank" rel="noopener noreferrer" name="h2o_wave.test.Cypress.run"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#run" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">run</span>(self, f)</div><div class="api__description"><p>Includes all steps from the given test into the current test.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>f</code></dt><dd>A Python function containing Cypress test steps.</dd></dl></div></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/api/test.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/api/types"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Module h2o_wave.types</div></a></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#functions" class="table-of-contents__link">Functions</a><ul><li><a href="#cypress" class="table-of-contents__link">cypress <a name="h2o_wave.test.cypress"></a></li></ul></li><li><a href="#classes" class="table-of-contents__link">Classes</a><ul><li><a href="#cypress-1" class="table-of-contents__link">Cypress <a name="h2o_wave.test.Cypress"></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/430c4fb3.19a43eed.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/api/types/index.html b/docs/docs/api/types/index.html
index 49e96965c5..e3778cf06f 100644
--- a/docs/docs/api/types/index.html
+++ b/docs/docs/api/types/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Module h2o_wave.types | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Module h2o_wave.types | H2O Wave"><meta data-react-helmet="true" name="description" content="Classes"><meta data-react-helmet="true" property="og:description" content="Classes"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/api/types"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/api/types"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/b999a6e4.aa78f2b5.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/b999a6e4.b163bfee.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Module h2o_wave.types</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="classes"></a>Classes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#classes" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="breadcrumb"></a>Breadcrumb <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Breadcrumb"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#breadcrumb" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Breadcrumb</span>(name: str, label: str)</div><div class="api__description"><p>Create a breadcrumb for a <a href="#h2o_wave.types.BreadcrumbsCard" title="h2o_wave.types.BreadcrumbsCard">BreadcrumbsCard</a>.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Breadcrumb.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Breadcrumb__d: Dict) ‑&gt; <a href="#h2o_wave.types.Breadcrumb" title="h2o_wave.types.Breadcrumb">Breadcrumb</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Breadcrumb.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The label to display.</p></div><div id="h2o_wave.types.Breadcrumb.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>The name of this item. Prefix the name with a &#x27;#&#x27; to trigger hash-change navigation.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Breadcrumb.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="breadcrumbscard"></a>BreadcrumbsCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.BreadcrumbsCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#breadcrumbscard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">BreadcrumbsCard</span>(box: str, items: List[<a href="#h2o_wave.types.Breadcrumb" title="h2o_wave.types.Breadcrumb">Breadcrumb</a>], commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-1"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-1"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.BreadcrumbsCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_BreadcrumbsCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.BreadcrumbsCard" title="h2o_wave.types.BreadcrumbsCard">BreadcrumbsCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-1"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-1" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.BreadcrumbsCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.BreadcrumbsCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.BreadcrumbsCard.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>A list of <a href="#h2o_wave.types.Breadcrumb" title="h2o_wave.types.Breadcrumb">Breadcrumb</a> instances to display. See <a title="h2o_wave.ui.breadcrumb" href="/wave/docs/api/ui#h2o_wave.ui.breadcrumb">breadcrumb()</a></p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-1"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-1"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.BreadcrumbsCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="button"></a>Button <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Button"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#button" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Button</span>(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)</div><div class="api__description"><p>Create a button.</p><p>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.</p><p>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.</p><p>Buttons may be placed within a &quot;buttons&quot; component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-2"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-2" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-2"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Button.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-2" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Button__d: Dict) ‑&gt; <a href="#h2o_wave.types.Button" title="h2o_wave.types.Button">Button</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-2"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-2" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Button.caption" class="api__signature">var <span class="ident">caption</span></div><div class="api__description"><p>The caption displayed below the label. Setting a caption renders a compound button.</p></div><div id="h2o_wave.types.Button.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if the button should be disabled.</p></div><div id="h2o_wave.types.Button.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The text displayed on the button.</p></div><div id="h2o_wave.types.Button.link" class="api__signature">var <span class="ident">link</span></div><div class="api__description"><p>True if the button should be rendered as link text and not a standard button.</p></div><div id="h2o_wave.types.Button.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component. If the name is prefixed with a &#x27;#&#x27;, the button sets the location hash to the name when clicked.</p></div><div id="h2o_wave.types.Button.primary" class="api__signature">var <span class="ident">primary</span></div><div class="api__description"><p>True if the button should be rendered as the primary button in the set.</p></div><div id="h2o_wave.types.Button.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Button.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>A value for this button. If a value is set, it is used for the button&#x27;s submitted instead of a boolean True.</p></div><div id="h2o_wave.types.Button.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-2"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-2" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-2"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Button.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-2" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="buttons"></a>Buttons <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Buttons"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#buttons" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Buttons</span>(items: List[ForwardRef(&#x27;<a href="#h2o_wave.types.Component" title="h2o_wave.types.Component">Component</a>&#x27;)], justify: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)</div><div class="api__description"><p>Create a set of buttons to be layed out horizontally.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-3"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-3" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-3"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Buttons.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-3" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Buttons__d: Dict) ‑&gt; <a href="#h2o_wave.types.Buttons" title="h2o_wave.types.Buttons">Buttons</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-3"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-3" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Buttons.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>The button in this set.</p></div><div id="h2o_wave.types.Buttons.justify" class="api__signature">var <span class="ident">justify</span></div><div class="api__description"><p>Specifies how to lay out buttons horizontally. One of &#x27;start&#x27;, &#x27;end&#x27;, &#x27;center&#x27;, &#x27;between&#x27;, &#x27;around&#x27;.</p></div><div id="h2o_wave.types.Buttons.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Buttons.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-3"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-3" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-3"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Buttons.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-3" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="checkbox"></a>Checkbox <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Checkbox"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#checkbox" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Checkbox</span>(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)</div><div class="api__description"><p>Create a checkbox.</p><p>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.</p><p>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.</p><p>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.</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-4"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-4" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-4"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Checkbox.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-4" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Checkbox__d: Dict) ‑&gt; <a href="#h2o_wave.types.Checkbox" title="h2o_wave.types.Checkbox">Checkbox</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-4"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-4" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Checkbox.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if the checkbox is disabled.</p></div><div id="h2o_wave.types.Checkbox.indeterminate" class="api__signature">var <span class="ident">indeterminate</span></div><div class="api__description"><p>True if the selection is indeterminate (neither selected nor unselected).</p></div><div id="h2o_wave.types.Checkbox.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the checkbox.</p></div><div id="h2o_wave.types.Checkbox.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Checkbox.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Checkbox.trigger" class="api__signature">var <span class="ident">trigger</span></div><div class="api__description"><p>True if the form should be submitted when the checkbox value changes.</p></div><div id="h2o_wave.types.Checkbox.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>True if selected, False if unselected.</p></div><div id="h2o_wave.types.Checkbox.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-4"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-4" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-4"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Checkbox.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-4" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="checklist"></a>Checklist <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Checklist"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#checklist" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Checklist</span>(name: str, label: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, choices: Union[List[<a href="#h2o_wave.types.Choice" title="h2o_wave.types.Choice">Choice</a>], NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)</div><div class="api__description"><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-5"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-5" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-5"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Checklist.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-5" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Checklist__d: Dict) ‑&gt; <a href="#h2o_wave.types.Checklist" title="h2o_wave.types.Checklist">Checklist</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-5"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-5" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Checklist.choices" class="api__signature">var <span class="ident">choices</span></div><div class="api__description"><p>The choices to be presented.</p></div><div id="h2o_wave.types.Checklist.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed above the component.</p></div><div id="h2o_wave.types.Checklist.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Checklist.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Checklist.trigger" class="api__signature">var <span class="ident">trigger</span></div><div class="api__description"><p>True if the form should be submitted when the checklist value changes.</p></div><div id="h2o_wave.types.Checklist.values" class="api__signature">var <span class="ident">values</span></div><div class="api__description"><p>The names of the selected choices.</p></div><div id="h2o_wave.types.Checklist.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-5"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-5" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-5"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Checklist.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-5" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="choice"></a>Choice <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Choice"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#choice" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Choice</span>(name: str, label: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None)</div><div class="api__description"><p>Create a choice for a checklist, choice group or dropdown.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-6"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-6" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-6"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Choice.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-6" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Choice__d: Dict) ‑&gt; <a href="#h2o_wave.types.Choice" title="h2o_wave.types.Choice">Choice</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-6"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-6" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Choice.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if the checkbox is disabled.</p></div><div id="h2o_wave.types.Choice.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.Choice.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-6"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-6" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-6"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Choice.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-6" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="choicegroup"></a>ChoiceGroup <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ChoiceGroup"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#choicegroup" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">ChoiceGroup</span>(name: str, label: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[<a href="#h2o_wave.types.Choice" title="h2o_wave.types.Choice">Choice</a>], NoneType] = None, required: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)</div><div class="api__description"><p>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.</p><p>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.</p><p>If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for &quot;I agree&quot; instead of choice group buttons for &quot;I agree&quot; and &quot;I don&#x27;t agree.&quot;</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-7"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-7" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-7"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ChoiceGroup.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-7" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_ChoiceGroup__d: Dict) ‑&gt; <a href="#h2o_wave.types.ChoiceGroup" title="h2o_wave.types.ChoiceGroup">ChoiceGroup</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-7"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-7" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.ChoiceGroup.choices" class="api__signature">var <span class="ident">choices</span></div><div class="api__description"><p>The choices to be presented.</p></div><div id="h2o_wave.types.ChoiceGroup.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.ChoiceGroup.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.ChoiceGroup.required" class="api__signature">var <span class="ident">required</span></div><div class="api__description"><p>True if this field is required.</p></div><div id="h2o_wave.types.ChoiceGroup.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.ChoiceGroup.trigger" class="api__signature">var <span class="ident">trigger</span></div><div class="api__description"><p>True if the form should be submitted when the selection changes.</p></div><div id="h2o_wave.types.ChoiceGroup.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The name of the selected choice.</p></div><div id="h2o_wave.types.ChoiceGroup.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-7"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-7" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-7"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ChoiceGroup.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-7" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="colorpicker"></a>ColorPicker <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ColorPicker"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#colorpicker" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">ColorPicker</span>(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)</div><div class="api__description"><p>Create a color picker.</p><p>A date picker allows a user to pick a color value. If the &#x27;choices&#x27; parameter is set, a swatch picker is displayed instead of the standard color picker.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-8"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-8" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-8"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ColorPicker.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-8" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_ColorPicker__d: Dict) ‑&gt; <a href="#h2o_wave.types.ColorPicker" title="h2o_wave.types.ColorPicker">ColorPicker</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-8"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-8" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.ColorPicker.choices" class="api__signature">var <span class="ident">choices</span></div><div class="api__description"><p>A list of colors (CSS-compatible strings) to limit color choices to.</p></div><div id="h2o_wave.types.ColorPicker.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.ColorPicker.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.ColorPicker.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.ColorPicker.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The selected color (CSS-compatible string)</p></div><div id="h2o_wave.types.ColorPicker.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-8"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-8" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-8"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ColorPicker.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-8" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="combobox"></a>Combobox <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Combobox"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#combobox" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Combobox</span>(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)</div><div class="api__description"><p>Create a combobox.</p><p>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.</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-9"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-9" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-9"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Combobox.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-9" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Combobox__d: Dict) ‑&gt; <a href="#h2o_wave.types.Combobox" title="h2o_wave.types.Combobox">Combobox</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-9"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-9" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Combobox.choices" class="api__signature">var <span class="ident">choices</span></div><div class="api__description"><p>The choices to be presented.</p></div><div id="h2o_wave.types.Combobox.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if this field is disabled.</p></div><div id="h2o_wave.types.Combobox.error" class="api__signature">var <span class="ident">error</span></div><div class="api__description"><p>Text to be displayed as an error below the text box.</p></div><div id="h2o_wave.types.Combobox.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.Combobox.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Combobox.placeholder" class="api__signature">var <span class="ident">placeholder</span></div><div class="api__description"><p>A string that provides a brief hint to the user as to what kind of information is expected in the field.</p></div><div id="h2o_wave.types.Combobox.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Combobox.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The name of the selected choice.</p></div><div id="h2o_wave.types.Combobox.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-9"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-9" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-9"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Combobox.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-9" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="command"></a>Command <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Command"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#command" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Command</span>(name: str, label: Union[str, NoneType] = None, caption: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, items: Union[List[ForwardRef(&#x27;<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>&#x27;)], NoneType] = None, data: Union[str, NoneType] = None)</div><div class="api__description"><p>Create a command.</p><p>Commands are typically displayed as context menu items or toolbar button.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-10"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-10" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-10"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Command.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-10" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Command__d: Dict) ‑&gt; <a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-10"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-10" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Command.caption" class="api__signature">var <span class="ident">caption</span></div><div class="api__description"><p>The caption for this command (typically a tooltip).</p></div><div id="h2o_wave.types.Command.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data associated with this command, if any.</p></div><div id="h2o_wave.types.Command.icon" class="api__signature">var <span class="ident">icon</span></div><div class="api__description"><p>The icon to be displayed for this command.</p></div><div id="h2o_wave.types.Command.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>Sub-commands, if any</p></div><div id="h2o_wave.types.Command.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The text displayed for this command.</p></div><div id="h2o_wave.types.Command.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component. If the name is prefixed with a &#x27;#&#x27;, the command sets the location hash to the name when executed.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-10"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-10" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-10"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Command.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-10" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="component"></a>Component <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Component"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#component" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Component</span>(text: Union[<a href="#h2o_wave.types.Text" title="h2o_wave.types.Text">Text</a>, NoneType] = None, text_xl: Union[<a href="#h2o_wave.types.TextXl" title="h2o_wave.types.TextXl">TextXl</a>, NoneType] = None, text_l: Union[<a href="#h2o_wave.types.TextL" title="h2o_wave.types.TextL">TextL</a>, NoneType] = None, text_m: Union[<a href="#h2o_wave.types.TextM" title="h2o_wave.types.TextM">TextM</a>, NoneType] = None, text_s: Union[<a href="#h2o_wave.types.TextS" title="h2o_wave.types.TextS">TextS</a>, NoneType] = None, text_xs: Union[<a href="#h2o_wave.types.TextXs" title="h2o_wave.types.TextXs">TextXs</a>, NoneType] = None, label: Union[<a href="#h2o_wave.types.Label" title="h2o_wave.types.Label">Label</a>, NoneType] = None, separator: Union[<a href="#h2o_wave.types.Separator" title="h2o_wave.types.Separator">Separator</a>, NoneType] = None, progress: Union[<a href="#h2o_wave.types.Progress" title="h2o_wave.types.Progress">Progress</a>, NoneType] = None, message_bar: Union[<a href="#h2o_wave.types.MessageBar" title="h2o_wave.types.MessageBar">MessageBar</a>, NoneType] = None, textbox: Union[<a href="#h2o_wave.types.Textbox" title="h2o_wave.types.Textbox">Textbox</a>, NoneType] = None, checkbox: Union[<a href="#h2o_wave.types.Checkbox" title="h2o_wave.types.Checkbox">Checkbox</a>, NoneType] = None, toggle: Union[<a href="#h2o_wave.types.Toggle" title="h2o_wave.types.Toggle">Toggle</a>, NoneType] = None, choice_group: Union[<a href="#h2o_wave.types.ChoiceGroup" title="h2o_wave.types.ChoiceGroup">ChoiceGroup</a>, NoneType] = None, checklist: Union[<a href="#h2o_wave.types.Checklist" title="h2o_wave.types.Checklist">Checklist</a>, NoneType] = None, dropdown: Union[<a href="#h2o_wave.types.Dropdown" title="h2o_wave.types.Dropdown">Dropdown</a>, NoneType] = None, combobox: Union[<a href="#h2o_wave.types.Combobox" title="h2o_wave.types.Combobox">Combobox</a>, NoneType] = None, slider: Union[<a href="#h2o_wave.types.Slider" title="h2o_wave.types.Slider">Slider</a>, NoneType] = None, spinbox: Union[<a href="#h2o_wave.types.Spinbox" title="h2o_wave.types.Spinbox">Spinbox</a>, NoneType] = None, date_picker: Union[<a href="#h2o_wave.types.DatePicker" title="h2o_wave.types.DatePicker">DatePicker</a>, NoneType] = None, color_picker: Union[<a href="#h2o_wave.types.ColorPicker" title="h2o_wave.types.ColorPicker">ColorPicker</a>, NoneType] = None, button: Union[<a href="#h2o_wave.types.Button" title="h2o_wave.types.Button">Button</a>, NoneType] = None, buttons: Union[<a href="#h2o_wave.types.Buttons" title="h2o_wave.types.Buttons">Buttons</a>, NoneType] = None, file_upload: Union[<a href="#h2o_wave.types.FileUpload" title="h2o_wave.types.FileUpload">FileUpload</a>, NoneType] = None, table: Union[<a href="#h2o_wave.types.Table" title="h2o_wave.types.Table">Table</a>, NoneType] = None, link: Union[<a href="#h2o_wave.types.Link" title="h2o_wave.types.Link">Link</a>, NoneType] = None, tabs: Union[<a href="#h2o_wave.types.Tabs" title="h2o_wave.types.Tabs">Tabs</a>, NoneType] = None, expander: Union[<a href="#h2o_wave.types.Expander" title="h2o_wave.types.Expander">Expander</a>, NoneType] = None, frame: Union[<a href="#h2o_wave.types.Frame" title="h2o_wave.types.Frame">Frame</a>, NoneType] = None, markup: Union[<a href="#h2o_wave.types.Markup" title="h2o_wave.types.Markup">Markup</a>, NoneType] = None, template: Union[<a href="#h2o_wave.types.Template" title="h2o_wave.types.Template">Template</a>, NoneType] = None, picker: Union[<a href="#h2o_wave.types.Picker" title="h2o_wave.types.Picker">Picker</a>, NoneType] = None, range_slider: Union[<a href="#h2o_wave.types.RangeSlider" title="h2o_wave.types.RangeSlider">RangeSlider</a>, NoneType] = None, stepper: Union[<a href="#h2o_wave.types.Stepper" title="h2o_wave.types.Stepper">Stepper</a>, NoneType] = None, visualization: Union[<a href="#h2o_wave.types.Visualization" title="h2o_wave.types.Visualization">Visualization</a>, NoneType] = None, vega_visualization: Union[<a href="#h2o_wave.types.VegaVisualization" title="h2o_wave.types.VegaVisualization">VegaVisualization</a>, NoneType] = None)</div><div class="api__description"><p>Create a component.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-11"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-11" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-11"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Component.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-11" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Component__d: Dict) ‑&gt; <a href="#h2o_wave.types.Component" title="h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-11"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-11" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Component.button" class="api__signature">var <span class="ident">button</span></div><div class="api__description"><p>Button.</p></div><div id="h2o_wave.types.Component.buttons" class="api__signature">var <span class="ident">buttons</span></div><div class="api__description"><p>Button set.</p></div><div id="h2o_wave.types.Component.checkbox" class="api__signature">var <span class="ident">checkbox</span></div><div class="api__description"><p>Checkbox.</p></div><div id="h2o_wave.types.Component.checklist" class="api__signature">var <span class="ident">checklist</span></div><div class="api__description"><p>Checklist.</p></div><div id="h2o_wave.types.Component.choice_group" class="api__signature">var <span class="ident">choice_group</span></div><div class="api__description"><p>Choice group.</p></div><div id="h2o_wave.types.Component.color_picker" class="api__signature">var <span class="ident">color_picker</span></div><div class="api__description"><p>Color picker.</p></div><div id="h2o_wave.types.Component.combobox" class="api__signature">var <span class="ident">combobox</span></div><div class="api__description"><p>Combobox.</p></div><div id="h2o_wave.types.Component.date_picker" class="api__signature">var <span class="ident">date_picker</span></div><div class="api__description"><p>Date picker.</p></div><div id="h2o_wave.types.Component.dropdown" class="api__signature">var <span class="ident">dropdown</span></div><div class="api__description"><p>Dropdown.</p></div><div id="h2o_wave.types.Component.expander" class="api__signature">var <span class="ident">expander</span></div><div class="api__description"><p>Expander.</p></div><div id="h2o_wave.types.Component.file_upload" class="api__signature">var <span class="ident">file_upload</span></div><div class="api__description"><p>File upload.</p></div><div id="h2o_wave.types.Component.frame" class="api__signature">var <span class="ident">frame</span></div><div class="api__description"><p>Frame.</p></div><div id="h2o_wave.types.Component.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Label.</p></div><div id="h2o_wave.types.Component.link" class="api__signature">var <span class="ident">link</span></div><div class="api__description"><p>Link.</p></div><div id="h2o_wave.types.Component.markup" class="api__signature">var <span class="ident">markup</span></div><div class="api__description"><p>Markup</p></div><div id="h2o_wave.types.Component.message_bar" class="api__signature">var <span class="ident">message_bar</span></div><div class="api__description"><p>Message bar.</p></div><div id="h2o_wave.types.Component.picker" class="api__signature">var <span class="ident">picker</span></div><div class="api__description"><p>Picker.</p></div><div id="h2o_wave.types.Component.progress" class="api__signature">var <span class="ident">progress</span></div><div class="api__description"><p>Progress bar.</p></div><div id="h2o_wave.types.Component.range_slider" class="api__signature">var <span class="ident">range_slider</span></div><div class="api__description"><p>Range Slider.</p></div><div id="h2o_wave.types.Component.separator" class="api__signature">var <span class="ident">separator</span></div><div class="api__description"><p>Separator.</p></div><div id="h2o_wave.types.Component.slider" class="api__signature">var <span class="ident">slider</span></div><div class="api__description"><p>Slider.</p></div><div id="h2o_wave.types.Component.spinbox" class="api__signature">var <span class="ident">spinbox</span></div><div class="api__description"><p>Spinbox.</p></div><div id="h2o_wave.types.Component.stepper" class="api__signature">var <span class="ident">stepper</span></div><div class="api__description"><p>Stepper.</p></div><div id="h2o_wave.types.Component.table" class="api__signature">var <span class="ident">table</span></div><div class="api__description"><p>Table.</p></div><div id="h2o_wave.types.Component.tabs" class="api__signature">var <span class="ident">tabs</span></div><div class="api__description"><p>Tabs.</p></div><div id="h2o_wave.types.Component.template" class="api__signature">var <span class="ident">template</span></div><div class="api__description"><p>Template</p></div><div id="h2o_wave.types.Component.text" class="api__signature">var <span class="ident">text</span></div><div class="api__description"><p>Text block.</p></div><div id="h2o_wave.types.Component.text_l" class="api__signature">var <span class="ident">text_l</span></div><div class="api__description"><p>Large sized text block.</p></div><div id="h2o_wave.types.Component.text_m" class="api__signature">var <span class="ident">text_m</span></div><div class="api__description"><p>Medium sized text block.</p></div><div id="h2o_wave.types.Component.text_s" class="api__signature">var <span class="ident">text_s</span></div><div class="api__description"><p>Small sized text block.</p></div><div id="h2o_wave.types.Component.text_xl" class="api__signature">var <span class="ident">text_xl</span></div><div class="api__description"><p>Extra-large sized text block.</p></div><div id="h2o_wave.types.Component.text_xs" class="api__signature">var <span class="ident">text_xs</span></div><div class="api__description"><p>Extra-small sized text block.</p></div><div id="h2o_wave.types.Component.textbox" class="api__signature">var <span class="ident">textbox</span></div><div class="api__description"><p>Textbox.</p></div><div id="h2o_wave.types.Component.toggle" class="api__signature">var <span class="ident">toggle</span></div><div class="api__description"><p>Toggle.</p></div><div id="h2o_wave.types.Component.vega_visualization" class="api__signature">var <span class="ident">vega_visualization</span></div><div class="api__description"><p>Vega-lite Visualization.</p></div><div id="h2o_wave.types.Component.visualization" class="api__signature">var <span class="ident">visualization</span></div><div class="api__description"><p>Visualization.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-11"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-11" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-11"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Component.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-11" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="datepicker"></a>DatePicker <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.DatePicker"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#datepicker" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">DatePicker</span>(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)</div><div class="api__description"><p>Create a date picker.</p><p>A date picker allows a user to pick a date value.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-12"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-12" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-12"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.DatePicker.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-12" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_DatePicker__d: Dict) ‑&gt; <a href="#h2o_wave.types.DatePicker" title="h2o_wave.types.DatePicker">DatePicker</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-12"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-12" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.DatePicker.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if this field is disabled.</p></div><div id="h2o_wave.types.DatePicker.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.DatePicker.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.DatePicker.placeholder" class="api__signature">var <span class="ident">placeholder</span></div><div class="api__description"><p>A string that provides a brief hint to the user as to what kind of information is expected in the field.</p></div><div id="h2o_wave.types.DatePicker.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.DatePicker.trigger" class="api__signature">var <span class="ident">trigger</span></div><div class="api__description"><p>True if the form should be submitted when the datepicker value changes.</p></div><div id="h2o_wave.types.DatePicker.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The date value in YYYY-MM-DD format.</p></div><div id="h2o_wave.types.DatePicker.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-12"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-12" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-12"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.DatePicker.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-12" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dropdown"></a>Dropdown <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Dropdown"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dropdown" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Dropdown</span>(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[<a href="#h2o_wave.types.Choice" title="h2o_wave.types.Choice">Choice</a>], 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)</div><div class="api__description"><p>Create a dropdown.</p><p>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.</p><p>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.</p><p>Note: Use either the &#x27;value&#x27; parameter or the &#x27;values&#x27; parameter. Setting the &#x27;values&#x27; parameter renders a multi-select dropdown.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-13"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-13" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-13"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Dropdown.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-13" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Dropdown__d: Dict) ‑&gt; <a href="#h2o_wave.types.Dropdown" title="h2o_wave.types.Dropdown">Dropdown</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-13"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-13" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Dropdown.choices" class="api__signature">var <span class="ident">choices</span></div><div class="api__description"><p>The choices to be presented.</p></div><div id="h2o_wave.types.Dropdown.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if this field is disabled.</p></div><div id="h2o_wave.types.Dropdown.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.Dropdown.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Dropdown.placeholder" class="api__signature">var <span class="ident">placeholder</span></div><div class="api__description"><p>A string that provides a brief hint to the user as to what kind of information is expected in the field.</p></div><div id="h2o_wave.types.Dropdown.required" class="api__signature">var <span class="ident">required</span></div><div class="api__description"><p>True if this is a required field.</p></div><div id="h2o_wave.types.Dropdown.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Dropdown.trigger" class="api__signature">var <span class="ident">trigger</span></div><div class="api__description"><p>True if the form should be submitted when the dropdown value changes.</p></div><div id="h2o_wave.types.Dropdown.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The name of the selected choice.</p></div><div id="h2o_wave.types.Dropdown.values" class="api__signature">var <span class="ident">values</span></div><div class="api__description"><p>The names of the selected choices. If this parameter is set, multiple selections will be allowed.</p></div><div id="h2o_wave.types.Dropdown.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-13"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-13" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-13"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Dropdown.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-13" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="expander"></a>Expander <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Expander"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#expander" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Expander</span>(name: str, label: Union[str, NoneType] = None, expanded: Union[bool, NoneType] = None, items: Union[List[ForwardRef(&#x27;<a href="#h2o_wave.types.Component" title="h2o_wave.types.Component">Component</a>&#x27;)], NoneType] = None, visible: Union[bool, NoneType] = None)</div><div class="api__description"><p>Creates a new expander.</p><p>Expanders can be used to show or hide a group of related components.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-14"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-14" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-14"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Expander.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-14" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Expander__d: Dict) ‑&gt; <a href="#h2o_wave.types.Expander" title="h2o_wave.types.Expander">Expander</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-14"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-14" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Expander.expanded" class="api__signature">var <span class="ident">expanded</span></div><div class="api__description"><p>True if expanded, False if collapsed.</p></div><div id="h2o_wave.types.Expander.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>List of components to be hideable by the expander.</p></div><div id="h2o_wave.types.Expander.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The text displayed on the expander.</p></div><div id="h2o_wave.types.Expander.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Expander.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-14"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-14" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-14"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Expander.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-14" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="fileupload"></a>FileUpload <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FileUpload"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#fileupload" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">FileUpload</span>(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)</div><div class="api__description"><p>Create a file upload component. A file upload component allows a user to browse, select and upload one or more files.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-15"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-15" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-15"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FileUpload.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-15" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_FileUpload__d: Dict) ‑&gt; <a href="#h2o_wave.types.FileUpload" title="h2o_wave.types.FileUpload">FileUpload</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-15"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-15" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.FileUpload.file_extensions" class="api__signature">var <span class="ident">file_extensions</span></div><div class="api__description"><p>List of allowed file extensions, e.g. <code>pdf</code>, <code>docx</code>, etc.</p></div><div id="h2o_wave.types.FileUpload.height" class="api__signature">var <span class="ident">height</span></div><div class="api__description"><p>The height of the file upload, e.g. &#x27;400px&#x27;, &#x27;50%&#x27;, etc.</p></div><div id="h2o_wave.types.FileUpload.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.FileUpload.max_file_size" class="api__signature">var <span class="ident">max_file_size</span></div><div class="api__description"><p>Maximum allowed size (Mb) per file. Defaults to no limit.</p></div><div id="h2o_wave.types.FileUpload.max_size" class="api__signature">var <span class="ident">max_size</span></div><div class="api__description"><p>Maximum allowed size (Mb) for all files combined. Defaults to no limit.</p></div><div id="h2o_wave.types.FileUpload.multiple" class="api__signature">var <span class="ident">multiple</span></div><div class="api__description"><p>True if the component should allow multiple files to be uploaded.</p></div><div id="h2o_wave.types.FileUpload.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.FileUpload.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.FileUpload.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-15"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-15" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-15"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FileUpload.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-15" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="flexcard"></a>FlexCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FlexCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#flexcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">FlexCard</span>(box: str, item_view: str, item_props: Union[dict, str], data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str], direction: Union[str, NoneType] = None, justify: Union[str, NoneType] = None, align: Union[str, NoneType] = None, wrap: Union[str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-16"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-16" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-16"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FlexCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-16" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_FlexCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.FlexCard" title="h2o_wave.types.FlexCard">FlexCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-16"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-16" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.FlexCard.align" class="api__signature">var <span class="ident">align</span></div><div class="api__description"><p>Layout strategy for cross axis. One of &#x27;start&#x27;, &#x27;end&#x27;, &#x27;center&#x27;, &#x27;baseline&#x27;, &#x27;stretch&#x27;.</p></div><div id="h2o_wave.types.FlexCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.FlexCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.FlexCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.FlexCard.direction" class="api__signature">var <span class="ident">direction</span></div><div class="api__description"><p>Layout direction. One of &#x27;horizontal&#x27;, &#x27;vertical&#x27;.</p></div><div id="h2o_wave.types.FlexCard.item_props" class="api__signature">var <span class="ident">item_props</span></div><div class="api__description"><p>The child card properties.</p></div><div id="h2o_wave.types.FlexCard.item_view" class="api__signature">var <span class="ident">item_view</span></div><div class="api__description"><p>The child card type.</p></div><div id="h2o_wave.types.FlexCard.justify" class="api__signature">var <span class="ident">justify</span></div><div class="api__description"><p>Layout strategy for main axis. One of &#x27;start&#x27;, &#x27;end&#x27;, &#x27;center&#x27;, &#x27;between&#x27;, &#x27;around&#x27;.</p></div><div id="h2o_wave.types.FlexCard.wrap" class="api__signature">var <span class="ident">wrap</span></div><div class="api__description"><p>Wrapping strategy. One of &#x27;start&#x27;, &#x27;end&#x27;, &#x27;center&#x27;, &#x27;between&#x27;, &#x27;around&#x27;, &#x27;stretch&#x27;.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-16"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-16" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-16"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FlexCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-16" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="formcard"></a>FormCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FormCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#formcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">FormCard</span>(box: str, items: Union[List[<a href="#h2o_wave.types.Component" title="h2o_wave.types.Component">Component</a>], str], commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a form.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-17"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-17" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-17"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FormCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-17" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_FormCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.FormCard" title="h2o_wave.types.FormCard">FormCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-17"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-17" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.FormCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.FormCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.FormCard.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>The components in this form.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-17"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-17" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-17"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FormCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-17" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="frame"></a>Frame <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Frame"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#frame" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Frame</span>(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)</div><div class="api__description"><p>Create a new inline frame (an <code>iframe</code>).</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-18"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-18" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-18"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Frame.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-18" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Frame__d: Dict) ‑&gt; <a href="#h2o_wave.types.Frame" title="h2o_wave.types.Frame">Frame</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-18"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-18" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Frame.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The HTML content of the page. A string containing <code>&lt;html&gt;...&lt;/html&gt;</code>.</p></div><div id="h2o_wave.types.Frame.height" class="api__signature">var <span class="ident">height</span></div><div class="api__description"><p>The height of the frame, e.g. <code>200px</code>, <code>50%</code>, etc. Defaults to <code>150px</code>.</p></div><div id="h2o_wave.types.Frame.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Frame.path" class="api__signature">var <span class="ident">path</span></div><div class="api__description"><p>The path or URL of the web page, e.g. <code>/foo.html</code> or <code>http://example.com/foo.html</code></p></div><div id="h2o_wave.types.Frame.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div><div id="h2o_wave.types.Frame.width" class="api__signature">var <span class="ident">width</span></div><div class="api__description"><p>The width of the frame, e.g. <code>200px</code>, <code>50%</code>, etc. Defaults to <code>100%</code>.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-18"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-18" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-18"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Frame.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-18" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="framecard"></a>FrameCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FrameCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#framecard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">FrameCard</span>(box: str, title: str, path: Union[str, NoneType] = None, content: Union[str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Render a card containing a HTML page inside an inline frame (an <code>iframe</code>).</p><p>Either a path or content can be provided as arguments.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-19"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-19" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-19"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FrameCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-19" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_FrameCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.FrameCard" title="h2o_wave.types.FrameCard">FrameCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-19"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-19" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.FrameCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.FrameCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.FrameCard.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The HTML content of the page. A string containing <code>&lt;html&gt;...&lt;/html&gt;</code></p></div><div id="h2o_wave.types.FrameCard.path" class="api__signature">var <span class="ident">path</span></div><div class="api__description"><p>The path or URL of the web page, e.g. <code>/foo.html</code> or <code>http://example.com/foo.html</code></p></div><div id="h2o_wave.types.FrameCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The title for this card.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-19"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-19" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-19"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FrameCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-19" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="graphicscard"></a>GraphicsCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.GraphicsCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#graphicscard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">GraphicsCard</span>(box: str, view_box: str, stage: Union[List[dict], str, NoneType] = None, scene: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a card for displaying vector graphics.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-20"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-20" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-20"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.GraphicsCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-20" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_GraphicsCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.GraphicsCard" title="h2o_wave.types.GraphicsCard">GraphicsCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-20"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-20" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.GraphicsCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.GraphicsCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.GraphicsCard.height" class="api__signature">var <span class="ident">height</span></div><div class="api__description"><p>The displayed height of the rectangular viewport. (Not the height of its coordinate system.)</p></div><div id="h2o_wave.types.GraphicsCard.scene" class="api__signature">var <span class="ident">scene</span></div><div class="api__description"><p>Foreground layer for rendering dynamic SVG elements.</p></div><div id="h2o_wave.types.GraphicsCard.stage" class="api__signature">var <span class="ident">stage</span></div><div class="api__description"><p>Background layer for rendering static SVG elements. Must be packed to conserve memory.</p></div><div id="h2o_wave.types.GraphicsCard.view_box" class="api__signature">var <span class="ident">view_box</span></div><div class="api__description"><p>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, &#x27;0 0 400 300&#x27;. See: <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox</a></p></div><div id="h2o_wave.types.GraphicsCard.width" class="api__signature">var <span class="ident">width</span></div><div class="api__description"><p>The displayed width of the rectangular viewport. (Not the width of its coordinate system.)</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-20"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-20" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-20"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.GraphicsCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-20" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="gridcard"></a>GridCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.GridCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#gridcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">GridCard</span>(box: str, title: str, cells: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str], data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str], commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-21"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-21" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-21"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.GridCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-21" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_GridCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.GridCard" title="h2o_wave.types.GridCard">GridCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-21"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-21" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.GridCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.GridCard.cells" class="api__signature">var <span class="ident">cells</span></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div><div id="h2o_wave.types.GridCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.GridCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div><div id="h2o_wave.types.GridCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-21"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-21" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-21"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.GridCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-21" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="headercard"></a>HeaderCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.HeaderCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#headercard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">HeaderCard</span>(box: str, title: str, subtitle: str, icon: Union[str, NoneType] = None, icon_color: Union[str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Render a card containing a HTML page inside an inline frame (iframe).</p><p>Either a path or content can be provided as arguments.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-22"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-22" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-22"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.HeaderCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-22" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_HeaderCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.HeaderCard" title="h2o_wave.types.HeaderCard">HeaderCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-22"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-22" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.HeaderCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.HeaderCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.HeaderCard.icon" class="api__signature">var <span class="ident">icon</span></div><div class="api__description"><p>The icon type, displayed to the left.</p></div><div id="h2o_wave.types.HeaderCard.icon_color" class="api__signature">var <span class="ident">icon_color</span></div><div class="api__description"><p>The icon&#x27;s color.</p></div><div id="h2o_wave.types.HeaderCard.subtitle" class="api__signature">var <span class="ident">subtitle</span></div><div class="api__description"><p>The subtitle, displayed below the title.</p></div><div id="h2o_wave.types.HeaderCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The title.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-22"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-22" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-22"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.HeaderCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-22" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="icontablecelltype"></a>IconTableCellType <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.IconTableCellType"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#icontablecelltype" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">IconTableCellType</span>(color: Union[str, NoneType] = None, name: Union[str, NoneType] = None)</div><div class="api__description"><p>Create a cell type that renders a column&#x27;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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-23"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-23" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-23"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.IconTableCellType.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-23" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_IconTableCellType__d: Dict) ‑&gt; <a href="#h2o_wave.types.IconTableCellType" title="h2o_wave.types.IconTableCellType">IconTableCellType</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-23"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-23" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.IconTableCellType.color" class="api__signature">var <span class="ident">color</span></div><div class="api__description"><p>Icon color.</p></div><div id="h2o_wave.types.IconTableCellType.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-23"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-23" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-23"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.IconTableCellType.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-23" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="imagecard"></a>ImageCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ImageCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#imagecard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">ImageCard</span>(box: str, title: str, type: str, image: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a card that displays a base64-encoded image.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-24"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-24" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-24"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ImageCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-24" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_ImageCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.ImageCard" title="h2o_wave.types.ImageCard">ImageCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-24"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-24" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.ImageCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.ImageCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.ImageCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.ImageCard.image" class="api__signature">var <span class="ident">image</span></div><div class="api__description"><p>Image data, base64-encoded.</p></div><div id="h2o_wave.types.ImageCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The card&#x27;s title.</p></div><div id="h2o_wave.types.ImageCard.type" class="api__signature">var <span class="ident">type</span></div><div class="api__description"><p>The image MIME subtype. One of <code>apng</code>, <code>bmp</code>, <code>gif</code>, <code>x-icon</code>, <code>jpeg</code>, <code>png</code>, <code>webp</code>.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-24"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-24" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-24"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ImageCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-24" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="label"></a>Label <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Label"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#label" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Label</span>(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)</div><div class="api__description"><p>Create a label.</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-25"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-25" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-25"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Label.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-25" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Label__d: Dict) ‑&gt; <a href="#h2o_wave.types.Label" title="h2o_wave.types.Label">Label</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-25"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-25" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Label.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if the label should be disabled.</p></div><div id="h2o_wave.types.Label.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The text displayed on the label.</p></div><div id="h2o_wave.types.Label.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Label.required" class="api__signature">var <span class="ident">required</span></div><div class="api__description"><p>True if the field is required.</p></div><div id="h2o_wave.types.Label.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Label.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-25"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-25" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-25"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Label.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-25" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="largebarstatcard"></a>LargeBarStatCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.LargeBarStatCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#largebarstatcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">LargeBarStatCard</span>(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[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-26"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-26" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-26"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.LargeBarStatCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-26" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_LargeBarStatCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.LargeBarStatCard" title="h2o_wave.types.LargeBarStatCard">LargeBarStatCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-26"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-26" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.LargeBarStatCard.aux_value" class="api__signature">var <span class="ident">aux_value</span></div><div class="api__description"><p>The auxiliary value, typically a target value.</p></div><div id="h2o_wave.types.LargeBarStatCard.aux_value_caption" class="api__signature">var <span class="ident">aux_value_caption</span></div><div class="api__description"><p>The caption displayed below the auxiliary value.</p></div><div id="h2o_wave.types.LargeBarStatCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.LargeBarStatCard.caption" class="api__signature">var <span class="ident">caption</span></div><div class="api__description"><p>The card&#x27;s caption.</p></div><div id="h2o_wave.types.LargeBarStatCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.LargeBarStatCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.LargeBarStatCard.plot_color" class="api__signature">var <span class="ident">plot_color</span></div><div class="api__description"><p>The color of the progress bar.</p></div><div id="h2o_wave.types.LargeBarStatCard.progress" class="api__signature">var <span class="ident">progress</span></div><div class="api__description"><p>The value of the progress bar, between 0 and 1.</p></div><div id="h2o_wave.types.LargeBarStatCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The card&#x27;s title.</p></div><div id="h2o_wave.types.LargeBarStatCard.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The primary value displayed.</p></div><div id="h2o_wave.types.LargeBarStatCard.value_caption" class="api__signature">var <span class="ident">value_caption</span></div><div class="api__description"><p>The caption displayed below the primary value.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-26"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-26" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-26"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.LargeBarStatCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-26" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="largestatcard"></a>LargeStatCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.LargeStatCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#largestatcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">LargeStatCard</span>(box: str, title: str, value: str, aux_value: str, caption: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a stat card displaying a primary value, an auxiliary value and a caption.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-27"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-27" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-27"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.LargeStatCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-27" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_LargeStatCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.LargeStatCard" title="h2o_wave.types.LargeStatCard">LargeStatCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-27"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-27" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.LargeStatCard.aux_value" class="api__signature">var <span class="ident">aux_value</span></div><div class="api__description"><p>The auxiliary value displayed next to the primary value.</p></div><div id="h2o_wave.types.LargeStatCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.LargeStatCard.caption" class="api__signature">var <span class="ident">caption</span></div><div class="api__description"><p>The caption displayed below the primary value.</p></div><div id="h2o_wave.types.LargeStatCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.LargeStatCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.LargeStatCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The card&#x27;s title.</p></div><div id="h2o_wave.types.LargeStatCard.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The primary value displayed.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-27"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-27" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-27"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.LargeStatCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-27" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="link"></a>Link <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Link"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#link" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Link</span>(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)</div><div class="api__description"><p>Create a hyperlink.</p><p>Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a <code>/</code> and point to URLs within the Q UI. All other kinds of paths are treated as external hyperlinks.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-28"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-28" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-28"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Link.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-28" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Link__d: Dict) ‑&gt; <a href="#h2o_wave.types.Link" title="h2o_wave.types.Link">Link</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-28"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-28" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Link.button" class="api__signature">var <span class="ident">button</span></div><div class="api__description"><p>True if the link should be rendered as a button.</p></div><div id="h2o_wave.types.Link.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if the link should be disabled.</p></div><div id="h2o_wave.types.Link.download" class="api__signature">var <span class="ident">download</span></div><div class="api__description"><p>True if the link should be used for file download.</p></div><div id="h2o_wave.types.Link.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The text to be displayed. If blank, the <code>path</code> is used as the label.</p></div><div id="h2o_wave.types.Link.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Link.path" class="api__signature">var <span class="ident">path</span></div><div class="api__description"><p>The path or URL to link to.</p></div><div id="h2o_wave.types.Link.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Link.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-28"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-28" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-28"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Link.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-28" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="listcard"></a>ListCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ListCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#listcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">ListCard</span>(box: str, title: str, item_view: str, item_props: Union[dict, str], data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str], commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom).</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-29"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-29" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-29"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ListCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-29" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_ListCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.ListCard" title="h2o_wave.types.ListCard">ListCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-29"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-29" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.ListCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.ListCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.ListCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.ListCard.item_props" class="api__signature">var <span class="ident">item_props</span></div><div class="api__description"><p>The child card properties.</p></div><div id="h2o_wave.types.ListCard.item_view" class="api__signature">var <span class="ident">item_view</span></div><div class="api__description"><p>The child card type.</p></div><div id="h2o_wave.types.ListCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The title for this card.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-29"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-29" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-29"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ListCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-29" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="listitem1card"></a>ListItem1Card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ListItem1Card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#listitem1card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">ListItem1Card</span>(box: str, title: str, caption: str, value: str, aux_value: str, data: Union[dict, str], commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-30"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-30" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-30"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ListItem1Card.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-30" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_ListItem1Card__d: Dict) ‑&gt; <a href="#h2o_wave.types.ListItem1Card" title="h2o_wave.types.ListItem1Card">ListItem1Card</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-30"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-30" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.ListItem1Card.aux_value" class="api__signature">var <span class="ident">aux_value</span></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div><div id="h2o_wave.types.ListItem1Card.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.ListItem1Card.caption" class="api__signature">var <span class="ident">caption</span></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div><div id="h2o_wave.types.ListItem1Card.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.ListItem1Card.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div><div id="h2o_wave.types.ListItem1Card.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div><div id="h2o_wave.types.ListItem1Card.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-30"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-30" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-30"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ListItem1Card.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-30" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="mark"></a>Mark <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Mark"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#mark" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Mark</span>(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)</div><div class="api__description"><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-31"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-31" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-31"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Mark.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-31" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Mark__d: Dict) ‑&gt; <a href="#h2o_wave.types.Mark" title="h2o_wave.types.Mark">Mark</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-31"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-31" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Mark.color" class="api__signature">var <span class="ident">color</span></div><div class="api__description"><p>Mark color field or value.</p></div><div id="h2o_wave.types.Mark.color_domain" class="api__signature">var <span class="ident">color_domain</span></div><div class="api__description"><p>The unique values in the data (labels or categories or classes) to map colors to, e.g. <code>[&#x27;high&#x27;, &#x27;medium&#x27;, &#x27;low&#x27;]</code>. If this is not provided, the unique values are automatically inferred from the <code>color</code> attribute.</p></div><div id="h2o_wave.types.Mark.color_range" class="api__signature">var <span class="ident">color_range</span></div><div class="api__description"><p>Mark color range for multi-series plots. A string containing space-separated colors, e.g. <code>&#x27;#fee8c8 #fdbb84 #e34a33&#x27;</code></p></div><div id="h2o_wave.types.Mark.coord" class="api__signature">var <span class="ident">coord</span></div><div class="api__description"><p>Coordinate system. <code>rect</code> is synonymous to <code>cartesian</code>. <code>theta</code> is transposed <code>polar</code>. One of &#x27;rect&#x27;, &#x27;cartesian&#x27;, &#x27;polar&#x27;, &#x27;theta&#x27;, &#x27;helix&#x27;.</p></div><div id="h2o_wave.types.Mark.curve" class="api__signature">var <span class="ident">curve</span></div><div class="api__description"><p>Curve type for <code>line</code> and <code>area</code> mark types. One of &#x27;none&#x27;, &#x27;smooth&#x27;, &#x27;step-before&#x27;, &#x27;step&#x27;, &#x27;step-after&#x27;.</p></div><div id="h2o_wave.types.Mark.dodge" class="api__signature">var <span class="ident">dodge</span></div><div class="api__description"><p>Field to dodge marks by, or &#x27;auto&#x27; to infer.</p></div><div id="h2o_wave.types.Mark.fill_color" class="api__signature">var <span class="ident">fill_color</span></div><div class="api__description"><p>Mark fill color.</p></div><div id="h2o_wave.types.Mark.fill_opacity" class="api__signature">var <span class="ident">fill_opacity</span></div><div class="api__description"><p>Mark fill opacity.</p></div><div id="h2o_wave.types.Mark.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Label field or value.</p></div><div id="h2o_wave.types.Mark.label_align" class="api__signature">var <span class="ident">label_align</span></div><div class="api__description"><p>Label text alignment. One of &#x27;left&#x27;, &#x27;right&#x27;, &#x27;center&#x27;, &#x27;start&#x27;, &#x27;end&#x27;.</p></div><div id="h2o_wave.types.Mark.label_fill_color" class="api__signature">var <span class="ident">label_fill_color</span></div><div class="api__description"><p>Label fill color.</p></div><div id="h2o_wave.types.Mark.label_fill_opacity" class="api__signature">var <span class="ident">label_fill_opacity</span></div><div class="api__description"><p>Label fill opacity.</p></div><div id="h2o_wave.types.Mark.label_font_size" class="api__signature">var <span class="ident">label_font_size</span></div><div class="api__description"><p>Label font size.</p></div><div id="h2o_wave.types.Mark.label_font_weight" class="api__signature">var <span class="ident">label_font_weight</span></div><div class="api__description"><p>Label font weight.</p></div><div id="h2o_wave.types.Mark.label_line_height" class="api__signature">var <span class="ident">label_line_height</span></div><div class="api__description"><p>Label line height.</p></div><div id="h2o_wave.types.Mark.label_offset" class="api__signature">var <span class="ident">label_offset</span></div><div class="api__description"><p>Distance between label and mark.</p></div><div id="h2o_wave.types.Mark.label_offset_x" class="api__signature">var <span class="ident">label_offset_x</span></div><div class="api__description"><p>Horizontal distance between label and mark.</p></div><div id="h2o_wave.types.Mark.label_offset_y" class="api__signature">var <span class="ident">label_offset_y</span></div><div class="api__description"><p>Vertical distance between label and mark.</p></div><div id="h2o_wave.types.Mark.label_overlap" class="api__signature">var <span class="ident">label_overlap</span></div><div class="api__description"><p>Strategy to use if labels overlap. One of &#x27;hide&#x27;, &#x27;overlap&#x27;, &#x27;constrain&#x27;.</p></div><div id="h2o_wave.types.Mark.label_position" class="api__signature">var <span class="ident">label_position</span></div><div class="api__description"><p>Label position relative to the mark. One of &#x27;top&#x27;, &#x27;bottom&#x27;, &#x27;middle&#x27;, &#x27;left&#x27;, &#x27;right&#x27;.</p></div><div id="h2o_wave.types.Mark.label_rotation" class="api__signature">var <span class="ident">label_rotation</span></div><div class="api__description"><p>Label rotation angle, in degrees, or &#x27;none&#x27; to disable automatic rotation. The default behavior is &#x27;auto&#x27; for automatic rotation.</p></div><div id="h2o_wave.types.Mark.label_stroke_color" class="api__signature">var <span class="ident">label_stroke_color</span></div><div class="api__description"><p>Label stroke color.</p></div><div id="h2o_wave.types.Mark.label_stroke_opacity" class="api__signature">var <span class="ident">label_stroke_opacity</span></div><div class="api__description"><p>Label stroke opacity.</p></div><div id="h2o_wave.types.Mark.label_stroke_size" class="api__signature">var <span class="ident">label_stroke_size</span></div><div class="api__description"><p>Label stroke size (line width or pen thickness).</p></div><div id="h2o_wave.types.Mark.ref_stroke_color" class="api__signature">var <span class="ident">ref_stroke_color</span></div><div class="api__description"><p>Reference line stroke color.</p></div><div id="h2o_wave.types.Mark.ref_stroke_dash" class="api__signature">var <span class="ident">ref_stroke_dash</span></div><div class="api__description"><p>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].</p></div><div id="h2o_wave.types.Mark.ref_stroke_opacity" class="api__signature">var <span class="ident">ref_stroke_opacity</span></div><div class="api__description"><p>Reference line stroke opacity.</p></div><div id="h2o_wave.types.Mark.ref_stroke_size" class="api__signature">var <span class="ident">ref_stroke_size</span></div><div class="api__description"><p>Reference line stroke size (line width or pen thickness).</p></div><div id="h2o_wave.types.Mark.shape" class="api__signature">var <span class="ident">shape</span></div><div class="api__description"><p>Mark shape field or value for <code>point</code> mark types. Possible values are &#x27;circle&#x27;, &#x27;square&#x27;, &#x27;bowtie&#x27;, &#x27;diamond&#x27;, &#x27;hexagon&#x27;, &#x27;triangle&#x27;, &#x27;triangle-down&#x27;, &#x27;cross&#x27;, &#x27;tick&#x27;, &#x27;plus&#x27;, &#x27;hyphen&#x27;, &#x27;line&#x27;.</p></div><div id="h2o_wave.types.Mark.shape_range" class="api__signature">var <span class="ident">shape_range</span></div><div class="api__description"><p>Mark shape range for multi-series plots using <code>point</code> mark types. A string containing space-separated shapes, e.g. <code>&#x27;circle square diamond&#x27;</code></p></div><div id="h2o_wave.types.Mark.size" class="api__signature">var <span class="ident">size</span></div><div class="api__description"><p>Mark size field or value.</p></div><div id="h2o_wave.types.Mark.size_range" class="api__signature">var <span class="ident">size_range</span></div><div class="api__description"><p>Mark size range. A string containing space-separated integers, e.g. <code>&#x27;4 30&#x27;</code></p></div><div id="h2o_wave.types.Mark.stack" class="api__signature">var <span class="ident">stack</span></div><div class="api__description"><p>Field to stack marks by, or &#x27;auto&#x27; to infer.</p></div><div id="h2o_wave.types.Mark.stroke_color" class="api__signature">var <span class="ident">stroke_color</span></div><div class="api__description"><p>Mark stroke color.</p></div><div id="h2o_wave.types.Mark.stroke_dash" class="api__signature">var <span class="ident">stroke_dash</span></div><div class="api__description"><p>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].</p></div><div id="h2o_wave.types.Mark.stroke_opacity" class="api__signature">var <span class="ident">stroke_opacity</span></div><div class="api__description"><p>Mark stroke opacity.</p></div><div id="h2o_wave.types.Mark.stroke_size" class="api__signature">var <span class="ident">stroke_size</span></div><div class="api__description"><p>Mark stroke size.</p></div><div id="h2o_wave.types.Mark.type" class="api__signature">var <span class="ident">type</span></div><div class="api__description"><p>Graphical geometry. One of &#x27;interval&#x27;, &#x27;line&#x27;, &#x27;path&#x27;, &#x27;point&#x27;, &#x27;area&#x27;, &#x27;polygon&#x27;, &#x27;schema&#x27;, &#x27;edge&#x27;, &#x27;heatmap&#x27;.</p></div><div id="h2o_wave.types.Mark.x" class="api__signature">var <span class="ident">x</span></div><div class="api__description"><p>X field or value.</p></div><div id="h2o_wave.types.Mark.x0" class="api__signature">var <span class="ident">x0</span></div><div class="api__description"><p>X base field or value.</p></div><div id="h2o_wave.types.Mark.x1" class="api__signature">var <span class="ident">x1</span></div><div class="api__description"><p>X bin lower bound field or value. For histograms.</p></div><div id="h2o_wave.types.Mark.x2" class="api__signature">var <span class="ident">x2</span></div><div class="api__description"><p>X bin upper bound field or value. For histograms.</p></div><div id="h2o_wave.types.Mark.x_max" class="api__signature">var <span class="ident">x_max</span></div><div class="api__description"><p>X axis scale maximum.</p></div><div id="h2o_wave.types.Mark.x_min" class="api__signature">var <span class="ident">x_min</span></div><div class="api__description"><p>X axis scale minimum.</p></div><div id="h2o_wave.types.Mark.x_nice" class="api__signature">var <span class="ident">x_nice</span></div><div class="api__description"><p>Whether to nice X axis scale ticks.</p></div><div id="h2o_wave.types.Mark.x_scale" class="api__signature">var <span class="ident">x_scale</span></div><div class="api__description"><p>X axis scale type. One of &#x27;linear&#x27;, &#x27;cat&#x27;, &#x27;category&#x27;, &#x27;identity&#x27;, &#x27;log&#x27;, &#x27;pow&#x27;, &#x27;time&#x27;, &#x27;timeCat&#x27;, &#x27;quantize&#x27;, &#x27;quantile&#x27;.</p></div><div id="h2o_wave.types.Mark.x_title" class="api__signature">var <span class="ident">x_title</span></div><div class="api__description"><p>X axis title.</p></div><div id="h2o_wave.types.Mark.y" class="api__signature">var <span class="ident">y</span></div><div class="api__description"><p>Y field or value.</p></div><div id="h2o_wave.types.Mark.y0" class="api__signature">var <span class="ident">y0</span></div><div class="api__description"><p>Y base field or value.</p></div><div id="h2o_wave.types.Mark.y1" class="api__signature">var <span class="ident">y1</span></div><div class="api__description"><p>Y bin lower bound field or value. For histograms.</p></div><div id="h2o_wave.types.Mark.y2" class="api__signature">var <span class="ident">y2</span></div><div class="api__description"><p>Y bin upper bound field or value. For histograms.</p></div><div id="h2o_wave.types.Mark.y_max" class="api__signature">var <span class="ident">y_max</span></div><div class="api__description"><p>Y axis scale maximum.</p></div><div id="h2o_wave.types.Mark.y_min" class="api__signature">var <span class="ident">y_min</span></div><div class="api__description"><p>Y axis scale minimum.</p></div><div id="h2o_wave.types.Mark.y_nice" class="api__signature">var <span class="ident">y_nice</span></div><div class="api__description"><p>Whether to nice Y axis scale ticks.</p></div><div id="h2o_wave.types.Mark.y_scale" class="api__signature">var <span class="ident">y_scale</span></div><div class="api__description"><p>Y axis scale type. One of &#x27;linear&#x27;, &#x27;cat&#x27;, &#x27;category&#x27;, &#x27;identity&#x27;, &#x27;log&#x27;, &#x27;pow&#x27;, &#x27;time&#x27;, &#x27;timeCat&#x27;, &#x27;quantize&#x27;, &#x27;quantile&#x27;.</p></div><div id="h2o_wave.types.Mark.y_title" class="api__signature">var <span class="ident">y_title</span></div><div class="api__description"><p>Y axis title.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-31"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-31" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-31"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Mark.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-31" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="markdowncard"></a>MarkdownCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MarkdownCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#markdowncard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">MarkdownCard</span>(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a card that renders Markdown content.</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-32"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-32" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-32"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MarkdownCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-32" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_MarkdownCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.MarkdownCard" title="h2o_wave.types.MarkdownCard">MarkdownCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-32"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-32" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.MarkdownCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.MarkdownCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.MarkdownCard.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The markdown content. Supports Github Flavored Markdown (GFM): <a href="https://guides.github.com/features/mastering-markdown/" target="_blank" rel="noopener noreferrer">https://guides.github.com/features/mastering-markdown/</a></p></div><div id="h2o_wave.types.MarkdownCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Additional data for the card.</p></div><div id="h2o_wave.types.MarkdownCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The title for this card.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-32"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-32" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-32"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MarkdownCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-32" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="markup"></a>Markup <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Markup"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#markup" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Markup</span>(content: str, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)</div><div class="api__description"><p>Render HTML content.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-33"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-33" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-33"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Markup.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-33" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Markup__d: Dict) ‑&gt; <a href="#h2o_wave.types.Markup" title="h2o_wave.types.Markup">Markup</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-33"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-33" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Markup.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The HTML content.</p></div><div id="h2o_wave.types.Markup.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Markup.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-33"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-33" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-33"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Markup.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-33" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="markupcard"></a>MarkupCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MarkupCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#markupcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">MarkupCard</span>(box: str, title: str, content: str, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Render HTML content.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-34"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-34" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-34"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MarkupCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-34" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_MarkupCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.MarkupCard" title="h2o_wave.types.MarkupCard">MarkupCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-34"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-34" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.MarkupCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.MarkupCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.MarkupCard.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The HTML content.</p></div><div id="h2o_wave.types.MarkupCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The title for this card.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-34"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-34" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-34"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MarkupCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-34" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="messagebar"></a>MessageBar <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MessageBar"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#messagebar" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">MessageBar</span>(type: Union[str, NoneType] = None, text: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)</div><div class="api__description"><p>Create a message bar.</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-35"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-35" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-35"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MessageBar.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-35" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_MessageBar__d: Dict) ‑&gt; <a href="#h2o_wave.types.MessageBar" title="h2o_wave.types.MessageBar">MessageBar</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-35"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-35" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.MessageBar.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.MessageBar.text" class="api__signature">var <span class="ident">text</span></div><div class="api__description"><p>The text displayed on the message bar.</p></div><div id="h2o_wave.types.MessageBar.type" class="api__signature">var <span class="ident">type</span></div><div class="api__description"><p>The icon and color of the message bar. One of &#x27;info&#x27;, &#x27;error&#x27;, &#x27;warning&#x27;, &#x27;success&#x27;, &#x27;danger&#x27;, &#x27;blocked&#x27;.</p></div><div id="h2o_wave.types.MessageBar.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-35"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-35" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-35"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MessageBar.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-35" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="metacard"></a>MetaCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MetaCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#metacard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">MetaCard</span>(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[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Represents page-global state.</p><p>This card is invisible. It is used to control attributes of the active page.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-36"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-36" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-36"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MetaCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-36" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_MetaCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.MetaCard" title="h2o_wave.types.MetaCard">MetaCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-36"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-36" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.MetaCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.MetaCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.MetaCard.notification" class="api__signature">var <span class="ident">notification</span></div><div class="api__description"><p>Display a desktop notification to the user.</p></div><div id="h2o_wave.types.MetaCard.redirect" class="api__signature">var <span class="ident">redirect</span></div><div class="api__description"><p>Redirect the page to a new URL.</p></div><div id="h2o_wave.types.MetaCard.refresh" class="api__signature">var <span class="ident">refresh</span></div><div class="api__description"><p>Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use).</p></div><div id="h2o_wave.types.MetaCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The title of the page.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-36"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-36" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-36"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MetaCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-36" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="navcard"></a>NavCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.NavCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#navcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">NavCard</span>(box: str, items: List[<a href="#h2o_wave.types.NavGroup" title="h2o_wave.types.NavGroup">NavGroup</a>], commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a card containing a navigation pane.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-37"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-37" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-37"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.NavCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-37" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_NavCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.NavCard" title="h2o_wave.types.NavCard">NavCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-37"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-37" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.NavCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.NavCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.NavCard.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>The navigation groups contained in this pane.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-37"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-37" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-37"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.NavCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-37" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="navgroup"></a>NavGroup <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.NavGroup"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#navgroup" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">NavGroup</span>(label: str, items: List[<a href="#h2o_wave.types.NavItem" title="h2o_wave.types.NavItem">NavItem</a>])</div><div class="api__description"><p>Create a group of navigation items.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-38"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-38" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-38"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.NavGroup.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-38" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_NavGroup__d: Dict) ‑&gt; <a href="#h2o_wave.types.NavGroup" title="h2o_wave.types.NavGroup">NavGroup</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-38"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-38" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.NavGroup.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>The navigation items contained in this group.</p></div><div id="h2o_wave.types.NavGroup.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The label to display for this group.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-38"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-38" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-38"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.NavGroup.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-38" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="navitem"></a>NavItem <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.NavItem"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#navitem" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">NavItem</span>(name: str, label: str)</div><div class="api__description"><p>Create a navigation item.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-39"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-39" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-39"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.NavItem.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-39" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_NavItem__d: Dict) ‑&gt; <a href="#h2o_wave.types.NavItem" title="h2o_wave.types.NavItem">NavItem</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-39"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-39" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.NavItem.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The label to display.</p></div><div id="h2o_wave.types.NavItem.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>The name of this item. Prefix the name with a &#x27;#&#x27; to trigger hash-change navigation.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-39"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-39" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-39"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.NavItem.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-39" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="picker"></a>Picker <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Picker"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#picker" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Picker</span>(name: str, choices: List[<a href="#h2o_wave.types.Choice" title="h2o_wave.types.Choice">Choice</a>], 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)</div><div class="api__description"><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-40"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-40" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-40"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Picker.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-40" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Picker__d: Dict) ‑&gt; <a href="#h2o_wave.types.Picker" title="h2o_wave.types.Picker">Picker</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-40"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-40" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Picker.choices" class="api__signature">var <span class="ident">choices</span></div><div class="api__description"><p>The choices to be presented.</p></div><div id="h2o_wave.types.Picker.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>Controls whether the picker should be disabled or not.</p></div><div id="h2o_wave.types.Picker.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed above the component.</p></div><div id="h2o_wave.types.Picker.max_choices" class="api__signature">var <span class="ident">max_choices</span></div><div class="api__description"><p>Maximum number of selectable choices. Defaults to no limit.</p></div><div id="h2o_wave.types.Picker.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Picker.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Picker.values" class="api__signature">var <span class="ident">values</span></div><div class="api__description"><p>The names of the selected choices.</p></div><div id="h2o_wave.types.Picker.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-40"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-40" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-40"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Picker.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-40" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="pixelartcard"></a>PixelArtCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.PixelArtCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#pixelartcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">PixelArtCard</span>(box: str, title: str, data: Union[dict, str], commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a card displaying a collaborative Pixel art tool, just for kicks.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-41"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-41" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-41"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.PixelArtCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-41" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_PixelArtCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.PixelArtCard" title="h2o_wave.types.PixelArtCard">PixelArtCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-41"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-41" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.PixelArtCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.PixelArtCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.PixelArtCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>The data for this card.</p></div><div id="h2o_wave.types.PixelArtCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The title for this card.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-41"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-41" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-41"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.PixelArtCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-41" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="plot"></a>Plot <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Plot"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#plot" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Plot</span>(marks: List[<a href="#h2o_wave.types.Mark" title="h2o_wave.types.Mark">Mark</a>])</div><div class="api__description"><p>Create a plot. A plot is composed of one or more graphical mark layers.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-42"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-42" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-42"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Plot.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-42" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Plot__d: Dict) ‑&gt; <a href="#h2o_wave.types.Plot" title="h2o_wave.types.Plot">Plot</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-42"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-42" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Plot.marks" class="api__signature">var <span class="ident">marks</span></div><div class="api__description"><p>The graphical mark layers contained in this plot.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-42"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-42" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-42"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Plot.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-42" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="plotcard"></a>PlotCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.PlotCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#plotcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">PlotCard</span>(box: str, title: str, data: Union[dict, str], plot: <a href="#h2o_wave.types.Plot" title="h2o_wave.types.Plot">Plot</a>, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a card displaying a plot.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-43"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-43" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-43"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.PlotCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-43" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_PlotCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.PlotCard" title="h2o_wave.types.PlotCard">PlotCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-43"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-43" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.PlotCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.PlotCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.PlotCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.PlotCard.plot" class="api__signature">var <span class="ident">plot</span></div><div class="api__description"><p>The plot to be displayed in this card.</p></div><div id="h2o_wave.types.PlotCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The title for this card.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-43"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-43" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-43"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.PlotCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-43" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="progress"></a>Progress <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Progress"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#progress" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Progress</span>(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)</div><div class="api__description"><p>Create a progress bar.</p><p>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.</p><p>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]</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-44"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-44" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-44"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Progress.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-44" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Progress__d: Dict) ‑&gt; <a href="#h2o_wave.types.Progress" title="h2o_wave.types.Progress">Progress</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-44"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-44" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Progress.caption" class="api__signature">var <span class="ident">caption</span></div><div class="api__description"><p>The text displayed below the bar.</p></div><div id="h2o_wave.types.Progress.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The text displayed above the bar.</p></div><div id="h2o_wave.types.Progress.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Progress.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Progress.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The progress, between 0.0 and 1.0, or -1 (default) if indeterminate.</p></div><div id="h2o_wave.types.Progress.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-44"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-44" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-44"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Progress.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-44" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="progresstablecelltype"></a>ProgressTableCellType <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ProgressTableCellType"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#progresstablecelltype" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">ProgressTableCellType</span>(color: Union[str, NoneType] = None, name: Union[str, NoneType] = None)</div><div class="api__description"><p>Create a cell type that renders a column&#x27;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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-45"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-45" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-45"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ProgressTableCellType.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-45" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_ProgressTableCellType__d: Dict) ‑&gt; <a href="#h2o_wave.types.ProgressTableCellType" title="h2o_wave.types.ProgressTableCellType">ProgressTableCellType</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-45"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-45" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.ProgressTableCellType.color" class="api__signature">var <span class="ident">color</span></div><div class="api__description"><p>Color of the progress arc.</p></div><div id="h2o_wave.types.ProgressTableCellType.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-45"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-45" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-45"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ProgressTableCellType.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-45" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="rangeslider"></a>RangeSlider <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.RangeSlider"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#rangeslider" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">RangeSlider</span>(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)</div><div class="api__description"><p>Create a range slider.</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-46"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-46" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-46"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.RangeSlider.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-46" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_RangeSlider__d: Dict) ‑&gt; <a href="#h2o_wave.types.RangeSlider" title="h2o_wave.types.RangeSlider">RangeSlider</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-46"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-46" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.RangeSlider.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if this field is disabled.</p></div><div id="h2o_wave.types.RangeSlider.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.RangeSlider.max" class="api__signature">var <span class="ident">max</span></div><div class="api__description"><p>The maximum value of the slider. Defaults to 100.</p></div><div id="h2o_wave.types.RangeSlider.max_value" class="api__signature">var <span class="ident">max_value</span></div><div class="api__description"><p>The upper bound of the selected range.</p></div><div id="h2o_wave.types.RangeSlider.min" class="api__signature">var <span class="ident">min</span></div><div class="api__description"><p>The minimum value of the slider. Defaults to 0.</p></div><div id="h2o_wave.types.RangeSlider.min_value" class="api__signature">var <span class="ident">min_value</span></div><div class="api__description"><p>The lower bound of the selected range.</p></div><div id="h2o_wave.types.RangeSlider.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.RangeSlider.step" class="api__signature">var <span class="ident">step</span></div><div class="api__description"><p>The difference between two adjacent values of the slider.</p></div><div id="h2o_wave.types.RangeSlider.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.RangeSlider.trigger" class="api__signature">var <span class="ident">trigger</span></div><div class="api__description"><p>True if the form should be submitted when the slider value changes.</p></div><div id="h2o_wave.types.RangeSlider.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-46"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-46" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-46"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.RangeSlider.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-46" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="repeatcard"></a>RepeatCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.RepeatCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#repeatcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">RepeatCard</span>(box: str, item_view: str, item_props: Union[dict, str], data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str], commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE. Create a card containing other cards.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-47"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-47" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-47"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.RepeatCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-47" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_RepeatCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.RepeatCard" title="h2o_wave.types.RepeatCard">RepeatCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-47"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-47" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.RepeatCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.RepeatCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.RepeatCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.RepeatCard.item_props" class="api__signature">var <span class="ident">item_props</span></div><div class="api__description"><p>The child card properties.</p></div><div id="h2o_wave.types.RepeatCard.item_view" class="api__signature">var <span class="ident">item_view</span></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-47"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-47" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-47"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.RepeatCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-47" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="separator"></a>Separator <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Separator"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#separator" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Separator</span>(label: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)</div><div class="api__description"><p>Create a separator.</p><p>A separator visually separates content into groups.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-48"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-48" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-48"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Separator.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-48" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Separator__d: Dict) ‑&gt; <a href="#h2o_wave.types.Separator" title="h2o_wave.types.Separator">Separator</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-48"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-48" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Separator.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The text displayed on the separator.</p></div><div id="h2o_wave.types.Separator.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Separator.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-48"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-48" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-48"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Separator.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-48" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="slider"></a>Slider <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Slider"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#slider" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Slider</span>(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)</div><div class="api__description"><p>Create a slider.</p><p>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.</p><p>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.</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-49"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-49" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-49"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Slider.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-49" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Slider__d: Dict) ‑&gt; <a href="#h2o_wave.types.Slider" title="h2o_wave.types.Slider">Slider</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-49"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-49" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Slider.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if this field is disabled.</p></div><div id="h2o_wave.types.Slider.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.Slider.max" class="api__signature">var <span class="ident">max</span></div><div class="api__description"><p>The maximum value of the slider.</p></div><div id="h2o_wave.types.Slider.min" class="api__signature">var <span class="ident">min</span></div><div class="api__description"><p>The minimum value of the slider.</p></div><div id="h2o_wave.types.Slider.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Slider.step" class="api__signature">var <span class="ident">step</span></div><div class="api__description"><p>The difference between two adjacent values of the slider.</p></div><div id="h2o_wave.types.Slider.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Slider.trigger" class="api__signature">var <span class="ident">trigger</span></div><div class="api__description"><p>True if the form should be submitted when the slider value changes.</p></div><div id="h2o_wave.types.Slider.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The current value of the slider.</p></div><div id="h2o_wave.types.Slider.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-49"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-49" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-49"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Slider.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-49" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="smallseriesstatcard"></a>SmallSeriesStatCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.SmallSeriesStatCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#smallseriesstatcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">SmallSeriesStatCard</span>(box: str, title: str, value: str, plot_data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, 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[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a small stat card displaying a primary value and a series plot.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-50"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-50" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-50"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.SmallSeriesStatCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-50" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_SmallSeriesStatCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.SmallSeriesStatCard" title="h2o_wave.types.SmallSeriesStatCard">SmallSeriesStatCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-50"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-50" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.SmallSeriesStatCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.plot_category" class="api__signature">var <span class="ident">plot_category</span></div><div class="api__description"><p>The data field to use for x-axis values (ignored if <code>plot_type</code> is <code>area</code>; must be provided if <code>plot_type</code> is <code>interval</code>). Defaults to &#x27;x&#x27;.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.plot_color" class="api__signature">var <span class="ident">plot_color</span></div><div class="api__description"><p>The plot&#x27;s color.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.plot_curve" class="api__signature">var <span class="ident">plot_curve</span></div><div class="api__description"><p>The plot&#x27;s curve style. Defaults to <code>linear</code>. One of &#x27;linear&#x27;, &#x27;smooth&#x27;, &#x27;step&#x27;, &#x27;step-after&#x27;, &#x27;step-before&#x27;.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.plot_data" class="api__signature">var <span class="ident">plot_data</span></div><div class="api__description"><p>The plot&#x27;s data.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.plot_type" class="api__signature">var <span class="ident">plot_type</span></div><div class="api__description"><p>The type of plot. Defaults to <code>area</code>. One of &#x27;area&#x27;, &#x27;interval&#x27;.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.plot_value" class="api__signature">var <span class="ident">plot_value</span></div><div class="api__description"><p>The data field to use for y-axis values.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.plot_zero_value" class="api__signature">var <span class="ident">plot_zero_value</span></div><div class="api__description"><p>The base value to use for each y-axis mark. Set this to <code>0</code> if you want to pin the x-axis at <code>y=0</code>. If not provided, the minimum value from the data is used.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The card&#x27;s title.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The primary value displayed.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-50"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-50" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-50"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.SmallSeriesStatCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-50" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="smallstatcard"></a>SmallStatCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.SmallStatCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#smallstatcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">SmallStatCard</span>(box: str, title: str, value: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a stat card displaying a single value.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-51"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-51" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-51"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.SmallStatCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-51" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_SmallStatCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.SmallStatCard" title="h2o_wave.types.SmallStatCard">SmallStatCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-51"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-51" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.SmallStatCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.SmallStatCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.SmallStatCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.SmallStatCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The card&#x27;s title.</p></div><div id="h2o_wave.types.SmallStatCard.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The primary value displayed.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-51"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-51" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-51"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.SmallStatCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-51" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="spinbox"></a>Spinbox <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Spinbox"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#spinbox" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Spinbox</span>(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)</div><div class="api__description"><p>Create a spinbox.</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-52"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-52" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-52"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Spinbox.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-52" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Spinbox__d: Dict) ‑&gt; <a href="#h2o_wave.types.Spinbox" title="h2o_wave.types.Spinbox">Spinbox</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-52"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-52" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Spinbox.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if this field is disabled.</p></div><div id="h2o_wave.types.Spinbox.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.Spinbox.max" class="api__signature">var <span class="ident">max</span></div><div class="api__description"><p>The maximum value of the spinbox.</p></div><div id="h2o_wave.types.Spinbox.min" class="api__signature">var <span class="ident">min</span></div><div class="api__description"><p>The minimum value of the spinbox.</p></div><div id="h2o_wave.types.Spinbox.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Spinbox.step" class="api__signature">var <span class="ident">step</span></div><div class="api__description"><p>The difference between two adjacent values of the spinbox.</p></div><div id="h2o_wave.types.Spinbox.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Spinbox.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The current value of the spinbox.</p></div><div id="h2o_wave.types.Spinbox.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-52"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-52" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-52"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Spinbox.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-52" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step"></a>Step <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Step"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#step" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Step</span>(label: str, icon: Union[str, NoneType] = None, done: Union[bool, NoneType] = None)</div><div class="api__description"><p>Create a step for a stepper.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-53"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-53" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-53"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Step.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-53" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Step__d: Dict) ‑&gt; <a href="#h2o_wave.types.Step" title="h2o_wave.types.Step">Step</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-53"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-53" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Step.done" class="api__signature">var <span class="ident">done</span></div><div class="api__description"><p>Indicates whether this step has already been completed.</p></div><div id="h2o_wave.types.Step.icon" class="api__signature">var <span class="ident">icon</span></div><div class="api__description"><p>Icon to be displayed.</p></div><div id="h2o_wave.types.Step.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text displayed below icon.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-53"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-53" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-53"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Step.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-53" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="stepper"></a>Stepper <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Stepper"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#stepper" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Stepper</span>(name: str, items: List[<a href="#h2o_wave.types.Step" title="h2o_wave.types.Step">Step</a>], visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)</div><div class="api__description"><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-54"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-54" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-54"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Stepper.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-54" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Stepper__d: Dict) ‑&gt; <a href="#h2o_wave.types.Stepper" title="h2o_wave.types.Stepper">Stepper</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-54"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-54" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Stepper.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>The sequence of steps to be displayed.</p></div><div id="h2o_wave.types.Stepper.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Stepper.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Stepper.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-54"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-54" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-54"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Stepper.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-54" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tab"></a>Tab <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Tab"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tab" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Tab</span>(name: str, label: Union[str, NoneType] = None, icon: Union[str, NoneType] = None)</div><div class="api__description"><p>Create a tab.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-55"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-55" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-55"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Tab.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-55" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Tab__d: Dict) ‑&gt; <a href="#h2o_wave.types.Tab" title="h2o_wave.types.Tab">Tab</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-55"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-55" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Tab.icon" class="api__signature">var <span class="ident">icon</span></div><div class="api__description"><p>The icon displayed on the tab.</p></div><div id="h2o_wave.types.Tab.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The text displayed on the tab.</p></div><div id="h2o_wave.types.Tab.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-55"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-55" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-55"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Tab.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-55" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tabcard"></a>TabCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TabCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tabcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TabCard</span>(box: str, items: List[<a href="#h2o_wave.types.Tab" title="h2o_wave.types.Tab">Tab</a>], value: Union[str, NoneType] = None, link: Union[bool, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a card containing tabs for navigation.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-56"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-56" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-56"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TabCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-56" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TabCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.TabCard" title="h2o_wave.types.TabCard">TabCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-56"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-56" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TabCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.TabCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.TabCard.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>Items to render.</p></div><div id="h2o_wave.types.TabCard.link" class="api__signature">var <span class="ident">link</span></div><div class="api__description"><p>True if tabs should be rendered as links and not a standard tab.</p></div><div id="h2o_wave.types.TabCard.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The name of the tab to select.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-56"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-56" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-56"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TabCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-56" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="table"></a>Table <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Table"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#table" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Table</span>(name: str, columns: List[<a href="#h2o_wave.types.TableColumn" title="h2o_wave.types.TableColumn">TableColumn</a>], rows: List[<a href="#h2o_wave.types.TableRow" title="h2o_wave.types.TableRow">TableRow</a>], 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)</div><div class="api__description"><p>Create an interactive table.</p><p>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.</p><p>If <code>multiple</code> is set to False (default), each row in the table is clickable. When a row is clicked, the form is submitted automatically, and <code>q.args.table_name</code> is set to <code>[row_name]</code>, where <code>table_name</code> is the <code>name</code> of the table, and <code>row_name</code> is the <code>name</code> of the row that was clicked on.</p><p>If <code>multiple</code> 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,<code>q.args.table_name</code> is set to <code>[row1_name, row2_name, …]</code> where <code>table_name</code> is the <code>name</code> of the table, and <code>row1_name</code>, <code>row2_name</code> are the <code>name</code> of the rows that were selected. Note that if <code>multiple</code> is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-57"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-57" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-57"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Table.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-57" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Table__d: Dict) ‑&gt; <a href="#h2o_wave.types.Table" title="h2o_wave.types.Table">Table</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-57"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-57" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Table.columns" class="api__signature">var <span class="ident">columns</span></div><div class="api__description"><p>The columns in this table.</p></div><div id="h2o_wave.types.Table.downloadable" class="api__signature">var <span class="ident">downloadable</span></div><div class="api__description"><p>Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False.</p></div><div id="h2o_wave.types.Table.groupable" class="api__signature">var <span class="ident">groupable</span></div><div class="api__description"><p>True to allow group by feature.</p></div><div id="h2o_wave.types.Table.height" class="api__signature">var <span class="ident">height</span></div><div class="api__description"><p>The height of the table, e.g. &#x27;400px&#x27;, &#x27;50%&#x27;, etc.</p></div><div id="h2o_wave.types.Table.multiple" class="api__signature">var <span class="ident">multiple</span></div><div class="api__description"><p>True to allow multiple rows to be selected.</p></div><div id="h2o_wave.types.Table.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Table.resettable" class="api__signature">var <span class="ident">resettable</span></div><div class="api__description"><p>Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False.</p></div><div id="h2o_wave.types.Table.rows" class="api__signature">var <span class="ident">rows</span></div><div class="api__description"><p>The rows in this table.</p></div><div id="h2o_wave.types.Table.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Table.values" class="api__signature">var <span class="ident">values</span></div><div class="api__description"><p>The names of the selected rows. If this parameter is set, multiple selections will be allowed (<code>multiple</code> is assumed to be <code>True</code>).</p></div><div id="h2o_wave.types.Table.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-57"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-57" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-57"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Table.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-57" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tablecelltype"></a>TableCellType <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TableCellType"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tablecelltype" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TableCellType</span>(progress: Union[<a href="#h2o_wave.types.ProgressTableCellType" title="h2o_wave.types.ProgressTableCellType">ProgressTableCellType</a>, NoneType] = None, icon: Union[<a href="#h2o_wave.types.IconTableCellType" title="h2o_wave.types.IconTableCellType">IconTableCellType</a>, NoneType] = None)</div><div class="api__description"><p>Defines cell content to be rendered instead of a simple text.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-58"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-58" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-58"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TableCellType.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-58" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TableCellType__d: Dict) ‑&gt; <a href="#h2o_wave.types.TableCellType" title="h2o_wave.types.TableCellType">TableCellType</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-58"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-58" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TableCellType.icon" class="api__signature">var <span class="ident">icon</span></div><div class="api__description"><p>No documentation available.</p></div><div id="h2o_wave.types.TableCellType.progress" class="api__signature">var <span class="ident">progress</span></div><div class="api__description"><p>No documentation available.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-58"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-58" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-58"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TableCellType.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-58" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tablecolumn"></a>TableColumn <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TableColumn"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tablecolumn" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TableColumn</span>(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[<a href="#h2o_wave.types.TableCellType" title="h2o_wave.types.TableCellType">TableCellType</a>, NoneType] = None)</div><div class="api__description"><p>Create a table column.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-59"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-59" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-59"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TableColumn.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-59" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TableColumn__d: Dict) ‑&gt; <a href="#h2o_wave.types.TableColumn" title="h2o_wave.types.TableColumn">TableColumn</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-59"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-59" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TableColumn.cell_type" class="api__signature">var <span class="ident">cell_type</span></div><div class="api__description"><p>Defines how to render each cell in this column. Defaults to plain text.</p></div><div id="h2o_wave.types.TableColumn.filterable" class="api__signature">var <span class="ident">filterable</span></div><div class="api__description"><p>Indicates whether the contents of this column are displayed as filters in a dropdown.</p></div><div id="h2o_wave.types.TableColumn.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The text displayed on the column header.</p></div><div id="h2o_wave.types.TableColumn.link" class="api__signature">var <span class="ident">link</span></div><div class="api__description"><p>Indicates whether each cell in this column should be displayed as a clickable link.</p></div><div id="h2o_wave.types.TableColumn.max_width" class="api__signature">var <span class="ident">max_width</span></div><div class="api__description"><p>The maximum width of this column, e.g. &#x27;100px&#x27;. Only <code>px</code> units are supported at this time.</p></div><div id="h2o_wave.types.TableColumn.min_width" class="api__signature">var <span class="ident">min_width</span></div><div class="api__description"><p>The minimum width of this column, e.g. &#x27;50px&#x27;. Only <code>px</code> units are supported at this time.</p></div><div id="h2o_wave.types.TableColumn.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this column.</p></div><div id="h2o_wave.types.TableColumn.searchable" class="api__signature">var <span class="ident">searchable</span></div><div class="api__description"><p>Indicates whether the contents of this column can be searched through. Enables a search box for the table if true.</p></div><div id="h2o_wave.types.TableColumn.sortable" class="api__signature">var <span class="ident">sortable</span></div><div class="api__description"><p>Indicates whether the column is sortable.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-59"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-59" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-59"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TableColumn.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-59" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tablerow"></a>TableRow <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TableRow"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tablerow" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TableRow</span>(name: str, cells: List[str])</div><div class="api__description"><p>Create a table row.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-60"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-60" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-60"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TableRow.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-60" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TableRow__d: Dict) ‑&gt; <a href="#h2o_wave.types.TableRow" title="h2o_wave.types.TableRow">TableRow</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-60"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-60" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TableRow.cells" class="api__signature">var <span class="ident">cells</span></div><div class="api__description"><p>The cells in this row (displayed left to right).</p></div><div id="h2o_wave.types.TableRow.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this row.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-60"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-60" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-60"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TableRow.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-60" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tabs"></a>Tabs <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Tabs"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tabs" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Tabs</span>(name: str, value: Union[str, NoneType] = None, items: Union[List[<a href="#h2o_wave.types.Tab" title="h2o_wave.types.Tab">Tab</a>], NoneType] = None, visible: Union[bool, NoneType] = None)</div><div class="api__description"><p>Create a tab bar.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-61"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-61" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-61"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Tabs.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-61" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Tabs__d: Dict) ‑&gt; <a href="#h2o_wave.types.Tabs" title="h2o_wave.types.Tabs">Tabs</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-61"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-61" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Tabs.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>The tabs in this tab bar.</p></div><div id="h2o_wave.types.Tabs.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Tabs.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The name of the tab to select.</p></div><div id="h2o_wave.types.Tabs.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-61"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-61" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-61"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Tabs.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-61" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tallgaugestatcard"></a>TallGaugeStatCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TallGaugeStatCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tallgaugestatcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TallGaugeStatCard</span>(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[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-62"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-62" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-62"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TallGaugeStatCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-62" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TallGaugeStatCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.TallGaugeStatCard" title="h2o_wave.types.TallGaugeStatCard">TallGaugeStatCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-62"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-62" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TallGaugeStatCard.aux_value" class="api__signature">var <span class="ident">aux_value</span></div><div class="api__description"><p>The auxiliary value displayed next to the primary value.</p></div><div id="h2o_wave.types.TallGaugeStatCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.TallGaugeStatCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.TallGaugeStatCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.TallGaugeStatCard.plot_color" class="api__signature">var <span class="ident">plot_color</span></div><div class="api__description"><p>The color of the progress gauge.</p></div><div id="h2o_wave.types.TallGaugeStatCard.progress" class="api__signature">var <span class="ident">progress</span></div><div class="api__description"><p>The value of the progress gauge, between 0 and 1.</p></div><div id="h2o_wave.types.TallGaugeStatCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The card&#x27;s title.</p></div><div id="h2o_wave.types.TallGaugeStatCard.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The primary value displayed.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-62"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-62" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-62"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TallGaugeStatCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-62" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tallseriesstatcard"></a>TallSeriesStatCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TallSeriesStatCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tallseriesstatcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TallSeriesStatCard</span>(box: str, title: str, value: str, aux_value: str, plot_data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, 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[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a tall stat card displaying a primary value, an auxiliary value and a series plot.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-63"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-63" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-63"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TallSeriesStatCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-63" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TallSeriesStatCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.TallSeriesStatCard" title="h2o_wave.types.TallSeriesStatCard">TallSeriesStatCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-63"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-63" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TallSeriesStatCard.aux_value" class="api__signature">var <span class="ident">aux_value</span></div><div class="api__description"><p>The auxiliary value displayed below the primary value.</p></div><div id="h2o_wave.types.TallSeriesStatCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.TallSeriesStatCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.TallSeriesStatCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.TallSeriesStatCard.plot_category" class="api__signature">var <span class="ident">plot_category</span></div><div class="api__description"><p>The data field to use for x-axis values (ignored if <code>plot_type</code> is <code>area</code>; must be provided if <code>plot_type</code> is <code>interval</code>). Defaults to &#x27;x&#x27;.</p></div><div id="h2o_wave.types.TallSeriesStatCard.plot_color" class="api__signature">var <span class="ident">plot_color</span></div><div class="api__description"><p>The plot&#x27;s color.</p></div><div id="h2o_wave.types.TallSeriesStatCard.plot_curve" class="api__signature">var <span class="ident">plot_curve</span></div><div class="api__description"><p>The plot&#x27;s curve style. Defaults to <code>linear</code>. One of &#x27;linear&#x27;, &#x27;smooth&#x27;, &#x27;step&#x27;, &#x27;step-after&#x27;, &#x27;step-before&#x27;.</p></div><div id="h2o_wave.types.TallSeriesStatCard.plot_data" class="api__signature">var <span class="ident">plot_data</span></div><div class="api__description"><p>The plot&#x27;s data.</p></div><div id="h2o_wave.types.TallSeriesStatCard.plot_type" class="api__signature">var <span class="ident">plot_type</span></div><div class="api__description"><p>The type of plot. Defaults to <code>area</code>. One of &#x27;area&#x27;, &#x27;interval&#x27;.</p></div><div id="h2o_wave.types.TallSeriesStatCard.plot_value" class="api__signature">var <span class="ident">plot_value</span></div><div class="api__description"><p>The data field to use for y-axis values.</p></div><div id="h2o_wave.types.TallSeriesStatCard.plot_zero_value" class="api__signature">var <span class="ident">plot_zero_value</span></div><div class="api__description"><p>The base value to use for each y-axis mark. Set this to <code>0</code> if you want to pin the x-axis at <code>y=0</code>. If not provided, the minimum value from the data is used.</p></div><div id="h2o_wave.types.TallSeriesStatCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The card&#x27;s title.</p></div><div id="h2o_wave.types.TallSeriesStatCard.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The primary value displayed.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-63"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-63" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-63"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TallSeriesStatCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-63" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="template"></a>Template <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Template"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#template" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Template</span>(content: str, data: Union[dict, str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)</div><div class="api__description"><p>Render dynamic content using an HTML template.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-64"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-64" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-64"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Template.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-64" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Template__d: Dict) ‑&gt; <a href="#h2o_wave.types.Template" title="h2o_wave.types.Template">Template</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-64"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-64" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Template.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The Handlebars template. <a href="https://handlebarsjs.com/guide/" target="_blank" rel="noopener noreferrer">https://handlebarsjs.com/guide/</a></p></div><div id="h2o_wave.types.Template.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for the Handlebars template</p></div><div id="h2o_wave.types.Template.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Template.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-64"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-64" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-64"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Template.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-64" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="templatecard"></a>TemplateCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TemplateCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#templatecard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TemplateCard</span>(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Render dynamic content using an HTML template.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-65"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-65" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-65"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TemplateCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-65" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TemplateCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.TemplateCard" title="h2o_wave.types.TemplateCard">TemplateCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-65"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-65" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TemplateCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.TemplateCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.TemplateCard.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The Handlebars template. <a href="https://handlebarsjs.com/guide/" target="_blank" rel="noopener noreferrer">https://handlebarsjs.com/guide/</a></p></div><div id="h2o_wave.types.TemplateCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for the Handlebars template.</p></div><div id="h2o_wave.types.TemplateCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The title for this card.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-65"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-65" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-65"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TemplateCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-65" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="text"></a>Text <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Text"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#text" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Text</span>(content: str, size: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)</div><div class="api__description"><p>Create text content.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-66"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-66" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-66"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Text.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-66" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Text__d: Dict) ‑&gt; <a href="#h2o_wave.types.Text" title="h2o_wave.types.Text">Text</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-66"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-66" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Text.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The text content.</p></div><div id="h2o_wave.types.Text.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Text.size" class="api__signature">var <span class="ident">size</span></div><div class="api__description"><p>The font size of the text content. One of &#x27;xl&#x27;, &#x27;l&#x27;, &#x27;m&#x27;, &#x27;s&#x27;, &#x27;xs&#x27;.</p></div><div id="h2o_wave.types.Text.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>Tooltip message.</p></div><div id="h2o_wave.types.Text.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-66"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-66" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-66"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Text.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-66" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="textl"></a>TextL <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextL"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#textl" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TextL</span>(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None, name: Union[str, NoneType] = None)</div><div class="api__description"><p>Create large sized text content.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-67"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-67" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-67"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextL.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-67" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TextL__d: Dict) ‑&gt; <a href="#h2o_wave.types.TextL" title="h2o_wave.types.TextL">TextL</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-67"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-67" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TextL.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.TextL.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The text content.</p></div><div id="h2o_wave.types.TextL.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.TextL.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>Tooltip message.</p></div><div id="h2o_wave.types.TextL.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-67"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-67" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-67"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextL.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-67" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="textm"></a>TextM <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextM"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#textm" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TextM</span>(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)</div><div class="api__description"><p>Create medium sized text content.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-68"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-68" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-68"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextM.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-68" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TextM__d: Dict) ‑&gt; <a href="#h2o_wave.types.TextM" title="h2o_wave.types.TextM">TextM</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-68"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-68" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TextM.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The text content.</p></div><div id="h2o_wave.types.TextM.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.TextM.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>Tooltip message.</p></div><div id="h2o_wave.types.TextM.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-68"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-68" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-68"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextM.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-68" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="texts"></a>TextS <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextS"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#texts" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TextS</span>(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)</div><div class="api__description"><p>Create small sized text content.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-69"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-69" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-69"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextS.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-69" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TextS__d: Dict) ‑&gt; <a href="#h2o_wave.types.TextS" title="h2o_wave.types.TextS">TextS</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-69"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-69" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TextS.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The text content.</p></div><div id="h2o_wave.types.TextS.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.TextS.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>Tooltip message.</p></div><div id="h2o_wave.types.TextS.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-69"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-69" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-69"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextS.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-69" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="textxl"></a>TextXl <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextXl"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#textxl" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TextXl</span>(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None, name: Union[str, NoneType] = None)</div><div class="api__description"><p>Create extra-large sized text content.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-70"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-70" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-70"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextXl.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-70" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TextXl__d: Dict) ‑&gt; <a href="#h2o_wave.types.TextXl" title="h2o_wave.types.TextXl">TextXl</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-70"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-70" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TextXl.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.TextXl.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The text content.</p></div><div id="h2o_wave.types.TextXl.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.TextXl.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>Tooltip message.</p></div><div id="h2o_wave.types.TextXl.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-70"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-70" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-70"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextXl.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-70" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="textxs"></a>TextXs <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextXs"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#textxs" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TextXs</span>(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)</div><div class="api__description"><p>Create extra-small sized text content.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-71"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-71" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-71"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextXs.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-71" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TextXs__d: Dict) ‑&gt; <a href="#h2o_wave.types.TextXs" title="h2o_wave.types.TextXs">TextXs</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-71"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-71" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TextXs.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The text content.</p></div><div id="h2o_wave.types.TextXs.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.TextXs.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>Tooltip message.</p></div><div id="h2o_wave.types.TextXs.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-71"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-71" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-71"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextXs.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-71" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="textbox"></a>Textbox <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Textbox"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#textbox" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Textbox</span>(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)</div><div class="api__description"><p>Create a text box.</p><p>The text box component enables a user to type text into an app. It&#x27;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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-72"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-72" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-72"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Textbox.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-72" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Textbox__d: Dict) ‑&gt; <a href="#h2o_wave.types.Textbox" title="h2o_wave.types.Textbox">Textbox</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-72"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-72" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Textbox.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if the text box is disabled.</p></div><div id="h2o_wave.types.Textbox.error" class="api__signature">var <span class="ident">error</span></div><div class="api__description"><p>Text to be displayed as an error below the text box.</p></div><div id="h2o_wave.types.Textbox.icon" class="api__signature">var <span class="ident">icon</span></div><div class="api__description"><p>Icon displayed in the far right end of the text field.</p></div><div id="h2o_wave.types.Textbox.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The text displayed above the field.</p></div><div id="h2o_wave.types.Textbox.mask" class="api__signature">var <span class="ident">mask</span></div><div class="api__description"><p>The masking string that defines the mask&#x27;s behavior. A backslash will escape any character. Special format characters are: &#x27;9&#x27;: [0-9] &#x27;a&#x27;: [a-zA-Z] &#x27;*&#x27;: [a-zA-Z0-9].</p></div><div id="h2o_wave.types.Textbox.multiline" class="api__signature">var <span class="ident">multiline</span></div><div class="api__description"><p>True if the text box should allow multi-line text entry.</p></div><div id="h2o_wave.types.Textbox.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Textbox.password" class="api__signature">var <span class="ident">password</span></div><div class="api__description"><p>True if the text box should hide text content.</p></div><div id="h2o_wave.types.Textbox.placeholder" class="api__signature">var <span class="ident">placeholder</span></div><div class="api__description"><p>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.</p></div><div id="h2o_wave.types.Textbox.prefix" class="api__signature">var <span class="ident">prefix</span></div><div class="api__description"><p>Text to be displayed before the text box contents.</p></div><div id="h2o_wave.types.Textbox.readonly" class="api__signature">var <span class="ident">readonly</span></div><div class="api__description"><p>True if the text box is a read-only field.</p></div><div id="h2o_wave.types.Textbox.required" class="api__signature">var <span class="ident">required</span></div><div class="api__description"><p>True if the text box is a required field.</p></div><div id="h2o_wave.types.Textbox.suffix" class="api__signature">var <span class="ident">suffix</span></div><div class="api__description"><p>Text to be displayed after the text box contents.</p></div><div id="h2o_wave.types.Textbox.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Textbox.trigger" class="api__signature">var <span class="ident">trigger</span></div><div class="api__description"><p>True if the form should be submitted when the text value changes.</p></div><div id="h2o_wave.types.Textbox.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>Text to be displayed inside the text box.</p></div><div id="h2o_wave.types.Textbox.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-72"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-72" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-72"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Textbox.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-72" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="toggle"></a>Toggle <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Toggle"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#toggle" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Toggle</span>(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)</div><div class="api__description"><p>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.</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-73"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-73" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-73"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Toggle.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-73" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Toggle__d: Dict) ‑&gt; <a href="#h2o_wave.types.Toggle" title="h2o_wave.types.Toggle">Toggle</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-73"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-73" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Toggle.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if the checkbox is disabled.</p></div><div id="h2o_wave.types.Toggle.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.Toggle.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Toggle.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Toggle.trigger" class="api__signature">var <span class="ident">trigger</span></div><div class="api__description"><p>True if the form should be submitted when the toggle value changes.</p></div><div id="h2o_wave.types.Toggle.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>True if selected, False if unselected.</p></div><div id="h2o_wave.types.Toggle.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-73"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-73" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-73"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Toggle.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-73" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="toolbarcard"></a>ToolbarCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ToolbarCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#toolbarcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">ToolbarCard</span>(box: str, items: List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], secondary_items: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None, overflow_items: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a card containing a toolbar.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-74"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-74" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-74"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ToolbarCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-74" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_ToolbarCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.ToolbarCard" title="h2o_wave.types.ToolbarCard">ToolbarCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-74"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-74" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.ToolbarCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.ToolbarCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.ToolbarCard.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>Items to render.</p></div><div id="h2o_wave.types.ToolbarCard.overflow_items" class="api__signature">var <span class="ident">overflow_items</span></div><div class="api__description"><p>Items to render in an overflow menu.</p></div><div id="h2o_wave.types.ToolbarCard.secondary_items" class="api__signature">var <span class="ident">secondary_items</span></div><div class="api__description"><p>Items to render on the right side (or left, in RTL).</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-74"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-74" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-74"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ToolbarCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-74" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="vegacard"></a>VegaCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.VegaCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#vegacard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">VegaCard</span>(box: str, title: str, specification: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a card containing a Vega-lite plot.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-75"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-75" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-75"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.VegaCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-75" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_VegaCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.VegaCard" title="h2o_wave.types.VegaCard">VegaCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-75"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-75" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.VegaCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.VegaCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.VegaCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for the plot, if any.</p></div><div id="h2o_wave.types.VegaCard.specification" class="api__signature">var <span class="ident">specification</span></div><div class="api__description"><p>The Vega-lite specification.</p></div><div id="h2o_wave.types.VegaCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The title of this card.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-75"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-75" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-75"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.VegaCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-75" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="vegavisualization"></a>VegaVisualization <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.VegaVisualization"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#vegavisualization" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">VegaVisualization</span>(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)</div><div class="api__description"><p>Create a Vega-lite plot for display inside a form.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-76"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-76" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-76"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.VegaVisualization.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-76" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_VegaVisualization__d: Dict) ‑&gt; <a href="#h2o_wave.types.VegaVisualization" title="h2o_wave.types.VegaVisualization">VegaVisualization</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-76"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-76" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.VegaVisualization.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for the plot, if any.</p></div><div id="h2o_wave.types.VegaVisualization.height" class="api__signature">var <span class="ident">height</span></div><div class="api__description"><p>The height of the visualization. Defaults to 300px.</p></div><div id="h2o_wave.types.VegaVisualization.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.VegaVisualization.specification" class="api__signature">var <span class="ident">specification</span></div><div class="api__description"><p>The Vega-lite specification.</p></div><div id="h2o_wave.types.VegaVisualization.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div><div id="h2o_wave.types.VegaVisualization.width" class="api__signature">var <span class="ident">width</span></div><div class="api__description"><p>The width of the visualization. Defaults to 100%.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-76"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-76" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-76"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.VegaVisualization.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-76" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="visualization"></a>Visualization <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Visualization"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#visualization" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Visualization</span>(plot: <a href="#h2o_wave.types.Plot" title="h2o_wave.types.Plot">Plot</a>, data: Union[dict, str], width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)</div><div class="api__description"><p>Create a visualization for display inside a form.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-77"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-77" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-77"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Visualization.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-77" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Visualization__d: Dict) ‑&gt; <a href="#h2o_wave.types.Visualization" title="h2o_wave.types.Visualization">Visualization</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-77"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-77" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Visualization.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this visualization.</p></div><div id="h2o_wave.types.Visualization.height" class="api__signature">var <span class="ident">height</span></div><div class="api__description"><p>The hight of the visualization. Defaults to 300px.</p></div><div id="h2o_wave.types.Visualization.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Visualization.plot" class="api__signature">var <span class="ident">plot</span></div><div class="api__description"><p>The plot to be rendered in this visualization.</p></div><div id="h2o_wave.types.Visualization.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div><div id="h2o_wave.types.Visualization.width" class="api__signature">var <span class="ident">width</span></div><div class="api__description"><p>The width of the visualization. Defaults to 100%.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-77"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-77" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-77"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Visualization.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-77" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="widebarstatcard"></a>WideBarStatCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.WideBarStatCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#widebarstatcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">WideBarStatCard</span>(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[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-78"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-78" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-78"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.WideBarStatCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-78" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_WideBarStatCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.WideBarStatCard" title="h2o_wave.types.WideBarStatCard">WideBarStatCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-78"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-78" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.WideBarStatCard.aux_value" class="api__signature">var <span class="ident">aux_value</span></div><div class="api__description"><p>The auxiliary value displayed next to the primary value.</p></div><div id="h2o_wave.types.WideBarStatCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.WideBarStatCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.WideBarStatCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.WideBarStatCard.plot_color" class="api__signature">var <span class="ident">plot_color</span></div><div class="api__description"><p>The color of the progress bar.</p></div><div id="h2o_wave.types.WideBarStatCard.progress" class="api__signature">var <span class="ident">progress</span></div><div class="api__description"><p>The value of the progress bar, between 0 and 1.</p></div><div id="h2o_wave.types.WideBarStatCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The card&#x27;s title.</p></div><div id="h2o_wave.types.WideBarStatCard.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The primary value displayed.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-78"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-78" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-78"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.WideBarStatCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-78" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="widegaugestatcard"></a>WideGaugeStatCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.WideGaugeStatCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#widegaugestatcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">WideGaugeStatCard</span>(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[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-79"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-79" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-79"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.WideGaugeStatCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-79" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_WideGaugeStatCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.WideGaugeStatCard" title="h2o_wave.types.WideGaugeStatCard">WideGaugeStatCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-79"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-79" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.WideGaugeStatCard.aux_value" class="api__signature">var <span class="ident">aux_value</span></div><div class="api__description"><p>The auxiliary value displayed next to the primary value.</p></div><div id="h2o_wave.types.WideGaugeStatCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.WideGaugeStatCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.WideGaugeStatCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.WideGaugeStatCard.plot_color" class="api__signature">var <span class="ident">plot_color</span></div><div class="api__description"><p>The color of the progress gauge.</p></div><div id="h2o_wave.types.WideGaugeStatCard.progress" class="api__signature">var <span class="ident">progress</span></div><div class="api__description"><p>The value of the progress gauge, between 0 and 1.</p></div><div id="h2o_wave.types.WideGaugeStatCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The card&#x27;s title.</p></div><div id="h2o_wave.types.WideGaugeStatCard.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The primary value displayed.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-79"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-79" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-79"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.WideGaugeStatCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-79" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="wideseriesstatcard"></a>WideSeriesStatCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.WideSeriesStatCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#wideseriesstatcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">WideSeriesStatCard</span>(box: str, title: str, value: str, aux_value: str, plot_data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, 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[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a wide stat card displaying a primary value, an auxiliary value and a series plot.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-80"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-80" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-80"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.WideSeriesStatCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-80" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_WideSeriesStatCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.WideSeriesStatCard" title="h2o_wave.types.WideSeriesStatCard">WideSeriesStatCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-80"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-80" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.WideSeriesStatCard.aux_value" class="api__signature">var <span class="ident">aux_value</span></div><div class="api__description"><p>The auxiliary value displayed below the primary value.</p></div><div id="h2o_wave.types.WideSeriesStatCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.WideSeriesStatCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.WideSeriesStatCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.WideSeriesStatCard.plot_category" class="api__signature">var <span class="ident">plot_category</span></div><div class="api__description"><p>The data field to use for x-axis values (ignored if <code>plot_type</code> is <code>area</code>; must be provided if <code>plot_type</code> is <code>interval</code>). Defaults to &#x27;x&#x27;.</p></div><div id="h2o_wave.types.WideSeriesStatCard.plot_color" class="api__signature">var <span class="ident">plot_color</span></div><div class="api__description"><p>The plot&#x27;s color.</p></div><div id="h2o_wave.types.WideSeriesStatCard.plot_curve" class="api__signature">var <span class="ident">plot_curve</span></div><div class="api__description"><p>The plot&#x27;s curve style. Defaults to <code>linear</code>. One of &#x27;linear&#x27;, &#x27;smooth&#x27;, &#x27;step&#x27;, &#x27;step-after&#x27;, &#x27;step-before&#x27;.</p></div><div id="h2o_wave.types.WideSeriesStatCard.plot_data" class="api__signature">var <span class="ident">plot_data</span></div><div class="api__description"><p>The plot&#x27;s data.</p></div><div id="h2o_wave.types.WideSeriesStatCard.plot_type" class="api__signature">var <span class="ident">plot_type</span></div><div class="api__description"><p>The type of plot. Defaults to <code>area</code>. One of &#x27;area&#x27;, &#x27;interval&#x27;.</p></div><div id="h2o_wave.types.WideSeriesStatCard.plot_value" class="api__signature">var <span class="ident">plot_value</span></div><div class="api__description"><p>The data field to use for y-axis values.</p></div><div id="h2o_wave.types.WideSeriesStatCard.plot_zero_value" class="api__signature">var <span class="ident">plot_zero_value</span></div><div class="api__description"><p>The base value to use for each y-axis mark. Set this to <code>0</code> if you want to pin the x-axis at <code>y=0</code>. If not provided, the minimum value from the data is used.</p></div><div id="h2o_wave.types.WideSeriesStatCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The card&#x27;s title.</p></div><div id="h2o_wave.types.WideSeriesStatCard.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The primary value displayed.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-80"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-80" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-80"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.WideSeriesStatCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-80" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/api/types.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/api/graphics"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Module h2o_wave.graphics</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/api/test"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Module h2o_wave.test »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#classes" class="table-of-contents__link">Classes</a><ul><li><a href="#breadcrumb" class="table-of-contents__link">Breadcrumb <a name="h2o_wave.types.Breadcrumb"></a></li><li><a href="#breadcrumbscard" class="table-of-contents__link">BreadcrumbsCard <a name="h2o_wave.types.BreadcrumbsCard"></a></li><li><a href="#button" class="table-of-contents__link">Button <a name="h2o_wave.types.Button"></a></li><li><a href="#buttons" class="table-of-contents__link">Buttons <a name="h2o_wave.types.Buttons"></a></li><li><a href="#checkbox" class="table-of-contents__link">Checkbox <a name="h2o_wave.types.Checkbox"></a></li><li><a href="#checklist" class="table-of-contents__link">Checklist <a name="h2o_wave.types.Checklist"></a></li><li><a href="#choice" class="table-of-contents__link">Choice <a name="h2o_wave.types.Choice"></a></li><li><a href="#choicegroup" class="table-of-contents__link">ChoiceGroup <a name="h2o_wave.types.ChoiceGroup"></a></li><li><a href="#colorpicker" class="table-of-contents__link">ColorPicker <a name="h2o_wave.types.ColorPicker"></a></li><li><a href="#combobox" class="table-of-contents__link">Combobox <a name="h2o_wave.types.Combobox"></a></li><li><a href="#command" class="table-of-contents__link">Command <a name="h2o_wave.types.Command"></a></li><li><a href="#component" class="table-of-contents__link">Component <a name="h2o_wave.types.Component"></a></li><li><a href="#datepicker" class="table-of-contents__link">DatePicker <a name="h2o_wave.types.DatePicker"></a></li><li><a href="#dropdown" class="table-of-contents__link">Dropdown <a name="h2o_wave.types.Dropdown"></a></li><li><a href="#expander" class="table-of-contents__link">Expander <a name="h2o_wave.types.Expander"></a></li><li><a href="#fileupload" class="table-of-contents__link">FileUpload <a name="h2o_wave.types.FileUpload"></a></li><li><a href="#flexcard" class="table-of-contents__link">FlexCard <a name="h2o_wave.types.FlexCard"></a></li><li><a href="#formcard" class="table-of-contents__link">FormCard <a name="h2o_wave.types.FormCard"></a></li><li><a href="#frame" class="table-of-contents__link">Frame <a name="h2o_wave.types.Frame"></a></li><li><a href="#framecard" class="table-of-contents__link">FrameCard <a name="h2o_wave.types.FrameCard"></a></li><li><a href="#graphicscard" class="table-of-contents__link">GraphicsCard <a name="h2o_wave.types.GraphicsCard"></a></li><li><a href="#gridcard" class="table-of-contents__link">GridCard <a name="h2o_wave.types.GridCard"></a></li><li><a href="#headercard" class="table-of-contents__link">HeaderCard <a name="h2o_wave.types.HeaderCard"></a></li><li><a href="#icontablecelltype" class="table-of-contents__link">IconTableCellType <a name="h2o_wave.types.IconTableCellType"></a></li><li><a href="#imagecard" class="table-of-contents__link">ImageCard <a name="h2o_wave.types.ImageCard"></a></li><li><a href="#label" class="table-of-contents__link">Label <a name="h2o_wave.types.Label"></a></li><li><a href="#largebarstatcard" class="table-of-contents__link">LargeBarStatCard <a name="h2o_wave.types.LargeBarStatCard"></a></li><li><a href="#largestatcard" class="table-of-contents__link">LargeStatCard <a name="h2o_wave.types.LargeStatCard"></a></li><li><a href="#link" class="table-of-contents__link">Link <a name="h2o_wave.types.Link"></a></li><li><a href="#listcard" class="table-of-contents__link">ListCard <a name="h2o_wave.types.ListCard"></a></li><li><a href="#listitem1card" class="table-of-contents__link">ListItem1Card <a name="h2o_wave.types.ListItem1Card"></a></li><li><a href="#mark" class="table-of-contents__link">Mark <a name="h2o_wave.types.Mark"></a></li><li><a href="#markdowncard" class="table-of-contents__link">MarkdownCard <a name="h2o_wave.types.MarkdownCard"></a></li><li><a href="#markup" class="table-of-contents__link">Markup <a name="h2o_wave.types.Markup"></a></li><li><a href="#markupcard" class="table-of-contents__link">MarkupCard <a name="h2o_wave.types.MarkupCard"></a></li><li><a href="#messagebar" class="table-of-contents__link">MessageBar <a name="h2o_wave.types.MessageBar"></a></li><li><a href="#metacard" class="table-of-contents__link">MetaCard <a name="h2o_wave.types.MetaCard"></a></li><li><a href="#navcard" class="table-of-contents__link">NavCard <a name="h2o_wave.types.NavCard"></a></li><li><a href="#navgroup" class="table-of-contents__link">NavGroup <a name="h2o_wave.types.NavGroup"></a></li><li><a href="#navitem" class="table-of-contents__link">NavItem <a name="h2o_wave.types.NavItem"></a></li><li><a href="#picker" class="table-of-contents__link">Picker <a name="h2o_wave.types.Picker"></a></li><li><a href="#pixelartcard" class="table-of-contents__link">PixelArtCard <a name="h2o_wave.types.PixelArtCard"></a></li><li><a href="#plot" class="table-of-contents__link">Plot <a name="h2o_wave.types.Plot"></a></li><li><a href="#plotcard" class="table-of-contents__link">PlotCard <a name="h2o_wave.types.PlotCard"></a></li><li><a href="#progress" class="table-of-contents__link">Progress <a name="h2o_wave.types.Progress"></a></li><li><a href="#progresstablecelltype" class="table-of-contents__link">ProgressTableCellType <a name="h2o_wave.types.ProgressTableCellType"></a></li><li><a href="#rangeslider" class="table-of-contents__link">RangeSlider <a name="h2o_wave.types.RangeSlider"></a></li><li><a href="#repeatcard" class="table-of-contents__link">RepeatCard <a name="h2o_wave.types.RepeatCard"></a></li><li><a href="#separator" class="table-of-contents__link">Separator <a name="h2o_wave.types.Separator"></a></li><li><a href="#slider" class="table-of-contents__link">Slider <a name="h2o_wave.types.Slider"></a></li><li><a href="#smallseriesstatcard" class="table-of-contents__link">SmallSeriesStatCard <a name="h2o_wave.types.SmallSeriesStatCard"></a></li><li><a href="#smallstatcard" class="table-of-contents__link">SmallStatCard <a name="h2o_wave.types.SmallStatCard"></a></li><li><a href="#spinbox" class="table-of-contents__link">Spinbox <a name="h2o_wave.types.Spinbox"></a></li><li><a href="#step" class="table-of-contents__link">Step <a name="h2o_wave.types.Step"></a></li><li><a href="#stepper" class="table-of-contents__link">Stepper <a name="h2o_wave.types.Stepper"></a></li><li><a href="#tab" class="table-of-contents__link">Tab <a name="h2o_wave.types.Tab"></a></li><li><a href="#tabcard" class="table-of-contents__link">TabCard <a name="h2o_wave.types.TabCard"></a></li><li><a href="#table" class="table-of-contents__link">Table <a name="h2o_wave.types.Table"></a></li><li><a href="#tablecelltype" class="table-of-contents__link">TableCellType <a name="h2o_wave.types.TableCellType"></a></li><li><a href="#tablecolumn" class="table-of-contents__link">TableColumn <a name="h2o_wave.types.TableColumn"></a></li><li><a href="#tablerow" class="table-of-contents__link">TableRow <a name="h2o_wave.types.TableRow"></a></li><li><a href="#tabs" class="table-of-contents__link">Tabs <a name="h2o_wave.types.Tabs"></a></li><li><a href="#tallgaugestatcard" class="table-of-contents__link">TallGaugeStatCard <a name="h2o_wave.types.TallGaugeStatCard"></a></li><li><a href="#tallseriesstatcard" class="table-of-contents__link">TallSeriesStatCard <a name="h2o_wave.types.TallSeriesStatCard"></a></li><li><a href="#template" class="table-of-contents__link">Template <a name="h2o_wave.types.Template"></a></li><li><a href="#templatecard" class="table-of-contents__link">TemplateCard <a name="h2o_wave.types.TemplateCard"></a></li><li><a href="#text" class="table-of-contents__link">Text <a name="h2o_wave.types.Text"></a></li><li><a href="#textl" class="table-of-contents__link">TextL <a name="h2o_wave.types.TextL"></a></li><li><a href="#textm" class="table-of-contents__link">TextM <a name="h2o_wave.types.TextM"></a></li><li><a href="#texts" class="table-of-contents__link">TextS <a name="h2o_wave.types.TextS"></a></li><li><a href="#textxl" class="table-of-contents__link">TextXl <a name="h2o_wave.types.TextXl"></a></li><li><a href="#textxs" class="table-of-contents__link">TextXs <a name="h2o_wave.types.TextXs"></a></li><li><a href="#textbox" class="table-of-contents__link">Textbox <a name="h2o_wave.types.Textbox"></a></li><li><a href="#toggle" class="table-of-contents__link">Toggle <a name="h2o_wave.types.Toggle"></a></li><li><a href="#toolbarcard" class="table-of-contents__link">ToolbarCard <a name="h2o_wave.types.ToolbarCard"></a></li><li><a href="#vegacard" class="table-of-contents__link">VegaCard <a name="h2o_wave.types.VegaCard"></a></li><li><a href="#vegavisualization" class="table-of-contents__link">VegaVisualization <a name="h2o_wave.types.VegaVisualization"></a></li><li><a href="#visualization" class="table-of-contents__link">Visualization <a name="h2o_wave.types.Visualization"></a></li><li><a href="#widebarstatcard" class="table-of-contents__link">WideBarStatCard <a name="h2o_wave.types.WideBarStatCard"></a></li><li><a href="#widegaugestatcard" class="table-of-contents__link">WideGaugeStatCard <a name="h2o_wave.types.WideGaugeStatCard"></a></li><li><a href="#wideseriesstatcard" class="table-of-contents__link">WideSeriesStatCard <a name="h2o_wave.types.WideSeriesStatCard"></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/b999a6e4.aa78f2b5.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Module h2o_wave.types</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="classes"></a>Classes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#classes" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="breadcrumb"></a>Breadcrumb <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Breadcrumb"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#breadcrumb" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Breadcrumb</span>(name: str, label: str)</div><div class="api__description"><p>Create a breadcrumb for a <a href="#h2o_wave.types.BreadcrumbsCard" title="h2o_wave.types.BreadcrumbsCard">BreadcrumbsCard</a>.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Breadcrumb.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Breadcrumb__d: Dict) ‑&gt; <a href="#h2o_wave.types.Breadcrumb" title="h2o_wave.types.Breadcrumb">Breadcrumb</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Breadcrumb.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The label to display.</p></div><div id="h2o_wave.types.Breadcrumb.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>The name of this item. Prefix the name with a &#x27;#&#x27; to trigger hash-change navigation.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Breadcrumb.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="breadcrumbscard"></a>BreadcrumbsCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.BreadcrumbsCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#breadcrumbscard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">BreadcrumbsCard</span>(box: str, items: List[<a href="#h2o_wave.types.Breadcrumb" title="h2o_wave.types.Breadcrumb">Breadcrumb</a>], commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-1"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-1"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.BreadcrumbsCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_BreadcrumbsCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.BreadcrumbsCard" title="h2o_wave.types.BreadcrumbsCard">BreadcrumbsCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-1"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-1" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.BreadcrumbsCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.BreadcrumbsCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.BreadcrumbsCard.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>A list of <a href="#h2o_wave.types.Breadcrumb" title="h2o_wave.types.Breadcrumb">Breadcrumb</a> instances to display. See <a title="h2o_wave.ui.breadcrumb" href="/wave/docs/api/ui#h2o_wave.ui.breadcrumb">breadcrumb()</a></p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-1"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-1"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.BreadcrumbsCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-1" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="button"></a>Button <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Button"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#button" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Button</span>(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)</div><div class="api__description"><p>Create a button.</p><p>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.</p><p>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.</p><p>Buttons may be placed within a &quot;buttons&quot; component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-2"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-2" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-2"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Button.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-2" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Button__d: Dict) ‑&gt; <a href="#h2o_wave.types.Button" title="h2o_wave.types.Button">Button</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-2"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-2" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Button.caption" class="api__signature">var <span class="ident">caption</span></div><div class="api__description"><p>The caption displayed below the label. Setting a caption renders a compound button.</p></div><div id="h2o_wave.types.Button.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if the button should be disabled.</p></div><div id="h2o_wave.types.Button.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The text displayed on the button.</p></div><div id="h2o_wave.types.Button.link" class="api__signature">var <span class="ident">link</span></div><div class="api__description"><p>True if the button should be rendered as link text and not a standard button.</p></div><div id="h2o_wave.types.Button.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component. If the name is prefixed with a &#x27;#&#x27;, the button sets the location hash to the name when clicked.</p></div><div id="h2o_wave.types.Button.primary" class="api__signature">var <span class="ident">primary</span></div><div class="api__description"><p>True if the button should be rendered as the primary button in the set.</p></div><div id="h2o_wave.types.Button.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Button.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>A value for this button. If a value is set, it is used for the button&#x27;s submitted instead of a boolean True.</p></div><div id="h2o_wave.types.Button.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-2"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-2" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-2"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Button.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-2" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="buttons"></a>Buttons <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Buttons"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#buttons" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Buttons</span>(items: List[ForwardRef(&#x27;<a href="#h2o_wave.types.Component" title="h2o_wave.types.Component">Component</a>&#x27;)], justify: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)</div><div class="api__description"><p>Create a set of buttons to be layed out horizontally.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-3"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-3" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-3"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Buttons.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-3" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Buttons__d: Dict) ‑&gt; <a href="#h2o_wave.types.Buttons" title="h2o_wave.types.Buttons">Buttons</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-3"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-3" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Buttons.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>The button in this set.</p></div><div id="h2o_wave.types.Buttons.justify" class="api__signature">var <span class="ident">justify</span></div><div class="api__description"><p>Specifies how to lay out buttons horizontally. One of &#x27;start&#x27;, &#x27;end&#x27;, &#x27;center&#x27;, &#x27;between&#x27;, &#x27;around&#x27;.</p></div><div id="h2o_wave.types.Buttons.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Buttons.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-3"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-3" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-3"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Buttons.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-3" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="checkbox"></a>Checkbox <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Checkbox"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#checkbox" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Checkbox</span>(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)</div><div class="api__description"><p>Create a checkbox.</p><p>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.</p><p>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.</p><p>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.</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-4"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-4" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-4"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Checkbox.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-4" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Checkbox__d: Dict) ‑&gt; <a href="#h2o_wave.types.Checkbox" title="h2o_wave.types.Checkbox">Checkbox</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-4"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-4" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Checkbox.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if the checkbox is disabled.</p></div><div id="h2o_wave.types.Checkbox.indeterminate" class="api__signature">var <span class="ident">indeterminate</span></div><div class="api__description"><p>True if the selection is indeterminate (neither selected nor unselected).</p></div><div id="h2o_wave.types.Checkbox.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the checkbox.</p></div><div id="h2o_wave.types.Checkbox.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Checkbox.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Checkbox.trigger" class="api__signature">var <span class="ident">trigger</span></div><div class="api__description"><p>True if the form should be submitted when the checkbox value changes.</p></div><div id="h2o_wave.types.Checkbox.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>True if selected, False if unselected.</p></div><div id="h2o_wave.types.Checkbox.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-4"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-4" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-4"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Checkbox.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-4" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="checklist"></a>Checklist <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Checklist"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#checklist" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Checklist</span>(name: str, label: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, choices: Union[List[<a href="#h2o_wave.types.Choice" title="h2o_wave.types.Choice">Choice</a>], NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)</div><div class="api__description"><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-5"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-5" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-5"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Checklist.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-5" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Checklist__d: Dict) ‑&gt; <a href="#h2o_wave.types.Checklist" title="h2o_wave.types.Checklist">Checklist</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-5"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-5" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Checklist.choices" class="api__signature">var <span class="ident">choices</span></div><div class="api__description"><p>The choices to be presented.</p></div><div id="h2o_wave.types.Checklist.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed above the component.</p></div><div id="h2o_wave.types.Checklist.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Checklist.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Checklist.trigger" class="api__signature">var <span class="ident">trigger</span></div><div class="api__description"><p>True if the form should be submitted when the checklist value changes.</p></div><div id="h2o_wave.types.Checklist.values" class="api__signature">var <span class="ident">values</span></div><div class="api__description"><p>The names of the selected choices.</p></div><div id="h2o_wave.types.Checklist.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-5"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-5" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-5"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Checklist.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-5" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="choice"></a>Choice <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Choice"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#choice" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Choice</span>(name: str, label: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None)</div><div class="api__description"><p>Create a choice for a checklist, choice group or dropdown.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-6"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-6" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-6"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Choice.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-6" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Choice__d: Dict) ‑&gt; <a href="#h2o_wave.types.Choice" title="h2o_wave.types.Choice">Choice</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-6"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-6" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Choice.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if the checkbox is disabled.</p></div><div id="h2o_wave.types.Choice.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.Choice.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-6"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-6" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-6"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Choice.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-6" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="choicegroup"></a>ChoiceGroup <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ChoiceGroup"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#choicegroup" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">ChoiceGroup</span>(name: str, label: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[<a href="#h2o_wave.types.Choice" title="h2o_wave.types.Choice">Choice</a>], NoneType] = None, required: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)</div><div class="api__description"><p>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.</p><p>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.</p><p>If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for &quot;I agree&quot; instead of choice group buttons for &quot;I agree&quot; and &quot;I don&#x27;t agree.&quot;</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-7"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-7" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-7"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ChoiceGroup.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-7" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_ChoiceGroup__d: Dict) ‑&gt; <a href="#h2o_wave.types.ChoiceGroup" title="h2o_wave.types.ChoiceGroup">ChoiceGroup</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-7"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-7" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.ChoiceGroup.choices" class="api__signature">var <span class="ident">choices</span></div><div class="api__description"><p>The choices to be presented.</p></div><div id="h2o_wave.types.ChoiceGroup.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.ChoiceGroup.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.ChoiceGroup.required" class="api__signature">var <span class="ident">required</span></div><div class="api__description"><p>True if this field is required.</p></div><div id="h2o_wave.types.ChoiceGroup.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.ChoiceGroup.trigger" class="api__signature">var <span class="ident">trigger</span></div><div class="api__description"><p>True if the form should be submitted when the selection changes.</p></div><div id="h2o_wave.types.ChoiceGroup.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The name of the selected choice.</p></div><div id="h2o_wave.types.ChoiceGroup.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-7"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-7" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-7"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ChoiceGroup.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-7" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="colorpicker"></a>ColorPicker <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ColorPicker"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#colorpicker" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">ColorPicker</span>(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)</div><div class="api__description"><p>Create a color picker.</p><p>A date picker allows a user to pick a color value. If the &#x27;choices&#x27; parameter is set, a swatch picker is displayed instead of the standard color picker.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-8"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-8" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-8"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ColorPicker.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-8" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_ColorPicker__d: Dict) ‑&gt; <a href="#h2o_wave.types.ColorPicker" title="h2o_wave.types.ColorPicker">ColorPicker</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-8"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-8" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.ColorPicker.choices" class="api__signature">var <span class="ident">choices</span></div><div class="api__description"><p>A list of colors (CSS-compatible strings) to limit color choices to.</p></div><div id="h2o_wave.types.ColorPicker.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.ColorPicker.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.ColorPicker.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.ColorPicker.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The selected color (CSS-compatible string)</p></div><div id="h2o_wave.types.ColorPicker.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-8"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-8" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-8"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ColorPicker.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-8" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="combobox"></a>Combobox <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Combobox"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#combobox" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Combobox</span>(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)</div><div class="api__description"><p>Create a combobox.</p><p>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.</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-9"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-9" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-9"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Combobox.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-9" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Combobox__d: Dict) ‑&gt; <a href="#h2o_wave.types.Combobox" title="h2o_wave.types.Combobox">Combobox</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-9"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-9" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Combobox.choices" class="api__signature">var <span class="ident">choices</span></div><div class="api__description"><p>The choices to be presented.</p></div><div id="h2o_wave.types.Combobox.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if this field is disabled.</p></div><div id="h2o_wave.types.Combobox.error" class="api__signature">var <span class="ident">error</span></div><div class="api__description"><p>Text to be displayed as an error below the text box.</p></div><div id="h2o_wave.types.Combobox.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.Combobox.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Combobox.placeholder" class="api__signature">var <span class="ident">placeholder</span></div><div class="api__description"><p>A string that provides a brief hint to the user as to what kind of information is expected in the field.</p></div><div id="h2o_wave.types.Combobox.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Combobox.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The name of the selected choice.</p></div><div id="h2o_wave.types.Combobox.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-9"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-9" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-9"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Combobox.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-9" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="command"></a>Command <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Command"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#command" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Command</span>(name: str, label: Union[str, NoneType] = None, caption: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, items: Union[List[ForwardRef(&#x27;<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>&#x27;)], NoneType] = None, data: Union[str, NoneType] = None)</div><div class="api__description"><p>Create a command.</p><p>Commands are typically displayed as context menu items or toolbar button.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-10"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-10" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-10"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Command.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-10" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Command__d: Dict) ‑&gt; <a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-10"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-10" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Command.caption" class="api__signature">var <span class="ident">caption</span></div><div class="api__description"><p>The caption for this command (typically a tooltip).</p></div><div id="h2o_wave.types.Command.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data associated with this command, if any.</p></div><div id="h2o_wave.types.Command.icon" class="api__signature">var <span class="ident">icon</span></div><div class="api__description"><p>The icon to be displayed for this command.</p></div><div id="h2o_wave.types.Command.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>Sub-commands, if any</p></div><div id="h2o_wave.types.Command.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The text displayed for this command.</p></div><div id="h2o_wave.types.Command.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component. If the name is prefixed with a &#x27;#&#x27;, the command sets the location hash to the name when executed.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-10"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-10" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-10"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Command.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-10" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="component"></a>Component <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Component"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#component" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Component</span>(text: Union[<a href="#h2o_wave.types.Text" title="h2o_wave.types.Text">Text</a>, NoneType] = None, text_xl: Union[<a href="#h2o_wave.types.TextXl" title="h2o_wave.types.TextXl">TextXl</a>, NoneType] = None, text_l: Union[<a href="#h2o_wave.types.TextL" title="h2o_wave.types.TextL">TextL</a>, NoneType] = None, text_m: Union[<a href="#h2o_wave.types.TextM" title="h2o_wave.types.TextM">TextM</a>, NoneType] = None, text_s: Union[<a href="#h2o_wave.types.TextS" title="h2o_wave.types.TextS">TextS</a>, NoneType] = None, text_xs: Union[<a href="#h2o_wave.types.TextXs" title="h2o_wave.types.TextXs">TextXs</a>, NoneType] = None, label: Union[<a href="#h2o_wave.types.Label" title="h2o_wave.types.Label">Label</a>, NoneType] = None, separator: Union[<a href="#h2o_wave.types.Separator" title="h2o_wave.types.Separator">Separator</a>, NoneType] = None, progress: Union[<a href="#h2o_wave.types.Progress" title="h2o_wave.types.Progress">Progress</a>, NoneType] = None, message_bar: Union[<a href="#h2o_wave.types.MessageBar" title="h2o_wave.types.MessageBar">MessageBar</a>, NoneType] = None, textbox: Union[<a href="#h2o_wave.types.Textbox" title="h2o_wave.types.Textbox">Textbox</a>, NoneType] = None, checkbox: Union[<a href="#h2o_wave.types.Checkbox" title="h2o_wave.types.Checkbox">Checkbox</a>, NoneType] = None, toggle: Union[<a href="#h2o_wave.types.Toggle" title="h2o_wave.types.Toggle">Toggle</a>, NoneType] = None, choice_group: Union[<a href="#h2o_wave.types.ChoiceGroup" title="h2o_wave.types.ChoiceGroup">ChoiceGroup</a>, NoneType] = None, checklist: Union[<a href="#h2o_wave.types.Checklist" title="h2o_wave.types.Checklist">Checklist</a>, NoneType] = None, dropdown: Union[<a href="#h2o_wave.types.Dropdown" title="h2o_wave.types.Dropdown">Dropdown</a>, NoneType] = None, combobox: Union[<a href="#h2o_wave.types.Combobox" title="h2o_wave.types.Combobox">Combobox</a>, NoneType] = None, slider: Union[<a href="#h2o_wave.types.Slider" title="h2o_wave.types.Slider">Slider</a>, NoneType] = None, spinbox: Union[<a href="#h2o_wave.types.Spinbox" title="h2o_wave.types.Spinbox">Spinbox</a>, NoneType] = None, date_picker: Union[<a href="#h2o_wave.types.DatePicker" title="h2o_wave.types.DatePicker">DatePicker</a>, NoneType] = None, color_picker: Union[<a href="#h2o_wave.types.ColorPicker" title="h2o_wave.types.ColorPicker">ColorPicker</a>, NoneType] = None, button: Union[<a href="#h2o_wave.types.Button" title="h2o_wave.types.Button">Button</a>, NoneType] = None, buttons: Union[<a href="#h2o_wave.types.Buttons" title="h2o_wave.types.Buttons">Buttons</a>, NoneType] = None, file_upload: Union[<a href="#h2o_wave.types.FileUpload" title="h2o_wave.types.FileUpload">FileUpload</a>, NoneType] = None, table: Union[<a href="#h2o_wave.types.Table" title="h2o_wave.types.Table">Table</a>, NoneType] = None, link: Union[<a href="#h2o_wave.types.Link" title="h2o_wave.types.Link">Link</a>, NoneType] = None, tabs: Union[<a href="#h2o_wave.types.Tabs" title="h2o_wave.types.Tabs">Tabs</a>, NoneType] = None, expander: Union[<a href="#h2o_wave.types.Expander" title="h2o_wave.types.Expander">Expander</a>, NoneType] = None, frame: Union[<a href="#h2o_wave.types.Frame" title="h2o_wave.types.Frame">Frame</a>, NoneType] = None, markup: Union[<a href="#h2o_wave.types.Markup" title="h2o_wave.types.Markup">Markup</a>, NoneType] = None, template: Union[<a href="#h2o_wave.types.Template" title="h2o_wave.types.Template">Template</a>, NoneType] = None, picker: Union[<a href="#h2o_wave.types.Picker" title="h2o_wave.types.Picker">Picker</a>, NoneType] = None, range_slider: Union[<a href="#h2o_wave.types.RangeSlider" title="h2o_wave.types.RangeSlider">RangeSlider</a>, NoneType] = None, stepper: Union[<a href="#h2o_wave.types.Stepper" title="h2o_wave.types.Stepper">Stepper</a>, NoneType] = None, visualization: Union[<a href="#h2o_wave.types.Visualization" title="h2o_wave.types.Visualization">Visualization</a>, NoneType] = None, vega_visualization: Union[<a href="#h2o_wave.types.VegaVisualization" title="h2o_wave.types.VegaVisualization">VegaVisualization</a>, NoneType] = None)</div><div class="api__description"><p>Create a component.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-11"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-11" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-11"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Component.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-11" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Component__d: Dict) ‑&gt; <a href="#h2o_wave.types.Component" title="h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-11"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-11" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Component.button" class="api__signature">var <span class="ident">button</span></div><div class="api__description"><p>Button.</p></div><div id="h2o_wave.types.Component.buttons" class="api__signature">var <span class="ident">buttons</span></div><div class="api__description"><p>Button set.</p></div><div id="h2o_wave.types.Component.checkbox" class="api__signature">var <span class="ident">checkbox</span></div><div class="api__description"><p>Checkbox.</p></div><div id="h2o_wave.types.Component.checklist" class="api__signature">var <span class="ident">checklist</span></div><div class="api__description"><p>Checklist.</p></div><div id="h2o_wave.types.Component.choice_group" class="api__signature">var <span class="ident">choice_group</span></div><div class="api__description"><p>Choice group.</p></div><div id="h2o_wave.types.Component.color_picker" class="api__signature">var <span class="ident">color_picker</span></div><div class="api__description"><p>Color picker.</p></div><div id="h2o_wave.types.Component.combobox" class="api__signature">var <span class="ident">combobox</span></div><div class="api__description"><p>Combobox.</p></div><div id="h2o_wave.types.Component.date_picker" class="api__signature">var <span class="ident">date_picker</span></div><div class="api__description"><p>Date picker.</p></div><div id="h2o_wave.types.Component.dropdown" class="api__signature">var <span class="ident">dropdown</span></div><div class="api__description"><p>Dropdown.</p></div><div id="h2o_wave.types.Component.expander" class="api__signature">var <span class="ident">expander</span></div><div class="api__description"><p>Expander.</p></div><div id="h2o_wave.types.Component.file_upload" class="api__signature">var <span class="ident">file_upload</span></div><div class="api__description"><p>File upload.</p></div><div id="h2o_wave.types.Component.frame" class="api__signature">var <span class="ident">frame</span></div><div class="api__description"><p>Frame.</p></div><div id="h2o_wave.types.Component.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Label.</p></div><div id="h2o_wave.types.Component.link" class="api__signature">var <span class="ident">link</span></div><div class="api__description"><p>Link.</p></div><div id="h2o_wave.types.Component.markup" class="api__signature">var <span class="ident">markup</span></div><div class="api__description"><p>Markup</p></div><div id="h2o_wave.types.Component.message_bar" class="api__signature">var <span class="ident">message_bar</span></div><div class="api__description"><p>Message bar.</p></div><div id="h2o_wave.types.Component.picker" class="api__signature">var <span class="ident">picker</span></div><div class="api__description"><p>Picker.</p></div><div id="h2o_wave.types.Component.progress" class="api__signature">var <span class="ident">progress</span></div><div class="api__description"><p>Progress bar.</p></div><div id="h2o_wave.types.Component.range_slider" class="api__signature">var <span class="ident">range_slider</span></div><div class="api__description"><p>Range Slider.</p></div><div id="h2o_wave.types.Component.separator" class="api__signature">var <span class="ident">separator</span></div><div class="api__description"><p>Separator.</p></div><div id="h2o_wave.types.Component.slider" class="api__signature">var <span class="ident">slider</span></div><div class="api__description"><p>Slider.</p></div><div id="h2o_wave.types.Component.spinbox" class="api__signature">var <span class="ident">spinbox</span></div><div class="api__description"><p>Spinbox.</p></div><div id="h2o_wave.types.Component.stepper" class="api__signature">var <span class="ident">stepper</span></div><div class="api__description"><p>Stepper.</p></div><div id="h2o_wave.types.Component.table" class="api__signature">var <span class="ident">table</span></div><div class="api__description"><p>Table.</p></div><div id="h2o_wave.types.Component.tabs" class="api__signature">var <span class="ident">tabs</span></div><div class="api__description"><p>Tabs.</p></div><div id="h2o_wave.types.Component.template" class="api__signature">var <span class="ident">template</span></div><div class="api__description"><p>Template</p></div><div id="h2o_wave.types.Component.text" class="api__signature">var <span class="ident">text</span></div><div class="api__description"><p>Text block.</p></div><div id="h2o_wave.types.Component.text_l" class="api__signature">var <span class="ident">text_l</span></div><div class="api__description"><p>Large sized text block.</p></div><div id="h2o_wave.types.Component.text_m" class="api__signature">var <span class="ident">text_m</span></div><div class="api__description"><p>Medium sized text block.</p></div><div id="h2o_wave.types.Component.text_s" class="api__signature">var <span class="ident">text_s</span></div><div class="api__description"><p>Small sized text block.</p></div><div id="h2o_wave.types.Component.text_xl" class="api__signature">var <span class="ident">text_xl</span></div><div class="api__description"><p>Extra-large sized text block.</p></div><div id="h2o_wave.types.Component.text_xs" class="api__signature">var <span class="ident">text_xs</span></div><div class="api__description"><p>Extra-small sized text block.</p></div><div id="h2o_wave.types.Component.textbox" class="api__signature">var <span class="ident">textbox</span></div><div class="api__description"><p>Textbox.</p></div><div id="h2o_wave.types.Component.toggle" class="api__signature">var <span class="ident">toggle</span></div><div class="api__description"><p>Toggle.</p></div><div id="h2o_wave.types.Component.vega_visualization" class="api__signature">var <span class="ident">vega_visualization</span></div><div class="api__description"><p>Vega-lite Visualization.</p></div><div id="h2o_wave.types.Component.visualization" class="api__signature">var <span class="ident">visualization</span></div><div class="api__description"><p>Visualization.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-11"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-11" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-11"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Component.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-11" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="datepicker"></a>DatePicker <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.DatePicker"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#datepicker" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">DatePicker</span>(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)</div><div class="api__description"><p>Create a date picker.</p><p>A date picker allows a user to pick a date value.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-12"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-12" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-12"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.DatePicker.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-12" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_DatePicker__d: Dict) ‑&gt; <a href="#h2o_wave.types.DatePicker" title="h2o_wave.types.DatePicker">DatePicker</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-12"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-12" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.DatePicker.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if this field is disabled.</p></div><div id="h2o_wave.types.DatePicker.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.DatePicker.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.DatePicker.placeholder" class="api__signature">var <span class="ident">placeholder</span></div><div class="api__description"><p>A string that provides a brief hint to the user as to what kind of information is expected in the field.</p></div><div id="h2o_wave.types.DatePicker.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.DatePicker.trigger" class="api__signature">var <span class="ident">trigger</span></div><div class="api__description"><p>True if the form should be submitted when the datepicker value changes.</p></div><div id="h2o_wave.types.DatePicker.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The date value in YYYY-MM-DD format.</p></div><div id="h2o_wave.types.DatePicker.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-12"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-12" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-12"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.DatePicker.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-12" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dropdown"></a>Dropdown <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Dropdown"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dropdown" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Dropdown</span>(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[<a href="#h2o_wave.types.Choice" title="h2o_wave.types.Choice">Choice</a>], 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)</div><div class="api__description"><p>Create a dropdown.</p><p>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.</p><p>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.</p><p>Note: Use either the &#x27;value&#x27; parameter or the &#x27;values&#x27; parameter. Setting the &#x27;values&#x27; parameter renders a multi-select dropdown.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-13"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-13" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-13"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Dropdown.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-13" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Dropdown__d: Dict) ‑&gt; <a href="#h2o_wave.types.Dropdown" title="h2o_wave.types.Dropdown">Dropdown</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-13"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-13" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Dropdown.choices" class="api__signature">var <span class="ident">choices</span></div><div class="api__description"><p>The choices to be presented.</p></div><div id="h2o_wave.types.Dropdown.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if this field is disabled.</p></div><div id="h2o_wave.types.Dropdown.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.Dropdown.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Dropdown.placeholder" class="api__signature">var <span class="ident">placeholder</span></div><div class="api__description"><p>A string that provides a brief hint to the user as to what kind of information is expected in the field.</p></div><div id="h2o_wave.types.Dropdown.required" class="api__signature">var <span class="ident">required</span></div><div class="api__description"><p>True if this is a required field.</p></div><div id="h2o_wave.types.Dropdown.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Dropdown.trigger" class="api__signature">var <span class="ident">trigger</span></div><div class="api__description"><p>True if the form should be submitted when the dropdown value changes.</p></div><div id="h2o_wave.types.Dropdown.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The name of the selected choice.</p></div><div id="h2o_wave.types.Dropdown.values" class="api__signature">var <span class="ident">values</span></div><div class="api__description"><p>The names of the selected choices. If this parameter is set, multiple selections will be allowed.</p></div><div id="h2o_wave.types.Dropdown.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-13"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-13" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-13"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Dropdown.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-13" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="expander"></a>Expander <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Expander"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#expander" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Expander</span>(name: str, label: Union[str, NoneType] = None, expanded: Union[bool, NoneType] = None, items: Union[List[ForwardRef(&#x27;<a href="#h2o_wave.types.Component" title="h2o_wave.types.Component">Component</a>&#x27;)], NoneType] = None, visible: Union[bool, NoneType] = None)</div><div class="api__description"><p>Creates a new expander.</p><p>Expanders can be used to show or hide a group of related components.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-14"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-14" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-14"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Expander.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-14" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Expander__d: Dict) ‑&gt; <a href="#h2o_wave.types.Expander" title="h2o_wave.types.Expander">Expander</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-14"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-14" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Expander.expanded" class="api__signature">var <span class="ident">expanded</span></div><div class="api__description"><p>True if expanded, False if collapsed.</p></div><div id="h2o_wave.types.Expander.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>List of components to be hideable by the expander.</p></div><div id="h2o_wave.types.Expander.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The text displayed on the expander.</p></div><div id="h2o_wave.types.Expander.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Expander.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-14"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-14" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-14"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Expander.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-14" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="fileupload"></a>FileUpload <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FileUpload"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#fileupload" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">FileUpload</span>(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)</div><div class="api__description"><p>Create a file upload component. A file upload component allows a user to browse, select and upload one or more files.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-15"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-15" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-15"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FileUpload.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-15" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_FileUpload__d: Dict) ‑&gt; <a href="#h2o_wave.types.FileUpload" title="h2o_wave.types.FileUpload">FileUpload</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-15"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-15" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.FileUpload.file_extensions" class="api__signature">var <span class="ident">file_extensions</span></div><div class="api__description"><p>List of allowed file extensions, e.g. <code>pdf</code>, <code>docx</code>, etc.</p></div><div id="h2o_wave.types.FileUpload.height" class="api__signature">var <span class="ident">height</span></div><div class="api__description"><p>The height of the file upload, e.g. &#x27;400px&#x27;, &#x27;50%&#x27;, etc.</p></div><div id="h2o_wave.types.FileUpload.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.FileUpload.max_file_size" class="api__signature">var <span class="ident">max_file_size</span></div><div class="api__description"><p>Maximum allowed size (Mb) per file. Defaults to no limit.</p></div><div id="h2o_wave.types.FileUpload.max_size" class="api__signature">var <span class="ident">max_size</span></div><div class="api__description"><p>Maximum allowed size (Mb) for all files combined. Defaults to no limit.</p></div><div id="h2o_wave.types.FileUpload.multiple" class="api__signature">var <span class="ident">multiple</span></div><div class="api__description"><p>True if the component should allow multiple files to be uploaded.</p></div><div id="h2o_wave.types.FileUpload.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.FileUpload.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.FileUpload.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-15"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-15" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-15"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FileUpload.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-15" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="flexcard"></a>FlexCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FlexCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#flexcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">FlexCard</span>(box: str, item_view: str, item_props: Union[dict, str], data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str], direction: Union[str, NoneType] = None, justify: Union[str, NoneType] = None, align: Union[str, NoneType] = None, wrap: Union[str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-16"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-16" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-16"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FlexCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-16" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_FlexCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.FlexCard" title="h2o_wave.types.FlexCard">FlexCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-16"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-16" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.FlexCard.align" class="api__signature">var <span class="ident">align</span></div><div class="api__description"><p>Layout strategy for cross axis. One of &#x27;start&#x27;, &#x27;end&#x27;, &#x27;center&#x27;, &#x27;baseline&#x27;, &#x27;stretch&#x27;.</p></div><div id="h2o_wave.types.FlexCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.FlexCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.FlexCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.FlexCard.direction" class="api__signature">var <span class="ident">direction</span></div><div class="api__description"><p>Layout direction. One of &#x27;horizontal&#x27;, &#x27;vertical&#x27;.</p></div><div id="h2o_wave.types.FlexCard.item_props" class="api__signature">var <span class="ident">item_props</span></div><div class="api__description"><p>The child card properties.</p></div><div id="h2o_wave.types.FlexCard.item_view" class="api__signature">var <span class="ident">item_view</span></div><div class="api__description"><p>The child card type.</p></div><div id="h2o_wave.types.FlexCard.justify" class="api__signature">var <span class="ident">justify</span></div><div class="api__description"><p>Layout strategy for main axis. One of &#x27;start&#x27;, &#x27;end&#x27;, &#x27;center&#x27;, &#x27;between&#x27;, &#x27;around&#x27;.</p></div><div id="h2o_wave.types.FlexCard.wrap" class="api__signature">var <span class="ident">wrap</span></div><div class="api__description"><p>Wrapping strategy. One of &#x27;start&#x27;, &#x27;end&#x27;, &#x27;center&#x27;, &#x27;between&#x27;, &#x27;around&#x27;, &#x27;stretch&#x27;.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-16"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-16" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-16"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FlexCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-16" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="formcard"></a>FormCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FormCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#formcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">FormCard</span>(box: str, items: Union[List[<a href="#h2o_wave.types.Component" title="h2o_wave.types.Component">Component</a>], str], commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a form.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-17"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-17" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-17"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FormCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-17" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_FormCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.FormCard" title="h2o_wave.types.FormCard">FormCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-17"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-17" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.FormCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.FormCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.FormCard.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>The components in this form.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-17"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-17" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-17"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FormCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-17" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="frame"></a>Frame <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Frame"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#frame" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Frame</span>(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)</div><div class="api__description"><p>Create a new inline frame (an <code>iframe</code>).</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-18"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-18" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-18"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Frame.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-18" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Frame__d: Dict) ‑&gt; <a href="#h2o_wave.types.Frame" title="h2o_wave.types.Frame">Frame</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-18"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-18" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Frame.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The HTML content of the page. A string containing <code>&lt;html&gt;...&lt;/html&gt;</code>.</p></div><div id="h2o_wave.types.Frame.height" class="api__signature">var <span class="ident">height</span></div><div class="api__description"><p>The height of the frame, e.g. <code>200px</code>, <code>50%</code>, etc. Defaults to <code>150px</code>.</p></div><div id="h2o_wave.types.Frame.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Frame.path" class="api__signature">var <span class="ident">path</span></div><div class="api__description"><p>The path or URL of the web page, e.g. <code>/foo.html</code> or <code>http://example.com/foo.html</code></p></div><div id="h2o_wave.types.Frame.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div><div id="h2o_wave.types.Frame.width" class="api__signature">var <span class="ident">width</span></div><div class="api__description"><p>The width of the frame, e.g. <code>200px</code>, <code>50%</code>, etc. Defaults to <code>100%</code>.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-18"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-18" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-18"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Frame.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-18" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="framecard"></a>FrameCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FrameCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#framecard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">FrameCard</span>(box: str, title: str, path: Union[str, NoneType] = None, content: Union[str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Render a card containing a HTML page inside an inline frame (an <code>iframe</code>).</p><p>Either a path or content can be provided as arguments.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-19"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-19" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-19"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FrameCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-19" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_FrameCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.FrameCard" title="h2o_wave.types.FrameCard">FrameCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-19"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-19" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.FrameCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.FrameCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.FrameCard.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The HTML content of the page. A string containing <code>&lt;html&gt;...&lt;/html&gt;</code></p></div><div id="h2o_wave.types.FrameCard.path" class="api__signature">var <span class="ident">path</span></div><div class="api__description"><p>The path or URL of the web page, e.g. <code>/foo.html</code> or <code>http://example.com/foo.html</code></p></div><div id="h2o_wave.types.FrameCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The title for this card.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-19"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-19" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-19"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.FrameCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-19" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="graphicscard"></a>GraphicsCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.GraphicsCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#graphicscard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">GraphicsCard</span>(box: str, view_box: str, stage: Union[List[dict], str, NoneType] = None, scene: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a card for displaying vector graphics.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-20"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-20" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-20"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.GraphicsCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-20" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_GraphicsCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.GraphicsCard" title="h2o_wave.types.GraphicsCard">GraphicsCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-20"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-20" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.GraphicsCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.GraphicsCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.GraphicsCard.height" class="api__signature">var <span class="ident">height</span></div><div class="api__description"><p>The displayed height of the rectangular viewport. (Not the height of its coordinate system.)</p></div><div id="h2o_wave.types.GraphicsCard.scene" class="api__signature">var <span class="ident">scene</span></div><div class="api__description"><p>Foreground layer for rendering dynamic SVG elements.</p></div><div id="h2o_wave.types.GraphicsCard.stage" class="api__signature">var <span class="ident">stage</span></div><div class="api__description"><p>Background layer for rendering static SVG elements. Must be packed to conserve memory.</p></div><div id="h2o_wave.types.GraphicsCard.view_box" class="api__signature">var <span class="ident">view_box</span></div><div class="api__description"><p>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, &#x27;0 0 400 300&#x27;. See: <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox</a></p></div><div id="h2o_wave.types.GraphicsCard.width" class="api__signature">var <span class="ident">width</span></div><div class="api__description"><p>The displayed width of the rectangular viewport. (Not the width of its coordinate system.)</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-20"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-20" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-20"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.GraphicsCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-20" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="gridcard"></a>GridCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.GridCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#gridcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">GridCard</span>(box: str, title: str, cells: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str], data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str], commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-21"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-21" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-21"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.GridCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-21" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_GridCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.GridCard" title="h2o_wave.types.GridCard">GridCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-21"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-21" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.GridCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.GridCard.cells" class="api__signature">var <span class="ident">cells</span></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div><div id="h2o_wave.types.GridCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.GridCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div><div id="h2o_wave.types.GridCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-21"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-21" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-21"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.GridCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-21" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="headercard"></a>HeaderCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.HeaderCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#headercard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">HeaderCard</span>(box: str, title: str, subtitle: str, icon: Union[str, NoneType] = None, icon_color: Union[str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Render a card containing a HTML page inside an inline frame (iframe).</p><p>Either a path or content can be provided as arguments.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-22"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-22" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-22"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.HeaderCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-22" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_HeaderCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.HeaderCard" title="h2o_wave.types.HeaderCard">HeaderCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-22"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-22" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.HeaderCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.HeaderCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.HeaderCard.icon" class="api__signature">var <span class="ident">icon</span></div><div class="api__description"><p>The icon type, displayed to the left.</p></div><div id="h2o_wave.types.HeaderCard.icon_color" class="api__signature">var <span class="ident">icon_color</span></div><div class="api__description"><p>The icon&#x27;s color.</p></div><div id="h2o_wave.types.HeaderCard.subtitle" class="api__signature">var <span class="ident">subtitle</span></div><div class="api__description"><p>The subtitle, displayed below the title.</p></div><div id="h2o_wave.types.HeaderCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The title.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-22"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-22" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-22"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.HeaderCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-22" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="icontablecelltype"></a>IconTableCellType <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.IconTableCellType"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#icontablecelltype" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">IconTableCellType</span>(color: Union[str, NoneType] = None, name: Union[str, NoneType] = None)</div><div class="api__description"><p>Create a cell type that renders a column&#x27;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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-23"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-23" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-23"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.IconTableCellType.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-23" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_IconTableCellType__d: Dict) ‑&gt; <a href="#h2o_wave.types.IconTableCellType" title="h2o_wave.types.IconTableCellType">IconTableCellType</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-23"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-23" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.IconTableCellType.color" class="api__signature">var <span class="ident">color</span></div><div class="api__description"><p>Icon color.</p></div><div id="h2o_wave.types.IconTableCellType.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-23"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-23" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-23"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.IconTableCellType.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-23" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="imagecard"></a>ImageCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ImageCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#imagecard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">ImageCard</span>(box: str, title: str, type: str, image: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a card that displays a base64-encoded image.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-24"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-24" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-24"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ImageCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-24" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_ImageCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.ImageCard" title="h2o_wave.types.ImageCard">ImageCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-24"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-24" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.ImageCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.ImageCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.ImageCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.ImageCard.image" class="api__signature">var <span class="ident">image</span></div><div class="api__description"><p>Image data, base64-encoded.</p></div><div id="h2o_wave.types.ImageCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The card&#x27;s title.</p></div><div id="h2o_wave.types.ImageCard.type" class="api__signature">var <span class="ident">type</span></div><div class="api__description"><p>The image MIME subtype. One of <code>apng</code>, <code>bmp</code>, <code>gif</code>, <code>x-icon</code>, <code>jpeg</code>, <code>png</code>, <code>webp</code>.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-24"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-24" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-24"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ImageCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-24" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="label"></a>Label <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Label"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#label" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Label</span>(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)</div><div class="api__description"><p>Create a label.</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-25"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-25" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-25"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Label.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-25" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Label__d: Dict) ‑&gt; <a href="#h2o_wave.types.Label" title="h2o_wave.types.Label">Label</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-25"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-25" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Label.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if the label should be disabled.</p></div><div id="h2o_wave.types.Label.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The text displayed on the label.</p></div><div id="h2o_wave.types.Label.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Label.required" class="api__signature">var <span class="ident">required</span></div><div class="api__description"><p>True if the field is required.</p></div><div id="h2o_wave.types.Label.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Label.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-25"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-25" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-25"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Label.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-25" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="largebarstatcard"></a>LargeBarStatCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.LargeBarStatCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#largebarstatcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">LargeBarStatCard</span>(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[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-26"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-26" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-26"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.LargeBarStatCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-26" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_LargeBarStatCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.LargeBarStatCard" title="h2o_wave.types.LargeBarStatCard">LargeBarStatCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-26"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-26" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.LargeBarStatCard.aux_value" class="api__signature">var <span class="ident">aux_value</span></div><div class="api__description"><p>The auxiliary value, typically a target value.</p></div><div id="h2o_wave.types.LargeBarStatCard.aux_value_caption" class="api__signature">var <span class="ident">aux_value_caption</span></div><div class="api__description"><p>The caption displayed below the auxiliary value.</p></div><div id="h2o_wave.types.LargeBarStatCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.LargeBarStatCard.caption" class="api__signature">var <span class="ident">caption</span></div><div class="api__description"><p>The card&#x27;s caption.</p></div><div id="h2o_wave.types.LargeBarStatCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.LargeBarStatCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.LargeBarStatCard.plot_color" class="api__signature">var <span class="ident">plot_color</span></div><div class="api__description"><p>The color of the progress bar.</p></div><div id="h2o_wave.types.LargeBarStatCard.progress" class="api__signature">var <span class="ident">progress</span></div><div class="api__description"><p>The value of the progress bar, between 0 and 1.</p></div><div id="h2o_wave.types.LargeBarStatCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The card&#x27;s title.</p></div><div id="h2o_wave.types.LargeBarStatCard.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The primary value displayed.</p></div><div id="h2o_wave.types.LargeBarStatCard.value_caption" class="api__signature">var <span class="ident">value_caption</span></div><div class="api__description"><p>The caption displayed below the primary value.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-26"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-26" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-26"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.LargeBarStatCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-26" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="largestatcard"></a>LargeStatCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.LargeStatCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#largestatcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">LargeStatCard</span>(box: str, title: str, value: str, aux_value: str, caption: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a stat card displaying a primary value, an auxiliary value and a caption.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-27"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-27" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-27"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.LargeStatCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-27" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_LargeStatCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.LargeStatCard" title="h2o_wave.types.LargeStatCard">LargeStatCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-27"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-27" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.LargeStatCard.aux_value" class="api__signature">var <span class="ident">aux_value</span></div><div class="api__description"><p>The auxiliary value displayed next to the primary value.</p></div><div id="h2o_wave.types.LargeStatCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.LargeStatCard.caption" class="api__signature">var <span class="ident">caption</span></div><div class="api__description"><p>The caption displayed below the primary value.</p></div><div id="h2o_wave.types.LargeStatCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.LargeStatCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.LargeStatCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The card&#x27;s title.</p></div><div id="h2o_wave.types.LargeStatCard.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The primary value displayed.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-27"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-27" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-27"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.LargeStatCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-27" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="link"></a>Link <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Link"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#link" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Link</span>(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)</div><div class="api__description"><p>Create a hyperlink.</p><p>Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a <code>/</code> and point to URLs within the Q UI. All other kinds of paths are treated as external hyperlinks.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-28"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-28" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-28"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Link.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-28" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Link__d: Dict) ‑&gt; <a href="#h2o_wave.types.Link" title="h2o_wave.types.Link">Link</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-28"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-28" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Link.button" class="api__signature">var <span class="ident">button</span></div><div class="api__description"><p>True if the link should be rendered as a button.</p></div><div id="h2o_wave.types.Link.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if the link should be disabled.</p></div><div id="h2o_wave.types.Link.download" class="api__signature">var <span class="ident">download</span></div><div class="api__description"><p>True if the link should be used for file download.</p></div><div id="h2o_wave.types.Link.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The text to be displayed. If blank, the <code>path</code> is used as the label.</p></div><div id="h2o_wave.types.Link.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Link.path" class="api__signature">var <span class="ident">path</span></div><div class="api__description"><p>The path or URL to link to.</p></div><div id="h2o_wave.types.Link.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Link.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-28"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-28" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-28"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Link.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-28" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="listcard"></a>ListCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ListCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#listcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">ListCard</span>(box: str, title: str, item_view: str, item_props: Union[dict, str], data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str], commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom).</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-29"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-29" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-29"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ListCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-29" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_ListCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.ListCard" title="h2o_wave.types.ListCard">ListCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-29"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-29" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.ListCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.ListCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.ListCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.ListCard.item_props" class="api__signature">var <span class="ident">item_props</span></div><div class="api__description"><p>The child card properties.</p></div><div id="h2o_wave.types.ListCard.item_view" class="api__signature">var <span class="ident">item_view</span></div><div class="api__description"><p>The child card type.</p></div><div id="h2o_wave.types.ListCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The title for this card.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-29"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-29" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-29"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ListCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-29" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="listitem1card"></a>ListItem1Card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ListItem1Card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#listitem1card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">ListItem1Card</span>(box: str, title: str, caption: str, value: str, aux_value: str, data: Union[dict, str], commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-30"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-30" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-30"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ListItem1Card.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-30" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_ListItem1Card__d: Dict) ‑&gt; <a href="#h2o_wave.types.ListItem1Card" title="h2o_wave.types.ListItem1Card">ListItem1Card</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-30"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-30" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.ListItem1Card.aux_value" class="api__signature">var <span class="ident">aux_value</span></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div><div id="h2o_wave.types.ListItem1Card.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.ListItem1Card.caption" class="api__signature">var <span class="ident">caption</span></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div><div id="h2o_wave.types.ListItem1Card.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.ListItem1Card.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div><div id="h2o_wave.types.ListItem1Card.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div><div id="h2o_wave.types.ListItem1Card.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-30"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-30" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-30"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ListItem1Card.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-30" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="mark"></a>Mark <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Mark"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#mark" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Mark</span>(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)</div><div class="api__description"><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-31"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-31" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-31"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Mark.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-31" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Mark__d: Dict) ‑&gt; <a href="#h2o_wave.types.Mark" title="h2o_wave.types.Mark">Mark</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-31"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-31" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Mark.color" class="api__signature">var <span class="ident">color</span></div><div class="api__description"><p>Mark color field or value.</p></div><div id="h2o_wave.types.Mark.color_domain" class="api__signature">var <span class="ident">color_domain</span></div><div class="api__description"><p>The unique values in the data (labels or categories or classes) to map colors to, e.g. <code>[&#x27;high&#x27;, &#x27;medium&#x27;, &#x27;low&#x27;]</code>. If this is not provided, the unique values are automatically inferred from the <code>color</code> attribute.</p></div><div id="h2o_wave.types.Mark.color_range" class="api__signature">var <span class="ident">color_range</span></div><div class="api__description"><p>Mark color range for multi-series plots. A string containing space-separated colors, e.g. <code>&#x27;#fee8c8 #fdbb84 #e34a33&#x27;</code></p></div><div id="h2o_wave.types.Mark.coord" class="api__signature">var <span class="ident">coord</span></div><div class="api__description"><p>Coordinate system. <code>rect</code> is synonymous to <code>cartesian</code>. <code>theta</code> is transposed <code>polar</code>. One of &#x27;rect&#x27;, &#x27;cartesian&#x27;, &#x27;polar&#x27;, &#x27;theta&#x27;, &#x27;helix&#x27;.</p></div><div id="h2o_wave.types.Mark.curve" class="api__signature">var <span class="ident">curve</span></div><div class="api__description"><p>Curve type for <code>line</code> and <code>area</code> mark types. One of &#x27;none&#x27;, &#x27;smooth&#x27;, &#x27;step-before&#x27;, &#x27;step&#x27;, &#x27;step-after&#x27;.</p></div><div id="h2o_wave.types.Mark.dodge" class="api__signature">var <span class="ident">dodge</span></div><div class="api__description"><p>Field to dodge marks by, or &#x27;auto&#x27; to infer.</p></div><div id="h2o_wave.types.Mark.fill_color" class="api__signature">var <span class="ident">fill_color</span></div><div class="api__description"><p>Mark fill color.</p></div><div id="h2o_wave.types.Mark.fill_opacity" class="api__signature">var <span class="ident">fill_opacity</span></div><div class="api__description"><p>Mark fill opacity.</p></div><div id="h2o_wave.types.Mark.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Label field or value.</p></div><div id="h2o_wave.types.Mark.label_align" class="api__signature">var <span class="ident">label_align</span></div><div class="api__description"><p>Label text alignment. One of &#x27;left&#x27;, &#x27;right&#x27;, &#x27;center&#x27;, &#x27;start&#x27;, &#x27;end&#x27;.</p></div><div id="h2o_wave.types.Mark.label_fill_color" class="api__signature">var <span class="ident">label_fill_color</span></div><div class="api__description"><p>Label fill color.</p></div><div id="h2o_wave.types.Mark.label_fill_opacity" class="api__signature">var <span class="ident">label_fill_opacity</span></div><div class="api__description"><p>Label fill opacity.</p></div><div id="h2o_wave.types.Mark.label_font_size" class="api__signature">var <span class="ident">label_font_size</span></div><div class="api__description"><p>Label font size.</p></div><div id="h2o_wave.types.Mark.label_font_weight" class="api__signature">var <span class="ident">label_font_weight</span></div><div class="api__description"><p>Label font weight.</p></div><div id="h2o_wave.types.Mark.label_line_height" class="api__signature">var <span class="ident">label_line_height</span></div><div class="api__description"><p>Label line height.</p></div><div id="h2o_wave.types.Mark.label_offset" class="api__signature">var <span class="ident">label_offset</span></div><div class="api__description"><p>Distance between label and mark.</p></div><div id="h2o_wave.types.Mark.label_offset_x" class="api__signature">var <span class="ident">label_offset_x</span></div><div class="api__description"><p>Horizontal distance between label and mark.</p></div><div id="h2o_wave.types.Mark.label_offset_y" class="api__signature">var <span class="ident">label_offset_y</span></div><div class="api__description"><p>Vertical distance between label and mark.</p></div><div id="h2o_wave.types.Mark.label_overlap" class="api__signature">var <span class="ident">label_overlap</span></div><div class="api__description"><p>Strategy to use if labels overlap. One of &#x27;hide&#x27;, &#x27;overlap&#x27;, &#x27;constrain&#x27;.</p></div><div id="h2o_wave.types.Mark.label_position" class="api__signature">var <span class="ident">label_position</span></div><div class="api__description"><p>Label position relative to the mark. One of &#x27;top&#x27;, &#x27;bottom&#x27;, &#x27;middle&#x27;, &#x27;left&#x27;, &#x27;right&#x27;.</p></div><div id="h2o_wave.types.Mark.label_rotation" class="api__signature">var <span class="ident">label_rotation</span></div><div class="api__description"><p>Label rotation angle, in degrees, or &#x27;none&#x27; to disable automatic rotation. The default behavior is &#x27;auto&#x27; for automatic rotation.</p></div><div id="h2o_wave.types.Mark.label_stroke_color" class="api__signature">var <span class="ident">label_stroke_color</span></div><div class="api__description"><p>Label stroke color.</p></div><div id="h2o_wave.types.Mark.label_stroke_opacity" class="api__signature">var <span class="ident">label_stroke_opacity</span></div><div class="api__description"><p>Label stroke opacity.</p></div><div id="h2o_wave.types.Mark.label_stroke_size" class="api__signature">var <span class="ident">label_stroke_size</span></div><div class="api__description"><p>Label stroke size (line width or pen thickness).</p></div><div id="h2o_wave.types.Mark.ref_stroke_color" class="api__signature">var <span class="ident">ref_stroke_color</span></div><div class="api__description"><p>Reference line stroke color.</p></div><div id="h2o_wave.types.Mark.ref_stroke_dash" class="api__signature">var <span class="ident">ref_stroke_dash</span></div><div class="api__description"><p>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].</p></div><div id="h2o_wave.types.Mark.ref_stroke_opacity" class="api__signature">var <span class="ident">ref_stroke_opacity</span></div><div class="api__description"><p>Reference line stroke opacity.</p></div><div id="h2o_wave.types.Mark.ref_stroke_size" class="api__signature">var <span class="ident">ref_stroke_size</span></div><div class="api__description"><p>Reference line stroke size (line width or pen thickness).</p></div><div id="h2o_wave.types.Mark.shape" class="api__signature">var <span class="ident">shape</span></div><div class="api__description"><p>Mark shape field or value for <code>point</code> mark types. Possible values are &#x27;circle&#x27;, &#x27;square&#x27;, &#x27;bowtie&#x27;, &#x27;diamond&#x27;, &#x27;hexagon&#x27;, &#x27;triangle&#x27;, &#x27;triangle-down&#x27;, &#x27;cross&#x27;, &#x27;tick&#x27;, &#x27;plus&#x27;, &#x27;hyphen&#x27;, &#x27;line&#x27;.</p></div><div id="h2o_wave.types.Mark.shape_range" class="api__signature">var <span class="ident">shape_range</span></div><div class="api__description"><p>Mark shape range for multi-series plots using <code>point</code> mark types. A string containing space-separated shapes, e.g. <code>&#x27;circle square diamond&#x27;</code></p></div><div id="h2o_wave.types.Mark.size" class="api__signature">var <span class="ident">size</span></div><div class="api__description"><p>Mark size field or value.</p></div><div id="h2o_wave.types.Mark.size_range" class="api__signature">var <span class="ident">size_range</span></div><div class="api__description"><p>Mark size range. A string containing space-separated integers, e.g. <code>&#x27;4 30&#x27;</code></p></div><div id="h2o_wave.types.Mark.stack" class="api__signature">var <span class="ident">stack</span></div><div class="api__description"><p>Field to stack marks by, or &#x27;auto&#x27; to infer.</p></div><div id="h2o_wave.types.Mark.stroke_color" class="api__signature">var <span class="ident">stroke_color</span></div><div class="api__description"><p>Mark stroke color.</p></div><div id="h2o_wave.types.Mark.stroke_dash" class="api__signature">var <span class="ident">stroke_dash</span></div><div class="api__description"><p>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].</p></div><div id="h2o_wave.types.Mark.stroke_opacity" class="api__signature">var <span class="ident">stroke_opacity</span></div><div class="api__description"><p>Mark stroke opacity.</p></div><div id="h2o_wave.types.Mark.stroke_size" class="api__signature">var <span class="ident">stroke_size</span></div><div class="api__description"><p>Mark stroke size.</p></div><div id="h2o_wave.types.Mark.type" class="api__signature">var <span class="ident">type</span></div><div class="api__description"><p>Graphical geometry. One of &#x27;interval&#x27;, &#x27;line&#x27;, &#x27;path&#x27;, &#x27;point&#x27;, &#x27;area&#x27;, &#x27;polygon&#x27;, &#x27;schema&#x27;, &#x27;edge&#x27;, &#x27;heatmap&#x27;.</p></div><div id="h2o_wave.types.Mark.x" class="api__signature">var <span class="ident">x</span></div><div class="api__description"><p>X field or value.</p></div><div id="h2o_wave.types.Mark.x0" class="api__signature">var <span class="ident">x0</span></div><div class="api__description"><p>X base field or value.</p></div><div id="h2o_wave.types.Mark.x1" class="api__signature">var <span class="ident">x1</span></div><div class="api__description"><p>X bin lower bound field or value. For histograms.</p></div><div id="h2o_wave.types.Mark.x2" class="api__signature">var <span class="ident">x2</span></div><div class="api__description"><p>X bin upper bound field or value. For histograms.</p></div><div id="h2o_wave.types.Mark.x_max" class="api__signature">var <span class="ident">x_max</span></div><div class="api__description"><p>X axis scale maximum.</p></div><div id="h2o_wave.types.Mark.x_min" class="api__signature">var <span class="ident">x_min</span></div><div class="api__description"><p>X axis scale minimum.</p></div><div id="h2o_wave.types.Mark.x_nice" class="api__signature">var <span class="ident">x_nice</span></div><div class="api__description"><p>Whether to nice X axis scale ticks.</p></div><div id="h2o_wave.types.Mark.x_scale" class="api__signature">var <span class="ident">x_scale</span></div><div class="api__description"><p>X axis scale type. One of &#x27;linear&#x27;, &#x27;cat&#x27;, &#x27;category&#x27;, &#x27;identity&#x27;, &#x27;log&#x27;, &#x27;pow&#x27;, &#x27;time&#x27;, &#x27;timeCat&#x27;, &#x27;quantize&#x27;, &#x27;quantile&#x27;.</p></div><div id="h2o_wave.types.Mark.x_title" class="api__signature">var <span class="ident">x_title</span></div><div class="api__description"><p>X axis title.</p></div><div id="h2o_wave.types.Mark.y" class="api__signature">var <span class="ident">y</span></div><div class="api__description"><p>Y field or value.</p></div><div id="h2o_wave.types.Mark.y0" class="api__signature">var <span class="ident">y0</span></div><div class="api__description"><p>Y base field or value.</p></div><div id="h2o_wave.types.Mark.y1" class="api__signature">var <span class="ident">y1</span></div><div class="api__description"><p>Y bin lower bound field or value. For histograms.</p></div><div id="h2o_wave.types.Mark.y2" class="api__signature">var <span class="ident">y2</span></div><div class="api__description"><p>Y bin upper bound field or value. For histograms.</p></div><div id="h2o_wave.types.Mark.y_max" class="api__signature">var <span class="ident">y_max</span></div><div class="api__description"><p>Y axis scale maximum.</p></div><div id="h2o_wave.types.Mark.y_min" class="api__signature">var <span class="ident">y_min</span></div><div class="api__description"><p>Y axis scale minimum.</p></div><div id="h2o_wave.types.Mark.y_nice" class="api__signature">var <span class="ident">y_nice</span></div><div class="api__description"><p>Whether to nice Y axis scale ticks.</p></div><div id="h2o_wave.types.Mark.y_scale" class="api__signature">var <span class="ident">y_scale</span></div><div class="api__description"><p>Y axis scale type. One of &#x27;linear&#x27;, &#x27;cat&#x27;, &#x27;category&#x27;, &#x27;identity&#x27;, &#x27;log&#x27;, &#x27;pow&#x27;, &#x27;time&#x27;, &#x27;timeCat&#x27;, &#x27;quantize&#x27;, &#x27;quantile&#x27;.</p></div><div id="h2o_wave.types.Mark.y_title" class="api__signature">var <span class="ident">y_title</span></div><div class="api__description"><p>Y axis title.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-31"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-31" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-31"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Mark.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-31" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="markdowncard"></a>MarkdownCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MarkdownCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#markdowncard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">MarkdownCard</span>(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a card that renders Markdown content.</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-32"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-32" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-32"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MarkdownCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-32" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_MarkdownCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.MarkdownCard" title="h2o_wave.types.MarkdownCard">MarkdownCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-32"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-32" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.MarkdownCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.MarkdownCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.MarkdownCard.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The markdown content. Supports Github Flavored Markdown (GFM): <a href="https://guides.github.com/features/mastering-markdown/" target="_blank" rel="noopener noreferrer">https://guides.github.com/features/mastering-markdown/</a></p></div><div id="h2o_wave.types.MarkdownCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Additional data for the card.</p></div><div id="h2o_wave.types.MarkdownCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The title for this card.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-32"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-32" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-32"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MarkdownCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-32" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="markup"></a>Markup <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Markup"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#markup" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Markup</span>(content: str, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)</div><div class="api__description"><p>Render HTML content.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-33"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-33" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-33"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Markup.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-33" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Markup__d: Dict) ‑&gt; <a href="#h2o_wave.types.Markup" title="h2o_wave.types.Markup">Markup</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-33"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-33" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Markup.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The HTML content.</p></div><div id="h2o_wave.types.Markup.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Markup.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-33"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-33" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-33"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Markup.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-33" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="markupcard"></a>MarkupCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MarkupCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#markupcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">MarkupCard</span>(box: str, title: str, content: str, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Render HTML content.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-34"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-34" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-34"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MarkupCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-34" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_MarkupCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.MarkupCard" title="h2o_wave.types.MarkupCard">MarkupCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-34"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-34" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.MarkupCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.MarkupCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.MarkupCard.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The HTML content.</p></div><div id="h2o_wave.types.MarkupCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The title for this card.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-34"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-34" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-34"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MarkupCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-34" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="messagebar"></a>MessageBar <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MessageBar"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#messagebar" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">MessageBar</span>(type: Union[str, NoneType] = None, text: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)</div><div class="api__description"><p>Create a message bar.</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-35"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-35" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-35"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MessageBar.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-35" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_MessageBar__d: Dict) ‑&gt; <a href="#h2o_wave.types.MessageBar" title="h2o_wave.types.MessageBar">MessageBar</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-35"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-35" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.MessageBar.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.MessageBar.text" class="api__signature">var <span class="ident">text</span></div><div class="api__description"><p>The text displayed on the message bar.</p></div><div id="h2o_wave.types.MessageBar.type" class="api__signature">var <span class="ident">type</span></div><div class="api__description"><p>The icon and color of the message bar. One of &#x27;info&#x27;, &#x27;error&#x27;, &#x27;warning&#x27;, &#x27;success&#x27;, &#x27;danger&#x27;, &#x27;blocked&#x27;.</p></div><div id="h2o_wave.types.MessageBar.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-35"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-35" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-35"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MessageBar.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-35" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="metacard"></a>MetaCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MetaCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#metacard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">MetaCard</span>(box: str, title: Union[str, NoneType] = None, refresh: Union[int, NoneType] = None, notification: Union[str, NoneType] = None, redirect: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Represents page-global state.</p><p>This card is invisible. It is used to control attributes of the active page.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-36"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-36" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-36"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MetaCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-36" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_MetaCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.MetaCard" title="h2o_wave.types.MetaCard">MetaCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-36"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-36" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.MetaCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.MetaCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.MetaCard.icon" class="api__signature">var <span class="ident">icon</span></div><div class="api__description"><p>Shortcut icon path. Preferably a <code>.png</code> file (<code>.ico</code> files may not work in mobile browsers).</p></div><div id="h2o_wave.types.MetaCard.notification" class="api__signature">var <span class="ident">notification</span></div><div class="api__description"><p>Display a desktop notification to the user.</p></div><div id="h2o_wave.types.MetaCard.redirect" class="api__signature">var <span class="ident">redirect</span></div><div class="api__description"><p>Redirect the page to a new URL.</p></div><div id="h2o_wave.types.MetaCard.refresh" class="api__signature">var <span class="ident">refresh</span></div><div class="api__description"><p>Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use).</p></div><div id="h2o_wave.types.MetaCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The title of the page.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-36"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-36" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-36"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.MetaCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-36" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="navcard"></a>NavCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.NavCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#navcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">NavCard</span>(box: str, items: List[<a href="#h2o_wave.types.NavGroup" title="h2o_wave.types.NavGroup">NavGroup</a>], commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a card containing a navigation pane.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-37"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-37" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-37"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.NavCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-37" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_NavCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.NavCard" title="h2o_wave.types.NavCard">NavCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-37"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-37" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.NavCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.NavCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.NavCard.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>The navigation groups contained in this pane.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-37"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-37" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-37"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.NavCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-37" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="navgroup"></a>NavGroup <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.NavGroup"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#navgroup" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">NavGroup</span>(label: str, items: List[<a href="#h2o_wave.types.NavItem" title="h2o_wave.types.NavItem">NavItem</a>])</div><div class="api__description"><p>Create a group of navigation items.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-38"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-38" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-38"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.NavGroup.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-38" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_NavGroup__d: Dict) ‑&gt; <a href="#h2o_wave.types.NavGroup" title="h2o_wave.types.NavGroup">NavGroup</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-38"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-38" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.NavGroup.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>The navigation items contained in this group.</p></div><div id="h2o_wave.types.NavGroup.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The label to display for this group.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-38"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-38" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-38"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.NavGroup.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-38" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="navitem"></a>NavItem <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.NavItem"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#navitem" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">NavItem</span>(name: str, label: str)</div><div class="api__description"><p>Create a navigation item.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-39"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-39" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-39"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.NavItem.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-39" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_NavItem__d: Dict) ‑&gt; <a href="#h2o_wave.types.NavItem" title="h2o_wave.types.NavItem">NavItem</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-39"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-39" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.NavItem.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The label to display.</p></div><div id="h2o_wave.types.NavItem.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>The name of this item. Prefix the name with a &#x27;#&#x27; to trigger hash-change navigation.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-39"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-39" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-39"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.NavItem.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-39" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="picker"></a>Picker <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Picker"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#picker" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Picker</span>(name: str, choices: List[<a href="#h2o_wave.types.Choice" title="h2o_wave.types.Choice">Choice</a>], 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)</div><div class="api__description"><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-40"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-40" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-40"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Picker.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-40" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Picker__d: Dict) ‑&gt; <a href="#h2o_wave.types.Picker" title="h2o_wave.types.Picker">Picker</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-40"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-40" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Picker.choices" class="api__signature">var <span class="ident">choices</span></div><div class="api__description"><p>The choices to be presented.</p></div><div id="h2o_wave.types.Picker.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>Controls whether the picker should be disabled or not.</p></div><div id="h2o_wave.types.Picker.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed above the component.</p></div><div id="h2o_wave.types.Picker.max_choices" class="api__signature">var <span class="ident">max_choices</span></div><div class="api__description"><p>Maximum number of selectable choices. Defaults to no limit.</p></div><div id="h2o_wave.types.Picker.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Picker.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Picker.values" class="api__signature">var <span class="ident">values</span></div><div class="api__description"><p>The names of the selected choices.</p></div><div id="h2o_wave.types.Picker.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-40"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-40" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-40"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Picker.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-40" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="pixelartcard"></a>PixelArtCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.PixelArtCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#pixelartcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">PixelArtCard</span>(box: str, title: str, data: Union[dict, str], commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a card displaying a collaborative Pixel art tool, just for kicks.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-41"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-41" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-41"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.PixelArtCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-41" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_PixelArtCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.PixelArtCard" title="h2o_wave.types.PixelArtCard">PixelArtCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-41"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-41" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.PixelArtCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.PixelArtCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.PixelArtCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>The data for this card.</p></div><div id="h2o_wave.types.PixelArtCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The title for this card.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-41"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-41" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-41"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.PixelArtCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-41" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="plot"></a>Plot <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Plot"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#plot" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Plot</span>(marks: List[<a href="#h2o_wave.types.Mark" title="h2o_wave.types.Mark">Mark</a>])</div><div class="api__description"><p>Create a plot. A plot is composed of one or more graphical mark layers.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-42"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-42" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-42"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Plot.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-42" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Plot__d: Dict) ‑&gt; <a href="#h2o_wave.types.Plot" title="h2o_wave.types.Plot">Plot</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-42"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-42" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Plot.marks" class="api__signature">var <span class="ident">marks</span></div><div class="api__description"><p>The graphical mark layers contained in this plot.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-42"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-42" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-42"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Plot.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-42" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="plotcard"></a>PlotCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.PlotCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#plotcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">PlotCard</span>(box: str, title: str, data: Union[dict, str], plot: <a href="#h2o_wave.types.Plot" title="h2o_wave.types.Plot">Plot</a>, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a card displaying a plot.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-43"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-43" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-43"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.PlotCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-43" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_PlotCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.PlotCard" title="h2o_wave.types.PlotCard">PlotCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-43"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-43" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.PlotCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.PlotCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.PlotCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.PlotCard.plot" class="api__signature">var <span class="ident">plot</span></div><div class="api__description"><p>The plot to be displayed in this card.</p></div><div id="h2o_wave.types.PlotCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The title for this card.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-43"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-43" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-43"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.PlotCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-43" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="progress"></a>Progress <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Progress"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#progress" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Progress</span>(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)</div><div class="api__description"><p>Create a progress bar.</p><p>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.</p><p>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]</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-44"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-44" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-44"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Progress.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-44" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Progress__d: Dict) ‑&gt; <a href="#h2o_wave.types.Progress" title="h2o_wave.types.Progress">Progress</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-44"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-44" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Progress.caption" class="api__signature">var <span class="ident">caption</span></div><div class="api__description"><p>The text displayed below the bar.</p></div><div id="h2o_wave.types.Progress.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The text displayed above the bar.</p></div><div id="h2o_wave.types.Progress.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Progress.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Progress.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The progress, between 0.0 and 1.0, or -1 (default) if indeterminate.</p></div><div id="h2o_wave.types.Progress.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-44"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-44" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-44"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Progress.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-44" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="progresstablecelltype"></a>ProgressTableCellType <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ProgressTableCellType"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#progresstablecelltype" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">ProgressTableCellType</span>(color: Union[str, NoneType] = None, name: Union[str, NoneType] = None)</div><div class="api__description"><p>Create a cell type that renders a column&#x27;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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-45"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-45" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-45"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ProgressTableCellType.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-45" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_ProgressTableCellType__d: Dict) ‑&gt; <a href="#h2o_wave.types.ProgressTableCellType" title="h2o_wave.types.ProgressTableCellType">ProgressTableCellType</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-45"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-45" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.ProgressTableCellType.color" class="api__signature">var <span class="ident">color</span></div><div class="api__description"><p>Color of the progress arc.</p></div><div id="h2o_wave.types.ProgressTableCellType.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-45"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-45" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-45"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ProgressTableCellType.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-45" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="rangeslider"></a>RangeSlider <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.RangeSlider"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#rangeslider" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">RangeSlider</span>(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)</div><div class="api__description"><p>Create a range slider.</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-46"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-46" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-46"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.RangeSlider.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-46" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_RangeSlider__d: Dict) ‑&gt; <a href="#h2o_wave.types.RangeSlider" title="h2o_wave.types.RangeSlider">RangeSlider</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-46"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-46" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.RangeSlider.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if this field is disabled.</p></div><div id="h2o_wave.types.RangeSlider.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.RangeSlider.max" class="api__signature">var <span class="ident">max</span></div><div class="api__description"><p>The maximum value of the slider. Defaults to 100.</p></div><div id="h2o_wave.types.RangeSlider.max_value" class="api__signature">var <span class="ident">max_value</span></div><div class="api__description"><p>The upper bound of the selected range.</p></div><div id="h2o_wave.types.RangeSlider.min" class="api__signature">var <span class="ident">min</span></div><div class="api__description"><p>The minimum value of the slider. Defaults to 0.</p></div><div id="h2o_wave.types.RangeSlider.min_value" class="api__signature">var <span class="ident">min_value</span></div><div class="api__description"><p>The lower bound of the selected range.</p></div><div id="h2o_wave.types.RangeSlider.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.RangeSlider.step" class="api__signature">var <span class="ident">step</span></div><div class="api__description"><p>The difference between two adjacent values of the slider.</p></div><div id="h2o_wave.types.RangeSlider.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.RangeSlider.trigger" class="api__signature">var <span class="ident">trigger</span></div><div class="api__description"><p>True if the form should be submitted when the slider value changes.</p></div><div id="h2o_wave.types.RangeSlider.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-46"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-46" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-46"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.RangeSlider.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-46" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="repeatcard"></a>RepeatCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.RepeatCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#repeatcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">RepeatCard</span>(box: str, item_view: str, item_props: Union[dict, str], data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str], commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE. Create a card containing other cards.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-47"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-47" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-47"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.RepeatCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-47" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_RepeatCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.RepeatCard" title="h2o_wave.types.RepeatCard">RepeatCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-47"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-47" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.RepeatCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.RepeatCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.RepeatCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.RepeatCard.item_props" class="api__signature">var <span class="ident">item_props</span></div><div class="api__description"><p>The child card properties.</p></div><div id="h2o_wave.types.RepeatCard.item_view" class="api__signature">var <span class="ident">item_view</span></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-47"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-47" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-47"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.RepeatCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-47" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="separator"></a>Separator <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Separator"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#separator" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Separator</span>(label: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)</div><div class="api__description"><p>Create a separator.</p><p>A separator visually separates content into groups.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-48"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-48" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-48"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Separator.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-48" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Separator__d: Dict) ‑&gt; <a href="#h2o_wave.types.Separator" title="h2o_wave.types.Separator">Separator</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-48"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-48" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Separator.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The text displayed on the separator.</p></div><div id="h2o_wave.types.Separator.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Separator.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-48"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-48" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-48"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Separator.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-48" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="slider"></a>Slider <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Slider"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#slider" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Slider</span>(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)</div><div class="api__description"><p>Create a slider.</p><p>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.</p><p>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.</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-49"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-49" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-49"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Slider.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-49" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Slider__d: Dict) ‑&gt; <a href="#h2o_wave.types.Slider" title="h2o_wave.types.Slider">Slider</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-49"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-49" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Slider.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if this field is disabled.</p></div><div id="h2o_wave.types.Slider.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.Slider.max" class="api__signature">var <span class="ident">max</span></div><div class="api__description"><p>The maximum value of the slider.</p></div><div id="h2o_wave.types.Slider.min" class="api__signature">var <span class="ident">min</span></div><div class="api__description"><p>The minimum value of the slider.</p></div><div id="h2o_wave.types.Slider.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Slider.step" class="api__signature">var <span class="ident">step</span></div><div class="api__description"><p>The difference between two adjacent values of the slider.</p></div><div id="h2o_wave.types.Slider.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Slider.trigger" class="api__signature">var <span class="ident">trigger</span></div><div class="api__description"><p>True if the form should be submitted when the slider value changes.</p></div><div id="h2o_wave.types.Slider.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The current value of the slider.</p></div><div id="h2o_wave.types.Slider.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-49"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-49" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-49"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Slider.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-49" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="smallseriesstatcard"></a>SmallSeriesStatCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.SmallSeriesStatCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#smallseriesstatcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">SmallSeriesStatCard</span>(box: str, title: str, value: str, plot_data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, 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[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a small stat card displaying a primary value and a series plot.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-50"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-50" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-50"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.SmallSeriesStatCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-50" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_SmallSeriesStatCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.SmallSeriesStatCard" title="h2o_wave.types.SmallSeriesStatCard">SmallSeriesStatCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-50"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-50" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.SmallSeriesStatCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.plot_category" class="api__signature">var <span class="ident">plot_category</span></div><div class="api__description"><p>The data field to use for x-axis values (ignored if <code>plot_type</code> is <code>area</code>; must be provided if <code>plot_type</code> is <code>interval</code>). Defaults to &#x27;x&#x27;.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.plot_color" class="api__signature">var <span class="ident">plot_color</span></div><div class="api__description"><p>The plot&#x27;s color.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.plot_curve" class="api__signature">var <span class="ident">plot_curve</span></div><div class="api__description"><p>The plot&#x27;s curve style. Defaults to <code>linear</code>. One of &#x27;linear&#x27;, &#x27;smooth&#x27;, &#x27;step&#x27;, &#x27;step-after&#x27;, &#x27;step-before&#x27;.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.plot_data" class="api__signature">var <span class="ident">plot_data</span></div><div class="api__description"><p>The plot&#x27;s data.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.plot_type" class="api__signature">var <span class="ident">plot_type</span></div><div class="api__description"><p>The type of plot. Defaults to <code>area</code>. One of &#x27;area&#x27;, &#x27;interval&#x27;.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.plot_value" class="api__signature">var <span class="ident">plot_value</span></div><div class="api__description"><p>The data field to use for y-axis values.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.plot_zero_value" class="api__signature">var <span class="ident">plot_zero_value</span></div><div class="api__description"><p>The base value to use for each y-axis mark. Set this to <code>0</code> if you want to pin the x-axis at <code>y=0</code>. If not provided, the minimum value from the data is used.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The card&#x27;s title.</p></div><div id="h2o_wave.types.SmallSeriesStatCard.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The primary value displayed.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-50"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-50" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-50"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.SmallSeriesStatCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-50" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="smallstatcard"></a>SmallStatCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.SmallStatCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#smallstatcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">SmallStatCard</span>(box: str, title: str, value: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a stat card displaying a single value.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-51"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-51" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-51"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.SmallStatCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-51" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_SmallStatCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.SmallStatCard" title="h2o_wave.types.SmallStatCard">SmallStatCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-51"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-51" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.SmallStatCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.SmallStatCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.SmallStatCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.SmallStatCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The card&#x27;s title.</p></div><div id="h2o_wave.types.SmallStatCard.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The primary value displayed.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-51"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-51" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-51"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.SmallStatCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-51" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="spinbox"></a>Spinbox <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Spinbox"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#spinbox" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Spinbox</span>(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)</div><div class="api__description"><p>Create a spinbox.</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-52"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-52" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-52"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Spinbox.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-52" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Spinbox__d: Dict) ‑&gt; <a href="#h2o_wave.types.Spinbox" title="h2o_wave.types.Spinbox">Spinbox</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-52"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-52" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Spinbox.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if this field is disabled.</p></div><div id="h2o_wave.types.Spinbox.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.Spinbox.max" class="api__signature">var <span class="ident">max</span></div><div class="api__description"><p>The maximum value of the spinbox.</p></div><div id="h2o_wave.types.Spinbox.min" class="api__signature">var <span class="ident">min</span></div><div class="api__description"><p>The minimum value of the spinbox.</p></div><div id="h2o_wave.types.Spinbox.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Spinbox.step" class="api__signature">var <span class="ident">step</span></div><div class="api__description"><p>The difference between two adjacent values of the spinbox.</p></div><div id="h2o_wave.types.Spinbox.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Spinbox.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The current value of the spinbox.</p></div><div id="h2o_wave.types.Spinbox.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-52"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-52" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-52"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Spinbox.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-52" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step"></a>Step <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Step"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#step" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Step</span>(label: str, icon: Union[str, NoneType] = None, done: Union[bool, NoneType] = None)</div><div class="api__description"><p>Create a step for a stepper.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-53"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-53" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-53"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Step.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-53" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Step__d: Dict) ‑&gt; <a href="#h2o_wave.types.Step" title="h2o_wave.types.Step">Step</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-53"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-53" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Step.done" class="api__signature">var <span class="ident">done</span></div><div class="api__description"><p>Indicates whether this step has already been completed.</p></div><div id="h2o_wave.types.Step.icon" class="api__signature">var <span class="ident">icon</span></div><div class="api__description"><p>Icon to be displayed.</p></div><div id="h2o_wave.types.Step.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text displayed below icon.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-53"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-53" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-53"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Step.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-53" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="stepper"></a>Stepper <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Stepper"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#stepper" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Stepper</span>(name: str, items: List[<a href="#h2o_wave.types.Step" title="h2o_wave.types.Step">Step</a>], visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None)</div><div class="api__description"><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-54"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-54" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-54"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Stepper.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-54" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Stepper__d: Dict) ‑&gt; <a href="#h2o_wave.types.Stepper" title="h2o_wave.types.Stepper">Stepper</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-54"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-54" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Stepper.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>The sequence of steps to be displayed.</p></div><div id="h2o_wave.types.Stepper.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Stepper.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Stepper.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-54"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-54" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-54"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Stepper.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-54" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tab"></a>Tab <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Tab"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tab" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Tab</span>(name: str, label: Union[str, NoneType] = None, icon: Union[str, NoneType] = None)</div><div class="api__description"><p>Create a tab.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-55"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-55" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-55"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Tab.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-55" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Tab__d: Dict) ‑&gt; <a href="#h2o_wave.types.Tab" title="h2o_wave.types.Tab">Tab</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-55"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-55" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Tab.icon" class="api__signature">var <span class="ident">icon</span></div><div class="api__description"><p>The icon displayed on the tab.</p></div><div id="h2o_wave.types.Tab.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The text displayed on the tab.</p></div><div id="h2o_wave.types.Tab.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-55"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-55" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-55"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Tab.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-55" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tabcard"></a>TabCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TabCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tabcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TabCard</span>(box: str, items: List[<a href="#h2o_wave.types.Tab" title="h2o_wave.types.Tab">Tab</a>], value: Union[str, NoneType] = None, link: Union[bool, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a card containing tabs for navigation.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-56"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-56" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-56"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TabCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-56" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TabCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.TabCard" title="h2o_wave.types.TabCard">TabCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-56"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-56" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TabCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.TabCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.TabCard.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>Items to render.</p></div><div id="h2o_wave.types.TabCard.link" class="api__signature">var <span class="ident">link</span></div><div class="api__description"><p>True if tabs should be rendered as links and not a standard tab.</p></div><div id="h2o_wave.types.TabCard.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The name of the tab to select.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-56"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-56" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-56"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TabCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-56" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="table"></a>Table <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Table"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#table" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Table</span>(name: str, columns: List[<a href="#h2o_wave.types.TableColumn" title="h2o_wave.types.TableColumn">TableColumn</a>], rows: List[<a href="#h2o_wave.types.TableRow" title="h2o_wave.types.TableRow">TableRow</a>], 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)</div><div class="api__description"><p>Create an interactive table.</p><p>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.</p><p>If <code>multiple</code> is set to False (default), each row in the table is clickable. When a row is clicked, the form is submitted automatically, and <code>q.args.table_name</code> is set to <code>[row_name]</code>, where <code>table_name</code> is the <code>name</code> of the table, and <code>row_name</code> is the <code>name</code> of the row that was clicked on.</p><p>If <code>multiple</code> 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,<code>q.args.table_name</code> is set to <code>[row1_name, row2_name, …]</code> where <code>table_name</code> is the <code>name</code> of the table, and <code>row1_name</code>, <code>row2_name</code> are the <code>name</code> of the rows that were selected. Note that if <code>multiple</code> is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-57"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-57" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-57"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Table.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-57" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Table__d: Dict) ‑&gt; <a href="#h2o_wave.types.Table" title="h2o_wave.types.Table">Table</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-57"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-57" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Table.columns" class="api__signature">var <span class="ident">columns</span></div><div class="api__description"><p>The columns in this table.</p></div><div id="h2o_wave.types.Table.downloadable" class="api__signature">var <span class="ident">downloadable</span></div><div class="api__description"><p>Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False.</p></div><div id="h2o_wave.types.Table.groupable" class="api__signature">var <span class="ident">groupable</span></div><div class="api__description"><p>True to allow group by feature.</p></div><div id="h2o_wave.types.Table.height" class="api__signature">var <span class="ident">height</span></div><div class="api__description"><p>The height of the table, e.g. &#x27;400px&#x27;, &#x27;50%&#x27;, etc.</p></div><div id="h2o_wave.types.Table.multiple" class="api__signature">var <span class="ident">multiple</span></div><div class="api__description"><p>True to allow multiple rows to be selected.</p></div><div id="h2o_wave.types.Table.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Table.resettable" class="api__signature">var <span class="ident">resettable</span></div><div class="api__description"><p>Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False.</p></div><div id="h2o_wave.types.Table.rows" class="api__signature">var <span class="ident">rows</span></div><div class="api__description"><p>The rows in this table.</p></div><div id="h2o_wave.types.Table.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Table.values" class="api__signature">var <span class="ident">values</span></div><div class="api__description"><p>The names of the selected rows. If this parameter is set, multiple selections will be allowed (<code>multiple</code> is assumed to be <code>True</code>).</p></div><div id="h2o_wave.types.Table.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-57"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-57" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-57"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Table.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-57" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tablecelltype"></a>TableCellType <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TableCellType"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tablecelltype" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TableCellType</span>(progress: Union[<a href="#h2o_wave.types.ProgressTableCellType" title="h2o_wave.types.ProgressTableCellType">ProgressTableCellType</a>, NoneType] = None, icon: Union[<a href="#h2o_wave.types.IconTableCellType" title="h2o_wave.types.IconTableCellType">IconTableCellType</a>, NoneType] = None)</div><div class="api__description"><p>Defines cell content to be rendered instead of a simple text.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-58"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-58" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-58"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TableCellType.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-58" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TableCellType__d: Dict) ‑&gt; <a href="#h2o_wave.types.TableCellType" title="h2o_wave.types.TableCellType">TableCellType</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-58"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-58" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TableCellType.icon" class="api__signature">var <span class="ident">icon</span></div><div class="api__description"><p>No documentation available.</p></div><div id="h2o_wave.types.TableCellType.progress" class="api__signature">var <span class="ident">progress</span></div><div class="api__description"><p>No documentation available.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-58"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-58" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-58"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TableCellType.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-58" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tablecolumn"></a>TableColumn <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TableColumn"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tablecolumn" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TableColumn</span>(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[<a href="#h2o_wave.types.TableCellType" title="h2o_wave.types.TableCellType">TableCellType</a>, NoneType] = None)</div><div class="api__description"><p>Create a table column.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-59"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-59" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-59"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TableColumn.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-59" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TableColumn__d: Dict) ‑&gt; <a href="#h2o_wave.types.TableColumn" title="h2o_wave.types.TableColumn">TableColumn</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-59"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-59" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TableColumn.cell_type" class="api__signature">var <span class="ident">cell_type</span></div><div class="api__description"><p>Defines how to render each cell in this column. Defaults to plain text.</p></div><div id="h2o_wave.types.TableColumn.filterable" class="api__signature">var <span class="ident">filterable</span></div><div class="api__description"><p>Indicates whether the contents of this column are displayed as filters in a dropdown.</p></div><div id="h2o_wave.types.TableColumn.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The text displayed on the column header.</p></div><div id="h2o_wave.types.TableColumn.link" class="api__signature">var <span class="ident">link</span></div><div class="api__description"><p>Indicates whether each cell in this column should be displayed as a clickable link.</p></div><div id="h2o_wave.types.TableColumn.max_width" class="api__signature">var <span class="ident">max_width</span></div><div class="api__description"><p>The maximum width of this column, e.g. &#x27;100px&#x27;. Only <code>px</code> units are supported at this time.</p></div><div id="h2o_wave.types.TableColumn.min_width" class="api__signature">var <span class="ident">min_width</span></div><div class="api__description"><p>The minimum width of this column, e.g. &#x27;50px&#x27;. Only <code>px</code> units are supported at this time.</p></div><div id="h2o_wave.types.TableColumn.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this column.</p></div><div id="h2o_wave.types.TableColumn.searchable" class="api__signature">var <span class="ident">searchable</span></div><div class="api__description"><p>Indicates whether the contents of this column can be searched through. Enables a search box for the table if true.</p></div><div id="h2o_wave.types.TableColumn.sortable" class="api__signature">var <span class="ident">sortable</span></div><div class="api__description"><p>Indicates whether the column is sortable.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-59"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-59" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-59"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TableColumn.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-59" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tablerow"></a>TableRow <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TableRow"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tablerow" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TableRow</span>(name: str, cells: List[str])</div><div class="api__description"><p>Create a table row.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-60"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-60" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-60"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TableRow.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-60" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TableRow__d: Dict) ‑&gt; <a href="#h2o_wave.types.TableRow" title="h2o_wave.types.TableRow">TableRow</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-60"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-60" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TableRow.cells" class="api__signature">var <span class="ident">cells</span></div><div class="api__description"><p>The cells in this row (displayed left to right).</p></div><div id="h2o_wave.types.TableRow.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this row.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-60"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-60" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-60"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TableRow.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-60" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tabs"></a>Tabs <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Tabs"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tabs" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Tabs</span>(name: str, value: Union[str, NoneType] = None, items: Union[List[<a href="#h2o_wave.types.Tab" title="h2o_wave.types.Tab">Tab</a>], NoneType] = None, visible: Union[bool, NoneType] = None)</div><div class="api__description"><p>Create a tab bar.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-61"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-61" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-61"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Tabs.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-61" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Tabs__d: Dict) ‑&gt; <a href="#h2o_wave.types.Tabs" title="h2o_wave.types.Tabs">Tabs</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-61"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-61" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Tabs.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>The tabs in this tab bar.</p></div><div id="h2o_wave.types.Tabs.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Tabs.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The name of the tab to select.</p></div><div id="h2o_wave.types.Tabs.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-61"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-61" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-61"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Tabs.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-61" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tallgaugestatcard"></a>TallGaugeStatCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TallGaugeStatCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tallgaugestatcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TallGaugeStatCard</span>(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[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-62"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-62" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-62"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TallGaugeStatCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-62" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TallGaugeStatCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.TallGaugeStatCard" title="h2o_wave.types.TallGaugeStatCard">TallGaugeStatCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-62"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-62" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TallGaugeStatCard.aux_value" class="api__signature">var <span class="ident">aux_value</span></div><div class="api__description"><p>The auxiliary value displayed next to the primary value.</p></div><div id="h2o_wave.types.TallGaugeStatCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.TallGaugeStatCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.TallGaugeStatCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.TallGaugeStatCard.plot_color" class="api__signature">var <span class="ident">plot_color</span></div><div class="api__description"><p>The color of the progress gauge.</p></div><div id="h2o_wave.types.TallGaugeStatCard.progress" class="api__signature">var <span class="ident">progress</span></div><div class="api__description"><p>The value of the progress gauge, between 0 and 1.</p></div><div id="h2o_wave.types.TallGaugeStatCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The card&#x27;s title.</p></div><div id="h2o_wave.types.TallGaugeStatCard.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The primary value displayed.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-62"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-62" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-62"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TallGaugeStatCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-62" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tallseriesstatcard"></a>TallSeriesStatCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TallSeriesStatCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tallseriesstatcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TallSeriesStatCard</span>(box: str, title: str, value: str, aux_value: str, plot_data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, 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[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a tall stat card displaying a primary value, an auxiliary value and a series plot.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-63"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-63" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-63"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TallSeriesStatCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-63" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TallSeriesStatCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.TallSeriesStatCard" title="h2o_wave.types.TallSeriesStatCard">TallSeriesStatCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-63"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-63" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TallSeriesStatCard.aux_value" class="api__signature">var <span class="ident">aux_value</span></div><div class="api__description"><p>The auxiliary value displayed below the primary value.</p></div><div id="h2o_wave.types.TallSeriesStatCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.TallSeriesStatCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.TallSeriesStatCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.TallSeriesStatCard.plot_category" class="api__signature">var <span class="ident">plot_category</span></div><div class="api__description"><p>The data field to use for x-axis values (ignored if <code>plot_type</code> is <code>area</code>; must be provided if <code>plot_type</code> is <code>interval</code>). Defaults to &#x27;x&#x27;.</p></div><div id="h2o_wave.types.TallSeriesStatCard.plot_color" class="api__signature">var <span class="ident">plot_color</span></div><div class="api__description"><p>The plot&#x27;s color.</p></div><div id="h2o_wave.types.TallSeriesStatCard.plot_curve" class="api__signature">var <span class="ident">plot_curve</span></div><div class="api__description"><p>The plot&#x27;s curve style. Defaults to <code>linear</code>. One of &#x27;linear&#x27;, &#x27;smooth&#x27;, &#x27;step&#x27;, &#x27;step-after&#x27;, &#x27;step-before&#x27;.</p></div><div id="h2o_wave.types.TallSeriesStatCard.plot_data" class="api__signature">var <span class="ident">plot_data</span></div><div class="api__description"><p>The plot&#x27;s data.</p></div><div id="h2o_wave.types.TallSeriesStatCard.plot_type" class="api__signature">var <span class="ident">plot_type</span></div><div class="api__description"><p>The type of plot. Defaults to <code>area</code>. One of &#x27;area&#x27;, &#x27;interval&#x27;.</p></div><div id="h2o_wave.types.TallSeriesStatCard.plot_value" class="api__signature">var <span class="ident">plot_value</span></div><div class="api__description"><p>The data field to use for y-axis values.</p></div><div id="h2o_wave.types.TallSeriesStatCard.plot_zero_value" class="api__signature">var <span class="ident">plot_zero_value</span></div><div class="api__description"><p>The base value to use for each y-axis mark. Set this to <code>0</code> if you want to pin the x-axis at <code>y=0</code>. If not provided, the minimum value from the data is used.</p></div><div id="h2o_wave.types.TallSeriesStatCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The card&#x27;s title.</p></div><div id="h2o_wave.types.TallSeriesStatCard.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The primary value displayed.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-63"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-63" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-63"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TallSeriesStatCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-63" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="template"></a>Template <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Template"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#template" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Template</span>(content: str, data: Union[dict, str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)</div><div class="api__description"><p>Render dynamic content using an HTML template.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-64"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-64" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-64"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Template.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-64" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Template__d: Dict) ‑&gt; <a href="#h2o_wave.types.Template" title="h2o_wave.types.Template">Template</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-64"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-64" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Template.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The Handlebars template. <a href="https://handlebarsjs.com/guide/" target="_blank" rel="noopener noreferrer">https://handlebarsjs.com/guide/</a></p></div><div id="h2o_wave.types.Template.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for the Handlebars template</p></div><div id="h2o_wave.types.Template.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Template.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-64"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-64" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-64"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Template.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-64" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="templatecard"></a>TemplateCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TemplateCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#templatecard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TemplateCard</span>(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Render dynamic content using an HTML template.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-65"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-65" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-65"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TemplateCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-65" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TemplateCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.TemplateCard" title="h2o_wave.types.TemplateCard">TemplateCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-65"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-65" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TemplateCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.TemplateCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.TemplateCard.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The Handlebars template. <a href="https://handlebarsjs.com/guide/" target="_blank" rel="noopener noreferrer">https://handlebarsjs.com/guide/</a></p></div><div id="h2o_wave.types.TemplateCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for the Handlebars template.</p></div><div id="h2o_wave.types.TemplateCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The title for this card.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-65"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-65" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-65"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TemplateCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-65" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="text"></a>Text <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Text"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#text" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Text</span>(content: str, size: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)</div><div class="api__description"><p>Create text content.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-66"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-66" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-66"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Text.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-66" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Text__d: Dict) ‑&gt; <a href="#h2o_wave.types.Text" title="h2o_wave.types.Text">Text</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-66"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-66" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Text.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The text content.</p></div><div id="h2o_wave.types.Text.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Text.size" class="api__signature">var <span class="ident">size</span></div><div class="api__description"><p>The font size of the text content. One of &#x27;xl&#x27;, &#x27;l&#x27;, &#x27;m&#x27;, &#x27;s&#x27;, &#x27;xs&#x27;.</p></div><div id="h2o_wave.types.Text.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>Tooltip message.</p></div><div id="h2o_wave.types.Text.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-66"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-66" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-66"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Text.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-66" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="textl"></a>TextL <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextL"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#textl" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TextL</span>(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None, name: Union[str, NoneType] = None)</div><div class="api__description"><p>Create large sized text content.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-67"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-67" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-67"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextL.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-67" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TextL__d: Dict) ‑&gt; <a href="#h2o_wave.types.TextL" title="h2o_wave.types.TextL">TextL</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-67"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-67" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TextL.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.TextL.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The text content.</p></div><div id="h2o_wave.types.TextL.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.TextL.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>Tooltip message.</p></div><div id="h2o_wave.types.TextL.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-67"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-67" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-67"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextL.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-67" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="textm"></a>TextM <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextM"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#textm" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TextM</span>(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)</div><div class="api__description"><p>Create medium sized text content.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-68"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-68" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-68"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextM.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-68" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TextM__d: Dict) ‑&gt; <a href="#h2o_wave.types.TextM" title="h2o_wave.types.TextM">TextM</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-68"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-68" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TextM.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The text content.</p></div><div id="h2o_wave.types.TextM.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.TextM.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>Tooltip message.</p></div><div id="h2o_wave.types.TextM.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-68"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-68" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-68"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextM.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-68" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="texts"></a>TextS <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextS"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#texts" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TextS</span>(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)</div><div class="api__description"><p>Create small sized text content.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-69"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-69" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-69"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextS.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-69" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TextS__d: Dict) ‑&gt; <a href="#h2o_wave.types.TextS" title="h2o_wave.types.TextS">TextS</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-69"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-69" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TextS.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The text content.</p></div><div id="h2o_wave.types.TextS.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.TextS.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>Tooltip message.</p></div><div id="h2o_wave.types.TextS.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-69"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-69" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-69"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextS.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-69" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="textxl"></a>TextXl <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextXl"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#textxl" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TextXl</span>(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None, name: Union[str, NoneType] = None)</div><div class="api__description"><p>Create extra-large sized text content.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-70"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-70" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-70"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextXl.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-70" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TextXl__d: Dict) ‑&gt; <a href="#h2o_wave.types.TextXl" title="h2o_wave.types.TextXl">TextXl</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-70"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-70" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TextXl.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.TextXl.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The text content.</p></div><div id="h2o_wave.types.TextXl.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.TextXl.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>Tooltip message.</p></div><div id="h2o_wave.types.TextXl.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-70"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-70" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-70"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextXl.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-70" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="textxs"></a>TextXs <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextXs"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#textxs" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">TextXs</span>(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None)</div><div class="api__description"><p>Create extra-small sized text content.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-71"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-71" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-71"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextXs.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-71" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_TextXs__d: Dict) ‑&gt; <a href="#h2o_wave.types.TextXs" title="h2o_wave.types.TextXs">TextXs</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-71"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-71" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.TextXs.content" class="api__signature">var <span class="ident">content</span></div><div class="api__description"><p>The text content.</p></div><div id="h2o_wave.types.TextXs.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.TextXs.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>Tooltip message.</p></div><div id="h2o_wave.types.TextXs.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-71"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-71" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-71"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.TextXs.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-71" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="textbox"></a>Textbox <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Textbox"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#textbox" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Textbox</span>(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)</div><div class="api__description"><p>Create a text box.</p><p>The text box component enables a user to type text into an app. It&#x27;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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-72"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-72" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-72"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Textbox.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-72" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Textbox__d: Dict) ‑&gt; <a href="#h2o_wave.types.Textbox" title="h2o_wave.types.Textbox">Textbox</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-72"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-72" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Textbox.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if the text box is disabled.</p></div><div id="h2o_wave.types.Textbox.error" class="api__signature">var <span class="ident">error</span></div><div class="api__description"><p>Text to be displayed as an error below the text box.</p></div><div id="h2o_wave.types.Textbox.icon" class="api__signature">var <span class="ident">icon</span></div><div class="api__description"><p>Icon displayed in the far right end of the text field.</p></div><div id="h2o_wave.types.Textbox.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>The text displayed above the field.</p></div><div id="h2o_wave.types.Textbox.mask" class="api__signature">var <span class="ident">mask</span></div><div class="api__description"><p>The masking string that defines the mask&#x27;s behavior. A backslash will escape any character. Special format characters are: &#x27;9&#x27;: [0-9] &#x27;a&#x27;: [a-zA-Z] &#x27;*&#x27;: [a-zA-Z0-9].</p></div><div id="h2o_wave.types.Textbox.multiline" class="api__signature">var <span class="ident">multiline</span></div><div class="api__description"><p>True if the text box should allow multi-line text entry.</p></div><div id="h2o_wave.types.Textbox.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Textbox.password" class="api__signature">var <span class="ident">password</span></div><div class="api__description"><p>True if the text box should hide text content.</p></div><div id="h2o_wave.types.Textbox.placeholder" class="api__signature">var <span class="ident">placeholder</span></div><div class="api__description"><p>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.</p></div><div id="h2o_wave.types.Textbox.prefix" class="api__signature">var <span class="ident">prefix</span></div><div class="api__description"><p>Text to be displayed before the text box contents.</p></div><div id="h2o_wave.types.Textbox.readonly" class="api__signature">var <span class="ident">readonly</span></div><div class="api__description"><p>True if the text box is a read-only field.</p></div><div id="h2o_wave.types.Textbox.required" class="api__signature">var <span class="ident">required</span></div><div class="api__description"><p>True if the text box is a required field.</p></div><div id="h2o_wave.types.Textbox.suffix" class="api__signature">var <span class="ident">suffix</span></div><div class="api__description"><p>Text to be displayed after the text box contents.</p></div><div id="h2o_wave.types.Textbox.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Textbox.trigger" class="api__signature">var <span class="ident">trigger</span></div><div class="api__description"><p>True if the form should be submitted when the text value changes.</p></div><div id="h2o_wave.types.Textbox.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>Text to be displayed inside the text box.</p></div><div id="h2o_wave.types.Textbox.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-72"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-72" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-72"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Textbox.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-72" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="toggle"></a>Toggle <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Toggle"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#toggle" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Toggle</span>(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)</div><div class="api__description"><p>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.</p><p>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.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-73"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-73" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-73"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Toggle.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-73" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Toggle__d: Dict) ‑&gt; <a href="#h2o_wave.types.Toggle" title="h2o_wave.types.Toggle">Toggle</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-73"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-73" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Toggle.disabled" class="api__signature">var <span class="ident">disabled</span></div><div class="api__description"><p>True if the checkbox is disabled.</p></div><div id="h2o_wave.types.Toggle.label" class="api__signature">var <span class="ident">label</span></div><div class="api__description"><p>Text to be displayed alongside the component.</p></div><div id="h2o_wave.types.Toggle.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Toggle.tooltip" class="api__signature">var <span class="ident">tooltip</span></div><div class="api__description"><p>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</p></div><div id="h2o_wave.types.Toggle.trigger" class="api__signature">var <span class="ident">trigger</span></div><div class="api__description"><p>True if the form should be submitted when the toggle value changes.</p></div><div id="h2o_wave.types.Toggle.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>True if selected, False if unselected.</p></div><div id="h2o_wave.types.Toggle.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-73"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-73" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-73"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Toggle.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-73" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="toolbarcard"></a>ToolbarCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ToolbarCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#toolbarcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">ToolbarCard</span>(box: str, items: List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], secondary_items: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None, overflow_items: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a card containing a toolbar.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-74"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-74" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-74"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ToolbarCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-74" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_ToolbarCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.ToolbarCard" title="h2o_wave.types.ToolbarCard">ToolbarCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-74"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-74" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.ToolbarCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.ToolbarCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.ToolbarCard.items" class="api__signature">var <span class="ident">items</span></div><div class="api__description"><p>Items to render.</p></div><div id="h2o_wave.types.ToolbarCard.overflow_items" class="api__signature">var <span class="ident">overflow_items</span></div><div class="api__description"><p>Items to render in an overflow menu.</p></div><div id="h2o_wave.types.ToolbarCard.secondary_items" class="api__signature">var <span class="ident">secondary_items</span></div><div class="api__description"><p>Items to render on the right side (or left, in RTL).</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-74"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-74" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-74"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.ToolbarCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-74" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="vegacard"></a>VegaCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.VegaCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#vegacard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">VegaCard</span>(box: str, title: str, specification: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a card containing a Vega-lite plot.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-75"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-75" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-75"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.VegaCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-75" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_VegaCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.VegaCard" title="h2o_wave.types.VegaCard">VegaCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-75"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-75" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.VegaCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.VegaCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.VegaCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for the plot, if any.</p></div><div id="h2o_wave.types.VegaCard.specification" class="api__signature">var <span class="ident">specification</span></div><div class="api__description"><p>The Vega-lite specification.</p></div><div id="h2o_wave.types.VegaCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The title of this card.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-75"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-75" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-75"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.VegaCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-75" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="vegavisualization"></a>VegaVisualization <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.VegaVisualization"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#vegavisualization" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">VegaVisualization</span>(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)</div><div class="api__description"><p>Create a Vega-lite plot for display inside a form.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-76"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-76" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-76"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.VegaVisualization.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-76" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_VegaVisualization__d: Dict) ‑&gt; <a href="#h2o_wave.types.VegaVisualization" title="h2o_wave.types.VegaVisualization">VegaVisualization</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-76"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-76" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.VegaVisualization.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for the plot, if any.</p></div><div id="h2o_wave.types.VegaVisualization.height" class="api__signature">var <span class="ident">height</span></div><div class="api__description"><p>The height of the visualization. Defaults to 300px.</p></div><div id="h2o_wave.types.VegaVisualization.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.VegaVisualization.specification" class="api__signature">var <span class="ident">specification</span></div><div class="api__description"><p>The Vega-lite specification.</p></div><div id="h2o_wave.types.VegaVisualization.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div><div id="h2o_wave.types.VegaVisualization.width" class="api__signature">var <span class="ident">width</span></div><div class="api__description"><p>The width of the visualization. Defaults to 100%.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-76"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-76" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-76"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.VegaVisualization.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-76" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="visualization"></a>Visualization <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Visualization"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#visualization" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">Visualization</span>(plot: <a href="#h2o_wave.types.Plot" title="h2o_wave.types.Plot">Plot</a>, data: Union[dict, str], width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None)</div><div class="api__description"><p>Create a visualization for display inside a form.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-77"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-77" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-77"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Visualization.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-77" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_Visualization__d: Dict) ‑&gt; <a href="#h2o_wave.types.Visualization" title="h2o_wave.types.Visualization">Visualization</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-77"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-77" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.Visualization.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this visualization.</p></div><div id="h2o_wave.types.Visualization.height" class="api__signature">var <span class="ident">height</span></div><div class="api__description"><p>The hight of the visualization. Defaults to 300px.</p></div><div id="h2o_wave.types.Visualization.name" class="api__signature">var <span class="ident">name</span></div><div class="api__description"><p>An identifying name for this component.</p></div><div id="h2o_wave.types.Visualization.plot" class="api__signature">var <span class="ident">plot</span></div><div class="api__description"><p>The plot to be rendered in this visualization.</p></div><div id="h2o_wave.types.Visualization.visible" class="api__signature">var <span class="ident">visible</span></div><div class="api__description"><p>True if the component should be visible. Defaults to true.</p></div><div id="h2o_wave.types.Visualization.width" class="api__signature">var <span class="ident">width</span></div><div class="api__description"><p>The width of the visualization. Defaults to 100%.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-77"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-77" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-77"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.Visualization.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-77" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="widebarstatcard"></a>WideBarStatCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.WideBarStatCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#widebarstatcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">WideBarStatCard</span>(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[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-78"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-78" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-78"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.WideBarStatCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-78" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_WideBarStatCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.WideBarStatCard" title="h2o_wave.types.WideBarStatCard">WideBarStatCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-78"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-78" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.WideBarStatCard.aux_value" class="api__signature">var <span class="ident">aux_value</span></div><div class="api__description"><p>The auxiliary value displayed next to the primary value.</p></div><div id="h2o_wave.types.WideBarStatCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.WideBarStatCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.WideBarStatCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.WideBarStatCard.plot_color" class="api__signature">var <span class="ident">plot_color</span></div><div class="api__description"><p>The color of the progress bar.</p></div><div id="h2o_wave.types.WideBarStatCard.progress" class="api__signature">var <span class="ident">progress</span></div><div class="api__description"><p>The value of the progress bar, between 0 and 1.</p></div><div id="h2o_wave.types.WideBarStatCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The card&#x27;s title.</p></div><div id="h2o_wave.types.WideBarStatCard.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The primary value displayed.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-78"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-78" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-78"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.WideBarStatCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-78" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="widegaugestatcard"></a>WideGaugeStatCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.WideGaugeStatCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#widegaugestatcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">WideGaugeStatCard</span>(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[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-79"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-79" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-79"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.WideGaugeStatCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-79" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_WideGaugeStatCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.WideGaugeStatCard" title="h2o_wave.types.WideGaugeStatCard">WideGaugeStatCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-79"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-79" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.WideGaugeStatCard.aux_value" class="api__signature">var <span class="ident">aux_value</span></div><div class="api__description"><p>The auxiliary value displayed next to the primary value.</p></div><div id="h2o_wave.types.WideGaugeStatCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.WideGaugeStatCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.WideGaugeStatCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.WideGaugeStatCard.plot_color" class="api__signature">var <span class="ident">plot_color</span></div><div class="api__description"><p>The color of the progress gauge.</p></div><div id="h2o_wave.types.WideGaugeStatCard.progress" class="api__signature">var <span class="ident">progress</span></div><div class="api__description"><p>The value of the progress gauge, between 0 and 1.</p></div><div id="h2o_wave.types.WideGaugeStatCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The card&#x27;s title.</p></div><div id="h2o_wave.types.WideGaugeStatCard.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The primary value displayed.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-79"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-79" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-79"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.WideGaugeStatCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-79" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="wideseriesstatcard"></a>WideSeriesStatCard <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.WideSeriesStatCard"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#wideseriesstatcard" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">class <span class="ident">WideSeriesStatCard</span>(box: str, title: str, value: str, aux_value: str, plot_data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, 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[<a href="#h2o_wave.types.Command" title="h2o_wave.types.Command">Command</a>], NoneType] = None)</div><div class="api__description"><p>Create a wide stat card displaying a primary value, an auxiliary value and a series plot.</p></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="static-methods-80"></a>Static methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#static-methods-80" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="load-80"></a>load <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.WideSeriesStatCard.load"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#load-80" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">load</span>(_WideSeriesStatCard__d: Dict) ‑&gt; <a href="#h2o_wave.types.WideSeriesStatCard" title="h2o_wave.types.WideSeriesStatCard">WideSeriesStatCard</a></div><div class="api__description"><p>Creates an instance of this class using the contents of a dict.</p></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-variables-80"></a>Instance variables<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-variables-80" title="Direct link to heading">#</a></h4><div class="api__body"><div id="h2o_wave.types.WideSeriesStatCard.aux_value" class="api__signature">var <span class="ident">aux_value</span></div><div class="api__description"><p>The auxiliary value displayed below the primary value.</p></div><div id="h2o_wave.types.WideSeriesStatCard.box" class="api__signature">var <span class="ident">box</span></div><div class="api__description"><p>A string indicating how to place this component on the page.</p></div><div id="h2o_wave.types.WideSeriesStatCard.commands" class="api__signature">var <span class="ident">commands</span></div><div class="api__description"><p>Contextual menu commands for this component.</p></div><div id="h2o_wave.types.WideSeriesStatCard.data" class="api__signature">var <span class="ident">data</span></div><div class="api__description"><p>Data for this card.</p></div><div id="h2o_wave.types.WideSeriesStatCard.plot_category" class="api__signature">var <span class="ident">plot_category</span></div><div class="api__description"><p>The data field to use for x-axis values (ignored if <code>plot_type</code> is <code>area</code>; must be provided if <code>plot_type</code> is <code>interval</code>). Defaults to &#x27;x&#x27;.</p></div><div id="h2o_wave.types.WideSeriesStatCard.plot_color" class="api__signature">var <span class="ident">plot_color</span></div><div class="api__description"><p>The plot&#x27;s color.</p></div><div id="h2o_wave.types.WideSeriesStatCard.plot_curve" class="api__signature">var <span class="ident">plot_curve</span></div><div class="api__description"><p>The plot&#x27;s curve style. Defaults to <code>linear</code>. One of &#x27;linear&#x27;, &#x27;smooth&#x27;, &#x27;step&#x27;, &#x27;step-after&#x27;, &#x27;step-before&#x27;.</p></div><div id="h2o_wave.types.WideSeriesStatCard.plot_data" class="api__signature">var <span class="ident">plot_data</span></div><div class="api__description"><p>The plot&#x27;s data.</p></div><div id="h2o_wave.types.WideSeriesStatCard.plot_type" class="api__signature">var <span class="ident">plot_type</span></div><div class="api__description"><p>The type of plot. Defaults to <code>area</code>. One of &#x27;area&#x27;, &#x27;interval&#x27;.</p></div><div id="h2o_wave.types.WideSeriesStatCard.plot_value" class="api__signature">var <span class="ident">plot_value</span></div><div class="api__description"><p>The data field to use for y-axis values.</p></div><div id="h2o_wave.types.WideSeriesStatCard.plot_zero_value" class="api__signature">var <span class="ident">plot_zero_value</span></div><div class="api__description"><p>The base value to use for each y-axis mark. Set this to <code>0</code> if you want to pin the x-axis at <code>y=0</code>. If not provided, the minimum value from the data is used.</p></div><div id="h2o_wave.types.WideSeriesStatCard.title" class="api__signature">var <span class="ident">title</span></div><div class="api__description"><p>The card&#x27;s title.</p></div><div id="h2o_wave.types.WideSeriesStatCard.value" class="api__signature">var <span class="ident">value</span></div><div class="api__description"><p>The primary value displayed.</p></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="methods-80"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods-80" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api"><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dump-80"></a>dump <a target="_blank" rel="noopener noreferrer" name="h2o_wave.types.WideSeriesStatCard.dump"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dump-80" title="Direct link to heading">#</a></h4><div class="api__body"><div class="api__signature">def <span class="ident">dump</span>(self) ‑&gt; Dict</div><div class="api__description"><p>Returns the contents of this object as a dict.</p></div></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/api/types.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/api/graphics"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Module h2o_wave.graphics</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/api/test"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Module h2o_wave.test »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#classes" class="table-of-contents__link">Classes</a><ul><li><a href="#breadcrumb" class="table-of-contents__link">Breadcrumb <a name="h2o_wave.types.Breadcrumb"></a></li><li><a href="#breadcrumbscard" class="table-of-contents__link">BreadcrumbsCard <a name="h2o_wave.types.BreadcrumbsCard"></a></li><li><a href="#button" class="table-of-contents__link">Button <a name="h2o_wave.types.Button"></a></li><li><a href="#buttons" class="table-of-contents__link">Buttons <a name="h2o_wave.types.Buttons"></a></li><li><a href="#checkbox" class="table-of-contents__link">Checkbox <a name="h2o_wave.types.Checkbox"></a></li><li><a href="#checklist" class="table-of-contents__link">Checklist <a name="h2o_wave.types.Checklist"></a></li><li><a href="#choice" class="table-of-contents__link">Choice <a name="h2o_wave.types.Choice"></a></li><li><a href="#choicegroup" class="table-of-contents__link">ChoiceGroup <a name="h2o_wave.types.ChoiceGroup"></a></li><li><a href="#colorpicker" class="table-of-contents__link">ColorPicker <a name="h2o_wave.types.ColorPicker"></a></li><li><a href="#combobox" class="table-of-contents__link">Combobox <a name="h2o_wave.types.Combobox"></a></li><li><a href="#command" class="table-of-contents__link">Command <a name="h2o_wave.types.Command"></a></li><li><a href="#component" class="table-of-contents__link">Component <a name="h2o_wave.types.Component"></a></li><li><a href="#datepicker" class="table-of-contents__link">DatePicker <a name="h2o_wave.types.DatePicker"></a></li><li><a href="#dropdown" class="table-of-contents__link">Dropdown <a name="h2o_wave.types.Dropdown"></a></li><li><a href="#expander" class="table-of-contents__link">Expander <a name="h2o_wave.types.Expander"></a></li><li><a href="#fileupload" class="table-of-contents__link">FileUpload <a name="h2o_wave.types.FileUpload"></a></li><li><a href="#flexcard" class="table-of-contents__link">FlexCard <a name="h2o_wave.types.FlexCard"></a></li><li><a href="#formcard" class="table-of-contents__link">FormCard <a name="h2o_wave.types.FormCard"></a></li><li><a href="#frame" class="table-of-contents__link">Frame <a name="h2o_wave.types.Frame"></a></li><li><a href="#framecard" class="table-of-contents__link">FrameCard <a name="h2o_wave.types.FrameCard"></a></li><li><a href="#graphicscard" class="table-of-contents__link">GraphicsCard <a name="h2o_wave.types.GraphicsCard"></a></li><li><a href="#gridcard" class="table-of-contents__link">GridCard <a name="h2o_wave.types.GridCard"></a></li><li><a href="#headercard" class="table-of-contents__link">HeaderCard <a name="h2o_wave.types.HeaderCard"></a></li><li><a href="#icontablecelltype" class="table-of-contents__link">IconTableCellType <a name="h2o_wave.types.IconTableCellType"></a></li><li><a href="#imagecard" class="table-of-contents__link">ImageCard <a name="h2o_wave.types.ImageCard"></a></li><li><a href="#label" class="table-of-contents__link">Label <a name="h2o_wave.types.Label"></a></li><li><a href="#largebarstatcard" class="table-of-contents__link">LargeBarStatCard <a name="h2o_wave.types.LargeBarStatCard"></a></li><li><a href="#largestatcard" class="table-of-contents__link">LargeStatCard <a name="h2o_wave.types.LargeStatCard"></a></li><li><a href="#link" class="table-of-contents__link">Link <a name="h2o_wave.types.Link"></a></li><li><a href="#listcard" class="table-of-contents__link">ListCard <a name="h2o_wave.types.ListCard"></a></li><li><a href="#listitem1card" class="table-of-contents__link">ListItem1Card <a name="h2o_wave.types.ListItem1Card"></a></li><li><a href="#mark" class="table-of-contents__link">Mark <a name="h2o_wave.types.Mark"></a></li><li><a href="#markdowncard" class="table-of-contents__link">MarkdownCard <a name="h2o_wave.types.MarkdownCard"></a></li><li><a href="#markup" class="table-of-contents__link">Markup <a name="h2o_wave.types.Markup"></a></li><li><a href="#markupcard" class="table-of-contents__link">MarkupCard <a name="h2o_wave.types.MarkupCard"></a></li><li><a href="#messagebar" class="table-of-contents__link">MessageBar <a name="h2o_wave.types.MessageBar"></a></li><li><a href="#metacard" class="table-of-contents__link">MetaCard <a name="h2o_wave.types.MetaCard"></a></li><li><a href="#navcard" class="table-of-contents__link">NavCard <a name="h2o_wave.types.NavCard"></a></li><li><a href="#navgroup" class="table-of-contents__link">NavGroup <a name="h2o_wave.types.NavGroup"></a></li><li><a href="#navitem" class="table-of-contents__link">NavItem <a name="h2o_wave.types.NavItem"></a></li><li><a href="#picker" class="table-of-contents__link">Picker <a name="h2o_wave.types.Picker"></a></li><li><a href="#pixelartcard" class="table-of-contents__link">PixelArtCard <a name="h2o_wave.types.PixelArtCard"></a></li><li><a href="#plot" class="table-of-contents__link">Plot <a name="h2o_wave.types.Plot"></a></li><li><a href="#plotcard" class="table-of-contents__link">PlotCard <a name="h2o_wave.types.PlotCard"></a></li><li><a href="#progress" class="table-of-contents__link">Progress <a name="h2o_wave.types.Progress"></a></li><li><a href="#progresstablecelltype" class="table-of-contents__link">ProgressTableCellType <a name="h2o_wave.types.ProgressTableCellType"></a></li><li><a href="#rangeslider" class="table-of-contents__link">RangeSlider <a name="h2o_wave.types.RangeSlider"></a></li><li><a href="#repeatcard" class="table-of-contents__link">RepeatCard <a name="h2o_wave.types.RepeatCard"></a></li><li><a href="#separator" class="table-of-contents__link">Separator <a name="h2o_wave.types.Separator"></a></li><li><a href="#slider" class="table-of-contents__link">Slider <a name="h2o_wave.types.Slider"></a></li><li><a href="#smallseriesstatcard" class="table-of-contents__link">SmallSeriesStatCard <a name="h2o_wave.types.SmallSeriesStatCard"></a></li><li><a href="#smallstatcard" class="table-of-contents__link">SmallStatCard <a name="h2o_wave.types.SmallStatCard"></a></li><li><a href="#spinbox" class="table-of-contents__link">Spinbox <a name="h2o_wave.types.Spinbox"></a></li><li><a href="#step" class="table-of-contents__link">Step <a name="h2o_wave.types.Step"></a></li><li><a href="#stepper" class="table-of-contents__link">Stepper <a name="h2o_wave.types.Stepper"></a></li><li><a href="#tab" class="table-of-contents__link">Tab <a name="h2o_wave.types.Tab"></a></li><li><a href="#tabcard" class="table-of-contents__link">TabCard <a name="h2o_wave.types.TabCard"></a></li><li><a href="#table" class="table-of-contents__link">Table <a name="h2o_wave.types.Table"></a></li><li><a href="#tablecelltype" class="table-of-contents__link">TableCellType <a name="h2o_wave.types.TableCellType"></a></li><li><a href="#tablecolumn" class="table-of-contents__link">TableColumn <a name="h2o_wave.types.TableColumn"></a></li><li><a href="#tablerow" class="table-of-contents__link">TableRow <a name="h2o_wave.types.TableRow"></a></li><li><a href="#tabs" class="table-of-contents__link">Tabs <a name="h2o_wave.types.Tabs"></a></li><li><a href="#tallgaugestatcard" class="table-of-contents__link">TallGaugeStatCard <a name="h2o_wave.types.TallGaugeStatCard"></a></li><li><a href="#tallseriesstatcard" class="table-of-contents__link">TallSeriesStatCard <a name="h2o_wave.types.TallSeriesStatCard"></a></li><li><a href="#template" class="table-of-contents__link">Template <a name="h2o_wave.types.Template"></a></li><li><a href="#templatecard" class="table-of-contents__link">TemplateCard <a name="h2o_wave.types.TemplateCard"></a></li><li><a href="#text" class="table-of-contents__link">Text <a name="h2o_wave.types.Text"></a></li><li><a href="#textl" class="table-of-contents__link">TextL <a name="h2o_wave.types.TextL"></a></li><li><a href="#textm" class="table-of-contents__link">TextM <a name="h2o_wave.types.TextM"></a></li><li><a href="#texts" class="table-of-contents__link">TextS <a name="h2o_wave.types.TextS"></a></li><li><a href="#textxl" class="table-of-contents__link">TextXl <a name="h2o_wave.types.TextXl"></a></li><li><a href="#textxs" class="table-of-contents__link">TextXs <a name="h2o_wave.types.TextXs"></a></li><li><a href="#textbox" class="table-of-contents__link">Textbox <a name="h2o_wave.types.Textbox"></a></li><li><a href="#toggle" class="table-of-contents__link">Toggle <a name="h2o_wave.types.Toggle"></a></li><li><a href="#toolbarcard" class="table-of-contents__link">ToolbarCard <a name="h2o_wave.types.ToolbarCard"></a></li><li><a href="#vegacard" class="table-of-contents__link">VegaCard <a name="h2o_wave.types.VegaCard"></a></li><li><a href="#vegavisualization" class="table-of-contents__link">VegaVisualization <a name="h2o_wave.types.VegaVisualization"></a></li><li><a href="#visualization" class="table-of-contents__link">Visualization <a name="h2o_wave.types.Visualization"></a></li><li><a href="#widebarstatcard" class="table-of-contents__link">WideBarStatCard <a name="h2o_wave.types.WideBarStatCard"></a></li><li><a href="#widegaugestatcard" class="table-of-contents__link">WideGaugeStatCard <a name="h2o_wave.types.WideGaugeStatCard"></a></li><li><a href="#wideseriesstatcard" class="table-of-contents__link">WideSeriesStatCard <a name="h2o_wave.types.WideSeriesStatCard"></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/b999a6e4.b163bfee.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/api/ui/index.html b/docs/docs/api/ui/index.html
index 383292a897..45f9b1a2da 100644
--- a/docs/docs/api/ui/index.html
+++ b/docs/docs/api/ui/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Module h2o_wave.ui | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Module h2o_wave.ui | H2O Wave"><meta data-react-helmet="true" name="description" content="Functions"><meta data-react-helmet="true" property="og:description" content="Functions"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/api/ui"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/api/ui"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/f151ab1a.f861a152.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/f151ab1a.efb732bc.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Module h2o_wave.ui</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="functions"></a>Functions<a aria-hidden="true" tabindex="-1" class="hash-link" href="#functions" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="breadcrumb"></a>breadcrumb <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.breadcrumb"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#breadcrumb" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">breadcrumb</span>(name: str, label: str) ‑&gt; <a title="h2o_wave.types.Breadcrumb" href="/wave/docs/api/types#h2o_wave.types.Breadcrumb">Breadcrumb</a></div><div class="api__description"><p>Create a breadcrumb for a <a title="h2o_wave.types.BreadcrumbsCard" href="/wave/docs/api/types#h2o_wave.types.BreadcrumbsCard">BreadcrumbsCard</a>.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>The name of this item. Prefix the name with a &#x27;#&#x27; to trigger hash-change navigation.</dd><dt><code>label</code></dt><dd>The label to display.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Breadcrumb" href="/wave/docs/api/types#h2o_wave.types.Breadcrumb">Breadcrumb</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="breadcrumbs_card"></a>breadcrumbs_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.breadcrumbs_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#breadcrumbs_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">breadcrumbs_card</span>(box: str, items: List[<a title="h2o_wave.types.Breadcrumb" href="/wave/docs/api/types#h2o_wave.types.Breadcrumb">Breadcrumb</a>], commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.BreadcrumbsCard" href="/wave/docs/api/types#h2o_wave.types.BreadcrumbsCard">BreadcrumbsCard</a></div><div class="api__description"><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>items</code></dt><dd>A list of <a title="h2o_wave.types.Breadcrumb" href="/wave/docs/api/types#h2o_wave.types.Breadcrumb">Breadcrumb</a> instances to display. See <a href="#h2o_wave.ui.breadcrumb" title="h2o_wave.ui.breadcrumb">breadcrumb()</a></dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.BreadcrumbsCard" href="/wave/docs/api/types#h2o_wave.types.BreadcrumbsCard">BreadcrumbsCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="button"></a>button <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.button"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#button" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">button</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a button.</p><p>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.</p><p>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.</p><p>Buttons may be placed within a &quot;buttons&quot; component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component. If the name is prefixed with a &#x27;#&#x27;, the button sets the location hash to the name when clicked.</dd><dt><code>label</code></dt><dd>The text displayed on the button.</dd><dt><code>caption</code></dt><dd>The caption displayed below the label. Setting a caption renders a compound button.</dd><dt><code>value</code></dt><dd>A value for this button. If a value is set, it is used for the button&#x27;s submitted instead of a boolean True.</dd><dt><code>primary</code></dt><dd>True if the button should be rendered as the primary button in the set.</dd><dt><code>disabled</code></dt><dd>True if the button should be disabled.</dd><dt><code>link</code></dt><dd>True if the button should be rendered as link text and not a standard button.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Button" href="/wave/docs/api/types#h2o_wave.types.Button">Button</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="buttons"></a>buttons <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.buttons"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#buttons" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">buttons</span>(items: List[<a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a>], justify: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a set of buttons to be layed out horizontally.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>items</code></dt><dd>The button in this set.</dd><dt><code>justify</code></dt><dd>Specifies how to lay out buttons horizontally. One of &#x27;start&#x27;, &#x27;end&#x27;, &#x27;center&#x27;, &#x27;between&#x27;, &#x27;around&#x27;.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Buttons" href="/wave/docs/api/types#h2o_wave.types.Buttons">Buttons</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="checkbox"></a>checkbox <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.checkbox"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#checkbox" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">checkbox</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a checkbox.</p><p>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.</p><p>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.</p><p>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.</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the checkbox.</dd><dt><code>value</code></dt><dd>True if selected, False if unselected.</dd><dt><code>indeterminate</code></dt><dd>True if the selection is indeterminate (neither selected nor unselected).</dd><dt><code>disabled</code></dt><dd>True if the checkbox is disabled.</dd><dt><code>trigger</code></dt><dd>True if the form should be submitted when the checkbox value changes.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Checkbox" href="/wave/docs/api/types#h2o_wave.types.Checkbox">Checkbox</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="checklist"></a>checklist <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.checklist"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#checklist" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">checklist</span>(name: str, label: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, choices: Union[List[<a title="h2o_wave.types.Choice" href="/wave/docs/api/types#h2o_wave.types.Choice">Choice</a>], NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed above the component.</dd><dt><code>values</code></dt><dd>The names of the selected choices.</dd><dt><code>choices</code></dt><dd>The choices to be presented.</dd><dt><code>trigger</code></dt><dd>True if the form should be submitted when the checklist value changes.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Checklist" href="/wave/docs/api/types#h2o_wave.types.Checklist">Checklist</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="choice"></a>choice <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.choice"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#choice" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">choice</span>(name: str, label: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Choice" href="/wave/docs/api/types#h2o_wave.types.Choice">Choice</a></div><div class="api__description"><p>Create a choice for a checklist, choice group or dropdown.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>disabled</code></dt><dd>True if the checkbox is disabled.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Choice" href="/wave/docs/api/types#h2o_wave.types.Choice">Choice</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="choice_group"></a>choice_group <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.choice_group"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#choice_group" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">choice_group</span>(name: str, label: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[<a title="h2o_wave.types.Choice" href="/wave/docs/api/types#h2o_wave.types.Choice">Choice</a>], NoneType] = None, required: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>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.</p><p>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.</p><p>If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for &quot;I agree&quot; instead of choice group buttons for &quot;I agree&quot; and &quot;I don&#x27;t agree.&quot;</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>value</code></dt><dd>The name of the selected choice.</dd><dt><code>choices</code></dt><dd>The choices to be presented.</dd><dt><code>required</code></dt><dd>True if this field is required.</dd><dt><code>trigger</code></dt><dd>True if the form should be submitted when the selection changes.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.ChoiceGroup" href="/wave/docs/api/types#h2o_wave.types.ChoiceGroup">ChoiceGroup</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="color_picker"></a>color_picker <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.color_picker"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#color_picker" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">color_picker</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a color picker.</p><p>A date picker allows a user to pick a color value. If the &#x27;choices&#x27; parameter is set, a swatch picker is displayed instead of the standard color picker.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>value</code></dt><dd>The selected color (CSS-compatible string)</dd><dt><code>choices</code></dt><dd>A list of colors (CSS-compatible strings) to limit color choices to.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.ColorPicker" href="/wave/docs/api/types#h2o_wave.types.ColorPicker">ColorPicker</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="combobox"></a>combobox <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.combobox"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#combobox" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">combobox</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a combobox.</p><p>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.</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>placeholder</code></dt><dd>A string that provides a brief hint to the user as to what kind of information is expected in the field.</dd><dt><code>value</code></dt><dd>The name of the selected choice.</dd><dt><code>choices</code></dt><dd>The choices to be presented.</dd><dt><code>error</code></dt><dd>Text to be displayed as an error below the text box.</dd><dt><code>disabled</code></dt><dd>True if this field is disabled.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Combobox" href="/wave/docs/api/types#h2o_wave.types.Combobox">Combobox</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="command"></a>command <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.command"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#command" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">command</span>(name: str, label: Union[str, NoneType] = None, caption: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, items: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None, data: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a></div><div class="api__description"><p>Create a command.</p><p>Commands are typically displayed as context menu items or toolbar button.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component. If the name is prefixed with a &#x27;#&#x27;, the command sets the location hash to the name when executed.</dd><dt><code>label</code></dt><dd>The text displayed for this command.</dd><dt><code>caption</code></dt><dd>The caption for this command (typically a tooltip).</dd><dt><code>icon</code></dt><dd>The icon to be displayed for this command.</dd><dt><code>items</code></dt><dd>Sub-commands, if any</dd><dt><code>data</code></dt><dd>Data associated with this command, if any.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="component"></a>component <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.component"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#component" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">component</span>(text: Union[<a title="h2o_wave.types.Text" href="/wave/docs/api/types#h2o_wave.types.Text">Text</a>, NoneType] = None, text_xl: Union[<a title="h2o_wave.types.TextXl" href="/wave/docs/api/types#h2o_wave.types.TextXl">TextXl</a>, NoneType] = None, text_l: Union[<a title="h2o_wave.types.TextL" href="/wave/docs/api/types#h2o_wave.types.TextL">TextL</a>, NoneType] = None, text_m: Union[<a title="h2o_wave.types.TextM" href="/wave/docs/api/types#h2o_wave.types.TextM">TextM</a>, NoneType] = None, text_s: Union[<a title="h2o_wave.types.TextS" href="/wave/docs/api/types#h2o_wave.types.TextS">TextS</a>, NoneType] = None, text_xs: Union[<a title="h2o_wave.types.TextXs" href="/wave/docs/api/types#h2o_wave.types.TextXs">TextXs</a>, NoneType] = None, label: Union[<a title="h2o_wave.types.Label" href="/wave/docs/api/types#h2o_wave.types.Label">Label</a>, NoneType] = None, separator: Union[<a title="h2o_wave.types.Separator" href="/wave/docs/api/types#h2o_wave.types.Separator">Separator</a>, NoneType] = None, progress: Union[<a title="h2o_wave.types.Progress" href="/wave/docs/api/types#h2o_wave.types.Progress">Progress</a>, NoneType] = None, message_bar: Union[<a title="h2o_wave.types.MessageBar" href="/wave/docs/api/types#h2o_wave.types.MessageBar">MessageBar</a>, NoneType] = None, textbox: Union[<a title="h2o_wave.types.Textbox" href="/wave/docs/api/types#h2o_wave.types.Textbox">Textbox</a>, NoneType] = None, checkbox: Union[<a title="h2o_wave.types.Checkbox" href="/wave/docs/api/types#h2o_wave.types.Checkbox">Checkbox</a>, NoneType] = None, toggle: Union[<a title="h2o_wave.types.Toggle" href="/wave/docs/api/types#h2o_wave.types.Toggle">Toggle</a>, NoneType] = None, choice_group: Union[<a title="h2o_wave.types.ChoiceGroup" href="/wave/docs/api/types#h2o_wave.types.ChoiceGroup">ChoiceGroup</a>, NoneType] = None, checklist: Union[<a title="h2o_wave.types.Checklist" href="/wave/docs/api/types#h2o_wave.types.Checklist">Checklist</a>, NoneType] = None, dropdown: Union[<a title="h2o_wave.types.Dropdown" href="/wave/docs/api/types#h2o_wave.types.Dropdown">Dropdown</a>, NoneType] = None, combobox: Union[<a title="h2o_wave.types.Combobox" href="/wave/docs/api/types#h2o_wave.types.Combobox">Combobox</a>, NoneType] = None, slider: Union[<a title="h2o_wave.types.Slider" href="/wave/docs/api/types#h2o_wave.types.Slider">Slider</a>, NoneType] = None, spinbox: Union[<a title="h2o_wave.types.Spinbox" href="/wave/docs/api/types#h2o_wave.types.Spinbox">Spinbox</a>, NoneType] = None, date_picker: Union[<a title="h2o_wave.types.DatePicker" href="/wave/docs/api/types#h2o_wave.types.DatePicker">DatePicker</a>, NoneType] = None, color_picker: Union[<a title="h2o_wave.types.ColorPicker" href="/wave/docs/api/types#h2o_wave.types.ColorPicker">ColorPicker</a>, NoneType] = None, button: Union[<a title="h2o_wave.types.Button" href="/wave/docs/api/types#h2o_wave.types.Button">Button</a>, NoneType] = None, buttons: Union[<a title="h2o_wave.types.Buttons" href="/wave/docs/api/types#h2o_wave.types.Buttons">Buttons</a>, NoneType] = None, file_upload: Union[<a title="h2o_wave.types.FileUpload" href="/wave/docs/api/types#h2o_wave.types.FileUpload">FileUpload</a>, NoneType] = None, table: Union[<a title="h2o_wave.types.Table" href="/wave/docs/api/types#h2o_wave.types.Table">Table</a>, NoneType] = None, link: Union[<a title="h2o_wave.types.Link" href="/wave/docs/api/types#h2o_wave.types.Link">Link</a>, NoneType] = None, tabs: Union[<a title="h2o_wave.types.Tabs" href="/wave/docs/api/types#h2o_wave.types.Tabs">Tabs</a>, NoneType] = None, expander: Union[<a title="h2o_wave.types.Expander" href="/wave/docs/api/types#h2o_wave.types.Expander">Expander</a>, NoneType] = None, frame: Union[<a title="h2o_wave.types.Frame" href="/wave/docs/api/types#h2o_wave.types.Frame">Frame</a>, NoneType] = None, markup: Union[<a title="h2o_wave.types.Markup" href="/wave/docs/api/types#h2o_wave.types.Markup">Markup</a>, NoneType] = None, template: Union[<a title="h2o_wave.types.Template" href="/wave/docs/api/types#h2o_wave.types.Template">Template</a>, NoneType] = None, picker: Union[<a title="h2o_wave.types.Picker" href="/wave/docs/api/types#h2o_wave.types.Picker">Picker</a>, NoneType] = None, range_slider: Union[<a title="h2o_wave.types.RangeSlider" href="/wave/docs/api/types#h2o_wave.types.RangeSlider">RangeSlider</a>, NoneType] = None, stepper: Union[<a title="h2o_wave.types.Stepper" href="/wave/docs/api/types#h2o_wave.types.Stepper">Stepper</a>, NoneType] = None, visualization: Union[<a title="h2o_wave.types.Visualization" href="/wave/docs/api/types#h2o_wave.types.Visualization">Visualization</a>, NoneType] = None, vega_visualization: Union[<a title="h2o_wave.types.VegaVisualization" href="/wave/docs/api/types#h2o_wave.types.VegaVisualization">VegaVisualization</a>, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a component.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>text</code></dt><dd>Text block.</dd><dt><code>text_xl</code></dt><dd>Extra-large sized text block.</dd><dt><code>text_l</code></dt><dd>Large sized text block.</dd><dt><code>text_m</code></dt><dd>Medium sized text block.</dd><dt><code>text_s</code></dt><dd>Small sized text block.</dd><dt><code>text_xs</code></dt><dd>Extra-small sized text block.</dd><dt><code>label</code></dt><dd>Label.</dd><dt><code>separator</code></dt><dd>Separator.</dd><dt><code>progress</code></dt><dd>Progress bar.</dd><dt><code>message_bar</code></dt><dd>Message bar.</dd><dt><code>textbox</code></dt><dd>Textbox.</dd><dt><code>checkbox</code></dt><dd>Checkbox.</dd><dt><code>toggle</code></dt><dd>Toggle.</dd><dt><code>choice_group</code></dt><dd>Choice group.</dd><dt><code>checklist</code></dt><dd>Checklist.</dd><dt><code>dropdown</code></dt><dd>Dropdown.</dd><dt><code>combobox</code></dt><dd>Combobox.</dd><dt><code>slider</code></dt><dd>Slider.</dd><dt><code>spinbox</code></dt><dd>Spinbox.</dd><dt><code>date_picker</code></dt><dd>Date picker.</dd><dt><code>color_picker</code></dt><dd>Color picker.</dd><dt><code>button</code></dt><dd>Button.</dd><dt><code>buttons</code></dt><dd>Button set.</dd><dt><code>file_upload</code></dt><dd>File upload.</dd><dt><code>table</code></dt><dd>Table.</dd><dt><code>link</code></dt><dd>Link.</dd><dt><code>tabs</code></dt><dd>Tabs.</dd><dt><code>expander</code></dt><dd>Expander.</dd><dt><code>frame</code></dt><dd>Frame.</dd><dt><code>markup</code></dt><dd>Markup</dd><dt><code>template</code></dt><dd>Template</dd><dt><code>picker</code></dt><dd>Picker.</dd><dt><code>range_slider</code></dt><dd>Range Slider.</dd><dt><code>stepper</code></dt><dd>Stepper.</dd><dt><code>visualization</code></dt><dd>Visualization.</dd><dt><code>vega_visualization</code></dt><dd>Vega-lite Visualization.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="date_picker"></a>date_picker <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.date_picker"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#date_picker" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">date_picker</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a date picker.</p><p>A date picker allows a user to pick a date value.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>placeholder</code></dt><dd>A string that provides a brief hint to the user as to what kind of information is expected in the field.</dd><dt><code>value</code></dt><dd>The date value in YYYY-MM-DD format.</dd><dt><code>disabled</code></dt><dd>True if this field is disabled.</dd><dt><code>trigger</code></dt><dd>True if the form should be submitted when the datepicker value changes.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.DatePicker" href="/wave/docs/api/types#h2o_wave.types.DatePicker">DatePicker</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dropdown"></a>dropdown <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.dropdown"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dropdown" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">dropdown</span>(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[<a title="h2o_wave.types.Choice" href="/wave/docs/api/types#h2o_wave.types.Choice">Choice</a>], 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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a dropdown.</p><p>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.</p><p>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.</p><p>Note: Use either the &#x27;value&#x27; parameter or the &#x27;values&#x27; parameter. Setting the &#x27;values&#x27; parameter renders a multi-select dropdown.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>placeholder</code></dt><dd>A string that provides a brief hint to the user as to what kind of information is expected in the field.</dd><dt><code>value</code></dt><dd>The name of the selected choice.</dd><dt><code>values</code></dt><dd>The names of the selected choices. If this parameter is set, multiple selections will be allowed.</dd><dt><code>choices</code></dt><dd>The choices to be presented.</dd><dt><code>required</code></dt><dd>True if this is a required field.</dd><dt><code>disabled</code></dt><dd>True if this field is disabled.</dd><dt><code>trigger</code></dt><dd>True if the form should be submitted when the dropdown value changes.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Dropdown" href="/wave/docs/api/types#h2o_wave.types.Dropdown">Dropdown</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="expander"></a>expander <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.expander"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#expander" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">expander</span>(name: str, label: Union[str, NoneType] = None, expanded: Union[bool, NoneType] = None, items: Union[List[<a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a>], NoneType] = None, visible: Union[bool, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Creates a new expander.</p><p>Expanders can be used to show or hide a group of related components.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>The text displayed on the expander.</dd><dt><code>expanded</code></dt><dd>True if expanded, False if collapsed.</dd><dt><code>items</code></dt><dd>List of components to be hideable by the expander.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Expander" href="/wave/docs/api/types#h2o_wave.types.Expander">Expander</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="file_upload"></a>file_upload <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.file_upload"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#file_upload" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">file_upload</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a file upload component. A file upload component allows a user to browse, select and upload one or more files.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>multiple</code></dt><dd>True if the component should allow multiple files to be uploaded.</dd><dt><code>file_extensions</code></dt><dd>List of allowed file extensions, e.g. <code>pdf</code>, <code>docx</code>, etc.</dd><dt><code>max_file_size</code></dt><dd>Maximum allowed size (Mb) per file. Defaults to no limit.</dd><dt><code>max_size</code></dt><dd>Maximum allowed size (Mb) for all files combined. Defaults to no limit.</dd><dt><code>height</code></dt><dd>The height of the file upload, e.g. &#x27;400px&#x27;, &#x27;50%&#x27;, etc.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.FileUpload" href="/wave/docs/api/types#h2o_wave.types.FileUpload">FileUpload</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="flex_card"></a>flex_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.flex_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#flex_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">flex_card</span>(box: str, item_view: str, item_props: Union[dict, str], data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str], direction: Union[str, NoneType] = None, justify: Union[str, NoneType] = None, align: Union[str, NoneType] = None, wrap: Union[str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.FlexCard" href="/wave/docs/api/types#h2o_wave.types.FlexCard">FlexCard</a></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>item_view</code></dt><dd>The child card type.</dd><dt><code>item_props</code></dt><dd>The child card properties.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>direction</code></dt><dd>Layout direction. One of &#x27;horizontal&#x27;, &#x27;vertical&#x27;.</dd><dt><code>justify</code></dt><dd>Layout strategy for main axis. One of &#x27;start&#x27;, &#x27;end&#x27;, &#x27;center&#x27;, &#x27;between&#x27;, &#x27;around&#x27;.</dd><dt><code>align</code></dt><dd>Layout strategy for cross axis. One of &#x27;start&#x27;, &#x27;end&#x27;, &#x27;center&#x27;, &#x27;baseline&#x27;, &#x27;stretch&#x27;.</dd><dt><code>wrap</code></dt><dd>Wrapping strategy. One of &#x27;start&#x27;, &#x27;end&#x27;, &#x27;center&#x27;, &#x27;between&#x27;, &#x27;around&#x27;, &#x27;stretch&#x27;.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.FlexCard" href="/wave/docs/api/types#h2o_wave.types.FlexCard">FlexCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="form_card"></a>form_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.form_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#form_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">form_card</span>(box: str, items: Union[List[<a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a>], str], commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.FormCard" href="/wave/docs/api/types#h2o_wave.types.FormCard">FormCard</a></div><div class="api__description"><p>Create a form.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>items</code></dt><dd>The components in this form.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.FormCard" href="/wave/docs/api/types#h2o_wave.types.FormCard">FormCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="frame"></a>frame <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.frame"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#frame" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">frame</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a new inline frame (an <code>iframe</code>).</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>path</code></dt><dd>The path or URL of the web page, e.g. <code>/foo.html</code> or <code>http://example.com/foo.html</code></dd><dt><code>content</code></dt><dd>The HTML content of the page. A string containing <code>&lt;html&gt;...&lt;/html&gt;</code>.</dd><dt><code>width</code></dt><dd>The width of the frame, e.g. <code>200px</code>, <code>50%</code>, etc. Defaults to <code>100%</code>.</dd><dt><code>height</code></dt><dd>The height of the frame, e.g. <code>200px</code>, <code>50%</code>, etc. Defaults to <code>150px</code>.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Frame" href="/wave/docs/api/types#h2o_wave.types.Frame">Frame</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="frame_card"></a>frame_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.frame_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#frame_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">frame_card</span>(box: str, title: str, path: Union[str, NoneType] = None, content: Union[str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.FrameCard" href="/wave/docs/api/types#h2o_wave.types.FrameCard">FrameCard</a></div><div class="api__description"><p>Render a card containing a HTML page inside an inline frame (an <code>iframe</code>).</p><p>Either a path or content can be provided as arguments.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The title for this card.</dd><dt><code>path</code></dt><dd>The path or URL of the web page, e.g. <code>/foo.html</code> or <code>http://example.com/foo.html</code></dd><dt><code>content</code></dt><dd>The HTML content of the page. A string containing <code>&lt;html&gt;...&lt;/html&gt;</code></dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.FrameCard" href="/wave/docs/api/types#h2o_wave.types.FrameCard">FrameCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="graphics_card"></a>graphics_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.graphics_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#graphics_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">graphics_card</span>(box: str, view_box: str, stage: Union[List[dict], str, NoneType] = None, scene: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.GraphicsCard" href="/wave/docs/api/types#h2o_wave.types.GraphicsCard">GraphicsCard</a></div><div class="api__description"><p>Create a card for displaying vector graphics.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>view_box</code></dt><dd>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, &#x27;0 0 400 300&#x27;. See: <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox</a></dd><dt><code>stage</code></dt><dd>Background layer for rendering static SVG elements. Must be packed to conserve memory.</dd><dt><code>scene</code></dt><dd>Foreground layer for rendering dynamic SVG elements.</dd><dt><code>width</code></dt><dd>The displayed width of the rectangular viewport. (Not the width of its coordinate system.)</dd><dt><code>height</code></dt><dd>The displayed height of the rectangular viewport. (Not the height of its coordinate system.)</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.GraphicsCard" href="/wave/docs/api/types#h2o_wave.types.GraphicsCard">GraphicsCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="grid_card"></a>grid_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.grid_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#grid_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">grid_card</span>(box: str, title: str, cells: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str], data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str], commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.GridCard" href="/wave/docs/api/types#h2o_wave.types.GridCard">GridCard</a></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>EXPERIMENTAL. DO NOT USE.</dd><dt><code>cells</code></dt><dd>EXPERIMENTAL. DO NOT USE.</dd><dt><code>data</code></dt><dd>EXPERIMENTAL. DO NOT USE.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.GridCard" href="/wave/docs/api/types#h2o_wave.types.GridCard">GridCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="header_card"></a>header_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.header_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#header_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">header_card</span>(box: str, title: str, subtitle: str, icon: Union[str, NoneType] = None, icon_color: Union[str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.HeaderCard" href="/wave/docs/api/types#h2o_wave.types.HeaderCard">HeaderCard</a></div><div class="api__description"><p>Render a card containing a HTML page inside an inline frame (iframe).</p><p>Either a path or content can be provided as arguments.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The title.</dd><dt><code>subtitle</code></dt><dd>The subtitle, displayed below the title.</dd><dt><code>icon</code></dt><dd>The icon type, displayed to the left.</dd><dt><code>icon_color</code></dt><dd>The icon&#x27;s color.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.HeaderCard" href="/wave/docs/api/types#h2o_wave.types.HeaderCard">HeaderCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="icon_table_cell_type"></a>icon_table_cell_type <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.icon_table_cell_type"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#icon_table_cell_type" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">icon_table_cell_type</span>(color: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.TableCellType" href="/wave/docs/api/types#h2o_wave.types.TableCellType">TableCellType</a></div><div class="api__description"><p>Create a cell type that renders a column&#x27;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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>color</code></dt><dd>Icon color.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.IconTableCellType" href="/wave/docs/api/types#h2o_wave.types.IconTableCellType">IconTableCellType</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="image_card"></a>image_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.image_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#image_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">image_card</span>(box: str, title: str, type: str, image: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.ImageCard" href="/wave/docs/api/types#h2o_wave.types.ImageCard">ImageCard</a></div><div class="api__description"><p>Create a card that displays a base64-encoded image.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The card&#x27;s title.</dd><dt><code>type</code></dt><dd>The image MIME subtype. One of <code>apng</code>, <code>bmp</code>, <code>gif</code>, <code>x-icon</code>, <code>jpeg</code>, <code>png</code>, <code>webp</code>.</dd><dt><code>image</code></dt><dd>Image data, base64-encoded.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.ImageCard" href="/wave/docs/api/types#h2o_wave.types.ImageCard">ImageCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="label"></a>label <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.label"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#label" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">label</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a label.</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>label</code></dt><dd>The text displayed on the label.</dd><dt><code>required</code></dt><dd>True if the field is required.</dd><dt><code>disabled</code></dt><dd>True if the label should be disabled.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Label" href="/wave/docs/api/types#h2o_wave.types.Label">Label</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="large_bar_stat_card"></a>large_bar_stat_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.large_bar_stat_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#large_bar_stat_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">large_bar_stat_card</span>(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[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.LargeBarStatCard" href="/wave/docs/api/types#h2o_wave.types.LargeBarStatCard">LargeBarStatCard</a></div><div class="api__description"><p>Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The card&#x27;s title.</dd><dt><code>caption</code></dt><dd>The card&#x27;s caption.</dd><dt><code>value</code></dt><dd>The primary value displayed.</dd><dt><code>aux_value</code></dt><dd>The auxiliary value, typically a target value.</dd><dt><code>value_caption</code></dt><dd>The caption displayed below the primary value.</dd><dt><code>aux_value_caption</code></dt><dd>The caption displayed below the auxiliary value.</dd><dt><code>progress</code></dt><dd>The value of the progress bar, between 0 and 1.</dd><dt><code>plot_color</code></dt><dd>The color of the progress bar.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.LargeBarStatCard" href="/wave/docs/api/types#h2o_wave.types.LargeBarStatCard">LargeBarStatCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="large_stat_card"></a>large_stat_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.large_stat_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#large_stat_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">large_stat_card</span>(box: str, title: str, value: str, aux_value: str, caption: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.LargeStatCard" href="/wave/docs/api/types#h2o_wave.types.LargeStatCard">LargeStatCard</a></div><div class="api__description"><p>Create a stat card displaying a primary value, an auxiliary value and a caption.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The card&#x27;s title.</dd><dt><code>value</code></dt><dd>The primary value displayed.</dd><dt><code>aux_value</code></dt><dd>The auxiliary value displayed next to the primary value.</dd><dt><code>caption</code></dt><dd>The caption displayed below the primary value.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.LargeStatCard" href="/wave/docs/api/types#h2o_wave.types.LargeStatCard">LargeStatCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="link"></a>link <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.link"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#link" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">link</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a hyperlink.</p><p>Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a <code>/</code> and point to URLs within the Q UI. All other kinds of paths are treated as external hyperlinks.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>label</code></dt><dd>The text to be displayed. If blank, the <code>path</code> is used as the label.</dd><dt><code>path</code></dt><dd>The path or URL to link to.</dd><dt><code>disabled</code></dt><dd>True if the link should be disabled.</dd><dt><code>download</code></dt><dd>True if the link should be used for file download.</dd><dt><code>button</code></dt><dd>True if the link should be rendered as a button.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Link" href="/wave/docs/api/types#h2o_wave.types.Link">Link</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="list_card"></a>list_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.list_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#list_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">list_card</span>(box: str, title: str, item_view: str, item_props: Union[dict, str], data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str], commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.ListCard" href="/wave/docs/api/types#h2o_wave.types.ListCard">ListCard</a></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom).</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The title for this card.</dd><dt><code>item_view</code></dt><dd>The child card type.</dd><dt><code>item_props</code></dt><dd>The child card properties.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.ListCard" href="/wave/docs/api/types#h2o_wave.types.ListCard">ListCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="list_item1_card"></a>list_item1_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.list_item1_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#list_item1_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">list_item1_card</span>(box: str, title: str, caption: str, value: str, aux_value: str, data: Union[dict, str], commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.ListItem1Card" href="/wave/docs/api/types#h2o_wave.types.ListItem1Card">ListItem1Card</a></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>EXPERIMENTAL. DO NOT USE.</dd><dt><code>caption</code></dt><dd>EXPERIMENTAL. DO NOT USE.</dd><dt><code>value</code></dt><dd>EXPERIMENTAL. DO NOT USE.</dd><dt><code>aux_value</code></dt><dd>EXPERIMENTAL. DO NOT USE.</dd><dt><code>data</code></dt><dd>EXPERIMENTAL. DO NOT USE.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.ListItem1Card" href="/wave/docs/api/types#h2o_wave.types.ListItem1Card">ListItem1Card</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="mark"></a>mark <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.mark"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#mark" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">mark</span>(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) ‑&gt; <a title="h2o_wave.types.Mark" href="/wave/docs/api/types#h2o_wave.types.Mark">Mark</a></div><div class="api__description"><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>coord</code></dt><dd>Coordinate system. <code>rect</code> is synonymous to <code>cartesian</code>. <code>theta</code> is transposed <code>polar</code>. One of &#x27;rect&#x27;, &#x27;cartesian&#x27;, &#x27;polar&#x27;, &#x27;theta&#x27;, &#x27;helix&#x27;.</dd><dt><code>type</code></dt><dd>Graphical geometry. One of &#x27;interval&#x27;, &#x27;line&#x27;, &#x27;path&#x27;, &#x27;point&#x27;, &#x27;area&#x27;, &#x27;polygon&#x27;, &#x27;schema&#x27;, &#x27;edge&#x27;, &#x27;heatmap&#x27;.</dd><dt><code>x</code></dt><dd>X field or value.</dd><dt><code>x0</code></dt><dd>X base field or value.</dd><dt><code>x1</code></dt><dd>X bin lower bound field or value. For histograms.</dd><dt><code>x2</code></dt><dd>X bin upper bound field or value. For histograms.</dd><dt><code>x_min</code></dt><dd>X axis scale minimum.</dd><dt><code>x_max</code></dt><dd>X axis scale maximum.</dd><dt><code>x_nice</code></dt><dd>Whether to nice X axis scale ticks.</dd><dt><code>x_scale</code></dt><dd>X axis scale type. One of &#x27;linear&#x27;, &#x27;cat&#x27;, &#x27;category&#x27;, &#x27;identity&#x27;, &#x27;log&#x27;, &#x27;pow&#x27;, &#x27;time&#x27;, &#x27;timeCat&#x27;, &#x27;quantize&#x27;, &#x27;quantile&#x27;.</dd><dt><code>x_title</code></dt><dd>X axis title.</dd><dt><code>y</code></dt><dd>Y field or value.</dd><dt><code>y0</code></dt><dd>Y base field or value.</dd><dt><code>y1</code></dt><dd>Y bin lower bound field or value. For histograms.</dd><dt><code>y2</code></dt><dd>Y bin upper bound field or value. For histograms.</dd><dt><code>y_min</code></dt><dd>Y axis scale minimum.</dd><dt><code>y_max</code></dt><dd>Y axis scale maximum.</dd><dt><code>y_nice</code></dt><dd>Whether to nice Y axis scale ticks.</dd><dt><code>y_scale</code></dt><dd>Y axis scale type. One of &#x27;linear&#x27;, &#x27;cat&#x27;, &#x27;category&#x27;, &#x27;identity&#x27;, &#x27;log&#x27;, &#x27;pow&#x27;, &#x27;time&#x27;, &#x27;timeCat&#x27;, &#x27;quantize&#x27;, &#x27;quantile&#x27;.</dd><dt><code>y_title</code></dt><dd>Y axis title.</dd><dt><code>color</code></dt><dd>Mark color field or value.</dd><dt><code>color_range</code></dt><dd>Mark color range for multi-series plots. A string containing space-separated colors, e.g. <code>&#x27;#fee8c8 #fdbb84 #e34a33&#x27;</code></dd><dt><code>color_domain</code></dt><dd>The unique values in the data (labels or categories or classes) to map colors to, e.g. <code>[&#x27;high&#x27;, &#x27;medium&#x27;, &#x27;low&#x27;]</code>. If this is not provided, the unique values are automatically inferred from the <code>color</code> attribute.</dd><dt><code>shape</code></dt><dd>Mark shape field or value for <code>point</code> mark types. Possible values are &#x27;circle&#x27;, &#x27;square&#x27;, &#x27;bowtie&#x27;, &#x27;diamond&#x27;, &#x27;hexagon&#x27;, &#x27;triangle&#x27;, &#x27;triangle-down&#x27;, &#x27;cross&#x27;, &#x27;tick&#x27;, &#x27;plus&#x27;, &#x27;hyphen&#x27;, &#x27;line&#x27;.</dd><dt><code>shape_range</code></dt><dd>Mark shape range for multi-series plots using <code>point</code> mark types. A string containing space-separated shapes, e.g. <code>&#x27;circle square diamond&#x27;</code></dd><dt><code>size</code></dt><dd>Mark size field or value.</dd><dt><code>size_range</code></dt><dd>Mark size range. A string containing space-separated integers, e.g. <code>&#x27;4 30&#x27;</code></dd><dt><code>stack</code></dt><dd>Field to stack marks by, or &#x27;auto&#x27; to infer.</dd><dt><code>dodge</code></dt><dd>Field to dodge marks by, or &#x27;auto&#x27; to infer.</dd><dt><code>curve</code></dt><dd>Curve type for <code>line</code> and <code>area</code> mark types. One of &#x27;none&#x27;, &#x27;smooth&#x27;, &#x27;step-before&#x27;, &#x27;step&#x27;, &#x27;step-after&#x27;.</dd><dt><code>fill_color</code></dt><dd>Mark fill color.</dd><dt><code>fill_opacity</code></dt><dd>Mark fill opacity.</dd><dt><code>stroke_color</code></dt><dd>Mark stroke color.</dd><dt><code>stroke_opacity</code></dt><dd>Mark stroke opacity.</dd><dt><code>stroke_size</code></dt><dd>Mark stroke size.</dd><dt><code>stroke_dash</code></dt><dd>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].</dd><dt><code>label</code></dt><dd>Label field or value.</dd><dt><code>label_offset</code></dt><dd>Distance between label and mark.</dd><dt><code>label_offset_x</code></dt><dd>Horizontal distance between label and mark.</dd><dt><code>label_offset_y</code></dt><dd>Vertical distance between label and mark.</dd><dt><code>label_rotation</code></dt><dd>Label rotation angle, in degrees, or &#x27;none&#x27; to disable automatic rotation. The default behavior is &#x27;auto&#x27; for automatic rotation.</dd><dt><code>label_position</code></dt><dd>Label position relative to the mark. One of &#x27;top&#x27;, &#x27;bottom&#x27;, &#x27;middle&#x27;, &#x27;left&#x27;, &#x27;right&#x27;.</dd><dt><code>label_overlap</code></dt><dd>Strategy to use if labels overlap. One of &#x27;hide&#x27;, &#x27;overlap&#x27;, &#x27;constrain&#x27;.</dd><dt><code>label_fill_color</code></dt><dd>Label fill color.</dd><dt><code>label_fill_opacity</code></dt><dd>Label fill opacity.</dd><dt><code>label_stroke_color</code></dt><dd>Label stroke color.</dd><dt><code>label_stroke_opacity</code></dt><dd>Label stroke opacity.</dd><dt><code>label_stroke_size</code></dt><dd>Label stroke size (line width or pen thickness).</dd><dt><code>label_font_size</code></dt><dd>Label font size.</dd><dt><code>label_font_weight</code></dt><dd>Label font weight.</dd><dt><code>label_line_height</code></dt><dd>Label line height.</dd><dt><code>label_align</code></dt><dd>Label text alignment. One of &#x27;left&#x27;, &#x27;right&#x27;, &#x27;center&#x27;, &#x27;start&#x27;, &#x27;end&#x27;.</dd><dt><code>ref_stroke_color</code></dt><dd>Reference line stroke color.</dd><dt><code>ref_stroke_opacity</code></dt><dd>Reference line stroke opacity.</dd><dt><code>ref_stroke_size</code></dt><dd>Reference line stroke size (line width or pen thickness).</dd><dt><code>ref_stroke_dash</code></dt><dd>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].</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Mark" href="/wave/docs/api/types#h2o_wave.types.Mark">Mark</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="markdown_card"></a>markdown_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.markdown_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#markdown_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">markdown_card</span>(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.MarkdownCard" href="/wave/docs/api/types#h2o_wave.types.MarkdownCard">MarkdownCard</a></div><div class="api__description"><p>Create a card that renders Markdown content.</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The title for this card.</dd><dt><code>content</code></dt><dd>The markdown content. Supports Github Flavored Markdown (GFM): <a href="https://guides.github.com/features/mastering-markdown/" target="_blank" rel="noopener noreferrer">https://guides.github.com/features/mastering-markdown/</a></dd><dt><code>data</code></dt><dd>Additional data for the card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.MarkdownCard" href="/wave/docs/api/types#h2o_wave.types.MarkdownCard">MarkdownCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="markup"></a>markup <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.markup"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#markup" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">markup</span>(content: str, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Render HTML content.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>content</code></dt><dd>The HTML content.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Markup" href="/wave/docs/api/types#h2o_wave.types.Markup">Markup</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="markup_card"></a>markup_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.markup_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#markup_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">markup_card</span>(box: str, title: str, content: str, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.MarkupCard" href="/wave/docs/api/types#h2o_wave.types.MarkupCard">MarkupCard</a></div><div class="api__description"><p>Render HTML content.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The title for this card.</dd><dt><code>content</code></dt><dd>The HTML content.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.MarkupCard" href="/wave/docs/api/types#h2o_wave.types.MarkupCard">MarkupCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="message_bar"></a>message_bar <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.message_bar"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#message_bar" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">message_bar</span>(type: Union[str, NoneType] = None, text: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a message bar.</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>type</code></dt><dd>The icon and color of the message bar. One of &#x27;info&#x27;, &#x27;error&#x27;, &#x27;warning&#x27;, &#x27;success&#x27;, &#x27;danger&#x27;, &#x27;blocked&#x27;.</dd><dt><code>text</code></dt><dd>The text displayed on the message bar.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.MessageBar" href="/wave/docs/api/types#h2o_wave.types.MessageBar">MessageBar</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="meta_card"></a>meta_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.meta_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#meta_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">meta_card</span>(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[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.MetaCard" href="/wave/docs/api/types#h2o_wave.types.MetaCard">MetaCard</a></div><div class="api__description"><p>Represents page-global state.</p><p>This card is invisible. It is used to control attributes of the active page.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The title of the page.</dd><dt><code>refresh</code></dt><dd>Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use).</dd><dt><code>notification</code></dt><dd>Display a desktop notification to the user.</dd><dt><code>redirect</code></dt><dd>Redirect the page to a new URL.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.MetaCard" href="/wave/docs/api/types#h2o_wave.types.MetaCard">MetaCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="nav_card"></a>nav_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.nav_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#nav_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">nav_card</span>(box: str, items: List[<a title="h2o_wave.types.NavGroup" href="/wave/docs/api/types#h2o_wave.types.NavGroup">NavGroup</a>], commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.NavCard" href="/wave/docs/api/types#h2o_wave.types.NavCard">NavCard</a></div><div class="api__description"><p>Create a card containing a navigation pane.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>items</code></dt><dd>The navigation groups contained in this pane.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.NavCard" href="/wave/docs/api/types#h2o_wave.types.NavCard">NavCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="nav_group"></a>nav_group <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.nav_group"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#nav_group" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">nav_group</span>(label: str, items: List[<a title="h2o_wave.types.NavItem" href="/wave/docs/api/types#h2o_wave.types.NavItem">NavItem</a>]) ‑&gt; <a title="h2o_wave.types.NavGroup" href="/wave/docs/api/types#h2o_wave.types.NavGroup">NavGroup</a></div><div class="api__description"><p>Create a group of navigation items.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>label</code></dt><dd>The label to display for this group.</dd><dt><code>items</code></dt><dd>The navigation items contained in this group.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.NavGroup" href="/wave/docs/api/types#h2o_wave.types.NavGroup">NavGroup</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="nav_item"></a>nav_item <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.nav_item"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#nav_item" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">nav_item</span>(name: str, label: str) ‑&gt; <a title="h2o_wave.types.NavItem" href="/wave/docs/api/types#h2o_wave.types.NavItem">NavItem</a></div><div class="api__description"><p>Create a navigation item.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>The name of this item. Prefix the name with a &#x27;#&#x27; to trigger hash-change navigation.</dd><dt><code>label</code></dt><dd>The label to display.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.NavItem" href="/wave/docs/api/types#h2o_wave.types.NavItem">NavItem</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="picker"></a>picker <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.picker"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#picker" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">picker</span>(name: str, choices: List[<a title="h2o_wave.types.Choice" href="/wave/docs/api/types#h2o_wave.types.Choice">Choice</a>], 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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>choices</code></dt><dd>The choices to be presented.</dd><dt><code>label</code></dt><dd>Text to be displayed above the component.</dd><dt><code>values</code></dt><dd>The names of the selected choices.</dd><dt><code>max_choices</code></dt><dd>Maximum number of selectable choices. Defaults to no limit.</dd><dt><code>disabled</code></dt><dd>Controls whether the picker should be disabled or not.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Picker" href="/wave/docs/api/types#h2o_wave.types.Picker">Picker</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="pixel_art_card"></a>pixel_art_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.pixel_art_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#pixel_art_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">pixel_art_card</span>(box: str, title: str, data: Union[dict, str], commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.PixelArtCard" href="/wave/docs/api/types#h2o_wave.types.PixelArtCard">PixelArtCard</a></div><div class="api__description"><p>Create a card displaying a collaborative Pixel art tool, just for kicks.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The title for this card.</dd><dt><code>data</code></dt><dd>The data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.PixelArtCard" href="/wave/docs/api/types#h2o_wave.types.PixelArtCard">PixelArtCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="plot"></a>plot <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.plot"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#plot" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">plot</span>(marks: List[<a title="h2o_wave.types.Mark" href="/wave/docs/api/types#h2o_wave.types.Mark">Mark</a>]) ‑&gt; <a title="h2o_wave.types.Plot" href="/wave/docs/api/types#h2o_wave.types.Plot">Plot</a></div><div class="api__description"><p>Create a plot. A plot is composed of one or more graphical mark layers.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>marks</code></dt><dd>The graphical mark layers contained in this plot.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Plot" href="/wave/docs/api/types#h2o_wave.types.Plot">Plot</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="plot_card"></a>plot_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.plot_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#plot_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">plot_card</span>(box: str, title: str, data: Union[dict, str], plot: <a title="h2o_wave.types.Plot" href="/wave/docs/api/types#h2o_wave.types.Plot">Plot</a>, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.PlotCard" href="/wave/docs/api/types#h2o_wave.types.PlotCard">PlotCard</a></div><div class="api__description"><p>Create a card displaying a plot.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The title for this card.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>plot</code></dt><dd>The plot to be displayed in this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.PlotCard" href="/wave/docs/api/types#h2o_wave.types.PlotCard">PlotCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="progress"></a>progress <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.progress"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#progress" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">progress</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a progress bar.</p><p>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.</p><p>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]</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>label</code></dt><dd>The text displayed above the bar.</dd><dt><code>caption</code></dt><dd>The text displayed below the bar.</dd><dt><code>value</code></dt><dd>The progress, between 0.0 and 1.0, or -1 (default) if indeterminate.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Progress" href="/wave/docs/api/types#h2o_wave.types.Progress">Progress</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="progress_table_cell_type"></a>progress_table_cell_type <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.progress_table_cell_type"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#progress_table_cell_type" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">progress_table_cell_type</span>(color: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.TableCellType" href="/wave/docs/api/types#h2o_wave.types.TableCellType">TableCellType</a></div><div class="api__description"><p>Create a cell type that renders a column&#x27;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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>color</code></dt><dd>Color of the progress arc.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.ProgressTableCellType" href="/wave/docs/api/types#h2o_wave.types.ProgressTableCellType">ProgressTableCellType</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="range_slider"></a>range_slider <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.range_slider"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#range_slider" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">range_slider</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a range slider.</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>min</code></dt><dd>The minimum value of the slider. Defaults to 0.</dd><dt><code>max</code></dt><dd>The maximum value of the slider. Defaults to 100.</dd><dt><code>step</code></dt><dd>The difference between two adjacent values of the slider.</dd><dt><code>min_value</code></dt><dd>The lower bound of the selected range.</dd><dt><code>max_value</code></dt><dd>The upper bound of the selected range.</dd><dt><code>disabled</code></dt><dd>True if this field is disabled.</dd><dt><code>trigger</code></dt><dd>True if the form should be submitted when the slider value changes.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.RangeSlider" href="/wave/docs/api/types#h2o_wave.types.RangeSlider">RangeSlider</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="repeat_card"></a>repeat_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.repeat_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#repeat_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">repeat_card</span>(box: str, item_view: str, item_props: Union[dict, str], data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str], commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.RepeatCard" href="/wave/docs/api/types#h2o_wave.types.RepeatCard">RepeatCard</a></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE. Create a card containing other cards.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>item_view</code></dt><dd>EXPERIMENTAL. DO NOT USE.</dd><dt><code>item_props</code></dt><dd>The child card properties.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.RepeatCard" href="/wave/docs/api/types#h2o_wave.types.RepeatCard">RepeatCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="separator"></a>separator <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.separator"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#separator" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">separator</span>(label: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a separator.</p><p>A separator visually separates content into groups.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>label</code></dt><dd>The text displayed on the separator.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Separator" href="/wave/docs/api/types#h2o_wave.types.Separator">Separator</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="slider"></a>slider <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.slider"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#slider" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">slider</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a slider.</p><p>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.</p><p>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.</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>min</code></dt><dd>The minimum value of the slider.</dd><dt><code>max</code></dt><dd>The maximum value of the slider.</dd><dt><code>step</code></dt><dd>The difference between two adjacent values of the slider.</dd><dt><code>value</code></dt><dd>The current value of the slider.</dd><dt><code>disabled</code></dt><dd>True if this field is disabled.</dd><dt><code>trigger</code></dt><dd>True if the form should be submitted when the slider value changes.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Slider" href="/wave/docs/api/types#h2o_wave.types.Slider">Slider</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="small_series_stat_card"></a>small_series_stat_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.small_series_stat_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#small_series_stat_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">small_series_stat_card</span>(box: str, title: str, value: str, plot_data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, 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[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.SmallSeriesStatCard" href="/wave/docs/api/types#h2o_wave.types.SmallSeriesStatCard">SmallSeriesStatCard</a></div><div class="api__description"><p>Create a small stat card displaying a primary value and a series plot.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The card&#x27;s title.</dd><dt><code>value</code></dt><dd>The primary value displayed.</dd><dt><code>plot_data</code></dt><dd>The plot&#x27;s data.</dd><dt><code>plot_value</code></dt><dd>The data field to use for y-axis values.</dd><dt><code>plot_zero_value</code></dt><dd>The base value to use for each y-axis mark. Set this to <code>0</code> if you want to pin the x-axis at <code>y=0</code>. If not provided, the minimum value from the data is used.</dd><dt><code>plot_category</code></dt><dd>The data field to use for x-axis values (ignored if <code>plot_type</code> is <code>area</code>; must be provided if <code>plot_type</code> is <code>interval</code>). Defaults to &#x27;x&#x27;.</dd><dt><code>plot_type</code></dt><dd>The type of plot. Defaults to <code>area</code>. One of &#x27;area&#x27;, &#x27;interval&#x27;.</dd><dt><code>plot_curve</code></dt><dd>The plot&#x27;s curve style. Defaults to <code>linear</code>. One of &#x27;linear&#x27;, &#x27;smooth&#x27;, &#x27;step&#x27;, &#x27;step-after&#x27;, &#x27;step-before&#x27;.</dd><dt><code>plot_color</code></dt><dd>The plot&#x27;s color.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.SmallSeriesStatCard" href="/wave/docs/api/types#h2o_wave.types.SmallSeriesStatCard">SmallSeriesStatCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="small_stat_card"></a>small_stat_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.small_stat_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#small_stat_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">small_stat_card</span>(box: str, title: str, value: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.SmallStatCard" href="/wave/docs/api/types#h2o_wave.types.SmallStatCard">SmallStatCard</a></div><div class="api__description"><p>Create a stat card displaying a single value.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The card&#x27;s title.</dd><dt><code>value</code></dt><dd>The primary value displayed.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.SmallStatCard" href="/wave/docs/api/types#h2o_wave.types.SmallStatCard">SmallStatCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="spinbox"></a>spinbox <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.spinbox"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#spinbox" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">spinbox</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a spinbox.</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>min</code></dt><dd>The minimum value of the spinbox.</dd><dt><code>max</code></dt><dd>The maximum value of the spinbox.</dd><dt><code>step</code></dt><dd>The difference between two adjacent values of the spinbox.</dd><dt><code>value</code></dt><dd>The current value of the spinbox.</dd><dt><code>disabled</code></dt><dd>True if this field is disabled.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Spinbox" href="/wave/docs/api/types#h2o_wave.types.Spinbox">Spinbox</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step"></a>step <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.step"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#step" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">step</span>(label: str, icon: Union[str, NoneType] = None, done: Union[bool, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Step" href="/wave/docs/api/types#h2o_wave.types.Step">Step</a></div><div class="api__description"><p>Create a step for a stepper.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>label</code></dt><dd>Text displayed below icon.</dd><dt><code>icon</code></dt><dd>Icon to be displayed.</dd><dt><code>done</code></dt><dd>Indicates whether this step has already been completed.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Step" href="/wave/docs/api/types#h2o_wave.types.Step">Step</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="stepper"></a>stepper <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.stepper"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#stepper" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">stepper</span>(name: str, items: List[<a title="h2o_wave.types.Step" href="/wave/docs/api/types#h2o_wave.types.Step">Step</a>], visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>items</code></dt><dd>The sequence of steps to be displayed.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Stepper" href="/wave/docs/api/types#h2o_wave.types.Stepper">Stepper</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tab"></a>tab <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.tab"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tab" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">tab</span>(name: str, label: Union[str, NoneType] = None, icon: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Tab" href="/wave/docs/api/types#h2o_wave.types.Tab">Tab</a></div><div class="api__description"><p>Create a tab.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>The text displayed on the tab.</dd><dt><code>icon</code></dt><dd>The icon displayed on the tab.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Tab" href="/wave/docs/api/types#h2o_wave.types.Tab">Tab</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tab_card"></a>tab_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.tab_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tab_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">tab_card</span>(box: str, items: List[<a title="h2o_wave.types.Tab" href="/wave/docs/api/types#h2o_wave.types.Tab">Tab</a>], value: Union[str, NoneType] = None, link: Union[bool, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.TabCard" href="/wave/docs/api/types#h2o_wave.types.TabCard">TabCard</a></div><div class="api__description"><p>Create a card containing tabs for navigation.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>items</code></dt><dd>Items to render.</dd><dt><code>value</code></dt><dd>The name of the tab to select.</dd><dt><code>link</code></dt><dd>True if tabs should be rendered as links and not a standard tab.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TabCard" href="/wave/docs/api/types#h2o_wave.types.TabCard">TabCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="table"></a>table <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.table"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#table" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">table</span>(name: str, columns: List[<a title="h2o_wave.types.TableColumn" href="/wave/docs/api/types#h2o_wave.types.TableColumn">TableColumn</a>], rows: List[<a title="h2o_wave.types.TableRow" href="/wave/docs/api/types#h2o_wave.types.TableRow">TableRow</a>], 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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create an interactive table.</p><p>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.</p><p>If <code>multiple</code> is set to False (default), each row in the table is clickable. When a row is clicked, the form is submitted automatically, and <code>q.args.table_name</code> is set to <code>[row_name]</code>, where <code>table_name</code> is the <code>name</code> of the table, and <code>row_name</code> is the <code>name</code> of the row that was clicked on.</p><p>If <code>multiple</code> 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,<code>q.args.table_name</code> is set to <code>[row1_name, row2_name, …]</code> where <code>table_name</code> is the <code>name</code> of the table, and <code>row1_name</code>, <code>row2_name</code> are the <code>name</code> of the rows that were selected. Note that if <code>multiple</code> is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>columns</code></dt><dd>The columns in this table.</dd><dt><code>rows</code></dt><dd>The rows in this table.</dd><dt><code>multiple</code></dt><dd>True to allow multiple rows to be selected.</dd><dt><code>groupable</code></dt><dd>True to allow group by feature.</dd><dt><code>downloadable</code></dt><dd>Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False.</dd><dt><code>resettable</code></dt><dd>Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False.</dd><dt><code>height</code></dt><dd>The height of the table, e.g. &#x27;400px&#x27;, &#x27;50%&#x27;, etc.</dd><dt><code>values</code></dt><dd>The names of the selected rows. If this parameter is set, multiple selections will be allowed (<code>multiple</code> is assumed to be <code>True</code>).</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Table" href="/wave/docs/api/types#h2o_wave.types.Table">Table</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="table_cell_type"></a>table_cell_type <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.table_cell_type"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#table_cell_type" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">table_cell_type</span>(progress: Union[<a title="h2o_wave.types.ProgressTableCellType" href="/wave/docs/api/types#h2o_wave.types.ProgressTableCellType">ProgressTableCellType</a>, NoneType] = None, icon: Union[<a title="h2o_wave.types.IconTableCellType" href="/wave/docs/api/types#h2o_wave.types.IconTableCellType">IconTableCellType</a>, NoneType] = None) ‑&gt; <a title="h2o_wave.types.TableCellType" href="/wave/docs/api/types#h2o_wave.types.TableCellType">TableCellType</a></div><div class="api__description"><p>Defines cell content to be rendered instead of a simple text.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>progress</code></dt><dd>No documentation available.</dd><dt><code>icon</code></dt><dd>No documentation available.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TableCellType" href="/wave/docs/api/types#h2o_wave.types.TableCellType">TableCellType</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="table_column"></a>table_column <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.table_column"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#table_column" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">table_column</span>(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[<a title="h2o_wave.types.TableCellType" href="/wave/docs/api/types#h2o_wave.types.TableCellType">TableCellType</a>, NoneType] = None) ‑&gt; <a title="h2o_wave.types.TableColumn" href="/wave/docs/api/types#h2o_wave.types.TableColumn">TableColumn</a></div><div class="api__description"><p>Create a table column.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this column.</dd><dt><code>label</code></dt><dd>The text displayed on the column header.</dd><dt><code>min_width</code></dt><dd>The minimum width of this column, e.g. &#x27;50px&#x27;. Only <code>px</code> units are supported at this time.</dd><dt><code>max_width</code></dt><dd>The maximum width of this column, e.g. &#x27;100px&#x27;. Only <code>px</code> units are supported at this time.</dd><dt><code>sortable</code></dt><dd>Indicates whether the column is sortable.</dd><dt><code>searchable</code></dt><dd>Indicates whether the contents of this column can be searched through. Enables a search box for the table if true.</dd><dt><code>filterable</code></dt><dd>Indicates whether the contents of this column are displayed as filters in a dropdown.</dd><dt><code>link</code></dt><dd>Indicates whether each cell in this column should be displayed as a clickable link.</dd><dt><code>cell_type</code></dt><dd>Defines how to render each cell in this column. Defaults to plain text.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TableColumn" href="/wave/docs/api/types#h2o_wave.types.TableColumn">TableColumn</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="table_row"></a>table_row <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.table_row"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#table_row" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">table_row</span>(name: str, cells: List[str]) ‑&gt; <a title="h2o_wave.types.TableRow" href="/wave/docs/api/types#h2o_wave.types.TableRow">TableRow</a></div><div class="api__description"><p>Create a table row.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this row.</dd><dt><code>cells</code></dt><dd>The cells in this row (displayed left to right).</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TableRow" href="/wave/docs/api/types#h2o_wave.types.TableRow">TableRow</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tabs"></a>tabs <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.tabs"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tabs" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">tabs</span>(name: str, value: Union[str, NoneType] = None, items: Union[List[<a title="h2o_wave.types.Tab" href="/wave/docs/api/types#h2o_wave.types.Tab">Tab</a>], NoneType] = None, visible: Union[bool, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a tab bar.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>value</code></dt><dd>The name of the tab to select.</dd><dt><code>items</code></dt><dd>The tabs in this tab bar.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Tabs" href="/wave/docs/api/types#h2o_wave.types.Tabs">Tabs</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tall_gauge_stat_card"></a>tall_gauge_stat_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.tall_gauge_stat_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tall_gauge_stat_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">tall_gauge_stat_card</span>(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[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.TallGaugeStatCard" href="/wave/docs/api/types#h2o_wave.types.TallGaugeStatCard">TallGaugeStatCard</a></div><div class="api__description"><p>Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The card&#x27;s title.</dd><dt><code>value</code></dt><dd>The primary value displayed.</dd><dt><code>aux_value</code></dt><dd>The auxiliary value displayed next to the primary value.</dd><dt><code>progress</code></dt><dd>The value of the progress gauge, between 0 and 1.</dd><dt><code>plot_color</code></dt><dd>The color of the progress gauge.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TallGaugeStatCard" href="/wave/docs/api/types#h2o_wave.types.TallGaugeStatCard">TallGaugeStatCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tall_series_stat_card"></a>tall_series_stat_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.tall_series_stat_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tall_series_stat_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">tall_series_stat_card</span>(box: str, title: str, value: str, aux_value: str, plot_data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, 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[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.TallSeriesStatCard" href="/wave/docs/api/types#h2o_wave.types.TallSeriesStatCard">TallSeriesStatCard</a></div><div class="api__description"><p>Create a tall stat card displaying a primary value, an auxiliary value and a series plot.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The card&#x27;s title.</dd><dt><code>value</code></dt><dd>The primary value displayed.</dd><dt><code>aux_value</code></dt><dd>The auxiliary value displayed below the primary value.</dd><dt><code>plot_data</code></dt><dd>The plot&#x27;s data.</dd><dt><code>plot_value</code></dt><dd>The data field to use for y-axis values.</dd><dt><code>plot_zero_value</code></dt><dd>The base value to use for each y-axis mark. Set this to <code>0</code> if you want to pin the x-axis at <code>y=0</code>. If not provided, the minimum value from the data is used.</dd><dt><code>plot_category</code></dt><dd>The data field to use for x-axis values (ignored if <code>plot_type</code> is <code>area</code>; must be provided if <code>plot_type</code> is <code>interval</code>). Defaults to &#x27;x&#x27;.</dd><dt><code>plot_type</code></dt><dd>The type of plot. Defaults to <code>area</code>. One of &#x27;area&#x27;, &#x27;interval&#x27;.</dd><dt><code>plot_curve</code></dt><dd>The plot&#x27;s curve style. Defaults to <code>linear</code>. One of &#x27;linear&#x27;, &#x27;smooth&#x27;, &#x27;step&#x27;, &#x27;step-after&#x27;, &#x27;step-before&#x27;.</dd><dt><code>plot_color</code></dt><dd>The plot&#x27;s color.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TallSeriesStatCard" href="/wave/docs/api/types#h2o_wave.types.TallSeriesStatCard">TallSeriesStatCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="template"></a>template <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.template"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#template" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">template</span>(content: str, data: Union[dict, str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Render dynamic content using an HTML template.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>content</code></dt><dd>The Handlebars template. <a href="https://handlebarsjs.com/guide/" target="_blank" rel="noopener noreferrer">https://handlebarsjs.com/guide/</a></dd><dt><code>data</code></dt><dd>Data for the Handlebars template</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Template" href="/wave/docs/api/types#h2o_wave.types.Template">Template</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="template_card"></a>template_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.template_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#template_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">template_card</span>(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.TemplateCard" href="/wave/docs/api/types#h2o_wave.types.TemplateCard">TemplateCard</a></div><div class="api__description"><p>Render dynamic content using an HTML template.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The title for this card.</dd><dt><code>content</code></dt><dd>The Handlebars template. <a href="https://handlebarsjs.com/guide/" target="_blank" rel="noopener noreferrer">https://handlebarsjs.com/guide/</a></dd><dt><code>data</code></dt><dd>Data for the Handlebars template.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TemplateCard" href="/wave/docs/api/types#h2o_wave.types.TemplateCard">TemplateCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="text"></a>text <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.text"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#text" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">text</span>(content: str, size: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create text content.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>content</code></dt><dd>The text content.</dd><dt><code>size</code></dt><dd>The font size of the text content. One of &#x27;xl&#x27;, &#x27;l&#x27;, &#x27;m&#x27;, &#x27;s&#x27;, &#x27;xs&#x27;.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>Tooltip message.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Text" href="/wave/docs/api/types#h2o_wave.types.Text">Text</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="text_l"></a>text_l <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.text_l"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#text_l" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">text_l</span>(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None, name: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create large sized text content.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>content</code></dt><dd>The text content.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>Tooltip message.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TextL" href="/wave/docs/api/types#h2o_wave.types.TextL">TextL</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="text_m"></a>text_m <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.text_m"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#text_m" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">text_m</span>(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create medium sized text content.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>content</code></dt><dd>The text content.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>Tooltip message.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TextM" href="/wave/docs/api/types#h2o_wave.types.TextM">TextM</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="text_s"></a>text_s <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.text_s"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#text_s" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">text_s</span>(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create small sized text content.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>content</code></dt><dd>The text content.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>Tooltip message.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TextS" href="/wave/docs/api/types#h2o_wave.types.TextS">TextS</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="text_xl"></a>text_xl <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.text_xl"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#text_xl" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">text_xl</span>(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None, name: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create extra-large sized text content.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>content</code></dt><dd>The text content.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>Tooltip message.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TextXl" href="/wave/docs/api/types#h2o_wave.types.TextXl">TextXl</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="text_xs"></a>text_xs <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.text_xs"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#text_xs" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">text_xs</span>(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create extra-small sized text content.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>content</code></dt><dd>The text content.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>Tooltip message.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TextXs" href="/wave/docs/api/types#h2o_wave.types.TextXs">TextXs</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="textbox"></a>textbox <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.textbox"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#textbox" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">textbox</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a text box.</p><p>The text box component enables a user to type text into an app. It&#x27;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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>The text displayed above the field.</dd><dt><code>placeholder</code></dt><dd>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.</dd><dt><code>value</code></dt><dd>Text to be displayed inside the text box.</dd><dt><code>mask</code></dt><dd>The masking string that defines the mask&#x27;s behavior. A backslash will escape any character. Special format characters are: &#x27;9&#x27;: [0-9] &#x27;a&#x27;: [a-zA-Z] &#x27;*&#x27;: [a-zA-Z0-9].</dd><dt><code>icon</code></dt><dd>Icon displayed in the far right end of the text field.</dd><dt><code>prefix</code></dt><dd>Text to be displayed before the text box contents.</dd><dt><code>suffix</code></dt><dd>Text to be displayed after the text box contents.</dd><dt><code>error</code></dt><dd>Text to be displayed as an error below the text box.</dd><dt><code>required</code></dt><dd>True if the text box is a required field.</dd><dt><code>disabled</code></dt><dd>True if the text box is disabled.</dd><dt><code>readonly</code></dt><dd>True if the text box is a read-only field.</dd><dt><code>multiline</code></dt><dd>True if the text box should allow multi-line text entry.</dd><dt><code>password</code></dt><dd>True if the text box should hide text content.</dd><dt><code>trigger</code></dt><dd>True if the form should be submitted when the text value changes.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Textbox" href="/wave/docs/api/types#h2o_wave.types.Textbox">Textbox</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="toggle"></a>toggle <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.toggle"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#toggle" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">toggle</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>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.</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>value</code></dt><dd>True if selected, False if unselected.</dd><dt><code>disabled</code></dt><dd>True if the checkbox is disabled.</dd><dt><code>trigger</code></dt><dd>True if the form should be submitted when the toggle value changes.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Toggle" href="/wave/docs/api/types#h2o_wave.types.Toggle">Toggle</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="toolbar_card"></a>toolbar_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.toolbar_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#toolbar_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">toolbar_card</span>(box: str, items: List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], secondary_items: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None, overflow_items: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.ToolbarCard" href="/wave/docs/api/types#h2o_wave.types.ToolbarCard">ToolbarCard</a></div><div class="api__description"><p>Create a card containing a toolbar.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>items</code></dt><dd>Items to render.</dd><dt><code>secondary_items</code></dt><dd>Items to render on the right side (or left, in RTL).</dd><dt><code>overflow_items</code></dt><dd>Items to render in an overflow menu.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.ToolbarCard" href="/wave/docs/api/types#h2o_wave.types.ToolbarCard">ToolbarCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="vega_card"></a>vega_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.vega_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#vega_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">vega_card</span>(box: str, title: str, specification: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.VegaCard" href="/wave/docs/api/types#h2o_wave.types.VegaCard">VegaCard</a></div><div class="api__description"><p>Create a card containing a Vega-lite plot.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The title of this card.</dd><dt><code>specification</code></dt><dd>The Vega-lite specification.</dd><dt><code>data</code></dt><dd>Data for the plot, if any.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.VegaCard" href="/wave/docs/api/types#h2o_wave.types.VegaCard">VegaCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="vega_visualization"></a>vega_visualization <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.vega_visualization"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#vega_visualization" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">vega_visualization</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a Vega-lite plot for display inside a form.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>specification</code></dt><dd>The Vega-lite specification.</dd><dt><code>data</code></dt><dd>Data for the plot, if any.</dd><dt><code>width</code></dt><dd>The width of the visualization. Defaults to 100%.</dd><dt><code>height</code></dt><dd>The height of the visualization. Defaults to 300px.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.VegaVisualization" href="/wave/docs/api/types#h2o_wave.types.VegaVisualization">VegaVisualization</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="visualization"></a>visualization <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.visualization"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#visualization" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">visualization</span>(plot: <a title="h2o_wave.types.Plot" href="/wave/docs/api/types#h2o_wave.types.Plot">Plot</a>, data: Union[dict, str], width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a visualization for display inside a form.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>plot</code></dt><dd>The plot to be rendered in this visualization.</dd><dt><code>data</code></dt><dd>Data for this visualization.</dd><dt><code>width</code></dt><dd>The width of the visualization. Defaults to 100%.</dd><dt><code>height</code></dt><dd>The hight of the visualization. Defaults to 300px.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Visualization" href="/wave/docs/api/types#h2o_wave.types.Visualization">Visualization</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="wide_bar_stat_card"></a>wide_bar_stat_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.wide_bar_stat_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#wide_bar_stat_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">wide_bar_stat_card</span>(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[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.WideBarStatCard" href="/wave/docs/api/types#h2o_wave.types.WideBarStatCard">WideBarStatCard</a></div><div class="api__description"><p>Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The card&#x27;s title.</dd><dt><code>value</code></dt><dd>The primary value displayed.</dd><dt><code>aux_value</code></dt><dd>The auxiliary value displayed next to the primary value.</dd><dt><code>progress</code></dt><dd>The value of the progress bar, between 0 and 1.</dd><dt><code>plot_color</code></dt><dd>The color of the progress bar.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.WideBarStatCard" href="/wave/docs/api/types#h2o_wave.types.WideBarStatCard">WideBarStatCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="wide_gauge_stat_card"></a>wide_gauge_stat_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.wide_gauge_stat_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#wide_gauge_stat_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">wide_gauge_stat_card</span>(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[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.WideGaugeStatCard" href="/wave/docs/api/types#h2o_wave.types.WideGaugeStatCard">WideGaugeStatCard</a></div><div class="api__description"><p>Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The card&#x27;s title.</dd><dt><code>value</code></dt><dd>The primary value displayed.</dd><dt><code>aux_value</code></dt><dd>The auxiliary value displayed next to the primary value.</dd><dt><code>progress</code></dt><dd>The value of the progress gauge, between 0 and 1.</dd><dt><code>plot_color</code></dt><dd>The color of the progress gauge.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.WideGaugeStatCard" href="/wave/docs/api/types#h2o_wave.types.WideGaugeStatCard">WideGaugeStatCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="wide_series_stat_card"></a>wide_series_stat_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.wide_series_stat_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#wide_series_stat_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">wide_series_stat_card</span>(box: str, title: str, value: str, aux_value: str, plot_data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, 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[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.WideSeriesStatCard" href="/wave/docs/api/types#h2o_wave.types.WideSeriesStatCard">WideSeriesStatCard</a></div><div class="api__description"><p>Create a wide stat card displaying a primary value, an auxiliary value and a series plot.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The card&#x27;s title.</dd><dt><code>value</code></dt><dd>The primary value displayed.</dd><dt><code>aux_value</code></dt><dd>The auxiliary value displayed below the primary value.</dd><dt><code>plot_data</code></dt><dd>The plot&#x27;s data.</dd><dt><code>plot_value</code></dt><dd>The data field to use for y-axis values.</dd><dt><code>plot_zero_value</code></dt><dd>The base value to use for each y-axis mark. Set this to <code>0</code> if you want to pin the x-axis at <code>y=0</code>. If not provided, the minimum value from the data is used.</dd><dt><code>plot_category</code></dt><dd>The data field to use for x-axis values (ignored if <code>plot_type</code> is <code>area</code>; must be provided if <code>plot_type</code> is <code>interval</code>). Defaults to &#x27;x&#x27;.</dd><dt><code>plot_type</code></dt><dd>The type of plot. Defaults to <code>area</code>. One of &#x27;area&#x27;, &#x27;interval&#x27;.</dd><dt><code>plot_curve</code></dt><dd>The plot&#x27;s curve style. Defaults to <code>linear</code>. One of &#x27;linear&#x27;, &#x27;smooth&#x27;, &#x27;step&#x27;, &#x27;step-after&#x27;, &#x27;step-before&#x27;.</dd><dt><code>plot_color</code></dt><dd>The plot&#x27;s color.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.WideSeriesStatCard" href="/wave/docs/api/types#h2o_wave.types.WideSeriesStatCard">WideSeriesStatCard</a> instance.</p></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/api/ui.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/api/core"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Module h2o_wave.core</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/api/server"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Module h2o_wave.server »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#functions" class="table-of-contents__link">Functions</a><ul><li><a href="#breadcrumb" class="table-of-contents__link">breadcrumb <a name="h2o_wave.ui.breadcrumb"></a></li><li><a href="#breadcrumbs_card" class="table-of-contents__link">breadcrumbs_card <a name="h2o_wave.ui.breadcrumbs_card"></a></li><li><a href="#button" class="table-of-contents__link">button <a name="h2o_wave.ui.button"></a></li><li><a href="#buttons" class="table-of-contents__link">buttons <a name="h2o_wave.ui.buttons"></a></li><li><a href="#checkbox" class="table-of-contents__link">checkbox <a name="h2o_wave.ui.checkbox"></a></li><li><a href="#checklist" class="table-of-contents__link">checklist <a name="h2o_wave.ui.checklist"></a></li><li><a href="#choice" class="table-of-contents__link">choice <a name="h2o_wave.ui.choice"></a></li><li><a href="#choice_group" class="table-of-contents__link">choice_group <a name="h2o_wave.ui.choice_group"></a></li><li><a href="#color_picker" class="table-of-contents__link">color_picker <a name="h2o_wave.ui.color_picker"></a></li><li><a href="#combobox" class="table-of-contents__link">combobox <a name="h2o_wave.ui.combobox"></a></li><li><a href="#command" class="table-of-contents__link">command <a name="h2o_wave.ui.command"></a></li><li><a href="#component" class="table-of-contents__link">component <a name="h2o_wave.ui.component"></a></li><li><a href="#date_picker" class="table-of-contents__link">date_picker <a name="h2o_wave.ui.date_picker"></a></li><li><a href="#dropdown" class="table-of-contents__link">dropdown <a name="h2o_wave.ui.dropdown"></a></li><li><a href="#expander" class="table-of-contents__link">expander <a name="h2o_wave.ui.expander"></a></li><li><a href="#file_upload" class="table-of-contents__link">file_upload <a name="h2o_wave.ui.file_upload"></a></li><li><a href="#flex_card" class="table-of-contents__link">flex_card <a name="h2o_wave.ui.flex_card"></a></li><li><a href="#form_card" class="table-of-contents__link">form_card <a name="h2o_wave.ui.form_card"></a></li><li><a href="#frame" class="table-of-contents__link">frame <a name="h2o_wave.ui.frame"></a></li><li><a href="#frame_card" class="table-of-contents__link">frame_card <a name="h2o_wave.ui.frame_card"></a></li><li><a href="#graphics_card" class="table-of-contents__link">graphics_card <a name="h2o_wave.ui.graphics_card"></a></li><li><a href="#grid_card" class="table-of-contents__link">grid_card <a name="h2o_wave.ui.grid_card"></a></li><li><a href="#header_card" class="table-of-contents__link">header_card <a name="h2o_wave.ui.header_card"></a></li><li><a href="#icon_table_cell_type" class="table-of-contents__link">icon_table_cell_type <a name="h2o_wave.ui.icon_table_cell_type"></a></li><li><a href="#image_card" class="table-of-contents__link">image_card <a name="h2o_wave.ui.image_card"></a></li><li><a href="#label" class="table-of-contents__link">label <a name="h2o_wave.ui.label"></a></li><li><a href="#large_bar_stat_card" class="table-of-contents__link">large_bar_stat_card <a name="h2o_wave.ui.large_bar_stat_card"></a></li><li><a href="#large_stat_card" class="table-of-contents__link">large_stat_card <a name="h2o_wave.ui.large_stat_card"></a></li><li><a href="#link" class="table-of-contents__link">link <a name="h2o_wave.ui.link"></a></li><li><a href="#list_card" class="table-of-contents__link">list_card <a name="h2o_wave.ui.list_card"></a></li><li><a href="#list_item1_card" class="table-of-contents__link">list_item1_card <a name="h2o_wave.ui.list_item1_card"></a></li><li><a href="#mark" class="table-of-contents__link">mark <a name="h2o_wave.ui.mark"></a></li><li><a href="#markdown_card" class="table-of-contents__link">markdown_card <a name="h2o_wave.ui.markdown_card"></a></li><li><a href="#markup" class="table-of-contents__link">markup <a name="h2o_wave.ui.markup"></a></li><li><a href="#markup_card" class="table-of-contents__link">markup_card <a name="h2o_wave.ui.markup_card"></a></li><li><a href="#message_bar" class="table-of-contents__link">message_bar <a name="h2o_wave.ui.message_bar"></a></li><li><a href="#meta_card" class="table-of-contents__link">meta_card <a name="h2o_wave.ui.meta_card"></a></li><li><a href="#nav_card" class="table-of-contents__link">nav_card <a name="h2o_wave.ui.nav_card"></a></li><li><a href="#nav_group" class="table-of-contents__link">nav_group <a name="h2o_wave.ui.nav_group"></a></li><li><a href="#nav_item" class="table-of-contents__link">nav_item <a name="h2o_wave.ui.nav_item"></a></li><li><a href="#picker" class="table-of-contents__link">picker <a name="h2o_wave.ui.picker"></a></li><li><a href="#pixel_art_card" class="table-of-contents__link">pixel_art_card <a name="h2o_wave.ui.pixel_art_card"></a></li><li><a href="#plot" class="table-of-contents__link">plot <a name="h2o_wave.ui.plot"></a></li><li><a href="#plot_card" class="table-of-contents__link">plot_card <a name="h2o_wave.ui.plot_card"></a></li><li><a href="#progress" class="table-of-contents__link">progress <a name="h2o_wave.ui.progress"></a></li><li><a href="#progress_table_cell_type" class="table-of-contents__link">progress_table_cell_type <a name="h2o_wave.ui.progress_table_cell_type"></a></li><li><a href="#range_slider" class="table-of-contents__link">range_slider <a name="h2o_wave.ui.range_slider"></a></li><li><a href="#repeat_card" class="table-of-contents__link">repeat_card <a name="h2o_wave.ui.repeat_card"></a></li><li><a href="#separator" class="table-of-contents__link">separator <a name="h2o_wave.ui.separator"></a></li><li><a href="#slider" class="table-of-contents__link">slider <a name="h2o_wave.ui.slider"></a></li><li><a href="#small_series_stat_card" class="table-of-contents__link">small_series_stat_card <a name="h2o_wave.ui.small_series_stat_card"></a></li><li><a href="#small_stat_card" class="table-of-contents__link">small_stat_card <a name="h2o_wave.ui.small_stat_card"></a></li><li><a href="#spinbox" class="table-of-contents__link">spinbox <a name="h2o_wave.ui.spinbox"></a></li><li><a href="#step" class="table-of-contents__link">step <a name="h2o_wave.ui.step"></a></li><li><a href="#stepper" class="table-of-contents__link">stepper <a name="h2o_wave.ui.stepper"></a></li><li><a href="#tab" class="table-of-contents__link">tab <a name="h2o_wave.ui.tab"></a></li><li><a href="#tab_card" class="table-of-contents__link">tab_card <a name="h2o_wave.ui.tab_card"></a></li><li><a href="#table" class="table-of-contents__link">table <a name="h2o_wave.ui.table"></a></li><li><a href="#table_cell_type" class="table-of-contents__link">table_cell_type <a name="h2o_wave.ui.table_cell_type"></a></li><li><a href="#table_column" class="table-of-contents__link">table_column <a name="h2o_wave.ui.table_column"></a></li><li><a href="#table_row" class="table-of-contents__link">table_row <a name="h2o_wave.ui.table_row"></a></li><li><a href="#tabs" class="table-of-contents__link">tabs <a name="h2o_wave.ui.tabs"></a></li><li><a href="#tall_gauge_stat_card" class="table-of-contents__link">tall_gauge_stat_card <a name="h2o_wave.ui.tall_gauge_stat_card"></a></li><li><a href="#tall_series_stat_card" class="table-of-contents__link">tall_series_stat_card <a name="h2o_wave.ui.tall_series_stat_card"></a></li><li><a href="#template" class="table-of-contents__link">template <a name="h2o_wave.ui.template"></a></li><li><a href="#template_card" class="table-of-contents__link">template_card <a name="h2o_wave.ui.template_card"></a></li><li><a href="#text" class="table-of-contents__link">text <a name="h2o_wave.ui.text"></a></li><li><a href="#text_l" class="table-of-contents__link">text_l <a name="h2o_wave.ui.text_l"></a></li><li><a href="#text_m" class="table-of-contents__link">text_m <a name="h2o_wave.ui.text_m"></a></li><li><a href="#text_s" class="table-of-contents__link">text_s <a name="h2o_wave.ui.text_s"></a></li><li><a href="#text_xl" class="table-of-contents__link">text_xl <a name="h2o_wave.ui.text_xl"></a></li><li><a href="#text_xs" class="table-of-contents__link">text_xs <a name="h2o_wave.ui.text_xs"></a></li><li><a href="#textbox" class="table-of-contents__link">textbox <a name="h2o_wave.ui.textbox"></a></li><li><a href="#toggle" class="table-of-contents__link">toggle <a name="h2o_wave.ui.toggle"></a></li><li><a href="#toolbar_card" class="table-of-contents__link">toolbar_card <a name="h2o_wave.ui.toolbar_card"></a></li><li><a href="#vega_card" class="table-of-contents__link">vega_card <a name="h2o_wave.ui.vega_card"></a></li><li><a href="#vega_visualization" class="table-of-contents__link">vega_visualization <a name="h2o_wave.ui.vega_visualization"></a></li><li><a href="#visualization" class="table-of-contents__link">visualization <a name="h2o_wave.ui.visualization"></a></li><li><a href="#wide_bar_stat_card" class="table-of-contents__link">wide_bar_stat_card <a name="h2o_wave.ui.wide_bar_stat_card"></a></li><li><a href="#wide_gauge_stat_card" class="table-of-contents__link">wide_gauge_stat_card <a name="h2o_wave.ui.wide_gauge_stat_card"></a></li><li><a href="#wide_series_stat_card" class="table-of-contents__link">wide_series_stat_card <a name="h2o_wave.ui.wide_series_stat_card"></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/f151ab1a.f861a152.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Module h2o_wave.ui</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="functions"></a>Functions<a aria-hidden="true" tabindex="-1" class="hash-link" href="#functions" title="Direct link to heading">#</a></h2><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="breadcrumb"></a>breadcrumb <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.breadcrumb"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#breadcrumb" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">breadcrumb</span>(name: str, label: str) ‑&gt; <a title="h2o_wave.types.Breadcrumb" href="/wave/docs/api/types#h2o_wave.types.Breadcrumb">Breadcrumb</a></div><div class="api__description"><p>Create a breadcrumb for a <a title="h2o_wave.types.BreadcrumbsCard" href="/wave/docs/api/types#h2o_wave.types.BreadcrumbsCard">BreadcrumbsCard</a>.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>The name of this item. Prefix the name with a &#x27;#&#x27; to trigger hash-change navigation.</dd><dt><code>label</code></dt><dd>The label to display.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Breadcrumb" href="/wave/docs/api/types#h2o_wave.types.Breadcrumb">Breadcrumb</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="breadcrumbs_card"></a>breadcrumbs_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.breadcrumbs_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#breadcrumbs_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">breadcrumbs_card</span>(box: str, items: List[<a title="h2o_wave.types.Breadcrumb" href="/wave/docs/api/types#h2o_wave.types.Breadcrumb">Breadcrumb</a>], commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.BreadcrumbsCard" href="/wave/docs/api/types#h2o_wave.types.BreadcrumbsCard">BreadcrumbsCard</a></div><div class="api__description"><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>items</code></dt><dd>A list of <a title="h2o_wave.types.Breadcrumb" href="/wave/docs/api/types#h2o_wave.types.Breadcrumb">Breadcrumb</a> instances to display. See <a href="#h2o_wave.ui.breadcrumb" title="h2o_wave.ui.breadcrumb">breadcrumb()</a></dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.BreadcrumbsCard" href="/wave/docs/api/types#h2o_wave.types.BreadcrumbsCard">BreadcrumbsCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="button"></a>button <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.button"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#button" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">button</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a button.</p><p>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.</p><p>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.</p><p>Buttons may be placed within a &quot;buttons&quot; component which will lay out the buttons horizontally, or used individually and they will be stacked vertically.</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component. If the name is prefixed with a &#x27;#&#x27;, the button sets the location hash to the name when clicked.</dd><dt><code>label</code></dt><dd>The text displayed on the button.</dd><dt><code>caption</code></dt><dd>The caption displayed below the label. Setting a caption renders a compound button.</dd><dt><code>value</code></dt><dd>A value for this button. If a value is set, it is used for the button&#x27;s submitted instead of a boolean True.</dd><dt><code>primary</code></dt><dd>True if the button should be rendered as the primary button in the set.</dd><dt><code>disabled</code></dt><dd>True if the button should be disabled.</dd><dt><code>link</code></dt><dd>True if the button should be rendered as link text and not a standard button.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Button" href="/wave/docs/api/types#h2o_wave.types.Button">Button</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="buttons"></a>buttons <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.buttons"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#buttons" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">buttons</span>(items: List[<a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a>], justify: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a set of buttons to be layed out horizontally.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>items</code></dt><dd>The button in this set.</dd><dt><code>justify</code></dt><dd>Specifies how to lay out buttons horizontally. One of &#x27;start&#x27;, &#x27;end&#x27;, &#x27;center&#x27;, &#x27;between&#x27;, &#x27;around&#x27;.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Buttons" href="/wave/docs/api/types#h2o_wave.types.Buttons">Buttons</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="checkbox"></a>checkbox <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.checkbox"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#checkbox" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">checkbox</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a checkbox.</p><p>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.</p><p>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.</p><p>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.</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the checkbox.</dd><dt><code>value</code></dt><dd>True if selected, False if unselected.</dd><dt><code>indeterminate</code></dt><dd>True if the selection is indeterminate (neither selected nor unselected).</dd><dt><code>disabled</code></dt><dd>True if the checkbox is disabled.</dd><dt><code>trigger</code></dt><dd>True if the form should be submitted when the checkbox value changes.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Checkbox" href="/wave/docs/api/types#h2o_wave.types.Checkbox">Checkbox</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="checklist"></a>checklist <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.checklist"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#checklist" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">checklist</span>(name: str, label: Union[str, NoneType] = None, values: Union[List[str], NoneType] = None, choices: Union[List[<a title="h2o_wave.types.Choice" href="/wave/docs/api/types#h2o_wave.types.Choice">Choice</a>], NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed above the component.</dd><dt><code>values</code></dt><dd>The names of the selected choices.</dd><dt><code>choices</code></dt><dd>The choices to be presented.</dd><dt><code>trigger</code></dt><dd>True if the form should be submitted when the checklist value changes.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Checklist" href="/wave/docs/api/types#h2o_wave.types.Checklist">Checklist</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="choice"></a>choice <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.choice"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#choice" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">choice</span>(name: str, label: Union[str, NoneType] = None, disabled: Union[bool, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Choice" href="/wave/docs/api/types#h2o_wave.types.Choice">Choice</a></div><div class="api__description"><p>Create a choice for a checklist, choice group or dropdown.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>disabled</code></dt><dd>True if the checkbox is disabled.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Choice" href="/wave/docs/api/types#h2o_wave.types.Choice">Choice</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="choice_group"></a>choice_group <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.choice_group"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#choice_group" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">choice_group</span>(name: str, label: Union[str, NoneType] = None, value: Union[str, NoneType] = None, choices: Union[List[<a title="h2o_wave.types.Choice" href="/wave/docs/api/types#h2o_wave.types.Choice">Choice</a>], NoneType] = None, required: Union[bool, NoneType] = None, trigger: Union[bool, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>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.</p><p>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.</p><p>If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a checkbox for &quot;I agree&quot; instead of choice group buttons for &quot;I agree&quot; and &quot;I don&#x27;t agree.&quot;</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>value</code></dt><dd>The name of the selected choice.</dd><dt><code>choices</code></dt><dd>The choices to be presented.</dd><dt><code>required</code></dt><dd>True if this field is required.</dd><dt><code>trigger</code></dt><dd>True if the form should be submitted when the selection changes.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.ChoiceGroup" href="/wave/docs/api/types#h2o_wave.types.ChoiceGroup">ChoiceGroup</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="color_picker"></a>color_picker <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.color_picker"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#color_picker" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">color_picker</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a color picker.</p><p>A date picker allows a user to pick a color value. If the &#x27;choices&#x27; parameter is set, a swatch picker is displayed instead of the standard color picker.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>value</code></dt><dd>The selected color (CSS-compatible string)</dd><dt><code>choices</code></dt><dd>A list of colors (CSS-compatible strings) to limit color choices to.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.ColorPicker" href="/wave/docs/api/types#h2o_wave.types.ColorPicker">ColorPicker</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="combobox"></a>combobox <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.combobox"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#combobox" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">combobox</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a combobox.</p><p>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.</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>placeholder</code></dt><dd>A string that provides a brief hint to the user as to what kind of information is expected in the field.</dd><dt><code>value</code></dt><dd>The name of the selected choice.</dd><dt><code>choices</code></dt><dd>The choices to be presented.</dd><dt><code>error</code></dt><dd>Text to be displayed as an error below the text box.</dd><dt><code>disabled</code></dt><dd>True if this field is disabled.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Combobox" href="/wave/docs/api/types#h2o_wave.types.Combobox">Combobox</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="command"></a>command <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.command"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#command" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">command</span>(name: str, label: Union[str, NoneType] = None, caption: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, items: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None, data: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a></div><div class="api__description"><p>Create a command.</p><p>Commands are typically displayed as context menu items or toolbar button.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component. If the name is prefixed with a &#x27;#&#x27;, the command sets the location hash to the name when executed.</dd><dt><code>label</code></dt><dd>The text displayed for this command.</dd><dt><code>caption</code></dt><dd>The caption for this command (typically a tooltip).</dd><dt><code>icon</code></dt><dd>The icon to be displayed for this command.</dd><dt><code>items</code></dt><dd>Sub-commands, if any</dd><dt><code>data</code></dt><dd>Data associated with this command, if any.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="component"></a>component <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.component"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#component" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">component</span>(text: Union[<a title="h2o_wave.types.Text" href="/wave/docs/api/types#h2o_wave.types.Text">Text</a>, NoneType] = None, text_xl: Union[<a title="h2o_wave.types.TextXl" href="/wave/docs/api/types#h2o_wave.types.TextXl">TextXl</a>, NoneType] = None, text_l: Union[<a title="h2o_wave.types.TextL" href="/wave/docs/api/types#h2o_wave.types.TextL">TextL</a>, NoneType] = None, text_m: Union[<a title="h2o_wave.types.TextM" href="/wave/docs/api/types#h2o_wave.types.TextM">TextM</a>, NoneType] = None, text_s: Union[<a title="h2o_wave.types.TextS" href="/wave/docs/api/types#h2o_wave.types.TextS">TextS</a>, NoneType] = None, text_xs: Union[<a title="h2o_wave.types.TextXs" href="/wave/docs/api/types#h2o_wave.types.TextXs">TextXs</a>, NoneType] = None, label: Union[<a title="h2o_wave.types.Label" href="/wave/docs/api/types#h2o_wave.types.Label">Label</a>, NoneType] = None, separator: Union[<a title="h2o_wave.types.Separator" href="/wave/docs/api/types#h2o_wave.types.Separator">Separator</a>, NoneType] = None, progress: Union[<a title="h2o_wave.types.Progress" href="/wave/docs/api/types#h2o_wave.types.Progress">Progress</a>, NoneType] = None, message_bar: Union[<a title="h2o_wave.types.MessageBar" href="/wave/docs/api/types#h2o_wave.types.MessageBar">MessageBar</a>, NoneType] = None, textbox: Union[<a title="h2o_wave.types.Textbox" href="/wave/docs/api/types#h2o_wave.types.Textbox">Textbox</a>, NoneType] = None, checkbox: Union[<a title="h2o_wave.types.Checkbox" href="/wave/docs/api/types#h2o_wave.types.Checkbox">Checkbox</a>, NoneType] = None, toggle: Union[<a title="h2o_wave.types.Toggle" href="/wave/docs/api/types#h2o_wave.types.Toggle">Toggle</a>, NoneType] = None, choice_group: Union[<a title="h2o_wave.types.ChoiceGroup" href="/wave/docs/api/types#h2o_wave.types.ChoiceGroup">ChoiceGroup</a>, NoneType] = None, checklist: Union[<a title="h2o_wave.types.Checklist" href="/wave/docs/api/types#h2o_wave.types.Checklist">Checklist</a>, NoneType] = None, dropdown: Union[<a title="h2o_wave.types.Dropdown" href="/wave/docs/api/types#h2o_wave.types.Dropdown">Dropdown</a>, NoneType] = None, combobox: Union[<a title="h2o_wave.types.Combobox" href="/wave/docs/api/types#h2o_wave.types.Combobox">Combobox</a>, NoneType] = None, slider: Union[<a title="h2o_wave.types.Slider" href="/wave/docs/api/types#h2o_wave.types.Slider">Slider</a>, NoneType] = None, spinbox: Union[<a title="h2o_wave.types.Spinbox" href="/wave/docs/api/types#h2o_wave.types.Spinbox">Spinbox</a>, NoneType] = None, date_picker: Union[<a title="h2o_wave.types.DatePicker" href="/wave/docs/api/types#h2o_wave.types.DatePicker">DatePicker</a>, NoneType] = None, color_picker: Union[<a title="h2o_wave.types.ColorPicker" href="/wave/docs/api/types#h2o_wave.types.ColorPicker">ColorPicker</a>, NoneType] = None, button: Union[<a title="h2o_wave.types.Button" href="/wave/docs/api/types#h2o_wave.types.Button">Button</a>, NoneType] = None, buttons: Union[<a title="h2o_wave.types.Buttons" href="/wave/docs/api/types#h2o_wave.types.Buttons">Buttons</a>, NoneType] = None, file_upload: Union[<a title="h2o_wave.types.FileUpload" href="/wave/docs/api/types#h2o_wave.types.FileUpload">FileUpload</a>, NoneType] = None, table: Union[<a title="h2o_wave.types.Table" href="/wave/docs/api/types#h2o_wave.types.Table">Table</a>, NoneType] = None, link: Union[<a title="h2o_wave.types.Link" href="/wave/docs/api/types#h2o_wave.types.Link">Link</a>, NoneType] = None, tabs: Union[<a title="h2o_wave.types.Tabs" href="/wave/docs/api/types#h2o_wave.types.Tabs">Tabs</a>, NoneType] = None, expander: Union[<a title="h2o_wave.types.Expander" href="/wave/docs/api/types#h2o_wave.types.Expander">Expander</a>, NoneType] = None, frame: Union[<a title="h2o_wave.types.Frame" href="/wave/docs/api/types#h2o_wave.types.Frame">Frame</a>, NoneType] = None, markup: Union[<a title="h2o_wave.types.Markup" href="/wave/docs/api/types#h2o_wave.types.Markup">Markup</a>, NoneType] = None, template: Union[<a title="h2o_wave.types.Template" href="/wave/docs/api/types#h2o_wave.types.Template">Template</a>, NoneType] = None, picker: Union[<a title="h2o_wave.types.Picker" href="/wave/docs/api/types#h2o_wave.types.Picker">Picker</a>, NoneType] = None, range_slider: Union[<a title="h2o_wave.types.RangeSlider" href="/wave/docs/api/types#h2o_wave.types.RangeSlider">RangeSlider</a>, NoneType] = None, stepper: Union[<a title="h2o_wave.types.Stepper" href="/wave/docs/api/types#h2o_wave.types.Stepper">Stepper</a>, NoneType] = None, visualization: Union[<a title="h2o_wave.types.Visualization" href="/wave/docs/api/types#h2o_wave.types.Visualization">Visualization</a>, NoneType] = None, vega_visualization: Union[<a title="h2o_wave.types.VegaVisualization" href="/wave/docs/api/types#h2o_wave.types.VegaVisualization">VegaVisualization</a>, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a component.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>text</code></dt><dd>Text block.</dd><dt><code>text_xl</code></dt><dd>Extra-large sized text block.</dd><dt><code>text_l</code></dt><dd>Large sized text block.</dd><dt><code>text_m</code></dt><dd>Medium sized text block.</dd><dt><code>text_s</code></dt><dd>Small sized text block.</dd><dt><code>text_xs</code></dt><dd>Extra-small sized text block.</dd><dt><code>label</code></dt><dd>Label.</dd><dt><code>separator</code></dt><dd>Separator.</dd><dt><code>progress</code></dt><dd>Progress bar.</dd><dt><code>message_bar</code></dt><dd>Message bar.</dd><dt><code>textbox</code></dt><dd>Textbox.</dd><dt><code>checkbox</code></dt><dd>Checkbox.</dd><dt><code>toggle</code></dt><dd>Toggle.</dd><dt><code>choice_group</code></dt><dd>Choice group.</dd><dt><code>checklist</code></dt><dd>Checklist.</dd><dt><code>dropdown</code></dt><dd>Dropdown.</dd><dt><code>combobox</code></dt><dd>Combobox.</dd><dt><code>slider</code></dt><dd>Slider.</dd><dt><code>spinbox</code></dt><dd>Spinbox.</dd><dt><code>date_picker</code></dt><dd>Date picker.</dd><dt><code>color_picker</code></dt><dd>Color picker.</dd><dt><code>button</code></dt><dd>Button.</dd><dt><code>buttons</code></dt><dd>Button set.</dd><dt><code>file_upload</code></dt><dd>File upload.</dd><dt><code>table</code></dt><dd>Table.</dd><dt><code>link</code></dt><dd>Link.</dd><dt><code>tabs</code></dt><dd>Tabs.</dd><dt><code>expander</code></dt><dd>Expander.</dd><dt><code>frame</code></dt><dd>Frame.</dd><dt><code>markup</code></dt><dd>Markup</dd><dt><code>template</code></dt><dd>Template</dd><dt><code>picker</code></dt><dd>Picker.</dd><dt><code>range_slider</code></dt><dd>Range Slider.</dd><dt><code>stepper</code></dt><dd>Stepper.</dd><dt><code>visualization</code></dt><dd>Visualization.</dd><dt><code>vega_visualization</code></dt><dd>Vega-lite Visualization.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="date_picker"></a>date_picker <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.date_picker"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#date_picker" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">date_picker</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a date picker.</p><p>A date picker allows a user to pick a date value.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>placeholder</code></dt><dd>A string that provides a brief hint to the user as to what kind of information is expected in the field.</dd><dt><code>value</code></dt><dd>The date value in YYYY-MM-DD format.</dd><dt><code>disabled</code></dt><dd>True if this field is disabled.</dd><dt><code>trigger</code></dt><dd>True if the form should be submitted when the datepicker value changes.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.DatePicker" href="/wave/docs/api/types#h2o_wave.types.DatePicker">DatePicker</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dropdown"></a>dropdown <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.dropdown"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#dropdown" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">dropdown</span>(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[<a title="h2o_wave.types.Choice" href="/wave/docs/api/types#h2o_wave.types.Choice">Choice</a>], 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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a dropdown.</p><p>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.</p><p>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.</p><p>Note: Use either the &#x27;value&#x27; parameter or the &#x27;values&#x27; parameter. Setting the &#x27;values&#x27; parameter renders a multi-select dropdown.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>placeholder</code></dt><dd>A string that provides a brief hint to the user as to what kind of information is expected in the field.</dd><dt><code>value</code></dt><dd>The name of the selected choice.</dd><dt><code>values</code></dt><dd>The names of the selected choices. If this parameter is set, multiple selections will be allowed.</dd><dt><code>choices</code></dt><dd>The choices to be presented.</dd><dt><code>required</code></dt><dd>True if this is a required field.</dd><dt><code>disabled</code></dt><dd>True if this field is disabled.</dd><dt><code>trigger</code></dt><dd>True if the form should be submitted when the dropdown value changes.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Dropdown" href="/wave/docs/api/types#h2o_wave.types.Dropdown">Dropdown</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="expander"></a>expander <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.expander"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#expander" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">expander</span>(name: str, label: Union[str, NoneType] = None, expanded: Union[bool, NoneType] = None, items: Union[List[<a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a>], NoneType] = None, visible: Union[bool, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Creates a new expander.</p><p>Expanders can be used to show or hide a group of related components.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>The text displayed on the expander.</dd><dt><code>expanded</code></dt><dd>True if expanded, False if collapsed.</dd><dt><code>items</code></dt><dd>List of components to be hideable by the expander.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Expander" href="/wave/docs/api/types#h2o_wave.types.Expander">Expander</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="file_upload"></a>file_upload <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.file_upload"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#file_upload" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">file_upload</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a file upload component. A file upload component allows a user to browse, select and upload one or more files.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>multiple</code></dt><dd>True if the component should allow multiple files to be uploaded.</dd><dt><code>file_extensions</code></dt><dd>List of allowed file extensions, e.g. <code>pdf</code>, <code>docx</code>, etc.</dd><dt><code>max_file_size</code></dt><dd>Maximum allowed size (Mb) per file. Defaults to no limit.</dd><dt><code>max_size</code></dt><dd>Maximum allowed size (Mb) for all files combined. Defaults to no limit.</dd><dt><code>height</code></dt><dd>The height of the file upload, e.g. &#x27;400px&#x27;, &#x27;50%&#x27;, etc.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.FileUpload" href="/wave/docs/api/types#h2o_wave.types.FileUpload">FileUpload</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="flex_card"></a>flex_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.flex_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#flex_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">flex_card</span>(box: str, item_view: str, item_props: Union[dict, str], data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str], direction: Union[str, NoneType] = None, justify: Union[str, NoneType] = None, align: Union[str, NoneType] = None, wrap: Union[str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.FlexCard" href="/wave/docs/api/types#h2o_wave.types.FlexCard">FlexCard</a></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out using a one-dimensional model with flexible alignemnt and wrapping capabilities.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>item_view</code></dt><dd>The child card type.</dd><dt><code>item_props</code></dt><dd>The child card properties.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>direction</code></dt><dd>Layout direction. One of &#x27;horizontal&#x27;, &#x27;vertical&#x27;.</dd><dt><code>justify</code></dt><dd>Layout strategy for main axis. One of &#x27;start&#x27;, &#x27;end&#x27;, &#x27;center&#x27;, &#x27;between&#x27;, &#x27;around&#x27;.</dd><dt><code>align</code></dt><dd>Layout strategy for cross axis. One of &#x27;start&#x27;, &#x27;end&#x27;, &#x27;center&#x27;, &#x27;baseline&#x27;, &#x27;stretch&#x27;.</dd><dt><code>wrap</code></dt><dd>Wrapping strategy. One of &#x27;start&#x27;, &#x27;end&#x27;, &#x27;center&#x27;, &#x27;between&#x27;, &#x27;around&#x27;, &#x27;stretch&#x27;.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.FlexCard" href="/wave/docs/api/types#h2o_wave.types.FlexCard">FlexCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="form_card"></a>form_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.form_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#form_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">form_card</span>(box: str, items: Union[List[<a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a>], str], commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.FormCard" href="/wave/docs/api/types#h2o_wave.types.FormCard">FormCard</a></div><div class="api__description"><p>Create a form.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>items</code></dt><dd>The components in this form.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.FormCard" href="/wave/docs/api/types#h2o_wave.types.FormCard">FormCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="frame"></a>frame <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.frame"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#frame" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">frame</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a new inline frame (an <code>iframe</code>).</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>path</code></dt><dd>The path or URL of the web page, e.g. <code>/foo.html</code> or <code>http://example.com/foo.html</code></dd><dt><code>content</code></dt><dd>The HTML content of the page. A string containing <code>&lt;html&gt;...&lt;/html&gt;</code>.</dd><dt><code>width</code></dt><dd>The width of the frame, e.g. <code>200px</code>, <code>50%</code>, etc. Defaults to <code>100%</code>.</dd><dt><code>height</code></dt><dd>The height of the frame, e.g. <code>200px</code>, <code>50%</code>, etc. Defaults to <code>150px</code>.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Frame" href="/wave/docs/api/types#h2o_wave.types.Frame">Frame</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="frame_card"></a>frame_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.frame_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#frame_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">frame_card</span>(box: str, title: str, path: Union[str, NoneType] = None, content: Union[str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.FrameCard" href="/wave/docs/api/types#h2o_wave.types.FrameCard">FrameCard</a></div><div class="api__description"><p>Render a card containing a HTML page inside an inline frame (an <code>iframe</code>).</p><p>Either a path or content can be provided as arguments.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The title for this card.</dd><dt><code>path</code></dt><dd>The path or URL of the web page, e.g. <code>/foo.html</code> or <code>http://example.com/foo.html</code></dd><dt><code>content</code></dt><dd>The HTML content of the page. A string containing <code>&lt;html&gt;...&lt;/html&gt;</code></dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.FrameCard" href="/wave/docs/api/types#h2o_wave.types.FrameCard">FrameCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="graphics_card"></a>graphics_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.graphics_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#graphics_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">graphics_card</span>(box: str, view_box: str, stage: Union[List[dict], str, NoneType] = None, scene: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str, NoneType] = None, width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.GraphicsCard" href="/wave/docs/api/types#h2o_wave.types.GraphicsCard">GraphicsCard</a></div><div class="api__description"><p>Create a card for displaying vector graphics.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>view_box</code></dt><dd>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, &#x27;0 0 400 300&#x27;. See: <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox</a></dd><dt><code>stage</code></dt><dd>Background layer for rendering static SVG elements. Must be packed to conserve memory.</dd><dt><code>scene</code></dt><dd>Foreground layer for rendering dynamic SVG elements.</dd><dt><code>width</code></dt><dd>The displayed width of the rectangular viewport. (Not the width of its coordinate system.)</dd><dt><code>height</code></dt><dd>The displayed height of the rectangular viewport. (Not the height of its coordinate system.)</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.GraphicsCard" href="/wave/docs/api/types#h2o_wave.types.GraphicsCard">GraphicsCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="grid_card"></a>grid_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.grid_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#grid_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">grid_card</span>(box: str, title: str, cells: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str], data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str], commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.GridCard" href="/wave/docs/api/types#h2o_wave.types.GridCard">GridCard</a></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>EXPERIMENTAL. DO NOT USE.</dd><dt><code>cells</code></dt><dd>EXPERIMENTAL. DO NOT USE.</dd><dt><code>data</code></dt><dd>EXPERIMENTAL. DO NOT USE.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.GridCard" href="/wave/docs/api/types#h2o_wave.types.GridCard">GridCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="header_card"></a>header_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.header_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#header_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">header_card</span>(box: str, title: str, subtitle: str, icon: Union[str, NoneType] = None, icon_color: Union[str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.HeaderCard" href="/wave/docs/api/types#h2o_wave.types.HeaderCard">HeaderCard</a></div><div class="api__description"><p>Render a card containing a HTML page inside an inline frame (iframe).</p><p>Either a path or content can be provided as arguments.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The title.</dd><dt><code>subtitle</code></dt><dd>The subtitle, displayed below the title.</dd><dt><code>icon</code></dt><dd>The icon type, displayed to the left.</dd><dt><code>icon_color</code></dt><dd>The icon&#x27;s color.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.HeaderCard" href="/wave/docs/api/types#h2o_wave.types.HeaderCard">HeaderCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="icon_table_cell_type"></a>icon_table_cell_type <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.icon_table_cell_type"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#icon_table_cell_type" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">icon_table_cell_type</span>(color: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.TableCellType" href="/wave/docs/api/types#h2o_wave.types.TableCellType">TableCellType</a></div><div class="api__description"><p>Create a cell type that renders a column&#x27;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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>color</code></dt><dd>Icon color.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.IconTableCellType" href="/wave/docs/api/types#h2o_wave.types.IconTableCellType">IconTableCellType</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="image_card"></a>image_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.image_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#image_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">image_card</span>(box: str, title: str, type: str, image: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.ImageCard" href="/wave/docs/api/types#h2o_wave.types.ImageCard">ImageCard</a></div><div class="api__description"><p>Create a card that displays a base64-encoded image.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The card&#x27;s title.</dd><dt><code>type</code></dt><dd>The image MIME subtype. One of <code>apng</code>, <code>bmp</code>, <code>gif</code>, <code>x-icon</code>, <code>jpeg</code>, <code>png</code>, <code>webp</code>.</dd><dt><code>image</code></dt><dd>Image data, base64-encoded.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.ImageCard" href="/wave/docs/api/types#h2o_wave.types.ImageCard">ImageCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="label"></a>label <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.label"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#label" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">label</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a label.</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>label</code></dt><dd>The text displayed on the label.</dd><dt><code>required</code></dt><dd>True if the field is required.</dd><dt><code>disabled</code></dt><dd>True if the label should be disabled.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Label" href="/wave/docs/api/types#h2o_wave.types.Label">Label</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="large_bar_stat_card"></a>large_bar_stat_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.large_bar_stat_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#large_bar_stat_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">large_bar_stat_card</span>(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[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.LargeBarStatCard" href="/wave/docs/api/types#h2o_wave.types.LargeBarStatCard">LargeBarStatCard</a></div><div class="api__description"><p>Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The card&#x27;s title.</dd><dt><code>caption</code></dt><dd>The card&#x27;s caption.</dd><dt><code>value</code></dt><dd>The primary value displayed.</dd><dt><code>aux_value</code></dt><dd>The auxiliary value, typically a target value.</dd><dt><code>value_caption</code></dt><dd>The caption displayed below the primary value.</dd><dt><code>aux_value_caption</code></dt><dd>The caption displayed below the auxiliary value.</dd><dt><code>progress</code></dt><dd>The value of the progress bar, between 0 and 1.</dd><dt><code>plot_color</code></dt><dd>The color of the progress bar.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.LargeBarStatCard" href="/wave/docs/api/types#h2o_wave.types.LargeBarStatCard">LargeBarStatCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="large_stat_card"></a>large_stat_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.large_stat_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#large_stat_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">large_stat_card</span>(box: str, title: str, value: str, aux_value: str, caption: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.LargeStatCard" href="/wave/docs/api/types#h2o_wave.types.LargeStatCard">LargeStatCard</a></div><div class="api__description"><p>Create a stat card displaying a primary value, an auxiliary value and a caption.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The card&#x27;s title.</dd><dt><code>value</code></dt><dd>The primary value displayed.</dd><dt><code>aux_value</code></dt><dd>The auxiliary value displayed next to the primary value.</dd><dt><code>caption</code></dt><dd>The caption displayed below the primary value.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.LargeStatCard" href="/wave/docs/api/types#h2o_wave.types.LargeStatCard">LargeStatCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="link"></a>link <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.link"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#link" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">link</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a hyperlink.</p><p>Hyperlinks can be internal or external. Internal hyperlinks have paths that begin with a <code>/</code> and point to URLs within the Q UI. All other kinds of paths are treated as external hyperlinks.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>label</code></dt><dd>The text to be displayed. If blank, the <code>path</code> is used as the label.</dd><dt><code>path</code></dt><dd>The path or URL to link to.</dd><dt><code>disabled</code></dt><dd>True if the link should be disabled.</dd><dt><code>download</code></dt><dd>True if the link should be used for file download.</dd><dt><code>button</code></dt><dd>True if the link should be rendered as a button.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Link" href="/wave/docs/api/types#h2o_wave.types.Link">Link</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="list_card"></a>list_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.list_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#list_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">list_card</span>(box: str, title: str, item_view: str, item_props: Union[dict, str], data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str], commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.ListCard" href="/wave/docs/api/types#h2o_wave.types.ListCard">ListCard</a></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE. Create a card containing other cards laid out in the form of a list (vertically, top-to-bottom).</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The title for this card.</dd><dt><code>item_view</code></dt><dd>The child card type.</dd><dt><code>item_props</code></dt><dd>The child card properties.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.ListCard" href="/wave/docs/api/types#h2o_wave.types.ListCard">ListCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="list_item1_card"></a>list_item1_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.list_item1_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#list_item1_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">list_item1_card</span>(box: str, title: str, caption: str, value: str, aux_value: str, data: Union[dict, str], commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.ListItem1Card" href="/wave/docs/api/types#h2o_wave.types.ListItem1Card">ListItem1Card</a></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>EXPERIMENTAL. DO NOT USE.</dd><dt><code>caption</code></dt><dd>EXPERIMENTAL. DO NOT USE.</dd><dt><code>value</code></dt><dd>EXPERIMENTAL. DO NOT USE.</dd><dt><code>aux_value</code></dt><dd>EXPERIMENTAL. DO NOT USE.</dd><dt><code>data</code></dt><dd>EXPERIMENTAL. DO NOT USE.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.ListItem1Card" href="/wave/docs/api/types#h2o_wave.types.ListItem1Card">ListItem1Card</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="mark"></a>mark <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.mark"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#mark" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">mark</span>(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) ‑&gt; <a title="h2o_wave.types.Mark" href="/wave/docs/api/types#h2o_wave.types.Mark">Mark</a></div><div class="api__description"><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>coord</code></dt><dd>Coordinate system. <code>rect</code> is synonymous to <code>cartesian</code>. <code>theta</code> is transposed <code>polar</code>. One of &#x27;rect&#x27;, &#x27;cartesian&#x27;, &#x27;polar&#x27;, &#x27;theta&#x27;, &#x27;helix&#x27;.</dd><dt><code>type</code></dt><dd>Graphical geometry. One of &#x27;interval&#x27;, &#x27;line&#x27;, &#x27;path&#x27;, &#x27;point&#x27;, &#x27;area&#x27;, &#x27;polygon&#x27;, &#x27;schema&#x27;, &#x27;edge&#x27;, &#x27;heatmap&#x27;.</dd><dt><code>x</code></dt><dd>X field or value.</dd><dt><code>x0</code></dt><dd>X base field or value.</dd><dt><code>x1</code></dt><dd>X bin lower bound field or value. For histograms.</dd><dt><code>x2</code></dt><dd>X bin upper bound field or value. For histograms.</dd><dt><code>x_min</code></dt><dd>X axis scale minimum.</dd><dt><code>x_max</code></dt><dd>X axis scale maximum.</dd><dt><code>x_nice</code></dt><dd>Whether to nice X axis scale ticks.</dd><dt><code>x_scale</code></dt><dd>X axis scale type. One of &#x27;linear&#x27;, &#x27;cat&#x27;, &#x27;category&#x27;, &#x27;identity&#x27;, &#x27;log&#x27;, &#x27;pow&#x27;, &#x27;time&#x27;, &#x27;timeCat&#x27;, &#x27;quantize&#x27;, &#x27;quantile&#x27;.</dd><dt><code>x_title</code></dt><dd>X axis title.</dd><dt><code>y</code></dt><dd>Y field or value.</dd><dt><code>y0</code></dt><dd>Y base field or value.</dd><dt><code>y1</code></dt><dd>Y bin lower bound field or value. For histograms.</dd><dt><code>y2</code></dt><dd>Y bin upper bound field or value. For histograms.</dd><dt><code>y_min</code></dt><dd>Y axis scale minimum.</dd><dt><code>y_max</code></dt><dd>Y axis scale maximum.</dd><dt><code>y_nice</code></dt><dd>Whether to nice Y axis scale ticks.</dd><dt><code>y_scale</code></dt><dd>Y axis scale type. One of &#x27;linear&#x27;, &#x27;cat&#x27;, &#x27;category&#x27;, &#x27;identity&#x27;, &#x27;log&#x27;, &#x27;pow&#x27;, &#x27;time&#x27;, &#x27;timeCat&#x27;, &#x27;quantize&#x27;, &#x27;quantile&#x27;.</dd><dt><code>y_title</code></dt><dd>Y axis title.</dd><dt><code>color</code></dt><dd>Mark color field or value.</dd><dt><code>color_range</code></dt><dd>Mark color range for multi-series plots. A string containing space-separated colors, e.g. <code>&#x27;#fee8c8 #fdbb84 #e34a33&#x27;</code></dd><dt><code>color_domain</code></dt><dd>The unique values in the data (labels or categories or classes) to map colors to, e.g. <code>[&#x27;high&#x27;, &#x27;medium&#x27;, &#x27;low&#x27;]</code>. If this is not provided, the unique values are automatically inferred from the <code>color</code> attribute.</dd><dt><code>shape</code></dt><dd>Mark shape field or value for <code>point</code> mark types. Possible values are &#x27;circle&#x27;, &#x27;square&#x27;, &#x27;bowtie&#x27;, &#x27;diamond&#x27;, &#x27;hexagon&#x27;, &#x27;triangle&#x27;, &#x27;triangle-down&#x27;, &#x27;cross&#x27;, &#x27;tick&#x27;, &#x27;plus&#x27;, &#x27;hyphen&#x27;, &#x27;line&#x27;.</dd><dt><code>shape_range</code></dt><dd>Mark shape range for multi-series plots using <code>point</code> mark types. A string containing space-separated shapes, e.g. <code>&#x27;circle square diamond&#x27;</code></dd><dt><code>size</code></dt><dd>Mark size field or value.</dd><dt><code>size_range</code></dt><dd>Mark size range. A string containing space-separated integers, e.g. <code>&#x27;4 30&#x27;</code></dd><dt><code>stack</code></dt><dd>Field to stack marks by, or &#x27;auto&#x27; to infer.</dd><dt><code>dodge</code></dt><dd>Field to dodge marks by, or &#x27;auto&#x27; to infer.</dd><dt><code>curve</code></dt><dd>Curve type for <code>line</code> and <code>area</code> mark types. One of &#x27;none&#x27;, &#x27;smooth&#x27;, &#x27;step-before&#x27;, &#x27;step&#x27;, &#x27;step-after&#x27;.</dd><dt><code>fill_color</code></dt><dd>Mark fill color.</dd><dt><code>fill_opacity</code></dt><dd>Mark fill opacity.</dd><dt><code>stroke_color</code></dt><dd>Mark stroke color.</dd><dt><code>stroke_opacity</code></dt><dd>Mark stroke opacity.</dd><dt><code>stroke_size</code></dt><dd>Mark stroke size.</dd><dt><code>stroke_dash</code></dt><dd>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].</dd><dt><code>label</code></dt><dd>Label field or value.</dd><dt><code>label_offset</code></dt><dd>Distance between label and mark.</dd><dt><code>label_offset_x</code></dt><dd>Horizontal distance between label and mark.</dd><dt><code>label_offset_y</code></dt><dd>Vertical distance between label and mark.</dd><dt><code>label_rotation</code></dt><dd>Label rotation angle, in degrees, or &#x27;none&#x27; to disable automatic rotation. The default behavior is &#x27;auto&#x27; for automatic rotation.</dd><dt><code>label_position</code></dt><dd>Label position relative to the mark. One of &#x27;top&#x27;, &#x27;bottom&#x27;, &#x27;middle&#x27;, &#x27;left&#x27;, &#x27;right&#x27;.</dd><dt><code>label_overlap</code></dt><dd>Strategy to use if labels overlap. One of &#x27;hide&#x27;, &#x27;overlap&#x27;, &#x27;constrain&#x27;.</dd><dt><code>label_fill_color</code></dt><dd>Label fill color.</dd><dt><code>label_fill_opacity</code></dt><dd>Label fill opacity.</dd><dt><code>label_stroke_color</code></dt><dd>Label stroke color.</dd><dt><code>label_stroke_opacity</code></dt><dd>Label stroke opacity.</dd><dt><code>label_stroke_size</code></dt><dd>Label stroke size (line width or pen thickness).</dd><dt><code>label_font_size</code></dt><dd>Label font size.</dd><dt><code>label_font_weight</code></dt><dd>Label font weight.</dd><dt><code>label_line_height</code></dt><dd>Label line height.</dd><dt><code>label_align</code></dt><dd>Label text alignment. One of &#x27;left&#x27;, &#x27;right&#x27;, &#x27;center&#x27;, &#x27;start&#x27;, &#x27;end&#x27;.</dd><dt><code>ref_stroke_color</code></dt><dd>Reference line stroke color.</dd><dt><code>ref_stroke_opacity</code></dt><dd>Reference line stroke opacity.</dd><dt><code>ref_stroke_size</code></dt><dd>Reference line stroke size (line width or pen thickness).</dd><dt><code>ref_stroke_dash</code></dt><dd>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].</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Mark" href="/wave/docs/api/types#h2o_wave.types.Mark">Mark</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="markdown_card"></a>markdown_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.markdown_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#markdown_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">markdown_card</span>(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.MarkdownCard" href="/wave/docs/api/types#h2o_wave.types.MarkdownCard">MarkdownCard</a></div><div class="api__description"><p>Create a card that renders Markdown content.</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The title for this card.</dd><dt><code>content</code></dt><dd>The markdown content. Supports Github Flavored Markdown (GFM): <a href="https://guides.github.com/features/mastering-markdown/" target="_blank" rel="noopener noreferrer">https://guides.github.com/features/mastering-markdown/</a></dd><dt><code>data</code></dt><dd>Additional data for the card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.MarkdownCard" href="/wave/docs/api/types#h2o_wave.types.MarkdownCard">MarkdownCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="markup"></a>markup <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.markup"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#markup" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">markup</span>(content: str, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Render HTML content.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>content</code></dt><dd>The HTML content.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Markup" href="/wave/docs/api/types#h2o_wave.types.Markup">Markup</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="markup_card"></a>markup_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.markup_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#markup_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">markup_card</span>(box: str, title: str, content: str, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.MarkupCard" href="/wave/docs/api/types#h2o_wave.types.MarkupCard">MarkupCard</a></div><div class="api__description"><p>Render HTML content.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The title for this card.</dd><dt><code>content</code></dt><dd>The HTML content.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.MarkupCard" href="/wave/docs/api/types#h2o_wave.types.MarkupCard">MarkupCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="message_bar"></a>message_bar <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.message_bar"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#message_bar" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">message_bar</span>(type: Union[str, NoneType] = None, text: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a message bar.</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>type</code></dt><dd>The icon and color of the message bar. One of &#x27;info&#x27;, &#x27;error&#x27;, &#x27;warning&#x27;, &#x27;success&#x27;, &#x27;danger&#x27;, &#x27;blocked&#x27;.</dd><dt><code>text</code></dt><dd>The text displayed on the message bar.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.MessageBar" href="/wave/docs/api/types#h2o_wave.types.MessageBar">MessageBar</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="meta_card"></a>meta_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.meta_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#meta_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">meta_card</span>(box: str, title: Union[str, NoneType] = None, refresh: Union[int, NoneType] = None, notification: Union[str, NoneType] = None, redirect: Union[str, NoneType] = None, icon: Union[str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.MetaCard" href="/wave/docs/api/types#h2o_wave.types.MetaCard">MetaCard</a></div><div class="api__description"><p>Represents page-global state.</p><p>This card is invisible. It is used to control attributes of the active page.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The title of the page.</dd><dt><code>refresh</code></dt><dd>Refresh rate in seconds. A value of 0 turns off live-updates. Values != 0 are currently ignored (reserved for future use).</dd><dt><code>notification</code></dt><dd>Display a desktop notification to the user.</dd><dt><code>redirect</code></dt><dd>Redirect the page to a new URL.</dd><dt><code>icon</code></dt><dd>Shortcut icon path. Preferably a <code>.png</code> file (<code>.ico</code> files may not work in mobile browsers).</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.MetaCard" href="/wave/docs/api/types#h2o_wave.types.MetaCard">MetaCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="nav_card"></a>nav_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.nav_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#nav_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">nav_card</span>(box: str, items: List[<a title="h2o_wave.types.NavGroup" href="/wave/docs/api/types#h2o_wave.types.NavGroup">NavGroup</a>], commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.NavCard" href="/wave/docs/api/types#h2o_wave.types.NavCard">NavCard</a></div><div class="api__description"><p>Create a card containing a navigation pane.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>items</code></dt><dd>The navigation groups contained in this pane.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.NavCard" href="/wave/docs/api/types#h2o_wave.types.NavCard">NavCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="nav_group"></a>nav_group <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.nav_group"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#nav_group" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">nav_group</span>(label: str, items: List[<a title="h2o_wave.types.NavItem" href="/wave/docs/api/types#h2o_wave.types.NavItem">NavItem</a>]) ‑&gt; <a title="h2o_wave.types.NavGroup" href="/wave/docs/api/types#h2o_wave.types.NavGroup">NavGroup</a></div><div class="api__description"><p>Create a group of navigation items.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>label</code></dt><dd>The label to display for this group.</dd><dt><code>items</code></dt><dd>The navigation items contained in this group.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.NavGroup" href="/wave/docs/api/types#h2o_wave.types.NavGroup">NavGroup</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="nav_item"></a>nav_item <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.nav_item"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#nav_item" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">nav_item</span>(name: str, label: str) ‑&gt; <a title="h2o_wave.types.NavItem" href="/wave/docs/api/types#h2o_wave.types.NavItem">NavItem</a></div><div class="api__description"><p>Create a navigation item.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>The name of this item. Prefix the name with a &#x27;#&#x27; to trigger hash-change navigation.</dd><dt><code>label</code></dt><dd>The label to display.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.NavItem" href="/wave/docs/api/types#h2o_wave.types.NavItem">NavItem</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="picker"></a>picker <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.picker"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#picker" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">picker</span>(name: str, choices: List[<a title="h2o_wave.types.Choice" href="/wave/docs/api/types#h2o_wave.types.Choice">Choice</a>], 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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>choices</code></dt><dd>The choices to be presented.</dd><dt><code>label</code></dt><dd>Text to be displayed above the component.</dd><dt><code>values</code></dt><dd>The names of the selected choices.</dd><dt><code>max_choices</code></dt><dd>Maximum number of selectable choices. Defaults to no limit.</dd><dt><code>disabled</code></dt><dd>Controls whether the picker should be disabled or not.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Picker" href="/wave/docs/api/types#h2o_wave.types.Picker">Picker</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="pixel_art_card"></a>pixel_art_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.pixel_art_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#pixel_art_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">pixel_art_card</span>(box: str, title: str, data: Union[dict, str], commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.PixelArtCard" href="/wave/docs/api/types#h2o_wave.types.PixelArtCard">PixelArtCard</a></div><div class="api__description"><p>Create a card displaying a collaborative Pixel art tool, just for kicks.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The title for this card.</dd><dt><code>data</code></dt><dd>The data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.PixelArtCard" href="/wave/docs/api/types#h2o_wave.types.PixelArtCard">PixelArtCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="plot"></a>plot <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.plot"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#plot" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">plot</span>(marks: List[<a title="h2o_wave.types.Mark" href="/wave/docs/api/types#h2o_wave.types.Mark">Mark</a>]) ‑&gt; <a title="h2o_wave.types.Plot" href="/wave/docs/api/types#h2o_wave.types.Plot">Plot</a></div><div class="api__description"><p>Create a plot. A plot is composed of one or more graphical mark layers.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>marks</code></dt><dd>The graphical mark layers contained in this plot.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Plot" href="/wave/docs/api/types#h2o_wave.types.Plot">Plot</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="plot_card"></a>plot_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.plot_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#plot_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">plot_card</span>(box: str, title: str, data: Union[dict, str], plot: <a title="h2o_wave.types.Plot" href="/wave/docs/api/types#h2o_wave.types.Plot">Plot</a>, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.PlotCard" href="/wave/docs/api/types#h2o_wave.types.PlotCard">PlotCard</a></div><div class="api__description"><p>Create a card displaying a plot.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The title for this card.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>plot</code></dt><dd>The plot to be displayed in this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.PlotCard" href="/wave/docs/api/types#h2o_wave.types.PlotCard">PlotCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="progress"></a>progress <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.progress"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#progress" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">progress</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a progress bar.</p><p>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.</p><p>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]</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>label</code></dt><dd>The text displayed above the bar.</dd><dt><code>caption</code></dt><dd>The text displayed below the bar.</dd><dt><code>value</code></dt><dd>The progress, between 0.0 and 1.0, or -1 (default) if indeterminate.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Progress" href="/wave/docs/api/types#h2o_wave.types.Progress">Progress</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="progress_table_cell_type"></a>progress_table_cell_type <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.progress_table_cell_type"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#progress_table_cell_type" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">progress_table_cell_type</span>(color: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.TableCellType" href="/wave/docs/api/types#h2o_wave.types.TableCellType">TableCellType</a></div><div class="api__description"><p>Create a cell type that renders a column&#x27;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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>color</code></dt><dd>Color of the progress arc.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.ProgressTableCellType" href="/wave/docs/api/types#h2o_wave.types.ProgressTableCellType">ProgressTableCellType</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="range_slider"></a>range_slider <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.range_slider"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#range_slider" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">range_slider</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a range slider.</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>min</code></dt><dd>The minimum value of the slider. Defaults to 0.</dd><dt><code>max</code></dt><dd>The maximum value of the slider. Defaults to 100.</dd><dt><code>step</code></dt><dd>The difference between two adjacent values of the slider.</dd><dt><code>min_value</code></dt><dd>The lower bound of the selected range.</dd><dt><code>max_value</code></dt><dd>The upper bound of the selected range.</dd><dt><code>disabled</code></dt><dd>True if this field is disabled.</dd><dt><code>trigger</code></dt><dd>True if the form should be submitted when the slider value changes.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.RangeSlider" href="/wave/docs/api/types#h2o_wave.types.RangeSlider">RangeSlider</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="repeat_card"></a>repeat_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.repeat_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#repeat_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">repeat_card</span>(box: str, item_view: str, item_props: Union[dict, str], data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, str], commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.RepeatCard" href="/wave/docs/api/types#h2o_wave.types.RepeatCard">RepeatCard</a></div><div class="api__description"><p>EXPERIMENTAL. DO NOT USE. Create a card containing other cards.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>item_view</code></dt><dd>EXPERIMENTAL. DO NOT USE.</dd><dt><code>item_props</code></dt><dd>The child card properties.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.RepeatCard" href="/wave/docs/api/types#h2o_wave.types.RepeatCard">RepeatCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="separator"></a>separator <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.separator"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#separator" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">separator</span>(label: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a separator.</p><p>A separator visually separates content into groups.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>label</code></dt><dd>The text displayed on the separator.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Separator" href="/wave/docs/api/types#h2o_wave.types.Separator">Separator</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="slider"></a>slider <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.slider"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#slider" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">slider</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a slider.</p><p>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.</p><p>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.</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>min</code></dt><dd>The minimum value of the slider.</dd><dt><code>max</code></dt><dd>The maximum value of the slider.</dd><dt><code>step</code></dt><dd>The difference between two adjacent values of the slider.</dd><dt><code>value</code></dt><dd>The current value of the slider.</dd><dt><code>disabled</code></dt><dd>True if this field is disabled.</dd><dt><code>trigger</code></dt><dd>True if the form should be submitted when the slider value changes.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Slider" href="/wave/docs/api/types#h2o_wave.types.Slider">Slider</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="small_series_stat_card"></a>small_series_stat_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.small_series_stat_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#small_series_stat_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">small_series_stat_card</span>(box: str, title: str, value: str, plot_data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, 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[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.SmallSeriesStatCard" href="/wave/docs/api/types#h2o_wave.types.SmallSeriesStatCard">SmallSeriesStatCard</a></div><div class="api__description"><p>Create a small stat card displaying a primary value and a series plot.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The card&#x27;s title.</dd><dt><code>value</code></dt><dd>The primary value displayed.</dd><dt><code>plot_data</code></dt><dd>The plot&#x27;s data.</dd><dt><code>plot_value</code></dt><dd>The data field to use for y-axis values.</dd><dt><code>plot_zero_value</code></dt><dd>The base value to use for each y-axis mark. Set this to <code>0</code> if you want to pin the x-axis at <code>y=0</code>. If not provided, the minimum value from the data is used.</dd><dt><code>plot_category</code></dt><dd>The data field to use for x-axis values (ignored if <code>plot_type</code> is <code>area</code>; must be provided if <code>plot_type</code> is <code>interval</code>). Defaults to &#x27;x&#x27;.</dd><dt><code>plot_type</code></dt><dd>The type of plot. Defaults to <code>area</code>. One of &#x27;area&#x27;, &#x27;interval&#x27;.</dd><dt><code>plot_curve</code></dt><dd>The plot&#x27;s curve style. Defaults to <code>linear</code>. One of &#x27;linear&#x27;, &#x27;smooth&#x27;, &#x27;step&#x27;, &#x27;step-after&#x27;, &#x27;step-before&#x27;.</dd><dt><code>plot_color</code></dt><dd>The plot&#x27;s color.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.SmallSeriesStatCard" href="/wave/docs/api/types#h2o_wave.types.SmallSeriesStatCard">SmallSeriesStatCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="small_stat_card"></a>small_stat_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.small_stat_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#small_stat_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">small_stat_card</span>(box: str, title: str, value: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.SmallStatCard" href="/wave/docs/api/types#h2o_wave.types.SmallStatCard">SmallStatCard</a></div><div class="api__description"><p>Create a stat card displaying a single value.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The card&#x27;s title.</dd><dt><code>value</code></dt><dd>The primary value displayed.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.SmallStatCard" href="/wave/docs/api/types#h2o_wave.types.SmallStatCard">SmallStatCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="spinbox"></a>spinbox <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.spinbox"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#spinbox" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">spinbox</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a spinbox.</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>min</code></dt><dd>The minimum value of the spinbox.</dd><dt><code>max</code></dt><dd>The maximum value of the spinbox.</dd><dt><code>step</code></dt><dd>The difference between two adjacent values of the spinbox.</dd><dt><code>value</code></dt><dd>The current value of the spinbox.</dd><dt><code>disabled</code></dt><dd>True if this field is disabled.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Spinbox" href="/wave/docs/api/types#h2o_wave.types.Spinbox">Spinbox</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step"></a>step <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.step"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#step" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">step</span>(label: str, icon: Union[str, NoneType] = None, done: Union[bool, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Step" href="/wave/docs/api/types#h2o_wave.types.Step">Step</a></div><div class="api__description"><p>Create a step for a stepper.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>label</code></dt><dd>Text displayed below icon.</dd><dt><code>icon</code></dt><dd>Icon to be displayed.</dd><dt><code>done</code></dt><dd>Indicates whether this step has already been completed.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Step" href="/wave/docs/api/types#h2o_wave.types.Step">Step</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="stepper"></a>stepper <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.stepper"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#stepper" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">stepper</span>(name: str, items: List[<a title="h2o_wave.types.Step" href="/wave/docs/api/types#h2o_wave.types.Step">Step</a>], visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>items</code></dt><dd>The sequence of steps to be displayed.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Stepper" href="/wave/docs/api/types#h2o_wave.types.Stepper">Stepper</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tab"></a>tab <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.tab"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tab" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">tab</span>(name: str, label: Union[str, NoneType] = None, icon: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Tab" href="/wave/docs/api/types#h2o_wave.types.Tab">Tab</a></div><div class="api__description"><p>Create a tab.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>The text displayed on the tab.</dd><dt><code>icon</code></dt><dd>The icon displayed on the tab.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Tab" href="/wave/docs/api/types#h2o_wave.types.Tab">Tab</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tab_card"></a>tab_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.tab_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tab_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">tab_card</span>(box: str, items: List[<a title="h2o_wave.types.Tab" href="/wave/docs/api/types#h2o_wave.types.Tab">Tab</a>], value: Union[str, NoneType] = None, link: Union[bool, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.TabCard" href="/wave/docs/api/types#h2o_wave.types.TabCard">TabCard</a></div><div class="api__description"><p>Create a card containing tabs for navigation.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>items</code></dt><dd>Items to render.</dd><dt><code>value</code></dt><dd>The name of the tab to select.</dd><dt><code>link</code></dt><dd>True if tabs should be rendered as links and not a standard tab.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TabCard" href="/wave/docs/api/types#h2o_wave.types.TabCard">TabCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="table"></a>table <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.table"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#table" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">table</span>(name: str, columns: List[<a title="h2o_wave.types.TableColumn" href="/wave/docs/api/types#h2o_wave.types.TableColumn">TableColumn</a>], rows: List[<a title="h2o_wave.types.TableRow" href="/wave/docs/api/types#h2o_wave.types.TableRow">TableRow</a>], 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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create an interactive table.</p><p>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.</p><p>If <code>multiple</code> is set to False (default), each row in the table is clickable. When a row is clicked, the form is submitted automatically, and <code>q.args.table_name</code> is set to <code>[row_name]</code>, where <code>table_name</code> is the <code>name</code> of the table, and <code>row_name</code> is the <code>name</code> of the row that was clicked on.</p><p>If <code>multiple</code> 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,<code>q.args.table_name</code> is set to <code>[row1_name, row2_name, …]</code> where <code>table_name</code> is the <code>name</code> of the table, and <code>row1_name</code>, <code>row2_name</code> are the <code>name</code> of the rows that were selected. Note that if <code>multiple</code> is set to True, the form is not submitted automatically, and one or more buttons are required in the form to trigger submission.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>columns</code></dt><dd>The columns in this table.</dd><dt><code>rows</code></dt><dd>The rows in this table.</dd><dt><code>multiple</code></dt><dd>True to allow multiple rows to be selected.</dd><dt><code>groupable</code></dt><dd>True to allow group by feature.</dd><dt><code>downloadable</code></dt><dd>Indicates whether the contents of this table can be downloaded and saved as a CSV file. Defaults to False.</dd><dt><code>resettable</code></dt><dd>Indicates whether a Reset button should be displayed to reset search / filter / group-by values to their defaults. Defaults to False.</dd><dt><code>height</code></dt><dd>The height of the table, e.g. &#x27;400px&#x27;, &#x27;50%&#x27;, etc.</dd><dt><code>values</code></dt><dd>The names of the selected rows. If this parameter is set, multiple selections will be allowed (<code>multiple</code> is assumed to be <code>True</code>).</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Table" href="/wave/docs/api/types#h2o_wave.types.Table">Table</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="table_cell_type"></a>table_cell_type <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.table_cell_type"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#table_cell_type" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">table_cell_type</span>(progress: Union[<a title="h2o_wave.types.ProgressTableCellType" href="/wave/docs/api/types#h2o_wave.types.ProgressTableCellType">ProgressTableCellType</a>, NoneType] = None, icon: Union[<a title="h2o_wave.types.IconTableCellType" href="/wave/docs/api/types#h2o_wave.types.IconTableCellType">IconTableCellType</a>, NoneType] = None) ‑&gt; <a title="h2o_wave.types.TableCellType" href="/wave/docs/api/types#h2o_wave.types.TableCellType">TableCellType</a></div><div class="api__description"><p>Defines cell content to be rendered instead of a simple text.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>progress</code></dt><dd>No documentation available.</dd><dt><code>icon</code></dt><dd>No documentation available.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TableCellType" href="/wave/docs/api/types#h2o_wave.types.TableCellType">TableCellType</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="table_column"></a>table_column <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.table_column"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#table_column" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">table_column</span>(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[<a title="h2o_wave.types.TableCellType" href="/wave/docs/api/types#h2o_wave.types.TableCellType">TableCellType</a>, NoneType] = None) ‑&gt; <a title="h2o_wave.types.TableColumn" href="/wave/docs/api/types#h2o_wave.types.TableColumn">TableColumn</a></div><div class="api__description"><p>Create a table column.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this column.</dd><dt><code>label</code></dt><dd>The text displayed on the column header.</dd><dt><code>min_width</code></dt><dd>The minimum width of this column, e.g. &#x27;50px&#x27;. Only <code>px</code> units are supported at this time.</dd><dt><code>max_width</code></dt><dd>The maximum width of this column, e.g. &#x27;100px&#x27;. Only <code>px</code> units are supported at this time.</dd><dt><code>sortable</code></dt><dd>Indicates whether the column is sortable.</dd><dt><code>searchable</code></dt><dd>Indicates whether the contents of this column can be searched through. Enables a search box for the table if true.</dd><dt><code>filterable</code></dt><dd>Indicates whether the contents of this column are displayed as filters in a dropdown.</dd><dt><code>link</code></dt><dd>Indicates whether each cell in this column should be displayed as a clickable link.</dd><dt><code>cell_type</code></dt><dd>Defines how to render each cell in this column. Defaults to plain text.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TableColumn" href="/wave/docs/api/types#h2o_wave.types.TableColumn">TableColumn</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="table_row"></a>table_row <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.table_row"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#table_row" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">table_row</span>(name: str, cells: List[str]) ‑&gt; <a title="h2o_wave.types.TableRow" href="/wave/docs/api/types#h2o_wave.types.TableRow">TableRow</a></div><div class="api__description"><p>Create a table row.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this row.</dd><dt><code>cells</code></dt><dd>The cells in this row (displayed left to right).</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TableRow" href="/wave/docs/api/types#h2o_wave.types.TableRow">TableRow</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tabs"></a>tabs <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.tabs"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tabs" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">tabs</span>(name: str, value: Union[str, NoneType] = None, items: Union[List[<a title="h2o_wave.types.Tab" href="/wave/docs/api/types#h2o_wave.types.Tab">Tab</a>], NoneType] = None, visible: Union[bool, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a tab bar.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>value</code></dt><dd>The name of the tab to select.</dd><dt><code>items</code></dt><dd>The tabs in this tab bar.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Tabs" href="/wave/docs/api/types#h2o_wave.types.Tabs">Tabs</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tall_gauge_stat_card"></a>tall_gauge_stat_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.tall_gauge_stat_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tall_gauge_stat_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">tall_gauge_stat_card</span>(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[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.TallGaugeStatCard" href="/wave/docs/api/types#h2o_wave.types.TallGaugeStatCard">TallGaugeStatCard</a></div><div class="api__description"><p>Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The card&#x27;s title.</dd><dt><code>value</code></dt><dd>The primary value displayed.</dd><dt><code>aux_value</code></dt><dd>The auxiliary value displayed next to the primary value.</dd><dt><code>progress</code></dt><dd>The value of the progress gauge, between 0 and 1.</dd><dt><code>plot_color</code></dt><dd>The color of the progress gauge.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TallGaugeStatCard" href="/wave/docs/api/types#h2o_wave.types.TallGaugeStatCard">TallGaugeStatCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tall_series_stat_card"></a>tall_series_stat_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.tall_series_stat_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#tall_series_stat_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">tall_series_stat_card</span>(box: str, title: str, value: str, aux_value: str, plot_data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, 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[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.TallSeriesStatCard" href="/wave/docs/api/types#h2o_wave.types.TallSeriesStatCard">TallSeriesStatCard</a></div><div class="api__description"><p>Create a tall stat card displaying a primary value, an auxiliary value and a series plot.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The card&#x27;s title.</dd><dt><code>value</code></dt><dd>The primary value displayed.</dd><dt><code>aux_value</code></dt><dd>The auxiliary value displayed below the primary value.</dd><dt><code>plot_data</code></dt><dd>The plot&#x27;s data.</dd><dt><code>plot_value</code></dt><dd>The data field to use for y-axis values.</dd><dt><code>plot_zero_value</code></dt><dd>The base value to use for each y-axis mark. Set this to <code>0</code> if you want to pin the x-axis at <code>y=0</code>. If not provided, the minimum value from the data is used.</dd><dt><code>plot_category</code></dt><dd>The data field to use for x-axis values (ignored if <code>plot_type</code> is <code>area</code>; must be provided if <code>plot_type</code> is <code>interval</code>). Defaults to &#x27;x&#x27;.</dd><dt><code>plot_type</code></dt><dd>The type of plot. Defaults to <code>area</code>. One of &#x27;area&#x27;, &#x27;interval&#x27;.</dd><dt><code>plot_curve</code></dt><dd>The plot&#x27;s curve style. Defaults to <code>linear</code>. One of &#x27;linear&#x27;, &#x27;smooth&#x27;, &#x27;step&#x27;, &#x27;step-after&#x27;, &#x27;step-before&#x27;.</dd><dt><code>plot_color</code></dt><dd>The plot&#x27;s color.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TallSeriesStatCard" href="/wave/docs/api/types#h2o_wave.types.TallSeriesStatCard">TallSeriesStatCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="template"></a>template <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.template"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#template" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">template</span>(content: str, data: Union[dict, str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Render dynamic content using an HTML template.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>content</code></dt><dd>The Handlebars template. <a href="https://handlebarsjs.com/guide/" target="_blank" rel="noopener noreferrer">https://handlebarsjs.com/guide/</a></dd><dt><code>data</code></dt><dd>Data for the Handlebars template</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Template" href="/wave/docs/api/types#h2o_wave.types.Template">Template</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="template_card"></a>template_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.template_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#template_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">template_card</span>(box: str, title: str, content: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.TemplateCard" href="/wave/docs/api/types#h2o_wave.types.TemplateCard">TemplateCard</a></div><div class="api__description"><p>Render dynamic content using an HTML template.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The title for this card.</dd><dt><code>content</code></dt><dd>The Handlebars template. <a href="https://handlebarsjs.com/guide/" target="_blank" rel="noopener noreferrer">https://handlebarsjs.com/guide/</a></dd><dt><code>data</code></dt><dd>Data for the Handlebars template.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TemplateCard" href="/wave/docs/api/types#h2o_wave.types.TemplateCard">TemplateCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="text"></a>text <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.text"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#text" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">text</span>(content: str, size: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create text content.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>content</code></dt><dd>The text content.</dd><dt><code>size</code></dt><dd>The font size of the text content. One of &#x27;xl&#x27;, &#x27;l&#x27;, &#x27;m&#x27;, &#x27;s&#x27;, &#x27;xs&#x27;.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>Tooltip message.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Text" href="/wave/docs/api/types#h2o_wave.types.Text">Text</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="text_l"></a>text_l <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.text_l"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#text_l" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">text_l</span>(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None, name: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create large sized text content.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>content</code></dt><dd>The text content.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>Tooltip message.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TextL" href="/wave/docs/api/types#h2o_wave.types.TextL">TextL</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="text_m"></a>text_m <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.text_m"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#text_m" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">text_m</span>(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create medium sized text content.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>content</code></dt><dd>The text content.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>Tooltip message.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TextM" href="/wave/docs/api/types#h2o_wave.types.TextM">TextM</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="text_s"></a>text_s <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.text_s"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#text_s" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">text_s</span>(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create small sized text content.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>content</code></dt><dd>The text content.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>Tooltip message.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TextS" href="/wave/docs/api/types#h2o_wave.types.TextS">TextS</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="text_xl"></a>text_xl <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.text_xl"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#text_xl" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">text_xl</span>(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None, name: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create extra-large sized text content.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>content</code></dt><dd>The text content.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>Tooltip message.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TextXl" href="/wave/docs/api/types#h2o_wave.types.TextXl">TextXl</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="text_xs"></a>text_xs <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.text_xs"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#text_xs" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">text_xs</span>(content: str, visible: Union[bool, NoneType] = None, tooltip: Union[str, NoneType] = None, name: Union[str, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create extra-small sized text content.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>content</code></dt><dd>The text content.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>Tooltip message.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.TextXs" href="/wave/docs/api/types#h2o_wave.types.TextXs">TextXs</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="textbox"></a>textbox <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.textbox"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#textbox" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">textbox</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a text box.</p><p>The text box component enables a user to type text into an app. It&#x27;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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>The text displayed above the field.</dd><dt><code>placeholder</code></dt><dd>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.</dd><dt><code>value</code></dt><dd>Text to be displayed inside the text box.</dd><dt><code>mask</code></dt><dd>The masking string that defines the mask&#x27;s behavior. A backslash will escape any character. Special format characters are: &#x27;9&#x27;: [0-9] &#x27;a&#x27;: [a-zA-Z] &#x27;*&#x27;: [a-zA-Z0-9].</dd><dt><code>icon</code></dt><dd>Icon displayed in the far right end of the text field.</dd><dt><code>prefix</code></dt><dd>Text to be displayed before the text box contents.</dd><dt><code>suffix</code></dt><dd>Text to be displayed after the text box contents.</dd><dt><code>error</code></dt><dd>Text to be displayed as an error below the text box.</dd><dt><code>required</code></dt><dd>True if the text box is a required field.</dd><dt><code>disabled</code></dt><dd>True if the text box is disabled.</dd><dt><code>readonly</code></dt><dd>True if the text box is a read-only field.</dd><dt><code>multiline</code></dt><dd>True if the text box should allow multi-line text entry.</dd><dt><code>password</code></dt><dd>True if the text box should hide text content.</dd><dt><code>trigger</code></dt><dd>True if the form should be submitted when the text value changes.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Textbox" href="/wave/docs/api/types#h2o_wave.types.Textbox">Textbox</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="toggle"></a>toggle <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.toggle"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#toggle" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">toggle</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>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.</p><p>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.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>label</code></dt><dd>Text to be displayed alongside the component.</dd><dt><code>value</code></dt><dd>True if selected, False if unselected.</dd><dt><code>disabled</code></dt><dd>True if the checkbox is disabled.</dd><dt><code>trigger</code></dt><dd>True if the form should be submitted when the toggle value changes.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd><dt><code>tooltip</code></dt><dd>An optional tooltip message displayed when a user clicks the help icon to the right of the component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Toggle" href="/wave/docs/api/types#h2o_wave.types.Toggle">Toggle</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="toolbar_card"></a>toolbar_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.toolbar_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#toolbar_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">toolbar_card</span>(box: str, items: List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], secondary_items: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None, overflow_items: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.ToolbarCard" href="/wave/docs/api/types#h2o_wave.types.ToolbarCard">ToolbarCard</a></div><div class="api__description"><p>Create a card containing a toolbar.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>items</code></dt><dd>Items to render.</dd><dt><code>secondary_items</code></dt><dd>Items to render on the right side (or left, in RTL).</dd><dt><code>overflow_items</code></dt><dd>Items to render in an overflow menu.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.ToolbarCard" href="/wave/docs/api/types#h2o_wave.types.ToolbarCard">ToolbarCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="vega_card"></a>vega_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.vega_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#vega_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">vega_card</span>(box: str, title: str, specification: str, data: Union[dict, str, NoneType] = None, commands: Union[List[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.VegaCard" href="/wave/docs/api/types#h2o_wave.types.VegaCard">VegaCard</a></div><div class="api__description"><p>Create a card containing a Vega-lite plot.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The title of this card.</dd><dt><code>specification</code></dt><dd>The Vega-lite specification.</dd><dt><code>data</code></dt><dd>Data for the plot, if any.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.VegaCard" href="/wave/docs/api/types#h2o_wave.types.VegaCard">VegaCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="vega_visualization"></a>vega_visualization <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.vega_visualization"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#vega_visualization" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">vega_visualization</span>(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) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a Vega-lite plot for display inside a form.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>specification</code></dt><dd>The Vega-lite specification.</dd><dt><code>data</code></dt><dd>Data for the plot, if any.</dd><dt><code>width</code></dt><dd>The width of the visualization. Defaults to 100%.</dd><dt><code>height</code></dt><dd>The height of the visualization. Defaults to 300px.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.VegaVisualization" href="/wave/docs/api/types#h2o_wave.types.VegaVisualization">VegaVisualization</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="visualization"></a>visualization <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.visualization"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#visualization" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">visualization</span>(plot: <a title="h2o_wave.types.Plot" href="/wave/docs/api/types#h2o_wave.types.Plot">Plot</a>, data: Union[dict, str], width: Union[str, NoneType] = None, height: Union[str, NoneType] = None, name: Union[str, NoneType] = None, visible: Union[bool, NoneType] = None) ‑&gt; <a title="h2o_wave.types.Component" href="/wave/docs/api/types#h2o_wave.types.Component">Component</a></div><div class="api__description"><p>Create a visualization for display inside a form.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>plot</code></dt><dd>The plot to be rendered in this visualization.</dd><dt><code>data</code></dt><dd>Data for this visualization.</dd><dt><code>width</code></dt><dd>The width of the visualization. Defaults to 100%.</dd><dt><code>height</code></dt><dd>The hight of the visualization. Defaults to 300px.</dd><dt><code>name</code></dt><dd>An identifying name for this component.</dd><dt><code>visible</code></dt><dd>True if the component should be visible. Defaults to true.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.Visualization" href="/wave/docs/api/types#h2o_wave.types.Visualization">Visualization</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="wide_bar_stat_card"></a>wide_bar_stat_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.wide_bar_stat_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#wide_bar_stat_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">wide_bar_stat_card</span>(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[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.WideBarStatCard" href="/wave/docs/api/types#h2o_wave.types.WideBarStatCard">WideBarStatCard</a></div><div class="api__description"><p>Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The card&#x27;s title.</dd><dt><code>value</code></dt><dd>The primary value displayed.</dd><dt><code>aux_value</code></dt><dd>The auxiliary value displayed next to the primary value.</dd><dt><code>progress</code></dt><dd>The value of the progress bar, between 0 and 1.</dd><dt><code>plot_color</code></dt><dd>The color of the progress bar.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.WideBarStatCard" href="/wave/docs/api/types#h2o_wave.types.WideBarStatCard">WideBarStatCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="wide_gauge_stat_card"></a>wide_gauge_stat_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.wide_gauge_stat_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#wide_gauge_stat_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">wide_gauge_stat_card</span>(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[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.WideGaugeStatCard" href="/wave/docs/api/types#h2o_wave.types.WideGaugeStatCard">WideGaugeStatCard</a></div><div class="api__description"><p>Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The card&#x27;s title.</dd><dt><code>value</code></dt><dd>The primary value displayed.</dd><dt><code>aux_value</code></dt><dd>The auxiliary value displayed next to the primary value.</dd><dt><code>progress</code></dt><dd>The value of the progress gauge, between 0 and 1.</dd><dt><code>plot_color</code></dt><dd>The color of the progress gauge.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.WideGaugeStatCard" href="/wave/docs/api/types#h2o_wave.types.WideGaugeStatCard">WideGaugeStatCard</a> instance.</p></div></div></div><div class="api"><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="wide_series_stat_card"></a>wide_series_stat_card <a target="_blank" rel="noopener noreferrer" name="h2o_wave.ui.wide_series_stat_card"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#wide_series_stat_card" title="Direct link to heading">#</a></h3><div class="api__body"><div class="api__signature">def <span class="ident">wide_series_stat_card</span>(box: str, title: str, value: str, aux_value: str, plot_data: Union[<a title="h2o_wave.core.Data" href="/wave/docs/api/core#h2o_wave.core.Data">Data</a>, 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[<a title="h2o_wave.types.Command" href="/wave/docs/api/types#h2o_wave.types.Command">Command</a>], NoneType] = None) ‑&gt; <a title="h2o_wave.types.WideSeriesStatCard" href="/wave/docs/api/types#h2o_wave.types.WideSeriesStatCard">WideSeriesStatCard</a></div><div class="api__description"><p>Create a wide stat card displaying a primary value, an auxiliary value and a series plot.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="args"></a>Args<a aria-hidden="true" tabindex="-1" class="hash-link" href="#args" title="Direct link to heading">#</a></h5><dl><dt><code>box</code></dt><dd>A string indicating how to place this component on the page.</dd><dt><code>title</code></dt><dd>The card&#x27;s title.</dd><dt><code>value</code></dt><dd>The primary value displayed.</dd><dt><code>aux_value</code></dt><dd>The auxiliary value displayed below the primary value.</dd><dt><code>plot_data</code></dt><dd>The plot&#x27;s data.</dd><dt><code>plot_value</code></dt><dd>The data field to use for y-axis values.</dd><dt><code>plot_zero_value</code></dt><dd>The base value to use for each y-axis mark. Set this to <code>0</code> if you want to pin the x-axis at <code>y=0</code>. If not provided, the minimum value from the data is used.</dd><dt><code>plot_category</code></dt><dd>The data field to use for x-axis values (ignored if <code>plot_type</code> is <code>area</code>; must be provided if <code>plot_type</code> is <code>interval</code>). Defaults to &#x27;x&#x27;.</dd><dt><code>plot_type</code></dt><dd>The type of plot. Defaults to <code>area</code>. One of &#x27;area&#x27;, &#x27;interval&#x27;.</dd><dt><code>plot_curve</code></dt><dd>The plot&#x27;s curve style. Defaults to <code>linear</code>. One of &#x27;linear&#x27;, &#x27;smooth&#x27;, &#x27;step&#x27;, &#x27;step-after&#x27;, &#x27;step-before&#x27;.</dd><dt><code>plot_color</code></dt><dd>The plot&#x27;s color.</dd><dt><code>data</code></dt><dd>Data for this card.</dd><dt><code>commands</code></dt><dd>Contextual menu commands for this component.</dd></dl><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="returns"></a>Returns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#returns" title="Direct link to heading">#</a></h5><p>A <a title="h2o_wave.types.WideSeriesStatCard" href="/wave/docs/api/types#h2o_wave.types.WideSeriesStatCard">WideSeriesStatCard</a> instance.</p></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/api/ui.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/api/core"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Module h2o_wave.core</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/api/server"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Module h2o_wave.server »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#functions" class="table-of-contents__link">Functions</a><ul><li><a href="#breadcrumb" class="table-of-contents__link">breadcrumb <a name="h2o_wave.ui.breadcrumb"></a></li><li><a href="#breadcrumbs_card" class="table-of-contents__link">breadcrumbs_card <a name="h2o_wave.ui.breadcrumbs_card"></a></li><li><a href="#button" class="table-of-contents__link">button <a name="h2o_wave.ui.button"></a></li><li><a href="#buttons" class="table-of-contents__link">buttons <a name="h2o_wave.ui.buttons"></a></li><li><a href="#checkbox" class="table-of-contents__link">checkbox <a name="h2o_wave.ui.checkbox"></a></li><li><a href="#checklist" class="table-of-contents__link">checklist <a name="h2o_wave.ui.checklist"></a></li><li><a href="#choice" class="table-of-contents__link">choice <a name="h2o_wave.ui.choice"></a></li><li><a href="#choice_group" class="table-of-contents__link">choice_group <a name="h2o_wave.ui.choice_group"></a></li><li><a href="#color_picker" class="table-of-contents__link">color_picker <a name="h2o_wave.ui.color_picker"></a></li><li><a href="#combobox" class="table-of-contents__link">combobox <a name="h2o_wave.ui.combobox"></a></li><li><a href="#command" class="table-of-contents__link">command <a name="h2o_wave.ui.command"></a></li><li><a href="#component" class="table-of-contents__link">component <a name="h2o_wave.ui.component"></a></li><li><a href="#date_picker" class="table-of-contents__link">date_picker <a name="h2o_wave.ui.date_picker"></a></li><li><a href="#dropdown" class="table-of-contents__link">dropdown <a name="h2o_wave.ui.dropdown"></a></li><li><a href="#expander" class="table-of-contents__link">expander <a name="h2o_wave.ui.expander"></a></li><li><a href="#file_upload" class="table-of-contents__link">file_upload <a name="h2o_wave.ui.file_upload"></a></li><li><a href="#flex_card" class="table-of-contents__link">flex_card <a name="h2o_wave.ui.flex_card"></a></li><li><a href="#form_card" class="table-of-contents__link">form_card <a name="h2o_wave.ui.form_card"></a></li><li><a href="#frame" class="table-of-contents__link">frame <a name="h2o_wave.ui.frame"></a></li><li><a href="#frame_card" class="table-of-contents__link">frame_card <a name="h2o_wave.ui.frame_card"></a></li><li><a href="#graphics_card" class="table-of-contents__link">graphics_card <a name="h2o_wave.ui.graphics_card"></a></li><li><a href="#grid_card" class="table-of-contents__link">grid_card <a name="h2o_wave.ui.grid_card"></a></li><li><a href="#header_card" class="table-of-contents__link">header_card <a name="h2o_wave.ui.header_card"></a></li><li><a href="#icon_table_cell_type" class="table-of-contents__link">icon_table_cell_type <a name="h2o_wave.ui.icon_table_cell_type"></a></li><li><a href="#image_card" class="table-of-contents__link">image_card <a name="h2o_wave.ui.image_card"></a></li><li><a href="#label" class="table-of-contents__link">label <a name="h2o_wave.ui.label"></a></li><li><a href="#large_bar_stat_card" class="table-of-contents__link">large_bar_stat_card <a name="h2o_wave.ui.large_bar_stat_card"></a></li><li><a href="#large_stat_card" class="table-of-contents__link">large_stat_card <a name="h2o_wave.ui.large_stat_card"></a></li><li><a href="#link" class="table-of-contents__link">link <a name="h2o_wave.ui.link"></a></li><li><a href="#list_card" class="table-of-contents__link">list_card <a name="h2o_wave.ui.list_card"></a></li><li><a href="#list_item1_card" class="table-of-contents__link">list_item1_card <a name="h2o_wave.ui.list_item1_card"></a></li><li><a href="#mark" class="table-of-contents__link">mark <a name="h2o_wave.ui.mark"></a></li><li><a href="#markdown_card" class="table-of-contents__link">markdown_card <a name="h2o_wave.ui.markdown_card"></a></li><li><a href="#markup" class="table-of-contents__link">markup <a name="h2o_wave.ui.markup"></a></li><li><a href="#markup_card" class="table-of-contents__link">markup_card <a name="h2o_wave.ui.markup_card"></a></li><li><a href="#message_bar" class="table-of-contents__link">message_bar <a name="h2o_wave.ui.message_bar"></a></li><li><a href="#meta_card" class="table-of-contents__link">meta_card <a name="h2o_wave.ui.meta_card"></a></li><li><a href="#nav_card" class="table-of-contents__link">nav_card <a name="h2o_wave.ui.nav_card"></a></li><li><a href="#nav_group" class="table-of-contents__link">nav_group <a name="h2o_wave.ui.nav_group"></a></li><li><a href="#nav_item" class="table-of-contents__link">nav_item <a name="h2o_wave.ui.nav_item"></a></li><li><a href="#picker" class="table-of-contents__link">picker <a name="h2o_wave.ui.picker"></a></li><li><a href="#pixel_art_card" class="table-of-contents__link">pixel_art_card <a name="h2o_wave.ui.pixel_art_card"></a></li><li><a href="#plot" class="table-of-contents__link">plot <a name="h2o_wave.ui.plot"></a></li><li><a href="#plot_card" class="table-of-contents__link">plot_card <a name="h2o_wave.ui.plot_card"></a></li><li><a href="#progress" class="table-of-contents__link">progress <a name="h2o_wave.ui.progress"></a></li><li><a href="#progress_table_cell_type" class="table-of-contents__link">progress_table_cell_type <a name="h2o_wave.ui.progress_table_cell_type"></a></li><li><a href="#range_slider" class="table-of-contents__link">range_slider <a name="h2o_wave.ui.range_slider"></a></li><li><a href="#repeat_card" class="table-of-contents__link">repeat_card <a name="h2o_wave.ui.repeat_card"></a></li><li><a href="#separator" class="table-of-contents__link">separator <a name="h2o_wave.ui.separator"></a></li><li><a href="#slider" class="table-of-contents__link">slider <a name="h2o_wave.ui.slider"></a></li><li><a href="#small_series_stat_card" class="table-of-contents__link">small_series_stat_card <a name="h2o_wave.ui.small_series_stat_card"></a></li><li><a href="#small_stat_card" class="table-of-contents__link">small_stat_card <a name="h2o_wave.ui.small_stat_card"></a></li><li><a href="#spinbox" class="table-of-contents__link">spinbox <a name="h2o_wave.ui.spinbox"></a></li><li><a href="#step" class="table-of-contents__link">step <a name="h2o_wave.ui.step"></a></li><li><a href="#stepper" class="table-of-contents__link">stepper <a name="h2o_wave.ui.stepper"></a></li><li><a href="#tab" class="table-of-contents__link">tab <a name="h2o_wave.ui.tab"></a></li><li><a href="#tab_card" class="table-of-contents__link">tab_card <a name="h2o_wave.ui.tab_card"></a></li><li><a href="#table" class="table-of-contents__link">table <a name="h2o_wave.ui.table"></a></li><li><a href="#table_cell_type" class="table-of-contents__link">table_cell_type <a name="h2o_wave.ui.table_cell_type"></a></li><li><a href="#table_column" class="table-of-contents__link">table_column <a name="h2o_wave.ui.table_column"></a></li><li><a href="#table_row" class="table-of-contents__link">table_row <a name="h2o_wave.ui.table_row"></a></li><li><a href="#tabs" class="table-of-contents__link">tabs <a name="h2o_wave.ui.tabs"></a></li><li><a href="#tall_gauge_stat_card" class="table-of-contents__link">tall_gauge_stat_card <a name="h2o_wave.ui.tall_gauge_stat_card"></a></li><li><a href="#tall_series_stat_card" class="table-of-contents__link">tall_series_stat_card <a name="h2o_wave.ui.tall_series_stat_card"></a></li><li><a href="#template" class="table-of-contents__link">template <a name="h2o_wave.ui.template"></a></li><li><a href="#template_card" class="table-of-contents__link">template_card <a name="h2o_wave.ui.template_card"></a></li><li><a href="#text" class="table-of-contents__link">text <a name="h2o_wave.ui.text"></a></li><li><a href="#text_l" class="table-of-contents__link">text_l <a name="h2o_wave.ui.text_l"></a></li><li><a href="#text_m" class="table-of-contents__link">text_m <a name="h2o_wave.ui.text_m"></a></li><li><a href="#text_s" class="table-of-contents__link">text_s <a name="h2o_wave.ui.text_s"></a></li><li><a href="#text_xl" class="table-of-contents__link">text_xl <a name="h2o_wave.ui.text_xl"></a></li><li><a href="#text_xs" class="table-of-contents__link">text_xs <a name="h2o_wave.ui.text_xs"></a></li><li><a href="#textbox" class="table-of-contents__link">textbox <a name="h2o_wave.ui.textbox"></a></li><li><a href="#toggle" class="table-of-contents__link">toggle <a name="h2o_wave.ui.toggle"></a></li><li><a href="#toolbar_card" class="table-of-contents__link">toolbar_card <a name="h2o_wave.ui.toolbar_card"></a></li><li><a href="#vega_card" class="table-of-contents__link">vega_card <a name="h2o_wave.ui.vega_card"></a></li><li><a href="#vega_visualization" class="table-of-contents__link">vega_visualization <a name="h2o_wave.ui.vega_visualization"></a></li><li><a href="#visualization" class="table-of-contents__link">visualization <a name="h2o_wave.ui.visualization"></a></li><li><a href="#wide_bar_stat_card" class="table-of-contents__link">wide_bar_stat_card <a name="h2o_wave.ui.wide_bar_stat_card"></a></li><li><a href="#wide_gauge_stat_card" class="table-of-contents__link">wide_gauge_stat_card <a name="h2o_wave.ui.wide_gauge_stat_card"></a></li><li><a href="#wide_series_stat_card" class="table-of-contents__link">wide_series_stat_card <a name="h2o_wave.ui.wide_series_stat_card"></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/f151ab1a.efb732bc.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/apps/index.html b/docs/docs/apps/index.html
index 125f8270f5..0059f9f0ef 100644
--- a/docs/docs/apps/index.html
+++ b/docs/docs/apps/index.html
@@ -5,31 +5,30 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Wave Apps | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Wave Apps | H2O Wave"><meta data-react-helmet="true" name="description" content="A Wave app is the primary mechanism to publish interactive web content in Wave."><meta data-react-helmet="true" property="og:description" content="A Wave app is the primary mechanism to publish interactive web content in Wave."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/apps"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/apps"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/d3f54ca5.e6a485f6.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/d3f54ca5.47bd0228.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Wave Apps</h1></header><div class="markdown"><p>A Wave app is the primary mechanism to publish interactive web content in Wave.</p><p>A Wave app can publish content and handle user interactions, unlike a <a href="/wave/docs/scripts">Wave script</a>, which can publish content but not handle user interactions.</p><p>Here is the skeleton of a Wave app:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Modify the page</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;qux&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">some_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Save the page</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Start listening to events</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="listen-and-serve"></a>Listen and serve<a aria-hidden="true" tabindex="-1" class="hash-link" href="#listen-and-serve" title="Direct link to heading">#</a></h2><p><code>listen()</code> has two required arguments:</p><ul><li>The route your app is interested in (in the above case <code>/foo</code>).</li><li>The handler function to call when an event is received (in the above case, <code>serve</code>).</li></ul><p><code>listen()</code> 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 <code>/foo</code> to your app. </p><p>The <code>serve()</code> function is called every time the user performs some action at the route <code>/foo</code> (access the page, reload it, click a button, access a menu, enter text, and so on). </p><p>The details about what action was performed, and who  performed the action, are available in the argument passed to <code>serve()</code>, the <em>query context</em> <code>q</code> (of type <a href="/wave/docs/api/server#q">Q</a>).</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="runtime-context"></a>Runtime context<a aria-hidden="true" tabindex="-1" class="hash-link" href="#runtime-context" title="Direct link to heading">#</a></h2><p>The query context <code>q</code> carries the following attributes:</p><ul><li><code>route</code>: The route at which the action was performed (in this case, <code>/foo</code>).</li><li><code>page</code>: A reference to the current <a href="/wave/docs/pages">page</a> (in this case, the page hosted at <code>/foo</code>).</li><li><code>site</code>: A reference to the page&#x27;s parent site, from which you can grab references to other pages.</li><li><code>args</code>: The <em>event arguments</em>, a dictionary-like object containing information about the user action.</li><li><code>app</code>, <code>user</code>, <code>client</code>: Dictionary-like objects holding <a href="/wave/docs/state">server-side state</a>, at the app-level, the user-level and the client-level, respectively. Here, &#x27;client&#x27; refers to the browser tab.</li><li><code>username</code>: The username of the user who performed the action.</li><li><code>mode</code>: The <a href="/wave/docs/realtime">app&#x27;s realtime mode</a>, one of <code>unicast</code>, <code>multicast</code>, or <code>broadcast</code>.</li></ul></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/apps.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/scripts"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Wave Scripts</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/pages"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Pages »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#listen-and-serve" class="table-of-contents__link">Listen and serve</a></li><li><a href="#runtime-context" class="table-of-contents__link">Runtime context</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/d3f54ca5.e6a485f6.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Wave Apps</h1></header><div class="markdown"><p>A Wave app is the primary mechanism to publish interactive web content in Wave.</p><p>A Wave app can publish content and handle user interactions, unlike a <a href="/wave/docs/scripts">Wave script</a>, which can publish content but not handle user interactions.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="structure"></a>Structure<a aria-hidden="true" tabindex="-1" class="hash-link" href="#structure" title="Direct link to heading">#</a></h2><p>Here is the skeleton of a Wave app:</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">app.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Modify the page</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;qux&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">some_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Save the page</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>An app typically imports four symbols from <code>h2o_wave</code>:</p><ul><li><code>main</code>: An <a href="https://asgi.readthedocs.io/en/latest/" target="_blank" rel="noopener noreferrer">ASGI</a>-compatible function. See <a href="/wave/docs/deployment">Deployment</a>.</li><li><code>app</code>: A decorator for your query handler (or request handler).</li><li><code>Q</code>: A class that represents the query sent to your query handler. </li><li><code>ui</code>: The module containing the API for drawing UI elements.</li></ul><p><code>@app()</code> has one required argument - the route your app is interested in (in this case <code>/foo</code>). Whenever a user performs any action at <code>/foo</code> - access the page, reload it, click a button, access a menu, enter text, and so on - the query handler <code>serve()</code> is called. The details about what action was performed, and who  performed the action, are available in the argument passed to <code>serve()</code>, the <em>query context</em> <code>q</code> (of type <a href="/wave/docs/api/server#q">Q</a>).</p><p>Wave apps are run using the <code>wave run</code> command, which accepts the name of the Python module in which <code>main</code> is imported from <code>h2o_wave</code>.</p><p>If your app is contained in <code>app.py</code>, run it like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">wave run app</span></div></div></div></div></div><p>If your app is contained in <code>path/to/app.py</code>, run it like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">wave run path.to.app</span></div></div></div></div></div><p>When run, the app 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 <code>/foo</code> to your app. </p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="runtime-context"></a>Runtime context<a aria-hidden="true" tabindex="-1" class="hash-link" href="#runtime-context" title="Direct link to heading">#</a></h2><p>The query context <code>q</code> carries the following attributes:</p><ul><li><code>route</code>: The route at which the action was performed (in this case, <code>/foo</code>).</li><li><code>page</code>: A reference to the current <a href="/wave/docs/pages">page</a> (in this case, the page hosted at <code>/foo</code>).</li><li><code>site</code>: A reference to the page&#x27;s parent site, from which you can grab references to other pages.</li><li><code>args</code>: The <em>event arguments</em>, a dictionary-like object containing information about the user action.</li><li><code>app</code>, <code>user</code>, <code>client</code>: Dictionary-like objects holding <a href="/wave/docs/state">server-side state</a>, at the app-level, the user-level and the client-level, respectively. Here, &#x27;client&#x27; refers to the browser tab.</li><li><code>username</code>: The username of the user who performed the action.</li><li><code>mode</code>: The <a href="/wave/docs/realtime">app&#x27;s realtime mode</a>, one of <code>unicast</code>, <code>multicast</code>, or <code>broadcast</code>.</li></ul></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/apps.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/scripts"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Wave Scripts</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/pages"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Pages »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#structure" class="table-of-contents__link">Structure</a></li><li><a href="#runtime-context" class="table-of-contents__link">Runtime context</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/d3f54ca5.47bd0228.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/architecture/index.html b/docs/docs/architecture/index.html
index d82c2bc94f..2cf8ff10ed 100644
--- a/docs/docs/architecture/index.html
+++ b/docs/docs/architecture/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Architecture | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Architecture | H2O Wave"><meta data-react-helmet="true" name="description" content="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."><meta data-react-helmet="true" property="og:description" content="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."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/architecture"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/architecture"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/5281b7a2.604456ad.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/5281b7a2.12637c8c.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Architecture</h1></header><div class="markdown"><p>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.</p><p>It excels at capturing data, visualizations, and graphics from multiple sources, and broadcasting them live over the web.</p><p>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).</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="overview"></a>Overview<a aria-hidden="true" tabindex="-1" class="hash-link" href="#overview" title="Direct link to heading">#</a></h2><p>The Wave runtime operates over three tiers:</p><ul><li><strong>A content server.</strong> The Wave server, a ~10MB static binary executable that runs anywhere<sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup>.</li><li><strong>A language driver.</strong> The <a href="https://pypi.org/project/h2o-wave/" target="_blank" rel="noopener noreferrer">h2o-wave PyPI package</a> used by Wave scripts and apps.</li><li><strong>A browser-based client.</strong> The user interface and components.</li></ul><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">+---------+                        +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">| Browser +---------+      +------&gt;+ app1.py |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+---------+         |      |       +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    v      |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+---------+       +-+------+-+     +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">| Browser +------&gt;+  Server  +----&gt;+ app2.py |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+---------+       +-+------+-+     +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    ^      |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+---------+         |      |       +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">| Browser +---------+      +------&gt;+ app3.py |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+---------+                        +---------+</span></div></div></div></div></div><p>The Wave server has three main functions:</p><ul><li>Store site content</li><li>Transmit content changes to browsers.</li><li>Transmit browser events to apps.</li></ul><p>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 (<em>clients</em>) downstream, and Wave apps (or scripts) upstream.</p><p>The language driver (the <a href="https://pypi.org/project/h2o-wave/" target="_blank" rel="noopener noreferrer">h2o-wave PyPI package</a>) provides the ability to manage content on the Wave server. It&#x27;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.</p><p>The browser-based client&#x27;s job is to render content on the user interface, and transmit user actions in the form of <em>events</em> back to the Wave server.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="how-does-it-work"></a>How does it work?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#how-does-it-work" title="Direct link to heading">#</a></h2><p>The Wave server stores all content in a page cache called a <em>site</em>. A site is a collection of <a href="/wave/docs/pages">pages</a>. Each page has an address, called its <em>route</em>. A page is composed of <a href="/wave/docs/cards">cards</a>. A card holds content, and any tabular data associated with the content, called <a href="/wave/docs/buffers">data buffers</a>. </p><p>When a browser is pointed to a route, it pulls a copy of the page, creates a <em>replica</em> locally, and renders the content on the user interface.</p><p>The language driver (the <code>h2o-wave</code> PyPI package) maintains an illusion that server-side content is available locally. Local updates to pages and cards are transmitted in the form of <em>operations</em> 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.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">   Python</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+------------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|  app.py    |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|     +      |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|     |      |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|     v      |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">| +---+----+ |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+-+ Driver +-+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  +---+----+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      |Operations</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      v</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+-----+------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|   Server   |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|            |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|  +------+  |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|  | Page |  |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|  +------+  |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|            |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+-----+------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      |Replication</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+-------------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">| +---------+ |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">| | Replica | |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">| +---------+ |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|             |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|     UI      |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+-------------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    Browser</span></div></div></div></div></div><p>The language driver can be used by two kinds of Python programs: <em>Wave apps</em> and <em>Wave scripts</em>. </p><ul><li><a href="/wave/docs/apps">Wave apps</a> are interactive programs that can update content and respond to user actions.</li><li><a href="/wave/docs/scripts">Wave scripts</a> are simpler, non-interactive (batch) programs: they can update content, but not respond to user actions. </li></ul><p>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 <em>relay</em> 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. </p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="how-is-it-different"></a>How is it different?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#how-is-it-different" title="Direct link to heading">#</a></h2><p>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. </p><p>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.</p><hr><p><sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup> Linux, Windows, Darwin, BSD, Solaris, Android on amd64, arm, 386, ppc, mips; <a href="https://gist.github.com/asukakenji/f15ba7e588ac42795f421b48b8aede63" target="_blank" rel="noopener noreferrer">almost everywhere</a>.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/architecture.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/guide"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Introduction</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/scripts"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Wave Scripts »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#overview" class="table-of-contents__link">Overview</a></li><li><a href="#how-does-it-work" class="table-of-contents__link">How does it work?</a></li><li><a href="#how-is-it-different" class="table-of-contents__link">How is it different?</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/5281b7a2.604456ad.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Architecture</h1></header><div class="markdown"><p>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.</p><p>It excels at capturing data, visualizations, and graphics from multiple sources, and broadcasting them live over the web.</p><p>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).</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="overview"></a>Overview<a aria-hidden="true" tabindex="-1" class="hash-link" href="#overview" title="Direct link to heading">#</a></h2><p>The Wave runtime operates over three tiers:</p><ul><li><strong>A content server.</strong> The Wave server, a ~10MB static binary executable that runs anywhere<sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup>.</li><li><strong>A language driver.</strong> The <a href="https://pypi.org/project/h2o-wave/" target="_blank" rel="noopener noreferrer">h2o-wave PyPI package</a> used by Wave scripts and apps.</li><li><strong>A browser-based client.</strong> The user interface and components.</li></ul><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">+---------+                        +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">| Browser +---------+      +------&gt;+ app1.py |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+---------+         |      |       +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    v      |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+---------+       +-+------+-+     +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">| Browser +------&gt;+  Server  +----&gt;+ app2.py |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+---------+       +-+------+-+     +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    ^      |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+---------+         |      |       +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">| Browser +---------+      +------&gt;+ app3.py |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+---------+                        +---------+</span></div></div></div></div></div><p>The Wave server has three main functions:</p><ul><li>Store site content</li><li>Transmit content changes to browsers.</li><li>Transmit browser events to apps.</li></ul><p>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 (<em>clients</em>) downstream, and Wave apps (or scripts) upstream.</p><p>The language driver (the <a href="https://pypi.org/project/h2o-wave/" target="_blank" rel="noopener noreferrer">h2o-wave PyPI package</a>) provides the ability to manage content on the Wave server. It&#x27;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.</p><p>The browser-based client&#x27;s job is to render content on the user interface, and transmit user actions in the form of <em>events</em> back to the Wave server.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="how-does-it-work"></a>How does it work?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#how-does-it-work" title="Direct link to heading">#</a></h2><p>The Wave server stores all content in a page cache called a <em>site</em>. A site is a collection of <a href="/wave/docs/pages">pages</a>. Each page has an address, called its <em>route</em>. A page is composed of <a href="/wave/docs/cards">cards</a>. A card holds content, and any tabular data associated with the content, called <a href="/wave/docs/buffers">data buffers</a>. </p><p>When a browser is pointed to a route, it pulls a copy of the page, creates a <em>replica</em> locally, and renders the content on the user interface.</p><p>The language driver (the <code>h2o-wave</code> PyPI package) maintains an illusion that server-side content is available locally. Local updates to pages and cards are transmitted in the form of <em>operations</em> 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.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">   Python</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+------------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|  app.py    |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|     +      |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|     |      |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|     v      |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">| +---+----+ |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+-+ Driver +-+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  +---+----+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      |Operations</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      v</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+-----+------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|   Server   |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|            |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|  +------+  |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|  | Page |  |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|  +------+  |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|            |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+-----+------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      |Replication</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+-------------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">| +---------+ |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">| | Replica | |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">| +---------+ |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|             |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|     UI      |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+-------------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    Browser</span></div></div></div></div></div><p>The language driver can be used by two kinds of Python programs: <em>Wave apps</em> and <em>Wave scripts</em>. </p><ul><li><a href="/wave/docs/apps">Wave apps</a> are interactive programs that can update content and respond to user actions.</li><li><a href="/wave/docs/scripts">Wave scripts</a> are simpler, non-interactive (batch) programs: they can update content, but not respond to user actions. </li></ul><p>Wave apps are ASGI servers under the hood. When a Wave app is launched, it announces its existence to the Wave server, and the Wave server establishes a <em>relay</em> 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. </p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="how-is-it-different"></a>How is it different?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#how-is-it-different" title="Direct link to heading">#</a></h2><p>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. </p><p>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.</p><hr><p><sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup> Linux, Windows, Darwin, BSD, Solaris, Android on amd64, arm, 386, ppc, mips; <a href="https://gist.github.com/asukakenji/f15ba7e588ac42795f421b48b8aede63" target="_blank" rel="noopener noreferrer">almost everywhere</a>.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/architecture.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/guide"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Introduction</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/scripts"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Wave Scripts »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#overview" class="table-of-contents__link">Overview</a></li><li><a href="#how-does-it-work" class="table-of-contents__link">How does it work?</a></li><li><a href="#how-is-it-different" class="table-of-contents__link">How is it different?</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/5281b7a2.12637c8c.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/arguments/index.html b/docs/docs/arguments/index.html
index 1055685c67..48e9e5a992 100644
--- a/docs/docs/arguments/index.html
+++ b/docs/docs/arguments/index.html
@@ -5,31 +5,30 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Event Arguments | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Event Arguments | H2O Wave"><meta data-react-helmet="true" name="description" content="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."><meta data-react-helmet="true" property="og:description" content="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."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/arguments"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/arguments"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/65b8ef03.61b6602a.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/65b8ef03.db9d04d0.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Event Arguments</h1></header><div class="markdown"><p>When a user interacts with <a href="/wave/docs/components">components</a> 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 <em>event arguments</em>.</p><p>The event arguments can be read from <code>q.args</code>, a read-only dictionary-like object passed to your <code>listen()</code> handler:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">print</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">foo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">print</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bar</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">print</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">qux</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p><code>q.args</code> is an <a href="/wave/docs/api/core#Expando">Expando</a> instance, which means it behaves both like a dictionary and an object: <code>q.args[&#x27;foo&#x27;]</code> is the same as <code>q.args.foo</code>. <code>q.args.foo</code> is easier to read.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="interpreting-arguments"></a>Interpreting arguments<a aria-hidden="true" tabindex="-1" class="hash-link" href="#interpreting-arguments" title="Direct link to heading">#</a></h2><p>The table below summarizes how to interpret inputs from various components.</p><table><thead><tr><th>Component</th><th>If the component is named <code>foo</code>, the value of <code>q.args.foo</code> is...</th></tr></thead><tbody><tr><td><code>ui.button()</code></td><td><code>value</code> if provided, else <code>True</code>.</td></tr><tr><td><code>ui.checkbox()</code></td><td><code>True</code> if checked, <code>False</code> if unchecked, <code>None</code> if indeterminate.</td></tr><tr><td><code>ui.checklist()</code></td><td>A list of names of all the selected choices (a list of strings).</td></tr><tr><td><code>ui.choice_group()</code></td><td>The name of the selected choice (a string).</td></tr><tr><td><code>ui.color_picker()</code></td><td>The selected color (a string).</td></tr><tr><td><code>ui.combobox()</code></td><td>Either the name of the selected choice or the value typed in (a string).</td></tr><tr><td><code>ui.command()</code></td><td><code>data</code> if provided, else <code>True</code>.</td></tr><tr><td><code>ui.date_picker()</code></td><td>The selected date in <code>YYYY-MM-DD</code> format (a string).</td></tr><tr><td><code>ui.dropdown()</code></td><td>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).</td></tr><tr><td><code>ui.expander()</code></td><td><code>True</code> if expanded, else <code>False</code>.</td></tr><tr><td><code>ui.file_upload()</code></td><td>A list of paths to the uploaded files (a list of strings).</td></tr><tr><td><code>ui.nav_item()</code></td><td><code>True</code> if clicked.</td></tr><tr><td><code>ui.picker()</code></td><td>A list of names of all the selected choices (a list of strings).</td></tr><tr><td><code>ui.range_slider()</code></td><td><code>[min, max]</code> (a list of two numbers).</td></tr><tr><td><code>ui.slider()</code></td><td>The selected value (a number).</td></tr><tr><td><code>ui.spinbox()</code></td><td>The selected value (a number).</td></tr><tr><td><code>ui.table()</code></td><td>A list of names of all the selected rows (a list of strings).</td></tr><tr><td><code>ui.tabs()</code></td><td>The name of the active tab (a string).</td></tr><tr><td><code>ui.textbox()</code></td><td>The value typed in (a string).</td></tr><tr><td><code>ui.toggle()</code></td><td><code>True</code> if checked, <code>False</code> if unchecked.</td></tr></tbody></table></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/arguments.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/components"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Components</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/state"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">State »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#interpreting-arguments" class="table-of-contents__link">Interpreting arguments</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/65b8ef03.61b6602a.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Event Arguments</h1></header><div class="markdown"><p>When a user interacts with <a href="/wave/docs/components">components</a> 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 <em>event arguments</em>.</p><p>The event arguments can be read from <code>q.args</code>, a read-only dictionary-like object passed to your <code>@app()</code> handler:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">print</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">foo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">print</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bar</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">print</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">qux</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p><code>q.args</code> is an <a href="/wave/docs/api/core#Expando">Expando</a> instance, which means it behaves both like a dictionary and an object: <code>q.args[&#x27;foo&#x27;]</code> is the same as <code>q.args.foo</code>. <code>q.args.foo</code> is easier to read.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="interpreting-arguments"></a>Interpreting arguments<a aria-hidden="true" tabindex="-1" class="hash-link" href="#interpreting-arguments" title="Direct link to heading">#</a></h2><p>The table below summarizes how to interpret inputs from various components.</p><table><thead><tr><th>Component</th><th>If the component is named <code>foo</code>, the value of <code>q.args.foo</code> is...</th></tr></thead><tbody><tr><td><code>ui.button()</code></td><td><code>value</code> if provided, else <code>True</code>.</td></tr><tr><td><code>ui.checkbox()</code></td><td><code>True</code> if checked, <code>False</code> if unchecked, <code>None</code> if indeterminate.</td></tr><tr><td><code>ui.checklist()</code></td><td>A list of names of all the selected choices (a list of strings).</td></tr><tr><td><code>ui.choice_group()</code></td><td>The name of the selected choice (a string).</td></tr><tr><td><code>ui.color_picker()</code></td><td>The selected color (a string).</td></tr><tr><td><code>ui.combobox()</code></td><td>Either the name of the selected choice or the value typed in (a string).</td></tr><tr><td><code>ui.command()</code></td><td><code>data</code> if provided, else <code>True</code>.</td></tr><tr><td><code>ui.date_picker()</code></td><td>The selected date in <code>YYYY-MM-DD</code> format (a string).</td></tr><tr><td><code>ui.dropdown()</code></td><td>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).</td></tr><tr><td><code>ui.expander()</code></td><td><code>True</code> if expanded, else <code>False</code>.</td></tr><tr><td><code>ui.file_upload()</code></td><td>A list of paths to the uploaded files (a list of strings).</td></tr><tr><td><code>ui.nav_item()</code></td><td><code>True</code> if clicked.</td></tr><tr><td><code>ui.picker()</code></td><td>A list of names of all the selected choices (a list of strings).</td></tr><tr><td><code>ui.range_slider()</code></td><td><code>[min, max]</code> (a list of two numbers).</td></tr><tr><td><code>ui.slider()</code></td><td>The selected value (a number).</td></tr><tr><td><code>ui.spinbox()</code></td><td>The selected value (a number).</td></tr><tr><td><code>ui.table()</code></td><td>A list of names of all the selected rows (a list of strings).</td></tr><tr><td><code>ui.tabs()</code></td><td>The name of the active tab (a string).</td></tr><tr><td><code>ui.textbox()</code></td><td>The value typed in (a string).</td></tr><tr><td><code>ui.toggle()</code></td><td><code>True</code> if checked, <code>False</code> if unchecked.</td></tr></tbody></table></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/arguments.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/components"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Components</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/state"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">State »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#interpreting-arguments" class="table-of-contents__link">Interpreting arguments</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/65b8ef03.db9d04d0.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/background/index.html b/docs/docs/background/index.html
new file mode 100644
index 0000000000..c566a943c1
--- /dev/null
+++ b/docs/docs/background/index.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="generator" content="Docusaurus v2.0.0-alpha.65">
+<title data-react-helmet="true">Background Tasks | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Background Tasks | H2O Wave"><meta data-react-helmet="true" name="description" content="Wave apps are servers based on asyncio, Python&#x27;s library for Asynchronous I/O, and lets you develop and deploy high-performance applications."><meta data-react-helmet="true" property="og:description" content="Wave apps are servers based on asyncio, Python&#x27;s library for Asynchronous I/O, and lets you develop and deploy high-performance applications."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/background"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/background"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/b4d5475e.dd3985c3.js" as="script">
+</head>
+<body>
+<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Background Tasks</h1></header><div class="markdown"><p>Wave apps are servers based on <a href="https://docs.python.org/3/library/asyncio.html" target="_blank" rel="noopener noreferrer">asyncio</a>, Python&#x27;s library for Asynchronous I/O, and lets you develop and deploy high-performance applications. </p><p>Your <code>@app</code> query handler is invoked every time a user performs some action in your app&#x27;s UI - access the page, reload it, click a button, access a menu, enter text, and so on. Performing blocking operations in your handler will hang your app&#x27;s server and make your app&#x27;s UI appear unresponsive until the blocking operation completes.</p><p>In some cases, blocking calls can be pushed to the background to improve concurrency. To achieve this, the Wave API provides two lightweight wrappers over <a href="https://docs.python.org/3/library/asyncio-eventloop.html#asyncio.loop.run_in_executor" target="_blank" rel="noopener noreferrer">asyncio.run_in_executor()</a>: <code>q.run()</code> and <code>q.exec()</code>.</p><p>Here is an example of a function that blocks:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-python codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">blocking_function</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">seconds</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">seconds</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Blocks!</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;Done!&#x27;</span></div></div></div></div></div><p>To call the above function from an app, don&#x27;t do this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-python codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token decorator annotation punctuation" style="color:rgb(199, 146, 234)">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># ...</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    message </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> blocking_function</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">42</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># ...</span></div></div></div></div></div><p>Instead, do this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-python codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token decorator annotation punctuation" style="color:rgb(199, 146, 234)">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># ...</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    message </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">run</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">blocking_function</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">42</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># ...</span></div></div></div></div></div><p><code>q.run()</code> runs the blocking function in the background, in-process.</p><p>Depending on your use case, you might want to use a separate process pool or thread pool from Python&#x27;s <a href="https://docs.python.org/3/library/multiprocessing.html" target="_blank" rel="noopener noreferrer">multiprocessing</a> library, like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-python codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> concurrent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">futures</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># ...</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">with</span><span class="token plain"> concurrent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">futures</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">ThreadPoolExecutor</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> pool</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        message </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token keyword" style="font-style:italic">exec</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">pool</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> blocking_function</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">42</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># ...</span></div></div></div></div></div><p><code>q.exec()</code> accepts a custom process pool or thread pool to run the blocking function.</p><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p>Apps that make calls to external services or APIs are better off replacing blocking HTTP clients like <a href="https://requests.readthedocs.io/en/master/" target="_blank" rel="noopener noreferrer">requests</a> with non-blocking clients like <a href="https://www.python-httpx.org/async/" target="_blank" rel="noopener noreferrer">HTTPX</a>.</p></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/background.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/realtime"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Realtime Sync</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/expressions"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Data-binding »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/b4d5475e.dd3985c3.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/docs/backup/index.html b/docs/docs/backup/index.html
index 9a8ea3653c..470c4fb51c 100644
--- a/docs/docs/backup/index.html
+++ b/docs/docs/backup/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Backup and Recovery | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Backup and Recovery | H2O Wave"><meta data-react-helmet="true" name="description" content="This feature is experimental. Do not rely on this in production!"><meta data-react-helmet="true" property="og:description" content="This feature is experimental. Do not rely on this in production!"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/backup"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/backup"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/1b0f8c91.0f45df95.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/1b0f8c91.42e9bcf0.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Backup and Recovery</h1></header><div class="markdown"><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</h5></div><div class="admonition-content"><p>This feature is experimental. Do not rely on this in production!</p></div></div><p>The Wave server logs all content changes to <code>stderr</code>. 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&#x27;s state (content, pages, everything). The log is, literally, a change log.</p><p>To capture the log, redirect <code>stderr</code> to a file when you launch the server:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">./wave </span><span class="token operator file-descriptor important" style="color:rgb(137, 221, 255)">2</span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> backup.log</span></div></div></div></div></div><p>To recover state, feed the log file back in the next time you launch the server:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">./wave -init backup.log</span></div></div></div></div></div><p>To recover state and continue capturing the log, use:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">./wave -init backup.log </span><span class="token operator file-descriptor important" style="color:rgb(137, 221, 255)">2</span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> other.log</span></div></div></div></div></div><p>If you end up with a big log file, you can compact it like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">./wave -compact big.log </span><span class="token operator file-descriptor important" style="color:rgb(137, 221, 255)">2</span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> small.log</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/backup.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/configuration"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Configuration</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/enterprise/"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Introduction »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/1b0f8c91.0f45df95.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Backup and Recovery</h1></header><div class="markdown"><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</h5></div><div class="admonition-content"><p>This feature is experimental. Do not rely on this in production!</p></div></div><p>The Wave server logs all content changes to <code>stderr</code>. 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&#x27;s state (content, pages, everything). The log is, literally, a change log.</p><p>To capture the log, redirect <code>stderr</code> to a file when you launch the server:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">./waved </span><span class="token operator file-descriptor important" style="color:rgb(137, 221, 255)">2</span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> backup.log</span></div></div></div></div></div><p>To recover state, feed the log file back in the next time you launch the server:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">./waved -init backup.log</span></div></div></div></div></div><p>To recover state and continue capturing the log, use:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">./waved -init backup.log </span><span class="token operator file-descriptor important" style="color:rgb(137, 221, 255)">2</span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> other.log</span></div></div></div></div></div><p>If you end up with a big log file, you can compact it like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">./waved -compact big.log </span><span class="token operator file-descriptor important" style="color:rgb(137, 221, 255)">2</span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> small.log</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/backup.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/deployment"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Deployment</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/enterprise/"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Introduction »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/1b0f8c91.42e9bcf0.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/browser-testing/index.html b/docs/docs/browser-testing/index.html
index bd1792bf13..5be53fb7fd 100644
--- a/docs/docs/browser-testing/index.html
+++ b/docs/docs/browser-testing/index.html
@@ -5,31 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Browser Testing | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Browser Testing | H2O Wave"><meta data-react-helmet="true" name="description" content="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."><meta data-react-helmet="true" property="og:description" content="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."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/browser-testing"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/browser-testing"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/3713dbfc.2210688a.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/3713dbfc.7d7ab8fd.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Browser Testing</h1></header><div class="markdown"><p>Wave supports authoring functional tests in Python for the <a href="https://www.cypress.io/" target="_blank" rel="noopener noreferrer">Cypress</a> test framework. This feature lets you automate browser-based point-and-click tests for your app.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="installation"></a>Installation<a aria-hidden="true" tabindex="-1" class="hash-link" href="#installation" title="Direct link to heading">#</a></h2><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-1-install-nodejs"></a>Step 1: Install Node.js<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-1-install-nodejs" title="Direct link to heading">#</a></h4><p>Install a recent version of <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js</a>.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-2-set-up-cypress"></a>Step 2: Set up Cypress<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-2-set-up-cypress" title="Direct link to heading">#</a></h4><p>Using your terminal, go to your Wave installation&#x27;s <code>test</code> directory and install Cypress</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ cd path/to/wave</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ cd test</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ npm install</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="writing-a-test"></a>Writing a test<a aria-hidden="true" tabindex="-1" class="hash-link" href="#writing-a-test" title="Direct link to heading">#</a></h2><p>See the <a href="#wizard">Wizard</a> example to understand how to author tests for your interactive app. Specifically, note how the <code>@cypress</code> attribute is used. Refer to the <a href="https://docs.cypress.io/api/api/table-of-contents.html" target="_blank" rel="noopener noreferrer">Cypress API</a> to learn how to author assertions.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> cypress</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Browser Testing</h1></header><div class="markdown"><p>Wave supports authoring functional tests in Python for the <a href="https://www.cypress.io/" target="_blank" rel="noopener noreferrer">Cypress</a> test framework. This feature lets you automate browser-based point-and-click tests for your app.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="installation"></a>Installation<a aria-hidden="true" tabindex="-1" class="hash-link" href="#installation" title="Direct link to heading">#</a></h2><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-1-install-nodejs"></a>Step 1: Install Node.js<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-1-install-nodejs" title="Direct link to heading">#</a></h4><p>Install a recent version of <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js</a>.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-2-set-up-cypress"></a>Step 2: Set up Cypress<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-2-set-up-cypress" title="Direct link to heading">#</a></h4><p>Using your terminal, go to your Wave installation&#x27;s <code>test</code> directory and install Cypress</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ cd $HOME/wave/test</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ npm install</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="writing-a-test"></a>Writing a test<a aria-hidden="true" tabindex="-1" class="hash-link" href="#writing-a-test" title="Direct link to heading">#</a></h2><p>See the <a href="#wizard">Wizard</a> example to understand how to author tests for your interactive app. Specifically, note how the <code>@cypress</code> attribute is used. Refer to the <a href="https://docs.cypress.io/api/api/table-of-contents.html" target="_blank" rel="noopener noreferrer">Cypress API</a> to learn how to author assertions.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> cypress</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@cypress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Walk through the wizard&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">test_wizard</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">visit</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">click</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">should</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;contain.text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;What is your name?&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;nickname&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">clear</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Fred&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">click</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">should</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;contain.text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Hi Fred! How do you feel right now?&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;feeling&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">clear</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;quirky&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">click</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">should</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;contain.text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;What a coincidence, Fred! I feel quirky too!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div></div></div></div></div><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p>To escape Cypress function names that overlap with Python&#x27;s reserved keywords, prefix the name with an underscore <code>_</code>. For example, use <code>cy._as()</code> instead of <code>cy.as()</code>.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="running-your-test"></a>Running your test<a aria-hidden="true" tabindex="-1" class="hash-link" href="#running-your-test" title="Direct link to heading">#</a></h2><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-1-start-the-cypress-test-runner"></a>Step 1: Start the Cypress test runner<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-1-start-the-cypress-test-runner" title="Direct link to heading">#</a></h4><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ cd path/to/wave</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ cd test</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ ./node_modules/.bin/cypress open</span></div></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-2-start-the-wave-server-as-usual"></a>Step 2: Start the Wave server as usual<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-2-start-the-wave-server-as-usual" title="Direct link to heading">#</a></h4><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ ./wave</span></div></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-3-translate-your-python-tests-to-javascript"></a>Step 3: Translate your Python tests to Javascript<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-3-translate-your-python-tests-to-javascript" title="Direct link to heading">#</a></h4><p>To translate your Python tests to Javascript, execute the Python module or file containing your tests like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ CYPRESS_INTEGRATION_TEST_DIR=path/to/wave/test/cypress/integration ./venv/bin/python examples/wizard.py</span></div></div></div></div></div><p>The <code>CYPRESS_INTEGRATION_TEST_DIR</code> environment variable indicates where the Wave SDK should write translated files to. This must be set to the <code>cypress/integration</code> directory.</p><p>Alternatively, you can set the <code>CYPRESS_INTEGRATION_TEST_DIR</code> environment variable in your shell (or IDE) to simplify running your test file:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ export CYPRESS_INTEGRATION_TEST_DIR=path/to/wave/test/cypress/integration</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ ./venv/bin/python examples/wizard.py</span></div></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-4-run-your-tests"></a>Step 4: Run your tests<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-4-run-your-tests" title="Direct link to heading">#</a></h4><p>At this point, you should find all your tests displayed in the Cypress UI. Simply click on a test to run it. Happy testing!</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/browser-testing.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/development"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Development</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/configuration"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Configuration »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#installation" class="table-of-contents__link">Installation</a></li><li><a href="#writing-a-test" class="table-of-contents__link">Writing a test</a></li><li><a href="#running-your-test" class="table-of-contents__link">Running your test</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/3713dbfc.2210688a.js"></script>
+</span></div></div></div></div></div><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p>To escape Cypress function names that overlap with Python&#x27;s reserved keywords, prefix the name with an underscore <code>_</code>. For example, use <code>cy._as()</code> instead of <code>cy.as()</code>.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="running-your-test"></a>Running your test<a aria-hidden="true" tabindex="-1" class="hash-link" href="#running-your-test" title="Direct link to heading">#</a></h2><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-1-start-the-cypress-test-runner"></a>Step 1: Start the Cypress test runner<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-1-start-the-cypress-test-runner" title="Direct link to heading">#</a></h4><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ cd $HOME/wave/test</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ ./node_modules/.bin/cypress open</span></div></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-2-start-the-wave-server-as-usual"></a>Step 2: Start the Wave server as usual<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-2-start-the-wave-server-as-usual" title="Direct link to heading">#</a></h4><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ ./waved</span></div></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-3-translate-your-python-tests-to-javascript"></a>Step 3: Translate your Python tests to Javascript<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-3-translate-your-python-tests-to-javascript" title="Direct link to heading">#</a></h4><p>To translate your Python tests to Javascript, execute the Python module or file containing your tests like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ CYPRESS_INTEGRATION_TEST_DIR=$HOME/wave/test/cypress/integration ./venv/bin/python examples/wizard.py</span></div></div></div></div></div><p>The <code>CYPRESS_INTEGRATION_TEST_DIR</code> environment variable indicates where the Wave SDK should write translated files to. This must be set to the <code>cypress/integration</code> directory.</p><p>Alternatively, you can set the <code>CYPRESS_INTEGRATION_TEST_DIR</code> environment variable in your shell (or IDE) to simplify running your test file:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ export CYPRESS_INTEGRATION_TEST_DIR=$HOME/wave/test/cypress/integration</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ ./venv/bin/python examples/wizard.py</span></div></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-4-run-your-tests"></a>Step 4: Run your tests<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-4-run-your-tests" title="Direct link to heading">#</a></h4><p>At this point, you should find all your tests displayed in the Cypress UI. Simply click on a test to run it. Happy testing!</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/browser-testing.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/development"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Development</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/configuration"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Configuration »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#installation" class="table-of-contents__link">Installation</a></li><li><a href="#writing-a-test" class="table-of-contents__link">Writing a test</a></li><li><a href="#running-your-test" class="table-of-contents__link">Running your test</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/3713dbfc.7d7ab8fd.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/buffers/index.html b/docs/docs/buffers/index.html
index c50dbbb3c6..0362e86b40 100644
--- a/docs/docs/buffers/index.html
+++ b/docs/docs/buffers/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Data Buffers | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Data Buffers | H2O Wave"><meta data-react-helmet="true" name="description" content="Data buffers are in-memory data structures designed to hold a card&#x27;s tabular data."><meta data-react-helmet="true" property="og:description" content="Data buffers are in-memory data structures designed to hold a card&#x27;s tabular data."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/buffers"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/buffers"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/649e08dd.1ade093f.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/649e08dd.a9f770b1.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Data Buffers</h1></header><div class="markdown"><p><em>Data buffers</em> are in-memory data structures designed to hold a card&#x27;s tabular data. </p><p>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. </p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="cards-and-buffers"></a>Cards and buffers<a aria-hidden="true" tabindex="-1" class="hash-link" href="#cards-and-buffers" title="Direct link to heading">#</a></h2><p>Data buffers are tabular data structures containing columns and rows. Different cards utilize data buffers in different ways. For example, the plot in the <a href="/wave/docs/api/ui#small_series_stat_card">ui.small_series_stat_card()</a> uses a data buffer called <code>plot_data</code> to hold time series data.</p><p><img alt="CPU Usage" src="data:image/png;base64,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"></p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">small_series_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;1 1 1 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;CPU&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;10%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    plot_data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time usage&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">15</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    plot_category</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    plot_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;usage&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>In the above snippet, <code>data(&#x27;time usage&#x27;, -15)</code> defines a placeholder for a table with two columns (<code>time</code> and <code>usage</code>) and 15 rows (we&#x27;ll get to why the <code>15</code> is negative shortly), and the card&#x27;s <code>plot_category</code> and <code>plot_value</code> point to the two columns <code>time</code> and <code>usage</code>, respectively.</p><p>Appending <em>rows</em> (<em>tuples</em> or <em>records</em>) to the data buffer make the card plot those rows.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">while</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">get_time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> get_usage</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>The <code>while</code> loop above does something like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2020-10-05T02:10:20Z&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">42.5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2020-10-05T02:10:21Z&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">43.1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2020-10-05T02:10:22Z&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">39.2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2020-10-05T02:10:23Z&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">38.7</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="types-of-buffers"></a>Types of buffers<a aria-hidden="true" tabindex="-1" class="hash-link" href="#types-of-buffers" title="Direct link to heading">#</a></h2><p>There are three types of data buffers:</p><ul><li><strong>Array buffers</strong> hold tabular data with a fixed number of rows, and allow random access to rows using 0-based integers as keys.</li><li><strong>Cyclic buffers</strong> 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.</li><li><strong>Map buffers</strong> (or dictionary buffers) hold tabular data with a variable number of rows, and allow random access to rows using string keys.</li></ul><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</h5></div><div class="admonition-content"><p>Map buffers are convenient to use, but use more memory on the server compared to array buffers and cyclic buffers, so use them sparingly.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="the-data-function"></a>The data function<a aria-hidden="true" tabindex="-1" class="hash-link" href="#the-data-function" title="Direct link to heading">#</a></h2><p>Use the <code>data()</code> function to declare a data buffer. The Wave server uses this declaration to allocate memory for the data buffer.</p><p><code>data()</code> takes multiple arguments:</p><ul><li><code>fields</code>: The names of columns, in order; a space-separated string or a list or a tuple (<code>&#x27;foo bar&#x27;</code> or <code>[&#x27;foo&#x27;, &#x27;bar&#x27;]</code> or <code>(&#x27;foo&#x27;, &#x27;bar&#x27;)</code>.</li><li><code>size</code>: The number of rows to allocate.<ul><li>A positive row count creates an array buffer.</li><li>A negative row count creates a cyclic buffer.</li><li>A zero row count (or <code>None</code>) creates a map buffer.</li></ul></li><li><code>rows</code>: A <code>dict</code> or <code>list</code> of rows to initialize the data buffer with. Each row can be a list or tuple. <ul><li>For array or cyclic buffers, pass a list of rows.</li><li>For map buffers, pass a dict with strings as keys and rows as values.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="buffers-in-practice"></a>Buffers in practice<a aria-hidden="true" tabindex="-1" class="hash-link" href="#buffers-in-practice" title="Direct link to heading">#</a></h2><p>Declare a 5-row buffer with columns <code>donut</code> and <code>price</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Array buffer</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">b </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fields</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;donut price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Data Buffers</h1></header><div class="markdown"><p><em>Data buffers</em> are in-memory data structures designed to hold a card&#x27;s tabular data. </p><p>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. </p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="cards-and-buffers"></a>Cards and buffers<a aria-hidden="true" tabindex="-1" class="hash-link" href="#cards-and-buffers" title="Direct link to heading">#</a></h2><p>Data buffers are tabular data structures containing columns and rows. Different cards utilize data buffers in different ways. For example, the plot in the <a href="/wave/docs/api/ui#small_series_stat_card">ui.small_series_stat_card()</a> uses a data buffer called <code>plot_data</code> to hold time series data.</p><p><img alt="CPU Usage" src="data:image/png;base64,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"></p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">small_series_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;1 1 1 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;CPU&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;10%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    plot_data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time usage&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">15</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    plot_category</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    plot_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;usage&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>In the above snippet, <code>data(&#x27;time usage&#x27;, -15)</code> defines a placeholder for a table with two columns (<code>time</code> and <code>usage</code>) and 15 rows (we&#x27;ll get to why the <code>15</code> is negative shortly), and the card&#x27;s <code>plot_category</code> and <code>plot_value</code> point to the two columns <code>time</code> and <code>usage</code>, respectively.</p><p>Appending <em>rows</em> (<em>tuples</em> or <em>records</em>) to the data buffer make the card plot those rows.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">while</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">get_time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> get_usage</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>The <code>while</code> loop above does something like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2020-10-05T02:10:20Z&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">42.5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2020-10-05T02:10:21Z&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">43.1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2020-10-05T02:10:22Z&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">39.2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2020-10-05T02:10:23Z&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">38.7</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="types-of-buffers"></a>Types of buffers<a aria-hidden="true" tabindex="-1" class="hash-link" href="#types-of-buffers" title="Direct link to heading">#</a></h2><p>There are three types of data buffers:</p><ul><li><strong>Array buffers</strong> hold tabular data with a fixed number of rows, and allow random access to rows using 0-based integers as keys.</li><li><strong>Cyclic buffers</strong> 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.</li><li><strong>Map buffers</strong> (or dictionary buffers) hold tabular data with a variable number of rows, and allow random access to rows using string keys.</li></ul><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</h5></div><div class="admonition-content"><p>Map buffers are convenient to use, but use more memory on the server compared to array buffers and cyclic buffers, so use them sparingly.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="the-data-function"></a>The data function<a aria-hidden="true" tabindex="-1" class="hash-link" href="#the-data-function" title="Direct link to heading">#</a></h2><p>Use the <code>data()</code> function to declare a data buffer. The Wave server uses this declaration to allocate memory for the data buffer.</p><p><code>data()</code> takes multiple arguments:</p><ul><li><code>fields</code>: The names of columns, in order; a space-separated string or a list or a tuple (<code>&#x27;foo bar&#x27;</code> or <code>[&#x27;foo&#x27;, &#x27;bar&#x27;]</code> or <code>(&#x27;foo&#x27;, &#x27;bar&#x27;)</code>.</li><li><code>size</code>: The number of rows to allocate.<ul><li>A positive row count creates an array buffer.</li><li>A negative row count creates a cyclic buffer.</li><li>A zero row count (or <code>None</code>) creates a map buffer.</li></ul></li><li><code>rows</code>: A <code>dict</code> or <code>list</code> of rows to initialize the data buffer with. Each row can be a list or tuple. <ul><li>For array or cyclic buffers, pass a list of rows.</li><li>For map buffers, pass a dict with strings as keys and rows as values.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="buffers-in-practice"></a>Buffers in practice<a aria-hidden="true" tabindex="-1" class="hash-link" href="#buffers-in-practice" title="Direct link to heading">#</a></h2><p>Declare a 5-row buffer with columns <code>donut</code> and <code>price</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Array buffer</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">b </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fields</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;donut price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Cyclic buffer</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">b </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fields</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;donut price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Map buffer</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">b </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fields</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;donut price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>Declare and initialize a 5-row buffer with columns <code>donut</code> and <code>price</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Array buffer</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">b </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fields</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;donut price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cream&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">3.99</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;custard&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2.99</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cinnamon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2.49</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;sprinkles&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2.49</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;sugar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1.99</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Cyclic buffer</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">b </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fields</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;donut price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cream&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">3.99</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;custard&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2.99</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cinnamon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2.49</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;sprinkles&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2.49</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;sugar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1.99</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -27,15 +27,15 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Map buffer (the following two forms are equivalent)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">b</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cin&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cinnamon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2.99</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">b</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">cin </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cinnamon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2.99</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><p>Modify a buffer value:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Array buffer (the following two forms are equivalent)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">b</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2.99</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">b</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">price </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2.99</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Cyclic buffer (the following two forms are equivalent)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">b</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2.99</span><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># last donut on menu now costs 2.99</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">b</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">price </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2.99</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Map buffer (the following three forms are equivalent)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">b</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cin&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2.99</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">b</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cin&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">price </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2.99</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">b</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">cin</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">price </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2.99</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/buffers.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/cards"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Cards</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/components"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Components »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#cards-and-buffers" class="table-of-contents__link">Cards and buffers</a></li><li><a href="#types-of-buffers" class="table-of-contents__link">Types of buffers</a></li><li><a href="#the-data-function" class="table-of-contents__link">The data function</a></li><li><a href="#buffers-in-practice" class="table-of-contents__link">Buffers in practice</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/649e08dd.1ade093f.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/649e08dd.a9f770b1.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/cards/index.html b/docs/docs/cards/index.html
index 23231a7464..6965528fd3 100644
--- a/docs/docs/cards/index.html
+++ b/docs/docs/cards/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Cards | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Cards | H2O Wave"><meta data-react-helmet="true" name="description" content="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."><meta data-react-helmet="true" property="og:description" content="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."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/cards"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/cards"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/4f6dabb0.f1e40f46.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/4f6dabb0.3f205608.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Cards</h1></header><div class="markdown"><p>A <em>card</em> represents a block of content on a <a href="/wave/docs/pages">Page</a>. This section lists the different kinds of cards available to you. Each of the cards below serve a different purpose.</p><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>To learn how to add, update or remove cards from a page, see <a href="/wave/docs/pages">Pages</a>.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="inputs"></a>Inputs<a aria-hidden="true" tabindex="-1" class="hash-link" href="#inputs" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="forms"></a>Forms<a aria-hidden="true" tabindex="-1" class="hash-link" href="#forms" title="Direct link to heading">#</a></h3><p>The form card is the most versatile and commonly used card in Wave apps. </p><p>Use a form card to display input <a href="/wave/docs/components">components</a> 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.</p><p>See <a href="/wave/docs/api/ui/#form_card">ui.form_card()</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="content"></a>Content<a aria-hidden="true" tabindex="-1" class="hash-link" href="#content" title="Direct link to heading">#</a></h2><p>Use content cards to display formatted text, images or HTML.</p><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p>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.</p></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="markdown"></a>Markdown<a aria-hidden="true" tabindex="-1" class="hash-link" href="#markdown" title="Direct link to heading">#</a></h3><p>Use a markdown card to display content authored in <a href="https://guides.github.com/features/mastering-markdown/" target="_blank" rel="noopener noreferrer">markdown</a>.</p><p>See <a href="/wave/docs/api/ui/#markdown_card">ui.markdown_card()</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="template"></a>Template<a aria-hidden="true" tabindex="-1" class="hash-link" href="#template" title="Direct link to heading">#</a></h3><p>Use a template card to display content authored using <a href="https://handlebarsjs.com/guide/" target="_blank" rel="noopener noreferrer">Handlebars</a> templates.</p><p>See <a href="/wave/docs/api/ui/#template_card">ui.template_card()</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="markup-html"></a>Markup (HTML)<a aria-hidden="true" tabindex="-1" class="hash-link" href="#markup-html" title="Direct link to heading">#</a></h3><p>Use a markup card to display raw HTML content.</p><p>See <a href="/wave/docs/api/ui/#markup_card">ui.markup_card()</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="inline-frame"></a>Inline Frame<a aria-hidden="true" tabindex="-1" class="hash-link" href="#inline-frame" title="Direct link to heading">#</a></h3><p>Use a frame card to display embed external HTML content your page.</p><p>See <a href="/wave/docs/api/ui/#frame_card">ui.frame_card()</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="image"></a>Image<a aria-hidden="true" tabindex="-1" class="hash-link" href="#image" title="Direct link to heading">#</a></h3><p>Use an image card to display an image on your page, either by specifying the image&#x27;s path or by providing base64-encoded image data. </p><p>See <a href="/wave/docs/api/ui/#image_card">ui.image_card()</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="control"></a>Control<a aria-hidden="true" tabindex="-1" class="hash-link" href="#control" title="Direct link to heading">#</a></h2><p>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.  </p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="header"></a>Header<a aria-hidden="true" tabindex="-1" class="hash-link" href="#header" title="Direct link to heading">#</a></h3><p>Use a header card to display your app&#x27;s title and icon.</p><p>See <a href="/wave/docs/api/ui/#header_card">ui.header_card()</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="breadcrumbs"></a>Breadcrumbs<a aria-hidden="true" tabindex="-1" class="hash-link" href="#breadcrumbs" title="Direct link to heading">#</a></h3><p>Use a breadcrumbs card to display <em>breadcrumbs</em>, a navigational aid that indicates the current page&#x27;s location withing a hierarchy, and help the user understand where they are in relation to the hierarchy.</p><p>See <a href="/wave/docs/api/ui/#breadcrumbs_card">ui.breadcrumbs_card()</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="navigation-pane"></a>Navigation Pane<a aria-hidden="true" tabindex="-1" class="hash-link" href="#navigation-pane" title="Direct link to heading">#</a></h3><p>Use a navigation pane to provide links to the main content areas of your app.</p><p>See <a href="/wave/docs/api/ui/#nav_card">ui.nav_card()</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tabs"></a>Tabs<a aria-hidden="true" tabindex="-1" class="hash-link" href="#tabs" title="Direct link to heading">#</a></h3><p>Use tabs to allow navigation between two or more views of content.</p><p>See <a href="/wave/docs/api/ui/#tab_card">ui.tab_card()</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="toolbar"></a>Toolbar<a aria-hidden="true" tabindex="-1" class="hash-link" href="#toolbar" title="Direct link to heading">#</a></h3><p>Use a toolbar to display top-level commands that operate on the content of your app. </p><p>See <a href="/wave/docs/api/ui/#toolbar_card">ui.toolbar_card()</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="graphics"></a>Graphics<a aria-hidden="true" tabindex="-1" class="hash-link" href="#graphics" title="Direct link to heading">#</a></h2><p>Use these cards to display plots (or charts or graphs), or draw custom graphics.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="plot"></a>Plot<a aria-hidden="true" tabindex="-1" class="hash-link" href="#plot" title="Direct link to heading">#</a></h3><p>Use a plot card to display visualizations defined using Wave&#x27;s native <code>plot()</code> API, based on the <a href="https://www.springer.com/gp/book/9780387245447" target="_blank" rel="noopener noreferrer">Grammar of Graphics</a>.</p><p>See <a href="/wave/docs/api/ui/#plot_card">ui.plot_card()</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="vega-lite"></a>Vega-lite<a aria-hidden="true" tabindex="-1" class="hash-link" href="#vega-lite" title="Direct link to heading">#</a></h3><p>Use this card to display visualizations defined using <a href="https://vega.github.io/vega-lite/" target="_blank" rel="noopener noreferrer">Vega-Lite</a>.</p><p>See <a href="/wave/docs/api/ui/#vega_card">ui.vega_card()</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="graphics-1"></a>Graphics<a aria-hidden="true" tabindex="-1" class="hash-link" href="#graphics-1" title="Direct link to heading">#</a></h3><p>Use a graphics card to render vector graphics and turtle graphics backed by <a href="/wave/docs/buffers">data buffers</a>.</p><p>See <a href="/wave/docs/api/ui/#graphics_card">ui.graphics_card()</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="stats"></a>Stats<a aria-hidden="true" tabindex="-1" class="hash-link" href="#stats" title="Direct link to heading">#</a></h2><p>Use stats cards for a quick and easy way to display live values and graphics (or <a href="https://en.wikipedia.org/wiki/Sparkline" target="_blank" rel="noopener noreferrer">sparklines</a>). These cards are backed by <a href="/wave/docs/buffers">data buffers</a>, and provide an efficient mechanism to display values that change rapidly over time.</p><table><thead><tr><th>Card</th><th>Use</th></tr></thead><tbody><tr><td><a href="/wave/docs/api/ui/#small_series_stat_card">ui.small_series_stat_card()</a></td><td>Small stat card; displays a primary value and a series plot.</td></tr><tr><td><a href="/wave/docs/api/ui/#small_stat_card">ui.small_stat_card()</a></td><td>Stat card; displays a single value.</td></tr><tr><td><a href="/wave/docs/api/ui/#large_bar_stat_card">ui.large_bar_stat_card()</a></td><td>Large captioned card; displays a primary value, an auxiliary value and a progress bar, with captions for each value.</td></tr><tr><td><a href="/wave/docs/api/ui/#large_stat_card">ui.large_stat_card()</a></td><td>Stat card; displays a primary value, an auxiliary value and a caption.</td></tr><tr><td><a href="/wave/docs/api/ui/#tall_gauge_stat_card">ui.tall_gauge_stat_card()</a></td><td>Tall stat card; displays a primary value, an auxiliary value and a progress gauge.</td></tr><tr><td><a href="/wave/docs/api/ui/#tall_series_stat_card">ui.tall_series_stat_card()</a></td><td>Tall stat card; displays a primary value, an auxiliary value and a series plot.</td></tr><tr><td><a href="/wave/docs/api/ui/#wide_bar_stat_card">ui.wide_bar_stat_card()</a></td><td>Wide stat card; displays a primary value, an auxiliary value and a progress bar.</td></tr><tr><td><a href="/wave/docs/api/ui/#wide_gauge_stat_card">ui.wide_gauge_stat_card()</a></td><td>Wide stat card; displays a primary value, an auxiliary value and a progress gauge.</td></tr><tr><td><a href="/wave/docs/api/ui/#wide_series_stat_card">ui.wide_series_stat_card()</a></td><td>Wide stat card; displays a primary value, an auxiliary value and a series plot.</td></tr></tbody></table><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="meta"></a>Meta<a aria-hidden="true" tabindex="-1" class="hash-link" href="#meta" title="Direct link to heading">#</a></h2><p>The meta card is an invisible card, primarily used to control the behavior of the page it&#x27;s placed on, like displaying a desktop notification, redirecting to a different page, or turning off realtime updates.</p><p>See <a href="/wave/docs/api/ui/#meta_card">ui.meta_card()</a>.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/cards.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/layout"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Layout</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/buffers"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Data Buffers »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#inputs" class="table-of-contents__link">Inputs</a><ul><li><a href="#forms" class="table-of-contents__link">Forms</a></li></ul></li><li><a href="#content" class="table-of-contents__link">Content</a><ul><li><a href="#markdown" class="table-of-contents__link">Markdown</a></li><li><a href="#template" class="table-of-contents__link">Template</a></li><li><a href="#markup-html" class="table-of-contents__link">Markup (HTML)</a></li><li><a href="#inline-frame" class="table-of-contents__link">Inline Frame</a></li><li><a href="#image" class="table-of-contents__link">Image</a></li></ul></li><li><a href="#control" class="table-of-contents__link">Control</a><ul><li><a href="#header" class="table-of-contents__link">Header</a></li><li><a href="#breadcrumbs" class="table-of-contents__link">Breadcrumbs</a></li><li><a href="#navigation-pane" class="table-of-contents__link">Navigation Pane</a></li><li><a href="#tabs" class="table-of-contents__link">Tabs</a></li><li><a href="#toolbar" class="table-of-contents__link">Toolbar</a></li></ul></li><li><a href="#graphics" class="table-of-contents__link">Graphics</a><ul><li><a href="#plot" class="table-of-contents__link">Plot</a></li><li><a href="#vega-lite" class="table-of-contents__link">Vega-lite</a></li><li><a href="#graphics-1" class="table-of-contents__link">Graphics</a></li></ul></li><li><a href="#stats" class="table-of-contents__link">Stats</a></li><li><a href="#meta" class="table-of-contents__link">Meta</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/4f6dabb0.f1e40f46.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Cards</h1></header><div class="markdown"><p>A <em>card</em> represents a block of content on a <a href="/wave/docs/pages">Page</a>. This section lists the different kinds of cards available to you. Each of the cards below serve a different purpose.</p><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>To learn how to add, update or remove cards from a page, see <a href="/wave/docs/pages">Pages</a>.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="inputs"></a>Inputs<a aria-hidden="true" tabindex="-1" class="hash-link" href="#inputs" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="forms"></a>Forms<a aria-hidden="true" tabindex="-1" class="hash-link" href="#forms" title="Direct link to heading">#</a></h3><p>The form card is the most versatile and commonly used card in Wave apps. </p><p>Use a form card to display input <a href="/wave/docs/components">components</a> 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.</p><p>See <a href="/wave/docs/api/ui/#form_card">ui.form_card()</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="content"></a>Content<a aria-hidden="true" tabindex="-1" class="hash-link" href="#content" title="Direct link to heading">#</a></h2><p>Use content cards to display formatted text, images or HTML.</p><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p>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.</p></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="markdown"></a>Markdown<a aria-hidden="true" tabindex="-1" class="hash-link" href="#markdown" title="Direct link to heading">#</a></h3><p>Use a markdown card to display content authored in <a href="https://guides.github.com/features/mastering-markdown/" target="_blank" rel="noopener noreferrer">markdown</a>.</p><p>See <a href="/wave/docs/api/ui/#markdown_card">ui.markdown_card()</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="template"></a>Template<a aria-hidden="true" tabindex="-1" class="hash-link" href="#template" title="Direct link to heading">#</a></h3><p>Use a template card to display content authored using <a href="https://handlebarsjs.com/guide/" target="_blank" rel="noopener noreferrer">Handlebars</a> templates.</p><p>See <a href="/wave/docs/api/ui/#template_card">ui.template_card()</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="markup-html"></a>Markup (HTML)<a aria-hidden="true" tabindex="-1" class="hash-link" href="#markup-html" title="Direct link to heading">#</a></h3><p>Use a markup card to display raw HTML content.</p><p>See <a href="/wave/docs/api/ui/#markup_card">ui.markup_card()</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="inline-frame"></a>Inline Frame<a aria-hidden="true" tabindex="-1" class="hash-link" href="#inline-frame" title="Direct link to heading">#</a></h3><p>Use a frame card to display embed external HTML content your page.</p><p>See <a href="/wave/docs/api/ui/#frame_card">ui.frame_card()</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="image"></a>Image<a aria-hidden="true" tabindex="-1" class="hash-link" href="#image" title="Direct link to heading">#</a></h3><p>Use an image card to display an image on your page, either by specifying the image&#x27;s path or by providing base64-encoded image data. </p><p>See <a href="/wave/docs/api/ui/#image_card">ui.image_card()</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="control"></a>Control<a aria-hidden="true" tabindex="-1" class="hash-link" href="#control" title="Direct link to heading">#</a></h2><p>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.  </p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="header"></a>Header<a aria-hidden="true" tabindex="-1" class="hash-link" href="#header" title="Direct link to heading">#</a></h3><p>Use a header card to display your app&#x27;s title and icon.</p><p>See <a href="/wave/docs/api/ui/#header_card">ui.header_card()</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="breadcrumbs"></a>Breadcrumbs<a aria-hidden="true" tabindex="-1" class="hash-link" href="#breadcrumbs" title="Direct link to heading">#</a></h3><p>Use a breadcrumbs card to display <em>breadcrumbs</em>, a navigational aid that indicates the current page&#x27;s location withing a hierarchy, and help the user understand where they are in relation to the hierarchy.</p><p>See <a href="/wave/docs/api/ui/#breadcrumbs_card">ui.breadcrumbs_card()</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="navigation-pane"></a>Navigation Pane<a aria-hidden="true" tabindex="-1" class="hash-link" href="#navigation-pane" title="Direct link to heading">#</a></h3><p>Use a navigation pane to provide links to the main content areas of your app.</p><p>See <a href="/wave/docs/api/ui/#nav_card">ui.nav_card()</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tabs"></a>Tabs<a aria-hidden="true" tabindex="-1" class="hash-link" href="#tabs" title="Direct link to heading">#</a></h3><p>Use tabs to allow navigation between two or more views of content.</p><p>See <a href="/wave/docs/api/ui/#tab_card">ui.tab_card()</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="toolbar"></a>Toolbar<a aria-hidden="true" tabindex="-1" class="hash-link" href="#toolbar" title="Direct link to heading">#</a></h3><p>Use a toolbar to display top-level commands that operate on the content of your app. </p><p>See <a href="/wave/docs/api/ui/#toolbar_card">ui.toolbar_card()</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="graphics"></a>Graphics<a aria-hidden="true" tabindex="-1" class="hash-link" href="#graphics" title="Direct link to heading">#</a></h2><p>Use these cards to display plots (or charts or graphs), or draw custom graphics.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="plot"></a>Plot<a aria-hidden="true" tabindex="-1" class="hash-link" href="#plot" title="Direct link to heading">#</a></h3><p>Use a plot card to display visualizations defined using Wave&#x27;s native <code>plot()</code> API, based on the <a href="https://www.springer.com/gp/book/9780387245447" target="_blank" rel="noopener noreferrer">Grammar of Graphics</a>.</p><p>See <a href="/wave/docs/api/ui/#plot_card">ui.plot_card()</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="vega-lite"></a>Vega-lite<a aria-hidden="true" tabindex="-1" class="hash-link" href="#vega-lite" title="Direct link to heading">#</a></h3><p>Use this card to display visualizations defined using <a href="https://vega.github.io/vega-lite/" target="_blank" rel="noopener noreferrer">Vega-Lite</a>.</p><p>See <a href="/wave/docs/api/ui/#vega_card">ui.vega_card()</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="graphics-1"></a>Graphics<a aria-hidden="true" tabindex="-1" class="hash-link" href="#graphics-1" title="Direct link to heading">#</a></h3><p>Use a graphics card to render vector graphics and turtle graphics backed by <a href="/wave/docs/buffers">data buffers</a>.</p><p>See <a href="/wave/docs/api/ui/#graphics_card">ui.graphics_card()</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="stats"></a>Stats<a aria-hidden="true" tabindex="-1" class="hash-link" href="#stats" title="Direct link to heading">#</a></h2><p>Use stats cards for a quick and easy way to display live values and graphics (or <a href="https://en.wikipedia.org/wiki/Sparkline" target="_blank" rel="noopener noreferrer">sparklines</a>). These cards are backed by <a href="/wave/docs/buffers">data buffers</a>, and provide an efficient mechanism to display values that change rapidly over time.</p><table><thead><tr><th>Card</th><th>Use</th></tr></thead><tbody><tr><td><a href="/wave/docs/api/ui/#small_series_stat_card">ui.small_series_stat_card()</a></td><td>Small stat card; displays a primary value and a series plot.</td></tr><tr><td><a href="/wave/docs/api/ui/#small_stat_card">ui.small_stat_card()</a></td><td>Stat card; displays a single value.</td></tr><tr><td><a href="/wave/docs/api/ui/#large_bar_stat_card">ui.large_bar_stat_card()</a></td><td>Large captioned card; displays a primary value, an auxiliary value and a progress bar, with captions for each value.</td></tr><tr><td><a href="/wave/docs/api/ui/#large_stat_card">ui.large_stat_card()</a></td><td>Stat card; displays a primary value, an auxiliary value and a caption.</td></tr><tr><td><a href="/wave/docs/api/ui/#tall_gauge_stat_card">ui.tall_gauge_stat_card()</a></td><td>Tall stat card; displays a primary value, an auxiliary value and a progress gauge.</td></tr><tr><td><a href="/wave/docs/api/ui/#tall_series_stat_card">ui.tall_series_stat_card()</a></td><td>Tall stat card; displays a primary value, an auxiliary value and a series plot.</td></tr><tr><td><a href="/wave/docs/api/ui/#wide_bar_stat_card">ui.wide_bar_stat_card()</a></td><td>Wide stat card; displays a primary value, an auxiliary value and a progress bar.</td></tr><tr><td><a href="/wave/docs/api/ui/#wide_gauge_stat_card">ui.wide_gauge_stat_card()</a></td><td>Wide stat card; displays a primary value, an auxiliary value and a progress gauge.</td></tr><tr><td><a href="/wave/docs/api/ui/#wide_series_stat_card">ui.wide_series_stat_card()</a></td><td>Wide stat card; displays a primary value, an auxiliary value and a series plot.</td></tr></tbody></table><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="meta"></a>Meta<a aria-hidden="true" tabindex="-1" class="hash-link" href="#meta" title="Direct link to heading">#</a></h2><p>The meta card is an invisible card, primarily used to control the behavior of the page it&#x27;s placed on, like displaying a desktop notification, redirecting to a different page, or turning off realtime updates.</p><p>See <a href="/wave/docs/api/ui/#meta_card">ui.meta_card()</a>.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/cards.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/layout"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Layout</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/buffers"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Data Buffers »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#inputs" class="table-of-contents__link">Inputs</a><ul><li><a href="#forms" class="table-of-contents__link">Forms</a></li></ul></li><li><a href="#content" class="table-of-contents__link">Content</a><ul><li><a href="#markdown" class="table-of-contents__link">Markdown</a></li><li><a href="#template" class="table-of-contents__link">Template</a></li><li><a href="#markup-html" class="table-of-contents__link">Markup (HTML)</a></li><li><a href="#inline-frame" class="table-of-contents__link">Inline Frame</a></li><li><a href="#image" class="table-of-contents__link">Image</a></li></ul></li><li><a href="#control" class="table-of-contents__link">Control</a><ul><li><a href="#header" class="table-of-contents__link">Header</a></li><li><a href="#breadcrumbs" class="table-of-contents__link">Breadcrumbs</a></li><li><a href="#navigation-pane" class="table-of-contents__link">Navigation Pane</a></li><li><a href="#tabs" class="table-of-contents__link">Tabs</a></li><li><a href="#toolbar" class="table-of-contents__link">Toolbar</a></li></ul></li><li><a href="#graphics" class="table-of-contents__link">Graphics</a><ul><li><a href="#plot" class="table-of-contents__link">Plot</a></li><li><a href="#vega-lite" class="table-of-contents__link">Vega-lite</a></li><li><a href="#graphics-1" class="table-of-contents__link">Graphics</a></li></ul></li><li><a href="#stats" class="table-of-contents__link">Stats</a></li><li><a href="#meta" class="table-of-contents__link">Meta</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/4f6dabb0.3f205608.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/change-log/index.html b/docs/docs/change-log/index.html
index 1b57905b70..cae94505c6 100644
--- a/docs/docs/change-log/index.html
+++ b/docs/docs/change-log/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Change Log | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Change Log | H2O Wave"><meta data-react-helmet="true" name="description" content="Versioning"><meta data-react-helmet="true" property="og:description" content="Versioning"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/change-log"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/change-log"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/3b64911a.77a6696c.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/3b64911a.84bb370d.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Change Log</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="versioning"></a>Versioning<a aria-hidden="true" tabindex="-1" class="hash-link" href="#versioning" title="Direct link to heading">#</a></h2><p>H2O Wave and its Python driver follow <a href="https://semver.org/" target="_blank" rel="noopener noreferrer">Semantic Versioning</a>. 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.</p><p>When referencing the <a href="https://pypi.org/project/h2o-wave/" target="_blank" rel="noopener noreferrer"><code>h2o-wave</code> package</a> from your <code>requirements.txt</code> or <code>setup.py</code>, you should always use a version constraint such as <code>&gt;=4.2, &lt;5</code> (any version 4.2 or greater, but less than 5), since major releases of H2O Wave do include breaking changes.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="support-policy"></a>Support Policy<a aria-hidden="true" tabindex="-1" class="hash-link" href="#support-policy" title="Direct link to heading">#</a></h2><p>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.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v080"></a>v0.8.0<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v080" title="Direct link to heading">#</a></h2><p>Oct 20, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.8.0" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Escape Cypress test functions using leading underscore <code>_</code> if they overlap with Python reserved keywords.</li><li>Add data-test attribute to all form components for browser testing.</li><li>Add <code>trigger</code> property to the date picker component.</li><li>Allow pre-selecting rows in the table component.</li><li>Add <code>visible</code> property to all components to show/hide them on demand.</li><li>Add support for OpenID Connect (OIDC).</li><li>Add documentation on security.</li></ul></li><li>Fixed<ul><li>Default HTML page title set to <em>Wave</em>.</li><li>Make % heights work properly for frames inside forms.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v070"></a>v0.7.0<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v070" title="Direct link to heading">#</a></h2><p>Oct 15, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.7.0" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Hash navigation using context menus.</li><li>Allow handling location hash when an open app page is reloaded.</li><li>Allow pre-selecting a tab in a tab_card.</li><li>Allow setting a height on the file upload component.</li><li>Allow justifying buttons left/center/right/spread.</li><li>Add data-test attribute to all cards for browser testing.</li><li>New documentation website, gallery, guides and tutorials.</li></ul></li><li>Changed<ul><li>Fit table height to content height whenever possible.</li><li>Improve spacing between form components.</li><li>data-test attribute is set based on the names of cards.</li></ul></li><li>Fixed<ul><li>Quote CSV data properly while downloading a table component&#x27;s data.</li><li>Don&#x27;t auto-hide axis labels in plots when data is missing.</li><li>Display labels instead of names when a pickers initial values are set.</li><li>Handle numeric column sorting in the table component.</li><li>Handle icon column sorting in the table component.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v060"></a>v0.6.0<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v060" title="Direct link to heading">#</a></h2><p>Sep 23, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.6.0" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Apps when launched now automatically use an available free port instead of <code>55556</code>.</li><li>Client-side redirects to URLs and hashes using <code>meta_card.redirect</code>.</li><li>Context menus inside forms: <code>ui.text_xl()</code> and <code>ui.text_l()</code> now support optional context menus.</li><li>Plots now support specifying data values for predictable color encoding and legends.</li><li><code>ui.markup</code> component for rendering HTML inline in forms.</li><li><code>ui.template</code> component for rendering templated HTML inline in forms.</li><li>The height of tables can now be controlled using the <code>height</code> attribute.</li><li>Both sorting and group-by now work on the same table column if specified.</li><li>Lots of examples on how to use <code>ui.table</code> sorting, grouping, search, download, etc.</li><li>Ability to specify which column in a <code>ui.table</code> is the primary column, or disable altogether.</li></ul></li><li>Changed<ul><li><code>ui.text()</code> now unconditionally allows embedded HTML tags.</li><li>App host now defaults to <code>127.0.0.1</code> instead of <code>localhost</code>.</li><li>Footer display in <code>ui.table</code> is now inferred from usage and displayed automatically.</li><li>The <code>min_width</code> and <code>max_width</code> attributes for table columns are now strings (consistency).</li></ul></li><li>Fixed<ul><li>Background color rendering bug when page overflows after loading.</li><li>Render tooltip properly on toolbar command buttons.</li><li><code>ui.table()</code> rendering bug: remove stray <code>0</code>.</li><li>Python error stack trace, if any, is displayed on top of all other cards on page.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v050"></a>v0.5.0<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v050" title="Direct link to heading">#</a></h2><p>Sep 18, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.5.0" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Example for controlling cards with tabs.</li><li>Cypress test runner for CI.</li><li>Search, sort, filter, group-by, export and custom cell types for table component.</li></ul></li><li>Changed<ul><li>Remove semantic validation for stepper component.</li></ul></li><li>Fixed<ul><li>Value synchronization bug in textbox component.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v040"></a>v0.4.0<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v040" title="Direct link to heading">#</a></h2><p>Sep 16, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.4.0" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Trigger attribute to checklist component.</li></ul></li><li>Changed<ul><li>Allow same min and max values for the range slider component.</li><li>App tests are now automatically and directly translated to Cypress tests when loaded.</li></ul></li><li>Fixed<ul><li>Allow removing selected options from the picker component.</li><li>Render axis title properly when specified.</li><li>Raise informative error message if attempting to use Numpy objects in components.</li></ul></li><li>Removed<ul><li>Cypress test bridge removed from server.</li><li><code>run_tests</code> API.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v031"></a>v0.3.1<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v031" title="Direct link to heading">#</a></h2><p>Sep 8, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.3.1" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Fixed<ul><li>Multiselect dropdown checkboxes do not respond when clicked.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v030"></a>v0.3.0<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v030" title="Direct link to heading">#</a></h2><p>Sep 8, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.3.0" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Native plots inside form cards - <code>ui.visualization()</code>.</li><li>Vega plots inside form cards - <code>ui.vega_visualization()</code>.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v020"></a>v0.2.0<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v020" title="Direct link to heading">#</a></h2><p>Sep 4, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.2.0" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Picker component.</li><li>Breadcrumbs component.</li><li>Range slider component.</li><li>Stepper component.</li><li>Allow backend to handle changes to textboxes as you type.</li><li>Select / deselect all controls for multivalued dropdown component.</li><li>Examples for using plotly plots.</li><li>Example for updating vega plots.</li><li>OS-specific installations instructions.</li><li>Cypress test framework support.</li></ul></li><li>Fixed<ul><li>Add .exe extension o Windows executable.</li><li>Percentage formatting in Safari.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v014"></a>v0.1.4<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v014" title="Direct link to heading">#</a></h2><p>Aug 10, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.1.4" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Fixed<ul><li>Frame heights are not respected with total height of frames exceeds containing card size</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v013"></a>v0.1.3<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v013" title="Direct link to heading">#</a></h2><p>Aug 10, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.1.3" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Fixed<ul><li><code>h2o_wave.ui.link()</code> now has a <code>download</code> attribute to work around a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=858538" target="_blank" rel="noopener noreferrer">Firefox bug</a>.</li><li>Race condition in the interactive tour that caused some examples to not preview properly.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v012"></a>v0.1.2<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v012" title="Direct link to heading">#</a></h2><p>Aug 7, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.1.2" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>API for <code>h2o_wave.core.Expando</code> copy, clone and item/attribute deletion.</li><li>Migration guide.</li><li>Example for setting browser window title.</li><li>API and example for Header card: <code>h2o_wave.ui.header_card()</code>.</li><li>Export <code>h2o_wave.core.Ref</code> from <code>h2o_wave</code>.</li><li>API and examples for inline frames inside form cards: <code>h2o_wave.ui.frame()</code>.</li></ul></li><li>Changed<ul><li>Renamed env var prefix for settings to <code>H2O_Q_</code>.</li></ul></li><li>Fixed<ul><li>Plot X/Y axis transpose bug.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v011"></a>v0.1.1<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v011" title="Direct link to heading">#</a></h2><p>Jul 27, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.1.1" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Options for file type and size to file upload component.</li><li>API for displaying desktop notifications.</li><li>Buttons can now submit specific values instead of only True/False.</li><li>Examples for layout and card sizing.</li><li>Image card for displaying base64-encoded images.</li><li>Example for image card.</li><li>Vector graphics API.</li><li>Turtle graphics based path generator.</li><li>Examples for graphics card.</li></ul></li><li>Fixed<ul><li>Re-rendering performance improvements.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v010"></a>v0.1.0<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v010" title="Direct link to heading">#</a></h2><p>Jul 13, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.1.0" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Example for displaying iframe content &gt; 2MB.</li><li>Example for plotting using matplotlib.</li><li>Example for plotting using Altair.</li><li>Example for plotting using Vega.</li><li>Example for plotting using Bokeh.</li><li>Example for plotting using custom D3.js Javascript.</li><li>Example for live dashboard with stats cards.</li><li>Example for master-detail user interfaces using <code>ui.table()</code>.</li><li>Example for authoring multi-step wizard user interfaces.</li><li>Unload API: <code>q.unload()</code> to delete uploaded files.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v007"></a>v0.0.7<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v007" title="Direct link to heading">#</a></h2><p>Jul 12, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.0.7" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Download API: <code>q.download()</code>.</li><li>Vega-lite support: <code>ui.vega_card()</code>.</li><li>Context menu support to all cards.</li><li><code>refresh</code> attribute on <code>meta_card</code> allows static pages to stop receiving live updates.</li><li>Passing <code>-debug</code> when starting server displays site stats at <code>/_d/site</code>.</li><li>Drag and drop support for file upload component.</li><li>Template expression support for markdown cards.</li><li>All APIs and examples documented.</li><li>All 110 examples now ship with the Sphinx documentation.</li><li>Documentation now ships with release download.</li></ul></li><li>Changed<ul><li>API consistency: <code>ui.vis()</code> renamed to <code>ui.plot()</code>.</li><li>All stats cards now have descriptive names.</li><li>API consistency: <code>ui.mark.mark</code> renamed to <code>ui.mark.type</code>.</li><li>API consistency: <code>page.sync()</code> and <code>page.push()</code> renamed to <code>page.save()</code>.</li></ul></li><li>Removed<ul><li><code>ui.dashboard_card()</code> and <code>ui.notebook_card()</code>.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v006"></a>v0.0.6<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v006" title="Direct link to heading">#</a></h2><p>Jul 6, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.0.6" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Log network traffic when logging is set to debug mode.</li><li>Capture and display unhandled exceptions on the UI.</li><li>Routing using location hash.</li><li>Toolbar component.</li><li>Tabs component.</li><li>Nav component.</li><li>Upload API: <code>q.upload()</code>.</li></ul></li><li>Changed<ul><li><code>q.session</code> renamed to <code>q.user</code></li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v005"></a>v0.0.5<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v005" title="Direct link to heading">#</a></h2><p>Jun 29, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.0.5" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Add configure() API to configure environment before launching.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v004"></a>v0.0.4<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v004" title="Direct link to heading">#</a></h2><p>Jun 26, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.0.4" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Multi-user and multi-client support: launch apps in <code>multicast</code> or <code>unicast</code> modes in addition to <code>broadcast</code> mode.</li><li>Client-specific data can now be stored and accessed via <code>q.client</code>, similar to <code>q.session</code> and <code>q.app</code>.</li><li>Simpler page referencing: <code>import site</code> can be used instead of <code>site = Site()</code>.</li></ul></li><li>Changed<ul><li>Apps now lauch in <code>unicast</code> mode by default instead of <code>broadcast</code> mode.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v003"></a>v0.0.3<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v003" title="Direct link to heading">#</a></h2><p>Jun 19, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.0.3" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Make <code>Expando</code> data structure available for apps.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v002"></a>v0.0.2<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v002" title="Direct link to heading">#</a></h2><p>Jun 17, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.0.2" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Initial version</li><li>v0.0.1</li><li>Package stub</li></ul></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/change-log.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/migrating-0"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Migrating from pre-alpha »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#versioning" class="table-of-contents__link">Versioning</a></li><li><a href="#support-policy" class="table-of-contents__link">Support Policy</a></li><li><a href="#v080" class="table-of-contents__link">v0.8.0</a></li><li><a href="#v070" class="table-of-contents__link">v0.7.0</a></li><li><a href="#v060" class="table-of-contents__link">v0.6.0</a></li><li><a href="#v050" class="table-of-contents__link">v0.5.0</a></li><li><a href="#v040" class="table-of-contents__link">v0.4.0</a></li><li><a href="#v031" class="table-of-contents__link">v0.3.1</a></li><li><a href="#v030" class="table-of-contents__link">v0.3.0</a></li><li><a href="#v020" class="table-of-contents__link">v0.2.0</a></li><li><a href="#v014" class="table-of-contents__link">v0.1.4</a></li><li><a href="#v013" class="table-of-contents__link">v0.1.3</a></li><li><a href="#v012" class="table-of-contents__link">v0.1.2</a></li><li><a href="#v011" class="table-of-contents__link">v0.1.1</a></li><li><a href="#v010" class="table-of-contents__link">v0.1.0</a></li><li><a href="#v007" class="table-of-contents__link">v0.0.7</a></li><li><a href="#v006" class="table-of-contents__link">v0.0.6</a></li><li><a href="#v005" class="table-of-contents__link">v0.0.5</a></li><li><a href="#v004" class="table-of-contents__link">v0.0.4</a></li><li><a href="#v003" class="table-of-contents__link">v0.0.3</a></li><li><a href="#v002" class="table-of-contents__link">v0.0.2</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/3b64911a.77a6696c.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Change Log</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="versioning"></a>Versioning<a aria-hidden="true" tabindex="-1" class="hash-link" href="#versioning" title="Direct link to heading">#</a></h2><p>H2O Wave and its Python driver follow <a href="https://semver.org/" target="_blank" rel="noopener noreferrer">Semantic Versioning</a>. 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.</p><p>When referencing the <a href="https://pypi.org/project/h2o-wave/" target="_blank" rel="noopener noreferrer"><code>h2o-wave</code> package</a> from your <code>requirements.txt</code> or <code>setup.py</code>, you should always use a version constraint such as <code>&gt;=4.2, &lt;5</code> (any version 4.2 or greater, but less than 5), since major releases of H2O Wave do include breaking changes.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="support-policy"></a>Support Policy<a aria-hidden="true" tabindex="-1" class="hash-link" href="#support-policy" title="Direct link to heading">#</a></h2><p>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.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v090"></a>v0.9.0<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v090" title="Direct link to heading">#</a></h2><p>Oct 28, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.9.0" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>ASGI compatibility: Wave apps can now be run using an ASGI server.</li><li><code>@app</code> decorator to identify primary query handler in an app.</li><li>Live-reload for apps.</li><li>New <code>wave</code> CLI and <code>wave run</code> command.</li><li><code>q.run()</code> and <code>q.exec()</code> APIs for running background tasks.</li><li>Display server version/build at startup.</li><li><code>AsyncSite</code> for updating other pages from an app without blocking the main thread.</li><li>Drop or clear pages from a site using <code>del site[route]</code>.</li></ul></li><li>Changed<ul><li>All HTTP calls now use non-blocking asyncio using the <code>httpx</code> library.</li><li><code>listen()</code> is deprecated.</li><li><code>H2O_WAVE_INTERNAL_ADDRESS</code> and <code>H2O_WAVE_EXTERNAL_ADDRESS</code> are deprecated.</li><li>An app&#x27;s UI is now cleared when an app crashes or is terminated.</li><li>All examples migrated to use <code>@app</code> instead of <code>listen()</code>.</li><li>Server binary renamed to <code>waved</code> (as in <code>wave</code> daemon).</li><li>Apps using <code>@app</code> must be run using <code>wave run</code>.</li></ul></li><li>Fixed<ul><li>Performance and concurrency improvements across the board.</li><li>Stability improvements to the Wave Tour.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v081"></a>v0.8.1<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v081" title="Direct link to heading">#</a></h2><p>Oct 26, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.8.1" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Fixed<ul><li>Enable <code>visible</code> properly on <code>text_*</code> components.</li><li>Fix checkbox value unchecking.</li><li>Improve stepper component layout.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v080"></a>v0.8.0<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v080" title="Direct link to heading">#</a></h2><p>Oct 20, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.8.0" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Escape Cypress test functions using leading underscore <code>_</code> if they overlap with Python reserved keywords.</li><li>Add data-test attribute to all form components for browser testing.</li><li>Add <code>trigger</code> property to the date picker component.</li><li>Allow pre-selecting rows in the table component.</li><li>Add <code>visible</code> property to all components to show/hide them on demand.</li><li>Add support for OpenID Connect (OIDC).</li><li>Add documentation on security.</li></ul></li><li>Fixed<ul><li>Default HTML page title set to <em>Wave</em>.</li><li>Make % heights work properly for frames inside forms.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v070"></a>v0.7.0<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v070" title="Direct link to heading">#</a></h2><p>Oct 15, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.7.0" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Hash navigation using context menus.</li><li>Allow handling location hash when an open app page is reloaded.</li><li>Allow pre-selecting a tab in a tab_card.</li><li>Allow setting a height on the file upload component.</li><li>Allow justifying buttons left/center/right/spread.</li><li>Add data-test attribute to all cards for browser testing.</li><li>New documentation website, gallery, guides and tutorials.</li></ul></li><li>Changed<ul><li>Fit table height to content height whenever possible.</li><li>Improve spacing between form components.</li><li>data-test attribute is set based on the names of cards.</li></ul></li><li>Fixed<ul><li>Quote CSV data properly while downloading a table component&#x27;s data.</li><li>Don&#x27;t auto-hide axis labels in plots when data is missing.</li><li>Display labels instead of names when a pickers initial values are set.</li><li>Handle numeric column sorting in the table component.</li><li>Handle icon column sorting in the table component.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v060"></a>v0.6.0<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v060" title="Direct link to heading">#</a></h2><p>Sep 23, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.6.0" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Apps when launched now automatically use an available free port instead of <code>55556</code>.</li><li>Client-side redirects to URLs and hashes using <code>meta_card.redirect</code>.</li><li>Context menus inside forms: <code>ui.text_xl()</code> and <code>ui.text_l()</code> now support optional context menus.</li><li>Plots now support specifying data values for predictable color encoding and legends.</li><li><code>ui.markup</code> component for rendering HTML inline in forms.</li><li><code>ui.template</code> component for rendering templated HTML inline in forms.</li><li>The height of tables can now be controlled using the <code>height</code> attribute.</li><li>Both sorting and group-by now work on the same table column if specified.</li><li>Lots of examples on how to use <code>ui.table</code> sorting, grouping, search, download, etc.</li><li>Ability to specify which column in a <code>ui.table</code> is the primary column, or disable altogether.</li></ul></li><li>Changed<ul><li><code>ui.text()</code> now unconditionally allows embedded HTML tags.</li><li>App host now defaults to <code>127.0.0.1</code> instead of <code>localhost</code>.</li><li>Footer display in <code>ui.table</code> is now inferred from usage and displayed automatically.</li><li>The <code>min_width</code> and <code>max_width</code> attributes for table columns are now strings (consistency).</li></ul></li><li>Fixed<ul><li>Background color rendering bug when page overflows after loading.</li><li>Render tooltip properly on toolbar command buttons.</li><li><code>ui.table()</code> rendering bug: remove stray <code>0</code>.</li><li>Python error stack trace, if any, is displayed on top of all other cards on page.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v050"></a>v0.5.0<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v050" title="Direct link to heading">#</a></h2><p>Sep 18, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.5.0" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Example for controlling cards with tabs.</li><li>Cypress test runner for CI.</li><li>Search, sort, filter, group-by, export and custom cell types for table component.</li></ul></li><li>Changed<ul><li>Remove semantic validation for stepper component.</li></ul></li><li>Fixed<ul><li>Value synchronization bug in textbox component.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v040"></a>v0.4.0<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v040" title="Direct link to heading">#</a></h2><p>Sep 16, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.4.0" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Trigger attribute to checklist component.</li></ul></li><li>Changed<ul><li>Allow same min and max values for the range slider component.</li><li>App tests are now automatically and directly translated to Cypress tests when loaded.</li></ul></li><li>Fixed<ul><li>Allow removing selected options from the picker component.</li><li>Render axis title properly when specified.</li><li>Raise informative error message if attempting to use Numpy objects in components.</li></ul></li><li>Removed<ul><li>Cypress test bridge removed from server.</li><li><code>run_tests</code> API.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v031"></a>v0.3.1<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v031" title="Direct link to heading">#</a></h2><p>Sep 8, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.3.1" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Fixed<ul><li>Multiselect dropdown checkboxes do not respond when clicked.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v030"></a>v0.3.0<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v030" title="Direct link to heading">#</a></h2><p>Sep 8, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.3.0" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Native plots inside form cards - <code>ui.visualization()</code>.</li><li>Vega plots inside form cards - <code>ui.vega_visualization()</code>.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v020"></a>v0.2.0<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v020" title="Direct link to heading">#</a></h2><p>Sep 4, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.2.0" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Picker component.</li><li>Breadcrumbs component.</li><li>Range slider component.</li><li>Stepper component.</li><li>Allow backend to handle changes to textboxes as you type.</li><li>Select / deselect all controls for multivalued dropdown component.</li><li>Examples for using plotly plots.</li><li>Example for updating vega plots.</li><li>OS-specific installations instructions.</li><li>Cypress test framework support.</li></ul></li><li>Fixed<ul><li>Add .exe extension o Windows executable.</li><li>Percentage formatting in Safari.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v014"></a>v0.1.4<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v014" title="Direct link to heading">#</a></h2><p>Aug 10, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.1.4" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Fixed<ul><li>Frame heights are not respected with total height of frames exceeds containing card size</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v013"></a>v0.1.3<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v013" title="Direct link to heading">#</a></h2><p>Aug 10, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.1.3" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Fixed<ul><li><code>h2o_wave.ui.link()</code> now has a <code>download</code> attribute to work around a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=858538" target="_blank" rel="noopener noreferrer">Firefox bug</a>.</li><li>Race condition in the interactive tour that caused some examples to not preview properly.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v012"></a>v0.1.2<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v012" title="Direct link to heading">#</a></h2><p>Aug 7, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.1.2" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>API for <code>h2o_wave.core.Expando</code> copy, clone and item/attribute deletion.</li><li>Migration guide.</li><li>Example for setting browser window title.</li><li>API and example for Header card: <code>h2o_wave.ui.header_card()</code>.</li><li>Export <code>h2o_wave.core.Ref</code> from <code>h2o_wave</code>.</li><li>API and examples for inline frames inside form cards: <code>h2o_wave.ui.frame()</code>.</li></ul></li><li>Changed<ul><li>Renamed env var prefix for settings to <code>H2O_Q_</code>.</li></ul></li><li>Fixed<ul><li>Plot X/Y axis transpose bug.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v011"></a>v0.1.1<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v011" title="Direct link to heading">#</a></h2><p>Jul 27, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.1.1" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Options for file type and size to file upload component.</li><li>API for displaying desktop notifications.</li><li>Buttons can now submit specific values instead of only True/False.</li><li>Examples for layout and card sizing.</li><li>Image card for displaying base64-encoded images.</li><li>Example for image card.</li><li>Vector graphics API.</li><li>Turtle graphics based path generator.</li><li>Examples for graphics card.</li></ul></li><li>Fixed<ul><li>Re-rendering performance improvements.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v010"></a>v0.1.0<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v010" title="Direct link to heading">#</a></h2><p>Jul 13, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.1.0" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Example for displaying iframe content &gt; 2MB.</li><li>Example for plotting using matplotlib.</li><li>Example for plotting using Altair.</li><li>Example for plotting using Vega.</li><li>Example for plotting using Bokeh.</li><li>Example for plotting using custom D3.js Javascript.</li><li>Example for live dashboard with stats cards.</li><li>Example for master-detail user interfaces using <code>ui.table()</code>.</li><li>Example for authoring multi-step wizard user interfaces.</li><li>Unload API: <code>q.unload()</code> to delete uploaded files.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v007"></a>v0.0.7<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v007" title="Direct link to heading">#</a></h2><p>Jul 12, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.0.7" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Download API: <code>q.download()</code>.</li><li>Vega-lite support: <code>ui.vega_card()</code>.</li><li>Context menu support to all cards.</li><li><code>refresh</code> attribute on <code>meta_card</code> allows static pages to stop receiving live updates.</li><li>Passing <code>-debug</code> when starting server displays site stats at <code>/_d/site</code>.</li><li>Drag and drop support for file upload component.</li><li>Template expression support for markdown cards.</li><li>All APIs and examples documented.</li><li>All 110 examples now ship with the Sphinx documentation.</li><li>Documentation now ships with release download.</li></ul></li><li>Changed<ul><li>API consistency: <code>ui.vis()</code> renamed to <code>ui.plot()</code>.</li><li>All stats cards now have descriptive names.</li><li>API consistency: <code>ui.mark.mark</code> renamed to <code>ui.mark.type</code>.</li><li>API consistency: <code>page.sync()</code> and <code>page.push()</code> renamed to <code>page.save()</code>.</li></ul></li><li>Removed<ul><li><code>ui.dashboard_card()</code> and <code>ui.notebook_card()</code>.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v006"></a>v0.0.6<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v006" title="Direct link to heading">#</a></h2><p>Jul 6, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.0.6" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Log network traffic when logging is set to debug mode.</li><li>Capture and display unhandled exceptions on the UI.</li><li>Routing using location hash.</li><li>Toolbar component.</li><li>Tabs component.</li><li>Nav component.</li><li>Upload API: <code>q.upload()</code>.</li></ul></li><li>Changed<ul><li><code>q.session</code> renamed to <code>q.user</code></li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v005"></a>v0.0.5<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v005" title="Direct link to heading">#</a></h2><p>Jun 29, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.0.5" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Add configure() API to configure environment before launching.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v004"></a>v0.0.4<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v004" title="Direct link to heading">#</a></h2><p>Jun 26, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.0.4" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Multi-user and multi-client support: launch apps in <code>multicast</code> or <code>unicast</code> modes in addition to <code>broadcast</code> mode.</li><li>Client-specific data can now be stored and accessed via <code>q.client</code>, similar to <code>q.session</code> and <code>q.app</code>.</li><li>Simpler page referencing: <code>import site</code> can be used instead of <code>site = Site()</code>.</li></ul></li><li>Changed<ul><li>Apps now lauch in <code>unicast</code> mode by default instead of <code>broadcast</code> mode.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v003"></a>v0.0.3<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v003" title="Direct link to heading">#</a></h2><p>Jun 19, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.0.3" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Added<ul><li>Make <code>Expando</code> data structure available for apps.</li></ul></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="v002"></a>v0.0.2<a aria-hidden="true" tabindex="-1" class="hash-link" href="#v002" title="Direct link to heading">#</a></h2><p>Jun 17, 2020 - <a href="https://github.com/h2oai/wave/releases/tag/v0.0.2" target="_blank" rel="noopener noreferrer">Download</a></p><ul><li>Initial version</li><li>v0.0.1</li><li>Package stub</li></ul></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/change-log.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/migrating-0-8"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Migrating from 0.8 »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#versioning" class="table-of-contents__link">Versioning</a></li><li><a href="#support-policy" class="table-of-contents__link">Support Policy</a></li><li><a href="#v090" class="table-of-contents__link">v0.9.0</a></li><li><a href="#v081" class="table-of-contents__link">v0.8.1</a></li><li><a href="#v080" class="table-of-contents__link">v0.8.0</a></li><li><a href="#v070" class="table-of-contents__link">v0.7.0</a></li><li><a href="#v060" class="table-of-contents__link">v0.6.0</a></li><li><a href="#v050" class="table-of-contents__link">v0.5.0</a></li><li><a href="#v040" class="table-of-contents__link">v0.4.0</a></li><li><a href="#v031" class="table-of-contents__link">v0.3.1</a></li><li><a href="#v030" class="table-of-contents__link">v0.3.0</a></li><li><a href="#v020" class="table-of-contents__link">v0.2.0</a></li><li><a href="#v014" class="table-of-contents__link">v0.1.4</a></li><li><a href="#v013" class="table-of-contents__link">v0.1.3</a></li><li><a href="#v012" class="table-of-contents__link">v0.1.2</a></li><li><a href="#v011" class="table-of-contents__link">v0.1.1</a></li><li><a href="#v010" class="table-of-contents__link">v0.1.0</a></li><li><a href="#v007" class="table-of-contents__link">v0.0.7</a></li><li><a href="#v006" class="table-of-contents__link">v0.0.6</a></li><li><a href="#v005" class="table-of-contents__link">v0.0.5</a></li><li><a href="#v004" class="table-of-contents__link">v0.0.4</a></li><li><a href="#v003" class="table-of-contents__link">v0.0.3</a></li><li><a href="#v002" class="table-of-contents__link">v0.0.2</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/3b64911a.84bb370d.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/cli/index.html b/docs/docs/cli/index.html
new file mode 100644
index 0000000000..5b8a5317cc
--- /dev/null
+++ b/docs/docs/cli/index.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="generator" content="Docusaurus v2.0.0-alpha.65">
+<title data-react-helmet="true">Command Line Interface | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Command Line Interface | H2O Wave"><meta data-react-helmet="true" name="description" content="The CLI is accessible using the wave command, available once you pip install h2o-wave."><meta data-react-helmet="true" property="og:description" content="The CLI is accessible using the wave command, available once you pip install h2o-wave."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/cli"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/cli"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/1a20bc57.a5744ee9.js" as="script">
+</head>
+<body>
+<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Command Line Interface</h1></header><div class="markdown"><p>The CLI is accessible using the <code>wave</code> command, available once you <code>pip install h2o-wave</code>.</p><p>To view a list of sub-commands, simply run <code>wave</code>:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ wave</span></div></div></div></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">Usage: wave [OPTIONS] COMMAND [ARGS]...</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Options:</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  --help  Show this message and exit.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Commands:</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  run  Run an app.</span></div></div></div></div></div><p>Get help on a sub-command:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ wave </span><span class="token operator" style="color:rgb(137, 221, 255)">&lt;</span><span class="token plain">command</span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> --help</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="wave-run"></a>wave run<a aria-hidden="true" tabindex="-1" class="hash-link" href="#wave-run" title="Direct link to heading">#</a></h2><p><code>wave run</code> runs an app.</p><p>Run app.py with auto reload:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ wave run app</span></div></div></div></div></div><p>Run path/to/app.py with auto reload:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ wave run path.to.app</span></div></div></div></div></div><p>Run path/to/app.py without auto reload:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ wave run --no-reload path.to.app</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/cli.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/logging"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Logging</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/development"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Development »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#wave-run" class="table-of-contents__link">wave run</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/1a20bc57.a5744ee9.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/docs/components/index.html b/docs/docs/components/index.html
index ca98f621bf..193134fc2f 100644
--- a/docs/docs/components/index.html
+++ b/docs/docs/components/index.html
@@ -5,30 +5,30 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Components | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Components | H2O Wave"><meta data-react-helmet="true" name="description" content="Components are blocks of interactive content (inputs, commands, notifications, graphics) contained in a form card."><meta data-react-helmet="true" property="og:description" content="Components are blocks of interactive content (inputs, commands, notifications, graphics) contained in a form card."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/components"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/components"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/1f7c204c.0cf3b132.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/1f7c204c.d6a6621a.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Components</h1></header><div class="markdown"><p>Components are blocks of interactive content (inputs, commands, notifications, graphics) contained in a <a href="/wave/docs/api/ui#form_card">form card</a>.</p><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>Several of the components below allow users to input information or interact with them in some way. To know what the user did, see <a href="/wave/docs/arguments">event arguments</a>.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="content"></a>Content<a aria-hidden="true" tabindex="-1" class="hash-link" href="#content" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="text"></a>Text<a aria-hidden="true" tabindex="-1" class="hash-link" href="#text" title="Direct link to heading">#</a></h3><p>Use <code>text()</code> or one of its variants to display text content. Markdown works, too. <code>text_xl()</code> and <code>text_l()</code> support context menus.</p><p>See <a href="/wave/docs/api/ui#text">ui.text()</a> <a href="/wave/docs/api/ui#text_l">ui.text_l()</a> <a href="/wave/docs/api/ui#text_m">ui.text_m()</a> <a href="/wave/docs/api/ui#text_s">ui.text_s()</a> <a href="/wave/docs/api/ui#text_xl">ui.text_xl()</a> <a href="/wave/docs/api/ui#text_xs">ui.text_xs()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="label"></a>Label<a aria-hidden="true" tabindex="-1" class="hash-link" href="#label" title="Direct link to heading">#</a></h3><p>Use a label to give a name or title to other components.</p><p>See <a href="/wave/docs/api/ui#label">ui.label()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="link"></a>Link<a aria-hidden="true" tabindex="-1" class="hash-link" href="#link" title="Direct link to heading">#</a></h3><p>Use <code>link()</code> to display a hyperlink.</p><p>See <a href="/wave/docs/api/ui#link">ui.link()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="template"></a>Template<a aria-hidden="true" tabindex="-1" class="hash-link" href="#template" title="Direct link to heading">#</a></h3><p>Use <code>template()</code> to render dynamic content using HTML.</p><p>See <a href="/wave/docs/api/ui#template">ui.template()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="html"></a>HTML<a aria-hidden="true" tabindex="-1" class="hash-link" href="#html" title="Direct link to heading">#</a></h3><p>Use <code>markup()</code> to display raw HTML.</p><p>See <a href="/wave/docs/api/ui#markup">ui.markup()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="inline-frame"></a>Inline frame<a aria-hidden="true" tabindex="-1" class="hash-link" href="#inline-frame" title="Direct link to heading">#</a></h3><p>Use <code>frame()</code> to embed external HTML content using an inline frame.</p><p>See <a href="/wave/docs/api/ui#frame">ui.frame()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="table"></a>Table<a aria-hidden="true" tabindex="-1" class="hash-link" href="#table" title="Direct link to heading">#</a></h3><p>Use a table to display tabular data. A table also functions as an input element, and can report row(s) selection, useful for building <a href="https://en.wikipedia.org/wiki/Master%E2%80%93detail_interface" target="_blank" rel="noopener noreferrer">master-detail</a> views.</p><p>See <a href="/wave/docs/api/ui#table">ui.table()</a></p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="inputs"></a>Inputs<a aria-hidden="true" tabindex="-1" class="hash-link" href="#inputs" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="checkbox"></a>Checkbox<a aria-hidden="true" tabindex="-1" class="hash-link" href="#checkbox" title="Direct link to heading">#</a></h3><p>Use a checkbox to allow switching between two mutually exclusive options (checked/unchecked or on/off).</p><p>See <a href="/wave/docs/api/ui#checkbox">ui.checkbox()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="checklist"></a>Checklist<a aria-hidden="true" tabindex="-1" class="hash-link" href="#checklist" title="Direct link to heading">#</a></h3><p>Use a checklist to display a list of checkboxes.</p><p>See <a href="/wave/docs/api/ui#checklist">ui.checklist()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="choice-group"></a>Choice Group<a aria-hidden="true" tabindex="-1" class="hash-link" href="#choice-group" title="Direct link to heading">#</a></h3><p>Use a choice group (also called <em>radio buttons</em>) to allow switching between more than two mutually exclusive options.</p><p>See <a href="/wave/docs/api/ui#choice_group">ui.choice_group()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="color-picker"></a>Color Picker<a aria-hidden="true" tabindex="-1" class="hash-link" href="#color-picker" title="Direct link to heading">#</a></h3><p>Use a color picker to allow pick colors or swatches.</p><p>See <a href="/wave/docs/api/ui#color_picker">ui.color_picker()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="combo-box"></a>Combo Box<a aria-hidden="true" tabindex="-1" class="hash-link" href="#combo-box" title="Direct link to heading">#</a></h3><p>Use a combo box to allow picking from a list of choices, or typing in custom values.</p><p>See <a href="/wave/docs/api/ui#combobox">ui.combobox()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="date-picker"></a>Date Picker<a aria-hidden="true" tabindex="-1" class="hash-link" href="#date-picker" title="Direct link to heading">#</a></h3><p>Use a date picker to allow picking a date.</p><p>See <a href="/wave/docs/api/ui#date_picker">ui.date_picker()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dropdown"></a>Dropdown<a aria-hidden="true" tabindex="-1" class="hash-link" href="#dropdown" title="Direct link to heading">#</a></h3><p>Use a dropdown to allow picking from a list of choices.</p><p>See <a href="/wave/docs/api/ui#dropdown">ui.dropdown()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="file-upload"></a>File Upload<a aria-hidden="true" tabindex="-1" class="hash-link" href="#file-upload" title="Direct link to heading">#</a></h3><p>Use a file upload component to allow uploading files.</p><p>See <a href="/wave/docs/api/ui#file_upload">ui.file_upload()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="picker"></a>Picker<a aria-hidden="true" tabindex="-1" class="hash-link" href="#picker" title="Direct link to heading">#</a></h3><p>Use a picker component to allow picking multiple tags or labels from a list.</p><p>See <a href="/wave/docs/api/ui#picker">ui.picker()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="range-slider"></a>Range Slider<a aria-hidden="true" tabindex="-1" class="hash-link" href="#range-slider" title="Direct link to heading">#</a></h3><p>Use a range slider to allow selecting a range of values within another range.</p><p>See <a href="/wave/docs/api/ui#range_slider">ui.range_slider()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="slider"></a>Slider<a aria-hidden="true" tabindex="-1" class="hash-link" href="#slider" title="Direct link to heading">#</a></h3><p>Use a slider to allow selecting a value from a range of values.</p><p>See <a href="/wave/docs/api/ui#slider">ui.slider()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="spin-box"></a>Spin Box<a aria-hidden="true" tabindex="-1" class="hash-link" href="#spin-box" title="Direct link to heading">#</a></h3><p>Use a spin box to allow incrementally adjusting a value in small steps.</p><p>See <a href="/wave/docs/api/ui#spinbox">ui.spinbox()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="table-1"></a>Table<a aria-hidden="true" tabindex="-1" class="hash-link" href="#table-1" title="Direct link to heading">#</a></h3><p>Use a table to display tabular data, or allow selecting one or more rows.</p><p>See <a href="/wave/docs/api/ui#table">ui.table()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="textbox"></a>Textbox<a aria-hidden="true" tabindex="-1" class="hash-link" href="#textbox" title="Direct link to heading">#</a></h3><p>Use a textbox to allow typing in text.</p><p>See <a href="/wave/docs/api/ui#textbox">ui.textbox()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="toggle"></a>Toggle<a aria-hidden="true" tabindex="-1" class="hash-link" href="#toggle" title="Direct link to heading">#</a></h3><p>Use a toggle to allow switching between two mutually exclusive options (checked/unchecked or on/off), while producing an immediate result.
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Components</h1></header><div class="markdown"><p>Components are blocks of interactive content (inputs, commands, notifications, graphics) contained in a <a href="/wave/docs/api/ui#form_card">form card</a>.</p><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>Several of the components below allow users to input information or interact with them in some way. To know what the user did, see <a href="/wave/docs/arguments">event arguments</a>.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="content"></a>Content<a aria-hidden="true" tabindex="-1" class="hash-link" href="#content" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="text"></a>Text<a aria-hidden="true" tabindex="-1" class="hash-link" href="#text" title="Direct link to heading">#</a></h3><p>Use <code>text()</code> or one of its variants to display text content. Markdown works, too. <code>text_xl()</code> and <code>text_l()</code> support context menus.</p><p>See <a href="/wave/docs/api/ui#text">ui.text()</a> <a href="/wave/docs/api/ui#text_l">ui.text_l()</a> <a href="/wave/docs/api/ui#text_m">ui.text_m()</a> <a href="/wave/docs/api/ui#text_s">ui.text_s()</a> <a href="/wave/docs/api/ui#text_xl">ui.text_xl()</a> <a href="/wave/docs/api/ui#text_xs">ui.text_xs()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="label"></a>Label<a aria-hidden="true" tabindex="-1" class="hash-link" href="#label" title="Direct link to heading">#</a></h3><p>Use a label to give a name or title to other components.</p><p>See <a href="/wave/docs/api/ui#label">ui.label()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="link"></a>Link<a aria-hidden="true" tabindex="-1" class="hash-link" href="#link" title="Direct link to heading">#</a></h3><p>Use <code>link()</code> to display a hyperlink.</p><p>See <a href="/wave/docs/api/ui#link">ui.link()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="template"></a>Template<a aria-hidden="true" tabindex="-1" class="hash-link" href="#template" title="Direct link to heading">#</a></h3><p>Use <code>template()</code> to render dynamic content using HTML.</p><p>See <a href="/wave/docs/api/ui#template">ui.template()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="html"></a>HTML<a aria-hidden="true" tabindex="-1" class="hash-link" href="#html" title="Direct link to heading">#</a></h3><p>Use <code>markup()</code> to display raw HTML.</p><p>See <a href="/wave/docs/api/ui#markup">ui.markup()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="inline-frame"></a>Inline frame<a aria-hidden="true" tabindex="-1" class="hash-link" href="#inline-frame" title="Direct link to heading">#</a></h3><p>Use <code>frame()</code> to embed external HTML content using an inline frame.</p><p>See <a href="/wave/docs/api/ui#frame">ui.frame()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="table"></a>Table<a aria-hidden="true" tabindex="-1" class="hash-link" href="#table" title="Direct link to heading">#</a></h3><p>Use a table to display tabular data. A table also functions as an input element, and can report row(s) selection, useful for building <a href="https://en.wikipedia.org/wiki/Master%E2%80%93detail_interface" target="_blank" rel="noopener noreferrer">master-detail</a> views.</p><p>See <a href="/wave/docs/api/ui#table">ui.table()</a></p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="inputs"></a>Inputs<a aria-hidden="true" tabindex="-1" class="hash-link" href="#inputs" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="checkbox"></a>Checkbox<a aria-hidden="true" tabindex="-1" class="hash-link" href="#checkbox" title="Direct link to heading">#</a></h3><p>Use a checkbox to allow switching between two mutually exclusive options (checked/unchecked or on/off).</p><p>See <a href="/wave/docs/api/ui#checkbox">ui.checkbox()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="checklist"></a>Checklist<a aria-hidden="true" tabindex="-1" class="hash-link" href="#checklist" title="Direct link to heading">#</a></h3><p>Use a checklist to display a list of checkboxes.</p><p>See <a href="/wave/docs/api/ui#checklist">ui.checklist()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="choice-group"></a>Choice Group<a aria-hidden="true" tabindex="-1" class="hash-link" href="#choice-group" title="Direct link to heading">#</a></h3><p>Use a choice group (also called <em>radio buttons</em>) to allow switching between more than two mutually exclusive options.</p><p>See <a href="/wave/docs/api/ui#choice_group">ui.choice_group()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="color-picker"></a>Color Picker<a aria-hidden="true" tabindex="-1" class="hash-link" href="#color-picker" title="Direct link to heading">#</a></h3><p>Use a color picker to allow pick colors or swatches.</p><p>See <a href="/wave/docs/api/ui#color_picker">ui.color_picker()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="combo-box"></a>Combo Box<a aria-hidden="true" tabindex="-1" class="hash-link" href="#combo-box" title="Direct link to heading">#</a></h3><p>Use a combo box to allow picking from a list of choices, or typing in custom values.</p><p>See <a href="/wave/docs/api/ui#combobox">ui.combobox()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="date-picker"></a>Date Picker<a aria-hidden="true" tabindex="-1" class="hash-link" href="#date-picker" title="Direct link to heading">#</a></h3><p>Use a date picker to allow picking a date.</p><p>See <a href="/wave/docs/api/ui#date_picker">ui.date_picker()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="dropdown"></a>Dropdown<a aria-hidden="true" tabindex="-1" class="hash-link" href="#dropdown" title="Direct link to heading">#</a></h3><p>Use a dropdown to allow picking from a list of choices.</p><p>See <a href="/wave/docs/api/ui#dropdown">ui.dropdown()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="file-upload"></a>File Upload<a aria-hidden="true" tabindex="-1" class="hash-link" href="#file-upload" title="Direct link to heading">#</a></h3><p>Use a file upload component to allow uploading files.</p><p>See <a href="/wave/docs/api/ui#file_upload">ui.file_upload()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="picker"></a>Picker<a aria-hidden="true" tabindex="-1" class="hash-link" href="#picker" title="Direct link to heading">#</a></h3><p>Use a picker component to allow picking multiple tags or labels from a list.</p><p>See <a href="/wave/docs/api/ui#picker">ui.picker()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="range-slider"></a>Range Slider<a aria-hidden="true" tabindex="-1" class="hash-link" href="#range-slider" title="Direct link to heading">#</a></h3><p>Use a range slider to allow selecting a range of values within another range.</p><p>See <a href="/wave/docs/api/ui#range_slider">ui.range_slider()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="slider"></a>Slider<a aria-hidden="true" tabindex="-1" class="hash-link" href="#slider" title="Direct link to heading">#</a></h3><p>Use a slider to allow selecting a value from a range of values.</p><p>See <a href="/wave/docs/api/ui#slider">ui.slider()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="spin-box"></a>Spin Box<a aria-hidden="true" tabindex="-1" class="hash-link" href="#spin-box" title="Direct link to heading">#</a></h3><p>Use a spin box to allow incrementally adjusting a value in small steps.</p><p>See <a href="/wave/docs/api/ui#spinbox">ui.spinbox()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="table-1"></a>Table<a aria-hidden="true" tabindex="-1" class="hash-link" href="#table-1" title="Direct link to heading">#</a></h3><p>Use a table to display tabular data, or allow selecting one or more rows.</p><p>See <a href="/wave/docs/api/ui#table">ui.table()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="textbox"></a>Textbox<a aria-hidden="true" tabindex="-1" class="hash-link" href="#textbox" title="Direct link to heading">#</a></h3><p>Use a textbox to allow typing in text.</p><p>See <a href="/wave/docs/api/ui#textbox">ui.textbox()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="toggle"></a>Toggle<a aria-hidden="true" tabindex="-1" class="hash-link" href="#toggle" title="Direct link to heading">#</a></h3><p>Use a toggle to allow switching between two mutually exclusive options (checked/unchecked or on/off), while producing an immediate result.
 See <a href="/wave/docs/api/ui#toggle">ui.toggle()</a></p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="commands"></a>Commands<a aria-hidden="true" tabindex="-1" class="hash-link" href="#commands" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="command"></a>Command<a aria-hidden="true" tabindex="-1" class="hash-link" href="#command" title="Direct link to heading">#</a></h3><p>Use a command to define menu items for cards and components that support menus and context-menus.</p><p>See <a href="/wave/docs/api/ui#command">ui.command()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="button"></a>Button<a aria-hidden="true" tabindex="-1" class="hash-link" href="#button" title="Direct link to heading">#</a></h3><p>Use <code>button()</code> to display a clickable button.</p><p>See <a href="/wave/docs/api/ui#button">ui.button()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="button-set"></a>Button Set<a aria-hidden="true" tabindex="-1" class="hash-link" href="#button-set" title="Direct link to heading">#</a></h3><p>Use <code>buttons()</code> to display two or more buttons side by side.</p><p>See <a href="/wave/docs/api/ui#buttons">ui.buttons()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="tabs"></a>Tabs<a aria-hidden="true" tabindex="-1" class="hash-link" href="#tabs" title="Direct link to heading">#</a></h3><p>Use <code>tabs()</code> to display a set of tabs.</p><p>See <a href="/wave/docs/api/ui#tabs">ui.tabs()</a></p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="engagement"></a>Engagement<a aria-hidden="true" tabindex="-1" class="hash-link" href="#engagement" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="message-bar"></a>Message Bar<a aria-hidden="true" tabindex="-1" class="hash-link" href="#message-bar" title="Direct link to heading">#</a></h3><p>Use a message bar to display information, warning and error notifications.</p><p>See <a href="/wave/docs/api/ui#message_bar">ui.message_bar()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="progress-bar"></a>Progress Bar<a aria-hidden="true" tabindex="-1" class="hash-link" href="#progress-bar" title="Direct link to heading">#</a></h3><p>Use a progress bar to display progress information for tasks or operations.</p><p>See <a href="/wave/docs/api/ui#progress">ui.progress()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="stepper"></a>Stepper<a aria-hidden="true" tabindex="-1" class="hash-link" href="#stepper" title="Direct link to heading">#</a></h3><p>Use a stepper to display a sequence of steps in a process, and how many have been completed.</p><p>See <a href="/wave/docs/api/ui#stepper">ui.stepper()</a></p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="graphics"></a>Graphics<a aria-hidden="true" tabindex="-1" class="hash-link" href="#graphics" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="visualization"></a>Visualization<a aria-hidden="true" tabindex="-1" class="hash-link" href="#visualization" title="Direct link to heading">#</a></h3><p>Use <code>visualization()</code> to display visualizations defined using Q&#x27;s native <code>plot()</code> API, based on the <a href="https://www.springer.com/gp/book/9780387245447" target="_blank" rel="noopener noreferrer">Grammar of Graphics</a>.</p><p>See <a href="/wave/docs/api/ui#visualization">ui.visualization()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="vega-lite-visualization"></a>Vega-lite Visualization<a aria-hidden="true" tabindex="-1" class="hash-link" href="#vega-lite-visualization" title="Direct link to heading">#</a></h3><p>Use <code>vega_visualization()</code> to display visualization defined using <a href="https://vega.github.io/vega-lite/" target="_blank" rel="noopener noreferrer">Vega-Lite</a>.</p><p>See <a href="/wave/docs/api/ui#vega_visualization">ui.vega_visualization()</a></p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="utilities"></a>Utilities<a aria-hidden="true" tabindex="-1" class="hash-link" href="#utilities" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="expander"></a>Expander<a aria-hidden="true" tabindex="-1" class="hash-link" href="#expander" title="Direct link to heading">#</a></h3><p>Use an expander to show or hider a group of related components.</p><p>See <a href="/wave/docs/api/ui#expander">ui.expander()</a></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="separator"></a>Separator<a aria-hidden="true" tabindex="-1" class="hash-link" href="#separator" title="Direct link to heading">#</a></h3><p>Use a separator to visually separate components in to groups.</p><p>See <a href="/wave/docs/api/ui#separator">ui.separator()</a></p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/components.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/buffers"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Data Buffers</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/arguments"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Event Arguments »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#content" class="table-of-contents__link">Content</a><ul><li><a href="#text" class="table-of-contents__link">Text</a></li><li><a href="#label" class="table-of-contents__link">Label</a></li><li><a href="#link" class="table-of-contents__link">Link</a></li><li><a href="#template" class="table-of-contents__link">Template</a></li><li><a href="#html" class="table-of-contents__link">HTML</a></li><li><a href="#inline-frame" class="table-of-contents__link">Inline frame</a></li><li><a href="#table" class="table-of-contents__link">Table</a></li></ul></li><li><a href="#inputs" class="table-of-contents__link">Inputs</a><ul><li><a href="#checkbox" class="table-of-contents__link">Checkbox</a></li><li><a href="#checklist" class="table-of-contents__link">Checklist</a></li><li><a href="#choice-group" class="table-of-contents__link">Choice Group</a></li><li><a href="#color-picker" class="table-of-contents__link">Color Picker</a></li><li><a href="#combo-box" class="table-of-contents__link">Combo Box</a></li><li><a href="#date-picker" class="table-of-contents__link">Date Picker</a></li><li><a href="#dropdown" class="table-of-contents__link">Dropdown</a></li><li><a href="#file-upload" class="table-of-contents__link">File Upload</a></li><li><a href="#picker" class="table-of-contents__link">Picker</a></li><li><a href="#range-slider" class="table-of-contents__link">Range Slider</a></li><li><a href="#slider" class="table-of-contents__link">Slider</a></li><li><a href="#spin-box" class="table-of-contents__link">Spin Box</a></li><li><a href="#table-1" class="table-of-contents__link">Table</a></li><li><a href="#textbox" class="table-of-contents__link">Textbox</a></li><li><a href="#toggle" class="table-of-contents__link">Toggle</a></li></ul></li><li><a href="#commands" class="table-of-contents__link">Commands</a><ul><li><a href="#command" class="table-of-contents__link">Command</a></li><li><a href="#button" class="table-of-contents__link">Button</a></li><li><a href="#button-set" class="table-of-contents__link">Button Set</a></li><li><a href="#tabs" class="table-of-contents__link">Tabs</a></li></ul></li><li><a href="#engagement" class="table-of-contents__link">Engagement</a><ul><li><a href="#message-bar" class="table-of-contents__link">Message Bar</a></li><li><a href="#progress-bar" class="table-of-contents__link">Progress Bar</a></li><li><a href="#stepper" class="table-of-contents__link">Stepper</a></li></ul></li><li><a href="#graphics" class="table-of-contents__link">Graphics</a><ul><li><a href="#visualization" class="table-of-contents__link">Visualization</a></li><li><a href="#vega-lite-visualization" class="table-of-contents__link">Vega-lite Visualization</a></li></ul></li><li><a href="#utilities" class="table-of-contents__link">Utilities</a><ul><li><a href="#expander" class="table-of-contents__link">Expander</a></li><li><a href="#separator" class="table-of-contents__link">Separator</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/1f7c204c.0cf3b132.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/1f7c204c.d6a6621a.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/configuration/index.html b/docs/docs/configuration/index.html
index 261aea7773..987245c2f2 100644
--- a/docs/docs/configuration/index.html
+++ b/docs/docs/configuration/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Configuration | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Configuration | H2O Wave"><meta data-react-helmet="true" name="description" content="Configuring the server"><meta data-react-helmet="true" property="og:description" content="Configuring the server"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/configuration"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/configuration"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/9ed00105.277f7035.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/9ed00105.ca11321b.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Configuration</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="configuring-the-server"></a>Configuring the server<a aria-hidden="true" tabindex="-1" class="hash-link" href="#configuring-the-server" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="command-line-options"></a>Command line options<a aria-hidden="true" tabindex="-1" class="hash-link" href="#command-line-options" title="Direct link to heading">#</a></h3><p>Execute <code>wave -help</code> to see all available command line options:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ ./wave -help</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Usage of ./wave:</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -access-key-id string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        default access key ID (default &quot;access_key_id&quot;)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -access-key-secret string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        default access key secret (default &quot;access_key_secret&quot;)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -compact string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        compact AOF log</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -data-dir string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        directory to store site data (default &quot;./data&quot;)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -debug</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        enable debug mode (profiling, inspection, etc.)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -init string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        initialize site content from AOF log</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -listen string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        listen on this address (default &quot;:55555&quot;)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -oidc-client-id string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        OIDC client ID</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -oidc-client-secret string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        OIDC client secret</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -oidc-end-session-url string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        OIDC end session URL</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -oidc-provider-url string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        OIDC provider URL</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -oidc-redirect-url string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        OIDC redirect URL</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -tls-cert-file string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        path to certificate file (TLS only)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -tls-key-file string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        path to private key file (TLS only)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -version</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        print version and exit</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -web-dir string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        directory to serve web assets from (default &quot;./www&quot;)</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="configuring-your-app"></a>Configuring your app<a aria-hidden="true" tabindex="-1" class="hash-link" href="#configuring-your-app" title="Direct link to heading">#</a></h2><p>Your Wave application has a websocket server under the hood, called an <em>app server</em>. 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 <a href="http://127.0.0.1:55555/" target="_blank" rel="noopener noreferrer">http://127.0.0.1:55555/</a> (localhost, port 55555). For production deployments, you&#x27;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.</p><p>You can use the following environment variables to configure your app&#x27;s server&#x27;s behavior:</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="h2o_wave_internal_address"></a>H2O_WAVE_INTERNAL_ADDRESS<a aria-hidden="true" tabindex="-1" class="hash-link" href="#h2o_wave_internal_address" title="Direct link to heading">#</a></h3><p>The local host/port on which the app server should listen. Defaults to <code>ws://127.0.0.1:0</code> (automatically picks an available port). For example, if you want your app to listen on a specific port, execute your app as follows (replace <code>66666</code> with a port number of your choice):</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ H2O_WAVE_INTERNAL_ADDRESS=ws://127.0.0.1:66666 ./venv/bin/python my_app.py</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="h2o_wave_external_address"></a>H2O_WAVE_EXTERNAL_ADDRESS<a aria-hidden="true" tabindex="-1" class="hash-link" href="#h2o_wave_external_address" title="Direct link to heading">#</a></h3><p>The public host/port of the app server. Defaults to <code>ws://127.0.0.1:0</code>. Set this variable if you are running your Wave server and your app on different machine or containers.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="h2o_wave_address"></a>H2O_WAVE_ADDRESS<a aria-hidden="true" tabindex="-1" class="hash-link" href="#h2o_wave_address" title="Direct link to heading">#</a></h3><p>The public host/port of the Wave server. Set this variable if you are running the Wave server on a remote machine or container.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="h2o_wave_access_key_id"></a>H2O_WAVE_ACCESS_KEY_ID<a aria-hidden="true" tabindex="-1" class="hash-link" href="#h2o_wave_access_key_id" title="Direct link to heading">#</a></h3><p>The API access key ID to use for communicating with the Wave server.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="h2o_wave_access_key_secret"></a>H2O_WAVE_ACCESS_KEY_SECRET<a aria-hidden="true" tabindex="-1" class="hash-link" href="#h2o_wave_access_key_secret" title="Direct link to heading">#</a></h3><p>The API access key secret to use for communicating with the Wave server.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/configuration.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/browser-testing"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Browser Testing</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/backup"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Backup and Recovery »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#configuring-the-server" class="table-of-contents__link">Configuring the server</a><ul><li><a href="#command-line-options" class="table-of-contents__link">Command line options</a></li></ul></li><li><a href="#configuring-your-app" class="table-of-contents__link">Configuring your app</a><ul><li><a href="#h2o_wave_internal_address" class="table-of-contents__link">H2O_WAVE_INTERNAL_ADDRESS</a></li><li><a href="#h2o_wave_external_address" class="table-of-contents__link">H2O_WAVE_EXTERNAL_ADDRESS</a></li><li><a href="#h2o_wave_address" class="table-of-contents__link">H2O_WAVE_ADDRESS</a></li><li><a href="#h2o_wave_access_key_id" class="table-of-contents__link">H2O_WAVE_ACCESS_KEY_ID</a></li><li><a href="#h2o_wave_access_key_secret" class="table-of-contents__link">H2O_WAVE_ACCESS_KEY_SECRET</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/9ed00105.277f7035.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Configuration</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="configuring-the-server"></a>Configuring the server<a aria-hidden="true" tabindex="-1" class="hash-link" href="#configuring-the-server" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="command-line-options"></a>Command line options<a aria-hidden="true" tabindex="-1" class="hash-link" href="#command-line-options" title="Direct link to heading">#</a></h3><p>Execute <code>waved -help</code> to see all available command line options:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ ./waved -help</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Usage of ./waved:</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -access-key-id string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        default access key ID (default &quot;access_key_id&quot;)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -access-key-secret string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        default access key secret (default &quot;access_key_secret&quot;)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -compact string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        compact AOF log</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -data-dir string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        directory to store site data (default &quot;./data&quot;)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -debug</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        enable debug mode (profiling, inspection, etc.)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -init string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        initialize site content from AOF log</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -listen string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        listen on this address (default &quot;:55555&quot;)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -oidc-client-id string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        OIDC client ID</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -oidc-client-secret string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        OIDC client secret</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -oidc-end-session-url string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        OIDC end session URL</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -oidc-provider-url string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        OIDC provider URL</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -oidc-redirect-url string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        OIDC redirect URL</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -tls-cert-file string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        path to certificate file (TLS only)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -tls-key-file string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        path to private key file (TLS only)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -version</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        print version and exit</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  -web-dir string</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        directory to serve web assets from (default &quot;./www&quot;)</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="configuring-your-app"></a>Configuring your app<a aria-hidden="true" tabindex="-1" class="hash-link" href="#configuring-your-app" title="Direct link to heading">#</a></h2><p>Your Wave application is an ASGI server. When you run your app during development, the app server runs at <a href="http://127.0.0.1:8000/" target="_blank" rel="noopener noreferrer">http://127.0.0.1:8000/</a> by default (localhost, port 8000), and assumes that your Wave server is running at <a href="http://127.0.0.1:55555/" target="_blank" rel="noopener noreferrer">http://127.0.0.1:55555/</a> (localhost, port 55555). The <code>wave run</code> command automatically picks another available port if <code>8000</code> is not available. </p><p>The Wave server and apps communicate with each other using RPC over persistent HTTP connections.</p><p>For production deployments, you&#x27;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.</p><p>You can use the following environment variables to configure your app&#x27;s server&#x27;s behavior:</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="h2o_app_address"></a>H2O_APP_ADDRESS<a aria-hidden="true" tabindex="-1" class="hash-link" href="#h2o_app_address" title="Direct link to heading">#</a></h3><p>The public host/port of the app server. Defaults to <code>http://127.0.0.1:8000</code>. Set this variable if you are running your Wave server and your app on different machines or containers.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="h2o_wave_address"></a>H2O_WAVE_ADDRESS<a aria-hidden="true" tabindex="-1" class="hash-link" href="#h2o_wave_address" title="Direct link to heading">#</a></h3><p>The public host/port of the Wave server. Defaults to <code>http://127.0.0.1:55555</code>. Set this variable if you are running the Wave server on a remote machine or container.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="h2o_wave_access_key_id"></a>H2O_WAVE_ACCESS_KEY_ID<a aria-hidden="true" tabindex="-1" class="hash-link" href="#h2o_wave_access_key_id" title="Direct link to heading">#</a></h3><p>The API access key ID to use for communicating with the Wave server.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="h2o_wave_access_key_secret"></a>H2O_WAVE_ACCESS_KEY_SECRET<a aria-hidden="true" tabindex="-1" class="hash-link" href="#h2o_wave_access_key_secret" title="Direct link to heading">#</a></h3><p>The API access key secret to use for communicating with the Wave server.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="h2o_wave_internal_address"></a>H2O_WAVE_INTERNAL_ADDRESS<a aria-hidden="true" tabindex="-1" class="hash-link" href="#h2o_wave_internal_address" title="Direct link to heading">#</a></h3><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>Deprecated</h5></div><div class="admonition-content"><p>This environment variable will be removed in v1.0.</p></div></div><p>The local host/port on which the app server should listen. Defaults to <code>http://127.0.0.1:8000</code>. For example, if you want your app to listen on a specific port, execute your app as follows (replace <code>66666</code> with a port number of your choice):</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ H2O_WAVE_INTERNAL_ADDRESS=ws://127.0.0.1:66666 ./venv/bin/python my_app.py</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="h2o_wave_external_address"></a>H2O_WAVE_EXTERNAL_ADDRESS<a aria-hidden="true" tabindex="-1" class="hash-link" href="#h2o_wave_external_address" title="Direct link to heading">#</a></h3><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>Deprecated</h5></div><div class="admonition-content"><p>Specify <code>H2O_APP_ADDRESS</code> instead.</p></div></div><p>The public host/port of the app server. Defaults to <code>http://127.0.0.1:8000</code>. Set this variable if you are running your Wave server and your app on different machines or containers.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/configuration.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/browser-testing"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Browser Testing</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/deployment"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Deployment »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#configuring-the-server" class="table-of-contents__link">Configuring the server</a><ul><li><a href="#command-line-options" class="table-of-contents__link">Command line options</a></li></ul></li><li><a href="#configuring-your-app" class="table-of-contents__link">Configuring your app</a><ul><li><a href="#h2o_app_address" class="table-of-contents__link">H2O_APP_ADDRESS</a></li><li><a href="#h2o_wave_address" class="table-of-contents__link">H2O_WAVE_ADDRESS</a></li><li><a href="#h2o_wave_access_key_id" class="table-of-contents__link">H2O_WAVE_ACCESS_KEY_ID</a></li><li><a href="#h2o_wave_access_key_secret" class="table-of-contents__link">H2O_WAVE_ACCESS_KEY_SECRET</a></li><li><a href="#h2o_wave_internal_address" class="table-of-contents__link">H2O_WAVE_INTERNAL_ADDRESS</a></li><li><a href="#h2o_wave_external_address" class="table-of-contents__link">H2O_WAVE_EXTERNAL_ADDRESS</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/9ed00105.ca11321b.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/contributing/index.html b/docs/docs/contributing/index.html
index 86f773e2a1..b68c079111 100644
--- a/docs/docs/contributing/index.html
+++ b/docs/docs/contributing/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Contributing | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Contributing | H2O Wave"><meta data-react-helmet="true" name="description" content="We appreciate all contributions. If you are planning to contribute back bug-fixes, please do so without any further discussion."><meta data-react-helmet="true" property="og:description" content="We appreciate all contributions. If you are planning to contribute back bug-fixes, please do so without any further discussion."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/contributing"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/contributing"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/4d54d076.f075db77.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/4d54d076.6d426b8b.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Contributing</h1></header><div class="markdown"><p>We appreciate all contributions. If you are planning to contribute back bug-fixes, please do so without any further discussion.</p><p>If you plan to contribute new features, please first <a href="https://github.com/h2oai/wave/issues/new/choose" target="_blank" rel="noopener noreferrer">open an issue</a> 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.</p><p>(Based on the <a href="https://pytorch.org/docs/stable/community/contribution_guide.html" target="_blank" rel="noopener noreferrer">PyTorch Contribution Guide</a>.)</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="about-open-source-development"></a>About open source development<a aria-hidden="true" tabindex="-1" class="hash-link" href="#about-open-source-development" title="Direct link to heading">#</a></h2><p>If this is your first time contributing to an open source project, some aspects of the development process may seem unusual to you.</p><ul><li><p><strong>There is no way to &quot;claim&quot; issues.</strong> People often want to &quot;claim&quot; 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.</p></li><li><p><strong>There is a high bar for new functionality that is added.</strong> Unlike in a corporate environment, where the person who wrote code implicitly &quot;owns&quot; 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.</p></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="proposing-new-features"></a>Proposing new features<a aria-hidden="true" tabindex="-1" class="hash-link" href="#proposing-new-features" title="Direct link to heading">#</a></h2><p>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.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="reporting-issues"></a>Reporting issues<a aria-hidden="true" tabindex="-1" class="hash-link" href="#reporting-issues" title="Direct link to heading">#</a></h2><p>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.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="implementing-features"></a>Implementing features<a aria-hidden="true" tabindex="-1" class="hash-link" href="#implementing-features" title="Direct link to heading">#</a></h2><p>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.</p><p>Issues that are labeled first-new-issue, low, or medium priority provide the best entrance point are great places to start.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="improving-documentation-and-tutorials"></a>Improving documentation and tutorials<a aria-hidden="true" tabindex="-1" class="hash-link" href="#improving-documentation-and-tutorials" title="Direct link to heading">#</a></h2><p>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.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="submitting-pull-requests"></a>Submitting pull requests<a aria-hidden="true" tabindex="-1" class="hash-link" href="#submitting-pull-requests" title="Direct link to heading">#</a></h2><p>You can view a list of all open issues <a href="https://github.com/h2oai/wave/issues" target="_blank" rel="noopener noreferrer">here</a>. 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.</p><p>For more challenging issues, the team will provide feedback and direction for how to best solve the issue.</p><p>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.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="improving-code-readability"></a>Improving code readability<a aria-hidden="true" tabindex="-1" class="hash-link" href="#improving-code-readability" title="Direct link to heading">#</a></h2><p>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.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="adding-test-cases"></a>Adding test cases<a aria-hidden="true" tabindex="-1" class="hash-link" href="#adding-test-cases" title="Direct link to heading">#</a></h2><p>Additional test coverage is appreciated.  Help us make the codebase more robust.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="security-vulnerabilities"></a>Security vulnerabilities<a aria-hidden="true" tabindex="-1" class="hash-link" href="#security-vulnerabilities" title="Direct link to heading">#</a></h2><p>If you discover a security vulnerability within H2O Wave, please send an email to Prithvi Prabhu at <a href="mailto:prithvi@h2o.ai." target="_blank" rel="noopener noreferrer">prithvi@h2o.ai.</a> All security vulnerabilities will be promptly addressed.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="code-of-conduct"></a>Code of Conduct<a aria-hidden="true" tabindex="-1" class="hash-link" href="#code-of-conduct" title="Direct link to heading">#</a></h2><p>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 &quot;collaborative space&quot;, which is defined as community communications channels (such as mailing lists, submitted patches, commit comments, etc.).</p><ul><li>Participants will be tolerant of opposing views.</li><li>Participants must ensure that their language and actions are free of personal attacks and disparaging personal remarks.</li><li>When interpreting the words and actions of others, participants should always assume good intentions.</li><li>Behaviour which can be reasonably considered harassment will not be tolerated.</li></ul><p>(Based on the <a href="https://www.ruby-lang.org/en/conduct/" target="_blank" rel="noopener noreferrer">Ruby Code of Conduct</a>.)</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/contributing.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/migrating-0"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Migrating from pre-alpha</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/getting-started"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Introduction »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#about-open-source-development" class="table-of-contents__link">About open source development</a></li><li><a href="#proposing-new-features" class="table-of-contents__link">Proposing new features</a></li><li><a href="#reporting-issues" class="table-of-contents__link">Reporting issues</a></li><li><a href="#implementing-features" class="table-of-contents__link">Implementing features</a></li><li><a href="#improving-documentation-and-tutorials" class="table-of-contents__link">Improving documentation and tutorials</a></li><li><a href="#submitting-pull-requests" class="table-of-contents__link">Submitting pull requests</a></li><li><a href="#improving-code-readability" class="table-of-contents__link">Improving code readability</a></li><li><a href="#adding-test-cases" class="table-of-contents__link">Adding test cases</a></li><li><a href="#security-vulnerabilities" class="table-of-contents__link">Security vulnerabilities</a></li><li><a href="#code-of-conduct" class="table-of-contents__link">Code of Conduct</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/4d54d076.f075db77.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Contributing</h1></header><div class="markdown"><p>We appreciate all contributions. If you are planning to contribute back bug-fixes, please do so without any further discussion.</p><p>If you plan to contribute new features, please first <a href="https://github.com/h2oai/wave/issues/new/choose" target="_blank" rel="noopener noreferrer">open an issue</a> 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.</p><p>(Based on the <a href="https://pytorch.org/docs/stable/community/contribution_guide.html" target="_blank" rel="noopener noreferrer">PyTorch Contribution Guide</a>.)</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="about-open-source-development"></a>About open source development<a aria-hidden="true" tabindex="-1" class="hash-link" href="#about-open-source-development" title="Direct link to heading">#</a></h2><p>If this is your first time contributing to an open source project, some aspects of the development process may seem unusual to you.</p><ul><li><p><strong>There is no way to &quot;claim&quot; issues.</strong> People often want to &quot;claim&quot; 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.</p></li><li><p><strong>There is a high bar for new functionality that is added.</strong> Unlike in a corporate environment, where the person who wrote code implicitly &quot;owns&quot; 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.</p></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="proposing-new-features"></a>Proposing new features<a aria-hidden="true" tabindex="-1" class="hash-link" href="#proposing-new-features" title="Direct link to heading">#</a></h2><p>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.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="reporting-issues"></a>Reporting issues<a aria-hidden="true" tabindex="-1" class="hash-link" href="#reporting-issues" title="Direct link to heading">#</a></h2><p>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.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="implementing-features"></a>Implementing features<a aria-hidden="true" tabindex="-1" class="hash-link" href="#implementing-features" title="Direct link to heading">#</a></h2><p>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.</p><p>Issues that are labeled first-new-issue, low, or medium priority provide the best entrance point are great places to start.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="improving-documentation-and-tutorials"></a>Improving documentation and tutorials<a aria-hidden="true" tabindex="-1" class="hash-link" href="#improving-documentation-and-tutorials" title="Direct link to heading">#</a></h2><p>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.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="submitting-pull-requests"></a>Submitting pull requests<a aria-hidden="true" tabindex="-1" class="hash-link" href="#submitting-pull-requests" title="Direct link to heading">#</a></h2><p>You can view a list of all open issues <a href="https://github.com/h2oai/wave/issues" target="_blank" rel="noopener noreferrer">here</a>. 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.</p><p>For more challenging issues, the team will provide feedback and direction for how to best solve the issue.</p><p>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.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="improving-code-readability"></a>Improving code readability<a aria-hidden="true" tabindex="-1" class="hash-link" href="#improving-code-readability" title="Direct link to heading">#</a></h2><p>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.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="adding-test-cases"></a>Adding test cases<a aria-hidden="true" tabindex="-1" class="hash-link" href="#adding-test-cases" title="Direct link to heading">#</a></h2><p>Additional test coverage is appreciated.  Help us make the codebase more robust.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="security-vulnerabilities"></a>Security vulnerabilities<a aria-hidden="true" tabindex="-1" class="hash-link" href="#security-vulnerabilities" title="Direct link to heading">#</a></h2><p>If you discover a security vulnerability within H2O Wave, please send an email to Prithvi Prabhu at <a href="mailto:prithvi@h2o.ai." target="_blank" rel="noopener noreferrer">prithvi@h2o.ai.</a> All security vulnerabilities will be promptly addressed.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="code-of-conduct"></a>Code of Conduct<a aria-hidden="true" tabindex="-1" class="hash-link" href="#code-of-conduct" title="Direct link to heading">#</a></h2><p>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 &quot;collaborative space&quot;, which is defined as community communications channels (such as mailing lists, submitted patches, commit comments, etc.).</p><ul><li>Participants will be tolerant of opposing views.</li><li>Participants must ensure that their language and actions are free of personal attacks and disparaging personal remarks.</li><li>When interpreting the words and actions of others, participants should always assume good intentions.</li><li>Behaviour which can be reasonably considered harassment will not be tolerated.</li></ul><p>(Based on the <a href="https://www.ruby-lang.org/en/conduct/" target="_blank" rel="noopener noreferrer">Ruby Code of Conduct</a>.)</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/contributing.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/migrating-0"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Migrating from pre-alpha</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/getting-started"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Introduction »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#about-open-source-development" class="table-of-contents__link">About open source development</a></li><li><a href="#proposing-new-features" class="table-of-contents__link">Proposing new features</a></li><li><a href="#reporting-issues" class="table-of-contents__link">Reporting issues</a></li><li><a href="#implementing-features" class="table-of-contents__link">Implementing features</a></li><li><a href="#improving-documentation-and-tutorials" class="table-of-contents__link">Improving documentation and tutorials</a></li><li><a href="#submitting-pull-requests" class="table-of-contents__link">Submitting pull requests</a></li><li><a href="#improving-code-readability" class="table-of-contents__link">Improving code readability</a></li><li><a href="#adding-test-cases" class="table-of-contents__link">Adding test cases</a></li><li><a href="#security-vulnerabilities" class="table-of-contents__link">Security vulnerabilities</a></li><li><a href="#code-of-conduct" class="table-of-contents__link">Code of Conduct</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/4d54d076.6d426b8b.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/deployment/index.html b/docs/docs/deployment/index.html
new file mode 100644
index 0000000000..3be25af1e1
--- /dev/null
+++ b/docs/docs/deployment/index.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="generator" content="Docusaurus v2.0.0-alpha.65">
+<title data-react-helmet="true">Deployment | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Deployment | H2O Wave"><meta data-react-helmet="true" name="description" content="Deploying Wave scripts"><meta data-react-helmet="true" property="og:description" content="Deploying Wave scripts"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/deployment"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/deployment"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/a3713279.d69af334.js" as="script">
+</head>
+<body>
+<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Deployment</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="deploying-wave-scripts"></a>Deploying Wave scripts<a aria-hidden="true" tabindex="-1" class="hash-link" href="#deploying-wave-scripts" title="Direct link to heading">#</a></h2><p>Wave scripts are regular Python scripts. Deploy them as you would any Python script.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="deploying-wave-apps"></a>Deploying Wave apps<a aria-hidden="true" tabindex="-1" class="hash-link" href="#deploying-wave-apps" title="Direct link to heading">#</a></h2><p>Wave apps are <a href="https://asgi.readthedocs.io/en/latest/" target="_blank" rel="noopener noreferrer">ASGI</a>-compatible, based on <a href="https://www.uvicorn.org" target="_blank" rel="noopener noreferrer">Uvicorn</a> / <a href="https://www.starlette.io/" target="_blank" rel="noopener noreferrer">Starlette</a>, a <a href="https://www.techempower.com/benchmarks/#section=data-r17&amp;hw=ph&amp;test=fortune&amp;l=zijzen-1" target="_blank" rel="noopener noreferrer">high-performance</a> Python server.</p><p>You can run Wave apps behind any ASGI server, like <a href="https://www.uvicorn.org" target="_blank" rel="noopener noreferrer">uvicorn</a>, <a href="https://gunicorn.org/" target="_blank" rel="noopener noreferrer">gunicorn</a>, <a href="https://github.com/django/daphne/" target="_blank" rel="noopener noreferrer">daphne</a>, <a href="https://pgjones.gitlab.io/hypercorn/" target="_blank" rel="noopener noreferrer">hypercorn</a>, etc.</p><p>To run your app using an ASGI server, append <code>:main</code> to the <code>app</code> argument. For example, if you were normally executing your app <code>foo.py</code> using <code>wave run foo</code>, and want to run your app using Uvicorn, use <code>uvicorn foo:main</code>.</p><p>These commands are equivalent:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">venv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> $ wave run --no-reload foo</span></div></div></div></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">venv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> $ uvicorn foo:main</span></div></div></div></div></div><p>For more information, see <a href="https://www.uvicorn.org/deployment/" target="_blank" rel="noopener noreferrer">uvicorn.org/deployment</a> and <a href="https://www.starlette.io/#performance" target="_blank" rel="noopener noreferrer">starlette.io/#performance</a>.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/deployment.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/configuration"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Configuration</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/backup"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Backup and Recovery »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#deploying-wave-scripts" class="table-of-contents__link">Deploying Wave scripts</a></li><li><a href="#deploying-wave-apps" class="table-of-contents__link">Deploying Wave apps</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/a3713279.d69af334.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/docs/development/index.html b/docs/docs/development/index.html
index cd44cd4b20..695f41ab5a 100644
--- a/docs/docs/development/index.html
+++ b/docs/docs/development/index.html
@@ -4,33 +4,30 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
-<title data-react-helmet="true">Development | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Development | H2O Wave"><meta data-react-helmet="true" name="description" content="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."><meta data-react-helmet="true" property="og:description" content="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."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/development"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/development"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/8f030830.3fafca9c.js" as="script">
+<title data-react-helmet="true">Development | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Development | H2O Wave"><meta data-react-helmet="true" name="description" content="Wave scripts are plain Python programs. Wave apps are ASGI programs. You can develop, debug and test them from the command-line, from the Python REPL, or from your favorite text editor."><meta data-react-helmet="true" property="og:description" content="Wave scripts are plain Python programs. Wave apps are ASGI programs. You can develop, debug and test them from the command-line, from the Python REPL, or from your favorite text editor."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/development"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/development"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/8f030830.b746ca66.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Development</h1></header><div class="markdown"><p>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.</p><p>Both <a href="https://www.jetbrains.com/pycharm/download" target="_blank" rel="noopener noreferrer">PyCharm Community Edition</a> and <a href="https://code.visualstudio.com/" target="_blank" rel="noopener noreferrer">Visual Studio Code</a> are excellent for Python programming.</p><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p>At the time of writing, PyCharm&#x27;s type-checking and error-detection is superior to Visual Studio Code&#x27;s Python plugin.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="getting-started"></a>Getting started<a aria-hidden="true" tabindex="-1" class="hash-link" href="#getting-started" title="Direct link to heading">#</a></h2><p>The simplest way to get started in either PyCharm or Visual Studio Code is the same: </p><ol><li>Create a working directory.</li><li>Set up a Python <a href="https://docs.python.org/3/tutorial/venv.html" target="_blank" rel="noopener noreferrer">virtual environment</a>.</li><li>Install the <code>h2o-wave</code> package.</li><li>Open the directory in your IDE.</li></ol><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token function" style="color:rgb(130, 170, 255)">mkdir</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">python3 -m venv venv</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./venv/bin/pip </span><span class="token function" style="color:rgb(130, 170, 255)">install</span><span class="token plain"> h2o-wave</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="using-pycharm"></a>Using PyCharm<a aria-hidden="true" tabindex="-1" class="hash-link" href="#using-pycharm" title="Direct link to heading">#</a></h2><ol><li>Launch PyCharm</li><li>Click &quot;File&quot; -&gt; &quot;Open...&quot;, then choose <code>$HOME/wave-apps</code>.</li><li>Right-click on <code>wave-apps</code> in the &quot;Project&quot; tree, then click &quot;New&quot; -&gt; &quot;Python File&quot;.</li><li>Enter a file name, say, <code>hello_world.py</code>.</li><li>Write some code (see sample below).</li><li>Right-click anywhere inside the file and choose &quot;Run hello_world&quot; or &quot;Debug hello_world&quot;.</li></ol><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="using-visual-studio-code"></a>Using Visual Studio Code<a aria-hidden="true" tabindex="-1" class="hash-link" href="#using-visual-studio-code" title="Direct link to heading">#</a></h2><ol><li>Launch Visual Studio Code</li><li>Click &quot;File&quot; -&gt; &quot;Open...&quot;, then choose <code>$HOME/wave-apps</code>.</li><li>Click &quot;File&quot; -&gt; &quot;New File&quot;; save the file as, say, <code>hello_world.py</code>.</li><li>You should now get a prompt asking if you want to install extensions for Python. Click &quot;Install&quot;.</li><li>Write some code (see sample below).</li><li>Hit <code>Ctrl+F5</code> to run, or <code>F5</code> to debug.</li></ol><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="a-hello-world-sample"></a>A hello world sample<a aria-hidden="true" tabindex="-1" class="hash-link" href="#a-hello-world-sample" title="Direct link to heading">#</a></h2><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/hello_world.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Grab a reference to the page at route &#x27;/hello&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/hello&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Add a markdown card to the page.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;quote&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Hello World&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&quot;The Internet? Is that thing still around?&quot; - *Homer Simpson*&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Finally, save the page.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/development.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/logging"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Logging</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/browser-testing"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Browser Testing »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#getting-started" class="table-of-contents__link">Getting started</a></li><li><a href="#using-pycharm" class="table-of-contents__link">Using PyCharm</a></li><li><a href="#using-visual-studio-code" class="table-of-contents__link">Using Visual Studio Code</a></li><li><a href="#a-hello-world-sample" class="table-of-contents__link">A hello world sample</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/8f030830.3fafca9c.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Development</h1></header><div class="markdown"><p>Wave scripts are plain Python programs. Wave apps are ASGI programs. You can develop, debug and test them from the command-line, from the Python REPL, or from your favorite text editor.</p><p>Both <a href="https://www.jetbrains.com/pycharm/download" target="_blank" rel="noopener noreferrer">PyCharm Community Edition</a> and <a href="https://code.visualstudio.com/" target="_blank" rel="noopener noreferrer">Visual Studio Code</a> are excellent for Python programming.</p><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p>At the time of writing, PyCharm&#x27;s type-checking and error-detection is superior to Visual Studio Code&#x27;s Python plugin.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="getting-started"></a>Getting started<a aria-hidden="true" tabindex="-1" class="hash-link" href="#getting-started" title="Direct link to heading">#</a></h2><p>The simplest way to get started in either PyCharm or Visual Studio Code is the same: </p><ol><li>Create a working directory.</li><li>Set up a Python <a href="https://docs.python.org/3/tutorial/venv.html" target="_blank" rel="noopener noreferrer">virtual environment</a>.</li><li>Install the <code>h2o-wave</code> package.</li><li>Open the directory in your IDE.</li></ol><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token function" style="color:rgb(130, 170, 255)">mkdir</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">python3 -m venv venv</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./venv/bin/pip </span><span class="token function" style="color:rgb(130, 170, 255)">install</span><span class="token plain"> h2o-wave</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="using-pycharm"></a>Using PyCharm<a aria-hidden="true" tabindex="-1" class="hash-link" href="#using-pycharm" title="Direct link to heading">#</a></h3><ol><li>Launch PyCharm</li><li>Click &quot;File&quot; -&gt; &quot;Open...&quot;, then choose <code>$HOME/wave-apps</code>.</li><li>Right-click on <code>wave-apps</code> in the &quot;Project&quot; tree, then click &quot;New&quot; -&gt; &quot;Python File&quot;.</li><li>Enter a file name, say, <code>foo.py</code>.</li><li>Write some code (see sample below).</li><li>Right-click anywhere inside the file and choose &quot;Run foo&quot; or &quot;Debug foo&quot;.</li></ol><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="using-visual-studio-code"></a>Using Visual Studio Code<a aria-hidden="true" tabindex="-1" class="hash-link" href="#using-visual-studio-code" title="Direct link to heading">#</a></h3><ol><li>Launch Visual Studio Code</li><li>Click &quot;File&quot; -&gt; &quot;Open...&quot;, then choose <code>$HOME/wave-apps</code>.</li><li>Click &quot;File&quot; -&gt; &quot;New File&quot;; save the file as, say, <code>foo.py</code>.</li><li>You should now get a prompt asking if you want to install extensions for Python. Click &quot;Install&quot;.</li><li>Write some code (see sample below).</li><li>Hit <code>Ctrl+F5</code> to run, or <code>F5</code> to debug.</li></ol><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="debugging-apps"></a>Debugging Apps<a aria-hidden="true" tabindex="-1" class="hash-link" href="#debugging-apps" title="Direct link to heading">#</a></h2><p>To debug Wave apps, set your IDE or editor&#x27;s configuration to execute the command <code>python -m h2o_wave run --no-reload foo</code> instead of <code>python foo.py</code>.</p><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p>The command <code>wave run --no-reload foo</code> is equivalent to <code>python -m h2o_wave run --no-reload foo</code>.</p></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="using-pycharm-1"></a>Using PyCharm<a aria-hidden="true" tabindex="-1" class="hash-link" href="#using-pycharm-1" title="Direct link to heading">#</a></h3><ul><li>Open the &quot;Run/Debug Configurations&quot; dialog for your script.</li><li>Under &quot;Configuration&quot;, change the &quot;Script path&quot; dropdown to &quot;Module name&quot;.</li><li>Set &quot;Module name&quot; to <code>h2o_wave</code>.</li><li>Set &quot;Parameters&quot; to <code>start foo</code> (assuming your app&#x27;s source code is in <code>foo.py</code>)</li></ul></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/development.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/cli"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Command Line Interface</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/browser-testing"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Browser Testing »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#getting-started" class="table-of-contents__link">Getting started</a><ul><li><a href="#using-pycharm" class="table-of-contents__link">Using PyCharm</a></li><li><a href="#using-visual-studio-code" class="table-of-contents__link">Using Visual Studio Code</a></li></ul></li><li><a href="#debugging-apps" class="table-of-contents__link">Debugging Apps</a><ul><li><a href="#using-pycharm-1" class="table-of-contents__link">Using PyCharm</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/8f030830.b746ca66.js"></script>
 </body>
 </html>
\ 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 c13d7efb15..96481789e1 100644
--- a/docs/docs/enterprise/basic-concepts/index.html
+++ b/docs/docs/enterprise/basic-concepts/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Basic Concepts | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Basic Concepts | H2O Wave"><meta data-react-helmet="true" name="description" content="H2O AI Cloud platform recognizes three actors:"><meta data-react-helmet="true" property="og:description" content="H2O AI Cloud platform recognizes three actors:"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/enterprise/basic-concepts"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/enterprise/basic-concepts"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/6ee3bac7.4e8e6b97.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/6ee3bac7.80ea67bd.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Basic Concepts</h1></header><div class="markdown"><p>H2O AI Cloud platform recognizes three actors:</p><ul><li><strong>App Developer</strong>: creates and publishes apps</li><li><strong>App User</strong>: browses and runs apps</li><li><strong>Admin</strong>: manages the platform</li></ul><p>over two resource types:</p><ul><li><strong>App</strong>: runnable Wave app package</li><li><strong>App instance</strong>: running instane of an app</li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="app"></a>App<a aria-hidden="true" tabindex="-1" class="hash-link" href="#app" title="Direct link to heading">#</a></h2><p>App is a runnable Wave app package with metadata, such as (grouped into categories):</p><ul><li>Identity<ul><li>a unique name and version identifier</li></ul></li><li>Display/search<ul><li>a title and description</li><li>icon and screenshots</li><li>search category and keywords</li></ul></li><li>Authorization<ul><li>owner (e.g., the person who imported it into H2O AI Cloud)</li><li>visibility (<code>PRIVATE</code>, <code>ALL_USERS</code>)</li></ul></li><li>Runtime<ul><li>RAM/disk requirements</li><li>other runtime settings (e.g., pointers to dependencies and secrets to be injected at startup time)</li></ul></li></ul><p>Users can start/run multiple instances of each app (subject to authorization, see below).</p><p>Apps are mostly <strong>immutable</strong>, meaning once uploaded, they cannot be changed (except for visibility).
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Basic Concepts</h1></header><div class="markdown"><p>H2O AI Cloud platform recognizes three actors:</p><ul><li><strong>App Developer</strong>: creates and publishes apps</li><li><strong>App User</strong>: browses and runs apps</li><li><strong>Admin</strong>: manages the platform</li></ul><p>over two resource types:</p><ul><li><strong>App</strong>: runnable Wave app package</li><li><strong>App instance</strong>: running instane of an app</li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="app"></a>App<a aria-hidden="true" tabindex="-1" class="hash-link" href="#app" title="Direct link to heading">#</a></h2><p>App is a runnable Wave app package with metadata, such as (grouped into categories):</p><ul><li>Identity<ul><li>a unique name and version identifier</li></ul></li><li>Display/search<ul><li>a title and description</li><li>icon and screenshots</li><li>search category and keywords</li></ul></li><li>Authorization<ul><li>owner (e.g., the person who imported it into H2O AI Cloud)</li><li>visibility (<code>PRIVATE</code>, <code>ALL_USERS</code>)</li></ul></li><li>Runtime<ul><li>RAM/disk requirements</li><li>other runtime settings (e.g., pointers to dependencies and secrets to be injected at startup time)</li></ul></li></ul><p>Users can start/run multiple instances of each app (subject to authorization, see below).</p><p>Apps are mostly <strong>immutable</strong>, meaning once uploaded, they cannot be changed (except for visibility).
 To &quot;update&quot; an app, one has to upload a new version.</p><div class="admonition admonition-note alert alert--secondary"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>note</h5></div><div class="admonition-content"><p>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.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="app-instance"></a>App Instance<a aria-hidden="true" tabindex="-1" class="hash-link" href="#app-instance" title="Direct link to heading">#</a></h2><p>App instance is a running instance of an app wit the following metadata:</p><ul><li>pointer to the corresponding app</li><li>owner (the person who started it)</li><li>visibility (<code>PRIVATE</code>, <code>ALL_USERS</code>, <code>PUBLIC</code>)</li></ul><p>H2O AI Cloud fully manages the app instance lifecycle on behalf of its users.</p><p>Instances can be stateless or stateful (depending on the app configuration)
@@ -28,15 +28,15 @@
 these are typically created via <code>h2o bundle deploy</code></li><li><code>ALL_USERS</code> apps are visible to/runnable by all signed-in users; they are also visible on the &quot;Catalog&quot; page;
 these are typically created via <code>h2o bundle import</code></li><li>App owner can manage (view, update, delete) her apps via <code>h2o app ...</code> or via the &quot;My Apps&quot; page.</li></ul><p>See <a href="/wave/docs/enterprise/developer-guide#cli">Developer Guide</a> for details on managing apps.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="instance-access-authorization"></a>Instance Access Authorization<a aria-hidden="true" tabindex="-1" class="hash-link" href="#instance-access-authorization" title="Direct link to heading">#</a></h3><p>Access to app instances is governed by the following rules:</p><ul><li><code>PRIVATE</code> instances are only visible to the owner and the owner of the corresponding app (the app owner has only read access)</li><li><code>ALL_USERS</code> instances are visible to all signed-in users</li><li><code>PUBLIC</code> instances are visible to anyone on the Internet</li><li>Instance owner can manage (view, update, terminate) her instances via <code>h2o instance</code> or via the &quot;My instances&quot; page.</li></ul><p>Note that app/instance visibility can be modified by the owner, e.g., using <code>h2o (app|instance) update &lt;id&gt; -v &lt;visibility&gt;</code>
 or via the &quot;My Apps&quot;/&quot;My Instances&quot; page.</p><p>Admin access is exempt from all the authorization rules (i.e., admins have full access to all apps/instances).</p><p>See <a href="/wave/docs/enterprise/developer-guide#cli">Developer Guide</a> for details on manaigng app instance.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/enterprise/basic-concepts.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/enterprise/"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Introduction</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/enterprise/developer-guide"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Developer Guide »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#app" class="table-of-contents__link">App</a></li><li><a href="#app-instance" class="table-of-contents__link">App Instance</a></li><li><a href="#authorization" class="table-of-contents__link">Authorization</a><ul><li><a href="#app-access-authorization" class="table-of-contents__link">App Access Authorization</a></li><li><a href="#instance-access-authorization" class="table-of-contents__link">Instance Access Authorization</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/6ee3bac7.4e8e6b97.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/6ee3bac7.80ea67bd.js"></script>
 </body>
 </html>
\ 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 aea471582c..a2855be1c2 100644
--- a/docs/docs/enterprise/developer-guide/index.html
+++ b/docs/docs/enterprise/developer-guide/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Developer Guide | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Developer Guide | H2O Wave"><meta data-react-helmet="true" name="description" content="App Bundle Structure"><meta data-react-helmet="true" property="og:description" content="App Bundle Structure"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/enterprise/developer-guide"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/enterprise/developer-guide"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/1375ade1.83f02eb6.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/1375ade1.05444f9b.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Developer Guide</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="app-bundle-structure"></a>App Bundle Structure<a aria-hidden="true" tabindex="-1" class="hash-link" href="#app-bundle-structure" title="Direct link to heading">#</a></h2><p>Each app has to be bundled as a zip archive (commonly used with suffix <code>.wave</code>)
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Developer Guide</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="app-bundle-structure"></a>App Bundle Structure<a aria-hidden="true" tabindex="-1" class="hash-link" href="#app-bundle-structure" title="Direct link to heading">#</a></h2><p>Each app has to be bundled as a zip archive (commonly used with suffix <code>.wave</code>)
 consisting of:</p><ul><li><code>app.toml</code> - the platform configuration file</li><li><code>static/</code> - static asset directory, including the app icon (a png file starting with <code>icon</code>)
 and screenshots (files starting with <code>screenshot</code>)</li><li><code>requirements.txt</code> - pip-managed dependencies of the app (can contain references to <code>.whl</code> files
 included in the <code>.wave</code> using paths relative to the archive root)</li><li>app source code</li></ul><p>You can quickly create a <code>.wave</code> archive by running <code>h2o bundle</code> in your app git repository
@@ -41,7 +41,7 @@
 <code>MemoryLimit</code> is a hard limit on the maximum amount of memory an instance can use before it is OOM-killed;
 <code>MemoryReservation</code> is how much memory is required to schedule an instance of the app.</li></ul></li><li><code>Env</code> - request for a literal value/secret to be injected into an instance at startup-time as an Env variable;
 repeated; see <a href="#utilizing-secrets">Utilizing Secrets</a>.<ul><li><code>Name</code> - name of the Env variable to the injected into the Python process;
-names prefixed with <code>Q8S</code> are disallowed.</li><li><code>Secret</code> - name of the shared secret to use; each secret can contain multiple key-value pairs;
+names prefixed with <code>H2O_CLOUD</code> are disallowed.</li><li><code>Secret</code> - name of the shared secret to use; each secret can contain multiple key-value pairs;
 cannot be used together with <code>Value</code>.</li><li><code>SecretKey</code> - name of the key within the secret to use; cannot be used together with <code>Value</code>.</li><li><code>Value</code> - the literal value of the Env variable; cannot be used together with <code>Secret</code>/<code>SecretKey</code>.</li></ul></li><li><code>File</code> - request for a literal value/secret to be injected into an instance at startup-time as a file;
 repeated; see <a href="#utilizing-secrets">Utilizing Secrets</a>.<ul><li><code>Path</code> - path to inject the file to; relative path means relative to the directory with the app code
 as determined by the platform; path dir cannot be <code>/</code> or <code>.</code> (only subdirs are allowed);
@@ -51,19 +51,24 @@
 references to <code>.whl</code> files included in the <code>.wave</code> using paths relative to the archive root)</p><p>Developers can further customize the runtime environment by <a href="#utilizing-secrets">Utilizing Secrets</a>.</p><div class="admonition admonition-note alert alert--secondary"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>note</h5></div><div class="admonition-content"><p>At this moment, the platform does not provide any provisions for developers to customize the OS,
 native OS dependencies, Qd version, etc.</p><p>We are actively working on improving this.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="cli"></a>CLI<a aria-hidden="true" tabindex="-1" class="hash-link" href="#cli" title="Direct link to heading">#</a></h2><p>As a developer, you will need the <code>h2o</code> binary to interact with the platform.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="configuring-the-cli"></a>Configuring the CLI<a aria-hidden="true" tabindex="-1" class="hash-link" href="#configuring-the-cli" title="Direct link to heading">#</a></h3><p>First you need to configure the CLI by running <code>h2o config setup</code> so that it knows how to talk
 to a particular platform deployment.</p><p>Be aware, currently the CLI launches a browser to complete the user authentication, and due to this
-we currently unable to support remote use of the CLI over SSH without provisions for X forwarding.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="listing-existing-apps"></a>Listing existing apps<a aria-hidden="true" tabindex="-1" class="hash-link" href="#listing-existing-apps" title="Direct link to heading">#</a></h3><p>The <code>h2o app list -a</code> command will list all apps available for launch.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-sh codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ h2o app list -a</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">ID                                    TITLE                        OWNER            CREATED UPDATED CATEGORY      VISIBILITY</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">abc543210-0000-0000-0000-1234567890ab Peak 0.1.1                   user1@h2o.ai     18d     18d     Healthcare    ALL_USERS</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">bcd543210-1111-1111-1111-0123456789ab Tour 0.0.15-20200922162859   user2@h2o.ai     20d     20d     Other         ALL_USERS</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">...</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="launching-existing-apps"></a>Launching existing apps<a aria-hidden="true" tabindex="-1" class="hash-link" href="#launching-existing-apps" title="Direct link to heading">#</a></h3><p>To launch an app, the <code>h2o app run &lt;appId&gt;</code> command can be used to launch a new instance of that app.
+we currently unable to support remote use of the CLI over SSH without provisions for X forwarding.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="listing-existing-apps"></a>Listing existing apps<a aria-hidden="true" tabindex="-1" class="hash-link" href="#listing-existing-apps" title="Direct link to heading">#</a></h3><p>The <code>h2o app list -a</code> command will list all apps available for launch.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-sh codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ h2o app list -a</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">ID                                    TITLE                        OWNER            CREATED CATEGORY      VISIBILITY    TAGS</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">abc543210-0000-0000-0000-1234567890ab Peak 0.1.1                   user1@h2o.ai     18d     Healthcare    ALL_USERS     Beta</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">bcd543210-1111-1111-1111-0123456789ab Tour 0.0.15-20200922162859   user2@h2o.ai     20d     Other         ALL_USERS</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">...</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="launching-existing-apps"></a>Launching existing apps<a aria-hidden="true" tabindex="-1" class="hash-link" href="#launching-existing-apps" title="Direct link to heading">#</a></h3><p>To launch an app, the <code>h2o app run &lt;appId&gt;</code> command can be used to launch a new instance of that app.
 The <code>-v</code> flag can be used with <code>app run</code> to specify app instance visibility settings.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-sh codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ h2o app run bcd543210-1111-1111-1111-0123456789ab</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">ID  22222222-3333-4444-5555-666666666666</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">URL https://22222222-3333-4444-5555-666666666666.wave.h2o.ai</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="publishing-an-app-for-others-to-see-and-launch"></a>Publishing an app for others to see and launch<a aria-hidden="true" tabindex="-1" class="hash-link" href="#publishing-an-app-for-others-to-see-and-launch" title="Direct link to heading">#</a></h3><p>Just run <code>h2o bundle import</code> in your app git repository. This will automatically package your
 current directory into a <code>.wave</code> package and import it into the platform.</p><p>If you set the visibility to <code>ALL_USERS</code> (via the <code>-v</code> flag), others will be able use <code>h2o app run</code>
 or the UI to launch the app.</p><p>Note: the name-version combination from your <code>app.toml</code> has to be unique and the platform will reject
 the request if such combination already exists. Therefore, you need to update the version in <code>app.toml</code>
-before each run.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-sh codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ h2o bundle import -v ALL_USERS</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">ID              bcd543210-1111-1111-1111-0123456789ab</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Title           Peak</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Version         0.1.2</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Category        Healthcare</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Created At      2020-10-13 06:28:03.050226 +0000 UTC</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Updated At      2020-10-13 06:28:03.050226 +0000 UTC</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Owner           user1@h2o.ai</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Visibility      ALL_USERS</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Bundle Location ai.h2o.wave.peak.0.1.2.wave</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Icon Location   ai.h2o.wave.peak.0.1.2/icon.jpg</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Description     Forecast of COVID-19 spread</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="running-an-app-under-development"></a>Running an app under development<a aria-hidden="true" tabindex="-1" class="hash-link" href="#running-an-app-under-development" title="Direct link to heading">#</a></h3><p>Just run <code>h2o bundle deploy</code> in your app git repository. This will automatically package your
+before each run.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-sh codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ h2o bundle import -v ALL_USERS</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">ID              bcd543210-1111-1111-1111-0123456789ab</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Title           Peak</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Version         0.1.2</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Category        Healthcare</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Created At      2020-10-13 06:28:03.050226 +0000 UTC</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Updated At      2020-10-13 06:28:03.050226 +0000 UTC</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Owner           user1@h2o.ai</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Visibility      ALL_USERS</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Description     Forecast of COVID-19 spread</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Tags</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="running-an-app-under-development"></a>Running an app under development<a aria-hidden="true" tabindex="-1" class="hash-link" href="#running-an-app-under-development" title="Direct link to heading">#</a></h3><p>Just run <code>h2o bundle deploy</code> in your app git repository. This will automatically package your
 current directory into a <code>.wave</code> package, import it into the platform, and run it.</p><p>In the output you will be able to find a URL where you can reach the instance, or visit
 the &quot;My Instances&quot; in the UI.</p><p>Note: the CLI will auto-generate the version so that you can keep executing this without worrying about
-version conflicts, just don&#x27;t forget to clean up old instances/versions.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-sh codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ h2o bundle deploy</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">ID              bcd543210-1111-1111-1111-0123456789ab</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Title           Peak</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Version         0.1.2-20201013062803</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Category        Healthcare</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Created At      2020-10-13 06:28:03.050226 +0000 UTC</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Updated At      2020-10-13 06:28:03.050226 +0000 UTC</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Owner           user1@h2o.ai</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Visibility      PRIVATE</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Bundle Location ai.h2o.wave.peak.0.1.2-20201013062803.wave</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Icon Location   ai.h2o.wave.peak.0.1.2-20201013062803/icon.jpg</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Description     Forecast of COVID-19 spread</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">ID  22222222-3333-4444-5555-666666666666</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">URL https://22222222-3333-4444-5555-666666666666.wave.h2o.ai</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="getting-the-logs-of-a-running-app-instance"></a>Getting the logs of a running app instance<a aria-hidden="true" tabindex="-1" class="hash-link" href="#getting-the-logs-of-a-running-app-instance" title="Direct link to heading">#</a></h3><p>Just run <code>h2o instance logs</code>, use the flag <code>-f</code> (<code>--follow</code>) to tail the log.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-sh codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ h2o instance logs c22222222-3333-4444-5555-666666666666</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">...</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 #</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # ┌───────────────────┐</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # │   ┬ ┬┌─┐┬  ┬┌─┐   │</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # │   │││├─┤└┐┌┘├┤    │</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # │   └┴┘┴ ┴ └┘ └─┘   │</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # └───────────────────┘</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 #</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # {&quot;address&quot;:&quot;:55555&quot;,&quot;t&quot;:&quot;listen&quot;,&quot;webroot&quot;:&quot;/wave/www&quot;}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # {&quot;host&quot;:&quot;ws://127.0.0.1:55556&quot;,&quot;route&quot;:&quot;/&quot;,&quot;t&quot;:&quot;relay&quot;}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">...</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="running-the-app-in-cloud-like-environment-locally"></a>Running the app in cloud-like environment locally<a aria-hidden="true" tabindex="-1" class="hash-link" href="#running-the-app-in-cloud-like-environment-locally" title="Direct link to heading">#</a></h3><p>Just run <code>h2o exec</code>. This will bundle the app in a temporary <code>.wave</code> and launch it locally
+version conflicts, just don&#x27;t forget to clean up old instances/versions.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-sh codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ h2o bundle deploy</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">ID              bcd543210-1111-1111-1111-0123456789ab</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Title           Peak</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Version         0.1.2-20201013062803</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Category        Healthcare</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Created At      2020-10-13 06:28:03.050226 +0000 UTC</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Updated At      2020-10-13 06:28:03.050226 +0000 UTC</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Owner           user1@h2o.ai</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Visibility      PRIVATE</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Description     Forecast of COVID-19 spread</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">Tags</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">ID  22222222-3333-4444-5555-666666666666</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">URL https://22222222-3333-4444-5555-666666666666.wave.h2o.ai</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="getting-the-logs-of-a-running-app-instance"></a>Getting the logs of a running app instance<a aria-hidden="true" tabindex="-1" class="hash-link" href="#getting-the-logs-of-a-running-app-instance" title="Direct link to heading">#</a></h3><p>Just run <code>h2o instance logs</code>, use the flag <code>-f</code> (<code>--follow</code>) to tail the log.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-sh codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ h2o instance logs c22222222-3333-4444-5555-666666666666</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">...</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 #</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # ┌─────────────────────────┐</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # │  ┌    ┌ ┌──┐ ┌  ┌ ┌──┐  │ H2O Wave</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # │  │ ┌──┘ │──│ │  │ └┐    │ (version) (build)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # │  └─┘    ┘  ┘ └──┘  └─┘  │ © 2020 H2O.ai, Inc.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # └─────────────────────────┘</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 #</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # {&quot;address&quot;:&quot;:55555&quot;,&quot;t&quot;:&quot;listen&quot;,&quot;webroot&quot;:&quot;/wave/www&quot;}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # {&quot;host&quot;:&quot;ws://127.0.0.1:55556&quot;,&quot;route&quot;:&quot;/&quot;,&quot;t&quot;:&quot;relay&quot;}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">...</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="running-the-app-in-cloud-like-environment-locally"></a>Running the app in cloud-like environment locally<a aria-hidden="true" tabindex="-1" class="hash-link" href="#running-the-app-in-cloud-like-environment-locally" title="Direct link to heading">#</a></h3><p>Just run <code>h2o exec</code>. This will bundle the app in a temporary <code>.wave</code> and launch it locally
 using our platform docker image.</p><p>Note that this requires that you have docker installed and that you have access to the docker image.</p><p>Then navigate to <code>http://localhost:55555/&lt;your main route&gt;</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-sh codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ h2o exec</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">{&quot;level&quot;:&quot;info&quot;,&quot;log_level&quot;:&quot;debug&quot;,&quot;url&quot;:&quot;file:///wave_bundle/q-peak.0.1.2.wave&quot;,&quot;app_root&quot;:&quot;/app&quot;,&quot;venv_root&quot;:&quot;/resources&quot;,&quot;server_path&quot;:&quot;/wave/wave&quot;,&quot;py_module&quot;:&quot;peak&quot;,&quot;tmp&quot;:&quot;/tmp&quot;,&quot;startup_server&quot;:true,&quot;version&quot;:&quot;latest-20200929&quot;,&quot;time&quot;:&quot;2020-10-13T06:42:21Z&quot;,&quot;message&quot;:&quot;configuration&quot;}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">{&quot;level&quot;:&quot;info&quot;,&quot;port&quot;:&quot;:55555&quot;,&quot;time&quot;:&quot;2020-10-13T06:42:21Z&quot;,&quot;message&quot;:&quot;starting launcher server&quot;}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">{&quot;level&quot;:&quot;info&quot;,&quot;executable&quot;:&quot;/wave/wave&quot;,&quot;time&quot;:&quot;2020-10-13T06:42:21Z&quot;,&quot;message&quot;:&quot;wave executable found&quot;}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">...</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="updating-app-visibility"></a>Updating App Visibility<a aria-hidden="true" tabindex="-1" class="hash-link" href="#updating-app-visibility" title="Direct link to heading">#</a></h3><p>The <code>h2o app update &lt;appId&gt; -v &lt;visbility&gt;</code> command can be used to modify an existing app&#x27;s visibility.</p><p>Authors who publish a new version of an app may want to de-list the old version.  It is not possible
 to remove an app if there are instances running, as the data may still need to be available.
 The preferred method to de-list previous versions is to modify the visibility setting to <code>PRIVATE</code>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="updating-instance-visibility"></a>Updating Instance Visibility<a aria-hidden="true" tabindex="-1" class="hash-link" href="#updating-instance-visibility" title="Direct link to heading">#</a></h3><p>The <code>h2o instance update &lt;instanceId&gt; -v &lt;visbility&gt;</code> command, much like the <code>app</code> version,
-can be used to modify an existing running instance&#x27;s visibility setting.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="how-to"></a>How-To<a aria-hidden="true" tabindex="-1" class="hash-link" href="#how-to" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="updating-app-to-a-newer-version"></a>Updating App To a Newer Version<a aria-hidden="true" tabindex="-1" class="hash-link" href="#updating-app-to-a-newer-version" title="Direct link to heading">#</a></h3><p>The &quot;Catalog&quot; page shows apps with visibility <code>ALL_USERS</code>, so rolling out a new app version is done by:</p><ol><li><a href="#publishing-an-app-for-others-to-see-and-launch">importing a new version</a> of the app as <code>PRIVATE</code></li><li>testing the new version</li><li><a href="#updating-app-visibility">changing the visibility</a> of the new version to <code>ALL USERS</code></li><li>(optional) <a href="#updating-app-visibility">changing the visibility</a> of the old version to <code>PRIVATE</code></li></ol><p>This is based on the <a href="/wave/docs/enterprise/basic-concepts#app">Basic Concepts</a>:</p><blockquote><p>Apps are mostly <strong>immutable</strong>, meaning once uploaded, they cannot be changed (except for visibility).
+can be used to modify an existing running instance&#x27;s visibility setting.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="managing-app-tags"></a>Managing App Tags<a aria-hidden="true" tabindex="-1" class="hash-link" href="#managing-app-tags" title="Direct link to heading">#</a></h3><p>Tags are means of visually annotating apps in the platform (similar to
+<a href="https://docs.github.com/en/free-pro-team@latest/github/managing-your-work-on-github/about-labels" target="_blank" rel="noopener noreferrer">GitHub issue labels</a>).</p><p>The <code>h2o tag [assign, get, list, remove, update]</code> commands let users see and, when authorized,
+manage available app tags.
+App tag configuration includes of name/title, RGB color, description, and ACLs.
+Tags can only be assigned/removed/updated by user having a role (as determined by the auth provider)
+present in the tag&#x27;s <code>Admin Roles</code> list (empty means any user).</p><p>Currently, tags can only be created and deleted by platform admins.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="how-to"></a>How-To<a aria-hidden="true" tabindex="-1" class="hash-link" href="#how-to" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="updating-app-to-a-newer-version"></a>Updating App To a Newer Version<a aria-hidden="true" tabindex="-1" class="hash-link" href="#updating-app-to-a-newer-version" title="Direct link to heading">#</a></h3><p>The &quot;Catalog&quot; page shows apps with visibility <code>ALL_USERS</code>, so rolling out a new app version is done by:</p><ol><li><a href="#publishing-an-app-for-others-to-see-and-launch">importing a new version</a> of the app as <code>PRIVATE</code></li><li>testing the new version</li><li><a href="#updating-app-visibility">changing the visibility</a> of the new version to <code>ALL USERS</code></li><li>(optional) <a href="#updating-app-visibility">changing the visibility</a> of the old version to <code>PRIVATE</code></li></ol><p>This is based on the <a href="/wave/docs/enterprise/basic-concepts#app">Basic Concepts</a>:</p><blockquote><p>Apps are mostly <strong>immutable</strong>, meaning once uploaded, they cannot be changed (except for visibility).
 To &quot;update&quot; an app, one has to upload a new version.</p></blockquote><p>and:</p><blockquote><p>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.</p></blockquote><p>An important corollary is that <strong>instances of the old app version are not affected by the update</strong>
@@ -74,16 +79,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.</p><p>We are actively working on improving this.</p></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="app-route"></a>App Route<a aria-hidden="true" tabindex="-1" class="hash-link" href="#app-route" title="Direct link to heading">#</a></h3><p>While it is not a strict requirement, since the platform deploys each app with its own Wave server,
-we advise that apps use <code>/</code> as their main route:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-python codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> __name__ </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;__main__&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main_page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/enterprise/developer-guide.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/enterprise/basic-concepts"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Basic Concepts</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Gallery »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#app-bundle-structure" class="table-of-contents__link">App Bundle Structure</a><ul><li><a href="#apptoml" class="table-of-contents__link">app.toml</a></li></ul></li><li><a href="#runtime-environment" class="table-of-contents__link">Runtime Environment</a></li><li><a href="#cli" class="table-of-contents__link">CLI</a><ul><li><a href="#configuring-the-cli" class="table-of-contents__link">Configuring the CLI</a></li><li><a href="#listing-existing-apps" class="table-of-contents__link">Listing existing apps</a></li><li><a href="#launching-existing-apps" class="table-of-contents__link">Launching existing apps</a></li><li><a href="#publishing-an-app-for-others-to-see-and-launch" class="table-of-contents__link">Publishing an app for others to see and launch</a></li><li><a href="#running-an-app-under-development" class="table-of-contents__link">Running an app under development</a></li><li><a href="#getting-the-logs-of-a-running-app-instance" class="table-of-contents__link">Getting the logs of a running app instance</a></li><li><a href="#running-the-app-in-cloud-like-environment-locally" class="table-of-contents__link">Running the app in cloud-like environment locally</a></li><li><a href="#updating-app-visibility" class="table-of-contents__link">Updating App Visibility</a></li><li><a href="#updating-instance-visibility" class="table-of-contents__link">Updating Instance Visibility</a></li></ul></li><li><a href="#how-to" class="table-of-contents__link">How-To</a><ul><li><a href="#updating-app-to-a-newer-version" class="table-of-contents__link">Updating App To a Newer Version</a></li><li><a href="#utilizing-secrets" class="table-of-contents__link">Utilizing Secrets</a></li><li><a href="#app-route" class="table-of-contents__link">App Route</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/1375ade1.83f02eb6.js"></script>
+we advise that apps use <code>/</code> as their main route:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-python codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token decorator annotation punctuation" style="color:rgb(199, 146, 234)">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">pass</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/enterprise/developer-guide.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/enterprise/basic-concepts"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Basic Concepts</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Gallery »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#app-bundle-structure" class="table-of-contents__link">App Bundle Structure</a><ul><li><a href="#apptoml" class="table-of-contents__link">app.toml</a></li></ul></li><li><a href="#runtime-environment" class="table-of-contents__link">Runtime Environment</a></li><li><a href="#cli" class="table-of-contents__link">CLI</a><ul><li><a href="#configuring-the-cli" class="table-of-contents__link">Configuring the CLI</a></li><li><a href="#listing-existing-apps" class="table-of-contents__link">Listing existing apps</a></li><li><a href="#launching-existing-apps" class="table-of-contents__link">Launching existing apps</a></li><li><a href="#publishing-an-app-for-others-to-see-and-launch" class="table-of-contents__link">Publishing an app for others to see and launch</a></li><li><a href="#running-an-app-under-development" class="table-of-contents__link">Running an app under development</a></li><li><a href="#getting-the-logs-of-a-running-app-instance" class="table-of-contents__link">Getting the logs of a running app instance</a></li><li><a href="#running-the-app-in-cloud-like-environment-locally" class="table-of-contents__link">Running the app in cloud-like environment locally</a></li><li><a href="#updating-app-visibility" class="table-of-contents__link">Updating App Visibility</a></li><li><a href="#updating-instance-visibility" class="table-of-contents__link">Updating Instance Visibility</a></li><li><a href="#managing-app-tags" class="table-of-contents__link">Managing App Tags</a></li></ul></li><li><a href="#how-to" class="table-of-contents__link">How-To</a><ul><li><a href="#updating-app-to-a-newer-version" class="table-of-contents__link">Updating App To a Newer Version</a></li><li><a href="#utilizing-secrets" class="table-of-contents__link">Utilizing Secrets</a></li><li><a href="#app-route" class="table-of-contents__link">App Route</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/1375ade1.05444f9b.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/enterprise/index.html b/docs/docs/enterprise/index.html
index 0b928e1bca..efb244dd67 100644
--- a/docs/docs/enterprise/index.html
+++ b/docs/docs/enterprise/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Introduction | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Introduction | H2O Wave"><meta data-react-helmet="true" name="description" content="H2O AI Cloud is the best way to operationalize AI/ML applications built with H2O Wave."><meta data-react-helmet="true" property="og:description" content="H2O AI Cloud is the best way to operationalize AI/ML applications built with H2O Wave."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/enterprise/"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/enterprise/"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/ca1ac85d.ee5b488b.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/ca1ac85d.45e0ea7b.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Introduction</h1></header><div class="markdown"><p>H2O AI Cloud is the best way to operationalize AI/ML applications built with H2O Wave.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="rationale"></a>Rationale<a aria-hidden="true" tabindex="-1" class="hash-link" href="#rationale" title="Direct link to heading">#</a></h2><p>The end goal of data science projects is to produce analytical software applications to facilitate decision-support and automated decision making.</p><p>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.</p><p>Developing and deploying such applications presents some unique problems:</p><ul><li><strong>Infrastructure.</strong> 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.</li><li><strong>Talent.</strong> 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.</li><li><strong>Time to market.</strong> 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.</li></ul><p>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.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="what-is-h2o-ai-cloud"></a>What is H2O AI Cloud?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#what-is-h2o-ai-cloud" title="Direct link to heading">#</a></h2><p>H2O’s AI Cloud is a turnkey platform that streamlines this entire process: one platform and one API.</p><ul><li><strong>Turnkey Infrastructure.</strong> 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.</li><li><strong>Empowers Python programmers.</strong> 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.</li><li><strong>Faster time to market.</strong> 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.</li></ul></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/enterprise/index.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/backup"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Backup and Recovery</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/enterprise/basic-concepts"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Basic Concepts »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#rationale" class="table-of-contents__link">Rationale</a></li><li><a href="#what-is-h2o-ai-cloud" class="table-of-contents__link">What is H2O AI Cloud?</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/ca1ac85d.ee5b488b.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Introduction</h1></header><div class="markdown"><p>H2O AI Cloud is the best way to operationalize AI/ML applications built with H2O Wave.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="rationale"></a>Rationale<a aria-hidden="true" tabindex="-1" class="hash-link" href="#rationale" title="Direct link to heading">#</a></h2><p>The end goal of data science projects is to produce analytical software applications to facilitate decision-support and automated decision making.</p><p>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.</p><p>Developing and deploying such applications presents some unique problems:</p><ul><li><strong>Infrastructure.</strong> 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.</li><li><strong>Talent.</strong> 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.</li><li><strong>Time to market.</strong> 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.</li></ul><p>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.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="what-is-h2o-ai-cloud"></a>What is H2O AI Cloud?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#what-is-h2o-ai-cloud" title="Direct link to heading">#</a></h2><p>H2O’s AI Cloud is a turnkey platform that streamlines this entire process: one platform and one API.</p><ul><li><strong>Turnkey Infrastructure.</strong> 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.</li><li><strong>Empowers Python programmers.</strong> 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.</li><li><strong>Faster time to market.</strong> 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.</li></ul></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/enterprise/index.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/backup"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Backup and Recovery</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/enterprise/basic-concepts"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Basic Concepts »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#rationale" class="table-of-contents__link">Rationale</a></li><li><a href="#what-is-h2o-ai-cloud" class="table-of-contents__link">What is H2O AI Cloud?</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/ca1ac85d.45e0ea7b.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/background-executor/index.html b/docs/docs/examples/background-executor/index.html
new file mode 100644
index 0000000000..50e94cca69
--- /dev/null
+++ b/docs/docs/examples/background-executor/index.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="generator" content="Docusaurus v2.0.0-alpha.65">
+<title data-react-helmet="true">Background Tasks / Executor | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Background Tasks / Executor | H2O Wave"><meta data-react-helmet="true" name="description" content="Use q.exec() to execute background functions using a thread-pool or process-pool."><meta data-react-helmet="true" property="og:description" content="Use q.exec() to execute background functions using a thread-pool or process-pool."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/background-executor"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/background-executor"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/2e8e6962.0ed74d46.js" as="script">
+</head>
+<body>
+<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Background Tasks / Executor</h1></header><div class="markdown"><p>Use q.exec() to execute background functions using a thread-pool or process-pool.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> concurrent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">futures</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">blocking_function</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">secs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">secs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Blocks!</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;Done waiting for </span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">secs</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> seconds!&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token decorator annotation punctuation" style="color:rgb(199, 146, 234)">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">start</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 -1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Running...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        seconds </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">randint</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">6</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># DON&#x27;T DO THIS!</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># This will make your app unresponsive for some time:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># message = blocking_function(seconds)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Do this instead:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">with</span><span class="token plain"> concurrent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">futures</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">ThreadPoolExecutor</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> pool</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            message </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token keyword" style="font-style:italic">exec</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">pool</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> blocking_function</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> seconds</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># You can also pass a ProcessPoolExecutor, like this:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># with concurrent.futures.ProcessPoolExecutor() as pool:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">#    message = await q.exec(pool, blocking_function, seconds)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 -1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">message_bar</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;info&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> message</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">start </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 -1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;start&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Start&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/background-executor.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/background"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Background Tasks</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/site-async"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Site / Async »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/2e8e6962.0ed74d46.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/docs/examples/background/index.html b/docs/docs/examples/background/index.html
new file mode 100644
index 0000000000..b6adeda702
--- /dev/null
+++ b/docs/docs/examples/background/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="generator" content="Docusaurus v2.0.0-alpha.65">
+<title data-react-helmet="true">Background Tasks | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Background Tasks | H2O Wave"><meta data-react-helmet="true" name="description" content="Use q.run() to execute functions in the background, in-process."><meta data-react-helmet="true" property="og:description" content="Use q.run() to execute functions in the background, in-process."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/background"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/background"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/3da9dc01.f77c7e94.js" as="script">
+</head>
+<body>
+<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Background Tasks</h1></header><div class="markdown"><p>Use q.run() to execute functions in the background, in-process.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">blocking_function</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">secs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">secs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Blocks!</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;Done waiting for </span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">secs</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> seconds!&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token decorator annotation punctuation" style="color:rgb(199, 146, 234)">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">start</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 -1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Running...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        seconds </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">randint</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">6</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># DON&#x27;T DO THIS!</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># This will make your app unresponsive for some time:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># message = blocking_function(seconds)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Do this instead:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        message </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">run</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">blocking_function</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> seconds</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 -1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">message_bar</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;info&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> message</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">start </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 -1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;start&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Start&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/background.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/counter-unicast"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Mode / Unicast</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/background-executor"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Background Tasks / Executor »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/3da9dc01.f77c7e94.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/docs/examples/breadcrumbs/index.html b/docs/docs/examples/breadcrumbs/index.html
index 68547627c2..9d59f5afdb 100644
--- a/docs/docs/examples/breadcrumbs/index.html
+++ b/docs/docs/examples/breadcrumbs/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Breadcrumbs | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Breadcrumbs | H2O Wave"><meta data-react-helmet="true" name="description" content="Breadcrumbs should be used as a navigational aid in your app or site."><meta data-react-helmet="true" property="og:description" content="Breadcrumbs should be used as a navigational aid in your app or site."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/breadcrumbs"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/breadcrumbs"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/c07c3c71.c8e15b94.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/c07c3c71.61abccad.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Breadcrumbs</h1></header><div class="markdown"><p>Breadcrumbs should be used as a navigational aid in your app or site.
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Breadcrumbs</h1></header><div class="markdown"><p>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.
@@ -27,15 +27,15 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;breadcrumbs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">breadcrumbs_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 -1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">breadcrumb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Menu 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">breadcrumb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Menu 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">breadcrumb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Menu 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/breadcrumbs.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/tab-delete"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Tabs / Navigation</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/header"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Header »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/c07c3c71.c8e15b94.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/c07c3c71.61abccad.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/button/index.html b/docs/docs/examples/button/index.html
index a576cd085f..6e44ac6946 100644
--- a/docs/docs/examples/button/index.html
+++ b/docs/docs/examples/button/index.html
@@ -5,33 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Button | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Button | H2O Wave"><meta data-react-helmet="true" name="description" content="Use buttons to enable a user to commit a change or complete steps in a task."><meta data-react-helmet="true" property="og:description" content="Use buttons to enable a user to commit a change or complete steps in a task."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/button"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/button"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/879fc8a6.fbf02d84.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/879fc8a6.e5d1f893.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Button</h1></header><div class="markdown"><p>Use buttons to enable a user to commit a change or complete steps in a task.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Button</h1></header><div class="markdown"><p>Use buttons to enable a user to commit a change or complete steps in a task.</p><div class="cover" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJoAAACrCAYAAACe2YUfAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDEyOjUyOjAwIFBNIFBEVDkKT7IAABsSSURBVHic7Z1rUFTn/cc/u7CwwC7XhUVguctFUDTeMF5yUZOqMa2p01zqtJlOLm3TzNg2TabTaaeTmNZ2zIsmmU7SVNu8aWMuJjYaE2PyVyFqvIN4YaFcZLmDLCywu+yyz/8FegqCLFH2kOjzmTkze855zvN7nud8z3M7v+esRgghkEgCjHaqEyC5NZBCk6iCFJpEFaTQJKoghSZRBSk0iSpIoUlUQQpNog7CD9u2bRMGg0EAcrvFNoPBILZt2+ZPIhNC4+/NgNFopLe3d7wgkpsYg8GAw+G44Xj8Ck2j0dywEck3m8l4Syn7aBJVkEKTqIIUmkQVpNAkqiCFJlEFKTSJKkihSVRBCk2iClJoElWQQpOoghSaRBWk0CSqIIUmUQUpNIkqSKFJVEEKTaIKUmgSVZBCk6jC105oubm5PP3004SGhk51UiSTib/VK1znCpqraW9vF1u3bhXR0dHjXvf2228LIYRYt27dlK8CktvY9zIgq6Cud3GKEAK73c727dsJCgpiwYIFzJo1i9LSUpYtW3bNBQ+FhYWsXr2aV155BafTeV22JZPLZCxOCWiNduHCBWU/NDRUlJWVCSGEWLBgwZjXaDQa1Z/WqbD5TdsmA9X6aG63mz179gCQn5+PyWRCCMGOHTvYunUrLpeLe++9l1dffRUhBMXFxQBUVFRgs9l49NFHaWpqwm6389vf/pbCwkK+/PJL+vv7OXDgAKmpqYqt4uJi9u/fT3d3Ny0tLbz22muEh4cDsH79eoQQvPDCC5SWluL1eomPj8fpdFJXVzcizeXl5Xi9XsxmszqFdBOj6mAgLi4OgL6+PuXYypUrWbx4Mdu2baOxsXHM62JjY3n66ad58803GRgY4Pnnn2fnzp2UlJSwf/9+li1bxksvvQRASkoKn3/+ORkZGWzevJlPPvmEJ598kldeeWVEnBs3bsTr9fL6669jt9v56KOPSEtLo6CgQIln5syZ7N+/n9bW1kAUx62FGk2nVqsVd911l+jv7xcDAwPCbDYLk8kkhBCira1NGI1G5bpXX31VCCFEcXGxAERFRYUQQoj09HQBiJ/+9KdCCCH+8Ic/CEAEBwcLh8MhampqBCDi4uLE6tWrRWZmpmLb4XCI+vp6AYj169cLIYTYs2fPiPR+73vfE0II8atf/UoA4sknnxRCCPH4449PedM11dvXvunMzc1FCMHg4CCff/45er2eZ555ZkQNcfr0ab9L7t1ut9KsXbp0CYCmpiYAvF4v3d3dStPY2dlJS0sLTzzxBP/5z3+wWq0YDIZR0yUlJSUj9nft2kVfXx+rV68GYM2aNXg8Ht57773rLwCJQnCgDfzlL39BCEFHRwe7d+/m9OnTI877fL5Jtbd27Vo++OADampq2LFjB++88w5btmwZFe5qu/39/ezatYsHHniAhIQE7r77bvbt26cIW3JjBFRolZWVbNy4MZAmRrF+/Xq0Wi0rV66krq4Oo9HIG2+8gd1u93vt9u3befDBB9m0aRMRERG89dZbKqT41iDgNZraNDc3A7B582ZKS0v5/ve/P+F5oD179uBwOHjsscdwu93s3LkzkEm9pbjphPbCCy+QlJTEmjVrWLp0KZs3b8ZoNGIymfxe63K52LlzJxs2bODjjz+mu7tbhRTfIgRq1PlN3bZs2SKEEOKhhx6a8rR8XbbJQArt8jZv3jyxdetW4XK5RF1dnQgJCZnyNH1dtsnga+e9MVUsX76cRx55hDNnzrBu3ToGBgamOkk3FfKLjxK/+JHIhJA1mkQVpNAkqiCFJlEFKTSJKgRUaA8//DDl5eX09/dz7tw5nnrqqUCamzKqq6vJzs4edXzjxo34fD68Xi8ej4eamhoeeeSRCcUZGxs76vXdL37xC6KjoyclzaoTqHm0H/7wh8Jms4n77rtPxMfHizvuuEOUl5eLZ599dsrnhSZ7q66uFtnZ2aOOb9y4Ufz9738XMOTJu2DBAnHp0iWRlJTkN87s7GxRV1c34pjNZlPcpdTcJoOACE2r1YqmpiYxf/78EcdzcnLEsWPHhFarFYBYt26dsFqtoqenR+zdu1dYLBYBCJPJJGw2m/jd734nbDabKC8vF/n5+eLjjz8WTU1N4sMPPxR6vV7AkL/a448/LiorK4XNZhOvvvqq0Ol0is1r2Vi/fr149913lXDz5s0Tx48fV85t375dvP3226KpqUmUlZWJ3NxcJeyGDRtEfX29sNvt4tlnn52Q0K5sR44cEUuWLBEw5Hv3s5/9TDn3zDPPiC1btgiLxaKUf0tLi1i6dKk4duyYcuy5554TgJgxY4b44osvhMPhEOXl5eLOO+9U4qqoqBA/+clPRGVlpejo6BAvvPDClAotIE1nQUEBDoeDY8eOjThutVqZP38+Pp+P/Px8tm3bxkMPPUR0dDQlJSXs2LFDCTtt2jSqqqpISUlh7969lJaW8sQTT5CWlkZYWBgPPfSQEnbdunXMmTOHzMxMEhMTee655wD82hiPVatW8cc//pGkpCR2797N5s2bASgqKuKVV17h/vvvJy4uDoPBgMVi8RtfUFAQq1evJiEhgbKysnHDNjQ0MH36dOrr60lMTKSkpIT58+fT2NhIRkYGf/rTn9DpdOzatYs333yTyMhIfv7zn7Njxw4SExOVeBYsWEBBQQGzZs3ixz/+MUVFRRPKeyAIiNDi4+NpaWkZN8wjjzzCP/7xD06ePInP52PTpk1MmzaNGTNmAOB0Otm+fTsA+/fvp7y8nIsXL+LxePjiiy/IyMhQ4vrrX/9Kf38/AwMDvPTSSzz88MMTsjEeR48e5dSpUwC89dZb5OXlAfDggw/yxhtvUFZWxuDgIC+++CJa7bWL8dFHH8XlcuF0Otm5cycvvvjipPy30rJly7Db7fztb39DCMFnn33Gnj17eOCBB5QwW7duxev10tTURElJiZKHqSAgQmtvbx/xZI1FcnIy1dXVyr4QgqqqKpKTk4EhT4rhzomDg4MjwgYFBSn7w9ca1NfXM23atAnZGI/h/msDAwPodDoAEhMTqa2tVc653W7FNWks/vnPf6LX6wkJCWHu3Lk8++yzrF271q99f1ydNxhqMYbn7Vp5mAoCIrSzZ89iNBqZP3/+iOM5OTkcO3YMrVZLU1MTWVlZyjmNRkN2drbiov1VGD7iy8nJUW78eDa8Xu8I926DwTAhW83NzWRmZir7YWFhJCUlTeja8vJyXn/9ddasWQNw3WmA0XmDobxfT/mpQUCE5vP5+PWvf817773H6tWrMZlMLFmyhHfffZd33nkHn8/Hv/71L370ox9x2223odVq+c1vfkNraytnz579yvaeeuopTCYTUVFRbNq0iX//+98A49qorKxkyZIlZGdnExUVxTPPPDMhW2+//TaPPfYYRUVFBAcH8+c//xmPxzOha5OTk1m7di1VVVUAXLhwgfXr12M0GsnLy2PDhg1K2L6+PhISEkhJSVFq776+PubMmYNOp+PgwYPExsby+OOPo9FoWL58OatWreL999//KkWnHoEYdV7ZHn74YVFeXi6cTqewWq3i6aefHnH+gQceEFarVTgcjlGjzo6ODiXcfffdJ/bt26fs//73vxebNm1SRlePPfaYOH/+vLDb7eK1114b4eJzLRuAeP7554XD4RCVlZXiiSeeGDHqHD4izcvLE9XV1cr+D37wA9HQ0CCam5vFL3/5S1FRUXHNUafP5xNer1d4vV7R0dEhXnvtNREaGioAERYWJj788EPR29sr9u/fLzZt2iS2bNmiXL9582bR09Mj7r33XgGI7373u6K1tVVZAVZQUDBi1HnXXXeNGHUWFhYq+2+99ZbYsGHDzTW9oeZ2dYHKbfK3yUC+gpKoghSaRBWk46PEL34kMiFkjSZRBSk0iSpIoUlUQQpNogpSaBJVkEKTqIIUmkQVpNAkqiCFJlEFKTSJKkihSVRBCk2iClJoElWQQpOoghSaRBWk0CSq4FdoX2UJmOTmY7Luv1+hvfzyy1JstygGg4GXX355UuLy68otkUwGso8mUQUpNIkqSKFJVEEKTaIKUmgSVZBCk6iCFJpEFaTQJKoghSZRBb//QOzxeBhwuyblQx+SmweNRkNIqH7C38X1W6NJkUnGQgjBgNs14fB+hSZFJrkWX0Ubso8mUQUpNIkqSKFJVEEKTaIKUmgSVZBCk6iCFJpEFaTQJKoghSZRBSk0iSpIoUlUQQpNogpSaBJVkEKTqIIUmkQVpNAkqiCFJlEFKTSJKnyjhVZXV8ulS5duKI6GhgbKTp/G4/FM+BqPx0NVlRWn03lDtm8l/K6Cul52vPfuiH2dTkd8QgJFRUWEhYXfcPw9PT2cPHGCqKgolq9YeV1x9Pf3cfLEcZKSktDpdLS3t1Ny8IByXqvVEhFhwJJqIScnF6126LlsuHiRM+Xl9Pf3U1Q0+4bzcvDgATra27n/298hOHj0LRlwu9m160PMZjOLlyy9bjvv73gPo9HIipX3UFl5gbMVFdx5193ExsbeSPInREBrNJ1OR2ZWFplZWRiNRpoaGzl86NCkxB0ZGUnR7NkUzZ5z3XFUWasYHBwkMzNrxPGICAMpKRbM5kQ8ngHOnT1LycED+Hw+ACwWCwUFhUyfnnNDeZhKsrOno9PpKC87rYq9gNVoAHq9ntnDhPDZvk+x2+309vZOyudKs7Kyr/taIQQXGy4SGhpKnMk04lyCOYE5c24DwOfzceL4cRoaLmK1VpKXl48uJITcvLwbSvtUExQUhDkxEVtDA3a7nejo6IDaC6jQrkav19Pd3Y1ON2R2cHCQC+fPY7M14HK5iIyMZEZBAWZzIgAul5PysjJaW1sRQhAdE0PRrCKioqPHbE462ts5e7YCu92OTqfDkppKQUGh0uQNx+Fw4BkYIDFx2rhp1mq1zJ4zh6amRurr6snLy6ex0caXR45QUFhIbm4ePp+Pc2fP0tBwEbfbjcFgIC9/BikpKRPK5xW6urooLztNb28vJpOJObfNJTx87G6G09lP2eky2trbCNJqMZvNFM6chV6vB8DtdnPq5Ana2toICwtnzpzRNb/ZbMbW0EBzc1PAhRbQplMIgcvlwul0Ul9fT3t7O0lJyYSGDhVGxZkzVFZeIC7ORH7+DFwuN4cPHaK3txeAY0eP0tjYiCU1ldy8PHq6uyktLVWasOHYu7ooLS3B4XCQkZlJVFQ0VVYr5WVlY6at77KNiIgIv/nQ6XRERUfT19eL1+sddb6y8gJWayVRUVEUFBai0Wg4dvRLuu32CeXzCieOHyc2Lg6TKZ7W1lYOfVE65tpJr9fLwQMHaG1tISM9g5QUC42NjSOa9yOHD9HU1ERMTAzxCfGcOHF8VFwx0TEAXOq8sQHVRAhojdbb28tHu3cp+5FRURTOnKnsp6WlYU40/69W0QzdlM6ODgwGAz09DoKDgyksnElwcDCJ5kTcA+4xC7/SWonP52PBwoUkJJiBocLu7raPmbaBy6PMkJCQCeUl5PLSf49nYNQ5R48DgJzcPEwmExaLBXuXHX2YfkL5vEJ+fj5p6ekAlBw8QHt7Ox0d7URFRo2w13DxIn19fRQVzSY9IwOA8IhwzpSX09bWSlhYOJ2dnURFR7Nk6TI0Gg1NTY0cOXx4RDyhl2s/lyvwo+eACi0sLIzb5s4FhkR3/tw5Pv/8M5YvX05EhAGD0YjdbufE8WP09fXR1dUFoDyVqampVFVZ+eij3Zji4oiPTyA1LZWgoCAGr6pZuu12NBoNJlO8cqx40e3XTFtQ0FBl7vFObFrjijB1utHCTLFYaGy0UVpykJiYGEymeCypqUrN7S+fV0ic9r+mNDFxGu3t7fT09IwSWpd96PqystOUXdWZ7+3txeMZKptEcyIajQYA87DfV7jykF0JH0gCKrTg4GClH2I2g1aj5dSpk9TX1zNjRgElBw9gt9tJTk5m2rQkoqNjqK6uUq6fOWsWCWYzzc1NXOrs5MyZciqtlaxYsRLtVYX2Vb/ccEUELpf/70d4PB7sXV0YDIYxpx+SkpJYvnwFNpuNzs4OqqqsWK2V3L54MWZzot98jpUHwTgZunxq7rx5GI2RI06Fh4fT3t7uPw5QugHBusB31VWdsB30DQLgG/QpT3ZqaioLFhYzPSeHoKCg/4UdHMTW0IAQgtmz53D38hVkZGYy4HbT2dkxKu7omGiEELS2tirHDh86xIH9/zdmWq50fnu6u8dNs8/n4/Spk/h8PlLT0sYM09rayqWuLmYUFLB02R3MmzcfIQTNzc1+8zmclubm//1uaQEg8qraDCAqeuiY1+slNjaW2NhYfD4fly51IoSPyMgh8bW2tCjdjJaW5lFdjisPWdjlJjSQBFTKLpeLU6dOKr9bW1rQaDQkJScTEhKCVqultbWVKqsV94Cbmpoa5dqgoCDOnTtLf38/06fnoNPpaG5qRqvVEn25EzucnJxcmpuaOH7sKKmpafT09NDe3kZGRuaYadPpdMSZTHR2dOB0OgkLC1POtbW2cfTLLxkc9HLpUhdut4u4uDhycnLHjKvRZqOurpb29jZiYmJoaGgAIC42zm8+h3PhwgW67F309/XT0d5OZGQkJpMJz8DIfmFqahrWykrOlJfT09ODLlhHbW0NaDSkWlKJigonLi6Ozs5OSkoOEhkZSUtzy6jRd1fX0CAgJuYbPmHr8XioramhtqaGttZWIiMjWbiwmNjYWHQ6HYsW3U5ISAjnz5/D3tVFfn7+iOtvX7wEs9lMTW0N58+fIyIinMVLlo45UoyJiWHxkqUYIyOpq6ulp6eb7OzpzCoqumb6rszDNTbaRhzv6+vFZmugra2N0NAQZhQUsGTpsjGnSQBmFRWRmZVFe1sbFWfO4PV4mD1nDpbU1Anl8wrz5s2js6ODjo52zGYzty9eMqpfBUMPybI77iTx8jzYf/9bTUxMDMuWLiMkNBSA4kWLmJaUhL2ri/a2Nm6bO3dUTdreNtTEJk4bf4pnMvD7Fz29jp6AJ2IqOXhgP/39/axYec+Y/a+bFZ/Px+5dHxIeEcHy5SuuOx7DVX3Ea3HrlOw1WLJ0GT6f75r9ppuV6uoqPB4Ps2Zdu8afTG75Gu1Wxev1IoSY8KdBr4Ws0STjonY34Rvtjyb55iCFJlEFKTSJKkihSVQhoD3ChoYGKisv0NfbS3h4BFmXvW1vNj75+GMWL1kyypmzurqK8rIyZdI1PDycGQUFWCypfuMcGBjg4sV6srOnK8eqqqykp2fc8EhxKgiY0Orr6zl3toI5c24jJjYWR08Pp8tO4x30XvNVzs1IenqG4sHSdekSpV+UEh8fj14fNu51AwMDVFdVjRBadVUVycnJUmhXEEJwtuIMi25fTEzM0HvJ0Ph4iouLOXb0KNOn5yg+UhVnzuByuYiNjWPuvLmEhYUz4Hbz2Wf7SM/IoK62Fl1ICAsXLqS8rIzu7m6iY2JYuLCYoKAg9n26l+zs6VitVgYHvUxLSmLWrCLlddG1bDQ22rA1NLCweBEw5N166tRJ7r57OY2NNhptNgTQ2dFBaGgoCxYWYzQaAbh48SLnzlbg8Xi+kkt3TGwsRoOBvt4+9PowTp8+hdFoVF6FVVmtuFwusqdns/eTjwHYvWsXC4uLOVNehtPp5OM9eygsnElObi49PT2cOnmC7u5uwiMiKCqaTXz8kJvUvk/3kpmVRXVVNQMDbjIzs5hRUDAp9/d6CEgfzdHTQ3CwThHZFQwGI3fdvRyNRoPD0cOJ48dZsLCYtfd/G5PJNMIxz+VyYTAYWbV6DeYEMwf272fObXP51qrV+AYHsdkalLCNTY0sX7GCe7+1CrfLhdVaOZQOPzbGo6WlhdzcPFavuY/ExGmcrTgDQHd3N2WnT7Ho9sXct/Z+vF4vTme/3/iEELS0tOB2u4ny4zYdFhbOPfd+i/DwcNbcdx8mk4m77l5OWFgY31q1ipzcXHw+H4cPfUFqWhr3f/s7zJpVxJEjh0e4PXVd6mLlPfewYuVKampr6PbjqRJIAiI094AbvT503DANFxtIS08nOjoajUZDXn4+LpeLnp6hNxFBQUGKz318fDxRUVGEh4ej1WqJizPR3/e/m5uVmUVQUBBarZbp03OwXfae8GdjPGJjYxVXohSLBYdjyIvW1tBARkYmUVFRQ3Hm5Y/7VzX19XV88P4Odn7wPocPfUFuXt6kTJZ2dHSg0+kU75SEhAQSzYk0NTYqYdLT09FoNOj1YZjiTDim8C1PQJrO0JBQXC73uGGcLqfis34Fg8GAy+VEHxqKVqsd4blwtRfD8JurH+biEx4RjvPyUz2eDX8M7wdptVp8viF7LrdrRE2t1WrH7W+lpaUrfbTu7m6+PHKE0FA9027QY8LldBJx1eDDYDTgHJY33TA39eF5mAoCUqMZIyPxej2Ky/IVensd/N/nnyGEIEwfRl9f31Xne/12kseib9giD4ejV3HkG8+GRqNlcJgr9ViLTsZCr9ePiHNwcHDCPvdRUVFkZGbQ0jLk4KjVaEe4c080DTD0cPVdtbil19FL2HWUnxoERGgajYaCwpkcOXyYlpaWIa/Yjg6OHDlCckoKGo2GFIuFurpa7HY7QgguXDhPqF6veId+Ff5b818G3G48Hg/nzlaQYrEAjGvDaDTQ2dFx2cfeQ5XVOiFbKSkW6mpr6e7uRghBxZkz1/RTuxqn00lLc7MyDWI0Gmm02fB6vTgcDi5evKiEDQ4Oxu1243Q6ldo7KCgYu92Oz+fDZDIxMOChrrYWgLa2NlpaW0hKTppwualJwKY30tLS0Gq1VFScoa+3l7CwMLKys5URVmRkJHPnzuPol0eUEeGiRYuuy1aqJZUDB/bjcrlIsViU6ZPxbBiNkWRlZ/P5Z/vQ68OYnjOd2ss3bTyioqIoKpqtLIWbnpMz7pK9urpa6uvrgKHmODklRSmD1LQ0mlua+Wj3LqJjYrBYLAwODrm76/V6srKz+XTvJywsXoTZbKagsJBTJ0+Snp5BQWEhty9ezKmTJygvLyM8IoLi4kXX1SKowTfeTWjfp3tZsLD4umpCyY0zUTch+QpKogpSaBJV+MY3nZKpRTadkq8VUmgSVZBCk6iCFJpEFaTQJKoghSZRBSk0iSpIoUlUQQpNogpSaBJVkEKTqIIUmkQVpNAkqiCFJlEFKTSJKkihSVTBr9DG+iq0RAJfTRt+hRYSqpdik4xCo9EQEjrxP8Lw68otkUwGso8mUQUpNIkqSKFJVEEKTaIKUmgSVZBCk6iCFJpEFf4f5AoBRuRdDnkAAAAASUVORK5CYII=)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;basic_button&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;basic_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">basic_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;primary_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">primary_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;link_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">link_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;basic_disabled_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">basic_disabled_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;primary_disabled_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">primary_disabled_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;link_disabled_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">link_disabled_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;basic_compound_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">basic_compound_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;primary_compound_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">primary_compound_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;basic_compound_disabled_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">basic_compound_disabled_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;primary_compound_disabled_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">primary_compound_disabled_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;basic_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Basic&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;primary_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Primary&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;link_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Link&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> link</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;basic_disabled_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Basic (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;primary_disabled_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Primary (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;link_disabled_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Link (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> link</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;basic_compound_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Basic&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Compound Button.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;primary_compound_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Primary&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Compound Button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;basic_compound_disabled_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Basic (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Compound Button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                      disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;primary_compound_disabled_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Primary (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Compound Button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                      primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/button.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/textbox-trigger"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Textbox / Trigger</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/buttons"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Buttons »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/879fc8a6.fbf02d84.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;basic_button&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;basic_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">basic_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;primary_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">primary_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;link_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">link_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;basic_disabled_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">basic_disabled_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;primary_disabled_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">primary_disabled_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;link_disabled_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">link_disabled_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;basic_compound_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">basic_compound_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;primary_compound_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">primary_compound_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;basic_compound_disabled_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">basic_compound_disabled_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;primary_compound_disabled_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">primary_compound_disabled_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;basic_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Basic&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;primary_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Primary&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;link_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Link&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> link</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;basic_disabled_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Basic (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;primary_disabled_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Primary (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;link_disabled_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Link (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> link</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;basic_compound_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Basic&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Compound Button.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;primary_compound_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Primary&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Compound Button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;basic_compound_disabled_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Basic (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Compound Button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                      disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;primary_compound_disabled_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Primary (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Compound Button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                      primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/button.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/textbox-trigger"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Textbox / Trigger</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/buttons"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Buttons »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/879fc8a6.e5d1f893.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/buttons/index.html b/docs/docs/examples/buttons/index.html
index 89b2efd22a..ca0af41d4b 100644
--- a/docs/docs/examples/buttons/index.html
+++ b/docs/docs/examples/buttons/index.html
@@ -5,33 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Buttons | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Buttons | H2O Wave"><meta data-react-helmet="true" name="description" content="Use the ui.buttons() function to group related buttons."><meta data-react-helmet="true" property="og:description" content="Use the ui.buttons() function to group related buttons."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/buttons"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/buttons"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/452608cb.c798c22b.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/452608cb.42528341.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Buttons</h1></header><div class="markdown"><p>Use the <code>ui.buttons()</code> function to group related buttons.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Buttons</h1></header><div class="markdown"><p>Use the <code>ui.buttons()</code> function to group related buttons.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;standard_button&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;primary_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">primary_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;standard_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">standard_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;standard_disabled_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">standard_disabled_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buttons</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;primary_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Primary&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;standard_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Standard&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;standard_disabled_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Standard&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/buttons.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/button"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Button</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/checkbox"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Checkbox »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/452608cb.c798c22b.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;standard_button&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;primary_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">primary_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;standard_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">standard_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;standard_disabled_button=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">standard_disabled_button</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buttons</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;primary_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Primary&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;standard_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Standard&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;standard_disabled_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Standard&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/buttons.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/button"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Button</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/checkbox"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Checkbox »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/452608cb.42528341.js"></script>
 </body>
 </html>
\ 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 c96a1ac803..698281a734 100644
--- a/docs/docs/examples/card-menu/index.html
+++ b/docs/docs/examples/card-menu/index.html
@@ -5,38 +5,36 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Context Menu | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Context Menu | H2O Wave"><meta data-react-helmet="true" name="description" content="Display a context menu on a card."><meta data-react-helmet="true" property="og:description" content="Display a context menu on a card."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/card-menu"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/card-menu"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/9152460a.b856da25.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/9152460a.42fa5a7f.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Context Menu</h1></header><div class="markdown"><p>Display a context menu on a card.</p><div class="cover" style="background-image:url(/wave/assets/images/card-menu-db530edd23afd919e8bb15708a24c76b.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> json</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Context Menu</h1></header><div class="markdown"><p>Display a context menu on a card.</p><div class="cover" style="background-image:url(/wave/assets/images/card-menu-db530edd23afd919e8bb15708a24c76b.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> json</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Vega lite spec for a bar plot, defaults to linear scale.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">spec_linear_scale </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> json</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">dumps</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    mark</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;bar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    encoding</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">field</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;a&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;ordinal&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">field</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;b&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;quantitative&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Vega lite spec for a bar plot, log scaled.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">spec_log_scale </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> json</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">dumps</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    mark</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;bar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    encoding</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">field</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;a&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;ordinal&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">field</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;b&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;quantitative&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;log&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Data for our plot.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">plot_data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fields</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;a&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;b&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;A&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">28</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;B&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">55</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;C&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">43</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;D&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">91</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;E&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">81</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;F&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">53</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;G&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">19</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;H&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">87</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;I&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">52</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create a couple of context menu commands.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">log_scale_command </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;to_log_scale&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Log Scale&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;LineChart&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">linear_scale_command </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;to_linear_scale&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Linear Scale&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;LineChart&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_added</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Have we already added a plot?</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        example </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">to_log_scale</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Change to log scale</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">title </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Plot (Log Scale)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">specification </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> spec_log_scale</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">commands </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">linear_scale_command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Change to linear scale</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">title </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Plot (Linear Scale)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">specification </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> spec_linear_scale</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">commands </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">log_scale_command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Add a new plot</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">vega_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 4&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Plot (Linear Scale)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            specification</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">spec_linear_scale</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            commands</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">log_scale_command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Flag to indicate that we&#x27;ve added a plot</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_added </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/card-menu.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/tab-routing"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Routing / Tabs</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-point"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Point »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/9152460a.b856da25.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_added</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Have we already added a plot?</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        example </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">to_log_scale</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Change to log scale</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">title </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Plot (Log Scale)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">specification </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> spec_log_scale</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">commands </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">linear_scale_command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Change to linear scale</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">title </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Plot (Linear Scale)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">specification </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> spec_linear_scale</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">commands </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">log_scale_command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Add a new plot</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">vega_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 4&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Plot (Linear Scale)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            specification</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">spec_linear_scale</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            commands</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">log_scale_command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Flag to indicate that we&#x27;ve added a plot</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_added </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/card-menu.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/tab-routing"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Routing / Tabs</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-point"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Point »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/9152460a.42fa5a7f.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/checkbox/index.html b/docs/docs/examples/checkbox/index.html
index 68e059466f..64bb125101 100644
--- a/docs/docs/examples/checkbox/index.html
+++ b/docs/docs/examples/checkbox/index.html
@@ -5,33 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Checkbox | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Checkbox | H2O Wave"><meta data-react-helmet="true" name="description" content="Use checkboxes to switch between two mutually exclusive options."><meta data-react-helmet="true" property="og:description" content="Use checkboxes to switch between two mutually exclusive options."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/checkbox"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/checkbox"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/8c12d624.8cb421f3.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/8c12d624.0b6c818a.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Checkbox</h1></header><div class="markdown"><p>Use checkboxes to switch between two mutually exclusive options.</p><div class="cover" style="background-image:url(/wave/assets/images/checkbox-7b117add24c72bf0c30d9ae546f39718.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Checkbox</h1></header><div class="markdown"><p>Use checkboxes to switch between two mutually exclusive options.</p><div class="cover" style="background-image:url(/wave/assets/images/checkbox-7b117add24c72bf0c30d9ae546f39718.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;checkbox_unchecked=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">checkbox_unchecked</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;checkbox_checked=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">checkbox_checked</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;checkbox_indeterminate=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">checkbox_indeterminate</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;checkbox_unchecked_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">checkbox_unchecked_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;checkbox_checked_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">checkbox_checked_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;checkbox_indeterminate_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">checkbox_indeterminate_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checkbox_unchecked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Not checked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checkbox_checked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Checked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checkbox_indeterminate&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Indeterminate&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> indeterminate</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checkbox_unchecked_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Not checked (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checkbox_checked_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Checked (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checkbox_indeterminate_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Indeterminate (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> indeterminate</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                        disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/checkbox.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/buttons"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Buttons</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/checklist"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Checklist »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/8c12d624.8cb421f3.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;checkbox_unchecked=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">checkbox_unchecked</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;checkbox_checked=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">checkbox_checked</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;checkbox_indeterminate=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">checkbox_indeterminate</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;checkbox_unchecked_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">checkbox_unchecked_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;checkbox_checked_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">checkbox_checked_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;checkbox_indeterminate_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">checkbox_indeterminate_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checkbox_unchecked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Not checked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checkbox_checked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Checked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checkbox_indeterminate&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Indeterminate&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> indeterminate</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checkbox_unchecked_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Not checked (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checkbox_checked_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Checked (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checkbox_indeterminate_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Indeterminate (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> indeterminate</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                        disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/checkbox.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/buttons"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Buttons</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/checklist"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Checklist »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/8c12d624.0b6c818a.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/checklist/index.html b/docs/docs/examples/checklist/index.html
index 2a01e78574..1b51107dae 100644
--- a/docs/docs/examples/checklist/index.html
+++ b/docs/docs/examples/checklist/index.html
@@ -5,33 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Checklist | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Checklist | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a checklist to group a set of related checkboxes."><meta data-react-helmet="true" property="og:description" content="Use a checklist to group a set of related checkboxes."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/checklist"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/checklist"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/7d1cd1c9.e38b756a.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/7d1cd1c9.1f4be8b0.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Checklist</h1></header><div class="markdown"><p>Use a checklist to group a set of related checkboxes.</p><div class="cover" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJoAAACWCAYAAAAmPZFsAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDEyOjUzOjA0IFBNIFBEVHzOnogAABjOSURBVHic7d15XBX1/sfxF0uCQOAROeKWK25gqSUgmYq4oKnlkgoJ4o6hppSiKS0uXZdEUcGwrkiKoZJaZmluN5fsuiSmCAoJXWUTRGTVI/L9/aGcX0fNOIhDx77Px8PHgzPzne98Z3gzM+ecmY9GQgiBJD1hxtU9AOmfQQZNUoQMmqQIGTRJETJokiJk0CRFyKBJivjbB+331FRiYmLQaDTVPRTpMVQ6aAUFBSwPCaH/q/142a0zw4a9QVTUep1ALF60iBc7duDChQuVHmD4mnCWLlnM0aNHKt2HVP1MK7NQQUEBfqN8SU1NpW7duji1a0dyUhIrQ0OJOx1HyPLlGBkZVckAJ4yfQNu2bXFze7lK+pOqR6WCFha2mtTUVF4fNIj33puDiYkJJSUlBE6fxqFDP7Lr22/pP2BAlQyweYsWNG/Rokr6kqqP3qfO27dv8/1332FjY8PMmUGYmJgAULNmTd6eNg1nZ2dycnJ0lsnIyGDMmNF0dnVlxPBhxMfHa+dpNBpCli2jd6+euHV2ZbTfKE6dPKmdX376PXv2rHbaV1/FMnjwIDq7ujB48CB2bN+us75t275i8KDXcet8d327v/9eO6+0tJTQ0BX09exDZ1cXhr0xlL17f9B3N0h60jtoaWlpFBYW0qFDB8zMzHTmtW7dhjWfRuA3erTO9KVLFmNb2xZHR0eSkpKYPWsW5d/lz53zHtHRG2nb1pE3R47kypUrTJrkz/nz5x+6/piYGD5euBBjIyO8vLwxNTFh/vx52rBs3bKFhQsWYGNjg5/faMzMzJkz5z2+/fZbACLXreOLqCgcWrYkYPJkTExMeG/27Me6jpT+mt6nzhs3bgBgY1Orwsu8MWwYfn53w/emtzeJiQlkZGSg0WjYv38/Tk7tCFm+HGNjYzp27MjkgADWR65jydJPdPopKytj3b8/x8LCgnXrIrG2sWGkjw+TJwcQFxeHh0dP1n62Fjs7O1auWo2ZmRkjR45k4MABbI75kv79+3Pp0iUARo8eTYcOHenTx5PExATs6tTRd1dIetA7aNbW1gDcyL9R4WU6tO+g/blFi+YkJiZQUlzMxYsXAXB72Q1j47sHVxcXV2rUqEFCQsID/eTk5HDt2jU6duyItY0NALVr12bTpi8BuHr1KrnXrgHQvVtXnWVLS0sB6NOnD/v27cV/4kQcnZzo2LEjfT37UtvWtsLbI+lP76A1aNAAC0tL4k6fRqPRUKNGDe285OQk1kZE4OzswtA33tBON753HQfAH96NCh5+K5wQ4qHvWv/q1rny+fXq1eNfixbrzCsPcnd3d76MieGHPT8QdyaOjRs2ELV+PaErV+Hm5vbI/qXK0/sarUaNGnj28SQvL49lnyylrKwMgJKSEkKWLWP//v3UqlWx02qbNm0BOHrkiLafY8eOcfv2bVq1av1Aezs7O2xtbUm8cIHs7GwArl27hre3F0uXLsHOzg6VSoUQAgcHB9q1a4ejoyO//HKKrKzMe/3/RHx8PG8FBLB27Wd8NG8+ZWVlHD50SN9dIemhUh9vTJkyhRMnjhMbG8vhw0d47rnnSEq6SF5eHt26dcOjZ88K9dO0aVPc3Xtw8OABpk6ZQvMWzfl2505MTEzw8/N7oL2xsTFjxoxl6dIlTJw4gS4vd+Ho0SOkpqbi6zsKY2NjRo3yY8WK5YwdM4Yur3Th1zNnOH78OOPGjadHDw/27d3Ljh07OHHiBI5tHfl+9913pM8//3xldoVUQZUKmrWNDVFfbGBtxKccPPgf4uJOo1bXxc9vNF7e3np9WLvw449ZvWoVe/bs5pdfTtGyZUsmT56Co5PTQ9uP8PLC1NSUTZui2bJlM/b29sx+bw6enp4A+Pj6UsOsBptjYohav57atW2ZONGfcePHA/DujJk8U6MGBw8cYN/evTRo0IDZs9+jb79+ldkVUgUZyWcGJCX87b9Ul54OMmiSImTQJEXIoEmKkEGTFCGDJilCBk1ShAyapAgZNEkRMmiSImTQJEXIoEmKkEGTFCGDJilCBk1ShAyapAgZtIdYHxn5wEPJ0uORQZMUIYMmKaJSQbt06RIDBgzAysqK2rVrM2bMGAoLC/9yudjYWIYOHVqZVWr98ssv7Nix4y/bDRs2DBcXF51pOTk51Ln3RHplx7JixQqMjY0xNTXF3NycNm3asHz58r985vRxODk5ce7cucfqIyQkhLy8vEe2SUhIwMjIiO//UKsEdPfV5MmTWb16td7rr1TQXn31Vdzc3EhPTycxMZHi4mKmTZtWma70VpGg5efn89NPP5GXl0dycnKVj2HMmDGUlpZSWFjIhg0biImJYdasWVW+nqpUkaBt3LgRV1dXoqOjq3z9egetpKSEpKQk3nnnHaytrVGr1YSFhTF8+HBtm+3bt9OqVStUKhVDhgwhKyvrgX6EEMyfPx97e3vs7e2ZOXOmtmzBH+epVCpmzJjBnTt32Lx5M+PHjycqKgp7e3vu3Lnz0DFu27YNT09PvLy8nshOK2dqaspLL73Ezp07iYiI4Nq9cgznz5+nS5cu2NjY4OLiwokTJ7TLfPnll7Rt2xa1Ws2QIUMoKioC7v5xeHt7o1KpaN68ORs2bHjoOh/Vrny9zz77LC+88AKnT58GoFOnTqSlpdG0aVMWL1780H6FEMTExBAZGcnevXu146oqegetZs2aeHp6Mnr0aO3h3NbWll69egF3N9bf35+YmBhycnJo1qwZY8eOfaCfzz77jJ07d3L27FkuXrzI8ePHWbFihXberl27+PXXX7l8+TJnz54lNDSU4cOH89lnnzFq1CgyMzO1JbPuFx0dzfDhwxk+fPgTDVo5tVpN586dOXLkCBqNhgEDBjBu3Djy8vIICgpi4MCBFBcXc/XqVQICAti9ezeZmZk0btyYgwcPAuDv74+1tTWZmZl89913BAUF6QS03J+102g09O/fnwkTJpCfn8+SJUvo27cvt27d4sSJEzRo0ICUlBSCgoIeug0//fQT9vb2tG7dmu7du/P1119X6T6q1Klz+/btuLm5MX78eJo0acLcuXMpLi4G7v7F+vv706FDB0xMTJg/fz4HDhygpKREp48NGzawePFi7OzssLa2Jjg4mO33PlL44osvmDNnDmq1GisrK2JjY/H19a3Q2DIyMjh79izu7u60adMGc3Pzh/7CqpparSY3N5fDhw/TsGFD/Pz8MDIyYvDgwbRo0YKjR49iamqKEILz588jhCAkJIT+/ftTUlLCzp07WbFiBWZmZrRq1YqxY8c+cInwqHaHDh1CpVLh6+uLkZERffr04eTJk3/6x3i/6Ohohg0bBvBE/kAr9aT6M888Q0BAAAEBAWRkZDBnzhzGjRvHpk2bSEtLIzIykoiIiP9fiamp9rRS7siRI/To0YO6desCdw/darUagPT0dJo1a6Zta2VlhZWVVYXGNnfuXLKysnjmmWe007y8vJ7ItdofZWRkYGtrS1paGocOHcLe3l4779atW+Tk5NyrfLSJjz/+GB8fH/r160dISAhFRUUUFhbSpEkT7TKlpaXaX3y57OzsP213/z4DaNiwYYXGfvv2bdasWQOgc62dnZ2NnZ1dRXfBI+l9RLt8+TIbN27Uvq5Xrx7z5s1j79692tezZs0iMzNT+y8/P/+BjXZzc9OeQjIzM8nKytJWdaxfv75OMAoLCx+oIvlnzpw5w759+xBCIITg4sWLFBYW/un1XFVIT0/n559/pkuXLtSrVw9XV1ed7b9+/TpeXl4A9O3bl0OHDvHbb79RUlLC/PnzqVOnDmZmZly6dEm7TE5ODuHh4TrreVS7+/cZwJUrV7TXvY+yZ88eunTpot1nQgi8vb3ZsmVLle0jvYNmbm7OpEmT+Pzzz8nPz+d///sfM2fOxNnZGYARI0awbt06Tp06hRCC2NhYXn/99Qf6GTlyJMHBwVy9ehWNRkNQUBBLly4FwNfXl+DgYLKzs7lx4waDBg1i69atAFhaWpKYmEh+fv4DfV64cIHLly/TvXt37TQHBwfq16/P/v379d3Uv6TRaDh27Bj9+/fn7bffpnbt2nTt2pXMzEwiIyO1p0kXFxeuX79OXFwcL774Irm5uVhYWGBtbY2xsTEWFha89tprBAYGcvPmTa5du8bAgQP58ccfddb3qHZdu3YlLy+PiIgIhBDs2rULV1dXbR0US0tLTp8+ze3btx/Yjj+eNstV+elTVMKPP/4oOnXqJMzMzIRKpRLe3t7i6tWr2vnbtm0TrVu3FtbW1sLV1VWcOnVKCCHE1q1bxZAhQ4QQQpSVlYl58+aJevXqidq1a4uhQ4dq+ygrKxMffPCBUKvVwtraWkydOlXcvn1bCCFEQUGB6Nevn7CwsBAFBQU64woODhb+/v4PjHfRokXCx8dHZGdnC1tb2wfGcr/IdevE9m3bHjpv+fLlwsjISJiYmAhzc3Ph5OQkwsLCdNrEx8eLV155RTz77LPCwcFBREdHa+d9+OGHwt7eXtjb24vBgweLnJwcIYQQeXl54s033xS1atUS9evXFzNnzhSlpaVCCCEcHR3F2bNn/7LduXPnhJubm7CwsBBt2rQRx48f1643NjZWqNVqMXv2bJ2xFhQUCCsrK5Genq4z/ebNm6JWrVoiOTlZZ18FBASIVatWPXTfPIos8vIQ6yMjqVWrFq8PGlTdQ3lqyK+gJEXIoEmKkKdOSRHyiCYpQgZNUoQMmqQIGTRJETJokiJk0CRFyKBJipBBkxQhgyYpQgZNUoTed9h+8803rAxdwfXr1x9rxSqViqlvT2PgwIGP1Y9kIPS9r8ijh7uIP3dO7/uR7hd/7pzw6OH+2P1IhkHvU+f169dp6+j42AFv6+j42EdFyXDIazRJEZV6CkppY8aM5kxc3APTP/zwIwbIazyDYBBBAxg1yk/n/2kHKvxfakvVz2CCZm1tTf369at7GFIlGUzQ/sqWLZuJWr+e3Nzr9O7dCweHlpw4eYLQ0JXA3UfjQkKWsWf3bgDGjhvHr2fO0K7d8/hU8Cl4qfKeijcD3323i/CwMN6dMYPYr2Jp9NxzRH0RpdNm8aJ/cSYujtCVq1gXuZ5fz5zRFkGRnjyDOaKFh4cREfGpzrS9+/ZjZWVF9MZoJkyciLt7DwDGjRvP8f/+V9suPz+fnTt3smFjNK1atQLgo3nz6dXTQ7kN+IczmKB5eXkzaPBgnWkWFhYAJCcn4eTUTmdeW0dHUlJSAEi5dAkTE1McHBy082vWrEnTpk2f8KilcgYTNJVKpVPcpJwQgrKyMoyNjXSm/7GKzp1788vLAzysjfRkGfw1mpGREU2aNOH8+fM60y8kXtD+3KRxYzQaDZcuXdJOu/+19GQZzBEtPz+f9PR0nWk2NjZYWloyfPgIPv10DfXr1adZ8+YcPHiAhITzOLW7ezqtbWuLh0dP5n30EUGzZmFpacm6f3+OianBbL7BM5g9HRW1nqio9TrTpk2bjo+vL0PfeIOi4iIWLlxAXt4NevXqyYgRXpyL//8Cw+9/8AGfLF3KJP+JGBkZMX7CBK5dy1V4K/7B9P0WvmOH9lX2jX5V9lVeUafcihXLxexZQdrXd+7ceWAZn5FvitjYrVU2BunPGcwR7VG2bNnMrm93ERgYSIOGDYmPj2fH9u3MmDlT22ZW0EwsLC3x8fHFysqKH/bsISkpCVdX12oc+T/HUxG0gQNfIyMjg+DguVy9ehV7e3smTJhIv36vattMD3yHlaGhTPKfSEFBAQ4tW7JiRSgNGlSs/Kb0mPQ9BMobH6XK0PuINvXtaUydOqXKbuWW/hlk2SpJEQb/ga1kGGTQJEXIoEmKkEGTFCGDJilCBk1ShAyapAgZNEkRMmiSImQ1IUkZ+n45Kr9UlypDVhOSFCGv0SRFGMSNj/dXE1KpVPTx9OTtt6dRo0aNahyZVFEGETTQrSZ0+fJlFi5YgLm5OVOmTK3mkUkVYTCnzvJqQvXr18fFxYWJ/hPZv29fdQ9LqiCDOaLdz8TEVOe0mZaWxupVq/jvf3/mzp07dO3ajaBZs7CysgLgzp07hIeHsfObbygsLKRz587MDX4flUoFwLVr11iyeBHHjh3D1NSUXr17M316IObm5gDMnPEuzZo357fk3zh69Ai1aqmYPGWyznMJ0p8zmCPaH6WkpLB2bQT9+w8A7pZFCJw+HYD1UV/wxYaNXL78P9aEh2mXCVn2CYcPH2bJ0qV8GbOZmhYWTJw4ASEEpaWlBLw1CSMjY6K+2EBY+BqSk5KZM+c9nfVu3bKFfq/2Y9++/YwZO5aPPvyQrKws5TbckOn7eUh1PNc5erSfcHHuJF526yzcOruKjh3ai7femiSKCgu1bQoKCoRGo9G+3rJ5s3jT20sIIUR+fr5w7vSSuHDhgnZ+SUmJiI7eKIqKisSPP/5HePRwF7du3dLOz8rKEi927CBSU1KEEELMePcdMWfOezrj6v9qP7F37169t/ufyGBOnSO8vBgyZChw97O8laGhTJo0icj16zE2NsbYyIjvv/+O+HPnuHzlCufj41Gr1QD89lsyFhYWtGzZUtufubk53t5vAnDx4kVatW6tcypWq9XUq1ePCxcv0PhecZlGjRrpjMnGxoaS4uInudlPDYMJWi2bWtpfdKNGjQhduZLevXoSHx9P82bNGOkzkrpqNR49e9GrV29SUlLYunUL8P8Vh/6UACOM/ny+9NgM8hoN7tY3q2FmRnFREQkJCVzNymJ1WDhDhw7lpU6dyMvL07Zt3rwFJSUlJCQkaKeVlJSweXMMxcXFtGzVksTEBIqLirTz09LSyMjIoFXLVopu19PKYIJWXk0oPT2dxMQEFi5cgBHQ7vnnadioIRqNhu927SIjI4N9+/axZctm7bLW1tYMGjSID94PJi7uNKmpqSyYP4+vYmOpWbMmbm4vU6dOHYLfDyYlJYXExARmzwqie3d37WlTejwGc+r8YzUhC0tLHNs6Er5mDRYWFlhYWLD0k2Us+2QpixcvouOLL+Lj48u33+7ULj9jZhBhYauZMWMGRYWFvNSpE59+GoGRkRGmpqaEha9hyeJF+Pr68IypKb169WJ64DvVtLVPH70fIH6xYwdO/VI1RYarsi/p781gTp2SYZNBkxShd9BUKhXn4+Mfe8Xn4+O1X/9ITz9ZTUhShKwmJClCXqNJipBBkxQhgyYpQgZNUoQMmqQIGTRJETJokiJk0CRFyKBJipDVhCRl6Ps0i6wmJFWGrCYkKUJeo0mKMJhnBr7ctImtsVtJT0tDrVYz8LXXGDNmLMbG8m/FEBhE0NavjyR640amBwbSunUbfv89lZBly7iRd4N33n23uocnVYBBBO3rHTsIDHyHvv36AdCsWTMsLa1Y9+9/V/PIpIoyiKCZmppyNfuqzjRnZ2ecnZ21r3u4d2ducDAbN2wgISGBxo0b8/a0aXTu7KZts33bNjZtiubKlTQaPdeIiRP98fDwAO5WC2rSpCkJCec5efIUTZs2YeHH/+Kbb75mx/btmJqaMnbceEaMGKHEJj999H2bWh1FXnZ+841wce4kFi5YIE4cP65TzKWce/du4vXXBorTp38RN2/eFHv27BYvu3UWyUlJQggh9u3bJ7p1fUUcOLBfZGdnix07tgtXF2eRnZ0thLhbxKVXTw/x87Fj4saNG+KdwEDR9ZUu4rO1a0VRUZE4cGC/cO70krhy5XKVbf8/iUFcSfcfMIBPIyLIzc1lypQp9O7Vk9WrV3Hz5k2ddgMGDKR9+w6YmZnRu3cfPDw82HKv/oaHhwfbd3yNu3sP6tSpw2uvvY6lpSUJCee1y7/yyiu4uLrefbJ98GBu3brFmLFjsbCwwN29B/b29iQlJSu67U8Lgzh1ArRv34H27TtQUlLCfw4eJDw8jN9Tf2fpJ59o2zi0dNBZpk2btvyw9wft68zMTDZvjiElJYXUlFSuX7/OrVsa7Xx13bran01NTTEzM9N5V2tmZsatW7eexOY99QziiPZHNWvWpG+/fqxctZoDB/aTm5urnafR3NZpq9FotFWCtm37ikn+EyktLaV37z78a9EiGjZsqOjY/8n+9kHLzs6me7euXLx4UWd6SUkJxsbGOjXN7n/e9OzZs7RwaAHA7u+/Z9QoPyZPnoKHhwcNGzYkOzv7yW+ABBjAqdPOzo7nX3iBoJkzeCsggIYNG/FbcjKrV6/C07OvtkYtwJ49u2nZqhVOTk4cPHiAI0cOszF6EwDPNW7M0aNH6dq1K8YmJny6JhwhnzRUzN8+aACLFi1mTXg4IcuWkZubi52dHQMGDmT8+Ak67SZPmcpXsVv54P1gGjduwvLlK2jevDkAgdMDWbBgPr6+PqhUKsaOHUdiYmJ1bM4/k75vU6vj442KcO/eTZw8caLK+pOq1t/+Gk16OsigSYrQ+xqtvJrQ496TVtXVhA4c/E+V9SVVPVlNSFKErCYkKUJeo0mKkEGTFCGDJilCBk1ShAyapAgZNEkR/wej4dE2Y0zQGgAAAABJRU5ErkJggg==)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Checklist</h1></header><div class="markdown"><p>Use a checklist to group a set of related checkboxes.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;selected=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">checklist</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checklist</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checklist&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Choices&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                         choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Egg&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Bacon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/checklist.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/checkbox"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Checkbox</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/picker"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Picker »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/7d1cd1c9.e38b756a.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;selected=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">checklist</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checklist</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checklist&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Choices&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                         choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Egg&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Bacon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/checklist.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/checkbox"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Checkbox</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/picker"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Picker »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/7d1cd1c9.1f4be8b0.js"></script>
 </body>
 </html>
\ 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 e647ab7e0c..47d355e5fa 100644
--- a/docs/docs/examples/choice-group/index.html
+++ b/docs/docs/examples/choice-group/index.html
@@ -5,34 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Choice Group | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Choice Group | H2O Wave"><meta data-react-helmet="true" name="description" content="Use choice groups to let users select one option from two or more choices."><meta data-react-helmet="true" property="og:description" content="Use choice groups to let users select one option from two or more choices."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/choice-group"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/choice-group"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/82f75f63.f94f1ad0.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/82f75f63.4e923452.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Choice Group</h1></header><div class="markdown"><p>Use choice groups to let users select one option from two or more choices.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Choice Group</h1></header><div class="markdown"><p>Use choice groups to let users select one option from two or more choices.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">choices </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;A&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Option A&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;B&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Option B&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;C&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Option C&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;D&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Option D&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;selected=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">choice_group</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice_group</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;choice_group&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Pick one&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;B&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> required</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">choices</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/choice-group.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/dropdown"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Dropdown</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/combobox"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Combobox »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/82f75f63.f94f1ad0.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;selected=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">choice_group</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice_group</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;choice_group&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Pick one&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;B&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> required</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">choices</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/choice-group.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/dropdown"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Dropdown</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/combobox"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Combobox »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/82f75f63.4e923452.js"></script>
 </body>
 </html>
\ 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 38dac0be3e..ef922569e9 100644
--- a/docs/docs/examples/color-picker/index.html
+++ b/docs/docs/examples/color-picker/index.html
@@ -5,33 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Color Picker | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Color Picker | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a color picker to allow a user to select a color."><meta data-react-helmet="true" property="og:description" content="Use a color picker to allow a user to select a color."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/color-picker"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/color-picker"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/4612f97b.80cd17b1.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/4612f97b.b25589f7.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Color Picker</h1></header><div class="markdown"><p>Use a color picker to allow a user to select a color.</p><div class="cover" style="background-image:url(/wave/assets/images/color-picker-d5462fd8a2dcc2b3d980e2402a61d930.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Color Picker</h1></header><div class="markdown"><p>Use a color picker to allow a user to select a color.</p><div class="cover" style="background-image:url(/wave/assets/images/color-picker-d5462fd8a2dcc2b3d980e2402a61d930.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;color=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">color</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">color_picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;color&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Pick a color&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#F25F5C&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/color-picker.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/date-picker-trigger"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Date Picker / Trigger</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/swatch-picker"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Swatch Picker »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/4612f97b.80cd17b1.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;color=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">color</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">color_picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;color&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Pick a color&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#F25F5C&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/color-picker.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/date-picker-trigger"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Date Picker / Trigger</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/swatch-picker"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Swatch Picker »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/4612f97b.b25589f7.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/combobox/index.html b/docs/docs/examples/combobox/index.html
index 6b0f119872..ed119e8cc8 100644
--- a/docs/docs/examples/combobox/index.html
+++ b/docs/docs/examples/combobox/index.html
@@ -5,34 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Combobox | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Combobox | H2O Wave"><meta data-react-helmet="true" name="description" content="Use comboboxes to allow users to either choose between available choices or indicate a choice by free-form editing."><meta data-react-helmet="true" property="og:description" content="Use comboboxes to allow users to either choose between available choices or indicate a choice by free-form editing."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/combobox"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/combobox"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/fd056868.42217e60.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/fd056868.c9138dea.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Combobox</h1></header><div class="markdown"><p>Use comboboxes to allow users to either choose between available choices or indicate a choice by free-form editing.</p><div class="cover" style="background-image:url(/wave/assets/images/combobox-99fc7d69ef37ddf7a125cdeaa730e2ce.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Combobox</h1></header><div class="markdown"><p>Use comboboxes to allow users to either choose between available choices or indicate a choice by free-form editing.</p><div class="cover" style="background-image:url(/wave/assets/images/combobox-99fc7d69ef37ddf7a125cdeaa730e2ce.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">combobox_choices </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Cyan&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Magenta&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Yellow&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Black&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;combobox=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">combobox</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;combobox_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">combobox_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;combobox_error=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">combobox_error</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">combobox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;combobox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Enter or choose a color&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> placeholder</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Color...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Blue&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                        choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">combobox_choices</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">combobox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;combobox_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Enter or choose a color&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> placeholder</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Color...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Blue&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                        choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">combobox_choices</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">combobox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;combobox_error&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Enter or choose a color&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> placeholder</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Color...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Blue&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                        choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">combobox_choices</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> error</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;This combobox has an error!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/combobox.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/choice-group"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Choice Group</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/toggle"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Toggle »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/fd056868.42217e60.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;combobox=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">combobox</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;combobox_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">combobox_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;combobox_error=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">combobox_error</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">combobox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;combobox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Enter or choose a color&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> placeholder</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Color...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Blue&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                        choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">combobox_choices</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">combobox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;combobox_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Enter or choose a color&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> placeholder</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Color...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Blue&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                        choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">combobox_choices</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">combobox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;combobox_error&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Enter or choose a color&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> placeholder</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Color...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Blue&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                        choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">combobox_choices</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> error</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;This combobox has an error!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/combobox.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/choice-group"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Choice Group</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/toggle"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Toggle »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/fd056868.c9138dea.js"></script>
 </body>
 </html>
\ 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 80ed306cac..ae0a66f63e 100644
--- a/docs/docs/examples/counter-broadcast/index.html
+++ b/docs/docs/examples/counter-broadcast/index.html
@@ -5,37 +5,35 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Mode / Broadcast | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Mode / Broadcast | H2O Wave"><meta data-react-helmet="true" name="description" content="Launch the server in broadcast mode to synchronize browser state across users."><meta data-react-helmet="true" property="og:description" content="Launch the server in broadcast mode to synchronize browser state across users."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/counter-broadcast"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/counter-broadcast"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/917fcb62.35b584b9.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/917fcb62.5fdef126.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Mode / Broadcast</h1></header><div class="markdown"><p>Launch the server in broadcast mode to synchronize browser state across users.
-Open <code>/demo</code> in multiple browsers and watch them synchronize in realtime.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Mode / Broadcast</h1></header><div class="markdown"><p>Launch the server in broadcast mode to synchronize browser state across users.
+Open <code>/demo</code> in multiple browsers and watch them synchronize in realtime.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">count </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        count </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> count</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> mode</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;broadcast&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">count </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        count </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> count</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pack</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;Count=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> count </span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        form </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        form</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> items</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 12 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> mode</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;broadcast&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/counter-broadcast.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/counter-global"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Mode / Broadcast / Global</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/counter-multicast"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Mode / Multicast »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/917fcb62.35b584b9.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/counter-broadcast.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/counter-global"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Mode / Broadcast / Global</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/counter-multicast"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Mode / Multicast »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/917fcb62.5fdef126.js"></script>
 </body>
 </html>
\ 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 1ec62786d7..6f203ac1f8 100644
--- a/docs/docs/examples/counter-global/index.html
+++ b/docs/docs/examples/counter-global/index.html
@@ -5,38 +5,36 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Mode / Broadcast / Global | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Mode / Broadcast / Global | H2O Wave"><meta data-react-helmet="true" name="description" content="Launch the server in broadcast mode to synchronize browser state across users. Global variables can be used to manage state."><meta data-react-helmet="true" property="og:description" content="Launch the server in broadcast mode to synchronize browser state across users. Global variables can be used to manage state."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/counter-global"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/counter-global"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/dceb90d2.36c09c0f.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/dceb90d2.f2ed4112.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Mode / Broadcast / Global</h1></header><div class="markdown"><p>Launch the server in broadcast mode to synchronize browser state across users. Global variables can be used to manage state.
-Open <code>/demo</code> in multiple browsers and watch them synchronize in realtime.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Mode / Broadcast / Global</h1></header><div class="markdown"><p>Launch the server in broadcast mode to synchronize browser state across users. Global variables can be used to manage state.
+Open <code>/demo</code> in multiple browsers and watch them synchronize in realtime.</p><div class="cover" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAABSCAYAAAC7Zl0HAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAyOjA5OjE0IFBNIFBEVKhCfrcAAAcISURBVHic7d1/TJT3HcDxN7BguFvAaFMkBkTTKSAYDxJElIIpE2KnbQGpA9TD/jHB6vyxIWhqrZ2VX+pEreI/hbWjiWLbKMLQOa9C1jBdAB0/MmA1CEETWEDkUMR79od6CdRV775QjuTzSi65PM9zz/N9cu88P3iSw0nTNA0h7OQ80QMQk5sEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCyc/s+dC/bt7AZLrCoNk81uMR48RNpyMqahmBQQvGdL12BWQyXSEhIZEZXl5jOhgxfu50dVFaenrMA7LrFDZoNks8k8wML69xOWPINZBQIgEJJRKQUCIBCSUSkFAiAQklEpBQ4nAB9ff3c/jQIX715gqWhC8mMXE1xcVFDA0NTfTQ7HaqsJCQYAMhwQZ6enqs04eGhjhaUEBszHIWh4WRkpzE1avfTuBIbedQAfX392Ncv44vvvgci8VCYFAQPd3dFBw5ws6MDH7qX+PLz88jJNhAXV2t3eu4e/cuxcVFz52XfeAARUWf8aqnJ7GxsXR0dLBj+3bq6+rs3t5PzaECOn78GLdu3eLtd97hfNkFCgtPUXahnNDQUK5e/ZYLZWUTPUSbHfnjYTRNw2vUX+7NZjNlZeeZO3cuRUXFfLh3Lzm5eVgsFs6eLZ2g0drOYQJ69OgRFeXleHh4kJGxExcXFwDc3Nz47dathIaG0t3dbV3+n9evk2pcT/jiMJb/MpqD+fk8fPgQgN7eXkKCDby/aZN1+cbGRkKCDXyyfz8AOdnZhAQbMJlMrE1JZnHYItatTaGttRWArMxMviwpAeC9DRtI2/gbm/epvq6OyspKUlLWEjT6GZSm8cEHe9iZmYmz85Ovwdd3FoB1PyYDhwmos7OT+/fvYzAYmDJlyoh5fn7+nDhZiDE1FYDm5ibS09Nob28nKTmZwMBASkr+zK6sTJu3m5uTQ2BgEOHh4TQ0NLB79y4AVry5wrpMVFQU8fEJAFRWVlqvZ0a/ampqrJ+xWCzk5eUybdo0jEbjD7ar0+tZuWoVCxcarNMqyisARkxzdHY9jR8PfX19AHh4TH3hskWfFTE8PMy+fR+zZOlSNE3jvQ2pmEwm2lpbmf7KKy+9XWOqkcTEdwFY824iLS0t9Pb2EhHxOr9OSuLLkhLWrltn/VK9vb2tMY3m6elpfX/u3DmamprI2rUbnV7/wnFcv3aNkydPMGfOHOLi4196/BPNYQJyd3cHoO9e3wuXbW5uwsXFhUVhYQA4OTkRvmQJ9fX1NDU1sTQi4qW3O2+en/W9j48PLS0tmM1mpk59fsgBAQEEBAT86DoHBgY4fvwYs2fPJi4u7oVjaGxsZNv2bej1eg4eOvyDI7Ajc5iAZs6ciU6vp662lqGhIVxdXa3zWltbOFVYSGjoIhJWr0bTNJycnEau4NkN2ujpTz1+/Pi5059df7ysxsZGvvn66+fOS0pOxtfXl9LSM/y3pwevGTPY/4ePAbh4sRKAffs+IjU11XpEa2tr4/1N6aBpFBw9ho+Pj03jmWgOE5CrqyuxMbF89dVZDubnsTMzC2dnZwYHBzl08CA1NTUsXx4DgL9/AB0dHXz33d+JiHgdi8VCdXUVAH5+89DpdAB0dNy2xlZXa/utuBNPYhx+NGyddvv27f97l/RGdDS+vr7c67sHQENDAw0NDSOWqa6qYlnUMhYuNNDZ2UF62kYGBgYoKDjK/PnzbR7jRHOYgAA2b97MtWv/oLS0lKqq6qenlH/T29tLZGQkb0RHA7DeaOTKlb/x4Z49rFy5iu+//w83b94kMjKS1177BQALFizgxo0bbEpPw8vLi+rqapvH8+yapqDgCPEJCbz11tvExMQQExPz4/uxZQubt2wZMS3j97/j8uXLXLz0V6ZPn86DBw9I27iR7u5uvL29Ka8op7yiHAAPdw+279hh83gngsPchQG4e3hQ/KfPWbNmDQB1dbXo9T9n69Zt5OblW09b/v7+fPrpCWbNmsWZM6dpbm4mKSmZA9k51nXt3fsRAQEB1NbW0traRlbWLpvHExcfT3R0NO3t7fylomJsdvKpgYEBOjs7gSdHtbLz562vS5cujum2xpVmh9zsT+z5mJhg4/G9OdQRSEw+EpBQIgEJJRKQUCIBCSUSkFAiAQklEpBQYldAbjodd7q6xnosYhzd6erC7ekzwrFk17OwqKhllJaelp93mUSe/bzLWHPSNPm/8cJ+cg0klEhAQokEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCiQQklPwP/AdkyB0kEsMAAAAASUVORK5CYII=)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">global</span><span class="token plain"> count</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        count </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> mode</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;broadcast&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">global</span><span class="token plain"> count</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        count </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pack</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;Count=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> count </span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        form </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        form</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> items</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 12 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> mode</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;broadcast&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/counter-global.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/meta-redirect"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Meta / Redirect</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/counter-broadcast"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Mode / Broadcast »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/dceb90d2.36c09c0f.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/counter-global.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/meta-redirect"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Meta / Redirect</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/counter-broadcast"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Mode / Broadcast »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/dceb90d2.f2ed4112.js"></script>
 </body>
 </html>
\ 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 7dbfd35c8d..48be116ad2 100644
--- a/docs/docs/examples/counter-multicast/index.html
+++ b/docs/docs/examples/counter-multicast/index.html
@@ -5,37 +5,35 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Mode / Multicast | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Mode / Multicast | H2O Wave"><meta data-react-helmet="true" name="description" content="Launch the server in multicast mode to synchronize browser state across a user&#x27;s clients."><meta data-react-helmet="true" property="og:description" content="Launch the server in multicast mode to synchronize browser state across a user&#x27;s clients."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/counter-multicast"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/counter-multicast"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/bd7ed1d7.0af32e81.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/bd7ed1d7.9faa1af2.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Mode / Multicast</h1></header><div class="markdown"><p>Launch the server in multicast mode to synchronize browser state across a user&#x27;s clients.
-Open <code>/demo</code> in multiple browsers and watch them synchronize in realtime.</p><div class="cover" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAABSCAYAAAC7Zl0HAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAyOjA5OjE0IFBNIFBEVKhCfrcAAAcISURBVHic7d1/TJT3HcDxN7BguFvAaFMkBkTTKSAYDxJElIIpE2KnbQGpA9TD/jHB6vyxIWhqrZ2VX+pEreI/hbWjiWLbKMLQOa9C1jBdAB0/MmA1CEETWEDkUMR79od6CdRV775QjuTzSi65PM9zz/N9cu88P3iSw0nTNA0h7OQ80QMQk5sEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCyc/s+dC/bt7AZLrCoNk81uMR48RNpyMqahmBQQvGdL12BWQyXSEhIZEZXl5jOhgxfu50dVFaenrMA7LrFDZoNks8k8wML69xOWPINZBQIgEJJRKQUCIBCSUSkFAiAQklEpBQ4nAB9ff3c/jQIX715gqWhC8mMXE1xcVFDA0NTfTQ7HaqsJCQYAMhwQZ6enqs04eGhjhaUEBszHIWh4WRkpzE1avfTuBIbedQAfX392Ncv44vvvgci8VCYFAQPd3dFBw5ws6MDH7qX+PLz88jJNhAXV2t3eu4e/cuxcVFz52XfeAARUWf8aqnJ7GxsXR0dLBj+3bq6+rs3t5PzaECOn78GLdu3eLtd97hfNkFCgtPUXahnNDQUK5e/ZYLZWUTPUSbHfnjYTRNw2vUX+7NZjNlZeeZO3cuRUXFfLh3Lzm5eVgsFs6eLZ2g0drOYQJ69OgRFeXleHh4kJGxExcXFwDc3Nz47dathIaG0t3dbV3+n9evk2pcT/jiMJb/MpqD+fk8fPgQgN7eXkKCDby/aZN1+cbGRkKCDXyyfz8AOdnZhAQbMJlMrE1JZnHYItatTaGttRWArMxMviwpAeC9DRtI2/gbm/epvq6OyspKUlLWEjT6GZSm8cEHe9iZmYmz85Ovwdd3FoB1PyYDhwmos7OT+/fvYzAYmDJlyoh5fn7+nDhZiDE1FYDm5ibS09Nob28nKTmZwMBASkr+zK6sTJu3m5uTQ2BgEOHh4TQ0NLB79y4AVry5wrpMVFQU8fEJAFRWVlqvZ0a/ampqrJ+xWCzk5eUybdo0jEbjD7ar0+tZuWoVCxcarNMqyisARkxzdHY9jR8PfX19AHh4TH3hskWfFTE8PMy+fR+zZOlSNE3jvQ2pmEwm2lpbmf7KKy+9XWOqkcTEdwFY824iLS0t9Pb2EhHxOr9OSuLLkhLWrltn/VK9vb2tMY3m6elpfX/u3DmamprI2rUbnV7/wnFcv3aNkydPMGfOHOLi4196/BPNYQJyd3cHoO9e3wuXbW5uwsXFhUVhYQA4OTkRvmQJ9fX1NDU1sTQi4qW3O2+en/W9j48PLS0tmM1mpk59fsgBAQEEBAT86DoHBgY4fvwYs2fPJi4u7oVjaGxsZNv2bej1eg4eOvyDI7Ajc5iAZs6ciU6vp662lqGhIVxdXa3zWltbOFVYSGjoIhJWr0bTNJycnEau4NkN2ujpTz1+/Pi5059df7ysxsZGvvn66+fOS0pOxtfXl9LSM/y3pwevGTPY/4ePAbh4sRKAffs+IjU11XpEa2tr4/1N6aBpFBw9ho+Pj03jmWgOE5CrqyuxMbF89dVZDubnsTMzC2dnZwYHBzl08CA1NTUsXx4DgL9/AB0dHXz33d+JiHgdi8VCdXUVAH5+89DpdAB0dNy2xlZXa/utuBNPYhx+NGyddvv27f97l/RGdDS+vr7c67sHQENDAw0NDSOWqa6qYlnUMhYuNNDZ2UF62kYGBgYoKDjK/PnzbR7jRHOYgAA2b97MtWv/oLS0lKqq6qenlH/T29tLZGQkb0RHA7DeaOTKlb/x4Z49rFy5iu+//w83b94kMjKS1177BQALFizgxo0bbEpPw8vLi+rqapvH8+yapqDgCPEJCbz11tvExMQQExPz4/uxZQubt2wZMS3j97/j8uXLXLz0V6ZPn86DBw9I27iR7u5uvL29Ka8op7yiHAAPdw+279hh83gngsPchQG4e3hQ/KfPWbNmDQB1dbXo9T9n69Zt5OblW09b/v7+fPrpCWbNmsWZM6dpbm4mKSmZA9k51nXt3fsRAQEB1NbW0traRlbWLpvHExcfT3R0NO3t7fylomJsdvKpgYEBOjs7gSdHtbLz562vS5cujum2xpVmh9zsT+z5mJhg4/G9OdQRSEw+EpBQIgEJJRKQUCIBCSUSkFAiAQklEpBQYldAbjodd7q6xnosYhzd6erC7ekzwrFk17OwqKhllJaelp93mUSe/bzLWHPSNPm/8cJ+cg0klEhAQokEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCiQQklPwP/AdkyB0kEsMAAAAASUVORK5CYII=)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Mode / Multicast</h1></header><div class="markdown"><p>Launch the server in multicast mode to synchronize browser state across a user&#x27;s clients.
+Open <code>/demo</code> in multiple browsers and watch them synchronize in realtime.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">count </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        count </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> count</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> mode</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;multicast&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">count </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        count </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> count</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pack</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;Count=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> count </span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        form </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        form</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> items</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 12 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> mode</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;multicast&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/counter-multicast.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/counter-broadcast"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Mode / Broadcast</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/counter-unicast"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Mode / Unicast »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/bd7ed1d7.0af32e81.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/counter-multicast.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/counter-broadcast"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Mode / Broadcast</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/counter-unicast"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Mode / Unicast »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/bd7ed1d7.9faa1af2.js"></script>
 </body>
 </html>
\ 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 5501254951..fc007b1984 100644
--- a/docs/docs/examples/counter-unicast/index.html
+++ b/docs/docs/examples/counter-unicast/index.html
@@ -5,36 +5,34 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Mode / Unicast | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Mode / Unicast | H2O Wave"><meta data-react-helmet="true" name="description" content="Launch the server in unicast mode and use q.client to manage client-local state."><meta data-react-helmet="true" property="og:description" content="Launch the server in unicast mode and use q.client to manage client-local state."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/counter-unicast"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/counter-unicast"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/47b3e1f7.8e29a4af.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/47b3e1f7.ea95f335.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Mode / Unicast</h1></header><div class="markdown"><p>Launch the server in unicast mode and use <code>q.client</code> to manage client-local state.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Mode / Unicast</h1></header><div class="markdown"><p>Launch the server in unicast mode and use <code>q.client</code> to manage client-local state.</p><div class="cover" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAABSCAYAAAC7Zl0HAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAyOjA5OjE0IFBNIFBEVKhCfrcAAAcISURBVHic7d1/TJT3HcDxN7BguFvAaFMkBkTTKSAYDxJElIIpE2KnbQGpA9TD/jHB6vyxIWhqrZ2VX+pEreI/hbWjiWLbKMLQOa9C1jBdAB0/MmA1CEETWEDkUMR79od6CdRV775QjuTzSi65PM9zz/N9cu88P3iSw0nTNA0h7OQ80QMQk5sEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCyc/s+dC/bt7AZLrCoNk81uMR48RNpyMqahmBQQvGdL12BWQyXSEhIZEZXl5jOhgxfu50dVFaenrMA7LrFDZoNks8k8wML69xOWPINZBQIgEJJRKQUCIBCSUSkFAiAQklEpBQ4nAB9ff3c/jQIX715gqWhC8mMXE1xcVFDA0NTfTQ7HaqsJCQYAMhwQZ6enqs04eGhjhaUEBszHIWh4WRkpzE1avfTuBIbedQAfX392Ncv44vvvgci8VCYFAQPd3dFBw5ws6MDH7qX+PLz88jJNhAXV2t3eu4e/cuxcVFz52XfeAARUWf8aqnJ7GxsXR0dLBj+3bq6+rs3t5PzaECOn78GLdu3eLtd97hfNkFCgtPUXahnNDQUK5e/ZYLZWUTPUSbHfnjYTRNw2vUX+7NZjNlZeeZO3cuRUXFfLh3Lzm5eVgsFs6eLZ2g0drOYQJ69OgRFeXleHh4kJGxExcXFwDc3Nz47dathIaG0t3dbV3+n9evk2pcT/jiMJb/MpqD+fk8fPgQgN7eXkKCDby/aZN1+cbGRkKCDXyyfz8AOdnZhAQbMJlMrE1JZnHYItatTaGttRWArMxMviwpAeC9DRtI2/gbm/epvq6OyspKUlLWEjT6GZSm8cEHe9iZmYmz85Ovwdd3FoB1PyYDhwmos7OT+/fvYzAYmDJlyoh5fn7+nDhZiDE1FYDm5ibS09Nob28nKTmZwMBASkr+zK6sTJu3m5uTQ2BgEOHh4TQ0NLB79y4AVry5wrpMVFQU8fEJAFRWVlqvZ0a/ampqrJ+xWCzk5eUybdo0jEbjD7ar0+tZuWoVCxcarNMqyisARkxzdHY9jR8PfX19AHh4TH3hskWfFTE8PMy+fR+zZOlSNE3jvQ2pmEwm2lpbmf7KKy+9XWOqkcTEdwFY824iLS0t9Pb2EhHxOr9OSuLLkhLWrltn/VK9vb2tMY3m6elpfX/u3DmamprI2rUbnV7/wnFcv3aNkydPMGfOHOLi4196/BPNYQJyd3cHoO9e3wuXbW5uwsXFhUVhYQA4OTkRvmQJ9fX1NDU1sTQi4qW3O2+en/W9j48PLS0tmM1mpk59fsgBAQEEBAT86DoHBgY4fvwYs2fPJi4u7oVjaGxsZNv2bej1eg4eOvyDI7Ajc5iAZs6ciU6vp662lqGhIVxdXa3zWltbOFVYSGjoIhJWr0bTNJycnEau4NkN2ujpTz1+/Pi5059df7ysxsZGvvn66+fOS0pOxtfXl9LSM/y3pwevGTPY/4ePAbh4sRKAffs+IjU11XpEa2tr4/1N6aBpFBw9ho+Pj03jmWgOE5CrqyuxMbF89dVZDubnsTMzC2dnZwYHBzl08CA1NTUsXx4DgL9/AB0dHXz33d+JiHgdi8VCdXUVAH5+89DpdAB0dNy2xlZXa/utuBNPYhx+NGyddvv27f97l/RGdDS+vr7c67sHQENDAw0NDSOWqa6qYlnUMhYuNNDZ2UF62kYGBgYoKDjK/PnzbR7jRHOYgAA2b97MtWv/oLS0lKqq6qenlH/T29tLZGQkb0RHA7DeaOTKlb/x4Z49rFy5iu+//w83b94kMjKS1177BQALFizgxo0bbEpPw8vLi+rqapvH8+yapqDgCPEJCbz11tvExMQQExPz4/uxZQubt2wZMS3j97/j8uXLXLz0V6ZPn86DBw9I27iR7u5uvL29Ka8op7yiHAAPdw+279hh83gngsPchQG4e3hQ/KfPWbNmDQB1dbXo9T9n69Zt5OblW09b/v7+fPrpCWbNmsWZM6dpbm4mKSmZA9k51nXt3fsRAQEB1NbW0traRlbWLpvHExcfT3R0NO3t7fylomJsdvKpgYEBOjs7gSdHtbLz562vS5cujum2xpVmh9zsT+z5mJhg4/G9OdQRSEw+EpBQIgEJJRKQUCIBCSUSkFAiAQklEpBQYldAbjodd7q6xnosYhzd6erC7ekzwrFk17OwqKhllJaelp93mUSe/bzLWHPSNPm/8cJ+cg0klEhAQokEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCiQQklEhAQokEJJRIQEKJBCSUSEBCiQQklPwP/AdkyB0kEsMAAAAASUVORK5CYII=)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">count </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        count </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> count</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pack</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;Count=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> count </span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        form </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        form</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> items</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 12 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/counter-unicast.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/counter-multicast"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Mode / Multicast</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/graphics-primitives"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Graphics / Primitives »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/47b3e1f7.8e29a4af.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">count </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 -1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;Count=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">increment</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> count </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">label </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;Count=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/counter-unicast.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/counter-multicast"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Mode / Multicast</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/background"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Background Tasks »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/47b3e1f7.ea95f335.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/dashboard/index.html b/docs/docs/examples/dashboard/index.html
index 5f7ec1ad27..f940d4822e 100644
--- a/docs/docs/examples/dashboard/index.html
+++ b/docs/docs/examples/dashboard/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Dashboard | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Dashboard | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a dashboard using a multitude of cards and update them live."><meta data-react-helmet="true" property="og:description" content="Make a dashboard using a multitude of cards and update them live."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/dashboard"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/dashboard"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/0965cdf6.1b601d55.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/0965cdf6.047d8432.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Dashboard</h1></header><div class="markdown"><p>Make a dashboard using a multitude of cards and update them live.</p><div class="cover" style="background-image:url(/wave/assets/images/dashboard-24aea705724fd29993c5508a401b3b3c.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakePercent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Dashboard</h1></header><div class="markdown"><p>Make a dashboard using a multitude of cards and update them live.</p><div class="cover" style="background-image:url(/wave/assets/images/dashboard-24aea705724fd29993c5508a401b3b3c.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakePercent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">light_theme_colors </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$red $pink $purple $violet $indigo $blue $azure $cyan $teal $mint $green $amber $orange $tangerine&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">split</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">dark_theme_colors </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">split</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">_color_index </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">colors </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> dark_theme_colors</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -55,15 +55,15 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">create_dashboard</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">update_freq</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0.25</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/dashboard.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/issue-tracker"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Issue Tracker</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/stat-small"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Stat / Small »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/0965cdf6.1b601d55.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/0965cdf6.047d8432.js"></script>
 </body>
 </html>
\ 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
index c980063586..31035aa9ad 100644
--- a/docs/docs/examples/date-picker-trigger/index.html
+++ b/docs/docs/examples/date-picker-trigger/index.html
@@ -5,33 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Date Picker / Trigger | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Date Picker / Trigger | H2O Wave"><meta data-react-helmet="true" name="description" content="To handle live changes to a date picker, enable the trigger attribute."><meta data-react-helmet="true" property="og:description" content="To handle live changes to a date picker, enable the trigger attribute."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/date-picker-trigger"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/date-picker-trigger"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/fe4d4432.bb7ccc47.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/fe4d4432.25e593e1.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Date Picker / Trigger</h1></header><div class="markdown"><p>To handle live changes to a date picker, enable the <code>trigger</code> attribute.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Date Picker / Trigger</h1></header><div class="markdown"><p>To handle live changes to a date picker, enable the <code>trigger</code> attribute.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;date_trigger=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">date_trigger</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">date_picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date_trigger&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Pick a date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> trigger</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;Selected date: </span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">date_trigger</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">date_picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">value </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">date_trigger</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> __name__ </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;__main__&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/date-picker-trigger.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/date-picker"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Date Picker</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/color-picker"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Color Picker »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/fe4d4432.bb7ccc47.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;date_trigger=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">date_trigger</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">date_picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date_trigger&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Pick a date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> trigger</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;Selected date: </span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">date_trigger</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">date_picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">value </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">date_trigger</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/date-picker-trigger.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/date-picker"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Date Picker</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/color-picker"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Color Picker »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/fe4d4432.25e593e1.js"></script>
 </body>
 </html>
\ 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 b331fbe00e..1244aaf63f 100644
--- a/docs/docs/examples/date-picker/index.html
+++ b/docs/docs/examples/date-picker/index.html
@@ -5,33 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Date Picker | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Date Picker | H2O Wave"><meta data-react-helmet="true" name="description" content="Use date pickers to allow users to pick dates."><meta data-react-helmet="true" property="og:description" content="Use date pickers to allow users to pick dates."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/date-picker"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/date-picker"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/faf81df8.bd73165b.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/faf81df8.e782e9d4.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Date Picker</h1></header><div class="markdown"><p>Use date pickers to allow users to pick dates.</p><div class="cover" style="background-image:url(/wave/assets/images/date-picker-a98cee22ba2dc41a9e12a103dabc10e9.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Date Picker</h1></header><div class="markdown"><p>Use date pickers to allow users to pick dates.</p><div class="cover" style="background-image:url(/wave/assets/images/date-picker-a98cee22ba2dc41a9e12a103dabc10e9.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;date=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">date</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;date_placeholder=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">date_placeholder</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;date_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">date_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">date_picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Standard date picker&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2017-10-19&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">date_picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date_placeholder&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Date picker with placeholder&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> placeholder</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Pick a date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">date_picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Disabled date picker&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2017-10-19&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/date-picker.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/range-slider"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Range Slider</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/date-picker-trigger"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Date Picker / Trigger »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/faf81df8.bd73165b.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;date=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">date</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;date_placeholder=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">date_placeholder</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;date_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">date_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">date_picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Standard date picker&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2017-10-19&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">date_picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date_placeholder&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Date picker with placeholder&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> placeholder</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Pick a date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">date_picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Disabled date picker&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2017-10-19&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/date-picker.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/range-slider"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Range Slider</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/date-picker-trigger"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Date Picker / Trigger »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/faf81df8.e782e9d4.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/dropdown/index.html b/docs/docs/examples/dropdown/index.html
index 046be2cd99..4248d2cb22 100644
--- a/docs/docs/examples/dropdown/index.html
+++ b/docs/docs/examples/dropdown/index.html
@@ -5,34 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Dropdown | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Dropdown | H2O Wave"><meta data-react-helmet="true" name="description" content="Use dropdowns to allow users to choose between available choices."><meta data-react-helmet="true" property="og:description" content="Use dropdowns to allow users to choose between available choices."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/dropdown"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/dropdown"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/b140a32d.d088877e.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/b140a32d.fc920547.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Dropdown</h1></header><div class="markdown"><p>Use dropdowns to allow users to choose between available choices.</p><div class="cover" style="background-image:url(/wave/assets/images/dropdown-aa5530f33720d6851ade03079d16f40a.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Dropdown</h1></header><div class="markdown"><p>Use dropdowns to allow users to choose between available choices.</p><div class="cover" style="background-image:url(/wave/assets/images/dropdown-aa5530f33720d6851ade03079d16f40a.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">choices </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;A&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Option A&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;B&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Option B&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;C&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Option C&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;D&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Option D&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;dropdown=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">dropdown</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;dropdown_multi=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">dropdown_multi</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;dropdown_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">dropdown_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">dropdown</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;dropdown&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Pick one&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;B&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> required</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">choices</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">dropdown</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;dropdown_multi&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Pick multiple&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> values</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;B&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;D&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> required</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                        choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">choices</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">dropdown</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;dropdown_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Pick one (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;B&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">choices</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                        disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/dropdown.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/picker-selection"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Picker / Selection</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/choice-group"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Choice Group »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/b140a32d.d088877e.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;dropdown=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">dropdown</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;dropdown_multi=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">dropdown_multi</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;dropdown_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">dropdown_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">dropdown</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;dropdown&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Pick one&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;B&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> required</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">choices</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">dropdown</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;dropdown_multi&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Pick multiple&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> values</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;B&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;D&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> required</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                        choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">choices</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">dropdown</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;dropdown_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Pick one (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;B&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">choices</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                        disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/dropdown.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/picker-selection"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Picker / Selection</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/choice-group"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Choice Group »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/b140a32d.fc920547.js"></script>
 </body>
 </html>
\ 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 811603c4b1..7d84830b26 100644
--- a/docs/docs/examples/file-upload/index.html
+++ b/docs/docs/examples/file-upload/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / File Upload | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / File Upload | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a file upload component to allow users to upload files."><meta data-react-helmet="true" property="og:description" content="Use a file upload component to allow users to upload files."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/file-upload"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/file-upload"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/3aa768f5.5a32e9a7.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/3aa768f5.97cc5998.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / File Upload</h1></header><div class="markdown"><p>Use a file upload component to allow users to upload files.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / File Upload</h1></header><div class="markdown"><p>Use a file upload component to allow users to upload files.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">file_upload</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;file_upload&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Upload!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> multiple</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        file_extensions</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;csv&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;gz&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> max_file_size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> max_size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">15</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">file_upload</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;file_upload&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Upload!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> multiple</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                       file_extensions</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;csv&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;gz&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> max_file_size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> max_size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">15</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/file-upload.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/separator"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Separator</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/form-frame"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Frame »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/3aa768f5.5a32e9a7.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/3aa768f5.97cc5998.js"></script>
 </body>
 </html>
\ 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 98d4afccdc..f029b94c3c 100644
--- a/docs/docs/examples/form-frame-path/index.html
+++ b/docs/docs/examples/form-frame-path/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Frame / Path | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Frame / Path | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a frame component in a form card to display external web pages."><meta data-react-helmet="true" property="og:description" content="Use a frame component in a form card to display external web pages."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/form-frame-path"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/form-frame-path"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/77770fc3.c74574c6.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/77770fc3.15e246fd.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Frame / Path</h1></header><div class="markdown"><p>Use a frame component in a form card to display external web pages.</p><div class="cover" style="background-image:url(/wave/assets/images/form-frame-path-e829e3ff6a85bcc0e461e8c2cb505c32.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Frame / Path</h1></header><div class="markdown"><p>Use a frame component in a form card to display external web pages.</p><div class="cover" style="background-image:url(/wave/assets/images/form-frame-path-e829e3ff6a85bcc0e461e8c2cb505c32.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 6 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">frame</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">path</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;https://example.com&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;400px&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/form-frame-path.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/form-frame"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Frame</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/form-menu"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Menu »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/77770fc3.c74574c6.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/77770fc3.15e246fd.js"></script>
 </body>
 </html>
\ 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 158b9cd30a..5b767977f7 100644
--- a/docs/docs/examples/form-frame/index.html
+++ b/docs/docs/examples/form-frame/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Frame | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Frame | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a frame component in a form card to display HTML content inline."><meta data-react-helmet="true" property="og:description" content="Use a frame component in a form card to display HTML content inline."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/form-frame"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/form-frame"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/e4e8fb51.9c820d69.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/e4e8fb51.f6621ec9.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Frame</h1></header><div class="markdown"><p>Use a frame component in a form card to display HTML content inline.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Frame</h1></header><div class="markdown"><p>Use a frame component in a form card to display HTML content inline.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">html </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;!DOCTYPE html&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;html&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;body&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  &lt;h1&gt;Hello World!&lt;/h1&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;/body&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;/html&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">frame</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">html</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;100px&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/form-frame.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/file-upload"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / File Upload</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/form-frame-path"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Frame / Path »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/e4e8fb51.9c820d69.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/e4e8fb51.f6621ec9.js"></script>
 </body>
 </html>
\ 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 3bf3d1c4e1..2e440903cb 100644
--- a/docs/docs/examples/form-markup/index.html
+++ b/docs/docs/examples/form-markup/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Markup | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Markup | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a markup component to display formatted content using HTML."><meta data-react-helmet="true" property="og:description" content="Use a markup component to display formatted content using HTML."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/form-markup"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/form-markup"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/41849bc6.a90ccdc8.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/41849bc6.f2d0991e.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Markup</h1></header><div class="markdown"><p>Use a markup component to display formatted content using HTML.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Markup</h1></header><div class="markdown"><p>Use a markup component to display formatted content using HTML.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">menu </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;ol&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">    &lt;li&gt;Spam&lt;/li&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">    &lt;li&gt;Ham&lt;/li&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">    &lt;li&gt;Eggs&lt;/li&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;/ol&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markup</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">menu</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/form-markup.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/form-template"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Template</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/stepper"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Stepper »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/41849bc6.a90ccdc8.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markup</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">menu</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/form-markup.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/form-template"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Template</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/stepper"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Stepper »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/41849bc6.f2d0991e.js"></script>
 </body>
 </html>
\ 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 21ce34e841..c71bed6ffc 100644
--- a/docs/docs/examples/form-menu/index.html
+++ b/docs/docs/examples/form-menu/index.html
@@ -5,38 +5,36 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Menu | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Menu | H2O Wave"><meta data-react-helmet="true" name="description" content="Display context menus inside forms."><meta data-react-helmet="true" property="og:description" content="Display context menus inside forms."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/form-menu"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/form-menu"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/7ca2f128.5fa74d4e.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/7ca2f128.7cfe34ab.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Menu</h1></header><div class="markdown"><p>Display context menus inside forms.</p><div class="cover" style="background-image:url(/wave/assets/images/form-menu-d7388e52d93d99081c085e2d1baa003d.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> json</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Menu</h1></header><div class="markdown"><p>Display context menus inside forms.</p><div class="cover" style="background-image:url(/wave/assets/images/form-menu-d7388e52d93d99081c085e2d1baa003d.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> json</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Vega lite spec for a bar plot, defaults to linear scale.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">spec_linear_scale </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> json</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">dumps</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    mark</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;bar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    encoding</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">field</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;a&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;ordinal&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">field</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;b&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;quantitative&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Vega lite spec for a bar plot, log scaled.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">spec_log_scale </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> json</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">dumps</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    mark</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;bar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    encoding</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">field</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;a&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;ordinal&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">field</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;b&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;quantitative&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;log&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Data for our plot.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">plot_data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fields</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;a&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;b&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;A&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">28</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;B&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">55</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;C&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">43</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;D&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">91</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;E&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">81</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;F&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">53</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;G&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">19</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;H&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">87</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;I&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">52</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create a couple of context menu commands.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">log_scale_command </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;to_log_scale&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Log Scale&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;LineChart&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">linear_scale_command </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;to_linear_scale&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Linear Scale&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;LineChart&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_added</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Have we already added a plot?</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        example </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">to_log_scale</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Change to log scale</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Plot (Log Scale)&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">commands </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">linear_scale_command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">vega_visualization</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">specification </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> spec_log_scale</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Change to linear scale</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Plot (Linear Scale)&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">commands </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">log_scale_command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">vega_visualization</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">specification </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> spec_linear_scale</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Add a new plot</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 8&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Plot (Linear Scale)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> commands</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">log_scale_command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">vega_visualization</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">specification</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">spec_linear_scale</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;300px&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Flag to indicate that we&#x27;ve added a plot</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_added </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/form-menu.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/form-frame-path"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Frame / Path</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/form-template"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Template »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/7ca2f128.5fa74d4e.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_added</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Have we already added a plot?</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        example </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">to_log_scale</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Change to log scale</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Plot (Log Scale)&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">commands </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">linear_scale_command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">vega_visualization</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">specification </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> spec_log_scale</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Change to linear scale</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Plot (Linear Scale)&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">commands </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">log_scale_command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            example</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">vega_visualization</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">specification </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> spec_linear_scale</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Add a new plot</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 8&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Plot (Linear Scale)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> commands</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">log_scale_command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">vega_visualization</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">specification</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">spec_linear_scale</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;300px&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Flag to indicate that we&#x27;ve added a plot</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_added </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/form-menu.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/form-frame-path"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Frame / Path</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/form-template"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Template »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/7ca2f128.7cfe34ab.js"></script>
 </body>
 </html>
\ 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 1d65cf71d0..f5b0b5b37e 100644
--- a/docs/docs/examples/form-template/index.html
+++ b/docs/docs/examples/form-template/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Template | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Template | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a template component to render dynamic content using a HTML template."><meta data-react-helmet="true" property="og:description" content="Use a template component to render dynamic content using a HTML template."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/form-template"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/form-template"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/a9331674.e034ee0a.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/a9331674.965a7491.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Template</h1></header><div class="markdown"><p>Use a template component to render dynamic content using a HTML template.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Template</h1></header><div class="markdown"><p>Use a template component to render dynamic content using a HTML template.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">drop</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">menu </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;ol&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">{{#each dishes}}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;li&gt;&lt;strong&gt;{{name}}&lt;/strong&gt; costs {{price}}&lt;/li&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">{{/each}}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;/ol</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">c </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;template_example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">template</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">menu</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">pack</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">dishes</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> price</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$2.00&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> price</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$3.45&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> price</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$1.75&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/form-template.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/form-menu"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Menu</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/form-markup"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Markup »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/a9331674.e034ee0a.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/a9331674.965a7491.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/form/index.html b/docs/docs/examples/form/index.html
index ac48df14c2..99b2f77964 100644
--- a/docs/docs/examples/form/index.html
+++ b/docs/docs/examples/form/index.html
@@ -5,36 +5,34 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a form to collect data or show textual information."><meta data-react-helmet="true" property="og:description" content="Use a form to collect data or show textual information."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/form"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/form"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/883d6399.c42cc20c.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/883d6399.a175ce7a.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form</h1></header><div class="markdown"><p>Use a form to collect data or show textual information.</p><div class="cover" style="background-image:url(/wave/assets/images/form-b0f5fccd418b3d5e40f559cf1d60cb46.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form</h1></header><div class="markdown"><p>Use a form to collect data or show textual information.</p><div class="cover" style="background-image:url(/wave/assets/images/form-b0f5fccd418b3d5e40f559cf1d60cb46.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">html </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;ol&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">    &lt;li&gt;Spam&lt;/li&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">    &lt;li&gt;Ham&lt;/li&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">    &lt;li&gt;Eggs&lt;/li&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;/ol&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">menu </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;ol&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">{{#each dishes}}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;li&gt;&lt;strong&gt;{{name}}&lt;/strong&gt; costs {{price}}&lt;/li&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">{{/each}}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;/ol</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">spec </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">{</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  &quot;description&quot;: &quot;A simple bar plot with embedded data.&quot;,</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  &quot;mark&quot;: &quot;bar&quot;,</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  &quot;encoding&quot;: {</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">    &quot;x&quot;: {&quot;field&quot;: &quot;a&quot;, &quot;type&quot;: &quot;ordinal&quot;},</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">    &quot;y&quot;: {&quot;field&quot;: &quot;b&quot;, &quot;type&quot;: &quot;quantitative&quot;}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  }</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Generate random datum between 1 and 100</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">rnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">randint</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Extra-large text, for headings.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Large text, for sub-headings.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_m</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Body text, for paragraphs and other content.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_s</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Small text, for small print.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Extra-small text, for really small print.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">separator</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;A separator sections forms&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;A progress bar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;A progress bar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">message_bar</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;success&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Message bar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Textbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">label</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Checkboxes&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checkbox1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;A checkbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checkbox1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Another checkbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checkbox1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Yet another checkbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">toggle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;toggle&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Toggle&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice_group</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;choice_group&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Choice group&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Egg&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Bacon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checklist</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checklist&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Checklist&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Egg&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Bacon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">dropdown</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;dropdown&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Dropdown&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Egg&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Bacon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">dropdown</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;dropdown&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Multi-valued Dropdown&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> values</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Egg&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Bacon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">combobox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;combobox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Combobox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Choice 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Choice 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Choice 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">range_slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;range_slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Range slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">99</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spinbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;spinbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spinbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">date_picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date_picker&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Date picker&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">color_picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;color_picker&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Color picker&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buttons</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;primary_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Primary&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;standard_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Standard&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;standard_disabled_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Standard&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">file_upload</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;file_upload&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;File upload&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;table&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> columns</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;col1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Column 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;col2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Column 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;row1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cells</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Text A&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Text B&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;row2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cells</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Text C&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Text D&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;row3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cells</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Text E&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Text F&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">link</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Link&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tabs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;tabs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;email&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Mail&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Mail&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;events&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Events&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Calendar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">expander</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;expander&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Expander&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">frame</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">path</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;https://example.com&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markup</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">html</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">template</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">menu</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">pack</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">dishes</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> price</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$2.00&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> price</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$3.45&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> price</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$1.75&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;picker&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Picker&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;choice1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Choice 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;choice2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Choice 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;choice3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Choice 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">stepper</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;stepper&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;MailLowImportance&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;TaskManagerMirrored&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Cafe&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">visualization</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fields</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;product price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">vega_visualization</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            specification</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">spec</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fields</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;a&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;b&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;A&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;B&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;C&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;D&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;E&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;F&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;G&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;H&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;I&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/form.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/layout-size"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Layout / Size</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/text"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Text »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/883d6399.c42cc20c.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Extra-large text, for headings.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Large text, for sub-headings.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_m</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Body text, for paragraphs and other content.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_s</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Small text, for small print.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Extra-small text, for really small print.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">separator</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;A separator sections forms&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;A progress bar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;A progress bar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">message_bar</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;success&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Message bar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Textbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">label</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Checkboxes&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checkbox1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;A checkbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checkbox1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Another checkbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checkbox1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Yet another checkbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">toggle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;toggle&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Toggle&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice_group</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;choice_group&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Choice group&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Egg&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Bacon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checklist</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;checklist&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Checklist&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Egg&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Bacon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">dropdown</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;dropdown&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Dropdown&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Egg&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Bacon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">dropdown</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;dropdown&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Multi-valued Dropdown&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> values</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Egg&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Bacon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">combobox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;combobox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Combobox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Choice 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Choice 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Choice 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">range_slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;range_slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Range slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">99</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spinbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;spinbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spinbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">date_picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date_picker&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Date picker&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">color_picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;color_picker&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Color picker&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buttons</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;primary_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Primary&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;standard_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Standard&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;standard_disabled_button&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Standard&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">file_upload</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;file_upload&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;File upload&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;table&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> columns</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;col1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Column 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;col2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Column 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;row1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cells</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Text A&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Text B&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;row2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cells</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Text C&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Text D&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;row3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cells</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Text E&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Text F&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">link</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Link&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tabs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;tabs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;email&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Mail&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Mail&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;events&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Events&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Calendar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">expander</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;expander&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Expander&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">frame</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">path</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;https://example.com&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markup</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">html</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">template</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">menu</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">pack</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">dishes</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> price</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$2.00&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> price</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$3.45&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> price</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$1.75&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;picker&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Picker&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;choice1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Choice 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;choice2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Choice 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;choice3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Choice 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">stepper</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;stepper&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;MailLowImportance&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;TaskManagerMirrored&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Cafe&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">visualization</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fields</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;product price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">vega_visualization</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            specification</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">spec</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fields</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;a&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;b&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;A&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;B&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;C&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;D&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;E&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;F&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;G&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;H&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;I&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rnd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/form.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/layout-size"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Layout / Size</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/text"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Text »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/883d6399.a175ce7a.js"></script>
 </body>
 </html>
\ 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 400d2cdc40..34b04e55ba 100644
--- a/docs/docs/examples/frame-path/index.html
+++ b/docs/docs/examples/frame-path/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Frame / Path | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Frame / Path | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a frame card to display external web pages."><meta data-react-helmet="true" property="og:description" content="Use a frame card to display external web pages."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/frame-path"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/frame-path"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/746a1919.1c4437c0.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/746a1919.859c4175.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Frame / Path</h1></header><div class="markdown"><p>Use a frame card to display external web pages.</p><div class="cover" style="background-image:url(/wave/assets/images/frame-path-0db07ced544338ad72aef8fed53c931d.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Frame / Path</h1></header><div class="markdown"><p>Use a frame card to display external web pages.</p><div class="cover" style="background-image:url(/wave/assets/images/frame-path-0db07ced544338ad72aef8fed53c931d.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">frame_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 6 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    path</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;https://example.com&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/frame-path.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/frame"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Frame</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/template"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Template »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/746a1919.1c4437c0.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/746a1919.859c4175.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/frame/index.html b/docs/docs/examples/frame/index.html
index 9aaf0c466e..bfd1070b6f 100644
--- a/docs/docs/examples/frame/index.html
+++ b/docs/docs/examples/frame/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Frame | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Frame | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a frame card to display HTML content."><meta data-react-helmet="true" property="og:description" content="Use a frame card to display HTML content."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/frame"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/frame"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/b1e50d5a.08a7c151.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/b1e50d5a.81243680.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Frame</h1></header><div class="markdown"><p>Use a frame card to display HTML content.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Frame</h1></header><div class="markdown"><p>Use a frame card to display HTML content.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">html </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;!DOCTYPE html&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;html&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;body&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  &lt;h1&gt;Hello World!&lt;/h1&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;/body&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;/html&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">frame_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">html</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/frame.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/image"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Image</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/frame-path"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Frame / Path »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/b1e50d5a.08a7c151.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/b1e50d5a.81243680.js"></script>
 </body>
 </html>
\ 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 02f324e364..4d372d0132 100644
--- a/docs/docs/examples/glider-gun/index.html
+++ b/docs/docs/examples/glider-gun/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Graphics / Glider Gun | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Graphics / Glider Gun | H2O Wave"><meta data-react-helmet="true" name="description" content="Use the graphics API to play Conway&#x27;s Game of Life - Gosper&#x27;s Glider Gun"><meta data-react-helmet="true" property="og:description" content="Use the graphics API to play Conway&#x27;s Game of Life - Gosper&#x27;s Glider Gun"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/glider-gun"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/glider-gun"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/18fdb351.682c7b8a.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/18fdb351.95cf7208.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Graphics / Glider Gun</h1></header><div class="markdown"><p>Use the graphics API to play Conway&#x27;s Game of Life - Gosper&#x27;s Glider Gun
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Graphics / Glider Gun</h1></header><div class="markdown"><p>Use the graphics API to play Conway&#x27;s Game of Life - Gosper&#x27;s Glider Gun
 <a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life" target="_blank" rel="noopener noreferrer">https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life</a></p><div class="cover" style="background-image:url(/wave/assets/images/glider-gun-8acc444425a295f814222e258d6ca3e3.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> copy </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> deepcopy</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> graphics </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> g</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">get_neighbors</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> col</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    neighbors </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> r </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">row </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> row </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> c </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">col </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> col </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    neighbors</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">remove</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> col</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> neighbors</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -51,15 +51,15 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">make_glider_gun</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">24</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">22</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">24</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">12</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">13</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">21</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">34</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">35</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">11</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">15</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">21</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">34</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">35</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">4</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">4</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">4</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">4</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">16</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">4</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">4</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">21</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">14</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">16</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">17</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">22</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">24</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">6</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">6</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">16</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">6</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">24</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">7</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">11</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">7</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">15</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">8</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">12</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">8</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">13</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">render</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">make_glider_gun</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/glider-gun.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/graphics-hilbert"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Graphics / Hilbert</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/api/index"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Package h2o_wave »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/18fdb351.682c7b8a.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/18fdb351.95cf7208.js"></script>
 </body>
 </html>
\ 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 f3f74fe1ff..ff5ec98802 100644
--- a/docs/docs/examples/graphics-clock/index.html
+++ b/docs/docs/examples/graphics-clock/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Graphics / Clock | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Graphics / Clock | H2O Wave"><meta data-react-helmet="true" name="description" content="Use the graphics API to make a clock."><meta data-react-helmet="true" property="og:description" content="Use the graphics API to make a clock."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/graphics-clock"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/graphics-clock"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/6ce0e474.25ff7e23.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/6ce0e474.ce87120c.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Graphics / Clock</h1></header><div class="markdown"><p>Use the graphics API to make a clock.
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Graphics / Clock</h1></header><div class="markdown"><p>Use the graphics API to make a clock.
 Source: <a href="https://codepen.io/dudleystorey/pen/HLBki" target="_blank" rel="noopener noreferrer">https://codepen.io/dudleystorey/pen/HLBki</a></p><div class="cover" style="background-image:url(/wave/assets/images/graphics-clock-fb82cce5ac3fca365e9cd43ba116c948.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> datetime</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> graphics </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> g</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">graphics_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> view_box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;0 0 100 100&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;100%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;100%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    stage</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">stage</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        face</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">circle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">cx</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;50&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cy</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;50&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> r</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;45&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> fill</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#111&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stroke_width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2px&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stroke</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#f55&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    scene</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">scene</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        hour</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">rect</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;47.5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;12.5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;40&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rx</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2.5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> fill</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#333&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stroke</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#555&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">rect</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;48.5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;12.5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;40&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rx</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> fill</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#333&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stroke</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#555&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        sec</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">line</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x1</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;50&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y1</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;50&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x2</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;50&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y2</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;16&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stroke</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#f55&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stroke_width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1px&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -26,15 +26,15 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">rotate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">deg</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;rotate(</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">deg</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> 50 50)&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">scene </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">scene</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">while</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    now </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> datetime</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">datetime</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">now</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">draw</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">scene</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">hour</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> transform</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">rotate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">now</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">hour </span><span class="token operator" style="color:rgb(137, 221, 255)">%</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">12</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> now</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">minute </span><span class="token operator" style="color:rgb(137, 221, 255)">/</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">draw</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">scene</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> transform</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">rotate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">6</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> now</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">minute</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">draw</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">scene</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sec</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> transform</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">rotate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">6</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> now</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">second</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-clock.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/graphics-spline"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Graphics / Spline</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/graphics-path"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Graphics / Path »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/6ce0e474.25ff7e23.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/6ce0e474.ce87120c.js"></script>
 </body>
 </html>
\ 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 cf406876a2..e896828135 100644
--- a/docs/docs/examples/graphics-hilbert/index.html
+++ b/docs/docs/examples/graphics-hilbert/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Graphics / Hilbert | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Graphics / Hilbert | H2O Wave"><meta data-react-helmet="true" name="description" content="Use turtle graphics recursively to draw Hilbert curves."><meta data-react-helmet="true" property="og:description" content="Use turtle graphics recursively to draw Hilbert curves."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/graphics-hilbert"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/graphics-hilbert"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/f349fb86.2a5c5652.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/f349fb86.689afca8.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Graphics / Hilbert</h1></header><div class="markdown"><p>Use turtle graphics recursively to draw Hilbert curves.</p><div class="cover" style="background-image:url(/wave/assets/images/graphics-hilbert-0b77a235731e83c53e6167b922a11f1c.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> graphics </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> g</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Graphics / Hilbert</h1></header><div class="markdown"><p>Use turtle graphics recursively to draw Hilbert curves.</p><div class="cover" style="background-image:url(/wave/assets/images/graphics-hilbert-0b77a235731e83c53e6167b922a11f1c.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> graphics </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> g</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">hilbert</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">Turtle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">float</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> depth</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">int</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> reverse</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">False</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># recursive</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    angle </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">90</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> reverse </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">90</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> depth </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">width</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">r</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">angle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">width</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">r</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">angle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">width</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -27,20 +27,18 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">make_hilbert_curve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">width</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">float</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> depth</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">int</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    t </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">turtle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">pd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    hilbert</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> width</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> depth</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">d</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    hilbert_curve </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> make_hilbert_curve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">300</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">depth </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    hilbert_curve </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> make_hilbert_curve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">300</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">depth </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;curve&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">graphics_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 6&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> view_box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;0 0 300 300&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;100%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;100%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            scene</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">scene</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                hilbert_curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">d</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">hilbert_curve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> fill</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;none&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stroke</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#333&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 7 4 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;depth&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Play with this Hilbert curve!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">6</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> trigger</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">draw</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;curve&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">scene</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">hilbert_curve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> d</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">hilbert_curve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-hilbert.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/graphics-turtle"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Graphics / Turtle</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/glider-gun"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Graphics / Glider Gun »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/f349fb86.2a5c5652.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-hilbert.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/graphics-turtle"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Graphics / Turtle</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/glider-gun"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Graphics / Glider Gun »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/f349fb86.689afca8.js"></script>
 </body>
 </html>
\ 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 2e2b8e16af..230b91fa12 100644
--- a/docs/docs/examples/graphics-path/index.html
+++ b/docs/docs/examples/graphics-path/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Graphics / Path | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Graphics / Path | H2O Wave"><meta data-react-helmet="true" name="description" content="Use the graphics API to draw a red square."><meta data-react-helmet="true" property="og:description" content="Use the graphics API to draw a red square."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/graphics-path"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/graphics-path"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/7ecd2c5c.7cf98df3.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/7ecd2c5c.9a5da8e4.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Graphics / Path</h1></header><div class="markdown"><p>Use the graphics API to draw a red square.</p><div class="cover" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARUAAAD8CAYAAABZ0jAcAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAyOjA3OjQ5IFBNIFBEVCumBS8AAANUSURBVHic7daxDcJQFARBY1GxY4ggpmQ/imClL6yZCi5a3W1mZgOI7KsHANciKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAKn76gFXcL4/2/n6rJ7Bj/bnse2PY/WMv+epAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAqdvMzOoRwHV4KkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVJfkOkP8d6gjyUAAAAASUVORK5CYII=)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> graphics </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> g</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Graphics / Path</h1></header><div class="markdown"><p>Use the graphics API to draw a red square.</p><div class="cover" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARUAAAD8CAYAAABZ0jAcAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAyOjA3OjQ5IFBNIFBEVCumBS8AAANUSURBVHic7daxDcJQFARBY1GxY4ggpmQ/imClL6yZCi5a3W1mZgOI7KsHANciKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAKn76gFXcL4/2/n6rJ7Bj/bnse2PY/WMv+epAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAqdvMzOoRwHV4KkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVJfkOkP8d6gjyUAAAAASUVORK5CYII=)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> graphics </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> g</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Use relative coords to draw a square, sort of like Python&#x27;s turtle package.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">red_square </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">p</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">m</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">25</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">25</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">h</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">h</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">z</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fill</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;red&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">graphics_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> view_box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;0 0 100 100&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;100%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;100%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    scene</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">scene</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">foo</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">red_square</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-path.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/graphics-clock"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Graphics / Clock</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/graphics-turtle"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Graphics / Turtle »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/7ecd2c5c.7cf98df3.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/7ecd2c5c.9a5da8e4.js"></script>
 </body>
 </html>
\ 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 b6035586a3..6e387bfc7f 100644
--- a/docs/docs/examples/graphics-primitives/index.html
+++ b/docs/docs/examples/graphics-primitives/index.html
@@ -5,35 +5,35 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Graphics / Primitives | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Graphics / Primitives | H2O Wave"><meta data-react-helmet="true" name="description" content="Use the graphics module to render and update shapes."><meta data-react-helmet="true" property="og:description" content="Use the graphics module to render and update shapes."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/graphics-primitives"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/graphics-primitives"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/8954e356.7546d395.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/8954e356.31b01aa7.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Graphics / Primitives</h1></header><div class="markdown"><p>Use the graphics module to render and update shapes.</p><div class="cover" style="background-image:url(/wave/assets/images/graphics-primitives-069da2917a0f9226163992fa997d7064.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> graphics </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> g</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Graphics / Primitives</h1></header><div class="markdown"><p>Use the graphics module to render and update shapes.</p><div class="cover" style="background-image:url(/wave/assets/images/graphics-primitives-069da2917a0f9226163992fa997d7064.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> graphics </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> g</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create some shapes</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">arc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">arc</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">r1</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">25</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> r2</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> a1</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">90</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> a2</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">180</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">circle </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">circle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">cx</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">25</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cy</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">25</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> r</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">25</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">ellipse </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">ellipse</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">cx</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">25</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cy</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">25</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rx</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">25</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ry</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">image </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">image</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> href</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;https://www.python.org/static/community_logos/python-powered-h-140x182.png&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">line </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">line</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x1</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y1</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x2</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y2</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">path </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">d</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;M 0,0 L 50,50 L 50,0 L 0,50 z&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">path2 </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">d</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">p</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">M</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">L</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">L</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">L</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">z</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">d</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># same effect as above, but programmable.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">path3 </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">p</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">M</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">L</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">L</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">L</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">z</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># same effect as above, but a tad more concise.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">polygon </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">polygon</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">points</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;0,0 50,50 50,0 0,50&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">polyline </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">polyline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">points</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;0,0 50,50 50,0 0,50&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">rect </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">rect</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">rounded_rect </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">rect</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rx</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">text </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">48</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Z&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> font_size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;4em&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Collect &#x27;em all</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">shapes </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">arc</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> circle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ellipse</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> image</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> line</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> path2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> path3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> polygon</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> polyline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rect</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rounded_rect</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Apply fill/stroke for each shape</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> shape </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> shapes</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    shape</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">fill </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;none&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">type_of</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">shape</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;polyline&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;crimson&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    shape</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">stroke </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;darkred&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    shape</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">stroke_width </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Lay out shapes vertically</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">y </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> shape </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> shapes</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    shape</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">transform </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;translate(10,</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">y</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">)&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    y </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">60</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Add shapes to the graphics card</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">graphics_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> view_box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;0 0 70 800&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;100%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;100%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    stage</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">stage</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        arc</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">arc</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        circle</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">circle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ellipse</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ellipse</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        image</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">image</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        line</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">line</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        path</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        path2</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">path2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        path3</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">path3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        polygon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">polygon</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        polyline</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">polyline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        rect</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">rect</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        rounded_rect</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">rounded_rect</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-primitives.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/counter-unicast"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Mode / Unicast</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/graphics-spline"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Graphics / Spline »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/8954e356.7546d395.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-primitives.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/site-async"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Site / Async</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/graphics-spline"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Graphics / Spline »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/8954e356.31b01aa7.js"></script>
 </body>
 </html>
\ 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 c38ec3a6f1..8e1c51a2ba 100644
--- a/docs/docs/examples/graphics-spline/index.html
+++ b/docs/docs/examples/graphics-spline/index.html
@@ -5,34 +5,34 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Graphics / Spline | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Graphics / Spline | H2O Wave"><meta data-react-helmet="true" name="description" content="Use the graphics module to render splines."><meta data-react-helmet="true" property="og:description" content="Use the graphics module to render splines."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/graphics-spline"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/graphics-spline"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/b18fb770.4af7a823.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/b18fb770.7856e763.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Graphics / Spline</h1></header><div class="markdown"><p>Use the graphics module to render splines.</p><div class="cover" style="background-image:url(/wave/assets/images/graphics-spline-76e8a919798c7e38711618ef9b414f78.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> graphics </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> g</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Graphics / Spline</h1></header><div class="markdown"><p>Use the graphics module to render splines.</p><div class="cover" style="background-image:url(/wave/assets/images/graphics-spline-76e8a919798c7e38711618ef9b414f78.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> graphics </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> g</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">x </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">i </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">y </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token number" style="color:rgb(247, 140, 108)">88</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">116</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">128</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">126</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">128</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">118</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">108</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">121</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">120</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">99</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">113</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">117</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">103</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">98</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">90</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">104</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">98</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">82</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">102</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">104</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">89</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">87</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">69</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token number" style="color:rgb(247, 140, 108)">88</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">97</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">91</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">105</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">98</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">86</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">90</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">107</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">97</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">107</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">108</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">128</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">144</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">148</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">126</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">106</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">89</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">99</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">78</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">70</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">69</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">64</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">45</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">29</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">27</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">38</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">y0 </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">randint</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> v </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">line_style </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fill</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;none&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stroke</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;crimson&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stroke_width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">4</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">area_style </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fill</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;crimson&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">splines </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Lines</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">line_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># same as curve=&#x27;linear&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;basis&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">line_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;basis-closed&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">line_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;basis-open&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">line_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cardinal&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">line_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cardinal-closed&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">line_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cardinal-open&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">line_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;smooth&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">line_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;smooth-closed&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">line_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;smooth-open&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">line_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;linear&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">line_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;linear-closed&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">line_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;monotone-x&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">line_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;monotone-y&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">line_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;natural&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">line_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">line_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step-after&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">line_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step-before&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">line_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Areas</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">area_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># same as curve=&#x27;linear&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;basis&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">area_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;basis&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">area_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;basis-open&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">area_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cardinal&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">area_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cardinal&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">area_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cardinal-open&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">area_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;smooth&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">area_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;smooth&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">area_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;smooth-open&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">area_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;linear&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">area_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;linear&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">area_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;monotone-x&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">area_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;monotone-y&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">area_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;natural&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">area_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">area_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step-after&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">area_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">y0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step-before&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain">area_style</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> col </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> spline </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> splines</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;spline_</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">col</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">_</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">row</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">graphics_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">col</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> </span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">row</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> 3 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> view_box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;0 0 1000 150&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;100%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;100%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        stage</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">stage</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">curve </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">40</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> font_size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">40</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            spline</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">spline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    col </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> col </span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">11</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> col </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> row </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-spline.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/graphics-primitives"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Graphics / Primitives</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/graphics-clock"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Graphics / Clock »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/b18fb770.4af7a823.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/b18fb770.7856e763.js"></script>
 </body>
 </html>
\ 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 85ed46e55b..a59098c304 100644
--- a/docs/docs/examples/graphics-turtle/index.html
+++ b/docs/docs/examples/graphics-turtle/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Graphics / Turtle | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Graphics / Turtle | H2O Wave"><meta data-react-helmet="true" name="description" content="Use turtle graphics to draw paths."><meta data-react-helmet="true" property="og:description" content="Use turtle graphics to draw paths."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/graphics-turtle"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/graphics-turtle"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/9363aca1.0a0bc3a7.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/9363aca1.ce054208.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Graphics / Turtle</h1></header><div class="markdown"><p>Use turtle graphics to draw paths.
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Graphics / Turtle</h1></header><div class="markdown"><p>Use turtle graphics to draw paths.
 Original example: <a href="https://docs.python.org/3/library/turtle.html" target="_blank" rel="noopener noreferrer">https://docs.python.org/3/library/turtle.html</a></p><div class="cover" style="background-image:url(/wave/assets/images/graphics-turtle-bf00fb61c0569a86ca32908a60485b91.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> graphics </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> g</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">t </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">turtle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">r</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">90</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">pd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">36</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">200</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">170</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">spirograph </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">pu</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">stroke</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;red&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> fill</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;yellow&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">graphics_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> view_box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;0 0 220 220&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;100%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;100%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    scene</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">scene</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">foo</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">spirograph</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-turtle.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/graphics-path"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Graphics / Path</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/graphics-hilbert"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Graphics / Hilbert »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/9363aca1.0a0bc3a7.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/9363aca1.ce054208.js"></script>
 </body>
 </html>
\ 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 4111aedf6b..1e332db49d 100644
--- a/docs/docs/examples/hash-routing/index.html
+++ b/docs/docs/examples/hash-routing/index.html
@@ -5,33 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Routing | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Routing | H2O Wave"><meta data-react-helmet="true" name="description" content="Use the browser&#x27;s location hash for routing using URLs."><meta data-react-helmet="true" property="og:description" content="Use the browser&#x27;s location hash for routing using URLs."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/hash-routing"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/hash-routing"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/f132454a.72aa0b8b.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/f132454a.996a8617.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Routing</h1></header><div class="markdown"><p>Use the browser&#x27;s <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash" target="_blank" rel="noopener noreferrer">location hash</a> for routing using URLs.</p><p>The location hash can be accessed using <code>q.args[&#x27;#&#x27;]</code>.</p><div class="cover" style="background-image:url(/wave/assets/images/hash-routing-816838345c1b3e01e3fe1664c336f3d6.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Routing</h1></header><div class="markdown"><p>Use the browser&#x27;s <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash" target="_blank" rel="noopener noreferrer">location hash</a> for routing using URLs.</p><p>The location hash can be accessed using <code>q.args[&#x27;#&#x27;]</code>.</p><div class="cover" style="background-image:url(/wave/assets/images/hash-routing-816838345c1b3e01e3fe1664c336f3d6.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        blurb </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;blurb&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu/spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Sorry, we&#x27;re out of spam!&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu/ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Sorry, we&#x27;re out of ham!&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu/eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Sorry, we&#x27;re out of eggs!&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;about&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Everything here is gluten-free!&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;nav&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Links!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;[Spam](#menu/spam) | [Ham](#menu/ham) | [Eggs](#menu/eggs) | [About](#about)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;blurb&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 2 4 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Store&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Welcome to our store!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/hash-routing.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/header"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Header</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/toolbar-routing"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Routing / Toolbar »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/f132454a.72aa0b8b.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        blurb </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;blurb&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu/spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Sorry, we&#x27;re out of spam!&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu/ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Sorry, we&#x27;re out of ham!&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu/eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Sorry, we&#x27;re out of eggs!&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;about&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Everything here is gluten-free!&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;nav&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Links!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;[Spam](#menu/spam) | [Ham](#menu/ham) | [Eggs](#menu/eggs) | [About](#about)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;blurb&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 2 4 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Store&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Welcome to our store!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/hash-routing.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/header"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Header</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/toolbar-routing"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Routing / Toolbar »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/f132454a.996a8617.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/header/index.html b/docs/docs/examples/header/index.html
index c0ff21c5a0..0eb9ef417b 100644
--- a/docs/docs/examples/header/index.html
+++ b/docs/docs/examples/header/index.html
@@ -5,30 +5,30 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Header | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Header | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a header card to display a page header."><meta data-react-helmet="true" property="og:description" content="Use a header card to display a page header."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/header"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/header"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/207f87c1.7057d601.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/207f87c1.b4d9440d.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Header</h1></header><div class="markdown"><p>Use a header card to display a page header.</p><div class="cover" style="background-image:url(/wave/assets/images/header-0cdf3777b66e47f9e5320eee81ac5e10.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Header</h1></header><div class="markdown"><p>Use a header card to display a page header.</p><div class="cover" style="background-image:url(/wave/assets/images/header-0cdf3777b66e47f9e5320eee81ac5e10.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;header1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">header_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 3 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;The Amazing Gonkulator&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    subtitle</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;And now for something completely different!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;header2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">header_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 2 3 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;The Amazing Gonkulator&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    subtitle</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;And now for something completely different!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Design&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;header3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">header_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 3 3 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;The Amazing Gonkulator&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    subtitle</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;And now for something completely different!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Cycling&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    icon_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$violet&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;header4&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">header_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 4 3 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;The Amazing Gonkulator&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    subtitle</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;And now for something completely different!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;ExploreData&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    icon_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$red&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/header.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/breadcrumbs"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Breadcrumbs</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/hash-routing"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Routing »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/207f87c1.7057d601.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/207f87c1.b4d9440d.js"></script>
 </body>
 </html>
\ 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 9b1763372d..11a96b6b7a 100644
--- a/docs/docs/examples/hello-world/index.html
+++ b/docs/docs/examples/hello-world/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Hello World! | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Hello World! | H2O Wave"><meta data-react-helmet="true" name="description" content="A simple example to get you started with Q."><meta data-react-helmet="true" property="og:description" content="A simple example to get you started with Q."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/hello-world"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/hello-world"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/a8b2a833.17d49b14.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/a8b2a833.806669fa.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Hello World!</h1></header><div class="markdown"><p>A simple example to get you started with Q.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Import `Site` and the `ui` module from the `h2o_wave` package</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Hello World!</h1></header><div class="markdown"><p>A simple example to get you started with Q.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Import `Site` and the `ui` module from the `h2o_wave` package</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Get the web page at route &#x27;/demo&#x27;.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># If you&#x27;re running this example on your local machine,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># this page will refer to http://localhost:55555/demo.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Add a Markdown card named `hello` to the page.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;hello&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Hello World!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;And now for something completely different!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Finally, sync the page to send our changes to the server.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/hello-world.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Gallery</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/todo"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">To-do List App »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/a8b2a833.17d49b14.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/a8b2a833.806669fa.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/image/index.html b/docs/docs/examples/image/index.html
index 65a4f80cc5..0da7d2dfc5 100644
--- a/docs/docs/examples/image/index.html
+++ b/docs/docs/examples/image/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Image | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Image | H2O Wave"><meta data-react-helmet="true" name="description" content="Use an image card to display a base64-encoded image."><meta data-react-helmet="true" property="og:description" content="Use an image card to display a base64-encoded image."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/image"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/image"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/b81c5e46.c8f1b9ee.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/b81c5e46.e3f1d216.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Image</h1></header><div class="markdown"><p>Use an image card to display a base64-encoded image.</p><div class="cover" style="background-image:url(/wave/assets/images/image-dab53361cb560c92baeb4fb3315cab5a.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> io</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> base64</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> numpy </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> np</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> matplotlib</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">pyplot </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> plt</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Image</h1></header><div class="markdown"><p>Use an image card to display a base64-encoded image.</p><div class="cover" style="background-image:url(/wave/assets/images/image-dab53361cb560c92baeb4fb3315cab5a.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> io</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> base64</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> numpy </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> np</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> matplotlib</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">pyplot </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> plt</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">np</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">seed</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">19680801</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">25</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">plt</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">figure</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">figsize</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">plt</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">scatter</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    np</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">rand</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> np</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">rand</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    s</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> np</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">rand</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">np</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">rand</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    alpha</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0.5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">buf </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> io</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">BytesIO</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">plt</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">savefig</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">buf</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">format</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;png&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">buf</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">seek</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">image </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> base64</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">b64encode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">buf</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">read</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">decode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;utf-8&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">image_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 3 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;An image&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;png&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    image</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">image</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/image.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/table-select"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Table / Preselection</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/frame"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Frame »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/b81c5e46.c8f1b9ee.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/b81c5e46.e3f1d216.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/index.html b/docs/docs/examples/index.html
index 7363a785bc..ebf65289cf 100644
--- a/docs/docs/examples/index.html
+++ b/docs/docs/examples/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Gallery | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Gallery | H2O Wave"><meta data-react-helmet="true" name="description" content="Hello World!"><meta data-react-helmet="true" property="og:description" content="Hello World!"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/bf614533.8a69ecda.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/bf614533.e9f653e2.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Gallery</h1></header><div class="markdown"><a class="thumbnail" href="/wave/docs/examples/hello-world"><div style="background-image:url(data:image/png;base64,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)"></div>Hello World!</a><a class="thumbnail" href="/wave/docs/examples/todo"><div style="background-image:url(data:image/png;base64,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)"></div>To-do List App</a><a class="thumbnail" href="/wave/docs/examples/wizard"><div style="background-image:url(data:image/png;base64,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)"></div>Wizard</a><a class="thumbnail" href="/wave/docs/examples/issue-tracker"><div style="background-image:url(/wave/assets/images/issue-tracker-f8f5460fa5058fa880076f1b4d032c9f.png)"></div>Issue Tracker</a><a class="thumbnail" href="/wave/docs/examples/dashboard"><div style="background-image:url(/wave/assets/images/dashboard-24aea705724fd29993c5508a401b3b3c.png)"></div>Dashboard</a><a class="thumbnail" href="/wave/docs/examples/stat-small"><div style="background-image:url(data:image/png;base64,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)"></div>Stat / Small</a><a class="thumbnail" href="/wave/docs/examples/stat-large"><div style="background-image:url(/wave/assets/images/stat-large-4434acbc0c05f2c331071c827076d7b0.png)"></div>Stat / Large</a><a class="thumbnail" href="/wave/docs/examples/stat-wide-gauge"><div style="background-image:url(data:image/png;base64,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)"></div>Stat / Gauge / Wide</a><a class="thumbnail" href="/wave/docs/examples/stat-tall-gauge"><div style="background-image:url(data:image/png;base64,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)"></div>Stat / Gauge / Tall</a><a class="thumbnail" href="/wave/docs/examples/stat-wide-bar"><div style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATUAAABoCAYAAACQeGeZAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDExOjMzOjM2IEFNIFBEVFyw9DUAABD9SURBVHic7d15XFTV/8fx1wwwICoQKSLGFyipX5n+3FAQsTRBUnFBM03FJdTEBMstxa/a4r4B7sqmlZl+U3FJ+6mZWaKCoqWWUY9EE0MRtx+yzTDfP9ARBHQGEfT2eT4e89A7995zz/DH+3HOufeeo8rOztYjhBAKoa7uCgghRGWSUBNCKIqEmhBCUSTUhBCKIqEmhFAUCTUhhKJIqAkhFEVCTQihKBJqQghFkVATQiiK+cOcrNfLG1ZCiMqjUqkeugyTQ628IJOAE0JURPEgK54jFQ04o0Ot+MU0Gg3m5uaVkqpCCHGHXq9Hq9WSn59vyBxTc8aoMbU7hev1ejQaDRYWFhJoQohKp1KpsLCwQKPRlMgdUxh9o0Cv16PX6zE3f6hhOCGEeCBzc3ND5pjqgaFmKPT2BaSFJoR41FQqVVH2VKC1ZnT3U29iwUII8TAqmjsmdz+FEKIqPJLuZ/GBOgk1IURVujd3jM0fk94okFATQlSViuaNvCYlhFAU4+9+CiFENan0u5+3i61AVYQQ4mE8gufUhBDiSSKhJoRQFAk1IYSiSKgJIRRFQk0IoSgSakIIRZFQE0IoioSaEEJRqjTUzp8/T4vmzUp9FkdFAZCUdISVK1dQWFgIwOnTp2nRvBkHDnxfldUUQjzBqmUaWz+/TrRu3dqw7f788wAkHUkiJiaa4OBhlXo9mdxSiH+Oaul+Nm7SmB49exo+jRo14tO1a4mJiQaglUdLvtu3z3B82tk03uzTBy9PT8InT0Kr1QJw4/p1Ppg4EZ+23nTt0pkv1q0znBMWFkpQ0EDCwyfTupUH+fn5nDlzhqFDBuPdxou3+vUlKekIcLdFuGfPHgDy8/Np0bwZK1euAKCtdxtmzpjB0KFD8PL0ZOq/p3D48GG6BXTllXY+xMfHVcnfTQjxYNUSareyb3HlyhXDp6CgAF8/P15+uTEAi5cs5X+bNjUcv379FwQEBODj05Zdu3axfft2ACZPnszRY0eZMGEiXQMCmD9/Hvv2fWs479dffkFbUMCkSZPJzc3l3VEhFBYWMm36dJydnXlvzBgyMjKMqvPuPbvp2rUrvr4d2bFjBxGLFhIy6l3c3Z9n6ZIlXLp0qRL/QkKIiqqW7ufy5ctYvnyZYXvVqtW0aNmS1q1bc/Lkz7Ru3RozMzMuXrwIwIABA+nbrx95eX3Yt28ff/z+O5cuXSIx8SCTw8MJ6NYNgJSUFL76z1e0b98BABsbG2bPmYtKpWLXzp1kZWURHR2Di6sr7dt3oJ2PDzu//ppWxbrC5Wnn40NgYC88Pb3YsWMH3bp1x9/fH0tLDSkpx7hw4S8cHBwewV9LCGGKagm1Xr1682r79oZtd3f3+x5fp25dACwtLTE3N0er1XL5dsto5owZLFq4ECjqNrq6uhrOs7e3N4ylZVwqapEFBvakRo0aABQU5BvdUrO2rgmAmZkZABYaDYBhda1CXaFR5QghHq1qCTVXN1fatGnzUGXUqVsHgL79+tG3bz8AdDodVlZWZR9fp+j4+QsW0LChu+F4W1tbQ9fx1q1sAC5flq6kEE+qagm1EydOoNFYGrYbNnyOpk2bYV3TGoC42FgCAwPvW0a9eo609PBg186dPPfcc6jVZkRGLKJzly6MHz+h1PE+Pu2wtbUlNiaG/gMGcv7cOVatWsnsOXPx8vREo9EQHx+PXq/nm127KvcHCyGqTLWE2p7du9mze7dhu0+fN2natBndunUnMTGRmJgYnn3uWRwd69+3nFmzZjN71kwWLVqElZUVHV57jZCQUWUea2Njw+IlS5k3dw4fTp9O3bp1GT06lA4dOqBSqfhg0iQiIyKIiowkNCyMpKSkSv3NQoiqocrOzi53asniq7kUFurQ6Qqxt7evyvoJIf6hsrKyMDNTo1aboVKpDJ8HkdekhBCKIqEmhFAUCTUhhKJIqAkhFEVCTQihKBJqQghFkVATQiiKhJoQQlGqPdSGDwvm2rVr1V0NIYRCVHuoCSFEZaqW16Ryc3P57NNP2bVrJ3/++ScA7dq9QnBwMI1efrnEsfn5+axevYqdX3/NlStXeOaZZ3jzzb706t27zFcmNmz4kvXr13MxPZ2nn36aTv7+DBs2vNzZO8qi0+lo5dESgKPHUgzfz5k9mw0bviz3vAEDB/Lee+8bfR0hRPkq+ppUlb/QrtPpCBn5DqhUjBs3ntmzZxE+pWh67ODgYCIiI0usXzBu7PtkZWUxe84cnOo7cfr0aebOncvlzMuMHBlSouxlS5eSmHiQSZMm4eLiyvlz54iMjCA1NZWoqMVG1/HTtWvL/H7kyJEMDAoq9b1Wq+XtoUN48X9eNPoaQohHo8pDbe/ePVy+fJmvNm1Go9Hg4OCAu/vzeHi0wsrKisjICNat+wKAE8eP8/PJk2zbtp1atWoB0NbHB4d69RgUFMSgQYOxti6aruivv/5i+/btbNi40XCsg4MDUYuXENizB7/99hvP317g5X7Onz9PfHwck8PDiV69usQ+G1tbbGxtS52zedMmatvY4Nep00P9bYQQD6/KQy39QjoNG7qjuT1zbHG9e7+Bk5OTYTu/IJ/+/fsbQuoOd3d39PpCMjMz+de//gXAtq1bCQwMLHWsnZ0d3+77zuj6zfjkE/r3H4Cri6tRx2u1WmJiohk16l3UahmiFKK6VXmoNW7cmLi4WNLS0nBxcSmxz87Ojs6duxi2PTxa4eHRqlQZd8bhigdgcnIyISEh/HDgAGs/Xcu5tDScnZ0ZNGgwbX18jKrb1q0JZGZeZvCQIfx04oTR51haWtLJ3/++x40JCyUzM7PU9zNmzsLFxYWMjAxiYqI5feoU0TGxZY4Bjhs3lkv3TD++cFGEYVbfzMxMYmNj+OX0aWrVqkWXrl3x938dKBrHXLpkMTk5OTg4ODBs+AhUKhU5OTlMnzaV0aGhPPOMs1G/WYjHWZWHWouWLRkYFETQwAF0796DEydOUKjTmVTGsqVL6datu2F9AIBz59I4ePAg+/d/x9hx43B0rE9yUhKTJk9i7Ptj6dGz533LzMrKIjIigoULF2FhYWFUPQoKCoiJjmb06NAHttIWLopAr797T+aX06dZsWI59es7cvz4ceJiY/Dr1InTp06Veb5er+dKZiaRUVE89VTpmzVarZa5c+fg49OOUaPe5fr160RELMLc3IKOHTuSkpKCra0tY8eNZ8YnH3P27Fnc3NyIi43F19dPAk0oRrXMfBscPAzfjr4kJCSg1Wrx9e1Ij549CQoaVKr1dq81a+L5/fdUPvt8XYnvb9y4wbZtW9m0eYuhC+rm5oZTgwZMGD+O1zp2pHbt2uWWu2D+PF57rWOJpfkeJCEhASsrK6PG0u4NvY3/2UjPwEA0GktsbWyYMXMWOq22xNqlxV29ehW9Xo+d3VNl7j927Cj2Tz1FQEAAADVr1mTixInk5uYBRQvE5OUV/T8vLx8LC3N+OHCA3NxcOvr6Gv2bhXjcVdsgkIurK6FhYbRo0YKY2Fjs7OwYFDSQvXv3lnvON998w5r4eBZFRJYaO1OpVPTr91ap7729vXF0dCQx8WC55f74448kJycTGhZmdP0LCgqIi41h2PARJo+lHU1O5v9v3uTVV4tW1HJ79tlS9b7X5cuXsLKyIioqkvfGhDF71kxSU1MN+8+ePYuLqyvLly1lWPDbhIWOJjk5mQYNGgDQrFkzrKxq8NGH02nSpAkWFhoSErYwfMQIk+ouxOOuWlpq93J1daNp02Z4eXoxZkwYbdq0MSxjd8fhQ4eY8cnHRC1ejJubW6kybG1tqedYr8zynZycyhzPAsjJyWHWzBmMnzDxgcFSXMKWLdSoUQM/Pz+jz4GibuTGjRvo3fsNw3J7xrC1tcPPrxMvvvQSderUITHxIHNmz2LW7DnUrVuXrKwsjhw+woCBAxky9G3Onz/PooULqFWrNt7e3pibm/N2cDBQ9FjNRx99yJAhQ036zUI8Cao81Pbv34+Li0uJ9TnvaNa8Obm5uVzKyMCl2P5Tp04xceIEPv5kBk2bNiuz3BdeeIE//vijzH3p6ek8/XSdcutz8eJFpk+byvRpUw3f5+TkANDWuw2dO3dhcni4YV9BQQGxsbGEhoWZ3Er74YcDqNVmeHp5mXSeo6Mjgb16Gba7devO2T/Pcigx0bCYc5MmTejQoWghZ3d3d3oGBvLjjz/g7e1doqyNGzbQ6KVGONSrx8IFC8jPz8Ovkz/Nmzc3qU5CPI6qPNR27/4/8nLzmDd/fql9B77/nhrW1jjWv7uKVNrZs4SFjub9sWN55ZVXyi23k78/UZGRDB48pMTY2eFDh0hPv4iXp2eZ57Vr144tCVtLfX80OZmPP/6IL9Z/Sc2aNUvs27J5M9bWprfStFotm776ikGDhxj1ZHRx6RcukJ2djXuxZ+2srCzR3b7J4lTfibRzaSXOKSwsLBW6J0+e5Ndff+HfU6cRGxODp5cnjV5qxLRpUyXUhCJU+ZjasGHDOXo0mQ8mTuTYsWP8/XcGqam/ER29milTwhk9ejSWlkVrgmZkZBASMpKOvr60bOlBenp6ic/169cN5b7+emdcXFwIGfkOyUlJXLhwgYSELUyYMJ6wMWMMD80mJR1h8KAgLly4AIC1tTXOzs5lfhwcHHB2di7xalh+fj5xcbEVGkv7du9e7O3taWrkzYiUlBQSDxaNBV67do0FC+aTmppKfn4+hw4lkpSUhEerokde2vr48PNPP7F//3fodDrOnDnD5k2b8PFpZyjv5s2brImPI2TUu5iZmaHVFmCpscRCo0EnK8wLhajylpqLiwuffb6O6NWrmRI+mYyMDN4ZMQJPLy/mzJ1Xoqu0fv0X/P3332zcsIGNGzaUKqtXr96GbqFarSYyajHLli4lPHwyN27cxO1ZN8KnTMHP7+7dyWvXrpGWlkZubm6F6r958yZq1qyJr4l3DPPy8khI2ELYmPeMPud4SgpXr17Fq00bXmrUiL793mLF8mVcuXIFJ6cGjB4dargRYG9vz9hx41j3+eesiV+Dra0Nb/TpU+KVs1UrV9CjR08cHBwAeL1zZ+Lj4ti6bSu9evc26fcI8biq9nU/hw8LZu68+djZ2VVquUKIJ9sTu+5nQEA3k2bQEEKI+6n2lpoQQpTliW2pCSFEZZJQE0IoioSaEEJRJNSEEIpSpc+pXfct/40AIZ5UteM+q+4qPLbU1TCllbTUhBCKUqUtNdvd+6vyckKIfyBpqQkhFEVCTQihKBJqQghFkVATQiiKhJoQQlEk1IQQiiKhJoRQFAk1IYSiSKgJIRRFQk0IoSgmhJppS7oJIcTDMz13Hhhq906fq9eXO/u3EEJUintzxpR1ck3uflZ0aTkhhDDWw+SMSaGmUqnIzs7m1q1b0mITQlQ6vV7PrVu3yM7ONql1Vtx9V5O6c5Gi1aQKKSwsRKfTUajToSssNOwDPZJxQoiKKMquu6tFmanVqM3MMDMzQ61Wo1arjV5JCkyYT+1OoWqVCr1ajRlQaAi1OyTZhBCmuBtUd/JFpVYX/WtCkBVnVKipVCrQ64sucifQVCpU94aaXi+xJoQwSlEDrWSoFQ82lUqFCtNuEoARoaZSqYqC6/YF1Go1+mKBJmNrQojKUHzBYkMr7XagmRJsJnU/oShd9beDrvxAk6ATQtxP2SFlCLSijUfb/dTf7n5SrCsqrTQhRGVSldEyq/Tu570FG8LtnotJwAkhKqK80KroIx0mryZVXpBVtAJCCHFHZeTIQy2RJ0EmhHjcyCwdQghFkVATQiiKhJoQQlEk1IQQiiKhJoRQFAk1IYSi/Bd9Fw19cj5p8gAAAABJRU5ErkJggg==)"></div>Stat / Bar / Wide</a><a class="thumbnail" href="/wave/docs/examples/stat-large-bar"><div style="background-image:url(/wave/assets/images/stat-large-bar-e578fa2ed742b2a1b9eb9ff52d50c476.png)"></div>Stat / Bar / Large</a><a class="thumbnail" href="/wave/docs/examples/stat-small-series-area"><div style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJoAAABfCAYAAAAQ2t4QAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDExOjM1OjE4IEFNIFBEVI95BMIAAAwUSURBVHic7Z15VFTlAsB/d4AxBtckFHki0ENeuaFmiis9cc0FLZ/Yy633EsTS3LH3jrlkrxJ8JwUxy6Vc0nMExPfSl2VpqbngBuZyVNCQFFQwlKUB5r4/Ria2mXuV8aLw/c6ZMzN3vvstd3732+58d6S8vDwZG8iyXOl12W2CuockSeWeK76uCke1kcqyXGUCQrq6gTWRlAQrRVG0qiIsK5fahAS1hwf5zlWLVt2EBHUbXU1nQFA3EKIJNEGIJtAEIZpAEx5oMCCmNOo2D3XUaU0uIV3doLrTW4qilY1Ur9fj6OgopjfqOLIsU1xcjNFotPih5ITNPlrZS056vR4nJychmQBJknByckKv16u+LKk4GJBlGVmWcXR8oO6coBbj6Oho8UMJq6JZdr4XkajJBBWRJMnsiYpaTbHplBUiENRt1DqiuukUCKqiWk1n2Q6eEE1gi4qOWHNF1ZUBIZrAGmrdEJegBJqgPOoUCFTywKPOe7vbMSuC2kk15tEEAnsiRBNoghBNoAlCNIEmCNEEmiBEE2iCEK0GKS4uruksaIYQrQaZO2d2TWdBMzQRLT09nc6dOloeAd268frf/8alS5cAuHDhAoF9enPgwAEAEhO3k5i4vdrpxsfH0S+oL9m3blU7Lnty+PBhXv3rK+zdu5fBgwaxft06y2eFhYUsWriQXr160q9fEBs3bCi3744diQwaOIAe3QOYO2c2ub/+Win+mzdvMnXqmwR061pue0pKCmNCRhPQrSsTxo8jPT394RSwCjSt0QYOHMiCBQsJDQ3l3PnzzIuYC0DDhg1p164drq6uACQmJpKYmFjt9Fq4t6Bdu3Y84exc7bjsxfXr14mYO4fQsDACAroTs3IlO3d+yc6dXwIQG7uSvPw8du7cxZo1a4mL28aRI0cAOHnyBKtiY1kZu4qvv9mDs8FAVFRkufgvX77MxAnj6dy5c7ntub/+ytw5c5gcHs6+738geMRIwieHYTKZNCm3pqK1aduWocOGMWHiRAYMGMCVK1eQZZlbt25x8OBB0tPTmTZtKqdOnuTUyZN07tSRO3fuYDKZWLUqln79gujRPYA5s2eRk5MDgMlkIiYmmn5BfenZozszZ0zn1r0a7MKFC+zbtw+j0ciGzz+nc6eOJMTHE9T3z7zwQiBbt27RsvgAXLp0CR+fp+nVqzf16unx9vbmw6WRPP30HwFwMbgQGhpGgwYN8PT0pE9gIOfOngXg4sVLdO78HN7e3hgMBoa8OIQLFy+Wi9/JyZHVn3zK8OHB5bbv+t8ugoKC6N27D3q9nuDgYBa/+y4lJSWalLtG+mgZGVdJOnqUgIDulX4iPmXKG5bXK2NXYTAY+Pyzz/hk9WoGDx7MzFmz+PHQId5bsgSA9evWsXbNGkaOfImIiHkkJSUxZ7b1vs+33+5h1qzZ/MHDg8ilS8nMvP5wCmmF9u3bk5l5nbVr1pCVlQWAl5cXfn5+AEwKDcXHxwcwn0THkpJo07YtAJ06deLEieOkpqaSn5/P9sTtBHQLKBe/h8cfcHd3r5TuT6dP4+rqSvjkMHr36smkSa/j6voUTk5OD7O4FjRdcRIVGUlUpLmqb9myJVOnTasUpnXr1nTw9wega1dzHyMxcTv+/h2ZPn0GAM3cmnHt2jXA3Gfp0KEDk8PDAbhx4wbR0Sv4+eefq8zDzFmz8fLywqW+C29Nm8bly1do1qy5fQtqgwYNGrBh4yY2b97EmTNneGVMCKNDQirVQAAxMdG4u7tbmkEfHx/69e/PqJdfQqfT0bJlS8sxUSInJ4dNmzayZMl7tO/QgTWffsrMGTPYsnWrJutBNK3Rxo4bx+YvtvDxx6tp2tSV0EmvW5o5W2RmZuLp6Wl536NnT14eNQqArKwsvLy8LZ+18mpl3p6ZWWVcjRs3BsDgbADQrOkoS5MmTZgy5Q0CAwNZuGgxcXFxxMfHlQuzbds2Dv14iAULF1m2xcVtI/lUMv/575d8/8N+RowYyYzp01Wl6ejoRPCIETzXpQt6vZ6wyZO5cSOLK1eu2LVs1tBUNDc3N/z8/HiuSxfGTxhPdnY2x44lKe7XrFkzLl9Os7w/sH+/pX/l5uZGWlqq5bO0NHO4p9zc7Jx7+5CSkkLS0aOW976+voSEhHD40CHLtj179rB500ZWREdjMBgs2/ft3cvokNG0aNECZ2dnxo4bR2paKplWTqqyeHp6Ulz0+7ydrPHqNk1FS0lOYXtCAlu++IKVMTEA5WqjUlwMBtJSUy1n+fDhwSQnJ7MsKootW7Ywb14Ex48fB2DosGEkJyez/KOPiI+P47P16+ng70+rVq20K9h9kJuby7y355F09CgFhYWcP3eOjRs20KaNuR92LCmJqMilREYto379+hiNRsvErrePDzsSd5CVlUVhYSHx8XE8Ua8eTZo0ITs7m1WrYq2OIge/+CLxCfGcOnUKo9HI8uUf0aKFh2bHSdM+2u7dX7F791fodDo8PDyY/847tG7dmjNnzpQLFxoWxvz581n64VICA19g3Pjx5Ofnk5AQT35+Pt0CAoiImAfAxImvUVhYyPaEBAoKCujatStv/+OfWhbrvujRowehoWEsXryIq1ev8lZqKkOGDuXVsWMB+ODDD8jMzGTUyy9Z9unffwD/ev99wsOnsGxZFCGj/0JBQQHPPPssK6Kj0ev1XLt2je0JCYwZ8wqNGjWqlK6fnx9z50aw4J35ZGVl0cHfn8ioKM3KLVV1V+6yK1tMphJKSkw8+eSTmmWqrjBzxnSilv27prNRLbKzs3Fw0KHTOSBJkuVRESGaoFqoFU1c6xRoghBNoAlCNIEmCNEEmiBEE2iCEE2gCUI0gSYI0QSaIEQTaIIQTaAJQjSBJoh7ut8jt0jm3G3lH0Geyynh6wx16zHff94ZDxdxLoMQzcK5nBLGfpenKmxzZx3NDdZ/MHi3SOZiromMPJMQ7R5CtAq82bYevg0dbIbp6Gr78xM3S5h6MN9cQyr8gPVPjR1o6FT7/8NBiFYB34YOiiIpUf+eOEtOFCqGbeGi47shDaqV3uOAEO0h4NtIx/LuBsVwu9KL2JVepEGOHg65RepvO1snRDuSVcyRG7Y7+hl59l2xraZWPHHr8b7JS8ThAt59Vl3YGhHtyA3lA9zASeKZxtVrwkoJ35/PHZVnn7uNTn5dISPPRMJl5ZpWzSi9FM1FW3G6kOifflMVNsjDiWea2Jbt+acceN7NdjHuFMlM9NPzml891fnUEr+tlW/UUpGYngaCPLRZVZ6RZ2LFaeX+5f1QY02nUh/m7aMFfJNRxDcZymfW+dGVV/08DvRqrk6cdeeNnM0psSma2loIoK+Ho6rWYnl3g3IXoOC2qjTtKtrZ2yWKTdQv+ebPlQqwa1B9xfTWnv+NdeeN6jP4iOHbSIdvI+Vadt15I7/kyza7HAlpRcSnqTsWGXl6Rnhbl/Z+mkS12E20s7dLCP7qrqqwzQ32ncRUO9H6OBOfZlQl0g/DbE+VDNp1V3Vc9e04v2c30e4YzTWVmglPe3W4ezV34sTNEowltmtR/6YOdGz6+A6w1/Zx4a6KwYwaMZZ3N6iKC8w1rr2w+9G3x4Sn6rQa6VjRQ3m+6nHHnl+4PeO6H1SLpmZkJBBYQ7VoE/30imHcDboaO2MEjzaqb4lQ7Ny4JvIneMRxLLgtbokgeHQQogk0QYgm0AQhmkAThGgCTRCiCTRBiCbQBCGaQBOEaAJNEKIJNEGIJtAEIZpAE4RoAk0Qogk0QYgm0AQVookFtQIllB2xKppW/+MoqD3YckZ10ykVqVtdLqg73I8TqkSTJAnJmAdG+y6TFzzGGAuRjHmqW74qF6dIkmT5G+Ryj9/uUlKQa1lPADKy+jsXCR5jzD797oKDTofkUHmdgDXxFFdBlUaikyRknQ4HwGQRrRRhW+3md3lKXZB0OvOzlcUoFbEpmiRJUFqzlUomSUgVRZNloVotxVyRlRetrGySJCGhPHi0Klpp88m9iHQ6HXIZyWTRZtZJKnWnJMkioi3ZVDWdYDZbviefdcmEfLWLqsWxSGZ+Y5+ms3RQQJlmVNRmdZuqOv4P3HRWjMAiXIVIhXR1A2siVWt6QynCsnKJKwh1jwf5zh/otlVCLsH98n/wuXGSfrhmAQAAAABJRU5ErkJggg==)"></div>Stat / Series / Small / Area</a><a class="thumbnail" href="/wave/docs/examples/stat-small-series-interval"><div style="background-image:url(data:image/png;base64,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)"></div>Stat / Series / Small / Interval</a><a class="thumbnail" href="/wave/docs/examples/stat-wide-series-area"><div style="background-image:url(data:image/png;base64,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)"></div>Stat / Series / Wide / Area</a><a class="thumbnail" href="/wave/docs/examples/stat-wide-series-interval"><div style="background-image:url(data:image/png;base64,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)"></div>Stat / Series / Wide / Interval</a><a class="thumbnail" href="/wave/docs/examples/stat-tall-series-area"><div style="background-image:url(data:image/png;base64,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)"></div>Stat / Series / Tall / Area</a><a class="thumbnail" href="/wave/docs/examples/stat-tall-series-interval"><div style="background-image:url(data:image/png;base64,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)"></div>Stat / Series / Tall / Interval</a><a class="thumbnail" href="/wave/docs/examples/layout"><div style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAl0AAAEWCAYAAABc9SIZAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDExOjQyOjE3IEFNIFBEVAv66mIAAB3WSURBVHic7d19cFR1nu/xzznpjkSqDLAlQWdFGa1MUaw7JGEkZGBGcVTAqsGZhIcRFnVUCD5BkhmZyOx44fKkW6U87L0zEiKWAYQRZWovuqXr3fLhMs5emCFRhNpbRALWDBOrhJClk9CaPvePkJiHbrpP58cv6fT7VZXSmF9On1TedfK1zzndTigU8gQAAIDLyh3oHQAAAEgHDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWBDo7wY8j5f5SmeO4xjfJk2lN5qCaTQF05JtKqmhK1ZsRJgeusfW/XfenwMbTaU3moJpNAXTTDTla+jq/iCZmZkKBAKX5f8gkDo8z9NXX32lcDjc1YefJmgKvdEUTKMpmJZsUwlf09W5Uc/zlJmZqWAwSHSQ4zgKBoPKzMzs0UgiaArR0BRMoymYlmxTvi6k9zxPnucpEOj3pWAYYgKBQFcfftAUYqEpmEZTMM1vUwkNXV0bu7hhpnz05jhORycJTvw0hXhoCqbRFEzz25Sv04teAhtE+vLbCE0hHpqCaTQF0/w0ktTpRSCa/jxtD0RDUzCNpmCa0dOL3S8QIzxcSu9G4t1eTVOIh6ZgGk3BND9N+X5FesJDLMm2QVOIhaZgGk3BND9t8DZAAAAAFvi7exFIUMJ3BQEJoimYRlMwzdjdixc3149dQXrw2whNIR6agmk0BdMMvk4XAAAA+oehCwAAwAKGLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALGLoAAAAsGJCh62RDg376wP0qyM/TO++8E3XNgQMHNGvmDBXk56mpqanP1yORiHbU1KhoSqHmzimJuo3z589r9apVKsjP0zMbNhj9GTC4HDt2TPfft0hTCidr1swZemn79qjrTHWTSMNIbY2NjaqoKNfU7xbptlu/r/Xr1ykcDkddy/EKfjQ3N6sgP08F+Xn64IP3o66x9XcSdgVsP2Bdba1KS0t1zTVjYq7ZUVOjTZs26tprr425prysTIcP/0nDhw+P+vVQKKQ5JcXKysrq9z5jcGtra9Pjjz2qq7KztbysTHW1tdqyZbNycnI0c9asHmtNdJNIw0h95WVlOn36L1q8eImamppUU/OyrrzySi1btrzHOo5X8Gvz5k2X/Lqtv5Owz/ozXaGWFlU+VamVK38Zc42b4ar6xe2adffdMdeMHTtWr+59TePGjYv69XA4rDvvuku79/y23/uMwe3UqVMaM2aMKisrNW/efK1Zu05ZWVmq+6iuz1oT3STSMFLbhQsXNGHCBK1avVqL7rtPTyxbpvHjx6v28OE+azlewY+6ujr9bt8+LViwMOYaW38nYZ/1Z7qKiookSX88dCjmmnvvXSBJ+vDD38dcU15RccnHGTlypMrKypPYQ6Sa3Nxc7di5q+vzhoYGtba26qYbb+qz1kQ3iTSM1HbFFVfoqZUrJUktoZCOfPKJPv30U82bP7/PWo5XSFR7e7vWrl2jyYWFmjFzpnbu3BF1na2/k7DP+tAFXE7N585pxZM/V25urn44e/ZA7w5SXDgc1rRpUyVJBZMm6cEHHxrgPUIqq6l5WZ+d+kzPPfe8mpubB3p3MAC4exFDxrlz51RaukQXLoS1afMWZWZmDvQuIcUFg0Ftq67Wr55+WidOnNDS0lJ5njfQu4UUdPr0aVVt3arikmIFg0F93tgoSWps/Fytra0DvHewhWe6MCScPXtWS0uX6Pz589pW/aJGjx490LuEFNbY+Fe9/dbbKpwyRXl5+crLy9fRo0e199VX1dTUpJEjRw70LiLFHDp4UG1tbXpl1y69suvryyHWr1srSSop4e7CdMDQhZTX3NysJYsfVn19vRYsWKj33ntXknT11Vdr+vTbB3bnkJKyhmWpqmqr9uzZreLiEoVaQnpj/35df8MNys7OHujdQwq6ZfJkbdz09V2LH3/0saqrt6m4uERTp04dwD2DTQxdSHknT55UfX29JPW4MPXbEycydCEpV2Vn6zcvbNXG559TVdVWBQIBFRZOUXlFhVyXqzLgX05OjnJycro+HzFipKqrt2na96ZpzBhefiZdOKFQ6JIXKHie1/URibSrvT2iUaNG2do/pJAzZ84oI8OV62bIcZyuj95oComiKZhGUzDNT1P8LxsAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWMDQBQAAYAFDFwAAgAUMXQAAABYwdAEAAFjA0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWMDQBQAAYAFDFwAAgAUMXQAAABYwdAEAAFjA0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWMDQBQAAYAFDFwAAgAUMXQAAABYwdAEAAFjA0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWOBz6HIuz15gCPHbCE0hHpqCaTQF0xJrJKGhy3F6bszzPP/7gyGtdxO9m+mNphAPTcE0moJpfptK6vRiW1tbMt+GIay/TdAUeqMpmEZTMM1vE76HLsdxFAqF1NLSwtQPeZ6nlpYWhUKhuBN+LDSF7mgKptEUTEu2KScUCsWtx/M8eZ6nSCSiSCSi9vZ2Rdrb1R6JdH1N8kSH6aGjL0eO0/GR4bpyMzKUkZEh13Xlum7X12KhKXRHUzCNpmCaiaYC/h6wY2Ou48hzXWVIinSF14n6hravY+pswXHdjn/GiS3q1mgKNAXjaAqmmWkq4aHLcRzJ8zo23hmd48jpHZ7nkd4Q1THk9wyve3yO48hR/AsJu38/TaU3moJpNAXTTDaV0NDlOE5HXBc37LquvG7RcX47PXWG1/2jM8xE7gqiKfRGUzCNpmBaf5ryfXpR6pj6vIsxxo6OGIeW6CF1RdfxSVJP23dunabSDU3BNJqCaWabSuhC+k7dI+v8dyb99OZEme79HNBoCr3RFEyjKZiWbFO+hq5OsWIjwvQQK6xkb8WWaCrd0RRMoymYZqIpX6cXoz1A99j6EzNSk6nfOU2hE03BNJqCacn+zpMaukw8MBALTcE0moJpNIVkJPU2QAAAAPCHoQsAAMAChi4AAAALGLoAAAAs6PeF9Nwqm94ux8WkNJXeaAqm0RRMs3r3Iq9Vkt4ux23TNJXeaAqm0RRMM9GUr6Gr+4NkZmYqEAhw22ya8zxPX331lcLhcFcfyb7SM01BoimYR1MwLdmmEr6mq/tbH2RmZioYDBId5DiOgsGgMjMzfb89Bk0hGpqCaTQF05JtyteF9J1v8hkI9PtSMAwxgUAgzpvARkdTiIWmYBpNwTS/TSU0dHVt7OKGmfLRm+M4HZ0kOPHTFOKhKZhGUzDNb1O+Ti96CWwQ6ctvIzSFeGgKptEUTPPTSFKnF4Fo+vO0PRANTcE0moJpRk8vdr9AjPBwKb0biXd7NU0hHpqCaTQF0/w05fsV6QkPsSTbBk0hFpqCaTQF0/y0wdsAAQAAWODv7kUgQQnfFQQkiKZgGk3BNGN3L17cXD92BenBbyM0hXhoCqbRFEwz+DpdAAAA6B+GLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALGLoAAAAsYOgCAACwYECGrpMNDfrpA/erID9P77zzTtQ1b775hn50z2wVTr5Fc+fO0f/54IOo686fP6/Vq1apID9Pz2zYkPTjIbUdO3ZM99+3SFMKJ2vWzBl6afv2qOsikYi2bN6sO+74gYqmFGpp6RKdbGiIuvbAgQOaNXOGCvLz1NTUFHVbO2pqVDSlUHPnlJj8cTAINDY2qqKiXFO/W6Tbbv2+1q9fp3A4HHUtxyv40dzcrIL8PBXk5+mDD96PusbPMS3ecSiR7mCH9aGrrrZW8+fPj/pHrNMnR47oV//4j7ruuutUUfEzDRs2TD/7WYX+/Oc/91gXCoU0p6RYtbWH+/V4SG1tbW16/LFH1fxf/6XlZWWaOHGitmzZrH99880+a3fU1Oill7brjh/coccef1zH6+tVVra8z1s37Kip0fJlTygYDMZ83PKyMlVVbdXw4cON/0wYeOVlZTr8pz9p8eIl+tGPfqzXX3tNv/71/+yzjuMV/Nq8edMlv+7nmBbvOJRId7DH+tAVamlR5VOVWrnylzHXHK8/rvHjx2vd+g2aM3euVjy5Ql9++aWOHT3aY104HNadd92l3Xt+26/HQ2o7deqUxowZo8rKSs2bN19r1q5TVlaW6j6q67P2L6f/ojvvvEtPrlihe+9doIULF+rkyZN9/si5Ga6qX9yuWXffHfNxx44dq1f3vqZx48YZ/5kwsC5cuKAJEyZo1erVWnTffXpi2TKNHz9etYf7/uHieAU/6urq9Lt9+7RgwcKYa/wc0+IdhxLpDvYEbD9gUVGRJOmPhw7FXDN79j2aPfuers+PHTsmSfrmjTf2WDdy5EiVlZX3+/GQ2nJzc7Vj566uzxsaGtTa2qqbbrypz9pf/KKyx+fHjh7TqL/5G40YMaLHf7/33gWSpA8//H3Mxy2vqOjPbmMQu+KKK/TUypWSpJZQSEc++USffvqp5s2f32ctxyskqr29XWvXrtHkwkLNmDlTO3fuiLrOzzEt3nEoke5gj/Why6+jR49q06aNKi4u0Te/+c2B3h0Mcs3nzmnFkz9Xbm6ufjh79iXX7t27V//2b29r7br1chzH0h4ilYTDYU2bNlWSVDBpkh588KFLrud4hUupqXlZn536TM8997yam5sT+h4/xzQMfoP67sWjR4/q0UeWatKk7+jJFSsGencwyJ07d06lpUt04UJYmzZvUWZmZsy1v9u3TxvWr9Pjjz+hGTNmWNxLpJJgMKht1dX61dNP68SJE1paWtrn+r9OHK9wKadPn1bV1q0qLilWMBjU542NkqTGxs/V2toa9Xv8HNOQGgbtM12fHDmiRx5Zqptv/ns98+yzCgQG7a5iEDh79qyWli7R+fPnta36RY0ePTrm2r1792rD+nVavHiJ7n/gAYt7iVTR2PhXvf3W2yqcMkV5efnKy8vX0aNHtffVV9XU1KSRI0f2WM/xCvEcOnhQbW1temXXLr2y6+tTh+vXrZUklZT0vPPQzzENqWNQHhmOHj2qpUtLFYlEdMstt2jfvtclSRMmTNDf/d3NA7x3GGyam5u1ZPHDqq+v14IFC/Xee+9Kkq6++mpNn357j7Wvv/6aNqxfp7HXX6/sEdnas2e3JOnWW29TTk6O7V3HIJU1LEtVVVu1Z89uFReXKNQS0hv79+v6G25QdnZ2j7Ucr5CIWyZP1sZNX9+1+PFHH6u6epuKi0s0derUHmv9HNOQWgbl0PV//+M/FAqFJEmbNm3s+u8PPvgQBzH0cfLkSdXX10tSjwtTvz1xYp8D1L//73+X53k62dCgZ595puu/33DDOIYudLkqO1u/eWGrNj7/nKqqtioQCKiwcIrKKyrkuj2vyuB4hUTk5OT0OMaMGDFS1dXbNO170zRmzJgea/0c05BanFAoFP0ChYs8z+v6iETa1d4e0ahRo2ztH1LImTNnlJHhynUz5DhO10dvNIVE0RRMoymY5qepQX0hPQAAwFDB0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWMDQBQAAYAFDFwAAgAUMXQAAABYwdAEAAFjA0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWMDQBQAAYAFDFwAAgAUMXQAAABYwdAEAAFjA0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWMDQBQAAYAFDFwAAgAUMXQAAABYwdAEAAFjA0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABT6HLufy7AWGEL+N0BTioSmYRlMwLbFGEhq6HKfnxjzP878/GNJ6N9G7md5oCvHQFEyjKZjmt6mkTi+2tbUl820YwvrbBE2hN5qCaTQF0/w24XvochxHoVBILS0tTP2Q53lqaWlRKBSKO+HHQlPojqZgGk3BtGSbckKhUNx6PM+T53mKRCKKRCJqb29XpL1d7ZFI19ckT3SYHjr6cuQ4HR8Zris3I0MZGRlyXVeu63Z9LRaaQnc0BdNoCqaZaCrg7wE7NuY6jjzXVYakSFd4nahvaPs6ps4WHNft+Gec2KJujaZAUzCOpmCamaYSHrocx5E8r2PjndE5jpze4Xke6Q1RHUN+z/C6x+c4jhzFv5Cw+/fTVHqjKZhGUzDNZFMJDV2O43TEdXHDruvK6xYd57fTU2d43T86w0zkriCaQm80BdNoCqb1pynfpxeljqnPuxhj7OiIcWiJHlJXdB2fJPW0fefWaSrd0BRMoymYZraphC6k79Q9ss5/Z9JPb06U6d7PAY2m0BtNwTSagmnJNuVr6OoUKzYiTA+xwkr2VmyJptIdTcE0moJpJprydXox2gN0j60/MSM1mfqd0xQ60RRMoymYluzvPKmhy8QDA7HQFEyjKZhGU0hGUm8DBAAAAH8YugAAACxg6AIAALCAoQsAAMCCfl9Iz62y6e1yXExKU+mNpmAaTcE0q3cv8lol6e1y3DZNU+mNpmAaTcE0E035Grq6P0hmZqYCgQC3zaY5z/P01VdfKRwOd/WR7Cs90xQkmoJ5NAXTkm0q4Wu6ur/1QWZmpoLBINFBjuMoGAwqMzPT99tj0BSioSmYRlMwLdmmfF1I3/kmn4FAvy8FwxATCATivAlsdDSFWGgKptEUTPPbVEJDV9fGLm6YKR+9OY7T0UmCEz9NIR6agmk0BdP8NuXr9KKXwAaRvvw2QlOIh6ZgGk3BND+NJHV6EYimP0/bA9HQFEyjKZhm9PRi9wvECA+X0ruReLdX0xTioSmYRlMwzU9Tvl+RnvAQS7Jt0BRioSmYRlMwzU8bvA0QAACABf7uXgQSlPBdQUCCaAqm0RRMM3b34sXN9WNXkB78NkJTiIemYBpNwTSDr9MFAACA/mHoAgAAsIChCwAAwAKGLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALBmToOtnQoJ8+cL8K8vP0zjvvRF1TW3tYixb9g6YUTtbds2Zq9+7dUddFIhHtqKlR0ZRCzZ1TEnXN+fPntXrVKhXk5+mZDRuM/RwYPI4dO6b771ukKYWTNWvmDL20fXvMta+//prumf1DTSmcrJ/Mn6dDBw9GXZdIN4m0jNTU2NioiopyTf1ukW679ftav36dwuFw1LUcr+BHc3OzCvLzVJCfpw8+eD/qGj/9HThwQLNmzlBBfp6ampr6fD2R7mBHwPYD1tXWqrS0VNdcMybmmi+++EKPPfqorrvuOpWVl+vQwYP6p2ef0XV/+7f67tSpPdaWl5Xp8OE/afjw4VG3FQqFNKekWFlZWUZ/DgwebW1tevyxR3VVdraWl5WprrZWW7ZsVk5OjmbOmtVj7fvvv6e1a9bo1ttu04IFC7Vv3+tavnyZ/uV/7deoUaO61iXSTSItI3WVl5Xp9Om/aPHiJWpqalJNzcu68sortWzZ8h7rOF7Br82bN8Vdk2h/O2pqtGnTRl177bWX3NaluoM91p/pCrW0qPKpSq1c+cuYa7744gvNmnW3NjzzrObOnadVq/+7JOlw7eE+a8eOHatX976mcePGRd1WOBzWnXfdpd17fmvmB8Cgc+rUKY0ZM0aVlZWaN2++1qxdp6ysLNV9VNdnbfhCWHPnztOzz/6T5sydq0cffUytra36f//5nz3XJdBNIi0jNV24cEETJkzQqtWrtei++/TEsmUaP368ag/3PQZxvIIfdXV1+t2+fVqwYGHMNX76czNcVb+4XbPuvjvm9uJ1B3usP9NVVFQkSfrjoUMx1+Tm5uqplSsViUTUfO6c9r+xX5KUn1/QZ215RcUlH2/kyJEqKyvvxx5jsMvNzdWOnbu6Pm9oaFBra6tuuvGmPmt/cMcd+sEdd+jLL7/U2bNn9ea/vqnhw4cr91vf6rEukW4SaRmp6YorrtBTK1dKklpCIR355BN9+umnmjd/fp+1HK+QqPb2dq1du0aTCws1Y+ZM7dy5I+o6P/3de+8CSdKHH/4+5uPG6w72WB+6/PjDH/6gxx97VJL0D4sWdf2RA2JpPndOK578uXJzc/XD2bNjrvvNr3+tl17armHDhum/rVrV49Qi0CkcDmvatI5ThAWTJunBBx+KuZbjFeKpqXlZn536TM8997yam5vjrvfTH1LDoL578eabb9YLL2zV0kce0c4dO7R5U/zz4Ehf586dU2npEl24ENamzVuUmZkZc23JnDna8s//Q7fffrueqqyMeTEr0lswGNS26mr96umndeLECS0tLZXneVHXcrzCpZw+fVpVW7equKRYwWBQnzc2SpIaGz9Xa2tr1O/x0x9Sw6Acuurq6lTz8svyPE+TvvMdPfTQw7r++uv5w4iYzp49qyWLH1Zzc7O2VlVp9OjRUde9/fZb2rt3r6655hoVFRVpeVm5IpGIDhw4YHmPMZg1Nv5VNS+/rOPHjysvL1+zZ9+j6dOn68iRj/vcHcbxCok4dPCg2tra9MquXZo1c4YqKjpOI69ft1ZvvPFGj7V++kNqGZSnF9va2rRx4/N69913ddv023T8+HGdOHFCP/rxjwd61zAINTc3a8nih1VfX68FCxbqvffelSRdffXVmj799h5r64/Xa9u2Kn1UV6vcb31L77/3niRp4rcn2t5tDGJZw7JUVbVVe/bsVnFxiUItIb2xf7+uv+EGZWdn91jL8QqJuGXyZG3s9uznxx99rOrqbSouLtHUXne5+ukPqWVQDl2TJ0/WmjVrtX37i/rnLVt01VVXaf5PfqInnlg20LuGQejkyZOqr6+XpB4Xpn574sQ+Q9fiJUsU8SJ6Y/9+vfXWW/rGN76hX/yiUjNmzrS6zxjcrsrO1m9e2KqNzz+nqqqtCgQCKiycovKKCrluzxMEHK+QiJycHOXk5HR9PmLESFVXb9O0703TmDE9X3bGT39ILU4oFLrkCWLP87o+IpF2tbdHuOgYUZ05c0YZGa5cN0OO43R99EZTSBRNwTSagml+mmJkBgAAsIChCwAAwAKGLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALGLoAAAAsYOgCAACwgKELAADAAoYuAAAACxi6AAAALGDoAgAAsIChCwAAwAKGLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALGLoAAAAsYOgCAACwgKELAADAAoYuAAAACxi6AAAALGDoAgAAsIChCwAAwAKGLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALGLoAAAAsYOgCAACwgKELAADAAoYuAAAACxi6AAAALGDoAgAAsIChCwAAwAKGLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALfA5dzuXZCwwhfhuhKcRDUzCNpmBaYo0kNHQ5Ts+NeZ7nf38wpPVuonczvdEU4qEpmEZTMM1vU0mdXmxra0vm2zCE9bcJmkJvNAXTaAqm+W3C99DlOI5CoZBaWlqY+iHP89TS0qJQKBR3wo+FptAdTcE0moJpyTblhEKhuPV4nifP8xSJRBSJRNTe3q5Ie7vaI5Gur0me6DA9dPTlyHE6PjJcV25GhjIyMuS6rlzX7fpaLDSF7mgKptEUTDPRVMDfA3ZszHUcea6rDEmRrvA6Ud/Q9nVMnS04rtvxzzixRd0aTYGmYBxNwTQzTSU8dDmOI3lex8Y7o3McOb3D8zzSG6I6hvye4XWPz3EcOYp/IWH376ep9EZTMI2mYJrJphIauhzH6Yjr4oZd15XXLTrOb6enzvC6f3SGmchdQTSF3mgKptEUTOtPU75PL0odU593McbY0RHj0BI9pK7oOj5J6mn7zq3TVLqhKZhGUzDNbFMJXUjfqXtknf/OpJ/enCjTvZ8DGk2hN5qCaTQF05JtytfQ1SlWbESYHmKFleyt2BJNpTuagmk0BdNMNOXr9GK0B+geW39iRmoy9TunKXSiKZhGUzAt2d95UkOXiQcGYqEpmEZTMI2mkIyk3gYIAAAA/vx/SN4jbijHNF8AAAAASUVORK5CYII=)"></div>Layout / Position</a><a class="thumbnail" href="/wave/docs/examples/layout-size"><div style="background-image:url(data:image/png;base64,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)"></div>Layout / Size</a><a class="thumbnail" href="/wave/docs/examples/form"><div style="background-image:url(/wave/assets/images/form-b0f5fccd418b3d5e40f559cf1d60cb46.png)"></div>Form</a><a class="thumbnail" href="/wave/docs/examples/text"><div style="background-image:url(/wave/assets/images/text-3c5275bb7d17545e6fd8952074ab9d13.png)"></div>Form / Text</a><a class="thumbnail" href="/wave/docs/examples/text-sizes"><div style="background-image:url(/wave/assets/images/text-sizes-5d78df884df4f57688aef7d5b7b68349.png)"></div>Form / Text / Sizes</a><a class="thumbnail" href="/wave/docs/examples/label"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Label</a><a class="thumbnail" href="/wave/docs/examples/link"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Link</a><a class="thumbnail" href="/wave/docs/examples/progress"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Progress</a><a class="thumbnail" href="/wave/docs/examples/progress-update"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Progress / Updating</a><a class="thumbnail" href="/wave/docs/examples/message-bar"><div style="background-image:url(/wave/assets/images/message-bar-d893610affc5c6857a7cbf1546ad8326.png)"></div>Form / Message Bar</a><a class="thumbnail" href="/wave/docs/examples/textbox"><div style="background-image:url(/wave/assets/images/textbox-ad4ead8b116b9f18042ba1302cf471c9.png)"></div>Form / Textbox</a><a class="thumbnail" href="/wave/docs/examples/textbox-trigger"><div style="background-image:url(/wave/assets/images/textbox-trigger-3063508395dc193e6087e98ec3caf604.png)"></div>Form / Textbox / Trigger</a><a class="thumbnail" href="/wave/docs/examples/button"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Button</a><a class="thumbnail" href="/wave/docs/examples/buttons"><div style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV4AAAA7CAYAAAAzZeJHAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDEyOjUyOjE2IFBNIFBEVOgeUnYAAA+pSURBVHic7d17VFT13sfx9wwgDAymXERBQbOkELREzERRC9I0O0eltDx1sNXKPE8grU6dU0+tSnvOg2kXUbs8pdbSVWFAYaiYN0i0UCoURO4JJgxDXGa4DAzEPH+AU5NWkDJM+H2t5Vo489u//V17sz+z92/P/qEwmUwmhBBCWI2yvwsQQoirjQSvEEJYmQSvEEJYmQSvEEJYmQSvEEJYmQSvEEJYmQSvEEJYmQSvEEJYmQSvEEJYmQSvEEJYmQSvEEJYmX1vGm/bto2YmBiampr6qh7xC2q1mvj4eJYvX96j9nm5p0hPP4yhpaWPKxO9oXJ2Ztas2QQGTehR+/b2doxtrchUKrZFoVAwyNEJBweHy+unN5PkuLq6Suj2A7VaTWNjY4/abtq4gcjIexk+YkQfVyV6Q1NVRWLiTh6LXtWj9s1NjRK6NkqhUOCidr2sPno11CCh2z96s90NLS0SujZo+IgRvboKkdC1XVdi38gYrxBCWJkErxBCWJkErxBCWJkErxBCWJkErxBCWJkErxBCWNmfOnj9/f2Jjo7G0dGxv0sRQoges4ngNZlMFv9qamrYsmULQ4YM+c3l1qxZQ3x8PPPmzbNSpVcvvV7P2rg45s65g6m3TGHhX//C+++/R2dnp9Vrycn5luBJN7M2Lu5P0a8taTcaycn5lj27d/PpJ8l8vi+NoqLCfvnecEHBGZKTEjl//vsr2m/tDz+QnJRITs63V7TfK6lXjwz3pYaGBhISErCzs2PKlCk89NBDjBs3jrCwsF/9pVi9ejXZ2dmkpaVZudqrS2dnJ//1j5Xk5+fj7+9PcHAwOTk5xG/YQH19PbGxjwNw39IllJSUcCL7636uWFyKyWQiM/MI9fX1XDNkCJ6eHtTW1pKXm0tbWxtB3Y8zHzywH71ez8JFi/u54oHLZoK3urqaRx99FABHR0eOHz/O9OnTCQkJ4fjx4xe1VygU5OXlkZeXZ7UaFQrFVflE0cmTOeTn5zP11lvZtGkzCoWClpYWFi9ayMc7dxITswql0iYunnrEZDKhUCj6uwyrq62tpb6+Hi8vL0KnzwCgo6OD/Z/vo6y0lMDAoKtyu/QHmzxa2tra2Lt3LwA33ngjHh4emEwmkpOT2bJlC62trcyZM4dNmzZhMpmYOnUqAHl5eXz//fdERUVRWVlJQ0MDzz33HIGBgWRlZdHS0kJGRga+vr7mdU2dOpX09HR0Oh0ajYa33noLZ2dnACIjIzGZTKxZs4bMzEw6Ojrw9PTEYDBw9uxZi5pPnTpFR0cHXl5e1tlIVmQwtAJgb29vPjCdnZ1J/uRT0vZ9jlKpJCIinKKiIjo7OwmedDPvvvsOAFqtlqf//W/uiAgnbMZ0Vq2KoaKiwtz3vfdEcufcORzYv58Fd80ndNqtPPXkPy0ek87Ly+XBBx9geug0Vqx4hOpq7UU1frZrF0uX3Mu0W6fyl7sXsGPHdvN7a+PiCJ50M0lJidy9YAHLo/7e434Hkh9/7ABAofjpsLe3tyfijjnMm38XCoWC3amp6HS6ruMtKZGCgjMAGAwGjmdlsWd3Krt2pXDs6FHzPjK2tZGclMiJE8fJP32a1M928dlnu8g/fdpi/eXl5exL28tnu1L45uuvLzlMVV5+loMH9pPy6SfsS0ujuLjI/F5OzrckJyXyXVkZ+9L2kn74EAB1dXUcPnyIXSmfcuSLDAwGw5XdcH3AJoMXwN3dHYDm5mbzaxEREYSGhrJ161bOnz9/yeXc3NyIjo7m/fffx2g0snr1alJSUjhy5Ajp6emEhYXxyiuvADBy5EgOHTrEmDFjiIuLY9++faxYsYKNGzda9BkbG0tHRwdvv/02DQ0N7NmzBz8/P8aPH2/uJygoiPT0dKqrq/tic/SriRMn4uHhQeaRI0T9/UF27NhOeXk5KpUKV9euyUJWPLLC3D429nFuuWUqnZ2drIqJJiMjnQUL7mbp0vs4npXFqphoi4NOr9fz5ptvcHt4OKNHj+HgwYO8+eYbANTX1xP92GOcyc9n1uzZeHp6sn7dyxb1HTx4kBdeeB4XFzUrV/4DDw9PXnv1VXbvTrVotzE+nvHjxzNr9uwe9TvQuLm54+TkhEZTRfrhQxQXF9HU1Ii9vb15tq0bA240tw8KmsCwYV6YTCaOHc2kqqoSXz8/rht7HVptNceOZlpcAVZrNGhrtIwePQalQklBwRkqK7uOU61Wy9fZJzAajYzy9aW5uYmysjKL+s6fP8/X2dnYOzgQEDAeJ5UTuadOUVFRbtEuLy+XoUPd8Pb2oa2tjaNHM2mor2eEtzdOKhUnT+b01Sa8YmxmqOECpVLJzJkzWbZsGe3t7Rw5csT8nsFgICQk5Ddn6lKpVCxevJizZ89y7tw5Nm/eTEJCAs888wz29vbU19cTHBxs7i8yMpKCggLKyspQKpUsWrSI8PBwiz4zMzO58847zf9PSEhg0aJFzJs3j9OnTzN//nzz6wORi4sL77y7hVdeWc+xo0fJzc3ltVdfZXJICM8//wLe3t5E3nMPSUmJlJSU8MCDDwJdUxs+8cQ/cXRyIigoCICCwgKOZmZSVVWFj48PAK2trby8bj1jx46loaGBiPDbOdE9vJS2dy96vZ6lS5fy5FP/AmDdupf56MMPzfXdcIM/L69bT2hoKE5OTkwKDubBB/7G8aws5s+/y9wuavlyoqK6ptf88IMPfrffgcbBwYGwmbM4dfIk1dUa6urqyD11Ck9PT4InT8bZ2YVrrx3Ld2Vl6PV6rh83Duga458w8Sbs7Oxwc3MDoKGhHo1GQ0tLCw72XTGiVNoRFjYTpVKJm5sbX331JVqtFm9vH8pKSwAIDp6Mt48PJpOJw4cOYmxrM9c3ZMgQbpl6K8OHD8fOzg4PT08OHzqIVqvF19fP3M7f/wbG+fsDUFJSTLvRyNix1zHxppuArqGx0pKSvt+gl8Fmgtff39/i09NkMhEbG0t1dTUeHh4A5OTk/O70iG1tbeZhgLq6OgAqKyuBrvEsnU5nHkqora1Fo9HwyCOPEBAQQEBAAGq12uIsG7AIf4DU1FSam5uZN28e69atY/78+bS3t5OUlPTHN4CN8/X1ZcOGeOrr68nKyiI5KZHsEyd4PDaWhJ07L7mMg4MDvn5+7Nm9mx07tnPu3DmKi7ouHdvb2y3ajR07Fug6+FxdXWnpnsnrwlnR9BkzzO3DZoRZBKS3tw+lpaW8/vprVFRUUFhQAIDR+NM6AG6+eZL55570OxCp1WqmhYbS1taGVqvlu+/KqKmp4dixY4SHR1xyGaVSiVqtpqKinOLiIpqbmtDpdAAWVy6DBw82j/Wru6+EfuzoGt7Q67uOW6/hw4Gu+yVew4fT0NBgXt7FxQW9Xk9u7imaGpto0HW91/mj5ZCEe3ceADR29/vzGflGjBhh88FrU0MNGzZs4PXXX+fZZ59l0qRJxMfHW7x/pb+6tGDBAk6cOMHixYs5c+YML774IlrtxeN8v1xvS0sLqamphIaGMmzYMG677TYOHDhgDvqBprSkhCNHvkCn0zF06FDmzp3L/73zLhMmTKCkpPhXh300Gg1Ll9zLtm1bGTJkCAv/upCQKVMuateTGzo/v6f5yxucGza8zuOxsRQXFTPp5kk8+ujKS/ZxqRuAv9XvQKPX69FUVWE0GnF0dGTUqFGEhc3Ezd0dvU530QnHBS0tLRw8sJ+iwkIcBzkyevQYPD2HXdSu1/flfrG5c3NP8eWxo+h0Ojw8PAi4MeCSi1369+XnJ229rKMf2MwZb2FhIbGxsVZdZ2RkZPeNoQjOnj2Lq6sr77zzjsWn8K9JSEhgyZIlvPTSS7i4uPDRRx9ZoeL+kZGRwebNm4iKWk50TAwALc3N5quPQYMGAT8dEJ2dnSiVSo4fz0Kn0/HCCy+y4O67Adi7d0+v1n3ttdcC8MUXGUybNs1cz8/t//xzRowYwZatWwH46ssvr0i/A01VZSWnT+cxzt+fwMCuoZ+Ojg7au68M7Oy6P5i69+OFb3/UaLUYjUaCJ0/Gz280AOfOVVzU/28ZPNiVpqZGNFVV+IwciclkQlOtsWhz/vvvcXZ2ZubMWQA9ul/iOrjrzLqqqgovr+HdP1f2qrb+YDPB2x+qqqoAiIuLIzMzk2XLlvX4rGfv3r00Njby8MMP09bWRkpKSl+W2q/m33UX23ds5733tpGdnY2X1zByc3PRarWEh4fj6ekJwLBhXhQWFvLUk0+y7G/L8PDoev3jxI9pMbRwMieHgu5hgJ6aM3cub7/9Fokff0xjYyMKhcI8/nuBh4cnZ87ks3FjPNcMvoakpMQr0u9A4+vnR3FxEUWFhfxQU4NKpaKurg6DwYCPz0icnFRA130SXUMDWV99xXXXX4+TygnoGp7p6Oigtra2RycnPzfm2rFUVlbyzTdfU/NDDXq9ntbub8tc4OTkRH19Pafz8nAY5MB3Zd/9br+jRvlyJj+fstLSrg8QBdRc4qrV1tjUUIO1rVmzhu3btxMREcHTTz/NBx98QGlpaY+WbW1tJSUlBYVCQVpamnnMayDy8vJi69Zt3Hbb7Zw7V0FGRgYODg5ERS3nxdVrzO1WxcYyceJEjh07SvaJbKZNm8Zjj0XzQ80PvPnGG6hUKoubXT3h5ubGps2bCQgIIP3wYbTV1Tz9zH9btPmf//yHiRMnsjMhgdTUz4iOjrki/Q40KpWKmbNm4e3jQ1NTE1VVVSiVSsb5+zM5JMTcLigoCHd3d6qrNdTUaPHyGs74wEBaDa3knz6NvZ29xc2unvDy8iJ48mQGDRrEuYoKXJyduf766y3ahEyZgru7O6WlJVSUlxMYGPi7/To6OhI6fQZDhw6lsvI8BoPBYizfVvXqb67Jl6strV+/nieeeIL77ruvz4caerqb1q39X57819N9Wov4Y3qzb5oa9X1cjbgcatfBl7X8VT3U8EdNnjyZlStXsmzZMsrLy0lOTu7vkoQQfyJX9VDDH3X77bdz//33k5uby8KFCzEajf1dkhDiT0SC9w9Yu3YtKpWKkJAQvv3WdmdAEkLYJgleIYSwMgleIYSwMgleIYSwMgleIYSwMgleIYSwsl4Fr1qt7qs6xG/ozXZXOTuj6X4UWtgOTVUVqu5Z8XpCHlayXVdi3/TqAYr4+HhiYmIs/jqA6FtqtfqiWdp+y6xZs0lM3Imhe1pFYRtUzs7MmjW7x+0HOTphbGsd8DOm/dkoFAoGOTpdfj+9eWRYCCHE5ZMxXiGEsDIJXiGEsDIJXiGEsDIJXiGEsDIJXiGEsDIJXiGEsDIJXiGEsDIJXiGEsDIJXiGEsDIJXiGEsDIJXiGEsDIJXiGEsDIJXiGEsDIJXiGEsLL/BwgYTkZKAHe4AAAAAElFTkSuQmCC)"></div>Form / Buttons</a><a class="thumbnail" href="/wave/docs/examples/checkbox"><div style="background-image:url(/wave/assets/images/checkbox-7b117add24c72bf0c30d9ae546f39718.png)"></div>Form / Checkbox</a><a class="thumbnail" href="/wave/docs/examples/checklist"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Checklist</a><a class="thumbnail" href="/wave/docs/examples/picker"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Picker</a><a class="thumbnail" href="/wave/docs/examples/picker-selection"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Picker / Selection</a><a class="thumbnail" href="/wave/docs/examples/dropdown"><div style="background-image:url(/wave/assets/images/dropdown-aa5530f33720d6851ade03079d16f40a.png)"></div>Form / Dropdown</a><a class="thumbnail" href="/wave/docs/examples/choice-group"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Choice Group</a><a class="thumbnail" href="/wave/docs/examples/combobox"><div style="background-image:url(/wave/assets/images/combobox-99fc7d69ef37ddf7a125cdeaa730e2ce.png)"></div>Form / Combobox</a><a class="thumbnail" href="/wave/docs/examples/toggle"><div style="background-image:url(/wave/assets/images/toggle-5e565e1d5a735ee4a481835a4e53ee43.png)"></div>Form / Toggle</a><a class="thumbnail" href="/wave/docs/examples/spinbox"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Spinbox</a><a class="thumbnail" href="/wave/docs/examples/slider"><div style="background-image:url(/wave/assets/images/slider-06551b8ad6f45a0aa69c946c5d8332d1.png)"></div>Form / Slider</a><a class="thumbnail" href="/wave/docs/examples/range-slider"><div style="background-image:url(/wave/assets/images/range-slider-7394a0b0ebb5aace4e83bb302adc6fc3.png)"></div>Form / Range Slider</a><a class="thumbnail" href="/wave/docs/examples/date-picker"><div style="background-image:url(/wave/assets/images/date-picker-a98cee22ba2dc41a9e12a103dabc10e9.png)"></div>Form / Date Picker</a><a class="thumbnail" href="/wave/docs/examples/date-picker-trigger"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Date Picker / Trigger</a><a class="thumbnail" href="/wave/docs/examples/color-picker"><div style="background-image:url(/wave/assets/images/color-picker-d5462fd8a2dcc2b3d980e2402a61d930.png)"></div>Form / Color Picker</a><a class="thumbnail" href="/wave/docs/examples/swatch-picker"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Swatch Picker</a><a class="thumbnail" href="/wave/docs/examples/tabs"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Tabs</a><a class="thumbnail" href="/wave/docs/examples/separator"><div style="background-image:url(/wave/assets/images/separator-761eab53dd3e94f7cae3fc78ce5f36b7.png)"></div>Form / Separator</a><a class="thumbnail" href="/wave/docs/examples/file-upload"><div style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjkAAAEXCAYAAABPpVW2AAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjE1OjE2IFBNIFBEVAe5grkAACAASURBVHic7d15eE3X/sfxz4kMomIISVSQ1NyiRSsh5nmoq62h2ntvKUGUVgd0uLRo0eHXibaGGjtd9NbQNrRUqUpatEqomDUig4SQhETm/fsjdTiNEEHD8n49j6dnr732Wt992h6fZ+29z7FZlmUJAADAME4lXQAAAMC1QMgBAABGIuQAAAAjEXIAAICRCDkAAMBIhBwAAGAkQg4AADASIQcAABiJkAMAAIxEyAEAAEYi5AAAACMRcgAAgJEIOQAAwEiEHAAAYCRCDgAAMBIhBwAAGImQAwAAjETIAQAARiLkAAAAIxFyAACAkQg5AADASIQcAABgJOeSLgCA2dLT0hQWHqYdO3bo0MGDSklJlSVLFStWlG9VXzVt2lQBgYHy9PQs6VIBGMZmWZZV0kUAME90dLTmz5+n1d+uVlZW5kX7Ojs7q2PHjnpkwEDdfvvtf1OFAExHyAFwVWVnZ2vunDlauHCBcnJyLutYJycn9e7TR6NGPalbbrnlGlUI4GZByAFw1Zw8eVKjRz+jiO3bHdo9K1VSi+bN1bBRI3l6VpKTk03Hjx/X/n37FRa2UYmJiQ79a9asqXenTZevr+/fWT4AwxByAFwVycnJCh48SFFRUfY2X99qGjFypDp16iRn58JvAdywYYNmz56lvXv22Ns8K1XSwoUfEXQAFBshB8AVy87OVnDwYO36/Xd7W99+/TR69Bi5uroWaYy8vDzNnjVL8+bN1dmPJX9/fy386GN5eHhck7oBmI2QA6DIcnNztXt3pP449IeSk5Pl7Oysyl6VtWnTJq1Yvtzeb+TIxzU4OLhYc4SGhmrihJfsQadXr/s0YeLEq1E+gJsMIQfAJcXExGjhwgVas3q10tLSLtq3d+8+Gjd+/BXNt3DBAr333nT79tx589SkSdMrGhPAzYeQA6BQZ86c0cwZM/T550uUnZ19yf5Vq1bV5//7Qu7u7lc0b15engYPelQ7d+6UJAUFBem99z+4ojEB3Hz4xmMAF5SQcFTBgwfps88+LRBwKleurPr1b1e9+vUdvsTvsREjrjjgSPmPko8ZO9a+/fPPP+vXX35RVlbWFY8N4ObBSg6AAo4ePaqBAx7R8ePH7W2enp7617//rc6dO8vXt5pD/+joaK1fv07/+te/L/oU1eX697/+qd27d9u3nZycVKdOHfXoca96/uMfqlChwlWbC4B5CDkAHGRkZGjw4EEOj3P37t1HTz/9tMr8zV/Q99d7c87n4eGhESNHqm/ffnJyYlEaQEF8MgBwMHPGDIeA89RTT2vc+PF/e8CRpDsaNJC7u7u8vb3l6urmsO/UqVN6/bXX9MILz3MZC8AFsZIDwC4uLk59ej9gDw19+/XTCy/8p8TqOfvxZLPZJEmHo6L03Xff6bP/fqbUlBR7v1atW+vdd6fZ+wGAxEoOgPN88vHH9oDj7e2tZ54ZXaL12Gw2h+Di5++vIUOH6quvvla7du3s7WEbN2revLklUCGA6xkhB4Ck/FWT9evX2bcHDw6Wm5vbRY4onpiYGO3ateuKxvDw8NCbb72trl272tvmzpmjo0ePXml5AAxCyAEgSdq7d4+OHTsmKf8pps5dulz1OWJjYzVs6FCNHPGYw1NTxWGz2TRh4iRVq5b/pFd2drbmz5t3NcoEYAhCDgBJ0pEjR+yv69Ste9Ufz46Pj1fIsKFKSDiqU6dOacRjwx1ucC4ONzc3hQwfbt/+bu13ysvLu9JSARiCkANAknT82LnvxKni43NVx05IOKqQYUMVHx9vb0tNTdVjjw3X/v37r2jsjh07qXTp0vljpqRo544dVzQeAHMQcgBIkjKzMu2vz4aGqyExMVHDhg5VbGxsgX0pKSkaHjJMBw8cKPb4bm5uuuOOO+zb0dHRxR4LgFkIOQAkSZU8K9lfJ504cVXGPHbsmEKGDVVMTEyhfZKTkzV8eIgOHTpU7HkqV/ayv046kVTscQCYhZADQFL+I+NnHTp48IrvbUlKSlJIyDCHlZWzNwlL+T/mefabik+cOKGQkGGKiooq1lwZGRn216VLX/lvZwEwAyEHgCSp0Z13ytXVVVJ+6Dj7C+DFkZqaqpBhQ3X4vNDy+ONPqMe999q3m959t155ZfK5oJOUpJBhF76sdSmxsedWiipXrlzsugGYhZADQJJUpkwZNQsIsG//97NPiz1W2bJlVf/22+3bI0c+rkGDBxfo1617d70yeYo96NSqXfuyQ0p8fLwOHjxo3779vHkB3Nyu3s8FA7jh9e3bV+FhYZKktWvX6rffflPTpk0vexwnJye9/PIrsvLyVLNWLQ0ODi60b7du3SRJK0O/1ptvvX3ZX0D46Scf21/Xq1dPvr6+l10vADOxkgPArk2btg6h5vnnnlVCQkKxxnJyctLkKVMVHDzkkn27deum997/4LIDTmRkpJYuXWrf7tO372XXCcBchBwADp57/nm5u+ffvJuUlKQhwYMdLgddjmv5g5lRUVEa/czTys7OliT5+fnp/vsfuGbzAbjxEHIAOKhdu44mTnrZHlDi4uI0cMAjmjt3jjIzMy9x9LWXl5enFStWaOCAR5SYmChJcnV11cuvvKJSpUqVcHUArifckwOggE6dOunFl17S1ClTlJOTozNnzmjmjBn6+KOP1KpVK915V2N5eXnZV3wupnbt2g6Pp19IakqKfr/Ij3ZaeXk6mZys/fv3af26dQ5PYDk5OemllyaoYcNGRT9BADcFQg6AC7rvvvtVvXoNjR/3H/t9OWlpaVq9erVWr15d5HEmTpykf/TqddE++/fv1xOPj7zsGj08PPT6628osHnzyz4WgPm4XAWgUE2bNtXyFV/qsREj5OHhUdLl2JUqVUp9+/bVsmXLCTgACsVKDoCLcnNz05AhQ/Xoo4O0ZcsWhYdtVFxcvI4dS1T6mTOXPL6sR9lL9ildurT8/P0L3V/KyUkVK1aUl7e3mt3TTO3at7/qv5IOwDyEHABF4uzsrKCgIAUFBV31sRs0bKhly5Zf9XEB3Ny4XAUAAIxEyAEAAEYi5AAAACMRcgAAgJEIOQAAwEg2y7Kski4CwM0hPT1dZ/587NzNzU1ly1768XIAKC5CDgAAMBKXqwAAgJEIOQAAwEiEHAAAYCRCDgAAMBIhBwAAGImQAwAAjETIAQAARiLkAAAAIxFyAACAkQg5AADASIQcAABgJEIOAAAwEiEHAAAYiZADAACMRMgBAABGIuQAAAAjEXIAAICRCDkAAMBIhBwAAGAkQg4AADASIQcAABiJkAMAAIzkXNIFACjo7qZNSroEFMPW37aVdAkAzsNKDgAAMBIhBwAAGImQAwAAjETIAQAARiLkAAAAIxFyAACAkQg5AADASIQcAABgJEIOAAAwEiEHAAAYiZADAACMRMgBAABGIuQAAAAjEXIAAICRCDkAAMBIhBwAAGAkQg4AADASIQcAABjJuaQLAHBthK5cpfLly9u3LctSSkqKtm37TR/Onq2YmJgSrA4Arj1CDmCw/fv3a2Xo15Ikm5OTfHx81KPHvZo1+24NeOQRnTiRVMIVAsC1Q8gBDBYXG6ulS5c6tK0MDdVHH3+iXvf10sIFC0qoMgC49rgnB7jJREVFKSHhqKpXr2Fv696jhzaGhatBgwZ68623tPb7dRr5+OP2/TVr1dLkKVMVunKVVq/5TjNmzlRQUEv7/rsaN9bGsHB17NjRYa7/jBuvjWHhanr33Q7tb731tpZ8/j/7dqlSpTRg4EAtWrxY69b/oGXLlmvEyJFycXFxOM7Dw0NPPfW0li1bru/WrtX8+Qv0YP/+cnLiowxAQXwyADcZT09PVa7spcTEhAL7Jk6cpKNHj+rVqVP0/dq1kqT69etr1qzZqlWrlhYvWqQ5cz5Ubm6uXnv9dfXs2VOStHPHDqWmpiogINBhvHvuuUeSFBAQYG9zdXXVXY0bKzw8zN72xKgnFRw8ROFh4Zo6ZYpWrlqpPn366vnnX7D3cXd314yZs9S5Sxd9u3q1Pnj/fR04eFAjRz6uMWPGXr03CIAxuFwFGMzF1UWenpUkSTabVL16DY0ZM0ZxsbFavGhRgf6rvlmlBfPnO7SNGfusTpw4oSFDgpV2+rQkaekXX+iVyVM06smntGHDBp06dUqbNm1Ss/PCTM2aNeXl5aWIiAgFNAvQrJkzJUmNmzSRm5ubwsPC7X27d++uVStX6v3337O37d27VzVq1JDNZpNlWRowcKC8vLw0JDhYMTFHJEkrVqzQ3j279dTTz+iLL/6nQ4cOXaV3DoAJWMkBDBYU1FJffvWVvvzqK6348iu99/77citdWm+99aZSUlIK9F+/bp3Dtq+vr+rVq6fFixfZA46U/6TWgvnz5e7urpYtW0mSfgoPk5eXl2rWrClJahYQoKSkJH3y8ceqXaeOKlSoIEkKDAhUWlqaIiK228c7efKk6tWvr8qVK9vbwjZu1H8/+0yWZUmSOnfuovCwMCUnn1TZsmXtf9av/0GWZRVYRQIAVnIAg+3YsUMff/SRfbt8+XLq0rWrpk1/T++8/baWL1/m0D8nJ8dh27daNUnSvr17C4x98OAB5eTkyLearyRp0+bNys3NVUBAoA4dOqSAZgHasnmztm/fpuzsbN1zTzOtXfudAgIDtXnzZoe53nn7bU16+WUtXbZckZGR2r59m9atW6f9+/ZJklxcXOTj46MuXbuqS9euFzxXz0qexXiHAJiMkAMY7OSJE9q8eZND25o1a/Ta629o+GOPadWqlcrMzCz0eJtskiSrkP2WZclmy++Tdvp0/qWpwEAtXfqF7rzrLr322qvKzMzU9u3bFRAQoB07IuTv769PP/nEYZzNmzfpwX591aZNGzVu0kSdO3fRv//9iBYt+q9mfPCBfY7w8HAtWVzwMpskHTt2rChvCYCbCCEHuAlt+GG9WrZsKR8fH0VHRxfaLzY2/wsD69apq92RkQ77brvtNrm4uCj2vC8VDA8PU0jIcAUEBMjV1VW//vKLJGnLls3q3/8h7di5Q3l5edq06ecCc6Wmpio0NFShoaGy2Wx6+pln9PDD/9RXX36lmJgjOn78uE6eOKFt27ZdjbcAwE2Ae3KAm1Djxk2Um5urEydOXLRfTEyM9u/bp/4PPaQyZco47Bv46CBlZGQoLOzcU1I/hYfL1dVVw4aFaO+ePfb7fjZv2iQvLy/17/+Qfv/9d4f7gby8vfXW2+8oIPDcPTWWZSnqjyhJ0i235M+7fv06dezUSdWrV3eoo0OHDpo3f75q1qplb/Pz91e1ao79itoGwBys5AAGq1q1qu6//377tke5cmrcuIkCAgK0YvlynT7vZuLC/N+b/6fp09/Thx/OUWhoqDIyM9SmTVs1a9ZM//fGGzp16pS9b0xMjA4fPqyatWpp4cJzXzQYFRWlY4mJ8vf318yZMxzGTzp+XJUqeeqllyZoyeJFSkhIkP9tNdWvX19FRkZq35/35cyfN08tWgRp9odz9OWXKxQbG6uaNWvq/vsfUNQff+jInytSFStW1IIFC5Wbm6v7ev1D6enpRW4DYBZCDmCwOnXravR53yFz5swZHTkSrenTpmnp0i+KNMbuyEg9NjxEwcFD9MiAAXJ1ddGB/Qf0wgvPK2zjxgL9fwoPl5+fn7Zs3uLQvnnLFvXs2VM/hYc7tOfl5enpp57S0KHD9EDvPqpYsaKSkpL09ddfa/68efanq06fPq3hIcM0aNBgde7cRZUqVdLJEyf05YoVmjtvrrKzs887xyPKyMhQRkbGZbUBMIvNOvsJAuC6cXfTJiVdAoph62/cLwRcT7gnBwAAGImQAwAAjETIAQAARiLkAAAAIxFyAACAkQg5AADASIQcAABgJEIOAAAwEiEHAAAYiZADAACMRMgBAABGIuQAAAAjEXIAAICRCDkAAMBIhBwAAGAkQg4AADASIQcAABiJkAMAAIxksyzLKukiAAAArjZWcgAAgJEIOQAAwEiEHAAAYCRCDgAAMBIhBwAAGImQAwAAjETIAQAARiLkAAAAIxFyAACAkQg5AADASIQcAABgJEIOAAAwEiEHAAAYiZADAACMRMgBAABGIuQAAAAjEXIAAICRCDnAeTb9/LOGDglW61Yt1aVzJ02cOEEJCQlXZeydO3eqVcugqzJWSWvRPFCRkZFF7l9S556bm6s3Xn9d7dq20XPPjlVaWpp63ttDP/zwgyTp2bFjNHv2rGsyd4f27bT111+vydgAioaQA/xp5cpQPfXUk7rzrrs0/b339OJLLykxIUGPDhxw1YIO/l4bf/xRK1eGatq06Xpm9Bi5u7urW/fuuu2220q6NAB/A+eSLgC4HiQnJ+v1117TuHHj9Y9eveztLVu20lNPjtLbb7+l119/owQrRHEknUhSrVq1dFfjxva2xx9/ogQrAvB3YiUHkPTD+vXy9PR0CDiS5OTkpOGPjdAP69fr1KlTkvIvcUyb9q4eGx6igGb3KCYm5oJj/vLLFv3znw+rRfNADXp0YIHVoA7t2+nzz5eoT+8H1KN7d0lSRkaGpk+bph7duymoRXOFhAzTwQMHHI77/PMlurdHd7Vo3lwTXnpRn37yiZ58clSh57Z161YNHRKsVi2D1L1bV304e7Z935Ili/Xkk6M0c8YMtW/XVm3btNY7b78ty7LsfeLj4/XE4yPVMqiFet7bo0iXYIpz7jk5OXpv+nR16dxJrVu11KgnHlds7Ln39mytn376idq3a6t2bdto8uRXlJGRccEaxo8fp6lTpigiIkJ3N22ihQsW2Ocu7Bx2/f67Bg8epJZBLXT/fb20ZMlih/2bN21Sn94PqEXzQPXr20c///zTRd+HuLg4DR70qL3/tm2/OexfuTJUvXs/oJZBLTRgwCPasmWLw/mOGvWEXn11qloGtdCKFSuKVCOA81gArFdfnWpNnDDhgvvy8vKsoBbNrW3bfrMsy7LGjhlttWvbxvpm1Srr+PHjVk5OToFj/vjjD6t5YKD18UcfWTExMdb336+1ev2jp9UyqIW9T/t2ba2+fXpb27b9Zp08edKyLMt6/bXXrP4P9rN27txhJSQkWFOnTLYe7NfPfszKlaFW2zatrXXrvrdiYo5Yc+Z8aHXq1NEaNeqJC9aekJBgNQ8MtBbMn28lJiZa27b9ZrVv19b6/vu1lmVZ1uLFi6xWLYOs2bNmWSkpKdb2bdusVq1aWqtXf2tZlmVlZmZa99/Xyxo/bpwV9ccfVkREhDV0SLB1z91NrV27dl1wzuKe+9Qpk63+D/aztm/bZh0+fNiaOmWy1aN7Nyvt9Gl7rW3btLamTJ5spaSkWEePxlsjRjxmvfD8cxesIzs72/rss0+tf/3zYSszM9PKzc21z/3rL7/Y/13OmjXTsizLiouLs1q1amnNmzvXio2NtcLDw62OHdpbS5Ystu8PaHaP9c0331hJSUlWaOjXVpvWraxTp05dcP727dpavR+439r4449WVFSUNX7cOKtzp472OtauXWu1atXSWrfueysuLs5avHiR1Tww0NqzZ4/9fJsHBlgfvP++FR8fb6Wnp1+yRgCOWMkBJJ1KTVW5cuUuuM9ms8nDw0MpKan2tg4dOqhb9+6qVKmSSpUqVeCY//3vc7Vu3UqPDBggX19fdejQscAqkSQNGjxYjRs3UYUKFSRJo8eM0Zy589SwYSN5e3ur/0MP68CB/UpPT5ckffbpZxoWEqL27TvI17eahgwZqtv8/Qs9L29vb6365hs9OmiQvLy81LhxEzULCFBERIS9T9myZTUsJETlypXTXY0bq2PHjtr22zZJUnh4mNLS0jRh4kT5+fvrzjvv1IiRI5WXl1fonMU599TUVC1fvlwTJ03SXY0bq0aNGnr+hf/IrXRpfbv6W/sxubm5GjN2rMqVKycfnyr6z3/Gac2aNUpKSiowvrOzs1xd3eTq5iZXV1c5OV38427JksXq0L69BgcHq2rVqgoKCtLTzzyjL1d8KUlKTEyUi4uLWrVqJU9PT917b0+tXvOdypYtW+iYDz/8T7Vq3Vp+fn569rnnlJSUpOjoaEnSwgXzNXbsWLVv30G33nqr+vd/SN27d9eqlSvtx3t7e2vEyJGqUqWK3N3dL1kjAEfckwNI8ihXTqmpqYXuP3XqlMqXPxeCvH18LjrewQMH1SKohUPbHXc0KNDPx9txHJvNpu3bt+nXX39V9OFo7du3V5KUlZWlMmXK6MCB/WrYsJHjuA0a6I8//ii0lqysTH366Sfav2+fjhw5osjISD3wQG/7/urVqzv0L1++vJKTk+3nUb9+fTk7n/uoqF//9osGhuKc+6FDB+Xs7Ky6des5vBd33nmn9u7ZY2/z8/OTq6urfdvX11ceHh46cOCAKlWqVGhNRbF3zx5t2bLF/uSVlB+q3NzcJEmNGjVSg4YN9cD996l16zZq3qK52rVrf9Ex/c8LoB4eHnJ1dVV6erosy1JkZKQmTZyot958094nKytLbdq0sW/7/OW/s0vVCMARIQeQVL9efX300cIL7tu9e7dycnJUq1btyxozNyfXYTsvN7eQnue8OH6cPYQENAtQ+QrlNXDAAEmSZVnKy8uTk5PN4ZgLrSSdtWfPboUMG6YOHToqIDBQDz7YX59/vuSyziPnL3VbluVwz86FXO65X2q8s7Kyswscl5OTI5vNVsgRl2fAwIHq1+9Bh7azgc7JyUmzZs3W9u3btOnnTZo3d55mz5qljz7+pNDVnEvVNW3adNWsVcuhrXTp0sWuEYAj/s8AJLVr315JSUkKDQ11aM/Ly9OsWTPVrn17eXh4FHm82nVqa+tvWx3adkXuuugxeXl5Wr16tSa9/IoGDByolq1aKSvr3F/qNptN/v7+Bb6fZu+evYWOuWHDBjVs1EgTJk7Uvff2VIOGDXX0Mh6Hr127tvbs3q30tDR7W+SuXRcNJcU591o1ayknJ0e7dp3rl5OTo4jt21Wvfn17W/Thwzp9+rR9++DBA8rIyFCtvwSF4qhTp64SExNVtWpV+5/MzExlZmZKktLT0xUVFaUmTZrqsREj9N9Fi5SSkqLNmzdf9lw2m0316tfXsWPHHOY7duzYRQPLpWoE4IiQA0iqUKGCnn3ueU1+5WV98MH72r59m8I2btSoJ57Qnt279cwzz1zWeP369tNvW7dq3ry5io2N1dq1a7V69eqLHuPk5KTq1avrm1WrFBsbox07djhcypCk/v0f0oezZyts40bFxcXps88+1e7dhX8pn18NP+3bt09bt25VXFyc5s6do507dhT5PIJatlSFChU0YcIEHY6KUkREhGbOnOlwyehqnHu58uX1QO/emjDhJUVERCg6OlpTJk9WVlaWunXtZu9XpkwZTXjpRR06dEi7du3SxAkT1KVr1yu+VCVJD/bvrx83bNDChQsUGxujX3/5RU+OGqVvv/1GkrR1668aPOhRbd60SYmJiVq5MlSpqany9/Mr1nwDBz6q996brrVr1youLk6rVq3U8JCQAk/TXU6NO3fu1KBHByouLq5YNQGm4XIV8KeePXuqYsWKmjdvrhYvWqTSpUurRYsW+ujjT+TjU+WyxvLz99e706br3Xfe1tw5c9SgQUM9O/ZZjRkz+qLHvTttul58cbz69umr227z1+DBwXruuWft+/v266e09DRNmTJZyckp6ty5kx566GH9vuv3C47XtVs3xcTEaOyf83bt2k2du3Qp8nm4urrq/Q9maMqUyXr44YdUubKXJr08SaMvEvqKe+5jxz6rGR98oDFjRutMerqaNm2qD+fMUZlbbrH3qV27tlq0CNKQ4MHKzc1Vp86dNXbssxcZteiqVaumWbNm65133tGcDz+Up6enevS4V8HBQyRJrVu3UfCQIXrllZd1/PhxVatWTVOnvqpatS/vMuZZXbt2VU5OtmbNnKG4uDhVq15dEydN0t333FPsGlOSkxV1+LDOnDlTrJoA09isol4MB3BdyM3NdbgPZ9q0d5Vw9KimvvpaCVZ17S1Zsljfr12rD+fMLelSANwguFwF3EA+/3yJBg8apIjt23X8+HFt2LBBK5YvV6vWrUu6NAC47nC5CriB9Op1n+Lj4/Xii+OVmJioKlWqaNiwEPXocW9JlwYA1x0uVwEAACNxuQoAABiJkAMAAIxEyAEAAEYi5AAAACMRcgAAgJEIOQAAwEiEHAAAYCRCDgAAMBIhBwAAGImQAwAAjETIAQAARiLkAAAAIxFyAACAkQg5AADASIQcAABgJEIOAAAwEiEHAAAYiZADAACMRMgBAABGIuQAAAAjEXIAAICRCDkAAMBIhBwAAGAkQg4AADASIQcAABiJkAMAAIxEyAEAAEYi5AAAACMRcgAAgJEIOQAAwEiEHAAAYCRCDgAAMBIhBwAAGImQAwAAjETIAQAARiLkAAAAIxFyAACAkQg5AADASIQcAABgJEIOAAAwEiEHAAAYiZADAACMRMgBAABGIuQAAAAjEXIAAICRCDkAAMBIhBwAAGAkQg4AADASIQcAABiJkAMAAIxEyAEAAEYi5AAAACMRcgAAgJEIOQAAwEiEHAAAYCRCDgAAMBIhBwAAGImQAwAAjETIAQAARiLkAAAAIxFyAACAkQg5AADASIQcAABgJEIOAAAwEiEHAAAYiZADAACMRMgBAABGIuQAAAAjEXIAAICRCDkAAMBIhBwAAGAkQg4AADCSc1E6ZWdnKyszQ5ZlXet6IMlms8nVrbRcXFxKuhQAAG5YRVrJIeD8vSzLUlZmRkmXAQDADa1IIYeA8/fjPQcA4MpwTw4AADASIQcAABiJkAMAAIxEyAEAAEYi5AAAACMRcgAAgJEIOQAAwEglGnKWLf1C361ZXaB9+/ZtWrb0CyUmJhZpnKzMTC1b+oXCwzZe7RIdhG38UcuWfqGszExJ0vp132vZ0i905syZazovAAC4fKzkXAEnJ6c//2kr4UoAAMBfEXKu+jAfpQAABHhJREFUwNmQY7PxNgIAcL0p0g90lrS1363RmTNnFBAYqIjtEcrIOCNvb281aXq33NzcLnhMenq6dkRE6Nix/EteXl7euvOuu1SmTBlJUm5urvbs3q2YmCPKyMhQuXLldEeDBvLxqSIp/2cVfv99pw5HRalUqVKqW7degTnOreQQcgAAuN7cMH875+TkKGJ7hGrUqCFvHx/FxcVp088/Fdr3xw0bFB8fp+rVa6h6jRqKj4/Tjxt+UHZ2tiTp9507tXfvHlWqVFm3336HMjIy9fNPP+n06dOSpN2Rkdq/b59cXd1U1ddXBw8eVHJyssM8Z1dwCDkAAFx/boiVHCl/ZaVxkyby9vaWZVna8MN6JSUlKSUlRe6lSzv0jY4+rPT0NNWtW08NGzWSJLk4u2jv3j2Kjj6sWrVqy8/PTz5VfFSlyq35B9nyg0/S8eO65ZZbdOjQQZUqVUqt27SWu3sZnambru/WrHGY5+y9ODYb9+QAAHC9uWGWIGw2mypXrmx/7eXtLUk6lZpaoO/ZFRefKlXsbVX+fJ18Mn9fWQ8PZZzJ0NZff9GPG37Q7shISVJeXp4yMzOVlZWl8uXLy909//KWu3sZlS9f3mEeJycn2Ww2Qg4AANehEl3JcXZ2VmZWVoH2rMws+/7zWZZlf52Xl1f4wNZFmv7MIxt/3KDk5GT5+vrq1lurqkKFijpwYP9F6/3rsH7+/qr0Z/ACAADXlxJdyalY0VNZmZnav3+fve1EUpLi4+Pk7OyscuXK2dsty1JCwlFJ+QEnISFBkhz6nFWhYgVJ0tH4eHvb2dcVKlRQWlqaTp48qRo1aiggsLnq1K2rUqVK2fu6ubnJ1dVVKSkpSk9Pl5R/I3PKX+7JqVjR036jMgAAuL6U6EpOg4YN9eOGH7Rzxw5FR0fLxcVFJ5KSlJeXp4aNGjms5NhsNu3csUOJiYlKTUlRakqKKleurHLly9u/nO+sGjX8tG/vXh04sD//RmObdDgqSu7uZVSjhp+k/EtNCQkJ2r9vnzKzMnXo0CGHuW67rab27t2jsI0/yqdKFSUcPSpnZxfl5uba+238cYNSU1PVpWtX3XJL2Wv8bgEAgMtRois5np6eatuuvXyqVFF6WppOnjih8uXLq1mzgAKPbNtsNjVpercSExKVnJysqlWrKrB5iwuO6+zsrDZt2+nWW6sqJjZGMTExuvXWqmrbrp1cXFzk4uKiFi2C5Orqqt27I5V88qRuv/12hzHuaNBAderUVVZWlmJjYnRbzZryrOTp0MfDw0Pu7mXk4uJ6dd8YAABwxWzW+Te6FOL0qYI39/6d1n63RqdPn9b9D/Qu0Tr+bmU9Cl6KAwAARXPDPF0FAABwOQg5AADASDfE5aqbFZerAAAoPlZyAACAkQg5AADASIQcAABgJEIOAAAwEiEHAAAYqUghh1/Z/vvxngMAcGWKFHJc3Urzl+7fyGazydWtdEmXAQDADa1I35MDAABwo+GeHAAAYCRCDgAAMBIhBwAAGImQAwAAjETIAQAARvp/BCRisf9kDq0AAAAASUVORK5CYII=)"></div>Form / File Upload</a><a class="thumbnail" href="/wave/docs/examples/form-frame"><div style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPMAAABvCAYAAAA5UvYHAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjE1OjMyIFBNIFBEVK0FpMUAAA3ISURBVHic7dx/TFXlHwfwz5V7+R2/MX6oIOQQWRbZIMQVg2wFmkglEDbZMoiAppXVbDUbtrlkE9parZyBiY5ZcwMU/MEmWCmVZjhnVpgKTUTC+CUIyuf7h+PEc84BLpeLcp/v+7XdyXPO53nOj8v7nnufe9DAzEwAYPNm3OsdAADrQJgBJIEwA0gCYQaQBMIMIAmEGUASCDOAJBBmAEkgzACSQJgBJIEwA0gCYQaQBMIMIAmEGUASCDOAJBBmAEkgzACSQJgBJIEwA0gCYQaQBMIMIAmEGUASCDOAJBBmAEkgzACSQJgBJIEwA0gCYQaQBMIMIAmEGUASCDOAJBBmAEkgzACSQJgBJIEwA0gCYQaQBMIMIAmEGUASCDOAJBBmAEkgzACSQJgBJIEwA0gCYQaQxP9NmGtqashgMGgeTz755IRqwLreffdd3XO+efPmCY1TVFSkO05eXt4U7fn0Y9UwFxYW6p5Q9WP+/PlCP0dHR7P67dq1y+J9W7p0KZ04cYJCQ0MnVTOVqqqqzDoPLS0tFo3f398/6phxcXHWPRgzvf/++1RVVTXpcXJycqiuro6cnZ3Hrd28ebPm+Nva2ia9D/eaVcOcmZlJVVVVVFhYSIGBgZr1eXl5VFZWRt98842w/NixY1RSUkIvvviips/8+fOpqKiIampqaPny5Rbvm52dHUVHR5OPj8+kaqZSfHw8VVdX06pVqzTrQkJCqLS0lH788Ufy9/fX7c/MVFtbS7W1tTQ0NKRZ7+joSKdOnaLy8nJKSkoiIiIfHx/asWMHbd++3boHYyYXFxdKSEiY9DgODg70+OOPk8lkGrc2ICBAaBuNxnv2nFsVT5HY2FgmIuFx7ty5MftUV1dr+qSmplp1v6Kjo4XxExISLKqZSpcuXWKDwSDsg5OTE3d2do7Zb+T5q6ysHLN2+fLlTET8yiuvWHPXLdLX16d53gsKCiway93dXRgnNzdXU6P+PZs1a9ZkD2Fa+L/5zGxL5syZQ0uWLBGW9fX1ad7RqH322We6P6v19fXRkSNHiIgoJSVlEntqm9RXZnXbViHM01RGRoZm2c6dO0etb2lpof379yvtmpoaunjxom7tkSNHqK+vj9zd3Sk+Pn7S+zqdGAyGcWvUH1NG+9hiaxDmaeqFF14ge3t7YVl9fT1dunRJt/6LL76g27dvK+2hoSH6/PPPdWsrKiqIiCgpKUmzDVtnzmdmHx8f4bhxZZ4Gbt++TaWlpZSYmEj+/v5kb29P7u7utGjRIiooKKCurq4p34eamhpKT0+nuXPnkouLCzk7O1NwcDClpqbSgQMHLB7Xy8uLnn76aWEZM+vO6N+6dUt3AmvHjh00MDCgGWN49ni0t9jt7e20adMmiomJIR8fHzKZTOTt7U3R0dH0wQcfUHt7u6bP6tWrdWfJ33zzTaWmtbWV3njjDQoKCiKDwUC3bt0a/0SoMDN9++23lJycTAEBAeTg4ED33XcfhYSE0LPPPkv9/f3jjmEwGMjPz09pyxJmm50Aa29v55iYGKXO29ub16xZwwEBAcqy8PBwbm9vF/pZawKsv7+fV61apdSYTCZOT0/n5ORkYfIqNTWVb968OYEz95/y8nLN+QgLC9PU7d27V1M3/CgrKxNqGxoalAm1np4ezVi1tbXs4eGh9F+wYAFnZWVxcHCwsszDw4Pr6uqEfmfPnuXCwkIODAwUtj88wVZdXc2enp7CusHBQWY2fwKsp6eHExMThbqQkBBeu3Ytr169mqOiojQTh3oTYMzic7x9+3bznpBpzmbDnJSUJNT98MMPzHznl3Hk8pdfflnoZ60w5+fnCzXbtm1T1m3cuFFYt2HDhnHPl54bN26wm5ub5pw0NDQIdQkJCUxE/NBDD2lqlyxZItS+9957TES8YsUKzfb++usvYXuBgYFK4Nva2oSZYg8PD25padGMMbwvw4+0tDTevXs3G41Gzb5NNMwZGRlCTXR0NPf29go15sxmMzOvXLlSqTlw4MAYz4LtuKthjouL46SkpFEfUVFRZoX5+++/F2qCgoKUdQMDAzxjxgxlnZOTk/CEWyPMzc3NbGdnJ9S0tbUp65uamoR1JpOJW1tbLTqPmZmZmnOSl5enrD9//jwbDAY2Go3c1NTE3t7emvrGxkal/sEHH2Qi4tLSUs22srKyhH6vvfaasP6ll14S1ufn52vGUIc5MDCQjUYju7q68vPPP8+FhYW8ePHiCYf51KlTmprvvvtOs31zw5ybm6vUnD59eoxnwHbc1TBb8tAL87p16zQvEiOpn9Djx48r66wR5uLiYmG9p6enZgxXV1eh5tNPP7XoPB4+fFhzTnx8fHhgYICZmdevX89ExM899xwzM7/11lua+pycHGZmvnjxIhMRG41G7ujo0GzLy8tL6FdcXCys37p1q7De19dXM4Y6zG5ublxcXMzd3d1KzdGjRycc5uHjHGvbzOaH+aOPPtJ9IbZld3UC7Ny5c8R3XkB0H9XV1WaNc/LkSaHt6uoqtB0cHIT233//PbkdV/n555+Ftq+vr6Zm5syZQvunn36yaFvx8fGar07a29upurqa+vv7qbS0lIiIXn31VeVf9dczu3btou7ubmUWOy4ujjw9PYWaCxcuUEdHh7BMfVz333+/0L527dqos+vDwsPD6fXXXxeeoyeeeIL2799PdnZ2Y/Yd6cSJE0I7IiLC7L56hs+pyWSS4+4vstHZ7NbWVqGtvqdZfZ9tb2/vlG7fyclJU+Pi4iK0r1y5YtG2ZsyYQWlpaZrlO3fupPLycuro6KB58+Ypt0SGhobSU089JdR2d3dTWVmZEma9WWz1MRFpj0t9TESWH1diYqJZ3wkPu3z5stBWv7BM1PAMtp+f34T2Yzoz3usdsMSNGzeEdlBQ0Jh/KBASEjKl29e7wqi/75zMC0pGRgZt27ZNWFZVVUW///47ERFlZ2cLv5A5OTl08OBBob6oqIguXLhABoOBVqxYodmG+piItMel9x2utV8oR9PT0yO0J/v9+HCYpflaimw0zOq31ZGRkVRSUnLXtq++Qo28WWPY4OCg0Fbv80QsWrSIwsLC6Pz588qymzdv0pkzZ8jR0ZEyMzOF+mXLltHs2bOpublZWTbcNyYmRvcXWO+qqz4u9TERTe64JsLJyYk6OzuVtvr784maN28e7du3b9JX+OnEJt9mqz9D3o2bQ0ZSh0Hvqqa+kkz2CqB3eyfRnTvFvL29hWV2dnaUlZWlWz/ajSJ6+6c+LvUxjdZvKqjnIPQ+FkyEo6MjxcTE0MMPPzypcaYTmwxzVFSU0B5+u3m3PProo0L72rVrQpuZ6erVq2P2mSi9Pw8luvOWWs/atWt13xavXLlStz4oKEgzEaQ+LnWAZs6cSbNnzx51n60pMjJSaJ85c4aY2aKxrl+/TnFxceTn50fu7u5UWFhojV2852wyzOoJoZaWFjp06NBd235KSgoZjf99Qvn333+FSbempibhqmYymSb910mhoaH02GOPCcsWLlxIMTExuvV+fn6a4C5cuHDM/3hB/XfUI9/WExE1NjYKbb2JuamSnJwstDs6Oujo0aMWjfXhhx9SXV0dEd356PD222/T6dOnJ7uL95xNhjkyMpJSU1OFZenp6bRnzx7q6+tTlrW2tlJtba1F9wCPxd/fn3Jzc4Vlu3fvVn5W3ye9bt06q3w2U7/VHu2qPNr68V5Q3nnnHXJzc1PaFRUVygTX1atXhf8RxNPTkzZs2GDWflvDsmXLNFfn9evX0/Xr15V2Y2OjWZ+lz549K7SZWbPMJlnzS+vW1lbet28fb9myRbhHmkbcvFBSUsInT54U+h07doy//PJLTk1N1fQJCwvjwsJCrqys5H/++Ufp09XVpblPl0bcqDB8+6C9vT339vbywMAAHz9+nENDQ4XaiIgIbmho4MHBQbNqhvX19XFKSopSYzQade/NzsjIUG7wmKy2tjbluFxdXbmrq2vcPgsWLFD25ddffx23/vDhw8ItneHh4Zydnc1z5sxRlnl7e3N9fb3Qr7u7m+vr6zkiIkI4d6GhoXzw4EG+fPmy7vY6Ozu5srJS8xympaXxb7/9JtT++eefmufGw8ODY2NjhXvHRz4eeOAB/vjjj4VztWnTJqHG3t6e//jjj3HPzXRn1TCr7xAa7aH+YwEHBwez+n399ddCv6GhIa6srOTU1FQODg5mZ2dnNplM7O/vz0uXLuUtW7Zwc3MzMzN/9dVXY469Z88es2rUKioqOCUlhWfNmsUODg7s5OTEc+fO5fT0dD506JA1Ty8zMz/zzDNMRJydnW1W/SeffKKEylytra28ceNGfuSRR9jd3Z2NRiN7eXnx4sWLuaCgQHhRHaa+b1rvoReYNWvWjNnnypUrQn1PTw9v3bqVY2Nj2cvLS7l119fXl/Pz80d9gf/ll1+UMfr7+zk7O5s9PDw4JCSE9+7da/a5mc4MzBbOIgDAtGKTn5kBQAthBpAEwgwgCYQZQBIIM4AkEGYASSDMAJJAmAEkgTADSAJhBpAEwgwgCYQZQBIIM4AkEGYASSDMAJJAmAEkgTADSAJhBpAEwgwgCYQZQBIIM4AkEGYASSDMAJJAmAEkgTADSAJhBpAEwgwgCYQZQBIIM4AkEGYASSDMAJJAmAEkgTADSAJhBpAEwgwgCYQZQBIIM4AkEGYASSDMAJJAmAEkgTADSAJhBpAEwgwgif8B1l8uv8iTAYwAAAAASUVORK5CYII=)"></div>Form / Frame</a><a class="thumbnail" href="/wave/docs/examples/form-frame-path"><div style="background-image:url(/wave/assets/images/form-frame-path-e829e3ff6a85bcc0e461e8c2cb505c32.png)"></div>Form / Frame / Path</a><a class="thumbnail" href="/wave/docs/examples/form-menu"><div style="background-image:url(/wave/assets/images/form-menu-d7388e52d93d99081c085e2d1baa003d.png)"></div>Form / Menu</a><a class="thumbnail" href="/wave/docs/examples/form-template"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Template</a><a class="thumbnail" href="/wave/docs/examples/form-markup"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Markup</a><a class="thumbnail" href="/wave/docs/examples/stepper"><div style="background-image:url(/wave/assets/images/stepper-6ec5c425af780ae34209e38d2ae8821a.png)"></div>Stepper</a><a class="thumbnail" href="/wave/docs/examples/table-markdown"><div style="background-image:url(/wave/assets/images/table-markdown-fff816fa17022f80817f83239970db97.png)"></div>Table / Markdown</a><a class="thumbnail" href="/wave/docs/examples/table"><div style="background-image:url(/wave/assets/images/table-f4d13c60963beb31475a54192f62b47d.png)"></div>Table</a><a class="thumbnail" href="/wave/docs/examples/table-sort"><div style="background-image:url(/wave/assets/images/table-sort-160ae663649156d89ea2cea500cc21b1.png)"></div>Table / Sort</a><a class="thumbnail" href="/wave/docs/examples/table-search"><div style="background-image:url(/wave/assets/images/table-search-f29a132ad20079a67a0fee3143689fa6.png)"></div>Table / Search</a><a class="thumbnail" href="/wave/docs/examples/table-filter"><div style="background-image:url(/wave/assets/images/table-filter-ce33da2e8b6fa9d9965683c9017e8662.png)"></div>Table / Filter</a><a class="thumbnail" href="/wave/docs/examples/table-filter-backend"><div style="background-image:url(/wave/assets/images/table-filter-backend-e69a57efeee01d99d32a542a71466995.png)"></div>Table / Filter / Backend</a><a class="thumbnail" href="/wave/docs/examples/table-download"><div style="background-image:url(data:image/png;base64,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z/g6bN0OfQvwvfxU+7Ut7UIBJSItlxHA9+KTTkit2UBkwlexl69u82btD4qJTLwAe/NWyMvF/9Y86KyVy080CigRaZ2cLHxv/A3j29NgWynRqd/AuvU/4XObEiaL/cjTRC+YAQeqMAYPxL/4NejXu03aEnfpHpSIJI019ymsm+9wNjUc2A/zumswZ10OgfRWv7f91Dysh56M9dCMa2bie/DuVr+veJcCSkSSyl65huiMH8COQ9uzZ2ZgXv4tjNmzMIYWJvhe67CffxHruZehrNw52K83vrtuw/iXC5NcuXiNAkpE2oT1349g/fl/YFvp4YNdT8IYWohxylAYMghj+GCMMSOgU6bT69q3H3tpCdaiZdgvv3k45A5da/7bjzBnz2r/H0ZcoYASkTZlz38F68HHsRd92KLrjfOmYn7jAoxvX5KUoULpOBRQItJu7Hfew/6gGHvxMuwt2476gK8x8mSMcSMxzp6McfH5CqUvMQWUiIh4kqaZi4iIJymgRETEkxRQIiLiSQooERHxJAWUiIh4kgJKREQ8SQElIiKepIASERFPUkCJiIgnKaBERMSTFFAiIuJJCigREfEkBZSIiHiSAkpERDxJASUiIp6kgBIREU9SQIlIu7vjjju444473C5DPE4BJSIinqSAEpEOa+nSpYwbOyb2a+oZU/jed7/L+++/72pdt/zsZh566C9t2sbECePZsGFD3K9fu3YtRZMntWFFyaeAEpEOLSUlhVdefY1XXn2Nhx5+mKKiIm79xc95+umn3C6tQ5s/fz6zZl3jag1+V1sXEWklwzDo2bMnAD179mTo0GEMGTqEm268kbPOOptevXq5XKG0lHpQInLCmThxEkOGDOWdt9+OHVu7di2zZl3DpIkT+NrFF/HsM8/Ezt1++79z1113xr5/7733GDd2DOvXr48d+9H1s5n78MMAnH3Wmbz66qt859uXM3HCeC6fOYNNGzces57jtQ1QVlbGL37+c84+60ymnjGFX912GwcPHoydLy8v50fXz2bypIlcfNGFlCxf3uz/g2XLPuTyy2cyccJ4rrn6KioqKuJu849//AN33flbVq9axbixY3jxhRfiqjPZFFAickIaPXo0H2/5GICysl1cd+0PmVI0hefnz+cXt/6Sxx//n1hQFBUVsbS4OHbth0uX4vf7WfbhhwA0NDSwYsUKJhcVxV7z9FNP8qt/v52333mXwsGDufXWXxy1jubatm2bn9x0EwCPP/EkTz71NDt3lvLgnx8AIBwOc921PyQ3N49nnnmWO+/6HQ899Bcikcgxf/bt27fz4x/9mAu+egHz//f/uOLKK/nv/5oTO99cmzfd9BN+evPNDBs2jCXFS/n6N77R7DVtQQElIm2urKyMhoaGY55vaGigrKwsqW1mZWVRU10NwLzn5nHqqadxzaxZ9OpVwKRJk7jppp/wxBOPY9s2EydOYvfu3ezevRuA4qXFfOeKK1i61AmtVatWkpGZybBhw2LvP2PGTIYMGUJWVhY//OG1bN++94pyFgAABIRJREFUnQMHDnyhjubaNgyDRx97jP/4zW/o06cPffv25aKLLmb16tUALFq0kNraWm6/4w769uvHyJEjuW72bCzLOubP/vzz85gypYgrrrySXr16cfbZ5/C1r389dr65Nn0+H6mpaaSmpZGamoppms1e0xZ0D0pE2tzvf/97SktLef7550lJSWlyLhKJMGPGDLp3784DDyTvX+PV1dVk5+QAsHnzJk4/fXyT86NGj6ayspL9+/bRuUsXRo4cxdLiYiZNnkzVgQNceeVVXHThBYTDYYqLi5k0aRKGYcSu7927d+y/cw61U1dXR25ubpN24mnbNAzeeON11q9bx85du9iwfj1du3YFYOuWrQwdOhS///DH9dChwzDNY/cvtm7ZysRJE5scGz785CbfH6/NY2nJNa2hHpSItLl7770X0zSZPn16k6GpSCTC9OnTiUaj3HfffUltc9XqVQwZPAQA26ZJuBxNUVERxcVLWLq0mPHjx5OTk8PAgYNYtWoVxUuKKTpieC8RzbVdV1vLd674Dm+8/jqFg4cw65pZzJ59fZPXRKLRz72njW3bx203Gml6jXXEe8TTZkvqTDYFlIi0Ob/fz3PPPYdlWcyYMYNIJBLrOUUikaP2rFpjwYIP+Hjzx5z3la8AMGTIEJZ/bmLB8mXLyM/PJ69zZwAmFxXx4bJlLFm8hPETJgAwYcIE3n77LbZu3cKECU17JPFqru2PPvqIPRUV3P/An5k2bRqnnnZak6HCQYMGsfGjj6irrY0d27B+/XEDalDhIEpWlDQ5tn7D4QkfzbUJYBg46ZrANcmmgBKRdpGSksK8efMIh8PMmTOHOXPmEA6HWx1Otm3H7h9t2LCBuQ8/zL/dcgs33nQj3bt3B+Cy6ZexatVKHn7oIcrKyli8eDH3/ulerr76mljvprCwkEB6Ou+++04sjCZMnMBLL77IKaeMICsrq0X1Ndd2Qe8CwuEwr7/2GuXl5bz77rvMm/dc7PpJkyeTm5vL7bffzo7t21m9ejUPPvggqampx2zz0mmXsqKkhEcffYSysjLeffdd3nrrrdj55toEOOmkfLZt20ZJSQk1NTVxXZNsCigRaTepqanMnz+fqVOnMnXqVObPn3/cD9p4NDQ08LWLL+JrF1/E7OuupaSkhLvv/gPTp8+IvaZXrwL+8tBDFBcv4dJpl3DXnb/l+//6fWbMnNnkvSZPLqJv375069YNgJEjR5EeCLR4eC+etrt1684f/ngPc+c+zKXTLuHll1/iiiuujF2fmprK/Q/8mbpgHTNnzuBXt93G7OtnEwgEjtlm3379uG/Of/HuO+8w7ZJv8bdnn+WWn90SO99cmwBTpkzhK+efz4033sBbb74Z1zXJZtjNDWSKiCRZKBTCMIxWh5Oc2BRQIiLiSRriE5E2d8cdd2AYxnF/afsN+Tz1oERExJPUgxIREU9SQImIiCcpoERExJMUUCIi4kkKKBER8SQFlIiIeJICSkREPEkBJSIinqSAEhERT1JAiYiIJymgRETEkxRQIiLiSQooERHxpP8HRD0aACVCyDwAAAAASUVORK5CYII=)"></div>Table / Download</a><a class="thumbnail" href="/wave/docs/examples/table-groupby"><div style="background-image:url(/wave/assets/images/table-groupby-8a15ae0b2ea905a6961c5783aebe43c5.png)"></div>Table / Group by</a><a class="thumbnail" href="/wave/docs/examples/table-select"><div style="background-image:url(/wave/assets/images/table-select-428e4b7f6e76c00956feb8ede847a369.png)"></div>Table / Preselection</a><a class="thumbnail" href="/wave/docs/examples/image"><div style="background-image:url(/wave/assets/images/image-dab53361cb560c92baeb4fb3315cab5a.png)"></div>Image</a><a class="thumbnail" href="/wave/docs/examples/frame"><div style="background-image:url(data:image/png;base64,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)"></div>Frame</a><a class="thumbnail" href="/wave/docs/examples/frame-path"><div style="background-image:url(/wave/assets/images/frame-path-0db07ced544338ad72aef8fed53c931d.png)"></div>Frame / Path</a><a class="thumbnail" href="/wave/docs/examples/template"><div style="background-image:url(/wave/assets/images/template-1b5f5707f248dfd5a606e722345ad2a2.png)"></div>Template</a><a class="thumbnail" href="/wave/docs/examples/template-data"><div style="background-image:url(/wave/assets/images/template-data-1b5f5707f248dfd5a606e722345ad2a2.png)"></div>Template / Data</a><a class="thumbnail" href="/wave/docs/examples/markdown"><div style="background-image:url(/wave/assets/images/markdown-3164a3fca5f8ccd5e61dbb00656dc796.png)"></div>Markdown</a><a class="thumbnail" href="/wave/docs/examples/markdown-data"><div style="background-image:url(/wave/assets/images/markdown-data-34fd56cbb56e79c00a4539f5bfab1e3b.png)"></div>Markdown / Data</a><a class="thumbnail" href="/wave/docs/examples/markup"><div style="background-image:url(data:image/png;base64,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)"></div>Markup</a><a class="thumbnail" href="/wave/docs/examples/nav"><div style="background-image:url(data:image/png;base64,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)"></div>Nav</a><a class="thumbnail" href="/wave/docs/examples/toolbar"><div style="background-image:url(/wave/assets/images/toolbar-6cae7b599ebdc78e77db0f536dc3392e.png)"></div>Toolbar</a><a class="thumbnail" href="/wave/docs/examples/tab"><div style="background-image:url(data:image/png;base64,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)"></div>Tab</a><a class="thumbnail" href="/wave/docs/examples/tab-link"><div style="background-image:url(data:image/png;base64,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)"></div>Tab / Links</a><a class="thumbnail" href="/wave/docs/examples/tab-delete"><div style="background-image:url(data:image/png;base64,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)"></div>Tabs / Navigation</a><a class="thumbnail" href="/wave/docs/examples/breadcrumbs"><div style="background-image:url(data:image/png;base64,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)"></div>Breadcrumbs</a><a class="thumbnail" href="/wave/docs/examples/header"><div style="background-image:url(/wave/assets/images/header-0cdf3777b66e47f9e5320eee81ac5e10.png)"></div>Header</a><a class="thumbnail" href="/wave/docs/examples/hash-routing"><div style="background-image:url(/wave/assets/images/hash-routing-816838345c1b3e01e3fe1664c336f3d6.png)"></div>Routing</a><a class="thumbnail" href="/wave/docs/examples/toolbar-routing"><div style="background-image:url(/wave/assets/images/toolbar-routing-84cf0d9860b9d575f5703ddf0e001bf7.png)"></div>Routing / Toolbar</a><a class="thumbnail" href="/wave/docs/examples/tab-routing"><div style="background-image:url(data:image/png;base64,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M1GbN21SYGB5J76uqPlUTf34n/9cd7ybNkXo8cefcELoigYNG+r333/X8ePHU3fjaZBZ17wStFeULFVSZ86ckZT4kHxoaDU99NBDOnHihLZu3arFixcpKioq2bsnS5a6+m+b67775HK5VOjBQs42l8ul3Pffr6ioKGdb4hIkz4ABANLP+AzYFTlz5lSdOnVVp05dxcbGaszoUerTp7e++nq58uTJo7Nnz6pAwYLJXlfwbwV19uxZr22WrBSvkdL2EgEBevTRR7V61So98cQTWr1qpUJCqii/n1+qx14iIECFChXS5k2b5PF4FB0drfIVKig4OERbtmzR802bauvWrerdu48kOeNt26Z1smffPB6PoqLOJruGlBirSZ09e1abNkWoYoXyqR7rldcVTOnfsuDfnP1XZowySmZd0+32/pH1cblkezzO9/Pnz9OsmTN1+vRpFS5cWH//+9+VO3fuZB9xcr2fmWvZuvo6liABABnFaIB5PB7t3btXhQsXVp48eZztuXLlUtdub+irr77Svn37VKlSJeXLl0+RkaeSnSMyMlJ58+ZN1zieadBAn82Zo46dOmn9+vUaMnTYzV90jaqhodq0KUK2bD355JPKkSOHgkOCtWDBfP380086d+6cQqokfqTClXt98823FBgYmOxc+fLnT9U18+TNo8KFC+u9995P01jz5cunvXuSPyN2OjJSkpx/T5flHTOSdCnJc3qZcc2MtGXLFo0dM0ZvvvmWGjZq5LybtmXLFhly/rp16ypbkhlZAABuldH1FMuy1KVLZ02elDwgfvwx8Z18V5bXKgcFac3q1V4P6sfHx2vlihUKCg5O1zjqPV1PkZGRmjx5ktxut6pVq5bmc4SGVtOOHTv0/fffO+9c/Mc/ysrj8WjGjBl6/PEnlP9yWOXPn18lAgK0b/8+lQgIcL4eKlxYBw4e9FpmvZFKlSrr1KlTypkrl9d5oqKjdeEGoRRUOUi7du1ylkyv+PKrL1WkSBEVLlxYUmIU/fbbb17HbNu+Ldn5LMtSfHz8Dcea2mtmpKNH/59y5sypZi+84MRXdHS0fj9yJEPOX6duXdWsWTNDzgUAuLcZnQGzLEsdXuug8ePH6cyZs6peo4bcbrd2/fKLli5donr166to0aKSpPbt2mvVypXq0vl1vfRSK1kul+bPm6vTp0/rtdc6pGsc+f38FBwc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)"></div>Routing / Tabs</a><a class="thumbnail" href="/wave/docs/examples/card-menu"><div style="background-image:url(/wave/assets/images/card-menu-db530edd23afd919e8bb15708a24c76b.png)"></div>Context Menu</a><a class="thumbnail" href="/wave/docs/examples/plot-point"><div style="background-image:url(/wave/assets/images/plot-point-ca45d9c0f59368e2e351f8bc69f5566f.png)"></div>Plot / Point</a><a class="thumbnail" href="/wave/docs/examples/plot-point-shapes"><div style="background-image:url(/wave/assets/images/plot-point-shapes-98b5ada97343dfb174c19df0f0ea7ea8.png)"></div>Plot / Point / Shapes</a><a class="thumbnail" href="/wave/docs/examples/plot-point-sizes"><div style="background-image:url(/wave/assets/images/plot-point-sizes-8591d0b3d70acfe4b28d08c74515ed4d.png)"></div>Plot / Point / Sizes</a><a class="thumbnail" href="/wave/docs/examples/plot-point-map"><div style="background-image:url(/wave/assets/images/plot-point-map-13e6e7b5d7bfc7c6337172bb86dc84e2.png)"></div>Plot / Point / Map</a><a class="thumbnail" href="/wave/docs/examples/plot-point-groups"><div style="background-image:url(/wave/assets/images/plot-point-groups-d949b54bdc3583a858a7cc8c46532c90.png)"></div>Plot / Point / Groups</a><a class="thumbnail" href="/wave/docs/examples/plot-point-annotation"><div style="background-image:url(/wave/assets/images/plot-point-annotation-394f235e137883e033b2cc056955e713.png)"></div>Plot / Point / Annotation</a><a class="thumbnail" href="/wave/docs/examples/plot-point-custom"><div style="background-image:url(/wave/assets/images/plot-point-custom-2a5eefc8951352109b57a03aa44baeb8.png)"></div>Plot / Point / Custom</a><a class="thumbnail" href="/wave/docs/examples/plot-interval"><div style="background-image:url(/wave/assets/images/plot-interval-95ba708d52bd4b0bda18da55cfd578e0.png)"></div>Plot / Interval</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-transpose"><div style="background-image:url(/wave/assets/images/plot-interval-transpose-d7705a1125bbded7646d335b2bfba02d.png)"></div>Plot / Interval / Transpose</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-groups"><div style="background-image:url(/wave/assets/images/plot-interval-groups-b096660ab331215122bb6771cda619ac.png)"></div>Plot / Interval / Groups</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-groups-transpose"><div style="background-image:url(/wave/assets/images/plot-interval-groups-transpose-7a36b34fbae40cd7d645e149db067bf2.png)"></div>Plot / Interval / Groups / Transpose</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-labels"><div style="background-image:url(/wave/assets/images/plot-interval-labels-bc80dada33a6a5f1a61854ef21caf76e.png)"></div>Plot / Interval / Labels</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-range"><div style="background-image:url(/wave/assets/images/plot-interval-range-38b09db44df660cf127c051bee921b70.png)"></div>Plot / Interval / Range</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-range-transpose"><div style="background-image:url(/wave/assets/images/plot-interval-range-transpose-ac0df7689c88cb6fe886aaed084918bf.png)"></div>Plot / Interval / Range / Transpose</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-stacked"><div style="background-image:url(/wave/assets/images/plot-interval-stacked-6a492804251cf9ef3fcd33cf721b725f.png)"></div>Plot / Interval / Stacked</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-stacked-transpose"><div style="background-image:url(/wave/assets/images/plot-interval-stacked-transpose-9f125bb40e6aea97cd6ad2b4e547a259.png)"></div>Plot / Interval / Stacked / Transpose</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-stacked-grouped"><div style="background-image:url(/wave/assets/images/plot-interval-stacked-grouped-678de98e675478e364cab127af4c07bb.png)"></div>Plot / Interval / Stacked / Grouped</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose"><div style="background-image:url(/wave/assets/images/plot-interval-stacked-grouped-transpose-2b181afc5e1a2626b7e700625c7f41b3.png)"></div>Plot / Interval / Stacked / Grouped / Transpose</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-polar"><div style="background-image:url(/wave/assets/images/plot-interval-polar-e54d13fed4e4ea004992a91a9e4644df.png)"></div>Plot / Interval / Polar</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-polar-stacked"><div style="background-image:url(/wave/assets/images/plot-interval-polar-stacked-dbb95e41cc47e31cb7614c6c9f3bf387.png)"></div>Plot / Interval / Polar / Stacked</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-theta"><div style="background-image:url(/wave/assets/images/plot-interval-theta-ecd6315a48713f45d162e64c4414325c.png)"></div>Plot / Interval / Theta</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-helix"><div style="background-image:url(/wave/assets/images/plot-interval-helix-b499f18c451e87aa39d64ca154a15bdf.png)"></div>Plot / Interval / Helix</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-annotation"><div style="background-image:url(/wave/assets/images/plot-interval-annotation-ad30e4c2b779c452d7ab7d805f037c43.png)"></div>Plot / Interval / Annotation</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-annotation-transpose"><div style="background-image:url(/wave/assets/images/plot-interval-annotation-transpose-a0e697aba7f9fa2b783814edfb13d0be.png)"></div>Plot / Interval / Annotation / Transpose</a><a class="thumbnail" href="/wave/docs/examples/plot-line"><div style="background-image:url(/wave/assets/images/plot-line-47205e6d75190eb08bb6cecf3dfe347b.png)"></div>Plot / Line</a><a class="thumbnail" href="/wave/docs/examples/plot-line-groups"><div style="background-image:url(/wave/assets/images/plot-line-groups-b3aacba3e2a8fd2306aef09adcb88fea.png)"></div>Plot / Line / Groups</a><a class="thumbnail" href="/wave/docs/examples/plot-line-smooth"><div style="background-image:url(/wave/assets/images/plot-line-smooth-566975ab0a25c3e3ad7b3941ca441df6.png)"></div>Plot / Line / Smooth</a><a class="thumbnail" href="/wave/docs/examples/plot-step"><div style="background-image:url(/wave/assets/images/plot-step-8c593fd75d3829ee2e6928c3e3c32372.png)"></div>Plot / Line / Step</a><a class="thumbnail" href="/wave/docs/examples/plot-step-after"><div style="background-image:url(/wave/assets/images/plot-step-after-72cc87c6a29c712eb6728e9d6bd626ca.png)"></div>Plot / Line / Step / After</a><a class="thumbnail" href="/wave/docs/examples/plot-step-before"><div style="background-image:url(/wave/assets/images/plot-step-before-45d2a85b93deb34a9e029e0d1ac5e578.png)"></div>Plot / Line / Step / Before</a><a class="thumbnail" href="/wave/docs/examples/plot-line-labels"><div style="background-image:url(/wave/assets/images/plot-line-labels-f98b2fc53482efef18cf834fcd851704.png)"></div>Plot / Line / Labels</a><a class="thumbnail" href="/wave/docs/examples/plot-line-labels-stroked"><div style="background-image:url(/wave/assets/images/plot-line-labels-stroked-8f085e306871e3c87d798b4c4206fc11.png)"></div>Plot / Line / Labels/ Stroked</a><a class="thumbnail" href="/wave/docs/examples/plot-line-labels-no-overlap"><div style="background-image:url(/wave/assets/images/plot-line-labels-no-overlap-6597ed5a76ab4f19c1f7e189cbc21624.png)"></div>Plot / Line / Labels / Occlusion</a><a class="thumbnail" href="/wave/docs/examples/plot-line-annotation"><div style="background-image:url(/wave/assets/images/plot-line-annotation-0b3e87d958bdf0bdcfddc482ad9cf3c5.png)"></div>Plot / Line / Annotation</a><a class="thumbnail" href="/wave/docs/examples/plot-path"><div style="background-image:url(/wave/assets/images/plot-path-2737001d0f8727c8d62799faf298a88e.png)"></div>Plot / Path</a><a class="thumbnail" href="/wave/docs/examples/plot-path-point"><div style="background-image:url(/wave/assets/images/plot-path-point-7e7d80f97ee02c9ac8591676f931f173.png)"></div>Plot / Path / Point</a><a class="thumbnail" href="/wave/docs/examples/plot-path-smooth"><div style="background-image:url(/wave/assets/images/plot-path-smooth-d3dc4edb37522cdaf43f8da9ab425156.png)"></div>Plot / Path / Smooth</a><a class="thumbnail" href="/wave/docs/examples/plot-area"><div style="background-image:url(/wave/assets/images/plot-area-0a621df3247663494f8a594d65f0516d.png)"></div>Plot / Area</a><a class="thumbnail" href="/wave/docs/examples/plot-area-groups"><div style="background-image:url(/wave/assets/images/plot-area-groups-26a91066657837eeb3ddd3d83dafdc0a.png)"></div>Plot / Area / Groups</a><a class="thumbnail" href="/wave/docs/examples/plot-area-negative"><div style="background-image:url(/wave/assets/images/plot-area-negative-72b6ee9e1692572a50b4f9e5f88db0ce.png)"></div>Plot / Area / Negative</a><a class="thumbnail" href="/wave/docs/examples/plot-area-range"><div style="background-image:url(/wave/assets/images/plot-area-range-0663c734a05c77b333b1cfdca966324f.png)"></div>Plot / Area / Range</a><a class="thumbnail" href="/wave/docs/examples/plot-area-smooth"><div style="background-image:url(/wave/assets/images/plot-area-smooth-4826228f8423a45fda33727184111c06.png)"></div>Plot / Area / Smooth</a><a class="thumbnail" href="/wave/docs/examples/plot-area-stacked"><div style="background-image:url(/wave/assets/images/plot-area-stacked-5624332d0398dd3417cb40e6fd83272c.png)"></div>Plot / Area / Stacked</a><a class="thumbnail" href="/wave/docs/examples/plot-area-line"><div style="background-image:url(/wave/assets/images/plot-area-line-fbcaba9e073f71a07b202834d2992b49.png)"></div>Plot / Area + Line</a><a class="thumbnail" href="/wave/docs/examples/plot-area-line-smooth"><div style="background-image:url(/wave/assets/images/plot-area-line-smooth-215c412ff603d4f09d5e46af9dc84085.png)"></div>Plot / Area + Line / Smooth</a><a class="thumbnail" href="/wave/docs/examples/plot-area-line-groups"><div style="background-image:url(/wave/assets/images/plot-area-line-groups-fab3e454a09ab17afeb08c5bbe20a364.png)"></div>Plot / Area + Line / Groups</a><a class="thumbnail" href="/wave/docs/examples/plot-polygon"><div style="background-image:url(/wave/assets/images/plot-polygon-cef10aff7abe01503bac3e360a6ece1c.png)"></div>Plot / Polygon</a><a class="thumbnail" href="/wave/docs/examples/plot-histogram"><div style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAj4AAAGzCAYAAAAv9B03AAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjQ3OjI0IFBNIFBEVLzed9AAAB4ESURBVHic7d1/lNx1fe/x1+5md0lIEzZhyQ8SNrAk2AoImAoGCgQTCEQKtR7EFm39cU1J8bbnXK29bc+pvbW996+S/tCWqtefpRRBa8QIJQmeKyDhl9ciUBFJkIgxbGATdk12Z3fm/sHttjlJUMhMJpnP43EO5zjfnZ3P++vM7D7z/c7OtNVqtVoAAArQ3uwBAAAOFeEDABRD+AAAxRA+AEAxhA8AUAzhAwAUQ/gAAMUQPgBAMYQPAFAM4QMAFEP4AADFED4AQDGEDwBQDOEDABRD+AAAxXhV4fPMM8/k9WedmRtv/Ie9tn/sox/N6886M4ODg/ne976XCy84P/fcc8/L3la1Ws0NN/xdHnjg/lczCgDAz6xhR3ymTZuW0047Lccee+zLXq9Wq+Xvb7ghD9z/QN1nqNVqdb9NAODI1bDw2bFjR+69994888wzSZLPffazecuvXJlzl7wx7/rN38iTT34vSXLeuUuSJJ/85Cfy9qvfliQZHBzM73/oQ/ml887Nmy5amuuv/4uMjY0lSUZHR/MnH/5wzjt3Sa759V/L5z772bz+rDPzyCOP5LHHHsvrzzozH/voR7PikovzN3/91xkaGsqffPjDWfami7J06YX58z/7s4nb+p3f+a9597vflT/9H3+SJW88J+985zvy2GOP5V2/+Rs5d8kb86EP/d7EdQGAI99Bhc9Phn+SHTt2TPy3e/fu/V7v3/7t8axZc33ecPbZuX7NX2Z0tJKP/OmfJknW/OVfJUlOPfW0/OEf/VGS5A/+4L/nnnvuzgc++MG8/e2/ls9/7nP5+N//fZLkk5/4RNau/XKuuPLKXHHFlfnMZz69z3r//M9fyjve+c4svWhp/vcnP5kNG9bn9z70obz//e/PF794a2655ZaJ6z726KPpmTEj71u1Ko9+5zv57d9enV/+5SuycuWbs/7OO7N+/fqD+b8IADiMTDqYb/7bv/1Y/vZvP/ZTr1epvHTUZGxsLMcdd1w+9elPp6urK0myePHiJMnZZ5+dU089Ldu3b8+m++7Le97z3lxxxZVJkm/932/ly1/+51y7enX+5V/uyM///M/ngx/8vSTJwI6BfOLjH99rvfe8971529uuTvJSUP3WtddmeHg4Tz+9JZ2dnfneE9+duO7MmTNz3XXvT5Lc8oUv5JTXvCa/8pa35E27duXWW2/J1v9/xAoAOPIdVPj86q++NRcuXTpx+au3fSW33377Ptc77bTT8l/e977c/E//lC998Yvp7e3Nb127OldeeeU+131u+/YkSd+CvoltC/r6ct83v5lqtZqBHTty+umnT3ztxAUn7nMbM2f+x+uK7rprY67/i+uzffuPs2DBgiRtGRsfn/j60UcfPfG/Ozo60tX5UpBNmvTS/zXj1f+4LgBwZDuoU10LTlyQJUuWTPx3/PHz9nu9arWaX/3Vt2b9ho25+eYvZP78+fmzj/xpfvKTn+xz3WN7e5Mkmzdvnti2efPmHHvssWlvb88x06dn69YfTnxt6w+3vuyMf/aRj2TRokX5P9+4O/940z+ls/OgWg8AOIIdkgr4+tfvygc/8IFc/fa35xd/8Q0ZHa1k6tSp6erqSkdHR7q7u/PNb96b151xRs4999ycffbZuekf/zGzZ83OcwPPZdOmTXnPe96bJLnwwqW58cZ/yA03/F1mzZqdf7rpppdde7xaza5dO/Otb30rd3/jGwd8HRIA0PoOyRsYXnTRm3Lt6tXZuGFDfv9Dv5fx8bH8xfXXT5xO+sAHP5ht27blo3/z10mSP/+f/yvnnnde/vIv1+SWL3wh17zjHXnfqlVJkmtXr87FF1+Sz37mM7nxxn/I266++mXX/uM//nC2bduWD37gv6W9oz3zTzihsTsLABy22mpH4JvdDA0NZerUqUmSr61blz/6oz/Mjf94U0455ZQmTwYAHM6OuI+s+MTHP55LV1ySL3/5n3Pvvffms5/9THp6enLiifu+yBkA4D874l7p+/Zf+7X8aNuP8rGPfjS7dr2YX/iFX8hf/fUfT/x5PADAgRyRp7oAAF6NI+5UFwDAqyV8AIBiCB8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKIXwAgGIIHwCgGMIHACiG8AEAijGpHjeyY8eOrF+/Ptu3b8/RRx+dCy64IP39/RkfH8+aNWvS0dExcd3+/v5cfvnl9VgWAOAVqUv43HbbbTnttNNy1VVX5emnn87atWtz7bXXZnR0NJMnT87q1avrsQwAwEE56PCpVqs588wzc+qpp6atrS0LFixIe3t7hoeHU61W093dXY85AQAO2kGHT3t7e04//fSJy9u2bUtXV1emT5+ebdu2pVKp5Oabb87AwEB6e3uzbNmy9PT0HOyyAACvWF1f3Lxz586sW7cul1xySdra2tLV1ZX+/v4sXbo0q1atypw5c7J27dp6LgkA8DOry2t8kuS5557L2rVrs3Tp0vT19SVJZs6cmeXLl09cZ8mSJXnwwQczNDSUqVOnHvC2RkdHU6vV6jUaAHCEqvdLZupyxGfnzp1Zu3ZtVqxYkZNOOmli+/DwcHbs2DFxuVarpVar7fVXXgAAh0pdjvjccccdOe+883L88cfvtX1gYCB33HFHrr766vzcz/1cNm3alFmzZmXy5Mkve3tdXV31GAsAYC9ttYM8p7Rz58584hOf2OcozsqVK7Nw4cI8+OCDefjhh1OpVDJ79uwsX74806ZNO6ihAQBejYMOHwCAI4WPrAAAiiF8AIBiCB8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKIXwAgGIIHwCgGMIHACiG8AEAiiF8AIBiCB8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKIXwAgGIIHwCgGMIHACiG8AEAiiF8AIBiCB8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKIXwAgGJMavYAAED93HPPPalUKs0eo24uvPDCut6e8AGAFrN169Zmj1AXbW1tdb9Np7oAgGIIHwCgGMIHACiG8AEAiiF8AIBiCB8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKIXwAgGIIHwCgGMIHACiG8AEAiiF8AIBiCB8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKMakeN7Jjx46sX78+27dvz9FHH50LLrgg/f39SZLNmzdn48aNGR4ezty5c3PZZZdlypQp9VgWAOAVqcsRn9tuuy0LFy7Mddddl4suuihf/epXU6lUMjIyknXr1mXZsmW57rrr0tvbmw0bNtRjSQCAV+ygw6darebMM8/MGWeckba2tixYsCDt7e0ZHh7Oli1bMnv27PT19aW9vT3nnHNOnnrqqYyPj9djdgCAV+Sgw6e9vT2nn3562ttfuqlt27alq6sr06dPz+DgYHp6eiau293dne7u7uzatetglwUAeMXq8hqff7dz586sW7cul1xySdra2lKpVDJp0t5LdHR0pFKpvOztVKvVeo4FAMWo1WrNHuGwVrfwee6557J27dosXbo0fX19SZLOzs59ju6Mjo6ms7PzZW9rbGwso6Oj9RoNAIoxPj4ufl5GXcJn586dWbt2bVasWJHjjz9+YvuMGTOyZcuWicvDw8MZHx/PtGnTXvb2urq60tXVVY/RAKAokyZNSltbW7PHqItG7Edd/qrrjjvuyHnnnbdX9CRJX19fnn/++Tz99NMZHx/Pfffdl5NPPjkdHR31WBYA4BU56CM+O3fuzDPPPJNnn302X/va1ya2r1y5MgsXLszKlSuzfv36DA0NZd68ebn00ksPdkkAgFelreZEIAC0jHvuuSebN29u9hh10dbWll//9V+v6236yAoAoBjCBwAohvABAIpR1zcwrJcf/OAHLfUmhu3t7TnhhBOaPQYAFO+wDJ8kufvuu5s9Qt2cf/75zR4BAIhTXQBAQQ7bIz4AcCiMj483e4S6aqWXijSC8IEWsnXr1maPUFfz5s1r9ggUYPv27dmwYUOzx6ibY489ttkjHNaED7SQRx55JDt27Gj2GHUxffp04QPUndf4AADFED4AQDGEDwBQDOEDABRD+AAAxRA+AEAxhA8AUAzhAwAUQ/gAAMUQPgBAMYQPAFAM4QMAFEP4AADFED4AQDGEDwBQDOEDABRD+AAAxRA+AEAxhA8AUAzhAwAUQ/gAAMUQPgBAMYQPAFAM4QMAFEP4AADFED4AQDGEDwBQDOEDABRD+AAAxRA+AEAxhA8AUAzhAwAUQ/gAAMUQPgBAMYQPAFAM4QMAFEP4AADFED4AQDEmNXsAAI48mzdvbvYIdfPCCy80ewQOIeEDwCv28MMPZ/fu3c0eoy56enqaPQKHkFNdAEAxHPE5BMbGxjI2NtbsMepm0iQPGwCOTH6DHQLf/e53c++99zZ7jLro7OzM2972tmaPQQHGx8fzzW9+s9lj1M20adPy2te+ttljQPGED3DY+v73v9/sEermzDPPbPYIQLzGBwAoiPABAIohfACAYggfAKAYwgcAKIa/6gI4BMbGxlrmnY6TpFqtNnsEeFXqFj6PP/547rzzzqxYsSKLFi1K8tL7cKxZsyYdHR0T1+vv78/ll19er2UBjgjbtm3LI4880uwx6qa7u7vZI8CrUpfweeihh7J169bMnDlzr+179uzJ5MmTs3r16nosAwBwUOryGp/58+fniiuuSFdX117bR0ZG/KsAADhs1OWIz3HHHbff7SMjI6lUKrn55pszMDCQ3t7eLFu2zCfhAgBN0dC/6urq6kp/f3+WLl2aVatWZc6cOVm7dm0jlwQAOKCG/lXXzJkzs3z58onLS5YsyYMPPpihoaFMnTr1gN83NjaWWq3WyNEOqUql0jL7U61W88ILLzR7DA6glZ474+PjLbMvSWvdN0lSq9VaZn9a7b5ptf2pt4aGz/DwcPbs2TPxoud/f6L857/y2u9Qkyalra2tkaMdUp2dnS2zP+3t7U5VHsZa6bnT0dHRMvuStNZ9kyRtbW0tsz+tdt+00v40Yj8aeqprYGAgt956a3bt2pVarZZNmzZl1qxZmTx5ciOXBQDYr7oc8fn85z+fgYGBVKvVbN26NevWrctll12WRYsW5ayzzspNN92USqWS2bNn581vfnM9lgQAeMXqEj7XXHPNAb+2ePHiLF68uB7LAAAcFJ/VBQAUQ/gAAMXwIaUU7bvf/W4GBwebPUbdjI2NNXsEgMOa8KF43/ve95o9Qt1Mnz692SMAHNac6gIAiiF8AIBiCB8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKIXwAgGIIHwCgGMIHACiG8AEAiiF8AIBiCB8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKIXwAgGIIHwCgGMIHACiG8AEAiiF8AIBiCB8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKIXwAgGIIHwCgGMIHACiG8AEAiiF8AIBiCB8AoBjCBwAohvABAIohfACAYkxq9gAceZ599tlmj1A3g4ODzR4BgENI+PCKbdy4sdkj1E1vb2+zRwDgEHKqCwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKIXwAgGIIHwCgGMIHACiG8AEAiiF8AIBi1O2zuh5//PHceeedWbFiRRYtWjSxffPmzdm4cWOGh4czd+7cXHbZZZkyZUq9lgUA+JnV5YjPQw89lCeeeCIzZ87ca/vIyEjWrVuXZcuW5brrrktvb282bNhQjyUBAF6xuoTP/Pnzc8UVV6Srq2uv7Vu2bMns2bPT19eX9vb2nHPOOXnqqacyPj5ej2UBAF6RuoTPcccdt9/tg4OD6enpmbjc3d2d7u7u7Nq1qx7LAgC8Ig19cXOlUsmkSXu/jKijoyOVSqWRywIA7FfdXty8P52dnfsc3RkdHU1nZ+fLft/Y2FhqtVojRzukKpVKy+zP+Ph4y+xL0nqPtVbaH4+1w1utVmuZ/Wm1+6bV9qfeGho+M2bMyJYtWyYuDw8PZ3x8PNOmTXv5oSZNSltbWyNHO6Q6OztbZn86OjpSrVabPUbdtNpjrZX2p6Ojo2X2JWmt+yZJ2traWmZ/Wu2+aaX9acR+NPRUV19fX55//vk8/fTTGR8fz3333ZeTTz45HR0djVwWAGC/6nLE5/Of/3wGBgZSrVazdevWrFu3LpdddlkWLVqUlStXZv369RkaGsq8efNy6aWX1mNJAIBXrC7hc8011xzwayeccELe/e5312MZAICD4iMrAIBiCB8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKIXwAgGIIHwCgGMIHACiG8AEAiiF8AIBiCB8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKIXwAgGIIHwCgGMIHACiG8AEAiiF8AIBiCB8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKIXwAgGIIHwCgGMIHACiG8AEAiiF8AIBiCB8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKIXwAgGIIHwCgGMIHACiG8AEAiiF8AIBiCB8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKIXwAgGIIHwCgGMIHACjGpEbe+Pj4eNasWZOOjo6Jbf39/bn88ssbuSwAwH41NHz27NmTyZMnZ/Xq1Y1cBgDgZ9LQU10jIyPp7u5u5BIAAD+zhh7xGRkZSaVSyc0335yBgYH09vZm2bJl6enpaeSyAAD71dAjPl1dXenv78/SpUuzatWqzJkzJ2vXrm3kkgAAB9TQIz4zZ87M8uXLJy4vWbIkDz74YIaGhjJ16tQDft/Y2FhqtVojRzukxsfHW2Z/qtVqy+xL0lr3TdJazx2PtcNbrVZrmf3xWCtLQ8NneHg4e/bsycyZM5P8xxPlP/+V1/50dHSkra2tkaMdUu3t7S2zP620L0nrPdZaaX881g5vbW1tLbM/rbQvSWs91hqxHw091TUwMJBbb701u3btSq1Wy6ZNmzJr1qxMnjz5Zb+vVe6wf9dq+8Phy2MNXjnPm7I09IhPX19fzjrrrNx0002pVCqZPXt23vzmNzdySQCAA2po+CTJ4sWLs3jx4kYvAwDwU/nICgCgGMIHACiG8AEAiiF8AIBiCB8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKIXwAgGIIHwCgGMIHACiG8AEAiiF8AIBiCB8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKIXwAgGIIHwCgGMIHACiG8AEAiiF8AIBiCB8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKIXwAgGIIHwCgGMIHACiG8AEAiiF8AIBiCB8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKIXwAgGIIHwCgGMIHACiG8AEAiiF8AIBiCB8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKManRC2zevDkbN27M8PBw5s6dm8suuyxTpkxp9LIAAPto6BGfkZGRrFu3LsuWLct1112X3t7ebNiwoZFLAgAcUEPDZ8uWLZk9e3b6+vrS3t6ec845J0899VTGx8cbuSwAwH41NHwGBwfT09Mzcbm7uzvd3d3ZtWtXI5cFANivhoZPpVLJpEl7v4yoo6MjlUqlkcsCAOxXQ1/c3NnZuc/RndHR0XR2dr7s9+3evTu1Wq2Rox1SY2NjLbM/1Wq1ZfYlaa37Jmmt/RkfH2+ZfUlab39qtVrL7E+r3Tet9HOgERoaPjNmzMiWLVsmLg8PD2d8fDzTpk172e/r7OzM5Zdf3sjROMwNDg7mmGOOafYYNNGLL76YKVOmpKOjo9mj0CTDw8Pp6ur6qf9YpnXt2bMnw8PDOfroo+t2mw0Nn76+vqxfvz5PP/105s2bl/vuuy8nn3zyT/1BNnnyZL/0ClepVDJ9+vS0tbU1exSapFqtZtq0afucLqcc7e3tE68NpUxDQ0N1v82G/kTp6urKypUrs379+gwNDWXevHm59NJLG7kkAMABNfyfUieccELe/e53N3oZAICfqq3mFVAAQCF8VhcAUAzhAwAUQ/gAAMUQPgBAMYQPAFCMw+qdwQYHB3P77bdn+/btmTZtWi6++OLMnTu32WPRYE8++WS+8Y1vZGhoKL29vbn44osn3vX7i1/8Ytrb/6PPL7jggpx55plNnJZGuPHGG7N9+/aJy93d3bn22muTJJs2bcpDDz2UarWa17zmNXnTm97kjS1bzM6dO/OpT31qr23VajWXX355TjrppKxZs2avN77t7+/37v4tolqt5u67784DDzyQ1atXZ/LkyRNfO9Bz/2Bb4bAKn9tvvz0LFizIVVddle9///u57bbb8t73vnevX3y0lqGhodx+++15y1vekjlz5uSee+7J+vXrc9VVV2XPnj1ZuHChH3AFGBkZyTve8Y7MnDlzr+0/+MEP8q//+q+55pprctRRR+VLX/pSvv3tb+eMM85o0qQ0wvTp0/O7v/u7E5d3796dG2+8MfPnz8+ePXsyefLkrF69uokT0ihf+cpX0tvbu88/Zl7uuX+wrXDYFMVPfvKTbN++PW94wxvS3t6ehQsXZsqUKXn22WebPRoNdskll2Tu3Llpa2vLokWLMjg4mOSlD7T1VvVlGBkZSVdX1z7bn3jiibzuda/LtGnT0tXVlcWLF+eJJ55owoQcSvfee29e//rX56ijjsrIyIifAy3sjW98Y5YsWbLP9gM99+vRCofNEZ8XXngh06dP36vYenp68vzzz2fevHlNnIxGmjp1ahYuXDhx+d8/1y156cPpnnvuuXz605/O7t27c+KJJ+aiiy7a7y9IjmwjIyO566678sMf/jBTpkzJL/3SL+Wkk07K4OBg+vr6Jq7X09OTF154oYmT0mg7d+7Mli1bsnTp0iQvPTYqlUpuvvnmDAwMpLe3N8uWLUtPT0+TJ6UejjvuuP1uP9Bzvx6tcNgc8RkbG9vnwwg7OjpSqVSaNBGH2pYtW/Ltb387559/fpKXHszz58/PVVddlXe9610ZHh7O3Xff3eQpqbdarZZTTjklr33ta7Nq1aqcd955ue222/Liiy+mUqns9XNh0qRJGR0dbeK0NNrDDz+cM844Y+IXW1dXV/r7+7N06dKsWrUqc+bMydq1a5s8JY12oOd+PVrhsAmfzs7OfX6gjY6OprOzs0kTcSg9/vjjueuuu/LWt741U6dOTZIsXLgw559/fqZMmZKjjjoqZ599djZv3tzkSam3tra2rFixIv39/Wlvb09/f3/mzJmTrVu3prOzMyMjIxPXPdApMVpDtVrNo48+utdR4JkzZ2b58uXp7e1NR0dHlixZkhdeeKEhn9rN4eNAz/16tMJhEz49PT158cUXMzY2NrFtx44d+7zYkdbz5JNP5v77789VV12VY445ZmL7888/v9cPt1qtttdfdtAaKpXKPufnq9VqOjo6MmPGjDz//PMT23fs2JEZM2Yc6hE5RJ599tkcc8wxmTZt2sS24eHh7NixY+JyrVbzs6AAB3ru16MVDpvwmTx5cubOnZsHHngg1Wo1jz/+eMbGxjJnzpxmj0YD7dmzJxs3bsyVV16Zo48+eq+vPfbYY7njjjtSqVQyOjqa+++/P/39/U2alEapVqu55ZZbsmXLliQvnfIcGBjIvHnzcsopp+TRRx/Nrl27smfPnjz00EN5zWte09yBaZgf/ehHmTVr1l7bBgYGcuutt2bXrl2p1WrZtGlTZs2atdefPdN6DvTcr0crHFafzr5r16587Wtfy49//ONMnz49K1as2OdJQGv5zne+kzvuuGOff72tWrUqnZ2dWb9+fZ566qm0t7fn5JNPzgUXXOD0ZwvasmVLvv71r2doaCjTp0/PhRdemPnz5ydJHnroodx///0ZHx/PqaeemgsvvLC5w9Iwd911V7q6unLuuefutf3BBx/Mww8/nEqlktmzZ2f58uV7HRXiyLR79+7ccMMNSZLx8fGJ3wPve9/7MmXKlAM+9w+2FQ6r8AEAaKTD5lQXAECjCR8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKIXwAgGIIHwCgGMIHACiG8AEAiiF8AIBiCB8AoBjCBwAohvABAIohfACAYggfAKAYwgcAKIbwAQCKIXwAgGL8P0xuHqmIkvVrAAAAAElFTkSuQmCC)"></div>Plot / Histogram</a><a class="thumbnail" href="/wave/docs/examples/plot-axis-title"><div style="background-image:url(/wave/assets/images/plot-axis-title-f0d1c16575277e024054fbb19e5af49a.png)"></div>Plot / Axis Titles</a><a class="thumbnail" href="/wave/docs/examples/plot-form"><div style="background-image:url(/wave/assets/images/plot-form-7b7c198bf0e0f55d1d9389b4f4dcff1a.png)"></div>Plot / Form</a><a class="thumbnail" href="/wave/docs/examples/plot-vegalite"><div style="background-image:url(data:image/png;base64,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)"></div>Plot / Vega-lite</a><a class="thumbnail" href="/wave/docs/examples/plot-vegalite-update"><div style="background-image:url(data:image/png;base64,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)"></div>Plot / Vega-lite / Update</a><a class="thumbnail" href="/wave/docs/examples/plot-vegalite-form"><div style="background-image:url(/wave/assets/images/plot-vegalite-form-0d561c88fa3bbc9f612e304db9a412b4.png)"></div>Plot / Vega-lite / Form</a><a class="thumbnail" href="/wave/docs/examples/plot-altair"><div style="background-image:url(/wave/assets/images/plot-altair-6b648257bc043077af771b8bbdf91735.png)"></div>Plot / Altair</a><a class="thumbnail" href="/wave/docs/examples/plot-bokeh"><div style="background-image:url(/wave/assets/images/plot-bokeh-0e17ac43f3cdff49e9cb5ff21d8c8214.png)"></div>Plot / Bokeh</a><a class="thumbnail" href="/wave/docs/examples/plot-matplotlib"><div style="background-image:url(/wave/assets/images/plot-matplotlib-14dd0da4129dea8f5aae83573ba31241.png)"></div>Plot / Matplotlib</a><a class="thumbnail" href="/wave/docs/examples/plot-plotly"><div style="background-image:url(/wave/assets/images/plot-plotly-3b71042a87f940cd5002711c65e34e54.png)"></div>Plot / Plotly</a><a class="thumbnail" href="/wave/docs/examples/plot-d3"><div style="background-image:url(/wave/assets/images/plot-d3-27f0867826e9547bb4bb23e79517892b.png)"></div>Plot / D3.js</a><a class="thumbnail" href="/wave/docs/examples/pixel-art"><div style="background-image:url(data:image/png;base64,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)"></div>Pixel Art</a><a class="thumbnail" href="/wave/docs/examples/upload"><div style="background-image:url(data:image/png;base64,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)"></div>Uploads</a><a class="thumbnail" href="/wave/docs/examples/upload-async"><div style="background-image:url(data:image/png;base64,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)"></div>Uploads / Async</a><a class="thumbnail" href="/wave/docs/examples/upload-ui"><div style="background-image:url(/wave/assets/images/upload-ui-ce3af4e53ce2d7a546aa933667f7758a.png)"></div>Uploads / UI</a><a class="thumbnail" href="/wave/docs/examples/upload-download"><div style="background-image:url(/wave/assets/images/upload-download-ce3af4e53ce2d7a546aa933667f7758a.png)"></div>Uploads / Download</a><a class="thumbnail" href="/wave/docs/examples/meta-title"><div style="background-image:url(data:image/png;base64,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)"></div>Meta / Title</a><a class="thumbnail" href="/wave/docs/examples/meta-notification"><div style="background-image:url(/wave/assets/images/meta-notification-fbc7ef4c16cebfc522a564d72cb6953d.png)"></div>Meta / Notification</a><a class="thumbnail" href="/wave/docs/examples/meta-refresh"><div style="background-image:url(data:image/png;base64,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)"></div>Meta / Refresh</a><a class="thumbnail" href="/wave/docs/examples/meta-redirect"><div style="background-image:url(/wave/assets/images/meta-redirect-ce65a2bb8925d26db3db00327634b324.png)"></div>Meta / Redirect</a><a class="thumbnail" href="/wave/docs/examples/counter-global"><div style="background-image:url(data:image/png;base64,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)"></div>Mode / Broadcast / Global</a><a class="thumbnail" href="/wave/docs/examples/counter-broadcast"><div style="background-image:url(data:image/png;base64,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)"></div>Mode / Broadcast</a><a class="thumbnail" href="/wave/docs/examples/counter-multicast"><div style="background-image:url(data:image/png;base64,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)"></div>Mode / Multicast</a><a class="thumbnail" href="/wave/docs/examples/counter-unicast"><div style="background-image:url(data:image/png;base64,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)"></div>Mode / Unicast</a><a class="thumbnail" href="/wave/docs/examples/graphics-primitives"><div style="background-image:url(/wave/assets/images/graphics-primitives-069da2917a0f9226163992fa997d7064.png)"></div>Graphics / Primitives</a><a class="thumbnail" href="/wave/docs/examples/graphics-spline"><div style="background-image:url(/wave/assets/images/graphics-spline-76e8a919798c7e38711618ef9b414f78.png)"></div>Graphics / Spline</a><a class="thumbnail" href="/wave/docs/examples/graphics-clock"><div style="background-image:url(/wave/assets/images/graphics-clock-fb82cce5ac3fca365e9cd43ba116c948.png)"></div>Graphics / Clock</a><a class="thumbnail" href="/wave/docs/examples/graphics-path"><div style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARUAAAD8CAYAAABZ0jAcAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAyOjA3OjQ5IFBNIFBEVCumBS8AAANUSURBVHic7daxDcJQFARBY1GxY4ggpmQ/imClL6yZCi5a3W1mZgOI7KsHANciKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAKn76gFXcL4/2/n6rJ7Bj/bnse2PY/WMv+epAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAqdvMzOoRwHV4KkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVJfkOkP8d6gjyUAAAAASUVORK5CYII=)"></div>Graphics / Path</a><a class="thumbnail" href="/wave/docs/examples/graphics-turtle"><div style="background-image:url(/wave/assets/images/graphics-turtle-bf00fb61c0569a86ca32908a60485b91.png)"></div>Graphics / Turtle</a><a class="thumbnail" href="/wave/docs/examples/graphics-hilbert"><div style="background-image:url(/wave/assets/images/graphics-hilbert-0b77a235731e83c53e6167b922a11f1c.png)"></div>Graphics / Hilbert</a><a class="thumbnail" href="/wave/docs/examples/glider-gun"><div style="background-image:url(/wave/assets/images/glider-gun-8acc444425a295f814222e258d6ca3e3.png)"></div>Graphics / Glider Gun</a></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/index.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/enterprise/developer-guide"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Developer Guide</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/hello-world"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Hello World! »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/bf614533.8a69ecda.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Gallery</h1></header><div class="markdown"><a class="thumbnail" href="/wave/docs/examples/hello-world"><div style="background-image:url(data:image/png;base64,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)"></div>Hello World!</a><a class="thumbnail" href="/wave/docs/examples/todo"><div style="background-image:url(data:image/png;base64,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)"></div>To-do List App</a><a class="thumbnail" href="/wave/docs/examples/wizard"><div style="background-image:url(data:image/png;base64,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)"></div>Wizard</a><a class="thumbnail" href="/wave/docs/examples/issue-tracker"><div style="background-image:url(/wave/assets/images/issue-tracker-f8f5460fa5058fa880076f1b4d032c9f.png)"></div>Issue Tracker</a><a class="thumbnail" href="/wave/docs/examples/dashboard"><div style="background-image:url(/wave/assets/images/dashboard-24aea705724fd29993c5508a401b3b3c.png)"></div>Dashboard</a><a class="thumbnail" href="/wave/docs/examples/stat-small"><div style="background-image:url(data:image/png;base64,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)"></div>Stat / Small</a><a class="thumbnail" href="/wave/docs/examples/stat-large"><div style="background-image:url(/wave/assets/images/stat-large-4434acbc0c05f2c331071c827076d7b0.png)"></div>Stat / Large</a><a class="thumbnail" href="/wave/docs/examples/stat-wide-gauge"><div style="background-image:url(data:image/png;base64,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)"></div>Stat / Gauge / Wide</a><a class="thumbnail" href="/wave/docs/examples/stat-tall-gauge"><div style="background-image:url(data:image/png;base64,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)"></div>Stat / Gauge / Tall</a><a class="thumbnail" href="/wave/docs/examples/stat-wide-bar"><div style="background-image:url(data:image/png;base64,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)"></div>Stat / Bar / Wide</a><a class="thumbnail" href="/wave/docs/examples/stat-large-bar"><div style="background-image:url(/wave/assets/images/stat-large-bar-e578fa2ed742b2a1b9eb9ff52d50c476.png)"></div>Stat / Bar / Large</a><a class="thumbnail" href="/wave/docs/examples/stat-small-series-area"><div style="background-image:url(data:image/png;base64,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)"></div>Stat / Series / Small / Area</a><a class="thumbnail" href="/wave/docs/examples/stat-small-series-interval"><div style="background-image:url(data:image/png;base64,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)"></div>Stat / Series / Small / Interval</a><a class="thumbnail" href="/wave/docs/examples/stat-wide-series-area"><div style="background-image:url(data:image/png;base64,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)"></div>Stat / Series / Wide / Area</a><a class="thumbnail" href="/wave/docs/examples/stat-wide-series-interval"><div style="background-image:url(data:image/png;base64,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)"></div>Stat / Series / Wide / Interval</a><a class="thumbnail" href="/wave/docs/examples/stat-tall-series-area"><div style="background-image:url(data:image/png;base64,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)"></div>Stat / Series / Tall / Area</a><a class="thumbnail" href="/wave/docs/examples/stat-tall-series-interval"><div style="background-image:url(data:image/png;base64,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)"></div>Stat / Series / Tall / Interval</a><a class="thumbnail" href="/wave/docs/examples/layout"><div style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAl0AAAEWCAYAAABc9SIZAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDExOjQyOjE3IEFNIFBEVAv66mIAAB3WSURBVHic7d19cFR1nu/xzznpjkSqDLAlQWdFGa1MUaw7JGEkZGBGcVTAqsGZhIcRFnVUCD5BkhmZyOx44fKkW6U87L0zEiKWAYQRZWovuqXr3fLhMs5emCFRhNpbRALWDBOrhJClk9CaPvePkJiHbrpP58cv6fT7VZXSmF9On1TedfK1zzndTigU8gQAAIDLyh3oHQAAAEgHDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWBDo7wY8j5f5SmeO4xjfJk2lN5qCaTQF05JtKqmhK1ZsRJgeusfW/XfenwMbTaU3moJpNAXTTDTla+jq/iCZmZkKBAKX5f8gkDo8z9NXX32lcDjc1YefJmgKvdEUTKMpmJZsUwlf09W5Uc/zlJmZqWAwSHSQ4zgKBoPKzMzs0UgiaArR0BRMoymYlmxTvi6k9zxPnucpEOj3pWAYYgKBQFcfftAUYqEpmEZTMM1vUwkNXV0bu7hhpnz05jhORycJTvw0hXhoCqbRFEzz25Sv04teAhtE+vLbCE0hHpqCaTQF0/w0ktTpRSCa/jxtD0RDUzCNpmCa0dOL3S8QIzxcSu9G4t1eTVOIh6ZgGk3BND9N+X5FesJDLMm2QVOIhaZgGk3BND9t8DZAAAAAFvi7exFIUMJ3BQEJoimYRlMwzdjdixc3149dQXrw2whNIR6agmk0BdMMvk4XAAAA+oehCwAAwAKGLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALGLoAAAAsGJCh62RDg376wP0qyM/TO++8E3XNgQMHNGvmDBXk56mpqanP1yORiHbU1KhoSqHmzimJuo3z589r9apVKsjP0zMbNhj9GTC4HDt2TPfft0hTCidr1swZemn79qjrTHWTSMNIbY2NjaqoKNfU7xbptlu/r/Xr1ykcDkddy/EKfjQ3N6sgP08F+Xn64IP3o66x9XcSdgVsP2Bdba1KS0t1zTVjYq7ZUVOjTZs26tprr425prysTIcP/0nDhw+P+vVQKKQ5JcXKysrq9z5jcGtra9Pjjz2qq7KztbysTHW1tdqyZbNycnI0c9asHmtNdJNIw0h95WVlOn36L1q8eImamppUU/OyrrzySi1btrzHOo5X8Gvz5k2X/Lqtv5Owz/ozXaGWFlU+VamVK38Zc42b4ar6xe2adffdMdeMHTtWr+59TePGjYv69XA4rDvvuku79/y23/uMwe3UqVMaM2aMKisrNW/efK1Zu05ZWVmq+6iuz1oT3STSMFLbhQsXNGHCBK1avVqL7rtPTyxbpvHjx6v28OE+azlewY+6ujr9bt8+LViwMOYaW38nYZ/1Z7qKiookSX88dCjmmnvvXSBJ+vDD38dcU15RccnHGTlypMrKypPYQ6Sa3Nxc7di5q+vzhoYGtba26qYbb+qz1kQ3iTSM1HbFFVfoqZUrJUktoZCOfPKJPv30U82bP7/PWo5XSFR7e7vWrl2jyYWFmjFzpnbu3BF1na2/k7DP+tAFXE7N585pxZM/V25urn44e/ZA7w5SXDgc1rRpUyVJBZMm6cEHHxrgPUIqq6l5WZ+d+kzPPfe8mpubB3p3MAC4exFDxrlz51RaukQXLoS1afMWZWZmDvQuIcUFg0Ftq67Wr55+WidOnNDS0lJ5njfQu4UUdPr0aVVt3arikmIFg0F93tgoSWps/Fytra0DvHewhWe6MCScPXtWS0uX6Pz589pW/aJGjx490LuEFNbY+Fe9/dbbKpwyRXl5+crLy9fRo0e199VX1dTUpJEjRw70LiLFHDp4UG1tbXpl1y69suvryyHWr1srSSop4e7CdMDQhZTX3NysJYsfVn19vRYsWKj33ntXknT11Vdr+vTbB3bnkJKyhmWpqmqr9uzZreLiEoVaQnpj/35df8MNys7OHujdQwq6ZfJkbdz09V2LH3/0saqrt6m4uERTp04dwD2DTQxdSHknT55UfX29JPW4MPXbEycydCEpV2Vn6zcvbNXG559TVdVWBQIBFRZOUXlFhVyXqzLgX05OjnJycro+HzFipKqrt2na96ZpzBhefiZdOKFQ6JIXKHie1/URibSrvT2iUaNG2do/pJAzZ84oI8OV62bIcZyuj95oComiKZhGUzDNT1P8LxsAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWMDQBQAAYAFDFwAAgAUMXQAAABYwdAEAAFjA0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWMDQBQAAYAFDFwAAgAUMXQAAABYwdAEAAFjA0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWMDQBQAAYAFDFwAAgAUMXQAAABYwdAEAAFjA0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWOBz6HIuz15gCPHbCE0hHpqCaTQF0xJrJKGhy3F6bszzPP/7gyGtdxO9m+mNphAPTcE0moJpfptK6vRiW1tbMt+GIay/TdAUeqMpmEZTMM1vE76HLsdxFAqF1NLSwtQPeZ6nlpYWhUKhuBN+LDSF7mgKptEUTEu2KScUCsWtx/M8eZ6nSCSiSCSi9vZ2Rdrb1R6JdH1N8kSH6aGjL0eO0/GR4bpyMzKUkZEh13Xlum7X12KhKXRHUzCNpmCaiaYC/h6wY2Ou48hzXWVIinSF14n6hravY+pswXHdjn/GiS3q1mgKNAXjaAqmmWkq4aHLcRzJ8zo23hmd48jpHZ7nkd4Q1THk9wyve3yO48hR/AsJu38/TaU3moJpNAXTTDaV0NDlOE5HXBc37LquvG7RcX47PXWG1/2jM8xE7gqiKfRGUzCNpmBaf5ryfXpR6pj6vIsxxo6OGIeW6CF1RdfxSVJP23dunabSDU3BNJqCaWabSuhC+k7dI+v8dyb99OZEme79HNBoCr3RFEyjKZiWbFO+hq5OsWIjwvQQK6xkb8WWaCrd0RRMoymYZqIpX6cXoz1A99j6EzNSk6nfOU2hE03BNJqCacn+zpMaukw8MBALTcE0moJpNIVkJPU2QAAAAPCHoQsAAMAChi4AAAALGLoAAAAs6PeF9Nwqm94ux8WkNJXeaAqm0RRMs3r3Iq9Vkt4ux23TNJXeaAqm0RRMM9GUr6Gr+4NkZmYqEAhw22ya8zxPX331lcLhcFcfyb7SM01BoimYR1MwLdmmEr6mq/tbH2RmZioYDBId5DiOgsGgMjMzfb89Bk0hGpqCaTQF05JtyteF9J1v8hkI9PtSMAwxgUAgzpvARkdTiIWmYBpNwTS/TSU0dHVt7OKGmfLRm+M4HZ0kOPHTFOKhKZhGUzDNb1O+Ti96CWwQ6ctvIzSFeGgKptEUTPPTSFKnF4Fo+vO0PRANTcE0moJpRk8vdr9AjPBwKb0biXd7NU0hHpqCaTQF0/w05fsV6QkPsSTbBk0hFpqCaTQF0/y0wdsAAQAAWODv7kUgQQnfFQQkiKZgGk3BNGN3L17cXD92BenBbyM0hXhoCqbRFEwz+DpdAAAA6B+GLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALGLoAAAAsYOgCAACwYECGrpMNDfrpA/erID9P77zzTtQ1b775hn50z2wVTr5Fc+fO0f/54IOo686fP6/Vq1apID9Pz2zYkPTjIbUdO3ZM99+3SFMKJ2vWzBl6afv2qOsikYi2bN6sO+74gYqmFGpp6RKdbGiIuvbAgQOaNXOGCvLz1NTUFHVbO2pqVDSlUHPnlJj8cTAINDY2qqKiXFO/W6Tbbv2+1q9fp3A4HHUtxyv40dzcrIL8PBXk5+mDD96PusbPMS3ecSiR7mCH9aGrrrZW8+fPj/pHrNMnR47oV//4j7ruuutUUfEzDRs2TD/7WYX+/Oc/91gXCoU0p6RYtbWH+/V4SG1tbW16/LFH1fxf/6XlZWWaOHGitmzZrH99880+a3fU1Oill7brjh/coccef1zH6+tVVra8z1s37Kip0fJlTygYDMZ83PKyMlVVbdXw4cON/0wYeOVlZTr8pz9p8eIl+tGPfqzXX3tNv/71/+yzjuMV/Nq8edMlv+7nmBbvOJRId7DH+tAVamlR5VOVWrnylzHXHK8/rvHjx2vd+g2aM3euVjy5Ql9++aWOHT3aY104HNadd92l3Xt+26/HQ2o7deqUxowZo8rKSs2bN19r1q5TVlaW6j6q67P2L6f/ojvvvEtPrlihe+9doIULF+rkyZN9/si5Ga6qX9yuWXffHfNxx44dq1f3vqZx48YZ/5kwsC5cuKAJEyZo1erVWnTffXpi2TKNHz9etYf7/uHieAU/6urq9Lt9+7RgwcKYa/wc0+IdhxLpDvYEbD9gUVGRJOmPhw7FXDN79j2aPfuers+PHTsmSfrmjTf2WDdy5EiVlZX3+/GQ2nJzc7Vj566uzxsaGtTa2qqbbrypz9pf/KKyx+fHjh7TqL/5G40YMaLHf7/33gWSpA8//H3Mxy2vqOjPbmMQu+KKK/TUypWSpJZQSEc++USffvqp5s2f32ctxyskqr29XWvXrtHkwkLNmDlTO3fuiLrOzzEt3nEoke5gj/Why6+jR49q06aNKi4u0Te/+c2B3h0Mcs3nzmnFkz9Xbm6ufjh79iXX7t27V//2b29r7br1chzH0h4ilYTDYU2bNlWSVDBpkh588KFLrud4hUupqXlZn536TM8997yam5sT+h4/xzQMfoP67sWjR4/q0UeWatKk7+jJFSsGencwyJ07d06lpUt04UJYmzZvUWZmZsy1v9u3TxvWr9Pjjz+hGTNmWNxLpJJgMKht1dX61dNP68SJE1paWtrn+r9OHK9wKadPn1bV1q0qLilWMBjU542NkqTGxs/V2toa9Xv8HNOQGgbtM12fHDmiRx5Zqptv/ns98+yzCgQG7a5iEDh79qyWli7R+fPnta36RY0ePTrm2r1792rD+nVavHiJ7n/gAYt7iVTR2PhXvf3W2yqcMkV5efnKy8vX0aNHtffVV9XU1KSRI0f2WM/xCvEcOnhQbW1temXXLr2y6+tTh+vXrZUklZT0vPPQzzENqWNQHhmOHj2qpUtLFYlEdMstt2jfvtclSRMmTNDf/d3NA7x3GGyam5u1ZPHDqq+v14IFC/Xee+9Kkq6++mpNn357j7Wvv/6aNqxfp7HXX6/sEdnas2e3JOnWW29TTk6O7V3HIJU1LEtVVVu1Z89uFReXKNQS0hv79+v6G25QdnZ2j7Ucr5CIWyZP1sZNX9+1+PFHH6u6epuKi0s0derUHmv9HNOQWgbl0PV//+M/FAqFJEmbNm3s+u8PPvgQBzH0cfLkSdXX10tSjwtTvz1xYp8D1L//73+X53k62dCgZ595puu/33DDOIYudLkqO1u/eWGrNj7/nKqqtioQCKiwcIrKKyrkuj2vyuB4hUTk5OT0OMaMGDFS1dXbNO170zRmzJgea/0c05BanFAoFP0ChYs8z+v6iETa1d4e0ahRo2ztH1LImTNnlJHhynUz5DhO10dvNIVE0RRMoymY5qepQX0hPQAAwFDB0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWMDQBQAAYAFDFwAAgAUMXQAAABYwdAEAAFjA0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWMDQBQAAYAFDFwAAgAUMXQAAABYwdAEAAFjA0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABQxdAAAAFjB0AQAAWMDQBQAAYAFDFwAAgAUMXQAAABYwdAEAAFjA0AUAAGABQxcAAIAFDF0AAAAWMHQBAABYwNAFAABgAUMXAACABT6HLufy7AWGEL+N0BTioSmYRlMwLbFGEhq6HKfnxjzP878/GNJ6N9G7md5oCvHQFEyjKZjmt6mkTi+2tbUl820YwvrbBE2hN5qCaTQF0/w24XvochxHoVBILS0tTP2Q53lqaWlRKBSKO+HHQlPojqZgGk3BtGSbckKhUNx6PM+T53mKRCKKRCJqb29XpL1d7ZFI19ckT3SYHjr6cuQ4HR8Zris3I0MZGRlyXVeu63Z9LRaaQnc0BdNoCqaZaCrg7wE7NuY6jjzXVYakSFd4nahvaPs6ps4WHNft+Gec2KJujaZAUzCOpmCamaYSHrocx5E8r2PjndE5jpze4Xke6Q1RHUN+z/C6x+c4jhzFv5Cw+/fTVHqjKZhGUzDNZFMJDV2O43TEdXHDruvK6xYd57fTU2d43T86w0zkriCaQm80BdNoCqb1pynfpxeljqnPuxhj7OiIcWiJHlJXdB2fJPW0fefWaSrd0BRMoymYZraphC6k79Q9ss5/Z9JPb06U6d7PAY2m0BtNwTSagmnJNuVr6OoUKzYiTA+xwkr2VmyJptIdTcE0moJpJprydXox2gN0j60/MSM1mfqd0xQ60RRMoymYluzvPKmhy8QDA7HQFEyjKZhGU0hGUm8DBAAAAH8YugAAACxg6AIAALCAoQsAAMCCfl9Iz62y6e1yXExKU+mNpmAaTcE0q3cv8lol6e1y3DZNU+mNpmAaTcE0E035Grq6P0hmZqYCgQC3zaY5z/P01VdfKRwOd/WR7Cs90xQkmoJ5NAXTkm0q4Wu6ur/1QWZmpoLBINFBjuMoGAwqMzPT99tj0BSioSmYRlMwLdmmfF1I3/kmn4FAvy8FwxATCATivAlsdDSFWGgKptEUTPPbVEJDV9fGLm6YKR+9OY7T0UmCEz9NIR6agmk0BdP8NuXr9KKXwAaRvvw2QlOIh6ZgGk3BND+NJHV6EYimP0/bA9HQFEyjKZhm9PRi9wvECA+X0ruReLdX0xTioSmYRlMwzU9Tvl+RnvAQS7Jt0BRioSmYRlMwzU8bvA0QAACABf7uXgQSlPBdQUCCaAqm0RRMM3b34sXN9WNXkB78NkJTiIemYBpNwTSDr9MFAACA/mHoAgAAsIChCwAAwAKGLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALBmToOtnQoJ8+cL8K8vP0zjvvRF1TW3tYixb9g6YUTtbds2Zq9+7dUddFIhHtqKlR0ZRCzZ1TEnXN+fPntXrVKhXk5+mZDRuM/RwYPI4dO6b771ukKYWTNWvmDL20fXvMta+//prumf1DTSmcrJ/Mn6dDBw9GXZdIN4m0jNTU2NioiopyTf1ukW679ftav36dwuFw1LUcr+BHc3OzCvLzVJCfpw8+eD/qGj/9HThwQLNmzlBBfp6ampr6fD2R7mBHwPYD1tXWqrS0VNdcMybmmi+++EKPPfqorrvuOpWVl+vQwYP6p2ef0XV/+7f67tSpPdaWl5Xp8OE/afjw4VG3FQqFNKekWFlZWUZ/DgwebW1tevyxR3VVdraWl5WprrZWW7ZsVk5OjmbOmtVj7fvvv6e1a9bo1ttu04IFC7Vv3+tavnyZ/uV/7deoUaO61iXSTSItI3WVl5Xp9Om/aPHiJWpqalJNzcu68sortWzZ8h7rOF7Br82bN8Vdk2h/O2pqtGnTRl177bWX3NaluoM91p/pCrW0qPKpSq1c+cuYa7744gvNmnW3NjzzrObOnadVq/+7JOlw7eE+a8eOHatX976mcePGRd1WOBzWnXfdpd17fmvmB8Cgc+rUKY0ZM0aVlZWaN2++1qxdp6ysLNV9VNdnbfhCWHPnztOzz/6T5sydq0cffUytra36f//5nz3XJdBNIi0jNV24cEETJkzQqtWrtei++/TEsmUaP368ag/3PQZxvIIfdXV1+t2+fVqwYGHMNX76czNcVb+4XbPuvjvm9uJ1B3usP9NVVFQkSfrjoUMx1+Tm5uqplSsViUTUfO6c9r+xX5KUn1/QZ215RcUlH2/kyJEqKyvvxx5jsMvNzdWOnbu6Pm9oaFBra6tuuvGmPmt/cMcd+sEdd+jLL7/U2bNn9ea/vqnhw4cr91vf6rEukW4SaRmp6YorrtBTK1dKklpCIR355BN9+umnmjd/fp+1HK+QqPb2dq1du0aTCws1Y+ZM7dy5I+o6P/3de+8CSdKHH/4+5uPG6w72WB+6/PjDH/6gxx97VJL0D4sWdf2RA2JpPndOK578uXJzc/XD2bNjrvvNr3+tl17armHDhum/rVrV49Qi0CkcDmvatI5ThAWTJunBBx+KuZbjFeKpqXlZn536TM8997yam5vjrvfTH1LDoL578eabb9YLL2zV0kce0c4dO7R5U/zz4Ehf586dU2npEl24ENamzVuUmZkZc23JnDna8s//Q7fffrueqqyMeTEr0lswGNS26mr96umndeLECS0tLZXneVHXcrzCpZw+fVpVW7equKRYwWBQnzc2SpIaGz9Xa2tr1O/x0x9Sw6Acuurq6lTz8svyPE+TvvMdPfTQw7r++uv5w4iYzp49qyWLH1Zzc7O2VlVp9OjRUde9/fZb2rt3r6655hoVFRVpeVm5IpGIDhw4YHmPMZg1Nv5VNS+/rOPHjysvL1+zZ9+j6dOn68iRj/vcHcbxCok4dPCg2tra9MquXZo1c4YqKjpOI69ft1ZvvPFGj7V++kNqGZSnF9va2rRx4/N69913ddv023T8+HGdOHFCP/rxjwd61zAINTc3a8nih1VfX68FCxbqvffelSRdffXVmj799h5r64/Xa9u2Kn1UV6vcb31L77/3niRp4rcn2t5tDGJZw7JUVbVVe/bsVnFxiUItIb2xf7+uv+EGZWdn91jL8QqJuGXyZG3s9uznxx99rOrqbSouLtHUXne5+ukPqWVQDl2TJ0/WmjVrtX37i/rnLVt01VVXaf5PfqInnlg20LuGQejkyZOqr6+XpB4Xpn574sQ+Q9fiJUsU8SJ6Y/9+vfXWW/rGN76hX/yiUjNmzrS6zxjcrsrO1m9e2KqNzz+nqqqtCgQCKiycovKKCrluzxMEHK+QiJycHOXk5HR9PmLESFVXb9O0703TmDE9X3bGT39ILU4oFLrkCWLP87o+IpF2tbdHuOgYUZ05c0YZGa5cN0OO43R99EZTSBRNwTSagml+mmJkBgAAsIChCwAAwAKGLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALGLoAAAAsYOgCAACwgKELAADAAoYuAAAACxi6AAAALGDoAgAAsIChCwAAwAKGLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALGLoAAAAsYOgCAACwgKELAADAAoYuAAAACxi6AAAALGDoAgAAsIChCwAAwAKGLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALGLoAAAAsYOgCAACwgKELAADAAoYuAAAACxi6AAAALGDoAgAAsIChCwAAwAKGLgAAAAsYugAAACxg6AIAALCAoQsAAMAChi4AAAALfA5dzuXZCwwhfhuhKcRDUzCNpmBaYo0kNHQ5Ts+NeZ7nf38wpPVuonczvdEU4qEpmEZTMM1vU0mdXmxra0vm2zCE9bcJmkJvNAXTaAqm+W3C99DlOI5CoZBaWlqY+iHP89TS0qJQKBR3wo+FptAdTcE0moJpyTblhEKhuPV4nifP8xSJRBSJRNTe3q5Ie7vaI5Gur0me6DA9dPTlyHE6PjJcV25GhjIyMuS6rlzX7fpaLDSF7mgKptEUTDPRVMDfA3ZszHUcea6rDEmRrvA6Ud/Q9nVMnS04rtvxzzixRd0aTYGmYBxNwTQzTSU8dDmOI3lex8Y7o3McOb3D8zzSG6I6hvye4XWPz3EcOYp/IWH376ep9EZTMI2mYJrJphIauhzH6Yjr4oZd15XXLTrOb6enzvC6f3SGmchdQTSF3mgKptEUTOtPU75PL0odU593McbY0RHj0BI9pK7oOj5J6mn7zq3TVLqhKZhGUzDNbFMJXUjfqXtknf/OpJ/enCjTvZ8DGk2hN5qCaTQF05JtytfQ1SlWbESYHmKFleyt2BJNpTuagmk0BdNMNOXr9GK0B+geW39iRmoy9TunKXSiKZhGUzAt2d95UkOXiQcGYqEpmEZTMI2mkIyk3gYIAAAA/vx/SN4jbijHNF8AAAAASUVORK5CYII=)"></div>Layout / Position</a><a class="thumbnail" href="/wave/docs/examples/layout-size"><div style="background-image:url(data:image/png;base64,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)"></div>Layout / Size</a><a class="thumbnail" href="/wave/docs/examples/form"><div style="background-image:url(/wave/assets/images/form-b0f5fccd418b3d5e40f559cf1d60cb46.png)"></div>Form</a><a class="thumbnail" href="/wave/docs/examples/text"><div style="background-image:url(/wave/assets/images/text-3c5275bb7d17545e6fd8952074ab9d13.png)"></div>Form / Text</a><a class="thumbnail" href="/wave/docs/examples/text-sizes"><div style="background-image:url(/wave/assets/images/text-sizes-5d78df884df4f57688aef7d5b7b68349.png)"></div>Form / Text / Sizes</a><a class="thumbnail" href="/wave/docs/examples/label"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Label</a><a class="thumbnail" href="/wave/docs/examples/link"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Link</a><a class="thumbnail" href="/wave/docs/examples/progress"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Progress</a><a class="thumbnail" href="/wave/docs/examples/progress-update"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Progress / Updating</a><a class="thumbnail" href="/wave/docs/examples/message-bar"><div style="background-image:url(/wave/assets/images/message-bar-d893610affc5c6857a7cbf1546ad8326.png)"></div>Form / Message Bar</a><a class="thumbnail" href="/wave/docs/examples/textbox"><div style="background-image:url(/wave/assets/images/textbox-ad4ead8b116b9f18042ba1302cf471c9.png)"></div>Form / Textbox</a><a class="thumbnail" href="/wave/docs/examples/textbox-trigger"><div style="background-image:url(/wave/assets/images/textbox-trigger-3063508395dc193e6087e98ec3caf604.png)"></div>Form / Textbox / Trigger</a><a class="thumbnail" href="/wave/docs/examples/button"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Button</a><a class="thumbnail" href="/wave/docs/examples/buttons"><div style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV4AAAA7CAYAAAAzZeJHAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDEyOjUyOjE2IFBNIFBEVOgeUnYAAA+pSURBVHic7d17VFT13sfx9wwgDAymXERBQbOkELREzERRC9I0O0eltDx1sNXKPE8grU6dU0+tSnvOg2kXUbs8pdbSVWFAYaiYN0i0UCoURO4JJgxDXGa4DAzEPH+AU5NWkDJM+H2t5Vo489u//V17sz+z92/P/qEwmUwmhBBCWI2yvwsQQoirjQSvEEJYmQSvEEJYmQSvEEJYmQSvEEJYmQSvEEJYmQSvEEJYmQSvEEJYmQSvEEJYmQSvEEJYmQSvEEJYmX1vGm/bto2YmBiampr6qh7xC2q1mvj4eJYvX96j9nm5p0hPP4yhpaWPKxO9oXJ2Ztas2QQGTehR+/b2doxtrchUKrZFoVAwyNEJBweHy+unN5PkuLq6Suj2A7VaTWNjY4/abtq4gcjIexk+YkQfVyV6Q1NVRWLiTh6LXtWj9s1NjRK6NkqhUOCidr2sPno11CCh2z96s90NLS0SujZo+IgRvboKkdC1XVdi38gYrxBCWJkErxBCWJkErxBCWJkErxBCWJkErxBCWJkErxBCWNmfOnj9/f2Jjo7G0dGxv0sRQoges4ngNZlMFv9qamrYsmULQ4YM+c3l1qxZQ3x8PPPmzbNSpVcvvV7P2rg45s65g6m3TGHhX//C+++/R2dnp9Vrycn5luBJN7M2Lu5P0a8taTcaycn5lj27d/PpJ8l8vi+NoqLCfvnecEHBGZKTEjl//vsr2m/tDz+QnJRITs63V7TfK6lXjwz3pYaGBhISErCzs2PKlCk89NBDjBs3jrCwsF/9pVi9ejXZ2dmkpaVZudqrS2dnJ//1j5Xk5+fj7+9PcHAwOTk5xG/YQH19PbGxjwNw39IllJSUcCL7636uWFyKyWQiM/MI9fX1XDNkCJ6eHtTW1pKXm0tbWxtB3Y8zHzywH71ez8JFi/u54oHLZoK3urqaRx99FABHR0eOHz/O9OnTCQkJ4fjx4xe1VygU5OXlkZeXZ7UaFQrFVflE0cmTOeTn5zP11lvZtGkzCoWClpYWFi9ayMc7dxITswql0iYunnrEZDKhUCj6uwyrq62tpb6+Hi8vL0KnzwCgo6OD/Z/vo6y0lMDAoKtyu/QHmzxa2tra2Lt3LwA33ngjHh4emEwmkpOT2bJlC62trcyZM4dNmzZhMpmYOnUqAHl5eXz//fdERUVRWVlJQ0MDzz33HIGBgWRlZdHS0kJGRga+vr7mdU2dOpX09HR0Oh0ajYa33noLZ2dnACIjIzGZTKxZs4bMzEw6Ojrw9PTEYDBw9uxZi5pPnTpFR0cHXl5e1tlIVmQwtAJgb29vPjCdnZ1J/uRT0vZ9jlKpJCIinKKiIjo7OwmedDPvvvsOAFqtlqf//W/uiAgnbMZ0Vq2KoaKiwtz3vfdEcufcORzYv58Fd80ndNqtPPXkPy0ek87Ly+XBBx9geug0Vqx4hOpq7UU1frZrF0uX3Mu0W6fyl7sXsGPHdvN7a+PiCJ50M0lJidy9YAHLo/7e434Hkh9/7ABAofjpsLe3tyfijjnMm38XCoWC3amp6HS6ruMtKZGCgjMAGAwGjmdlsWd3Krt2pXDs6FHzPjK2tZGclMiJE8fJP32a1M928dlnu8g/fdpi/eXl5exL28tnu1L45uuvLzlMVV5+loMH9pPy6SfsS0ujuLjI/F5OzrckJyXyXVkZ+9L2kn74EAB1dXUcPnyIXSmfcuSLDAwGw5XdcH3AJoMXwN3dHYDm5mbzaxEREYSGhrJ161bOnz9/yeXc3NyIjo7m/fffx2g0snr1alJSUjhy5Ajp6emEhYXxyiuvADBy5EgOHTrEmDFjiIuLY9++faxYsYKNGzda9BkbG0tHRwdvv/02DQ0N7NmzBz8/P8aPH2/uJygoiPT0dKqrq/tic/SriRMn4uHhQeaRI0T9/UF27NhOeXk5KpUKV9euyUJWPLLC3D429nFuuWUqnZ2drIqJJiMjnQUL7mbp0vs4npXFqphoi4NOr9fz5ptvcHt4OKNHj+HgwYO8+eYbANTX1xP92GOcyc9n1uzZeHp6sn7dyxb1HTx4kBdeeB4XFzUrV/4DDw9PXnv1VXbvTrVotzE+nvHjxzNr9uwe9TvQuLm54+TkhEZTRfrhQxQXF9HU1Ii9vb15tq0bA240tw8KmsCwYV6YTCaOHc2kqqoSXz8/rht7HVptNceOZlpcAVZrNGhrtIwePQalQklBwRkqK7uOU61Wy9fZJzAajYzy9aW5uYmysjKL+s6fP8/X2dnYOzgQEDAeJ5UTuadOUVFRbtEuLy+XoUPd8Pb2oa2tjaNHM2mor2eEtzdOKhUnT+b01Sa8YmxmqOECpVLJzJkzWbZsGe3t7Rw5csT8nsFgICQk5Ddn6lKpVCxevJizZ89y7tw5Nm/eTEJCAs888wz29vbU19cTHBxs7i8yMpKCggLKyspQKpUsWrSI8PBwiz4zMzO58847zf9PSEhg0aJFzJs3j9OnTzN//nzz6wORi4sL77y7hVdeWc+xo0fJzc3ltVdfZXJICM8//wLe3t5E3nMPSUmJlJSU8MCDDwJdUxs+8cQ/cXRyIigoCICCwgKOZmZSVVWFj48PAK2trby8bj1jx46loaGBiPDbOdE9vJS2dy96vZ6lS5fy5FP/AmDdupf56MMPzfXdcIM/L69bT2hoKE5OTkwKDubBB/7G8aws5s+/y9wuavlyoqK6ptf88IMPfrffgcbBwYGwmbM4dfIk1dUa6urqyD11Ck9PT4InT8bZ2YVrrx3Ld2Vl6PV6rh83Duga458w8Sbs7Oxwc3MDoKGhHo1GQ0tLCw72XTGiVNoRFjYTpVKJm5sbX331JVqtFm9vH8pKSwAIDp6Mt48PJpOJw4cOYmxrM9c3ZMgQbpl6K8OHD8fOzg4PT08OHzqIVqvF19fP3M7f/wbG+fsDUFJSTLvRyNix1zHxppuArqGx0pKSvt+gl8Fmgtff39/i09NkMhEbG0t1dTUeHh4A5OTk/O70iG1tbeZhgLq6OgAqKyuBrvEsnU5nHkqora1Fo9HwyCOPEBAQQEBAAGq12uIsG7AIf4DU1FSam5uZN28e69atY/78+bS3t5OUlPTHN4CN8/X1ZcOGeOrr68nKyiI5KZHsEyd4PDaWhJ07L7mMg4MDvn5+7Nm9mx07tnPu3DmKi7ouHdvb2y3ajR07Fug6+FxdXWnpnsnrwlnR9BkzzO3DZoRZBKS3tw+lpaW8/vprVFRUUFhQAIDR+NM6AG6+eZL55570OxCp1WqmhYbS1taGVqvlu+/KqKmp4dixY4SHR1xyGaVSiVqtpqKinOLiIpqbmtDpdAAWVy6DBw82j/Wru6+EfuzoGt7Q67uOW6/hw4Gu+yVew4fT0NBgXt7FxQW9Xk9u7imaGpto0HW91/mj5ZCEe3ceADR29/vzGflGjBhh88FrU0MNGzZs4PXXX+fZZ59l0qRJxMfHW7x/pb+6tGDBAk6cOMHixYs5c+YML774IlrtxeN8v1xvS0sLqamphIaGMmzYMG677TYOHDhgDvqBprSkhCNHvkCn0zF06FDmzp3L/73zLhMmTKCkpPhXh300Gg1Ll9zLtm1bGTJkCAv/upCQKVMuateTGzo/v6f5yxucGza8zuOxsRQXFTPp5kk8+ujKS/ZxqRuAv9XvQKPX69FUVWE0GnF0dGTUqFGEhc3Ezd0dvU530QnHBS0tLRw8sJ+iwkIcBzkyevQYPD2HXdSu1/flfrG5c3NP8eWxo+h0Ojw8PAi4MeCSi1369+XnJ229rKMf2MwZb2FhIbGxsVZdZ2RkZPeNoQjOnj2Lq6sr77zzjsWn8K9JSEhgyZIlvPTSS7i4uPDRRx9ZoeL+kZGRwebNm4iKWk50TAwALc3N5quPQYMGAT8dEJ2dnSiVSo4fz0Kn0/HCCy+y4O67Adi7d0+v1n3ttdcC8MUXGUybNs1cz8/t//xzRowYwZatWwH46ssvr0i/A01VZSWnT+cxzt+fwMCuoZ+Ojg7au68M7Oy6P5i69+OFb3/UaLUYjUaCJ0/Gz280AOfOVVzU/28ZPNiVpqZGNFVV+IwciclkQlOtsWhz/vvvcXZ2ZubMWQA9ul/iOrjrzLqqqgovr+HdP1f2qrb+YDPB2x+qqqoAiIuLIzMzk2XLlvX4rGfv3r00Njby8MMP09bWRkpKSl+W2q/m33UX23ds5733tpGdnY2X1zByc3PRarWEh4fj6ekJwLBhXhQWFvLUk0+y7G/L8PDoev3jxI9pMbRwMieHgu5hgJ6aM3cub7/9Fokff0xjYyMKhcI8/nuBh4cnZ87ks3FjPNcMvoakpMQr0u9A4+vnR3FxEUWFhfxQU4NKpaKurg6DwYCPz0icnFRA130SXUMDWV99xXXXX4+TygnoGp7p6Oigtra2RycnPzfm2rFUVlbyzTdfU/NDDXq9ntbub8tc4OTkRH19Pafz8nAY5MB3Zd/9br+jRvlyJj+fstLSrg8QBdRc4qrV1tjUUIO1rVmzhu3btxMREcHTTz/NBx98QGlpaY+WbW1tJSUlBYVCQVpamnnMayDy8vJi69Zt3Hbb7Zw7V0FGRgYODg5ERS3nxdVrzO1WxcYyceJEjh07SvaJbKZNm8Zjj0XzQ80PvPnGG6hUKoubXT3h5ubGps2bCQgIIP3wYbTV1Tz9zH9btPmf//yHiRMnsjMhgdTUz4iOjrki/Q40KpWKmbNm4e3jQ1NTE1VVVSiVSsb5+zM5JMTcLigoCHd3d6qrNdTUaPHyGs74wEBaDa3knz6NvZ29xc2unvDy8iJ48mQGDRrEuYoKXJyduf766y3ahEyZgru7O6WlJVSUlxMYGPi7/To6OhI6fQZDhw6lsvI8BoPBYizfVvXqb67Jl6strV+/nieeeIL77ruvz4caerqb1q39X57819N9Wov4Y3qzb5oa9X1cjbgcatfBl7X8VT3U8EdNnjyZlStXsmzZMsrLy0lOTu7vkoQQfyJX9VDDH3X77bdz//33k5uby8KFCzEajf1dkhDiT0SC9w9Yu3YtKpWKkJAQvv3WdmdAEkLYJgleIYSwMgleIYSwMgleIYSwMgleIYSwMgleIYSwsl4Fr1qt7qs6xG/ozXZXOTuj6X4UWtgOTVUVqu5Z8XpCHlayXVdi3/TqAYr4+HhiYmIs/jqA6FtqtfqiWdp+y6xZs0lM3Imhe1pFYRtUzs7MmjW7x+0HOTphbGsd8DOm/dkoFAoGOTpdfj+9eWRYCCHE5ZMxXiGEsDIJXiGEsDIJXiGEsDIJXiGEsDIJXiGEsDIJXiGEsDIJXiGEsDIJXiGEsDIJXiGEsDIJXiGEsDIJXiGEsDIJXiGEsDIJXiGEsDIJXiGEsLL/BwgYTkZKAHe4AAAAAElFTkSuQmCC)"></div>Form / Buttons</a><a class="thumbnail" href="/wave/docs/examples/checkbox"><div style="background-image:url(/wave/assets/images/checkbox-7b117add24c72bf0c30d9ae546f39718.png)"></div>Form / Checkbox</a><a class="thumbnail" href="/wave/docs/examples/checklist"><div style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJoAAACWCAYAAAAmPZFsAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDEyOjUzOjA0IFBNIFBEVHzOnogAABjOSURBVHic7d15XBX1/sfxF0uCQOAROeKWK25gqSUgmYq4oKnlkgoJ4o6hppSiKS0uXZdEUcGwrkiKoZJaZmluN5fsuiSmCAoJXWUTRGTVI/L9/aGcX0fNOIhDx77Px8PHgzPzne98Z3gzM+ecmY9GQgiBJD1hxtU9AOmfQQZNUoQMmqQIGTRJETJokiJk0CRFyKBJivjbB+331FRiYmLQaDTVPRTpMVQ6aAUFBSwPCaH/q/142a0zw4a9QVTUep1ALF60iBc7duDChQuVHmD4mnCWLlnM0aNHKt2HVP1MK7NQQUEBfqN8SU1NpW7duji1a0dyUhIrQ0OJOx1HyPLlGBkZVckAJ4yfQNu2bXFze7lK+pOqR6WCFha2mtTUVF4fNIj33puDiYkJJSUlBE6fxqFDP7Lr22/pP2BAlQyweYsWNG/Rokr6kqqP3qfO27dv8/1332FjY8PMmUGYmJgAULNmTd6eNg1nZ2dycnJ0lsnIyGDMmNF0dnVlxPBhxMfHa+dpNBpCli2jd6+euHV2ZbTfKE6dPKmdX376PXv2rHbaV1/FMnjwIDq7ujB48CB2bN+us75t275i8KDXcet8d327v/9eO6+0tJTQ0BX09exDZ1cXhr0xlL17f9B3N0h60jtoaWlpFBYW0qFDB8zMzHTmtW7dhjWfRuA3erTO9KVLFmNb2xZHR0eSkpKYPWsW5d/lz53zHtHRG2nb1pE3R47kypUrTJrkz/nz5x+6/piYGD5euBBjIyO8vLwxNTFh/vx52rBs3bKFhQsWYGNjg5/faMzMzJkz5z2+/fZbACLXreOLqCgcWrYkYPJkTExMeG/27Me6jpT+mt6nzhs3bgBgY1Orwsu8MWwYfn53w/emtzeJiQlkZGSg0WjYv38/Tk7tCFm+HGNjYzp27MjkgADWR65jydJPdPopKytj3b8/x8LCgnXrIrG2sWGkjw+TJwcQFxeHh0dP1n62Fjs7O1auWo2ZmRkjR45k4MABbI75kv79+3Pp0iUARo8eTYcOHenTx5PExATs6tTRd1dIetA7aNbW1gDcyL9R4WU6tO+g/blFi+YkJiZQUlzMxYsXAXB72Q1j47sHVxcXV2rUqEFCQsID/eTk5HDt2jU6duyItY0NALVr12bTpi8BuHr1KrnXrgHQvVtXnWVLS0sB6NOnD/v27cV/4kQcnZzo2LEjfT37UtvWtsLbI+lP76A1aNAAC0tL4k6fRqPRUKNGDe285OQk1kZE4OzswtA33tBON753HQfAH96NCh5+K5wQ4qHvWv/q1rny+fXq1eNfixbrzCsPcnd3d76MieGHPT8QdyaOjRs2ELV+PaErV+Hm5vbI/qXK0/sarUaNGnj28SQvL49lnyylrKwMgJKSEkKWLWP//v3UqlWx02qbNm0BOHrkiLafY8eOcfv2bVq1av1Aezs7O2xtbUm8cIHs7GwArl27hre3F0uXLsHOzg6VSoUQAgcHB9q1a4ejoyO//HKKrKzMe/3/RHx8PG8FBLB27Wd8NG8+ZWVlHD50SN9dIemhUh9vTJkyhRMnjhMbG8vhw0d47rnnSEq6SF5eHt26dcOjZ88K9dO0aVPc3Xtw8OABpk6ZQvMWzfl2505MTEzw8/N7oL2xsTFjxoxl6dIlTJw4gS4vd+Ho0SOkpqbi6zsKY2NjRo3yY8WK5YwdM4Yur3Th1zNnOH78OOPGjadHDw/27d3Ljh07OHHiBI5tHfl+9913pM8//3xldoVUQZUKmrWNDVFfbGBtxKccPPgf4uJOo1bXxc9vNF7e3np9WLvw449ZvWoVe/bs5pdfTtGyZUsmT56Co5PTQ9uP8PLC1NSUTZui2bJlM/b29sx+bw6enp4A+Pj6UsOsBptjYohav57atW2ZONGfcePHA/DujJk8U6MGBw8cYN/evTRo0IDZs9+jb79+ldkVUgUZyWcGJCX87b9Ul54OMmiSImTQJEXIoEmKkEGTFCGDJilCBk1ShAyapAgZNEkRMmiSImTQJEXIoEmKkEGTFCGDJilCBk1ShAyapAgZtIdYHxn5wEPJ0uORQZMUIYMmKaJSQbt06RIDBgzAysqK2rVrM2bMGAoLC/9yudjYWIYOHVqZVWr98ssv7Nix4y/bDRs2DBcXF51pOTk51Ln3RHplx7JixQqMjY0xNTXF3NycNm3asHz58r985vRxODk5ce7cucfqIyQkhLy8vEe2SUhIwMjIiO//UKsEdPfV5MmTWb16td7rr1TQXn31Vdzc3EhPTycxMZHi4mKmTZtWma70VpGg5efn89NPP5GXl0dycnKVj2HMmDGUlpZSWFjIhg0biImJYdasWVW+nqpUkaBt3LgRV1dXoqOjq3z9egetpKSEpKQk3nnnHaytrVGr1YSFhTF8+HBtm+3bt9OqVStUKhVDhgwhKyvrgX6EEMyfPx97e3vs7e2ZOXOmtmzBH+epVCpmzJjBnTt32Lx5M+PHjycqKgp7e3vu3Lnz0DFu27YNT09PvLy8nshOK2dqaspLL73Ezp07iYiI4Nq9cgznz5+nS5cu2NjY4OLiwokTJ7TLfPnll7Rt2xa1Ws2QIUMoKioC7v5xeHt7o1KpaN68ORs2bHjoOh/Vrny9zz77LC+88AKnT58GoFOnTqSlpdG0aVMWL1780H6FEMTExBAZGcnevXu146oqegetZs2aeHp6Mnr0aO3h3NbWll69egF3N9bf35+YmBhycnJo1qwZY8eOfaCfzz77jJ07d3L27FkuXrzI8ePHWbFihXberl27+PXXX7l8+TJnz54lNDSU4cOH89lnnzFq1CgyMzO1JbPuFx0dzfDhwxk+fPgTDVo5tVpN586dOXLkCBqNhgEDBjBu3Djy8vIICgpi4MCBFBcXc/XqVQICAti9ezeZmZk0btyYgwcPAuDv74+1tTWZmZl89913BAUF6QS03J+102g09O/fnwkTJpCfn8+SJUvo27cvt27d4sSJEzRo0ICUlBSCgoIeug0//fQT9vb2tG7dmu7du/P1119X6T6q1Klz+/btuLm5MX78eJo0acLcuXMpLi4G7v7F+vv706FDB0xMTJg/fz4HDhygpKREp48NGzawePFi7OzssLa2Jjg4mO33PlL44osvmDNnDmq1GisrK2JjY/H19a3Q2DIyMjh79izu7u60adMGc3Pzh/7CqpparSY3N5fDhw/TsGFD/Pz8MDIyYvDgwbRo0YKjR49iamqKEILz588jhCAkJIT+/ftTUlLCzp07WbFiBWZmZrRq1YqxY8c+cInwqHaHDh1CpVLh6+uLkZERffr04eTJk3/6x3i/6Ohohg0bBvBE/kAr9aT6M888Q0BAAAEBAWRkZDBnzhzGjRvHpk2bSEtLIzIykoiIiP9fiamp9rRS7siRI/To0YO6desCdw/darUagPT0dJo1a6Zta2VlhZWVVYXGNnfuXLKysnjmmWe007y8vJ7ItdofZWRkYGtrS1paGocOHcLe3l4779atW+Tk5NyrfLSJjz/+GB8fH/r160dISAhFRUUUFhbSpEkT7TKlpaXaX3y57OzsP213/z4DaNiwYYXGfvv2bdasWQOgc62dnZ2NnZ1dRXfBI+l9RLt8+TIbN27Uvq5Xrx7z5s1j79692tezZs0iMzNT+y8/P/+BjXZzc9OeQjIzM8nKytJWdaxfv75OMAoLCx+oIvlnzpw5w759+xBCIITg4sWLFBYW/un1XFVIT0/n559/pkuXLtSrVw9XV1ed7b9+/TpeXl4A9O3bl0OHDvHbb79RUlLC/PnzqVOnDmZmZly6dEm7TE5ODuHh4TrreVS7+/cZwJUrV7TXvY+yZ88eunTpot1nQgi8vb3ZsmVLle0jvYNmbm7OpEmT+Pzzz8nPz+d///sfM2fOxNnZGYARI0awbt06Tp06hRCC2NhYXn/99Qf6GTlyJMHBwVy9ehWNRkNQUBBLly4FwNfXl+DgYLKzs7lx4waDBg1i69atAFhaWpKYmEh+fv4DfV64cIHLly/TvXt37TQHBwfq16/P/v379d3Uv6TRaDh27Bj9+/fn7bffpnbt2nTt2pXMzEwiIyO1p0kXFxeuX79OXFwcL774Irm5uVhYWGBtbY2xsTEWFha89tprBAYGcvPmTa5du8bAgQP58ccfddb3qHZdu3YlLy+PiIgIhBDs2rULV1dXbR0US0tLTp8+ze3btx/Yjj+eNstV+elTVMKPP/4oOnXqJMzMzIRKpRLe3t7i6tWr2vnbtm0TrVu3FtbW1sLV1VWcOnVKCCHE1q1bxZAhQ4QQQpSVlYl58+aJevXqidq1a4uhQ4dq+ygrKxMffPCBUKvVwtraWkydOlXcvn1bCCFEQUGB6Nevn7CwsBAFBQU64woODhb+/v4PjHfRokXCx8dHZGdnC1tb2wfGcr/IdevE9m3bHjpv+fLlwsjISJiYmAhzc3Ph5OQkwsLCdNrEx8eLV155RTz77LPCwcFBREdHa+d9+OGHwt7eXtjb24vBgweLnJwcIYQQeXl54s033xS1atUS9evXFzNnzhSlpaVCCCEcHR3F2bNn/7LduXPnhJubm7CwsBBt2rQRx48f1643NjZWqNVqMXv2bJ2xFhQUCCsrK5Genq4z/ebNm6JWrVoiOTlZZ18FBASIVatWPXTfPIos8vIQ6yMjqVWrFq8PGlTdQ3lqyK+gJEXIoEmKkKdOSRHyiCYpQgZNUoQMmqQIGTRJETJokiJk0CRFyKBJipBBkxQhgyYpQgZNUoTed9h+8803rAxdwfXr1x9rxSqViqlvT2PgwIGP1Y9kIPS9r8ijh7uIP3dO7/uR7hd/7pzw6OH+2P1IhkHvU+f169dp6+j42AFv6+j42EdFyXDIazRJEZV6CkppY8aM5kxc3APTP/zwIwbIazyDYBBBAxg1yk/n/2kHKvxfakvVz2CCZm1tTf369at7GFIlGUzQ/sqWLZuJWr+e3Nzr9O7dCweHlpw4eYLQ0JXA3UfjQkKWsWf3bgDGjhvHr2fO0K7d8/hU8Cl4qfKeijcD3323i/CwMN6dMYPYr2Jp9NxzRH0RpdNm8aJ/cSYujtCVq1gXuZ5fz5zRFkGRnjyDOaKFh4cREfGpzrS9+/ZjZWVF9MZoJkyciLt7DwDGjRvP8f/+V9suPz+fnTt3smFjNK1atQLgo3nz6dXTQ7kN+IczmKB5eXkzaPBgnWkWFhYAJCcn4eTUTmdeW0dHUlJSAEi5dAkTE1McHBy082vWrEnTpk2f8KilcgYTNJVKpVPcpJwQgrKyMoyNjXSm/7GKzp1788vLAzysjfRkGfw1mpGREU2aNOH8+fM60y8kXtD+3KRxYzQaDZcuXdJOu/+19GQZzBEtPz+f9PR0nWk2NjZYWloyfPgIPv10DfXr1adZ8+YcPHiAhITzOLW7ezqtbWuLh0dP5n30EUGzZmFpacm6f3+OianBbL7BM5g9HRW1nqio9TrTpk2bjo+vL0PfeIOi4iIWLlxAXt4NevXqyYgRXpyL//8Cw+9/8AGfLF3KJP+JGBkZMX7CBK5dy1V4K/7B9P0WvmOH9lX2jX5V9lVeUafcihXLxexZQdrXd+7ceWAZn5FvitjYrVU2BunPGcwR7VG2bNnMrm93ERgYSIOGDYmPj2fH9u3MmDlT22ZW0EwsLC3x8fHFysqKH/bsISkpCVdX12oc+T/HUxG0gQNfIyMjg+DguVy9ehV7e3smTJhIv36vattMD3yHlaGhTPKfSEFBAQ4tW7JiRSgNGlSs/Kb0mPQ9BMobH6XK0PuINvXtaUydOqXKbuWW/hlk2SpJEQb/ga1kGGTQJEXIoEmKkEGTFCGDJilCBk1ShAyapAgZNEkRMmiSImQ1IUkZ+n45Kr9UlypDVhOSFCGv0SRFGMSNj/dXE1KpVPTx9OTtt6dRo0aNahyZVFEGETTQrSZ0+fJlFi5YgLm5OVOmTK3mkUkVYTCnzvJqQvXr18fFxYWJ/hPZv29fdQ9LqiCDOaLdz8TEVOe0mZaWxupVq/jvf3/mzp07dO3ajaBZs7CysgLgzp07hIeHsfObbygsLKRz587MDX4flUoFwLVr11iyeBHHjh3D1NSUXr17M316IObm5gDMnPEuzZo357fk3zh69Ai1aqmYPGWyznMJ0p8zmCPaH6WkpLB2bQT9+w8A7pZFCJw+HYD1UV/wxYaNXL78P9aEh2mXCVn2CYcPH2bJ0qV8GbOZmhYWTJw4ASEEpaWlBLw1CSMjY6K+2EBY+BqSk5KZM+c9nfVu3bKFfq/2Y9++/YwZO5aPPvyQrKws5TbckOn7eUh1PNc5erSfcHHuJF526yzcOruKjh3ai7femiSKCgu1bQoKCoRGo9G+3rJ5s3jT20sIIUR+fr5w7vSSuHDhgnZ+SUmJiI7eKIqKisSPP/5HePRwF7du3dLOz8rKEi927CBSU1KEEELMePcdMWfOezrj6v9qP7F37169t/ufyGBOnSO8vBgyZChw97O8laGhTJo0icj16zE2NsbYyIjvv/+O+HPnuHzlCufj41Gr1QD89lsyFhYWtGzZUtufubk53t5vAnDx4kVatW6tcypWq9XUq1ePCxcv0PhecZlGjRrpjMnGxoaS4uInudlPDYMJWi2bWtpfdKNGjQhduZLevXoSHx9P82bNGOkzkrpqNR49e9GrV29SUlLYunUL8P8Vh/6UACOM/ny+9NgM8hoN7tY3q2FmRnFREQkJCVzNymJ1WDhDhw7lpU6dyMvL07Zt3rwFJSUlJCQkaKeVlJSweXMMxcXFtGzVksTEBIqLirTz09LSyMjIoFXLVopu19PKYIJWXk0oPT2dxMQEFi5cgBHQ7vnnadioIRqNhu927SIjI4N9+/axZctm7bLW1tYMGjSID94PJi7uNKmpqSyYP4+vYmOpWbMmbm4vU6dOHYLfDyYlJYXExARmzwqie3d37WlTejwGc+r8YzUhC0tLHNs6Er5mDRYWFlhYWLD0k2Us+2QpixcvouOLL+Lj48u33+7ULj9jZhBhYauZMWMGRYWFvNSpE59+GoGRkRGmpqaEha9hyeJF+Pr68IypKb169WJ64DvVtLVPH70fIH6xYwdO/VI1RYarsi/p781gTp2SYZNBkxShd9BUKhXn4+Mfe8Xn4+O1X/9ITz9ZTUhShKwmJClCXqNJipBBkxQhgyYpQgZNUoQMmqQIGTRJETJokiJk0CRFyKBJipDVhCRl6Ps0i6wmJFWGrCYkKUJeo0mKMJhnBr7ctImtsVtJT0tDrVYz8LXXGDNmLMbG8m/FEBhE0NavjyR640amBwbSunUbfv89lZBly7iRd4N33n23uocnVYBBBO3rHTsIDHyHvv36AdCsWTMsLa1Y9+9/V/PIpIoyiKCZmppyNfuqzjRnZ2ecnZ21r3u4d2ducDAbN2wgISGBxo0b8/a0aXTu7KZts33bNjZtiubKlTQaPdeIiRP98fDwAO5WC2rSpCkJCec5efIUTZs2YeHH/+Kbb75mx/btmJqaMnbceEaMGKHEJj999H2bWh1FXnZ+841wce4kFi5YIE4cP65TzKWce/du4vXXBorTp38RN2/eFHv27BYvu3UWyUlJQggh9u3bJ7p1fUUcOLBfZGdnix07tgtXF2eRnZ0thLhbxKVXTw/x87Fj4saNG+KdwEDR9ZUu4rO1a0VRUZE4cGC/cO70krhy5XKVbf8/iUFcSfcfMIBPIyLIzc1lypQp9O7Vk9WrV3Hz5k2ddgMGDKR9+w6YmZnRu3cfPDw82HKv/oaHhwfbd3yNu3sP6tSpw2uvvY6lpSUJCee1y7/yyiu4uLrefbJ98GBu3brFmLFjsbCwwN29B/b29iQlJSu67U8Lgzh1ArRv34H27TtQUlLCfw4eJDw8jN9Tf2fpJ59o2zi0dNBZpk2btvyw9wft68zMTDZvjiElJYXUlFSuX7/OrVsa7Xx13bran01NTTEzM9N5V2tmZsatW7eexOY99QziiPZHNWvWpG+/fqxctZoDB/aTm5urnafR3NZpq9FotFWCtm37ikn+EyktLaV37z78a9EiGjZsqOjY/8n+9kHLzs6me7euXLx4UWd6SUkJxsbGOjXN7n/e9OzZs7RwaAHA7u+/Z9QoPyZPnoKHhwcNGzYkOzv7yW+ABBjAqdPOzo7nX3iBoJkzeCsggIYNG/FbcjKrV6/C07OvtkYtwJ49u2nZqhVOTk4cPHiAI0cOszF6EwDPNW7M0aNH6dq1K8YmJny6JhwhnzRUzN8+aACLFi1mTXg4IcuWkZubi52dHQMGDmT8+Ak67SZPmcpXsVv54P1gGjduwvLlK2jevDkAgdMDWbBgPr6+PqhUKsaOHUdiYmJ1bM4/k75vU6vj442KcO/eTZw8caLK+pOq1t/+Gk16OsigSYrQ+xqtvJrQ496TVtXVhA4c/E+V9SVVPVlNSFKErCYkKUJeo0mKkEGTFCGDJilCBk1ShAyapAgZNEkR/wej4dE2Y0zQGgAAAABJRU5ErkJggg==)"></div>Form / Checklist</a><a class="thumbnail" href="/wave/docs/examples/picker"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Picker</a><a class="thumbnail" href="/wave/docs/examples/picker-selection"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Picker / Selection</a><a class="thumbnail" href="/wave/docs/examples/dropdown"><div style="background-image:url(/wave/assets/images/dropdown-aa5530f33720d6851ade03079d16f40a.png)"></div>Form / Dropdown</a><a class="thumbnail" href="/wave/docs/examples/choice-group"><div style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAACvCAYAAAAsY/rLAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjEwOjIxIFBNIFBEVEWmGycAABk1SURBVHic7Z15WBPX+se/QSQCRhAMhMvaKwhKJawiYEFabFUEqtgKUpXFBaytvRX119rF9ra31Xul1VYRWwVr3draKmitQC2i1o0dQVwRFA0EkcUggYTz+0NJDUlIJgSr88znefI8yZn3nPedfGfOzJyZdw6LEELAQBv0/u4AGHQLIyjNYASlGYygNIMRlGYwgtIMRlCawQhKMxhBaQYjKM1gBKUZAyLo/v37UV5ePhBNM6iBsqBenh5ynxeeD8bHH32EtrY2AMC1a9fw748/wqef/Fuj9nJzc+Hl6YGM9HSqoTw+Ht6/OBw1F1d/yfybg+kbfW0qcTgcvPjiS5B2S1Fx/jwOHNiPmpoafLt1K5555hmsWLkSTk6jdB3r30b+2ythNtoF+kaGELe0Iic+EaPnxsBm4nN/d2gKaCWombk53l21CgDQ2dmJuXNeQ0lJMSorKuD67LOYNStKp0H+3ThGvoziL7/GnYoLqD9XBMfIl2E22vnvDksp/T6GGhgYICBgAgCguroazc3N8PL0wJLXX5fZCAQCLE9OxsSgQDz33ASsXLEc9fX1Sturra1FcPBETJoUAoFAoNTmp59+wowZ0+E33hczpr+Mn378Ubaspwv/fscOLE9ORoC/H8KmhSI3J0eujZ9/3ocZ01+Gv994RM16Fb8dPqxyHTvuNqOzpRUsPT2AEIib7kJy/77G/9HjRCcnRc0tzQCAIYaGCsvaRSLMT4hHXt4fCA5+Hi9OmoSjR4/ijTeWoLu7W862ra0Nb721FOKODnz5xZfg8XgK7e3duwef/edTGAwejLnz5mHIkCH47LP/YNeunXJ2W7dthd4gPYSFh6OhoQHvv/8e7ty5AwD48Ycf8Oknn8DExASxsXFgs4dg1ap3cfDgQaXr11BYjGcXxIPn64Nx7/8fWPqD0F7foNV/NdBo1eX20N3djaLCQhz+9Vfo6+vD08NDwebQoUO4ffs24hMS8PrrSwAAVlb/wO+/56KmpkZmJ5FKsGJ5MmpravD5mrVwffZZpf62bd0KI2NjbNyUCnNzc8yaFYXpL0cgfds2REVFy2zH+fhgzZq1AIBBenrYs2cPiouL8fzzz2PLN1vA5XKx4auvwWaz8dprryE8PAx79+zGtGnTFPyOX/3g8FKbexSDhxojMGVNf/62AUUrQWuuX4eX51/isVgsJCcvh5m5OZqbm+Vsqy5WAQB8x/nKyuYvWID5CxYAAK5evQoASN20CQBgZmaGkJAQpX4bGxvR2NgILy8vmJuby+zHjBmDs2fPynXjzs4usu929vYAgPvt7WhsbETTwz11YlCgXPsSiaTP9X5hy9d9Ln8S0HoPjZ49GyywYDrcFBMmPAdnZxUnCRQfWWptbcXFqio4u7goLFP1+FNPMYvFkpXp6Sk/mvS0YWVlhc8+l9/TVNV5mtBqDewdHJCcvBzLkpORkDBftZgAXFxGAwCOHz8uK/tmyxZER81CdXW1rGzmK69gU+pmSKVSvPfeKojFYoW2uFwuzM3NceHCBTQ2NgIAmu7cQWVlBczMzGBhYaE2di6Xi+HDh4MQAicnJ4wdOxaurq4oKipEfb3yk7CniQHfJENDQ8Hj8bBr1058+MH7+PCD97FlSxq6urpg/7ArBAArnhV8fX0xKyoK165dw4b1XyoGq6eH+PgEtLe3Y3FSIjasX4+kpCSIRCLExsVptIfp6elh3rxYCAQCJMTHIzV1E15fnIQN69fjYtVFna7738GAC2pkbIxvvt2KwKAg5OXl4egffyAwKAhfb9ykVIA331wKBwcH7N27F6dO/amwPCo6Gu+8uwoSiQS7d+9CV1cn3nnnXcTEvKZxTHPmzsWKlStx/347tmdkoKamFosWJWJRYmK/1vVJgMU8l0svnv6zAAY5GEFpBiMozWAEpRmMoDSDEZRmMILSDEZQmsEISjMYQWkGIyjNYASlGYygNIMRlGYwgtIMRlCawQhKMxhBaUa/HrTuISsrE/n5+aisqIBQKATw4Om6Ma6uCAwMRFhYuC7cMGhAv54pysrKxObUVDi7uCAkZBL4fL4sfUEgEKC0tBS5uTm4WFWFxKQkRtjHgNaCrl27BmWlpXj77WXw9PLq07aosBApKevgxudjxYqVWgXKoBlaHUPXrl0DwW0Btn+3Q62YAODp5YXt3+2A4LYAa9dqnhciEonwRUoKpk6ZggB/P8yeHY1Dh5QnFFFl6dI3sWH9ep201RdNTU3w8fbCeiXPGQ8IhCKZmQdIzOxoIpFIqFYlEomExMyOJpmZB9Ta3r9/n0TNepVER80i2dlHSElJCdmekUEmTAggmzZtpOS3urqaeHq4y8X887595MSJE5TXgSo/7N1Lxvl4k9CpU0h3d/eA+6Ms6NQpk0lhQYHWDgsLCsjUKZPV2n311QYyM3IGaW9vlysvKS4m43y8yeXLlzT2qUzQx8X8hHiyadNG4jfel5SVlQ24P0pdblZWJpxdXDTqZlXh6eUFZxcXZGWpflcBIQS/HjqEuPh4GPbKOeW7u2O8nx8OHToEALh65QomBPjj3LmzCJsWCn+/8Vi8OAk3b94EAOT98QciZ0wHAIzz8cZ77z1IDVyxPBlpaZtl7ZaXlyM+Pg7+fuMRNi0Uu3ftkvP7fPBEHDx4EK/FzIbfeF/Mjo7CxaqqPtdVKBSipKQE4eHh8PcPQPaRIxr+S9pDSdD8/HyEhEzqt9OQkEnIz89Xuby5uRn19fXw9FS+4Xh4eKDqwgXZb7FYjPT0dKRuTkNO7u9wcXbB4qREiMViBAYFYdfuPQCA4ydOYvXqjxTaq6u7icVJiXhuwnP48aef8M67q5CRka4g6vc7vsP7H3yI7JxcOI0ahXfffafP9czNycGoUc6wtrZByKRJyM3NUZlBpysoCVpZUQE+n99vp3w+H5UVFSqXt7a2AgCGcThKl5sMM0HLQxvgQSLwokWJsLGxgbGxMd548010d3cjP/8Y9PT0wGazAQBsNhv6+oqX3j/s/QHe3j6Ii4+HtbUN/P398a9/vY3t2zPkBIiKioazszM4HA4SE5Nw/fp1hXzYR8nOPiLLdQ0MDERzcwtKSor7+Gf6DyVBhUKh0jR5qvB4PNkAhDKGDRsGAGh9+Kqc3rS2tcLkoU0PTo6Osu8sFgsuLqNx+dJljeK5dOki3Nzc5Mr47u4QCoW429QkK7O1tZV9NzExAQC0t7crbVMgEKC8vBwvPBTUyMgI/gH+yD6SrVFM2qKTkSJdY2pqCktLSxQXFWHK1KkKy4uLiuEyerRcWVev7OvOrk65BOC+IAQa22pKTnY2CCGY9eorf8XU2QkAWL5ixYAlF1NqlcvlqnwzCRUEAgG4XK7K5SwWC1NDQ5Gevg0dHR1yy8rKynDq1J8IDQ2VK694pAuXSCSounABjk4P9toeqVQdv5ydnVFQUCBXVnDu3IPkYDMzTVdLjuzsIwgPj8DuPXtln+92fA8AKCwsUFNbeygJOsbVFaWlpf12WlpaijGurn3aJCTMh56eHuYnxCM3JwdlZWX4/vsdeGPJ64iNjYOjo5Oc/bfffoOSkmLU1NTg449Ww9DQEEFBEwEAw4cPh56eHg4ePKj0dTqvznoVJSXF2JKWhrq6Ovz5559I+SIFsbFxWu25dXU3UVlZidi4ODg4OMg+rq6umDhx4oB2u5QEDQwMRG5ujnpDNeTm5iAwMLBPG0NDQ3y7dRvcPTyQkrIOiYsW4tdDh7AsORlJixcr2C9d+hY+/OADREfNQmNjIzalpsLAwAAAMMzEBKtWvYeNG7/Gl198oVDX2toGm9PScPr0KbwyMxKf/edTLFywEFHR0Qq2mpB9JBuOjk5yGeo9hIRMwtGjv0MqlWrVtlqoXrg+roEFTbly+TLx9HDXWXtPO5SPzIlJSUhJWafVFiaVSh/sbUlJlOsyaAZlQcPCwuHG52N5cjIlUaVSKZYnJ8ONz2duow0gWp07r1ixEjwrHubNnYOiwkK19kWFhZg3dw54Vjyd3z4b6eiIwqKBvVh/mmBucNMMnbwFhXkE5cmBea0NzWCe+qMZjKA0gxGUZjCC0gxGUJrBCEozGEFpBiMozWAEpRmMoDSDEZRmMILSDEZQmqETQTMyMhAZGQl7e3vo6+tDX18f9vb2iIyMREZGhi5cMGhIvwTNyMiAvb099u/fj+nTpyMvLw8dHR3o6OhAXl4epk+fjv3798Pe3p4R9nGh7dNlS5YsIV5eXiQvL0+tbV5eHvHy8iJLlizR1h2Dhmh1g/uNN95AbW0t9u3bpzT5RxkSiQSRkZGws7PDV199pVEdkUiELWlpyMnJQUtLM+wdHBATE4PQUMUZBKmydOmbGPnPkXhz6dJ+t6WM+Pg4lJaUyH4PHz4cL02ejKVL35I9LzwgUN0C0tPTiZeXF+nq6qK89XR1dREvLy+Snp6u1vZpz+COi4sl67/8ktTV1ZG6ujpy+vRpEjZtGtmwYf2A+SREiwxuOzs7pd3szp07SWBgIGGz2YTNZpPAwECyc+dOBbu8vDxiZ2en1s/TnsEdFxdL0rdtkys7eDCLRISHDahfSidFGRkZ8PDwQFBQkFx5cnIyYmJikJ+fD7FYDLFYjPz8fMTExCA5OVnONigoCB4eHn2eJBGaZHD3ZtAg/YHtbkHxLDcrKwszZ86UK9u1axfWrVunss66deuwq9efM3PmTGRlZamsQ5cM7keprq7Gli1pmDYtTOM62kBJ0IKCAgQEBMiVpaWlqa3X2yYgIEAhfe9R6JLBvXlzKiYE+CPA3w8zI2fAyspKYYfQNZQEraurk8tiBoAzZ86ordfbxtbWFnV1dSrt6ZDBDTyYGnP3nr3Ys/cHpGdsh7hDjKSkJIXJ5HXJEzn092gGtzKehgxuADA1MYWtrS1sbW3h5uaG9Rs24MqVy3LJybqGkqDW1ta4ceOGXJmvr68Ka9U2N27cgLW1tUp7OmRwK8PQ0BAGbDbaRSKdtdkbSoJ6e3vj5MmTcmWLFi1SW6+3zcmTJ+Ht7d1nnac5g7uH1tZW3Lp1C7du3UJV1QV8+uknYAEY26t71ylUrnHS09NJRESEQvmyZcsIAKWfZcuWKdhHRERoNLjQ1tZG/vvftWTK5JeI33hfEh01ixw4sF/Opifht6SkhISHTSN+431JUuIicvPmDTm7X37+mYSEvED+b+VKQgghy5OXkc2bU2XLy8vLSFzsPOI33pdMC51KdvW6hg6eGEQKzp2T/RaJRMTTw53U1dUpjT0uLpZ4erjLPhMmBJBFCxeSCxcq1a53f3hiBxY0hcnglueJHfrTFEZQeSif5cbGxsLPzw+RkZGQ9Dqz7IuewXk/Pz/ExsZSdcugKdpuCcztsycTrQUl5EH3a2dnRyIiIsiOHTvItWvXSFdXF+nq6iLXrl0jO3bsIBEREcTOzk6n3SyDanSS8JuRkYGsrCwUFBTIRoCsra3h7e2NsLAwpot9jDAZ3DTjiRz6Y9AeRlCawQhKMxhBaQYjKM1gBKUZjKA0gxGUZjCC0gxGUJrBCEozGEFpBiMozdDJzEpCYQOam5pwT3QPXQ9nDxpsYIChxkNhamYGLtdCF24YNKBft8+EwgbcvFELY2NjmJmPAIfDgYHBg7SDzk4x2tra0HSnESKRCDa2doywjwGtBb1efQ332tpg5/CMLHVBFa2trai9Xo2hHA4cnvmnVoEyaIZWgl6vvobOTjGcRrlQSDcguHypCgYGbI1F7erqQmlJMWquV0MsFmPYMBOMcXXFP0c6qq+shqO5OTA1NYWnt0+/21JF7/hNTEwxeswYncSvCsrHUKGwAffa2uA61o3SU+UsFgtOo1xQUV4GobBBbfcrkUjw2+FDYAHw8hkHYyNjNDTU48zpU2htbYW7h6fGvltaWnDgl32YMzcWrIezAtra2cHI2FjjNqjSO34jIyM0NDTg7JnTEIlEGOvW/3lYlUFZ0Js3ajHScZRWKQIsFgt2Ds/g6pVLagUtLytBd3c3QqeFy1IAuRYW4FpYIPu3w7B3eAbDhw+nHEMPTqOcta6rCcrit7CwBHcEF9lHDsNplDOGDBmic7+DVq9evVpTY6GwAVKpBP+wttHaIZvNRltrC7oJgXEfe8jJE8fh7u4J8xEj5MqNjYeiUSjE/fvt+Mc/rNF89y5+3vcjuFwLZB85jKLCAtTX18PCwhJsNhs3amvw2+EH2d5lpSVoa22Fnb0Djv1xFC0tzeDxrGTrdvxYHs6cPoUrly8BgNxGt3f3ThgaGeHUyRM4d/Y0amuuYwSXC0NDI0rxDx06FAYGBjAyMhoQQSldhzY3NcHMfIR6QzWYmY9A8yN5l73p6OhAu0gES56l0uUWlpZounNH9lsqlaK8vAyTXpqCV6Nmw9zMDDlHfoNUKoWNrR2mhb8MAJgdMwf+E55TaK+trQ052UdgbWOD8JdnwNfPH+fLy3GhUj7tr/L8efgFTMArs6Ix3Mwcx4/laRX/6DGuMDExVbn+/YGSoPdE98BRkVVNBQ6Hg3uieyqXd3aKAUB2CdQbNpsNsVgs+00Igbu7BzgcDgYPHgxPbx8QENy4UQsWi4VBgwYBAAYNGqR0Zt2LVRfA41lhrBsfHA4H1tY28PbxQcX5cjk7l9FjYGZmBgMDA7i7e6ClpQXiXumOmsQ/kFAStKuzUydBGhiwZQMQqpYDf/0xvRF3dsrS7Hsw7XU8NTczl8u+7ou7TU0KMw5bWFiivb0dHffvy8o4w/7amHv890401iT+geSJHPobMmQIjIyNleZyAkBDvQBm5uZyZb3T3KXdUs0vqUB0msGtLv4LlRVoaVH9bob+QEnQwQYGOtnqOjvFGKzm9S4jR47E+bIyhYQoobABt+rqFK7lGhuFsu/d3d1ounNHttfKMrhV+DIzM4dAcFuuTCC4/eDEpddrdTRFVfz19QIUnDsL9gB1x5QEHWo8FG0qXmRBhba2Ngw1HtqnzVg3d7BYLBw5/CtqrldDKGxAZcV5/J6TjWfHuilcspSXlqKhvh6trS348+QJ6Ovrw9bWDgDAHjIELBYL165eUZoO7+wyGg319SgtKca9e22oq7uJgnNn4TpW+0xrVfH/8fvv4Lt7aL2hqIPSdaipmRma7jRixAjVM9xrQtOdRgw3M+/TRl9fHy9NmYrSkmKcO3cW4o4OmJiYwNvHF45OTgr2Xt4+OHH8GNrb22FhaYmQFyfLTobYbDbG+wWgqKgQt27VITAoWK4uh8PBiy9NwblzZ3C+vAyGhoZw47tj9OgxWq9j7/g7xWIMGzYMPuPGYaSjYvy6gvLQX3FRAUY6jlI7fquK1tZWXL1yCR6efb9jQVOa795F5oFfMDc2XiftPe1QPimysbVD7fVqlW8U6QtCCGqvV8PmYVfIoHsoC8rlWmAoh4PLl6ooidozOD+Uw2Fuow0gzO0zmsHc4KYZOkn4ZR5BeXJgMrhpxhM59MegPYygNIMRlGYwgtIMRlCawQhKMxhBaQYjKM1gBKUZjKA0gxGUZjCC0gxGUJqhkwzurKxM5Ofno7KiAkLhg8cpuVwuxri6IjAwEGFh4bpww6AB/bp9lpWVic2pqXB2cUFIyCTw+XzweDwAgEAgQGlpKXJzc3CxqgqJSUmMsI8BrQVdu3YNykpL8fbby+DppXxayB6KCguRkrIObnw+VqxYqVWgDJqhlaBr166B4LYA//3f/2TPvqpDKpVieXIyeFY8jUWlyxzcenp6sLS0xMTgYMyfvwCmpgOTeQaA+jQfmZkHSMzsaK2mP5ZIJCRmdjTJzDyg1pZOc3DX1NSQE8ePkwXzE0h42DRy9+7dAfNLWdCpUyaTwoICrR0WFhSQqVMmq7Wj4xzcEomEJMTHk48//mjA/FKcsjkTzi4uao+ZfeHp5QVnFxdkZWX21WvQdA7uQYhPSEBOdja6uroo1dUUSoLm5+cjJGRSv52GhExCfn6+yuV0nIO7B3c+HyKRCLdv31ZvrAWUBK2sqACf3/+3d/D5fFT2McstXebgVoaRsTH09PTQ9kj8uoSSoEKhUHad2R94PJ5sAEIZdJmDWxkikQjd3d0Y9rC+rnkih/7oMge3MkpKSsDhcGBlZTUg7VMSlMvlQiAQ9NupQCBQeKfBo9B1Dm6JRIJvv9mCyVOmKO36dQElQce4uqK0tLTfTktLSzHG1bVPGzrNwV1z/TqOHTuGhQsXoKWlBYsXv651m+qgtJkEBgYiNzcHU6dO7ZfT3NwcBAcH92ljaGiIb7duw+bNqUhJWYfm5mY4ODhgWXIywsMjFOyXLn0LH7z/HoRCIdzd3bEpNRUGD9/jMMzEBKtWvYeNG7/GmdOn8dnnn8vVtba2wea0NKSsW4eMjHSYm5tj4YKFiIqO7td6bt+ege3bM6Cvrw9LSx6Cg4ORMH++1snSGkH1wvVxDSxoCjNlszyUT4oSk5KQkrIOUqmU8sYjlUqRkrIOiUlJlOsyaAZlQcPCwuHG52N5cjIlUXsG5934fOY22gCi1WXLihUrwbPiYd7cOSgqLFRrX1RYiHlz51C606IpIx0dUVhUrNM2n2aYG9w0QycJv8wjKE8OTAY3zXgih/4YtIcRlGYwgtIMRlCawQhKMxhBaQYjKM1gBKUZjKA04/8B7ZFFM54LdpQAAAAASUVORK5CYII=)"></div>Form / Choice Group</a><a class="thumbnail" href="/wave/docs/examples/combobox"><div style="background-image:url(/wave/assets/images/combobox-99fc7d69ef37ddf7a125cdeaa730e2ce.png)"></div>Form / Combobox</a><a class="thumbnail" href="/wave/docs/examples/toggle"><div style="background-image:url(/wave/assets/images/toggle-5e565e1d5a735ee4a481835a4e53ee43.png)"></div>Form / Toggle</a><a class="thumbnail" href="/wave/docs/examples/spinbox"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Spinbox</a><a class="thumbnail" href="/wave/docs/examples/slider"><div style="background-image:url(/wave/assets/images/slider-06551b8ad6f45a0aa69c946c5d8332d1.png)"></div>Form / Slider</a><a class="thumbnail" href="/wave/docs/examples/range-slider"><div style="background-image:url(/wave/assets/images/range-slider-7394a0b0ebb5aace4e83bb302adc6fc3.png)"></div>Form / Range Slider</a><a class="thumbnail" href="/wave/docs/examples/date-picker"><div style="background-image:url(/wave/assets/images/date-picker-a98cee22ba2dc41a9e12a103dabc10e9.png)"></div>Form / Date Picker</a><a class="thumbnail" href="/wave/docs/examples/date-picker-trigger"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Date Picker / Trigger</a><a class="thumbnail" href="/wave/docs/examples/color-picker"><div style="background-image:url(/wave/assets/images/color-picker-d5462fd8a2dcc2b3d980e2402a61d930.png)"></div>Form / Color Picker</a><a class="thumbnail" href="/wave/docs/examples/swatch-picker"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Swatch Picker</a><a class="thumbnail" href="/wave/docs/examples/tabs"><div style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPcAAADVCAYAAACL6GZuAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjE0OjQwIFBNIFBEVErPEbEAAB2fSURBVHic7d17XM93/8fxRydaJUUnaSvLcdh1YaZyWMTI+ZxjKDY0Z8rQWDbHTWFMmBzGiiZyVq5dzGk2w+UQu5j9mHQyLSlFPr8/unzneyVK3w7fz/W6327dbvp839/35/353Hp+P+/PwfdloCiKghBCdQzLewBCiNIh4RZCpSTcQqiUhFsIlZJwC6FSEm4hVErCLYRKSbiFUCkJtxAqJeEWQqX+p8KdmZnJ119vIjk5ubyHAsC+vXuJ3rat0Nf9/EaU4WiE2hhU5GfLmzVtAsCkSZMZMnRogdf9Rgzn3LlzeHp68vmS0Bf2t23rVhYsmM+AgQOZNi2Q/v36cvPmTU6c/EHnYy/M6Z9+YsKE8VhZWXE/Kwvl8WMsLCye2TY5ORl7e3vy8vJ49dVXWb1mrdbreXl5vN38rWe+d9fuPTg6Oup8/EJ/GOu6w99+++2l3ufi4lLoa7GxOwuE+8aNG5w7d65Y6+jYqRP37t3Du3Pnlxmizni1b8/HH4dw+PBhsrOy6OTt/cx2H06fzvwFC0hMTGTO7I8K7e+zzz+nXr36Wsvs7e11OubCREdHs3fvHtatiyiT9Ymi03m4+/TuRYMGDbCysi5S+/T0uyQkJHD65zOFtrl27RoXL16kYcOGmmWxsTuLPTZLS0v8/P2L/T5d++HkST4ICND8vnv37kLbfhAQQE7OAwwMDAptY2NjK0fpZ8i6f58VK74gLi6Oe/fuUev11/Hz86d9+/blPbQyofNwm5mZkZubi7OLM0OH+uLg4PDMdklJSWzatJGUU8mYmZkV2p+trS137twhNnanJtyPHz9mz+7d2NvbFzh/3hUby+bNX3Pjxg1sbW3p178/Q4bkH/Xj4+MJCpzGuHHjGT6i/M5nGzZqxLhx44vcPiUlhbVrVhd7PQcOHODzzxaz/8BBDA3zL6/cvn2bbl27sGNnLE5OTly8cIHPl3zOlcuXsbW1ZeCgQfj4DADg2tWrDBvmy8chcwld8jl37vxBixYtCAkJwbJqVT77bDHfbNkC5J9CBQd/RM9evfjh5EkWLVpIYmIiTk5OTJ4yBXd3j2KPv6SCggL5888/+TgkBDs7e3766UeCZ83C2NgYT0/PMh9PWdP5BbWqVasSGbWVxo0aM23qFGbP/ojr169rXr9+/TqzZ3/EtKlTaNyoMZFRW6latWqh/dnbO9D87bc5sH8/ubm5AJw8eZKUlBS6de+u1fbQoUPMmTMbc3MLxowZi42NLaFLlrBnT+FHxvJgYWGBi4uL5ueVV17hy5UrcHFxISMjg+3ffouLiwtzZn+Ei4sLTk5OL7Wed955h+zsbM6ePatZdig+noYNG+Hk5MTt27cZPWY0rVq2Ylv0twQGTWfN6tVs3RqlaZ+Tk0N8XBxfrVvHt9u3k5KSzIoVXwD510KmTJ1KgwYNOHHyB7r36MHt27cZP34co957nz179zF8xAimBwWRmZlZsp1WTKmpqRw/fpzPPl+Cu7sHrq6u+PgMYPSY0Zw7d/bFHaiAzo/cAIaGhnTy9qaTtzfHjh1j/vx5VKlSBYB79+4xbNhwWrZsWeT+unXtxg8nT/Ldd9/RsWNHYnfuxMTEhI4dO7F2zRpNu/r167Fo8We0bNkSU1NTmjZrhu/QIZz64Qe6dOmq8+3UFTs7O0LmfgJAo0aNqF8///x5VXjRjtajRvprTdvr1K3Lxo2bMDU15R1PT+Lj4mjatCkAcXFxeP/nHD8qKpJ2bdtqTlUcHR2ZNHkyWzZvoX9/HyB/ljQ2IAB7+/wZ2KBBg9m4cQMARkZGVKpUmUqVK1OpUiUgf5ZhYmJCq1atsLCwoEuXrnh5tcfU1LRE+6i4jI3z/7RTU1Kws7PTLB82bLjm31FRkRw/fpzmzZvz1dq1KIpC+w4dmDp1mma8Dx48YHV4OPv37yM9PZ3Gb75J4LRAXGvXBqBdW0/Gj5/Ali2buXnzdzxaejBtWiCLFy3kxIkTODg4MHNWMM2aNSu7jf+PUgn301q2bEnLli05f/48AI0bNy52H23btcPM3JzY2J24u7tz+PA/adOmTYEjvqNjTa5du0ZYWCg3btzgyuXLAOTmPiz5hpSCfXv3cv/+fVq3aUNYaCjzFyzg4sWLxMfHMWnSZMaOHVOkC1Uhc+dSt249ze9Pggbg3cmbkJCPmRYYSEpKMgkJlwgNzb+zcOXyZU6dOsU///lPTfu8vDwqV66s1f+rr76q+XdVq6pkZWUVOpbGjRvTsFEjevXsQevWbXBzd8PTs+0Lt0HXrK2t6dGjJ+PGfcDAgYN4x9OTunXrFmh37uxZ7O3s2Rm7i+zsLEJCQgj5eA7z5i8AYNnSpfz882kWLV6MnZ09X61dw4wZM4jaulXTR0xMDJ99vgQjI0MCxo5lyOBBhMz9hE8+ncea1auZM/sjdu3eU2bb/kSph/uJlwn1E6ampnRo34Fdu2LZsH49ubm5BabkAEuXhrFp40b+/vcmuLu709azLQsWzC/JsEtVx06dADAwMCBk7lwAGjZsSIMGDQBYtSq8SP3UqOFY6N0GN3d3Hj16xLlzZ7l48SJvNW9OterVNa/7DhtGv379td7z5Pz8ZRgaGrJqVThnz57h5ImTfLX2K8JXrWLDxk2F3vIrLcEffUSzt5rxbXQ04eGrcHSsif9If3r06Klpk5eXx9Rp06hUqRKWlpbMmDGTHt27MWXqNKpXr86UqVPJysrSzDx9BgwkOjqarKwszbUinwE+vPbaawC0a+dFQsIlPDw8/vPaADZsWE9mZmaZb7/ePMTStVs3Hj9+zPr1EVSrVg0Pj4LT+riDB6lRowZfrVvHyFGjtI44FVF8fBw7d+wgNTWVuSEfA5Bw6RJffrkSgPHjxpV4HUZGRrTv0IG4uDji4+Lw7vTXbbc6deqSkpKCo6Oj5icnJ4ecnJwi929gADz1qERWVha//fYbTZo0ZczYsWz55hv+/PNPfvih7J4l+GtsBnTp0pV1EevZt/8Avfv0ZtHChURGRmraODs7a810atasSZUqVbh69aqmj7NnzxAauoRJEycy7oP8uxxPrv8A2Nv9ddvR2NhY6wLxk1lQcfapruj8yH3nzh9at3mK+p4XadKkCTVrOnHr1u94e3fGyMioQBsbG1sSEi6xfPkyqlpW5dtvo4s1jrJWt249Hj58iIWFBe++2xEAewcHWrZsBcCq8KIdudPSUklMTNRaZmtri4mJCQDe3t5MmjiRnJwc2nl5adr09/Fh4AAf1q+PoEOHDtxOvE1ISAhdunbh/fdHF2ndNja2XL9+ndOnT1O3bl3Onj3DR8HBLFiwkFqvv87JkyfIyMjAxdm5SP2VFltbW4YPH4GFuQWRkd8wYED+HYHch9qnbIqi8OjRI801jOBZM7l06RK9evXm7eZvU9WqKsN8fct8/C9D5+H+5qlPRV0yMDCgS9curA4Pp2u3bs9s8+m8eXw8ZzZbo6KoUaMG48aNJygosFTGowuGhoYYGhpiYGCgCaKhgYHmYlBRTZ0ypcCyTV9v5o033gDgb3/7OxYWFjRv3hxzc3NNGycnJ1atCic0NJQ1q1dTrVo1Onfugr//yCKvu3Xr1rzbsSMTJ05gwvgJ9O3XD/+RI5k7N4S0tDScnJyYN2++5gJUWYmLO8jyZcvZHhOjtT+zs7O1Lu7d+L//05oyX7t2lQcPHuDq6srjx485cOAA6yLW8+abbwLw888/l+l2lESFfvxUjZ5+/LSoCnv8VBQuMzOTPr17UadOXYYOHYq5hTk/nvqR1avDCZr+IT179iQqKpLwVato0qQJAR+MIzs7m/nzPsXZxYVPP50HQK+ePXBzc2fI0CHcufMHCxcs4PLlBA794zusrKxo19aTxYs/o9lb+Y8Br1yxgmvXrmoeh05PT8erXVsOxsVT/alrHWWhzC6oiXzN3nqLo8eOl/cwVM/CwoKv1kWwfNlSpk8P4sGDBzg7OzNjxkyti7G1a9fG3d2Dkf5+5OXl0b5DB6ZN+2u2F7Z0GcHBs+jbpy+1arng5+dfoWeDT5Mjt/ifFRUVyaH4eNXOiPTmarkQongk3EKolEzLhVApOXILoVISbiFUSsIthEpJuIVQKQm3ECol4RZCpSTcQqiUhFsIlZJwC6FSEm4hVEqn/+XzeV+crw/kSVyhJnLkFkKldHrkliOfEBWHHLmFUCkJtxAqJeEWQqUk3EKolIRbCJWScAuhUhJuIVRKwi2ESkm4hVApCbcQKiXhFkKlJNxCqJSEWwiVknALoVISbiFUSsIthEpJuIVQKQm3ECol4RZCpSTcQqiUhFsIlZJwC6FSEm4hVErCLYRKSbiFUCkJtxAqJeEWQqUk3EKolIRbCJWScP+X9RER7IiJKe9hCFFiEm4hVErCLYRKFTvcv/76K926dcPCwoJq1arh5+dHZmbmC98XHR1N3759X2qQT/z888/s2LHjhe369+9PixYttJalpaVhY2NTorGEhYVhaGiIsbExpqamNGjQgNDQUBRFKXZfRdWoUSMuXLhQoj6WLFlCenr6c9skJCRgYGDAvn37tJY/va8++OADvvjiixKNRZSdYoe7S5cueHh4kJiYyOXLl8nKymLixImlMbYCihLujIwMjh8/Tnp6OlevXtX5GPz8/Hj06BGZmZls2rSJyMhIpk+frvP16FJRwv3111/j5ubG5s2by2hUorQVK9zZ2dn8+9//ZsqUKVhaWmJnZ8eKFSvw8fHRtImJiaFevXpYW1vTp08fkpOTC/SjKApz587FwcEBBwcHAgMDefToUYHXrK2tmTZtGnl5eURFRTFq1Cg2bNiAg4MDeXl5zxzj9u3b6dSpEwMHDizVP1RjY2Peeustdu3aRXh4OHfu3AHg0qVLtGrViqpVq9KiRQt+/PFHzXu++eYb3njjDezs7OjTpw/3798H8j+QBg0ahLW1Na6urmzatOmZ63xeuyfrrVKlCn/72984c+YMAM2bN+fWrVvUqlWLhQsXPrNfRVGIjIwkIiKCuLg4zbiEfitWuF955RU6derEiBEjNFPF6tWr06FDByD/D2z06NFERkaSlpbG66+/jr+/f4F+1qxZw65duzh//jy//PILp06dIiwsTPPanj17+Ne//sXNmzc5f/48S5cuxcfHhzVr1jBs2DCSkpIwMjJ65hg3b96Mj48PPj4+ZXIUsrOzw93dnaNHj5Kbm0u3bt0YOXIk6enpBAUF0b17d7KyskhJSSEgIID9+/eTlJSEs7Mz3333HQCjR4/G0tKSpKQk9u7dS1BQkNaHwhOFtcvNzaVr16689957ZGRksGjRIry9vcnJyeHHH3+kZs2aXL9+naCgoGduw/Hjx3FwcKB+/fp4enqyc+fOUt1nomwUe1oeExODh4cHo0aNwsXFhVmzZpGVlQXkH5lGjx5NkyZNMDIyYu7cufzjH/8gOztbq49NmzaxcOFCbG1tsbS0JDg4mJj/3H7auHEjM2fOxM7ODgsLC6Kjo/H19S3S2G7fvs358+dp27YtDRo0wNTU9Jkh0TU7Ozv++OMPvv/+e5ycnBg+fDgGBgb07t2b2rVrc+zYMYyNjVEUhUuXLqEoCkuWLKFr165kZ2eza9cuwsLCqFy5MvXq1cPf37/A6cfz2h05cgRra2t8fX0xMDCgY8eO/PTTT4V+AP63zZs3079/f4Ay+1AUpc+4uG8wMTEhICCAgIAAbt++zcyZMxk5ciRbtmzh1q1bREREEB4e/tcKjI01U9Ynjh49Srt27bC3twfyp4V2dnYAJCYm8vrrr2vaWlhYYGFhUaSxzZo1i+TkZExMTDTLBg4cWCrn3k+7ffs21atX59atWxw5cgQHBwfNazk5OaSlpVGtWjW2bNnCvHnzGDp0KJ07d2bJkiXcv3+fzMxMXFxcNO959OiRJmxPpKamFtruv/cZgJOTU5HG/vDhQ7788ksArWsnqamp2NraFnUXiAqoWEfumzdv8vXXX2t+r1GjBiEhIcTFxWl+nz59OklJSZqfjIyMAn9oHh4emulpUlISycnJnD9/HgBHR0etMGZmZpKWllak8Z07d474+HgURUFRFH755RcyMzMLPT/XhcTERE6ePEmrVq2oUaMGbm5uWtt/9+5dBg4cCIC3tzdHjhzh2rVrZGdnM3fuXGxsbKhcuTK//vqr5j1paWmsXLlSaz3Pa/ff+wzg999/11zHeJ4DBw7QqlUrzT5TFIVBgwaxdetW3e0kUS6KFW5TU1PGjBnD2rVrycjI4MaNGwQGBvL2228DMGDAANatW8fp06dRFIXo6Gh69uxZoJ8hQ4YQHBxMSkoKubm5BAUFsXjxYgB8fX0JDg4mNTWVP//8k169erFt2zYAzM3NuXz5MhkZGQX6vHLlCjdv3sTT01OzrE6dOjg6OnLo0KHibGaR5ObmcuLECbp27cqECROoVq0abdq0ISkpiYiICM0UvEWLFty9e5ezZ8/SrFkz/vjjD8zMzLC0tMTQ0BAzMzN69OjB5MmTefDgAXfu3KF79+4cPnxYa33Pa9emTRvS09MJDw9HURT27NmDm5sbBgYGmv125swZHj58WGA7np6SPyFTc5VQiunw4cNK8+bNlcqVKyvW1tbKoEGDlJSUFM3r27dvV+rXr69YWloqbm5uyunTpxVFUZRt27Ypffr0URRFUR4/fqyEhIQoNWrUUKpVq6b07dtX08fjx4+V2bNnK3Z2doqlpaUyfvx45eHDh4qiKMq9e/eUzp07K2ZmZsq9e/e0xhUcHKyMHj26wHgXLFigDB06VElNTVWqV69eYCz/LWLdOiVm+/ZnvhYaGqoYGBgoRkZGiqmpqdKoUSNlxYoVWm0uXryotG7dWqlSpYpSp04dZfPmzZrX5syZozg4OCgODg5K7969lbS0NEVRFCU9PV0ZPHiwYmVlpTg6OiqBgYHKo0ePFEVRlIYNGyrnz59/YbsLFy4oHh4eipmZmdKgQQPl1KlTmvVGR0crdnZ2yocffqg11nv37ikWFhZKYmKi1vIHDx4oVlZWytWrV7X2VUBAgLJ8+fJn7htR8RgoSik+gaGH1kdEYGVlRc9evcp7KEKUiDx+KoRKSbiFUCmZlguhUnLkFkKlJNxCqJSEWwiVknALoVISbiFUSsIthEpJuIVQKQm3ECol4RZCpSTcQqhUsb6JJTY2lmVLw7h7926JVmptbc34CRPp3r17ifoRQhSuWM+Wt/dqx7Jly3mjYcMSrfTSxYuMHz+O+EP/KFE/QojCFWtafvfu3RIHG+CNhg1LfPQXQjyfnHMLoVIVPtx+fiNo1rRJgZ9dsbGlsr4NG9YzfFj+Vylfu3qVZk2bPLf9/v37eadNa2bNmlkq4xHiZRX7q43Lw7Bhw+nbr5/WMisrq1JZV+PGb2Js/OLdkpuby6efzOX4iRO89tprpTIWIUpCL8JtaWmJo6NjmayradOmNG3a9IXtkpOTuZueTlTUVlZ9+SVZ2VllMDohik4vwv08gdOm4uJSi4SES/z002lq1XLh03nziY3dyY6YGIyNjfEfOYoBAwZo3hOzfTtbtmzm999v8eprr/L++6Px8vICICoqkkPx8axes/a563V0dGTZsuWluGVClEyFP+cuih07YhgyZCgHDh7E0bEmw4f5Ym5mzp69+5gxcyahSz7n1q3fATh06BBLl4YxNiCAXbt3M3jwYGbNnFHkwgdPFLVUjxDlRS/CvXLlCtzdWmj9PF0TvHXr1rRwc8PS0pJevXuTk5ODn78/ZmZmtG3bDgcHB/797/yKHF5eXsTs2Enbtu2wsbGhR4+emJubk5Bwqbw2T4hSoRfT8oEDB9Grd2+tZWZmZpp/2/2n5hjk1yarXLkyhoZ/fW5VrlyZnJwcze9JSUlERUVy/fp1frv+G3fv3iUnJ7cUt0CIsqcX4ba2ttYqgFcS27d/y7KlS+nbrx/vvtuRWrVqMWniBJ30LURFohfh1qX9+/YxbNhwRvj5Afm3tFJTU8t5VELonl6EOyMjg8TERK1lVatWxdzcvNh9vebszLFjx2jTpg2GRkas+nIl8tXtQo30ItwbNqxnw4b1WssmTpzEUF/fYvc1edJkPvlkLr6+Q7G2tsbffySXL1/W0UiFqDiK9b/CmjVtwumfz+hkxbrsSwhRkF7cChNCFJ+EWwiVKla4ra2tuXTxYolXeuniRaytrUvcjxCicMW6oDZ+wkTGjx+ns69ZEkKUHinhK4RKyTm3ECol4RZCpSTcQqiUhFsIlZJwC6FSEm4hVErCLYRKSbiFUCkJtxAqJVU+hVApqfIphEpJlU8hVErOuYVQqQof7opc5VNRFCLWraOzdydaergz7oMAbt26VSrjEqK49OILEitilU+ALVs2s+WbLXzyyadYWVmxadNGxo37gOjob7WKIghRHvQi3BWxyifArthY3hv1Hi1atADg449D8GrXlgsXLvDmm2+W5jCFeCG9CPfzlFeVT4BP582nhoOD5ncDAwPy8vIwNDTQ9WYKUWyqmDuWR5VPAFdXV8yeKoywZ/duTExMqFu3ns62TYiXpRfh1ocqnzdv3uSzzxYzadJkKlWqVKK+hNAFvZiWV/Qqn5mZmUyaOAEvr/Z0k6fuRAWhF+GuyFU+8/LyCJw2lWrVq/PhjBk6GaMQuqAX4dYlXVf5nD9/HikpKUSs34CJiYmuhilEielFuCtqlc8NG9azd88eFi5aREpyMinJyQBUq15dii6IcqcX4a6oVT7XrllDTk4OEydoT+vHjB3LyJGjXqpPIXRFqnwKoVJ6cStMCFF8Em4hVEqqfAqhUlLlUwiVkiqfQqiUnHMLoVISbiFUSsIthEpJuIVQKQm3ECol4RZCpSTcQqiUhFsIlZJwC6FSUuVTCJWSKp9CqJRU+RRCpeScWwiVqvDhrshVPgHi4+Px6d8fd7cW9O/XlyNHDpfKuIQoLr34gsSKWuXz+PHjzP4omIkTJ9G0WTO+P3KEoMBAtnwTSa1atUplfEIUlV6Eu6JW+Yw7eJAhQ4bSr39/IL922JHvjxB38CDvvf9+aQ5TiBfSi3A/T3lW+Zw9Z06BZeZmZlKbW1QIqvgrLK8qn0/Lyclhx44dnDt3jg7vvquLzRKiRPTiyL1y5QrCw1dpLYuLP4SFhQXwV5VPgF69e3P06Pf4+ftjaGioVeWzZk0nvLy8aNq0qeYLGnv06MnyZctISLhE69ZtXmp8a9euIXxV/vhmz56Ds7Pzy26qEDqjF+Gu6FU++/btR8uWrbh44QJhYaEAdO3W7aX7E0IX9CLcFbnKJ+RfubeysqJBgwYYGBqwLmKdhFuUO70Ity7pssrn9KAgOnXqhGfbtppllUwq8TD35WcBQuiKXoS7olb5tLG1Yf78eeQ+zMXVtTZXrlwmLCyUQYMHv1R/QuiSXoS7olb5nDRpMhYWFixftoyUlBQcHBwYMcKPwUOGvFR/QuiSVPkUQqVUcZ9bCFGQhFsIlZIqn0KolFT5FEKlpMqnECol59xCqJSEWwiVknALoVISbiFUSsIthEpJuIVQKQm3ECol4RZCpSTcQqiUVPkUQqWkyqcQKiVVPoVQKTnnFkKlKny4K3qVzycyMzNp1rQJAwf4lMq4hCguvfiCxIpa5fNpEevWAWBoaKTrIQnxUvQi3BW1yucTyclJbI/ZzujRYzh69GgpjUyI4tGLcD9PeVb5fGLFF1/Qq2cvbG1tdbx1Qry8Cn/OXRTlWeXzypUrfH/0KMNHjNDlJglRYnoR7pUrV+Du1kLrJzMzU/P6kyqflpaW9Ordm5ycHPz8/TEzM9Oq8gng5eVFzI6dtG3bDhsbG3r06Im5uTkJCZdeamxLw0LxHeqLpaWlTrZVCF3Ri2l5Ra3yeezYMa5evcqS0LBiv1eI0qYX4a6IVT4fP37M0qVhvPfe+5iamupkbELokl6EW5d0VeXz2rVrXLt6lYULF7Bw4QIgP/AAzd9qRmTUVlxdXXU3cCGKSS/CXRGrfDo7O7N16zatZTE7YtgRE8OGDRt59dVXi92nELqkF+GuiFU+K1WqhGvt2lrLarvWxtW1doHlQpQHqfIphErpxa0wIUTxSbiFUCmp8imESkmVTyFUSqp8CqFScs4thEpJuIVQKQm3ECol4RZCpSTcQqjU/wN96+Qdc8w7vwAAAABJRU5ErkJggg==)"></div>Form / Tabs</a><a class="thumbnail" href="/wave/docs/examples/separator"><div style="background-image:url(/wave/assets/images/separator-761eab53dd3e94f7cae3fc78ce5f36b7.png)"></div>Form / Separator</a><a class="thumbnail" href="/wave/docs/examples/file-upload"><div style="background-image:url(data:image/png;base64,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)"></div>Form / File Upload</a><a class="thumbnail" href="/wave/docs/examples/form-frame"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Frame</a><a class="thumbnail" href="/wave/docs/examples/form-frame-path"><div style="background-image:url(/wave/assets/images/form-frame-path-e829e3ff6a85bcc0e461e8c2cb505c32.png)"></div>Form / Frame / Path</a><a class="thumbnail" href="/wave/docs/examples/form-menu"><div style="background-image:url(/wave/assets/images/form-menu-d7388e52d93d99081c085e2d1baa003d.png)"></div>Form / Menu</a><a class="thumbnail" href="/wave/docs/examples/form-template"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Template</a><a class="thumbnail" href="/wave/docs/examples/form-markup"><div style="background-image:url(data:image/png;base64,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)"></div>Form / Markup</a><a class="thumbnail" href="/wave/docs/examples/stepper"><div style="background-image:url(/wave/assets/images/stepper-6ec5c425af780ae34209e38d2ae8821a.png)"></div>Form / Stepper</a><a class="thumbnail" href="/wave/docs/examples/table-markdown"><div style="background-image:url(/wave/assets/images/table-markdown-fff816fa17022f80817f83239970db97.png)"></div>Table / Markdown</a><a class="thumbnail" href="/wave/docs/examples/table"><div style="background-image:url(/wave/assets/images/table-f4d13c60963beb31475a54192f62b47d.png)"></div>Table</a><a class="thumbnail" href="/wave/docs/examples/table-sort"><div style="background-image:url(/wave/assets/images/table-sort-160ae663649156d89ea2cea500cc21b1.png)"></div>Table / Sort</a><a class="thumbnail" href="/wave/docs/examples/table-search"><div style="background-image:url(/wave/assets/images/table-search-f29a132ad20079a67a0fee3143689fa6.png)"></div>Table / Search</a><a class="thumbnail" href="/wave/docs/examples/table-filter"><div style="background-image:url(/wave/assets/images/table-filter-ce33da2e8b6fa9d9965683c9017e8662.png)"></div>Table / Filter</a><a class="thumbnail" href="/wave/docs/examples/table-filter-backend"><div style="background-image:url(/wave/assets/images/table-filter-backend-e69a57efeee01d99d32a542a71466995.png)"></div>Table / Filter / Backend</a><a class="thumbnail" href="/wave/docs/examples/table-download"><div style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAagAAADwCAYAAABVGPDuAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjIzOjU0IFBNIFBEVIdbzHsAACAASURBVHic7d15fFTlvcfxzzkzWSYhGxjWsBM2ZVfZgrjWunS5FQVs3WhvW8VWba23tfZqb2+1tdXKvVqrqNetWpF73XfbqmxBCDsICAKBEENkSUIymcnMOfePQwaiQGaSSc4Jft+vF6+Yc+bM84vAfHme85znMWzbthEREfEY0+0CREREjkYBJSIinqSAEhERT1JAiYiIJymgRETEkxRQIiLiSQooERHxJAWUiIh4kt/tAkTkSyRYD8EgdigMUQusKITCREdMhewsjGGDwQCj6HSMM4swTh0NudluVy0uMbSShIi0qeoa7GA9HKwFyzrqS6Ijph7zcmPiqZgzv4Xx/SvaqkLxKAWUiLSN6hrsffuhIXL4WFoqBAIYgXTwmWD6nGMAez7DXr0OLBvr/UWw8EPsD1cevrZXD8xvfwvzP37evj+HuEYBJSLJFQxiV+6FUNj53u/HyMuBzExISfCuwmf7sOa/gnX3/bD7UwCM4YMxf/8rjPPOTG7d4jkKKBFJGrtyLxyocr7x+zG65EF2VnLe+42/E53988NB9b3v4Lv/rqS8t3iTAkpEWs+ysCsqnftMgJHfBXJz2qapX/4W656/OO0MH4Lv7/MhL7dN2hJ3KaBEpHVCYeyKPc6QnmliFPQ8fF+pjdjLVhG9cCbUHMQYNhjfvLlQOKBN25T2p4ASkZazLOxdu51wSkvF6NE98ftMLfXZPqLnTsPe+DH06oF/+dvqSZ1g9KCuiLSYXVF5OJwKerZfOAGc1BnfP/8PY2ghlJUTPWda+7Ut7UIBJSItYlfude45mabTczJd+DjJy8X37nzo2R17wyaiV17f/jVIm1FAiUjigsHYbL127zl93kmd8T03FzplYs97Cfud99yrRZJKASUiCbMr9wKHZuu18YSIeBinjcb8gbPSRPTaW1yuRpJFASUiiamuce47+f1tNpW8Jczf/hJ6dodd5Vh/eMDtciQJFFAikhB7334A5yFcj/E98DsArL884XIlkgwKKBGJX3WNs7ae35+0FSKSybjgHKcXVVaOPe8lt8uRVlJAiUjc7GA9gLO2nkeZP7wSAOvp+S5XIq2l/aA8IhgM8tijj7B+3Vqys7O5bPpMxo4b53ZZIk0dWsqIzEx36zgOc9a3sf7yJHTLd7sUaSUFlEc8/dQTpKWlcc+f5lC+ezf33XcvvQp60a1bd7dLE3E07ueUlurutPLmnNQZ33svOBM5gkEIBNyuSFrIw3/KvjxCoRArSkr4471/IhAIMGDgQIqKprBwwQIumXap2+WJOBq3z4jzA3/Pnj2sW7uGuro68vLyGDN2HBkZGQBEIhFWrljBnj0VpKWlcfIpI+jRo4fTTCjE8uXLiEai9B8wgN69ewOw8aOP8Pn9FBYWNt94IODUW1evgOrAdA/KA8rKdpGf35XMzE6xY4WFhZSW7nCxKpGm7GAQwNlssBmhUIiS5csYMXIUF1x4EV27dqOkZHns/JrVq/D5fZz/1QsYd+pprFq5gtragwDs2rWTbt26MWnyZLZ8vBmAqqoqKj+rZNCgQXHV2lij3Riq0iEpoDygPlhPRmZGk2PpgQDBQx8IIp7ia/5jIxQKMXDgIPLz8/H5fAwYOJCqAwcAiEaj7N69mxEjRuD3+8nLy6NP376U7igFwDRMrKhFNBrFMAxs22b1qpWMHj0GwzASq9GKtuhHFG9QQHlAeiCdUH19k2O1tbUENDQhXmJZzlfT1+xLs7OzGTxkSOz7yspK8vKc56aqq6vJzMwkJeXwChRdOnehqsoJsN59+lBdXU3J8mWcfPIpbNq4kR49e5GVlcC09sYaG2uWDkn3oDygV68CPq2oIBgMxkJp65Yt9O7dx+XKRI7QOFyW4NJGwWCQNatXMX78BMC5/5SS2vQ9/Cl+GiIR57/9fk497TTg8NBeUdGUxGptrFFDfB2aelAekJaWxpjRY3j2mb8Sqq9n08aNLFywgMlFRW6XJtIqDQ1hlixexPCTTyYn19mrye/3E2loaPK6cLiBFH/Tfy8fObT3ydatLFq0kI82bGi32sV9CiiPuOKqq6irreXGG37EY4/O5cqrrqZHj55ulyVyWIK9kmg0SvGSJfTp25eCgt6x49nZ2RysrSVyqMcEsH/fPrJzmj782zi0l56eTmnpDiZPLmL//n3U1NQ033gLe3viLRri84hAIIPrf3yD22WIHJsZ/8QD27ZZ9uGH5OblMWDAQKxD94JM08Tn89Gjew/Wrl3DyBEjOXDgADt27OCMqWfErj9yaK+hoQHzUNumzxd7r+NqrNGNPaokaRRQIhKfOCZHNCovL6ei4lOogE+2bo0dP+fcc+nUKYtRo0exomQFb7zxOmlpaYwePZpOnZxJEI1De2PGjsMwDFJTU+ncuQsLFnxARiCDnJw4llmKxj+hQ7zLsG3bdrsIEekA9u53VjLPzXH2gfIwu3IvHKjC6JwHHlx1XeKj/q+IxCfj0AO6HeH5vMYaM5p/qFi8SwElIvEJBJx7OqGws+WGVzVEnBpNU8scdXAKKBGJX6dDq5jX1rpbx/E01tbJuyuuS3wUUCISt9gadweqXK7k2Bpri2fNQPE2BZSIxC87y9lNtyHi7K7rNR7f8VcSo4ASkYQYh2bF2fv2u1zJFzXWZGjm3glBASUiicnOclZoaIiAl4b69u53agqkq/d0glBAiUjCGp+Dsiv3emNB1lBYvacTkAJKRBIXCECus6KDvWu3u9POGyJODeDUpKnlJwwFlIi0iJHfBTIzwbKwyz91Z++lI9vOzPT8CheSGAWUiLSY0T3fuR8VCrd/T6qx5xQKQ1qqU4ucULQWn4i0TiiMXbEntnqDUdCz7be5aAxEy3LCqaCnVi4/ASmgRKT1LAv708rYKg5Glzzo3EaTFfbtx957aIp7ZqbTc1I4nZAUUCKSNI2riAOQ4ndWE0/WlO/qGmemXuMwYgdYVV1aRwElIskVDDadfp7ix8jNcSZUpCS4BV1DBGprneWLGoMpkO700DRb74SngBKRtlFd4wzFHbG1O2mpEAhgZKQ7mwmaZtOt5C0LrCh2Xb2zZcaRz1j5/U4w6SHcLw0FlIi0reoa7GA9HKxNfCq6aUKnTGfhVwXTl44CSkTaTzAIdfXYoTBYUSewGntJaalOIJk+jLRUZ7NBDeN9qSmgRETEkzQ3U0REPEkBJSIinqSAEhERT1JAiYiIJymgRETEkxRQIiLiSQooERHxJAWUiIh4kgJKREQ8SQElIiKe5D9YU+12DSIiIl+gtfhERMSTNMQnIiKepIASERFPUkCJiIgnKaBERMSTFFAiIuJJCigREfEkBZSIiHiSAkpERDxJASUiIp6kgBIREU/yu12AiHyJBOshGMQOhSFqgRWFUJjoiKlwUmfIzsLIycY4eQjGmZMxLjgHuuS5XbW4RGvxiUjbqq7BDtbDwVqwrKO+JDpi6jEvN0YOx/zedzC+f0VbVSgepYASkbZRXYO9bz80RA4fS0uFQAAjkA4+E0yfc6w+BOUV2Pv2wZ69WO8vgnc+wF6/6fC1fXvj++m1CqovEQWUiCRXMIhduRdCYed7vx8jLwcyMyElwbsK5Xuw/ucZrAceg737ATBOGYb5yL0Yo09JcuHiNQooEUkau3IvHKhyvvH7MbrkQXZWUt7buv9RrHsehPIKAMxf3oT5q58k5b3FmxRQItJ6loVdUencZwKM/C6Qm5P8doL1WD/7NdYjTzvtTD4d3wuPJy0ExVsUUCLSOqEwdsUeZ0jPNDEKejr3ldqQ/c9FRGfdAOUVGKNOxvfqXyG/S5u2Ke1PASUiLWdZ2Lt2O+GUlorRo3vi95laascuIl+dAdt2YAwbjO/v86GzpqSfSBRQItJidnmFM6yXlur0nMx2fva/8jOiZ1+C/fEnGKePxffeC+1fg7QZ/U6KSIvYlXudcDJNp+fkRjDkn4TvzecgNwf7wxVEb7uz/WuQNqOAEpHEBYOx2XpGQc/2G9Y7ml7d8T31AJgm9n1zsf/+gXu1SFIpoEQkYXblXuDQbL02nhARD+O8qZg/vRYsi+jsnx9zxQrpWBRQIpKY6hpnUoTf3zZTyVvI/PUt0Lc3bN+J/dTzbpcjSaCAEpGE2PsOrejgtUVcTRPfLbMBiN45R72oE4ACSkTiV13jrK3n93vy4VjjmplOL2rHTuyn57tdjrSSAkpE4mYH6wGctfW8yDQxr7oMAOuJ51wuRlpLz0F5RDAY5LFHH2H9urVkZ2dz2fSZjB03zu2yRJqwt24Hy8Lo18fdmXvHYX+8jeiIM8Bn4t/zEWRmuF2StJB6UB7x9FNPkJaWxj1/msP3f3Atjz/+GBUVn7pdlshhjfs5paV6NpwAjML+GIUDIGphv/UPt8uRVlBAeUAoFGJFSQkzL7+cQCDAgIEDKSqawsIFC9wuTeSwxu0zAoGELtuzZw8vvfgC5eXlRz3/6isv8/JLLzY5tqJkOQsXfMDaNWtixz6rrKR4yeL4Gr3gbADsBUsTqlW8RQHlAWVlu8jP70pmZqfYscLCQkpLd7hYlUhTdjAI4Gw2GCfLsli7ZvUxz2/fvh3TNElPP/yeVVVVhBsaKJpyBvv27SUUChGNRFi3bi2jx4yNq11zxHCn5k/0d6gjU0B5QH2wnozPjZOnBwIED30giHiKL/6PjU2bNtK1Wze69+jxhXPhcJjNmzYydtyppKQeftjXNAysaBRwAs40TdatX8eAgYOaBNlx9S1wvu46eq9NOgYFlAekB9IJ1dc3OVZbW0sgwaEUkTbV+FyR6Yvr5QcP1rBr506GDRt+1PNr165h4KBBX/hznpWdTW5eHosWLaRPn75UHThAsK6OPn36xF2q0bc3AHaZAqoj8+6dzi+RXr0K+LSigmAwGPvLunXLFnr3jv8vpEiba7wHFefSRqtXreKUU0bg93/xY+azzyqpqa5m7NhxVFdXf+H88OEnAxCNRFiw4AMmTJyUWK2N0+A1CtGhqQflAWlpaYwZPYZnn/krofp6Nm3cyMIFC5hcVOR2aSItsrO0FJ/fT4+ePb9wzrIs1qxezajRYzAM47jv0zi0V1NdzeLFi1i+fBmRSKT5Ag49r0UC98vEe/QclEcEg3U8Oncu69evIzs7m2mXTue00093uyyRGLt0F4TCGH0Kmu1FffD+e1TX1OA7tAVHOOz0voaffArZ2dkUL1lM6qH7To3nUlNTueDCi2Lv8VllJVu2fMyEiZN475//YOKkyezYvp2U1BT69x9w/Fo3byU68kzo2R3/J8ta+iOLyzTE5xGBQAbX//gGt8sQObbG/Z6saLMvHT9hIvYRa+EtXVpMnz596d2nD6Zpcv75X42dq6qqYsWKEs466+zYscZZe41De5Zt4/P5MH0mVjxr7NXWOV8z1IPqyBRQIhKfOCdHgDNsfaT0QID0QCB2Pyr9iIkRoXA4dr6RM7Q3MDZrb3DhYBYvWoTPZ3LqaXGMLGzdDuD09qTDUkCJSFyMtFTs2lrsg3UYCc4wHT9+wjHP5eTkNOk9AYwaNbrJ9wW9e1PQu3fc7VmLnWE94/QxCVQpXqNJEiISn8bhso4wM654OQBG0XiXC5HWUECJSHwCAec+VCjsbLnhVbvKsVetB9PEKDp2z028TwElIvHrlOl8ra11t47jsOY+6ay4fuZkSE9r/gLxLAWUiMStcR0++0CVy5Ucg21jPfosAOZ3L3e5GGktBZSIxC87y9lNtyHi7K7rMfaLr8Nne6FXD4xLLna7HGklBZSIJMTokgeAvW+/y5V8UfTWOwEwr57hciWSDAooEUlMdpazkkRDBDw01GfddhdsK4Vu+Zg3X+d2OZIECigRSZiR3wUAu3Lv4UVkXWRv2Iw1Zy4Avgfv1hp8JwgFlIgkLhCAXGfFcHvXbnennX+2j+i3roaGBoxvXohx4bnu1SJJpcViRaTF7N0VzpTztFSMgp6H1+trL3VBomd+E3vNBhjQF//SNyGrU/PXSYegHpSItJjRPd+5HxUKt39Pauduomd83Qmnrifhf+d5hdMJRgElIi1nmhjduh4OqUNbcrQ1e+kKIuPPx163ETIz8L09D3p9cVt56dgUUCLSOo3De5mZYFlOSLXhFHT74SeJnjsN9h2Afn3wLXgFY2hhm7Un7tE9KBFJGrty7+Gp5yl+jM55zrT0Vr+xjf38y1hz5mKXrAbAuOg8fE/eD5kZrX9/8SQFlIgkVzDYdPp5ih8jN8fpYaUkuMNPQwRqa4n++++xH37KOdarB77f/RLj0m8kt27xHAWUiLSN6hrsvfshcsTEibRUCAQwMtKdDRBN8/D28aEwWBZYUey6emdbj0MhZ69ej3XdLZg/uRbzp9clHnTSISmgRKRtVddgB+vhYK0TQIkwTeiU6SxS2xCBQ8ssyZeDAkpE2k8wCHX12KEwWFEnsBqHAtNSnUAyfRhpqc4GiQnu3CsnFgWUiIh4kqaZi4iIJymgRETEkxRQIiLiSQooERHxJAWUiIh4kgJKREQ8SQElIiKepIASERFPUkCJiIgnKaBERMST/Adrqt2uQURE5Au0Fp+IiHiShvhERMSTFFAiIuJJCigREfEkBZSIiHiSAkpERDxJASUiIp6kgBIREU9SQImIiCcpoERExJMUUCIi4kl+twsQkS+RYD0Eg9ihMEQtsKIQChOdeCFGr+7QswcU9MAYOgjjrCKMsSPdrlhcpLX4RKRtVddgB+vhYC1Y1lFfEh0x9ejX5uZgTBiH8dWzMH94ddvVKJ6kgBKRtlFdg71vPzREDh9LS4VAACOQDj4TTJ9zrD4EFZXO6/dXYS9bif3+YuziEqgLOtd274p53TWY138XMgLu/EzSrhRQIpJcwSB25V4IhZ3v/X6MvBzIzISUBO8qNESwX30b63f/hb16vXMsJxvffb/BmPmt5NYtnqOAEpGksSv3woEq5xu/H6NLHmRnJee9X3oT6zf3YK/bCIBxw7/i+92vwDCS8v7iPQooEWk9y8KuqHTuMwFGfhfIzWmbpu6+H+s/74VwA8ZZRfieezhpISjeooASkdYJhbEr9jhDeqaJUdDTua/Uhuzlq4lecR1sK8UYORzf2/PaLBDFPQooEWk5y8LetdsJp7RUjB7dE7/P1FI1tUSnXYP9/hKMSafhe3c+mHq080SigBKRFrPLK5xhvbRUp+fU3gFRFyR67iXYK9ZinDMF3ytPK6ROIPqdFJEWsSv3OuFkmk7PyY1gyAjge+1ZjCGDsP++AOvXf2j/GqTNqAclIokLBrF3lQNg9Clo83tOzdpWSmTcudAQwffBSxhjRrhbjySFelAikjC7ci9waLae2+EE0L8P5q03QkMD1ndvhGjU7YokCRRQIpKY6hpnUoTf76mZc+bN12GMGYG9YTPWnIfdLkeSQAElIgmx9+0HcB7C9Rjzjp8BYN3/GOjuRYengBKR+FXXOGvr+f2efDjWOP8sjEH9Yfen2K+943Y50koKKBGJmx2sB3DW1vMoY9blAFiPPeNyJdJamsXnEcFgkMcefYT169aSnZ3NZdNnMnbcOLfLEmnC3rodLAujX5/2eyA3UVU1RPqOBWz8+zbruagOTL9zHvH0U0+QlpbGPX+aw/d/cC2PP/4YFRWful2WyGGN+zmlpXo3nABysjAmjIX6EPbSErerkVbw8J+yL49QKMSKkhL+eO+fCAQCDBg4kKKiKSxcsIBLpl3qdnkijsbtMwLN78W07ZNPWLNm9ReOn332OWRlZ1NTU8PKFSuorq4iJyeH0WPGkpXl3NPau3cv69etxTAMRo0eQ3Z2NgCLFi1k2LDhdO7cuflaTx4K7y3GXrQMY+Jp8f+M4ikKKA8oK9tFfn5XMjM7xY4VFhby3nv/dLEqkabsoLNxoBFIb/a1/fr3p2+/frHva2pqWLJ4ERmZmdi2zdLiJQwcNIi+fadQWlrK0uIlnHPueRiGwZYtHzNy1GhCoXq2b9vGyFGj2PbJJ+Tm5MYXToA5cjhRnEVlpePSEJ8H1AfrycjMaHIsPRAgeOgDQcRTfM1/bBiGgWmasV9bPv6YQYMK8fl8VFZWkpKSQv/+AzBNk379+pGSkspnlZUAmIaBFY0SjUYxTIO6ulpKS3cwbPjw+GscOcz5un5jS35C8QgFlAekB9IJ1dc3OVZbW0sgjqEUkXZjWc5X05fQZbW1B6ms3EP//v0BqKqqonPnLk1e06VLF6qqnI0OhwwdxqZNGyktLWXQwEGsXLmSESNHYSYw2cHIyQXArqtLqFbxFg3xeUCvXgV8WlFBMBiMhdLWLVvo3buPy5WJHKHxHlSCSxtt2rSJAQMG4vM7HzeRSAMpqSlNXuNP8dMQaQAgOzubiZMmAyQ8tBfT6dA/7hq05FFHph6UB6SlpTFm9BiefeavhOrr2bRxIwsXLGByUZHbpYm0Sl1dHRWffsqAgQNjx/z+FCINkSavC4fDpPhTPnetM7Q3ZOgQVq1cyeJFCykr2xVfwymHQlRr8nVoCiiPuOKqq6irreXGG37EY4/O5cqrrqZHj55ulyVyWGPPqbEnFYfNmzbRf8AA/P7DgzU5OTns37+vyev279tHdk7Th38bh/YqKz/D9JlMmDiJDes3xNdw4+OdCqgOTUN8HhEIZHD9j29wuwyRY2u8B2TF96EfDAYpL9/Nued9pcnx/Px8Vq9ayY4d2yko6E3pjh2Ew2Hy8/NjrzlyaG93WRk+04dhGNjEt66AvceZcMFJ3lsvUOKnHpSIxCfByREfb95M3379SElpOnRnGAbjJ0xkx/btvPH6a+zcWcr4CRMxDANwhgV3HDFrr2u3btTUVLNwwQcMPGKo8LjWfuS0NXxoQjWLt6gHJSJxMdJSsWtrsQ/WYcQxw3TkqFHHPJednc0ZU8886rmMjAzOPPOs2Pd+v58JEyclVKu9er1T8wgFVEemHpSIxCfj0AO6HeD5PPuDJQAY444dkuJ9CigRiU8g4NyHKq+A6oNuV3Ns23Zif7gSsjphXHiu29VIKyigRCRu1j0PEp36TazHn3W7lGOynpkPgPG1812uRFpLASUicTMvcnok1v2PulzJsdnPvwyAefm/uFyJtJYCSkTiZlx0HgzsB6Vl2C+96XY5X2C/8Br2xi1Q0BPj3KlulyOtpIASkYSYP/4eANav/+CtB2FDYaI/uR0A86YfuFyMJIMCSkQSYn732xhDC7E3bMa6c47b5cRYv74byiswhg7CvO4at8uRJNCW7yKSMHvNBqKnO5MQfCv+jjF8sLv1FJcQPfObTj1v/g3jzMmu1iPJoR6UiCTMGDkc8/abAYhOmwUVle4Vs2U70W9e5dR12TcUTicQ9aBEpMWiX7kM+4MlGMMG4/vH/0JebvsWcKCayOSLYOt2jFNH4Vv4avu2L21KPSgRaTHfi09gTDwV+6PNRM+fDlU17df4tp1Ez/g6bN0OfQvwvfxU+7Ut7UIBJSItlxHA9+KTTkit2UBkwlexl69u82btD4qJTLwAe/NWyMvF/9Y86KyVy080CigRaZ2cLHxv/A3j29NgWynRqd/AuvU/4XObEiaL/cjTRC+YAQeqMAYPxL/4NejXu03aEnfpHpSIJI019ymsm+9wNjUc2A/zumswZ10OgfRWv7f91Dysh56M9dCMa2bie/DuVr+veJcCSkSSyl65huiMH8COQ9uzZ2ZgXv4tjNmzMIYWJvhe67CffxHruZehrNw52K83vrtuw/iXC5NcuXiNAkpE2oT1349g/fl/YFvp4YNdT8IYWohxylAYMghj+GCMMSOgU6bT69q3H3tpCdaiZdgvv3k45A5da/7bjzBnz2r/H0ZcoYASkTZlz38F68HHsRd92KLrjfOmYn7jAoxvX5KUoULpOBRQItJu7Hfew/6gGHvxMuwt2476gK8x8mSMcSMxzp6McfH5CqUvMQWUiIh4kqaZi4iIJymgRETEkxRQIiLiSQooERHxJAWUiIh4kgJKREQ8SQElIiKepIASERFPUkCJiIgnKaBERMSTFFAiIuJJCigREfEkBZSIiHiSAkpERDxJASUiIp6kgBIREU9SQIlIu7vjjju444473C5DPE4BJSIinqSAEpEOa+nSpYwbOyb2a+oZU/jed7/L+++/72pdt/zsZh566C9t2sbECePZsGFD3K9fu3YtRZMntWFFyaeAEpEOLSUlhVdefY1XXn2Nhx5+mKKiIm79xc95+umn3C6tQ5s/fz6zZl3jag1+V1sXEWklwzDo2bMnAD179mTo0GEMGTqEm268kbPOOptevXq5XKG0lHpQInLCmThxEkOGDOWdt9+OHVu7di2zZl3DpIkT+NrFF/HsM8/Ezt1++79z1113xr5/7733GDd2DOvXr48d+9H1s5n78MMAnH3Wmbz66qt859uXM3HCeC6fOYNNGzces57jtQ1QVlbGL37+c84+60ymnjGFX912GwcPHoydLy8v50fXz2bypIlcfNGFlCxf3uz/g2XLPuTyy2cyccJ4rrn6KioqKuJu849//AN33flbVq9axbixY3jxhRfiqjPZFFAickIaPXo0H2/5GICysl1cd+0PmVI0hefnz+cXt/6Sxx//n1hQFBUVsbS4OHbth0uX4vf7WfbhhwA0NDSwYsUKJhcVxV7z9FNP8qt/v52333mXwsGDufXWXxy1jubatm2bn9x0EwCPP/EkTz71NDt3lvLgnx8AIBwOc921PyQ3N49nnnmWO+/6HQ899Bcikcgxf/bt27fz4x/9mAu+egHz//f/uOLKK/nv/5oTO99cmzfd9BN+evPNDBs2jCXFS/n6N77R7DVtQQElIm2urKyMhoaGY55vaGigrKwsqW1mZWVRU10NwLzn5nHqqadxzaxZ9OpVwKRJk7jppp/wxBOPY9s2EydOYvfu3ezevRuA4qXFfOeKK1i61AmtVatWkpGZybBhw2LvP2PGTIYMGUJWVhY//OG1bN++94pyFgAABIRJREFUnQMHDnyhjubaNgyDRx97jP/4zW/o06cPffv25aKLLmb16tUALFq0kNraWm6/4w769uvHyJEjuW72bCzLOubP/vzz85gypYgrrrySXr16cfbZ5/C1r389dr65Nn0+H6mpaaSmpZGamoppms1e0xZ0D0pE2tzvf/97SktLef7550lJSWlyLhKJMGPGDLp3784DDyTvX+PV1dVk5+QAsHnzJk4/fXyT86NGj6ayspL9+/bRuUsXRo4cxdLiYiZNnkzVgQNceeVVXHThBYTDYYqLi5k0aRKGYcSu7927d+y/cw61U1dXR25ubpN24mnbNAzeeON11q9bx85du9iwfj1du3YFYOuWrQwdOhS///DH9dChwzDNY/cvtm7ZysRJE5scGz785CbfH6/NY2nJNa2hHpSItLl7770X0zSZPn16k6GpSCTC9OnTiUaj3HfffUltc9XqVQwZPAQA26ZJuBxNUVERxcVLWLq0mPHjx5OTk8PAgYNYtWoVxUuKKTpieC8RzbVdV1vLd674Dm+8/jqFg4cw65pZzJ59fZPXRKLRz72njW3bx203Gml6jXXEe8TTZkvqTDYFlIi0Ob/fz3PPPYdlWcyYMYNIJBLrOUUikaP2rFpjwYIP+Hjzx5z3la8AMGTIEJZ/bmLB8mXLyM/PJ69zZwAmFxXx4bJlLFm8hPETJgAwYcIE3n77LbZu3cKECU17JPFqru2PPvqIPRUV3P/An5k2bRqnnnZak6HCQYMGsfGjj6irrY0d27B+/XEDalDhIEpWlDQ5tn7D4QkfzbUJYBg46ZrANcmmgBKRdpGSksK8efMIh8PMmTOHOXPmEA6HWx1Otm3H7h9t2LCBuQ8/zL/dcgs33nQj3bt3B+Cy6ZexatVKHn7oIcrKyli8eDH3/ulerr76mljvprCwkEB6Ou+++04sjCZMnMBLL77IKaeMICsrq0X1Ndd2Qe8CwuEwr7/2GuXl5bz77rvMm/dc7PpJkyeTm5vL7bffzo7t21m9ejUPPvggqampx2zz0mmXsqKkhEcffYSysjLeffdd3nrrrdj55toEOOmkfLZt20ZJSQk1NTVxXZNsCigRaTepqanMnz+fqVOnMnXqVObPn3/cD9p4NDQ08LWLL+JrF1/E7OuupaSkhLvv/gPTp8+IvaZXrwL+8tBDFBcv4dJpl3DXnb/l+//6fWbMnNnkvSZPLqJv375069YNgJEjR5EeCLR4eC+etrt1684f/ngPc+c+zKXTLuHll1/iiiuujF2fmprK/Q/8mbpgHTNnzuBXt93G7OtnEwgEjtlm3379uG/Of/HuO+8w7ZJv8bdnn+WWn90SO99cmwBTpkzhK+efz4033sBbb74Z1zXJZtjNDWSKiCRZKBTCMIxWh5Oc2BRQIiLiSRriE5E2d8cdd2AYxnF/afsN+Tz1oERExJPUgxIREU9SQImIiCcpoERExJMUUCIi4kkKKBER8SQFlIiIeJICSkREPEkBJSIinqSAEhERT1JAiYiIJymgRETEkxRQIiLiSQooERHxpP8HRD0aACVCyDwAAAAASUVORK5CYII=)"></div>Table / Download</a><a class="thumbnail" href="/wave/docs/examples/table-groupby"><div style="background-image:url(/wave/assets/images/table-groupby-8a15ae0b2ea905a6961c5783aebe43c5.png)"></div>Table / Group by</a><a class="thumbnail" href="/wave/docs/examples/table-select"><div style="background-image:url(/wave/assets/images/table-select-428e4b7f6e76c00956feb8ede847a369.png)"></div>Table / Preselection</a><a class="thumbnail" href="/wave/docs/examples/image"><div style="background-image:url(/wave/assets/images/image-dab53361cb560c92baeb4fb3315cab5a.png)"></div>Image</a><a class="thumbnail" href="/wave/docs/examples/frame"><div style="background-image:url(data:image/png;base64,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)"></div>Frame</a><a class="thumbnail" href="/wave/docs/examples/frame-path"><div style="background-image:url(/wave/assets/images/frame-path-0db07ced544338ad72aef8fed53c931d.png)"></div>Frame / Path</a><a class="thumbnail" href="/wave/docs/examples/template"><div style="background-image:url(/wave/assets/images/template-1b5f5707f248dfd5a606e722345ad2a2.png)"></div>Template</a><a class="thumbnail" href="/wave/docs/examples/template-data"><div style="background-image:url(/wave/assets/images/template-data-1b5f5707f248dfd5a606e722345ad2a2.png)"></div>Template / Data</a><a class="thumbnail" href="/wave/docs/examples/markdown"><div style="background-image:url(/wave/assets/images/markdown-3164a3fca5f8ccd5e61dbb00656dc796.png)"></div>Markdown</a><a class="thumbnail" href="/wave/docs/examples/markdown-data"><div style="background-image:url(/wave/assets/images/markdown-data-34fd56cbb56e79c00a4539f5bfab1e3b.png)"></div>Markdown / Data</a><a class="thumbnail" href="/wave/docs/examples/markup"><div style="background-image:url(data:image/png;base64,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)"></div>Markup</a><a class="thumbnail" href="/wave/docs/examples/nav"><div style="background-image:url(data:image/png;base64,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)"></div>Nav</a><a class="thumbnail" href="/wave/docs/examples/toolbar"><div style="background-image:url(/wave/assets/images/toolbar-6cae7b599ebdc78e77db0f536dc3392e.png)"></div>Toolbar</a><a class="thumbnail" href="/wave/docs/examples/tab"><div style="background-image:url(data:image/png;base64,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)"></div>Tab</a><a class="thumbnail" href="/wave/docs/examples/tab-link"><div style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASMAAABuCAYAAABskXUrAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjI2OjE1IFBNIFBEVGdKMasAAA6ySURBVHic7d17WFVlosfx79pscBQVKbKskeziLbUSxQSBBLS8JOYt0U5eOooVmJPXxrtOqGVZlkA6fxwRTDRM7Sg+qYWgoGjOo10QRbPyKMpIxzyBorD3+QPdw04dYbgtx9/nefiDvdaW9xX9rvddbMAoLCy0IyJSxyx1PQAREVCMRMQkFCMRMQXFSERMQTESEVNQjETEFBQjETEFxUhETEExEhFTUIxExBQUIxExBWtVnmy369vaRKR6VDpGNwuQwiQiVVHhGJWPjZubG1arFcMwamRQInLnqdA9o2shstvtuLm54erqqhCJSLWq8A1su92O3W7Haq3SbSYRkRu6ZYwc27OrMdKKSERqQoW3aXZ0k1pEak6lt2kiIjXhn8ao/I1rxUhEalKlXoGtGIlITdG3g4iIKVT8q2kiIjWoEisjRUlEao62aSJiCoqRiJiCYiQipqAYiYgpKEYiYgqKkYiYgmIkIqagGImIKShGImIKipGImIJiJCKmoBiJiCkoRiJiCoqRiJiCYiQipqAYiYgpKEYiYgqKkYiYgmIkIqagGImIKZgyRunpaYweNZJu/n48HRTInyZM4Pjx43U9rBqXlZWFX9enbnjsL/PnMWfO7FoeUfV6+eXRdPLpeN3bf3/+eV0Prcbs2LGDTj4dydi9+7pjL788muTk5DoYlTlZ63oAv5eWlsakiW9Qv0EDuvr5UXypmIyM3Rw6dJCkteu4995763qIUgUjR45i8JAhTo81adKkjkZT87Zv34bVamXbti/oFhBQ6x//xx9/ZNDAAezb/zUuLi61/vErw3QxWvPJJ9jtdpYti+GJJ54AYPXqRJa89x5bU1IYNXp0HY9QqqJx48bcf//9dT2MWnHx4kV279rFuHGvsHLlfzHj8mXc3NzqelimZbpt2sWLFwFwdXV1PDZs2HB2pqUz/MUXAXhhyGCeDgokMzOTgQOeJ6CbP5MmTeSXX35xPCc/P58/v/kmz/TsQVBgABMmvM7PP/8MwPnz5+nk05EZM6azePE7BAZ0o2+f3qSnp7Fjxw7C+vUjMDCAObNnceXKlVqcfcUdOHCAsWP+k4Bu/vTu9Swrli93HDt+7BgB3fxJSdnCs8/0JCgwgLi4WI7k5PDi8OH4+3UlYuwYzp49W4czuLF169bSt09v/Lp2Zc7sWSQmJDBhwuuO42fOnGF8VCTd/P14rm8f9u/fR0hwd7Kzsx3nJCYk8OwzPcvmGTGWU6f+py6mQnp6Ok2aNGHkqFG4ubmRmZl53TmXLl1k2rSp+HV9irB+/di0aaPT8YKCAqZNnUJQYAAhwd1ZuHABly5dchyfOmUyy5d/7PSc/mH92Jmays7UVAYNHABAF9/OzJw5owZmWX1MF6PQ0FAAXhkXwcIF0aSnp1FSUkKjRo2crioXL17k3cXv0KdPX/z8/NmZmsrkyZMAsNlsTHh9PGlpO+nXL4zw8GHsy8piwuvjsdlsjj8jY/duTv78M2FhYeTn5zN71iziYmPo3bs39917L5s3b2bDhs9q9y+gAvLz84mKjKRbtwA2bNzEwkWLSEpaw1dffek4p7i4mK/3f03S2nW8t2QJ8StXMn/+fKIXLGBLylZcXFyIi4utw1lcLyVlC7ExMUyeMoXk9ck09/YmflW84/iVK1eIinyNRo0asfqTNUQvWEhcbKzjAgawNSWFxMQE3n1vCRs3fU6rVq2YM3tOXUyHbdu+oEePnri4uBAcHML2bV9cd078ypV07OhD8vrPiBofxbuLF/Pll2Wfx5KSEiJfexXDsBC/KoGY2DiO5R5jxozpFfr4QU8/zSdrkgDYtTuDuXPnVd/kaoDptmkvjRiB1dXKqvh4kpOTSU5Oxt3dncioKIYODXecV1paypt/nk6XLl2w2WyMHjWKQwcPkpubS4sWLZg0aTL1/vAHOnToAEDOkRwydu8mLy8Pd3d3ABo39uCDpR9isVg4V1DAju3bWbTobbr6+REQGMiokSM4nH24Vud/+fLlG97ELikpoU/fvgA0bdqUlK1b8fT0BOCee+7Bt0sXDh06REhIWcxtNhvjXnkFT09PfH270Kp1a4KCgmjRogUA/cLCSExIqJ1JlRMbG3PdlXz7ji9p2LAhqxNXEzFuHMHBIQCMGTOWfVlZjvP27Mnk/PnzzJv/F8fKOTIyioiIsY5z8vLy+OMfm9O+fXsMw+CNNyY6XYBqS2FhIZkZmSxfsQKAHj17MnnSRIqLi6lXr57jvI4dOxIeXvbv+oEHHuDEiROsTVpDaGgomZkZnDt3jlUJiY4L8cJFi+jTuxc//fgjD179XN6MxWJxfKx69erpnlFlGYbB8OEvEh4+jMOHD7NzZyprk5J45+238fK6x7FycnFxwcfHByj7S+/yVBe+++5bfvjhB1q2bIn3gw+SsmULiYkJnDx5ktyjRwGctl3e3t5YLGWLQ4/GHkDZf2z4x03V8kvi2uDq6sqapLXXPR4XG+P0/uXLxSQmJpB79CgnT54kOzubAQMGOp1T/ma/1WqlQYMGjvfd3Opxqbi4mkd/a8OGDWfAQOdxXhvXsWO5tG/fwenYY+3aceLECQByc3Np3aaN0xa+7WOPYRiG4/3effqQnPwpgwcNJCAgkMDAQDr7+tbUdG5q585UPD2bOC6Gvr6+uLm5sWvXLnr06OE477F27Zye16HD46xNKlvNHD16lNZt2jjtCJo2bUqzZs04cvTILWN0uzFVjK5cucLevXvw8GjC448/Trt27WjXrh0+Pj5ERUaSnrbTESO73e50xSsfmTNnzjB8WDilpaX06t2bzp06k7ozlay9e2t9TpVlGIZj9VJew4YNKSktBSAn5zDjIiIICQmly1NP8cILQ1m37vqAmZGnp+cN53ft82mxGE6Pl7+a20ptWIzrj5ePUbNmzdiwcROZmRns37ef6dP/jK+vL9ELFlbvRG4hPj6es2fP4u/X1fHY5cuXSVqzxilGtlLnVZvt6ucYADsYOM+3Iuz2yo/XDEwVIxcXF6ZNnYqrqysbNmzkrrvvBuDs2Xyg7Gp+jc1mIyNjN8HBIZSUlLAncw8AjzzyMPv2ZfHrr78yd+48+oWFAbB1a0otz6bmpKWl0b5DB+bMnet47MxHH/LwQw/X3aCq6FqEs7OznVZHR3KO4GItC9JDDz3Ep5+uo7S01BGpo0ePOl2UCgoKKCkpITg4hODgEJ4fMIBh4UOZOu1NPDw8amUuFy5c4Ifjx5k1ew5PPvmk4/G9e/fy/pL3KCoqcqwGv8/+3um5B/52gEdbtgSgVetWJCWtoaiwkAZXby2cOnWKvLw8WrdqDUD9+vU5/7/nHc8vLi6moOCc4/1rKbPfBoUyVYwsFgvh4cOIj1/J4MGD8PHpxIX/u8DfDhzA1dWVQYMHOZ37/pIlZGVlcSz3GMeO5dKxow+PPtqS/Py/A/Bp8qcUXSzi0MGD5OTk1NW0qt2D3g+SnJzMgQMHaNasGSkpW/j2m29uixhduHCB06dPOz3m4eGBu7s7Q4eG8/HHcdzf7H4efuQRUlO/4vDhbNpf3eoEBgWxdOkHRL/1FiNHjeK3334jNmaZY6sNsGpVPAe+/po5c+fh7u7Opo0b8PLyomHDhrU2x9TUr/Dy8qJ///5Oq7bmzZvz1xXLSU9Pp1evXgBkf/89q1cn0r17MN9+8w2rExN5+513APD374aXlxezZs8iKmo8xcWXWBAdTffuwY4t2hNPPsmHS5cSEhpC03uaEhOzzOljenp6YrFY2Lx5M35+fqZ+nZ7pvpoWNX48b0yciJeXFxkZu8k5fJjOnX2J+/hj2rRp6zjParUyY+Ys9mVlkZNzmO7BwSx+910A/P39iYoaz7m/nyMuNpb69evTt+9zdTWlavdsr14MfWEoUyZP4j9eHE7BuQJ6PvNMXQ+rQuLjV9Lvub5Ob5+tXw/A4CFDeGnECKKj32LQwIEcyckhPHyY47n16tVjWUwsp0+fJnzoUKZNncKYMWOxWv9xTX3ttUjatG3LuIixDBo4kNzcXD5aFlOrN2+3bdtGaGioUxSgbOXfPTjY6atqERHj+O7b7xg8aCAxMcuYPmOm4wa+1WolJjYOq4sLI0a8xGuvvkrbtm15Kzra8fz+/Z8nNDSUP02YwKuvvkL34GDuvrqjAGjs4cGMGTOJiVnGB++/X8MzrxqjsLDwpus3u93ueLPZSikttXHXXXfV5vhu6IUhgzl58iR79mbd+mS5rZTfggEsXfoBZ8+cYcHCRTc8XlRURFBgAOvXf/Zvd0P3TmO6lZHcudatW8vLo0dz6OBBzp07R1paGhs3bCAgMBAoe23ZgOefJzExgVOnTvHTTz+xYEE03t7eNPf2ruPRS1WZ6p6R3NnCwvqTl5fHrFkzyc/P57777iMiYhx9+pS9vqp+/frMmz+PuNhY/rpiBTa7nc6dOvPhR873jeT2dFtu00Tk348uJyJiCoqRiJiCYiQipqAYiYgpKEYiYgqKkYiYgmIkIqagGImIKShGImIKipGImIJiJCKmYKpvlP39z38xk9vhJ+WJ3M60MhIRUzDVykirD5E7l1ZGImIKipGImIJiJCKmoBiJiCkoRiJiCoqRiJiCYiQipqAYiYgpKEYiYgqKkYiYgmIkIqagGImIKVQiRub98R4icvu7ZYx+/zOG9J31IlITKr1Nu3TpUk2MQ0TucJWKkWEYFBYWUlRUpBWSiFQro7Cw8J9WxW63Y7fbsdls2Gw2SktLsZWWUmqzOY6BHbVJRKqiwj/p0TAMDMPAYhjYLRZcAJsjRteoSCLyr6lQjAzDALu9LEjXQmQYGL+Pkd2uHInIv+SWMTIMoyw4hoEBWCwW7OVCpHtHIlIdKrVNg7JXG9mvBurmIVKgRKRyKrxNs1/dplFuy6ZVkYhUl0qvjBxRwvkFkQqTiFRFpX9v2s0CZObfBisi5lelX+KoAIlIddF37YuIKShGImIKipGImIJiJCKmoBiJiCkoRiJiCoqRiJiCYiQipqAYiYgpKEYiYgqKkYiYwv8DDQ36KY0iAVkAAAAASUVORK5CYII=)"></div>Tab / Links</a><a class="thumbnail" href="/wave/docs/examples/tab-delete"><div style="background-image:url(data:image/png;base64,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)"></div>Tabs / Navigation</a><a class="thumbnail" href="/wave/docs/examples/breadcrumbs"><div style="background-image:url(data:image/png;base64,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)"></div>Breadcrumbs</a><a class="thumbnail" href="/wave/docs/examples/header"><div style="background-image:url(/wave/assets/images/header-0cdf3777b66e47f9e5320eee81ac5e10.png)"></div>Header</a><a class="thumbnail" href="/wave/docs/examples/hash-routing"><div style="background-image:url(/wave/assets/images/hash-routing-816838345c1b3e01e3fe1664c336f3d6.png)"></div>Routing</a><a class="thumbnail" href="/wave/docs/examples/toolbar-routing"><div style="background-image:url(/wave/assets/images/toolbar-routing-84cf0d9860b9d575f5703ddf0e001bf7.png)"></div>Routing / Toolbar</a><a class="thumbnail" href="/wave/docs/examples/tab-routing"><div style="background-image:url(data:image/png;base64,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M1GbN21SYGB5J76uqPlUTf34n/9cd7ybNkXo8cefcELoigYNG+r333/X8ePHU3fjaZBZ17wStFeULFVSZ86ckZT4kHxoaDU99NBDOnHihLZu3arFixcpKioq2bsnS5a6+m+b67775HK5VOjBQs42l8ul3Pffr6ioKGdb4hIkz4ABANLP+AzYFTlz5lSdOnVVp05dxcbGaszoUerTp7e++nq58uTJo7Nnz6pAwYLJXlfwbwV19uxZr22WrBSvkdL2EgEBevTRR7V61So98cQTWr1qpUJCqii/n1+qx14iIECFChXS5k2b5PF4FB0drfIVKig4OERbtmzR802bauvWrerdu48kOeNt26Z1smffPB6PoqLOJruGlBirSZ09e1abNkWoYoXyqR7rldcVTOnfsuDfnP1XZowySmZd0+32/pH1cblkezzO9/Pnz9OsmTN1+vRpFS5cWH//+9+VO3fuZB9xcr2fmWvZuvo6liABABnFaIB5PB7t3btXhQsXVp48eZztuXLlUtdub+irr77Svn37VKlSJeXLl0+RkaeSnSMyMlJ58+ZN1zieadBAn82Zo46dOmn9+vUaMnTYzV90jaqhodq0KUK2bD355JPKkSOHgkOCtWDBfP380086d+6cQqokfqTClXt98823FBgYmOxc+fLnT9U18+TNo8KFC+u9995P01jz5cunvXuSPyN2OjJSkpx/T5flHTOSdCnJc3qZcc2MtGXLFo0dM0ZvvvmWGjZq5LybtmXLFhly/rp16ypbkhlZAABuldH1FMuy1KVLZ02elDwgfvwx8Z18V5bXKgcFac3q1V4P6sfHx2vlihUKCg5O1zjqPV1PkZGRmjx5ktxut6pVq5bmc4SGVtOOHTv0/fffO+9c/Mc/ysrj8WjGjBl6/PEnlP9yWOXPn18lAgK0b/8+lQgIcL4eKlxYBw4e9FpmvZFKlSrr1KlTypkrl9d5oqKjdeEGoRRUOUi7du1ylkyv+PKrL1WkSBEVLlxYUmIU/fbbb17HbNu+Ldn5LMtSfHz8Dcea2mtmpKNH/59y5sypZi+84MRXdHS0fj9yJEPOX6duXdWsWTNDzgUAuLcZnQGzLEsdXuug8ePH6cyZs6peo4bcbrd2/fKLli5donr166to0aKSpPbt2mvVypXq0vl1vfRSK1kul+bPm6vTp0/rtdc6pGsc+f38FBwc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)"></div>Routing / Tabs</a><a class="thumbnail" href="/wave/docs/examples/card-menu"><div style="background-image:url(/wave/assets/images/card-menu-db530edd23afd919e8bb15708a24c76b.png)"></div>Context Menu</a><a class="thumbnail" href="/wave/docs/examples/plot-point"><div style="background-image:url(/wave/assets/images/plot-point-ca45d9c0f59368e2e351f8bc69f5566f.png)"></div>Plot / Point</a><a class="thumbnail" href="/wave/docs/examples/plot-point-shapes"><div style="background-image:url(/wave/assets/images/plot-point-shapes-98b5ada97343dfb174c19df0f0ea7ea8.png)"></div>Plot / Point / Shapes</a><a class="thumbnail" href="/wave/docs/examples/plot-point-sizes"><div style="background-image:url(/wave/assets/images/plot-point-sizes-8591d0b3d70acfe4b28d08c74515ed4d.png)"></div>Plot / Point / Sizes</a><a class="thumbnail" href="/wave/docs/examples/plot-point-map"><div style="background-image:url(/wave/assets/images/plot-point-map-13e6e7b5d7bfc7c6337172bb86dc84e2.png)"></div>Plot / Point / Map</a><a class="thumbnail" href="/wave/docs/examples/plot-point-groups"><div style="background-image:url(/wave/assets/images/plot-point-groups-d949b54bdc3583a858a7cc8c46532c90.png)"></div>Plot / Point / Groups</a><a class="thumbnail" href="/wave/docs/examples/plot-point-annotation"><div style="background-image:url(/wave/assets/images/plot-point-annotation-394f235e137883e033b2cc056955e713.png)"></div>Plot / Point / Annotation</a><a class="thumbnail" href="/wave/docs/examples/plot-point-custom"><div style="background-image:url(/wave/assets/images/plot-point-custom-2a5eefc8951352109b57a03aa44baeb8.png)"></div>Plot / Point / Custom</a><a class="thumbnail" href="/wave/docs/examples/plot-interval"><div style="background-image:url(/wave/assets/images/plot-interval-95ba708d52bd4b0bda18da55cfd578e0.png)"></div>Plot / Interval</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-transpose"><div style="background-image:url(/wave/assets/images/plot-interval-transpose-d7705a1125bbded7646d335b2bfba02d.png)"></div>Plot / Interval / Transpose</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-groups"><div style="background-image:url(/wave/assets/images/plot-interval-groups-b096660ab331215122bb6771cda619ac.png)"></div>Plot / Interval / Groups</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-groups-transpose"><div style="background-image:url(/wave/assets/images/plot-interval-groups-transpose-7a36b34fbae40cd7d645e149db067bf2.png)"></div>Plot / Interval / Groups / Transpose</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-labels"><div style="background-image:url(/wave/assets/images/plot-interval-labels-bc80dada33a6a5f1a61854ef21caf76e.png)"></div>Plot / Interval / Labels</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-range"><div style="background-image:url(/wave/assets/images/plot-interval-range-38b09db44df660cf127c051bee921b70.png)"></div>Plot / Interval / Range</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-range-transpose"><div style="background-image:url(/wave/assets/images/plot-interval-range-transpose-ac0df7689c88cb6fe886aaed084918bf.png)"></div>Plot / Interval / Range / Transpose</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-stacked"><div style="background-image:url(/wave/assets/images/plot-interval-stacked-6a492804251cf9ef3fcd33cf721b725f.png)"></div>Plot / Interval / Stacked</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-stacked-transpose"><div style="background-image:url(/wave/assets/images/plot-interval-stacked-transpose-9f125bb40e6aea97cd6ad2b4e547a259.png)"></div>Plot / Interval / Stacked / Transpose</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-stacked-grouped"><div style="background-image:url(/wave/assets/images/plot-interval-stacked-grouped-678de98e675478e364cab127af4c07bb.png)"></div>Plot / Interval / Stacked / Grouped</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose"><div style="background-image:url(/wave/assets/images/plot-interval-stacked-grouped-transpose-2b181afc5e1a2626b7e700625c7f41b3.png)"></div>Plot / Interval / Stacked / Grouped / Transpose</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-polar"><div style="background-image:url(/wave/assets/images/plot-interval-polar-e54d13fed4e4ea004992a91a9e4644df.png)"></div>Plot / Interval / Polar</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-polar-stacked"><div style="background-image:url(/wave/assets/images/plot-interval-polar-stacked-dbb95e41cc47e31cb7614c6c9f3bf387.png)"></div>Plot / Interval / Polar / Stacked</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-theta"><div style="background-image:url(/wave/assets/images/plot-interval-theta-ecd6315a48713f45d162e64c4414325c.png)"></div>Plot / Interval / Theta</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-helix"><div style="background-image:url(/wave/assets/images/plot-interval-helix-b499f18c451e87aa39d64ca154a15bdf.png)"></div>Plot / Interval / Helix</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-annotation"><div style="background-image:url(/wave/assets/images/plot-interval-annotation-ad30e4c2b779c452d7ab7d805f037c43.png)"></div>Plot / Interval / Annotation</a><a class="thumbnail" href="/wave/docs/examples/plot-interval-annotation-transpose"><div style="background-image:url(/wave/assets/images/plot-interval-annotation-transpose-a0e697aba7f9fa2b783814edfb13d0be.png)"></div>Plot / Interval / Annotation / Transpose</a><a class="thumbnail" href="/wave/docs/examples/plot-line"><div style="background-image:url(/wave/assets/images/plot-line-47205e6d75190eb08bb6cecf3dfe347b.png)"></div>Plot / Line</a><a class="thumbnail" href="/wave/docs/examples/plot-line-groups"><div style="background-image:url(/wave/assets/images/plot-line-groups-b3aacba3e2a8fd2306aef09adcb88fea.png)"></div>Plot / Line / Groups</a><a class="thumbnail" href="/wave/docs/examples/plot-line-smooth"><div style="background-image:url(/wave/assets/images/plot-line-smooth-566975ab0a25c3e3ad7b3941ca441df6.png)"></div>Plot / Line / Smooth</a><a class="thumbnail" href="/wave/docs/examples/plot-step"><div style="background-image:url(/wave/assets/images/plot-step-8c593fd75d3829ee2e6928c3e3c32372.png)"></div>Plot / Line / Step</a><a class="thumbnail" href="/wave/docs/examples/plot-step-after"><div style="background-image:url(/wave/assets/images/plot-step-after-72cc87c6a29c712eb6728e9d6bd626ca.png)"></div>Plot / Line / Step / After</a><a class="thumbnail" href="/wave/docs/examples/plot-step-before"><div style="background-image:url(/wave/assets/images/plot-step-before-45d2a85b93deb34a9e029e0d1ac5e578.png)"></div>Plot / Line / Step / Before</a><a class="thumbnail" href="/wave/docs/examples/plot-line-labels"><div style="background-image:url(/wave/assets/images/plot-line-labels-f98b2fc53482efef18cf834fcd851704.png)"></div>Plot / Line / Labels</a><a class="thumbnail" href="/wave/docs/examples/plot-line-labels-stroked"><div style="background-image:url(/wave/assets/images/plot-line-labels-stroked-8f085e306871e3c87d798b4c4206fc11.png)"></div>Plot / Line / Labels/ Stroked</a><a class="thumbnail" href="/wave/docs/examples/plot-line-labels-no-overlap"><div style="background-image:url(/wave/assets/images/plot-line-labels-no-overlap-6597ed5a76ab4f19c1f7e189cbc21624.png)"></div>Plot / Line / Labels / Occlusion</a><a class="thumbnail" href="/wave/docs/examples/plot-line-annotation"><div style="background-image:url(/wave/assets/images/plot-line-annotation-0b3e87d958bdf0bdcfddc482ad9cf3c5.png)"></div>Plot / Line / Annotation</a><a class="thumbnail" href="/wave/docs/examples/plot-path"><div style="background-image:url(/wave/assets/images/plot-path-2737001d0f8727c8d62799faf298a88e.png)"></div>Plot / Path</a><a class="thumbnail" href="/wave/docs/examples/plot-path-point"><div style="background-image:url(/wave/assets/images/plot-path-point-7e7d80f97ee02c9ac8591676f931f173.png)"></div>Plot / Path / Point</a><a class="thumbnail" href="/wave/docs/examples/plot-path-smooth"><div style="background-image:url(/wave/assets/images/plot-path-smooth-d3dc4edb37522cdaf43f8da9ab425156.png)"></div>Plot / Path / Smooth</a><a class="thumbnail" href="/wave/docs/examples/plot-area"><div style="background-image:url(/wave/assets/images/plot-area-0a621df3247663494f8a594d65f0516d.png)"></div>Plot / Area</a><a class="thumbnail" href="/wave/docs/examples/plot-area-groups"><div style="background-image:url(/wave/assets/images/plot-area-groups-26a91066657837eeb3ddd3d83dafdc0a.png)"></div>Plot / Area / Groups</a><a class="thumbnail" href="/wave/docs/examples/plot-area-negative"><div style="background-image:url(/wave/assets/images/plot-area-negative-72b6ee9e1692572a50b4f9e5f88db0ce.png)"></div>Plot / Area / Negative</a><a class="thumbnail" href="/wave/docs/examples/plot-area-range"><div style="background-image:url(/wave/assets/images/plot-area-range-0663c734a05c77b333b1cfdca966324f.png)"></div>Plot / Area / Range</a><a class="thumbnail" href="/wave/docs/examples/plot-area-smooth"><div style="background-image:url(/wave/assets/images/plot-area-smooth-4826228f8423a45fda33727184111c06.png)"></div>Plot / Area / Smooth</a><a class="thumbnail" href="/wave/docs/examples/plot-area-stacked"><div style="background-image:url(/wave/assets/images/plot-area-stacked-5624332d0398dd3417cb40e6fd83272c.png)"></div>Plot / Area / Stacked</a><a class="thumbnail" href="/wave/docs/examples/plot-area-line"><div style="background-image:url(/wave/assets/images/plot-area-line-fbcaba9e073f71a07b202834d2992b49.png)"></div>Plot / Area + Line</a><a class="thumbnail" href="/wave/docs/examples/plot-area-line-smooth"><div style="background-image:url(/wave/assets/images/plot-area-line-smooth-215c412ff603d4f09d5e46af9dc84085.png)"></div>Plot / Area + Line / Smooth</a><a class="thumbnail" href="/wave/docs/examples/plot-area-line-groups"><div style="background-image:url(/wave/assets/images/plot-area-line-groups-fab3e454a09ab17afeb08c5bbe20a364.png)"></div>Plot / Area + Line / Groups</a><a class="thumbnail" href="/wave/docs/examples/plot-polygon"><div style="background-image:url(/wave/assets/images/plot-polygon-cef10aff7abe01503bac3e360a6ece1c.png)"></div>Plot / Polygon</a><a class="thumbnail" href="/wave/docs/examples/plot-histogram"><div style="background-image:url(data:image/png;base64,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)"></div>Plot / Histogram</a><a class="thumbnail" href="/wave/docs/examples/plot-axis-title"><div style="background-image:url(/wave/assets/images/plot-axis-title-f0d1c16575277e024054fbb19e5af49a.png)"></div>Plot / Axis Titles</a><a class="thumbnail" href="/wave/docs/examples/plot-form"><div style="background-image:url(/wave/assets/images/plot-form-7b7c198bf0e0f55d1d9389b4f4dcff1a.png)"></div>Plot / Form</a><a class="thumbnail" href="/wave/docs/examples/plot-vegalite"><div style="background-image:url(data:image/png;base64,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)"></div>Plot / Vega-lite</a><a class="thumbnail" href="/wave/docs/examples/plot-vegalite-update"><div style="background-image:url(data:image/png;base64,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)"></div>Plot / Vega-lite / Update</a><a class="thumbnail" href="/wave/docs/examples/plot-vegalite-form"><div style="background-image:url(/wave/assets/images/plot-vegalite-form-0d561c88fa3bbc9f612e304db9a412b4.png)"></div>Plot / Vega-lite / Form</a><a class="thumbnail" href="/wave/docs/examples/plot-altair"><div style="background-image:url(/wave/assets/images/plot-altair-6b648257bc043077af771b8bbdf91735.png)"></div>Plot / Altair</a><a class="thumbnail" href="/wave/docs/examples/plot-bokeh"><div style="background-image:url(/wave/assets/images/plot-bokeh-0e17ac43f3cdff49e9cb5ff21d8c8214.png)"></div>Plot / Bokeh</a><a class="thumbnail" href="/wave/docs/examples/plot-matplotlib"><div style="background-image:url(/wave/assets/images/plot-matplotlib-14dd0da4129dea8f5aae83573ba31241.png)"></div>Plot / Matplotlib</a><a class="thumbnail" href="/wave/docs/examples/plot-plotly"><div style="background-image:url(/wave/assets/images/plot-plotly-3b71042a87f940cd5002711c65e34e54.png)"></div>Plot / Plotly</a><a class="thumbnail" href="/wave/docs/examples/plot-d3"><div style="background-image:url(/wave/assets/images/plot-d3-27f0867826e9547bb4bb23e79517892b.png)"></div>Plot / D3.js</a><a class="thumbnail" href="/wave/docs/examples/pixel-art"><div style="background-image:url(data:image/png;base64,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)"></div>Pixel Art</a><a class="thumbnail" href="/wave/docs/examples/upload"><div style="background-image:url(data:image/png;base64,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)"></div>Uploads</a><a class="thumbnail" href="/wave/docs/examples/upload-async"><div style="background-image:url(data:image/png;base64,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)"></div>Uploads / Async</a><a class="thumbnail" href="/wave/docs/examples/upload-ui"><div style="background-image:url(/wave/assets/images/upload-ui-ce3af4e53ce2d7a546aa933667f7758a.png)"></div>Uploads / UI</a><a class="thumbnail" href="/wave/docs/examples/upload-download"><div style="background-image:url(/wave/assets/images/upload-download-ce3af4e53ce2d7a546aa933667f7758a.png)"></div>Uploads / Download</a><a class="thumbnail" href="/wave/docs/examples/meta-title"><div style="background-image:url(data:image/png;base64,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)"></div>Meta / Title</a><a class="thumbnail" href="/wave/docs/examples/meta-icon"><div style="background-image:url(data:image/png;base64,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)"></div>Meta / Icon</a><a class="thumbnail" href="/wave/docs/examples/meta-notification"><div style="background-image:url(/wave/assets/images/meta-notification-fbc7ef4c16cebfc522a564d72cb6953d.png)"></div>Meta / Notification</a><a class="thumbnail" href="/wave/docs/examples/meta-refresh"><div style="background-image:url(data:image/png;base64,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)"></div>Meta / Refresh</a><a class="thumbnail" href="/wave/docs/examples/meta-redirect"><div style="background-image:url(/wave/assets/images/meta-redirect-ce65a2bb8925d26db3db00327634b324.png)"></div>Meta / Redirect</a><a class="thumbnail" href="/wave/docs/examples/counter-global"><div style="background-image:url(data:image/png;base64,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)"></div>Mode / Broadcast / Global</a><a class="thumbnail" href="/wave/docs/examples/counter-broadcast"><div style="background-image:url(data:image/png;base64,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)"></div>Mode / Broadcast</a><a class="thumbnail" href="/wave/docs/examples/counter-multicast"><div style="background-image:url(data:image/png;base64,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)"></div>Mode / Multicast</a><a class="thumbnail" href="/wave/docs/examples/counter-unicast"><div style="background-image:url(data:image/png;base64,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)"></div>Mode / Unicast</a><a class="thumbnail" href="/wave/docs/examples/background"><div style="background-image:url(data:image/png;base64,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)"></div>Background Tasks</a><a class="thumbnail" href="/wave/docs/examples/background-executor"><div style="background-image:url(data:image/png;base64,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)"></div>Background Tasks / Executor</a><a class="thumbnail" href="/wave/docs/examples/site-async"><div style="background-image:url(data:image/png;base64,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)"></div>Site / Async</a><a class="thumbnail" href="/wave/docs/examples/graphics-primitives"><div style="background-image:url(/wave/assets/images/graphics-primitives-069da2917a0f9226163992fa997d7064.png)"></div>Graphics / Primitives</a><a class="thumbnail" href="/wave/docs/examples/graphics-spline"><div style="background-image:url(/wave/assets/images/graphics-spline-76e8a919798c7e38711618ef9b414f78.png)"></div>Graphics / Spline</a><a class="thumbnail" href="/wave/docs/examples/graphics-clock"><div style="background-image:url(/wave/assets/images/graphics-clock-fb82cce5ac3fca365e9cd43ba116c948.png)"></div>Graphics / Clock</a><a class="thumbnail" href="/wave/docs/examples/graphics-path"><div style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARUAAAD8CAYAAABZ0jAcAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAyOjA3OjQ5IFBNIFBEVCumBS8AAANUSURBVHic7daxDcJQFARBY1GxY4ggpmQ/imClL6yZCi5a3W1mZgOI7KsHANciKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAKn76gFXcL4/2/n6rJ7Bj/bnse2PY/WMv+epAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAqdvMzOoRwHV4KkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVKiAqREBUiJCpASFSAlKkBKVICUqAApUQFSogKkRAVIiQqQEhUgJSpASlSAlKgAKVEBUqICpEQFSIkKkBIVICUqQEpUgJSoAClRAVJfkOkP8d6gjyUAAAAASUVORK5CYII=)"></div>Graphics / Path</a><a class="thumbnail" href="/wave/docs/examples/graphics-turtle"><div style="background-image:url(/wave/assets/images/graphics-turtle-bf00fb61c0569a86ca32908a60485b91.png)"></div>Graphics / Turtle</a><a class="thumbnail" href="/wave/docs/examples/graphics-hilbert"><div style="background-image:url(/wave/assets/images/graphics-hilbert-0b77a235731e83c53e6167b922a11f1c.png)"></div>Graphics / Hilbert</a><a class="thumbnail" href="/wave/docs/examples/glider-gun"><div style="background-image:url(/wave/assets/images/glider-gun-8acc444425a295f814222e258d6ca3e3.png)"></div>Graphics / Glider Gun</a></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/index.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/enterprise/developer-guide"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Developer Guide</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/hello-world"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Hello World! »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/bf614533.e9f653e2.js"></script>
 </body>
 </html>
\ 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 7ecec8dad0..48b90a0546 100644
--- a/docs/docs/examples/issue-tracker/index.html
+++ b/docs/docs/examples/issue-tracker/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Issue Tracker | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Issue Tracker | H2O Wave"><meta data-react-helmet="true" name="description" content="Implement a simple issue tracker using a table to create master-detail views."><meta data-react-helmet="true" property="og:description" content="Implement a simple issue tracker using a table to create master-detail views."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/issue-tracker"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/issue-tracker"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/549ea605.398da942.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/549ea605.33db492b.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Issue Tracker</h1></header><div class="markdown"><p>Implement a simple issue tracker using a table to create master-detail views.</p><div class="cover" style="background-image:url(/wave/assets/images/issue-tracker-f8f5460fa5058fa880076f1b4d032c9f.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Issue Tracker</h1></header><div class="markdown"><p>Implement a simple issue tracker using a table to create master-detail views.</p><div class="cover" style="background-image:url(/wave/assets/images/issue-tracker-f8f5460fa5058fa880076f1b4d032c9f.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">_id </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -47,18 +47,16 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">reopen_issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> issue_id </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        issue </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> issue_lookup</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">issue_id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">status </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Open&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> show_issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">edit_multiple</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> edit_multiple</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">reopen_issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> reopen_issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">close_issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> close_issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">reopen_issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> reopen_issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">close_issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> close_issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># An issue was clicked on</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> show_issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> show_issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/issue-tracker.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/wizard"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Wizard</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/dashboard"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Dashboard »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/549ea605.398da942.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">edit_multiple</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> edit_multiple</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">reopen_issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> reopen_issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">close_issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> close_issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">reopen_issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> reopen_issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">close_issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> close_issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># An issue was clicked on</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> show_issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> show_issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/issue-tracker.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/wizard"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Wizard</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/dashboard"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Dashboard »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/549ea605.33db492b.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/label/index.html b/docs/docs/examples/label/index.html
index 8674e69ebb..6e81014bf5 100644
--- a/docs/docs/examples/label/index.html
+++ b/docs/docs/examples/label/index.html
@@ -5,31 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Label | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Label | H2O Wave"><meta data-react-helmet="true" name="description" content="Use labels to give a name to a component or a group of components in a form."><meta data-react-helmet="true" property="og:description" content="Use labels to give a name to a component or a group of components in a form."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/label"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/label"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/10172759.aa8c1123.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/10172759.8473a602.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Label</h1></header><div class="markdown"><p>Use labels to give a name to a component or a group of components in a form.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Label</h1></header><div class="markdown"><p>Use labels to give a name to a component or a group of components in a form.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 -1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">label</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Standard Label&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">label</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Required Label&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> required</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">label</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Disabled Label&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/label.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/text-sizes"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Text / Sizes</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/link"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Link »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/10172759.aa8c1123.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/10172759.8473a602.js"></script>
 </body>
 </html>
\ 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 8ce8219681..79dcc1bc5f 100644
--- a/docs/docs/examples/layout-size/index.html
+++ b/docs/docs/examples/layout-size/index.html
@@ -5,35 +5,35 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Layout / Size | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Layout / Size | H2O Wave"><meta data-react-helmet="true" name="description" content="How to adjust the size of cards on a page."><meta data-react-helmet="true" property="og:description" content="How to adjust the size of cards on a page."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/layout-size"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/layout-size"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/f3473c5b.a1665bdc.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/f3473c5b.ff1378dc.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Layout / Size</h1></header><div class="markdown"><p>How to adjust the size of cards on a page.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Layout / Size</h1></header><div class="markdown"><p>How to adjust the size of cards on a page.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Every page has a grid system in place.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># The grid has 12 columns and 10 rows.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># A column is 134 pixels wide.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># A row is 76 pixels high.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># The gap between rows and columns is set to 15 pixels.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Cards have a `box` attribute that specifies its column, row, width and height.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># box = &#x27;column row width height&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># They indicate the 1-based column/row to position the top-left corner of the card.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># In this example, we place multiple cards on a page to demonstrate their `box` values.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">boxes </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2 1 2 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;4 1 3 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;7 1 4 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;11 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 2 1 9&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2 2 1 4&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;3 2 1 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2 6 1 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;3 4 1 7&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;4 2 7 9&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;11 9 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;11 3 2 6&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> box </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> boxes</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;card_</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">box</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">replace</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation interpolation string" style="color:rgb(195, 232, 141)">&quot; &quot;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token string-interpolation interpolation"> </span><span class="token string-interpolation interpolation string" style="color:rgb(195, 232, 141)">&quot;_&quot;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">box</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">box</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/layout-size.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/layout"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Layout / Position</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/form"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/f3473c5b.a1665bdc.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/f3473c5b.ff1378dc.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/layout/index.html b/docs/docs/examples/layout/index.html
index 0ba44701eb..8499b018d3 100644
--- a/docs/docs/examples/layout/index.html
+++ b/docs/docs/examples/layout/index.html
@@ -5,35 +5,35 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Layout / Position | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Layout / Position | H2O Wave"><meta data-react-helmet="true" name="description" content="How to adjust the position of cards on a page."><meta data-react-helmet="true" property="og:description" content="How to adjust the position of cards on a page."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/layout"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/layout"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/dc705eb8.7f4a21ae.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/dc705eb8.0944bfc8.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Layout / Position</h1></header><div class="markdown"><p>How to adjust the position of cards on a page.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Layout / Position</h1></header><div class="markdown"><p>How to adjust the position of cards on a page.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Every page has a grid system in place.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># The grid has 12 columns and 10 rows.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># A column is 134 pixels wide.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># A row is 76 pixels high.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># The gap between rows and columns is set to 15 pixels.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Cards have a `box` attribute that specifies its column, row, width and height.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># box = &#x27;column row width height&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># They indicate the 1-based column/row to position the top-left corner of the card.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># In this example, we place a 1x1 card in each column/row on a page</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># to demonstrate their column/row values.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">columns </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">12</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">rows </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> column </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> columns </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> row </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        box </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">column</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> </span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">row</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> 1 1&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;card_</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">column</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">_</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">row</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">box</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">box</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/layout.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/stat-tall-series-interval"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Stat / Series / Tall / Interval</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/layout-size"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Layout / Size »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/dc705eb8.7f4a21ae.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/dc705eb8.0944bfc8.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/link/index.html b/docs/docs/examples/link/index.html
index b2d48b9cc3..64ad65aac5 100644
--- a/docs/docs/examples/link/index.html
+++ b/docs/docs/examples/link/index.html
@@ -5,31 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Link | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Link | H2O Wave"><meta data-react-helmet="true" name="description" content="Use links to allow navigation to internal and external URLs."><meta data-react-helmet="true" property="og:description" content="Use links to allow navigation to internal and external URLs."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/link"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/link"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/ecdac497.8252c18f.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/ecdac497.e79d40df.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Link</h1></header><div class="markdown"><p>Use links to allow navigation to internal and external URLs.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Link</h1></header><div class="markdown"><p>Use links to allow navigation to internal and external URLs.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 -1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">link</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Internal link&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> path</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/starred&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">link</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Internal link, disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> path</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/starred&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">link</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;External link&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> path</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;https://h2o.ai&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">link</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;External link, disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> path</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;https://h2o.ai&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/link.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/label"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Label</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/progress"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Progress »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/ecdac497.8252c18f.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/ecdac497.e79d40df.js"></script>
 </body>
 </html>
\ 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 40fc77f78c..295a3c0b8f 100644
--- a/docs/docs/examples/markdown-data/index.html
+++ b/docs/docs/examples/markdown-data/index.html
@@ -5,35 +5,35 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Markdown / Data | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Markdown / Data | H2O Wave"><meta data-react-helmet="true" name="description" content="Display dynamic formatted content using markdown."><meta data-react-helmet="true" property="og:description" content="Display dynamic formatted content using markdown."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/markdown-data"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/markdown-data"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/b8435c12.1840dde3.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/b8435c12.a4ac6d35.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Markdown / Data</h1></header><div class="markdown"><p>Display dynamic formatted content using markdown.</p><div class="cover" style="background-image:url(/wave/assets/images/markdown-data-34fd56cbb56e79c00a4539f5bfab1e3b.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Markdown / Data</h1></header><div class="markdown"><p>Display dynamic formatted content using markdown.</p><div class="cover" style="background-image:url(/wave/assets/images/markdown-data-34fd56cbb56e79c00a4539f5bfab1e3b.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">beer_verse </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">{{before}} bottles of beer on the wall, {{before}} bottles of beer.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="display:inline-block;color:rgb(195, 232, 141)">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">Take one down, pass it around, {{after}} bottles of beer on the wall...</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">beer_card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;99 Bottles of Beer&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=&#x27;</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> beer_verse</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Make the verse a template expression by prefixing a &#x27;=&#x27;.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">before</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;99&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> after</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;98&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">98</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    beer_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">before </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">i</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    beer_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">after </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">i </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/markdown-data.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/markdown"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Markdown</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/markup"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Markup »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/b8435c12.1840dde3.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/b8435c12.a4ac6d35.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/markdown/index.html b/docs/docs/examples/markdown/index.html
index def42ffcaf..ed5d4baf14 100644
--- a/docs/docs/examples/markdown/index.html
+++ b/docs/docs/examples/markdown/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Markdown | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Markdown | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a markdown card to display formatted content using markdown."><meta data-react-helmet="true" property="og:description" content="Use a markdown card to display formatted content using markdown."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/markdown"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/markdown"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/997fea1d.fe5a6ff2.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/997fea1d.d3b55233.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Markdown</h1></header><div class="markdown"><p>Use a markdown card to display formatted content using markdown.</p><div class="cover" style="background-image:url(/wave/assets/images/markdown-3164a3fca5f8ccd5e61dbb00656dc796.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Markdown</h1></header><div class="markdown"><p>Use a markdown card to display formatted content using markdown.</p><div class="cover" style="background-image:url(/wave/assets/images/markdown-3164a3fca5f8ccd5e61dbb00656dc796.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">sample_markdown </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;=</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">The **quick** _brown_ fox jumped over the lazy dog.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="display:inline-block;color:rgb(195, 232, 141)">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">Block quote:</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="display:inline-block;color:rgb(195, 232, 141)">
@@ -33,15 +33,15 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">| Column 1 | Column 2 | Column 3 |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">| -------- | -------- | -------- |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">| Item 1   | Item 2   | Item 3   |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">| Item 1   | Item 2   | Item 3   |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">| Item 1   | Item 2   | Item 3   |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="display:inline-block;color:rgb(195, 232, 141)">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 3 -1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;I was made using markdown!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">sample_markdown</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/markdown.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/template-data"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Template / Data</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/markdown-data"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Markdown / Data »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/997fea1d.fe5a6ff2.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/997fea1d.d3b55233.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/markup/index.html b/docs/docs/examples/markup/index.html
index 6d575ebf28..294b9f19bb 100644
--- a/docs/docs/examples/markup/index.html
+++ b/docs/docs/examples/markup/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Markup | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Markup | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a markup card to display formatted content using HTML."><meta data-react-helmet="true" property="og:description" content="Use a markup card to display formatted content using HTML."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/markup"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/markup"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/6d36af6b.02a6634d.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/6d36af6b.55a53883.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Markup</h1></header><div class="markdown"><p>Use a markup card to display formatted content using HTML.</p><div class="cover" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATsAAADHCAYAAABm+/QRAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjIwOjQ2IFBNIFBEVEvnuUQAABRTSURBVHic7d15eFTlocfx75ksQCAXCMEACYgs0ltqLyGKBFnlAgYhQauyyr4JBBSQRYW6S8KmNUGxFQgqYBUURJACsrXKfhVJKLRSMLKZNGFxohAyc/+ITDOEQCaZJDrv7/M8eSRnzpzzTp7H73POzJnzWna73YmIiI+zVfQARETKg2InIkZQ7ETECIqdiBhBsRMRIyh2ImIExU5EjKDYiYgRFDsRMYJiJyJGUOxExAiKnYgYwb+0G3A6dR8BEfEey7LKZLslil1RgVP4RKQkCgauYEe8GT6PYldwEIGBgfj7+5dZhUXETE6nk8uXL3Pp0iVXc7zRmWK/Z3dlp06nk8DAQAICAhQ6EfE6y7IICAggMDDQrTul5dEHFE6nE6fTib9/qd/qExG5Ln9/f1dzvKFYsXPt7Kcd64hORMqaZVn57fHS0Z1Hp7FOL+xQRKS4vNmdEp3GioiUh3I9jS34BqFiJyLl6erulKY/Hn+DQrETkfLizd7o62IiYgTPPo0VEakg5fZp7E+7K9XOREQ8V47X2YmI/NIpdiJiBMVORIyg2ImIERQ7ETGCYiciRlDsRMQIip2IGKHcY5eenk5Uy0jatWvLDz/84PbYyZMnuT2qJVEtI8nLyyvvoYmID6uwI7scu50Nn3zituyDD1bpq2kiUiYqLHYBAQGsWrXS9XteXh5rVq8udMv3DRs2cF+vONq1vYv4cWM5ceIEAGlpaUS1jGTJksXcf18v2kS35pmnn8bhcADQ9q42JMya5drOoIEDGTlieDm8MhH5Oaqw2HXu3JnU1FQOHz4MwPbt28jMzKRz586udQ4cOMCTT0znt7/9LU/NmElmZiaPPz7ZFTSA1R9+yNChw+jc+X9Zs2Z1oaNFERGowNjd2bo19erVcx3drVq5ksjIltzcsKFrnTVrVhMaGsrTzzxLt27deHzKVA7//e+kpqa61uk/4GF69OzJ9CeeAOBf//pXub4OEfllqLDYWVjExsaxft06jh49ys6dO+l1331u65w8eZKMjAzatb2Ltne1IX7cWADOnDnjWqdGjRoABAUFAeiDDRG5pgqdEzE2Lo433ljI5MmTCAoKokuXLixZstj1eJ2wOgAsW74Cy7JwOBxYlkVoaCjHjh277rb9/PzIybG7fs/IyCAiIrxMXoeI/PxV6HV2YWFhREdHc/zYMe6JiaFSpUpuj9/bowcAC19/jSNHjvDaggX07dObCxcu3HDbjRo1YvPmzbz77gqee/YZsrOzyuQ1iMgvQ4VfVHzl1PW+q05hAaKionj2uedIS0tjxlNP8k36NyTOnkNYWNgNt/v4lKmEhobyh1dewT8ggBYtWnh97CLyy2HZ7fbrXthWcHYfhyOPvDwHISEh5TU+ETFYVlYWfn42bDY/LMty/ZREhR/ZiYiUB8VORIyg2ImIERQ7ETGCYiciRlDsRMQIip2IGEGxExEjKHYiYgTFTkSMoNiJiBEUOxExgmInIkZQ7ETECIqdiBhBsRMRIyh2ImIExU5EjKDYiYgRFDsRMYJiJyJGUOxExAiKnYgYwWdjd/HiRebOmcPtUS2ZP3+ex88/cuQIkyY+RqeOHYhu3Zq+fXrz/nvv4XRed5pdEfmZ8q/oAZSF1NRUZs54isuXLxMcHOzx8w8fPszQIYNp3rw5EyY8So0aNdi/fz+JiQmcPHmS8RMmlMGoRaQs+WTs5s2dS1TU7Tw2cSJ9ej/k8fPffustmjRpyusL38Bmyz/47dipE7VCa7EgOZmRo0ZRuXJlbw9bRMqQT8ZuxsyZNGzYsMTPP3f+HKG1Q12hu6Jfv/706NGTwMBAABYkJ7N3315GjRrNrJde5PTp0zRs2JBRo0bTsVMn1/MuX77MksWLWbd+HadOnqJ27drE9YpjyJChrn0MHTqEyMhILl28xJo1q7H5+fHAAw8wePAQEhMT2LplC4GBgcTGxjEuPh7Lskr8+kRM5JPv2ZUmdADt2rZjx/btrFi+nEuXLrmWBwQEUKtWLbcIpqen88rL85k6dRor3v0z98TEMGXK42zfvs21TmJCAosXL+L+++9nwWsLGDhoEH/64594770/u+33ozVrCAgIYOlbbzNq5CgWvfkm/fv1pXGjxixd+hZjxoxl6dIU1q9fV6rXJ2IinzyyK60HHnyQ8xfOk5ycRHJyEq1ataJd+w507dKFoKpV3dbN+ve/SUpKplmzZgAMGjSY7777jqSkJNq37wBAXK9edL+3Oy1aRAIQGdmSrw58ybatW+ndu49rWw1vucX1fuDNN9/M2rUfUblyFQYOGpS/rGFDNm78C/v27aN793vL/O8g4kt88siutCzLYtiw4fxl4yZmzJxJ5SpVmDtnNj179mDXzp1u64aF1XGF7opOHTvx9T//SVZWFgDNmzenRYtIzp07xxdf/B+frF/PoUOHuHDhgtvzmjZt6vZ7cHAwderWcVtWvXoNzp49662XKmIMHdldR5UqVejatRtdu3YjJyeHhFkvMXnyJNZ+vI7q1asDUL36fxV6Xo2aNQA4d+4cISEh7N2zh3nz5nL48GHCwsKo36ABlSpVKnQZS7Hfh9PlLyIe05HdVRwOB2lpaZw7d85teVBQEOPix5OTk8Phw4ddyzMyMgpt4/Sp0wBUr14du93OhAnjadbsV2zctJl16z9h4cI3iIxsWbYvRETcGBm73NzcIh+zLIuxY8fwh1deLvTY/v37AahT5z+nltnZ2ezatcttvbVr19K4SRNCQkLIzMjgxx9/5MGHHiIkJAQAp9PJV18d8MZLEZFiMu409vczZ7B161beX7mK2rVrF3rcsixGjhjJnDmzycrKpkPHjvj7+5N68CAffvgBMd2706BBA9f6oaGhJCTMYsCAAdSrW48tWz5l06aNzJmb/62N8IgIwsLCePnl+QwaNBjLslj94Qekp6e7RVNEypZxsatatRrVqlUjICCgyHX69utHzZo1WbFiOXPnzCYvL4+I+vV55JEx9Ovf323dkJAQpj/xJM8+8zQnTpygfoMGJCTOpmPHjgD4+/vz6qtJJCQmMHnSJGrWrElsXCx16tRl3769ZflSRaQAy263X/fdbqfT6fpxOPLIy3O4TsdMtyA5mR07trN8xbsVPRQRn5SVlYWfnw2bzQ/Lslw/JWHke3YiYh7FTkSMoNNYEfnZ0mmsiIiHFDsRMYJiJyJGUOxExAg+Fbvc3FwWJCfTPSaG6NatGdC/Hzt2bPd4Oy++8AJ9+/Qu8vE7bo9i2bJ3SjNUESlnPhW7559/jhUrljNs+DBemjWLxk2aMPGxxwrdlklEzOMzXxfLzMzk47VrSZw9m7vv7gxAx44dybHn8M47b3Nn69YVPEIRqUg+c2TncDgY/cgj3Hmne9TCI8LL/GaXWVlZPPvMM67T54cH9Gfz5s2ux/Py8ohqGckn69czfnw8baJb07PHvWzauJFjx44xcuQI2kS3Ji62Jxs2bCjTsYqYymdid9NNNzF8+AiqFrhtusPhYOfnn/OrX/23x9tzOp1cunTpmj8FXb58mdGjR7F3717i4+NZ8NoCIiNbMm3qFI4cOeK2blLSq8TcE8Oy5StoGRXFjBlPMW3qFPr06cOy5SuIbtOGmTOe4sSJb0v2RxCRIvnMaey1LF2awvHj35A4e47Hz/3HP/5BdOs7b7ieZVnEx8fTuHET6tWrB+TPMfHpp5vZsWM7t956q2vd2Ng4Yrp3B2DqlKms/egjOnTs6DrtnjJlKqs//JADXx4gPDzC4zGLSNF8NnZ/3bGD5KQknnxqhtv954qrQYMGPPvc89d8bOiQwa5/+/n50a5dewBOnTpFeno6336bztmzZwvPMXHrf+aYCKpaFZvNRt06dV3LbDYb1YKDNceESBnwydgdPPgV06ZN5eGHB9KrV68SbaNy5crcdtttxVr33XdXkLJkCZmZmYSHh9OoUSOqVatWeI4JivedPieaY0LE23wudsePH2fC+PHcfffdxI8fX+b727VrF4kJCUybNp2esbFUrlwZgH79+pb5vkWk+HzmAwrIv/xk3Ngx/Oa22/j9088UeXeE681B4alvv02nSpUqPPjQQ67QnTt3jm+OH/faPkSk9HzmyM5utxM/bizff/89MffEsGO7+zcn2nfogM1mu+EcFJ5q8T8tuHjxIi+9+AJdunTl7NmzpKQswd/fZ/60Ij7BZ/6P3L9/n+tSjyeffKLQ4zv++jeCgoKKNQeFJxo3aUJCYiKvLVjAmjVrqF+/PqNGP8LiRW96Zfsi4h26eaeI/Gzp5p0iIh5S7ETECIqdiBhBsRMRIyh2ImIExU5EjKDYiYgRfOaiYoAcu52FCxeyceNGsrL+TXh4OH379uOBBx/0aDsvvvACK1e+f83HJk2eTL9+/b0xXBEpRz4TO6fTSXx8PN+kf8PQIUMJjwhnz+49zJr1EoDHwQsPj2Da9OmFlt9yyy1eGa+IlC+fiV1aaippaaksSVlKs2bNAGjfvgN2u52VK9/3OHZVqwbRpk2bshiqiFQAn4ld89/8hs937iq0vEpQlRJ/veRGvv/+e+bPm8uWLVvIzc2lZ89Y7mrblvHx49i9Zy9+fn4AfP3118ybN5cDX35JUFAQo0c/wqlTp9i7by+LFi0G4OLFiyQnJbFhwydcuHCBRo0aMeHRR7njjlZlMnYR0/hM7ArKzc3l/PnzbN+2jQ9WrWLK1Gkeb+PKHBRXCwwMBPLnt4gfN5bMzEwmTpxESK1arFm9mqRX/+C2fkZGBsOHD6Np06Y8/8KL5ObmsnjRIvLyLhNUYL6MxMQEPvvb35g4aTI33VSbTRs3Mj4+nvdXriI8PNzj8YuIO5+M3dgxj7Bv3z4AxowdW6K7FRc1B8XWbdsJDg5m27atHDx4kD+/977rfbzo6GhGjhjutv6SJYsJrlaNpKRkVyhb3XEHPXv2oHGTJq719u/bR2xsHN26dQPy57GIjm5DzRo1PB67iBTmk7GbNv0JsrOz+fKLL1i8ZDE5OTnEx3t21+Ki5qC4MnvZ7l27+fWvm7t9YGFZFl27dmP//v2uZXt276ZLl66u0AH8V/XqtI6OJiMjw7WsRYtIVq58n5BaIbRr15569erRtl07j8YsIkXzydg1atQIgKioKOo3qM8T06fzu9894Jr9qzhuNAdFVnYWYWE3FVoeWjvUfb2sLG661nqhoW6xmzZ9OrVCa7E0JYXEhARuvvlm+vTty0MP9S72mEWkaD5zUXFGRgZHjx4ttLxlyygcDofXb5MeHBxMdnZ2oeVns88Wb72rZhCrVKkS48bF8/G69Xy09mO633sviQkJbpNti0jJ+UzsPv10M3379ObMmTNuy/fs3g1ARP36rmXemIMiMjKSr776ilOnTrktvzpOkZEt2bxpEw6Hw7UsJyeHnZ9/7vr90qVLvPPO23z7bf7k2PXq1WP48BHUrVuXv//9UKnHKiI+dBrbvfu9pCxJYfCggQwcOIj69euTlpbGm2/+ibi4XkRE5E86Xdw5KHJycti1q/ClLOHh4URERNClS1dSUlIYN3YMo0aPpmbNmnyyfj0nT55wW3/wkCH069uHRx+dQJ8+fbl8OZeUJSlUr17dtU5gYCBrP/qI9evWMWr0aIKCqrJp40ZOnz6ta/1EvMSnbst+5swZFixI5rPPPuPC+fPUCw+nV1wv+g8Y4LrmLTEhgW3btvLOsuXUKOKTzut9XWzYsOGMGTsWgOzsbObOncNfd+wgLy+PmJju3NHqDqZNncqevfuw2fIPnA8dOsT8+fNIPXiQoKpVGTliJMe/Oc6htEO8uWgRAN999x3z5s5l9+5d/PDDjzRt2oThI0bQvn0Hb/+ZRH4xvHlbdp+KXXnLsdvdrpUDWL5sGW/88Q22bNl63fUmTZqIzbIxe86c8hiqyC+SN2PnM6ex5e3s2bPcf18v2nfoQMw9MVSqXIlDaYd4/fXXuO/++13r7dmzm4mPPcbDDw+k1Z2tyM3NZcf2HWzbupX5L79cga9AxCw6siuF1NRUXn9tAV98+SWXLl4kIiKCnj1jGThokOsUFmDDhg0sTUnh6NGvsdlsNG3alEGDB9Op090VOHqRnz+dxoqIETSVooiIhxQ7ETGCYiciRlDsRMQIip2IGEGxExEjKHYiYgTFTkSMoNiJiBEUOxExgmInIkZQ7ETECIqdiBhBsRMRIyh2ImIExU5EjKDYiYgRFDsRMYJiJyJGUOxExAiKnYgYQbETESModiJiBMVORIyg2ImIERQ7ETGCYiciRlDsRMQIip2IGEGxExEjKHYiYgTFTkSMoNiJiBEUOxExgmInIkZQ7ETECIqdiBhBsRMRIyh2ImIExU5EjKDYiYgRFDsRMYJiJyJGUOxExAiKnYgYQbETESModiJiBMVORIyg2ImIERQ7ETGCYiciRlDsRMQIip2IGEGxExEjKHYiYgQPY2eVzShERIrkne4UK3aW5b4zp9PplZ2LiBTl6s5c3SFPleg09scffyzVTkVEbsTbnfE4dpZlYbfbycnJ0RGeiHid0+kkJycHu91e6qO5giy73X7DYjmdTpxOJw6HA4fDQV5eHo68PPIcDtdj4ETtE5GSyG+ahWXl//jZbNj8/PDz88Nms2Gz2VyPlZS/ZwPK35nNsnDabPgBDlfsrlDxRMQT/wnYlb5YNlv+f0sZuIKKHTvLssDpzN/5ldBZFtbVsXM6lTsRKZb8Azr32BUMnmVZWJT+wwkoZuwsy8oP2k87ttlsOAuETu/diYg3WAWO5lxHdT+FrrTB8/g0FvJr7PwpgEWHTgEUkeu5drxcocv/pWJOY50/ncZS4JRWR3Ui4k3WNY7kyu009uoduqJ31SAUPhEpiaJi5s1LTzyK3bUGUDBw3hyYiJiprDpSotgVpMCJyC+B7noiIkZQ7ETECIqdiBhBsRMRIyh2ImIExU5EjKDYiYgRFDsRMcL/AwP/9A/0/NwnAAAAAElFTkSuQmCC)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Markup</h1></header><div class="markdown"><p>Use a markup card to display formatted content using HTML.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">menu </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;ol&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">    &lt;li&gt;Spam&lt;/li&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">    &lt;li&gt;Ham&lt;/li&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">    &lt;li&gt;Eggs&lt;/li&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;/ol&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markup_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Menu&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">menu</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/markup.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/markdown-data"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Markdown / Data</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/nav"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Nav »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/6d36af6b.02a6634d.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/6d36af6b.55a53883.js"></script>
 </body>
 </html>
\ 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 60ab3ded31..4620ebfbcc 100644
--- a/docs/docs/examples/message-bar/index.html
+++ b/docs/docs/examples/message-bar/index.html
@@ -5,31 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Message Bar | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Message Bar | H2O Wave"><meta data-react-helmet="true" name="description" content="Use message bars to indicate relevant status information."><meta data-react-helmet="true" property="og:description" content="Use message bars to indicate relevant status information."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/message-bar"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/message-bar"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/1ae86ebe.c9a5d67f.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/1ae86ebe.c0744f6c.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Message Bar</h1></header><div class="markdown"><p>Use message bars to indicate relevant status information.</p><div class="cover" style="background-image:url(/wave/assets/images/message-bar-d893610affc5c6857a7cbf1546ad8326.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Message Bar</h1></header><div class="markdown"><p>Use message bars to indicate relevant status information.</p><div class="cover" style="background-image:url(/wave/assets/images/message-bar-d893610affc5c6857a7cbf1546ad8326.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 -1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">message_bar</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;blocked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;This action is blocked.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">message_bar</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;error&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;This is an error message&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">message_bar</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;warning&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;This is a warning message.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">message_bar</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;info&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;This is an information message.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">message_bar</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;success&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;This is an success message.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">message_bar</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;danger&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;This is a danger message.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/message-bar.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/progress-update"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Progress / Updating</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/textbox"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Textbox »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/1ae86ebe.c9a5d67f.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/1ae86ebe.c0744f6c.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/meta-icon/index.html b/docs/docs/examples/meta-icon/index.html
new file mode 100644
index 0000000000..a2648db796
--- /dev/null
+++ b/docs/docs/examples/meta-icon/index.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="generator" content="Docusaurus v2.0.0-alpha.65">
+<title data-react-helmet="true">Meta / Icon | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Meta / Icon | H2O Wave"><meta data-react-helmet="true" name="description" content="Set the browser window icon for a page"><meta data-react-helmet="true" property="og:description" content="Set the browser window icon for a page"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/meta-icon"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/meta-icon"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/ca84abdc.cb7c606e.js" as="script">
+</head>
+<body>
+<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Meta / Icon</h1></header><div class="markdown"><p>Set the browser window icon for a page</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;meta&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">meta_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;https://en.wikipedia.org/static/apple-touch/wikipedia.png&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># You can also upload and assign an icon, like this:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># icon_path, = site.upload([&#x27;path/to/my/icon.png&#x27;])</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># page[&#x27;meta&#x27;] = ui.meta_card(box=&#x27;&#x27;, icon=icon_path)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&lt;a href=&quot;/demo&quot; target=&quot;_blank&quot;&gt;Open this page in a new window&lt;/a&gt; to view its icon.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/meta-icon.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/meta-title"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Meta / Title</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/meta-notification"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Meta / Notification »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/ca84abdc.cb7c606e.js"></script>
+</body>
+</html>
\ 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 5007704c8b..2a5ec78f44 100644
--- a/docs/docs/examples/meta-notification/index.html
+++ b/docs/docs/examples/meta-notification/index.html
@@ -5,35 +5,35 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Meta / Notification | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Meta / Notification | H2O Wave"><meta data-react-helmet="true" name="description" content="Display a desktop notification."><meta data-react-helmet="true" property="og:description" content="Display a desktop notification."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/meta-notification"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/meta-notification"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/e7ba74f4.7c2bb260.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/e7ba74f4.0bd15322.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Meta / Notification</h1></header><div class="markdown"><p>Display a desktop notification.</p><div class="cover" style="background-image:url(/wave/assets/images/meta-notification-fbc7ef4c16cebfc522a564d72cb6953d.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Meta / Notification</h1></header><div class="markdown"><p>Display a desktop notification.</p><div class="cover" style="background-image:url(/wave/assets/images/meta-notification-fbc7ef4c16cebfc522a564d72cb6953d.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;meta&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">meta_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Desktop Notifications&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;This page should display a desktop notification in a few seconds. Wait for it...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;meta&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">notification </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;And now for something completely different!&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/meta-notification.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/meta-title"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Meta / Title</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/meta-refresh"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Meta / Refresh »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/e7ba74f4.7c2bb260.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/meta-notification.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/meta-icon"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Meta / Icon</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/meta-refresh"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Meta / Refresh »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/e7ba74f4.0bd15322.js"></script>
 </body>
 </html>
\ 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 394360ac95..fa551e407e 100644
--- a/docs/docs/examples/meta-redirect/index.html
+++ b/docs/docs/examples/meta-redirect/index.html
@@ -5,35 +5,35 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Meta / Redirect | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Meta / Redirect | H2O Wave"><meta data-react-helmet="true" name="description" content="Redirect the page to a new URL or hash."><meta data-react-helmet="true" property="og:description" content="Redirect the page to a new URL or hash."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/meta-redirect"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/meta-redirect"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/3584c003.a606d50d.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/3584c003.2b36572c.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Meta / Redirect</h1></header><div class="markdown"><p>Redirect the page to a new URL or hash.</p><div class="cover" style="background-image:url(/wave/assets/images/meta-redirect-ce65a2bb8925d26db3db00327634b324.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Meta / Redirect</h1></header><div class="markdown"><p>Redirect the page to a new URL or hash.</p><div class="cover" style="background-image:url(/wave/assets/images/meta-redirect-ce65a2bb8925d26db3db00327634b324.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;meta&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">meta_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Redirect a page&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;This page should redirect to Wikipedia in a few seconds. Wait for it...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Redirect to a hash.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;meta&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">redirect </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#widgets&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Redirect to a URL.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;meta&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">redirect </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;https://www.wikipedia.org&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/meta-redirect.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/meta-refresh"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Meta / Refresh</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/counter-global"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Mode / Broadcast / Global »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/3584c003.a606d50d.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/3584c003.2b36572c.js"></script>
 </body>
 </html>
\ 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 99440ac465..f530e1cd44 100644
--- a/docs/docs/examples/meta-refresh/index.html
+++ b/docs/docs/examples/meta-refresh/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Meta / Refresh | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Meta / Refresh | H2O Wave"><meta data-react-helmet="true" name="description" content="Turn off live updates for static pages to conserve server resources."><meta data-react-helmet="true" property="og:description" content="Turn off live updates for static pages to conserve server resources."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/meta-refresh"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/meta-refresh"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/b9e4d6e6.d5c12a3f.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/b9e4d6e6.94216ee5.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Meta / Refresh</h1></header><div class="markdown"><p>Turn off live updates for static pages to conserve server resources.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Meta / Refresh</h1></header><div class="markdown"><p>Turn off live updates for static pages to conserve server resources.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Set refresh rate to zero (&quot;no updates&quot;)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;meta&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">meta_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> refresh</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;No updates for you&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;This page stops receiving updates once loaded.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/meta-refresh.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/meta-notification"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Meta / Notification</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/meta-redirect"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Meta / Redirect »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/b9e4d6e6.d5c12a3f.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/b9e4d6e6.94216ee5.js"></script>
 </body>
 </html>
\ 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 72f66310d9..73dfa4cd00 100644
--- a/docs/docs/examples/meta-title/index.html
+++ b/docs/docs/examples/meta-title/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Meta / Title | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Meta / Title | H2O Wave"><meta data-react-helmet="true" name="description" content="Set the browser window title for a page"><meta data-react-helmet="true" property="og:description" content="Set the browser window title for a page"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/meta-title"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/meta-title"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/f09ebdf1.d4463329.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/f09ebdf1.fafc5207.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Meta / Title</h1></header><div class="markdown"><p>Set the browser window title for a page</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Meta / Title</h1></header><div class="markdown"><p>Set the browser window title for a page</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;meta&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">meta_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;And now for something completely different!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&lt;a href=&quot;/demo&quot; target=&quot;_blank&quot;&gt;Open this page in a new window&lt;/a&gt; to view its title.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/meta-title.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/upload-download"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Uploads / Download</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/meta-notification"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Meta / Notification »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/f09ebdf1.d4463329.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/meta-title.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/upload-download"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Uploads / Download</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/meta-icon"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Meta / Icon »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/f09ebdf1.fafc5207.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/nav/index.html b/docs/docs/examples/nav/index.html
index fde301d5b2..3e9d68e44c 100644
--- a/docs/docs/examples/nav/index.html
+++ b/docs/docs/examples/nav/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Nav | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Nav | H2O Wave"><meta data-react-helmet="true" name="description" content="Use nav cards to display sidebar navigation."><meta data-react-helmet="true" property="og:description" content="Use nav cards to display sidebar navigation."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/nav"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/nav"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/c1570962.19157d64.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/c1570962.e4a00ed0.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Nav</h1></header><div class="markdown"><p>Use nav cards to display sidebar navigation.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Nav</h1></header><div class="markdown"><p>Use nav cards to display sidebar navigation.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;tabs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">nav_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">nav_group</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Menu&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">nav_item</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">nav_item</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">nav_item</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">nav_group</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Help&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">nav_item</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#about&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;About&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">nav_item</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#support&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Support&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/nav.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/markup"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Markup</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/toolbar"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Toolbar »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/c1570962.19157d64.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/c1570962.e4a00ed0.js"></script>
 </body>
 </html>
\ 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 d7af374f69..c6a42697ce 100644
--- a/docs/docs/examples/picker-selection/index.html
+++ b/docs/docs/examples/picker-selection/index.html
@@ -5,33 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Picker / Selection | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Picker / Selection | H2O Wave"><meta data-react-helmet="true" name="description" content="Pre-select choices while displaying a picker."><meta data-react-helmet="true" property="og:description" content="Pre-select choices while displaying a picker."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/picker-selection"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/picker-selection"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/1a4f1376.f1042d0a.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/1a4f1376.30660dfb.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Picker / Selection</h1></header><div class="markdown"><p>Pre-select choices while displaying a picker.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Picker / Selection</h1></header><div class="markdown"><p>Pre-select choices while displaying a picker.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;selected=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">picker</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">          ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;picker&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Picker with initial values&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cheese&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Cheese&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;toast&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Toast&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">          </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> values</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">          ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/picker-selection.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/picker"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Picker</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/dropdown"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Dropdown »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/1a4f1376.f1042d0a.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;selected=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">picker</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;picker&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Picker with initial values&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cheese&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Cheese&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;toast&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Toast&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> values</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/picker-selection.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/picker"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Picker</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/dropdown"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Dropdown »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/1a4f1376.30660dfb.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/picker/index.html b/docs/docs/examples/picker/index.html
index e8537e086e..d0c6ed0fa1 100644
--- a/docs/docs/examples/picker/index.html
+++ b/docs/docs/examples/picker/index.html
@@ -5,33 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Picker | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Picker | H2O Wave"><meta data-react-helmet="true" name="description" content="Use pickers to allow users to select one or more choices, such as tags or files, from a list."><meta data-react-helmet="true" property="og:description" content="Use pickers to allow users to select one or more choices, such as tags or files, from a list."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/picker"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/picker"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/4ab7b8a0.a56f1356.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/4ab7b8a0.4ff6fba6.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Picker</h1></header><div class="markdown"><p>Use pickers to allow users to select one or more choices, such as tags or files, from a list.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Picker</h1></header><div class="markdown"><p>Use pickers to allow users to select one or more choices, such as tags or files, from a list.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;selected=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">picker</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;picker&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Place an order (try Spam, Eggs or Ham):&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cheese&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Cheese&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;toast&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Toast&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/picker.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/checklist"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Checklist</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/picker-selection"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Picker / Selection »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/4ab7b8a0.a56f1356.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;selected=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">picker</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;picker&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Place an order (try Spam, Eggs or Ham):&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cheese&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Cheese&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;toast&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Toast&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/picker.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/checklist"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Checklist</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/picker-selection"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Picker / Selection »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/4ab7b8a0.4ff6fba6.js"></script>
 </body>
 </html>
\ 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 44b68f240b..1dffc3d199 100644
--- a/docs/docs/examples/pixel-art/index.html
+++ b/docs/docs/examples/pixel-art/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Pixel Art | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Pixel Art | H2O Wave"><meta data-react-helmet="true" name="description" content="A card that demonstrates collaborative editing in Q."><meta data-react-helmet="true" property="og:description" content="A card that demonstrates collaborative editing in Q."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/pixel-art"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/pixel-art"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/37382beb.8b634fbd.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/37382beb.297f4f29.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Pixel Art</h1></header><div class="markdown"><p>A card that demonstrates collaborative editing in Q.
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Pixel Art</h1></header><div class="markdown"><p>A card that demonstrates collaborative editing in Q.
 Open <code>/demo</code> in multiple browsers and watch them synchronize in realtime.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">drop</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">pixel_art_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 6&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Art&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;color&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">16</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">16</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/pixel-art.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-d3"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / D3.js</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/upload"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Uploads »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/37382beb.8b634fbd.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/37382beb.297f4f29.js"></script>
 </body>
 </html>
\ 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 59594daa68..9992794b06 100644
--- a/docs/docs/examples/plot-altair/index.html
+++ b/docs/docs/examples/plot-altair/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Altair | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Altair | H2O Wave"><meta data-react-helmet="true" name="description" content="Use Altair to create plot specifications for the Vega card."><meta data-react-helmet="true" property="og:description" content="Use Altair to create plot specifications for the Vega card."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-altair"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-altair"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/2673e11f.b568803c.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/2673e11f.e32a7b66.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Altair</h1></header><div class="markdown"><p>Use Altair to create plot specifications for the Vega card.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-altair-6b648257bc043077af771b8bbdf91735.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> altair</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> vega_datasets </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> data</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Altair</h1></header><div class="markdown"><p>Use Altair to create plot specifications for the Vega card.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-altair-6b648257bc043077af771b8bbdf91735.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> altair</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> vega_datasets </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> data</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">spec </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> altair</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">Chart</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">cars</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark_circle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">60</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">encode</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Horsepower&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Miles_per_Gallon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Origin&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    tooltip</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Name&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Origin&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Horsepower&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Miles_per_Gallon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">interactive</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">to_json</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">vega_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Altair Example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    specification</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">spec</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-altair.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-vegalite-form"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Vega-lite / Form</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-bokeh"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Bokeh »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/2673e11f.b568803c.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/2673e11f.e32a7b66.js"></script>
 </body>
 </html>
\ 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 76311bd7aa..c3b5fb0f74 100644
--- a/docs/docs/examples/plot-area-groups/index.html
+++ b/docs/docs/examples/plot-area-groups/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Area / Groups | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Area / Groups | H2O Wave"><meta data-react-helmet="true" name="description" content="Make an area plot showing multiple categories."><meta data-react-helmet="true" property="og:description" content="Make an area plot showing multiple categories."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-area-groups"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-area-groups"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/53da2547.2c55cbf7.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/53da2547.4046d6ef.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Area / Groups</h1></header><div class="markdown"><p>Make an area plot showing multiple categories.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-area-groups-26a91066657837eeb3ddd3d83dafdc0a.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Area / Groups</h1></header><div class="markdown"><p>Make an area plot showing multiple categories.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-area-groups-26a91066657837eeb3ddd3d83dafdc0a.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeMultiTimeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Area, groups&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;product date price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;area&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-groups.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-area"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Area</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-area-negative"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Area / Negative »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/53da2547.2c55cbf7.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/53da2547.4046d6ef.js"></script>
 </body>
 </html>
\ 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 264c8459d2..75bed532fe 100644
--- a/docs/docs/examples/plot-area-line-groups/index.html
+++ b/docs/docs/examples/plot-area-line-groups/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Area + Line / Groups | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Area + Line / Groups | H2O Wave"><meta data-react-helmet="true" name="description" content="Make an combined area + line plot showing multiple categories."><meta data-react-helmet="true" property="og:description" content="Make an combined area + line plot showing multiple categories."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-area-line-groups"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-area-line-groups"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/7d744a8f.e1c95e5b.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/7d744a8f.a414f615.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Area + Line / Groups</h1></header><div class="markdown"><p>Make an combined area + line plot showing multiple categories.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-area-line-groups-fab3e454a09ab17afeb08c5bbe20a364.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Area + Line / Groups</h1></header><div class="markdown"><p>Make an combined area + line plot showing multiple categories.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-area-line-groups-fab3e454a09ab17afeb08c5bbe20a364.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeMultiTimeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Area + Line, groups&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;product date price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;area&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-line-groups.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-area-line-smooth"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Area + Line / Smooth</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-polygon"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Polygon »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/7d744a8f.e1c95e5b.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/7d744a8f.a414f615.js"></script>
 </body>
 </html>
\ 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 63d9f220be..d81d5248f7 100644
--- a/docs/docs/examples/plot-area-line-smooth/index.html
+++ b/docs/docs/examples/plot-area-line-smooth/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Area + Line / Smooth | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Area + Line / Smooth | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a combined area + line plot using a smooth curve."><meta data-react-helmet="true" property="og:description" content="Make a combined area + line plot using a smooth curve."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-area-line-smooth"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-area-line-smooth"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/f846e950.01b9cc09.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/f846e950.e91bfc98.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Area + Line / Smooth</h1></header><div class="markdown"><p>Make a combined area + line plot using a smooth curve.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-area-line-smooth-215c412ff603d4f09d5e46af9dc84085.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Area + Line / Smooth</h1></header><div class="markdown"><p>Make a combined area + line plot using a smooth curve.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-area-line-smooth-215c412ff603d4f09d5e46af9dc84085.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeTimeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Area + Line, smooth&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;area&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;smooth&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;smooth&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-line-smooth.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-area-line"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Area + Line</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-area-line-groups"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Area + Line / Groups »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/f846e950.01b9cc09.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/f846e950.e91bfc98.js"></script>
 </body>
 </html>
\ 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 139958db8e..ae814279ad 100644
--- a/docs/docs/examples/plot-area-line/index.html
+++ b/docs/docs/examples/plot-area-line/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Area + Line | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Area + Line | H2O Wave"><meta data-react-helmet="true" name="description" content="Make an area plot with an additional line layer on top."><meta data-react-helmet="true" property="og:description" content="Make an area plot with an additional line layer on top."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-area-line"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-area-line"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/bb5446ac.f742416a.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/bb5446ac.b79cbe54.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Area + Line</h1></header><div class="markdown"><p>Make an area plot with an additional line layer on top.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-area-line-fbcaba9e073f71a07b202834d2992b49.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Area + Line</h1></header><div class="markdown"><p>Make an area plot with an additional line layer on top.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-area-line-fbcaba9e073f71a07b202834d2992b49.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeTimeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Area + Line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;area&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-line.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-area-stacked"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Area / Stacked</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-area-line-smooth"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Area + Line / Smooth »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/bb5446ac.f742416a.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/bb5446ac.b79cbe54.js"></script>
 </body>
 </html>
\ 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 ce4f052725..3368f0b73a 100644
--- a/docs/docs/examples/plot-area-negative/index.html
+++ b/docs/docs/examples/plot-area-negative/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Area / Negative | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Area / Negative | H2O Wave"><meta data-react-helmet="true" name="description" content="Make an area plot showing positive and negative values."><meta data-react-helmet="true" property="og:description" content="Make an area plot showing positive and negative values."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-area-negative"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-area-negative"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/273cfbdf.7d2b8c73.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/273cfbdf.bacb6f0e.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Area / Negative</h1></header><div class="markdown"><p>Make an area plot showing positive and negative values.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-area-negative-72b6ee9e1692572a50b4f9e5f88db0ce.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Area / Negative</h1></header><div class="markdown"><p>Make an area plot showing positive and negative values.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-area-negative-72b6ee9e1692572a50b4f9e5f88db0ce.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeTimeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> start</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Area, negative values&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;area&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-negative.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-area-groups"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Area / Groups</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-area-range"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Area / Range »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/273cfbdf.7d2b8c73.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/273cfbdf.bacb6f0e.js"></script>
 </body>
 </html>
\ 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 43bba6976e..18fd5303c3 100644
--- a/docs/docs/examples/plot-area-range/index.html
+++ b/docs/docs/examples/plot-area-range/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Area / Range | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Area / Range | H2O Wave"><meta data-react-helmet="true" name="description" content="Make an area plot representing a range (band) of values."><meta data-react-helmet="true" property="og:description" content="Make an area plot representing a range (band) of values."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-area-range"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-area-range"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/126e0b0e.12591c6d.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/126e0b0e.d1ed6129.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Area / Range</h1></header><div class="markdown"><p>Make an area plot representing a range (band) of values.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-area-range-0663c734a05c77b333b1cfdca966324f.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Area / Range</h1></header><div class="markdown"><p>Make an area plot representing a range (band) of values.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-area-range-0663c734a05c77b333b1cfdca966324f.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeTimeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Area, range&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date low high&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;area&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=low&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=high&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">randint</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">8</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">randint</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">8</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-range.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-area-negative"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Area / Negative</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-area-smooth"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Area / Smooth »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/126e0b0e.12591c6d.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/126e0b0e.d1ed6129.js"></script>
 </body>
 </html>
\ 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 0fa0b3b976..72d04698bf 100644
--- a/docs/docs/examples/plot-area-smooth/index.html
+++ b/docs/docs/examples/plot-area-smooth/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Area / Smooth | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Area / Smooth | H2O Wave"><meta data-react-helmet="true" name="description" content="Make an area plot with a smooth curve."><meta data-react-helmet="true" property="og:description" content="Make an area plot with a smooth curve."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-area-smooth"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-area-smooth"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/718f151f.7b4a84aa.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/718f151f.ce6db67f.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Area / Smooth</h1></header><div class="markdown"><p>Make an area plot with a smooth curve.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-area-smooth-4826228f8423a45fda33727184111c06.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Area / Smooth</h1></header><div class="markdown"><p>Make an area plot with a smooth curve.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-area-smooth-4826228f8423a45fda33727184111c06.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeTimeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Area, smooth&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;area&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;smooth&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-smooth.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-area-range"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Area / Range</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-area-stacked"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Area / Stacked »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/718f151f.7b4a84aa.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/718f151f.ce6db67f.js"></script>
 </body>
 </html>
\ 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 aebc80af28..e533e6b65f 100644
--- a/docs/docs/examples/plot-area-stacked/index.html
+++ b/docs/docs/examples/plot-area-stacked/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Area / Stacked | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Area / Stacked | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a stacked area plot."><meta data-react-helmet="true" property="og:description" content="Make a stacked area plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-area-stacked"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-area-stacked"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/97d9aba4.2453d1b1.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/97d9aba4.04f448bb.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Area / Stacked</h1></header><div class="markdown"><p>Make a stacked area plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-area-stacked-5624332d0398dd3417cb40e6fd83272c.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Area / Stacked</h1></header><div class="markdown"><p>Make a stacked area plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-area-stacked-5624332d0398dd3417cb40e6fd83272c.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeMultiTimeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Area, stacked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;product date price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;area&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stack</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;auto&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-stacked.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-area-smooth"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Area / Smooth</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-area-line"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Area + Line »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/97d9aba4.2453d1b1.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/97d9aba4.04f448bb.js"></script>
 </body>
 </html>
\ 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 5bf0b328b9..1a7b35df1c 100644
--- a/docs/docs/examples/plot-area/index.html
+++ b/docs/docs/examples/plot-area/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Area | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Area | H2O Wave"><meta data-react-helmet="true" name="description" content="Make an area plot."><meta data-react-helmet="true" property="og:description" content="Make an area plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-area"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-area"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/31f8b56c.056223e9.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/31f8b56c.08e34e2c.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Area</h1></header><div class="markdown"><p>Make an area plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-area-0a621df3247663494f8a594d65f0516d.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Area</h1></header><div class="markdown"><p>Make an area plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-area-0a621df3247663494f8a594d65f0516d.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeTimeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Area&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;area&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-path-smooth"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Path / Smooth</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-area-groups"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Area / Groups »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/31f8b56c.056223e9.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/31f8b56c.08e34e2c.js"></script>
 </body>
 </html>
\ 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 a2e4deaaf2..9fce6b66cc 100644
--- a/docs/docs/examples/plot-axis-title/index.html
+++ b/docs/docs/examples/plot-axis-title/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Axis Titles | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Axis Titles | H2O Wave"><meta data-react-helmet="true" name="description" content="Display custom axis titles on a plot."><meta data-react-helmet="true" property="og:description" content="Display custom axis titles on a plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-axis-title"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-axis-title"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/c0ac41fc.8be5a1e6.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/c0ac41fc.43ca1f95.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Axis Titles</h1></header><div class="markdown"><p>Display custom axis titles on a plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-axis-title-f0d1c16575277e024054fbb19e5af49a.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Axis Titles</h1></header><div class="markdown"><p>Display custom axis titles on a plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-axis-title-f0d1c16575277e024054fbb19e5af49a.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeTimeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-axis-title.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-histogram"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Histogram</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-form"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Form »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/c0ac41fc.8be5a1e6.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/c0ac41fc.43ca1f95.js"></script>
 </body>
 </html>
\ 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 1d5c5375fd..2056a372f1 100644
--- a/docs/docs/examples/plot-bokeh/index.html
+++ b/docs/docs/examples/plot-bokeh/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Bokeh | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Bokeh | H2O Wave"><meta data-react-helmet="true" name="description" content="Use Bokeh to create plots."><meta data-react-helmet="true" property="og:description" content="Use Bokeh to create plots."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-bokeh"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-bokeh"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/109e456e.7c99ebff.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/109e456e.d3998c59.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Bokeh</h1></header><div class="markdown"><p>Use Bokeh to create plots.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-bokeh-0e17ac43f3cdff49e9cb5ff21d8c8214.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> numpy </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> np</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> bokeh</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">models </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> HoverTool</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> bokeh</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plotting </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> figure</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> bokeh</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">resources </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> CDN</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> bokeh</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">embed </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> file_html</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Bokeh</h1></header><div class="markdown"><p>Use Bokeh to create plots.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-bokeh-0e17ac43f3cdff49e9cb5ff21d8c8214.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> numpy </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> np</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> bokeh</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">models </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> HoverTool</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> bokeh</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plotting </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> figure</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> bokeh</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">resources </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> CDN</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> bokeh</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">embed </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> file_html</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">500</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">x </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> np</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">standard_normal</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">y </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> np</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">standard_normal</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">p </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> figure</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    match_aspect</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    tools</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;wheel_zoom,reset&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    background_fill_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#440154&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">p</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">grid</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">visible </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">False</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">r</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> bins </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> p</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">hexbin</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0.5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> hover_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;pink&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> hover_alpha</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0.8</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">p</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">circle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;white&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">p</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add_tools</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">HoverTool</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    tooltips</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;count&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;@c&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;(q,r)&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;(@q, @r)&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    mode</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;mouse&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    point_policy</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;follow_mouse&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    renderers</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">r</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Export html for our frame card</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">html </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> file_html</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">p</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> CDN</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;plot&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">frame_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 5 8&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Hexbin for 500 points&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">html</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-bokeh.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-altair"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Altair</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-matplotlib"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Matplotlib »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/109e456e.7c99ebff.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/109e456e.d3998c59.js"></script>
 </body>
 </html>
\ 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 97d7f3c91b..b04f84a02c 100644
--- a/docs/docs/examples/plot-d3/index.html
+++ b/docs/docs/examples/plot-d3/index.html
@@ -5,35 +5,35 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / D3.js | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / D3.js | H2O Wave"><meta data-react-helmet="true" name="description" content="Create custom plots using D3.js."><meta data-react-helmet="true" property="og:description" content="Create custom plots using D3.js."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-d3"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-d3"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/1486e3bc.86163c5d.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/1486e3bc.a05fa83f.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / D3.js</h1></header><div class="markdown"><p>Create custom plots using D3.js.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-d3-27f0867826e9547bb4bb23e79517892b.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> json</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> os</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">path</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / D3.js</h1></header><div class="markdown"><p>Create custom plots using D3.js.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-d3-27f0867826e9547bb4bb23e79517892b.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> json</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> os</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">path</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># The example D3 Javascript file is located in the same directory as this example; get its path</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">d3_js_script_filename </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> os</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">join</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">os</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">dirname</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">__file__</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;plot_d3.js&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Upload the script to the server. Typically, you&#x27;d do this only once, when your app is installed.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">d3_js_script_path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">upload</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">d3_js_script_filename</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">html_template </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;!DOCTYPE html&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;html&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;head&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  &lt;script src=&quot;https://d3js.org/d3.v5.min.js&quot;&gt;&lt;/script&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;/head&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;body style=&quot;margin:0; padding:0&quot;&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  &lt;script src=&quot;{script_path}&quot;&gt;&lt;/script&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  &lt;script&gt;render({data})&lt;/script&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;/body&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;/html&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># This data is hard-coded here for simplicity.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># During production use, this data would be the output of some compute routine.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">11975</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5871</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">8916</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2868</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">1951</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10048</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2060</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">6171</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">8010</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">16145</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">8090</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">8045</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">1013</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">990</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">940</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">6907</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Plug JSON-serialized data into our html template</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">html </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> html_template</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">format</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">script_path</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">d3_js_script_path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">json</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">dumps</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">frame_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 5 8&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;D3 Chord Diagram&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">html</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-d3.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-plotly"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Plotly</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/pixel-art"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Pixel Art »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/1486e3bc.86163c5d.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/1486e3bc.a05fa83f.js"></script>
 </body>
 </html>
\ 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 b042b0f126..b108c3711c 100644
--- a/docs/docs/examples/plot-form/index.html
+++ b/docs/docs/examples/plot-form/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Form | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Form | H2O Wave"><meta data-react-helmet="true" name="description" content="Display a plot inside a form."><meta data-react-helmet="true" property="og:description" content="Display a plot inside a form."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-form"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-form"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/48786391.09e5ebbe.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/48786391.4818219b.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Form</h1></header><div class="markdown"><p>Display a plot inside a form.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-form-7b7c198bf0e0f55d1d9389b4f4dcff1a.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Form</h1></header><div class="markdown"><p>Display a plot inside a form.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-form-7b7c198bf0e0f55d1d9389b4f4dcff1a.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Example 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">visualization</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fields</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;product price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Example 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">visualization</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fields</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;product price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-form.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-axis-title"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Axis Titles</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-vegalite"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Vega-lite »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/48786391.09e5ebbe.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/48786391.4818219b.js"></script>
 </body>
 </html>
\ 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 3abb5fd57d..76d310d00f 100644
--- a/docs/docs/examples/plot-histogram/index.html
+++ b/docs/docs/examples/plot-histogram/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Histogram | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Histogram | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a histogram."><meta data-react-helmet="true" property="og:description" content="Make a histogram."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-histogram"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-histogram"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/eb2bb38c.c8e1e264.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/eb2bb38c.3448601c.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Histogram</h1></header><div class="markdown"><p>Make a histogram.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Histogram</h1></header><div class="markdown"><p>Make a histogram.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Histogram&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;lo hi price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x1</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=lo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x2</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=hi&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">i </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> i </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">enumerate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-histogram.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-polygon"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Polygon</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-axis-title"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Axis Titles »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/eb2bb38c.c8e1e264.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/eb2bb38c.3448601c.js"></script>
 </body>
 </html>
\ 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 8a652521e7..8f617e6471 100644
--- a/docs/docs/examples/plot-interval-annotation-transpose/index.html
+++ b/docs/docs/examples/plot-interval-annotation-transpose/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Interval / Annotation / Transpose | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Interval / Annotation / Transpose | H2O Wave"><meta data-react-helmet="true" name="description" content="Add annotations to a bar plot."><meta data-react-helmet="true" property="og:description" content="Add annotations to a bar plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-annotation-transpose"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-annotation-transpose"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/4e3b2ad1.6cfdca0e.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/4e3b2ad1.e683ccc6.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Annotation / Transpose</h1></header><div class="markdown"><p>Add annotations to a bar plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-annotation-transpose-a0e697aba7f9fa2b783814edfb13d0be.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Annotation / Transpose</h1></header><div class="markdown"><p>Add annotations to a bar plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-annotation-transpose-a0e697aba7f9fa2b783814edfb13d0be.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Categorical-Numeric&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;product price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;C10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">80</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;point&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;C13&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;vertical line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">40</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;horizontal line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;C6&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;C3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;vertical region&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">70</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">60</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;horizontal region&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-annotation-transpose.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-annotation"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Interval / Annotation</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-line"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Line »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/4e3b2ad1.6cfdca0e.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/4e3b2ad1.e683ccc6.js"></script>
 </body>
 </html>
\ 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 87d5a73245..af466a1834 100644
--- a/docs/docs/examples/plot-interval-annotation/index.html
+++ b/docs/docs/examples/plot-interval-annotation/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Interval / Annotation | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Interval / Annotation | H2O Wave"><meta data-react-helmet="true" name="description" content="Add annotations to a column plot."><meta data-react-helmet="true" property="og:description" content="Add annotations to a column plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-annotation"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-annotation"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/aa7f648d.9fcf7f62.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/aa7f648d.e4f6c194.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Annotation</h1></header><div class="markdown"><p>Add annotations to a column plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-annotation-ad30e4c2b779c452d7ab7d805f037c43.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Annotation</h1></header><div class="markdown"><p>Add annotations to a column plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-annotation-ad30e4c2b779c452d7ab7d805f037c43.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Categorical-Numeric&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;product price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;C10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">80</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;point&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;C13&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;vertical line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">40</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;horizontal line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;C6&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;C3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;vertical region&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">70</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">60</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;horizontal region&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-annotation.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-helix"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Interval / Helix</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-annotation-transpose"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Interval / Annotation / Transpose »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/aa7f648d.9fcf7f62.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/aa7f648d.e4f6c194.js"></script>
 </body>
 </html>
\ 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 021f39da5b..be0c3815fa 100644
--- a/docs/docs/examples/plot-interval-groups-transpose/index.html
+++ b/docs/docs/examples/plot-interval-groups-transpose/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Interval / Groups / Transpose | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Interval / Groups / Transpose | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a grouped bar plot."><meta data-react-helmet="true" property="og:description" content="Make a grouped bar plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-groups-transpose"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-groups-transpose"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/97e78655.63616476.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/97e78655.60b6caf9.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Groups / Transpose</h1></header><div class="markdown"><p>Make a grouped bar plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-groups-transpose-7a36b34fbae40cd7d645e149db067bf2.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Groups / Transpose</h1></header><div class="markdown"><p>Make a grouped bar plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-groups-transpose-7a36b34fbae40cd7d645e149db067bf2.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">k </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeMultiCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">groups</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">k</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Intervals, groups&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;country product price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> k</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=country&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dodge</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;auto&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-groups-transpose.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-groups"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Interval / Groups</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-labels"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Interval / Labels »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/97e78655.63616476.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/97e78655.60b6caf9.js"></script>
 </body>
 </html>
\ 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 6bf29afbd8..b4fe7c4dca 100644
--- a/docs/docs/examples/plot-interval-groups/index.html
+++ b/docs/docs/examples/plot-interval-groups/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Interval / Groups | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Interval / Groups | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a grouped column plot."><meta data-react-helmet="true" property="og:description" content="Make a grouped column plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-groups"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-groups"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/c1cf1fe4.44f01cc0.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/c1cf1fe4.af8593f1.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Groups</h1></header><div class="markdown"><p>Make a grouped column plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-groups-b096660ab331215122bb6771cda619ac.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Groups</h1></header><div class="markdown"><p>Make a grouped column plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-groups-b096660ab331215122bb6771cda619ac.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">k </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeMultiCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">groups</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">k</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Intervals, groups&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;country product price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> k</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=country&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dodge</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;auto&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-groups.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-transpose"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Interval / Transpose</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-groups-transpose"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Interval / Groups / Transpose »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/c1cf1fe4.44f01cc0.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/c1cf1fe4.af8593f1.js"></script>
 </body>
 </html>
\ 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 db8a9b9d0f..be793dd419 100644
--- a/docs/docs/examples/plot-interval-helix/index.html
+++ b/docs/docs/examples/plot-interval-helix/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Interval / Helix | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Interval / Helix | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a bar plot in helical coordinates."><meta data-react-helmet="true" property="og:description" content="Make a bar plot in helical coordinates."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-helix"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-helix"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/e96704c5.29ba907a.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/e96704c5.57ed2674.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Helix</h1></header><div class="markdown"><p>Make a bar plot in helical coordinates.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-helix-b499f18c451e87aa39d64ca154a15bdf.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Helix</h1></header><div class="markdown"><p>Make a bar plot in helical coordinates.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-helix-b499f18c451e87aa39d64ca154a15bdf.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">200</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Interval, helix&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;product price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">coord</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;helix&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-helix.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-theta"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Interval / Theta</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-annotation"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Interval / Annotation »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/e96704c5.29ba907a.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/e96704c5.57ed2674.js"></script>
 </body>
 </html>
\ 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 c9deee1dc3..9d0fdb697a 100644
--- a/docs/docs/examples/plot-interval-labels/index.html
+++ b/docs/docs/examples/plot-interval-labels/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Interval / Labels | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Interval / Labels | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a column plot with labels on each bar."><meta data-react-helmet="true" property="og:description" content="Make a column plot with labels on each bar."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-labels"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-labels"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/8eaf94d7.6b1f4315.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/8eaf94d7.f12b9f2f.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Labels</h1></header><div class="markdown"><p>Make a column plot with labels on each bar.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-labels-bc80dada33a6a5f1a61854ef21caf76e.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Labels</h1></header><div class="markdown"><p>Make a column plot with labels on each bar.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-labels-bc80dada33a6a5f1a61854ef21caf76e.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Label Customization&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;product price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#333333&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                label_offset</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label_position</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;middle&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label_rotation</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;-90&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label_fill_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#fff&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                label_font_weight</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;bold&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-labels.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-groups-transpose"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Interval / Groups / Transpose</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-range"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Interval / Range »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/8eaf94d7.6b1f4315.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/8eaf94d7.f12b9f2f.js"></script>
 </body>
 </html>
\ 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 8937a0ea3d..468417d1dc 100644
--- a/docs/docs/examples/plot-interval-polar-stacked/index.html
+++ b/docs/docs/examples/plot-interval-polar-stacked/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Interval / Polar / Stacked | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Interval / Polar / Stacked | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a stacked rose plot (a stacked bar plot in polar coordinates)."><meta data-react-helmet="true" property="og:description" content="Make a stacked rose plot (a stacked bar plot in polar coordinates)."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-polar-stacked"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-polar-stacked"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/2db704cb.4a75d8de.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/2db704cb.20816776.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Polar / Stacked</h1></header><div class="markdown"><p>Make a stacked rose plot (a stacked bar plot in polar coordinates).</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-polar-stacked-dbb95e41cc47e31cb7614c6c9f3bf387.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Polar / Stacked</h1></header><div class="markdown"><p>Make a stacked rose plot (a stacked bar plot in polar coordinates).</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-polar-stacked-dbb95e41cc47e31cb7614c6c9f3bf387.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">k </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeMultiCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">groups</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">k</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Intervals, polar, stacked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;country product price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> k</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">coord</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;polar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=country&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stack</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;auto&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-polar-stacked.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-polar"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Interval / Polar</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-theta"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Interval / Theta »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/2db704cb.4a75d8de.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/2db704cb.20816776.js"></script>
 </body>
 </html>
\ 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 9fc7e2d6a2..b5c35971eb 100644
--- a/docs/docs/examples/plot-interval-polar/index.html
+++ b/docs/docs/examples/plot-interval-polar/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Interval / Polar | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Interval / Polar | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a rose plot (a bar plot in polar coordinates)."><meta data-react-helmet="true" property="og:description" content="Make a rose plot (a bar plot in polar coordinates)."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-polar"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-polar"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/9a52a2f7.1912ba90.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/9a52a2f7.25d15099.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Polar</h1></header><div class="markdown"><p>Make a rose plot (a bar plot in polar coordinates).</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-polar-e54d13fed4e4ea004992a91a9e4644df.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Polar</h1></header><div class="markdown"><p>Make a rose plot (a bar plot in polar coordinates).</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-polar-e54d13fed4e4ea004992a91a9e4644df.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">24</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Interval, polar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;product price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">coord</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;polar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-polar.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Interval / Stacked / Grouped / Transpose</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-polar-stacked"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Interval / Polar / Stacked »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/9a52a2f7.1912ba90.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/9a52a2f7.25d15099.js"></script>
 </body>
 </html>
\ 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 ec15b1ef9c..8156b28d45 100644
--- a/docs/docs/examples/plot-interval-range-transpose/index.html
+++ b/docs/docs/examples/plot-interval-range-transpose/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Interval / Range / Transpose | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Interval / Range / Transpose | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a bar plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot."><meta data-react-helmet="true" property="og:description" content="Make a bar plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-range-transpose"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-range-transpose"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/bd0b0bbe.8f6f01cf.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/bd0b0bbe.d16ca985.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Range / Transpose</h1></header><div class="markdown"><p>Make a bar plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-range-transpose-ac0df7689c88cb6fe886aaed084918bf.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Range / Transpose</h1></header><div class="markdown"><p>Make a bar plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-range-transpose-ac0df7689c88cb6fe886aaed084918bf.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Interval, range&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;product low high&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=low&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=high&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">randint</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">randint</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-range-transpose.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-range"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Interval / Range</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-stacked"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Interval / Stacked »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/bd0b0bbe.8f6f01cf.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/bd0b0bbe.d16ca985.js"></script>
 </body>
 </html>
\ 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 f47796ed48..9a9f98d482 100644
--- a/docs/docs/examples/plot-interval-range/index.html
+++ b/docs/docs/examples/plot-interval-range/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Interval / Range | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Interval / Range | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a column plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot."><meta data-react-helmet="true" property="og:description" content="Make a column plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-range"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-range"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/a8dc7269.26196dce.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/a8dc7269.14bf2db2.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Range</h1></header><div class="markdown"><p>Make a column plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-range-38b09db44df660cf127c051bee921b70.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Range</h1></header><div class="markdown"><p>Make a column plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-range-38b09db44df660cf127c051bee921b70.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Interval, range&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;product low high&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=low&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=high&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">randint</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">randint</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-range.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-labels"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Interval / Labels</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-range-transpose"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Interval / Range / Transpose »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/a8dc7269.26196dce.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/a8dc7269.14bf2db2.js"></script>
 </body>
 </html>
\ 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 e4d96f5982..8e7f7b7118 100644
--- a/docs/docs/examples/plot-interval-stacked-grouped-transpose/index.html
+++ b/docs/docs/examples/plot-interval-stacked-grouped-transpose/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Interval / Stacked / Grouped / Transpose | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Interval / Stacked / Grouped / Transpose | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a bar plot with both stacked and grouped bars."><meta data-react-helmet="true" property="og:description" content="Make a bar plot with both stacked and grouped bars."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-stacked-grouped-transpose"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-stacked-grouped-transpose"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/c7b62599.724ac45e.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/c7b62599.b49ba390.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Stacked / Grouped / Transpose</h1></header><div class="markdown"><p>Make a bar plot with both stacked and grouped bars.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-stacked-grouped-transpose-2b181afc5e1a2626b7e700625c7f41b3.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Stacked / Grouped / Transpose</h1></header><div class="markdown"><p>Make a bar plot with both stacked and grouped bars.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-stacked-grouped-transpose-2b181afc5e1a2626b7e700625c7f41b3.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">k </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f1 </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeMultiCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">groups</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">k</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f2 </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeMultiCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">groups</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">k</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Intervals, stacked and dodged&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;category country product price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> k </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=country&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stack</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;auto&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dodge</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=category&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">data1 </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;A&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">data2 </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;B&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> data1 </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> data2</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-stacked-grouped-transpose.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-stacked-grouped"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Interval / Stacked / Grouped</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-polar"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Interval / Polar »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/c7b62599.724ac45e.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/c7b62599.b49ba390.js"></script>
 </body>
 </html>
\ 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 52151acdcd..cecf8959e1 100644
--- a/docs/docs/examples/plot-interval-stacked-grouped/index.html
+++ b/docs/docs/examples/plot-interval-stacked-grouped/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Interval / Stacked / Grouped | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Interval / Stacked / Grouped | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a column plot with both stacked and grouped bars."><meta data-react-helmet="true" property="og:description" content="Make a column plot with both stacked and grouped bars."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-stacked-grouped"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-stacked-grouped"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/f1ec6cfa.8ae38ae3.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/f1ec6cfa.90acea76.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Stacked / Grouped</h1></header><div class="markdown"><p>Make a column plot with both stacked and grouped bars.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-stacked-grouped-678de98e675478e364cab127af4c07bb.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Stacked / Grouped</h1></header><div class="markdown"><p>Make a column plot with both stacked and grouped bars.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-stacked-grouped-678de98e675478e364cab127af4c07bb.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">k </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f1 </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeMultiCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">groups</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">k</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f2 </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeMultiCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">groups</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">k</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Intervals, stacked and dodged&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;category country product price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> k </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=country&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stack</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;auto&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dodge</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=category&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">data1 </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;A&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">data2 </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;B&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> data1 </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> data2</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-stacked-grouped.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-stacked-transpose"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Interval / Stacked / Transpose</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Interval / Stacked / Grouped / Transpose »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/f1ec6cfa.8ae38ae3.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/f1ec6cfa.90acea76.js"></script>
 </body>
 </html>
\ 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 48064a617a..d8a7e80ddc 100644
--- a/docs/docs/examples/plot-interval-stacked-transpose/index.html
+++ b/docs/docs/examples/plot-interval-stacked-transpose/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Interval / Stacked / Transpose | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Interval / Stacked / Transpose | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a stacked bar plot."><meta data-react-helmet="true" property="og:description" content="Make a stacked bar plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-stacked-transpose"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-stacked-transpose"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/cd329814.7a492562.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/cd329814.ee103b68.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Stacked / Transpose</h1></header><div class="markdown"><p>Make a stacked bar plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-stacked-transpose-9f125bb40e6aea97cd6ad2b4e547a259.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Stacked / Transpose</h1></header><div class="markdown"><p>Make a stacked bar plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-stacked-transpose-9f125bb40e6aea97cd6ad2b4e547a259.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">k </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeMultiCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">groups</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">k</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Intervals, stacked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;country product price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> k</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=country&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stack</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;auto&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-stacked-transpose.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-stacked"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Interval / Stacked</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-stacked-grouped"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Interval / Stacked / Grouped »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/cd329814.7a492562.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/cd329814.ee103b68.js"></script>
 </body>
 </html>
\ 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 cfcbc68649..5fd10ac0fa 100644
--- a/docs/docs/examples/plot-interval-stacked/index.html
+++ b/docs/docs/examples/plot-interval-stacked/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Interval / Stacked | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Interval / Stacked | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a stacked column plot."><meta data-react-helmet="true" property="og:description" content="Make a stacked column plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-stacked"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-stacked"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/22188a36.51cf6e5e.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/22188a36.59773ffa.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Stacked</h1></header><div class="markdown"><p>Make a stacked column plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-stacked-6a492804251cf9ef3fcd33cf721b725f.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Stacked</h1></header><div class="markdown"><p>Make a stacked column plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-stacked-6a492804251cf9ef3fcd33cf721b725f.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">k </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeMultiCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">groups</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">k</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Intervals, stacked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;country product price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> k</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=country&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stack</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;auto&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-stacked.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-range-transpose"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Interval / Range / Transpose</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-stacked-transpose"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Interval / Stacked / Transpose »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/22188a36.51cf6e5e.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/22188a36.59773ffa.js"></script>
 </body>
 </html>
\ 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 b398df2cc8..263c417c4f 100644
--- a/docs/docs/examples/plot-interval-theta/index.html
+++ b/docs/docs/examples/plot-interval-theta/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Interval / Theta | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Interval / Theta | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a &quot;racetrack&quot; plot (a bar plot in polar coordinates, transposed)."><meta data-react-helmet="true" property="og:description" content="Make a &quot;racetrack&quot; plot (a bar plot in polar coordinates, transposed)."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-theta"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-theta"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/31c3c419.ec262224.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/31c3c419.2f652d9f.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Theta</h1></header><div class="markdown"><p>Make a &quot;racetrack&quot; plot (a bar plot in polar coordinates, transposed).</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-theta-ecd6315a48713f45d162e64c4414325c.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Theta</h1></header><div class="markdown"><p>Make a &quot;racetrack&quot; plot (a bar plot in polar coordinates, transposed).</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-theta-ecd6315a48713f45d162e64c4414325c.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">k </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeMultiCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">groups</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">k</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Intervals, theta, stacked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;country product price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> k</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">coord</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;theta&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=country&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stack</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;auto&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-theta.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-polar-stacked"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Interval / Polar / Stacked</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-helix"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Interval / Helix »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/31c3c419.ec262224.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/31c3c419.2f652d9f.js"></script>
 </body>
 </html>
\ 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 b7360f0703..9a2fab57e2 100644
--- a/docs/docs/examples/plot-interval-transpose/index.html
+++ b/docs/docs/examples/plot-interval-transpose/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Interval / Transpose | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Interval / Transpose | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a bar plot."><meta data-react-helmet="true" property="og:description" content="Make a bar plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-transpose"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-interval-transpose"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/ac27f894.267ecdf7.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/ac27f894.25e9c805.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Transpose</h1></header><div class="markdown"><p>Make a bar plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-transpose-d7705a1125bbded7646d335b2bfba02d.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval / Transpose</h1></header><div class="markdown"><p>Make a bar plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-transpose-d7705a1125bbded7646d335b2bfba02d.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;product price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-transpose.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Interval</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-groups"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Interval / Groups »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/ac27f894.267ecdf7.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/ac27f894.25e9c805.js"></script>
 </body>
 </html>
\ 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 a089bb93fb..abefb45180 100644
--- a/docs/docs/examples/plot-interval/index.html
+++ b/docs/docs/examples/plot-interval/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Interval | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Interval | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a column plot."><meta data-react-helmet="true" property="og:description" content="Make a column plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-interval"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-interval"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/12e676cf.f3752766.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/12e676cf.1dfd58b3.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval</h1></header><div class="markdown"><p>Make a column plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-95ba708d52bd4b0bda18da55cfd578e0.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Interval</h1></header><div class="markdown"><p>Make a column plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-interval-95ba708d52bd4b0bda18da55cfd578e0.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;product price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-point-custom"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Point / Custom</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-transpose"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Interval / Transpose »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/12e676cf.f3752766.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/12e676cf.1dfd58b3.js"></script>
 </body>
 </html>
\ 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 85ff438769..9cd1d0b5e2 100644
--- a/docs/docs/examples/plot-line-annotation/index.html
+++ b/docs/docs/examples/plot-line-annotation/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Line / Annotation | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Line / Annotation | H2O Wave"><meta data-react-helmet="true" name="description" content="Add annotations to a line plot."><meta data-react-helmet="true" property="og:description" content="Add annotations to a line plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-line-annotation"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-line-annotation"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/e013439f.143ae2bf.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/e013439f.9b377459.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Line / Annotation</h1></header><div class="markdown"><p>Add annotations to a line plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-line-annotation-0b3e87d958bdf0bdcfddc482ad9cf3c5.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Line / Annotation</h1></header><div class="markdown"><p>Add annotations to a line plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-line-annotation-0b3e87d958bdf0bdcfddc482ad9cf3c5.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeTimeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Time-Numeric&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;point&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2010-05-15T19:59:21.000000Z&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;vertical line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">40</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;horizontal line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2010-05-24T19:59:21.000000Z&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2010-05-20T19:59:21.000000Z&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;vertical region&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">70</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">60</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;horizontal region&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2010-05-10T19:59:21.000000Z&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2010-05-05T19:59:21.000000Z&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;rectangular region&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line-annotation.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-line-labels-no-overlap"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Line / Labels / Occlusion</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-path"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Path »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/e013439f.143ae2bf.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/e013439f.9b377459.js"></script>
 </body>
 </html>
\ 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 35e388205e..a026e06415 100644
--- a/docs/docs/examples/plot-line-groups/index.html
+++ b/docs/docs/examples/plot-line-groups/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Line / Groups | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Line / Groups | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a multi-series line plot."><meta data-react-helmet="true" property="og:description" content="Make a multi-series line plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-line-groups"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-line-groups"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/f21433ff.717b57f0.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/f21433ff.738455b0.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Line / Groups</h1></header><div class="markdown"><p>Make a multi-series line plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-line-groups-b3aacba3e2a8fd2306aef09adcb88fea.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Line / Groups</h1></header><div class="markdown"><p>Make a multi-series line plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-line-groups-b3aacba3e2a8fd2306aef09adcb88fea.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeMultiTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeMultiTimeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Line, groups&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;product date price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line-groups.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-line"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Line</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-line-smooth"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Line / Smooth »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/f21433ff.717b57f0.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/f21433ff.738455b0.js"></script>
 </body>
 </html>
\ 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 4d2647889f..75d59b48ef 100644
--- a/docs/docs/examples/plot-line-labels-no-overlap/index.html
+++ b/docs/docs/examples/plot-line-labels-no-overlap/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Line / Labels / Occlusion | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Line / Labels / Occlusion | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a line plot with non-overlapping labels."><meta data-react-helmet="true" property="og:description" content="Make a line plot with non-overlapping labels."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-line-labels-no-overlap"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-line-labels-no-overlap"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/3f5dd320.1b2a555f.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/3f5dd320.9f9d5e6d.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Line / Labels / Occlusion</h1></header><div class="markdown"><p>Make a line plot with non-overlapping labels.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-line-labels-no-overlap-6597ed5a76ab4f19c1f7e189cbc21624.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Line / Labels / Occlusion</h1></header><div class="markdown"><p>Make a line plot with non-overlapping labels.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-line-labels-no-overlap-6597ed5a76ab4f19c1f7e189cbc21624.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeTimeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Remove overlapping labels&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                          label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                          label_overlap</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;hide&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line-labels-no-overlap.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-line-labels-stroked"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Line / Labels/ Stroked</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-line-annotation"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Line / Annotation »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/3f5dd320.1b2a555f.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/3f5dd320.9f9d5e6d.js"></script>
 </body>
 </html>
\ 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 4cc56c042a..8cac6f89c0 100644
--- a/docs/docs/examples/plot-line-labels-stroked/index.html
+++ b/docs/docs/examples/plot-line-labels-stroked/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Line / Labels/ Stroked | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Line / Labels/ Stroked | H2O Wave"><meta data-react-helmet="true" name="description" content="Customize label rendering: add a subtle outline to labels to improve readability."><meta data-react-helmet="true" property="og:description" content="Customize label rendering: add a subtle outline to labels to improve readability."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-line-labels-stroked"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-line-labels-stroked"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/54aab825.d15bb588.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/54aab825.596afbb9.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Line / Labels/ Stroked</h1></header><div class="markdown"><p>Customize label rendering: add a subtle outline to labels to improve readability.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-line-labels-stroked-8f085e306871e3c87d798b4c4206fc11.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Line / Labels/ Stroked</h1></header><div class="markdown"><p>Customize label rendering: add a subtle outline to labels to improve readability.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-line-labels-stroked-8f085e306871e3c87d798b4c4206fc11.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeTimeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Labels, less messy&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                          label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                          label_fill_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;rgba(0,0,0,0.65)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label_stroke_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#fff&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label_stroke_size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line-labels-stroked.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-line-labels"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Line / Labels</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-line-labels-no-overlap"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Line / Labels / Occlusion »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/54aab825.d15bb588.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/54aab825.596afbb9.js"></script>
 </body>
 </html>
\ 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 4c83deebf7..d055fd6d2f 100644
--- a/docs/docs/examples/plot-line-labels/index.html
+++ b/docs/docs/examples/plot-line-labels/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Line / Labels | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Line / Labels | H2O Wave"><meta data-react-helmet="true" name="description" content="Add labels to a line plot."><meta data-react-helmet="true" property="og:description" content="Add labels to a line plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-line-labels"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-line-labels"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/6c3eb428.f53f077a.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/6c3eb428.d37e8fa8.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Line / Labels</h1></header><div class="markdown"><p>Add labels to a line plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-line-labels-f98b2fc53482efef18cf834fcd851704.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Line / Labels</h1></header><div class="markdown"><p>Add labels to a line plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-line-labels-f98b2fc53482efef18cf834fcd851704.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeTimeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Labels&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                          label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line-labels.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-step-before"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Line / Step / Before</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-line-labels-stroked"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Line / Labels/ Stroked »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/6c3eb428.f53f077a.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/6c3eb428.d37e8fa8.js"></script>
 </body>
 </html>
\ 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 885846445e..769952b7c8 100644
--- a/docs/docs/examples/plot-line-smooth/index.html
+++ b/docs/docs/examples/plot-line-smooth/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Line / Smooth | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Line / Smooth | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a line plot using a smooth curve."><meta data-react-helmet="true" property="og:description" content="Make a line plot using a smooth curve."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-line-smooth"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-line-smooth"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/c9e5c590.14dfa3de.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/c9e5c590.a5a4891c.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Line / Smooth</h1></header><div class="markdown"><p>Make a line plot using a smooth curve.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-line-smooth-566975ab0a25c3e3ad7b3941ca441df6.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Line / Smooth</h1></header><div class="markdown"><p>Make a line plot using a smooth curve.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-line-smooth-566975ab0a25c3e3ad7b3941ca441df6.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeTimeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Line, smooth&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;smooth&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line-smooth.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-line-groups"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Line / Groups</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-step"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Line / Step »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/c9e5c590.14dfa3de.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/c9e5c590.a5a4891c.js"></script>
 </body>
 </html>
\ 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 2bc30fae6a..39fd72c21f 100644
--- a/docs/docs/examples/plot-line/index.html
+++ b/docs/docs/examples/plot-line/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Line | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Line | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a line plot."><meta data-react-helmet="true" property="og:description" content="Make a line plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-line"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-line"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/d05981be.9ed423a2.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/d05981be.375a90cf.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Line</h1></header><div class="markdown"><p>Make a line plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-line-47205e6d75190eb08bb6cecf3dfe347b.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Line</h1></header><div class="markdown"><p>Make a line plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-line-47205e6d75190eb08bb6cecf3dfe347b.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeTimeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval-annotation-transpose"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Interval / Annotation / Transpose</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-line-groups"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Line / Groups »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/d05981be.9ed423a2.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/d05981be.375a90cf.js"></script>
 </body>
 </html>
\ 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 7767e3a734..238347f496 100644
--- a/docs/docs/examples/plot-matplotlib/index.html
+++ b/docs/docs/examples/plot-matplotlib/index.html
@@ -5,24 +5,24 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Matplotlib | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Matplotlib | H2O Wave"><meta data-react-helmet="true" name="description" content="Use matplotlib to create plots. Also demonstrates how to provide live control over plots."><meta data-react-helmet="true" property="og:description" content="Use matplotlib to create plots. Also demonstrates how to provide live control over plots."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-matplotlib"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-matplotlib"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/e7c32899.69aa09e3.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/e7c32899.ee888209.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Matplotlib</h1></header><div class="markdown"><p>Use matplotlib to create plots. Also demonstrates how to provide live control over plots.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-matplotlib-14dd0da4129dea8f5aae83573ba31241.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> uuid</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> os</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> numpy </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> np</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> matplotlib</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">pyplot </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> plt</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Matplotlib</h1></header><div class="markdown"><p>Use matplotlib to create plots. Also demonstrates how to provide live control over plots.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-matplotlib-14dd0da4129dea8f5aae83573ba31241.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> uuid</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> os</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> numpy </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> np</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> matplotlib</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">pyplot </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> plt</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">np</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">seed</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">19680801</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># First visit</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">points </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">25</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">alpha </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># First visit</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">points </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">25</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">alpha </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;controls&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Lets make some plots&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;points&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Points&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> step</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">points</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> trigger</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;alpha&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Alpha&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> step</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">alpha</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> trigger</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;plot&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;3 1 2 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Your plot!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">points</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">points </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">points</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">alpha</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">alpha </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">alpha</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -31,18 +31,16 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Upload</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    image_path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">upload</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">image_filename</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Clean up</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    os</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">remove</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">image_filename</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display our plot in our markdown card</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;plot&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;![plot](</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">image_path</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">)&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Save page</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-matplotlib.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-bokeh"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Bokeh</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-plotly"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Plotly »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/e7c32899.69aa09e3.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Save page</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-matplotlib.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-bokeh"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Bokeh</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-plotly"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Plotly »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/e7c32899.ee888209.js"></script>
 </body>
 </html>
\ 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 fa27bfad80..97483badce 100644
--- a/docs/docs/examples/plot-path-point/index.html
+++ b/docs/docs/examples/plot-path-point/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Path / Point | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Path / Point | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a path plot with an additional layer of points."><meta data-react-helmet="true" property="og:description" content="Make a path plot with an additional layer of points."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-path-point"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-path-point"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/de02e8e6.4e7b68e0.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/de02e8e6.9c87a59f.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Path / Point</h1></header><div class="markdown"><p>Make a path plot with an additional layer of points.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-path-point-7e7d80f97ee02c9ac8591676f931f173.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeScatter</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Path / Point</h1></header><div class="markdown"><p>Make a path plot with an additional layer of points.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-path-point-7e7d80f97ee02c9ac8591676f931f173.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeScatter</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeScatter</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Path + Point&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;profit sales&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;path&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=profit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=sales&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;point&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=profit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=sales&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-path-point.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-path"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Path</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-path-smooth"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Path / Smooth »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/de02e8e6.4e7b68e0.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/de02e8e6.9c87a59f.js"></script>
 </body>
 </html>
\ 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 b535eef985..e013c47000 100644
--- a/docs/docs/examples/plot-path-smooth/index.html
+++ b/docs/docs/examples/plot-path-smooth/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Path / Smooth | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Path / Smooth | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a path plot with a smooth curve."><meta data-react-helmet="true" property="og:description" content="Make a path plot with a smooth curve."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-path-smooth"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-path-smooth"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/c87c151a.061d9ab0.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/c87c151a.4b34076d.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Path / Smooth</h1></header><div class="markdown"><p>Make a path plot with a smooth curve.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-path-smooth-d3dc4edb37522cdaf43f8da9ab425156.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeScatter</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Path / Smooth</h1></header><div class="markdown"><p>Make a path plot with a smooth curve.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-path-smooth-d3dc4edb37522cdaf43f8da9ab425156.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeScatter</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeScatter</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Path, smooth&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;profit sales&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;path&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=profit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=sales&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;smooth&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-path-smooth.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-path-point"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Path / Point</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-area"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Area »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/c87c151a.061d9ab0.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/c87c151a.4b34076d.js"></script>
 </body>
 </html>
\ 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 658936543c..e26bddb6e9 100644
--- a/docs/docs/examples/plot-path/index.html
+++ b/docs/docs/examples/plot-path/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Path | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Path | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a path plot."><meta data-react-helmet="true" property="og:description" content="Make a path plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-path"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-path"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/2fa9e1ff.5cb4a6a3.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/2fa9e1ff.04d2dc0e.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Path</h1></header><div class="markdown"><p>Make a path plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-path-2737001d0f8727c8d62799faf298a88e.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeScatter</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Path</h1></header><div class="markdown"><p>Make a path plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-path-2737001d0f8727c8d62799faf298a88e.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeScatter</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeScatter</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Path&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;profit sales&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;path&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=profit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=sales&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-path.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-line-annotation"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Line / Annotation</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-path-point"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Path / Point »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/2fa9e1ff.5cb4a6a3.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/2fa9e1ff.04d2dc0e.js"></script>
 </body>
 </html>
\ 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 da3968b174..5602bf6e82 100644
--- a/docs/docs/examples/plot-plotly/index.html
+++ b/docs/docs/examples/plot-plotly/index.html
@@ -5,42 +5,40 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Plotly | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Plotly | H2O Wave"><meta data-react-helmet="true" name="description" content="Use plotly to create plots. Also demonstrates how to provide live control over plots."><meta data-react-helmet="true" property="og:description" content="Use plotly to create plots. Also demonstrates how to provide live control over plots."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-plotly"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-plotly"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/aa9ca283.5215397c.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/aa9ca283.79c8caef.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Plotly</h1></header><div class="markdown"><p>Use plotly to create plots. Also demonstrates how to provide live control over plots.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-plotly-3b71042a87f940cd5002711c65e34e54.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> numpy </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> np</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> plotly </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> graph_objects </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> go</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> plotly </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> io </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> pio</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Plotly</h1></header><div class="markdown"><p>Use plotly to create plots. Also demonstrates how to provide live control over plots.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-plotly-3b71042a87f940cd5002711c65e34e54.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> numpy </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> np</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> plotly </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> graph_objects </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> go</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> plotly </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> io </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> pio</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">np</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">seed</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">19680801</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># First visit</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">points </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">25</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plotly_controls </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">False</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># First visit</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">points </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">25</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plotly_controls </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">False</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;controls&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;points&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Points&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> step</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">points</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> trigger</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">toggle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;plotly_controls&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Plotly Controls&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> trigger</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;plot&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">frame_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 3 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">points</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">points </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">points</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plotly_controls </span><span class="token keyword" style="font-style:italic">is</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">None</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plotly_controls </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plotly_controls</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">points</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create plot with plotly</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    fig </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> go</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">Figure</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">go</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">Scatter</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">np</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">rand</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">np</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">rand</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        mode</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;markers&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        marker</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">8</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> np</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">rand</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">**</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">np</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">rand</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        opacity</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0.8</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    _ </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> fig</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">update_layout</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">4</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">134</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">76</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        margin</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">l</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> r</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> t</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> b</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        paper_bgcolor</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;rgb(255, 255, 255)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_bgcolor</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;rgb(255, 255, 255)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    config </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;scrollZoom&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plotly_controls</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">              </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;showLink&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plotly_controls</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">              </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;displayModeBar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plotly_controls</span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    html </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pio</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">to_html</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fig</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> validate</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">False</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> include_plotlyjs</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cdn&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> config</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">config</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;plot&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> html</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Save page</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-plotly.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-matplotlib"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Matplotlib</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-d3"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / D3.js »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/aa9ca283.5215397c.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Save page</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-plotly.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-matplotlib"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Matplotlib</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-d3"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / D3.js »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/aa9ca283.79c8caef.js"></script>
 </body>
 </html>
\ 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 61a1160fa9..f49f7ef14a 100644
--- a/docs/docs/examples/plot-point-annotation/index.html
+++ b/docs/docs/examples/plot-point-annotation/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Point / Annotation | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Point / Annotation | H2O Wave"><meta data-react-helmet="true" name="description" content="Add annotations (points, lines and regions) to a plot."><meta data-react-helmet="true" property="og:description" content="Add annotations (points, lines and regions) to a plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-point-annotation"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-point-annotation"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/ed3db3ec.f478a091.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/ed3db3ec.c5ffd957.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Point / Annotation</h1></header><div class="markdown"><p>Add annotations (points, lines and regions) to a plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-point-annotation-394f235e137883e033b2cc056955e713.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeScatter</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Point / Annotation</h1></header><div class="markdown"><p>Add annotations (points, lines and regions) to a plot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-point-annotation-394f235e137883e033b2cc056955e713.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeScatter</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeScatter</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Numeric-Numeric&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;price performance&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;point&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=performance&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># the plot</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;point&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># A single reference point</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">40</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;vertical line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">40</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;horizontal line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">70</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">60</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;vertical region&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">70</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">60</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;horizontal region&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;rectangular region&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point-annotation.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-point-groups"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Point / Groups</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-point-custom"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Point / Custom »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/ed3db3ec.f478a091.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/ed3db3ec.c5ffd957.js"></script>
 </body>
 </html>
\ 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 0db11e423f..e7fdc13cf1 100644
--- a/docs/docs/examples/plot-point-custom/index.html
+++ b/docs/docs/examples/plot-point-custom/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Point / Custom | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Point / Custom | H2O Wave"><meta data-react-helmet="true" name="description" content="Customize a plot&#x27;s fill/stroke color, size and opacity."><meta data-react-helmet="true" property="og:description" content="Customize a plot&#x27;s fill/stroke color, size and opacity."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-point-custom"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-point-custom"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/190e4f21.3960ce2c.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/190e4f21.969e5a0e.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Point / Custom</h1></header><div class="markdown"><p>Customize a plot&#x27;s fill/stroke color, size and opacity.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-point-custom-2a5eefc8951352109b57a03aa44baeb8.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Point / Custom</h1></header><div class="markdown"><p>Customize a plot&#x27;s fill/stroke color, size and opacity.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-point-custom-2a5eefc8951352109b57a03aa44baeb8.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeScatter</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">40</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeScatter</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Point, custom&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;price performance discount&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;point&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=performance&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=discount&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> size_range</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;4 30&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                          fill_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#eb4559&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stroke_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#eb4559&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stroke_size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> fill_opacity</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0.3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                          stroke_opacity</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">randint</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point-custom.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-point-annotation"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Point / Annotation</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-interval"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Interval »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/190e4f21.3960ce2c.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/190e4f21.969e5a0e.js"></script>
 </body>
 </html>
\ 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 3fae68a600..85c108e4ad 100644
--- a/docs/docs/examples/plot-point-groups/index.html
+++ b/docs/docs/examples/plot-point-groups/index.html
@@ -5,35 +5,35 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Point / Groups | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Point / Groups | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a scatterplot with categories encoded as colors."><meta data-react-helmet="true" property="og:description" content="Make a scatterplot with categories encoded as colors."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-point-groups"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-point-groups"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/1ac8922b.ecb893d7.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/1ac8922b.6db144ec.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Point / Groups</h1></header><div class="markdown"><p>Make a scatterplot with categories encoded as colors.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-point-groups-d949b54bdc3583a858a7cc8c46532c90.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeScatter</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Point / Groups</h1></header><div class="markdown"><p>Make a scatterplot with categories encoded as colors.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-point-groups-d949b54bdc3583a858a7cc8c46532c90.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeScatter</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">create_fake_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> f2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> f3 </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeScatter</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> FakeScatter</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> FakeScatter</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Point, groups&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;product price performance&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;point&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=performance&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> shape</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;circle&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> create_fake_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;G1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> f1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> create_fake_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;G2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> f1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> create_fake_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;G3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> f1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point-groups.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-point-map"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Point / Map</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-point-annotation"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Point / Annotation »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/1ac8922b.ecb893d7.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/1ac8922b.6db144ec.js"></script>
 </body>
 </html>
\ 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 f2dc807875..259b7f2980 100644
--- a/docs/docs/examples/plot-point-map/index.html
+++ b/docs/docs/examples/plot-point-map/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Point / Map | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Point / Map | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a plot to compare quantities across categories. Similar to a heatmap, but using size-encoding instead of color-encoding."><meta data-react-helmet="true" property="og:description" content="Make a plot to compare quantities across categories. Similar to a heatmap, but using size-encoding instead of color-encoding."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-point-map"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-point-map"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/38067279.9c6d1d12.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/38067279.fc1a43b6.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Point / Map</h1></header><div class="markdown"><p>Make a plot to compare quantities across categories. Similar to a heatmap, but using size-encoding instead of color-encoding.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-point-map-13e6e7b5d7bfc7c6337172bb86dc84e2.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Point / Map</h1></header><div class="markdown"><p>Make a plot to compare quantities across categories. Similar to a heatmap, but using size-encoding instead of color-encoding.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-point-map-13e6e7b5d7bfc7c6337172bb86dc84e2.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">k1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> k2 </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Points, size-encoded&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;country product profit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> k1 </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> k2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;point&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=country&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=profit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> shape</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;circle&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">rows </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">k1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> j </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">k2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        rows</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">append</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;A</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">i </span><span class="token string-interpolation interpolation operator" style="color:rgb(137, 221, 255)">+</span><span class="token string-interpolation interpolation"> </span><span class="token string-interpolation interpolation number" style="color:rgb(247, 140, 108)">1</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;B</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">j </span><span class="token string-interpolation interpolation operator" style="color:rgb(137, 221, 255)">+</span><span class="token string-interpolation interpolation"> </span><span class="token string-interpolation interpolation number" style="color:rgb(247, 140, 108)">1</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> rows</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point-map.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-point-sizes"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Point / Sizes</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-point-groups"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Point / Groups »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/38067279.9c6d1d12.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/38067279.fc1a43b6.js"></script>
 </body>
 </html>
\ 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 15eb02768f..ff6f7f5c44 100644
--- a/docs/docs/examples/plot-point-shapes/index.html
+++ b/docs/docs/examples/plot-point-shapes/index.html
@@ -5,35 +5,35 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Point / Shapes | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Point / Shapes | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a scatterplot with categories encoded as mark shapes."><meta data-react-helmet="true" property="og:description" content="Make a scatterplot with categories encoded as mark shapes."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-point-shapes"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-point-shapes"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/4b953dd8.f8f0cb02.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/4b953dd8.6b813e7d.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Point / Shapes</h1></header><div class="markdown"><p>Make a scatterplot with categories encoded as mark shapes.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-point-shapes-98b5ada97343dfb174c19df0f0ea7ea8.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeScatter</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Point / Shapes</h1></header><div class="markdown"><p>Make a scatterplot with categories encoded as mark shapes.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-point-shapes-98b5ada97343dfb174c19df0f0ea7ea8.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeScatter</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">create_fake_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> f2 </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeScatter</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> FakeScatter</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Point, shapes&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;product price performance&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;point&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=performance&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> shape</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> shape_range</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;circle square&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> create_fake_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;G1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> f1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> create_fake_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;G2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> f1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point-shapes.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-point"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Point</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-point-sizes"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Point / Sizes »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/4b953dd8.f8f0cb02.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/4b953dd8.6b813e7d.js"></script>
 </body>
 </html>
\ 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 32112ac8fe..815bd1d996 100644
--- a/docs/docs/examples/plot-point-sizes/index.html
+++ b/docs/docs/examples/plot-point-sizes/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Point / Sizes | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Point / Sizes | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a scatterplot with mark sizes mapped to a continuous variable (a &quot;bubble plot&quot;)."><meta data-react-helmet="true" property="og:description" content="Make a scatterplot with mark sizes mapped to a continuous variable (a &quot;bubble plot&quot;)."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-point-sizes"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-point-sizes"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/1cc3ff79.a774c9c2.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/1cc3ff79.d36455e4.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Point / Sizes</h1></header><div class="markdown"><p>Make a scatterplot with mark sizes mapped to a continuous variable (a &quot;bubble plot&quot;).</p><div class="cover" style="background-image:url(/wave/assets/images/plot-point-sizes-8591d0b3d70acfe4b28d08c74515ed4d.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Point / Sizes</h1></header><div class="markdown"><p>Make a scatterplot with mark sizes mapped to a continuous variable (a &quot;bubble plot&quot;).</p><div class="cover" style="background-image:url(/wave/assets/images/plot-point-sizes-8591d0b3d70acfe4b28d08c74515ed4d.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeScatter</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">40</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeScatter</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Point, sized&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;price performance discount&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;point&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=performance&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=discount&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">randint</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point-sizes.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-point-shapes"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Point / Shapes</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-point-map"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Point / Map »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/1cc3ff79.a774c9c2.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/1cc3ff79.d36455e4.js"></script>
 </body>
 </html>
\ 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 b47df35d0f..3fc7a4fc3a 100644
--- a/docs/docs/examples/plot-point/index.html
+++ b/docs/docs/examples/plot-point/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Point | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Point | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a scatterplot."><meta data-react-helmet="true" property="og:description" content="Make a scatterplot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-point"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-point"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/34cd3da4.2c59e278.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/34cd3da4.553abcee.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Point</h1></header><div class="markdown"><p>Make a scatterplot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-point-ca45d9c0f59368e2e351f8bc69f5566f.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeScatter</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Point</h1></header><div class="markdown"><p>Make a scatterplot.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-point-ca45d9c0f59368e2e351f8bc69f5566f.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeScatter</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeScatter</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Point&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;price performance&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;point&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=performance&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/card-menu"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Context Menu</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-point-shapes"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Point / Shapes »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/34cd3da4.2c59e278.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/34cd3da4.553abcee.js"></script>
 </body>
 </html>
\ 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 73fa376bed..4cc4e1b93d 100644
--- a/docs/docs/examples/plot-polygon/index.html
+++ b/docs/docs/examples/plot-polygon/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Polygon | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Polygon | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a heatmap."><meta data-react-helmet="true" property="og:description" content="Make a heatmap."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-polygon"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-polygon"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/a814b970.194c0040.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/a814b970.9c5f6aec.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Polygon</h1></header><div class="markdown"><p>Make a heatmap.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-polygon-cef10aff7abe01503bac3e360a6ece1c.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Polygon</h1></header><div class="markdown"><p>Make a heatmap.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-polygon-cef10aff7abe01503bac3e360a6ece1c.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">k1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> k2 </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Heatmap&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;country product profit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> k1 </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> k2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;polygon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=country&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=product&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=profit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                color_range</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#fee8c8 #fdbb84 #e34a33&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">rows </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">k1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> j </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">k2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        rows</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">append</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;A</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">i </span><span class="token string-interpolation interpolation operator" style="color:rgb(137, 221, 255)">+</span><span class="token string-interpolation interpolation"> </span><span class="token string-interpolation interpolation number" style="color:rgb(247, 140, 108)">1</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;B</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">j </span><span class="token string-interpolation interpolation operator" style="color:rgb(137, 221, 255)">+</span><span class="token string-interpolation interpolation"> </span><span class="token string-interpolation interpolation number" style="color:rgb(247, 140, 108)">1</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> rows</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-polygon.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-area-line-groups"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Area + Line / Groups</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-histogram"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Histogram »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/a814b970.194c0040.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/a814b970.9c5f6aec.js"></script>
 </body>
 </html>
\ 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 97d927ee3d..ede7d9daf3 100644
--- a/docs/docs/examples/plot-step-after/index.html
+++ b/docs/docs/examples/plot-step-after/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Line / Step / After | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Line / Step / After | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a line plot with a step-after curve."><meta data-react-helmet="true" property="og:description" content="Make a line plot with a step-after curve."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-step-after"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-step-after"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/941b9d10.547b026b.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/941b9d10.391830c3.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Line / Step / After</h1></header><div class="markdown"><p>Make a line plot with a step-after curve.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-step-after-72cc87c6a29c712eb6728e9d6bd626ca.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Line / Step / After</h1></header><div class="markdown"><p>Make a line plot with a step-after curve.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-step-after-72cc87c6a29c712eb6728e9d6bd626ca.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeTimeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Line, step-right&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step-after&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-step-after.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-step"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Line / Step</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-step-before"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Line / Step / Before »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/941b9d10.547b026b.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/941b9d10.391830c3.js"></script>
 </body>
 </html>
\ 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 02297bca61..867457f5f5 100644
--- a/docs/docs/examples/plot-step-before/index.html
+++ b/docs/docs/examples/plot-step-before/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Line / Step / Before | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Line / Step / Before | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a line plot with a step-before curve."><meta data-react-helmet="true" property="og:description" content="Make a line plot with a step-before curve."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-step-before"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-step-before"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/26907763.3c7ec9cd.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/26907763.78a84cc6.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Line / Step / Before</h1></header><div class="markdown"><p>Make a line plot with a step-before curve.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-step-before-45d2a85b93deb34a9e029e0d1ac5e578.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Line / Step / Before</h1></header><div class="markdown"><p>Make a line plot with a step-before curve.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-step-before-45d2a85b93deb34a9e029e0d1ac5e578.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeTimeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Line, step-left&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step-before&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-step-before.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-step-after"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Line / Step / After</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-line-labels"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Line / Labels »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/26907763.3c7ec9cd.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/26907763.78a84cc6.js"></script>
 </body>
 </html>
\ 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 50e5618c3e..42d4f86ffc 100644
--- a/docs/docs/examples/plot-step/index.html
+++ b/docs/docs/examples/plot-step/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Line / Step | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Line / Step | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a line plot with a step curve."><meta data-react-helmet="true" property="og:description" content="Make a line plot with a step curve."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-step"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-step"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/17b5adee.dc914a2c.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/17b5adee.db532509.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Line / Step</h1></header><div class="markdown"><p>Make a line plot with a step curve.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-step-8c593fd75d3829ee2e6928c3e3c32372.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Line / Step</h1></header><div class="markdown"><p>Make a line plot with a step curve.</p><div class="cover" style="background-image:url(/wave/assets/images/plot-step-8c593fd75d3829ee2e6928c3e3c32372.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeTimeSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">n </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeTimeSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Line, step&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;date price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_scale</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;time&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=date&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> dx </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">n</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-step.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-line-smooth"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Line / Smooth</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-step-after"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Line / Step / After »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/17b5adee.dc914a2c.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/17b5adee.db532509.js"></script>
 </body>
 </html>
\ 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 891e45127d..6e7f243067 100644
--- a/docs/docs/examples/plot-vegalite-form/index.html
+++ b/docs/docs/examples/plot-vegalite-form/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Vega-lite / Form | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Vega-lite / Form | H2O Wave"><meta data-react-helmet="true" name="description" content="Display a Vega-lite plot inside a form card"><meta data-react-helmet="true" property="og:description" content="Display a Vega-lite plot inside a form card"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-vegalite-form"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-vegalite-form"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/4104f38c.e138268c.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/4104f38c.fb19bd1a.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Vega-lite / Form</h1></header><div class="markdown"><p>Display a Vega-lite plot inside a form card</p><div class="cover" style="background-image:url(/wave/assets/images/plot-vegalite-form-0d561c88fa3bbc9f612e304db9a412b4.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Vega-lite / Form</h1></header><div class="markdown"><p>Display a Vega-lite plot inside a form card</p><div class="cover" style="background-image:url(/wave/assets/images/plot-vegalite-form-0d561c88fa3bbc9f612e304db9a412b4.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">spec </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">{</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  &quot;description&quot;: &quot;A simple bar plot with embedded data.&quot;,</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  &quot;mark&quot;: &quot;bar&quot;,</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  &quot;encoding&quot;: {</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">    &quot;x&quot;: {&quot;field&quot;: &quot;a&quot;, &quot;type&quot;: &quot;ordinal&quot;},</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">    &quot;y&quot;: {&quot;field&quot;: &quot;b&quot;, &quot;type&quot;: &quot;quantitative&quot;}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  }</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -28,15 +28,15 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 -1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Example 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">vega_visualization</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            specification</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">spec</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fields</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;a&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;b&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">poll</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Example 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">vega_visualization</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            specification</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">spec</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fields</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;a&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;b&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">poll</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Example 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">vega_visualization</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            specification</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">spec</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fields</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;a&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;b&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">poll</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-vegalite-form.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-vegalite-update"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Vega-lite / Update</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-altair"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Altair »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/4104f38c.e138268c.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/4104f38c.fb19bd1a.js"></script>
 </body>
 </html>
\ 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 5e4cc9b176..5c8639240e 100644
--- a/docs/docs/examples/plot-vegalite-update/index.html
+++ b/docs/docs/examples/plot-vegalite-update/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Vega-lite / Update | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Vega-lite / Update | H2O Wave"><meta data-react-helmet="true" name="description" content="Periodically update a Vega-lite plot."><meta data-react-helmet="true" property="og:description" content="Periodically update a Vega-lite plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-vegalite-update"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-vegalite-update"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/3697284d.20d40ff4.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/3697284d.4cf13213.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Vega-lite / Update</h1></header><div class="markdown"><p>Periodically update a Vega-lite plot.</p><div class="cover" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATsAAAF7CAYAAACthCyrAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjQ4OjU5IFBNIFBEVNBC+w4AAB1NSURBVHic7d17XFR14v/x9xkUA7NaV0C/miRlWngjRVKx8pI/TS1vra7lZhfTTC2X+pbrVui3Qn9lvyzdxNTM/SVu/na97WaXr5KhXzFZwLysYat+f4pCArnqoAjM+f6BTuANBwYG5/N6Ph7zkJk553M+M+jLc+YMg+V0Om0BgJ9z+HoCAFAbiB0AIxA7AEYgdgCMQOwAGIHYATACsQNgBGIHwAjEDoARiB0AI9TzxiC2zU+cAfAey7K8PmaVY3e5wBE+AFVRPnDlO+Kt8Hkcu/KTCAwMVL169WqkwgDMZdu2SkpKdPbsWXdzqtsZj16zO79R27YVGBio+vXrEzoAXmdZlurXr6/AwMAK3akOj09Q2LYt27ZVr55XXu4DgMuqV6+euznVddWxc2/s3IbZowNQ0yzLKmuPF/buPD6Mtau5QQDwhLe6U+XDWACoDbV6GFv+BUJiB6A2XdidqvanSj9BQewA1BZv9YYfFwNgBM/PxgKAj9Ta2dhzm6vyxgCgamrxfXYAcC0jdgCMQOwAGIHYATACsQNgBGIHwAjEDoARiB0AI/gkdocOHVLnu6Lclx7du2nK5EnKycmRJP1x2TJ1vitKx48fr3Ss7du/VWLiArlcrirP5y9/+bPu79tHBfn5crlcSkxcoO3bv3Xf/9xzU/ToI6OrPH5lsrMPKzFxgbKzD9fYNi4ntkd3zZ41q9Ll3nzjDcX26F7pcpd6/oC6wKd7dv36/S+98sqrGjlylLZt26Z///cXPR5j+7fbtTAxsVo/RvJvzf5N7du313VBQbJtWwsTE7X92+1VHs9Thw9na2Fiog4fzvZ43br2Y3y+eP6Aq+HT2LXv0F5Dhg7VlOee08iRo7R71y4dOXLkouU+X79eQ4c8pG53363f/GaMdu7cKalsD3Dx4kWSpK7RXfR1cnKF9X71q4f17LMTJUk5OTnqfFeUXoiLkyTt27dPne+K0tq1a7Rv3z5t2rRJZ8+ede+9LF68SL8eNbLCeH+YP189Y3to0MAHtC019ZKP6fvvv9cTj49Vj+7dNPrXo9x7OO/MmaMe3bupID9fkvSbMY/qkdGjtXv3bk18ZoIkaeIzE/T2229dcRypbG9sRny8Hn1ktB4f+5j27NmjzndFaenSjzRs6BB173a3ZsTHu/d2Dx48qInPTFDPnrEa+MAAffrpnyr93mRnH9aTTzyh2B7d9eILL6jobJH7Ptu29dGSJRo8aKBie3TXs89OVG5ujntuFz5/Vdk+4G115jW7G268QZJUVFRU4fYdmZn6/e+n69Zbb9Prb7yh4rNnNWXyJB0/flz39+undu3aS5LenzdfHTt1qrBuTNcYfffdd3K5XMpIT5ckZWZmlP2ZUfZnTExMhXXenfueJKldu/aa/vvfu28/cOCA/vu/D2r8hAlyFhZqxoz4ix7DqVOnNOnZiXK5XHotPl4333yzpj7/vHJzc/XUuHEKDAzU4iWL9XVysnbv3q3fxsWp1S23aOzYxyVJY8c+rocf/tUVxznv88/XKybmbj3+xJPu29asXq0nnnhSffr01dq1a/TF559Lkl579VX99NNPmjVrtu65517NnjVLP/yw74rfj99N+53+8Y89mjR5ilq1aqUvv/jCfd+WzZs1f/48DRs2XG8mJGhfVpbefuvtyz5/Vdk+4G0+/a05+Xn5ys/P16FD/1+r/vIXNf7lL9WyZcsKy6xdt1b169fXzP/4DwUHByskJESPj31MyRs3auiwYYqJidGuXTsVExOjgICACut2jemq5cs/UVbW98rIyFBkZKR2796tAwcOKDMzQ+Hh4QoLa1phnS5dukgqi+D5kEpSYIMGmjX7f8uyLP30009a+tFHOnXqlK6//nr3MptTUlRQUKBFixYr/JZb1KtXb93Ts6fWf/aZxj7+uJ586inNnzdPWzZv1n29eqlz587n5hmjpUs/UteYGIWHh+vz9euvOI4k9ezZU5OnTJEk7dmzR5L0yKNjNGjwYPXu00efffY3HThwQJK09OOPVVxcrIKCAvfrgllZWbrtttaX/L7k5uZq166dGjv2cY0aNUqStOO7Hdq9a5ckKbZnT/3X1lSVFBcr+8gRNQkJUVbW95d9/jzdPlATfBq7pUs/0tKlH0mSGjZsqIRZsy8K1rEff1RISKiCg4MlSbeEh0uScn/MVWU639VZAQEByszIVEZGukaOHKUTJ04oIyNdmZmZ6nnPPVc915AmTdy/ZKjR9Y0kSSUlJRWWOT+nYcOGKigoSJJUXHzWvUc2bOgwvf/eezp06JCm/W76ZbdV2TiS9MtfNrlovZtuukmS3M9VaWmpJOnDhQuVlLRcJaWlatG8edl9JaWX3X5BQYEkKfyWcPdtN998szt2Bw8eVPxrr2r37t1q1qyZioqKVL9+/cuO5+n2gZrg09h169Zdox95REFB16lNm7buf6TlhYSGavv27Sp0OhXcsKF7byU0NLTS8YMbNlS7du2U/HWyDhw4oOiuXfX9999r/WefKScn56JD2Opq0qQsQG/PmePeayktLdWNN94oSfp05aeSpGbNmilp+fLLbr+ycTyxf/9+JSYu0PPPT9WjY8Zo7969lZ5Zbty4sSS5n2tJOrD/568/+OAPys/P1xdffqXGjRvr+eeeu+xhaVW2D9QEn75m171Hd3Xv3l1RUXddMnSSNGjQIBUXF2v69On6fP16vfHmG2rUqJF69eotSQpuWLbeR0uWuF/8L69rTIzStm9XaGiowsPDFd01Wunp6XI4HOrSJfqi5QMCAtSgQQNt3fpf2rJli0ePp2fPe3TjjTdqyeLF2r17tz5fv14Pjxiu9PR0FRQUaMnixRrx8MOKe+EFpaR8o9StWyVJDc89hrVr1ygrK+uK43jK5Srbg8o+kq1vt23T/HnzKl0nLCxM7dq114qkFfrkk/+rd9/9P/rHP/b8PGapS0VFRdq1a6f+38qVFU6eXPj8VWX7QE2oMycoLicq6i69/vobOnjwgGbMiNd1DRrovffn6Re/+IUk6cEHH1KX6GgtXrxYmTsyL1q/a9eyvafo6LKwdekSLcuydMedd6pRo0aX3OYLL76onJwczZ/3vkdzveGGG/T+vPkKCAjQjPh4rVu3TpMnT1Hv3r01f37ZP/Jx455Wr169FRV1l+bMeVulpaW6885IDRs2XN98843Wrl1zxXE8ddttrTXu6af11Zdf6tVXX1GPHj2uar03E97UHXe01Qd/+IOOZGdr8ODB7vsmTZ6spk2batrLL2vTpq91X69eFdYt//xVdfuAt1lOp7PSN2qV/+0+LlepSktd7kMdAKhJBQUFCghwyOEIkGVZ7oun6vyeHQB4A7EDYARiB8AIxA6AEYgdACMQOwBGIHYAjEDsABiB2AEwArEDYARiB8AIxA6AEYgdACMQOwBGIHYAjEDsABiB2AEwArEDYARiB8AIxA6AEYgdACMQOwBG8KvYffnll4qNjVWfPn00YsQInT59WpIUHx+vqKgodejQQWlpaT6eJQBf8KvYTZ06VZ9++qk2bNigli1basWKFUpJSVFqaqrS09OVlJSkuLg4X08TgA/4VexCQkKUl5cnSTp+/LhCQkKUnJys4cOHy7IsRUZGKi8vT4WFhT6eKYDa5lexe+utt9SvXz917NhR2dnZGjRokI4eParQ0FD3MiEhIcrNzfXhLAH4Qj1fT8CbJk2apA0bNigyMlKTJ0/W0qVLFRgYWGEZ27ZlWZYkafPmzdqyZUuF+0NCQnTffffV1pSBGhcREeHrKdQJfhO7oqIi/fjjj4qMjJQk9enTR1988YXCw8OVk5PjXu7YsWMKCwuTJMXGxio2NrbCOLNnz+YvB/zG/v37fT2FOsNvDmMbNGiggIAAHTlyRJKUmZmp1q1ba8CAAVq5cqVs21ZmZqZatGihoKAgH88WQG3zmz07SVqwYIFGjBihoKAgNW7cWEuXLlXDhg0VHR2ttm3bKjg4WMuWLfP1NAH4gOV0Ou3KFrJt231xuUpVWupS48aNa2N+tW727Nl66aWXfD0NwCv2799/zb8sU1BQoIAAhxyOAFmW5b54ym8OYwHgSogdACMQOwBGIHYAjEDsABiB2AEwArEDYARiB8AIxA6AEYgdACP41c/GAr4wZNpyr4yzOmG0V8bBpbFnB8AIxA6AEYgdACMQOwBGIHYAjEDsABiB2AEwArEDYARiB8AIxA6AEYgdACMQOwBGIHYAjEDsABiB2AEwArEDYARiB8AIxA6AEYgdACMQOwBGIHYAjEDsABiB2AEwArEDYARiB8AIxA6AEYgdACMQOwBGIHYAjEDsABjBr2J34sQJ9e/fX+3bt9fQoUN19uxZSVJ8fLyioqLUoUMHpaWl+XiWAHzBr2L3zjvv6IEHHtDOnTvdYUtJSVFqaqrS09OVlJSkuLg4X08TgA/U8/UEvGndunVKTk6WJM2YMUOSNHPmTA0fPlyWZSkyMlJ5eXkqLCxUcHCwL6cKoJb51Z6d0+nU/Pnz1bt3b40fP15FRUU6evSoQkND3cuEhIQoNzfXh7ME4At+tWd35MgR9ezZU9OmTdOkSZP04YcfKjAwsMIytm3LsixJ0ubNm7Vly5aLxtm/f3+tzBcoj793NcuvYte0aVN169ZNktS/f3999tlnatmypXJyctzLHDt2TGFhYZKk2NhYxcbGVhhj9uzZioiIqL1Jww+kemWUmvh7R0B/5leHsf369dNf//pXSdI333yjNm3aaMCAAVq5cqVs21ZmZqZatGihoKAgH88UQG3zqz27+Ph4jRkzRjNnzlR4eLji4+MVHBys6OhotW3bVsHBwVq2bJmvpwnAB/wqdk2aNNH69esvuj0hIUEJCQk+mBGAusKvDmMB4HKIHQAjEDsARiB2AIxA7AAYgdgBMAKxA2AEYgfACMQOgBGIHQAjEDsARiB2AIxA7AAYgdgBMAKxA2AEYgfACMQOgBGIHQAjEDsARiB2AIzgV79wB3XDkGnLvTLO6oTRXhkHkNizA2AIYgfACMQOgBGIHQAjcILiGsQJAMBz7NkBMAJ7djBO0n9+55Vxft23g1fGQe0gdjDOnzbs8so4xO7awmEsACMQOwBGIHYAjEDsABiB2AEwArEDYARiB8AIxA6AEYgdACMQOwBGIHYAjEDsABjBL2M3d+5cdenSxX09Pj5eUVFR6tChg9LS0nw4MwC+Umc/9cS2bW3YsEHp6elyOByKjo7WvffeW+l6R48e1bp169zXU1JSlJqaqvT0dO3Zs0cTJ07Upk2banLqAOqgOhu7CRMmaOHChRVumzp1qt55550rrvfiiy/q9ddf16RJkyRJycnJGj58uCzLUmRkpPLy8lRYWKjg4OAamzuAuqfOHsYuX75cM2fO1OHDh3Xo0CHNnDlTS5YsueI6X331lcLCwtSpUyf3bUePHlVoaKj7ekhIiHJzc2ts3gDqpjq7Z3f77bdr5MiRat68uSRp9OjRWrVq1WWXLyoq0qxZs7RmzZoKtwcGBla4btu2LMuSJG3evFlbtmy5aKz9+/dXd/rXhLr+OE2bX11/vNe6Ohe7l19+WZIUGRmpgQMH6sEHH5RlWVq9erX69+9/2fXS0tKUnZ2tvn37yrZt7d27V+PHj1erVq2Uk5PjXu7YsWMKCwuTJMXGxio2NrbCOLNnz1ZEREQNPDJvSvXKKDX3OE2bX919vAT0Z3Uudm+//XaF63PnznV/PX/+fM2bN++S6/Xo0UN79+6VJJ05c0axsbFKTEzUjh07FBcXp6efflo7duxQixYtFBQUVHMPAECdVOdiV1JSctn7XC6Xx+N17NhR0dHRatu2rYKDg7Vs2bLqTA/ANarOxe5KHI6rO59y3XXXVXg/XUJCghISEmpqWgCuAXX2bCwAeBOxA2AEYgfACMQOgBGIHQAjEDsARiB2AIxA7AAYgdgBMAKxA2AEYgfACMQOgBGIHQAjEDsARiB2AIxwTX2e3bVqyLTlXhlndcJor4wDmIg9OwBGIHYAjEDsABiB2AEwArEDYARiB8AIxA6AEYgdACMQOwBGIHYAjEDsABiB2AEwArEDYARiB8AIxA6AEYgdACMQOwBGIHYAjEDsABiB2AEwArEDYARiB8AIxA6AEYgdACPwS7IvwbRfam3a44WZ/GrPLi0tTdHR0Wrfvr1Gjhyp4uJiSVJ8fLyioqLUoUMHpaWl+XiWAHzBr2L3zDPPaNGiRdq5c6cCAwO1atUqpaSkKDU1Venp6UpKSlJcXJyvpwnAB/zqMHbt2rVq1qyZJKl58+ZyOp1KTk7W8OHDZVmWIiMjlZeXp8LCQgUHB/t4tgBqk1/t2Z0PXX5+vv72t79p8ODBOnr0qEJDQ93LhISEKDc311dTBOAjfrVnJ5WFbvDgwZozZ46aNGmiwMDACvfbti3LsiRJmzdv1pYtW2psLvv372e8OjSet5n2eK91fhW7wsJCDRw4UK+99pr69esnqWxvLycnx73MsWPHFBYWJkmKjY1VbGxshTFmz57ttflERESc+yqV8ao1nreZ83gJ6M/86jB22rRpGj9+vAYMGOC+bcCAAVq5cqVs21ZmZqZatGihoKAgH84SgC/41Z7dggULdNttt2nOnDmSpDFjxuill15SdHS02rZtq+DgYC1btszHswTgC34Vu6KiokvenpCQoISEhFqeDYC6xK8OYwHgcogdACMQOwBGIHYAjEDsABiB2AEwArEDYARiB8AIxA6AEYgdACMQOwBGIHYAjEDsABiB2AEwArEDYARiB8AIxA6AEYgdACMQOwBGIHYAjEDsABiB2AEwgl/9KkX4p6T//M4r4/y6bwevjINrE7FDnfenDbu8Mg6xMxuHsQCMQOwAGIHYATACsQNgBGIHwAjEDoARiB0AIxA7AEYgdgCMQOwAGIHYATACsQNgBGIHwAh86glQx/CRVjWD2AF1DB9pVTM4jAVgBGIHwAhGxC4+Pl5RUVHq0KGD0tLSfD0dAD7g97FLSUlRamqq0tPTlZSUpLi4OF9PCYAP+H3skpOTNXz4cFmWpcjISOXl5amwsNDX0wJQy/w+dkePHlVoaKj7ekhIiHJzc304IwC+YDmdTruyhWzbdl9crlKVlrrUuHHj2phftT333HPq3bu3HnroIUnSvffeq48//li33HKLNm/erC1btlRYvmHDhnI6nb6YKuB1kZGRGjRokK+nUS0FBQUKCHDI4QiQZVnui8ecTqdd2eXUqVP2yZMn7RMnTtjHj/9k5+fn29eKhIQEe8GCBe7rd9xxh11YWFjtcWfNmlXtMRiP8erKeHVZfn6+ffz4T/aJEyfskydP2qdOnaq0WZe6+P1h7IABA7Ry5UrZtq3MzEy1aNFCQUFBvp4WgFrm9z9B0bFjR0VHR6tt27YKDg7WsmXLfD0lAD7g97GTpISEBCUkJPh6GgB8KGD69OnxnqxgnztRwaGg1LJlS8ZjPL8Zr646ffq0HA5LluWo1gkKvz8bC+Da5q2zsX5/gqIm2bZ90VtX6grbrvT/sGvWrl0VPxUkLy/PRzPBtcSI1+y8LSMjQ0lJSVq5cqUiIiK0YcMGj9YvKCjQH//4R4WHh6t///6aNGmSUlJS1KZNG7377ruKiIjwaLzDhw9r2LBhWrNmjZo1ayZJ2rhxo+Lj47VmzZoq7YX/+c9/1ltvvaV//vOfcrlcioyM1G9/+1sNGTLE47GGDh2qVatWua8vWLBAEyZMkCS1a9fuonhVZsiQIfrhhx/c12NjY7V3716P53Wey+XSkiVL9OSTT8qyLN1///06efKkGjVqpOXLlyskJMSj8UaNGnXF+1esWOHReE899dQV71+0aJFH45mK2F2lvXv3asWKFUpKSlKDBg2Ul5enrVu3Kjw83OOxRo8erVatWmnbtm1677339PDDDyshIUEbN27UU089pY0bN3o03oQJEzRhwgR36CSpT58+OnjwoJ599lklJSV5NN7ChQu1ZMkSzZ8/X506dZLD4dC2bds0efJk/etf/9Jjjz3m0Xg7d+6scL187EpKSjwaqya88sor2rFjhx555BEFBQUpKytLf//73/XJJ5/olVde0YIFCzwab+zYse6vH3vsMX388cfVml///v2rtT7O8fc3FXtDx44d7VtvvdWePn26vWvXLvdtVdW6dWvbtm27pKTEbtasWYX7IiMjPR6vVatWl73v1ltv9Xi8tm3b2ocPH77o9pycHLtdu3Yej3fhHMo/d23atKn2eFUZo7yIiAj71KlT7uvh4eG2bZd9f85/XVXVXR/ee1Mxe3ZXISYmRuvWrVNGRobatGlT7bNgDkfZS6UBAQEVfm63qs6cOaPi4mLVr1//otvPnDnj8Xhnz55V8+bNL7o9LCxMLperyvP0ltOnT+vrr792Xy8sLKxw/b777vNovOLiYjVs2NB9fdOmTZLKvj/nv1e49hG7q5CYmKh58+Zp/fr1Wr58uaZOnaqSkhKtW7dOAwYMUL16nj2NeXl5io+PlyTl5OS4v5akH3/80eP5DRw4UM8//7zmzJmj6667TpJ08uRJPfPMMxoxYoTH410YzfKqchasoKCgwmMs/5ircnKhW7dumjdvnvt6165dK1z3NHaNGzdWZmamOnXqJEnulya2bt2qpk2bejw/1E289aQKTp06pdWrV2v58uXauXOnDh065NH65f9hXsqkSZM8Gs/pdCouLk6rV6/W7bffrtLSUmVlZWno0KF6//331aBBA4/Ga9KkyRXv9zRQ3n683rZ+/XpNmDBBU6ZMUVRUlFwul1JTU5WYmKgVK1aoR48eHo3n7efPdN566wmxq6a8vLxK/3LXFqfTqQMHDqi4uFitW7fW9ddf7+spXTMOHDigDz74QFlZWSopKVH79u01btw4j8+Mw/uIHQAj8KZiAPAAsQNgBGIHwAjEDoARiB0AIxA7AEYgdqhV27ZtU1RUlIKCgtS+fXulpqb6ekowBLFDrfrwww9155136vDhw7rpppv0wgsv+HpKMASxQ626++67lZGRobvvvlvfffedsrOzfT0lGILYodYUFBRo/PjxGjRokPbt26e+ffv69Scqo27hU09Qa06fPi2Xy6WAgADt2rVLKSkpsm1bZ8+eVWBgoK+nBz/Hnh1qTfPmzTVx4kTNnTtX48aN08KFC1VUVFTpx44D3sAHAQCo0/ggAADwALEDYARiB8AIxA6AEYgdACMQOwBGIHYAjEDsABiB2AEwArEDYARiB8AIxA6AEYgdACMQOwBGIHYAjEDsABiB2AEwArEDYARiB8AIxA6AEYgdACMQOwBGIHYAjEDsABiB2AEwArEDYARiB8AIxA6AEYgdACMQOwBGIHYAjEDsABiB2AEwArEDYARiB8AIxA6AEYgdACMQOwBGIHYAjEDsABiB2AEwArEDYARiB8AIxA6AEYgdACMQOwBGIHYAjEDsABiB2AEwArEDYARiB8AIxA6AEYgdACMQOwBGIHYAjEDsABiB2AEwArEDYARiB8AIxA6AEYgdACNUIXaW92cBAFdU/e5cdewsq+LGbNuu9sYB4Eou7MyFHfJElQ9jz5w5U+WNAsDV8GZnqhQ7y7LkdDpVWFjIHh4Ar7NtW4WFhXI6ndXamyvPcjqdV1Ur27Zl27ZcLpdcLpdKS0vlKi1Vqcvlvk+yRfsAVEVZ0yxZVtklwOGQIyBAAQEBcjgccjgc7vuqop7nEyrbmMOyZDscCpDkcsfuPIoHwBM/B+x8XyyHo+zPagSuPI9iZ1mWZNtlGz8fOsuSdWHsbJvcAbgqZTt0FWNXPniWZclS9U5OSB7EzrKssqCd27DD4ZBdLnS8dgfAG6xye3PuvbpzoatO8Kp0GCuV1dg+F8DLh44AAriSS8fLHbqyK745jLXPHcaq3CEte3UAvMm6xJ5crR3GXrhBd/QumAThA1AVl4uZt9564nHsLjWB8oHz1sQAmKsmOlLl2JVH4ADUdXzqCQAjEDsARiB2AIxA7AAYgdgBMAKxA2AEYgfACMQOgBH+B1Eu8ySLOLsKAAAAAElFTkSuQmCC)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Vega-lite / Update</h1></header><div class="markdown"><p>Periodically update a Vega-lite plot.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">spec </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">{</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  &quot;description&quot;: &quot;A simple bar plot with embedded data.&quot;,</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  &quot;mark&quot;: &quot;bar&quot;,</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  &quot;encoding&quot;: {</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">    &quot;x&quot;: {&quot;field&quot;: &quot;a&quot;, &quot;type&quot;: &quot;ordinal&quot;},</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">    &quot;y&quot;: {&quot;field&quot;: &quot;b&quot;, &quot;type&quot;: &quot;quantitative&quot;}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  }</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -29,15 +29,15 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">vis </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;external&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">vega_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 4&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Plot with external data&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    specification</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">spec</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fields</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;a&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;b&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">poll</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">while</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Update the plot&#x27;s data rows</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    vis</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> poll</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-vegalite-update.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-vegalite"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Vega-lite</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-vegalite-form"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Vega-lite / Form »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/3697284d.20d40ff4.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/3697284d.4cf13213.js"></script>
 </body>
 </html>
\ 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 7768db3ef8..883af9dcea 100644
--- a/docs/docs/examples/plot-vegalite/index.html
+++ b/docs/docs/examples/plot-vegalite/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plot / Vega-lite | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plot / Vega-lite | H2O Wave"><meta data-react-helmet="true" name="description" content="Make a plot using Vega-lite."><meta data-react-helmet="true" property="og:description" content="Make a plot using Vega-lite."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/plot-vegalite"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/plot-vegalite"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/b22f7242.2a60e38a.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/b22f7242.be8d2b44.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Vega-lite</h1></header><div class="markdown"><p>Make a plot using Vega-lite.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plot / Vega-lite</h1></header><div class="markdown"><p>Make a plot using Vega-lite.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">spec1 </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">{</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  &quot;description&quot;: &quot;A simple bar plot with embedded data.&quot;,</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  &quot;data&quot;: {</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">    &quot;values&quot;: [</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">      {&quot;a&quot;: &quot;A&quot;,&quot;b&quot;: 28}, {&quot;a&quot;: &quot;B&quot;,&quot;b&quot;: 55}, {&quot;a&quot;: &quot;C&quot;,&quot;b&quot;: 43},</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">      {&quot;a&quot;: &quot;D&quot;,&quot;b&quot;: 91}, {&quot;a&quot;: &quot;E&quot;,&quot;b&quot;: 81}, {&quot;a&quot;: &quot;F&quot;,&quot;b&quot;: 53},</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">      {&quot;a&quot;: &quot;G&quot;,&quot;b&quot;: 19}, {&quot;a&quot;: &quot;H&quot;,&quot;b&quot;: 87}, {&quot;a&quot;: &quot;I&quot;,&quot;b&quot;: 52}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">    ]</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  },</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  &quot;mark&quot;: &quot;bar&quot;,</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  &quot;encoding&quot;: {</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">    &quot;x&quot;: {&quot;field&quot;: &quot;a&quot;, &quot;type&quot;: &quot;ordinal&quot;},</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">    &quot;y&quot;: {&quot;field&quot;: &quot;b&quot;, &quot;type&quot;: &quot;quantitative&quot;}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">  }</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;embedded&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">vega_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 4&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Plot with embedded data&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    specification</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">spec1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -26,15 +26,15 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">data2 </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fields</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;a&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;b&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;A&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">28</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;B&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">55</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;C&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">43</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;D&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">91</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;E&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">81</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;F&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">53</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;G&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">19</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;H&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">87</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;I&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">52</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;external&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">vega_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 5 2 4&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Plot with external data&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    specification</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">spec2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-vegalite.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/plot-form"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plot / Form</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/plot-vegalite-update"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plot / Vega-lite / Update »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/b22f7242.2a60e38a.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/b22f7242.be8d2b44.js"></script>
 </body>
 </html>
\ 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 b84935d5c7..fdd3775522 100644
--- a/docs/docs/examples/progress-update/index.html
+++ b/docs/docs/examples/progress-update/index.html
@@ -5,35 +5,35 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Progress / Updating | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Progress / Updating | H2O Wave"><meta data-react-helmet="true" name="description" content="Update a progress bar&#x27;s completion status periodically."><meta data-react-helmet="true" property="og:description" content="Update a progress bar&#x27;s completion status periodically."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/progress-update"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/progress-update"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/c641a4e8.56e47608.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/c641a4e8.437ff80d.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Progress / Updating</h1></header><div class="markdown"><p>Update a progress bar&#x27;s completion status periodically.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Progress / Updating</h1></header><div class="markdown"><p>Update a progress bar&#x27;s completion status periodically.</p><div class="cover" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaUAAABaCAYAAAAYYUnWAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDExOjUwOjM2IEFNIFBEVCpvN9QAABDCSURBVHic7d15YE1n/sfx901ktSQRtQSTRAlaKZ2RCknsVFutLdpSS1QtEUkwU6GrttQSa4htWhKCUvvOUBWqlpgppbQoFbmIkkgsEbm5vz/Sue2tqhHm55h+Xn/lLM/zfM/9I588zzk512S1Wq2IiIgYgMODLkBEROTfFEoiImIYCiURETEMhZKIiBiGQklERAxDoSQiIoahUBIREcNQKImIiGEolERExDAUSiIiYhgKJRERMQyFkoiIGIZCSUREDEOhJCIihqFQEhERw1AoiYiIYSiURETEMEoUt+Grr/biwFdf2ba9vLx4uk0bYmMH4ezsfM+FxcbG8Gi1R4mJjb3rtnv27GFAZH/btouLC7Vq1yY2dhB169a959pEROS/o9ihBNCzZwThnTsDkJ6ezqiRI3F1dSU6OuaeC2vapCnlK1QodnsnJyeWr1gJQF5eHuvWrmVAZH+WLltOpUqV7rk+ERG5/+5p+a5MmTL4+Pjg4+NDgwYN6Ne/H1u3bLkvhXXo2JGQkJBitzeZTLbaqlWrRnRMDH5+/qxbu/a+1CciIvfffb2n5OhYwm7pLiMjg+HDhtG8WVOaNA7j7bfe4sqVK3bH+/XrS8PgBrR5ujXz582zHRv6+t+YNWumbfvSpUvExQ2lcVgozZo1ZcqUyVgslruqr3qN6pjNZlv/U6ZMJrJ/P54Kqs+ZM2cAWLtmDR07tKdhcDCvdO3Knt277fpI27ePrl270DC4Ab0ievLFzp2EhjSyq/vX/VosFqZOTaB1q5Y0aRzGX4cMJj093dYmLy+PD95/j8ZhoTRpHMaIEe9y48YN2/GU+fN5unUrGjUMpm/fPmRknLmr6xYReVjct1A6efIks2fPom3b5wGwWq0MGTwYgKTkecybn0J6+mlmTE+0tYkaEEnNgJqsXbeeMWPHkpIyn3379t7St8ViYeDAKLBaSUqex7RpiezZs4f4+HF3VaM5IwPvct627ZUrVtCuXXs2bNxEpUqV2Lx5E/Hx44gaGM3SZcvo0LEjgwYN4siRIwCcPn2amJhoWrdqzdJly3ilW/ffrOHX/U6cMJ4dO3YwYeIkUhYsxNPLi/79+tqCJz5+HGcyMliwcBHzUxaQceYMc+Z8DMCG9etJSZnP+AkTWblqNQEBAbz7zrt3dd0iIg+Le7qnNHPmDD766O9YrVby8vIIbtiQ8PBwoGj57OM5c3BxccHJyQmA555ry6pVRfd5rFYr58+fJzQsDG9vb7y9vVm1eg2urq63jPPlrl1cuHCBpKRk20xs9OgxHDxw4D+q02KxsHHjBg4ePEjcsGG2/c2bN6fNM8/YtpOTkunTty8tWrQAIDw8nKNHj5Ayfx6jPhzNsqVLadiwIRG9egFQuXIVTpw4bjfD+3W/ubm5LF++nE+XLqNKlSoAvP32O7R74Xn27NlN48ZNOHv2LPXq1qNq1aoATEucbrvOs2fPUqVKVerUqYPJZGLw4CEUFhb+R9ctIvKwuadQerlLFzp1KgqhrKwsEqZMITIykrlJSTg4OOBgMrFhw3oOHzpE+pkzfHP4MOXLlweKQqtHz54Mio2hUaMQnmrwFC1btvrNUDr67VHqPlHXbmnQ19cXX1/f29aWn59Pw+AGABQUFODp6cm7I0ZQvXoN2zm/fJDCarVy/PgxnnhimF0/9erWY+7cOQAcO/YdQUFP2R1//LHHbxn7l/2eOHGc/Px8Xunaxe6ca9euce7cOQC6dunK0KGv889/7qdBg2BatGyJv78/AM88+yxLl35KeKeOhIaGERYWRv2goNtet4jIw+yeQsnTw9P2133VqlWZklB03+Tw4cM8Wq0a3bp3o0L58rRo2YpWrVpz8uRJPv10ia19ZOQA2rR5hi927mT79u0kTpvG9BkzefzxX/2it4LVevezg0WfLAbA1dWV8uXL4+Dw+6uVVqsVk8l02+OWwkJMDvbHHUs43rGOEiVK2Gr5JQ8PDwBCw8JYu249qamppKXto9srXRk8eAjhnTtTqVIlVqxcxa5dX7Bv7z7eeGM4QUFBjPpw9B3HFRF52NzXBx3c3NxwdnHh2tWrHDlyhMzz55mWOJ3w8HDqBwWRnZ1tO9disfDt0aP4+/vTrXt3EhOnUz8o6DefjguoGcCBAwfIz8+37fvh1CnWrbv9k3TOzs74+fnh5+dHxYoV7xhIJpOJGjUC2J+WZrd/X9o+atWqBYC/vz9HvvnG7vi3R7/93X6r+VfDarVy8+ZN29OAPj4+nP7hB9uy5smTJ3F1daV9+/aMHDmKgQOjWfJTeF+8eJHs7GyaNWvO0Lg4piVOZ+PGjVy+fPl3xxUReRjdUyjl5ORgNpsxm80cPXqEUaNGYgICn3iCKlWrkJ+fz/p16zh79ixbtmxhyZKfZwu5ublERESwePEnZGZmsj8tjUNff42fv98t4zRqFIK3dzneevMNvv/+ew4d+pphw+I4ePDgvZR/i4heEcyePYutW7diNptZvPgTNm7YQLfuPQDo1Cmc1NRUPlm0CLPZTGrqdts9stsp4+FB+/YdGD58GF999S/S09OZmpDA8OHDyLt+HYC333qTcePGkpGRwfHjx9i27TP8/Yo+h3nzkvnrkMEcO3YMs9nMqpUrKFeuHKVKlbqv1y4iYgT3tHyXnJxEcnISAO4lS/L4Y48zfcYM3N3dcXd3J378BCaMj2fs2DH8+S9/oXv3HqxduwYAT09PJk6ayNSEBCZPmoSnpyftO3QgPLzzrUWWKMH0GTMYO2Y0PXv2wNHBgefatmXw4CH3Uv4tWrVqzY28GyROm8rZs+eoVq0aCQlTqV27NgA1atQgPn48CVMTmDx5ErVq1SJqYDQj3n3nd/sdGhfHzJkzGBYXx9WrV6lduzYzZ86izE/Ld2PGjmP06A95+aUXcXBwIKxxY4a+PhSAAQOiiI8fR7++fbh+PY/AwDpMnZaIo+Odlw1FRB42JqvVan3QRTxMLBaLXSB8sXMn7703gs3/uD//NCwi8kemF7LehaNHj/DC82357LOtXLhwgUOHviZxeiJhYWEPujQRkf8JmindpZUrVrBo0SLS009TslQpWrRowaBBg3/zUXYREbk7CiURETEMLd+JiIhhKJRERMQwFEoiImIYCiURETEMhZKIiBiGQklERAxDoSQiIoahUBIREcNQKImIiGEU6y3hv/dFeCIiUuTihfMPuoSHjmZKIiJiGMWaKel1eSIi8t+gmZKIiBiGQklERAxDoSQiIoahUBIREcNQKImIiGEolERExDAUSiIiYhgKJRERMQyFkoiIGIZCSUREDEOhJCIihlHsUCq0WFi4IIUB/fsRHRXJ2jWr7Y7vT0sj7vW/EtmvDzMSp5GXl2c7tnnTRkZ98B6TJoy37c/NzeWdt97g2rVrxS3pvyZt314Spybc8byrV6+wedPG/4eKRET+NxU7lFavXsWlixcZMy6e90d+yP79aexI3Q7AuXPnSJr7Mb1f68uUqYk4uziTMi/Z1nbz5k0Mf/NtfCpX5uuDBwGYl5xEp/DOuLu73+MlPThXr1xl8+ZND7oMEZGHVrHfEp6aup333h9J6dKlAYiJGcSN/HwAdu5IJTSsMQE1awLQpWs3hgyKoXvPCFxcXDABFouFmzfzcXR0ZO+e3bi4uFC33pO3HdOckUHS3DmcTj9N+UceoXeffvj6+gKwf38any5ezOXL2TxavTqv9n6NsmW9uZKbyztvv0mTps3Y/vk2SpYsRWTUQBYtTOFMejq+fv5EDYzGycmJlPnJlCpVmsOHvubipUv4+PjwWp++eHp63XLta1avYuvWLQCEhIQSHt6Z7MvZxA39GwCxMQOJioomoGZN9u9PY+mSxeTk5FD7scfo0SOCMh4exfnYRUT+5xVrpvTjjxdwd3Pjy11fMGRQDINjo9m9+0sqVqwIQPrp01SvXsN2vru7OxUqVMRszgAgvPNLTJo4nps3C/D392ftmtV0faXbbccrKChg8qQJNGnWjBkzZ/PiS12YOCGegoICzGYzcz76O5EDopg+czYBATWZmjDF1jY7O5sKFSsycXICdQID+XDkB0T06s34iZO5mZ/Pnt27befu3LmD/pFRTJw0hcDAJ/j7rFm31LJ9++d89a9/MXLUaMaMjef770+wefMmypb1Zuy48XiXK8eUhGkE1KyJOSODeUlz6T9gIFMTZ/DII+WZ8/FHxfnIRUT+EIoVSrk5uWRmZnL69Gk+GDWa1+OGs3XLP0hL2wfA9evXKVmqpF0bNzc3rl+/DkCD4GCGxg2n16u9WbhwwR2X7b779lvcS5YkJCQUk8lEncBARox4HweTid1f7iI0rDG+fn6YTCaef6Edl7OzMWcUBaCzszMNGgQDUKtWLapWrYq3tzeOjo7UCAjgxx8v2MYJCnoK73LlAGjV+mmOHz9GTk6OXS27vthJ55deonTp0ri5ufFCu/bs35/2m3Xv3v0lzZq3wNfXFwcHBzp2CufIkW/I/2lGKSIi9oq1fOfo6IjVaqVnRC+cnJwoWbIkbZ55ln1791K/fpBdAP3blatXcHNzs9v372W7KlX/xJTJEykoKODll7tSuUoVu/OysrN45JHydvu8ypYtOpaVhb+/v22/yWSiQoWKZGVlUaZMGZycnOy+vt3BwT6HCwsLf+7Ty8vuPC+vsly+fNnu/GPffce4MaN/XoKzWildpsxvfk5ZWVns3JHKtm2f2fV79coVnH+qX0REflasUCpfoSggCi0WcHIq+rmw0PbLv+qf/sSJ48d58sk/A0VPpV3IzMTHp7Ktj9zcXNauWc2wN95i5YrlhISE4uHhyapVKxgQFW03npenF5nn7b/rPuvSJTw8PPDy8iIzM9O232q1cj7zPJ5e9veC/hPnfzFGQUEBFy/+iIeHB+fPnbXtr16jBu3adaBOYOAd+/P09OS5ts8T3vnFu65FROSPqFjLd25u7tStV4+UlHncuHGDjDNn2LB+PcHBDQEICQ1l++fb+P7ECa5du8bCBSn8pX4QLi4utj5++bSdxWLBydkZJ2cnCgost4wXULMm165d5fNtn2G1Wjlw4Cs+eH8EmEwEBzdkR+p2fjh1CqvVyto1q/Eo40HlypVv6edO/rk/jfT0dAoLC1my+BMCAmpS5lezoEaNQli+bCk5OTkUFBTw6ZJP2LB+HQDOLi7k5uSQdekShYWFNAgOZkfqdk6dOonVaiVt314Spky+67pERP4oijVTAojo1ZukuR8zODYGV1cXnm3blnpPFj09V6mSDz169mLmjERycnKoUyeQ3n362Nru3bMbF2dn29N2zZo3J3nuHAqtVl586eVbiyxRgkFD/kbS3I9ZtHAB5cqVIzp2EA4ODvhUrsyrvfswY3oi2ZezqV69OtGxscW6psZNmrIwZT4//HAKf/9qvNa33y3nNG3WnNzcXN59+01u3iyg9mOP0eaZ54CimVHLVq15Y3gcUQNjqBMYSI+IXsyeOZPs7Cx8fCrTvUfPYtUmIvJHYLJardYHXYQRpMxPplIlH1q0bPWgSxER+cPSa4ZERMQwFEoiImIYWr4TERHD0ExJREQMQ6EkIiKGoVASERHDUCiJiIhhKJRERMQwFEoiImIYCiURETEMhZKIiBiGQklERAxDoSQiIoahUBIREcNQKImIiGEolERExDAUSiIiYhgKJRERMQyFkoiIGIZCSUREDEOhJCIihqFQEhERw1AoiYiIYSiURETEMP4P1aWYc//ySGcAAAAASUVORK5CYII=)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 -1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Basic Progress&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">11</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Basic Progress&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">i </span><span class="token string-interpolation interpolation operator" style="color:rgb(137, 221, 255)">*</span><span class="token string-interpolation interpolation"> </span><span class="token string-interpolation interpolation number" style="color:rgb(247, 140, 108)">10</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">% complete&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">i </span><span class="token operator" style="color:rgb(137, 221, 255)">/</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># This will work, too:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># page[&#x27;example&#x27;].items[0].progress.value = i/10</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/progress-update.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/progress"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Progress</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/message-bar"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Message Bar »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/c641a4e8.56e47608.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/c641a4e8.437ff80d.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/progress/index.html b/docs/docs/examples/progress/index.html
index a973a9e040..81f9bf1d17 100644
--- a/docs/docs/examples/progress/index.html
+++ b/docs/docs/examples/progress/index.html
@@ -5,31 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Progress | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Progress | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a progress bar to indicate completion status of an operation."><meta data-react-helmet="true" property="og:description" content="Use a progress bar to indicate completion status of an operation."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/progress"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/progress"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/4784cd26.46ed9b20.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/4784cd26.a4fc6f8a.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Progress</h1></header><div class="markdown"><p>Use a progress bar to indicate completion status of an operation.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Progress</h1></header><div class="markdown"><p>Use a progress bar to indicate completion status of an operation.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 -1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Indeterminate Progress&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Goes on forever&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Standard Progress&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Downloading the interwebs...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0.25</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/progress.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/link"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Link</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/progress-update"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Progress / Updating »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/4784cd26.46ed9b20.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/4784cd26.a4fc6f8a.js"></script>
 </body>
 </html>
\ 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 4883f190ae..98158a307f 100644
--- a/docs/docs/examples/range-slider/index.html
+++ b/docs/docs/examples/range-slider/index.html
@@ -5,33 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Range Slider | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Range Slider | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a range slider to allow users to select a value range (from, to)."><meta data-react-helmet="true" property="og:description" content="Use a range slider to allow users to select a value range (from, to)."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/range-slider"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/range-slider"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/eec6e613.03039ef9.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/eec6e613.2511e3b9.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Range Slider</h1></header><div class="markdown"><p>Use a range slider to allow users to select a value range (from, to).</p><div class="cover" style="background-image:url(/wave/assets/images/range-slider-7394a0b0ebb5aace4e83bb302adc6fc3.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Range Slider</h1></header><div class="markdown"><p>Use a range slider to allow users to select a value range (from, to).</p><div class="cover" style="background-image:url(/wave/assets/images/range-slider-7394a0b0ebb5aace4e83bb302adc6fc3.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;range_slider=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">range_slider</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;range_slider_step=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">range_slider_step</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;range_slider_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">range_slider_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">range_slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;range_slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Default slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">range_slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;range_slider_step&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">1000</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> step</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> min_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> max_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">range_slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;range_slider_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Disabled slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> step</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> min_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">              max_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">70</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/range-slider.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/slider"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Slider</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/date-picker"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Date Picker »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/eec6e613.03039ef9.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;range_slider=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">range_slider</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;range_slider_step=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">range_slider_step</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;range_slider_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">range_slider_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">range_slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;range_slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Default slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">range_slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;range_slider_step&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">1000</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> step</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> min_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                            max_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">range_slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;range_slider_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Disabled slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> step</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> min_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                            max_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">70</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/range-slider.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/slider"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Slider</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/date-picker"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Date Picker »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/eec6e613.2511e3b9.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/separator/index.html b/docs/docs/examples/separator/index.html
index e76cb7de61..b2e165c960 100644
--- a/docs/docs/examples/separator/index.html
+++ b/docs/docs/examples/separator/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Separator | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Separator | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a separator to visually separate content into groups."><meta data-react-helmet="true" property="og:description" content="Use a separator to visually separate content into groups."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/separator"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/separator"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/cc0ea0cf.dbdc3880.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/cc0ea0cf.39c2181e.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Separator</h1></header><div class="markdown"><p>Use a separator to visually separate content into groups.</p><div class="cover" style="background-image:url(/wave/assets/images/separator-761eab53dd3e94f7cae3fc78ce5f36b7.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Separator</h1></header><div class="markdown"><p>Use a separator to visually separate content into groups.</p><div class="cover" style="background-image:url(/wave/assets/images/separator-761eab53dd3e94f7cae3fc78ce5f36b7.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">separator</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Separator 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;The quick brown fox jumps over the lazy dog.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">separator</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Separator 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;The quick brown fox jumps over the lazy dog.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">separator</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Separator 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;The quick brown fox jumps over the lazy dog.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/separator.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/tabs"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Tabs</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/file-upload"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / File Upload »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/cc0ea0cf.dbdc3880.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/cc0ea0cf.39c2181e.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/site-async/index.html b/docs/docs/examples/site-async/index.html
new file mode 100644
index 0000000000..a081c306b5
--- /dev/null
+++ b/docs/docs/examples/site-async/index.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="generator" content="Docusaurus v2.0.0-alpha.65">
+<title data-react-helmet="true">Site / Async | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Site / Async | H2O Wave"><meta data-react-helmet="true" name="description" content="Update any page on a site from within an app using an AsyncSite instance."><meta data-react-helmet="true" property="og:description" content="Update any page on a site from within an app using an AsyncSite instance."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/site-async"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/site-async"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/3ae7008e.f2eb3c38.js" as="script">
+</head>
+<body>
+<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Site / Async</h1></header><div class="markdown"><p>Update any page on a site from within an app using an <code>AsyncSite</code> instance.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakePercent</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> AsyncSite</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">site </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> AsyncSite</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Grab a reference to the /stats page</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">stats_page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/stats&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># A flag to indicate whether to pause or resume updating the page at &#x27;/stats&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">update_stats </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">False</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">update_stats_page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakePercent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">while</span><span class="token plain"> update_stats</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        price</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> percent </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">price </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> price</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">percent </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> percent</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> percent</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Set up up the page at /stats</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        stats_page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">drop</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Clear any existing page</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        stats_page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">wide_gauge_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Stats&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            aux_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;={{intl percent style=&quot;percent&quot; minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            plot_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$red&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            progress</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">price</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> percent</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> stats_page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Set up this app&#x27;s UI</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 -1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">frame</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">path</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/stats&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;110px&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;toggle&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Toggle Updates&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">toggle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">global</span><span class="token plain"> update_stats</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        update_stats </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> update_stats</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> update_stats_page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stats_page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/site-async.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/background-executor"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Background Tasks / Executor</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/graphics-primitives"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Graphics / Primitives »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/3ae7008e.f2eb3c38.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/docs/examples/slider/index.html b/docs/docs/examples/slider/index.html
index fe3efdd604..ba35f7bca5 100644
--- a/docs/docs/examples/slider/index.html
+++ b/docs/docs/examples/slider/index.html
@@ -5,33 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Slider | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Slider | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a slider to allow users to set a value within a specific range."><meta data-react-helmet="true" property="og:description" content="Use a slider to allow users to set a value within a specific range."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/slider"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/slider"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/ca622d62.58f63235.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/ca622d62.8941bf61.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Slider</h1></header><div class="markdown"><p>Use a slider to allow users to set a value within a specific range.</p><div class="cover" style="background-image:url(/wave/assets/images/slider-06551b8ad6f45a0aa69c946c5d8332d1.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Slider</h1></header><div class="markdown"><p>Use a slider to allow users to set a value within a specific range.</p><div class="cover" style="background-image:url(/wave/assets/images/slider-06551b8ad6f45a0aa69c946c5d8332d1.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;slider=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">slider</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;slider_zero=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">slider_zero</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;slider_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">slider_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Standard slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> step</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;slider_zero&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Origin from zero&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> step</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;slider_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Disabled slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> step</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                      disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/slider.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/spinbox"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Spinbox</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/range-slider"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Range Slider »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/ca622d62.58f63235.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;slider=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">slider</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;slider_zero=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">slider_zero</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;slider_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">slider_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Standard slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> step</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;slider_zero&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Origin from zero&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> step</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;slider_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Disabled slider&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> step</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                      disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/slider.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/spinbox"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Spinbox</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/range-slider"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Range Slider »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/ca622d62.8941bf61.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/spinbox/index.html b/docs/docs/examples/spinbox/index.html
index dec59494be..8fc9e7573b 100644
--- a/docs/docs/examples/spinbox/index.html
+++ b/docs/docs/examples/spinbox/index.html
@@ -5,33 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Spinbox | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Spinbox | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a spinbox to allow users to incrementally adjust a value in small steps."><meta data-react-helmet="true" property="og:description" content="Use a spinbox to allow users to incrementally adjust a value in small steps."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/spinbox"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/spinbox"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/d8689276.205def1e.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/d8689276.c08cd42b.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Spinbox</h1></header><div class="markdown"><p>Use a spinbox to allow users to incrementally adjust a value in small steps.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Spinbox</h1></header><div class="markdown"><p>Use a spinbox to allow users to incrementally adjust a value in small steps.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;spinbox=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">spinbox</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;spinbox_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">spinbox_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spinbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;spinbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Standard spinbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> step</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spinbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;spinbox_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Disabled spinbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> step</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                       disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/spinbox.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/toggle"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Toggle</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/slider"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Slider »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/d8689276.205def1e.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;spinbox=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">spinbox</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;spinbox_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">spinbox_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spinbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;spinbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Standard spinbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> step</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">spinbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;spinbox_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Disabled spinbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> step</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                       disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/spinbox.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/toggle"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Toggle</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/slider"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Slider »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/d8689276.c08cd42b.js"></script>
 </body>
 </html>
\ 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 6b18086352..c8e3dd1e1b 100644
--- a/docs/docs/examples/stat-large-bar/index.html
+++ b/docs/docs/examples/stat-large-bar/index.html
@@ -5,34 +5,34 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Stat / Bar / Large | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Stat / Bar / Large | H2O Wave"><meta data-react-helmet="true" name="description" content="Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value."><meta data-react-helmet="true" property="og:description" content="Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/stat-large-bar"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/stat-large-bar"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/692ea9bc.adf07d09.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/692ea9bc.12fddb0c.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Bar / Large</h1></header><div class="markdown"><p>Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.</p><div class="cover" style="background-image:url(/wave/assets/images/stat-large-bar-e578fa2ed742b2a1b9eb9ff52d50c476.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Bar / Large</h1></header><div class="markdown"><p>Create a large captioned card displaying a primary value, an auxiliary value and a progress bar, with captions for each value.</p><div class="cover" style="background-image:url(/wave/assets/images/stat-large-bar-e578fa2ed742b2a1b9eb9ff52d50c476.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakePercent</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakePercent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">c </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">large_bar_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">cryptocurrency_name</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    value_caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;This Month&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    aux_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;={{intl bar style=&quot;percent&quot; minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    aux_value_caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Previous Month&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$red&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    progress</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">pc</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">foo</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> bar</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">pc</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27; &#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">join</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sentences</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">while</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">foo </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> val</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bar </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pc</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pc</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-large-bar.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/stat-wide-bar"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Stat / Bar / Wide</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/stat-small-series-area"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Stat / Series / Small / Area »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/692ea9bc.adf07d09.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/692ea9bc.12fddb0c.js"></script>
 </body>
 </html>
\ 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 0aa5d97d10..e255db9c49 100644
--- a/docs/docs/examples/stat-large/index.html
+++ b/docs/docs/examples/stat-large/index.html
@@ -5,34 +5,34 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Stat / Large | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Stat / Large | H2O Wave"><meta data-react-helmet="true" name="description" content="Create a stat card displaying a primary value, an auxiliary value and a caption."><meta data-react-helmet="true" property="og:description" content="Create a stat card displaying a primary value, an auxiliary value and a caption."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/stat-large"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/stat-large"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/ba1aeef8.33b2d023.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/ba1aeef8.421c8e2f.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Large</h1></header><div class="markdown"><p>Create a stat card displaying a primary value, an auxiliary value and a caption.</p><div class="cover" style="background-image:url(/wave/assets/images/stat-large-4434acbc0c05f2c331071c827076d7b0.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Large</h1></header><div class="markdown"><p>Create a stat card displaying a primary value, an auxiliary value and a caption.</p><div class="cover" style="background-image:url(/wave/assets/images/stat-large-4434acbc0c05f2c331071c827076d7b0.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakePercent</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakePercent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">c </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">large_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">cryptocurrency_name</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    aux_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;={{intl quux style=&quot;percent&quot; minimum_fraction_digits=1 maximum_fraction_digits=1}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">qux</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> quux</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">pc</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27; &#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">join</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sentences</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">while</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">qux </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> val</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">quux </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pc</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-large.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/stat-small"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Stat / Small</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/stat-wide-gauge"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Stat / Gauge / Wide »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/ba1aeef8.33b2d023.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/ba1aeef8.421c8e2f.js"></script>
 </body>
 </html>
\ 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 7f7d3c3f93..0a939ca4cb 100644
--- a/docs/docs/examples/stat-small-series-area/index.html
+++ b/docs/docs/examples/stat-small-series-area/index.html
@@ -5,34 +5,34 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Stat / Series / Small / Area | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Stat / Series / Small / Area | H2O Wave"><meta data-react-helmet="true" name="description" content="Create a small stat card displaying a primary value and a series plot."><meta data-react-helmet="true" property="og:description" content="Create a small stat card displaying a primary value and a series plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/stat-small-series-area"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/stat-small-series-area"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/f21d2ab0.fe741d4d.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/f21d2ab0.549d1c33.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Series / Small / Area</h1></header><div class="markdown"><p>Create a small stat card displaying a primary value and a series plot.</p><div class="cover" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJoAAABfCAYAAAAQ2t4QAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDExOjM1OjE4IEFNIFBEVI95BMIAAAwUSURBVHic7Z15VFTlAsB/d4AxBtckFHki0ENeuaFmiis9cc0FLZ/Yy633EsTS3LH3jrlkrxJ8JwUxy6Vc0nMExPfSl2VpqbngBuZyVNCQFFQwlKUB5r4/Ria2mXuV8aLw/c6ZMzN3vvstd3732+58d6S8vDwZG8iyXOl12W2CuockSeWeK76uCke1kcqyXGUCQrq6gTWRlAQrRVG0qiIsK5fahAS1hwf5zlWLVt2EBHUbXU1nQFA3EKIJNEGIJtAEIZpAEx5oMCCmNOo2D3XUaU0uIV3doLrTW4qilY1Ur9fj6OgopjfqOLIsU1xcjNFotPih5ITNPlrZS056vR4nJychmQBJknByckKv16u+LKk4GJBlGVmWcXR8oO6coBbj6Oho8UMJq6JZdr4XkajJBBWRJMnsiYpaTbHplBUiENRt1DqiuukUCKqiWk1n2Q6eEE1gi4qOWHNF1ZUBIZrAGmrdEJegBJqgPOoUCFTywKPOe7vbMSuC2kk15tEEAnsiRBNoghBNoAlCNIEmCNEEmiBEE2iCEK0GKS4uruksaIYQrQaZO2d2TWdBMzQRLT09nc6dOloeAd268frf/8alS5cAuHDhAoF9enPgwAEAEhO3k5i4vdrpxsfH0S+oL9m3blU7Lnty+PBhXv3rK+zdu5fBgwaxft06y2eFhYUsWriQXr160q9fEBs3bCi3744diQwaOIAe3QOYO2c2ub/+Win+mzdvMnXqmwR061pue0pKCmNCRhPQrSsTxo8jPT394RSwCjSt0QYOHMiCBQsJDQ3l3PnzzIuYC0DDhg1p164drq6uACQmJpKYmFjt9Fq4t6Bdu3Y84exc7bjsxfXr14mYO4fQsDACAroTs3IlO3d+yc6dXwIQG7uSvPw8du7cxZo1a4mL28aRI0cAOHnyBKtiY1kZu4qvv9mDs8FAVFRkufgvX77MxAnj6dy5c7ntub/+ytw5c5gcHs6+738geMRIwieHYTKZNCm3pqK1aduWocOGMWHiRAYMGMCVK1eQZZlbt25x8OBB0tPTmTZtKqdOnuTUyZN07tSRO3fuYDKZWLUqln79gujRPYA5s2eRk5MDgMlkIiYmmn5BfenZozszZ0zn1r0a7MKFC+zbtw+j0ciGzz+nc6eOJMTHE9T3z7zwQiBbt27RsvgAXLp0CR+fp+nVqzf16unx9vbmw6WRPP30HwFwMbgQGhpGgwYN8PT0pE9gIOfOngXg4sVLdO78HN7e3hgMBoa8OIQLFy+Wi9/JyZHVn3zK8OHB5bbv+t8ugoKC6N27D3q9nuDgYBa/+y4lJSWalLtG+mgZGVdJOnqUgIDulX4iPmXKG5bXK2NXYTAY+Pyzz/hk9WoGDx7MzFmz+PHQId5bsgSA9evWsXbNGkaOfImIiHkkJSUxZ7b1vs+33+5h1qzZ/MHDg8ilS8nMvP5wCmmF9u3bk5l5nbVr1pCVlQWAl5cXfn5+AEwKDcXHxwcwn0THkpJo07YtAJ06deLEieOkpqaSn5/P9sTtBHQLKBe/h8cfcHd3r5TuT6dP4+rqSvjkMHr36smkSa/j6voUTk5OD7O4FjRdcRIVGUlUpLmqb9myJVOnTasUpnXr1nTw9wega1dzHyMxcTv+/h2ZPn0GAM3cmnHt2jXA3Gfp0KEDk8PDAbhx4wbR0Sv4+eefq8zDzFmz8fLywqW+C29Nm8bly1do1qy5fQtqgwYNGrBh4yY2b97EmTNneGVMCKNDQirVQAAxMdG4u7tbmkEfHx/69e/PqJdfQqfT0bJlS8sxUSInJ4dNmzayZMl7tO/QgTWffsrMGTPYsnWrJutBNK3Rxo4bx+YvtvDxx6tp2tSV0EmvW5o5W2RmZuLp6Wl536NnT14eNQqArKwsvLy8LZ+18mpl3p6ZWWVcjRs3BsDgbADQrOkoS5MmTZgy5Q0CAwNZuGgxcXFxxMfHlQuzbds2Dv14iAULF1m2xcVtI/lUMv/575d8/8N+RowYyYzp01Wl6ejoRPCIETzXpQt6vZ6wyZO5cSOLK1eu2LVs1tBUNDc3N/z8/HiuSxfGTxhPdnY2x44lKe7XrFkzLl9Os7w/sH+/pX/l5uZGWlqq5bO0NHO4p9zc7Jx7+5CSkkLS0aOW976+voSEhHD40CHLtj179rB500ZWREdjMBgs2/ft3cvokNG0aNECZ2dnxo4bR2paKplWTqqyeHp6Ulz0+7ydrPHqNk1FS0lOYXtCAlu++IKVMTEA5WqjUlwMBtJSUy1n+fDhwSQnJ7MsKootW7Ywb14Ex48fB2DosGEkJyez/KOPiI+P47P16+ng70+rVq20K9h9kJuby7y355F09CgFhYWcP3eOjRs20KaNuR92LCmJqMilREYto379+hiNRsvErrePDzsSd5CVlUVhYSHx8XE8Ua8eTZo0ITs7m1WrYq2OIge/+CLxCfGcOnUKo9HI8uUf0aKFh2bHSdM+2u7dX7F791fodDo8PDyY/847tG7dmjNnzpQLFxoWxvz581n64VICA19g3Pjx5Ofnk5AQT35+Pt0CAoiImAfAxImvUVhYyPaEBAoKCujatStv/+OfWhbrvujRowehoWEsXryIq1ev8lZqKkOGDuXVsWMB+ODDD8jMzGTUyy9Z9unffwD/ev99wsOnsGxZFCGj/0JBQQHPPPssK6Kj0ev1XLt2je0JCYwZ8wqNGjWqlK6fnx9z50aw4J35ZGVl0cHfn8ioKM3KLVV1V+6yK1tMphJKSkw8+eSTmmWqrjBzxnSilv27prNRLbKzs3Fw0KHTOSBJkuVRESGaoFqoFU1c6xRoghBNoAlCNIEmCNEEmiBEE2iCEE2gCUI0gSYI0QSaIEQTaIIQTaAJQjSBJoh7ut8jt0jm3G3lH0Geyynh6wx16zHff94ZDxdxLoMQzcK5nBLGfpenKmxzZx3NDdZ/MHi3SOZiromMPJMQ7R5CtAq82bYevg0dbIbp6Gr78xM3S5h6MN9cQyr8gPVPjR1o6FT7/8NBiFYB34YOiiIpUf+eOEtOFCqGbeGi47shDaqV3uOAEO0h4NtIx/LuBsVwu9KL2JVepEGOHg65RepvO1snRDuSVcyRG7Y7+hl59l2xraZWPHHr8b7JS8ThAt59Vl3YGhHtyA3lA9zASeKZxtVrwkoJ35/PHZVnn7uNTn5dISPPRMJl5ZpWzSi9FM1FW3G6kOifflMVNsjDiWea2Jbt+acceN7NdjHuFMlM9NPzml891fnUEr+tlW/UUpGYngaCPLRZVZ6RZ2LFaeX+5f1QY02nUh/m7aMFfJNRxDcZymfW+dGVV/08DvRqrk6cdeeNnM0psSma2loIoK+Ho6rWYnl3g3IXoOC2qjTtKtrZ2yWKTdQv+ebPlQqwa1B9xfTWnv+NdeeN6jP4iOHbSIdvI+Vadt15I7/kyza7HAlpRcSnqTsWGXl6Rnhbl/Z+mkS12E20s7dLCP7qrqqwzQ32ncRUO9H6OBOfZlQl0g/DbE+VDNp1V3Vc9e04v2c30e4YzTWVmglPe3W4ezV34sTNEowltmtR/6YOdGz6+A6w1/Zx4a6KwYwaMZZ3N6iKC8w1rr2w+9G3x4Sn6rQa6VjRQ3m+6nHHnl+4PeO6H1SLpmZkJBBYQ7VoE/30imHcDboaO2MEjzaqb4lQ7Ny4JvIneMRxLLgtbokgeHQQogk0QYgm0AQhmkAThGgCTRCiCTRBiCbQBCGaQBOEaAJNEKIJNEGIJtAEIZpAE4RoAk0Qogk0QYgm0AQVookFtQIllB2xKppW/+MoqD3YckZ10ykVqVtdLqg73I8TqkSTJAnJmAdG+y6TFzzGGAuRjHmqW74qF6dIkmT5G+Ryj9/uUlKQa1lPADKy+jsXCR5jzD797oKDTofkUHmdgDXxFFdBlUaikyRknQ4HwGQRrRRhW+3md3lKXZB0OvOzlcUoFbEpmiRJUFqzlUomSUgVRZNloVotxVyRlRetrGySJCGhPHi0Klpp88m9iHQ6HXIZyWTRZtZJKnWnJMkioi3ZVDWdYDZbviefdcmEfLWLqsWxSGZ+Y5+ms3RQQJlmVNRmdZuqOv4P3HRWjMAiXIVIhXR1A2siVWt6QynCsnKJKwh1jwf5zh/otlVCLsH98n/wuXGSfrhmAQAAAABJRU5ErkJggg==)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Series / Small / Area</h1></header><div class="markdown"><p>Create a small stat card displaying a primary value and a series plot.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">colors </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">split</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">curves </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;linear smooth step step-after step-before&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">split</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">cards </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">len</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">curves</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cat</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;example</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">i</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">small_series_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;1 </span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">i </span><span class="token string-interpolation interpolation operator" style="color:rgb(137, 221, 255)">+</span><span class="token string-interpolation interpolation"> </span><span class="token string-interpolation interpolation number" style="color:rgb(247, 140, 108)">1</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> 1 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">cryptocurrency_name</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">qux</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> quux</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">pc</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_category</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;area&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;qux&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">colors</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">i</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo qux&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">15</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_zero_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">curves</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">i</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cards</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">append</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">while</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> cards</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        cat</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">qux </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> val</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">quux </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pc</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">cat</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-small-series-area.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/stat-large-bar"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Stat / Bar / Large</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/stat-small-series-interval"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Stat / Series / Small / Interval »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/f21d2ab0.fe741d4d.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/f21d2ab0.549d1c33.js"></script>
 </body>
 </html>
\ 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 2addadb74a..92468fe6fa 100644
--- a/docs/docs/examples/stat-small-series-interval/index.html
+++ b/docs/docs/examples/stat-small-series-interval/index.html
@@ -5,34 +5,34 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Stat / Series / Small / Interval | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Stat / Series / Small / Interval | H2O Wave"><meta data-react-helmet="true" name="description" content="Create a small stat card displaying a primary value and a series plot."><meta data-react-helmet="true" property="og:description" content="Create a small stat card displaying a primary value and a series plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/stat-small-series-interval"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/stat-small-series-interval"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/5e52c414.ca72b001.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/5e52c414.cd86e889.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Series / Small / Interval</h1></header><div class="markdown"><p>Create a small stat card displaying a primary value and a series plot.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Series / Small / Interval</h1></header><div class="markdown"><p>Create a small stat card displaying a primary value and a series plot.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">cat</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">c </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">small_series_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">cryptocurrency_name</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">qux</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> quux</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">pc</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_category</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;qux&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$red&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo qux&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_zero_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">while</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cat</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">qux </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> val</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">quux </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pc</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">cat</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-small-series-interval.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/stat-small-series-area"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Stat / Series / Small / Area</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/stat-wide-series-area"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Stat / Series / Wide / Area »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/5e52c414.ca72b001.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/5e52c414.cd86e889.js"></script>
 </body>
 </html>
\ 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 37a6dd75d7..dacd58488d 100644
--- a/docs/docs/examples/stat-small/index.html
+++ b/docs/docs/examples/stat-small/index.html
@@ -5,34 +5,34 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Stat / Small | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Stat / Small | H2O Wave"><meta data-react-helmet="true" name="description" content="Create a stat card displaying a single value."><meta data-react-helmet="true" property="og:description" content="Create a stat card displaying a single value."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/stat-small"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/stat-small"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/a54511d2.a23ffe9e.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/a54511d2.0cfeb42e.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Small</h1></header><div class="markdown"><p>Create a stat card displaying a single value.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Small</h1></header><div class="markdown"><p>Create a stat card displaying a single value.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakePercent</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakePercent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> _ </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">c </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">small_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;1 1 1 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">cryptocurrency_name</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;$</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">val</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token string-interpolation interpolation format-spec">.2f</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">while</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> _ </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">value </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;$</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">val</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token string-interpolation interpolation format-spec">.2f</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-small.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/dashboard"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Dashboard</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/stat-large"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Stat / Large »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/a54511d2.a23ffe9e.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/a54511d2.0cfeb42e.js"></script>
 </body>
 </html>
\ 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 52499678b1..5dadf2e7d9 100644
--- a/docs/docs/examples/stat-tall-gauge/index.html
+++ b/docs/docs/examples/stat-tall-gauge/index.html
@@ -5,34 +5,34 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Stat / Gauge / Tall | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Stat / Gauge / Tall | H2O Wave"><meta data-react-helmet="true" name="description" content="Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge."><meta data-react-helmet="true" property="og:description" content="Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/stat-tall-gauge"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/stat-tall-gauge"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/11e3ce2c.138ecca1.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/11e3ce2c.37112f66.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Gauge / Tall</h1></header><div class="markdown"><p>Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Gauge / Tall</h1></header><div class="markdown"><p>Create a tall stat card displaying a primary value, an auxiliary value and a progress gauge.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakePercent</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakePercent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">c </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tall_gauge_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">cryptocurrency_name</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    aux_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;={{intl bar style=&quot;percent&quot; minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$red&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    progress</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">pc</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">foo</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> bar</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">pc</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">while</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">foo </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> val</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bar </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pc</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pc</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-tall-gauge.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/stat-wide-gauge"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Stat / Gauge / Wide</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/stat-wide-bar"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Stat / Bar / Wide »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/11e3ce2c.138ecca1.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/11e3ce2c.37112f66.js"></script>
 </body>
 </html>
\ 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 d062eac9e7..635ddc1dbf 100644
--- a/docs/docs/examples/stat-tall-series-area/index.html
+++ b/docs/docs/examples/stat-tall-series-area/index.html
@@ -5,34 +5,34 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Stat / Series / Tall / Area | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Stat / Series / Tall / Area | H2O Wave"><meta data-react-helmet="true" name="description" content="Create a tall stat card displaying a primary value, an auxiliary value and a series plot."><meta data-react-helmet="true" property="og:description" content="Create a tall stat card displaying a primary value, an auxiliary value and a series plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/stat-tall-series-area"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/stat-tall-series-area"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/9747bb1a.8454f12b.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/9747bb1a.5bab2aa6.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Series / Tall / Area</h1></header><div class="markdown"><p>Create a tall stat card displaying a primary value, an auxiliary value and a series plot.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Series / Tall / Area</h1></header><div class="markdown"><p>Create a tall stat card displaying a primary value, an auxiliary value and a series plot.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">colors </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">split</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">curves </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;linear smooth step step-after step-before&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">split</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">cards </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">len</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">curves</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cat</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;example</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">i</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tall_series_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">i </span><span class="token string-interpolation interpolation operator" style="color:rgb(137, 221, 255)">+</span><span class="token string-interpolation interpolation"> </span><span class="token string-interpolation interpolation number" style="color:rgb(247, 140, 108)">1</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> 1 1 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">cryptocurrency_name</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        aux_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;={{intl quux style=&quot;percent&quot; minimum_fraction_digits=1 maximum_fraction_digits=1}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">qux</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> quux</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">pc </span><span class="token operator" style="color:rgb(137, 221, 255)">/</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;area&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_category</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;qux&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">colors</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">i</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo qux&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">15</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_zero_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">curves</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">i</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cards</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">append</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">while</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> cards</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        cat</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">qux </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> val</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">quux </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">/</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">cat</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-tall-series-area.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/stat-wide-series-interval"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Stat / Series / Wide / Interval</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/stat-tall-series-interval"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Stat / Series / Tall / Interval »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/9747bb1a.8454f12b.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/9747bb1a.5bab2aa6.js"></script>
 </body>
 </html>
\ 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 5045317e95..a7b435c109 100644
--- a/docs/docs/examples/stat-tall-series-interval/index.html
+++ b/docs/docs/examples/stat-tall-series-interval/index.html
@@ -5,34 +5,34 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Stat / Series / Tall / Interval | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Stat / Series / Tall / Interval | H2O Wave"><meta data-react-helmet="true" name="description" content="Create a tall stat card displaying a primary value, an auxiliary value and a series plot."><meta data-react-helmet="true" property="og:description" content="Create a tall stat card displaying a primary value, an auxiliary value and a series plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/stat-tall-series-interval"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/stat-tall-series-interval"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/424c54c2.ec1a883e.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/424c54c2.8d2425bb.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Series / Tall / Interval</h1></header><div class="markdown"><p>Create a tall stat card displaying a primary value, an auxiliary value and a series plot.</p><div class="cover" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ0AAADCCAYAAABT/sD0AAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDExOjQwOjM1IEFNIFBEVD9FfFgAABYESURBVHic7d15fExX/wfwz52RRBZ+VGJLKzyaRKtkISJ2ikRsrZZuIqK160MJpbS161P09bTUrgmJoGSjltgiaRFLLHmKhkhoyCLNIpklmWTu+f0xjMRkkglxJsv3/XrlJTP3nnPP8HHO3c4dQS6XMxDCkcTYDSD1D4WOcEehI9xR6Ah3FDrCHYWOcEehI9xR6Ah3FDrCHYWOcNfgeQsyRlfP6jNBEJ67bJVCpy9oFMD6oXTQSv+bVzWABoWu9AZMTU3RoEGDF0o6qf0YYygpKYFKpdLmw9BMVLpP96RCxhhMTU1hYmJCgSMQBAEmJiYwNTUtkxFDGHQgwRgDYwwNGjz3LiCpoxo0aKDNh6EqDJ22oseVUg9HniUIgiYnVejtDBpemYGVkfqpqhmp0vBKSHmqbXgtvXNIoSMVeTYjlWXF4CsSFDqiT1WzQZfBCHeGHb0SYqBqOXp9XNULNoXUfdV0no6Ql4FCR7ij0BHuKHSEOwod4Y5CR7ij0BHuKHSEO26hS01NRRdXF+2PR/fumPjZp7hz5w4A4Pbt2+jXtw/OnDkDAIiMjEBkZMQLbzcsLBSDBr6NnOzsF66LVA/utwJ7eXmhe3cPZGdnY/sv27Fg/pf4dd9+NG7cGJ06dYK1tTUAIDIyEgAwcuQ7L7S91q1ao1OnTmhobv7CbSfVg/vw2vGttzB8xAiM9/ODp6cn7t27B8YYsrOzcfbsWaSmpmLmzH/j2tWruHb1Krq4uqCgoACiKGLTpo0YNGggevbwwLy5/sjNzQUAiKKIn39ej0ED30avnj0wZ/YXyH7cs92+fRsxMTFQqVQI2rkTXVxdEB4WhoFvD0D//v2wd+8e3n8F9Z7R9ukePLiPSxcvwsOjh85t8NOnz9D+vmHjJlhYWGDnjh3YumULvL29McffH+fi4rByxQoAQGBAAH7Zvh2jRr2H+fMX4NKlS5g3d67ebZ86dRL+/nPxqq0t1qxejczMjJfzIUm5uA+va9eswdo1awAAr732Gv49c6bOOg4ODnBydgYAuLu7A9Ds4zk7u+CLL2YDAFo0b4H09HQAwIEDkXBycsLUadMAAFlZWVi/fh3+/vvvctswx38u2rZtC0srS8yaORN3795DixYtq/eDEr2493Q+48YhZPcebN68Bc2aWWPypInaobAimZmZaNOmjfZ1z1698P7o0QCAhw8fom3bdtpldm3tNO9nZpZbV5MmTQAAFuYWAAC1Wv18H4Y8F+6ha968ORwdHdHVzQ2+432Rk5OD+PhLlZZr0aIF7t5N0b4+88cf2v2x5s2bIyUlWbssJUWznk3z5tXcelIduIfufwn/Q0R4OPbs3o0NP/8MAGV6qScsLSyQkpyMsLBQAJqj2ISEBPywdi327NmDBQvm4/LlywCA4SNGICEhAT/9+CPCwkKxIzAQTs7OsLOz4/fBiMG479MdOxaFY8eiIJFIYGtri2++/RYODg64ceNGmfUmT5mCb775Bqu/X41+/fpjnK8vFAoFwsPDoFAo0N3DA/PnLwAA+PlNQGFhISLCw6FUKuHu7o6vFi7i/dGIgQR9X15SeoaPKKqhVot45ZVXeLeP1AI5OTmQSiWQSKQQBEH7ow9dBiPcUegIdxQ6wh2FjnBHoSPcUegIdxQ6wh2FjnBXI0K3efMmyOVyYzeDcFIjQrdl82bIZDJjN4NwUiNCR+oXoz0uPe7cOURERCAh4RoAwHuIF1xcXOHp6Yl3R43S+yR3URSxf/8+/HbwIO7evQsAaN++Pd4dNQrDh4+o8JrfsWNROHjgAG7evAmZTIamTZuia1c3jPXxgaOjY5Xar1AosGf3bhw7FoUHaWkAgA6Ojnjvvffh6eWltx2MMRw6dAiREeFITk6GQqFEmzZt4OnpiY8/+QQNGzasUjtqI+4X/EVRxIoVyxERHg57e3v07NULgQEBGDZ8ONLT0hAfHw97e3ts2LhJZ3tFRUWYMX0arl69ioEDB6FT504Q1SLOn4/D2bNn0b//AHy/ejUkkrIdeHFxMebP/xKno6Ph6uqK7h4eaNyoMdLT0xEVdRRZWVlYumw5vLy8DPoMaWlpmD5tKu7fv48+ffvCqbMTRFFEXFwcLl68AG/voVi6bJlO8IqLi+HvPwd//P47Or71Fvr07oOG5g1x8+ZNnDxxAu3atcOGjZvQtGnTF/tL5qyqF/whl8tZeT8ymYwVFBSw/Px8lpeXy7Kzs1l1CArayVxdnFlwcBATRZExxpirizPLyMhgjDEWFxfHevXswaZMnqRTds3q1aybW1cWd+6czrIjhw+zLq4uLDg4SGfZ1q1bmKuLMzt86JDOssLCQjZ50iTWw6M7y8nJqbT9oiiysZ98zHr16smuXLmss/zQod9Y1y6uLChop86yH35Yy1xdnNmuXcE6yxITE9mA/v3YrJkzK21DTZOdnc3y8nJZfn4+KygoYDKZrNxMPfnhvk+379df4e7ujk8+GVvu/wZ3d3dMmjQZFy5cQHLy07uBRVFERGQEhg0bBvfu3XXKeQ0Zgh49eiA8LExnWdTRo3B3d8cQb2+dZWZmZpg6dSoKCwtx4cKFStt/4fx53LhxA7NmzYKzs4vOcm/voXj//dEI+OUXqFQq7fsymQz79+3TDKMff6JTzsHBAQu+WojY2BidewvrGu6hS09Ph72DQ4XrDB06FIsXL4GlpYX2vUePHsGuTRv07NVLbzl7Bwc8eJCm8/7OoGD898ef9JZ7sh8lkVT+5SzXrmn2QT099Q/FI0aORF5eHuLizmnfS0xMRGFhIQZXUG7AgAGwtLRE1NGjlbajNuN+IGFra4srly9DrVZDKpWWu84rzZph+IgRZd5r2rQpgneFVFh3ZmZmuftD5hVMtGaMITg4GBaWluji2qXS9hcVFUEQhAp3+G1sbAAACQkJ6NOnr7YcAFhYWOgtJ5FIYG1trT24qqu493SfTZyI69evw3/OHGRkVN9805zsbMScPo3+/ftVum5mZibu3buH6OhTmD5tKqKjT2HZsuV4pVmzSsvatbUDY0zb45XnyhXN3I3MjKez0Z7M17h65Yrecv/88w9SU1ORqWcWW13BvacbOnQYzEzN8N13qzByxHDtvNb79++jRYsWz1UnYwxLly6FVCqF73i/CtdVqVTwHvJ0iLO3t8eevb/i1VdfNWhbA98eiB/WrsUPa9di67ZtOj1XdnY21v20DhKJpMwJb1tbW7i5dcOuXcEYNHgw2rUrOxmpuLgYq1atBAAU1PET5dKFCxcurmwl9vjUSUXDVFX8q317jPngA9jZ2SEpKQmpqak4ePAATp44AblcDscOHWBiYmJwfRs2/IzIiAgsW74CnTp1qnBdQRDQsWNH9OnbD/b29ki8lYidO3agdavWeN3evtJtmZiaov3r7bF7dwhOnDwBS0srmJqaIjc3F8ePH8O8eXPRu3dviGo1Gv9fY3h6emrLdunaFQcOHkDo/v0QBAHm5hYoLCzEpUsX8dWC+VAoFOjduzfupqRgvF/F/3lqEqVSCYlEgCBIDDplUiMm5nRxdcGiRV/jz+t/4uiRI7C0tMSKlSvh5tat0rL79+3DqlUrMWXKVEycNKnK2y4pKcF/vvsOYWGh2LBxk7bnrUxCQgLWrP4e169f175nZWUFvwkT4OMzDu+NehdOTk5YsnRZmXJZWVlY/f1/EB0dDVEUAWj25UaMHIkZMz7H+vXrEHfuHA4dPlLlz2IsVT1PV2NCd/jIUbRo0QJZWVmYN9cfSXfuYP/+0AqH3KioKCxa+BVGjRqFBV8tfO7tq9VqjBg+DLa2ttiydVuVyj548ABpaQ9gZtYQjo6OMDMzgyiK6NnDA+P9/DB58pRyy+Xl5SElJRnqEjVet7fXPnVg2tQpKCkpqXI7jKnWzwazsbHBsuUroJDLKzx1cObMGXzz9SIMHDgIXz6e//q8pFIp3N27IzExscpln+yrde7cGWZmZgCAlORkqFQqtG//ut5yTZo0gYuLK7q6uWkDxxjDrVu3KixXF3AN3a1btxASsqvSBxS2bNkSgiAgNy+33OXXrl7FvLn+6NatG5YtX65z2au0pKTbmDP7C8THx1faPmbAVwwlJCRgxvTpuP7nn3rXiYmJgVQqRbduT3cPlEolPp8xHRHh4RXWnZubix49e1TajtqMa+hyc3Oxds0aHI2q+ORn3LlzYIzpHOEBmuDOnPlvOHbogNVr1lb6Fe9NmjRFbGwsDh8+pHed4uJinDt3Fm+8+Waln6FVq1Y4fz4OB387WO5yhUKBvXv3oF+/fmjcuLH2fXNzczxIS0PI7hC94Q4MCICNjQ3c3XWvuNQlXEPn5uYGe3t7bNq4Eefj4spdJyEhAUuWLkHz5s0xeLBnmWWpqamYPn0aWrVqhR9//MmgOzKsra3h6eWFA5GR+O2gblBUKhUWL/4WWVlZ8HvmdMvFixd0zsfZ2NhgsKcnwkJDceniRZ26vv56EfLzC8rdl/MZ64M7SUnYvl13fy0wMACxsTGYMmUqTE1NK/1ctRn3A4n09HRMnzYV9+7dg5OTE1xcXTV3mQwbhvSMDFyOj4eNjQ1+Wrce9qVOYWRnZ2O87zikp6djrI8Pmr2i/0Tumx07okuXp1cXFAoFPp8xA1evXoGTkxM8PHqgUaNGSE9Px4kTx5GVlYXZs+fgw48+0pa5k5SEMWNGQyKR4PCRo9qrDACQn5+Pzz6dgJSUFHh6eaGDYwfk5+cjKuooMjIysGTJUngNGaLTLsYYvv56EY4cPoyubm7o1q0bJIIEZ86cwZUrlzF6zBjt81lqk1px9KpSqRAWGopTp04iOTlZ+xhXJycn9OnbF2NGj4GFpWWZMqejozFnzmyD6h/r46N9eOIToiji4MEDOHL4CG7fvgW5XA5ra2t0dXPDRx9+BMcOHcqs/+jRI4z3HQdLS0v8EhCo0/solUoEBgTg+InjSE9Lh1UjK7g4O2O83wS8WckwHRERgbCwUKQkJ0MikcDe3gEffPgBBg0abNDnq2lqReieVfqUCal9av0pE1L3Ge129dLiL+u/CE7qHurpCHcUOsIdhY5wR6Ej3FHoCHcUOsIdhY5wR6Ej3FHoCHcUOsJdjbgMdvHiRezZHYJHjx7BydkZEydOKvdeuYyMDGzevAl3U1LQzNoaPj4+cHLSfEVnYuJfCAkJgUQQMOHTz/Daa6+BMYZVq1Zi9OgxZW6TIsZl9J4uIz0d27dtxaTJk7Fh40aYmZoiMDBAZ73i4mIsX7YUAwYMwJat2zBunC/Wr1sHhUIBADh86BDGj/fDyJHv4OTJEwCAE8ePo13bdhS4GsbooYuNjUXfvv3g6NgBpqZmGOszDhcvXNA+huEJtVqNsT4+6N27D0xMTNC5c2dYWVnh4UPNbHiJVAqVSgVVsQpSqRQPHz5EbGyM9jthSc1h9NDdu3evzCRnCwsLtGzZEg8e3C+zXsOGDdG9uwcATQDj4s5BFBlat7YFALz77ihERoTj99hYDBnijW3btmKc7/gqTdomfHDbp5PJZJj9xSzt6zfeeANfzJ4DpVIBK6uydwmbm5tDqVSWW89ff/2FlSuWQyqVYtr0Gdo7etu0aYN5X84HABw/doyG1RqMW+isrKzKnUBsbm6hEzCZTK73ERYdOnRAQOAO3LlzBz+vX4/GjRvB0fHpreZPhtUFXy3Etm1bkfUwC/0H9Nf2ksT4jD682tnZIel2kva1TCbDw4cPYWtb9oE2eXl5uH3rFgDN5GgHBwd0deuKP0vNP2WMaYfVmzduwKSBCfznzsWve/fy+TDEIEYPXa/evXHq1EncSUqCQqFAcFAQ3Lq5wczMDPn5+QgN3Q/GGJRKJb77bhUSEhJQXFyMlORkXI6PR/t/tdfWVfpotUSthqmpKaRSqfaZIaRmMPp5utatW8NvwqdYv34d8vPz0alTZ0yaPBkA8M8/WTgdHQ1PTy+0atUKU6ZOw67gIO3DD4cOHQZnF80jWLOyshATE4NvFy8GoJlZ9ntsDJYtXQJPAx9gTfioEbPBSO1Gs8FIjUehI9xR6Ah3FDrCHYWOcEehI9xR6Ah3FDrCHYWOcEehI9xR6Ah3FLp6qHD7Fjwa1BdFe3YZZftGv8uEVK4wQHPzawMnZzRw7Wrk1rw46ulqAfVfN1EUEmTsZlQbCh3hjkJHuKPQEe4odIQ7Onqto9SJN7W/Sx3fMLicmPZA+7vk8UT26kY9XQ1R9OtuFIUEVdtRKlMoIJsxBYXbt1apnGLlUhT4fgxWUFC2Prkc+WPeQf6Yd164bRS6GqQwYBuYXG7sZujFcnMBleqF66HQEe4odIQ7Ch3hjkJHuKNTJrWcKiIUAGA6chRQwaz6moRCV8spN6wDGNOErpaodcNrcexpFPh+DMWyb43dFPKcal3ogLJnzWsT9e1bkPvPhNx/prGbYlS1MnS1Wcm1q2CPnwhfX1HoCHcUOsIdhY5wR6Ej3FHoCHd1KnTK/65F/khvqA4dMHZTSAWqFLrCnQEo3Kn7ZXE1CVPU3PvRiEaVQlcUFIiioMCX1BRSX9Sp4bWmkH3mC9lnvmAF+cZuSo1EF/xfAjEnhwJXgRoZOiYrQFHoPgBAQ98JRm4NqW4vPXSF2zeDKZWQWDeH2YcfG1yuKHgHBKtGFLo6iMs+nSoynMdmSC1BBxKEOwod4a5GHki8DIoVSwAADf0mQtK6tZFbU7/Vm55OfesvFJ8+VW31KZYvhmLpNyiOia62OuuLehO6l6H49xhjN6FWotAR7qpln67kcjyKz/4OADCfMas6qiR1WLX1dKrIcIipf1dXdaQOM+rRa+nHYgmWlkZsCeHJqPt08rmzkP+Od62dx0qeDx1IEO4odIQ7Ch3hrt5cBtOruPjp7yYmxmtHPVLvezox+x888h6Iggk+xm5KvVHvQ0f4o+G1AmJGuvZ3SctWRmxJ3UI9XQVK4i+hwOdDo30Zb11FoSPcUegIdxQ6wh2FjnBHoSPcUegIdxQ6wh2FjnBHoSPcUegIdxQ6wh2FjnBHoSPcUegIdxQ6wh2FjnBHoSPcUegIdxQ6wh2FjnBHoSPcUegIdwaGTni5rSB1gOEZqTB0glC2IsHc4vnaQ+osxliZ189mpjxVGl4l/QdUrUWkzissLKxyGYMfKyEIAgp9/GAGTboNSTSpuxhjUCqVUCgUkEqlVSoryOVypm8hYwyMMYiiCFEUoVarIarVUIuidhnAwPTWQOoSTT8jQBA0P1KJBBKpFFKpFBKJBBKJRLusIgb1dE8qkggCmEQCKQBRG7onKHl129MgPcmCIJFo/jQgaKVVGjpBEIDHw6nwJHCCAOHZ0DFGsaujNB1c2dCVDp4gCBBg2EEEUEnoBEHQBOtxpRKJBKxU4J49ciH1g1Cqd9P2co8DZ0jwDB5eAU3i2eMg6g8cBbFuKT9E2sBpXlT/8Ko9Wi011FIvV78J5fRs1TK8PltZ6VMlpTdAAawf9IWqqqfPqvT4V31Bo3N29c+L/Js/9zOHKWjkedFdJoQ7Ch3hjkJHuKPQEe4odIS7/wdhGEYNFUYlTAAAAABJRU5ErkJggg==)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Series / Tall / Interval</h1></header><div class="markdown"><p>Create a tall stat card displaying a primary value, an auxiliary value and a series plot.</p><div class="cover" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ0AAADCCAYAAABT/sD0AAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDExOjQwOjM1IEFNIFBEVD9FfFgAABYESURBVHic7d15fExX/wfwz52RRBZ+VGJLKzyaRKtkISJ2ikRsrZZuIqK160MJpbS161P09bTUrgmJoGSjltgiaRFLLHmKhkhoyCLNIpklmWTu+f0xjMRkkglxJsv3/XrlJTP3nnPP8HHO3c4dQS6XMxDCkcTYDSD1D4WOcEehI9xR6Ah3FDrCHYWOcEehI9xR6Ah3FDrCHYWOcNfgeQsyRlfP6jNBEJ67bJVCpy9oFMD6oXTQSv+bVzWABoWu9AZMTU3RoEGDF0o6qf0YYygpKYFKpdLmw9BMVLpP96RCxhhMTU1hYmJCgSMQBAEmJiYwNTUtkxFDGHQgwRgDYwwNGjz3LiCpoxo0aKDNh6EqDJ22oseVUg9HniUIgiYnVejtDBpemYGVkfqpqhmp0vBKSHmqbXgtvXNIoSMVeTYjlWXF4CsSFDqiT1WzQZfBCHeGHb0SYqBqOXp9XNULNoXUfdV0no6Ql4FCR7ij0BHuKHSEOwod4Y5CR7ij0BHuKHSEO26hS01NRRdXF+2PR/fumPjZp7hz5w4A4Pbt2+jXtw/OnDkDAIiMjEBkZMQLbzcsLBSDBr6NnOzsF66LVA/utwJ7eXmhe3cPZGdnY/sv27Fg/pf4dd9+NG7cGJ06dYK1tTUAIDIyEgAwcuQ7L7S91q1ao1OnTmhobv7CbSfVg/vw2vGttzB8xAiM9/ODp6cn7t27B8YYsrOzcfbsWaSmpmLmzH/j2tWruHb1Krq4uqCgoACiKGLTpo0YNGggevbwwLy5/sjNzQUAiKKIn39ej0ED30avnj0wZ/YXyH7cs92+fRsxMTFQqVQI2rkTXVxdEB4WhoFvD0D//v2wd+8e3n8F9Z7R9ukePLiPSxcvwsOjh85t8NOnz9D+vmHjJlhYWGDnjh3YumULvL29McffH+fi4rByxQoAQGBAAH7Zvh2jRr2H+fMX4NKlS5g3d67ebZ86dRL+/nPxqq0t1qxejczMjJfzIUm5uA+va9eswdo1awAAr732Gv49c6bOOg4ODnBydgYAuLu7A9Ds4zk7u+CLL2YDAFo0b4H09HQAwIEDkXBycsLUadMAAFlZWVi/fh3+/vvvctswx38u2rZtC0srS8yaORN3795DixYtq/eDEr2493Q+48YhZPcebN68Bc2aWWPypInaobAimZmZaNOmjfZ1z1698P7o0QCAhw8fom3bdtpldm3tNO9nZpZbV5MmTQAAFuYWAAC1Wv18H4Y8F+6ha968ORwdHdHVzQ2+432Rk5OD+PhLlZZr0aIF7t5N0b4+88cf2v2x5s2bIyUlWbssJUWznk3z5tXcelIduIfufwn/Q0R4OPbs3o0NP/8MAGV6qScsLSyQkpyMsLBQAJqj2ISEBPywdi327NmDBQvm4/LlywCA4SNGICEhAT/9+CPCwkKxIzAQTs7OsLOz4/fBiMG479MdOxaFY8eiIJFIYGtri2++/RYODg64ceNGmfUmT5mCb775Bqu/X41+/fpjnK8vFAoFwsPDoFAo0N3DA/PnLwAA+PlNQGFhISLCw6FUKuHu7o6vFi7i/dGIgQR9X15SeoaPKKqhVot45ZVXeLeP1AI5OTmQSiWQSKQQBEH7ow9dBiPcUegIdxQ6wh2FjnBHoSPcUegIdxQ6wh2FjnBXI0K3efMmyOVyYzeDcFIjQrdl82bIZDJjN4NwUiNCR+oXoz0uPe7cOURERCAh4RoAwHuIF1xcXOHp6Yl3R43S+yR3URSxf/8+/HbwIO7evQsAaN++Pd4dNQrDh4+o8JrfsWNROHjgAG7evAmZTIamTZuia1c3jPXxgaOjY5Xar1AosGf3bhw7FoUHaWkAgA6Ojnjvvffh6eWltx2MMRw6dAiREeFITk6GQqFEmzZt4OnpiY8/+QQNGzasUjtqI+4X/EVRxIoVyxERHg57e3v07NULgQEBGDZ8ONLT0hAfHw97e3ts2LhJZ3tFRUWYMX0arl69ioEDB6FT504Q1SLOn4/D2bNn0b//AHy/ejUkkrIdeHFxMebP/xKno6Ph6uqK7h4eaNyoMdLT0xEVdRRZWVlYumw5vLy8DPoMaWlpmD5tKu7fv48+ffvCqbMTRFFEXFwcLl68AG/voVi6bJlO8IqLi+HvPwd//P47Or71Fvr07oOG5g1x8+ZNnDxxAu3atcOGjZvQtGnTF/tL5qyqF/whl8tZeT8ymYwVFBSw/Px8lpeXy7Kzs1l1CArayVxdnFlwcBATRZExxpirizPLyMhgjDEWFxfHevXswaZMnqRTds3q1aybW1cWd+6czrIjhw+zLq4uLDg4SGfZ1q1bmKuLMzt86JDOssLCQjZ50iTWw6M7y8nJqbT9oiiysZ98zHr16smuXLmss/zQod9Y1y6uLChop86yH35Yy1xdnNmuXcE6yxITE9mA/v3YrJkzK21DTZOdnc3y8nJZfn4+KygoYDKZrNxMPfnhvk+379df4e7ujk8+GVvu/wZ3d3dMmjQZFy5cQHLy07uBRVFERGQEhg0bBvfu3XXKeQ0Zgh49eiA8LExnWdTRo3B3d8cQb2+dZWZmZpg6dSoKCwtx4cKFStt/4fx53LhxA7NmzYKzs4vOcm/voXj//dEI+OUXqFQq7fsymQz79+3TDKMff6JTzsHBAQu+WojY2BidewvrGu6hS09Ph72DQ4XrDB06FIsXL4GlpYX2vUePHsGuTRv07NVLbzl7Bwc8eJCm8/7OoGD898ef9JZ7sh8lkVT+5SzXrmn2QT099Q/FI0aORF5eHuLizmnfS0xMRGFhIQZXUG7AgAGwtLRE1NGjlbajNuN+IGFra4srly9DrVZDKpWWu84rzZph+IgRZd5r2rQpgneFVFh3ZmZmuftD5hVMtGaMITg4GBaWluji2qXS9hcVFUEQhAp3+G1sbAAACQkJ6NOnr7YcAFhYWOgtJ5FIYG1trT24qqu493SfTZyI69evw3/OHGRkVN9805zsbMScPo3+/ftVum5mZibu3buH6OhTmD5tKqKjT2HZsuV4pVmzSsvatbUDY0zb45XnyhXN3I3MjKez0Z7M17h65Yrecv/88w9SU1ORqWcWW13BvacbOnQYzEzN8N13qzByxHDtvNb79++jRYsWz1UnYwxLly6FVCqF73i/CtdVqVTwHvJ0iLO3t8eevb/i1VdfNWhbA98eiB/WrsUPa9di67ZtOj1XdnY21v20DhKJpMwJb1tbW7i5dcOuXcEYNHgw2rUrOxmpuLgYq1atBAAU1PET5dKFCxcurmwl9vjUSUXDVFX8q317jPngA9jZ2SEpKQmpqak4ePAATp44AblcDscOHWBiYmJwfRs2/IzIiAgsW74CnTp1qnBdQRDQsWNH9OnbD/b29ki8lYidO3agdavWeN3evtJtmZiaov3r7bF7dwhOnDwBS0srmJqaIjc3F8ePH8O8eXPRu3dviGo1Gv9fY3h6emrLdunaFQcOHkDo/v0QBAHm5hYoLCzEpUsX8dWC+VAoFOjduzfupqRgvF/F/3lqEqVSCYlEgCBIDDplUiMm5nRxdcGiRV/jz+t/4uiRI7C0tMSKlSvh5tat0rL79+3DqlUrMWXKVEycNKnK2y4pKcF/vvsOYWGh2LBxk7bnrUxCQgLWrP4e169f175nZWUFvwkT4OMzDu+NehdOTk5YsnRZmXJZWVlY/f1/EB0dDVEUAWj25UaMHIkZMz7H+vXrEHfuHA4dPlLlz2IsVT1PV2NCd/jIUbRo0QJZWVmYN9cfSXfuYP/+0AqH3KioKCxa+BVGjRqFBV8tfO7tq9VqjBg+DLa2ttiydVuVyj548ABpaQ9gZtYQjo6OMDMzgyiK6NnDA+P9/DB58pRyy+Xl5SElJRnqEjVet7fXPnVg2tQpKCkpqXI7jKnWzwazsbHBsuUroJDLKzx1cObMGXzz9SIMHDgIXz6e//q8pFIp3N27IzExscpln+yrde7cGWZmZgCAlORkqFQqtG//ut5yTZo0gYuLK7q6uWkDxxjDrVu3KixXF3AN3a1btxASsqvSBxS2bNkSgiAgNy+33OXXrl7FvLn+6NatG5YtX65z2au0pKTbmDP7C8THx1faPmbAVwwlJCRgxvTpuP7nn3rXiYmJgVQqRbduT3cPlEolPp8xHRHh4RXWnZubix49e1TajtqMa+hyc3Oxds0aHI2q+ORn3LlzYIzpHOEBmuDOnPlvOHbogNVr1lb6Fe9NmjRFbGwsDh8+pHed4uJinDt3Fm+8+Waln6FVq1Y4fz4OB387WO5yhUKBvXv3oF+/fmjcuLH2fXNzczxIS0PI7hC94Q4MCICNjQ3c3XWvuNQlXEPn5uYGe3t7bNq4Eefj4spdJyEhAUuWLkHz5s0xeLBnmWWpqamYPn0aWrVqhR9//MmgOzKsra3h6eWFA5GR+O2gblBUKhUWL/4WWVlZ8HvmdMvFixd0zsfZ2NhgsKcnwkJDceniRZ26vv56EfLzC8rdl/MZ64M7SUnYvl13fy0wMACxsTGYMmUqTE1NK/1ctRn3A4n09HRMnzYV9+7dg5OTE1xcXTV3mQwbhvSMDFyOj4eNjQ1+Wrce9qVOYWRnZ2O87zikp6djrI8Pmr2i/0Tumx07okuXp1cXFAoFPp8xA1evXoGTkxM8PHqgUaNGSE9Px4kTx5GVlYXZs+fgw48+0pa5k5SEMWNGQyKR4PCRo9qrDACQn5+Pzz6dgJSUFHh6eaGDYwfk5+cjKuooMjIysGTJUngNGaLTLsYYvv56EY4cPoyubm7o1q0bJIIEZ86cwZUrlzF6zBjt81lqk1px9KpSqRAWGopTp04iOTlZ+xhXJycn9OnbF2NGj4GFpWWZMqejozFnzmyD6h/r46N9eOIToiji4MEDOHL4CG7fvgW5XA5ra2t0dXPDRx9+BMcOHcqs/+jRI4z3HQdLS0v8EhCo0/solUoEBgTg+InjSE9Lh1UjK7g4O2O83wS8WckwHRERgbCwUKQkJ0MikcDe3gEffPgBBg0abNDnq2lqReieVfqUCal9av0pE1L3Ge129dLiL+u/CE7qHurpCHcUOsIdhY5wR6Ej3FHoCHcUOsIdhY5wR6Ej3FHoCHcUOsJdjbgMdvHiRezZHYJHjx7BydkZEydOKvdeuYyMDGzevAl3U1LQzNoaPj4+cHLSfEVnYuJfCAkJgUQQMOHTz/Daa6+BMYZVq1Zi9OgxZW6TIsZl9J4uIz0d27dtxaTJk7Fh40aYmZoiMDBAZ73i4mIsX7YUAwYMwJat2zBunC/Wr1sHhUIBADh86BDGj/fDyJHv4OTJEwCAE8ePo13bdhS4GsbooYuNjUXfvv3g6NgBpqZmGOszDhcvXNA+huEJtVqNsT4+6N27D0xMTNC5c2dYWVnh4UPNbHiJVAqVSgVVsQpSqRQPHz5EbGyM9jthSc1h9NDdu3evzCRnCwsLtGzZEg8e3C+zXsOGDdG9uwcATQDj4s5BFBlat7YFALz77ihERoTj99hYDBnijW3btmKc7/gqTdomfHDbp5PJZJj9xSzt6zfeeANfzJ4DpVIBK6uydwmbm5tDqVSWW89ff/2FlSuWQyqVYtr0Gdo7etu0aYN5X84HABw/doyG1RqMW+isrKzKnUBsbm6hEzCZTK73ERYdOnRAQOAO3LlzBz+vX4/GjRvB0fHpreZPhtUFXy3Etm1bkfUwC/0H9Nf2ksT4jD682tnZIel2kva1TCbDw4cPYWtb9oE2eXl5uH3rFgDN5GgHBwd0deuKP0vNP2WMaYfVmzduwKSBCfznzsWve/fy+TDEIEYPXa/evXHq1EncSUqCQqFAcFAQ3Lq5wczMDPn5+QgN3Q/GGJRKJb77bhUSEhJQXFyMlORkXI6PR/t/tdfWVfpotUSthqmpKaRSqfaZIaRmMPp5utatW8NvwqdYv34d8vPz0alTZ0yaPBkA8M8/WTgdHQ1PTy+0atUKU6ZOw67gIO3DD4cOHQZnF80jWLOyshATE4NvFy8GoJlZ9ntsDJYtXQJPAx9gTfioEbPBSO1Gs8FIjUehI9xR6Ah3FDrCHYWOcEehI9xR6Ah3FDrCHYWOcEehI9xR6Ah3FLp6qHD7Fjwa1BdFe3YZZftGv8uEVK4wQHPzawMnZzRw7Wrk1rw46ulqAfVfN1EUEmTsZlQbCh3hjkJHuKPQEe4odIQ7Onqto9SJN7W/Sx3fMLicmPZA+7vk8UT26kY9XQ1R9OtuFIUEVdtRKlMoIJsxBYXbt1apnGLlUhT4fgxWUFC2Prkc+WPeQf6Yd164bRS6GqQwYBuYXG7sZujFcnMBleqF66HQEe4odIQ7Ch3hjkJHuKNTJrWcKiIUAGA6chRQwaz6moRCV8spN6wDGNOErpaodcNrcexpFPh+DMWyb43dFPKcal3ogLJnzWsT9e1bkPvPhNx/prGbYlS1MnS1Wcm1q2CPnwhfX1HoCHcUOsIdhY5wR6Ej3FHoCHd1KnTK/65F/khvqA4dMHZTSAWqFLrCnQEo3Kn7ZXE1CVPU3PvRiEaVQlcUFIiioMCX1BRSX9Sp4bWmkH3mC9lnvmAF+cZuSo1EF/xfAjEnhwJXgRoZOiYrQFHoPgBAQ98JRm4NqW4vPXSF2zeDKZWQWDeH2YcfG1yuKHgHBKtGFLo6iMs+nSoynMdmSC1BBxKEOwod4a5GHki8DIoVSwAADf0mQtK6tZFbU7/Vm55OfesvFJ8+VW31KZYvhmLpNyiOia62OuuLehO6l6H49xhjN6FWotAR7qpln67kcjyKz/4OADCfMas6qiR1WLX1dKrIcIipf1dXdaQOM+rRa+nHYgmWlkZsCeHJqPt08rmzkP+Od62dx0qeDx1IEO4odIQ7Ch3hrt5cBtOruPjp7yYmxmtHPVLvezox+x888h6Iggk+xm5KvVHvQ0f4o+G1AmJGuvZ3SctWRmxJ3UI9XQVK4i+hwOdDo30Zb11FoSPcUegIdxQ6wh2FjnBHoSPcUegIdxQ6wh2FjnBHoSPcUegIdxQ6wh2FjnBHoSPcUegIdxQ6wh2FjnBHoSPcUegIdxQ6wh2FjnBHoSPcUegIdwaGTni5rSB1gOEZqTB0glC2IsHc4vnaQ+osxliZ189mpjxVGl4l/QdUrUWkzissLKxyGYMfKyEIAgp9/GAGTboNSTSpuxhjUCqVUCgUkEqlVSoryOVypm8hYwyMMYiiCFEUoVarIarVUIuidhnAwPTWQOoSTT8jQBA0P1KJBBKpFFKpFBKJBBKJRLusIgb1dE8qkggCmEQCKQBRG7onKHl129MgPcmCIJFo/jQgaKVVGjpBEIDHw6nwJHCCAOHZ0DFGsaujNB1c2dCVDp4gCBBg2EEEUEnoBEHQBOtxpRKJBKxU4J49ciH1g1Cqd9P2co8DZ0jwDB5eAU3i2eMg6g8cBbFuKT9E2sBpXlT/8Ko9Wi011FIvV78J5fRs1TK8PltZ6VMlpTdAAawf9IWqqqfPqvT4V31Bo3N29c+L/Js/9zOHKWjkedFdJoQ7Ch3hjkJHuKPQEe4odIS7/wdhGEYNFUYlTAAAAABJRU5ErkJggg==)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">cat</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">c </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tall_series_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">cryptocurrency_name</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    aux_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;={{intl quux style=&quot;percent&quot; minimum_fraction_digits=1 maximum_fraction_digits=1}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">qux</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> quux</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">pc </span><span class="token operator" style="color:rgb(137, 221, 255)">/</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_category</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;qux&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$red&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo qux&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_zero_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">while</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cat</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">qux </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> val</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">quux </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">/</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">cat</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-tall-series-interval.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/stat-tall-series-area"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Stat / Series / Tall / Area</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/layout"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Layout / Position »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/424c54c2.ec1a883e.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/424c54c2.8d2425bb.js"></script>
 </body>
 </html>
\ 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 bf40e69cf6..f59d087c2b 100644
--- a/docs/docs/examples/stat-wide-bar/index.html
+++ b/docs/docs/examples/stat-wide-bar/index.html
@@ -5,34 +5,34 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Stat / Bar / Wide | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Stat / Bar / Wide | H2O Wave"><meta data-react-helmet="true" name="description" content="Create a wide stat card displaying a primary value, an auxiliary value and a progress bar."><meta data-react-helmet="true" property="og:description" content="Create a wide stat card displaying a primary value, an auxiliary value and a progress bar."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/stat-wide-bar"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/stat-wide-bar"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/4f49ed83.489f3602.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/4f49ed83.1adef9c5.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Bar / Wide</h1></header><div class="markdown"><p>Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Bar / Wide</h1></header><div class="markdown"><p>Create a wide stat card displaying a primary value, an auxiliary value and a progress bar.</p><div class="cover" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATUAAABoCAYAAACQeGeZAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDExOjMzOjM2IEFNIFBEVFyw9DUAABD9SURBVHic7d15XFTV/8fx1wwwICoQKSLGFyipX5n+3FAQsTRBUnFBM03FJdTEBMstxa/a4r4B7sqmlZl+U3FJ+6mZWaKCoqWWUY9EE0MRtx+yzTDfP9ARBHQGEfT2eT4e89A7995zz/DH+3HOufeeo8rOztYjhBAKoa7uCgghRGWSUBNCKIqEmhBCUSTUhBCKIqEmhFAUCTUhhKJIqAkhFEVCTQihKBJqQghFkVATQiiK+cOcrNfLG1ZCiMqjUqkeugyTQ628IJOAE0JURPEgK54jFQ04o0Ot+MU0Gg3m5uaVkqpCCHGHXq9Hq9WSn59vyBxTc8aoMbU7hev1ejQaDRYWFhJoQohKp1KpsLCwQKPRlMgdUxh9o0Cv16PX6zE3f6hhOCGEeCBzc3ND5pjqgaFmKPT2BaSFJoR41FQqVVH2VKC1ZnT3U29iwUII8TAqmjsmdz+FEKIqPJLuZ/GBOgk1IURVujd3jM0fk94okFATQlSViuaNvCYlhFAU4+9+CiFENan0u5+3i61AVYQQ4mE8gufUhBDiSSKhJoRQFAk1IYSiSKgJIRRFQk0IoSgSakIIRZFQE0IoioSaEEJRqjTUzp8/T4vmzUp9FkdFAZCUdISVK1dQWFgIwOnTp2nRvBkHDnxfldUUQjzBqmUaWz+/TrRu3dqw7f788wAkHUkiJiaa4OBhlXo9mdxSiH+Oaul+Nm7SmB49exo+jRo14tO1a4mJiQaglUdLvtu3z3B82tk03uzTBy9PT8InT0Kr1QJw4/p1Ppg4EZ+23nTt0pkv1q0znBMWFkpQ0EDCwyfTupUH+fn5nDlzhqFDBuPdxou3+vUlKekIcLdFuGfPHgDy8/Np0bwZK1euAKCtdxtmzpjB0KFD8PL0ZOq/p3D48GG6BXTllXY+xMfHVcnfTQjxYNUSareyb3HlyhXDp6CgAF8/P15+uTEAi5cs5X+bNjUcv379FwQEBODj05Zdu3axfft2ACZPnszRY0eZMGEiXQMCmD9/Hvv2fWs479dffkFbUMCkSZPJzc3l3VEhFBYWMm36dJydnXlvzBgyMjKMqvPuPbvp2rUrvr4d2bFjBxGLFhIy6l3c3Z9n6ZIlXLp0qRL/QkKIiqqW7ufy5ctYvnyZYXvVqtW0aNmS1q1bc/Lkz7Ru3RozMzMuXrwIwIABA+nbrx95eX3Yt28ff/z+O5cuXSIx8SCTw8MJ6NYNgJSUFL76z1e0b98BABsbG2bPmYtKpWLXzp1kZWURHR2Di6sr7dt3oJ2PDzu//ppWxbrC5Wnn40NgYC88Pb3YsWMH3bp1x9/fH0tLDSkpx7hw4S8cHBwewV9LCGGKagm1Xr1682r79oZtd3f3+x5fp25dACwtLTE3N0er1XL5dsto5owZLFq4ECjqNrq6uhrOs7e3N4ylZVwqapEFBvakRo0aABQU5BvdUrO2rgmAmZkZABYaDYBhda1CXaFR5QghHq1qCTVXN1fatGnzUGXUqVsHgL79+tG3bz8AdDodVlZWZR9fp+j4+QsW0LChu+F4W1tbQ9fx1q1sAC5flq6kEE+qagm1EydOoNFYGrYbNnyOpk2bYV3TGoC42FgCAwPvW0a9eo609PBg186dPPfcc6jVZkRGLKJzly6MHz+h1PE+Pu2wtbUlNiaG/gMGcv7cOVatWsnsOXPx8vREo9EQHx+PXq/nm127KvcHCyGqTLWE2p7du9mze7dhu0+fN2natBndunUnMTGRmJgYnn3uWRwd69+3nFmzZjN71kwWLVqElZUVHV57jZCQUWUea2Njw+IlS5k3dw4fTp9O3bp1GT06lA4dOqBSqfhg0iQiIyKIiowkNCyMpKSkSv3NQoiqocrOzi53asniq7kUFurQ6Qqxt7evyvoJIf6hsrKyMDNTo1aboVKpDJ8HkdekhBCKIqEmhFAUCTUhhKJIqAkhFEVCTQihKBJqQghFkVATQiiKhJoQQlGqPdSGDwvm2rVr1V0NIYRCVHuoCSFEZaqW16Ryc3P57NNP2bVrJ3/++ScA7dq9QnBwMI1efrnEsfn5+axevYqdX3/NlStXeOaZZ3jzzb706t27zFcmNmz4kvXr13MxPZ2nn36aTv7+DBs2vNzZO8qi0+lo5dESgKPHUgzfz5k9mw0bviz3vAEDB/Lee+8bfR0hRPkq+ppUlb/QrtPpCBn5DqhUjBs3ntmzZxE+pWh67ODgYCIiI0usXzBu7PtkZWUxe84cnOo7cfr0aebOncvlzMuMHBlSouxlS5eSmHiQSZMm4eLiyvlz54iMjCA1NZWoqMVG1/HTtWvL/H7kyJEMDAoq9b1Wq+XtoUN48X9eNPoaQohHo8pDbe/ePVy+fJmvNm1Go9Hg4OCAu/vzeHi0wsrKisjICNat+wKAE8eP8/PJk2zbtp1atWoB0NbHB4d69RgUFMSgQYOxti6aruivv/5i+/btbNi40XCsg4MDUYuXENizB7/99hvP317g5X7Onz9PfHwck8PDiV69usQ+G1tbbGxtS52zedMmatvY4Nep00P9bYQQD6/KQy39QjoNG7qjuT1zbHG9e7+Bk5OTYTu/IJ/+/fsbQuoOd3d39PpCMjMz+de//gXAtq1bCQwMLHWsnZ0d3+77zuj6zfjkE/r3H4Cri6tRx2u1WmJiohk16l3UahmiFKK6VXmoNW7cmLi4WNLS0nBxcSmxz87Ojs6duxi2PTxa4eHRqlQZd8bhigdgcnIyISEh/HDgAGs/Xcu5tDScnZ0ZNGgwbX18jKrb1q0JZGZeZvCQIfx04oTR51haWtLJ3/++x40JCyUzM7PU9zNmzsLFxYWMjAxiYqI5feoU0TGxZY4Bjhs3lkv3TD++cFGEYVbfzMxMYmNj+OX0aWrVqkWXrl3x938dKBrHXLpkMTk5OTg4ODBs+AhUKhU5OTlMnzaV0aGhPPOMs1G/WYjHWZWHWouWLRkYFETQwAF0796DEydOUKjTmVTGsqVL6datu2F9AIBz59I4ePAg+/d/x9hx43B0rE9yUhKTJk9i7Ptj6dGz533LzMrKIjIigoULF2FhYWFUPQoKCoiJjmb06NAHttIWLopAr797T+aX06dZsWI59es7cvz4ceJiY/Dr1InTp06Veb5er+dKZiaRUVE89VTpmzVarZa5c+fg49OOUaPe5fr160RELMLc3IKOHTuSkpKCra0tY8eNZ8YnH3P27Fnc3NyIi43F19dPAk0oRrXMfBscPAzfjr4kJCSg1Wrx9e1Ij549CQoaVKr1dq81a+L5/fdUPvt8XYnvb9y4wbZtW9m0eYuhC+rm5oZTgwZMGD+O1zp2pHbt2uWWu2D+PF57rWOJpfkeJCEhASsrK6PG0u4NvY3/2UjPwEA0GktsbWyYMXMWOq22xNqlxV29ehW9Xo+d3VNl7j927Cj2Tz1FQEAAADVr1mTixInk5uYBRQvE5OUV/T8vLx8LC3N+OHCA3NxcOvr6Gv2bhXjcVdsgkIurK6FhYbRo0YKY2Fjs7OwYFDSQvXv3lnvON998w5r4eBZFRJYaO1OpVPTr91ap7729vXF0dCQx8WC55f74448kJycTGhZmdP0LCgqIi41h2PARJo+lHU1O5v9v3uTVV4tW1HJ79tlS9b7X5cuXsLKyIioqkvfGhDF71kxSU1MN+8+ePYuLqyvLly1lWPDbhIWOJjk5mQYNGgDQrFkzrKxq8NGH02nSpAkWFhoSErYwfMQIk+ouxOOuWlpq93J1daNp02Z4eXoxZkwYbdq0MSxjd8fhQ4eY8cnHRC1ejJubW6kybG1tqedYr8zynZycyhzPAsjJyWHWzBmMnzDxgcFSXMKWLdSoUQM/Pz+jz4GibuTGjRvo3fsNw3J7xrC1tcPPrxMvvvQSderUITHxIHNmz2LW7DnUrVuXrKwsjhw+woCBAxky9G3Onz/PooULqFWrNt7e3pibm/N2cDBQ9FjNRx99yJAhQ036zUI8Cao81Pbv34+Li0uJ9TnvaNa8Obm5uVzKyMCl2P5Tp04xceIEPv5kBk2bNiuz3BdeeIE//vijzH3p6ek8/XSdcutz8eJFpk+byvRpUw3f5+TkANDWuw2dO3dhcni4YV9BQQGxsbGEhoWZ3Er74YcDqNVmeHp5mXSeo6Mjgb16Gba7devO2T/Pcigx0bCYc5MmTejQoWghZ3d3d3oGBvLjjz/g7e1doqyNGzbQ6KVGONSrx8IFC8jPz8Ovkz/Nmzc3qU5CPI6qPNR27/4/8nLzmDd/fql9B77/nhrW1jjWv7uKVNrZs4SFjub9sWN55ZVXyi23k78/UZGRDB48pMTY2eFDh0hPv4iXp2eZ57Vr144tCVtLfX80OZmPP/6IL9Z/Sc2aNUvs27J5M9bWprfStFotm776ikGDhxj1ZHRx6RcukJ2djXuxZ+2srCzR3b7J4lTfibRzaSXOKSwsLBW6J0+e5Ndff+HfU6cRGxODp5cnjV5qxLRpUyXUhCJU+ZjasGHDOXo0mQ8mTuTYsWP8/XcGqam/ER29milTwhk9ejSWlkVrgmZkZBASMpKOvr60bOlBenp6ic/169cN5b7+emdcXFwIGfkOyUlJXLhwgYSELUyYMJ6wMWMMD80mJR1h8KAgLly4AIC1tTXOzs5lfhwcHHB2di7xalh+fj5xcbEVGkv7du9e7O3taWrkzYiUlBQSDxaNBV67do0FC+aTmppKfn4+hw4lkpSUhEerokde2vr48PNPP7F//3fodDrOnDnD5k2b8PFpZyjv5s2brImPI2TUu5iZmaHVFmCpscRCo0EnK8wLhajylpqLiwuffb6O6NWrmRI+mYyMDN4ZMQJPLy/mzJ1Xoqu0fv0X/P3332zcsIGNGzaUKqtXr96GbqFarSYyajHLli4lPHwyN27cxO1ZN8KnTMHP7+7dyWvXrpGWlkZubm6F6r958yZq1qyJr4l3DPPy8khI2ELYmPeMPud4SgpXr17Fq00bXmrUiL793mLF8mVcuXIFJ6cGjB4dargRYG9vz9hx41j3+eesiV+Dra0Nb/TpU+KVs1UrV9CjR08cHBwAeL1zZ+Lj4ti6bSu9evc26fcI8biq9nU/hw8LZu68+djZ2VVquUKIJ9sTu+5nQEA3k2bQEEKI+6n2lpoQQpTliW2pCSFEZZJQE0IoioSaEEJRJNSEEIpSpc+pXfct/40AIZ5UteM+q+4qPLbU1TCllbTUhBCKUqUtNdvd+6vyckKIfyBpqQkhFEVCTQihKBJqQghFkVATQiiKhJoQQlEk1IQQiiKhJoRQFAk1IYSiSKgJIRRFQk0IoSgmhJppS7oJIcTDMz13Hhhq906fq9eXO/u3EEJUintzxpR1ck3uflZ0aTkhhDDWw+SMSaGmUqnIzs7m1q1b0mITQlQ6vV7PrVu3yM7ONql1Vtx9V5O6c5Gi1aQKKSwsRKfTUajToSssNOwDPZJxQoiKKMquu6tFmanVqM3MMDMzQ61Wo1arjV5JCkyYT+1OoWqVCr1ajRlQaAi1OyTZhBCmuBtUd/JFpVYX/WtCkBVnVKipVCrQ64sucifQVCpU94aaXi+xJoQwSlEDrWSoFQ82lUqFCtNuEoARoaZSqYqC6/YF1Go1+mKBJmNrQojKUHzBYkMr7XagmRJsJnU/oShd9beDrvxAk6ATQtxP2SFlCLSijUfb/dTf7n5SrCsqrTQhRGVSldEyq/Tu570FG8LtnotJwAkhKqK80KroIx0mryZVXpBVtAJCCHFHZeTIQy2RJ0EmhHjcyCwdQghFkVATQiiKhJoQQlEk1IQQiiKhJoRQFAk1IYSi/Bd9Fw19cj5p8gAAAABJRU5ErkJggg==)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakePercent</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakePercent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">c </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">wide_bar_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">cryptocurrency_name</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    aux_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;={{intl bar style=&quot;percent&quot; minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$red&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    progress</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">pc</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">foo</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> bar</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">pc</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">while</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">foo </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> val</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bar </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pc</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pc</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-wide-bar.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/stat-tall-gauge"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Stat / Gauge / Tall</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/stat-large-bar"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Stat / Bar / Large »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/4f49ed83.489f3602.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/4f49ed83.1adef9c5.js"></script>
 </body>
 </html>
\ 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 b5bb1f9a16..d4b1f3b226 100644
--- a/docs/docs/examples/stat-wide-gauge/index.html
+++ b/docs/docs/examples/stat-wide-gauge/index.html
@@ -5,34 +5,34 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Stat / Gauge / Wide | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Stat / Gauge / Wide | H2O Wave"><meta data-react-helmet="true" name="description" content="Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge."><meta data-react-helmet="true" property="og:description" content="Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/stat-wide-gauge"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/stat-wide-gauge"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/5168cb29.cfa6afe5.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/5168cb29.4350d716.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Gauge / Wide</h1></header><div class="markdown"><p>Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Gauge / Wide</h1></header><div class="markdown"><p>Create a wide stat card displaying a primary value, an auxiliary value and a progress gauge.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakePercent</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakePercent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">c </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">wide_gauge_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">cryptocurrency_name</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=${{intl foo minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    aux_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;={{intl bar style=&quot;percent&quot; minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$red&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    progress</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">pc</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">foo</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> bar</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">pc</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">while</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">foo </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> val</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bar </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pc</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pc</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-wide-gauge.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/stat-large"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Stat / Large</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/stat-tall-gauge"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Stat / Gauge / Tall »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/5168cb29.cfa6afe5.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/5168cb29.4350d716.js"></script>
 </body>
 </html>
\ 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 369bcb1d3d..2d51572152 100644
--- a/docs/docs/examples/stat-wide-series-area/index.html
+++ b/docs/docs/examples/stat-wide-series-area/index.html
@@ -5,34 +5,34 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Stat / Series / Wide / Area | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Stat / Series / Wide / Area | H2O Wave"><meta data-react-helmet="true" name="description" content="Create a wide stat card displaying a primary value, an auxiliary value and a series plot."><meta data-react-helmet="true" property="og:description" content="Create a wide stat card displaying a primary value, an auxiliary value and a series plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/stat-wide-series-area"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/stat-wide-series-area"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/79d0d182.6ac4f142.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/79d0d182.ff62555f.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Series / Wide / Area</h1></header><div class="markdown"><p>Create a wide stat card displaying a primary value, an auxiliary value and a series plot.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Series / Wide / Area</h1></header><div class="markdown"><p>Create a wide stat card displaying a primary value, an auxiliary value and a series plot.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">colors </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">split</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">curves </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;linear smooth step step-after step-before&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">split</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">cards </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">len</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">curves</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cat</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;example</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">i</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">wide_series_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;1 </span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">i </span><span class="token string-interpolation interpolation operator" style="color:rgb(137, 221, 255)">+</span><span class="token string-interpolation interpolation"> </span><span class="token string-interpolation interpolation number" style="color:rgb(247, 140, 108)">1</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> 2 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">cryptocurrency_name</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        aux_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;={{intl quux style=&quot;percent&quot; minimum_fraction_digits=1 maximum_fraction_digits=1}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">qux</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> quux</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">pc </span><span class="token operator" style="color:rgb(137, 221, 255)">/</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_category</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;area&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;qux&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">colors</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">i</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo qux&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">15</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_zero_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        plot_curve</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">curves</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">i</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cards</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">append</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">while</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> c </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> cards</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        cat</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">qux </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> val</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">quux </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">/</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">cat</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-wide-series-area.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/stat-small-series-interval"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Stat / Series / Small / Interval</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/stat-wide-series-interval"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Stat / Series / Wide / Interval »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/79d0d182.6ac4f142.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/79d0d182.ff62555f.js"></script>
 </body>
 </html>
\ 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 673d861702..0d6a91064d 100644
--- a/docs/docs/examples/stat-wide-series-interval/index.html
+++ b/docs/docs/examples/stat-wide-series-interval/index.html
@@ -5,34 +5,34 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Stat / Series / Wide / Interval | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Stat / Series / Wide / Interval | H2O Wave"><meta data-react-helmet="true" name="description" content="Create a wide stat card displaying a primary value, an auxiliary value and a series plot."><meta data-react-helmet="true" property="og:description" content="Create a wide stat card displaying a primary value, an auxiliary value and a series plot."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/stat-wide-series-interval"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/stat-wide-series-interval"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/360edac9.fd4b7554.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/360edac9.7fb4d54a.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Series / Wide / Interval</h1></header><div class="markdown"><p>Create a wide stat card displaying a primary value, an auxiliary value and a series plot.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stat / Series / Wide / Interval</h1></header><div class="markdown"><p>Create a wide stat card displaying a primary value, an auxiliary value and a series plot.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> synth </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> FakeCategoricalSeries</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">f </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> FakeCategoricalSeries</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">cat</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">c </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">wide_series_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">cryptocurrency_name</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    aux_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;={{intl quux style=&quot;percent&quot; minimum_fraction_digits=1 maximum_fraction_digits=1}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">qux</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> quux</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">pc </span><span class="token operator" style="color:rgb(137, 221, 255)">/</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_category</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;interval&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;qux&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$red&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo qux&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">15</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_zero_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">while</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cat</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">next</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">qux </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> val</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">quux </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pc </span><span class="token operator" style="color:rgb(137, 221, 255)">/</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">cat</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> val</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-wide-series-interval.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/stat-wide-series-area"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Stat / Series / Wide / Area</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/stat-tall-series-area"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Stat / Series / Tall / Area »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/360edac9.fd4b7554.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/360edac9.7fb4d54a.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/stepper/index.html b/docs/docs/examples/stepper/index.html
index 9c7711b8c0..7a2af5a609 100644
--- a/docs/docs/examples/stepper/index.html
+++ b/docs/docs/examples/stepper/index.html
@@ -4,34 +4,32 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
-<title data-react-helmet="true">Stepper | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Stepper | H2O Wave"><meta data-react-helmet="true" name="description" content="Use Stepper to show progress through numbered steps."><meta data-react-helmet="true" property="og:description" content="Use Stepper to show progress through numbered steps."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/stepper"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/stepper"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/8c8ea2c1.31f4a055.js" as="script">
+<title data-react-helmet="true">Form / Stepper | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Stepper | H2O Wave"><meta data-react-helmet="true" name="description" content="Use Stepper to show progress through numbered steps."><meta data-react-helmet="true" property="og:description" content="Use Stepper to show progress through numbered steps."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/stepper"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/stepper"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/8c8ea2c1.6ffd1b1a.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Stepper</h1></header><div class="markdown"><p>Use Stepper to show progress through numbered steps.</p><div class="cover" style="background-image:url(/wave/assets/images/stepper-6ec5c425af780ae34209e38d2ae8821a.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Stepper</h1></header><div class="markdown"><p>Use Stepper to show progress through numbered steps.</p><div class="cover" style="background-image:url(/wave/assets/images/stepper-6ec5c425af780ae34209e38d2ae8821a.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;basic-stepper&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">          ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">stepper</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;basic-stepper&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">          </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;icon-stepper&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 2 4 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">          ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">stepper</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;icon-stepper&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;MailLowImportance&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;TaskManagerMirrored&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Cafe&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">          </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;almost-done-stepper&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 3 4 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">          ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">stepper</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;almost-done-stepper&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> done</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> done</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">          </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/stepper.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/form-markup"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Markup</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/table-markdown"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Table / Markdown »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/8c8ea2c1.31f4a055.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;basic-stepper&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">stepper</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;basic-stepper&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;icon-stepper&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 2 4 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">stepper</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;icon-stepper&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;MailLowImportance&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;TaskManagerMirrored&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Cafe&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;almost-done-stepper&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 3 4 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">stepper</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;almost-done-stepper&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> done</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> done</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/stepper.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/form-markup"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Markup</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/table-markdown"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Table / Markdown »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/8c8ea2c1.6ffd1b1a.js"></script>
 </body>
 </html>
\ 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 29c7711c8e..49270be36e 100644
--- a/docs/docs/examples/swatch-picker/index.html
+++ b/docs/docs/examples/swatch-picker/index.html
@@ -5,33 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Swatch Picker | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Swatch Picker | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a swatch picker to allow users to choose a from a specific set of colors."><meta data-react-helmet="true" property="og:description" content="Use a swatch picker to allow users to choose a from a specific set of colors."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/swatch-picker"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/swatch-picker"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/1c59264e.ad6835f8.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/1c59264e.021a8962.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Swatch Picker</h1></header><div class="markdown"><p>Use a swatch picker to allow users to choose a from a specific set of colors.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Swatch Picker</h1></header><div class="markdown"><p>Use a swatch picker to allow users to choose a from a specific set of colors.</p><div class="cover" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAABMCAYAAAAvHnFsAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjE0OjE5IFBNIFBEVB8XT9UAABJiSURBVHic7Z19WJRlvsc/M8zwKqTgC6QCaokoqUDKaBla6inZarfUyFV78WXPaoqbgPa6bVar7VrannC3PFdd6ba2UaudS3frKsHcTPMCjCSgjgokZwhhFyGYYZiX8wcN6SowzwvtpL+Pl384c/++35tRvzz3zf38HoPH4/EgCILgZxj/3RMQBEG4GBJOgiD4JRJOgiD4JRJOgiD4JRJOgiD4JRJOgiD4JRJOgiD4JRJOgiD4JRJOgiD4JX0STrt37+azzz7rC2lBEC4TFIdTakryeb9vunEGT/7qV7S0tABw8uRJNjz5K55+aoNPeu+//z6pKcm8+sorSqdySbBp40ZSU5KprKz8d09FEPwKVVdO4eHh3HnnXH78k58waNAg9uzZzZqsLDweDyNGjCB33Tpy163Xe65+T2FBAakpyWzf/vK/eyqC8IPHpKYoMiqKhx95BACHw8HiRQs5dqyEz8vKGJeUxF13Zeo6SUEQLj807zkFBgZy3XXXA3Dq1CmamppITUnmgZUru8bU1dWRk53N9PQbmDbtetbl5vD1119fVK+mpoYZM6Yza9ZM6urqLnjf4XDwu9+9wG233sp1U6eweNFCDh061O38/uedd5h75x1Y0iYz55ab2bYtD4/Hg81mI23yJBYvWtg19qH160lNSebtt98C4OzZs1ybmsLyZUsBqK+v56H165k9ayY3TLuerKzV1NTUAJCfn8/atQ8CsC0vj0nXpnbpFhUVcf999zJ1ioXZs2ayZcvzOByO8+ZptVq5//77mGKxkHnXfMrKyrr/0AXhMkCXDfGms00ABIeEXPBeW2srS5fcT2FhATNm3MjsWbPYv38/q1Y9gNvtPm9sS0sLa9Zk0W63s+X5LURHR1+gt+X553n1lVeYOHECy5Yvp6GhkbUP/qIrJM6luLiYJ574JcaAAFasWEni2LFsf/ll3ti1i5CQEMaPH09FRQU2mw2AkpJioDNMOv9cgsfjIc1iwe12k7V6FQcOFHLrrbeRmXk3nxw5QtbqVbjdbsaPH8+EiRMB6NevH1lr1gBQXl7Oip//J6eqqpg7dx4JCQnseO01Nm/+7Xlz/c2zm4iKjGLcuHF8+eWXPLR+PdLNRricUbWs8+J2uykuKuKv+/ZhMplISU6+YMzevXs7rwqWLGHlygcAiIm5kg8+eJ/q6uqucU6Xk9ycbGqqq9m46VnGJSVd1PPW225j6tSpXD9tGgBGg5GtW7dw7FgJsbGx5409efIkALNnzWbxPffgcrk4cKCQUSNHAZBmsVBcXExpaSkxMTGcOXOGyMhISoo7Q8obVhbLFFwuF2vXZhMUHMw111wDQEVlBR/9/e9YrVZGjx7N4kWLWXvsGIsWL2bhwkUAvPrqKzidTjb+eiNpFgsej4fs7LV8+cUX58113vz53HvvfQD8dMECKirKsVqtXHnllb7+dQjCJYWqcKquqiI15bsgMhgMZGfnEBkVRVNT03ljKyorAEibnNb12tJly1i6bBkAJ06cADqXQgCRkZHMnDmzW+/4+HgqKyr45S8fp/Z0LZ9/3rn8cTg6Lhh73XXXEXHFFWzblsd7771LcnIyM2bcSFx8PAAWi4VteXmUlBRjtcZgMBhYtnw5mzZupLa2lpKSEiKuuILExESMRiOxcXHs27uXnTt38NVXX3UFTEfHhd5eKisqCAgIICU1teuz2rz5uQvGJU/87vO86qpRVFSUY2tr61ZXEC51VF853b1gAQYM9B/Qn+uvn0ZCQsLFBypcmjQ3N1NZUUHCmDEXff9ny5dRXl7OTTfNJD09nTGJY/jT669fdGxMTAz5+W/x17/uo7ioiHfffZf8/HyWLFnKipUrGTt2HOHh4ZSUlDBkcC2jExKYNWs2z27axKGPPqKivJwZN96I0Wikrq6OBXdn4nK5uPmWW7g29VoKCgs4cvhwj1+Pr0szY0DAd38wGHyqEYRLGVV7TnHx8WRn57A2O5slS5Z2H0zAmDGJABw8eLDrtZdfeom7M+/i1KlTXa/NnTePvG2/x+Vy8eijj9De3n6BVm1tLWVlZczJyGDjpk0sWryY4ODgbr0rKyo4+OGHZGT8iOee30L+W28DUFhYAIDRaGTSpMl8VlrK0aNHSUtLY8CAAVx99dXs2PEaLpcLS5oFgE8+OcLZs2fJzs7hoYceZt78+di/3avq4ttQcTqd3339iYm4XC4+/rhz097j8fDgL9Zw/333djtvQRA07jn5QkZGBq+++gqvv/5Hmpr+CcC+ffuIi4sjLi6ua1kXEx1DWload2VmsutPf+KFrVvIyV13nlZERASBgYEc/vhjdrz2Gk1NTbz55p+79T5x8gQbNjzJnj27mT37P/jss1IArhk/vmtMmsXC/v0fUF9f37X0nDw5jZ07dwBgmTIFgIEDBwHwZv6btNna+PTYMSoqKs7zGzJkCAB7du+mw9HBqtWrueeeeyksKODxxx4jIyODEydOcvToJ9xxx53qPlBBuEzo83vrQsPCeHn7f3NDejqFhYXsLyjghvR0/uvFPIzGC+1Xr84iPj6eN954o+tqw0t4eDi/3fwcERER/OEPv+fzz8tY/rOfdes9Z04Ga7OzaWpq4oUXtlJcXMyCBT8l95zQs1g6r4wCAwNJTkkBYPLkyQDExsYSExMDwNSpU3nggVU0nGlgW14eISEhZGT86Dy/xMTErr20N9/8M3a7nbFjx/Lii3mMGDGCv/zlL5w48b8sWPBTcnJzlX6UgnBZYZCnrwiC4I9IVwJBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPwSCSdBEPySPn801PfNaXsbBxu/5kBjHV+0NgMwOiyC9KhopkUNYVhwaJ/4OqtOY3vvQ2x/O0DH8c4nAZuTRhNyczohs2/AFD+sT3xpOY2n5gCe6gN4GisBMEQlYIhLxxCbDuF942u1Wjly5DCHjxzueuz7yJEjsaRZSEuzdD21Rm/c9fV0FBXRUVSE89vH2Zvi4jCnpmJOTcU4eHCf+OJswNN2HE/bcXDUdr4WOBRDaBKG0CQwDewT25rGZj4or+GDsirK/+8fACReGclN4+K5KTGW2KiIPvFtsLVyvLGO4w111H5zFoCh/a4gaWA0SVHRDAwJ6xNfAM+3vy6Zp6/U2tvY8MWnlLU09ThuXHh/Hhs9gaE6hZSz6jT/ePApHMXHexwXmJJE5HOP6hdSLadxH3wSz5mefQ2DkjBOe1y3kLJarWx9YQuVlZU9jktISCBr9RrdQspdX0/bSy/h/PY5h91hGjWK0OXL9QspZwPuhl3QXt3zuKA4jAMzdQupmsZmHs4/yKdf1fc4bsLwwTwzd5puIdVga2VX5TGqm//Z47i4iAFkJkzUNaTcuIHv4qjPwqndbqfD0Y7T6cTtdgFgNAZgMpkwBwYR1MOTepVS2FjHYxUlimo2jElmelS0Jl/bvgIaVzymqCYqbwMhc2Zo8vVUF+AufERRjXH60xjitPke+vgQv/nNs4pqcnJymTplqibfjqNHac3LU1QTtmIF5kmTNPl62krxnNmhqMYwaBGG0PG9D+yB945XsXZXgaKazZkzmJ0Ur8m3tMHKjs+LFNUsGpvK+IHavgF1Xie5L3g94IknnnhCk/K/0G63803zWRztdlwuF+dmn8fjweVy0eFop91ux2AwYjJpW1mqCSaAgoY6RoaFEx/aT5WvmmACsO0twDx6BOarR6jyVRNMAJ6q/RgGjMTQX52vmmACOHToI2JjYxk+fLgqXzXB5K0LGDqUgKFDVfmqCSYA2kohMBqDeYgqXzXB5K27avAARg3ur8pXTTABlJ6xEh0WzpDQcFW+3QUT6Hzl1Nbagt1mA8BkMhMUHIzJHEhAQAAALpcLZ4eDdrsdp7MDgOCQEELD1H1htfY2MosOaJrzrtR0xUs8Z9Vp6qZnavKNLtylfInXchrX2/M1+Qbc8WfFSzyr1cqKlT/X5Jv34jbFSzx3fT3N69b1PrAHIjZtUr7Eczbgrt2kydc4dJ3iJV5NYzMZz7+lyXfvL+5UvMRrsLWy6ajyQDyXdZNmqFriuXF1+55uP607N5jC+oUT0X8AQcEhXcEEEBAQQFBwCBH9BxDWrzOQ7DYbba0tqjw3fPGp5nmr0fjHg09p9lWj4T74pGZfNRpbX9ii2VeNRttLL2n2VaPhbtil2VeNxsP5BzX7qtHYVXlMs68aDXc3V0xedAmndru9K5jCI/oTFBwCwNGSUhavzCFiRDIRI5JZvDKHoyWlAAQFhxAe0XkJarfZaLfbFXmetrf1uvntC2UtTZy2t/k83ll1utfNb19wFB/HWXXa94KW071ufvuC58xxaPHd12q19rr57QuVlZVYrVafx7vr63vd/PYF54kTuOt73lQ+v6Ch981vX2iv7tTykZrG5l43v33h06/qqWls9nl8g621181vX6hu/icNtlaFVT0v2nQJJ1tb56TC+oVjDgykw+nknpW5WG6exx/z36G1rY3Wtjb+mP8Olpvncc/KXDqcTsyBgV1XUF4NXznY+LUeU1esZXvvQ918lWh5arQtX9VqHTlyWDdfJVodRcr3P/TQ8rRp/wagRuuD8hrdfJVoHW+s081XiZanl2ACHcKp3W7H7XZ9u8fUecW0NOthdubv6bZmZ/4elmY9DHReQZlMZtxul6KrpwM6fqhKtGx/0y8klGh5qnUMJwVah3UMJyVal104lVXp5qtE63iDjuGkQOt7CacORztA19GAoyWlPQaTl535e85Z4gWfp+UL3gOWeqBEy3vAUg+UaHkPWOqBEi3vAUs9UKLlPWCpB4q0vAcs9UCBlveApR4o0fIesNQDZVrfQzg5nU4ATOZAAH633fcfv3rHemu9WoIgCJrDyXvA0vtTud373ve51jvWW+vV8oXRYfod21eiZU4arZuvEi1DVIJuvkq0Ro4cqZuvEi1TXJxuvoq0AtWdi9KqlXhlpG62SrSG9rtCN19lWoZeR/xgb/xN13i6W61WyM3puvkq0TLE6eerRMuSZtHNV4mWOTVVN18lWobQJN18lWjdNC5eN18lWkkD9ft/pETL8H2Ek9H43QFLgB/PmelzrXest9ar5QvTotSdwNWqFTL7Bt18lWgZYnUMJwVaaTqGkxKtyy6cEmN181WilaTjN3klWt9LOHlvP3F2OABYtXSRz7Xesd5aJbeyDAsOZVy4uqP65zIuvL+iTgWm+GEEpmj/BxyYkqTshHj4MAyDtPsaBiUpOiEeExNDQoL2JWVCQoKiE+LGwYMxjRql2dc0apSyE+KmgRCkw5IyKE7RCfHYqAgmDNd+s/KE4YMVnRAfGBJGXMQAzb5xEQNUnBDvOaA0h5M5MAig6xjApOTxLJx7e691C+fezqTk8efVerV85bHRExSN10sj8rlHNfuq0TBOe1yzrxqNrNVrNPuq0QhdvlyzrxoN40Bttyap1Xhm7jTNvmo0MhMmavZVo2HsJX40h1NQcDBGYwBOZwft9s5T4tu3PtNjQC2cezvbtz4DQLvdhtPZgdEYoLhTwdDgUDaMSVY99w1jklW1TjHFDyMqb4Nq36i8Depap4QPwzj9adW+xulPq2qdEhMTQ05OrmrfnJxcVa1TjIMHE7ZihWrfsBUr1LVOMQ3EMMj3FcC/Yhi0SFXrlNioCDZnqu8csTlzhqrWKQNDwlg0Vv0yetHYVNWtUww9RJAuXQkMBiMdjnY6HA5MJjNms5mfZMxizsx0bPZ2TlZ9RaDZzPzbb+Hl555i5ZKFBBiNdDgcfNPSecYoNCxcVYeC+NB+jAwLp0DhYTKtLVPMV4/APHoEtr3KbpjU2jLF0H8EhgEj8VTtV1SntWXK8OHDiY2N5dChjxTVaW2Z4u0s0HH0qKI6rS1TDOYhEBjd2WVASZ3GlimjBvfnqsEDeO94laI6rS1ThoSGEx0WTukZ328xAu0tUzr3ngxc7NyTbl0J/vXGX+9p8e5ot9to/abzhl8tnQm8SLO5iyPN5jQizeYuyg+u2dz33TLlYkibXmnT2ydIm94ffpvedrsdW1trrwcqjcYAQkLDdO2IKQjCpcMl0aZXEIRLj0vmAQeCIFxa/GBvXxEE4dJGwkkQBL9EwkkQBL9EwkkQBL9EwkkQBL9EwkkQBL9EwkkQBL9EwkkQBL9EwkkQBL9EwkkQBL/k/wErTlfXHS3OUAAAAABJRU5ErkJggg==)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;swatch=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">swatch</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">color_picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;swatch&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Pick a swatch&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#011627&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#2EC4B6&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#E71D36&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#FF9F1C&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#50514F&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#F25F5C&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#FFE066&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#247BA0&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#70C1B3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#FDFFFC&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/swatch-picker.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/color-picker"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Color Picker</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/tabs"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Tabs »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/1c59264e.ad6835f8.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;swatch=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">swatch</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">color_picker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;swatch&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Pick a swatch&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#011627&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#2EC4B6&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#E71D36&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#FF9F1C&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#50514F&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#F25F5C&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#FFE066&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#247BA0&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#70C1B3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#FDFFFC&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/swatch-picker.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/color-picker"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Color Picker</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/tabs"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Tabs »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/1c59264e.021a8962.js"></script>
 </body>
 </html>
\ 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 050f259a47..ac8825d59c 100644
--- a/docs/docs/examples/tab-delete/index.html
+++ b/docs/docs/examples/tab-delete/index.html
@@ -5,41 +5,39 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Tabs / Navigation | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Tabs / Navigation | H2O Wave"><meta data-react-helmet="true" name="description" content="Navigate between two or more tabs."><meta data-react-helmet="true" property="og:description" content="Navigate between two or more tabs."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/tab-delete"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/tab-delete"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/58b13b12.5e0eeb21.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/58b13b12.2dd6b897.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Tabs / Navigation</h1></header><div class="markdown"><p>Navigate between two or more tabs.
-Delete the cards when switching between tabs.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Tabs / Navigation</h1></header><div class="markdown"><p>Navigate between two or more tabs.
+Delete the cards when switching between tabs.</p><div class="cover" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANcAAADQCAYAAACUePQNAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAxOjI3OjI2IFBNIFBEVBHG1U0AAA4ASURBVHic7d17cFNlGgbw56RJauRWKhBKBQuWxVFXe+HSsqsoLI5CEbnUAK4DbVFQZ7m5O+Nld72igwIyI3jBYkG60m5nVVphpcB6ZS2iFQFHkFKU0tuA0gvBlLb59o/SbBtbGorv1yQ+vxlmaPqS9xDOw/lyevIew+l0KhDRL87U1RtAFKwYLiIhDBeREIaLSAjDRSSE4SISwnARCWG4iIQwXERCGC4iIQwXkRBzZ/6QUrwckagjPoervUAxaERt6zBcLcNjtVphNpthGIboRhEFg/O+52oOllIKVqsVFouFwSLyUYcnNJRSUErBbO7U2zOiX612w+VZDp4LF49YRBemw2WhAk9aEHWGz8tCIrowbYar5YkMhouoc3y6QoPhIrpwvPyJSEjHZwuJqFN8OHIxZESdwWUhkRCGi0gIw0UkhOEiEqLlatyuui6RZzypK/HIRSSE4SISwnARCWG4iIQwXERCGC4iIQwXkRCGi0gIw0UkhOEiEsJwEQlhuIiEMFxEQhguIiEMF5EQv767wurVq3HPPffAbrejqqpKtNfu3btx/33zPV9bLBYMHToUi5c8iLi4ONHeTqcTa199Fdu3b0dNTTWioqIwc9YsTJyYJNbzpTVrsG5duufr8MsuQ2xMDO6dNw/R0UPF+nq/zs0iIiLw7patYn27gt+Gy2QyYdq0aTAMA1OmTEFGRoZ4T4vFgrfefgcA4HK5sOXdd7Fo4QJszs1D7969RXq6XC7MTUuFYRhYvGQx+vXth71f7cVzy5ahoqICaWlzRfoCQFxcHJ548ikopXDyxAnk5uVizuzZWL1mDWJiYsX6tnydm4WEhIj16yp+G64xY8bAZrNh1apVcDgcWsJlGAYGDBjg+fpPCxZg+/btKPj0U9w2YYJIz/T019DQ0IA3NmbCZrMBAK6PicG11/4W8+fdiylTpiI8PFykd2joJZ6/b2RkJK6PiUFYWBiefOIJ/Outt8U+Qe79Ogcrv33P5XA4kJubi8zMTIwbNw59+vTpku0wm0NgsVpFnlspha1btiAlNdUTrGbx8fFYvGQJqqurRXq3Jy01DaWlpThw4IDWvsHIL8NlNpsxbdo05OTkYN++fSguLsbUqVO1bkNdXR3WZ2TA5XJh5IgRIj2qqqpQWVmJuLj4Nr8/a9ZdGDx4sEjv9lzarRuio4ei6PBhrX2DkV8uC8eOHQur1Yr8/HwAQE5ODhwOB9auXSva9+zZs/j970Z7fm+xWPD00qXo2auXSL+amhoAQM8ePUSev7N69OiBmtoasec/e/YsEhNGtXrMMWMGFi1aLNazK/hluBwOB/Ly8lBXVwegKVwPPfQQ7HY7KisrxfpaLBZsysoGADQ2NmLPZ5/hkYcfxnPPP48bbrjxF+/Xs2dPAEBNbS0u7dbtF3/+zqqprUGvnjL/oQCtX+dmza9FMPG7cFksFqSmpgIApk+f7nk8JCQE06dPx5o1a8R6G4aBgQMHer6OiorCiRMnkJ2VLRKusLAw2O12fFlY2OYJkzff/AcSE0drXRo6nU4cKSrCb4YNE+thGAaioqLEnt9f+N17rltuuQUAEBsbi5iYGM+vrKwsOBwO7dvTu3dvnDnjFHluwzAwYeJEZGS8DpfL1ep7hYWFeGHlSvTS/D/62rWvYtCgQbj66qu19g1Gfnfkcjgc2LRpE/bu3dvq8WXLlqGwsBCRkZEoLS0V6a2UQllZGQCgoaEBRUWHsX59BmbMmCnSDwDS0ubik48/xty0VMyZk4J+djv27fsK69LTMW/efIRfdplY77o6F8rKyqCUGxUVlcjN3Yz/7NyJl15+Rawn0Pp1bmYymdC/f3/Rvrr5VbhCQ0MxefJkpKSk/Ox7e/fuRVFREZKTk7Fq1SqR/vX19ZiUNBFA0z+23W7HHVOmYPacOSL9AMBmsyF93et45ZWXsXLlClRXV+OKK67AkiUPYtLtt4v1BZqOjpOSJsJkMiE8PBzx8fFYv+ENXHnllaJ9W77OzWw2Gz7Z9V/RvroZTqfzZzOfW94L2e1uRGOj+6J+kMlx1vRr5HfvuYiCBcNFJIThIhLCcBEJYbiIhDBcREIYLiIhDBeREIaLSAjDRSSE4SISwnARCWG4iIQwXERCGC4iIQwXkRAtn0Tmhxbp14hHLiIhDBeREIaLSAjDRSSE4SISwnARCWG4iIQwXERCGC4iIQwXkRCGi0gIw0UkxIdwdc0dSogCXbvh8r7tD69sJ7owPi8LvW8rSkTn51O4DMOA0+nEmTNneAQj8lGbd5YE0OLOkm643W40NjbC3diIRrfb8z1AgVkjaluHn0Q2DAOGYcBkGFAmE0IAuD3hasaEEXk7b7gMwwCUagpYc7AMA4Z3uJRivIi8tBsuwzCaAmQYMNB0d3vVIlh870V0fj4tC4Gmn3apc4FrP1gMHFGzDpeF6tyyEC2WiDxqEXXM5yOXJ2Ro/QNmBo2obT7PLWwvUN5XchBRk04NBWWgiDrGq+KJhDBcREIYLiIhDBeRkE6d0ODpd6KO+Ryu9gLFoBG1rcNwtQyP1WqF2WzmqXgiH5z3PVdzsJRSsFqtsFgsDBaRjzo8odF8oa7ZrOUmlERBo91weZaD58LFIxbRhelwWajAkxZEneHzspCILkyb4Wp5IoPhIuocn67QYLiILhwvfyIS0vHZQiLqFB+OXAwZUWdwWUgkhOEiEsJwEQlhuIiEMFxEQhguIiEMF5EQhotIiPZwzZzhQHxcLNatS9fdmkgrreH6/rvv8O233+LSbt2wbds2na2JtNMarvz8fISEhOCB+x/AkaIiFBcX62xPpJXmcG3D8BEjMDEpCWazGdu2vaezPZFW2sLVfKQaMXwEAGDYsGHIy83V1Z5IO23hys/PBwCsXv0ibhpzI77++mtUVlbi0MGDujaBSCtt89Ly85tOYKxd+xoA4MTJk3j0kYeRn5+PYVddpWsziLTRcuQ6dPAgjh07hoULFyF++HDEDx+OW2+9Fdddd50ndETBRku4mpeEN48d2+rxm28ei7KyMuzfv1/HZhBpZTidzp991Ljl1Ce3uxGNjW6Eh4d3xfYRBSxe/kQkhOEiEsJwEQlhuIiEMFxEQhguIiEMF5EQhotICMNFJIThIhKi7ar4hoYGrM/IwNZ/b0V5WTn69u2LyXdMRkpKKkwmU8DWAE1X/GdmZuJocTFCQ0Mx5qabsHDBQvTs1atLarz9+OOPWP3iiygoKMCpU6cQHX0l5qSkYty4cUFfo3tfaMXpdCrvX6dPn1a1tbWqpqZGVVWdUj/88IO6WEufflqNTkxQGze+oQoLv1A5OTkqYdQolZW1KaBr3nvvPRUXG6OeffYZ9fmePWrnzh1qUlKS+sufH+ySGm/19fUqOXm6mpSUpLZu2aIKC79QK5YvV8Pj49ShQ4eCukb3vuBNW7gOHDigvvyysNVjf//bX9V98+cFdE1ZWZnauXNHq5rNm99Ro0aOUG63W3uNt4aGBvXRRx+q0tLSVo9PnHCbSk9/LahrlNK7L3jTtiy85pprAADV1dU4erQYFeUV+OabbxAaGhrQNREREYiIiIDL5cLRo0dRUVGODz/8EPX19XC5XLDZbFprvIWEhOCGG24EAJSXl6OkpATHj5egqqoKtbW1QV2je1/wpi1cn+/Zg5UrV+DQoUOw2+0YOGgQQkNDW93BMhBrKisr8PRTT6GgoADde/TAoIGD0KtXTwD/vzunzpq2ZGdnYcP69Th58iQiIyMxZMgQdO/evdWfCdYanfvCz+hYFp4+fVqNTkxQjz/2WKvnWrF8ubpr1syArVFKqZSUOeruu/+ojhw54nnsgw8+UHGxMcrpdGqv8VZQUKDiYmPUP7Oz1U8//eR5fObMGWrlyhVBXaN7X/Cm5VT8yRMn4HK5kHznnZ4PXSqlsH//voCuAYDjJSUY/4fxGDJkiOexffu+6rIab8ePl8BmsyH5zjtxySWXAGha2hz7/vugr9G9L3jTsiyMvPxy2O12rFr1AmbPngPDMLD5nbdRUlKC/v37B2wNAMTHD0dW1ib07dcPffv0QcHuArybl9fq76+zxlvM9TGoq6vDs88sxfjxt6CqqgobNqyH2WwO+hrd+4K3kEcfffTx8/3jqHMf92/rzbKvTCYTEhISsGvXLmRu3Ig9n32GhMQEDB48BOXlZZg6bVpA1gDAyJEj8d3Ro8jM3IgdO3YgLCwM05OT8f777yM1NQ0Wi0Vrjbfw8HBER0cjLzcX2dlZKCo6jLn33IviI0cwYMAAJCYmBm2N7n3BG2doEAnh5U9EQhguIiEMF5EQhotICMNFJIThIhLCcBEJYbiIhDBcREIYLiIhnKHBGRpBXcMZGgFcwxka/luje1/wxhkaF1nDGRr+W6MUZ2gEdA1naPhvje59wRtnaHCGRlDXcIZGgNYoxRka/lzDGRoBXANwhoY/13CGhp/Ox+AMjcCv4QwNP52PwRkagV/DGRpEQYqXPxEJYbiIhDBcREIYLiIhDBeREIaLSAjDRSSE4SISwnARCWG4iIRwhgZnaAR1DWdoBHANZ2j4b43ufcEbZ2hcZA1naPhvjVKcoRHQNZyh4b81uvcFb5yhwRkaQV3DGRoBWqMUZ2j4cw1naARwDcAZGv5cwxkafjofgzM0Ar+GMzT8dD4GZ2gEfg1naBAFKV7+RCSE4SISwnARCWG4iIQwXERCGC4iIQwXkRCGi0gIw0UkhOEiEsIZGpyhEdQ1nKERwDWcoeG/Nbr3BW+coXGRNZyh4b81SnGGRkDXcIaG/9bo3he8/Q9iKET+/jKvcwAAAABJRU5ErkJggg==)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">TABS </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;abcde&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">display_tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;example_</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">client</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">tab</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markup_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 2 4 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">upper</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;\n&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">join</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">join</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">remove_cards</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> tab </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> TABS</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">del</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;example_</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">tab</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;a&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;tabs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Initialize once</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;#</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">t</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">upper</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> t </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> TABS</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;a&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;tabs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Initialize once</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;#</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">t</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">upper</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> t </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> TABS</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> remove_cards</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> display_tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/tab-delete.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/tab-link"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Tab / Links</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/breadcrumbs"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Breadcrumbs »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/58b13b12.5e0eeb21.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> remove_cards</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> display_tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/tab-delete.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/tab-link"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Tab / Links</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/breadcrumbs"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Breadcrumbs »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/58b13b12.2dd6b897.js"></script>
 </body>
 </html>
\ 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 8ec9e336db..212c74551a 100644
--- a/docs/docs/examples/tab-link/index.html
+++ b/docs/docs/examples/tab-link/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Tab / Links | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Tab / Links | H2O Wave"><meta data-react-helmet="true" name="description" content="Use tab cards to display tabs on a page."><meta data-react-helmet="true" property="og:description" content="Use tab cards to display tabs on a page."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/tab-link"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/tab-link"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/bdc330a7.d1eb828e.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/bdc330a7.2904007d.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Tab / Links</h1></header><div class="markdown"><p>Use tab cards to display tabs on a page.
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Tab / Links</h1></header><div class="markdown"><p>Use tab cards to display tabs on a page.
 This examples render tabs styled as links.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;tabs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#about&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;About&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    link</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/tab-link.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/tab"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Tab</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/tab-delete"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Tabs / Navigation »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/bdc330a7.d1eb828e.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/bdc330a7.2904007d.js"></script>
 </body>
 </html>
\ 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 5fbd44758d..a27ef38cc0 100644
--- a/docs/docs/examples/tab-routing/index.html
+++ b/docs/docs/examples/tab-routing/index.html
@@ -5,34 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Routing / Tabs | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Routing / Tabs | H2O Wave"><meta data-react-helmet="true" name="description" content="This example demonstrates how you can observe and handle changes to the browser&#x27;s"><meta data-react-helmet="true" property="og:description" content="This example demonstrates how you can observe and handle changes to the browser&#x27;s"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/tab-routing"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/tab-routing"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/36db7894.b418751e.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/36db7894.0f123971.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Routing / Tabs</h1></header><div class="markdown"><p>This example demonstrates how you can observe and handle changes to the browser&#x27;s
-<a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash" target="_blank" rel="noopener noreferrer">location hash</a></p><p>The location hash can be accessed using <code>q.args[&#x27;#&#x27;]</code>.</p><div class="cover" style="background-image:url(data:image/png;base64,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M1GbN21SYGB5J76uqPlUTf34n/9cd7ybNkXo8cefcELoigYNG+r333/X8ePHU3fjaZBZ17wStFeULFVSZ86ckZT4kHxoaDU99NBDOnHihLZu3arFixcpKioq2bsnS5a6+m+b67775HK5VOjBQs42l8ul3Pffr6ioKGdb4hIkz4ABANLP+AzYFTlz5lSdOnVVp05dxcbGaszoUerTp7e++nq58uTJo7Nnz6pAwYLJXlfwbwV19uxZr22WrBSvkdL2EgEBevTRR7V61So98cQTWr1qpUJCqii/n1+qx14iIECFChXS5k2b5PF4FB0drfIVKig4OERbtmzR802bauvWrerdu48kOeNt26Z1smffPB6PoqLOJruGlBirSZ09e1abNkWoYoXyqR7rldcVTOnfsuDfnP1XZowySmZd0+32/pH1cblkezzO9/Pnz9OsmTN1+vRpFS5cWH//+9+VO3fuZB9xcr2fmWvZuvo6liABABnFaIB5PB7t3btXhQsXVp48eZztuXLlUtdub+irr77Svn37VKlSJeXLl0+RkaeSnSMyMlJ58+ZN1zieadBAn82Zo46dOmn9+vUaMnTYzV90jaqhodq0KUK2bD355JPKkSOHgkOCtWDBfP380086d+6cQqokfqTClXt98823FBgYmOxc+fLnT9U18+TNo8KFC+u9995P01jz5cunvXuSPyN2OjJSkpx/T5flHTOSdCnJc3qZcc2MtGXLFo0dM0ZvvvmWGjZq5LybtmXLFhly/rp16ypbkhlZAABuldH1FMuy1KVLZ02elDwgfvwx8Z18V5bXKgcFac3q1V4P6sfHx2vlihUKCg5O1zjqPV1PkZGRmjx5ktxut6pVq5bmc4SGVtOOHTv0/fffO+9c/Mc/ysrj8WjGjBl6/PEnlP9yWOXPn18lAgK0b/8+lQgIcL4eKlxYBw4e9FpmvZFKlSrr1KlTypkrl9d5oqKjdeEGoRRUOUi7du1ylkyv+PKrL1WkSBEVLlxYUmIU/fbbb17HbNu+Ldn5LMtSfHz8Dcea2mtmpKNH/59y5sypZi+84MRXdHS0fj9yJEPOX6duXdWsWTNDzgUAuLcZnQGzLEsdXuug8ePH6cyZs6peo4bcbrd2/fKLli5donr166to0aKSpPbt2mvVypXq0vl1vfRSK1kul+bPm6vTp0/rtdc6pGsc+f38FBwc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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Routing / Tabs</h1></header><div class="markdown"><p>This example demonstrates how you can observe and handle changes to the browser&#x27;s
+<a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash" target="_blank" rel="noopener noreferrer">location hash</a></p><p>The location hash can be accessed using <code>q.args[&#x27;#&#x27;]</code>.</p><div class="cover" style="background-image:url(data:image/png;base64,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M1GbN21SYGB5J76uqPlUTf34n/9cd7ybNkXo8cefcELoigYNG+r333/X8ePHU3fjaZBZ17wStFeULFVSZ86ckZT4kHxoaDU99NBDOnHihLZu3arFixcpKioq2bsnS5a6+m+b67775HK5VOjBQs42l8ul3Pffr6ioKGdb4hIkz4ABANLP+AzYFTlz5lSdOnVVp05dxcbGaszoUerTp7e++nq58uTJo7Nnz6pAwYLJXlfwbwV19uxZr22WrBSvkdL2EgEBevTRR7V61So98cQTWr1qpUJCqii/n1+qx14iIECFChXS5k2b5PF4FB0drfIVKig4OERbtmzR802bauvWrerdu48kOeNt26Z1smffPB6PoqLOJruGlBirSZ09e1abNkWoYoXyqR7rldcVTOnfsuDfnP1XZowySmZd0+32/pH1cblkezzO9/Pnz9OsmTN1+vRpFS5cWH//+9+VO3fuZB9xcr2fmWvZuvo6liABABnFaIB5PB7t3btXhQsXVp48eZztuXLlUtdub+irr77Svn37VKlSJeXLl0+RkaeSnSMyMlJ58+ZN1zieadBAn82Zo46dOmn9+vUaMnTYzV90jaqhodq0KUK2bD355JPKkSOHgkOCtWDBfP380086d+6cQqokfqTClXt98823FBgYmOxc+fLnT9U18+TNo8KFC+u9995P01jz5cunvXuSPyN2OjJSkpx/T5flHTOSdCnJc3qZcc2MtGXLFo0dM0ZvvvmWGjZq5LybtmXLFhly/rp16ypbkhlZAABuldH1FMuy1KVLZ02elDwgfvwx8Z18V5bXKgcFac3q1V4P6sfHx2vlihUKCg5O1zjqPV1PkZGRmjx5ktxut6pVq5bmc4SGVtOOHTv0/fffO+9c/Mc/ysrj8WjGjBl6/PEnlP9yWOXPn18lAgK0b/8+lQgIcL4eKlxYBw4e9FpmvZFKlSrr1KlTypkrl9d5oqKjdeEGoRRUOUi7du1ylkyv+PKrL1WkSBEVLlxYUmIU/fbbb17HbNu+Ldn5LMtSfHz8Dcea2mtmpKNH/59y5sypZi+84MRXdHS0fj9yJEPOX6duXdWsWTNDzgUAuLcZnQGzLEsdXuug8ePH6cyZs6peo4bcbrd2/fKLli5donr166to0aKSpPbt2mvVypXq0vl1vfRSK1kul+bPm6vTp0/rtdc6pGsc+f38FBwc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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        blurb </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;blurb&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu/spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Sorry, we&#x27;re out of spam!&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu/ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Sorry, we&#x27;re out of ham!&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu/eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Sorry, we&#x27;re out of eggs!&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;about&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Everything here is gluten-free!&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;nav&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#about&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;About&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;blurb&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 2 4 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Store&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Welcome to our store!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/tab-routing.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/toolbar-routing"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Routing / Toolbar</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/card-menu"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Context Menu »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/36db7894.b418751e.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        blurb </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;blurb&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu/spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Sorry, we&#x27;re out of spam!&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu/ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Sorry, we&#x27;re out of ham!&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu/eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Sorry, we&#x27;re out of eggs!&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;about&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Everything here is gluten-free!&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;nav&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#about&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;About&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;blurb&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 2 4 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Store&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Welcome to our store!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/tab-routing.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/toolbar-routing"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Routing / Toolbar</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/card-menu"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Context Menu »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/36db7894.0f123971.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/tab/index.html b/docs/docs/examples/tab/index.html
index 1c4c9165c2..4088926b20 100644
--- a/docs/docs/examples/tab/index.html
+++ b/docs/docs/examples/tab/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Tab | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Tab | H2O Wave"><meta data-react-helmet="true" name="description" content="Use tab cards to display tabs on a page."><meta data-react-helmet="true" property="og:description" content="Use tab cards to display tabs on a page."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/tab"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/tab"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/661410ac.547505c1.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/661410ac.d9824032.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Tab</h1></header><div class="markdown"><p>Use tab cards to display tabs on a page.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Tab</h1></header><div class="markdown"><p>Use tab cards to display tabs on a page.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;tabs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#about&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;About&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/tab.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/toolbar"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Toolbar</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/tab-link"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Tab / Links »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/661410ac.547505c1.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/661410ac.d9824032.js"></script>
 </body>
 </html>
\ 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 2766126abb..55f77d25a7 100644
--- a/docs/docs/examples/table-download/index.html
+++ b/docs/docs/examples/table-download/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Table / Download | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Table / Download | H2O Wave"><meta data-react-helmet="true" name="description" content="Allow downloading a table&#x27;s data as CSV file."><meta data-react-helmet="true" property="og:description" content="Allow downloading a table&#x27;s data as CSV file."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/table-download"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/table-download"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/88c2f924.d842741f.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/88c2f924.37061093.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Table / Download</h1></header><div class="markdown"><p>Allow downloading a table&#x27;s data as CSV file.</p><div class="cover" style="background-image:url(data:image/png;base64,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z/g6bN0OfQvwvfxU+7Ut7UIBJSItlxHA9+KTTkit2UBkwlexl69u82btD4qJTLwAe/NWyMvF/9Y86KyVy080CigRaZ2cLHxv/A3j29NgWynRqd/AuvU/4XObEiaL/cjTRC+YAQeqMAYPxL/4NejXu03aEnfpHpSIJI019ymsm+9wNjUc2A/zumswZ10OgfRWv7f91Dysh56M9dCMa2bie/DuVr+veJcCSkSSyl65huiMH8COQ9uzZ2ZgXv4tjNmzMIYWJvhe67CffxHruZehrNw52K83vrtuw/iXC5NcuXiNAkpE2oT1349g/fl/YFvp4YNdT8IYWohxylAYMghj+GCMMSOgU6bT69q3H3tpCdaiZdgvv3k45A5da/7bjzBnz2r/H0ZcoYASkTZlz38F68HHsRd92KLrjfOmYn7jAoxvX5KUoULpOBRQItJu7Hfew/6gGHvxMuwt2476gK8x8mSMcSMxzp6McfH5CqUvMQWUiIh4kqaZi4iIJymgRETEkxRQIiLiSQooERHxJAWUiIh4kgJKREQ8SQElIiKepIASERFPUkCJiIgnKaBERMSTFFAiIuJJCigREfEkBZSIiHiSAkpERDxJASUiIp6kgBIREU9SQIlIu7vjjju444473C5DPE4BJSIinqSAEpEOa+nSpYwbOyb2a+oZU/jed7/L+++/72pdt/zsZh566C9t2sbECePZsGFD3K9fu3YtRZMntWFFyaeAEpEOLSUlhVdefY1XXn2Nhx5+mKKiIm79xc95+umn3C6tQ5s/fz6zZl3jag1+V1sXEWklwzDo2bMnAD179mTo0GEMGTqEm268kbPOOptevXq5XKG0lHpQInLCmThxEkOGDOWdt9+OHVu7di2zZl3DpIkT+NrFF/HsM8/Ezt1++79z1113xr5/7733GDd2DOvXr48d+9H1s5n78MMAnH3Wmbz66qt859uXM3HCeC6fOYNNGzces57jtQ1QVlbGL37+c84+60ymnjGFX912GwcPHoydLy8v50fXz2bypIlcfNGFlCxf3uz/g2XLPuTyy2cyccJ4rrn6KioqKuJu849//AN33flbVq9axbixY3jxhRfiqjPZFFAickIaPXo0H2/5GICysl1cd+0PmVI0hefnz+cXt/6Sxx//n1hQFBUVsbS4OHbth0uX4vf7WfbhhwA0NDSwYsUKJhcVxV7z9FNP8qt/v52333mXwsGDufXWXxy1jubatm2bn9x0EwCPP/EkTz71NDt3lvLgnx8AIBwOc921PyQ3N49nnnmWO+/6HQ899Bcikcgxf/bt27fz4x/9mAu+egHz//f/uOLKK/nv/5oTO99cmzfd9BN+evPNDBs2jCXFS/n6N77R7DVtQQElIm2urKyMhoaGY55vaGigrKwsqW1mZWVRU10NwLzn5nHqqadxzaxZ9OpVwKRJk7jppp/wxBOPY9s2EydOYvfu3ezevRuA4qXFfOeKK1i61AmtVatWkpGZybBhw2LvP2PGTIYMGUJWVhY//OG1bN++94pyFgAABIRJREFUnQMHDnyhjubaNgyDRx97jP/4zW/o06cPffv25aKLLmb16tUALFq0kNraWm6/4w769uvHyJEjuW72bCzLOubP/vzz85gypYgrrrySXr16cfbZ5/C1r389dr65Nn0+H6mpaaSmpZGamoppms1e0xZ0D0pE2tzvf/97SktLef7550lJSWlyLhKJMGPGDLp3784DDyTvX+PV1dVk5+QAsHnzJk4/fXyT86NGj6ayspL9+/bRuUsXRo4cxdLiYiZNnkzVgQNceeVVXHThBYTDYYqLi5k0aRKGYcSu7927d+y/cw61U1dXR25ubpN24mnbNAzeeON11q9bx85du9iwfj1du3YFYOuWrQwdOhS///DH9dChwzDNY/cvtm7ZysRJE5scGz785CbfH6/NY2nJNa2hHpSItLl7770X0zSZPn16k6GpSCTC9OnTiUaj3HfffUltc9XqVQwZPAQA26ZJuBxNUVERxcVLWLq0mPHjx5OTk8PAgYNYtWoVxUuKKTpieC8RzbVdV1vLd674Dm+8/jqFg4cw65pZzJ59fZPXRKLRz72njW3bx203Gml6jXXEe8TTZkvqTDYFlIi0Ob/fz3PPPYdlWcyYMYNIJBLrOUUikaP2rFpjwYIP+Hjzx5z3la8AMGTIEJZ/bmLB8mXLyM/PJ69zZwAmFxXx4bJlLFm8hPETJgAwYcIE3n77LbZu3cKECU17JPFqru2PPvqIPRUV3P/An5k2bRqnnnZak6HCQYMGsfGjj6irrY0d27B+/XEDalDhIEpWlDQ5tn7D4QkfzbUJYBg46ZrANcmmgBKRdpGSksK8efMIh8PMmTOHOXPmEA6HWx1Otm3H7h9t2LCBuQ8/zL/dcgs33nQj3bt3B+Cy6ZexatVKHn7oIcrKyli8eDH3/ulerr76mljvprCwkEB6Ou+++04sjCZMnMBLL77IKaeMICsrq0X1Ndd2Qe8CwuEwr7/2GuXl5bz77rvMm/dc7PpJkyeTm5vL7bffzo7t21m9ejUPPvggqampx2zz0mmXsqKkhEcffYSysjLeffdd3nrrrdj55toEOOmkfLZt20ZJSQk1NTVxXZNsCigRaTepqanMnz+fqVOnMnXqVObPn3/cD9p4NDQ08LWLL+JrF1/E7OuupaSkhLvv/gPTp8+IvaZXrwL+8tBDFBcv4dJpl3DXnb/l+//6fWbMnNnkvSZPLqJv375069YNgJEjR5EeCLR4eC+etrt1684f/ngPc+c+zKXTLuHll1/iiiuujF2fmprK/Q/8mbpgHTNnzuBXt93G7OtnEwgEjtlm3379uG/Of/HuO+8w7ZJv8bdnn+WWn90SO99cmwBTpkzhK+efz4033sBbb74Z1zXJZtjNDWSKiCRZKBTCMIxWh5Oc2BRQIiLiSRriE5E2d8cdd2AYxnF/afsN+Tz1oERExJPUgxIREU9SQImIiCcpoERExJMUUCIi4kkKKBER8SQFlIiIeJICSkREPEkBJSIinqSAEhERT1JAiYiIJymgRETEkxRQIiLiSQooERHxpP8HRD0aACVCyDwAAAAASUVORK5CYII=)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Table / Download</h1></header><div class="markdown"><p>Allow downloading a table&#x27;s data as CSV file.</p><div class="cover" style="background-image:url(data:image/png;base64,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z/g6bN0OfQvwvfxU+7Ut7UIBJSItlxHA9+KTTkit2UBkwlexl69u82btD4qJTLwAe/NWyMvF/9Y86KyVy080CigRaZ2cLHxv/A3j29NgWynRqd/AuvU/4XObEiaL/cjTRC+YAQeqMAYPxL/4NejXu03aEnfpHpSIJI019ymsm+9wNjUc2A/zumswZ10OgfRWv7f91Dysh56M9dCMa2bie/DuVr+veJcCSkSSyl65huiMH8COQ9uzZ2ZgXv4tjNmzMIYWJvhe67CffxHruZehrNw52K83vrtuw/iXC5NcuXiNAkpE2oT1349g/fl/YFvp4YNdT8IYWohxylAYMghj+GCMMSOgU6bT69q3H3tpCdaiZdgvv3k45A5da/7bjzBnz2r/H0ZcoYASkTZlz38F68HHsRd92KLrjfOmYn7jAoxvX5KUoULpOBRQItJu7Hfew/6gGHvxMuwt2476gK8x8mSMcSMxzp6McfH5CqUvMQWUiIh4kqaZi4iIJymgRETEkxRQIiLiSQooERHxJAWUiIh4kgJKREQ8SQElIiKepIASERFPUkCJiIgnKaBERMSTFFAiIuJJCigREfEkBZSIiHiSAkpERDxJASUiIp6kgBIREU9SQIlIu7vjjju444473C5DPE4BJSIinqSAEpEOa+nSpYwbOyb2a+oZU/jed7/L+++/72pdt/zsZh566C9t2sbECePZsGFD3K9fu3YtRZMntWFFyaeAEpEOLSUlhVdefY1XXn2Nhx5+mKKiIm79xc95+umn3C6tQ5s/fz6zZl3jag1+V1sXEWklwzDo2bMnAD179mTo0GEMGTqEm268kbPOOptevXq5XKG0lHpQInLCmThxEkOGDOWdt9+OHVu7di2zZl3DpIkT+NrFF/HsM8/Ezt1++79z1113xr5/7733GDd2DOvXr48d+9H1s5n78MMAnH3Wmbz66qt859uXM3HCeC6fOYNNGzces57jtQ1QVlbGL37+c84+60ymnjGFX912GwcPHoydLy8v50fXz2bypIlcfNGFlCxf3uz/g2XLPuTyy2cyccJ4rrn6KioqKuJu849//AN33flbVq9axbixY3jxhRfiqjPZFFAickIaPXo0H2/5GICysl1cd+0PmVI0hefnz+cXt/6Sxx//n1hQFBUVsbS4OHbth0uX4vf7WfbhhwA0NDSwYsUKJhcVxV7z9FNP8qt/v52333mXwsGDufXWXxy1jubatm2bn9x0EwCPP/EkTz71NDt3lvLgnx8AIBwOc921PyQ3N49nnnmWO+/6HQ899Bcikcgxf/bt27fz4x/9mAu+egHz//f/uOLKK/nv/5oTO99cmzfd9BN+evPNDBs2jCXFS/n6N77R7DVtQQElIm2urKyMhoaGY55vaGigrKwsqW1mZWVRU10NwLzn5nHqqadxzaxZ9OpVwKRJk7jppp/wxBOPY9s2EydOYvfu3ezevRuA4qXFfOeKK1i61AmtVatWkpGZybBhw2LvP2PGTIYMGUJWVhY//OG1bN++94pyFgAABIRJREFUnQMHDnyhjubaNgyDRx97jP/4zW/o06cPffv25aKLLmb16tUALFq0kNraWm6/4w769uvHyJEjuW72bCzLOubP/vzz85gypYgrrrySXr16cfbZ5/C1r389dr65Nn0+H6mpaaSmpZGamoppms1e0xZ0D0pE2tzvf/97SktLef7550lJSWlyLhKJMGPGDLp3784DDyTvX+PV1dVk5+QAsHnzJk4/fXyT86NGj6ayspL9+/bRuUsXRo4cxdLiYiZNnkzVgQNceeVVXHThBYTDYYqLi5k0aRKGYcSu7927d+y/cw61U1dXR25ubpN24mnbNAzeeON11q9bx85du9iwfj1du3YFYOuWrQwdOhS///DH9dChwzDNY/cvtm7ZysRJE5scGz785CbfH6/NY2nJNa2hHpSItLl7770X0zSZPn16k6GpSCTC9OnTiUaj3HfffUltc9XqVQwZPAQA26ZJuBxNUVERxcVLWLq0mPHjx5OTk8PAgYNYtWoVxUuKKTpieC8RzbVdV1vLd674Dm+8/jqFg4cw65pZzJ59fZPXRKLRz72njW3bx203Gml6jXXEe8TTZkvqTDYFlIi0Ob/fz3PPPYdlWcyYMYNIJBLrOUUikaP2rFpjwYIP+Hjzx5z3la8AMGTIEJZ/bmLB8mXLyM/PJ69zZwAmFxXx4bJlLFm8hPETJgAwYcIE3n77LbZu3cKECU17JPFqru2PPvqIPRUV3P/An5k2bRqnnnZak6HCQYMGsfGjj6irrY0d27B+/XEDalDhIEpWlDQ5tn7D4QkfzbUJYBg46ZrANcmmgBKRdpGSksK8efMIh8PMmTOHOXPmEA6HWx1Otm3H7h9t2LCBuQ8/zL/dcgs33nQj3bt3B+Cy6ZexatVKHn7oIcrKyli8eDH3/ulerr76mljvprCwkEB6Ou+++04sjCZMnMBLL77IKaeMICsrq0X1Ndd2Qe8CwuEwr7/2GuXl5bz77rvMm/dc7PpJkyeTm5vL7bffzo7t21m9ejUPPvggqampx2zz0mmXsqKkhEcffYSysjLeffdd3nrrrdj55toEOOmkfLZt20ZJSQk1NTVxXZNsCigRaTepqanMnz+fqVOnMnXqVObPn3/cD9p4NDQ08LWLL+JrF1/E7OuupaSkhLvv/gPTp8+IvaZXrwL+8tBDFBcv4dJpl3DXnb/l+//6fWbMnNnkvSZPLqJv375069YNgJEjR5EeCLR4eC+etrt1684f/ngPc+c+zKXTLuHll1/iiiuujF2fmprK/Q/8mbpgHTNnzuBXt93G7OtnEwgEjtlm3379uG/Of/HuO+8w7ZJv8bdnn+WWn90SO99cmwBTpkzhK+efz4033sBbb74Z1zXJZtjNDWSKiCRZKBTCMIxWh5Oc2BRQIiLiSRriE5E2d8cdd2AYxnF/afsN+Tz1oERExJPUgxIREU9SQImIiCcpoERExJMUUCIi4kkKKBER8SQFlIiIeJICSkREPEkBJSIinqSAEhERT1JAiYiIJymgRETEkxRQIiLiSQooERHxpP8HRD0aACVCyDwAAAAASUVORK5CYII=)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">_id </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -27,18 +27,16 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create some issues</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">issues </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    Issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sentence</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        status</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Closed&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> i </span><span class="token operator" style="color:rgb(137, 221, 255)">%</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Open&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        progress</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;BoxCheckmarkSolid&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0.5</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;BoxMultiplySolid&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        notifications</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Off&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0.5</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;On&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create columns for our issue table.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">columns </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Issue&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;status&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Status&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;notifications&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Notifications&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;done&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Done&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cell_type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">icon_table_cell_type</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;views&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Views&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;progress&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Progress&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cell_type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress_table_cell_type</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 11&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;issues&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            columns</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">columns</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                cells</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">status</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">notifications</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">icon</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">views</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                issue </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            downloadable</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/table-download.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/table-filter-backend"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Table / Filter / Backend</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/table-groupby"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Table / Group by »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/88c2f924.d842741f.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 11&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;issues&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            columns</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">columns</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                cells</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">status</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">notifications</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">icon</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">views</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                issue </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            downloadable</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/table-download.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/table-filter-backend"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Table / Filter / Backend</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/table-groupby"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Table / Group by »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/88c2f924.37061093.js"></script>
 </body>
 </html>
\ 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 5346680686..8ef818fd42 100644
--- a/docs/docs/examples/table-filter-backend/index.html
+++ b/docs/docs/examples/table-filter-backend/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Table / Filter / Backend | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Table / Filter / Backend | H2O Wave"><meta data-react-helmet="true" name="description" content="Filter table using Python"><meta data-react-helmet="true" property="og:description" content="Filter table using Python"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/table-filter-backend"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/table-filter-backend"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/887b127f.abe5016d.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/887b127f.5b9fbd78.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Table / Filter / Backend</h1></header><div class="markdown"><p>Filter table using Python</p><div class="cover" style="background-image:url(/wave/assets/images/table-filter-backend-e69a57efeee01d99d32a542a71466995.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> pandas </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> pd</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Table / Filter / Backend</h1></header><div class="markdown"><p>Filter table using Python</p><div class="cover" style="background-image:url(/wave/assets/images/table-filter-backend-e69a57efeee01d99d32a542a71466995.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> pandas </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> pd</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">N </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># number of rows</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Make a synthetic data frame</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">addresses </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> pd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">DataFrame</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ID</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">i </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">N</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    Name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">name</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">N</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    Language</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">language_name</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">N</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    Job</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">job</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">N</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    Address</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">address</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">N</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    City</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">city</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">N</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -28,19 +28,17 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">search_df</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">df</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> pd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">DataFrame</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> term</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    str_cols </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> df</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">select_dtypes</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">include</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token builtin" style="color:rgb(130, 170, 255)">object</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> df</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">str_cols</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">apply</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token keyword" style="font-style:italic">lambda</span><span class="token plain"> column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">contains</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">term</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> case</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">False</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> na</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">False</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">any</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">axis</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 11&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;search&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Search&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> placeholder</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Enter a keyword...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> trigger</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;issues&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                columns</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">name</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">name</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> name </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> column_names</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">df_to_rows</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">addresses</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        search_box </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        table </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        term</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">search</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        term </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> term</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">strip</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> term </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        search_box</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">value </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> term</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">rows </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> df_to_rows</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">search_df</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">addresses</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> term</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">len</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">term</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> addresses</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/table-filter-backend.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/table-filter"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Table / Filter</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/table-download"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Table / Download »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/887b127f.abe5016d.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 11&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;search&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Search&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> placeholder</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Enter a keyword...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> trigger</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;issues&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                columns</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">name</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">name</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> name </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> column_names</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">df_to_rows</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">addresses</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        search_box </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        table </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        term</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">search</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        term </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> term</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">strip</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> term </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        search_box</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">value </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> term</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">rows </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> df_to_rows</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">search_df</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">addresses</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> term</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">len</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">term</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> addresses</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/table-filter-backend.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/table-filter"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Table / Filter</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/table-download"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Table / Download »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/887b127f.5b9fbd78.js"></script>
 </body>
 </html>
\ 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 853aa4b5a1..f187a22211 100644
--- a/docs/docs/examples/table-filter/index.html
+++ b/docs/docs/examples/table-filter/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Table / Filter | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Table / Filter | H2O Wave"><meta data-react-helmet="true" name="description" content="Enable filtering values for specific columns."><meta data-react-helmet="true" property="og:description" content="Enable filtering values for specific columns."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/table-filter"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/table-filter"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/600ae505.d2fbb0a2.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/600ae505.52d994e5.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Table / Filter</h1></header><div class="markdown"><p>Enable filtering values for specific columns.</p><div class="cover" style="background-image:url(/wave/assets/images/table-filter-ce33da2e8b6fa9d9965683c9017e8662.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Table / Filter</h1></header><div class="markdown"><p>Enable filtering values for specific columns.</p><div class="cover" style="background-image:url(/wave/assets/images/table-filter-ce33da2e8b6fa9d9965683c9017e8662.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">_id </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -27,18 +27,16 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create some issues</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">issues </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    Issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sentence</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        status</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Closed&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> i </span><span class="token operator" style="color:rgb(137, 221, 255)">%</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Open&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        progress</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;BoxCheckmarkSolid&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0.5</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;BoxMultiplySolid&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        notifications</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Off&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0.5</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;On&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create columns for our issue table.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">columns </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Issue&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;status&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Status&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> filterable</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;notifications&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Notifications&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> filterable</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;done&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Done&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cell_type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">icon_table_cell_type</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;views&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Views&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;progress&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Progress&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cell_type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress_table_cell_type</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 11&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;issues&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            columns</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">columns</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                cells</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">status</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">notifications</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">icon</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">views</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                issue </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/table-filter.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/table-search"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Table / Search</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/table-filter-backend"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Table / Filter / Backend »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/600ae505.d2fbb0a2.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 11&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;issues&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            columns</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">columns</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                cells</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">status</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">notifications</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">icon</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">views</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                issue </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/table-filter.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/table-search"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Table / Search</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/table-filter-backend"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Table / Filter / Backend »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/600ae505.52d994e5.js"></script>
 </body>
 </html>
\ 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 b368815a03..cfe86283a2 100644
--- a/docs/docs/examples/table-groupby/index.html
+++ b/docs/docs/examples/table-groupby/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Table / Group by | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Table / Group by | H2O Wave"><meta data-react-helmet="true" name="description" content="Allow grouping a table by column values."><meta data-react-helmet="true" property="og:description" content="Allow grouping a table by column values."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/table-groupby"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/table-groupby"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/6eb0e506.5f6ca2bf.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/6eb0e506.abebf02f.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Table / Group by</h1></header><div class="markdown"><p>Allow grouping a table by column values.</p><div class="cover" style="background-image:url(/wave/assets/images/table-groupby-8a15ae0b2ea905a6961c5783aebe43c5.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Table / Group by</h1></header><div class="markdown"><p>Allow grouping a table by column values.</p><div class="cover" style="background-image:url(/wave/assets/images/table-groupby-8a15ae0b2ea905a6961c5783aebe43c5.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">_id </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -27,18 +27,16 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create some issues</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">issues </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    Issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sentence</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        status</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Closed&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> i </span><span class="token operator" style="color:rgb(137, 221, 255)">%</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Open&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        progress</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;BoxCheckmarkSolid&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0.5</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;BoxMultiplySolid&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        notifications</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Off&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0.5</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;On&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create columns for our issue table.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">columns </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Issue&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;status&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Status&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;notifications&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Notifications&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;done&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Done&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cell_type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">icon_table_cell_type</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;views&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Views&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;progress&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Progress&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cell_type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress_table_cell_type</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 11&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;issues&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            columns</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">columns</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                cells</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">status</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">notifications</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">icon</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">views</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                issue </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            groupable</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/table-groupby.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/table-download"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Table / Download</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/table-select"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Table / Preselection »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/6eb0e506.5f6ca2bf.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 11&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;issues&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            columns</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">columns</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                cells</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">status</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">notifications</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">icon</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">views</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                issue </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            groupable</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/table-groupby.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/table-download"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Table / Download</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/table-select"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Table / Preselection »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/6eb0e506.abebf02f.js"></script>
 </body>
 </html>
\ 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 e8ab9f2082..6d4eca1534 100644
--- a/docs/docs/examples/table-markdown/index.html
+++ b/docs/docs/examples/table-markdown/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Table / Markdown | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Table / Markdown | H2O Wave"><meta data-react-helmet="true" name="description" content="Display a table using markdown."><meta data-react-helmet="true" property="og:description" content="Display a table using markdown."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/table-markdown"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/table-markdown"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/0f2a58c8.d86c4919.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/0f2a58c8.a9787338.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Table / Markdown</h1></header><div class="markdown"><p>Display a table using markdown.</p><div class="cover" style="background-image:url(/wave/assets/images/table-markdown-fff816fa17022f80817f83239970db97.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Table / Markdown</h1></header><div class="markdown"><p>Display a table using markdown.</p><div class="cover" style="background-image:url(/wave/assets/images/table-markdown-fff816fa17022f80817f83239970db97.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">air_passengers_fields </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Year&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Jan&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Feb&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Mar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Apr&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;May&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Jun&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">air_passengers_rows </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1949&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;112&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;118&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;132&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;129&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;121&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;135&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1950&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;115&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;126&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;141&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;135&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;125&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;149&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1951&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;145&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;150&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;178&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;163&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;172&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;178&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1952&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;171&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;180&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;193&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;181&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;183&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;218&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1953&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;196&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;196&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;236&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;235&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;229&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;243&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1954&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;204&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;188&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;235&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;227&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;234&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;264&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1955&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;242&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;233&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;267&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;269&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;270&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;315&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1956&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;284&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;277&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;317&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;313&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;318&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;374&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1957&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;315&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;301&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;356&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;348&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;355&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;422&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1958&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;340&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;318&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;362&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;348&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;363&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;435&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1959&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;360&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;342&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;406&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;396&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;420&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;472&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1960&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;417&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;391&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;419&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;461&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;472&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;535&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">make_markdown_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">values</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&quot;| </span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation string" style="color:rgb(195, 232, 141)">&#x27; | &#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">join</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string-interpolation interpolation builtin" style="color:rgb(130, 170, 255)">str</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation interpolation">x</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token string-interpolation interpolation"> </span><span class="token string-interpolation interpolation keyword" style="font-style:italic">for</span><span class="token string-interpolation interpolation"> x </span><span class="token string-interpolation interpolation keyword" style="font-style:italic">in</span><span class="token string-interpolation interpolation"> values</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> |&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -27,16 +27,16 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">make_markdown_table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            fields</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">air_passengers_fields</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">air_passengers_rows</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/table-markdown.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/stepper"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Stepper</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/table"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Table »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/0f2a58c8.d86c4919.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/table-markdown.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/stepper"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Stepper</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/table"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Table »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/0f2a58c8.a9787338.js"></script>
 </body>
 </html>
\ 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 4eaa1f12a9..068a38d221 100644
--- a/docs/docs/examples/table-search/index.html
+++ b/docs/docs/examples/table-search/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Table / Search | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Table / Search | H2O Wave"><meta data-react-helmet="true" name="description" content="Enable searching a table across specific columns."><meta data-react-helmet="true" property="og:description" content="Enable searching a table across specific columns."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/table-search"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/table-search"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/c0b6bb44.07febaba.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/c0b6bb44.58e31668.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Table / Search</h1></header><div class="markdown"><p>Enable searching a table across specific columns.</p><div class="cover" style="background-image:url(/wave/assets/images/table-search-f29a132ad20079a67a0fee3143689fa6.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Table / Search</h1></header><div class="markdown"><p>Enable searching a table across specific columns.</p><div class="cover" style="background-image:url(/wave/assets/images/table-search-f29a132ad20079a67a0fee3143689fa6.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">_id </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -27,18 +27,16 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create some issues</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">issues </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    Issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sentence</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        status</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Closed&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> i </span><span class="token operator" style="color:rgb(137, 221, 255)">%</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Open&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        progress</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;BoxCheckmarkSolid&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0.5</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;BoxMultiplySolid&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        notifications</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Off&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0.5</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;On&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create columns for our issue table.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">columns </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Issue&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> searchable</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;status&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Status&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;notifications&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Notifications&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;done&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Done&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cell_type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">icon_table_cell_type</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;views&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Views&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;progress&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Progress&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cell_type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress_table_cell_type</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 11&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;issues&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            columns</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">columns</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                cells</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">status</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">notifications</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">icon</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">views</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                issue </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/table-search.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/table-sort"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Table / Sort</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/table-filter"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Table / Filter »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/c0b6bb44.07febaba.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 11&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;issues&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            columns</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">columns</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                cells</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">status</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">notifications</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">icon</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">views</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                issue </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/table-search.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/table-sort"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Table / Sort</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/table-filter"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Table / Filter »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/c0b6bb44.58e31668.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/table-select/index.html b/docs/docs/examples/table-select/index.html
index 48e7105864..73eab26441 100644
--- a/docs/docs/examples/table-select/index.html
+++ b/docs/docs/examples/table-select/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Table / Preselection | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Table / Preselection | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a table as an advanced multi-select. Specify rownames in &#x27;values&#x27; for preselection."><meta data-react-helmet="true" property="og:description" content="Use a table as an advanced multi-select. Specify rownames in &#x27;values&#x27; for preselection."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/table-select"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/table-select"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/d8aa093c.262becc1.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/d8aa093c.abea6469.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Table / Preselection</h1></header><div class="markdown"><p>Use a table as an advanced multi-select. Specify rownames in &#x27;values&#x27; for preselection.</p><div class="cover" style="background-image:url(/wave/assets/images/table-select-428e4b7f6e76c00956feb8ede847a369.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Table / Preselection</h1></header><div class="markdown"><p>Use a table as an advanced multi-select. Specify rownames in &#x27;values&#x27; for preselection.</p><div class="cover" style="background-image:url(/wave/assets/images/table-select-428e4b7f6e76c00956feb8ede847a369.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">_id </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -27,18 +27,16 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create some issues</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">issues </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">Issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sentence</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create columns for our issue table.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">columns </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Issue&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> min_width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;300px&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;selected=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">issues</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 11&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;issues&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                columns</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">columns</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cells</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> issue </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                values</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;I1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;I2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;I3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/table-select.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/table-groupby"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Table / Group by</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/image"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Image »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/d8aa093c.262becc1.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;selected=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">issues</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 11&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;issues&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                columns</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">columns</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cells</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> issue </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                values</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;I1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;I2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;I3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/table-select.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/table-groupby"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Table / Group by</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/image"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Image »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/d8aa093c.abea6469.js"></script>
 </body>
 </html>
\ 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 bb50a21129..a8f3615c02 100644
--- a/docs/docs/examples/table-sort/index.html
+++ b/docs/docs/examples/table-sort/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Table / Sort | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Table / Sort | H2O Wave"><meta data-react-helmet="true" name="description" content="Allow sorting a table by specific columns."><meta data-react-helmet="true" property="og:description" content="Allow sorting a table by specific columns."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/table-sort"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/table-sort"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/15837ef3.febd3ccc.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/15837ef3.07844001.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Table / Sort</h1></header><div class="markdown"><p>Allow sorting a table by specific columns.</p><div class="cover" style="background-image:url(/wave/assets/images/table-sort-160ae663649156d89ea2cea500cc21b1.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Table / Sort</h1></header><div class="markdown"><p>Allow sorting a table by specific columns.</p><div class="cover" style="background-image:url(/wave/assets/images/table-sort-160ae663649156d89ea2cea500cc21b1.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">_id </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -27,18 +27,16 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create some issues</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">issues </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    Issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sentence</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        status</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Closed&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> i </span><span class="token operator" style="color:rgb(137, 221, 255)">%</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Open&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        progress</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;BoxCheckmarkSolid&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0.5</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;BoxMultiplySolid&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        notifications</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Off&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0.5</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;On&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create columns for our issue table.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">columns </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Issue&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> sortable</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;status&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Status&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;notifications&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Notifications&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;done&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Done&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cell_type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">icon_table_cell_type</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;views&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Views&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> sortable</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;progress&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Progress&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cell_type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress_table_cell_type</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 11&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;issues&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            columns</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">columns</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                cells</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">status</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">notifications</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">icon</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">views</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                issue </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/table-sort.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/table"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Table</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/table-search"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Table / Search »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/15837ef3.febd3ccc.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 11&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;issues&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            columns</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">columns</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                cells</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">status</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">notifications</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">icon</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">views</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                issue </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/table-sort.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/table"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Table</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/table-search"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Table / Search »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/15837ef3.07844001.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/table/index.html b/docs/docs/examples/table/index.html
index 2e2105337c..0f1bc0d6be 100644
--- a/docs/docs/examples/table/index.html
+++ b/docs/docs/examples/table/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Table | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Table | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a table to display tabular data."><meta data-react-helmet="true" property="og:description" content="Use a table to display tabular data."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/table"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/table"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/135cee2a.8e85b4f9.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/135cee2a.4fa48724.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Table</h1></header><div class="markdown"><p>Use a table to display tabular data.</p><div class="cover" style="background-image:url(/wave/assets/images/table-f4d13c60963beb31475a54192f62b47d.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Table</h1></header><div class="markdown"><p>Use a table to display tabular data.</p><div class="cover" style="background-image:url(/wave/assets/images/table-f4d13c60963beb31475a54192f62b47d.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> faker </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Faker</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">fake </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> Faker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">_id </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -27,18 +27,16 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create some issues</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">issues </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    Issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">fake</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sentence</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        status</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Closed&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> i </span><span class="token operator" style="color:rgb(137, 221, 255)">%</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Open&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        progress</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;BoxCheckmarkSolid&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0.5</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;BoxMultiplySolid&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        notifications</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Off&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">&gt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0.5</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;On&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create columns for our issue table.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">columns </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Issue&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> sortable</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> searchable</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> max_width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;300&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;status&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Status&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> filterable</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;notifications&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Notifications&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> filterable</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;done&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Done&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cell_type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">icon_table_cell_type</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;views&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Views&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> sortable</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_column</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;progress&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Progress&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cell_type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress_table_cell_type</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 11&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;issues&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            columns</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">columns</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                cells</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">status</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">notifications</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">icon</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">views</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                issue </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            groupable</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            downloadable</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            resettable</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;800px&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/table.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/table-markdown"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Table / Markdown</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/table-sort"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Table / Sort »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/135cee2a.8e85b4f9.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 -1 11&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;issues&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            columns</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">columns</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">table_row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                cells</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">status</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">notifications</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">icon</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">views</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> issue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">progress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                issue </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> issues</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            groupable</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            downloadable</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            resettable</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;800px&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/table.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/table-markdown"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Table / Markdown</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/table-sort"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Table / Sort »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/135cee2a.4fa48724.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/tabs/index.html b/docs/docs/examples/tabs/index.html
index 63fea7db74..6a3d44855e 100644
--- a/docs/docs/examples/tabs/index.html
+++ b/docs/docs/examples/tabs/index.html
@@ -5,36 +5,34 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Tabs | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Tabs | H2O Wave"><meta data-react-helmet="true" name="description" content="Use tabs within a form to navigate between two or more distinct content categories."><meta data-react-helmet="true" property="og:description" content="Use tabs within a form to navigate between two or more distinct content categories."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/tabs"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/tabs"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/8542acf3.53333c25.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/8542acf3.6c384a58.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Tabs</h1></header><div class="markdown"><p>Use tabs within a form to navigate between two or more distinct content categories.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Tabs</h1></header><div class="markdown"><p>Use tabs within a form to navigate between two or more distinct content categories.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">tabs </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;email&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Mail&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Mail&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;events&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Events&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Calendar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tab</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">menu</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tabs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">menu</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">tabs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            get_tab_content</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">menu</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tabs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;email&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">tabs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            get_tab_content</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;email&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">menu</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tabs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">menu</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">tabs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            get_tab_content</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">menu</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">tabs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;email&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">tabs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            get_tab_content</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;email&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">get_tab_content</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">category</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Return a checklist of dummy items.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">category</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">title</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> </span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">i</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">11</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checklist</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;items&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">item</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">item</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> item </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/tabs.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/swatch-picker"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Swatch Picker</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/separator"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Separator »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/8542acf3.53333c25.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">get_tab_content</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">category</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Return a checklist of dummy items.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">category</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">title</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> </span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">i</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">11</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checklist</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;items&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> choices</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">choice</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">item</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">item</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> item </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/tabs.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/swatch-picker"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Swatch Picker</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/separator"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Separator »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/8542acf3.6c384a58.js"></script>
 </body>
 </html>
\ 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 c67155b259..a2af562eac 100644
--- a/docs/docs/examples/template-data/index.html
+++ b/docs/docs/examples/template-data/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Template / Data | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Template / Data | H2O Wave"><meta data-react-helmet="true" name="description" content="Update a template card&#x27;s data periodically."><meta data-react-helmet="true" property="og:description" content="Update a template card&#x27;s data periodically."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/template-data"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/template-data"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/d4ee2b4f.25e52c39.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/d4ee2b4f.e3cdbd48.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Template / Data</h1></header><div class="markdown"><p>Update a template card&#x27;s data periodically.</p><div class="cover" style="background-image:url(/wave/assets/images/template-data-1b5f5707f248dfd5a606e722345ad2a2.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Template / Data</h1></header><div class="markdown"><p>Update a template card&#x27;s data periodically.</p><div class="cover" style="background-image:url(/wave/assets/images/template-data-1b5f5707f248dfd5a606e722345ad2a2.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">drop</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">menu </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;ol&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">{{#each dishes}}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;li&gt;&lt;strong&gt;{{name}}&lt;/strong&gt; costs {{price}}&lt;/li&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">{{/each}}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;/ol</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">menu_card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;template_example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">template_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Surge-priced Menu&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">menu</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">dishes</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> price</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$2.00&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> price</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$3.45&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> price</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$1.75&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -26,15 +26,15 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">rand_price</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;$</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">random</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">randrange</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation interpolation number" style="color:rgb(247, 140, 108)">0</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token string-interpolation interpolation"> </span><span class="token string-interpolation interpolation number" style="color:rgb(247, 140, 108)">4</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">.</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">random</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">randrange</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation interpolation number" style="color:rgb(247, 140, 108)">10</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token string-interpolation interpolation"> </span><span class="token string-interpolation interpolation number" style="color:rgb(247, 140, 108)">99</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">dishes </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> menu_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">dishes</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">98</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    dishes</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">price </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> rand_price</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    dishes</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">price </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> rand_price</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    dishes</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">price </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> rand_price</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/template-data.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/template"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Template</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/markdown"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Markdown »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/d4ee2b4f.25e52c39.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/d4ee2b4f.e3cdbd48.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/template/index.html b/docs/docs/examples/template/index.html
index 3ba7d1aff1..fa163260c4 100644
--- a/docs/docs/examples/template/index.html
+++ b/docs/docs/examples/template/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Template | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Template | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a template card to render dynamic content using a HTML template."><meta data-react-helmet="true" property="og:description" content="Use a template card to render dynamic content using a HTML template."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/template"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/template"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/2bf08973.2bfcd3dd.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/2bf08973.fc6ef6b5.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Template</h1></header><div class="markdown"><p>Use a template card to render dynamic content using a HTML template.</p><div class="cover" style="background-image:url(/wave/assets/images/template-1b5f5707f248dfd5a606e722345ad2a2.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Template</h1></header><div class="markdown"><p>Use a template card to render dynamic content using a HTML template.</p><div class="cover" style="background-image:url(/wave/assets/images/template-1b5f5707f248dfd5a606e722345ad2a2.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> pack</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">drop</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">menu </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;ol&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">{{#each dishes}}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;li&gt;&lt;strong&gt;{{name}}&lt;/strong&gt; costs {{price}}&lt;/li&gt;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">{{/each}}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&lt;/ol</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">c </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;template_example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">template_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Menu&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">menu</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">pack</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">dishes</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> price</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$2.00&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> price</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$3.45&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> price</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$1.75&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/template.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/frame-path"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Frame / Path</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/template-data"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Template / Data »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/2bf08973.2bfcd3dd.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/2bf08973.fc6ef6b5.js"></script>
 </body>
 </html>
\ 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 e5e6527b98..64ada22e7c 100644
--- a/docs/docs/examples/text-sizes/index.html
+++ b/docs/docs/examples/text-sizes/index.html
@@ -5,32 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Text / Sizes | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Text / Sizes | H2O Wave"><meta data-react-helmet="true" name="description" content="Use text size variants to display formatted text using predefined font sizes."><meta data-react-helmet="true" property="og:description" content="Use text size variants to display formatted text using predefined font sizes."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/text-sizes"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/text-sizes"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/e32c5859.399095c5.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/e32c5859.afb5fae3.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Text / Sizes</h1></header><div class="markdown"><p>Use text size variants to display formatted text using predefined font sizes.</p><div class="cover" style="background-image:url(/wave/assets/images/text-sizes-5d78df884df4f57688aef7d5b7b68349.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Text / Sizes</h1></header><div class="markdown"><p>Use text size variants to display formatted text using predefined font sizes.</p><div class="cover" style="background-image:url(/wave/assets/images/text-sizes-5d78df884df4f57688aef7d5b7b68349.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 -1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">separator</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Separator&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Extra large text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Large text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Normal text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_m</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Medium text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_s</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Small text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Extra small text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Using `ui.text()` with a `size` argument produces similar results:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">separator</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Separator&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Extra large text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;xl&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Large text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;l&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Normal text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Medium text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;m&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Small text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;s&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Extra small text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> size</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;xs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/text-sizes.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/text"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Text</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/label"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Label »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/e32c5859.399095c5.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/e32c5859.afb5fae3.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/text/index.html b/docs/docs/examples/text/index.html
index edac563a84..497f137699 100644
--- a/docs/docs/examples/text/index.html
+++ b/docs/docs/examples/text/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Text | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Text | H2O Wave"><meta data-react-helmet="true" name="description" content="Use markdown in a text component to display formatted content within a form."><meta data-react-helmet="true" property="og:description" content="Use markdown in a text component to display formatted content within a form."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/text"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/text"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/50b74c5f.acabea73.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/50b74c5f.d998e0a5.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Text</h1></header><div class="markdown"><p>Use markdown in a text component to display formatted content within a form.</p><div class="cover" style="background-image:url(/wave/assets/images/text-3c5275bb7d17545e6fd8952074ab9d13.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Text</h1></header><div class="markdown"><p>Use markdown in a text component to display formatted content within a form.</p><div class="cover" style="background-image:url(/wave/assets/images/text-3c5275bb7d17545e6fd8952074ab9d13.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">sample_markdown </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">The **quick** _brown_ fox jumped over the lazy dog.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="display:inline-block;color:rgb(195, 232, 141)">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">Block quote:</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="display:inline-block;color:rgb(195, 232, 141)">
@@ -34,15 +34,15 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">Table:</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="display:inline-block;color:rgb(195, 232, 141)">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">| Column 1 | Column 2 | Column 3 |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">| -------- | -------- | -------- |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">| Item 1   | Item 2   | Item 3   |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">| Item 1   | Item 2   | Item 3   |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">| Item 1   | Item 2   | Item 3   |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 -1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">sample_markdown</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/text.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/form"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/text-sizes"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Text / Sizes »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/50b74c5f.acabea73.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/50b74c5f.d998e0a5.js"></script>
 </body>
 </html>
\ 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 7a03d37286..02d5a0326a 100644
--- a/docs/docs/examples/textbox-trigger/index.html
+++ b/docs/docs/examples/textbox-trigger/index.html
@@ -5,35 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Textbox / Trigger | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Textbox / Trigger | H2O Wave"><meta data-react-helmet="true" name="description" content="To handle live changes to a textbox, enable the trigger attribute."><meta data-react-helmet="true" property="og:description" content="To handle live changes to a textbox, enable the trigger attribute."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/textbox-trigger"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/textbox-trigger"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/35dabcf3.31accd70.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/35dabcf3.e798e443.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Textbox / Trigger</h1></header><div class="markdown"><p>To handle live changes to a textbox, enable the <code>trigger</code> attribute.</p><div class="cover" style="background-image:url(/wave/assets/images/textbox-trigger-3063508395dc193e6087e98ec3caf604.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Textbox / Trigger</h1></header><div class="markdown"><p>To handle live changes to a textbox, enable the <code>trigger</code> attribute.</p><div class="cover" style="background-image:url(/wave/assets/images/textbox-trigger-3063508395dc193e6087e98ec3caf604.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">to_pig_latin</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> text </span><span class="token keyword" style="font-style:italic">is</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">None</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    words </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">lower</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">strip</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">split</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&quot; &quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    text </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> word </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> words</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> word</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;aeiou&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">append</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">word</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">yay&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> letter </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> word</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> letter </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;aeiou&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">append</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">word</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string-interpolation interpolation">word</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">index</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation interpolation">letter</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token string-interpolation interpolation format-spec">]</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">word</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token string-interpolation interpolation">word</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">index</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation interpolation">letter</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">ay&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    </span><span class="token keyword" style="font-style:italic">break</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot; &quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">join</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;English&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> multiline</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> trigger</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">label</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Pig Latin&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">to_pig_latin</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;*Type in some text above to translate to Pig Latin!*&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/textbox-trigger.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/textbox"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Textbox</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/button"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Button »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/35dabcf3.31accd70.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;English&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> multiline</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> trigger</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">label</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Pig Latin&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">to_pig_latin</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;*Type in some text above to translate to Pig Latin!*&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/textbox-trigger.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/textbox"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Textbox</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/button"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Button »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/35dabcf3.e798e443.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/textbox/index.html b/docs/docs/examples/textbox/index.html
index 66e1ed9d1a..991636f190 100644
--- a/docs/docs/examples/textbox/index.html
+++ b/docs/docs/examples/textbox/index.html
@@ -5,33 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Textbox | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Textbox | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a textbox to allow users to provide text inputs."><meta data-react-helmet="true" property="og:description" content="Use a textbox to allow users to provide text inputs."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/textbox"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/textbox"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/7c1cba9e.0a28bb7c.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/7c1cba9e.b72820b2.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Textbox</h1></header><div class="markdown"><p>Use a textbox to allow users to provide text inputs.</p><div class="cover" style="background-image:url(/wave/assets/images/textbox-ad4ead8b116b9f18042ba1302cf471c9.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Textbox</h1></header><div class="markdown"><p>Use a textbox to allow users to provide text inputs.</p><div class="cover" style="background-image:url(/wave/assets/images/textbox-ad4ead8b116b9f18042ba1302cf471c9.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_readonly=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_readonly</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_required=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_required</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_error=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_error</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_mask=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_mask</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_icon=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_icon</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_prefix=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_prefix</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_suffix=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_suffix</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_placeholder=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_placeholder</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_disabled_placeholder=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_disabled_placeholder</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_multiline=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_multiline</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Standard&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;I am disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_readonly&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Read-only&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;I am read-only&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> readonly</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_required&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Required&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> required</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_error&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;With error message&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> error</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;I have an error&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_mask&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;With input mask&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> mask</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;(999) 999 - 9999&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_icon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;With icon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Calendar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_prefix&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;With prefix&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> prefix</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;http://&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_suffix&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;With suffix&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> suffix</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@h2o.ai&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_placeholder&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;With placeholder&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> placeholder</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;I need some input&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_disabled_placeholder&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Disabled with placeholder&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                       placeholder</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;I am disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_multiline&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Multiline textarea&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> multiline</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/textbox.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/message-bar"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Message Bar</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/textbox-trigger"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Textbox / Trigger »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/7c1cba9e.0a28bb7c.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_readonly=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_readonly</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_required=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_required</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_error=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_error</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_mask=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_mask</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_icon=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_icon</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_prefix=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_prefix</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_suffix=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_suffix</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_placeholder=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_placeholder</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_disabled_placeholder=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_disabled_placeholder</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;textbox_multiline=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">textbox_multiline</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Standard&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;I am disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_readonly&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Read-only&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;I am read-only&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> readonly</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_required&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Required&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> required</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_error&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;With error message&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> error</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;I have an error&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_mask&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;With input mask&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> mask</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;(999) 999 - 9999&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_icon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;With icon&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Calendar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_prefix&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;With prefix&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> prefix</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;http://&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_suffix&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;With suffix&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> suffix</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@h2o.ai&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_placeholder&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;With placeholder&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> placeholder</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;I need some input&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_disabled_placeholder&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Disabled with placeholder&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                       placeholder</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;I am disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;textbox_multiline&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Multiline textarea&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> multiline</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/textbox.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/message-bar"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Message Bar</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/textbox-trigger"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Textbox / Trigger »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/7c1cba9e.b72820b2.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/todo/index.html b/docs/docs/examples/todo/index.html
index 26165064f0..e8b17c9f99 100644
--- a/docs/docs/examples/todo/index.html
+++ b/docs/docs/examples/todo/index.html
@@ -5,25 +5,25 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">To-do List App | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="To-do List App | H2O Wave"><meta data-react-helmet="true" name="description" content="A simple multi-user To-do list application."><meta data-react-helmet="true" property="og:description" content="A simple multi-user To-do list application."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/todo"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/todo"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/bbdd3825.8257b386.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/bbdd3825.5e58d881.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">To-do List App</h1></header><div class="markdown"><p>A simple multi-user To-do list application.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> typing </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> List</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">To-do List App</h1></header><div class="markdown"><p>A simple multi-user To-do list application.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> typing </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> List</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">_id </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># A simple class that represents a to-do item.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">class</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">__init__</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">global</span><span class="token plain"> _id</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        _id </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;todo_</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">_id</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">done </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">False</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> text</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">new_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display an input form.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> new_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Add an item.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> add_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Show all items.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">new_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display an input form.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> new_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Add an item.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> add_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Show all items.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Get items for this user.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> List</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">todos</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create a sample list if we don&#x27;t have any.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> todos </span><span class="token keyword" style="font-style:italic">is</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">None</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">todos </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> todos </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do this&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do that&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do something else&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -34,18 +34,16 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">add_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Insert a new item</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">insert</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Untitled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Go back to our list.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">new_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display an input form</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Add To Do&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;What needs to be done?&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> multiline</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buttons</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;add_todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Add&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_todos&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/todo.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/hello-world"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Hello World!</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/wizard"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Wizard »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/bbdd3825.8257b386.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">new_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display an input form</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Add To Do&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;What needs to be done?&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> multiline</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buttons</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;add_todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Add&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_todos&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/todo.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/hello-world"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Hello World!</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/wizard"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Wizard »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/bbdd3825.5e58d881.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/toggle/index.html b/docs/docs/examples/toggle/index.html
index 749eb42bf0..651f40a673 100644
--- a/docs/docs/examples/toggle/index.html
+++ b/docs/docs/examples/toggle/index.html
@@ -5,33 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Form / Toggle | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Form / Toggle | H2O Wave"><meta data-react-helmet="true" name="description" content="Use a toggle to present users with two mutually exclusive options (to turn settings on and off)."><meta data-react-helmet="true" property="og:description" content="Use a toggle to present users with two mutually exclusive options (to turn settings on and off)."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/toggle"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/toggle"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/b9f028e1.d50f1261.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/b9f028e1.76e1b947.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Toggle</h1></header><div class="markdown"><p>Use a toggle to present users with two mutually exclusive options (to turn settings on and off).</p><div class="cover" style="background-image:url(/wave/assets/images/toggle-5e565e1d5a735ee4a481835a4e53ee43.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Form / Toggle</h1></header><div class="markdown"><p>Use a toggle to present users with two mutually exclusive options (to turn settings on and off).</p><div class="cover" style="background-image:url(/wave/assets/images/toggle-5e565e1d5a735ee4a481835a4e53ee43.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;toggle_unchecked=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">toggle_unchecked</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;toggle_checked=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">toggle_checked</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;toggle_unchecked_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">toggle_unchecked_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;toggle_checked_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">toggle_checked_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">toggle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;toggle_unchecked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Not checked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">toggle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;toggle_checked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Checked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">toggle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;toggle_unchecked_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Not checked (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">toggle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;toggle_checked_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Checked (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/toggle.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/combobox"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Combobox</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/spinbox"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Spinbox »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/b9f028e1.d50f1261.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">show_inputs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;toggle_unchecked=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">toggle_unchecked</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;toggle_checked=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">toggle_checked</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;toggle_unchecked_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">toggle_unchecked_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;toggle_checked_disabled=</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">toggle_checked_disabled</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">toggle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;toggle_unchecked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Not checked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">toggle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;toggle_checked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Checked&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">toggle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;toggle_unchecked_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Not checked (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">toggle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;toggle_checked_disabled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Checked (Disabled)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_inputs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Submit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/toggle.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/combobox"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Form / Combobox</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/spinbox"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Form / Spinbox »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/b9f028e1.76e1b947.js"></script>
 </body>
 </html>
\ 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 3d8389cecc..670f61e0c6 100644
--- a/docs/docs/examples/toolbar-routing/index.html
+++ b/docs/docs/examples/toolbar-routing/index.html
@@ -5,34 +5,32 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Routing / Toolbar | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Routing / Toolbar | H2O Wave"><meta data-react-helmet="true" name="description" content="This example demonstrates how you can observe and handle changes to the browser&#x27;s"><meta data-react-helmet="true" property="og:description" content="This example demonstrates how you can observe and handle changes to the browser&#x27;s"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/toolbar-routing"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/toolbar-routing"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/948118d6.5b3a0dc9.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/948118d6.1ba3a36f.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Routing / Toolbar</h1></header><div class="markdown"><p>This example demonstrates how you can observe and handle changes to the browser&#x27;s
-<a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash" target="_blank" rel="noopener noreferrer">location hash</a></p><p>The location hash can be accessed using <code>q.args[&#x27;#&#x27;]</code>.</p><div class="cover" style="background-image:url(/wave/assets/images/toolbar-routing-84cf0d9860b9d575f5703ddf0e001bf7.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Routing / Toolbar</h1></header><div class="markdown"><p>This example demonstrates how you can observe and handle changes to the browser&#x27;s
+<a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash" target="_blank" rel="noopener noreferrer">location hash</a></p><p>The location hash can be accessed using <code>q.args[&#x27;#&#x27;]</code>.</p><div class="cover" style="background-image:url(/wave/assets/images/toolbar-routing-84cf0d9860b9d575f5703ddf0e001bf7.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        blurb </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;blurb&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu/spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Sorry, we&#x27;re out of spam!&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu/ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Sorry, we&#x27;re out of ham!&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu/eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Sorry, we&#x27;re out of eggs!&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;about&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Everything here is gluten-free!&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;nav&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">toolbar_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#about&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;About&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;blurb&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 2 4 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Store&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Welcome to our store!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/toolbar-routing.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/hash-routing"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Routing</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/tab-routing"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Routing / Tabs »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/948118d6.5b3a0dc9.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        blurb </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;blurb&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu/spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Sorry, we&#x27;re out of spam!&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu/ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Sorry, we&#x27;re out of ham!&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;menu/eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Sorry, we&#x27;re out of eggs!&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;about&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            blurb</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Everything here is gluten-free!&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;nav&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">toolbar_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Spam&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Ham&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#menu/eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Eggs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#about&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;About&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;blurb&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 2 4 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Store&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Welcome to our store!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/toolbar-routing.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/hash-routing"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Routing</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/tab-routing"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Routing / Tabs »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/948118d6.1ba3a36f.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/toolbar/index.html b/docs/docs/examples/toolbar/index.html
index eb196686b2..8e5afbd13b 100644
--- a/docs/docs/examples/toolbar/index.html
+++ b/docs/docs/examples/toolbar/index.html
@@ -5,33 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Toolbar | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Toolbar | H2O Wave"><meta data-react-helmet="true" name="description" content="Use toolbars to provide commands that operate on the content of a page."><meta data-react-helmet="true" property="og:description" content="Use toolbars to provide commands that operate on the content of a page."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/toolbar"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/toolbar"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/f60be60c.9007beb7.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/f60be60c.c40d6c3e.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Toolbar</h1></header><div class="markdown"><p>Use toolbars to provide commands that operate on the content of a page.</p><div class="cover" style="background-image:url(/wave/assets/images/toolbar-6cae7b599ebdc78e77db0f536dc3392e.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Toolbar</h1></header><div class="markdown"><p>Use toolbars to provide commands that operate on the content of a page.</p><div class="cover" style="background-image:url(/wave/assets/images/toolbar-6cae7b599ebdc78e77db0f536dc3392e.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;nav&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">toolbar_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;new&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;New&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Add&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;email&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Email Message&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Mail&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;calendar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Calendar Event&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Calendar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;upload&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Upload&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Upload&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;share&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Share&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Share&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;download&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Download&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Download&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        secondary_items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;tile&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Grid View&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Tiles&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;info&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Info&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Info&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        overflow_items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;move&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Move to...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;MoveToFolder&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;copy&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Copy to...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Copy&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;rename&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Rename&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Edit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/toolbar.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/nav"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Nav</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/tab"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Tab »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/f60be60c.9007beb7.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;nav&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">toolbar_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;new&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;New&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Add&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;email&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Email Message&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Mail&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;calendar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Calendar Event&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Calendar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;upload&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Upload&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Upload&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;share&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Share&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Share&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;download&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Download&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Download&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        secondary_items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;tile&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Grid View&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Tiles&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;info&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Info&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Info&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        overflow_items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;move&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Move to...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;MoveToFolder&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;copy&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Copy to...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Copy&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">command</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;rename&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Rename&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> icon</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Edit&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/toolbar.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/nav"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Nav</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/tab"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Tab »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/f60be60c.c40d6c3e.js"></script>
 </body>
 </html>
\ 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 bc66df5f2b..3c6f567e95 100644
--- a/docs/docs/examples/upload-async/index.html
+++ b/docs/docs/examples/upload-async/index.html
@@ -5,36 +5,34 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Uploads / Async | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Uploads / Async | H2O Wave"><meta data-react-helmet="true" name="description" content="Upload files from an interactive app."><meta data-react-helmet="true" property="og:description" content="Upload files from an interactive app."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/upload-async"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/upload-async"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/d145135f.219899e0.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/d145135f.9c24e637.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Uploads / Async</h1></header><div class="markdown"><p>Upload files from an interactive app.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> os</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Uploads / Async</h1></header><div class="markdown"><p>Upload files from an interactive app.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> os</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">write_csv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">filename</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">with</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">open</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">filename</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;w&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">write</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;\n&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">join</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;,&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">join</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> row </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> rows</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">generate_csv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Generate</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        write_csv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;squares.csv&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">row_count</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Upload</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        download_path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">upload</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;squares.csv&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Clean up</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        os</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">remove</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;squares.csv&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display link</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Squares Generated!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;[Download my </span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">row_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> squares!](</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">download_path</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Accept a row count from the user</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Square Generator&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;row_count&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Squares to generate&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> step</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;generate_csv&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Generate&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/upload-async.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/upload"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Uploads</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/upload-ui"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Uploads / UI »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/d145135f.219899e0.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">generate_csv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Generate</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        write_csv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;squares.csv&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">row_count</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Upload</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        download_path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">upload</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;squares.csv&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Clean up</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        os</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">remove</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;squares.csv&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display link</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Squares Generated!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;[Download my </span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">row_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> squares!](</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">download_path</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Accept a row count from the user</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Square Generator&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">slider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;row_count&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Squares to generate&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> step</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;generate_csv&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Generate&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/upload-async.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/upload"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Uploads</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/upload-ui"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Uploads / UI »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/d145135f.9c24e637.js"></script>
 </body>
 </html>
\ 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 e2c68a7d93..1cb3dfe42a 100644
--- a/docs/docs/examples/upload-download/index.html
+++ b/docs/docs/examples/upload-download/index.html
@@ -5,34 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Uploads / Download | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Uploads / Download | H2O Wave"><meta data-react-helmet="true" name="description" content="Accept files from the user and downloads them locally."><meta data-react-helmet="true" property="og:description" content="Accept files from the user and downloads them locally."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/upload-download"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/upload-download"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/c10c720e.4da34ab2.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/c10c720e.0173a8d3.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Uploads / Download</h1></header><div class="markdown"><p>Accept files from the user and downloads them locally.</p><div class="cover" style="background-image:url(/wave/assets/images/upload-download-ce3af4e53ce2d7a546aa933667f7758a.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> os</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> os</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">path</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    links </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user_files</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> links</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Files uploaded!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> link </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> links</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            local_path </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">download</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">link</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">#</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># The file is now available locally; process the file.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># To keep this example simple, we just read the file size.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">#</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            size </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> os</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">getsize</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">local_path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">append</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">link</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">os</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">path</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">basename</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation interpolation">link</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> (</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">size</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> bytes)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> download</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> path</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">link</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Clean up</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            os</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">remove</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">local_path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">append</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> items</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Upload some files&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">file_upload</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;user_files&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Upload&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> multiple</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Uploads / Download</h1></header><div class="markdown"><p>Accept files from the user and downloads them locally.</p><div class="cover" style="background-image:url(/wave/assets/images/upload-download-ce3af4e53ce2d7a546aa933667f7758a.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> os</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> os</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">path</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/upload-download.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/upload-ui"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Uploads / UI</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/meta-title"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Meta / Title »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/c10c720e.4da34ab2.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    links </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user_files</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> links</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Files uploaded!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> link </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> links</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            local_path </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">download</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">link</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">#</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># The file is now available locally; process the file.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># To keep this example simple, we just read the file size.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">#</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            size </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> os</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">getsize</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">local_path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">append</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">link</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">os</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">path</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">basename</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation interpolation">link</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> (</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">size</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> bytes)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> download</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> path</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">link</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Clean up</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            os</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">remove</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">local_path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">append</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> items</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Upload some files&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">file_upload</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;user_files&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Upload&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> multiple</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/upload-download.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/upload-ui"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Uploads / UI</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/meta-title"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Meta / Title »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/c10c720e.0173a8d3.js"></script>
 </body>
 </html>
\ 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 ef90dd2155..611d984771 100644
--- a/docs/docs/examples/upload-ui/index.html
+++ b/docs/docs/examples/upload-ui/index.html
@@ -5,35 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Uploads / UI | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Uploads / UI | H2O Wave"><meta data-react-helmet="true" name="description" content="Accept files from the user."><meta data-react-helmet="true" property="og:description" content="Accept files from the user."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/upload-ui"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/upload-ui"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/ce88eaaa.defa501e.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/ce88eaaa.795d7cfb.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Uploads / UI</h1></header><div class="markdown"><p>Accept files from the user.</p><div class="cover" style="background-image:url(/wave/assets/images/upload-ui-ce3af4e53ce2d7a546aa933667f7758a.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> os</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> os</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">path</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Uploads / UI</h1></header><div class="markdown"><p>Accept files from the user.</p><div class="cover" style="background-image:url(/wave/assets/images/upload-ui-ce3af4e53ce2d7a546aa933667f7758a.png)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> os</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> os</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">path</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">make_link_list</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">links</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Make a markdown list of links.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;\n&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">join</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;- [</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">os</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">path</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">basename</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation interpolation">link</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">](</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">link</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">)&#x27;</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> link </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> links</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user_files</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Files uploaded!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">make_link_list</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user_files</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Upload some files&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">file_upload</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;user_files&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Upload&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> multiple</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/upload-ui.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/upload-async"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Uploads / Async</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/upload-download"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Uploads / Download »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/ce88eaaa.defa501e.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user_files</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Files uploaded!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">make_link_list</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user_files</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Upload some files&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">file_upload</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;user_files&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Upload&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> multiple</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/upload-ui.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/upload-async"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Uploads / Async</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/upload-download"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Uploads / Download »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/ce88eaaa.795d7cfb.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/upload/index.html b/docs/docs/examples/upload/index.html
index acdf885508..0d4b8c2343 100644
--- a/docs/docs/examples/upload/index.html
+++ b/docs/docs/examples/upload/index.html
@@ -4,21 +4,21 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
-<title data-react-helmet="true">Uploads | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Uploads | H2O Wave"><meta data-react-helmet="true" name="description" content="Upload files to the Q server."><meta data-react-helmet="true" property="og:description" content="Upload files to the Q server."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/upload"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/upload"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/0923c366.d31cd624.js" as="script">
+<title data-react-helmet="true">Uploads | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Uploads | H2O Wave"><meta data-react-helmet="true" name="description" content="Upload files to the Wave server."><meta data-react-helmet="true" property="og:description" content="Upload files to the Wave server."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/upload"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/upload"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/0923c366.97f55dcc.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Uploads</h1></header><div class="markdown"><p>Upload files to the Q server.</p><div class="cover" style="background-image:url(data:image/png;base64,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)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> os</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Uploads</h1></header><div class="markdown"><p>Upload files to the Wave server.</p><div class="cover" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATQAAADGCAYAAABcrHw5AAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDAyOjAxOjQ1IFBNIFBEVJS82iMAABXRSURBVHic7d15XFTl4sfx7zkDw6oiq6WImnq19Joi4J6kiaa5V+5XKzH1JhaalbaYe5uVS91MMzWXXELzulwFFO12vZZw1dKy0uxXsg/bDDDLeX5/jA6MgjGGoE/f9+s1L2WW5zwHXnw8zzngKEajUYCISAJqbU+AiKi6MGhEJA0GjYikwaARkTQYNCKSBoNGRNJg0IhIGgwaEUmDQSMiabj90QGE4C8aEFH1URTlhl97Q0GrLGKMGxHdiPIRK98RV+PmUtDKb0iv18PNze0P1ZSI6GpCCFitVpjNZkdzqtqZKp9DuzKwEAJ6vR7u7u6MGRFVO0VR4O7uDr1e79SdqnDpooAQAkIIuLn94VNvRETX5ebm5mhOVVUpaI4BLw/OIzMiutkURbG3x4WjNJeWnKKKgxIRVQdXu3NDS04ioppQ7UvO8iflGDQiqklXd+f3+uPybwowaERUU1ztDX/1iYik4dpVTiKiWlKtVzkvD3mDUyEiulHV/HNoRES3AwaNiKTBoBGRNBg0IpIGg0ZE0mDQiEgaDBoRSYNBIyJp1HjQfvnlF4R3aO+4Rfe8D9Pj4vDd2bM1Oo9uXbtgyeLF1Trm/v37Ed6hPb799tsKH9+z558YOeJRdOncCQMfGoCVK1agtLTU8fiPP/6Iv0+dim5du6B7926Ij38Gly5dAgCMGzcW90f3hKZpTmNOfOJx3NejO8xmc7XuC9HtqNaO0HpGRyN+xgwMGTIUZ8+ewYQJ4/HDD+dqazo33eZNm/DinDkQQmDEiJFo0aIF1qxZjbmvvAwAMJvNmDL5SZw9ewZ/+9t4jBkzBie+/hpPT48DAMTExCA/Px9ff/2VY0yDwYC0tDT0jI6GXq+vlf0iupXUWtDCw8MxatRoTIuLw4ZPNkKv1+O9lSsdj+/buxdDBg9C506dMG7cWJw6dQoA8MgjD2Pq1CkAgPT0dIR3aI8Z8fEAgHPnziG8Q3vs2rUT69etQ3iH9vhsxw707nU/oqN7YsuWzRXOJS8vD8/NmoXu3bqi1/3RWLr0LVitVgBAUVER5r7yimOMhQsWOB4rLS3Fyy+9iG5du2DM6FH45ZeLFY5fWlqKFSuWo92992LDJxsxLS4Ob761FGPHjcP+/fvx66+/4uLFn5GdnY3xEyZgYmwsJk16EosWLUbHiAgUFxejd+8HoCgKkhKTHOMeSk6GpmmIiekLAFi/bh2GDhmMrl06Y8L4v0n9DwRRRW6Jc2iBgYHo0aMH/nv8OADgf2lpmDNnNu66qznmL1gAi9mMaU/9HXl5eYiKjMLJkyehaRpST5wAAKSlpdr/TLX/GRUV5Rg7KSkRM2bMRKOGDfHG668jIyP9mu2/8MLz+OKLo5gxcyZGjhyFDevXY9UHHwAA1qxejcTEg3h21iw89dRT2LFjO7Zt2wYA+OAf/8Du3bsxdOgwDB4yFJs3bapw/06dPAmTyYSHhz/s9H4MkydPwZ69+xAUFIRGjUIREBCALZs3Y9euncjKykKnzp0xY8ZMeHl5ISQkBO3a3YtDh5Idv6SblJSIevXqISoqCmfPnsHbby9FZFQUlr79DsxmC+bPm/eHvi5Et5tbImgAEBgYBJPRCKvVil2f74K7uztenTcPvXr1wvMvzEZBQQGSk5IQGRUJk9GI77//DqmpqbjnnntgMBhw/vx5pKWlIiwsDCEhDRzjxs+Yib79+iF20iRomoYLF3522m5mZiaO/ec/GDlyFAYNGownJk5Ep86dsXNnAgBgWlwcDiYmISIiEs2aNYO7uzvOff8dAODAgQNo06YtnomPx/Dhw/HooyMq3DdDngEAEBQU5HS/Xq9HSEgI9Ho9PD098eHqNWjTpi1eW7IEfWP64LEJ43HmzBnH8/vE9EFmZiZOnz6NoqIiHD9+HL169YZOp4PFYj9qtFqtCA4Oxkdr12Ltx+v+4FeF6PZyywQtOzsLPj4+cHNzQ1ZmJoKCguHt7Q0AaBIWBgDIyMxAeIdw6HQ6pKWmITX1BAYOHITQ0FCkpp5AWloaIssdnQGAn58fAMDbyz6WzWZzejwrMxMAENYkzHFfk7AwZGVlQdM0JCcnYfiwYejXNwaLFy0CoMB6eQyDIRdNyr0uNDS0wn2r71cfAJCZlel0v81mQ2FhoWMJ27hxYyxavBjJhw5jxYqVMJlMmDJlMkwmEwCgd+8HoKoqkpIScSQlBRaLBX1i+gAA2rZti4mxsUhKTMSwoUMw8KEBSEhI+N3PO5FMbomgZWdnIyUlBRGRkQCAoOBgZGVlwmQ0AgDOnz8PAAgODoa3jw/atGmD5EPJOH/+PCIiIxEREYm9e/YgPT3dablZFYGXj5qubOPK3wMDA6GqKhbMn4+WLVsi5chRbNq8Be7uZUtGf39/nL9wwfHxTz/9VOE22v71r/D29sa2bdsc8QKAlStWoOd9PXDp0iUcPXIEsROfwA8/nIO7uzs6de6MQYMGoyA/HxcubyMgIAAdwsORlJiIpKQk+AcEIDy8IwBA0zQMGzYcBxOT8OmnWxEaGooF8+c5Ykj0Z1Brb7D51fHjsFltyM7Jxr69e2GxWDB58mQAwIABA7AzIQGzZ89GTEwM1ny0BnXq1EF09P0AgMioKKz64AOEhIQgLCwMEZER2LFjO1RVRceOES7NIyQkBFFRUdi8aRMahDRAVnYWjh07hscffwIAYNM0FBTkIzU1FUePHEFxcbHjtb17P4C1az/C668tQWjjMGzfvq3CbXh4eGDylCl48403MHbMaHTp0hUXL15EcnIS+j34IEJDQ6GqKk6dOoVnnn4aAwcOQnFJMbZv2wY/Pz80bdrUMVafPn2wcMEC/Pbbb3j44UegqvZ/kw4dSsbMGTMwYuRIREREwmy2wNfXl1c/6U+l1o7QDh8+jLffXopdu3bh7rvvwUdrP0bz5i0AAO3bd8D8+Qtw4cJ5zJ37Cjw9PPDusuWoX9++dIuMtB+FRUTY49WxYwQURUHru+9GnTp1XJ7LwkWL0bVbN7zzztvYtnUrxowdi9hJkwAAL7/8CtLT0zFzRjxUnYrQxo0dr4udNAkPPtgfO3fuxD93f44Jjz1W6TZGjRqNuXNfhRACGzduxPfff4eJsbF46SX7j200bNgQy5YtR0BAAFavXo0tmzejVavWWPne+/Dy8nKMc+Wcmf3qZozj/vvv74XJU6YgKTERz816FjabFW8tXco3haY/FcVoNF73v4Ms/64rmmaDzabB39+/puZHRH9iubm50OlUqKoOiqI4bpW5Jc6hERFVBwaNiKTBoBGRNBg0IpIGg0ZE0mDQiEgaDBoRSYNBIyJpMGhEJA0GjYikwaARkTQYNCKSBoNGRNJg0IhIGgwaEUmDQSMiaTBoRCQNBo2IpMGgEZE0GDQikgaDRkTSYNCISBoMGhFJo9aC9s3/rBg32ICW/pkI9cpA9L3ZWPueCeK67xIqp5/O2TBtQj7uDc1CI48MdGqZhRWvG1Fa4vonY+aTBRjcM/cmzJLo1lcrb6t9Os2C/l1z0T7CHS+9VgcBgQq+TLHghWkFuHjBhpeWuP7u57erY0fNGD3AgOAGOjw21RtBISrOnLLirflF2L2jBJ8l+cPTq/I3ViWiMrUStJVvmtC6rRt2JPlDvXyM2G+wJ4IbqFg0pxAzX/aFl7f838TGIoHJo/MR3kmPdQl+8PAs2+exsV4Y0DUX854rxIJ36tbiLIluH7Wy5MzL1RByh84Rsytip3sj9WIw9B5l39jfnrRi+AO5aOKbgbZ3ZmL9KhMWzSnCgG5ly6oB3XIxZ3qB01gpB80IVtKRn6c57kvYUoK+UTloWicDrYMz8czEfBhyyx6/Mu7a90xo1ygL3e7Odjx2JNGM/l1zEOaTgcjmWZj7bOE1S8KP3zehS6tsNPLMQMRdWVi93HTdz8Pu7SXIuGTDux/Vc4oZALRo5Ya4531w9hsrAMBqBYKVdOxNKHF63qI5RYi+NxtXSzloRmTzLIR6ZaBPRA4O/av0mufcjH0iqk21ErQH+nvgwO4SrHrXBHNp2TeQXq8guIEKnc7+8f9dtGFgjxwoCvCPTX5YtKwuNqwqxv7PSyoZuXKfbS5B7Ig8tOvojg2f18cb79fFkSQz4mOdQ/jdN1Z8ur4Yy9fVw6otfgDscXi0by7uaeeOjz/zQ9zzvti6vhiTx+Q7Xrftk2K8MK0AY2O9kJDsj9g4H8x9thDbN1Y+10P/KkWn7nqE3FHxl2HKDB9sP+jv8r5ePG/D7LgCxL/oi3UJfmjd1g0jHzTg34fNjufcrH0iqk21suQcP9kbeQYNC2cXYuHsQnTvpUfMQ54Y9IgnfOuUHam8u9iIoBAdNv7TH+7u9vt69PZARLMstGjtWosjOrvjo+1+6D/U03FfQb7AzCcLIASgXN6spgls2eePOnXL5jH32UKMjfXGkhVlS7+7WuowsEcuzp62olUbN3x52IIOUXpMfsYHANCxszvatndD46a6Sud06VcNzVpU/viN+r+LNhw+GYjWbe1f3ugYD+Rma1j8YhF2pfjf1H0iqk21coSmKMDTs33xTXowln5YDz4+CuZML0DHZlk4fKDsKOKLZDMGPuzpiBkA1K2noGcfvcvbbBSmQ/+hnig2Cfzvawv2fFaCfbtKYTYLFJvKjhJDm+icYpabreFUqgWPjPVyGq9Tdz38A1UcO2qfb1Q3d3z1pRnznivEqVQLNM3+nDsb1fw3f8vWbo6YXTFkpBf++4UZFsvtuU9EVVErR2hXePsoGPyoJwY/6gljkcCsqQUYP9SAExeCUD9ARW6OhuAG1zY3MFjFr79oFYxYuV9/sSE+tgCHD5Sibj0VTVvoUN/fPnb5HxVRrroWkZ1l306/zjmOpfAVNhuQk21//JFxXrBYgDUrTFj+mhH1A1Q8MtYLz83zhbdPxRc47mio4uefbC7tR1UEBl/7OQtuoELTgHyDhtycm7dPRLWpxoNmswGnUi0Ia6pD/YCybzwfXwVzFtXBp+uKcTrNiu699PAPUHHp12u/4dN/c46ZqgLaVX0rLXU+uT1pZD6sFoFDJwPxl7vtu71vVykS9157srw8/8tzXLKiLjr3uPbIsHw8Rj/uhdGPe8GQqyFxbylmTyuExSKwaFnFVynve8AD8bH5yLikVXgebeUbRiTuK8X2g2VXg39vPwEg49K1sU//zQZVBerVL9vOzdgnotpU40tOVQUejTHg1VmF1zz2ZYp9qdOwsf2woUtPPXZtLXG6cGDI0a65YucfqOK7b61O932RbHb6+MKPVgx82NMRMwD46kvn51QkMFhFqzZuOJ1mP6905da4qQ5nTlsdV2QTtpQ45lXfX8Xw0V6IGeiBkycslY49YJgngkJ0iHss32kfAeDcWSveWWREq3vs81VVwK++834KAXx5+Np9+PF7K06lOm93+ycliOiih7v7zd0notpU40doigLEv+SLOdMLkJ2poe8g+zmyE/+1YMOHxRg+2stxonzaLB/s2FiMEf0MmPS0D6wWgbcXGnFnqPM6KeYhD8Q9lo+FswsRHeOBlINm7P/cOXpd7tPjw2UmNGioQ8gdKg4fKMWWj4urNOe5b9TBqP4GAED/oR4oKRb44B0Tzpyy4ui3gUA9Bcf/bcb2jSV49c06aHKXDmlfWZGwpQTPzPGtdFzfOgre31gPo/ob0KtDDkZO8EJQiIpvTlqxYZUJzf/ihhcXl/2QcZ+HPLDidSOCQlQ0be6Gte+ZYMjV4OPrvPxr2lyHJ0flY9pzPghuoGLrBnuYth4ou2J6s/aJqFYZjUZxvVtRUZEoLCwUBQUFIi/PIHJyckR12PZJsejbKVs08U0XoV7ponubLLH8tSJhNjs/71SqWQyJzhGNvdPFPQ0yxIYPTWJ2XL7o37VsHpomxLznCkRL/wzRrG66mDYhT+xNKBFBuCTyDDYhhBCGXJuYMjZP3FUvXbQMyBBPjjKIT9eZRBAuiaJCTQghxMLZhaJnu6wK55tysFQ81D1HNPFNF83qpovxQw3i55+sjsdLSzXxyswC0a5RpmioTxeRzTPFsiVFQtN+/3Nx7qxFTB2XJ9remSEae9s/F0sXFAmT0fnFuTk2MX6oQTT2Thdt7sgQy18rumbOMybli1H9c0XKwVIR2TxTNPRIF706ZIuDe0pqdJ+IqkNOTo7IyzOIgoICUVhYKIqKiq7bK8VoNF73FwaFEI6bptlgs2nw93f9Z6Oq05zpBUj7yordR2t3HkR0c+Xm5kKnU6GqOiiK4rhVpsaXnMFK+h96faZoUK3j1YThY7ywcn09p/uiWmTh/A/Vf4WzpvQb7ImPP/Or7WkQOanxoF0dpFttvJpy7FxQbU+BSDq35ZKTiP4cXF1y8j94JCJpMGhEJA0GjYikwaARkTQYNCKSBoNGRNJg0IhIGgwaEUmDQSMiaTBoRCQNBo2IpMGgEZE0GDQikgaDRkTSYNCISBoMGhFJg0EjImkwaEQkDQaNiKTBoBGRNBg0IpIGg0ZE0mDQiEgaDBoRSYNBIyJpMGhEJA0GjYikwaARkTQYNCKSBoNGRNJg0IhIGgwaEUmDQSMiaTBoRCQNBo2IpMGgEZE0GDQikgaDRkTSYNCISBoMGhFJg0EjImkwaEQkDQaNiKTBoBGRNBg0IpIGg0ZE0mDQiEgaDBoRSYNBIyJpMGhEJA0GjYikwaARkTQYNCKSBoNGRNJg0IhIGgwaEUmDQSMiaTBoRCQNBo2IpMGgEZE0GDQikgaDRkTSYNCISBoMGhFJg0EjImkwaEQkDQaNiKTBoBGRNBg0IpIGg0ZE0mDQiEgaDBoRSYNBIyJpMGhEJA0GjYikwaARkTQYNCKSBoNGRNJg0IhIGgwaEUmDQSMiaTBoRCQNBo2IpMGgEZE0GDQikgaDRkTSYNCISBoMGhFJg0EjImkwaEQkDQaNiKTBoBGRNBg0IpIGg0ZE0mDQiEgaLgZNuTmzICKqVNW7U6WgKYrzgEII1+ZDROSiqztzdYcqckNLzpKSkht5GRFRld1IZ1wOmqIoMBqNMJlMPFIjomonhIDJZILRaKzSUVl5itFo/N0qCSEghICmadA0DTabDZrNBpumOR4DBNg3IroR9m4pUBT7TaeqUHU66HQ6qKoKVVUdj12Pm2sbtQ+oKgqEqkIHQHME7QpWjYhcURapK31RVNX+ZxUiVl6Vg6YoCiCEfQNXYqYoUK4OmhBMGhFVif3AzDlo5aOmKAoUVO2CAFDFoCmKYo/W5cFVVYUoFzOeSyOi6qCUOypzHJ1djllVoubykhOwV1VcjlzlMWPkiOh6Kg6UI2b2D27eklNcXnKi3PKTR2dEVJ2UCo7IqnXJefWgjrBdtSHGjYhuRGXBcvXHNlwKWkUbKR8xVzdORHS1P9KRGwpadW2ciKg68X/bICJpMGhEJA0GjYikwaARkTQYNCKSBoNGRNJg0IhIGgwaEUmDQSMiaTBoRCSN/wdR2NHOaJJKdwAAAABJRU5ErkJggg==)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> os</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">write_csv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">filename</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">with</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">open</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">filename</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;w&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">write</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;\n&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">join</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;,&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">join</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> x </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> row</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> row </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> rows</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -26,15 +26,15 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Upload CSVs</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">squares_path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cubes_path </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">upload</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;squares.csv&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cubes.csv&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Delete local CSVs</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">os</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">remove</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;squares.csv&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">os</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">remove</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cubes.csv&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display links to these CSVs</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Download CSVs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;[Squares](</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">squares_path</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">) [Cubes](</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">cubes_path</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">)&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/upload.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/pixel-art"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Pixel Art</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/upload-async"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Uploads / Async »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/0923c366.d31cd624.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/0923c366.97f55dcc.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/examples/wizard/index.html b/docs/docs/examples/wizard/index.html
index 9c8ec8d5e7..a61cab1d55 100644
--- a/docs/docs/examples/wizard/index.html
+++ b/docs/docs/examples/wizard/index.html
@@ -5,37 +5,35 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Wizard | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Wizard | H2O Wave"><meta data-react-helmet="true" name="description" content="Create a multi-step wizard using form cards."><meta data-react-helmet="true" property="og:description" content="Create a multi-step wizard using form cards."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/examples/wizard"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/examples/wizard"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/174d8305.dfb7e5b4.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/174d8305.6a9b0564.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Wizard</h1></header><div class="markdown"><p>Create a multi-step wizard using form cards.</p><div class="cover" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ4AAADQCAYAAAD28o9OAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDExOjI3OjE0IEFNIFBEVBsf5CMAACAASURBVHic7d15fA3X/8fx173IvliD2qKWb1Elq6xIYqetJdZ+a2/7LVq7Lva2dqW0XzsR/ZYEbVG7JHZCIrbaQ4gEkV9qTSIhOb8/wuU2wR1blM/z8biP3pk5M3PO6LzvmXMnd3RKKYUQQmigz+8KCCH+eSQ4hBCaSXAIITST4BBCaCbBIYTQTIJDCKGZBIcQQjMJDiGEZhIcQgjNJDiEEJrlW3BkZmayfNkytm7dml9VEEI8IZOCY+HCIFycnXBxdmLDhg25lq9bu9awfO6cObmWHzp0yLB8zHffATB//jzGjRvLgP79OHjw4FM24/lq2LABLs5ODBk86Lnu5/q1a8ycOYNOHTtQ19cHTw8P3n/vXcaPH0diYmKu8gcPHmT27FnMnj2L1NTU51o3LRITE/isT2/Dv/nPixbld5XEM2ZScPj61jW8j46KyrU8MnK34f3uB97fsy862vDex9cXgBIlHAAwMzOjsL29idV9dZ08eZI2bVozb+5cTpw4QWpqKpmZGSQkJLBs6VIC27Rh165dRuscOniQObNnM2f2bG7evJlPNb/v9u3bLJg/n7aBgbnqKl4tBU0pVKlSJUqXLs3FixeJitqba/mePXsM7/88fJjU1FSsra0N86Kic8LGzMwMd3d3AAIDA6n59tvYFy5MqVKlnqoRT+POnTsULGjSYXhulFIMG/o1f/31F3q9nnbt2uHi6oq1tQ2HDh4kOHgh6enpDBv6NatXr8HqgWP7Mhk/biwrVqxAp9NRx8ODPZGR+V0l8ZyYfMb4+PqybOlSzp8/T1JSEiVLlgTgdGwsycnJhnJZWVlERUVRv359IOfEPHjgAAAuLq5YWloCEBoawsQJEwBYsXIV5cqVY8Xvv/Ptt988sh4//+8XqlevbpjesnkzS5eGcvToUTIyMilVqiT16tenU6cPcHBwMJQbMngQ4eHhVK1alW++/Y7x48Zx5MiftO/Qgf79BwAQFbWXefPmcfToUQoWKICfnz8DBz3fyxOACxcucPr0aQBatWrN4CFfGJbVqVOHN8q8wYjhw7l27Rr79+/H28cHF2cno200a9oEgBkzZ1GnTh3D/DVrVvPr8uWcOXOG27dv8+abb/Lee+/TJjAQvf5+h9Pfrz7Xrl2jTZtAOnTsyLixY/jzzyNYW1vh4enJp5/2okyZMo9sR1paOpUqVeLroUOxtbGlXbu2T31sxMvJ5ODw9ckJDoDo6CiaN28B3L80KVqsGKVKluTo0aPsiYw0BMeffx7m1q1bwP3LlKdhZlbI8H7WrJlGYyoFChQgPj6enxctYs2aNSxevIQSJUoYrX/r1i36fv45SUmXjOZv2LCBYUO/Jjs72zBv5coVpPyVAs/5J0se3Gdqau5LjubNW9CkSVMAw8mu1+uN1rs3T6/XGaZHjhjO6tWrjcocPXqUo0ePErknkkmTJhuFB+SEWI8e3bl+7Rp6vZ4rV66wbu1adu/axYKghVSoUOGh7WjfoT1vv12TggULcjo21sTWi38ik79VcXN3x9zcHICoB8Y57nVHfbx9qO/nBxiPeURH3R/f8PX1eeQ+/AMCWLp0mdFr6LBhhuXNmzencuUqACQkJDBv7lwAGjduTFh4BJF79jJu/Hh0Oh1/paQQGhqSax/x8fHo9Tqm//gTv69YSYcOHbl58ybjxo4hOzsbKysrRn/zLav+WM20adM5eeIEf/31l6mH6YmUK1eOGjVqALB+/Xq+/OILdu7cSVpamqFMgQIFKFCgADpdTjBERe+jX7/+huVr160nKnofbm45l4KrVq00hEbPnh+xectWduzcRZ8+n6HT6diyeTN//LEqV112796Fp4cHEZu3sDtyD0OHDUOv13P16lUmjB/3yHbUru2U75d94sUwOTjMzMxwuzs+cW+ANDMzk5iYGAB86/oaBlHj4+O5ePEicH98w9HRkTJlyj5yH3Z2dlSqXNnwKlKkCHNmzwbgzTff5KuvhxrKli1blk1h4SwMXsSIkaMoUqQIer2eRo0aGy5Rztzt/j9Ip9MxY+YsvL29KV++PKVLl2bbtq3cuHEDgM8/70uLFi0oU6YMPr6+jP7mW1MPEdevXycpKSnX68FLuYeZ+sM0w/HbtGkjn3/Wh3p1fenapTNBCxZw9epVk+sBELJkCQB+fv582qsXdnZ2WFpa0q17d5o2bQbAH6v+yLWevb09I0eNxt7enoIFC9K6dRuaNW8OwN69e7l8+bKmeohXk6aPB18fX3Zs387FixdJTEwkMTGRW7duUahQITw8PLGysqJkyVIkJV0icvdumrdowaGDh3LWrVv3MVs3lpWVxRdfDCE5ORlLS0smTppsGB+5p0iRIlhZWXHkyBHi4s5w4cIFTp44QVJSEgCZmbdzbbdo0aKUL1/eaF7sqfvdaj9/f6Nlbm5u2NjYmPStxbQfprJixYpc821sbNi6bfsj1y1WrBg/TJvG8ePH2LRpE1F793L8+HEOHz7M4cOHCQpawIiRo2jQoMFj65GRkcGJEycA2Lw5gj69exstT0g4D8CpUydzrevi4mroWd7j7e3N6j/+QClFbGys0diReD1pC466voy721uNiorifHw8AM4uLlhZWeWU8fVh+fLlRO6JpHyFCmRmZuTM99E2vjHthx8MvZmvvv6aihUr5iqzYP58goMXGp3Udvb2WFhYGMZV/q5AgQK55l2/cd3wvkiRIkbLdDod9vaFX9jXnW+9VY233qoGwM2bN9m+bRvz5s3l7NmzDBv6NeXLl6dq1aqP3MbVq1eMpnfvzvur0bzaZGdnm2uevd39r8uvX7+ea7l4/WgKjpIlS1G5chViY08RHR3FmTNnAKj7wH0evr51Wb58OXv37sWxgiOQ84lbq3Ztk/ezadNGfvnlfwC0bNXKMBD7oBUrVvDf//4E5IxxNGvWnCpVq+DgUJI2bVpz7uxZk/dnZ2tneJ+SkmL0iZqdnc2Vv52IDzN8xEiGjxhp8n7vOX36NBcu5Nzg5e3tYxiwtLGxoWmzZlSvXp3WrVtx+/ZtwsPCHhscdg+c6P37D+DfH35ocl3yuqx6cJ69vV2u5eL1o/mWc5+7A5xbt27l5N3usG/d+70J9zp1sLCw4Pq1a4bBSQ9PT5MHzeLi4vhm9GgAqlatyhdffJlnub17cgZlKzg6MnbceHx8fSlZshRZWVn8lZKiqU1VqlQxvN+8OcJoWWRkJGnP+a7MXTt30q9vX/r17cveB+6Juedy8gPjCrpci4GcS7t7LC0tcXR0BGDPntz3Uuzdu5fNmyM4depUrmUxMTFcuWIclBs3bczZtU5HpUqVH9cc8RrQHBy+d79STUtNRSlFxYoVjQY9zczMDCP79wYcTb1MSUtNZdDAAaSlpVGgQAE+/uQTzsfHczo21vC611W2scnpUl9OSjKcAOnp6YwcMdywX5PbVLcutrY52/tx+nRWr15NYmIi27dvY/Qo7T0IrfwD/A2XUP379+enn35ky5YtbN26lTmzZzP4gXtJvLy8De+tbe7fCLbi9985duyY4SvawMCceyh27drF9GnTSElJIS01lfXr19Ov7+cMGjiQRcHBueqSnp7OwAH9+fPPw8THxzN1yhR27tgBgLu7u4xvCEDjpQrAO+/Uws7enuvXrgF5D3r61vVl+/ZtQM6nlJe3d64yeVkQtICzdy8xsrKyGDRwYK4yw4ePoGWrVrz73nusWPE76enpdOzQnqJFi3Ljxg3s7OxwdHQ0bMcUNjY2fPnlVwwfPswQPvfU8fDAwsKChIQEk7enVZkyZfnqq68ZO3YMmZkZBC1YkGe57j16UKtWLcO0t7c35ubmZGRkMH/+PObPn8cvixfz1lvVaN+hAzExMUREhBMcvJDg4IVG2ypdujSfff55rn14eHpy6uRJunTubDTf3t6eL7786ukbK14Jmnscer0eL09Pw/SDf8eS17zqNWpQtGhRk7adetP0S4KaNWvy40//pXZtJ8zNzcnOzsbLy4s5c+dRrFgxk7dzT5OmTfnxx59wdnbGysoKW1tb2rQJZPLk7ynwAu5NaNW6NUtCQmjZqhXlypXDwsICMzNzSpcuTZMmTZg7bz69e/cxWqdkyVLMmDnTcAysra25dDHnxja9Xs/ESZMYOWoUtWrXxs7ODjMzMypUqEDnLl343y+L8+w9FClShAVBC6lTpw7m5uYULlyYRo0aE7zo50fe/CVeLzp5kpuA+7ecN23WjO++G5Pf1REvOfkhHyGEZhIcQgjNJDiEEJrJGIcQQjPpcQghNJPgEEJoJsEhhNBMgkMIoZkEhxBCMwkOIYRmEhxCCM0kOIQQmklwCCE0k+AQQmgmwSGE0EyCQwihmQSHEEIzCQ4hhGYSHEIIzSQ4hBCaSXAIITST4BBCaCbBIYTQTIJDCKGZBIcQQjMJDiGEZhIcQgjNTAqOCePH8+UXXxjNOx0bi4uzU66noK9YsYKW778HwJDBg5g9e9azqelDBAcvpGuXzo8vKEy2ZPFimjdripenB716fUpiYmJ+V0m8ZEwKDlc3N/bvjzGaFxMTY/Tfew4c2I+rm9szqh40bNiAPXv2PHR5zZrv0LBRo2e2v9ddWFgYP/30IwMGDiJ06TIK29szeNDA/K6WeMmYFhyurqSkpJCQkGCYFxMTQ40aNTh44ADZ2dmG+ftjYnB1fXbB8TjOzs588MG/X9j+XnWnTp0ksG1bAgICKFeuHH0++5wTJ06QlJSU31UTLxGTgsPe3p5KlSqz/4Hexf79MXTv0ZPMzExiY2MB+L//+z8SEhJwdXU1lMvMzGTE8GF4e3nSuFFDli1darTt33/7jbaBbfD08KBdu7aEh4cDcOPGDVycnfgrJYVen/6Hpk0a51m30NAQPv6op2F6T2QkbVq3wtOjDm0D27B7964819uwYQONGjYwCr2LFy/i6uLMuXPnADh8+DDdu3fDy9ODd1s0Z8nixUbb8Perz77oaMN0UlISLs5O3Lhxw7B86dJQ2rRuRbOmTfOsx5DBg5g1ayaDBw3Cy9ODZk2bsnbtGpOO0b31Z/z3v3zWpzeeHh506tiBuLg4pk37Ab/69WjYIICQkBCj7R3580+6d++Gt5cnLd9/j9DQ+8s//bQX/fsPMEwnX74MgK2NTZ71F68pZaKJEyeo0aNGKaWUio+PV+5uriotLU3955OP1ZIlS5RSSm3cuEG1atXSsM7gQQNVgL+fCglZos6dO6d++eV/ysXZScWeOqWUUiosLEzVq+urIiLCVXJyslqx4nflUcddJScnK6WUysjIUHV9fdS2bVtVRkZGnvUKCVmiPurZQyml1IULF5S7m6tat26dSklJUatX/6Hq+vqoGzdu5FovPT1deXt5qn379hnm/bxokfr3B52UUkolJJxXPt5easH8+Soh4bzauXOnatSwgVr8yy+G8n7166noqCjD9KVLl5SzU211/fp1w/LANq3V/v0x6sqVK3nWf/Cggcrfr76KiAhXqTdvqmXLlil3N1d16dIlk47R4EEDVcMGASpy92517do1NXDAAFXX10fNnTNHpaamqoiIcOXu5qoSEs4bjpGPj7eaP2+eSkxMVDt37lQB/n4qNDQkV93OnTunWrV8X40YPizPuovXl8nfqri5unHgwH4AYmL2UaNGDSwtLY3GPw7s34/bA70NAFdXN9q370D58uXp1OkDqlSpwv4DBwAICAjg9xUr8fPzp3jx4rz/fkusra05duwoAGZmZpiZm2NmZo6Zmdlj63j58mUKFSqEj48PRYsWpXnzFmzYuAmbPD4tLSwsqFe/PuFhmwzzwsI20eRuz2Bp6FJcXd3o1r07ZcqUxcvLi/79BxAcvBCl4Tnd3bp3p3ZtJwoXLvzQMp5eXvj5+WNlbU1gYCAODg4cPnzYpGME4OvrSx0PD+zs7GjVujUZGRl079EDKysr/Pz8KVWqFKdO5fQKQ0ND8Pfzo3uPHrzxxhs57RowgJUrVhrVKSUlhS6dP6RGjbcZPmKkye0Vr4eCphZ0dnHh/Pnz/JWSQkxMDG5u7kBOMITe7Qrv37+fbt27G63nWNHRaLpYseKkp6UZpi9dukRoaAhxcXGcjTvLlStXyMjIfKLG1KxZkxpvv02rlu/j61sXD08P6tf3e2j5Jk2aMOa77xg0eAiXL1/myJEjTP5+CgAnT57A3b2OUflatWuTnJzMlb/+omixYibVqaRDyceWKVeunNG0vb29pmPkUPL+PgoWLIi5uTl6/f3PBHNzczIyMgA4cfw4e/fuZcuWLYblWVlZmJubG9Vh+fJllHBw4Jtvv0Wn05nUVvH6MDk47OzsDL2F/TExjLj7KVSjRg3S09M5evQop06dwsXFuMfxqP/pfvvtV6ZPm0Zg27Y0atSYihUr0r9f3ydsCuj1embNms2BA/uJ3B3J/HnzmT1rFsGLfs6z1+Hp6UVGZiaHDh7kyNEjuLq6Urx4cQCUenTd82Z6T8RUz/oYAXTu0oW2bdsZzXswaADS09OpV6+ehIbIk8nBATm9i/Xr1pGc/H+8U6tWzgYKFqR27dosmD8fR0dHihYtavL21q9bR5cuXQ29lMzMTJKTk43K6CDnLDZBWloaSUlJODk54+TkzMeffELjRg3Zs2cPAQEBucoXLFiQBgEN2BS2iaNHjtCyVSvDsn/9619ER0fTtVs3w7zoqChKlChBkbtttLS05MrVq4blCQnP/n4HU46RFlWqVOXy5cu88cYbhnlxcXG5gqNfv/5PvA/x6tN056irmysREeG8U+sdozEHVzc3Nm+O0Pw1bPkKFdi5cyenY2OJi4tj+LChucYPipcoQcTmCM6ePfvY7e3bF033bl3ZExnJ5cuXWbNmNdevX8exQoWHrtOkSRPWrlnD8ePH8fe/Hy7t2rfjwIH9zJk9m8TERHbt2sWUqVPo2rWb4VO4du3aBC1YQFxcHIcOHWLaD1M1td8UphwjLdq1b8+2rVtZuDCIxMQEoqOi6Pv556xfv86o3KRJE5k6ZcrTVl+8ojQFh7OzC3q9Hre/3eB1LzBc/jYw+jgD+g/AwaEEnTt/yGd9euPh4YmDg4NRmaFfDyU6KsroK9eH8fWtS4+ePfn22294790WLAoOZuzYcVSqXPmh6zg5O2Nubo6Pj4/R5UyZMmWZNXs2kZG7aRvYhnFjx/DxRx/ToWNHQ5m+/fpjbW1Fp44dGDd2DD0/+khT+01hyjHSomzZssyaNZsd23fQrm1bRo8eRdOmTenRw/j4no+PlztGxUPp1NN8fL0ClFK0fP89+vXvj5+ff35XR4h/BE1jHK+ac+fOEREezp07d/Dx8c3v6gjxj/FaB8en//kP5uZmjB07jkKFCuV3dYT4x3jtL1WEENrJ73EIITST4BBCaCbBIYTQTIJDCKGZBIcQQjMJDiGEZhIcQgjNJDiEEJpJcAghNJPgEEJoJsEhhNBMgkMIoZkEhxBCMwkOIYRmEhxCCM0kOIQQmklwCCE0k+AQQmgmwSGE0EyCQwihmQSHBnsiI9m4cUN+V0OIfGdycLg4O+Hi7MT/fv45z+Xdu3XFxdmJgQNe3WeODh36NV99+SXXr1/P76oIka80P1dl1aqV/PvDD43mxcfHc/DgwWdWqZfVyFGjuHb1GnZ2dvldFSHylebgOH36NEeOHKFGjRqGeatWrXymlXpZ+frWze8qCPFS0DTGUaJECfR6vVFQZGdns2b1akqWLGlU9t6ly4MPLp40cQIuzk6Eh4fn2na7toE0bdKYsE2beLdFc7y9PBkyeBA3b940lDl8+DAff9STur4+NGzYgLFjxnDr1i0AwsLCcHF2YuHCIHr37oWnhwf//qAT8fHxzJwxA3+/+jQI8OeXX/5ntN99+/bRrWsXvDw9eO/dFsyaNZPMzMw829+ubSCeHnUM03+sWkVgm9Z41HGnWdMmzJw546meJC/EP4Wm4ChZshRu7u5sWL/ecHJFRkZy+fJl3n3vPaOyjRo3AWDnzh2GeTt27MDKygofH588t3/9+nVmzpxBQIMGODpWJDw8nJkzZwCQlJTEJx9/RGJiIt26dcfL05Nff13OxAkTjLYRHBxM2TJl8PL24tixY/Ts0Z19+/bRqnVrsrKymDplCqdjYwE4ceIEvXt9SlLSZbp07Uq1atWYO2cO48aOfeyxiImJYdSokegLFKBXr95Uq16deXPnEhoSYuLRFOKfS/Olyrst3mVPZCSbN2+mcePGrFq5kkKFCtG4cRPmzZ1rKNegQQO+nzyJHTt20K5de86dPUtCQgJNmjbF3Nw8z23funWLiZMmU6lSJa5evUrDBgFE7d0LgIWFBZMmTcaxoiNlypQlOzubiIgI9uyJNNpGvXr1+OrroWRnZ9O4cSOuXbvG9B9/xMrKClsbW378cTrHjh+nUuXKLAwK4vbt2/wwbRqOjo4A3L59m9Wr/2DgoEHY2Ng89DicOXMGgEYNG9G5SxeysrLYunULld6spPWQCvGPozk4/Pz9sbK2ZtWqlXh6erJ16xbq1q2Lvb29UbnixYvj5OxMdFQUmZmZbN+xHYDGjRs/dNuFChWiUqWcE69w4cLY2tqSlpYGgL29PcWKF+O3X3/jzJkznDlzmrS0NCwsLY224VjBEQC9Xo+trS1Zd+5gZWVl2CZguLzZu3cPAB07tM9VlwsXLlC1atWH1tXb2xs7e3tmzpzBxo0bcHJyws/Pnwp3A0iIV5nm4LCwsKBhg4b88ccqghcuJDMzM9dlyj2NGjVmX3Q0UVFR7NyxA1tbWzw9vR66bZ1O99Bl27ZtZeCAAZQpUwZ//wAaNGzAD1Onaq2+ESsrK65evcrC4EW5lpUrV+6R65YuXZrly39l3bq1xOzbx4YNG1i+fDk9evSkV+/eT1UvIV52T3QDWIt33yU7O5uFC4MoWrQoXl7eeZYLCAhAr9ezceMG9u/fj5+fP4UKFXqiioaHhZGdnc2MmbP4vG9f/Or7GQ2cPom33qoGgJWlJTVr1qRmzZqcPx/PiePHH1vPE8ePs33bNpo3b8GUqT+w/NffANiyZTMASimOHz9GdnZ2ntMAZ8+eJTU19anaIER+eKLgcHJyokyZsgA0bdqMAgUK5FmuSJEiuLm7s2b1am7fvk2jxo2euKLFi5cA4Mfp0wkNDaFXr0+Bh/dQTNG5Sxf0ej29e/di2rQfGDVqJCNHjGDdunUULPjoztjpM6f59ttvGNC/H0sWL2bK95MBqPnOOwAsXvwLH3TqxNy5c/KcPn78GIFtWtO/X9+naoMQ+eGJgkOn09G8RXMgp/fxKI0aNUYpReHChXF3r/PIso/S86OPaN68OZF7IglasIAmTZtRrlzZJ94eQM2aNfnpvzMoXbo0oSEhbN26lWbNmjHFhEugZs2aM3DQIK5evcr06dOIiYmhU6cPGDLkCwDKvFEGGxsbKtwdc/n7tL19YYoWLUrlylWeqg1C5Aedes43Hmzfvo1+ffvSpk0gXw8d+jx3JYR4QTQPjpoqPT2dyZMnsXvXLvR6PR06dnxeuxJCvGDP7a9jT544wdo1aylYsBDffPMtb7755vPalRDiBXvulypCiFeP/B6HEEIzCQ4hhGYSHEIIzSQ4hBCamfR17I7t21gaGsKNGzeed32EEPnI1taWdu074POYH60yKTiWhobQf+AgKlaUr1SFeJXFxZ1h6veTHxscJl2q3LhxQ0JDiNdAxYpvmnRlIWMcQgjNJDiEEJpJcAghNJPgEEJoJsEhhNBMgkMIoZkEhxBCMwkOIYRmzzw4rl27xoTx42nUsAGeHnX48N8fsHv3rme9m1wOHz6Mj/fDH73wd/5+9dkXHW2Y/vPPw7Rv1w5vL0+OHTv2PKooxCvjmQZHWmoqPbp349ChQwwZ8gUzZs7E09OL/v36vfQPph7z3XfUrl2L4EWL+Ne//pXf1RHipfZMf3N03rx56HQ65i9YgIWFBQBOTs6UKl2K8ePG4efnj62t7bPc5TOTkpKCv3+A/Oq4ECZ4pj2ONWtW0617d0No3PP++y1xdnbh+PH7lwC///YbbQPb4OnhQbt2bY2eYD9k8CBmzZrJ4EGD8PL0oFnTpqxdu8Zom1FRe+nUqSOeHnXo1rULSUlJRstv3brF9GnTaNa0CV6eHnzyyceGh00/6Pz587g4O5GSkkKvXp8aPY1eCPEQygRdO//7sWWSk5OVs1NtdfHixceWDQsLU/Xq+qqIiHCVnJysVqz4XXnUcVfJyclKKaUGDxqo/P3qq4iIcJV686ZatmyZcndzVZcuXVJKKRUXF6c86tRRi4KDVUJCggoPD1PvvdtCeXt5GvYxYfx41b5dW3X48CGVlJSkxo75TrVr29aw3K9+PRUdFaWys7NVRkaGquvro7Zt26oyMjJMOSRCvLJMOd+fWY8j9e7jGO1MuBQJCAjg9xUr8fPzp3jx4rz/fkusra05duyooYynlxd+fjkPuA4MDMTBwYHDhw8DsGzZUnx9ffiwc2fDs2T//vzagYMGMXfefN5+uyYODg6079CR2NhThodY36PT6TAzM8PM3BwzM3PMzMye9lAI8cp7ZmMcdnefVn/9xg2srK0BWL9+PaNHjTSU6dy5C5/26gXApUuXCA0NIS4ujrNxZ7ly5QoZGZmGsn9/6LO9vT3pd0/607Gn8fTyNFpevXoNo2mdTseBA/uJjo4m/lw8J0+eACAzM9Pw9HohxJN5Zj2OwoULU6JECfbHxBjm+fr6siQklCUhoVSpUsUw9vHbb7/y6X8+4c6dOzRq1Jhx48dTtqy2xzlm3ckyms7OMp4ePmwoU77/nmJFixEYGMiEiROfsGVCiL97ZsGh0+lo2qwZQUELuHXrFgDW1tY4OjpiaWlBbGwsNWvWBGD9unV06dKVPn0+IyAggLJly5KcnGzyvipXqcy+mH1G844cPWJ4n52dzYYNGxj9zbd07tIFbx8fMjNvP4NWY+polwAABZBJREFUCiHgGX+r8lHPj8jOzqZnj+5s2rSRI3/+yapVK+nZowd16njg6uYGQPkKFdi5cyenY2OJi4tj+LChKA3PhWob2JaYffuYP38eiYmJhIWFsWHDhvuN0uspV64c69auJTExgUOHDvH95MnPsqlCvNaeaXBYWVuzYEEQtWrVYuqUqfTs2YOFQUG0bNWKSQ+cuAP6D8DBoQSdO3/IZ3164+HhiYODg8n7qeDoyA/TphO2aROBbVoTsmQJQwYPMSrzw7TpHDl6hMA2gYwfN5Zu3bo9s3YK8boz6RGQ3bp8SFDwzy+iPkKIfGbK+S5/5CaE0EyCQwihmQSHEEIzCQ4hhGYSHEIIzSQ4hBCaSXAIITQzKThsbW2JizvzvOsihMhncXFnTPqxLZP+OrZd+w5M/X6ySQ+jFUL8c9na2tKufYfHljPpzlEhhHiQjHEIITST4BBCaCbBIYTQTIJDCKGZBIcQQjMJDiGEZhIcQgjNJDiEEJpJcAghNJPgEEJoJsEhhNBMgkMIoZkEhxBCMwkOIYRmEhxCCM0kOIQQmklwCCE0k+AQQmgmwSGE0Myk4AgKCsLW1hadTicvDS9bW1uCgoKe97+hEC+cST9WbGtry82bN19EfV45NjY28uvw4pVjUnDodLoXUZdXlvyQvHjVyBiHEEIzCQ4hhGYSHEIIzSQ4hBCaSXAIITST4BBCaCbBIYTQ7KUJji1btpCdnY23t7fRfA8PD5RSLFy4MH8qJoTI5aUJDsi50Wzu3LmYmZk9t30ULlwYpRRhYWHPbR9CvOpequAAqFatGkOHDs3vagghHuGlC46zZ8/y5ZdfUr169YeWqVevHrt27SItLY0zZ84wevRozM3NARg2bBhKKT7++GMAihYtyrVr1zh+/Dhvv/02V65cASAgIAClFD4+Ps+/UUK8Yl664OjVqxd6vZ558+ah1+euXu3atdm4cSNly5Zl4sSJ7Nu3jxEjRjBz5kwAvv/+e86fP8+IESOwsLDgq6++ws7OjgEDBnDhwgXGjBlj2NbgwYOJi4t7YW0T4pWhTAA899eWLVuUUkqVKlVKTZgwQSmlVJ8+fZSHh4dSSqmFCxcqQIWEhCillKpVq5aysLBQFhYWauXKlerOnTvK3t5eAapTp05KKaWmTJmi0tPT1fr16w37KVy4sFJKqbCwsBfSLhMPsRD/KC9lcFhaWqpTp06p69evq7Zt2yql7gdHcnLyQ+tZq1YtBSidTqd2796tlFLq9u3bqlq1ahIcQjxDBfPqheS39PR0PvnkE8LDw5k8ebLRsps3b1K8eHE8PT1zrRcbG2t4/+BljvwsgBDP1ks3xnFPREQEQUFBlC9f3mh+TEwMkBMgkZGRREZGUrlyZZycnMjMzASgS5cuuLu7M2fOHLKyspg+fbphfXX3tzEKFSr0gloixCvIlG4JL/hS5d68IkWKqEuXLiml7l+qeHh4qDt37qjExEQ1ceJEFRQUpLKystT27dsVoGxtbdXFixfV+fPnlaWlpZo0aZJSSqnWrVsrQOn1enX16lWVkZGh5s6dq0qWLCmXKkJo9FIHB6DatWunlLofHIBq0KCB2rVrl0pLS1MpKSkqODhYFStWTAFq4sSJSimlOnfubBjTSE5OVnFxccrCwkIBqnXr1urYsWMqPT1d+fv7S3AIoZH8dOALYMIhFuIf5aUd4xBCvLwkOIQQmklwCCE0k+AQQmgmwSGE0EyCQwihmQSHEEIzCQ4hhGYmBYeNjc3zrscrS46deBWZFBzTp0+XE+AJ2NjYGP2BnRCvCpNuORdCiAfJGIcQQjMJDiGEZhIcQgjNJDiEEJpJcAghNJPgEEJoJsEhhNBMgkMIoZkEhxBCMwkOIYRmEhxCCM0kOIQQmklwCCE0k+AQQmj2/7qkBOwu7AsrAAAAAElFTkSuQmCC)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cypress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Cypress</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Wizard</h1></header><div class="markdown"><p>Create a multi-step wizard using form cards.</p><div class="cover" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ4AAADQCAYAAAD28o9OAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUATW9uIDI4IFNlcCAyMDIwIDExOjI3OjE0IEFNIFBEVBsf5CMAACAASURBVHic7d15fA3X/8fx173IvliD2qKWb1Elq6xIYqetJdZ+a2/7LVq7Lva2dqW0XzsR/ZYEbVG7JHZCIrbaQ4gEkV9qTSIhOb8/wuU2wR1blM/z8biP3pk5M3PO6LzvmXMnd3RKKYUQQmigz+8KCCH+eSQ4hBCaSXAIITST4BBCaCbBIYTQTIJDCKGZBIcQQjMJDiGEZhIcQgjNJDiEEJrlW3BkZmayfNkytm7dml9VEEI8IZOCY+HCIFycnXBxdmLDhg25lq9bu9awfO6cObmWHzp0yLB8zHffATB//jzGjRvLgP79OHjw4FM24/lq2LABLs5ODBk86Lnu5/q1a8ycOYNOHTtQ19cHTw8P3n/vXcaPH0diYmKu8gcPHmT27FnMnj2L1NTU51o3LRITE/isT2/Dv/nPixbld5XEM2ZScPj61jW8j46KyrU8MnK34f3uB97fsy862vDex9cXgBIlHAAwMzOjsL29idV9dZ08eZI2bVozb+5cTpw4QWpqKpmZGSQkJLBs6VIC27Rh165dRuscOniQObNnM2f2bG7evJlPNb/v9u3bLJg/n7aBgbnqKl4tBU0pVKlSJUqXLs3FixeJitqba/mePXsM7/88fJjU1FSsra0N86Kic8LGzMwMd3d3AAIDA6n59tvYFy5MqVKlnqoRT+POnTsULGjSYXhulFIMG/o1f/31F3q9nnbt2uHi6oq1tQ2HDh4kOHgh6enpDBv6NatXr8HqgWP7Mhk/biwrVqxAp9NRx8ODPZGR+V0l8ZyYfMb4+PqybOlSzp8/T1JSEiVLlgTgdGwsycnJhnJZWVlERUVRv359IOfEPHjgAAAuLq5YWloCEBoawsQJEwBYsXIV5cqVY8Xvv/Ptt988sh4//+8XqlevbpjesnkzS5eGcvToUTIyMilVqiT16tenU6cPcHBwMJQbMngQ4eHhVK1alW++/Y7x48Zx5MiftO/Qgf79BwAQFbWXefPmcfToUQoWKICfnz8DBz3fyxOACxcucPr0aQBatWrN4CFfGJbVqVOHN8q8wYjhw7l27Rr79+/H28cHF2cno200a9oEgBkzZ1GnTh3D/DVrVvPr8uWcOXOG27dv8+abb/Lee+/TJjAQvf5+h9Pfrz7Xrl2jTZtAOnTsyLixY/jzzyNYW1vh4enJp5/2okyZMo9sR1paOpUqVeLroUOxtbGlXbu2T31sxMvJ5ODw9ckJDoDo6CiaN28B3L80KVqsGKVKluTo0aPsiYw0BMeffx7m1q1bwP3LlKdhZlbI8H7WrJlGYyoFChQgPj6enxctYs2aNSxevIQSJUoYrX/r1i36fv45SUmXjOZv2LCBYUO/Jjs72zBv5coVpPyVAs/5J0se3Gdqau5LjubNW9CkSVMAw8mu1+uN1rs3T6/XGaZHjhjO6tWrjcocPXqUo0ePErknkkmTJhuFB+SEWI8e3bl+7Rp6vZ4rV66wbu1adu/axYKghVSoUOGh7WjfoT1vv12TggULcjo21sTWi38ik79VcXN3x9zcHICoB8Y57nVHfbx9qO/nBxiPeURH3R/f8PX1eeQ+/AMCWLp0mdFr6LBhhuXNmzencuUqACQkJDBv7lwAGjduTFh4BJF79jJu/Hh0Oh1/paQQGhqSax/x8fHo9Tqm//gTv69YSYcOHbl58ybjxo4hOzsbKysrRn/zLav+WM20adM5eeIEf/31l6mH6YmUK1eOGjVqALB+/Xq+/OILdu7cSVpamqFMgQIFKFCgADpdTjBERe+jX7/+huVr160nKnofbm45l4KrVq00hEbPnh+xectWduzcRZ8+n6HT6diyeTN//LEqV112796Fp4cHEZu3sDtyD0OHDUOv13P16lUmjB/3yHbUru2U75d94sUwOTjMzMxwuzs+cW+ANDMzk5iYGAB86/oaBlHj4+O5ePEicH98w9HRkTJlyj5yH3Z2dlSqXNnwKlKkCHNmzwbgzTff5KuvhxrKli1blk1h4SwMXsSIkaMoUqQIer2eRo0aGy5Rztzt/j9Ip9MxY+YsvL29KV++PKVLl2bbtq3cuHEDgM8/70uLFi0oU6YMPr6+jP7mW1MPEdevXycpKSnX68FLuYeZ+sM0w/HbtGkjn3/Wh3p1fenapTNBCxZw9epVk+sBELJkCQB+fv582qsXdnZ2WFpa0q17d5o2bQbAH6v+yLWevb09I0eNxt7enoIFC9K6dRuaNW8OwN69e7l8+bKmeohXk6aPB18fX3Zs387FixdJTEwkMTGRW7duUahQITw8PLGysqJkyVIkJV0icvdumrdowaGDh3LWrVv3MVs3lpWVxRdfDCE5ORlLS0smTppsGB+5p0iRIlhZWXHkyBHi4s5w4cIFTp44QVJSEgCZmbdzbbdo0aKUL1/eaF7sqfvdaj9/f6Nlbm5u2NjYmPStxbQfprJixYpc821sbNi6bfsj1y1WrBg/TJvG8ePH2LRpE1F793L8+HEOHz7M4cOHCQpawIiRo2jQoMFj65GRkcGJEycA2Lw5gj69exstT0g4D8CpUydzrevi4mroWd7j7e3N6j/+QClFbGys0diReD1pC466voy721uNiorifHw8AM4uLlhZWeWU8fVh+fLlRO6JpHyFCmRmZuTM99E2vjHthx8MvZmvvv6aihUr5iqzYP58goMXGp3Udvb2WFhYGMZV/q5AgQK55l2/cd3wvkiRIkbLdDod9vaFX9jXnW+9VY233qoGwM2bN9m+bRvz5s3l7NmzDBv6NeXLl6dq1aqP3MbVq1eMpnfvzvur0bzaZGdnm2uevd39r8uvX7+ea7l4/WgKjpIlS1G5chViY08RHR3FmTNnAKj7wH0evr51Wb58OXv37sWxgiOQ84lbq3Ztk/ezadNGfvnlfwC0bNXKMBD7oBUrVvDf//4E5IxxNGvWnCpVq+DgUJI2bVpz7uxZk/dnZ2tneJ+SkmL0iZqdnc2Vv52IDzN8xEiGjxhp8n7vOX36NBcu5Nzg5e3tYxiwtLGxoWmzZlSvXp3WrVtx+/ZtwsPCHhscdg+c6P37D+DfH35ocl3yuqx6cJ69vV2u5eL1o/mWc5+7A5xbt27l5N3usG/d+70J9zp1sLCw4Pq1a4bBSQ9PT5MHzeLi4vhm9GgAqlatyhdffJlnub17cgZlKzg6MnbceHx8fSlZshRZWVn8lZKiqU1VqlQxvN+8OcJoWWRkJGnP+a7MXTt30q9vX/r17cveB+6Juedy8gPjCrpci4GcS7t7LC0tcXR0BGDPntz3Uuzdu5fNmyM4depUrmUxMTFcuWIclBs3bczZtU5HpUqVH9cc8RrQHBy+d79STUtNRSlFxYoVjQY9zczMDCP79wYcTb1MSUtNZdDAAaSlpVGgQAE+/uQTzsfHczo21vC611W2scnpUl9OSjKcAOnp6YwcMdywX5PbVLcutrY52/tx+nRWr15NYmIi27dvY/Qo7T0IrfwD/A2XUP379+enn35ky5YtbN26lTmzZzP4gXtJvLy8De+tbe7fCLbi9985duyY4SvawMCceyh27drF9GnTSElJIS01lfXr19Ov7+cMGjiQRcHBueqSnp7OwAH9+fPPw8THxzN1yhR27tgBgLu7u4xvCEDjpQrAO+/Uws7enuvXrgF5D3r61vVl+/ZtQM6nlJe3d64yeVkQtICzdy8xsrKyGDRwYK4yw4ePoGWrVrz73nusWPE76enpdOzQnqJFi3Ljxg3s7OxwdHQ0bMcUNjY2fPnlVwwfPswQPvfU8fDAwsKChIQEk7enVZkyZfnqq68ZO3YMmZkZBC1YkGe57j16UKtWLcO0t7c35ubmZGRkMH/+PObPn8cvixfz1lvVaN+hAzExMUREhBMcvJDg4IVG2ypdujSfff55rn14eHpy6uRJunTubDTf3t6eL7786ukbK14Jmnscer0eL09Pw/SDf8eS17zqNWpQtGhRk7adetP0S4KaNWvy40//pXZtJ8zNzcnOzsbLy4s5c+dRrFgxk7dzT5OmTfnxx59wdnbGysoKW1tb2rQJZPLk7ynwAu5NaNW6NUtCQmjZqhXlypXDwsICMzNzSpcuTZMmTZg7bz69e/cxWqdkyVLMmDnTcAysra25dDHnxja9Xs/ESZMYOWoUtWrXxs7ODjMzMypUqEDnLl343y+L8+w9FClShAVBC6lTpw7m5uYULlyYRo0aE7zo50fe/CVeLzp5kpuA+7ecN23WjO++G5Pf1REvOfkhHyGEZhIcQgjNJDiEEJrJGIcQQjPpcQghNJPgEEJoJsEhhNBMgkMIoZkEhxBCMwkOIYRmEhxCCM0kOIQQmklwCCE0k+AQQmgmwSGE0EyCQwihmQSHEEIzCQ4hhGYSHEIIzSQ4hBCaSXAIITST4BBCaCbBIYTQTIJDCKGZBIcQQjMJDiGEZhIcQgjNTAqOCePH8+UXXxjNOx0bi4uzU66noK9YsYKW778HwJDBg5g9e9azqelDBAcvpGuXzo8vKEy2ZPFimjdripenB716fUpiYmJ+V0m8ZEwKDlc3N/bvjzGaFxMTY/Tfew4c2I+rm9szqh40bNiAPXv2PHR5zZrv0LBRo2e2v9ddWFgYP/30IwMGDiJ06TIK29szeNDA/K6WeMmYFhyurqSkpJCQkGCYFxMTQ40aNTh44ADZ2dmG+ftjYnB1fXbB8TjOzs588MG/X9j+XnWnTp0ksG1bAgICKFeuHH0++5wTJ06QlJSU31UTLxGTgsPe3p5KlSqz/4Hexf79MXTv0ZPMzExiY2MB+L//+z8SEhJwdXU1lMvMzGTE8GF4e3nSuFFDli1darTt33/7jbaBbfD08KBdu7aEh4cDcOPGDVycnfgrJYVen/6Hpk0a51m30NAQPv6op2F6T2QkbVq3wtOjDm0D27B7964819uwYQONGjYwCr2LFy/i6uLMuXPnADh8+DDdu3fDy9ODd1s0Z8nixUbb8Perz77oaMN0UlISLs5O3Lhxw7B86dJQ2rRuRbOmTfOsx5DBg5g1ayaDBw3Cy9ODZk2bsnbtGpOO0b31Z/z3v3zWpzeeHh506tiBuLg4pk37Ab/69WjYIICQkBCj7R3580+6d++Gt5cnLd9/j9DQ+8s//bQX/fsPMEwnX74MgK2NTZ71F68pZaKJEyeo0aNGKaWUio+PV+5uriotLU3955OP1ZIlS5RSSm3cuEG1atXSsM7gQQNVgL+fCglZos6dO6d++eV/ysXZScWeOqWUUiosLEzVq+urIiLCVXJyslqx4nflUcddJScnK6WUysjIUHV9fdS2bVtVRkZGnvUKCVmiPurZQyml1IULF5S7m6tat26dSklJUatX/6Hq+vqoGzdu5FovPT1deXt5qn379hnm/bxokfr3B52UUkolJJxXPt5easH8+Soh4bzauXOnatSwgVr8yy+G8n7166noqCjD9KVLl5SzU211/fp1w/LANq3V/v0x6sqVK3nWf/Cggcrfr76KiAhXqTdvqmXLlil3N1d16dIlk47R4EEDVcMGASpy92517do1NXDAAFXX10fNnTNHpaamqoiIcOXu5qoSEs4bjpGPj7eaP2+eSkxMVDt37lQB/n4qNDQkV93OnTunWrV8X40YPizPuovXl8nfqri5unHgwH4AYmL2UaNGDSwtLY3GPw7s34/bA70NAFdXN9q370D58uXp1OkDqlSpwv4DBwAICAjg9xUr8fPzp3jx4rz/fkusra05duwoAGZmZpiZm2NmZo6Zmdlj63j58mUKFSqEj48PRYsWpXnzFmzYuAmbPD4tLSwsqFe/PuFhmwzzwsI20eRuz2Bp6FJcXd3o1r07ZcqUxcvLi/79BxAcvBCl4Tnd3bp3p3ZtJwoXLvzQMp5eXvj5+WNlbU1gYCAODg4cPnzYpGME4OvrSx0PD+zs7GjVujUZGRl079EDKysr/Pz8KVWqFKdO5fQKQ0ND8Pfzo3uPHrzxxhs57RowgJUrVhrVKSUlhS6dP6RGjbcZPmKkye0Vr4eCphZ0dnHh/Pnz/JWSQkxMDG5u7kBOMITe7Qrv37+fbt27G63nWNHRaLpYseKkp6UZpi9dukRoaAhxcXGcjTvLlStXyMjIfKLG1KxZkxpvv02rlu/j61sXD08P6tf3e2j5Jk2aMOa77xg0eAiXL1/myJEjTP5+CgAnT57A3b2OUflatWuTnJzMlb/+omixYibVqaRDyceWKVeunNG0vb29pmPkUPL+PgoWLIi5uTl6/f3PBHNzczIyMgA4cfw4e/fuZcuWLYblWVlZmJubG9Vh+fJllHBw4Jtvv0Wn05nUVvH6MDk47OzsDL2F/TExjLj7KVSjRg3S09M5evQop06dwsXFuMfxqP/pfvvtV6ZPm0Zg27Y0atSYihUr0r9f3ydsCuj1embNms2BA/uJ3B3J/HnzmT1rFsGLfs6z1+Hp6UVGZiaHDh7kyNEjuLq6Urx4cQCUenTd82Z6T8RUz/oYAXTu0oW2bdsZzXswaADS09OpV6+ehIbIk8nBATm9i/Xr1pGc/H+8U6tWzgYKFqR27dosmD8fR0dHihYtavL21q9bR5cuXQ29lMzMTJKTk43K6CDnLDZBWloaSUlJODk54+TkzMeffELjRg3Zs2cPAQEBucoXLFiQBgEN2BS2iaNHjtCyVSvDsn/9619ER0fTtVs3w7zoqChKlChBkbtttLS05MrVq4blCQnP/n4HU46RFlWqVOXy5cu88cYbhnlxcXG5gqNfv/5PvA/x6tN056irmysREeG8U+sdozEHVzc3Nm+O0Pw1bPkKFdi5cyenY2OJi4tj+LChucYPipcoQcTmCM6ePfvY7e3bF033bl3ZExnJ5cuXWbNmNdevX8exQoWHrtOkSRPWrlnD8ePH8fe/Hy7t2rfjwIH9zJk9m8TERHbt2sWUqVPo2rWb4VO4du3aBC1YQFxcHIcOHWLaD1M1td8UphwjLdq1b8+2rVtZuDCIxMQEoqOi6Pv556xfv86o3KRJE5k6ZcrTVl+8ojQFh7OzC3q9Hre/3eB1LzBc/jYw+jgD+g/AwaEEnTt/yGd9euPh4YmDg4NRmaFfDyU6KsroK9eH8fWtS4+ePfn22294790WLAoOZuzYcVSqXPmh6zg5O2Nubo6Pj4/R5UyZMmWZNXs2kZG7aRvYhnFjx/DxRx/ToWNHQ5m+/fpjbW1Fp44dGDd2DD0/+khT+01hyjHSomzZssyaNZsd23fQrm1bRo8eRdOmTenRw/j4no+PlztGxUPp1NN8fL0ClFK0fP89+vXvj5+ff35XR4h/BE1jHK+ac+fOEREezp07d/Dx8c3v6gjxj/FaB8en//kP5uZmjB07jkKFCuV3dYT4x3jtL1WEENrJ73EIITST4BBCaCbBIYTQTIJDCKGZBIcQQjMJDiGEZhIcQgjNJDiEEJpJcAghNJPgEEJoJsEhhNBMgkMIoZkEhxBCMwkOIYRmEhxCCM0kOIQQmklwCCE0k+AQQmgmwSGE0EyCQwihmQSHBnsiI9m4cUN+V0OIfGdycLg4O+Hi7MT/fv45z+Xdu3XFxdmJgQNe3WeODh36NV99+SXXr1/P76oIka80P1dl1aqV/PvDD43mxcfHc/DgwWdWqZfVyFGjuHb1GnZ2dvldFSHylebgOH36NEeOHKFGjRqGeatWrXymlXpZ+frWze8qCPFS0DTGUaJECfR6vVFQZGdns2b1akqWLGlU9t6ly4MPLp40cQIuzk6Eh4fn2na7toE0bdKYsE2beLdFc7y9PBkyeBA3b940lDl8+DAff9STur4+NGzYgLFjxnDr1i0AwsLCcHF2YuHCIHr37oWnhwf//qAT8fHxzJwxA3+/+jQI8OeXX/5ntN99+/bRrWsXvDw9eO/dFsyaNZPMzMw829+ubSCeHnUM03+sWkVgm9Z41HGnWdMmzJw546meJC/EP4Wm4ChZshRu7u5sWL/ecHJFRkZy+fJl3n3vPaOyjRo3AWDnzh2GeTt27MDKygofH588t3/9+nVmzpxBQIMGODpWJDw8nJkzZwCQlJTEJx9/RGJiIt26dcfL05Nff13OxAkTjLYRHBxM2TJl8PL24tixY/Ts0Z19+/bRqnVrsrKymDplCqdjYwE4ceIEvXt9SlLSZbp07Uq1atWYO2cO48aOfeyxiImJYdSokegLFKBXr95Uq16deXPnEhoSYuLRFOKfS/Olyrst3mVPZCSbN2+mcePGrFq5kkKFCtG4cRPmzZ1rKNegQQO+nzyJHTt20K5de86dPUtCQgJNmjbF3Nw8z23funWLiZMmU6lSJa5evUrDBgFE7d0LgIWFBZMmTcaxoiNlypQlOzubiIgI9uyJNNpGvXr1+OrroWRnZ9O4cSOuXbvG9B9/xMrKClsbW378cTrHjh+nUuXKLAwK4vbt2/wwbRqOjo4A3L59m9Wr/2DgoEHY2Ng89DicOXMGgEYNG9G5SxeysrLYunULld6spPWQCvGPozk4/Pz9sbK2ZtWqlXh6erJ16xbq1q2Lvb29UbnixYvj5OxMdFQUmZmZbN+xHYDGjRs/dNuFChWiUqWcE69w4cLY2tqSlpYGgL29PcWKF+O3X3/jzJkznDlzmrS0NCwsLY224VjBEQC9Xo+trS1Zd+5gZWVl2CZguLzZu3cPAB07tM9VlwsXLlC1atWH1tXb2xs7e3tmzpzBxo0bcHJyws/Pnwp3A0iIV5nm4LCwsKBhg4b88ccqghcuJDMzM9dlyj2NGjVmX3Q0UVFR7NyxA1tbWzw9vR66bZ1O99Bl27ZtZeCAAZQpUwZ//wAaNGzAD1Onaq2+ESsrK65evcrC4EW5lpUrV+6R65YuXZrly39l3bq1xOzbx4YNG1i+fDk9evSkV+/eT1UvIV52T3QDWIt33yU7O5uFC4MoWrQoXl7eeZYLCAhAr9ezceMG9u/fj5+fP4UKFXqiioaHhZGdnc2MmbP4vG9f/Or7GQ2cPom33qoGgJWlJTVr1qRmzZqcPx/PiePHH1vPE8ePs33bNpo3b8GUqT+w/NffANiyZTMASimOHz9GdnZ2ntMAZ8+eJTU19anaIER+eKLgcHJyokyZsgA0bdqMAgUK5FmuSJEiuLm7s2b1am7fvk2jxo2euKLFi5cA4Mfp0wkNDaFXr0+Bh/dQTNG5Sxf0ej29e/di2rQfGDVqJCNHjGDdunUULPjoztjpM6f59ttvGNC/H0sWL2bK95MBqPnOOwAsXvwLH3TqxNy5c/KcPn78GIFtWtO/X9+naoMQ+eGJgkOn09G8RXMgp/fxKI0aNUYpReHChXF3r/PIso/S86OPaN68OZF7IglasIAmTZtRrlzZJ94eQM2aNfnpvzMoXbo0oSEhbN26lWbNmjHFhEugZs2aM3DQIK5evcr06dOIiYmhU6cPGDLkCwDKvFEGGxsbKtwdc/n7tL19YYoWLUrlylWeqg1C5Aedes43Hmzfvo1+ffvSpk0gXw8d+jx3JYR4QTQPjpoqPT2dyZMnsXvXLvR6PR06dnxeuxJCvGDP7a9jT544wdo1aylYsBDffPMtb7755vPalRDiBXvulypCiFeP/B6HEEIzCQ4hhGYSHEIIzSQ4hBCamfR17I7t21gaGsKNGzeed32EEPnI1taWdu074POYH60yKTiWhobQf+AgKlaUr1SFeJXFxZ1h6veTHxscJl2q3LhxQ0JDiNdAxYpvmnRlIWMcQgjNJDiEEJpJcAghNJPgEEJoJsEhhNBMgkMIoZkEhxBCMwkOIYRmzzw4rl27xoTx42nUsAGeHnX48N8fsHv3rme9m1wOHz6Mj/fDH73wd/5+9dkXHW2Y/vPPw7Rv1w5vL0+OHTv2PKooxCvjmQZHWmoqPbp349ChQwwZ8gUzZs7E09OL/v36vfQPph7z3XfUrl2L4EWL+Ne//pXf1RHipfZMf3N03rx56HQ65i9YgIWFBQBOTs6UKl2K8ePG4efnj62t7bPc5TOTkpKCv3+A/Oq4ECZ4pj2ONWtW0617d0No3PP++y1xdnbh+PH7lwC///YbbQPb4OnhQbt2bY2eYD9k8CBmzZrJ4EGD8PL0oFnTpqxdu8Zom1FRe+nUqSOeHnXo1rULSUlJRstv3brF9GnTaNa0CV6eHnzyyceGh00/6Pz587g4O5GSkkKvXp8aPY1eCPEQygRdO//7sWWSk5OVs1NtdfHixceWDQsLU/Xq+qqIiHCVnJysVqz4XXnUcVfJyclKKaUGDxqo/P3qq4iIcJV686ZatmyZcndzVZcuXVJKKRUXF6c86tRRi4KDVUJCggoPD1PvvdtCeXt5GvYxYfx41b5dW3X48CGVlJSkxo75TrVr29aw3K9+PRUdFaWys7NVRkaGquvro7Zt26oyMjJMOSRCvLJMOd+fWY8j9e7jGO1MuBQJCAjg9xUr8fPzp3jx4rz/fkusra05duyooYynlxd+fjkPuA4MDMTBwYHDhw8DsGzZUnx9ffiwc2fDs2T//vzagYMGMXfefN5+uyYODg6079CR2NhThodY36PT6TAzM8PM3BwzM3PMzMye9lAI8cp7ZmMcdnefVn/9xg2srK0BWL9+PaNHjTSU6dy5C5/26gXApUuXCA0NIS4ujrNxZ7ly5QoZGZmGsn9/6LO9vT3pd0/607Gn8fTyNFpevXoNo2mdTseBA/uJjo4m/lw8J0+eACAzM9Pw9HohxJN5Zj2OwoULU6JECfbHxBjm+fr6siQklCUhoVSpUsUw9vHbb7/y6X8+4c6dOzRq1Jhx48dTtqy2xzlm3ckyms7OMp4ePmwoU77/nmJFixEYGMiEiROfsGVCiL97ZsGh0+lo2qwZQUELuHXrFgDW1tY4OjpiaWlBbGwsNWvWBGD9unV06dKVPn0+IyAggLJly5KcnGzyvipXqcy+mH1G844cPWJ4n52dzYYNGxj9zbd07tIFbx8fMjNvP4NWY+polwAABZBJREFUCiHgGX+r8lHPj8jOzqZnj+5s2rSRI3/+yapVK+nZowd16njg6uYGQPkKFdi5cyenY2OJi4tj+LChKA3PhWob2JaYffuYP38eiYmJhIWFsWHDhvuN0uspV64c69auJTExgUOHDvH95MnPsqlCvNaeaXBYWVuzYEEQtWrVYuqUqfTs2YOFQUG0bNWKSQ+cuAP6D8DBoQSdO3/IZ3164+HhiYODg8n7qeDoyA/TphO2aROBbVoTsmQJQwYPMSrzw7TpHDl6hMA2gYwfN5Zu3bo9s3YK8boz6RGQ3bp8SFDwzy+iPkKIfGbK+S5/5CaE0EyCQwihmQSHEEIzCQ4hhGYSHEIIzSQ4hBCaSXAIITQzKThsbW2JizvzvOsihMhncXFnTPqxLZP+OrZd+w5M/X6ySQ+jFUL8c9na2tKufYfHljPpzlEhhHiQjHEIITST4BBCaCbBIYTQTIJDCKGZBIcQQjMJDiGEZhIcQgjNJDiEEJpJcAghNJPgEEJoJsEhhNBMgkMIoZkEhxBCMwkOIYRmEhxCCM0kOIQQmklwCCE0k+AQQmgmwSGE0Myk4AgKCsLW1hadTicvDS9bW1uCgoKe97+hEC+cST9WbGtry82bN19EfV45NjY28uvw4pVjUnDodLoXUZdXlvyQvHjVyBiHEEIzCQ4hhGYSHEIIzSQ4hBCaSXAIITST4BBCaCbBIYTQ7KUJji1btpCdnY23t7fRfA8PD5RSLFy4MH8qJoTI5aUJDsi50Wzu3LmYmZk9t30ULlwYpRRhYWHPbR9CvOpequAAqFatGkOHDs3vagghHuGlC46zZ8/y5ZdfUr169YeWqVevHrt27SItLY0zZ84wevRozM3NARg2bBhKKT7++GMAihYtyrVr1zh+/Dhvv/02V65cASAgIAClFD4+Ps+/UUK8Yl664OjVqxd6vZ558+ah1+euXu3atdm4cSNly5Zl4sSJ7Nu3jxEjRjBz5kwAvv/+e86fP8+IESOwsLDgq6++ws7OjgEDBnDhwgXGjBlj2NbgwYOJi4t7YW0T4pWhTAA899eWLVuUUkqVKlVKTZgwQSmlVJ8+fZSHh4dSSqmFCxcqQIWEhCillKpVq5aysLBQFhYWauXKlerOnTvK3t5eAapTp05KKaWmTJmi0tPT1fr16w37KVy4sFJKqbCwsBfSLhMPsRD/KC9lcFhaWqpTp06p69evq7Zt2yql7gdHcnLyQ+tZq1YtBSidTqd2796tlFLq9u3bqlq1ahIcQjxDBfPqheS39PR0PvnkE8LDw5k8ebLRsps3b1K8eHE8PT1zrRcbG2t4/+BljvwsgBDP1ks3xnFPREQEQUFBlC9f3mh+TEwMkBMgkZGRREZGUrlyZZycnMjMzASgS5cuuLu7M2fOHLKyspg+fbphfXX3tzEKFSr0gloixCvIlG4JL/hS5d68IkWKqEuXLiml7l+qeHh4qDt37qjExEQ1ceJEFRQUpLKystT27dsVoGxtbdXFixfV+fPnlaWlpZo0aZJSSqnWrVsrQOn1enX16lWVkZGh5s6dq0qWLCmXKkJo9FIHB6DatWunlLofHIBq0KCB2rVrl0pLS1MpKSkqODhYFStWTAFq4sSJSimlOnfubBjTSE5OVnFxccrCwkIBqnXr1urYsWMqPT1d+fv7S3AIoZH8dOALYMIhFuIf5aUd4xBCvLwkOIQQmklwCCE0k+AQQmgmwSGE0EyCQwihmQSHEEIzCQ4hhGYmBYeNjc3zrscrS46deBWZFBzTp0+XE+AJ2NjYGP2BnRCvCpNuORdCiAfJGIcQQjMJDiGEZhIcQgjNJDiEEJpJcAghNJPgEEJoJsEhhNBMgkMIoZkEhxBCMwkOIYRmEhxCCM0kOIQQmklwCCE0k+AQQmj2/7qkBOwu7AsrAAAAAElFTkSuQmCC)"></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cypress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Cypress</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># First visit, create an empty form card for our wizard</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;wizard&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 4&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    wizard </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;wizard&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Get a reference to the wizard form</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        wizard</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Wizard - Step 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;What is your name?&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;nickname&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;My name is...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Gandalf&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buttons</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Next&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">nickname </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">nickname</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        wizard</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Wizard - Step 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&quot;Hi </span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">nickname</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">! How do you feel right now?&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;feeling&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;I feel...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;magical&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buttons</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Next&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        wizard</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Wizard - Done&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&quot;What a coincidence, </span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">client</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">nickname</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">! I feel </span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">feeling</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> too!&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buttons</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Try Again&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        wizard</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Wizard Example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Let&#x27;s have a conversation, shall we?&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buttons</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Of course!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># First visit, create an empty form card for our wizard</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;wizard&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 4&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    wizard </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;wizard&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Get a reference to the wizard form</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        wizard</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Wizard - Step 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;What is your name?&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;nickname&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;My name is...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Gandalf&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buttons</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Next&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">nickname </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">nickname</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        wizard</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Wizard - Step 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;Hi </span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">nickname</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">! How do you feel right now?&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;feeling&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;I feel...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;magical&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buttons</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Next&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">step3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        wizard</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Wizard - Done&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;What a coincidence, </span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">client</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">nickname</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">! I feel </span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">q</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">args</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token string-interpolation interpolation">feeling</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> too!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buttons</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Try Again&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        wizard</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Wizard Example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&quot;Let&#x27;s have a conversation, shall we?&quot;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buttons</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Of course!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@cypress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Walk through the wizard&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">try_walk_through</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Cypress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">visit</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">click</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">should</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;contain.text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;What is your name?&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;nickname&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">clear</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Fred&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">click</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">should</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;contain.text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Hi Fred! How do you feel right now?&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;feeling&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">clear</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;quirky&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">click</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">should</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;contain.text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;What a coincidence, Fred! I feel quirky too!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/wizard.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/todo"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« To-do List App</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/issue-tracker"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Issue Tracker »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/174d8305.dfb7e5b4.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@cypress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Walk through the wizard&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">try_walk_through</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Cypress</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">visit</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">click</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">should</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;contain.text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;What is your name?&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;nickname&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">clear</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Fred&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">click</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">should</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;contain.text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Hi Fred! How do you feel right now?&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;feeling&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">clear</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;quirky&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;step3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">click</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cy</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">locate</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">should</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;contain.text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;What a coincidence, Fred! I feel quirky too!&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/examples/wizard.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/examples/todo"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« To-do List App</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/examples/issue-tracker"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Issue Tracker »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/174d8305.6a9b0564.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/expressions/index.html b/docs/docs/expressions/index.html
index 3c8fd098e6..94c529f9fb 100644
--- a/docs/docs/expressions/index.html
+++ b/docs/docs/expressions/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Data-binding | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Data-binding | H2O Wave"><meta data-react-helmet="true" name="description" content="Some cards in the Wave SDK support data-binding expressions, a mini language that allows computing a card&#x27;s attribute from the card&#x27;s data."><meta data-react-helmet="true" property="og:description" content="Some cards in the Wave SDK support data-binding expressions, a mini language that allows computing a card&#x27;s attribute from the card&#x27;s data."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/expressions"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/expressions"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/3b464fa6.41841ff9.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/3b464fa6.92e89dc0.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Data-binding</h1></header><div class="markdown"><p>Some cards in the Wave SDK support <em>data-binding expressions</em>, a mini language that allows computing a card&#x27;s attribute from the card&#x27;s data.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="rationale"></a>Rationale<a aria-hidden="true" tabindex="-1" class="hash-link" href="#rationale" title="Direct link to heading">#</a></h2><p>A card&#x27;s attribute can be set directly when created:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;donut&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">small_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Donut&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2.99&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>The attribute can be updated later using:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">value </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;3.49&#x27;</span></div></div></div></div></div><p>The above approach works fine, but sometimes it&#x27;s prudent to separate the data (what is displayed) from the presentation (how it is displayed). This is especially important if you care about <a href="https://en.wikipedia.org/wiki/Internationalization_and_localization" target="_blank" rel="noopener noreferrer">internationalization</a> and displaying language-sensitive number, date, and time formatting.</p><p>The above example can be rewritten by pulling the donut price out into <code>data</code>, and pointing the <code>value</code> to the <code>data</code> using an expression:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;donut&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">small_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Donut&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">price</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">2.99</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>The attribute can be update later using:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">price </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">3.49</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="syntax"></a>Syntax<a aria-hidden="true" tabindex="-1" class="hash-link" href="#syntax" title="Direct link to heading">#</a></h2><p>Data-binding expressions are indicated with a leading <code>=</code> (similar to spreadsheet formulae). For example, <code>&#x27;={{price}}&#x27;</code> is an expression, but <code>&#x27;{{price}}&#x27;</code> is not.</p><p>Placeholders are enclosed between <code>{{</code> and <code>}}</code>. The placeholder <code>price</code> in <code>={{price}}</code> points to <code>data.price</code>. If <code>data.price</code> is <code>2.99</code>:</p><ul><li><code>={{price}}</code> translates to <code>2.99</code>. </li><li><code>=${{price}}</code> translates to <code>$2.99</code>. </li><li><code>=Donuts cost ${{price}}</code> translates to <code>Donuts cost $2.99</code>. </li></ul><p>An expression can have multiple placeholders. For example, <code>={{product}} costs {{price}}</code></p><p>If an expression has a placeholder and nothing else, the <code>{{</code> and <code>}}</code> can be elided. For example, <code>=price</code> is shorthand for <code>={{price}}</code>.</p><p>Functions can be applied to placeholders using the general form <code>{{function_name placeholder param1=arg1 param2=arg2 ...}}</code>. For example <code>{{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}</code> applies the formatting function <code>intl</code> to <code>price</code> with arguments <code>minimum_fraction_digits=2</code> and <code>maximum_fraction_digits=2</code>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="functions"></a>Functions<a aria-hidden="true" tabindex="-1" class="hash-link" href="#functions" title="Direct link to heading">#</a></h2><p>Expressions currently support only one function, <code>intl</code>, which provides language-sensitive number, date, and time formatting using the <a href="https://tc39.es/ecma402/" target="_blank" rel="noopener noreferrer">ECMAScript Internationalization API</a>.</p><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p>Options in the <a href="https://tc39.es/ecma402/" target="_blank" rel="noopener noreferrer">Internationalization API</a> are <code>camelCased</code>, but you can use both <code>camelCased</code> and <code>snake_cased</code> options in data-binding expressions. For example, both <code>maximum_fraction_digits</code> and <code>maximumFractionDigits</code> are valid.</p></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/expressions.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/realtime"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Realtime Sync</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/files"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Files »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#rationale" class="table-of-contents__link">Rationale</a></li><li><a href="#syntax" class="table-of-contents__link">Syntax</a></li><li><a href="#functions" class="table-of-contents__link">Functions</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/3b464fa6.41841ff9.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Data-binding</h1></header><div class="markdown"><p>Some cards in the Wave SDK support <em>data-binding expressions</em>, a mini language that allows computing a card&#x27;s attribute from the card&#x27;s data.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="rationale"></a>Rationale<a aria-hidden="true" tabindex="-1" class="hash-link" href="#rationale" title="Direct link to heading">#</a></h2><p>A card&#x27;s attribute can be set directly when created:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;donut&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">small_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Donut&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2.99&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>The attribute can be updated later using:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">value </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;3.49&#x27;</span></div></div></div></div></div><p>The above approach works fine, but sometimes it&#x27;s prudent to separate the data (what is displayed) from the presentation (how it is displayed). This is especially important if you care about <a href="https://en.wikipedia.org/wiki/Internationalization_and_localization" target="_blank" rel="noopener noreferrer">internationalization</a> and displaying language-sensitive number, date, and time formatting.</p><p>The above example can be rewritten by pulling the donut price out into <code>data</code>, and pointing the <code>value</code> to the <code>data</code> using an expression:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;donut&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">small_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Donut&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=${{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">price</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">2.99</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>The attribute can be update later using:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">price </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">3.49</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="syntax"></a>Syntax<a aria-hidden="true" tabindex="-1" class="hash-link" href="#syntax" title="Direct link to heading">#</a></h2><p>Data-binding expressions are indicated with a leading <code>=</code> (similar to spreadsheet formulae). For example, <code>&#x27;={{price}}&#x27;</code> is an expression, but <code>&#x27;{{price}}&#x27;</code> is not.</p><p>Placeholders are enclosed between <code>{{</code> and <code>}}</code>. The placeholder <code>price</code> in <code>={{price}}</code> points to <code>data.price</code>. If <code>data.price</code> is <code>2.99</code>:</p><ul><li><code>={{price}}</code> translates to <code>2.99</code>. </li><li><code>=${{price}}</code> translates to <code>$2.99</code>. </li><li><code>=Donuts cost ${{price}}</code> translates to <code>Donuts cost $2.99</code>. </li></ul><p>An expression can have multiple placeholders. For example, <code>={{product}} costs {{price}}</code></p><p>If an expression has a placeholder and nothing else, the <code>{{</code> and <code>}}</code> can be elided. For example, <code>=price</code> is shorthand for <code>={{price}}</code>.</p><p>Functions can be applied to placeholders using the general form <code>{{function_name placeholder param1=arg1 param2=arg2 ...}}</code>. For example <code>{{intl price minimum_fraction_digits=2 maximum_fraction_digits=2}}</code> applies the formatting function <code>intl</code> to <code>price</code> with arguments <code>minimum_fraction_digits=2</code> and <code>maximum_fraction_digits=2</code>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="functions"></a>Functions<a aria-hidden="true" tabindex="-1" class="hash-link" href="#functions" title="Direct link to heading">#</a></h2><p>Expressions currently support only one function, <code>intl</code>, which provides language-sensitive number, date, and time formatting using the <a href="https://tc39.es/ecma402/" target="_blank" rel="noopener noreferrer">ECMAScript Internationalization API</a>.</p><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p>Options in the <a href="https://tc39.es/ecma402/" target="_blank" rel="noopener noreferrer">Internationalization API</a> are <code>camelCased</code>, but you can use both <code>camelCased</code> and <code>snake_cased</code> options in data-binding expressions. For example, both <code>maximum_fraction_digits</code> and <code>maximumFractionDigits</code> are valid.</p></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/expressions.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/background"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Background Tasks</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/files"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Files »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#rationale" class="table-of-contents__link">Rationale</a></li><li><a href="#syntax" class="table-of-contents__link">Syntax</a></li><li><a href="#functions" class="table-of-contents__link">Functions</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/3b464fa6.92e89dc0.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/files/index.html b/docs/docs/files/index.html
index b0418c302f..e417cb48c6 100644
--- a/docs/docs/files/index.html
+++ b/docs/docs/files/index.html
@@ -5,33 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Files | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Files | H2O Wave"><meta data-react-helmet="true" name="description" content="Wave provides four functions to manage files from your app:"><meta data-react-helmet="true" property="og:description" content="Wave provides four functions to manage files from your app:"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/files"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/files"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/854481fc.ce513a9b.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/854481fc.873ddd4f.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Files</h1></header><div class="markdown"><p>Wave provides four functions to manage files from your app:</p><ul><li><code>ui.file_upload()</code> allows uploading files from the browser to the Wave server.</li><li><code>q.site.upload()</code> uploads files from your app to the Wave server.</li><li><code>q.site.download()</code> downloads a file from the Wave server to your app.</li><li><code>q.site.unload()</code> deletes a file from the Wave server.</li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="accept-file-uploads"></a>Accept file uploads<a aria-hidden="true" tabindex="-1" class="hash-link" href="#accept-file-uploads" title="Direct link to heading">#</a></h2><p>Use a file upload component (<code>ui.file_upload()</code>) to accept file uploads from the browser. Files get uploaded from the browser and get stored on the Wave server. Use <code>q.site.download()</code> to download files from the Wave server to your app.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    paths </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">datasets</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> paths</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Upload datasets&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">file_upload</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;datasets&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Upload&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> multiple</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> path </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> paths</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">            local_path </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">download</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Do something with the file located at local_path</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># ...</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/uploads&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p>After a file is uploaded from the browser, it is stored forever on the Wave server. If you don&#x27;t need the file any longer, use <code>q.site.unload()</code> to delete it from the Wave server. </p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="provide-file-downloads"></a>Provide file downloads<a aria-hidden="true" tabindex="-1" class="hash-link" href="#provide-file-downloads" title="Direct link to heading">#</a></h2><p>Use <code>q.site.upload()</code> to upload files from your app to the Wave server. Use the returned paths to display download links in the browser.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    download_path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">upload</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;results.csv&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;download&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">link</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Download Results&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> path</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">download_path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/downloads&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p><code>q.site.upload()</code> accepts a list of file paths, so you can upload multiple files at a time.</p></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/files.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/expressions"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Data-binding</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/plotting"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plots »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#accept-file-uploads" class="table-of-contents__link">Accept file uploads</a></li><li><a href="#provide-file-downloads" class="table-of-contents__link">Provide file downloads</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/854481fc.ce513a9b.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Files</h1></header><div class="markdown"><p>Wave provides four functions to manage files from your app:</p><ul><li><code>ui.file_upload()</code> allows uploading files from the browser to the Wave server.</li><li><code>q.site.upload()</code> uploads files from your app to the Wave server.</li><li><code>q.site.download()</code> downloads a file from the Wave server to your app.</li><li><code>q.site.unload()</code> deletes a file from the Wave server.</li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="accept-file-uploads"></a>Accept file uploads<a aria-hidden="true" tabindex="-1" class="hash-link" href="#accept-file-uploads" title="Direct link to heading">#</a></h2><p>Use a file upload component (<code>ui.file_upload()</code>) to accept file uploads from the browser. Files get uploaded from the browser and get stored on the Wave server. Use <code>q.site.download()</code> to download files from the Wave server to your app.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/uploads&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    paths </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">datasets</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> paths</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Upload datasets&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">file_upload</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;datasets&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Upload&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> multiple</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> path </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> paths</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">            local_path </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">download</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;.&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Do something with the file located at local_path</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># ...</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p>After a file is uploaded from the browser, it is stored forever on the Wave server. If you don&#x27;t need the file any longer, use <code>q.site.unload()</code> to delete it from the Wave server. </p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="provide-file-downloads"></a>Provide file downloads<a aria-hidden="true" tabindex="-1" class="hash-link" href="#provide-file-downloads" title="Direct link to heading">#</a></h2><p>Use <code>q.site.upload()</code> to upload files from your app to the Wave server. Use the returned paths to display download links in the browser.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/downloads&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    download_path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">upload</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;results.csv&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;download&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">link</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Download Results&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> path</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">download_path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p><code>q.site.upload()</code> accepts a list of file paths, so you can upload multiple files at a time.</p></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/files.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/expressions"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Data-binding</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/plotting"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Plots »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#accept-file-uploads" class="table-of-contents__link">Accept file uploads</a></li><li><a href="#provide-file-downloads" class="table-of-contents__link">Provide file downloads</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/854481fc.873ddd4f.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/getting-started/index.html b/docs/docs/getting-started/index.html
index d7d9362969..95f376176f 100644
--- a/docs/docs/getting-started/index.html
+++ b/docs/docs/getting-started/index.html
@@ -5,34 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Introduction | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Introduction | H2O Wave"><meta data-react-helmet="true" name="description" content="H2O Wave lets you build and deploy amazing, realtime analytics with dramatically less effort."><meta data-react-helmet="true" property="og:description" content="H2O Wave lets you build and deploy amazing, realtime analytics with dramatically less effort."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/getting-started"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/getting-started"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/d589d3a7.36aebee9.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/d589d3a7.7779cab6.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Introduction</h1></header><div class="markdown"><p>H2O Wave lets you build and deploy amazing, realtime analytics with dramatically less effort.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="what-is-h2o-wave"></a>What is H2O Wave?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#what-is-h2o-wave" title="Direct link to heading">#</a></h2><p>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.</p><p>It excels at capturing data, visualizations, and graphics from multiple sources and broadcasting them live over the web.</p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/getting-started__dashboard-6952c89912f2a5fd750d8f6f33cc422a.mp4" type="video/mp4"></video><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="what-can-i-do-with-it"></a>What can I do with it?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#what-can-i-do-with-it" title="Direct link to heading">#</a></h2><p>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&#x27;s reload button.</p><p>You can use H2O Wave for:</p><ul><li>Dashboards and visualizations for live monitoring.</li><li>Live information displays: news, tickers, health, or performance data.</li><li>Apps that require instant notifications, updates, events, or alerts.</li><li>Apps that involve messaging: chat, bots, etc.</li><li>Collaborative apps: whiteboards, sharing, etc.</li></ul><p>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.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="how-do-i-use-it"></a>How do I use it?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#how-do-i-use-it" title="Direct link to heading">#</a></h2><p>H2O Wave&#x27;s mental model is simple, but powerful<sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup>: </p><ol><li>Your instance holds a collection of pages.</li><li>To change a page, simply grab a reference to a page, change it, and save it. </li></ol><p>That&#x27;s it. Your changes are now visible to everyone.</p><p>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. </p><p>The API is concise and elegant, freeing you to create in broad strokes, tackling high level ideas first and polishing up the details later.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="show-me-some-code"></a>Show me some code!<a aria-hidden="true" tabindex="-1" class="hash-link" href="#show-me-some-code" title="Direct link to heading">#</a></h2><p>Here&#x27;s a bean counter. Clicking the button increments the bean count:</p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/getting-started__beans-99644dd0b9c4ddeb30b94cb8668781b4.mp4" type="video/mp4"></video><p>And here&#x27;s how it&#x27;s written:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Introduction</h1></header><div class="markdown"><p>H2O Wave lets you build and deploy amazing, realtime analytics with dramatically less effort.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="what-is-h2o-wave"></a>What is H2O Wave?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#what-is-h2o-wave" title="Direct link to heading">#</a></h2><p>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.</p><p>It excels at capturing data, visualizations, and graphics from multiple sources and broadcasting them live over the web.</p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/getting-started__dashboard-6952c89912f2a5fd750d8f6f33cc422a.mp4" type="video/mp4"></video><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="what-can-i-do-with-it"></a>What can I do with it?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#what-can-i-do-with-it" title="Direct link to heading">#</a></h2><p>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&#x27;s reload button.</p><p>You can use H2O Wave for:</p><ul><li>Dashboards and visualizations for live monitoring.</li><li>Live information displays: news, tickers, health, or performance data.</li><li>Apps that require instant notifications, updates, events, or alerts.</li><li>Apps that involve messaging: chat, bots, etc.</li><li>Collaborative apps: whiteboards, sharing, etc.</li></ul><p>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.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="how-do-i-use-it"></a>How do I use it?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#how-do-i-use-it" title="Direct link to heading">#</a></h2><p>H2O Wave&#x27;s mental model is simple, but powerful<sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup>: </p><ol><li>Your instance holds a collection of pages.</li><li>To change a page, simply grab a reference to a page, change it, and save it. </li></ol><p>That&#x27;s it. Your changes are now visible to everyone.</p><p>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. </p><p>The API is concise and elegant, freeing you to create in broad strokes, tackling high level ideas first and polishing up the details later.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="show-me-some-code"></a>Show me some code!<a aria-hidden="true" tabindex="-1" class="hash-link" href="#show-me-some-code" title="Direct link to heading">#</a></h2><p>Here&#x27;s a bean counter. Clicking the button increments the bean count:</p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/getting-started__beans-99644dd0b9c4ddeb30b94cb8668781b4.mp4" type="video/mp4"></video><p>And here&#x27;s how it&#x27;s written:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">global</span><span class="token plain"> bean_count</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Was the &#x27;increment&#x27; button clicked?</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">increment</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display a form on the page</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Beans!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Save the page</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/counter&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="whats-included"></a>What&#x27;s included?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#whats-included" title="Direct link to heading">#</a></h2><p>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.</p><p>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 <em>Wave Server</em>) is written in Go, a ~10MB static executable without runtime dependencies<sup id="fnref-2"><a href="#fn-2" class="footnote-ref">2</a></sup>. It currently ships with a Python language driver, but is language-agnostic (an R language driver is under development).</p><p>The Wave Server stores all the content and acts as a hub between your user&#x27;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.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">                                      +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                       +-------------&gt;+ app1.py |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                       |              +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                       |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+---------+       +----+-----+        +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">| Browser +------&gt;+  Server  +-------&gt;+ app2.py |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+---------+       +----+-----+        +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                       |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                       |              +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                       +-------------&gt;+ app3.py |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                                      +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/counter&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">global</span><span class="token plain"> bean_count</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Was the &#x27;increment&#x27; button clicked?</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">increment</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display a form on the page</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_xl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Beans!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Save the page</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="whats-included"></a>What&#x27;s included?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#whats-included" title="Direct link to heading">#</a></h2><p>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.</p><p>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 <em>Wave server</em>) is written in Go, a ~10MB static executable without runtime dependencies<sup id="fnref-2"><a href="#fn-2" class="footnote-ref">2</a></sup>. It currently ships with a Python language driver, but is language-agnostic (an R language driver is under development).</p><p>The Wave server stores all the content and acts as a hub between your user&#x27;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.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">                                      +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                       +-------------&gt;+ app1.py |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                       |              +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                       |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+---------+       +----+-----+        +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">| Browser +------&gt;+  Server  +-------&gt;+ app2.py |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">+---------+       +----+-----+        +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                       |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                       |              +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                       +-------------&gt;+ app3.py |</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                                      +---------+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="in-summary"></a>In Summary<a aria-hidden="true" tabindex="-1" class="hash-link" href="#in-summary" title="Direct link to heading">#</a></h2><p>H2O Wave is rapid application development for a more... civilized age<sup id="fnref-3"><a href="#fn-3" class="footnote-ref">3</a></sup>.</p><p>Also, this page was mostly hyperbole, so let&#x27;s download it and take it for a spin, shall we.</p><hr><p><sup id="fnref-1"><a href="#fn-1" class="footnote-ref">1</a></sup> The model parallels <a href="https://en.wikipedia.org/wiki/Retained_mode" target="_blank" rel="noopener noreferrer">retained mode</a> graphics, with compositing performed on an remote server.</p><p><sup id="fnref-2"><a href="#fn-2" class="footnote-ref">2</a></sup> Runs anywhere Go executables run, which is <a href="https://gist.github.com/asukakenji/f15ba7e588ac42795f421b48b8aede63" target="_blank" rel="noopener noreferrer">almost everywhere</a>.</p><p><sup id="fnref-3"><a href="#fn-3" class="footnote-ref">3</a></sup> Hat tip to <a href="https://xkcd.com/297/" target="_blank" rel="noopener noreferrer">xkcd</a>.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/getting-started.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/contributing"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Contributing</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/installation"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Installation »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#what-is-h2o-wave" class="table-of-contents__link">What is H2O Wave?</a></li><li><a href="#what-can-i-do-with-it" class="table-of-contents__link">What can I do with it?</a></li><li><a href="#how-do-i-use-it" class="table-of-contents__link">How do I use it?</a></li><li><a href="#show-me-some-code" class="table-of-contents__link">Show me some code!</a></li><li><a href="#whats-included" class="table-of-contents__link">What&#39;s included?</a></li><li><a href="#in-summary" class="table-of-contents__link">In Summary</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/d589d3a7.36aebee9.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/d589d3a7.7779cab6.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/graphics/index.html b/docs/docs/graphics/index.html
index 6ae751ea1a..5ef0523248 100644
--- a/docs/docs/graphics/index.html
+++ b/docs/docs/graphics/index.html
@@ -5,33 +5,33 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Graphics | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Graphics | H2O Wave"><meta data-react-helmet="true" name="description" content="Wave provides a versatile API for rendering vector graphics (SVG) backed by data buffers."><meta data-react-helmet="true" property="og:description" content="Wave provides a versatile API for rendering vector graphics (SVG) backed by data buffers."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/graphics"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/graphics"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/6264312d.19d2c9b4.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/6264312d.3911a400.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Graphics</h1></header><div class="markdown"><p>Wave provides a versatile API for rendering vector graphics (SVG) backed by <a href="/wave/docs/buffers">data buffers</a>.</p><p>Use the graphics card <a href="http://localhost:3000/docs/api/ui#graphics_card" target="_blank" rel="noopener noreferrer">ui.graphics_card()</a> to render graphics.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="stages-and-scenes"></a>Stages and scenes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#stages-and-scenes" title="Direct link to heading">#</a></h2><p>The graphics card has two attributes that control how graphics are rendered: <code>stage</code> and <code>scene</code>:</p><ul><li>A stage holds static shapes that are rendered as part of the background (literally, behind the scene).</li><li>A scene holds shapes whose attributes need to be animated (causing a re-render, or, literally, cause a scene).</li></ul><p>Use <code>ui.stage()</code> and <code>ui.scene()</code> to create the stage and the scene:</p><ul><li><code>ui.stage()</code> creates a packed, static representation of its shapes (recall that the stage is not supposed to change).</li><li><code>ui.scene()</code> declares a data buffer to efficiently update its shapes if changed (recall that the scene is animated).</li></ul><p>Here&#x27;s an example that draws a clock with a circular <code>face</code> placed on the <code>stage</code>, and <code>hour</code>, <code>min</code> and <code>sec</code> hands placed in the <code>scene</code>:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> graphics </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> g</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Graphics</h1></header><div class="markdown"><p>Wave provides a versatile API for rendering vector graphics (SVG) backed by <a href="/wave/docs/buffers">data buffers</a>.</p><p>Use the graphics card <a href="http://localhost:3000/docs/api/ui#graphics_card" target="_blank" rel="noopener noreferrer">ui.graphics_card()</a> to render graphics.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="stages-and-scenes"></a>Stages and scenes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#stages-and-scenes" title="Direct link to heading">#</a></h2><p>The graphics card has two attributes that control how graphics are rendered: <code>stage</code> and <code>scene</code>:</p><ul><li>A stage holds static shapes that are rendered as part of the background (literally, behind the scene).</li><li>A scene holds shapes whose attributes need to be animated (causing a re-render, or, literally, cause a scene).</li></ul><p>Use <code>ui.stage()</code> and <code>ui.scene()</code> to create the stage and the scene:</p><ul><li><code>ui.stage()</code> creates a packed, static representation of its shapes (recall that the stage is not supposed to change).</li><li><code>ui.scene()</code> declares a data buffer to efficiently update its shapes if changed (recall that the scene is animated).</li></ul><p>Here&#x27;s an example that draws a clock with a circular <code>face</code> placed on the <code>stage</code>, and <code>hour</code>, <code>min</code> and <code>sec</code> hands placed in the <code>scene</code>:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> graphics </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> g</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">graphics_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> view_box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;0 0 100 100&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;100%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;100%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    stage</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">stage</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        face</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">circle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">cx</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;50&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cy</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;50&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> r</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;45&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> fill</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#111&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stroke_width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2px&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stroke</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#f55&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    scene</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">scene</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        hour</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">rect</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;47.5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;12.5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;40&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rx</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2.5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> fill</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#333&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stroke</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#555&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token builtin" style="color:rgb(130, 170, 255)">min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">rect</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;48.5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;12.5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;40&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rx</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> fill</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#333&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stroke</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#555&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        sec</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">line</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x1</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;50&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y1</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;50&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x2</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;50&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y2</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;16&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stroke</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#f55&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> stroke_width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1px&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="shapes"></a>Shapes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#shapes" title="Direct link to heading">#</a></h2><p>Use drawing functions to add shapes to the stage or scene:</p><table><thead><tr><th>Primitive</th><th>Use</th></tr></thead><tbody><tr><td><a href="/wave/docs/api/graphics#arc">arc()</a></td><td>Circular or annular sector, as in a pie or donut chart</td></tr><tr><td><a href="/wave/docs/api/graphics#circle">circle()</a></td><td><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle" target="_blank" rel="noopener noreferrer">Circle</a></td></tr><tr><td><a href="/wave/docs/api/graphics#ellipse">ellipse()</a></td><td><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse" target="_blank" rel="noopener noreferrer">Ellipse</a></td></tr><tr><td><a href="/wave/docs/api/graphics#image">image()</a></td><td><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image" target="_blank" rel="noopener noreferrer">Image</a></td></tr><tr><td><a href="/wave/docs/api/graphics#line">line()</a></td><td><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line" target="_blank" rel="noopener noreferrer">Line</a></td></tr><tr><td><a href="/wave/docs/api/graphics#path">path()</a></td><td><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path" target="_blank" rel="noopener noreferrer">Path</a></td></tr><tr><td><a href="/wave/docs/api/graphics#polygon">polygon()</a></td><td><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon" target="_blank" rel="noopener noreferrer">Polygon</a></td></tr><tr><td><a href="/wave/docs/api/graphics#polyline">polyline()</a></td><td><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline" target="_blank" rel="noopener noreferrer">Polyline</a></td></tr><tr><td><a href="/wave/docs/api/graphics#spline">spline()</a></td><td>Curves (including radial curves) using various algorithms: basis, cardinal, smooth, linear, monotone, natural, step.</td></tr><tr><td><a href="/wave/docs/api/graphics#rect">rect()</a></td><td><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect" target="_blank" rel="noopener noreferrer">Rect</a></td></tr><tr><td><a href="/wave/docs/api/graphics#text">text()</a></td><td><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text" target="_blank" rel="noopener noreferrer">Text</a></td></tr></tbody></table><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="paths"></a>Paths<a aria-hidden="true" tabindex="-1" class="hash-link" href="#paths" title="Direct link to heading">#</a></h2><p>The <code>path()</code> function is special: it can draw arbitrary shapes. This is because SVG path elements support an attribute called <code>d</code> which holds drawing commands.</p><p>Here&#x27;s a path that represents a red square:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">d</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;m 25 25 h 50 v 50 h -50 z&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> fill</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;red&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>The above snippet produces:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-html codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;</span><span class="token tag" style="color:rgb(255, 85, 114)">path</span><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">d</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 85, 114)">m 25 25 h 50 v 50 h -50 z</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">&#x27;</span><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">fill</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">&#x27;</span><span class="token tag attr-value" style="color:rgb(255, 85, 114)">red</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">&#x27;</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/&gt;</span></div></div></div></div></div><p>The drawing commands in the above example work like this:</p><ol><li><code>m 25 25</code>: Move 25px left, 25px down</li><li><code>h 50</code>: Draw a line 50px right</li><li><code>v 50</code>: Draw a line 50px down</li><li><code>h -50</code>: Draw a line 50px left</li><li><code>z</code>: Close the path (going back to where we started)</li></ol><p>The little drawing syntax above is part of the SVG specification, not something unique to Wave.</p><p>Authoring <code>path()</code> drawing commands by hand is tedious, so Wave provides two utilities to make it easier: <code>p()</code> and <code>turtle()</code>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="drawing-with-paths"></a>Drawing with paths<a aria-hidden="true" tabindex="-1" class="hash-link" href="#drawing-with-paths" title="Direct link to heading">#</a></h2><p><code>p()</code> creates a path generator with convenience methods to draw step by step. For example, the following two lines are equivalent:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">red_square </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">d</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;m 25 25 h 50 v 50 h -50 z&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> fill</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;red&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">red_square </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">p</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">m</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">25</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">25</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">h</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">v</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">h</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">z</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">fill</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;red&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="commands"></a>Commands<a aria-hidden="true" tabindex="-1" class="hash-link" href="#commands" title="Direct link to heading">#</a></h3><table><thead><tr><th>Method</th><th>Use</th></tr></thead><tbody><tr><td><code>M()</code></td><td>Move, absolute</td></tr><tr><td><code>H()</code></td><td>Horizontal line, absolute</td></tr><tr><td><code>V()</code></td><td>Vertical line, absolute</td></tr><tr><td><code>L()</code></td><td>Line, absolute</td></tr><tr><td><code>A()</code></td><td>Elliptical arc, absolute</td></tr><tr><td><code>C()</code></td><td>Cubic Bézier curve, absolute</td></tr><tr><td><code>S()</code></td><td>Cubic Bézier curve, smooth, absolute</td></tr><tr><td><code>Q()</code></td><td>Quadratic Bézier curve, absolute</td></tr><tr><td><code>T()</code></td><td>Quadratic Bézier curve, smooth, absolute</td></tr><tr><td><code>Z()</code></td><td>Close path</td></tr><tr><td><code>m()</code></td><td>Move, relative</td></tr><tr><td><code>h()</code></td><td>Horizontal line, relative</td></tr><tr><td><code>v()</code></td><td>Vertical line, relative</td></tr><tr><td><code>l()</code></td><td>Line, relative</td></tr><tr><td><code>a()</code></td><td>Elliptical arc, relative</td></tr><tr><td><code>c()</code></td><td>Cubic Bézier curve, relative</td></tr><tr><td><code>s()</code></td><td>Cubic Bézier curve, smooth, relative</td></tr><tr><td><code>q()</code></td><td>Quadratic Bézier curve, relative</td></tr><tr><td><code>t()</code></td><td>Quadratic Bézier curve, smooth, relative</td></tr><tr><td><code>z()</code></td><td>Close path</td></tr><tr><td><code>d()</code></td><td>Serialize this path&#x27;s commands into SVG path data.</td></tr><tr><td><code>path()</code></td><td>Create a SVG path element</td></tr></tbody></table><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>The upper-cased commands use absolute coordinates. The lower-cased commands use relative coordinates. For example, <code>L(4,2)</code> means &quot;draw a line to (4,2)&quot;, but <code>l(4,2)</code> means &quot;draw a line 4px right, 2px down from the current position&quot;.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="drawing-with-a-turtle"></a>Drawing with a turtle<a aria-hidden="true" tabindex="-1" class="hash-link" href="#drawing-with-a-turtle" title="Direct link to heading">#</a></h2><p><code>turtle()</code> creates a path generator (similar to <code>p()</code>), but using <a href="https://docs.python.org/3/library/turtle.html" target="_blank" rel="noopener noreferrer">Turtle Geometry</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="commands-1"></a>Commands<a aria-hidden="true" tabindex="-1" class="hash-link" href="#commands-1" title="Direct link to heading">#</a></h3><table><thead><tr><th>Method</th><th>Use</th></tr></thead><tbody><tr><td><code>pd()</code></td><td>Pen down</td></tr><tr><td><code>pu()</code></td><td>Pen up</td></tr><tr><td><code>p()</code></td><td>Set the turtle&#x27;s position</td></tr><tr><td><code>a()</code></td><td>Set the turtle&#x27;s orientation</td></tr><tr><td><code>f()</code></td><td>Move forward</td></tr><tr><td><code>b()</code></td><td>Move backward</td></tr><tr><td><code>l()</code></td><td>Turn left</td></tr><tr><td><code>r()</code></td><td>Turn right</td></tr><tr><td><code>d()</code></td><td>Serialize this turtle&#x27;s movements into SVG path data</td></tr><tr><td><code>path()</code></td><td>Create a SVG path element</td></tr></tbody></table><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="example"></a>Example<a aria-hidden="true" tabindex="-1" class="hash-link" href="#example" title="Direct link to heading">#</a></h3><p>Here is an example from <a href="https://docs.python.org/3/library/turtle.html" target="_blank" rel="noopener noreferrer">Python&#x27;s turtle module</a>: </p><p><img src="https://docs.python.org/3/_images/turtle-star.png" alt="star"></p><p>Here is the above example recreated in Wave:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> turtle </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">color</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;red&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;yellow&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">begin_fill</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">while</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    forward</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">200</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    left</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">170</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">abs</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">pos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">&lt;</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">break</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">end_fill</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> graphics </span><span class="token keyword" style="font-style:italic">as</span><span class="token plain"> g</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">t </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">turtle</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">r</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">90</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">pd</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">36</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">200</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">170</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">spirograph </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> t</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">pu</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">stroke</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;red&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> fill</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;yellow&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">graphics_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 3&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> view_box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;0 0 220 220&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> width</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;100%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;100%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    scene</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">g</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">scene</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">foo</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">spirograph</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>Turtle graphics is not just kid stuff: See <a href="https://mitpress.mit.edu/books/turtle-geometry" target="_blank" rel="noopener noreferrer">Turtle Geometry</a> by Harold Abelson and Andrea diSessa.</p></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/graphics.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/plotting"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Plots</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/security"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Security »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#stages-and-scenes" class="table-of-contents__link">Stages and scenes</a></li><li><a href="#shapes" class="table-of-contents__link">Shapes</a></li><li><a href="#paths" class="table-of-contents__link">Paths</a></li><li><a href="#drawing-with-paths" class="table-of-contents__link">Drawing with paths</a><ul><li><a href="#commands" class="table-of-contents__link">Commands</a></li></ul></li><li><a href="#drawing-with-a-turtle" class="table-of-contents__link">Drawing with a turtle</a><ul><li><a href="#commands-1" class="table-of-contents__link">Commands</a></li><li><a href="#example" class="table-of-contents__link">Example</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/6264312d.19d2c9b4.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/6264312d.3911a400.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/guide/index.html b/docs/docs/guide/index.html
index e15177b388..c3d0ffa551 100644
--- a/docs/docs/guide/index.html
+++ b/docs/docs/guide/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Introduction | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Introduction | H2O Wave"><meta data-react-helmet="true" name="description" content="Welcome to the H2O Wave Guide! If you prefer to learn concepts step by step, you&#x27;ve come to the right place."><meta data-react-helmet="true" property="og:description" content="Welcome to the H2O Wave Guide! If you prefer to learn concepts step by step, you&#x27;ve come to the right place."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/guide"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/guide"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/a8bb5334.c4ff7379.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/a8bb5334.b90d4b57.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Introduction</h1></header><div class="markdown"><p>Welcome to the H2O Wave Guide! If you prefer to learn concepts step by step, you&#x27;ve come to the right place. </p><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>If you haven&#x27;t already, it&#x27;s worthwhile reading the <a href="/wave/docs/getting-started">Getting Started</a> page, which offers a 5-minute overview of what H2O Wave is all about.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="before-you-start"></a>Before you start<a aria-hidden="true" tabindex="-1" class="hash-link" href="#before-you-start" title="Direct link to heading">#</a></h2><p>If you prefer to learn by doing, <a href="/wave/docs/tutorial-hello">start with our tutorials</a> - they&#x27;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. </p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="who-is-this-for"></a>Who is this for?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#who-is-this-for" title="Direct link to heading">#</a></h2><p>This documentation assumes that you have some familiarity with the Python programming language. You don&#x27;t have to be an expert, but it might be harder to learn both Wave and Python at the same time.</p><p>If you already know Python, but have no experience authoring web apps, you&#x27;ll probably find Wave a fun and easy way to get started, without the hassle of learning HTML, CSS, Javascript and client-server programming.</p><p>If you have some experience building web apps using Python (or even other languages), you&#x27;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.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/guide.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/tutorial-todo"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Tutorial: Todo List</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/architecture"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Architecture »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#before-you-start" class="table-of-contents__link">Before you start</a></li><li><a href="#who-is-this-for" class="table-of-contents__link">Who is this for?</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/a8bb5334.c4ff7379.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link navbar__link--active" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Introduction</h1></header><div class="markdown"><p>Welcome to the H2O Wave Guide! If you prefer to learn concepts step by step, you&#x27;ve come to the right place. </p><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>If you haven&#x27;t already, it&#x27;s worthwhile reading the <a href="/wave/docs/getting-started">Getting Started</a> page, which offers a 5-minute overview of what H2O Wave is all about.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="before-you-start"></a>Before you start<a aria-hidden="true" tabindex="-1" class="hash-link" href="#before-you-start" title="Direct link to heading">#</a></h2><p>If you prefer to learn by doing, <a href="/wave/docs/tutorial-hello">start with our tutorials</a> - they&#x27;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. </p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="who-is-this-for"></a>Who is this for?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#who-is-this-for" title="Direct link to heading">#</a></h2><p>This documentation assumes that you have some familiarity with the Python programming language. You don&#x27;t have to be an expert, but it might be harder to learn both Wave and Python at the same time.</p><p>If you already know Python, but have no experience authoring web apps, you&#x27;ll probably find Wave a fun and easy way to get started, without the hassle of learning HTML, CSS, Javascript and client-server programming.</p><p>If you have some experience building web apps using Python (or even other languages), you&#x27;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.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/guide.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/tutorial-todo"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Tutorial: Todo List</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/architecture"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Architecture »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#before-you-start" class="table-of-contents__link">Before you start</a></li><li><a href="#who-is-this-for" class="table-of-contents__link">Who is this for?</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/a8bb5334.b90d4b57.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/installation/index.html b/docs/docs/installation/index.html
index 95f8cb54fc..f0f5ca2847 100644
--- a/docs/docs/installation/index.html
+++ b/docs/docs/installation/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Installation | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Installation | H2O Wave"><meta data-react-helmet="true" name="description" content="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."><meta data-react-helmet="true" property="og:description" content="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."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/installation"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/installation"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/3b8c55ea.a292a990.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/3b8c55ea.20d79e43.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Installation</h1></header><div class="markdown"><p>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.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="prerequisites"></a>Prerequisites<a aria-hidden="true" tabindex="-1" class="hash-link" href="#prerequisites" title="Direct link to heading">#</a></h2><p>H2O Wave runs on Linux, macOS, and Windows, having Python 3.6.1 or later.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="setup"></a>Setup<a aria-hidden="true" tabindex="-1" class="hash-link" href="#setup" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-1-download"></a>Step 1: Download<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-1-download" title="Direct link to heading">#</a></h3><p><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer">Download the H2O Wave SDK</a> for your platform.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-2-extract"></a>Step 2: Extract<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-2-extract" title="Direct link to heading">#</a></h3><p>Extract your download.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token function" style="color:rgb(130, 170, 255)">tar</span><span class="token plain"> -xzf wave-x.y.z-linux-amd64.tar.gz</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-3-move"></a>Step 3: Move<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-3-move" title="Direct link to heading">#</a></h3><p>Move it to a convenient location, say <code>$HOME/wave/</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">mv</span><span class="token plain"> wave-x.y.z-linux-amd64 </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave</span></div></div></div></div></div><div class="admonition admonition-note alert alert--secondary"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>note</h5></div><div class="admonition-content"><p>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.</p></div></div><p>Inspect your <code>$HOME/wave</code> directory. You should see the following content:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── docs/           ... Documentation</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── examples/       ... Examples</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── test/           ... Browser testing framework</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── www/            ... Wave server web root (do not modify!)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">└── wave              ... Wave server executable</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-4-run"></a>Step 4: Run<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-4-run" title="Direct link to heading">#</a></h3><p>Go to your Wave directory.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave</span></div></div></div></div></div><p>Start the Wave server.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">./wave</span></div></div></div></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 #</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # ┌───────────────────┐</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # │   ┬ ┬┌─┐┬  ┬┌─┐   │</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # │   │││├─┤└┐┌┘├┤    │</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # │   └┴┘┴ ┴ └┘ └─┘   │</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # └───────────────────┘</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 #</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # {&quot;address&quot;:&quot;:55555&quot;,&quot;t&quot;:&quot;listen&quot;,&quot;webroot&quot;:&quot;/home/elp/wave/www&quot;}</span></div></div></div></div></div><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>On Windows, run <code>wave.exe</code> to start the server.</p></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-5-verify"></a>Step 5: Verify<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-5-verify" title="Direct link to heading">#</a></h3><p>Finally, point your web browser to <a href="http://localhost:55555/" target="_blank" rel="noopener noreferrer">http://localhost:55555/</a>. You should see an empty page with a spinner that looks like this:</p><p><img alt="spinner" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVAAAAD1CAYAAAAGTq0wAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUAVGh1IDAxIE9jdCAyMDIwIDAxOjA1OjE0IEFNIFBEVKMMMCAAABE8SURBVHic7d1rbFRlHsfxXzu90JvTFUqZTou2tFyWyM0mQtgqLRoFpUTjuiDLLtWNxpgAwWu8hSUIitld7/EW8NYFjBHEDYLubqFlCaGsAm5Rira1hSm1VTqdltLSzuwLwomsuta/g1Pp9/MGZg7nOc9pybfPzHTmRHV0dIQEAPjBoiM9AQD4uSKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQCjmEhPAPh/gsGgOjs71d3drebmZkVHR6unp0cxMTFKTU3Veeedp9jYWEVFRUV6qhiACCj6pWAwqObmZn3xxReqqqpSU1OTNm/erLa2NnV1dcnj8ejEiROaPn26cnNzddFFF2nMmDGRnjYGGAKKfiUUCqm5uVmffPKJdu3apebmZh0/flyhUEg1NTVKS0tTR0eHmpqa1NTUpKqqKqWnp2vw4MEqLi7W4sWLI30KGECiOjo6QpGeBCBJnZ2d8vl82rRpk44cOSJJ8ng8uuCCC+T1euV2u52H721tbTp69KgqKyv16aef6t1331VcXJwmTJigVatWadKkSRE+GwwEBBT9xt///nd98MEHOnLkiIYNG6bCwkKNGjVKSUlJiouL+9Z9AoGAfD6fqqqqtHz5clVXVysxMVGPPPKIbrrppp/4DDDQEFD0C+Xl5Xr//ffl9/s1efJkXXrppUpPT1dsbGyf9j958qRCoZDuuusurVmzRrm5ubr55ps1f/58nXfeeWd59hioXPfff//SSE8CA1tdXZ1eeOEFtbW1adasWZoyZYq8Xq9cLlefx3C5XIqOjtaUKVPkdrv1/vvv69ixY7rooovk9Xp5lR5nBb8Hiohbt26durq6VFBQoMsuu0wej8c0TlRUlFJTUzVz5kzNnTtXVVVVWrFihWpqasI8Y+AUAoqI2rp1q+rr6+XxeDR37lwlJib+6DFHjx6tBQsWaOTIkTpw4IC2b9+unp6eMMwWOBMBRcT4fD59+OGH6unp0ezZs8P6MDsvL0+33HKLQqGQ1q9fr9ra2rCNDZxGQBExDQ0NCgQCGjdunDIzM3/Qc57fJz4+XgUFBRo1apRqa2tVU1Oj3t7esI0PSAQUEdLT06Ompib5/X6lp6fL7XaH/Rjnn3++Jk6cqNbWVv3jH/+Q3+8P+zEwsPFOJETEiRMnVFVVJZfLpZycHCUkJIT9GAkJCbriiitUVVUlr9er+Pj4sB8DAxsrUERER0eH4uLi5Ha7z8rq87SsrCzl5OSovb1dgUDgrB0HAxMrUEREMBhUa2ururq6zsrq87TY2FjnLaDR0awXEF4EFBHhcrkUExOj2NhYBYPBs3ac6Ohotbe3Kz4+nheREHb8SEZEBINBuVwu+f3+sxq2zs5ODRo0SKmpqaxAEXb8j0JEpKSkKCEhQVFRUWppaTlrx/H7/fL7/eru7lZSUtJZOw4GJgKKiPF6vers7FRdXZ26u7vDPn5nZ6fz+59jx47VoEGDwn4MDGwEFBGRkJCgsWPHKjExUZ9//rk6OjrCfgy/36+mpia53W6lp6crJoan/BFeBBQRER0draFDhyotLU2NjY06ePCgTp48Gbbxe3t7dfjwYe3fv18pKSnKysoK29jAaQQUEZOWlqbJkydLksrKytTU1BS2sUOhkN5++23FxMRo4sSJysjICNvYwGkEFBETHR2t0aNHy+v16ujRoyovL1djY+OPHvf48eNau3atGhsbNXz4cF155ZVhmC3wTQQUEZWWlqbi4mJ5vV7t2rVLe/fu1fHjx83jNTY2avv27aqoqFB8fLzmzJkTxtkCZ+JZdURUVFSUMjIyNGnSJAUCAW3YsEEtLS2aO3euoqKi+vwJTSdPnlRTU5PKy8u1a9cupaen64orrtCFF154dk8AAxrXREK/UV5ervXr1zvXfZ89e7YyMzPldru/8+2e3d3d6ujo0MGDB1VWVqajR4/K6/Vq0qRJuvzyy3/iM8BAQ0DRr9TV1WndunWqr69XT0+Pxo0bp/T0dOXk5DghDQaDam9v1+eff+78efq5U6/Xq+LiYmVkZJzV99gDEgFFP7V161Z9+OGHCgQC8vv9crlccrvdOnHihJKTk3Xs2DHnSpyJiYnOK/qjR49WWloaF5HDT4KAot/y+XxqaGhQU1OTqqqqFBcXp9bWVsXExMjlcikhIUFer1djx451fqeU97vjp0RA0e/19PToxIkT6ujocD6EJBgMKiUlRdKpdzURTkQCAQUAI35sA4ARAQUAIwIKAEYEFACMCCgAGBFQADAioABgREABwIiAAoARAT1H3HrrrXryySed2+3t7XK73Xr++eed+1pbWzV06FB1dXV95zi33Xab/vznP0uSjh07pqefftrZVlpaquuuuy7sc3/ggQc0bNgwrVy5Muxj/1h79+7VO++8E5axnnzySfn9/rCMhf6BgJ4jioqKVF5e7tzeuXOnoqKizrivoqJCl1xyieLj479znJKSEl1zzTWSpK+++krPPPOMs+2yyy7TwoULwzpvn8+nZ599Vnv37tXdd98d1rHDIZwBfeqpp9Ta2hqWsdA/ENBzRGFhoXbu3KlgMChJ2r59u2655Rbt2LFDodCpjzuoqKhQUVGRQqGQVqxYoby8PGVkZKikpMS5jMa6dev0z3/+U4cPH9a4ceNUX1+v7Oxs/etf/1JlZaVefPFFSdKGDRv0u9/9TvPnz9eIESN0ySWX6NChQ8583njjDY0ePVoej0d/+tOflJ+fr88+++yMOX/88cfKy8tTV1eXpkyZovfee0+hUEgrV65Udna2vF6vFi9e7KyYlyxZojvuuEMTJkxQSUnJN74GoVBIjzzyiLKzs5WRkaH77rtPvb29kqRAIKCSkhJ5PB7l5eXpueeec/bLz8/Xiy++qAkTJigrK0vLli2TJL355pu6/fbbVVpaquzsbPX29p5xjOzsbN1///3q6elx5vfwww+roKBAw4cP1w033OB8XQsKCuTz+fTLX/7SWeHj54+AniOGDh0qr9erffv2STr16e6/+c1vlJ6ergMHDjj3TZs2TR988IG2bdumHTt2qL6+Xt3d3Vq9evUZ42VmZmr//v0aPny4amtrNXXq1G8cc+vWrbrzzjv12Wef6aqrrtKDDz4oSTpw4IAWLVqk9evXq6GhQX6/XzU1Nd/Yf8yYMWccY8aMGXrllVe0ceNGVVZWqrq6Wg0NDfrjH//o7FNRUaEtW7ZozZo13xhvzZo12rJli3bv3q3q6mpVVVU5K+hFixYpNjZWdXV1Kisr0+OPP64tW7Y4++7Zs0d79uzR7t279dJLL+mjjz7S9ddfr2eeeUbz5s1TbW2tXC6X1qxZo82bN6uyslL79+/Xv//97zNW6Zs2bdI777yjQ4cOKRAIOPOsqKhQRkaGDhw4oCVLlvTtm4p+j4CeQ4qKilRRUaG2tjbV19dr4sSJmj59usrLy9Xa2iqfz6fx48fr4osv1nvvvae0tDT5fD794he/+MbqsC/y8/M1fvx4SdKvf/1rHTx4UNKplduCBQs0fvx4xcTE6L777nNWad+ntLRUDz30kIYMGaKkpCQ9+uijKi0tdbbPnTtXw4YN+9Z9//rXv+ruu+9WWlqakpOTVVpaqnnz5qmzs1MbN27UY489pvj4eGVmZuqee+45Y9zf//73iomJkcfj0dSpU51z+V9r167V8uXLNWTIEKWkpOjee+/Vpk2bnO3XXXedUlNTFR8fr1mzZqm6urpP542fJy4qdw4pLCzUSy+9pNzcXBUUFCg6OlpFRUVavXq1MjMznftaWlq0cOFC7du3TxdccIGCwaBGjhz5g4+Xmprq/D0uLs6JpM/n08UXX+xsGzRokDweT5/G9Pl8GjFihHM7JyfH+fR5Sf/3Mh2NjY3Kzs52bicnJys5OVkNDQ1KSUmR2+12tuXm5ur111//3nP5Xzt37tSMGTM0dOhQSaeeNkhLS3O2f/0YcXFxzrxxbmIFeg751a9+pcrKSpWVlamwsFCSNHXqVO3evVvl5eXOfX/5y180ePBg/ec//9HmzZt11VVXhXUegwcPVkNDg3P79BUz+8Lj8ZzxcL+mpkapqamKjY3t075fX0m3t7fryy+/1JAhQxQIBNTW1uZs+/TTT/sc9a+bPHmy3n77bdXW1qq2tlZ1dXWqrKz8wePg3EBAzyHJyckaOXKkXn31VRUVFUmSEhMTlZeXp9dee03Tpk1z/m0oFFIwGNShQ4f08ssvf+t4SUlJam5u1pEjR5wXY/ri2muv1erVq/XJJ5+ot7dXq1at6vO+N954o5YtW6aWlhZ1dHTo3nvv1bx5837wvm1tbZozZ47eeustJSQkaPbs2brrrrvU1dWlw4cPa9WqVbrxxhu/d8zExERVV1crEAhIkubMmaNly5apublZ3d3deuCBB/T444/3aX5JSUnat2+fsypduXKljhw5IunUUwM7duyQdOr52O/6nqB/IaDnmKKiIg0ZMuSMh7LTp09XamqqcnNzJUl33HGHGhsblZWVpZtvvlkzZsz41rGGDRum2267TZMmTVJZWVmf55Cfn68VK1aouLhYmZmZio+PV1ZWVp/2LSkpUXFxsfLz8zVy5Eh5vV4tXbq0z/vOnj3b2XfMmDHOq/VPPPGEurq6dOGFF6qwsFCLFi3SzJkzv3fMmTNn6vzzz1dOTo7a29v1hz/8QTNnztTkyZOVk5Ojuro6/fa3v+3T/JYuXaqFCxdq+fLl6urq0quvvuo81/q3v/1N27ZtkyRVVlZq3bp1fRoTkcUlPfCTGDFihLZt29bnkAI/B6xAEXa1tbWaPn266urqFAqF9MYbb8jlcikjIyPSUwPCilfhEXbZ2dmaNWuWrr76arW0tGjUqFFau3atXC5XpKcGhBUP4QHAiIfwAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHAiIACgBEBBQAjAgoARgQUAIwIKAAYEVAAMCKgAGBEQAHA6L92+UCJ9ZvpGgAAAABJRU5ErkJggg=="></p><p>Congratulations! Wave is now running, but doesn&#x27;t have any content yet (hence the spinner).</p><p>In the next few sections, we&#x27;ll add some content and see what the fuss is all about.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/installation.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/getting-started"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Introduction</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/tour"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">A Tour of Wave »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#prerequisites" class="table-of-contents__link">Prerequisites</a></li><li><a href="#setup" class="table-of-contents__link">Setup</a><ul><li><a href="#step-1-download" class="table-of-contents__link">Step 1: Download</a></li><li><a href="#step-2-extract" class="table-of-contents__link">Step 2: Extract</a></li><li><a href="#step-3-move" class="table-of-contents__link">Step 3: Move</a></li><li><a href="#step-4-run" class="table-of-contents__link">Step 4: Run</a></li><li><a href="#step-5-verify" class="table-of-contents__link">Step 5: Verify</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/3b8c55ea.a292a990.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Installation</h1></header><div class="markdown"><p>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.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="prerequisites"></a>Prerequisites<a aria-hidden="true" tabindex="-1" class="hash-link" href="#prerequisites" title="Direct link to heading">#</a></h2><p>H2O Wave runs on Linux, macOS, and Windows, having Python 3.6.1 or later.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="setup"></a>Setup<a aria-hidden="true" tabindex="-1" class="hash-link" href="#setup" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-1-download"></a>Step 1: Download<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-1-download" title="Direct link to heading">#</a></h3><p><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer">Download the H2O Wave SDK</a> for your platform.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-2-extract"></a>Step 2: Extract<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-2-extract" title="Direct link to heading">#</a></h3><p>Extract your download.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token function" style="color:rgb(130, 170, 255)">tar</span><span class="token plain"> -xzf wave-x.y.z-linux-amd64.tar.gz</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-3-move"></a>Step 3: Move<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-3-move" title="Direct link to heading">#</a></h3><p>Move it to a convenient location, say <code>$HOME/wave/</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">mv</span><span class="token plain"> wave-x.y.z-linux-amd64 </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave</span></div></div></div></div></div><div class="admonition admonition-note alert alert--secondary"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>note</h5></div><div class="admonition-content"><p>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.</p></div></div><p>Inspect your <code>$HOME/wave</code> directory. You should see the following content:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── examples/       ... Examples</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── test/           ... Browser testing framework</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── www/            ... Wave server web root (do not modify!)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">└── waved           ... Wave server executable</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-4-run"></a>Step 4: Run<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-4-run" title="Direct link to heading">#</a></h3><p>Go to your Wave directory.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave</span></div></div></div></div></div><p>Start the Wave server.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">./waved</span></div></div></div></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # ┌─────────────────────────┐</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # │  ┌    ┌ ┌──┐ ┌  ┌ ┌──┐  │ H2O Wave</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # │  │ ┌──┘ │──│ │  │ └┐    │ (version) (build)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # │  └─┘    ┘  ┘ └──┘  └─┘  │ © 2020 H2O.ai, Inc.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # └─────────────────────────┘</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # {&quot;address&quot;:&quot;:55555&quot;,&quot;t&quot;:&quot;listen&quot;,&quot;webroot&quot;:&quot;/home/elp/wave/www&quot;}</span></div></div></div></div></div><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>On Windows, run <code>waved.exe</code> to start the server.</p></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-5-verify"></a>Step 5: Verify<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-5-verify" title="Direct link to heading">#</a></h3><p>Finally, point your web browser to <a href="http://localhost:55555/" target="_blank" rel="noopener noreferrer">http://localhost:55555/</a>. You should see an empty page with a spinner that looks like this:</p><p><img alt="spinner" src="data:image/png;base64,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"></p><p>Congratulations! Wave is now running, but doesn&#x27;t have any content yet (hence the spinner).</p><p>In the next few sections, we&#x27;ll add some content and see what the fuss is all about.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/installation.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/getting-started"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Introduction</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/tour"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">A Tour of Wave »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#prerequisites" class="table-of-contents__link">Prerequisites</a></li><li><a href="#setup" class="table-of-contents__link">Setup</a><ul><li><a href="#step-1-download" class="table-of-contents__link">Step 1: Download</a></li><li><a href="#step-2-extract" class="table-of-contents__link">Step 2: Extract</a></li><li><a href="#step-3-move" class="table-of-contents__link">Step 3: Move</a></li><li><a href="#step-4-run" class="table-of-contents__link">Step 4: Run</a></li><li><a href="#step-5-verify" class="table-of-contents__link">Step 5: Verify</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/3b8c55ea.20d79e43.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/layout/index.html b/docs/docs/layout/index.html
index 6b047cb518..a18a61014c 100644
--- a/docs/docs/layout/index.html
+++ b/docs/docs/layout/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Layout | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Layout | H2O Wave"><meta data-react-helmet="true" name="description" content="This section illustrates how to lay out cards on a page."><meta data-react-helmet="true" property="og:description" content="This section illustrates how to lay out cards on a page."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/layout"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/layout"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/472f8a66.80c4c03f.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/472f8a66.59021c64.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Layout</h1></header><div class="markdown"><p>This section illustrates how to lay out cards on a page.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="grid-system"></a>Grid system<a aria-hidden="true" tabindex="-1" class="hash-link" href="#grid-system" title="Direct link to heading">#</a></h2><p>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. </p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="the-box-attribute"></a>The box attribute<a aria-hidden="true" tabindex="-1" class="hash-link" href="#the-box-attribute" title="Direct link to heading">#</a></h2><p>Every card has a <code>box</code> attribute that specifies how to position the card on the page, a string of the form <code>&#x27;column row width height&#x27;</code>, for example <code>&#x27;1 1 2 4&#x27;</code> or <code>&#x27;8 7 3 6&#x27;</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;quote&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Hello World&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&quot;The Internet? Is that thing still around?&quot; - *Homer Simpson*&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>The <code>column</code> and <code>row</code> indicate which column and row to position the top-left corner of the card. The <code>width</code> and <code>height</code> indicate the width and height of the cards, respectively. The <code>column</code> and <code>row</code> are 1-based. The <code>width</code> and <code>height</code> are in spans (units) of columns or rows.</p><table><thead><tr><th>Attribute</th><th>Value</th><th>Interpreted as</th></tr></thead><tbody><tr><td>column</td><td>N</td><td>Nth column</td></tr><tr><td>row</td><td>N</td><td>Nth row</td></tr><tr><td>width</td><td>N</td><td>N columns wide</td></tr><tr><td>height</td><td>N</td><td>N rows high</td></tr></tbody></table><p>For example, a <code>box</code> of <code>1 2 3 4</code> is interpreted as:</p><table><thead><tr><th>Attribute</th><th>Value</th><th>Interpreted as</th></tr></thead><tbody><tr><td>column</td><td>1</td><td>1st column</td></tr><tr><td>row</td><td>2</td><td>2nd row</td></tr><tr><td>width</td><td>3</td><td>3 columns wide</td></tr><tr><td>height</td><td>4</td><td>4 rows high</td></tr></tbody></table><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="why-a-fixed-grid"></a>Why a fixed grid?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#why-a-fixed-grid" title="Direct link to heading">#</a></h2><p>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&#x27;t use up the entire grid. Instead, use up less columns and rows, like 8 columns x 6 rows.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="other-layout-options"></a>Other layout options<a aria-hidden="true" tabindex="-1" class="hash-link" href="#other-layout-options" title="Direct link to heading">#</a></h2><p>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. </p><p>We are working on additional layout mechanisms, slated for release by the end of 2020.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="see-also"></a>See also<a aria-hidden="true" tabindex="-1" class="hash-link" href="#see-also" title="Direct link to heading">#</a></h2><p><a href="/wave/docs/examples/layout">Positioning</a> and <a href="/wave/docs/examples/layout-size">Sizing</a> examples.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/layout.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/pages"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Pages</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/cards"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Cards »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#grid-system" class="table-of-contents__link">Grid system</a></li><li><a href="#the-box-attribute" class="table-of-contents__link">The box attribute</a></li><li><a href="#why-a-fixed-grid" class="table-of-contents__link">Why a fixed grid?</a></li><li><a href="#other-layout-options" class="table-of-contents__link">Other layout options</a></li><li><a href="#see-also" class="table-of-contents__link">See also</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/472f8a66.80c4c03f.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Layout</h1></header><div class="markdown"><p>This section illustrates how to lay out cards on a page.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="grid-system"></a>Grid system<a aria-hidden="true" tabindex="-1" class="hash-link" href="#grid-system" title="Direct link to heading">#</a></h2><p>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. </p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="the-box-attribute"></a>The box attribute<a aria-hidden="true" tabindex="-1" class="hash-link" href="#the-box-attribute" title="Direct link to heading">#</a></h2><p>Every card has a <code>box</code> attribute that specifies how to position the card on the page, a string of the form <code>&#x27;column row width height&#x27;</code>, for example <code>&#x27;1 1 2 4&#x27;</code> or <code>&#x27;8 7 3 6&#x27;</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;quote&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Hello World&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&quot;The Internet? Is that thing still around?&quot; - *Homer Simpson*&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>The <code>column</code> and <code>row</code> indicate which column and row to position the top-left corner of the card. The <code>width</code> and <code>height</code> indicate the width and height of the cards, respectively. The <code>column</code> and <code>row</code> are 1-based. The <code>width</code> and <code>height</code> are in spans (units) of columns or rows.</p><table><thead><tr><th>Attribute</th><th>Value</th><th>Interpreted as</th></tr></thead><tbody><tr><td>column</td><td>N</td><td>Nth column</td></tr><tr><td>row</td><td>N</td><td>Nth row</td></tr><tr><td>width</td><td>N</td><td>N columns wide</td></tr><tr><td>height</td><td>N</td><td>N rows high</td></tr></tbody></table><p>For example, a <code>box</code> of <code>1 2 3 4</code> is interpreted as:</p><table><thead><tr><th>Attribute</th><th>Value</th><th>Interpreted as</th></tr></thead><tbody><tr><td>column</td><td>1</td><td>1st column</td></tr><tr><td>row</td><td>2</td><td>2nd row</td></tr><tr><td>width</td><td>3</td><td>3 columns wide</td></tr><tr><td>height</td><td>4</td><td>4 rows high</td></tr></tbody></table><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="why-a-fixed-grid"></a>Why a fixed grid?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#why-a-fixed-grid" title="Direct link to heading">#</a></h2><p>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&#x27;t use up the entire grid. Instead, use up less columns and rows, like 8 columns x 6 rows.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="other-layout-options"></a>Other layout options<a aria-hidden="true" tabindex="-1" class="hash-link" href="#other-layout-options" title="Direct link to heading">#</a></h2><p>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. </p><p>We are working on additional layout mechanisms, slated for release by the end of 2020.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="see-also"></a>See also<a aria-hidden="true" tabindex="-1" class="hash-link" href="#see-also" title="Direct link to heading">#</a></h2><p><a href="/wave/docs/examples/layout">Positioning</a> and <a href="/wave/docs/examples/layout-size">Sizing</a> examples.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/layout.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/pages"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Pages</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/cards"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Cards »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#grid-system" class="table-of-contents__link">Grid system</a></li><li><a href="#the-box-attribute" class="table-of-contents__link">The box attribute</a></li><li><a href="#why-a-fixed-grid" class="table-of-contents__link">Why a fixed grid?</a></li><li><a href="#other-layout-options" class="table-of-contents__link">Other layout options</a></li><li><a href="#see-also" class="table-of-contents__link">See also</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/472f8a66.59021c64.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/logging/index.html b/docs/docs/logging/index.html
index ba9ca95f40..d0d7b6e5ac 100644
--- a/docs/docs/logging/index.html
+++ b/docs/docs/logging/index.html
@@ -5,32 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Logging | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Logging | H2O Wave"><meta data-react-helmet="true" name="description" content="Wave apps are plain Python programs. Use Python&#x27;s built-in logging module to configure logging."><meta data-react-helmet="true" property="og:description" content="Wave apps are plain Python programs. Use Python&#x27;s built-in logging module to configure logging."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/logging"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/logging"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/3abe8fb9.87518934.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/3abe8fb9.3bd27d47.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Logging</h1></header><div class="markdown"><p>Wave apps are plain Python programs. Use Python&#x27;s built-in <code>logging</code> module to configure logging.</p><p>Here&#x27;s a basic configuration that logs a ISO8601 timestamp, log level, and message:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Logging</h1></header><div class="markdown"><p>Wave apps are plain Python programs. Use Python&#x27;s built-in <code>logging</code> module to configure logging.</p><p>Here&#x27;s a basic configuration that logs a ISO8601 timestamp, log level, and message:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> logging</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">logging</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">basicConfig</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">format</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;%(asctime)s %(levelname)s %(message)s&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    logging</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">warning</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;All your base are belong to us&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain">    </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>The above snippet makes the app log a warning every time it is accessed. This is what the logged message look like:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">2010-12-12 11:41:42,612 WARNING All your base are belong to us</span></div></div></div></div></div><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>See <a href="https://docs.python.org/3/howto/logging.html" target="_blank" rel="noopener noreferrer">Python&#x27;s logging module</a> for more information.</p></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/logging.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/security"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Security</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/development"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Development »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/3abe8fb9.87518934.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    logging</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">warning</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;All your base are belong to us&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain">    </span></div></div></div></div></div><p>The above snippet makes the app log a warning every time it is accessed. This is what the logged message look like:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">2010-12-12 11:41:42,612 WARNING All your base are belong to us</span></div></div></div></div></div><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>See <a href="https://docs.python.org/3/howto/logging.html" target="_blank" rel="noopener noreferrer">Python&#x27;s logging module</a> for more information.</p></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/logging.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/security"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Security</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/cli"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Command Line Interface »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/3abe8fb9.3bd27d47.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/migrating-0-8/index.html b/docs/docs/migrating-0-8/index.html
new file mode 100644
index 0000000000..089cd5a4aa
--- /dev/null
+++ b/docs/docs/migrating-0-8/index.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="generator" content="Docusaurus v2.0.0-alpha.65">
+<title data-react-helmet="true">Migrating from 0.8 | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Migrating from 0.8 | H2O Wave"><meta data-react-helmet="true" name="description" content="H2O Wave v0.9.0+ introduces significant improvements to application performance and concurrency, and brings us closer to a v1.0 release. v1.0 will include the ability to increase the number of worker processes to scale apps, while preserving the simplicity of the Wave API."><meta data-react-helmet="true" property="og:description" content="H2O Wave v0.9.0+ introduces significant improvements to application performance and concurrency, and brings us closer to a v1.0 release. v1.0 will include the ability to increase the number of worker processes to scale apps, while preserving the simplicity of the Wave API."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/migrating-0-8"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/migrating-0-8"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/8caadd29.8215dca6.js" as="script">
+</head>
+<body>
+<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Migrating from 0.8</h1></header><div class="markdown"><p>H2O Wave v0.9.0+ introduces significant improvements to application performance and concurrency, and brings us closer to a v1.0 release. v1.0 will include the ability to increase the number of worker processes to scale apps, while preserving the simplicity of the Wave API.</p><p>Among other changes, the Wave server executable <code>wave</code> is now called <code>waved</code> (or <code>waved.exe</code>), and the <code>h2o-wave</code> Python package ships with a new CLI named <code>wave</code>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="asgi-compatibility"></a>ASGI Compatibility<a aria-hidden="true" tabindex="-1" class="hash-link" href="#asgi-compatibility" title="Direct link to heading">#</a></h2><p>Wave apps are now <a href="https://asgi.readthedocs.io/en/latest/" target="_blank" rel="noopener noreferrer">ASGI</a>-compatible, based on the <a href="https://www.techempower.com/benchmarks/#section=data-r17&amp;hw=ph&amp;test=fortune&amp;l=zijzen-1" target="_blank" rel="noopener noreferrer">high-performance</a> <a href="https://www.uvicorn.org" target="_blank" rel="noopener noreferrer">Uvicorn</a> / <a href="https://www.starlette.io/" target="_blank" rel="noopener noreferrer">Starlette</a> duo.</p><p>You can run Wave apps behind any ASGI server, like <a href="https://www.uvicorn.org" target="_blank" rel="noopener noreferrer">uvicorn</a>, <a href="https://gunicorn.org/" target="_blank" rel="noopener noreferrer">gunicorn</a>, <a href="https://github.com/django/daphne/" target="_blank" rel="noopener noreferrer">daphne</a>, <a href="https://pgjones.gitlab.io/hypercorn/" target="_blank" rel="noopener noreferrer">hypercorn</a>, etc.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="old-way"></a>Old way<a aria-hidden="true" tabindex="-1" class="hash-link" href="#old-way" title="Direct link to heading">#</a></h3><p>In versions &lt;= v0.8.0, a skeleton app looked like this:</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">foo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-python codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">pass</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>The above app could be run like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">venv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> $ python foo.py</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="new-way"></a>New way<a aria-hidden="true" tabindex="-1" class="hash-link" href="#new-way" title="Direct link to heading">#</a></h3><p>In versions v0.9.0+, a skeleton app looks like this:</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">foo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-python codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> Q</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">pass</span></div></div></div></div></div><p>Notably:</p><ol><li><code>listen(route)</code> has been replaced by an <code>@app(route)</code> decorator on the <code>serve()</code> function.</li><li><code>main</code> needs to be imported into the file (but you don&#x27;t have to do anything with the symbol <code>main</code> other than simply <code>import</code> it).</li></ol><p>The above app can be run using <code>wave run</code>, built into the new <code>wave</code> command line interface. </p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">venv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> $ wave run foo</span></div></div></div></div></div><p>The <code>wave run</code> command runs your app using live-reload, which means you can view your changes live as you code, without having to refresh your browser manually.</p><p>To run your app without live-reload, simply pass <code>--no-reload</code>:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">venv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> $ wave run --no-reload foo</span></div></div></div></div></div><p>To run your app using an ASGI server like uvicorn, append <code>:main</code> to the <code>app</code> argument:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">venv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> $ uvicorn foo:main</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/migrating-0-8.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/change-log"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Change Log</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/migrating-0"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Migrating from pre-alpha »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#asgi-compatibility" class="table-of-contents__link">ASGI Compatibility</a><ul><li><a href="#old-way" class="table-of-contents__link">Old way</a></li><li><a href="#new-way" class="table-of-contents__link">New way</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/8caadd29.8215dca6.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/docs/migrating-0/index.html b/docs/docs/migrating-0/index.html
index a74d795d07..c748a8e07f 100644
--- a/docs/docs/migrating-0/index.html
+++ b/docs/docs/migrating-0/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Migrating from pre-alpha | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Migrating from pre-alpha | H2O Wave"><meta data-react-helmet="true" name="description" content="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."><meta data-react-helmet="true" property="og:description" content="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."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/migrating-0"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/migrating-0"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/0fd1debb.be1ccbf3.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/0fd1debb.b46ad397.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Migrating from pre-alpha</h1></header><div class="markdown"><p>Before you begin, it is highly recommended that you <a href="https://github.com/h2oai/wave/releases" target="_blank" rel="noopener noreferrer">download</a> a release and run the interactive <code>tour.py</code> that ships with the release to get a feel for what Wave programs look like in practice.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="what-has-changed"></a>What has changed?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#what-has-changed" title="Direct link to heading">#</a></h2><p>From an app-development perspective, the most important change is that Wave is more of a library rather than a framework.</p><p>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 <code>import h2o_wave</code> and execute via:</p><ul><li>The command line: <code>python3 my_script.py</code>.</li><li>In the Python REPL.</li><li>In a Jupyter notebook.</li><li>In your favorite IDE (PyCharm, VSCode, etc.).</li></ul><p>This also means that you can apply breakpoints and debug or step-through your program in your debugger of choice.</p><p>From an information architecture perspective, control has been inverted: instead of your app being an extension to Wave&#x27;s data/prep/search features, Wave&#x27;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&#x27;s UI, your app now occupies the entire UI.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="breaking-changes"></a>Breaking changes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#breaking-changes" title="Direct link to heading">#</a></h2><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="removed-qapp-qui-annotations"></a>Removed: <code>@Q.app</code>, <code>@Q.ui</code> annotations.<a aria-hidden="true" tabindex="-1" class="hash-link" href="#removed-qapp-qui-annotations" title="Direct link to heading">#</a></h4><p>Instead, define a <code>async</code> request-handling function, say <code>main()</code>, and pass that function to <code>listen()</code>, like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Migrating from pre-alpha</h1></header><div class="markdown"><p>Before you begin, it is highly recommended that you <a href="https://github.com/h2oai/wave/releases" target="_blank" rel="noopener noreferrer">download</a> a release and run the interactive <code>tour.py</code> that ships with the release to get a feel for what Wave programs look like in practice.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="what-has-changed"></a>What has changed?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#what-has-changed" title="Direct link to heading">#</a></h2><p>From an app-development perspective, the most important change is that Wave is more of a library rather than a framework.</p><p>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 <code>import h2o_wave</code> and execute via:</p><ul><li>The command line: <code>python3 my_script.py</code>.</li><li>In the Python REPL.</li><li>In a Jupyter notebook.</li><li>In your favorite IDE (PyCharm, VSCode, etc.).</li></ul><p>This also means that you can apply breakpoints and debug or step-through your program in your debugger of choice.</p><p>From an information architecture perspective, control has been inverted: instead of your app being an extension to Wave&#x27;s data/prep/search features, Wave&#x27;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&#x27;s UI, your app now occupies the entire UI.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="breaking-changes"></a>Breaking changes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#breaking-changes" title="Direct link to heading">#</a></h2><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="removed-qapp-qui-annotations"></a>Removed: <code>@Q.app</code>, <code>@Q.ui</code> annotations.<a aria-hidden="true" tabindex="-1" class="hash-link" href="#removed-qapp-qui-annotations" title="Direct link to heading">#</a></h4><p>Instead, define a <code>async</code> request-handling function, say <code>main()</code>, and pass that function to <code>listen()</code>, like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token keyword" style="font-style:italic">pass</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/my/app/route&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="removed-qwait-qshow-qfail-qexit"></a>Removed: <code>q.wait()</code>, <code>q.show()</code>, <code>q.fail()</code>, <code>q.exit()</code>.<a aria-hidden="true" tabindex="-1" class="hash-link" href="#removed-qwait-qshow-qfail-qexit" title="Direct link to heading">#</a></h4><p>The above four methods were the primary mechanism to make changes to your app&#x27;s UI. They have all been replaced with a single <code>h2o_wave.core.Page.save()</code> method.</p><p>The new technique is:</p><ol><li>Access the page or card you want to modify.</li><li>Modify the page or card.</li><li>Call <code>h2o_wave.core.Page.save()</code> to save your changes and update the browser page.</li></ol><p>Before:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">wait</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  callback_function</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;next&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Next&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>After:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;my_card&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># A card with its top-left corner at column 1, row 5; 2 columns wide and 4 rows high.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 5 2 4&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;next&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Next&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>Note that the <em>After</em> example requires a <code>box</code> 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.</p><p>The same technique can be used to update the UI again (or display intermediate results):</p><p>Before:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">wait</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  callback_function</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;next&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Next&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>After:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Don&#x27;t have to recreate the entire form again; simply replace its items and save the page.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;my_card&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;next&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Next&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="removed-callback-functions-for-request-handling"></a>Removed: callback functions for request-handling.<a aria-hidden="true" tabindex="-1" class="hash-link" href="#removed-callback-functions-for-request-handling" title="Direct link to heading">#</a></h4><p>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.</p><p>Instead, all requests are routed to a single function, and you can decide how to organize your application logic by branching on <code>q.args.*</code>.</p><p>Before:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">step1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">wait</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    step2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;next&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Next&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">step2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">wait</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    step3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Step 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;next&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Next&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -26,16 +26,16 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;my_card&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> items</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/my/app/route&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="removed-qdashboard-and-qnotebook"></a>Removed: <code>q.dashboard()</code> and <code>q.notebook()</code>.<a aria-hidden="true" tabindex="-1" class="hash-link" href="#removed-qdashboard-and-qnotebook" title="Direct link to heading">#</a></h4><p>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 <code>ui.*_card()</code> APIs. Also see the <a href="#dashboard">dashboard</a>, <a href="#layout-position">layout</a> and <a href="#layout-size">sizing</a> examples to learn how to lay out several cards on a page.</p><p>If you want to display a notebook-style vertical stack of markdown, html or other content, use <code>h2o_wave.ui.text()</code> and <code>h2o_wave.ui.frame()</code> contained inside a <code>h2o_wave.ui.form_card()</code>, like this:</p><p>Before:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">notebook</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">notebook_section</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_cell</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">frame_cell</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">source</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">html_foo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;200px&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_cell</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Bar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">frame_cell</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">source</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">html_bar</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;200px&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div></div></div></div></div><p>After: Note the parameter name change <code>frame_cell(source=...)</code> to <code>frame(content=...)</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 5 2 4&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">frame</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">html_foo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;200px&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Bar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">frame</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">html_bar</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> height</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;200px&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="changed-uibuttons-uiexpander-and-uitabs-accept-a-list-of-items-instead-of-var-args-args"></a>Changed: <code>ui.buttons()</code>, <code>ui.expander()</code> and <code>ui.tabs()</code> accept a <code>list</code> of items instead of var args <code>*args</code>.<a aria-hidden="true" tabindex="-1" class="hash-link" href="#changed-uibuttons-uiexpander-and-uitabs-accept-a-list-of-items-instead-of-var-args-args" title="Direct link to heading">#</a></h4><p>Before:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buttons</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>After:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buttons</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Note enclosing [ ]</span></div></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="changed-qupload-changed-to-qsiteupload"></a>Changed: <code>q.upload()</code> changed to <code>q.site.upload()</code>.<a aria-hidden="true" tabindex="-1" class="hash-link" href="#changed-qupload-changed-to-qsiteupload" title="Direct link to heading">#</a></h4><p>The <code>upload()</code> method has been moved to the <code>h2o_wave.core.Site</code> instance, since each <code>h2o_wave.core.Site</code> represents a distinct server, and makes it possible to control multiple sites from a single Python script.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="changed-qargsfoo-changed-to-qclientfoo"></a>Changed: <code>q.args.foo=</code> changed to <code>q.client.foo=</code>.<a aria-hidden="true" tabindex="-1" class="hash-link" href="#changed-qargsfoo-changed-to-qclientfoo" title="Direct link to heading">#</a></h4><p>Setting attributes on <code>q.args</code> (e.g. <code>q.args.foo = &#x27;bar&#x27;</code>) is no longer preserved between requests. This was the primary mechanism employed previously to preserve data between requests.</p><p>Instead, Wave provides 4 mechanisms for preserving data between requests:</p><ol><li><strong>Process-level</strong>: Use global variables.</li><li><strong>App-level</strong>: Use <code>q.app.foo = &#x27;bar&#x27;</code> to save; access <code>q.app.foo</code> to read it back again.</li><li><strong>User-level</strong>: Use <code>q.user.foo = &#x27;bar&#x27;</code> to save; access <code>q.user.foo</code> to read it back again.</li><li><strong>Client-level</strong>: Use <code>q.client.foo = &#x27;bar&#x27;</code> to save; access <code>q.client.foo</code> to read it back again.</li></ol><p>Here, <em>Client</em> refers to a distinct tab in a browser.</p><p>If you want to rely on the old behavior of preserving <code>q.args</code> for the lifetime of the application, copy <code>q.args</code> to <code>q.client</code> like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> copy_expando</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">copy_expando</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> exclude_keys</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;back2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;select_target&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;restart&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="changed-no-need-to-json-serialize-values-to-preserve-them-between-requests"></a>Changed: No need to JSON-serialize values to preserve them between requests.<a aria-hidden="true" tabindex="-1" class="hash-link" href="#changed-no-need-to-json-serialize-values-to-preserve-them-between-requests" title="Direct link to heading">#</a></h4><p><code>q.args.foo=</code> only supported JSON-serialized values. No such restrictions exist for the <code>q.app</code>, <code>q.user</code> and <code>q.client</code> containers. You could, for example, load a Pandas dataframe and set <code>q.user.df = my_df</code>, and the dataframe will be accessible across requests for the lifetime of the app.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/migrating-0.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/change-log"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Change Log</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/contributing"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Contributing »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#what-has-changed" class="table-of-contents__link">What has changed?</a></li><li><a href="#breaking-changes" class="table-of-contents__link">Breaking changes</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/0fd1debb.be1ccbf3.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">copy_expando</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> exclude_keys</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;back2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;select_target&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;restart&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="changed-no-need-to-json-serialize-values-to-preserve-them-between-requests"></a>Changed: No need to JSON-serialize values to preserve them between requests.<a aria-hidden="true" tabindex="-1" class="hash-link" href="#changed-no-need-to-json-serialize-values-to-preserve-them-between-requests" title="Direct link to heading">#</a></h4><p><code>q.args.foo=</code> only supported JSON-serialized values. No such restrictions exist for the <code>q.app</code>, <code>q.user</code> and <code>q.client</code> containers. You could, for example, load a Pandas dataframe and set <code>q.user.df = my_df</code>, and the dataframe will be accessible across requests for the lifetime of the app.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/migrating-0.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/migrating-0-8"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Migrating from 0.8</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/contributing"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Contributing »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#what-has-changed" class="table-of-contents__link">What has changed?</a></li><li><a href="#breaking-changes" class="table-of-contents__link">Breaking changes</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/0fd1debb.b46ad397.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/pages/index.html b/docs/docs/pages/index.html
index 6f44894deb..95559e222f 100644
--- a/docs/docs/pages/index.html
+++ b/docs/docs/pages/index.html
@@ -5,29 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Pages | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Pages | H2O Wave"><meta data-react-helmet="true" name="description" content="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."><meta data-react-helmet="true" property="og:description" content="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."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/pages"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/pages"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/a64331b1.77fcee94.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/a64331b1.a104ef64.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Pages</h1></header><div class="markdown"><p>The Wave server stores and manages content. Content is stored in a page cache, called a <em>site</em>. A Wave server contains exactly one site. A site holds a collection of <em>pages</em>. A page is composed of <em>cards</em>. Cards hold content and <a href="/wave/docs/buffers">data buffers</a>.</p><p>To reference a site from within a Wave script, import <code>site</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span></div></div></div></div></div><p><code>site</code> is a dictionary-like object. </p><p>To reference the current site from within a Wave app, use <code>q.site</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    site </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">site</span></div></div></div></div></div><p>To reference a page hosted at <code>/foo</code>, use <code>site[&#x27;/foo&#x27;]</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><p>To reference the current page in a Wave app, use <code>q.page</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span></div></div></div></div></div><p><code>page</code> is also a dictionary-like object. To reference a card named <code>foo</code>, use <code>page[&#x27;foo&#x27;]</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><p>There are two ways to add a card to a page.</p><p>The first way is to assign a new card to <code>page[&#x27;foo&#x27;]</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> card</span></div></div></div></div></div><p>The second way is to use <code>page.add()</code>. This is useful when you want to add a card to a page and obtain a reference to the new card.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>The following two forms are equivalent. The second form is more concise.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>To delete a card named <code>foo</code> from a page, use <code>del page[&#x27;foo&#x27;]</code>:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">del</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><p>Assigning a card to <code>page[&#x27;foo&#x27;]</code> replaces any previously assigned card named <code>foo</code>. Therefore, the following two forms are equivalent. The second form is more concise, hence preferred.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> card1</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">del</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> card2</span></div></div></div></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> card1</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> card2</span></div></div></div></div></div><p>To save a page from within a Wave script, use <code>page.save()</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>To save the active page from within a Wave app, use <code>q.page.save()</code>. </p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</h5></div><div class="admonition-content"><p><code>q.page.save()</code> is an <code>async</code> function, so you must <code>await</code> while calling it.</p></div></div><p>You don&#x27;t need to explicitly create a new page. A page is automatically created on save if it doesn&#x27;t exist.</p><p>To delete the page hosted at <code>/foo</code>, use <code>page.drop()</code> or <code>del site[&#x27;/foo&#x27;]</code>. The following three forms are equivalent.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">drop</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">drop</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">del</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span></div></div></div></div></div><p>Deleting a page automatically drops all cards associated with that page. Conversely, to delete all cards from a page, simply delete the page.</p><p>To clear all cards in the active page from within a Wave app, use <code>q.page.drop()</code>:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">drop</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/pages.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/apps"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Wave Apps</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/layout"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Layout »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/a64331b1.77fcee94.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Pages</h1></header><div class="markdown"><p>The Wave server stores and manages content. Content is stored in a page cache, called a <em>site</em>. A Wave server contains exactly one site. A site holds a collection of <em>pages</em>. A page is composed of <em>cards</em>. Cards hold content and <a href="/wave/docs/buffers">data buffers</a>.</p><p>To reference a site from within a Wave script, import <code>site</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span></div></div></div></div></div><p><code>site</code> is a dictionary-like object.</p><p>To reference the current site from within a Wave app, use <code>q.site</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    site </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">site</span></div></div></div></div></div><p>To reference a page hosted at <code>/foo</code>, use <code>site[&#x27;/foo&#x27;]</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><p>To reference the current page in a Wave app, use <code>q.page</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span></div></div></div></div></div><p><code>page</code> is also a dictionary-like object. To reference a card named <code>foo</code>, use <code>page[&#x27;foo&#x27;]</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><p>There are two ways to add a card to a page.</p><p>The first way is to assign a new card to <code>page[&#x27;foo&#x27;]</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> card</span></div></div></div></div></div><p>The second way is to use <code>page.add()</code>. This is useful when you want to add a card to a page and obtain a reference to the new card.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>The following two forms are equivalent. The second form is more concise.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>To delete a card named <code>foo</code> from a page, use <code>del page[&#x27;foo&#x27;]</code>:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">del</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><p>Assigning a card to <code>page[&#x27;foo&#x27;]</code> replaces any previously assigned card named <code>foo</code>. Therefore, the following two forms are equivalent. The second form is more concise, hence preferred.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> card1</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">del</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> card2</span></div></div></div></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> card1</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> card2</span></div></div></div></div></div><p>To save a page from within a Wave script, use <code>page.save()</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>To save the active page from within a Wave app, use <code>q.page.save()</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</h5></div><div class="admonition-content"><p><code>q.page.save()</code> is an <code>async</code> function, so you must <code>await</code> while calling it.</p></div></div><p>You don&#x27;t need to explicitly create a new page. A page is automatically created on save if it doesn&#x27;t exist.</p><p>To delete the page hosted at <code>/foo</code>, use <code>page.drop()</code> or <code>del site[&#x27;/foo&#x27;]</code>. The following three forms are equivalent.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">drop</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">drop</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">del</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><p>Deleting a page automatically drops all cards associated with that page. Conversely, to delete all cards from a page, simply delete the page.</p><p>To clear all cards in the active page from within a Wave app, use <code>q.page.drop()</code>:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">drop</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>To update other (non-app) pages from within an app, use <code>AsyncSite</code>:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> AsyncSite</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">site </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> AsyncSite</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;bar&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> card</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/pages.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/apps"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Wave Apps</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/layout"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Layout »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/a64331b1.a104ef64.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/plotting/index.html b/docs/docs/plotting/index.html
index 19cacf843f..f3d5033de6 100644
--- a/docs/docs/plotting/index.html
+++ b/docs/docs/plotting/index.html
@@ -5,31 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Plots | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Plots | H2O Wave"><meta data-react-helmet="true" name="description" content="Wave provides a versatile plotting API based on Leland Wilkinson&#x27;s Grammar of Graphics."><meta data-react-helmet="true" property="og:description" content="Wave provides a versatile plotting API based on Leland Wilkinson&#x27;s Grammar of Graphics."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/plotting"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/plotting"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/e8c1c6e8.de38f0bd.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/e8c1c6e8.5a21f0e6.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plots</h1></header><div class="markdown"><p>Wave provides a versatile plotting API based on <a href="https://en.wikipedia.org/wiki/Leland_Wilkinson" target="_blank" rel="noopener noreferrer">Leland Wilkinson&#x27;s</a> <a href="http://www.springer.com/gp/book/9780387245447" target="_blank" rel="noopener noreferrer">Grammar of Graphics</a>.</p><p>A <em>plot</em> is a layered graphic, created using <code>ui.plot()</code>. Each layer displays <em>marks</em>, described by <code>ui.mark()</code>. The layers are rendered on top of each other to produce the final plot.</p><p><code>ui.mark()</code> describes a collection of marks, not one mark. Since each <code>ui.mark()</code> describes one layer in the plot, it follows that all the marks on a layer are of the same <code>type</code> (its <em>geometry</em>). A mark&#x27;s <code>type</code> can be one of <code>point</code>, <code>interval</code>, <code>line</code>, <code>path</code>, <code>area</code>, <code>polygon</code>, <code>schema</code>, <code>edge</code>.</p><p>There are two ways to add plots to a page:</p><ul><li>Use a plot card (<code>ui.plot_card()</code>) and set its <code>plot</code> attribute using <code>ui.plot()</code>.</li><li>Use a form card (<code>ui.form_card()</code>), insert a visualization (<code>ui.visualization()</code>) and set its <code>plot</code> attribute using <code>ui.plot()</code>.</li></ul><p>Here&#x27;s a short example that renders a scatterplot of random values between [0, 1].</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Plots</h1></header><div class="markdown"><p>Wave provides a versatile plotting API based on <a href="https://en.wikipedia.org/wiki/Leland_Wilkinson" target="_blank" rel="noopener noreferrer">Leland Wilkinson&#x27;s</a> <a href="http://www.springer.com/gp/book/9780387245447" target="_blank" rel="noopener noreferrer">Grammar of Graphics</a>.</p><p>A <em>plot</em> is a layered graphic, created using <code>ui.plot()</code>. Each layer displays <em>marks</em>, described by <code>ui.mark()</code>. The layers are rendered on top of each other to produce the final plot.</p><p><code>ui.mark()</code> describes a collection of marks, not one mark. Since each <code>ui.mark()</code> describes one layer in the plot, it follows that all the marks on a layer are of the same <code>type</code> (its <em>geometry</em>). A mark&#x27;s <code>type</code> can be one of <code>point</code>, <code>interval</code>, <code>line</code>, <code>path</code>, <code>area</code>, <code>polygon</code>, <code>schema</code>, <code>edge</code>.</p><p>There are two ways to add plots to a page:</p><ul><li>Use a plot card (<code>ui.plot_card()</code>) and set its <code>plot</code> attribute using <code>ui.plot()</code>.</li><li>Use a form card (<code>ui.form_card()</code>), insert a visualization (<code>ui.visualization()</code>) and set its <code>plot</code> attribute using <code>ui.plot()</code>.</li></ul><p>Here&#x27;s a short example that renders a scatterplot of random values between [0, 1].</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> random</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/demo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">v </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 5&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Point&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;price performance&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> rows</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">random</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> _ </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;point&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=performance&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p><code>ui.plot()</code> accepts a list of marks. <a href="/wave/docs/examples/plot-point-annotation">This example</a> renders annotations on top of a scatterplot, like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token builtin" style="color:rgb(130, 170, 255)">type</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;point&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=price&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;=performance&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x_max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_min</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y_max</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">100</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># the plot</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">50</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;point&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">40</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;vertical line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">40</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;horizontal line&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">70</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">60</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;vertical region&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">70</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">60</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;horizontal region&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">mark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">x</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> x0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">30</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> y0</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">20</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;rectangular region&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="point"></a>Point<a aria-hidden="true" tabindex="-1" class="hash-link" href="#point" title="Direct link to heading">#</a></h2><ul><li><a href="/wave/docs/examples/plot-point">Basic</a>: Make a scatterplot.</li><li><a href="/wave/docs/examples/plot-point-shapes">Shapes</a>: Make a scatterplot with categories encoded as mark shapes.</li><li><a href="/wave/docs/examples/plot-point-sizes">Sizes</a>: Make a scatterplot with mark sizes mapped to a continuous variable (a &quot;bubble plot&quot;).</li><li><a href="/wave/docs/examples/plot-point-map">Map</a>: Make a plot to compare quantities across categories. Similar to a heatmap, but using size-encoding instead of color-encoding.</li><li><a href="/wave/docs/examples/plot-point-groups">Groups</a>: Make a scatterplot with categories encoded as colors.</li><li><a href="/wave/docs/examples/plot-point-annotation">Annotation</a>: Add annotations (points, lines and regions) to a plot.</li><li><a href="/wave/docs/examples/plot-point-custom">Custom</a>: Customize a plot&#x27;s fill/stroke color, size and opacity.</li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="interval"></a>Interval<a aria-hidden="true" tabindex="-1" class="hash-link" href="#interval" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="columns"></a>Columns<a aria-hidden="true" tabindex="-1" class="hash-link" href="#columns" title="Direct link to heading">#</a></h3><ul><li><a href="/wave/docs/examples/plot-interval">Basic</a>: Make a column plot.</li><li><a href="/wave/docs/examples/plot-interval-groups">Groups</a>: Make a grouped column plot.</li><li><a href="/wave/docs/examples/plot-interval-range">Range</a>: Make a column plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.</li><li><a href="/wave/docs/examples/plot-interval-labels">Labels</a>: Make a column plot with labels on each bar.</li><li><a href="/wave/docs/examples/plot-interval-stacked">Stacked</a>: Make a stacked column plot.</li><li><a href="/wave/docs/examples/plot-interval-stacked-grouped">Stacked, Grouped</a>: Make a column plot with both stacked and grouped bars.</li><li><a href="/wave/docs/examples/plot-interval-annotation">Annotation</a>: Add annotations to a column plot.</li><li><a href="/wave/docs/examples/plot-interval-theta">Theta</a>: Make a &quot;racetrack&quot; plot (a column plot in polar coordinates).</li></ul><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="bars"></a>Bars<a aria-hidden="true" tabindex="-1" class="hash-link" href="#bars" title="Direct link to heading">#</a></h3><ul><li><a href="/wave/docs/examples/plot-interval-transpose">Basic</a>: Make a bar plot.</li><li><a href="/wave/docs/examples/plot-interval-groups-transpose">Groups</a>: Make a grouped bar plot.</li><li><a href="/wave/docs/examples/plot-interval-range-transpose">Range</a>: Make a bar plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.</li><li><a href="/wave/docs/examples/plot-interval-stacked-transpose">Stacked</a>: Make a stacked bar plot.</li><li><a href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Stacked, Grouped</a>: Make a bar plot with both stacked and grouped bars.</li><li><a href="/wave/docs/examples/plot-interval-annotation-transpose">Annotation</a>: Add annotations to a bar plot.</li><li><a href="/wave/docs/examples/plot-interval-polar">Polar</a>: Make a rose plot (a bar plot in polar coordinates).</li><li><a href="/wave/docs/examples/plot-interval-polar-stacked">Polar, Stacked</a>: Make a stacked rose plot (a stacked bar plot in polar coordinates).</li><li><a href="/wave/docs/examples/plot-interval-helix">Helix</a>: Make a bar plot in helical coordinates.</li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="line"></a>Line<a aria-hidden="true" tabindex="-1" class="hash-link" href="#line" title="Direct link to heading">#</a></h2><ul><li><a href="/wave/docs/examples/plot-line">Basic</a>: Make a line plot.</li><li><a href="/wave/docs/examples/plot-line-groups">Groups</a>: Make a multi-series line plot.</li><li><a href="/wave/docs/examples/plot-line-smooth">Smooth</a>: Make a line plot using a smooth curve.</li><li><a href="/wave/docs/examples/plot-step">Step</a>: Make a line plot with a step curve.</li><li><a href="/wave/docs/examples/plot-step-after">Step, After</a>: Make a line plot with a step-after curve.</li><li><a href="/wave/docs/examples/plot-step-before">Step, Before</a>: Make a line plot with a step-before curve.</li><li><a href="/wave/docs/examples/plot-line-labels">Labels</a>: Add labels to a line plot.</li><li><a href="/wave/docs/examples/plot-line-labels-stroked">Labels, Stroked</a>: Customize label rendering: add a subtle outline to labels to improve readability.</li><li><a href="/wave/docs/examples/plot-line-labels-no-overlap">Labels, Occlusion</a>: Make a line plot with non-overlapping labels.</li><li><a href="/wave/docs/examples/plot-line-annotation">Annotation</a>: Add annotations to a line plot.</li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="path"></a>Path<a aria-hidden="true" tabindex="-1" class="hash-link" href="#path" title="Direct link to heading">#</a></h2><ul><li><a href="/wave/docs/examples/plot-path">Basic</a>: Make a path plot.</li><li><a href="/wave/docs/examples/plot-path-point">Point</a>: Make a path plot with an additional layer of points.</li><li><a href="/wave/docs/examples/plot-path-smooth">Smooth</a>: Make a path plot with a smooth curve.</li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="area"></a>Area<a aria-hidden="true" tabindex="-1" class="hash-link" href="#area" title="Direct link to heading">#</a></h2><ul><li><a href="/wave/docs/examples/plot-area">Basic</a>: Make an area plot.</li><li><a href="/wave/docs/examples/plot-area-groups">Groups</a>: Make an area plot showing multiple categories.</li><li><a href="/wave/docs/examples/plot-area-negative">Negative</a>: Make an area plot showing positive and negative values.</li><li><a href="/wave/docs/examples/plot-area-range">Range</a>: Make an area plot representing a range (band) of values.</li><li><a href="/wave/docs/examples/plot-area-smooth">Smooth</a>: Make an area plot with a smooth curve.</li><li><a href="/wave/docs/examples/plot-area-stacked">Stacked</a>: Make a stacked area plot.</li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="area--line"></a>Area + Line<a aria-hidden="true" tabindex="-1" class="hash-link" href="#area--line" title="Direct link to heading">#</a></h2><ul><li><a href="/wave/docs/examples/plot-area-line">Area + Line</a>: Make an area plot with an additional line layer on top.</li><li><a href="/wave/docs/examples/plot-area-line-smooth">Area + Smooth</a>: Make a combined area + line plot using a smooth curve.</li><li><a href="/wave/docs/examples/plot-area-line-groups">Area + Groups</a>: Make an combined area + line plot showing multiple categories.</li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="polygon"></a>Polygon<a aria-hidden="true" tabindex="-1" class="hash-link" href="#polygon" title="Direct link to heading">#</a></h2><ul><li><a href="/wave/docs/examples/plot-polygon">Basic</a>: Make a heatmap.</li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="schema"></a>Schema<a aria-hidden="true" tabindex="-1" class="hash-link" href="#schema" title="Direct link to heading">#</a></h2><ul><li><a href="/wave/docs/examples/plot-histogram">Histogram</a>: Make a histogram.</li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="other"></a>Other<a aria-hidden="true" tabindex="-1" class="hash-link" href="#other" title="Direct link to heading">#</a></h2><ul><li><a href="/wave/docs/examples/plot-axis-title">Axis Titles</a>: Display custom axis titles on a plot.</li><li><a href="/wave/docs/examples/plot-form">Form</a>: Display a plot inside a form.</li></ul></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/plotting.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/files"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Files</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/graphics"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Graphics »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#point" class="table-of-contents__link">Point</a></li><li><a href="#interval" class="table-of-contents__link">Interval</a><ul><li><a href="#columns" class="table-of-contents__link">Columns</a></li><li><a href="#bars" class="table-of-contents__link">Bars</a></li></ul></li><li><a href="#line" class="table-of-contents__link">Line</a></li><li><a href="#path" class="table-of-contents__link">Path</a></li><li><a href="#area" class="table-of-contents__link">Area</a></li><li><a href="#area--line" class="table-of-contents__link">Area + Line</a></li><li><a href="#polygon" class="table-of-contents__link">Polygon</a></li><li><a href="#schema" class="table-of-contents__link">Schema</a></li><li><a href="#other" class="table-of-contents__link">Other</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/e8c1c6e8.de38f0bd.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/e8c1c6e8.5a21f0e6.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/realtime/index.html b/docs/docs/realtime/index.html
index e695f99abd..9e0e194fd6 100644
--- a/docs/docs/realtime/index.html
+++ b/docs/docs/realtime/index.html
@@ -5,31 +5,30 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Realtime Sync | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Realtime Sync | H2O Wave"><meta data-react-helmet="true" name="description" content="Wave&#x27;s realtime sync feature enables all connected users to see up to date content."><meta data-react-helmet="true" property="og:description" content="Wave&#x27;s realtime sync feature enables all connected users to see up to date content."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/realtime"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/realtime"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/6405c95c.3af35c12.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/6405c95c.cefe993a.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Realtime Sync</h1></header><div class="markdown"><p>Wave&#x27;s realtime sync feature enables all connected users to see up to date content. </p><p>Pages created by Wave scripts are automatically synced across all users. </p><p>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&#x27;re trying to solve, it&#x27;s up to you to decide whether your app&#x27;s UI should be synced across all users, synced across one user, or not synced at all.</p><p>To enable realtime sync in a Wave app, pass the <code>mode</code> argument to <code>listen()</code>:</p><ul><li><code>mode=&#x27;broadcast&#x27;</code> syncs across all users.</li><li><code>mode=&#x27;multicast&#x27;</code> syncs across one user (in other words, all the clients for that user).</li><li><code>mode=&#x27;unicast&#x27;</code> disables sync. This is the default.</li></ul><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">pass</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> mode</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;broadcast&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>If you change the mode, make sure you store run-time state appropriate to the mode. Generally:</p><table><thead><tr><th><code>mode</code></th><th>Store state in</th></tr></thead><tbody><tr><td><code>broadcast</code></td><td><code>q.app</code></td></tr><tr><td><code>multicast</code></td><td><code>q.user</code></td></tr><tr><td><code>unicast</code></td><td><code>q.client</code></td></tr></tbody></table></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/realtime.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/routing"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Routing</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/expressions"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Data-binding »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/6405c95c.3af35c12.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Realtime Sync</h1></header><div class="markdown"><p>Wave&#x27;s realtime sync feature enables all connected users to see up to date content. </p><p>Pages created by Wave scripts are automatically synced across all users. </p><p>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&#x27;re trying to solve, it&#x27;s up to you to decide whether your app&#x27;s UI should be synced across all users, synced across one user, or not synced at all.</p><p>To enable realtime sync in a Wave app, pass the <code>mode</code> argument to <code>@app()</code>:</p><ul><li><code>mode=&#x27;broadcast&#x27;</code> syncs across all users.</li><li><code>mode=&#x27;multicast&#x27;</code> syncs across one user (in other words, all the clients for that user).</li><li><code>mode=&#x27;unicast&#x27;</code> disables sync. This is the default.</li></ul><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> mode</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;broadcast&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">pass</span></div></div></div></div></div><p>If you change the mode, make sure you store run-time state appropriate to the mode. Generally:</p><table><thead><tr><th><code>mode</code></th><th>Store state in</th></tr></thead><tbody><tr><td><code>broadcast</code></td><td><code>q.app</code></td></tr><tr><td><code>multicast</code></td><td><code>q.user</code></td></tr><tr><td><code>unicast</code></td><td><code>q.client</code></td></tr></tbody></table></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/realtime.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/routing"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Routing</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/background"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Background Tasks »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/6405c95c.cefe993a.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/routing/index.html b/docs/docs/routing/index.html
index 3b8a00624a..8a7bb4fff6 100644
--- a/docs/docs/routing/index.html
+++ b/docs/docs/routing/index.html
@@ -5,40 +5,36 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Routing | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Routing | H2O Wave"><meta data-react-helmet="true" name="description" content="App routing"><meta data-react-helmet="true" property="og:description" content="App routing"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/routing"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/routing"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/f811e444.64e4a563.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/f811e444.acf97bbf.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Routing</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="app-routing"></a>App routing<a aria-hidden="true" tabindex="-1" class="hash-link" href="#app-routing" title="Direct link to heading">#</a></h2><p>Your Wave app gets hosted at the route you passed to <code>listen()</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">pass</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>To host your app at <code>localhost:55555/foo</code> or <code>www.example.com/foo</code>, pass <code>/foo</code> to <code>listen()</code>.</p><p>To host your app at <code>localhost:55555</code> or <code>www.example.com</code>, pass <code>/</code> to <code>listen()</code>. Do this if you plan to host exactly one app and nothing else.</p><p>You can host multiple apps behind a single Wave server.</p><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</h5></div><div class="admonition-content"><p><code>/foo</code> and <code>/foo/bar</code> are two distinct paths. <code>/foo/bar</code> is not interpreted as a sub-path of <code>/foo</code>.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="hash-routing"></a>Hash routing<a aria-hidden="true" tabindex="-1" class="hash-link" href="#hash-routing" title="Direct link to heading">#</a></h2><p>Wave apps support <em>hash routing</em>, a popular client-side mechanism where the location hash (the <code>baz/qux</code> in <code>/foo/bar#baz/qux</code>) can be used to decide which part of the UI to display.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="setting-the-location-hash"></a>Setting the location hash<a aria-hidden="true" tabindex="-1" class="hash-link" href="#setting-the-location-hash" title="Direct link to heading">#</a></h3><p>To set the location hash, prefix <code>#</code> to the <code>name</code> attribute of command-like components. When the command is invoked, the location hash is set to the name of the command.</p><p>For example, if a button is named <code>foo</code> is clicked, <code>q.args.foo</code> is set to <code>True</code>. Instead, if a button named <code>#foo</code> is clicked, the location hash is set to <code>foo</code> (<code>q.args.foo</code> is not set). </p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;sides&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 4&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#heads&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Heads&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#tails&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Tails&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/toss&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>Names don&#x27;t have to be alphanumeric, so you can use names with nested sub-paths like <code>#foo/bar</code>, <code>#foo/bar/baz</code>, <code>#foo/bar/baz/qux</code> to make route-handling more manageable.</p><p>The components that support setting a location hash are:</p><ul><li><code>ui.button()</code></li><li><code>ui.command()</code></li><li><code>ui.nav_item()</code></li><li><code>ui.tab()</code></li><li><code>ui.breadcrumb()</code></li></ul><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="getting-the-location-hash"></a>Getting the location hash<a aria-hidden="true" tabindex="-1" class="hash-link" href="#getting-the-location-hash" title="Direct link to heading">#</a></h3><p>To get the location hash, read <code>q.args[&#x27;#&#x27;]</code> (a string). If the route in the browser&#x27;s address bar is <code>/foo/bar#baz/qux</code>, <code>q.args[&#x27;#&#x27;]</code> is set to <code>baz/qux</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;heads&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">print</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Heads!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;tails&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">print</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Tails!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/toss&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="hash-route-switching"></a>Hash route switching<a aria-hidden="true" tabindex="-1" class="hash-link" href="#hash-route-switching" title="Direct link to heading">#</a></h3><p>Combining the two examples above gives us a basic pattern for handling routes and updating the user interface:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Routing</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="app-routing"></a>App routing<a aria-hidden="true" tabindex="-1" class="hash-link" href="#app-routing" title="Direct link to heading">#</a></h2><p>Your Wave app gets hosted at the route you passed to <code>@app()</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">pass</span></div></div></div></div></div><p>To host your app at <code>localhost:55555/foo</code> or <code>www.example.com/foo</code>, pass <code>/foo</code> to <code>@app()</code>.</p><p>To host your app at <code>localhost:55555</code> or <code>www.example.com</code>, pass <code>/</code> to <code>@app()</code>. Do this if you plan to host exactly one app and nothing else.</p><p>You can host multiple apps behind a single Wave server.</p><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</h5></div><div class="admonition-content"><p><code>/foo</code> and <code>/foo/bar</code> are two distinct paths. <code>/foo/bar</code> is not interpreted as a sub-path of <code>/foo</code>.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="hash-routing"></a>Hash routing<a aria-hidden="true" tabindex="-1" class="hash-link" href="#hash-routing" title="Direct link to heading">#</a></h2><p>Wave apps support <em>hash routing</em>, a popular client-side mechanism where the location hash (the <code>baz/qux</code> in <code>/foo/bar#baz/qux</code>) can be used to decide which part of the UI to display.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="setting-the-location-hash"></a>Setting the location hash<a aria-hidden="true" tabindex="-1" class="hash-link" href="#setting-the-location-hash" title="Direct link to heading">#</a></h3><p>To set the location hash, prefix <code>#</code> to the <code>name</code> attribute of command-like components. When the command is invoked, the location hash is set to the name of the command.</p><p>For example, if a button is named <code>foo</code> is clicked, <code>q.args.foo</code> is set to <code>True</code>. Instead, if a button named <code>#foo</code> is clicked, the location hash is set to <code>foo</code> (<code>q.args.foo</code> is not set). </p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/toss&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;sides&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 4&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#heads&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Heads&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#tails&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Tails&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>Names don&#x27;t have to be alphanumeric, so you can use names with nested sub-paths like <code>#foo/bar</code>, <code>#foo/bar/baz</code>, <code>#foo/bar/baz/qux</code> to make route-handling more manageable.</p><p>The components that support setting a location hash are:</p><ul><li><code>ui.button()</code></li><li><code>ui.command()</code></li><li><code>ui.nav_item()</code></li><li><code>ui.tab()</code></li><li><code>ui.breadcrumb()</code></li></ul><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="getting-the-location-hash"></a>Getting the location hash<a aria-hidden="true" tabindex="-1" class="hash-link" href="#getting-the-location-hash" title="Direct link to heading">#</a></h3><p>To get the location hash, read <code>q.args[&#x27;#&#x27;]</code> (a string). If the route in the browser&#x27;s address bar is <code>/foo/bar#baz/qux</code>, <code>q.args[&#x27;#&#x27;]</code> is set to <code>baz/qux</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/toss&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;heads&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">print</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Heads!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;tails&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">print</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Tails!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="hash-route-switching"></a>Hash route switching<a aria-hidden="true" tabindex="-1" class="hash-link" href="#hash-route-switching" title="Direct link to heading">#</a></h3><p>Combining the two examples above gives us a basic pattern for handling routes and updating the user interface:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/toss&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;heads&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;sides&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">message_bar</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Heads!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">hash</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">==</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;tails&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;sides&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">message_bar</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">text</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Tails!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;sides&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 4&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#heads&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Heads&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;#tails&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Tails&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/toss&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/routing.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/state"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« State</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/realtime"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Realtime Sync »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#app-routing" class="table-of-contents__link">App routing</a></li><li><a href="#hash-routing" class="table-of-contents__link">Hash routing</a><ul><li><a href="#setting-the-location-hash" class="table-of-contents__link">Setting the location hash</a></li><li><a href="#getting-the-location-hash" class="table-of-contents__link">Getting the location hash</a></li><li><a href="#hash-route-switching" class="table-of-contents__link">Hash route switching</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/f811e444.64e4a563.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/routing.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/state"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« State</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/realtime"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Realtime Sync »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#app-routing" class="table-of-contents__link">App routing</a></li><li><a href="#hash-routing" class="table-of-contents__link">Hash routing</a><ul><li><a href="#setting-the-location-hash" class="table-of-contents__link">Setting the location hash</a></li><li><a href="#getting-the-location-hash" class="table-of-contents__link">Getting the location hash</a></li><li><a href="#hash-route-switching" class="table-of-contents__link">Hash route switching</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/f811e444.acf97bbf.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/scripts/index.html b/docs/docs/scripts/index.html
index cd8ecc38ec..d4767f1598 100644
--- a/docs/docs/scripts/index.html
+++ b/docs/docs/scripts/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Wave Scripts | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Wave Scripts | H2O Wave"><meta data-react-helmet="true" name="description" content="A Wave script is the simplest way to publish content in Q, especially live web content:"><meta data-react-helmet="true" property="og:description" content="A Wave script is the simplest way to publish content in Q, especially live web content:"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/scripts"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/scripts"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/e833177e.5dba918c.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/e833177e.6f3c86db.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Wave Scripts</h1></header><div class="markdown"><p>A Wave script is the simplest way to publish content in Q, especially live web content:</p><ul><li>Dashboards and visualizations for live monitoring.</li><li>Live information displays: news, tickers, health, or performance data.</li></ul><p>A Wave script is one kind of program you can author to interact with Q. The other kind is a <a href="/wave/docs/apps">Wave App</a>. 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.</p><p>Here is the skeleton of a Wave script (<a href="/wave/docs/tutorial-hello">example</a>):</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Wave Scripts</h1></header><div class="markdown"><p>A Wave script is the simplest way to publish content in Q, especially live web content:</p><ul><li>Dashboards and visualizations for live monitoring.</li><li>Live information displays: news, tickers, health, or performance data.</li></ul><p>A Wave script is one kind of program you can author to interact with Q. The other kind is a <a href="/wave/docs/apps">Wave App</a>. 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.</p><p>Here is the skeleton of a Wave script (<a href="/wave/docs/tutorial-hello">example</a>):</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Grab a reference to a page</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Modify the page</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;qux&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">some_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Save the page</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>Here is the skeleton of a Wave script that continuously updates a page (<a href="/wave/docs/tutorial-monitor">example</a>):</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -31,15 +31,15 @@
 </span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Read data from somewhere</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">cpu_percent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> mem_usage</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disk_usage </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> read_system_stats</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Update card&#x27;s data</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">cpu_percent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> mem_usage</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> disk_usage</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Save the page</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>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.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/scripts.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/architecture"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Architecture</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/apps"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Wave Apps »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/e833177e.5dba918c.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/e833177e.6f3c86db.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/security/index.html b/docs/docs/security/index.html
index 11e4281297..1d523ec9a1 100644
--- a/docs/docs/security/index.html
+++ b/docs/docs/security/index.html
@@ -5,31 +5,30 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Security | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Security | H2O Wave"><meta data-react-helmet="true" name="description" content="HTTPS"><meta data-react-helmet="true" property="og:description" content="HTTPS"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/security"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/security"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/db32d859.e1958d34.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/db32d859.4bcf621d.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Security</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="https"></a>HTTPS<a aria-hidden="true" tabindex="-1" class="hash-link" href="#https" title="Direct link to heading">#</a></h2><p>To enable HTTP over TLS to secure your Wave server, pass the following flags when starting the Wave server:</p><ul><li><code>-tls-cert-file</code>: path to certificate file.</li><li><code>-tls-key-file</code>: path to private key file.</li></ul><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="self-signed-certificate"></a>Self Signed Certificate<a aria-hidden="true" tabindex="-1" class="hash-link" href="#self-signed-certificate" title="Direct link to heading">#</a></h3><p>To enable TLS during development, use a self-signed certificate.</p><p>To create a private key and a self-signed certificate from scratch, use <code>openssl</code>:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">openssl req \</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">   -newkey rsa:2048 -nodes -keyout domain.key \</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">   -x509 -days 365 -out domain.crt</span></div></div></div></div></div><p>The above command creates a 2048-bit private key (<code>domain.key</code>) and a self-signed x509 certificate (<code>domain.crt</code>) valid for 365 days.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="single-sign-on"></a>Single Sign On<a aria-hidden="true" tabindex="-1" class="hash-link" href="#single-sign-on" title="Direct link to heading">#</a></h2><p>Wave has built-in support for <a href="https://openid.net/connect/" target="_blank" rel="noopener noreferrer">OpenID Connect</a>.</p><p>To enable OpenID Connect, pass the following flags when starting the Wave server:</p><ul><li><code>-oidc-provider-url</code>: URL for authentication (the identity provider&#x27;s URL).</li><li><code>-oidc-redirect-url</code>: URL to redirect to after authentication.</li><li><code>-oidc-end-session-url</code>: URL to log out (or sign out).</li><li><code>-oidc-client-id</code>: Client ID (refer to your identity provider&#x27;s documentation).</li><li><code>-oidc-client-secret</code>:  Client secret (refer to your identity provider&#x27;s documentation).</li></ul><p>Once authenticated, you can access user&#x27;s authentication and authorization information from your app using <code>q.auth</code> (see the <a href="/wave/docs/api/server#auth">Auth</a> class for details):</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">print</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">auth</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">username</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">print</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">auth</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">subject</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/security.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/graphics"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Graphics</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/logging"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Logging »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#https" class="table-of-contents__link">HTTPS</a><ul><li><a href="#self-signed-certificate" class="table-of-contents__link">Self Signed Certificate</a></li></ul></li><li><a href="#single-sign-on" class="table-of-contents__link">Single Sign On</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/db32d859.e1958d34.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Security</h1></header><div class="markdown"><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="https"></a>HTTPS<a aria-hidden="true" tabindex="-1" class="hash-link" href="#https" title="Direct link to heading">#</a></h2><p>To enable HTTP over TLS to secure your Wave server, pass the following flags when starting the Wave server:</p><ul><li><code>-tls-cert-file</code>: path to certificate file.</li><li><code>-tls-key-file</code>: path to private key file.</li></ul><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="self-signed-certificate"></a>Self Signed Certificate<a aria-hidden="true" tabindex="-1" class="hash-link" href="#self-signed-certificate" title="Direct link to heading">#</a></h3><p>To enable TLS during development, use a self-signed certificate.</p><p>To create a private key and a self-signed certificate from scratch, use <code>openssl</code>:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">openssl req \</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">   -newkey rsa:2048 -nodes -keyout domain.key \</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">   -x509 -days 365 -out domain.crt</span></div></div></div></div></div><p>The above command creates a 2048-bit private key (<code>domain.key</code>) and a self-signed x509 certificate (<code>domain.crt</code>) valid for 365 days.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="single-sign-on"></a>Single Sign On<a aria-hidden="true" tabindex="-1" class="hash-link" href="#single-sign-on" title="Direct link to heading">#</a></h2><p>Wave has built-in support for <a href="https://openid.net/connect/" target="_blank" rel="noopener noreferrer">OpenID Connect</a>.</p><p>To enable OpenID Connect, pass the following flags when starting the Wave server:</p><ul><li><code>-oidc-provider-url</code>: URL for authentication (the identity provider&#x27;s URL).</li><li><code>-oidc-redirect-url</code>: URL to redirect to after authentication.</li><li><code>-oidc-end-session-url</code>: URL to log out (or sign out).</li><li><code>-oidc-client-id</code>: Client ID (refer to your identity provider&#x27;s documentation).</li><li><code>-oidc-client-secret</code>:  Client secret (refer to your identity provider&#x27;s documentation).</li></ul><p>Once authenticated, you can access user&#x27;s authentication and authorization information from your app using <code>q.auth</code> (see the <a href="/wave/docs/api/server#auth">Auth</a> class for details):</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/example&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">print</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">auth</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">username</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">print</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">auth</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">subject</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/security.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/graphics"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Graphics</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/logging"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Logging »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#https" class="table-of-contents__link">HTTPS</a><ul><li><a href="#self-signed-certificate" class="table-of-contents__link">Self Signed Certificate</a></li></ul></li><li><a href="#single-sign-on" class="table-of-contents__link">Single Sign On</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/db32d859.4bcf621d.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/state/index.html b/docs/docs/state/index.html
index 157d3ca21f..d66b73a3f7 100644
--- a/docs/docs/state/index.html
+++ b/docs/docs/state/index.html
@@ -5,31 +5,30 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">State | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="State | H2O Wave"><meta data-react-helmet="true" name="description" content="How you manage your Wave app&#x27;s state depends on your app&#x27;s requirements. In most cases, an app&#x27;s data is best stored in a database or data store of some kind. But sometimes it&#x27;s convenient to store run-time information in your app&#x27;s memory, especially during prototyping when you&#x27;re trying to iterate quickly and refine ideas."><meta data-react-helmet="true" property="og:description" content="How you manage your Wave app&#x27;s state depends on your app&#x27;s requirements. In most cases, an app&#x27;s data is best stored in a database or data store of some kind. But sometimes it&#x27;s convenient to store run-time information in your app&#x27;s memory, especially during prototyping when you&#x27;re trying to iterate quickly and refine ideas."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/state"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/state"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/5a34328a.edcdf6f4.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/5a34328a.36cd7ed4.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">State</h1></header><div class="markdown"><p>How you manage your Wave app&#x27;s state depends on your app&#x27;s requirements. In most cases, an app&#x27;s data is best stored in a database or data store of some kind. But sometimes it&#x27;s convenient to store run-time information in your app&#x27;s memory, especially during prototyping when you&#x27;re trying to iterate quickly and refine ideas.</p><p>In a Wave app, you can store run-time information at three levels:</p><ul><li><strong>App-level:</strong> Information shared across all users.</li><li><strong>User-level:</strong> Information private to a user, but shared across all browser tabs.</li><li><strong>Client-level:</strong> Information private to a browser tab.</li></ul><p>In real world apps, the decision on whether to store information at the client, user, or app level depends on the problem you&#x27;re trying to solve. For example, if you were building an online store, you&#x27;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).</p><p>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.</p><p>The Wave query context <code>q</code> (of type <a href="/wave/docs/api/server#q">Q</a>) carries <code>q.app</code>, <code>q.user</code>, and <code>q.client</code>, three dictionary-like objects for storing information at the app-level, user-level, and client-level, respectively. </p><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p><code>q.app</code>, <code>q.user</code>, and <code>q.client</code> are all <a href="/wave/docs/api/core#Expando">Expando</a> instances, which means they behave both like dictionaries and objects: <code>q.client[&#x27;foo&#x27;]</code> is the same as <code>q.client.foo</code>. <code>q.client.foo</code> is easier to read.</p></div></div><p>In most non-trivial apps, you&#x27;ll find yourself frequently copying values from <code>q.args</code> into <code>q.client</code> (or <code>q.user</code>, depending on the problem you&#x27;re solving). If this gets too repetitive for your taste, use <code>copy_expando()</code> to copy everything in <code>q.args</code> to <code>q.client</code> at the beginning of your <code>listen()</code> handler:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> copy_expando</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    copy_expando</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Do something else...</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/state.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/arguments"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Event Arguments</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/routing"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Routing »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/5a34328a.edcdf6f4.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">State</h1></header><div class="markdown"><p>How you manage your Wave app&#x27;s state depends on your app&#x27;s requirements. In most cases, an app&#x27;s data is best stored in a database or data store of some kind. But sometimes it&#x27;s convenient to store run-time information in your app&#x27;s memory, especially during prototyping when you&#x27;re trying to iterate quickly and refine ideas.</p><p>In a Wave app, you can store run-time information at three levels:</p><ul><li><strong>App-level:</strong> Information shared across all users.</li><li><strong>User-level:</strong> Information private to a user, but shared across all browser tabs.</li><li><strong>Client-level:</strong> Information private to a browser tab.</li></ul><p>In real world apps, the decision on whether to store information at the client, user, or app level depends on the problem you&#x27;re trying to solve. For example, if you were building an online store, you&#x27;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).</p><p>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.</p><p>The Wave query context <code>q</code> (of type <a href="/wave/docs/api/server#q">Q</a>) carries <code>q.app</code>, <code>q.user</code>, and <code>q.client</code>, three dictionary-like objects for storing information at the app-level, user-level, and client-level, respectively. </p><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p><code>q.app</code>, <code>q.user</code>, and <code>q.client</code> are all <a href="/wave/docs/api/core#Expando">Expando</a> instances, which means they behave both like dictionaries and objects: <code>q.client[&#x27;foo&#x27;]</code> is the same as <code>q.client.foo</code>. <code>q.client.foo</code> is easier to read.</p></div></div><p>In most non-trivial apps, you&#x27;ll find yourself frequently copying values from <code>q.args</code> into <code>q.client</code> (or <code>q.user</code>, depending on the problem you&#x27;re solving). If this gets too repetitive for your taste, use <code>copy_expando()</code> to copy everything in <code>q.args</code> to <code>q.client</code> at the beginning of your <code>@app()</code> handler:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> copy_expando</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/foo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    copy_expando</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Do something else...</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/state.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/arguments"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Event Arguments</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/routing"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Routing »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/5a34328a.36cd7ed4.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/testing/index.html b/docs/docs/testing/index.html
index b81c888b87..789e64541f 100644
--- a/docs/docs/testing/index.html
+++ b/docs/docs/testing/index.html
@@ -5,29 +5,29 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Testing | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Testing | H2O Wave"><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/testing"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/testing"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/fbe93038.c011a924.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/fbe93038.988a69e9.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Testing</h1></header><div class="markdown"></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/testing.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/fbe93038.c011a924.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Testing</h1></header><div class="markdown"></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/testing.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/fbe93038.988a69e9.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/tour/index.html b/docs/docs/tour/index.html
index 08caf6db60..abf6ba240f 100644
--- a/docs/docs/tour/index.html
+++ b/docs/docs/tour/index.html
@@ -5,31 +5,31 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">A Tour of Wave | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="A Tour of Wave | H2O Wave"><meta data-react-helmet="true" name="description" content="Your Wave release download ships with over 150 examples."><meta data-react-helmet="true" property="og:description" content="Your Wave release download ships with over 150 examples."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/tour"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/tour"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/fcfc3752.e536a904.js" as="script">
-<link rel="preload" href="/wave/47a365f9.d7ec0ae7.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/fcfc3752.1ceac70b.js" as="script">
+<link rel="preload" href="/wave/47a365f9.7354e3ea.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">A Tour of Wave</h1></header><div class="markdown"><p>Your Wave release download ships with <a href="/wave/docs/examples">over 150 examples</a>.</p><p>You can play around with these examples in your browser using <code>tour.py</code>, a Python script (itself a Wave app) located in <code>examples/</code>:</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">Contents of $HOME/wave</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-none codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">wave/</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── docs/           </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── examples/       &lt;-- Examples live here.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|   └── tour.py     &lt;-- The Wave Tour.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── test/           </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── www/            </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">└── wave              </span></div></div></div></div></div><p>To run the tour, as with any Wave app, we need to start both the Wave server (<code>wave</code>) and the tour (<code>tour.py</code>). Let&#x27;s go ahead and do that.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-1-start-the-wave-server"></a>Step 1: Start the Wave server<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-1-start-the-wave-server" title="Direct link to heading">#</a></h2><p>To start the Wave server, simply open a new terminal window and execute <code>wave</code> (or <code>wave.exe</code> on Windows).</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./wave</span></div></div></div></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 #</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # ┌───────────────────┐</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # │   ┬ ┬┌─┐┬  ┬┌─┐   │</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # │   │││├─┤└┐┌┘├┤    │</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # │   └┴┘┴ ┴ └┘ └─┘   │</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # └───────────────────┘</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 #</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # {&quot;address&quot;:&quot;:55555&quot;,&quot;t&quot;:&quot;listen&quot;,&quot;webroot&quot;:&quot;/home/elp/wave/www&quot;}</span></div></div></div></div></div><p>The Wave server should now be running at <a href="http://localhost:55555" target="_blank" rel="noopener noreferrer">http://localhost:55555</a>.</p><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>Don&#x27;t close this terminal window!</h5></div><div class="admonition-content"><p>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.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-2-run-the-tour"></a>Step 2: Run the tour<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-2-run-the-tour" title="Direct link to heading">#</a></h2><p>To run the tour, create a <a href="https://docs.python.org/3/tutorial/venv.html" target="_blank" rel="noopener noreferrer">virtual environment</a>, install the tour&#x27;s dependencies, and finally execute <code>tour.py</code>.  </p><div class="admonition admonition-important alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>important</h5></div><div class="admonition-content"><p>Do this from a new terminal window!</p></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">python3 -m venv venv</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./venv/bin/pip </span><span class="token function" style="color:rgb(130, 170, 255)">install</span><span class="token plain"> -r examples/requirements.txt</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./venv/bin/python examples/tour.py</span></div></div></div></div></div><p>On Windows:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain">wave</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">python3 -m venv venv</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">venv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain">Scripts</span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain">pip </span><span class="token function" style="color:rgb(130, 170, 255)">install</span><span class="token plain"> -r examples</span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain">requirements.txt</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">venv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain">Scripts</span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain">python examples</span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain">tour.py</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-3-enjoy-the-tour"></a>Step 3: Enjoy the tour<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-3-enjoy-the-tour" title="Direct link to heading">#</a></h2><p>Go to <a href="http://localhost:55555/tour" target="_blank" rel="noopener noreferrer">http://localhost:55555/tour</a> to access the tour. </p><p><img alt="tour" src="/wave/assets/images/tour__tour-968f92ad1236ec66ad30ed613ba324db.png"></p><p><code>tour.py</code> is an ordinary Wave app that runs other apps. The tour itself runs at the route <code>/tour</code>, and each of the examples runs at <code>/demo</code>. </p><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p>To play with the tour&#x27;s active example in isolation, simply open a new browser tab and head to <a href="http://localhost:55555/demo" target="_blank" rel="noopener noreferrer">http://localhost:55555/demo</a>.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="wrapping-up"></a>Wrapping up<a aria-hidden="true" tabindex="-1" class="hash-link" href="#wrapping-up" title="Direct link to heading">#</a></h2><p>In this section, we started the Wave server and then launched <code>tour.py</code> to experience the tour. In general, this is how you&#x27;d typically launch any app, including your own. There is nothing special about <code>tour.py</code>. 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 <code>todo.py</code>, simply run:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./venv/bin/python examples/todo.py</span></div></div></div></div></div><p>You can now access the example at <a href="http://localhost:55555/demo" target="_blank" rel="noopener noreferrer">http://localhost:55555/demo</a>. Simple!</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/tour.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/installation"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Installation</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/tutorial-hello"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Tutorial: Hello World »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#step-1-start-the-wave-server" class="table-of-contents__link">Step 1: Start the Wave server</a></li><li><a href="#step-2-run-the-tour" class="table-of-contents__link">Step 2: Run the tour</a></li><li><a href="#step-3-enjoy-the-tour" class="table-of-contents__link">Step 3: Enjoy the tour</a></li><li><a href="#wrapping-up" class="table-of-contents__link">Wrapping up</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/fcfc3752.e536a904.js"></script>
-<script src="/wave/47a365f9.d7ec0ae7.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">A Tour of Wave</h1></header><div class="markdown"><p>Your Wave release download ships with <a href="/wave/docs/examples">over 150 examples</a>.</p><p>You can play around with these examples in your browser using <code>tour.py</code>, a Python script (itself a Wave app) located in <code>examples/</code>:</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">Contents of $HOME/wave</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-none codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">wave/</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── examples/       &lt;-- Examples live here.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">|   └── tour.py     &lt;-- The Wave Tour.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── test/           </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">├── www/            </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">└── waved</span></div></div></div></div></div><p>To run the tour, as with any Wave app, we need to start both the Wave server (<code>waved</code>) and the tour (<code>tour.py</code>). Let&#x27;s go ahead and do that.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-1-start-the-wave-server"></a>Step 1: Start the Wave server<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-1-start-the-wave-server" title="Direct link to heading">#</a></h2><p>To start the Wave server, simply open a new terminal window and execute <code>waved</code> (or <code>waved.exe</code> on Windows).</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./waved</span></div></div></div></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # ┌─────────────────────────┐</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # │  ┌    ┌ ┌──┐ ┌  ┌ ┌──┐  │ H2O Wave</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # │  │ ┌──┘ │──│ │  │ └┐    │ (version) (build)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # │  └─┘    ┘  ┘ └──┘  └─┘  │ © 2020 H2O.ai, Inc.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # └─────────────────────────┘</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # {&quot;address&quot;:&quot;:55555&quot;,&quot;t&quot;:&quot;listen&quot;,&quot;webroot&quot;:&quot;/home/elp/wave/www&quot;}</span></div></div></div></div></div><p>The Wave server should now be running at <a href="http://localhost:55555" target="_blank" rel="noopener noreferrer">http://localhost:55555</a>.</p><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>Don&#x27;t close this terminal window!</h5></div><div class="admonition-content"><p>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.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-2-run-the-tour"></a>Step 2: Run the tour<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-2-run-the-tour" title="Direct link to heading">#</a></h2><p>First, create a <a href="https://docs.python.org/3/tutorial/venv.html" target="_blank" rel="noopener noreferrer">virtual environment</a>, install the tour&#x27;s dependencies.</p><div class="admonition admonition-important alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>important</h5></div><div class="admonition-content"><p>Do this from a new terminal window!</p></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">python3 -m venv venv</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token builtin class-name" style="color:rgb(255, 203, 107)">source</span><span class="token plain"> venv/bin/activate</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">pip </span><span class="token function" style="color:rgb(130, 170, 255)">install</span><span class="token plain"> -r examples/requirements.txt</span></div></div></div></div></div><p>On Windows:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain">wave</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">python3 -m venv venv</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">venv</span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain">Scripts</span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain">activate.bat</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">pip </span><span class="token function" style="color:rgb(130, 170, 255)">install</span><span class="token plain"> -r examples</span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain">requirements.txt</span></div></div></div></div></div><p>Finally, run the tour:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">wave run --no-reload examples.tour</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-3-enjoy-the-tour"></a>Step 3: Enjoy the tour<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-3-enjoy-the-tour" title="Direct link to heading">#</a></h2><p>Go to <a href="http://localhost:55555/tour" target="_blank" rel="noopener noreferrer">http://localhost:55555/tour</a> to access the tour. </p><p><img alt="tour" src="/wave/assets/images/tour__tour-968f92ad1236ec66ad30ed613ba324db.png"></p><p><code>tour.py</code> is an ordinary Wave app that runs other apps. The tour itself runs at the route <code>/tour</code>, and each of the examples runs at <code>/demo</code>. </p><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p>To play with the tour&#x27;s active example in isolation, simply open a new browser tab and head to <a href="http://localhost:55555/demo" target="_blank" rel="noopener noreferrer">http://localhost:55555/demo</a>.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="wrapping-up"></a>Wrapping up<a aria-hidden="true" tabindex="-1" class="hash-link" href="#wrapping-up" title="Direct link to heading">#</a></h2><p>In this section, we started the Wave server and then launched <code>tour.py</code> to experience the tour. In general, this is how you&#x27;d typically launch any app, including your own. There is nothing special about <code>tour.py</code>. 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 <code>todo.py</code>, simply run:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">wave run examples.todo</span></div></div></div></div></div><p>You can now access the example at <a href="http://localhost:55555/demo" target="_blank" rel="noopener noreferrer">http://localhost:55555/demo</a>. Simple!</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/tour.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/installation"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Installation</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/tutorial-hello"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Tutorial: Hello World »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#step-1-start-the-wave-server" class="table-of-contents__link">Step 1: Start the Wave server</a></li><li><a href="#step-2-run-the-tour" class="table-of-contents__link">Step 2: Run the tour</a></li><li><a href="#step-3-enjoy-the-tour" class="table-of-contents__link">Step 3: Enjoy the tour</a></li><li><a href="#wrapping-up" class="table-of-contents__link">Wrapping up</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/fcfc3752.1ceac70b.js"></script>
+<script src="/wave/47a365f9.7354e3ea.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/tutorial-beer/index.html b/docs/docs/tutorial-beer/index.html
index a637454766..9ebf993b53 100644
--- a/docs/docs/tutorial-beer/index.html
+++ b/docs/docs/tutorial-beer/index.html
@@ -5,20 +5,20 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Tutorial: Beer Wall | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Tutorial: Beer Wall | H2O Wave"><meta data-react-helmet="true" name="description" content="In this tutorial, we&#x27;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."><meta data-react-helmet="true" property="og:description" content="In this tutorial, we&#x27;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."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/tutorial-beer"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/tutorial-beer"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/f7ea47c5.d992c5ba.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/f7ea47c5.f9a0edd9.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Tutorial: Beer Wall</h1></header><div class="markdown"><p>In this tutorial, we&#x27;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.</p><p>The program we&#x27;ll be writing is a verse generator for the runaway mid-20th century smash hit, <a href="https://en.wikipedia.org/wiki/99_Bottles_of_Beer" target="_blank" rel="noopener noreferrer">99 Bottles of Beer</a>, which looks something like this:</p><blockquote><p>99 bottles of beer on the wall, 99 bottles of beer.<br>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Tutorial: Beer Wall</h1></header><div class="markdown"><p>In this tutorial, we&#x27;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.</p><p>The program we&#x27;ll be writing is a verse generator for the runaway mid-20th century smash hit, <a href="https://en.wikipedia.org/wiki/99_Bottles_of_Beer" target="_blank" rel="noopener noreferrer">99 Bottles of Beer</a>, which looks something like this:</p><blockquote><p>99 bottles of beer on the wall, 99 bottles of beer.<br>
 Take one down, pass it around, 98 bottles of beer on the wall...</p><p>98 bottles of beer on the wall, 98 bottles of beer.<br>
 Take one down, pass it around, 97 bottles of beer on the wall...</p><p>...</p></blockquote><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/tutorial-beer__demo-cb829b4b335d0d619fa4ce4ff0a516bf.mp4" type="video/mp4"></video><p>Our program will be analogous to <a href="/wave/docs/tutorial-hello">our &quot;Hello, World!&quot; program</a>, with the addition of a loop. We&#x27;ll generate a verse every second, and observe the verse change in the browser in realtime. After that, we&#x27;ll take a stab at making our program a bit more efficient, introducing how <a href="/wave/docs/expressions">expressions</a> work.</p><p>(Incidentally, Donald Knuth proved that this song has a complexity of <code>O(log N)</code> in <a href="http://www.cs.bme.hu/~friedl/alg/knuth_song_complexity.pdf" target="_blank" rel="noopener noreferrer">&quot;The Complexity of Songs&quot;</a>, but we won&#x27;t let that little detail deter us for now.)</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="prerequisites"></a>Prerequisites<a aria-hidden="true" tabindex="-1" class="hash-link" href="#prerequisites" title="Direct link to heading">#</a></h2><p>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 <a href="/wave/docs/tutorial-hello">Hello World tutorial</a> and complete steps 1 and 2.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-1-write-your-program"></a>Step 1: Write your program<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-1-write-your-program" title="Direct link to heading">#</a></h2><p>Our program looks like this. It&#x27;s mostly similar to the one in the  <a href="/wave/docs/tutorial-hello">Hello World tutorial</a>, with one exception: we&#x27;re setting the markdown card&#x27;s content inside a <code>for</code> loop.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/beer_wall.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/beer&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -31,15 +31,15 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">Take one down, pass it around, {{after}} bottles of beer on the wall...</span></div><div class="token-line" style="color:#bfc7d5"><span class="token triple-quoted-string string" style="color:rgb(195, 232, 141)">&#x27;&#x27;&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">beer_card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;wall&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 4 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;99 Bottles of Beer&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">beer_verse</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">before</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;99&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> after</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;98&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> i </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">range</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">99</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    beer_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">before </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">i</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    beer_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">after </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">str</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">i </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>Run your program again. You should see the same results in your browser as before, but you&#x27;ll notice that the information flowing through the Wave server is significantly less than before: </p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/02 13:53:11 * /beer {&quot;d&quot;:[{&quot;k&quot;:&quot;wall data before&quot;,&quot;v&quot;:&quot;98&quot;},{&quot;k&quot;:&quot;wall data after&quot;,&quot;v&quot;:&quot;97&quot;}]}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/02 13:53:12 * /beer {&quot;d&quot;:[{&quot;k&quot;:&quot;wall data before&quot;,&quot;v&quot;:&quot;97&quot;},{&quot;k&quot;:&quot;wall data after&quot;,&quot;v&quot;:&quot;96&quot;}]}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/02 13:53:13 * /beer {&quot;d&quot;:[{&quot;k&quot;:&quot;wall data before&quot;,&quot;v&quot;:&quot;96&quot;},{&quot;k&quot;:&quot;wall data after&quot;,&quot;v&quot;:&quot;95&quot;}]}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/02 13:53:14 * /beer {&quot;d&quot;:[{&quot;k&quot;:&quot;wall data before&quot;,&quot;v&quot;:&quot;95&quot;},{&quot;k&quot;:&quot;wall data after&quot;,&quot;v&quot;:&quot;94&quot;}]}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/02 13:53:15 * /beer {&quot;d&quot;:[{&quot;k&quot;:&quot;wall data before&quot;,&quot;v&quot;:&quot;94&quot;},{&quot;k&quot;:&quot;wall data after&quot;,&quot;v&quot;:&quot;93&quot;}]}</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/02 13:53:16 * /beer {&quot;d&quot;:[{&quot;k&quot;:&quot;wall data before&quot;,&quot;v&quot;:&quot;93&quot;},{&quot;k&quot;:&quot;wall data after&quot;,&quot;v&quot;:&quot;92&quot;}]}</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="summary"></a>Summary<a aria-hidden="true" tabindex="-1" class="hash-link" href="#summary" title="Direct link to heading">#</a></h2><p>In this tutorial, we learned how to send periodic updates to the Wave server and observe changes in realtime. </p><p>In the next tutorial, we&#x27;ll put these principles to real-world use, popping up charts for a song instead of chart topping pop songs.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/tutorial-beer.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/tutorial-hello"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Tutorial: Hello World</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/tutorial-monitor"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Tutorial: System Monitor »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#prerequisites" class="table-of-contents__link">Prerequisites</a></li><li><a href="#step-1-write-your-program" class="table-of-contents__link">Step 1: Write your program</a></li><li><a href="#step-2-run-your-program" class="table-of-contents__link">Step 2: Run your program</a></li><li><a href="#step-3-watch-updates-live" class="table-of-contents__link">Step 3: Watch updates live</a></li><li><a href="#step-4-make-it-more-efficient" class="table-of-contents__link">Step 4: Make it more efficient</a></li><li><a href="#summary" class="table-of-contents__link">Summary</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/f7ea47c5.d992c5ba.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/f7ea47c5.f9a0edd9.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/tutorial-counter/index.html b/docs/docs/tutorial-counter/index.html
index ee281568f8..b6b091c58d 100644
--- a/docs/docs/tutorial-counter/index.html
+++ b/docs/docs/tutorial-counter/index.html
@@ -5,61 +5,42 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Tutorial: Bean Counter | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Tutorial: Bean Counter | H2O Wave"><meta data-react-helmet="true" name="description" content="In the previous tutorials, we&#x27;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&#x27;s actions) -  Wave apps are the way to go."><meta data-react-helmet="true" property="og:description" content="In the previous tutorials, we&#x27;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&#x27;s actions) -  Wave apps are the way to go."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/tutorial-counter"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/tutorial-counter"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/950656ac.0aadf206.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/950656ac.0ccaa8ab.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Tutorial: Bean Counter</h1></header><div class="markdown"><p>In the previous tutorials, we&#x27;ve been authoring <a href="/wave/docs/scripts">Wave scripts</a>. A Wave script is a perfectly fine and dandy way to modify pages in Wave and build dashboards. However, to build <em>interactive applications</em> in Wave - user interfaces that can dynamically respond to <em>events</em> (the user&#x27;s actions) -  <a href="/wave/docs/apps">Wave apps</a> are the way to go.</p><p>In the fine tradition of keeping tutorials succinct and useful, we&#x27;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.</p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/tutorial-counter__demo-f3f19f437fc40cbcb7211837b2ce7e39.mp4" type="video/mp4"></video><p>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&#x27;s probably the most important tutorial to wrap your head around if you&#x27;re interesting in authoring interactive applications.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="prerequisites"></a>Prerequisites<a aria-hidden="true" tabindex="-1" class="hash-link" href="#prerequisites" title="Direct link to heading">#</a></h2><p>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 <a href="/wave/docs/tutorial-hello">Hello World tutorial</a> and complete steps 1 and 2.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-1-start-listening"></a>Step 1: Start listening<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-1-start-listening" title="Direct link to heading">#</a></h2><p>The first step towards listening to events from the UI is to, literally, <code>listen</code>.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/counter.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">pass</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/counter&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p><code>listen()</code> is a function that takes two required arguments:</p><ol><li>The route to listen to, in this case <code>/counter</code> (which translates to <code>localhost:55555/counter</code> or <code>www.example.com/counter</code>).</li><li>The function to call when a event arrives from the UI, in this case <code>serve()</code> (but you can call it anything you please, like <code>shoe_strings()</code>).</li></ol><p>It&#x27;s important to understand that <code>serve()</code> is called on every event from the UI. No matter how many event originate from the UI, they all pass through <code>serve()</code>.</p><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</h5></div><div class="admonition-content"><p><code>serve()</code> is an <code>async</code> function, and must be declared as <code>async def serve(...)</code> instead of plain <code>def serve(...)</code>.</p></div></div><p>Next, run your app:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./venv/bin/python counter.py</span></div></div></div></div></div><p>At this point, your app will be up and running, but it doesn&#x27;t do anything yet. Let&#x27;s change that in a second.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-2-display-a-button"></a>Step 2: Display a button<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-2-display-a-button" title="Direct link to heading">#</a></h2><p>Let&#x27;s add a button to our app. Out goal is to increment and display the bean count each time the button is clicked.</p><p>To do this, we declare a variable called <code>bean_count</code>, and use <code>form_card()</code> to add a <a href="https://en.wikipedia.org/wiki/Form_(document)" target="_blank" rel="noopener noreferrer">form</a> to our page. A form card is a special type of card that displays a vertical stack of <a href="/wave/docs/components">components</a> (also called <em>widgets</em>). In this case our form contains a solitary button named <code>increment</code>, with a caption showing the current <code>bean_count</code>. The button is marked as <code>primary</code>, which serves no other purpose than to make it look tall, dark, and handsome. </p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/counter.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">                label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Click me!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">                caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">                primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/counter&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>Notice how the technique to modify and save pages in a Wave app is different from that of a Wave script.</p><table><thead><tr><th>Task</th><th>Wave Script</th><th>Wave App</th></tr></thead><tbody><tr><td>Access page at route <code>/foo</code></td><td><code>page = site[&#x27;/foo&#x27;]</code></td><td><code>page = q.page</code></td></tr><tr><td>Access card named <code>foo</code></td><td><code>card = page[&#x27;foo&#x27;]</code></td><td><code>card = q.page[&#x27;foo&#x27;]</code></td></tr><tr><td>Save page</td><td><code>page.save()</code></td><td><code>await q.page.save()</code></td></tr></tbody></table><p>In a Wave app, we always access the page using the <em>query context</em> <code>q</code>. The query context carries useful information about the active UI event, including who issued the event, what information was entered, which buttons were clicked, and so on; and <code>q.page</code> always refers to the page located at the route you passed to <code>listen()</code> (in this case, <code>/counter</code>).</p><p>Restart your app (<code>^C</code> and run it again):</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./venv/bin/python counter.py</span></div></div></div></div></div><p>Point your browser to <a href="http://localhost:55555/counter" target="_blank" rel="noopener noreferrer">http://localhost:55555/counter</a>. You should see a nice big button, waiting to be clicked on:</p><p><img alt="Button" src="data:image/png;base64,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"></p><p>If you click on the button, you&#x27;ll notice that it doesn&#x27;t do anything. This is because we haven&#x27;t handled button clicks yet. Instead, when you click the button, the events are sent to your <code>serve()</code> function, but the <code>serve()</code> function blindly adds the form (with the button) to the page all over again and saves it, causing the page to display the same form all over again. Let&#x27;s fix this next. </p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-3-handle-button-clicks"></a>Step 3: Handle button clicks<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-3-handle-button-clicks" title="Direct link to heading">#</a></h2><p>Add a condition to check if the button is clicked, and if so, increment the bean count.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/counter.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bean_count </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">increment</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Click me!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/counter&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>The above edit introduces two important concepts: <code>q.client</code> and <code>q.args</code>. </p><ul><li><code>q.client</code> is a dictionary-like object for storing and retrieving arbitrary information related to the active <em>client</em> (a browser tab or browser session). Anything you put into <code>q.client</code> while handling a event can be read back while handling a subsequent event, provided the subsequent event originates from the same client. In our case, we read <code>q.client.bean_count</code> to get the bean count. If it&#x27;s unavailable (which means this is a new client), we default the bean count to <code>0</code>.</li><li><code>q.args</code>, also a dictionary-like object, carries <em>event arguments</em>, which contains information about what the user did. In our case, if the user clicked on our button (named <code>increment</code>), <code>q.args.increment</code> will be <code>True</code>. If not, <code>q.args.increment</code> will be <code>None</code>. Therefore, if <code>q.args.increment</code> is <code>True</code>, we increment the client&#x27;s <code>bean_count</code>. If not, we do nothing.</li></ul><div class="admonition admonition-note alert alert--secondary"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>note</h5></div><div class="admonition-content"><p>From now on, any time you see the term &#x27;client&#x27;, recall that it&#x27;s a technical term for &#x27;browser tab&#x27; or &#x27;browser session&#x27;. In other words, any time you open a new browser tab to access your app, you&#x27;re accessing your app from a new client.</p></div></div><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>Each component in the Wave component library populates <code>q.args</code> with its own value. For more information, see <a href="/wave/docs/components">Components</a>.</p></div></div><p>Go ahead and restart your app (<code>^C</code> and run it again):</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./venv/bin/python counter.py</span></div></div></div></div></div><p>Point your browser to <a href="http://localhost:55555/counter" target="_blank" rel="noopener noreferrer">http://localhost:55555/counter</a>. Your button should now count beans when clicked:</p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/tutorial-counter__demo-f3f19f437fc40cbcb7211837b2ce7e39.mp4" type="video/mp4"></video><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-4-make-it-more-efficient"></a>Step 4: Make it more efficient<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-4-make-it-more-efficient" title="Direct link to heading">#</a></h2><p>Our program is accurate, but not necessarily efficient. On every button-click, it is recreating the form card and the button over and over again instead of updating the existing button&#x27;s caption with the current bean count. You can observe how chatty the app is by gaping in abject horror at the Wave server&#x27;s log.</p><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>To view the Wave server&#x27;s log, switch to the terminal window running the Wave server.</p></div></div><p>Let&#x27;s wrinkle our noses in disgust and fix this gross inefficiency right away to make our little bean counter web-scale for great good.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/counter.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bean_count </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">increment</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Click me!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">caption </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/counter&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>In the above edit, we check for an arbitrary flag in <code>q.client</code> called <code>initialized</code>. </p><ul><li>If the flag is not set, we assume that the request is originating from new, empty client. If so, we set <code>initialized</code> to <code>True</code> (to make a note to ourselves that the client is not empty anymore), then add our form card to the page.</li><li>If the flag is already set, we assume that the form card (and the button inside it) are already on the page, and simply update the button&#x27;s caption with the new bean count.</li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="intermission-understanding-state"></a>Intermission: Understanding state<a aria-hidden="true" tabindex="-1" class="hash-link" href="#intermission-understanding-state" title="Direct link to heading">#</a></h2><p>In the above steps, we learned about <code>q.args</code> (request arguments submitted from the browser) and <code>q.client</code> (arbitrary information associated with the client). Let&#x27;s expand on these and introduce two new concepts: <code>q.user</code> and <code>q.app</code>. </p><p>Before we do that, try accessing <a href="http://localhost:55555/counter" target="_blank" rel="noopener noreferrer">http://localhost:55555/counter</a> from two different browser tabs and playing with them. You&#x27;ll notice that each browser tab (or, each client) maintains separate bean counts.</p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/tutorial-counter__client-879d907addd9c36d405015546d0c0fdd.mp4" type="video/mp4"></video><p>Maintaining separate bean counts per client is one way to count beans. You can also maintain bean counts at the user level and the app level. </p><p>In real world apps, the decision on whether to store information at the client, user, or app level depends on the problem you&#x27;re trying to solve. For example, if you were building an online store, you&#x27;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).</p><p>Similar to how <code>q.client</code> stores arbitrary information associated with the client, <code>q.user</code> and <code>q.app</code> store arbitrary information associated with the user and the app, respectively.</p><p>In most apps, you&#x27;ll end up using a mix of <code>q.client</code>, <code>q.user</code> and <code>q.app</code> to correctly handle requests originating from:</p><ol><li>Different users.</li><li>Different browser tabs belonging to the same user (possibly from different devices).</li><li>The same browser tab.</li></ol><p>In other words, your Wave app is multi-user by default, but how the app manages data at the app-level, at the user-level and at the client-level is up to you.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-6-user-level-realtime-sync"></a>Step 6: User-level realtime sync<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-6-user-level-realtime-sync" title="Direct link to heading">#</a></h2><p>To maintain bean counts at the user level, all we have to do store <code>bean_count</code> in <code>q.user</code> instead of <code>q.client</code>.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/counter.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bean_count </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">increment</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Click me!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">caption </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/counter&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>If we run this app, we&#x27;ll see that the counts are being maintained across browser tabs, but the updated counts don&#x27;t show up immediately across all tabs. Instead, they show up only when you interact with the other tabs, or reload them. </p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/tutorial-counter__user-nosync-85ed939bea17453866c14ee5359992ef.mp4" type="video/mp4"></video><p>This would be considered normal behavior for a typical web application, and most users familiar with the interwebs are also familiar with the reload button, but we can do better, because having to hit the reload button to get updates is about as exciting as waiting for paint to dry.</p><p>This is easier done than said - simply change the server mode to <code>multicast</code> to enable realtime sync across clients:</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/counter.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bean_count </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">increment</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Click me!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">caption </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/counter&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> mode</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;multicast&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>The default server mode for apps is <code>unicast</code>, which means &quot;don&#x27;t sync across clients&quot;. On the other hand, <code>multicast</code> means &quot;sync across clients&quot;. There&#x27;s also a third mode, <code>broadcast</code>, which means &quot;sync across users&quot;, which we&#x27;ll see in the next step.</p></div></div><p>Re-running our app proves that the user-level bean count indeed syncs across tabs:</p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/tutorial-counter__user-sync-cc763711bfc051a85c3df8a8508135c7.mp4" type="video/mp4"></video><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-7-app-level-realtime-sync"></a>Step 7: App-level realtime sync<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-7-app-level-realtime-sync" title="Direct link to heading">#</a></h2><p>Going from user-level bean counting to app-level bean counting is easy: simply store <code>bean_count</code> on <code>q.app</code> instead of <code>q.user</code>, and switch the server mode to <code>broadcast</code>:</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/counter.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bean_count </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">increment</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Click me!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">caption </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/counter&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> mode</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;broadcast&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p>The <code>broadcast</code> mode can be used to build collaborative apps that need to synchronize state across all users, like group chat or multiplayer games.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="summary"></a>Summary<a aria-hidden="true" tabindex="-1" class="hash-link" href="#summary" title="Direct link to heading">#</a></h2><p>In this tutorial, we learned how to author interactive applications, or <em>apps</em>, 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:</p><table><thead><tr><th>Attribute</th><th>Type</th><th>Use</th></tr></thead><tbody><tr><td><code>q.args</code></td><td>Read-only</td><td>Stores command arguments</td></tr><tr><td><code>q.client</code></td><td>Read/Write</td><td>Stores client-level state</td></tr><tr><td><code>q.user</code></td><td>Read/Write</td><td>Stores user-level state</td></tr><tr><td><code>q.app</code></td><td>Read/Write</td><td>Stores app-level state</td></tr></tbody></table><p>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&#x27;re running on your private island (a smidgen of democracy can&#x27;t hurt).</p><p>In the next section, we&#x27;ll build something a bit more substantial and useful: a to-do list with realtime sync.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/tutorial-counter.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/tutorial-monitor"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Tutorial: System Monitor</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/tutorial-todo"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Tutorial: Todo List »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#prerequisites" class="table-of-contents__link">Prerequisites</a></li><li><a href="#step-1-start-listening" class="table-of-contents__link">Step 1: Start listening</a></li><li><a href="#step-2-display-a-button" class="table-of-contents__link">Step 2: Display a button</a></li><li><a href="#step-3-handle-button-clicks" class="table-of-contents__link">Step 3: Handle button clicks</a></li><li><a href="#step-4-make-it-more-efficient" class="table-of-contents__link">Step 4: Make it more efficient</a></li><li><a href="#intermission-understanding-state" class="table-of-contents__link">Intermission: Understanding state</a></li><li><a href="#step-6-user-level-realtime-sync" class="table-of-contents__link">Step 6: User-level realtime sync</a></li><li><a href="#step-7-app-level-realtime-sync" class="table-of-contents__link">Step 7: App-level realtime sync</a></li><li><a href="#summary" class="table-of-contents__link">Summary</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/950656ac.0aadf206.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Tutorial: Bean Counter</h1></header><div class="markdown"><p>In the previous tutorials, we&#x27;ve been authoring <a href="/wave/docs/scripts">Wave scripts</a>. A Wave script is a perfectly fine and dandy way to modify pages in Wave and build dashboards. However, to build <em>interactive applications</em> in Wave - user interfaces that can dynamically respond to <em>events</em> (the user&#x27;s actions) -  <a href="/wave/docs/apps">Wave apps</a> are the way to go.</p><p>In the fine tradition of keeping tutorials succinct and useful, we&#x27;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.</p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/tutorial-counter__demo-f3f19f437fc40cbcb7211837b2ce7e39.mp4" type="video/mp4"></video><p>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&#x27;s probably the most important tutorial to wrap your head around if you&#x27;re interesting in authoring interactive applications.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="prerequisites"></a>Prerequisites<a aria-hidden="true" tabindex="-1" class="hash-link" href="#prerequisites" title="Direct link to heading">#</a></h2><p>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 <a href="/wave/docs/tutorial-hello">Hello World tutorial</a> and complete steps 1 and 2.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-1-start-listening"></a>Step 1: Start listening<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-1-start-listening" title="Direct link to heading">#</a></h2><p>The first step towards listening to events from the UI is to define an <code>@app</code> function:</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/counter.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/counter&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">pass</span></div></div></div></div></div><p><code>@app</code> is a decorator that takes one required argument - the route to listen to, in this case <code>/counter</code> (which translates to <code>localhost:55555/counter</code> or <code>www.example.com/counter</code>).</p><p>The <code>@app</code> function, in this case <code>serve()</code>, is called on every event from the UI. No matter how many events originate from the UI, they all pass through <code>serve()</code>.</p><p>We named our <code>@app</code> function <code>serve()</code>, but you can call it anything you please, like <code>shoe_strings()</code>.</p><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>caution</h5></div><div class="admonition-content"><p><code>serve()</code> is an <code>async</code> function, and must be declared as <code>async def serve(...)</code> instead of plain <code>def serve(...)</code>.</p></div></div><p>To run your app, use <code>wave run</code>:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token builtin class-name" style="color:rgb(255, 203, 107)">source</span><span class="token plain"> venv/bin/activate</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">wave run counter</span></div></div></div></div></div><p>The <code>wave run</code> command runs your app in <em>development mode</em>, and the app is automatically reloaded when edited. The argument <code>counter:main</code> indicates that we want to use the <code>main()</code> function in <code>counter.py</code> to serve the app.</p><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>You don&#x27;t have to do anything with <code>main</code> except import it into your <code>.py</code> file. <code>main()</code> is an <a href="https://asgi.readthedocs.io/en/latest/" target="_blank" rel="noopener noreferrer">ASGI</a>-compatible function that you can use with any ASGI server like <a href="https://www.uvicorn.org/" target="_blank" rel="noopener noreferrer">uvicorn</a> or <a href="https://gunicorn.org/" target="_blank" rel="noopener noreferrer">gunicorn</a>. See <a href="/wave/docs/deployment">Deployment</a>.</p></div></div><p>At this point, your app will be up and running, but it doesn&#x27;t do anything yet. Let&#x27;s change that in a second.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-2-display-a-button"></a>Step 2: Display a button<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-2-display-a-button" title="Direct link to heading">#</a></h2><p>Let&#x27;s add a button to our app. Out goal is to increment and display the bean count each time the button is clicked.</p><p>To do this, we declare a variable called <code>bean_count</code>, and use <code>form_card()</code> to add a <a href="https://en.wikipedia.org/wiki/Form_(document)" target="_blank" rel="noopener noreferrer">form</a> to our page. A form card is a special type of card that displays a vertical stack of <a href="/wave/docs/components">components</a> (also called <em>widgets</em>). In this case our form contains a solitary button named <code>increment</code>, with a caption showing the current <code>bean_count</code>. The button is marked as <code>primary</code>, which serves no other purpose than to make it look tall, dark, and handsome. </p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/counter.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/counter&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">                label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Click me!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">                caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">                primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>Notice how the technique to modify and save pages in a Wave app is different from that of a Wave script.</p><table><thead><tr><th>Task</th><th>Wave Script</th><th>Wave App</th></tr></thead><tbody><tr><td>Access page at route <code>/foo</code></td><td><code>page = site[&#x27;/foo&#x27;]</code></td><td><code>page = q.page</code></td></tr><tr><td>Access card named <code>foo</code></td><td><code>card = page[&#x27;foo&#x27;]</code></td><td><code>card = q.page[&#x27;foo&#x27;]</code></td></tr><tr><td>Save page</td><td><code>page.save()</code></td><td><code>await q.page.save()</code></td></tr></tbody></table><p>In a Wave app, we always access the page using the <em>query context</em> <code>q</code>. The query context carries useful information about the active UI event, including who issued the event, what information was entered, which buttons were clicked, and so on; and <code>q.page</code> always refers to the page located at the route you passed to <code>@app()</code> (in this case).</p><p>Point your browser to <a href="http://localhost:55555/counter" target="_blank" rel="noopener noreferrer">http://localhost:55555/counter</a>. You should see a nice big button, waiting to be clicked on:</p><p><img alt="Button" src="data:image/png;base64,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"></p><p>If you click on the button, you&#x27;ll notice that it doesn&#x27;t do anything. This is because we haven&#x27;t handled button clicks yet. Instead, when you click the button, the events are sent to your <code>serve()</code> function, but the <code>serve()</code> function blindly adds the form (with the button) to the page all over again and saves it, causing the page to display the same form all over again. Let&#x27;s fix this next. </p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-3-handle-button-clicks"></a>Step 3: Handle button clicks<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-3-handle-button-clicks" title="Direct link to heading">#</a></h2><p>Add a condition to check if the button is clicked, and if so, increment the bean count.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/counter.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/counter&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bean_count </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">increment</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Click me!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>The above edit introduces two important concepts: <code>q.client</code> and <code>q.args</code>. </p><ul><li><code>q.client</code> is a dictionary-like object for storing and retrieving arbitrary information related to the active <em>client</em> (a browser tab or browser session). Anything you put into <code>q.client</code> while handling a event can be read back while handling a subsequent event, provided the subsequent event originates from the same client. In our case, we read <code>q.client.bean_count</code> to get the bean count. If it&#x27;s unavailable (which means this is a new client), we default the bean count to <code>0</code>.</li><li><code>q.args</code>, also a dictionary-like object, carries <em>event arguments</em>, which contains information about what the user did. In our case, if the user clicked on our button (named <code>increment</code>), <code>q.args.increment</code> will be <code>True</code>. If not, <code>q.args.increment</code> will be <code>None</code>. Therefore, if <code>q.args.increment</code> is <code>True</code>, we increment the client&#x27;s <code>bean_count</code>. If not, we do nothing.</li></ul><div class="admonition admonition-note alert alert--secondary"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>note</h5></div><div class="admonition-content"><p>From now on, any time you see the term &#x27;client&#x27;, recall that it&#x27;s a technical term for &#x27;browser tab&#x27; or &#x27;browser session&#x27;. In other words, any time you open a new browser tab to access your app, you&#x27;re accessing your app from a new client.</p></div></div><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>Each component in the Wave component library populates <code>q.args</code> with its own value. For more information, see <a href="/wave/docs/components">Components</a>.</p></div></div><p>Your button should now count beans when clicked:</p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/tutorial-counter__demo-f3f19f437fc40cbcb7211837b2ce7e39.mp4" type="video/mp4"></video><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-4-make-it-more-efficient"></a>Step 4: Make it more efficient<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-4-make-it-more-efficient" title="Direct link to heading">#</a></h2><p>Our program is accurate, but not necessarily efficient. On every button-click, it is recreating the form card and the button over and over again instead of updating the existing button&#x27;s caption with the current bean count. You can observe how chatty the app is by gaping in abject horror at the Wave server&#x27;s log.</p><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>To view the Wave server&#x27;s log, switch to the terminal window running the Wave server.</p></div></div><p>Let&#x27;s wrinkle our noses in disgust and fix this gross inefficiency right away to make our little bean counter web-scale for great good.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/counter.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/counter&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bean_count </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">increment</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Click me!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">caption </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>In the above edit, we check for an arbitrary flag in <code>q.client</code> called <code>initialized</code>. </p><ul><li>If the flag is not set, we assume that the request is originating from new, empty client. If so, we set <code>initialized</code> to <code>True</code> (to make a note to ourselves that the client is not empty anymore), then add our form card to the page.</li><li>If the flag is already set, we assume that the form card (and the button inside it) are already on the page, and simply update the button&#x27;s caption with the new bean count.</li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="intermission-understanding-state"></a>Intermission: Understanding state<a aria-hidden="true" tabindex="-1" class="hash-link" href="#intermission-understanding-state" title="Direct link to heading">#</a></h2><p>In the above steps, we learned about <code>q.args</code> (request arguments submitted from the browser) and <code>q.client</code> (arbitrary information associated with the client). Let&#x27;s expand on these and introduce two new concepts: <code>q.user</code> and <code>q.app</code>. </p><p>Before we do that, try accessing <a href="http://localhost:55555/counter" target="_blank" rel="noopener noreferrer">http://localhost:55555/counter</a> from two different browser tabs and playing with them. You&#x27;ll notice that each browser tab (or, each client) maintains separate bean counts.</p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/tutorial-counter__client-879d907addd9c36d405015546d0c0fdd.mp4" type="video/mp4"></video><p>Maintaining separate bean counts per client is one way to count beans. You can also maintain bean counts at the user level and the app level. </p><p>In real world apps, the decision on whether to store information at the client, user, or app level depends on the problem you&#x27;re trying to solve. For example, if you were building an online store, you&#x27;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).</p><p>Similar to how <code>q.client</code> stores arbitrary information associated with the client, <code>q.user</code> and <code>q.app</code> store arbitrary information associated with the user and the app, respectively.</p><p>In most apps, you&#x27;ll end up using a mix of <code>q.client</code>, <code>q.user</code> and <code>q.app</code> to correctly handle requests originating from:</p><ol><li>Different users.</li><li>Different browser tabs belonging to the same user (possibly from different devices).</li><li>The same browser tab.</li></ol><p>In other words, your Wave app is multi-user by default, but how the app manages data at the app-level, at the user-level and at the client-level is up to you.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-5-user-level-realtime-sync"></a>Step 5: User-level realtime sync<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-5-user-level-realtime-sync" title="Direct link to heading">#</a></h2><p>To maintain bean counts at the user level, all we have to do store <code>bean_count</code> in <code>q.user</code> instead of <code>q.client</code>.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/counter.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/counter&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bean_count </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">increment</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Click me!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">caption </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>Now when you play with your app, you&#x27;ll see that the counts are being maintained across browser tabs, but the updated counts don&#x27;t show up immediately across all tabs. Instead, they show up only when you interact with the other tabs, or reload them. </p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/tutorial-counter__user-nosync-85ed939bea17453866c14ee5359992ef.mp4" type="video/mp4"></video><p>This would be considered normal behavior for a typical web application, and most users familiar with the interwebs are also familiar with the reload button, but we can do better, because having to hit the reload button to get updates is about as exciting as waiting for paint to dry.</p><p>This is easier done than said - simply change the server mode to <code>multicast</code> to enable realtime sync across clients:</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/counter.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/counter&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bean_count </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">increment</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Click me!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">caption </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>The default server mode for apps is <code>unicast</code>, which means &quot;don&#x27;t sync across clients&quot;. On the other hand, <code>multicast</code> means &quot;sync across clients&quot;. There&#x27;s also a third mode, <code>broadcast</code>, which means &quot;sync across users&quot;, which we&#x27;ll see in the next step.</p></div></div><p>If you play with your app now, you&#x27;ll see that the user-level bean count indeed syncs across tabs:</p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/tutorial-counter__user-sync-cc763711bfc051a85c3df8a8508135c7.mp4" type="video/mp4"></video><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-6-app-level-realtime-sync"></a>Step 6: App-level realtime sync<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-6-app-level-realtime-sync" title="Direct link to heading">#</a></h2><p>Going from user-level bean counting to app-level bean counting is easy: simply store <code>bean_count</code> on <code>q.app</code> instead of <code>q.user</code>, and switch the server mode to <code>broadcast</code>:</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/counter.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/counter&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bean_count </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">increment</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> bean_count </span><span class="token operator" style="color:rgb(137, 221, 255)">+</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">client</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">initialized </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;increment&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Click me!&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    caption</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                    primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">                </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;beans&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">items</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">caption </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">bean_count</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)"> beans&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p>The <code>broadcast</code> mode can be used to build collaborative apps that need to synchronize state across all users, like group chat or multiplayer games.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="summary"></a>Summary<a aria-hidden="true" tabindex="-1" class="hash-link" href="#summary" title="Direct link to heading">#</a></h2><p>In this tutorial, we learned how to author interactive applications, or <em>apps</em>, 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:</p><table><thead><tr><th>Attribute</th><th>Type</th><th>Use</th></tr></thead><tbody><tr><td><code>q.args</code></td><td>Read-only</td><td>Stores command arguments</td></tr><tr><td><code>q.client</code></td><td>Read/Write</td><td>Stores client-level state</td></tr><tr><td><code>q.user</code></td><td>Read/Write</td><td>Stores user-level state</td></tr><tr><td><code>q.app</code></td><td>Read/Write</td><td>Stores app-level state</td></tr></tbody></table><p>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&#x27;re running on your private island (a smidgen of democracy can&#x27;t hurt).</p><p>In the next section, we&#x27;ll build something a bit more substantial and useful: a to-do list with realtime sync.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/tutorial-counter.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/tutorial-monitor"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Tutorial: System Monitor</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/tutorial-todo"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Tutorial: Todo List »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#prerequisites" class="table-of-contents__link">Prerequisites</a></li><li><a href="#step-1-start-listening" class="table-of-contents__link">Step 1: Start listening</a></li><li><a href="#step-2-display-a-button" class="table-of-contents__link">Step 2: Display a button</a></li><li><a href="#step-3-handle-button-clicks" class="table-of-contents__link">Step 3: Handle button clicks</a></li><li><a href="#step-4-make-it-more-efficient" class="table-of-contents__link">Step 4: Make it more efficient</a></li><li><a href="#intermission-understanding-state" class="table-of-contents__link">Intermission: Understanding state</a></li><li><a href="#step-5-user-level-realtime-sync" class="table-of-contents__link">Step 5: User-level realtime sync</a></li><li><a href="#step-6-app-level-realtime-sync" class="table-of-contents__link">Step 6: App-level realtime sync</a></li><li><a href="#summary" class="table-of-contents__link">Summary</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/950656ac.0ccaa8ab.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/tutorial-hello/index.html b/docs/docs/tutorial-hello/index.html
index e5732914ba..df30a67136 100644
--- a/docs/docs/tutorial-hello/index.html
+++ b/docs/docs/tutorial-hello/index.html
@@ -5,34 +5,34 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Tutorial: Hello World | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Tutorial: Hello World | H2O Wave"><meta data-react-helmet="true" name="description" content="In this section, we&#x27;ll learn how to author our first Wave program from scratch, and understand the basics of how to display content in a web browser."><meta data-react-helmet="true" property="og:description" content="In this section, we&#x27;ll learn how to author our first Wave program from scratch, and understand the basics of how to display content in a web browser."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/tutorial-hello"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/tutorial-hello"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/fcfc3752.e536a904.js" as="script">
-<link rel="preload" href="/wave/47a365f9.d7ec0ae7.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/fcfc3752.1ceac70b.js" as="script">
+<link rel="preload" href="/wave/47a365f9.7354e3ea.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Tutorial: Hello World</h1></header><div class="markdown"><p>In this section, we&#x27;ll learn how to author our first Wave program from scratch, and understand the basics of how to display content in a web browser.</p><div class="admonition admonition-note alert alert--secondary"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>note</h5></div><div class="admonition-content"><p>These tutorials assume that you have some familiarity with the Python programming language. You don&#x27;t have to be an expert, but it might be harder to learn both Wave and Python at the same time.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-1-start-the-wave-server"></a>Step 1: Start the Wave Server<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-1-start-the-wave-server" title="Direct link to heading">#</a></h2><p>To start the Wave server, simply open a new terminal window and execute <code>wave</code> (or <code>wave.exe</code> on Windows).</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./wave</span></div></div></div></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 #</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # ┌───────────────────┐</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # │   ┬ ┬┌─┐┬  ┬┌─┐   │</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # │   │││├─┤└┐┌┘├┤    │</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # │   └┴┘┴ ┴ └┘ └─┘   │</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # └───────────────────┘</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 #</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/15 12:04:40 # {&quot;address&quot;:&quot;:55555&quot;,&quot;t&quot;:&quot;listen&quot;,&quot;webroot&quot;:&quot;/home/elp/wave/www&quot;}</span></div></div></div></div></div><p>The Wave server should now be running at <a href="http://localhost:55555" target="_blank" rel="noopener noreferrer">http://localhost:55555</a>.</p><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>Don&#x27;t close this terminal window!</h5></div><div class="admonition-content"><p>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.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-2-set-up-a-working-directory"></a>Step 2: Set up a working directory<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-2-set-up-a-working-directory" title="Direct link to heading">#</a></h2><p>Next, let&#x27;s set up a working directory to author our program. </p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="create-a-directory"></a>Create a directory<a aria-hidden="true" tabindex="-1" class="hash-link" href="#create-a-directory" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token function" style="color:rgb(130, 170, 255)">mkdir</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="set-up-a-virtual-environment"></a>Set up a virtual environment<a aria-hidden="true" tabindex="-1" class="hash-link" href="#set-up-a-virtual-environment" title="Direct link to heading">#</a></h3><p>A <a href="https://docs.python.org/3/tutorial/venv.html" target="_blank" rel="noopener noreferrer">virtual environment</a> helps us manage our program&#x27;s dependencies without interfering with system-wide packages.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">python3 -m venv venv</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="install-the-wave-python-driver"></a>Install the Wave Python driver<a aria-hidden="true" tabindex="-1" class="hash-link" href="#install-the-wave-python-driver" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">./venv/bin/pip </span><span class="token function" style="color:rgb(130, 170, 255)">install</span><span class="token plain"> h2o-wave</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-3-write-your-program"></a>Step 3: Write your program<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-3-write-your-program" title="Direct link to heading">#</a></h2><p>Next, open your preferred text editor, create a Python script called <code>hello_world.py</code> in the <code>$HOME/wave-apps</code> directory, and copy-paste the following. </p><p>For now, don&#x27;t worry too much about what this program is doing. We&#x27;ll get to that shortly.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/hello_world.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Tutorial: Hello World</h1></header><div class="markdown"><p>In this section, we&#x27;ll learn how to author our first Wave program from scratch, and understand the basics of how to display content in a web browser.</p><div class="admonition admonition-note alert alert--secondary"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>note</h5></div><div class="admonition-content"><p>These tutorials assume that you have some familiarity with the Python programming language. You don&#x27;t have to be an expert, but it might be harder to learn both Wave and Python at the same time.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-1-start-the-wave-server"></a>Step 1: Start the Wave server<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-1-start-the-wave-server" title="Direct link to heading">#</a></h2><p>To start the Wave server, simply open a new terminal window and execute <code>waved</code> (or <code>waved.exe</code> on Windows).</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./waved</span></div></div></div></div></div><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # ┌─────────────────────────┐</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # │  ┌    ┌ ┌──┐ ┌  ┌ ┌──┐  │ H2O Wave</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # │  │ ┌──┘ │──│ │  │ └┐    │ (version) (build)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # │  └─┘    ┘  ┘ └──┘  └─┘  │ © 2020 H2O.ai, Inc.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # └─────────────────────────┘</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">2020/10/27 16:16:34 # {&quot;address&quot;:&quot;:55555&quot;,&quot;t&quot;:&quot;listen&quot;,&quot;webroot&quot;:&quot;/home/elp/wave/www&quot;}</span></div></div></div></div></div><p>The Wave server should now be running at <a href="http://localhost:55555" target="_blank" rel="noopener noreferrer">http://localhost:55555</a>.</p><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>Don&#x27;t close this terminal window!</h5></div><div class="admonition-content"><p>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.</p></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-2-set-up-a-working-directory"></a>Step 2: Set up a working directory<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-2-set-up-a-working-directory" title="Direct link to heading">#</a></h2><p>Next, let&#x27;s set up a working directory to author our program. </p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="create-a-directory"></a>Create a directory<a aria-hidden="true" tabindex="-1" class="hash-link" href="#create-a-directory" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token function" style="color:rgb(130, 170, 255)">mkdir</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="set-up-a-virtual-environment"></a>Set up a virtual environment<a aria-hidden="true" tabindex="-1" class="hash-link" href="#set-up-a-virtual-environment" title="Direct link to heading">#</a></h3><p>A <a href="https://docs.python.org/3/tutorial/venv.html" target="_blank" rel="noopener noreferrer">virtual environment</a> helps us manage our program&#x27;s dependencies without interfering with system-wide packages.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">python3 -m venv venv</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="install-the-wave-python-driver"></a>Install the Wave Python driver<a aria-hidden="true" tabindex="-1" class="hash-link" href="#install-the-wave-python-driver" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">./venv/bin/pip </span><span class="token function" style="color:rgb(130, 170, 255)">install</span><span class="token plain"> h2o-wave</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-3-write-your-program"></a>Step 3: Write your program<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-3-write-your-program" title="Direct link to heading">#</a></h2><p>Next, open your preferred text editor, create a Python script called <code>hello_world.py</code> in the <code>$HOME/wave-apps</code> directory, and copy-paste the following. </p><p>For now, don&#x27;t worry too much about what this program is doing. We&#x27;ll get to that shortly.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/hello_world.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Grab a reference to the page at route &#x27;/hello&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/hello&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Add a markdown card to the page.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;quote&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Hello World&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&quot;The Internet? Is that thing still around?&quot; - *Homer Simpson*&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Finally, save the page.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-4-run-your-program"></a>Step 4: Run your program<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-4-run-your-program" title="Direct link to heading">#</a></h2><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./venv/bin/python hello_world.py</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-5-admire-your-creation"></a>Step 5: Admire your creation<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-5-admire-your-creation" title="Direct link to heading">#</a></h2><p>Point your browser to <a href="http://localhost:55555/hello" target="_blank" rel="noopener noreferrer">http://localhost:55555/hello</a>, and pause to reflect on a particularly pithy quote from the venerable Homer Simpson. </p><p><img alt="Hello World 1" src="data:image/png;base64,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"></p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-6-understand-your-program"></a>Step 6: Understand your program<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-6-understand-your-program" title="Direct link to heading">#</a></h2><p>Let&#x27;s walk through this program step by step.</p><p>This program (technically a <a href="/wave/docs/scripts">script</a>), illustrates the core of Wave&#x27;s programming model, or, &quot;How to think in Wave.&quot;</p><ol><li>Your Wave server instance holds a collection of pages.</li><li>To change a page, simply grab a reference to a page, change it, and save it. </li></ol><p>That&#x27;s it. Your changes are now visible to everyone.</p><p>Let&#x27;s understand this principle in practice using the little program we just created.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="grab-a-reference-to-a-page"></a>Grab a reference to a page<a aria-hidden="true" tabindex="-1" class="hash-link" href="#grab-a-reference-to-a-page" title="Direct link to heading">#</a></h3><p>A <code>site</code> represents a dictionary of all the pages on the Wave server. To get a reference to a page hosted at the route <code>/hello</code> (which translates to <code>http://localhost:55555/hello</code>), simply grab the value at key <code>/hello</code>. </p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/hello&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="change-the-page"></a>Change the page<a aria-hidden="true" tabindex="-1" class="hash-link" href="#change-the-page" title="Direct link to heading">#</a></h3><p>Similar to how a <code>site</code> represents a collection of pages, a <code>page</code> represents a collection of <em>cards</em>. A card represents a block of content: text, graphics, widgets, or some combination of those.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;hello&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Hello World&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&quot;The Internet? Is that thing still around?&quot; - *Homer Simpson*&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>Pages support different kinds of cards. In this case, we add a card named <code>hello</code> that displays markdown content (<code>markdown_card()</code>). The position and size of the card on the page is specified by the <code>box</code> attribute. In this case, the card is placed at column <code>1</code>, row <code>1</code>, sized <code>2 x 2</code> units. The <code>content</code> attribute supports <a href="https://guides.github.com/features/mastering-markdown/" target="_blank" rel="noopener noreferrer">Github Flavored Markdown</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="save-the-page"></a>Save the page<a aria-hidden="true" tabindex="-1" class="hash-link" href="#save-the-page" title="Direct link to heading">#</a></h3><p>Finally, we call <code>save()</code> on the <code>page</code>, which broadcasts our changes to all connected web browsers.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p><img alt="Hello World 1" src="data:image/png;base64,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"></p><p>So far, so good.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-7-edit-your-page-from-a-repl"></a>Step 7: Edit your page from a REPL<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-7-edit-your-page-from-a-repl" title="Direct link to heading">#</a></h2><p>Finally, just for kicks, let&#x27;s make some changes to our hello world page using a Python REPL and watch our page reflect those changes in realtime.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="start-a-python-repl"></a>Start a Python REPL<a aria-hidden="true" tabindex="-1" class="hash-link" href="#start-a-python-repl" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./venv/bin/python</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="grab-a-reference-to-our-page"></a>Grab a reference to our page<a aria-hidden="true" tabindex="-1" class="hash-link" href="#grab-a-reference-to-our-page" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">&gt;&gt;&gt;</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/hello&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="grab-a-reference-to-our-card"></a>Grab a reference to our card<a aria-hidden="true" tabindex="-1" class="hash-link" href="#grab-a-reference-to-our-card" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">&gt;&gt;&gt;</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">quote </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;quote&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="change-the-title"></a>Change the title<a aria-hidden="true" tabindex="-1" class="hash-link" href="#change-the-title" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">&gt;&gt;&gt;</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">quote</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">title </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Hello Again!&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p><img alt="Hello World 2" src="data:image/png;base64,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"></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="change-the-content"></a>Change the content<a aria-hidden="true" tabindex="-1" class="hash-link" href="#change-the-content" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">&gt;&gt;&gt;</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">quote</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;D&#x27;oh! - *Homer Simpson*&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p><img alt="Hello World 3" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATQAAAC8CAYAAAD2FVKeAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUAVGh1IDAxIE9jdCAyMDIwIDEwOjQ3OjEzIFBNIFBEVB7dUCcAABgPSURBVHic7d15XFV1wsfxz70XcAFRcclJx/RRXFIswFzIci9z10xxy0ltyr3VFq0Rt5rF3bTclzQrp3FfmNxqxDHvNUpzICt7VFRQUBwvKMi9zx/IkSugQBg8p+/79eKVnJ1D9+PvnHMRi9PpdCMiYgLW4j4AEZGioqCJiGkoaCJiGgqaiJiGgiYipqGgiYhpKGgiYhpev3QDbrfexiYiRcdisRR63UIFLa+IKW4iUhjZI5a9IwWNW4GCln1HPj4+eHl5/aKaiojcyu12c/36ddLS0ozm5Lcz+b6HlrVht9uNj48P3t7eipmIFDmLxYK3tzc+Pj4e3cmPAj0UcLvduN1uvLx+8a03EZHb8vLyMpqTX/kKmrHBGxvXyExE7jaLxZLZngKM0gp0yenO50ZFRIpCQbtTqEtOEZFfQ5Ffcma/Kaegiciv6dbu3Kk/Bf5JAQVNRH4tBe2NfvRJREyjYE85RUSKSZE+5byxyUIeiohIYRXx+9BERP4/UNBExDQUNBExDQVNRExDQRMR01DQRMQ0FDQRMQ0FTURM41cP2sSJE2j96CMe0zIyMggNCebP7757x/XHjRtL36f6ALB61SpCQ4K5dOlSoY6lf3g/QkOCWbp0SaHWv9Xx48dp0/pR9u/ff8dlV65cQWhIMD/+8EOR7FtEfsMjtP/9+We+//57yvr6snPnziLZpr+/P0FBQVSuXPmOy3p7ewPoX/8VKUIlMmgul4uFCxbQsUN72rVtwzvTp5GamnrH9XZs306vnj1o2aIFTz89mCNHjuS5bGRkJDabjVEjR/HjDz/w008/GfPS0tKImDSJVg+HMWjgAGMkmLW9L7/8gvB+fQlr2YIB/cNx2O0AJCYmEhUVxalTpzh27BihIcGsWLGc3r16EtayBRGTJuFyuQDw9roRtBthE5FfrliC5na7SUxM9PjIbtXKlSxbtpTw/v0ZO+4FduzYwfz58267zW+io5k4cQJ16tRl6rRppKelMXbM6DwvRyMjd9L0oYfo0rUrXl5e7Ny5w5i3dMkSNm3aSI+ePenRoycrV64w5iUlJfHmG29Qp04dZs2aja+vL+PHv5rnD85u3LCBoUOH0b59BzZt2sjOHZn7yRqZaYQmUnSK5dXkdDp5rGOHPOdv3LiBjh07MmzYcADOJySwcuUKXn75lTzX2bR5E97e3kyeMoWyZctSpUoVnvnDEPbs3k2v3r09ls0akXXu3AWA+vXrs3nTJkaMGAlkxq5hw4a8+up4AC4kXmDJ4sUABAQEsHffF6Snp5OQkED1GjU4fPgwCQkJuR7XwEGD6dqtG+3at2fbtq2cOHECuHnJ6a0RmkiRKZaglSlThr/89W/G526Xi7Fjxxifnzx5kpMnT/LFF18AmQ8N0tLSuHz5cp7bPJ+QQJUqVSlbtiwAte67D4D4hPgcy0ZGRgIwf/48j5FfbEwM9Rs04EJiIk2aNDGm165V2/hzSkoKkyMi2Lt3D+XKlaNcuXLGMeamQoUKAMZxZS2nEZpI0SuWV5PNZiMsLMz4/NYYVK5cmYoVK/LXv80w5ttsNvz9/fPcZpWqVTl06BApTidlfX2NkVDVqlVzLBsZmfkQYNGizFHX+QsXmPDmG0RGRlK/QQMqlC/P6dNxxvKn404bf966ZQv//Gckq1atplHjxny4ejWzZs0s6CkgMDCQYcOGU6ZMmQKvKyK5K5EPBfr0eYoff/yRbdu2EhsTw5tvvM74V1/Bas37cLt27Up6ejoTJkxgx/btTJs+jXLlytG2bTuP5WJjYjh58iTjxr1AaNOmhDZtSqdOnWjSpIkRujZt2hId/TUffPA+GzZs4ON164z1M27c1I/9Ppa9e/fyySefFOprjP0+li1bNud5qSoiBVcigzZ02DCefnoI6z/9lMmTI6gYEMC7f/7LbdcJDg5h6tRp/PzzCSIiJlG6VCnmzptPxYoVPZbLutxs284zdG3btuPMmTMcOXKEESNH8thjj7Nq5UrWrl1Dv/BwY7nu3bvToUMHZs2axcIFC3i80+OF+hqvX7/OtWvXCrWuiOTO4nQ6b/vPQWb/rSsuVwYZGS4CAgJ+reMrNleuXMHPzw+A7du2MXHiBNZ+tI769esX85GJ/HYkJSVhs1mxWm1YLBbjIy8lcoRW3JYsXswTnR5n48YNREVFsWrVSipWrEjt2rXvvLKIFBs9YstF/wEDOHvuLAvee4/Ll//L/fffz9x5f8LHx6e4D01EbkOXnCJSYumSU0R+sxQ0ETENBU1ETENBExHTUNBExDQUNBExDQVNRExDQRMR01DQRMQ0FDQRMQ0FTURMQ0ETEdNQ0ETENBQ0ETENBU1ETENBExHTUNBExDQUNBExDQVNRExDQRMR0/jVg5aYmEhoSLDx0TQ0hMcf68i4cWM5+O9/51i+R/durF+/Pl/bPnjwIKEhwfz3v/+97XKzZ8/ioaahhTr+O8nIyOBPb7+Fw+HIdf5XX33Fn95+i4yMjLuy/1/DN9HRTJ82jWeHD2PE88+xZMliUlNTjfnJycn06N6NuXPmFONRym9RsY3Qnv3jH5k3/z3mzJnLiBEjcbvdjBo1khUrlnss53Q6c/z281/KZrNhtd6dL/27775jy5Yt+Pv75zp/+7ZtHD9+HJvNdlf2fze5XC6mT5vG888/T0pqCs2aNeeeatVYsngx48aOMZZLTk6mSpWqtHrkkWI8WvktKrbfy9mgfgPCwsKMz3v26sWHq1czZ85sQkObEhQUxMGDB7l69SoPNW1apPu2WW1YrXcnKA67nfLly1O3bt3c5zvstG7d5q7s+25bu2YN+/bt5eNPPqFmzZrG9MDAQGbOmEFSYiIBlSpRs2ZNlixdWoxHKr9VJeoXDQ8aPJjt27fz8cfrCAoKIjYmhldeHY9/+fJA5uXa++8vJDYmBl9fX9q378CYMWMo6+vrsZ24uNPMnDmTo0eO4O/vT79+4TwzdKgx32qzYrPdnRGa3WEnJCQ0198dGB9/jri4OEKzBdrtdrNzxw6279jO+YQEqlevwbDhw2jQoKGxzN69e9mzexfh/QewbOlS4uJOExwczEsvv0J0dDRr167h7NmzBAUF8cILL1KmTBlj3TNnzrB27RqOfHuE0mVK83DYwwwaPNgYoZ45c4YpkyN48aWXWffRRxw58i3vvvtn6uQS5M/+8Rk9e/XyiBlAly5dqVs30Pg+LV60CKvNyrBhwwEY/+or9OjZi9iYGPbu20spHx9GjR5NvXr1WblyBQcOHKB0qVI8M3QoLVve/Etu/Kuv8GSfp0iIj2fDhg2kpV2jeYsWPPfc83h7exvLXbp0iWVLlxId/TUWi5VWrVoxbPhwj1H4N9HRfLr+U078dAJ//3I8+WQfOnTs6HGepkyO4PU33uTv69dz+LCDUqVKM3jwYNq0bXuH77qUFCXuoUC79u049NVXADw9ZAg9e/YEMmM2auQIateuzd9mzGDsuBeIitrPyJEjcLlcHtt49513eKzjY8ycOYtHHnmU+fPn8fnnnxvzvWxed+WSLyMjg2+/+YameYwoDx2yY7VaCQkJASAtLY1x48ayYMF7BD8YTO/eTxIXd5o/PvssFy5cMNb7/PN/cvToUebOmU2Lli0IDAxk3bp1vP7aa6xYvoyWLcNo3Kgx6z/9lE2bNhrrRUVFEd6vL5eTk+nZsyf1Ausxb95cli9fZizz1cGDREdHEzFpEv7l/enarRu1atfO9fivpl7FfshOitPpMb1ChQo0b94cL6/Mvx//8Y/PjKieOnWKXbt2sWTxIlKvptKlSxdOnTrF22+9zUsvvghA165dOXfuHG9NnGh8L7PWW7liOf/a/y+6dO1CaNOmrFyxgnlz5xr7jo2N5ak+T5J8OZkBAwfRqlUrFi36gK1bthjLLPrgA8aOHUPlypXp06cPfn7leO218Xz55Rce5+Hbb79l+vRpVKhQge49enDxYhJvvPH6He/JSslRokZoANXvrU5SUhIul8vjb9jZs2fRoUNH3nrrbWNacPCD9O7Vi8idO+n0xBPG9KeHDKFdu/YAtGjZkmPHjrF37x46dOgAgNVqxXqHoP37wAHSr6d7TAsNCc0xGszuu+++IyUlhZ//92dWr1qVY/6+ffsIDAw07q+9M3065xMSWPvROvz8/ABo07YtT3R6nL179tDnqacAOOxwUKtWLebOm4+Xlxe9evUmMjKSa2nXmDtvvjEa3L17FynOFABOnjzJa6+N57XXXqdr167GMSQnX2Lfvn3G6MnusOPn58eMmTOpVq3abc/JqNGjiJg0iS5du9C2TVtat2lDWFiYx2jp1KlTxMfHExqaGXWH3Q7AyFGjeOihZgBcuXKFhQsWMP2d6TRuHASABQszZ84wvudZ6z3cqhUDBw4ytp/iTCEycicvvfwyAHPnzqF5ixZEREw2lqlWrRoN788c4W7ZsoXVH65m+fLl1K0bCGTe3ujX9ym2btnKI488apyH0qVLExEx2TgPVatU5eWXXyIpMZFy5crd9txIyVDiguZyu3JMu3jxIrExMYwePcZjevXqNQgODuHAvw94BC04OMRjucB6gSQkJBifW21WbHd4KDB16hQuXbrkMW31h2uoncfoBTJfhD4+pTh65AhHjxzJMT8mJob+/QcA8P3337N58yaWLF1qxAygcuXKBAQEcOXKFeBmIP78l78aI6ALFy6QlpbGwAEDjZilpqZy+fJlatWuBcD8eXNp1qwZrVu39hhhZF0WZjnscDBw0KA7xgwyLy0feOBBPvv739mzZzcbN26gevXq/PVvM6hfv75xDvz9/QkMzIyH3WGnZcswI2aQeXnXpEkTI2YA8Qnx3HfffcbndoedmjVrMmDAQI9j+J86ddixY7vx+YXzF0hKTOQ///kPDRtmRqxb9+4AXL9+nTlzZjNkyBAjZgAWi4XAwECSky97nId+/cI9zsPVq1fx8vLid/fee8dzIyVDiQvambgzVKpUyWN0dvHiRQCqVq2SY/l77qlqzM+S9cLPYrNacWe7LM3PJeeWrdsKfOx2h52wh8OYMWNmjnnx8fF0fqKTcf9sx/bt/E+dOjz4YLDHcmlpaVy6dIkav/89cCMQ5cvTuHHjm/uxH8Lb25sHg2+uGx39NS6Xi9CQUJxOJ7t27QKgzZ49OY6le/cewM1YhoU9nO+vsUaNGowdN46x48Zx+PBhJk6YwJTJEXy4Zq1xDkJCQozv32GHg8GDn/Y8T4cO0anTEzmmZb+3eNjhoF94eI57kWfi4jzCN3bsWKZOncKggQMIqFSJDu07MGr0aPz8/Dh48CCXLl6kd+8nc3wd587FU69ePY/zcOu9suhvomnUuDE+Pj75Pj9SvEpU0NxuN7t376J5ixYe07PetnH+/HmPv2mzplWpkjN0txPUpInHZUxRyLp/NnLkqFzn2+2HPO6fxcTG0Oj+RjmW27ljB1arlRY3zkFWILK/sB12O40aNaZUqVLZtm+nbt26+JcvT3T01wCs/WgdlStXzrGPsmXLGtvxL1/eGE0VVEhICN26dWPz5s3GtMMOB4MGDwayXX5mC1VCQgKnT5/2mJaamsqxY8cY8oc/eKx36/lJT09nx47t9O3Xz5j2cKtWbN22nf8cO8b+/ftZvnwZqVdTmTQpgtiYGH73u98REBDgsZ24uNN8++03DH92+G3Pg8Nup23bdoU6N1I8StRDgeXLlnH8+HH69u3nMb1ixYrUq1ePLdleOABxcXEcPnyYFi1aFmg/DzzwAOH9+//i480u6/5ZaB4PBBx2h8f9s+vp6TidVzyWuXr1KitWLKdfeLhxGXrY4aBpqOc27XZ7jgcPDrudpg89BMC1a2kA+Pn5UalSJeMjKSmJa9euGTfsc4tlbiZHRND5iU45pqelpbFnz27atGkD5H7/7NZQZI0uH3jgAWNa9tFl1noA19LSPPa3/tNPSUtLo0+fp3C5XERHf01iYiJWq5VGjRvzx+eeo3HjxqSnZ977TL+ejvOWBxiQ+ZCg4f33G//f5HYeLl68yE8//ZTn91NKpmIL2vHjxzl48CBRUVH847PPGDnieRYuXMCLL71Eo0Y5Ry4vvPAikZGRTJ06hQMHoti6dQujRo6gfv0GPPb44wXa95TJEXRo3474+HNF9eXccbRjt9uNFzpk3uf78ssv2f+vf5GSksJ3R48ycsTzlK9QgREjRgL5H+GkpKRw7NgxI3wNGzSgVKlSzJo5k3PnznE5OZktmzczbOgzfPHFzSd7ucUyN3Xq1iE+Pp6ZM2Zw4sQJLly4wJ49uxnQP5yMjAyeHzHi5jm45f5ZvkaXh+yZsb9xf8/usFOxYkVWLF9GfPw5Ll68yIrly5kzZzZ/mjSJChUqkJaWxrPDh7Pog/dJcTpJTk5m9apVHD16lPDw/sY5vnTpEkuWLObKlSvExZ1myuQIoqKimDZtunFcuZ0Hh92eI7xS8hXbJef77y8EMp84Vq5cmaCgIBYtXpzjhn6W5i1a8N6Chby/cAHbt23D19eXdu3bM2bM2AK/BcPX1w8/Pz+8vYvu3ojD4chztBMfH09cnGeEnhk6lNjYWMbeeId9WV9fevfqzchRo4wX+62BgLxGONG4XC7jcta/fHmmTpvG9GnT6NI5815V9erVefPNCcbDk9ximZe+ffvxw/Ef+PjjdaxZ86FxvJ07d2bUyFHGqDNf98/s9pz3z+z2HPfP/vDMMxw6dIjON463du3azJk7j+bNmwNQunRpRo8Zw/sLFxo/GtegQUPmv7eAoKDMhw3NmjVj+PBnWbxoEQsXLMBqtfJo69Z8uGYN99xT7bbnweFwcH+jRpQuXfqO50dKDovT6XTfbgG32218uFwZZGS4ctyTkMJLSkzkitNJtWrVivzm8/Xr1zl79iw2m417i+BJndPp5NzZs3j7+HDvvffmePhSFE6dOkXPHt1Zu/Yj6jdowOnTp/H29jICdKvU1FTi4+PxL1eOgEqV8jzurHutvrd5242UPElJSdhsVqxWGxaLxfjIS4l6KPBbFFCpUp4vxF/Ky8uL3994WloUfH19c/0JgqJkjEpvPIGsUaPGbZcvU6YMtWrVuu0yvr6+CtlvRIl6KCBid9gJDg6+a/94gJibRmhSovQP75/jzb8i+aWgSYnSKNsbiEUKSuN6ETENBU1ETENBExHTUNBExDQUNBExDQVNRExDQRMR01DQRMQ0FDQRMQ0FTURMQ0ETEdNQ0ETENBQ0ETENBU1ETENBExHTUNBExDQUNBExDQVNRExDQRMR01DQRMQ0FDQRMQ0FTURMQ0ETEdNQ0ETENBQ0ETENBU1ETENBExHTUNBExDQUNBExDQVNRExDQRMR01DQRMQ0FDQRMQ0FTURMQ0ETEdNQ0ETENBQ0ETENBU1ETENBExHTUNBExDQUNBExDQVNRExDQRMR01DQRMQ0FDQRMQ0FTURMQ0ETEdNQ0ETENBQ0ETENBU1ETENBExHTUNBExDQUNBExDQVNRExDQRMR01DQRMQ0FDQRMQ0FTURMQ0ETEdNQ0ETENBQ0ETENBU1ETENBExHTUNBExDQUNBExDQVNRExDQRMR01DQRMQ0FDQRMQ0FTURMQ0ETEdNQ0ETENBQ0ETENBU1ETENBExHTUNBExDQUNBExDQVNRExDQRMR01DQRMQ0FDQRMQ0FTURMQ0ETEdNQ0ETENBQ0ETENBU1ETENBExHTUNBExDQUNBExDQVNRExDQRMR01DQRMQ0FDQRMQ0FTURMo4BBs9ydoxARyVP+u5OvoFksnht0u90FOx4RkQK6tTO3dig3hbrkvHr1amFWExHJt8J0psBBs1gsOJ1OUlJSNFITkSLndrtJSUnB6XTma1SWncXpdN6xSm63G7fbjcvlwuVykZGRgSsjgwyXy5gHbtQ3ESmMzG5ZsFgyP2xWK1abDZvNhtVqxWq1GvNux6tgO83coNViwW21YgNcRtCyqGoiUhA3I5XVF4vVmvnffEQsu3wHzWKxgNuduYOsmFksWG4NmtutpIlIvmQOzDyDlj1qFosFC/l7IAD5DJrFYsmM1o2NW61W3NlipntpIlIULNlGZcbo7EbM8hO1Al9yQmZV3Tcil3fMFDkRuZ3cA2XELPOTu3fJ6b5xyUm2y0+NzkSkKFlyGZEV6SXnrRs1wnbLjhQ3ESmMvIJV0LdtFChoue0ke8QKunMRkVv9ko4UKmhFtXMRkaKkf21DRExDQRMR0/g/3z+WgK8lKMEAAAAASUVORK5CYII="></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="quit-your-repl"></a>Quit your REPL<a aria-hidden="true" tabindex="-1" class="hash-link" href="#quit-your-repl" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">&gt;&gt;&gt;</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">quit</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="summary"></a>Summary<a aria-hidden="true" tabindex="-1" class="hash-link" href="#summary" title="Direct link to heading">#</a></h2><p>What we just did - add content from one program and make edits to it from another - illustrates another important aspect of Wave&#x27;s programming model: <em>The Wave server retains content</em>. Your <code>hello_world.py</code> program did its thing and exited. So did your REPL. But your content was retained for the viewing pleasure of future visitors to <code>/hello</code>.  </p><p>Next, we&#x27;ll take the principles we learned from this tutorial and apply it towards a supposedly spirited folk song involving arithmetic progressions.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/tutorial-hello.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/tour"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« A Tour of Wave</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/tutorial-beer"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Tutorial: Beer Wall »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#step-1-start-the-wave-server" class="table-of-contents__link">Step 1: Start the Wave Server</a></li><li><a href="#step-2-set-up-a-working-directory" class="table-of-contents__link">Step 2: Set up a working directory</a><ul><li><a href="#create-a-directory" class="table-of-contents__link">Create a directory</a></li><li><a href="#set-up-a-virtual-environment" class="table-of-contents__link">Set up a virtual environment</a></li><li><a href="#install-the-wave-python-driver" class="table-of-contents__link">Install the Wave Python driver</a></li></ul></li><li><a href="#step-3-write-your-program" class="table-of-contents__link">Step 3: Write your program</a></li><li><a href="#step-4-run-your-program" class="table-of-contents__link">Step 4: Run your program</a></li><li><a href="#step-5-admire-your-creation" class="table-of-contents__link">Step 5: Admire your creation</a></li><li><a href="#step-6-understand-your-program" class="table-of-contents__link">Step 6: Understand your program</a><ul><li><a href="#grab-a-reference-to-a-page" class="table-of-contents__link">Grab a reference to a page</a></li><li><a href="#change-the-page" class="table-of-contents__link">Change the page</a></li><li><a href="#save-the-page" class="table-of-contents__link">Save the page</a></li></ul></li><li><a href="#step-7-edit-your-page-from-a-repl" class="table-of-contents__link">Step 7: Edit your page from a REPL</a><ul><li><a href="#start-a-python-repl" class="table-of-contents__link">Start a Python REPL</a></li><li><a href="#grab-a-reference-to-our-page" class="table-of-contents__link">Grab a reference to our page</a></li><li><a href="#grab-a-reference-to-our-card" class="table-of-contents__link">Grab a reference to our card</a></li><li><a href="#change-the-title" class="table-of-contents__link">Change the title</a></li><li><a href="#change-the-content" class="table-of-contents__link">Change the content</a></li><li><a href="#quit-your-repl" class="table-of-contents__link">Quit your REPL</a></li></ul></li><li><a href="#summary" class="table-of-contents__link">Summary</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/fcfc3752.e536a904.js"></script>
-<script src="/wave/47a365f9.d7ec0ae7.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Finally, save the page.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-4-run-your-program"></a>Step 4: Run your program<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-4-run-your-program" title="Direct link to heading">#</a></h2><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./venv/bin/python hello_world.py</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-5-admire-your-creation"></a>Step 5: Admire your creation<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-5-admire-your-creation" title="Direct link to heading">#</a></h2><p>Point your browser to <a href="http://localhost:55555/hello" target="_blank" rel="noopener noreferrer">http://localhost:55555/hello</a>, and pause to reflect on a particularly pithy quote from the venerable Homer Simpson. </p><p><img alt="Hello World 1" src="data:image/png;base64,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"></p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-6-understand-your-program"></a>Step 6: Understand your program<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-6-understand-your-program" title="Direct link to heading">#</a></h2><p>Let&#x27;s walk through this program step by step.</p><p>This program (technically a <a href="/wave/docs/scripts">script</a>), illustrates the core of Wave&#x27;s programming model, or, &quot;How to think in Wave.&quot;</p><ol><li>Your Wave server instance holds a collection of pages.</li><li>To change a page, simply grab a reference to a page, change it, and save it. </li></ol><p>That&#x27;s it. Your changes are now visible to everyone.</p><p>Let&#x27;s understand this principle in practice using the little program we just created.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="grab-a-reference-to-a-page"></a>Grab a reference to a page<a aria-hidden="true" tabindex="-1" class="hash-link" href="#grab-a-reference-to-a-page" title="Direct link to heading">#</a></h3><p>A <code>site</code> represents a dictionary of all the pages on the Wave server. To get a reference to a page hosted at the route <code>/hello</code> (which translates to <code>http://localhost:55555/hello</code>), simply grab the value at key <code>/hello</code>. </p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/hello&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="change-the-page"></a>Change the page<a aria-hidden="true" tabindex="-1" class="hash-link" href="#change-the-page" title="Direct link to heading">#</a></h3><p>Similar to how a <code>site</code> represents a collection of pages, a <code>page</code> represents a collection of <em>cards</em>. A card represents a block of content: text, graphics, widgets, or some combination of those.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;hello&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">markdown_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 2 2&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Hello World&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    content</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&quot;The Internet? Is that thing still around?&quot; - *Homer Simpson*&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>Pages support different kinds of cards. In this case, we add a card named <code>hello</code> that displays markdown content (<code>markdown_card()</code>). The position and size of the card on the page is specified by the <code>box</code> attribute. In this case, the card is placed at column <code>1</code>, row <code>1</code>, sized <code>2 x 2</code> units. The <code>content</code> attribute supports <a href="https://guides.github.com/features/mastering-markdown/" target="_blank" rel="noopener noreferrer">Github Flavored Markdown</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="save-the-page"></a>Save the page<a aria-hidden="true" tabindex="-1" class="hash-link" href="#save-the-page" title="Direct link to heading">#</a></h3><p>Finally, we call <code>save()</code> on the <code>page</code>, which broadcasts our changes to all connected web browsers.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p><img alt="Hello World 1" src="data:image/png;base64,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"></p><p>So far, so good.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-7-edit-your-page-from-a-repl"></a>Step 7: Edit your page from a REPL<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-7-edit-your-page-from-a-repl" title="Direct link to heading">#</a></h2><p>Finally, just for kicks, let&#x27;s make some changes to our hello world page using a Python REPL and watch our page reflect those changes in realtime.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="start-a-python-repl"></a>Start a Python REPL<a aria-hidden="true" tabindex="-1" class="hash-link" href="#start-a-python-repl" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./venv/bin/python</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="grab-a-reference-to-our-page"></a>Grab a reference to our page<a aria-hidden="true" tabindex="-1" class="hash-link" href="#grab-a-reference-to-our-page" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">&gt;&gt;&gt;</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/hello&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="grab-a-reference-to-our-card"></a>Grab a reference to our card<a aria-hidden="true" tabindex="-1" class="hash-link" href="#grab-a-reference-to-our-card" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">&gt;&gt;&gt;</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">quote </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;quote&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="change-the-title"></a>Change the title<a aria-hidden="true" tabindex="-1" class="hash-link" href="#change-the-title" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">&gt;&gt;&gt;</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">quote</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">title </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Hello Again!&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p><img alt="Hello World 2" src="data:image/png;base64,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"></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="change-the-content"></a>Change the content<a aria-hidden="true" tabindex="-1" class="hash-link" href="#change-the-content" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">&gt;&gt;&gt;</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">quote</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">content </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&quot;D&#x27;oh! - *Homer Simpson*&quot;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p><img alt="Hello World 3" src="data:image/png;base64,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"></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="quit-your-repl"></a>Quit your REPL<a aria-hidden="true" tabindex="-1" class="hash-link" href="#quit-your-repl" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">&gt;&gt;&gt;</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">quit</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="summary"></a>Summary<a aria-hidden="true" tabindex="-1" class="hash-link" href="#summary" title="Direct link to heading">#</a></h2><p>What we just did - add content from one program and make edits to it from another - illustrates another important aspect of Wave&#x27;s programming model: <em>The Wave server retains content</em>. Your <code>hello_world.py</code> program did its thing and exited. So did your REPL. But your content was retained for the viewing pleasure of future visitors to <code>/hello</code>.  </p><p>Next, we&#x27;ll take the principles we learned from this tutorial and apply it towards a supposedly spirited folk song involving arithmetic progressions.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/tutorial-hello.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/tour"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« A Tour of Wave</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/tutorial-beer"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Tutorial: Beer Wall »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#step-1-start-the-wave-server" class="table-of-contents__link">Step 1: Start the Wave server</a></li><li><a href="#step-2-set-up-a-working-directory" class="table-of-contents__link">Step 2: Set up a working directory</a><ul><li><a href="#create-a-directory" class="table-of-contents__link">Create a directory</a></li><li><a href="#set-up-a-virtual-environment" class="table-of-contents__link">Set up a virtual environment</a></li><li><a href="#install-the-wave-python-driver" class="table-of-contents__link">Install the Wave Python driver</a></li></ul></li><li><a href="#step-3-write-your-program" class="table-of-contents__link">Step 3: Write your program</a></li><li><a href="#step-4-run-your-program" class="table-of-contents__link">Step 4: Run your program</a></li><li><a href="#step-5-admire-your-creation" class="table-of-contents__link">Step 5: Admire your creation</a></li><li><a href="#step-6-understand-your-program" class="table-of-contents__link">Step 6: Understand your program</a><ul><li><a href="#grab-a-reference-to-a-page" class="table-of-contents__link">Grab a reference to a page</a></li><li><a href="#change-the-page" class="table-of-contents__link">Change the page</a></li><li><a href="#save-the-page" class="table-of-contents__link">Save the page</a></li></ul></li><li><a href="#step-7-edit-your-page-from-a-repl" class="table-of-contents__link">Step 7: Edit your page from a REPL</a><ul><li><a href="#start-a-python-repl" class="table-of-contents__link">Start a Python REPL</a></li><li><a href="#grab-a-reference-to-our-page" class="table-of-contents__link">Grab a reference to our page</a></li><li><a href="#grab-a-reference-to-our-card" class="table-of-contents__link">Grab a reference to our card</a></li><li><a href="#change-the-title" class="table-of-contents__link">Change the title</a></li><li><a href="#change-the-content" class="table-of-contents__link">Change the content</a></li><li><a href="#quit-your-repl" class="table-of-contents__link">Quit your REPL</a></li></ul></li><li><a href="#summary" class="table-of-contents__link">Summary</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/fcfc3752.1ceac70b.js"></script>
+<script src="/wave/47a365f9.7354e3ea.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/tutorial-monitor/index.html b/docs/docs/tutorial-monitor/index.html
index 8ad40777f7..0f2e8457db 100644
--- a/docs/docs/tutorial-monitor/index.html
+++ b/docs/docs/tutorial-monitor/index.html
@@ -5,40 +5,40 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Tutorial: System Monitor | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Tutorial: System Monitor | H2O Wave"><meta data-react-helmet="true" name="description" content="In this tutorial, we&#x27;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."><meta data-react-helmet="true" property="og:description" content="In this tutorial, we&#x27;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."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/tutorial-monitor"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/tutorial-monitor"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/0a6c0f5b.192be162.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/0a6c0f5b.da8efe17.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Tutorial: System Monitor</h1></header><div class="markdown"><p>In this tutorial, we&#x27;ll put our learnings from the <a href="/wave/docs/tutorial-hello">first</a> and <a href="/wave/docs/tutorial-beer">second</a> tutorials to some real-world use: a simple system monitoring tool that displays CPU, memory and network stats on a web page. </p><p><img alt="CPU" src="data:image/png;base64,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"></p><p>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&#x27;s system utilization from one place. How cool is that?</p><p>We&#x27;ll also introduce a new concept, called <a href="/wave/docs/buffers">data buffers</a>, which allows you to use the Wave server to store <em>rows</em> (also called <em>tuples</em> or <em>records</em>) of information - much like how you would use tables in a database, or dataframes in Python or R - to deal with structured data.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="prerequisites"></a>Prerequisites<a aria-hidden="true" tabindex="-1" class="hash-link" href="#prerequisites" title="Direct link to heading">#</a></h2><p>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 <a href="/wave/docs/tutorial-hello">Hello World tutorial</a> and complete steps 1 and 2.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-1-install-dependencies"></a>Step 1: Install dependencies<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-1-install-dependencies" title="Direct link to heading">#</a></h2><p>We&#x27;ll be using the excellent <code>psutil</code> package to read system stats. Let&#x27;s go ahead and install that in our virtual environment:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./venv/bin/pip </span><span class="token function" style="color:rgb(130, 170, 255)">install</span><span class="token plain"> psutil</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-2-monitor-cpu-usage"></a>Step 2: Monitor CPU usage<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-2-monitor-cpu-usage" title="Direct link to heading">#</a></h2><p>Here&#x27;s what our program looks like:</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/system_monitor.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> psutil</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Tutorial: System Monitor</h1></header><div class="markdown"><p>In this tutorial, we&#x27;ll put our learnings from the <a href="/wave/docs/tutorial-hello">first</a> and <a href="/wave/docs/tutorial-beer">second</a> tutorials to some real-world use: a simple system monitoring tool that displays CPU, memory and network stats on a web page. </p><p><img alt="CPU" src="data:image/png;base64,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"></p><p>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&#x27;s system utilization from one place. How cool is that?</p><p>We&#x27;ll also introduce a new concept, called <a href="/wave/docs/buffers">data buffers</a>, which allows you to use the Wave server to store <em>rows</em> (also called <em>tuples</em> or <em>records</em>) of information - much like how you would use tables in a database, or dataframes in Python or R - to deal with structured data.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="prerequisites"></a>Prerequisites<a aria-hidden="true" tabindex="-1" class="hash-link" href="#prerequisites" title="Direct link to heading">#</a></h2><p>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 <a href="/wave/docs/tutorial-hello">Hello World tutorial</a> and complete steps 1 and 2.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-1-install-dependencies"></a>Step 1: Install dependencies<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-1-install-dependencies" title="Direct link to heading">#</a></h2><p>We&#x27;ll be using the excellent <code>psutil</code> package to read system stats. Let&#x27;s go ahead and install that in our virtual environment:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./venv/bin/pip </span><span class="token function" style="color:rgb(130, 170, 255)">install</span><span class="token plain"> psutil</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-2-monitor-cpu-usage"></a>Step 2: Monitor CPU usage<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-2-monitor-cpu-usage" title="Direct link to heading">#</a></h2><p>Here&#x27;s what our program looks like:</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/system_monitor.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> psutil</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/monitor&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">cpu_card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cpu_stats&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">small_series_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;CPU&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;={{usage}}%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">usage</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0.0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    plot_data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;tick usage&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">15</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_category</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;tick&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;usage&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_zero_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$red&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">tick </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">while</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    tick </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cpu_usage </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> psutil</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">cpu_percent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">interval</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cpu_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">usage </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> cpu_usage</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    cpu_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">tick</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cpu_usage</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-3-run-your-program"></a>Step 3: Run your program<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-3-run-your-program" title="Direct link to heading">#</a></h2><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./venv/bin/python system_stats.py</span></div></div></div></div></div><p>Point your browser to <a href="http://localhost:55555/monitor" target="_blank" rel="noopener noreferrer">http://localhost:55555/monitor</a>.</p><p><img alt="CPU" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4AAABgCAYAAADsHcsSAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUARnJpIDAyIE9jdCAyMDIwIDAzOjQ1OjA0IFBNIFBEVNBSdaAAAA3fSURBVHic7Z15dBRVvoC/quqqTkgcBojMzPOxDAmLRFRA9m1Yk7CETVmiLI6egQAKCuMoiz59uM24EDAOOPDUOWowKkQBHYHHJoGYMIsMe8KiwhCBJL5A0unuqq73R5MmCQnpztLFJPc7J4dTXbd+997k495b99atloqKikwEgiAjW10AQeNEiCewBCGewBKEeAJLEOIJLEGIJ7AEIZ7AEmy1DWCaYhqwMSNJUo2uq5F4VckmJGwclJWt7N88EAkDEq9sJpqmYbPZamy8oGFgmia6ruNyuXx++OOE32O80qCmaaJpGqqqCukESJKEqqpomlbOkeoI6ObCNE1M08Rmq/XQUNDAsNlsPj/8wS/xfMGuBhYtnaAikiR5PfGz1QuoqzX9CChovATiSI26WoGgMuq0qy07YBTiCW5ERUdu5ErAKxdCPEFVBOKGWDITWEJgd7UCgZ/U2V3t1XC1KIqgcVCH83gCQV0jxBNYghBPYAlCPIElCPEEliDEE1iCEE9gCUI8gSVYIl5eXh5PL1vK0CGDGTRwALNnzeKbb77xnV+6dAndu3Wle7eu3NO9G6NHjSQ19UPf+bjYGBY+/li5mGkbN9K9W1eOHz8etHoEi3PnzjJ71iz69e3DffdOZOfOHVWmTUtLY2RcHP369mHJksU4HA4APB4PTy9bysMPPcQffv+yL31WViaPPvpIvdehIkEX78qVKzw4cwbbtm2j/4ABjB07ju+++5bE2bPKSWO321m27GkWLfotERERvPzSS6Snpwe7uJZjmiaPLVjAXXffxc5du1m8ZAn//dxznDlz5rq0B7Ky+POf32XVqlVs/98dhNjtvPjC8wBkZ2dTWHiZtevWcfDgQfLz8ykuLub1115j6dJlQa6VBeKtT0nh3LlzvPLKqzz77HM8vnAh7733PorNxgfvv+dLp6oq48aPZ8rUqaxc9QayLLN165fBLq7lnDp1ioKCAhIT56BpGl27dmNMfDyfb9lyXdrU1A+ZP38BkVFRhIaGsnDRb5k8eQoANkXB6SzBNE3cbjc2m42kFa8zdWoCLVu2DHa1ar+vNlC+/jqDVq1a0a9/f99nzVu04NNPP6vymrCwMGw2FWeJMxhFvKkwTQ9U2GogyzKnT5++Lu2hQ4cZOmw4kydNIjf3PEOGDOV3Tz4JQGRUFJ2jo0mcPZvRY8Zw/Pgxzufm8tTiJUGpR0WC3uIVFBRw6623Xvd58+bNad68ue+4uLiYvLw8zp07y5vJybhcTu7u2jWYRb0paNcukp/ccgtvrVmDw+Hg64wMNm/eXOnTHwUFBXy4PoVXXn2VTZs2c/HiRVYmJfnOP/LIo6xes4YJEyZa1sWWEnTxmjVrxoULF677vLi4mOKiIt+xx+NhxPBhxI8ZwzvvvE3/AQOYOHEi4N1YohtGuetLjxvaRiRZlnl9RRKZmZkMHTKYdevWcn/C/ZV2jzbVRuKcObRq1YqfNG3KgscWsG37tuvSlXaxp0+dYs6cRBY/9WS5330wCLp4vXr15uzZs6Tv3ev7LD8/n9iYEbzw4gvl0q56I5nk5DfZsGEjSUkrUVUVgIiICI4cOVLul5WVlek715BwuVwU5Oezdt069u3P4K0/reXipYtEtY+6Lm3rVq1xu3XfsWF4kCv8R8zKyuR8bi5j4uNJWpnE8uXP0y4yki2VjBnrk6CP8aZMnUpa2kYWLVpITGwsTZs2ZdvWbei6zowZM33pwsPD6du3b6UxJt57L889+ywzZkynX//+nDp5kvT0dIYMGVquu24IqKrKsmVL+c1vZjEiJob9+/eze9cuEhPnALBly2Z+8Yv/oFs3703HG6tWEhUVhaZpvPbaq8TGxvlild7FrkhaCYCu69jtdkLsIbh1d1DrFXTxwsPDefudd0lKWsGe3bsxDIPo6GjmznuF9u3b+xVj7NhxmB6TDz54n/UpKTRt2pSEhPuZM3duPZc++EiSxIqklTzz9DKef345bdu25eXf/4Hw8HAAdu/aRbvISLp168akSZO4eOECD9yfgNPpJCYmlrnz5vliJa14nSlTp/q66ZkzZzJ3TiKa3c5LL74U3HpV99b3sjuHPB4Dw/A0uFZFUDfk5+ejKDKyrCBJku+nMsSSmcAShHgCSxDiCSxBiCewBCGewBKEeAJLEOIJLEGIJ7AEIZ7AEoR4AksQ4gksQYgnsIQaiVf8zGKMw4fquiyCRkSNxHPvS+fKY/MoWbcG88rlui6ToBFQI/FC5z+OHBGBc/0HFC2Yh3tb49v9JagdNXoer5npAcC54SOcqesBUAcMwj45AaVjp/ovteCmJJDn8WolHoDnX+dwbvwE91e7kVQb9skJaJMSkEJD67ZWgpueoIpXin4gC+enGzCyT6BERmGfnIA6eGjd1Ejwb4El4pXi+iwN56Y0zMuXUXv2Qo0ZiTrwVzWujJ6ZgTM1BblVa5QOHVE6dEKJvH6HlcB6LBUPvN2v6/NNuHZsB4+J7c670GJGoo6I9bsS7q1/wflRCsaZM9g6R2OczMF0et8kINkUr4AdOqF09Moot27jd+yGjuf77/Dk52O76+6g5mu5eKUY357BvWM77p3bMV1ulA4d0caORxsRV+U1zo/W40pNwfPjj9i698A+bjxK+46A9xdqnMzBOJmNkZODcfrUtYqEhKB07IRyx53Y7rgTpUsXJHuIX+VsSJhOJ0WL5mMcO4rasxf2hOko0XcEJe+bRrxSPHmXcH2+GfeO7ZgOB0rr1miTE3wCmoWFOFNTcKamgGmiDhiIfewE5P9sVU1gD0ZO9jUZs0/g+eEH32mlfQevhHd0wdblTqRmDX93XPHyZ9D/eoCQaTNxbvwEz4VcQhKmYZ86DTStXvO+6cTzxXI5cX2WhuvLLzAvX0b+2c+wde2O6y+fA6CNiEUbOwG5RYsaxQcwC/IxThxHP34M48QxjJwc3zn5ttu8It4ejRY7EhSlxvncjJS89SbOjz4kNHEe6qDBePLycG38GNf2rSgdO2FPmIbat3/1gWrITSteWVxffoHrszQ8eZewjx2PNm4CUmiTWsetiHm5ECM7GyPnhLd1zD6B6XCAJKGNjkeLiUPpeHud5xtsXGmf4EheSUjCA2jx48udc2fsw7XxE4xvz6CNGYt96jTkSl6cVFv+LcSzCrOwEHdmBnpmBvpB71tIbZ2jUUfEovYfiNT0pxaXMHDc+/ZS/MwStJGjCZn+YKVpzKIrODd8jGvLJuSf/xx7wnS0uFF1Wg4hnp8YJ3PQMzNwZ2bgOX8eSdNQh8eiDhiIrXsPq4vnF0ZONlcSH0bt05fQ+QurTa///W84N36MceI46sBB2Kc9iNL2l3VSFiFeoBjGtVYwMwPT8KB07ITatx+23v1Q2kVaXcJKMS8XcuWh6UgRt9Jk4e+Qfupna63r3uXODR8j33YbTZ5YjNK59ne+Qrxa4Mk9j/51Bu6sDN+Nie2eHqh9+qEOj62XpUA9MwP3/nQ833+HFjsKddgIv6678shszB9+IPTJJSht2gae74FMHKuTkVSV0CcWY7unZ8AxyiLEqyP0fx5Ez8pAz8rEU1CAZLdj69MPbXgMtp69axzXLCpC378X97509P17MXUDZBm5ZUs8ublIqooaNwp7/HjkKoQqXv5fuHfvpMlTy2o1UWwcO4pjdTJmQR6hTyyp1SqTEK+uMU3ce/fgztiH/tcDAMgtWqAOi0Ht3QeahCGFhSE1CUNq0qTSaRrP+X/h3rcXfX86+jf/AEAKC0Pt2Rtb/wHYorsA3jGYe99e9H17MQ0DJao9Wvz4cjcCJX/6I87U9YTOSkQdPKzW1fOc/R7H6mSMnGxCFz2JFlP1BP+NEOLVI2ZhIe69u3F/tafcyklZpBD7VQnDICwMnE6MM96XZcsREdh69ELt0xelQ9WPkJlOJ+49u9DTv0I/dhQALW4USlR7HKtWYJ94H/b7ptRdvX4swLE6Gf0ffyd03gK0seOrv6gCQrwg4Tl3Fk/eJe+8oMOBefUHRzFmSdljB0qn27H16IXyy3aB55N7HveeXbj37MJz6RLqoF8RmlgPX4qiu3H8MRl3+leEPDwL++SEgC4X4jVgjCOHUTpH12seJW+vxfXlF4Q8MAP7jF/7VSb96GGKBg/zW7ygv4pWUDvqWzqAkAcfRgq/hZL33sUscRAy69orfj0XL2IcPYxx5BD64UMYV4cBAAQw3hTiCSrFft9kpPBwSt79H8ySEsxLl9AP/xPzsndzlxQa6n3gd3Q8cpu2KK3b8H8BxBfiCapEixuFFB6OI3klSmQUat/+KJFRKG3aVjnN4y9ijCeoMwokWbx8W3BzI8QTWIIQT2AJQjyBJQjxBJYgxBNYQoDiNazvghXUB/454pd4FedibjjxJ2iUVHSiui+srlFX6xTmCSoQqBMBiydJEkWAw2OKlk+AideFIqpv5cpS7VqtJEmYplluCUSSJIo8Hgrdhm85DUxMYWKjwOvXNRcUWUaW5euWyW4kYkAPCZQGlSUJU5ZRAI9PvFKEfQ2bazKVuiDJsvffG6zNVsRv8SRJgtKWr1Q6SUKqKJ4puuCGirehKy9eWfkkSULCvy7XL/FKu1uuBpZlGbOMdKboYxslFYdfkiT5xKxOvoC7WvCab16VsWrphIwNiyr2TpRK5z2on6629CaDMt2uaO0aN5XdSNRZV1sxoE/ACpkICRsHVe4cq8vplOoyKCtbIBkLGgY1/ZvXes+FkE1QE8TTKQJL+H+wzfcQJS2VtgAAAABJRU5ErkJggg=="></p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-4-understand-your-program"></a>Step 4: Understand your program<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-4-understand-your-program" title="Direct link to heading">#</a></h2><p>You&#x27;ll notice that the above program is quite similar to the program we wrote during the <a href="/wave/docs/tutorial-beer">Beer Wall</a> tutorial, with three important differences (see highlighted lines above):</p><ol><li>We use a <code>ui.small_series_stat_card()</code> instead of a <code>ui.markdown_card()</code>.</li><li>The card is capable of dealing with multiple rows of data.</li><li>To display information on the card, you only need to send it new values (and not all the data rows all over again). </li></ol><p>Let&#x27;s explore these topics one by one.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="using-a-stats-card"></a>Using a stats card<a aria-hidden="true" tabindex="-1" class="hash-link" href="#using-a-stats-card" title="Direct link to heading">#</a></h3><p>The Wave SDK ships with a variety of <em>stats cards</em>, which are cards that display values or graphics, or a combination of both (see <a href="/wave/docs/examples">Gallery</a> for more). </p><p>In this case, we use <code>small_series_stats_card()</code>, which displays a value and a time series visualization.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">cpu_card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cpu_stats&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">small_series_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="declaring-a-data-buffer"></a>Declaring a data buffer<a aria-hidden="true" tabindex="-1" class="hash-link" href="#declaring-a-data-buffer" title="Direct link to heading">#</a></h3><p>The stats card is capable of rendering its visualization using a <a href="/wave/docs/buffers">data buffer</a>. A data buffer is similar to a database table in that it has a predefined structure (columns and rows), but is write-only (you cannot query information; only insert, update or delete them).</p><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>The <a href="/wave/docs/buffers">data buffer</a> topic covers different types of buffers in more detail.</p></div></div><p>In this case, we declare a <em>cyclic buffer</em>, a <a href="https://en.wikipedia.org/wiki/FIFO_(computing_and_electronics)" target="_blank" rel="noopener noreferrer">FIFO</a> data structure that holds a fixed number of rows, and can only be appended to. Our buffer holds at most 15 rows, and has exactly two columns: <code>tick</code> (a one-up integer) and <code>usage</code> (the CPU usage).</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;tick usage&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">15</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span></div></div></div></div></div><p>Internally, the card&#x27;s data buffer might look like this in memory when first created:</p><table><thead><tr><th>#</th><th>tick</th><th>usage</th></tr></thead><tbody><tr><td>0</td><td></td><td></td></tr><tr><td>1</td><td></td><td></td></tr><tr><td>...</td><td>...</td><td>...</td></tr><tr><td>13</td><td></td><td></td></tr><tr><td>14</td><td></td><td></td></tr></tbody></table><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="inserting-into-the-data-buffer"></a>Inserting into the data buffer<a aria-hidden="true" tabindex="-1" class="hash-link" href="#inserting-into-the-data-buffer" title="Direct link to heading">#</a></h3><p>Lastly, we measure CPU usage every second and append a new row to the end of card&#x27;s data buffer, like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cpu_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">tick</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cpu_usage</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><p>Internally, the card&#x27;s data buffer might look like in memory while in use:</p><table><thead><tr><th>#</th><th>tick</th><th>usage</th></tr></thead><tbody><tr><td>0</td><td>1015</td><td>4.2</td></tr><tr><td>1</td><td>1016</td><td>4.9</td></tr><tr><td>...</td><td>...</td><td>...</td></tr><tr><td>13</td><td>1028</td><td>5.8</td></tr><tr><td>14</td><td>1039</td><td>7.5</td></tr></tbody></table><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-5-monitor-memory-usage"></a>Step 5: Monitor memory usage<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-5-monitor-memory-usage" title="Direct link to heading">#</a></h2><p>As a final step, we can duplicate parts of our program to create another card that displays memory stats. The two cards behave identically, except that one displays CPU usage and the other, memory.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/system_monitor.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> psutil</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-3-run-your-program"></a>Step 3: Run your program<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-3-run-your-program" title="Direct link to heading">#</a></h2><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./venv/bin/python system_stats.py</span></div></div></div></div></div><p>Point your browser to <a href="http://localhost:55555/monitor" target="_blank" rel="noopener noreferrer">http://localhost:55555/monitor</a>.</p><p><img alt="CPU" src="data:image/png;base64,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"></p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-4-understand-your-program"></a>Step 4: Understand your program<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-4-understand-your-program" title="Direct link to heading">#</a></h2><p>You&#x27;ll notice that the above program is quite similar to the program we wrote during the <a href="/wave/docs/tutorial-beer">Beer Wall</a> tutorial, with three important differences (see highlighted lines above):</p><ol><li>We use a <code>ui.small_series_stat_card()</code> instead of a <code>ui.markdown_card()</code>.</li><li>The card is capable of dealing with multiple rows of data.</li><li>To display information on the card, you only need to send it new values (and not all the data rows all over again). </li></ol><p>Let&#x27;s explore these topics one by one.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="using-a-stats-card"></a>Using a stats card<a aria-hidden="true" tabindex="-1" class="hash-link" href="#using-a-stats-card" title="Direct link to heading">#</a></h3><p>The Wave SDK ships with a variety of <em>stats cards</em>, which are cards that display values or graphics, or a combination of both (see <a href="/wave/docs/examples">Gallery</a> for more). </p><p>In this case, we use <code>small_series_stats_card()</code>, which displays a value and a time series visualization.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">cpu_card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cpu_stats&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">small_series_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="declaring-a-data-buffer"></a>Declaring a data buffer<a aria-hidden="true" tabindex="-1" class="hash-link" href="#declaring-a-data-buffer" title="Direct link to heading">#</a></h3><p>The stats card is capable of rendering its visualization using a <a href="/wave/docs/buffers">data buffer</a>. A data buffer is similar to a database table in that it has a predefined structure (columns and rows), but is write-only (you cannot query information; only insert, update or delete them).</p><div class="admonition admonition-info alert alert--info"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>info</h5></div><div class="admonition-content"><p>The <a href="/wave/docs/buffers">data buffer</a> topic covers different types of buffers in more detail.</p></div></div><p>In this case, we declare a <em>cyclic buffer</em>, a <a href="https://en.wikipedia.org/wiki/FIFO_(computing_and_electronics)" target="_blank" rel="noopener noreferrer">FIFO</a> data structure that holds a fixed number of rows, and can only be appended to. Our buffer holds at most 15 rows, and has exactly two columns: <code>tick</code> (a one-up integer) and <code>usage</code> (the CPU usage).</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;tick usage&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">15</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span></div></div></div></div></div><p>Internally, the card&#x27;s data buffer might look like this in memory when first created:</p><table><thead><tr><th>#</th><th>tick</th><th>usage</th></tr></thead><tbody><tr><td>0</td><td></td><td></td></tr><tr><td>1</td><td></td><td></td></tr><tr><td>...</td><td>...</td><td>...</td></tr><tr><td>13</td><td></td><td></td></tr><tr><td>14</td><td></td><td></td></tr></tbody></table><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="inserting-into-the-data-buffer"></a>Inserting into the data buffer<a aria-hidden="true" tabindex="-1" class="hash-link" href="#inserting-into-the-data-buffer" title="Direct link to heading">#</a></h3><p>Lastly, we measure CPU usage every second and append a new row to the end of card&#x27;s data buffer, like this:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cpu_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">tick</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cpu_usage</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><p>Internally, the card&#x27;s data buffer might look like this in memory while in use:</p><table><thead><tr><th>#</th><th>tick</th><th>usage</th></tr></thead><tbody><tr><td>0</td><td>1015</td><td>4.2</td></tr><tr><td>1</td><td>1016</td><td>4.9</td></tr><tr><td>...</td><td>...</td><td>...</td></tr><tr><td>13</td><td>1028</td><td>5.8</td></tr><tr><td>14</td><td>1039</td><td>7.5</td></tr></tbody></table><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-5-monitor-memory-usage"></a>Step 5: Monitor memory usage<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-5-monitor-memory-usage" title="Direct link to heading">#</a></h2><p>As a final step, we can duplicate parts of our program to create another card that displays memory stats. The two cards behave identically, except that one displays CPU usage and the other, memory.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/system_monitor.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> time</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> psutil</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> data</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">page </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> site</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/monitor&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">cpu_card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;cpu_stats&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">small_series_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 1 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;CPU&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;={{usage}}%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">usage</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0.0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;tick usage&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">15</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_category</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;tick&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;usage&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_zero_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    plot_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$red&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">mem_card </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;mem_stats&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">small_series_stat_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 2 1 1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    title</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Memory&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;={{usage}}%&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token builtin" style="color:rgb(130, 170, 255)">dict</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">usage</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0.0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    plot_data</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;tick usage&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">15</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    plot_category</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;tick&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    plot_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;usage&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    plot_zero_value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    plot_color</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;$blue&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">tick </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">while</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    tick </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cpu_usage </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> psutil</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">cpu_percent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">interval</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cpu_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">usage </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> cpu_usage</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    cpu_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">tick</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> cpu_usage</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    mem_usage </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> psutil</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">virtual_memory</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">percent</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    mem_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">usage </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> mem_usage</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    mem_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">plot_data</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token operator" style="color:rgb(137, 221, 255)">-</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">tick</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> mem_usage</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    time</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">sleep</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-6-run-your-program-again"></a>Step 6: Run your program again<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-6-run-your-program-again" title="Direct link to heading">#</a></h2><p>Terminate your program (<code>^C</code>) and restart it:</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./venv/bin/python system_stats.py</span></div></div></div></div></div><p>Point your browser to <a href="http://localhost:55555/monitor" target="_blank" rel="noopener noreferrer">http://localhost:55555/monitor</a>. You should now see both CPU and memory stats live:</p><p><img alt="CPU" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJsAAADBCAYAAADYdMIdAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUARnJpIDAyIE9jdCAyMDIwIDAzOjQxOjQ4IFBNIFBEVGrIQmEAABdQSURBVHic7Z15XFXV2oCfvc8AIuknDpXQlUS/LLzdHFFBSxDwlmjWraRuaWnlkPo1aSp2m0xM06y0O2TzzSZBSxrUEnNAJadKi5waNHEA02Q8w/7+OLBl5jAtDd7n9+PHOXuv/e619nnOevfa09FycnIMBEEB+rmugNB0ENkEZYhsgjJENkEZIpugDJFNUIbIJihDZBOUIbIJyhDZBGVYa7OQYcgZrqaMpmm1Ws5r2SoTTMRrGpQUrORnXhPxqpWtZGC73Y7Vaq212ULjwDAMnE4nhYWFph/eOFHlPltxIMMwsNvt2Gw2EU1A0zRsNht2u72UI9VR7QDBMAwMw8BqrdXundCIsVqtph/eUKlsZoCiYNKjCWXRNM3jiZe9W7Vp1PAiiNB0qYkjXqdRQaiIOqfRkjt9IptQFWUdqcoVr84giGxCZdTEDTldJSij+tGoIHhJnUajRSHqqSpC46WOx9kEob4R2QRliGyCMkQ2QRkim6AMkU1QhsgmKENkE5ShTLasrCwenZlAVORArh7Qn7H33suuXbvM+QkJM+jRvRs9unejZ4/uDLnuWt57711z/l8Hx/LgA/eXirk8OZke3buRkZGhqhnK2LlzBz17dKdXzx7m38qVK8uVc7vdzJs3l6sH9Cdy4DW88MLz5pF8t9vNozMTGDN6NHOfmWMuk56+lUmTJiprSzFKLr89c+YMd44ayfHjx4mJjaVli5asWbOacWPv5dXXXueyyy4DwMfHhylTppKfn8+nn37CnMREAgODCA8PV1HN84rMI5lER8cwOzGxynKvvvoKBw8e5KOPVpJfUMDkSRPp0KEDQ4cOY+/evZw+/TsvL1nC7X+/jezsbHx9fVkwfz7PLXxeUUvOoqRne2fpUg4fPsy8ec/y+ONP8MCDD/LWW//FYrXy9n/fMsvZbDauHz6cEfHxPP/Ci+i6zqpVn6mo4nlHZmYmF118UbXl9u3dR3R0DC1atqRdu3Zcfc017Nu7DwCrxUJBQT6GYeBwOLBarSx8bgHx8bfSrl27hm5COZTItmXLZi655BLCIyLMaQGtW7NixYdM/r/7K1ymefPmWK02CvILVFTxvOPIkV/Z9tVXREcPIipyIP/61z8rPNEd1qcPn37yCadOneLo0aN88cUXhPXpA0BIp05cERrKuLFjGRIXR0bG9xzJzCRu6FDVzQEUpdGTJ0/Stm3bctMDAgJKvc/NzSUrK4v8/DySliVRWFjAVd26qajieUdMTCy9eofRr29fjmRmMnnSRC6++GKGDh1WqtzgwYP5OGUlUZEDMQyDqKgowsLCzPkTJ04CPNt2zOi7zkn6LEZJz9aqVSuOHTtWbnpubi65OTnme7fbTUz0IIbGxfHaa68S0b8/N954I+C5ucLpcpVavvh9Y7wZp0fPngwaNAi/5s0JCQlh9OgxfP755+XKPfH4Y3Tu3Jm1qetY8/kXaLrOS4sXlytXnD4PHjjA+PHjmD7tkVLbXgVKZAsL68OhQ4fYuGGDOS07O5vBsTE8PfvpUmVfeHERixYtJikpmYULn8dmswHQpk0b9uzZU2oDpadvNec1NlJTU8nKyjLf65aKP6rU1FRGjx7DBRdcQKtWrRg5chRr1qwuVSY9fauZPhc+v5CnnppFx5AQUlJSGrQNZVGSRkfEx7N8eTIPPfQgsYMH07JlS1avWo3T6WTkyFFmOX9/f/r161dhjBv/9jeeePxxRo68g/CICA7s38/GjRuJjIwql44bA5s3p/HZp58yIyGBEydO8PprrzHqzjsBSElZycUXt6d79+507NiRpe8sZeTIUbhcLj54/306depkxsnNzS01+nQ6nfj4+ODr44vD6VDaJiU9m7+/P6++9jpRgwbx5bp1LE9OJji4A/95eQmdO3f2KsawYdczc+ajaJrGO0uXkpGRwa233sYTTz7ZwLU/NzzwwIP4+PowODaGu+8eQ1zcUHN/bV1qKlu3bgFgzjNzycjIYHBsDHFDriMvL4+EmY+acRY+t4AR8fHm6HPUqFFMGD+OL9d/yeDYwUrbpFX0oxsl75hxu124XO5G2XsIdSc7OxuLRUfXLWiaZv5VhJyuEpQhsgnKENkEZYhsgjJENkEZIpugDJFNUIbIJihDZBOUIbIJyhDZBGWIbIIyvJat4I1XG7IeQhPAa9ny33yNgnf+25B1ERo5Xl886RM3jPwl/0az27HfcFND1kmoAvfPP1Lw9lsUfr4aW99w7HHDsPYKq37B8wDvZbvtDoz8fPJeehFsduxxw6pfSKg3XBnfU7D0LRwb1wNgj4rGsSUNR9pG9Asvwh43DPuQYWjNm9dtPfv3YQnpVH3BWuD1xZOtDDcAeYufx/HlOpo9NBV77LUNUinhLM5dOyn84F0cmzcBHslsUdFYOobgPn4M55Y0HFvScO3dC4AtchD2IcOw/vlKr+K79u/DtWsHzl07ce7agZGTg61fBM0enobm71/t8jW5eLLGsgHkzX8Gx9Yt+E2biS1ykFeNEmqGc0sahSs/rFCyCstv34YjbSPOLWkYhYVYgoOxD7nek4H0s7vmFckFYOkQjKVjR/RLO1Lw1htYulxBsynT0C+s+kbpBpcNRyG58+bg3LUTv388iS1iQNVbTvAa5+ZNFKZ85LVkZTFyzuBY+zmO9etw/fSTJ8a1QzB++620XMHBWC4PxdIxBMulHdGDLjlbhx3byHvpRfS2bWn28PQq02rDywYYv/9O3rxEXPv34ffYU1jD+nq1MYSKcW7dTOFHK2otWUW4fsjAsfZzCtd+bsplvaIrlpAQtIDWVS/73W7P/rmm0WzKdKxXXlVhOSWyAbhPHCdv3hzcRzPxe3wW1m49vNkGQglc335NwYpkHKlfAPUjWX3hOniA/MUv4M7OotmU6dj6RZQro0w2APfhQ+TOTYS8XPweewpLV+92TJs6rgP7KFyRTOHHnsdg2QdGYYuOPS8kK4n7yK/kLX4B194f8JsyHVt0bKn5SmUDz05n3rxEsFg9wl3WpY5NbLy4jxyh8MMkClckYzgc2AZcgz06Fkvn/z3XVasU42Q2eYtfwPnN1zQbPwn78BvNecplA3Dt2U3u3NlorVrh99gsLJd2rGMTy+B24/zmayzBl6K1bFm/sRVgnDpF4YokCj5Mxjh1Clt4f49kXS4/11XzCiMvl/xFL+D4aiu+I+/C5+8jgXMkG3hGMblzE9H8/bH1DcfaNxxbn75gqd1THoycHBwbv8S5YT2OtI3mdD0wCGtoVyyhXbFc0RVL8KW1iu8+fBj3Lz/h+vkn9IDWWHv0RGtVzzdjOxwUrPD0ZO7MI9j69sM2KAZr6J/rdz0qMAzyFi3EsWE9PjfejO/YCedONgDn9q9wbE7Dtftb3FknALB26+6RL6wvevvAKpd3Z53wyLXxS5w7tgOgt26DtXdvbL364DqwD9f+/bgO7Md9NNPTCD8/LKF/xhoa6pEvtCua3ccT0OHA9fNPuIv+XL8Uv/4Zw+VCs1jQAwMxfj+D+2Q2lo4hWHv0xNqjF9Yevbxqc7k2nDiO++ABXD8exLFmFa4D+7H17oNtUHSlo7o/Evkv/4vCNauwD76WvDvvPneylcT59S5cu7/BuftbXPs8R7j1wEBsfcKxhvUxR6/uQ7/g2Lgex4YvcX3/3dlyvcKw9u5T6U6zkXOmSLx9uA8UCXjCI7ilU2eMM2dwZx7xNLRlSyztA9HbB6Jf3B49sOh1iYOWrgP7cW5Lx7l9G66DBwBKiVdRPdyHfsF18IBHruI6HPnVnG/t2Qt7VHSjG6kXvPU6BSs/xPVu8vkhW0ncx4/h3LUD186dOHd/g5GXh2azoQcG4vrxRwBPr9I7DFuvMPTAoFqtxzj1mymg3qYtevv26O0D0fwvqFl9s7Jwbk/Hue0rnDt3AKC3auXp7XybFcm9DyM/31zGEhSE/qdg9KAgLIFB6EGX1LodfwQKPniX3Jvizz/ZyuLa/a1Hvn17sfYKw9o7DL31efqcNZcL57avcGxLx7n9K3A40DsEe07xBAejB/0JPSgIza9uJ8H/iJzU9PNfNqFxUBPZ5LJwQRkim6AMkU1QhsgmKENkE5QhsgnKENkEZYhsgjJENkEZIpugDJFNUIbIJihDZBOU4YVsje+3PIX6xjtHKpWt7GUi5X8wWmjqlHWiuh8Z9v5hgGKbUIaaOuGVbJqmkQPkuQ3p4QQMPC7kULOfTK/wHjtN0zAMo9SVl5qmkeN2c9rhMq/iBQND7GsSeJw664JF19F1vdzVuVXJV+0NncWBdE3D0HUsgNuUrRgxrnFzVqBiFzRd9/yv4jLwslQpm6ZpUNzDFYumaWhlZTMkvTZWPB1aadlKCqdpGhrepdNKZStOpRQF03Udo4RohuTPJknZXStN00wZqxPOqzQKHsONIgErF00EbFxUcktesWieN/WXRosHCpRIqdKrNW0qGgzUKY2WDWJKVyawiNc0qPTG47oe+qguaEnBarIyoXFQ28+8Vs+yEsGE2iBXfQjKENkEZYhsgjJENkEZtRogyOGOpk2Dj0YrE0zEaxrUx6GvamUrGdhut2O1WuXQRxPHMAycTieFhYWmH944UeU+W3EgwzCw2+3YbDYRTUDTNGw2G3a7vZQj1VHtAKH4xLvVWrvfMhAaL1artUZXAFUqmxmgKJj0aEJZzIsyvOzdqk2jhhdBhKZLTRzxOo0KQkXUOY2W3OkT2YSqKOtIVa54dQZBZBMqoyZuyOkqQRnVj0YFwUvqNBotClFPVREaL3U8ziYI9Y3IJihDZBOUIbIJyhDZBGWIbIIyRDZBGSKboAwlsiUkzKBH927859//Ljfvscf+QY/u3Vi8aJGKqpxXpKVt4m833kC/vn245567OXz4sDnP5XIxb95crh7Qn8iB1/DKkiWVxnnzjTeIjYmmf/8IHn/sMQoLCwFwu908OjOBMaNHM/eZOWb59PStTJo0seEaVglKe7bly5Nxu93m+zNnzrB61SqVVSjHuTotl52dzYzp05ky9RHWpq6jX99+PDpzpjn/5Zf/Q+aRTJKXr+Cdd99j7dovWLFiebk469d/SfLyZF559VVSUj7m9O+nWfLyywDs3buX06d/5+UlS/j666/Jzs4mNzeXBfPnk5Aws1yshkaZbFarlczMTNI2bTKnffxxCk6ns1S506dO8cjUqfSPCGfIddey9O23zXmTJ0/irrvu5MknHqdf3z7cccft7NmzhztHjSS8X1+mTp1ixvvtt9/MOFGRA1mwYL45b/LkSdxxx+3MmDGdsN69OHr0KL169mDhwufMdSUkzKB//wizl6hvsrOzuPW22+jduzc+Pj7cMmIE33//HeDpkVYsX86MhAQCAgJo164d856dz1VXdSsXJz8/nwkT7iMwMIgWLVow/PrhfFcUx2qxUFCQj2EYOBwOrFYrC59bQHz8rbRr165B2lUVymRr27YtV155JUlJy8xpyUlJREVFlSo3ffp0tm3fxpQpUxkSF8e8eXNZu/YLc/6e3btpFRDAPffey+5vv2XChPEMHTqM664bwprVq1mzZk1RnGls3LiBhx5+mPj4W3nrzTdLpfHvv/sOp8PBtGnTadu2LX/5y1XmF8EwDLZs2UJEeAR2u71BtkenTp0ZM+Zu8316+lZCu3YF4MiRX/H39+eTTz7mr4NjiY2J5rNPP6VDhw7l4kRHx5Tahunp6XQN9cQJ6dSJK0JDGTd2LEPi4sjI+J4jmZnEDR3aIG2qDqV3sVw/fDiznnqK48ePc/RoJj/88AMPPPggn332GQDHjh0jLW0T02fMMDfIjh07WPbBMgYOjASgdevW3HefZ3/jg/ff57IuXRh+ww1EnT7NsmUfcOiXXzh27BhbNm9m9OgxDBt2vSfOzh2sWLGccePHA9CiRQsS5zxj3lsRGRXJs/PmkZWVxYnjx8nOyiIyKlLJdsnMzGROYiLPzp8PwMmTJ/nll0NkZGTw7nvvk5WVxX0TxhMYFFTuy1mSjRs2sG5dKm+/vdScNnHiJAByc3MZM/ounlv4fMM2pgqU7rPFxMTi4+vLihXLSVqWRGBgED179jLnHz92DICnZ80iIrwfEeH92LF9O8eOHTXLNG/e3HxtsViw2zw9T/HdXy63y4zTIfhsTxDcoQPHjx839xkDAgJK3cQTGen5ENPS0kjbnIbd7kN4eES9tr8iTp86xaSJ93HffRPp0uVysy2G4WbGjARatGjBpZdeyu13jGTN6tWVxtmzZw+zZs3i2fkL8CuxjYopTp8HDxxg/PhxTJ/2CLk5OQ3WropQ2rM1a9aM2NhYkpYt4/Tp09x11+hSH3ibtm0AGBEfz4gR8YBnVObr61uj9bRp2xaAgwcPmtMOHjxImzZt0PWKv18XXXQRXbpcTlraJk6cOEHfvn3w8/Or0XprSn5+PpMnT2Lo0GH89dprzelBQZegaRpOp9NM4263C12v+A63n3/+mYcfepCnZz9NSEhIufnp6Vs5kpnJtOkzuPXWeF58cRFJSctISUnhpptvbpjGVYDy42zDrx/O0aNHKSgoKLfvcOGFF9GzVy8+/eQT0tO3sm3bNu4cNZI333yjRuu48MILCQsL452lS/ng/fd56aXFbNmyxUyplREZFcmmTZvYtXOn2dM1FC6Xi6lTpxDatSs333ILhYWF5h3m/v7+RET055ln5pCXl8f+fft44/XXiR08GICUlJVs374dgBMnTjDxvgncf/8DXHFFqBmnmLKjT6fTiY+PD74+vjicjgZtY1mU33kc2rUrnTp1pn379rQt6oFKMnt2Iomzn2bBggX4+voSGRXF+PETaryep2cnMnv20yxc+Bx2u52/334799x7b5XLREZGsXjRIiwWCwOuvrrG66wJqampbFi/HqDUiHtZUjLBwcEkzJzJU08+yeDYGPz8/Bg16k4GDPDUaV1qKh1DQujevTuvLFnCoUOHmDp1ihkjoHVrVq/2DJQWPreAEfHx5uhz1KhRTBg/DruPD4mzExu0jWXRcnJyyh1oKnnHjNvtwuVyExAQoLRi5wLDMLjm6gGEhoay+KV/nuvq/CHIzs7GYtHRdUu5nxYqizxToYhdO3eycuVKzpw5w9Bq0q1QO+TcaBEpKSmsWvUZN998CzExMee6Oo0SSaNCnahJGpWeTVCGyCYoQ2QTlCGyCcoQ2QRliGyCMkQ2QRkim6AMkU1QhtfnRsd++DtWXcNmAZuuYdXBZsEzTQdr0XSbDpZKrruqD0quq7gONl0rN82qazRgNc4LHC4DhxucLnC4DZxuzzSnGxxlXjfUfT03lb98rlK8li3XAU63G6eboj8Dp6vE66LpDreBy119PKFxUBPZvD436vL5n/qsY60pJ7fLKP0FKPG6sT8801rUo1v1ote657WtxOvi6Q31MxaWgt8a7yVGxRvwLI08VzYiZIAgKENkE5QhsgnKENkEZYhsgjJENkEZIpugDJFNUIbIJihDZBOUIbIJyhDZBGWIbIIyRDZBGSKboAyRTVCGyCYoQ2QTlCGyCcoQ2QRliGyCMkQ2QRkim6AMkU1QhsgmKENkE5QhsgnK8EI2eZaGUB3eOVKpbOWfRNPIHwkk1ILSTlT29KJivE+jzsLqywhNixo64ZVsmqahOXIwHPlIDyeAgeHIR3PkVNublaTC57NpmoZhGKUe7qZpGlrhGVz5p80HBULjf+Ce4MHj1FkXLLqOZin/AMCq5Kv2YYDFgXRNw9B1LIDblK0YMa5xc1agYhc0Xff8r+JJk2WpUjZN06C4hysWTdPQyspmGKJbI8XToZWWraRwmqahUf3gAKqQrTiVUhRM13WMEqIZkj+bJOV2rTTNlLE64bxKo+Ax3CgSsHLRRMDGRcXymKJ53tRfGi0eKFAipUqv1rSpaDBQpzRaNogpXZnAIl7ToDKZ6nzoo7qgJQWrycqExkFtP/Na/Q6CCCbUBrnqQ1CGyCYoQ2QTlCGyCcr4fzKPZPnOGgk7AAAAAElFTkSuQmCC"></p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="exercise"></a>Exercise<a aria-hidden="true" tabindex="-1" class="hash-link" href="#exercise" title="Direct link to heading">#</a></h2><p>Explore other kinds of cards in the <a href="/wave/docs/examples">Gallery</a> and display additional stats gleaned from <code>psutil</code> (network, disk, processes, etc.).</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="summary"></a>Summary<a aria-hidden="true" tabindex="-1" class="hash-link" href="#summary" title="Direct link to heading">#</a></h2><p>In this tutorial, we learned how to use stats cards to display live information. The knowledge you&#x27;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&#x27;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.</p><p>The programs you&#x27;ve been authoring till now are one kind of programs, called <a href="/wave/docs/scripts">Wave scripts</a>. 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 <a href="/wave/docs/apps">Wave Apps</a>, which are long-running programs (<em>servers</em> or <em>services</em>) that are capable of modifying pages in response to user actions. Let&#x27;s see how to do that in the next tutorial. </p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/tutorial-monitor.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/tutorial-beer"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Tutorial: Beer Wall</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/tutorial-counter"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Tutorial: Bean Counter »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#prerequisites" class="table-of-contents__link">Prerequisites</a></li><li><a href="#step-1-install-dependencies" class="table-of-contents__link">Step 1: Install dependencies</a></li><li><a href="#step-2-monitor-cpu-usage" class="table-of-contents__link">Step 2: Monitor CPU usage</a></li><li><a href="#step-3-run-your-program" class="table-of-contents__link">Step 3: Run your program</a></li><li><a href="#step-4-understand-your-program" class="table-of-contents__link">Step 4: Understand your program</a><ul><li><a href="#using-a-stats-card" class="table-of-contents__link">Using a stats card</a></li><li><a href="#declaring-a-data-buffer" class="table-of-contents__link">Declaring a data buffer</a></li><li><a href="#inserting-into-the-data-buffer" class="table-of-contents__link">Inserting into the data buffer</a></li></ul></li><li><a href="#step-5-monitor-memory-usage" class="table-of-contents__link">Step 5: Monitor memory usage</a></li><li><a href="#step-6-run-your-program-again" class="table-of-contents__link">Step 6: Run your program again</a></li><li><a href="#exercise" class="table-of-contents__link">Exercise</a></li><li><a href="#summary" class="table-of-contents__link">Summary</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/0a6c0f5b.192be162.js"></script>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/0a6c0f5b.da8efe17.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/docs/tutorial-todo/index.html b/docs/docs/tutorial-todo/index.html
index 4c4c0f2606..d3cd57f338 100644
--- a/docs/docs/tutorial-todo/index.html
+++ b/docs/docs/tutorial-todo/index.html
@@ -5,87 +5,71 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Tutorial: Todo List | H2O Wave</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Tutorial: Todo List | H2O Wave"><meta data-react-helmet="true" name="description" content="In this tutorial, we&#x27;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."><meta data-react-helmet="true" property="og:description" content="In this tutorial, we&#x27;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."><meta data-react-helmet="true" property="og:url" content="https://h2oai.github.io/wave//wave/docs/tutorial-todo"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://h2oai.github.io/wave//wave/docs/tutorial-todo"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/235.30963dc0.js" as="script">
-<link rel="preload" href="/wave/236.908f536c.js" as="script">
-<link rel="preload" href="/wave/935f2afb.aeb7338a.js" as="script">
-<link rel="preload" href="/wave/17896441.78666ca0.js" as="script">
-<link rel="preload" href="/wave/996e93c8.ded0a529.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/237.a770d6f5.js" as="script">
+<link rel="preload" href="/wave/238.cf1fd2bd.js" as="script">
+<link rel="preload" href="/wave/935f2afb.d4745991.js" as="script">
+<link rel="preload" href="/wave/17896441.7487f7bf.js" as="script">
+<link rel="preload" href="/wave/996e93c8.836b1f20.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Tutorial: Todo List</h1></header><div class="markdown"><p>In this tutorial, we&#x27;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.</p><p>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 <a href="/wave/docs/tutorial-counter">previous tutorial</a>. From this point on, it&#x27;s mostly a matter of <a href="https://htdp.org/2020-8-1/Book/part_three.html" target="_blank" rel="noopener noreferrer">abstraction</a>, which is a fancy term for how you solve the problem at hand using short, simple, clear, elegant, modular functions that <a href="https://en.wikipedia.org/wiki/Unix_philosophy" target="_blank" rel="noopener noreferrer">do one thing and do it well</a>. </p><p>Above all, prefer brevity and clarity. <a href="https://blog.codinghorror.com/the-best-code-is-no-code-at-all/" target="_blank" rel="noopener noreferrer">The best code is no code at all</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-1-listen"></a>Step 1: Listen<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-1-listen" title="Direct link to heading">#</a></h2><p>We&#x27;ll start with a basic skeleton, and then work our way up from there. </p><p>The first step is to <code>listen()</code>. Also, we want the landing page to show a list of to-dos, so we&#x27;ll throw in an empty <code>show_todos()</code> function for now, and call it from <code>serve()</code>.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/todo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2gpo"><div class="docSidebarContainer_3_JD" role="complementary"><div class="sidebar_2urC"><div class="menu menu--responsive menu_5FrY"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_Dm3K" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Prologue</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/change-log">Change Log</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0-8">Migrating from 0.8</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/migrating-0">Migrating from pre-alpha</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/contributing">Contributing</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tour">A Tour of Wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-hello">Tutorial: Hello World</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-beer">Tutorial: Beer Wall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-monitor">Tutorial: System Monitor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/wave/docs/tutorial-counter">Tutorial: Bean Counter</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/wave/docs/tutorial-todo">Tutorial: Todo List</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guide</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/guide">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/architecture">Architecture</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/scripts">Wave Scripts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/apps">Wave Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/pages">Pages</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/layout">Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cards">Cards</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/buffers">Data Buffers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/components">Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/arguments">Event Arguments</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/realtime">Realtime Sync</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/expressions">Data-binding</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/files">Files</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/plotting">Plots</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/graphics">Graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/security">Security</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/cli">Command Line Interface</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/development">Development</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/browser-testing">Browser Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/backup">Backup and Recovery</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Enterprise</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/basic-concepts">Basic Concepts</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/enterprise/developer-guide">Developer Guide</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hello-world">Hello World!</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/todo">To-do List App</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/wizard">Wizard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/issue-tracker">Issue Tracker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dashboard">Dashboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small">Stat / Small</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large">Stat / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-gauge">Stat / Gauge / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-gauge">Stat / Gauge / Tall</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-bar">Stat / Bar / Wide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-large-bar">Stat / Bar / Large</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-area">Stat / Series / Small / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-small-series-interval">Stat / Series / Small / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-area">Stat / Series / Wide / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-wide-series-interval">Stat / Series / Wide / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-area">Stat / Series / Tall / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stat-tall-series-interval">Stat / Series / Tall / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout">Layout / Position</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/layout-size">Layout / Size</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form">Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text">Form / Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/text-sizes">Form / Text / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/label">Form / Label</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/link">Form / Link</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress">Form / Progress</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/progress-update">Form / Progress / Updating</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/message-bar">Form / Message Bar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox">Form / Textbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/textbox-trigger">Form / Textbox / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/button">Form / Button</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/buttons">Form / Buttons</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checkbox">Form / Checkbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/checklist">Form / Checklist</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker">Form / Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/picker-selection">Form / Picker / Selection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/dropdown">Form / Dropdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/choice-group">Form / Choice Group</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/combobox">Form / Combobox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toggle">Form / Toggle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/spinbox">Form / Spinbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/slider">Form / Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/range-slider">Form / Range Slider</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker">Form / Date Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/date-picker-trigger">Form / Date Picker / Trigger</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/color-picker">Form / Color Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/swatch-picker">Form / Swatch Picker</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tabs">Form / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/separator">Form / Separator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/file-upload">Form / File Upload</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame">Form / Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-frame-path">Form / Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-menu">Form / Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-template">Form / Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/form-markup">Form / Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/stepper">Form / Stepper</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-markdown">Table / Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table">Table</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-sort">Table / Sort</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-search">Table / Search</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter">Table / Filter</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-filter-backend">Table / Filter / Backend</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-download">Table / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-groupby">Table / Group by</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/table-select">Table / Preselection</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/image">Image</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame">Frame</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/frame-path">Frame / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template">Template</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/template-data">Template / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown">Markdown</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markdown-data">Markdown / Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/markup">Markup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/nav">Nav</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar">Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab">Tab</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-link">Tab / Links</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-delete">Tabs / Navigation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/breadcrumbs">Breadcrumbs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/header">Header</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/hash-routing">Routing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/toolbar-routing">Routing / Toolbar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/tab-routing">Routing / Tabs</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/card-menu">Context Menu</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point">Plot / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-shapes">Plot / Point / Shapes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-sizes">Plot / Point / Sizes</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-map">Plot / Point / Map</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-groups">Plot / Point / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-annotation">Plot / Point / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-point-custom">Plot / Point / Custom</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval">Plot / Interval</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-transpose">Plot / Interval / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups">Plot / Interval / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-groups-transpose">Plot / Interval / Groups / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-labels">Plot / Interval / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range">Plot / Interval / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-range-transpose">Plot / Interval / Range / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked">Plot / Interval / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-transpose">Plot / Interval / Stacked / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped">Plot / Interval / Stacked / Grouped</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-stacked-grouped-transpose">Plot / Interval / Stacked / Grouped / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar">Plot / Interval / Polar</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-polar-stacked">Plot / Interval / Polar / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-theta">Plot / Interval / Theta</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-helix">Plot / Interval / Helix</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation">Plot / Interval / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-interval-annotation-transpose">Plot / Interval / Annotation / Transpose</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line">Plot / Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-groups">Plot / Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-smooth">Plot / Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step">Plot / Line / Step</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-after">Plot / Line / Step / After</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-step-before">Plot / Line / Step / Before</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels">Plot / Line / Labels</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-stroked">Plot / Line / Labels/ Stroked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-labels-no-overlap">Plot / Line / Labels / Occlusion</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-line-annotation">Plot / Line / Annotation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path">Plot / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-point">Plot / Path / Point</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-path-smooth">Plot / Path / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area">Plot / Area</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-groups">Plot / Area / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-negative">Plot / Area / Negative</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-range">Plot / Area / Range</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-smooth">Plot / Area / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-stacked">Plot / Area / Stacked</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line">Plot / Area + Line</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-smooth">Plot / Area + Line / Smooth</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-area-line-groups">Plot / Area + Line / Groups</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-polygon">Plot / Polygon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-histogram">Plot / Histogram</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-axis-title">Plot / Axis Titles</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-form">Plot / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite">Plot / Vega-lite</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-update">Plot / Vega-lite / Update</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-vegalite-form">Plot / Vega-lite / Form</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-altair">Plot / Altair</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-bokeh">Plot / Bokeh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-matplotlib">Plot / Matplotlib</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-plotly">Plot / Plotly</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/plot-d3">Plot / D3.js</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/pixel-art">Pixel Art</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload">Uploads</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-async">Uploads / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-ui">Uploads / UI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/upload-download">Uploads / Download</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-title">Meta / Title</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-icon">Meta / Icon</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-notification">Meta / Notification</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-refresh">Meta / Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/meta-redirect">Meta / Redirect</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-global">Mode / Broadcast / Global</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-broadcast">Mode / Broadcast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-multicast">Mode / Multicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/counter-unicast">Mode / Unicast</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background">Background Tasks</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/background-executor">Background Tasks / Executor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/site-async">Site / Async</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-primitives">Graphics / Primitives</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-spline">Graphics / Spline</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-clock">Graphics / Clock</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-path">Graphics / Path</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-turtle">Graphics / Turtle</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/graphics-hilbert">Graphics / Hilbert</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/examples/glider-gun">Graphics / Glider Gun</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/index">Package h2o_wave</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/core">Module h2o_wave.core</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/ui">Module h2o_wave.ui</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/server">Module h2o_wave.server</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/graphics">Module h2o_wave.graphics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/types">Module h2o_wave.types</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/wave/docs/api/test">Module h2o_wave.test</a></li></ul></li></ul></div></div></div><main class="docMainContainer_3EyW"><div class="container padding-vert--lg docItemWrapper_1EkI"><div class="row"><div class="col docItemCol_2ASc"><div class="docItemContainer_3QWW"><article><header><h1 class="docTitle_1Lrw">Tutorial: Todo List</h1></header><div class="markdown"><p>In this tutorial, we&#x27;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.</p><p>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 <a href="/wave/docs/tutorial-counter">previous tutorial</a>. From this point on, it&#x27;s mostly a matter of <a href="https://htdp.org/2020-8-1/Book/part_three.html" target="_blank" rel="noopener noreferrer">abstraction</a>, which is a fancy term for how you solve the problem at hand using short, simple, clear, elegant, modular functions that <a href="https://en.wikipedia.org/wiki/Unix_philosophy" target="_blank" rel="noopener noreferrer">do one thing and do it well</a>. </p><p>Above all, prefer brevity and clarity. <a href="https://blog.codinghorror.com/the-best-code-is-no-code-at-all/" target="_blank" rel="noopener noreferrer">The best code is no code at all</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-1-listen"></a>Step 1: Listen<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-1-listen" title="Direct link to heading">#</a></h2><p>We&#x27;ll start with a basic skeleton, and then work our way up from there. </p><p>The first step is to define an <code>@app</code> function. Also, we want the landing page to show a list of to-dos, so we&#x27;ll throw in an empty <code>show_todos()</code> function for now, and call it from <code>serve()</code>.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/todo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">pass</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-2-whats-in-a-to-do"></a>Step 2: What&#x27;s in a to-do?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-2-whats-in-a-to-do" title="Direct link to heading">#</a></h2><p>A to-do item has some basic attributes: an ID, some text content, and whether it&#x27;s completed or not. Let&#x27;s define a <code>class</code> for that, with a global one-up <code>id</code>.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/todo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">pass</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-2-whats-in-a-to-do"></a>Step 2: What&#x27;s in a to-do?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-2-whats-in-a-to-do" title="Direct link to heading">#</a></h2><p>A to-do item has some basic attributes: an ID, some text content, and whether it&#x27;s completed or not. Let&#x27;s define a <code>class</code> for that, with a global one-up <code>id</code>.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/todo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">_id </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># A simple class that represents a to-do item.</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">class</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">__init__</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">global</span><span class="token plain"> _id</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        _id </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;todo_</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">_id</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> text</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">done </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">False</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">pass</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-3-make-a-to-do-list"></a>Step 3: Make a to-do list<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-3-make-a-to-do-list" title="Direct link to heading">#</a></h2><p>Since we want each user to have a separate to-do list, it&#x27;s appropriate to keep the to-do list in <code>q.user</code>.</p><p>Here, we attempt to fetch the list from <code>q.user</code>, and create one if it doesn&#x27;t exist. We also throw in some sample to-do items for good measure.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/todo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> typing </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> List</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">pass</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-3-make-a-to-do-list"></a>Step 3: Make a to-do list<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-3-make-a-to-do-list" title="Direct link to heading">#</a></h2><p>Since we want each user to have a separate to-do list, it&#x27;s appropriate to keep the to-do list in <code>q.user</code>.</p><p>Here, we attempt to fetch the list from <code>q.user</code>, and create one if it doesn&#x27;t exist. We also throw in some sample to-do items for good measure.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/todo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> typing </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> List</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">_id </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># A simple class that represents a to-do item.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">class</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">__init__</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">global</span><span class="token plain"> _id</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        _id </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;todo_</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">_id</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> text</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">done </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">False</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Get items for this user.</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> List</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">todos</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create a sample list if we don&#x27;t have any.</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> todos </span><span class="token keyword" style="font-style:italic">is</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">None</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">todos </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> todos </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do this&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do that&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do something else&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-4-show-the-to-do-list"></a>Step 4: Show the to-do list<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-4-show-the-to-do-list" title="Direct link to heading">#</a></h2><p>Next, we turn each incomplete to-do item into a checkbox (using <code>ui.checkbox()</code>), and display it in a form card (using <code>ui.form_card()</code>).
-Also, we want each checkbox to raise an event immediately when checked, so we set its <code>trigger</code> attribute to <code>True</code>.</p><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p>Several <a href="/wave/docs/components">components</a> have a <code>trigger</code> attribute. Normally, an event is triggered only when a command-like component (a button, menu, or tab) is clicked. If you want a component to immediately trigger an event when changed, set <code>trigger</code> to <code>True</code>.</p></div></div><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/todo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> typing </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> List</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create a sample list if we don&#x27;t have any.</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> todos </span><span class="token keyword" style="font-style:italic">is</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">None</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">todos </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> todos </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do this&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do that&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do something else&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-4-show-the-to-do-list"></a>Step 4: Show the to-do list<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-4-show-the-to-do-list" title="Direct link to heading">#</a></h2><p>Next, we turn each incomplete to-do item into a checkbox (using <code>ui.checkbox()</code>), and display it in a form card (using <code>ui.form_card()</code>).
+Also, we want each checkbox to raise an event immediately when checked, so we set its <code>trigger</code> attribute to <code>True</code>.</p><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p>Several <a href="/wave/docs/components">components</a> have a <code>trigger</code> attribute. Normally, an event is triggered only when a command-like component (a button, menu, or tab) is clicked. If you want a component to immediately trigger an event when changed, set <code>trigger</code> to <code>True</code>.</p></div></div><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/todo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> typing </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> List</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">_id </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># A simple class that represents a to-do item.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">class</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">__init__</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">global</span><span class="token plain"> _id</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        _id </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;todo_</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">_id</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> text</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">done </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">False</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Get items for this user.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> List</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">todos</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create a sample list if we don&#x27;t have any.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> todos </span><span class="token keyword" style="font-style:italic">is</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">None</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">todos </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> todos </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do this&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do that&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do something else&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create checkboxes.</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    not_done </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> trigger</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> todo </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> todos </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display list</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 3 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;To Do&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain">not_done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-5-show-the-done-list"></a>Step 5: Show the &#x27;done&#x27; list<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-5-show-the-done-list" title="Direct link to heading">#</a></h2><p>We also turn each completed to-do item into another list of checkboxes, checked by default (using its <code>value</code> attribute). We append this to the form card, and put a separator in between (using <code>ui.separator()</code>) to distinguish the completed items from the incomplete ones.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/todo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> typing </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> List</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display list</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 3 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;To Do&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain">not_done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-5-show-the-done-list"></a>Step 5: Show the &#x27;done&#x27; list<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-5-show-the-done-list" title="Direct link to heading">#</a></h2><p>We also turn each completed to-do item into another list of checkboxes, checked by default (using its <code>value</code> attribute). We append this to the form card, and put a separator in between (using <code>ui.separator()</code>) to distinguish the completed items from the incomplete ones.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/todo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> typing </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> List</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">_id </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># A simple class that represents a to-do item.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">class</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">__init__</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">global</span><span class="token plain"> _id</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        _id </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;todo_</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">_id</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> text</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">done </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">False</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># A simple class that represents a to-do item.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">class</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">__init__</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">global</span><span class="token plain"> _id</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        _id </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;todo_</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">_id</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">done </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">False</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> text</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Get items for this user.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> List</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">todos</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create a sample list if we don&#x27;t have any.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> todos </span><span class="token keyword" style="font-style:italic">is</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">None</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">todos </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> todos </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do this&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do that&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do something else&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create done/not-done checkboxes.</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    done </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> trigger</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> todo </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> todos </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    not_done </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> trigger</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> todo </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> todos </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display list</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 3 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;To Do&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain">not_done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">separator</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Done&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">len</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain">done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>At this point, try running your app.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">./venv/bin/python todo.py</span></div></div></div></div></div><p>Point your browser to <a href="http://localhost:55555/todo" target="_blank" rel="noopener noreferrer">http://localhost:55555/todo</a>.</p><p><img alt="todo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAawAAADFCAYAAAAIRMaKAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUAU2F0IDAzIE9jdCAyMDIwIDAzOjQ5OjMzIFBNIFBEVP0rWOEAABgJSURBVHic7d15XJVl3sfxzzmcwBEFT6PyYIk1jkraotDiAopLiuujuGa5hz1TipZLKZY44wo2FWamaCMuaaVhpk2Ry2ja0zRhWIGAmCQCqZlKg5PI8vzhdJ5OYiPnEHbh9/16+ce5r+v6Xdd9+3rxfd3LuY+luLi43GazYbFYEBER+bWylJeXl1/rRYiIiPwn1mu9ABERkauhwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQINlcH5ufn07dP7//YLywsjGf//Jyr0wDw2msbiV20yGmbr68vjRsH0CO8BwMGRPCb3/zGrTlEROTXzeXAqufry/Qnn3R8Li8rJy4ulqCgILrdf79j+8033ezeCn9k7Lhx1K9fn/JyOHPmWz7/7DP+/OyzbNmyhRdeiMff37/K5hIRkV8XlwOrtrc3Q4cOc3wuLS0lLi6W3/++mdP2qhTeI5ymv/+907aUlBSmPPE4M2c8xapX/oLVqqucIiI1UbX9dS88d47YRYvo1bMn7du1ZfCggaxfv46ysjK36gYHBzNlylQ+++wz9u37wKktO/sw06ZOpWuXzoSGhjB27Bg++GCvW/OJiMi1US2BVVRUxOjRo9i+fRvh4eE88cQUWrZsyfPPPUfM7Gfcrt+zVy/q1KnDrl27HNvS09MZM3o0hw9nMWLESB579DFsHh48PnkyW7ZscXtOERGpXi5fEqyMFSuWk5eXx5o1a2kRGAjAoMGDCQy8jcWL4+jduw/3tW3rcn2bzUazZs3JPZbr2DZ/3lxuvPFG1q1/lTp16gAwdNgwpk+bxrOL4+jSpQs+Pj7u7ZiIiFSbajnDej85mc6duzjC6gdDhw3Dbrfz7rvvuj1H3bp1KSw8B8Dx48c5dOgQI0aMdIQVgMViYfwjj3D+/Hn27tWlQRERk/zigVVcXMyJEycIvC3wsjar1Urz5s3Jzc2tYGTlnCs8R7169QDIzT0GUOGczZo1w2azOfqIiIgZqu2hC4vFcqUGysvL3apdXFzM4awsAgICAPihnIWK57RYLODelCIiUs1+8cDy9PSkQYMGZGZkXNZWVlbG4awsGgc0dmuOt9/eyvnz5+na7dL3vxo3vlQvI/PyOY8cOcLFixcdfURExAzVcobVvXsPdu3aRXb2Yaftmzdt4ttvvyW8R7jLtT/88EOef/55goODadeuHXApsFoEBrJ+3TrOFxU59V+ZkECtWrXo2KmTy3OKiEj1q5anBCPHj2fv3j1ERkYyZPAQ/P39+SLtC97asoXw8HDa/jto/pPk95NpkJpKWVkpp0+f5kBKCgcOHCAw8DbmzpvvdNkxemY048dHMnLkCPr3H0CtWrXYtXsXf//oI6JnzdITgiIihqmWwKpbty6rE9ewbNlLbN36FmfPnqVRo0ZMnBjFQyNGXHWdlQkJwKV7UPYbbySgcQBPPTWD/+7fH09PT6e+rW6/nb+sTmT5y8tY9coqLhYX07x5c57983OEhYVV5e6JiEg1sJS7+8SDiIhINdCL90RExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQINlcHbt26lfgXnufMmTNuLcButxM1aTL9+vVzq46IiNRslvLy8nJXBnbr2oX4+CW0bNXKrQWkp6URFTWRHTt3uVVHRERqNpcvCZ45c8btsAJo2aqV22dpIiJS8+keloiIGMGowBo7dgzBQW0IDmrDPXcH06d3LxYvjuPs2bNVPtdrr21kfOTDV2w/cOAAvXqGc/LkySqfW0RELmdUYAGMGjWat7dtZ/ObScyYMZOszExGjRzhVmjl5OQQHNSG0tLSqx5z00030SM8nHr16rk8r4iIXD3jAsvHx4dGjRoREBBAh5AQlr28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LBYriWvWsvSlZWQfziY6eqZTjaSkJBY/+2c2bd7EkexsHnpwOAMHDWbnrt2EhXUmZvYzjr47d+5k4cKFTJw4kU2b36R3795MiooiMzOTjp068eqGjQB8sG8/MTFzHOOysrLIyzvOioSVLJi/gOTk99i8edMVj8sbr79Or9692LFjJ2PHjWNOTAwnTpwA4NixY0RFTaT7/d3ZtHkzDz40gri42CvWKi0tZcKExwBYs3YdS5a8SNoXXzBnTkylj2lla4mIgBtfHP41qe3tjdVq5bvCQgoLC0lKSmLN2rUEBt4GwFMzZjJwYATvvvcuEREDLxtfUFBA67ta07hxYwBeXPqS49Lahx/u55tvvmHN2nWObQsWLqRXz3C+ysmhyS23ADB02FACAgIA6NKlK4cOpdO+fft/tw0jMXE1//znP6lTpw6r//IK06ZNo3PnLpfahw4jMyOTd7Zv5/EnnsDLywsALy8vPDw8HOu8wdOTGTMvnXE1bdqUPn378umBTxkyZGiFx6Vd+/aOOQYNGkTi6r/w+eef4+fnx+ZNm2jXrh2jx4wB4KabbubIkWzWrllTYa3//fBDzhcVMXfuPG644QYAFsXG0qd3b7777jvq1q171ce0srVERKCGBFZRURFlZWX4+Pry5ZdHsNlsNG/ewtFusVi48847yczIqHD88AeGM336NA4cSOG++9rStVs3br31VuDSWU2LwECne0MNGzbE39+fzKxMR2D5NfRztNtsNmrXru34/EMAXbhwAW9vb9LT05kTE8Ozixc7+hQXF9OxY8ef3c9bmjRx+lz/t/XJzc29Yv8fwuIHvr6+/Ov8eQAOH87innvudWpv1fLK36vLyMwgNzeXbl27OG0vKyvj5MmTl4XMzx3TytYSEYEaElipqanUrVsXf39/vvnmVKXHh4SGsm37O+zdu5dPPvkHDz04nMcff4JBgwdDOViwVPmaX3ghnt81beq0rVatWj87xmKpunWUlpVhsTrX87B5XKH3JW3aBPHHP/3psu0NGjS4bNvPHtNK1hIRgRpwD6ukpISVCSsI79kTm81G0981paSkhLS0NKc+B1NTaREYWGGNo0ePUqtWLfr378/cufOYMGEir7/xOgDNWzQnI+OQ0/2vvLw8CgoKaPGjs7irZbFYaBEYyKlTp2jUqJHj36lTp7BaL/13/BAjLr4166rceuutHEpPd9qWmZF5xf7NmjXn668L8PPzc6y5jrc3p06edFzW+7GfO6aVrSUiAgYGVmFhIfn5+XyVk8OePXsYPz6Sc+fO8eijl27i+/j6MiAigtmzn+HgwYMcO3aMeXPnUlxcTHiP8AprPj0rmtjYReTl5ZGdfZjdu3dx678v9bVv34H69evz9DNPc/ToUTIyDjHjqScJC+vsuBxYWaNGjWbJknh27NhBfn4+77yznf955BGOZGcDl14IbLVa2bZtm+Mhiao2cOAg9u7dy8YNG8jPz2fv3j289daWK/bv0KED3t51eOaZpzly5AjZ2YeJjp7J0qUvVtj/545pZWuJiICBgZWYuJq+fXozZMhgnl28mDtuv4PViWvw8fFx9Jk2bTphncKYOnUKwx8YxunT37AiIYHa3t4V1ly4KJZTp04xbOgQxo0dS0M/P6KjZwGX7kctfWkZNg8PRo4cwaN/+AO33XYbc+fNc3kfevTowZSpU3l52UsMGhjB6tWriZkzh+C77wYuhW509CyWLn2R5597zuV5fk6zZs2Ii1vMm0lvEjGgP6+sWsVjEyZesb/NZmPZsmWUlZYxdsxo/ueRR/Dx8WFRbFyF/f/TMa1MLRERcONt7cFBbUg58GmVLKIqa8nVKy0tdXoKcf++fcyZE0Py+zuu4apERCpm3BmWVI2MjEP069uHXbt2curUKb744nOWvrSU0NDQa700EZEK1YinBKXyAgNvIzJyPMtfXk5u7jG869Sha9euTJ78+LVemohIhVwOLLvdTnpaWpX8gKPdbnerhrim/4AB9B8w4FovQ0TkqrgcWFGTJhMVNdHtH1+02+1ETZrsVg0REan5XH7oQkREpDrpoQsRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECP8HZI6lCVI7f4wAAAAASUVORK5CYII="></p><p>You should be able to see your todo list in all its glory. Unfortunately, checking any of the items seems to have no effect. Let&#x27;s fix that next.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-6-handle-checkboxes"></a>Step 6: Handle checkboxes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-6-handle-checkboxes" title="Direct link to heading">#</a></h2><p>Each time a checkbox is checked or unchecked, our <code>serve()</code> function is called, which in turn calls <code>show_todos()</code>. </p><ul><li>If a checkbox is checked, <code>q.args</code> will contain a <code>True</code> for that checkbox.</li><li>If a checkbox is unchecked, <code>q.args</code> will contain a <code>False</code> for that checkbox.</li></ul><p>So, we iterate through all the to-do items set their <code>done</code> attribute based on the value of their corresponding checkbox.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/todo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> typing </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> List</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display list</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 3 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;To Do&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain">not_done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">separator</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Done&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">len</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain">done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>At this point, try running your app.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token builtin class-name" style="color:rgb(255, 203, 107)">cd</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(130, 170, 255)">$HOME</span><span class="token plain">/wave-apps</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token builtin class-name" style="color:rgb(255, 203, 107)">source</span><span class="token plain"> venv/bin/activate</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">wave run todo</span></div></div></div></div></div><p>Point your browser to <a href="http://localhost:55555/todo" target="_blank" rel="noopener noreferrer">http://localhost:55555/todo</a>.</p><p><img alt="todo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAawAAADFCAYAAAAIRMaKAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUAU2F0IDAzIE9jdCAyMDIwIDAzOjQ5OjMzIFBNIFBEVP0rWOEAABgJSURBVHic7d15XJVl3sfxzzmcwBEFT6PyYIk1jkraotDiAopLiuujuGa5hz1TipZLKZY44wo2FWamaCMuaaVhpk2Ry2ja0zRhWIGAmCQCqZlKg5PI8vzhdJ5OYiPnEHbh9/16+ce5r+v6Xdd9+3rxfd3LuY+luLi43GazYbFYEBER+bWylJeXl1/rRYiIiPwn1mu9ABERkauhwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQINlcH5ufn07dP7//YLywsjGf//Jyr0wDw2msbiV20yGmbr68vjRsH0CO8BwMGRPCb3/zGrTlEROTXzeXAqufry/Qnn3R8Li8rJy4ulqCgILrdf79j+8033ezeCn9k7Lhx1K9fn/JyOHPmWz7/7DP+/OyzbNmyhRdeiMff37/K5hIRkV8XlwOrtrc3Q4cOc3wuLS0lLi6W3/++mdP2qhTeI5ymv/+907aUlBSmPPE4M2c8xapX/oLVqqucIiI1UbX9dS88d47YRYvo1bMn7du1ZfCggaxfv46ysjK36gYHBzNlylQ+++wz9u37wKktO/sw06ZOpWuXzoSGhjB27Bg++GCvW/OJiMi1US2BVVRUxOjRo9i+fRvh4eE88cQUWrZsyfPPPUfM7Gfcrt+zVy/q1KnDrl27HNvS09MZM3o0hw9nMWLESB579DFsHh48PnkyW7ZscXtOERGpXi5fEqyMFSuWk5eXx5o1a2kRGAjAoMGDCQy8jcWL4+jduw/3tW3rcn2bzUazZs3JPZbr2DZ/3lxuvPFG1q1/lTp16gAwdNgwpk+bxrOL4+jSpQs+Pj7u7ZiIiFSbajnDej85mc6duzjC6gdDhw3Dbrfz7rvvuj1H3bp1KSw8B8Dx48c5dOgQI0aMdIQVgMViYfwjj3D+/Hn27tWlQRERk/zigVVcXMyJEycIvC3wsjar1Urz5s3Jzc2tYGTlnCs8R7169QDIzT0GUOGczZo1w2azOfqIiIgZqu2hC4vFcqUGysvL3apdXFzM4awsAgICAPihnIWK57RYLODelCIiUs1+8cDy9PSkQYMGZGZkXNZWVlbG4awsGgc0dmuOt9/eyvnz5+na7dL3vxo3vlQvI/PyOY8cOcLFixcdfURExAzVcobVvXsPdu3aRXb2Yaftmzdt4ttvvyW8R7jLtT/88EOef/55goODadeuHXApsFoEBrJ+3TrOFxU59V+ZkECtWrXo2KmTy3OKiEj1q5anBCPHj2fv3j1ERkYyZPAQ/P39+SLtC97asoXw8HDa/jto/pPk95NpkJpKWVkpp0+f5kBKCgcOHCAw8DbmzpvvdNkxemY048dHMnLkCPr3H0CtWrXYtXsXf//oI6JnzdITgiIihqmWwKpbty6rE9ewbNlLbN36FmfPnqVRo0ZMnBjFQyNGXHWdlQkJwKV7UPYbbySgcQBPPTWD/+7fH09PT6e+rW6/nb+sTmT5y8tY9coqLhYX07x5c57983OEhYVV5e6JiEg1sJS7+8SDiIhINdCL90RExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQINlcHbt26lfgXnufMmTNuLcButxM1aTL9+vVzq46IiNRslvLy8nJXBnbr2oX4+CW0bNXKrQWkp6URFTWRHTt3uVVHRERqNpcvCZ45c8btsAJo2aqV22dpIiJS8+keloiIGMGowBo7dgzBQW0IDmrDPXcH06d3LxYvjuPs2bNVPtdrr21kfOTDV2w/cOAAvXqGc/LkySqfW0RELmdUYAGMGjWat7dtZ/ObScyYMZOszExGjRzhVmjl5OQQHNSG0tLSqx5z00030SM8nHr16rk8r4iIXD3jAsvHx4dGjRoREBBAh5AQlr28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LBYriWvWsvSlZWQfziY6eqZTjaSkJBY/+2c2bd7EkexsHnpwOAMHDWbnrt2EhXUmZvYzjr47d+5k4cKFTJw4kU2b36R3795MiooiMzOTjp068eqGjQB8sG8/MTFzHOOysrLIyzvOioSVLJi/gOTk99i8edMVj8sbr79Or9692LFjJ2PHjWNOTAwnTpwA4NixY0RFTaT7/d3ZtHkzDz40gri42CvWKi0tZcKExwBYs3YdS5a8SNoXXzBnTkylj2lla4mIgBtfHP41qe3tjdVq5bvCQgoLC0lKSmLN2rUEBt4GwFMzZjJwYATvvvcuEREDLxtfUFBA67ta07hxYwBeXPqS49Lahx/u55tvvmHN2nWObQsWLqRXz3C+ysmhyS23ADB02FACAgIA6NKlK4cOpdO+fft/tw0jMXE1//znP6lTpw6r//IK06ZNo3PnLpfahw4jMyOTd7Zv5/EnnsDLywsALy8vPDw8HOu8wdOTGTMvnXE1bdqUPn378umBTxkyZGiFx6Vd+/aOOQYNGkTi6r/w+eef4+fnx+ZNm2jXrh2jx4wB4KabbubIkWzWrllTYa3//fBDzhcVMXfuPG644QYAFsXG0qd3b7777jvq1q171ce0srVERKCGBFZRURFlZWX4+Pry5ZdHsNlsNG/ewtFusVi48847yczIqHD88AeGM336NA4cSOG++9rStVs3br31VuDSWU2LwECne0MNGzbE39+fzKxMR2D5NfRztNtsNmrXru34/EMAXbhwAW9vb9LT05kTE8Ozixc7+hQXF9OxY8ef3c9bmjRx+lz/t/XJzc29Yv8fwuIHvr6+/Ov8eQAOH87innvudWpv1fLK36vLyMwgNzeXbl27OG0vKyvj5MmTl4XMzx3TytYSEYEaElipqanUrVsXf39/vvnmVKXHh4SGsm37O+zdu5dPPvkHDz04nMcff4JBgwdDOViwVPmaX3ghnt81beq0rVatWj87xmKpunWUlpVhsTrX87B5XKH3JW3aBPHHP/3psu0NGjS4bNvPHtNK1hIRgRpwD6ukpISVCSsI79kTm81G0981paSkhLS0NKc+B1NTaREYWGGNo0ePUqtWLfr378/cufOYMGEir7/xOgDNWzQnI+OQ0/2vvLw8CgoKaPGjs7irZbFYaBEYyKlTp2jUqJHj36lTp7BaL/13/BAjLr4166rceuutHEpPd9qWmZF5xf7NmjXn668L8PPzc6y5jrc3p06edFzW+7GfO6aVrSUiAgYGVmFhIfn5+XyVk8OePXsYPz6Sc+fO8eijl27i+/j6MiAigtmzn+HgwYMcO3aMeXPnUlxcTHiP8AprPj0rmtjYReTl5ZGdfZjdu3dx678v9bVv34H69evz9DNPc/ToUTIyDjHjqScJC+vsuBxYWaNGjWbJknh27NhBfn4+77yznf955BGOZGcDl14IbLVa2bZtm+Mhiao2cOAg9u7dy8YNG8jPz2fv3j289daWK/bv0KED3t51eOaZpzly5AjZ2YeJjp7J0qUvVtj/545pZWuJiICBgZWYuJq+fXozZMhgnl28mDtuv4PViWvw8fFx9Jk2bTphncKYOnUKwx8YxunT37AiIYHa3t4V1ly4KJZTp04xbOgQxo0dS0M/P6KjZwGX7kctfWkZNg8PRo4cwaN/+AO33XYbc+fNc3kfevTowZSpU3l52UsMGhjB6tWriZkzh+C77wYuhW509CyWLn2R5597zuV5fk6zZs2Ii1vMm0lvEjGgP6+sWsVjEyZesb/NZmPZsmWUlZYxdsxo/ueRR/Dx8WFRbFyF/f/TMa1MLRERcONt7cFBbUg58GmVLKIqa8nVKy0tdXoKcf++fcyZE0Py+zuu4apERCpm3BmWVI2MjEP069uHXbt2curUKb744nOWvrSU0NDQa700EZEK1YinBKXyAgNvIzJyPMtfXk5u7jG869Sha9euTJ78+LVemohIhVwOLLvdTnpaWpX8gKPdbnerhrim/4AB9B8w4FovQ0TkqrgcWFGTJhMVNdHtH1+02+1ETZrsVg0REan5XH7oQkREpDrpoQsRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECAosERExggJLRESMoMASEREjKLBERMQICiwRETGCAktERIygwBIRESMosERExAgKLBERMYICS0REjKDAEhERIyiwRETECP8HZI6lCVI7f4wAAAAASUVORK5CYII="></p><p>You should be able to see your todo list in all its glory. Unfortunately, checking any of the items seems to have no effect. Let&#x27;s fix that next.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-6-handle-checkboxes"></a>Step 6: Handle checkboxes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-6-handle-checkboxes" title="Direct link to heading">#</a></h2><p>Each time a checkbox is checked or unchecked, our <code>serve()</code> function is called, which in turn calls <code>show_todos()</code>. </p><ul><li>If a checkbox is checked, <code>q.args</code> will contain a <code>True</code> for that checkbox.</li><li>If a checkbox is unchecked, <code>q.args</code> will contain a <code>False</code> for that checkbox.</li></ul><p>So, we iterate through all the to-do items set their <code>done</code> attribute based on the value of their corresponding checkbox.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/todo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> typing </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> List</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">_id </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># A simple class that represents a to-do item.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">class</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">__init__</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">global</span><span class="token plain"> _id</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        _id </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;todo_</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">_id</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> text</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">done </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">False</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># A simple class that represents a to-do item.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">class</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">__init__</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">global</span><span class="token plain"> _id</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        _id </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;todo_</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">_id</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">done </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">False</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> text</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Get items for this user.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> List</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">todos</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create a sample list if we don&#x27;t have any.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> todos </span><span class="token keyword" style="font-style:italic">is</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">None</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">todos </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> todos </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do this&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do that&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do something else&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># If the user checked/unchecked an item, update our list.</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> todo </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">            todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">done </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create done/not-done checkboxes.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    done </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> trigger</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> todo </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> todos </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    not_done </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> trigger</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> todo </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> todos </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display list</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 3 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;To Do&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain">not_done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">separator</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Done&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">len</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain">done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>Restart your app and reload your browser. You should now be able to check/uncheck the items in your todo list. </p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/tutorial-todo__2-c21f17dee3fec1d5b531cdef2c8e06bf.mp4" type="video/mp4"></video><p>Next, let&#x27;s see how to add new items to the list.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-7-the-new-todo-form"></a>Step 7: The &#x27;new todo&#x27; form<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-7-the-new-todo-form" title="Direct link to heading">#</a></h2><p>Next, let&#x27;s display a form to add new items to our list. For that, we&#x27;ll add a new button to our existing form, named <code>new_todo</code>, and direct the <code>serve()</code> function to the <code>new_todo()</code> function if the button is clicked. Recall that when buttons are clicked, <code>q.args.button_name</code> will be <code>True</code>, so we check if <code>q.args.new_todo</code> is <code>True</code>. </p><p>In the <code>new_todo()</code> function, we display a new form containing a textbox (using <code>ui.textbox()</code>) and a set of buttons to add the item or return to to-do list (a <code>ui.buttons()</code> helps us display buttons side-by-side).</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/todo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> typing </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> List</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display list</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 3 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;To Do&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain">not_done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">separator</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Done&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">len</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain">done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>You should now be able to check/uncheck the items in your todo list. </p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/tutorial-todo__2-c21f17dee3fec1d5b531cdef2c8e06bf.mp4" type="video/mp4"></video><p>Next, let&#x27;s see how to add new items to the list.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-7-the-new-todo-form"></a>Step 7: The &#x27;new todo&#x27; form<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-7-the-new-todo-form" title="Direct link to heading">#</a></h2><p>Next, let&#x27;s display a form to add new items to our list. For that, we&#x27;ll add a new button to our existing form, named <code>new_todo</code>, and direct the <code>serve()</code> function to the <code>new_todo()</code> function if the button is clicked. Recall that when buttons are clicked, <code>q.args.button_name</code> will be <code>True</code>, so we check if <code>q.args.new_todo</code> is <code>True</code>. </p><p>In the <code>new_todo()</code> function, we display a new form containing a textbox (using <code>ui.textbox()</code>) and a set of buttons to add the item or return to to-do list (a <code>ui.buttons()</code> helps us display buttons side-by-side).</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/todo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> typing </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> List</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">_id </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># A simple class that represents a to-do item.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">class</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">__init__</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">global</span><span class="token plain"> _id</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        _id </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;todo_</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">_id</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> text</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">done </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">False</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># A simple class that represents a to-do item.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">class</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">__init__</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">global</span><span class="token plain"> _id</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        _id </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;todo_</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">_id</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">done </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">False</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> text</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">new_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display an input form.</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        new_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Show all items.</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">new_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display an input form.</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        new_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Show all items.</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Get items for this user.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> List</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">todos</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create a sample list if we don&#x27;t have any.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> todos </span><span class="token keyword" style="font-style:italic">is</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">None</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">todos </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> todos </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do this&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do that&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do something else&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -93,14 +77,11 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create done/not-done checkboxes.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    done </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> value</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> trigger</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> todo </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> todos </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    not_done </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">checkbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> trigger</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">for</span><span class="token plain"> todo </span><span class="token keyword" style="font-style:italic">in</span><span class="token plain"> todos </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">not</span><span class="token plain"> todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display list</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 3 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;To Do&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;new_todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;New To Do...&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain">not_done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">separator</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Done&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> </span><span class="token builtin" style="color:rgb(130, 170, 255)">len</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">else</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain">done</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">new_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display an input form</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 3 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;New To Do&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;What needs to be done?&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> multiline</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buttons</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;add_todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Add&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_todos&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>Restart your app and reload your browser. You should now be able to bring up the new to-do form. </p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/tutorial-todo__3-0d9d74e87e9051cf9c76754a3cfee393.mp4" type="video/mp4"></video><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-8-add-to-do-and-return"></a>Step 8: Add to-do and return<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-8-add-to-do-and-return" title="Direct link to heading">#</a></h2><p>Finally, we handle the <code>add_todo</code> button-click, redirecting <code>serve()</code> to a new <code>add_todo()</code> function, which simply inserts a the new to-do item into our user-level todo list and calls <code>show_todos()</code> to redraw the to-do list.</p><div class="admonition admonition-note alert alert--secondary"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>note</h5></div><div class="admonition-content"><p>In this example, for clarity, we named the both the buttons and their corresponding functions <code>new_todo</code> and <code>add_todo</code>, but this is not necessary.</p></div></div><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/todo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> typing </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> List</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">new_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display an input form</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 3 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;New To Do&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;What needs to be done?&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> multiline</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buttons</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;add_todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Add&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_todos&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>You should now be able to bring up the new to-do form. </p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/tutorial-todo__3-0d9d74e87e9051cf9c76754a3cfee393.mp4" type="video/mp4"></video><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-8-add-to-do-and-return"></a>Step 8: Add to-do and return<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-8-add-to-do-and-return" title="Direct link to heading">#</a></h2><p>Finally, we handle the <code>add_todo</code> button-click, redirecting <code>serve()</code> to a new <code>add_todo()</code> function, which simply inserts a the new to-do item into our user-level todo list and calls <code>show_todos()</code> to redraw the to-do list.</p><div class="admonition admonition-note alert alert--secondary"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><path fill-rule="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"></path></svg></span>note</h5></div><div class="admonition-content"><p>In this example, for clarity, we named the both the buttons and their corresponding functions <code>new_todo</code> and <code>add_todo</code>, but this is not necessary.</p></div></div><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/todo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> typing </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> List</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> h2o_wave </span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> main</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> ui</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">_id </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># A simple class that represents a to-do item.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">class</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">__init__</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">global</span><span class="token plain"> _id</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        _id </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;todo_</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">_id</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> text</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">done </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">False</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># A simple class that represents a to-do item.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">class</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">__init__</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token keyword" style="font-style:italic">global</span><span class="token plain"> _id</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        _id </span><span class="token operator" style="color:rgb(137, 221, 255)">+=</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token builtin" style="color:rgb(130, 170, 255)">id</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">f&#x27;todo_</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token string-interpolation interpolation">_id</span><span class="token string-interpolation interpolation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token string-interpolation string" style="color:rgb(195, 232, 141)">&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">done </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">False</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        self</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> text</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">new_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display an input form.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        new_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Add an item.</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        add_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Show all items.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">new_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display an input form.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        new_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">elif</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">add_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Add an item.</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">        add_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">else</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Show all items.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">await</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">save</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Get items for this user.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> List</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">todos</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Create a sample list if we don&#x27;t have any.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">if</span><span class="token plain"> todos </span><span class="token keyword" style="font-style:italic">is</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">None</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">todos </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> todos </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain">TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do this&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do that&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Do something else&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
@@ -111,21 +92,16 @@
 </span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">add_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Insert a new item</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">user</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">insert</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> TodoItem</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text </span><span class="token keyword" style="font-style:italic">or</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Untitled&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Go back to our list.</span><span class="token plain"></span></div><div class="token-line docusaurus-highlight-code-line" style="color:#bfc7d5"><span class="token plain">    show_todos</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">new_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display an input form</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 3 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;New To Do&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;What needs to be done?&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> multiline</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buttons</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;add_todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Add&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_todos&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
-</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>Restart your app and reload your browser. You should now be able to add new to-do items to your list. Congratulations!</p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/tutorial-todo__4-7f3700ac8c437bda55137ad74d6cf294.mp4" type="video/mp4"></video><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-9-make-it-realtime"></a>Step 9: Make it realtime<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-9-make-it-realtime" title="Direct link to heading">#</a></h2><p>To make your app realtime, simply pass <code>mode=&#x27;multicast&#x27;</code> to your <code>listen()</code>.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/todo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">listen</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> serve</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> mode</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;multicast&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>Restart your app, and try opening <a href="http://localhost:55555/todo" target="_blank" rel="noopener noreferrer">http://localhost:55555/todo</a> from multiple browser tabs:</p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/tutorial-todo__5-857b867c7263dfa780f7bcea2e1b3592.mp4" type="video/mp4"></video><p>Groovy!</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="exercise"></a>Exercise<a aria-hidden="true" tabindex="-1" class="hash-link" href="#exercise" title="Direct link to heading">#</a></h2><p>A little housekeeping goes a long way: add a &quot;Clear&quot; button on the main page to clear all completed to-dos.</p><blockquote><p>&quot;And this mess is so big<br>
-And so deep and so tall,<br>
-We cannot pick it up.<br>
-There is no way at all!&quot;</p></blockquote><p>― Dr. Seuss, <em>The Cat in the Hat</em></p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="next-steps"></a>Next steps<a aria-hidden="true" tabindex="-1" class="hash-link" href="#next-steps" title="Direct link to heading">#</a></h2><p>Congratulations! You&#x27;ve completed all the tutorials (hopefully). There are three paths you can take from here:</p><ul><li><a href="/wave/docs/examples">Gallery</a>. 150+ examples that cover everything that Wave has to offer.</li><li><a href="/wave/docs/guide">Guide</a>. In-depth look at each of Wave&#x27;s features.</li><li><a href="/wave/docs/api/index">API</a>. Reference-level documentation for the Python API.</li></ul><p>Happy hacking!</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/tutorial-todo.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/tutorial-counter"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Tutorial: Bean Counter</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/guide"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Introduction »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#step-1-listen" class="table-of-contents__link">Step 1: Listen</a></li><li><a href="#step-2-whats-in-a-to-do" class="table-of-contents__link">Step 2: What&#39;s in a to-do?</a></li><li><a href="#step-3-make-a-to-do-list" class="table-of-contents__link">Step 3: Make a to-do list</a></li><li><a href="#step-4-show-the-to-do-list" class="table-of-contents__link">Step 4: Show the to-do list</a></li><li><a href="#step-5-show-the-done-list" class="table-of-contents__link">Step 5: Show the &#39;done&#39; list</a></li><li><a href="#step-6-handle-checkboxes" class="table-of-contents__link">Step 6: Handle checkboxes</a></li><li><a href="#step-7-the-new-todo-form" class="table-of-contents__link">Step 7: The &#39;new todo&#39; form</a></li><li><a href="#step-8-add-to-do-and-return" class="table-of-contents__link">Step 8: Add to-do and return</a></li><li><a href="#step-9-make-it-realtime" class="table-of-contents__link">Step 9: Make it realtime</a></li><li><a href="#exercise" class="table-of-contents__link">Exercise</a></li><li><a href="#next-steps" class="table-of-contents__link">Next steps</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/235.30963dc0.js"></script>
-<script src="/wave/236.908f536c.js"></script>
-<script src="/wave/935f2afb.aeb7338a.js"></script>
-<script src="/wave/17896441.78666ca0.js"></script>
-<script src="/wave/996e93c8.ded0a529.js"></script>
+</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">def</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">new_todo</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> Q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Display an input form</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    q</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">page</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;form&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">form_card</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">box</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;1 1 3 10&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> items</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">text_l</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;New To Do&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">textbox</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;text&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;What needs to be done?&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> multiline</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">buttons</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;add_todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Add&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> primary</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token boolean" style="color:rgb(255, 88, 116)">True</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">            ui</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token plain">button</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">name</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;show_todos&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> label</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;Back&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>You should now be able to add new to-do items to your list. Congratulations!</p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/tutorial-todo__4-7f3700ac8c437bda55137ad74d6cf294.mp4" type="video/mp4"></video><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="step-9-make-it-realtime"></a>Step 9: Make it realtime<a aria-hidden="true" tabindex="-1" class="hash-link" href="#step-9-make-it-realtime" title="Direct link to heading">#</a></h2><p>To make your app realtime, simply pass <code>mode=&#x27;multicast&#x27;</code> to <code>@app()</code>.</p><div class="mdxCodeBlock_1XEh"><div style="color:#bfc7d5;background-color:#292d3e" class="codeBlockTitle_3nn1">$HOME/wave-apps/todo.py</div><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd undefined">Copy</button><div tabindex="0" class="prism-code language-py codeBlock_3iAC codeBlockWithTitle_3QsD"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token decorator annotation punctuation" style="color:rgb(199, 146, 234)">@app</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;/todo&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> mode</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;multicast&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span></div></div></div></div></div><p>Now try opening <a href="http://localhost:55555/todo" target="_blank" rel="noopener noreferrer">http://localhost:55555/todo</a> from multiple browser tabs:</p><video autoplay="autoplay" loop="" muted=""><source src="/wave/assets/medias/tutorial-todo__5-857b867c7263dfa780f7bcea2e1b3592.mp4" type="video/mp4"></video><p>Groovy!</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="exercise"></a>Exercise<a aria-hidden="true" tabindex="-1" class="hash-link" href="#exercise" title="Direct link to heading">#</a></h2><p>A little housekeeping goes a long way: add a &quot;Clear&quot; button on the main page to clear all completed to-dos.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="next-steps"></a>Next steps<a aria-hidden="true" tabindex="-1" class="hash-link" href="#next-steps" title="Direct link to heading">#</a></h2><p>Congratulations! You&#x27;ve completed all the tutorials (hopefully). There are three paths you can take from here:</p><ul><li><a href="/wave/docs/examples">Gallery</a>. 150+ examples that cover everything that Wave has to offer.</li><li><a href="/wave/docs/guide">Guide</a>. In-depth look at each of Wave&#x27;s features.</li><li><a href="/wave/docs/api/index">API</a>. Reference-level documentation for the Python API.</li></ul><p>Happy hacking!</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/h2oai/wave/edit/master/website/docs/tutorial-todo.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><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"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/wave/docs/tutorial-counter"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Tutorial: Bean Counter</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/wave/docs/guide"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Introduction »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#step-1-listen" class="table-of-contents__link">Step 1: Listen</a></li><li><a href="#step-2-whats-in-a-to-do" class="table-of-contents__link">Step 2: What&#39;s in a to-do?</a></li><li><a href="#step-3-make-a-to-do-list" class="table-of-contents__link">Step 3: Make a to-do list</a></li><li><a href="#step-4-show-the-to-do-list" class="table-of-contents__link">Step 4: Show the to-do list</a></li><li><a href="#step-5-show-the-done-list" class="table-of-contents__link">Step 5: Show the &#39;done&#39; list</a></li><li><a href="#step-6-handle-checkboxes" class="table-of-contents__link">Step 6: Handle checkboxes</a></li><li><a href="#step-7-the-new-todo-form" class="table-of-contents__link">Step 7: The &#39;new todo&#39; form</a></li><li><a href="#step-8-add-to-do-and-return" class="table-of-contents__link">Step 8: Add to-do and return</a></li><li><a href="#step-9-make-it-realtime" class="table-of-contents__link">Step 9: Make it realtime</a></li><li><a href="#exercise" class="table-of-contents__link">Exercise</a></li><li><a href="#next-steps" class="table-of-contents__link">Next steps</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/237.a770d6f5.js"></script>
+<script src="/wave/238.cf1fd2bd.js"></script>
+<script src="/wave/935f2afb.d4745991.js"></script>
+<script src="/wave/17896441.7487f7bf.js"></script>
+<script src="/wave/996e93c8.836b1f20.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/e013439f.143ae2bf.js b/docs/e013439f.9b377459.js
similarity index 93%
rename from docs/e013439f.143ae2bf.js
rename to docs/e013439f.9b377459.js
index be8c1eba3d..ea05446621 100644
--- a/docs/e013439f.143ae2bf.js
+++ b/docs/e013439f.9b377459.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[204],{257: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(290)),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(451).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},290: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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function c(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=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<o;p++)i[p]=t[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}d.displayName="MDXCreateElement"},451:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/plot-line-annotation-0b3e87d958bdf0bdcfddc482ad9cf3c5.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[205],{258: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(292)),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(456).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},292: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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function c(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=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<o;p++)i[p]=t[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}d.displayName="MDXCreateElement"},456:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/plot-line-annotation-0b3e87d958bdf0bdcfddc482ad9cf3c5.png"}}]);
\ No newline at end of file
diff --git a/docs/e32c5859.399095c5.js b/docs/e32c5859.afb5fae3.js
similarity index 92%
rename from docs/e32c5859.399095c5.js
rename to docs/e32c5859.afb5fae3.js
index 4ac787a611..7764f6143a 100644
--- a/docs/e32c5859.399095c5.js
+++ b/docs/e32c5859.afb5fae3.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[205],{258:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return o})),r.d(t,"metadata",(function(){return s})),r.d(t,"rightToc",(function(){return c})),r.d(t,"default",(function(){return l}));var n=r(2),a=r(6),i=(r(0),r(290)),o={title:"Form / Text / Sizes"},s={unversionedId:"examples/text-sizes",id:"examples/text-sizes",isDocsHomePage:!1,title:"Form / Text / Sizes",description:"Use text size variants to display formatted text using predefined font sizes.",source:"@site/docs/examples/text-sizes.md",slug:"/examples/text-sizes",permalink:"/wave/docs/examples/text-sizes",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/text-sizes.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Text",permalink:"/wave/docs/examples/text"},next:{title:"Form / Label",permalink:"/wave/docs/examples/label"}},c=[],u={rightToc:c};function l(e){var t=e.components,o=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},u,o,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Use text size variants to display formatted text using predefined font sizes."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+r(424).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from 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.separator('Separator'),\n        ui.text_xl('Extra large text'),\n        ui.text_l('Large text'),\n        ui.text('Normal text'),\n        ui.text_m('Medium text'),\n        ui.text_s('Small text'),\n        ui.text_xs('Extra small text'),\n\n        # Using `ui.text()` with a `size` argument produces similar results:\n        ui.separator('Separator'),\n        ui.text('Extra large text', size='xl'),\n        ui.text('Large text', size='l'),\n        ui.text('Normal text'),\n        ui.text('Medium text', size='m'),\n        ui.text('Small text', size='s'),\n        ui.text('Extra small text', size='xs'),\n    ],\n)\npage.save()\n")))}l.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return p})),r.d(t,"b",(function(){return f}));var n=r(0),a=r.n(n);function i(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 s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=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<i;u++)o[u]=r[u];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,r)}x.displayName="MDXCreateElement"},424:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/text-sizes-5d78df884df4f57688aef7d5b7b68349.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[206],{259:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return o})),r.d(t,"metadata",(function(){return s})),r.d(t,"rightToc",(function(){return c})),r.d(t,"default",(function(){return l}));var n=r(2),a=r(6),i=(r(0),r(292)),o={title:"Form / Text / Sizes"},s={unversionedId:"examples/text-sizes",id:"examples/text-sizes",isDocsHomePage:!1,title:"Form / Text / Sizes",description:"Use text size variants to display formatted text using predefined font sizes.",source:"@site/docs/examples/text-sizes.md",slug:"/examples/text-sizes",permalink:"/wave/docs/examples/text-sizes",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/text-sizes.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Text",permalink:"/wave/docs/examples/text"},next:{title:"Form / Label",permalink:"/wave/docs/examples/label"}},c=[],u={rightToc:c};function l(e){var t=e.components,o=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},u,o,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Use text size variants to display formatted text using predefined font sizes."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+r(429).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from 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.separator('Separator'),\n        ui.text_xl('Extra large text'),\n        ui.text_l('Large text'),\n        ui.text('Normal text'),\n        ui.text_m('Medium text'),\n        ui.text_s('Small text'),\n        ui.text_xs('Extra small text'),\n\n        # Using `ui.text()` with a `size` argument produces similar results:\n        ui.separator('Separator'),\n        ui.text('Extra large text', size='xl'),\n        ui.text('Large text', size='l'),\n        ui.text('Normal text'),\n        ui.text('Medium text', size='m'),\n        ui.text('Small text', size='s'),\n        ui.text('Extra small text', size='xs'),\n    ],\n)\npage.save()\n")))}l.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return p})),r.d(t,"b",(function(){return f}));var n=r(0),a=r.n(n);function i(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 s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=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<i;u++)o[u]=r[u];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,r)}x.displayName="MDXCreateElement"},429:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/text-sizes-5d78df884df4f57688aef7d5b7b68349.png"}}]);
\ No newline at end of file
diff --git a/docs/e4e8fb51.9c820d69.js b/docs/e4e8fb51.f6621ec9.js
similarity index 96%
rename from docs/e4e8fb51.9c820d69.js
rename to docs/e4e8fb51.f6621ec9.js
index d477a72c17..6b01c36919 100644
--- a/docs/e4e8fb51.9c820d69.js
+++ b/docs/e4e8fb51.f6621ec9.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[206],{259:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return m})),t.d(n,"metadata",(function(){return c})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return u}));var r=t(2),a=t(6),o=(t(0),t(290)),m={title:"Form / Frame"},c={unversionedId:"examples/form-frame",id:"examples/form-frame",isDocsHomePage:!1,title:"Form / Frame",description:"Use a frame component in a form card to display HTML content inline.",source:"@site/docs/examples/form-frame.md",slug:"/examples/form-frame",permalink:"/wave/docs/examples/form-frame",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/form-frame.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / File Upload",permalink:"/wave/docs/examples/file-upload"},next:{title:"Form / Frame / Path",permalink:"/wave/docs/examples/form-frame-path"}},l=[],p={rightToc:l};function u(e){var n=e.components,m=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,m,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use a frame component in a form card to display HTML content inline."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(434).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\nhtml = '''\n<!DOCTYPE html>\n<html>\n<body>\n  <h1>Hello World!</h1>\n</body>\n</html>\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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?m(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):m(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=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<o;p++)m[p]=t[p];return a.a.createElement.apply(null,m)}return a.a.createElement.apply(null,t)}d.displayName="MDXCreateElement"},434:function(e,n,t){"use strict";t.r(n),n.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[207],{260:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return m})),t.d(n,"metadata",(function(){return c})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return u}));var r=t(2),a=t(6),o=(t(0),t(292)),m={title:"Form / Frame"},c={unversionedId:"examples/form-frame",id:"examples/form-frame",isDocsHomePage:!1,title:"Form / Frame",description:"Use a frame component in a form card to display HTML content inline.",source:"@site/docs/examples/form-frame.md",slug:"/examples/form-frame",permalink:"/wave/docs/examples/form-frame",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/form-frame.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / File Upload",permalink:"/wave/docs/examples/file-upload"},next:{title:"Form / Frame / Path",permalink:"/wave/docs/examples/form-frame-path"}},l=[],p={rightToc:l};function u(e){var n=e.components,m=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,m,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use a frame component in a form card to display HTML content inline."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(439).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\nhtml = '''\n<!DOCTYPE html>\n<html>\n<body>\n  <h1>Hello World!</h1>\n</body>\n</html>\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},292: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<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?m(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):m(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=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<o;p++)m[p]=t[p];return a.a.createElement.apply(null,m)}return a.a.createElement.apply(null,t)}d.displayName="MDXCreateElement"},439:function(e,n,t){"use strict";t.r(n),n.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/e7ad456d.8574afa5.js b/docs/e7ad456d.8574afa5.js
new file mode 100644
index 0000000000..495e9a9edd
--- /dev/null
+++ b/docs/e7ad456d.8574afa5.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[208],{261: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 u})),r.d(t,"default",(function(){return p}));var n=r(2),a=r(6),o=(r(0),r(292)),i={slug:"release-0.9.0",title:"Introducing Live Reload",author:"Prithvi Prabhu",author_title:"Chief of Technology @ H2O.ai",author_url:"https://github.com/lo5",author_image_url:"https://avatars3.githubusercontent.com/u/6334572",tags:["release"]},c={permalink:"/wave/blog/release-0.9.0",editUrl:"https://github.com/facebook/docusaurus/edit/master/website/blog/blog/2020-10-28-release.md",source:"@site/blog/2020-10-28-release.md",description:"Today, we're excited to announce H2O Wave v0.9.0, with a new wave CLI, live-reload, improved performance, background tasks and ASGI compatibility.",date:"2020-10-28T00:00:00.000Z",tags:[{label:"release",permalink:"/wave/blog/tags/release"}],title:"Introducing Live Reload",readingTime:3.14,truncated:!0},u=[],l={rightToc:u};function p(e){var t=e.components,r=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,r,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Today, we're excited to announce H2O Wave v0.9.0, with a new ",Object(o.b)("inlineCode",{parentName:"p"},"wave")," CLI, live-reload, improved performance, background tasks and ASGI compatibility. "))}p.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return s})),r.d(t,"b",(function(){return b}));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 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 c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function u(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var l=a.a.createContext({}),p=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=p(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)}},d=a.a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,o=e.originalType,i=e.parentName,l=u(e,["components","mdxType","originalType","parentName"]),s=p(r),d=n,b=s["".concat(i,".").concat(d)]||s[d]||f[d]||o;return r?a.a.createElement(b,c(c({ref:t},l),{},{components:r})):a.a.createElement(b,c({ref:t},l))}));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]=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:n,i[1]=c;for(var l=2;l<o;l++)i[l]=r[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/e7ba74f4.0bd15322.js b/docs/e7ba74f4.0bd15322.js
new file mode 100644
index 0000000000..5438c6eeca
--- /dev/null
+++ b/docs/e7ba74f4.0bd15322.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[209],{262:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return l}));var r=n(2),a=n(6),o=(n(0),n(292)),i={title:"Meta / Notification"},c={unversionedId:"examples/meta-notification",id:"examples/meta-notification",isDocsHomePage:!1,title:"Meta / Notification",description:"Display a desktop notification.",source:"@site/docs/examples/meta-notification.md",slug:"/examples/meta-notification",permalink:"/wave/docs/examples/meta-notification",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/meta-notification.md",version:"current",sidebar:"someSidebar",previous:{title:"Meta / Icon",permalink:"/wave/docs/examples/meta-icon"},next:{title:"Meta / Refresh",permalink:"/wave/docs/examples/meta-refresh"}},p=[],s={rightToc:p};function l(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},s,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Display a desktop notification."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(468).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import time\n\nfrom h2o_wave import site, ui\n\npage = site['/demo']\n\npage['meta'] = ui.meta_card(box='')\n\npage['example'] = ui.markdown_card(\n    box='1 1 2 2',\n    title='Desktop Notifications',\n    content='This page should display a desktop notification in a few seconds. Wait for it...',\n)\npage.save()\n\ntime.sleep(5)\npage['meta'].notification = 'And now for something completely different!'\n\npage.save()\n")))}l.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return d}));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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;s++)i[s]=n[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},468:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/meta-notification-fbc7ef4c16cebfc522a564d72cb6953d.png"}}]);
\ No newline at end of file
diff --git a/docs/e7ba74f4.7c2bb260.js b/docs/e7ba74f4.7c2bb260.js
deleted file mode 100644
index 87d7b10d82..0000000000
--- a/docs/e7ba74f4.7c2bb260.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[207],{260:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return l}));var r=n(2),a=n(6),o=(n(0),n(290)),i={title:"Meta / Notification"},c={unversionedId:"examples/meta-notification",id:"examples/meta-notification",isDocsHomePage:!1,title:"Meta / Notification",description:"Display a desktop notification.",source:"@site/docs/examples/meta-notification.md",slug:"/examples/meta-notification",permalink:"/wave/docs/examples/meta-notification",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/meta-notification.md",version:"current",sidebar:"someSidebar",previous:{title:"Meta / Title",permalink:"/wave/docs/examples/meta-title"},next:{title:"Meta / Refresh",permalink:"/wave/docs/examples/meta-refresh"}},p=[],s={rightToc:p};function l(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},s,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Display a desktop notification."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(462).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import time\n\nfrom h2o_wave import site, ui\n\npage = site['/demo']\n\npage['meta'] = ui.meta_card(box='')\n\npage['example'] = ui.markdown_card(\n    box='1 1 2 2',\n    title='Desktop Notifications',\n    content='This page should display a desktop notification in a few seconds. Wait for it...',\n)\npage.save()\n\ntime.sleep(5)\npage['meta'].notification = 'And now for something completely different!'\n\npage.save()\n")))}l.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return d}));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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;s++)i[s]=n[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},462:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/meta-notification-fbc7ef4c16cebfc522a564d72cb6953d.png"}}]);
\ No newline at end of file
diff --git a/docs/e7c32899.69aa09e3.js b/docs/e7c32899.69aa09e3.js
deleted file mode 100644
index 5b9d49e585..0000000000
--- a/docs/e7c32899.69aa09e3.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[208],{261: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 c}));var r=n(2),a=n(6),o=(n(0),n(290)),i={title:"Plot / Matplotlib"},l={unversionedId:"examples/plot-matplotlib",id:"examples/plot-matplotlib",isDocsHomePage:!1,title:"Plot / Matplotlib",description:"Use matplotlib to create plots. Also demonstrates how to provide live control over plots.",source:"@site/docs/examples/plot-matplotlib.md",slug:"/examples/plot-matplotlib",permalink:"/wave/docs/examples/plot-matplotlib",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-matplotlib.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Bokeh",permalink:"/wave/docs/examples/plot-bokeh"},next:{title:"Plot / Plotly",permalink:"/wave/docs/examples/plot-plotly"}},p=[],s={rightToc:p};function c(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},s,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use matplotlib to create plots. Also demonstrates how to provide live control over plots."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(457).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import uuid\nimport os\nimport numpy as np\nimport matplotlib.pyplot as plt\n\nfrom h2o_wave import ui, listen, Q\n\nnp.random.seed(19680801)\n\n\nasync def serve(q: Q):\n    if not q.client.initialized:  # First visit\n        q.client.initialized = True\n        q.client.points = 25\n        q.client.alpha = 50\n\n        q.page['controls'] = ui.form_card(\n            box='1 1 2 3',\n            items=[\n                ui.text_xl(\"Lets make some plots\"),\n                ui.slider(name='points', label='Points', min=5, max=50, step=1, value=q.client.points, trigger=True),\n                ui.slider(name='alpha', label='Alpha', min=5, max=100, step=1, value=q.client.alpha, trigger=True),\n            ]\n        )\n        q.page['plot'] = ui.markdown_card(box='3 1 2 3', title='Your plot!', content='')\n\n    if q.args.points:\n        q.client.points = q.args.points\n\n    if q.args.alpha:\n        q.client.alpha = q.args.alpha\n\n    n = q.client.points\n\n    # Render plot\n    plt.figure(figsize=(2, 2))\n    plt.scatter(\n        np.random.rand(n), np.random.rand(n),\n        s=(30 * np.random.rand(n)) ** 2,\n        c=np.random.rand(n),\n        alpha=q.client.alpha / 100.0\n    )\n    image_filename = f'{str(uuid.uuid4())}.png'\n    plt.savefig(image_filename)\n\n    # Upload\n    image_path, = await q.site.upload([image_filename])\n\n    # Clean up\n    os.remove(image_filename)\n\n    # Display our plot in our markdown card\n    q.page['plot'].content = f'![plot]({image_path})'\n\n    # Save page\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}c.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),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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;s++)i[s]=n[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},457:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-matplotlib-14dd0da4129dea8f5aae83573ba31241.png"}}]);
\ No newline at end of file
diff --git a/docs/e7c32899.ee888209.js b/docs/e7c32899.ee888209.js
new file mode 100644
index 0000000000..760a9b4c86
--- /dev/null
+++ b/docs/e7c32899.ee888209.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[210],{263: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(292)),i={title:"Plot / Matplotlib"},l={unversionedId:"examples/plot-matplotlib",id:"examples/plot-matplotlib",isDocsHomePage:!1,title:"Plot / Matplotlib",description:"Use matplotlib to create plots. Also demonstrates how to provide live control over plots.",source:"@site/docs/examples/plot-matplotlib.md",slug:"/examples/plot-matplotlib",permalink:"/wave/docs/examples/plot-matplotlib",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-matplotlib.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Bokeh",permalink:"/wave/docs/examples/plot-bokeh"},next:{title:"Plot / Plotly",permalink:"/wave/docs/examples/plot-plotly"}},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,"Use matplotlib to create plots. Also demonstrates how to provide live control over plots."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(462).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import uuid\nimport os\nimport numpy as np\nimport matplotlib.pyplot as plt\n\nfrom h2o_wave import ui, main, app, Q\n\nnp.random.seed(19680801)\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if not q.client.initialized:  # First visit\n        q.client.initialized = True\n        q.client.points = 25\n        q.client.alpha = 50\n\n        q.page['controls'] = ui.form_card(\n            box='1 1 2 3',\n            items=[\n                ui.text_xl(\"Lets make some plots\"),\n                ui.slider(name='points', label='Points', min=5, max=50, step=1, value=q.client.points, trigger=True),\n                ui.slider(name='alpha', label='Alpha', min=5, max=100, step=1, value=q.client.alpha, trigger=True),\n            ]\n        )\n        q.page['plot'] = ui.markdown_card(box='3 1 2 3', title='Your plot!', content='')\n\n    if q.args.points:\n        q.client.points = q.args.points\n\n    if q.args.alpha:\n        q.client.alpha = q.args.alpha\n\n    n = q.client.points\n\n    # Render plot\n    plt.figure(figsize=(2, 2))\n    plt.scatter(\n        np.random.rand(n), np.random.rand(n),\n        s=(30 * np.random.rand(n)) ** 2,\n        c=np.random.rand(n),\n        alpha=q.client.alpha / 100.0\n    )\n    image_filename = f'{str(uuid.uuid4())}.png'\n    plt.savefig(image_filename)\n\n    # Upload\n    image_path, = await q.site.upload([image_filename])\n\n    # Clean up\n    os.remove(image_filename)\n\n    # Display our plot in our markdown card\n    q.page['plot'].content = f'![plot]({image_path})'\n\n    # Save page\n    await q.page.save()\n")))}s.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return m})),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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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},m=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)}},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"]),m=s(n),d=r,f=m["".concat(i,".").concat(d)]||m[d]||u[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<o;c++)i[c]=n[c];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},462:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-matplotlib-14dd0da4129dea8f5aae83573ba31241.png"}}]);
\ No newline at end of file
diff --git a/docs/e833177e.5dba918c.js b/docs/e833177e.6f3c86db.js
similarity index 96%
rename from docs/e833177e.5dba918c.js
rename to docs/e833177e.6f3c86db.js
index f05998fd23..09d8bdfde1 100644
--- a/docs/e833177e.5dba918c.js
+++ b/docs/e833177e.6f3c86db.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[209],{262:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return o})),a.d(t,"metadata",(function(){return s})),a.d(t,"rightToc",(function(){return c})),a.d(t,"default",(function(){return l}));var n=a(2),r=a(6),i=(a(0),a(290)),o={title:"Wave Scripts"},s={unversionedId:"scripts",id:"scripts",isDocsHomePage:!1,title:"Wave Scripts",description:"A Wave script is the simplest way to publish content in Q, especially live web content:",source:"@site/docs/scripts.md",slug:"/scripts",permalink:"/wave/docs/scripts",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/scripts.md",version:"current",sidebar:"someSidebar",previous:{title:"Architecture",permalink:"/wave/docs/architecture"},next:{title:"Wave Apps",permalink:"/wave/docs/apps"}},c=[],p={rightToc:c};function l(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},p,a,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"A Wave script is the simplest way to publish content in Q, especially live web content:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Dashboards and visualizations for live monitoring."),Object(i.b)("li",{parentName:"ul"},"Live information displays: news, tickers, health, or performance data.")),Object(i.b)("p",null,"A Wave script is one kind of program you can author to interact with Q. The other kind is a ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/apps"}),"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."),Object(i.b)("p",null,"Here is the skeleton of a Wave script (",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/tutorial-hello"}),"example"),"):"),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\n# Grab a reference to a page\npage = site['/foo']\n\n# Modify the page\npage['qux'] = ui.some_card()\n\n# Save the page\npage.save()\n")),Object(i.b)("p",null,"Here is the skeleton of a Wave script that continuously updates a page (",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/tutorial-monitor"}),"example"),"):"),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"import time\nfrom h2o_wave import site, ui\n\n# Grab a reference to a page\npage = site['/foo']\n\n# Grab a reference to a card on the page\ncard = page['qux']\n\n# Update the page with stats every second\nwhile True:\n    # Read data from somewhere\n    cpu_percent, mem_usage, disk_usage = read_system_stats()\n\n    # Update card's data\n    card.data[-1] = [cpu_percent, mem_usage, disk_usage]\n    \n    # Save the page\n    page.save()\n    \n    # Wait a second\n    time.sleep(1)\n")),Object(i.b)("p",null,"To update pages at a much lower frequency (say, minutes, hours, days), use a scheduler like ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Cron"}),"cron")," along with a simpler Wave script:"),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:"{10-17}","{10-17}":!0}),"import time\nfrom h2o_wave import site, ui\n\n# Grab a reference to a page\npage = site['/foo']\n\n# Grab a reference to a card on the page\ncard = page['qux']\n\n# Read data from somewhere\ncpu_percent, mem_usage, disk_usage = read_system_stats()\n\n# Update card's data\ncard.data[-1] = [cpu_percent, mem_usage, disk_usage]\n\n# Save the page\npage.save()\n")),Object(i.b)("p",null,"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."))}l.isMDXComponent=!0},290:function(e,t,a){"use strict";a.d(t,"a",(function(){return u})),a.d(t,"b",(function(){return b}));var n=a(0),r=a.n(n);function i(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(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 s(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?o(Object(a),!0).forEach((function(t){i(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function c(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=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<i;p++)o[p]=a[p];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,a)}m.displayName="MDXCreateElement"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[211],{264:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return o})),a.d(t,"metadata",(function(){return s})),a.d(t,"rightToc",(function(){return c})),a.d(t,"default",(function(){return l}));var n=a(2),r=a(6),i=(a(0),a(292)),o={title:"Wave Scripts"},s={unversionedId:"scripts",id:"scripts",isDocsHomePage:!1,title:"Wave Scripts",description:"A Wave script is the simplest way to publish content in Q, especially live web content:",source:"@site/docs/scripts.md",slug:"/scripts",permalink:"/wave/docs/scripts",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/scripts.md",version:"current",sidebar:"someSidebar",previous:{title:"Architecture",permalink:"/wave/docs/architecture"},next:{title:"Wave Apps",permalink:"/wave/docs/apps"}},c=[],p={rightToc:c};function l(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(n.a)({},p,a,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"A Wave script is the simplest way to publish content in Q, especially live web content:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Dashboards and visualizations for live monitoring."),Object(i.b)("li",{parentName:"ul"},"Live information displays: news, tickers, health, or performance data.")),Object(i.b)("p",null,"A Wave script is one kind of program you can author to interact with Q. The other kind is a ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/apps"}),"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."),Object(i.b)("p",null,"Here is the skeleton of a Wave script (",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/tutorial-hello"}),"example"),"):"),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\n# Grab a reference to a page\npage = site['/foo']\n\n# Modify the page\npage['qux'] = ui.some_card()\n\n# Save the page\npage.save()\n")),Object(i.b)("p",null,"Here is the skeleton of a Wave script that continuously updates a page (",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/tutorial-monitor"}),"example"),"):"),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"import time\nfrom h2o_wave import site, ui\n\n# Grab a reference to a page\npage = site['/foo']\n\n# Grab a reference to a card on the page\ncard = page['qux']\n\n# Update the page with stats every second\nwhile True:\n    # Read data from somewhere\n    cpu_percent, mem_usage, disk_usage = read_system_stats()\n\n    # Update card's data\n    card.data[-1] = [cpu_percent, mem_usage, disk_usage]\n    \n    # Save the page\n    page.save()\n    \n    # Wait a second\n    time.sleep(1)\n")),Object(i.b)("p",null,"To update pages at a much lower frequency (say, minutes, hours, days), use a scheduler like ",Object(i.b)("a",Object(n.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Cron"}),"cron")," along with a simpler Wave script:"),Object(i.b)("pre",null,Object(i.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:"{10-17}","{10-17}":!0}),"import time\nfrom h2o_wave import site, ui\n\n# Grab a reference to a page\npage = site['/foo']\n\n# Grab a reference to a card on the page\ncard = page['qux']\n\n# Read data from somewhere\ncpu_percent, mem_usage, disk_usage = read_system_stats()\n\n# Update card's data\ncard.data[-1] = [cpu_percent, mem_usage, disk_usage]\n\n# Save the page\npage.save()\n")),Object(i.b)("p",null,"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."))}l.isMDXComponent=!0},292:function(e,t,a){"use strict";a.d(t,"a",(function(){return u})),a.d(t,"b",(function(){return b}));var n=a(0),r=a.n(n);function i(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(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 s(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?o(Object(a),!0).forEach((function(t){i(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function c(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=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<i;p++)o[p]=a[p];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,a)}m.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/e8c1c6e8.de38f0bd.js b/docs/e8c1c6e8.5a21f0e6.js
similarity index 98%
rename from docs/e8c1c6e8.de38f0bd.js
rename to docs/e8c1c6e8.5a21f0e6.js
index 8746de9ac9..35298c63fd 100644
--- a/docs/e8c1c6e8.de38f0bd.js
+++ b/docs/e8c1c6e8.5a21f0e6.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[210],{263:function(e,a,t){"use strict";t.r(a),t.d(a,"frontMatter",(function(){return i})),t.d(a,"metadata",(function(){return o})),t.d(a,"rightToc",(function(){return p})),t.d(a,"default",(function(){return c}));var l=t(2),n=t(6),r=(t(0),t(290)),i={title:"Plots"},o={unversionedId:"plotting",id:"plotting",isDocsHomePage:!1,title:"Plots",description:"Wave provides a versatile plotting API based on Leland Wilkinson's Grammar of Graphics.",source:"@site/docs/plotting.md",slug:"/plotting",permalink:"/wave/docs/plotting",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/plotting.md",version:"current",sidebar:"someSidebar",previous:{title:"Files",permalink:"/wave/docs/files"},next:{title:"Graphics",permalink:"/wave/docs/graphics"}},p=[{value:"Point",id:"point",children:[]},{value:"Interval",id:"interval",children:[{value:"Columns",id:"columns",children:[]},{value:"Bars",id:"bars",children:[]}]},{value:"Line",id:"line",children:[]},{value:"Path",id:"path",children:[]},{value:"Area",id:"area",children:[]},{value:"Area + Line",id:"area--line",children:[]},{value:"Polygon",id:"polygon",children:[]},{value:"Schema",id:"schema",children:[]},{value:"Other",id:"other",children:[]}],b={rightToc:p};function c(e){var a=e.components,t=Object(n.a)(e,["components"]);return Object(r.b)("wrapper",Object(l.a)({},b,t,{components:a,mdxType:"MDXLayout"}),Object(r.b)("p",null,"Wave provides a versatile plotting API based on ",Object(r.b)("a",Object(l.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Leland_Wilkinson"}),"Leland Wilkinson's")," ",Object(r.b)("a",Object(l.a)({parentName:"p"},{href:"http://www.springer.com/gp/book/9780387245447"}),"Grammar of Graphics"),"."),Object(r.b)("p",null,"A ",Object(r.b)("em",{parentName:"p"},"plot")," is a layered graphic, created using ",Object(r.b)("inlineCode",{parentName:"p"},"ui.plot()"),". Each layer displays ",Object(r.b)("em",{parentName:"p"},"marks"),", described by ",Object(r.b)("inlineCode",{parentName:"p"},"ui.mark()"),". The layers are rendered on top of each other to produce the final plot."),Object(r.b)("p",null,Object(r.b)("inlineCode",{parentName:"p"},"ui.mark()")," describes a collection of marks, not one mark. Since each ",Object(r.b)("inlineCode",{parentName:"p"},"ui.mark()")," describes one layer in the plot, it follows that all the marks on a layer are of the same ",Object(r.b)("inlineCode",{parentName:"p"},"type")," (its ",Object(r.b)("em",{parentName:"p"},"geometry"),"). A mark's ",Object(r.b)("inlineCode",{parentName:"p"},"type")," can be one of ",Object(r.b)("inlineCode",{parentName:"p"},"point"),", ",Object(r.b)("inlineCode",{parentName:"p"},"interval"),", ",Object(r.b)("inlineCode",{parentName:"p"},"line"),", ",Object(r.b)("inlineCode",{parentName:"p"},"path"),", ",Object(r.b)("inlineCode",{parentName:"p"},"area"),", ",Object(r.b)("inlineCode",{parentName:"p"},"polygon"),", ",Object(r.b)("inlineCode",{parentName:"p"},"schema"),", ",Object(r.b)("inlineCode",{parentName:"p"},"edge"),"."),Object(r.b)("p",null,"There are two ways to add plots to a page:"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"Use a plot card (",Object(r.b)("inlineCode",{parentName:"li"},"ui.plot_card()"),") and set its ",Object(r.b)("inlineCode",{parentName:"li"},"plot")," attribute using ",Object(r.b)("inlineCode",{parentName:"li"},"ui.plot()"),"."),Object(r.b)("li",{parentName:"ul"},"Use a form card (",Object(r.b)("inlineCode",{parentName:"li"},"ui.form_card()"),"), insert a visualization (",Object(r.b)("inlineCode",{parentName:"li"},"ui.visualization()"),") and set its ",Object(r.b)("inlineCode",{parentName:"li"},"plot")," attribute using ",Object(r.b)("inlineCode",{parentName:"li"},"ui.plot()"),".")),Object(r.b)("p",null,"Here's a short example that renders a scatterplot of random values between ","[0, 1]","."),Object(r.b)("pre",null,Object(r.b)("code",Object(l.a)({parentName:"pre"},{className:"language-py"}),"import random\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Point',\n    data=data('price performance', 50, rows=[(random.random(), random.random()) for _ in range(50)]),\n    plot=ui.plot([\n        ui.mark(type='point', x='=price', y='=performance')\n    ])\n))\npage.save()\n")),Object(r.b)("p",null,Object(r.b)("inlineCode",{parentName:"p"},"ui.plot()")," accepts a list of marks. ",Object(r.b)("a",Object(l.a)({parentName:"p"},{href:"examples/plot-point-annotation"}),"This example")," renders annotations on top of a scatterplot, like this:"),Object(r.b)("pre",null,Object(r.b)("code",Object(l.a)({parentName:"pre"},{className:"language-py"}),"ui.plot([\n    ui.mark(type='point', x='=price', y='=performance', x_min=0, x_max=100, y_min=0, y_max=100),  # the plot\n    ui.mark(x=50, y=50, label='point'),\n    ui.mark(x=40, label='vertical line'),\n    ui.mark(y=40, label='horizontal line'),\n    ui.mark(x=70, x0=60, label='vertical region'),\n    ui.mark(y=70, y0=60, label='horizontal region'),\n    ui.mark(x=30, x0=20, y=30, y0=20, label='rectangular region')\n])\n")),Object(r.b)("h2",{id:"point"},"Point"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-point"}),"Basic"),": Make a scatterplot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-point-shapes"}),"Shapes"),": Make a scatterplot with categories encoded as mark shapes."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-point-sizes"}),"Sizes"),': Make a scatterplot with mark sizes mapped to a continuous variable (a "bubble plot").'),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-point-map"}),"Map"),": Make a plot to compare quantities across categories. Similar to a heatmap, but using size-encoding instead of color-encoding."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-point-groups"}),"Groups"),": Make a scatterplot with categories encoded as colors."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-point-annotation"}),"Annotation"),": Add annotations (points, lines and regions) to a plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-point-custom"}),"Custom"),": Customize a plot's fill/stroke color, size and opacity.")),Object(r.b)("h2",{id:"interval"},"Interval"),Object(r.b)("h3",{id:"columns"},"Columns"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval"}),"Basic"),": Make a column plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-groups"}),"Groups"),": Make a grouped column plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-range"}),"Range"),": Make a column plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-labels"}),"Labels"),": Make a column plot with labels on each bar."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-stacked"}),"Stacked"),": Make a stacked column plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-stacked-grouped"}),"Stacked, Grouped"),": Make a column plot with both stacked and grouped bars."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-annotation"}),"Annotation"),": Add annotations to a column plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-theta"}),"Theta"),': Make a "racetrack" plot (a column plot in polar coordinates).')),Object(r.b)("h3",{id:"bars"},"Bars"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-transpose"}),"Basic"),": Make a bar plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-groups-transpose"}),"Groups"),": Make a grouped bar plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-range-transpose"}),"Range"),": Make a bar plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-stacked-transpose"}),"Stacked"),": Make a stacked bar plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-stacked-grouped-transpose"}),"Stacked, Grouped"),": Make a bar plot with both stacked and grouped bars."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-annotation-transpose"}),"Annotation"),": Add annotations to a bar plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-polar"}),"Polar"),": Make a rose plot (a bar plot in polar coordinates)."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-polar-stacked"}),"Polar, Stacked"),": Make a stacked rose plot (a stacked bar plot in polar coordinates)."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-helix"}),"Helix"),": Make a bar plot in helical coordinates.")),Object(r.b)("h2",{id:"line"},"Line"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-line"}),"Basic"),": Make a line plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-line-groups"}),"Groups"),": Make a multi-series line plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-line-smooth"}),"Smooth"),": Make a line plot using a smooth curve."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-step"}),"Step"),": Make a line plot with a step curve."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-step-after"}),"Step, After"),": Make a line plot with a step-after curve."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-step-before"}),"Step, Before"),": Make a line plot with a step-before curve."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-line-labels"}),"Labels"),": Add labels to a line plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-line-labels-stroked"}),"Labels, Stroked"),": Customize label rendering: add a subtle outline to labels to improve readability."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-line-labels-no-overlap"}),"Labels, Occlusion"),": Make a line plot with non-overlapping labels."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-line-annotation"}),"Annotation"),": Add annotations to a line plot.")),Object(r.b)("h2",{id:"path"},"Path"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-path"}),"Basic"),": Make a path plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-path-point"}),"Point"),": Make a path plot with an additional layer of points."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-path-smooth"}),"Smooth"),": Make a path plot with a smooth curve.")),Object(r.b)("h2",{id:"area"},"Area"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-area"}),"Basic"),": Make an area plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-area-groups"}),"Groups"),": Make an area plot showing multiple categories."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-area-negative"}),"Negative"),": Make an area plot showing positive and negative values."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-area-range"}),"Range"),": Make an area plot representing a range (band) of values."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-area-smooth"}),"Smooth"),": Make an area plot with a smooth curve."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-area-stacked"}),"Stacked"),": Make a stacked area plot.")),Object(r.b)("h2",{id:"area--line"},"Area + Line"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-area-line"}),"Area + Line"),": Make an area plot with an additional line layer on top."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-area-line-smooth"}),"Area + Smooth"),": Make a combined area + line plot using a smooth curve."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-area-line-groups"}),"Area + Groups"),": Make an combined area + line plot showing multiple categories.")),Object(r.b)("h2",{id:"polygon"},"Polygon"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-polygon"}),"Basic"),": Make a heatmap.")),Object(r.b)("h2",{id:"schema"},"Schema"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-histogram"}),"Histogram"),": Make a histogram.")),Object(r.b)("h2",{id:"other"},"Other"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-axis-title"}),"Axis Titles"),": Display custom axis titles on a plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-form"}),"Form"),": Display a plot inside a form.")))}c.isMDXComponent=!0},290:function(e,a,t){"use strict";t.d(a,"a",(function(){return s})),t.d(a,"b",(function(){return O}));var l=t(0),n=t.n(l);function r(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function i(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);a&&(l=l.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),t.push.apply(t,l)}return t}function o(e){for(var a=1;a<arguments.length;a++){var t=null!=arguments[a]?arguments[a]:{};a%2?i(Object(t),!0).forEach((function(a){r(e,a,t[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(t,a))}))}return e}function p(e,a){if(null==e)return{};var t,l,n=function(e,a){if(null==e)return{};var t,l,n={},r=Object.keys(e);for(l=0;l<r.length;l++)t=r[l],a.indexOf(t)>=0||(n[t]=e[t]);return n}(e,a);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(l=0;l<r.length;l++)t=r[l],a.indexOf(t)>=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<r;b++)i[b]=t[b];return n.a.createElement.apply(null,i)}return n.a.createElement.apply(null,t)}u.displayName="MDXCreateElement"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[212],{265:function(e,a,t){"use strict";t.r(a),t.d(a,"frontMatter",(function(){return i})),t.d(a,"metadata",(function(){return o})),t.d(a,"rightToc",(function(){return p})),t.d(a,"default",(function(){return c}));var l=t(2),n=t(6),r=(t(0),t(292)),i={title:"Plots"},o={unversionedId:"plotting",id:"plotting",isDocsHomePage:!1,title:"Plots",description:"Wave provides a versatile plotting API based on Leland Wilkinson's Grammar of Graphics.",source:"@site/docs/plotting.md",slug:"/plotting",permalink:"/wave/docs/plotting",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/plotting.md",version:"current",sidebar:"someSidebar",previous:{title:"Files",permalink:"/wave/docs/files"},next:{title:"Graphics",permalink:"/wave/docs/graphics"}},p=[{value:"Point",id:"point",children:[]},{value:"Interval",id:"interval",children:[{value:"Columns",id:"columns",children:[]},{value:"Bars",id:"bars",children:[]}]},{value:"Line",id:"line",children:[]},{value:"Path",id:"path",children:[]},{value:"Area",id:"area",children:[]},{value:"Area + Line",id:"area--line",children:[]},{value:"Polygon",id:"polygon",children:[]},{value:"Schema",id:"schema",children:[]},{value:"Other",id:"other",children:[]}],b={rightToc:p};function c(e){var a=e.components,t=Object(n.a)(e,["components"]);return Object(r.b)("wrapper",Object(l.a)({},b,t,{components:a,mdxType:"MDXLayout"}),Object(r.b)("p",null,"Wave provides a versatile plotting API based on ",Object(r.b)("a",Object(l.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/Leland_Wilkinson"}),"Leland Wilkinson's")," ",Object(r.b)("a",Object(l.a)({parentName:"p"},{href:"http://www.springer.com/gp/book/9780387245447"}),"Grammar of Graphics"),"."),Object(r.b)("p",null,"A ",Object(r.b)("em",{parentName:"p"},"plot")," is a layered graphic, created using ",Object(r.b)("inlineCode",{parentName:"p"},"ui.plot()"),". Each layer displays ",Object(r.b)("em",{parentName:"p"},"marks"),", described by ",Object(r.b)("inlineCode",{parentName:"p"},"ui.mark()"),". The layers are rendered on top of each other to produce the final plot."),Object(r.b)("p",null,Object(r.b)("inlineCode",{parentName:"p"},"ui.mark()")," describes a collection of marks, not one mark. Since each ",Object(r.b)("inlineCode",{parentName:"p"},"ui.mark()")," describes one layer in the plot, it follows that all the marks on a layer are of the same ",Object(r.b)("inlineCode",{parentName:"p"},"type")," (its ",Object(r.b)("em",{parentName:"p"},"geometry"),"). A mark's ",Object(r.b)("inlineCode",{parentName:"p"},"type")," can be one of ",Object(r.b)("inlineCode",{parentName:"p"},"point"),", ",Object(r.b)("inlineCode",{parentName:"p"},"interval"),", ",Object(r.b)("inlineCode",{parentName:"p"},"line"),", ",Object(r.b)("inlineCode",{parentName:"p"},"path"),", ",Object(r.b)("inlineCode",{parentName:"p"},"area"),", ",Object(r.b)("inlineCode",{parentName:"p"},"polygon"),", ",Object(r.b)("inlineCode",{parentName:"p"},"schema"),", ",Object(r.b)("inlineCode",{parentName:"p"},"edge"),"."),Object(r.b)("p",null,"There are two ways to add plots to a page:"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"Use a plot card (",Object(r.b)("inlineCode",{parentName:"li"},"ui.plot_card()"),") and set its ",Object(r.b)("inlineCode",{parentName:"li"},"plot")," attribute using ",Object(r.b)("inlineCode",{parentName:"li"},"ui.plot()"),"."),Object(r.b)("li",{parentName:"ul"},"Use a form card (",Object(r.b)("inlineCode",{parentName:"li"},"ui.form_card()"),"), insert a visualization (",Object(r.b)("inlineCode",{parentName:"li"},"ui.visualization()"),") and set its ",Object(r.b)("inlineCode",{parentName:"li"},"plot")," attribute using ",Object(r.b)("inlineCode",{parentName:"li"},"ui.plot()"),".")),Object(r.b)("p",null,"Here's a short example that renders a scatterplot of random values between ","[0, 1]","."),Object(r.b)("pre",null,Object(r.b)("code",Object(l.a)({parentName:"pre"},{className:"language-py"}),"import random\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Point',\n    data=data('price performance', 50, rows=[(random.random(), random.random()) for _ in range(50)]),\n    plot=ui.plot([\n        ui.mark(type='point', x='=price', y='=performance')\n    ])\n))\npage.save()\n")),Object(r.b)("p",null,Object(r.b)("inlineCode",{parentName:"p"},"ui.plot()")," accepts a list of marks. ",Object(r.b)("a",Object(l.a)({parentName:"p"},{href:"examples/plot-point-annotation"}),"This example")," renders annotations on top of a scatterplot, like this:"),Object(r.b)("pre",null,Object(r.b)("code",Object(l.a)({parentName:"pre"},{className:"language-py"}),"ui.plot([\n    ui.mark(type='point', x='=price', y='=performance', x_min=0, x_max=100, y_min=0, y_max=100),  # the plot\n    ui.mark(x=50, y=50, label='point'),\n    ui.mark(x=40, label='vertical line'),\n    ui.mark(y=40, label='horizontal line'),\n    ui.mark(x=70, x0=60, label='vertical region'),\n    ui.mark(y=70, y0=60, label='horizontal region'),\n    ui.mark(x=30, x0=20, y=30, y0=20, label='rectangular region')\n])\n")),Object(r.b)("h2",{id:"point"},"Point"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-point"}),"Basic"),": Make a scatterplot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-point-shapes"}),"Shapes"),": Make a scatterplot with categories encoded as mark shapes."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-point-sizes"}),"Sizes"),': Make a scatterplot with mark sizes mapped to a continuous variable (a "bubble plot").'),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-point-map"}),"Map"),": Make a plot to compare quantities across categories. Similar to a heatmap, but using size-encoding instead of color-encoding."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-point-groups"}),"Groups"),": Make a scatterplot with categories encoded as colors."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-point-annotation"}),"Annotation"),": Add annotations (points, lines and regions) to a plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-point-custom"}),"Custom"),": Customize a plot's fill/stroke color, size and opacity.")),Object(r.b)("h2",{id:"interval"},"Interval"),Object(r.b)("h3",{id:"columns"},"Columns"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval"}),"Basic"),": Make a column plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-groups"}),"Groups"),": Make a grouped column plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-range"}),"Range"),": Make a column plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-labels"}),"Labels"),": Make a column plot with labels on each bar."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-stacked"}),"Stacked"),": Make a stacked column plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-stacked-grouped"}),"Stacked, Grouped"),": Make a column plot with both stacked and grouped bars."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-annotation"}),"Annotation"),": Add annotations to a column plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-theta"}),"Theta"),': Make a "racetrack" plot (a column plot in polar coordinates).')),Object(r.b)("h3",{id:"bars"},"Bars"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-transpose"}),"Basic"),": Make a bar plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-groups-transpose"}),"Groups"),": Make a grouped bar plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-range-transpose"}),"Range"),": Make a bar plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-stacked-transpose"}),"Stacked"),": Make a stacked bar plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-stacked-grouped-transpose"}),"Stacked, Grouped"),": Make a bar plot with both stacked and grouped bars."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-annotation-transpose"}),"Annotation"),": Add annotations to a bar plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-polar"}),"Polar"),": Make a rose plot (a bar plot in polar coordinates)."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-polar-stacked"}),"Polar, Stacked"),": Make a stacked rose plot (a stacked bar plot in polar coordinates)."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-interval-helix"}),"Helix"),": Make a bar plot in helical coordinates.")),Object(r.b)("h2",{id:"line"},"Line"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-line"}),"Basic"),": Make a line plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-line-groups"}),"Groups"),": Make a multi-series line plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-line-smooth"}),"Smooth"),": Make a line plot using a smooth curve."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-step"}),"Step"),": Make a line plot with a step curve."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-step-after"}),"Step, After"),": Make a line plot with a step-after curve."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-step-before"}),"Step, Before"),": Make a line plot with a step-before curve."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-line-labels"}),"Labels"),": Add labels to a line plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-line-labels-stroked"}),"Labels, Stroked"),": Customize label rendering: add a subtle outline to labels to improve readability."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-line-labels-no-overlap"}),"Labels, Occlusion"),": Make a line plot with non-overlapping labels."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-line-annotation"}),"Annotation"),": Add annotations to a line plot.")),Object(r.b)("h2",{id:"path"},"Path"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-path"}),"Basic"),": Make a path plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-path-point"}),"Point"),": Make a path plot with an additional layer of points."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-path-smooth"}),"Smooth"),": Make a path plot with a smooth curve.")),Object(r.b)("h2",{id:"area"},"Area"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-area"}),"Basic"),": Make an area plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-area-groups"}),"Groups"),": Make an area plot showing multiple categories."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-area-negative"}),"Negative"),": Make an area plot showing positive and negative values."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-area-range"}),"Range"),": Make an area plot representing a range (band) of values."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-area-smooth"}),"Smooth"),": Make an area plot with a smooth curve."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-area-stacked"}),"Stacked"),": Make a stacked area plot.")),Object(r.b)("h2",{id:"area--line"},"Area + Line"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-area-line"}),"Area + Line"),": Make an area plot with an additional line layer on top."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-area-line-smooth"}),"Area + Smooth"),": Make a combined area + line plot using a smooth curve."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-area-line-groups"}),"Area + Groups"),": Make an combined area + line plot showing multiple categories.")),Object(r.b)("h2",{id:"polygon"},"Polygon"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-polygon"}),"Basic"),": Make a heatmap.")),Object(r.b)("h2",{id:"schema"},"Schema"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-histogram"}),"Histogram"),": Make a histogram.")),Object(r.b)("h2",{id:"other"},"Other"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-axis-title"}),"Axis Titles"),": Display custom axis titles on a plot."),Object(r.b)("li",{parentName:"ul"},Object(r.b)("a",Object(l.a)({parentName:"li"},{href:"examples/plot-form"}),"Form"),": Display a plot inside a form.")))}c.isMDXComponent=!0},292:function(e,a,t){"use strict";t.d(a,"a",(function(){return s})),t.d(a,"b",(function(){return O}));var l=t(0),n=t.n(l);function r(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function i(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);a&&(l=l.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),t.push.apply(t,l)}return t}function o(e){for(var a=1;a<arguments.length;a++){var t=null!=arguments[a]?arguments[a]:{};a%2?i(Object(t),!0).forEach((function(a){r(e,a,t[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(t,a))}))}return e}function p(e,a){if(null==e)return{};var t,l,n=function(e,a){if(null==e)return{};var t,l,n={},r=Object.keys(e);for(l=0;l<r.length;l++)t=r[l],a.indexOf(t)>=0||(n[t]=e[t]);return n}(e,a);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(l=0;l<r.length;l++)t=r[l],a.indexOf(t)>=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<r;b++)i[b]=t[b];return n.a.createElement.apply(null,i)}return n.a.createElement.apply(null,t)}u.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/e96704c5.29ba907a.js b/docs/e96704c5.57ed2674.js
similarity index 92%
rename from docs/e96704c5.29ba907a.js
rename to docs/e96704c5.57ed2674.js
index 56f8258b97..1f42178fc8 100644
--- a/docs/e96704c5.29ba907a.js
+++ b/docs/e96704c5.57ed2674.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[211],{264: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 c})),n.d(t,"default",(function(){return u}));var r=n(2),a=n(6),o=(n(0),n(290)),i={title:"Plot / Interval / Helix"},l={unversionedId:"examples/plot-interval-helix",id:"examples/plot-interval-helix",isDocsHomePage:!1,title:"Plot / Interval / Helix",description:"Make a bar plot in helical coordinates.",source:"@site/docs/examples/plot-interval-helix.md",slug:"/examples/plot-interval-helix",permalink:"/wave/docs/examples/plot-interval-helix",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-helix.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Theta",permalink:"/wave/docs/examples/plot-interval-theta"},next:{title:"Plot / Interval / Annotation",permalink:"/wave/docs/examples/plot-interval-annotation"}},c=[],p={rightToc:c};function u(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a bar plot in helical coordinates."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(447).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 200\nf = FakeCategoricalSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Interval, helix',\n    data=data('product price', n),\n    plot=ui.plot([ui.mark(coord='helix', type='interval', x='=product', y='=price', y_min=0)])\n))\nv.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}u.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),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 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},447:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-interval-helix-b499f18c451e87aa39d64ca154a15bdf.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[213],{266: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 c})),n.d(t,"default",(function(){return u}));var r=n(2),a=n(6),o=(n(0),n(292)),i={title:"Plot / Interval / Helix"},l={unversionedId:"examples/plot-interval-helix",id:"examples/plot-interval-helix",isDocsHomePage:!1,title:"Plot / Interval / Helix",description:"Make a bar plot in helical coordinates.",source:"@site/docs/examples/plot-interval-helix.md",slug:"/examples/plot-interval-helix",permalink:"/wave/docs/examples/plot-interval-helix",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-helix.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Theta",permalink:"/wave/docs/examples/plot-interval-theta"},next:{title:"Plot / Interval / Annotation",permalink:"/wave/docs/examples/plot-interval-annotation"}},c=[],p={rightToc:c};function u(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a bar plot in helical coordinates."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(452).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 200\nf = FakeCategoricalSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Interval, helix',\n    data=data('product price', n),\n    plot=ui.plot([ui.mark(coord='helix', type='interval', x='=product', y='=price', y_min=0)])\n))\nv.data = [(c, x) for c, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}u.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return s})),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 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},452:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-interval-helix-b499f18c451e87aa39d64ca154a15bdf.png"}}]);
\ No newline at end of file
diff --git a/docs/eb2bb38c.c8e1e264.js b/docs/eb2bb38c.3448601c.js
similarity index 97%
rename from docs/eb2bb38c.c8e1e264.js
rename to docs/eb2bb38c.3448601c.js
index abb20a6835..8cce851854 100644
--- a/docs/eb2bb38c.c8e1e264.js
+++ b/docs/eb2bb38c.3448601c.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[212],{265:function(A,e,t){"use strict";t.r(e),t.d(e,"frontMatter",(function(){return a})),t.d(e,"metadata",(function(){return f})),t.d(e,"rightToc",(function(){return i})),t.d(e,"default",(function(){return u}));var n=t(2),r=t(6),o=(t(0),t(290)),a={title:"Plot / Histogram"},f={unversionedId:"examples/plot-histogram",id:"examples/plot-histogram",isDocsHomePage:!1,title:"Plot / Histogram",description:"Make a histogram.",source:"@site/docs/examples/plot-histogram.md",slug:"/examples/plot-histogram",permalink:"/wave/docs/examples/plot-histogram",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-histogram.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Polygon",permalink:"/wave/docs/examples/plot-polygon"},next:{title:"Plot / Axis Titles",permalink:"/wave/docs/examples/plot-axis-title"}},i=[],c={rightToc:i};function u(A){var e=A.components,a=Object(r.a)(A,["components"]);return Object(o.b)("wrapper",Object(n.a)({},c,a,{components:e,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a histogram."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(455).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 10\nf = FakeCategoricalSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Histogram',\n    data=data('lo hi price', n),\n    plot=ui.plot([ui.mark(type='interval', y='=price', x1='=lo', x2='=hi', y_min=0)])\n))\nv.data = [(i * 10, i * 10 + 10, x) for i, (c, x, dx) in enumerate([f.next() for _ in range(n)])]\n\npage.save()\n")))}u.isMDXComponent=!0},290:function(A,e,t){"use strict";t.d(e,"a",(function(){return g})),t.d(e,"b",(function(){return b}));var n=t(0),r=t.n(n);function o(A,e,t){return e in A?Object.defineProperty(A,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):A[e]=t,A}function a(A,e){var t=Object.keys(A);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(A);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(A,e).enumerable}))),t.push.apply(t,n)}return t}function f(A){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?a(Object(t),!0).forEach((function(e){o(A,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(A,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(e){Object.defineProperty(A,e,Object.getOwnPropertyDescriptor(t,e))}))}return A}function i(A,e){if(null==A)return{};var t,n,r=function(A,e){if(null==A)return{};var t,n,r={},o=Object.keys(A);for(n=0;n<o.length;n++)t=o[n],e.indexOf(t)>=0||(r[t]=A[t]);return r}(A,e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(A);for(n=0;n<o.length;n++)t=o[n],e.indexOf(t)>=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<o;c++)a[c]=t[c];return r.a.createElement.apply(null,a)}return r.a.createElement.apply(null,t)}w.displayName="MDXCreateElement"},455:function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[214],{267:function(A,e,t){"use strict";t.r(e),t.d(e,"frontMatter",(function(){return a})),t.d(e,"metadata",(function(){return f})),t.d(e,"rightToc",(function(){return i})),t.d(e,"default",(function(){return u}));var n=t(2),r=t(6),o=(t(0),t(292)),a={title:"Plot / Histogram"},f={unversionedId:"examples/plot-histogram",id:"examples/plot-histogram",isDocsHomePage:!1,title:"Plot / Histogram",description:"Make a histogram.",source:"@site/docs/examples/plot-histogram.md",slug:"/examples/plot-histogram",permalink:"/wave/docs/examples/plot-histogram",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-histogram.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Polygon",permalink:"/wave/docs/examples/plot-polygon"},next:{title:"Plot / Axis Titles",permalink:"/wave/docs/examples/plot-axis-title"}},i=[],c={rightToc:i};function u(A){var e=A.components,a=Object(r.a)(A,["components"]);return Object(o.b)("wrapper",Object(n.a)({},c,a,{components:e,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a histogram."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+t(460).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeCategoricalSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 10\nf = FakeCategoricalSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Histogram',\n    data=data('lo hi price', n),\n    plot=ui.plot([ui.mark(type='interval', y='=price', x1='=lo', x2='=hi', y_min=0)])\n))\nv.data = [(i * 10, i * 10 + 10, x) for i, (c, x, dx) in enumerate([f.next() for _ in range(n)])]\n\npage.save()\n")))}u.isMDXComponent=!0},292:function(A,e,t){"use strict";t.d(e,"a",(function(){return g})),t.d(e,"b",(function(){return b}));var n=t(0),r=t.n(n);function o(A,e,t){return e in A?Object.defineProperty(A,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):A[e]=t,A}function a(A,e){var t=Object.keys(A);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(A);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(A,e).enumerable}))),t.push.apply(t,n)}return t}function f(A){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?a(Object(t),!0).forEach((function(e){o(A,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(A,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(e){Object.defineProperty(A,e,Object.getOwnPropertyDescriptor(t,e))}))}return A}function i(A,e){if(null==A)return{};var t,n,r=function(A,e){if(null==A)return{};var t,n,r={},o=Object.keys(A);for(n=0;n<o.length;n++)t=o[n],e.indexOf(t)>=0||(r[t]=A[t]);return r}(A,e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(A);for(n=0;n<o.length;n++)t=o[n],e.indexOf(t)>=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<o;c++)a[c]=t[c];return r.a.createElement.apply(null,a)}return r.a.createElement.apply(null,t)}w.displayName="MDXCreateElement"},460:function(A,e,t){"use strict";t.r(e),e.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/ecdac497.8252c18f.js b/docs/ecdac497.e79d40df.js
similarity index 97%
rename from docs/ecdac497.8252c18f.js
rename to docs/ecdac497.e79d40df.js
index 1b372c0eba..beb261f1de 100644
--- a/docs/ecdac497.8252c18f.js
+++ b/docs/ecdac497.e79d40df.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[213],{266:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return i})),t.d(n,"metadata",(function(){return o})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return p}));var r=t(2),a=t(6),c=(t(0),t(290)),i={title:"Form / Link"},o={unversionedId:"examples/link",id:"examples/link",isDocsHomePage:!1,title:"Form / Link",description:"Use links to allow navigation to internal and external URLs.",source:"@site/docs/examples/link.md",slug:"/examples/link",permalink:"/wave/docs/examples/link",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/link.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Label",permalink:"/wave/docs/examples/label"},next:{title:"Form / Progress",permalink:"/wave/docs/examples/progress"}},l=[],s={rightToc:l};function p(e){var n=e.components,i=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(r.a)({},s,i,{components:n,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Use links to allow navigation to internal and external URLs."),Object(c.b)("div",{className:"cover",style:{backgroundImage:"url("+t(425).default+")"}}),Object(c.b)("pre",null,Object(c.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from 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.link(label='Internal link', path='/starred'),\n        ui.link(label='Internal link, disabled', path='/starred', disabled=True),\n        ui.link(label='External link', path='https://h2o.ai'),\n        ui.link(label='External link, disabled', path='https://h2o.ai', disabled=True),\n    ]\n)\npage.save()\n")))}p.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return u})),t.d(n,"b",(function(){return m}));var r=t(0),a=t.n(r);function c(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 o(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){c(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},c=Object.keys(e);for(r=0;r<c.length;r++)t=c[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r<c.length;r++)t=c[r],n.indexOf(t)>=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<c;s++)i[s]=t[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}d.displayName="MDXCreateElement"},425:function(e,n,t){"use strict";t.r(n),n.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[215],{268:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return i})),t.d(n,"metadata",(function(){return o})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return p}));var r=t(2),a=t(6),c=(t(0),t(292)),i={title:"Form / Link"},o={unversionedId:"examples/link",id:"examples/link",isDocsHomePage:!1,title:"Form / Link",description:"Use links to allow navigation to internal and external URLs.",source:"@site/docs/examples/link.md",slug:"/examples/link",permalink:"/wave/docs/examples/link",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/link.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Label",permalink:"/wave/docs/examples/label"},next:{title:"Form / Progress",permalink:"/wave/docs/examples/progress"}},l=[],s={rightToc:l};function p(e){var n=e.components,i=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(r.a)({},s,i,{components:n,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Use links to allow navigation to internal and external URLs."),Object(c.b)("div",{className:"cover",style:{backgroundImage:"url("+t(430).default+")"}}),Object(c.b)("pre",null,Object(c.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from 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.link(label='Internal link', path='/starred'),\n        ui.link(label='Internal link, disabled', path='/starred', disabled=True),\n        ui.link(label='External link', path='https://h2o.ai'),\n        ui.link(label='External link, disabled', path='https://h2o.ai', disabled=True),\n    ]\n)\npage.save()\n")))}p.isMDXComponent=!0},292:function(e,n,t){"use strict";t.d(n,"a",(function(){return u})),t.d(n,"b",(function(){return m}));var r=t(0),a=t.n(r);function c(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 o(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){c(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},c=Object.keys(e);for(r=0;r<c.length;r++)t=c[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r<c.length;r++)t=c[r],n.indexOf(t)>=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<c;s++)i[s]=t[s];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}d.displayName="MDXCreateElement"},430:function(e,n,t){"use strict";t.r(n),n.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/ed3db3ec.f478a091.js b/docs/ed3db3ec.c5ffd957.js
similarity index 93%
rename from docs/ed3db3ec.f478a091.js
rename to docs/ed3db3ec.c5ffd957.js
index e6553c2e3b..9a317ba7ca 100644
--- a/docs/ed3db3ec.f478a091.js
+++ b/docs/ed3db3ec.c5ffd957.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[214],{267:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return u}));var r=n(2),o=n(6),a=(n(0),n(290)),i={title:"Plot / Point / Annotation"},p={unversionedId:"examples/plot-point-annotation",id:"examples/plot-point-annotation",isDocsHomePage:!1,title:"Plot / Point / Annotation",description:"Add annotations (points, lines and regions) to a plot.",source:"@site/docs/examples/plot-point-annotation.md",slug:"/examples/plot-point-annotation",permalink:"/wave/docs/examples/plot-point-annotation",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point-annotation.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Point / Groups",permalink:"/wave/docs/examples/plot-point-groups"},next:{title:"Plot / Point / Custom",permalink:"/wave/docs/examples/plot-point-custom"}},l=[],c={rightToc:l};function u(e){var t=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},c,i,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Add annotations (points, lines and regions) to a plot."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(442).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeScatter\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 50\nf = FakeScatter()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Numeric-Numeric',\n    data=data('price performance', n),\n    plot=ui.plot([\n        ui.mark(type='point', x='=price', y='=performance', x_min=0, x_max=100, y_min=0, y_max=100),  # the plot\n        ui.mark(x=50, y=50, label='point'),  # A single reference point\n        ui.mark(x=40, label='vertical line'),\n        ui.mark(y=40, label='horizontal line'),\n        ui.mark(x=70, x0=60, label='vertical region'),\n        ui.mark(y=70, y0=60, label='horizontal region'),\n        ui.mark(x=30, x0=20, y=30, y0=20, label='rectangular region')\n    ])\n))\nv.data = [f.next() for _ in range(n)]\n\npage.save()\n")))}u.isMDXComponent=!0},290: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 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=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<a;c++)i[c]=n[c];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},442:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-point-annotation-394f235e137883e033b2cc056955e713.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[216],{269:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return u}));var r=n(2),o=n(6),a=(n(0),n(292)),i={title:"Plot / Point / Annotation"},p={unversionedId:"examples/plot-point-annotation",id:"examples/plot-point-annotation",isDocsHomePage:!1,title:"Plot / Point / Annotation",description:"Add annotations (points, lines and regions) to a plot.",source:"@site/docs/examples/plot-point-annotation.md",slug:"/examples/plot-point-annotation",permalink:"/wave/docs/examples/plot-point-annotation",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-point-annotation.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Point / Groups",permalink:"/wave/docs/examples/plot-point-groups"},next:{title:"Plot / Point / Custom",permalink:"/wave/docs/examples/plot-point-custom"}},l=[],c={rightToc:l};function u(e){var t=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},c,i,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Add annotations (points, lines and regions) to a plot."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(447).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeScatter\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 50\nf = FakeScatter()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Numeric-Numeric',\n    data=data('price performance', n),\n    plot=ui.plot([\n        ui.mark(type='point', x='=price', y='=performance', x_min=0, x_max=100, y_min=0, y_max=100),  # the plot\n        ui.mark(x=50, y=50, label='point'),  # A single reference point\n        ui.mark(x=40, label='vertical line'),\n        ui.mark(y=40, label='horizontal line'),\n        ui.mark(x=70, x0=60, label='vertical region'),\n        ui.mark(y=70, y0=60, label='horizontal region'),\n        ui.mark(x=30, x0=20, y=30, y0=20, label='rectangular region')\n    ])\n))\nv.data = [f.next() for _ in range(n)]\n\npage.save()\n")))}u.isMDXComponent=!0},292: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 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=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<a;c++)i[c]=n[c];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},447:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-point-annotation-394f235e137883e033b2cc056955e713.png"}}]);
\ No newline at end of file
diff --git a/docs/eec6e613.03039ef9.js b/docs/eec6e613.03039ef9.js
deleted file mode 100644
index f9aac62ebd..0000000000
--- a/docs/eec6e613.03039ef9.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[215],{268:function(e,r,n){"use strict";n.r(r),n.d(r,"frontMatter",(function(){return l})),n.d(r,"metadata",(function(){return o})),n.d(r,"rightToc",(function(){return s})),n.d(r,"default",(function(){return u}));var t=n(2),a=n(6),i=(n(0),n(290)),l={title:"Form / Range Slider"},o={unversionedId:"examples/range-slider",id:"examples/range-slider",isDocsHomePage:!1,title:"Form / Range Slider",description:"Use a range slider to allow users to select a value range (from, to).",source:"@site/docs/examples/range-slider.md",slug:"/examples/range-slider",permalink:"/wave/docs/examples/range-slider",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/range-slider.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Slider",permalink:"/wave/docs/examples/slider"},next:{title:"Form / Date Picker",permalink:"/wave/docs/examples/date-picker"}},s=[],c={rightToc:s};function u(e){var r=e.components,l=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(t.a)({},c,l,{components:r,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Use a range slider to allow users to select a value range (from, to)."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+n(430).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'range_slider={q.args.range_slider}'),\n            ui.text(f'range_slider_step={q.args.range_slider_step}'),\n            ui.text(f'range_slider_disabled={q.args.range_slider_disabled}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.range_slider(name='range_slider', label='Default slider'),\n            ui.range_slider(name='range_slider_step', label='Step slider', min=0, max=1000, step=100, min_value=0, max_value=100),\n            ui.range_slider(name='range_slider_disabled', label='Disabled slider', min=0, max=100, step=10, min_value=0, \n              max_value=70, disabled=True),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}u.isMDXComponent=!0},290:function(e,r,n){"use strict";n.d(r,"a",(function(){return p})),n.d(r,"b",(function(){return f}));var t=n(0),a=n.n(t);function i(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function l(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 o(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?l(Object(n),!0).forEach((function(r){i(e,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))}))}return e}function s(e,r){if(null==e)return{};var n,t,a=function(e,r){if(null==e)return{};var n,t,a={},i=Object.keys(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=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<i;c++)l[c]=n[c];return a.a.createElement.apply(null,l)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},430:function(e,r,n){"use strict";n.r(r),r.default=n.p+"assets/images/range-slider-7394a0b0ebb5aace4e83bb302adc6fc3.png"}}]);
\ No newline at end of file
diff --git a/docs/eec6e613.2511e3b9.js b/docs/eec6e613.2511e3b9.js
new file mode 100644
index 0000000000..bf2d95b9bd
--- /dev/null
+++ b/docs/eec6e613.2511e3b9.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[217],{270:function(e,r,n){"use strict";n.r(r),n.d(r,"frontMatter",(function(){return o})),n.d(r,"metadata",(function(){return l})),n.d(r,"rightToc",(function(){return s})),n.d(r,"default",(function(){return u}));var t=n(2),a=n(6),i=(n(0),n(292)),o={title:"Form / Range Slider"},l={unversionedId:"examples/range-slider",id:"examples/range-slider",isDocsHomePage:!1,title:"Form / Range Slider",description:"Use a range slider to allow users to select a value range (from, to).",source:"@site/docs/examples/range-slider.md",slug:"/examples/range-slider",permalink:"/wave/docs/examples/range-slider",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/range-slider.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Slider",permalink:"/wave/docs/examples/slider"},next:{title:"Form / Date Picker",permalink:"/wave/docs/examples/date-picker"}},s=[],c={rightToc:s};function u(e){var r=e.components,o=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(t.a)({},c,o,{components:r,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Use a range slider to allow users to select a value range (from, to)."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+n(435).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'range_slider={q.args.range_slider}'),\n            ui.text(f'range_slider_step={q.args.range_slider_step}'),\n            ui.text(f'range_slider_disabled={q.args.range_slider_disabled}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.range_slider(name='range_slider', label='Default slider'),\n            ui.range_slider(name='range_slider_step', label='Step slider', min=0, max=1000, step=100, min_value=0,\n                            max_value=100),\n            ui.range_slider(name='range_slider_disabled', label='Disabled slider', min=0, max=100, step=10, min_value=0,\n                            max_value=70, disabled=True),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n")))}u.isMDXComponent=!0},292:function(e,r,n){"use strict";n.d(r,"a",(function(){return p})),n.d(r,"b",(function(){return f}));var t=n(0),a=n.n(t);function i(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 l(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?o(Object(n),!0).forEach((function(r){i(e,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))}))}return e}function s(e,r){if(null==e)return{};var n,t,a=function(e,r){if(null==e)return{};var n,t,a={},i=Object.keys(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=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):l(l({},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,o=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=u(n),m=t,f=p["".concat(o,".").concat(m)]||p[m]||d[m]||i;return n?a.a.createElement(f,l(l({ref:r},c),{},{components:n})):a.a.createElement(f,l({ref:r},c))}));function f(e,r){var n=arguments,t=r&&r.mdxType;if("string"==typeof e||t){var i=n.length,o=new Array(i);o[0]=m;var l={};for(var s in r)hasOwnProperty.call(r,s)&&(l[s]=r[s]);l.originalType=e,l.mdxType="string"==typeof e?e:t,o[1]=l;for(var c=2;c<i;c++)o[c]=n[c];return a.a.createElement.apply(null,o)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},435:function(e,r,n){"use strict";n.r(r),r.default=n.p+"assets/images/range-slider-7394a0b0ebb5aace4e83bb302adc6fc3.png"}}]);
\ No newline at end of file
diff --git a/docs/f09ebdf1.d4463329.js b/docs/f09ebdf1.d4463329.js
deleted file mode 100644
index adf6b3cc67..0000000000
--- a/docs/f09ebdf1.d4463329.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[216],{269:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return a})),n.d(t,"metadata",(function(){return o})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return f}));var r=n(2),i=n(6),c=(n(0),n(290)),a={title:"Meta / Title"},o={unversionedId:"examples/meta-title",id:"examples/meta-title",isDocsHomePage:!1,title:"Meta / Title",description:"Set the browser window title for a page",source:"@site/docs/examples/meta-title.md",slug:"/examples/meta-title",permalink:"/wave/docs/examples/meta-title",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/meta-title.md",version:"current",sidebar:"someSidebar",previous:{title:"Uploads / Download",permalink:"/wave/docs/examples/upload-download"},next:{title:"Meta / Notification",permalink:"/wave/docs/examples/meta-notification"}},l=[],u={rightToc:l};function f(e){var t=e.components,a=Object(i.a)(e,["components"]);return Object(c.b)("wrapper",Object(r.a)({},u,a,{components:t,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Set the browser window title for a page"),Object(c.b)("div",{className:"cover",style:{backgroundImage:"url("+n(461).default+")"}}),Object(c.b)("pre",null,Object(c.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\npage['meta'] = ui.meta_card(box='', title='And now for something completely different!')\n\npage['example'] = ui.markdown_card(\n    box='1 1 2 2',\n    title='',\n    content='<a href=\"/demo\" target=\"_blank\">Open this page in a new window</a> to view its title.',\n)\n\npage.save()\n")))}f.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),i=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 a(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 o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},c=Object.keys(e);for(r=0;r<c.length;r++)n=c[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r<c.length;r++)n=c[r],t.indexOf(n)>=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<c;u++)a[u]=n[u];return i.a.createElement.apply(null,a)}return i.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},461:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/f09ebdf1.fafc5207.js b/docs/f09ebdf1.fafc5207.js
new file mode 100644
index 0000000000..4b07297b16
--- /dev/null
+++ b/docs/f09ebdf1.fafc5207.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[218],{271:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return a})),n.d(t,"metadata",(function(){return o})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return f}));var r=n(2),i=n(6),c=(n(0),n(292)),a={title:"Meta / Title"},o={unversionedId:"examples/meta-title",id:"examples/meta-title",isDocsHomePage:!1,title:"Meta / Title",description:"Set the browser window title for a page",source:"@site/docs/examples/meta-title.md",slug:"/examples/meta-title",permalink:"/wave/docs/examples/meta-title",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/meta-title.md",version:"current",sidebar:"someSidebar",previous:{title:"Uploads / Download",permalink:"/wave/docs/examples/upload-download"},next:{title:"Meta / Icon",permalink:"/wave/docs/examples/meta-icon"}},l=[],u={rightToc:l};function f(e){var t=e.components,a=Object(i.a)(e,["components"]);return Object(c.b)("wrapper",Object(r.a)({},u,a,{components:t,mdxType:"MDXLayout"}),Object(c.b)("p",null,"Set the browser window title for a page"),Object(c.b)("div",{className:"cover",style:{backgroundImage:"url("+n(466).default+")"}}),Object(c.b)("pre",null,Object(c.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\npage = site['/demo']\n\npage['meta'] = ui.meta_card(box='', title='And now for something completely different!')\n\npage['example'] = ui.markdown_card(\n    box='1 1 2 2',\n    title='',\n    content='<a href=\"/demo\" target=\"_blank\">Open this page in a new window</a> to view its title.',\n)\n\npage.save()\n")))}f.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return p})),n.d(t,"b",(function(){return b}));var r=n(0),i=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 a(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 o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},c=Object.keys(e);for(r=0;r<c.length;r++)n=c[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(r=0;r<c.length;r++)n=c[r],t.indexOf(n)>=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<c;u++)a[u]=n[u];return i.a.createElement.apply(null,a)}return i.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},466:function(e,t,n){"use strict";n.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/f132454a.72aa0b8b.js b/docs/f132454a.72aa0b8b.js
deleted file mode 100644
index 25ca855a4c..0000000000
--- a/docs/f132454a.72aa0b8b.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[217],{270:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return i})),t.d(n,"metadata",(function(){return c})),t.d(n,"rightToc",(function(){return s})),t.d(n,"default",(function(){return l}));var r=t(2),o=t(6),a=(t(0),t(290)),i={title:"Routing"},c={unversionedId:"examples/hash-routing",id:"examples/hash-routing",isDocsHomePage:!1,title:"Routing",description:"Use the browser's location hash for routing using URLs.",source:"@site/docs/examples/hash-routing.md",slug:"/examples/hash-routing",permalink:"/wave/docs/examples/hash-routing",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/hash-routing.md",version:"current",sidebar:"someSidebar",previous:{title:"Header",permalink:"/wave/docs/examples/header"},next:{title:"Routing / Toolbar",permalink:"/wave/docs/examples/toolbar-routing"}},s=[],u={rightToc:s};function l(e){var n=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},u,i,{components:n,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use the browser's ",Object(a.b)("a",Object(r.a)({parentName:"p"},{href:"https://developer.mozilla.org/en-US/docs/Web/API/Location/hash"}),"location hash")," for routing using URLs."),Object(a.b)("p",null,"The location hash can be accessed using ",Object(a.b)("inlineCode",{parentName:"p"},"q.args['#']"),"."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+t(441).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    hash = q.args['#']\n    if hash:\n        blurb = q.page['blurb']\n        if hash == 'menu/spam':\n            blurb.content = \"Sorry, we're out of spam!\"\n        elif hash == 'menu/ham':\n            blurb.content = \"Sorry, we're out of ham!\"\n        elif hash == 'menu/eggs':\n            blurb.content = \"Sorry, we're out of eggs!\"\n        elif hash == 'about':\n            blurb.content = 'Everything here is gluten-free!'\n    else:\n        q.page['nav'] = ui.markdown_card(\n            box='1 1 4 1',\n            title='Links!',\n            content='[Spam](#menu/spam) | [Ham](#menu/ham) | [Eggs](#menu/eggs) | [About](#about)',\n        )\n        q.page['blurb'] = ui.markdown_card(\n            box='1 2 4 2',\n            title='Store',\n            content='Welcome to our store!',\n        )\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}l.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 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 c(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function s(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=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<a;u++)i[u]=t[u];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},441:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/hash-routing-816838345c1b3e01e3fe1664c336f3d6.png"}}]);
\ No newline at end of file
diff --git a/docs/f132454a.996a8617.js b/docs/f132454a.996a8617.js
new file mode 100644
index 0000000000..980d2f57cd
--- /dev/null
+++ b/docs/f132454a.996a8617.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[219],{272:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return i})),t.d(n,"metadata",(function(){return c})),t.d(n,"rightToc",(function(){return s})),t.d(n,"default",(function(){return l}));var r=t(2),a=t(6),o=(t(0),t(292)),i={title:"Routing"},c={unversionedId:"examples/hash-routing",id:"examples/hash-routing",isDocsHomePage:!1,title:"Routing",description:"Use the browser's location hash for routing using URLs.",source:"@site/docs/examples/hash-routing.md",slug:"/examples/hash-routing",permalink:"/wave/docs/examples/hash-routing",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/hash-routing.md",version:"current",sidebar:"someSidebar",previous:{title:"Header",permalink:"/wave/docs/examples/header"},next:{title:"Routing / Toolbar",permalink:"/wave/docs/examples/toolbar-routing"}},s=[],u={rightToc:s};function l(e){var n=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},u,i,{components:n,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use the browser's ",Object(o.b)("a",Object(r.a)({parentName:"p"},{href:"https://developer.mozilla.org/en-US/docs/Web/API/Location/hash"}),"location hash")," for routing using URLs."),Object(o.b)("p",null,"The location hash can be accessed using ",Object(o.b)("inlineCode",{parentName:"p"},"q.args['#']"),"."),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 h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    hash = q.args['#']\n    if hash:\n        blurb = q.page['blurb']\n        if hash == 'menu/spam':\n            blurb.content = \"Sorry, we're out of spam!\"\n        elif hash == 'menu/ham':\n            blurb.content = \"Sorry, we're out of ham!\"\n        elif hash == 'menu/eggs':\n            blurb.content = \"Sorry, we're out of eggs!\"\n        elif hash == 'about':\n            blurb.content = 'Everything here is gluten-free!'\n    else:\n        q.page['nav'] = ui.markdown_card(\n            box='1 1 4 1',\n            title='Links!',\n            content='[Spam](#menu/spam) | [Ham](#menu/ham) | [Eggs](#menu/eggs) | [About](#about)',\n        )\n        q.page['blurb'] = ui.markdown_card(\n            box='1 2 4 2',\n            title='Store',\n            content='Welcome to our store!',\n        )\n    await q.page.save()\n")))}l.isMDXComponent=!0},292: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 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 c(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){o(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function s(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var u=a.a.createContext({}),l=function(e){var n=a.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 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,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]||o;return t?a.a.createElement(f,c(c({ref:n},u),{},{components:t})):a.a.createElement(f,c({ref:n},u))}));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]=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<o;u++)i[u]=t[u];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,t)}m.displayName="MDXCreateElement"},446:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/hash-routing-816838345c1b3e01e3fe1664c336f3d6.png"}}]);
\ No newline at end of file
diff --git a/docs/f151ab1a.f861a152.js b/docs/f151ab1a.efb732bc.js
similarity index 57%
rename from docs/f151ab1a.f861a152.js
rename to docs/f151ab1a.efb732bc.js
index 2dca5a91fc..10a806b6e3 100644
--- a/docs/f151ab1a.f861a152.js
+++ b/docs/f151ab1a.efb732bc.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[218],{271:function(e,t,l){"use strict";l.r(t),l.d(t,"frontMatter",(function(){return o})),l.d(t,"metadata",(function(){return c})),l.d(t,"rightToc",(function(){return d})),l.d(t,"default",(function(){return s}));var n=l(2),b=l(6),a=(l(0),l(290)),o={title:"Module h2o_wave.ui"},c={unversionedId:"api/ui",id:"api/ui",isDocsHomePage:!1,title:"Module h2o_wave.ui",description:"Functions",source:"@site/docs/api/ui.md",slug:"/api/ui",permalink:"/wave/docs/api/ui",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/api/ui.md",version:"current",sidebar:"someSidebar",previous:{title:"Module h2o_wave.core",permalink:"/wave/docs/api/core"},next:{title:"Module h2o_wave.server",permalink:"/wave/docs/api/server"}},d=[{value:"Functions",id:"functions",children:[{value:'breadcrumb <a name="h2o_wave.ui.breadcrumb"/>',id:"breadcrumb",children:[]},{value:'breadcrumbs_card <a name="h2o_wave.ui.breadcrumbs_card"/>',id:"breadcrumbs_card",children:[]},{value:'button <a name="h2o_wave.ui.button"/>',id:"button",children:[]},{value:'buttons <a name="h2o_wave.ui.buttons"/>',id:"buttons",children:[]},{value:'checkbox <a name="h2o_wave.ui.checkbox"/>',id:"checkbox",children:[]},{value:'checklist <a name="h2o_wave.ui.checklist"/>',id:"checklist",children:[]},{value:'choice <a name="h2o_wave.ui.choice"/>',id:"choice",children:[]},{value:'choice_group <a name="h2o_wave.ui.choice_group"/>',id:"choice_group",children:[]},{value:'color_picker <a name="h2o_wave.ui.color_picker"/>',id:"color_picker",children:[]},{value:'combobox <a name="h2o_wave.ui.combobox"/>',id:"combobox",children:[]},{value:'command <a name="h2o_wave.ui.command"/>',id:"command",children:[]},{value:'component <a name="h2o_wave.ui.component"/>',id:"component",children:[]},{value:'date_picker <a name="h2o_wave.ui.date_picker"/>',id:"date_picker",children:[]},{value:'dropdown <a name="h2o_wave.ui.dropdown"/>',id:"dropdown",children:[]},{value:'expander <a name="h2o_wave.ui.expander"/>',id:"expander",children:[]},{value:'file_upload <a name="h2o_wave.ui.file_upload"/>',id:"file_upload",children:[]},{value:'flex_card <a name="h2o_wave.ui.flex_card"/>',id:"flex_card",children:[]},{value:'form_card <a name="h2o_wave.ui.form_card"/>',id:"form_card",children:[]},{value:'frame <a name="h2o_wave.ui.frame"/>',id:"frame",children:[]},{value:'frame_card <a name="h2o_wave.ui.frame_card"/>',id:"frame_card",children:[]},{value:'graphics_card <a name="h2o_wave.ui.graphics_card"/>',id:"graphics_card",children:[]},{value:'grid_card <a name="h2o_wave.ui.grid_card"/>',id:"grid_card",children:[]},{value:'header_card <a name="h2o_wave.ui.header_card"/>',id:"header_card",children:[]},{value:'icon_table_cell_type <a name="h2o_wave.ui.icon_table_cell_type"/>',id:"icon_table_cell_type",children:[]},{value:'image_card <a name="h2o_wave.ui.image_card"/>',id:"image_card",children:[]},{value:'label <a name="h2o_wave.ui.label"/>',id:"label",children:[]},{value:'large_bar_stat_card <a name="h2o_wave.ui.large_bar_stat_card"/>',id:"large_bar_stat_card",children:[]},{value:'large_stat_card <a name="h2o_wave.ui.large_stat_card"/>',id:"large_stat_card",children:[]},{value:'link <a name="h2o_wave.ui.link"/>',id:"link",children:[]},{value:'list_card <a name="h2o_wave.ui.list_card"/>',id:"list_card",children:[]},{value:'list_item1_card <a name="h2o_wave.ui.list_item1_card"/>',id:"list_item1_card",children:[]},{value:'mark <a name="h2o_wave.ui.mark"/>',id:"mark",children:[]},{value:'markdown_card <a name="h2o_wave.ui.markdown_card"/>',id:"markdown_card",children:[]},{value:'markup <a name="h2o_wave.ui.markup"/>',id:"markup",children:[]},{value:'markup_card <a name="h2o_wave.ui.markup_card"/>',id:"markup_card",children:[]},{value:'message_bar <a name="h2o_wave.ui.message_bar"/>',id:"message_bar",children:[]},{value:'meta_card <a name="h2o_wave.ui.meta_card"/>',id:"meta_card",children:[]},{value:'nav_card <a name="h2o_wave.ui.nav_card"/>',id:"nav_card",children:[]},{value:'nav_group <a name="h2o_wave.ui.nav_group"/>',id:"nav_group",children:[]},{value:'nav_item <a name="h2o_wave.ui.nav_item"/>',id:"nav_item",children:[]},{value:'picker <a name="h2o_wave.ui.picker"/>',id:"picker",children:[]},{value:'pixel_art_card <a name="h2o_wave.ui.pixel_art_card"/>',id:"pixel_art_card",children:[]},{value:'plot <a name="h2o_wave.ui.plot"/>',id:"plot",children:[]},{value:'plot_card <a name="h2o_wave.ui.plot_card"/>',id:"plot_card",children:[]},{value:'progress <a name="h2o_wave.ui.progress"/>',id:"progress",children:[]},{value:'progress_table_cell_type <a name="h2o_wave.ui.progress_table_cell_type"/>',id:"progress_table_cell_type",children:[]},{value:'range_slider <a name="h2o_wave.ui.range_slider"/>',id:"range_slider",children:[]},{value:'repeat_card <a name="h2o_wave.ui.repeat_card"/>',id:"repeat_card",children:[]},{value:'separator <a name="h2o_wave.ui.separator"/>',id:"separator",children:[]},{value:'slider <a name="h2o_wave.ui.slider"/>',id:"slider",children:[]},{value:'small_series_stat_card <a name="h2o_wave.ui.small_series_stat_card"/>',id:"small_series_stat_card",children:[]},{value:'small_stat_card <a name="h2o_wave.ui.small_stat_card"/>',id:"small_stat_card",children:[]},{value:'spinbox <a name="h2o_wave.ui.spinbox"/>',id:"spinbox",children:[]},{value:'step <a name="h2o_wave.ui.step"/>',id:"step",children:[]},{value:'stepper <a name="h2o_wave.ui.stepper"/>',id:"stepper",children:[]},{value:'tab <a name="h2o_wave.ui.tab"/>',id:"tab",children:[]},{value:'tab_card <a name="h2o_wave.ui.tab_card"/>',id:"tab_card",children:[]},{value:'table <a name="h2o_wave.ui.table"/>',id:"table",children:[]},{value:'table_cell_type <a name="h2o_wave.ui.table_cell_type"/>',id:"table_cell_type",children:[]},{value:'table_column <a name="h2o_wave.ui.table_column"/>',id:"table_column",children:[]},{value:'table_row <a name="h2o_wave.ui.table_row"/>',id:"table_row",children:[]},{value:'tabs <a name="h2o_wave.ui.tabs"/>',id:"tabs",children:[]},{value:'tall_gauge_stat_card <a name="h2o_wave.ui.tall_gauge_stat_card"/>',id:"tall_gauge_stat_card",children:[]},{value:'tall_series_stat_card <a name="h2o_wave.ui.tall_series_stat_card"/>',id:"tall_series_stat_card",children:[]},{value:'template <a name="h2o_wave.ui.template"/>',id:"template",children:[]},{value:'template_card <a name="h2o_wave.ui.template_card"/>',id:"template_card",children:[]},{value:'text <a name="h2o_wave.ui.text"/>',id:"text",children:[]},{value:'text_l <a name="h2o_wave.ui.text_l"/>',id:"text_l",children:[]},{value:'text_m <a name="h2o_wave.ui.text_m"/>',id:"text_m",children:[]},{value:'text_s <a name="h2o_wave.ui.text_s"/>',id:"text_s",children:[]},{value:'text_xl <a name="h2o_wave.ui.text_xl"/>',id:"text_xl",children:[]},{value:'text_xs <a name="h2o_wave.ui.text_xs"/>',id:"text_xs",children:[]},{value:'textbox <a name="h2o_wave.ui.textbox"/>',id:"textbox",children:[]},{value:'toggle <a name="h2o_wave.ui.toggle"/>',id:"toggle",children:[]},{value:'toolbar_card <a name="h2o_wave.ui.toolbar_card"/>',id:"toolbar_card",children:[]},{value:'vega_card <a name="h2o_wave.ui.vega_card"/>',id:"vega_card",children:[]},{value:'vega_visualization <a name="h2o_wave.ui.vega_visualization"/>',id:"vega_visualization",children:[]},{value:'visualization <a name="h2o_wave.ui.visualization"/>',id:"visualization",children:[]},{value:'wide_bar_stat_card <a name="h2o_wave.ui.wide_bar_stat_card"/>',id:"wide_bar_stat_card",children:[]},{value:'wide_gauge_stat_card <a name="h2o_wave.ui.wide_gauge_stat_card"/>',id:"wide_gauge_stat_card",children:[]},{value:'wide_series_stat_card <a name="h2o_wave.ui.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,"<html>...</html>"),"."),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,"<html>...</html>")),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<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{};t%2?o(Object(l),!0).forEach((function(t){a(e,t,l[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(l)):o(Object(l)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(l,t))}))}return e}function d(e,t){if(null==e)return{};var l,n,b=function(e,t){if(null==e)return{};var l,n,b={},a=Object.keys(e);for(n=0;n<a.length;n++)l=a[n],t.indexOf(l)>=0||(b[l]=e[l]);return b}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)l=a[n],t.indexOf(l)>=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<a;i++)o[i]=l[i];return b.a.createElement.apply(null,o)}return b.a.createElement.apply(null,l)}p.displayName="MDXCreateElement"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[220],{273:function(e,t,l){"use strict";l.r(t),l.d(t,"frontMatter",(function(){return o})),l.d(t,"metadata",(function(){return c})),l.d(t,"rightToc",(function(){return d})),l.d(t,"default",(function(){return s}));var n=l(2),b=l(6),a=(l(0),l(292)),o={title:"Module h2o_wave.ui"},c={unversionedId:"api/ui",id:"api/ui",isDocsHomePage:!1,title:"Module h2o_wave.ui",description:"Functions",source:"@site/docs/api/ui.md",slug:"/api/ui",permalink:"/wave/docs/api/ui",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/api/ui.md",version:"current",sidebar:"someSidebar",previous:{title:"Module h2o_wave.core",permalink:"/wave/docs/api/core"},next:{title:"Module h2o_wave.server",permalink:"/wave/docs/api/server"}},d=[{value:"Functions",id:"functions",children:[{value:'breadcrumb <a name="h2o_wave.ui.breadcrumb"/>',id:"breadcrumb",children:[]},{value:'breadcrumbs_card <a name="h2o_wave.ui.breadcrumbs_card"/>',id:"breadcrumbs_card",children:[]},{value:'button <a name="h2o_wave.ui.button"/>',id:"button",children:[]},{value:'buttons <a name="h2o_wave.ui.buttons"/>',id:"buttons",children:[]},{value:'checkbox <a name="h2o_wave.ui.checkbox"/>',id:"checkbox",children:[]},{value:'checklist <a name="h2o_wave.ui.checklist"/>',id:"checklist",children:[]},{value:'choice <a name="h2o_wave.ui.choice"/>',id:"choice",children:[]},{value:'choice_group <a name="h2o_wave.ui.choice_group"/>',id:"choice_group",children:[]},{value:'color_picker <a name="h2o_wave.ui.color_picker"/>',id:"color_picker",children:[]},{value:'combobox <a name="h2o_wave.ui.combobox"/>',id:"combobox",children:[]},{value:'command <a name="h2o_wave.ui.command"/>',id:"command",children:[]},{value:'component <a name="h2o_wave.ui.component"/>',id:"component",children:[]},{value:'date_picker <a name="h2o_wave.ui.date_picker"/>',id:"date_picker",children:[]},{value:'dropdown <a name="h2o_wave.ui.dropdown"/>',id:"dropdown",children:[]},{value:'expander <a name="h2o_wave.ui.expander"/>',id:"expander",children:[]},{value:'file_upload <a name="h2o_wave.ui.file_upload"/>',id:"file_upload",children:[]},{value:'flex_card <a name="h2o_wave.ui.flex_card"/>',id:"flex_card",children:[]},{value:'form_card <a name="h2o_wave.ui.form_card"/>',id:"form_card",children:[]},{value:'frame <a name="h2o_wave.ui.frame"/>',id:"frame",children:[]},{value:'frame_card <a name="h2o_wave.ui.frame_card"/>',id:"frame_card",children:[]},{value:'graphics_card <a name="h2o_wave.ui.graphics_card"/>',id:"graphics_card",children:[]},{value:'grid_card <a name="h2o_wave.ui.grid_card"/>',id:"grid_card",children:[]},{value:'header_card <a name="h2o_wave.ui.header_card"/>',id:"header_card",children:[]},{value:'icon_table_cell_type <a name="h2o_wave.ui.icon_table_cell_type"/>',id:"icon_table_cell_type",children:[]},{value:'image_card <a name="h2o_wave.ui.image_card"/>',id:"image_card",children:[]},{value:'label <a name="h2o_wave.ui.label"/>',id:"label",children:[]},{value:'large_bar_stat_card <a name="h2o_wave.ui.large_bar_stat_card"/>',id:"large_bar_stat_card",children:[]},{value:'large_stat_card <a name="h2o_wave.ui.large_stat_card"/>',id:"large_stat_card",children:[]},{value:'link <a name="h2o_wave.ui.link"/>',id:"link",children:[]},{value:'list_card <a name="h2o_wave.ui.list_card"/>',id:"list_card",children:[]},{value:'list_item1_card <a name="h2o_wave.ui.list_item1_card"/>',id:"list_item1_card",children:[]},{value:'mark <a name="h2o_wave.ui.mark"/>',id:"mark",children:[]},{value:'markdown_card <a name="h2o_wave.ui.markdown_card"/>',id:"markdown_card",children:[]},{value:'markup <a name="h2o_wave.ui.markup"/>',id:"markup",children:[]},{value:'markup_card <a name="h2o_wave.ui.markup_card"/>',id:"markup_card",children:[]},{value:'message_bar <a name="h2o_wave.ui.message_bar"/>',id:"message_bar",children:[]},{value:'meta_card <a name="h2o_wave.ui.meta_card"/>',id:"meta_card",children:[]},{value:'nav_card <a name="h2o_wave.ui.nav_card"/>',id:"nav_card",children:[]},{value:'nav_group <a name="h2o_wave.ui.nav_group"/>',id:"nav_group",children:[]},{value:'nav_item <a name="h2o_wave.ui.nav_item"/>',id:"nav_item",children:[]},{value:'picker <a name="h2o_wave.ui.picker"/>',id:"picker",children:[]},{value:'pixel_art_card <a name="h2o_wave.ui.pixel_art_card"/>',id:"pixel_art_card",children:[]},{value:'plot <a name="h2o_wave.ui.plot"/>',id:"plot",children:[]},{value:'plot_card <a name="h2o_wave.ui.plot_card"/>',id:"plot_card",children:[]},{value:'progress <a name="h2o_wave.ui.progress"/>',id:"progress",children:[]},{value:'progress_table_cell_type <a name="h2o_wave.ui.progress_table_cell_type"/>',id:"progress_table_cell_type",children:[]},{value:'range_slider <a name="h2o_wave.ui.range_slider"/>',id:"range_slider",children:[]},{value:'repeat_card <a name="h2o_wave.ui.repeat_card"/>',id:"repeat_card",children:[]},{value:'separator <a name="h2o_wave.ui.separator"/>',id:"separator",children:[]},{value:'slider <a name="h2o_wave.ui.slider"/>',id:"slider",children:[]},{value:'small_series_stat_card <a name="h2o_wave.ui.small_series_stat_card"/>',id:"small_series_stat_card",children:[]},{value:'small_stat_card <a name="h2o_wave.ui.small_stat_card"/>',id:"small_stat_card",children:[]},{value:'spinbox <a name="h2o_wave.ui.spinbox"/>',id:"spinbox",children:[]},{value:'step <a name="h2o_wave.ui.step"/>',id:"step",children:[]},{value:'stepper <a name="h2o_wave.ui.stepper"/>',id:"stepper",children:[]},{value:'tab <a name="h2o_wave.ui.tab"/>',id:"tab",children:[]},{value:'tab_card <a name="h2o_wave.ui.tab_card"/>',id:"tab_card",children:[]},{value:'table <a name="h2o_wave.ui.table"/>',id:"table",children:[]},{value:'table_cell_type <a name="h2o_wave.ui.table_cell_type"/>',id:"table_cell_type",children:[]},{value:'table_column <a name="h2o_wave.ui.table_column"/>',id:"table_column",children:[]},{value:'table_row <a name="h2o_wave.ui.table_row"/>',id:"table_row",children:[]},{value:'tabs <a name="h2o_wave.ui.tabs"/>',id:"tabs",children:[]},{value:'tall_gauge_stat_card <a name="h2o_wave.ui.tall_gauge_stat_card"/>',id:"tall_gauge_stat_card",children:[]},{value:'tall_series_stat_card <a name="h2o_wave.ui.tall_series_stat_card"/>',id:"tall_series_stat_card",children:[]},{value:'template <a name="h2o_wave.ui.template"/>',id:"template",children:[]},{value:'template_card <a name="h2o_wave.ui.template_card"/>',id:"template_card",children:[]},{value:'text <a name="h2o_wave.ui.text"/>',id:"text",children:[]},{value:'text_l <a name="h2o_wave.ui.text_l"/>',id:"text_l",children:[]},{value:'text_m <a name="h2o_wave.ui.text_m"/>',id:"text_m",children:[]},{value:'text_s <a name="h2o_wave.ui.text_s"/>',id:"text_s",children:[]},{value:'text_xl <a name="h2o_wave.ui.text_xl"/>',id:"text_xl",children:[]},{value:'text_xs <a name="h2o_wave.ui.text_xs"/>',id:"text_xs",children:[]},{value:'textbox <a name="h2o_wave.ui.textbox"/>',id:"textbox",children:[]},{value:'toggle <a name="h2o_wave.ui.toggle"/>',id:"toggle",children:[]},{value:'toolbar_card <a name="h2o_wave.ui.toolbar_card"/>',id:"toolbar_card",children:[]},{value:'vega_card <a name="h2o_wave.ui.vega_card"/>',id:"vega_card",children:[]},{value:'vega_visualization <a name="h2o_wave.ui.vega_visualization"/>',id:"vega_visualization",children:[]},{value:'visualization <a name="h2o_wave.ui.visualization"/>',id:"visualization",children:[]},{value:'wide_bar_stat_card <a name="h2o_wave.ui.wide_bar_stat_card"/>',id:"wide_bar_stat_card",children:[]},{value:'wide_gauge_stat_card <a name="h2o_wave.ui.wide_gauge_stat_card"/>',id:"wide_gauge_stat_card",children:[]},{value:'wide_series_stat_card <a name="h2o_wave.ui.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,"<html>...</html>"),"."),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,"<html>...</html>")),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, icon:\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,"icon")),Object(a.b)("dd",null,"Shortcut icon path. Preferably a ",Object(a.b)("code",null,".png")," file (",Object(a.b)("code",null,".ico")," files may not work in mobile browsers)."),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},292: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<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{};t%2?o(Object(l),!0).forEach((function(t){a(e,t,l[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(l)):o(Object(l)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(l,t))}))}return e}function d(e,t){if(null==e)return{};var l,n,b=function(e,t){if(null==e)return{};var l,n,b={},a=Object.keys(e);for(n=0;n<a.length;n++)l=a[n],t.indexOf(l)>=0||(b[l]=e[l]);return b}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)l=a[n],t.indexOf(l)>=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<a;i++)o[i]=l[i];return b.a.createElement.apply(null,o)}return b.a.createElement.apply(null,l)}p.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/f1ec6cfa.8ae38ae3.js b/docs/f1ec6cfa.90acea76.js
similarity index 93%
rename from docs/f1ec6cfa.8ae38ae3.js
rename to docs/f1ec6cfa.90acea76.js
index e793458bcb..03b9c3d340 100644
--- a/docs/f1ec6cfa.8ae38ae3.js
+++ b/docs/f1ec6cfa.90acea76.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[219],{272: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 p})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(290)),c={title:"Plot / Interval / Stacked / Grouped"},i={unversionedId:"examples/plot-interval-stacked-grouped",id:"examples/plot-interval-stacked-grouped",isDocsHomePage:!1,title:"Plot / Interval / Stacked / Grouped",description:"Make a column plot with both stacked and grouped bars.",source:"@site/docs/examples/plot-interval-stacked-grouped.md",slug:"/examples/plot-interval-stacked-grouped",permalink:"/wave/docs/examples/plot-interval-stacked-grouped",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-stacked-grouped.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Stacked / Transpose",permalink:"/wave/docs/examples/plot-interval-stacked-transpose"},next:{title:"Plot / Interval / Stacked / Grouped / Transpose",permalink:"/wave/docs/examples/plot-interval-stacked-grouped-transpose"}},p=[],l={rightToc:p};function s(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a column plot with both stacked and grouped bars."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(445).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 = 5\nk = 5\nf1 = FakeMultiCategoricalSeries(groups=k)\nf2 = FakeMultiCategoricalSeries(groups=k)\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Intervals, stacked and dodged',\n    data=data('category country product price', n * k * 2),\n    plot=ui.plot([\n        ui.mark(type='interval', x='=product', y='=price', color='=country', stack='auto', dodge='=category', y_min=0)])\n))\n\ndata1 = [('A', g, t, x) for x in [f1.next() for _ in range(n)] for g, t, x, _ in x]\ndata2 = [('B', g, t, x) for x in [f2.next() for _ in range(n)] for g, t, x, _ in x]\nv.data = data1 + data2\n\npage.save()\n")))}s.isMDXComponent=!0},290: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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;l++)c[l]=r[l];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},445:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-interval-stacked-grouped-678de98e675478e364cab127af4c07bb.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[221],{274: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 p})),r.d(t,"default",(function(){return s}));var n=r(2),a=r(6),o=(r(0),r(292)),c={title:"Plot / Interval / Stacked / Grouped"},i={unversionedId:"examples/plot-interval-stacked-grouped",id:"examples/plot-interval-stacked-grouped",isDocsHomePage:!1,title:"Plot / Interval / Stacked / Grouped",description:"Make a column plot with both stacked and grouped bars.",source:"@site/docs/examples/plot-interval-stacked-grouped.md",slug:"/examples/plot-interval-stacked-grouped",permalink:"/wave/docs/examples/plot-interval-stacked-grouped",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-interval-stacked-grouped.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Interval / Stacked / Transpose",permalink:"/wave/docs/examples/plot-interval-stacked-transpose"},next:{title:"Plot / Interval / Stacked / Grouped / Transpose",permalink:"/wave/docs/examples/plot-interval-stacked-grouped-transpose"}},p=[],l={rightToc:p};function s(e){var t=e.components,c=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},l,c,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a column plot with both stacked and grouped bars."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(450).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 = 5\nk = 5\nf1 = FakeMultiCategoricalSeries(groups=k)\nf2 = FakeMultiCategoricalSeries(groups=k)\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Intervals, stacked and dodged',\n    data=data('category country product price', n * k * 2),\n    plot=ui.plot([\n        ui.mark(type='interval', x='=product', y='=price', color='=country', stack='auto', dodge='=category', y_min=0)])\n))\n\ndata1 = [('A', g, t, x) for x in [f1.next() for _ in range(n)] for g, t, x, _ in x]\ndata2 = [('B', g, t, x) for x in [f2.next() for _ in range(n)] for g, t, x, _ in x]\nv.data = data1 + data2\n\npage.save()\n")))}s.isMDXComponent=!0},292: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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;l++)c[l]=r[l];return a.a.createElement.apply(null,c)}return a.a.createElement.apply(null,r)}f.displayName="MDXCreateElement"},450:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/plot-interval-stacked-grouped-678de98e675478e364cab127af4c07bb.png"}}]);
\ No newline at end of file
diff --git a/docs/f21433ff.717b57f0.js b/docs/f21433ff.738455b0.js
similarity index 92%
rename from docs/f21433ff.717b57f0.js
rename to docs/f21433ff.738455b0.js
index 64dab02638..bde70abd8b 100644
--- a/docs/f21433ff.717b57f0.js
+++ b/docs/f21433ff.738455b0.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[220],{273: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 u}));var r=n(2),o=n(6),a=(n(0),n(290)),i={title:"Plot / Line / Groups"},l={unversionedId:"examples/plot-line-groups",id:"examples/plot-line-groups",isDocsHomePage:!1,title:"Plot / Line / Groups",description:"Make a multi-series line plot.",source:"@site/docs/examples/plot-line-groups.md",slug:"/examples/plot-line-groups",permalink:"/wave/docs/examples/plot-line-groups",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line-groups.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Line",permalink:"/wave/docs/examples/plot-line"},next:{title:"Plot / Line / Smooth",permalink:"/wave/docs/examples/plot-line-smooth"}},p=[],c={rightToc:p};function u(e){var t=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},c,i,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Make a multi-series line plot."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(449).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeMultiTimeSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 50\nf = FakeMultiTimeSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Line, groups',\n    data=data('product date price', n * 5),\n    plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', color='=product', 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")))}u.isMDXComponent=!0},290: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 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=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<a;c++)i[c]=n[c];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},449:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-line-groups-b3aacba3e2a8fd2306aef09adcb88fea.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[222],{275: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 u}));var r=n(2),o=n(6),a=(n(0),n(292)),i={title:"Plot / Line / Groups"},l={unversionedId:"examples/plot-line-groups",id:"examples/plot-line-groups",isDocsHomePage:!1,title:"Plot / Line / Groups",description:"Make a multi-series line plot.",source:"@site/docs/examples/plot-line-groups.md",slug:"/examples/plot-line-groups",permalink:"/wave/docs/examples/plot-line-groups",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-line-groups.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Line",permalink:"/wave/docs/examples/plot-line"},next:{title:"Plot / Line / Smooth",permalink:"/wave/docs/examples/plot-line-smooth"}},p=[],c={rightToc:p};function u(e){var t=e.components,i=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},c,i,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Make a multi-series line plot."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+n(454).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from synth import FakeMultiTimeSeries\nfrom h2o_wave import site, data, ui\n\npage = site['/demo']\n\nn = 50\nf = FakeMultiTimeSeries()\nv = page.add('example', ui.plot_card(\n    box='1 1 4 5',\n    title='Line, groups',\n    data=data('product date price', n * 5),\n    plot=ui.plot([ui.mark(type='line', x_scale='time', x='=date', y='=price', color='=product', 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")))}u.isMDXComponent=!0},292: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 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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=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<a;c++)i[c]=n[c];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,n)}f.displayName="MDXCreateElement"},454:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-line-groups-b3aacba3e2a8fd2306aef09adcb88fea.png"}}]);
\ No newline at end of file
diff --git a/docs/f21d2ab0.fe741d4d.js b/docs/f21d2ab0.549d1c33.js
similarity index 96%
rename from docs/f21d2ab0.fe741d4d.js
rename to docs/f21d2ab0.549d1c33.js
index 9c390afca2..65de4e0a66 100644
--- a/docs/f21d2ab0.fe741d4d.js
+++ b/docs/f21d2ab0.549d1c33.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[221],{274:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return l})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return s})),r.d(t,"default",(function(){return m}));var n=r(2),a=r(6),o=(r(0),r(290)),l={title:"Stat / Series / Small / Area"},i={unversionedId:"examples/stat-small-series-area",id:"examples/stat-small-series-area",isDocsHomePage:!1,title:"Stat / Series / Small / Area",description:"Create a small stat card displaying a primary value and a series plot.",source:"@site/docs/examples/stat-small-series-area.md",slug:"/examples/stat-small-series-area",permalink:"/wave/docs/examples/stat-small-series-area",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-small-series-area.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Bar / Large",permalink:"/wave/docs/examples/stat-large-bar"},next:{title:"Stat / Series / Small / Interval",permalink:"/wave/docs/examples/stat-small-series-interval"}},s=[],c={rightToc:s};function m(e){var t=e.components,l=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},c,l,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Create a small stat card displaying a primary value and a series plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(421).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"import time\n\nfrom faker import Faker\n\nfrom synth import FakeCategoricalSeries\nfrom h2o_wave import site, ui, data\n\npage = site['/demo']\n\ncolors = '$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine'.split()\ncurves = 'linear smooth step step-after step-before'.split()\nfake = Faker()\ncards = []\nfor i in range(len(curves)):\n    f = FakeCategoricalSeries()\n    cat, val, pc = f.next()\n    c = page.add(f'example{i}', ui.small_series_stat_card(\n        box=f'1 {i + 1} 1 1',\n        title=fake.cryptocurrency_name(),\n        value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n        data=dict(qux=val, quux=pc),\n        plot_category='foo',\n        plot_type='area',\n        plot_value='qux',\n        plot_color=colors[i],\n        plot_data=data('foo qux', -15),\n        plot_zero_value=0,\n        plot_curve=curves[i],\n    ))\n    cards.append((f, c))\npage.save()\n\nwhile True:\n    time.sleep(1)\n    for f, c in cards:\n        cat, val, pc = f.next()\n        c.data.qux = val\n        c.data.quux = pc\n        c.plot_data[-1] = [cat, val]\n    page.save()\n")))}m.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return p})),r.d(t,"b",(function(){return f}));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 l(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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function s(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;c++)l[c]=r[c];return a.a.createElement.apply(null,l)}return a.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},421:function(e,t,r){"use strict";r.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[223],{276:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return l})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return s})),r.d(t,"default",(function(){return m}));var n=r(2),a=r(6),o=(r(0),r(292)),l={title:"Stat / Series / Small / Area"},i={unversionedId:"examples/stat-small-series-area",id:"examples/stat-small-series-area",isDocsHomePage:!1,title:"Stat / Series / Small / Area",description:"Create a small stat card displaying a primary value and a series plot.",source:"@site/docs/examples/stat-small-series-area.md",slug:"/examples/stat-small-series-area",permalink:"/wave/docs/examples/stat-small-series-area",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/stat-small-series-area.md",version:"current",sidebar:"someSidebar",previous:{title:"Stat / Bar / Large",permalink:"/wave/docs/examples/stat-large-bar"},next:{title:"Stat / Series / Small / Interval",permalink:"/wave/docs/examples/stat-small-series-interval"}},s=[],c={rightToc:s};function m(e){var t=e.components,l=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},c,l,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Create a small stat card displaying a primary value and a series plot."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+r(426).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"import time\n\nfrom faker import Faker\n\nfrom synth import FakeCategoricalSeries\nfrom h2o_wave import site, ui, data\n\npage = site['/demo']\n\ncolors = '$red $pink $blue $azure $cyan $teal $mint $green $lime $yellow $amber $orange $tangerine'.split()\ncurves = 'linear smooth step step-after step-before'.split()\nfake = Faker()\ncards = []\nfor i in range(len(curves)):\n    f = FakeCategoricalSeries()\n    cat, val, pc = f.next()\n    c = page.add(f'example{i}', ui.small_series_stat_card(\n        box=f'1 {i + 1} 1 1',\n        title=fake.cryptocurrency_name(),\n        value='=${{intl qux minimum_fraction_digits=2 maximum_fraction_digits=2}}',\n        data=dict(qux=val, quux=pc),\n        plot_category='foo',\n        plot_type='area',\n        plot_value='qux',\n        plot_color=colors[i],\n        plot_data=data('foo qux', -15),\n        plot_zero_value=0,\n        plot_curve=curves[i],\n    ))\n    cards.append((f, c))\npage.save()\n\nwhile True:\n    time.sleep(1)\n    for f, c in cards:\n        cat, val, pc = f.next()\n        c.data.qux = val\n        c.data.quux = pc\n        c.plot_data[-1] = [cat, val]\n    page.save()\n")))}m.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return p})),r.d(t,"b",(function(){return f}));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 l(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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function s(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=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<o;c++)l[c]=r[c];return a.a.createElement.apply(null,l)}return a.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},426:function(e,t,r){"use strict";r.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/f3473c5b.a1665bdc.js b/docs/f3473c5b.ff1378dc.js
similarity index 97%
rename from docs/f3473c5b.a1665bdc.js
rename to docs/f3473c5b.ff1378dc.js
index 8ccc7a5ccd..e7b3c13859 100644
--- a/docs/f3473c5b.a1665bdc.js
+++ b/docs/f3473c5b.ff1378dc.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[222],{275:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return A})),t.d(n,"metadata",(function(){return k})),t.d(n,"rightToc",(function(){return a})),t.d(n,"default",(function(){return S}));var i=t(2),r=t(6),J=(t(0),t(290)),A={title:"Layout / Size"},k={unversionedId:"examples/layout-size",id:"examples/layout-size",isDocsHomePage:!1,title:"Layout / Size",description:"How to adjust the size of cards on a page.",source:"@site/docs/examples/layout-size.md",slug:"/examples/layout-size",permalink:"/wave/docs/examples/layout-size",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/layout-size.md",version:"current",sidebar:"someSidebar",previous:{title:"Layout / Position",permalink:"/wave/docs/examples/layout"},next:{title:"Form",permalink:"/wave/docs/examples/form"}},a=[],E={rightToc:a};function S(e){var n=e.components,A=Object(r.a)(e,["components"]);return Object(J.b)("wrapper",Object(i.a)({},E,A,{components:n,mdxType:"MDXLayout"}),Object(J.b)("p",null,"How to adjust the size of cards on a page."),Object(J.b)("div",{className:"cover",style:{backgroundImage:"url("+t(423).default+")"}}),Object(J.b)("pre",null,Object(J.b)("code",Object(i.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\n# Every page has a grid system in place.\n# The grid has 12 columns and 10 rows.\n# A column is 134 pixels wide.\n# A row is 76 pixels high.\n# The gap between rows and columns is set to 15 pixels.\n\n# Cards have a `box` attribute that specifies its column, row, width and height.\n# box = 'column row width height'\n# They indicate the 1-based column/row to position the top-left corner of the card.\n\n# In this example, we place multiple cards on a page to demonstrate their `box` values.\n\npage = site['/demo']\nboxes = [\n    '1 1 1 1',\n    '2 1 2 1',\n    '4 1 3 1',\n    '7 1 4 1',\n    '11 1 2 2',\n    '1 2 1 9',\n    '2 2 1 4',\n    '3 2 1 2',\n    '2 6 1 5',\n    '3 4 1 7',\n    '4 2 7 9',\n    '11 9 2 2',\n    '11 3 2 6',\n]\n\nfor box in boxes:\n    page[f'card_{box.replace(\" \", \"_\")}'] = ui.markdown_card(box=box, title=box, content='')\n\npage.save()\n")))}S.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return I})),t.d(n,"b",(function(){return g}));var i=t(0),r=t.n(i);function J(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function A(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 k(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?A(Object(t),!0).forEach((function(n){J(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):A(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function a(e,n){if(null==e)return{};var t,i,r=function(e,n){if(null==e)return{};var t,i,r={},J=Object.keys(e);for(i=0;i<J.length;i++)t=J[i],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var J=Object.getOwnPropertySymbols(e);for(i=0;i<J.length;i++)t=J[i],n.indexOf(t)>=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<J;E++)A[E]=t[E];return r.a.createElement.apply(null,A)}return r.a.createElement.apply(null,t)}l.displayName="MDXCreateElement"},423:function(e,n,t){"use strict";t.r(n),n.default="data:image/png;base64,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"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[224],{277:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return A})),t.d(n,"metadata",(function(){return k})),t.d(n,"rightToc",(function(){return a})),t.d(n,"default",(function(){return S}));var i=t(2),r=t(6),J=(t(0),t(292)),A={title:"Layout / Size"},k={unversionedId:"examples/layout-size",id:"examples/layout-size",isDocsHomePage:!1,title:"Layout / Size",description:"How to adjust the size of cards on a page.",source:"@site/docs/examples/layout-size.md",slug:"/examples/layout-size",permalink:"/wave/docs/examples/layout-size",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/layout-size.md",version:"current",sidebar:"someSidebar",previous:{title:"Layout / Position",permalink:"/wave/docs/examples/layout"},next:{title:"Form",permalink:"/wave/docs/examples/form"}},a=[],E={rightToc:a};function S(e){var n=e.components,A=Object(r.a)(e,["components"]);return Object(J.b)("wrapper",Object(i.a)({},E,A,{components:n,mdxType:"MDXLayout"}),Object(J.b)("p",null,"How to adjust the size of cards on a page."),Object(J.b)("div",{className:"cover",style:{backgroundImage:"url("+t(428).default+")"}}),Object(J.b)("pre",null,Object(J.b)("code",Object(i.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import site, ui\n\n# Every page has a grid system in place.\n# The grid has 12 columns and 10 rows.\n# A column is 134 pixels wide.\n# A row is 76 pixels high.\n# The gap between rows and columns is set to 15 pixels.\n\n# Cards have a `box` attribute that specifies its column, row, width and height.\n# box = 'column row width height'\n# They indicate the 1-based column/row to position the top-left corner of the card.\n\n# In this example, we place multiple cards on a page to demonstrate their `box` values.\n\npage = site['/demo']\nboxes = [\n    '1 1 1 1',\n    '2 1 2 1',\n    '4 1 3 1',\n    '7 1 4 1',\n    '11 1 2 2',\n    '1 2 1 9',\n    '2 2 1 4',\n    '3 2 1 2',\n    '2 6 1 5',\n    '3 4 1 7',\n    '4 2 7 9',\n    '11 9 2 2',\n    '11 3 2 6',\n]\n\nfor box in boxes:\n    page[f'card_{box.replace(\" \", \"_\")}'] = ui.markdown_card(box=box, title=box, content='')\n\npage.save()\n")))}S.isMDXComponent=!0},292:function(e,n,t){"use strict";t.d(n,"a",(function(){return I})),t.d(n,"b",(function(){return g}));var i=t(0),r=t.n(i);function J(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function A(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 k(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?A(Object(t),!0).forEach((function(n){J(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):A(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function a(e,n){if(null==e)return{};var t,i,r=function(e,n){if(null==e)return{};var t,i,r={},J=Object.keys(e);for(i=0;i<J.length;i++)t=J[i],n.indexOf(t)>=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var J=Object.getOwnPropertySymbols(e);for(i=0;i<J.length;i++)t=J[i],n.indexOf(t)>=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<J;E++)A[E]=t[E];return r.a.createElement.apply(null,A)}return r.a.createElement.apply(null,t)}l.displayName="MDXCreateElement"},428:function(e,n,t){"use strict";t.r(n),n.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/f349fb86.2a5c5652.js b/docs/f349fb86.2a5c5652.js
deleted file mode 100644
index 68648749e6..0000000000
--- a/docs/f349fb86.2a5c5652.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[223],{276:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return c})),t.d(r,"metadata",(function(){return l})),t.d(r,"rightToc",(function(){return o})),t.d(r,"default",(function(){return p}));var n=t(2),i=t(6),a=(t(0),t(290)),c={title:"Graphics / Hilbert"},l={unversionedId:"examples/graphics-hilbert",id:"examples/graphics-hilbert",isDocsHomePage:!1,title:"Graphics / Hilbert",description:"Use turtle graphics recursively to draw Hilbert curves.",source:"@site/docs/examples/graphics-hilbert.md",slug:"/examples/graphics-hilbert",permalink:"/wave/docs/examples/graphics-hilbert",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-hilbert.md",version:"current",sidebar:"someSidebar",previous:{title:"Graphics / Turtle",permalink:"/wave/docs/examples/graphics-turtle"},next:{title:"Graphics / Glider Gun",permalink:"/wave/docs/examples/glider-gun"}},o=[],s={rightToc:o};function p(e){var r=e.components,c=Object(i.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},s,c,{components:r,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use turtle graphics recursively to draw Hilbert curves."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+t(464).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import ui, listen, Q, graphics as g\n\n\ndef hilbert(t: g.Turtle, width: float, depth: int, reverse=False):  # recursive\n    angle = -90 if reverse else 90\n\n    if depth == 0:\n        t.f(width).r(angle).f(width).r(angle).f(width)\n        return\n\n    side = width * ((2 ** depth) - 1) / float((2 ** (depth + 1)) - 1)\n    edge = width - 2 * side\n\n    t.r(angle)\n    hilbert(t, side, depth - 1, not reverse)\n    t.r(angle).f(edge)\n    hilbert(t, side, depth - 1, reverse)\n    t.l(angle).f(edge).l(angle)\n    hilbert(t, side, depth - 1, reverse)\n    t.f(edge).r(angle)\n    hilbert(t, side, depth - 1, not reverse)\n    t.r(angle)\n\n\ndef make_hilbert_curve(width: float, depth: int):\n    t = g.turtle().f(0).pd()\n    hilbert(t, width, depth)\n    return t.d()\n\n\nasync def serve(q: Q):\n    hilbert_curve = make_hilbert_curve(300, q.args.depth or 5)\n\n    if not q.client.initialized:\n        q.page['curve'] = ui.graphics_card(\n            box='1 1 4 6', view_box='0 0 300 300', width='100%', height='100%',\n            scene=g.scene(\n                hilbert_curve=g.path(d=hilbert_curve, fill='none', stroke='#333')\n            ),\n        )\n        q.page['form'] = ui.form_card(\n            box='1 7 4 1', items=[\n                ui.slider(name='depth', label='Play with this Hilbert curve!', min=1, max=6, value=5, trigger=True),\n            ],\n        )\n        q.client.initialized = True\n    else:\n        g.draw(q.page['curve'].scene.hilbert_curve, d=hilbert_curve)\n\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}p.isMDXComponent=!0},290:function(e,r,t){"use strict";t.d(r,"a",(function(){return u})),t.d(r,"b",(function(){return b}));var n=t(0),i=t.n(n);function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function c(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 l(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?c(Object(t),!0).forEach((function(r){a(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function o(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=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<a;s++)c[s]=t[s];return i.a.createElement.apply(null,c)}return i.a.createElement.apply(null,t)}h.displayName="MDXCreateElement"},464:function(e,r,t){"use strict";t.r(r),r.default=t.p+"assets/images/graphics-hilbert-0b77a235731e83c53e6167b922a11f1c.png"}}]);
\ No newline at end of file
diff --git a/docs/f349fb86.689afca8.js b/docs/f349fb86.689afca8.js
new file mode 100644
index 0000000000..d9aa97c00d
--- /dev/null
+++ b/docs/f349fb86.689afca8.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[225],{278:function(e,r,t){"use strict";t.r(r),t.d(r,"frontMatter",(function(){return c})),t.d(r,"metadata",(function(){return l})),t.d(r,"rightToc",(function(){return o})),t.d(r,"default",(function(){return p}));var n=t(2),i=t(6),a=(t(0),t(292)),c={title:"Graphics / Hilbert"},l={unversionedId:"examples/graphics-hilbert",id:"examples/graphics-hilbert",isDocsHomePage:!1,title:"Graphics / Hilbert",description:"Use turtle graphics recursively to draw Hilbert curves.",source:"@site/docs/examples/graphics-hilbert.md",slug:"/examples/graphics-hilbert",permalink:"/wave/docs/examples/graphics-hilbert",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/graphics-hilbert.md",version:"current",sidebar:"someSidebar",previous:{title:"Graphics / Turtle",permalink:"/wave/docs/examples/graphics-turtle"},next:{title:"Graphics / Glider Gun",permalink:"/wave/docs/examples/glider-gun"}},o=[],s={rightToc:o};function p(e){var r=e.components,c=Object(i.a)(e,["components"]);return Object(a.b)("wrapper",Object(n.a)({},s,c,{components:r,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use turtle graphics recursively to draw Hilbert curves."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+t(470).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import ui, main, app, Q, graphics as g\n\n\ndef hilbert(t: g.Turtle, width: float, depth: int, reverse=False):  # recursive\n    angle = -90 if reverse else 90\n\n    if depth == 0:\n        t.f(width).r(angle).f(width).r(angle).f(width)\n        return\n\n    side = width * ((2 ** depth) - 1) / float((2 ** (depth + 1)) - 1)\n    edge = width - 2 * side\n\n    t.r(angle)\n    hilbert(t, side, depth - 1, not reverse)\n    t.r(angle).f(edge)\n    hilbert(t, side, depth - 1, reverse)\n    t.l(angle).f(edge).l(angle)\n    hilbert(t, side, depth - 1, reverse)\n    t.f(edge).r(angle)\n    hilbert(t, side, depth - 1, not reverse)\n    t.r(angle)\n\n\ndef make_hilbert_curve(width: float, depth: int):\n    t = g.turtle().f(0).pd()\n    hilbert(t, width, depth)\n    return t.d()\n\n\n@app('/demo')\nasync def serve(q: Q):\n    hilbert_curve = make_hilbert_curve(300, q.args.depth or 5)\n\n    if not q.client.initialized:\n        q.page['curve'] = ui.graphics_card(\n            box='1 1 4 6', view_box='0 0 300 300', width='100%', height='100%',\n            scene=g.scene(\n                hilbert_curve=g.path(d=hilbert_curve, fill='none', stroke='#333')\n            ),\n        )\n        q.page['form'] = ui.form_card(\n            box='1 7 4 1', items=[\n                ui.slider(name='depth', label='Play with this Hilbert curve!', min=1, max=6, value=5, trigger=True),\n            ],\n        )\n        q.client.initialized = True\n    else:\n        g.draw(q.page['curve'].scene.hilbert_curve, d=hilbert_curve)\n\n    await q.page.save()\n")))}p.isMDXComponent=!0},292:function(e,r,t){"use strict";t.d(r,"a",(function(){return u})),t.d(r,"b",(function(){return b}));var n=t(0),i=t.n(n);function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function c(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 l(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?c(Object(t),!0).forEach((function(r){a(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function o(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=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<a;s++)c[s]=t[s];return i.a.createElement.apply(null,c)}return i.a.createElement.apply(null,t)}h.displayName="MDXCreateElement"},470:function(e,r,t){"use strict";t.r(r),r.default=t.p+"assets/images/graphics-hilbert-0b77a235731e83c53e6167b922a11f1c.png"}}]);
\ No newline at end of file
diff --git a/docs/f60be60c.9007beb7.js b/docs/f60be60c.9007beb7.js
deleted file mode 100644
index d16b74ac63..0000000000
--- a/docs/f60be60c.9007beb7.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[224],{277:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return c})),t.d(n,"metadata",(function(){return i})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return p}));var a=t(2),o=t(6),r=(t(0),t(290)),c={title:"Toolbar"},i={unversionedId:"examples/toolbar",id:"examples/toolbar",isDocsHomePage:!1,title:"Toolbar",description:"Use toolbars to provide commands that operate on the content of a page.",source:"@site/docs/examples/toolbar.md",slug:"/examples/toolbar",permalink:"/wave/docs/examples/toolbar",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/toolbar.md",version:"current",sidebar:"someSidebar",previous:{title:"Nav",permalink:"/wave/docs/examples/nav"},next:{title:"Tab",permalink:"/wave/docs/examples/tab"}},l=[],m={rightToc:l};function p(e){var n=e.components,c=Object(o.a)(e,["components"]);return Object(r.b)("wrapper",Object(a.a)({},m,c,{components:n,mdxType:"MDXLayout"}),Object(r.b)("p",null,"Use toolbars to provide commands that operate on the content of a page."),Object(r.b)("div",{className:"cover",style:{backgroundImage:"url("+t(439).default+")"}}),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    q.page['nav'] = ui.toolbar_card(\n        box='1 1 4 1',\n        items=[\n            ui.command(\n                name='new', label='New', icon='Add', items=[\n                    ui.command(name='email', label='Email Message', icon='Mail'),\n                    ui.command(name='calendar', label='Calendar Event', icon='Calendar'),\n                ]\n            ),\n            ui.command(name='upload', label='Upload', icon='Upload'),\n            ui.command(name='share', label='Share', icon='Share'),\n            ui.command(name='download', label='Download', icon='Download'),\n        ],\n        secondary_items=[\n            ui.command(name='tile', caption='Grid View', icon='Tiles'),\n            ui.command(name='info', caption='Info', icon='Info'),\n        ],\n        overflow_items=[\n            ui.command(name='move', label='Move to...', icon='MoveToFolder'),\n            ui.command(name='copy', label='Copy to...', icon='Copy'),\n            ui.command(name='rename', label='Rename', icon='Edit'),\n        ],\n    )\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}p.isMDXComponent=!0},290:function(e,n,t){"use strict";t.d(n,"a",(function(){return s})),t.d(n,"b",(function(){return b}));var a=t(0),o=t.n(a);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 c(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?c(Object(t),!0).forEach((function(n){r(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,a,o=function(e,n){if(null==e)return{};var t,a,o={},r=Object.keys(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=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<r;m++)c[m]=t[m];return o.a.createElement.apply(null,c)}return o.a.createElement.apply(null,t)}d.displayName="MDXCreateElement"},439:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/toolbar-6cae7b599ebdc78e77db0f536dc3392e.png"}}]);
\ No newline at end of file
diff --git a/docs/f60be60c.c40d6c3e.js b/docs/f60be60c.c40d6c3e.js
new file mode 100644
index 0000000000..7c226042c8
--- /dev/null
+++ b/docs/f60be60c.c40d6c3e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[226],{279:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return c})),t.d(n,"metadata",(function(){return i})),t.d(n,"rightToc",(function(){return l})),t.d(n,"default",(function(){return p}));var a=t(2),o=t(6),r=(t(0),t(292)),c={title:"Toolbar"},i={unversionedId:"examples/toolbar",id:"examples/toolbar",isDocsHomePage:!1,title:"Toolbar",description:"Use toolbars to provide commands that operate on the content of a page.",source:"@site/docs/examples/toolbar.md",slug:"/examples/toolbar",permalink:"/wave/docs/examples/toolbar",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/toolbar.md",version:"current",sidebar:"someSidebar",previous:{title:"Nav",permalink:"/wave/docs/examples/nav"},next:{title:"Tab",permalink:"/wave/docs/examples/tab"}},l=[],m={rightToc:l};function p(e){var n=e.components,c=Object(o.a)(e,["components"]);return Object(r.b)("wrapper",Object(a.a)({},m,c,{components:n,mdxType:"MDXLayout"}),Object(r.b)("p",null,"Use toolbars to provide commands that operate on the content of a page."),Object(r.b)("div",{className:"cover",style:{backgroundImage:"url("+t(444).default+")"}}),Object(r.b)("pre",null,Object(r.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    q.page['nav'] = ui.toolbar_card(\n        box='1 1 4 1',\n        items=[\n            ui.command(\n                name='new', label='New', icon='Add', items=[\n                    ui.command(name='email', label='Email Message', icon='Mail'),\n                    ui.command(name='calendar', label='Calendar Event', icon='Calendar'),\n                ]\n            ),\n            ui.command(name='upload', label='Upload', icon='Upload'),\n            ui.command(name='share', label='Share', icon='Share'),\n            ui.command(name='download', label='Download', icon='Download'),\n        ],\n        secondary_items=[\n            ui.command(name='tile', caption='Grid View', icon='Tiles'),\n            ui.command(name='info', caption='Info', icon='Info'),\n        ],\n        overflow_items=[\n            ui.command(name='move', label='Move to...', icon='MoveToFolder'),\n            ui.command(name='copy', label='Copy to...', icon='Copy'),\n            ui.command(name='rename', label='Rename', icon='Edit'),\n        ],\n    )\n    await q.page.save()\n")))}p.isMDXComponent=!0},292:function(e,n,t){"use strict";t.d(n,"a",(function(){return s})),t.d(n,"b",(function(){return b}));var a=t(0),o=t.n(a);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 c(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?c(Object(t),!0).forEach((function(n){r(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n){if(null==e)return{};var t,a,o=function(e,n){if(null==e)return{};var t,a,o={},r=Object.keys(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)t=r[a],n.indexOf(t)>=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<r;m++)c[m]=t[m];return o.a.createElement.apply(null,c)}return o.a.createElement.apply(null,t)}d.displayName="MDXCreateElement"},444:function(e,n,t){"use strict";t.r(n),n.default=t.p+"assets/images/toolbar-6cae7b599ebdc78e77db0f536dc3392e.png"}}]);
\ No newline at end of file
diff --git a/docs/f7ea47c5.d992c5ba.js b/docs/f7ea47c5.f9a0edd9.js
similarity index 97%
rename from docs/f7ea47c5.d992c5ba.js
rename to docs/f7ea47c5.f9a0edd9.js
index 1ad01c26a2..ed66e4c460 100644
--- a/docs/f7ea47c5.d992c5ba.js
+++ b/docs/f7ea47c5.f9a0edd9.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[225],{278:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return l})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return s})),r.d(t,"default",(function(){return p}));var a=r(2),n=r(6),o=(r(0),r(290)),l={title:"Tutorial: Beer Wall"},i={unversionedId:"tutorial-beer",id:"tutorial-beer",isDocsHomePage:!1,title:"Tutorial: Beer Wall",description:"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.",source:"@site/docs/tutorial-beer.md",slug:"/tutorial-beer",permalink:"/wave/docs/tutorial-beer",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/tutorial-beer.md",version:"current",sidebar:"someSidebar",previous:{title:"Tutorial: Hello World",permalink:"/wave/docs/tutorial-hello"},next:{title:"Tutorial: System Monitor",permalink:"/wave/docs/tutorial-monitor"}},s=[{value:"Prerequisites",id:"prerequisites",children:[]},{value:"Step 1: Write your program",id:"step-1-write-your-program",children:[]},{value:"Step 2: Run your program",id:"step-2-run-your-program",children:[]},{value:"Step 3: Watch updates live",id:"step-3-watch-updates-live",children:[]},{value:"Step 4: Make it more efficient",id:"step-4-make-it-more-efficient",children:[]},{value:"Summary",id:"summary",children:[]}],b={rightToc:s};function p(e){var t=e.components,l=Object(n.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},b,l,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"The program we'll be writing is a verse generator for the runaway mid-20th century smash hit, ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/99_Bottles_of_Beer"}),"99 Bottles of Beer"),", which looks something like this:"),Object(o.b)("blockquote",null,Object(o.b)("p",{parentName:"blockquote"},"99 bottles of beer on the wall, 99 bottles of beer.",Object(o.b)("br",null),"\nTake one down, pass it around, 98 bottles of beer on the wall..."),Object(o.b)("p",{parentName:"blockquote"},"98 bottles of beer on the wall, 98 bottles of beer.",Object(o.b)("br",null),"\nTake one down, pass it around, 97 bottles of beer on the wall..."),Object(o.b)("p",{parentName:"blockquote"},"...")),Object(o.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(o.b)("source",{src:r(478).default,type:"video/mp4"})),Object(o.b)("p",null,"Our program will be analogous to ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/tutorial-hello"}),'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 ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/expressions"}),"expressions")," work."),Object(o.b)("p",null,"(Incidentally, Donald Knuth proved that this song has a complexity of ",Object(o.b)("inlineCode",{parentName:"p"},"O(log N)")," in ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"http://www.cs.bme.hu/~friedl/alg/knuth_song_complexity.pdf"}),'"The Complexity of Songs"'),", but we won't let that little detail deter us for now.)"),Object(o.b)("h2",{id:"prerequisites"},"Prerequisites"),Object(o.b)("p",null,"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 ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/tutorial-hello"}),"Hello World tutorial")," and complete steps 1 and 2."),Object(o.b)("h2",{id:"step-1-write-your-program"},"Step 1: Write your program"),Object(o.b)("p",null,"Our program looks like this. It's mostly similar to the one in the  ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/tutorial-hello"}),"Hello World tutorial"),", with one exception: we're setting the markdown card's content inside a ",Object(o.b)("inlineCode",{parentName:"p"},"for")," loop."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:'{13-18} title="$HOME/wave-apps/beer_wall.py"',"{13-18}":!0,title:'"$HOME/wave-apps/beer_wall.py"'}),"import time\nfrom h2o_wave import site, ui\n\npage = site['/beer']\n\nbeer_card = page.add('wall', ui.markdown_card(\n    box='1 1 4 2',\n    title='99 Bottles of Beer',\n    content='',\n))\n\nfor i in range(99, 0, -1):\n    beer_card.content = f\"\"\"\n{i} bottles of beer on the wall, {i} bottles of beer.\n\nTake one down, pass it around, {i - 1} bottles of beer on the wall...\n\"\"\"\n    page.save()\n    time.sleep(1)\n")),Object(o.b)("h2",{id:"step-2-run-your-program"},"Step 2: Run your program"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave-apps\n./venv/bin/python beer_wall.py\n")),Object(o.b)("h2",{id:"step-3-watch-updates-live"},"Step 3: Watch updates live"),Object(o.b)("p",null,"Point your browser to ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"http://localhost:55555/beer"}),"http://localhost:55555/beer"),", and watch the verses fly by."),Object(o.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(o.b)("source",{src:r(478).default,type:"video/mp4"})),Object(o.b)("h2",{id:"step-4-make-it-more-efficient"},"Step 4: Make it more efficient"),Object(o.b)("p",null,"Our program is accurate, but not necessarily efficient. Every second, it sends the entire verse in its entirety to the Wave server, with only minuscule changes (",Object(o.b)("inlineCode",{parentName:"p"},"i")," and ",Object(o.b)("inlineCode",{parentName:"p"},"i-1"),"). You can observe this in the Wave server's log (switch to the terminal window running the Wave server to view the log):  "),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{}),'2020/10/02 12:13:43 * /beer {"d":[{"k":"wall content","v":"\\n98 bottles of beer on the wall, 98 bottles of beer.\\n\\nTake one down, pass it around, 97 bottles of beer on the wall...\\n"}]}\n2020/10/02 12:13:44 * /beer {"d":[{"k":"wall content","v":"\\n97 bottles of beer on the wall, 97 bottles of beer.\\n\\nTake one down, pass it around, 96 bottles of beer on the wall...\\n"}]}\n2020/10/02 12:13:46 * /beer {"d":[{"k":"wall content","v":"\\n96 bottles of beer on the wall, 96 bottles of beer.\\n\\nTake one down, pass it around, 95 bottles of beer on the wall...\\n"}]}\n2020/10/02 12:13:47 * /beer {"d":[{"k":"wall content","v":"\\n95 bottles of beer on the wall, 95 bottles of beer.\\n\\nTake one down, pass it around, 94 bottles of beer on the wall...\\n"}]}\n2020/10/02 12:13:48 * /beer {"d":[{"k":"wall content","v":"\\n94 bottles of beer on the wall, 94 bottles of beer.\\n\\nTake one down, pass it around, 93 bottles of beer on the wall...\\n"}]}\n')),Object(o.b)("p",null,"We can do better. Instead of sending the verse over and over again, we can send the verse once with placeholders for ",Object(o.b)("inlineCode",{parentName:"p"},"i")," and ",Object(o.b)("inlineCode",{parentName:"p"},"i-1"),", and then send only ",Object(o.b)("inlineCode",{parentName:"p"},"i")," and ",Object(o.b)("inlineCode",{parentName:"p"},"i-1")," during subsequent updates. That will keep network traffic down to a minimum and allow the Wave server to perform less work while sending your updates to your website's bajillion visitors."),Object(o.b)("p",null,"Here's how we approach this. First, when we create our markdown card, we set the content to an ",Object(o.b)("em",{parentName:"p"},"expression")," (or ",Object(o.b)("em",{parentName:"p"},"formula"),"). An expression is a string that starts with ",Object(o.b)("inlineCode",{parentName:"p"},"=")," (similar to formulae in spreadsheet software). Our expression looks like this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"beer_verse = '''={{before}} bottles of beer on the wall, {{before}} bottles of beer.\n\nTake one down, pass it around, {{after}} bottles of beer on the wall...\n'''\n")),Object(o.b)("p",null,"We've used a triple-quoted multi-line string here, but you can use single- or double-quoted strings as well. The tokens inside the ",Object(o.b)("inlineCode",{parentName:"p"},"{{")," and ",Object(o.b)("inlineCode",{parentName:"p"},"}}")," are placeholders. Note how the verse string starts with a ",Object(o.b)("inlineCode",{parentName:"p"},"="),", indicating that this is an expression."),Object(o.b)("p",null,"Next, we create the markdown card as usual using our verse as the ",Object(o.b)("inlineCode",{parentName:"p"},"content"),". But more importantly, we set the card's ",Object(o.b)("inlineCode",{parentName:"p"},"data")," attribute to a Python dictionary containing values for the placeholders ",Object(o.b)("inlineCode",{parentName:"p"},"before")," and ",Object(o.b)("inlineCode",{parentName:"p"},"after"),":"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{4-5}","{4-5}":!0}),"beer_card = page.add('wall', ui.markdown_card(\n    box='1 1 4 2',\n    title='99 Bottles of Beer',\n    content=beer_verse,\n    data=dict(before='99', after='98'),\n))\n")),Object(o.b)("p",null,"Finally, instead of updating the entire verse every second, we update only the ",Object(o.b)("inlineCode",{parentName:"p"},".data.before")," and ",Object(o.b)("inlineCode",{parentName:"p"},".data.after")," attributes of the markdown card:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{2-3}","{2-3}":!0}),"for i in range(99, 0, -1):\n    beer_card.data.before = str(i)\n    beer_card.data.after = str(i - 1)\n    page.save()\n    time.sleep(1)\n")),Object(o.b)("p",null,"Our final program looks like the listing below. You'll notice that the size of our program is mostly unchanged from before."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"import time\nfrom h2o_wave import site, ui\n\npage = site['/beer']\n\nbeer_verse = '''={{before}} bottles of beer on the wall, {{before}} bottles of beer.\n\nTake one down, pass it around, {{after}} bottles of beer on the wall...\n'''\n\nbeer_card = page.add('wall', ui.markdown_card(\n    box='1 1 4 2',\n    title='99 Bottles of Beer',\n    content=beer_verse,\n    data=dict(before='99', after='98'),\n))\n\nfor i in range(99, 0, -1):\n    beer_card.data.before = str(i)\n    beer_card.data.after = str(i - 1)\n    page.save()\n    time.sleep(1)\n")),Object(o.b)("p",null,"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: "),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{}),'2020/10/02 13:53:11 * /beer {"d":[{"k":"wall data before","v":"98"},{"k":"wall data after","v":"97"}]}\n2020/10/02 13:53:12 * /beer {"d":[{"k":"wall data before","v":"97"},{"k":"wall data after","v":"96"}]}\n2020/10/02 13:53:13 * /beer {"d":[{"k":"wall data before","v":"96"},{"k":"wall data after","v":"95"}]}\n2020/10/02 13:53:14 * /beer {"d":[{"k":"wall data before","v":"95"},{"k":"wall data after","v":"94"}]}\n2020/10/02 13:53:15 * /beer {"d":[{"k":"wall data before","v":"94"},{"k":"wall data after","v":"93"}]}\n2020/10/02 13:53:16 * /beer {"d":[{"k":"wall data before","v":"93"},{"k":"wall data after","v":"92"}]}\n')),Object(o.b)("h2",{id:"summary"},"Summary"),Object(o.b)("p",null,"In this tutorial, we learned how to send periodic updates to the Wave server and observe changes in realtime. "),Object(o.b)("p",null,"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."))}p.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return c})),r.d(t,"b",(function(){return h}));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 l(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 i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function s(e,t){if(null==e)return{};var r,a,n=function(e,t){if(null==e)return{};var r,a,n={},o=Object.keys(e);for(a=0;a<o.length;a++)r=o[a],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)r=o[a],t.indexOf(r)>=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<o;b++)l[b]=r[b];return n.a.createElement.apply(null,l)}return n.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},478:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/medias/tutorial-beer__demo-cb829b4b335d0d619fa4ce4ff0a516bf.mp4"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[227],{280:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return l})),r.d(t,"metadata",(function(){return i})),r.d(t,"rightToc",(function(){return s})),r.d(t,"default",(function(){return p}));var a=r(2),n=r(6),o=(r(0),r(292)),l={title:"Tutorial: Beer Wall"},i={unversionedId:"tutorial-beer",id:"tutorial-beer",isDocsHomePage:!1,title:"Tutorial: Beer Wall",description:"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.",source:"@site/docs/tutorial-beer.md",slug:"/tutorial-beer",permalink:"/wave/docs/tutorial-beer",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/tutorial-beer.md",version:"current",sidebar:"someSidebar",previous:{title:"Tutorial: Hello World",permalink:"/wave/docs/tutorial-hello"},next:{title:"Tutorial: System Monitor",permalink:"/wave/docs/tutorial-monitor"}},s=[{value:"Prerequisites",id:"prerequisites",children:[]},{value:"Step 1: Write your program",id:"step-1-write-your-program",children:[]},{value:"Step 2: Run your program",id:"step-2-run-your-program",children:[]},{value:"Step 3: Watch updates live",id:"step-3-watch-updates-live",children:[]},{value:"Step 4: Make it more efficient",id:"step-4-make-it-more-efficient",children:[]},{value:"Summary",id:"summary",children:[]}],b={rightToc:s};function p(e){var t=e.components,l=Object(n.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},b,l,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"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."),Object(o.b)("p",null,"The program we'll be writing is a verse generator for the runaway mid-20th century smash hit, ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"https://en.wikipedia.org/wiki/99_Bottles_of_Beer"}),"99 Bottles of Beer"),", which looks something like this:"),Object(o.b)("blockquote",null,Object(o.b)("p",{parentName:"blockquote"},"99 bottles of beer on the wall, 99 bottles of beer.",Object(o.b)("br",null),"\nTake one down, pass it around, 98 bottles of beer on the wall..."),Object(o.b)("p",{parentName:"blockquote"},"98 bottles of beer on the wall, 98 bottles of beer.",Object(o.b)("br",null),"\nTake one down, pass it around, 97 bottles of beer on the wall..."),Object(o.b)("p",{parentName:"blockquote"},"...")),Object(o.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(o.b)("source",{src:r(484).default,type:"video/mp4"})),Object(o.b)("p",null,"Our program will be analogous to ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/tutorial-hello"}),'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 ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/expressions"}),"expressions")," work."),Object(o.b)("p",null,"(Incidentally, Donald Knuth proved that this song has a complexity of ",Object(o.b)("inlineCode",{parentName:"p"},"O(log N)")," in ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"http://www.cs.bme.hu/~friedl/alg/knuth_song_complexity.pdf"}),'"The Complexity of Songs"'),", but we won't let that little detail deter us for now.)"),Object(o.b)("h2",{id:"prerequisites"},"Prerequisites"),Object(o.b)("p",null,"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 ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/tutorial-hello"}),"Hello World tutorial")," and complete steps 1 and 2."),Object(o.b)("h2",{id:"step-1-write-your-program"},"Step 1: Write your program"),Object(o.b)("p",null,"Our program looks like this. It's mostly similar to the one in the  ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"/wave/docs/tutorial-hello"}),"Hello World tutorial"),", with one exception: we're setting the markdown card's content inside a ",Object(o.b)("inlineCode",{parentName:"p"},"for")," loop."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:'{13-18} title="$HOME/wave-apps/beer_wall.py"',"{13-18}":!0,title:'"$HOME/wave-apps/beer_wall.py"'}),"import time\nfrom h2o_wave import site, ui\n\npage = site['/beer']\n\nbeer_card = page.add('wall', ui.markdown_card(\n    box='1 1 4 2',\n    title='99 Bottles of Beer',\n    content='',\n))\n\nfor i in range(99, 0, -1):\n    beer_card.content = f\"\"\"\n{i} bottles of beer on the wall, {i} bottles of beer.\n\nTake one down, pass it around, {i - 1} bottles of beer on the wall...\n\"\"\"\n    page.save()\n    time.sleep(1)\n")),Object(o.b)("h2",{id:"step-2-run-your-program"},"Step 2: Run your program"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave-apps\n./venv/bin/python beer_wall.py\n")),Object(o.b)("h2",{id:"step-3-watch-updates-live"},"Step 3: Watch updates live"),Object(o.b)("p",null,"Point your browser to ",Object(o.b)("a",Object(a.a)({parentName:"p"},{href:"http://localhost:55555/beer"}),"http://localhost:55555/beer"),", and watch the verses fly by."),Object(o.b)("video",{autoplay:"autoplay",loop:"loop",muted:"muted"},Object(o.b)("source",{src:r(484).default,type:"video/mp4"})),Object(o.b)("h2",{id:"step-4-make-it-more-efficient"},"Step 4: Make it more efficient"),Object(o.b)("p",null,"Our program is accurate, but not necessarily efficient. Every second, it sends the entire verse in its entirety to the Wave server, with only minuscule changes (",Object(o.b)("inlineCode",{parentName:"p"},"i")," and ",Object(o.b)("inlineCode",{parentName:"p"},"i-1"),"). You can observe this in the Wave server's log (switch to the terminal window running the Wave server to view the log):  "),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{}),'2020/10/02 12:13:43 * /beer {"d":[{"k":"wall content","v":"\\n98 bottles of beer on the wall, 98 bottles of beer.\\n\\nTake one down, pass it around, 97 bottles of beer on the wall...\\n"}]}\n2020/10/02 12:13:44 * /beer {"d":[{"k":"wall content","v":"\\n97 bottles of beer on the wall, 97 bottles of beer.\\n\\nTake one down, pass it around, 96 bottles of beer on the wall...\\n"}]}\n2020/10/02 12:13:46 * /beer {"d":[{"k":"wall content","v":"\\n96 bottles of beer on the wall, 96 bottles of beer.\\n\\nTake one down, pass it around, 95 bottles of beer on the wall...\\n"}]}\n2020/10/02 12:13:47 * /beer {"d":[{"k":"wall content","v":"\\n95 bottles of beer on the wall, 95 bottles of beer.\\n\\nTake one down, pass it around, 94 bottles of beer on the wall...\\n"}]}\n2020/10/02 12:13:48 * /beer {"d":[{"k":"wall content","v":"\\n94 bottles of beer on the wall, 94 bottles of beer.\\n\\nTake one down, pass it around, 93 bottles of beer on the wall...\\n"}]}\n')),Object(o.b)("p",null,"We can do better. Instead of sending the verse over and over again, we can send the verse once with placeholders for ",Object(o.b)("inlineCode",{parentName:"p"},"i")," and ",Object(o.b)("inlineCode",{parentName:"p"},"i-1"),", and then send only ",Object(o.b)("inlineCode",{parentName:"p"},"i")," and ",Object(o.b)("inlineCode",{parentName:"p"},"i-1")," during subsequent updates. That will keep network traffic down to a minimum and allow the Wave server to perform less work while sending your updates to your website's bajillion visitors."),Object(o.b)("p",null,"Here's how we approach this. First, when we create our markdown card, we set the content to an ",Object(o.b)("em",{parentName:"p"},"expression")," (or ",Object(o.b)("em",{parentName:"p"},"formula"),"). An expression is a string that starts with ",Object(o.b)("inlineCode",{parentName:"p"},"=")," (similar to formulae in spreadsheet software). Our expression looks like this:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"beer_verse = '''={{before}} bottles of beer on the wall, {{before}} bottles of beer.\n\nTake one down, pass it around, {{after}} bottles of beer on the wall...\n'''\n")),Object(o.b)("p",null,"We've used a triple-quoted multi-line string here, but you can use single- or double-quoted strings as well. The tokens inside the ",Object(o.b)("inlineCode",{parentName:"p"},"{{")," and ",Object(o.b)("inlineCode",{parentName:"p"},"}}")," are placeholders. Note how the verse string starts with a ",Object(o.b)("inlineCode",{parentName:"p"},"="),", indicating that this is an expression."),Object(o.b)("p",null,"Next, we create the markdown card as usual using our verse as the ",Object(o.b)("inlineCode",{parentName:"p"},"content"),". But more importantly, we set the card's ",Object(o.b)("inlineCode",{parentName:"p"},"data")," attribute to a Python dictionary containing values for the placeholders ",Object(o.b)("inlineCode",{parentName:"p"},"before")," and ",Object(o.b)("inlineCode",{parentName:"p"},"after"),":"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{4-5}","{4-5}":!0}),"beer_card = page.add('wall', ui.markdown_card(\n    box='1 1 4 2',\n    title='99 Bottles of Beer',\n    content=beer_verse,\n    data=dict(before='99', after='98'),\n))\n")),Object(o.b)("p",null,"Finally, instead of updating the entire verse every second, we update only the ",Object(o.b)("inlineCode",{parentName:"p"},".data.before")," and ",Object(o.b)("inlineCode",{parentName:"p"},".data.after")," attributes of the markdown card:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{2-3}","{2-3}":!0}),"for i in range(99, 0, -1):\n    beer_card.data.before = str(i)\n    beer_card.data.after = str(i - 1)\n    page.save()\n    time.sleep(1)\n")),Object(o.b)("p",null,"Our final program looks like the listing below. You'll notice that the size of our program is mostly unchanged from before."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"import time\nfrom h2o_wave import site, ui\n\npage = site['/beer']\n\nbeer_verse = '''={{before}} bottles of beer on the wall, {{before}} bottles of beer.\n\nTake one down, pass it around, {{after}} bottles of beer on the wall...\n'''\n\nbeer_card = page.add('wall', ui.markdown_card(\n    box='1 1 4 2',\n    title='99 Bottles of Beer',\n    content=beer_verse,\n    data=dict(before='99', after='98'),\n))\n\nfor i in range(99, 0, -1):\n    beer_card.data.before = str(i)\n    beer_card.data.after = str(i - 1)\n    page.save()\n    time.sleep(1)\n")),Object(o.b)("p",null,"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: "),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{}),'2020/10/02 13:53:11 * /beer {"d":[{"k":"wall data before","v":"98"},{"k":"wall data after","v":"97"}]}\n2020/10/02 13:53:12 * /beer {"d":[{"k":"wall data before","v":"97"},{"k":"wall data after","v":"96"}]}\n2020/10/02 13:53:13 * /beer {"d":[{"k":"wall data before","v":"96"},{"k":"wall data after","v":"95"}]}\n2020/10/02 13:53:14 * /beer {"d":[{"k":"wall data before","v":"95"},{"k":"wall data after","v":"94"}]}\n2020/10/02 13:53:15 * /beer {"d":[{"k":"wall data before","v":"94"},{"k":"wall data after","v":"93"}]}\n2020/10/02 13:53:16 * /beer {"d":[{"k":"wall data before","v":"93"},{"k":"wall data after","v":"92"}]}\n')),Object(o.b)("h2",{id:"summary"},"Summary"),Object(o.b)("p",null,"In this tutorial, we learned how to send periodic updates to the Wave server and observe changes in realtime. "),Object(o.b)("p",null,"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."))}p.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return c})),r.d(t,"b",(function(){return h}));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 l(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 i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function s(e,t){if(null==e)return{};var r,a,n=function(e,t){if(null==e)return{};var r,a,n={},o=Object.keys(e);for(a=0;a<o.length;a++)r=o[a],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)r=o[a],t.indexOf(r)>=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<o;b++)l[b]=r[b];return n.a.createElement.apply(null,l)}return n.a.createElement.apply(null,r)}d.displayName="MDXCreateElement"},484:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/medias/tutorial-beer__demo-cb829b4b335d0d619fa4ce4ff0a516bf.mp4"}}]);
\ No newline at end of file
diff --git a/docs/f811e444.64e4a563.js b/docs/f811e444.64e4a563.js
deleted file mode 100644
index 186a72ba57..0000000000
--- a/docs/f811e444.64e4a563.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[226],{279:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return r})),n.d(t,"metadata",(function(){return s})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return p}));var a=n(2),i=n(6),o=(n(0),n(290)),r={title:"Routing"},s={unversionedId:"routing",id:"routing",isDocsHomePage:!1,title:"Routing",description:"App routing",source:"@site/docs/routing.md",slug:"/routing",permalink:"/wave/docs/routing",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/routing.md",version:"current",sidebar:"someSidebar",previous:{title:"State",permalink:"/wave/docs/state"},next:{title:"Realtime Sync",permalink:"/wave/docs/realtime"}},c=[{value:"App routing",id:"app-routing",children:[]},{value:"Hash routing",id:"hash-routing",children:[{value:"Setting the location hash",id:"setting-the-location-hash",children:[]},{value:"Getting the location hash",id:"getting-the-location-hash",children:[]},{value:"Hash route switching",id:"hash-route-switching",children:[]}]}],l={rightToc:c};function p(e){var t=e.components,n=Object(i.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},l,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("h2",{id:"app-routing"},"App routing"),Object(o.b)("p",null,"Your Wave app gets hosted at the route you passed to ",Object(o.b)("inlineCode",{parentName:"p"},"listen()"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{6}","{6}":!0}),"from h2o_wave import Q, listen\n\nasync def serve(q: Q):\n    pass\n\nlisten('/foo', serve)\n")),Object(o.b)("p",null,"To host your app at ",Object(o.b)("inlineCode",{parentName:"p"},"localhost:55555/foo")," or ",Object(o.b)("inlineCode",{parentName:"p"},"www.example.com/foo"),", pass ",Object(o.b)("inlineCode",{parentName:"p"},"/foo")," to ",Object(o.b)("inlineCode",{parentName:"p"},"listen()"),"."),Object(o.b)("p",null,"To host your app at ",Object(o.b)("inlineCode",{parentName:"p"},"localhost:55555")," or ",Object(o.b)("inlineCode",{parentName:"p"},"www.example.com"),", pass ",Object(o.b)("inlineCode",{parentName:"p"},"/")," to ",Object(o.b)("inlineCode",{parentName:"p"},"listen()"),". Do this if you plan to host exactly one app and nothing else."),Object(o.b)("p",null,"You can host multiple apps behind a single Wave server."),Object(o.b)("div",{className:"admonition admonition-caution alert alert--warning"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}),Object(o.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})))),"caution")),Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},Object(o.b)("inlineCode",{parentName:"p"},"/foo")," and ",Object(o.b)("inlineCode",{parentName:"p"},"/foo/bar")," are two distinct paths. ",Object(o.b)("inlineCode",{parentName:"p"},"/foo/bar")," is not interpreted as a sub-path of ",Object(o.b)("inlineCode",{parentName:"p"},"/foo"),"."))),Object(o.b)("h2",{id:"hash-routing"},"Hash routing"),Object(o.b)("p",null,"Wave apps support ",Object(o.b)("em",{parentName:"p"},"hash routing"),", a popular client-side mechanism where the location hash (the ",Object(o.b)("inlineCode",{parentName:"p"},"baz/qux")," in ",Object(o.b)("inlineCode",{parentName:"p"},"/foo/bar#baz/qux"),") can be used to decide which part of the UI to display."),Object(o.b)("h3",{id:"setting-the-location-hash"},"Setting the location hash"),Object(o.b)("p",null,"To set the location hash, prefix ",Object(o.b)("inlineCode",{parentName:"p"},"#")," to the ",Object(o.b)("inlineCode",{parentName:"p"},"name")," attribute of command-like components. When the command is invoked, the location hash is set to the name of the command."),Object(o.b)("p",null,"For example, if a button is named ",Object(o.b)("inlineCode",{parentName:"p"},"foo")," is clicked, ",Object(o.b)("inlineCode",{parentName:"p"},"q.args.foo")," is set to ",Object(o.b)("inlineCode",{parentName:"p"},"True"),". Instead, if a button named ",Object(o.b)("inlineCode",{parentName:"p"},"#foo")," is clicked, the location hash is set to ",Object(o.b)("inlineCode",{parentName:"p"},"foo")," (",Object(o.b)("inlineCode",{parentName:"p"},"q.args.foo")," is not set). "),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{7-8}","{7-8}":!0}),"from h2o_wave import Q, listen, ui\n\nasync def serve(q: Q):\n    q.page['sides'] = ui.form_card(\n        box='1 1 4 4',\n        items=[\n            ui.button(name='#heads', label='Heads'),\n            ui.button(name='#tails', label='Tails'),\n        ],\n    )\n    q.page.save()\n\nlisten('/toss', serve)\n")),Object(o.b)("p",null,"Names don't have to be alphanumeric, so you can use names with nested sub-paths like ",Object(o.b)("inlineCode",{parentName:"p"},"#foo/bar"),", ",Object(o.b)("inlineCode",{parentName:"p"},"#foo/bar/baz"),", ",Object(o.b)("inlineCode",{parentName:"p"},"#foo/bar/baz/qux")," to make route-handling more manageable."),Object(o.b)("p",null,"The components that support setting a location hash are:"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"ui.button()")),Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"ui.command()")),Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"ui.nav_item()")),Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"ui.tab()")),Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"ui.breadcrumb()"))),Object(o.b)("h3",{id:"getting-the-location-hash"},"Getting the location hash"),Object(o.b)("p",null,"To get the location hash, read ",Object(o.b)("inlineCode",{parentName:"p"},"q.args['#']")," (a string). If the route in the browser's address bar is ",Object(o.b)("inlineCode",{parentName:"p"},"/foo/bar#baz/qux"),", ",Object(o.b)("inlineCode",{parentName:"p"},"q.args['#']")," is set to ",Object(o.b)("inlineCode",{parentName:"p"},"baz/qux"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{4-8}","{4-8}":!0}),"from h2o_wave import Q, listen, ui\n\nasync def serve(q: Q):\n    hash = q.args['#']\n    if hash == 'heads':\n        print('Heads!')\n    elif hash == 'tails':\n        print('Tails!')\n\n    q.page.save()\n\nlisten('/toss', serve)\n")),Object(o.b)("h3",{id:"hash-route-switching"},"Hash route switching"),Object(o.b)("p",null,"Combining the two examples above gives us a basic pattern for handling routes and updating the user interface:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{6,8,10}","{6,8,10}":!0}),"from h2o_wave import Q, listen, ui\n\nasync def serve(q: Q):\n    hash = q.args['#']\n\n    if hash == 'heads':\n        q.page['sides'].items = [ui.message_bar(text='Heads!')]\n    elif hash == 'tails':\n        q.page['sides'].items = [ui.message_bar(text='Tails!')]\n    else:\n        q.page['sides'] = ui.form_card(\n            box='1 1 4 4',\n            items=[\n                ui.button(name='#heads', label='Heads'),\n                ui.button(name='#tails', label='Tails'),\n            ],\n        )\n\n    q.page.save()\n\nlisten('/toss', serve)\n")))}p.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return b})),n.d(t,"b",(function(){return d}));var a=n(0),i=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 r(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 s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n,a,i={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=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<o;l++)r[l]=n[l];return i.a.createElement.apply(null,r)}return i.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/f811e444.acf97bbf.js b/docs/f811e444.acf97bbf.js
new file mode 100644
index 0000000000..bb7e0bc5d5
--- /dev/null
+++ b/docs/f811e444.acf97bbf.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[228],{281:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return r})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return b}));var a=n(2),i=n(6),o=(n(0),n(292)),r={title:"Routing"},p={unversionedId:"routing",id:"routing",isDocsHomePage:!1,title:"Routing",description:"App routing",source:"@site/docs/routing.md",slug:"/routing",permalink:"/wave/docs/routing",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/routing.md",version:"current",sidebar:"someSidebar",previous:{title:"State",permalink:"/wave/docs/state"},next:{title:"Realtime Sync",permalink:"/wave/docs/realtime"}},c=[{value:"App routing",id:"app-routing",children:[]},{value:"Hash routing",id:"hash-routing",children:[{value:"Setting the location hash",id:"setting-the-location-hash",children:[]},{value:"Getting the location hash",id:"getting-the-location-hash",children:[]},{value:"Hash route switching",id:"hash-route-switching",children:[]}]}],s={rightToc:c};function b(e){var t=e.components,n=Object(i.a)(e,["components"]);return Object(o.b)("wrapper",Object(a.a)({},s,n,{components:t,mdxType:"MDXLayout"}),Object(o.b)("h2",{id:"app-routing"},"App routing"),Object(o.b)("p",null,"Your Wave app gets hosted at the route you passed to ",Object(o.b)("inlineCode",{parentName:"p"},"@app()"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{3}","{3}":!0}),"from h2o_wave import Q, main, app\n\n@app('/foo')\nasync def serve(q: Q):\n    pass\n")),Object(o.b)("p",null,"To host your app at ",Object(o.b)("inlineCode",{parentName:"p"},"localhost:55555/foo")," or ",Object(o.b)("inlineCode",{parentName:"p"},"www.example.com/foo"),", pass ",Object(o.b)("inlineCode",{parentName:"p"},"/foo")," to ",Object(o.b)("inlineCode",{parentName:"p"},"@app()"),"."),Object(o.b)("p",null,"To host your app at ",Object(o.b)("inlineCode",{parentName:"p"},"localhost:55555")," or ",Object(o.b)("inlineCode",{parentName:"p"},"www.example.com"),", pass ",Object(o.b)("inlineCode",{parentName:"p"},"/")," to ",Object(o.b)("inlineCode",{parentName:"p"},"@app()"),". Do this if you plan to host exactly one app and nothing else."),Object(o.b)("p",null,"You can host multiple apps behind a single Wave server."),Object(o.b)("div",{className:"admonition admonition-caution alert alert--warning"},Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(a.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(a.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}),Object(o.b)("path",Object(a.a)({parentName:"svg"},{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})))),"caution")),Object(o.b)("div",Object(a.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},Object(o.b)("inlineCode",{parentName:"p"},"/foo")," and ",Object(o.b)("inlineCode",{parentName:"p"},"/foo/bar")," are two distinct paths. ",Object(o.b)("inlineCode",{parentName:"p"},"/foo/bar")," is not interpreted as a sub-path of ",Object(o.b)("inlineCode",{parentName:"p"},"/foo"),"."))),Object(o.b)("h2",{id:"hash-routing"},"Hash routing"),Object(o.b)("p",null,"Wave apps support ",Object(o.b)("em",{parentName:"p"},"hash routing"),", a popular client-side mechanism where the location hash (the ",Object(o.b)("inlineCode",{parentName:"p"},"baz/qux")," in ",Object(o.b)("inlineCode",{parentName:"p"},"/foo/bar#baz/qux"),") can be used to decide which part of the UI to display."),Object(o.b)("h3",{id:"setting-the-location-hash"},"Setting the location hash"),Object(o.b)("p",null,"To set the location hash, prefix ",Object(o.b)("inlineCode",{parentName:"p"},"#")," to the ",Object(o.b)("inlineCode",{parentName:"p"},"name")," attribute of command-like components. When the command is invoked, the location hash is set to the name of the command."),Object(o.b)("p",null,"For example, if a button is named ",Object(o.b)("inlineCode",{parentName:"p"},"foo")," is clicked, ",Object(o.b)("inlineCode",{parentName:"p"},"q.args.foo")," is set to ",Object(o.b)("inlineCode",{parentName:"p"},"True"),". Instead, if a button named ",Object(o.b)("inlineCode",{parentName:"p"},"#foo")," is clicked, the location hash is set to ",Object(o.b)("inlineCode",{parentName:"p"},"foo")," (",Object(o.b)("inlineCode",{parentName:"p"},"q.args.foo")," is not set). "),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{8-9}","{8-9}":!0}),"from h2o_wave import Q, main, app, ui\n\n@app('/toss')\nasync def serve(q: Q):\n    q.page['sides'] = ui.form_card(\n        box='1 1 4 4',\n        items=[\n            ui.button(name='#heads', label='Heads'),\n            ui.button(name='#tails', label='Tails'),\n        ],\n    )\n    q.page.save()\n")),Object(o.b)("p",null,"Names don't have to be alphanumeric, so you can use names with nested sub-paths like ",Object(o.b)("inlineCode",{parentName:"p"},"#foo/bar"),", ",Object(o.b)("inlineCode",{parentName:"p"},"#foo/bar/baz"),", ",Object(o.b)("inlineCode",{parentName:"p"},"#foo/bar/baz/qux")," to make route-handling more manageable."),Object(o.b)("p",null,"The components that support setting a location hash are:"),Object(o.b)("ul",null,Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"ui.button()")),Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"ui.command()")),Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"ui.nav_item()")),Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"ui.tab()")),Object(o.b)("li",{parentName:"ul"},Object(o.b)("inlineCode",{parentName:"li"},"ui.breadcrumb()"))),Object(o.b)("h3",{id:"getting-the-location-hash"},"Getting the location hash"),Object(o.b)("p",null,"To get the location hash, read ",Object(o.b)("inlineCode",{parentName:"p"},"q.args['#']")," (a string). If the route in the browser's address bar is ",Object(o.b)("inlineCode",{parentName:"p"},"/foo/bar#baz/qux"),", ",Object(o.b)("inlineCode",{parentName:"p"},"q.args['#']")," is set to ",Object(o.b)("inlineCode",{parentName:"p"},"baz/qux"),"."),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{5-9}","{5-9}":!0}),"from h2o_wave import Q, main, app, ui\n\n@app('/toss')\nasync def serve(q: Q):\n    hash = q.args['#']\n    if hash == 'heads':\n        print('Heads!')\n    elif hash == 'tails':\n        print('Tails!')\n\n    q.page.save()\n")),Object(o.b)("h3",{id:"hash-route-switching"},"Hash route switching"),Object(o.b)("p",null,"Combining the two examples above gives us a basic pattern for handling routes and updating the user interface:"),Object(o.b)("pre",null,Object(o.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py",metastring:"{7,9,11}","{7,9,11}":!0}),"from h2o_wave import Q, main, app, ui\n\n@app('/toss')\nasync def serve(q: Q):\n    hash = q.args['#']\n\n    if hash == 'heads':\n        q.page['sides'].items = [ui.message_bar(text='Heads!')]\n    elif hash == 'tails':\n        q.page['sides'].items = [ui.message_bar(text='Tails!')]\n    else:\n        q.page['sides'] = ui.form_card(\n            box='1 1 4 4',\n            items=[\n                ui.button(name='#heads', label='Heads'),\n                ui.button(name='#tails', label='Tails'),\n            ],\n        )\n\n    q.page.save()\n")))}b.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return l})),n.d(t,"b",(function(){return d}));var a=n(0),i=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 r(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 p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n,a,i={},o=Object.keys(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)n=o[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var s=i.a.createContext({}),b=function(e){var t=i.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},l=function(e){var t=b(e.components);return i.a.createElement(s.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,s=c(e,["components","mdxType","originalType","parentName"]),l=b(n),m=a,d=l["".concat(r,".").concat(m)]||l[m]||u[m]||o;return n?i.a.createElement(d,p(p({ref:t},s),{},{components:n})):i.a.createElement(d,p({ref:t},s))}));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 p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p.mdxType="string"==typeof e?e:a,r[1]=p;for(var s=2;s<o;s++)r[s]=n[s];return i.a.createElement.apply(null,r)}return i.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/f846e950.01b9cc09.js b/docs/f846e950.e91bfc98.js
similarity index 92%
rename from docs/f846e950.01b9cc09.js
rename to docs/f846e950.e91bfc98.js
index 4a4f5c4325..70621746c3 100644
--- a/docs/f846e950.01b9cc09.js
+++ b/docs/f846e950.e91bfc98.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[227],{280:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(290)),i={title:"Plot / Area + Line / Smooth"},c={unversionedId:"examples/plot-area-line-smooth",id:"examples/plot-area-line-smooth",isDocsHomePage:!1,title:"Plot / Area + Line / Smooth",description:"Make a combined area + line plot using a smooth curve.",source:"@site/docs/examples/plot-area-line-smooth.md",slug:"/examples/plot-area-line-smooth",permalink:"/wave/docs/examples/plot-area-line-smooth",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-line-smooth.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Area + Line",permalink:"/wave/docs/examples/plot-area-line"},next:{title:"Plot / Area + Line / Groups",permalink:"/wave/docs/examples/plot-area-line-groups"}},l=[],p={rightToc:l};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a combined area + line plot using a smooth curve."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(454).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='Area + Line, smooth',\n    data=data('date price', n),\n    plot=ui.plot([\n        ui.mark(type='area', x_scale='time', x='=date', y='=price', curve='smooth', y_min=0),\n        ui.mark(type='line', x='=date', y='=price', curve='smooth')\n    ])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},290: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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},454:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-area-line-smooth-215c412ff603d4f09d5e46af9dc84085.png"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[229],{282:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return i})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return l})),n.d(t,"default",(function(){return s}));var r=n(2),a=n(6),o=(n(0),n(292)),i={title:"Plot / Area + Line / Smooth"},c={unversionedId:"examples/plot-area-line-smooth",id:"examples/plot-area-line-smooth",isDocsHomePage:!1,title:"Plot / Area + Line / Smooth",description:"Make a combined area + line plot using a smooth curve.",source:"@site/docs/examples/plot-area-line-smooth.md",slug:"/examples/plot-area-line-smooth",permalink:"/wave/docs/examples/plot-area-line-smooth",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-area-line-smooth.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Area + Line",permalink:"/wave/docs/examples/plot-area-line"},next:{title:"Plot / Area + Line / Groups",permalink:"/wave/docs/examples/plot-area-line-groups"}},l=[],p={rightToc:l};function s(e){var t=e.components,i=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},p,i,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Make a combined area + line plot using a smooth curve."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(459).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='Area + Line, smooth',\n    data=data('date price', n),\n    plot=ui.plot([\n        ui.mark(type='area', x_scale='time', x='=date', y='=price', curve='smooth', y_min=0),\n        ui.mark(type='line', x='=date', y='=price', curve='smooth')\n    ])\n))\nv.data = [(t, x) for t, x, dx in [f.next() for _ in range(n)]]\n\npage.save()\n")))}s.isMDXComponent=!0},292: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 c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=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<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},459:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-area-line-smooth-215c412ff603d4f09d5e46af9dc84085.png"}}]);
\ No newline at end of file
diff --git a/docs/faf81df8.bd73165b.js b/docs/faf81df8.bd73165b.js
deleted file mode 100644
index a02176d50b..0000000000
--- a/docs/faf81df8.bd73165b.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[228],{281:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return o})),r.d(t,"metadata",(function(){return c})),r.d(t,"rightToc",(function(){return l})),r.d(t,"default",(function(){return s}));var a=r(2),n=r(6),i=(r(0),r(290)),o={title:"Form / Date Picker"},c={unversionedId:"examples/date-picker",id:"examples/date-picker",isDocsHomePage:!1,title:"Form / Date Picker",description:"Use date pickers to allow users to pick dates.",source:"@site/docs/examples/date-picker.md",slug:"/examples/date-picker",permalink:"/wave/docs/examples/date-picker",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/date-picker.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Range Slider",permalink:"/wave/docs/examples/range-slider"},next:{title:"Form / Date Picker / Trigger",permalink:"/wave/docs/examples/date-picker-trigger"}},l=[],p={rightToc:l};function s(e){var t=e.components,o=Object(n.a)(e,["components"]);return Object(i.b)("wrapper",Object(a.a)({},p,o,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Use date pickers to allow users to pick dates."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+r(431).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'date={q.args.date}'),\n            ui.text(f'date_placeholder={q.args.date_placeholder}'),\n            ui.text(f'date_disabled={q.args.date_disabled}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.date_picker(name='date', label='Standard date picker', value='2017-10-19'),\n            ui.date_picker(name='date_placeholder', label='Date picker with placeholder', placeholder='Pick a date'),\n            ui.date_picker(name='date_disabled', label='Disabled date picker', value='2017-10-19', disabled=True),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}s.isMDXComponent=!0},290:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return b}));var a=r(0),n=r.n(a);function i(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 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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,a,n=function(e,t){if(null==e)return{};var r,a,n={},i=Object.keys(e);for(a=0;a<i.length;a++)r=i[a],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)r=i[a],t.indexOf(r)>=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<i;p++)o[p]=r[p];return n.a.createElement.apply(null,o)}return n.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},431:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/date-picker-a98cee22ba2dc41a9e12a103dabc10e9.png"}}]);
\ No newline at end of file
diff --git a/docs/faf81df8.e782e9d4.js b/docs/faf81df8.e782e9d4.js
new file mode 100644
index 0000000000..c64e6db929
--- /dev/null
+++ b/docs/faf81df8.e782e9d4.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[230],{283:function(e,t,r){"use strict";r.r(t),r.d(t,"frontMatter",(function(){return o})),r.d(t,"metadata",(function(){return c})),r.d(t,"rightToc",(function(){return p})),r.d(t,"default",(function(){return s}));var a=r(2),n=r(6),i=(r(0),r(292)),o={title:"Form / Date Picker"},c={unversionedId:"examples/date-picker",id:"examples/date-picker",isDocsHomePage:!1,title:"Form / Date Picker",description:"Use date pickers to allow users to pick dates.",source:"@site/docs/examples/date-picker.md",slug:"/examples/date-picker",permalink:"/wave/docs/examples/date-picker",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/date-picker.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Range Slider",permalink:"/wave/docs/examples/range-slider"},next:{title:"Form / Date Picker / Trigger",permalink:"/wave/docs/examples/date-picker-trigger"}},p=[],l={rightToc:p};function s(e){var t=e.components,o=Object(n.a)(e,["components"]);return Object(i.b)("wrapper",Object(a.a)({},l,o,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Use date pickers to allow users to pick dates."),Object(i.b)("div",{className:"cover",style:{backgroundImage:"url("+r(436).default+")"}}),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'date={q.args.date}'),\n            ui.text(f'date_placeholder={q.args.date_placeholder}'),\n            ui.text(f'date_disabled={q.args.date_disabled}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.date_picker(name='date', label='Standard date picker', value='2017-10-19'),\n            ui.date_picker(name='date_placeholder', label='Date picker with placeholder', placeholder='Pick a date'),\n            ui.date_picker(name='date_disabled', label='Disabled date picker', value='2017-10-19', disabled=True),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n")))}s.isMDXComponent=!0},292:function(e,t,r){"use strict";r.d(t,"a",(function(){return u})),r.d(t,"b",(function(){return b}));var a=r(0),n=r.n(a);function i(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 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<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function p(e,t){if(null==e)return{};var r,a,n=function(e,t){if(null==e)return{};var r,a,n={},i=Object.keys(e);for(a=0;a<i.length;a++)r=i[a],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)r=i[a],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var l=n.a.createContext({}),s=function(e){var t=n.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 n.a.createElement(l.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,l=p(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},l),{},{components:r})):n.a.createElement(b,c({ref:t},l))}));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 p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:a,o[1]=c;for(var l=2;l<i;l++)o[l]=r[l];return n.a.createElement.apply(null,o)}return n.a.createElement.apply(null,r)}m.displayName="MDXCreateElement"},436:function(e,t,r){"use strict";r.r(t),t.default=r.p+"assets/images/date-picker-a98cee22ba2dc41a9e12a103dabc10e9.png"}}]);
\ No newline at end of file
diff --git a/docs/fbe93038.c011a924.js b/docs/fbe93038.988a69e9.js
similarity index 93%
rename from docs/fbe93038.c011a924.js
rename to docs/fbe93038.988a69e9.js
index 02ffe24977..cf2dd3b1d1 100644
--- a/docs/fbe93038.c011a924.js
+++ b/docs/fbe93038.988a69e9.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[229],{282:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return a})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return u})),n.d(t,"default",(function(){return s}));var r=n(2),o=n(6),i=(n(0),n(290)),a={id:"testing",title:"Testing"},c={unversionedId:"testing",id:"testing",isDocsHomePage:!1,title:"Testing",source:"@site/docs/testing.md",slug:"/testing",permalink:"/wave/docs/testing",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/testing.md",version:"current"},u=[],p={rightToc:u};function s(e){var t=e.components,n=Object(o.a)(e,["components"]);return Object(i.b)("wrapper",Object(r.a)({},p,n,{components:t,mdxType:"MDXLayout"}))}s.isMDXComponent=!0},290:function(e,t,n){"use strict";n.d(t,"a",(function(){return l})),n.d(t,"b",(function(){return m}));var r=n(0),o=n.n(r);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=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<i;p++)a[p]=n[p];return o.a.createElement.apply(null,a)}return o.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[231],{284:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return a})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return u})),n.d(t,"default",(function(){return s}));var r=n(2),o=n(6),i=(n(0),n(292)),a={id:"testing",title:"Testing"},c={unversionedId:"testing",id:"testing",isDocsHomePage:!1,title:"Testing",source:"@site/docs/testing.md",slug:"/testing",permalink:"/wave/docs/testing",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/testing.md",version:"current"},u=[],p={rightToc:u};function s(e){var t=e.components,n=Object(o.a)(e,["components"]);return Object(i.b)("wrapper",Object(r.a)({},p,n,{components:t,mdxType:"MDXLayout"}))}s.isMDXComponent=!0},292:function(e,t,n){"use strict";n.d(t,"a",(function(){return l})),n.d(t,"b",(function(){return m}));var r=n(0),o=n.n(r);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(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<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=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<i;p++)a[p]=n[p];return o.a.createElement.apply(null,a)}return o.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"}}]);
\ No newline at end of file
diff --git a/docs/fcfc3752.1ceac70b.js b/docs/fcfc3752.1ceac70b.js
new file mode 100644
index 0000000000..8729d7d98d
--- /dev/null
+++ b/docs/fcfc3752.1ceac70b.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[232,22],{285:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return l})),a.d(t,"metadata",(function(){return i})),a.d(t,"rightToc",(function(){return p})),a.d(t,"default",(function(){return b}));var n=a(2),r=a(6),o=(a(0),a(292)),c=a(45),l={title:"Tutorial: Hello World"},i={unversionedId:"tutorial-hello",id:"tutorial-hello",isDocsHomePage:!1,title:"Tutorial: Hello World",description:"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.",source:"@site/docs/tutorial-hello.md",slug:"/tutorial-hello",permalink:"/wave/docs/tutorial-hello",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/tutorial-hello.md",version:"current",sidebar:"someSidebar",previous:{title:"A Tour of Wave",permalink:"/wave/docs/tour"},next:{title:"Tutorial: Beer Wall",permalink:"/wave/docs/tutorial-beer"}},p=[{value:"Step 1: Start the Wave server",id:"step-1-start-the-wave-server",children:[]},{value:"Step 2: Set up a working directory",id:"step-2-set-up-a-working-directory",children:[{value:"Create a directory",id:"create-a-directory",children:[]},{value:"Set up a virtual environment",id:"set-up-a-virtual-environment",children:[]},{value:"Install the Wave Python driver",id:"install-the-wave-python-driver",children:[]}]},{value:"Step 3: Write your program",id:"step-3-write-your-program",children:[]},{value:"Step 4: Run your program",id:"step-4-run-your-program",children:[]},{value:"Step 5: Admire your creation",id:"step-5-admire-your-creation",children:[]},{value:"Step 6: Understand your program",id:"step-6-understand-your-program",children:[{value:"Grab a reference to a page",id:"grab-a-reference-to-a-page",children:[]},{value:"Change the page",id:"change-the-page",children:[]},{value:"Save the page",id:"save-the-page",children:[]}]},{value:"Step 7: Edit your page from a REPL",id:"step-7-edit-your-page-from-a-repl",children:[{value:"Start a Python REPL",id:"start-a-python-repl",children:[]},{value:"Grab a reference to our page",id:"grab-a-reference-to-our-page",children:[]},{value:"Grab a reference to our card",id:"grab-a-reference-to-our-card",children:[]},{value:"Change the title",id:"change-the-title",children:[]},{value:"Change the content",id:"change-the-content",children:[]},{value:"Quit your REPL",id:"quit-your-repl",children:[]}]},{value:"Summary",id:"summary",children:[]}],s={rightToc:p};function b(e){var t=e.components,l=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},s,l,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"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."),Object(o.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(o.b)("path",Object(n.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(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"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."))),Object(o.b)("h2",{id:"step-1-start-the-wave-server"},"Step 1: Start the Wave server"),Object(o.b)(c.default,{mdxType:"StartQ"}),Object(o.b)("h2",{id:"step-2-set-up-a-working-directory"},"Step 2: Set up a working directory"),Object(o.b)("p",null,"Next, let's set up a working directory to author our program. "),Object(o.b)("h3",{id:"create-a-directory"},"Create a directory"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"mkdir $HOME/wave-apps\ncd $HOME/wave-apps\n")),Object(o.b)("h3",{id:"set-up-a-virtual-environment"},"Set up a virtual environment"),Object(o.b)("p",null,"A ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://docs.python.org/3/tutorial/venv.html"}),"virtual environment")," helps us manage our program's dependencies without interfering with system-wide packages."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"python3 -m venv venv\n")),Object(o.b)("h3",{id:"install-the-wave-python-driver"},"Install the Wave Python driver"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"./venv/bin/pip install h2o-wave\n")),Object(o.b)("h2",{id:"step-3-write-your-program"},"Step 3: Write your program"),Object(o.b)("p",null,"Next, open your preferred text editor, create a Python script called ",Object(o.b)("inlineCode",{parentName:"p"},"hello_world.py")," in the ",Object(o.b)("inlineCode",{parentName:"p"},"$HOME/wave-apps")," directory, and copy-paste the following. "),Object(o.b)("p",null,"For now, don't worry too much about what this program is doing. We'll get to that shortly."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.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")),Object(o.b)("h2",{id:"step-4-run-your-program"},"Step 4: Run your program"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave-apps\n./venv/bin/python hello_world.py\n")),Object(o.b)("h2",{id:"step-5-admire-your-creation"},"Step 5: Admire your creation"),Object(o.b)("p",null,"Point your browser to ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"http://localhost:55555/hello"}),"http://localhost:55555/hello"),", and pause to reflect on a particularly pithy quote from the venerable Homer Simpson. "),Object(o.b)("p",null,Object(o.b)("img",{alt:"Hello World 1",src:a(485).default})),Object(o.b)("h2",{id:"step-6-understand-your-program"},"Step 6: Understand your program"),Object(o.b)("p",null,"Let's walk through this program step by step."),Object(o.b)("p",null,"This program (technically a ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/scripts"}),"script"),'), illustrates the core of Wave\'s programming model, or, "How to think in Wave."'),Object(o.b)("ol",null,Object(o.b)("li",{parentName:"ol"},"Your Wave server instance holds a collection of pages."),Object(o.b)("li",{parentName:"ol"},"To change a page, simply grab a reference to a page, change it, and save it. ")),Object(o.b)("p",null,"That's it. Your changes are now visible to everyone."),Object(o.b)("p",null,"Let's understand this principle in practice using the little program we just created."),Object(o.b)("h3",{id:"grab-a-reference-to-a-page"},"Grab a reference to a page"),Object(o.b)("p",null,"A ",Object(o.b)("inlineCode",{parentName:"p"},"site")," represents a dictionary of all the pages on the Wave server. To get a reference to a page hosted at the route ",Object(o.b)("inlineCode",{parentName:"p"},"/hello")," (which translates to ",Object(o.b)("inlineCode",{parentName:"p"},"http://localhost:55555/hello"),"), simply grab the value at key ",Object(o.b)("inlineCode",{parentName:"p"},"/hello"),". "),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"page = site['/hello']\n")),Object(o.b)("h3",{id:"change-the-page"},"Change the page"),Object(o.b)("p",null,"Similar to how a ",Object(o.b)("inlineCode",{parentName:"p"},"site")," represents a collection of pages, a ",Object(o.b)("inlineCode",{parentName:"p"},"page")," represents a collection of ",Object(o.b)("em",{parentName:"p"},"cards"),". A card represents a block of content: text, graphics, widgets, or some combination of those."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"page['hello'] = 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")),Object(o.b)("p",null,"Pages support different kinds of cards. In this case, we add a card named ",Object(o.b)("inlineCode",{parentName:"p"},"hello")," that displays markdown content (",Object(o.b)("inlineCode",{parentName:"p"},"markdown_card()"),"). The position and size of the card on the page is specified by the ",Object(o.b)("inlineCode",{parentName:"p"},"box")," attribute. In this case, the card is placed at column ",Object(o.b)("inlineCode",{parentName:"p"},"1"),", row ",Object(o.b)("inlineCode",{parentName:"p"},"1"),", sized ",Object(o.b)("inlineCode",{parentName:"p"},"2 x 2")," units. The ",Object(o.b)("inlineCode",{parentName:"p"},"content")," attribute supports ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://guides.github.com/features/mastering-markdown/"}),"Github Flavored Markdown"),"."),Object(o.b)("h3",{id:"save-the-page"},"Save the page"),Object(o.b)("p",null,"Finally, we call ",Object(o.b)("inlineCode",{parentName:"p"},"save()")," on the ",Object(o.b)("inlineCode",{parentName:"p"},"page"),", which broadcasts our changes to all connected web browsers."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"page.save()\n")),Object(o.b)("p",null,Object(o.b)("img",{alt:"Hello World 1",src:a(485).default})),Object(o.b)("p",null,"So far, so good."),Object(o.b)("h2",{id:"step-7-edit-your-page-from-a-repl"},"Step 7: Edit your page from a REPL"),Object(o.b)("p",null,"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."),Object(o.b)("h3",{id:"start-a-python-repl"},"Start a Python REPL"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave-apps\n./venv/bin/python\n")),Object(o.b)("h3",{id:"grab-a-reference-to-our-page"},"Grab a reference to our page"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title=">>>"',title:'">>>"'}),"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(516).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(517).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},292: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<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?c(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):c(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function i(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=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<o;p++)c[p]=a[p];return r.a.createElement.apply(null,c)}return r.a.createElement.apply(null,a)}u.displayName="MDXCreateElement"},45:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return c})),a.d(t,"metadata",(function(){return l})),a.d(t,"rightToc",(function(){return i})),a.d(t,"default",(function(){return s}));var n=a(2),r=a(6),o=(a(0),a(292)),c={},l={unversionedId:"_start_q",id:"_start_q",isDocsHomePage:!1,title:"_start_q",description:"To start the Wave server, simply open a new terminal window and execute waved (or waved.exe on Windows).",source:"@site/docs/_start_q.md",slug:"/_start_q",permalink:"/wave/docs/_start_q",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/_start_q.md",version:"current"},i=[],p={rightToc:i};function s(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},p,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"To start the Wave server, simply open a new terminal window and execute ",Object(o.b)("inlineCode",{parentName:"p"},"waved")," (or ",Object(o.b)("inlineCode",{parentName:"p"},"waved.exe")," on Windows)."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave\n./waved\n")),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{}),'2020/10/27 16:16:34 # \n2020/10/27 16:16:34 # \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n2020/10/27 16:16:34 # \u2502  \u250c    \u250c \u250c\u2500\u2500\u2510 \u250c  \u250c \u250c\u2500\u2500\u2510  \u2502 H2O Wave\n2020/10/27 16:16:34 # \u2502  \u2502 \u250c\u2500\u2500\u2518 \u2502\u2500\u2500\u2502 \u2502  \u2502 \u2514\u2510    \u2502 (version) (build)\n2020/10/27 16:16:34 # \u2502  \u2514\u2500\u2518    \u2518  \u2518 \u2514\u2500\u2500\u2518  \u2514\u2500\u2518  \u2502 \xa9 2020 H2O.ai, Inc.\n2020/10/27 16:16:34 # \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n2020/10/27 16:16:34 # \n2020/10/27 16:16:34 # {"address":":55555","t":"listen","webroot":"/home/elp/wave/www"}\n')),Object(o.b)("p",null,"The Wave server should now be running at ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"http://localhost:55555"}),"http://localhost:55555"),"."),Object(o.b)("div",{className:"admonition admonition-caution alert alert--warning"},Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}),Object(o.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})))),"Don't close this terminal window!")),Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"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."))))}s.isMDXComponent=!0},485:function(e,t,a){"use strict";a.r(t),t.default="data:image/png;base64,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"},516:function(e,t,a){"use strict";a.r(t),t.default="data:image/png;base64,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"},517:function(e,t,a){"use strict";a.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/fcfc3752.e536a904.js b/docs/fcfc3752.e536a904.js
deleted file mode 100644
index 6f6b1ab3a5..0000000000
--- a/docs/fcfc3752.e536a904.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[230,21],{283:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return l})),a.d(t,"metadata",(function(){return i})),a.d(t,"rightToc",(function(){return p})),a.d(t,"default",(function(){return b}));var n=a(2),r=a(6),o=(a(0),a(290)),c=a(45),l={title:"Tutorial: Hello World"},i={unversionedId:"tutorial-hello",id:"tutorial-hello",isDocsHomePage:!1,title:"Tutorial: Hello World",description:"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.",source:"@site/docs/tutorial-hello.md",slug:"/tutorial-hello",permalink:"/wave/docs/tutorial-hello",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/tutorial-hello.md",version:"current",sidebar:"someSidebar",previous:{title:"A Tour of Wave",permalink:"/wave/docs/tour"},next:{title:"Tutorial: Beer Wall",permalink:"/wave/docs/tutorial-beer"}},p=[{value:"Step 1: Start the Wave Server",id:"step-1-start-the-wave-server",children:[]},{value:"Step 2: Set up a working directory",id:"step-2-set-up-a-working-directory",children:[{value:"Create a directory",id:"create-a-directory",children:[]},{value:"Set up a virtual environment",id:"set-up-a-virtual-environment",children:[]},{value:"Install the Wave Python driver",id:"install-the-wave-python-driver",children:[]}]},{value:"Step 3: Write your program",id:"step-3-write-your-program",children:[]},{value:"Step 4: Run your program",id:"step-4-run-your-program",children:[]},{value:"Step 5: Admire your creation",id:"step-5-admire-your-creation",children:[]},{value:"Step 6: Understand your program",id:"step-6-understand-your-program",children:[{value:"Grab a reference to a page",id:"grab-a-reference-to-a-page",children:[]},{value:"Change the page",id:"change-the-page",children:[]},{value:"Save the page",id:"save-the-page",children:[]}]},{value:"Step 7: Edit your page from a REPL",id:"step-7-edit-your-page-from-a-repl",children:[{value:"Start a Python REPL",id:"start-a-python-repl",children:[]},{value:"Grab a reference to our page",id:"grab-a-reference-to-our-page",children:[]},{value:"Grab a reference to our card",id:"grab-a-reference-to-our-card",children:[]},{value:"Change the title",id:"change-the-title",children:[]},{value:"Change the content",id:"change-the-content",children:[]},{value:"Quit your REPL",id:"quit-your-repl",children:[]}]},{value:"Summary",id:"summary",children:[]}],s={rightToc:p};function b(e){var t=e.components,l=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},s,l,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"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."),Object(o.b)("div",{className:"admonition admonition-note alert alert--secondary"},Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"}),Object(o.b)("path",Object(n.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(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"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."))),Object(o.b)("h2",{id:"step-1-start-the-wave-server"},"Step 1: Start the Wave Server"),Object(o.b)(c.default,{mdxType:"StartQ"}),Object(o.b)("h2",{id:"step-2-set-up-a-working-directory"},"Step 2: Set up a working directory"),Object(o.b)("p",null,"Next, let's set up a working directory to author our program. "),Object(o.b)("h3",{id:"create-a-directory"},"Create a directory"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"mkdir $HOME/wave-apps\ncd $HOME/wave-apps\n")),Object(o.b)("h3",{id:"set-up-a-virtual-environment"},"Set up a virtual environment"),Object(o.b)("p",null,"A ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://docs.python.org/3/tutorial/venv.html"}),"virtual environment")," helps us manage our program's dependencies without interfering with system-wide packages."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"python3 -m venv venv\n")),Object(o.b)("h3",{id:"install-the-wave-python-driver"},"Install the Wave Python driver"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"./venv/bin/pip install h2o-wave\n")),Object(o.b)("h2",{id:"step-3-write-your-program"},"Step 3: Write your program"),Object(o.b)("p",null,"Next, open your preferred text editor, create a Python script called ",Object(o.b)("inlineCode",{parentName:"p"},"hello_world.py")," in the ",Object(o.b)("inlineCode",{parentName:"p"},"$HOME/wave-apps")," directory, and copy-paste the following. "),Object(o.b)("p",null,"For now, don't worry too much about what this program is doing. We'll get to that shortly."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.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")),Object(o.b)("h2",{id:"step-4-run-your-program"},"Step 4: Run your program"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave-apps\n./venv/bin/python hello_world.py\n")),Object(o.b)("h2",{id:"step-5-admire-your-creation"},"Step 5: Admire your creation"),Object(o.b)("p",null,"Point your browser to ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"http://localhost:55555/hello"}),"http://localhost:55555/hello"),", and pause to reflect on a particularly pithy quote from the venerable Homer Simpson. "),Object(o.b)("p",null,Object(o.b)("img",{alt:"Hello World 1",src:a(479).default})),Object(o.b)("h2",{id:"step-6-understand-your-program"},"Step 6: Understand your program"),Object(o.b)("p",null,"Let's walk through this program step by step."),Object(o.b)("p",null,"This program (technically a ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"/wave/docs/scripts"}),"script"),'), illustrates the core of Wave\'s programming model, or, "How to think in Wave."'),Object(o.b)("ol",null,Object(o.b)("li",{parentName:"ol"},"Your Wave server instance holds a collection of pages."),Object(o.b)("li",{parentName:"ol"},"To change a page, simply grab a reference to a page, change it, and save it. ")),Object(o.b)("p",null,"That's it. Your changes are now visible to everyone."),Object(o.b)("p",null,"Let's understand this principle in practice using the little program we just created."),Object(o.b)("h3",{id:"grab-a-reference-to-a-page"},"Grab a reference to a page"),Object(o.b)("p",null,"A ",Object(o.b)("inlineCode",{parentName:"p"},"site")," represents a dictionary of all the pages on the Wave server. To get a reference to a page hosted at the route ",Object(o.b)("inlineCode",{parentName:"p"},"/hello")," (which translates to ",Object(o.b)("inlineCode",{parentName:"p"},"http://localhost:55555/hello"),"), simply grab the value at key ",Object(o.b)("inlineCode",{parentName:"p"},"/hello"),". "),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"page = site['/hello']\n")),Object(o.b)("h3",{id:"change-the-page"},"Change the page"),Object(o.b)("p",null,"Similar to how a ",Object(o.b)("inlineCode",{parentName:"p"},"site")," represents a collection of pages, a ",Object(o.b)("inlineCode",{parentName:"p"},"page")," represents a collection of ",Object(o.b)("em",{parentName:"p"},"cards"),". A card represents a block of content: text, graphics, widgets, or some combination of those."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"page['hello'] = 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")),Object(o.b)("p",null,"Pages support different kinds of cards. In this case, we add a card named ",Object(o.b)("inlineCode",{parentName:"p"},"hello")," that displays markdown content (",Object(o.b)("inlineCode",{parentName:"p"},"markdown_card()"),"). The position and size of the card on the page is specified by the ",Object(o.b)("inlineCode",{parentName:"p"},"box")," attribute. In this case, the card is placed at column ",Object(o.b)("inlineCode",{parentName:"p"},"1"),", row ",Object(o.b)("inlineCode",{parentName:"p"},"1"),", sized ",Object(o.b)("inlineCode",{parentName:"p"},"2 x 2")," units. The ",Object(o.b)("inlineCode",{parentName:"p"},"content")," attribute supports ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"https://guides.github.com/features/mastering-markdown/"}),"Github Flavored Markdown"),"."),Object(o.b)("h3",{id:"save-the-page"},"Save the page"),Object(o.b)("p",null,"Finally, we call ",Object(o.b)("inlineCode",{parentName:"p"},"save()")," on the ",Object(o.b)("inlineCode",{parentName:"p"},"page"),", which broadcasts our changes to all connected web browsers."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py"}),"page.save()\n")),Object(o.b)("p",null,Object(o.b)("img",{alt:"Hello World 1",src:a(479).default})),Object(o.b)("p",null,"So far, so good."),Object(o.b)("h2",{id:"step-7-edit-your-page-from-a-repl"},"Step 7: Edit your page from a REPL"),Object(o.b)("p",null,"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."),Object(o.b)("h3",{id:"start-a-python-repl"},"Start a Python REPL"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave-apps\n./venv/bin/python\n")),Object(o.b)("h3",{id:"grab-a-reference-to-our-page"},"Grab a reference to our page"),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-py",metastring:'title=">>>"',title:'">>>"'}),"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<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?c(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):c(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function i(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=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<o;p++)c[p]=a[p];return r.a.createElement.apply(null,c)}return r.a.createElement.apply(null,a)}u.displayName="MDXCreateElement"},45:function(e,t,a){"use strict";a.r(t),a.d(t,"frontMatter",(function(){return c})),a.d(t,"metadata",(function(){return l})),a.d(t,"rightToc",(function(){return i})),a.d(t,"default",(function(){return s}));var n=a(2),r=a(6),o=(a(0),a(290)),c={},l={unversionedId:"_start_q",id:"_start_q",isDocsHomePage:!1,title:"_start_q",description:"To start the Wave server, simply open a new terminal window and execute wave (or wave.exe on Windows).",source:"@site/docs/_start_q.md",slug:"/_start_q",permalink:"/wave/docs/_start_q",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/_start_q.md",version:"current"},i=[],p={rightToc:i};function s(e){var t=e.components,a=Object(r.a)(e,["components"]);return Object(o.b)("wrapper",Object(n.a)({},p,a,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"To start the Wave server, simply open a new terminal window and execute ",Object(o.b)("inlineCode",{parentName:"p"},"wave")," (or ",Object(o.b)("inlineCode",{parentName:"p"},"wave.exe")," on Windows)."),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{className:"language-shell"}),"cd $HOME/wave\n./wave\n")),Object(o.b)("pre",null,Object(o.b)("code",Object(n.a)({parentName:"pre"},{}),'2020/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":"/home/elp/wave/www"}\n')),Object(o.b)("p",null,"The Wave server should now be running at ",Object(o.b)("a",Object(n.a)({parentName:"p"},{href:"http://localhost:55555"}),"http://localhost:55555"),"."),Object(o.b)("div",{className:"admonition admonition-caution alert alert--warning"},Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-heading"}),Object(o.b)("h5",{parentName:"div"},Object(o.b)("span",Object(n.a)({parentName:"h5"},{className:"admonition-icon"}),Object(o.b)("svg",Object(n.a)({parentName:"span"},{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"}),Object(o.b)("path",Object(n.a)({parentName:"svg"},{fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"})))),"Don't close this terminal window!")),Object(o.b)("div",Object(n.a)({parentName:"div"},{className:"admonition-content"}),Object(o.b)("p",{parentName:"div"},"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."))))}s.isMDXComponent=!0},479:function(e,t,a){"use strict";a.r(t),t.default="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATQAAADFCAYAAADaOA6XAAAABHNCSVQICAgIfAhkiAAAABl0RVh0U29mdHdhcmUAZ25vbWUtc2NyZWVuc2hvdO8Dvz4AAAAtdEVYdENyZWF0aW9uIFRpbWUAVGh1IDAxIE9jdCAyMDIwIDA5OjMwOjE4IFBNIFBEVAm5lNUAACAASURBVHic7d13WBTX/sfx9y7FAioqtljAehNLFBAFTGLUWFI015qosaI3FsAesST2hl2xRwUTTbEbG5ZYkmiQXUWTGP3dqIkKFhSwUKTs/v5YdmSlI6J3/L6eh0fZmTlzdnb57DlnZs9o4uLijAghhApon3cFhBCioEigCSFUQwJNCKEaEmhCCNWQQBNCqIYEmhBCNSTQhBCqIYEmhFANCTQhhGpIoAkhVMP6aTY2GuVbU0KIgqPRaJ5q+zwHWlYhJuEmhMiP9CGWPkfyE265DrT0O7K1tcXa2vqp01QIIdIzGo2kpKSQlJSkZE5eciZXY2jmgo1GI7a2ttjY2EiYCSEKnEajwcbGBltbW4vcya1cnxQwGo0YjUasrZ9q2E0IIXJkbW2tZE5e5BhoSoFphUvLTAjxrGk0GlP25LGVlusupzEPhQohxNPKT+7kucsphBCFocC7nOkH5STQhBCF6cncyU3+5OmbAhJoQojCkp+8ka8+CSFUI/dnOYUQ4jkp0LOcaUXmsypCCJFfBXwdmhBC/K+QQBNCqIYEmhBCNSTQhBCqIYEmhFANCTQhhGpIoAkhVEMCTQihGoUaaBMnTqD5W29aPJaamoqbqwtzZs/Ocfthw/zo1rULAF9t2ICbqwuxsbG53v+kLz7HvbEbDx48UB7r0L49LVq8jcFgACAlJYVmXp4MG+aX63Izq9+T7t69i5urC19t2JDncoUQufNStdA8PDwxGAycO3sWgFu3bhIRcZ379+7x3//7PwAuXPiTxMREPJp65Kls+YqYEM/fCxdoBoOBFcuX0/qdVrRs8TazZs4gISEhx+3279tHx39/iKeHB7179+K3337LsE5TDw80Gg2nz5wGICxMh1arpUiRIoTpwgAIPxMOgIenKfyWLQuk9TuteKOZF6NGjuDu3bvA4xbihuBg3mjmxcmTJzPsLzg4iJYt3ua9d9/lp+PH831MhBC5U+iBZjQauXv3rsVPehuCg1m3bi0fd++O37Dh7N+/n8DApdmWeTY8nIkTJ1CzZi2mz5hBclISfr4+GbqjZcqUoU6dOkpo6XRhvFa3Lk2beqAL0wFw5sxpKlSoQPXq1Qlav551a9fSqVNn/P3HodPp+GzMGIsyDx0+xPARI6lRo4bF4ydOnGDJ4sXUr1+fIUOHsmXL5nwdLyFE7hX6HU/i4uJo0/qdLJfv3LmD1q1b4+09AICo27cJDg5i1KjRWW6z64dd2NjYMHXaNIoXL065cuXo17cPR378kY6dOlms6+npxaZNG0lKSkIXFsb7H3xA2bJlCVy6lNTUVMLDw2ne/G1Tubt20rBhQwYPGWKqS1QUgYFLuXr1qlLepC8mUbNWrQx1OnTwINbW1syaPQc7OzteeeUVBg7wzvVxEkLkXaEHWrFixQiYO0/53Wgw4Ofnq/x+9epVrl69yvG0LlpqaipJSUncv38/yzKjbt+mXLnyFC9eHABnJycAbt2+lWFdD08PgoLWc+jQQW7cuIGXVzPKlCnDnNmz2bd3L7GxsTT1MI2f3b59G1dXN2VbJ2dTubdvPS63rKNjpnWKjo7G0dEROzs7AKpWrZrNURFCFIRCDzQrKyu8vLyU31NTUy2WOzo6Urp0aebOm68st7KyomTJklmWWa58ecLCwoiPi6O4nR1XrlwBoHz58hnWbdTIhaJFi7Jm9WpKlChBgwYN0Gq1VK5chS+/XINGo6Fp06bK9leuXFa2NZdbrnx5/vzzz2yfZ9myZTh58g4PHz7E3t6ey5cvZ7u+EOLpvXAnBbp06cqlS5fYu3cPFy9cYPw4fz4bMxqtNuuqfvDBByQnJzNhwgT279vHjJkzKFGiBC1atMywro2NDW5ubly9epWmTZsq5Xp6eXLt2jVeffVVHBwcAGjfoQPnzp1jyeLFbNu2leCgIBo2aoRTWgswO63eaU1KSgpjx37Gzp07WLx4UT6PiBAit164QOvv7U3v3n3YsnkzU6dOoXSZMsyeE5DtNi4urkyfPoO//77ClCmTKVqkCEuWBlK6dOlM1/f0NLUQPb2aZXjMw9NTeaxfv/709/bmhx92sWD+fNzd3ZmbrrucHS8vL3z9/Pjz/HlWrVxF7169c7WdECL/NHFxcVleQJX+risGQyqpqQbKlClTmPUTQrykoqOjsbLSotVaodFolJ/svHAtNCGEyC8JNCGEakigCSFUQwJNCKEaEmhCCNWQQBNCqIYEmhBCNSTQhBCqIYEmhFANCTQhhGpIoAkhVEMCTQihGhJoQgjVkEATQqiGBJoQQjUk0IQQqiGBJoRQDQk0IYRqSKAJIVRDAk0IoRoSaEII1ZBAE0KohgSaEEI1CjXQDAYDn0+cyIULf5KUlMToUaOIiLjO4EGf4ubqku0PQGpqKm6uLhw9cuSZ1C8kJAQ3VxcePHjwTMp/kSQlJbFk8WLatW2Dp4cH/fr24cyZ09lu06lTR+bNm/tM6tO/f79nVnZe5PY9NmvWTD7s0J6kpKRCqlneXb16lZYt3mbLli0AhIaGWry/ly9bRvePP3qeVSxwhRpoBw4c4NfQX6lWzYnNm7/n8pXLVKxYCV+/YSwNXMbSwGUEpN2ZvG+/fspjSwOXFWY182zTpo20bv3O865GlkaNHME4f3+LxwIC5rB58/f09/Zm4cKFODqWw2foUK5fv/5M63Lx4kXcXF34+++/n9k+Mnu+mXma1618+fJUrlIFrfbF6ORkdlyLFClClSpVcHBweH4VK2TWhbmzY0eP0rx5c4oXL85Px3+idevWWFlZUbduXWUd86dHnTr/wsvLqzCr99JITk7mh1278PX1o1s30yd0k6ZNee/ddhwICaG/t/dzruGLz9t7AN7eA553NbJVoUIFNnz19fOuRqEq1ECLjY2hfIXyANy7F4u9nX2+ykl89Igpkyfz44+HMRqNtGjZkrFj/SlevLiyzvXr11m8aBE6XRjWNjY0dmvM8BHDqVChYq73s3zZMnR6HR9//DErli/n5s2b1KxZk8/G+vP6668D8J+BA9Dr9QC4ubrQsFEj1q1bb6pnYiLLAgM5ePAA8fHx1K1bj08HfYqLiytg6t40cW/MlClT2bd/H3qdjqnTptGq1Ts0cW/M7DlzOHToECd++QVrGxs+eP8Dhg0fjrX145ft1KlTrFyxnIsXL+Lo6EjLVq0YPHgItra2Sp3MDhwIwdt7AIMGD2bXD7spXbq0skyr1aLRaEhNTc318Xn06BHLAgMJCdnPgwcPqFGjBsOGD8fdvUmm669atZLVq1YB0LlTR1P9w3RYWVkp63y1YQMbN37NvXv3afB6AyZMmIiTk5Oy/MKFP1kWGMj58+dJSk7GxcUFHx9f6tSpk+XzHTJ0aIa6ZPe6Qc7vseXLlvHTT8f55tvvAFOX2c3NDYAd27cTHx9PkyZNmTBxIo6Ojkq5ly5dYsGC+Zw7e5bixYszaNBgbty4gU6vs9j/k/R6PcsCl/Lnnxewt7ej1TvvMHLkKGxtbbM8rgBN3Bszf/4C3m7RIsuy1aRQ28srVq5ixIiRAHzz7Xf06t07X+WsXr2Kso5lCQiYi/eAARwICWHpkiXK8ui7d+nXtw8PHjxg0uQpjB8/nojICAZ4exMfF5enfV395x/27NnDjJmzCAoKpmSpUgwf5qeUM3XadDp37gLA1m3bmTlzFgBGo5Fhw/w4fvwYPj6+BATMpVy5cgweNIgLF/602MeiRQvxaOrB+qBgizAIXLoUTw9PNm76hhEjRrBly2Y2BAcry0NDQ/EZOoTadeowf/4C+vX3Zs/u3UycMF5ZZ+u27Tg5O1OnTh22bttOj5490Wq1VKhQQQk9gA3BwURFReHp5ZnrYxMQMIeDBw8wctRoli1fTsOGDfHz9SUiIiLT9T/66GNmzpoNwPz5C9i6bbtFmP3y88+cO3eOz7+YxISJE7l+7TpjRo9Sll+7do2BAwaQnJzC1KnTmD9/ASkpKfj5+pCcnJzl881MVq+bWU7vsczs2rmTpKQk1ny5lgULFvLXX//liy8+V5ZHRUUxYIA3ycnJTJ8xkzGfjWXLli0cP34s23IjIq7jM3QI1WvUYOXKlYwd688vP/9MQMCcXB3Xl0mhttAKiqeHBz4+vgA09fDg7p27HDx4gLFp4yZBQUE4OjqybPly5YV1d29C+/YfsHvPbqWblRsJCQnMmjmL4nZ2AEyaNJn33m2H/rSeN998i4oVK+Jc3ZkyZcvi7OysbHf8+HF+O3eObdt3ULGiqVXo4elJVFQU69etY07A4wHwrt26WYS7uZXUrt27/Luj6RO3WrVqnA0P58cfDytdwsWLF9Gpc2f8/ccp2zo5VWOAtzeX/vqLmrVq4ezsTHVnZ2xti1jUz8xgMDBlymT27tnDiJEjqV+/Qa6PzWm9ng4dPqRt27YAuLi44unpReksxmwcHByUOjhXr56hPkWLFmVOQIAyLlWiRAlGjhjOtWvXqFq1KqVLl2bc+PG0bt0GGxsbACpXrkyH9h9w/o8/aNioUY7P1yyr180sp/dYZqpUqap8YDs7OzN4yBC++Pxz4uLisLOzIyhoPSXs7QkMXKZ8mDRxd6d9+w+oWatWluX+du43UlJSGDduvNI6r1mrlnJCIqfj+jJ5MUY088jcZTOrU6cO0dHRyu+//nqStm3bWXxK2dvb08TdnTOnz+RpX5WrVFHCDEzjEkWKFLHYX2Z+PXkSV1c3JczMWrZqyekzlnUwd5eeVOdf/7L4vZqTE9HRMQDExsZy8cIF3n//A4t1XFxccXBw4Ex4ePZPLM2WLZvZs3s38+YvoGfPT3K1jVmjRi5s3bqF7777lsjISADeePNNi+OVFw0bNbIYZDcfF/Oxtre357333ker1XLlyhV++flntm/fBlDgZ6Zzeo9l5l9PvF5O1ZwwGo3Exppes7BTp2jduo1Fy7hkqVJ4eGbfKq5Xvz5WVlaM8/cnLOwUSUlJVK9ePcP+xP9oCy39GBKA1kqLwWBQfo+JiWHp0iUsWxZosZ7RaMTd3T1P+7LK5CyWVqvFaDBmu11MTAwnT57AvbFbjvvQoMnVvrUaLUajQSkfoG+f3hnOtBkMBuWPKCehv/6Kq5sbzZs3z9X66fmPG0dZx7JsCA4mYM4cnJyc+Lh79zy1gNPL8LqmPS/zc05OTmbevLns3bsXQ2oqVapUpXad2qZ1yP71eOq6PPEey4zWyvJ10KTV35D2XomOjlbGkNNzdHQkKioqy3KrVq3K8hUrWbv2S3x9fNBotLz55hsMGz6CypUr5+r5vCz+JwMtJ6VKlcLNrTEDBw7MsKxosWKFUweHUlSuXJmFCxc9m/JLlQLA338crq6uGZaXLlMmV+U0adqUUiVL5asORYoUwcfHFx8fXyIjI9m7dw8Bc+ZQtqwjrVq1yleZ2VmzejWHDh5k3tx5uDdpglarJS4ujn179xb4vp6FEiVKKB9E6cXGxua4raurK66uy0lKSiI8PJxFixYyYsRwvv9+87Oo6v+s/8kuZ06aNGnK5cuXcHJ2pmatWsrP3//8g0aTeWvoaWjQkJKSkqEOt2/fpljx4hZ1iL13j0cFcDFmmTJlqFmrFhf/76JF+a9Ursxfly5ZdGvQZKyfWZcuXWmTNgaWF0lJSWzc+LVy3dorr7zCgAEDqVSpUoaTHumZj39KSnKe93n9+jXqN2hAUw8PpfV27tzZzHaS5fO1WC2T1+1ZcnFx5fChQxYtvfj4eH49eTLb7X777Td2bN8OgK2tLU2aNKFH9x5c+usv5WTI0xxXNVFloPX39iY6OpohQwZz+PBhTpw4wYzp0xn72Riu/vNPge+vmpMT9+/dY9WqlZxNG7tq0aIFDRo0YNCn/2HHjh2EhoYStH49fr4+BfZNhxEjRrBzxw6mT5/GiRMnOHLkR4b5+TJ79iySHj1S1nOq5sSpU6Hs2LGDf9JdeGkwGOj473/Tt0/ezzbb2tqy+4cf8B/7GT/9dBy9Xs+c2bO5efNmttcPVqpUCVtbW9asWcORIz/maZ+ubo0J/fVXNm3aiF6vZ8vmzcyfNy/Delk93ydl9ro9S3379ePGjRsMHz6MEydOcPz4MXx9fJTWdlbu3IlixozpfPnlGs6GhxMSEsLq1ato6uGhnBx5muOqJqoMNEdHR4I3bKC0gwPTp09j1MgR/Pe//8eqVatzHIDNj2bNmjF48BC2bN5MQEAAYBr/WbI0kBYtWrJ61Ur8fH3YuXMHI0aOYvCQIQWyX09PL5YtX8HfV/5m7GdjmPTFF5Qq5cDXX2+kTNmyynoDBg6kWbNmzJ8/j61bt1qUYW9vl+MfVFYWL1lKlSpVmfTFF/gMHcoff/zO/AULMgyop1eiRAnmBARw8cIFxo8bn6vullnnzp3x9h7AVxs2MMzPlwMHQvhi0uQM62X3fNPL7HV7lqpVq8aaL9eSmJjImNGjmDZtGu3atcOrWbMsx1EBWrRoycTPPydk/34GDfqUefPm4unpyZw5j+v8NMdVTTRxcXFZjqYajUblx2BIJTXVQJlcjs0IITKKj4vLcBZ41KiRaDVa5mbS2nyZRUdHY2WlRau1QqPRKD/ZUeVJASFeRGFhpxg5YgS9evWmSdMmJCcn89Pxnzh29CgLFz2bk0cvG2mhCVGIQkJC2BAczOXLl9BqtdSuXZs+ffvSokXL5121F05+WmgSaEKIF1J+Ak2VJwWEEC8nCTQhhGpIoAkhVEMCTQihGhJoeXT0yBHcXF2UKX5ympt/7949yjTPX23Y8MzmcP9yzRpl7vgnRUVFMXHiBC5duvRM9l0YIiMjCQxcypDBgxjg7c2c2bOVGT7MRo0aSZ98zrEn1EEC7SnlNDf/w4cPlZlh0/+/IKWmphIUtJ6U5My/xxcaGkrI/v2UK1euwPddGH7YtYvOnTpy4c8LNGjwOnXr1uXgwQP0+qSn8mVvg8FA0qNHvPf+e8+5tuJ5kgtrn0Ju5uYP2R/Cm2++SWpqKocOHaRLl64FXo8//viDhIQE3Bo3znS5Xqejdu3alCxZssD3/az98fvvTJ8+jYC58yymOHr//ffp0aM7YWGnaNOmLVqt9oW/mY549go90HKaEz40NJQhgwexatVq5s6dy+XLlwgJOUCZsmWJiLjOooWm+wQYDAbc3NwYNmw4TmkzdJrn6H9yDvX8zv9+//59FiyYz/Fjx0hOTqZ9+w4WU/VYWVllOzd/bGwsdvZ29OvXn5s3b+BcvTqdu3Qp8GOq1+koVaoUtbKY9VSv19G8+dsWj50ND2fzls1cuXyFkiVL0LlzF95p3VpZfvToUY78eJiPu/dg3dq1RERcx8XFhZGjRhMeHs6mTRu5ceMGDRo0YPjwERRLNy1TfHw833//HSd++YVHj5Ko36A+n/7nU0qmfWc0MjKSaVOnMGLkKL795ht+++0cs2fPyXTW1p07d9KgwesZ5murXacOy1espHbt2kp99+3bq3y/cc3q1RQrXowKFSqwdctWHj58QKfOnenYsRO7du1k7969JCQk0KZ1Gz7p1Usp17xdgwavs/bLNdy5c4fadeowdKgP5cs/nsssNTWVb77ZxLGjR4mLj+e1117D19fP4g5LkZGRfLNpE+fOnUOr1dDsjTfo16+/MvGo+Tj4jxvP1i1bOH1aT5EiRenVq9dLcw+AglaoXc7czAlvNmvWTAb+5z9s+OprSpQsSfTdu/Tt25eYmBgmTZrM1GnTSUhIoG/fPty6dTPPdclp/neDwcDQIYMJP3OGUaNHEzB3Lvfu32PlyhXKOjnNze/g4MCSJUuxt7encuUqzJ+/wHJanwKi0+twdXXL9KLDW7duEhERYdF6W71qFX5+vjg6OtKlSxfs7UswNm3WDLNDhw7y+++/s2TxIjw8Pahduzbffvst/mPHErR+HZ6eXtSvV58tmzeza9dOZbvIyEh6dP847a5ebWjRogV79+7F33+sss6p0FDCw8OZMnkyJUuV5IP27XGuXj3T55aYmMCVK5f554lZUrRaLU2bNlUu9D506KBFl3v79m3s27uP48eO06ataZbYWTNn4u8/lt9/+522bdtSvFhxFi5cwKW//rLY7vjx4yxcMB+vZm/Qrt27/PLzzwwfPkxZJy4ujj69e3HkxyO079CBbl27cfTIERYuXKCs88vPP/PxR924dy+WD//9Ia+/3pDVq1axdOnj+xKcCg3l3LlzzJw5AwcHBzp8+CExMdGMG+f/Utwb9lko1BZabuaENxs/foLFH2FQUBBFbG1ZvmKFEgrNmjXjo25dWbNmDRMnfk5e5DT/++HDh7h48SLbtu+gSpUqgGl2i0GffsqVK1cylPc0c/ObJSYmZpgVtWjRotne+zE1NZVzZ8/SsGEjvtqwIcPyS2lfsTG3LHfv3s1XX3/F+vXrqVXL1Lr5d8eOfNStK3t27+HNN98CTPcLcHZ2ZsnSQKytrenYsRMHDhzgUdIjliwNVMLzxx8PEx8XD5i64MOH+eHu3oRx48cr9S5dpjTTpk4lMTGRokWLotPrsLe3Z/6CBRmmKH9Sr959OHnyJB9164qXlxfN336bFi1aZug+n9brlZbWtWvXuHXrFh0+/JBBgwYDULNGTfr370fdunXp06cvYJpCvGuXzsTFx1tsV7duPeasCFBaUhUqVmT8OH+uXr1KtWrV+P6774iNjWXXD7uV51ixYkUMRtOXbv7++2/GjBnNuHHjad+hg1LHxEeJ7Nm9m+HDRwCmD6KiRYsyZcpU5TiUL1eeUaNGEn33LiVKlMj22IiMCjXQzHPCp6amcuXKFSIjIjgTbppf/8lPpNpPzLN/8uQJ2rZtZ9HCsba25t1332PHju15rkt287/b2dmhCwujfoMGSpiZtW7TmrCwUxnKM8/NP3/BwnxNZw3wUbeuGW70u3bdOho1csliC9P4WXx8PHfv3iEkZH+G5VevXlXGz1JSUli8eBF9+vRRwgxMkwPWrl2be/fuA4//sOcEzFWmor5z5w5JSUn07NFTCbOEhATu37+Pc3VnALZt20psbCxDfXyIS3d3LTs7e4zGx9+wO63X0/OTT3IMM4DatWuzbfsOdu3ayeFDh5g2dSrz5s5l3PjxvPfe+xb1dXMzfQDqdTpKlixJv379lXIiIyOxsbGha9duymO3b91Co9Eot8nT63RotVpGjxljcT+KmjVrmJ5vWvDduRPF/fv3+fnnn/Dyaoa1tbXFtFSBS5fSsGFDizAD03tu187HrdnTej0fffSxxXFITEzE2tqaSq+8kuOxERkVaqDlZU74J7tPMTExlCufcT728hXKZzqtcU5ymv899t49HNPNKWaW1XdZn2ZufrPZcwJ49CjR4rHatTO/gYqZXqejZKlSbPrm20y7nB3at1f+0ENDQ4mNiaFTp84Z1rt585Yyjmkus379+spynS4MGxsbGrk8Dtfw8DOmsUxX03jk3j17uXv3Lq1aZhz/qVy5MkWLFlXCx8urWbbPK70SJUrQs+cn9Oz5CRER15kyZQrTpk7Dy6sZDg4OSoCZx9N0eh2ubm4UKVLEov716tW3uHdrmC6MWrVqKfPB6fQ6PD09MwRtREQkWq2WKlWrAtC9R0/Onj3LiOHDKVasmKnlPngwNWvW5OHDh/z003HltnLp3bp5i6ppZZiPw5NjZeFnw6lXv/4zGZp4GRRqoD3NnPClS5cmKup2hsejoqKUgVjzH7TBaNltS0rO+5TXDqVKcfHixUz3l5mnmZvf7LXXXsvzNqbxM9csxs9uERFxXem6X7xwgUqVKmUI5YiI65w7d5YBAwdkWaZep6NevfpPhISOWrVqUbJUKQwGAxcvXmDU6NG0bdsuQ13MQwzmsDSHT15VrlyFAQMGMnjQp8TFPcTBwUGpr7n7d1qvp1cvy+vRdDod7dq9a/GYXqezGNY4rdfT4cMPM+zzh127aNy4MXZp85hVqVKFrzdu4tq1a4SGhrJu7VqGD/Pjh917uHTpEikpKdSrV8+iDIPBwL59+2jdpnW2x0Gv08nMG0+hUE8K5HpO+Ew09fDg4IEDyr0IAVJSUti/b5/S3NdqtZQsWZLLly8r6xiNRk6n3SE7L9waN+aPP/7g7yemcA7ZH5Lp+vmdm/9pmMfPGrtlfrmGThdmMX6WnJJs0RU0W71qFa/VrYuHh+k4ntbrM5Sp0+lo/MRlIXqdjsZpd9EyGAwkJydjb29P2bJllR+DwcCtW7eUMa/sAji9PXt24+bqkqELDhCyfx81a9WicuUqSn3NwaR0P9PV9fbt21y/ft3isfj4eM6fP497Y3eL7ZIeWX74XbjwJ8eOHaVff9O9UC9dusRff/0XMN2NqUuXLnT4sINyUst8YiLu4UOLcnbv/oGY2Bi6d++R5XGIiYnh8uXLWV5+I3JWqIGW2znhM9O/X38SEhIYOmQwR48c4dixY/j5+nDnzh0GDvyPst5bb73FhuBgtm/bhi4sDH//sdy7dy/PdW3V6h3q1PkXfr4+7N69m5MnTzDO35+ExIQM6z7N3PxPwzx+lvX1Z3qL689cXFyJjY3lyy/X8PDhQyIirjNt6hTTPRdmzESj0eQ5EMzBZ21tTf36DQgKCuLihQvEx8Vx6tQpBg/6lKD165QxtMzCMjM1a9YEYMb0aZw/f57ou3c5Gx6On58vBw4eZNIXk4Asxs+eaPmYu8sNGzZUHgsPD8dgMChhr9fpKF68OAcPHuD8+fPExcVx+PBhfIYOpXv3HjRpYrqj/dS07u7t27dJTEzk6NGjbP7+e+WExL9efZVixYqxfMVy7ty5Q0xMDF9//RWzZ81i6tSpymVBmR0HvU6XoZ4ibwq1y9m5c2dioqP5asMGHjx4QN26dfli0mT69e2T47ZlypYlKDiYRQsXMXnyJIxGI66ubgQFBVuMeYwaNZr4+ATmzZuLvb09PXt+glM1J4tLEnLDysqK5StWMH/eXObNDSDVYKBD+/a0eQlCAwAABNdJREFU79ABX5+hGdZ/mrn58+u0Xm8xdvQkvV7HW289HtNr0qQJAwYMZM3q1axYvhytVstbzZvz9caNVKhgOoZPjkdB7gIBYMrUqXw2ZjQ9enQHwM7Ojl69etOnb98swzIrr776GqNHj2HFiuX0+qQnYHpNPDw9CQ7eQI0aNTKtb267y8rFxunGz9zd3Xm9YUN69/oEo9FI6dKl8fYewMfduyvbDRkyhAkTxvNuO1NrvHz58gwZOpTOnU3XF9rb2zNt+nSmTZ1K27Tu5Wuvvcay5cuVey1kdRz0ej1169WjaNGiOR4fkTmZ4PElFBcXR1RUFOXKlVPGhQqK0Wjk1q1bPEpMpHKVKhlu2JtXycnJREREYDQaqVChgsWgfkF679129PzEdOLhzp07JCQk8Morr1ic7TRLSUnhxo0bWFlZUalSpUy7z8nJyURGRlLC3t7ihjUi9+SeAiJX7OzsCjzIzDQaTa4ux8gtGxsbnNO+CfKsmFtM5i5g+m+LZMba2lo5W5kVGxsb5XIQUXjky+nipad0W+tkf4mMePFJl1O89K5evcqDBw8yXGohni/pcgqRD9WqVXveVRAFRLqcQgjVkEATQqiGBJoQQjUk0IQQqiGBJoRQDQk0IYRqSKAJIVRDAk0IoRoSaEII1ZBAE0KohgSaEEI1JNCEEKohgSaEUA0JNCGEakigCSFUQwJNCKEaEmhCCNWQQBNCqIYEmhBCNSTQhBCqIYEmhFANCTQhhGpIoAkhVEMCTQihGhJoQgjVkEATQqiGBJoQQjUk0IQQqiGBJoRQDQk0IYRqSKAJIVRDAk0IoRoSaEII1ZBAE0KohgSaEEI1JNCEEKohgSaEUA0JNCGEakigCSFUQwJNCKEaEmhCCNWQQBNCqIYEmhBCNSTQhBCqIYEmhFANCTQhhGpIoAkhVEMCTQihGhJoQgjVkEATQqiGBJoQQjUk0IQQqiGBJoRQDQk0IYRqSKAJIVRDAk0IoRoSaEII1ZBAE0KohgSaEEI1JNCEEKohgSaEUA0JNCGEakigCSFUQwJNCKEaEmhCCNWQQBNCqIYEmhBCNSTQhBCqIYEmhFANCTQhhGpIoAkhVEMCTQihGhJoQgjVkEATQqhGHgJN8+xqIYQQmcpb7uQYaBqNZYFGozFv9RFCiDx6MmeezKGs5LnLmZiYmNdNhBAiT/KbM3kKNI1GQ1xcHPHx8dJSE0IUOKPRSHx8PHFxcblulaWniYuLyzaZjEYjRqMRg8GAwWAgNTUVQ2oqqQaDsgyMSL4JIfLDlFsaNBrTj5VWi9bKCisrK7RaLVqtVlmWE+vc79RUoFajwajVYgUYlEAzk1QTQuTF45Ay54tGqzX9m8sQSy9XgabRaMBoNO3AHGYaDZonA81olEgTQuSKqWFmGWjpQ02j0aAh9ycEIBeBptFoTKGVVrhWq8WYLsxkLE0IURA06VplSussLcxyG2p56nKCKVWNaSGXdZhJyAkhspN5QClhZvrl2XU5jWldTtJ1P6V1JoQoSJpMWmQF2uV8slAl2J7YkYSbECI/sgqs/Fy2ketAy2wn6UMsPzsXQoj0njZH8hxoBblzIYQoSDLbhhBCNSTQhBCqIYEmhFANCTQhhGpIoAkhVEMCTQihGhJoQgjVkEATQqjG/wO+p8ktcUJdCwAAAABJRU5ErkJggg=="},508:function(e,t,a){"use strict";a.r(t),t.default="data:image/png;base64,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"},509:function(e,t,a){"use strict";a.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/fd056868.42217e60.js b/docs/fd056868.42217e60.js
deleted file mode 100644
index e753982aae..0000000000
--- a/docs/fd056868.42217e60.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[231],{284:function(e,o,r){"use strict";r.r(o),r.d(o,"frontMatter",(function(){return c})),r.d(o,"metadata",(function(){return i})),r.d(o,"rightToc",(function(){return l})),r.d(o,"default",(function(){return s}));var t=r(2),n=r(6),a=(r(0),r(290)),c={title:"Form / Combobox"},i={unversionedId:"examples/combobox",id:"examples/combobox",isDocsHomePage:!1,title:"Form / Combobox",description:"Use comboboxes to allow users to either choose between available choices or indicate a choice by free-form editing.",source:"@site/docs/examples/combobox.md",slug:"/examples/combobox",permalink:"/wave/docs/examples/combobox",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/combobox.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Choice Group",permalink:"/wave/docs/examples/choice-group"},next:{title:"Form / Toggle",permalink:"/wave/docs/examples/toggle"}},l=[],b={rightToc:l};function s(e){var o=e.components,c=Object(n.a)(e,["components"]);return Object(a.b)("wrapper",Object(t.a)({},b,c,{components:o,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use comboboxes to allow users to either choose between available choices or indicate a choice by free-form editing."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(427).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\ncombobox_choices = ['Cyan', 'Magenta', 'Yellow', 'Black']\n\n\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'combobox={q.args.combobox}'),\n            ui.text(f'combobox_disabled={q.args.combobox_disabled}'),\n            ui.text(f'combobox_error={q.args.combobox_error}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.combobox(name='combobox', label='Enter or choose a color', placeholder='Color...', value='Blue',\n                        choices=combobox_choices),\n            ui.combobox(name='combobox_disabled', label='Enter or choose a color', placeholder='Color...', value='Blue',\n                        choices=combobox_choices, disabled=True),\n            ui.combobox(name='combobox_error', label='Enter or choose a color', placeholder='Color...', value='Blue',\n                        choices=combobox_choices, error='This combobox has an error!'),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n\n\nlisten('/demo', serve)\n")))}s.isMDXComponent=!0},290:function(e,o,r){"use strict";r.d(o,"a",(function(){return m})),r.d(o,"b",(function(){return d}));var t=r(0),n=r.n(t);function a(e,o,r){return o in e?Object.defineProperty(e,o,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[o]=r,e}function c(e,o){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);o&&(t=t.filter((function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable}))),r.push.apply(r,t)}return r}function i(e){for(var o=1;o<arguments.length;o++){var r=null!=arguments[o]?arguments[o]:{};o%2?c(Object(r),!0).forEach((function(o){a(e,o,r[o])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(r,o))}))}return e}function l(e,o){if(null==e)return{};var r,t,n=function(e,o){if(null==e)return{};var r,t,n={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],o.indexOf(r)>=0||(n[r]=e[r]);return n}(e,o);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],o.indexOf(r)>=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<a;b++)c[b]=r[b];return n.a.createElement.apply(null,c)}return n.a.createElement.apply(null,r)}p.displayName="MDXCreateElement"},427:function(e,o,r){"use strict";r.r(o),o.default=r.p+"assets/images/combobox-99fc7d69ef37ddf7a125cdeaa730e2ce.png"}}]);
\ No newline at end of file
diff --git a/docs/fd056868.c9138dea.js b/docs/fd056868.c9138dea.js
new file mode 100644
index 0000000000..a76d8bf54d
--- /dev/null
+++ b/docs/fd056868.c9138dea.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[233],{286:function(e,o,r){"use strict";r.r(o),r.d(o,"frontMatter",(function(){return c})),r.d(o,"metadata",(function(){return i})),r.d(o,"rightToc",(function(){return l})),r.d(o,"default",(function(){return s}));var t=r(2),n=r(6),a=(r(0),r(292)),c={title:"Form / Combobox"},i={unversionedId:"examples/combobox",id:"examples/combobox",isDocsHomePage:!1,title:"Form / Combobox",description:"Use comboboxes to allow users to either choose between available choices or indicate a choice by free-form editing.",source:"@site/docs/examples/combobox.md",slug:"/examples/combobox",permalink:"/wave/docs/examples/combobox",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/combobox.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Choice Group",permalink:"/wave/docs/examples/choice-group"},next:{title:"Form / Toggle",permalink:"/wave/docs/examples/toggle"}},l=[],b={rightToc:l};function s(e){var o=e.components,c=Object(n.a)(e,["components"]);return Object(a.b)("wrapper",Object(t.a)({},b,c,{components:o,mdxType:"MDXLayout"}),Object(a.b)("p",null,"Use comboboxes to allow users to either choose between available choices or indicate a choice by free-form editing."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+r(432).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(t.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\ncombobox_choices = ['Cyan', 'Magenta', 'Yellow', 'Black']\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if q.args.show_inputs:\n        q.page['example'].items = [\n            ui.text(f'combobox={q.args.combobox}'),\n            ui.text(f'combobox_disabled={q.args.combobox_disabled}'),\n            ui.text(f'combobox_error={q.args.combobox_error}'),\n            ui.button(name='show_form', label='Back', primary=True),\n        ]\n    else:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.combobox(name='combobox', label='Enter or choose a color', placeholder='Color...', value='Blue',\n                        choices=combobox_choices),\n            ui.combobox(name='combobox_disabled', label='Enter or choose a color', placeholder='Color...', value='Blue',\n                        choices=combobox_choices, disabled=True),\n            ui.combobox(name='combobox_error', label='Enter or choose a color', placeholder='Color...', value='Blue',\n                        choices=combobox_choices, error='This combobox has an error!'),\n            ui.button(name='show_inputs', label='Submit', primary=True),\n        ])\n    await q.page.save()\n")))}s.isMDXComponent=!0},292:function(e,o,r){"use strict";r.d(o,"a",(function(){return m})),r.d(o,"b",(function(){return d}));var t=r(0),n=r.n(t);function a(e,o,r){return o in e?Object.defineProperty(e,o,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[o]=r,e}function c(e,o){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);o&&(t=t.filter((function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable}))),r.push.apply(r,t)}return r}function i(e){for(var o=1;o<arguments.length;o++){var r=null!=arguments[o]?arguments[o]:{};o%2?c(Object(r),!0).forEach((function(o){a(e,o,r[o])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(r,o))}))}return e}function l(e,o){if(null==e)return{};var r,t,n=function(e,o){if(null==e)return{};var r,t,n={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],o.indexOf(r)>=0||(n[r]=e[r]);return n}(e,o);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],o.indexOf(r)>=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<a;b++)c[b]=r[b];return n.a.createElement.apply(null,c)}return n.a.createElement.apply(null,r)}p.displayName="MDXCreateElement"},432:function(e,o,r){"use strict";r.r(o),o.default=r.p+"assets/images/combobox-99fc7d69ef37ddf7a125cdeaa730e2ce.png"}}]);
\ No newline at end of file
diff --git a/docs/fe4d4432.25e593e1.js b/docs/fe4d4432.25e593e1.js
new file mode 100644
index 0000000000..2b72cbb604
--- /dev/null
+++ b/docs/fe4d4432.25e593e1.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[234],{287:function(e,t,i){"use strict";i.r(t),i.d(t,"frontMatter",(function(){return o})),i.d(t,"metadata",(function(){return d})),i.d(t,"rightToc",(function(){return c})),i.d(t,"default",(function(){return R}));var r=i(2),n=i(6),a=(i(0),i(292)),o={title:"Form / Date Picker / Trigger"},d={unversionedId:"examples/date-picker-trigger",id:"examples/date-picker-trigger",isDocsHomePage:!1,title:"Form / Date Picker / Trigger",description:"To handle live changes to a date picker, enable the trigger attribute.",source:"@site/docs/examples/date-picker-trigger.md",slug:"/examples/date-picker-trigger",permalink:"/wave/docs/examples/date-picker-trigger",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/date-picker-trigger.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Date Picker",permalink:"/wave/docs/examples/date-picker"},next:{title:"Form / Color Picker",permalink:"/wave/docs/examples/color-picker"}},c=[],s={rightToc:c};function R(e){var t=e.components,o=Object(n.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},s,o,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"To handle live changes to a date picker, enable the ",Object(a.b)("inlineCode",{parentName:"p"},"trigger")," attribute."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+i(437).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import main, app, Q, ui\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if not q.client.initialized:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.text(f'date_trigger={q.args.date_trigger}'),\n            ui.date_picker(name='date_trigger', label='Pick a date', trigger=True),\n        ])\n        q.client.initialized = True\n    else:\n        q.page['example'].items[0].text.content = f'Selected date: {q.args.date_trigger}'\n        q.page['example'].items[1].date_picker.value = q.args.date_trigger\n    await q.page.save()\n")))}R.isMDXComponent=!0},292:function(e,t,i){"use strict";i.d(t,"a",(function(){return l})),i.d(t,"b",(function(){return m}));var r=i(0),n=i.n(r);function a(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function o(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,r)}return i}function d(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?o(Object(i),!0).forEach((function(t){a(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):o(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function c(e,t){if(null==e)return{};var i,r,n=function(e,t){if(null==e)return{};var i,r,n={},a=Object.keys(e);for(r=0;r<a.length;r++)i=a[r],t.indexOf(i)>=0||(n[i]=e[i]);return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)i=a[r],t.indexOf(i)>=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)}},u=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),u=r,m=l["".concat(o,".").concat(u)]||l[u]||f[u]||a;return i?n.a.createElement(m,d(d({ref:t},s),{},{components:i})):n.a.createElement(m,d({ref:t},s))}));function m(e,t){var i=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=i.length,o=new Array(a);o[0]=u;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<a;s++)o[s]=i[s];return n.a.createElement.apply(null,o)}return n.a.createElement.apply(null,i)}u.displayName="MDXCreateElement"},437:function(e,t,i){"use strict";i.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/fe4d4432.bb7ccc47.js b/docs/fe4d4432.bb7ccc47.js
deleted file mode 100644
index 3c925d6281..0000000000
--- a/docs/fe4d4432.bb7ccc47.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[232],{285:function(e,t,i){"use strict";i.r(t),i.d(t,"frontMatter",(function(){return o})),i.d(t,"metadata",(function(){return d})),i.d(t,"rightToc",(function(){return c})),i.d(t,"default",(function(){return R}));var r=i(2),n=i(6),a=(i(0),i(290)),o={title:"Form / Date Picker / Trigger"},d={unversionedId:"examples/date-picker-trigger",id:"examples/date-picker-trigger",isDocsHomePage:!1,title:"Form / Date Picker / Trigger",description:"To handle live changes to a date picker, enable the trigger attribute.",source:"@site/docs/examples/date-picker-trigger.md",slug:"/examples/date-picker-trigger",permalink:"/wave/docs/examples/date-picker-trigger",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/date-picker-trigger.md",version:"current",sidebar:"someSidebar",previous:{title:"Form / Date Picker",permalink:"/wave/docs/examples/date-picker"},next:{title:"Form / Color Picker",permalink:"/wave/docs/examples/color-picker"}},c=[],s={rightToc:c};function R(e){var t=e.components,o=Object(n.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},s,o,{components:t,mdxType:"MDXLayout"}),Object(a.b)("p",null,"To handle live changes to a date picker, enable the ",Object(a.b)("inlineCode",{parentName:"p"},"trigger")," attribute."),Object(a.b)("div",{className:"cover",style:{backgroundImage:"url("+i(432).default+")"}}),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"from h2o_wave import Q, listen, ui\n\n\nasync def main(q: Q):\n    if not q.client.initialized:\n        q.page['example'] = ui.form_card(box='1 1 4 10', items=[\n            ui.text(f'date_trigger={q.args.date_trigger}'),\n            ui.date_picker(name='date_trigger', label='Pick a date', trigger=True),\n        ])\n        q.client.initialized = True\n    else:\n        q.page['example'].items[0].text.content = f'Selected date: {q.args.date_trigger}'\n        q.page['example'].items[1].date_picker.value = q.args.date_trigger\n    await q.page.save()\n\n\nif __name__ == '__main__':\n    listen('/demo', main)\n")))}R.isMDXComponent=!0},290:function(e,t,i){"use strict";i.d(t,"a",(function(){return l})),i.d(t,"b",(function(){return u}));var r=i(0),n=i.n(r);function a(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function o(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,r)}return i}function d(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?o(Object(i),!0).forEach((function(t){a(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):o(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function c(e,t){if(null==e)return{};var i,r,n=function(e,t){if(null==e)return{};var i,r,n={},a=Object.keys(e);for(r=0;r<a.length;r++)i=a[r],t.indexOf(i)>=0||(n[i]=e[i]);return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)i=a[r],t.indexOf(i)>=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<a;s++)o[s]=i[s];return n.a.createElement.apply(null,o)}return n.a.createElement.apply(null,i)}m.displayName="MDXCreateElement"},432:function(e,t,i){"use strict";i.r(t),t.default="data:image/png;base64,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"}}]);
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 689778e4ae..cc4ddff701 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -5,21 +5,21 @@
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="Docusaurus v2.0.0-alpha.65">
 <title data-react-helmet="true">Hello from H2O Wave | H2O Wave</title><meta data-react-helmet="true" property="og:title" content="Hello from H2O Wave | H2O Wave"><meta data-react-helmet="true" name="description" content="Description will go into a meta tag in &lt;head /&gt;"><meta data-react-helmet="true" property="og:description" content="Description will go into a meta tag in &lt;head /&gt;"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><link data-react-helmet="true" rel="shortcut icon" href="/wave/img/favicon.ico"><link rel="stylesheet" href="/wave/styles.4ea50ba0.css">
-<link rel="preload" href="/wave/styles.f5ed2e52.js" as="script">
-<link rel="preload" href="/wave/runtime~main.7ebe698c.js" as="script">
-<link rel="preload" href="/wave/main.64610da1.js" as="script">
-<link rel="preload" href="/wave/1.d3a71930.js" as="script">
-<link rel="preload" href="/wave/2.95b8a467.js" as="script">
-<link rel="preload" href="/wave/c4f5d8e4.8905731d.js" as="script">
+<link rel="preload" href="/wave/styles.f2d89f88.js" as="script">
+<link rel="preload" href="/wave/runtime~main.b200dec9.js" as="script">
+<link rel="preload" href="/wave/main.0720c80c.js" as="script">
+<link rel="preload" href="/wave/1.4dafcaaf.js" as="script">
+<link rel="preload" href="/wave/2.e94e8fdd.js" as="script">
+<link rel="preload" href="/wave/c4f5d8e4.4fc6a1ee.js" as="script">
 </head>
 <body>
 <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
-<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><header class="hero hero--primary heroBanner_2Ftp"><div class="container"><h1 class="hero__title">Realtime Web Apps and Dashboards for Python</h1><p class="hero__subtitle">From the makers of H2O</p><div class="buttons_1Wc3"><a class="button button--outline button--secondary button--lg" href="/wave/docs/getting-started">Get Started</a></div></div></header><main><section class="features_P2SU"><div class="container"><div class="row"><div class="col col--4 feature_24Br"><div><i class="fab fa-python"></i></div><h3>Know Python?</h3><p>No HTML, CSS, Javascript skills required. Build rich, interactive web apps using pure Python.</p></div><div class="col col--4 feature_24Br"><div><i class="fas fa-stopwatch"></i></div><h3>Realtime Sync</h3><p>Broadcast live information, visualizations and graphics using Wave&#x27;s low-latency realtime server.</p></div><div class="col col--4 feature_24Br"><div><i class="fas fa-users"></i></div><h3>Collaborative Content</h3><p>Instant control over every connected web browser using a simple and intuitive programming model.</p></div><div class="col col--4 feature_24Br"><div><i class="fas fa-laptop-code"></i></div><h3>Develop Quickly</h3><p>Preview your app live as you code. Dramatically reduce the time and effort to build web apps.</p></div><div class="col col--4 feature_24Br"><div><i class="fas fa-upload"></i></div><h3>Deploy Instantly</h3><p>Easily share your apps with end-users, get feedback, improve and iterate.</p></div><div class="col col--4 feature_24Br"><div><i class="fas fa-terminal"></i></div><h3>Run Anywhere</h3><p>~10MB static executables for Linux, Windows, OSX, BSD, Solaris on AMD64, 386, ARM, PPC. Run it on a RPi Zero for great good!</p></div></div></div></section></main></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
-<script src="/wave/styles.f5ed2e52.js"></script>
-<script src="/wave/runtime~main.7ebe698c.js"></script>
-<script src="/wave/main.64610da1.js"></script>
-<script src="/wave/1.d3a71930.js"></script>
-<script src="/wave/2.95b8a467.js"></script>
-<script src="/wave/c4f5d8e4.8905731d.js"></script>
+<nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a><a class="navbar__item navbar__link" href="/wave/docs/examples">Gallery</a><a class="navbar__item navbar__link" href="/wave/docs/getting-started">Get Started</a><a class="navbar__item navbar__link" href="/wave/docs/guide">Guide</a><a class="navbar__item navbar__link" href="/wave/docs/enterprise">Enterprise</a><a class="navbar__item navbar__link" href="/wave/docs/api/index">API</a><a class="navbar__item navbar__link" href="/wave/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Download</a><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_2aTZ"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_BsTx">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_BsTx">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/wave/"><img class="navbar__logo" src="/wave/img/logo.svg" alt="H2O Wave"><strong class="navbar__title">H2O Wave</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/wave/docs/examples">Gallery</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/getting-started">Get Started</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/guide">Guide</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/enterprise">Enterprise</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/docs/api/index">API</a></li><li class="menu__list-item"><a class="menu__link" href="/wave/blog">Blog</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="menu__link">Download</a></li><li class="menu__list-item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><header class="hero hero--primary heroBanner_2Ftp"><div class="container"><h1 class="hero__title">Realtime Web Apps and Dashboards for Python</h1><p class="hero__subtitle">From the makers of H2O</p><div class="buttons_1Wc3"><a class="button button--outline button--secondary button--lg" href="/wave/docs/getting-started">Get Started</a></div></div></header><main><section class="features_P2SU"><div class="container"><div class="row"><div class="col col--4 feature_24Br"><div><i class="fab fa-python"></i></div><h3>Know Python?</h3><p>No HTML, CSS, Javascript skills required. Build rich, interactive web apps using pure Python.</p></div><div class="col col--4 feature_24Br"><div><i class="fas fa-stopwatch"></i></div><h3>Realtime Sync</h3><p>Broadcast live information, visualizations and graphics using Wave&#x27;s low-latency realtime server.</p></div><div class="col col--4 feature_24Br"><div><i class="fas fa-users"></i></div><h3>Collaborative Content</h3><p>Instant control over every connected web browser using a simple and intuitive programming model.</p></div><div class="col col--4 feature_24Br"><div><i class="fas fa-laptop-code"></i></div><h3>Develop Quickly</h3><p>Preview your app live as you code. Dramatically reduce the time and effort to build web apps.</p></div><div class="col col--4 feature_24Br"><div><i class="fas fa-upload"></i></div><h3>Deploy Instantly</h3><p>Easily share your apps with end-users, get feedback, improve and iterate.</p></div><div class="col col--4 feature_24Br"><div><i class="fas fa-terminal"></i></div><h3>Run Anywhere</h3><p>~10MB static executables for Linux, Windows, OSX, BSD, Solaris on AMD64, 386, ARM, PPC. Run it on a RPi Zero for great good!</p></div></div></div></section></main></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Learn</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/wave/docs/examples">Gallery</a></li><li class="footer__item"><a class="footer__link-item" activebasepath="docs" href="/wave/docs/getting-started">Get Started</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/guide">Guide</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/enterprise">Enterprise</a></li><li class="footer__item"><a class="footer__link-item" href="/wave/docs/api/index">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/h2o-wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow</a></li><li class="footer__item"><a href="https://twitter.com/h2oai" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://github.com/h2oai/wave/releases/latest" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://github.com/h2oai/wave" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div></div><div class="text--center"><div>Copyright © 2020 <a href="https://h2o.ai" style="color:#ffe52b">H2O.ai</a>, Inc.</div></div></div></footer></div>
+<script src="/wave/styles.f2d89f88.js"></script>
+<script src="/wave/runtime~main.b200dec9.js"></script>
+<script src="/wave/main.0720c80c.js"></script>
+<script src="/wave/1.4dafcaaf.js"></script>
+<script src="/wave/2.e94e8fdd.js"></script>
+<script src="/wave/c4f5d8e4.4fc6a1ee.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/docs/main.0720c80c.js b/docs/main.0720c80c.js
new file mode 100644
index 0000000000..f684d772c2
--- /dev/null
+++ b/docs/main.0720c80c.js
@@ -0,0 +1,2 @@
+/*! For license information please see main.0720c80c.js.LICENSE.txt */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[235],[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<n;o++)a[o]=arguments[o];return(t=e.call.apply(e,[this].concat(a))||this).history=Object(i.d)(t.props),t}return Object(a.a)(t,e),t.prototype.render=function(){return r.a.createElement(g,{history:this.history,children:this.props.children})},t}(r.a.Component);var x=function(e){function t(){return e.apply(this,arguments)||this}Object(a.a)(t,e);var n=t.prototype;return n.componentDidMount=function(){this.props.onMount&&this.props.onMount.call(this,this)},n.componentDidUpdate=function(e){this.props.onUpdate&&this.props.onUpdate.call(this,this,e)},n.componentWillUnmount=function(){this.props.onUnmount&&this.props.onUnmount.call(this,this)},n.render=function(){return null},t}(r.a.Component);function w(e){var t=e.message,n=e.when,a=void 0===n||n;return r.a.createElement(v.Consumer,null,(function(e){if(e||Object(s.a)(!1),!a||e.staticContext)return null;var n=e.history.block;return r.a.createElement(x,{onMount:function(e){e.release=n(t)},onUpdate:function(e,a){a.message!==t&&(e.release(),e.release=n(t))},onUnmount:function(e){e.release()},message:t})}))}var y={},k=0;function E(e,t){return void 0===e&&(e="/"),void 0===t&&(t={}),"/"===e?e:function(e){if(y[e])return y[e];var t=p.a.compile(e);return k<1e4&&(y[e]=t,k++),t}(e)(t,{pretty:!0})}function S(e){var t=e.computedMatch,n=e.to,a=e.push,o=void 0!==a&&a;return r.a.createElement(v.Consumer,null,(function(e){e||Object(s.a)(!1);var a=e.history,l=e.staticContext,u=o?a.push:a.replace,p=Object(i.c)(t?"string"==typeof n?E(n,t.params):Object(c.a)({},n,{pathname:E(n.pathname,t.params)}):n);return l?(u(p),null):r.a.createElement(x,{onMount:function(){u(p)},onUpdate:function(e,t){var n=Object(i.c)(t.to);Object(i.f)(n,Object(c.a)({},p,{key:n.key}))||u(p)},to:n})}))}var T={},_=0;function O(e,t){void 0===t&&(t={}),("string"==typeof t||Array.isArray(t))&&(t={path:t});var n=t,a=n.path,o=n.exact,r=void 0!==o&&o,i=n.strict,l=void 0!==i&&i,s=n.sensitive,c=void 0!==s&&s;return[].concat(a).reduce((function(t,n){if(!n&&""!==n)return null;if(t)return t;var a=function(e,t){var n=""+t.end+t.strict+t.sensitive,a=T[n]||(T[n]={});if(a[e])return a[e];var o=[],r={regexp:p()(e,o,t),keys:o};return _<1e4&&(a[e]=r,_++),r}(n,{end:r,strict:l,sensitive:c}),o=a.regexp,i=a.keys,s=o.exec(e);if(!s)return null;var u=s[0],d=s.slice(1),f=e===u;return r&&!f?null:{path:n,url:"/"===n&&""===u?"/":u,isExact:f,params:i.reduce((function(e,t,n){return e[t.name]=d[n],e}),{})}}),null)}var C=function(e){function t(){return e.apply(this,arguments)||this}return Object(a.a)(t,e),t.prototype.render=function(){var e=this;return r.a.createElement(v.Consumer,null,(function(t){t||Object(s.a)(!1);var n=e.props.location||t.location,a=e.props.computedMatch?e.props.computedMatch:e.props.path?O(n.pathname,e.props):t.match,o=Object(c.a)({},t,{location:n,match:a}),i=e.props,l=i.children,u=i.component,p=i.render;return Array.isArray(l)&&0===l.length&&(l=null),r.a.createElement(v.Provider,{value:o},o.match?l?"function"==typeof l?l(o):l:u?r.a.createElement(u,o):p?p(o):null:"function"==typeof l?l(o):null)}))},t}(r.a.Component);function P(e){return"/"===e.charAt(0)?e:"/"+e}function N(e,t){if(!e)return t;var n=P(e);return 0!==t.pathname.indexOf(n)?t:Object(c.a)({},t,{pathname:t.pathname.substr(n.length)})}function A(e){return"string"==typeof e?e:Object(i.e)(e)}function R(e){return function(){Object(s.a)(!1)}}function I(){}var F=function(e){function t(){for(var t,n=arguments.length,a=new Array(n),o=0;o<n;o++)a[o]=arguments[o];return(t=e.call.apply(e,[this].concat(a))||this).handlePush=function(e){return t.navigateTo(e,"PUSH")},t.handleReplace=function(e){return t.navigateTo(e,"REPLACE")},t.handleListen=function(){return I},t.handleBlock=function(){return I},t}Object(a.a)(t,e);var n=t.prototype;return n.navigateTo=function(e,t){var n=this.props,a=n.basename,o=void 0===a?"":a,r=n.context,l=void 0===r?{}:r;l.action=t,l.location=function(e,t){return e?Object(c.a)({},t,{pathname:P(e)+t.pathname}):t}(o,Object(i.c)(e)),l.url=A(l.location)},n.render=function(){var e=this.props,t=e.basename,n=void 0===t?"":t,a=e.context,o=void 0===a?{}:a,l=e.location,s=void 0===l?"/":l,u=Object(d.a)(e,["basename","context","location"]),p={createHref:function(e){return P(n+A(e))},action:"POP",location:N(n,Object(i.c)(s)),push:this.handlePush,replace:this.handleReplace,go:R(),goBack:R(),goForward:R(),listen:this.handleListen,block:this.handleBlock};return r.a.createElement(g,Object(c.a)({},u,{history:p,staticContext:o}))},t}(r.a.Component);var L=function(e){function t(){return e.apply(this,arguments)||this}return Object(a.a)(t,e),t.prototype.render=function(){var e=this;return r.a.createElement(v.Consumer,null,(function(t){t||Object(s.a)(!1);var n,a,o=e.props.location||t.location;return r.a.Children.forEach(e.props.children,(function(e){if(null==a&&r.a.isValidElement(e)){n=e;var i=e.props.path||e.props.from;a=i?O(o.pathname,Object(c.a)({},e.props,{path:i})):t.match}})),a?r.a.cloneElement(n,{location:o,computedMatch:a}):null}))},t}(r.a.Component);function D(e){var t="withRouter("+(e.displayName||e.name)+")",n=function(t){var n=t.wrappedComponentRef,a=Object(d.a)(t,["wrappedComponentRef"]);return r.a.createElement(v.Consumer,null,(function(t){return t||Object(s.a)(!1),r.a.createElement(e,Object(c.a)({},a,t,{ref:n}))}))};return n.displayName=t,n.WrappedComponent=e,m()(n,e)}var j=r.a.useContext;function M(){return j(h)}function z(){return j(v).location}function $(){var e=j(v).match;return e?e.params:{}}function U(e){var t=z(),n=j(v).match;return e?O(t.pathname,e):n}},function(e,t,n){"use strict";function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}n.d(t,"a",(function(){return a}))},function(e,t,n){"use strict";function a(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}n.d(t,"a",(function(){return a}))},function(e,t,n){"use strict";var a="Invariant failed";t.a=function(e,t){if(!e)throw new Error(a)}},function(e,t,n){"use strict";n.d(t,"a",(function(){return E})),n.d(t,"b",(function(){return P})),n.d(t,"d",(function(){return A})),n.d(t,"c",(function(){return h})),n.d(t,"f",(function(){return v})),n.d(t,"e",(function(){return m}));var a=n(2);function o(e){return"/"===e.charAt(0)}function r(e,t){for(var n=t,a=n+1,o=e.length;a<o;n+=1,a+=1)e[n]=e[a];e.pop()}var i=function(e,t){void 0===t&&(t="");var n,a=e&&e.split("/")||[],i=t&&t.split("/")||[],l=e&&o(e),s=t&&o(t),c=l||s;if(e&&o(e)?i=a:a.length&&(i.pop(),i=i.concat(a)),!i.length)return"/";if(i.length){var u=i[i.length-1];n="."===u||".."===u||""===u}else n=!1;for(var p=0,d=i.length;d>=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;a<e;a++)n[a]=arguments[a];t.forEach((function(e){return e.apply(void 0,n)}))}}}var b=!("undefined"==typeof window||!window.document||!window.document.createElement);function x(e,t){t(window.confirm(e))}var w="popstate",y="hashchange";function k(){try{return window.history.state||{}}catch(e){return{}}}function E(e){void 0===e&&(e={}),b||Object(c.a)(!1);var t,n=window.history,o=(-1===(t=window.navigator.userAgent).indexOf("Android 2.")&&-1===t.indexOf("Android 4.0")||-1===t.indexOf("Mobile Safari")||-1!==t.indexOf("Chrome")||-1!==t.indexOf("Windows Phone"))&&window.history&&"pushState"in window.history,r=!(-1===window.navigator.userAgent.indexOf("Trident")),i=e,l=i.forceRefresh,s=void 0!==l&&l,p=i.getUserConfirmation,v=void 0===p?x:p,E=i.keyLength,S=void 0===E?6:E,T=e.basename?f(u(e.basename)):"";function _(e){var t=e||{},n=t.key,a=t.state,o=window.location,r=o.pathname+o.search+o.hash;return T&&(r=d(r,T)),h(r,a,n)}function O(){return Math.random().toString(36).substr(2,S)}var C=g();function P(e){Object(a.a)(U,e),U.length=n.length,C.notifyListeners(U.location,U.action)}function N(e){(function(e){return void 0===e.state&&-1===navigator.userAgent.indexOf("CriOS")})(e)||I(_(e.state))}function A(){I(_(k()))}var R=!1;function I(e){if(R)R=!1,P();else{C.confirmTransitionTo(e,"POP",v,(function(t){t?P({action:"POP",location:e}):function(e){var t=U.location,n=L.indexOf(t.key);-1===n&&(n=0);var a=L.indexOf(e.key);-1===a&&(a=0);var o=n-a;o&&(R=!0,j(o))}(e)}))}}var F=_(k()),L=[F.key];function D(e){return T+m(e)}function j(e){n.go(e)}var M=0;function z(e){1===(M+=e)&&1===e?(window.addEventListener(w,N),r&&window.addEventListener(y,A)):0===M&&(window.removeEventListener(w,N),r&&window.removeEventListener(y,A))}var $=!1;var U={length:n.length,action:"POP",location:F,createHref:D,push:function(e,t){var a="PUSH",r=h(e,t,O(),U.location);C.confirmTransitionTo(r,a,v,(function(e){if(e){var t=D(r),i=r.key,l=r.state;if(o)if(n.pushState({key:i,state:l},null,t),s)window.location.href=t;else{var c=L.indexOf(U.location.key),u=L.slice(0,c+1);u.push(r.key),L=u,P({action:a,location:r})}else window.location.href=t}}))},replace:function(e,t){var a="REPLACE",r=h(e,t,O(),U.location);C.confirmTransitionTo(r,a,v,(function(e){if(e){var t=D(r),i=r.key,l=r.state;if(o)if(n.replaceState({key:i,state:l},null,t),s)window.location.replace(t);else{var c=L.indexOf(U.location.key);-1!==c&&(L[c]=r.key),P({action:a,location:r})}else window.location.replace(t)}}))},go:j,goBack:function(){j(-1)},goForward:function(){j(1)},block:function(e){void 0===e&&(e=!1);var t=C.setPrompt(e);return $||(z(1),$=!0),function(){return $&&($=!1,z(-1)),t()}},listen:function(e){var t=C.appendListener(e);return z(1),function(){z(-1),t()}}};return U}var S="hashchange",T={hashbang:{encodePath:function(e){return"!"===e.charAt(0)?e:"!/"+p(e)},decodePath:function(e){return"!"===e.charAt(0)?e.substr(1):e}},noslash:{encodePath:p,decodePath:u},slash:{encodePath:u,decodePath:u}};function _(e){var t=e.indexOf("#");return-1===t?e:e.slice(0,t)}function O(){var e=window.location.href,t=e.indexOf("#");return-1===t?"":e.substring(t+1)}function C(e){window.location.replace(_(window.location.href)+"#"+e)}function P(e){void 0===e&&(e={}),b||Object(c.a)(!1);var t=window.history,n=(window.navigator.userAgent.indexOf("Firefox"),e),o=n.getUserConfirmation,r=void 0===o?x:o,i=n.hashType,l=void 0===i?"slash":i,s=e.basename?f(u(e.basename)):"",p=T[l],v=p.encodePath,w=p.decodePath;function y(){var e=w(O());return s&&(e=d(e,s)),h(e)}var k=g();function E(e){Object(a.a)($,e),$.length=t.length,k.notifyListeners($.location,$.action)}var P=!1,N=null;function A(){var e,t,n=O(),a=v(n);if(n!==a)C(a);else{var o=y(),i=$.location;if(!P&&(t=o,(e=i).pathname===t.pathname&&e.search===t.search&&e.hash===t.hash))return;if(N===m(o))return;N=null,function(e){if(P)P=!1,E();else{var t="POP";k.confirmTransitionTo(e,t,r,(function(n){n?E({action:t,location:e}):function(e){var t=$.location,n=L.lastIndexOf(m(t));-1===n&&(n=0);var a=L.lastIndexOf(m(e));-1===a&&(a=0);var o=n-a;o&&(P=!0,D(o))}(e)}))}}(o)}}var R=O(),I=v(R);R!==I&&C(I);var F=y(),L=[m(F)];function D(e){t.go(e)}var j=0;function M(e){1===(j+=e)&&1===e?window.addEventListener(S,A):0===j&&window.removeEventListener(S,A)}var z=!1;var $={length:t.length,action:"POP",location:F,createHref:function(e){var t=document.querySelector("base"),n="";return t&&t.getAttribute("href")&&(n=_(window.location.href)),n+"#"+v(s+m(e))},push:function(e,t){var n="PUSH",a=h(e,void 0,void 0,$.location);k.confirmTransitionTo(a,n,r,(function(e){if(e){var t=m(a),o=v(s+t);if(O()!==o){N=t,function(e){window.location.hash=e}(o);var r=L.lastIndexOf(m($.location)),i=L.slice(0,r+1);i.push(t),L=i,E({action:n,location:a})}else E()}}))},replace:function(e,t){var n="REPLACE",a=h(e,void 0,void 0,$.location);k.confirmTransitionTo(a,n,r,(function(e){if(e){var t=m(a),o=v(s+t);O()!==o&&(N=t,C(o));var r=L.indexOf(m($.location));-1!==r&&(L[r]=t),E({action:n,location:a})}}))},go:D,goBack:function(){D(-1)},goForward:function(){D(1)},block:function(e){void 0===e&&(e=!1);var t=k.setPrompt(e);return z||(M(1),z=!0),function(){return z&&(z=!1,M(-1)),t()}},listen:function(e){var t=k.appendListener(e);return M(1),function(){M(-1),t()}}};return $}function N(e,t,n){return Math.min(Math.max(e,t),n)}function A(e){void 0===e&&(e={});var t=e,n=t.getUserConfirmation,o=t.initialEntries,r=void 0===o?["/"]:o,i=t.initialIndex,l=void 0===i?0:i,s=t.keyLength,c=void 0===s?6:s,u=g();function p(e){Object(a.a)(w,e),w.length=w.entries.length,u.notifyListeners(w.location,w.action)}function d(){return Math.random().toString(36).substr(2,c)}var f=N(l,0,r.length-1),v=r.map((function(e){return h(e,void 0,"string"==typeof e?d():e.key||d())})),b=m;function x(e){var t=N(w.index+e,0,w.entries.length-1),a=w.entries[t];u.confirmTransitionTo(a,"POP",n,(function(e){e?p({action:"POP",location:a,index:t}):p()}))}var w={length:v.length,action:"POP",location:v[f],index:f,entries:v,createHref:b,push:function(e,t){var a="PUSH",o=h(e,t,d(),w.location);u.confirmTransitionTo(o,a,n,(function(e){if(e){var t=w.index+1,n=w.entries.slice(0);n.length>t?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<w.entries.length},block:function(e){return void 0===e&&(e=!1),u.setPrompt(e)},listen:function(e){return u.appendListener(e)}};return w}},function(e,t,n){"use strict";function a(e,t){if(null==e)return{};var n,a,o={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=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:"blog",label:"Blog",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 <a href='https://h2o.ai' style='color:#ffe52b'>H2O.ai</a>, 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-22a":{"component":"a6aa9e1f","items":[{"content":"e7ad456d"}],"metadata":"0eb58673"},"/wave/blog/release-0.9.0-282":{"component":"ccc49370","content":"08f25880"},"/wave/blog/tags-f9b":{"component":"01a85c17","tags":"121dd878"},"/wave/blog/tags/release-4a7":{"component":"6875c492","items":[{"content":"e7ad456d"}],"metadata":"2dd92585"},"/wave/docs-2e3":{"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/cli-59a":{"component":"17896441","content":"26a8c297"},"/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/background-21e":{"component":"17896441","content":"b4d5475e"},"/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/cli-067":{"component":"17896441","content":"1a20bc57"},"/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/deployment-b65":{"component":"17896441","content":"a3713279"},"/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/background-914":{"component":"17896441","content":"3da9dc01"},"/wave/docs/examples/background-executor-bca":{"component":"17896441","content":"2e8e6962"},"/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-icon-3a2":{"component":"17896441","content":"ca84abdc"},"/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/site-async-7b7":{"component":"17896441","content":"3ae7008e"},"/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/migrating-0-8-ba0":{"component":"17896441","content":"8caadd29"},"/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:'<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'};function o(e,t,n){return e<t?t:e>n?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;o<n;o++)a[o]=arguments[o];return(t=e.call.apply(e,[this].concat(a))||this).history=Object(l.a)(t.props),t}return Object(o.a)(t,e),t.prototype.render=function(){return i.a.createElement(a.e,{history:this.history,children:this.props.children})},t}(i.a.Component);var d=function(e){function t(){for(var t,n=arguments.length,a=new Array(n),o=0;o<n;o++)a[o]=arguments[o];return(t=e.call.apply(e,[this].concat(a))||this).history=Object(l.b)(t.props),t}return Object(o.a)(t,e),t.prototype.render=function(){return i.a.createElement(a.e,{history:this.history,children:this.props.children})},t}(i.a.Component);var f=function(e,t){return"function"==typeof e?e(t):e},m=function(e,t){return"string"==typeof e?Object(l.c)(e,null,null,t):e},h=function(e){return e},v=i.a.forwardRef;void 0===v&&(v=h);var g=v((function(e,t){var n=e.innerRef,a=e.navigate,o=e.onClick,r=Object(c.a)(e,["innerRef","navigate","onClick"]),l=r.target,u=Object(s.a)({},r,{onClick:function(e){try{o&&o(e)}catch(t){throw e.preventDefault(),t}e.defaultPrevented||0!==e.button||l&&"_self"!==l||function(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}(e)||(e.preventDefault(),a())}});return u.ref=h!==v&&t||n,i.a.createElement("a",u)}));var b=v((function(e,t){var n=e.component,o=void 0===n?g:n,r=e.replace,l=e.to,p=e.innerRef,d=Object(c.a)(e,["component","replace","to","innerRef"]);return i.a.createElement(a.h.Consumer,null,(function(e){e||Object(u.a)(!1);var n=e.history,a=m(f(l,e.location),e.location),c=a?n.createHref(a):"",g=Object(s.a)({},d,{href:c,navigate:function(){var t=f(l,e.location);(r?n.replace:n.push)(t)}});return h!==v?g.ref=t||p:g.innerRef=p,i.a.createElement(o,g)}))})),x=function(e){return e},w=i.a.forwardRef;void 0===w&&(w=x);var y=w((function(e,t){var n=e["aria-current"],o=void 0===n?"page":n,r=e.activeClassName,l=void 0===r?"active":r,p=e.activeStyle,d=e.className,h=e.exact,v=e.isActive,g=e.location,y=e.sensitive,k=e.strict,E=e.style,S=e.to,T=e.innerRef,_=Object(c.a)(e,["aria-current","activeClassName","activeStyle","className","exact","isActive","location","sensitive","strict","style","to","innerRef"]);return i.a.createElement(a.h.Consumer,null,(function(e){e||Object(u.a)(!1);var n=g||e.location,r=m(f(S,n),n),c=r.pathname,O=c&&c.replace(/([.+*?=^!:${}()[\]|/\\])/g,"\\$1"),C=O?Object(a.j)(n.pathname,{path:O,exact:h,sensitive:y,strict:k}):null,P=!!(v?v(C,n):C),N=P?function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.filter((function(e){return e})).join(" ")}(d,l):d,A=P?Object(s.a)({},E,{},p):E,R=Object(s.a)({"aria-current":P&&o||null,className:N,style:A,to:r},_);return x!==w?R.ref=t||T:R.innerRef=T,i.a.createElement(b,R)}))}))},,,function(e,t,n){"use strict";var a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var l=n(0),s=n(7),c=[],u=[];function p(e){var t=e(),n={loading:!0,loaded:null,error:null};return n.promise=t.then((function(e){return n.loading=!1,n.loaded=e,e})).catch((function(e){throw n.loading=!1,n.error=e,e})),n}function d(e){var t={loading:!1,loaded:{},error:null},n=[];try{Object.keys(e).forEach((function(a){var o=p(e[a]);o.loading?t.loading=!0:(t.loaded[a]=o.loaded,t.error=o.error),n.push(o.promise),o.promise.then((function(e){t.loaded[a]=e})).catch((function(e){t.error=e}))}))}catch(a){t.error=a}return t.promise=Promise.all(n).then((function(e){return t.loading=!1,e})).catch((function(e){throw t.loading=!1,e})),t}function f(e,t){return l.createElement((n=e)&&n.__esModule?n.default:n,t);var n}function m(e,t){var p,d;if(!t.loading)throw new Error("react-loadable requires a `loading` component");var m=Object.assign({loader:null,loading:null,delay:200,timeout:null,render:f,webpack:null,modules:null},t),h=null;function v(){return h||(h=e(m.loader)),h.promise}return c.push(v),"function"==typeof m.webpack&&u.push((function(){if(e=m.webpack,"object"===a(n.m)&&e().every((function(e){return void 0!==e&&void 0!==n.m[e]})))return v();var e})),d=p=function(t){function n(a){o(this,n);var i=r(this,t.call(this,a));return i.retry=function(){i.setState({error:null,loading:!0,timedOut:!1}),h=e(m.loader),i._loadModule()},v(),i.state={error:h.error,pastDelay:!1,timedOut:!1,loading:h.loading,loaded:h.loaded},i}return i(n,t),n.preload=function(){return v()},n.prototype.componentWillMount=function(){this._mounted=!0,this._loadModule()},n.prototype._loadModule=function(){var e=this;if(this.context.loadable&&Array.isArray(m.modules)&&m.modules.forEach((function(t){e.context.loadable.report(t)})),h.loading){"number"==typeof m.delay&&(0===m.delay?this.setState({pastDelay:!0}):this._delay=setTimeout((function(){e.setState({pastDelay:!0})}),m.delay)),"number"==typeof m.timeout&&(this._timeout=setTimeout((function(){e.setState({timedOut:!0})}),m.timeout));var t=function(){e._mounted&&(e.setState({error:h.error,loaded:h.loaded,loading:h.loading}),e._clearTimeouts())};h.promise.then((function(){t()})).catch((function(e){t()}))}},n.prototype.componentWillUnmount=function(){this._mounted=!1,this._clearTimeouts()},n.prototype._clearTimeouts=function(){clearTimeout(this._delay),clearTimeout(this._timeout)},n.prototype.render=function(){return this.state.loading||this.state.error?l.createElement(m.loading,{isLoading:this.state.loading,pastDelay:this.state.pastDelay,timedOut:this.state.timedOut,error:this.state.error,retry:this.retry}):this.state.loaded?m.render(this.state.loaded,this.props):null},n}(l.Component),p.contextTypes={loadable:s.shape({report:s.func.isRequired})},d}function h(e){return m(p,e)}h.Map=function(e){if("function"!=typeof e.render)throw new Error("LoadableMap requires a `render(loaded, props)` function");return m(d,e)};var v=function(e){function t(){return o(this,t),r(this,e.apply(this,arguments))}return i(t,e),t.prototype.getChildContext=function(){return{loadable:{report:this.props.report}}},t.prototype.render=function(){return l.Children.only(this.props.children)},t}(l.Component);function g(e){for(var t=[];e.length;){var n=e.pop();t.push(n())}return Promise.all(t).then((function(){if(e.length)return g(e)}))}v.propTypes={report:s.func.isRequired},v.childContextTypes={loadable:s.shape({report:s.func.isRequired}).isRequired},h.Capture=v,h.preloadAll=function(){return new Promise((function(e,t){g(c).then(e,t)}))},h.preloadReady=function(){return new Promise((function(e,t){g(u).then(e,e)}))},e.exports=h},function(e,t,n){"use strict";(function(e){var a=n(0),o=n.n(a),r=n(3),i=n(7),l=n.n(i),s=1073741823,c="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:void 0!==e?e:{};function u(e){var t=[];return{on:function(e){t.push(e)},off:function(e){t=t.filter((function(t){return t!==e}))},get:function(){return e},set:function(n,a){e=n,t.forEach((function(t){return t(e,a)}))}}}var p=o.a.createContext||function(e,t){var n,o,i,p="__create-react-context-"+((c[i="__global_unique_id__"]=(c[i]||0)+1)+"__"),d=function(e){function n(){var t;return(t=e.apply(this,arguments)||this).emitter=u(t.props.value),t}Object(r.a)(n,e);var a=n.prototype;return a.getChildContext=function(){var e;return(e={})[p]=this.emitter,e},a.componentWillReceiveProps=function(e){if(this.props.value!==e.value){var n,a=this.props.value,o=e.value;((r=a)===(i=o)?0!==r||1/r==1/i:r!=r&&i!=i)?n=0:(n="function"==typeof t?t(a,o):s,0!==(n|=0)&&this.emitter.set(e.value,n))}var r,i},a.render=function(){return this.props.children},n}(a.Component);d.childContextTypes=((n={})[p]=l.a.object.isRequired,n);var f=function(t){function n(){var e;return(e=t.apply(this,arguments)||this).state={value:e.getValue()},e.onUpdate=function(t,n){0!=((0|e.observedBits)&n)&&e.setState({value:e.getValue()})},e}Object(r.a)(n,t);var a=n.prototype;return a.componentWillReceiveProps=function(e){var t=e.observedBits;this.observedBits=null==t?s:t},a.componentDidMount=function(){this.context[p]&&this.context[p].on(this.onUpdate);var e=this.props.observedBits;this.observedBits=null==e?s:e},a.componentWillUnmount=function(){this.context[p]&&this.context[p].off(this.onUpdate)},a.getValue=function(){return this.context[p]?this.context[p].get():e},a.render=function(){return(e=this.props.children,Array.isArray(e)?e[0]:e)(this.state.value);var e},n}(a.Component);return f.contextTypes=((o={})[p]=l.a.object,o),{Provider:d,Consumer:f}};t.a=p}).call(this,n(28))},function(e,t,n){var a=n(36);e.exports=f,e.exports.parse=r,e.exports.compile=function(e,t){return l(r(e,t),t)},e.exports.tokensToFunction=l,e.exports.tokensToRegExp=d;var o=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function r(e,t){for(var n,a=[],r=0,i=0,l="",u=t&&t.delimiter||"/";null!=(n=o.exec(e));){var p=n[0],d=n[1],f=n.index;if(l+=e.slice(i,f),i=f+p.length,d)l+=d[1];else{var m=e[i],h=n[2],v=n[3],g=n[4],b=n[5],x=n[6],w=n[7];l&&(a.push(l),l="");var y=null!=h&&null!=m&&m!==h,k="+"===x||"*"===x,E="?"===x||"*"===x,S=n[2]||u,T=g||b;a.push({name:v||r++,prefix:h||"",delimiter:S,optional:E,repeat:k,partial:y,asterisk:!!w,pattern:T?c(T):w?".*":"[^"+s(S)+"]+?"})}}return i<e.length&&(l+=e.substr(i)),l&&a.push(l),a}function i(e){return encodeURI(e).replace(/[\/?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()}))}function l(e,t){for(var n=new Array(e.length),o=0;o<e.length;o++)"object"==typeof e[o]&&(n[o]=new RegExp("^(?:"+e[o].pattern+")$",p(t)));return function(t,o){for(var r="",l=t||{},s=(o||{}).pretty?i:encodeURIComponent,c=0;c<e.length;c++){var u=e[c];if("string"!=typeof u){var p,d=l[u.name];if(null==d){if(u.optional){u.partial&&(r+=u.prefix);continue}throw new TypeError('Expected "'+u.name+'" to be defined')}if(a(d)){if(!u.repeat)throw new TypeError('Expected "'+u.name+'" to not repeat, but received `'+JSON.stringify(d)+"`");if(0===d.length){if(u.optional)continue;throw new TypeError('Expected "'+u.name+'" to not be empty')}for(var f=0;f<d.length;f++){if(p=s(d[f]),!n[c].test(p))throw new TypeError('Expected all "'+u.name+'" to match "'+u.pattern+'", but received `'+JSON.stringify(p)+"`");r+=(0===f?u.prefix:u.delimiter)+p}}else{if(p=u.asterisk?encodeURI(d).replace(/[?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()})):s(d),!n[c].test(p))throw new TypeError('Expected "'+u.name+'" to match "'+u.pattern+'", but received "'+p+'"');r+=u.prefix+p}}else r+=u}return r}}function s(e){return e.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function c(e){return e.replace(/([=!:$\/()])/g,"\\$1")}function u(e,t){return e.keys=t,e}function p(e){return e&&e.sensitive?"":"i"}function d(e,t,n){a(t)||(n=t||n,t=[]);for(var o=(n=n||{}).strict,r=!1!==n.end,i="",l=0;l<e.length;l++){var c=e[l];if("string"==typeof c)i+=s(c);else{var d=s(c.prefix),f="(?:"+c.pattern+")";t.push(c),c.repeat&&(f+="(?:"+d+f+")*"),i+=f=c.optional?c.partial?d+"("+f+")?":"(?:"+d+"("+f+"))?":d+"("+f+")"}}var m=s(n.delimiter||"/"),h=i.slice(-m.length)===m;return o||(i=(h?i.slice(0,-m.length):i)+"(?:"+m+"(?=$))?"),i+=r?"$":o&&h?"":"(?="+m+"|$)",u(new RegExp("^"+i,p(n)),t)}function f(e,t,n){return a(t)||(n=t||n,t=[]),n=n||{},e instanceof RegExp?function(e,t){var n=e.source.match(/\((?!\?)/g);if(n)for(var a=0;a<n.length;a++)t.push({name:a,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return u(e,t)}(e,t):a(e)?function(e,t,n){for(var a=[],o=0;o<e.length;o++)a.push(f(e[o],t,n).source);return u(new RegExp("(?:"+a.join("|")+")",p(n)),t)}(e,t,n):function(e,t,n){return d(r(e,n),t,n)}(e,t,n)}},function(e,t,n){"use strict";var a,o,r,i=(a=0,o={util:{encode:function(e){return e instanceof r?new r(e.type,o.util.encode(e.content),e.alias):"Array"===o.util.type(e)?e.map(o.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++a}),e.__id},clone:function(e,t){var n=o.util.type(e);switch(t=t||{},n){case"Object":if(t[o.util.objId(e)])return t[o.util.objId(e)];var a={};for(var r in t[o.util.objId(e)]=a,e)e.hasOwnProperty(r)&&(a[r]=o.util.clone(e[r],t));return a;case"Array":return t[o.util.objId(e)]?t[o.util.objId(e)]:(a=[],t[o.util.objId(e)]=a,e.forEach((function(e,n){a[n]=o.util.clone(e,t)})),a)}return e}},languages:{extend:function(e,t){var n=o.util.clone(o.languages[e]);for(var a in t)n[a]=t[a];return n},insertBefore:function(e,t,n,a){var r=(a=a||o.languages)[e];if(2==arguments.length){for(var i in n=arguments[1])n.hasOwnProperty(i)&&(r[i]=n[i]);return r}var l={};for(var s in r)if(r.hasOwnProperty(s)){if(s==t)for(var i in n)n.hasOwnProperty(i)&&(l[i]=n[i]);l[s]=r[s]}return o.languages.DFS(o.languages,(function(t,n){n===a[e]&&t!=e&&(this[t]=l)})),a[e]=l},DFS:function(e,t,n,a){for(var r in a=a||{},e)e.hasOwnProperty(r)&&(t.call(e,r,e[r],n||r),"Object"!==o.util.type(e[r])||a[o.util.objId(e[r])]?"Array"!==o.util.type(e[r])||a[o.util.objId(e[r])]||(a[o.util.objId(e[r])]=!0,o.languages.DFS(e[r],t,r,a)):(a[o.util.objId(e[r])]=!0,o.languages.DFS(e[r],t,null,a)))}},plugins:{},highlight:function(e,t,n){var a={code:e,grammar:t,language:n};return a.tokens=o.tokenize(a.code,a.grammar),r.stringify(o.util.encode(a.tokens),a.language)},matchGrammar:function(e,t,n,a,r,i,l){var s=o.Token;for(var c in n)if(n.hasOwnProperty(c)&&n[c]){if(c==l)return;var u=n[c];u="Array"===o.util.type(u)?u:[u];for(var p=0;p<u.length;++p){var d=u[p],f=d.inside,m=!!d.lookbehind,h=!!d.greedy,v=0,g=d.alias;if(h&&!d.pattern.global){var b=d.pattern.toString().match(/[imuy]*$/)[0];d.pattern=RegExp(d.pattern.source,b+"g")}d=d.pattern||d;for(var x=a,w=r;x<t.length;w+=t[x].length,++x){var y=t[x];if(t.length>e.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<E||!t[S].type&&!t[S-1].greedy);++S)k>=(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,"&quot;")+'"'})).join(" ");return"<"+a.tag+' class="'+a.classes.join(" ")+'"'+(l?" "+l:"")+">"+a.content+"</"+a.tag+">"},o);i.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:/<!DOCTYPE[\s\S]+?>/i,cdata:/<!\[CDATA\[[\s\S]*?]]>/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(/&amp;/,"&"))})),Object.defineProperty(i.languages.markup.tag,"addInlined",{value:function(e,t){var n={};n["language-"+t]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:i.languages[t]},n.cdata=/^<!\[CDATA\[|\]\]>$/i;var a={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:n}};a["language-"+t]={pattern:/[\s\S]+/,inside:i.languages[t]};var o={};o[e]={pattern:RegExp(/(<__[\s\S]*?>)(?:<!\[CDATA\[[\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<a.length;r++)o[a[r]]=e.languages.bash[a[r]];e.languages.shell=e.languages.bash}(i),i.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,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;r<t.length;r++){var i=t[r],l=!1;if("string"!=typeof i&&("tag"===i.type&&i.content[0]&&"tag"===i.content[0].type?"</"===i.content[0].content[0].content?o.length>0&&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);r<t.length-1&&("string"==typeof t[r+1]||"plain-text"===t[r+1].type)&&(s+=n(t[r+1]),t.splice(r+1,1)),r>0&&("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<s;l++)r[l]instanceof RegExp&&(r[l]={pattern:r[l]}),n(r[l]);else n(r)}}(t,(function(e){e.inside||(e.inside={}),e.inside.rest=n}))}))}}),t.addSupport(["java","javascript","php"],t)}(i),function(e){var t=/\b(?:abstract|continue|for|new|switch|assert|default|goto|package|synchronized|boolean|do|if|private|this|break|double|implements|protected|throw|byte|else|import|public|throws|case|enum|instanceof|return|transient|catch|extends|int|short|try|char|final|interface|static|void|class|finally|long|strictfp|volatile|const|float|native|super|while|var|null|exports|module|open|opens|provides|requires|to|transitive|uses|with)\b/,n=/\b[A-Z](?:\w*[a-z]\w*)?\b/;e.languages.java=e.languages.extend("clike",{"class-name":[n,/\b[A-Z]\w*(?=\s+\w+\s*[;,=())])/],keyword:t,function:[e.languages.clike.function,{pattern:/(\:\:)[a-z_]\w*/,lookbehind:!0}],number:/\b0b[01][01_]*L?\b|\b0x[\da-f_]*\.?[\da-f_p+-]+\b|(?:\b\d[\d_]*\.?[\d_]*|\B\.\d[\d_]*)(?:e[+-]?\d[\d_]*)?[dfl]?/i,operator:{pattern:/(^|[^.])(?:<<=?|>>>?=?|->|([-+&|])\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<l.length&&!(o>=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<t.length;n++){var a=t[n],o=e.languages.javascript[a];"RegExp"===e.util.type(o)&&(o=e.languages.javascript[a]={pattern:o});var r=o.inside||{};o.inside=r,r["maybe-class-name"]=/^[A-Z][\s\S]*/}}(i),function(e){e.languages.flow=e.languages.extend("javascript",{}),e.languages.insertBefore("flow","keyword",{type:[{pattern:/\b(?:[Nn]umber|[Ss]tring|[Bb]oolean|Function|any|mixed|null|void)\b/,alias:"tag"}]}),e.languages.flow["function-variable"].pattern=/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)(?:\s*:\s*\w+)?|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/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<t.length;n++){if(i>=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<o;a++){var r=n[a];if("string"!=typeof r){var i=r.content;if(Array.isArray(i))if("template-string"===r.type){var l=i[1];if(3===i.length&&"string"!=typeof l&&"embedded-code"===l.type){var s=d(l),c=l.alias,p=Array.isArray(c)?c[0]:c,f=e.languages[p];if(!f)continue;i[1]=u(s,f,p)}}else t(i);else"string"!=typeof i&&t([i])}}}(t.tokens)}))}(i),i.languages.graphql={comment:/#.*/,string:{pattern:/"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:true|false)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+)[a-zA-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:enum|fragment|implements|input|interface|mutation|on|query|scalar|schema|type|union)\b/,operator:/[!=|]|\.{3}/,punctuation:/[!(){}\[\]:=,]/,constant:/\b(?!ID\b)[A-Z][A-Z_\d]*\b/},function(e){var t=/(?:\\.|[^\\\n\r]|(?:\r?\n|\r)(?!\r?\n|\r))/.source;function n(e,n){return e=e.replace(/<inner>/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(/__(?:(?!_)<inner>|_(?:(?!_)<inner>)+_)+__/.source,!0),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/_(?:(?!_)<inner>|__(?:(?!_)<inner>)+__)+_/.source,!0),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~)<inner>)+?\2/.source,!1),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},url:{pattern:n(/!?\[(?:(?!\])<inner>)+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)| ?\[(?:(?!\])<inner>)+\])/.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<a;n++){var o=t[n];if("code"===o.type){var r=o.content[1],i=o.content[3];if(r&&i&&"code-language"===r.type&&"code-block"===i.type&&"string"==typeof r.content){var l="language-"+r.content.trim().split(/\s+/)[0].toLowerCase();i.alias?"string"==typeof i.alias?i.alias=[i.alias,l]:i.alias.push(l):i.alias=[l]}}else e(o.content)}}(e.tokens)})),e.hooks.add("wrap",(function(t){if("code-block"===t.type){for(var n="",a=0,o=t.classes.length;a<o;a++){var r=t.classes[a],i=/language-(.+)/.exec(r);if(i){n=i[1];break}}var l=e.languages[n];if(l){var s=t.content.replace(/&lt;/g,"<").replace(/&amp;/g,"&");t.content=e.highlight(s,l,n)}else if(n&&"none"!==n&&e.plugins.autoloader){var c="md-"+(new Date).valueOf()+"-"+Math.floor(1e16*Math.random());t.attributes.id=c,e.plugins.autoloader.loadLanguages(n,(function(){var t=document.getElementById(c);t&&(t.innerHTML=e.highlight(t.textContent,e.languages[n],n))}))}}})),e.languages.md=e.languages.markdown}(i),function(e){e.languages.diff={coord:[/^(?:\*{3}|-{3}|\+{3}).*$/m,/^@@.*@@$/m,/^\d+.*$/m]};var t={"deleted-sign":"-","deleted-arrow":"<","inserted-sign":"+","inserted-arrow":">",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;c<arguments.length;c++){for(var u in n=Object(arguments[c]))o.call(n,u)&&(s[u]=n[u]);if(a){l=a(n);for(var p=0;p<l.length;p++)r.call(n,l[p])&&(s[l[p]]=n[l[p]])}}return s}},function(e,t,n){"use strict";var a=n(8);t.a=a.b},function(e,t,n){"use strict";e.exports=n(37)},function(e,t,n){"use strict";var a=n(0),o=n.n(a);t.a=o.a.createContext(null)},function(e,t,n){"use strict";!function e(){if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE)try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(t){console.error(t)}}(),e.exports=n(31)},function(e){e.exports=JSON.parse('{"docusaurus-plugin-content-docs":{"default":{"path":"/wave/docs","versions":[{"name":"current","label":"Next","isLast":true,"path":"/wave/docs","mainDocId":"change-log","docs":[{"id":"_start_q","path":"/wave/docs/_start_q"},{"id":"api/autoreload","path":"/wave/docs/api/autoreload"},{"id":"api/cli","path":"/wave/docs/api/cli"},{"id":"api/core","path":"/wave/docs/api/core"},{"id":"api/db","path":"/wave/docs/api/db"},{"id":"api/graphics","path":"/wave/docs/api/graphics"},{"id":"api/index","path":"/wave/docs/api/index"},{"id":"api/server","path":"/wave/docs/api/server"},{"id":"api/test","path":"/wave/docs/api/test"},{"id":"api/types","path":"/wave/docs/api/types"},{"id":"api/ui","path":"/wave/docs/api/ui"},{"id":"apps","path":"/wave/docs/apps"},{"id":"architecture","path":"/wave/docs/architecture"},{"id":"arguments","path":"/wave/docs/arguments"},{"id":"background","path":"/wave/docs/background"},{"id":"backup","path":"/wave/docs/backup"},{"id":"browser-testing","path":"/wave/docs/browser-testing"},{"id":"buffers","path":"/wave/docs/buffers"},{"id":"cards","path":"/wave/docs/cards"},{"id":"change-log","path":"/wave/docs/change-log"},{"id":"cli","path":"/wave/docs/cli"},{"id":"components","path":"/wave/docs/components"},{"id":"configuration","path":"/wave/docs/configuration"},{"id":"contributing","path":"/wave/docs/contributing"},{"id":"deployment","path":"/wave/docs/deployment"},{"id":"development","path":"/wave/docs/development"},{"id":"enterprise/basic-concepts","path":"/wave/docs/enterprise/basic-concepts"},{"id":"enterprise/developer-guide","path":"/wave/docs/enterprise/developer-guide"},{"id":"enterprise/index","path":"/wave/docs/enterprise/"},{"id":"examples/background","path":"/wave/docs/examples/background"},{"id":"examples/background-executor","path":"/wave/docs/examples/background-executor"},{"id":"examples/breadcrumbs","path":"/wave/docs/examples/breadcrumbs"},{"id":"examples/button","path":"/wave/docs/examples/button"},{"id":"examples/buttons","path":"/wave/docs/examples/buttons"},{"id":"examples/card-menu","path":"/wave/docs/examples/card-menu"},{"id":"examples/checkbox","path":"/wave/docs/examples/checkbox"},{"id":"examples/checklist","path":"/wave/docs/examples/checklist"},{"id":"examples/choice-group","path":"/wave/docs/examples/choice-group"},{"id":"examples/color-picker","path":"/wave/docs/examples/color-picker"},{"id":"examples/combobox","path":"/wave/docs/examples/combobox"},{"id":"examples/counter-broadcast","path":"/wave/docs/examples/counter-broadcast"},{"id":"examples/counter-global","path":"/wave/docs/examples/counter-global"},{"id":"examples/counter-multicast","path":"/wave/docs/examples/counter-multicast"},{"id":"examples/counter-unicast","path":"/wave/docs/examples/counter-unicast"},{"id":"examples/dashboard","path":"/wave/docs/examples/dashboard"},{"id":"examples/date-picker","path":"/wave/docs/examples/date-picker"},{"id":"examples/date-picker-trigger","path":"/wave/docs/examples/date-picker-trigger"},{"id":"examples/dropdown","path":"/wave/docs/examples/dropdown"},{"id":"examples/file-upload","path":"/wave/docs/examples/file-upload"},{"id":"examples/form","path":"/wave/docs/examples/form"},{"id":"examples/form-frame","path":"/wave/docs/examples/form-frame"},{"id":"examples/form-frame-path","path":"/wave/docs/examples/form-frame-path"},{"id":"examples/form-markup","path":"/wave/docs/examples/form-markup"},{"id":"examples/form-menu","path":"/wave/docs/examples/form-menu"},{"id":"examples/form-template","path":"/wave/docs/examples/form-template"},{"id":"examples/frame","path":"/wave/docs/examples/frame"},{"id":"examples/frame-path","path":"/wave/docs/examples/frame-path"},{"id":"examples/glider-gun","path":"/wave/docs/examples/glider-gun"},{"id":"examples/graphics-clock","path":"/wave/docs/examples/graphics-clock"},{"id":"examples/graphics-hilbert","path":"/wave/docs/examples/graphics-hilbert"},{"id":"examples/graphics-path","path":"/wave/docs/examples/graphics-path"},{"id":"examples/graphics-primitives","path":"/wave/docs/examples/graphics-primitives"},{"id":"examples/graphics-spline","path":"/wave/docs/examples/graphics-spline"},{"id":"examples/graphics-turtle","path":"/wave/docs/examples/graphics-turtle"},{"id":"examples/hash-routing","path":"/wave/docs/examples/hash-routing"},{"id":"examples/header","path":"/wave/docs/examples/header"},{"id":"examples/hello-world","path":"/wave/docs/examples/hello-world"},{"id":"examples/image","path":"/wave/docs/examples/image"},{"id":"examples/index","path":"/wave/docs/examples"},{"id":"examples/issue-tracker","path":"/wave/docs/examples/issue-tracker"},{"id":"examples/label","path":"/wave/docs/examples/label"},{"id":"examples/layout","path":"/wave/docs/examples/layout"},{"id":"examples/layout-size","path":"/wave/docs/examples/layout-size"},{"id":"examples/link","path":"/wave/docs/examples/link"},{"id":"examples/markdown","path":"/wave/docs/examples/markdown"},{"id":"examples/markdown-data","path":"/wave/docs/examples/markdown-data"},{"id":"examples/markup","path":"/wave/docs/examples/markup"},{"id":"examples/message-bar","path":"/wave/docs/examples/message-bar"},{"id":"examples/meta-icon","path":"/wave/docs/examples/meta-icon"},{"id":"examples/meta-notification","path":"/wave/docs/examples/meta-notification"},{"id":"examples/meta-redirect","path":"/wave/docs/examples/meta-redirect"},{"id":"examples/meta-refresh","path":"/wave/docs/examples/meta-refresh"},{"id":"examples/meta-title","path":"/wave/docs/examples/meta-title"},{"id":"examples/nav","path":"/wave/docs/examples/nav"},{"id":"examples/picker","path":"/wave/docs/examples/picker"},{"id":"examples/picker-selection","path":"/wave/docs/examples/picker-selection"},{"id":"examples/pixel-art","path":"/wave/docs/examples/pixel-art"},{"id":"examples/plot-altair","path":"/wave/docs/examples/plot-altair"},{"id":"examples/plot-area","path":"/wave/docs/examples/plot-area"},{"id":"examples/plot-area-groups","path":"/wave/docs/examples/plot-area-groups"},{"id":"examples/plot-area-line","path":"/wave/docs/examples/plot-area-line"},{"id":"examples/plot-area-line-groups","path":"/wave/docs/examples/plot-area-line-groups"},{"id":"examples/plot-area-line-smooth","path":"/wave/docs/examples/plot-area-line-smooth"},{"id":"examples/plot-area-negative","path":"/wave/docs/examples/plot-area-negative"},{"id":"examples/plot-area-range","path":"/wave/docs/examples/plot-area-range"},{"id":"examples/plot-area-smooth","path":"/wave/docs/examples/plot-area-smooth"},{"id":"examples/plot-area-stacked","path":"/wave/docs/examples/plot-area-stacked"},{"id":"examples/plot-axis-title","path":"/wave/docs/examples/plot-axis-title"},{"id":"examples/plot-bokeh","path":"/wave/docs/examples/plot-bokeh"},{"id":"examples/plot-d3","path":"/wave/docs/examples/plot-d3"},{"id":"examples/plot-form","path":"/wave/docs/examples/plot-form"},{"id":"examples/plot-histogram","path":"/wave/docs/examples/plot-histogram"},{"id":"examples/plot-interval","path":"/wave/docs/examples/plot-interval"},{"id":"examples/plot-interval-annotation","path":"/wave/docs/examples/plot-interval-annotation"},{"id":"examples/plot-interval-annotation-transpose","path":"/wave/docs/examples/plot-interval-annotation-transpose"},{"id":"examples/plot-interval-groups","path":"/wave/docs/examples/plot-interval-groups"},{"id":"examples/plot-interval-groups-transpose","path":"/wave/docs/examples/plot-interval-groups-transpose"},{"id":"examples/plot-interval-helix","path":"/wave/docs/examples/plot-interval-helix"},{"id":"examples/plot-interval-labels","path":"/wave/docs/examples/plot-interval-labels"},{"id":"examples/plot-interval-polar","path":"/wave/docs/examples/plot-interval-polar"},{"id":"examples/plot-interval-polar-stacked","path":"/wave/docs/examples/plot-interval-polar-stacked"},{"id":"examples/plot-interval-range","path":"/wave/docs/examples/plot-interval-range"},{"id":"examples/plot-interval-range-transpose","path":"/wave/docs/examples/plot-interval-range-transpose"},{"id":"examples/plot-interval-stacked","path":"/wave/docs/examples/plot-interval-stacked"},{"id":"examples/plot-interval-stacked-grouped","path":"/wave/docs/examples/plot-interval-stacked-grouped"},{"id":"examples/plot-interval-stacked-grouped-transpose","path":"/wave/docs/examples/plot-interval-stacked-grouped-transpose"},{"id":"examples/plot-interval-stacked-transpose","path":"/wave/docs/examples/plot-interval-stacked-transpose"},{"id":"examples/plot-interval-theta","path":"/wave/docs/examples/plot-interval-theta"},{"id":"examples/plot-interval-transpose","path":"/wave/docs/examples/plot-interval-transpose"},{"id":"examples/plot-line","path":"/wave/docs/examples/plot-line"},{"id":"examples/plot-line-annotation","path":"/wave/docs/examples/plot-line-annotation"},{"id":"examples/plot-line-groups","path":"/wave/docs/examples/plot-line-groups"},{"id":"examples/plot-line-labels","path":"/wave/docs/examples/plot-line-labels"},{"id":"examples/plot-line-labels-no-overlap","path":"/wave/docs/examples/plot-line-labels-no-overlap"},{"id":"examples/plot-line-labels-stroked","path":"/wave/docs/examples/plot-line-labels-stroked"},{"id":"examples/plot-line-smooth","path":"/wave/docs/examples/plot-line-smooth"},{"id":"examples/plot-matplotlib","path":"/wave/docs/examples/plot-matplotlib"},{"id":"examples/plot-path","path":"/wave/docs/examples/plot-path"},{"id":"examples/plot-path-point","path":"/wave/docs/examples/plot-path-point"},{"id":"examples/plot-path-smooth","path":"/wave/docs/examples/plot-path-smooth"},{"id":"examples/plot-plotly","path":"/wave/docs/examples/plot-plotly"},{"id":"examples/plot-point","path":"/wave/docs/examples/plot-point"},{"id":"examples/plot-point-annotation","path":"/wave/docs/examples/plot-point-annotation"},{"id":"examples/plot-point-custom","path":"/wave/docs/examples/plot-point-custom"},{"id":"examples/plot-point-groups","path":"/wave/docs/examples/plot-point-groups"},{"id":"examples/plot-point-map","path":"/wave/docs/examples/plot-point-map"},{"id":"examples/plot-point-shapes","path":"/wave/docs/examples/plot-point-shapes"},{"id":"examples/plot-point-sizes","path":"/wave/docs/examples/plot-point-sizes"},{"id":"examples/plot-polygon","path":"/wave/docs/examples/plot-polygon"},{"id":"examples/plot-step","path":"/wave/docs/examples/plot-step"},{"id":"examples/plot-step-after","path":"/wave/docs/examples/plot-step-after"},{"id":"examples/plot-step-before","path":"/wave/docs/examples/plot-step-before"},{"id":"examples/plot-vegalite","path":"/wave/docs/examples/plot-vegalite"},{"id":"examples/plot-vegalite-form","path":"/wave/docs/examples/plot-vegalite-form"},{"id":"examples/plot-vegalite-update","path":"/wave/docs/examples/plot-vegalite-update"},{"id":"examples/progress","path":"/wave/docs/examples/progress"},{"id":"examples/progress-update","path":"/wave/docs/examples/progress-update"},{"id":"examples/range-slider","path":"/wave/docs/examples/range-slider"},{"id":"examples/separator","path":"/wave/docs/examples/separator"},{"id":"examples/site-async","path":"/wave/docs/examples/site-async"},{"id":"examples/slider","path":"/wave/docs/examples/slider"},{"id":"examples/spinbox","path":"/wave/docs/examples/spinbox"},{"id":"examples/stat-large","path":"/wave/docs/examples/stat-large"},{"id":"examples/stat-large-bar","path":"/wave/docs/examples/stat-large-bar"},{"id":"examples/stat-small","path":"/wave/docs/examples/stat-small"},{"id":"examples/stat-small-series-area","path":"/wave/docs/examples/stat-small-series-area"},{"id":"examples/stat-small-series-interval","path":"/wave/docs/examples/stat-small-series-interval"},{"id":"examples/stat-tall-gauge","path":"/wave/docs/examples/stat-tall-gauge"},{"id":"examples/stat-tall-series-area","path":"/wave/docs/examples/stat-tall-series-area"},{"id":"examples/stat-tall-series-interval","path":"/wave/docs/examples/stat-tall-series-interval"},{"id":"examples/stat-wide-bar","path":"/wave/docs/examples/stat-wide-bar"},{"id":"examples/stat-wide-gauge","path":"/wave/docs/examples/stat-wide-gauge"},{"id":"examples/stat-wide-series-area","path":"/wave/docs/examples/stat-wide-series-area"},{"id":"examples/stat-wide-series-interval","path":"/wave/docs/examples/stat-wide-series-interval"},{"id":"examples/stepper","path":"/wave/docs/examples/stepper"},{"id":"examples/swatch-picker","path":"/wave/docs/examples/swatch-picker"},{"id":"examples/tab","path":"/wave/docs/examples/tab"},{"id":"examples/tab-delete","path":"/wave/docs/examples/tab-delete"},{"id":"examples/tab-link","path":"/wave/docs/examples/tab-link"},{"id":"examples/tab-routing","path":"/wave/docs/examples/tab-routing"},{"id":"examples/table","path":"/wave/docs/examples/table"},{"id":"examples/table-download","path":"/wave/docs/examples/table-download"},{"id":"examples/table-filter","path":"/wave/docs/examples/table-filter"},{"id":"examples/table-filter-backend","path":"/wave/docs/examples/table-filter-backend"},{"id":"examples/table-groupby","path":"/wave/docs/examples/table-groupby"},{"id":"examples/table-markdown","path":"/wave/docs/examples/table-markdown"},{"id":"examples/table-search","path":"/wave/docs/examples/table-search"},{"id":"examples/table-select","path":"/wave/docs/examples/table-select"},{"id":"examples/table-sort","path":"/wave/docs/examples/table-sort"},{"id":"examples/tabs","path":"/wave/docs/examples/tabs"},{"id":"examples/template","path":"/wave/docs/examples/template"},{"id":"examples/template-data","path":"/wave/docs/examples/template-data"},{"id":"examples/text","path":"/wave/docs/examples/text"},{"id":"examples/text-sizes","path":"/wave/docs/examples/text-sizes"},{"id":"examples/textbox","path":"/wave/docs/examples/textbox"},{"id":"examples/textbox-trigger","path":"/wave/docs/examples/textbox-trigger"},{"id":"examples/todo","path":"/wave/docs/examples/todo"},{"id":"examples/toggle","path":"/wave/docs/examples/toggle"},{"id":"examples/toolbar","path":"/wave/docs/examples/toolbar"},{"id":"examples/toolbar-routing","path":"/wave/docs/examples/toolbar-routing"},{"id":"examples/upload","path":"/wave/docs/examples/upload"},{"id":"examples/upload-async","path":"/wave/docs/examples/upload-async"},{"id":"examples/upload-download","path":"/wave/docs/examples/upload-download"},{"id":"examples/upload-ui","path":"/wave/docs/examples/upload-ui"},{"id":"examples/wizard","path":"/wave/docs/examples/wizard"},{"id":"expressions","path":"/wave/docs/expressions"},{"id":"files","path":"/wave/docs/files"},{"id":"getting-started","path":"/wave/docs/getting-started"},{"id":"graphics","path":"/wave/docs/graphics"},{"id":"guide","path":"/wave/docs/guide"},{"id":"installation","path":"/wave/docs/installation"},{"id":"layout","path":"/wave/docs/layout"},{"id":"logging","path":"/wave/docs/logging"},{"id":"migrating-0","path":"/wave/docs/migrating-0"},{"id":"migrating-0-8","path":"/wave/docs/migrating-0-8"},{"id":"pages","path":"/wave/docs/pages"},{"id":"plotting","path":"/wave/docs/plotting"},{"id":"realtime","path":"/wave/docs/realtime"},{"id":"routing","path":"/wave/docs/routing"},{"id":"scripts","path":"/wave/docs/scripts"},{"id":"security","path":"/wave/docs/security"},{"id":"state","path":"/wave/docs/state"},{"id":"testing","path":"/wave/docs/testing"},{"id":"tour","path":"/wave/docs/tour"},{"id":"tutorial-beer","path":"/wave/docs/tutorial-beer"},{"id":"tutorial-counter","path":"/wave/docs/tutorial-counter"},{"id":"tutorial-hello","path":"/wave/docs/tutorial-hello"},{"id":"tutorial-monitor","path":"/wave/docs/tutorial-monitor"},{"id":"tutorial-todo","path":"/wave/docs/tutorial-todo"}]}]}}}')},function(e){e.exports=JSON.parse('{"docusaurusVersion":"2.0.0-alpha.65","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"2.0.0-alpha.65"},"docusaurus-plugin-content-blog":{"type":"package","name":"@docusaurus/plugin-content-blog","version":"2.0.0-alpha.65"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"2.0.0-alpha.65"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"2.0.0-alpha.65"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"2.0.0-alpha.65"}}}')},function(e,t,n){"use strict";var a=n(22),o={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},r={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},i={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},l={};function s(e){return a.isMemo(e)?i:l[e.$$typeof]||o}l[a.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},l[a.Memo]=i;var c=Object.defineProperty,u=Object.getOwnPropertyNames,p=Object.getOwnPropertySymbols,d=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,m=Object.prototype;e.exports=function e(t,n,a){if("string"!=typeof n){if(m){var o=f(n);o&&o!==m&&e(t,o,a)}var i=u(n);p&&(i=i.concat(p(n)));for(var l=s(t),h=s(n),v=0;v<i.length;++v){var g=i[v];if(!(r[g]||a&&a[g]||h&&h[g]||l&&l[g])){var b=d(n,g);try{c(t,g,b)}catch(x){}}}}return t}},function(e,t){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(a){"object"==typeof window&&(n=window)}e.exports=n},function(e,t,n){e.exports=n(43)},function(e,t,n){"use strict";var a=n(20),o="function"==typeof Symbol&&Symbol.for,r=o?Symbol.for("react.element"):60103,i=o?Symbol.for("react.portal"):60106,l=o?Symbol.for("react.fragment"):60107,s=o?Symbol.for("react.strict_mode"):60108,c=o?Symbol.for("react.profiler"):60114,u=o?Symbol.for("react.provider"):60109,p=o?Symbol.for("react.context"):60110,d=o?Symbol.for("react.forward_ref"):60112,f=o?Symbol.for("react.suspense"):60113,m=o?Symbol.for("react.memo"):60115,h=o?Symbol.for("react.lazy"):60116,v="function"==typeof Symbol&&Symbol.iterator;function g(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n<arguments.length;n++)t+="&args[]="+encodeURIComponent(arguments[n]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var b={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},x={};function w(e,t,n){this.props=e,this.context=t,this.refs=x,this.updater=n||b}function y(){}function k(e,t,n){this.props=e,this.context=t,this.refs=x,this.updater=n||b}w.prototype.isReactComponent={},w.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error(g(85));this.updater.enqueueSetState(this,e,t,"setState")},w.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},y.prototype=w.prototype;var E=k.prototype=new y;E.constructor=k,a(E,w.prototype),E.isPureReactComponent=!0;var S={current:null},T=Object.prototype.hasOwnProperty,_={key:!0,ref:!0,__self:!0,__source:!0};function O(e,t,n){var a,o={},i=null,l=null;if(null!=t)for(a in void 0!==t.ref&&(l=t.ref),void 0!==t.key&&(i=""+t.key),t)T.call(t,a)&&!_.hasOwnProperty(a)&&(o[a]=t[a]);var s=arguments.length-2;if(1===s)o.children=n;else if(1<s){for(var c=Array(s),u=0;u<s;u++)c[u]=arguments[u+2];o.children=c}if(e&&e.defaultProps)for(a in s=e.defaultProps)void 0===o[a]&&(o[a]=s[a]);return{$$typeof:r,type:e,key:i,ref:l,props:o,_owner:S.current}}function C(e){return"object"==typeof e&&null!==e&&e.$$typeof===r}var P=/\/+/g,N=[];function A(e,t,n,a){if(N.length){var o=N.pop();return o.result=e,o.keyPrefix=t,o.func=n,o.context=a,o.count=0,o}return{result:e,keyPrefix:t,func:n,context:a,count:0}}function R(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,10>N.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<e.length;s++){var c=t+L(o=e[s],s);l+=I(o,c,n,a)}else if(null===e||"object"!=typeof e?c=null:c="function"==typeof(c=v&&e[v]||e["@@iterator"])?c:null,"function"==typeof c)for(e=c.call(e),s=0;!(o=e.next()).done;)l+=I(o=o.value,c=t+L(o,s++),n,a);else if("object"===o)throw n=""+e,Error(g(31,"[object Object]"===n?"object with keys {"+Object.keys(e).join(", ")+"}":n,""));return l}function F(e,t,n){return null==e?0:I(e,"",t,n)}function L(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+(""+e).replace(/[=:]/g,(function(e){return t[e]}))}(e.key):t.toString(36)}function D(e,t){e.func.call(e.context,t,e.count++)}function j(e,t,n){var a=e.result,o=e.keyPrefix;e=e.func.call(e.context,t,e.count++),Array.isArray(e)?M(e,a,n,(function(e){return e})):null!=e&&(C(e)&&(e=function(e,t){return{$$typeof:r,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(e,o+(!e.key||t&&t.key===e.key?"":(""+e.key).replace(P,"$&/")+"/")+n)),a.push(e))}function M(e,t,n,a,o){var r="";null!=n&&(r=(""+n).replace(P,"$&/")+"/"),F(e,j,t=A(t,r,a,o)),R(t)}var z={current:null};function $(){var e=z.current;if(null===e)throw Error(g(321));return e}var U={ReactCurrentDispatcher:z,ReactCurrentBatchConfig:{suspense:null},ReactCurrentOwner:S,IsSomeRendererActing:{current:!1},assign:a};t.Children={map:function(e,t,n){if(null==e)return e;var a=[];return M(e,a,null,t,n),a},forEach:function(e,t,n){if(null==e)return e;F(e,D,t=A(null,null,t,n)),R(t)},count:function(e){return F(e,(function(){return null}),null)},toArray:function(e){var t=[];return M(e,t,null,(function(e){return e})),t},only:function(e){if(!C(e))throw Error(g(143));return e}},t.Component=w,t.Fragment=l,t.Profiler=c,t.PureComponent=k,t.StrictMode=s,t.Suspense=f,t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=U,t.cloneElement=function(e,t,n){if(null==e)throw Error(g(267,e));var o=a({},e.props),i=e.key,l=e.ref,s=e._owner;if(null!=t){if(void 0!==t.ref&&(l=t.ref,s=S.current),void 0!==t.key&&(i=""+t.key),e.type&&e.type.defaultProps)var c=e.type.defaultProps;for(u in t)T.call(t,u)&&!_.hasOwnProperty(u)&&(o[u]=void 0===t[u]&&void 0!==c?c[u]:t[u])}var u=arguments.length-2;if(1===u)o.children=n;else if(1<u){c=Array(u);for(var p=0;p<u;p++)c[p]=arguments[p+2];o.children=c}return{$$typeof:r,type:e.type,key:i,ref:l,props:o,_owner:s}},t.createContext=function(e,t){return void 0===t&&(t=null),(e={$$typeof:p,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null}).Provider={$$typeof:u,_context:e},e.Consumer=e},t.createElement=O,t.createFactory=function(e){var t=O.bind(null,e);return t.type=e,t},t.createRef=function(){return{current:null}},t.forwardRef=function(e){return{$$typeof:d,render:e}},t.isValidElement=C,t.lazy=function(e){return{$$typeof:h,_ctor:e,_status:-1,_result:null}},t.memo=function(e,t){return{$$typeof:m,type:e,compare:void 0===t?null:t}},t.useCallback=function(e,t){return $().useCallback(e,t)},t.useContext=function(e,t){return $().useContext(e,t)},t.useDebugValue=function(){},t.useEffect=function(e,t){return $().useEffect(e,t)},t.useImperativeHandle=function(e,t,n){return $().useImperativeHandle(e,t,n)},t.useLayoutEffect=function(e,t){return $().useLayoutEffect(e,t)},t.useMemo=function(e,t){return $().useMemo(e,t)},t.useReducer=function(e,t,n){return $().useReducer(e,t,n)},t.useRef=function(e){return $().useRef(e)},t.useState=function(e){return $().useState(e)},t.version="16.13.1"},function(e,t,n){"use strict";var a=n(0),o=n(20),r=n(32);function i(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n<arguments.length;n++)t+="&args[]="+encodeURIComponent(arguments[n]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}if(!a)throw Error(i(227));function l(e,t,n,a,o,r,i,l,s){var c=Array.prototype.slice.call(arguments,3);try{t.apply(n,c)}catch(u){this.onError(u)}}var s=!1,c=null,u=!1,p=null,d={onError:function(e){s=!0,c=e}};function f(e,t,n,a,o,r,i,u,p){s=!1,c=null,l.apply(d,arguments)}var m=null,h=null,v=null;function g(e,t,n){var a=e.type||"unknown-event";e.currentTarget=v(n),function(e,t,n,a,o,r,l,d,m){if(f.apply(this,arguments),s){if(!s)throw Error(i(198));var h=c;s=!1,c=null,u||(u=!0,p=h)}}(a,t,void 0,e),e.currentTarget=null}var b=null,x={};function w(){if(b)for(var e in x){var t=x[e],n=b.indexOf(e);if(!(-1<n))throw Error(i(96,e));if(!k[n]){if(!t.extractEvents)throw Error(i(97,e));for(var a in k[n]=t,n=t.eventTypes){var o=void 0,r=n[a],l=t,s=a;if(E.hasOwnProperty(s))throw Error(i(99,s));E[s]=r;var c=r.phasedRegistrationNames;if(c){for(o in c)c.hasOwnProperty(o)&&y(c[o],l,s);o=!0}else r.registrationName?(y(r.registrationName,l,s),o=!0):o=!1;if(!o)throw Error(i(98,a,e))}}}}function y(e,t,n){if(S[e])throw Error(i(100,e));S[e]=t,T[e]=t.eventTypes[n].dependencies}var k=[],E={},S={},T={};function _(e){var t,n=!1;for(t in e)if(e.hasOwnProperty(t)){var a=e[t];if(!x.hasOwnProperty(t)||x[t]!==a){if(x[t])throw Error(i(102,t));x[t]=a,n=!0}}n&&w()}var O=!("undefined"==typeof window||void 0===window.document||void 0===window.document.createElement),C=null,P=null,N=null;function A(e){if(e=h(e)){if("function"!=typeof C)throw Error(i(280));var t=e.stateNode;t&&(t=m(t),C(e.stateNode,e.type,t))}}function R(e){P?N?N.push(e):N=[e]:P=e}function I(){if(P){var e=P,t=N;if(N=P=null,A(e),t)for(e=0;e<t.length;e++)A(t[e])}}function F(e,t){return e(t)}function L(e,t,n,a,o){return e(t,n,a,o)}function D(){}var j=F,M=!1,z=!1;function $(){null===P&&null===N||(D(),I())}function U(e,t,n){if(z)return e(t,n);z=!0;try{return j(e,t,n)}finally{z=!1,$()}}var B=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,H=Object.prototype.hasOwnProperty,W={},V={};function G(e,t,n,a,o,r){this.acceptsBooleans=2===t||3===t||4===t,this.attributeName=a,this.attributeNamespace=o,this.mustUseProperty=n,this.propertyName=e,this.type=t,this.sanitizeURL=r}var q={};"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach((function(e){q[e]=new G(e,0,!1,e,null,!1)})),[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach((function(e){var t=e[0];q[t]=new G(t,1,!1,e[1],null,!1)})),["contentEditable","draggable","spellCheck","value"].forEach((function(e){q[e]=new G(e,2,!1,e.toLowerCase(),null,!1)})),["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach((function(e){q[e]=new G(e,2,!1,e,null,!1)})),"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach((function(e){q[e]=new G(e,3,!1,e.toLowerCase(),null,!1)})),["checked","multiple","muted","selected"].forEach((function(e){q[e]=new G(e,3,!0,e,null,!1)})),["capture","download"].forEach((function(e){q[e]=new G(e,4,!1,e,null,!1)})),["cols","rows","size","span"].forEach((function(e){q[e]=new G(e,6,!1,e,null,!1)})),["rowSpan","start"].forEach((function(e){q[e]=new G(e,5,!1,e.toLowerCase(),null,!1)}));var K=/[\-:]([a-z])/g;function Q(e){return e[1].toUpperCase()}"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach((function(e){var t=e.replace(K,Q);q[t]=new G(t,1,!1,e,null,!1)})),"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach((function(e){var t=e.replace(K,Q);q[t]=new G(t,1,!1,e,"http://www.w3.org/1999/xlink",!1)})),["xml:base","xml:lang","xml:space"].forEach((function(e){var t=e.replace(K,Q);q[t]=new G(t,1,!1,e,"http://www.w3.org/XML/1998/namespace",!1)})),["tabIndex","crossOrigin"].forEach((function(e){q[e]=new G(e,1,!1,e.toLowerCase(),null,!1)})),q.xlinkHref=new G("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0),["src","href","action","formAction"].forEach((function(e){q[e]=new G(e,1,!1,e.toLowerCase(),null,!0)}));var Y=a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function X(e,t,n,a){var o=q.hasOwnProperty(t)?q[t]:null;(null!==o?0===o.type:!a&&(2<t.length&&("o"===t[0]||"O"===t[0])&&("n"===t[1]||"N"===t[1])))||(function(e,t,n,a){if(null==t||function(e,t,n,a){if(null!==n&&0===n.type)return!1;switch(typeof t){case"function":case"symbol":return!0;case"boolean":return!a&&(null!==n?!n.acceptsBooleans:"data-"!==(e=e.toLowerCase().slice(0,5))&&"aria-"!==e);default:return!1}}(e,t,n,a))return!0;if(a)return!1;if(null!==n)switch(n.type){case 3:return!t;case 4:return!1===t;case 5:return isNaN(t);case 6:return isNaN(t)||1>t}return!1}(t,n,o,a)&&(n=null),a||null===o?function(e){return!!H.call(V,e)||!H.call(W,e)&&(B.test(e)?V[e]=!0:(W[e]=!0,!1))}(t)&&(null===n?e.removeAttribute(t):e.setAttribute(t,""+n)):o.mustUseProperty?e[o.propertyName]=null===n?3!==o.type&&"":n:(t=o.attributeName,a=o.attributeNamespace,null===n?e.removeAttribute(t):(n=3===(o=o.type)||4===o&&!0===n?"":""+n,a?e.setAttributeNS(a,t,n):e.setAttribute(t,n))))}Y.hasOwnProperty("ReactCurrentDispatcher")||(Y.ReactCurrentDispatcher={current:null}),Y.hasOwnProperty("ReactCurrentBatchConfig")||(Y.ReactCurrentBatchConfig={suspense:null});var Z=/^(.*)[\\\/]/,J="function"==typeof Symbol&&Symbol.for,ee=J?Symbol.for("react.element"):60103,te=J?Symbol.for("react.portal"):60106,ne=J?Symbol.for("react.fragment"):60107,ae=J?Symbol.for("react.strict_mode"):60108,oe=J?Symbol.for("react.profiler"):60114,re=J?Symbol.for("react.provider"):60109,ie=J?Symbol.for("react.context"):60110,le=J?Symbol.for("react.concurrent_mode"):60111,se=J?Symbol.for("react.forward_ref"):60112,ce=J?Symbol.for("react.suspense"):60113,ue=J?Symbol.for("react.suspense_list"):60120,pe=J?Symbol.for("react.memo"):60115,de=J?Symbol.for("react.lazy"):60116,fe=J?Symbol.for("react.block"):60121,me="function"==typeof Symbol&&Symbol.iterator;function he(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=me&&e[me]||e["@@iterator"])?e:null}function ve(e){if(null==e)return null;if("function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case ne:return"Fragment";case te:return"Portal";case oe:return"Profiler";case ae:return"StrictMode";case ce:return"Suspense";case ue:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case ie:return"Context.Consumer";case re:return"Context.Provider";case se:var t=e.render;return t=t.displayName||t.name||"",e.displayName||(""!==t?"ForwardRef("+t+")":"ForwardRef");case pe:return ve(e.type);case fe:return ve(e.render);case de:if(e=1===e._status?e._result:null)return ve(e)}return null}function ge(e){var t="";do{e:switch(e.tag){case 3:case 4:case 6:case 7:case 10:case 9:var n="";break e;default:var a=e._debugOwner,o=e._debugSource,r=ve(e.type);n=null,a&&(n=ve(a.type)),a=r,r="",o?r=" (at "+o.fileName.replace(Z,"")+":"+o.lineNumber+")":n&&(r=" (created by "+n+")"),n="\n    in "+(a||"Unknown")+r}t+=n,e=e.return}while(e);return t}function be(e){switch(typeof e){case"boolean":case"number":case"object":case"string":case"undefined":return e;default:return""}}function xe(e){var t=e.type;return(e=e.nodeName)&&"input"===e.toLowerCase()&&("checkbox"===t||"radio"===t)}function we(e){e._valueTracker||(e._valueTracker=function(e){var t=xe(e)?"checked":"value",n=Object.getOwnPropertyDescriptor(e.constructor.prototype,t),a=""+e[t];if(!e.hasOwnProperty(t)&&void 0!==n&&"function"==typeof n.get&&"function"==typeof n.set){var o=n.get,r=n.set;return Object.defineProperty(e,t,{configurable:!0,get:function(){return o.call(this)},set:function(e){a=""+e,r.call(this,e)}}),Object.defineProperty(e,t,{enumerable:n.enumerable}),{getValue:function(){return a},setValue:function(e){a=""+e},stopTracking:function(){e._valueTracker=null,delete e[t]}}}}(e))}function ye(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),a="";return e&&(a=xe(e)?e.checked?"true":"false":e.value),(e=a)!==n&&(t.setValue(e),!0)}function ke(e,t){var n=t.checked;return o({},t,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=n?n:e._wrapperState.initialChecked})}function Ee(e,t){var n=null==t.defaultValue?"":t.defaultValue,a=null!=t.checked?t.checked:t.defaultChecked;n=be(null!=t.value?t.value:n),e._wrapperState={initialChecked:a,initialValue:n,controlled:"checkbox"===t.type||"radio"===t.type?null!=t.checked:null!=t.value}}function Se(e,t){null!=(t=t.checked)&&X(e,"checked",t,!1)}function Te(e,t){Se(e,t);var n=be(t.value),a=t.type;if(null!=n)"number"===a?(0===n&&""===e.value||e.value!=n)&&(e.value=""+n):e.value!==""+n&&(e.value=""+n);else if("submit"===a||"reset"===a)return void e.removeAttribute("value");t.hasOwnProperty("value")?Oe(e,t.type,n):t.hasOwnProperty("defaultValue")&&Oe(e,t.type,be(t.defaultValue)),null==t.checked&&null!=t.defaultChecked&&(e.defaultChecked=!!t.defaultChecked)}function _e(e,t,n){if(t.hasOwnProperty("value")||t.hasOwnProperty("defaultValue")){var a=t.type;if(!("submit"!==a&&"reset"!==a||void 0!==t.value&&null!==t.value))return;t=""+e._wrapperState.initialValue,n||t===e.value||(e.value=t),e.defaultValue=t}""!==(n=e.name)&&(e.name=""),e.defaultChecked=!!e._wrapperState.initialChecked,""!==n&&(e.name=n)}function Oe(e,t,n){"number"===t&&e.ownerDocument.activeElement===e||(null==n?e.defaultValue=""+e._wrapperState.initialValue:e.defaultValue!==""+n&&(e.defaultValue=""+n))}function Ce(e,t){return e=o({children:void 0},t),(t=function(e){var t="";return a.Children.forEach(e,(function(e){null!=e&&(t+=e)})),t}(t.children))&&(e.children=t),e}function Pe(e,t,n,a){if(e=e.options,t){t={};for(var o=0;o<n.length;o++)t["$"+n[o]]=!0;for(n=0;n<e.length;n++)o=t.hasOwnProperty("$"+e[n].value),e[n].selected!==o&&(e[n].selected=o),o&&a&&(e[n].defaultSelected=!0)}else{for(n=""+be(n),t=null,o=0;o<e.length;o++){if(e[o].value===n)return e[o].selected=!0,void(a&&(e[o].defaultSelected=!0));null!==t||e[o].disabled||(t=e[o])}null!==t&&(t.selected=!0)}}function Ne(e,t){if(null!=t.dangerouslySetInnerHTML)throw Error(i(91));return o({},t,{value:void 0,defaultValue:void 0,children:""+e._wrapperState.initialValue})}function Ae(e,t){var n=t.value;if(null==n){if(n=t.children,t=t.defaultValue,null!=n){if(null!=t)throw Error(i(92));if(Array.isArray(n)){if(!(1>=n.length))throw Error(i(93));n=n[0]}t=n}null==t&&(t=""),n=t}e._wrapperState={initialValue:be(n)}}function Re(e,t){var n=be(t.value),a=be(t.defaultValue);null!=n&&((n=""+n)!==e.value&&(e.value=n),null==t.defaultValue&&e.defaultValue!==n&&(e.defaultValue=n)),null!=a&&(e.defaultValue=""+a)}function Ie(e){var t=e.textContent;t===e._wrapperState.initialValue&&""!==t&&null!==t&&(e.value=t)}var Fe="http://www.w3.org/1999/xhtml",Le="http://www.w3.org/2000/svg";function De(e){switch(e){case"svg":return"http://www.w3.org/2000/svg";case"math":return"http://www.w3.org/1998/Math/MathML";default:return"http://www.w3.org/1999/xhtml"}}function je(e,t){return null==e||"http://www.w3.org/1999/xhtml"===e?De(t):"http://www.w3.org/2000/svg"===e&&"foreignObject"===t?"http://www.w3.org/1999/xhtml":e}var Me,ze,$e=(ze=function(e,t){if(e.namespaceURI!==Le||"innerHTML"in e)e.innerHTML=t;else{for((Me=Me||document.createElement("div")).innerHTML="<svg>"+t.valueOf().toString()+"</svg>",t=Me.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}},"undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction?function(e,t,n,a){MSApp.execUnsafeLocalFunction((function(){return ze(e,t)}))}:ze);function Ue(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t}function Be(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n}var He={animationend:Be("Animation","AnimationEnd"),animationiteration:Be("Animation","AnimationIteration"),animationstart:Be("Animation","AnimationStart"),transitionend:Be("Transition","TransitionEnd")},We={},Ve={};function Ge(e){if(We[e])return We[e];if(!He[e])return e;var t,n=He[e];for(t in n)if(n.hasOwnProperty(t)&&t in Ve)return We[e]=n[t];return e}O&&(Ve=document.createElement("div").style,"AnimationEvent"in window||(delete He.animationend.animation,delete He.animationiteration.animation,delete He.animationstart.animation),"TransitionEvent"in window||delete He.transitionend.transition);var qe=Ge("animationend"),Ke=Ge("animationiteration"),Qe=Ge("animationstart"),Ye=Ge("transitionend"),Xe="abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange waiting".split(" "),Ze=new("function"==typeof WeakMap?WeakMap:Map);function Je(e){var t=Ze.get(e);return void 0===t&&(t=new Map,Ze.set(e,t)),t}function et(e){var t=e,n=e;if(e.alternate)for(;t.return;)t=t.return;else{e=t;do{0!=(1026&(t=e).effectTag)&&(n=t.return),e=t.return}while(e)}return 3===t.tag?n:null}function tt(e){if(13===e.tag){var t=e.memoizedState;if(null===t&&(null!==(e=e.alternate)&&(t=e.memoizedState)),null!==t)return t.dehydrated}return null}function nt(e){if(et(e)!==e)throw Error(i(188))}function at(e){if(!(e=function(e){var t=e.alternate;if(!t){if(null===(t=et(e)))throw Error(i(188));return t!==e?null:e}for(var n=e,a=t;;){var o=n.return;if(null===o)break;var r=o.alternate;if(null===r){if(null!==(a=o.return)){n=a;continue}break}if(o.child===r.child){for(r=o.child;r;){if(r===n)return nt(o),e;if(r===a)return nt(o),t;r=r.sibling}throw Error(i(188))}if(n.return!==a.return)n=o,a=r;else{for(var l=!1,s=o.child;s;){if(s===n){l=!0,n=o,a=r;break}if(s===a){l=!0,a=o,n=r;break}s=s.sibling}if(!l){for(s=r.child;s;){if(s===n){l=!0,n=r,a=o;break}if(s===a){l=!0,a=r,n=o;break}s=s.sibling}if(!l)throw Error(i(189))}}if(n.alternate!==a)throw Error(i(190))}if(3!==n.tag)throw Error(i(188));return n.stateNode.current===n?e:t}(e)))return null;for(var t=e;;){if(5===t.tag||6===t.tag)return t;if(t.child)t.child.return=t,t=t.child;else{if(t===e)break;for(;!t.sibling;){if(!t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}}return null}function ot(e,t){if(null==t)throw Error(i(30));return null==e?t:Array.isArray(e)?Array.isArray(t)?(e.push.apply(e,t),e):(e.push(t),e):Array.isArray(t)?[e].concat(t):[e,t]}function rt(e,t,n){Array.isArray(e)?e.forEach(t,n):e&&t.call(n,e)}var it=null;function lt(e){if(e){var t=e._dispatchListeners,n=e._dispatchInstances;if(Array.isArray(t))for(var a=0;a<t.length&&!e.isPropagationStopped();a++)g(e,t[a],n[a]);else t&&g(e,t,n);e._dispatchListeners=null,e._dispatchInstances=null,e.isPersistent()||e.constructor.release(e)}}function st(e){if(null!==e&&(it=ot(it,e)),e=it,it=null,e){if(rt(e,lt),it)throw Error(i(95));if(u)throw e=p,u=!1,p=null,e}}function ct(e){return(e=e.target||e.srcElement||window).correspondingUseElement&&(e=e.correspondingUseElement),3===e.nodeType?e.parentNode:e}function ut(e){if(!O)return!1;var t=(e="on"+e)in document;return t||((t=document.createElement("div")).setAttribute(e,"return;"),t="function"==typeof t[e]),t}var pt=[];function dt(e){e.topLevelType=null,e.nativeEvent=null,e.targetInst=null,e.ancestors.length=0,10>pt.length&&pt.push(e)}function ft(e,t,n,a){if(pt.length){var o=pt.pop();return o.topLevelType=e,o.eventSystemFlags=a,o.nativeEvent=t,o.targetInst=n,o}return{topLevelType:e,eventSystemFlags:a,nativeEvent:t,targetInst:n,ancestors:[]}}function mt(e){var t=e.targetInst,n=t;do{if(!n){e.ancestors.push(n);break}var a=n;if(3===a.tag)a=a.stateNode.containerInfo;else{for(;a.return;)a=a.return;a=3!==a.tag?null:a.stateNode.containerInfo}if(!a)break;5!==(t=n.tag)&&6!==t||e.ancestors.push(n),n=An(a)}while(n);for(n=0;n<e.ancestors.length;n++){t=e.ancestors[n];var o=ct(e.nativeEvent);a=e.topLevelType;var r=e.nativeEvent,i=e.eventSystemFlags;0===n&&(i|=64);for(var l=null,s=0;s<k.length;s++){var c=k[s];c&&(c=c.extractEvents(a,t,r,o,i))&&(l=ot(l,c))}st(l)}}function ht(e,t,n){if(!n.has(e)){switch(e){case"scroll":Qt(t,"scroll",!0);break;case"focus":case"blur":Qt(t,"focus",!0),Qt(t,"blur",!0),n.set("blur",null),n.set("focus",null);break;case"cancel":case"close":ut(e)&&Qt(t,e,!0);break;case"invalid":case"submit":case"reset":break;default:-1===Xe.indexOf(e)&&Kt(e,t)}n.set(e,null)}}var vt,gt,bt,xt=!1,wt=[],yt=null,kt=null,Et=null,St=new Map,Tt=new Map,_t=[],Ot="mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput close cancel copy cut paste click change contextmenu reset submit".split(" "),Ct="focus blur dragenter dragleave mouseover mouseout pointerover pointerout gotpointercapture lostpointercapture".split(" ");function Pt(e,t,n,a,o){return{blockedOn:e,topLevelType:t,eventSystemFlags:32|n,nativeEvent:o,container:a}}function Nt(e,t){switch(e){case"focus":case"blur":yt=null;break;case"dragenter":case"dragleave":kt=null;break;case"mouseover":case"mouseout":Et=null;break;case"pointerover":case"pointerout":St.delete(t.pointerId);break;case"gotpointercapture":case"lostpointercapture":Tt.delete(t.pointerId)}}function At(e,t,n,a,o,r){return null===e||e.nativeEvent!==r?(e=Pt(t,n,a,o,r),null!==t&&(null!==(t=Rn(t))&&gt(t)),e):(e.eventSystemFlags|=a,e)}function Rt(e){var t=An(e.target);if(null!==t){var n=et(t);if(null!==n)if(13===(t=n.tag)){if(null!==(t=tt(n)))return e.blockedOn=t,void r.unstable_runWithPriority(e.priority,(function(){bt(n)}))}else if(3===t&&n.stateNode.hydrate)return void(e.blockedOn=3===n.tag?n.stateNode.containerInfo:null)}e.blockedOn=null}function It(e){if(null!==e.blockedOn)return!1;var t=Jt(e.topLevelType,e.eventSystemFlags,e.container,e.nativeEvent);if(null!==t){var n=Rn(t);return null!==n&&gt(n),e.blockedOn=t,!1}return!0}function Ft(e,t,n){It(e)&&n.delete(t)}function Lt(){for(xt=!1;0<wt.length;){var e=wt[0];if(null!==e.blockedOn){null!==(e=Rn(e.blockedOn))&&vt(e);break}var t=Jt(e.topLevelType,e.eventSystemFlags,e.container,e.nativeEvent);null!==t?e.blockedOn=t:wt.shift()}null!==yt&&It(yt)&&(yt=null),null!==kt&&It(kt)&&(kt=null),null!==Et&&It(Et)&&(Et=null),St.forEach(Ft),Tt.forEach(Ft)}function Dt(e,t){e.blockedOn===t&&(e.blockedOn=null,xt||(xt=!0,r.unstable_scheduleCallback(r.unstable_NormalPriority,Lt)))}function jt(e){function t(t){return Dt(t,e)}if(0<wt.length){Dt(wt[0],e);for(var n=1;n<wt.length;n++){var a=wt[n];a.blockedOn===e&&(a.blockedOn=null)}}for(null!==yt&&Dt(yt,e),null!==kt&&Dt(kt,e),null!==Et&&Dt(Et,e),St.forEach(t),Tt.forEach(t),n=0;n<_t.length;n++)(a=_t[n]).blockedOn===e&&(a.blockedOn=null);for(;0<_t.length&&null===(n=_t[0]).blockedOn;)Rt(n),null===n.blockedOn&&_t.shift()}var Mt={},zt=new Map,$t=new Map,Ut=["abort","abort",qe,"animationEnd",Ke,"animationIteration",Qe,"animationStart","canplay","canPlay","canplaythrough","canPlayThrough","durationchange","durationChange","emptied","emptied","encrypted","encrypted","ended","ended","error","error","gotpointercapture","gotPointerCapture","load","load","loadeddata","loadedData","loadedmetadata","loadedMetadata","loadstart","loadStart","lostpointercapture","lostPointerCapture","playing","playing","progress","progress","seeking","seeking","stalled","stalled","suspend","suspend","timeupdate","timeUpdate",Ye,"transitionEnd","waiting","waiting"];function Bt(e,t){for(var n=0;n<e.length;n+=2){var a=e[n],o=e[n+1],r="on"+(o[0].toUpperCase()+o.slice(1));r={phasedRegistrationNames:{bubbled:r,captured:r+"Capture"},dependencies:[a],eventPriority:t},$t.set(a,t),zt.set(a,r),Mt[o]=r}}Bt("blur blur cancel cancel click click close close contextmenu contextMenu copy copy cut cut auxclick auxClick dblclick doubleClick dragend dragEnd dragstart dragStart drop drop focus focus input input invalid invalid keydown keyDown keypress keyPress keyup keyUp mousedown mouseDown mouseup mouseUp paste paste pause pause play play pointercancel pointerCancel pointerdown pointerDown pointerup pointerUp ratechange rateChange reset reset seeked seeked submit submit touchcancel touchCancel touchend touchEnd touchstart touchStart volumechange volumeChange".split(" "),0),Bt("drag drag dragenter dragEnter dragexit dragExit dragleave dragLeave dragover dragOver mousemove mouseMove mouseout mouseOut mouseover mouseOver pointermove pointerMove pointerout pointerOut pointerover pointerOver scroll scroll toggle toggle touchmove touchMove wheel wheel".split(" "),1),Bt(Ut,2);for(var Ht="change selectionchange textInput compositionstart compositionend compositionupdate".split(" "),Wt=0;Wt<Ht.length;Wt++)$t.set(Ht[Wt],0);var Vt=r.unstable_UserBlockingPriority,Gt=r.unstable_runWithPriority,qt=!0;function Kt(e,t){Qt(t,e,!1)}function Qt(e,t,n){var a=$t.get(t);switch(void 0===a?2:a){case 0:a=Yt.bind(null,t,1,e);break;case 1:a=Xt.bind(null,t,1,e);break;default:a=Zt.bind(null,t,1,e)}n?e.addEventListener(t,a,!0):e.addEventListener(t,a,!1)}function Yt(e,t,n,a){M||D();var o=Zt,r=M;M=!0;try{L(o,e,t,n,a)}finally{(M=r)||$()}}function Xt(e,t,n,a){Gt(Vt,Zt.bind(null,e,t,n,a))}function Zt(e,t,n,a){if(qt)if(0<wt.length&&-1<Ot.indexOf(e))e=Pt(null,e,t,n,a),wt.push(e);else{var o=Jt(e,t,n,a);if(null===o)Nt(e,a);else if(-1<Ot.indexOf(e))e=Pt(o,e,t,n,a),wt.push(e);else if(!function(e,t,n,a,o){switch(t){case"focus":return yt=At(yt,e,t,n,a,o),!0;case"dragenter":return kt=At(kt,e,t,n,a,o),!0;case"mouseover":return Et=At(Et,e,t,n,a,o),!0;case"pointerover":var r=o.pointerId;return St.set(r,At(St.get(r)||null,e,t,n,a,o)),!0;case"gotpointercapture":return r=o.pointerId,Tt.set(r,At(Tt.get(r)||null,e,t,n,a,o)),!0}return!1}(o,e,t,n,a)){Nt(e,a),e=ft(e,a,null,t);try{U(mt,e)}finally{dt(e)}}}}function Jt(e,t,n,a){if(null!==(n=An(n=ct(a)))){var o=et(n);if(null===o)n=null;else{var r=o.tag;if(13===r){if(null!==(n=tt(o)))return n;n=null}else if(3===r){if(o.stateNode.hydrate)return 3===o.tag?o.stateNode.containerInfo:null;n=null}else o!==n&&(n=null)}}e=ft(e,a,n,t);try{U(mt,e)}finally{dt(e)}return null}var en={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},tn=["Webkit","ms","Moz","O"];function nn(e,t,n){return null==t||"boolean"==typeof t||""===t?"":n||"number"!=typeof t||0===t||en.hasOwnProperty(e)&&en[e]?(""+t).trim():t+"px"}function an(e,t){for(var n in e=e.style,t)if(t.hasOwnProperty(n)){var a=0===n.indexOf("--"),o=nn(n,t[n],a);"float"===n&&(n="cssFloat"),a?e.setProperty(n,o):e[n]=o}}Object.keys(en).forEach((function(e){tn.forEach((function(t){t=t+e.charAt(0).toUpperCase()+e.substring(1),en[t]=en[e]}))}));var on=o({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0});function rn(e,t){if(t){if(on[e]&&(null!=t.children||null!=t.dangerouslySetInnerHTML))throw Error(i(137,e,""));if(null!=t.dangerouslySetInnerHTML){if(null!=t.children)throw Error(i(60));if("object"!=typeof t.dangerouslySetInnerHTML||!("__html"in t.dangerouslySetInnerHTML))throw Error(i(61))}if(null!=t.style&&"object"!=typeof t.style)throw Error(i(62,""))}}function ln(e,t){if(-1===e.indexOf("-"))return"string"==typeof t.is;switch(e){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}var sn=Fe;function cn(e,t){var n=Je(e=9===e.nodeType||11===e.nodeType?e:e.ownerDocument);t=T[t];for(var a=0;a<t.length;a++)ht(t[a],e,n)}function un(){}function pn(e){if(void 0===(e=e||("undefined"!=typeof document?document:void 0)))return null;try{return e.activeElement||e.body}catch(t){return e.body}}function dn(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function fn(e,t){var n,a=dn(e);for(e=0;a;){if(3===a.nodeType){if(n=e+a.textContent.length,e<=t&&n>=t)return{node:a,offset:t-e};e=n}e:{for(;a;){if(a.nextSibling){a=a.nextSibling;break e}a=a.parentNode}a=void 0}a=dn(a)}}function mn(e,t){return!(!e||!t)&&(e===t||(!e||3!==e.nodeType)&&(t&&3===t.nodeType?mn(e,t.parentNode):"contains"in e?e.contains(t):!!e.compareDocumentPosition&&!!(16&e.compareDocumentPosition(t))))}function hn(){for(var e=window,t=pn();t instanceof e.HTMLIFrameElement;){try{var n="string"==typeof t.contentWindow.location.href}catch(a){n=!1}if(!n)break;t=pn((e=t.contentWindow).document)}return t}function vn(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&("text"===e.type||"search"===e.type||"tel"===e.type||"url"===e.type||"password"===e.type)||"textarea"===t||"true"===e.contentEditable)}var gn="$?",bn="$!",xn=null,wn=null;function yn(e,t){switch(e){case"button":case"input":case"select":case"textarea":return!!t.autoFocus}return!1}function kn(e,t){return"textarea"===e||"option"===e||"noscript"===e||"string"==typeof t.children||"number"==typeof t.children||"object"==typeof t.dangerouslySetInnerHTML&&null!==t.dangerouslySetInnerHTML&&null!=t.dangerouslySetInnerHTML.__html}var En="function"==typeof setTimeout?setTimeout:void 0,Sn="function"==typeof clearTimeout?clearTimeout:void 0;function Tn(e){for(;null!=e;e=e.nextSibling){var t=e.nodeType;if(1===t||3===t)break}return e}function _n(e){e=e.previousSibling;for(var t=0;e;){if(8===e.nodeType){var n=e.data;if("$"===n||n===bn||n===gn){if(0===t)return e;t--}else"/$"===n&&t++}e=e.previousSibling}return null}var On=Math.random().toString(36).slice(2),Cn="__reactInternalInstance$"+On,Pn="__reactEventHandlers$"+On,Nn="__reactContainere$"+On;function An(e){var t=e[Cn];if(t)return t;for(var n=e.parentNode;n;){if(t=n[Nn]||n[Cn]){if(n=t.alternate,null!==t.child||null!==n&&null!==n.child)for(e=_n(e);null!==e;){if(n=e[Cn])return n;e=_n(e)}return t}n=(e=n).parentNode}return null}function Rn(e){return!(e=e[Cn]||e[Nn])||5!==e.tag&&6!==e.tag&&13!==e.tag&&3!==e.tag?null:e}function In(e){if(5===e.tag||6===e.tag)return e.stateNode;throw Error(i(33))}function Fn(e){return e[Pn]||null}function Ln(e){do{e=e.return}while(e&&5!==e.tag);return e||null}function Dn(e,t){var n=e.stateNode;if(!n)return null;var a=m(n);if(!a)return null;n=a[t];e:switch(t){case"onClick":case"onClickCapture":case"onDoubleClick":case"onDoubleClickCapture":case"onMouseDown":case"onMouseDownCapture":case"onMouseMove":case"onMouseMoveCapture":case"onMouseUp":case"onMouseUpCapture":case"onMouseEnter":(a=!a.disabled)||(a=!("button"===(e=e.type)||"input"===e||"select"===e||"textarea"===e)),e=!a;break e;default:e=!1}if(e)return null;if(n&&"function"!=typeof n)throw Error(i(231,t,typeof n));return n}function jn(e,t,n){(t=Dn(e,n.dispatchConfig.phasedRegistrationNames[t]))&&(n._dispatchListeners=ot(n._dispatchListeners,t),n._dispatchInstances=ot(n._dispatchInstances,e))}function Mn(e){if(e&&e.dispatchConfig.phasedRegistrationNames){for(var t=e._targetInst,n=[];t;)n.push(t),t=Ln(t);for(t=n.length;0<t--;)jn(n[t],"captured",e);for(t=0;t<n.length;t++)jn(n[t],"bubbled",e)}}function zn(e,t,n){e&&n&&n.dispatchConfig.registrationName&&(t=Dn(e,n.dispatchConfig.registrationName))&&(n._dispatchListeners=ot(n._dispatchListeners,t),n._dispatchInstances=ot(n._dispatchInstances,e))}function $n(e){e&&e.dispatchConfig.registrationName&&zn(e._targetInst,null,e)}function Un(e){rt(e,Mn)}var Bn=null,Hn=null,Wn=null;function Vn(){if(Wn)return Wn;var e,t,n=Hn,a=n.length,o="value"in Bn?Bn.value:Bn.textContent,r=o.length;for(e=0;e<a&&n[e]===o[e];e++);var i=a-e;for(t=1;t<=i&&n[a-t]===o[r-t];t++);return Wn=o.slice(e,1<t?1-t:void 0)}function Gn(){return!0}function qn(){return!1}function Kn(e,t,n,a){for(var o in this.dispatchConfig=e,this._targetInst=t,this.nativeEvent=n,e=this.constructor.Interface)e.hasOwnProperty(o)&&((t=e[o])?this[o]=t(n):"target"===o?this.target=a:this[o]=n[o]);return this.isDefaultPrevented=(null!=n.defaultPrevented?n.defaultPrevented:!1===n.returnValue)?Gn:qn,this.isPropagationStopped=qn,this}function Qn(e,t,n,a){if(this.eventPool.length){var o=this.eventPool.pop();return this.call(o,e,t,n,a),o}return new this(e,t,n,a)}function Yn(e){if(!(e instanceof this))throw Error(i(279));e.destructor(),10>this.eventPool.length&&this.eventPool.push(e)}function Xn(e){e.eventPool=[],e.getPooled=Qn,e.release=Yn}o(Kn.prototype,{preventDefault:function(){this.defaultPrevented=!0;var e=this.nativeEvent;e&&(e.preventDefault?e.preventDefault():"unknown"!=typeof e.returnValue&&(e.returnValue=!1),this.isDefaultPrevented=Gn)},stopPropagation:function(){var e=this.nativeEvent;e&&(e.stopPropagation?e.stopPropagation():"unknown"!=typeof e.cancelBubble&&(e.cancelBubble=!0),this.isPropagationStopped=Gn)},persist:function(){this.isPersistent=Gn},isPersistent:qn,destructor:function(){var e,t=this.constructor.Interface;for(e in t)this[e]=null;this.nativeEvent=this._targetInst=this.dispatchConfig=null,this.isPropagationStopped=this.isDefaultPrevented=qn,this._dispatchInstances=this._dispatchListeners=null}}),Kn.Interface={type:null,target:null,currentTarget:function(){return null},eventPhase:null,bubbles:null,cancelable:null,timeStamp:function(e){return e.timeStamp||Date.now()},defaultPrevented:null,isTrusted:null},Kn.extend=function(e){function t(){}function n(){return a.apply(this,arguments)}var a=this;t.prototype=a.prototype;var r=new t;return o(r,n.prototype),n.prototype=r,n.prototype.constructor=n,n.Interface=o({},a.Interface,e),n.extend=a.extend,Xn(n),n},Xn(Kn);var Zn=Kn.extend({data:null}),Jn=Kn.extend({data:null}),ea=[9,13,27,32],ta=O&&"CompositionEvent"in window,na=null;O&&"documentMode"in document&&(na=document.documentMode);var aa=O&&"TextEvent"in window&&!na,oa=O&&(!ta||na&&8<na&&11>=na),ra=String.fromCharCode(32),ia={beforeInput:{phasedRegistrationNames:{bubbled:"onBeforeInput",captured:"onBeforeInputCapture"},dependencies:["compositionend","keypress","textInput","paste"]},compositionEnd:{phasedRegistrationNames:{bubbled:"onCompositionEnd",captured:"onCompositionEndCapture"},dependencies:"blur compositionend keydown keypress keyup mousedown".split(" ")},compositionStart:{phasedRegistrationNames:{bubbled:"onCompositionStart",captured:"onCompositionStartCapture"},dependencies:"blur compositionstart keydown keypress keyup mousedown".split(" ")},compositionUpdate:{phasedRegistrationNames:{bubbled:"onCompositionUpdate",captured:"onCompositionUpdateCapture"},dependencies:"blur compositionupdate keydown keypress keyup mousedown".split(" ")}},la=!1;function sa(e,t){switch(e){case"keyup":return-1!==ea.indexOf(t.keyCode);case"keydown":return 229!==t.keyCode;case"keypress":case"mousedown":case"blur":return!0;default:return!1}}function ca(e){return"object"==typeof(e=e.detail)&&"data"in e?e.data:null}var ua=!1;var pa={eventTypes:ia,extractEvents:function(e,t,n,a){var o;if(ta)e:{switch(e){case"compositionstart":var r=ia.compositionStart;break e;case"compositionend":r=ia.compositionEnd;break e;case"compositionupdate":r=ia.compositionUpdate;break e}r=void 0}else ua?sa(e,n)&&(r=ia.compositionEnd):"keydown"===e&&229===n.keyCode&&(r=ia.compositionStart);return r?(oa&&"ko"!==n.locale&&(ua||r!==ia.compositionStart?r===ia.compositionEnd&&ua&&(o=Vn()):(Hn="value"in(Bn=a)?Bn.value:Bn.textContent,ua=!0)),r=Zn.getPooled(r,t,n,a),o?r.data=o:null!==(o=ca(n))&&(r.data=o),Un(r),o=r):o=null,(e=aa?function(e,t){switch(e){case"compositionend":return ca(t);case"keypress":return 32!==t.which?null:(la=!0,ra);case"textInput":return(e=t.data)===ra&&la?null:e;default:return null}}(e,n):function(e,t){if(ua)return"compositionend"===e||!ta&&sa(e,t)?(e=Vn(),Wn=Hn=Bn=null,ua=!1,e):null;switch(e){case"paste":return null;case"keypress":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1<t.char.length)return t.char;if(t.which)return String.fromCharCode(t.which)}return null;case"compositionend":return oa&&"ko"!==t.locale?null:t.data;default:return null}}(e,n))?((t=Jn.getPooled(ia.beforeInput,t,n,a)).data=e,Un(t)):t=null,null===o?t:null===t?o:[o,t]}},da={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};function fa(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!da[e.type]:"textarea"===t}var ma={change:{phasedRegistrationNames:{bubbled:"onChange",captured:"onChangeCapture"},dependencies:"blur change click focus input keydown keyup selectionchange".split(" ")}};function ha(e,t,n){return(e=Kn.getPooled(ma.change,e,t,n)).type="change",R(n),Un(e),e}var va=null,ga=null;function ba(e){st(e)}function xa(e){if(ye(In(e)))return e}function wa(e,t){if("change"===e)return t}var ya=!1;function ka(){va&&(va.detachEvent("onpropertychange",Ea),ga=va=null)}function Ea(e){if("value"===e.propertyName&&xa(ga))if(e=ha(ga,e,ct(e)),M)st(e);else{M=!0;try{F(ba,e)}finally{M=!1,$()}}}function Sa(e,t,n){"focus"===e?(ka(),ga=n,(va=t).attachEvent("onpropertychange",Ea)):"blur"===e&&ka()}function Ta(e){if("selectionchange"===e||"keyup"===e||"keydown"===e)return xa(ga)}function _a(e,t){if("click"===e)return xa(t)}function Oa(e,t){if("input"===e||"change"===e)return xa(t)}O&&(ya=ut("input")&&(!document.documentMode||9<document.documentMode));var Ca={eventTypes:ma,_isInputEventSupported:ya,extractEvents:function(e,t,n,a){var o=t?In(t):window,r=o.nodeName&&o.nodeName.toLowerCase();if("select"===r||"input"===r&&"file"===o.type)var i=wa;else if(fa(o))if(ya)i=Oa;else{i=Ta;var l=Sa}else(r=o.nodeName)&&"input"===r.toLowerCase()&&("checkbox"===o.type||"radio"===o.type)&&(i=_a);if(i&&(i=i(e,t)))return ha(i,n,a);l&&l(e,o,t),"blur"===e&&(e=o._wrapperState)&&e.controlled&&"number"===o.type&&Oe(o,"number",o.value)}},Pa=Kn.extend({view:null,detail:null}),Na={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};function Aa(e){var t=this.nativeEvent;return t.getModifierState?t.getModifierState(e):!!(e=Na[e])&&!!t[e]}function Ra(){return Aa}var Ia=0,Fa=0,La=!1,Da=!1,ja=Pa.extend({screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,getModifierState:Ra,button:null,buttons:null,relatedTarget:function(e){return e.relatedTarget||(e.fromElement===e.srcElement?e.toElement:e.fromElement)},movementX:function(e){if("movementX"in e)return e.movementX;var t=Ia;return Ia=e.screenX,La?"mousemove"===e.type?e.screenX-t:0:(La=!0,0)},movementY:function(e){if("movementY"in e)return e.movementY;var t=Fa;return Fa=e.screenY,Da?"mousemove"===e.type?e.screenY-t:0:(Da=!0,0)}}),Ma=ja.extend({pointerId:null,width:null,height:null,pressure:null,tangentialPressure:null,tiltX:null,tiltY:null,twist:null,pointerType:null,isPrimary:null}),za={mouseEnter:{registrationName:"onMouseEnter",dependencies:["mouseout","mouseover"]},mouseLeave:{registrationName:"onMouseLeave",dependencies:["mouseout","mouseover"]},pointerEnter:{registrationName:"onPointerEnter",dependencies:["pointerout","pointerover"]},pointerLeave:{registrationName:"onPointerLeave",dependencies:["pointerout","pointerover"]}},$a={eventTypes:za,extractEvents:function(e,t,n,a,o){var r="mouseover"===e||"pointerover"===e,i="mouseout"===e||"pointerout"===e;if(r&&0==(32&o)&&(n.relatedTarget||n.fromElement)||!i&&!r)return null;(r=a.window===a?a:(r=a.ownerDocument)?r.defaultView||r.parentWindow:window,i)?(i=t,null!==(t=(t=n.relatedTarget||n.toElement)?An(t):null)&&(t!==et(t)||5!==t.tag&&6!==t.tag)&&(t=null)):i=null;if(i===t)return null;if("mouseout"===e||"mouseover"===e)var l=ja,s=za.mouseLeave,c=za.mouseEnter,u="mouse";else"pointerout"!==e&&"pointerover"!==e||(l=Ma,s=za.pointerLeave,c=za.pointerEnter,u="pointer");if(e=null==i?r:In(i),r=null==t?r:In(t),(s=l.getPooled(s,i,n,a)).type=u+"leave",s.target=e,s.relatedTarget=r,(n=l.getPooled(c,t,n,a)).type=u+"enter",n.target=r,n.relatedTarget=e,u=t,(a=i)&&u)e:{for(c=u,i=0,e=l=a;e;e=Ln(e))i++;for(e=0,t=c;t;t=Ln(t))e++;for(;0<i-e;)l=Ln(l),i--;for(;0<e-i;)c=Ln(c),e--;for(;i--;){if(l===c||l===c.alternate)break e;l=Ln(l),c=Ln(c)}l=null}else l=null;for(c=l,l=[];a&&a!==c&&(null===(i=a.alternate)||i!==c);)l.push(a),a=Ln(a);for(a=[];u&&u!==c&&(null===(i=u.alternate)||i!==c);)a.push(u),u=Ln(u);for(u=0;u<l.length;u++)zn(l[u],"bubbled",s);for(u=a.length;0<u--;)zn(a[u],"captured",n);return 0==(64&o)?[s]:[s,n]}};var Ua="function"==typeof Object.is?Object.is:function(e,t){return e===t&&(0!==e||1/e==1/t)||e!=e&&t!=t},Ba=Object.prototype.hasOwnProperty;function Ha(e,t){if(Ua(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;var n=Object.keys(e),a=Object.keys(t);if(n.length!==a.length)return!1;for(a=0;a<n.length;a++)if(!Ba.call(t,n[a])||!Ua(e[n[a]],t[n[a]]))return!1;return!0}var Wa=O&&"documentMode"in document&&11>=document.documentMode,Va={select:{phasedRegistrationNames:{bubbled:"onSelect",captured:"onSelectCapture"},dependencies:"blur contextmenu dragend focus keydown keyup mousedown mouseup selectionchange".split(" ")}},Ga=null,qa=null,Ka=null,Qa=!1;function Ya(e,t){var n=t.window===t?t.document:9===t.nodeType?t:t.ownerDocument;return Qa||null==Ga||Ga!==pn(n)?null:("selectionStart"in(n=Ga)&&vn(n)?n={start:n.selectionStart,end:n.selectionEnd}:n={anchorNode:(n=(n.ownerDocument&&n.ownerDocument.defaultView||window).getSelection()).anchorNode,anchorOffset:n.anchorOffset,focusNode:n.focusNode,focusOffset:n.focusOffset},Ka&&Ha(Ka,n)?null:(Ka=n,(e=Kn.getPooled(Va.select,qa,e,t)).type="select",e.target=Ga,Un(e),e))}var Xa={eventTypes:Va,extractEvents:function(e,t,n,a,o,r){if(!(r=!(o=r||(a.window===a?a.document:9===a.nodeType?a:a.ownerDocument)))){e:{o=Je(o),r=T.onSelect;for(var i=0;i<r.length;i++)if(!o.has(r[i])){o=!1;break e}o=!0}r=!o}if(r)return null;switch(o=t?In(t):window,e){case"focus":(fa(o)||"true"===o.contentEditable)&&(Ga=o,qa=t,Ka=null);break;case"blur":Ka=qa=Ga=null;break;case"mousedown":Qa=!0;break;case"contextmenu":case"mouseup":case"dragend":return Qa=!1,Ya(n,a);case"selectionchange":if(Wa)break;case"keydown":case"keyup":return Ya(n,a)}return null}},Za=Kn.extend({animationName:null,elapsedTime:null,pseudoElement:null}),Ja=Kn.extend({clipboardData:function(e){return"clipboardData"in e?e.clipboardData:window.clipboardData}}),eo=Pa.extend({relatedTarget:null});function to(e){var t=e.keyCode;return"charCode"in e?0===(e=e.charCode)&&13===t&&(e=13):e=t,10===e&&(e=13),32<=e||13===e?e:0}var no={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},ao={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"},oo=Pa.extend({key:function(e){if(e.key){var t=no[e.key]||e.key;if("Unidentified"!==t)return t}return"keypress"===e.type?13===(e=to(e))?"Enter":String.fromCharCode(e):"keydown"===e.type||"keyup"===e.type?ao[e.keyCode]||"Unidentified":""},location:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,repeat:null,locale:null,getModifierState:Ra,charCode:function(e){return"keypress"===e.type?to(e):0},keyCode:function(e){return"keydown"===e.type||"keyup"===e.type?e.keyCode:0},which:function(e){return"keypress"===e.type?to(e):"keydown"===e.type||"keyup"===e.type?e.keyCode:0}}),ro=ja.extend({dataTransfer:null}),io=Pa.extend({touches:null,targetTouches:null,changedTouches:null,altKey:null,metaKey:null,ctrlKey:null,shiftKey:null,getModifierState:Ra}),lo=Kn.extend({propertyName:null,elapsedTime:null,pseudoElement:null}),so=ja.extend({deltaX:function(e){return"deltaX"in e?e.deltaX:"wheelDeltaX"in e?-e.wheelDeltaX:0},deltaY:function(e){return"deltaY"in e?e.deltaY:"wheelDeltaY"in e?-e.wheelDeltaY:"wheelDelta"in e?-e.wheelDelta:0},deltaZ:null,deltaMode:null}),co={eventTypes:Mt,extractEvents:function(e,t,n,a){var o=zt.get(e);if(!o)return null;switch(e){case"keypress":if(0===to(n))return null;case"keydown":case"keyup":e=oo;break;case"blur":case"focus":e=eo;break;case"click":if(2===n.button)return null;case"auxclick":case"dblclick":case"mousedown":case"mousemove":case"mouseup":case"mouseout":case"mouseover":case"contextmenu":e=ja;break;case"drag":case"dragend":case"dragenter":case"dragexit":case"dragleave":case"dragover":case"dragstart":case"drop":e=ro;break;case"touchcancel":case"touchend":case"touchmove":case"touchstart":e=io;break;case qe:case Ke:case Qe:e=Za;break;case Ye:e=lo;break;case"scroll":e=Pa;break;case"wheel":e=so;break;case"copy":case"cut":case"paste":e=Ja;break;case"gotpointercapture":case"lostpointercapture":case"pointercancel":case"pointerdown":case"pointermove":case"pointerout":case"pointerover":case"pointerup":e=Ma;break;default:e=Kn}return Un(t=e.getPooled(o,t,n,a)),t}};if(b)throw Error(i(101));b=Array.prototype.slice.call("ResponderEventPlugin SimpleEventPlugin EnterLeaveEventPlugin ChangeEventPlugin SelectEventPlugin BeforeInputEventPlugin".split(" ")),w(),m=Fn,h=Rn,v=In,_({SimpleEventPlugin:co,EnterLeaveEventPlugin:$a,ChangeEventPlugin:Ca,SelectEventPlugin:Xa,BeforeInputEventPlugin:pa});var uo=[],po=-1;function fo(e){0>po||(e.current=uo[po],uo[po]=null,po--)}function mo(e,t){po++,uo[po]=e.current,e.current=t}var ho={},vo={current:ho},go={current:!1},bo=ho;function xo(e,t){var n=e.type.contextTypes;if(!n)return ho;var a=e.stateNode;if(a&&a.__reactInternalMemoizedUnmaskedChildContext===t)return a.__reactInternalMemoizedMaskedChildContext;var o,r={};for(o in n)r[o]=t[o];return a&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=r),r}function wo(e){return null!=(e=e.childContextTypes)}function yo(){fo(go),fo(vo)}function ko(e,t,n){if(vo.current!==ho)throw Error(i(168));mo(vo,t),mo(go,n)}function Eo(e,t,n){var a=e.stateNode;if(e=t.childContextTypes,"function"!=typeof a.getChildContext)return n;for(var r in a=a.getChildContext())if(!(r in e))throw Error(i(108,ve(t)||"Unknown",r));return o({},n,{},a)}function So(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||ho,bo=vo.current,mo(vo,e),mo(go,go.current),!0}function To(e,t,n){var a=e.stateNode;if(!a)throw Error(i(169));n?(e=Eo(e,t,bo),a.__reactInternalMemoizedMergedChildContext=e,fo(go),fo(vo),mo(vo,e)):fo(go),mo(go,n)}var _o=r.unstable_runWithPriority,Oo=r.unstable_scheduleCallback,Co=r.unstable_cancelCallback,Po=r.unstable_requestPaint,No=r.unstable_now,Ao=r.unstable_getCurrentPriorityLevel,Ro=r.unstable_ImmediatePriority,Io=r.unstable_UserBlockingPriority,Fo=r.unstable_NormalPriority,Lo=r.unstable_LowPriority,Do=r.unstable_IdlePriority,jo={},Mo=r.unstable_shouldYield,zo=void 0!==Po?Po:function(){},$o=null,Uo=null,Bo=!1,Ho=No(),Wo=1e4>Ho?No:function(){return No()-Ho};function Vo(){switch(Ao()){case Ro:return 99;case Io:return 98;case Fo:return 97;case Lo:return 96;case Do:return 95;default:throw Error(i(332))}}function Go(e){switch(e){case 99:return Ro;case 98:return Io;case 97:return Fo;case 96:return Lo;case 95:return Do;default:throw Error(i(332))}}function qo(e,t){return e=Go(e),_o(e,t)}function Ko(e,t,n){return e=Go(e),Oo(e,t,n)}function Qo(e){return null===$o?($o=[e],Uo=Oo(Ro,Xo)):$o.push(e),jo}function Yo(){if(null!==Uo){var e=Uo;Uo=null,Co(e)}Xo()}function Xo(){if(!Bo&&null!==$o){Bo=!0;var e=0;try{var t=$o;qo(99,(function(){for(;e<t.length;e++){var n=t[e];do{n=n(!0)}while(null!==n)}})),$o=null}catch(n){throw null!==$o&&($o=$o.slice(e+1)),Oo(Ro,Yo),n}finally{Bo=!1}}}function Zo(e,t,n){return 1073741821-(1+((1073741821-e+t/10)/(n/=10)|0))*n}function Jo(e,t){if(e&&e.defaultProps)for(var n in t=o({},t),e=e.defaultProps)void 0===t[n]&&(t[n]=e[n]);return t}var er={current:null},tr=null,nr=null,ar=null;function or(){ar=nr=tr=null}function rr(e){var t=er.current;fo(er),e.type._context._currentValue=t}function ir(e,t){for(;null!==e;){var n=e.alternate;if(e.childExpirationTime<t)e.childExpirationTime=t,null!==n&&n.childExpirationTime<t&&(n.childExpirationTime=t);else{if(!(null!==n&&n.childExpirationTime<t))break;n.childExpirationTime=t}e=e.return}}function lr(e,t){tr=e,ar=nr=null,null!==(e=e.dependencies)&&null!==e.firstContext&&(e.expirationTime>=t&&(Fi=!0),e.firstContext=null)}function sr(e,t){if(ar!==e&&!1!==t&&0!==t)if("number"==typeof t&&1073741823!==t||(ar=e,t=1073741823),t={context:e,observedBits:t,next:null},null===nr){if(null===tr)throw Error(i(308));nr=t,tr.dependencies={expirationTime:0,firstContext:t,responders:null}}else nr=nr.next=t;return e._currentValue}var cr=!1;function ur(e){e.updateQueue={baseState:e.memoizedState,baseQueue:null,shared:{pending:null},effects:null}}function pr(e,t){e=e.updateQueue,t.updateQueue===e&&(t.updateQueue={baseState:e.baseState,baseQueue:e.baseQueue,shared:e.shared,effects:e.effects})}function dr(e,t){return(e={expirationTime:e,suspenseConfig:t,tag:0,payload:null,callback:null,next:null}).next=e}function fr(e,t){if(null!==(e=e.updateQueue)){var n=(e=e.shared).pending;null===n?t.next=t:(t.next=n.next,n.next=t),e.pending=t}}function mr(e,t){var n=e.alternate;null!==n&&pr(n,e),null===(n=(e=e.updateQueue).baseQueue)?(e.baseQueue=t.next=t,t.next=t):(t.next=n.next,n.next=t)}function hr(e,t,n,a){var r=e.updateQueue;cr=!1;var i=r.baseQueue,l=r.shared.pending;if(null!==l){if(null!==i){var s=i.next;i.next=l.next,l.next=s}i=l,r.shared.pending=null,null!==(s=e.alternate)&&(null!==(s=s.updateQueue)&&(s.baseQueue=l))}if(null!==i){s=i.next;var c=r.baseState,u=0,p=null,d=null,f=null;if(null!==s)for(var m=s;;){if((l=m.expirationTime)<a){var h={expirationTime:m.expirationTime,suspenseConfig:m.suspenseConfig,tag:m.tag,payload:m.payload,callback:m.callback,next:null};null===f?(d=f=h,p=c):f=f.next=h,l>u&&(u=l)}else{null!==f&&(f=f.next={expirationTime:1073741823,suspenseConfig:m.suspenseConfig,tag:m.tag,payload:m.payload,callback:m.callback,next:null}),fs(l,m.suspenseConfig);e:{var v=e,g=m;switch(l=t,h=n,g.tag){case 1:if("function"==typeof(v=g.payload)){c=v.call(h,c,l);break e}c=v;break e;case 3:v.effectTag=-4097&v.effectTag|64;case 0:if(null==(l="function"==typeof(v=g.payload)?v.call(h,c,l):v))break e;c=o({},c,l);break e;case 2:cr=!0}}null!==m.callback&&(e.effectTag|=32,null===(l=r.effects)?r.effects=[m]:l.push(m))}if(null===(m=m.next)||m===s){if(null===(l=r.shared.pending))break;m=i.next=l.next,l.next=s,r.baseQueue=i=l,r.shared.pending=null}}null===f?p=c:f.next=d,r.baseState=p,r.baseQueue=f,ms(u),e.expirationTime=u,e.memoizedState=c}}function vr(e,t,n){if(e=t.effects,t.effects=null,null!==e)for(t=0;t<e.length;t++){var a=e[t],o=a.callback;if(null!==o){if(a.callback=null,a=o,o=n,"function"!=typeof a)throw Error(i(191,a));a.call(o)}}}var gr=Y.ReactCurrentBatchConfig,br=(new a.Component).refs;function xr(e,t,n,a){n=null==(n=n(a,t=e.memoizedState))?t:o({},t,n),e.memoizedState=n,0===e.expirationTime&&(e.updateQueue.baseState=n)}var wr={isMounted:function(e){return!!(e=e._reactInternalFiber)&&et(e)===e},enqueueSetState:function(e,t,n){e=e._reactInternalFiber;var a=es(),o=gr.suspense;(o=dr(a=ts(a,e,o),o)).payload=t,null!=n&&(o.callback=n),fr(e,o),ns(e,a)},enqueueReplaceState:function(e,t,n){e=e._reactInternalFiber;var a=es(),o=gr.suspense;(o=dr(a=ts(a,e,o),o)).tag=1,o.payload=t,null!=n&&(o.callback=n),fr(e,o),ns(e,a)},enqueueForceUpdate:function(e,t){e=e._reactInternalFiber;var n=es(),a=gr.suspense;(a=dr(n=ts(n,e,a),a)).tag=2,null!=t&&(a.callback=t),fr(e,a),ns(e,n)}};function yr(e,t,n,a,o,r,i){return"function"==typeof(e=e.stateNode).shouldComponentUpdate?e.shouldComponentUpdate(a,r,i):!t.prototype||!t.prototype.isPureReactComponent||(!Ha(n,a)||!Ha(o,r))}function kr(e,t,n){var a=!1,o=ho,r=t.contextType;return"object"==typeof r&&null!==r?r=sr(r):(o=wo(t)?bo:vo.current,r=(a=null!=(a=t.contextTypes))?xo(e,o):ho),t=new t(n,r),e.memoizedState=null!==t.state&&void 0!==t.state?t.state:null,t.updater=wr,e.stateNode=t,t._reactInternalFiber=e,a&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=o,e.__reactInternalMemoizedMaskedChildContext=r),t}function Er(e,t,n,a){e=t.state,"function"==typeof t.componentWillReceiveProps&&t.componentWillReceiveProps(n,a),"function"==typeof t.UNSAFE_componentWillReceiveProps&&t.UNSAFE_componentWillReceiveProps(n,a),t.state!==e&&wr.enqueueReplaceState(t,t.state,null)}function Sr(e,t,n,a){var o=e.stateNode;o.props=n,o.state=e.memoizedState,o.refs=br,ur(e);var r=t.contextType;"object"==typeof r&&null!==r?o.context=sr(r):(r=wo(t)?bo:vo.current,o.context=xo(e,r)),hr(e,n,o,a),o.state=e.memoizedState,"function"==typeof(r=t.getDerivedStateFromProps)&&(xr(e,t,r,n),o.state=e.memoizedState),"function"==typeof t.getDerivedStateFromProps||"function"==typeof o.getSnapshotBeforeUpdate||"function"!=typeof o.UNSAFE_componentWillMount&&"function"!=typeof o.componentWillMount||(t=o.state,"function"==typeof o.componentWillMount&&o.componentWillMount(),"function"==typeof o.UNSAFE_componentWillMount&&o.UNSAFE_componentWillMount(),t!==o.state&&wr.enqueueReplaceState(o,o.state,null),hr(e,n,o,a),o.state=e.memoizedState),"function"==typeof o.componentDidMount&&(e.effectTag|=4)}var Tr=Array.isArray;function _r(e,t,n){if(null!==(e=n.ref)&&"function"!=typeof e&&"object"!=typeof e){if(n._owner){if(n=n._owner){if(1!==n.tag)throw Error(i(309));var a=n.stateNode}if(!a)throw Error(i(147,e));var o=""+e;return null!==t&&null!==t.ref&&"function"==typeof t.ref&&t.ref._stringRef===o?t.ref:((t=function(e){var t=a.refs;t===br&&(t=a.refs={}),null===e?delete t[o]:t[o]=e})._stringRef=o,t)}if("string"!=typeof e)throw Error(i(284));if(!n._owner)throw Error(i(290,e))}return e}function Or(e,t){if("textarea"!==e.type)throw Error(i(31,"[object Object]"===Object.prototype.toString.call(t)?"object with keys {"+Object.keys(t).join(", ")+"}":t,""))}function Cr(e){function t(t,n){if(e){var a=t.lastEffect;null!==a?(a.nextEffect=n,t.lastEffect=n):t.firstEffect=t.lastEffect=n,n.nextEffect=null,n.effectTag=8}}function n(n,a){if(!e)return null;for(;null!==a;)t(n,a),a=a.sibling;return null}function a(e,t){for(e=new Map;null!==t;)null!==t.key?e.set(t.key,t):e.set(t.index,t),t=t.sibling;return e}function o(e,t){return(e=Fs(e,t)).index=0,e.sibling=null,e}function r(t,n,a){return t.index=a,e?null!==(a=t.alternate)?(a=a.index)<n?(t.effectTag=2,n):a:(t.effectTag=2,n):n}function l(t){return e&&null===t.alternate&&(t.effectTag=2),t}function s(e,t,n,a){return null===t||6!==t.tag?((t=js(n,e.mode,a)).return=e,t):((t=o(t,n)).return=e,t)}function c(e,t,n,a){return null!==t&&t.elementType===n.type?((a=o(t,n.props)).ref=_r(e,t,n),a.return=e,a):((a=Ls(n.type,n.key,n.props,null,e.mode,a)).ref=_r(e,t,n),a.return=e,a)}function u(e,t,n,a){return null===t||4!==t.tag||t.stateNode.containerInfo!==n.containerInfo||t.stateNode.implementation!==n.implementation?((t=Ms(n,e.mode,a)).return=e,t):((t=o(t,n.children||[])).return=e,t)}function p(e,t,n,a,r){return null===t||7!==t.tag?((t=Ds(n,e.mode,a,r)).return=e,t):((t=o(t,n)).return=e,t)}function d(e,t,n){if("string"==typeof t||"number"==typeof t)return(t=js(""+t,e.mode,n)).return=e,t;if("object"==typeof t&&null!==t){switch(t.$$typeof){case ee:return(n=Ls(t.type,t.key,t.props,null,e.mode,n)).ref=_r(e,null,t),n.return=e,n;case te:return(t=Ms(t,e.mode,n)).return=e,t}if(Tr(t)||he(t))return(t=Ds(t,e.mode,n,null)).return=e,t;Or(e,t)}return null}function f(e,t,n,a){var o=null!==t?t.key:null;if("string"==typeof n||"number"==typeof n)return null!==o?null:s(e,t,""+n,a);if("object"==typeof n&&null!==n){switch(n.$$typeof){case ee:return n.key===o?n.type===ne?p(e,t,n.props.children,a,o):c(e,t,n,a):null;case te:return n.key===o?u(e,t,n,a):null}if(Tr(n)||he(n))return null!==o?null:p(e,t,n,a,null);Or(e,n)}return null}function m(e,t,n,a,o){if("string"==typeof a||"number"==typeof a)return s(t,e=e.get(n)||null,""+a,o);if("object"==typeof a&&null!==a){switch(a.$$typeof){case ee:return e=e.get(null===a.key?n:a.key)||null,a.type===ne?p(t,e,a.props.children,o,a.key):c(t,e,a,o);case te:return u(t,e=e.get(null===a.key?n:a.key)||null,a,o)}if(Tr(a)||he(a))return p(t,e=e.get(n)||null,a,o,null);Or(t,a)}return null}function h(o,i,l,s){for(var c=null,u=null,p=i,h=i=0,v=null;null!==p&&h<l.length;h++){p.index>h?(v=p,p=null):v=p.sibling;var g=f(o,p,l[h],s);if(null===g){null===p&&(p=v);break}e&&p&&null===g.alternate&&t(o,p),i=r(g,i,h),null===u?c=g:u.sibling=g,u=g,p=v}if(h===l.length)return n(o,p),c;if(null===p){for(;h<l.length;h++)null!==(p=d(o,l[h],s))&&(i=r(p,i,h),null===u?c=p:u.sibling=p,u=p);return c}for(p=a(o,p);h<l.length;h++)null!==(v=m(p,o,h,l[h],s))&&(e&&null!==v.alternate&&p.delete(null===v.key?h:v.key),i=r(v,i,h),null===u?c=v:u.sibling=v,u=v);return e&&p.forEach((function(e){return t(o,e)})),c}function v(o,l,s,c){var u=he(s);if("function"!=typeof u)throw Error(i(150));if(null==(s=u.call(s)))throw Error(i(151));for(var p=u=null,h=l,v=l=0,g=null,b=s.next();null!==h&&!b.done;v++,b=s.next()){h.index>v?(g=h,h=null):g=h.sibling;var x=f(o,h,b.value,c);if(null===x){null===h&&(h=g);break}e&&h&&null===x.alternate&&t(o,h),l=r(x,l,v),null===p?u=x:p.sibling=x,p=x,h=g}if(b.done)return n(o,h),u;if(null===h){for(;!b.done;v++,b=s.next())null!==(b=d(o,b.value,c))&&(l=r(b,l,v),null===p?u=b:p.sibling=b,p=b);return u}for(h=a(o,h);!b.done;v++,b=s.next())null!==(b=m(h,o,v,b.value,c))&&(e&&null!==b.alternate&&h.delete(null===b.key?v:b.key),l=r(b,l,v),null===p?u=b:p.sibling=b,p=b);return e&&h.forEach((function(e){return t(o,e)})),u}return function(e,a,r,s){var c="object"==typeof r&&null!==r&&r.type===ne&&null===r.key;c&&(r=r.props.children);var u="object"==typeof r&&null!==r;if(u)switch(r.$$typeof){case ee:e:{for(u=r.key,c=a;null!==c;){if(c.key===u){switch(c.tag){case 7:if(r.type===ne){n(e,c.sibling),(a=o(c,r.props.children)).return=e,e=a;break e}break;default:if(c.elementType===r.type){n(e,c.sibling),(a=o(c,r.props)).ref=_r(e,c,r),a.return=e,e=a;break e}}n(e,c);break}t(e,c),c=c.sibling}r.type===ne?((a=Ds(r.props.children,e.mode,s,r.key)).return=e,e=a):((s=Ls(r.type,r.key,r.props,null,e.mode,s)).ref=_r(e,a,r),s.return=e,e=s)}return l(e);case te:e:{for(c=r.key;null!==a;){if(a.key===c){if(4===a.tag&&a.stateNode.containerInfo===r.containerInfo&&a.stateNode.implementation===r.implementation){n(e,a.sibling),(a=o(a,r.children||[])).return=e,e=a;break e}n(e,a);break}t(e,a),a=a.sibling}(a=Ms(r,e.mode,s)).return=e,e=a}return l(e)}if("string"==typeof r||"number"==typeof r)return r=""+r,null!==a&&6===a.tag?(n(e,a.sibling),(a=o(a,r)).return=e,e=a):(n(e,a),(a=js(r,e.mode,s)).return=e,e=a),l(e);if(Tr(r))return h(e,a,r,s);if(he(r))return v(e,a,r,s);if(u&&Or(e,r),void 0===r&&!c)switch(e.tag){case 1:case 0:throw e=e.type,Error(i(152,e.displayName||e.name||"Component"))}return n(e,a)}}var Pr=Cr(!0),Nr=Cr(!1),Ar={},Rr={current:Ar},Ir={current:Ar},Fr={current:Ar};function Lr(e){if(e===Ar)throw Error(i(174));return e}function Dr(e,t){switch(mo(Fr,t),mo(Ir,e),mo(Rr,Ar),e=t.nodeType){case 9:case 11:t=(t=t.documentElement)?t.namespaceURI:je(null,"");break;default:t=je(t=(e=8===e?t.parentNode:t).namespaceURI||null,e=e.tagName)}fo(Rr),mo(Rr,t)}function jr(){fo(Rr),fo(Ir),fo(Fr)}function Mr(e){Lr(Fr.current);var t=Lr(Rr.current),n=je(t,e.type);t!==n&&(mo(Ir,e),mo(Rr,n))}function zr(e){Ir.current===e&&(fo(Rr),fo(Ir))}var $r={current:0};function Ur(e){for(var t=e;null!==t;){if(13===t.tag){var n=t.memoizedState;if(null!==n&&(null===(n=n.dehydrated)||n.data===gn||n.data===bn))return t}else if(19===t.tag&&void 0!==t.memoizedProps.revealOrder){if(0!=(64&t.effectTag))return t}else if(null!==t.child){t.child.return=t,t=t.child;continue}if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}return null}function Br(e,t){return{responder:e,props:t}}var Hr=Y.ReactCurrentDispatcher,Wr=Y.ReactCurrentBatchConfig,Vr=0,Gr=null,qr=null,Kr=null,Qr=!1;function Yr(){throw Error(i(321))}function Xr(e,t){if(null===t)return!1;for(var n=0;n<t.length&&n<e.length;n++)if(!Ua(e[n],t[n]))return!1;return!0}function Zr(e,t,n,a,o,r){if(Vr=r,Gr=t,t.memoizedState=null,t.updateQueue=null,t.expirationTime=0,Hr.current=null===e||null===e.memoizedState?yi:ki,e=n(a,o),t.expirationTime===Vr){r=0;do{if(t.expirationTime=0,!(25>r))throw Error(i(301));r+=1,Kr=qr=null,t.updateQueue=null,Hr.current=Ei,e=n(a,o)}while(t.expirationTime===Vr)}if(Hr.current=wi,t=null!==qr&&null!==qr.next,Vr=0,Kr=qr=Gr=null,Qr=!1,t)throw Error(i(300));return e}function Jr(){var e={memoizedState:null,baseState:null,baseQueue:null,queue:null,next:null};return null===Kr?Gr.memoizedState=Kr=e:Kr=Kr.next=e,Kr}function ei(){if(null===qr){var e=Gr.alternate;e=null!==e?e.memoizedState:null}else e=qr.next;var t=null===Kr?Gr.memoizedState:Kr.next;if(null!==t)Kr=t,qr=e;else{if(null===e)throw Error(i(310));e={memoizedState:(qr=e).memoizedState,baseState:qr.baseState,baseQueue:qr.baseQueue,queue:qr.queue,next:null},null===Kr?Gr.memoizedState=Kr=e:Kr=Kr.next=e}return Kr}function ti(e,t){return"function"==typeof t?t(e):t}function ni(e){var t=ei(),n=t.queue;if(null===n)throw Error(i(311));n.lastRenderedReducer=e;var a=qr,o=a.baseQueue,r=n.pending;if(null!==r){if(null!==o){var l=o.next;o.next=r.next,r.next=l}a.baseQueue=o=r,n.pending=null}if(null!==o){o=o.next,a=a.baseState;var s=l=r=null,c=o;do{var u=c.expirationTime;if(u<Vr){var p={expirationTime:c.expirationTime,suspenseConfig:c.suspenseConfig,action:c.action,eagerReducer:c.eagerReducer,eagerState:c.eagerState,next:null};null===s?(l=s=p,r=a):s=s.next=p,u>Gr.expirationTime&&(Gr.expirationTime=u,ms(u))}else null!==s&&(s=s.next={expirationTime:1073741823,suspenseConfig:c.suspenseConfig,action:c.action,eagerReducer:c.eagerReducer,eagerState:c.eagerState,next:null}),fs(u,c.suspenseConfig),a=c.eagerReducer===e?c.eagerState:e(a,c.action);c=c.next}while(null!==c&&c!==o);null===s?r=a:s.next=l,Ua(a,t.memoizedState)||(Fi=!0),t.memoizedState=a,t.baseState=r,t.baseQueue=s,n.lastRenderedState=a}return[t.memoizedState,n.dispatch]}function ai(e){var t=ei(),n=t.queue;if(null===n)throw Error(i(311));n.lastRenderedReducer=e;var a=n.dispatch,o=n.pending,r=t.memoizedState;if(null!==o){n.pending=null;var l=o=o.next;do{r=e(r,l.action),l=l.next}while(l!==o);Ua(r,t.memoizedState)||(Fi=!0),t.memoizedState=r,null===t.baseQueue&&(t.baseState=r),n.lastRenderedState=r}return[r,a]}function oi(e){var t=Jr();return"function"==typeof e&&(e=e()),t.memoizedState=t.baseState=e,e=(e=t.queue={pending:null,dispatch:null,lastRenderedReducer:ti,lastRenderedState:e}).dispatch=xi.bind(null,Gr,e),[t.memoizedState,e]}function ri(e,t,n,a){return e={tag:e,create:t,destroy:n,deps:a,next:null},null===(t=Gr.updateQueue)?(t={lastEffect:null},Gr.updateQueue=t,t.lastEffect=e.next=e):null===(n=t.lastEffect)?t.lastEffect=e.next=e:(a=n.next,n.next=e,e.next=a,t.lastEffect=e),e}function ii(){return ei().memoizedState}function li(e,t,n,a){var o=Jr();Gr.effectTag|=e,o.memoizedState=ri(1|t,n,void 0,void 0===a?null:a)}function si(e,t,n,a){var o=ei();a=void 0===a?null:a;var r=void 0;if(null!==qr){var i=qr.memoizedState;if(r=i.destroy,null!==a&&Xr(a,i.deps))return void ri(t,n,r,a)}Gr.effectTag|=e,o.memoizedState=ri(1|t,n,r,a)}function ci(e,t){return li(516,4,e,t)}function ui(e,t){return si(516,4,e,t)}function pi(e,t){return si(4,2,e,t)}function di(e,t){return"function"==typeof t?(e=e(),t(e),function(){t(null)}):null!=t?(e=e(),t.current=e,function(){t.current=null}):void 0}function fi(e,t,n){return n=null!=n?n.concat([e]):null,si(4,2,di.bind(null,t,e),n)}function mi(){}function hi(e,t){return Jr().memoizedState=[e,void 0===t?null:t],e}function vi(e,t){var n=ei();t=void 0===t?null:t;var a=n.memoizedState;return null!==a&&null!==t&&Xr(t,a[1])?a[0]:(n.memoizedState=[e,t],e)}function gi(e,t){var n=ei();t=void 0===t?null:t;var a=n.memoizedState;return null!==a&&null!==t&&Xr(t,a[1])?a[0]:(e=e(),n.memoizedState=[e,t],e)}function bi(e,t,n){var a=Vo();qo(98>a?98:a,(function(){e(!0)})),qo(97<a?97:a,(function(){var a=Wr.suspense;Wr.suspense=void 0===t?null:t;try{e(!1),n()}finally{Wr.suspense=a}}))}function xi(e,t,n){var a=es(),o=gr.suspense;o={expirationTime:a=ts(a,e,o),suspenseConfig:o,action:n,eagerReducer:null,eagerState:null,next:null};var r=t.pending;if(null===r?o.next=o:(o.next=r.next,r.next=o),t.pending=o,r=e.alternate,e===Gr||null!==r&&r===Gr)Qr=!0,o.expirationTime=Vr,Gr.expirationTime=Vr;else{if(0===e.expirationTime&&(null===r||0===r.expirationTime)&&null!==(r=t.lastRenderedReducer))try{var i=t.lastRenderedState,l=r(i,n);if(o.eagerReducer=r,o.eagerState=l,Ua(l,i))return}catch(s){}ns(e,a)}}var wi={readContext:sr,useCallback:Yr,useContext:Yr,useEffect:Yr,useImperativeHandle:Yr,useLayoutEffect:Yr,useMemo:Yr,useReducer:Yr,useRef:Yr,useState:Yr,useDebugValue:Yr,useResponder:Yr,useDeferredValue:Yr,useTransition:Yr},yi={readContext:sr,useCallback:hi,useContext:sr,useEffect:ci,useImperativeHandle:function(e,t,n){return n=null!=n?n.concat([e]):null,li(4,2,di.bind(null,t,e),n)},useLayoutEffect:function(e,t){return li(4,2,e,t)},useMemo:function(e,t){var n=Jr();return t=void 0===t?null:t,e=e(),n.memoizedState=[e,t],e},useReducer:function(e,t,n){var a=Jr();return t=void 0!==n?n(t):t,a.memoizedState=a.baseState=t,e=(e=a.queue={pending:null,dispatch:null,lastRenderedReducer:e,lastRenderedState:t}).dispatch=xi.bind(null,Gr,e),[a.memoizedState,e]},useRef:function(e){return e={current:e},Jr().memoizedState=e},useState:oi,useDebugValue:mi,useResponder:Br,useDeferredValue:function(e,t){var n=oi(e),a=n[0],o=n[1];return ci((function(){var n=Wr.suspense;Wr.suspense=void 0===t?null:t;try{o(e)}finally{Wr.suspense=n}}),[e,t]),a},useTransition:function(e){var t=oi(!1),n=t[0];return t=t[1],[hi(bi.bind(null,t,e),[t,e]),n]}},ki={readContext:sr,useCallback:vi,useContext:sr,useEffect:ui,useImperativeHandle:fi,useLayoutEffect:pi,useMemo:gi,useReducer:ni,useRef:ii,useState:function(){return ni(ti)},useDebugValue:mi,useResponder:Br,useDeferredValue:function(e,t){var n=ni(ti),a=n[0],o=n[1];return ui((function(){var n=Wr.suspense;Wr.suspense=void 0===t?null:t;try{o(e)}finally{Wr.suspense=n}}),[e,t]),a},useTransition:function(e){var t=ni(ti),n=t[0];return t=t[1],[vi(bi.bind(null,t,e),[t,e]),n]}},Ei={readContext:sr,useCallback:vi,useContext:sr,useEffect:ui,useImperativeHandle:fi,useLayoutEffect:pi,useMemo:gi,useReducer:ai,useRef:ii,useState:function(){return ai(ti)},useDebugValue:mi,useResponder:Br,useDeferredValue:function(e,t){var n=ai(ti),a=n[0],o=n[1];return ui((function(){var n=Wr.suspense;Wr.suspense=void 0===t?null:t;try{o(e)}finally{Wr.suspense=n}}),[e,t]),a},useTransition:function(e){var t=ai(ti),n=t[0];return t=t[1],[vi(bi.bind(null,t,e),[t,e]),n]}},Si=null,Ti=null,_i=!1;function Oi(e,t){var n=Rs(5,null,null,0);n.elementType="DELETED",n.type="DELETED",n.stateNode=t,n.return=e,n.effectTag=8,null!==e.lastEffect?(e.lastEffect.nextEffect=n,e.lastEffect=n):e.firstEffect=e.lastEffect=n}function Ci(e,t){switch(e.tag){case 5:var n=e.type;return null!==(t=1!==t.nodeType||n.toLowerCase()!==t.nodeName.toLowerCase()?null:t)&&(e.stateNode=t,!0);case 6:return null!==(t=""===e.pendingProps||3!==t.nodeType?null:t)&&(e.stateNode=t,!0);case 13:default:return!1}}function Pi(e){if(_i){var t=Ti;if(t){var n=t;if(!Ci(e,t)){if(!(t=Tn(n.nextSibling))||!Ci(e,t))return e.effectTag=-1025&e.effectTag|2,_i=!1,void(Si=e);Oi(Si,n)}Si=e,Ti=Tn(t.firstChild)}else e.effectTag=-1025&e.effectTag|2,_i=!1,Si=e}}function Ni(e){for(e=e.return;null!==e&&5!==e.tag&&3!==e.tag&&13!==e.tag;)e=e.return;Si=e}function Ai(e){if(e!==Si)return!1;if(!_i)return Ni(e),_i=!0,!1;var t=e.type;if(5!==e.tag||"head"!==t&&"body"!==t&&!kn(t,e.memoizedProps))for(t=Ti;t;)Oi(e,t),t=Tn(t.nextSibling);if(Ni(e),13===e.tag){if(!(e=null!==(e=e.memoizedState)?e.dehydrated:null))throw Error(i(317));e:{for(e=e.nextSibling,t=0;e;){if(8===e.nodeType){var n=e.data;if("/$"===n){if(0===t){Ti=Tn(e.nextSibling);break e}t--}else"$"!==n&&n!==bn&&n!==gn||t++}e=e.nextSibling}Ti=null}}else Ti=Si?Tn(e.stateNode.nextSibling):null;return!0}function Ri(){Ti=Si=null,_i=!1}var Ii=Y.ReactCurrentOwner,Fi=!1;function Li(e,t,n,a){t.child=null===e?Nr(t,null,n,a):Pr(t,e.child,n,a)}function Di(e,t,n,a,o){n=n.render;var r=t.ref;return lr(t,o),a=Zr(e,t,n,a,r,o),null===e||Fi?(t.effectTag|=1,Li(e,t,a,o),t.child):(t.updateQueue=e.updateQueue,t.effectTag&=-517,e.expirationTime<=o&&(e.expirationTime=0),Zi(e,t,o))}function ji(e,t,n,a,o,r){if(null===e){var i=n.type;return"function"!=typeof i||Is(i)||void 0!==i.defaultProps||null!==n.compare||void 0!==n.defaultProps?((e=Ls(n.type,null,a,null,t.mode,r)).ref=t.ref,e.return=t,t.child=e):(t.tag=15,t.type=i,Mi(e,t,i,a,o,r))}return i=e.child,o<r&&(o=i.memoizedProps,(n=null!==(n=n.compare)?n:Ha)(o,a)&&e.ref===t.ref)?Zi(e,t,r):(t.effectTag|=1,(e=Fs(i,a)).ref=t.ref,e.return=t,t.child=e)}function Mi(e,t,n,a,o,r){return null!==e&&Ha(e.memoizedProps,a)&&e.ref===t.ref&&(Fi=!1,o<r)?(t.expirationTime=e.expirationTime,Zi(e,t,r)):$i(e,t,n,a,r)}function zi(e,t){var n=t.ref;(null===e&&null!==n||null!==e&&e.ref!==n)&&(t.effectTag|=128)}function $i(e,t,n,a,o){var r=wo(n)?bo:vo.current;return r=xo(t,r),lr(t,o),n=Zr(e,t,n,a,r,o),null===e||Fi?(t.effectTag|=1,Li(e,t,n,o),t.child):(t.updateQueue=e.updateQueue,t.effectTag&=-517,e.expirationTime<=o&&(e.expirationTime=0),Zi(e,t,o))}function Ui(e,t,n,a,o){if(wo(n)){var r=!0;So(t)}else r=!1;if(lr(t,o),null===t.stateNode)null!==e&&(e.alternate=null,t.alternate=null,t.effectTag|=2),kr(t,n,a),Sr(t,n,a,o),a=!0;else if(null===e){var i=t.stateNode,l=t.memoizedProps;i.props=l;var s=i.context,c=n.contextType;"object"==typeof c&&null!==c?c=sr(c):c=xo(t,c=wo(n)?bo:vo.current);var u=n.getDerivedStateFromProps,p="function"==typeof u||"function"==typeof i.getSnapshotBeforeUpdate;p||"function"!=typeof i.UNSAFE_componentWillReceiveProps&&"function"!=typeof i.componentWillReceiveProps||(l!==a||s!==c)&&Er(t,i,a,c),cr=!1;var d=t.memoizedState;i.state=d,hr(t,a,i,o),s=t.memoizedState,l!==a||d!==s||go.current||cr?("function"==typeof u&&(xr(t,n,u,a),s=t.memoizedState),(l=cr||yr(t,n,l,a,d,s,c))?(p||"function"!=typeof i.UNSAFE_componentWillMount&&"function"!=typeof i.componentWillMount||("function"==typeof i.componentWillMount&&i.componentWillMount(),"function"==typeof i.UNSAFE_componentWillMount&&i.UNSAFE_componentWillMount()),"function"==typeof i.componentDidMount&&(t.effectTag|=4)):("function"==typeof i.componentDidMount&&(t.effectTag|=4),t.memoizedProps=a,t.memoizedState=s),i.props=a,i.state=s,i.context=c,a=l):("function"==typeof i.componentDidMount&&(t.effectTag|=4),a=!1)}else i=t.stateNode,pr(e,t),l=t.memoizedProps,i.props=t.type===t.elementType?l:Jo(t.type,l),s=i.context,"object"==typeof(c=n.contextType)&&null!==c?c=sr(c):c=xo(t,c=wo(n)?bo:vo.current),(p="function"==typeof(u=n.getDerivedStateFromProps)||"function"==typeof i.getSnapshotBeforeUpdate)||"function"!=typeof i.UNSAFE_componentWillReceiveProps&&"function"!=typeof i.componentWillReceiveProps||(l!==a||s!==c)&&Er(t,i,a,c),cr=!1,s=t.memoizedState,i.state=s,hr(t,a,i,o),d=t.memoizedState,l!==a||s!==d||go.current||cr?("function"==typeof u&&(xr(t,n,u,a),d=t.memoizedState),(u=cr||yr(t,n,l,a,s,d,c))?(p||"function"!=typeof i.UNSAFE_componentWillUpdate&&"function"!=typeof i.componentWillUpdate||("function"==typeof i.componentWillUpdate&&i.componentWillUpdate(a,d,c),"function"==typeof i.UNSAFE_componentWillUpdate&&i.UNSAFE_componentWillUpdate(a,d,c)),"function"==typeof i.componentDidUpdate&&(t.effectTag|=4),"function"==typeof i.getSnapshotBeforeUpdate&&(t.effectTag|=256)):("function"!=typeof i.componentDidUpdate||l===e.memoizedProps&&s===e.memoizedState||(t.effectTag|=4),"function"!=typeof i.getSnapshotBeforeUpdate||l===e.memoizedProps&&s===e.memoizedState||(t.effectTag|=256),t.memoizedProps=a,t.memoizedState=d),i.props=a,i.state=d,i.context=c,a=u):("function"!=typeof i.componentDidUpdate||l===e.memoizedProps&&s===e.memoizedState||(t.effectTag|=4),"function"!=typeof i.getSnapshotBeforeUpdate||l===e.memoizedProps&&s===e.memoizedState||(t.effectTag|=256),a=!1);return Bi(e,t,n,a,r,o)}function Bi(e,t,n,a,o,r){zi(e,t);var i=0!=(64&t.effectTag);if(!a&&!i)return o&&To(t,n,!1),Zi(e,t,r);a=t.stateNode,Ii.current=t;var l=i&&"function"!=typeof n.getDerivedStateFromError?null:a.render();return t.effectTag|=1,null!==e&&i?(t.child=Pr(t,e.child,null,r),t.child=Pr(t,null,l,r)):Li(e,t,l,r),t.memoizedState=a.state,o&&To(t,n,!0),t.child}function Hi(e){var t=e.stateNode;t.pendingContext?ko(0,t.pendingContext,t.pendingContext!==t.context):t.context&&ko(0,t.context,!1),Dr(e,t.containerInfo)}var Wi,Vi,Gi,qi={dehydrated:null,retryTime:0};function Ki(e,t,n){var a,o=t.mode,r=t.pendingProps,i=$r.current,l=!1;if((a=0!=(64&t.effectTag))||(a=0!=(2&i)&&(null===e||null!==e.memoizedState)),a?(l=!0,t.effectTag&=-65):null!==e&&null===e.memoizedState||void 0===r.fallback||!0===r.unstable_avoidThisFallback||(i|=1),mo($r,1&i),null===e){if(void 0!==r.fallback&&Pi(t),l){if(l=r.fallback,(r=Ds(null,o,0,null)).return=t,0==(2&t.mode))for(e=null!==t.memoizedState?t.child.child:t.child,r.child=e;null!==e;)e.return=r,e=e.sibling;return(n=Ds(l,o,n,null)).return=t,r.sibling=n,t.memoizedState=qi,t.child=r,n}return o=r.children,t.memoizedState=null,t.child=Nr(t,null,o,n)}if(null!==e.memoizedState){if(o=(e=e.child).sibling,l){if(r=r.fallback,(n=Fs(e,e.pendingProps)).return=t,0==(2&t.mode)&&(l=null!==t.memoizedState?t.child.child:t.child)!==e.child)for(n.child=l;null!==l;)l.return=n,l=l.sibling;return(o=Fs(o,r)).return=t,n.sibling=o,n.childExpirationTime=0,t.memoizedState=qi,t.child=n,o}return n=Pr(t,e.child,r.children,n),t.memoizedState=null,t.child=n}if(e=e.child,l){if(l=r.fallback,(r=Ds(null,o,0,null)).return=t,r.child=e,null!==e&&(e.return=r),0==(2&t.mode))for(e=null!==t.memoizedState?t.child.child:t.child,r.child=e;null!==e;)e.return=r,e=e.sibling;return(n=Ds(l,o,n,null)).return=t,r.sibling=n,n.effectTag|=2,r.childExpirationTime=0,t.memoizedState=qi,t.child=r,n}return t.memoizedState=null,t.child=Pr(t,e,r.children,n)}function Qi(e,t){e.expirationTime<t&&(e.expirationTime=t);var n=e.alternate;null!==n&&n.expirationTime<t&&(n.expirationTime=t),ir(e.return,t)}function Yi(e,t,n,a,o,r){var i=e.memoizedState;null===i?e.memoizedState={isBackwards:t,rendering:null,renderingStartTime:0,last:a,tail:n,tailExpiration:0,tailMode:o,lastEffect:r}:(i.isBackwards=t,i.rendering=null,i.renderingStartTime=0,i.last=a,i.tail=n,i.tailExpiration=0,i.tailMode=o,i.lastEffect=r)}function Xi(e,t,n){var a=t.pendingProps,o=a.revealOrder,r=a.tail;if(Li(e,t,a.children,n),0!=(2&(a=$r.current)))a=1&a|2,t.effectTag|=64;else{if(null!==e&&0!=(64&e.effectTag))e:for(e=t.child;null!==e;){if(13===e.tag)null!==e.memoizedState&&Qi(e,n);else if(19===e.tag)Qi(e,n);else if(null!==e.child){e.child.return=e,e=e.child;continue}if(e===t)break e;for(;null===e.sibling;){if(null===e.return||e.return===t)break e;e=e.return}e.sibling.return=e.return,e=e.sibling}a&=1}if(mo($r,a),0==(2&t.mode))t.memoizedState=null;else switch(o){case"forwards":for(n=t.child,o=null;null!==n;)null!==(e=n.alternate)&&null===Ur(e)&&(o=n),n=n.sibling;null===(n=o)?(o=t.child,t.child=null):(o=n.sibling,n.sibling=null),Yi(t,!1,o,n,r,t.lastEffect);break;case"backwards":for(n=null,o=t.child,t.child=null;null!==o;){if(null!==(e=o.alternate)&&null===Ur(e)){t.child=o;break}e=o.sibling,o.sibling=n,n=o,o=e}Yi(t,!0,n,null,r,t.lastEffect);break;case"together":Yi(t,!1,null,null,void 0,t.lastEffect);break;default:t.memoizedState=null}return t.child}function Zi(e,t,n){null!==e&&(t.dependencies=e.dependencies);var a=t.expirationTime;if(0!==a&&ms(a),t.childExpirationTime<n)return null;if(null!==e&&t.child!==e.child)throw Error(i(153));if(null!==t.child){for(n=Fs(e=t.child,e.pendingProps),t.child=n,n.return=t;null!==e.sibling;)e=e.sibling,(n=n.sibling=Fs(e,e.pendingProps)).return=t;n.sibling=null}return t.child}function Ji(e,t){switch(e.tailMode){case"hidden":t=e.tail;for(var n=null;null!==t;)null!==t.alternate&&(n=t),t=t.sibling;null===n?e.tail=null:n.sibling=null;break;case"collapsed":n=e.tail;for(var a=null;null!==n;)null!==n.alternate&&(a=n),n=n.sibling;null===a?t||null===e.tail?e.tail=null:e.tail.sibling=null:a.sibling=null}}function el(e,t,n){var a=t.pendingProps;switch(t.tag){case 2:case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:return null;case 1:return wo(t.type)&&yo(),null;case 3:return jr(),fo(go),fo(vo),(n=t.stateNode).pendingContext&&(n.context=n.pendingContext,n.pendingContext=null),null!==e&&null!==e.child||!Ai(t)||(t.effectTag|=4),null;case 5:zr(t),n=Lr(Fr.current);var r=t.type;if(null!==e&&null!=t.stateNode)Vi(e,t,r,a,n),e.ref!==t.ref&&(t.effectTag|=128);else{if(!a){if(null===t.stateNode)throw Error(i(166));return null}if(e=Lr(Rr.current),Ai(t)){a=t.stateNode,r=t.type;var l=t.memoizedProps;switch(a[Cn]=t,a[Pn]=l,r){case"iframe":case"object":case"embed":Kt("load",a);break;case"video":case"audio":for(e=0;e<Xe.length;e++)Kt(Xe[e],a);break;case"source":Kt("error",a);break;case"img":case"image":case"link":Kt("error",a),Kt("load",a);break;case"form":Kt("reset",a),Kt("submit",a);break;case"details":Kt("toggle",a);break;case"input":Ee(a,l),Kt("invalid",a),cn(n,"onChange");break;case"select":a._wrapperState={wasMultiple:!!l.multiple},Kt("invalid",a),cn(n,"onChange");break;case"textarea":Ae(a,l),Kt("invalid",a),cn(n,"onChange")}for(var s in rn(r,l),e=null,l)if(l.hasOwnProperty(s)){var c=l[s];"children"===s?"string"==typeof c?a.textContent!==c&&(e=["children",c]):"number"==typeof c&&a.textContent!==""+c&&(e=["children",""+c]):S.hasOwnProperty(s)&&null!=c&&cn(n,s)}switch(r){case"input":we(a),_e(a,l,!0);break;case"textarea":we(a),Ie(a);break;case"select":case"option":break;default:"function"==typeof l.onClick&&(a.onclick=un)}n=e,t.updateQueue=n,null!==n&&(t.effectTag|=4)}else{switch(s=9===n.nodeType?n:n.ownerDocument,e===sn&&(e=De(r)),e===sn?"script"===r?((e=s.createElement("div")).innerHTML="<script><\/script>",e=e.removeChild(e.firstChild)):"string"==typeof a.is?e=s.createElement(r,{is:a.is}):(e=s.createElement(r),"select"===r&&(s=e,a.multiple?s.multiple=!0:a.size&&(s.size=a.size))):e=s.createElementNS(e,r),e[Cn]=t,e[Pn]=a,Wi(e,t),t.stateNode=e,s=ln(r,a),r){case"iframe":case"object":case"embed":Kt("load",e),c=a;break;case"video":case"audio":for(c=0;c<Xe.length;c++)Kt(Xe[c],e);c=a;break;case"source":Kt("error",e),c=a;break;case"img":case"image":case"link":Kt("error",e),Kt("load",e),c=a;break;case"form":Kt("reset",e),Kt("submit",e),c=a;break;case"details":Kt("toggle",e),c=a;break;case"input":Ee(e,a),c=ke(e,a),Kt("invalid",e),cn(n,"onChange");break;case"option":c=Ce(e,a);break;case"select":e._wrapperState={wasMultiple:!!a.multiple},c=o({},a,{value:void 0}),Kt("invalid",e),cn(n,"onChange");break;case"textarea":Ae(e,a),c=Ne(e,a),Kt("invalid",e),cn(n,"onChange");break;default:c=a}rn(r,c);var u=c;for(l in u)if(u.hasOwnProperty(l)){var p=u[l];"style"===l?an(e,p):"dangerouslySetInnerHTML"===l?null!=(p=p?p.__html:void 0)&&$e(e,p):"children"===l?"string"==typeof p?("textarea"!==r||""!==p)&&Ue(e,p):"number"==typeof p&&Ue(e,""+p):"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&"autoFocus"!==l&&(S.hasOwnProperty(l)?null!=p&&cn(n,l):null!=p&&X(e,l,p,s))}switch(r){case"input":we(e),_e(e,a,!1);break;case"textarea":we(e),Ie(e);break;case"option":null!=a.value&&e.setAttribute("value",""+be(a.value));break;case"select":e.multiple=!!a.multiple,null!=(n=a.value)?Pe(e,!!a.multiple,n,!1):null!=a.defaultValue&&Pe(e,!!a.multiple,a.defaultValue,!0);break;default:"function"==typeof c.onClick&&(e.onclick=un)}yn(r,a)&&(t.effectTag|=4)}null!==t.ref&&(t.effectTag|=128)}return null;case 6:if(e&&null!=t.stateNode)Gi(0,t,e.memoizedProps,a);else{if("string"!=typeof a&&null===t.stateNode)throw Error(i(166));n=Lr(Fr.current),Lr(Rr.current),Ai(t)?(n=t.stateNode,a=t.memoizedProps,n[Cn]=t,n.nodeValue!==a&&(t.effectTag|=4)):((n=(9===n.nodeType?n:n.ownerDocument).createTextNode(a))[Cn]=t,t.stateNode=n)}return null;case 13:return fo($r),a=t.memoizedState,0!=(64&t.effectTag)?(t.expirationTime=n,t):(n=null!==a,a=!1,null===e?void 0!==t.memoizedProps.fallback&&Ai(t):(a=null!==(r=e.memoizedState),n||null===r||null!==(r=e.child.sibling)&&(null!==(l=t.firstEffect)?(t.firstEffect=r,r.nextEffect=l):(t.firstEffect=t.lastEffect=r,r.nextEffect=null),r.effectTag=8)),n&&!a&&0!=(2&t.mode)&&(null===e&&!0!==t.memoizedProps.unstable_avoidThisFallback||0!=(1&$r.current)?Ll===Cl&&(Ll=Pl):(Ll!==Cl&&Ll!==Pl||(Ll=Nl),0!==$l&&null!==Rl&&(Us(Rl,Fl),Bs(Rl,$l)))),(n||a)&&(t.effectTag|=4),null);case 4:return jr(),null;case 10:return rr(t),null;case 17:return wo(t.type)&&yo(),null;case 19:if(fo($r),null===(a=t.memoizedState))return null;if(r=0!=(64&t.effectTag),null===(l=a.rendering)){if(r)Ji(a,!1);else if(Ll!==Cl||null!==e&&0!=(64&e.effectTag))for(l=t.child;null!==l;){if(null!==(e=Ur(l))){for(t.effectTag|=64,Ji(a,!1),null!==(r=e.updateQueue)&&(t.updateQueue=r,t.effectTag|=4),null===a.lastEffect&&(t.firstEffect=null),t.lastEffect=a.lastEffect,a=t.child;null!==a;)l=n,(r=a).effectTag&=2,r.nextEffect=null,r.firstEffect=null,r.lastEffect=null,null===(e=r.alternate)?(r.childExpirationTime=0,r.expirationTime=l,r.child=null,r.memoizedProps=null,r.memoizedState=null,r.updateQueue=null,r.dependencies=null):(r.childExpirationTime=e.childExpirationTime,r.expirationTime=e.expirationTime,r.child=e.child,r.memoizedProps=e.memoizedProps,r.memoizedState=e.memoizedState,r.updateQueue=e.updateQueue,l=e.dependencies,r.dependencies=null===l?null:{expirationTime:l.expirationTime,firstContext:l.firstContext,responders:l.responders}),a=a.sibling;return mo($r,1&$r.current|2),t.child}l=l.sibling}}else{if(!r)if(null!==(e=Ur(l))){if(t.effectTag|=64,r=!0,null!==(n=e.updateQueue)&&(t.updateQueue=n,t.effectTag|=4),Ji(a,!0),null===a.tail&&"hidden"===a.tailMode&&!l.alternate)return null!==(t=t.lastEffect=a.lastEffect)&&(t.nextEffect=null),null}else 2*Wo()-a.renderingStartTime>a.tailExpiration&&1<n&&(t.effectTag|=64,r=!0,Ji(a,!1),t.expirationTime=t.childExpirationTime=n-1);a.isBackwards?(l.sibling=t.child,t.child=l):(null!==(n=a.last)?n.sibling=l:t.child=l,a.last=l)}return null!==a.tail?(0===a.tailExpiration&&(a.tailExpiration=Wo()+500),n=a.tail,a.rendering=n,a.tail=n.sibling,a.lastEffect=t.lastEffect,a.renderingStartTime=Wo(),n.sibling=null,t=$r.current,mo($r,r?1&t|2:1&t),n):null}throw Error(i(156,t.tag))}function tl(e){switch(e.tag){case 1:wo(e.type)&&yo();var t=e.effectTag;return 4096&t?(e.effectTag=-4097&t|64,e):null;case 3:if(jr(),fo(go),fo(vo),0!=(64&(t=e.effectTag)))throw Error(i(285));return e.effectTag=-4097&t|64,e;case 5:return zr(e),null;case 13:return fo($r),4096&(t=e.effectTag)?(e.effectTag=-4097&t|64,e):null;case 19:return fo($r),null;case 4:return jr(),null;case 10:return rr(e),null;default:return null}}function nl(e,t){return{value:e,source:t,stack:ge(t)}}Wi=function(e,t){for(var n=t.child;null!==n;){if(5===n.tag||6===n.tag)e.appendChild(n.stateNode);else if(4!==n.tag&&null!==n.child){n.child.return=n,n=n.child;continue}if(n===t)break;for(;null===n.sibling;){if(null===n.return||n.return===t)return;n=n.return}n.sibling.return=n.return,n=n.sibling}},Vi=function(e,t,n,a,r){var i=e.memoizedProps;if(i!==a){var l,s,c=t.stateNode;switch(Lr(Rr.current),e=null,n){case"input":i=ke(c,i),a=ke(c,a),e=[];break;case"option":i=Ce(c,i),a=Ce(c,a),e=[];break;case"select":i=o({},i,{value:void 0}),a=o({},a,{value:void 0}),e=[];break;case"textarea":i=Ne(c,i),a=Ne(c,a),e=[];break;default:"function"!=typeof i.onClick&&"function"==typeof a.onClick&&(c.onclick=un)}for(l in rn(n,a),n=null,i)if(!a.hasOwnProperty(l)&&i.hasOwnProperty(l)&&null!=i[l])if("style"===l)for(s in c=i[l])c.hasOwnProperty(s)&&(n||(n={}),n[s]="");else"dangerouslySetInnerHTML"!==l&&"children"!==l&&"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&"autoFocus"!==l&&(S.hasOwnProperty(l)?e||(e=[]):(e=e||[]).push(l,null));for(l in a){var u=a[l];if(c=null!=i?i[l]:void 0,a.hasOwnProperty(l)&&u!==c&&(null!=u||null!=c))if("style"===l)if(c){for(s in c)!c.hasOwnProperty(s)||u&&u.hasOwnProperty(s)||(n||(n={}),n[s]="");for(s in u)u.hasOwnProperty(s)&&c[s]!==u[s]&&(n||(n={}),n[s]=u[s])}else n||(e||(e=[]),e.push(l,n)),n=u;else"dangerouslySetInnerHTML"===l?(u=u?u.__html:void 0,c=c?c.__html:void 0,null!=u&&c!==u&&(e=e||[]).push(l,u)):"children"===l?c===u||"string"!=typeof u&&"number"!=typeof u||(e=e||[]).push(l,""+u):"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&(S.hasOwnProperty(l)?(null!=u&&cn(r,l),e||c===u||(e=[])):(e=e||[]).push(l,u))}n&&(e=e||[]).push("style",n),r=e,(t.updateQueue=r)&&(t.effectTag|=4)}},Gi=function(e,t,n,a){n!==a&&(t.effectTag|=4)};var al="function"==typeof WeakSet?WeakSet:Set;function ol(e,t){var n=t.source,a=t.stack;null===a&&null!==n&&(a=ge(n)),null!==n&&ve(n.type),t=t.value,null!==e&&1===e.tag&&ve(e.type);try{console.error(t)}catch(o){setTimeout((function(){throw o}))}}function rl(e){var t=e.ref;if(null!==t)if("function"==typeof t)try{t(null)}catch(n){_s(e,n)}else t.current=null}function il(e,t){switch(t.tag){case 0:case 11:case 15:case 22:return;case 1:if(256&t.effectTag&&null!==e){var n=e.memoizedProps,a=e.memoizedState;t=(e=t.stateNode).getSnapshotBeforeUpdate(t.elementType===t.type?n:Jo(t.type,n),a),e.__reactInternalSnapshotBeforeUpdate=t}return;case 3:case 5:case 6:case 4:case 17:return}throw Error(i(163))}function ll(e,t){if(null!==(t=null!==(t=t.updateQueue)?t.lastEffect:null)){var n=t=t.next;do{if((n.tag&e)===e){var a=n.destroy;n.destroy=void 0,void 0!==a&&a()}n=n.next}while(n!==t)}}function sl(e,t){if(null!==(t=null!==(t=t.updateQueue)?t.lastEffect:null)){var n=t=t.next;do{if((n.tag&e)===e){var a=n.create;n.destroy=a()}n=n.next}while(n!==t)}}function cl(e,t,n){switch(n.tag){case 0:case 11:case 15:case 22:return void sl(3,n);case 1:if(e=n.stateNode,4&n.effectTag)if(null===t)e.componentDidMount();else{var a=n.elementType===n.type?t.memoizedProps:Jo(n.type,t.memoizedProps);e.componentDidUpdate(a,t.memoizedState,e.__reactInternalSnapshotBeforeUpdate)}return void(null!==(t=n.updateQueue)&&vr(n,t,e));case 3:if(null!==(t=n.updateQueue)){if(e=null,null!==n.child)switch(n.child.tag){case 5:e=n.child.stateNode;break;case 1:e=n.child.stateNode}vr(n,t,e)}return;case 5:return e=n.stateNode,void(null===t&&4&n.effectTag&&yn(n.type,n.memoizedProps)&&e.focus());case 6:case 4:case 12:return;case 13:return void(null===n.memoizedState&&(n=n.alternate,null!==n&&(n=n.memoizedState,null!==n&&(n=n.dehydrated,null!==n&&jt(n)))));case 19:case 17:case 20:case 21:return}throw Error(i(163))}function ul(e,t,n){switch("function"==typeof Ns&&Ns(t),t.tag){case 0:case 11:case 14:case 15:case 22:if(null!==(e=t.updateQueue)&&null!==(e=e.lastEffect)){var a=e.next;qo(97<n?97:n,(function(){var e=a;do{var n=e.destroy;if(void 0!==n){var o=t;try{n()}catch(r){_s(o,r)}}e=e.next}while(e!==a)}))}break;case 1:rl(t),"function"==typeof(n=t.stateNode).componentWillUnmount&&function(e,t){try{t.props=e.memoizedProps,t.state=e.memoizedState,t.componentWillUnmount()}catch(n){_s(e,n)}}(t,n);break;case 5:rl(t);break;case 4:vl(e,t,n)}}function pl(e){var t=e.alternate;e.return=null,e.child=null,e.memoizedState=null,e.updateQueue=null,e.dependencies=null,e.alternate=null,e.firstEffect=null,e.lastEffect=null,e.pendingProps=null,e.memoizedProps=null,e.stateNode=null,null!==t&&pl(t)}function dl(e){return 5===e.tag||3===e.tag||4===e.tag}function fl(e){e:{for(var t=e.return;null!==t;){if(dl(t)){var n=t;break e}t=t.return}throw Error(i(160))}switch(t=n.stateNode,n.tag){case 5:var a=!1;break;case 3:case 4:t=t.containerInfo,a=!0;break;default:throw Error(i(161))}16&n.effectTag&&(Ue(t,""),n.effectTag&=-17);e:t:for(n=e;;){for(;null===n.sibling;){if(null===n.return||dl(n.return)){n=null;break e}n=n.return}for(n.sibling.return=n.return,n=n.sibling;5!==n.tag&&6!==n.tag&&18!==n.tag;){if(2&n.effectTag)continue t;if(null===n.child||4===n.tag)continue t;n.child.return=n,n=n.child}if(!(2&n.effectTag)){n=n.stateNode;break e}}a?ml(e,n,t):hl(e,n,t)}function ml(e,t,n){var a=e.tag,o=5===a||6===a;if(o)e=o?e.stateNode:e.stateNode.instance,t?8===n.nodeType?n.parentNode.insertBefore(e,t):n.insertBefore(e,t):(8===n.nodeType?(t=n.parentNode).insertBefore(e,n):(t=n).appendChild(e),null!=(n=n._reactRootContainer)||null!==t.onclick||(t.onclick=un));else if(4!==a&&null!==(e=e.child))for(ml(e,t,n),e=e.sibling;null!==e;)ml(e,t,n),e=e.sibling}function hl(e,t,n){var a=e.tag,o=5===a||6===a;if(o)e=o?e.stateNode:e.stateNode.instance,t?n.insertBefore(e,t):n.appendChild(e);else if(4!==a&&null!==(e=e.child))for(hl(e,t,n),e=e.sibling;null!==e;)hl(e,t,n),e=e.sibling}function vl(e,t,n){for(var a,o,r=t,l=!1;;){if(!l){l=r.return;e:for(;;){if(null===l)throw Error(i(160));switch(a=l.stateNode,l.tag){case 5:o=!1;break e;case 3:case 4:a=a.containerInfo,o=!0;break e}l=l.return}l=!0}if(5===r.tag||6===r.tag){e:for(var s=e,c=r,u=n,p=c;;)if(ul(s,p,u),null!==p.child&&4!==p.tag)p.child.return=p,p=p.child;else{if(p===c)break e;for(;null===p.sibling;){if(null===p.return||p.return===c)break e;p=p.return}p.sibling.return=p.return,p=p.sibling}o?(s=a,c=r.stateNode,8===s.nodeType?s.parentNode.removeChild(c):s.removeChild(c)):a.removeChild(r.stateNode)}else if(4===r.tag){if(null!==r.child){a=r.stateNode.containerInfo,o=!0,r.child.return=r,r=r.child;continue}}else if(ul(e,r,n),null!==r.child){r.child.return=r,r=r.child;continue}if(r===t)break;for(;null===r.sibling;){if(null===r.return||r.return===t)return;4===(r=r.return).tag&&(l=!1)}r.sibling.return=r.return,r=r.sibling}}function gl(e,t){switch(t.tag){case 0:case 11:case 14:case 15:case 22:return void ll(3,t);case 1:return;case 5:var n=t.stateNode;if(null!=n){var a=t.memoizedProps,o=null!==e?e.memoizedProps:a;e=t.type;var r=t.updateQueue;if(t.updateQueue=null,null!==r){for(n[Pn]=a,"input"===e&&"radio"===a.type&&null!=a.name&&Se(n,a),ln(e,o),t=ln(e,a),o=0;o<r.length;o+=2){var l=r[o],s=r[o+1];"style"===l?an(n,s):"dangerouslySetInnerHTML"===l?$e(n,s):"children"===l?Ue(n,s):X(n,l,s,t)}switch(e){case"input":Te(n,a);break;case"textarea":Re(n,a);break;case"select":t=n._wrapperState.wasMultiple,n._wrapperState.wasMultiple=!!a.multiple,null!=(e=a.value)?Pe(n,!!a.multiple,e,!1):t!==!!a.multiple&&(null!=a.defaultValue?Pe(n,!!a.multiple,a.defaultValue,!0):Pe(n,!!a.multiple,a.multiple?[]:"",!1))}}}return;case 6:if(null===t.stateNode)throw Error(i(162));return void(t.stateNode.nodeValue=t.memoizedProps);case 3:return void((t=t.stateNode).hydrate&&(t.hydrate=!1,jt(t.containerInfo)));case 12:return;case 13:if(n=t,null===t.memoizedState?a=!1:(a=!0,n=t.child,Bl=Wo()),null!==n)e:for(e=n;;){if(5===e.tag)r=e.stateNode,a?"function"==typeof(r=r.style).setProperty?r.setProperty("display","none","important"):r.display="none":(r=e.stateNode,o=null!=(o=e.memoizedProps.style)&&o.hasOwnProperty("display")?o.display:null,r.style.display=nn("display",o));else if(6===e.tag)e.stateNode.nodeValue=a?"":e.memoizedProps;else{if(13===e.tag&&null!==e.memoizedState&&null===e.memoizedState.dehydrated){(r=e.child.sibling).return=e,e=r;continue}if(null!==e.child){e.child.return=e,e=e.child;continue}}if(e===n)break;for(;null===e.sibling;){if(null===e.return||e.return===n)break e;e=e.return}e.sibling.return=e.return,e=e.sibling}return void bl(t);case 19:return void bl(t);case 17:return}throw Error(i(163))}function bl(e){var t=e.updateQueue;if(null!==t){e.updateQueue=null;var n=e.stateNode;null===n&&(n=e.stateNode=new al),t.forEach((function(t){var a=Cs.bind(null,e,t);n.has(t)||(n.add(t),t.then(a,a))}))}}var xl="function"==typeof WeakMap?WeakMap:Map;function wl(e,t,n){(n=dr(n,null)).tag=3,n.payload={element:null};var a=t.value;return n.callback=function(){Wl||(Wl=!0,Vl=a),ol(e,t)},n}function yl(e,t,n){(n=dr(n,null)).tag=3;var a=e.type.getDerivedStateFromError;if("function"==typeof a){var o=t.value;n.payload=function(){return ol(e,t),a(o)}}var r=e.stateNode;return null!==r&&"function"==typeof r.componentDidCatch&&(n.callback=function(){"function"!=typeof a&&(null===Gl?Gl=new Set([this]):Gl.add(this),ol(e,t));var n=t.stack;this.componentDidCatch(t.value,{componentStack:null!==n?n:""})}),n}var kl,El=Math.ceil,Sl=Y.ReactCurrentDispatcher,Tl=Y.ReactCurrentOwner,_l=16,Ol=32,Cl=0,Pl=3,Nl=4,Al=0,Rl=null,Il=null,Fl=0,Ll=Cl,Dl=null,jl=1073741823,Ml=1073741823,zl=null,$l=0,Ul=!1,Bl=0,Hl=null,Wl=!1,Vl=null,Gl=null,ql=!1,Kl=null,Ql=90,Yl=null,Xl=0,Zl=null,Jl=0;function es(){return 0!=(48&Al)?1073741821-(Wo()/10|0):0!==Jl?Jl:Jl=1073741821-(Wo()/10|0)}function ts(e,t,n){if(0==(2&(t=t.mode)))return 1073741823;var a=Vo();if(0==(4&t))return 99===a?1073741823:1073741822;if(0!=(Al&_l))return Fl;if(null!==n)e=Zo(e,0|n.timeoutMs||5e3,250);else switch(a){case 99:e=1073741823;break;case 98:e=Zo(e,150,100);break;case 97:case 96:e=Zo(e,5e3,250);break;case 95:e=2;break;default:throw Error(i(326))}return null!==Rl&&e===Fl&&--e,e}function ns(e,t){if(50<Xl)throw Xl=0,Zl=null,Error(i(185));if(null!==(e=as(e,t))){var n=Vo();1073741823===t?0!=(8&Al)&&0==(48&Al)?ls(e):(rs(e),0===Al&&Yo()):rs(e),0==(4&Al)||98!==n&&99!==n||(null===Yl?Yl=new Map([[e,t]]):(void 0===(n=Yl.get(e))||n>t)&&Yl.set(e,t))}}function as(e,t){e.expirationTime<t&&(e.expirationTime=t);var n=e.alternate;null!==n&&n.expirationTime<t&&(n.expirationTime=t);var a=e.return,o=null;if(null===a&&3===e.tag)o=e.stateNode;else for(;null!==a;){if(n=a.alternate,a.childExpirationTime<t&&(a.childExpirationTime=t),null!==n&&n.childExpirationTime<t&&(n.childExpirationTime=t),null===a.return&&3===a.tag){o=a.stateNode;break}a=a.return}return null!==o&&(Rl===o&&(ms(t),Ll===Nl&&Us(o,Fl)),Bs(o,t)),o}function os(e){var t=e.lastExpiredTime;if(0!==t)return t;if(!$s(e,t=e.firstPendingTime))return t;var n=e.lastPingedTime;return 2>=(e=n>(e=e.nextKnownPendingLevel)?n:e)&&t!==e?0:e}function rs(e){if(0!==e.lastExpiredTime)e.callbackExpirationTime=1073741823,e.callbackPriority=99,e.callbackNode=Qo(ls.bind(null,e));else{var t=os(e),n=e.callbackNode;if(0===t)null!==n&&(e.callbackNode=null,e.callbackExpirationTime=0,e.callbackPriority=90);else{var a=es();if(1073741823===t?a=99:1===t||2===t?a=95:a=0>=(a=10*(1073741821-t)-10*(1073741821-a))?99:250>=a?98:5250>=a?97:95,null!==n){var o=e.callbackPriority;if(e.callbackExpirationTime===t&&o>=a)return;n!==jo&&Co(n)}e.callbackExpirationTime=t,e.callbackPriority=a,t=1073741823===t?Qo(ls.bind(null,e)):Ko(a,is.bind(null,e),{timeout:10*(1073741821-t)-Wo()}),e.callbackNode=t}}}function is(e,t){if(Jl=0,t)return Hs(e,t=es()),rs(e),null;var n=os(e);if(0!==n){if(t=e.callbackNode,0!=(48&Al))throw Error(i(327));if(Es(),e===Rl&&n===Fl||us(e,n),null!==Il){var a=Al;Al|=_l;for(var o=ds();;)try{vs();break}catch(s){ps(e,s)}if(or(),Al=a,Sl.current=o,1===Ll)throw t=Dl,us(e,n),Us(e,n),rs(e),t;if(null===Il)switch(o=e.finishedWork=e.current.alternate,e.finishedExpirationTime=n,a=Ll,Rl=null,a){case Cl:case 1:throw Error(i(345));case 2:Hs(e,2<n?2:n);break;case Pl:if(Us(e,n),n===(a=e.lastSuspendedTime)&&(e.nextKnownPendingLevel=xs(o)),1073741823===jl&&10<(o=Bl+500-Wo())){if(Ul){var r=e.lastPingedTime;if(0===r||r>=n){e.lastPingedTime=n,us(e,n);break}}if(0!==(r=os(e))&&r!==n)break;if(0!==a&&a!==n){e.lastPingedTime=a;break}e.timeoutHandle=En(ws.bind(null,e),o);break}ws(e);break;case Nl:if(Us(e,n),n===(a=e.lastSuspendedTime)&&(e.nextKnownPendingLevel=xs(o)),Ul&&(0===(o=e.lastPingedTime)||o>=n)){e.lastPingedTime=n,us(e,n);break}if(0!==(o=os(e))&&o!==n)break;if(0!==a&&a!==n){e.lastPingedTime=a;break}if(1073741823!==Ml?a=10*(1073741821-Ml)-Wo():1073741823===jl?a=0:(a=10*(1073741821-jl)-5e3,0>(a=(o=Wo())-a)&&(a=0),(n=10*(1073741821-n)-o)<(a=(120>a?120:480>a?480:1080>a?1080:1920>a?1920:3e3>a?3e3:4320>a?4320:1960*El(a/1960))-a)&&(a=n)),10<a){e.timeoutHandle=En(ws.bind(null,e),a);break}ws(e);break;case 5:if(1073741823!==jl&&null!==zl){r=jl;var l=zl;if(0>=(a=0|l.busyMinDurationMs)?a=0:(o=0|l.busyDelayMs,a=(r=Wo()-(10*(1073741821-r)-(0|l.timeoutMs||5e3)))<=o?0:o+a-r),10<a){Us(e,n),e.timeoutHandle=En(ws.bind(null,e),a);break}}ws(e);break;default:throw Error(i(329))}if(rs(e),e.callbackNode===t)return is.bind(null,e)}}return null}function ls(e){var t=e.lastExpiredTime;if(t=0!==t?t:1073741823,0!=(48&Al))throw Error(i(327));if(Es(),e===Rl&&t===Fl||us(e,t),null!==Il){var n=Al;Al|=_l;for(var a=ds();;)try{hs();break}catch(o){ps(e,o)}if(or(),Al=n,Sl.current=a,1===Ll)throw n=Dl,us(e,t),Us(e,t),rs(e),n;if(null!==Il)throw Error(i(261));e.finishedWork=e.current.alternate,e.finishedExpirationTime=t,Rl=null,ws(e),rs(e)}return null}function ss(e,t){var n=Al;Al|=1;try{return e(t)}finally{0===(Al=n)&&Yo()}}function cs(e,t){var n=Al;Al&=-2,Al|=8;try{return e(t)}finally{0===(Al=n)&&Yo()}}function us(e,t){e.finishedWork=null,e.finishedExpirationTime=0;var n=e.timeoutHandle;if(-1!==n&&(e.timeoutHandle=-1,Sn(n)),null!==Il)for(n=Il.return;null!==n;){var a=n;switch(a.tag){case 1:null!=(a=a.type.childContextTypes)&&yo();break;case 3:jr(),fo(go),fo(vo);break;case 5:zr(a);break;case 4:jr();break;case 13:case 19:fo($r);break;case 10:rr(a)}n=n.return}Rl=e,Il=Fs(e.current,null),Fl=t,Ll=Cl,Dl=null,Ml=jl=1073741823,zl=null,$l=0,Ul=!1}function ps(e,t){for(;;){try{if(or(),Hr.current=wi,Qr)for(var n=Gr.memoizedState;null!==n;){var a=n.queue;null!==a&&(a.pending=null),n=n.next}if(Vr=0,Kr=qr=Gr=null,Qr=!1,null===Il||null===Il.return)return Ll=1,Dl=t,Il=null;e:{var o=e,r=Il.return,i=Il,l=t;if(t=Fl,i.effectTag|=2048,i.firstEffect=i.lastEffect=null,null!==l&&"object"==typeof l&&"function"==typeof l.then){var s=l;if(0==(2&i.mode)){var c=i.alternate;c?(i.updateQueue=c.updateQueue,i.memoizedState=c.memoizedState,i.expirationTime=c.expirationTime):(i.updateQueue=null,i.memoizedState=null)}var u=0!=(1&$r.current),p=r;do{var d;if(d=13===p.tag){var f=p.memoizedState;if(null!==f)d=null!==f.dehydrated;else{var m=p.memoizedProps;d=void 0!==m.fallback&&(!0!==m.unstable_avoidThisFallback||!u)}}if(d){var h=p.updateQueue;if(null===h){var v=new Set;v.add(s),p.updateQueue=v}else h.add(s);if(0==(2&p.mode)){if(p.effectTag|=64,i.effectTag&=-2981,1===i.tag)if(null===i.alternate)i.tag=17;else{var g=dr(1073741823,null);g.tag=2,fr(i,g)}i.expirationTime=1073741823;break e}l=void 0,i=t;var b=o.pingCache;if(null===b?(b=o.pingCache=new xl,l=new Set,b.set(s,l)):void 0===(l=b.get(s))&&(l=new Set,b.set(s,l)),!l.has(i)){l.add(i);var x=Os.bind(null,o,s,i);s.then(x,x)}p.effectTag|=4096,p.expirationTime=t;break e}p=p.return}while(null!==p);l=Error((ve(i.type)||"A React component")+" suspended while rendering, but no fallback UI was specified.\n\nAdd a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display."+ge(i))}5!==Ll&&(Ll=2),l=nl(l,i),p=r;do{switch(p.tag){case 3:s=l,p.effectTag|=4096,p.expirationTime=t,mr(p,wl(p,s,t));break e;case 1:s=l;var w=p.type,y=p.stateNode;if(0==(64&p.effectTag)&&("function"==typeof w.getDerivedStateFromError||null!==y&&"function"==typeof y.componentDidCatch&&(null===Gl||!Gl.has(y)))){p.effectTag|=4096,p.expirationTime=t,mr(p,yl(p,s,t));break e}}p=p.return}while(null!==p)}Il=bs(Il)}catch(k){t=k;continue}break}}function ds(){var e=Sl.current;return Sl.current=wi,null===e?wi:e}function fs(e,t){e<jl&&2<e&&(jl=e),null!==t&&e<Ml&&2<e&&(Ml=e,zl=t)}function ms(e){e>$l&&($l=e)}function hs(){for(;null!==Il;)Il=gs(Il)}function vs(){for(;null!==Il&&!Mo();)Il=gs(Il)}function gs(e){var t=kl(e.alternate,e,Fl);return e.memoizedProps=e.pendingProps,null===t&&(t=bs(e)),Tl.current=null,t}function bs(e){Il=e;do{var t=Il.alternate;if(e=Il.return,0==(2048&Il.effectTag)){if(t=el(t,Il,Fl),1===Fl||1!==Il.childExpirationTime){for(var n=0,a=Il.child;null!==a;){var o=a.expirationTime,r=a.childExpirationTime;o>n&&(n=o),r>n&&(n=r),a=a.sibling}Il.childExpirationTime=n}if(null!==t)return t;null!==e&&0==(2048&e.effectTag)&&(null===e.firstEffect&&(e.firstEffect=Il.firstEffect),null!==Il.lastEffect&&(null!==e.lastEffect&&(e.lastEffect.nextEffect=Il.firstEffect),e.lastEffect=Il.lastEffect),1<Il.effectTag&&(null!==e.lastEffect?e.lastEffect.nextEffect=Il:e.firstEffect=Il,e.lastEffect=Il))}else{if(null!==(t=tl(Il)))return t.effectTag&=2047,t;null!==e&&(e.firstEffect=e.lastEffect=null,e.effectTag|=2048)}if(null!==(t=Il.sibling))return t;Il=e}while(null!==Il);return Ll===Cl&&(Ll=5),null}function xs(e){var t=e.expirationTime;return t>(e=e.childExpirationTime)?t:e}function ws(e){var t=Vo();return qo(99,ys.bind(null,e,t)),null}function ys(e,t){do{Es()}while(null!==Kl);if(0!=(48&Al))throw Error(i(327));var n=e.finishedWork,a=e.finishedExpirationTime;if(null===n)return null;if(e.finishedWork=null,e.finishedExpirationTime=0,n===e.current)throw Error(i(177));e.callbackNode=null,e.callbackExpirationTime=0,e.callbackPriority=90,e.nextKnownPendingLevel=0;var o=xs(n);if(e.firstPendingTime=o,a<=e.lastSuspendedTime?e.firstSuspendedTime=e.lastSuspendedTime=e.nextKnownPendingLevel=0:a<=e.firstSuspendedTime&&(e.firstSuspendedTime=a-1),a<=e.lastPingedTime&&(e.lastPingedTime=0),a<=e.lastExpiredTime&&(e.lastExpiredTime=0),e===Rl&&(Il=Rl=null,Fl=0),1<n.effectTag?null!==n.lastEffect?(n.lastEffect.nextEffect=n,o=n.firstEffect):o=n:o=n.firstEffect,null!==o){var r=Al;Al|=Ol,Tl.current=null,xn=qt;var l=hn();if(vn(l)){if("selectionStart"in l)var s={start:l.selectionStart,end:l.selectionEnd};else e:{var c=(s=(s=l.ownerDocument)&&s.defaultView||window).getSelection&&s.getSelection();if(c&&0!==c.rangeCount){s=c.anchorNode;var u=c.anchorOffset,p=c.focusNode;c=c.focusOffset;try{s.nodeType,p.nodeType}catch(_){s=null;break e}var d=0,f=-1,m=-1,h=0,v=0,g=l,b=null;t:for(;;){for(var x;g!==s||0!==u&&3!==g.nodeType||(f=d+u),g!==p||0!==c&&3!==g.nodeType||(m=d+c),3===g.nodeType&&(d+=g.nodeValue.length),null!==(x=g.firstChild);)b=g,g=x;for(;;){if(g===l)break t;if(b===s&&++h===u&&(f=d),b===p&&++v===c&&(m=d),null!==(x=g.nextSibling))break;b=(g=b).parentNode}g=x}s=-1===f||-1===m?null:{start:f,end:m}}else s=null}s=s||{start:0,end:0}}else s=null;wn={activeElementDetached:null,focusedElem:l,selectionRange:s},qt=!1,Hl=o;do{try{ks()}catch(_){if(null===Hl)throw Error(i(330));_s(Hl,_),Hl=Hl.nextEffect}}while(null!==Hl);Hl=o;do{try{for(l=e,s=t;null!==Hl;){var w=Hl.effectTag;if(16&w&&Ue(Hl.stateNode,""),128&w){var y=Hl.alternate;if(null!==y){var k=y.ref;null!==k&&("function"==typeof k?k(null):k.current=null)}}switch(1038&w){case 2:fl(Hl),Hl.effectTag&=-3;break;case 6:fl(Hl),Hl.effectTag&=-3,gl(Hl.alternate,Hl);break;case 1024:Hl.effectTag&=-1025;break;case 1028:Hl.effectTag&=-1025,gl(Hl.alternate,Hl);break;case 4:gl(Hl.alternate,Hl);break;case 8:vl(l,u=Hl,s),pl(u)}Hl=Hl.nextEffect}}catch(_){if(null===Hl)throw Error(i(330));_s(Hl,_),Hl=Hl.nextEffect}}while(null!==Hl);if(k=wn,y=hn(),w=k.focusedElem,s=k.selectionRange,y!==w&&w&&w.ownerDocument&&mn(w.ownerDocument.documentElement,w)){null!==s&&vn(w)&&(y=s.start,void 0===(k=s.end)&&(k=y),"selectionStart"in w?(w.selectionStart=y,w.selectionEnd=Math.min(k,w.value.length)):(k=(y=w.ownerDocument||document)&&y.defaultView||window).getSelection&&(k=k.getSelection(),u=w.textContent.length,l=Math.min(s.start,u),s=void 0===s.end?l:Math.min(s.end,u),!k.extend&&l>s&&(u=s,s=l,l=u),u=fn(w,l),p=fn(w,s),u&&p&&(1!==k.rangeCount||k.anchorNode!==u.node||k.anchorOffset!==u.offset||k.focusNode!==p.node||k.focusOffset!==p.offset)&&((y=y.createRange()).setStart(u.node,u.offset),k.removeAllRanges(),l>s?(k.addRange(y),k.extend(p.node,p.offset)):(y.setEnd(p.node,p.offset),k.addRange(y))))),y=[];for(k=w;k=k.parentNode;)1===k.nodeType&&y.push({element:k,left:k.scrollLeft,top:k.scrollTop});for("function"==typeof w.focus&&w.focus(),w=0;w<y.length;w++)(k=y[w]).element.scrollLeft=k.left,k.element.scrollTop=k.top}qt=!!xn,wn=xn=null,e.current=n,Hl=o;do{try{for(w=e;null!==Hl;){var E=Hl.effectTag;if(36&E&&cl(w,Hl.alternate,Hl),128&E){y=void 0;var S=Hl.ref;if(null!==S){var T=Hl.stateNode;switch(Hl.tag){case 5:y=T;break;default:y=T}"function"==typeof S?S(y):S.current=y}}Hl=Hl.nextEffect}}catch(_){if(null===Hl)throw Error(i(330));_s(Hl,_),Hl=Hl.nextEffect}}while(null!==Hl);Hl=null,zo(),Al=r}else e.current=n;if(ql)ql=!1,Kl=e,Ql=t;else for(Hl=o;null!==Hl;)t=Hl.nextEffect,Hl.nextEffect=null,Hl=t;if(0===(t=e.firstPendingTime)&&(Gl=null),1073741823===t?e===Zl?Xl++:(Xl=0,Zl=e):Xl=0,"function"==typeof Ps&&Ps(n.stateNode,a),rs(e),Wl)throw Wl=!1,e=Vl,Vl=null,e;return 0!=(8&Al)||Yo(),null}function ks(){for(;null!==Hl;){var e=Hl.effectTag;0!=(256&e)&&il(Hl.alternate,Hl),0==(512&e)||ql||(ql=!0,Ko(97,(function(){return Es(),null}))),Hl=Hl.nextEffect}}function Es(){if(90!==Ql){var e=97<Ql?97:Ql;return Ql=90,qo(e,Ss)}}function Ss(){if(null===Kl)return!1;var e=Kl;if(Kl=null,0!=(48&Al))throw Error(i(331));var t=Al;for(Al|=Ol,e=e.current.firstEffect;null!==e;){try{var n=e;if(0!=(512&n.effectTag))switch(n.tag){case 0:case 11:case 15:case 22:ll(5,n),sl(5,n)}}catch(a){if(null===e)throw Error(i(330));_s(e,a)}n=e.nextEffect,e.nextEffect=null,e=n}return Al=t,Yo(),!0}function Ts(e,t,n){fr(e,t=wl(e,t=nl(n,t),1073741823)),null!==(e=as(e,1073741823))&&rs(e)}function _s(e,t){if(3===e.tag)Ts(e,e,t);else for(var n=e.return;null!==n;){if(3===n.tag){Ts(n,e,t);break}if(1===n.tag){var a=n.stateNode;if("function"==typeof n.type.getDerivedStateFromError||"function"==typeof a.componentDidCatch&&(null===Gl||!Gl.has(a))){fr(n,e=yl(n,e=nl(t,e),1073741823)),null!==(n=as(n,1073741823))&&rs(n);break}}n=n.return}}function Os(e,t,n){var a=e.pingCache;null!==a&&a.delete(t),Rl===e&&Fl===n?Ll===Nl||Ll===Pl&&1073741823===jl&&Wo()-Bl<500?us(e,Fl):Ul=!0:$s(e,n)&&(0!==(t=e.lastPingedTime)&&t<n||(e.lastPingedTime=n,rs(e)))}function Cs(e,t){var n=e.stateNode;null!==n&&n.delete(t),0===(t=0)&&(t=ts(t=es(),e,null)),null!==(e=as(e,t))&&rs(e)}kl=function(e,t,n){var a=t.expirationTime;if(null!==e){var o=t.pendingProps;if(e.memoizedProps!==o||go.current)Fi=!0;else{if(a<n){switch(Fi=!1,t.tag){case 3:Hi(t),Ri();break;case 5:if(Mr(t),4&t.mode&&1!==n&&o.hidden)return t.expirationTime=t.childExpirationTime=1,null;break;case 1:wo(t.type)&&So(t);break;case 4:Dr(t,t.stateNode.containerInfo);break;case 10:a=t.memoizedProps.value,o=t.type._context,mo(er,o._currentValue),o._currentValue=a;break;case 13:if(null!==t.memoizedState)return 0!==(a=t.child.childExpirationTime)&&a>=n?Ki(e,t,n):(mo($r,1&$r.current),null!==(t=Zi(e,t,n))?t.sibling:null);mo($r,1&$r.current);break;case 19:if(a=t.childExpirationTime>=n,0!=(64&e.effectTag)){if(a)return Xi(e,t,n);t.effectTag|=64}if(null!==(o=t.memoizedState)&&(o.rendering=null,o.tail=null),mo($r,$r.current),!a)return null}return Zi(e,t,n)}Fi=!1}}else Fi=!1;switch(t.expirationTime=0,t.tag){case 2:if(a=t.type,null!==e&&(e.alternate=null,t.alternate=null,t.effectTag|=2),e=t.pendingProps,o=xo(t,vo.current),lr(t,n),o=Zr(null,t,a,e,o,n),t.effectTag|=1,"object"==typeof o&&null!==o&&"function"==typeof o.render&&void 0===o.$$typeof){if(t.tag=1,t.memoizedState=null,t.updateQueue=null,wo(a)){var r=!0;So(t)}else r=!1;t.memoizedState=null!==o.state&&void 0!==o.state?o.state:null,ur(t);var l=a.getDerivedStateFromProps;"function"==typeof l&&xr(t,a,l,e),o.updater=wr,t.stateNode=o,o._reactInternalFiber=t,Sr(t,a,e,n),t=Bi(null,t,a,!0,r,n)}else t.tag=0,Li(null,t,o,n),t=t.child;return t;case 16:e:{if(o=t.elementType,null!==e&&(e.alternate=null,t.alternate=null,t.effectTag|=2),e=t.pendingProps,function(e){if(-1===e._status){e._status=0;var t=e._ctor;t=t(),e._result=t,t.then((function(t){0===e._status&&(t=t.default,e._status=1,e._result=t)}),(function(t){0===e._status&&(e._status=2,e._result=t)}))}}(o),1!==o._status)throw o._result;switch(o=o._result,t.type=o,r=t.tag=function(e){if("function"==typeof e)return Is(e)?1:0;if(null!=e){if((e=e.$$typeof)===se)return 11;if(e===pe)return 14}return 2}(o),e=Jo(o,e),r){case 0:t=$i(null,t,o,e,n);break e;case 1:t=Ui(null,t,o,e,n);break e;case 11:t=Di(null,t,o,e,n);break e;case 14:t=ji(null,t,o,Jo(o.type,e),a,n);break e}throw Error(i(306,o,""))}return t;case 0:return a=t.type,o=t.pendingProps,$i(e,t,a,o=t.elementType===a?o:Jo(a,o),n);case 1:return a=t.type,o=t.pendingProps,Ui(e,t,a,o=t.elementType===a?o:Jo(a,o),n);case 3:if(Hi(t),a=t.updateQueue,null===e||null===a)throw Error(i(282));if(a=t.pendingProps,o=null!==(o=t.memoizedState)?o.element:null,pr(e,t),hr(t,a,null,n),(a=t.memoizedState.element)===o)Ri(),t=Zi(e,t,n);else{if((o=t.stateNode.hydrate)&&(Ti=Tn(t.stateNode.containerInfo.firstChild),Si=t,o=_i=!0),o)for(n=Nr(t,null,a,n),t.child=n;n;)n.effectTag=-3&n.effectTag|1024,n=n.sibling;else Li(e,t,a,n),Ri();t=t.child}return t;case 5:return Mr(t),null===e&&Pi(t),a=t.type,o=t.pendingProps,r=null!==e?e.memoizedProps:null,l=o.children,kn(a,o)?l=null:null!==r&&kn(a,r)&&(t.effectTag|=16),zi(e,t),4&t.mode&&1!==n&&o.hidden?(t.expirationTime=t.childExpirationTime=1,t=null):(Li(e,t,l,n),t=t.child),t;case 6:return null===e&&Pi(t),null;case 13:return Ki(e,t,n);case 4:return Dr(t,t.stateNode.containerInfo),a=t.pendingProps,null===e?t.child=Pr(t,null,a,n):Li(e,t,a,n),t.child;case 11:return a=t.type,o=t.pendingProps,Di(e,t,a,o=t.elementType===a?o:Jo(a,o),n);case 7:return Li(e,t,t.pendingProps,n),t.child;case 8:case 12:return Li(e,t,t.pendingProps.children,n),t.child;case 10:e:{a=t.type._context,o=t.pendingProps,l=t.memoizedProps,r=o.value;var s=t.type._context;if(mo(er,s._currentValue),s._currentValue=r,null!==l)if(s=l.value,0===(r=Ua(s,r)?0:0|("function"==typeof a._calculateChangedBits?a._calculateChangedBits(s,r):1073741823))){if(l.children===o.children&&!go.current){t=Zi(e,t,n);break e}}else for(null!==(s=t.child)&&(s.return=t);null!==s;){var c=s.dependencies;if(null!==c){l=s.child;for(var u=c.firstContext;null!==u;){if(u.context===a&&0!=(u.observedBits&r)){1===s.tag&&((u=dr(n,null)).tag=2,fr(s,u)),s.expirationTime<n&&(s.expirationTime=n),null!==(u=s.alternate)&&u.expirationTime<n&&(u.expirationTime=n),ir(s.return,n),c.expirationTime<n&&(c.expirationTime=n);break}u=u.next}}else l=10===s.tag&&s.type===t.type?null:s.child;if(null!==l)l.return=s;else for(l=s;null!==l;){if(l===t){l=null;break}if(null!==(s=l.sibling)){s.return=l.return,l=s;break}l=l.return}s=l}Li(e,t,o.children,n),t=t.child}return t;case 9:return o=t.type,a=(r=t.pendingProps).children,lr(t,n),a=a(o=sr(o,r.unstable_observedBits)),t.effectTag|=1,Li(e,t,a,n),t.child;case 14:return r=Jo(o=t.type,t.pendingProps),ji(e,t,o,r=Jo(o.type,r),a,n);case 15:return Mi(e,t,t.type,t.pendingProps,a,n);case 17:return a=t.type,o=t.pendingProps,o=t.elementType===a?o:Jo(a,o),null!==e&&(e.alternate=null,t.alternate=null,t.effectTag|=2),t.tag=1,wo(a)?(e=!0,So(t)):e=!1,lr(t,n),kr(t,a,o),Sr(t,a,o,n),Bi(null,t,a,!0,e,n);case 19:return Xi(e,t,n)}throw Error(i(156,t.tag))};var Ps=null,Ns=null;function As(e,t,n,a){this.tag=e,this.key=n,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.ref=null,this.pendingProps=t,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=a,this.effectTag=0,this.lastEffect=this.firstEffect=this.nextEffect=null,this.childExpirationTime=this.expirationTime=0,this.alternate=null}function Rs(e,t,n,a){return new As(e,t,n,a)}function Is(e){return!(!(e=e.prototype)||!e.isReactComponent)}function Fs(e,t){var n=e.alternate;return null===n?((n=Rs(e.tag,t,e.key,e.mode)).elementType=e.elementType,n.type=e.type,n.stateNode=e.stateNode,n.alternate=e,e.alternate=n):(n.pendingProps=t,n.effectTag=0,n.nextEffect=null,n.firstEffect=null,n.lastEffect=null),n.childExpirationTime=e.childExpirationTime,n.expirationTime=e.expirationTime,n.child=e.child,n.memoizedProps=e.memoizedProps,n.memoizedState=e.memoizedState,n.updateQueue=e.updateQueue,t=e.dependencies,n.dependencies=null===t?null:{expirationTime:t.expirationTime,firstContext:t.firstContext,responders:t.responders},n.sibling=e.sibling,n.index=e.index,n.ref=e.ref,n}function Ls(e,t,n,a,o,r){var l=2;if(a=e,"function"==typeof e)Is(e)&&(l=1);else if("string"==typeof e)l=5;else e:switch(e){case ne:return Ds(n.children,o,r,t);case le:l=8,o|=7;break;case ae:l=8,o|=1;break;case oe:return(e=Rs(12,n,t,8|o)).elementType=oe,e.type=oe,e.expirationTime=r,e;case ce:return(e=Rs(13,n,t,o)).type=ce,e.elementType=ce,e.expirationTime=r,e;case ue:return(e=Rs(19,n,t,o)).elementType=ue,e.expirationTime=r,e;default:if("object"==typeof e&&null!==e)switch(e.$$typeof){case re:l=10;break e;case ie:l=9;break e;case se:l=11;break e;case pe:l=14;break e;case de:l=16,a=null;break e;case fe:l=22;break e}throw Error(i(130,null==e?e:typeof e,""))}return(t=Rs(l,n,t,o)).elementType=e,t.type=a,t.expirationTime=r,t}function Ds(e,t,n,a){return(e=Rs(7,e,a,t)).expirationTime=n,e}function js(e,t,n){return(e=Rs(6,e,null,t)).expirationTime=n,e}function Ms(e,t,n){return(t=Rs(4,null!==e.children?e.children:[],e.key,t)).expirationTime=n,t.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},t}function zs(e,t,n){this.tag=t,this.current=null,this.containerInfo=e,this.pingCache=this.pendingChildren=null,this.finishedExpirationTime=0,this.finishedWork=null,this.timeoutHandle=-1,this.pendingContext=this.context=null,this.hydrate=n,this.callbackNode=null,this.callbackPriority=90,this.lastExpiredTime=this.lastPingedTime=this.nextKnownPendingLevel=this.lastSuspendedTime=this.firstSuspendedTime=this.firstPendingTime=0}function $s(e,t){var n=e.firstSuspendedTime;return e=e.lastSuspendedTime,0!==n&&n>=t&&e<=t}function Us(e,t){var n=e.firstSuspendedTime,a=e.lastSuspendedTime;n<t&&(e.firstSuspendedTime=t),(a>t||0===n)&&(e.lastSuspendedTime=t),t<=e.lastPingedTime&&(e.lastPingedTime=0),t<=e.lastExpiredTime&&(e.lastExpiredTime=0)}function Bs(e,t){t>e.firstPendingTime&&(e.firstPendingTime=t);var n=e.firstSuspendedTime;0!==n&&(t>=n?e.firstSuspendedTime=e.lastSuspendedTime=e.nextKnownPendingLevel=0:t>=e.lastSuspendedTime&&(e.lastSuspendedTime=t+1),t>e.nextKnownPendingLevel&&(e.nextKnownPendingLevel=t))}function Hs(e,t){var n=e.lastExpiredTime;(0===n||n>t)&&(e.lastExpiredTime=t)}function Ws(e,t,n,a){var o=t.current,r=es(),l=gr.suspense;r=ts(r,o,l);e:if(n){t:{if(et(n=n._reactInternalFiber)!==n||1!==n.tag)throw Error(i(170));var s=n;do{switch(s.tag){case 3:s=s.stateNode.context;break t;case 1:if(wo(s.type)){s=s.stateNode.__reactInternalMemoizedMergedChildContext;break t}}s=s.return}while(null!==s);throw Error(i(171))}if(1===n.tag){var c=n.type;if(wo(c)){n=Eo(n,c,s);break e}}n=s}else n=ho;return null===t.context?t.context=n:t.pendingContext=n,(t=dr(r,l)).payload={element:e},null!==(a=void 0===a?null:a)&&(t.callback=a),fr(o,t),ns(o,r),r}function Vs(e){if(!(e=e.current).child)return null;switch(e.child.tag){case 5:default:return e.child.stateNode}}function Gs(e,t){null!==(e=e.memoizedState)&&null!==e.dehydrated&&e.retryTime<t&&(e.retryTime=t)}function qs(e,t){Gs(e,t),(e=e.alternate)&&Gs(e,t)}function Ks(e,t,n){var a=new zs(e,t,n=null!=n&&!0===n.hydrate),o=Rs(3,null,null,2===t?7:1===t?3:0);a.current=o,o.stateNode=a,ur(o),e[Nn]=a.current,n&&0!==t&&function(e,t){var n=Je(t);Ot.forEach((function(e){ht(e,t,n)})),Ct.forEach((function(e){ht(e,t,n)}))}(0,9===e.nodeType?e:e.ownerDocument),this._internalRoot=a}function Qs(e){return!(!e||1!==e.nodeType&&9!==e.nodeType&&11!==e.nodeType&&(8!==e.nodeType||" react-mount-point-unstable "!==e.nodeValue))}function Ys(e,t,n,a,o){var r=n._reactRootContainer;if(r){var i=r._internalRoot;if("function"==typeof o){var l=o;o=function(){var e=Vs(i);l.call(e)}}Ws(t,i,e,o)}else{if(r=n._reactRootContainer=function(e,t){if(t||(t=!(!(t=e?9===e.nodeType?e.documentElement:e.firstChild:null)||1!==t.nodeType||!t.hasAttribute("data-reactroot"))),!t)for(var n;n=e.lastChild;)e.removeChild(n);return new Ks(e,0,t?{hydrate:!0}:void 0)}(n,a),i=r._internalRoot,"function"==typeof o){var s=o;o=function(){var e=Vs(i);s.call(e)}}cs((function(){Ws(t,i,e,o)}))}return Vs(i)}function Xs(e,t,n){var a=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return{$$typeof:te,key:null==a?null:""+a,children:e,containerInfo:t,implementation:n}}function Zs(e,t){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!Qs(t))throw Error(i(200));return Xs(e,t,null,n)}Ks.prototype.render=function(e){Ws(e,this._internalRoot,null,null)},Ks.prototype.unmount=function(){var e=this._internalRoot,t=e.containerInfo;Ws(null,e,null,(function(){t[Nn]=null}))},vt=function(e){if(13===e.tag){var t=Zo(es(),150,100);ns(e,t),qs(e,t)}},gt=function(e){13===e.tag&&(ns(e,3),qs(e,3))},bt=function(e){if(13===e.tag){var t=es();ns(e,t=ts(t,e,null)),qs(e,t)}},C=function(e,t,n){switch(t){case"input":if(Te(e,n),t=n.name,"radio"===n.type&&null!=t){for(n=e;n.parentNode;)n=n.parentNode;for(n=n.querySelectorAll("input[name="+JSON.stringify(""+t)+'][type="radio"]'),t=0;t<n.length;t++){var a=n[t];if(a!==e&&a.form===e.form){var o=Fn(a);if(!o)throw Error(i(90));ye(a),Te(a,o)}}}break;case"textarea":Re(e,n);break;case"select":null!=(t=n.value)&&Pe(e,!!n.multiple,t,!1)}},F=ss,L=function(e,t,n,a,o){var r=Al;Al|=4;try{return qo(98,e.bind(null,t,n,a,o))}finally{0===(Al=r)&&Yo()}},D=function(){0==(49&Al)&&(function(){if(null!==Yl){var e=Yl;Yl=null,e.forEach((function(e,t){Hs(t,e),rs(t)})),Yo()}}(),Es())},j=function(e,t){var n=Al;Al|=2;try{return e(t)}finally{0===(Al=n)&&Yo()}};var Js={Events:[Rn,In,Fn,_,E,Un,function(e){rt(e,$n)},R,I,Zt,st,Es,{current:!1}]};!function(e){var t=e.findFiberByHostInstance;(function(e){if("undefined"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__)return!1;var t=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(t.isDisabled||!t.supportsFiber)return!0;try{var n=t.inject(e);Ps=function(e){try{t.onCommitFiberRoot(n,e,void 0,64==(64&e.current.effectTag))}catch(a){}},Ns=function(e){try{t.onCommitFiberUnmount(n,e)}catch(a){}}}catch(a){}})(o({},e,{overrideHookState:null,overrideProps:null,setSuspenseHandler:null,scheduleUpdate:null,currentDispatcherRef:Y.ReactCurrentDispatcher,findHostInstanceByFiber:function(e){return null===(e=at(e))?null:e.stateNode},findFiberByHostInstance:function(e){return t?t(e):null},findHostInstancesForRefresh:null,scheduleRefresh:null,scheduleRoot:null,setRefreshHandler:null,getCurrentFiber:null}))}({findFiberByHostInstance:An,bundleType:0,version:"16.13.1",rendererPackageName:"react-dom"}),t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=Js,t.createPortal=Zs,t.findDOMNode=function(e){if(null==e)return null;if(1===e.nodeType)return e;var t=e._reactInternalFiber;if(void 0===t){if("function"==typeof e.render)throw Error(i(188));throw Error(i(268,Object.keys(e)))}return e=null===(e=at(t))?null:e.stateNode},t.flushSync=function(e,t){if(0!=(48&Al))throw Error(i(187));var n=Al;Al|=1;try{return qo(99,e.bind(null,t))}finally{Al=n,Yo()}},t.hydrate=function(e,t,n){if(!Qs(t))throw Error(i(200));return Ys(null,e,t,!0,n)},t.render=function(e,t,n){if(!Qs(t))throw Error(i(200));return Ys(null,e,t,!1,n)},t.unmountComponentAtNode=function(e){if(!Qs(e))throw Error(i(40));return!!e._reactRootContainer&&(cs((function(){Ys(null,null,e,!1,(function(){e._reactRootContainer=null,e[Nn]=null}))})),!0)},t.unstable_batchedUpdates=ss,t.unstable_createPortal=function(e,t){return Zs(e,t,2<arguments.length&&void 0!==arguments[2]?arguments[2]:null)},t.unstable_renderSubtreeIntoContainer=function(e,t,n,a){if(!Qs(n))throw Error(i(200));if(null==e||void 0===e._reactInternalFiber)throw Error(i(38));return Ys(e,t,n,!1,a)},t.version="16.13.1"},function(e,t,n){"use strict";e.exports=n(33)},function(e,t,n){"use strict";var a,o,r,i,l;if("undefined"==typeof window||"function"!=typeof MessageChannel){var s=null,c=null,u=function(){if(null!==s)try{var e=t.unstable_now();s(!0,e),s=null}catch(n){throw setTimeout(u,0),n}},p=Date.now();t.unstable_now=function(){return Date.now()-p},a=function(e){null!==s?setTimeout(a,0,e):(s=e,setTimeout(u,0))},o=function(e,t){c=setTimeout(e,t)},r=function(){clearTimeout(c)},i=function(){return!1},l=t.unstable_forceFrameRate=function(){}}else{var d=window.performance,f=window.Date,m=window.setTimeout,h=window.clearTimeout;if("undefined"!=typeof console){var v=window.cancelAnimationFrame;"function"!=typeof window.requestAnimationFrame&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"),"function"!=typeof v&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills")}if("object"==typeof d&&"function"==typeof d.now)t.unstable_now=function(){return d.now()};else{var g=f.now();t.unstable_now=function(){return f.now()-g}}var b=!1,x=null,w=-1,y=5,k=0;i=function(){return t.unstable_now()>=k},l=function(){},t.unstable_forceFrameRate=function(e){0>e||125<e?console.error("forceFrameRate takes a positive int between 0 and 125, forcing framerates higher than 125 fps is not unsupported"):y=0<e?Math.floor(1e3/e):5};var E=new MessageChannel,S=E.port2;E.port1.onmessage=function(){if(null!==x){var e=t.unstable_now();k=e+y;try{x(!0,e)?S.postMessage(null):(b=!1,x=null)}catch(n){throw S.postMessage(null),n}}else b=!1},a=function(e){x=e,b||(b=!0,S.postMessage(null))},o=function(e,n){w=m((function(){e(t.unstable_now())}),n)},r=function(){h(w),w=-1}}function T(e,t){var n=e.length;e.push(t);e:for(;;){var a=n-1>>>1,o=e[a];if(!(void 0!==o&&0<C(o,t)))break e;e[a]=t,e[n]=o,n=a}}function _(e){return void 0===(e=e[0])?null:e}function O(e){var t=e[0];if(void 0!==t){var n=e.pop();if(n!==t){e[0]=n;e:for(var a=0,o=e.length;a<o;){var r=2*(a+1)-1,i=e[r],l=r+1,s=e[l];if(void 0!==i&&0>C(i,n))void 0!==s&&0>C(s,i)?(e[a]=s,e[l]=n,a=l):(e[a]=i,e[r]=n,a=r);else{if(!(void 0!==s&&0>C(s,n)))break e;e[a]=s,e[l]=n,a=l}}}return t}return null}function C(e,t){var n=e.sortIndex-t.sortIndex;return 0!==n?n:e.id-t.id}var P=[],N=[],A=1,R=null,I=3,F=!1,L=!1,D=!1;function j(e){for(var t=_(N);null!==t;){if(null===t.callback)O(N);else{if(!(t.startTime<=e))break;O(N),t.sortIndex=t.expirationTime,T(P,t)}t=_(N)}}function M(e){if(D=!1,j(e),!L)if(null!==_(P))L=!0,a(z);else{var t=_(N);null!==t&&o(M,t.startTime-e)}}function z(e,n){L=!1,D&&(D=!1,r()),F=!0;var a=I;try{for(j(n),R=_(P);null!==R&&(!(R.expirationTime>n)||e&&!i());){var l=R.callback;if(null!==l){R.callback=null,I=R.priorityLevel;var s=l(R.expirationTime<=n);n=t.unstable_now(),"function"==typeof s?R.callback=s:R===_(P)&&O(P),j(n)}else O(P);R=_(P)}if(null!==R)var c=!0;else{var u=_(N);null!==u&&o(M,u.startTime-n),c=!1}return c}finally{R=null,I=a,F=!1}}function $(e){switch(e){case 1:return-1;case 2:return 250;case 5:return 1073741823;case 4:return 1e4;default:return 5e3}}var U=l;t.unstable_IdlePriority=5,t.unstable_ImmediatePriority=1,t.unstable_LowPriority=4,t.unstable_NormalPriority=3,t.unstable_Profiling=null,t.unstable_UserBlockingPriority=2,t.unstable_cancelCallback=function(e){e.callback=null},t.unstable_continueExecution=function(){L||F||(L=!0,a(z))},t.unstable_getCurrentPriorityLevel=function(){return I},t.unstable_getFirstCallbackNode=function(){return _(P)},t.unstable_next=function(e){switch(I){case 1:case 2:case 3:var t=3;break;default:t=I}var n=I;I=t;try{return e()}finally{I=n}},t.unstable_pauseExecution=function(){},t.unstable_requestPaint=U,t.unstable_runWithPriority=function(e,t){switch(e){case 1:case 2:case 3:case 4:case 5:break;default:e=3}var n=I;I=e;try{return t()}finally{I=n}},t.unstable_scheduleCallback=function(e,n,i){var l=t.unstable_now();if("object"==typeof i&&null!==i){var s=i.delay;s="number"==typeof s&&0<s?l+s:l,i="number"==typeof i.timeout?i.timeout:$(e)}else i=$(e),s=l;return e={id:A++,callback:n,priorityLevel:e,startTime:s,expirationTime:i=s+i,sortIndex:-1},s>l?(e.sortIndex=s,T(N,e),null===_(P)&&e===_(N)&&(D?r():D=!0,o(M,s-l))):(e.sortIndex=i,T(P,e),L||F||(L=!0,a(z))),e},t.unstable_shouldYield=function(){var e=t.unstable_now();j(e);var n=_(P);return n!==R&&null!==R&&null!==n&&null!==n.callback&&n.startTime<=e&&n.expirationTime<R.expirationTime||i()},t.unstable_wrapCallback=function(e){var t=I;return function(){var n=I;I=t;try{return e.apply(this,arguments)}finally{I=n}}}},function(e,t,n){"use strict";var a=n(35);function o(){}function r(){}r.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,r,i){if(i!==a){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:r,resetWarningCache:o};return n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t){e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},function(e,t,n){"use strict";var a="function"==typeof Symbol&&Symbol.for,o=a?Symbol.for("react.element"):60103,r=a?Symbol.for("react.portal"):60106,i=a?Symbol.for("react.fragment"):60107,l=a?Symbol.for("react.strict_mode"):60108,s=a?Symbol.for("react.profiler"):60114,c=a?Symbol.for("react.provider"):60109,u=a?Symbol.for("react.context"):60110,p=a?Symbol.for("react.async_mode"):60111,d=a?Symbol.for("react.concurrent_mode"):60111,f=a?Symbol.for("react.forward_ref"):60112,m=a?Symbol.for("react.suspense"):60113,h=a?Symbol.for("react.suspense_list"):60120,v=a?Symbol.for("react.memo"):60115,g=a?Symbol.for("react.lazy"):60116,b=a?Symbol.for("react.block"):60121,x=a?Symbol.for("react.fundamental"):60117,w=a?Symbol.for("react.responder"):60118,y=a?Symbol.for("react.scope"):60119;function k(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case o:switch(e=e.type){case p:case d:case i:case s:case l:case m:return e;default:switch(e=e&&e.$$typeof){case u:case f:case g:case v:case c:return e;default:return t}}case r:return t}}}function E(e){return k(e)===d}t.AsyncMode=p,t.ConcurrentMode=d,t.ContextConsumer=u,t.ContextProvider=c,t.Element=o,t.ForwardRef=f,t.Fragment=i,t.Lazy=g,t.Memo=v,t.Portal=r,t.Profiler=s,t.StrictMode=l,t.Suspense=m,t.isAsyncMode=function(e){return E(e)||k(e)===p},t.isConcurrentMode=E,t.isContextConsumer=function(e){return k(e)===u},t.isContextProvider=function(e){return k(e)===c},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===o},t.isForwardRef=function(e){return k(e)===f},t.isFragment=function(e){return k(e)===i},t.isLazy=function(e){return k(e)===g},t.isMemo=function(e){return k(e)===v},t.isPortal=function(e){return k(e)===r},t.isProfiler=function(e){return k(e)===s},t.isStrictMode=function(e){return k(e)===l},t.isSuspense=function(e){return k(e)===m},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===i||e===d||e===s||e===l||e===m||e===h||"object"==typeof e&&null!==e&&(e.$$typeof===g||e.$$typeof===v||e.$$typeof===c||e.$$typeof===u||e.$$typeof===f||e.$$typeof===x||e.$$typeof===w||e.$$typeof===y||e.$$typeof===b)},t.typeOf=k},,function(e,t,n){var a={"./prism-toml":40};function o(e){var t=r(e);return n(t)}function r(e){if(!n.o(a,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return a[e]}o.keys=function(){return Object.keys(a)},o.resolve=r,e.exports=o,o.id=39},function(e,t){!function(e){var t=/(?:[\w-]+|'[^'\n\r]*'|"(?:\\.|[^\\"\r\n])*")/.source;function n(e){return e.replace(/__/g,(function(){return t}))}e.languages.toml={comment:{pattern:/#.*/,greedy:!0},table:{pattern:RegExp(n(/(^\s*\[\s*(?:\[\s*)?)__(?:\s*\.\s*__)*(?=\s*\])/.source),"m"),lookbehind:!0,greedy:!0,alias:"class-name"},key:{pattern:RegExp(n(/(^\s*|[{,]\s*)__(?:\s*\.\s*__)*(?=\s*=)/.source),"m"),lookbehind:!0,greedy:!0,alias:"property"},string:{pattern:/"""(?:\\[\s\S]|[^\\])*?"""|'''[\s\S]*?'''|'[^'\n\r]*'|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},date:[{pattern:/\b\d{4}-\d{2}-\d{2}(?:[T\s]\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|[+-]\d{2}:\d{2})?)?\b/i,alias:"number"},{pattern:/\b\d{2}:\d{2}:\d{2}(?:\.\d+)?\b/,alias:"number"}],number:/(?:\b0(?:x[\da-zA-Z]+(?:_[\da-zA-Z]+)*|o[0-7]+(?:_[0-7]+)*|b[10]+(?:_[10]+)*))\b|[-+]?\b\d+(?:_\d+)*(?:\.\d+(?:_\d+)*)?(?:[eE][+-]?\d+(?:_\d+)*)?\b|[-+]?\b(?:inf|nan)\b/,boolean:/\b(?:true|false)\b/,punctuation:/[.,=[\]{}]/}}(Prism)},,,function(e,t,n){"use strict";n.r(t);var a=n(0),o=n.n(a),r=n(24),i=n(13),l=n(16),s=n.n(l),c=({error:e,retry:t,pastDelay:n})=>e?o.a.createElement("div",{style:{align:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"}},o.a.createElement("p",null,e.message),o.a.createElement("div",null,o.a.createElement("button",{type:"button",onClick:t},"Retry"))):n?o.a.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"}},o.a.createElement("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb"},o.a.createElement("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2"},o.a.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},o.a.createElement("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),o.a.createElement("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),o.a.createElement("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),o.a.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},o.a.createElement("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),o.a.createElement("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),o.a.createElement("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),o.a.createElement("circle",{cx:"22",cy:"22",r:"8"},o.a.createElement("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"}))))):null,u=n(11),p={"01a85c17":[function(){return Promise.all([n.e(0),n.e(1),n.e(2),n.e(4)]).then(n.bind(null,56))},"@theme/BlogTagsListPage",56],"08f25880":[function(){return n.e(5).then(n.bind(null,57))},"@site/blog/2020-10-28-release.md",57],"0923c366":[function(){return n.e(6).then(n.bind(null,58))},"@site/docs/examples/upload.md",58],"0965cdf6":[function(){return n.e(7).then(n.bind(null,59))},"@site/docs/examples/dashboard.md",59],"0a6c0f5b":[function(){return n.e(8).then(n.bind(null,60))},"@site/docs/tutorial-monitor.md",60],"0eb58673":[function(){return n.e(9).then(n.t.bind(null,61,3))},"~blog/default/wave-blog-cb9.json",61],"0f2a58c8":[function(){return n.e(10).then(n.bind(null,62))},"@site/docs/examples/table-markdown.md",62],"0fd1debb":[function(){return n.e(11).then(n.bind(null,63))},"@site/docs/migrating-0.md",63],10172759:[function(){return n.e(12).then(n.bind(null,64))},"@site/docs/examples/label.md",64],"109e456e":[function(){return n.e(13).then(n.bind(null,65))},"@site/docs/examples/plot-bokeh.md",65],"11e3ce2c":[function(){return n.e(14).then(n.bind(null,66))},"@site/docs/examples/stat-tall-gauge.md",66],"121dd878":[function(){return n.e(15).then(n.t.bind(null,67,3))},"~blog/default/wave-blog-tags-tags-b85.json",67],"126e0b0e":[function(){return n.e(16).then(n.bind(null,68))},"@site/docs/examples/plot-area-range.md",68],"12e676cf":[function(){return n.e(17).then(n.bind(null,69))},"@site/docs/examples/plot-interval.md",69],"135cee2a":[function(){return n.e(18).then(n.bind(null,70))},"@site/docs/examples/table.md",70],"1375ade1":[function(){return n.e(19).then(n.bind(null,71))},"@site/docs/enterprise/developer-guide.md",71],"1486e3bc":[function(){return n.e(20).then(n.bind(null,72))},"@site/docs/examples/plot-d3.md",72],"15837ef3":[function(){return n.e(21).then(n.bind(null,73))},"@site/docs/examples/table-sort.md",73],"15a78352":[function(){return n.e(22).then(n.bind(null,45))},"@site/docs/_start_q.md",45],"174d8305":[function(){return n.e(23).then(n.bind(null,74))},"@site/docs/examples/wizard.md",74],17896441:[function(){return Promise.all([n.e(0),n.e(1),n.e(24)]).then(n.bind(null,288))},"@theme/DocItem",288],"17b5adee":[function(){return n.e(25).then(n.bind(null,76))},"@site/docs/examples/plot-step.md",76],"18fdb351":[function(){return n.e(26).then(n.bind(null,77))},"@site/docs/examples/glider-gun.md",77],"190e4f21":[function(){return n.e(27).then(n.bind(null,78))},"@site/docs/examples/plot-point-custom.md",78],"1a20bc57":[function(){return n.e(28).then(n.bind(null,79))},"@site/docs/cli.md",79],"1a4f1376":[function(){return n.e(29).then(n.bind(null,80))},"@site/docs/examples/picker-selection.md",80],"1ac8922b":[function(){return n.e(30).then(n.bind(null,81))},"@site/docs/examples/plot-point-groups.md",81],"1ae86ebe":[function(){return n.e(31).then(n.bind(null,82))},"@site/docs/examples/message-bar.md",82],"1b0f8c91":[function(){return n.e(32).then(n.bind(null,83))},"@site/docs/backup.md",83],"1be78505":[function(){return Promise.all([n.e(0),n.e(1),n.e(2),n.e(237)]).then(n.bind(null,289))},"@theme/DocPage",289],"1c59264e":[function(){return n.e(33).then(n.bind(null,86))},"@site/docs/examples/swatch-picker.md",86],"1cc3ff79":[function(){return n.e(34).then(n.bind(null,87))},"@site/docs/examples/plot-point-sizes.md",87],"1f7c204c":[function(){return n.e(35).then(n.bind(null,88))},"@site/docs/components.md",88],"207f87c1":[function(){return n.e(36).then(n.bind(null,89))},"@site/docs/examples/header.md",89],"22188a36":[function(){return n.e(37).then(n.bind(null,90))},"@site/docs/examples/plot-interval-stacked.md",90],"2673e11f":[function(){return n.e(38).then(n.bind(null,91))},"@site/docs/examples/plot-altair.md",91],26907763:[function(){return n.e(39).then(n.bind(null,92))},"@site/docs/examples/plot-step-before.md",92],"26a8c297":[function(){return n.e(40).then(n.bind(null,93))},"@site/docs/api/cli.md",93],"273cfbdf":[function(){return n.e(41).then(n.bind(null,94))},"@site/docs/examples/plot-area-negative.md",94],"28283d16":[function(){return n.e(42).then(n.bind(null,95))},"@site/docs/api/autoreload.md",95],"296a8b4f":[function(){return n.e(43).then(n.bind(null,96))},"@site/docs/api/server.md",96],"2bf08973":[function(){return n.e(44).then(n.bind(null,97))},"@site/docs/examples/template.md",97],"2db704cb":[function(){return n.e(45).then(n.bind(null,98))},"@site/docs/examples/plot-interval-polar-stacked.md",98],"2dd92585":[function(){return n.e(46).then(n.t.bind(null,99,3))},"~blog/default/wave-blog-tags-release-7e7.json",99],"2e8e6962":[function(){return n.e(47).then(n.bind(null,100))},"@site/docs/examples/background-executor.md",100],"2fa9e1ff":[function(){return n.e(48).then(n.bind(null,101))},"@site/docs/examples/plot-path.md",101],"31c3c419":[function(){return n.e(49).then(n.bind(null,102))},"@site/docs/examples/plot-interval-theta.md",102],"31f8b56c":[function(){return n.e(50).then(n.bind(null,103))},"@site/docs/examples/plot-area.md",103],"34cd3da4":[function(){return n.e(51).then(n.bind(null,104))},"@site/docs/examples/plot-point.md",104],"3584c003":[function(){return n.e(52).then(n.bind(null,105))},"@site/docs/examples/meta-redirect.md",105],"35dabcf3":[function(){return n.e(53).then(n.bind(null,106))},"@site/docs/examples/textbox-trigger.md",106],"360edac9":[function(){return n.e(54).then(n.bind(null,107))},"@site/docs/examples/stat-wide-series-interval.md",107],"3697284d":[function(){return n.e(55).then(n.bind(null,108))},"@site/docs/examples/plot-vegalite-update.md",108],"36db7894":[function(){return n.e(56).then(n.bind(null,109))},"@site/docs/examples/tab-routing.md",109],"36fe3260":[function(){return n.e(57).then(n.bind(null,110))},"@site/docs/api/core.md",110],"3713dbfc":[function(){return n.e(58).then(n.bind(null,111))},"@site/docs/browser-testing.md",111],"37382beb":[function(){return n.e(59).then(n.bind(null,112))},"@site/docs/examples/pixel-art.md",112],38067279:[function(){return n.e(60).then(n.bind(null,113))},"@site/docs/examples/plot-point-map.md",113],"3aa768f5":[function(){return n.e(61).then(n.bind(null,114))},"@site/docs/examples/file-upload.md",114],"3abe8fb9":[function(){return n.e(62).then(n.bind(null,115))},"@site/docs/logging.md",115],"3ae7008e":[function(){return n.e(63).then(n.bind(null,116))},"@site/docs/examples/site-async.md",116],"3b464fa6":[function(){return n.e(64).then(n.bind(null,117))},"@site/docs/expressions.md",117],"3b64911a":[function(){return n.e(65).then(n.bind(null,118))},"@site/docs/change-log.md",118],"3b8c55ea":[function(){return n.e(66).then(n.bind(null,119))},"@site/docs/installation.md",119],"3da9dc01":[function(){return n.e(67).then(n.bind(null,120))},"@site/docs/examples/background.md",120],"3f5dd320":[function(){return n.e(68).then(n.bind(null,121))},"@site/docs/examples/plot-line-labels-no-overlap.md",121],"4104f38c":[function(){return n.e(69).then(n.bind(null,122))},"@site/docs/examples/plot-vegalite-form.md",122],"41849bc6":[function(){return n.e(70).then(n.bind(null,123))},"@site/docs/examples/form-markup.md",123],"424c54c2":[function(){return n.e(71).then(n.bind(null,124))},"@site/docs/examples/stat-tall-series-interval.md",124],"430c4fb3":[function(){return n.e(72).then(n.bind(null,125))},"@site/docs/api/test.md",125],"452608cb":[function(){return n.e(73).then(n.bind(null,126))},"@site/docs/examples/buttons.md",126],"4612f97b":[function(){return n.e(74).then(n.bind(null,127))},"@site/docs/examples/color-picker.md",127],"472f8a66":[function(){return n.e(75).then(n.bind(null,128))},"@site/docs/layout.md",128],"4784cd26":[function(){return n.e(76).then(n.bind(null,129))},"@site/docs/examples/progress.md",129],"47a365f9":[function(){return n.e(77).then(n.bind(null,130))},"@site/docs/tour.md",130],"47b3e1f7":[function(){return n.e(78).then(n.bind(null,131))},"@site/docs/examples/counter-unicast.md",131],48786391:[function(){return n.e(79).then(n.bind(null,132))},"@site/docs/examples/plot-form.md",132],"4ab7b8a0":[function(){return n.e(80).then(n.bind(null,133))},"@site/docs/examples/picker.md",133],"4b953dd8":[function(){return n.e(81).then(n.bind(null,134))},"@site/docs/examples/plot-point-shapes.md",134],"4d54d076":[function(){return n.e(82).then(n.bind(null,135))},"@site/docs/contributing.md",135],"4e3b2ad1":[function(){return n.e(83).then(n.bind(null,136))},"@site/docs/examples/plot-interval-annotation-transpose.md",136],"4f49ed83":[function(){return n.e(84).then(n.bind(null,137))},"@site/docs/examples/stat-wide-bar.md",137],"4f6dabb0":[function(){return n.e(85).then(n.bind(null,138))},"@site/docs/cards.md",138],"50b74c5f":[function(){return n.e(86).then(n.bind(null,139))},"@site/docs/examples/text.md",139],"5168cb29":[function(){return n.e(87).then(n.bind(null,140))},"@site/docs/examples/stat-wide-gauge.md",140],"5281b7a2":[function(){return n.e(88).then(n.bind(null,141))},"@site/docs/architecture.md",141],"53da2547":[function(){return n.e(89).then(n.bind(null,142))},"@site/docs/examples/plot-area-groups.md",142],"549ea605":[function(){return n.e(90).then(n.bind(null,143))},"@site/docs/examples/issue-tracker.md",143],"54aab825":[function(){return n.e(91).then(n.bind(null,144))},"@site/docs/examples/plot-line-labels-stroked.md",144],"58b13b12":[function(){return n.e(92).then(n.bind(null,145))},"@site/docs/examples/tab-delete.md",145],"5a34328a":[function(){return n.e(93).then(n.bind(null,146))},"@site/docs/state.md",146],"5e52c414":[function(){return n.e(94).then(n.bind(null,147))},"@site/docs/examples/stat-small-series-interval.md",147],"5e8c322a":[function(){return n.e(95).then(n.bind(null,148))},"@site/docs/api/index.md",148],"5e9f5e1a":[function(){return Promise.resolve().then(n.bind(null,9))},"@generated/docusaurus.config",9],"600ae505":[function(){return n.e(96).then(n.bind(null,149))},"@site/docs/examples/table-filter.md",149],"6264312d":[function(){return n.e(97).then(n.bind(null,150))},"@site/docs/graphics.md",150],"6405c95c":[function(){return n.e(98).then(n.bind(null,151))},"@site/docs/realtime.md",151],"649e08dd":[function(){return n.e(99).then(n.bind(null,152))},"@site/docs/buffers.md",152],"65b8ef03":[function(){return n.e(100).then(n.bind(null,153))},"@site/docs/arguments.md",153],"661410ac":[function(){return n.e(101).then(n.bind(null,154))},"@site/docs/examples/tab.md",154],"6875c492":[function(){return Promise.all([n.e(0),n.e(1),n.e(2),n.e(3),n.e(102)]).then(n.bind(null,155))},"@theme/BlogTagsPostsPage",155],"692ea9bc":[function(){return n.e(103).then(n.bind(null,157))},"@site/docs/examples/stat-large-bar.md",157],"6c3eb428":[function(){return n.e(104).then(n.bind(null,158))},"@site/docs/examples/plot-line-labels.md",158],"6ce0e474":[function(){return n.e(105).then(n.bind(null,159))},"@site/docs/examples/graphics-clock.md",159],"6d36af6b":[function(){return n.e(106).then(n.bind(null,160))},"@site/docs/examples/markup.md",160],"6eb0e506":[function(){return n.e(107).then(n.bind(null,161))},"@site/docs/examples/table-groupby.md",161],"6ee3bac7":[function(){return n.e(108).then(n.bind(null,162))},"@site/docs/enterprise/basic-concepts.md",162],"718f151f":[function(){return n.e(109).then(n.bind(null,163))},"@site/docs/examples/plot-area-smooth.md",163],"746a1919":[function(){return n.e(110).then(n.bind(null,164))},"@site/docs/examples/frame-path.md",164],"77770fc3":[function(){return n.e(111).then(n.bind(null,165))},"@site/docs/examples/form-frame-path.md",165],"79d0d182":[function(){return n.e(112).then(n.bind(null,166))},"@site/docs/examples/stat-wide-series-area.md",166],"7c1cba9e":[function(){return n.e(113).then(n.bind(null,167))},"@site/docs/examples/textbox.md",167],"7ca2f128":[function(){return n.e(114).then(n.bind(null,168))},"@site/docs/examples/form-menu.md",168],"7d1cd1c9":[function(){return n.e(115).then(n.bind(null,169))},"@site/docs/examples/checklist.md",169],"7d744a8f":[function(){return n.e(116).then(n.bind(null,170))},"@site/docs/examples/plot-area-line-groups.md",170],"7ecd2c5c":[function(){return n.e(117).then(n.bind(null,171))},"@site/docs/examples/graphics-path.md",171],"7f8f4b62":[function(){return n.e(118).then(n.bind(null,172))},"@site/docs/api/graphics.md",172],"82f75f63":[function(){return n.e(119).then(n.bind(null,173))},"@site/docs/examples/choice-group.md",173],"8542acf3":[function(){return n.e(120).then(n.bind(null,174))},"@site/docs/examples/tabs.md",174],"854481fc":[function(){return n.e(121).then(n.bind(null,175))},"@site/docs/files.md",175],"879fc8a6":[function(){return n.e(122).then(n.bind(null,176))},"@site/docs/examples/button.md",176],"883d6399":[function(){return n.e(123).then(n.bind(null,177))},"@site/docs/examples/form.md",177],"887b127f":[function(){return n.e(124).then(n.bind(null,178))},"@site/docs/examples/table-filter-backend.md",178],"88c2f924":[function(){return n.e(125).then(n.bind(null,179))},"@site/docs/examples/table-download.md",179],"8954e356":[function(){return n.e(126).then(n.bind(null,180))},"@site/docs/examples/graphics-primitives.md",180],"8c12d624":[function(){return n.e(127).then(n.bind(null,181))},"@site/docs/examples/checkbox.md",181],"8c8ea2c1":[function(){return n.e(128).then(n.bind(null,182))},"@site/docs/examples/stepper.md",182],"8caadd29":[function(){return n.e(129).then(n.bind(null,183))},"@site/docs/migrating-0-8.md",183],"8eaf94d7":[function(){return n.e(130).then(n.bind(null,184))},"@site/docs/examples/plot-interval-labels.md",184],"8f030830":[function(){return n.e(131).then(n.bind(null,185))},"@site/docs/development.md",185],"9152460a":[function(){return n.e(132).then(n.bind(null,186))},"@site/docs/examples/card-menu.md",186],"917fcb62":[function(){return n.e(133).then(n.bind(null,187))},"@site/docs/examples/counter-broadcast.md",187],"935f2afb":[function(){return n.e(134).then(n.t.bind(null,188,3))},"~docs/default/version-current-metadata-prop-751.json",188],"9363aca1":[function(){return n.e(135).then(n.bind(null,189))},"@site/docs/examples/graphics-turtle.md",189],"941b9d10":[function(){return n.e(136).then(n.bind(null,190))},"@site/docs/examples/plot-step-after.md",190],"948118d6":[function(){return n.e(137).then(n.bind(null,191))},"@site/docs/examples/toolbar-routing.md",191],"950656ac":[function(){return n.e(138).then(n.bind(null,192))},"@site/docs/tutorial-counter.md",192],"9747bb1a":[function(){return n.e(139).then(n.bind(null,193))},"@site/docs/examples/stat-tall-series-area.md",193],"97d9aba4":[function(){return n.e(140).then(n.bind(null,194))},"@site/docs/examples/plot-area-stacked.md",194],"97e78655":[function(){return n.e(141).then(n.bind(null,195))},"@site/docs/examples/plot-interval-groups-transpose.md",195],"996e93c8":[function(){return n.e(142).then(n.bind(null,196))},"@site/docs/tutorial-todo.md",196],"997fea1d":[function(){return n.e(143).then(n.bind(null,197))},"@site/docs/examples/markdown.md",197],"9a52a2f7":[function(){return n.e(144).then(n.bind(null,198))},"@site/docs/examples/plot-interval-polar.md",198],"9ed00105":[function(){return n.e(145).then(n.bind(null,199))},"@site/docs/configuration.md",199],a3713279:[function(){return n.e(146).then(n.bind(null,200))},"@site/docs/deployment.md",200],a50fe136:[function(){return n.e(147).then(n.bind(null,201))},"@site/docs/api/db.md",201],a54511d2:[function(){return n.e(148).then(n.bind(null,202))},"@site/docs/examples/stat-small.md",202],a64331b1:[function(){return n.e(149).then(n.bind(null,203))},"@site/docs/pages.md",203],a6aa9e1f:[function(){return Promise.all([n.e(0),n.e(1),n.e(2),n.e(3),n.e(150)]).then(n.bind(null,290))},"@theme/BlogListPage",290],a814b970:[function(){return n.e(151).then(n.bind(null,204))},"@site/docs/examples/plot-polygon.md",204],a8b2a833:[function(){return n.e(152).then(n.bind(null,205))},"@site/docs/examples/hello-world.md",205],a8bb5334:[function(){return n.e(153).then(n.bind(null,206))},"@site/docs/guide.md",206],a8dc7269:[function(){return n.e(154).then(n.bind(null,207))},"@site/docs/examples/plot-interval-range.md",207],a9331674:[function(){return n.e(155).then(n.bind(null,208))},"@site/docs/examples/form-template.md",208],aa7f648d:[function(){return n.e(156).then(n.bind(null,209))},"@site/docs/examples/plot-interval-annotation.md",209],aa9ca283:[function(){return n.e(157).then(n.bind(null,210))},"@site/docs/examples/plot-plotly.md",210],ac27f894:[function(){return n.e(158).then(n.bind(null,211))},"@site/docs/examples/plot-interval-transpose.md",211],b140a32d:[function(){return n.e(159).then(n.bind(null,212))},"@site/docs/examples/dropdown.md",212],b18fb770:[function(){return n.e(160).then(n.bind(null,213))},"@site/docs/examples/graphics-spline.md",213],b1e50d5a:[function(){return n.e(161).then(n.bind(null,214))},"@site/docs/examples/frame.md",214],b22f7242:[function(){return n.e(162).then(n.bind(null,215))},"@site/docs/examples/plot-vegalite.md",215],b4d5475e:[function(){return n.e(163).then(n.bind(null,216))},"@site/docs/background.md",216],b81c5e46:[function(){return n.e(164).then(n.bind(null,217))},"@site/docs/examples/image.md",217],b8435c12:[function(){return n.e(165).then(n.bind(null,218))},"@site/docs/examples/markdown-data.md",218],b999a6e4:[function(){return n.e(166).then(n.bind(null,219))},"@site/docs/api/types.md",219],b9e4d6e6:[function(){return n.e(167).then(n.bind(null,220))},"@site/docs/examples/meta-refresh.md",220],b9f028e1:[function(){return n.e(168).then(n.bind(null,221))},"@site/docs/examples/toggle.md",221],ba1aeef8:[function(){return n.e(169).then(n.bind(null,222))},"@site/docs/examples/stat-large.md",222],bb5446ac:[function(){return n.e(170).then(n.bind(null,223))},"@site/docs/examples/plot-area-line.md",223],bbdd3825:[function(){return n.e(171).then(n.bind(null,224))},"@site/docs/examples/todo.md",224],bd0b0bbe:[function(){return n.e(172).then(n.bind(null,225))},"@site/docs/examples/plot-interval-range-transpose.md",225],bd7ed1d7:[function(){return n.e(173).then(n.bind(null,226))},"@site/docs/examples/counter-multicast.md",226],bdc330a7:[function(){return n.e(174).then(n.bind(null,227))},"@site/docs/examples/tab-link.md",227],bf614533:[function(){return n.e(175).then(n.bind(null,228))},"@site/docs/examples/index.md",228],c07c3c71:[function(){return n.e(176).then(n.bind(null,229))},"@site/docs/examples/breadcrumbs.md",229],c0ac41fc:[function(){return n.e(177).then(n.bind(null,230))},"@site/docs/examples/plot-axis-title.md",230],c0b6bb44:[function(){return n.e(178).then(n.bind(null,231))},"@site/docs/examples/table-search.md",231],c10c720e:[function(){return n.e(179).then(n.bind(null,232))},"@site/docs/examples/upload-download.md",232],c1570962:[function(){return n.e(180).then(n.bind(null,233))},"@site/docs/examples/nav.md",233],c1cf1fe4:[function(){return n.e(181).then(n.bind(null,234))},"@site/docs/examples/plot-interval-groups.md",234],c4f5d8e4:[function(){return Promise.all([n.e(0),n.e(1),n.e(2),n.e(182)]).then(n.bind(null,235))},"@site/src/pages/index.js",235],c641a4e8:[function(){return n.e(183).then(n.bind(null,237))},"@site/docs/examples/progress-update.md",237],c7b62599:[function(){return n.e(184).then(n.bind(null,238))},"@site/docs/examples/plot-interval-stacked-grouped-transpose.md",238],c87c151a:[function(){return n.e(185).then(n.bind(null,239))},"@site/docs/examples/plot-path-smooth.md",239],c9e5c590:[function(){return n.e(186).then(n.bind(null,240))},"@site/docs/examples/plot-line-smooth.md",240],ca1ac85d:[function(){return n.e(187).then(n.bind(null,241))},"@site/docs/enterprise/index.md",241],ca622d62:[function(){return n.e(188).then(n.bind(null,242))},"@site/docs/examples/slider.md",242],ca84abdc:[function(){return n.e(189).then(n.bind(null,243))},"@site/docs/examples/meta-icon.md",243],cc0ea0cf:[function(){return n.e(190).then(n.bind(null,244))},"@site/docs/examples/separator.md",244],ccc49370:[function(){return Promise.all([n.e(0),n.e(1),n.e(2),n.e(3),n.e(191)]).then(n.bind(null,291))},"@theme/BlogPostPage",291],cd329814:[function(){return n.e(192).then(n.bind(null,245))},"@site/docs/examples/plot-interval-stacked-transpose.md",245],ce88eaaa:[function(){return n.e(193).then(n.bind(null,246))},"@site/docs/examples/upload-ui.md",246],d05981be:[function(){return n.e(194).then(n.bind(null,247))},"@site/docs/examples/plot-line.md",247],d145135f:[function(){return n.e(195).then(n.bind(null,248))},"@site/docs/examples/upload-async.md",248],d3f54ca5:[function(){return n.e(196).then(n.bind(null,249))},"@site/docs/apps.md",249],d4ee2b4f:[function(){return n.e(197).then(n.bind(null,250))},"@site/docs/examples/template-data.md",250],d589d3a7:[function(){return n.e(198).then(n.bind(null,251))},"@site/docs/getting-started.md",251],d8689276:[function(){return n.e(199).then(n.bind(null,252))},"@site/docs/examples/spinbox.md",252],d8aa093c:[function(){return n.e(200).then(n.bind(null,253))},"@site/docs/examples/table-select.md",253],db32d859:[function(){return n.e(201).then(n.bind(null,254))},"@site/docs/security.md",254],dc705eb8:[function(){return n.e(202).then(n.bind(null,255))},"@site/docs/examples/layout.md",255],dceb90d2:[function(){return n.e(203).then(n.bind(null,256))},"@site/docs/examples/counter-global.md",256],de02e8e6:[function(){return n.e(204).then(n.bind(null,257))},"@site/docs/examples/plot-path-point.md",257],e013439f:[function(){return n.e(205).then(n.bind(null,258))},"@site/docs/examples/plot-line-annotation.md",258],e32c5859:[function(){return n.e(206).then(n.bind(null,259))},"@site/docs/examples/text-sizes.md",259],e4e8fb51:[function(){return n.e(207).then(n.bind(null,260))},"@site/docs/examples/form-frame.md",260],e7ad456d:[function(){return n.e(208).then(n.bind(null,261))},"@site/blog/2020-10-28-release.md?truncated=true",261],e7ba74f4:[function(){return n.e(209).then(n.bind(null,262))},"@site/docs/examples/meta-notification.md",262],e7c32899:[function(){return n.e(210).then(n.bind(null,263))},"@site/docs/examples/plot-matplotlib.md",263],e833177e:[function(){return n.e(211).then(n.bind(null,264))},"@site/docs/scripts.md",264],e8c1c6e8:[function(){return n.e(212).then(n.bind(null,265))},"@site/docs/plotting.md",265],e96704c5:[function(){return n.e(213).then(n.bind(null,266))},"@site/docs/examples/plot-interval-helix.md",266],eb2bb38c:[function(){return n.e(214).then(n.bind(null,267))},"@site/docs/examples/plot-histogram.md",267],ecdac497:[function(){return n.e(215).then(n.bind(null,268))},"@site/docs/examples/link.md",268],ed3db3ec:[function(){return n.e(216).then(n.bind(null,269))},"@site/docs/examples/plot-point-annotation.md",269],eec6e613:[function(){return n.e(217).then(n.bind(null,270))},"@site/docs/examples/range-slider.md",270],f09ebdf1:[function(){return n.e(218).then(n.bind(null,271))},"@site/docs/examples/meta-title.md",271],f132454a:[function(){return n.e(219).then(n.bind(null,272))},"@site/docs/examples/hash-routing.md",272],f151ab1a:[function(){return n.e(220).then(n.bind(null,273))},"@site/docs/api/ui.md",273],f1ec6cfa:[function(){return n.e(221).then(n.bind(null,274))},"@site/docs/examples/plot-interval-stacked-grouped.md",274],f21433ff:[function(){return n.e(222).then(n.bind(null,275))},"@site/docs/examples/plot-line-groups.md",275],f21d2ab0:[function(){return n.e(223).then(n.bind(null,276))},"@site/docs/examples/stat-small-series-area.md",276],f3473c5b:[function(){return n.e(224).then(n.bind(null,277))},"@site/docs/examples/layout-size.md",277],f349fb86:[function(){return n.e(225).then(n.bind(null,278))},"@site/docs/examples/graphics-hilbert.md",278],f60be60c:[function(){return n.e(226).then(n.bind(null,279))},"@site/docs/examples/toolbar.md",279],f7ea47c5:[function(){return n.e(227).then(n.bind(null,280))},"@site/docs/tutorial-beer.md",280],f811e444:[function(){return n.e(228).then(n.bind(null,281))},"@site/docs/routing.md",281],f846e950:[function(){return n.e(229).then(n.bind(null,282))},"@site/docs/examples/plot-area-line-smooth.md",282],faf81df8:[function(){return n.e(230).then(n.bind(null,283))},"@site/docs/examples/date-picker.md",283],fbe93038:[function(){return n.e(231).then(n.bind(null,284))},"@site/docs/testing.md",284],fcfc3752:[function(){return n.e(232).then(n.bind(null,285))},"@site/docs/tutorial-hello.md",285],fd056868:[function(){return n.e(233).then(n.bind(null,286))},"@site/docs/examples/combobox.md",286],fe4d4432:[function(){return n.e(234).then(n.bind(null,287))},"@site/docs/examples/date-picker-trigger.md",287]};var d=function(e){const t={};return function e(n,a){Object.keys(n).forEach((o=>{const r=n[o],i=a?a+"."+o:o;"object"===typeof r&&!!r&&Object.keys(r).length?e(r,i):t[i]=r}))}(e),t};var f=function(e,t){if("*"===e)return s()({loading:c,loader:()=>Promise.all([n.e(0),n.e(1),n.e(2),n.e(238)]).then(n.bind(null,474))});const a=u[`${e}-${t}`],r=[],i=[],l={},f=d(a);return Object.keys(f).forEach((e=>{const t=p[f[e]];t&&(l[e]=t[0],r.push(t[1]),i.push(t[2]))})),s.a.Map({loading:c,loader:l,modules:r,webpack:()=>i,render:(e,t)=>{const n=JSON.parse(JSON.stringify(a));Object.keys(e).forEach((t=>{let a=n;const o=t.split(".");for(let e=0;e<o.length-1;e+=1)a=a[o[e]];a[o[o.length-1]]=e[t].default;const r=Object.keys(e[t]).filter((e=>"default"!==e));r&&r.length&&r.forEach((n=>{a[o[o.length-1]][n]=e[t][n]}))}));const r=n.component;return delete n.component,o.a.createElement(r,Object.assign({},n,t))}})},m=[{path:"/wave/",component:f("/wave/","1a9"),exact:!0},{path:"/wave/blog",component:f("/wave/blog","22a"),exact:!0},{path:"/wave/blog/release-0.9.0",component:f("/wave/blog/release-0.9.0","282"),exact:!0},{path:"/wave/blog/tags",component:f("/wave/blog/tags","f9b"),exact:!0},{path:"/wave/blog/tags/release",component:f("/wave/blog/tags/release","4a7"),exact:!0},{path:"/wave/docs",component:f("/wave/docs","2e3"),routes:[{path:"/wave/docs/_start_q",component:f("/wave/docs/_start_q","1b6"),exact:!0},{path:"/wave/docs/api/autoreload",component:f("/wave/docs/api/autoreload","136"),exact:!0},{path:"/wave/docs/api/cli",component:f("/wave/docs/api/cli","59a"),exact:!0},{path:"/wave/docs/api/core",component:f("/wave/docs/api/core","506"),exact:!0},{path:"/wave/docs/api/db",component:f("/wave/docs/api/db","270"),exact:!0},{path:"/wave/docs/api/graphics",component:f("/wave/docs/api/graphics","576"),exact:!0},{path:"/wave/docs/api/index",component:f("/wave/docs/api/index","d57"),exact:!0},{path:"/wave/docs/api/server",component:f("/wave/docs/api/server","e76"),exact:!0},{path:"/wave/docs/api/test",component:f("/wave/docs/api/test","5bd"),exact:!0},{path:"/wave/docs/api/types",component:f("/wave/docs/api/types","82d"),exact:!0},{path:"/wave/docs/api/ui",component:f("/wave/docs/api/ui","1df"),exact:!0},{path:"/wave/docs/apps",component:f("/wave/docs/apps","b2f"),exact:!0},{path:"/wave/docs/architecture",component:f("/wave/docs/architecture","1aa"),exact:!0},{path:"/wave/docs/arguments",component:f("/wave/docs/arguments","dd1"),exact:!0},{path:"/wave/docs/background",component:f("/wave/docs/background","21e"),exact:!0},{path:"/wave/docs/backup",component:f("/wave/docs/backup","06a"),exact:!0},{path:"/wave/docs/browser-testing",component:f("/wave/docs/browser-testing","85e"),exact:!0},{path:"/wave/docs/buffers",component:f("/wave/docs/buffers","70a"),exact:!0},{path:"/wave/docs/cards",component:f("/wave/docs/cards","4c7"),exact:!0},{path:"/wave/docs/change-log",component:f("/wave/docs/change-log","095"),exact:!0},{path:"/wave/docs/cli",component:f("/wave/docs/cli","067"),exact:!0},{path:"/wave/docs/components",component:f("/wave/docs/components","2bb"),exact:!0},{path:"/wave/docs/configuration",component:f("/wave/docs/configuration","e5a"),exact:!0},{path:"/wave/docs/contributing",component:f("/wave/docs/contributing","b63"),exact:!0},{path:"/wave/docs/deployment",component:f("/wave/docs/deployment","b65"),exact:!0},{path:"/wave/docs/development",component:f("/wave/docs/development","e3f"),exact:!0},{path:"/wave/docs/enterprise/",component:f("/wave/docs/enterprise/","197"),exact:!0},{path:"/wave/docs/enterprise/basic-concepts",component:f("/wave/docs/enterprise/basic-concepts","9ca"),exact:!0},{path:"/wave/docs/enterprise/developer-guide",component:f("/wave/docs/enterprise/developer-guide","f02"),exact:!0},{path:"/wave/docs/examples",component:f("/wave/docs/examples","247"),exact:!0},{path:"/wave/docs/examples/background",component:f("/wave/docs/examples/background","914"),exact:!0},{path:"/wave/docs/examples/background-executor",component:f("/wave/docs/examples/background-executor","bca"),exact:!0},{path:"/wave/docs/examples/breadcrumbs",component:f("/wave/docs/examples/breadcrumbs","42a"),exact:!0},{path:"/wave/docs/examples/button",component:f("/wave/docs/examples/button","d1c"),exact:!0},{path:"/wave/docs/examples/buttons",component:f("/wave/docs/examples/buttons","4f3"),exact:!0},{path:"/wave/docs/examples/card-menu",component:f("/wave/docs/examples/card-menu","52c"),exact:!0},{path:"/wave/docs/examples/checkbox",component:f("/wave/docs/examples/checkbox","8fd"),exact:!0},{path:"/wave/docs/examples/checklist",component:f("/wave/docs/examples/checklist","35d"),exact:!0},{path:"/wave/docs/examples/choice-group",component:f("/wave/docs/examples/choice-group","f4d"),exact:!0},{path:"/wave/docs/examples/color-picker",component:f("/wave/docs/examples/color-picker","014"),exact:!0},{path:"/wave/docs/examples/combobox",component:f("/wave/docs/examples/combobox","fe1"),exact:!0},{path:"/wave/docs/examples/counter-broadcast",component:f("/wave/docs/examples/counter-broadcast","5e7"),exact:!0},{path:"/wave/docs/examples/counter-global",component:f("/wave/docs/examples/counter-global","921"),exact:!0},{path:"/wave/docs/examples/counter-multicast",component:f("/wave/docs/examples/counter-multicast","d7a"),exact:!0},{path:"/wave/docs/examples/counter-unicast",component:f("/wave/docs/examples/counter-unicast","823"),exact:!0},{path:"/wave/docs/examples/dashboard",component:f("/wave/docs/examples/dashboard","613"),exact:!0},{path:"/wave/docs/examples/date-picker",component:f("/wave/docs/examples/date-picker","1b7"),exact:!0},{path:"/wave/docs/examples/date-picker-trigger",component:f("/wave/docs/examples/date-picker-trigger","8c1"),exact:!0},{path:"/wave/docs/examples/dropdown",component:f("/wave/docs/examples/dropdown","0e1"),exact:!0},{path:"/wave/docs/examples/file-upload",component:f("/wave/docs/examples/file-upload","429"),exact:!0},{path:"/wave/docs/examples/form",component:f("/wave/docs/examples/form","8d7"),exact:!0},{path:"/wave/docs/examples/form-frame",component:f("/wave/docs/examples/form-frame","078"),exact:!0},{path:"/wave/docs/examples/form-frame-path",component:f("/wave/docs/examples/form-frame-path","5e9"),exact:!0},{path:"/wave/docs/examples/form-markup",component:f("/wave/docs/examples/form-markup","bf4"),exact:!0},{path:"/wave/docs/examples/form-menu",component:f("/wave/docs/examples/form-menu","035"),exact:!0},{path:"/wave/docs/examples/form-template",component:f("/wave/docs/examples/form-template","6f7"),exact:!0},{path:"/wave/docs/examples/frame",component:f("/wave/docs/examples/frame","6ff"),exact:!0},{path:"/wave/docs/examples/frame-path",component:f("/wave/docs/examples/frame-path","f9c"),exact:!0},{path:"/wave/docs/examples/glider-gun",component:f("/wave/docs/examples/glider-gun","b5d"),exact:!0},{path:"/wave/docs/examples/graphics-clock",component:f("/wave/docs/examples/graphics-clock","3a3"),exact:!0},{path:"/wave/docs/examples/graphics-hilbert",component:f("/wave/docs/examples/graphics-hilbert","ecc"),exact:!0},{path:"/wave/docs/examples/graphics-path",component:f("/wave/docs/examples/graphics-path","8af"),exact:!0},{path:"/wave/docs/examples/graphics-primitives",component:f("/wave/docs/examples/graphics-primitives","169"),exact:!0},{path:"/wave/docs/examples/graphics-spline",component:f("/wave/docs/examples/graphics-spline","4c7"),exact:!0},{path:"/wave/docs/examples/graphics-turtle",component:f("/wave/docs/examples/graphics-turtle","134"),exact:!0},{path:"/wave/docs/examples/hash-routing",component:f("/wave/docs/examples/hash-routing","600"),exact:!0},{path:"/wave/docs/examples/header",component:f("/wave/docs/examples/header","2b4"),exact:!0},{path:"/wave/docs/examples/hello-world",component:f("/wave/docs/examples/hello-world","49b"),exact:!0},{path:"/wave/docs/examples/image",component:f("/wave/docs/examples/image","5b5"),exact:!0},{path:"/wave/docs/examples/issue-tracker",component:f("/wave/docs/examples/issue-tracker","073"),exact:!0},{path:"/wave/docs/examples/label",component:f("/wave/docs/examples/label","15f"),exact:!0},{path:"/wave/docs/examples/layout",component:f("/wave/docs/examples/layout","342"),exact:!0},{path:"/wave/docs/examples/layout-size",component:f("/wave/docs/examples/layout-size","4bf"),exact:!0},{path:"/wave/docs/examples/link",component:f("/wave/docs/examples/link","bc8"),exact:!0},{path:"/wave/docs/examples/markdown",component:f("/wave/docs/examples/markdown","d09"),exact:!0},{path:"/wave/docs/examples/markdown-data",component:f("/wave/docs/examples/markdown-data","2ac"),exact:!0},{path:"/wave/docs/examples/markup",component:f("/wave/docs/examples/markup","180"),exact:!0},{path:"/wave/docs/examples/message-bar",component:f("/wave/docs/examples/message-bar","97f"),exact:!0},{path:"/wave/docs/examples/meta-icon",component:f("/wave/docs/examples/meta-icon","3a2"),exact:!0},{path:"/wave/docs/examples/meta-notification",component:f("/wave/docs/examples/meta-notification","ae1"),exact:!0},{path:"/wave/docs/examples/meta-redirect",component:f("/wave/docs/examples/meta-redirect","f63"),exact:!0},{path:"/wave/docs/examples/meta-refresh",component:f("/wave/docs/examples/meta-refresh","0b0"),exact:!0},{path:"/wave/docs/examples/meta-title",component:f("/wave/docs/examples/meta-title","a2d"),exact:!0},{path:"/wave/docs/examples/nav",component:f("/wave/docs/examples/nav","50d"),exact:!0},{path:"/wave/docs/examples/picker",component:f("/wave/docs/examples/picker","396"),exact:!0},{path:"/wave/docs/examples/picker-selection",component:f("/wave/docs/examples/picker-selection","015"),exact:!0},{path:"/wave/docs/examples/pixel-art",component:f("/wave/docs/examples/pixel-art","588"),exact:!0},{path:"/wave/docs/examples/plot-altair",component:f("/wave/docs/examples/plot-altair","9c7"),exact:!0},{path:"/wave/docs/examples/plot-area",component:f("/wave/docs/examples/plot-area","e26"),exact:!0},{path:"/wave/docs/examples/plot-area-groups",component:f("/wave/docs/examples/plot-area-groups","ae1"),exact:!0},{path:"/wave/docs/examples/plot-area-line",component:f("/wave/docs/examples/plot-area-line","3a6"),exact:!0},{path:"/wave/docs/examples/plot-area-line-groups",component:f("/wave/docs/examples/plot-area-line-groups","49e"),exact:!0},{path:"/wave/docs/examples/plot-area-line-smooth",component:f("/wave/docs/examples/plot-area-line-smooth","8df"),exact:!0},{path:"/wave/docs/examples/plot-area-negative",component:f("/wave/docs/examples/plot-area-negative","5bf"),exact:!0},{path:"/wave/docs/examples/plot-area-range",component:f("/wave/docs/examples/plot-area-range","5c0"),exact:!0},{path:"/wave/docs/examples/plot-area-smooth",component:f("/wave/docs/examples/plot-area-smooth","cb7"),exact:!0},{path:"/wave/docs/examples/plot-area-stacked",component:f("/wave/docs/examples/plot-area-stacked","85c"),exact:!0},{path:"/wave/docs/examples/plot-axis-title",component:f("/wave/docs/examples/plot-axis-title","ebc"),exact:!0},{path:"/wave/docs/examples/plot-bokeh",component:f("/wave/docs/examples/plot-bokeh","75a"),exact:!0},{path:"/wave/docs/examples/plot-d3",component:f("/wave/docs/examples/plot-d3","d44"),exact:!0},{path:"/wave/docs/examples/plot-form",component:f("/wave/docs/examples/plot-form","d4d"),exact:!0},{path:"/wave/docs/examples/plot-histogram",component:f("/wave/docs/examples/plot-histogram","cc7"),exact:!0},{path:"/wave/docs/examples/plot-interval",component:f("/wave/docs/examples/plot-interval","8cf"),exact:!0},{path:"/wave/docs/examples/plot-interval-annotation",component:f("/wave/docs/examples/plot-interval-annotation","977"),exact:!0},{path:"/wave/docs/examples/plot-interval-annotation-transpose",component:f("/wave/docs/examples/plot-interval-annotation-transpose","65e"),exact:!0},{path:"/wave/docs/examples/plot-interval-groups",component:f("/wave/docs/examples/plot-interval-groups","4cb"),exact:!0},{path:"/wave/docs/examples/plot-interval-groups-transpose",component:f("/wave/docs/examples/plot-interval-groups-transpose","646"),exact:!0},{path:"/wave/docs/examples/plot-interval-helix",component:f("/wave/docs/examples/plot-interval-helix","3ee"),exact:!0},{path:"/wave/docs/examples/plot-interval-labels",component:f("/wave/docs/examples/plot-interval-labels","5dc"),exact:!0},{path:"/wave/docs/examples/plot-interval-polar",component:f("/wave/docs/examples/plot-interval-polar","aeb"),exact:!0},{path:"/wave/docs/examples/plot-interval-polar-stacked",component:f("/wave/docs/examples/plot-interval-polar-stacked","978"),exact:!0},{path:"/wave/docs/examples/plot-interval-range",component:f("/wave/docs/examples/plot-interval-range","0da"),exact:!0},{path:"/wave/docs/examples/plot-interval-range-transpose",component:f("/wave/docs/examples/plot-interval-range-transpose","0f2"),exact:!0},{path:"/wave/docs/examples/plot-interval-stacked",component:f("/wave/docs/examples/plot-interval-stacked","d35"),exact:!0},{path:"/wave/docs/examples/plot-interval-stacked-grouped",component:f("/wave/docs/examples/plot-interval-stacked-grouped","4dd"),exact:!0},{path:"/wave/docs/examples/plot-interval-stacked-grouped-transpose",component:f("/wave/docs/examples/plot-interval-stacked-grouped-transpose","d39"),exact:!0},{path:"/wave/docs/examples/plot-interval-stacked-transpose",component:f("/wave/docs/examples/plot-interval-stacked-transpose","5fa"),exact:!0},{path:"/wave/docs/examples/plot-interval-theta",component:f("/wave/docs/examples/plot-interval-theta","035"),exact:!0},{path:"/wave/docs/examples/plot-interval-transpose",component:f("/wave/docs/examples/plot-interval-transpose","aae"),exact:!0},{path:"/wave/docs/examples/plot-line",component:f("/wave/docs/examples/plot-line","238"),exact:!0},{path:"/wave/docs/examples/plot-line-annotation",component:f("/wave/docs/examples/plot-line-annotation","27b"),exact:!0},{path:"/wave/docs/examples/plot-line-groups",component:f("/wave/docs/examples/plot-line-groups","812"),exact:!0},{path:"/wave/docs/examples/plot-line-labels",component:f("/wave/docs/examples/plot-line-labels","187"),exact:!0},{path:"/wave/docs/examples/plot-line-labels-no-overlap",component:f("/wave/docs/examples/plot-line-labels-no-overlap","d7f"),exact:!0},{path:"/wave/docs/examples/plot-line-labels-stroked",component:f("/wave/docs/examples/plot-line-labels-stroked","1e3"),exact:!0},{path:"/wave/docs/examples/plot-line-smooth",component:f("/wave/docs/examples/plot-line-smooth","e21"),exact:!0},{path:"/wave/docs/examples/plot-matplotlib",component:f("/wave/docs/examples/plot-matplotlib","366"),exact:!0},{path:"/wave/docs/examples/plot-path",component:f("/wave/docs/examples/plot-path","1d1"),exact:!0},{path:"/wave/docs/examples/plot-path-point",component:f("/wave/docs/examples/plot-path-point","b35"),exact:!0},{path:"/wave/docs/examples/plot-path-smooth",component:f("/wave/docs/examples/plot-path-smooth","46b"),exact:!0},{path:"/wave/docs/examples/plot-plotly",component:f("/wave/docs/examples/plot-plotly","470"),exact:!0},{path:"/wave/docs/examples/plot-point",component:f("/wave/docs/examples/plot-point","c44"),exact:!0},{path:"/wave/docs/examples/plot-point-annotation",component:f("/wave/docs/examples/plot-point-annotation","faf"),exact:!0},{path:"/wave/docs/examples/plot-point-custom",component:f("/wave/docs/examples/plot-point-custom","fe9"),exact:!0},{path:"/wave/docs/examples/plot-point-groups",component:f("/wave/docs/examples/plot-point-groups","3be"),exact:!0},{path:"/wave/docs/examples/plot-point-map",component:f("/wave/docs/examples/plot-point-map","8f7"),exact:!0},{path:"/wave/docs/examples/plot-point-shapes",component:f("/wave/docs/examples/plot-point-shapes","086"),exact:!0},{path:"/wave/docs/examples/plot-point-sizes",component:f("/wave/docs/examples/plot-point-sizes","a9d"),exact:!0},{path:"/wave/docs/examples/plot-polygon",component:f("/wave/docs/examples/plot-polygon","c78"),exact:!0},{path:"/wave/docs/examples/plot-step",component:f("/wave/docs/examples/plot-step","c36"),exact:!0},{path:"/wave/docs/examples/plot-step-after",component:f("/wave/docs/examples/plot-step-after","afc"),exact:!0},{path:"/wave/docs/examples/plot-step-before",component:f("/wave/docs/examples/plot-step-before","b83"),exact:!0},{path:"/wave/docs/examples/plot-vegalite",component:f("/wave/docs/examples/plot-vegalite","cf6"),exact:!0},{path:"/wave/docs/examples/plot-vegalite-form",component:f("/wave/docs/examples/plot-vegalite-form","e1b"),exact:!0},{path:"/wave/docs/examples/plot-vegalite-update",component:f("/wave/docs/examples/plot-vegalite-update","e40"),exact:!0},{path:"/wave/docs/examples/progress",component:f("/wave/docs/examples/progress","b94"),exact:!0},{path:"/wave/docs/examples/progress-update",component:f("/wave/docs/examples/progress-update","122"),exact:!0},{path:"/wave/docs/examples/range-slider",component:f("/wave/docs/examples/range-slider","82e"),exact:!0},{path:"/wave/docs/examples/separator",component:f("/wave/docs/examples/separator","daf"),exact:!0},{path:"/wave/docs/examples/site-async",component:f("/wave/docs/examples/site-async","7b7"),exact:!0},{path:"/wave/docs/examples/slider",component:f("/wave/docs/examples/slider","ae1"),exact:!0},{path:"/wave/docs/examples/spinbox",component:f("/wave/docs/examples/spinbox","309"),exact:!0},{path:"/wave/docs/examples/stat-large",component:f("/wave/docs/examples/stat-large","5a2"),exact:!0},{path:"/wave/docs/examples/stat-large-bar",component:f("/wave/docs/examples/stat-large-bar","927"),exact:!0},{path:"/wave/docs/examples/stat-small",component:f("/wave/docs/examples/stat-small","1db"),exact:!0},{path:"/wave/docs/examples/stat-small-series-area",component:f("/wave/docs/examples/stat-small-series-area","4b9"),exact:!0},{path:"/wave/docs/examples/stat-small-series-interval",component:f("/wave/docs/examples/stat-small-series-interval","44e"),exact:!0},{path:"/wave/docs/examples/stat-tall-gauge",component:f("/wave/docs/examples/stat-tall-gauge","1b3"),exact:!0},{path:"/wave/docs/examples/stat-tall-series-area",component:f("/wave/docs/examples/stat-tall-series-area","91c"),exact:!0},{path:"/wave/docs/examples/stat-tall-series-interval",component:f("/wave/docs/examples/stat-tall-series-interval","0ac"),exact:!0},{path:"/wave/docs/examples/stat-wide-bar",component:f("/wave/docs/examples/stat-wide-bar","5f0"),exact:!0},{path:"/wave/docs/examples/stat-wide-gauge",component:f("/wave/docs/examples/stat-wide-gauge","515"),exact:!0},{path:"/wave/docs/examples/stat-wide-series-area",component:f("/wave/docs/examples/stat-wide-series-area","9bc"),exact:!0},{path:"/wave/docs/examples/stat-wide-series-interval",component:f("/wave/docs/examples/stat-wide-series-interval","8d4"),exact:!0},{path:"/wave/docs/examples/stepper",component:f("/wave/docs/examples/stepper","394"),exact:!0},{path:"/wave/docs/examples/swatch-picker",component:f("/wave/docs/examples/swatch-picker","6dc"),exact:!0},{path:"/wave/docs/examples/tab",component:f("/wave/docs/examples/tab","07b"),exact:!0},{path:"/wave/docs/examples/tab-delete",component:f("/wave/docs/examples/tab-delete","9c5"),exact:!0},{path:"/wave/docs/examples/tab-link",component:f("/wave/docs/examples/tab-link","478"),exact:!0},{path:"/wave/docs/examples/tab-routing",component:f("/wave/docs/examples/tab-routing","6e6"),exact:!0},{path:"/wave/docs/examples/table",component:f("/wave/docs/examples/table","63d"),exact:!0},{path:"/wave/docs/examples/table-download",component:f("/wave/docs/examples/table-download","667"),exact:!0},{path:"/wave/docs/examples/table-filter",component:f("/wave/docs/examples/table-filter","185"),exact:!0},{path:"/wave/docs/examples/table-filter-backend",component:f("/wave/docs/examples/table-filter-backend","7d8"),exact:!0},{path:"/wave/docs/examples/table-groupby",component:f("/wave/docs/examples/table-groupby","2d7"),exact:!0},{path:"/wave/docs/examples/table-markdown",component:f("/wave/docs/examples/table-markdown","c18"),exact:!0},{path:"/wave/docs/examples/table-search",component:f("/wave/docs/examples/table-search","cef"),exact:!0},{path:"/wave/docs/examples/table-select",component:f("/wave/docs/examples/table-select","2b7"),exact:!0},{path:"/wave/docs/examples/table-sort",component:f("/wave/docs/examples/table-sort","3f0"),exact:!0},{path:"/wave/docs/examples/tabs",component:f("/wave/docs/examples/tabs","2de"),exact:!0},{path:"/wave/docs/examples/template",component:f("/wave/docs/examples/template","7a0"),exact:!0},{path:"/wave/docs/examples/template-data",component:f("/wave/docs/examples/template-data","998"),exact:!0},{path:"/wave/docs/examples/text",component:f("/wave/docs/examples/text","bf6"),exact:!0},{path:"/wave/docs/examples/text-sizes",component:f("/wave/docs/examples/text-sizes","25f"),exact:!0},{path:"/wave/docs/examples/textbox",component:f("/wave/docs/examples/textbox","d9f"),exact:!0},{path:"/wave/docs/examples/textbox-trigger",component:f("/wave/docs/examples/textbox-trigger","381"),exact:!0},{path:"/wave/docs/examples/todo",component:f("/wave/docs/examples/todo","28c"),exact:!0},{path:"/wave/docs/examples/toggle",component:f("/wave/docs/examples/toggle","75f"),exact:!0},{path:"/wave/docs/examples/toolbar",component:f("/wave/docs/examples/toolbar","7fe"),exact:!0},{path:"/wave/docs/examples/toolbar-routing",component:f("/wave/docs/examples/toolbar-routing","1ae"),exact:!0},{path:"/wave/docs/examples/upload",component:f("/wave/docs/examples/upload","d1b"),exact:!0},{path:"/wave/docs/examples/upload-async",component:f("/wave/docs/examples/upload-async","476"),exact:!0},{path:"/wave/docs/examples/upload-download",component:f("/wave/docs/examples/upload-download","70e"),exact:!0},{path:"/wave/docs/examples/upload-ui",component:f("/wave/docs/examples/upload-ui","550"),exact:!0},{path:"/wave/docs/examples/wizard",component:f("/wave/docs/examples/wizard","730"),exact:!0},{path:"/wave/docs/expressions",component:f("/wave/docs/expressions","7e5"),exact:!0},{path:"/wave/docs/files",component:f("/wave/docs/files","eb6"),exact:!0},{path:"/wave/docs/getting-started",component:f("/wave/docs/getting-started","cdc"),exact:!0},{path:"/wave/docs/graphics",component:f("/wave/docs/graphics","23e"),exact:!0},{path:"/wave/docs/guide",component:f("/wave/docs/guide","de8"),exact:!0},{path:"/wave/docs/installation",component:f("/wave/docs/installation","5c8"),exact:!0},{path:"/wave/docs/layout",component:f("/wave/docs/layout","362"),exact:!0},{path:"/wave/docs/logging",component:f("/wave/docs/logging","63d"),exact:!0},{path:"/wave/docs/migrating-0",component:f("/wave/docs/migrating-0","830"),exact:!0},{path:"/wave/docs/migrating-0-8",component:f("/wave/docs/migrating-0-8","ba0"),exact:!0},{path:"/wave/docs/pages",component:f("/wave/docs/pages","2dc"),exact:!0},{path:"/wave/docs/plotting",component:f("/wave/docs/plotting","2c7"),exact:!0},{path:"/wave/docs/realtime",component:f("/wave/docs/realtime","374"),exact:!0},{path:"/wave/docs/routing",component:f("/wave/docs/routing","f63"),exact:!0},{path:"/wave/docs/scripts",component:f("/wave/docs/scripts","cee"),exact:!0},{path:"/wave/docs/security",component:f("/wave/docs/security","c61"),exact:!0},{path:"/wave/docs/state",component:f("/wave/docs/state","fcc"),exact:!0},{path:"/wave/docs/testing",component:f("/wave/docs/testing","1ff"),exact:!0},{path:"/wave/docs/tour",component:f("/wave/docs/tour","6aa"),exact:!0},{path:"/wave/docs/tutorial-beer",component:f("/wave/docs/tutorial-beer","f5d"),exact:!0},{path:"/wave/docs/tutorial-counter",component:f("/wave/docs/tutorial-counter","da3"),exact:!0},{path:"/wave/docs/tutorial-hello",component:f("/wave/docs/tutorial-hello","0f5"),exact:!0},{path:"/wave/docs/tutorial-monitor",component:f("/wave/docs/tutorial-monitor","390"),exact:!0},{path:"/wave/docs/tutorial-todo",component:f("/wave/docs/tutorial-todo","762"),exact:!0}]},{path:"*",component:f("*")}],h=n(10),v=n(9),g=n(25),b=n(26),x=n(21),w=n(23),y=n(1),k=n(12),E=n.n(k),S=[n(15),n(15),n(15),n(38),n(44),n(41)];function T(e,...t){S.forEach((n=>{const a=n.__esModule?n.default:n;a&&a[e]&&a[e](...t)}))}var _={onRouteUpdate(...e){T("onRouteUpdate",...e)},onRouteUpdateDelayed(...e){T("onRouteUpdateDelayed",...e)}},O=n(8);function C(e,t){const n=Object(O.a)(e,t);return Promise.all(n.map((e=>{const{component:t}=e.route;if(t&&t.preload)return t.preload()})))}const P={};var N=function(e){if(P[e.pathname])return Object.assign(Object.assign({},e),{pathname:P[e.pathname]});let t=e.pathname||"/";return t=t.trim().replace(/\/index\.html$/,""),""===t&&(t="/"),P[e.pathname]=t,Object.assign(Object.assign({},e),{pathname:t})};n(42);E.a.configure({showSpinner:!1});class A extends o.a.Component{constructor(e){super(e),this.previousLocation=null,this.progressBarTimeout=null,this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){const n=e.location!==this.props.location,{routes:a,delay:o=1e3}=this.props;if(n){const t=N(e.location);return this.startProgressBar(o),this.previousLocation=N(this.props.location),this.setState({nextRouteHasLoaded:!1}),C(a,t.pathname).then((()=>{_.onRouteUpdate({previousLocation:this.previousLocation,location:t}),this.previousLocation=null,this.setState({nextRouteHasLoaded:!0},this.stopProgressBar);const{hash:e}=t;if(e){const t=e.substring(1),n=document.getElementById(t);n&&n.scrollIntoView()}else window.scrollTo(0,0)})).catch((e=>console.warn(e))),!1}return!!t.nextRouteHasLoaded}clearProgressBarTimeout(){this.progressBarTimeout&&(clearTimeout(this.progressBarTimeout),this.progressBarTimeout=null)}startProgressBar(e){this.clearProgressBarTimeout(),this.progressBarTimeout=setTimeout((()=>{_.onRouteUpdateDelayed({location:N(this.props.location)}),E.a.start()}),e)}stopProgressBar(){this.clearProgressBarTimeout(),E.a.done()}render(){const{children:e,location:t}=this.props;return o.a.createElement(y.d,{location:N(t),render:()=>e})}}var R=Object(y.o)(A);var I=function(){const[e,t]=Object(a.useState)(!1);return Object(a.useEffect)((()=>{t(!0)}),[]),o.a.createElement(w.a.Provider,{value:{siteConfig:v.default,siteMetadata:b,globalData:g,isClient:e}},o.a.createElement(R,{routes:m},Object(x.a)(m)))};const F=function(e){if("undefined"==typeof document)return!1;const t=document.createElement("link");try{if(t.relList&&"function"==typeof t.relList.supports)return t.relList.supports(e)}catch(n){return!1}return!1}("prefetch")?function(e){return new Promise(((t,n)=>{if("undefined"==typeof document)return void n();const a=document.createElement("link");a.setAttribute("rel","prefetch"),a.setAttribute("href",e),a.onload=t,a.onerror=n;(document.getElementsByTagName("head")[0]||document.getElementsByName("script")[0].parentNode).appendChild(a)}))}:function(e){return new Promise(((t,n)=>{const a=new XMLHttpRequest;a.open("GET",e,!0),a.withCredentials=!0,a.onload=()=>{200===a.status?t():n()},a.send(null)}))},L={};var D=function(e){return new Promise((t=>{L[e]?t():F(e).then((()=>{t(),L[e]=!0})).catch((()=>{}))}))};const j={},M={},z=()=>!(!("connection"in navigator)||-1===(navigator.connection.effectiveType||"").indexOf("2g")||!navigator.connection.saveData);var $={prefetch:e=>{if(!(e=>!z()&&!M[e]&&!j[e])(e))return!1;j[e]=!0;return Object(O.a)(m,e).reduce(((e,t)=>{const n=u[t.route.path];if(!n)return e;const a=Object.values(d(n));return e.concat(a)}),[]).forEach((e=>{const t=n.gca(e);t&&!/undefined/.test(t)&&D(t)})),!0},preload:e=>!!(e=>!z()&&!M[e])(e)&&(M[e]=!0,C(m,e),!0)};if(h.a.canUseDOM){window.docusaurus=$;const e=r.hydrate;C(m,window.location.pathname).then((()=>{e(o.a.createElement(i.a,null,o.a.createElement(I,null)),document.getElementById("__docusaurus"))}))}},function(e,t,n){"use strict";n.r(t);var a=n(19),o=n(10),r=n(9);(e=>{if(o.a.canUseDOM){const{themeConfig:{prism:{additionalLanguages:t=[]}={}}}=r.default;window.Prism=e,t.forEach((e=>{n(39)("./prism-"+e)})),delete window.Prism}})(a.a)}],[[29,236,0]]]);
\ No newline at end of file
diff --git a/docs/main.64610da1.js.LICENSE.txt b/docs/main.0720c80c.js.LICENSE.txt
similarity index 100%
rename from docs/main.64610da1.js.LICENSE.txt
rename to docs/main.0720c80c.js.LICENSE.txt
diff --git a/docs/main.64610da1.js b/docs/main.64610da1.js
deleted file mode 100644
index 03a4002cea..0000000000
--- a/docs/main.64610da1.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! 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<n;o++)a[o]=arguments[o];return(t=e.call.apply(e,[this].concat(a))||this).history=Object(i.d)(t.props),t}return Object(a.a)(t,e),t.prototype.render=function(){return r.a.createElement(g,{history:this.history,children:this.props.children})},t}(r.a.Component);var x=function(e){function t(){return e.apply(this,arguments)||this}Object(a.a)(t,e);var n=t.prototype;return n.componentDidMount=function(){this.props.onMount&&this.props.onMount.call(this,this)},n.componentDidUpdate=function(e){this.props.onUpdate&&this.props.onUpdate.call(this,this,e)},n.componentWillUnmount=function(){this.props.onUnmount&&this.props.onUnmount.call(this,this)},n.render=function(){return null},t}(r.a.Component);function w(e){var t=e.message,n=e.when,a=void 0===n||n;return r.a.createElement(v.Consumer,null,(function(e){if(e||Object(s.a)(!1),!a||e.staticContext)return null;var n=e.history.block;return r.a.createElement(x,{onMount:function(e){e.release=n(t)},onUpdate:function(e,a){a.message!==t&&(e.release(),e.release=n(t))},onUnmount:function(e){e.release()},message:t})}))}var y={},k=0;function E(e,t){return void 0===e&&(e="/"),void 0===t&&(t={}),"/"===e?e:function(e){if(y[e])return y[e];var t=p.a.compile(e);return k<1e4&&(y[e]=t,k++),t}(e)(t,{pretty:!0})}function S(e){var t=e.computedMatch,n=e.to,a=e.push,o=void 0!==a&&a;return r.a.createElement(v.Consumer,null,(function(e){e||Object(s.a)(!1);var a=e.history,l=e.staticContext,u=o?a.push:a.replace,p=Object(i.c)(t?"string"==typeof n?E(n,t.params):Object(c.a)({},n,{pathname:E(n.pathname,t.params)}):n);return l?(u(p),null):r.a.createElement(x,{onMount:function(){u(p)},onUpdate:function(e,t){var n=Object(i.c)(t.to);Object(i.f)(n,Object(c.a)({},p,{key:n.key}))||u(p)},to:n})}))}var T={},_=0;function O(e,t){void 0===t&&(t={}),("string"==typeof t||Array.isArray(t))&&(t={path:t});var n=t,a=n.path,o=n.exact,r=void 0!==o&&o,i=n.strict,l=void 0!==i&&i,s=n.sensitive,c=void 0!==s&&s;return[].concat(a).reduce((function(t,n){if(!n&&""!==n)return null;if(t)return t;var a=function(e,t){var n=""+t.end+t.strict+t.sensitive,a=T[n]||(T[n]={});if(a[e])return a[e];var o=[],r={regexp:p()(e,o,t),keys:o};return _<1e4&&(a[e]=r,_++),r}(n,{end:r,strict:l,sensitive:c}),o=a.regexp,i=a.keys,s=o.exec(e);if(!s)return null;var u=s[0],d=s.slice(1),f=e===u;return r&&!f?null:{path:n,url:"/"===n&&""===u?"/":u,isExact:f,params:i.reduce((function(e,t,n){return e[t.name]=d[n],e}),{})}}),null)}var C=function(e){function t(){return e.apply(this,arguments)||this}return Object(a.a)(t,e),t.prototype.render=function(){var e=this;return r.a.createElement(v.Consumer,null,(function(t){t||Object(s.a)(!1);var n=e.props.location||t.location,a=e.props.computedMatch?e.props.computedMatch:e.props.path?O(n.pathname,e.props):t.match,o=Object(c.a)({},t,{location:n,match:a}),i=e.props,l=i.children,u=i.component,p=i.render;return Array.isArray(l)&&0===l.length&&(l=null),r.a.createElement(v.Provider,{value:o},o.match?l?"function"==typeof l?l(o):l:u?r.a.createElement(u,o):p?p(o):null:"function"==typeof l?l(o):null)}))},t}(r.a.Component);function P(e){return"/"===e.charAt(0)?e:"/"+e}function N(e,t){if(!e)return t;var n=P(e);return 0!==t.pathname.indexOf(n)?t:Object(c.a)({},t,{pathname:t.pathname.substr(n.length)})}function A(e){return"string"==typeof e?e:Object(i.e)(e)}function R(e){return function(){Object(s.a)(!1)}}function I(){}var F=function(e){function t(){for(var t,n=arguments.length,a=new Array(n),o=0;o<n;o++)a[o]=arguments[o];return(t=e.call.apply(e,[this].concat(a))||this).handlePush=function(e){return t.navigateTo(e,"PUSH")},t.handleReplace=function(e){return t.navigateTo(e,"REPLACE")},t.handleListen=function(){return I},t.handleBlock=function(){return I},t}Object(a.a)(t,e);var n=t.prototype;return n.navigateTo=function(e,t){var n=this.props,a=n.basename,o=void 0===a?"":a,r=n.context,l=void 0===r?{}:r;l.action=t,l.location=function(e,t){return e?Object(c.a)({},t,{pathname:P(e)+t.pathname}):t}(o,Object(i.c)(e)),l.url=A(l.location)},n.render=function(){var e=this.props,t=e.basename,n=void 0===t?"":t,a=e.context,o=void 0===a?{}:a,l=e.location,s=void 0===l?"/":l,u=Object(d.a)(e,["basename","context","location"]),p={createHref:function(e){return P(n+A(e))},action:"POP",location:N(n,Object(i.c)(s)),push:this.handlePush,replace:this.handleReplace,go:R(),goBack:R(),goForward:R(),listen:this.handleListen,block:this.handleBlock};return r.a.createElement(g,Object(c.a)({},u,{history:p,staticContext:o}))},t}(r.a.Component);var L=function(e){function t(){return e.apply(this,arguments)||this}return Object(a.a)(t,e),t.prototype.render=function(){var e=this;return r.a.createElement(v.Consumer,null,(function(t){t||Object(s.a)(!1);var n,a,o=e.props.location||t.location;return r.a.Children.forEach(e.props.children,(function(e){if(null==a&&r.a.isValidElement(e)){n=e;var i=e.props.path||e.props.from;a=i?O(o.pathname,Object(c.a)({},e.props,{path:i})):t.match}})),a?r.a.cloneElement(n,{location:o,computedMatch:a}):null}))},t}(r.a.Component);function D(e){var t="withRouter("+(e.displayName||e.name)+")",n=function(t){var n=t.wrappedComponentRef,a=Object(d.a)(t,["wrappedComponentRef"]);return r.a.createElement(v.Consumer,null,(function(t){return t||Object(s.a)(!1),r.a.createElement(e,Object(c.a)({},a,t,{ref:n}))}))};return n.displayName=t,n.WrappedComponent=e,m()(n,e)}var j=r.a.useContext;function M(){return j(h)}function z(){return j(v).location}function $(){var e=j(v).match;return e?e.params:{}}function U(e){var t=z(),n=j(v).match;return e?O(t.pathname,e):n}},function(e,t,n){"use strict";function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}n.d(t,"a",(function(){return a}))},function(e,t,n){"use strict";function a(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}n.d(t,"a",(function(){return a}))},function(e,t,n){"use strict";var a="Invariant failed";t.a=function(e,t){if(!e)throw new Error(a)}},function(e,t,n){"use strict";n.d(t,"a",(function(){return E})),n.d(t,"b",(function(){return P})),n.d(t,"d",(function(){return A})),n.d(t,"c",(function(){return h})),n.d(t,"f",(function(){return v})),n.d(t,"e",(function(){return m}));var a=n(2);function o(e){return"/"===e.charAt(0)}function r(e,t){for(var n=t,a=n+1,o=e.length;a<o;n+=1,a+=1)e[n]=e[a];e.pop()}var i=function(e,t){void 0===t&&(t="");var n,a=e&&e.split("/")||[],i=t&&t.split("/")||[],l=e&&o(e),s=t&&o(t),c=l||s;if(e&&o(e)?i=a:a.length&&(i.pop(),i=i.concat(a)),!i.length)return"/";if(i.length){var u=i[i.length-1];n="."===u||".."===u||""===u}else n=!1;for(var p=0,d=i.length;d>=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;a<e;a++)n[a]=arguments[a];t.forEach((function(e){return e.apply(void 0,n)}))}}}var b=!("undefined"==typeof window||!window.document||!window.document.createElement);function x(e,t){t(window.confirm(e))}var w="popstate",y="hashchange";function k(){try{return window.history.state||{}}catch(e){return{}}}function E(e){void 0===e&&(e={}),b||Object(c.a)(!1);var t,n=window.history,o=(-1===(t=window.navigator.userAgent).indexOf("Android 2.")&&-1===t.indexOf("Android 4.0")||-1===t.indexOf("Mobile Safari")||-1!==t.indexOf("Chrome")||-1!==t.indexOf("Windows Phone"))&&window.history&&"pushState"in window.history,r=!(-1===window.navigator.userAgent.indexOf("Trident")),i=e,l=i.forceRefresh,s=void 0!==l&&l,p=i.getUserConfirmation,v=void 0===p?x:p,E=i.keyLength,S=void 0===E?6:E,T=e.basename?f(u(e.basename)):"";function _(e){var t=e||{},n=t.key,a=t.state,o=window.location,r=o.pathname+o.search+o.hash;return T&&(r=d(r,T)),h(r,a,n)}function O(){return Math.random().toString(36).substr(2,S)}var C=g();function P(e){Object(a.a)(U,e),U.length=n.length,C.notifyListeners(U.location,U.action)}function N(e){(function(e){return void 0===e.state&&-1===navigator.userAgent.indexOf("CriOS")})(e)||I(_(e.state))}function A(){I(_(k()))}var R=!1;function I(e){if(R)R=!1,P();else{C.confirmTransitionTo(e,"POP",v,(function(t){t?P({action:"POP",location:e}):function(e){var t=U.location,n=L.indexOf(t.key);-1===n&&(n=0);var a=L.indexOf(e.key);-1===a&&(a=0);var o=n-a;o&&(R=!0,j(o))}(e)}))}}var F=_(k()),L=[F.key];function D(e){return T+m(e)}function j(e){n.go(e)}var M=0;function z(e){1===(M+=e)&&1===e?(window.addEventListener(w,N),r&&window.addEventListener(y,A)):0===M&&(window.removeEventListener(w,N),r&&window.removeEventListener(y,A))}var $=!1;var U={length:n.length,action:"POP",location:F,createHref:D,push:function(e,t){var a="PUSH",r=h(e,t,O(),U.location);C.confirmTransitionTo(r,a,v,(function(e){if(e){var t=D(r),i=r.key,l=r.state;if(o)if(n.pushState({key:i,state:l},null,t),s)window.location.href=t;else{var c=L.indexOf(U.location.key),u=L.slice(0,c+1);u.push(r.key),L=u,P({action:a,location:r})}else window.location.href=t}}))},replace:function(e,t){var a="REPLACE",r=h(e,t,O(),U.location);C.confirmTransitionTo(r,a,v,(function(e){if(e){var t=D(r),i=r.key,l=r.state;if(o)if(n.replaceState({key:i,state:l},null,t),s)window.location.replace(t);else{var c=L.indexOf(U.location.key);-1!==c&&(L[c]=r.key),P({action:a,location:r})}else window.location.replace(t)}}))},go:j,goBack:function(){j(-1)},goForward:function(){j(1)},block:function(e){void 0===e&&(e=!1);var t=C.setPrompt(e);return $||(z(1),$=!0),function(){return $&&($=!1,z(-1)),t()}},listen:function(e){var t=C.appendListener(e);return z(1),function(){z(-1),t()}}};return U}var S="hashchange",T={hashbang:{encodePath:function(e){return"!"===e.charAt(0)?e:"!/"+p(e)},decodePath:function(e){return"!"===e.charAt(0)?e.substr(1):e}},noslash:{encodePath:p,decodePath:u},slash:{encodePath:u,decodePath:u}};function _(e){var t=e.indexOf("#");return-1===t?e:e.slice(0,t)}function O(){var e=window.location.href,t=e.indexOf("#");return-1===t?"":e.substring(t+1)}function C(e){window.location.replace(_(window.location.href)+"#"+e)}function P(e){void 0===e&&(e={}),b||Object(c.a)(!1);var t=window.history,n=(window.navigator.userAgent.indexOf("Firefox"),e),o=n.getUserConfirmation,r=void 0===o?x:o,i=n.hashType,l=void 0===i?"slash":i,s=e.basename?f(u(e.basename)):"",p=T[l],v=p.encodePath,w=p.decodePath;function y(){var e=w(O());return s&&(e=d(e,s)),h(e)}var k=g();function E(e){Object(a.a)($,e),$.length=t.length,k.notifyListeners($.location,$.action)}var P=!1,N=null;function A(){var e,t,n=O(),a=v(n);if(n!==a)C(a);else{var o=y(),i=$.location;if(!P&&(t=o,(e=i).pathname===t.pathname&&e.search===t.search&&e.hash===t.hash))return;if(N===m(o))return;N=null,function(e){if(P)P=!1,E();else{var t="POP";k.confirmTransitionTo(e,t,r,(function(n){n?E({action:t,location:e}):function(e){var t=$.location,n=L.lastIndexOf(m(t));-1===n&&(n=0);var a=L.lastIndexOf(m(e));-1===a&&(a=0);var o=n-a;o&&(P=!0,D(o))}(e)}))}}(o)}}var R=O(),I=v(R);R!==I&&C(I);var F=y(),L=[m(F)];function D(e){t.go(e)}var j=0;function M(e){1===(j+=e)&&1===e?window.addEventListener(S,A):0===j&&window.removeEventListener(S,A)}var z=!1;var $={length:t.length,action:"POP",location:F,createHref:function(e){var t=document.querySelector("base"),n="";return t&&t.getAttribute("href")&&(n=_(window.location.href)),n+"#"+v(s+m(e))},push:function(e,t){var n="PUSH",a=h(e,void 0,void 0,$.location);k.confirmTransitionTo(a,n,r,(function(e){if(e){var t=m(a),o=v(s+t);if(O()!==o){N=t,function(e){window.location.hash=e}(o);var r=L.lastIndexOf(m($.location)),i=L.slice(0,r+1);i.push(t),L=i,E({action:n,location:a})}else E()}}))},replace:function(e,t){var n="REPLACE",a=h(e,void 0,void 0,$.location);k.confirmTransitionTo(a,n,r,(function(e){if(e){var t=m(a),o=v(s+t);O()!==o&&(N=t,C(o));var r=L.indexOf(m($.location));-1!==r&&(L[r]=t),E({action:n,location:a})}}))},go:D,goBack:function(){D(-1)},goForward:function(){D(1)},block:function(e){void 0===e&&(e=!1);var t=k.setPrompt(e);return z||(M(1),z=!0),function(){return z&&(z=!1,M(-1)),t()}},listen:function(e){var t=k.appendListener(e);return M(1),function(){M(-1),t()}}};return $}function N(e,t,n){return Math.min(Math.max(e,t),n)}function A(e){void 0===e&&(e={});var t=e,n=t.getUserConfirmation,o=t.initialEntries,r=void 0===o?["/"]:o,i=t.initialIndex,l=void 0===i?0:i,s=t.keyLength,c=void 0===s?6:s,u=g();function p(e){Object(a.a)(w,e),w.length=w.entries.length,u.notifyListeners(w.location,w.action)}function d(){return Math.random().toString(36).substr(2,c)}var f=N(l,0,r.length-1),v=r.map((function(e){return h(e,void 0,"string"==typeof e?d():e.key||d())})),b=m;function x(e){var t=N(w.index+e,0,w.entries.length-1),a=w.entries[t];u.confirmTransitionTo(a,"POP",n,(function(e){e?p({action:"POP",location:a,index:t}):p()}))}var w={length:v.length,action:"POP",location:v[f],index:f,entries:v,createHref:b,push:function(e,t){var a="PUSH",o=h(e,t,d(),w.location);u.confirmTransitionTo(o,a,n,(function(e){if(e){var t=w.index+1,n=w.entries.slice(0);n.length>t?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<w.entries.length},block:function(e){return void 0===e&&(e=!1),u.setPrompt(e)},listen:function(e){return u.appendListener(e)}};return w}},function(e,t,n){"use strict";function a(e,t){if(null==e)return{};var n,a,o={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=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 <a href='https://h2o.ai' style='color:#ffe52b'>H2O.ai</a>, 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:'<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'};function o(e,t,n){return e<t?t:e>n?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;o<n;o++)a[o]=arguments[o];return(t=e.call.apply(e,[this].concat(a))||this).history=Object(l.a)(t.props),t}return Object(o.a)(t,e),t.prototype.render=function(){return i.a.createElement(a.e,{history:this.history,children:this.props.children})},t}(i.a.Component);var d=function(e){function t(){for(var t,n=arguments.length,a=new Array(n),o=0;o<n;o++)a[o]=arguments[o];return(t=e.call.apply(e,[this].concat(a))||this).history=Object(l.b)(t.props),t}return Object(o.a)(t,e),t.prototype.render=function(){return i.a.createElement(a.e,{history:this.history,children:this.props.children})},t}(i.a.Component);var f=function(e,t){return"function"==typeof e?e(t):e},m=function(e,t){return"string"==typeof e?Object(l.c)(e,null,null,t):e},h=function(e){return e},v=i.a.forwardRef;void 0===v&&(v=h);var g=v((function(e,t){var n=e.innerRef,a=e.navigate,o=e.onClick,r=Object(c.a)(e,["innerRef","navigate","onClick"]),l=r.target,u=Object(s.a)({},r,{onClick:function(e){try{o&&o(e)}catch(t){throw e.preventDefault(),t}e.defaultPrevented||0!==e.button||l&&"_self"!==l||function(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}(e)||(e.preventDefault(),a())}});return u.ref=h!==v&&t||n,i.a.createElement("a",u)}));var b=v((function(e,t){var n=e.component,o=void 0===n?g:n,r=e.replace,l=e.to,p=e.innerRef,d=Object(c.a)(e,["component","replace","to","innerRef"]);return i.a.createElement(a.h.Consumer,null,(function(e){e||Object(u.a)(!1);var n=e.history,a=m(f(l,e.location),e.location),c=a?n.createHref(a):"",g=Object(s.a)({},d,{href:c,navigate:function(){var t=f(l,e.location);(r?n.replace:n.push)(t)}});return h!==v?g.ref=t||p:g.innerRef=p,i.a.createElement(o,g)}))})),x=function(e){return e},w=i.a.forwardRef;void 0===w&&(w=x);var y=w((function(e,t){var n=e["aria-current"],o=void 0===n?"page":n,r=e.activeClassName,l=void 0===r?"active":r,p=e.activeStyle,d=e.className,h=e.exact,v=e.isActive,g=e.location,y=e.sensitive,k=e.strict,E=e.style,S=e.to,T=e.innerRef,_=Object(c.a)(e,["aria-current","activeClassName","activeStyle","className","exact","isActive","location","sensitive","strict","style","to","innerRef"]);return i.a.createElement(a.h.Consumer,null,(function(e){e||Object(u.a)(!1);var n=g||e.location,r=m(f(S,n),n),c=r.pathname,O=c&&c.replace(/([.+*?=^!:${}()[\]|/\\])/g,"\\$1"),C=O?Object(a.j)(n.pathname,{path:O,exact:h,sensitive:y,strict:k}):null,P=!!(v?v(C,n):C),N=P?function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.filter((function(e){return e})).join(" ")}(d,l):d,A=P?Object(s.a)({},E,{},p):E,R=Object(s.a)({"aria-current":P&&o||null,className:N,style:A,to:r},_);return x!==w?R.ref=t||T:R.innerRef=T,i.a.createElement(b,R)}))}))},,,function(e,t,n){"use strict";var a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var l=n(0),s=n(7),c=[],u=[];function p(e){var t=e(),n={loading:!0,loaded:null,error:null};return n.promise=t.then((function(e){return n.loading=!1,n.loaded=e,e})).catch((function(e){throw n.loading=!1,n.error=e,e})),n}function d(e){var t={loading:!1,loaded:{},error:null},n=[];try{Object.keys(e).forEach((function(a){var o=p(e[a]);o.loading?t.loading=!0:(t.loaded[a]=o.loaded,t.error=o.error),n.push(o.promise),o.promise.then((function(e){t.loaded[a]=e})).catch((function(e){t.error=e}))}))}catch(a){t.error=a}return t.promise=Promise.all(n).then((function(e){return t.loading=!1,e})).catch((function(e){throw t.loading=!1,e})),t}function f(e,t){return l.createElement((n=e)&&n.__esModule?n.default:n,t);var n}function m(e,t){var p,d;if(!t.loading)throw new Error("react-loadable requires a `loading` component");var m=Object.assign({loader:null,loading:null,delay:200,timeout:null,render:f,webpack:null,modules:null},t),h=null;function v(){return h||(h=e(m.loader)),h.promise}return c.push(v),"function"==typeof m.webpack&&u.push((function(){if(e=m.webpack,"object"===a(n.m)&&e().every((function(e){return void 0!==e&&void 0!==n.m[e]})))return v();var e})),d=p=function(t){function n(a){o(this,n);var i=r(this,t.call(this,a));return i.retry=function(){i.setState({error:null,loading:!0,timedOut:!1}),h=e(m.loader),i._loadModule()},v(),i.state={error:h.error,pastDelay:!1,timedOut:!1,loading:h.loading,loaded:h.loaded},i}return i(n,t),n.preload=function(){return v()},n.prototype.componentWillMount=function(){this._mounted=!0,this._loadModule()},n.prototype._loadModule=function(){var e=this;if(this.context.loadable&&Array.isArray(m.modules)&&m.modules.forEach((function(t){e.context.loadable.report(t)})),h.loading){"number"==typeof m.delay&&(0===m.delay?this.setState({pastDelay:!0}):this._delay=setTimeout((function(){e.setState({pastDelay:!0})}),m.delay)),"number"==typeof m.timeout&&(this._timeout=setTimeout((function(){e.setState({timedOut:!0})}),m.timeout));var t=function(){e._mounted&&(e.setState({error:h.error,loaded:h.loaded,loading:h.loading}),e._clearTimeouts())};h.promise.then((function(){t()})).catch((function(e){t()}))}},n.prototype.componentWillUnmount=function(){this._mounted=!1,this._clearTimeouts()},n.prototype._clearTimeouts=function(){clearTimeout(this._delay),clearTimeout(this._timeout)},n.prototype.render=function(){return this.state.loading||this.state.error?l.createElement(m.loading,{isLoading:this.state.loading,pastDelay:this.state.pastDelay,timedOut:this.state.timedOut,error:this.state.error,retry:this.retry}):this.state.loaded?m.render(this.state.loaded,this.props):null},n}(l.Component),p.contextTypes={loadable:s.shape({report:s.func.isRequired})},d}function h(e){return m(p,e)}h.Map=function(e){if("function"!=typeof e.render)throw new Error("LoadableMap requires a `render(loaded, props)` function");return m(d,e)};var v=function(e){function t(){return o(this,t),r(this,e.apply(this,arguments))}return i(t,e),t.prototype.getChildContext=function(){return{loadable:{report:this.props.report}}},t.prototype.render=function(){return l.Children.only(this.props.children)},t}(l.Component);function g(e){for(var t=[];e.length;){var n=e.pop();t.push(n())}return Promise.all(t).then((function(){if(e.length)return g(e)}))}v.propTypes={report:s.func.isRequired},v.childContextTypes={loadable:s.shape({report:s.func.isRequired}).isRequired},h.Capture=v,h.preloadAll=function(){return new Promise((function(e,t){g(c).then(e,t)}))},h.preloadReady=function(){return new Promise((function(e,t){g(u).then(e,e)}))},e.exports=h},function(e,t,n){"use strict";(function(e){var a=n(0),o=n.n(a),r=n(3),i=n(7),l=n.n(i),s=1073741823,c="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:void 0!==e?e:{};function u(e){var t=[];return{on:function(e){t.push(e)},off:function(e){t=t.filter((function(t){return t!==e}))},get:function(){return e},set:function(n,a){e=n,t.forEach((function(t){return t(e,a)}))}}}var p=o.a.createContext||function(e,t){var n,o,i,p="__create-react-context-"+((c[i="__global_unique_id__"]=(c[i]||0)+1)+"__"),d=function(e){function n(){var t;return(t=e.apply(this,arguments)||this).emitter=u(t.props.value),t}Object(r.a)(n,e);var a=n.prototype;return a.getChildContext=function(){var e;return(e={})[p]=this.emitter,e},a.componentWillReceiveProps=function(e){if(this.props.value!==e.value){var n,a=this.props.value,o=e.value;((r=a)===(i=o)?0!==r||1/r==1/i:r!=r&&i!=i)?n=0:(n="function"==typeof t?t(a,o):s,0!==(n|=0)&&this.emitter.set(e.value,n))}var r,i},a.render=function(){return this.props.children},n}(a.Component);d.childContextTypes=((n={})[p]=l.a.object.isRequired,n);var f=function(t){function n(){var e;return(e=t.apply(this,arguments)||this).state={value:e.getValue()},e.onUpdate=function(t,n){0!=((0|e.observedBits)&n)&&e.setState({value:e.getValue()})},e}Object(r.a)(n,t);var a=n.prototype;return a.componentWillReceiveProps=function(e){var t=e.observedBits;this.observedBits=null==t?s:t},a.componentDidMount=function(){this.context[p]&&this.context[p].on(this.onUpdate);var e=this.props.observedBits;this.observedBits=null==e?s:e},a.componentWillUnmount=function(){this.context[p]&&this.context[p].off(this.onUpdate)},a.getValue=function(){return this.context[p]?this.context[p].get():e},a.render=function(){return(e=this.props.children,Array.isArray(e)?e[0]:e)(this.state.value);var e},n}(a.Component);return f.contextTypes=((o={})[p]=l.a.object,o),{Provider:d,Consumer:f}};t.a=p}).call(this,n(28))},function(e,t,n){var a=n(36);e.exports=f,e.exports.parse=r,e.exports.compile=function(e,t){return l(r(e,t),t)},e.exports.tokensToFunction=l,e.exports.tokensToRegExp=d;var o=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function r(e,t){for(var n,a=[],r=0,i=0,l="",u=t&&t.delimiter||"/";null!=(n=o.exec(e));){var p=n[0],d=n[1],f=n.index;if(l+=e.slice(i,f),i=f+p.length,d)l+=d[1];else{var m=e[i],h=n[2],v=n[3],g=n[4],b=n[5],x=n[6],w=n[7];l&&(a.push(l),l="");var y=null!=h&&null!=m&&m!==h,k="+"===x||"*"===x,E="?"===x||"*"===x,S=n[2]||u,T=g||b;a.push({name:v||r++,prefix:h||"",delimiter:S,optional:E,repeat:k,partial:y,asterisk:!!w,pattern:T?c(T):w?".*":"[^"+s(S)+"]+?"})}}return i<e.length&&(l+=e.substr(i)),l&&a.push(l),a}function i(e){return encodeURI(e).replace(/[\/?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()}))}function l(e,t){for(var n=new Array(e.length),o=0;o<e.length;o++)"object"==typeof e[o]&&(n[o]=new RegExp("^(?:"+e[o].pattern+")$",p(t)));return function(t,o){for(var r="",l=t||{},s=(o||{}).pretty?i:encodeURIComponent,c=0;c<e.length;c++){var u=e[c];if("string"!=typeof u){var p,d=l[u.name];if(null==d){if(u.optional){u.partial&&(r+=u.prefix);continue}throw new TypeError('Expected "'+u.name+'" to be defined')}if(a(d)){if(!u.repeat)throw new TypeError('Expected "'+u.name+'" to not repeat, but received `'+JSON.stringify(d)+"`");if(0===d.length){if(u.optional)continue;throw new TypeError('Expected "'+u.name+'" to not be empty')}for(var f=0;f<d.length;f++){if(p=s(d[f]),!n[c].test(p))throw new TypeError('Expected all "'+u.name+'" to match "'+u.pattern+'", but received `'+JSON.stringify(p)+"`");r+=(0===f?u.prefix:u.delimiter)+p}}else{if(p=u.asterisk?encodeURI(d).replace(/[?#]/g,(function(e){return"%"+e.charCodeAt(0).toString(16).toUpperCase()})):s(d),!n[c].test(p))throw new TypeError('Expected "'+u.name+'" to match "'+u.pattern+'", but received "'+p+'"');r+=u.prefix+p}}else r+=u}return r}}function s(e){return e.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function c(e){return e.replace(/([=!:$\/()])/g,"\\$1")}function u(e,t){return e.keys=t,e}function p(e){return e&&e.sensitive?"":"i"}function d(e,t,n){a(t)||(n=t||n,t=[]);for(var o=(n=n||{}).strict,r=!1!==n.end,i="",l=0;l<e.length;l++){var c=e[l];if("string"==typeof c)i+=s(c);else{var d=s(c.prefix),f="(?:"+c.pattern+")";t.push(c),c.repeat&&(f+="(?:"+d+f+")*"),i+=f=c.optional?c.partial?d+"("+f+")?":"(?:"+d+"("+f+"))?":d+"("+f+")"}}var m=s(n.delimiter||"/"),h=i.slice(-m.length)===m;return o||(i=(h?i.slice(0,-m.length):i)+"(?:"+m+"(?=$))?"),i+=r?"$":o&&h?"":"(?="+m+"|$)",u(new RegExp("^"+i,p(n)),t)}function f(e,t,n){return a(t)||(n=t||n,t=[]),n=n||{},e instanceof RegExp?function(e,t){var n=e.source.match(/\((?!\?)/g);if(n)for(var a=0;a<n.length;a++)t.push({name:a,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return u(e,t)}(e,t):a(e)?function(e,t,n){for(var a=[],o=0;o<e.length;o++)a.push(f(e[o],t,n).source);return u(new RegExp("(?:"+a.join("|")+")",p(n)),t)}(e,t,n):function(e,t,n){return d(r(e,n),t,n)}(e,t,n)}},function(e,t,n){"use strict";var a,o,r,i=(a=0,o={util:{encode:function(e){return e instanceof r?new r(e.type,o.util.encode(e.content),e.alias):"Array"===o.util.type(e)?e.map(o.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++a}),e.__id},clone:function(e,t){var n=o.util.type(e);switch(t=t||{},n){case"Object":if(t[o.util.objId(e)])return t[o.util.objId(e)];var a={};for(var r in t[o.util.objId(e)]=a,e)e.hasOwnProperty(r)&&(a[r]=o.util.clone(e[r],t));return a;case"Array":return t[o.util.objId(e)]?t[o.util.objId(e)]:(a=[],t[o.util.objId(e)]=a,e.forEach((function(e,n){a[n]=o.util.clone(e,t)})),a)}return e}},languages:{extend:function(e,t){var n=o.util.clone(o.languages[e]);for(var a in t)n[a]=t[a];return n},insertBefore:function(e,t,n,a){var r=(a=a||o.languages)[e];if(2==arguments.length){for(var i in n=arguments[1])n.hasOwnProperty(i)&&(r[i]=n[i]);return r}var l={};for(var s in r)if(r.hasOwnProperty(s)){if(s==t)for(var i in n)n.hasOwnProperty(i)&&(l[i]=n[i]);l[s]=r[s]}return o.languages.DFS(o.languages,(function(t,n){n===a[e]&&t!=e&&(this[t]=l)})),a[e]=l},DFS:function(e,t,n,a){for(var r in a=a||{},e)e.hasOwnProperty(r)&&(t.call(e,r,e[r],n||r),"Object"!==o.util.type(e[r])||a[o.util.objId(e[r])]?"Array"!==o.util.type(e[r])||a[o.util.objId(e[r])]||(a[o.util.objId(e[r])]=!0,o.languages.DFS(e[r],t,r,a)):(a[o.util.objId(e[r])]=!0,o.languages.DFS(e[r],t,null,a)))}},plugins:{},highlight:function(e,t,n){var a={code:e,grammar:t,language:n};return a.tokens=o.tokenize(a.code,a.grammar),r.stringify(o.util.encode(a.tokens),a.language)},matchGrammar:function(e,t,n,a,r,i,l){var s=o.Token;for(var c in n)if(n.hasOwnProperty(c)&&n[c]){if(c==l)return;var u=n[c];u="Array"===o.util.type(u)?u:[u];for(var p=0;p<u.length;++p){var d=u[p],f=d.inside,m=!!d.lookbehind,h=!!d.greedy,v=0,g=d.alias;if(h&&!d.pattern.global){var b=d.pattern.toString().match(/[imuy]*$/)[0];d.pattern=RegExp(d.pattern.source,b+"g")}d=d.pattern||d;for(var x=a,w=r;x<t.length;w+=t[x].length,++x){var y=t[x];if(t.length>e.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<E||!t[S].type&&!t[S-1].greedy);++S)k>=(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,"&quot;")+'"'})).join(" ");return"<"+a.tag+' class="'+a.classes.join(" ")+'"'+(l?" "+l:"")+">"+a.content+"</"+a.tag+">"},o);i.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:/<!DOCTYPE[\s\S]+?>/i,cdata:/<!\[CDATA\[[\s\S]*?]]>/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(/&amp;/,"&"))})),Object.defineProperty(i.languages.markup.tag,"addInlined",{value:function(e,t){var n={};n["language-"+t]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:i.languages[t]},n.cdata=/^<!\[CDATA\[|\]\]>$/i;var a={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:n}};a["language-"+t]={pattern:/[\s\S]+/,inside:i.languages[t]};var o={};o[e]={pattern:RegExp(/(<__[\s\S]*?>)(?:<!\[CDATA\[[\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<a.length;r++)o[a[r]]=e.languages.bash[a[r]];e.languages.shell=e.languages.bash}(i),i.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,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;r<t.length;r++){var i=t[r],l=!1;if("string"!=typeof i&&("tag"===i.type&&i.content[0]&&"tag"===i.content[0].type?"</"===i.content[0].content[0].content?o.length>0&&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);r<t.length-1&&("string"==typeof t[r+1]||"plain-text"===t[r+1].type)&&(s+=n(t[r+1]),t.splice(r+1,1)),r>0&&("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<s;l++)r[l]instanceof RegExp&&(r[l]={pattern:r[l]}),n(r[l]);else n(r)}}(t,(function(e){e.inside||(e.inside={}),e.inside.rest=n}))}))}}),t.addSupport(["java","javascript","php"],t)}(i),function(e){var t=/\b(?:abstract|continue|for|new|switch|assert|default|goto|package|synchronized|boolean|do|if|private|this|break|double|implements|protected|throw|byte|else|import|public|throws|case|enum|instanceof|return|transient|catch|extends|int|short|try|char|final|interface|static|void|class|finally|long|strictfp|volatile|const|float|native|super|while|var|null|exports|module|open|opens|provides|requires|to|transitive|uses|with)\b/,n=/\b[A-Z](?:\w*[a-z]\w*)?\b/;e.languages.java=e.languages.extend("clike",{"class-name":[n,/\b[A-Z]\w*(?=\s+\w+\s*[;,=())])/],keyword:t,function:[e.languages.clike.function,{pattern:/(\:\:)[a-z_]\w*/,lookbehind:!0}],number:/\b0b[01][01_]*L?\b|\b0x[\da-f_]*\.?[\da-f_p+-]+\b|(?:\b\d[\d_]*\.?[\d_]*|\B\.\d[\d_]*)(?:e[+-]?\d[\d_]*)?[dfl]?/i,operator:{pattern:/(^|[^.])(?:<<=?|>>>?=?|->|([-+&|])\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<l.length&&!(o>=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<t.length;n++){var a=t[n],o=e.languages.javascript[a];"RegExp"===e.util.type(o)&&(o=e.languages.javascript[a]={pattern:o});var r=o.inside||{};o.inside=r,r["maybe-class-name"]=/^[A-Z][\s\S]*/}}(i),function(e){e.languages.flow=e.languages.extend("javascript",{}),e.languages.insertBefore("flow","keyword",{type:[{pattern:/\b(?:[Nn]umber|[Ss]tring|[Bb]oolean|Function|any|mixed|null|void)\b/,alias:"tag"}]}),e.languages.flow["function-variable"].pattern=/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)(?:\s*:\s*\w+)?|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/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<t.length;n++){if(i>=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<o;a++){var r=n[a];if("string"!=typeof r){var i=r.content;if(Array.isArray(i))if("template-string"===r.type){var l=i[1];if(3===i.length&&"string"!=typeof l&&"embedded-code"===l.type){var s=d(l),c=l.alias,p=Array.isArray(c)?c[0]:c,f=e.languages[p];if(!f)continue;i[1]=u(s,f,p)}}else t(i);else"string"!=typeof i&&t([i])}}}(t.tokens)}))}(i),i.languages.graphql={comment:/#.*/,string:{pattern:/"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:true|false)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+)[a-zA-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:enum|fragment|implements|input|interface|mutation|on|query|scalar|schema|type|union)\b/,operator:/[!=|]|\.{3}/,punctuation:/[!(){}\[\]:=,]/,constant:/\b(?!ID\b)[A-Z][A-Z_\d]*\b/},function(e){var t=/(?:\\.|[^\\\n\r]|(?:\r?\n|\r)(?!\r?\n|\r))/.source;function n(e,n){return e=e.replace(/<inner>/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(/__(?:(?!_)<inner>|_(?:(?!_)<inner>)+_)+__/.source,!0),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/_(?:(?!_)<inner>|__(?:(?!_)<inner>)+__)+_/.source,!0),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~)<inner>)+?\2/.source,!1),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},url:{pattern:n(/!?\[(?:(?!\])<inner>)+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)| ?\[(?:(?!\])<inner>)+\])/.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<a;n++){var o=t[n];if("code"===o.type){var r=o.content[1],i=o.content[3];if(r&&i&&"code-language"===r.type&&"code-block"===i.type&&"string"==typeof r.content){var l="language-"+r.content.trim().split(/\s+/)[0].toLowerCase();i.alias?"string"==typeof i.alias?i.alias=[i.alias,l]:i.alias.push(l):i.alias=[l]}}else e(o.content)}}(e.tokens)})),e.hooks.add("wrap",(function(t){if("code-block"===t.type){for(var n="",a=0,o=t.classes.length;a<o;a++){var r=t.classes[a],i=/language-(.+)/.exec(r);if(i){n=i[1];break}}var l=e.languages[n];if(l){var s=t.content.replace(/&lt;/g,"<").replace(/&amp;/g,"&");t.content=e.highlight(s,l,n)}else if(n&&"none"!==n&&e.plugins.autoloader){var c="md-"+(new Date).valueOf()+"-"+Math.floor(1e16*Math.random());t.attributes.id=c,e.plugins.autoloader.loadLanguages(n,(function(){var t=document.getElementById(c);t&&(t.innerHTML=e.highlight(t.textContent,e.languages[n],n))}))}}})),e.languages.md=e.languages.markdown}(i),function(e){e.languages.diff={coord:[/^(?:\*{3}|-{3}|\+{3}).*$/m,/^@@.*@@$/m,/^\d+.*$/m]};var t={"deleted-sign":"-","deleted-arrow":"<","inserted-sign":"+","inserted-arrow":">",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;c<arguments.length;c++){for(var u in n=Object(arguments[c]))o.call(n,u)&&(s[u]=n[u]);if(a){l=a(n);for(var p=0;p<l.length;p++)r.call(n,l[p])&&(s[l[p]]=n[l[p]])}}return s}},function(e,t,n){"use strict";var a=n(8);t.a=a.b},function(e,t,n){"use strict";e.exports=n(37)},function(e,t,n){"use strict";var a=n(0),o=n.n(a);t.a=o.a.createContext(null)},function(e,t,n){"use strict";!function e(){if("undefined"!=typeof __REACT_DEVTOOLS_GLOBAL_HOOK__&&"function"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE)try{__REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(e)}catch(t){console.error(t)}}(),e.exports=n(31)},function(e){e.exports=JSON.parse('{"docusaurus-plugin-content-docs":{"default":{"path":"/wave/docs","versions":[{"name":"current","label":"Next","isLast":true,"path":"/wave/docs","mainDocId":"change-log","docs":[{"id":"_start_q","path":"/wave/docs/_start_q"},{"id":"api/autoreload","path":"/wave/docs/api/autoreload"},{"id":"api/core","path":"/wave/docs/api/core"},{"id":"api/db","path":"/wave/docs/api/db"},{"id":"api/graphics","path":"/wave/docs/api/graphics"},{"id":"api/index","path":"/wave/docs/api/index"},{"id":"api/server","path":"/wave/docs/api/server"},{"id":"api/test","path":"/wave/docs/api/test"},{"id":"api/types","path":"/wave/docs/api/types"},{"id":"api/ui","path":"/wave/docs/api/ui"},{"id":"apps","path":"/wave/docs/apps"},{"id":"architecture","path":"/wave/docs/architecture"},{"id":"arguments","path":"/wave/docs/arguments"},{"id":"backup","path":"/wave/docs/backup"},{"id":"browser-testing","path":"/wave/docs/browser-testing"},{"id":"buffers","path":"/wave/docs/buffers"},{"id":"cards","path":"/wave/docs/cards"},{"id":"change-log","path":"/wave/docs/change-log"},{"id":"components","path":"/wave/docs/components"},{"id":"configuration","path":"/wave/docs/configuration"},{"id":"contributing","path":"/wave/docs/contributing"},{"id":"development","path":"/wave/docs/development"},{"id":"enterprise/basic-concepts","path":"/wave/docs/enterprise/basic-concepts"},{"id":"enterprise/developer-guide","path":"/wave/docs/enterprise/developer-guide"},{"id":"enterprise/index","path":"/wave/docs/enterprise/"},{"id":"examples/breadcrumbs","path":"/wave/docs/examples/breadcrumbs"},{"id":"examples/button","path":"/wave/docs/examples/button"},{"id":"examples/buttons","path":"/wave/docs/examples/buttons"},{"id":"examples/card-menu","path":"/wave/docs/examples/card-menu"},{"id":"examples/checkbox","path":"/wave/docs/examples/checkbox"},{"id":"examples/checklist","path":"/wave/docs/examples/checklist"},{"id":"examples/choice-group","path":"/wave/docs/examples/choice-group"},{"id":"examples/color-picker","path":"/wave/docs/examples/color-picker"},{"id":"examples/combobox","path":"/wave/docs/examples/combobox"},{"id":"examples/counter-broadcast","path":"/wave/docs/examples/counter-broadcast"},{"id":"examples/counter-global","path":"/wave/docs/examples/counter-global"},{"id":"examples/counter-multicast","path":"/wave/docs/examples/counter-multicast"},{"id":"examples/counter-unicast","path":"/wave/docs/examples/counter-unicast"},{"id":"examples/dashboard","path":"/wave/docs/examples/dashboard"},{"id":"examples/date-picker","path":"/wave/docs/examples/date-picker"},{"id":"examples/date-picker-trigger","path":"/wave/docs/examples/date-picker-trigger"},{"id":"examples/dropdown","path":"/wave/docs/examples/dropdown"},{"id":"examples/file-upload","path":"/wave/docs/examples/file-upload"},{"id":"examples/form","path":"/wave/docs/examples/form"},{"id":"examples/form-frame","path":"/wave/docs/examples/form-frame"},{"id":"examples/form-frame-path","path":"/wave/docs/examples/form-frame-path"},{"id":"examples/form-markup","path":"/wave/docs/examples/form-markup"},{"id":"examples/form-menu","path":"/wave/docs/examples/form-menu"},{"id":"examples/form-template","path":"/wave/docs/examples/form-template"},{"id":"examples/frame","path":"/wave/docs/examples/frame"},{"id":"examples/frame-path","path":"/wave/docs/examples/frame-path"},{"id":"examples/glider-gun","path":"/wave/docs/examples/glider-gun"},{"id":"examples/graphics-clock","path":"/wave/docs/examples/graphics-clock"},{"id":"examples/graphics-hilbert","path":"/wave/docs/examples/graphics-hilbert"},{"id":"examples/graphics-path","path":"/wave/docs/examples/graphics-path"},{"id":"examples/graphics-primitives","path":"/wave/docs/examples/graphics-primitives"},{"id":"examples/graphics-spline","path":"/wave/docs/examples/graphics-spline"},{"id":"examples/graphics-turtle","path":"/wave/docs/examples/graphics-turtle"},{"id":"examples/hash-routing","path":"/wave/docs/examples/hash-routing"},{"id":"examples/header","path":"/wave/docs/examples/header"},{"id":"examples/hello-world","path":"/wave/docs/examples/hello-world"},{"id":"examples/image","path":"/wave/docs/examples/image"},{"id":"examples/index","path":"/wave/docs/examples"},{"id":"examples/issue-tracker","path":"/wave/docs/examples/issue-tracker"},{"id":"examples/label","path":"/wave/docs/examples/label"},{"id":"examples/layout","path":"/wave/docs/examples/layout"},{"id":"examples/layout-size","path":"/wave/docs/examples/layout-size"},{"id":"examples/link","path":"/wave/docs/examples/link"},{"id":"examples/markdown","path":"/wave/docs/examples/markdown"},{"id":"examples/markdown-data","path":"/wave/docs/examples/markdown-data"},{"id":"examples/markup","path":"/wave/docs/examples/markup"},{"id":"examples/message-bar","path":"/wave/docs/examples/message-bar"},{"id":"examples/meta-notification","path":"/wave/docs/examples/meta-notification"},{"id":"examples/meta-redirect","path":"/wave/docs/examples/meta-redirect"},{"id":"examples/meta-refresh","path":"/wave/docs/examples/meta-refresh"},{"id":"examples/meta-title","path":"/wave/docs/examples/meta-title"},{"id":"examples/nav","path":"/wave/docs/examples/nav"},{"id":"examples/picker","path":"/wave/docs/examples/picker"},{"id":"examples/picker-selection","path":"/wave/docs/examples/picker-selection"},{"id":"examples/pixel-art","path":"/wave/docs/examples/pixel-art"},{"id":"examples/plot-altair","path":"/wave/docs/examples/plot-altair"},{"id":"examples/plot-area","path":"/wave/docs/examples/plot-area"},{"id":"examples/plot-area-groups","path":"/wave/docs/examples/plot-area-groups"},{"id":"examples/plot-area-line","path":"/wave/docs/examples/plot-area-line"},{"id":"examples/plot-area-line-groups","path":"/wave/docs/examples/plot-area-line-groups"},{"id":"examples/plot-area-line-smooth","path":"/wave/docs/examples/plot-area-line-smooth"},{"id":"examples/plot-area-negative","path":"/wave/docs/examples/plot-area-negative"},{"id":"examples/plot-area-range","path":"/wave/docs/examples/plot-area-range"},{"id":"examples/plot-area-smooth","path":"/wave/docs/examples/plot-area-smooth"},{"id":"examples/plot-area-stacked","path":"/wave/docs/examples/plot-area-stacked"},{"id":"examples/plot-axis-title","path":"/wave/docs/examples/plot-axis-title"},{"id":"examples/plot-bokeh","path":"/wave/docs/examples/plot-bokeh"},{"id":"examples/plot-d3","path":"/wave/docs/examples/plot-d3"},{"id":"examples/plot-form","path":"/wave/docs/examples/plot-form"},{"id":"examples/plot-histogram","path":"/wave/docs/examples/plot-histogram"},{"id":"examples/plot-interval","path":"/wave/docs/examples/plot-interval"},{"id":"examples/plot-interval-annotation","path":"/wave/docs/examples/plot-interval-annotation"},{"id":"examples/plot-interval-annotation-transpose","path":"/wave/docs/examples/plot-interval-annotation-transpose"},{"id":"examples/plot-interval-groups","path":"/wave/docs/examples/plot-interval-groups"},{"id":"examples/plot-interval-groups-transpose","path":"/wave/docs/examples/plot-interval-groups-transpose"},{"id":"examples/plot-interval-helix","path":"/wave/docs/examples/plot-interval-helix"},{"id":"examples/plot-interval-labels","path":"/wave/docs/examples/plot-interval-labels"},{"id":"examples/plot-interval-polar","path":"/wave/docs/examples/plot-interval-polar"},{"id":"examples/plot-interval-polar-stacked","path":"/wave/docs/examples/plot-interval-polar-stacked"},{"id":"examples/plot-interval-range","path":"/wave/docs/examples/plot-interval-range"},{"id":"examples/plot-interval-range-transpose","path":"/wave/docs/examples/plot-interval-range-transpose"},{"id":"examples/plot-interval-stacked","path":"/wave/docs/examples/plot-interval-stacked"},{"id":"examples/plot-interval-stacked-grouped","path":"/wave/docs/examples/plot-interval-stacked-grouped"},{"id":"examples/plot-interval-stacked-grouped-transpose","path":"/wave/docs/examples/plot-interval-stacked-grouped-transpose"},{"id":"examples/plot-interval-stacked-transpose","path":"/wave/docs/examples/plot-interval-stacked-transpose"},{"id":"examples/plot-interval-theta","path":"/wave/docs/examples/plot-interval-theta"},{"id":"examples/plot-interval-transpose","path":"/wave/docs/examples/plot-interval-transpose"},{"id":"examples/plot-line","path":"/wave/docs/examples/plot-line"},{"id":"examples/plot-line-annotation","path":"/wave/docs/examples/plot-line-annotation"},{"id":"examples/plot-line-groups","path":"/wave/docs/examples/plot-line-groups"},{"id":"examples/plot-line-labels","path":"/wave/docs/examples/plot-line-labels"},{"id":"examples/plot-line-labels-no-overlap","path":"/wave/docs/examples/plot-line-labels-no-overlap"},{"id":"examples/plot-line-labels-stroked","path":"/wave/docs/examples/plot-line-labels-stroked"},{"id":"examples/plot-line-smooth","path":"/wave/docs/examples/plot-line-smooth"},{"id":"examples/plot-matplotlib","path":"/wave/docs/examples/plot-matplotlib"},{"id":"examples/plot-path","path":"/wave/docs/examples/plot-path"},{"id":"examples/plot-path-point","path":"/wave/docs/examples/plot-path-point"},{"id":"examples/plot-path-smooth","path":"/wave/docs/examples/plot-path-smooth"},{"id":"examples/plot-plotly","path":"/wave/docs/examples/plot-plotly"},{"id":"examples/plot-point","path":"/wave/docs/examples/plot-point"},{"id":"examples/plot-point-annotation","path":"/wave/docs/examples/plot-point-annotation"},{"id":"examples/plot-point-custom","path":"/wave/docs/examples/plot-point-custom"},{"id":"examples/plot-point-groups","path":"/wave/docs/examples/plot-point-groups"},{"id":"examples/plot-point-map","path":"/wave/docs/examples/plot-point-map"},{"id":"examples/plot-point-shapes","path":"/wave/docs/examples/plot-point-shapes"},{"id":"examples/plot-point-sizes","path":"/wave/docs/examples/plot-point-sizes"},{"id":"examples/plot-polygon","path":"/wave/docs/examples/plot-polygon"},{"id":"examples/plot-step","path":"/wave/docs/examples/plot-step"},{"id":"examples/plot-step-after","path":"/wave/docs/examples/plot-step-after"},{"id":"examples/plot-step-before","path":"/wave/docs/examples/plot-step-before"},{"id":"examples/plot-vegalite","path":"/wave/docs/examples/plot-vegalite"},{"id":"examples/plot-vegalite-form","path":"/wave/docs/examples/plot-vegalite-form"},{"id":"examples/plot-vegalite-update","path":"/wave/docs/examples/plot-vegalite-update"},{"id":"examples/progress","path":"/wave/docs/examples/progress"},{"id":"examples/progress-update","path":"/wave/docs/examples/progress-update"},{"id":"examples/range-slider","path":"/wave/docs/examples/range-slider"},{"id":"examples/separator","path":"/wave/docs/examples/separator"},{"id":"examples/slider","path":"/wave/docs/examples/slider"},{"id":"examples/spinbox","path":"/wave/docs/examples/spinbox"},{"id":"examples/stat-large","path":"/wave/docs/examples/stat-large"},{"id":"examples/stat-large-bar","path":"/wave/docs/examples/stat-large-bar"},{"id":"examples/stat-small","path":"/wave/docs/examples/stat-small"},{"id":"examples/stat-small-series-area","path":"/wave/docs/examples/stat-small-series-area"},{"id":"examples/stat-small-series-interval","path":"/wave/docs/examples/stat-small-series-interval"},{"id":"examples/stat-tall-gauge","path":"/wave/docs/examples/stat-tall-gauge"},{"id":"examples/stat-tall-series-area","path":"/wave/docs/examples/stat-tall-series-area"},{"id":"examples/stat-tall-series-interval","path":"/wave/docs/examples/stat-tall-series-interval"},{"id":"examples/stat-wide-bar","path":"/wave/docs/examples/stat-wide-bar"},{"id":"examples/stat-wide-gauge","path":"/wave/docs/examples/stat-wide-gauge"},{"id":"examples/stat-wide-series-area","path":"/wave/docs/examples/stat-wide-series-area"},{"id":"examples/stat-wide-series-interval","path":"/wave/docs/examples/stat-wide-series-interval"},{"id":"examples/stepper","path":"/wave/docs/examples/stepper"},{"id":"examples/swatch-picker","path":"/wave/docs/examples/swatch-picker"},{"id":"examples/tab","path":"/wave/docs/examples/tab"},{"id":"examples/tab-delete","path":"/wave/docs/examples/tab-delete"},{"id":"examples/tab-link","path":"/wave/docs/examples/tab-link"},{"id":"examples/tab-routing","path":"/wave/docs/examples/tab-routing"},{"id":"examples/table","path":"/wave/docs/examples/table"},{"id":"examples/table-download","path":"/wave/docs/examples/table-download"},{"id":"examples/table-filter","path":"/wave/docs/examples/table-filter"},{"id":"examples/table-filter-backend","path":"/wave/docs/examples/table-filter-backend"},{"id":"examples/table-groupby","path":"/wave/docs/examples/table-groupby"},{"id":"examples/table-markdown","path":"/wave/docs/examples/table-markdown"},{"id":"examples/table-search","path":"/wave/docs/examples/table-search"},{"id":"examples/table-select","path":"/wave/docs/examples/table-select"},{"id":"examples/table-sort","path":"/wave/docs/examples/table-sort"},{"id":"examples/tabs","path":"/wave/docs/examples/tabs"},{"id":"examples/template","path":"/wave/docs/examples/template"},{"id":"examples/template-data","path":"/wave/docs/examples/template-data"},{"id":"examples/text","path":"/wave/docs/examples/text"},{"id":"examples/text-sizes","path":"/wave/docs/examples/text-sizes"},{"id":"examples/textbox","path":"/wave/docs/examples/textbox"},{"id":"examples/textbox-trigger","path":"/wave/docs/examples/textbox-trigger"},{"id":"examples/todo","path":"/wave/docs/examples/todo"},{"id":"examples/toggle","path":"/wave/docs/examples/toggle"},{"id":"examples/toolbar","path":"/wave/docs/examples/toolbar"},{"id":"examples/toolbar-routing","path":"/wave/docs/examples/toolbar-routing"},{"id":"examples/upload","path":"/wave/docs/examples/upload"},{"id":"examples/upload-async","path":"/wave/docs/examples/upload-async"},{"id":"examples/upload-download","path":"/wave/docs/examples/upload-download"},{"id":"examples/upload-ui","path":"/wave/docs/examples/upload-ui"},{"id":"examples/wizard","path":"/wave/docs/examples/wizard"},{"id":"expressions","path":"/wave/docs/expressions"},{"id":"files","path":"/wave/docs/files"},{"id":"getting-started","path":"/wave/docs/getting-started"},{"id":"graphics","path":"/wave/docs/graphics"},{"id":"guide","path":"/wave/docs/guide"},{"id":"installation","path":"/wave/docs/installation"},{"id":"layout","path":"/wave/docs/layout"},{"id":"logging","path":"/wave/docs/logging"},{"id":"migrating-0","path":"/wave/docs/migrating-0"},{"id":"pages","path":"/wave/docs/pages"},{"id":"plotting","path":"/wave/docs/plotting"},{"id":"realtime","path":"/wave/docs/realtime"},{"id":"routing","path":"/wave/docs/routing"},{"id":"scripts","path":"/wave/docs/scripts"},{"id":"security","path":"/wave/docs/security"},{"id":"state","path":"/wave/docs/state"},{"id":"testing","path":"/wave/docs/testing"},{"id":"tour","path":"/wave/docs/tour"},{"id":"tutorial-beer","path":"/wave/docs/tutorial-beer"},{"id":"tutorial-counter","path":"/wave/docs/tutorial-counter"},{"id":"tutorial-hello","path":"/wave/docs/tutorial-hello"},{"id":"tutorial-monitor","path":"/wave/docs/tutorial-monitor"},{"id":"tutorial-todo","path":"/wave/docs/tutorial-todo"}]}]}}}')},function(e){e.exports=JSON.parse('{"docusaurusVersion":"2.0.0-alpha.65","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"2.0.0-alpha.65"},"docusaurus-plugin-content-blog":{"type":"package","name":"@docusaurus/plugin-content-blog","version":"2.0.0-alpha.65"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"2.0.0-alpha.65"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"2.0.0-alpha.65"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"2.0.0-alpha.65"}}}')},function(e,t,n){"use strict";var a=n(22),o={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},r={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},i={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},l={};function s(e){return a.isMemo(e)?i:l[e.$$typeof]||o}l[a.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},l[a.Memo]=i;var c=Object.defineProperty,u=Object.getOwnPropertyNames,p=Object.getOwnPropertySymbols,d=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,m=Object.prototype;e.exports=function e(t,n,a){if("string"!=typeof n){if(m){var o=f(n);o&&o!==m&&e(t,o,a)}var i=u(n);p&&(i=i.concat(p(n)));for(var l=s(t),h=s(n),v=0;v<i.length;++v){var g=i[v];if(!(r[g]||a&&a[g]||h&&h[g]||l&&l[g])){var b=d(n,g);try{c(t,g,b)}catch(x){}}}}return t}},function(e,t){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(a){"object"==typeof window&&(n=window)}e.exports=n},function(e,t,n){e.exports=n(43)},function(e,t,n){"use strict";var a=n(20),o="function"==typeof Symbol&&Symbol.for,r=o?Symbol.for("react.element"):60103,i=o?Symbol.for("react.portal"):60106,l=o?Symbol.for("react.fragment"):60107,s=o?Symbol.for("react.strict_mode"):60108,c=o?Symbol.for("react.profiler"):60114,u=o?Symbol.for("react.provider"):60109,p=o?Symbol.for("react.context"):60110,d=o?Symbol.for("react.forward_ref"):60112,f=o?Symbol.for("react.suspense"):60113,m=o?Symbol.for("react.memo"):60115,h=o?Symbol.for("react.lazy"):60116,v="function"==typeof Symbol&&Symbol.iterator;function g(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n<arguments.length;n++)t+="&args[]="+encodeURIComponent(arguments[n]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var b={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},x={};function w(e,t,n){this.props=e,this.context=t,this.refs=x,this.updater=n||b}function y(){}function k(e,t,n){this.props=e,this.context=t,this.refs=x,this.updater=n||b}w.prototype.isReactComponent={},w.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error(g(85));this.updater.enqueueSetState(this,e,t,"setState")},w.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},y.prototype=w.prototype;var E=k.prototype=new y;E.constructor=k,a(E,w.prototype),E.isPureReactComponent=!0;var S={current:null},T=Object.prototype.hasOwnProperty,_={key:!0,ref:!0,__self:!0,__source:!0};function O(e,t,n){var a,o={},i=null,l=null;if(null!=t)for(a in void 0!==t.ref&&(l=t.ref),void 0!==t.key&&(i=""+t.key),t)T.call(t,a)&&!_.hasOwnProperty(a)&&(o[a]=t[a]);var s=arguments.length-2;if(1===s)o.children=n;else if(1<s){for(var c=Array(s),u=0;u<s;u++)c[u]=arguments[u+2];o.children=c}if(e&&e.defaultProps)for(a in s=e.defaultProps)void 0===o[a]&&(o[a]=s[a]);return{$$typeof:r,type:e,key:i,ref:l,props:o,_owner:S.current}}function C(e){return"object"==typeof e&&null!==e&&e.$$typeof===r}var P=/\/+/g,N=[];function A(e,t,n,a){if(N.length){var o=N.pop();return o.result=e,o.keyPrefix=t,o.func=n,o.context=a,o.count=0,o}return{result:e,keyPrefix:t,func:n,context:a,count:0}}function R(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,10>N.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<e.length;s++){var c=t+L(o=e[s],s);l+=I(o,c,n,a)}else if(null===e||"object"!=typeof e?c=null:c="function"==typeof(c=v&&e[v]||e["@@iterator"])?c:null,"function"==typeof c)for(e=c.call(e),s=0;!(o=e.next()).done;)l+=I(o=o.value,c=t+L(o,s++),n,a);else if("object"===o)throw n=""+e,Error(g(31,"[object Object]"===n?"object with keys {"+Object.keys(e).join(", ")+"}":n,""));return l}function F(e,t,n){return null==e?0:I(e,"",t,n)}function L(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+(""+e).replace(/[=:]/g,(function(e){return t[e]}))}(e.key):t.toString(36)}function D(e,t){e.func.call(e.context,t,e.count++)}function j(e,t,n){var a=e.result,o=e.keyPrefix;e=e.func.call(e.context,t,e.count++),Array.isArray(e)?M(e,a,n,(function(e){return e})):null!=e&&(C(e)&&(e=function(e,t){return{$$typeof:r,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(e,o+(!e.key||t&&t.key===e.key?"":(""+e.key).replace(P,"$&/")+"/")+n)),a.push(e))}function M(e,t,n,a,o){var r="";null!=n&&(r=(""+n).replace(P,"$&/")+"/"),F(e,j,t=A(t,r,a,o)),R(t)}var z={current:null};function $(){var e=z.current;if(null===e)throw Error(g(321));return e}var U={ReactCurrentDispatcher:z,ReactCurrentBatchConfig:{suspense:null},ReactCurrentOwner:S,IsSomeRendererActing:{current:!1},assign:a};t.Children={map:function(e,t,n){if(null==e)return e;var a=[];return M(e,a,null,t,n),a},forEach:function(e,t,n){if(null==e)return e;F(e,D,t=A(null,null,t,n)),R(t)},count:function(e){return F(e,(function(){return null}),null)},toArray:function(e){var t=[];return M(e,t,null,(function(e){return e})),t},only:function(e){if(!C(e))throw Error(g(143));return e}},t.Component=w,t.Fragment=l,t.Profiler=c,t.PureComponent=k,t.StrictMode=s,t.Suspense=f,t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=U,t.cloneElement=function(e,t,n){if(null==e)throw Error(g(267,e));var o=a({},e.props),i=e.key,l=e.ref,s=e._owner;if(null!=t){if(void 0!==t.ref&&(l=t.ref,s=S.current),void 0!==t.key&&(i=""+t.key),e.type&&e.type.defaultProps)var c=e.type.defaultProps;for(u in t)T.call(t,u)&&!_.hasOwnProperty(u)&&(o[u]=void 0===t[u]&&void 0!==c?c[u]:t[u])}var u=arguments.length-2;if(1===u)o.children=n;else if(1<u){c=Array(u);for(var p=0;p<u;p++)c[p]=arguments[p+2];o.children=c}return{$$typeof:r,type:e.type,key:i,ref:l,props:o,_owner:s}},t.createContext=function(e,t){return void 0===t&&(t=null),(e={$$typeof:p,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null}).Provider={$$typeof:u,_context:e},e.Consumer=e},t.createElement=O,t.createFactory=function(e){var t=O.bind(null,e);return t.type=e,t},t.createRef=function(){return{current:null}},t.forwardRef=function(e){return{$$typeof:d,render:e}},t.isValidElement=C,t.lazy=function(e){return{$$typeof:h,_ctor:e,_status:-1,_result:null}},t.memo=function(e,t){return{$$typeof:m,type:e,compare:void 0===t?null:t}},t.useCallback=function(e,t){return $().useCallback(e,t)},t.useContext=function(e,t){return $().useContext(e,t)},t.useDebugValue=function(){},t.useEffect=function(e,t){return $().useEffect(e,t)},t.useImperativeHandle=function(e,t,n){return $().useImperativeHandle(e,t,n)},t.useLayoutEffect=function(e,t){return $().useLayoutEffect(e,t)},t.useMemo=function(e,t){return $().useMemo(e,t)},t.useReducer=function(e,t,n){return $().useReducer(e,t,n)},t.useRef=function(e){return $().useRef(e)},t.useState=function(e){return $().useState(e)},t.version="16.13.1"},function(e,t,n){"use strict";var a=n(0),o=n(20),r=n(32);function i(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n<arguments.length;n++)t+="&args[]="+encodeURIComponent(arguments[n]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}if(!a)throw Error(i(227));function l(e,t,n,a,o,r,i,l,s){var c=Array.prototype.slice.call(arguments,3);try{t.apply(n,c)}catch(u){this.onError(u)}}var s=!1,c=null,u=!1,p=null,d={onError:function(e){s=!0,c=e}};function f(e,t,n,a,o,r,i,u,p){s=!1,c=null,l.apply(d,arguments)}var m=null,h=null,v=null;function g(e,t,n){var a=e.type||"unknown-event";e.currentTarget=v(n),function(e,t,n,a,o,r,l,d,m){if(f.apply(this,arguments),s){if(!s)throw Error(i(198));var h=c;s=!1,c=null,u||(u=!0,p=h)}}(a,t,void 0,e),e.currentTarget=null}var b=null,x={};function w(){if(b)for(var e in x){var t=x[e],n=b.indexOf(e);if(!(-1<n))throw Error(i(96,e));if(!k[n]){if(!t.extractEvents)throw Error(i(97,e));for(var a in k[n]=t,n=t.eventTypes){var o=void 0,r=n[a],l=t,s=a;if(E.hasOwnProperty(s))throw Error(i(99,s));E[s]=r;var c=r.phasedRegistrationNames;if(c){for(o in c)c.hasOwnProperty(o)&&y(c[o],l,s);o=!0}else r.registrationName?(y(r.registrationName,l,s),o=!0):o=!1;if(!o)throw Error(i(98,a,e))}}}}function y(e,t,n){if(S[e])throw Error(i(100,e));S[e]=t,T[e]=t.eventTypes[n].dependencies}var k=[],E={},S={},T={};function _(e){var t,n=!1;for(t in e)if(e.hasOwnProperty(t)){var a=e[t];if(!x.hasOwnProperty(t)||x[t]!==a){if(x[t])throw Error(i(102,t));x[t]=a,n=!0}}n&&w()}var O=!("undefined"==typeof window||void 0===window.document||void 0===window.document.createElement),C=null,P=null,N=null;function A(e){if(e=h(e)){if("function"!=typeof C)throw Error(i(280));var t=e.stateNode;t&&(t=m(t),C(e.stateNode,e.type,t))}}function R(e){P?N?N.push(e):N=[e]:P=e}function I(){if(P){var e=P,t=N;if(N=P=null,A(e),t)for(e=0;e<t.length;e++)A(t[e])}}function F(e,t){return e(t)}function L(e,t,n,a,o){return e(t,n,a,o)}function D(){}var j=F,M=!1,z=!1;function $(){null===P&&null===N||(D(),I())}function U(e,t,n){if(z)return e(t,n);z=!0;try{return j(e,t,n)}finally{z=!1,$()}}var B=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,H=Object.prototype.hasOwnProperty,W={},V={};function G(e,t,n,a,o,r){this.acceptsBooleans=2===t||3===t||4===t,this.attributeName=a,this.attributeNamespace=o,this.mustUseProperty=n,this.propertyName=e,this.type=t,this.sanitizeURL=r}var q={};"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach((function(e){q[e]=new G(e,0,!1,e,null,!1)})),[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach((function(e){var t=e[0];q[t]=new G(t,1,!1,e[1],null,!1)})),["contentEditable","draggable","spellCheck","value"].forEach((function(e){q[e]=new G(e,2,!1,e.toLowerCase(),null,!1)})),["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach((function(e){q[e]=new G(e,2,!1,e,null,!1)})),"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach((function(e){q[e]=new G(e,3,!1,e.toLowerCase(),null,!1)})),["checked","multiple","muted","selected"].forEach((function(e){q[e]=new G(e,3,!0,e,null,!1)})),["capture","download"].forEach((function(e){q[e]=new G(e,4,!1,e,null,!1)})),["cols","rows","size","span"].forEach((function(e){q[e]=new G(e,6,!1,e,null,!1)})),["rowSpan","start"].forEach((function(e){q[e]=new G(e,5,!1,e.toLowerCase(),null,!1)}));var K=/[\-:]([a-z])/g;function Q(e){return e[1].toUpperCase()}"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach((function(e){var t=e.replace(K,Q);q[t]=new G(t,1,!1,e,null,!1)})),"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach((function(e){var t=e.replace(K,Q);q[t]=new G(t,1,!1,e,"http://www.w3.org/1999/xlink",!1)})),["xml:base","xml:lang","xml:space"].forEach((function(e){var t=e.replace(K,Q);q[t]=new G(t,1,!1,e,"http://www.w3.org/XML/1998/namespace",!1)})),["tabIndex","crossOrigin"].forEach((function(e){q[e]=new G(e,1,!1,e.toLowerCase(),null,!1)})),q.xlinkHref=new G("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0),["src","href","action","formAction"].forEach((function(e){q[e]=new G(e,1,!1,e.toLowerCase(),null,!0)}));var Y=a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function X(e,t,n,a){var o=q.hasOwnProperty(t)?q[t]:null;(null!==o?0===o.type:!a&&(2<t.length&&("o"===t[0]||"O"===t[0])&&("n"===t[1]||"N"===t[1])))||(function(e,t,n,a){if(null==t||function(e,t,n,a){if(null!==n&&0===n.type)return!1;switch(typeof t){case"function":case"symbol":return!0;case"boolean":return!a&&(null!==n?!n.acceptsBooleans:"data-"!==(e=e.toLowerCase().slice(0,5))&&"aria-"!==e);default:return!1}}(e,t,n,a))return!0;if(a)return!1;if(null!==n)switch(n.type){case 3:return!t;case 4:return!1===t;case 5:return isNaN(t);case 6:return isNaN(t)||1>t}return!1}(t,n,o,a)&&(n=null),a||null===o?function(e){return!!H.call(V,e)||!H.call(W,e)&&(B.test(e)?V[e]=!0:(W[e]=!0,!1))}(t)&&(null===n?e.removeAttribute(t):e.setAttribute(t,""+n)):o.mustUseProperty?e[o.propertyName]=null===n?3!==o.type&&"":n:(t=o.attributeName,a=o.attributeNamespace,null===n?e.removeAttribute(t):(n=3===(o=o.type)||4===o&&!0===n?"":""+n,a?e.setAttributeNS(a,t,n):e.setAttribute(t,n))))}Y.hasOwnProperty("ReactCurrentDispatcher")||(Y.ReactCurrentDispatcher={current:null}),Y.hasOwnProperty("ReactCurrentBatchConfig")||(Y.ReactCurrentBatchConfig={suspense:null});var Z=/^(.*)[\\\/]/,J="function"==typeof Symbol&&Symbol.for,ee=J?Symbol.for("react.element"):60103,te=J?Symbol.for("react.portal"):60106,ne=J?Symbol.for("react.fragment"):60107,ae=J?Symbol.for("react.strict_mode"):60108,oe=J?Symbol.for("react.profiler"):60114,re=J?Symbol.for("react.provider"):60109,ie=J?Symbol.for("react.context"):60110,le=J?Symbol.for("react.concurrent_mode"):60111,se=J?Symbol.for("react.forward_ref"):60112,ce=J?Symbol.for("react.suspense"):60113,ue=J?Symbol.for("react.suspense_list"):60120,pe=J?Symbol.for("react.memo"):60115,de=J?Symbol.for("react.lazy"):60116,fe=J?Symbol.for("react.block"):60121,me="function"==typeof Symbol&&Symbol.iterator;function he(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=me&&e[me]||e["@@iterator"])?e:null}function ve(e){if(null==e)return null;if("function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case ne:return"Fragment";case te:return"Portal";case oe:return"Profiler";case ae:return"StrictMode";case ce:return"Suspense";case ue:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case ie:return"Context.Consumer";case re:return"Context.Provider";case se:var t=e.render;return t=t.displayName||t.name||"",e.displayName||(""!==t?"ForwardRef("+t+")":"ForwardRef");case pe:return ve(e.type);case fe:return ve(e.render);case de:if(e=1===e._status?e._result:null)return ve(e)}return null}function ge(e){var t="";do{e:switch(e.tag){case 3:case 4:case 6:case 7:case 10:case 9:var n="";break e;default:var a=e._debugOwner,o=e._debugSource,r=ve(e.type);n=null,a&&(n=ve(a.type)),a=r,r="",o?r=" (at "+o.fileName.replace(Z,"")+":"+o.lineNumber+")":n&&(r=" (created by "+n+")"),n="\n    in "+(a||"Unknown")+r}t+=n,e=e.return}while(e);return t}function be(e){switch(typeof e){case"boolean":case"number":case"object":case"string":case"undefined":return e;default:return""}}function xe(e){var t=e.type;return(e=e.nodeName)&&"input"===e.toLowerCase()&&("checkbox"===t||"radio"===t)}function we(e){e._valueTracker||(e._valueTracker=function(e){var t=xe(e)?"checked":"value",n=Object.getOwnPropertyDescriptor(e.constructor.prototype,t),a=""+e[t];if(!e.hasOwnProperty(t)&&void 0!==n&&"function"==typeof n.get&&"function"==typeof n.set){var o=n.get,r=n.set;return Object.defineProperty(e,t,{configurable:!0,get:function(){return o.call(this)},set:function(e){a=""+e,r.call(this,e)}}),Object.defineProperty(e,t,{enumerable:n.enumerable}),{getValue:function(){return a},setValue:function(e){a=""+e},stopTracking:function(){e._valueTracker=null,delete e[t]}}}}(e))}function ye(e){if(!e)return!1;var t=e._valueTracker;if(!t)return!0;var n=t.getValue(),a="";return e&&(a=xe(e)?e.checked?"true":"false":e.value),(e=a)!==n&&(t.setValue(e),!0)}function ke(e,t){var n=t.checked;return o({},t,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=n?n:e._wrapperState.initialChecked})}function Ee(e,t){var n=null==t.defaultValue?"":t.defaultValue,a=null!=t.checked?t.checked:t.defaultChecked;n=be(null!=t.value?t.value:n),e._wrapperState={initialChecked:a,initialValue:n,controlled:"checkbox"===t.type||"radio"===t.type?null!=t.checked:null!=t.value}}function Se(e,t){null!=(t=t.checked)&&X(e,"checked",t,!1)}function Te(e,t){Se(e,t);var n=be(t.value),a=t.type;if(null!=n)"number"===a?(0===n&&""===e.value||e.value!=n)&&(e.value=""+n):e.value!==""+n&&(e.value=""+n);else if("submit"===a||"reset"===a)return void e.removeAttribute("value");t.hasOwnProperty("value")?Oe(e,t.type,n):t.hasOwnProperty("defaultValue")&&Oe(e,t.type,be(t.defaultValue)),null==t.checked&&null!=t.defaultChecked&&(e.defaultChecked=!!t.defaultChecked)}function _e(e,t,n){if(t.hasOwnProperty("value")||t.hasOwnProperty("defaultValue")){var a=t.type;if(!("submit"!==a&&"reset"!==a||void 0!==t.value&&null!==t.value))return;t=""+e._wrapperState.initialValue,n||t===e.value||(e.value=t),e.defaultValue=t}""!==(n=e.name)&&(e.name=""),e.defaultChecked=!!e._wrapperState.initialChecked,""!==n&&(e.name=n)}function Oe(e,t,n){"number"===t&&e.ownerDocument.activeElement===e||(null==n?e.defaultValue=""+e._wrapperState.initialValue:e.defaultValue!==""+n&&(e.defaultValue=""+n))}function Ce(e,t){return e=o({children:void 0},t),(t=function(e){var t="";return a.Children.forEach(e,(function(e){null!=e&&(t+=e)})),t}(t.children))&&(e.children=t),e}function Pe(e,t,n,a){if(e=e.options,t){t={};for(var o=0;o<n.length;o++)t["$"+n[o]]=!0;for(n=0;n<e.length;n++)o=t.hasOwnProperty("$"+e[n].value),e[n].selected!==o&&(e[n].selected=o),o&&a&&(e[n].defaultSelected=!0)}else{for(n=""+be(n),t=null,o=0;o<e.length;o++){if(e[o].value===n)return e[o].selected=!0,void(a&&(e[o].defaultSelected=!0));null!==t||e[o].disabled||(t=e[o])}null!==t&&(t.selected=!0)}}function Ne(e,t){if(null!=t.dangerouslySetInnerHTML)throw Error(i(91));return o({},t,{value:void 0,defaultValue:void 0,children:""+e._wrapperState.initialValue})}function Ae(e,t){var n=t.value;if(null==n){if(n=t.children,t=t.defaultValue,null!=n){if(null!=t)throw Error(i(92));if(Array.isArray(n)){if(!(1>=n.length))throw Error(i(93));n=n[0]}t=n}null==t&&(t=""),n=t}e._wrapperState={initialValue:be(n)}}function Re(e,t){var n=be(t.value),a=be(t.defaultValue);null!=n&&((n=""+n)!==e.value&&(e.value=n),null==t.defaultValue&&e.defaultValue!==n&&(e.defaultValue=n)),null!=a&&(e.defaultValue=""+a)}function Ie(e){var t=e.textContent;t===e._wrapperState.initialValue&&""!==t&&null!==t&&(e.value=t)}var Fe="http://www.w3.org/1999/xhtml",Le="http://www.w3.org/2000/svg";function De(e){switch(e){case"svg":return"http://www.w3.org/2000/svg";case"math":return"http://www.w3.org/1998/Math/MathML";default:return"http://www.w3.org/1999/xhtml"}}function je(e,t){return null==e||"http://www.w3.org/1999/xhtml"===e?De(t):"http://www.w3.org/2000/svg"===e&&"foreignObject"===t?"http://www.w3.org/1999/xhtml":e}var Me,ze,$e=(ze=function(e,t){if(e.namespaceURI!==Le||"innerHTML"in e)e.innerHTML=t;else{for((Me=Me||document.createElement("div")).innerHTML="<svg>"+t.valueOf().toString()+"</svg>",t=Me.firstChild;e.firstChild;)e.removeChild(e.firstChild);for(;t.firstChild;)e.appendChild(t.firstChild)}},"undefined"!=typeof MSApp&&MSApp.execUnsafeLocalFunction?function(e,t,n,a){MSApp.execUnsafeLocalFunction((function(){return ze(e,t)}))}:ze);function Ue(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t}function Be(e,t){var n={};return n[e.toLowerCase()]=t.toLowerCase(),n["Webkit"+e]="webkit"+t,n["Moz"+e]="moz"+t,n}var He={animationend:Be("Animation","AnimationEnd"),animationiteration:Be("Animation","AnimationIteration"),animationstart:Be("Animation","AnimationStart"),transitionend:Be("Transition","TransitionEnd")},We={},Ve={};function Ge(e){if(We[e])return We[e];if(!He[e])return e;var t,n=He[e];for(t in n)if(n.hasOwnProperty(t)&&t in Ve)return We[e]=n[t];return e}O&&(Ve=document.createElement("div").style,"AnimationEvent"in window||(delete He.animationend.animation,delete He.animationiteration.animation,delete He.animationstart.animation),"TransitionEvent"in window||delete He.transitionend.transition);var qe=Ge("animationend"),Ke=Ge("animationiteration"),Qe=Ge("animationstart"),Ye=Ge("transitionend"),Xe="abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange waiting".split(" "),Ze=new("function"==typeof WeakMap?WeakMap:Map);function Je(e){var t=Ze.get(e);return void 0===t&&(t=new Map,Ze.set(e,t)),t}function et(e){var t=e,n=e;if(e.alternate)for(;t.return;)t=t.return;else{e=t;do{0!=(1026&(t=e).effectTag)&&(n=t.return),e=t.return}while(e)}return 3===t.tag?n:null}function tt(e){if(13===e.tag){var t=e.memoizedState;if(null===t&&(null!==(e=e.alternate)&&(t=e.memoizedState)),null!==t)return t.dehydrated}return null}function nt(e){if(et(e)!==e)throw Error(i(188))}function at(e){if(!(e=function(e){var t=e.alternate;if(!t){if(null===(t=et(e)))throw Error(i(188));return t!==e?null:e}for(var n=e,a=t;;){var o=n.return;if(null===o)break;var r=o.alternate;if(null===r){if(null!==(a=o.return)){n=a;continue}break}if(o.child===r.child){for(r=o.child;r;){if(r===n)return nt(o),e;if(r===a)return nt(o),t;r=r.sibling}throw Error(i(188))}if(n.return!==a.return)n=o,a=r;else{for(var l=!1,s=o.child;s;){if(s===n){l=!0,n=o,a=r;break}if(s===a){l=!0,a=o,n=r;break}s=s.sibling}if(!l){for(s=r.child;s;){if(s===n){l=!0,n=r,a=o;break}if(s===a){l=!0,a=r,n=o;break}s=s.sibling}if(!l)throw Error(i(189))}}if(n.alternate!==a)throw Error(i(190))}if(3!==n.tag)throw Error(i(188));return n.stateNode.current===n?e:t}(e)))return null;for(var t=e;;){if(5===t.tag||6===t.tag)return t;if(t.child)t.child.return=t,t=t.child;else{if(t===e)break;for(;!t.sibling;){if(!t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}}return null}function ot(e,t){if(null==t)throw Error(i(30));return null==e?t:Array.isArray(e)?Array.isArray(t)?(e.push.apply(e,t),e):(e.push(t),e):Array.isArray(t)?[e].concat(t):[e,t]}function rt(e,t,n){Array.isArray(e)?e.forEach(t,n):e&&t.call(n,e)}var it=null;function lt(e){if(e){var t=e._dispatchListeners,n=e._dispatchInstances;if(Array.isArray(t))for(var a=0;a<t.length&&!e.isPropagationStopped();a++)g(e,t[a],n[a]);else t&&g(e,t,n);e._dispatchListeners=null,e._dispatchInstances=null,e.isPersistent()||e.constructor.release(e)}}function st(e){if(null!==e&&(it=ot(it,e)),e=it,it=null,e){if(rt(e,lt),it)throw Error(i(95));if(u)throw e=p,u=!1,p=null,e}}function ct(e){return(e=e.target||e.srcElement||window).correspondingUseElement&&(e=e.correspondingUseElement),3===e.nodeType?e.parentNode:e}function ut(e){if(!O)return!1;var t=(e="on"+e)in document;return t||((t=document.createElement("div")).setAttribute(e,"return;"),t="function"==typeof t[e]),t}var pt=[];function dt(e){e.topLevelType=null,e.nativeEvent=null,e.targetInst=null,e.ancestors.length=0,10>pt.length&&pt.push(e)}function ft(e,t,n,a){if(pt.length){var o=pt.pop();return o.topLevelType=e,o.eventSystemFlags=a,o.nativeEvent=t,o.targetInst=n,o}return{topLevelType:e,eventSystemFlags:a,nativeEvent:t,targetInst:n,ancestors:[]}}function mt(e){var t=e.targetInst,n=t;do{if(!n){e.ancestors.push(n);break}var a=n;if(3===a.tag)a=a.stateNode.containerInfo;else{for(;a.return;)a=a.return;a=3!==a.tag?null:a.stateNode.containerInfo}if(!a)break;5!==(t=n.tag)&&6!==t||e.ancestors.push(n),n=An(a)}while(n);for(n=0;n<e.ancestors.length;n++){t=e.ancestors[n];var o=ct(e.nativeEvent);a=e.topLevelType;var r=e.nativeEvent,i=e.eventSystemFlags;0===n&&(i|=64);for(var l=null,s=0;s<k.length;s++){var c=k[s];c&&(c=c.extractEvents(a,t,r,o,i))&&(l=ot(l,c))}st(l)}}function ht(e,t,n){if(!n.has(e)){switch(e){case"scroll":Qt(t,"scroll",!0);break;case"focus":case"blur":Qt(t,"focus",!0),Qt(t,"blur",!0),n.set("blur",null),n.set("focus",null);break;case"cancel":case"close":ut(e)&&Qt(t,e,!0);break;case"invalid":case"submit":case"reset":break;default:-1===Xe.indexOf(e)&&Kt(e,t)}n.set(e,null)}}var vt,gt,bt,xt=!1,wt=[],yt=null,kt=null,Et=null,St=new Map,Tt=new Map,_t=[],Ot="mousedown mouseup touchcancel touchend touchstart auxclick dblclick pointercancel pointerdown pointerup dragend dragstart drop compositionend compositionstart keydown keypress keyup input textInput close cancel copy cut paste click change contextmenu reset submit".split(" "),Ct="focus blur dragenter dragleave mouseover mouseout pointerover pointerout gotpointercapture lostpointercapture".split(" ");function Pt(e,t,n,a,o){return{blockedOn:e,topLevelType:t,eventSystemFlags:32|n,nativeEvent:o,container:a}}function Nt(e,t){switch(e){case"focus":case"blur":yt=null;break;case"dragenter":case"dragleave":kt=null;break;case"mouseover":case"mouseout":Et=null;break;case"pointerover":case"pointerout":St.delete(t.pointerId);break;case"gotpointercapture":case"lostpointercapture":Tt.delete(t.pointerId)}}function At(e,t,n,a,o,r){return null===e||e.nativeEvent!==r?(e=Pt(t,n,a,o,r),null!==t&&(null!==(t=Rn(t))&&gt(t)),e):(e.eventSystemFlags|=a,e)}function Rt(e){var t=An(e.target);if(null!==t){var n=et(t);if(null!==n)if(13===(t=n.tag)){if(null!==(t=tt(n)))return e.blockedOn=t,void r.unstable_runWithPriority(e.priority,(function(){bt(n)}))}else if(3===t&&n.stateNode.hydrate)return void(e.blockedOn=3===n.tag?n.stateNode.containerInfo:null)}e.blockedOn=null}function It(e){if(null!==e.blockedOn)return!1;var t=Jt(e.topLevelType,e.eventSystemFlags,e.container,e.nativeEvent);if(null!==t){var n=Rn(t);return null!==n&&gt(n),e.blockedOn=t,!1}return!0}function Ft(e,t,n){It(e)&&n.delete(t)}function Lt(){for(xt=!1;0<wt.length;){var e=wt[0];if(null!==e.blockedOn){null!==(e=Rn(e.blockedOn))&&vt(e);break}var t=Jt(e.topLevelType,e.eventSystemFlags,e.container,e.nativeEvent);null!==t?e.blockedOn=t:wt.shift()}null!==yt&&It(yt)&&(yt=null),null!==kt&&It(kt)&&(kt=null),null!==Et&&It(Et)&&(Et=null),St.forEach(Ft),Tt.forEach(Ft)}function Dt(e,t){e.blockedOn===t&&(e.blockedOn=null,xt||(xt=!0,r.unstable_scheduleCallback(r.unstable_NormalPriority,Lt)))}function jt(e){function t(t){return Dt(t,e)}if(0<wt.length){Dt(wt[0],e);for(var n=1;n<wt.length;n++){var a=wt[n];a.blockedOn===e&&(a.blockedOn=null)}}for(null!==yt&&Dt(yt,e),null!==kt&&Dt(kt,e),null!==Et&&Dt(Et,e),St.forEach(t),Tt.forEach(t),n=0;n<_t.length;n++)(a=_t[n]).blockedOn===e&&(a.blockedOn=null);for(;0<_t.length&&null===(n=_t[0]).blockedOn;)Rt(n),null===n.blockedOn&&_t.shift()}var Mt={},zt=new Map,$t=new Map,Ut=["abort","abort",qe,"animationEnd",Ke,"animationIteration",Qe,"animationStart","canplay","canPlay","canplaythrough","canPlayThrough","durationchange","durationChange","emptied","emptied","encrypted","encrypted","ended","ended","error","error","gotpointercapture","gotPointerCapture","load","load","loadeddata","loadedData","loadedmetadata","loadedMetadata","loadstart","loadStart","lostpointercapture","lostPointerCapture","playing","playing","progress","progress","seeking","seeking","stalled","stalled","suspend","suspend","timeupdate","timeUpdate",Ye,"transitionEnd","waiting","waiting"];function Bt(e,t){for(var n=0;n<e.length;n+=2){var a=e[n],o=e[n+1],r="on"+(o[0].toUpperCase()+o.slice(1));r={phasedRegistrationNames:{bubbled:r,captured:r+"Capture"},dependencies:[a],eventPriority:t},$t.set(a,t),zt.set(a,r),Mt[o]=r}}Bt("blur blur cancel cancel click click close close contextmenu contextMenu copy copy cut cut auxclick auxClick dblclick doubleClick dragend dragEnd dragstart dragStart drop drop focus focus input input invalid invalid keydown keyDown keypress keyPress keyup keyUp mousedown mouseDown mouseup mouseUp paste paste pause pause play play pointercancel pointerCancel pointerdown pointerDown pointerup pointerUp ratechange rateChange reset reset seeked seeked submit submit touchcancel touchCancel touchend touchEnd touchstart touchStart volumechange volumeChange".split(" "),0),Bt("drag drag dragenter dragEnter dragexit dragExit dragleave dragLeave dragover dragOver mousemove mouseMove mouseout mouseOut mouseover mouseOver pointermove pointerMove pointerout pointerOut pointerover pointerOver scroll scroll toggle toggle touchmove touchMove wheel wheel".split(" "),1),Bt(Ut,2);for(var Ht="change selectionchange textInput compositionstart compositionend compositionupdate".split(" "),Wt=0;Wt<Ht.length;Wt++)$t.set(Ht[Wt],0);var Vt=r.unstable_UserBlockingPriority,Gt=r.unstable_runWithPriority,qt=!0;function Kt(e,t){Qt(t,e,!1)}function Qt(e,t,n){var a=$t.get(t);switch(void 0===a?2:a){case 0:a=Yt.bind(null,t,1,e);break;case 1:a=Xt.bind(null,t,1,e);break;default:a=Zt.bind(null,t,1,e)}n?e.addEventListener(t,a,!0):e.addEventListener(t,a,!1)}function Yt(e,t,n,a){M||D();var o=Zt,r=M;M=!0;try{L(o,e,t,n,a)}finally{(M=r)||$()}}function Xt(e,t,n,a){Gt(Vt,Zt.bind(null,e,t,n,a))}function Zt(e,t,n,a){if(qt)if(0<wt.length&&-1<Ot.indexOf(e))e=Pt(null,e,t,n,a),wt.push(e);else{var o=Jt(e,t,n,a);if(null===o)Nt(e,a);else if(-1<Ot.indexOf(e))e=Pt(o,e,t,n,a),wt.push(e);else if(!function(e,t,n,a,o){switch(t){case"focus":return yt=At(yt,e,t,n,a,o),!0;case"dragenter":return kt=At(kt,e,t,n,a,o),!0;case"mouseover":return Et=At(Et,e,t,n,a,o),!0;case"pointerover":var r=o.pointerId;return St.set(r,At(St.get(r)||null,e,t,n,a,o)),!0;case"gotpointercapture":return r=o.pointerId,Tt.set(r,At(Tt.get(r)||null,e,t,n,a,o)),!0}return!1}(o,e,t,n,a)){Nt(e,a),e=ft(e,a,null,t);try{U(mt,e)}finally{dt(e)}}}}function Jt(e,t,n,a){if(null!==(n=An(n=ct(a)))){var o=et(n);if(null===o)n=null;else{var r=o.tag;if(13===r){if(null!==(n=tt(o)))return n;n=null}else if(3===r){if(o.stateNode.hydrate)return 3===o.tag?o.stateNode.containerInfo:null;n=null}else o!==n&&(n=null)}}e=ft(e,a,n,t);try{U(mt,e)}finally{dt(e)}return null}var en={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,floodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},tn=["Webkit","ms","Moz","O"];function nn(e,t,n){return null==t||"boolean"==typeof t||""===t?"":n||"number"!=typeof t||0===t||en.hasOwnProperty(e)&&en[e]?(""+t).trim():t+"px"}function an(e,t){for(var n in e=e.style,t)if(t.hasOwnProperty(n)){var a=0===n.indexOf("--"),o=nn(n,t[n],a);"float"===n&&(n="cssFloat"),a?e.setProperty(n,o):e[n]=o}}Object.keys(en).forEach((function(e){tn.forEach((function(t){t=t+e.charAt(0).toUpperCase()+e.substring(1),en[t]=en[e]}))}));var on=o({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0});function rn(e,t){if(t){if(on[e]&&(null!=t.children||null!=t.dangerouslySetInnerHTML))throw Error(i(137,e,""));if(null!=t.dangerouslySetInnerHTML){if(null!=t.children)throw Error(i(60));if("object"!=typeof t.dangerouslySetInnerHTML||!("__html"in t.dangerouslySetInnerHTML))throw Error(i(61))}if(null!=t.style&&"object"!=typeof t.style)throw Error(i(62,""))}}function ln(e,t){if(-1===e.indexOf("-"))return"string"==typeof t.is;switch(e){case"annotation-xml":case"color-profile":case"font-face":case"font-face-src":case"font-face-uri":case"font-face-format":case"font-face-name":case"missing-glyph":return!1;default:return!0}}var sn=Fe;function cn(e,t){var n=Je(e=9===e.nodeType||11===e.nodeType?e:e.ownerDocument);t=T[t];for(var a=0;a<t.length;a++)ht(t[a],e,n)}function un(){}function pn(e){if(void 0===(e=e||("undefined"!=typeof document?document:void 0)))return null;try{return e.activeElement||e.body}catch(t){return e.body}}function dn(e){for(;e&&e.firstChild;)e=e.firstChild;return e}function fn(e,t){var n,a=dn(e);for(e=0;a;){if(3===a.nodeType){if(n=e+a.textContent.length,e<=t&&n>=t)return{node:a,offset:t-e};e=n}e:{for(;a;){if(a.nextSibling){a=a.nextSibling;break e}a=a.parentNode}a=void 0}a=dn(a)}}function mn(e,t){return!(!e||!t)&&(e===t||(!e||3!==e.nodeType)&&(t&&3===t.nodeType?mn(e,t.parentNode):"contains"in e?e.contains(t):!!e.compareDocumentPosition&&!!(16&e.compareDocumentPosition(t))))}function hn(){for(var e=window,t=pn();t instanceof e.HTMLIFrameElement;){try{var n="string"==typeof t.contentWindow.location.href}catch(a){n=!1}if(!n)break;t=pn((e=t.contentWindow).document)}return t}function vn(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return t&&("input"===t&&("text"===e.type||"search"===e.type||"tel"===e.type||"url"===e.type||"password"===e.type)||"textarea"===t||"true"===e.contentEditable)}var gn="$?",bn="$!",xn=null,wn=null;function yn(e,t){switch(e){case"button":case"input":case"select":case"textarea":return!!t.autoFocus}return!1}function kn(e,t){return"textarea"===e||"option"===e||"noscript"===e||"string"==typeof t.children||"number"==typeof t.children||"object"==typeof t.dangerouslySetInnerHTML&&null!==t.dangerouslySetInnerHTML&&null!=t.dangerouslySetInnerHTML.__html}var En="function"==typeof setTimeout?setTimeout:void 0,Sn="function"==typeof clearTimeout?clearTimeout:void 0;function Tn(e){for(;null!=e;e=e.nextSibling){var t=e.nodeType;if(1===t||3===t)break}return e}function _n(e){e=e.previousSibling;for(var t=0;e;){if(8===e.nodeType){var n=e.data;if("$"===n||n===bn||n===gn){if(0===t)return e;t--}else"/$"===n&&t++}e=e.previousSibling}return null}var On=Math.random().toString(36).slice(2),Cn="__reactInternalInstance$"+On,Pn="__reactEventHandlers$"+On,Nn="__reactContainere$"+On;function An(e){var t=e[Cn];if(t)return t;for(var n=e.parentNode;n;){if(t=n[Nn]||n[Cn]){if(n=t.alternate,null!==t.child||null!==n&&null!==n.child)for(e=_n(e);null!==e;){if(n=e[Cn])return n;e=_n(e)}return t}n=(e=n).parentNode}return null}function Rn(e){return!(e=e[Cn]||e[Nn])||5!==e.tag&&6!==e.tag&&13!==e.tag&&3!==e.tag?null:e}function In(e){if(5===e.tag||6===e.tag)return e.stateNode;throw Error(i(33))}function Fn(e){return e[Pn]||null}function Ln(e){do{e=e.return}while(e&&5!==e.tag);return e||null}function Dn(e,t){var n=e.stateNode;if(!n)return null;var a=m(n);if(!a)return null;n=a[t];e:switch(t){case"onClick":case"onClickCapture":case"onDoubleClick":case"onDoubleClickCapture":case"onMouseDown":case"onMouseDownCapture":case"onMouseMove":case"onMouseMoveCapture":case"onMouseUp":case"onMouseUpCapture":case"onMouseEnter":(a=!a.disabled)||(a=!("button"===(e=e.type)||"input"===e||"select"===e||"textarea"===e)),e=!a;break e;default:e=!1}if(e)return null;if(n&&"function"!=typeof n)throw Error(i(231,t,typeof n));return n}function jn(e,t,n){(t=Dn(e,n.dispatchConfig.phasedRegistrationNames[t]))&&(n._dispatchListeners=ot(n._dispatchListeners,t),n._dispatchInstances=ot(n._dispatchInstances,e))}function Mn(e){if(e&&e.dispatchConfig.phasedRegistrationNames){for(var t=e._targetInst,n=[];t;)n.push(t),t=Ln(t);for(t=n.length;0<t--;)jn(n[t],"captured",e);for(t=0;t<n.length;t++)jn(n[t],"bubbled",e)}}function zn(e,t,n){e&&n&&n.dispatchConfig.registrationName&&(t=Dn(e,n.dispatchConfig.registrationName))&&(n._dispatchListeners=ot(n._dispatchListeners,t),n._dispatchInstances=ot(n._dispatchInstances,e))}function $n(e){e&&e.dispatchConfig.registrationName&&zn(e._targetInst,null,e)}function Un(e){rt(e,Mn)}var Bn=null,Hn=null,Wn=null;function Vn(){if(Wn)return Wn;var e,t,n=Hn,a=n.length,o="value"in Bn?Bn.value:Bn.textContent,r=o.length;for(e=0;e<a&&n[e]===o[e];e++);var i=a-e;for(t=1;t<=i&&n[a-t]===o[r-t];t++);return Wn=o.slice(e,1<t?1-t:void 0)}function Gn(){return!0}function qn(){return!1}function Kn(e,t,n,a){for(var o in this.dispatchConfig=e,this._targetInst=t,this.nativeEvent=n,e=this.constructor.Interface)e.hasOwnProperty(o)&&((t=e[o])?this[o]=t(n):"target"===o?this.target=a:this[o]=n[o]);return this.isDefaultPrevented=(null!=n.defaultPrevented?n.defaultPrevented:!1===n.returnValue)?Gn:qn,this.isPropagationStopped=qn,this}function Qn(e,t,n,a){if(this.eventPool.length){var o=this.eventPool.pop();return this.call(o,e,t,n,a),o}return new this(e,t,n,a)}function Yn(e){if(!(e instanceof this))throw Error(i(279));e.destructor(),10>this.eventPool.length&&this.eventPool.push(e)}function Xn(e){e.eventPool=[],e.getPooled=Qn,e.release=Yn}o(Kn.prototype,{preventDefault:function(){this.defaultPrevented=!0;var e=this.nativeEvent;e&&(e.preventDefault?e.preventDefault():"unknown"!=typeof e.returnValue&&(e.returnValue=!1),this.isDefaultPrevented=Gn)},stopPropagation:function(){var e=this.nativeEvent;e&&(e.stopPropagation?e.stopPropagation():"unknown"!=typeof e.cancelBubble&&(e.cancelBubble=!0),this.isPropagationStopped=Gn)},persist:function(){this.isPersistent=Gn},isPersistent:qn,destructor:function(){var e,t=this.constructor.Interface;for(e in t)this[e]=null;this.nativeEvent=this._targetInst=this.dispatchConfig=null,this.isPropagationStopped=this.isDefaultPrevented=qn,this._dispatchInstances=this._dispatchListeners=null}}),Kn.Interface={type:null,target:null,currentTarget:function(){return null},eventPhase:null,bubbles:null,cancelable:null,timeStamp:function(e){return e.timeStamp||Date.now()},defaultPrevented:null,isTrusted:null},Kn.extend=function(e){function t(){}function n(){return a.apply(this,arguments)}var a=this;t.prototype=a.prototype;var r=new t;return o(r,n.prototype),n.prototype=r,n.prototype.constructor=n,n.Interface=o({},a.Interface,e),n.extend=a.extend,Xn(n),n},Xn(Kn);var Zn=Kn.extend({data:null}),Jn=Kn.extend({data:null}),ea=[9,13,27,32],ta=O&&"CompositionEvent"in window,na=null;O&&"documentMode"in document&&(na=document.documentMode);var aa=O&&"TextEvent"in window&&!na,oa=O&&(!ta||na&&8<na&&11>=na),ra=String.fromCharCode(32),ia={beforeInput:{phasedRegistrationNames:{bubbled:"onBeforeInput",captured:"onBeforeInputCapture"},dependencies:["compositionend","keypress","textInput","paste"]},compositionEnd:{phasedRegistrationNames:{bubbled:"onCompositionEnd",captured:"onCompositionEndCapture"},dependencies:"blur compositionend keydown keypress keyup mousedown".split(" ")},compositionStart:{phasedRegistrationNames:{bubbled:"onCompositionStart",captured:"onCompositionStartCapture"},dependencies:"blur compositionstart keydown keypress keyup mousedown".split(" ")},compositionUpdate:{phasedRegistrationNames:{bubbled:"onCompositionUpdate",captured:"onCompositionUpdateCapture"},dependencies:"blur compositionupdate keydown keypress keyup mousedown".split(" ")}},la=!1;function sa(e,t){switch(e){case"keyup":return-1!==ea.indexOf(t.keyCode);case"keydown":return 229!==t.keyCode;case"keypress":case"mousedown":case"blur":return!0;default:return!1}}function ca(e){return"object"==typeof(e=e.detail)&&"data"in e?e.data:null}var ua=!1;var pa={eventTypes:ia,extractEvents:function(e,t,n,a){var o;if(ta)e:{switch(e){case"compositionstart":var r=ia.compositionStart;break e;case"compositionend":r=ia.compositionEnd;break e;case"compositionupdate":r=ia.compositionUpdate;break e}r=void 0}else ua?sa(e,n)&&(r=ia.compositionEnd):"keydown"===e&&229===n.keyCode&&(r=ia.compositionStart);return r?(oa&&"ko"!==n.locale&&(ua||r!==ia.compositionStart?r===ia.compositionEnd&&ua&&(o=Vn()):(Hn="value"in(Bn=a)?Bn.value:Bn.textContent,ua=!0)),r=Zn.getPooled(r,t,n,a),o?r.data=o:null!==(o=ca(n))&&(r.data=o),Un(r),o=r):o=null,(e=aa?function(e,t){switch(e){case"compositionend":return ca(t);case"keypress":return 32!==t.which?null:(la=!0,ra);case"textInput":return(e=t.data)===ra&&la?null:e;default:return null}}(e,n):function(e,t){if(ua)return"compositionend"===e||!ta&&sa(e,t)?(e=Vn(),Wn=Hn=Bn=null,ua=!1,e):null;switch(e){case"paste":return null;case"keypress":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1<t.char.length)return t.char;if(t.which)return String.fromCharCode(t.which)}return null;case"compositionend":return oa&&"ko"!==t.locale?null:t.data;default:return null}}(e,n))?((t=Jn.getPooled(ia.beforeInput,t,n,a)).data=e,Un(t)):t=null,null===o?t:null===t?o:[o,t]}},da={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};function fa(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!da[e.type]:"textarea"===t}var ma={change:{phasedRegistrationNames:{bubbled:"onChange",captured:"onChangeCapture"},dependencies:"blur change click focus input keydown keyup selectionchange".split(" ")}};function ha(e,t,n){return(e=Kn.getPooled(ma.change,e,t,n)).type="change",R(n),Un(e),e}var va=null,ga=null;function ba(e){st(e)}function xa(e){if(ye(In(e)))return e}function wa(e,t){if("change"===e)return t}var ya=!1;function ka(){va&&(va.detachEvent("onpropertychange",Ea),ga=va=null)}function Ea(e){if("value"===e.propertyName&&xa(ga))if(e=ha(ga,e,ct(e)),M)st(e);else{M=!0;try{F(ba,e)}finally{M=!1,$()}}}function Sa(e,t,n){"focus"===e?(ka(),ga=n,(va=t).attachEvent("onpropertychange",Ea)):"blur"===e&&ka()}function Ta(e){if("selectionchange"===e||"keyup"===e||"keydown"===e)return xa(ga)}function _a(e,t){if("click"===e)return xa(t)}function Oa(e,t){if("input"===e||"change"===e)return xa(t)}O&&(ya=ut("input")&&(!document.documentMode||9<document.documentMode));var Ca={eventTypes:ma,_isInputEventSupported:ya,extractEvents:function(e,t,n,a){var o=t?In(t):window,r=o.nodeName&&o.nodeName.toLowerCase();if("select"===r||"input"===r&&"file"===o.type)var i=wa;else if(fa(o))if(ya)i=Oa;else{i=Ta;var l=Sa}else(r=o.nodeName)&&"input"===r.toLowerCase()&&("checkbox"===o.type||"radio"===o.type)&&(i=_a);if(i&&(i=i(e,t)))return ha(i,n,a);l&&l(e,o,t),"blur"===e&&(e=o._wrapperState)&&e.controlled&&"number"===o.type&&Oe(o,"number",o.value)}},Pa=Kn.extend({view:null,detail:null}),Na={Alt:"altKey",Control:"ctrlKey",Meta:"metaKey",Shift:"shiftKey"};function Aa(e){var t=this.nativeEvent;return t.getModifierState?t.getModifierState(e):!!(e=Na[e])&&!!t[e]}function Ra(){return Aa}var Ia=0,Fa=0,La=!1,Da=!1,ja=Pa.extend({screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,getModifierState:Ra,button:null,buttons:null,relatedTarget:function(e){return e.relatedTarget||(e.fromElement===e.srcElement?e.toElement:e.fromElement)},movementX:function(e){if("movementX"in e)return e.movementX;var t=Ia;return Ia=e.screenX,La?"mousemove"===e.type?e.screenX-t:0:(La=!0,0)},movementY:function(e){if("movementY"in e)return e.movementY;var t=Fa;return Fa=e.screenY,Da?"mousemove"===e.type?e.screenY-t:0:(Da=!0,0)}}),Ma=ja.extend({pointerId:null,width:null,height:null,pressure:null,tangentialPressure:null,tiltX:null,tiltY:null,twist:null,pointerType:null,isPrimary:null}),za={mouseEnter:{registrationName:"onMouseEnter",dependencies:["mouseout","mouseover"]},mouseLeave:{registrationName:"onMouseLeave",dependencies:["mouseout","mouseover"]},pointerEnter:{registrationName:"onPointerEnter",dependencies:["pointerout","pointerover"]},pointerLeave:{registrationName:"onPointerLeave",dependencies:["pointerout","pointerover"]}},$a={eventTypes:za,extractEvents:function(e,t,n,a,o){var r="mouseover"===e||"pointerover"===e,i="mouseout"===e||"pointerout"===e;if(r&&0==(32&o)&&(n.relatedTarget||n.fromElement)||!i&&!r)return null;(r=a.window===a?a:(r=a.ownerDocument)?r.defaultView||r.parentWindow:window,i)?(i=t,null!==(t=(t=n.relatedTarget||n.toElement)?An(t):null)&&(t!==et(t)||5!==t.tag&&6!==t.tag)&&(t=null)):i=null;if(i===t)return null;if("mouseout"===e||"mouseover"===e)var l=ja,s=za.mouseLeave,c=za.mouseEnter,u="mouse";else"pointerout"!==e&&"pointerover"!==e||(l=Ma,s=za.pointerLeave,c=za.pointerEnter,u="pointer");if(e=null==i?r:In(i),r=null==t?r:In(t),(s=l.getPooled(s,i,n,a)).type=u+"leave",s.target=e,s.relatedTarget=r,(n=l.getPooled(c,t,n,a)).type=u+"enter",n.target=r,n.relatedTarget=e,u=t,(a=i)&&u)e:{for(c=u,i=0,e=l=a;e;e=Ln(e))i++;for(e=0,t=c;t;t=Ln(t))e++;for(;0<i-e;)l=Ln(l),i--;for(;0<e-i;)c=Ln(c),e--;for(;i--;){if(l===c||l===c.alternate)break e;l=Ln(l),c=Ln(c)}l=null}else l=null;for(c=l,l=[];a&&a!==c&&(null===(i=a.alternate)||i!==c);)l.push(a),a=Ln(a);for(a=[];u&&u!==c&&(null===(i=u.alternate)||i!==c);)a.push(u),u=Ln(u);for(u=0;u<l.length;u++)zn(l[u],"bubbled",s);for(u=a.length;0<u--;)zn(a[u],"captured",n);return 0==(64&o)?[s]:[s,n]}};var Ua="function"==typeof Object.is?Object.is:function(e,t){return e===t&&(0!==e||1/e==1/t)||e!=e&&t!=t},Ba=Object.prototype.hasOwnProperty;function Ha(e,t){if(Ua(e,t))return!0;if("object"!=typeof e||null===e||"object"!=typeof t||null===t)return!1;var n=Object.keys(e),a=Object.keys(t);if(n.length!==a.length)return!1;for(a=0;a<n.length;a++)if(!Ba.call(t,n[a])||!Ua(e[n[a]],t[n[a]]))return!1;return!0}var Wa=O&&"documentMode"in document&&11>=document.documentMode,Va={select:{phasedRegistrationNames:{bubbled:"onSelect",captured:"onSelectCapture"},dependencies:"blur contextmenu dragend focus keydown keyup mousedown mouseup selectionchange".split(" ")}},Ga=null,qa=null,Ka=null,Qa=!1;function Ya(e,t){var n=t.window===t?t.document:9===t.nodeType?t:t.ownerDocument;return Qa||null==Ga||Ga!==pn(n)?null:("selectionStart"in(n=Ga)&&vn(n)?n={start:n.selectionStart,end:n.selectionEnd}:n={anchorNode:(n=(n.ownerDocument&&n.ownerDocument.defaultView||window).getSelection()).anchorNode,anchorOffset:n.anchorOffset,focusNode:n.focusNode,focusOffset:n.focusOffset},Ka&&Ha(Ka,n)?null:(Ka=n,(e=Kn.getPooled(Va.select,qa,e,t)).type="select",e.target=Ga,Un(e),e))}var Xa={eventTypes:Va,extractEvents:function(e,t,n,a,o,r){if(!(r=!(o=r||(a.window===a?a.document:9===a.nodeType?a:a.ownerDocument)))){e:{o=Je(o),r=T.onSelect;for(var i=0;i<r.length;i++)if(!o.has(r[i])){o=!1;break e}o=!0}r=!o}if(r)return null;switch(o=t?In(t):window,e){case"focus":(fa(o)||"true"===o.contentEditable)&&(Ga=o,qa=t,Ka=null);break;case"blur":Ka=qa=Ga=null;break;case"mousedown":Qa=!0;break;case"contextmenu":case"mouseup":case"dragend":return Qa=!1,Ya(n,a);case"selectionchange":if(Wa)break;case"keydown":case"keyup":return Ya(n,a)}return null}},Za=Kn.extend({animationName:null,elapsedTime:null,pseudoElement:null}),Ja=Kn.extend({clipboardData:function(e){return"clipboardData"in e?e.clipboardData:window.clipboardData}}),eo=Pa.extend({relatedTarget:null});function to(e){var t=e.keyCode;return"charCode"in e?0===(e=e.charCode)&&13===t&&(e=13):e=t,10===e&&(e=13),32<=e||13===e?e:0}var no={Esc:"Escape",Spacebar:" ",Left:"ArrowLeft",Up:"ArrowUp",Right:"ArrowRight",Down:"ArrowDown",Del:"Delete",Win:"OS",Menu:"ContextMenu",Apps:"ContextMenu",Scroll:"ScrollLock",MozPrintableKey:"Unidentified"},ao={8:"Backspace",9:"Tab",12:"Clear",13:"Enter",16:"Shift",17:"Control",18:"Alt",19:"Pause",20:"CapsLock",27:"Escape",32:" ",33:"PageUp",34:"PageDown",35:"End",36:"Home",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown",45:"Insert",46:"Delete",112:"F1",113:"F2",114:"F3",115:"F4",116:"F5",117:"F6",118:"F7",119:"F8",120:"F9",121:"F10",122:"F11",123:"F12",144:"NumLock",145:"ScrollLock",224:"Meta"},oo=Pa.extend({key:function(e){if(e.key){var t=no[e.key]||e.key;if("Unidentified"!==t)return t}return"keypress"===e.type?13===(e=to(e))?"Enter":String.fromCharCode(e):"keydown"===e.type||"keyup"===e.type?ao[e.keyCode]||"Unidentified":""},location:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,repeat:null,locale:null,getModifierState:Ra,charCode:function(e){return"keypress"===e.type?to(e):0},keyCode:function(e){return"keydown"===e.type||"keyup"===e.type?e.keyCode:0},which:function(e){return"keypress"===e.type?to(e):"keydown"===e.type||"keyup"===e.type?e.keyCode:0}}),ro=ja.extend({dataTransfer:null}),io=Pa.extend({touches:null,targetTouches:null,changedTouches:null,altKey:null,metaKey:null,ctrlKey:null,shiftKey:null,getModifierState:Ra}),lo=Kn.extend({propertyName:null,elapsedTime:null,pseudoElement:null}),so=ja.extend({deltaX:function(e){return"deltaX"in e?e.deltaX:"wheelDeltaX"in e?-e.wheelDeltaX:0},deltaY:function(e){return"deltaY"in e?e.deltaY:"wheelDeltaY"in e?-e.wheelDeltaY:"wheelDelta"in e?-e.wheelDelta:0},deltaZ:null,deltaMode:null}),co={eventTypes:Mt,extractEvents:function(e,t,n,a){var o=zt.get(e);if(!o)return null;switch(e){case"keypress":if(0===to(n))return null;case"keydown":case"keyup":e=oo;break;case"blur":case"focus":e=eo;break;case"click":if(2===n.button)return null;case"auxclick":case"dblclick":case"mousedown":case"mousemove":case"mouseup":case"mouseout":case"mouseover":case"contextmenu":e=ja;break;case"drag":case"dragend":case"dragenter":case"dragexit":case"dragleave":case"dragover":case"dragstart":case"drop":e=ro;break;case"touchcancel":case"touchend":case"touchmove":case"touchstart":e=io;break;case qe:case Ke:case Qe:e=Za;break;case Ye:e=lo;break;case"scroll":e=Pa;break;case"wheel":e=so;break;case"copy":case"cut":case"paste":e=Ja;break;case"gotpointercapture":case"lostpointercapture":case"pointercancel":case"pointerdown":case"pointermove":case"pointerout":case"pointerover":case"pointerup":e=Ma;break;default:e=Kn}return Un(t=e.getPooled(o,t,n,a)),t}};if(b)throw Error(i(101));b=Array.prototype.slice.call("ResponderEventPlugin SimpleEventPlugin EnterLeaveEventPlugin ChangeEventPlugin SelectEventPlugin BeforeInputEventPlugin".split(" ")),w(),m=Fn,h=Rn,v=In,_({SimpleEventPlugin:co,EnterLeaveEventPlugin:$a,ChangeEventPlugin:Ca,SelectEventPlugin:Xa,BeforeInputEventPlugin:pa});var uo=[],po=-1;function fo(e){0>po||(e.current=uo[po],uo[po]=null,po--)}function mo(e,t){po++,uo[po]=e.current,e.current=t}var ho={},vo={current:ho},go={current:!1},bo=ho;function xo(e,t){var n=e.type.contextTypes;if(!n)return ho;var a=e.stateNode;if(a&&a.__reactInternalMemoizedUnmaskedChildContext===t)return a.__reactInternalMemoizedMaskedChildContext;var o,r={};for(o in n)r[o]=t[o];return a&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=t,e.__reactInternalMemoizedMaskedChildContext=r),r}function wo(e){return null!=(e=e.childContextTypes)}function yo(){fo(go),fo(vo)}function ko(e,t,n){if(vo.current!==ho)throw Error(i(168));mo(vo,t),mo(go,n)}function Eo(e,t,n){var a=e.stateNode;if(e=t.childContextTypes,"function"!=typeof a.getChildContext)return n;for(var r in a=a.getChildContext())if(!(r in e))throw Error(i(108,ve(t)||"Unknown",r));return o({},n,{},a)}function So(e){return e=(e=e.stateNode)&&e.__reactInternalMemoizedMergedChildContext||ho,bo=vo.current,mo(vo,e),mo(go,go.current),!0}function To(e,t,n){var a=e.stateNode;if(!a)throw Error(i(169));n?(e=Eo(e,t,bo),a.__reactInternalMemoizedMergedChildContext=e,fo(go),fo(vo),mo(vo,e)):fo(go),mo(go,n)}var _o=r.unstable_runWithPriority,Oo=r.unstable_scheduleCallback,Co=r.unstable_cancelCallback,Po=r.unstable_requestPaint,No=r.unstable_now,Ao=r.unstable_getCurrentPriorityLevel,Ro=r.unstable_ImmediatePriority,Io=r.unstable_UserBlockingPriority,Fo=r.unstable_NormalPriority,Lo=r.unstable_LowPriority,Do=r.unstable_IdlePriority,jo={},Mo=r.unstable_shouldYield,zo=void 0!==Po?Po:function(){},$o=null,Uo=null,Bo=!1,Ho=No(),Wo=1e4>Ho?No:function(){return No()-Ho};function Vo(){switch(Ao()){case Ro:return 99;case Io:return 98;case Fo:return 97;case Lo:return 96;case Do:return 95;default:throw Error(i(332))}}function Go(e){switch(e){case 99:return Ro;case 98:return Io;case 97:return Fo;case 96:return Lo;case 95:return Do;default:throw Error(i(332))}}function qo(e,t){return e=Go(e),_o(e,t)}function Ko(e,t,n){return e=Go(e),Oo(e,t,n)}function Qo(e){return null===$o?($o=[e],Uo=Oo(Ro,Xo)):$o.push(e),jo}function Yo(){if(null!==Uo){var e=Uo;Uo=null,Co(e)}Xo()}function Xo(){if(!Bo&&null!==$o){Bo=!0;var e=0;try{var t=$o;qo(99,(function(){for(;e<t.length;e++){var n=t[e];do{n=n(!0)}while(null!==n)}})),$o=null}catch(n){throw null!==$o&&($o=$o.slice(e+1)),Oo(Ro,Yo),n}finally{Bo=!1}}}function Zo(e,t,n){return 1073741821-(1+((1073741821-e+t/10)/(n/=10)|0))*n}function Jo(e,t){if(e&&e.defaultProps)for(var n in t=o({},t),e=e.defaultProps)void 0===t[n]&&(t[n]=e[n]);return t}var er={current:null},tr=null,nr=null,ar=null;function or(){ar=nr=tr=null}function rr(e){var t=er.current;fo(er),e.type._context._currentValue=t}function ir(e,t){for(;null!==e;){var n=e.alternate;if(e.childExpirationTime<t)e.childExpirationTime=t,null!==n&&n.childExpirationTime<t&&(n.childExpirationTime=t);else{if(!(null!==n&&n.childExpirationTime<t))break;n.childExpirationTime=t}e=e.return}}function lr(e,t){tr=e,ar=nr=null,null!==(e=e.dependencies)&&null!==e.firstContext&&(e.expirationTime>=t&&(Fi=!0),e.firstContext=null)}function sr(e,t){if(ar!==e&&!1!==t&&0!==t)if("number"==typeof t&&1073741823!==t||(ar=e,t=1073741823),t={context:e,observedBits:t,next:null},null===nr){if(null===tr)throw Error(i(308));nr=t,tr.dependencies={expirationTime:0,firstContext:t,responders:null}}else nr=nr.next=t;return e._currentValue}var cr=!1;function ur(e){e.updateQueue={baseState:e.memoizedState,baseQueue:null,shared:{pending:null},effects:null}}function pr(e,t){e=e.updateQueue,t.updateQueue===e&&(t.updateQueue={baseState:e.baseState,baseQueue:e.baseQueue,shared:e.shared,effects:e.effects})}function dr(e,t){return(e={expirationTime:e,suspenseConfig:t,tag:0,payload:null,callback:null,next:null}).next=e}function fr(e,t){if(null!==(e=e.updateQueue)){var n=(e=e.shared).pending;null===n?t.next=t:(t.next=n.next,n.next=t),e.pending=t}}function mr(e,t){var n=e.alternate;null!==n&&pr(n,e),null===(n=(e=e.updateQueue).baseQueue)?(e.baseQueue=t.next=t,t.next=t):(t.next=n.next,n.next=t)}function hr(e,t,n,a){var r=e.updateQueue;cr=!1;var i=r.baseQueue,l=r.shared.pending;if(null!==l){if(null!==i){var s=i.next;i.next=l.next,l.next=s}i=l,r.shared.pending=null,null!==(s=e.alternate)&&(null!==(s=s.updateQueue)&&(s.baseQueue=l))}if(null!==i){s=i.next;var c=r.baseState,u=0,p=null,d=null,f=null;if(null!==s)for(var m=s;;){if((l=m.expirationTime)<a){var h={expirationTime:m.expirationTime,suspenseConfig:m.suspenseConfig,tag:m.tag,payload:m.payload,callback:m.callback,next:null};null===f?(d=f=h,p=c):f=f.next=h,l>u&&(u=l)}else{null!==f&&(f=f.next={expirationTime:1073741823,suspenseConfig:m.suspenseConfig,tag:m.tag,payload:m.payload,callback:m.callback,next:null}),fs(l,m.suspenseConfig);e:{var v=e,g=m;switch(l=t,h=n,g.tag){case 1:if("function"==typeof(v=g.payload)){c=v.call(h,c,l);break e}c=v;break e;case 3:v.effectTag=-4097&v.effectTag|64;case 0:if(null==(l="function"==typeof(v=g.payload)?v.call(h,c,l):v))break e;c=o({},c,l);break e;case 2:cr=!0}}null!==m.callback&&(e.effectTag|=32,null===(l=r.effects)?r.effects=[m]:l.push(m))}if(null===(m=m.next)||m===s){if(null===(l=r.shared.pending))break;m=i.next=l.next,l.next=s,r.baseQueue=i=l,r.shared.pending=null}}null===f?p=c:f.next=d,r.baseState=p,r.baseQueue=f,ms(u),e.expirationTime=u,e.memoizedState=c}}function vr(e,t,n){if(e=t.effects,t.effects=null,null!==e)for(t=0;t<e.length;t++){var a=e[t],o=a.callback;if(null!==o){if(a.callback=null,a=o,o=n,"function"!=typeof a)throw Error(i(191,a));a.call(o)}}}var gr=Y.ReactCurrentBatchConfig,br=(new a.Component).refs;function xr(e,t,n,a){n=null==(n=n(a,t=e.memoizedState))?t:o({},t,n),e.memoizedState=n,0===e.expirationTime&&(e.updateQueue.baseState=n)}var wr={isMounted:function(e){return!!(e=e._reactInternalFiber)&&et(e)===e},enqueueSetState:function(e,t,n){e=e._reactInternalFiber;var a=es(),o=gr.suspense;(o=dr(a=ts(a,e,o),o)).payload=t,null!=n&&(o.callback=n),fr(e,o),ns(e,a)},enqueueReplaceState:function(e,t,n){e=e._reactInternalFiber;var a=es(),o=gr.suspense;(o=dr(a=ts(a,e,o),o)).tag=1,o.payload=t,null!=n&&(o.callback=n),fr(e,o),ns(e,a)},enqueueForceUpdate:function(e,t){e=e._reactInternalFiber;var n=es(),a=gr.suspense;(a=dr(n=ts(n,e,a),a)).tag=2,null!=t&&(a.callback=t),fr(e,a),ns(e,n)}};function yr(e,t,n,a,o,r,i){return"function"==typeof(e=e.stateNode).shouldComponentUpdate?e.shouldComponentUpdate(a,r,i):!t.prototype||!t.prototype.isPureReactComponent||(!Ha(n,a)||!Ha(o,r))}function kr(e,t,n){var a=!1,o=ho,r=t.contextType;return"object"==typeof r&&null!==r?r=sr(r):(o=wo(t)?bo:vo.current,r=(a=null!=(a=t.contextTypes))?xo(e,o):ho),t=new t(n,r),e.memoizedState=null!==t.state&&void 0!==t.state?t.state:null,t.updater=wr,e.stateNode=t,t._reactInternalFiber=e,a&&((e=e.stateNode).__reactInternalMemoizedUnmaskedChildContext=o,e.__reactInternalMemoizedMaskedChildContext=r),t}function Er(e,t,n,a){e=t.state,"function"==typeof t.componentWillReceiveProps&&t.componentWillReceiveProps(n,a),"function"==typeof t.UNSAFE_componentWillReceiveProps&&t.UNSAFE_componentWillReceiveProps(n,a),t.state!==e&&wr.enqueueReplaceState(t,t.state,null)}function Sr(e,t,n,a){var o=e.stateNode;o.props=n,o.state=e.memoizedState,o.refs=br,ur(e);var r=t.contextType;"object"==typeof r&&null!==r?o.context=sr(r):(r=wo(t)?bo:vo.current,o.context=xo(e,r)),hr(e,n,o,a),o.state=e.memoizedState,"function"==typeof(r=t.getDerivedStateFromProps)&&(xr(e,t,r,n),o.state=e.memoizedState),"function"==typeof t.getDerivedStateFromProps||"function"==typeof o.getSnapshotBeforeUpdate||"function"!=typeof o.UNSAFE_componentWillMount&&"function"!=typeof o.componentWillMount||(t=o.state,"function"==typeof o.componentWillMount&&o.componentWillMount(),"function"==typeof o.UNSAFE_componentWillMount&&o.UNSAFE_componentWillMount(),t!==o.state&&wr.enqueueReplaceState(o,o.state,null),hr(e,n,o,a),o.state=e.memoizedState),"function"==typeof o.componentDidMount&&(e.effectTag|=4)}var Tr=Array.isArray;function _r(e,t,n){if(null!==(e=n.ref)&&"function"!=typeof e&&"object"!=typeof e){if(n._owner){if(n=n._owner){if(1!==n.tag)throw Error(i(309));var a=n.stateNode}if(!a)throw Error(i(147,e));var o=""+e;return null!==t&&null!==t.ref&&"function"==typeof t.ref&&t.ref._stringRef===o?t.ref:((t=function(e){var t=a.refs;t===br&&(t=a.refs={}),null===e?delete t[o]:t[o]=e})._stringRef=o,t)}if("string"!=typeof e)throw Error(i(284));if(!n._owner)throw Error(i(290,e))}return e}function Or(e,t){if("textarea"!==e.type)throw Error(i(31,"[object Object]"===Object.prototype.toString.call(t)?"object with keys {"+Object.keys(t).join(", ")+"}":t,""))}function Cr(e){function t(t,n){if(e){var a=t.lastEffect;null!==a?(a.nextEffect=n,t.lastEffect=n):t.firstEffect=t.lastEffect=n,n.nextEffect=null,n.effectTag=8}}function n(n,a){if(!e)return null;for(;null!==a;)t(n,a),a=a.sibling;return null}function a(e,t){for(e=new Map;null!==t;)null!==t.key?e.set(t.key,t):e.set(t.index,t),t=t.sibling;return e}function o(e,t){return(e=Fs(e,t)).index=0,e.sibling=null,e}function r(t,n,a){return t.index=a,e?null!==(a=t.alternate)?(a=a.index)<n?(t.effectTag=2,n):a:(t.effectTag=2,n):n}function l(t){return e&&null===t.alternate&&(t.effectTag=2),t}function s(e,t,n,a){return null===t||6!==t.tag?((t=js(n,e.mode,a)).return=e,t):((t=o(t,n)).return=e,t)}function c(e,t,n,a){return null!==t&&t.elementType===n.type?((a=o(t,n.props)).ref=_r(e,t,n),a.return=e,a):((a=Ls(n.type,n.key,n.props,null,e.mode,a)).ref=_r(e,t,n),a.return=e,a)}function u(e,t,n,a){return null===t||4!==t.tag||t.stateNode.containerInfo!==n.containerInfo||t.stateNode.implementation!==n.implementation?((t=Ms(n,e.mode,a)).return=e,t):((t=o(t,n.children||[])).return=e,t)}function p(e,t,n,a,r){return null===t||7!==t.tag?((t=Ds(n,e.mode,a,r)).return=e,t):((t=o(t,n)).return=e,t)}function d(e,t,n){if("string"==typeof t||"number"==typeof t)return(t=js(""+t,e.mode,n)).return=e,t;if("object"==typeof t&&null!==t){switch(t.$$typeof){case ee:return(n=Ls(t.type,t.key,t.props,null,e.mode,n)).ref=_r(e,null,t),n.return=e,n;case te:return(t=Ms(t,e.mode,n)).return=e,t}if(Tr(t)||he(t))return(t=Ds(t,e.mode,n,null)).return=e,t;Or(e,t)}return null}function f(e,t,n,a){var o=null!==t?t.key:null;if("string"==typeof n||"number"==typeof n)return null!==o?null:s(e,t,""+n,a);if("object"==typeof n&&null!==n){switch(n.$$typeof){case ee:return n.key===o?n.type===ne?p(e,t,n.props.children,a,o):c(e,t,n,a):null;case te:return n.key===o?u(e,t,n,a):null}if(Tr(n)||he(n))return null!==o?null:p(e,t,n,a,null);Or(e,n)}return null}function m(e,t,n,a,o){if("string"==typeof a||"number"==typeof a)return s(t,e=e.get(n)||null,""+a,o);if("object"==typeof a&&null!==a){switch(a.$$typeof){case ee:return e=e.get(null===a.key?n:a.key)||null,a.type===ne?p(t,e,a.props.children,o,a.key):c(t,e,a,o);case te:return u(t,e=e.get(null===a.key?n:a.key)||null,a,o)}if(Tr(a)||he(a))return p(t,e=e.get(n)||null,a,o,null);Or(t,a)}return null}function h(o,i,l,s){for(var c=null,u=null,p=i,h=i=0,v=null;null!==p&&h<l.length;h++){p.index>h?(v=p,p=null):v=p.sibling;var g=f(o,p,l[h],s);if(null===g){null===p&&(p=v);break}e&&p&&null===g.alternate&&t(o,p),i=r(g,i,h),null===u?c=g:u.sibling=g,u=g,p=v}if(h===l.length)return n(o,p),c;if(null===p){for(;h<l.length;h++)null!==(p=d(o,l[h],s))&&(i=r(p,i,h),null===u?c=p:u.sibling=p,u=p);return c}for(p=a(o,p);h<l.length;h++)null!==(v=m(p,o,h,l[h],s))&&(e&&null!==v.alternate&&p.delete(null===v.key?h:v.key),i=r(v,i,h),null===u?c=v:u.sibling=v,u=v);return e&&p.forEach((function(e){return t(o,e)})),c}function v(o,l,s,c){var u=he(s);if("function"!=typeof u)throw Error(i(150));if(null==(s=u.call(s)))throw Error(i(151));for(var p=u=null,h=l,v=l=0,g=null,b=s.next();null!==h&&!b.done;v++,b=s.next()){h.index>v?(g=h,h=null):g=h.sibling;var x=f(o,h,b.value,c);if(null===x){null===h&&(h=g);break}e&&h&&null===x.alternate&&t(o,h),l=r(x,l,v),null===p?u=x:p.sibling=x,p=x,h=g}if(b.done)return n(o,h),u;if(null===h){for(;!b.done;v++,b=s.next())null!==(b=d(o,b.value,c))&&(l=r(b,l,v),null===p?u=b:p.sibling=b,p=b);return u}for(h=a(o,h);!b.done;v++,b=s.next())null!==(b=m(h,o,v,b.value,c))&&(e&&null!==b.alternate&&h.delete(null===b.key?v:b.key),l=r(b,l,v),null===p?u=b:p.sibling=b,p=b);return e&&h.forEach((function(e){return t(o,e)})),u}return function(e,a,r,s){var c="object"==typeof r&&null!==r&&r.type===ne&&null===r.key;c&&(r=r.props.children);var u="object"==typeof r&&null!==r;if(u)switch(r.$$typeof){case ee:e:{for(u=r.key,c=a;null!==c;){if(c.key===u){switch(c.tag){case 7:if(r.type===ne){n(e,c.sibling),(a=o(c,r.props.children)).return=e,e=a;break e}break;default:if(c.elementType===r.type){n(e,c.sibling),(a=o(c,r.props)).ref=_r(e,c,r),a.return=e,e=a;break e}}n(e,c);break}t(e,c),c=c.sibling}r.type===ne?((a=Ds(r.props.children,e.mode,s,r.key)).return=e,e=a):((s=Ls(r.type,r.key,r.props,null,e.mode,s)).ref=_r(e,a,r),s.return=e,e=s)}return l(e);case te:e:{for(c=r.key;null!==a;){if(a.key===c){if(4===a.tag&&a.stateNode.containerInfo===r.containerInfo&&a.stateNode.implementation===r.implementation){n(e,a.sibling),(a=o(a,r.children||[])).return=e,e=a;break e}n(e,a);break}t(e,a),a=a.sibling}(a=Ms(r,e.mode,s)).return=e,e=a}return l(e)}if("string"==typeof r||"number"==typeof r)return r=""+r,null!==a&&6===a.tag?(n(e,a.sibling),(a=o(a,r)).return=e,e=a):(n(e,a),(a=js(r,e.mode,s)).return=e,e=a),l(e);if(Tr(r))return h(e,a,r,s);if(he(r))return v(e,a,r,s);if(u&&Or(e,r),void 0===r&&!c)switch(e.tag){case 1:case 0:throw e=e.type,Error(i(152,e.displayName||e.name||"Component"))}return n(e,a)}}var Pr=Cr(!0),Nr=Cr(!1),Ar={},Rr={current:Ar},Ir={current:Ar},Fr={current:Ar};function Lr(e){if(e===Ar)throw Error(i(174));return e}function Dr(e,t){switch(mo(Fr,t),mo(Ir,e),mo(Rr,Ar),e=t.nodeType){case 9:case 11:t=(t=t.documentElement)?t.namespaceURI:je(null,"");break;default:t=je(t=(e=8===e?t.parentNode:t).namespaceURI||null,e=e.tagName)}fo(Rr),mo(Rr,t)}function jr(){fo(Rr),fo(Ir),fo(Fr)}function Mr(e){Lr(Fr.current);var t=Lr(Rr.current),n=je(t,e.type);t!==n&&(mo(Ir,e),mo(Rr,n))}function zr(e){Ir.current===e&&(fo(Rr),fo(Ir))}var $r={current:0};function Ur(e){for(var t=e;null!==t;){if(13===t.tag){var n=t.memoizedState;if(null!==n&&(null===(n=n.dehydrated)||n.data===gn||n.data===bn))return t}else if(19===t.tag&&void 0!==t.memoizedProps.revealOrder){if(0!=(64&t.effectTag))return t}else if(null!==t.child){t.child.return=t,t=t.child;continue}if(t===e)break;for(;null===t.sibling;){if(null===t.return||t.return===e)return null;t=t.return}t.sibling.return=t.return,t=t.sibling}return null}function Br(e,t){return{responder:e,props:t}}var Hr=Y.ReactCurrentDispatcher,Wr=Y.ReactCurrentBatchConfig,Vr=0,Gr=null,qr=null,Kr=null,Qr=!1;function Yr(){throw Error(i(321))}function Xr(e,t){if(null===t)return!1;for(var n=0;n<t.length&&n<e.length;n++)if(!Ua(e[n],t[n]))return!1;return!0}function Zr(e,t,n,a,o,r){if(Vr=r,Gr=t,t.memoizedState=null,t.updateQueue=null,t.expirationTime=0,Hr.current=null===e||null===e.memoizedState?yi:ki,e=n(a,o),t.expirationTime===Vr){r=0;do{if(t.expirationTime=0,!(25>r))throw Error(i(301));r+=1,Kr=qr=null,t.updateQueue=null,Hr.current=Ei,e=n(a,o)}while(t.expirationTime===Vr)}if(Hr.current=wi,t=null!==qr&&null!==qr.next,Vr=0,Kr=qr=Gr=null,Qr=!1,t)throw Error(i(300));return e}function Jr(){var e={memoizedState:null,baseState:null,baseQueue:null,queue:null,next:null};return null===Kr?Gr.memoizedState=Kr=e:Kr=Kr.next=e,Kr}function ei(){if(null===qr){var e=Gr.alternate;e=null!==e?e.memoizedState:null}else e=qr.next;var t=null===Kr?Gr.memoizedState:Kr.next;if(null!==t)Kr=t,qr=e;else{if(null===e)throw Error(i(310));e={memoizedState:(qr=e).memoizedState,baseState:qr.baseState,baseQueue:qr.baseQueue,queue:qr.queue,next:null},null===Kr?Gr.memoizedState=Kr=e:Kr=Kr.next=e}return Kr}function ti(e,t){return"function"==typeof t?t(e):t}function ni(e){var t=ei(),n=t.queue;if(null===n)throw Error(i(311));n.lastRenderedReducer=e;var a=qr,o=a.baseQueue,r=n.pending;if(null!==r){if(null!==o){var l=o.next;o.next=r.next,r.next=l}a.baseQueue=o=r,n.pending=null}if(null!==o){o=o.next,a=a.baseState;var s=l=r=null,c=o;do{var u=c.expirationTime;if(u<Vr){var p={expirationTime:c.expirationTime,suspenseConfig:c.suspenseConfig,action:c.action,eagerReducer:c.eagerReducer,eagerState:c.eagerState,next:null};null===s?(l=s=p,r=a):s=s.next=p,u>Gr.expirationTime&&(Gr.expirationTime=u,ms(u))}else null!==s&&(s=s.next={expirationTime:1073741823,suspenseConfig:c.suspenseConfig,action:c.action,eagerReducer:c.eagerReducer,eagerState:c.eagerState,next:null}),fs(u,c.suspenseConfig),a=c.eagerReducer===e?c.eagerState:e(a,c.action);c=c.next}while(null!==c&&c!==o);null===s?r=a:s.next=l,Ua(a,t.memoizedState)||(Fi=!0),t.memoizedState=a,t.baseState=r,t.baseQueue=s,n.lastRenderedState=a}return[t.memoizedState,n.dispatch]}function ai(e){var t=ei(),n=t.queue;if(null===n)throw Error(i(311));n.lastRenderedReducer=e;var a=n.dispatch,o=n.pending,r=t.memoizedState;if(null!==o){n.pending=null;var l=o=o.next;do{r=e(r,l.action),l=l.next}while(l!==o);Ua(r,t.memoizedState)||(Fi=!0),t.memoizedState=r,null===t.baseQueue&&(t.baseState=r),n.lastRenderedState=r}return[r,a]}function oi(e){var t=Jr();return"function"==typeof e&&(e=e()),t.memoizedState=t.baseState=e,e=(e=t.queue={pending:null,dispatch:null,lastRenderedReducer:ti,lastRenderedState:e}).dispatch=xi.bind(null,Gr,e),[t.memoizedState,e]}function ri(e,t,n,a){return e={tag:e,create:t,destroy:n,deps:a,next:null},null===(t=Gr.updateQueue)?(t={lastEffect:null},Gr.updateQueue=t,t.lastEffect=e.next=e):null===(n=t.lastEffect)?t.lastEffect=e.next=e:(a=n.next,n.next=e,e.next=a,t.lastEffect=e),e}function ii(){return ei().memoizedState}function li(e,t,n,a){var o=Jr();Gr.effectTag|=e,o.memoizedState=ri(1|t,n,void 0,void 0===a?null:a)}function si(e,t,n,a){var o=ei();a=void 0===a?null:a;var r=void 0;if(null!==qr){var i=qr.memoizedState;if(r=i.destroy,null!==a&&Xr(a,i.deps))return void ri(t,n,r,a)}Gr.effectTag|=e,o.memoizedState=ri(1|t,n,r,a)}function ci(e,t){return li(516,4,e,t)}function ui(e,t){return si(516,4,e,t)}function pi(e,t){return si(4,2,e,t)}function di(e,t){return"function"==typeof t?(e=e(),t(e),function(){t(null)}):null!=t?(e=e(),t.current=e,function(){t.current=null}):void 0}function fi(e,t,n){return n=null!=n?n.concat([e]):null,si(4,2,di.bind(null,t,e),n)}function mi(){}function hi(e,t){return Jr().memoizedState=[e,void 0===t?null:t],e}function vi(e,t){var n=ei();t=void 0===t?null:t;var a=n.memoizedState;return null!==a&&null!==t&&Xr(t,a[1])?a[0]:(n.memoizedState=[e,t],e)}function gi(e,t){var n=ei();t=void 0===t?null:t;var a=n.memoizedState;return null!==a&&null!==t&&Xr(t,a[1])?a[0]:(e=e(),n.memoizedState=[e,t],e)}function bi(e,t,n){var a=Vo();qo(98>a?98:a,(function(){e(!0)})),qo(97<a?97:a,(function(){var a=Wr.suspense;Wr.suspense=void 0===t?null:t;try{e(!1),n()}finally{Wr.suspense=a}}))}function xi(e,t,n){var a=es(),o=gr.suspense;o={expirationTime:a=ts(a,e,o),suspenseConfig:o,action:n,eagerReducer:null,eagerState:null,next:null};var r=t.pending;if(null===r?o.next=o:(o.next=r.next,r.next=o),t.pending=o,r=e.alternate,e===Gr||null!==r&&r===Gr)Qr=!0,o.expirationTime=Vr,Gr.expirationTime=Vr;else{if(0===e.expirationTime&&(null===r||0===r.expirationTime)&&null!==(r=t.lastRenderedReducer))try{var i=t.lastRenderedState,l=r(i,n);if(o.eagerReducer=r,o.eagerState=l,Ua(l,i))return}catch(s){}ns(e,a)}}var wi={readContext:sr,useCallback:Yr,useContext:Yr,useEffect:Yr,useImperativeHandle:Yr,useLayoutEffect:Yr,useMemo:Yr,useReducer:Yr,useRef:Yr,useState:Yr,useDebugValue:Yr,useResponder:Yr,useDeferredValue:Yr,useTransition:Yr},yi={readContext:sr,useCallback:hi,useContext:sr,useEffect:ci,useImperativeHandle:function(e,t,n){return n=null!=n?n.concat([e]):null,li(4,2,di.bind(null,t,e),n)},useLayoutEffect:function(e,t){return li(4,2,e,t)},useMemo:function(e,t){var n=Jr();return t=void 0===t?null:t,e=e(),n.memoizedState=[e,t],e},useReducer:function(e,t,n){var a=Jr();return t=void 0!==n?n(t):t,a.memoizedState=a.baseState=t,e=(e=a.queue={pending:null,dispatch:null,lastRenderedReducer:e,lastRenderedState:t}).dispatch=xi.bind(null,Gr,e),[a.memoizedState,e]},useRef:function(e){return e={current:e},Jr().memoizedState=e},useState:oi,useDebugValue:mi,useResponder:Br,useDeferredValue:function(e,t){var n=oi(e),a=n[0],o=n[1];return ci((function(){var n=Wr.suspense;Wr.suspense=void 0===t?null:t;try{o(e)}finally{Wr.suspense=n}}),[e,t]),a},useTransition:function(e){var t=oi(!1),n=t[0];return t=t[1],[hi(bi.bind(null,t,e),[t,e]),n]}},ki={readContext:sr,useCallback:vi,useContext:sr,useEffect:ui,useImperativeHandle:fi,useLayoutEffect:pi,useMemo:gi,useReducer:ni,useRef:ii,useState:function(){return ni(ti)},useDebugValue:mi,useResponder:Br,useDeferredValue:function(e,t){var n=ni(ti),a=n[0],o=n[1];return ui((function(){var n=Wr.suspense;Wr.suspense=void 0===t?null:t;try{o(e)}finally{Wr.suspense=n}}),[e,t]),a},useTransition:function(e){var t=ni(ti),n=t[0];return t=t[1],[vi(bi.bind(null,t,e),[t,e]),n]}},Ei={readContext:sr,useCallback:vi,useContext:sr,useEffect:ui,useImperativeHandle:fi,useLayoutEffect:pi,useMemo:gi,useReducer:ai,useRef:ii,useState:function(){return ai(ti)},useDebugValue:mi,useResponder:Br,useDeferredValue:function(e,t){var n=ai(ti),a=n[0],o=n[1];return ui((function(){var n=Wr.suspense;Wr.suspense=void 0===t?null:t;try{o(e)}finally{Wr.suspense=n}}),[e,t]),a},useTransition:function(e){var t=ai(ti),n=t[0];return t=t[1],[vi(bi.bind(null,t,e),[t,e]),n]}},Si=null,Ti=null,_i=!1;function Oi(e,t){var n=Rs(5,null,null,0);n.elementType="DELETED",n.type="DELETED",n.stateNode=t,n.return=e,n.effectTag=8,null!==e.lastEffect?(e.lastEffect.nextEffect=n,e.lastEffect=n):e.firstEffect=e.lastEffect=n}function Ci(e,t){switch(e.tag){case 5:var n=e.type;return null!==(t=1!==t.nodeType||n.toLowerCase()!==t.nodeName.toLowerCase()?null:t)&&(e.stateNode=t,!0);case 6:return null!==(t=""===e.pendingProps||3!==t.nodeType?null:t)&&(e.stateNode=t,!0);case 13:default:return!1}}function Pi(e){if(_i){var t=Ti;if(t){var n=t;if(!Ci(e,t)){if(!(t=Tn(n.nextSibling))||!Ci(e,t))return e.effectTag=-1025&e.effectTag|2,_i=!1,void(Si=e);Oi(Si,n)}Si=e,Ti=Tn(t.firstChild)}else e.effectTag=-1025&e.effectTag|2,_i=!1,Si=e}}function Ni(e){for(e=e.return;null!==e&&5!==e.tag&&3!==e.tag&&13!==e.tag;)e=e.return;Si=e}function Ai(e){if(e!==Si)return!1;if(!_i)return Ni(e),_i=!0,!1;var t=e.type;if(5!==e.tag||"head"!==t&&"body"!==t&&!kn(t,e.memoizedProps))for(t=Ti;t;)Oi(e,t),t=Tn(t.nextSibling);if(Ni(e),13===e.tag){if(!(e=null!==(e=e.memoizedState)?e.dehydrated:null))throw Error(i(317));e:{for(e=e.nextSibling,t=0;e;){if(8===e.nodeType){var n=e.data;if("/$"===n){if(0===t){Ti=Tn(e.nextSibling);break e}t--}else"$"!==n&&n!==bn&&n!==gn||t++}e=e.nextSibling}Ti=null}}else Ti=Si?Tn(e.stateNode.nextSibling):null;return!0}function Ri(){Ti=Si=null,_i=!1}var Ii=Y.ReactCurrentOwner,Fi=!1;function Li(e,t,n,a){t.child=null===e?Nr(t,null,n,a):Pr(t,e.child,n,a)}function Di(e,t,n,a,o){n=n.render;var r=t.ref;return lr(t,o),a=Zr(e,t,n,a,r,o),null===e||Fi?(t.effectTag|=1,Li(e,t,a,o),t.child):(t.updateQueue=e.updateQueue,t.effectTag&=-517,e.expirationTime<=o&&(e.expirationTime=0),Zi(e,t,o))}function ji(e,t,n,a,o,r){if(null===e){var i=n.type;return"function"!=typeof i||Is(i)||void 0!==i.defaultProps||null!==n.compare||void 0!==n.defaultProps?((e=Ls(n.type,null,a,null,t.mode,r)).ref=t.ref,e.return=t,t.child=e):(t.tag=15,t.type=i,Mi(e,t,i,a,o,r))}return i=e.child,o<r&&(o=i.memoizedProps,(n=null!==(n=n.compare)?n:Ha)(o,a)&&e.ref===t.ref)?Zi(e,t,r):(t.effectTag|=1,(e=Fs(i,a)).ref=t.ref,e.return=t,t.child=e)}function Mi(e,t,n,a,o,r){return null!==e&&Ha(e.memoizedProps,a)&&e.ref===t.ref&&(Fi=!1,o<r)?(t.expirationTime=e.expirationTime,Zi(e,t,r)):$i(e,t,n,a,r)}function zi(e,t){var n=t.ref;(null===e&&null!==n||null!==e&&e.ref!==n)&&(t.effectTag|=128)}function $i(e,t,n,a,o){var r=wo(n)?bo:vo.current;return r=xo(t,r),lr(t,o),n=Zr(e,t,n,a,r,o),null===e||Fi?(t.effectTag|=1,Li(e,t,n,o),t.child):(t.updateQueue=e.updateQueue,t.effectTag&=-517,e.expirationTime<=o&&(e.expirationTime=0),Zi(e,t,o))}function Ui(e,t,n,a,o){if(wo(n)){var r=!0;So(t)}else r=!1;if(lr(t,o),null===t.stateNode)null!==e&&(e.alternate=null,t.alternate=null,t.effectTag|=2),kr(t,n,a),Sr(t,n,a,o),a=!0;else if(null===e){var i=t.stateNode,l=t.memoizedProps;i.props=l;var s=i.context,c=n.contextType;"object"==typeof c&&null!==c?c=sr(c):c=xo(t,c=wo(n)?bo:vo.current);var u=n.getDerivedStateFromProps,p="function"==typeof u||"function"==typeof i.getSnapshotBeforeUpdate;p||"function"!=typeof i.UNSAFE_componentWillReceiveProps&&"function"!=typeof i.componentWillReceiveProps||(l!==a||s!==c)&&Er(t,i,a,c),cr=!1;var d=t.memoizedState;i.state=d,hr(t,a,i,o),s=t.memoizedState,l!==a||d!==s||go.current||cr?("function"==typeof u&&(xr(t,n,u,a),s=t.memoizedState),(l=cr||yr(t,n,l,a,d,s,c))?(p||"function"!=typeof i.UNSAFE_componentWillMount&&"function"!=typeof i.componentWillMount||("function"==typeof i.componentWillMount&&i.componentWillMount(),"function"==typeof i.UNSAFE_componentWillMount&&i.UNSAFE_componentWillMount()),"function"==typeof i.componentDidMount&&(t.effectTag|=4)):("function"==typeof i.componentDidMount&&(t.effectTag|=4),t.memoizedProps=a,t.memoizedState=s),i.props=a,i.state=s,i.context=c,a=l):("function"==typeof i.componentDidMount&&(t.effectTag|=4),a=!1)}else i=t.stateNode,pr(e,t),l=t.memoizedProps,i.props=t.type===t.elementType?l:Jo(t.type,l),s=i.context,"object"==typeof(c=n.contextType)&&null!==c?c=sr(c):c=xo(t,c=wo(n)?bo:vo.current),(p="function"==typeof(u=n.getDerivedStateFromProps)||"function"==typeof i.getSnapshotBeforeUpdate)||"function"!=typeof i.UNSAFE_componentWillReceiveProps&&"function"!=typeof i.componentWillReceiveProps||(l!==a||s!==c)&&Er(t,i,a,c),cr=!1,s=t.memoizedState,i.state=s,hr(t,a,i,o),d=t.memoizedState,l!==a||s!==d||go.current||cr?("function"==typeof u&&(xr(t,n,u,a),d=t.memoizedState),(u=cr||yr(t,n,l,a,s,d,c))?(p||"function"!=typeof i.UNSAFE_componentWillUpdate&&"function"!=typeof i.componentWillUpdate||("function"==typeof i.componentWillUpdate&&i.componentWillUpdate(a,d,c),"function"==typeof i.UNSAFE_componentWillUpdate&&i.UNSAFE_componentWillUpdate(a,d,c)),"function"==typeof i.componentDidUpdate&&(t.effectTag|=4),"function"==typeof i.getSnapshotBeforeUpdate&&(t.effectTag|=256)):("function"!=typeof i.componentDidUpdate||l===e.memoizedProps&&s===e.memoizedState||(t.effectTag|=4),"function"!=typeof i.getSnapshotBeforeUpdate||l===e.memoizedProps&&s===e.memoizedState||(t.effectTag|=256),t.memoizedProps=a,t.memoizedState=d),i.props=a,i.state=d,i.context=c,a=u):("function"!=typeof i.componentDidUpdate||l===e.memoizedProps&&s===e.memoizedState||(t.effectTag|=4),"function"!=typeof i.getSnapshotBeforeUpdate||l===e.memoizedProps&&s===e.memoizedState||(t.effectTag|=256),a=!1);return Bi(e,t,n,a,r,o)}function Bi(e,t,n,a,o,r){zi(e,t);var i=0!=(64&t.effectTag);if(!a&&!i)return o&&To(t,n,!1),Zi(e,t,r);a=t.stateNode,Ii.current=t;var l=i&&"function"!=typeof n.getDerivedStateFromError?null:a.render();return t.effectTag|=1,null!==e&&i?(t.child=Pr(t,e.child,null,r),t.child=Pr(t,null,l,r)):Li(e,t,l,r),t.memoizedState=a.state,o&&To(t,n,!0),t.child}function Hi(e){var t=e.stateNode;t.pendingContext?ko(0,t.pendingContext,t.pendingContext!==t.context):t.context&&ko(0,t.context,!1),Dr(e,t.containerInfo)}var Wi,Vi,Gi,qi={dehydrated:null,retryTime:0};function Ki(e,t,n){var a,o=t.mode,r=t.pendingProps,i=$r.current,l=!1;if((a=0!=(64&t.effectTag))||(a=0!=(2&i)&&(null===e||null!==e.memoizedState)),a?(l=!0,t.effectTag&=-65):null!==e&&null===e.memoizedState||void 0===r.fallback||!0===r.unstable_avoidThisFallback||(i|=1),mo($r,1&i),null===e){if(void 0!==r.fallback&&Pi(t),l){if(l=r.fallback,(r=Ds(null,o,0,null)).return=t,0==(2&t.mode))for(e=null!==t.memoizedState?t.child.child:t.child,r.child=e;null!==e;)e.return=r,e=e.sibling;return(n=Ds(l,o,n,null)).return=t,r.sibling=n,t.memoizedState=qi,t.child=r,n}return o=r.children,t.memoizedState=null,t.child=Nr(t,null,o,n)}if(null!==e.memoizedState){if(o=(e=e.child).sibling,l){if(r=r.fallback,(n=Fs(e,e.pendingProps)).return=t,0==(2&t.mode)&&(l=null!==t.memoizedState?t.child.child:t.child)!==e.child)for(n.child=l;null!==l;)l.return=n,l=l.sibling;return(o=Fs(o,r)).return=t,n.sibling=o,n.childExpirationTime=0,t.memoizedState=qi,t.child=n,o}return n=Pr(t,e.child,r.children,n),t.memoizedState=null,t.child=n}if(e=e.child,l){if(l=r.fallback,(r=Ds(null,o,0,null)).return=t,r.child=e,null!==e&&(e.return=r),0==(2&t.mode))for(e=null!==t.memoizedState?t.child.child:t.child,r.child=e;null!==e;)e.return=r,e=e.sibling;return(n=Ds(l,o,n,null)).return=t,r.sibling=n,n.effectTag|=2,r.childExpirationTime=0,t.memoizedState=qi,t.child=r,n}return t.memoizedState=null,t.child=Pr(t,e,r.children,n)}function Qi(e,t){e.expirationTime<t&&(e.expirationTime=t);var n=e.alternate;null!==n&&n.expirationTime<t&&(n.expirationTime=t),ir(e.return,t)}function Yi(e,t,n,a,o,r){var i=e.memoizedState;null===i?e.memoizedState={isBackwards:t,rendering:null,renderingStartTime:0,last:a,tail:n,tailExpiration:0,tailMode:o,lastEffect:r}:(i.isBackwards=t,i.rendering=null,i.renderingStartTime=0,i.last=a,i.tail=n,i.tailExpiration=0,i.tailMode=o,i.lastEffect=r)}function Xi(e,t,n){var a=t.pendingProps,o=a.revealOrder,r=a.tail;if(Li(e,t,a.children,n),0!=(2&(a=$r.current)))a=1&a|2,t.effectTag|=64;else{if(null!==e&&0!=(64&e.effectTag))e:for(e=t.child;null!==e;){if(13===e.tag)null!==e.memoizedState&&Qi(e,n);else if(19===e.tag)Qi(e,n);else if(null!==e.child){e.child.return=e,e=e.child;continue}if(e===t)break e;for(;null===e.sibling;){if(null===e.return||e.return===t)break e;e=e.return}e.sibling.return=e.return,e=e.sibling}a&=1}if(mo($r,a),0==(2&t.mode))t.memoizedState=null;else switch(o){case"forwards":for(n=t.child,o=null;null!==n;)null!==(e=n.alternate)&&null===Ur(e)&&(o=n),n=n.sibling;null===(n=o)?(o=t.child,t.child=null):(o=n.sibling,n.sibling=null),Yi(t,!1,o,n,r,t.lastEffect);break;case"backwards":for(n=null,o=t.child,t.child=null;null!==o;){if(null!==(e=o.alternate)&&null===Ur(e)){t.child=o;break}e=o.sibling,o.sibling=n,n=o,o=e}Yi(t,!0,n,null,r,t.lastEffect);break;case"together":Yi(t,!1,null,null,void 0,t.lastEffect);break;default:t.memoizedState=null}return t.child}function Zi(e,t,n){null!==e&&(t.dependencies=e.dependencies);var a=t.expirationTime;if(0!==a&&ms(a),t.childExpirationTime<n)return null;if(null!==e&&t.child!==e.child)throw Error(i(153));if(null!==t.child){for(n=Fs(e=t.child,e.pendingProps),t.child=n,n.return=t;null!==e.sibling;)e=e.sibling,(n=n.sibling=Fs(e,e.pendingProps)).return=t;n.sibling=null}return t.child}function Ji(e,t){switch(e.tailMode){case"hidden":t=e.tail;for(var n=null;null!==t;)null!==t.alternate&&(n=t),t=t.sibling;null===n?e.tail=null:n.sibling=null;break;case"collapsed":n=e.tail;for(var a=null;null!==n;)null!==n.alternate&&(a=n),n=n.sibling;null===a?t||null===e.tail?e.tail=null:e.tail.sibling=null:a.sibling=null}}function el(e,t,n){var a=t.pendingProps;switch(t.tag){case 2:case 16:case 15:case 0:case 11:case 7:case 8:case 12:case 9:case 14:return null;case 1:return wo(t.type)&&yo(),null;case 3:return jr(),fo(go),fo(vo),(n=t.stateNode).pendingContext&&(n.context=n.pendingContext,n.pendingContext=null),null!==e&&null!==e.child||!Ai(t)||(t.effectTag|=4),null;case 5:zr(t),n=Lr(Fr.current);var r=t.type;if(null!==e&&null!=t.stateNode)Vi(e,t,r,a,n),e.ref!==t.ref&&(t.effectTag|=128);else{if(!a){if(null===t.stateNode)throw Error(i(166));return null}if(e=Lr(Rr.current),Ai(t)){a=t.stateNode,r=t.type;var l=t.memoizedProps;switch(a[Cn]=t,a[Pn]=l,r){case"iframe":case"object":case"embed":Kt("load",a);break;case"video":case"audio":for(e=0;e<Xe.length;e++)Kt(Xe[e],a);break;case"source":Kt("error",a);break;case"img":case"image":case"link":Kt("error",a),Kt("load",a);break;case"form":Kt("reset",a),Kt("submit",a);break;case"details":Kt("toggle",a);break;case"input":Ee(a,l),Kt("invalid",a),cn(n,"onChange");break;case"select":a._wrapperState={wasMultiple:!!l.multiple},Kt("invalid",a),cn(n,"onChange");break;case"textarea":Ae(a,l),Kt("invalid",a),cn(n,"onChange")}for(var s in rn(r,l),e=null,l)if(l.hasOwnProperty(s)){var c=l[s];"children"===s?"string"==typeof c?a.textContent!==c&&(e=["children",c]):"number"==typeof c&&a.textContent!==""+c&&(e=["children",""+c]):S.hasOwnProperty(s)&&null!=c&&cn(n,s)}switch(r){case"input":we(a),_e(a,l,!0);break;case"textarea":we(a),Ie(a);break;case"select":case"option":break;default:"function"==typeof l.onClick&&(a.onclick=un)}n=e,t.updateQueue=n,null!==n&&(t.effectTag|=4)}else{switch(s=9===n.nodeType?n:n.ownerDocument,e===sn&&(e=De(r)),e===sn?"script"===r?((e=s.createElement("div")).innerHTML="<script><\/script>",e=e.removeChild(e.firstChild)):"string"==typeof a.is?e=s.createElement(r,{is:a.is}):(e=s.createElement(r),"select"===r&&(s=e,a.multiple?s.multiple=!0:a.size&&(s.size=a.size))):e=s.createElementNS(e,r),e[Cn]=t,e[Pn]=a,Wi(e,t),t.stateNode=e,s=ln(r,a),r){case"iframe":case"object":case"embed":Kt("load",e),c=a;break;case"video":case"audio":for(c=0;c<Xe.length;c++)Kt(Xe[c],e);c=a;break;case"source":Kt("error",e),c=a;break;case"img":case"image":case"link":Kt("error",e),Kt("load",e),c=a;break;case"form":Kt("reset",e),Kt("submit",e),c=a;break;case"details":Kt("toggle",e),c=a;break;case"input":Ee(e,a),c=ke(e,a),Kt("invalid",e),cn(n,"onChange");break;case"option":c=Ce(e,a);break;case"select":e._wrapperState={wasMultiple:!!a.multiple},c=o({},a,{value:void 0}),Kt("invalid",e),cn(n,"onChange");break;case"textarea":Ae(e,a),c=Ne(e,a),Kt("invalid",e),cn(n,"onChange");break;default:c=a}rn(r,c);var u=c;for(l in u)if(u.hasOwnProperty(l)){var p=u[l];"style"===l?an(e,p):"dangerouslySetInnerHTML"===l?null!=(p=p?p.__html:void 0)&&$e(e,p):"children"===l?"string"==typeof p?("textarea"!==r||""!==p)&&Ue(e,p):"number"==typeof p&&Ue(e,""+p):"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&"autoFocus"!==l&&(S.hasOwnProperty(l)?null!=p&&cn(n,l):null!=p&&X(e,l,p,s))}switch(r){case"input":we(e),_e(e,a,!1);break;case"textarea":we(e),Ie(e);break;case"option":null!=a.value&&e.setAttribute("value",""+be(a.value));break;case"select":e.multiple=!!a.multiple,null!=(n=a.value)?Pe(e,!!a.multiple,n,!1):null!=a.defaultValue&&Pe(e,!!a.multiple,a.defaultValue,!0);break;default:"function"==typeof c.onClick&&(e.onclick=un)}yn(r,a)&&(t.effectTag|=4)}null!==t.ref&&(t.effectTag|=128)}return null;case 6:if(e&&null!=t.stateNode)Gi(0,t,e.memoizedProps,a);else{if("string"!=typeof a&&null===t.stateNode)throw Error(i(166));n=Lr(Fr.current),Lr(Rr.current),Ai(t)?(n=t.stateNode,a=t.memoizedProps,n[Cn]=t,n.nodeValue!==a&&(t.effectTag|=4)):((n=(9===n.nodeType?n:n.ownerDocument).createTextNode(a))[Cn]=t,t.stateNode=n)}return null;case 13:return fo($r),a=t.memoizedState,0!=(64&t.effectTag)?(t.expirationTime=n,t):(n=null!==a,a=!1,null===e?void 0!==t.memoizedProps.fallback&&Ai(t):(a=null!==(r=e.memoizedState),n||null===r||null!==(r=e.child.sibling)&&(null!==(l=t.firstEffect)?(t.firstEffect=r,r.nextEffect=l):(t.firstEffect=t.lastEffect=r,r.nextEffect=null),r.effectTag=8)),n&&!a&&0!=(2&t.mode)&&(null===e&&!0!==t.memoizedProps.unstable_avoidThisFallback||0!=(1&$r.current)?Ll===Cl&&(Ll=Pl):(Ll!==Cl&&Ll!==Pl||(Ll=Nl),0!==$l&&null!==Rl&&(Us(Rl,Fl),Bs(Rl,$l)))),(n||a)&&(t.effectTag|=4),null);case 4:return jr(),null;case 10:return rr(t),null;case 17:return wo(t.type)&&yo(),null;case 19:if(fo($r),null===(a=t.memoizedState))return null;if(r=0!=(64&t.effectTag),null===(l=a.rendering)){if(r)Ji(a,!1);else if(Ll!==Cl||null!==e&&0!=(64&e.effectTag))for(l=t.child;null!==l;){if(null!==(e=Ur(l))){for(t.effectTag|=64,Ji(a,!1),null!==(r=e.updateQueue)&&(t.updateQueue=r,t.effectTag|=4),null===a.lastEffect&&(t.firstEffect=null),t.lastEffect=a.lastEffect,a=t.child;null!==a;)l=n,(r=a).effectTag&=2,r.nextEffect=null,r.firstEffect=null,r.lastEffect=null,null===(e=r.alternate)?(r.childExpirationTime=0,r.expirationTime=l,r.child=null,r.memoizedProps=null,r.memoizedState=null,r.updateQueue=null,r.dependencies=null):(r.childExpirationTime=e.childExpirationTime,r.expirationTime=e.expirationTime,r.child=e.child,r.memoizedProps=e.memoizedProps,r.memoizedState=e.memoizedState,r.updateQueue=e.updateQueue,l=e.dependencies,r.dependencies=null===l?null:{expirationTime:l.expirationTime,firstContext:l.firstContext,responders:l.responders}),a=a.sibling;return mo($r,1&$r.current|2),t.child}l=l.sibling}}else{if(!r)if(null!==(e=Ur(l))){if(t.effectTag|=64,r=!0,null!==(n=e.updateQueue)&&(t.updateQueue=n,t.effectTag|=4),Ji(a,!0),null===a.tail&&"hidden"===a.tailMode&&!l.alternate)return null!==(t=t.lastEffect=a.lastEffect)&&(t.nextEffect=null),null}else 2*Wo()-a.renderingStartTime>a.tailExpiration&&1<n&&(t.effectTag|=64,r=!0,Ji(a,!1),t.expirationTime=t.childExpirationTime=n-1);a.isBackwards?(l.sibling=t.child,t.child=l):(null!==(n=a.last)?n.sibling=l:t.child=l,a.last=l)}return null!==a.tail?(0===a.tailExpiration&&(a.tailExpiration=Wo()+500),n=a.tail,a.rendering=n,a.tail=n.sibling,a.lastEffect=t.lastEffect,a.renderingStartTime=Wo(),n.sibling=null,t=$r.current,mo($r,r?1&t|2:1&t),n):null}throw Error(i(156,t.tag))}function tl(e){switch(e.tag){case 1:wo(e.type)&&yo();var t=e.effectTag;return 4096&t?(e.effectTag=-4097&t|64,e):null;case 3:if(jr(),fo(go),fo(vo),0!=(64&(t=e.effectTag)))throw Error(i(285));return e.effectTag=-4097&t|64,e;case 5:return zr(e),null;case 13:return fo($r),4096&(t=e.effectTag)?(e.effectTag=-4097&t|64,e):null;case 19:return fo($r),null;case 4:return jr(),null;case 10:return rr(e),null;default:return null}}function nl(e,t){return{value:e,source:t,stack:ge(t)}}Wi=function(e,t){for(var n=t.child;null!==n;){if(5===n.tag||6===n.tag)e.appendChild(n.stateNode);else if(4!==n.tag&&null!==n.child){n.child.return=n,n=n.child;continue}if(n===t)break;for(;null===n.sibling;){if(null===n.return||n.return===t)return;n=n.return}n.sibling.return=n.return,n=n.sibling}},Vi=function(e,t,n,a,r){var i=e.memoizedProps;if(i!==a){var l,s,c=t.stateNode;switch(Lr(Rr.current),e=null,n){case"input":i=ke(c,i),a=ke(c,a),e=[];break;case"option":i=Ce(c,i),a=Ce(c,a),e=[];break;case"select":i=o({},i,{value:void 0}),a=o({},a,{value:void 0}),e=[];break;case"textarea":i=Ne(c,i),a=Ne(c,a),e=[];break;default:"function"!=typeof i.onClick&&"function"==typeof a.onClick&&(c.onclick=un)}for(l in rn(n,a),n=null,i)if(!a.hasOwnProperty(l)&&i.hasOwnProperty(l)&&null!=i[l])if("style"===l)for(s in c=i[l])c.hasOwnProperty(s)&&(n||(n={}),n[s]="");else"dangerouslySetInnerHTML"!==l&&"children"!==l&&"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&"autoFocus"!==l&&(S.hasOwnProperty(l)?e||(e=[]):(e=e||[]).push(l,null));for(l in a){var u=a[l];if(c=null!=i?i[l]:void 0,a.hasOwnProperty(l)&&u!==c&&(null!=u||null!=c))if("style"===l)if(c){for(s in c)!c.hasOwnProperty(s)||u&&u.hasOwnProperty(s)||(n||(n={}),n[s]="");for(s in u)u.hasOwnProperty(s)&&c[s]!==u[s]&&(n||(n={}),n[s]=u[s])}else n||(e||(e=[]),e.push(l,n)),n=u;else"dangerouslySetInnerHTML"===l?(u=u?u.__html:void 0,c=c?c.__html:void 0,null!=u&&c!==u&&(e=e||[]).push(l,u)):"children"===l?c===u||"string"!=typeof u&&"number"!=typeof u||(e=e||[]).push(l,""+u):"suppressContentEditableWarning"!==l&&"suppressHydrationWarning"!==l&&(S.hasOwnProperty(l)?(null!=u&&cn(r,l),e||c===u||(e=[])):(e=e||[]).push(l,u))}n&&(e=e||[]).push("style",n),r=e,(t.updateQueue=r)&&(t.effectTag|=4)}},Gi=function(e,t,n,a){n!==a&&(t.effectTag|=4)};var al="function"==typeof WeakSet?WeakSet:Set;function ol(e,t){var n=t.source,a=t.stack;null===a&&null!==n&&(a=ge(n)),null!==n&&ve(n.type),t=t.value,null!==e&&1===e.tag&&ve(e.type);try{console.error(t)}catch(o){setTimeout((function(){throw o}))}}function rl(e){var t=e.ref;if(null!==t)if("function"==typeof t)try{t(null)}catch(n){_s(e,n)}else t.current=null}function il(e,t){switch(t.tag){case 0:case 11:case 15:case 22:return;case 1:if(256&t.effectTag&&null!==e){var n=e.memoizedProps,a=e.memoizedState;t=(e=t.stateNode).getSnapshotBeforeUpdate(t.elementType===t.type?n:Jo(t.type,n),a),e.__reactInternalSnapshotBeforeUpdate=t}return;case 3:case 5:case 6:case 4:case 17:return}throw Error(i(163))}function ll(e,t){if(null!==(t=null!==(t=t.updateQueue)?t.lastEffect:null)){var n=t=t.next;do{if((n.tag&e)===e){var a=n.destroy;n.destroy=void 0,void 0!==a&&a()}n=n.next}while(n!==t)}}function sl(e,t){if(null!==(t=null!==(t=t.updateQueue)?t.lastEffect:null)){var n=t=t.next;do{if((n.tag&e)===e){var a=n.create;n.destroy=a()}n=n.next}while(n!==t)}}function cl(e,t,n){switch(n.tag){case 0:case 11:case 15:case 22:return void sl(3,n);case 1:if(e=n.stateNode,4&n.effectTag)if(null===t)e.componentDidMount();else{var a=n.elementType===n.type?t.memoizedProps:Jo(n.type,t.memoizedProps);e.componentDidUpdate(a,t.memoizedState,e.__reactInternalSnapshotBeforeUpdate)}return void(null!==(t=n.updateQueue)&&vr(n,t,e));case 3:if(null!==(t=n.updateQueue)){if(e=null,null!==n.child)switch(n.child.tag){case 5:e=n.child.stateNode;break;case 1:e=n.child.stateNode}vr(n,t,e)}return;case 5:return e=n.stateNode,void(null===t&&4&n.effectTag&&yn(n.type,n.memoizedProps)&&e.focus());case 6:case 4:case 12:return;case 13:return void(null===n.memoizedState&&(n=n.alternate,null!==n&&(n=n.memoizedState,null!==n&&(n=n.dehydrated,null!==n&&jt(n)))));case 19:case 17:case 20:case 21:return}throw Error(i(163))}function ul(e,t,n){switch("function"==typeof Ns&&Ns(t),t.tag){case 0:case 11:case 14:case 15:case 22:if(null!==(e=t.updateQueue)&&null!==(e=e.lastEffect)){var a=e.next;qo(97<n?97:n,(function(){var e=a;do{var n=e.destroy;if(void 0!==n){var o=t;try{n()}catch(r){_s(o,r)}}e=e.next}while(e!==a)}))}break;case 1:rl(t),"function"==typeof(n=t.stateNode).componentWillUnmount&&function(e,t){try{t.props=e.memoizedProps,t.state=e.memoizedState,t.componentWillUnmount()}catch(n){_s(e,n)}}(t,n);break;case 5:rl(t);break;case 4:vl(e,t,n)}}function pl(e){var t=e.alternate;e.return=null,e.child=null,e.memoizedState=null,e.updateQueue=null,e.dependencies=null,e.alternate=null,e.firstEffect=null,e.lastEffect=null,e.pendingProps=null,e.memoizedProps=null,e.stateNode=null,null!==t&&pl(t)}function dl(e){return 5===e.tag||3===e.tag||4===e.tag}function fl(e){e:{for(var t=e.return;null!==t;){if(dl(t)){var n=t;break e}t=t.return}throw Error(i(160))}switch(t=n.stateNode,n.tag){case 5:var a=!1;break;case 3:case 4:t=t.containerInfo,a=!0;break;default:throw Error(i(161))}16&n.effectTag&&(Ue(t,""),n.effectTag&=-17);e:t:for(n=e;;){for(;null===n.sibling;){if(null===n.return||dl(n.return)){n=null;break e}n=n.return}for(n.sibling.return=n.return,n=n.sibling;5!==n.tag&&6!==n.tag&&18!==n.tag;){if(2&n.effectTag)continue t;if(null===n.child||4===n.tag)continue t;n.child.return=n,n=n.child}if(!(2&n.effectTag)){n=n.stateNode;break e}}a?ml(e,n,t):hl(e,n,t)}function ml(e,t,n){var a=e.tag,o=5===a||6===a;if(o)e=o?e.stateNode:e.stateNode.instance,t?8===n.nodeType?n.parentNode.insertBefore(e,t):n.insertBefore(e,t):(8===n.nodeType?(t=n.parentNode).insertBefore(e,n):(t=n).appendChild(e),null!=(n=n._reactRootContainer)||null!==t.onclick||(t.onclick=un));else if(4!==a&&null!==(e=e.child))for(ml(e,t,n),e=e.sibling;null!==e;)ml(e,t,n),e=e.sibling}function hl(e,t,n){var a=e.tag,o=5===a||6===a;if(o)e=o?e.stateNode:e.stateNode.instance,t?n.insertBefore(e,t):n.appendChild(e);else if(4!==a&&null!==(e=e.child))for(hl(e,t,n),e=e.sibling;null!==e;)hl(e,t,n),e=e.sibling}function vl(e,t,n){for(var a,o,r=t,l=!1;;){if(!l){l=r.return;e:for(;;){if(null===l)throw Error(i(160));switch(a=l.stateNode,l.tag){case 5:o=!1;break e;case 3:case 4:a=a.containerInfo,o=!0;break e}l=l.return}l=!0}if(5===r.tag||6===r.tag){e:for(var s=e,c=r,u=n,p=c;;)if(ul(s,p,u),null!==p.child&&4!==p.tag)p.child.return=p,p=p.child;else{if(p===c)break e;for(;null===p.sibling;){if(null===p.return||p.return===c)break e;p=p.return}p.sibling.return=p.return,p=p.sibling}o?(s=a,c=r.stateNode,8===s.nodeType?s.parentNode.removeChild(c):s.removeChild(c)):a.removeChild(r.stateNode)}else if(4===r.tag){if(null!==r.child){a=r.stateNode.containerInfo,o=!0,r.child.return=r,r=r.child;continue}}else if(ul(e,r,n),null!==r.child){r.child.return=r,r=r.child;continue}if(r===t)break;for(;null===r.sibling;){if(null===r.return||r.return===t)return;4===(r=r.return).tag&&(l=!1)}r.sibling.return=r.return,r=r.sibling}}function gl(e,t){switch(t.tag){case 0:case 11:case 14:case 15:case 22:return void ll(3,t);case 1:return;case 5:var n=t.stateNode;if(null!=n){var a=t.memoizedProps,o=null!==e?e.memoizedProps:a;e=t.type;var r=t.updateQueue;if(t.updateQueue=null,null!==r){for(n[Pn]=a,"input"===e&&"radio"===a.type&&null!=a.name&&Se(n,a),ln(e,o),t=ln(e,a),o=0;o<r.length;o+=2){var l=r[o],s=r[o+1];"style"===l?an(n,s):"dangerouslySetInnerHTML"===l?$e(n,s):"children"===l?Ue(n,s):X(n,l,s,t)}switch(e){case"input":Te(n,a);break;case"textarea":Re(n,a);break;case"select":t=n._wrapperState.wasMultiple,n._wrapperState.wasMultiple=!!a.multiple,null!=(e=a.value)?Pe(n,!!a.multiple,e,!1):t!==!!a.multiple&&(null!=a.defaultValue?Pe(n,!!a.multiple,a.defaultValue,!0):Pe(n,!!a.multiple,a.multiple?[]:"",!1))}}}return;case 6:if(null===t.stateNode)throw Error(i(162));return void(t.stateNode.nodeValue=t.memoizedProps);case 3:return void((t=t.stateNode).hydrate&&(t.hydrate=!1,jt(t.containerInfo)));case 12:return;case 13:if(n=t,null===t.memoizedState?a=!1:(a=!0,n=t.child,Bl=Wo()),null!==n)e:for(e=n;;){if(5===e.tag)r=e.stateNode,a?"function"==typeof(r=r.style).setProperty?r.setProperty("display","none","important"):r.display="none":(r=e.stateNode,o=null!=(o=e.memoizedProps.style)&&o.hasOwnProperty("display")?o.display:null,r.style.display=nn("display",o));else if(6===e.tag)e.stateNode.nodeValue=a?"":e.memoizedProps;else{if(13===e.tag&&null!==e.memoizedState&&null===e.memoizedState.dehydrated){(r=e.child.sibling).return=e,e=r;continue}if(null!==e.child){e.child.return=e,e=e.child;continue}}if(e===n)break;for(;null===e.sibling;){if(null===e.return||e.return===n)break e;e=e.return}e.sibling.return=e.return,e=e.sibling}return void bl(t);case 19:return void bl(t);case 17:return}throw Error(i(163))}function bl(e){var t=e.updateQueue;if(null!==t){e.updateQueue=null;var n=e.stateNode;null===n&&(n=e.stateNode=new al),t.forEach((function(t){var a=Cs.bind(null,e,t);n.has(t)||(n.add(t),t.then(a,a))}))}}var xl="function"==typeof WeakMap?WeakMap:Map;function wl(e,t,n){(n=dr(n,null)).tag=3,n.payload={element:null};var a=t.value;return n.callback=function(){Wl||(Wl=!0,Vl=a),ol(e,t)},n}function yl(e,t,n){(n=dr(n,null)).tag=3;var a=e.type.getDerivedStateFromError;if("function"==typeof a){var o=t.value;n.payload=function(){return ol(e,t),a(o)}}var r=e.stateNode;return null!==r&&"function"==typeof r.componentDidCatch&&(n.callback=function(){"function"!=typeof a&&(null===Gl?Gl=new Set([this]):Gl.add(this),ol(e,t));var n=t.stack;this.componentDidCatch(t.value,{componentStack:null!==n?n:""})}),n}var kl,El=Math.ceil,Sl=Y.ReactCurrentDispatcher,Tl=Y.ReactCurrentOwner,_l=16,Ol=32,Cl=0,Pl=3,Nl=4,Al=0,Rl=null,Il=null,Fl=0,Ll=Cl,Dl=null,jl=1073741823,Ml=1073741823,zl=null,$l=0,Ul=!1,Bl=0,Hl=null,Wl=!1,Vl=null,Gl=null,ql=!1,Kl=null,Ql=90,Yl=null,Xl=0,Zl=null,Jl=0;function es(){return 0!=(48&Al)?1073741821-(Wo()/10|0):0!==Jl?Jl:Jl=1073741821-(Wo()/10|0)}function ts(e,t,n){if(0==(2&(t=t.mode)))return 1073741823;var a=Vo();if(0==(4&t))return 99===a?1073741823:1073741822;if(0!=(Al&_l))return Fl;if(null!==n)e=Zo(e,0|n.timeoutMs||5e3,250);else switch(a){case 99:e=1073741823;break;case 98:e=Zo(e,150,100);break;case 97:case 96:e=Zo(e,5e3,250);break;case 95:e=2;break;default:throw Error(i(326))}return null!==Rl&&e===Fl&&--e,e}function ns(e,t){if(50<Xl)throw Xl=0,Zl=null,Error(i(185));if(null!==(e=as(e,t))){var n=Vo();1073741823===t?0!=(8&Al)&&0==(48&Al)?ls(e):(rs(e),0===Al&&Yo()):rs(e),0==(4&Al)||98!==n&&99!==n||(null===Yl?Yl=new Map([[e,t]]):(void 0===(n=Yl.get(e))||n>t)&&Yl.set(e,t))}}function as(e,t){e.expirationTime<t&&(e.expirationTime=t);var n=e.alternate;null!==n&&n.expirationTime<t&&(n.expirationTime=t);var a=e.return,o=null;if(null===a&&3===e.tag)o=e.stateNode;else for(;null!==a;){if(n=a.alternate,a.childExpirationTime<t&&(a.childExpirationTime=t),null!==n&&n.childExpirationTime<t&&(n.childExpirationTime=t),null===a.return&&3===a.tag){o=a.stateNode;break}a=a.return}return null!==o&&(Rl===o&&(ms(t),Ll===Nl&&Us(o,Fl)),Bs(o,t)),o}function os(e){var t=e.lastExpiredTime;if(0!==t)return t;if(!$s(e,t=e.firstPendingTime))return t;var n=e.lastPingedTime;return 2>=(e=n>(e=e.nextKnownPendingLevel)?n:e)&&t!==e?0:e}function rs(e){if(0!==e.lastExpiredTime)e.callbackExpirationTime=1073741823,e.callbackPriority=99,e.callbackNode=Qo(ls.bind(null,e));else{var t=os(e),n=e.callbackNode;if(0===t)null!==n&&(e.callbackNode=null,e.callbackExpirationTime=0,e.callbackPriority=90);else{var a=es();if(1073741823===t?a=99:1===t||2===t?a=95:a=0>=(a=10*(1073741821-t)-10*(1073741821-a))?99:250>=a?98:5250>=a?97:95,null!==n){var o=e.callbackPriority;if(e.callbackExpirationTime===t&&o>=a)return;n!==jo&&Co(n)}e.callbackExpirationTime=t,e.callbackPriority=a,t=1073741823===t?Qo(ls.bind(null,e)):Ko(a,is.bind(null,e),{timeout:10*(1073741821-t)-Wo()}),e.callbackNode=t}}}function is(e,t){if(Jl=0,t)return Hs(e,t=es()),rs(e),null;var n=os(e);if(0!==n){if(t=e.callbackNode,0!=(48&Al))throw Error(i(327));if(Es(),e===Rl&&n===Fl||us(e,n),null!==Il){var a=Al;Al|=_l;for(var o=ds();;)try{vs();break}catch(s){ps(e,s)}if(or(),Al=a,Sl.current=o,1===Ll)throw t=Dl,us(e,n),Us(e,n),rs(e),t;if(null===Il)switch(o=e.finishedWork=e.current.alternate,e.finishedExpirationTime=n,a=Ll,Rl=null,a){case Cl:case 1:throw Error(i(345));case 2:Hs(e,2<n?2:n);break;case Pl:if(Us(e,n),n===(a=e.lastSuspendedTime)&&(e.nextKnownPendingLevel=xs(o)),1073741823===jl&&10<(o=Bl+500-Wo())){if(Ul){var r=e.lastPingedTime;if(0===r||r>=n){e.lastPingedTime=n,us(e,n);break}}if(0!==(r=os(e))&&r!==n)break;if(0!==a&&a!==n){e.lastPingedTime=a;break}e.timeoutHandle=En(ws.bind(null,e),o);break}ws(e);break;case Nl:if(Us(e,n),n===(a=e.lastSuspendedTime)&&(e.nextKnownPendingLevel=xs(o)),Ul&&(0===(o=e.lastPingedTime)||o>=n)){e.lastPingedTime=n,us(e,n);break}if(0!==(o=os(e))&&o!==n)break;if(0!==a&&a!==n){e.lastPingedTime=a;break}if(1073741823!==Ml?a=10*(1073741821-Ml)-Wo():1073741823===jl?a=0:(a=10*(1073741821-jl)-5e3,0>(a=(o=Wo())-a)&&(a=0),(n=10*(1073741821-n)-o)<(a=(120>a?120:480>a?480:1080>a?1080:1920>a?1920:3e3>a?3e3:4320>a?4320:1960*El(a/1960))-a)&&(a=n)),10<a){e.timeoutHandle=En(ws.bind(null,e),a);break}ws(e);break;case 5:if(1073741823!==jl&&null!==zl){r=jl;var l=zl;if(0>=(a=0|l.busyMinDurationMs)?a=0:(o=0|l.busyDelayMs,a=(r=Wo()-(10*(1073741821-r)-(0|l.timeoutMs||5e3)))<=o?0:o+a-r),10<a){Us(e,n),e.timeoutHandle=En(ws.bind(null,e),a);break}}ws(e);break;default:throw Error(i(329))}if(rs(e),e.callbackNode===t)return is.bind(null,e)}}return null}function ls(e){var t=e.lastExpiredTime;if(t=0!==t?t:1073741823,0!=(48&Al))throw Error(i(327));if(Es(),e===Rl&&t===Fl||us(e,t),null!==Il){var n=Al;Al|=_l;for(var a=ds();;)try{hs();break}catch(o){ps(e,o)}if(or(),Al=n,Sl.current=a,1===Ll)throw n=Dl,us(e,t),Us(e,t),rs(e),n;if(null!==Il)throw Error(i(261));e.finishedWork=e.current.alternate,e.finishedExpirationTime=t,Rl=null,ws(e),rs(e)}return null}function ss(e,t){var n=Al;Al|=1;try{return e(t)}finally{0===(Al=n)&&Yo()}}function cs(e,t){var n=Al;Al&=-2,Al|=8;try{return e(t)}finally{0===(Al=n)&&Yo()}}function us(e,t){e.finishedWork=null,e.finishedExpirationTime=0;var n=e.timeoutHandle;if(-1!==n&&(e.timeoutHandle=-1,Sn(n)),null!==Il)for(n=Il.return;null!==n;){var a=n;switch(a.tag){case 1:null!=(a=a.type.childContextTypes)&&yo();break;case 3:jr(),fo(go),fo(vo);break;case 5:zr(a);break;case 4:jr();break;case 13:case 19:fo($r);break;case 10:rr(a)}n=n.return}Rl=e,Il=Fs(e.current,null),Fl=t,Ll=Cl,Dl=null,Ml=jl=1073741823,zl=null,$l=0,Ul=!1}function ps(e,t){for(;;){try{if(or(),Hr.current=wi,Qr)for(var n=Gr.memoizedState;null!==n;){var a=n.queue;null!==a&&(a.pending=null),n=n.next}if(Vr=0,Kr=qr=Gr=null,Qr=!1,null===Il||null===Il.return)return Ll=1,Dl=t,Il=null;e:{var o=e,r=Il.return,i=Il,l=t;if(t=Fl,i.effectTag|=2048,i.firstEffect=i.lastEffect=null,null!==l&&"object"==typeof l&&"function"==typeof l.then){var s=l;if(0==(2&i.mode)){var c=i.alternate;c?(i.updateQueue=c.updateQueue,i.memoizedState=c.memoizedState,i.expirationTime=c.expirationTime):(i.updateQueue=null,i.memoizedState=null)}var u=0!=(1&$r.current),p=r;do{var d;if(d=13===p.tag){var f=p.memoizedState;if(null!==f)d=null!==f.dehydrated;else{var m=p.memoizedProps;d=void 0!==m.fallback&&(!0!==m.unstable_avoidThisFallback||!u)}}if(d){var h=p.updateQueue;if(null===h){var v=new Set;v.add(s),p.updateQueue=v}else h.add(s);if(0==(2&p.mode)){if(p.effectTag|=64,i.effectTag&=-2981,1===i.tag)if(null===i.alternate)i.tag=17;else{var g=dr(1073741823,null);g.tag=2,fr(i,g)}i.expirationTime=1073741823;break e}l=void 0,i=t;var b=o.pingCache;if(null===b?(b=o.pingCache=new xl,l=new Set,b.set(s,l)):void 0===(l=b.get(s))&&(l=new Set,b.set(s,l)),!l.has(i)){l.add(i);var x=Os.bind(null,o,s,i);s.then(x,x)}p.effectTag|=4096,p.expirationTime=t;break e}p=p.return}while(null!==p);l=Error((ve(i.type)||"A React component")+" suspended while rendering, but no fallback UI was specified.\n\nAdd a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display."+ge(i))}5!==Ll&&(Ll=2),l=nl(l,i),p=r;do{switch(p.tag){case 3:s=l,p.effectTag|=4096,p.expirationTime=t,mr(p,wl(p,s,t));break e;case 1:s=l;var w=p.type,y=p.stateNode;if(0==(64&p.effectTag)&&("function"==typeof w.getDerivedStateFromError||null!==y&&"function"==typeof y.componentDidCatch&&(null===Gl||!Gl.has(y)))){p.effectTag|=4096,p.expirationTime=t,mr(p,yl(p,s,t));break e}}p=p.return}while(null!==p)}Il=bs(Il)}catch(k){t=k;continue}break}}function ds(){var e=Sl.current;return Sl.current=wi,null===e?wi:e}function fs(e,t){e<jl&&2<e&&(jl=e),null!==t&&e<Ml&&2<e&&(Ml=e,zl=t)}function ms(e){e>$l&&($l=e)}function hs(){for(;null!==Il;)Il=gs(Il)}function vs(){for(;null!==Il&&!Mo();)Il=gs(Il)}function gs(e){var t=kl(e.alternate,e,Fl);return e.memoizedProps=e.pendingProps,null===t&&(t=bs(e)),Tl.current=null,t}function bs(e){Il=e;do{var t=Il.alternate;if(e=Il.return,0==(2048&Il.effectTag)){if(t=el(t,Il,Fl),1===Fl||1!==Il.childExpirationTime){for(var n=0,a=Il.child;null!==a;){var o=a.expirationTime,r=a.childExpirationTime;o>n&&(n=o),r>n&&(n=r),a=a.sibling}Il.childExpirationTime=n}if(null!==t)return t;null!==e&&0==(2048&e.effectTag)&&(null===e.firstEffect&&(e.firstEffect=Il.firstEffect),null!==Il.lastEffect&&(null!==e.lastEffect&&(e.lastEffect.nextEffect=Il.firstEffect),e.lastEffect=Il.lastEffect),1<Il.effectTag&&(null!==e.lastEffect?e.lastEffect.nextEffect=Il:e.firstEffect=Il,e.lastEffect=Il))}else{if(null!==(t=tl(Il)))return t.effectTag&=2047,t;null!==e&&(e.firstEffect=e.lastEffect=null,e.effectTag|=2048)}if(null!==(t=Il.sibling))return t;Il=e}while(null!==Il);return Ll===Cl&&(Ll=5),null}function xs(e){var t=e.expirationTime;return t>(e=e.childExpirationTime)?t:e}function ws(e){var t=Vo();return qo(99,ys.bind(null,e,t)),null}function ys(e,t){do{Es()}while(null!==Kl);if(0!=(48&Al))throw Error(i(327));var n=e.finishedWork,a=e.finishedExpirationTime;if(null===n)return null;if(e.finishedWork=null,e.finishedExpirationTime=0,n===e.current)throw Error(i(177));e.callbackNode=null,e.callbackExpirationTime=0,e.callbackPriority=90,e.nextKnownPendingLevel=0;var o=xs(n);if(e.firstPendingTime=o,a<=e.lastSuspendedTime?e.firstSuspendedTime=e.lastSuspendedTime=e.nextKnownPendingLevel=0:a<=e.firstSuspendedTime&&(e.firstSuspendedTime=a-1),a<=e.lastPingedTime&&(e.lastPingedTime=0),a<=e.lastExpiredTime&&(e.lastExpiredTime=0),e===Rl&&(Il=Rl=null,Fl=0),1<n.effectTag?null!==n.lastEffect?(n.lastEffect.nextEffect=n,o=n.firstEffect):o=n:o=n.firstEffect,null!==o){var r=Al;Al|=Ol,Tl.current=null,xn=qt;var l=hn();if(vn(l)){if("selectionStart"in l)var s={start:l.selectionStart,end:l.selectionEnd};else e:{var c=(s=(s=l.ownerDocument)&&s.defaultView||window).getSelection&&s.getSelection();if(c&&0!==c.rangeCount){s=c.anchorNode;var u=c.anchorOffset,p=c.focusNode;c=c.focusOffset;try{s.nodeType,p.nodeType}catch(_){s=null;break e}var d=0,f=-1,m=-1,h=0,v=0,g=l,b=null;t:for(;;){for(var x;g!==s||0!==u&&3!==g.nodeType||(f=d+u),g!==p||0!==c&&3!==g.nodeType||(m=d+c),3===g.nodeType&&(d+=g.nodeValue.length),null!==(x=g.firstChild);)b=g,g=x;for(;;){if(g===l)break t;if(b===s&&++h===u&&(f=d),b===p&&++v===c&&(m=d),null!==(x=g.nextSibling))break;b=(g=b).parentNode}g=x}s=-1===f||-1===m?null:{start:f,end:m}}else s=null}s=s||{start:0,end:0}}else s=null;wn={activeElementDetached:null,focusedElem:l,selectionRange:s},qt=!1,Hl=o;do{try{ks()}catch(_){if(null===Hl)throw Error(i(330));_s(Hl,_),Hl=Hl.nextEffect}}while(null!==Hl);Hl=o;do{try{for(l=e,s=t;null!==Hl;){var w=Hl.effectTag;if(16&w&&Ue(Hl.stateNode,""),128&w){var y=Hl.alternate;if(null!==y){var k=y.ref;null!==k&&("function"==typeof k?k(null):k.current=null)}}switch(1038&w){case 2:fl(Hl),Hl.effectTag&=-3;break;case 6:fl(Hl),Hl.effectTag&=-3,gl(Hl.alternate,Hl);break;case 1024:Hl.effectTag&=-1025;break;case 1028:Hl.effectTag&=-1025,gl(Hl.alternate,Hl);break;case 4:gl(Hl.alternate,Hl);break;case 8:vl(l,u=Hl,s),pl(u)}Hl=Hl.nextEffect}}catch(_){if(null===Hl)throw Error(i(330));_s(Hl,_),Hl=Hl.nextEffect}}while(null!==Hl);if(k=wn,y=hn(),w=k.focusedElem,s=k.selectionRange,y!==w&&w&&w.ownerDocument&&mn(w.ownerDocument.documentElement,w)){null!==s&&vn(w)&&(y=s.start,void 0===(k=s.end)&&(k=y),"selectionStart"in w?(w.selectionStart=y,w.selectionEnd=Math.min(k,w.value.length)):(k=(y=w.ownerDocument||document)&&y.defaultView||window).getSelection&&(k=k.getSelection(),u=w.textContent.length,l=Math.min(s.start,u),s=void 0===s.end?l:Math.min(s.end,u),!k.extend&&l>s&&(u=s,s=l,l=u),u=fn(w,l),p=fn(w,s),u&&p&&(1!==k.rangeCount||k.anchorNode!==u.node||k.anchorOffset!==u.offset||k.focusNode!==p.node||k.focusOffset!==p.offset)&&((y=y.createRange()).setStart(u.node,u.offset),k.removeAllRanges(),l>s?(k.addRange(y),k.extend(p.node,p.offset)):(y.setEnd(p.node,p.offset),k.addRange(y))))),y=[];for(k=w;k=k.parentNode;)1===k.nodeType&&y.push({element:k,left:k.scrollLeft,top:k.scrollTop});for("function"==typeof w.focus&&w.focus(),w=0;w<y.length;w++)(k=y[w]).element.scrollLeft=k.left,k.element.scrollTop=k.top}qt=!!xn,wn=xn=null,e.current=n,Hl=o;do{try{for(w=e;null!==Hl;){var E=Hl.effectTag;if(36&E&&cl(w,Hl.alternate,Hl),128&E){y=void 0;var S=Hl.ref;if(null!==S){var T=Hl.stateNode;switch(Hl.tag){case 5:y=T;break;default:y=T}"function"==typeof S?S(y):S.current=y}}Hl=Hl.nextEffect}}catch(_){if(null===Hl)throw Error(i(330));_s(Hl,_),Hl=Hl.nextEffect}}while(null!==Hl);Hl=null,zo(),Al=r}else e.current=n;if(ql)ql=!1,Kl=e,Ql=t;else for(Hl=o;null!==Hl;)t=Hl.nextEffect,Hl.nextEffect=null,Hl=t;if(0===(t=e.firstPendingTime)&&(Gl=null),1073741823===t?e===Zl?Xl++:(Xl=0,Zl=e):Xl=0,"function"==typeof Ps&&Ps(n.stateNode,a),rs(e),Wl)throw Wl=!1,e=Vl,Vl=null,e;return 0!=(8&Al)||Yo(),null}function ks(){for(;null!==Hl;){var e=Hl.effectTag;0!=(256&e)&&il(Hl.alternate,Hl),0==(512&e)||ql||(ql=!0,Ko(97,(function(){return Es(),null}))),Hl=Hl.nextEffect}}function Es(){if(90!==Ql){var e=97<Ql?97:Ql;return Ql=90,qo(e,Ss)}}function Ss(){if(null===Kl)return!1;var e=Kl;if(Kl=null,0!=(48&Al))throw Error(i(331));var t=Al;for(Al|=Ol,e=e.current.firstEffect;null!==e;){try{var n=e;if(0!=(512&n.effectTag))switch(n.tag){case 0:case 11:case 15:case 22:ll(5,n),sl(5,n)}}catch(a){if(null===e)throw Error(i(330));_s(e,a)}n=e.nextEffect,e.nextEffect=null,e=n}return Al=t,Yo(),!0}function Ts(e,t,n){fr(e,t=wl(e,t=nl(n,t),1073741823)),null!==(e=as(e,1073741823))&&rs(e)}function _s(e,t){if(3===e.tag)Ts(e,e,t);else for(var n=e.return;null!==n;){if(3===n.tag){Ts(n,e,t);break}if(1===n.tag){var a=n.stateNode;if("function"==typeof n.type.getDerivedStateFromError||"function"==typeof a.componentDidCatch&&(null===Gl||!Gl.has(a))){fr(n,e=yl(n,e=nl(t,e),1073741823)),null!==(n=as(n,1073741823))&&rs(n);break}}n=n.return}}function Os(e,t,n){var a=e.pingCache;null!==a&&a.delete(t),Rl===e&&Fl===n?Ll===Nl||Ll===Pl&&1073741823===jl&&Wo()-Bl<500?us(e,Fl):Ul=!0:$s(e,n)&&(0!==(t=e.lastPingedTime)&&t<n||(e.lastPingedTime=n,rs(e)))}function Cs(e,t){var n=e.stateNode;null!==n&&n.delete(t),0===(t=0)&&(t=ts(t=es(),e,null)),null!==(e=as(e,t))&&rs(e)}kl=function(e,t,n){var a=t.expirationTime;if(null!==e){var o=t.pendingProps;if(e.memoizedProps!==o||go.current)Fi=!0;else{if(a<n){switch(Fi=!1,t.tag){case 3:Hi(t),Ri();break;case 5:if(Mr(t),4&t.mode&&1!==n&&o.hidden)return t.expirationTime=t.childExpirationTime=1,null;break;case 1:wo(t.type)&&So(t);break;case 4:Dr(t,t.stateNode.containerInfo);break;case 10:a=t.memoizedProps.value,o=t.type._context,mo(er,o._currentValue),o._currentValue=a;break;case 13:if(null!==t.memoizedState)return 0!==(a=t.child.childExpirationTime)&&a>=n?Ki(e,t,n):(mo($r,1&$r.current),null!==(t=Zi(e,t,n))?t.sibling:null);mo($r,1&$r.current);break;case 19:if(a=t.childExpirationTime>=n,0!=(64&e.effectTag)){if(a)return Xi(e,t,n);t.effectTag|=64}if(null!==(o=t.memoizedState)&&(o.rendering=null,o.tail=null),mo($r,$r.current),!a)return null}return Zi(e,t,n)}Fi=!1}}else Fi=!1;switch(t.expirationTime=0,t.tag){case 2:if(a=t.type,null!==e&&(e.alternate=null,t.alternate=null,t.effectTag|=2),e=t.pendingProps,o=xo(t,vo.current),lr(t,n),o=Zr(null,t,a,e,o,n),t.effectTag|=1,"object"==typeof o&&null!==o&&"function"==typeof o.render&&void 0===o.$$typeof){if(t.tag=1,t.memoizedState=null,t.updateQueue=null,wo(a)){var r=!0;So(t)}else r=!1;t.memoizedState=null!==o.state&&void 0!==o.state?o.state:null,ur(t);var l=a.getDerivedStateFromProps;"function"==typeof l&&xr(t,a,l,e),o.updater=wr,t.stateNode=o,o._reactInternalFiber=t,Sr(t,a,e,n),t=Bi(null,t,a,!0,r,n)}else t.tag=0,Li(null,t,o,n),t=t.child;return t;case 16:e:{if(o=t.elementType,null!==e&&(e.alternate=null,t.alternate=null,t.effectTag|=2),e=t.pendingProps,function(e){if(-1===e._status){e._status=0;var t=e._ctor;t=t(),e._result=t,t.then((function(t){0===e._status&&(t=t.default,e._status=1,e._result=t)}),(function(t){0===e._status&&(e._status=2,e._result=t)}))}}(o),1!==o._status)throw o._result;switch(o=o._result,t.type=o,r=t.tag=function(e){if("function"==typeof e)return Is(e)?1:0;if(null!=e){if((e=e.$$typeof)===se)return 11;if(e===pe)return 14}return 2}(o),e=Jo(o,e),r){case 0:t=$i(null,t,o,e,n);break e;case 1:t=Ui(null,t,o,e,n);break e;case 11:t=Di(null,t,o,e,n);break e;case 14:t=ji(null,t,o,Jo(o.type,e),a,n);break e}throw Error(i(306,o,""))}return t;case 0:return a=t.type,o=t.pendingProps,$i(e,t,a,o=t.elementType===a?o:Jo(a,o),n);case 1:return a=t.type,o=t.pendingProps,Ui(e,t,a,o=t.elementType===a?o:Jo(a,o),n);case 3:if(Hi(t),a=t.updateQueue,null===e||null===a)throw Error(i(282));if(a=t.pendingProps,o=null!==(o=t.memoizedState)?o.element:null,pr(e,t),hr(t,a,null,n),(a=t.memoizedState.element)===o)Ri(),t=Zi(e,t,n);else{if((o=t.stateNode.hydrate)&&(Ti=Tn(t.stateNode.containerInfo.firstChild),Si=t,o=_i=!0),o)for(n=Nr(t,null,a,n),t.child=n;n;)n.effectTag=-3&n.effectTag|1024,n=n.sibling;else Li(e,t,a,n),Ri();t=t.child}return t;case 5:return Mr(t),null===e&&Pi(t),a=t.type,o=t.pendingProps,r=null!==e?e.memoizedProps:null,l=o.children,kn(a,o)?l=null:null!==r&&kn(a,r)&&(t.effectTag|=16),zi(e,t),4&t.mode&&1!==n&&o.hidden?(t.expirationTime=t.childExpirationTime=1,t=null):(Li(e,t,l,n),t=t.child),t;case 6:return null===e&&Pi(t),null;case 13:return Ki(e,t,n);case 4:return Dr(t,t.stateNode.containerInfo),a=t.pendingProps,null===e?t.child=Pr(t,null,a,n):Li(e,t,a,n),t.child;case 11:return a=t.type,o=t.pendingProps,Di(e,t,a,o=t.elementType===a?o:Jo(a,o),n);case 7:return Li(e,t,t.pendingProps,n),t.child;case 8:case 12:return Li(e,t,t.pendingProps.children,n),t.child;case 10:e:{a=t.type._context,o=t.pendingProps,l=t.memoizedProps,r=o.value;var s=t.type._context;if(mo(er,s._currentValue),s._currentValue=r,null!==l)if(s=l.value,0===(r=Ua(s,r)?0:0|("function"==typeof a._calculateChangedBits?a._calculateChangedBits(s,r):1073741823))){if(l.children===o.children&&!go.current){t=Zi(e,t,n);break e}}else for(null!==(s=t.child)&&(s.return=t);null!==s;){var c=s.dependencies;if(null!==c){l=s.child;for(var u=c.firstContext;null!==u;){if(u.context===a&&0!=(u.observedBits&r)){1===s.tag&&((u=dr(n,null)).tag=2,fr(s,u)),s.expirationTime<n&&(s.expirationTime=n),null!==(u=s.alternate)&&u.expirationTime<n&&(u.expirationTime=n),ir(s.return,n),c.expirationTime<n&&(c.expirationTime=n);break}u=u.next}}else l=10===s.tag&&s.type===t.type?null:s.child;if(null!==l)l.return=s;else for(l=s;null!==l;){if(l===t){l=null;break}if(null!==(s=l.sibling)){s.return=l.return,l=s;break}l=l.return}s=l}Li(e,t,o.children,n),t=t.child}return t;case 9:return o=t.type,a=(r=t.pendingProps).children,lr(t,n),a=a(o=sr(o,r.unstable_observedBits)),t.effectTag|=1,Li(e,t,a,n),t.child;case 14:return r=Jo(o=t.type,t.pendingProps),ji(e,t,o,r=Jo(o.type,r),a,n);case 15:return Mi(e,t,t.type,t.pendingProps,a,n);case 17:return a=t.type,o=t.pendingProps,o=t.elementType===a?o:Jo(a,o),null!==e&&(e.alternate=null,t.alternate=null,t.effectTag|=2),t.tag=1,wo(a)?(e=!0,So(t)):e=!1,lr(t,n),kr(t,a,o),Sr(t,a,o,n),Bi(null,t,a,!0,e,n);case 19:return Xi(e,t,n)}throw Error(i(156,t.tag))};var Ps=null,Ns=null;function As(e,t,n,a){this.tag=e,this.key=n,this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null,this.index=0,this.ref=null,this.pendingProps=t,this.dependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null,this.mode=a,this.effectTag=0,this.lastEffect=this.firstEffect=this.nextEffect=null,this.childExpirationTime=this.expirationTime=0,this.alternate=null}function Rs(e,t,n,a){return new As(e,t,n,a)}function Is(e){return!(!(e=e.prototype)||!e.isReactComponent)}function Fs(e,t){var n=e.alternate;return null===n?((n=Rs(e.tag,t,e.key,e.mode)).elementType=e.elementType,n.type=e.type,n.stateNode=e.stateNode,n.alternate=e,e.alternate=n):(n.pendingProps=t,n.effectTag=0,n.nextEffect=null,n.firstEffect=null,n.lastEffect=null),n.childExpirationTime=e.childExpirationTime,n.expirationTime=e.expirationTime,n.child=e.child,n.memoizedProps=e.memoizedProps,n.memoizedState=e.memoizedState,n.updateQueue=e.updateQueue,t=e.dependencies,n.dependencies=null===t?null:{expirationTime:t.expirationTime,firstContext:t.firstContext,responders:t.responders},n.sibling=e.sibling,n.index=e.index,n.ref=e.ref,n}function Ls(e,t,n,a,o,r){var l=2;if(a=e,"function"==typeof e)Is(e)&&(l=1);else if("string"==typeof e)l=5;else e:switch(e){case ne:return Ds(n.children,o,r,t);case le:l=8,o|=7;break;case ae:l=8,o|=1;break;case oe:return(e=Rs(12,n,t,8|o)).elementType=oe,e.type=oe,e.expirationTime=r,e;case ce:return(e=Rs(13,n,t,o)).type=ce,e.elementType=ce,e.expirationTime=r,e;case ue:return(e=Rs(19,n,t,o)).elementType=ue,e.expirationTime=r,e;default:if("object"==typeof e&&null!==e)switch(e.$$typeof){case re:l=10;break e;case ie:l=9;break e;case se:l=11;break e;case pe:l=14;break e;case de:l=16,a=null;break e;case fe:l=22;break e}throw Error(i(130,null==e?e:typeof e,""))}return(t=Rs(l,n,t,o)).elementType=e,t.type=a,t.expirationTime=r,t}function Ds(e,t,n,a){return(e=Rs(7,e,a,t)).expirationTime=n,e}function js(e,t,n){return(e=Rs(6,e,null,t)).expirationTime=n,e}function Ms(e,t,n){return(t=Rs(4,null!==e.children?e.children:[],e.key,t)).expirationTime=n,t.stateNode={containerInfo:e.containerInfo,pendingChildren:null,implementation:e.implementation},t}function zs(e,t,n){this.tag=t,this.current=null,this.containerInfo=e,this.pingCache=this.pendingChildren=null,this.finishedExpirationTime=0,this.finishedWork=null,this.timeoutHandle=-1,this.pendingContext=this.context=null,this.hydrate=n,this.callbackNode=null,this.callbackPriority=90,this.lastExpiredTime=this.lastPingedTime=this.nextKnownPendingLevel=this.lastSuspendedTime=this.firstSuspendedTime=this.firstPendingTime=0}function $s(e,t){var n=e.firstSuspendedTime;return e=e.lastSuspendedTime,0!==n&&n>=t&&e<=t}function Us(e,t){var n=e.firstSuspendedTime,a=e.lastSuspendedTime;n<t&&(e.firstSuspendedTime=t),(a>t||0===n)&&(e.lastSuspendedTime=t),t<=e.lastPingedTime&&(e.lastPingedTime=0),t<=e.lastExpiredTime&&(e.lastExpiredTime=0)}function Bs(e,t){t>e.firstPendingTime&&(e.firstPendingTime=t);var n=e.firstSuspendedTime;0!==n&&(t>=n?e.firstSuspendedTime=e.lastSuspendedTime=e.nextKnownPendingLevel=0:t>=e.lastSuspendedTime&&(e.lastSuspendedTime=t+1),t>e.nextKnownPendingLevel&&(e.nextKnownPendingLevel=t))}function Hs(e,t){var n=e.lastExpiredTime;(0===n||n>t)&&(e.lastExpiredTime=t)}function Ws(e,t,n,a){var o=t.current,r=es(),l=gr.suspense;r=ts(r,o,l);e:if(n){t:{if(et(n=n._reactInternalFiber)!==n||1!==n.tag)throw Error(i(170));var s=n;do{switch(s.tag){case 3:s=s.stateNode.context;break t;case 1:if(wo(s.type)){s=s.stateNode.__reactInternalMemoizedMergedChildContext;break t}}s=s.return}while(null!==s);throw Error(i(171))}if(1===n.tag){var c=n.type;if(wo(c)){n=Eo(n,c,s);break e}}n=s}else n=ho;return null===t.context?t.context=n:t.pendingContext=n,(t=dr(r,l)).payload={element:e},null!==(a=void 0===a?null:a)&&(t.callback=a),fr(o,t),ns(o,r),r}function Vs(e){if(!(e=e.current).child)return null;switch(e.child.tag){case 5:default:return e.child.stateNode}}function Gs(e,t){null!==(e=e.memoizedState)&&null!==e.dehydrated&&e.retryTime<t&&(e.retryTime=t)}function qs(e,t){Gs(e,t),(e=e.alternate)&&Gs(e,t)}function Ks(e,t,n){var a=new zs(e,t,n=null!=n&&!0===n.hydrate),o=Rs(3,null,null,2===t?7:1===t?3:0);a.current=o,o.stateNode=a,ur(o),e[Nn]=a.current,n&&0!==t&&function(e,t){var n=Je(t);Ot.forEach((function(e){ht(e,t,n)})),Ct.forEach((function(e){ht(e,t,n)}))}(0,9===e.nodeType?e:e.ownerDocument),this._internalRoot=a}function Qs(e){return!(!e||1!==e.nodeType&&9!==e.nodeType&&11!==e.nodeType&&(8!==e.nodeType||" react-mount-point-unstable "!==e.nodeValue))}function Ys(e,t,n,a,o){var r=n._reactRootContainer;if(r){var i=r._internalRoot;if("function"==typeof o){var l=o;o=function(){var e=Vs(i);l.call(e)}}Ws(t,i,e,o)}else{if(r=n._reactRootContainer=function(e,t){if(t||(t=!(!(t=e?9===e.nodeType?e.documentElement:e.firstChild:null)||1!==t.nodeType||!t.hasAttribute("data-reactroot"))),!t)for(var n;n=e.lastChild;)e.removeChild(n);return new Ks(e,0,t?{hydrate:!0}:void 0)}(n,a),i=r._internalRoot,"function"==typeof o){var s=o;o=function(){var e=Vs(i);s.call(e)}}cs((function(){Ws(t,i,e,o)}))}return Vs(i)}function Xs(e,t,n){var a=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return{$$typeof:te,key:null==a?null:""+a,children:e,containerInfo:t,implementation:n}}function Zs(e,t){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!Qs(t))throw Error(i(200));return Xs(e,t,null,n)}Ks.prototype.render=function(e){Ws(e,this._internalRoot,null,null)},Ks.prototype.unmount=function(){var e=this._internalRoot,t=e.containerInfo;Ws(null,e,null,(function(){t[Nn]=null}))},vt=function(e){if(13===e.tag){var t=Zo(es(),150,100);ns(e,t),qs(e,t)}},gt=function(e){13===e.tag&&(ns(e,3),qs(e,3))},bt=function(e){if(13===e.tag){var t=es();ns(e,t=ts(t,e,null)),qs(e,t)}},C=function(e,t,n){switch(t){case"input":if(Te(e,n),t=n.name,"radio"===n.type&&null!=t){for(n=e;n.parentNode;)n=n.parentNode;for(n=n.querySelectorAll("input[name="+JSON.stringify(""+t)+'][type="radio"]'),t=0;t<n.length;t++){var a=n[t];if(a!==e&&a.form===e.form){var o=Fn(a);if(!o)throw Error(i(90));ye(a),Te(a,o)}}}break;case"textarea":Re(e,n);break;case"select":null!=(t=n.value)&&Pe(e,!!n.multiple,t,!1)}},F=ss,L=function(e,t,n,a,o){var r=Al;Al|=4;try{return qo(98,e.bind(null,t,n,a,o))}finally{0===(Al=r)&&Yo()}},D=function(){0==(49&Al)&&(function(){if(null!==Yl){var e=Yl;Yl=null,e.forEach((function(e,t){Hs(t,e),rs(t)})),Yo()}}(),Es())},j=function(e,t){var n=Al;Al|=2;try{return e(t)}finally{0===(Al=n)&&Yo()}};var Js={Events:[Rn,In,Fn,_,E,Un,function(e){rt(e,$n)},R,I,Zt,st,Es,{current:!1}]};!function(e){var t=e.findFiberByHostInstance;(function(e){if("undefined"==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__)return!1;var t=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(t.isDisabled||!t.supportsFiber)return!0;try{var n=t.inject(e);Ps=function(e){try{t.onCommitFiberRoot(n,e,void 0,64==(64&e.current.effectTag))}catch(a){}},Ns=function(e){try{t.onCommitFiberUnmount(n,e)}catch(a){}}}catch(a){}})(o({},e,{overrideHookState:null,overrideProps:null,setSuspenseHandler:null,scheduleUpdate:null,currentDispatcherRef:Y.ReactCurrentDispatcher,findHostInstanceByFiber:function(e){return null===(e=at(e))?null:e.stateNode},findFiberByHostInstance:function(e){return t?t(e):null},findHostInstancesForRefresh:null,scheduleRefresh:null,scheduleRoot:null,setRefreshHandler:null,getCurrentFiber:null}))}({findFiberByHostInstance:An,bundleType:0,version:"16.13.1",rendererPackageName:"react-dom"}),t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=Js,t.createPortal=Zs,t.findDOMNode=function(e){if(null==e)return null;if(1===e.nodeType)return e;var t=e._reactInternalFiber;if(void 0===t){if("function"==typeof e.render)throw Error(i(188));throw Error(i(268,Object.keys(e)))}return e=null===(e=at(t))?null:e.stateNode},t.flushSync=function(e,t){if(0!=(48&Al))throw Error(i(187));var n=Al;Al|=1;try{return qo(99,e.bind(null,t))}finally{Al=n,Yo()}},t.hydrate=function(e,t,n){if(!Qs(t))throw Error(i(200));return Ys(null,e,t,!0,n)},t.render=function(e,t,n){if(!Qs(t))throw Error(i(200));return Ys(null,e,t,!1,n)},t.unmountComponentAtNode=function(e){if(!Qs(e))throw Error(i(40));return!!e._reactRootContainer&&(cs((function(){Ys(null,null,e,!1,(function(){e._reactRootContainer=null,e[Nn]=null}))})),!0)},t.unstable_batchedUpdates=ss,t.unstable_createPortal=function(e,t){return Zs(e,t,2<arguments.length&&void 0!==arguments[2]?arguments[2]:null)},t.unstable_renderSubtreeIntoContainer=function(e,t,n,a){if(!Qs(n))throw Error(i(200));if(null==e||void 0===e._reactInternalFiber)throw Error(i(38));return Ys(e,t,n,!1,a)},t.version="16.13.1"},function(e,t,n){"use strict";e.exports=n(33)},function(e,t,n){"use strict";var a,o,r,i,l;if("undefined"==typeof window||"function"!=typeof MessageChannel){var s=null,c=null,u=function(){if(null!==s)try{var e=t.unstable_now();s(!0,e),s=null}catch(n){throw setTimeout(u,0),n}},p=Date.now();t.unstable_now=function(){return Date.now()-p},a=function(e){null!==s?setTimeout(a,0,e):(s=e,setTimeout(u,0))},o=function(e,t){c=setTimeout(e,t)},r=function(){clearTimeout(c)},i=function(){return!1},l=t.unstable_forceFrameRate=function(){}}else{var d=window.performance,f=window.Date,m=window.setTimeout,h=window.clearTimeout;if("undefined"!=typeof console){var v=window.cancelAnimationFrame;"function"!=typeof window.requestAnimationFrame&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills"),"function"!=typeof v&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills")}if("object"==typeof d&&"function"==typeof d.now)t.unstable_now=function(){return d.now()};else{var g=f.now();t.unstable_now=function(){return f.now()-g}}var b=!1,x=null,w=-1,y=5,k=0;i=function(){return t.unstable_now()>=k},l=function(){},t.unstable_forceFrameRate=function(e){0>e||125<e?console.error("forceFrameRate takes a positive int between 0 and 125, forcing framerates higher than 125 fps is not unsupported"):y=0<e?Math.floor(1e3/e):5};var E=new MessageChannel,S=E.port2;E.port1.onmessage=function(){if(null!==x){var e=t.unstable_now();k=e+y;try{x(!0,e)?S.postMessage(null):(b=!1,x=null)}catch(n){throw S.postMessage(null),n}}else b=!1},a=function(e){x=e,b||(b=!0,S.postMessage(null))},o=function(e,n){w=m((function(){e(t.unstable_now())}),n)},r=function(){h(w),w=-1}}function T(e,t){var n=e.length;e.push(t);e:for(;;){var a=n-1>>>1,o=e[a];if(!(void 0!==o&&0<C(o,t)))break e;e[a]=t,e[n]=o,n=a}}function _(e){return void 0===(e=e[0])?null:e}function O(e){var t=e[0];if(void 0!==t){var n=e.pop();if(n!==t){e[0]=n;e:for(var a=0,o=e.length;a<o;){var r=2*(a+1)-1,i=e[r],l=r+1,s=e[l];if(void 0!==i&&0>C(i,n))void 0!==s&&0>C(s,i)?(e[a]=s,e[l]=n,a=l):(e[a]=i,e[r]=n,a=r);else{if(!(void 0!==s&&0>C(s,n)))break e;e[a]=s,e[l]=n,a=l}}}return t}return null}function C(e,t){var n=e.sortIndex-t.sortIndex;return 0!==n?n:e.id-t.id}var P=[],N=[],A=1,R=null,I=3,F=!1,L=!1,D=!1;function j(e){for(var t=_(N);null!==t;){if(null===t.callback)O(N);else{if(!(t.startTime<=e))break;O(N),t.sortIndex=t.expirationTime,T(P,t)}t=_(N)}}function M(e){if(D=!1,j(e),!L)if(null!==_(P))L=!0,a(z);else{var t=_(N);null!==t&&o(M,t.startTime-e)}}function z(e,n){L=!1,D&&(D=!1,r()),F=!0;var a=I;try{for(j(n),R=_(P);null!==R&&(!(R.expirationTime>n)||e&&!i());){var l=R.callback;if(null!==l){R.callback=null,I=R.priorityLevel;var s=l(R.expirationTime<=n);n=t.unstable_now(),"function"==typeof s?R.callback=s:R===_(P)&&O(P),j(n)}else O(P);R=_(P)}if(null!==R)var c=!0;else{var u=_(N);null!==u&&o(M,u.startTime-n),c=!1}return c}finally{R=null,I=a,F=!1}}function $(e){switch(e){case 1:return-1;case 2:return 250;case 5:return 1073741823;case 4:return 1e4;default:return 5e3}}var U=l;t.unstable_IdlePriority=5,t.unstable_ImmediatePriority=1,t.unstable_LowPriority=4,t.unstable_NormalPriority=3,t.unstable_Profiling=null,t.unstable_UserBlockingPriority=2,t.unstable_cancelCallback=function(e){e.callback=null},t.unstable_continueExecution=function(){L||F||(L=!0,a(z))},t.unstable_getCurrentPriorityLevel=function(){return I},t.unstable_getFirstCallbackNode=function(){return _(P)},t.unstable_next=function(e){switch(I){case 1:case 2:case 3:var t=3;break;default:t=I}var n=I;I=t;try{return e()}finally{I=n}},t.unstable_pauseExecution=function(){},t.unstable_requestPaint=U,t.unstable_runWithPriority=function(e,t){switch(e){case 1:case 2:case 3:case 4:case 5:break;default:e=3}var n=I;I=e;try{return t()}finally{I=n}},t.unstable_scheduleCallback=function(e,n,i){var l=t.unstable_now();if("object"==typeof i&&null!==i){var s=i.delay;s="number"==typeof s&&0<s?l+s:l,i="number"==typeof i.timeout?i.timeout:$(e)}else i=$(e),s=l;return e={id:A++,callback:n,priorityLevel:e,startTime:s,expirationTime:i=s+i,sortIndex:-1},s>l?(e.sortIndex=s,T(N,e),null===_(P)&&e===_(N)&&(D?r():D=!0,o(M,s-l))):(e.sortIndex=i,T(P,e),L||F||(L=!0,a(z))),e},t.unstable_shouldYield=function(){var e=t.unstable_now();j(e);var n=_(P);return n!==R&&null!==R&&null!==n&&null!==n.callback&&n.startTime<=e&&n.expirationTime<R.expirationTime||i()},t.unstable_wrapCallback=function(e){var t=I;return function(){var n=I;I=t;try{return e.apply(this,arguments)}finally{I=n}}}},function(e,t,n){"use strict";var a=n(35);function o(){}function r(){}r.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,r,i){if(i!==a){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:r,resetWarningCache:o};return n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t){e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},function(e,t,n){"use strict";var a="function"==typeof Symbol&&Symbol.for,o=a?Symbol.for("react.element"):60103,r=a?Symbol.for("react.portal"):60106,i=a?Symbol.for("react.fragment"):60107,l=a?Symbol.for("react.strict_mode"):60108,s=a?Symbol.for("react.profiler"):60114,c=a?Symbol.for("react.provider"):60109,u=a?Symbol.for("react.context"):60110,p=a?Symbol.for("react.async_mode"):60111,d=a?Symbol.for("react.concurrent_mode"):60111,f=a?Symbol.for("react.forward_ref"):60112,m=a?Symbol.for("react.suspense"):60113,h=a?Symbol.for("react.suspense_list"):60120,v=a?Symbol.for("react.memo"):60115,g=a?Symbol.for("react.lazy"):60116,b=a?Symbol.for("react.block"):60121,x=a?Symbol.for("react.fundamental"):60117,w=a?Symbol.for("react.responder"):60118,y=a?Symbol.for("react.scope"):60119;function k(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case o:switch(e=e.type){case p:case d:case i:case s:case l:case m:return e;default:switch(e=e&&e.$$typeof){case u:case f:case g:case v:case c:return e;default:return t}}case r:return t}}}function E(e){return k(e)===d}t.AsyncMode=p,t.ConcurrentMode=d,t.ContextConsumer=u,t.ContextProvider=c,t.Element=o,t.ForwardRef=f,t.Fragment=i,t.Lazy=g,t.Memo=v,t.Portal=r,t.Profiler=s,t.StrictMode=l,t.Suspense=m,t.isAsyncMode=function(e){return E(e)||k(e)===p},t.isConcurrentMode=E,t.isContextConsumer=function(e){return k(e)===u},t.isContextProvider=function(e){return k(e)===c},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===o},t.isForwardRef=function(e){return k(e)===f},t.isFragment=function(e){return k(e)===i},t.isLazy=function(e){return k(e)===g},t.isMemo=function(e){return k(e)===v},t.isPortal=function(e){return k(e)===r},t.isProfiler=function(e){return k(e)===s},t.isStrictMode=function(e){return k(e)===l},t.isSuspense=function(e){return k(e)===m},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===i||e===d||e===s||e===l||e===m||e===h||"object"==typeof e&&null!==e&&(e.$$typeof===g||e.$$typeof===v||e.$$typeof===c||e.$$typeof===u||e.$$typeof===f||e.$$typeof===x||e.$$typeof===w||e.$$typeof===y||e.$$typeof===b)},t.typeOf=k},,function(e,t,n){var a={"./prism-toml":40};function o(e){var t=r(e);return n(t)}function r(e){if(!n.o(a,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return a[e]}o.keys=function(){return Object.keys(a)},o.resolve=r,e.exports=o,o.id=39},function(e,t){!function(e){var t=/(?:[\w-]+|'[^'\n\r]*'|"(?:\\.|[^\\"\r\n])*")/.source;function n(e){return e.replace(/__/g,(function(){return t}))}e.languages.toml={comment:{pattern:/#.*/,greedy:!0},table:{pattern:RegExp(n(/(^\s*\[\s*(?:\[\s*)?)__(?:\s*\.\s*__)*(?=\s*\])/.source),"m"),lookbehind:!0,greedy:!0,alias:"class-name"},key:{pattern:RegExp(n(/(^\s*|[{,]\s*)__(?:\s*\.\s*__)*(?=\s*=)/.source),"m"),lookbehind:!0,greedy:!0,alias:"property"},string:{pattern:/"""(?:\\[\s\S]|[^\\])*?"""|'''[\s\S]*?'''|'[^'\n\r]*'|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},date:[{pattern:/\b\d{4}-\d{2}-\d{2}(?:[T\s]\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|[+-]\d{2}:\d{2})?)?\b/i,alias:"number"},{pattern:/\b\d{2}:\d{2}:\d{2}(?:\.\d+)?\b/,alias:"number"}],number:/(?:\b0(?:x[\da-zA-Z]+(?:_[\da-zA-Z]+)*|o[0-7]+(?:_[0-7]+)*|b[10]+(?:_[10]+)*))\b|[-+]?\b\d+(?:_\d+)*(?:\.\d+(?:_\d+)*)?(?:[eE][+-]?\d+(?:_\d+)*)?\b|[-+]?\b(?:inf|nan)\b/,boolean:/\b(?:true|false)\b/,punctuation:/[.,=[\]{}]/}}(Prism)},,,function(e,t,n){"use strict";n.r(t);var a=n(0),o=n.n(a),r=n(24),i=n(13),l=n(16),s=n.n(l),c=({error:e,retry:t,pastDelay:n})=>e?o.a.createElement("div",{style:{align:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"}},o.a.createElement("p",null,e.message),o.a.createElement("div",null,o.a.createElement("button",{type:"button",onClick:t},"Retry"))):n?o.a.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"}},o.a.createElement("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb"},o.a.createElement("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2"},o.a.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},o.a.createElement("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),o.a.createElement("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),o.a.createElement("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),o.a.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},o.a.createElement("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),o.a.createElement("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),o.a.createElement("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),o.a.createElement("circle",{cx:"22",cy:"22",r:"8"},o.a.createElement("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"}))))):null,u=n(11),p={"01a85c17":[function(){return Promise.all([n.e(0),n.e(1),n.e(2),n.e(4)]).then(n.bind(null,56))},"@theme/BlogTagsListPage",56],"0923c366":[function(){return n.e(5).then(n.bind(null,57))},"@site/docs/examples/upload.md",57],"0965cdf6":[function(){return n.e(6).then(n.bind(null,58))},"@site/docs/examples/dashboard.md",58],"0a6c0f5b":[function(){return n.e(7).then(n.bind(null,59))},"@site/docs/tutorial-monitor.md",59],"0eb58673":[function(){return n.e(8).then(n.t.bind(null,60,3))},"~blog/default/wave-blog-cb9.json",60],"0f2a58c8":[function(){return n.e(9).then(n.bind(null,61))},"@site/docs/examples/table-markdown.md",61],"0fd1debb":[function(){return n.e(10).then(n.bind(null,62))},"@site/docs/migrating-0.md",62],10172759:[function(){return n.e(11).then(n.bind(null,63))},"@site/docs/examples/label.md",63],"109e456e":[function(){return n.e(12).then(n.bind(null,64))},"@site/docs/examples/plot-bokeh.md",64],"11e3ce2c":[function(){return n.e(13).then(n.bind(null,65))},"@site/docs/examples/stat-tall-gauge.md",65],"121dd878":[function(){return n.e(14).then(n.t.bind(null,66,3))},"~blog/default/wave-blog-tags-tags-b85.json",66],"126e0b0e":[function(){return n.e(15).then(n.bind(null,67))},"@site/docs/examples/plot-area-range.md",67],"12e676cf":[function(){return n.e(16).then(n.bind(null,68))},"@site/docs/examples/plot-interval.md",68],"135cee2a":[function(){return n.e(17).then(n.bind(null,69))},"@site/docs/examples/table.md",69],"1375ade1":[function(){return n.e(18).then(n.bind(null,70))},"@site/docs/enterprise/developer-guide.md",70],"1486e3bc":[function(){return n.e(19).then(n.bind(null,71))},"@site/docs/examples/plot-d3.md",71],"15837ef3":[function(){return n.e(20).then(n.bind(null,72))},"@site/docs/examples/table-sort.md",72],"15a78352":[function(){return n.e(21).then(n.bind(null,45))},"@site/docs/_start_q.md",45],"174d8305":[function(){return n.e(22).then(n.bind(null,73))},"@site/docs/examples/wizard.md",73],17896441:[function(){return Promise.all([n.e(0),n.e(1),n.e(23)]).then(n.bind(null,286))},"@theme/DocItem",286],"17b5adee":[function(){return n.e(24).then(n.bind(null,75))},"@site/docs/examples/plot-step.md",75],"18fdb351":[function(){return n.e(25).then(n.bind(null,76))},"@site/docs/examples/glider-gun.md",76],"190e4f21":[function(){return n.e(26).then(n.bind(null,77))},"@site/docs/examples/plot-point-custom.md",77],"1a4f1376":[function(){return n.e(27).then(n.bind(null,78))},"@site/docs/examples/picker-selection.md",78],"1ac8922b":[function(){return n.e(28).then(n.bind(null,79))},"@site/docs/examples/plot-point-groups.md",79],"1ae86ebe":[function(){return n.e(29).then(n.bind(null,80))},"@site/docs/examples/message-bar.md",80],"1b0f8c91":[function(){return n.e(30).then(n.bind(null,81))},"@site/docs/backup.md",81],"1be78505":[function(){return Promise.all([n.e(0),n.e(1),n.e(2),n.e(235)]).then(n.bind(null,287))},"@theme/DocPage",287],"1c59264e":[function(){return n.e(31).then(n.bind(null,84))},"@site/docs/examples/swatch-picker.md",84],"1cc3ff79":[function(){return n.e(32).then(n.bind(null,85))},"@site/docs/examples/plot-point-sizes.md",85],"1f7c204c":[function(){return n.e(33).then(n.bind(null,86))},"@site/docs/components.md",86],"207f87c1":[function(){return n.e(34).then(n.bind(null,87))},"@site/docs/examples/header.md",87],"22188a36":[function(){return n.e(35).then(n.bind(null,88))},"@site/docs/examples/plot-interval-stacked.md",88],"2673e11f":[function(){return n.e(36).then(n.bind(null,89))},"@site/docs/examples/plot-altair.md",89],26907763:[function(){return n.e(37).then(n.bind(null,90))},"@site/docs/examples/plot-step-before.md",90],"273cfbdf":[function(){return n.e(38).then(n.bind(null,91))},"@site/docs/examples/plot-area-negative.md",91],"28283d16":[function(){return n.e(39).then(n.bind(null,92))},"@site/docs/api/autoreload.md",92],"2868cdab":[function(){return n.e(40).then(n.bind(null,93))},"@site/blog/2019-05-30-welcome.md",93],"296a8b4f":[function(){return n.e(41).then(n.bind(null,94))},"@site/docs/api/server.md",94],"2bf08973":[function(){return n.e(42).then(n.bind(null,95))},"@site/docs/examples/template.md",95],"2db704cb":[function(){return n.e(43).then(n.bind(null,96))},"@site/docs/examples/plot-interval-polar-stacked.md",96],"2fa9e1ff":[function(){return n.e(44).then(n.bind(null,97))},"@site/docs/examples/plot-path.md",97],"31c3c419":[function(){return n.e(45).then(n.bind(null,98))},"@site/docs/examples/plot-interval-theta.md",98],"31f8b56c":[function(){return n.e(46).then(n.bind(null,99))},"@site/docs/examples/plot-area.md",99],"34cd3da4":[function(){return n.e(47).then(n.bind(null,100))},"@site/docs/examples/plot-point.md",100],"3570154c":[function(){return n.e(48).then(n.bind(null,101))},"@site/blog/2019-05-29-hello-world.md?truncated=true",101],"3584c003":[function(){return n.e(49).then(n.bind(null,102))},"@site/docs/examples/meta-redirect.md",102],"35dabcf3":[function(){return n.e(50).then(n.bind(null,103))},"@site/docs/examples/textbox-trigger.md",103],"360edac9":[function(){return n.e(51).then(n.bind(null,104))},"@site/docs/examples/stat-wide-series-interval.md",104],"3697284d":[function(){return n.e(52).then(n.bind(null,105))},"@site/docs/examples/plot-vegalite-update.md",105],"36db7894":[function(){return n.e(53).then(n.bind(null,106))},"@site/docs/examples/tab-routing.md",106],"36fe3260":[function(){return n.e(54).then(n.bind(null,107))},"@site/docs/api/core.md",107],"3713dbfc":[function(){return n.e(55).then(n.bind(null,108))},"@site/docs/browser-testing.md",108],"37382beb":[function(){return n.e(56).then(n.bind(null,109))},"@site/docs/examples/pixel-art.md",109],38067279:[function(){return n.e(57).then(n.bind(null,110))},"@site/docs/examples/plot-point-map.md",110],"3aa768f5":[function(){return n.e(58).then(n.bind(null,111))},"@site/docs/examples/file-upload.md",111],"3abe8fb9":[function(){return n.e(59).then(n.bind(null,112))},"@site/docs/logging.md",112],"3b464fa6":[function(){return n.e(60).then(n.bind(null,113))},"@site/docs/expressions.md",113],"3b64911a":[function(){return n.e(61).then(n.bind(null,114))},"@site/docs/change-log.md",114],"3b8c55ea":[function(){return n.e(62).then(n.bind(null,115))},"@site/docs/installation.md",115],"3f5dd320":[function(){return n.e(63).then(n.bind(null,116))},"@site/docs/examples/plot-line-labels-no-overlap.md",116],"4104f38c":[function(){return n.e(64).then(n.bind(null,117))},"@site/docs/examples/plot-vegalite-form.md",117],"41849bc6":[function(){return n.e(65).then(n.bind(null,118))},"@site/docs/examples/form-markup.md",118],"424c54c2":[function(){return n.e(66).then(n.bind(null,119))},"@site/docs/examples/stat-tall-series-interval.md",119],"430c4fb3":[function(){return n.e(67).then(n.bind(null,120))},"@site/docs/api/test.md",120],"452608cb":[function(){return n.e(68).then(n.bind(null,121))},"@site/docs/examples/buttons.md",121],"4612f97b":[function(){return n.e(69).then(n.bind(null,122))},"@site/docs/examples/color-picker.md",122],"4657d646":[function(){return n.e(70).then(n.t.bind(null,123,3))},"~blog/default/wave-blog-tags-facebook-59c.json",123],"472f8a66":[function(){return n.e(71).then(n.bind(null,124))},"@site/docs/layout.md",124],"4784cd26":[function(){return n.e(72).then(n.bind(null,125))},"@site/docs/examples/progress.md",125],"47a365f9":[function(){return n.e(73).then(n.bind(null,126))},"@site/docs/tour.md",126],"47b3e1f7":[function(){return n.e(74).then(n.bind(null,127))},"@site/docs/examples/counter-unicast.md",127],48786391:[function(){return n.e(75).then(n.bind(null,128))},"@site/docs/examples/plot-form.md",128],"4ab7b8a0":[function(){return n.e(76).then(n.bind(null,129))},"@site/docs/examples/picker.md",129],"4b953dd8":[function(){return n.e(77).then(n.bind(null,130))},"@site/docs/examples/plot-point-shapes.md",130],"4d54d076":[function(){return n.e(78).then(n.bind(null,131))},"@site/docs/contributing.md",131],"4e3b2ad1":[function(){return n.e(79).then(n.bind(null,132))},"@site/docs/examples/plot-interval-annotation-transpose.md",132],"4f49ed83":[function(){return n.e(80).then(n.bind(null,133))},"@site/docs/examples/stat-wide-bar.md",133],"4f6dabb0":[function(){return n.e(81).then(n.bind(null,134))},"@site/docs/cards.md",134],"4fc0cd6f":[function(){return n.e(82).then(n.t.bind(null,135,3))},"~blog/default/wave-blog-tags-hello-ccc.json",135],"50b74c5f":[function(){return n.e(83).then(n.bind(null,136))},"@site/docs/examples/text.md",136],"5168cb29":[function(){return n.e(84).then(n.bind(null,137))},"@site/docs/examples/stat-wide-gauge.md",137],"5281b7a2":[function(){return n.e(85).then(n.bind(null,138))},"@site/docs/architecture.md",138],"53da2547":[function(){return n.e(86).then(n.bind(null,139))},"@site/docs/examples/plot-area-groups.md",139],"549ea605":[function(){return n.e(87).then(n.bind(null,140))},"@site/docs/examples/issue-tracker.md",140],"54aab825":[function(){return n.e(88).then(n.bind(null,141))},"@site/docs/examples/plot-line-labels-stroked.md",141],"58b13b12":[function(){return n.e(89).then(n.bind(null,142))},"@site/docs/examples/tab-delete.md",142],"5a34328a":[function(){return n.e(90).then(n.bind(null,143))},"@site/docs/state.md",143],"5e52c414":[function(){return n.e(91).then(n.bind(null,144))},"@site/docs/examples/stat-small-series-interval.md",144],"5e8c322a":[function(){return n.e(92).then(n.bind(null,145))},"@site/docs/api/index.md",145],"5e9f5e1a":[function(){return Promise.resolve().then(n.bind(null,9))},"@generated/docusaurus.config",9],"600ae505":[function(){return n.e(93).then(n.bind(null,146))},"@site/docs/examples/table-filter.md",146],"60759c05":[function(){return n.e(94).then(n.t.bind(null,147,3))},"~blog/default/wave-blog-tags-docusaurus-580.json",147],"6264312d":[function(){return n.e(95).then(n.bind(null,148))},"@site/docs/graphics.md",148],"6405c95c":[function(){return n.e(96).then(n.bind(null,149))},"@site/docs/realtime.md",149],"649e08dd":[function(){return n.e(97).then(n.bind(null,150))},"@site/docs/buffers.md",150],"65b8ef03":[function(){return n.e(98).then(n.bind(null,151))},"@site/docs/arguments.md",151],"661410ac":[function(){return n.e(99).then(n.bind(null,152))},"@site/docs/examples/tab.md",152],"6875c492":[function(){return Promise.all([n.e(0),n.e(1),n.e(2),n.e(3),n.e(100)]).then(n.bind(null,153))},"@theme/BlogTagsPostsPage",153],"692ea9bc":[function(){return n.e(101).then(n.bind(null,155))},"@site/docs/examples/stat-large-bar.md",155],"6c3eb428":[function(){return n.e(102).then(n.bind(null,156))},"@site/docs/examples/plot-line-labels.md",156],"6ce0e474":[function(){return n.e(103).then(n.bind(null,157))},"@site/docs/examples/graphics-clock.md",157],"6d36af6b":[function(){return n.e(104).then(n.bind(null,158))},"@site/docs/examples/markup.md",158],"6eb0e506":[function(){return n.e(105).then(n.bind(null,159))},"@site/docs/examples/table-groupby.md",159],"6ee3bac7":[function(){return n.e(106).then(n.bind(null,160))},"@site/docs/enterprise/basic-concepts.md",160],"718f151f":[function(){return n.e(107).then(n.bind(null,161))},"@site/docs/examples/plot-area-smooth.md",161],"746a1919":[function(){return n.e(108).then(n.bind(null,162))},"@site/docs/examples/frame-path.md",162],"77770fc3":[function(){return n.e(109).then(n.bind(null,163))},"@site/docs/examples/form-frame-path.md",163],"79d0d182":[function(){return n.e(110).then(n.bind(null,164))},"@site/docs/examples/stat-wide-series-area.md",164],"7c1cba9e":[function(){return n.e(111).then(n.bind(null,165))},"@site/docs/examples/textbox.md",165],"7ca2f128":[function(){return n.e(112).then(n.bind(null,166))},"@site/docs/examples/form-menu.md",166],"7d1cd1c9":[function(){return n.e(113).then(n.bind(null,167))},"@site/docs/examples/checklist.md",167],"7d744a8f":[function(){return n.e(114).then(n.bind(null,168))},"@site/docs/examples/plot-area-line-groups.md",168],"7ecd2c5c":[function(){return n.e(115).then(n.bind(null,169))},"@site/docs/examples/graphics-path.md",169],"7f8f4b62":[function(){return n.e(116).then(n.bind(null,170))},"@site/docs/api/graphics.md",170],"82f75f63":[function(){return n.e(117).then(n.bind(null,171))},"@site/docs/examples/choice-group.md",171],"8542acf3":[function(){return n.e(118).then(n.bind(null,172))},"@site/docs/examples/tabs.md",172],"854481fc":[function(){return n.e(119).then(n.bind(null,173))},"@site/docs/files.md",173],"879fc8a6":[function(){return n.e(120).then(n.bind(null,174))},"@site/docs/examples/button.md",174],"883d6399":[function(){return n.e(121).then(n.bind(null,175))},"@site/docs/examples/form.md",175],"887b127f":[function(){return n.e(122).then(n.bind(null,176))},"@site/docs/examples/table-filter-backend.md",176],"88c2f924":[function(){return n.e(123).then(n.bind(null,177))},"@site/docs/examples/table-download.md",177],"8954e356":[function(){return n.e(124).then(n.bind(null,178))},"@site/docs/examples/graphics-primitives.md",178],"8c12d624":[function(){return n.e(125).then(n.bind(null,179))},"@site/docs/examples/checkbox.md",179],"8c8ea2c1":[function(){return n.e(126).then(n.bind(null,180))},"@site/docs/examples/stepper.md",180],"8e9f0a8a":[function(){return n.e(127).then(n.bind(null,181))},"@site/blog/2019-05-28-hola.md?truncated=true",181],"8eaf94d7":[function(){return n.e(128).then(n.bind(null,182))},"@site/docs/examples/plot-interval-labels.md",182],"8f030830":[function(){return n.e(129).then(n.bind(null,183))},"@site/docs/development.md",183],"9152460a":[function(){return n.e(130).then(n.bind(null,184))},"@site/docs/examples/card-menu.md",184],"917fcb62":[function(){return n.e(131).then(n.bind(null,185))},"@site/docs/examples/counter-broadcast.md",185],"935f2afb":[function(){return n.e(132).then(n.t.bind(null,186,3))},"~docs/default/version-current-metadata-prop-751.json",186],"9363aca1":[function(){return n.e(133).then(n.bind(null,187))},"@site/docs/examples/graphics-turtle.md",187],93896215:[function(){return n.e(134).then(n.t.bind(null,188,3))},"~blog/default/wave-blog-tags-hola-809.json",188],"941b9d10":[function(){return n.e(135).then(n.bind(null,189))},"@site/docs/examples/plot-step-after.md",189],"948118d6":[function(){return n.e(136).then(n.bind(null,190))},"@site/docs/examples/toolbar-routing.md",190],"950656ac":[function(){return n.e(137).then(n.bind(null,191))},"@site/docs/tutorial-counter.md",191],"9747bb1a":[function(){return n.e(138).then(n.bind(null,192))},"@site/docs/examples/stat-tall-series-area.md",192],"97d9aba4":[function(){return n.e(139).then(n.bind(null,193))},"@site/docs/examples/plot-area-stacked.md",193],"97e78655":[function(){return n.e(140).then(n.bind(null,194))},"@site/docs/examples/plot-interval-groups-transpose.md",194],"996e93c8":[function(){return n.e(141).then(n.bind(null,195))},"@site/docs/tutorial-todo.md",195],"997fea1d":[function(){return n.e(142).then(n.bind(null,196))},"@site/docs/examples/markdown.md",196],"9a52a2f7":[function(){return n.e(143).then(n.bind(null,197))},"@site/docs/examples/plot-interval-polar.md",197],"9ed00105":[function(){return n.e(144).then(n.bind(null,198))},"@site/docs/configuration.md",198],a50fe136:[function(){return n.e(145).then(n.bind(null,199))},"@site/docs/api/db.md",199],a54511d2:[function(){return n.e(146).then(n.bind(null,200))},"@site/docs/examples/stat-small.md",200],a64331b1:[function(){return n.e(147).then(n.bind(null,201))},"@site/docs/pages.md",201],a6aa9e1f:[function(){return Promise.all([n.e(0),n.e(1),n.e(2),n.e(3),n.e(148)]).then(n.bind(null,288))},"@theme/BlogListPage",288],a814b970:[function(){return n.e(149).then(n.bind(null,202))},"@site/docs/examples/plot-polygon.md",202],a8b2a833:[function(){return n.e(150).then(n.bind(null,203))},"@site/docs/examples/hello-world.md",203],a8bb5334:[function(){return n.e(151).then(n.bind(null,204))},"@site/docs/guide.md",204],a8dc7269:[function(){return n.e(152).then(n.bind(null,205))},"@site/docs/examples/plot-interval-range.md",205],a9331674:[function(){return n.e(153).then(n.bind(null,206))},"@site/docs/examples/form-template.md",206],aa7f648d:[function(){return n.e(154).then(n.bind(null,207))},"@site/docs/examples/plot-interval-annotation.md",207],aa9ca283:[function(){return n.e(155).then(n.bind(null,208))},"@site/docs/examples/plot-plotly.md",208],ac27f894:[function(){return n.e(156).then(n.bind(null,209))},"@site/docs/examples/plot-interval-transpose.md",209],af172acd:[function(){return n.e(157).then(n.bind(null,210))},"@site/blog/2019-05-30-welcome.md?truncated=true",210],b140a32d:[function(){return n.e(158).then(n.bind(null,211))},"@site/docs/examples/dropdown.md",211],b18fb770:[function(){return n.e(159).then(n.bind(null,212))},"@site/docs/examples/graphics-spline.md",212],b1e50d5a:[function(){return n.e(160).then(n.bind(null,213))},"@site/docs/examples/frame.md",213],b22f7242:[function(){return n.e(161).then(n.bind(null,214))},"@site/docs/examples/plot-vegalite.md",214],b81c5e46:[function(){return n.e(162).then(n.bind(null,215))},"@site/docs/examples/image.md",215],b8435c12:[function(){return n.e(163).then(n.bind(null,216))},"@site/docs/examples/markdown-data.md",216],b999a6e4:[function(){return n.e(164).then(n.bind(null,217))},"@site/docs/api/types.md",217],b9e4d6e6:[function(){return n.e(165).then(n.bind(null,218))},"@site/docs/examples/meta-refresh.md",218],b9f028e1:[function(){return n.e(166).then(n.bind(null,219))},"@site/docs/examples/toggle.md",219],ba1aeef8:[function(){return n.e(167).then(n.bind(null,220))},"@site/docs/examples/stat-large.md",220],bb5446ac:[function(){return n.e(168).then(n.bind(null,221))},"@site/docs/examples/plot-area-line.md",221],bbdd3825:[function(){return n.e(169).then(n.bind(null,222))},"@site/docs/examples/todo.md",222],bd0b0bbe:[function(){return n.e(170).then(n.bind(null,223))},"@site/docs/examples/plot-interval-range-transpose.md",223],bd7ed1d7:[function(){return n.e(171).then(n.bind(null,224))},"@site/docs/examples/counter-multicast.md",224],bdc330a7:[function(){return n.e(172).then(n.bind(null,225))},"@site/docs/examples/tab-link.md",225],bdd709f1:[function(){return n.e(173).then(n.bind(null,226))},"@site/blog/2019-05-28-hola.md",226],bf614533:[function(){return n.e(174).then(n.bind(null,227))},"@site/docs/examples/index.md",227],c07c3c71:[function(){return n.e(175).then(n.bind(null,228))},"@site/docs/examples/breadcrumbs.md",228],c0ac41fc:[function(){return n.e(176).then(n.bind(null,229))},"@site/docs/examples/plot-axis-title.md",229],c0b6bb44:[function(){return n.e(177).then(n.bind(null,230))},"@site/docs/examples/table-search.md",230],c10c720e:[function(){return n.e(178).then(n.bind(null,231))},"@site/docs/examples/upload-download.md",231],c1570962:[function(){return n.e(179).then(n.bind(null,232))},"@site/docs/examples/nav.md",232],c1cf1fe4:[function(){return n.e(180).then(n.bind(null,233))},"@site/docs/examples/plot-interval-groups.md",233],c4f5d8e4:[function(){return Promise.all([n.e(0),n.e(1),n.e(2),n.e(181)]).then(n.bind(null,234))},"@site/src/pages/index.js",234],c641a4e8:[function(){return n.e(182).then(n.bind(null,236))},"@site/docs/examples/progress-update.md",236],c7b62599:[function(){return n.e(183).then(n.bind(null,237))},"@site/docs/examples/plot-interval-stacked-grouped-transpose.md",237],c87c151a:[function(){return n.e(184).then(n.bind(null,238))},"@site/docs/examples/plot-path-smooth.md",238],c9e5c590:[function(){return n.e(185).then(n.bind(null,239))},"@site/docs/examples/plot-line-smooth.md",239],ca1ac85d:[function(){return n.e(186).then(n.bind(null,240))},"@site/docs/enterprise/index.md",240],ca622d62:[function(){return n.e(187).then(n.bind(null,241))},"@site/docs/examples/slider.md",241],cc0ea0cf:[function(){return n.e(188).then(n.bind(null,242))},"@site/docs/examples/separator.md",242],ccc49370:[function(){return Promise.all([n.e(0),n.e(1),n.e(2),n.e(3),n.e(189)]).then(n.bind(null,289))},"@theme/BlogPostPage",289],cd329814:[function(){return n.e(190).then(n.bind(null,243))},"@site/docs/examples/plot-interval-stacked-transpose.md",243],ce88eaaa:[function(){return n.e(191).then(n.bind(null,244))},"@site/docs/examples/upload-ui.md",244],d05981be:[function(){return n.e(192).then(n.bind(null,245))},"@site/docs/examples/plot-line.md",245],d145135f:[function(){return n.e(193).then(n.bind(null,246))},"@site/docs/examples/upload-async.md",246],d3f54ca5:[function(){return n.e(194).then(n.bind(null,247))},"@site/docs/apps.md",247],d4ee2b4f:[function(){return n.e(195).then(n.bind(null,248))},"@site/docs/examples/template-data.md",248],d589d3a7:[function(){return n.e(196).then(n.bind(null,249))},"@site/docs/getting-started.md",249],d610846f:[function(){return n.e(197).then(n.bind(null,250))},"@site/blog/2019-05-29-hello-world.md",250],d8689276:[function(){return n.e(198).then(n.bind(null,251))},"@site/docs/examples/spinbox.md",251],d8aa093c:[function(){return n.e(199).then(n.bind(null,252))},"@site/docs/examples/table-select.md",252],db32d859:[function(){return n.e(200).then(n.bind(null,253))},"@site/docs/security.md",253],dc705eb8:[function(){return n.e(201).then(n.bind(null,254))},"@site/docs/examples/layout.md",254],dceb90d2:[function(){return n.e(202).then(n.bind(null,255))},"@site/docs/examples/counter-global.md",255],de02e8e6:[function(){return n.e(203).then(n.bind(null,256))},"@site/docs/examples/plot-path-point.md",256],e013439f:[function(){return n.e(204).then(n.bind(null,257))},"@site/docs/examples/plot-line-annotation.md",257],e32c5859:[function(){return n.e(205).then(n.bind(null,258))},"@site/docs/examples/text-sizes.md",258],e4e8fb51:[function(){return n.e(206).then(n.bind(null,259))},"@site/docs/examples/form-frame.md",259],e7ba74f4:[function(){return n.e(207).then(n.bind(null,260))},"@site/docs/examples/meta-notification.md",260],e7c32899:[function(){return n.e(208).then(n.bind(null,261))},"@site/docs/examples/plot-matplotlib.md",261],e833177e:[function(){return n.e(209).then(n.bind(null,262))},"@site/docs/scripts.md",262],e8c1c6e8:[function(){return n.e(210).then(n.bind(null,263))},"@site/docs/plotting.md",263],e96704c5:[function(){return n.e(211).then(n.bind(null,264))},"@site/docs/examples/plot-interval-helix.md",264],eb2bb38c:[function(){return n.e(212).then(n.bind(null,265))},"@site/docs/examples/plot-histogram.md",265],ecdac497:[function(){return n.e(213).then(n.bind(null,266))},"@site/docs/examples/link.md",266],ed3db3ec:[function(){return n.e(214).then(n.bind(null,267))},"@site/docs/examples/plot-point-annotation.md",267],eec6e613:[function(){return n.e(215).then(n.bind(null,268))},"@site/docs/examples/range-slider.md",268],f09ebdf1:[function(){return n.e(216).then(n.bind(null,269))},"@site/docs/examples/meta-title.md",269],f132454a:[function(){return n.e(217).then(n.bind(null,270))},"@site/docs/examples/hash-routing.md",270],f151ab1a:[function(){return n.e(218).then(n.bind(null,271))},"@site/docs/api/ui.md",271],f1ec6cfa:[function(){return n.e(219).then(n.bind(null,272))},"@site/docs/examples/plot-interval-stacked-grouped.md",272],f21433ff:[function(){return n.e(220).then(n.bind(null,273))},"@site/docs/examples/plot-line-groups.md",273],f21d2ab0:[function(){return n.e(221).then(n.bind(null,274))},"@site/docs/examples/stat-small-series-area.md",274],f3473c5b:[function(){return n.e(222).then(n.bind(null,275))},"@site/docs/examples/layout-size.md",275],f349fb86:[function(){return n.e(223).then(n.bind(null,276))},"@site/docs/examples/graphics-hilbert.md",276],f60be60c:[function(){return n.e(224).then(n.bind(null,277))},"@site/docs/examples/toolbar.md",277],f7ea47c5:[function(){return n.e(225).then(n.bind(null,278))},"@site/docs/tutorial-beer.md",278],f811e444:[function(){return n.e(226).then(n.bind(null,279))},"@site/docs/routing.md",279],f846e950:[function(){return n.e(227).then(n.bind(null,280))},"@site/docs/examples/plot-area-line-smooth.md",280],faf81df8:[function(){return n.e(228).then(n.bind(null,281))},"@site/docs/examples/date-picker.md",281],fbe93038:[function(){return n.e(229).then(n.bind(null,282))},"@site/docs/testing.md",282],fcfc3752:[function(){return n.e(230).then(n.bind(null,283))},"@site/docs/tutorial-hello.md",283],fd056868:[function(){return n.e(231).then(n.bind(null,284))},"@site/docs/examples/combobox.md",284],fe4d4432:[function(){return n.e(232).then(n.bind(null,285))},"@site/docs/examples/date-picker-trigger.md",285]};var d=function(e){const t={};return function e(n,a){Object.keys(n).forEach((o=>{const r=n[o],i=a?a+"."+o:o;"object"===typeof r&&!!r&&Object.keys(r).length?e(r,i):t[i]=r}))}(e),t};var f=function(e,t){if("*"===e)return s()({loading:c,loader:()=>Promise.all([n.e(0),n.e(1),n.e(2),n.e(236)]).then(n.bind(null,468))});const a=u[`${e}-${t}`],r=[],i=[],l={},f=d(a);return Object.keys(f).forEach((e=>{const t=p[f[e]];t&&(l[e]=t[0],r.push(t[1]),i.push(t[2]))})),s.a.Map({loading:c,loader:l,modules:r,webpack:()=>i,render:(e,t)=>{const n=JSON.parse(JSON.stringify(a));Object.keys(e).forEach((t=>{let a=n;const o=t.split(".");for(let e=0;e<o.length-1;e+=1)a=a[o[e]];a[o[o.length-1]]=e[t].default;const r=Object.keys(e[t]).filter((e=>"default"!==e));r&&r.length&&r.forEach((n=>{a[o[o.length-1]][n]=e[t][n]}))}));const r=n.component;return delete n.component,o.a.createElement(r,Object.assign({},n,t))}})},m=[{path:"/wave/",component:f("/wave/","1a9"),exact:!0},{path:"/wave/blog",component:f("/wave/blog","318"),exact:!0},{path:"/wave/blog/hello-world",component:f("/wave/blog/hello-world","652"),exact:!0},{path:"/wave/blog/hola",component:f("/wave/blog/hola","a3c"),exact:!0},{path:"/wave/blog/tags",component:f("/wave/blog/tags","f9b"),exact:!0},{path:"/wave/blog/tags/docusaurus",component:f("/wave/blog/tags/docusaurus","0d7"),exact:!0},{path:"/wave/blog/tags/facebook",component:f("/wave/blog/tags/facebook","1b4"),exact:!0},{path:"/wave/blog/tags/hello",component:f("/wave/blog/tags/hello","719"),exact:!0},{path:"/wave/blog/tags/hola",component:f("/wave/blog/tags/hola","5a7"),exact:!0},{path:"/wave/blog/welcome",component:f("/wave/blog/welcome","2ca"),exact:!0},{path:"/wave/docs",component:f("/wave/docs","0fd"),routes:[{path:"/wave/docs/_start_q",component:f("/wave/docs/_start_q","1b6"),exact:!0},{path:"/wave/docs/api/autoreload",component:f("/wave/docs/api/autoreload","136"),exact:!0},{path:"/wave/docs/api/core",component:f("/wave/docs/api/core","506"),exact:!0},{path:"/wave/docs/api/db",component:f("/wave/docs/api/db","270"),exact:!0},{path:"/wave/docs/api/graphics",component:f("/wave/docs/api/graphics","576"),exact:!0},{path:"/wave/docs/api/index",component:f("/wave/docs/api/index","d57"),exact:!0},{path:"/wave/docs/api/server",component:f("/wave/docs/api/server","e76"),exact:!0},{path:"/wave/docs/api/test",component:f("/wave/docs/api/test","5bd"),exact:!0},{path:"/wave/docs/api/types",component:f("/wave/docs/api/types","82d"),exact:!0},{path:"/wave/docs/api/ui",component:f("/wave/docs/api/ui","1df"),exact:!0},{path:"/wave/docs/apps",component:f("/wave/docs/apps","b2f"),exact:!0},{path:"/wave/docs/architecture",component:f("/wave/docs/architecture","1aa"),exact:!0},{path:"/wave/docs/arguments",component:f("/wave/docs/arguments","dd1"),exact:!0},{path:"/wave/docs/backup",component:f("/wave/docs/backup","06a"),exact:!0},{path:"/wave/docs/browser-testing",component:f("/wave/docs/browser-testing","85e"),exact:!0},{path:"/wave/docs/buffers",component:f("/wave/docs/buffers","70a"),exact:!0},{path:"/wave/docs/cards",component:f("/wave/docs/cards","4c7"),exact:!0},{path:"/wave/docs/change-log",component:f("/wave/docs/change-log","095"),exact:!0},{path:"/wave/docs/components",component:f("/wave/docs/components","2bb"),exact:!0},{path:"/wave/docs/configuration",component:f("/wave/docs/configuration","e5a"),exact:!0},{path:"/wave/docs/contributing",component:f("/wave/docs/contributing","b63"),exact:!0},{path:"/wave/docs/development",component:f("/wave/docs/development","e3f"),exact:!0},{path:"/wave/docs/enterprise/",component:f("/wave/docs/enterprise/","197"),exact:!0},{path:"/wave/docs/enterprise/basic-concepts",component:f("/wave/docs/enterprise/basic-concepts","9ca"),exact:!0},{path:"/wave/docs/enterprise/developer-guide",component:f("/wave/docs/enterprise/developer-guide","f02"),exact:!0},{path:"/wave/docs/examples",component:f("/wave/docs/examples","247"),exact:!0},{path:"/wave/docs/examples/breadcrumbs",component:f("/wave/docs/examples/breadcrumbs","42a"),exact:!0},{path:"/wave/docs/examples/button",component:f("/wave/docs/examples/button","d1c"),exact:!0},{path:"/wave/docs/examples/buttons",component:f("/wave/docs/examples/buttons","4f3"),exact:!0},{path:"/wave/docs/examples/card-menu",component:f("/wave/docs/examples/card-menu","52c"),exact:!0},{path:"/wave/docs/examples/checkbox",component:f("/wave/docs/examples/checkbox","8fd"),exact:!0},{path:"/wave/docs/examples/checklist",component:f("/wave/docs/examples/checklist","35d"),exact:!0},{path:"/wave/docs/examples/choice-group",component:f("/wave/docs/examples/choice-group","f4d"),exact:!0},{path:"/wave/docs/examples/color-picker",component:f("/wave/docs/examples/color-picker","014"),exact:!0},{path:"/wave/docs/examples/combobox",component:f("/wave/docs/examples/combobox","fe1"),exact:!0},{path:"/wave/docs/examples/counter-broadcast",component:f("/wave/docs/examples/counter-broadcast","5e7"),exact:!0},{path:"/wave/docs/examples/counter-global",component:f("/wave/docs/examples/counter-global","921"),exact:!0},{path:"/wave/docs/examples/counter-multicast",component:f("/wave/docs/examples/counter-multicast","d7a"),exact:!0},{path:"/wave/docs/examples/counter-unicast",component:f("/wave/docs/examples/counter-unicast","823"),exact:!0},{path:"/wave/docs/examples/dashboard",component:f("/wave/docs/examples/dashboard","613"),exact:!0},{path:"/wave/docs/examples/date-picker",component:f("/wave/docs/examples/date-picker","1b7"),exact:!0},{path:"/wave/docs/examples/date-picker-trigger",component:f("/wave/docs/examples/date-picker-trigger","8c1"),exact:!0},{path:"/wave/docs/examples/dropdown",component:f("/wave/docs/examples/dropdown","0e1"),exact:!0},{path:"/wave/docs/examples/file-upload",component:f("/wave/docs/examples/file-upload","429"),exact:!0},{path:"/wave/docs/examples/form",component:f("/wave/docs/examples/form","8d7"),exact:!0},{path:"/wave/docs/examples/form-frame",component:f("/wave/docs/examples/form-frame","078"),exact:!0},{path:"/wave/docs/examples/form-frame-path",component:f("/wave/docs/examples/form-frame-path","5e9"),exact:!0},{path:"/wave/docs/examples/form-markup",component:f("/wave/docs/examples/form-markup","bf4"),exact:!0},{path:"/wave/docs/examples/form-menu",component:f("/wave/docs/examples/form-menu","035"),exact:!0},{path:"/wave/docs/examples/form-template",component:f("/wave/docs/examples/form-template","6f7"),exact:!0},{path:"/wave/docs/examples/frame",component:f("/wave/docs/examples/frame","6ff"),exact:!0},{path:"/wave/docs/examples/frame-path",component:f("/wave/docs/examples/frame-path","f9c"),exact:!0},{path:"/wave/docs/examples/glider-gun",component:f("/wave/docs/examples/glider-gun","b5d"),exact:!0},{path:"/wave/docs/examples/graphics-clock",component:f("/wave/docs/examples/graphics-clock","3a3"),exact:!0},{path:"/wave/docs/examples/graphics-hilbert",component:f("/wave/docs/examples/graphics-hilbert","ecc"),exact:!0},{path:"/wave/docs/examples/graphics-path",component:f("/wave/docs/examples/graphics-path","8af"),exact:!0},{path:"/wave/docs/examples/graphics-primitives",component:f("/wave/docs/examples/graphics-primitives","169"),exact:!0},{path:"/wave/docs/examples/graphics-spline",component:f("/wave/docs/examples/graphics-spline","4c7"),exact:!0},{path:"/wave/docs/examples/graphics-turtle",component:f("/wave/docs/examples/graphics-turtle","134"),exact:!0},{path:"/wave/docs/examples/hash-routing",component:f("/wave/docs/examples/hash-routing","600"),exact:!0},{path:"/wave/docs/examples/header",component:f("/wave/docs/examples/header","2b4"),exact:!0},{path:"/wave/docs/examples/hello-world",component:f("/wave/docs/examples/hello-world","49b"),exact:!0},{path:"/wave/docs/examples/image",component:f("/wave/docs/examples/image","5b5"),exact:!0},{path:"/wave/docs/examples/issue-tracker",component:f("/wave/docs/examples/issue-tracker","073"),exact:!0},{path:"/wave/docs/examples/label",component:f("/wave/docs/examples/label","15f"),exact:!0},{path:"/wave/docs/examples/layout",component:f("/wave/docs/examples/layout","342"),exact:!0},{path:"/wave/docs/examples/layout-size",component:f("/wave/docs/examples/layout-size","4bf"),exact:!0},{path:"/wave/docs/examples/link",component:f("/wave/docs/examples/link","bc8"),exact:!0},{path:"/wave/docs/examples/markdown",component:f("/wave/docs/examples/markdown","d09"),exact:!0},{path:"/wave/docs/examples/markdown-data",component:f("/wave/docs/examples/markdown-data","2ac"),exact:!0},{path:"/wave/docs/examples/markup",component:f("/wave/docs/examples/markup","180"),exact:!0},{path:"/wave/docs/examples/message-bar",component:f("/wave/docs/examples/message-bar","97f"),exact:!0},{path:"/wave/docs/examples/meta-notification",component:f("/wave/docs/examples/meta-notification","ae1"),exact:!0},{path:"/wave/docs/examples/meta-redirect",component:f("/wave/docs/examples/meta-redirect","f63"),exact:!0},{path:"/wave/docs/examples/meta-refresh",component:f("/wave/docs/examples/meta-refresh","0b0"),exact:!0},{path:"/wave/docs/examples/meta-title",component:f("/wave/docs/examples/meta-title","a2d"),exact:!0},{path:"/wave/docs/examples/nav",component:f("/wave/docs/examples/nav","50d"),exact:!0},{path:"/wave/docs/examples/picker",component:f("/wave/docs/examples/picker","396"),exact:!0},{path:"/wave/docs/examples/picker-selection",component:f("/wave/docs/examples/picker-selection","015"),exact:!0},{path:"/wave/docs/examples/pixel-art",component:f("/wave/docs/examples/pixel-art","588"),exact:!0},{path:"/wave/docs/examples/plot-altair",component:f("/wave/docs/examples/plot-altair","9c7"),exact:!0},{path:"/wave/docs/examples/plot-area",component:f("/wave/docs/examples/plot-area","e26"),exact:!0},{path:"/wave/docs/examples/plot-area-groups",component:f("/wave/docs/examples/plot-area-groups","ae1"),exact:!0},{path:"/wave/docs/examples/plot-area-line",component:f("/wave/docs/examples/plot-area-line","3a6"),exact:!0},{path:"/wave/docs/examples/plot-area-line-groups",component:f("/wave/docs/examples/plot-area-line-groups","49e"),exact:!0},{path:"/wave/docs/examples/plot-area-line-smooth",component:f("/wave/docs/examples/plot-area-line-smooth","8df"),exact:!0},{path:"/wave/docs/examples/plot-area-negative",component:f("/wave/docs/examples/plot-area-negative","5bf"),exact:!0},{path:"/wave/docs/examples/plot-area-range",component:f("/wave/docs/examples/plot-area-range","5c0"),exact:!0},{path:"/wave/docs/examples/plot-area-smooth",component:f("/wave/docs/examples/plot-area-smooth","cb7"),exact:!0},{path:"/wave/docs/examples/plot-area-stacked",component:f("/wave/docs/examples/plot-area-stacked","85c"),exact:!0},{path:"/wave/docs/examples/plot-axis-title",component:f("/wave/docs/examples/plot-axis-title","ebc"),exact:!0},{path:"/wave/docs/examples/plot-bokeh",component:f("/wave/docs/examples/plot-bokeh","75a"),exact:!0},{path:"/wave/docs/examples/plot-d3",component:f("/wave/docs/examples/plot-d3","d44"),exact:!0},{path:"/wave/docs/examples/plot-form",component:f("/wave/docs/examples/plot-form","d4d"),exact:!0},{path:"/wave/docs/examples/plot-histogram",component:f("/wave/docs/examples/plot-histogram","cc7"),exact:!0},{path:"/wave/docs/examples/plot-interval",component:f("/wave/docs/examples/plot-interval","8cf"),exact:!0},{path:"/wave/docs/examples/plot-interval-annotation",component:f("/wave/docs/examples/plot-interval-annotation","977"),exact:!0},{path:"/wave/docs/examples/plot-interval-annotation-transpose",component:f("/wave/docs/examples/plot-interval-annotation-transpose","65e"),exact:!0},{path:"/wave/docs/examples/plot-interval-groups",component:f("/wave/docs/examples/plot-interval-groups","4cb"),exact:!0},{path:"/wave/docs/examples/plot-interval-groups-transpose",component:f("/wave/docs/examples/plot-interval-groups-transpose","646"),exact:!0},{path:"/wave/docs/examples/plot-interval-helix",component:f("/wave/docs/examples/plot-interval-helix","3ee"),exact:!0},{path:"/wave/docs/examples/plot-interval-labels",component:f("/wave/docs/examples/plot-interval-labels","5dc"),exact:!0},{path:"/wave/docs/examples/plot-interval-polar",component:f("/wave/docs/examples/plot-interval-polar","aeb"),exact:!0},{path:"/wave/docs/examples/plot-interval-polar-stacked",component:f("/wave/docs/examples/plot-interval-polar-stacked","978"),exact:!0},{path:"/wave/docs/examples/plot-interval-range",component:f("/wave/docs/examples/plot-interval-range","0da"),exact:!0},{path:"/wave/docs/examples/plot-interval-range-transpose",component:f("/wave/docs/examples/plot-interval-range-transpose","0f2"),exact:!0},{path:"/wave/docs/examples/plot-interval-stacked",component:f("/wave/docs/examples/plot-interval-stacked","d35"),exact:!0},{path:"/wave/docs/examples/plot-interval-stacked-grouped",component:f("/wave/docs/examples/plot-interval-stacked-grouped","4dd"),exact:!0},{path:"/wave/docs/examples/plot-interval-stacked-grouped-transpose",component:f("/wave/docs/examples/plot-interval-stacked-grouped-transpose","d39"),exact:!0},{path:"/wave/docs/examples/plot-interval-stacked-transpose",component:f("/wave/docs/examples/plot-interval-stacked-transpose","5fa"),exact:!0},{path:"/wave/docs/examples/plot-interval-theta",component:f("/wave/docs/examples/plot-interval-theta","035"),exact:!0},{path:"/wave/docs/examples/plot-interval-transpose",component:f("/wave/docs/examples/plot-interval-transpose","aae"),exact:!0},{path:"/wave/docs/examples/plot-line",component:f("/wave/docs/examples/plot-line","238"),exact:!0},{path:"/wave/docs/examples/plot-line-annotation",component:f("/wave/docs/examples/plot-line-annotation","27b"),exact:!0},{path:"/wave/docs/examples/plot-line-groups",component:f("/wave/docs/examples/plot-line-groups","812"),exact:!0},{path:"/wave/docs/examples/plot-line-labels",component:f("/wave/docs/examples/plot-line-labels","187"),exact:!0},{path:"/wave/docs/examples/plot-line-labels-no-overlap",component:f("/wave/docs/examples/plot-line-labels-no-overlap","d7f"),exact:!0},{path:"/wave/docs/examples/plot-line-labels-stroked",component:f("/wave/docs/examples/plot-line-labels-stroked","1e3"),exact:!0},{path:"/wave/docs/examples/plot-line-smooth",component:f("/wave/docs/examples/plot-line-smooth","e21"),exact:!0},{path:"/wave/docs/examples/plot-matplotlib",component:f("/wave/docs/examples/plot-matplotlib","366"),exact:!0},{path:"/wave/docs/examples/plot-path",component:f("/wave/docs/examples/plot-path","1d1"),exact:!0},{path:"/wave/docs/examples/plot-path-point",component:f("/wave/docs/examples/plot-path-point","b35"),exact:!0},{path:"/wave/docs/examples/plot-path-smooth",component:f("/wave/docs/examples/plot-path-smooth","46b"),exact:!0},{path:"/wave/docs/examples/plot-plotly",component:f("/wave/docs/examples/plot-plotly","470"),exact:!0},{path:"/wave/docs/examples/plot-point",component:f("/wave/docs/examples/plot-point","c44"),exact:!0},{path:"/wave/docs/examples/plot-point-annotation",component:f("/wave/docs/examples/plot-point-annotation","faf"),exact:!0},{path:"/wave/docs/examples/plot-point-custom",component:f("/wave/docs/examples/plot-point-custom","fe9"),exact:!0},{path:"/wave/docs/examples/plot-point-groups",component:f("/wave/docs/examples/plot-point-groups","3be"),exact:!0},{path:"/wave/docs/examples/plot-point-map",component:f("/wave/docs/examples/plot-point-map","8f7"),exact:!0},{path:"/wave/docs/examples/plot-point-shapes",component:f("/wave/docs/examples/plot-point-shapes","086"),exact:!0},{path:"/wave/docs/examples/plot-point-sizes",component:f("/wave/docs/examples/plot-point-sizes","a9d"),exact:!0},{path:"/wave/docs/examples/plot-polygon",component:f("/wave/docs/examples/plot-polygon","c78"),exact:!0},{path:"/wave/docs/examples/plot-step",component:f("/wave/docs/examples/plot-step","c36"),exact:!0},{path:"/wave/docs/examples/plot-step-after",component:f("/wave/docs/examples/plot-step-after","afc"),exact:!0},{path:"/wave/docs/examples/plot-step-before",component:f("/wave/docs/examples/plot-step-before","b83"),exact:!0},{path:"/wave/docs/examples/plot-vegalite",component:f("/wave/docs/examples/plot-vegalite","cf6"),exact:!0},{path:"/wave/docs/examples/plot-vegalite-form",component:f("/wave/docs/examples/plot-vegalite-form","e1b"),exact:!0},{path:"/wave/docs/examples/plot-vegalite-update",component:f("/wave/docs/examples/plot-vegalite-update","e40"),exact:!0},{path:"/wave/docs/examples/progress",component:f("/wave/docs/examples/progress","b94"),exact:!0},{path:"/wave/docs/examples/progress-update",component:f("/wave/docs/examples/progress-update","122"),exact:!0},{path:"/wave/docs/examples/range-slider",component:f("/wave/docs/examples/range-slider","82e"),exact:!0},{path:"/wave/docs/examples/separator",component:f("/wave/docs/examples/separator","daf"),exact:!0},{path:"/wave/docs/examples/slider",component:f("/wave/docs/examples/slider","ae1"),exact:!0},{path:"/wave/docs/examples/spinbox",component:f("/wave/docs/examples/spinbox","309"),exact:!0},{path:"/wave/docs/examples/stat-large",component:f("/wave/docs/examples/stat-large","5a2"),exact:!0},{path:"/wave/docs/examples/stat-large-bar",component:f("/wave/docs/examples/stat-large-bar","927"),exact:!0},{path:"/wave/docs/examples/stat-small",component:f("/wave/docs/examples/stat-small","1db"),exact:!0},{path:"/wave/docs/examples/stat-small-series-area",component:f("/wave/docs/examples/stat-small-series-area","4b9"),exact:!0},{path:"/wave/docs/examples/stat-small-series-interval",component:f("/wave/docs/examples/stat-small-series-interval","44e"),exact:!0},{path:"/wave/docs/examples/stat-tall-gauge",component:f("/wave/docs/examples/stat-tall-gauge","1b3"),exact:!0},{path:"/wave/docs/examples/stat-tall-series-area",component:f("/wave/docs/examples/stat-tall-series-area","91c"),exact:!0},{path:"/wave/docs/examples/stat-tall-series-interval",component:f("/wave/docs/examples/stat-tall-series-interval","0ac"),exact:!0},{path:"/wave/docs/examples/stat-wide-bar",component:f("/wave/docs/examples/stat-wide-bar","5f0"),exact:!0},{path:"/wave/docs/examples/stat-wide-gauge",component:f("/wave/docs/examples/stat-wide-gauge","515"),exact:!0},{path:"/wave/docs/examples/stat-wide-series-area",component:f("/wave/docs/examples/stat-wide-series-area","9bc"),exact:!0},{path:"/wave/docs/examples/stat-wide-series-interval",component:f("/wave/docs/examples/stat-wide-series-interval","8d4"),exact:!0},{path:"/wave/docs/examples/stepper",component:f("/wave/docs/examples/stepper","394"),exact:!0},{path:"/wave/docs/examples/swatch-picker",component:f("/wave/docs/examples/swatch-picker","6dc"),exact:!0},{path:"/wave/docs/examples/tab",component:f("/wave/docs/examples/tab","07b"),exact:!0},{path:"/wave/docs/examples/tab-delete",component:f("/wave/docs/examples/tab-delete","9c5"),exact:!0},{path:"/wave/docs/examples/tab-link",component:f("/wave/docs/examples/tab-link","478"),exact:!0},{path:"/wave/docs/examples/tab-routing",component:f("/wave/docs/examples/tab-routing","6e6"),exact:!0},{path:"/wave/docs/examples/table",component:f("/wave/docs/examples/table","63d"),exact:!0},{path:"/wave/docs/examples/table-download",component:f("/wave/docs/examples/table-download","667"),exact:!0},{path:"/wave/docs/examples/table-filter",component:f("/wave/docs/examples/table-filter","185"),exact:!0},{path:"/wave/docs/examples/table-filter-backend",component:f("/wave/docs/examples/table-filter-backend","7d8"),exact:!0},{path:"/wave/docs/examples/table-groupby",component:f("/wave/docs/examples/table-groupby","2d7"),exact:!0},{path:"/wave/docs/examples/table-markdown",component:f("/wave/docs/examples/table-markdown","c18"),exact:!0},{path:"/wave/docs/examples/table-search",component:f("/wave/docs/examples/table-search","cef"),exact:!0},{path:"/wave/docs/examples/table-select",component:f("/wave/docs/examples/table-select","2b7"),exact:!0},{path:"/wave/docs/examples/table-sort",component:f("/wave/docs/examples/table-sort","3f0"),exact:!0},{path:"/wave/docs/examples/tabs",component:f("/wave/docs/examples/tabs","2de"),exact:!0},{path:"/wave/docs/examples/template",component:f("/wave/docs/examples/template","7a0"),exact:!0},{path:"/wave/docs/examples/template-data",component:f("/wave/docs/examples/template-data","998"),exact:!0},{path:"/wave/docs/examples/text",component:f("/wave/docs/examples/text","bf6"),exact:!0},{path:"/wave/docs/examples/text-sizes",component:f("/wave/docs/examples/text-sizes","25f"),exact:!0},{path:"/wave/docs/examples/textbox",component:f("/wave/docs/examples/textbox","d9f"),exact:!0},{path:"/wave/docs/examples/textbox-trigger",component:f("/wave/docs/examples/textbox-trigger","381"),exact:!0},{path:"/wave/docs/examples/todo",component:f("/wave/docs/examples/todo","28c"),exact:!0},{path:"/wave/docs/examples/toggle",component:f("/wave/docs/examples/toggle","75f"),exact:!0},{path:"/wave/docs/examples/toolbar",component:f("/wave/docs/examples/toolbar","7fe"),exact:!0},{path:"/wave/docs/examples/toolbar-routing",component:f("/wave/docs/examples/toolbar-routing","1ae"),exact:!0},{path:"/wave/docs/examples/upload",component:f("/wave/docs/examples/upload","d1b"),exact:!0},{path:"/wave/docs/examples/upload-async",component:f("/wave/docs/examples/upload-async","476"),exact:!0},{path:"/wave/docs/examples/upload-download",component:f("/wave/docs/examples/upload-download","70e"),exact:!0},{path:"/wave/docs/examples/upload-ui",component:f("/wave/docs/examples/upload-ui","550"),exact:!0},{path:"/wave/docs/examples/wizard",component:f("/wave/docs/examples/wizard","730"),exact:!0},{path:"/wave/docs/expressions",component:f("/wave/docs/expressions","7e5"),exact:!0},{path:"/wave/docs/files",component:f("/wave/docs/files","eb6"),exact:!0},{path:"/wave/docs/getting-started",component:f("/wave/docs/getting-started","cdc"),exact:!0},{path:"/wave/docs/graphics",component:f("/wave/docs/graphics","23e"),exact:!0},{path:"/wave/docs/guide",component:f("/wave/docs/guide","de8"),exact:!0},{path:"/wave/docs/installation",component:f("/wave/docs/installation","5c8"),exact:!0},{path:"/wave/docs/layout",component:f("/wave/docs/layout","362"),exact:!0},{path:"/wave/docs/logging",component:f("/wave/docs/logging","63d"),exact:!0},{path:"/wave/docs/migrating-0",component:f("/wave/docs/migrating-0","830"),exact:!0},{path:"/wave/docs/pages",component:f("/wave/docs/pages","2dc"),exact:!0},{path:"/wave/docs/plotting",component:f("/wave/docs/plotting","2c7"),exact:!0},{path:"/wave/docs/realtime",component:f("/wave/docs/realtime","374"),exact:!0},{path:"/wave/docs/routing",component:f("/wave/docs/routing","f63"),exact:!0},{path:"/wave/docs/scripts",component:f("/wave/docs/scripts","cee"),exact:!0},{path:"/wave/docs/security",component:f("/wave/docs/security","c61"),exact:!0},{path:"/wave/docs/state",component:f("/wave/docs/state","fcc"),exact:!0},{path:"/wave/docs/testing",component:f("/wave/docs/testing","1ff"),exact:!0},{path:"/wave/docs/tour",component:f("/wave/docs/tour","6aa"),exact:!0},{path:"/wave/docs/tutorial-beer",component:f("/wave/docs/tutorial-beer","f5d"),exact:!0},{path:"/wave/docs/tutorial-counter",component:f("/wave/docs/tutorial-counter","da3"),exact:!0},{path:"/wave/docs/tutorial-hello",component:f("/wave/docs/tutorial-hello","0f5"),exact:!0},{path:"/wave/docs/tutorial-monitor",component:f("/wave/docs/tutorial-monitor","390"),exact:!0},{path:"/wave/docs/tutorial-todo",component:f("/wave/docs/tutorial-todo","762"),exact:!0}]},{path:"*",component:f("*")}],h=n(10),v=n(9),g=n(25),b=n(26),x=n(21),w=n(23),y=n(1),k=n(12),E=n.n(k),S=[n(15),n(15),n(15),n(38),n(44),n(41)];function T(e,...t){S.forEach((n=>{const a=n.__esModule?n.default:n;a&&a[e]&&a[e](...t)}))}var _={onRouteUpdate(...e){T("onRouteUpdate",...e)},onRouteUpdateDelayed(...e){T("onRouteUpdateDelayed",...e)}},O=n(8);function C(e,t){const n=Object(O.a)(e,t);return Promise.all(n.map((e=>{const{component:t}=e.route;if(t&&t.preload)return t.preload()})))}const P={};var N=function(e){if(P[e.pathname])return Object.assign(Object.assign({},e),{pathname:P[e.pathname]});let t=e.pathname||"/";return t=t.trim().replace(/\/index\.html$/,""),""===t&&(t="/"),P[e.pathname]=t,Object.assign(Object.assign({},e),{pathname:t})};n(42);E.a.configure({showSpinner:!1});class A extends o.a.Component{constructor(e){super(e),this.previousLocation=null,this.progressBarTimeout=null,this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){const n=e.location!==this.props.location,{routes:a,delay:o=1e3}=this.props;if(n){const t=N(e.location);return this.startProgressBar(o),this.previousLocation=N(this.props.location),this.setState({nextRouteHasLoaded:!1}),C(a,t.pathname).then((()=>{_.onRouteUpdate({previousLocation:this.previousLocation,location:t}),this.previousLocation=null,this.setState({nextRouteHasLoaded:!0},this.stopProgressBar);const{hash:e}=t;if(e){const t=e.substring(1),n=document.getElementById(t);n&&n.scrollIntoView()}else window.scrollTo(0,0)})).catch((e=>console.warn(e))),!1}return!!t.nextRouteHasLoaded}clearProgressBarTimeout(){this.progressBarTimeout&&(clearTimeout(this.progressBarTimeout),this.progressBarTimeout=null)}startProgressBar(e){this.clearProgressBarTimeout(),this.progressBarTimeout=setTimeout((()=>{_.onRouteUpdateDelayed({location:N(this.props.location)}),E.a.start()}),e)}stopProgressBar(){this.clearProgressBarTimeout(),E.a.done()}render(){const{children:e,location:t}=this.props;return o.a.createElement(y.d,{location:N(t),render:()=>e})}}var R=Object(y.o)(A);var I=function(){const[e,t]=Object(a.useState)(!1);return Object(a.useEffect)((()=>{t(!0)}),[]),o.a.createElement(w.a.Provider,{value:{siteConfig:v.default,siteMetadata:b,globalData:g,isClient:e}},o.a.createElement(R,{routes:m},Object(x.a)(m)))};const F=function(e){if("undefined"==typeof document)return!1;const t=document.createElement("link");try{if(t.relList&&"function"==typeof t.relList.supports)return t.relList.supports(e)}catch(n){return!1}return!1}("prefetch")?function(e){return new Promise(((t,n)=>{if("undefined"==typeof document)return void n();const a=document.createElement("link");a.setAttribute("rel","prefetch"),a.setAttribute("href",e),a.onload=t,a.onerror=n;(document.getElementsByTagName("head")[0]||document.getElementsByName("script")[0].parentNode).appendChild(a)}))}:function(e){return new Promise(((t,n)=>{const a=new XMLHttpRequest;a.open("GET",e,!0),a.withCredentials=!0,a.onload=()=>{200===a.status?t():n()},a.send(null)}))},L={};var D=function(e){return new Promise((t=>{L[e]?t():F(e).then((()=>{t(),L[e]=!0})).catch((()=>{}))}))};const j={},M={},z=()=>!(!("connection"in navigator)||-1===(navigator.connection.effectiveType||"").indexOf("2g")||!navigator.connection.saveData);var $={prefetch:e=>{if(!(e=>!z()&&!M[e]&&!j[e])(e))return!1;j[e]=!0;return Object(O.a)(m,e).reduce(((e,t)=>{const n=u[t.route.path];if(!n)return e;const a=Object.values(d(n));return e.concat(a)}),[]).forEach((e=>{const t=n.gca(e);t&&!/undefined/.test(t)&&D(t)})),!0},preload:e=>!!(e=>!z()&&!M[e])(e)&&(M[e]=!0,C(m,e),!0)};if(h.a.canUseDOM){window.docusaurus=$;const e=r.hydrate;C(m,window.location.pathname).then((()=>{e(o.a.createElement(i.a,null,o.a.createElement(I,null)),document.getElementById("__docusaurus"))}))}},function(e,t,n){"use strict";n.r(t);var a=n(19),o=n(10),r=n(9);(e=>{if(o.a.canUseDOM){const{themeConfig:{prism:{additionalLanguages:t=[]}={}}}=r.default;window.Prism=e,t.forEach((e=>{n(39)("./prism-"+e)})),delete window.Prism}})(a.a)}],[[29,234,0]]]);
\ No newline at end of file
diff --git a/docs/runtime~main.7ebe698c.js b/docs/runtime~main.7ebe698c.js
deleted file mode 100644
index d30310cff9..0000000000
--- a/docs/runtime~main.7ebe698c.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(e){function c(c){for(var f,r,t=c[0],n=c[1],o=c[2],u=0,l=[];u<t.length;u++)r=t[u],Object.prototype.hasOwnProperty.call(b,r)&&b[r]&&l.push(b[r][0]),b[r]=0;for(f in n)Object.prototype.hasOwnProperty.call(n,f)&&(e[f]=n[f]);for(i&&i(c);l.length;)l.shift()();return d.push.apply(d,o||[]),a()}function a(){for(var e,c=0;c<d.length;c++){for(var a=d[c],f=!0,r=1;r<a.length;r++){var n=a[r];0!==b[n]&&(f=!1)}f&&(d.splice(c--,1),e=t(t.s=a[0]))}return e}var f={},b={234:0},d=[];function r(e){return t.p+""+({4:"01a85c17",5:"0923c366",6:"0965cdf6",7:"0a6c0f5b",8:"0eb58673",9:"0f2a58c8",10:"0fd1debb",11:"10172759",12:"109e456e",13:"11e3ce2c",14:"121dd878",15:"126e0b0e",16:"12e676cf",17:"135cee2a",18:"1375ade1",19:"1486e3bc",20:"15837ef3",21:"15a78352",22:"174d8305",23:"17896441",24:"17b5adee",25:"18fdb351",26:"190e4f21",27:"1a4f1376",28:"1ac8922b",29:"1ae86ebe",30:"1b0f8c91",31:"1c59264e",32:"1cc3ff79",33:"1f7c204c",34:"207f87c1",35:"22188a36",36:"2673e11f",37:"26907763",38:"273cfbdf",39:"28283d16",40:"2868cdab",41:"296a8b4f",42:"2bf08973",43:"2db704cb",44:"2fa9e1ff",45:"31c3c419",46:"31f8b56c",47:"34cd3da4",48:"3570154c",49:"3584c003",50:"35dabcf3",51:"360edac9",52:"3697284d",53:"36db7894",54:"36fe3260",55:"3713dbfc",56:"37382beb",57:"38067279",58:"3aa768f5",59:"3abe8fb9",60:"3b464fa6",61:"3b64911a",62:"3b8c55ea",63:"3f5dd320",64:"4104f38c",65:"41849bc6",66:"424c54c2",67:"430c4fb3",68:"452608cb",69:"4612f97b",70:"4657d646",71:"472f8a66",72:"4784cd26",73:"47a365f9",74:"47b3e1f7",75:"48786391",76:"4ab7b8a0",77:"4b953dd8",78:"4d54d076",79:"4e3b2ad1",80:"4f49ed83",81:"4f6dabb0",82:"4fc0cd6f",83:"50b74c5f",84:"5168cb29",85:"5281b7a2",86:"53da2547",87:"549ea605",88:"54aab825",89:"58b13b12",90:"5a34328a",91:"5e52c414",92:"5e8c322a",93:"600ae505",94:"60759c05",95:"6264312d",96:"6405c95c",97:"649e08dd",98:"65b8ef03",99:"661410ac",100:"6875c492",101:"692ea9bc",102:"6c3eb428",103:"6ce0e474",104:"6d36af6b",105:"6eb0e506",106:"6ee3bac7",107:"718f151f",108:"746a1919",109:"77770fc3",110:"79d0d182",111:"7c1cba9e",112:"7ca2f128",113:"7d1cd1c9",114:"7d744a8f",115:"7ecd2c5c",116:"7f8f4b62",117:"82f75f63",118:"8542acf3",119:"854481fc",120:"879fc8a6",121:"883d6399",122:"887b127f",123:"88c2f924",124:"8954e356",125:"8c12d624",126:"8c8ea2c1",127:"8e9f0a8a",128:"8eaf94d7",129:"8f030830",130:"9152460a",131:"917fcb62",132:"935f2afb",133:"9363aca1",134:"93896215",135:"941b9d10",136:"948118d6",137:"950656ac",138:"9747bb1a",139:"97d9aba4",140:"97e78655",141:"996e93c8",142:"997fea1d",143:"9a52a2f7",144:"9ed00105",145:"a50fe136",146:"a54511d2",147:"a64331b1",148:"a6aa9e1f",149:"a814b970",150:"a8b2a833",151:"a8bb5334",152:"a8dc7269",153:"a9331674",154:"aa7f648d",155:"aa9ca283",156:"ac27f894",157:"af172acd",158:"b140a32d",159:"b18fb770",160:"b1e50d5a",161:"b22f7242",162:"b81c5e46",163:"b8435c12",164:"b999a6e4",165:"b9e4d6e6",166:"b9f028e1",167:"ba1aeef8",168:"bb5446ac",169:"bbdd3825",170:"bd0b0bbe",171:"bd7ed1d7",172:"bdc330a7",173:"bdd709f1",174:"bf614533",175:"c07c3c71",176:"c0ac41fc",177:"c0b6bb44",178:"c10c720e",179:"c1570962",180:"c1cf1fe4",181:"c4f5d8e4",182:"c641a4e8",183:"c7b62599",184:"c87c151a",185:"c9e5c590",186:"ca1ac85d",187:"ca622d62",188:"cc0ea0cf",189:"ccc49370",190:"cd329814",191:"ce88eaaa",192:"d05981be",193:"d145135f",194:"d3f54ca5",195:"d4ee2b4f",196:"d589d3a7",197:"d610846f",198:"d8689276",199:"d8aa093c",200:"db32d859",201:"dc705eb8",202:"dceb90d2",203:"de02e8e6",204:"e013439f",205:"e32c5859",206:"e4e8fb51",207:"e7ba74f4",208:"e7c32899",209:"e833177e",210:"e8c1c6e8",211:"e96704c5",212:"eb2bb38c",213:"ecdac497",214:"ed3db3ec",215:"eec6e613",216:"f09ebdf1",217:"f132454a",218:"f151ab1a",219:"f1ec6cfa",220:"f21433ff",221:"f21d2ab0",222:"f3473c5b",223:"f349fb86",224:"f60be60c",225:"f7ea47c5",226:"f811e444",227:"f846e950",228:"faf81df8",229:"fbe93038",230:"fcfc3752",231:"fd056868",232:"fe4d4432"}[e]||e)+"."+{1:"d3a71930",2:"95b8a467",3:"2819f6b8",4:"5007ae08",5:"d31cd624",6:"1b601d55",7:"192be162",8:"1082abbb",9:"d86c4919",10:"be1ccbf3",11:"aa8c1123",12:"7c99ebff",13:"138ecca1",14:"095d5908",15:"12591c6d",16:"f3752766",17:"8e85b4f9",18:"83f02eb6",19:"86163c5d",20:"febd3ccc",21:"1e0bd04f",22:"dfb7e5b4",23:"78666ca0",24:"dc914a2c",25:"682c7b8a",26:"3960ce2c",27:"f1042d0a",28:"ecb893d7",29:"c9a5d67f",30:"0f45df95",31:"ad6835f8",32:"a774c9c2",33:"0cf3b132",34:"7057d601",35:"51cf6e5e",36:"b568803c",37:"3c7ec9cd",38:"7d2b8c73",39:"6409b930",40:"e22eb885",41:"aaf763e4",42:"2bfcd3dd",43:"4a75d8de",44:"5cb4a6a3",45:"ec262224",46:"056223e9",47:"2c59e278",48:"6fb4d9ba",49:"a606d50d",50:"31accd70",51:"fd4b7554",52:"20d40ff4",53:"b418751e",54:"fa6cd51c",55:"2210688a",56:"8b634fbd",57:"9c6d1d12",58:"5a32e9a7",59:"87518934",60:"41841ff9",61:"77a6696c",62:"a292a990",63:"1b2a555f",64:"e138268c",65:"a90ccdc8",66:"ec1a883e",67:"3c61f745",68:"c798c22b",69:"80cd17b1",70:"d9cdfd44",71:"80c4c03f",72:"46ed9b20",73:"d7ec0ae7",74:"8e29a4af",75:"09e5ebbe",76:"a56f1356",77:"f8f0cb02",78:"f075db77",79:"6cfdca0e",80:"489f3602",81:"f1e40f46",82:"5db0a09b",83:"acabea73",84:"cfa6afe5",85:"604456ad",86:"2c55cbf7",87:"398da942",88:"d15bb588",89:"5e0eeb21",90:"edcdf6f4",91:"ca72b001",92:"17131ef8",93:"d2fbb0a2",94:"8120de71",95:"19d2c9b4",96:"3af35c12",97:"1ade093f",98:"61b6602a",99:"547505c1",100:"eeb898c4",101:"adf07d09",102:"f53f077a",103:"25ff7e23",104:"02a6634d",105:"5f6ca2bf",106:"4e8e6b97",107:"7b4a84aa",108:"1c4437c0",109:"c74574c6",110:"6ac4f142",111:"0a28bb7c",112:"5fa74d4e",113:"e38b756a",114:"e1c95e5b",115:"7cf98df3",116:"3bcf3283",117:"f94f1ad0",118:"53333c25",119:"ce513a9b",120:"fbf02d84",121:"c42cc20c",122:"abe5016d",123:"d842741f",124:"7546d395",125:"8cb421f3",126:"31f4a055",127:"ea616d71",128:"6b1f4315",129:"3fafca9c",130:"b856da25",131:"35b584b9",132:"aeb7338a",133:"0a0bc3a7",134:"5af00467",135:"547b026b",136:"5b3a0dc9",137:"0aadf206",138:"8454f12b",139:"2453d1b1",140:"63616476",141:"ded0a529",142:"fe5a6ff2",143:"1912ba90",144:"277f7035",145:"400473bd",146:"a23ffe9e",147:"77fcee94",148:"0e25f4a4",149:"194c0040",150:"17d49b14",151:"c4ff7379",152:"26196dce",153:"e034ee0a",154:"9fcf7f62",155:"5215397c",156:"267ecdf7",157:"e4c7f550",158:"d088877e",159:"4af7a823",160:"08a7c151",161:"2a60e38a",162:"c8f1b9ee",163:"1840dde3",164:"aa78f2b5",165:"d5c12a3f",166:"d50f1261",167:"33b2d023",168:"f742416a",169:"8257b386",170:"8f6f01cf",171:"0af32e81",172:"d1eb828e",173:"bdb6a562",174:"8a69ecda",175:"c8e15b94",176:"8be5a1e6",177:"07febaba",178:"4da34ab2",179:"19157d64",180:"44f01cc0",181:"8905731d",182:"56e47608",183:"724ac45e",184:"061d9ab0",185:"14dfa3de",186:"ee5b488b",187:"58f63235",188:"dbdc3880",189:"5545763d",190:"7a492562",191:"defa501e",192:"9ed423a2",193:"219899e0",194:"e6a485f6",195:"25e52c39",196:"36aebee9",197:"db356212",198:"205def1e",199:"262becc1",200:"e1958d34",201:"7f4a21ae",202:"36c09c0f",203:"4e7b68e0",204:"143ae2bf",205:"399095c5",206:"9c820d69",207:"7c2bb260",208:"69aa09e3",209:"5dba918c",210:"de38f0bd",211:"29ba907a",212:"c8e1e264",213:"8252c18f",214:"f478a091",215:"03039ef9",216:"d4463329",217:"72aa0b8b",218:"f861a152",219:"8ae38ae3",220:"717b57f0",221:"fe741d4d",222:"a1665bdc",223:"2a5c5652",224:"9007beb7",225:"d992c5ba",226:"64e4a563",227:"01b9cc09",228:"bd73165b",229:"c011a924",230:"e536a904",231:"42217e60",232:"bb7ccc47",235:"30963dc0",236:"908f536c"}[e]+".js"}function t(c){if(f[c])return f[c].exports;var a=f[c]={i:c,l:!1,exports:{}};return e[c].call(a.exports,a,a.exports,t),a.l=!0,a.exports}t.e=function(e){var c=[],a=b[e];if(0!==a)if(a)c.push(a[2]);else{var f=new Promise((function(c,f){a=b[e]=[c,f]}));c.push(a[2]=f);var d,n=document.createElement("script");n.charset="utf-8",n.timeout=120,t.nc&&n.setAttribute("nonce",t.nc),n.src=r(e);var o=new Error;d=function(c){n.onerror=n.onload=null,clearTimeout(u);var a=b[e];if(0!==a){if(a){var f=c&&("load"===c.type?"missing":c.type),d=c&&c.target&&c.target.src;o.message="Loading chunk "+e+" failed.\n("+f+": "+d+")",o.name="ChunkLoadError",o.type=f,o.request=d,a[1](o)}b[e]=void 0}};var u=setTimeout((function(){d({type:"timeout",target:n})}),12e4);n.onerror=n.onload=d,document.head.appendChild(n)}return Promise.all(c)},t.m=e,t.c=f,t.d=function(e,c,a){t.o(e,c)||Object.defineProperty(e,c,{enumerable:!0,get:a})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,c){if(1&c&&(e=t(e)),8&c)return e;if(4&c&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(t.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&c&&"string"!=typeof e)for(var f in e)t.d(a,f,function(c){return e[c]}.bind(null,f));return a},t.n=function(e){var c=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(c,"a",c),c},t.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},t.p="/wave/",t.gca=function(e){return r(e={10172759:"11",17896441:"23",26907763:"37",38067279:"57",48786391:"75",93896215:"134","01a85c17":"4","0923c366":"5","0965cdf6":"6","0a6c0f5b":"7","0eb58673":"8","0f2a58c8":"9","0fd1debb":"10","109e456e":"12","11e3ce2c":"13","121dd878":"14","126e0b0e":"15","12e676cf":"16","135cee2a":"17","1375ade1":"18","1486e3bc":"19","15837ef3":"20","15a78352":"21","174d8305":"22","17b5adee":"24","18fdb351":"25","190e4f21":"26","1a4f1376":"27","1ac8922b":"28","1ae86ebe":"29","1b0f8c91":"30","1c59264e":"31","1cc3ff79":"32","1f7c204c":"33","207f87c1":"34","22188a36":"35","2673e11f":"36","273cfbdf":"38","28283d16":"39","2868cdab":"40","296a8b4f":"41","2bf08973":"42","2db704cb":"43","2fa9e1ff":"44","31c3c419":"45","31f8b56c":"46","34cd3da4":"47","3570154c":"48","3584c003":"49","35dabcf3":"50","360edac9":"51","3697284d":"52","36db7894":"53","36fe3260":"54","3713dbfc":"55","37382beb":"56","3aa768f5":"58","3abe8fb9":"59","3b464fa6":"60","3b64911a":"61","3b8c55ea":"62","3f5dd320":"63","4104f38c":"64","41849bc6":"65","424c54c2":"66","430c4fb3":"67","452608cb":"68","4612f97b":"69","4657d646":"70","472f8a66":"71","4784cd26":"72","47a365f9":"73","47b3e1f7":"74","4ab7b8a0":"76","4b953dd8":"77","4d54d076":"78","4e3b2ad1":"79","4f49ed83":"80","4f6dabb0":"81","4fc0cd6f":"82","50b74c5f":"83","5168cb29":"84","5281b7a2":"85","53da2547":"86","549ea605":"87","54aab825":"88","58b13b12":"89","5a34328a":"90","5e52c414":"91","5e8c322a":"92","600ae505":"93","60759c05":"94","6264312d":"95","6405c95c":"96","649e08dd":"97","65b8ef03":"98","661410ac":"99","6875c492":"100","692ea9bc":"101","6c3eb428":"102","6ce0e474":"103","6d36af6b":"104","6eb0e506":"105","6ee3bac7":"106","718f151f":"107","746a1919":"108","77770fc3":"109","79d0d182":"110","7c1cba9e":"111","7ca2f128":"112","7d1cd1c9":"113","7d744a8f":"114","7ecd2c5c":"115","7f8f4b62":"116","82f75f63":"117","8542acf3":"118","854481fc":"119","879fc8a6":"120","883d6399":"121","887b127f":"122","88c2f924":"123","8954e356":"124","8c12d624":"125","8c8ea2c1":"126","8e9f0a8a":"127","8eaf94d7":"128","8f030830":"129","9152460a":"130","917fcb62":"131","935f2afb":"132","9363aca1":"133","941b9d10":"135","948118d6":"136","950656ac":"137","9747bb1a":"138","97d9aba4":"139","97e78655":"140","996e93c8":"141","997fea1d":"142","9a52a2f7":"143","9ed00105":"144",a50fe136:"145",a54511d2:"146",a64331b1:"147",a6aa9e1f:"148",a814b970:"149",a8b2a833:"150",a8bb5334:"151",a8dc7269:"152",a9331674:"153",aa7f648d:"154",aa9ca283:"155",ac27f894:"156",af172acd:"157",b140a32d:"158",b18fb770:"159",b1e50d5a:"160",b22f7242:"161",b81c5e46:"162",b8435c12:"163",b999a6e4:"164",b9e4d6e6:"165",b9f028e1:"166",ba1aeef8:"167",bb5446ac:"168",bbdd3825:"169",bd0b0bbe:"170",bd7ed1d7:"171",bdc330a7:"172",bdd709f1:"173",bf614533:"174",c07c3c71:"175",c0ac41fc:"176",c0b6bb44:"177",c10c720e:"178",c1570962:"179",c1cf1fe4:"180",c4f5d8e4:"181",c641a4e8:"182",c7b62599:"183",c87c151a:"184",c9e5c590:"185",ca1ac85d:"186",ca622d62:"187",cc0ea0cf:"188",ccc49370:"189",cd329814:"190",ce88eaaa:"191",d05981be:"192",d145135f:"193",d3f54ca5:"194",d4ee2b4f:"195",d589d3a7:"196",d610846f:"197",d8689276:"198",d8aa093c:"199",db32d859:"200",dc705eb8:"201",dceb90d2:"202",de02e8e6:"203",e013439f:"204",e32c5859:"205",e4e8fb51:"206",e7ba74f4:"207",e7c32899:"208",e833177e:"209",e8c1c6e8:"210",e96704c5:"211",eb2bb38c:"212",ecdac497:"213",ed3db3ec:"214",eec6e613:"215",f09ebdf1:"216",f132454a:"217",f151ab1a:"218",f1ec6cfa:"219",f21433ff:"220",f21d2ab0:"221",f3473c5b:"222",f349fb86:"223",f60be60c:"224",f7ea47c5:"225",f811e444:"226",f846e950:"227",faf81df8:"228",fbe93038:"229",fcfc3752:"230",fd056868:"231",fe4d4432:"232"}[e]||e)},t.oe=function(e){throw console.error(e),e};var n=window.webpackJsonp=window.webpackJsonp||[],o=n.push.bind(n);n.push=c,n=n.slice();for(var u=0;u<n.length;u++)c(n[u]);var i=o;a()}([]);
\ No newline at end of file
diff --git a/docs/runtime~main.b200dec9.js b/docs/runtime~main.b200dec9.js
new file mode 100644
index 0000000000..f565ee3c36
--- /dev/null
+++ b/docs/runtime~main.b200dec9.js
@@ -0,0 +1 @@
+!function(e){function c(c){for(var f,r,t=c[0],n=c[1],o=c[2],u=0,l=[];u<t.length;u++)r=t[u],Object.prototype.hasOwnProperty.call(b,r)&&b[r]&&l.push(b[r][0]),b[r]=0;for(f in n)Object.prototype.hasOwnProperty.call(n,f)&&(e[f]=n[f]);for(i&&i(c);l.length;)l.shift()();return d.push.apply(d,o||[]),a()}function a(){for(var e,c=0;c<d.length;c++){for(var a=d[c],f=!0,r=1;r<a.length;r++){var n=a[r];0!==b[n]&&(f=!1)}f&&(d.splice(c--,1),e=t(t.s=a[0]))}return e}var f={},b={236:0},d=[];function r(e){return t.p+""+({4:"01a85c17",5:"08f25880",6:"0923c366",7:"0965cdf6",8:"0a6c0f5b",9:"0eb58673",10:"0f2a58c8",11:"0fd1debb",12:"10172759",13:"109e456e",14:"11e3ce2c",15:"121dd878",16:"126e0b0e",17:"12e676cf",18:"135cee2a",19:"1375ade1",20:"1486e3bc",21:"15837ef3",22:"15a78352",23:"174d8305",24:"17896441",25:"17b5adee",26:"18fdb351",27:"190e4f21",28:"1a20bc57",29:"1a4f1376",30:"1ac8922b",31:"1ae86ebe",32:"1b0f8c91",33:"1c59264e",34:"1cc3ff79",35:"1f7c204c",36:"207f87c1",37:"22188a36",38:"2673e11f",39:"26907763",40:"26a8c297",41:"273cfbdf",42:"28283d16",43:"296a8b4f",44:"2bf08973",45:"2db704cb",46:"2dd92585",47:"2e8e6962",48:"2fa9e1ff",49:"31c3c419",50:"31f8b56c",51:"34cd3da4",52:"3584c003",53:"35dabcf3",54:"360edac9",55:"3697284d",56:"36db7894",57:"36fe3260",58:"3713dbfc",59:"37382beb",60:"38067279",61:"3aa768f5",62:"3abe8fb9",63:"3ae7008e",64:"3b464fa6",65:"3b64911a",66:"3b8c55ea",67:"3da9dc01",68:"3f5dd320",69:"4104f38c",70:"41849bc6",71:"424c54c2",72:"430c4fb3",73:"452608cb",74:"4612f97b",75:"472f8a66",76:"4784cd26",77:"47a365f9",78:"47b3e1f7",79:"48786391",80:"4ab7b8a0",81:"4b953dd8",82:"4d54d076",83:"4e3b2ad1",84:"4f49ed83",85:"4f6dabb0",86:"50b74c5f",87:"5168cb29",88:"5281b7a2",89:"53da2547",90:"549ea605",91:"54aab825",92:"58b13b12",93:"5a34328a",94:"5e52c414",95:"5e8c322a",96:"600ae505",97:"6264312d",98:"6405c95c",99:"649e08dd",100:"65b8ef03",101:"661410ac",102:"6875c492",103:"692ea9bc",104:"6c3eb428",105:"6ce0e474",106:"6d36af6b",107:"6eb0e506",108:"6ee3bac7",109:"718f151f",110:"746a1919",111:"77770fc3",112:"79d0d182",113:"7c1cba9e",114:"7ca2f128",115:"7d1cd1c9",116:"7d744a8f",117:"7ecd2c5c",118:"7f8f4b62",119:"82f75f63",120:"8542acf3",121:"854481fc",122:"879fc8a6",123:"883d6399",124:"887b127f",125:"88c2f924",126:"8954e356",127:"8c12d624",128:"8c8ea2c1",129:"8caadd29",130:"8eaf94d7",131:"8f030830",132:"9152460a",133:"917fcb62",134:"935f2afb",135:"9363aca1",136:"941b9d10",137:"948118d6",138:"950656ac",139:"9747bb1a",140:"97d9aba4",141:"97e78655",142:"996e93c8",143:"997fea1d",144:"9a52a2f7",145:"9ed00105",146:"a3713279",147:"a50fe136",148:"a54511d2",149:"a64331b1",150:"a6aa9e1f",151:"a814b970",152:"a8b2a833",153:"a8bb5334",154:"a8dc7269",155:"a9331674",156:"aa7f648d",157:"aa9ca283",158:"ac27f894",159:"b140a32d",160:"b18fb770",161:"b1e50d5a",162:"b22f7242",163:"b4d5475e",164:"b81c5e46",165:"b8435c12",166:"b999a6e4",167:"b9e4d6e6",168:"b9f028e1",169:"ba1aeef8",170:"bb5446ac",171:"bbdd3825",172:"bd0b0bbe",173:"bd7ed1d7",174:"bdc330a7",175:"bf614533",176:"c07c3c71",177:"c0ac41fc",178:"c0b6bb44",179:"c10c720e",180:"c1570962",181:"c1cf1fe4",182:"c4f5d8e4",183:"c641a4e8",184:"c7b62599",185:"c87c151a",186:"c9e5c590",187:"ca1ac85d",188:"ca622d62",189:"ca84abdc",190:"cc0ea0cf",191:"ccc49370",192:"cd329814",193:"ce88eaaa",194:"d05981be",195:"d145135f",196:"d3f54ca5",197:"d4ee2b4f",198:"d589d3a7",199:"d8689276",200:"d8aa093c",201:"db32d859",202:"dc705eb8",203:"dceb90d2",204:"de02e8e6",205:"e013439f",206:"e32c5859",207:"e4e8fb51",208:"e7ad456d",209:"e7ba74f4",210:"e7c32899",211:"e833177e",212:"e8c1c6e8",213:"e96704c5",214:"eb2bb38c",215:"ecdac497",216:"ed3db3ec",217:"eec6e613",218:"f09ebdf1",219:"f132454a",220:"f151ab1a",221:"f1ec6cfa",222:"f21433ff",223:"f21d2ab0",224:"f3473c5b",225:"f349fb86",226:"f60be60c",227:"f7ea47c5",228:"f811e444",229:"f846e950",230:"faf81df8",231:"fbe93038",232:"fcfc3752",233:"fd056868",234:"fe4d4432"}[e]||e)+"."+{1:"4dafcaaf",2:"e94e8fdd",3:"c0e07a77",4:"0bb633f0",5:"4ddb9f20",6:"97f55dcc",7:"047d8432",8:"da8efe17",9:"d66df410",10:"a9787338",11:"b46ad397",12:"8473a602",13:"d3998c59",14:"37112f66",15:"8a593ca4",16:"d1ed6129",17:"1dfd58b3",18:"4fa48724",19:"05444f9b",20:"a05fa83f",21:"07844001",22:"e2b911ca",23:"6a9b0564",24:"7487f7bf",25:"db532509",26:"95cf7208",27:"969e5a0e",28:"a5744ee9",29:"30660dfb",30:"6db144ec",31:"c0744f6c",32:"42e9bcf0",33:"021a8962",34:"d36455e4",35:"d6a6621a",36:"b4d9440d",37:"59773ffa",38:"e32a7b66",39:"78a84cc6",40:"6b0d8d74",41:"bacb6f0e",42:"58230099",43:"a8ff9479",44:"fc6ef6b5",45:"20816776",46:"1591767e",47:"0ed74d46",48:"04d2dc0e",49:"2f652d9f",50:"08e34e2c",51:"553abcee",52:"2b36572c",53:"e798e443",54:"7fb4d54a",55:"4cf13213",56:"0f123971",57:"e056d46d",58:"7d7ab8fd",59:"297f4f29",60:"fc1a43b6",61:"97cc5998",62:"3bd27d47",63:"f2eb3c38",64:"92e89dc0",65:"84bb370d",66:"20d79e43",67:"f77c7e94",68:"9f9d5e6d",69:"fb19bd1a",70:"f2d0991e",71:"8d2425bb",72:"19a43eed",73:"42528341",74:"b25589f7",75:"59021c64",76:"a4fc6f8a",77:"7354e3ea",78:"ea95f335",79:"4818219b",80:"4ff6fba6",81:"6b813e7d",82:"6d426b8b",83:"e683ccc6",84:"1adef9c5",85:"3f205608",86:"d998e0a5",87:"4350d716",88:"12637c8c",89:"4046d6ef",90:"33db492b",91:"596afbb9",92:"2dd6b897",93:"36cd7ed4",94:"cd86e889",95:"cd3a7a36",96:"52d994e5",97:"3911a400",98:"cefe993a",99:"a9f770b1",100:"db9d04d0",101:"d9824032",102:"0137459c",103:"12fddb0c",104:"d37e8fa8",105:"ce87120c",106:"55a53883",107:"abebf02f",108:"80ea67bd",109:"ce6db67f",110:"859c4175",111:"15e246fd",112:"ff62555f",113:"b72820b2",114:"7cfe34ab",115:"1f4be8b0",116:"a414f615",117:"9a5da8e4",118:"5c0f0fc4",119:"4e923452",120:"6c384a58",121:"873ddd4f",122:"e5d1f893",123:"a175ce7a",124:"5b9fbd78",125:"37061093",126:"31b01aa7",127:"0b6c818a",128:"6ffd1b1a",129:"8215dca6",130:"f12b9f2f",131:"b746ca66",132:"42fa5a7f",133:"5fdef126",134:"d4745991",135:"ce054208",136:"391830c3",137:"1ba3a36f",138:"0ccaa8ab",139:"5bab2aa6",140:"04f448bb",141:"60b6caf9",142:"836b1f20",143:"d3b55233",144:"25d15099",145:"ca11321b",146:"d69af334",147:"b26e4f55",148:"0cfeb42e",149:"a104ef64",150:"29345e50",151:"9c5f6aec",152:"806669fa",153:"b90d4b57",154:"14bf2db2",155:"965a7491",156:"e4f6c194",157:"79c8caef",158:"25e9c805",159:"fc920547",160:"7856e763",161:"81243680",162:"be8d2b44",163:"dd3985c3",164:"e3f1d216",165:"a4ac6d35",166:"b163bfee",167:"94216ee5",168:"76e1b947",169:"421c8e2f",170:"b79cbe54",171:"5e58d881",172:"d16ca985",173:"9faa1af2",174:"2904007d",175:"e9f653e2",176:"61abccad",177:"43ca1f95",178:"58e31668",179:"0173a8d3",180:"e4a00ed0",181:"af8593f1",182:"4fc6a1ee",183:"437ff80d",184:"b49ba390",185:"4b34076d",186:"a5a4891c",187:"45e0ea7b",188:"8941bf61",189:"cb7c606e",190:"39c2181e",191:"847efd16",192:"ee103b68",193:"795d7cfb",194:"375a90cf",195:"9c24e637",196:"47bd0228",197:"e3cdbd48",198:"7779cab6",199:"c08cd42b",200:"abea6469",201:"4bcf621d",202:"0944bfc8",203:"f2ed4112",204:"9c87a59f",205:"9b377459",206:"afb5fae3",207:"f6621ec9",208:"8574afa5",209:"0bd15322",210:"ee888209",211:"6f3c86db",212:"5a21f0e6",213:"57ed2674",214:"3448601c",215:"e79d40df",216:"c5ffd957",217:"2511e3b9",218:"fafc5207",219:"996a8617",220:"efb732bc",221:"90acea76",222:"738455b0",223:"549d1c33",224:"ff1378dc",225:"689afca8",226:"c40d6c3e",227:"f9a0edd9",228:"acf97bbf",229:"e91bfc98",230:"e782e9d4",231:"988a69e9",232:"1ceac70b",233:"c9138dea",234:"25e593e1",237:"a770d6f5",238:"cf1fd2bd"}[e]+".js"}function t(c){if(f[c])return f[c].exports;var a=f[c]={i:c,l:!1,exports:{}};return e[c].call(a.exports,a,a.exports,t),a.l=!0,a.exports}t.e=function(e){var c=[],a=b[e];if(0!==a)if(a)c.push(a[2]);else{var f=new Promise((function(c,f){a=b[e]=[c,f]}));c.push(a[2]=f);var d,n=document.createElement("script");n.charset="utf-8",n.timeout=120,t.nc&&n.setAttribute("nonce",t.nc),n.src=r(e);var o=new Error;d=function(c){n.onerror=n.onload=null,clearTimeout(u);var a=b[e];if(0!==a){if(a){var f=c&&("load"===c.type?"missing":c.type),d=c&&c.target&&c.target.src;o.message="Loading chunk "+e+" failed.\n("+f+": "+d+")",o.name="ChunkLoadError",o.type=f,o.request=d,a[1](o)}b[e]=void 0}};var u=setTimeout((function(){d({type:"timeout",target:n})}),12e4);n.onerror=n.onload=d,document.head.appendChild(n)}return Promise.all(c)},t.m=e,t.c=f,t.d=function(e,c,a){t.o(e,c)||Object.defineProperty(e,c,{enumerable:!0,get:a})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,c){if(1&c&&(e=t(e)),8&c)return e;if(4&c&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(t.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&c&&"string"!=typeof e)for(var f in e)t.d(a,f,function(c){return e[c]}.bind(null,f));return a},t.n=function(e){var c=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(c,"a",c),c},t.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},t.p="/wave/",t.gca=function(e){return r(e={10172759:"12",17896441:"24",26907763:"39",38067279:"60",48786391:"79","01a85c17":"4","08f25880":"5","0923c366":"6","0965cdf6":"7","0a6c0f5b":"8","0eb58673":"9","0f2a58c8":"10","0fd1debb":"11","109e456e":"13","11e3ce2c":"14","121dd878":"15","126e0b0e":"16","12e676cf":"17","135cee2a":"18","1375ade1":"19","1486e3bc":"20","15837ef3":"21","15a78352":"22","174d8305":"23","17b5adee":"25","18fdb351":"26","190e4f21":"27","1a20bc57":"28","1a4f1376":"29","1ac8922b":"30","1ae86ebe":"31","1b0f8c91":"32","1c59264e":"33","1cc3ff79":"34","1f7c204c":"35","207f87c1":"36","22188a36":"37","2673e11f":"38","26a8c297":"40","273cfbdf":"41","28283d16":"42","296a8b4f":"43","2bf08973":"44","2db704cb":"45","2dd92585":"46","2e8e6962":"47","2fa9e1ff":"48","31c3c419":"49","31f8b56c":"50","34cd3da4":"51","3584c003":"52","35dabcf3":"53","360edac9":"54","3697284d":"55","36db7894":"56","36fe3260":"57","3713dbfc":"58","37382beb":"59","3aa768f5":"61","3abe8fb9":"62","3ae7008e":"63","3b464fa6":"64","3b64911a":"65","3b8c55ea":"66","3da9dc01":"67","3f5dd320":"68","4104f38c":"69","41849bc6":"70","424c54c2":"71","430c4fb3":"72","452608cb":"73","4612f97b":"74","472f8a66":"75","4784cd26":"76","47a365f9":"77","47b3e1f7":"78","4ab7b8a0":"80","4b953dd8":"81","4d54d076":"82","4e3b2ad1":"83","4f49ed83":"84","4f6dabb0":"85","50b74c5f":"86","5168cb29":"87","5281b7a2":"88","53da2547":"89","549ea605":"90","54aab825":"91","58b13b12":"92","5a34328a":"93","5e52c414":"94","5e8c322a":"95","600ae505":"96","6264312d":"97","6405c95c":"98","649e08dd":"99","65b8ef03":"100","661410ac":"101","6875c492":"102","692ea9bc":"103","6c3eb428":"104","6ce0e474":"105","6d36af6b":"106","6eb0e506":"107","6ee3bac7":"108","718f151f":"109","746a1919":"110","77770fc3":"111","79d0d182":"112","7c1cba9e":"113","7ca2f128":"114","7d1cd1c9":"115","7d744a8f":"116","7ecd2c5c":"117","7f8f4b62":"118","82f75f63":"119","8542acf3":"120","854481fc":"121","879fc8a6":"122","883d6399":"123","887b127f":"124","88c2f924":"125","8954e356":"126","8c12d624":"127","8c8ea2c1":"128","8caadd29":"129","8eaf94d7":"130","8f030830":"131","9152460a":"132","917fcb62":"133","935f2afb":"134","9363aca1":"135","941b9d10":"136","948118d6":"137","950656ac":"138","9747bb1a":"139","97d9aba4":"140","97e78655":"141","996e93c8":"142","997fea1d":"143","9a52a2f7":"144","9ed00105":"145",a3713279:"146",a50fe136:"147",a54511d2:"148",a64331b1:"149",a6aa9e1f:"150",a814b970:"151",a8b2a833:"152",a8bb5334:"153",a8dc7269:"154",a9331674:"155",aa7f648d:"156",aa9ca283:"157",ac27f894:"158",b140a32d:"159",b18fb770:"160",b1e50d5a:"161",b22f7242:"162",b4d5475e:"163",b81c5e46:"164",b8435c12:"165",b999a6e4:"166",b9e4d6e6:"167",b9f028e1:"168",ba1aeef8:"169",bb5446ac:"170",bbdd3825:"171",bd0b0bbe:"172",bd7ed1d7:"173",bdc330a7:"174",bf614533:"175",c07c3c71:"176",c0ac41fc:"177",c0b6bb44:"178",c10c720e:"179",c1570962:"180",c1cf1fe4:"181",c4f5d8e4:"182",c641a4e8:"183",c7b62599:"184",c87c151a:"185",c9e5c590:"186",ca1ac85d:"187",ca622d62:"188",ca84abdc:"189",cc0ea0cf:"190",ccc49370:"191",cd329814:"192",ce88eaaa:"193",d05981be:"194",d145135f:"195",d3f54ca5:"196",d4ee2b4f:"197",d589d3a7:"198",d8689276:"199",d8aa093c:"200",db32d859:"201",dc705eb8:"202",dceb90d2:"203",de02e8e6:"204",e013439f:"205",e32c5859:"206",e4e8fb51:"207",e7ad456d:"208",e7ba74f4:"209",e7c32899:"210",e833177e:"211",e8c1c6e8:"212",e96704c5:"213",eb2bb38c:"214",ecdac497:"215",ed3db3ec:"216",eec6e613:"217",f09ebdf1:"218",f132454a:"219",f151ab1a:"220",f1ec6cfa:"221",f21433ff:"222",f21d2ab0:"223",f3473c5b:"224",f349fb86:"225",f60be60c:"226",f7ea47c5:"227",f811e444:"228",f846e950:"229",faf81df8:"230",fbe93038:"231",fcfc3752:"232",fd056868:"233",fe4d4432:"234"}[e]||e)},t.oe=function(e){throw console.error(e),e};var n=window.webpackJsonp=window.webpackJsonp||[],o=n.push.bind(n);n.push=c,n=n.slice();for(var u=0;u<n.length;u++)c(n[u]);var i=o;a()}([]);
\ No newline at end of file
diff --git a/docs/sitemap.xml b/docs/sitemap.xml
index 7bb2835a55..cccab6cd35 100644
--- a/docs/sitemap.xml
+++ b/docs/sitemap.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url><loc>https://h2oai.github.io/wave/</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/blog</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/blog/hello-world</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/blog/hola</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/blog/tags</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/blog/tags/docusaurus</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/blog/tags/facebook</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/blog/tags/hello</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/blog/tags/hola</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/blog/welcome</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/_start_q</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/api/autoreload</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/api/core</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/api/db</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/api/graphics</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/api/index</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/api/server</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/api/test</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/api/types</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/api/ui</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/apps</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/architecture</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/arguments</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/backup</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/browser-testing</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/buffers</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/cards</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/change-log</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/components</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/configuration</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/contributing</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/development</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/enterprise/</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/enterprise/basic-concepts</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/enterprise/developer-guide</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/breadcrumbs</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/button</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/buttons</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/card-menu</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/checkbox</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/checklist</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/choice-group</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/color-picker</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/combobox</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/counter-broadcast</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/counter-global</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/counter-multicast</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/counter-unicast</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/dashboard</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/date-picker</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/date-picker-trigger</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/dropdown</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/file-upload</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/form</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/form-frame</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/form-frame-path</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/form-markup</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/form-menu</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/form-template</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/frame</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/frame-path</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/glider-gun</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/graphics-clock</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/graphics-hilbert</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/graphics-path</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/graphics-primitives</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/graphics-spline</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/graphics-turtle</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/hash-routing</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/header</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/hello-world</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/image</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/issue-tracker</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/label</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/layout</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/layout-size</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/link</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/markdown</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/markdown-data</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/markup</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/message-bar</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/meta-notification</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/meta-redirect</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/meta-refresh</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/meta-title</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/nav</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/picker</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/picker-selection</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/pixel-art</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-altair</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-area</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-area-groups</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-area-line</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-area-line-groups</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-area-line-smooth</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-area-negative</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-area-range</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-area-smooth</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-area-stacked</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-axis-title</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-bokeh</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-d3</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-form</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-histogram</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-annotation</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-annotation-transpose</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-groups</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-groups-transpose</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-helix</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-labels</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-polar</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-polar-stacked</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-range</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-range-transpose</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-stacked</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-stacked-grouped</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-stacked-grouped-transpose</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-stacked-transpose</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-theta</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-transpose</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-line</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-line-annotation</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-line-groups</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-line-labels</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-line-labels-no-overlap</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-line-labels-stroked</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-line-smooth</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-matplotlib</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-path</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-path-point</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-path-smooth</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-plotly</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-point</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-point-annotation</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-point-custom</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-point-groups</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-point-map</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-point-shapes</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-point-sizes</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-polygon</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-step</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-step-after</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-step-before</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-vegalite</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-vegalite-form</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-vegalite-update</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/progress</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/progress-update</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/range-slider</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/separator</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/slider</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/spinbox</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-large</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-large-bar</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-small</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-small-series-area</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-small-series-interval</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-tall-gauge</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-tall-series-area</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-tall-series-interval</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-wide-bar</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-wide-gauge</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-wide-series-area</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-wide-series-interval</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stepper</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/swatch-picker</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/tab</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/tab-delete</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/tab-link</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/tab-routing</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/table</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/table-download</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/table-filter</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/table-filter-backend</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/table-groupby</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/table-markdown</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/table-search</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/table-select</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/table-sort</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/tabs</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/template</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/template-data</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/text</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/text-sizes</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/textbox</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/textbox-trigger</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/todo</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/toggle</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/toolbar</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/toolbar-routing</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/upload</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/upload-async</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/upload-download</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/upload-ui</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/wizard</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/expressions</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/files</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/getting-started</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/graphics</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/guide</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/installation</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/layout</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/logging</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/migrating-0</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/pages</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/plotting</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/realtime</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/routing</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/scripts</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/security</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/state</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/testing</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/tour</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/tutorial-beer</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/tutorial-counter</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/tutorial-hello</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/tutorial-monitor</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/tutorial-todo</loc><changefreq>weekly</changefreq><priority>0.5</priority></url></urlset>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url><loc>https://h2oai.github.io/wave/</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/blog</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/blog/release-0.9.0</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/blog/tags</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/blog/tags/release</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/_start_q</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/api/autoreload</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/api/cli</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/api/core</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/api/db</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/api/graphics</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/api/index</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/api/server</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/api/test</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/api/types</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/api/ui</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/apps</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/architecture</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/arguments</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/background</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/backup</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/browser-testing</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/buffers</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/cards</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/change-log</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/cli</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/components</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/configuration</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/contributing</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/deployment</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/development</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/enterprise/</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/enterprise/basic-concepts</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/enterprise/developer-guide</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/background</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/background-executor</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/breadcrumbs</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/button</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/buttons</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/card-menu</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/checkbox</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/checklist</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/choice-group</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/color-picker</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/combobox</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/counter-broadcast</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/counter-global</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/counter-multicast</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/counter-unicast</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/dashboard</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/date-picker</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/date-picker-trigger</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/dropdown</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/file-upload</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/form</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/form-frame</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/form-frame-path</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/form-markup</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/form-menu</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/form-template</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/frame</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/frame-path</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/glider-gun</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/graphics-clock</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/graphics-hilbert</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/graphics-path</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/graphics-primitives</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/graphics-spline</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/graphics-turtle</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/hash-routing</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/header</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/hello-world</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/image</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/issue-tracker</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/label</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/layout</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/layout-size</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/link</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/markdown</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/markdown-data</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/markup</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/message-bar</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/meta-icon</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/meta-notification</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/meta-redirect</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/meta-refresh</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/meta-title</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/nav</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/picker</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/picker-selection</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/pixel-art</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-altair</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-area</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-area-groups</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-area-line</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-area-line-groups</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-area-line-smooth</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-area-negative</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-area-range</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-area-smooth</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-area-stacked</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-axis-title</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-bokeh</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-d3</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-form</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-histogram</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-annotation</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-annotation-transpose</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-groups</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-groups-transpose</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-helix</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-labels</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-polar</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-polar-stacked</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-range</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-range-transpose</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-stacked</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-stacked-grouped</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-stacked-grouped-transpose</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-stacked-transpose</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-theta</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-interval-transpose</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-line</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-line-annotation</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-line-groups</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-line-labels</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-line-labels-no-overlap</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-line-labels-stroked</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-line-smooth</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-matplotlib</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-path</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-path-point</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-path-smooth</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-plotly</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-point</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-point-annotation</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-point-custom</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-point-groups</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-point-map</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-point-shapes</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-point-sizes</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-polygon</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-step</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-step-after</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-step-before</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-vegalite</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-vegalite-form</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/plot-vegalite-update</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/progress</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/progress-update</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/range-slider</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/separator</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/site-async</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/slider</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/spinbox</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-large</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-large-bar</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-small</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-small-series-area</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-small-series-interval</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-tall-gauge</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-tall-series-area</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-tall-series-interval</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-wide-bar</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-wide-gauge</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-wide-series-area</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stat-wide-series-interval</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/stepper</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/swatch-picker</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/tab</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/tab-delete</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/tab-link</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/tab-routing</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/table</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/table-download</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/table-filter</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/table-filter-backend</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/table-groupby</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/table-markdown</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/table-search</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/table-select</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/table-sort</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/tabs</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/template</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/template-data</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/text</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/text-sizes</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/textbox</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/textbox-trigger</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/todo</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/toggle</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/toolbar</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/toolbar-routing</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/upload</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/upload-async</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/upload-download</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/upload-ui</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/examples/wizard</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/expressions</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/files</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/getting-started</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/graphics</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/guide</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/installation</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/layout</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/logging</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/migrating-0</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/migrating-0-8</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/pages</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/plotting</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/realtime</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/routing</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/scripts</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/security</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/state</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/testing</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/tour</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/tutorial-beer</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/tutorial-counter</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/tutorial-hello</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/tutorial-monitor</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://h2oai.github.io/wave/docs/tutorial-todo</loc><changefreq>weekly</changefreq><priority>0.5</priority></url></urlset>
\ No newline at end of file
diff --git a/docs/styles.f5ed2e52.js b/docs/styles.f2d89f88.js
similarity index 85%
rename from docs/styles.f5ed2e52.js
rename to docs/styles.f2d89f88.js
index 3dd3050582..403a8066ac 100644
--- a/docs/styles.f5ed2e52.js
+++ b/docs/styles.f2d89f88.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{15:function(e,n,o){},154:function(e,n,o){e.exports={blogPostTitle:"blogPostTitle_1mse",blogPostDate:"blogPostDate_3bQP"}},235:function(e,n,o){e.exports={heroBanner:"heroBanner_2Ftp",buttons:"buttons_1Wc3",features:"features_P2SU",feature:"feature_24Br"}},38:function(e,n,o){},41:function(e,n,o){},42:function(e,n,o){},46:function(e,n,o){e.exports={tableOfContents:"tableOfContents_3SO_",docItemContainer:"docItemContainer_2n-t"}},47:function(e,n,o){e.exports={codeBlockContent:"codeBlockContent_1u-d",codeBlockTitle:"codeBlockTitle_3nn1",codeBlock:"codeBlock_3iAC",codeBlockWithTitle:"codeBlockWithTitle_3QsD",copyButton:"copyButton_10dd",codeBlockLines:"codeBlockLines_b7E3"}},48:function(e,n,o){},49:function(e,n,o){e.exports={enhancedAnchor:"enhancedAnchor_2cZh"}},50:function(e,n,o){e.exports={mdxCodeBlock:"mdxCodeBlock_1XEh"}},51:function(e,n,o){e.exports={announcementBar:"announcementBar_1l0Z",announcementBarClose:"announcementBarClose_21wD",announcementBarContent:"announcementBarContent_1xni",announcementBarCloseable:"announcementBarCloseable_3Cek"}},52:function(e,n,o){e.exports={toggle:"toggle_BsTx"}},53:function(e,n,o){e.exports={displayOnlyInLargeViewport:"displayOnlyInLargeViewport_2aTZ",hideLogoText:"hideLogoText_GP-Q",navbarHideable:"navbarHideable_3046",navbarHidden:"navbarHidden_1Uo_"}},54:function(e,n,o){e.exports={footerLogoLink:"footerLogoLink_1zJy"}},55:function(e,n,o){},74:function(e,n,o){e.exports={docTitle:"docTitle_1Lrw",docItemContainer:"docItemContainer_3QWW",docItemCol:"docItemCol_2ASc",docItemWrapper:"docItemWrapper_1EkI",docLastUpdatedAt:"docLastUpdatedAt_217_"}},82:function(e,n,o){e.exports={sidebar:"sidebar_2urC",sidebarWithHideableNavbar:"sidebarWithHideableNavbar_2IoJ",sidebarLogo:"sidebarLogo_Snse",menu:"menu_5FrY",menuLinkText:"menuLinkText_2zSB",menuWithAnnouncementBar:"menuWithAnnouncementBar_18ic",sidebarMenuIcon:"sidebarMenuIcon_Dm3K",sidebarMenuCloseIcon:"sidebarMenuCloseIcon_hir9"}},83:function(e,n,o){e.exports={docPage:"docPage_2gpo",docSidebarContainer:"docSidebarContainer_3_JD",docMainContainer:"docMainContainer_3EyW"}}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{15:function(e,n,o){},156:function(e,n,o){e.exports={blogPostTitle:"blogPostTitle_1mse",blogPostDate:"blogPostDate_3bQP"}},236:function(e,n,o){e.exports={heroBanner:"heroBanner_2Ftp",buttons:"buttons_1Wc3",features:"features_P2SU",feature:"feature_24Br"}},38:function(e,n,o){},41:function(e,n,o){},42:function(e,n,o){},46:function(e,n,o){e.exports={tableOfContents:"tableOfContents_3SO_",docItemContainer:"docItemContainer_2n-t"}},47:function(e,n,o){e.exports={codeBlockContent:"codeBlockContent_1u-d",codeBlockTitle:"codeBlockTitle_3nn1",codeBlock:"codeBlock_3iAC",codeBlockWithTitle:"codeBlockWithTitle_3QsD",copyButton:"copyButton_10dd",codeBlockLines:"codeBlockLines_b7E3"}},48:function(e,n,o){},49:function(e,n,o){e.exports={enhancedAnchor:"enhancedAnchor_2cZh"}},50:function(e,n,o){e.exports={mdxCodeBlock:"mdxCodeBlock_1XEh"}},51:function(e,n,o){e.exports={announcementBar:"announcementBar_1l0Z",announcementBarClose:"announcementBarClose_21wD",announcementBarContent:"announcementBarContent_1xni",announcementBarCloseable:"announcementBarCloseable_3Cek"}},52:function(e,n,o){e.exports={toggle:"toggle_BsTx"}},53:function(e,n,o){e.exports={displayOnlyInLargeViewport:"displayOnlyInLargeViewport_2aTZ",hideLogoText:"hideLogoText_GP-Q",navbarHideable:"navbarHideable_3046",navbarHidden:"navbarHidden_1Uo_"}},54:function(e,n,o){e.exports={footerLogoLink:"footerLogoLink_1zJy"}},55:function(e,n,o){},75:function(e,n,o){e.exports={docTitle:"docTitle_1Lrw",docItemContainer:"docItemContainer_3QWW",docItemCol:"docItemCol_2ASc",docItemWrapper:"docItemWrapper_1EkI",docLastUpdatedAt:"docLastUpdatedAt_217_"}},84:function(e,n,o){e.exports={sidebar:"sidebar_2urC",sidebarWithHideableNavbar:"sidebarWithHideableNavbar_2IoJ",sidebarLogo:"sidebarLogo_Snse",menu:"menu_5FrY",menuLinkText:"menuLinkText_2zSB",menuWithAnnouncementBar:"menuWithAnnouncementBar_18ic",sidebarMenuIcon:"sidebarMenuIcon_Dm3K",sidebarMenuCloseIcon:"sidebarMenuCloseIcon_hir9"}},85:function(e,n,o){e.exports={docPage:"docPage_2gpo",docSidebarContainer:"docSidebarContainer_3_JD",docMainContainer:"docMainContainer_3EyW"}}}]);
\ No newline at end of file